/* Base — reset, typography, layout primitives. Consumes tokens.css only. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* must win over any class-based display rule (e.g. .zre-mobile-menu{display:flex}) */
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--leading-body);
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

h1, h2, h3 {
	line-height: var(--leading-tight);
	margin: 0 0 var(--space-4);
	text-wrap: balance;
}
h1, h2 {
	font-family: var(--font-serif);
	font-weight: 600;
	letter-spacing: -0.01em;
}
h3 {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.015em;
}
h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
p { margin: 0 0 var(--space-4); }

.zre-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-navy);
	color: #fff;
	padding: var(--space-3) var(--space-4);
	z-index: 100;
}
.zre-skip-link:focus {
	left: var(--space-4);
	top: var(--space-4);
}

/* Focus visibility — required on every interactive element, per docs/36 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}

.zre-section {
	padding: var(--space-10) var(--container-pad);
}
.zre-section--alt {
	background: var(--color-surface-alt);
}
.zre-section--tint {
	background: var(--color-cobalt-tint);
}
.zre-section--slim {
	padding-top: var(--space-6);
	padding-bottom: var(--space-6);
}
.zre-section--dark {
	background: var(--color-navy);
	color: #eef1f6;
}
.zre-section--dark .zre-section__head h2,
.zre-section--dark h2 { color: #fff; }
.zre-section--dark .zre-eyebrow { color: var(--color-gold); }
.zre-section__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-6);
}
.zre-section__head h2 { margin: 0; }
.zre-section__note { font-size: var(--text-small); color: var(--color-muted); }

.zre-eyebrow {
	font-size: var(--text-micro);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-gold-deep);
	margin: 0 0 var(--space-2);
}
.zre-body-text { color: var(--color-muted); line-height: var(--leading-body); }

/* Small, generic spacing utilities — used sparingly where a one-off gap doesn't warrant its own component class. */
.zre-mt-3 { margin-top: var(--space-3) !important; }
.zre-mt-4 { margin-top: var(--space-4) !important; }
.zre-mt-6 { margin-top: var(--space-6) !important; }
.zre-mt-8 { margin-top: var(--space-8) !important; }
.zre-mb-5 { margin-bottom: var(--space-5) !important; }
.zre-m0 { margin: 0 !important; }
.zre-placeholder-note {
	font-size: var(--text-micro);
	color: var(--color-muted);
	font-style: italic;
	margin-top: var(--space-3);
}

/* Demo/placeholder badge — every non-live piece of content wears this */
.zre-demo-badge {
	display: inline-block;
	background: var(--color-demo-badge);
	color: #fff;
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: var(--radius-sm);
}

@media (max-width: 820px) {
	.zre-section { padding: var(--space-8) var(--container-pad); }
}

/* Quiet one-line teaser — replaces a boxed "under construction" banner
   with a subtle editorial aside (used by the List Your Property teaser) */
.zre-quiet-teaser {
	max-width: var(--container-max);
	margin: 0 auto;
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
	text-align: center;
	color: var(--color-muted);
	font-size: var(--text-small);
}
.zre-quiet-teaser strong { color: var(--color-ink); }
.zre-quiet-teaser a { color: var(--color-cobalt); font-weight: 700; text-decoration: none; margin-left: var(--space-2); white-space: nowrap; }
.zre-quiet-teaser a:hover { text-decoration: underline; }