/* ─── Echea block style variations ─────────────────────────────────
   Registered via functions.php register_block_style() calls.
   Slugs match the `name` arg passed to register_block_style().
   Enqueued on both wp_enqueue_scripts + enqueue_block_editor_assets
   so the editor preview matches frontend.

   NOTE: core/paragraph rendered HTML is a bare <p class="is-style-X">
   with NO `wp-block-paragraph` wrapper class. Selector must be
   `p.is-style-X`, not `.wp-block-paragraph.is-style-X`. Cover and
   separator blocks do emit their wp-block-* class — those can stay.
   ──────────────────────────────────────────────────────────────── */

/* ── Section rhythm: zero block-gap between top-level blocks ───────
   WP/TT5 default sets 1.2rem margin between .wp-site-blocks children.
   Spec has no gap between sticky header, hero cover, and section bands
   (each section owns its own vertical padding via `editorial` slug).
   Override with higher specificity than core's `:where()` selector. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ── Page sections: zero block-gap between all section bands ────────
   Two wrapper shapes exist across templates:
   1. front-page / page templates: wp:post-content renders as
      .wp-block-post-content — sections are its alignfull direct children.
   2. single / neighborhood templates: sections sit inside
      main.wp-block-group.alignfull (explicit tagName:"main" in template).
   Each section owns its vertical padding via `editorial` slug — no extra
   block-gap needed between bands. WP's :where() rules have 0 specificity
   so these class selectors win without !important. */
.wp-block-post-content > .alignfull,
main.wp-block-group.alignfull > * + * {
	margin-block-start: 0;
}

/* ── Partner strip: also zero margin-block for belt-and-suspenders ──*/
.echea-partner-strip {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* ── Card rhythm: zero auto-margin inside wp-block-column children ──
   Card patterns (dual-market-column, listing-card, journal-card) use
   explicit wp:spacer blocks + inline margins per spec — image → 32px →
   eyebrow → 14px → display copy → 22px → cta. Without this reset, WP's
   `:where(.is-layout-flow) > * { margin-block-start: 1.2rem }` stacks
   another ~19px on top of every gap, making cards feel loose. Footer
   3-col grid uses its own .footer-top-grid (CSS grid, not wp-block-column)
   so it is unaffected. */
.wp-block-column > * {
	margin-block-start: 0;
}

/* ── wp-block-column min-width on desktop ───────────────────────────
   WP core sets `.wp-block-column { min-width: 0 }` which allows flex
   items to shrink below their content min-size. Combined with
   `flex-wrap: nowrap` (set on most layout-* columns containers), a
   column can collapse to ~0px wide and text wraps one character per
   line. Seen on /contact/ §2 + §3 where rows have nowrap parents.
   Override on desktop only — mobile (≤781px) still stacks columns
   100% width per WP defaults. */
@media (min-width: 782px) {
	.wp-block-column {
		min-width: 200px;
	}
}

/* ── core/paragraph ──────────────────────────────── */

p.is-style-eyebrow-blue {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
	margin-bottom: 16px;
}

p.is-style-eyebrow-on-noir {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-5);
	opacity: 0.62;
	margin-bottom: 16px;
}

/* Eyebrow → heading gap = 16px (eyebrow's margin-bottom controls it).
   Zero both margin-top and margin-block-start — WP global styles set margin-block-start
   via :root :where(.is-layout-flow) > * and they are separate CSS properties. */
p.is-style-eyebrow-blue + :is(h1, h2, h3, h4, h5, h6),
p.is-style-eyebrow-on-noir + :is(h1, h2, h3, h4, h5, h6) {
	margin-top: 0;
	margin-block-start: 0;
}

/* Eyebrow → editorial-display / italic-spectral gap = 16px.
   WP block-gap adds margin-block-start on adjacent flow children — zero it so only
   the eyebrow's margin-bottom (16px) controls the gap, same as eyebrow → heading. */
p.is-style-eyebrow-blue + p.is-style-editorial-display,
p.is-style-eyebrow-on-noir + p.is-style-editorial-display,
p.is-style-eyebrow-blue + p.is-style-italic-spectral,
p.is-style-eyebrow-on-noir + p.is-style-italic-spectral {
	margin-top: 0;
	margin-block-start: 0;
}

/* "Where I Work" dual-market columns: hide rogue 14px wp:spacer blocks after eyebrow.
   The eyebrow margin-bottom already provides the 16px gap; the spacers add 14px extra.
   Scoped to fog background to avoid collapsing intentional hero spacers (on-noir eyebrow). */
.has-fog-background-color p.is-style-eyebrow-blue + .wp-block-spacer {
	display: none;
}

/* Heading → body paragraph gap: 20px after a section heading that follows an eyebrow.
   Scoped to the eyebrow→heading→paragraph trio to avoid affecting card/nav headings. */
p.is-style-eyebrow-blue + :is(h1, h2, h3, h4, h5, h6) + p,
p.is-style-eyebrow-on-noir + :is(h1, h2, h3, h4, h5, h6) + p {
	margin-top: 20px;
}

/* Breadcrumb — single post hero (dark cover overlay).
   Explicit white overrides WP's global link color on both light + dark bg. */
nav.echea-breadcrumb {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: #fff;
	margin-bottom: 0;
	line-height: 1;
}
nav.echea-breadcrumb a {
	color: #fff !important;   /* beats :root :where(a) global link rule */
	text-decoration: none;
	opacity: 0.75;
	transition: opacity 0.12s ease;
}
nav.echea-breadcrumb a:hover { opacity: 1; }
nav.echea-breadcrumb .echea-sep { margin: 0 10px; opacity: 0.45; }
nav.echea-breadcrumb .echea-breadcrumb-current { opacity: 0.55; }

p.is-style-term-link,
p.is-style-term-link a {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

p.is-style-editorial-display {
	font-family: var(--wp--preset--font-family--spectral);
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

p.is-style-italic-spectral {
	font-family: var(--wp--preset--font-family--spectral);
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 300;
	font-style: italic;
	line-height: 1.5;
}

p.is-style-pull-quote-on-noir {
	font-family: var(--wp--preset--font-family--spectral);
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 300;
	font-style: italic;
	line-height: 1.45;
	color: var(--wp--preset--color--accent-5);
	opacity: 0.88;
}

p.is-style-attribution-on-noir {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-5);
	opacity: 0.38;
}

p.is-style-footer-col-title {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-5);
	opacity: 0.4;
	margin-bottom: 16px;
}

p.is-style-footer-legal-small {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.75;
	color: var(--wp--preset--color--accent-5);
	opacity: 0.28;
}

p.is-style-footer-state-label {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.22em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-5);
	opacity: 0.86;
	margin-bottom: 12px;
}

p.is-style-footer-lead {
	font-family: var(--wp--preset--font-family--spectral);
	font-size: 24px;
	font-weight: 300;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--accent-5);
	opacity: 0.92;
}

p.is-style-footer-entity {
	font-family: var(--wp--preset--font-family--spectral);
	font-size: 22px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--accent-5);
	opacity: 0.92;
	margin-bottom: 12px;
}

/* Footer top region — brand lockup LEFT + 3-col sitemap RIGHT (Polish 17b grid layout
   per live canonical `.footer-brand-bar`). Mobile collapse below 1000px. */
.footer-top-grid {
	display: grid;
	grid-template-columns: minmax(300px, 1fr) minmax(520px, 1.1fr);
	gap: 48px;
	align-items: start;
}

.footer-top-grid > .wp-block-columns {
	margin-block: 0;
}

@media (max-width: 1000px) {
	.footer-top-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* Footer nav lists — no bullets (spec uses plain link divs, not <ul><li>) */
.wp-block-template-part footer ul.wp-block-list {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

/* Footer link styling — plain by default (no underline bleed from global hover style),
   hover-only underline. Scoped to footer template-part wrapper so other links unaffected. */
.wp-block-template-part footer a,
.wp-block-template-part footer .wp-block-list a,
.wp-block-template-part footer ul.wp-block-list a {
	text-decoration: none;
	color: var(--wp--preset--color--accent-5);
	opacity: 0.82;
}

.wp-block-template-part footer a:hover,
.wp-block-template-part footer .wp-block-list a:hover,
.wp-block-template-part footer ul.wp-block-list a:hover {
	opacity: 1;
}

/* Footer divider — spec: rgba(255,255,255,.08); override inline border-color from block attrs */
.footer-top-grid {
	border-bottom-color: rgba(255,255,255,.08) !important;
	border-bottom-width: 1px !important;
}

/* FL/GA legal brokerage cards — spec: .f-legal-card */
.footer-legal-card {
	padding: 22px;
	border: 1px solid rgba(255,255,255,.12);
	background: rgba(255,255,255,.02);
}

/* Copyright bar + social icons — flex row per Figma */
.footer-copyright-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 40px 28px;
	border-top: 1px solid rgba(255,255,255,.08);
	flex-wrap: wrap;
}

.footer-copyright-copy p {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 12px;
	line-height: 1.75;
	color: var(--wp--preset--color--accent-5);
	opacity: 0.58;
	margin: 0 0 4px;
}

.footer-copyright-copy p:last-child {
	margin-bottom: 0;
	font-size: 11px;
	opacity: 0.34;
	line-height: 1.8;
}

.footer-social-icons {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.footer-social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 50%;
	color: rgba(255,255,255,.55);
	text-decoration: none;
	transition: border-color 0.15s, color 0.15s;
	flex-shrink: 0;
}

.footer-social-icon:hover {
	border-color: rgba(255,255,255,.7);
	color: rgba(255,255,255,.9);
	opacity: 1;
}

@media (max-width: 640px) {
	.footer-copyright-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
}

/* ── core/cover ──────────────────────────────────── */

.wp-block-cover.is-style-hero-noir {
	min-height: 680px;
	padding: 80px var(--wp--preset--spacing--60);
}

/* WP applies constrained layout per-child (max-width:1200px; margin:auto on each child),
   not on the inner container itself. That means elements with different natural widths
   center at different x-positions. Fix: constrain + center the CONTAINER, then have
   children fill it left-aligned.

   has-global-padding would double-add root padding — zero it too. */
.wp-block-cover.is-style-hero-noir .wp-block-cover__inner-container {
	max-width: 1200px !important;
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* With inner container now 1200px and centered, override WP's per-child constraint
   so children fill the full 1200px and left-align instead of individually centering. */
.wp-block-cover.is-style-hero-noir .wp-block-cover__inner-container > * {
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}

.wp-block-cover.is-style-closing-beat-noir {
	min-height: 560px;
	padding: 104px 64px;
}

/* Beige close-block variation — designer .s-edit.s-beige rhythm. Used on
   home §close per spec; cover bg is beige (no dark overlay), H2 noir, body
   mid color. Companion to closing-beat-noir for tonal rotation across pages. */
.wp-block-cover.is-style-closing-beat-beige {
	min-height: 360px;
	padding: 80px 64px;
	background-color: var(--wp--preset--color--beige);
}

.wp-block-cover.is-style-closing-beat-beige .wp-block-cover__background {
	background-color: var(--wp--preset--color--beige) !important;
	opacity: 1;
}

.wp-block-cover.is-style-closing-beat-beige h1,
.wp-block-cover.is-style-closing-beat-beige h2,
.wp-block-cover.is-style-closing-beat-beige h3 {
	color: var(--wp--preset--color--noir);
}

.wp-block-cover.is-style-closing-beat-beige p {
	color: var(--wp--preset--color--mid);
}

/* Closing-beat CTA buttons: always center regardless of DB block justifyContent attr.
   The noir pattern has justifyContent:"center" in markup; beige DB instances may not. */
.wp-block-cover.is-style-closing-beat-beige .wp-block-buttons,
.wp-block-cover.is-style-closing-beat-noir .wp-block-buttons {
	justify-content: center;
}

/* ═══ /listing/<slug>/ §1 hero (Polish #27a) ═══════════════════════
   Full-bleed 16:9 image (background-image — no <img>) + meta block below
   with composite eyebrow + H1.title + price + 6-cell stat row. Pure
   typography per spec — no chrome on stat row except top/bottom rules.
   ──────────────────────────────────────────────────────────────── */

.echea-listing-hero {
	width: 100%;
	max-width: none;
}

.echea-listing-hero__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--noir);
	background-size: cover;
	background-position: center;
}

.echea-listing-hero__image--placeholder {
	background-color: var(--wp--preset--color--noir);
}

.echea-listing-hero__meta {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px var(--wp--preset--spacing--60) 0;
}

.echea-listing-hero__eyebrow {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--mid);
	margin: 0 0 18px;
}

.echea-listing-hero__title-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin: 0 0 36px;
}

.echea-listing-hero__title {
	font-family: var(--wp--preset--font-family--spectral);
	font-size: clamp(36px, 5vw, 60px);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--noir);
	margin: 0;
	flex: 1 1 480px;
	max-width: 22ch;
}

.echea-listing-hero__price {
	font-family: var(--wp--preset--font-family--spectral);
	font-size: clamp(28px, 3.5vw, 42px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--noir);
	margin: 0;
	white-space: nowrap;
	flex-shrink: 0;
}

.echea-listing-hero__stats {
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid var(--wp--preset--color--rule);
	display: flex;
	gap: 48px;
	flex-wrap: wrap;
}

.echea-listing-hero__stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-family: var(--wp--preset--font-family--manrope);
	color: var(--wp--preset--color--noir);
}

.echea-listing-hero__stat-label {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--mid);
}

.echea-listing-hero__stat-value {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--noir);
}

/* §2 body wrap — defeat is-layout-constrained auto-center so 720px column
   stays left-aligned (per spec listing.html:184). Without this override,
   max-width:720px column would be centered horizontally in 1200px parent. */
.wp-block-group.echea-listing-body-wrap {
	margin-left: 0 !important;
	margin-right: auto !important;
	max-width: 720px !important;
}

/* WP's .is-layout-constrained > :not() [0,4,0]!important centers all children.
   Body-wrap must start at the LEFT EDGE of the 1200px column (same as headings),
   not the padding edge. Use calc() to mirror the auto-centering offset. */
.wp-block-group.is-layout-constrained > .wp-block-group.echea-listing-body-wrap {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1200px)) / 2)) !important;
	margin-right: auto !important;
	max-width: 720px !important;
}

/* Children of body-wrap also need left-anchoring (paragraphs from shortcode
   inherit is-layout-constrained > * { margin: auto } from outer parent — kill it). */
.wp-block-group.echea-listing-body-wrap > *,
.wp-block-group.echea-listing-body-wrap p {
	margin-left: 0 !important;
	margin-right: auto !important;
	max-width: 100% !important;
}

@media (max-width: 760px) {
	.echea-listing-hero__stats {
		gap: 28px;
	}
}

/* ═══ /listing/<slug>/ hero slider + lightbox (Polish #28) ═════════
   Slider: stacked images opacity-fade w/ prev/next + count + view-all.
   Lightbox: fullscreen overlay w/ keyboard nav + click-outside close. */

.echea-hero-slider {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--wp--preset--color--noir);
	outline: none;
}

.echea-hero-slider__track {
	position: absolute;
	inset: 0;
}

.echea-hero-slider__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 400ms ease;
	cursor: zoom-in;
}

.echea-hero-slider__slide.is-active {
	opacity: 1;
}

.echea-hero-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: 0;
	background: rgba(255, 255, 255, 0.9);
	color: var(--wp--preset--color--noir);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	transition: background 0.15s, transform 0.15s;
}

.echea-hero-slider__nav:hover {
	background: rgba(255, 255, 255, 1);
}

.echea-hero-slider__nav--prev {
	left: 16px;
}

.echea-hero-slider__nav--next {
	right: 16px;
}

.echea-hero-slider__count {
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 8px 14px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	z-index: 2;
}

.echea-hero-slider__viewall {
	position: absolute;
	bottom: 16px;
	right: 16px;
	padding: 10px 18px;
	border: 0;
	background: rgba(255, 255, 255, 0.95);
	color: var(--wp--preset--color--noir);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	z-index: 2;
	transition: background 0.15s;
}

.echea-hero-slider__viewall:hover {
	background: rgba(255, 255, 255, 1);
}

@media (max-width: 540px) {
	.echea-hero-slider__nav {
		width: 36px;
		height: 36px;
		font-size: 20px;
	}
	.echea-hero-slider__viewall {
		padding: 8px 12px;
		font-size: 10px;
	}
}

/* Lightbox — singleton appended to body on first open. */
.echea-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	z-index: 9999;
	align-items: center;
	justify-content: center;
}

.echea-lightbox.is-open {
	display: flex;
}

.echea-lightbox__img {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
}

.echea-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

.echea-lightbox__close:hover {
	color: #fff;
}

.echea-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
	border: 0;
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.85);
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	transition: background 0.15s, color 0.15s;
}

