@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* Two themes, picked with the header's dark/light button (html[data-theme]).
   Theme 1: dark and gold, the palette of emigeo.com.
   Theme 2, the default: the homes.me brand kit (orange #FF4000, night #1A1A1A, white and warm
   white #FBF7F3, Poppins 500 headings and 400/500 text). */
:root {
  color-scheme: dark;
  --accent-rgb: 212, 176, 122;
  --header-bg: rgba(11, 13, 16, 0.82);
  --stat-bg: rgba(14, 17, 22, 0.92);
  --bg-hero: #0d1014;
  --prose: #d9d3c8;
  --hover: #fff;
  --tint: rgba(255, 255, 255, 0.03);
  --link-line: rgba(240, 214, 166, 0.35);
  --shadow: rgba(0, 0, 0, 0.35);
  --head-weight: 500;
  --bg: #0b0d10;
  --bg-2: #101318;
  --panel: #14181f;
  --panel-2: #1a1f28;
  --line: rgba(232, 220, 196, 0.12);
  --line-strong: rgba(232, 220, 196, 0.24);
  --text: #ece7dd;
  --muted: #a39d92;
  --faint: #6f6a62;
  --gold: #d4b07a;
  --gold-2: #f0d6a6;
  --ink-on-gold: #17130c;
  /* One font in both themes (George, Oct 31, 2026: "don't change the font in Theme 1 use the same font as Theme 2"). */
  --serif: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1240px;
  --r: 16px;
}
:root[data-theme="2"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-2: #fbf7f3;
  --panel: #ffffff;
  --panel-2: #fbf7f3;
  --line: rgba(26, 26, 26, 0.10);
  --line-strong: rgba(26, 26, 26, 0.20);
  --text: #1a1a1a;
  --muted: #55524f;
  --faint: #86827e;
  --gold: #ff4000;
  --gold-2: #e63a00;
  --ink-on-gold: #ffffff;
  --accent-rgb: 255, 64, 0;
  --header-bg: rgba(255, 255, 255, 0.88);
  --stat-bg: #ffffff;
  --bg-hero: #fbf7f3;
  --prose: #2b2b2b;
  --hover: #1a1a1a;
  --tint: rgba(26, 26, 26, 0.03);
  --link-line: rgba(255, 64, 0, 0.35);
  --shadow: rgba(26, 26, 26, 0.10);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--gold-2); text-decoration-color: var(--link-line); text-underline-offset: 3px; }
a:hover { color: var(--hover); }
/* One bold on the whole site (George, Oct 31, 2026: "use the same reduced boldness everyone on the site to be
   consistent with the blog", after "use the same boldness as the other blogs like
   https://he.art/blog/how-to-draw-from-a-reference-image"). Only Poppins 400 and 500 are loaded, and a browser never
   thickens them by itself. */
html { font-synthesis-weight: none; }
strong, b, th, dt, summary, h4, h5, h6 { font-weight: 500; }
h1, h2, h3 { font-family: var(--serif); font-weight: var(--head-weight); letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.45rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--ink-on-gold); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.eyebrow { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.9em; font-weight: 500; }
.lede { font-size: 1.12rem; color: var(--muted); max-width: 46rem; }
.hint { font-size: 0.86rem; color: var(--faint); margin-top: 0.8em; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent; font-weight: 500; font-size: 0.95rem; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 0.15s, background 0.15s, border-color 0.15s; }
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--ink-on-gold); }
.btn-gold:hover { color: var(--ink-on-gold); background: var(--gold-2); }
.btn-line { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn-line:hover { border-color: var(--gold); color: var(--hover); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 0.88rem; }
.btn-block { width: 100%; margin-top: 10px; }
.btn[disabled] { opacity: 0.5; cursor: wait; transform: none; }
.icon-btn { background: none; border: 1px solid var(--line); border-radius: 999px; width: 36px; height: 36px; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 24px; min-height: 68px; padding: 11px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-family: var(--serif); font-size: 1.22rem; white-space: nowrap; }
/* The brand-kit header logo: 40px tall (30px on phones), the light-background file on Theme 2
   and the dark-background file on Theme 1. */
.logo { height: 40px; width: auto; flex: none; }
.logo-dark { display: none; }
:root:not([data-theme="2"]) .logo-light { display: none; }
:root:not([data-theme="2"]) .logo-dark { display: block; }
.tagline { font-weight: 500; color: var(--text); }
/* The header's search box: a textarea that grows with what is typed or heard; the microphone is its only icon. */
/* It takes all the room the header row has (George, Nov 4, 2026). */
.site-search { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 6px; margin: 0 8px; padding: 3px 16px 3px 4px; border: 1px solid var(--line-strong); border-radius: 22px; background: var(--panel); }
.site-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
.site-search textarea { flex: 1; min-width: 0; height: 38px; max-height: 200px; resize: none; overflow-y: auto; border: 0; background: none; color: var(--text); font: inherit; font-size: 0.95rem; line-height: 1.45; padding: 8px 0; outline: none; }
.site-search > button { position: relative; display: grid; place-items: center; width: 38px; height: 38px; flex: none; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; }
.site-search > button:hover { color: var(--text); background: var(--tint); }
/* The search button shows on the right only while typing (app.js), never for what the microphone heard. */
.site-search > .site-go { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--ink-on-gold); }
.site-search > .site-go:hover { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--ink-on-gold); filter: brightness(1.05); }
/* Off, the microphone invites a tap (George, Nov 4, 2026: "emphasize the microphone with a subtle animation when it
   is off so users notice it and are curious to click it"): brand colored, with a soft ring that breathes out every few
   seconds and a small nudge of the icon. It stops while listening, thinking or speaking, on hover, and for anyone who
   asks for less motion. */
