/**
 * Enclavians — design system.
 *
 * Loaded after base.css (structure) and owns the visual language: palette,
 * type scale, and every public-facing component. Tokens drive the inner pages
 * further down the file, so re-theming happens in :root rather than per
 * component.
 */

:root {
	/* Brand palette. Green carries actions and trust; gold is an accent only
	   and is never used for large fills or long text. */
	--enc-primary: #0C5A32;
	--enc-primary-strong: #073D24;
	--enc-primary-deep: #052E1D;
	--enc-primary-soft: #EFF7F1;
	--enc-accent: #C89B32;
	--enc-accent-light: #E4C46D;
	--enc-accent-strong: #A87A15;

	--enc-bg: #F7F8F5;
	--enc-surface: #FFFFFF;
	--enc-surface-2: #EFF2EE;
	--enc-glass: rgba(255, 255, 255, 0.92);
	--enc-text: #172019;
	--enc-text-soft: #3D473F;
	--enc-text-muted: #667067;
	--enc-border: #E2E7E2;
	--enc-border-strong: #CBD4CC;
	--enc-success: #15803D;
	--enc-danger: #C2413A;

	/* Legacy tokens from the structural stylesheet, remapped so it inherits
	   this palette instead of fighting it. */
	--z-green: #0C5A32;
	--z-green-dark: #073D24;
	--z-green-light: #EFF7F1;
	--z-gold: #C89B32;
	--z-bg: #F7F8F5;
	--z-card: #FFFFFF;
	--z-ink: #172019;
	--z-muted: #667067;
	--z-line: #E2E7E2;

	--enc-hero-text: #FFFFFF;
	--enc-hero-muted: rgba(255, 255, 255, 0.86);

	--enc-radius-sm: 8px;
	--enc-radius: 12px;
	--enc-radius-lg: 18px;

	--enc-shadow-xs: 0 1px 2px rgba(23, 32, 25, 0.05);
	--enc-shadow: 0 1px 3px rgba(23, 32, 25, 0.06), 0 8px 24px -12px rgba(23, 32, 25, 0.14);
	--enc-shadow-hover: 0 2px 6px rgba(23, 32, 25, 0.08), 0 18px 40px -16px rgba(23, 32, 25, 0.22);
	--enc-shadow-lg: 0 24px 60px -24px rgba(5, 46, 29, 0.4);
	--enc-ring: 0 0 0 3px rgba(12, 90, 50, 0.28);

	--enc-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--enc-font-display: "Playfair Display", Georgia, serif;
	--enc-ease: cubic-bezier(0.22, 1, 0.36, 1);

	--enc-header-h: 76px;
	color-scheme: light;
}

html[data-theme="dark"] {
	--enc-primary: #3E9A63;
	--enc-primary-strong: #57B67C;
	--enc-primary-deep: #0B160F;
	--enc-primary-soft: rgba(62, 154, 99, 0.14);
	--enc-accent: #D8AC48;
	--enc-accent-light: #E9CC81;
	--enc-accent-strong: #E9CC81;

	--enc-bg: #0E1310;
	--enc-surface: #161C18;
	--enc-surface-2: #1D251F;
	--enc-glass: rgba(14, 19, 16, 0.9);
	--enc-text: #E9EFEA;
	--enc-text-soft: #C4CFC7;
	--enc-text-muted: #94A197;
	--enc-border: #26312A;
	--enc-border-strong: #364438;

	--z-green: #3E9A63;
	--z-green-dark: #57B67C;
	--z-green-light: rgba(62, 154, 99, 0.14);
	--z-bg: #0E1310;
	--z-card: #161C18;
	--z-ink: #E9EFEA;
	--z-muted: #94A197;
	--z-line: #26312A;

	--enc-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
	--enc-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 10px 28px -12px rgba(0, 0, 0, 0.6);
	--enc-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.55), 0 20px 44px -16px rgba(0, 0, 0, 0.7);
	--enc-ring: 0 0 0 3px rgba(62, 154, 99, 0.4);
	color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
body.site-body {
	font-family: var(--enc-font);
	background: var(--enc-bg);
	color: var(--enc-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	/* Nothing may cause sideways scroll at any width. */
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--enc-font-display);
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--enc-text);
	line-height: 1.2;
}

.wrap { width: min(100% - 2rem, 1320px); margin-inline: auto; }

:focus-visible { outline: none; box-shadow: var(--enc-ring); border-radius: 6px; }
::selection { background: var(--enc-primary-soft); color: var(--enc-text); }

/* Icon-only controls still need a real touch target. */
.enc-tap { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

.enc-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Header ───────────────────────────────────────────────────────────── */
/* The header carries the logo, and the logo's wordmark runs gold to WHITE:
   "ENCLA" is gold, "VIANS" is white, and the tagline and the swoosh under it
   are white too. On the near-white bar this used to be, 37.4% of the artwork's
   opaque pixels fell below a 1.6:1 contrast ratio and simply were not there.
   Measured on this gradient instead: 4.9%.

   Everything in the bar is restated below rather than left to inherit, because
   the defaults are tuned for dark-on-light — .btn-post in particular was
   --enc-primary green, which on a green bar would have vanished as thoroughly
   as the wordmark did. */
.top-header {
	position: sticky;
	top: 0;
	z-index: 900;
	/* The lightest stop is #0A5430, not the brand's #0C5A32. At #0C5A32 the
	   logo measures 89.7% visible; the threshold is 90%. The logo sits at the
	   left where the bar is darkest, but the gradient's geometry shifts with
	   viewport width, so the whole bar is kept safe rather than relying on
	   where the artwork happens to land. */
	background: linear-gradient(115deg, #05301C 0%, #0B4A2B 42%, #0A5430 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18), 0 8px 28px -18px rgba(0, 0, 0, 0.55);
}
/* Deeper in dark mode so the bar still reads as a distinct surface rather than
   glowing against the page behind it. */
html[data-theme="dark"] .top-header {
	background: linear-gradient(115deg, #03210F 0%, #06341E 45%, #0A4526 100%);
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

.top-header .nav-link { color: rgba(255, 255, 255, 0.86); }
.top-header .nav-link:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
}
.top-header .nav-link.is-active { color: #fff; font-weight: 600; }
/* Gold underline against white text: the accent already reads as the brand's,
   and it is the one colour in the logo that survives on both backgrounds. */
.top-header .nav-link.is-active::after { background: var(--enc-accent); }

/* Gold, not green. A green pill on a green bar is a shape you have to hunt
   for, and this is the primary call to action on the page. */
.top-header .btn-post {
	background: var(--enc-accent);
	border-color: var(--enc-accent);
	color: #231904;
}
.top-header .btn-post:hover { background: #D9AC44; border-color: #D9AC44; }

.top-header .header-icon {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.10);
	color: rgba(255, 255, 255, 0.92);
}
.top-header .header-icon:hover {
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}
.top-header .nav-toggle {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.10);
	color: #fff;
}

/* Signed-in pill. Left alone it was a solid white lozenge on the green bar,
   brighter than the logo beside it. The dropdown it opens is a light surface
   and keeps its own dark text — these rules stop at the trigger. */
.top-header .enc-user-btn {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.10);
	color: #fff;
}
.top-header .enc-user-btn:hover {
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.18);
}
.top-header .enc-user-btn svg { color: rgba(255, 255, 255, 0.72); }
/* Gold rather than --enc-primary: a green avatar inside a translucent pill on
   a green bar is three greens deep and the initial stops reading. */
.top-header .enc-user-avatar { background: var(--enc-accent); color: #231904; }
.header-row {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	min-height: var(--enc-header-h);
}
.logo-mark { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.logo-img { height: 46px; width: auto; display: block; }

.header-nav { display: flex; align-items: center; gap: 0.25rem; margin-inline: auto; }
.nav-link {
	position: relative;
	padding: 0.55rem 0.85rem;
	border-radius: var(--enc-radius-sm);
	color: var(--enc-text-soft);
	text-decoration: none;
	font-size: 0.94rem;
	font-weight: 500;
	white-space: nowrap;
	transition: color 0.16s var(--enc-ease), background 0.16s var(--enc-ease);
}
.nav-link:hover { color: var(--enc-primary); background: var(--enc-primary-soft); }
.nav-link.is-active { color: var(--enc-primary); font-weight: 600; }
.nav-link.is-active::after {
	content: "";
	position: absolute;
	left: 0.85rem; right: 0.85rem; bottom: 0.15rem;
	height: 2px; border-radius: 2px;
	background: var(--enc-accent);
}

.header-actions { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }

.btn-post {
	display: inline-flex; align-items: center; gap: 0.45rem;
	padding: 0.62rem 1.15rem;
	border-radius: 999px;
	background: var(--enc-primary);
	color: #fff;
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
	border: 1px solid var(--enc-primary);
	white-space: nowrap;
	transition: background 0.16s var(--enc-ease), transform 0.16s var(--enc-ease);
}
.btn-post:hover { background: var(--enc-primary-strong); transform: translateY(-1px); }

.header-icon {
	position: relative;
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px;
	border: 1px solid var(--enc-border);
	background: var(--enc-surface);
	color: var(--enc-text-soft);
	text-decoration: none;
	cursor: pointer;
}
.header-icon:hover { border-color: var(--enc-primary); color: var(--enc-primary); }
.header-icon__count {
	position: absolute; top: -2px; right: -2px;
	min-width: 18px; height: 18px; padding: 0 4px;
	border-radius: 999px;
	background: var(--enc-accent);
	color: #1A1405;
	font-size: 0.68rem; font-weight: 700; line-height: 18px; text-align: center;
}

.nav-toggle { display: none; }

/* ── Signed-in user menu ─────────────────────────────────────────────────
   Lost when this stylesheet was rewritten: the markup was still emitting the
   avatar, name and dropdown, so a signed-in header rendered as raw HTML with
   the menu permanently open. */
.enc-user { position: relative; flex: 0 0 auto; }
.enc-user > .nav-link { white-space: nowrap; }

.enc-user-menu[hidden],
.enc-user-drop[hidden] { display: none !important; }

.enc-user-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.7rem 0.35rem 0.35rem;
	min-height: 44px;
	border: 1px solid var(--enc-border);
	border-radius: 999px;
	background: var(--enc-surface);
	color: var(--enc-text);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.16s var(--enc-ease), background 0.16s var(--enc-ease);
}
.enc-user-btn:hover { border-color: var(--enc-primary); background: var(--enc-primary-soft); }
.enc-user-btn svg { color: var(--enc-text-muted); flex: 0 0 auto; }

.enc-user-avatar {
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--enc-primary);
	color: #fff;
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1;
}
.enc-user-name {
	max-width: 9ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.enc-user-drop {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: 950;
	min-width: 210px;
	padding: 0.4rem;
	display: grid;
	gap: 0.1rem;
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius);
	box-shadow: var(--enc-shadow-hover);
}
.enc-user-drop a,
.enc-user-drop button {
	display: block;
	width: 100%;
	text-align: left;
	padding: 0.65rem 0.75rem;
	border: 0;
	border-radius: var(--enc-radius-sm);
	background: none;
	color: var(--enc-text);
	font: inherit;
	font-size: 0.9rem;
	text-decoration: none;
	cursor: pointer;
}
.enc-user-drop a:hover,
.enc-user-drop button:hover { background: var(--enc-primary-soft); color: var(--enc-primary); }
/* Sign out is destructive-ish and sits apart from the navigation items. */
.enc-user-drop button#enc-user-signout {
	margin-top: 0.25rem;
	border-top: 1px solid var(--enc-border);
	border-radius: 0 0 var(--enc-radius-sm) var(--enc-radius-sm);
	color: var(--enc-danger);
}
.enc-user-drop button#enc-user-signout:hover { background: rgba(194, 65, 58, 0.09); color: var(--enc-danger); }