.echea-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.echea-lightbox__nav--prev {
	left: 24px;
}

.echea-lightbox__nav--next {
	right: 24px;
}

.echea-lightbox__count {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	padding: 8px 14px;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	z-index: 2;
}

@media (max-width: 540px) {
	.echea-lightbox__nav {
		width: 40px;
		height: 40px;
		font-size: 22px;
	}
	.echea-lightbox__nav--prev { left: 8px; }
	.echea-lightbox__nav--next { right: 8px; }
}

/* ═══ /listing/<slug>/ §2 features tables (Polish #27b) ═══════════
   2-col grid (Interior | Exterior) — collapses to single col <720px.
   Each table = section heading + bordered key/value rows. */

.echea-listing-features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	margin-top: var(--wp--preset--spacing--40);
}

.echea-listing-features--single {
	grid-template-columns: 1fr;
}

@media (max-width: 720px) {
	.echea-listing-features {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.echea-listing-features__heading {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--mid);
	margin: 0 0 16px;
}

.echea-listing-features__rows {
	border-top: 1px solid var(--wp--preset--color--rule);
}

.echea-listing-features__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.echea-listing-features__key {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--mid);
	flex-shrink: 0;
}

.echea-listing-features__value {
	font-family: var(--wp--preset--font-family--spectral);
	font-size: 16px;
	font-weight: 300;
	color: var(--wp--preset--color--noir);
	text-align: right;
}

/* ═══ /listing/<slug>/ §3 location + facts + financial (Polish #27c) ═
   Stacks: intro (eyebrow + city H2 + composite address) → map placeholder
   → 3-col facts grid (Walkability / Area & Lot / Financial) → optional
   neighborhood term-link. */

.echea-listing-location__intro {
	margin-bottom: 32px;
}

.echea-listing-location__intro .is-style-eyebrow-blue {
	margin: 0 0 14px;
}

.echea-listing-location__heading {
	font-family: var(--wp--preset--font-family--spectral);
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--noir);
	margin: 0 0 12px;
}

.echea-listing-location__address {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--mid);
	margin: 0;
}

.echea-listing-location__map {
	position: relative;
	height: 440px;
	margin: 0 0 40px;
	background: var(--wp--preset--color--beige);
	border: 1px solid var(--wp--preset--color--rule);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.echea-listing-location__map--osm {
	padding: 0;
	overflow: hidden;
}
.echea-listing-location__map--osm iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.echea-listing-location__map-label {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mid);
	opacity: 0.6;
}

.echea-listing-location__map-coords {
	font-family: var(--wp--preset--font-family--spectral);
	font-size: 14px;
	color: var(--wp--preset--color--mid);
	opacity: 0.8;
}

.echea-listing-location__facts {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 48px;
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: 32px;
}

.echea-listing-location__facts-heading {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--mid);
	margin: 0 0 18px;
}

.echea-listing-location__rows {
	display: flex;
	flex-direction: column;
}

.echea-listing-location__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.echea-listing-location__row:last-child {
	border-bottom: 0;
}

.echea-listing-location__row-key {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--mid);
	flex-shrink: 0;
}

.echea-listing-location__row-value {
	font-family: var(--wp--preset--font-family--spectral);
	font-size: 14px;
	color: var(--wp--preset--color--noir);
	text-align: right;
}

.echea-listing-location__walk-score {
	font-family: var(--wp--preset--font-family--spectral);
	font-size: clamp(48px, 6vw, 72px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--noir);
	margin: 0 0 6px;
}

.echea-listing-location__walk-score-suffix {
	font-size: 0.4em;
	color: var(--wp--preset--color--mid);
	margin-left: 4px;
}

.echea-listing-location__walk-label {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--noir);
	margin: 0 0 8px;
}

.echea-listing-location__walk-blurb {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 13px;
	line-height: 1.6;
	color: var(--wp--preset--color--mid);
	margin: 0;
}

.echea-listing-location__monthly {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.echea-listing-location__monthly-label {
	display: block;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mid);
	margin: 0 0 6px;
}

.echea-listing-location__monthly-amount {
	display: block;
	font-family: var(--wp--preset--font-family--spectral);
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 300;
	line-height: 1;
	color: var(--wp--preset--color--noir);
}

.echea-listing-location__monthly-caveat {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	line-height: 1.6;
	color: var(--wp--preset--color--mid);
	margin: 8px 0 0;
}

.echea-listing-location__neigh-link {
	margin-top: 32px;
}

.echea-listing-location__neigh-link a {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--noir);
	text-decoration: none;
}

.echea-listing-location__neigh-link a:hover {
	text-decoration: underline;
}

@media (max-width: 900px) {
	.echea-listing-location__facts {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.echea-listing-location__map {
		height: 320px;
	}
}

/* ═══ /properties/ catalog filter system (Polish #23) ═══════════════
   .tool-intro flex layout (intro left + tool-meta count right)
   .echea-filter-strip pill toolbar (Market + Price groups)
   ──────────────────────────────────────────────────────────────── */

.tool-intro {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
}

.tool-intro__left {
	flex: 1 1 480px;
	min-width: 0;
}

.tool-intro__left p,
.tool-intro__left h2 {
	margin: 0 0 14px;
}

.tool-intro__left p:last-child {
	margin-bottom: 0;
}

.tool-meta {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mid);
	white-space: nowrap;
	flex-shrink: 0;
}

@media (max-width: 720px) {
	.tool-intro {
		flex-direction: column;
		align-items: flex-start;
	}
}

.echea-filter-strip {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	padding: 14px 0;
	border-top: 1px solid var(--wp--preset--color--rule);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.echea-filter-label {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mid);
	margin-right: 8px;
}

.echea-filter-group {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.echea-filter-divider {
	display: inline-block;
	width: 1px;
	height: 18px;
	background: var(--wp--preset--color--rule);
}

.echea-filter-pill {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 8px 14px;
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--mid);
	border: 1px solid var(--wp--preset--color--rule);
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.echea-filter-pill:hover {
	color: var(--wp--preset--color--noir);
	border-color: var(--wp--preset--color--noir);
}

.echea-filter-pill.is-active {
	background: var(--wp--preset--color--noir);
	color: var(--wp--preset--color--accent-5);
	border-color: var(--wp--preset--color--noir);
}

/* Sort dropdown — sits to the right of the price group, matches pill aesthetic
   (Manrope, uppercase, noir-on-cream border). Native <select> chevron retained
   so click affordance is obvious; size matches pill height. */
.echea-filter-sort {
	display: flex;
	align-items: center;
	gap: 8px;
}

.echea-filter-sort .echea-filter-label {
	margin-right: 0;
}

.echea-sort-select {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 8px 28px 8px 12px;
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--noir);
	border: 1px solid var(--wp--preset--color--rule);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23555' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	transition: border-color 0.15s, color 0.15s;
}

.echea-sort-select:hover,
.echea-sort-select:focus {
	border-color: var(--wp--preset--color--noir);
	color: var(--wp--preset--color--noir);
	outline: none;
}

/* ── Neighborhood §2 Why This Area: image col fills prose height ────
   echea-why-split columns use flex so both cols stretch to equal height.
   The featured image figure fills the right column; img uses object-fit
   cover so it crops to fill without distortion. Gray background shows
   as fallback when no featured image is set for the neighborhood. */
.echea-why-split {
	align-items: stretch;
}
.echea-why-split .wp-block-column:last-child {
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--rule);
}
.echea-why-split .wp-block-column:last-child > .wp-block-post-featured-image {
	flex: 1;
	min-height: 320px;
}
.echea-why-split .wp-block-column:last-child > .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Neighborhood §5 Thomas's Take: image col (left/first-child) fills content height ──
   Mirror of echea-why-split but image is in the first column not the last. */
.echea-take-split {
	align-items: stretch;
}
.echea-take-split .wp-block-column:first-child {
	display: flex;
	flex-direction: column;
}
.echea-take-split .wp-block-column:first-child > .wp-block-group {
	flex: 1;
	min-height: 320px;
}
.echea-take-split .wp-block-column:first-child > .wp-block-post-featured-image,
.echea-take-split .wp-block-column:first-child > .wp-block-image {
	flex: 1;
	min-height: 320px;
	background-color: var(--wp--preset--color--rule);
	margin: 0;
}
.echea-take-split .wp-block-column:first-child > .wp-block-post-featured-image img,
.echea-take-split .wp-block-column:first-child > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── core/separator ──────────────────────────────── */

.wp-block-separator.is-style-thin-rule-on-noir {
	max-width: 40px;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--wp--preset--color--accent-5);
	border: none;
	height: 1px;
	opacity: 0.2;
}

/* ═══════════════════════════════════════════════════════════════════
   Phase 10 — sticky nav + mega-menu + mobile overlay + call bar
   Designer class names (.snav-* / .mobile-*) are nav infrastructure
   exception to the Purist rule (editorial blocks still use is-style-*).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Footer top border — separates footer from CTA when both share dark background */
.wp-block-template-part > footer.wp-block-group {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ── Sticky nav wrapper ────────────────────────────
   The WP block sticky attr lands on the inner .wp-block-group, but its
   parent template-part wrapper is exactly nav-height tall — so the inner
   sticky has no scroll room. Fix: stick the template-part wrapper itself
   (direct child of .wp-site-blocks which spans the full page). */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 9999;
}

/* Ensure sticky header block also overrides inline z-index:100 set by the block editor,
   staying above Leaflet map controls (max z-index: 1000) and any IDX overlays. */
header.wp-block-group[style*="sticky"] {
	z-index: 9999 !important;
}

/* ── Sticky nav container ──────────────────────── */

.snav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 18px 64px;
	max-width: 1440px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

.snav-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	flex-shrink: 0;
	text-decoration: none;
}

.snav-logo img {
	height: 56px;
	display: block;
}

.mobile-overlay-head .snav-logo img {
	height: 56px;
}

.snav-subline {
	/* Per demo (shared/styles.css:33) the subline is hidden on desktop —
	   "E+E Group | Compass" is redundant w/ the logo wordmark and adds nav height.
	   Mobile overlay still surfaces brokerage info via mobile-overlay-* blocks. */
	display: none;
}

.snav-items {
	display: flex;
	align-items: center;
	gap: 32px;
	flex: 1;
	justify-content: center;
}

.snav-item {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mid);
	cursor: pointer;
	white-space: nowrap;
	padding: 8px 0;
	transition: color .15s;
}

.snav-item:hover,
.snav-item.on {
	color: var(--wp--preset--color--noir);
}

/* ── Mega-menu dropdowns (CSS hover, no JS) ────── */

.snav-dropdown {
	position: relative;
}

/* Chevron arrow on dropdown trigger — CSS-triangle, rotates on hover/focus.
   Ported from designer canon shared/styles.css:44-69 (Polish #22). */
.snav-dropdown > .snav-item::after {
	content: '';
	display: inline-block;
	margin-left: 7px;
	width: 0;
	height: 0;
	border-left: 3.5px solid transparent;
	border-right: 3.5px solid transparent;
	border-top: 4px solid currentColor;
	opacity: 0.5;
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s ease;
	vertical-align: 1px;
}

.snav-dropdown:hover > .snav-item::after,
.snav-dropdown:focus-within > .snav-item::after {
	transform: rotate(180deg);
	opacity: 1;
}

/* Invisible hover-bridge — keeps hover alive while cursor travels from
   trigger to menu (clears the calc(100% + 18px) gap below). */
.snav-dropdown::after {
	content: '';
	position: absolute;
	top: 100%;
	left: -16px;
	right: -16px;
	height: 18px;
	pointer-events: none;
}

.snav-dropdown:hover::after,
.snav-dropdown:focus-within::after {
	pointer-events: auto;
}

.snav-dropdown__menu {
	position: absolute;
	top: calc(100% + 18px);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	min-width: 320px;
	background: var(--wp--preset--color--accent-5);
	border: 1px solid var(--wp--preset--color--rule);
	box-shadow: 0 8px 32px rgba(10, 9, 8, 0.08);
	/* No top/bottom padding — items already have py:14 (now 20 below). Demo has 0. */
	padding: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.25s;
	z-index: 200;
}

.snav-dropdown:hover .snav-dropdown__menu,
.snav-dropdown:focus-within .snav-dropdown__menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
	transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0s;
}

.snav-dropdown__item {
	display: block;
	padding: 20px 26px;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.snav-dropdown__item:last-child {
	border-bottom: none;
}

.snav-dropdown__item:hover {
	background: var(--wp--preset--color--fog);
}

.snav-dropdown__eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
	margin-bottom: 6px;
}

.snav-dropdown__label {
	display: block;
	font-family: var(--wp--preset--font-family--spectral);
	font-size: 16px;
	font-weight: 400;
	color: var(--wp--preset--color--noir);
	margin-bottom: 4px;
}

.snav-dropdown__hint {
	display: block;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	color: var(--wp--preset--color--mid);
	line-height: 1.5;
}

/* ── Right side: phone + Schedule CTA + burger ─── */

.snav-right {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}

.snav-phone-link {
	/* Kept for mobile-call-bar and any legacy references. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 38px;
	padding: 0 18px;
	background: var(--wp--preset--color--noir);
	color: var(--wp--preset--color--accent-5);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	white-space: nowrap;
	transition: opacity 0.15s;
}
.snav-phone-link:hover { opacity: 0.82; }
.snav-phone-link--fl {
	background: transparent;
	color: var(--wp--preset--color--mid);
	min-height: auto;
	padding: 0;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.snav-phone-link--fl:hover { opacity: 1; color: var(--wp--preset--color--noir); }

/* ── "Call Thomas" desktop dropdown ──────────────────────────────── */
.snav-call-dropdown {
	position: relative;
}

.snav-call-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 38px;
	padding: 0 18px;
	background: var(--wp--preset--color--noir);
	color: var(--wp--preset--color--accent-5);
	border: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: opacity 0.15s;
}
.snav-call-btn:hover { opacity: 0.82; }

.snav-call-chevron {
	font-size: 7px;
	opacity: 0.7;
	transition: transform 0.18s;
	display: inline-block;
}
.snav-call-dropdown.is-open .snav-call-chevron {
	transform: rotate(180deg);
}

.snav-call-menu {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 210px;
	background: var(--wp--preset--color--noir);
	border: 1px solid rgba(255,255,255,.13);
	z-index: 300;
	box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.snav-call-dropdown.is-open .snav-call-menu {
	display: block;
}

.snav-call-menu__item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 20px;
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,.07);
	transition: background 0.12s;
}
.snav-call-menu__item:last-child { border-bottom: none; }
.snav-call-menu__item:hover { background: rgba(255,255,255,.06); }

.snav-call-menu__region {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.42);
}
.snav-call-menu__number {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--accent-5);
}

.snav-cta {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--noir);
	background: transparent;
	border: 1px solid var(--wp--preset--color--noir);
	padding: 10px 18px;
	text-decoration: none;
	white-space: nowrap;
}

.snav-cta:hover {
	background: var(--wp--preset--color--noir);
	color: var(--wp--preset--color--accent-5);
}

.snav-burger {
	display: none;
	background: transparent;
	border: 0;
	padding: 8px;
	cursor: pointer;
}

.snav-burger span,
.snav-burger span::before,
.snav-burger span::after {
	display: block;
	width: 22px;
	height: 1.5px;
	background: var(--wp--preset--color--noir);
	position: relative;
}

.snav-burger span::before {
	content: '';
	position: absolute;
	top: -7px;
}

.snav-burger span::after {
	content: '';
	position: absolute;
	top: 7px;
}

/* ── Flex layout blocks that are direct children of the root body don't auto-receive
   root padding. Scoped to body.has-global-padding only — inner section groups
   (constrained layout) already declare their own padding in the block markup, so
   columns inside them must NOT get this extra padding or they double-indent vs headings. */
body.has-global-padding > .is-layout-flex:not(.alignfull):not(.alignwide) {
	padding-left: 24px;
	padding-right: 24px;
}
@media (min-width: 769px) {
	body.has-global-padding > .is-layout-flex:not(.alignfull):not(.alignwide) {
		padding-left: 40px;
		padding-right: 40px;
	}
}
@media (min-width: 1101px) {
	body.has-global-padding > .is-layout-flex:not(.alignfull):not(.alignwide) {
		padding-left: clamp(28px, 8.3vw, 120px);
		padding-right: clamp(28px, 8.3vw, 120px);
	}
}

/* ── Inner flex block padding reset — all viewports ─────────────────
   WP core may generate per-container CSS (inline <style> in <head>) that
   applies root padding (clamp 28→120px) to children of constrained layout
   blocks (has-global-padding sections). This causes wp:columns and other
   flex blocks inside sections to receive 120px side padding on top of the
   section's own 120px padding — double-indenting content vs headings.
   This rule cancels any such WP-generated padding on flex blocks nested
   inside alignfull section groups (which already own the edge margin).
   !important beats WP's inline generated rules which have no !important. */
