/* Components — nav, hero, cards, forms, footer. Token-driven only. */

/* ---------- Buttons ---------- */
.zre-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 13px 24px;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: var(--text-small);
	text-transform: uppercase;
	letter-spacing: .04em;
	border: 2px solid transparent;
	font-family: var(--font-body);
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.zre-btn--action { background: var(--color-action); color: #fff; border-color: var(--color-action); }
.zre-btn--action:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); }
.zre-btn--primary { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.zre-btn--primary:hover { background: var(--color-navy-deep); border-color: var(--color-navy-deep); }
.zre-btn--ghost { background: transparent; color: var(--color-navy); border-color: var(--color-navy); }
.zre-btn--ghost:hover { background: var(--color-navy); color: #fff; }
.zre-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.zre-btn--ghost-light:hover { background: rgba(255,255,255,.12); }
.zre-btn--gold { background: var(--color-gold); color: var(--color-navy-deep); border-color: var(--color-gold); }
.zre-btn--gold:hover { background: var(--color-gold-deep); border-color: var(--color-gold-deep); color: #fff; }
.zre-btn--sm { padding: 9px 16px; font-size: var(--text-micro); }
.zre-btn--block { width: 100%; }

/* ---------- Navigation ---------- */
.zre-nav {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}
.zre-nav__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-4) var(--container-pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
}
.zre-wordmark {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.1rem;
	text-decoration: none;
	color: var(--color-ink);
}
.zre-wordmark img { max-height: 46px; width: auto; }
.zre-nav__links {
	display: flex;
	gap: var(--space-6);
	font-size: var(--text-small);
	font-weight: 700;
}
.zre-nav__links a { text-decoration: none; color: var(--color-ink); }
.zre-nav__links a.is-accent,
.zre-nav__links a:hover { color: var(--color-cobalt); }
.zre-nav__cta { display: flex; align-items: center; gap: var(--space-4); }
.zre-nav__phone { font-weight: 700; font-size: var(--text-small); text-decoration: none; color: var(--color-ink); }
.zre-nav__agent { font-size: var(--text-micro); color: var(--color-muted); text-decoration: none; white-space: nowrap; }
.zre-nav__agent:hover { color: var(--color-cobalt); }
.zre-nav__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
}
.zre-nav__toggle span { display: block; width: 100%; height: 2px; background: var(--color-ink); border-radius: 2px; }
.zre-mobile-menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-4) var(--container-pad) var(--space-5);
	border-top: 1px solid var(--color-border);
}
.zre-mobile-menu a { padding: var(--space-3) 0; text-decoration: none; color: var(--color-ink); font-weight: 700; }
.zre-mobile-menu .zre-btn { margin-top: var(--space-3); }

@media (max-width: 820px) {
	.zre-nav__links { display: none; }
	.zre-nav__phone { display: none; }
	.zre-nav__agent { display: none; }
	.zre-nav__toggle { display: flex; }
	/* The persistent bottom action bar already covers Search/Sell/Call/Text
	   on mobile — a second CTA button in the header is redundant and causes
	   cramped wrapping next to the logo. */
	.zre-nav__cta .zre-btn { display: none; }
	.zre-wordmark__text { font-size: .95rem; white-space: nowrap; }
}
@media (max-width: 360px) {
	.zre-wordmark__text { display: none; } /* logo mark alone is enough at very narrow widths */
}

/* ---------- Hero ---------- */
.zre-hero {
	position: relative;
	padding: var(--space-8) var(--container-pad) 0;
	max-width: var(--container-max);
	margin: 0 auto;
	overflow: hidden; /* contains the decorative ::before bleed so it can't cause horizontal scroll */
}
/* Soft editorial texture behind the copy column — restrained, not decorative clutter */
.zre-hero::before {
	content: "";
	position: absolute;
	top: -40px;
	left: -8%;
	width: 620px;
	height: 620px;
	background: radial-gradient(circle, var(--color-gold-tint) 0%, rgba(246,239,221,0) 70%);
	opacity: .8;
	pointer-events: none;
	z-index: 0;
}
.zre-hero__top {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 0.85fr;
	gap: var(--space-7);
	align-items: center;
	margin-bottom: var(--space-6);
}
.zre-hero__eyebrow {
	font-family: var(--font-display);
	font-size: var(--text-micro);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-gold-deep);
	margin: 0 0 var(--space-3);
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.zre-hero__eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--color-gold);
	display: inline-block;
}
.zre-hero h1 {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: clamp(2.5rem, 1.9rem + 2vw, 3.4rem);
	letter-spacing: -0.01em;
	margin-bottom: var(--space-4);
}
.zre-lede { color: var(--color-muted); max-width: 44ch; margin-bottom: var(--space-5); }
.zre-trustline { display: flex; gap: var(--space-5); flex-wrap: wrap; font-size: var(--text-small); color: var(--color-muted); font-weight: 600; align-items: baseline; }
.zre-trustline b { color: var(--color-ink); }
.zre-trustline__sub { font-weight: 400; color: var(--color-muted); font-size: var(--text-micro); }