/* ── Mobile drawer ────────────────────────────────────────────────────── */
.mobile-drawer {
	position: fixed; inset: 0; z-index: 1000;
	display: grid; grid-template-columns: 1fr min(84vw, 340px);
	visibility: hidden;
}
.mobile-drawer[hidden] { display: none; }
.mobile-drawer.is-open { visibility: visible; }
.mobile-drawer__scrim {
	background: rgba(5, 46, 29, 0.5);
	opacity: 0;
	transition: opacity 0.24s var(--enc-ease);
	border: 0; padding: 0; cursor: pointer;
}
.mobile-drawer.is-open .mobile-drawer__scrim { opacity: 1; }
.mobile-drawer__panel {
	background: var(--enc-surface);
	box-shadow: var(--enc-shadow-lg);
	padding: 1.1rem 1.2rem 2rem;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.26s var(--enc-ease);
	display: flex; flex-direction: column; gap: 0.35rem;
}
.mobile-drawer.is-open .mobile-drawer__panel { transform: none; }
.mobile-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.mobile-drawer__link {
	display: block;
	padding: 0.85rem 0.6rem;
	border-radius: var(--enc-radius-sm);
	color: var(--enc-text);
	text-decoration: none;
	font-weight: 500;
	border-bottom: 1px solid var(--enc-border);
}
.mobile-drawer__link:hover { background: var(--enc-primary-soft); color: var(--enc-primary); }
.mobile-drawer .btn-post { margin-top: 1rem; justify-content: center; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
	position: relative;
	isolation: isolate;
	min-height: clamp(440px, 52vw, 580px);
	display: flex;
	align-items: center;
	padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(6rem, 9vw, 7rem);
	color: #fff;
	overflow: hidden;
}
.hero__media {
	position: absolute; inset: 0; z-index: -2;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 58%;
}
/* Readability scrim. Angled from the left so the headline sits on the darkest
   part while the mountains stay visible on the right. */
.hero::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(90deg, rgba(5, 46, 29, 0.86) 0%, rgba(5, 46, 29, 0.62) 38%, rgba(5, 46, 29, 0.18) 72%, rgba(5, 46, 29, 0.32) 100%),
		linear-gradient(180deg, rgba(5, 46, 29, 0.34), transparent 30%);
}
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr); gap: 2.5rem; align-items: start; width: 100%; }
.hero h1 {
	color: #fff;
	font-size: clamp(2.15rem, 4.4vw, 3.6rem);
	line-height: 1.08;
	margin: 0 0 1rem;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);
	/* Long words must be allowed to break rather than push the layout wider
	   than the viewport. */
	overflow-wrap: break-word;
}
.hero h1 em { font-style: normal; color: var(--enc-accent-light); }
/* A line break only where there is width for it. Below that the heading wraps
   naturally — a hard <br> here overflowed a 390px screen. */
.hero__break { display: none; }
@media (min-width: 900px) { .hero__break { display: block; } }
.hero__sub {
	color: var(--enc-hero-muted);
	font-size: clamp(1rem, 1.2vw, 1.1rem);
	max-width: 54ch;
	margin: 0;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* Community panel */
.hero__communities {
	background: rgba(7, 61, 36, 0.82);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--enc-radius-lg);
	padding: 1.25rem 1.35rem;
	box-shadow: var(--enc-shadow-lg);
}
.hero__communities h2 {
	color: #fff; font-size: 1.05rem; margin: 0 0 0.9rem;
	font-family: var(--enc-font); font-weight: 600; letter-spacing: 0.01em;
}
.hero__communities ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.hero__communities a {
	display: flex; align-items: center; gap: 0.7rem;
	padding: 0.55rem 0.4rem;
	border-radius: var(--enc-radius-sm);
	color: rgba(255, 255, 255, 0.92);
	text-decoration: none; font-size: 0.92rem; font-weight: 500;
}
.hero__communities a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.hero__dot {
	width: 30px; height: 30px; flex: 0 0 auto;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(232, 200, 120, 0.4);
	display: grid; place-items: center;
	font-size: 0.82rem; color: var(--enc-accent-light); font-weight: 700;
}
.hero__count { margin-left: auto; font-size: 0.78rem; color: rgba(255, 255, 255, 0.62); font-weight: 500; }

/* ── Search panel ─────────────────────────────────────────────────────── */
/* Pulled up over the hero's lower edge so the fold shows search + listings. */
.searchbar { margin-top: clamp(-5.5rem, -7vw, -4.5rem); position: relative; z-index: 5; }
.searchbar__card {
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius-lg);
	box-shadow: var(--enc-shadow-lg);
	overflow: hidden;
}
.searchbar__tabs { display: flex; gap: 0; border-bottom: 1px solid var(--enc-border); background: var(--enc-surface-2); }
.searchbar__tab {
	flex: 0 0 auto;
	padding: 0.9rem 1.6rem;
	border: 0; background: transparent;
	font: inherit; font-weight: 600; font-size: 0.95rem;
	color: var(--enc-text-muted);
	cursor: pointer;
	border-bottom: 3px solid transparent;
	text-decoration: none;
}
.searchbar__tab:hover { color: var(--enc-primary); }
.searchbar__tab.is-active {
	color: var(--enc-primary);
	background: var(--enc-surface);
	border-bottom-color: var(--enc-primary);
}
.searchbar__body { padding: 1.1rem 1.2rem 1.2rem; }
.searchbar__fields {
	display: grid;
	grid-template-columns: 1.3fr 1.1fr 1fr 0.9fr 0.9fr auto;
	gap: 0.7rem;
	align-items: end;
}
.searchbar__field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.searchbar__field label {
	font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
	text-transform: uppercase; color: var(--enc-text-muted);
}
.searchbar__field select,
.searchbar__field input {
	width: 100%;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--enc-border-strong);
	border-radius: var(--enc-radius-sm);
	background: var(--enc-surface);
	color: var(--enc-text);
	font: inherit; font-size: 0.94rem;
	min-height: 44px;
}
.searchbar__field select:focus, .searchbar__field input:focus { border-color: var(--enc-primary); }
.btn-search {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	padding: 0.78rem 1.6rem; min-height: 46px;
	border: 0; border-radius: var(--enc-radius-sm);
	background: var(--enc-primary); color: #fff;
	font: inherit; font-weight: 600; font-size: 0.95rem;
	cursor: pointer; white-space: nowrap;
	transition: background 0.16s var(--enc-ease);
}
.btn-search:hover { background: var(--enc-primary-strong); }
.searchbar__foot {
	display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
	margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--enc-border);
}
.searchbar__foot-label { font-size: 0.82rem; color: var(--enc-text-muted); font-weight: 500; }
.searchbar__chip {
	padding: 0.36rem 0.8rem;
	border-radius: 999px;
	border: 1px solid var(--enc-border-strong);
	background: var(--enc-surface);
	color: var(--enc-text-soft);
	font-size: 0.82rem; font-weight: 500; text-decoration: none;
}
.searchbar__chip:hover { border-color: var(--enc-primary); color: var(--enc-primary); background: var(--enc-primary-soft); }
.searchbar__more {
	margin-left: auto; background: none; border: 0; font: inherit;
	color: var(--enc-primary); font-weight: 600; font-size: 0.86rem; cursor: pointer;
}