section.wp-block-group > .is-layout-flex:not(.alignfull):not(.alignwide),
section.wp-block-group .is-layout-constrained > .is-layout-flex:not(.alignfull):not(.alignwide) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ── Belt-and-suspenders: explicit zero on wp:columns + wp:group children
   of constrained section wrappers. Catches cases where WP renders columns
   as .is-layout-constrained (not flex) or where non-section alignfull groups
   wrap content blocks — both receive root padding that misaligns content
   against the section title above. Excludes hero covers and full-bleed
   elements that legitimately break out of the content column. */
.wp-block-group.alignfull > .is-layout-constrained > .wp-block-columns:not(.alignfull):not(.alignwide),
.wp-block-group.alignfull > .is-layout-constrained > .wp-block-group:not(.alignfull):not(.alignwide):not(.has-background) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}


/* ── Global edge guard — override root padding on narrow viewports.
   useRootPaddingAwareAlignments (theme.json) sets --wp--style--root--padding-*
   to spacing-60 (clamp 28→120px). That's ~64px at 768px and ~32px at 390px —
   correct at desktop but too wide on mobile/tablet. We pin smaller values here.
   WP core generates margin-left: calc(-1 * root-padding) on .alignfull children
   of .is-layout-constrained containers (see also the fix in the mobile block below). */
@media (max-width: 1100px) {
	:root {
		--wp--style--root--padding-left: 40px;
		--wp--style--root--padding-right: 40px;
	}
}
@media (max-width: 768px) {
	:root {
		--wp--style--root--padding-left: 24px;
		--wp--style--root--padding-right: 24px;
	}
}

/* ── Mobile breakpoint (<1100px collapses items, <768px goes mobile) */

@media (max-width: 1100px) {
	.snav-items { display: none; }
	.snav-burger { display: block; }
	.snav-cta { display: none; }
}

@media (max-width: 768px) {
	.snav { padding: 14px 0; gap: 16px; }
	.snav-subline { display: none; }

	/* ── Zero main container global padding at mobile ───────────────
	   WP's has-global-padding applies padding-left/right via
	   var(--wp--preset--spacing--60) = clamp(28px, 8.3vw, 120px) directly
	   on the rule — our :root variable override doesn't intercept it.
	   At ≤768px this stacks on top of each section's own 24px, squeezing
	   inner content to ~475px at 627px viewport. Zero the main wrapper;
	   sections provide their own 24px edge margin (rule below). */
	main.has-global-padding {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* ── Kill WP alignfull negative-margin compensation inside constrained groups.
	   WP's useRootPaddingAwareAlignments generates:
	     .is-layout-constrained > .alignfull { margin-left: calc(-1 * root-padding) }
	   At mobile, root-padding = 24px and our section padding = 24px, so they cancel
	   to 0px visible gutter — text bleeds to screen edge. Zero the negative margin so
	   the section's own padding provides the full gutter. Scoped to wp-block-group to
	   avoid affecting other constrained elements. At mobile, main is full-viewport-width
	   so zeroing the margin still keeps sections full-bleed. */
	.wp-block-group.is-layout-constrained > .alignfull {
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-inline-start: 0 !important;
		margin-inline-end: 0 !important;
	}

	/* ── Uniform 24px edge — all full-width section bands ───────────
	   Two selectors cover all cases:
	   1. .has-background catches groups with explicit background set.
	   2. section.wp-block-group catches groups using tagName:"section" that
	      have NO background class (e.g. home "Currently on the market" block)
	      — these fall through the has-background filter otherwise.
	   Excludes main/footer/header wrappers which use different tagNames. */
	.wp-block-group.alignfull.has-background,
	section.wp-block-group.alignfull {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	.wp-block-cover.alignfull {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	/* ── Footer: strip redundant inner L/R padding at all mobile widths.
	   The footer element itself has has-global-padding = 24px (root padding).
	   Inner groups that also declare padding-left/right would double-stack.
	   Zero them so every footer section lands at exactly 24px from screen edge. */
	.footer-top-grid,
	footer > .wp-block-group {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.footer-copyright-bar {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* ── Footer nav: even 3-col grid instead of WP's flex stacking.
	   WP stacks wp:columns to flex-basis:100% at ≤781px — correct for
	   content columns but wrong for the footer nav (Markets / Services / Browse)
	   which should remain side-by-side and evenly spread across the full width.
	   Also zero max-width + margin:auto that WP's constrained layout applies to
	   direct children of constrained wrappers — without this the columns div
	   centres at a fixed max-width, leaving a blank gap on the right. */
	.footer-top-grid .wp-block-columns {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 16px !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.footer-top-grid .wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
		min-width: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
	}
}

/* ── Mobile overlay (full-screen drawer) ──────── */

.mobile-overlay {
	position: fixed;
	inset: 0;
	background: var(--wp--preset--color--accent-5);
	z-index: 9999;
	padding: 14px 0 24px;
	display: none;
	overflow-y: auto;
	flex-direction: column;
}

.mobile-overlay.on {
	display: flex;
}

.mobile-overlay-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 24px 14px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	margin-bottom: 24px;
}

.mobile-overlay-close {
	background: transparent;
	border: 0;
	font-size: 28px;
	color: var(--wp--preset--color--noir);
	cursor: pointer;
	line-height: 1;
}

.mobile-overlay-items {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	padding: 0 24px;
}

/* All nav links in the overlay use Manrope — single cohesive font.
   .mobile-overlay-subitem is the only class used; base .snav-item
   style is kept as a fallback reset only. */
.mobile-overlay-items .snav-item {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--noir);
	padding: 11px 0;
}

/* Sub-items: same Manrope family, weight 400 + left indent as the only
   hierarchy cue — no decorative border, no font-family switch. */
.mobile-overlay-items .mobile-overlay-subitem {
	font-size: 15px;
	font-weight: 400;
	padding: 9px 0 9px 12px;
	color: var(--wp--preset--color--mid);
	border-left: none;
}

.mobile-overlay-section-label {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mid);
	margin: 24px 0 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.mobile-overlay-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 24px 0;
	margin-top: 24px;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.mobile-overlay-phone {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--noir);
	text-decoration: none;
}

.mobile-overlay-cta {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-5);
	background: var(--wp--preset--color--noir);
	padding: 14px 20px;
	text-align: center;
	text-decoration: none;
	margin-top: 8px;
}

/* ── Nav phone: desktop shows both, mobile hides both (FAB handles it) ── */
.snav-phone-mobile { display: none; }

@media (max-width: 768px) {
	.snav-phone-desktop { display: none !important; }
	.snav-phone-mobile  { display: none !important; }
}

/* ── Floating call FAB (GREC 520-1-.09 — phone visible on every mobile page) ──
   Cream face + noir icon: universally legible on both light and dark sections.
   Breathing pulse is a cream halo — glows beautifully on noir backgrounds,
   whisper-quiet on cream ones (cream-on-cream = near invisible, button still visible). */
.mobile-call-fab {
	display: none;
	position: fixed;
	bottom: 24px;
	right: 20px;
	z-index: 9000;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--noir);
	border: none;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 2px 8px  rgba(10,9,8,0.12),
		0 6px 24px rgba(10,9,8,0.20),
		0 0 0 1px  rgba(10,9,8,0.09);
	animation: fab-breathe 3.6s ease-in-out infinite;
	transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s ease;
}
.mobile-call-fab:hover,
.mobile-call-fab:active {
	transform: scale(1.10);
	animation: none;
	box-shadow:
		0 4px 12px rgba(10,9,8,0.16),
		0 10px 32px rgba(10,9,8,0.24),
		0 0 0 8px rgba(245,240,232,0.18),
		0 0 0 1px rgba(10,9,8,0.10);
}
@keyframes fab-breathe {
	0%, 100% {
		box-shadow:
			0 2px 8px  rgba(10,9,8,0.12),
			0 6px 24px rgba(10,9,8,0.20),
			0 0 0 0   rgba(245,240,232,0.55),
			0 0 0 1px rgba(10,9,8,0.09);
	}
	50% {
		box-shadow:
			0 2px 8px  rgba(10,9,8,0.12),
			0 6px 24px rgba(10,9,8,0.20),
			0 0 0 11px rgba(245,240,232,0.00),
			0 0 0 1px rgba(10,9,8,0.09);
	}
}
@media (max-width: 768px) {
	.mobile-call-fab { display: flex; }
}

/* ── Scroll-to-top FAB ──────────────────────────────────────────────────────
   Hidden until user scrolls 300px. Desktop: same bottom-right corner as
   call FAB (FAB is hidden on desktop so no overlap). Mobile: stacks above
   call FAB (56px + 24px base + 10px gap = 90px from bottom).               */
.echea-scroll-top {
	position: fixed;
	bottom: 24px;
	right: 20px;
	z-index: 8999;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--noir);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 2px 8px  rgba(10,9,8,0.12),
		0 4px 16px rgba(10,9,8,0.16),
		0 0 0 1px  rgba(10,9,8,0.08);
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.echea-scroll-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
.echea-scroll-top:hover {
	transform: scale(1.10) translateY(0);
	box-shadow:
		0 4px 12px rgba(10,9,8,0.16),
		0 8px 24px rgba(10,9,8,0.20),
		0 0 0 1px  rgba(10,9,8,0.10);
}
@media (max-width: 768px) {
	/* Stack above call FAB: 56px (FAB height) + 24px (FAB bottom) + 10px gap */
	.echea-scroll-top { bottom: 90px; }
}

/* ── Call modal ── */
.call-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(10,9,8,0.48);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	align-items: flex-end;
	justify-content: center;
	padding: 0;
}
.call-modal.on { display: flex; }

.call-modal__card {
	background: var(--wp--preset--color--accent-5);
	width: 100%;
	max-width: 480px;
	border-radius: 20px 20px 0 0;
	padding: 12px 0 env(safe-area-inset-bottom, 32px);
	position: relative;
	animation: modal-slide-up 0.30s cubic-bezier(0.32, 0.72, 0, 1);
	box-shadow: 0 -8px 40px rgba(10,9,8,0.16);
}
@keyframes modal-slide-up {
	from { transform: translateY(100%); opacity: 0.6; }
	to   { transform: translateY(0);    opacity: 1; }
}

.call-modal__handle {
	width: 36px;
	height: 3px;
	border-radius: 2px;
	background: rgba(10,9,8,0.18);
	margin: 0 auto 20px;
}

.call-modal__close {
	position: absolute;
	top: 14px;
	right: 18px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10,9,8,0.07);
	border: none;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	color: rgba(10,9,8,0.45);
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.call-modal__close:hover { background: rgba(10,9,8,0.12); color: rgba(10,9,8,0.75); }

.call-modal__eyebrow {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(10,9,8,0.38);
	margin: 0 0 4px;
	padding: 0 24px;
}

.call-modal__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-decoration: none;
	padding: 0 24px;
	min-height: 68px;
	border-top: 1px solid rgba(10,9,8,0.07);
	position: relative;
	transition: background 0.12s;
}
.call-modal__option:last-child { border-bottom: 1px solid rgba(10,9,8,0.07); }
.call-modal__option::after {
	content: '→';
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 16px;
	color: rgba(10,9,8,0.20);
	transition: transform 0.15s, color 0.15s;
}
.call-modal__option:hover,
.call-modal__option:active { background: rgba(10,9,8,0.03); }
.call-modal__option:hover::after { transform: translateX(3px); color: rgba(10,9,8,0.45); }

.call-modal__region {
	font-family: var(--wp--preset--font-family--spectral);
	font-size: 17px;
	font-weight: 400;
	font-style: italic;
	color: var(--wp--preset--color--noir);
	letter-spacing: 0.01em;
}

.call-modal__number {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: rgba(10,9,8,0.55);
	margin: 0 12px 0 0;
}

/* ── Partner Strip — Designer canon CSS port (Polish #18e) ────────
   Live shape: full-bleed fog header band + full-bleed noir logo strip.
   Row inside noir spans content-max + flex space-between distribution
   w/ 1px hairline dividers between partners. Per shared/styles.css
   .s-partners-* + .partner-* class set.
*/
/* Clip horizontal overflow so full-bleed alignfull blocks (partner strip, covers)
   don't create a horizontal scrollbar when they touch the viewport edge.
   `clip` doesn't create a scroll container so sticky header keeps working. */
html,
body {
	overflow-x: clip;
}
/* New class-based markup + fallback for DB-stored version where kses stripped color/font-family */
.s-partners-eyebrow,
.echea-partner-strip > div:not(.s-partners-ticker) {
	text-align: center;
	color: rgba(255,255,255,0.55);
	font-family: 'Spectral', Georgia, serif;
	font-size: clamp(13px, 1.2vw, 17px);
	font-weight: 300;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin-bottom: 36px;
	padding: 0 var(--wp--preset--spacing--60, 48px);
}
.s-partners-ticker {
	overflow: hidden;
	width: 100%;
	padding: 8px 0;
}
.s-partners-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: partner-scroll 40s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.s-partners-track { animation: none; }
}
.s-partners-track:hover {
	animation-play-state: paused;
}
@keyframes partner-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.partner-logo {
	flex: 0 0 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 104px;
	padding: 0 16px;
}
.partner-logo img {
	max-height: 64px;
	max-width: 128px;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
}
/* Square/circular logos need more room — wide logos are width-constrained so this is safe */
.partner-logo--lg img {
	max-height: 88px;
	max-width: 88px;
}
.partner-divider {
	width: 1px;
	height: 40px;
	background: rgba(255, 255, 255, 0.16);
	flex: 0 0 1px;
}

/* ─── Home §3 "Where I Work" intro group — center eyebrow/title/body ── */
.where-i-work-intro { text-align: center; }
/* Map column labels centered above their respective maps */
.has-fog-background-color .wp-block-column > .is-style-eyebrow-blue { text-align: center; }

/* ═══ /listing/<slug>/ §4 market context (Polish #27d) ════════ */
.echea-listing-context__comps { width: 100%; border-collapse: collapse; margin-bottom: 32px; }
.echea-listing-context__comps th { text-align: left; padding: 12px 14px 12px 0; font-family: var(--wp--preset--font-family--manrope); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--mid); border-bottom: 1px solid var(--wp--preset--color--rule); }
.echea-listing-context__comps td { padding: 14px 14px 14px 0; font-family: var(--wp--preset--font-family--manrope); font-size: 14px; color: var(--wp--preset--color--noir); border-bottom: 1px solid var(--wp--preset--color--rule); }
.echea-listing-context__avgs { display: flex; gap: 64px; flex-wrap: wrap; padding: 24px 0; border-top: 1px solid var(--wp--preset--color--rule); border-bottom: 1px solid var(--wp--preset--color--rule); margin-bottom: 28px; }
.echea-listing-context__avgs > div { display: flex; flex-direction: column; gap: 6px; }
.echea-listing-context__avgs .lbl { font-family: var(--wp--preset--font-family--manrope); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--mid); }
.echea-listing-context__avgs .val { font-family: var(--wp--preset--font-family--spectral); font-size: 22px; font-weight: 300; color: var(--wp--preset--color--noir); }
.echea-listing-context__signal { font-family: var(--wp--preset--font-family--spectral); font-size: clamp(20px, 2vw, 24px); font-weight: 300; line-height: 1.5; color: var(--wp--preset--color--noir); margin: 0; }
.echea-listing-context__signal em { font-style: italic; color: var(--wp--preset--color--noir); }

/* ═══ /listing/<slug>/ §6 FAQ accordion (Polish #27d) ════════ */
.echea-listing-faq { display: flex; flex-direction: column; }
.echea-listing-faq__item { border-bottom: 1px solid var(--wp--preset--color--rule); padding: 22px 0; }
.echea-listing-faq__item:first-child { border-top: 1px solid var(--wp--preset--color--rule); }
.echea-listing-faq__item summary { font-family: var(--wp--preset--font-family--spectral); font-size: clamp(18px, 2vw, 22px); font-weight: 300; line-height: 1.35; color: var(--wp--preset--color--noir); cursor: pointer; list-style: none; padding-right: 24px; position: relative; }
.echea-listing-faq__item summary::-webkit-details-marker { display: none; }
.echea-listing-faq__item summary::after { content: '+'; position: absolute; right: 0; top: 0; font-size: 22px; font-weight: 300; color: var(--wp--preset--color--mid); transition: transform 0.2s; }
.echea-listing-faq__item[open] summary::after { content: '−'; }
.echea-listing-faq__answer { padding: 16px 0 4px; font-family: var(--wp--preset--font-family--manrope); font-size: 15px; line-height: 1.7; color: var(--wp--preset--color--noir); max-width: 720px; }