.zre-hero__shot {
	aspect-ratio: 5/4;
	border-radius: var(--radius-lg);
	overflow: hidden;
	position: relative;
	background: var(--color-surface-alt); /* visible only for a flash before the image paints */
	box-shadow: 0 24px 48px -24px rgba(16, 35, 63, 0.4);
}
.zre-hero__shot picture,
.zre-hero__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%; /* keeps her face framed as the crop's own aspect ratio changes at the mobile breakpoint */
}
/* Restrained gold corner accent — a quiet "premium framing" cue, not a border around the whole photo */
.zre-hero__shot::after {
	content: "";
	position: absolute;
	top: 18px;
	left: 18px;
	width: 46px;
	height: 46px;
	border-top: 2px solid rgba(255,255,255,.85);
	border-left: 2px solid rgba(255,255,255,.85);
	border-radius: 4px 0 0 0;
	pointer-events: none;
}
.zre-hero__badge {
	position: absolute;
	left: var(--space-5);
	bottom: var(--space-5);
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: 0 14px 30px -10px rgba(16, 35, 63, 0.45);
	padding: var(--space-3) var(--space-4);
	display: flex;
	align-items: center;
	gap: var(--space-3);
}
.zre-hero__badge-stars { display: flex; gap: 1px; }
.zre-hero__badge-stars svg { width: 12px; height: 12px; fill: var(--color-gold); }
.zre-hero__badge-num { font-family: var(--font-serif); font-weight: 600; font-size: 1.3rem; color: var(--color-navy); line-height: 1; }
.zre-hero__badge-text { display: flex; flex-direction: column; }
.zre-hero__badge-label { font-size: var(--text-micro); color: var(--color-muted); font-weight: 700; white-space: nowrap; }

@media (max-width: 820px) {
	.zre-hero__shot { aspect-ratio: 4/5; } /* taller crop on mobile — see hero-mobile.* assets */
	.zre-hero__badge { left: var(--space-4); bottom: var(--space-4); padding: var(--space-2) var(--space-3); }
	.zre-hero::before { width: 320px; height: 320px; top: -20px; left: -20%; }
}

.zre-utility {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-panel);
	overflow: hidden;
	position: relative;
	z-index: 2;
}
.zre-utility__tabs { display: flex; }
.zre-utility__tabs button {
	flex: 1;
	padding: var(--space-4) var(--space-3);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--text-body);
	background: var(--color-surface-alt);
	border: none;
	border-bottom: 3px solid transparent;
	color: var(--color-muted);
	cursor: pointer;
}
.zre-utility__tabs button.is-active { background: var(--color-surface); color: var(--color-navy); border-bottom-color: var(--color-gold); }
.zre-utility__panels { padding: var(--space-5) var(--space-6) var(--space-6); }
.zre-utility__panel { display: none; }
.zre-utility__panel.is-active { display: block; }
.zre-fieldrow { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: var(--space-3); align-items: end; }
.zre-fieldrow--sell { grid-template-columns: 2fr 1fr auto; }
.zre-field { display: flex; flex-direction: column; gap: 5px; }
.zre-field--wide { grid-column: span 1; }
.zre-field label { font-size: var(--text-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }
.zre-field input, .zre-field select {
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	background: var(--color-surface);
	color: var(--color-ink);
}
.zre-utility__note { font-size: var(--text-micro); color: var(--color-muted); margin: var(--space-3) 0 0; }
.zre-demo-inline {
	margin: 0 var(--space-6) var(--space-5);
	padding: var(--space-3) var(--space-4);
	background: var(--color-cobalt-tint);
	border-radius: var(--radius-sm);
	font-size: var(--text-small);
	color: var(--color-navy);
}

.zre-badges {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-5);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
}
.zre-badges div {
	min-width: 0; /* let long labels wrap inside their column instead of forcing overflow */
	text-align: center;
}
.zre-badges b {
	display: inline-block;
	max-width: 100%;
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--color-navy);
	padding-bottom: 6px;
	border-bottom: 2px solid var(--color-gold);
	margin-bottom: var(--space-2);
}
.zre-badges span {
	display: block;
	font-size: var(--text-micro);
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--color-muted);
}

@media (max-width: 820px) {
	.zre-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
}
@media (max-width: 480px) {
	.zre-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); }
	.zre-badges b { font-size: 1rem; }
}