/* `[hidden]` does not hide an element whose display is grid or flex — the
   browser's own rule is display:none, which loses on specificity. Toggled
   containers need this explicitly (CLAUDE.md §8). */
.searchbar__fields[hidden],
.pgrid[hidden],
.trust[hidden],
.cgrid[hidden],
.detail-bar[hidden] { display: none !important; }

/* ── Trust strip ──────────────────────────────────────────────────────── */
.trust {
	margin-top: 1.5rem;
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius-lg);
	box-shadow: var(--enc-shadow);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.trust__item { display: flex; align-items: center; gap: 0.9rem; padding: 1.15rem 1.3rem; }
.trust__item + .trust__item { border-left: 1px solid var(--enc-border); }
.trust__icon {
	width: 52px; height: 52px; flex: 0 0 auto;
	border-radius: 999px;
	background: var(--enc-primary-soft);
	display: grid; place-items: center;
}
.trust__icon img { width: 30px; height: 30px; object-fit: contain; }
.trust__title { font-family: var(--enc-font); font-weight: 600; font-size: 0.95rem; margin: 0; }
.trust__text { margin: 0.1rem 0 0; font-size: 0.83rem; color: var(--enc-text-muted); line-height: 1.45; }

/* ── Sections ─────────────────────────────────────────────────────────── */
.section { padding: clamp(2.2rem, 4.5vw, 3.4rem) 0; }
.section--soft { background: var(--enc-primary-soft); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.section__title { font-size: clamp(1.5rem, 2.4vw, 2.05rem); margin: 0; }
.section__sub { margin: 0.3rem 0 0; color: var(--enc-text-muted); font-size: 0.95rem; }
.section__link { color: var(--enc-primary); font-weight: 600; text-decoration: none; font-size: 0.92rem; white-space: nowrap; }
.section__link:hover { text-decoration: underline; }

/* ── Property grid + card ─────────────────────────────────────────────── */
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 1180px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .pgrid { grid-template-columns: 1fr; } }

.pcard {
	display: flex; flex-direction: column;
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius);
	overflow: hidden;
	transition: transform 0.18s var(--enc-ease), box-shadow 0.18s var(--enc-ease), border-color 0.18s var(--enc-ease);
	height: 100%;
}
.pcard:hover { transform: translateY(-3px); box-shadow: var(--enc-shadow-hover); border-color: var(--enc-border-strong); }
.pcard:focus-within { box-shadow: var(--enc-ring); }
.pcard.is-featured { border-color: var(--enc-accent); }

.pcard__media { position: relative; aspect-ratio: 4 / 3; background: var(--enc-surface-2); overflow: hidden; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--enc-ease); }
.pcard:hover .pcard__media img { transform: scale(1.04); }
.pcard__badges { position: absolute; top: 0.65rem; left: 0.65rem; display: flex; gap: 0.35rem; flex-wrap: wrap; max-width: calc(100% - 4rem); }
.pbadge {
	padding: 0.28rem 0.6rem;
	border-radius: 6px;
	font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
	color: #fff; background: var(--enc-primary);
	white-space: nowrap;
}
.pbadge--rent { background: #1F5E8C; }
.pbadge--wanted { background: var(--enc-accent-strong); }
.pbadge--featured { background: var(--enc-accent); color: #241A05; }
.pbadge--verified { background: var(--enc-success); }
/* Files are a distinct product — non-possession, still on DHA installments —
   so the badge is neutral rather than borrowing a sale/rent colour. */
.pbadge--file { background: #6B4E1E; }

.pcard__fav {
	position: absolute; top: 0.55rem; right: 0.55rem;
	width: 38px; height: 38px;
	display: grid; place-items: center;
	border-radius: 999px; border: 0;
	background: rgba(255, 255, 255, 0.92);
	color: var(--enc-text-soft);
	cursor: pointer;
	box-shadow: var(--enc-shadow-xs);
}
.pcard__fav:hover { color: var(--enc-danger); }
.pcard__fav.is-on { color: var(--enc-danger); }

.pcard__body { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.pcard__price { font-family: var(--enc-font); font-size: 1.15rem; font-weight: 700; color: var(--enc-primary); margin: 0; letter-spacing: -0.01em; }
.pcard__price span { font-size: 0.8rem; font-weight: 500; color: var(--enc-text-muted); }
/* "Profit" reads as a label on the figure, not muted small print like /month. */
.pcard__price .pcard__pricetag {
	font-size: 0.66rem; font-weight: 700; color: #6B4E1E;
	background: #F4ECD8; border-radius: 5px; padding: 0.08em 0.4em;
	letter-spacing: 0.03em; text-transform: uppercase; vertical-align: 0.12em;
}
.pcard__title {
	margin: 0; font-family: var(--enc-font); font-size: 0.98rem; font-weight: 600; line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard__title a { color: inherit; text-decoration: none; }
.pcard__title a::after { content: ""; position: absolute; inset: 0; }
.pcard__loc { margin: 0; font-size: 0.85rem; color: var(--enc-text-muted); display: flex; align-items: center; gap: 0.3rem; }
.pcard__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto; padding-top: 0.6rem; }
.pcard__meta span {
	display: inline-flex; align-items: center; gap: 0.28rem;
	padding: 0.28rem 0.5rem;
	border-radius: 6px;
	background: var(--enc-surface-2);
	font-size: 0.78rem; color: var(--enc-text-soft); font-weight: 500;
}
.pcard__foot { display: flex; gap: 0.5rem; padding: 0 1rem 1rem; }
.pcard__cta {
	flex: 1; text-align: center;
	padding: 0.6rem 0.8rem; min-height: 42px;
	display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
	border-radius: var(--enc-radius-sm);
	background: var(--enc-primary); color: #fff;
	font-weight: 600; font-size: 0.88rem; text-decoration: none;
	position: relative; z-index: 1;
}
.pcard__cta:hover { background: var(--enc-primary-strong); }
.pcard__wa {
	width: 44px; min-height: 42px;
	display: inline-grid; place-items: center;
	border-radius: var(--enc-radius-sm);
	border: 1px solid var(--enc-border-strong);
	color: var(--enc-success); text-decoration: none;
	position: relative; z-index: 1;
}
.pcard__wa:hover { border-color: var(--enc-success); background: var(--enc-primary-soft); }
.pcard__date { font-size: 0.74rem; color: var(--enc-text-muted); }

/* Marks a stock image so it cannot be read as a photograph of the property. */
.pcard__stock {
	position: absolute;
	left: 0.65rem;
	bottom: 0.65rem;
	padding: 0.24rem 0.55rem;
	border-radius: 5px;
	background: rgba(23, 32, 25, 0.78);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}
.detail-gallery .hero-img { position: relative; }
.detail-stock { left: 1rem; bottom: 1rem; font-size: 0.75rem; }

/* Wanted cards read as requirements, not inventory. */
.pcard--wanted { background: var(--enc-primary-soft); border-color: rgba(12, 90, 50, 0.18); }
.pcard--wanted .pcard__media { display: grid; place-items: center; aspect-ratio: 16 / 9; background: transparent; }
.pcard__wantmark { text-align: center; padding: 1rem; }
.pcard__wantmark strong { display: block; font-size: 0.95rem; color: var(--enc-primary-strong); }
.pcard__wantmark span { font-size: 0.82rem; color: var(--enc-text-muted); }

/* ── Community explorer ───────────────────────────────────────────────── */
/* Auto-fit rather than a fixed column count: the community list is data, and
   pinning the grid to five left an orphan tile when a sixth was added. */
.cgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
@media (max-width: 1100px) { .cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .cgrid { grid-template-columns: 1fr; } }
.ccard {
	position: relative;
	display: block;
	padding: 1.3rem 1.15rem;
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius);
	text-decoration: none;
	transition: transform 0.18s var(--enc-ease), box-shadow 0.18s var(--enc-ease), border-color 0.18s var(--enc-ease);
}
.ccard:hover { transform: translateY(-3px); box-shadow: var(--enc-shadow-hover); border-color: var(--enc-primary); }
.ccard__name { font-family: var(--enc-font); font-weight: 600; font-size: 1rem; color: var(--enc-text); margin: 0 0 0.3rem; }
.ccard__count { font-size: 0.85rem; color: var(--enc-text-muted); margin: 0; }
.ccard__go { margin-top: 0.8rem; font-size: 0.85rem; font-weight: 600; color: var(--enc-primary); display: inline-flex; gap: 0.3rem; align-items: center; }

/* ── CTA band ─────────────────────────────────────────────────────────── */
.cta {
	background: linear-gradient(120deg, var(--enc-primary-deep), var(--enc-primary-strong) 70%);
	border-radius: var(--enc-radius-lg);
	padding: clamp(1.8rem, 4vw, 2.8rem);
	color: #fff;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: center;
}
.cta h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 0 0 0.5rem; }
.cta p { color: rgba(255, 255, 255, 0.84); margin: 0; max-width: 56ch; }
.cta__points { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.cta__points li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.92rem; color: rgba(255, 255, 255, 0.9); }
.cta__points li::before { content: "✓"; color: var(--enc-accent-light); font-weight: 700; }
.cta__actions { display: flex; flex-direction: column; gap: 0.7rem; }
.cta__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	padding: 0.85rem 1.5rem; min-height: 48px;
	border-radius: var(--enc-radius-sm);
	font-weight: 600; text-decoration: none; font-size: 0.98rem;
}
.cta__btn--primary { background: var(--enc-accent); color: #241A05; }
.cta__btn--primary:hover { background: var(--enc-accent-light); }
.cta__btn--ghost { border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; }
.cta__btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer {
	background: var(--enc-primary-deep);
	color: rgba(255, 255, 255, 0.76);
	padding: clamp(2.4rem, 5vw, 3.4rem) 0 1.5rem;
	margin-top: clamp(2rem, 5vw, 3.5rem);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 2rem; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 620px)  { .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.footer-brandcol img { height: 44px; width: auto; margin-bottom: 0.9rem; }
.footer-brandcol p { font-size: 0.86rem; line-height: 1.6; margin: 0; color: rgba(255, 255, 255, 0.62); }
.footer-col h3 {
	font-family: var(--enc-font); font-size: 0.8rem; font-weight: 700;
	letter-spacing: 0.09em; text-transform: uppercase;
	color: var(--enc-accent-light); margin: 0 0 0.9rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-col a { color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: 0.89rem; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
	margin-top: 2.2rem; padding-top: 1.4rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	font-size: 0.8rem; color: rgba(255, 255, 255, 0.55);
}
.footer-disclaimer {
	margin: 0 0 1rem; font-size: 0.79rem; line-height: 1.6;
	color: rgba(255, 255, 255, 0.5); max-width: 90ch;
}

/* ── Detail page ──────────────────────────────────────────────────────── */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.85fr); gap: 1.6rem; align-items: start; }
.detail-side { position: sticky; top: calc(var(--enc-header-h) + 1rem); display: grid; gap: 1rem; }
.detail-card { background: var(--enc-surface); border: 1px solid var(--enc-border); border-radius: var(--enc-radius); padding: 1.2rem; box-shadow: var(--enc-shadow); }
.detail-price { font-family: var(--enc-font); font-size: 1.7rem; font-weight: 700; color: var(--enc-primary); margin: 0.5rem 0 0.2rem; }
.detail-pricetag {
	font-size: 0.72rem; font-weight: 700; color: #6B4E1E;
	background: #F4ECD8; border-radius: 6px; padding: 0.12em 0.5em;
	letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 0.28em;
}
.detail-pricenote { font-size: 0.82rem; color: var(--enc-text-muted); margin: 0.1rem 0 0.4rem; }
.detail-title { font-size: 1.3rem; margin: 0 0 0.5rem; }
.detail-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 1rem 0; }
.detail-fact { background: var(--enc-surface-2); border-radius: var(--enc-radius-sm); padding: 0.6rem 0.75rem; }
.detail-fact dt { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--enc-text-muted); font-weight: 600; margin: 0; }
.detail-fact dd { margin: 0.15rem 0 0; font-size: 0.95rem; font-weight: 600; color: var(--enc-text); }