/* ═══ /neighborhoods/ hero crossfade — GA mountain ↔ FL canal ═══════
   GA image is the native wp-block-cover__image-background (base layer).
   .echea-nbhd-hero__fl-layer sits on top and fades in/out via CSS keyframes.
   Dark overlay (.wp-block-cover__background) is above both image layers so
   the dimRatio stays consistent across both scenes. */

.echea-nbhd-hero {
	position: relative;
}

.echea-nbhd-hero__fl-layer {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 1;
	animation: echea-nbhd-crossfade 10s ease-in-out 2s infinite alternate;
}

/* Dark overlay for the FL layer — same 55% dim as the WP cover background
   span that dims the GA image. Fades in with the layer automatically. */
.echea-nbhd-hero__fl-layer::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	pointer-events: none;
}

/* Base image sits below (z-index 0 by default).
   Overlay background dim + inner container must be above the FL layer. */
.echea-nbhd-hero .wp-block-cover__background {
	z-index: 2;
}
.echea-nbhd-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 3;
}

@keyframes echea-nbhd-crossfade {
	0%, 30%   { opacity: 0; }   /* GA shows */
	70%, 100% { opacity: 1; }   /* FL shows */
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.echea-nbhd-hero__fl-layer {
		animation: none;
		opacity: 0;
	}
}

/* ═══ /neighborhoods/ region tabs (GA | FL) ═════════════════════════
   Replaces the page-intro + market-selector + two stacked map sections
   with a tab switcher that flips between GA and FL. Tab label uses an
   italic Spectral roman numeral + uppercased Manrope label per demo. */

.echea-nbhd-tabs {
	position: relative;
}

/* Sticky wrapper — lives at page level so sticky spans full page scroll.
   Full-bleed background via ::before pseudo-element: WP constrained layout
   adds margin:auto !important to wp:html children, so negative-margin on the
   wrapper itself gets overridden. The ::before approach is immune — it
   positions relative to the already-centered wrapper and extends 100vw. */
.echea-nbhd-tabbar-wrap {
	position: sticky;
	top: 92px;
	z-index: 190;
}

.echea-nbhd-tabbar-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	background: var(--wp--preset--color--white);
	z-index: -1;
}

@media (max-width: 768px) {
	.echea-nbhd-tabbar-wrap { top: 84px; }
}

.echea-nbhd-tablist {
	display: flex;
	justify-content: center;
	gap: clamp(28px, 6vw, 88px);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	margin-bottom: 0;
	padding-top: 4px;
}

.echea-nbhd-tab {
	display: inline-flex;
	align-items: baseline;
	gap: 12px;
	padding: 22px 4px;
	background: none;
	border: 0;
	border-bottom: 1px solid transparent;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mid);
	margin-bottom: -1px;
	transition: color 0.15s, border-color 0.15s;
}

.echea-nbhd-tab:hover {
	color: var(--wp--preset--color--noir);
}

.echea-nbhd-tab.is-active {
	color: var(--wp--preset--color--noir);
	border-bottom-color: var(--wp--preset--color--noir);
}

.echea-nbhd-tab__roman {
	font-family: var(--wp--preset--font-family--spectral);
	font-style: italic;
	font-weight: 300;
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--mid);
	opacity: 0.7;
}

.echea-nbhd-tab.is-active .echea-nbhd-tab__roman {
	color: var(--wp--preset--color--noir);
	opacity: 1;
}

.echea-nbhd-tabpanel {
	text-align: center;
	/* Bug fix: FL panel is the 2nd child of is-layout-constrained → WP applies
	   margin-block-start: 1.2rem (19.2px) via block-gap. GA (1st child) gets 0.
	   Zero both so spacing is identical regardless of which tab is active.
	   Also zero padding-top: WP may add root-padding or block-gap as padding
	   on constrained children, causing the GA/FL panels to start at different
	   vertical positions when switching tabs. */
	margin-top: 0 !important;
	margin-block-start: 0 !important;
	padding-top: 0 !important;
	padding-block-start: 0 !important;
}

.echea-nbhd-tabpanel[hidden] {
	display: none;
}

.echea-nbhd-tabpanel__eyebrow {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
	margin: 0 0 18px;
}

.echea-nbhd-tabpanel__title {
	font-family: var(--wp--preset--font-family--spectral);
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--noir);
	margin: 0 0 18px;
}

.echea-nbhd-tabpanel__title em {
	font-style: italic;
}

.echea-nbhd-tabpanel__subtitle {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 15px;
	line-height: 1.75;
	color: var(--wp--preset--color--mid);
	max-width: 640px;
	margin: 0 auto 40px;
}

/* Region-scoped sections (below tabs). body[data-region] is set by the tab
   JS — flips visibility of all GA/FL feature sections so each tab shows
   only its own anchor feature + stay-martini + town grid. Without a
   region attribute (e.g. JS failed to load) both stay visible — safe
   degraded state. */
body[data-region="ga"] .echea-nbhd-region--fl,
body[data-region="fl"] .echea-nbhd-region--ga {
	display: none;
}

/* Region columns constrained to 1200px, 32px gap — consistent across GA and FL.
   WP-generated container classes give each tab different gap values; override both. */
.echea-nbhd-region .wp-block-columns {
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100%;
	gap: 32px !important;
}

/* GA Blue Ridge anchor — 2-col split cards. Each: full-bleed bg image (420px)
   + eyebrow + Spectral display copy + term-link. Per demo neighborhoods.html:
   215-228. */
.echea-nbhd-feature-card__image {
	height: 420px;
	background-size: cover;
	background-position: center;
	margin-bottom: 28px;
	background-color: var(--wp--preset--color--fog);
}

.echea-nbhd-feature-card__eyebrow {
	margin: 0 0 12px;
}

.echea-nbhd-feature-card__display {
	font-family: var(--wp--preset--font-family--spectral);
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--noir);
	margin: 0 0 20px;
}

.echea-nbhd-feature-card__cta {
	margin: 0;
}

@media (max-width: 760px) {
	.echea-nbhd-feature-card__image { height: 280px; }
}

/* ── Neighborhood grid cards (.echea-nbhd-grid-card) ─────────────────
   Town-by-town section (§4). Matches demo .html-mp-inner card shape:
   border, featured image, padded copy area, border-top CTA at bottom. */

.echea-nbhd-grid-card {
	border: 1px solid var(--wp--preset--color--rule);
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden;
	/* Fill CSS grid cell height so all cards in a row are equal height */
	height: 100%;
	box-sizing: border-box;
}

/* Featured image — lock to 3:2 aspect, fill via object-fit */
.echea-nbhd-grid-card .wp-block-post-featured-image,
.echea-nbhd-grid-card .wp-block-post-featured-image a {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	flex-shrink: 0;
}
.echea-nbhd-grid-card .wp-block-post-featured-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
	display: block;
	min-height: 0 !important;
}

/* Copy group — grows to fill remaining card height, pushing CTA to bottom.
   Override has-global-padding / is-layout-constrained so group fills full
   card width without WP's content-size constraints. */
.echea-nbhd-grid-card > .wp-block-group {
	flex: 1 1 auto;
	max-width: 100% !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
}

/* "Explore this market →" CTA — spans full card width edge-to-edge,
   border-top divider, uppercase Manrope. */
.echea-nbhd-grid-card__cta.wp-block-read-more {
	display: block !important;
	width: 100%;
	box-sizing: border-box;
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--noir);
	text-decoration: none;
	padding: 12px 20px;
	border-top: 1px solid var(--wp--preset--color--rule);
	text-align: center;
	transition: background 0.15s, color 0.15s;
	margin-top: auto;
}
.echea-nbhd-grid-card__cta.wp-block-read-more:hover {
	background: var(--wp--preset--color--fog);
	color: var(--wp--preset--color--blue);
}

/* ── Town-by-town grid: auto-wrapping responsive columns ──────────────
   WP generates repeat(4, minmax(0, 1fr)) — cards crush to 0 at
   intermediate widths instead of wrapping. Override with auto-fill +
   220px minimum so the grid wraps naturally: 4→3→2 columns as the
   viewport narrows, without needing explicit breakpoints.
   align-items:stretch (default) keeps equal row heights. */
.echea-nbhd-town-grid .wp-block-post-template {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
	gap: 24px !important;
}

/* Cards: no min-width override needed — the grid cell min of 220px
   handles wrapping. min-width:0 prevents content overflow in tight cells. */
.echea-nbhd-grid-card {
	min-width: 0;
	width: 100%;
}

/* Featured image and copy group fill the full card width fluidly */
.echea-nbhd-grid-card .wp-block-post-featured-image,
.echea-nbhd-grid-card .wp-block-post-featured-image a {
	width: 100%;
}

/* FL Fort Lauderdale anchor — 3-col listing-grid cards. Each: bg image (280px)
   + caption + h3 + Manrope body copy + term-link. Per demo neighborhoods.html:
   357-388. */
.echea-nbhd-card__image {
	height: 280px;
	background-size: cover;
	background-position: center;
	background-color: var(--wp--preset--color--fog);
}

.echea-nbhd-card__body {
	padding-top: 22px;
}

.echea-nbhd-card__cap {
	margin: 0 0 8px;
}

.echea-nbhd-card__h3 {
	font-family: var(--wp--preset--font-family--spectral);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--wp--preset--color--noir);
	margin: 0 0 10px;
	letter-spacing: -0.01em;
}

.echea-nbhd-card__body-copy {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 14px;
	line-height: 1.7;
	color: var(--wp--preset--color--mid);
	margin: 0 0 18px;
}

.echea-nbhd-card__cta {
	margin: 0;
	font-size: 10px;
}

/* Stay-Martini cross-promo (GA only, between Blue Ridge feature + town grid).
   Italic Spectral quote (left, max-width 680) + term-link to /martini-mountain/
   (right). Top border rule above the row per demo neighborhoods.html:236-247. */
.echea-stay-martini {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: 48px;
}

.echea-stay-martini__body {
	max-width: 680px;
}

.echea-stay-martini__eyebrow {
	margin: 0 0 10px;
}

.echea-stay-martini__quote {
	font-family: var(--wp--preset--font-family--spectral);
	font-size: clamp(20px, 1.9vw, 24px);
	font-weight: 300;
	font-style: italic;
	line-height: 1.45;
	color: var(--wp--preset--color--noir);
	letter-spacing: -0.005em;
	margin: 0;
}

.echea-stay-martini__cta {
	white-space: nowrap;
}


/* ═══ /neighborhoods/ interactive Leaflet maps (Phase 8) ════════════
   Ported verbatim from demo neighborhoods.html (lines 169-193) — GA + FL
   regional pin maps. Loaded only on the neighborhoods page (functions.php
   `echea_enqueue_leaflet` gates by is_page('neighborhoods')). */

.nbhd-map {
	height: 520px;
	border-top: 1px solid var(--wp--preset--color--rule);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--fog);
	/* Leaflet sets high z-indexes on its internal panes (200–600). isolation:isolate
	   creates a new stacking context so those z-indexes stay inside the map
	   and don't bleed above the sticky tab bar. */
	isolation: isolate;
	position: relative;
	z-index: 0;
}

@media (max-width: 760px) {
	.nbhd-map { height: 380px; }
}

.html-map-pin {
	background: none !important;
	border: none !important;
}

.leaflet-tooltip.html-map-label {
	background: var(--wp--preset--color--accent-5);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
	color: var(--wp--preset--color--noir);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	padding: 4px 9px;
	box-shadow: 0 2px 8px rgba(10, 9, 8, 0.07);
	white-space: nowrap;
}

.leaflet-tooltip.html-map-label::before {
	border-right-color: var(--wp--preset--color--rule) !important;
}

.html-map-popup .leaflet-popup-content-wrapper {
	background: var(--wp--preset--color--accent-5);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
	box-shadow: 0 8px 32px rgba(10, 9, 8, 0.10);
	padding: 0;
	overflow: hidden;
}

.html-map-popup .leaflet-popup-content {
	margin: 0 !important;
}

.html-map-popup .leaflet-popup-tip {
	background: var(--wp--preset--color--accent-5);
}

.html-map-popup .leaflet-popup-close-button {
	color: var(--wp--preset--color--mid) !important;
	font-size: 16px !important;
	top: 10px !important;
	right: 12px !important;
	width: auto !important;
	height: auto !important;
}

.html-map-popup .leaflet-popup-close-button:hover {
	color: var(--wp--preset--color--noir) !important;
	background: none !important;
}

.html-mp-inner {
	padding: 20px 20px 0;
}

.html-mp-eyebrow {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
	margin: 0 0 6px;
}

.html-mp-name {
	font-family: var(--wp--preset--font-family--spectral);
	font-size: 22px;
	font-weight: 300;
	color: var(--wp--preset--color--noir);
	line-height: 1.1;
	margin: 0 0 10px;
	letter-spacing: -0.01em;
}

.html-mp-desc {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 13px;
	line-height: 1.65;
	color: var(--wp--preset--color--mid);
	margin: 0 0 14px;
	max-width: 230px;
}

.html-mp-stat {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 16px;
}

.html-mp-val {
	font-family: var(--wp--preset--font-family--spectral);
	font-size: 20px;
	font-weight: 300;
	color: var(--wp--preset--color--noir);
}

.html-mp-lbl {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mid);
}

.html-mp-cta {
	display: block;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--noir);
	padding: 12px 20px;
	margin: 0 -20px;
	border-top: 1px solid var(--wp--preset--color--rule);
	text-align: center;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}

.html-mp-cta:hover {
	background: var(--wp--preset--color--fog);
	color: var(--wp--preset--color--blue);
}

.leaflet-control-zoom {
	border: none !important;
	box-shadow: none !important;
}

/* ── Neighborhood map badge strip ───────────────────────────────────────
   Same visual treatment as .home-map-badge. One active pill at a time
   per strip; clicking pans the map and opens the location popup. */
.nbhd-map-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 14px 0 4px;
	list-style: none;
	margin: 0;
}

.nbhd-map-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 11px;
	border: 1px solid var(--wp--preset--color--rule);
	background: transparent;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--noir);
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	-webkit-tap-highlight-color: transparent;
	white-space: nowrap;
}

.nbhd-map-badge::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--noir);
	opacity: 0.3;
	flex-shrink: 0;
	transition: opacity 0.15s;
}

.nbhd-map-badge.is-active,
.nbhd-map-badge:hover {
	background: var(--wp--preset--color--noir);
	border-color: var(--wp--preset--color--noir);
	color: var(--wp--preset--color--accent-5);
}

.nbhd-map-badge.is-active::before,
.nbhd-map-badge:hover::before {
	background: var(--wp--preset--color--accent-5);
	opacity: 0.6;
}

.nbhd-map-badge.is-active:hover {
	opacity: 0.82;
}

.nbhd-map-badge.is-pulsing {
	animation: badge-pulse 0.3s ease;
}

.leaflet-control-zoom a {
	border-radius: 0 !important;
	border-color: var(--wp--preset--color--rule) !important;
	background: var(--wp--preset--color--accent-5) !important;
	color: var(--wp--preset--color--noir) !important;
}

.leaflet-control-zoom a:hover {
	background: var(--wp--preset--color--fog) !important;
	color: var(--wp--preset--color--blue) !important;
}

.leaflet-control-attribution {
	font-size: 9px !important;
	font-family: var(--wp--preset--font-family--manrope) !important;
}

.nbhd-map-caption {
	text-align: center;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mid);
	margin-top: 14px;
}

/* ═══ Listing card: equal-height rows in query-loop grid ══════════════════
   WP post-template renders <li> grid cells. Flex-column on each <li> lets
   the inner wp:column stretch to fill the row height. The copy group then
   uses flex:1 so the agent attribution always pins to the card bottom. */
.echea-catalog .wp-block-post-template > li,
.echea-sold-grid .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
}
.echea-catalog .wp-block-post-template > li > .wp-block-column,
.echea-sold-grid .wp-block-post-template > li > .wp-block-column {
	height: 100%;
	display: flex;
	flex-direction: column;
}
/* Copy group (sibling after photo): grows to fill remaining card height */
.listing-card__photo + .wp-block-group {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* ── listing-card status badge ──────────────────────
   Overlay top-left of .listing-card__photo. Hidden via :empty when the
   echea/listing-meta status_badge binding returns ''. */
.listing-card__photo {
	position: relative;
	/* Lock every card's image area to the same shape so card heights stay
	   even regardless of the source image's aspect ratio. 4:3 matches the
	   demo proportions. */
	aspect-ratio: 4 / 3;
	width: 100%;
	min-height: 0 !important;        /* override inline min-height:200px */
	padding: 0 !important;           /* override has-global-padding */
	overflow: hidden;
}
/* Figure + anchor absolutely fill the photo box so the inner <img>'s native
   1024x576 dimensions (HTML width/height attrs from WP) can't blow out the
   column width. */
.listing-card__photo .wp-block-post-featured-image,
.listing-card__photo .wp-block-post-featured-image > a {
	position: absolute;
	inset: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.listing-card__photo .wp-block-post-featured-image img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	min-height: 0 !important;
}
.listing-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	margin: 0;
	padding: 5px 11px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--noir);
	border: 1px solid var(--wp--preset--color--rule);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
}
.listing-card__badge:empty {
	display: none;
}