.search-mic:not(.live):not([data-mode="listening"]):not([data-mode="thinking"]):not([data-mode="speaking"]) { color: var(--gold); animation: mic-invite 3.2s ease-in-out infinite; }
.search-mic:not(.live):not([data-mode="listening"]):not([data-mode="thinking"]):not([data-mode="speaking"]) svg { animation: mic-nudge 3.2s ease-in-out infinite; }
.search-mic:hover { animation: none !important; }
.search-mic:hover svg { animation: none !important; }
@keyframes mic-invite {
  0%, 55%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 0%, transparent); background: transparent; }
  20% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 18%, transparent); background: color-mix(in srgb, var(--gold) 10%, transparent); }
  40% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--gold) 0%, transparent); }
}
@keyframes mic-nudge { 0%, 14%, 30%, 100% { transform: scale(1); } 20% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .search-mic, .search-mic svg { animation: none !important; } }
/* Listening: a red microphone with rings spreading from it, so it is plain the microphone is open. */
.search-mic .mic-rings, .search-mic .mic-rings::before { position: absolute; inset: 0; border-radius: 999px; pointer-events: none; }
.search-mic .mic-rings::before { content: ""; }
.search-mic[data-mode="listening"] { background: #d92d20; color: #fff; }
.search-mic[data-mode="listening"]:hover { background: #b42318; color: #fff; }
.search-mic[data-mode="listening"] .mic-rings, .search-mic[data-mode="listening"] .mic-rings::before { border: 2px solid #d92d20; animation: mic-ring 1.8s ease-out infinite; }
.search-mic[data-mode="listening"] .mic-rings::before { animation-delay: 0.9s; }
@keyframes mic-ring { from { transform: scale(1); opacity: 0.7; } to { transform: scale(1.9); opacity: 0; } }
/* Thinking or speaking with the microphone still on: it stays red-ringed; without it, gold. */
.search-mic[data-mode="thinking"], .search-mic[data-mode="speaking"] { background: var(--tint); color: var(--gold); }
.search-mic.live[data-mode="thinking"], .search-mic.live[data-mode="speaking"] { color: #d92d20; box-shadow: inset 0 0 0 2px #d92d20; }
@media (prefers-reduced-motion: reduce) { .search-mic .mic-rings, .search-mic .mic-rings::before, .voice-bars i { animation: none !important; } }
/* The menu links scroll away with the page, under Homes AI's answer; only the header row is sticky. */
.nav { display: flex; gap: 4px; padding-top: 6px; padding-bottom: 6px; overflow-x: auto; scrollbar-width: none; }
.nav a { color: var(--muted); text-decoration: none; padding: 8px 11px; border-radius: 8px; font-size: 0.93rem; white-space: nowrap; }
.nav a:hover, .nav a[aria-current] { color: var(--text); background: var(--tint); }
.bar-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* The currency menu: a pill the size of the round buttons beside it. */
.currency select { height: 40px; padding: 0 28px 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); font-weight: 500; font-size: 0.9rem; cursor: pointer;
  appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 18px, calc(100% - 10px) 18px; background-size: 5px 5px; background-repeat: no-repeat; }
.currency select:hover { border-color: var(--line-strong); }
.currency select option { color: #1a1a1a; }
.saved-link { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; color: var(--muted); border: 1px solid var(--line); }
.saved-link span { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--gold); color: var(--ink-on-gold); font-size: 11px; font-weight: 500; display: grid; place-items: center; padding: 0 5px; }
.menu-btn { display: none; width: 40px; height: 40px; border: 1px solid var(--line); background: none; border-radius: 999px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.menu-btn span { width: 16px; height: 1.5px; background: var(--text); }

/* Hero */
/* The home hero is a rounded panel inset from the page edges, the one on dev.homes.me (Emir,
   Nov 2, 2026: "same round hero, with same search option"). With HERO_IMAGE set it carries a photo,
   goes dark and turns its text white; with none it keeps the gradient and the page's own colors, so
   the hero is never half dressed. */
.hero-home { position: relative; overflow: hidden; width: min(1680px, 100% - 24px); margin: 12px auto 0; border-radius: clamp(20px, 2.4vw, 36px); }
.hero-home .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Photo mode: a scrim in place of the grid, so white text clears AA over any image. */
.hero-photo .hero-bg { background: #0d1014; }
/* Strongest across the middle, where the heading and lede sit: white still clears AA over a
   blown-out photo there, while the picture stays visible top and bottom. */
.hero-photo .hero-bg::after { background-image: none; background: linear-gradient(180deg, rgba(10, 12, 16, 0.46) 0%, rgba(10, 12, 16, 0.62) 42%, rgba(10, 12, 16, 0.58) 100%); mask-image: none; opacity: 1; }
.hero-photo .hero-in { text-align: center; }
.hero-photo h1, .hero-photo .lede { color: #fff; margin-inline: auto; }
/* The whole heading goes white over a photo. The brand orange reads at only about 0.9:1 on a
   bright part of an image even under the scrim, far under the 3:1 large text needs; the Ask AI
   and Search buttons below carry the color instead. */
.hero-home.hero-photo h1 span { color: #fff; }
.hero-photo .eyebrow { color: rgba(255, 255, 255, 0.88); }
.hero-photo .search, .hero-photo .stats { margin-inline: auto; }
/* Frosted glass over the photo, as on dev.homes.me (Emir, Nov 2, 2026: "same glass effect search
   bar"). Only the card and the tabs are translucent: every control inside stays opaque white, so
   placeholder and label text keeps its contrast whatever the photo does behind it. */
.hero-photo .search-tabs { background: rgba(255, 255, 255, 0.58); border-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
.hero-photo .search-tabs button { color: #1a1a1a; }
.hero-home.hero-photo .search-tabs button[aria-selected="true"] { background: #ff4000; color: #fff; }
.hero-photo .search-card { background: rgba(255, 255, 255, 0.42); border-color: rgba(255, 255, 255, 0.45); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); }
.hero-photo .search-card .ask-row, .hero-photo .search-card .loc { background: #fff; border-color: rgba(26, 26, 26, 0.12); }
.hero-photo .search-card select, .hero-photo .search-card .more { background-color: #fff; border-color: rgba(26, 26, 26, 0.12); color: #1a1a1a; }
.hero-photo .search-card input { color: #1a1a1a; }
.hero-photo .search-card input::placeholder { color: #6b6b6b; }
/* Near black on 42% white over a photo, rather than the muted grey that would wash out. */
.hero-photo .search-or { color: #1a1a1a; }
.hero-photo .search-or span { background: none; }
/* The Ask AI button is black here, not orange: on the card the orange Search button is the one
   action that should pull the eye, and two orange buttons side by side fight each other. */
.hero-home.hero-photo .ask-row .btn-gold { background: #1a1a1a; color: #fff; }
.hero-home.hero-photo .ask-row .btn-gold:hover { background: #000; color: #fff; }
.hero-photo .ask-row .mic { color: #ff4000; }
/* Glass tiles too, so the strip does not read as a solid slab on the photo. */
.hero-photo .stats { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.3); }
.hero-photo .stats div { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.hero-photo .stats dt { color: #4a4a4a; }
.hero-photo .stats dd { color: #1a1a1a; }
.hero-bg { position: absolute; inset: 0; background:
  radial-gradient(60rem 30rem at 85% -10%, rgba(var(--accent-rgb), 0.20), transparent 60%),
  radial-gradient(40rem 26rem at -10% 110%, rgba(90, 120, 170, 0.14), transparent 60%),
  linear-gradient(180deg, var(--bg-hero), var(--bg)); }
.hero-bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 70% 20%, #000 0%, transparent 70%); opacity: 0.35; }
.hero-in { position: relative; padding: clamp(56px, 9vw, 120px) 0 56px; }
.hero h1 { max-width: 15em; }
.hero h1 span { color: var(--gold-2); font-style: italic; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-block; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--tint); font-size: 0.86rem; text-decoration: none; cursor: pointer; text-align: left; }
.chip:hover { color: var(--text); border-color: var(--line-strong); }

/* The search card (the propertyinvest.ae hero search): scope tabs, one Ask AI line, then the classic filters. */
.search { max-width: 980px; margin-top: 32px; }
.search-tabs { position: relative; z-index: 2; display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto -24px; padding: 5px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 10px 30px var(--shadow); overflow-x: auto; scrollbar-width: none; }
.search-tabs::-webkit-scrollbar { display: none; }
.search-tabs button { border: 0; background: none; color: var(--text); font: 500 0.95rem var(--sans); padding: 0 18px; min-height: 44px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.search-tabs button[aria-selected="true"] { background: var(--gold); color: var(--ink-on-gold); font-weight: 500; }
.search-card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 28px; padding: 44px 20px 20px; box-shadow: 0 24px 70px var(--shadow); }
.search-card input, .search-card select { border-radius: 999px; min-height: 48px; }
.ask-row { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg-2); }
.ask-row:focus-within, .loc:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12); }
.ask-icon, .loc-icon { color: var(--gold); display: grid; flex: none; }
.ask-row input { flex: 1; min-width: 0; border: 0; background: none; padding: 8px 0; font-size: 1.02rem; }
.ask-row input::placeholder, .loc input::placeholder { color: var(--faint); }
.ask-row .mic { flex: none; width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.ask-row .mic:hover { color: var(--text); background: var(--tint); }
.ask-row .mic[aria-pressed="true"] { color: var(--gold); background: rgba(var(--accent-rgb), 0.12); }
.ask-row .btn { flex: none; }
.search-or { display: flex; align-items: center; gap: 14px; margin: 16px 0; color: var(--muted); font-size: 0.9rem; }
.search-or::before, .search-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.loc { position: relative; display: flex; align-items: center; gap: 10px; padding-left: 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg-2); }
.loc input { border: 0; background: none; padding: 8px 16px 8px 0; font-size: 1rem; }
.loc-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; margin: 0; padding: 6px; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 50px var(--shadow); max-height: 320px; overflow: auto; }
.loc-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.loc-list li[aria-selected="true"], .loc-list li:hover { background: var(--tint); }
.loc-list .kind { color: var(--muted); display: grid; flex: none; }
.loc-list strong { font-weight: 500; }
.loc-list .sub { color: var(--faint); font-size: 0.85rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-list small { margin-left: auto; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.search-go { min-width: 150px; }
.search-selects { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 10px; }
.search-selects select { padding-left: 16px; }
.search-selects .more { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg-2); color: var(--text); text-decoration: none; font-weight: 500; }
.search-selects .more:hover { border-color: var(--gold); color: var(--text); }
/* "Read from ..." above the explorer: what the sentence or the hero sent, each chip removable. */
.read { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); }
.read p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.read p svg { vertical-align: -3px; margin-right: 4px; color: var(--gold); }
.read p em { font-style: normal; color: var(--text); }
.read .chip { display: inline-flex; gap: 6px; align-items: center; color: var(--text); background: var(--panel); border-color: var(--line-strong); font: inherit; font-size: 0.86rem; }
.read .chip b { font-weight: 400; color: var(--faint); font-size: 1.1em; line-height: 1; }
.read .chip:hover b { color: var(--gold); }
.read-ai { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; font-size: 0.9rem; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 48px 0 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; max-width: 760px; }
.stats div { background: var(--stat-bg); padding: 16px 18px; }
.stats dt { font-size: 0.75rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.12em; }
.stats dd { margin: 4px 0 0; font-family: var(--serif); font-size: 1.5rem; color: var(--text); }
.stats-inline { margin: 28px 0; }

/* Sections */
.section { padding: clamp(44px, 6vw, 80px) 0 0; }
.section-head { margin-bottom: 24px; }
.section-head.row { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.band { background: var(--bg-2); border-block: 1px solid var(--line); margin-top: clamp(44px, 6vw, 80px); padding-bottom: clamp(44px, 6vw, 80px); }
.page-head { padding: 28px 0 8px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.84rem; color: var(--faint); margin-bottom: 20px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.panel h2 { font-size: 1.3rem; display: flex; align-items: center; gap: 8px; }
.panel + .panel { margin-top: 18px; }
.prose p { color: var(--prose); }
.prose h2 { margin-top: 1.4em; }
.narrow { max-width: 760px; }
.prose table { width: 100%; border-collapse: collapse; margin: 14px 0; }
.prose th, .prose td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.blog-post li { color: var(--prose); margin-bottom: 6px; }
.blog-date { color: var(--faint); font-size: 0.86rem; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 22px; margin-bottom: 20px; }
.blog-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; color: inherit; text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.blog-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.blog-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--panel-2); }
.blog-card-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 20px; }
.blog-card-body strong { font-size: 1.12rem; line-height: 1.3; }
.blog-card-text { color: var(--muted); font-size: 0.94rem; }
.blog-hero { margin: 18px 0 0; max-width: 760px; }
.blog-hero img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; display: block; border-radius: var(--r); background: var(--panel-2); }
.blog-hero figcaption { color: var(--faint); font-size: 0.82rem; margin-top: 8px; }
.cta { text-align: center; padding-bottom: 20px; }
.cta p { color: var(--muted); }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: inherit; }
.cta .cta-row { justify-content: center; }

/* Emirate tiles */
.emirates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.emirate { position: relative; display: grid; gap: 4px; min-height: 200px; align-content: end; padding: 24px; border-radius: var(--r); border: 1px solid var(--line); text-decoration: none; color: var(--text); overflow: hidden; background: var(--panel); transition: border-color 0.2s, transform 0.2s; }
.emirate::before { content: ""; position: absolute; inset: 0; opacity: 0.9; z-index: 0; }
.emirate > * { position: relative; }
.emirate-dubai::before { background: radial-gradient(circle at 80% 10%, rgba(var(--accent-rgb), 0.32), transparent 55%); }
.emirate-abu-dhabi::before { background: radial-gradient(circle at 80% 10%, rgba(110, 160, 200, 0.28), transparent 55%); }
.emirate-ras-al-khaimah::before { background: radial-gradient(circle at 80% 10%, rgba(120, 190, 160, 0.26), transparent 55%); }
.emirate:hover { border-color: var(--line-strong); transform: translateY(-2px); color: var(--text); }
.emirate-name { font-family: var(--serif); font-size: 1.8rem; }
.emirate-meta { color: var(--muted); font-size: 0.92rem; }
.emirate-from { color: var(--gold-2); font-weight: 500; }
.emirate-go { position: absolute; top: 20px; right: 22px; font-size: 1.4rem; color: var(--gold); }

/* Cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.2s; }
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.card-img { display: block; aspect-ratio: 16 / 10; background: var(--panel-2); overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.card:hover .card-img img { transform: scale(1.03); }
.noimg { display: grid; place-items: center; height: 100%; opacity: 0.4; }
.noimg .mark { width: 54px; height: 54px; }
.card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.card-place { font-size: 0.78rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 6px; }
.card h3 { font-size: 1.18rem; margin: 0 0 2px; }
.card h3 a { color: var(--text); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card-dev { color: var(--muted); font-size: 0.88rem; margin: 0 0 12px; }
.card-price { font-family: var(--serif); font-size: 1.3rem; color: var(--gold-2); margin: auto 0 10px; }
.card-price small { font-family: var(--sans); font-size: 0.75rem; color: var(--faint); }
.card-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.card-facts li { font-size: 0.78rem; color: var(--muted); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; }
.save { position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 999px; border: 0; background: rgba(11, 13, 16, 0.7); backdrop-filter: blur(6px); color: #fff; display: grid; place-items: center; cursor: pointer; }
.save[aria-pressed="true"] svg, [data-save-label][aria-pressed="true"] svg { fill: var(--gold); stroke: var(--gold); }

/* Steps, tools teaser */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.steps li { border-top: 1px solid var(--line-strong); padding-top: 18px; }
.steps span { font-family: var(--serif); color: var(--gold); font-size: 1.1rem; }
.steps h3 { margin-top: 8px; }
.steps p { color: var(--muted); font-size: 0.95rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.split p { color: var(--muted); }
.tool-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tool-list a { display: grid; gap: 2px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--text); background: var(--panel); }
.tool-list a:hover { border-color: var(--gold); }
.tool-list span { color: var(--muted); font-size: 0.9rem; }

/* Explorer */
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.filters label { display: grid; gap: 4px; font-size: 0.75rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; }
.filters .f-search { grid-column: span 2; align-self: end; }
.filters .f-check { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 0.9rem; color: var(--muted); align-self: end; min-height: 42px; }
input, select, textarea { background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; min-height: 42px; width: 100%; outline: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); }
input[type="checkbox"] { width: 18px; min-height: 18px; accent-color: var(--gold); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.results-bar { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 14px; gap: 12px; }
.results-bar p { margin: 0; color: var(--muted); }
.view-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px; }
.view-toggle button { background: none; border: 0; padding: 6px 16px; border-radius: 999px; cursor: pointer; color: var(--muted); }
.view-toggle button[aria-selected="true"] { background: var(--gold); color: var(--ink-on-gold); font-weight: 500; }
/* The list view (row() in pages.js), the default: a wide row per project and, beside the list, the map and popular
   searches. The filters above scroll away with the page (George, Nov 2, 2026: "Don't make this sticky"). */
.explorer-body { display: grid; gap: 24px; align-items: start; }
#explorer[data-mode="list"] .explorer-body { grid-template-columns: minmax(0, 1fr) 300px; }
#explorer:not([data-mode="list"]) .explorer-side { display: none; }
.rows { display: grid; gap: 16px; }
.list-row { position: relative; display: grid; grid-template-columns: minmax(220px, 40%) minmax(0, 1fr); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
.list-row:hover { border-color: var(--line-strong); box-shadow: 0 14px 36px var(--shadow); }
.row-img { position: relative; display: block; min-height: 220px; background: var(--panel-2); overflow: hidden; }
.row-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.list-row:hover .row-img img { transform: scale(1.03); }
.row-badges { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.row-badges span { background: rgba(255, 255, 255, 0.92); color: #1a1a1a; font-size: 0.74rem; font-weight: 500; padding: 4px 10px; border-radius: 999px; }
.list-row .save { left: calc(40% - 52px); right: auto; }
.row-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; min-width: 0; }
.row-price { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; margin: 0; }
.row-price small { font-family: var(--sans); font-size: 0.78rem; color: var(--faint); font-weight: 400; }
.row-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; margin: 0; color: var(--muted); font-size: 0.9rem; }
.row-meta li { display: inline-flex; align-items: center; gap: 6px; }
.list-row h3 { font-size: 1.15rem; margin: 2px 0 0; }
.list-row h3 a { color: var(--gold-2); text-decoration: none; }
.list-row h3 a::after { content: ""; position: absolute; inset: 0; }
.row-place { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 0.9rem; }
.row-place svg { flex: none; }
.row-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.row-actions .btn { min-height: 40px; padding: 0 14px; gap: 6px; font-size: 0.9rem; }
.row-actions .btn-gold { margin-left: auto; }
.explorer-side { display: grid; gap: 16px; }
.side-map { display: flex; align-items: center; justify-content: center; gap: 8px; height: 150px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; font-weight: 500; color: var(--text);
  background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)), repeating-linear-gradient(35deg, var(--panel-2) 0 18px, var(--line) 18px 19px), var(--panel); }
.side-map span { background: var(--panel); padding: 8px 14px; border-radius: 999px; box-shadow: 0 6px 18px var(--shadow); }
.side-map svg { color: var(--gold); }
.explorer-side .panel h2 { font-size: 1.05rem; }
.side-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.side-links a { display: block; padding: 6px 0; color: var(--muted); text-decoration: none; font-size: 0.92rem; }
.side-links a:hover { color: var(--gold-2); }
@media (max-width: 1100px) {
  #explorer[data-mode="list"] .explorer-body { grid-template-columns: 1fr; }
  .explorer-side { display: none; }
}
@media (max-width: 700px) {
  .list-row { grid-template-columns: 1fr; }
  .row-img { min-height: 0; aspect-ratio: 16 / 10; }
  .list-row .save { left: auto; right: 12px; }
  .row-actions .btn-gold { margin-left: 0; flex: 1 1 100%; }
  .row-actions .btn-line { flex: 1; justify-content: center; }
}
.map { height: min(70vh, 640px); border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; background: var(--panel-2); margin-bottom: 18px; }
.map-small { height: 320px; margin: 0; }
.more { text-align: center; margin-top: 24px; }
.leaflet-container { background: var(--panel-2); font-family: var(--sans); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); }
.leaflet-popup-content { margin: 12px 14px; font-size: 0.88rem; }
.leaflet-popup-content a { font-weight: 500; }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.pin { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); border: 2px solid var(--bg); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.4); }
.pop-img { width: 220px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; margin-bottom: 8px; }

/* Project page */
.project-title { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; }
.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: 0.8rem; color: var(--gold-2); border: 1px solid rgba(var(--accent-rgb), 0.3); padding: 4px 10px; border-radius: 999px; }
.price-box { display: grid; gap: 6px; padding: 22px; border-radius: var(--r); background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.14), var(--panel) 60%); border: 1px solid rgba(var(--accent-rgb), 0.28); }
.price-box small { color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; }
.price-box strong { font-family: var(--serif); font-size: 2.2rem; font-weight: 500; color: var(--gold-2); line-height: 1.1; }
.price-box > span { color: var(--muted); font-size: 0.9rem; margin-bottom: 8px; }
.price-box .btn { width: 100%; }
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(80%, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 24px; padding-bottom: 6px; }
.see-all { margin-top: 12px; }
.plan-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 16px; }
.plan-tiles a { display: block; color: var(--text); text-decoration: none; cursor: pointer; }
.plan-tiles a:hover img { border-color: var(--gold); }
/* The floor plan request dialog (George, Nov 5, 2026). A click on the backdrop closes it (app.js). */
.plan-ask { width: min(420px, calc(100vw - 32px)); padding: 28px 24px 22px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel); color: var(--text); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.plan-ask::backdrop { background: rgba(0, 0, 0, 0.55); }
.plan-ask h2 { margin: 0 0 10px; font-size: 1.25rem; font-weight: 500; }
.plan-ask p { margin: 0 0 18px; color: var(--muted); line-height: 1.5; }
.plan-ask p strong { color: var(--text); font-weight: 500; }
.plan-ask .hint { margin: 12px 0 0; font-size: 0.82rem; text-align: center; }
.plan-ask-x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.plan-ask-x:hover { background: var(--line); color: var(--text); }
/* "Get the full brochure" in WhatsApp green (George, Nov 5, 2026), as the hot pages' .btn--wa: dark green text, since
   white on #25D366 is 1.98:1 and this is 6.22:1. */
.brochure-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; background: #25d366; border: 1px solid #25d366; color: #0b3d20; font-weight: 500; text-decoration: none; box-shadow: 0 6px 18px rgba(37, 211, 102, 0.28); }
.brochure-btn:hover { background: #1da851; border-color: #1da851; color: #0b3d20; }
.brochure-btn svg { width: 18px; height: 18px; }
.brochure-ask .interest { position: static; border: 0; padding: 0; background: none; box-shadow: none; }
.brochure-ask .interest-form p:not(.hint):not(.interest-err) { margin: 0 0 6px; }
.brochure-ask .interest-form .brochure-btn { margin-top: 4px; }
.brochure-ask .interest-done .brochure-btn { margin-top: 16px; }
.plan-tiles img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.plan-tiles span { display: block; margin-top: 6px; font-size: 0.85rem; color: var(--muted); }
.hot-tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.hot-tile { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--text); text-decoration: none; }
.hot-tile img, .hot-tile .noimg { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--panel-2); }
.hot-tile-body { display: grid; gap: 4px; padding: 14px 16px; }

.gallery a { scroll-snap-align: start; display: block; min-height: 0; cursor: zoom-in; }
/* height: auto, or the img's height attribute (720) wins over the aspect ratio and a phone shows 720 px tall slivers. */
.gallery img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); background: var(--panel-2); }
@media (min-width: 900px) {
  .gallery { grid-auto-flow: row; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); overflow: visible; height: 480px; }
  .gallery img { aspect-ratio: auto; height: 100%; min-height: 0; }
  .gallery a:first-child { grid-row: span 2; }
  .gallery a:only-child { grid-column: span 2; }
}
.project-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; margin-top: 24px; align-items: start; }
.project-side { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }
/* The expression of interest in the sticky column (interestPanel in pages.js). */
.sr-only, .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.interest { border-color: rgba(var(--accent-rgb), 0.28); }
.interest-top { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 14px; }
.interest-top small { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; }
.interest-top strong { font-family: var(--serif); font-size: 2rem; font-weight: 500; line-height: 1.1; }
.interest-top .btn { min-height: 40px; padding: 0 14px; }
.interest h2 { font-size: 1.05rem; margin-bottom: 12px; }
.interest-form { display: grid; gap: 10px; }
.interest-form input, .interest-form select { width: 100%; min-width: 0; height: 48px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel); }
.interest-form select { padding-right: 10px; }
.interest-form [aria-invalid="true"] { border-color: #d92d20; }
.interest-phone { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; }
.interest-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.interest-form .btn-block { margin-top: 4px; }
.interest-form .hint, .interest-alt { font-size: 0.82rem; color: var(--muted); text-align: center; margin: 0; }
.interest-alt { margin-top: 12px; }
.interest-err { color: #d92d20; font-size: 0.88rem; margin: 0; }
.interest-done h2 { font-size: 1.3rem; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 0 0 18px; }
.facts div { background: var(--panel); padding: 14px 16px; }
.facts dt { font-size: 0.72rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.1em; }
.facts dd { margin: 4px 0 0; font-weight: 500; }
.plan-bar { display: flex; gap: 4px; margin: 8px 0 18px; }
.plan-bar span { min-width: 64px; padding: 12px; border-radius: 10px; background: var(--panel-2); border-top: 3px solid var(--gold); display: grid; }
.plan-bar span:nth-child(2) { border-color: #b98f58; }
.plan-bar span:nth-child(3) { border-color: #8f7148; }
.plan-bar span:nth-child(4) { border-color: #6d6a9a; }
.plan-bar b { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; }
.plan-bar small { color: var(--muted); font-size: 0.78rem; }
.plan-calc label { display: grid; gap: 6px; color: var(--muted); font-size: 0.9rem; max-width: 280px; }
.plan-table, .tool-out table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.plan-table th, .plan-table td, .tool-out th, .tool-out td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.plan-table td, .tool-out td { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
details { border-bottom: 1px solid var(--line); padding: 12px 0; }
details summary { cursor: pointer; font-weight: 500; }
details p { color: var(--muted); margin: 8px 0 0; }

/* Chat */
.chat { display: flex; flex-direction: column; gap: 12px; }
/* The project page's Ask card stands out on the way down the page (George, Nov 3, 2026: "emphasize the "Ask about
   Talay & Talay Beach" section [...] so it stands out while scrolling down"): the brand's orange edge and glow, a warm
   wash, a label, a bigger heading with the spark in an orange badge, and white chips. */
.ask-feature { position: relative; border: 2px solid var(--gold); background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.13), var(--panel) 55%); box-shadow: 0 18px 44px rgba(var(--accent-rgb), 0.18); padding: 26px; }
.ask-feature .ask-eyebrow { margin: 0 0 6px; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-2); }
.ask-feature h2 { font-size: 1.55rem; gap: 12px; margin-bottom: 16px; }
.ask-badge { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 999px; background: var(--gold); color: #fff; }
.ask-badge svg { width: 20px; height: 20px; }
.ask-feature .chip { background: var(--panel); border-color: rgba(var(--accent-rgb), 0.35); color: var(--text); }
.ask-feature .chip:hover { border-color: var(--gold); }
.ask-feature .chat-form textarea { min-height: 52px; background: var(--panel); border-color: rgba(var(--accent-rgb), 0.45); }
.ask-feature .chat-form .btn { min-height: 52px; padding: 0 26px; }
.chat-log { display: flex; flex-direction: column; gap: 12px; max-height: 52vh; overflow-y: auto; }
.chat-log:empty { display: none; }
.msg { padding: 12px 14px; border-radius: 14px; font-size: 0.95rem; line-height: 1.55; max-width: 100%; overflow-wrap: anywhere; }
.msg p:last-child, .msg ul:last-child { margin-bottom: 0; }
.msg ul { padding-left: 1.2em; margin: 0.4em 0 0.8em; }
.msg li { margin-bottom: 0.35em; }
.msg-user { align-self: flex-end; background: rgba(var(--accent-rgb), 0.16); border: 1px solid rgba(var(--accent-rgb), 0.25); max-width: 88%; }
.msg-ai { background: var(--panel-2); border: 1px solid var(--line); }
.msg-err { border-color: rgba(220, 120, 100, 0.4); }
.typing span { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--gold); animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.chat-form { display: flex; gap: 8px; align-items: end; }
.chat-form textarea { resize: none; min-height: 46px; max-height: 160px; border-radius: 14px; }
/* Land department records under an answer (Homes AI's panel and the advisor). */
.records { margin: 10px 0 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.records summary { cursor: pointer; font-weight: 500; font-size: 0.9rem; }
.records-note { margin: 6px 0 !important; color: var(--muted); font-size: 0.78rem; }
.records-head { margin: 10px 0 2px !important; font-weight: 500; font-size: 0.85rem; }
.records td small { display: block; color: var(--muted); font-size: 0.72rem; }
.records .chat-table table { min-width: 460px; font-size: 0.8rem; }
/* A Dubai community's rental yield page (marketPage in pages.js). */
.records-page h2 { margin-top: 28px; }
.records-page td small { display: block; color: var(--muted); font-size: 0.75rem; }
.records-page .chat-table table { min-width: 520px; font-size: 0.92rem; }
.market-link { margin-top: 10px; }
.market-link a { font-weight: 500; }
/* A comparison table in an advisor answer: scrolls sideways on a phone rather than squeezing. */
.chat-table { overflow-x: auto; margin: 8px 0; }
.chat-table table { border-collapse: collapse; font-size: 0.88rem; min-width: 420px; }
.chat-table th, .chat-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.chat-table thead th { font-weight: 500; }
.chat-table tbody th { font-weight: 500; color: var(--muted); white-space: nowrap; }
/* The microphone inside the advisor's question box: say the question and it is asked. */
.chat-input { position: relative; flex: 1; min-width: 0; display: flex; }
.chat-input textarea { flex: 1; width: 100%; padding-right: 48px; }
.chat-mic { position: absolute; right: 6px; bottom: 5px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; }
.chat-mic:hover { color: var(--text); background: var(--tint); }
.chat-mic[aria-pressed="true"] { background: #d92d20; color: #fff; box-shadow: 0 0 0 0 rgba(217, 45, 32, 0.5); animation: chat-mic 1.4s ease-out infinite; }
@keyframes chat-mic { to { box-shadow: 0 0 0 12px rgba(217, 45, 32, 0); } }
@media (prefers-reduced-motion: reduce) { .chat-mic[aria-pressed="true"] { animation: none; } }
/* AI advisor, the last menu link, in the brand color. */
.nav a.nav-ai { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-weight: 500; }
.nav a.nav-ai svg { width: 15px; height: 15px; }
.chat-note { font-size: 0.78rem; color: var(--faint); margin: 0; }
.mini-cards { display: grid; gap: 10px; }
.mini { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; text-decoration: none; color: var(--text); padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); }
.mini:hover { border-color: var(--line-strong); color: var(--text); }
.mini img, .mini .mini-ph { width: 76px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--panel-2); }
.mini strong { display: block; font-size: 0.93rem; }
.mini span { font-size: 0.8rem; color: var(--muted); }
.mini em { font-style: normal; color: var(--gold-2); font-size: 0.85rem; font-weight: 500; }
.msg .mini-cards { margin-top: 10px; }

.ask-fab { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; height: 52px; border-radius: 999px; border: 0; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--ink-on-gold); font-weight: 500; cursor: pointer; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); }
.drawer { position: fixed; right: 20px; bottom: 84px; z-index: 61; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 110px); display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); overflow: auto; }
.drawer[hidden] { display: none; }
/* Homes AI: a round microphone above Ask AI, with its card beside it while it listens, thinks or speaks. */
.voice-pick { display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.voice-pick button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.75rem; font-weight: 500; padding: 4px 9px; border-radius: 999px; cursor: pointer; }
.voice-pick button[aria-checked="true"] { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--ink-on-gold); }
/* Homes AI's panel, right under the search box: what it is doing, then the answer. */
.voice-panel { margin: 12px 0 4px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 16px; text-align: left; }
.voice-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.voice-top .voice-pick { box-shadow: none; flex: none; }
.voice-top [data-voice-langs] { margin-left: auto; }
/* Pause and resume Homes AI's voice (George, Nov 4, 2026). */
/* The answer's player, on its own line (George, Nov 4, 2026): play or pause on the left, a seek bar, the time. */
.voice-bar { display: flex; align-items: center; gap: 12px; margin: 10px 0 8px; }
.voice-play { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 999px; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--ink-on-gold); cursor: pointer; }
.voice-play .i-play { display: none; }
.voice-play.paused .i-play { display: inline; }
.voice-play.paused .i-pause { display: none; }
.voice-seek { flex: 1; min-width: 0; accent-color: var(--gold); cursor: pointer; }
.voice-time { flex: none; font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Words: the one being said is highlighted, those already said take the brand color; a click jumps there. */
.voice-ai .w { cursor: pointer; border-radius: 4px; transition: color 0.15s, background-color 0.15s; }
.voice-ai .w.spoken { color: var(--gold); }
.voice-ai .w.now { color: var(--text); background: color-mix(in srgb, var(--gold) 26%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 26%, transparent); }
.voice-close { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.voice-close:hover { color: var(--text); background: var(--tint); }
.voice-panel p { margin: 0 0 8px; }
.voice-state { display: flex; align-items: center; gap: 8px; margin: 0 !important; font-weight: 500; font-size: 0.9rem; }
.voice-panel[data-mode="listening"] .voice-state { color: #d92d20; }
.voice-ai { font-size: 0.95rem; line-height: 1.5; }
.voice-panel small { display: block; color: var(--muted); font-size: 0.72rem; }
/* Sound bars that move while the microphone is open. */
.voice-bars { display: none; align-items: center; gap: 2px; height: 14px; flex: none; }
/* The bars are the voice (George, Nov 4, 2026: "the animated bars should animate when the ai is speaking and pause
   when it's not speaking"): shown while an answer plays or waits, moving only while the voice is actually sounding
   (`.talking`, set by the player in app.js). Listening is shown by the microphone's red rings. */
.voice-panel[data-mode="speaking"] .voice-bars, .voice-panel.talking .voice-bars, .voice-panel[data-mode="listening"] .voice-bars { display: inline-flex; }
/* Driven by real sound (app.js barsFrame): no keyframes, each bar's height is the loudness of its band; red for the
   microphone, orange for the voice. */
.voice-panel.bars-live .voice-bars i { animation: none; transition: transform 70ms linear; }
.voice-bars.mic i { background: #d92d20; }
.voice-bars i { display: block; width: 3px; height: 100%; border-radius: 2px; background: var(--gold); transform-origin: center; animation: voice-bar 1s ease-in-out infinite; }
.voice-bars i:nth-child(2) { animation-delay: 0.15s; } .voice-bars i:nth-child(3) { animation-delay: 0.3s; } .voice-bars i:nth-child(4) { animation-delay: 0.45s; }
.voice-panel:not(.talking) .voice-bars i { animation-play-state: paused; transform: scaleY(0.45); }
@keyframes voice-bar { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.drawer-head { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.drawer-head small { display: block; color: var(--muted); font-size: 0.82rem; }

/* Advisor page */
.advisor { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.advisor-chat .chat-log { max-height: none; min-height: 120px; }
.advisor-side { position: sticky; top: 84px; }
.advisor-head h1 { display: flex; align-items: center; gap: 12px; }
.advisor-head h1 svg { width: 34px; height: 34px; color: var(--gold); }

/* Emirate page */
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.points .panel + .panel { margin-top: 0; }
.points p { color: var(--muted); margin: 0; }
.areas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.areas a { display: grid; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--text); background: var(--panel); }
.areas a:hover { border-color: var(--line-strong); }
.areas span { color: var(--muted); font-size: 0.85rem; }

/* Tools */
.tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tools .panel + .panel { margin-top: 0; }
.tool label { display: grid; gap: 6px; color: var(--muted); font-size: 0.9rem; margin-bottom: 12px; }
.tool > p { color: var(--muted); }
.tool-out { display: block; margin-top: 6px; }
.tool-out .big { font-family: var(--serif); font-size: 1.8rem; color: var(--gold-2); margin: 6px 0 0; }

/* Compare */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.compare { border-collapse: collapse; width: 100%; min-width: 640px; background: var(--panel); }
.compare th, .compare td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 0.93rem; }
.compare thead th { vertical-align: bottom; }
.compare thead img { width: 100%; max-width: 240px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; margin-bottom: 8px; }
.compare tbody th { color: var(--faint); font-weight: 500; white-space: nowrap; }
.compare .remove { background: none; border: 0; color: var(--faint); cursor: pointer; font-size: 0.8rem; padding: 0; text-decoration: underline; }
.empty { text-align: center; }

/* Footer */
.site-footer { margin-top: clamp(60px, 8vw, 110px); border-top: 1px solid var(--line); background: var(--bg-2); padding: 48px 0 28px; }
.foot { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.foot h2 { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; }
.foot > div > a:not(.brand) { display: block; color: var(--muted); text-decoration: none; padding: 4px 0; font-size: 0.93rem; }
.foot > div > a:hover { color: var(--text); }
.foot-brand p { color: var(--muted); font-size: 0.93rem; margin-top: 14px; max-width: 30rem; }
.fine { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 20px; font-size: 0.8rem; color: var(--faint); }
.fine a { color: var(--muted); }

@media (max-width: 1100px) {
  .nav { display: none; }
  .site-search { order: 3; flex-basis: 100%; max-width: none; margin: 8px 0 2px; }
  .bar { flex-wrap: wrap; height: auto; min-height: 60px; row-gap: 0; padding: 8px 0; }
  .menu-btn { display: inline-flex; }
  /* Behind the menu button, the links open under the sticky header wherever the page is scrolled (top set in app.js). */
  .nav.open { display: flex; flex-direction: column; position: fixed; top: 60px; left: 0; right: 0; z-index: 49; max-width: none; max-height: calc(100vh - 60px); overflow-y: auto; background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px 16px 16px; margin: 0; }
  .nav.open a { padding: 12px; font-size: 1rem; }
  .project-grid, .advisor { grid-template-columns: 1fr; }
  .project-side, .advisor-side { position: static; }
  .project-side { max-height: none; overflow: visible; }
}
@media (max-width: 820px) {
  .emirates, .points, .tools, .split { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .project-title { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters { position: static; }
  .filters .f-search { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .bar-end { margin-left: auto; }
  /* The floating Ask AI button does the header's AI advisor job on phones, so the logo and icons fit one row. */
  .bar-end .btn-gold { display: none; }
  body { font-size: 15px; }
  .bar-end .btn span { display: none; }
  .bar-end .btn { padding: 0 12px; }
  .bar { gap: 12px; column-gap: 8px; }
  .logo { height: 24px; }
  .bar-end { gap: 4px; }
  .logo { flex: none; }
  .bar-end .btn { width: 36px; min-height: 36px; height: 36px; padding: 0; }
  .currency select { width: 58px; height: 36px; padding: 0 15px 0 7px; font-size: 16px; letter-spacing: -0.03em; background-position: calc(100% - 10px) 15px, calc(100% - 6px) 15px; background-size: 4px 4px; }
  .theme-toggle, .saved-link { width: 36px; height: 36px; }
  .search-tabs { width: 100%; justify-content: flex-start; margin-bottom: -22px; }
  .search-card { border-radius: 22px; padding: 38px 12px 12px; }
  .ask-row { flex-wrap: wrap; border-radius: 18px; padding: 8px; }
  .ask-icon { display: none; }
  .ask-row input { flex-basis: 100%; padding: 6px 8px; }
  .ask-row .btn { flex: 1; }
  .search-row, .search-selects { grid-template-columns: 1fr; }
  .search-selects { grid-template-columns: 1fr 1fr; }
  .read-ai { margin-left: 0; }
  .steps { grid-template-columns: 1fr; }
  .filters { grid-template-columns: 1fr 1fr; }
  .emirate { min-height: 150px; }
  .ask-fab { right: 16px; bottom: 16px; }
  .drawer { right: 16px; bottom: 80px; }
  /* George, Nov 2, 2026: "homes.me on mobile looks bad fix it". The hero was 1,140 px tall on a 780 px phone and the
     floating Ask AI sat on the Search button: a smaller heading and less padding, the floating button as an icon only
     (the header and the hero already say Ask AI), and the tabs fade at the edge they scroll toward. */
  .hero-in { padding: 64px 0 36px; }
  .hero h1 { font-size: 1.85rem; }
  .hero .lede { font-size: 1rem; }
  .search-tabs button { padding: 0 14px; font-size: 0.9rem; }
  .search-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .search-tabs.at-end { -webkit-mask-image: none; mask-image: none; }
  .ask-fab { width: 52px; padding: 0; justify-content: center; }
  .ask-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Out of the way while the hero's own Ask AI is on screen. */
.ask-fab { transition: opacity 0.2s, transform 0.2s; }
.ask-fab.away { opacity: 0; transform: translateY(16px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* The cinematic hero (Emir, Nov 5, 2026, from a reference design he sent: "which design looks good [...] should be
   exact same"): the heading, a line of emirates, the lede and two buttons on the left over one photo; a white search
   bar across the panel's bottom edge, half over the photo and half below it. The scrim is darkest on the left, under
   the text, and along the bottom, under the bar, so white keeps AA and the photo stays open on the right. */
.hero-cine { overflow: visible; margin-bottom: 72px; }
.hero-cine .hero-bg { border-radius: inherit; overflow: hidden; }
.hero-cine .hero-bg::after { background: linear-gradient(90deg, rgba(10, 12, 16, 0.66) 0%, rgba(10, 12, 16, 0.42) 50%, rgba(10, 12, 16, 0.22) 100%), linear-gradient(180deg, rgba(10, 12, 16, 0) 60%, rgba(10, 12, 16, 0.5) 100%); }
.hero-cine .hero-in { text-align: left; padding: clamp(88px, 11vw, 150px) 0 clamp(128px, 14vw, 190px); }
.hero-cine h1 { font-size: clamp(2.3rem, 5.4vw, 4.5rem); line-height: 1.06; max-width: 11.5em; margin: 0 0 0.4em; }
.hero-cine .hero-sub { margin: 0 0 0.5em; color: #fff; font-size: clamp(1.1rem, 1.7vw, 1.5rem); font-weight: 500; }
.hero-cine .lede { margin: 0 0 1.7em; max-width: 34rem; color: rgba(255, 255, 255, 0.92); }
.hero-cine .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-cine .hero-cta .btn { min-height: 54px; padding: 0 28px; font-size: 1.02rem; }
.hero-cine .hero-cta .btn-line { border-color: rgba(255, 255, 255, 0.72); color: #fff; }
.hero-cine .hero-cta .btn-line:hover { border-color: #fff; background: rgba(255, 255, 255, 0.14); color: #fff; }
.hero-cine .hero-cta .btn-gold { background: var(--gold); color: #fff; }
.hero-cine .hero-cta .btn-gold:hover { background: var(--gold-2); color: #fff; }
.hero-bar { position: absolute; left: 50%; bottom: 0; z-index: 3; width: min(1180px, 100% - 48px); max-width: none; margin: 0; transform: translate(-50%, 50%); }
.hbar { display: grid; grid-template-columns: auto minmax(0, 1.6fr) minmax(0, 1fr) auto; align-items: center; padding: 14px; background: #fff; border-radius: 24px; box-shadow: 0 24px 60px rgba(10, 12, 16, 0.24); }
.hbar-seg { display: inline-flex; gap: 2px; margin-right: 16px; padding: 5px; border: 1px solid rgba(26, 26, 26, 0.12); border-radius: 14px; }
.hbar-seg button { border: 0; background: none; padding: 0 16px; min-height: 44px; border-radius: 10px; font: 500 1.05rem var(--sans); color: #6b6b6b; cursor: pointer; white-space: nowrap; }
.hbar-seg button[aria-selected="true"] { color: #ff4000; box-shadow: inset 0 -2px 0 #ff4000; }
.hbar-seg button:focus-visible, .hbar-field :is(input, select):focus-visible { outline: 2px solid #ff4000; outline-offset: 2px; }
.hbar-field { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 4px 20px; text-align: left; }
.hbar-type { border-left: 1px solid rgba(26, 26, 26, 0.14); }
.hbar-field label { font: 500 1.05rem/1.25 var(--sans); color: #1a1a1a; }
.hbar-in { display: flex; align-items: center; gap: 8px; }
.hbar-in svg { flex: none; color: #ff4000; }
.hbar-in input, .hbar-in select { flex: 1; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; font: 400 1rem/1.5 var(--sans); color: #4a4a4a; cursor: text; }
.hbar-in select { cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 22px; background-image: linear-gradient(45deg, transparent 50%, #ff4000 50%), linear-gradient(135deg, #ff4000 50%, transparent 50%); background-position: calc(100% - 13px) 10px, calc(100% - 8px) 10px; background-size: 5px 5px; background-repeat: no-repeat; }
.hbar-in input::placeholder { color: #4a4a4a; }
/* The bar's own .loc: none of the pill styling, only the suggestion list it positions. */
.hero-bar .loc { border: 0; border-radius: 0; background: none; padding-left: 24px; }
.hero-bar .loc-list { top: calc(100% + 14px); left: 12px; right: 12px; color: #1a1a1a; }
.hero-bar .search-go { min-height: 60px; padding: 0 28px; margin-left: 12px; border-radius: 16px; font-size: 1.05rem; background: var(--gold); color: #fff; }
.hero-bar .search-go:hover { background: var(--gold-2); color: #fff; }
.stats-under { margin: 0 auto; }
@media (max-width: 900px) {
  /* The bar stacks inside the panel instead of hanging off it. */
  .hero-cine { margin-bottom: 0; }
  .hero-cine .hero-in { padding: 64px 0 20px; }
  .hero-cine h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
  .hero-cine .hero-cta .btn { min-height: 48px; padding: 0 20px; }
  .hero-bar { position: relative; left: auto; bottom: auto; transform: none; width: auto; margin: 0 16px 16px; }
  .hbar { grid-template-columns: 1fr; gap: 6px; padding: 12px; border-radius: 20px; }
  .hbar-seg { margin: 0 0 4px; justify-content: center; }
  .hbar-seg button { flex: 1; }
  .hbar-field, .hero-bar .loc { padding: 8px 6px; }
  .hbar-type { border-left: 0; border-top: 1px solid rgba(26, 26, 26, 0.12); }
  .hero-bar .loc-list { left: 0; right: 0; }
  .hero-bar .search-go { margin: 6px 0 0; width: 100%; }
  .stats-under { margin-top: 20px; }
}

/* Theme switch */
.theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 999px; background: none; color: var(--muted); border: 1px solid var(--line); cursor: pointer; }
.theme-toggle:hover { color: var(--text); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="2"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="2"] .theme-toggle .icon-sun { display: none; }

/* Theme 2 details: flat orange, a heavier rounded type, softer shadows */
:root[data-theme="2"] .btn-gold, :root[data-theme="2"] .ask-fab { background: var(--gold); color: #fff; }
:root[data-theme="2"] .btn-gold:hover { background: var(--gold-2); color: #fff; }
.hero h1 span { font-style: normal; }
:is(.stats dd, .emirate-name, .card-price, .price-box strong, .plan-bar b, .tool-out .big, .steps span) { font-weight: 500; }
:root[data-theme="2"] .card:hover { box-shadow: 0 14px 36px var(--shadow); }
:root[data-theme="2"] .drawer { box-shadow: 0 24px 70px rgba(29, 29, 31, 0.18); }
:root[data-theme="2"] .ask-fab { box-shadow: 0 12px 30px rgba(255, 64, 0, 0.35); }
:root[data-theme="2"] .price-box { background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.08), var(--panel) 60%); }
:root[data-theme="2"] .hero-ask { border-width: 2px; }
:root[data-theme="2"] .plan-bar span:nth-child(2) { border-color: #f7834f; }
:root[data-theme="2"] .plan-bar span:nth-child(3) { border-color: #1a1a1a; }
:root[data-theme="2"] .plan-bar span:nth-child(4) { border-color: #86868d; }
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--panel, #fff); color: inherit; border-top: 1px solid var(--line, #ddd); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.15); }
.consent p { margin: 0; max-width: 62ch; }

/* The guides hub, the buying steps and the matchmaker (Nov 4, 2026). */
a.guide-tile { display: block; color: inherit; text-decoration: none; }
a.guide-tile:hover h3, a.guide-tile:focus-visible h3 { color: var(--gold); }
.process-steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 24px; }
.process-steps li { counter-increment: step; position: relative; padding: 0 0 18px 52px; border-left: 1px solid var(--line-strong); margin-left: 18px; }
.process-steps li:last-child { border-left-color: transparent; }
.process-steps li::before { content: counter(step); position: absolute; left: -18px; top: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #fff; font-weight: 500; }
.process-steps h2 { margin: 4px 0 6px; font-size: 1.15rem; }
.process-steps p { margin: 0; }
.match-form .btn { margin-top: 8px; }
.tool .f-check { display: flex; gap: 8px; align-items: center; flex-direction: row; }

/* ---------- Phones (George, Nov 5, 2026: "Mobile looks pretty bad, fix the site on mobile not just this section but all
   sections"; every page checked at 390 px). ---------- */
/* Text boxes show no scroll arrows until what is in them is taller than the box (app.js turns them on then), and a
   placeholder stays on one line, cut with an ellipsis, instead of wrapping out of sight. */
.site-search textarea, .chat-form textarea { overflow-y: hidden; }
.site-search textarea.scrolls, .chat-form textarea.scrolls { overflow-y: auto; }
.site-search textarea::placeholder, .chat-form textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Tables in posts scroll sideways inside themselves rather than widening the page; short cells stay on one line. */
.post-body table, .prose table, article table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.post-body td, .post-body th, .prose td, .prose th, article td, article th { white-space: nowrap; }
.chat-table td, .chat-table th { white-space: nowrap; }
@media (max-width: 820px) {
  /* 16 px in every field, or iPhones zoom the page when one is tapped. */
  input, select, textarea, .site-search textarea, .chat-form textarea { font-size: 16px; }
  /* The menu opens across the whole screen. */
  .nav.open { width: auto; max-width: none; }
}
@media (max-width: 640px) {
  /* Homes AI's panel: what it is doing on its own line beside the close button, the languages under it. */
  .voice-panel { padding: 12px; }
  .voice-top { flex-wrap: wrap; row-gap: 8px; }
  .voice-top .voice-state { order: 1; flex: 1 1 calc(100% - 44px); min-width: 0; font-size: 0.88rem; }
  .voice-top .voice-close { order: 2; }
  .voice-top [data-voice-langs] { order: 3; margin-left: 0; }
  /* The header's icons share one row with the logo down to 360 px. */
  .bar-end { gap: 2px; }
  /* The home search's filters keep their words whole: smaller side padding, and the select's arrow closer in. */
  .search-selects select { padding-left: 12px; padding-right: 26px; text-overflow: ellipsis; }
  .search-selects select, .search-selects .more { min-height: 46px; height: 46px; white-space: nowrap; }
  .search-selects .more { padding: 0 10px; }
  .search-selects { align-items: center; }
  .voice-bar { gap: 10px; }
  .voice-time { font-size: 0.72rem; }
  .voice-ai { font-size: 1rem; }
  /* Tables of figures: smaller type and tighter cells, scrolling sideways when they must. */
  .records-page .chat-table table, .records .chat-table table { min-width: 0; font-size: 0.8rem; }
  .chat-table th, .chat-table td { padding: 6px 8px; }
  /* The advisor's question box: room for the words beside the microphone and Ask. */
  .chat-form { gap: 6px; }
  .chat-form .btn { padding: 0 16px; }
}

/* ---------- Phones like the platform (George, Nov 5, 2026: "change the homepage on mobile on homes.me to be like
   propertyinvest.ae" and "on mobile when opening a project page on homes.me make it like propertyinvest.ae"): dev.homes.me's
   own phone layout, looked at side by side at 390 px. A tab bar along the bottom, projects two to a row, and a project
   page that opens on its image with the price on it, then its chips, name, plan and facts, the form, and a WhatsApp bar.
   Desktop is unchanged. ---------- */
.m-tabs, .m-wa, .g-price { display: none; }
@media (min-width: 641px) { .see-all-few { display: none; } }
@media (max-width: 640px) {
  /* The tab bar, floating over the page's foot like the platform's. */
  .m-tabs { display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 60;
    justify-content: space-around; padding: 6px 4px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line);
    box-shadow: 0 10px 30px var(--shadow); }
  .m-tabs a { flex: 1; display: grid; justify-items: center; gap: 3px; padding: 4px 0; color: var(--muted); text-decoration: none;
    font-size: 0.7rem; font-weight: 500; }
  .m-tabs a svg { width: 22px; height: 22px; }
  .m-tabs a[aria-current="page"] { color: var(--gold); }
  .m-tabs .m-tabs-wa { color: #1fa855; }
  body:has(.m-tabs) { padding-bottom: 84px; }
  body:has(.m-tabs) .ask-fab { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  body:has(.m-tabs) .drawer { bottom: calc(148px + env(safe-area-inset-bottom, 0px)); max-height: calc(100vh - 180px); }
  /* A project page's WhatsApp bar. */
  .m-wa { display: flex; align-items: center; justify-content: center; gap: 8px; position: fixed; left: 12px; right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 60; min-height: 52px; border-radius: 16px; background: #25d366;
    color: #fff; font-weight: 500; text-decoration: none; box-shadow: 0 10px 26px rgba(37, 211, 102, 0.35); }
  .m-wa svg { width: 20px; height: 20px; }
  body:has(.m-wa) { padding-bottom: 80px; }
  body:has(.m-wa) .ask-fab { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body:has(.m-wa) .drawer { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); max-height: calc(100vh - 170px); }

  /* Projects two to a row, each card the platform's: the image, the name, the place, the price, beds and handover. */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid .card { border-radius: 16px; }
  .grid .card-img { aspect-ratio: 4 / 3; }
  .grid .card-body { padding: 10px 10px 12px; }
  .grid .card-place { order: 2; font-size: 0.72rem; text-transform: none; letter-spacing: 0; margin: 2px 0 6px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .grid .card h3 { order: 1; font-size: 0.95rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; }
  .grid .card-dev { display: none; }
  .grid .card-price { order: 3; font-size: 1.05rem; margin: auto 0 6px; }
  .grid .card-price small { text-transform: uppercase; }
  .grid .card-facts { order: 4; gap: 4px; }
  .grid .card-facts li { font-size: 0.7rem; padding: 2px 7px; }
  .grid .card-facts li:nth-child(2) { display: none; }
  .grid .save { top: 8px; right: 8px; width: 32px; height: 32px; }
  .grid .save svg { width: 16px; height: 16px; }

  /* The home page: the emirates as a row to swipe, and how it works as four tiles, two to a row. */
  .emirates { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; gap: 10px; overflow-x: auto;
    scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .emirate { min-height: 120px; padding: 18px; scroll-snap-align: start; }
  .band .process-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .band .process-steps li { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
  .band .process-steps li::before { display: none; }
  .band .process-steps li > span { display: inline-block; font-size: 0.75rem; color: var(--faint); margin-bottom: 4px; }
  .band .process-steps h3 { font-size: 0.98rem; margin: 0 0 4px; }
  .band .process-steps p { font-size: 0.85rem; color: var(--muted); }

  /* A project page, in the platform's order: the path, the image, then the name and the rest. */
  main:has(> .project-head) { display: flex; flex-direction: column; }
  main > .project-head { display: contents; }
  main > .project-head > * { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
  main > .project-head > .crumbs { order: 0; margin-top: 14px; margin-bottom: 10px; font-size: 0.78rem; }
  main > .home-images { order: 1; position: relative; }
  main > .project-head > .project-title { order: 2; margin-top: 14px; gap: 14px; }
  main > * { order: 3; }
  .home-images .gallery { display: block; margin-top: 0; padding: 0; overflow: visible; }
  .home-images .gallery a { position: relative; }
  .home-images .gallery a:not(:first-child) { display: none; }
  .home-images .gallery img { aspect-ratio: 4 / 3; border-radius: 22px; }
  .g-price { display: grid; position: absolute; left: 12px; bottom: 12px; padding: 8px 14px; border-radius: 14px;
    background: rgba(26, 26, 26, 0.72); backdrop-filter: blur(6px); color: #fff; font-weight: 500; font-size: 1.25rem; line-height: 1.15;
    pointer-events: none; }
  .g-price small { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
  .home-images .see-all { position: absolute; right: calc((100% - min(var(--wrap), 100% - 32px)) / 2 + 12px); bottom: 12px;
    width: auto; margin: 0; }
  .home-images .see-all .btn { min-height: 38px; padding: 0 14px; font-size: 0.85rem; background: rgba(255, 255, 255, 0.92);
    color: #1a1a1a; border-color: transparent; }
  /* The name block: the chips first, then the name, then where it is, then the answer. */
  .project-title > div:first-child { display: flex; flex-direction: column; }
  .project-title .tags { order: -1; margin-bottom: 12px; }
  .project-title h1 { order: 0; font-size: 1.7rem; line-height: 1.15; margin: 0; }
  .project-title .eyebrow { order: 1; margin: 6px 0 0; text-transform: none; letter-spacing: 0; font-size: 0.92rem; }
  .project-title .lede { order: 2; font-size: 0.98rem; margin-top: 12px; }
  .price-box { padding: 16px; border-radius: 18px; }
  .price-box strong { font-size: 1.8rem; }
  /* The facts as tiles two to a row, then the form, then the plan and the rest. */
  .project-grid { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
  .project-main { display: contents; }
  .project-main > * { order: 4; margin: 0; }
  .project-main > .facts { order: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background: none;
    border: 0; border-radius: 0; }
  .project-main > .facts div { border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
  .project-main > .hint { order: 1; }
  .project-side { order: 2; }
  .project-main > #plan { order: 3; }
}

/* ---------- The redesign (George, Nov 5, 2026: "compare the major real estate website designs on mobile and desktop to
   ours then make ours better especially on the homepage and projects pages", then "Build all 14"). Property Finder,
   Bayut, Zillow and dev.homes.me compared; the proposal is the "Homes.me Redesign Proposal" artifact. ---------- */
/* 1. The hero bar's box takes a place or a sentence, with the microphone in it. */
.hbar-in .mic { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: #ff4000; cursor: pointer; display: grid; place-items: center; }
.hbar-in .mic[aria-pressed="true"] { background: #ff4000; color: #fff; }
.hbar-in .mic svg { color: inherit; }

/* 8. A card's photos to swipe: dots, a count, arrows on hover. */
.card-img { position: relative; }
.pics { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pics::-webkit-scrollbar { display: none; }
.pics img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.row-img .pics { position: absolute; inset: 0; }
.row-img .pics img { position: static; }
.pic-dots { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; pointer-events: none; }
.pic-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.pic-dots i.on { background: #fff; }
.pic-count { position: absolute; left: 10px; bottom: 7px; display: inline-flex; gap: 4px; align-items: center; padding: 2px 7px; border-radius: 6px; background: rgba(20, 20, 20, 0.65); color: #fff; font-size: 0.72rem; pointer-events: none; }
.pic-go { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #1a1a1a; display: grid; place-items: center; font-size: 1.35rem; line-height: 1; opacity: 0; transition: opacity 0.2s; cursor: pointer; }
.pic-go.prev { left: 8px; }
.pic-go.next { right: 8px; }
:is(.card, .list-row):hover .pic-go { opacity: 1; }
@media (hover: none) { .pic-go { display: none; } }

/* 9. The list row's three labeled boxes: from, payment plan, handover. */
.row-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
.row-facts div { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; min-width: 0; }
.row-facts small { display: block; font-size: 0.66rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; }
.row-facts b { font-weight: 500; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.row-facts div:first-child b { color: var(--gold-2); }

/* 10. Emirates with their counts above the filters. */
.em-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.em-chips a { display: inline-flex; gap: 6px; align-items: center; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); text-decoration: none; font-size: 0.9rem; }
.em-chips a span { color: var(--faint); }
.em-chips a[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #fff; }
.em-chips a[aria-pressed="true"] span { color: rgba(255, 255, 255, 0.85); }

/* 11. The side column in groups. */
.side-h { font-size: 0.72rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; margin: 14px 0 4px; font-weight: 500; }
.side-h:first-of-type { margin-top: 4px; }

/* 7. The filters: one compact bar that sticks under the header; on a phone a bar of Filters, Sort and Map, and a sheet. */
.f-more-btn { display: inline-flex; gap: 6px; align-items: center; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); font: inherit; font-size: 0.9rem; cursor: pointer; }
.sheet-head, .m-filterbar { display: none; }
@media (min-width: 641px) {
  .filters { position: sticky; top: calc(var(--head-h, 64px) + 8px); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; box-shadow: 0 8px 24px var(--shadow); }
  .filters > label { display: block; }
  .filters > label > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .filters > label > select, .filters > label > input[type="search"] { height: 40px; min-height: 40px; border-radius: 999px; padding: 0 14px; width: auto; max-width: 220px; }
  .filters .f-search { flex: 1 1 240px; }
  .filters > .f-search > input[type="search"] { width: 100%; max-width: none; }
  .filters .f-more { display: none; }
  .filters.more-open .f-more { display: block; }
  .filters.more-open .f-check { display: flex; }
  .filters .f-check { min-height: 40px; }
  .filters .f-sort { margin-left: auto; }
}
@media (max-width: 640px) {
  .m-filterbar { display: flex; position: sticky; top: calc(var(--head-h, 110px) + 6px); z-index: 30; gap: 8px; margin: 0 0 12px; }
  .m-filterbar button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); font: inherit; font-size: 0.9rem; box-shadow: 0 6px 16px var(--shadow); cursor: pointer; }
  .m-filterbar svg { width: 16px; height: 16px; }
  .m-filterbar b { min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--gold); color: #fff; font-size: 0.7rem; display: grid; place-items: center; font-weight: 500; }
  .filters { display: none; }
  .filters.sheet-open { display: grid; grid-template-columns: 1fr; position: fixed; inset: 0; z-index: 90; overflow-y: auto; border-radius: 0; border: 0; align-content: start; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .filters.sheet-open .sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; top: calc(-10px - env(safe-area-inset-top, 0px)); z-index: 1; background: var(--panel); padding: 10px 0; border-bottom: 1px solid var(--line); }
  .filters.sheet-open .sheet-head strong { font-size: 1.15rem; font-weight: 500; }
  .filters.sheet-open .sheet-head .btn { min-height: 42px; }
  .filters .f-search { grid-column: auto; }
  .filters .f-more-btn { display: none; }
  html.sheet-lock { overflow: hidden; }
  .em-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .em-chips::-webkit-scrollbar { display: none; }
  .em-chips a { flex: none; }
  .row-facts b { font-size: 0.92rem; }
}

/* 4. The home page's rails: tabs, then one row to swipe. */
.rail-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 14px; }
.rail-tabs::-webkit-scrollbar { display: none; }
.rail-tabs button { flex: none; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); font: inherit; font-size: 0.92rem; cursor: pointer; }
.rail-tabs button[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: #fff; }
.rail, .comm-rail { display: grid; grid-auto-flow: column; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.rail::-webkit-scrollbar, .comm-rail::-webkit-scrollbar { display: none; }
.rail { grid-auto-columns: calc((100% - 54px) / 4); }
.rail > *, .comm-rail > * { scroll-snap-align: start; }
.rail-all { display: grid; align-content: center; justify-items: start; gap: 6px; padding: 24px; border: 1px dashed var(--line-strong); border-radius: var(--r); color: var(--text); text-decoration: none; font-size: 1.4rem; }
.rail-all span { color: var(--faint); font-size: 0.85rem; }
.rail-all strong { font-size: 1.15rem; font-weight: 500; }
.rail-all:hover { border-color: var(--gold); }
.rail-nav { display: flex; gap: 6px; }
.rail-nav .btn { width: 42px; padding: 0; justify-content: center; font-size: 1.3rem; }

/* 2. Dubai's market from the land department. */
.market-band .lede { margin-top: 8px; color: var(--muted); max-width: 64ch; font-size: 1rem; }
.market-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
/* The market cards stand out from the page (George, Nov 5, 2026: "emphasize the "Last 12 months" boxes to make them more
   visible"): an accent bar on top, a light accent tint, a shadow, larger figures and the link as a pill. The pills sit
   on one line at the bottom, so they line up across the row (George: "All these buttons should be aligned horizontally"). */
.market-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 20px; border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: var(--r); background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.10), rgba(var(--accent-rgb), 0.02) 70%), var(--panel); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); color: var(--text); text-decoration: none; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.market-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--gold); }
.market-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.26); }
.market-card > strong { min-height: 2.6em; font-size: 1.2rem; font-weight: 500; }
.market-card > span { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: rgba(var(--accent-rgb), 0.16); color: var(--gold-2); font-size: 0.8rem; font-weight: 500; }
.market-card dl { display: grid; gap: 10px; margin: 8px 0; }
.market-card dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.market-card dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.market-card dt { color: var(--muted); font-size: 0.88rem; }
.market-card dd { margin: 0; font-size: 1.15rem; font-weight: 500; color: var(--text); }
.market-card em { align-self: flex-start; margin-top: auto; white-space: nowrap; padding: 7px 14px; border-radius: 999px; background: var(--gold); color: var(--ink-on-gold); font-style: normal; font-size: 0.85rem; font-weight: 500; }

/* 3. Communities with a photo, under the emirates. */
.em-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.em-links a { display: grid; gap: 2px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--text); text-decoration: none; }
.em-links a:hover { border-color: var(--gold); }
.em-links strong { font-weight: 500; font-size: 1.1rem; }
.em-links span { color: var(--muted); font-size: 0.85rem; }
.comm-rail { grid-auto-columns: calc((100% - 54px) / 4); }
.comm { position: relative; display: block; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; color: #fff; text-decoration: none; background: var(--panel-2); }
.comm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.comm:hover img { transform: scale(1.04); }
/* White on the photo on hover too (George, Nov 5, 2026: "Keep the white font on hover, black isn't readable"); the
   site-wide a:hover color would turn it dark. */
.comm:hover, .comm:focus-visible { color: #fff; }
.comm::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.72)); }
.comm-body { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; display: grid; gap: 2px; }
.comm-body strong { font-weight: 500; font-size: 1.1rem; }
.comm-body span { font-size: 0.82rem; opacity: 0.9; }
.comm-body em { font-style: normal; font-size: 0.85rem; font-weight: 500; }

/* 5. Developers by name. */
.dev-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dev-chips a { display: inline-flex; gap: 8px; align-items: center; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); text-decoration: none; font-weight: 500; }
.dev-chips a:hover { border-color: var(--gold); }
.dev-chips span { color: var(--faint); font-weight: 400; font-size: 0.85rem; }

/* 6. The callback form beside the contact line. */
.cta.cta-call { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 28px; align-items: start; text-align: left; }
.cta.cta-call .cta-row { justify-content: flex-start; }
.cta-call .interest h2 { font-size: 1.2rem; }

/* 12. What homes around a project sell and rent for. */
.market-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 12px 0; }
.market-tiles div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.market-tiles b { display: block; font-weight: 500; font-size: 1.15rem; color: var(--gold-2); }
.market-tiles small { color: var(--muted); font-size: 0.8rem; }
.market-panel p { margin: 6px 0 0; }

/* 13. The project's summary bar under the header once its price box has scrolled away. */
.p-bar { position: fixed; left: 0; right: 0; top: var(--head-h, 64px); z-index: 45; background: var(--header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); box-shadow: 0 8px 20px var(--shadow); }
.p-bar-in { display: flex; align-items: center; gap: 14px; min-height: 58px; }
.p-bar strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.p-bar-price { color: var(--gold-2); font-weight: 500; white-space: nowrap; }
.p-bar-terms { color: var(--muted); font-size: 0.88rem; white-space: nowrap; }
.p-bar .btn { min-height: 38px; padding: 0 14px; }
body:has(.p-bar:not([hidden])) .project-side { top: calc(var(--head-h, 64px) + 74px); }

/* 14. The gallery: one large image and four beside it on a desktop, "See all" over it. */
.home-images { position: relative; }
.home-images .see-all { position: absolute; right: calc((100% - min(var(--wrap), 100% - 32px)) / 2 + 12px); bottom: 12px; width: auto; margin: 0; z-index: 2; }
.home-images .see-all .btn { min-height: 38px; padding: 0 14px; font-size: 0.88rem; background: rgba(255, 255, 255, 0.94); color: #1a1a1a; border-color: transparent; }
@media (min-width: 900px) {
  .gallery:has(> a:nth-child(4)) { grid-template-columns: 2fr 1fr 1fr; }
  .gallery:has(> a:nth-child(4)) > a:first-child { grid-row: span 2; }
  .gallery:has(> a:nth-child(4)):not(:has(> a:nth-child(5))) > a:nth-child(4) { grid-column: span 2; }
}

/* The redesign at narrower widths. */
@media (max-width: 1100px) {
  .rail, .comm-rail { grid-auto-columns: calc((100% - 36px) / 3); }
  .p-bar-terms { display: none; }
}
@media (max-width: 900px) {
  .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .rail { grid-auto-columns: 46%; }
  .cta.cta-call { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rail { grid-auto-columns: 72%; gap: 10px; }
  .rail-nav { display: none; }
  .em-links { grid-template-columns: 1fr; gap: 8px; }
  .em-links a { padding: 12px 14px; }
  .comm-rail { grid-auto-columns: 62%; gap: 10px; }
  .p-bar { display: none !important; }
}
@media (max-width: 520px) {
  .market-grid { grid-template-columns: 1fr; }
}

/* ---------- Homes AI's answer as an overlay again (George, Nov 5, 2026: "make the AI Voice answer an overlay as it used to be and add a "Close" button to hide the overlay then show an "AI" button in the search box to reopen the overlay"), and the search box centred (George, Nov 5, 2026: "The content in the search box at the top header isn't centered vertically and should be"). */
.voice-wrap { position: static; }
.voice-panel { position: fixed; right: 20px; bottom: 20px; z-index: 70; width: min(440px, calc(100vw - 40px)); max-height: min(72vh, 640px);
  overflow-y: auto; margin: 0 !important; max-width: none !important; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28); }
/* The standard X (George, Nov 5, 2026), and the AI button pulsing as the panel lands in it. */
.voice-panel .voice-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 0; background: none; color: var(--muted); cursor: pointer; }
.voice-panel .voice-close:hover { background: var(--line); color: var(--text); }
.voice-panel { transform-origin: center; }
/* The top line is the languages and the X, the X in the top right corner (George, Nov 5, 2026: "This should be in the
   top of the box so the "X" is in the top-right corner"); what Homes AI is doing goes under them, the full width. */
.voice-panel .voice-top { flex-wrap: wrap; align-items: center; row-gap: 10px; }
.voice-panel .voice-top [data-voice-langs] { order: 1; margin-left: 0; }
.voice-panel .voice-top .voice-close { order: 2; margin: -4px -6px 0 auto; }
.voice-panel .voice-top .voice-state { order: 3; flex: 1 1 100%; min-width: 0; }
.site-search > .search-ai.ai-arrive { animation: ai-arrive 0.9s ease-out 2; }
@keyframes ai-arrive { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); transform: scale(1); } 30% { transform: scale(1.15); } 100% { box-shadow: 0 0 0 12px rgba(var(--accent-rgb), 0); transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .site-search > .search-ai.ai-arrive { animation: none; } }
/* The floating Ask AI moves up while the overlay is open, so they do not sit on each other. */
body:has(.voice-panel:not([hidden])) .ask-fab { display: none; }
.site-search > .search-ai { width: auto; padding: 0 12px; height: 32px; margin-right: -8px; border-radius: 999px; background: var(--gold); color: #fff; font-weight: 500; font-size: 0.85rem; letter-spacing: 0.04em; }
.site-search > .search-ai:hover { background: var(--gold-2); color: #fff; }
/* Centred: every item in the box on one middle line, the box text exactly the buttons' height (the site-wide 42 px
   minimum for fields made it 4 px taller than the microphone, so the text sat 2 px low). */
.site-search { align-items: center; }
.site-search textarea { min-height: 38px; height: 38px; }
@media (max-width: 640px) {
  .voice-panel { left: 10px; right: 10px; width: auto; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); max-height: 62vh; }
  body:has(.m-wa) .voice-panel { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- The home page as a search page (George, Nov 5, 2026: "Make the homepage very minimalistic, like google.com, bring the search from the header into the center of the page like google.com has, let users scroll down to see the rest unlike google.com"). The first screen is the logo, the search box and
   its buttons, in the middle; everything else is below for whoever scrolls. The header keeps its icons and menu,
   without its logo or search box, and the menu links stay behind the menu button. ---------- */
/* Two thirds of the screen, so the page below shows without scrolling (George, Nov 5, 2026: "don't use the fill browser
   height the hero background image use 2/3 of the page then the remaining 1/3 show the rest of the page so users don't
   need to scroll to see that content"); never so short its logo, search and buttons do not fit. */
.g-home { min-height: max(440px, calc((100svh - 72px) * 2 / 3)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 16px 64px; text-align: center; position: relative; }
.g-logo { margin: 0; line-height: 0; }
.g-logo .logo { height: clamp(56px, 9vw, 92px); width: auto; }
.g-home .lede { margin: 0; color: var(--muted); font-size: 1rem; max-width: 34rem; }
.g-slot { width: min(680px, 100%); min-height: 51px; margin: 8px 0 0; display: flex; justify-content: center; }
.g-slot .site-search { order: 0; flex: none; flex-basis: auto; max-width: none; width: min(680px, 100%); margin: 0; padding: 6px 16px 6px 8px; border-radius: 30px; box-shadow: 0 2px 10px var(--shadow); }
.g-slot .site-search:hover { box-shadow: 0 4px 16px var(--shadow); }
.g-slot .site-search textarea { font-size: 1.05rem; }
.g-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.g-buttons .btn { min-height: 40px; padding: 0 18px; font-size: 0.92rem; }
.g-more { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 0.88rem; text-decoration: none; white-space: nowrap; }
.g-more:hover { color: var(--gold-2); }
body:has(.g-home):not(.g-scrolled) .site-header .brand { visibility: hidden; position: absolute; }
body:has(.g-home):not(.g-scrolled) .site-header { border-bottom-color: transparent; background: var(--bg); }
body:has(.g-home) .nav:not(.open) { display: none; }
body:has(.g-home) .menu-btn { display: inline-flex; }
@media (max-width: 640px) {
  .g-home { min-height: max(420px, calc((100svh - 72px - 84px) * 2 / 3)); gap: 14px; padding-bottom: 56px; }
  .g-home .lede { font-size: 0.92rem; }
  .g-buttons .btn:nth-child(3) { display: none; }
  .g-more { bottom: 12px; }
}
/* Project pages open on their images (George, Nov 5, 2026: "Project pages should start with the images then the title and description below"): first on every screen, the path and name under them. */
.project-head { padding-top: 20px; }
.home-images + .project-head .crumbs { margin-bottom: 12px; }
@media (max-width: 640px) {
  main > .home-images { order: 0; margin-top: 12px; }
  main > .project-head > .crumbs { order: 1; margin-top: 12px; }
}

/* Scrolled on the home page: the header as on every other page, the logo fading in at the top left
   (George, Nov 5, 2026: "when scrolling down on george.homes.me move the search box into the header and the logo into the top-left corner so it looks like the other pages after scrolled down on the homepage"). */
body:has(.g-home) .site-header .brand { transition: opacity 0.2s; }
body:has(.g-home):not(.g-scrolled) .site-header .brand { opacity: 0; }
body.g-scrolled .site-header .brand { visibility: visible; opacity: 1; }

/* ---------- The developers directory (George, Nov 5, 2026: "Improve https://homes.me/developers page to add photos and logos similar to https://propertyinvest.ae/developers but make ours better"). ---------- */
.dev-strip { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dev-strip a { display: grid; place-items: center; width: 116px; height: 56px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.dev-strip img { max-width: 100%; max-height: 38px; width: auto; height: auto; object-fit: contain; }
.dev-strip a:hover { border-color: var(--gold); }
.dev-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.dev-search { flex: 1 1 280px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel); }
.dev-search svg { flex: none; color: var(--muted); }
.dev-search input { border: 0; background: none; min-height: 44px; padding: 0; outline: none; }
.dev-search:focus-within { border-color: var(--gold); }
.dev-chips-em { display: flex; flex-wrap: wrap; gap: 6px; }
.dev-chips-em button { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); font: inherit; font-size: 0.88rem; cursor: pointer; }
.dev-chips-em button span { color: var(--faint); }
.dev-chips-em button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #fff; }
.dev-chips-em button[aria-pressed="true"] span { color: rgba(255, 255, 255, 0.85); }
.dev-sort select { min-height: 42px; border-radius: 999px; padding: 0 14px; width: auto; }
.dev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.dev-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--panel); color: var(--text); text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.dev-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.dev-photo { position: relative; aspect-ratio: 16 / 9; background: var(--panel-2); }
.dev-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dev-logo { position: absolute; left: 12px; bottom: -22px; display: grid; place-items: center; width: 112px; height: 56px; padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }
.dev-logo img { max-width: 100%; max-height: 40px; width: auto; height: auto; object-fit: contain; }
.dev-initials { font-weight: 500; font-size: 1.2rem; letter-spacing: 0.04em; color: #1a1a1a; }
.dev-new { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 999px; background: var(--gold); color: #fff; font-size: 0.75rem; font-weight: 500; }
.dev-body { display: grid; gap: 6px; padding: 32px 14px 14px; }
.dev-body strong { font-weight: 500; font-size: 1.05rem; }
.dev-facts { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); font-size: 0.86rem; }
.dev-facts span + span::before { content: "\00b7"; margin-right: 10px; color: var(--faint); }
.dev-ems { display: flex; flex-wrap: wrap; gap: 4px; }
.dev-ems i { font-style: normal; font-size: 0.74rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.dev-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dev-logo.dev-logo-lg { position: static; width: 150px; height: 72px; box-shadow: none; }
.dev-logo.dev-logo-lg img { max-height: 52px; }
@media (max-width: 640px) {
  .dev-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .dev-strip li { flex: none; }
  .dev-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dev-logo { width: 84px; height: 44px; left: 8px; bottom: -18px; }
  .dev-logo img { max-height: 30px; }
  .dev-body { padding: 26px 10px 10px; }
  .dev-body strong { font-size: 0.95rem; }
  .dev-facts { font-size: 0.78rem; gap: 2px 8px; }
  .dev-facts span + span::before { margin-right: 8px; }
  .dev-ems { display: none; }
  .dev-chips-em { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .dev-chips-em button { flex: none; }
}

/* The home search screen on homes.me's photo, the beach family (George, Nov 5, 2026: "at george.homes.me add the background image from homes.me"): a rounded panel inset from the page
   edges as homes.me's hero is, a dark wash so white text reads on any part of it, the light logo, glass buttons, and the
   search box solid white. */
.g-home.g-photo { width: min(1680px, 100% - 24px); margin: 8px auto 0; border-radius: clamp(20px, 2.4vw, 36px); overflow: hidden; isolation: isolate; color: #fff; }
.g-bg { position: absolute; inset: 0; z-index: -1; background: #1a1a1a; }
.g-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 12, 16, 0.42), rgba(10, 12, 16, 0.30) 45%, rgba(10, 12, 16, 0.55)); }
.g-photo .logo-light { display: none; }
.g-photo .logo-dark { display: block; }
.g-photo .lede { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
.g-photo .g-slot .site-search { background: #fff; border-color: transparent; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); }
.g-photo .g-slot .site-search textarea { color: #1a1a1a; }
.g-photo .g-slot .site-search textarea::placeholder { color: #5f5f5f; }
.g-photo .g-buttons .btn { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.45); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.g-photo .g-buttons .btn:hover { background: rgba(255, 255, 255, 0.26); }
.g-photo .g-more { color: rgba(255, 255, 255, 0.88); }
.g-photo .g-more:hover { color: #fff; }
@media (max-width: 640px) { .g-home.g-photo { width: calc(100% - 16px); } }

/* The home page's menu links in the header row, before the currency picker, while there is room (George, Nov 5, 2026:
   "if there is room show the menu currently hidden in the two-lines button on the same line as the currency picker");
   app.js moves them there and back (fitNav). Left-aligned, and behind the menu button whenever they would take two
   lines (George: "keep the menu left-aligned and change it to the menu when it would wrap to two lines so it never wraps"). */
.bar > .nav.nav-inbar { display: flex !important; flex: 0 1 auto; min-width: 0; width: auto; max-width: none; margin: 0 0 0 -10px; padding: 0; gap: 2px; overflow-x: auto; }
.bar > .nav.nav-inbar a { padding: 8px 10px; }
body.nav-in-bar .menu-btn { display: none !important; }