/* Contact actions. The SVGs carry no intrinsic size, so without an explicit
   width they rendered at their natural box — full column width — and the links
   fell back to default blue. */
.detail-contact { display: flex; gap: 0.6rem; margin: 1rem 0 0.6rem; flex-wrap: wrap; }
.prop-act {
	flex: 1 1 0;
	min-width: 140px;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-radius: var(--enc-radius-sm);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background 0.16s var(--enc-ease), border-color 0.16s var(--enc-ease);
}
.prop-act svg { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; }
.prop-act-call { background: var(--enc-primary); color: #fff; }
.prop-act-call:hover { background: var(--enc-primary-strong); }
.prop-act-wa { background: var(--enc-surface); color: var(--enc-success); border-color: var(--enc-border-strong); }
.prop-act-wa:hover { border-color: var(--enc-success); background: var(--enc-primary-soft); }

.detail-contact-number { font-size: 0.88rem; color: var(--enc-text-muted); margin: 0.2rem 0 0; text-align: center; }
.detail-contact-number b { color: var(--enc-text); }

.detail-society { font-size: 0.95rem; color: var(--enc-text-muted); margin: 0.35rem 0 0; }
.detail-society strong { color: var(--enc-text); font-weight: 600; }

.detail-purpose {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	border-radius: 6px;
	background: var(--enc-primary-soft);
	color: var(--enc-primary);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Save control on the detail page — a labelled pill, unlike the icon-only
   heart on a card. */
.detail-fav {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 40px;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--enc-border-strong);
	border-radius: 999px;
	background: var(--enc-surface);
	color: var(--enc-text-soft);
	font: inherit;
	font-size: 0.88rem;
	font-weight: 500;
	cursor: pointer;
}
.detail-fav:hover { border-color: var(--enc-danger); color: var(--enc-danger); }
.detail-fav[aria-pressed="true"] { color: var(--enc-danger); border-color: var(--enc-danger); }
.prop-fav-ic { font-size: 1rem; line-height: 1; }
.detail-fav-txt { white-space: nowrap; }

/* Icon-only heart on a listing card (the JS toggles .enc-fav / is-on). */
.enc-fav.is-on, .prop-fav.is-on { color: var(--enc-danger); }

/* Theme toggle: exactly one icon at a time. Both were showing because the
   swap rules did not survive the stylesheet rewrite. */
.enc-icon-sun { display: none; }
html[data-theme="dark"] .enc-icon-sun { display: block; }
html[data-theme="dark"] .enc-icon-moon { display: none; }

/* Sign-in card (login page). */
.enc-auth-wrap { display: grid; place-items: center; padding: clamp(2rem, 6vw, 4rem) 0; }
.enc-auth-card {
	width: min(100%, 420px);
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius-lg);
	box-shadow: var(--enc-shadow);
	padding: clamp(1.5rem, 4vw, 2.2rem);
	text-align: center;
}

/* Breadcrumbs — also the trail search engines read. */
.breadcrumbs { margin: 0 0 1.1rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; font-size: 0.85rem; }
.breadcrumbs li { color: var(--enc-text-muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--enc-border-strong); }
.breadcrumbs a { color: var(--enc-primary); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs li[aria-current] {
	max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Content blocks down the left column of the detail page. */
.detail-block {
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius);
	padding: 1.2rem 1.3rem;
	margin-top: 1rem;
}
.detail-block h3 { margin: 0 0 0.9rem; font-size: 1.05rem; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.7rem; margin: 0; }
.feature { background: var(--enc-surface-2); border-radius: var(--enc-radius-sm); padding: 0.65rem 0.8rem; }
.feature dt { margin: 0; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--enc-text-muted); font-weight: 600; }
.feature dd { margin: 0.2rem 0 0; font-size: 0.95rem; font-weight: 600; color: var(--enc-text); }

.detail-maplink {
	display: inline-flex; align-items: center; gap: 0.5rem;
	min-height: 44px; padding: 0.6rem 1rem;
	border: 1px solid var(--enc-border-strong); border-radius: var(--enc-radius-sm);
	color: var(--enc-primary); font-weight: 600; font-size: 0.9rem; text-decoration: none;
}
.detail-maplink:hover { border-color: var(--enc-primary); background: var(--enc-primary-soft); }

.seller-row { display: flex; align-items: center; gap: 0.9rem; }
.seller-avatar {
	width: 46px; height: 46px; flex: 0 0 auto;
	display: grid; place-items: center; border-radius: 999px;
	background: var(--enc-primary); color: #fff; font-weight: 700; font-size: 1.1rem;
}
.seller-name { margin: 0; font-weight: 600; color: var(--enc-text); }
.seller-role { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--enc-text-muted); }