/* Agent attribution line — hairline rule above, matches spec .lcard-agent.
   margin-top:auto absorbs all free space in the flex copy group, pinning
   the attribution to the card bottom regardless of title/price text length. */
.listing-card__agent {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: 12px;
	margin-top: auto;
}

/* Journal card footer — pinned to bottom via margin-top:auto; hairline rule; z-index above card overlay */
.journal-card__footer {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: 16px;
	margin-top: auto;   /* absorbs all free space → footer always at card bottom */
	position: relative;
	z-index: 1;         /* sits above .wp-block-post-title a::before card overlay */
}

/* ── journal-card: equal-height flex layout + full-card link overlay ── */

/* Image: fixed 240px height so all cards share the same image zone */
.journal-card .wp-block-post-featured-image { height: 240px; overflow: hidden; }
.journal-card .wp-block-post-featured-image a { display: block; height: 100%; }
.journal-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Title: clamp to 2 lines → consistent title zone height across all cards */
.journal-card .wp-block-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Excerpt: clamp to 3 lines → consistent excerpt zone height across all cards */
.journal-card .wp-block-post-excerpt p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}

/* Column fills grid-cell height (post-template renders <li> cells; % resolves against grid row height) */
.journal-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	position: relative;
	cursor: pointer;
	transition: border-color 0.15s ease;
}
.journal-card:hover {
	border-color: var(--wp--preset--color--noir) !important;
}

/* Inner padded group fills the column so margin-top:auto on footer has space to work */
.journal-card > .wp-block-group {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Title link ::before covers the full card — clicking anywhere navigates to the post */
.journal-card .wp-block-post-title a::before {
	content: '';
	position: absolute;
	inset: 0;
}

/* Eyebrow term links: disable click (card overlay or title click handles navigation) */
.journal-card__eyebrow a {
	pointer-events: none;
	text-decoration: none;
	color: var(--wp--preset--color--accent-3);
}

/* READ link: strip underline; already above overlay via parent z-index:1 */
.journal-card .wp-block-read-more {
	text-decoration: none;
}

/* ── Martini Mountain: property specs bar ────────────────────────────
   Icon + label row for 4 guests / 2 bedrooms / 2 bathrooms / no pets / sq.ft.
   Horizontal flex row with subtle dividers between items. */
.mm-specs-bar {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	border-top: 1px solid rgba(0,0,0,0.1);
	border-bottom: 1px solid rgba(0,0,0,0.1);
	margin-bottom: 0;
}
.mm-spec {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 130px;
	padding: 18px 24px;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--noir);
	white-space: nowrap;
}
.mm-spec + .mm-spec {
	border-left: 1px solid rgba(0,0,0,0.1);
}
.mm-spec svg {
	flex-shrink: 0;
	opacity: 0.55;
}
@media (max-width: 680px) {
	.mm-spec + .mm-spec { border-left: none; border-top: 1px solid rgba(0,0,0,0.1); }
	.mm-spec { flex-basis: 50%; }
}

/* ── Martini Mountain: image + video slider ──────────────────────────
   Main area (16:9) shows either <img> or <video> depending on active thumb.
   Thumbs: flex row — 4 images + optional video thumb (dark bg + play icon).
   mmSetActive(el, 'img'|'video') swaps media and active state. */
.mm-gallery {
	overflow: hidden;
}
.mm-gallery-main {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin-bottom: 8px;
	background: #0a0908;
}
.mm-gallery-main img,
.mm-gallery-main video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mm-gallery-thumbs {
	display: flex;
	gap: 8px;
}
.mm-gallery-thumbs img,
.mm-thumb-video {
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.15s;
	display: block;
}
.mm-gallery-thumbs img.active,
.mm-gallery-thumbs img:hover,
.mm-thumb-video.active,
.mm-thumb-video:hover {
	opacity: 1;
}
/* Video thumb */
.mm-thumb-video {
	background: #1a1716;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* ── Martini Mountain: amenities 2-col grid ──────────────────────────
   Category headers span full width; items auto-flow into 2 columns.
   Replaces the old unequal 3-col wp:columns layout. */
.mm-amenities {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 60px;
}
.mm-amen-hd {
	grid-column: 1 / -1;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mid);
	padding: 28px 0 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.mm-amen-hd:first-child {
	padding-top: 0;
}
.mm-amen-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--noir);
}
.mm-amen-item::before {
	content: '—';
	color: rgba(0, 0, 0, 0.25);
	flex-shrink: 0;
	font-size: 12px;
	margin-top: 1px;
}
@media (max-width: 640px) {
	.mm-amenities { grid-template-columns: 1fr; }
}

/* ── Martini Mountain: Leaflet map ───────────────────────────────────
   Same CARTO Voyager style as neighborhoods map.
   Coords: 34.86396, -84.32418 (116 W Main St, Blue Ridge GA 30513). */
.mm-map-container {
	height: 400px;
	border: 1px solid rgba(0, 0, 0, 0.1);
}
.mm-map-tip {
	font-family: var(--wp--preset--font-family--manrope);
	padding: 4px 0;
	min-width: 180px;
}
.mm-map-tip__name {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--noir);
	margin-bottom: 6px;
}
.mm-map-tip__addr {
	font-size: 13px;
	line-height: 1.55;
	color: var(--wp--preset--color--mid);
}

/* ── About §1 hero — focal point fix ────────────────────────────────────
   Thomas's face is upper-right in the portrait photo. Default object-position
   center/center crops him. Anchoring to right-top keeps his face in frame
   on all viewport sizes. Targets both FSE body class and slug-based class
   so the rule fires regardless of which WP version generates the class. */
.page-template-page-about .wp-block-cover__image-background,
.page-about .wp-block-cover__image-background {
	object-position: left top !important;
}
@media (max-width: 768px) {
	.page-template-page-about .wp-block-cover__image-background,
	.page-about .wp-block-cover__image-background {
		object-position: left top !important;
	}
}
/* §2 story image is scoped to .about-story-img — exclude it from above
   by resetting back to its original cover-fill behaviour. */
.page-template-page-about .about-story-img .wp-block-cover__image-background,
.page-about .about-story-img .wp-block-cover__image-background {
	object-position: center center !important;
}

/* ── About §2 — Thomas Lifestyle image fills text-column height ─────────
   The right column has verticalAlignment:stretch so both columns share the
   same height. The .about-story-img cover has minHeight:0 in its JSON so it
   doesn't impose a fixed height — CSS below makes it fill the column fully. */
.about-story-img {
	height: 100% !important;
	min-height: 480px;
}
.about-story-img .wp-block-cover__image-background {
	object-fit: cover;
	height: 100%;
	width: 100%;
}

/* ── The Echea Letter — newsletter signup form (insights.html §11.6) ─────── */
.echea-letter-form {
	max-width: 720px;
	margin: 0 auto;
}
.echea-letter-row {
	display: flex;
	align-items: flex-end;
	gap: 18px;
	flex-wrap: wrap;
}
.echea-letter-field {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
	min-width: 280px;
	border-bottom: 1px solid var(--wp--preset--color--noir);
	padding-bottom: 8px;
}
.echea-letter-label {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--noir);
	white-space: nowrap;
}
.echea-letter-input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 14px;
	color: var(--wp--preset--color--noir);
	padding: 0;
}
.echea-letter-input::placeholder {
	color: var(--wp--preset--color--mid);
}
.echea-letter-btn {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--wp--preset--color--noir);
	color: var(--wp--preset--color--accent-5);
	border: none;
	padding: 14px 32px;
	cursor: pointer;
	white-space: nowrap;
}
.echea-letter-btn:hover {
	background: var(--wp--preset--color--blue);
}

/* ── Echea Letter via CF7 (echea-letter-cf7 html_class) ─────────────────── */
.wpcf7-form.echea-letter-cf7 { max-width: 720px; margin: 0 auto; }
.wpcf7-form.echea-letter-cf7 .letter-field-wrap {
	display: flex;
	align-items: flex-end;
	gap: 18px;
	flex-wrap: wrap;
	margin: 0;
}
.wpcf7-form.echea-letter-cf7 .letter-field-wrap .wpcf7-form-control-wrap {
	flex: 1;
	min-width: 280px;
}
.wpcf7-form.echea-letter-cf7 input[type="email"] {
	flex: 1;
	min-width: 280px;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--noir);
	outline: none;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 14px;
	color: var(--wp--preset--color--noir);
	padding: 0 0 8px;
	border-radius: 0;
}
.wpcf7-form.echea-letter-cf7 input[type="email"]::placeholder {
	color: var(--wp--preset--color--mid);
}
.wpcf7-form.echea-letter-cf7 input[type="submit"] {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--wp--preset--color--noir);
	color: var(--wp--preset--color--accent-5);
	border: none;
	padding: 14px 32px;
	cursor: pointer;
	white-space: nowrap;
}
.wpcf7-form.echea-letter-cf7 input[type="submit"]:hover {
	background: var(--wp--preset--color--blue);
}
.wpcf7-form.echea-letter-cf7 .wpcf7-not-valid-tip { font-size: 11px; color: #c0392b; margin-top: 4px; }
.wpcf7-form.echea-letter-cf7 .wpcf7-response-output { margin-top: 12px; font-size: 12px; font-family: var(--wp--preset--font-family--manrope); border: none; padding: 0; }

/* ── Contact page CF7 form (echea-contact-cf7 html_class) ───────────────────
   Styles the "Echea Contact Form" (ID 1743) to match the editorial underline
   input treatment used across the site. */
.wpcf7-form.echea-contact-cf7 { display: flex; flex-direction: column; gap: 28px; }
.wpcf7-form.echea-contact-cf7 label {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mid);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.wpcf7-form.echea-contact-cf7 input[type="text"],
.wpcf7-form.echea-contact-cf7 input[type="email"],
.wpcf7-form.echea-contact-cf7 input[type="tel"] {
	display: block;
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	background: transparent;
	padding: 10px 0;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 15px;
	color: var(--wp--preset--color--noir);
	outline: none;
}
.wpcf7-form.echea-contact-cf7 textarea {
	display: block;
	width: 100%;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	background: transparent;
	padding: 12px 0;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 15px;
	color: var(--wp--preset--color--noir);
	outline: none;
	resize: none;
	min-height: 120px;
	line-height: 1.6;
	vertical-align: top;
}
.wpcf7-form.echea-contact-cf7 input[type="text"]::placeholder,
.wpcf7-form.echea-contact-cf7 input[type="email"]::placeholder,
.wpcf7-form.echea-contact-cf7 input[type="tel"]::placeholder,
.wpcf7-form.echea-contact-cf7 textarea::placeholder { color: var(--wp--preset--color--mid); }
.wpcf7-form.echea-contact-cf7 input[type="submit"] {
	display: block;
	width: 100%;
	background: var(--wp--preset--color--noir);
	color: var(--wp--preset--color--white);
	border: 0;
	padding: 18px 28px;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}
.wpcf7-form.echea-contact-cf7 input[type="submit"]:hover { opacity: 0.88; }
.wpcf7-form.echea-contact-cf7 .wpcf7-not-valid-tip { font-size: 11px; color: #c0392b; margin-top: 4px; font-family: var(--wp--preset--font-family--manrope); }
.wpcf7-form.echea-contact-cf7 .wpcf7-response-output { margin-top: 12px; font-size: 13px; font-family: var(--wp--preset--font-family--manrope); border: none; padding: 0; color: var(--wp--preset--color--mid); }

/* ═══ /team/ §2 Principals — equal-height cards + profile photos ════════════
   align-items:stretch makes both columns the same height as the taller one.
   height:100% on the white card group fills the full column height. */
#team-principals .wp-block-columns {
	align-items: stretch;
}
#team-principals .wp-block-columns .wp-block-column > .wp-block-group {
	height: 100%;
}

/* Profile photo: fixed 420px portrait crop, cover-fill, no margin override
   needed because figure sits in a constrained group but height+object-fit
   handles the display without fighting WP's layout margins. */
.echea-principal-photo {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	max-width: none !important;
	overflow: hidden;
	line-height: 0;
}
.echea-principal-photo img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* ── Journal: author avatars ─────────────────────────────────── */

/* Two explicit sizes: echea-avatar-sm (byline, 44px) + echea-avatar-lg (author card, 72px).
   The figure element must be forced square so border-radius:50% produces a circle, not an oval.
   overflow:hidden on the figure clips the img to the circle boundary. */
.echea-avatar-sm,
.echea-avatar-lg {
	flex-shrink: 0 !important;
	line-height: 0;
	margin: 0 !important;
	overflow: hidden;
	border-radius: 50%;
	display: block;
}
.echea-avatar-sm { width: 44px !important; height: 44px !important; }
.echea-avatar-lg { width: 72px !important; height: 72px !important; }
.echea-avatar-sm img,
.echea-avatar-lg img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center top;
	display: block;
	border-radius: 0; /* figure handles circle; img doesn't need it */
}

/* ── Journal: post body — heading sizes (spec insights-post.html:181) ── */

/* H2 in article body: spec = clamp(26px,3vw,34px). Theme x-large (32–48px) is
   the section-hero size — too large for inline reading copy. Override here. */
.wp-block-post-content h2.wp-block-heading {
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin-top: 2.8em;
	margin-bottom: 0.6em;
}

/* H3 in article body: spec .t-h3 = 22px. Keep proportional to fixed H2 above. */
.wp-block-post-content h3.wp-block-heading {
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 300;
	line-height: 1.35;
	margin-top: 2em;
	margin-bottom: 0.5em;
}

/* Eyebrow → heading inside post-content: zero the reading-body margin-top.
   The post-content h2/h3 rules above (specificity 0,2,1) beat the global eyebrow
   adjacent-sibling rule (0,1,2). Adding .wp-block-post-content raises specificity
   to 0,2,2 so the gap is controlled by the eyebrow's margin-bottom alone. */
.wp-block-post-content p.is-style-eyebrow-blue + :is(h1, h2, h3, h4, h5, h6),
.wp-block-post-content p.is-style-eyebrow-on-noir + :is(h1, h2, h3, h4, h5, h6) {
	margin-top: 0;
	margin-block-start: 0;
}

/* ── Journal: post body — image width control ────────────────── */

/* Normal (no alignment) images stay within the 720px reading column. */
.wp-block-post-content .wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* alignwide images span the parent section's content width (1200px,
   per §3 contentSize in single.html).
   Formula: expand each side by (section_content - 720) / 2.
   section_content = 100vw - 2×spacing-60 (capped at 1200px by section contentSize). */
.wp-block-post-content .wp-block-image.alignwide {
	--_gap: max(0px, (100vw - 2 * var(--wp--preset--spacing--60) - 720px) / 2);
	width: calc(100% + 2 * var(--_gap)) !important;
	max-width: none !important;
	margin-left:  calc(-1 * var(--_gap)) !important;
	margin-right: calc(-1 * var(--_gap)) !important;
}

/* ── Journal: pullquote ──────────────────────────────────────── */

/* WP default pullquote renders at x-large font. Override to match spec treatment:
   Spectral italic 22–30px · thin rule divider · small-caps attribution. */
.wp-block-pullquote {
	border-top: none;
	border-bottom: none;
	padding: 56px 0;
	margin: 0 auto;
	max-width: 720px;
	text-align: center;
}
.wp-block-pullquote blockquote p {
	font-family: var(--wp--preset--font-family--spectral) !important;
	font-size: clamp(22px, 2.6vw, 30px) !important;
	font-weight: 300 !important;
	font-style: italic !important;
	line-height: 1.45 !important;
	color: var(--wp--preset--color--noir) !important;
	margin: 0 0 28px !important;
}
/* Thin rule between quote body and attribution (replaces spec .pullquote-rule) */
.wp-block-pullquote blockquote p::after {
	content: '';
	display: block;
	width: 40px;
	height: 1px;
	background: var(--wp--preset--color--noir);
	opacity: 0.35;
	margin: 28px auto 0;
}
.wp-block-pullquote blockquote cite,
.wp-block-pullquote cite {
	font-family: var(--wp--preset--font-family--manrope) !important;
	font-size: 11px !important;
	font-style: normal !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--mid) !important;
	display: block;
	margin-top: 18px;
}

/* ── Testimonials §4 Relocation Story — equal-height image/quote columns ─── */