@media (max-width: 820px) {
	.zre-hero__top { grid-template-columns: 1fr; }
	.zre-fieldrow, .zre-fieldrow--sell { grid-template-columns: 1fr; }
}

/* Quiet transition band between the hero and the next section — the same
   line-art skyline used in Areas We Serve, cropped low-opacity, so the
   motif reads as a signature rather than a one-off. */
.zre-divider {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-6) var(--container-pad) 0;
	overflow: hidden;
	height: 64px;
}
@media (max-width: 820px) {
	.zre-divider { height: 40px; padding-top: var(--space-4); }
}

/* ---------- "Coming soon" panels — Featured Listings / Recently Sold ----------
   A single editorial statement panel rather than a grid of repeated empty
   cards: reads as an intentional, premium placeholder rather than an
   unfinished data-bound template. No invented address/price/status. */
.zre-comingsoon {
	max-width: var(--container-max);
	margin: 0 auto;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	display: flex;
	align-items: center;
	gap: var(--space-8);
}
.zre-comingsoon__icon {
	flex: none;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: var(--color-gold-tint);
	display: flex;
	align-items: center;
	justify-content: center;
}
.zre-comingsoon__icon svg { width: 44px; height: 55px; color: var(--color-gold-deep); }
.zre-comingsoon__body p.zre-eyebrow { margin-bottom: var(--space-1); }
.zre-comingsoon__body h3 {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 1.4rem;
	margin: 0 0 var(--space-2);
}
.zre-comingsoon__body p.zre-body-text { margin-bottom: var(--space-4); max-width: 62ch; }
.zre-comingsoon__body p.zre-body-text:last-child { margin-bottom: 0; }

@media (max-width: 820px) {
	.zre-comingsoon { flex-direction: column; text-align: center; padding: var(--space-6); gap: var(--space-5); }
	.zre-comingsoon__body p.zre-body-text { max-width: none; }
}

/* ---------- Seller / buyer / investor grids ---------- */
.zre-seller-grid, .zre-invest-grid, .zre-why-grid {
	max-width: var(--container-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-8);
	align-items: start;
}
.zre-why-grid { align-items: center; grid-template-columns: 0.8fr 1.2fr; }
.zre-invest-grid {
	align-items: center;
	background: var(--color-navy);
	background-image: radial-gradient(circle at 100% 0%, rgba(169,134,63,.16), transparent 55%);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	grid-template-columns: 0.9fr 1.1fr;
	color: #eef1f6;
}
.zre-invest-grid .zre-eyebrow { color: var(--color-gold); }
.zre-invest-grid h2 { color: #fff; }
.zre-invest-grid .zre-body-text { color: rgba(255,255,255,.72); }

/* Seller process — a slim editorial timeline, not a grid of boxed cards
   (Milestone 1.1 replaced pricing tiers with this; this pass de-boxes it) */
.zre-process { list-style: none; margin: 0; padding: 0; counter-reset: zre-step; }
.zre-process li {
	position: relative;
	padding: 0 0 var(--space-6) 60px;
	counter-increment: zre-step;
}
.zre-process li:last-child { padding-bottom: 0; }
.zre-process li::before {
	content: counter(zre-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 38px; height: 38px;
	border-radius: 50%;
	border: 1.5px solid var(--color-gold);
	background: var(--color-surface);
	color: var(--color-navy);
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 1rem;
	display: flex; align-items: center; justify-content: center;
	z-index: 1;
}
.zre-process li::after {
	content: "";
	position: absolute;
	left: 18px;
	top: 38px;
	bottom: -6px;
	width: 1px;
	background: var(--color-border);
}
.zre-process li:last-child::after { display: none; }
.zre-process b { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 1.1rem; margin-bottom: 2px; padding-top: 6px; }
.zre-process p { margin: 0; color: var(--color-muted); font-size: var(--text-small); }

.zre-why-list { display: grid; gap: var(--space-4); }
.zre-why-item { display: flex; gap: var(--space-3); align-items: flex-start; }
.zre-why-item__ico {
	width: 10px; height: 10px; margin-top: 7px;
	border-radius: 50%; background: var(--color-gold); flex: none;
	box-shadow: 0 0 0 4px var(--color-gold-tint);
}
.zre-why-item p { margin: 2px 0 0; color: var(--color-muted); font-size: var(--text-small); }
.zre-why-photo {
	position: relative;
	aspect-ratio: 4/5;
}
.zre-why-photo::before {
	content: "";
	position: absolute;
	top: 18px;
	left: 18px;
	width: 100%;
	height: 100%;
	border: 2px solid var(--color-gold);
	border-radius: var(--radius-lg);
	z-index: 0;
}
.zre-why-photo picture,
.zre-why-photo img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 48px -24px rgba(16, 35, 63, 0.4);
}
@media (max-width: 480px) {
	.zre-why-photo::before { left: 10px; top: 10px; }
}

.zre-cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }

@media (max-width: 820px) {
	.zre-seller-grid, .zre-invest-grid, .zre-why-grid { grid-template-columns: 1fr; }
	.zre-tiercards { grid-template-columns: 1fr; }
}

/* ---------- Areas — dark "neighborhood" section with a decorative skyline ---------- */
.zre-areas-sub { color: rgba(255,255,255,.65); font-size: var(--text-small); margin: calc(-1 * var(--space-4)) 0 var(--space-6); }
.zre-areagrid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-3);
	max-width: var(--container-max);
	margin: 0 auto;
}
.zre-areachip {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-small);
	font-weight: 600;
	color: #eef1f6;
	transition: background-color .15s ease, border-color .15s ease;
}
.zre-areachip:hover { background: rgba(255,255,255,.09); border-color: var(--color-gold); }
.zre-areachip svg { width: 16px; height: 16px; flex: none; fill: var(--color-gold); }
.zre-skyline {
	display: block;
	width: 100%;
	height: 100%;
}
.zre-skyline--areas {
	height: auto;
	margin-top: var(--space-8);
	color: var(--color-gold);
	opacity: .5;
}
.zre-skyline--divider {
	color: var(--color-navy);
	opacity: .1;
}
@media (max-width: 820px) {
	.zre-areagrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.zre-areagrid { grid-template-columns: 1fr; }
}

/* ---------- Reviews — verified proof + honest "coming soon" (Milestone 1.1) ---------- */
.zre-revproof {
	max-width: var(--container-max); margin: 0 auto;
	background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
	padding: var(--space-8);
	display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap;
}
.zre-revproof__stat { text-align: center; }
.zre-revproof__stars { display: flex; justify-content: center; gap: 3px; margin-bottom: var(--space-2); }
.zre-revproof__stars svg { width: 20px; height: 20px; fill: var(--color-gold); }
.zre-revproof__num { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 3.2rem; line-height: 1; color: var(--color-navy); }
.zre-revproof__label { display: block; color: var(--color-muted); font-size: var(--text-small); margin-top: var(--space-2); }
.zre-revproof__link { display: inline-block; margin-top: var(--space-3); font-weight: 700; font-size: var(--text-small); color: var(--color-cobalt); text-decoration: none; }
.zre-revproof__link:hover { text-decoration: underline; }
.zre-revproof__divider { width: 1px; align-self: stretch; background: var(--color-border); }
.zre-revproof__soon b { display: block; font-family: var(--font-display); font-size: var(--text-h3); margin-bottom: var(--space-1); }
.zre-revproof__soon p { margin: 0; color: var(--color-muted); font-size: var(--text-small); }
@media (max-width: 820px) {
	.zre-revproof { flex-direction: column; text-align: center; padding: var(--space-6); }
	.zre-revproof__divider { width: 100%; height: 1px; }
}

/* ---------- Final CTA ---------- */
.zre-final { background: var(--color-navy); color: #eef1f6; padding: var(--space-8) var(--container-pad); border-top: 3px solid var(--color-gold); }
.zre-final__inner { max-width: var(--container-max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.zre-final h2 { color: #fff; margin: 0; font-size: 1.7rem; }
.zre-final p { margin: var(--space-1) 0 0; opacity: .85; }

/* ---------- Footer ---------- */
.zre-footer { background: #0C1524; color: #a9b3c4; padding: var(--space-6) var(--container-pad); font-size: var(--text-small); }
.zre-footer__inner { max-width: var(--container-max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.zre-footer__brand { display: flex; align-items: center; gap: var(--space-3); }
.zre-footer__brand img { max-height: 30px; width: auto; opacity: .9; }
.zre-footer strong { color: #fff; }
.zre-footer__notice { margin: var(--space-3) 0 0; font-size: var(--text-micro); color: #6b7688; text-align: center; }

/* ---------- Mobile persistent action bar ---------- */
.zre-mobilebar { display: none; }
@media (max-width: 820px) {
	.zre-mobilebar {
		display: flex;
		position: sticky;
		bottom: 0;
		background: var(--color-surface);
		border-top: 1px solid var(--color-border);
		padding: var(--space-2) var(--space-2);
		gap: var(--space-2);
		z-index: 15;
	}
	.zre-mobilebar a {
		flex: 1;
		text-align: center;
		font-size: var(--text-micro);
		font-weight: 700;
		padding: var(--space-2) var(--space-1);
		border-radius: var(--radius-sm);
		background: var(--color-surface-alt);
		text-decoration: none;
		color: var(--color-ink);
	}
	.zre-mobilebar a.is-action { background: var(--color-action); color: #fff; }
}