.detail-report { margin: 1.4rem 0 0; text-align: center; font-size: 0.85rem; }
.detail-report a { color: var(--enc-text-muted); text-decoration: underline; }
.detail-report a:hover { color: var(--enc-danger); }

/* Gallery */
.detail-gallery { background: var(--enc-surface); border: 1px solid var(--enc-border); border-radius: var(--enc-radius); overflow: hidden; }
.detail-gallery .hero-img {
	/* height:auto is required: the structural stylesheet pins a fixed height,
	   and with a definite height an aspect-ratio computes the WIDTH from it —
	   which left the photo narrower than its container. */
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	background: var(--enc-surface-2);
}
.detail-gallery .hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-gallery .thumbs { display: flex; gap: 0.5rem; padding: 0.6rem; overflow-x: auto; }
.detail-gallery .thumbs img {
	width: 84px; height: 64px; object-fit: cover; flex: 0 0 auto;
	border-radius: var(--enc-radius-sm); cursor: pointer;
	border: 2px solid transparent; opacity: 0.75;
	transition: opacity 0.16s var(--enc-ease), border-color 0.16s var(--enc-ease);
}
.detail-gallery .thumbs img:hover { opacity: 1; }
.detail-gallery .thumbs img.is-active,
.detail-gallery .thumbs img.is-feature-thumb { border-color: var(--enc-primary); opacity: 1; }

.detail-desc { background: var(--enc-surface); border: 1px solid var(--enc-border); border-radius: var(--enc-radius); padding: 1.2rem 1.3rem; margin-top: 1rem; }
.detail-desc h3 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.detail-desc p { margin: 0; color: var(--enc-text-soft); }

.detail-toprow { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }

.prop-act-msg { background: var(--enc-surface); color: var(--enc-primary); border-color: var(--enc-border-strong); }
.prop-act-msg:hover { border-color: var(--enc-primary); background: var(--enc-primary-soft); }

/* Mobile contact bar: fixed, above everything, with room for safe areas. */
.detail-bar {
	display: none;
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 800;
	background: var(--enc-surface);
	border-top: 1px solid var(--enc-border);
	padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom));
	gap: 0.5rem;
	box-shadow: 0 -8px 28px -18px rgba(0, 0, 0, 0.5);
}
.detail-bar a { flex: 1; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border-radius: var(--enc-radius-sm); font-weight: 600; text-decoration: none; font-size: 0.92rem; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1150px) {
	.searchbar__fields { grid-template-columns: 1fr 1fr 1fr; }
	.searchbar__fields .btn-search { grid-column: 1 / -1; }
	.trust { grid-template-columns: 1fr 1fr; }
	.trust__item:nth-child(3) { border-left: 0; }
	.trust__item:nth-child(n+3) { border-top: 1px solid var(--enc-border); }
}
@media (max-width: 1024px) {
	.hero__inner { grid-template-columns: 1fr; gap: 1.6rem; }
	.hero__communities { max-width: 460px; }
	.detail-layout { grid-template-columns: 1fr; }
	.detail-side { position: static; }
}
@media (max-width: 900px) {
	.header-nav { display: none; }
	.nav-toggle { display: inline-flex; }
	.btn-post span { display: none; }
	.btn-post { padding: 0.62rem 0.9rem; }
	.cta { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
	/* Sign-in lives in the drawer on small screens; keeping it in the bar
	   pushed the row past the viewport. */
	.enc-user { display: none; }
}
@media (max-width: 760px) {
	:root { --enc-header-h: 64px; }
	.logo-img { height: 34px; }
	.hero h1 { font-size: clamp(1.75rem, 7.4vw, 2.4rem); }
	.hero__communities { padding: 1rem; }
	.header-row { gap: 0.5rem; }
	.header-actions { gap: 0.35rem; margin-left: auto; }
	.searchbar { margin-top: -3rem; }
	.searchbar__fields { grid-template-columns: 1fr; }
	.searchbar__tab { flex: 1; padding: 0.8rem 0.5rem; text-align: center; }
	.trust { grid-template-columns: 1fr; }
	.trust__item + .trust__item { border-left: 0; border-top: 1px solid var(--enc-border); }
	.hero { min-height: 400px; padding-bottom: 4.5rem; }
	.detail-bar { display: flex; }
	/* Keep the fixed bar from covering the end of the page. */
	body.has-detail-bar { padding-bottom: 72px; }
}
@media (max-width: 400px) {
	.wrap { width: min(100% - 1.5rem, 1320px); }
	.searchbar__foot-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
	.pcard:hover { transform: none; }
	.pcard:hover .pcard__media img { transform: none; }
}


/* ─────────── Inner pages (account, legal, pricing, payments) ─────────── */
/* ── Legal documents (Terms of Use, Privacy Policy) ── */
.legal-doc {
	max-width: 76ch;
	margin: 1.6rem auto 2.4rem;
	color: var(--enc-text);
	line-height: 1.7;
	font-size: 0.97rem;
}
.legal-head { margin-bottom: 1.4rem; }
.legal-kicker {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--enc-primary);
	background: var(--enc-primary-soft);
	border-radius: 999px;
	padding: 0.2rem 0.7rem;
	margin-bottom: 0.7rem;
}
.legal-head h1 {
	font-family: var(--enc-font-display);
	font-size: clamp(1.7rem, 4vw, 2.3rem);
	line-height: 1.15;
	margin: 0 0 0.4rem;
	letter-spacing: -0.02em;
}
.legal-updated { color: var(--enc-text-muted); font-size: 0.85rem; margin: 0; }
.legal-callout {
	background: var(--enc-primary-soft);
	border: 1px solid var(--enc-border);
	border-left: 4px solid var(--enc-primary);
	border-radius: 12px;
	padding: 1rem 1.15rem;
	margin: 1.4rem 0 1.8rem;
	font-size: 0.94rem;
	line-height: 1.65;
}
.legal-doc h2 {
	font-family: var(--enc-font-display);
	font-size: 1.22rem;
	margin: 2rem 0 0.6rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--enc-border);
	letter-spacing: -0.01em;
}
.legal-doc h3 { font-size: 1.02rem; margin: 1.2rem 0 0.4rem; color: var(--enc-text); }
.legal-doc p { margin: 0.6rem 0; }
.legal-doc ul { margin: 0.6rem 0; padding-left: 1.3rem; }
.legal-doc li { margin: 0.4rem 0; }
.legal-doc a { color: var(--enc-primary); font-weight: 600; }
.legal-doc a:hover { text-decoration: underline; }
.legal-foot-links {
	margin-top: 2rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--enc-border);
	font-size: 0.9rem;
	color: var(--enc-text-muted);
}
.footer-legal {
	max-width: 80ch;
	margin: 0.8rem auto 0;
	font-size: 0.78rem;
	line-height: 1.55;
	/* Was --enc-text-muted, i.e. the body text colour, which rendered dark
	   grey on the dark footer and was effectively invisible. */
	color: var(--enc-footer-muted);
	text-align: center;
}
.footer-legal a { color: inherit; text-decoration: underline; }

/* ── Onboarding (role selection + profile) ── */
.ua-ob-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; max-width: 760px; margin: 0 auto; }
@media (max-width: 640px) { .ua-ob-cards { grid-template-columns: 1fr; } }
.ua-ob-card {
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius);
	padding: 1.4rem 1.3rem;
	box-shadow: var(--enc-shadow-xs);
	display: flex;
	flex-direction: column;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.ua-ob-card:hover { border-color: var(--enc-primary); box-shadow: var(--enc-shadow-hover); transform: translateY(-2px); }
.ua-ob-ico { font-size: 2.2rem; line-height: 1; margin-bottom: 0.5rem; }
.ua-ob-card h3 { margin: 0 0 0.3rem; font-size: 1.12rem; }
.ua-ob-perks { list-style: none; padding: 0; margin: 0.7rem 0 1.1rem; flex: 1; }
.ua-ob-perks li { position: relative; padding-left: 1.3rem; margin: 0.35rem 0; font-size: 0.88rem; color: var(--enc-text-soft); }
.ua-ob-perks li::before { content: "✓"; position: absolute; left: 0; color: var(--enc-primary); font-weight: 800; }
.ua-ob-formwrap { max-width: 620px; margin: 0 auto; }
.ua-ob-back { display: inline-block; margin-bottom: 0.6rem; }
.ua-ob-check { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.8rem 0; font-size: 0.9rem; color: var(--enc-text-soft); }
.ua-ob-check input { margin-top: 0.15rem; flex: none; }