/* Without verticalAlignment:top, wp:columns flexbox defaults to stretch —
   both columns reach the same height. These rules make the image fill that
   height end-to-end via a flex chain from column → figure → img. */
.echea-relocation-columns {
	align-items: stretch !important;
}
.echea-relocation-columns > .wp-block-column:first-child {
	display: flex !important;
	flex-direction: column !important;
}
.echea-relocation-columns > .wp-block-column:first-child > .wp-block-image {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 400px;
}
.echea-relocation-columns > .wp-block-column:first-child > .wp-block-image img {
	width: 100% !important;
	flex: 1 !important;
	min-height: 0;
	object-fit: cover !important;
	object-position: center !important;
	display: block;
	height: auto;
}

/* ── WP 6.9.4 constrained-layout margin fix ─────────────────────────
   WP 6.9.4 per-container CSS omits margin-left/right:auto. Global layout
   stylesheet omits it too. Restoring here makes staging match WP 6.9 local.
   :where() has zero specificity so site-specific overrides can still win. */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ── WP columns: fix width:100% collapsing flex layout ──────────────
   WP core sets width:100% on .is-vertically-aligned-* columns. When a
   column also has flex-basis:auto (auto-sized button columns), flex uses
   width as the basis → 100% of container, squishing the sibling text column
   to its min-content. Overriding width:auto restores correct auto-sizing.
   Specificity (0,2,1) beats the core rule (0,2,0). */
.wp-block-column.is-vertically-aligned-top[style*="flex-basis:auto"],
.wp-block-column.is-vertically-aligned-center[style*="flex-basis:auto"],
.wp-block-column.is-vertically-aligned-bottom[style*="flex-basis:auto"] {
	width: auto;
}

/* ═══ Homepage §2.5 "Where I work" interactive maps ════════════════
   Ported from index.html §2.5 (lines 208-235). Two side-by-side compact
   Leaflet maps. Leaflet is loaded via echea_enqueue_leaflet() on is_front_page(). */

#home-map-ga,
#home-map-fl {
	height: 380px;
	border-top: 1px solid var(--wp--preset--color--rule);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	isolation: isolate;
	position: relative;
	z-index: 0;
}

/* ── Pin visibility fix ──────────────────────────────────────────────
   Leaflet's .leaflet-container gets overflow:hidden from its own CSS,
   which can clip DivIcon SVG markers (especially their top points) when
   combined with our stacking-context rules. Marker and tooltip panes
   must overflow so the full teardrop icon is always visible. */
#home-map-ga .leaflet-marker-pane,
#home-map-fl .leaflet-marker-pane,
#home-map-ga .leaflet-tooltip-pane,
#home-map-fl .leaflet-tooltip-pane,
#home-map-ga .leaflet-popup-pane,
#home-map-fl .leaflet-popup-pane {
	overflow: visible !important;
}
.home-map-pin {
	background: none !important;
	border: none !important;
	overflow: visible !important;
}
.home-map-pin svg {
	display: block;
	overflow: visible;
}

.home-maps-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

.home-map-label {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mid);
	margin: 0 0 12px;
	display: block;
	text-align: center;
}

@media (max-width: 760px) {
	.home-maps-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	#home-map-ga,
	#home-map-fl {
		height: 320px;
	}
}

/* ── Map pin SVG fill fix ────────────────────────────────────────────
   Belt-and-suspenders: CSS rule with hardcoded fallback + JS-level inline
   style set in the DivIcon createIcon patch (functions.php wp_head hook).
   Both are needed because CSS presentation-attribute specificity varies
   across browsers and plugin CSS resets can win without !important. */
.home-map-pin svg path {
	fill: var(--wp--preset--color--noir, #0a0908) !important;
}
.home-map-pin svg circle {
	fill: var(--wp--preset--color--accent-5, #f5f4f2) !important;
}

/* ── Location badge strip — desktop + mobile ──────────────────────────
   Shown on all viewports. Desktop: quick-nav complement to clickable pins.
   Mobile: primary interaction (pins not tap-accessible on touch). */
.home-map-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 18px 0 4px;
	list-style: none;
	margin: 0;
}

.home-map-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 11px;
	border: 1px solid var(--wp--preset--color--rule);
	background: transparent;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--noir);
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	-webkit-tap-highlight-color: transparent;
	white-space: nowrap;
}
.home-map-badge::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--noir);
	opacity: 0.3;
	flex-shrink: 0;
	transition: opacity 0.15s;
}
.home-map-badge.is-active,
.home-map-badge:hover {
	background: var(--wp--preset--color--noir);
	border-color: var(--wp--preset--color--noir);
	color: var(--wp--preset--color--accent-5);
}
.home-map-badge.is-active::before,
.home-map-badge:hover::before {
	background: var(--wp--preset--color--accent-5);
	opacity: 0.6;
}
.home-map-badge.is-active:hover {
	opacity: 0.82;
}
/* Active state: brief flash when clicked */
.home-map-badge.is-pulsing {
	animation: badge-pulse 0.3s ease;
}
@keyframes badge-pulse {
	0%   { transform: scale(1); }
	50%  { transform: scale(0.94); }
	100% { transform: scale(1); }
}

.leaflet-tooltip.home-map-tooltip {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	padding: 4px 9px;
	box-shadow: 0 2px 8px rgba(10, 9, 8, .07);
	white-space: nowrap;
}

.leaflet-tooltip.home-map-tooltip::before {
	border-right-color: var(--wp--preset--color--rule) !important;
}

.home-map-popup .leaflet-popup-content-wrapper {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
	box-shadow: 0 8px 32px rgba(10, 9, 8, .10);
	padding: 0;
	overflow: hidden;
}

.home-map-popup .leaflet-popup-content {
	margin: 0 !important;
}

.home-map-popup .leaflet-popup-tip {
	background: var(--wp--preset--color--base);
}

.home-mp-inner {
	padding: 16px 18px;
	min-width: 200px;
}

.home-mp-eyebrow {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
	margin: 0 0 5px;
}

.home-mp-name {
	font-family: var(--wp--preset--font-family--spectral);
	font-size: 18px;
	font-weight: 300;
	color: var(--wp--preset--color--contrast);
	line-height: 1.15;
	margin: 0 0 10px;
	letter-spacing: -0.01em;
}

.home-mp-cta {
	display: block;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	padding: 10px 18px;
	margin: 6px -18px 0;
	border-top: 1px solid var(--wp--preset--color--rule);
	text-align: center;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}

.home-mp-cta:hover {
	background: var(--wp--preset--color--fog);
	color: var(--wp--preset--color--secondary);
}

/* ── About §5 "What I won't do" — 3rd item left-align ───────────────
   Parent constrained layout (1200px) applies margin:auto !important on
   all direct children, centering the 560px group. Override to left-align. */
.echea-wontdo-third {
	margin-left: 0 !important;
}

/* ── Editor: white color swatch needs a visible border ──────────────
   #ffffff swatch is invisible against the editor's white panel background. */
