@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; height: 68px; }
.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); }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.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; }
.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; }
.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; }
.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; }
.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; }
.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; }
.row h3 { font-size: 1.15rem; margin: 2px 0 0; }
.row h3 a { color: var(--gold-2); text-decoration: none; }
.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) {
  .row { grid-template-columns: 1fr; }
  .row-img { min-height: 0; aspect-ratio: 16 / 10; }
  .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; }
.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; }
.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; }
.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; }
  .menu-btn { display: inline-flex; }
  .site-header.open .nav { display: flex; flex-direction: column; position: absolute; top: 68px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px 16px 16px; margin: 0; }
  .site-header.open .nav 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) {
  body { font-size: 15px; }
  .bar-end .btn span { display: none; }
  .bar-end .btn { padding: 0 12px; }
  .bar { gap: 12px; }
  .logo { height: 30px; }
  .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: 28px 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; } }

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