/* ── Role badge + package summary strip ── */
.ua-role-badge {
	display: inline-block; margin-top: 0.35rem;
	font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
	color: var(--enc-primary); background: rgba(4, 120, 87, 0.1);
	border-radius: 999px; padding: 0.2rem 0.6rem;
}
.ua-plan {
	display: flex; flex-wrap: wrap; align-items: center; gap: 1.3rem;
	background: var(--enc-surface); border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius); padding: 0.9rem 1.2rem; margin: 0.4rem 0 1rem;
}
.ua-plan-item { display: flex; flex-direction: column; gap: 0.15rem; }
.ua-plan-k { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--enc-text-muted); }
.ua-plan-v { font-size: 0.98rem; font-weight: 700; }
.ua-plan-cta { margin-left: auto; font-weight: 700; color: var(--enc-primary); text-decoration: none; white-space: nowrap; }
.ua-plan-cta:hover { text-decoration: underline; }
.ua-limit-note {
	background: #fff8e6; color: #8a5a00; border: 1px solid #f0d98a;
	border-radius: 10px; padding: 0.7rem 0.9rem; font-size: 0.86rem; margin: 0.6rem 0 0;
}
[data-theme="dark"] .ua-limit-note { background: rgba(217, 119, 6, 0.14); color: #f5c462; border-color: rgba(217, 119, 6, 0.4); }

/* ── User account (ua) ── */
.ua-head { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; margin: 1.4rem 0 0.6rem; }
.ua-title { margin: 0 0 0.2rem; font-size: clamp(1.4rem, 2.8vw, 1.9rem); }
.ua-quota { display: flex; align-items: center; gap: 0.8rem; }
.ua-quota-ring {
	display: grid;
	place-items: center;
	min-width: 78px;
	height: 78px;
	border-radius: 50%;
	border: 3px solid var(--enc-primary);
	background: var(--enc-primary-soft);
	font-family: var(--enc-font-display);
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--enc-primary-strong);
}
.ua-quota-label { font-size: 0.82rem; color: var(--enc-text-muted); line-height: 1.4; }
.ua-quota-label em { font-style: normal; font-size: 0.74rem; opacity: 0.8; }
.ua-actions { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin: 0.8rem 0; }
.ua-actions .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.ua-signout {
	margin-left: auto;
	background: none;
	border: 1px solid var(--enc-border-strong);
	border-radius: 999px;
	color: var(--enc-text-muted);
	font-family: var(--enc-font);
	font-size: 0.82rem;
	padding: 0.45rem 1rem;
	cursor: pointer;
}
.ua-signout:hover { border-color: #C62A2F; color: #C62A2F; }
.ua-verified-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	margin-left: 0.4rem;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--enc-primary-strong);
	background: var(--enc-primary-soft);
	border-radius: 999px;
	padding: 0.12rem 0.5rem;
	text-transform: none;
	letter-spacing: 0;
}
.ua-verify-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: var(--enc-primary);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 0.5rem 0.9rem;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.15s, transform 0.15s;
}
.ua-verify-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ua-verify-btn[hidden] { display: none; }
.ua-input-verified {
	background: var(--enc-primary-soft) !important;
	border-color: var(--enc-primary) !important;
	color: var(--enc-primary-strong) !important;
	font-weight: 700;
	cursor: default;
}
.ua-link-btn {
	background: none;
	border: 1px solid var(--enc-border-strong);
	border-radius: 999px;
	color: var(--enc-text-muted);
	font-family: var(--enc-font);
	font-weight: 600;
	font-size: 0.78rem;
	padding: 0.4rem 0.9rem;
	cursor: pointer;
	transition: all 0.15s;
}
.ua-link-btn:hover { border-color: var(--enc-primary); color: var(--enc-primary); }
.ua-link-btn.is-danger:hover { border-color: #C62A2F; color: #C62A2F; }
.ua-feat-btn {
	background: linear-gradient(135deg, var(--enc-accent), var(--enc-accent-strong));
	border: none;
	border-radius: 999px;
	color: #fff;
	font-family: var(--enc-font);
	font-weight: 650;
	font-size: 0.8rem;
	padding: 0.4rem 0.9rem;
	cursor: pointer;
	box-shadow: 0 6px 14px -6px rgba(180, 83, 9, 0.6);
	transition: transform 0.16s var(--enc-ease);
}
.ua-feat-btn:hover { transform: translateY(-1px); }

/* Modals */
.ua-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: min(8vh, 70px) 1rem 1rem;
	background: rgba(5, 20, 14, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	overflow-y: auto;
}
.ua-modal[hidden] { display: none; }
.ua-modal-panel {
	position: relative;
	width: min(560px, 100%);
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius-lg);
	box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.4);
	padding: 1.8rem;
	margin-bottom: 2rem;
}
.ua-modal-panel h2 { margin: 0 0 0.2rem; font-size: 1.3rem; }
.ua-modal-sub { margin: 0 0 1.1rem; font-size: 0.88rem; }
.ua-modal-x {
	position: absolute;
	top: 0.8rem;
	right: 0.9rem;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--enc-border);
	background: var(--enc-surface-2);
	color: var(--enc-text-muted);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}
.ua-field { margin: 0.8rem 0; }
.ua-field label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--enc-text-muted); margin-bottom: 0.3rem; }
.ua-field input, .ua-field select, .ua-field textarea {
	width: 100%;
	font-family: var(--enc-font);
	background: var(--enc-surface-2);
	border: 1px solid var(--enc-border-strong);
	border-radius: 10px;
	color: var(--enc-text);
	padding: 0.6rem 0.85rem;
	font-size: 0.92rem;
}
.ua-field textarea { resize: vertical; }
.ua-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.ua-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
@media (max-width: 560px) { .ua-2col, .ua-3col { grid-template-columns: 1fr; } }
.ua-seg { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ua-seg button {
	flex: 1;
	min-width: 100px;
	padding: 0.55rem 0.8rem;
	border-radius: 999px;
	border: 1px solid var(--enc-border-strong);
	background: var(--enc-surface-2);
	color: var(--enc-text-soft);
	font-family: var(--enc-font);
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
}
.ua-seg button.is-on { background: var(--enc-primary); border-color: var(--enc-primary); color: #fff; }
.ua-photo-previews { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.ua-photo-previews img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--enc-border);
}
.ua-photo-previews img.is-cover { outline: 2px solid var(--enc-primary); outline-offset: 1px; }
.ua-error { color: #C62A2F; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 10px; font-size: 0.85rem; padding: 0.6rem 0.9rem; margin: 0.8rem 0; }
.ua-ok { color: #0d4a2c; background: #e8f5ee; border: 1px solid #b8dcc8; border-radius: 10px; font-size: 0.88rem; padding: 0.7rem 0.9rem; margin: 0.8rem 0; }
.ua-feat-steps { display: grid; gap: 1rem; margin: 1rem 0; }
.ua-feat-step { display: flex; gap: 0.8rem; align-items: flex-start; }
.ua-feat-num {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--enc-primary-soft);
	color: var(--enc-primary-strong);
	font-weight: 800;
	font-size: 0.8rem;
	flex-shrink: 0;
	margin-top: 0.1rem;
}
.ua-feat-number { color: var(--enc-primary-strong); font-family: var(--enc-font-display); }

/* ── Pricing ── */
.enc-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 0.4rem 0 1rem; }
.enc-price-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius-lg);
	box-shadow: var(--enc-shadow-xs);
	padding: 1.4rem 1.5rem;
	transition: transform 0.18s var(--enc-ease), box-shadow 0.18s var(--enc-ease);
}
.enc-price-card:hover { transform: translateY(-3px); box-shadow: var(--enc-shadow-hover); }
.enc-price-card.is-popular { border-color: var(--enc-primary); box-shadow: 0 0 0 1px var(--enc-primary), var(--enc-shadow); }
.enc-price-card.is-recommended { border-color: var(--enc-accent); box-shadow: 0 0 0 2px var(--enc-accent), var(--enc-shadow-hover); }
.enc-price-flag--rec { background: linear-gradient(135deg, var(--enc-primary), var(--enc-primary-strong)); }
.enc-price-limit { font-size: 0.85rem; color: var(--enc-text-soft); margin: -0.3rem 0 0.7rem; }
.enc-price-limit strong { color: var(--enc-text); font-size: 1.05rem; }
.enc-price-note { font-size: 0.74rem; color: var(--enc-text-muted); margin: 0 0 0.8rem; }
.enc-price-card li.is-locked { color: var(--enc-text-muted); opacity: 0.7; }
.enc-price-card li.is-locked::before { content: "🔒"; font-size: 0.7em; top: 0.15em; }
.enc-price-flag {
	position: absolute;
	top: -0.7rem;
	left: 1.2rem;
	background: linear-gradient(135deg, var(--enc-accent), var(--enc-accent-strong));
	color: #fff;
	font-size: 0.68rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-radius: 999px;
	padding: 0.24rem 0.7rem;
}
.enc-price-card h3 { margin: 0 0 0.3rem; font-size: 1.05rem; color: var(--enc-text); }
.enc-price-amount { font-family: var(--enc-font-display); font-weight: 800; font-size: 1.6rem; color: var(--enc-primary-strong); margin-bottom: 0.7rem; }
.enc-price-amount span { font-size: 0.8rem; font-weight: 550; color: var(--enc-text-muted); margin-left: 0.3rem; }
.enc-price-card ul { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 0.35rem; flex: 1; }
.enc-price-card li { position: relative; padding-left: 1.3rem; font-size: 0.86rem; color: var(--enc-text-soft); }
.enc-price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--enc-primary); font-weight: 800; }
.enc-price-cta { text-align: center; text-decoration: none !important; }