.components-circular-option-picker__option[aria-label*="White"] {
	box-shadow: inset 0 0 0 1px #d0ceca;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — consolidated breakpoints (Polish responsive pass)
   Tablet  ≤ 768px  |  Phone  ≤ 600px  |  Tiny phone  ≤ 400px
   ═══════════════════════════════════════════════════════════════════ */

/* ── 768px: tablet portrait / small laptop ─────────────────────── */
@media (max-width: 768px) {

	/* Neighborhoods: feature-card image earlier step-down (760px rule kept
	   below for old rule compatibility; this one catches 768px tablets) */
	.echea-nbhd-feature-card__image { height: 320px; }

	/* Neighborhoods: Leaflet map — slightly shorter on tablets */
	.nbhd-map { height: 440px; }

	/* Stay-Martini: stack body text above the CTA link */
	.echea-stay-martini {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	.echea-stay-martini__cta { white-space: normal; }

	/* FL neighborhood cards: reduce image height */
	.echea-nbhd-card__image { height: 200px; }

	/* Listing filter-strip: wrap pills into separate rows */
	.echea-filter-strip { flex-wrap: wrap; row-gap: 10px; }
	.echea-filter-divider { display: none; }

	/* Tab panel: restore top spacing between tab bar and eyebrow.
	   Base rule zeros padding-top to fix GA/FL panel alignment on desktop.
	   At mobile the main container no longer adds global padding, so we
	   can safely add 24px back without causing double-offset issues. */
	.echea-nbhd-tabpanel {
		padding-top: 24px !important;
		padding-block-start: 24px !important;
	}

	/* Buying power tabs: tighten padding so tabs fit on 768px */
	.echea-bp-tabs { gap: clamp(16px, 4vw, 32px); }

	/* Tool-meta (listing count): allow wrap so it doesn't force overflow */
	.tool-meta { white-space: normal; }
}

/* ── 600px: standard mobile phones ────────────────────────────── */
@media (max-width: 600px) {

	/* ── Global layout fixes ──────────────────────────────────────────── */

	/* Section 24px edge: handled in the "Section side-padding restoration"
	   block above (search: "post-type-archive-listing main > section").
	   Those rules apply globally at ≤600px via their own @media block. */

	/* Post-template grids: collapse to 1-col on phones.
	   Rules for .echea-catalog / .echea-sold-grid / .echea-nbhd-town-grid
	   appear later in this block and win by source order (equal specificity). */
	.wp-block-query .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}

	/* Prevent any fixed-width child from overflowing its card/column */
	.wp-block-column { max-width: 100% !important; }

	/* ────────────────────────────────────────────────────────────────── */

	/* Neighborhood tab bar: tighter padding + gap on phones */
	.echea-nbhd-tab {
		padding: 14px 6px;
		gap: 6px;
		font-size: 11px;
	}
	.echea-nbhd-tablist { gap: 20px; }
	.echea-nbhd-tab__roman { font-size: 13px; }

	/* Neighborhood tab section: reduce top padding on phone */
	.echea-nbhd-tabs { padding-top: 0 !important; }

	/* Feature card image: smaller on phones */
	.echea-nbhd-feature-card__image { height: 220px; }

	/* FL neighborhood cards: image smaller on phones */
	.echea-nbhd-card__image { height: 180px; }

	/* Map: compact for phones */
	.nbhd-map { height: 300px; }

	/* Active catalog grid: 2-col on phones (WP renders 4-col via inline grid) */
	.echea-catalog .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Sold grid: 2-col on phones */
	.echea-sold-grid .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* Neighborhood town-by-town grid: auto-fill handles wrap — no override needed */

	/* Filter strip: stack label above pill groups */
	.echea-filter-strip { flex-direction: column; align-items: flex-start; }
	.echea-filter-label { margin-right: 0; }

	/* Listing hero stats: tighter gap */
	.echea-listing-hero__stats { gap: 20px; }

	/* Stat-row tiles: WP stacks the 3 columns to full-width at mobile.
	   The inline border-right (used as vertical divider on desktop) becomes a
	   spurious right border on each stacked tile. Swap to border-bottom. */
	.echea-stat-row .wp-block-column,
	.echea-listing-hero .wp-block-columns .wp-block-column {
		border-right: none !important;
		border-bottom: 1px solid var(--wp--preset--color--rule);
	}
	.echea-stat-row .wp-block-column:last-child,
	.echea-listing-hero .wp-block-columns .wp-block-column:last-child {
		border-bottom: none;
	}

	/* Principal portrait: reduce fixed height so it doesn't dominate a phone screen */
	.echea-principal-photo img { height: 280px; }

	/* Listing features grid: already collapses at 720px — keep */

	/* Listing location comps table: horizontal scroll on phones */
	.echea-listing-context__comps { overflow-x: auto; -webkit-overflow-scrolling: touch; }

	/* Listing context avgs: reduce gap on phones */
	.echea-listing-context__avgs { gap: 24px; }

	/* Home maps: already collapses at 760px — keep */

	/* Partner strip: marquee handles all breakpoints — no overrides needed */
}

/* ── 400px: very small phones (SE, older Android) ──────────────── */
@media (max-width: 400px) {

	/* Catalog + sold grids: single column on tiny phones */
	.echea-catalog .wp-block-post-template,
	.echea-sold-grid .wp-block-post-template {
		grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
	}
	/* Town grid: auto-fill wraps naturally — single col kicks in below ~220px */

	/* Neighborhood tab roman numeral: hide on very narrow screens
	   so "North Georgia" and "South Florida" labels still fit */
	.echea-nbhd-tab__roman { display: none; }
	.echea-nbhd-tab { gap: 0; }

	/* Leaflet map popups: full-width on tiny screens */
	.html-map-popup .leaflet-popup-content-wrapper { max-width: 90vw; }
}

/* ── Contact page §1: align bordered subtext columns with the wide heading ───
   "Let's talk." heading has align:"wide" → max-width:1440px (wide-size), centered.
   The subtext wp:columns has no alignment → max-width:1200px, centered.
   WP applies margin:auto to both, so at wide viewports their left edges differ
   by (1440-1200)/2 = 120px. Extend the columns to wide-size so both left-align
   at the same position. Scoped to page-id-10 (Contact page). */
body.page-id-10 section.wp-block-group > .is-layout-constrained > .wp-block-columns.are-vertically-aligned-center {
	max-width: var(--wp--style--global--wide-size, 1440px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ── Insights / Journal archive (body.blog — home.html template) ────────────
   home.html wraps all content in an explicit <main class="wp-block-group alignfull">
   with layout:constrained, which WP decorates with has-global-padding (adds root
   padding: up to 120px desktop / 40px tablet / 24px mobile).
   Each section inside already declares its own padding via block attributes
   (var:preset|spacing|60 / editorial). The <main> padding double-stacks against
   those, and our mobile negative-margin zero (line ~1709) prevents the hero cover
   from bleeding full-width inside the padded container.
   Fix: zero <main>'s padding so sections own the only gutter source. */
body.blog main.wp-block-group.alignfull {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ─── Contact Form 7 — match spec contact.html field styling ───── */
.wpcf7 .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.wpcf7 .wpcf7-form label {
	display: block;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--noir);
	margin-bottom: 6px;
	margin-top: 36px;
}
.wpcf7 .wpcf7-form input[type="text"],
.wpcf7 .wpcf7-form input[type="email"],
.wpcf7 .wpcf7-form input[type="tel"],
.wpcf7 .wpcf7-form textarea {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--noir);
	border-radius: 0;
	background: transparent;
	padding: 10px 0;
	font-family: var(--wp--preset--font-family--spectral);
	font-size: 18px;
	font-weight: 300;
	color: var(--wp--preset--color--noir);
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
}
.wpcf7 .wpcf7-form input[type="text"]::placeholder,
.wpcf7 .wpcf7-form input[type="email"]::placeholder,
.wpcf7 .wpcf7-form input[type="tel"]::placeholder,
.wpcf7 .wpcf7-form textarea::placeholder {
	color: var(--wp--preset--color--mid);
}
.wpcf7 .wpcf7-form textarea {
	min-height: 140px;
	resize: vertical;
}
.wpcf7 .wpcf7-form input[type="submit"] {
	margin-top: 40px;
	align-self: flex-start;
	background: var(--wp--preset--color--noir);
	color: var(--wp--preset--color--white);
	border: none;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 14px 32px;
	cursor: pointer;
	transition: opacity 0.15s;
}
.wpcf7 .wpcf7-form input[type="submit"]:hover { opacity: 0.75; }
.wpcf7-response-output {
	margin-top: 24px !important;
	border: 1px solid currentColor !important;
	padding: 12px 16px !important;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 13px;
}

/* ── Testimonials page — reduce title-to-content spacer ──────────────────────
   Sections use wp:spacer at spacing--60 (up to 120px) between the H2+subtitle
   intro and the cards/columns. Reduce to 30px so the gap reads as proximity
   rather than separation. Targets only direct-child spacers of the main
   section groups; hero and close-block spacers are nested deeper. */
.page-id-12 section.wp-block-group > .wp-block-spacer {
	height: 30px !important;
}

/* ═══ Showcase IDX full search widget — /properties/ §2 ════════════════════
   [showcaseidx] renders search bar + map + live listings grid. Needs full
   width + enough min-height so the map panel isn't clipped. overflow:visible
   prevents is-layout-constrained from cutting off absolutely-positioned
   dropdown menus from the filter buttons. */
.echea-idx-search {
	min-height: 800px;
	overflow: visible;
}
/* IDX search widget is full-bleed — no side gutters on the section itself.
   3-class specificity beats has-global-padding (1-class) at same !important level. */
.echea-idx-search.wp-block-group.alignfull {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.echea-idx-search .wp-block-shortcode {
	overflow: visible;
}

/* ═══ IDX search — mobile layout (≤768px) ════════════════════════════════════
   Two fixes confirmed via DevTools inspection:

   1. DOUBLE-PADDING REMOVAL
      The section's JS padding fix applies 24px to the section element.
      Showcase IDX then adds its own internal padding on top:
        • .sidx-main-app-body: 0px 15px   → total 39px from edge
        • .sidx-search-grid__results: 0px 16px → total 55px for listing cards
      Zero both layers so the single 24px from the section is the only source.

   2. FILTER BAR — 2-ROW MAX + MAP HIDDEN
      IDX stacks filters as 5+ rows on mobile (full-width each). Override to:
        Row 1: search input (full width)
        Row 2: Price | Beds | Baths | More ▾ (equal flex items)
      Hide the Map button (not useful on mobile) and the map panel.           */

@media (max-width: 768px) {

	/* ── 1. Remove double padding ─────────────────────────────────────── */
	/* Zero every IDX padding layer so only the section's 24px root padding
	   applies. sidx-container is the outermost wrapper; sidx-main-app-body
	   and sidx-search-grid__results add additional inner gutters on top. */
	.echea-idx-search .sidx-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.echea-idx-search .sidx-main-app-body {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.echea-idx-search .sidx-search-grid__results {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* Auto height — don't constrain the search grid to 600px when map is hidden */
	.echea-idx-search .sidx-search-grid {
		height: auto !important;
		display: flex !important;
		flex-direction: column !important;
	}

	/* ── 2a. Hide map panel + map button ───────────────────────────────── */
	.echea-idx-search .sidx-search-grid__map {
		display: none !important;
	}
	/* Map button lives inside .sidx-listings-controls alongside the sort.
	   Sort is a custom <div> widget; Map is a plain <button>. Target button. */
	.echea-idx-search .sidx-listings-controls button {
		display: none !important;
	}
	/* Belt-and-suspenders for common Showcase IDX map button class names */
	.echea-idx-search .sidx-toggle-map,
	.echea-idx-search .sidx-map-toggle,
	.echea-idx-search .sidx-show-map,
	.echea-idx-search [class*="map-btn"],
	.echea-idx-search [class*="mapBtn"] {
		display: none !important;
	}

	/* ── 2b. Filter bar — Row 1: search / Row 2: pill strip ────────────── */
	/* Force the filter form wrapper to flex-wrap so pills land on one line.
	   Target both .sidx-search-grid__form and common IDX streamlined wrappers. */
	.echea-idx-search .sidx-search-grid__form {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: stretch !important;
		gap: 6px !important;
		padding-bottom: 4px !important;
	}

	/* Row 1 — search input: full width */
	.echea-idx-search .sidx-suggestions-input {
		flex: 0 0 100% !important;
		width: 100% !important;
		order: 1 !important;
	}

	/* Row 2 — filter pills: equal widths, all in one row.
	   IDX forces these to 100% width on mobile; override with flex: 1. */
	.echea-idx-search .sidx-field {
		flex: 1 1 0% !important;
		min-width: 0 !important;
		width: auto !important;
		max-width: none !important;
		order: 2 !important;
		font-size: 12px !important;
	}
	.echea-idx-search .sidx-streamlined-toggle {
		flex: 1 1 0% !important;
		min-width: 0 !important;
		width: auto !important;
		max-width: none !important;
		order: 2 !important;
		font-size: 12px !important;
	}

	/* Compress pill inner padding on narrow screens */
	.echea-idx-search .sidx-field > *,
	.echea-idx-search .sidx-streamlined-toggle > * {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
}

/* ─── Listing detail view (/properties/listing/…) ──────────────────────────
   JS adds echea-idx-listing-detail to body when URL contains /listing/.
   Hide hero + search intro text + all sections below. IDX widget stays. */
body.echea-idx-listing-detail main > .wp-block-cover { display: none !important; }

body.echea-idx-listing-detail .echea-idx-search { padding-top: var(--wp--preset--spacing--40) !important; }
body.echea-idx-listing-detail .echea-idx-search > .wp-block-paragraph,
body.echea-idx-listing-detail .echea-idx-search > .wp-block-heading,
body.echea-idx-listing-detail .echea-idx-search > .wp-block-spacer { display: none !important; }

body.echea-idx-listing-detail main > section:not(.echea-idx-search),
body.echea-idx-listing-detail main > .wp-block-group:not(.echea-idx-search):not(:has(.sidx-container)) { display: none !important; }

/* ═══ Section side-padding restoration — /properties/ + /listing/ ═══════════
   Root cause (confirmed via DevTools):
   - WP PHP block renderer writes `padding-left: 0px !important` directly into
     the style="" attribute of the first N alignfull group sections inside
     main.has-global-padding (a side-effect of the useRootPaddingAwareAlignments
     layout pass on WP 6.9). Inline !important beats stylesheet !important —
     CSS alone cannot fix this.
   - Fix: JS in archive-listing.html + single-listing.html calls
     element.style.setProperty('padding-left', 'var(--wp--style--root--padding-left)',
     'important') to overwrite the broken inline value. The variable resolves to
     the DB-stored root padding (24px on this install), matching the padding that
     WP correctly applies to later sections via the .has-global-padding CSS rule.
   CSS rules below only handle what CSS CAN reach.                             */

/* Single listing CPT (/listing/<slug>/) — body.single-listing is the correct WP
   body class for these pages. May not have the inline-0px bug (non-IDX page),
   but the !important here wins over the has-global-padding CSS rule if present. */
body.single-listing main > section.wp-block-group.alignfull {
	padding-left: var(--wp--style--root--padding-left) !important;
	padding-right: var(--wp--style--root--padding-right) !important;
}

/* IDX SPA detail view: sidx-container needs explicit gutters because the SPA
   renders outside our section padding context when it takes over content area.
   body.echea-idx-listing-detail catches URL-detected navigation;
   body:has(.sidx-columns) catches DOM-detected navigation (staging URL variants). */
body:has(.sidx-columns) .sidx-container,
body.echea-idx-listing-detail .sidx-container {
	padding-left: var(--wp--style--root--padding-left) !important;
	padding-right: var(--wp--style--root--padding-right) !important;
}

/* Detail view: also hide hero + section intros when .sidx-columns detected via DOM
   (mirrors the body.echea-idx-listing-detail CSS rules, DOM-class-free path). */
body:has(.sidx-columns) main > .wp-block-cover { display: none !important; }
body:has(.sidx-columns) .echea-idx-search > .wp-block-paragraph,
body:has(.sidx-columns) .echea-idx-search > .wp-block-heading,
body:has(.sidx-columns) .echea-idx-search > .wp-block-spacer { display: none !important; }
body:has(.sidx-columns) main > section:not(.echea-idx-search),
body:has(.sidx-columns) main > .wp-block-group:not(.echea-idx-search):not(:has(.sidx-container)) { display: none !important; }

/* ── IDX hotsheet widget: side gutters if widget self-renders its own header ── */
.sidx-primary-hotsheet,
.sidx-hotsheet-header,
.sidx-widget-header {
	padding-left: var(--wp--style--root--padding-left) !important;
	padding-right: var(--wp--style--root--padding-right) !important;
}

/* ═══ /team/ — Agent bio cards + modal  (v2) ══════════════════════════════
   JS applies clamp inline (cache-proof). CSS handles card hover + modal UI.
   All selectors prefixed eam- (echea agent modal) to avoid collisions.     */

/* ── Card: equal heights + internal alignment ──────────────────────────── */

/* Stretch all columns in an agent/support row to the same height */
.wp-block-columns:has(.echea-card-clickable) {
	align-items: stretch;
}

/* Remove spacer between intro text and card grid */
section:has(.echea-card-clickable) > .wp-block-spacer {
	display: none;
}

/* Each card column is a vertical flex stack */
.echea-card-clickable {
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

/* Override WP constrained layout's margin:auto centering inside cards */
.echea-card-clickable .is-layout-constrained > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
}
.echea-card-clickable:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
}

/* White group fills full card height */
.echea-card-clickable > .wp-block-group {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Padded text area grows to fill remaining space after image */
.echea-card-clickable > .wp-block-group > .wp-block-group {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Image stays at fixed height — never shrinks */
.echea-card-clickable > .wp-block-image,
.echea-card-clickable > .wp-block-group > figure.wp-block-image {
	flex-shrink: 0;
	margin-bottom: 0;
}

/* ── Card: "Read bio" button ────────────────────────────────────────────── */

.echea-read-bio-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	background: none;
	border: none;
	padding: 0.55rem 0 0;
	margin-top: auto; /* pins button to card bottom */
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mid);
	cursor: pointer;
	transition: color 0.14s, gap 0.14s;
}
.echea-card-clickable:hover .echea-read-bio-btn {
	color: var(--wp--preset--color--contrast);
	gap: 0.45em;
}

/* ── Modal: overlay + enter animation ───────────────────────────────────── */

#echea-agent-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9000;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}
#echea-agent-modal.is-open {
	display: flex;
	animation: eam-fade-in 0.22s ease both;
}
@keyframes eam-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
#echea-agent-modal.is-open .eam-sheet {
	animation: eam-slide-up 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes eam-slide-up {
	from { transform: translateY(24px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

/* Backdrop */
.eam-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 14, 12, 0.68);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

/* ── Modal sheet — fixed height (Lewis Stewart baseline) ─────────────────── */

.eam-sheet {
	position: relative;
	z-index: 1;
	background: var(--wp--preset--color--base);
	display: flex;
	flex-direction: row;
	width: 100%;
	max-width: 880px;
	/* Fixed height — same regardless of bio length. Bio scrolls inside. */
	height: min(600px, 88vh);
	overflow: hidden;
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.28);
}

/* ── Photo column — fills full fixed height ──────────────────────────────  */

.eam-photo-col {
	flex: 0 0 310px;
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--accent-5);
}
.eam-photo {
	/* Fill the column completely — do NOT copy card inline style here */
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	transition: opacity 0.2s ease;
}

/* ── Body column — fixed height, only bio scrolls ────────────────────────  */

.eam-body-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 2.75rem 2.5rem 2rem;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden; /* column itself does not scroll */
}

/* Counter */
.eam-counter {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mid);
	margin: 0 0 1.1rem;
	opacity: 0.7;
}

/* Name */
.eam-name {
	font-size: clamp(1.35rem, 2vw + 0.5rem, 1.8rem);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 0.4rem;
}

/* Title */
.eam-title {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mid);
	margin: 0 0 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

/* Bio — scrollable, takes remaining height; nav stays pinned at bottom */
.eam-bio {
	flex: 1;
	overflow-y: auto;
	min-height: 0; /* required for flex children to shrink + scroll */
	padding-right: 0.25rem; /* breathing room from scrollbar */
}
.eam-bio p {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.875rem;
	color: var(--wp--preset--color--mid);
	line-height: 1.85;
	margin: 0 0 1em;
}
.eam-bio p:last-child { margin-bottom: 0; }

/* ── Contact row — pinned below bio, always visible ─────────────────────── */

.eam-contact {
	flex-shrink: 0;
	display: flex;
	gap: 1.5rem 2.5rem;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--rule);
}
.eam-contact-item {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.67rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mid);
}
.eam-contact-item svg {
	flex-shrink: 0;
	opacity: 0.6;
}

/* Close button */
.eam-close {
	position: absolute;
	top: 1.1rem;
	right: 1.1rem;
	z-index: 10;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: var(--wp--preset--color--mid);
	cursor: pointer;
	transition: color 0.14s;
	border-radius: 50%;
}
.eam-close:hover { color: var(--wp--preset--color--contrast); }

/* ── Floating prev / next arrows (outside the sheet) ────────────────────── */

.eam-arrow {
	position: absolute; /* relative to the fixed overlay */
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
	            box-shadow 0.18s ease;
	box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.eam-arrow:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
	box-shadow: 0 4px 20px rgba(0,0,0,0.22);
}
/* Position just outside the sheet edges; clamp keeps them on-screen on narrow viewports */
.eam-arrow.eam-prev {
	left: max(0.75rem, calc(50% - 490px));
}
.eam-arrow.eam-next {
	right: max(0.75rem, calc(50% - 490px));
}

/* Prevent page scroll when modal is open */
body.echea-modal-open { overflow: hidden; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 680px) {
	#echea-agent-modal { padding: 0; }

	/* Hide floating arrows on mobile — sheet is full-screen, no room outside */
	.eam-arrow { display: none; }

	.eam-sheet {
		flex-direction: column;
		height: 100dvh;
		max-height: 100dvh;
		max-width: 100%;
		border-radius: 0;
	}
	.eam-photo-col {
		flex: 0 0 200px;
		height: 200px;
	}
	.eam-body-col {
		padding: 1.5rem 1.25rem 1.25rem;
		height: calc(100dvh - 200px);
	}
	.eam-name { font-size: 1.35rem; }
}

/* ════════════════════════════════════════════════════════════════════
   SHOWCASE IDX — brand overrides
   All tokens use var(--wp--preset--color--*) / var(--wp--preset--font-family--*)
   so they stay in sync if the palette changes.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Hide plugin navigation bar ─────────────────────────────────
   .sidx-main-header (Dashboard / Listings / Searches / Sign in) has
   no meaning on this site. Collapse it and its background wrapper. */
.sidx-main-header,
.sidx-require-auth:has(> .sidx-main-header) {
	display: none !important;
}

/* ── 2. Global font — replace Libre Franklin with Manrope ─────────
   Exclude .sidx-icon / .sidx-fa* — those use the plugin's own
   ShowcaseSearchWidget icon font; overriding it breaks the glyphs. */
.sidx-container *:not(.sidx-icon):not([class*="sidx-fa"]) {
	font-family: var(--wp--preset--font-family--manrope, "Manrope", sans-serif) !important;
}

