@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; }
/* The photo picker (heroPicker in pages.js): round thumbnails in the panel's top corner. */
.hero-pick { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(10, 12, 16, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero-pick button { width: 34px; height: 34px; padding: 0; border: 2px solid transparent; border-radius: 999px; overflow: hidden; cursor: pointer; background: #333; }
.hero-pick button[aria-checked="true"] { border-color: #fff; }
.hero-pick button:focus-visible { outline: 2px solid #ff4000; outline-offset: 2px; }
.hero-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 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: zoom-in; }
.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: 56px; height: 36px; padding: 0 14px 0 8px; font-size: 0.75rem; 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-pick { right: auto; left: 50%; transform: translateX(-50%); }
  .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; } }

/* 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; }