/* ── Payment page ── */
.enc-pay-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.2rem; align-items: start; }
@media (max-width: 860px) { .enc-pay-layout { grid-template-columns: 1fr; } }
.enc-pay-card {
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius-lg);
	box-shadow: var(--enc-shadow-xs);
	padding: 1.4rem 1.5rem;
}
.enc-pay-summary { display: flex; flex-direction: column; gap: 0.15rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--enc-border-strong); margin-bottom: 1rem; }
.enc-pay-summary strong { font-size: 1.1rem; color: var(--enc-text); }
.enc-pay-amount { font-family: var(--enc-font-display); font-weight: 800; font-size: 1.7rem; color: var(--enc-primary-strong); }
.enc-pay-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.55rem; color: var(--enc-text-soft); font-size: 0.92rem; }
.enc-pay-number { color: var(--enc-primary-strong); font-family: var(--enc-font-display); font-size: 1.05em; }

/* ── Error boxes ── */
.error-box {
	background: var(--enc-surface);
	border: 1px solid var(--enc-border);
	border-radius: var(--enc-radius-lg);
	color: var(--enc-text);
}

/* ── Motion prefs ── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

@media (max-width: 640px) {
	.header-nav { gap: 0.1rem; }
	.nav-link { font-size: 0.8rem; padding: 0.45rem 0.55rem; }
	.logo-sub { display: none; }

	/* 16px form controls prevent iOS focus-zoom */
	input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
	input[type="number"], input[type="password"], select, textarea { font-size: 16px !important; }
}

/* ────────────────────────────────────────────────────────────
   Wanted board — residents looking to rent/buy (auth-gated contact)
   ──────────────────────────────────────────────────────────── */
.wa-hero .wa-kicker { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em;
	color: var(--enc-accent); background: rgba(217, 118, 6, 0.14); padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; }
.wa-hero-cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.wa-hero-link { color: var(--enc-hero-muted); text-decoration: none; font-weight: 600; }
.wa-hero-link:hover { color: var(--enc-hero-text); }
.wa-main { padding-top: 26px; }

.wa-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.wa-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
	border: 1px solid var(--enc-border); background: var(--enc-surface); color: var(--enc-text-soft);
	font-weight: 650; font-size: 0.9rem; text-decoration: none; transition: all 0.18s var(--enc-ease); }
.wa-tab:hover { border-color: var(--enc-primary); color: var(--enc-primary); }
.wa-tab.is-on { background: var(--enc-primary); border-color: var(--enc-primary); color: #fff; }
.wa-tab span { font-size: 0.78rem; background: rgba(0,0,0,0.08); padding: 1px 8px; border-radius: 999px; }
.wa-tab.is-on span { background: rgba(255,255,255,0.22); }

.wa-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.wa-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px;
	background: var(--enc-surface); border: 1px solid var(--enc-border); border-radius: var(--enc-radius-lg);
	box-shadow: var(--enc-shadow); transition: transform 0.18s var(--enc-ease), box-shadow 0.18s var(--enc-ease); }
.wa-card:hover { transform: translateY(-3px); box-shadow: var(--enc-shadow-hover); }
.wa-card-top { display: flex; justify-content: space-between; align-items: center; }
.wa-ribbon { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase;
	color: #fff; background: var(--enc-primary); padding: 4px 10px; border-radius: 8px; }
.wa-ribbon.is-rent { background: var(--enc-accent); }
.wa-when { font-size: 0.78rem; color: var(--enc-text-muted); }
.wa-card-title { font-family: var(--enc-font-display); font-size: 1.12rem; font-weight: 750;
	color: var(--enc-text); line-height: 1.3; margin: 2px 0 0; }
.wa-budget { font-size: 1.02rem; font-weight: 800; color: var(--enc-primary-strong); }
:root[data-theme="dark"] .wa-budget { color: var(--enc-primary); }
.wa-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0; padding: 0;
	font-size: 0.86rem; color: var(--enc-text-soft); }