/* ── 3. Search input field ──────────────────────────────────────── */
.sidx-suggestions-input {
	background: #fff !important;
	border: 1px solid var(--wp--preset--color--accent-4, #e8e6e3) !important;
	border-radius: 2px !important;
}
.sidx-suggestions-input input {
	color: var(--wp--preset--color--contrast, #0a0908) !important;
}

/* ── 4. Filter pills: Price / Beds / Baths ──────────────────────── */
.sidx-field {
	background: #fff !important;
	border: 1px solid var(--wp--preset--color--accent-4, #e8e6e3) !important;
	border-radius: 2px !important;
	color: var(--wp--preset--color--contrast, #0a0908) !important;
}
.sidx-field:hover {
	border-color: var(--wp--preset--color--accent-1, #1a3a5c) !important;
}

/* ── 5. "More ▾" toggle button ──────────────────────────────────── */
.sidx-streamlined-toggle {
	background: #fff !important;
	border: 1px solid var(--wp--preset--color--accent-4, #e8e6e3) !important;
	border-radius: 2px !important;
	color: var(--wp--preset--color--contrast, #0a0908) !important;
}
.sidx-streamlined-toggle:hover {
	border-color: var(--wp--preset--color--accent-1, #1a3a5c) !important;
	color: var(--wp--preset--color--accent-1, #1a3a5c) !important;
}

/* ── 6. Save Search button — hidden ─────────────────────────────── */
.sidx-save-search-pill {
	display: none !important;
}

/* ── 7. Map height — clip to grid cell ──────────────────────────── */
/* .sidx-listings-map has height:600px inline (the full grid height)
   but its grid cell is 543px (grid row minus the 57px form header).
   Force 100% so the map fills the cell without overflowing. */
.sidx-search-grid__map,
.sidx-map-container,
.sidx-listings-map {
	height: 100% !important;
	max-height: 100% !important;
}

/* ── 8. Results column + property card ──────────────────────────── */

/* Fill the results column so the empty area below a short card list
   matches the site background instead of reading as blank white.
   The inner .sidx-search-results scroll area gets min-height:100%
   so it always stretches to the column height. */
.sidx-search-grid__results {
	background-color: var(--wp--preset--color--base, #f5f4f2) !important;
	display: flex !important;
	flex-direction: column !important;
}
.sidx-search-grid__results > .sidx-listings-controls {
	flex-shrink: 0 !important;
}
.sidx-search-grid__results > div:not(.sidx-listings-controls) {
	flex: 1 1 auto !important;
	min-height: 0 !important;
}

.sidx-search-result-grid-item {
	border: 1px solid var(--wp--preset--color--accent-4, #e8e6e3) !important;
	border-radius: 2px !important;
}

/* ── 8. Price ───────────────────────────────────────────────────── */
.sidx-price {
	color: var(--wp--preset--color--contrast, #0a0908) !important;
	font-size: 1.25rem !important;
	font-weight: 600 !important;
}

/* ── 9. Price type label (FOR SALE / SOLD etc.) ─────────────────── */
.sidx-price-type,
.sidx-sale-type {
	color: var(--wp--preset--color--accent-3, #888888) !important;
	font-size: 10px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
}

/* ── 10. Listing heading (address) ──────────────────────────────── */
.sidx-listing-heading {
	color: var(--wp--preset--color--contrast, #0a0908) !important;
}

/* ── 11. Beds / Baths / Sqft info blocks ────────────────────────── */
.sidx-info-block,
.sidx-info-title,
.sidx-info-value {
	color: var(--wp--preset--color--accent-3, #888888) !important;
}

/* ── 12. MLS attribution line ───────────────────────────────────── */
.sidx-mls-info,
.sidx-disclaimer,
.sidx-compliance-separator {
	color: var(--wp--preset--color--accent-3, #888888) !important;
}

/* ── 13. Sort / results controls ────────────────────────────────── */
.sidx-sort-menu-selection {
	border: 1px solid var(--wp--preset--color--accent-4, #e8e6e3) !important;
	border-radius: 2px !important;
	color: var(--wp--preset--color--contrast, #0a0908) !important;
}

/* ── 14. New listing / price-drop ribbon ────────────────────────── */
.sidx-new-listing {
	background: var(--wp--preset--color--accent-1, #1a3a5c) !important;
	border-radius: 1px !important;
	font-size: 10px !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
}
.sidx-price-drop {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1, #1a3a5c) 60%, #000) !important;
}

/* ── 15. IDX listing detail page — remove top whitespace + duplicate title ──
   /properties/listing/* URLs are IDX virtual pages (page-id 2^63-1).
   WordPress renders the default template with large editorial top padding
   (~115px) and a wp-block-post-title before the IDX SPA runs. Zero out
   the padding and hide the title on any page that has the IDX detail nav. */
/* .sidx-columns is always present on detail pages (direct URL or SPA nav).
   .sidx-top-level-nav only renders when arriving from search — don't rely on it. */
body:has(.sidx-columns) .wp-block-post-title,
body:has(.sidx-primary-jumbo) .wp-block-post-title {
	display: none !important;
}
/* Zero all top spacing layers: main margin + every has-global-padding wrapper */
body:has(.sidx-columns) main.wp-block-group {
	margin-top: 0 !important;
}
body:has(.sidx-columns) .wp-block-group.has-global-padding,
body:has(.sidx-columns) .entry-content,
body:has(.sidx-columns) .wp-block-post-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* ── 16. "More" modal — brand overrides ─────────────────────────── */

/* Shell: sharp white panel, capped height so it never fills the viewport.
   ReactModal__Content gets inset:40px from the library — we center the
   modal box inside it and let it scroll internally. */
.ReactModal__Content {
	inset: 40px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
}
.sidx-streamlined-modal {
	background: #fff !important;
	border-radius: 2px !important;
	color: var(--wp--preset--color--contrast, #0a0908) !important;
	max-height: 78vh !important;
	overflow-y: auto !important;
	margin: auto !important;
}

/* All text inside modal defaults to near-black instead of IDX grey */
.sidx-streamlined-modal,
.sidx-streamlined-modal * {
	color: var(--wp--preset--color--contrast, #0a0908) !important;
}

/* Section titles (Property Type / Listing Activity / Must Have etc.) */
.sidx-title {
	color: var(--wp--preset--color--contrast, #0a0908) !important;
	font-weight: 600 !important;
}

/* Sale type tabs: For Sale / For Rent / Sold / All Listings */
.sidx-sale-type {
	color: var(--wp--preset--color--accent-3, #888888) !important;
}
.sidx-streamlined-types-toggle .sidx-selected {
	background: var(--wp--preset--color--accent-1, #1a3a5c) !important;
	color: #fff !important;
	border-radius: 2px !important;
}

/* Select dropdowns (Property Type, Listing Status, Listing Type) */
.sidx-select-menu {
	background: #fff !important;
	border: 1px solid var(--wp--preset--color--accent-4, #e8e6e3) !important;
	border-radius: 2px !important;
}
.sidx-select-menu-selection,
.sidx-select-menu select {
	color: var(--wp--preset--color--contrast, #0a0908) !important;
}

/* School / MLS search inputs */
.sidx-streamlined-searchbox .sidx-suggestions-input,
.sidx-streamlined-filter__school-wrap .sidx-suggestions-input {
	background: #fff !important;
	border: 1px solid var(--wp--preset--color--accent-4, #e8e6e3) !important;
	border-radius: 2px !important;
}

/* Stepper +/- buttons (Sq Ft, Lot Size, Year Built etc.) */
.sidx-increment-up,
.sidx-increment-down {
	background: var(--wp--preset--color--accent-4, #e8e6e3) !important;
	color: var(--wp--preset--color--contrast, #0a0908) !important;
}

/* Add (MLS) and Done / Apply buttons */
.sidx-add-keyword,
.sidx-streamlined-done {
	background: var(--wp--preset--color--accent-1, #1a3a5c) !important;
	border-color: var(--wp--preset--color--accent-1, #1a3a5c) !important;
	border-radius: 2px !important;
	color: #fff !important;
}
.sidx-add-keyword:hover,
.sidx-streamlined-done:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1, #1a3a5c) 85%, #000) !important;
}

/* Close × button */
.sidx-modal-close {
	color: var(--wp--preset--color--contrast, #0a0908) !important;
	opacity: 0.5;
}
.sidx-modal-close:hover {
	opacity: 1;
}

/* ════ IDX LISTING DETAIL VIEW — brand overrides ════ */

/* Back to Results / Prev / Next bar — swap IDX blue-grey for brand base */
.sidx-top-level-nav {
	background: var(--wp--preset--color--base, #f5f4f2) !important;
	border-bottom: 1px solid var(--wp--preset--color--accent-4, #e8e6e3) !important;
}
.sidx-top-level-nav a,
.sidx-top-level-nav button {
	color: var(--wp--preset--color--contrast, #0a0908) !important;
}
.sidx-top-level-nav a:hover,
.sidx-top-level-nav button:hover {
	color: var(--wp--preset--color--accent-1, #1a3a5c) !important;
}

/* Hide all jumbo action bars (right column) + duplicate action row in left column */
.sidx-primary-actions.sidx-primary-jumbo,
.sidx-left-column .sidx-primary-actions ~ .sidx-primary-actions {
	display: none !important;
}

/* Action icon glyphs — swap IDX blue for brand navy */
.sidx-primary-action-icon-container i,
.sidx-primary-action i {
	color: var(--wp--preset--color--accent-1, #1a3a5c) !important;
}
.sidx-primary-action-label {
	color: var(--wp--preset--color--accent-3, #888888) !important;
	font-size: 10px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
}

/* Action icon row — separator above (icons sit between stats and CTA after reorder) */
.sidx-left-column .sidx-primary-actions {
	border-top: 1px solid var(--wp--preset--color--accent-4, #e8e6e3) !important;
	padding: 0.75rem 0 !important;
}

/* Primary stats — compact 2-col: left column = beds/baths, right = sqft/$/year */
.sidx-left-column .sidx-primary-info {
	display: flex !important;
	gap: 16px !important;
}
.sidx-left-column .sidx-primary-info-section {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 5px !important;
}
.sidx-left-column .sidx-primary-info-item {
	display: flex !important;
	align-items: baseline !important;
	gap: 5px !important;
	font-size: 13px !important;
	line-height: 1.25 !important;
}
.sidx-left-column .sidx-primary-info-item br {
	display: none !important;
}
.sidx-left-column .sidx-primary-info-top .sidx-primary-info-item {
	color: var(--wp--preset--color--contrast, #0a0908) !important;
	font-weight: 500 !important;
}
.sidx-left-column .sidx-primary-info-bottom .sidx-primary-info-item {
	color: var(--wp--preset--color--accent-3, #888888) !important;
}
.sidx-left-column .sidx-primary-info-item-title-top,
.sidx-left-column .sidx-primary-info-item-title-bottom {
	font-size: 13px !important;
	font-weight: 400 !important;
	color: var(--wp--preset--color--accent-3, #888888) !important;
	white-space: nowrap !important;
}

/* Address heading — larger than IDX default */
.sidx-left-column .sidx-address-1 {
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}
.sidx-left-column .sidx-address-2 {
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}

/* Price area — sandwiched between list-items and stats after JS reorder */
.sidx-left-column .sidx-price-area {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	border-top: 1px solid var(--wp--preset--color--accent-4, #e8e6e3) !important;
	border-bottom: 1px solid var(--wp--preset--color--accent-4, #e8e6e3) !important;
	padding: 0.875rem 0 !important;
}
.sidx-left-column .sidx-price {
	font-family: var(--wp--preset--font-family--spectral, "Spectral", serif) !important;
	font-size: 1.375rem !important;
	font-weight: 300 !important;
	color: var(--wp--preset--color--contrast, #0a0908) !important;
	line-height: 1 !important;
}
.sidx-left-column .sidx-days-online {
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.07em !important;
	text-transform: uppercase !important;
	background: var(--wp--preset--color--contrast, #0a0908) !important;
	color: var(--wp--preset--color--base, #f5f4f2) !important;
	padding: 3px 8px !important;
}

/* CTA container — separator above */
.sidx-left-column .sidx-call-to-actions {
	border-top: 1px solid var(--wp--preset--color--accent-4, #e8e6e3) !important;
	padding-top: 0.875rem !important;
}

/* CTA buttons — Ask a Question + Request a Tour */
.sidx-call-to-actions .sidx-primary {
	background: var(--wp--preset--color--contrast, #0a0908) !important;
	color: var(--wp--preset--color--base, #f5f4f2) !important;
	border-radius: 2px !important;
	font-size: var(--wp--preset--font-size--small, 0.875rem) !important;
	letter-spacing: 0.04em !important;
}
.sidx-call-to-actions .sidx-primary:hover {
	background: var(--wp--preset--color--accent-1, #1a3a5c) !important;
}

/* Section headings (Listing Snapshot, General Features, Interior Features…) */
.sidx-details-table .sidx-heading {
	color: var(--wp--preset--color--contrast, #0a0908) !important;
	font-size: var(--wp--preset--font-size--small, 0.875rem) !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	border-bottom: 1px solid var(--wp--preset--color--accent-4, #e8e6e3) !important;
	padding-bottom: 0.5rem !important;
	margin-bottom: 0.75rem !important;
}

/* Details table key/value pairs */
.sidx-details-table-item .sidx-key {
	color: var(--wp--preset--color--accent-3, #888888) !important;
	font-size: 12px !important;
}
.sidx-details-table-item .sidx-val {
	color: var(--wp--preset--color--contrast, #0a0908) !important;
}

/* Listing description paragraph */
.sidx-listing-description {
	color: var(--wp--preset--color--contrast, #0a0908) !important;
	line-height: 1.7 !important;
}

/* Photo thumbnail strip */
.sidx-photo-array img {
	border-radius: 2px !important;
}

/* Carousel nav overlay — keep dark but slightly lighter */
.sidx-prev-nav-container,
.sidx-next-nav-container {
	background: rgba(10, 9, 8, 0.45) !important;
}

/* Hide Friends & Family social widget (not brand-relevant) */
.sidx-details-table__friends {
	display: none !important;
}

/* Timeline (Recent Activity) — hide; too much noise for a broker site */
.sidx-details-table__timeline {
	display: none !important;
}

/* ════ MORTGAGE CALCULATOR — brand overrides ════ */

/* Wrapper — transparent so fog section bg shows through */
.mortgage-calculator {
	background: transparent !important;
	color: var(--wp--preset--color--contrast, #0a0908) !important;
	border-radius: 0 !important;
	border: 1px solid var(--wp--preset--color--accent-4, #e8e6e3) !important;
	padding: 1.5rem !important;
}

/* Heading */
.mortgage-calculator h2 {
	font-family: var(--wp--preset--font-family--spectral, "Spectral", serif) !important;
	font-size: 1.125rem !important;
	font-weight: 400 !important;
	color: var(--wp--preset--color--contrast, #0a0908) !important;
	margin-bottom: 1.5rem !important;
}

/* Labels */
.mortgage-calculator label {
	color: var(--wp--preset--color--contrast, #0a0908) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
}

/* Text inputs */
.mortgage-calculator input[type="text"],
.mortgage-calculator input[type="number"] {
	background: #fff !important;
	border: 1px solid var(--wp--preset--color--accent-4, #e8e6e3) !important;
	border-radius: 2px !important;
	color: var(--wp--preset--color--contrast, #0a0908) !important;
	font-size: 14px !important;
	padding: 10px 12px !important;
}
.mortgage-calculator input[type="text"]:focus,
.mortgage-calculator input[type="number"]:focus {
	border-color: var(--wp--preset--color--accent-1, #1a3a5c) !important;
	outline: none !important;
}

/* Select */
.mortgage-calculator select {
	background: #fff !important;
	border: 1px solid var(--wp--preset--color--accent-4, #e8e6e3) !important;
	border-radius: 2px !important;
	color: var(--wp--preset--color--contrast, #0a0908) !important;
	font-size: 14px !important;
	padding: 10px 12px !important;
}

/* Calculate button */
.mortgage-calculator button.sidx-primary,
.mortgage-calculator button[type="submit"] {
	background: var(--wp--preset--color--contrast, #0a0908) !important;
	border: none !important;
	border-radius: 2px !important;
	color: var(--wp--preset--color--base, #f5f4f2) !important;
	font-size: var(--wp--preset--font-size--small, 0.875rem) !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
	padding: 12px 28px !important;
}
.mortgage-calculator button.sidx-primary:hover,
.mortgage-calculator button[type="submit"]:hover {
	background: var(--wp--preset--color--accent-1, #1a3a5c) !important;
}

/* Monthly Payment result area */
.monthly-payment {
	padding: 1.5rem 0 !important;
	border-top: 1px solid var(--wp--preset--color--accent-4, #e8e6e3) !important;
}
.monthly-payment__title {
	color: var(--wp--preset--color--contrast, #0a0908) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	margin-bottom: 0.5rem !important;
}
.monthly-payment__amount {
	color: var(--wp--preset--color--contrast, #0a0908) !important;
	font-family: var(--wp--preset--font-family--spectral, "Spectral", serif) !important;
	font-size: 1.375rem !important;
	font-weight: 300 !important;
}

/* Disclaimer */
.mortgage-calculator__disclaimer {
	color: var(--wp--preset--color--accent-3, #888888) !important;
	font-size: 11px !important;
}

/* ════ IDX DETAIL — full-width body sections ════ */

/* Shared section label (eyebrow) */
.echea-detail-section-label {
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	color: var(--wp--preset--color--accent-3, #888888) !important;
	margin: 0 0 1.5rem !important;
}

/* Photo gallery — 1 row of 3 thumbnails, arrow button at right-center edge */
.echea-detail-gallery {
	border-top: 1px solid var(--wp--preset--color--accent-4, #e8e6e3) !important;
	padding: 1.25rem 0 0 !important;
}
.echea-detail-gallery .echea-detail-section-label {
	margin-bottom: 0.625rem !important;
}
.echea-detail-gallery .sidx-photo-array {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow: hidden !important;
	position: relative !important;
	gap: 3px !important;
	height: 90px !important;
}
.echea-detail-gallery .sidx-photo-array img {
	flex: 0 0 calc(33.33% - 2px) !important;
	width: calc(33.33% - 2px) !important;
	height: 90px !important;
	object-fit: cover !important;
	border-radius: 1px !important;
	display: block !important;
	cursor: pointer !important;
	transition: opacity 0.15s ease;
}
.echea-detail-gallery .sidx-photo-array img:hover {
	opacity: 0.82;
}
/* Hide 4th+ images — only show 3 */
.echea-detail-gallery .sidx-photo-array img:nth-child(n+4) {
	display: none !important;
}
/* "Next Photos" button → circular icon arrow at right-center edge */
.echea-detail-gallery .sidx-photo-array button {
	position: absolute !important;
	right: 6px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.92) !important;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18) !important;
	border: none !important;
	font-size: 0 !important;
	line-height: 0 !important;
	cursor: pointer !important;
	z-index: 2 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
}
.echea-detail-gallery .sidx-photo-array button::after {
	content: '›' !important;
	font-size: 20px !important;
	line-height: 1 !important;
	color: var(--wp--preset--color--contrast, #0a0908) !important;
}

/* Mortgage calculator section — inside .sidx-right-column */
.echea-detail-calc {
	border-top: 1px solid var(--wp--preset--color--accent-4, #e8e6e3) !important;
	padding: 2rem 0 !important;
}
.echea-detail-calc .mortgage-calculator {
	max-width: 100% !important;
}

/* Left info panel — sticky while user scrolls right column details.
   top offset = site header height (92px) + small gap.
   Below 889px SIDX stacks to a single column, so sticky would overlap body
   content — disable it on mobile/tablet. */
.sidx-left-column {
	position: sticky !important;
	top: 96px !important;
	align-self: flex-start !important;
	height: fit-content !important;
}
@media (max-width: 889px) {
	.sidx-left-column {
		position: static !important;
		top: auto !important;
		align-self: auto !important;
		height: auto !important;
	}
}