.wa-card-desc { font-size: 0.88rem; color: var(--enc-text-muted); line-height: 1.5; margin: 0;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wa-card-foot { margin-top: auto; padding-top: 8px; }
.wa-contact { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wa-reveal { padding: 9px 16px; font-size: 0.9rem; }
.wa-contact-note { font-size: 0.76rem; color: var(--enc-text-muted); }
.wa-revealed { display: flex; gap: 10px; flex-wrap: wrap; }

.wa-empty { text-align: center; padding: 60px 20px; }
.wa-empty-ic { font-size: 2.6rem; }

/* Reveal modal */
.wa-modal { position: fixed; inset: 0; z-index: 120; background: rgba(8, 24, 18, 0.55);
	display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.wa-modal[hidden] { display: none; }
.wa-modal-card { position: relative; width: 100%; max-width: 420px; background: var(--enc-surface);
	border: 1px solid var(--enc-border); border-radius: var(--enc-radius-lg); padding: 26px 24px;
	box-shadow: var(--enc-shadow-hover); text-align: center; }
.wa-modal-x { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 1.1rem;
	color: var(--enc-text-muted); cursor: pointer; }
.wa-modal-ic { font-size: 2rem; }
.wa-modal-card h3 { margin: 6px 0 4px; font-family: var(--enc-font-display); }
.wa-modal-card .muted { color: var(--enc-text-muted); font-size: 0.88rem; }
.wa-field { display: flex; flex-direction: column; gap: 6px; text-align: left; margin: 14px 0; }
.wa-field span { font-size: 0.82rem; font-weight: 650; color: var(--enc-text-soft); }
.wa-field input { padding: 11px 13px; border: 1px solid var(--enc-border-strong); border-radius: 10px;
	font: inherit; background: var(--enc-surface); color: var(--enc-text); }
.wa-modal-card .btn-primary { width: 100%; }
#wa-recaptcha { margin: 4px 0 12px; display: flex; justify-content: center; }
.wa-err { color: #c0392b; font-size: 0.85rem; margin: 10px 0 0; }
.wa-link { color: var(--enc-primary); font-weight: 600; font-size: 0.85rem; }
@media (max-width: 520px) { .wa-grid { grid-template-columns: 1fr; } }

/* ──────────────────────────────────────────────────────────
   Listing card refresh — Zameen/Bayut/Zillow pattern:
   price is the hero (compact) in the body, a beds·baths·area
   spec strip, a subtle location line, colour-coded purpose.
   ────────────────────────────────────────────────────────── */
.prop-card { display: flex; flex-direction: column; border-radius: 16px; }
.prop-card-img { position: relative; }
.prop-card-noimg { display: grid; place-items: center; height: 100%; font-size: 2.6rem;
  background: linear-gradient(135deg, var(--enc-surface-2), var(--enc-bg)); color: var(--enc-border-strong); }
/* Purpose badge → top-left; Featured stays top-right */
.prop-card .prop-badge:not(.prop-badge-featured) { position: absolute; top: 0.7rem; left: 0.7rem; right: auto; }
.prop-badge-rent { background: rgba(37, 99, 168, 0.92) !important; }
.prop-badge-purchase { background: var(--enc-accent-strong) !important; }

.prop-body { padding: 0.85rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.28rem; }
.prop-price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.prop-body .prop-price { position: static; background: none; box-shadow: none; padding: 0; border-radius: 0;
  font-family: var(--enc-font-display); font-weight: 800; font-size: 1.32rem; line-height: 1.1;
  color: var(--enc-primary-strong); letter-spacing: -0.02em; }
html[data-theme="dark"] .prop-body .prop-price { color: var(--enc-primary-strong); }
.prop-price-per { font-size: 0.8rem; font-weight: 600; color: var(--enc-text-muted); }
.prop-title { margin: 0.1rem 0 0; font-size: 0.96rem; font-weight: 700; color: var(--enc-text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.prop-loc { font-size: 0.82rem; color: var(--enc-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-specs { display: flex; margin-top: 0.55rem; border: 1px solid var(--enc-border); border-radius: 10px;
  background: var(--enc-surface-2); overflow: hidden; }
.prop-spec { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 6px; border-right: 1px solid var(--enc-border); min-width: 0; }
.prop-spec:last-child { border-right: 0; }
.prop-spec-ic { font-size: 0.92rem; line-height: 1; }
.prop-spec span:not(.prop-spec-ic) { font-size: 0.78rem; color: var(--enc-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-spec b { font-size: 0.86rem; font-weight: 800; color: var(--enc-text); }
.prop-spec-type { flex: 1.5; }
/* even card heights: main stretches, actions pinned to the base */
.prop-card-actions { margin-top: auto; }

/* ── Favourite (♥) button + buyer dashboard ── */
.prop-card { position: relative; }
.prop-fav { position: absolute; top: 10px; right: 10px; z-index: 4; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,0.92); color: #9aa6a0; font-size: 1.15rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 2px 8px rgba(8,30,22,0.18); transition: transform .15s var(--enc-ease), color .15s; }
.prop-fav:hover { transform: scale(1.1); color: #e0245e; }
.prop-fav.is-on { color: #e0245e; }
:root[data-theme="dark"] .prop-fav { background: rgba(18,27,23,0.92); }
.detail-toprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.detail-fav { position: static; width: auto; height: 34px; border-radius: 999px; padding: 0 14px; gap: 6px;
  display: inline-flex; align-items: center; font-size: 0.85rem; font-weight: 700; border: 1px solid var(--enc-border);
  background: var(--enc-surface); color: var(--enc-text-soft); box-shadow: none; }
.detail-fav.is-on { color: #e0245e; border-color: #f3b6c6; }

.ua-ob-card-buyer { border: 2px solid var(--enc-primary); box-shadow: var(--enc-shadow); }
.ua-b-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 18px 0 26px; }
.ua-b-tile { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: var(--enc-radius);
  border: 1px solid var(--enc-border); background: var(--enc-surface); text-decoration: none; color: var(--enc-text);
  cursor: pointer; text-align: left; font: inherit; transition: transform .15s var(--enc-ease), border-color .15s; }
.ua-b-tile:hover { transform: translateY(-3px); border-color: var(--enc-primary); }
.ua-b-tile span { font-size: 1.6rem; }
.ua-b-tile b { font-size: 0.95rem; }
.ua-b-tile small { font-size: 0.78rem; color: var(--enc-text-muted); }
.ua-b-sec { margin: 26px 0; }
.ua-b-sec h2 { font-size: 1.1rem; margin: 0 0 12px; }
.ua-b-req { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--enc-border); border-radius: 12px; background: var(--enc-surface); margin-bottom: 10px; }
.ua-pill { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 6px; background: var(--enc-surface-2); color: var(--enc-text-muted); }
.ua-pill-live { background: var(--enc-primary); color: #fff; }
.ua-pill-pending { background: #f0ad4e; color: #3a2600; }
.ua-pill-rejected { background: #d9534f; color: #fff; }
.ua-b-fav .prop-card-noimg { display: grid; place-items: center; height: 100%; font-size: 2rem; background: linear-gradient(135deg, var(--enc-surface-2), var(--enc-bg)); }

.ua-b-sell-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 26px; padding: 16px 18px; border: 1px dashed var(--enc-border-strong); border-radius: 14px; background: var(--enc-primary-soft); }
.ua-b-sell-cta > div { flex: 1; min-width: 220px; }
.ua-b-sell-cta b { font-family: var(--enc-font-display); }
.ua-b-sell-cta span:first-child { font-size: 1.2rem; }

.ua-ob-back { display: inline-block; margin-bottom: 10px; color: var(--enc-primary); font-weight: 600; text-decoration: none; font-size: .92rem; }
.ua-ob-back:hover { text-decoration: underline; }

/* ============ Skeleton loading (content placeholders) ============ */
/* Skeleton screens + per-image shimmer. Space is already reserved, so nothing
   here shifts layout. Driven by img-loader.js; degrades to plain content with
   JS off. */
:root { --enc-skel-base: #e2e5ea; --enc-skel-sheen: rgba(255, 255, 255, 0.7); }
:root[data-theme="dark"] { --enc-skel-base: #27302c; --enc-skel-sheen: rgba(255, 255, 255, 0.07); }
@keyframes enc-img-shimmer { 100% { transform: translateX(100%); } }
@keyframes enc-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Per-image shimmer while a real photo loads (cards, hero, thumbs). */
.is-loading { position: relative; overflow: hidden; background: var(--enc-skel-base); }
.is-loading::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--enc-skel-sheen), transparent);
  transform: translateX(-100%); animation: enc-img-shimmer 1.25s ease-in-out infinite;
}
img.img-fade { opacity: 0; transition: opacity 0.45s var(--enc-ease, ease); }
img.img-fade.is-ready { opacity: 1; }
.is-imgerror::after { animation: none; content: none; }

/* Full skeleton cards shown until the page finishes loading. */
html.enc-loading [data-skel] > :not(.enc-skel) { display: none !important; }
html:not(.enc-loading) .enc-skel { display: none !important; }
[data-skel] { min-height: 140px; }
.enc-skel { pointer-events: none; }
.enc-sk { position: relative; overflow: hidden; background: var(--enc-skel-base); border-radius: 8px; }
.enc-sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--enc-skel-sheen), transparent);
  transform: translateX(-100%); animation: enc-img-shimmer 1.25s ease-in-out infinite;
}
/* Card skeleton (property / goods) — mirrors the real card frame. */
.enc-skel-card { background: var(--enc-card, var(--z-card, #fff)); border: 1px solid var(--enc-border, var(--z-border, #e6e6e6)); border-radius: 16px; overflow: hidden; }
.enc-skel-card .enc-sk-img { height: 210px; border-radius: 0; }
.enc-skel-card .enc-sk-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.enc-sk-bar { height: 13px; }
.enc-sk-row { display: flex; gap: 8px; margin-top: 4px; }
.enc-sk-pill { height: 30px; flex: 1; border-radius: 8px; }
/* Row skeleton (services directory) — mirrors .bz-dir-card. */
.enc-skel-row { display: flex; align-items: center; gap: 14px; background: var(--z-card, #fff); border: 1px solid var(--z-border, #e6e6e6); border-radius: 12px; padding: 14px 16px; }
.enc-skel-row .enc-sk-av { width: 58px; height: 58px; border-radius: 50%; flex: 0 0 auto; }
.enc-skel-row .enc-sk-body { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.enc-skel-row .enc-sk-btn { width: 74px; height: 38px; border-radius: 9px; flex: 0 0 auto; }
/* Reveal: real items rise/fade in once loading ends. */
[data-skel].enc-reveal > :not(.enc-skel) { animation: enc-fade-in 0.4s var(--enc-ease, ease) both; }

@media (prefers-reduced-motion: reduce) {
  .is-loading::after, .enc-sk::after { animation: none; }
  img.img-fade { transition: none; }
  [data-skel].enc-reveal > :not(.enc-skel) { animation: none; }
}

/* ============ Mobile app promotion band ============ */
.app-promo { margin: 34px 0 8px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(135deg, #0b4a2f 0%, #0d6b4d 55%, #10855f 100%); color: #fff; }
.app-promo__inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 26px 30px; max-width: 1180px; margin: 0 auto; }
.app-promo__copy { flex: 1 1 340px; min-width: 0; }
.app-promo__eyebrow { margin: 0 0 6px; font-size: .7rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #9ee7c4; }
.app-promo__title { margin: 0 0 8px; font-size: 1.6rem; line-height: 1.15; letter-spacing: -.4px;
  text-wrap: balance; color: #fff; }
.app-promo__sub { margin: 0 0 14px; font-size: .95rem; line-height: 1.5; color: #d8f0e5; max-width: 54ch; }
.app-promo__points { display: flex; gap: 18px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.app-promo__points li { display: inline-flex; align-items: center; gap: 7px; font-weight: 700;
  font-size: .88rem; color: #eafaf3; }
.app-promo__actions { display: flex; gap: 12px; flex-wrap: wrap; flex: 0 0 auto; }
.app-store-btn { display: inline-flex; align-items: center; gap: 11px; text-decoration: none;
  background: #0a0a0a; color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 12px;
  padding: 10px 18px; transition: transform .15s var(--enc-ease, ease), box-shadow .15s; }
.app-store-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.app-store-btn:focus-visible { outline: 3px solid #9ee7c4; outline-offset: 2px; }
.app-store-btn svg { width: 26px; height: 26px; flex: 0 0 auto; }
.app-store-btn span { display: flex; flex-direction: column; line-height: 1.1; }
.app-store-btn small { font-size: .62rem; letter-spacing: .04em; opacity: .82; }
.app-store-btn strong { font-size: 1rem; font-weight: 700; }
@media (max-width: 720px) {
  .app-promo__inner { padding: 22px 20px; gap: 18px; }
  .app-promo__title { font-size: 1.3rem; }
  .app-promo__actions { width: 100%; }
  .app-store-btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .app-store-btn:hover { transform: none; } }

/* ============ Payment account block (revealed after sign-in) ============ */
.enc-pay-accounts { margin: .5rem 0 0; padding: .7rem .9rem; border: 1px dashed var(--enc-border);
  border-radius: 10px; background: var(--enc-surface-2); }
.enc-pay-accounts__msg { margin: 0; font-size: .85rem; }
.enc-pay-accounts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.enc-pay-accounts__list li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.enc-pay-accounts__list span { flex: 1 1 190px; font-size: .8rem; color: var(--enc-text-soft); }
.enc-pay-accounts__list strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95rem; letter-spacing: .02em; }
.enc-copy { border: 1px solid var(--enc-border); background: var(--enc-surface); border-radius: 7px;
  font-size: .72rem; font-weight: 600; padding: .2rem .55rem; cursor: pointer; color: var(--enc-text-soft); }
.enc-copy:hover { border-color: var(--enc-primary); color: var(--enc-primary); }