/* ============================================================================
   Estate One — "Signal" design system
   Palette: red · black · gray · white. One primitive ramp per hue, a semantic
   layer on top, and legacy aliases last so older published themes and the
   generated SEO pages keep resolving. Every colour a component uses must come
   from the semantic layer — that is what makes light/dark/system a token swap
   instead of a per-component rewrite.
   ============================================================================ */
:root {
  /* --- 1. Primitives ------------------------------------------------------ */
  --red-50: #fff1f1;
  --red-100: #ffdedf;
  --red-200: #ffbfc1;
  --red-300: #f8908f;
  --red-400: #ef5a5c;
  --red-500: #d91f26;
  --red-600: #b8161c;
  --red-700: #8f1216;
  --red-800: #650d10;
  --red-900: #3f080a;
  --gray-0: #ffffff;
  --gray-25: #fbfbfc;
  --gray-50: #f5f5f7;
  --gray-100: #ededf0;
  --gray-200: #dfdfe3;
  --gray-300: #c6c6cc;
  --gray-400: #9b9ba3;
  --gray-500: #6f6f78;
  --gray-600: #53535b;
  --gray-700: #3b3b42;
  --gray-800: #27272c;
  --gray-900: #18181b;
  --gray-950: #0d0d0f;

  /* --- 2. Semantic: surfaces and ink (light) ------------------------------ */
  --bg: var(--gray-50);
  --bg-sunken: var(--gray-100);
  --paper: var(--gray-0);
  --surface-2: var(--gray-25);
  --surface-inset: var(--gray-100);
  --ink: var(--gray-900);
  --ink-soft: var(--gray-700);
  --muted: var(--gray-500);
  --line: var(--gray-200);
  --line-strong: var(--gray-300);
  --overlay: rgba(13, 13, 15, .66);
  --glass: rgba(255, 255, 255, .9);
  --glass-line: rgba(255, 255, 255, .62);

  /* --- 3. Semantic: brand red -------------------------------------------- */
  --brand: var(--red-500);          /* filled surfaces — always pairs with --on-brand */
  --brand-hover: var(--red-600);
  --brand-fill-hover: var(--red-600);  /* hover on a red FILL — must keep --on-brand legible */
  --brand-press: var(--red-700);
  --brand-ink: var(--red-600);      /* red as text/icon on a light surface (6.6:1) */
  --brand-soft: var(--red-50);      /* tinted fill */
  --brand-soft-ink: var(--red-700);
  --brand-ring: rgba(217, 31, 38, .3);
  --on-brand: #ffffff;              /* 5.0:1 on --brand in both themes */

  /* --- 4. Semantic: black panels ----------------------------------------- */
  --contrast: var(--gray-900);
  --contrast-2: var(--gray-950);
  --on-contrast: #ffffff;
  --on-contrast-soft: rgba(255, 255, 255, .74);
  --on-contrast-faint: rgba(255, 255, 255, .54);
  --on-contrast-brand: #ff7a7d;     /* red that survives a black background */
  --contrast-line: rgba(255, 255, 255, .14);
  --contrast-fill: rgba(255, 255, 255, .08);

  /* --- 5. Semantic: over photography -------------------------------------- */
  --on-media: #ffffff;
  --on-media-soft: rgba(255, 255, 255, .78);
  --on-media-faint: rgba(255, 255, 255, .6);
  --on-media-line: rgba(255, 255, 255, .22);
  --on-media-line-strong: rgba(255, 255, 255, .55);
  --scrim: linear-gradient(180deg, rgba(13, 13, 15, .05) 34%, rgba(13, 13, 15, .82));
  --scrim-strong: linear-gradient(180deg, rgba(13, 13, 15, .16), rgba(13, 13, 15, .86));

  /* --- 6. Semantic: status ------------------------------------------------ */
  --success: #12805a;
  --success-soft: #e2f4ec;
  --warning: #97600a;
  --warning-soft: #fdf0dc;
  --danger: var(--red-600);
  --danger-soft: var(--red-50);
  --focus: var(--red-600);

  /* --- 7. Elevation ------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(13, 13, 15, .07);
  --shadow-sm: 0 2px 4px rgba(13, 13, 15, .06), 0 1px 2px rgba(13, 13, 15, .04);
  --shadow-soft: 0 12px 32px rgba(13, 13, 15, .09), 0 2px 8px rgba(13, 13, 15, .05);
  --shadow-pop: 0 30px 70px rgba(13, 13, 15, .24), 0 8px 22px rgba(13, 13, 15, .12);
  --shadow-brand: 0 14px 32px rgba(217, 31, 38, .28);

  /* --- 8. Radii, motion, layout ------------------------------------------ */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 38px;
  --r-pill: 999px;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --dur-1: .14s;
  --dur-2: .22s;
  --dur-3: .36s;
  --header-h: 76px;

  /* --- 9. Typography ------------------------------------------------------ */
  --font-body: "Inter";
  --font-heading: "Space Grotesk";
  --font-arabic: "Noto Sans Arabic";
  --tracking-tight: -.035em;
  --tracking-caps: .13em;

  /* --- 10. Legacy aliases -------------------------------------------------
     Older published `themes` rows and any not-yet-migrated markup still name
     the previous palette. Mapping them onto the semantic layer keeps those
     surfaces on-system instead of reverting to the retired green. */
  --forest: var(--contrast);
  --forest-2: var(--contrast-2);
  --accent: var(--brand);
  --sand: var(--surface-inset);
  --orange: var(--brand-ink);

  color-scheme: light;
}

/* Dark is a token swap, not a second stylesheet: only the semantic layer is
   restated. --brand keeps the same fill because white-on-#d91f26 clears 4.5:1
   in both themes; red used as *text* moves up the ramp instead. */
:root[data-theme="dark"] {
  --bg: var(--gray-950);
  --bg-sunken: #08080a;
  --paper: var(--gray-900);
  --surface-2: #1c1c20;
  --surface-inset: #212127;
  --ink: var(--gray-50);
  --ink-soft: var(--gray-200);
  --muted: var(--gray-400);
  --line: #2c2c33;
  --line-strong: #3d3d45;
  --overlay: rgba(0, 0, 0, .74);
  --glass: rgba(24, 24, 27, .86);
  --glass-line: rgba(255, 255, 255, .14);

  --brand-hover: var(--red-400);
  --brand-fill-hover: var(--red-600);
  --brand-press: var(--red-500);
  --brand-ink: #ff7a7d;
  --brand-soft: rgba(217, 31, 38, .18);
  --brand-soft-ink: #ff9b9d;
  --brand-ring: rgba(239, 90, 92, .38);

  --contrast: var(--gray-900);
  --contrast-2: #101013;

  --success: #43c898;
  --success-soft: rgba(67, 200, 152, .16);
  --warning: #e0a84a;
  --warning-soft: rgba(224, 168, 74, .16);
  --danger: #ff7a7d;
  --danger-soft: rgba(255, 122, 125, .16);
  --focus: #ff7a7d;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, .5);
  --shadow-soft: 0 14px 34px rgba(0, 0, 0, .55);
  --shadow-pop: 0 34px 80px rgba(0, 0, 0, .7);
  --shadow-brand: 0 14px 32px rgba(217, 31, 38, .42);

  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--font-body), "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body.dialog-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
/* Inline/content links remain identifiable without relying on color alone. */
.unit-body a, .unit-location a, .section-note a, .site-footer a, .map-panel a, .assistant-disclaimer a { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: 3px; }
.unit-body a:hover, .unit-location a:hover, .section-note a:hover, .site-footer a:hover, .map-panel a:hover, .assistant-disclaimer a:hover { text-decoration-thickness: .14em; }
img { display: block; max-width: 100%; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.symbol-sheet { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -60px; left: 16px; z-index: 1000; padding: 12px 16px; background: var(--brand); color: var(--on-brand); border-radius: var(--r-sm); font-weight: 700; box-shadow: var(--shadow-brand); }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* A red outline vanishes on a red fill: those controls focus in ink instead. */
.button-brand:focus-visible, .search-submit:focus-visible, .theme-option[aria-checked="true"]:focus-visible { outline-color: var(--ink); }
[hidden] { display: none !important; }

.section-pad { padding-left: clamp(20px, 5vw, 78px); padding-right: clamp(20px, 5vw, 78px); }
.site-header { height: var(--header-h); padding: 0 clamp(20px, 5vw, 78px); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: max-content; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-family: var(--font-heading), "Manrope", sans-serif; font-size: 13px; font-weight: 800; letter-spacing: -.5px; }
.brand-copy { display: grid; line-height: 1; gap: 5px; }
.brand-copy b { font-family: var(--font-heading), "Space Grotesk", sans-serif; font-size: 14px; letter-spacing: .08em; }
.brand-copy small { font-size: 8px; letter-spacing: .16em; color: var(--muted); }
.desktop-nav { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 28px); font-size: 13px; font-weight: 600; position: relative; }
.desktop-nav > a, .nav-more { opacity: .76; transition: opacity .2s; }
.desktop-nav > a:hover, .nav-more:hover { opacity: 1; }
.nav-more { border: 0; background: transparent; padding: 8px 0; display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.nav-more svg { width: 15px; }
.more-menu { position: absolute; right: 0; top: 40px; display: grid; min-width: 190px; padding: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-soft); }
.more-menu a { padding: 11px 12px; border-radius: 8px; }
.more-menu a:hover { background: var(--surface-inset); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-text-button, .mobile-menu-toggle, .icon-button { border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.icon-text-button { gap: 6px; padding: 10px; font-size: 12px; font-weight: 700; }
.button { min-height: 44px; border: 0; border-radius: 999px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 700; cursor: pointer; transition: transform .2s var(--ease), background .2s, color .2s; }
.button:hover { transform: translateY(-2px); }
.button-dark { background: var(--contrast); color: var(--on-contrast); }
.button-light { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.button-accent, .button-brand { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-brand); }
.button-accent:hover, .button-brand:hover { background: var(--brand-fill-hover); }
.header-recommend { min-height: 40px; padding: 0 16px; font-size: 12px; }
.header-recommend svg { width: 17px; }
.mobile-menu-toggle { display: none; width: 42px; height: 42px; }
.mobile-nav { position: fixed; inset: var(--header-h) 0 auto; z-index: 45; padding: 18px 22px 26px; background: var(--paper); box-shadow: var(--shadow-soft); grid-template-columns: 1fr 1fr; gap: 6px; }
.mobile-nav:not([hidden]) { display: grid; }
.mobile-nav a { padding: 12px 10px; border-bottom: 1px solid var(--line); font-weight: 600; }

.hero { min-height: 690px; display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(30px, 5vw, 72px); align-items: center; position: relative; padding-top: 52px; padding-bottom: 126px; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 580px; height: 580px; border: 1px solid var(--brand-ring); border-radius: 50%; left: -350px; top: 20px; box-shadow: 0 0 0 80px rgba(217,31,38,.035), 0 0 0 160px rgba(217,31,38,.02); }
.hero-copy { position: relative; z-index: 1; max-width: 620px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-ink); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow > span { width: 22px; height: 1px; background: currentColor; }
.eyebrow.light { color: var(--on-contrast-brand); }
h1, h2, h3 { font-family: var(--font-heading), "Space Grotesk", sans-serif; margin: 0; letter-spacing: var(--tracking-tight); }
.hero h1 { margin-top: 20px; max-width: 650px; font-size: clamp(48px, 5.3vw, 82px); line-height: .99; font-weight: 600; }
.hero h1 em { color: var(--brand-ink); font-style: normal; }
.hero-copy > p { max-width: 570px; margin: 26px 0 28px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.hero-proof { display: flex; gap: clamp(18px, 3vw, 46px); }
.hero-proof div { display: grid; gap: 2px; }
.hero-proof b { font-family: var(--font-heading), "Space Grotesk", sans-serif; font-size: 21px; font-variant-numeric: tabular-nums; }
.hero-proof span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.hero-visual { position: relative; min-height: 510px; border-radius: 240px 240px 24px 24px; background: linear-gradient(180deg, transparent 50%, rgba(13,13,15,.52)), url("https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=1600&q=85") center/cover; box-shadow: var(--shadow-pop); }
.hero-status { position: absolute; top: 60px; left: -36px; display: flex; align-items: center; gap: 11px; padding: 13px 17px; border: 1px solid var(--glass-line); border-radius: 14px; background: var(--glass); color: var(--ink); backdrop-filter: blur(14px); box-shadow: var(--shadow-soft); }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.hero-status span:last-child { display: grid; gap: 2px; }
.hero-status small { color: var(--muted); font-size: 10px; }
.hero-status b { font-size: 12px; }
.hero-caption { position: absolute; left: 28px; right: 28px; bottom: 28px; display: grid; color: var(--on-media); }
.hero-caption span { margin-bottom: 7px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.hero-caption b { font-family: var(--font-heading), "Space Grotesk", sans-serif; font-size: 30px; }
.hero-caption small { margin-top: 3px; opacity: .82; }
.search-dock { position: absolute; z-index: 5; left: clamp(20px,5vw,78px); right: clamp(20px,5vw,78px); bottom: 34px; min-height: 106px; padding: 17px; display: grid; grid-template-columns: minmax(280px, 1.6fr) 1fr 1fr 66px; gap: 0; align-items: stretch; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-soft); }
.search-dock label { min-width: 0; padding: 6px 24px; display: flex; flex-direction: column; justify-content: center; gap: 7px; border-right: 1px solid var(--line); }
.search-dock label > span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.search-main div { display: flex; align-items: center; gap: 10px; }
.search-main svg { color: var(--brand); }
.search-dock input, .search-dock select { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-weight: 700; }
.search-dock input::placeholder { color: var(--muted); font-weight: 500; }
.search-submit { border: 0; border-radius: 15px; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; cursor: pointer; transition: background var(--dur-2); }
.search-submit:hover { background: var(--brand-fill-hover); }
.search-submit span { display: none; }
.search-submit svg { width: 26px; height: 26px; transition: transform .2s; }
.search-submit:hover svg { transform: translateX(3px); }

.trust-strip { padding: 17px clamp(20px,5vw,78px); background: var(--contrast); color: var(--on-contrast); display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 12px; }
.trust-strip > span { color: var(--on-contrast-brand); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.trust-strip div { display: flex; align-items: center; gap: 8px; opacity: .85; }
.trust-strip b { color: var(--on-contrast-brand); }

.section-block { padding-top: clamp(78px, 9vw, 132px); padding-bottom: clamp(78px, 9vw, 132px); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 38px; }
.section-head h2 { margin-top: 13px; max-width: 720px; font-size: clamp(36px, 4vw, 58px); line-height: 1.05; font-weight: 600; }
.section-head p, .units-section .section-head p { max-width: 430px; color: var(--muted); line-height: 1.6; }
.text-link { border: 0; padding: 8px 0; background: transparent; display: inline-flex; align-items: center; gap: 9px; color: var(--brand-ink); font-size: 13px; font-weight: 800; cursor: pointer; }
.text-link svg { width: 17px; transition: transform .2s; }
.text-link:hover svg { transform: translateX(3px); }
.destination-grid { display: grid; grid-template-columns: 1.15fr .85fr .85fr; grid-template-rows: 250px 250px; grid-auto-rows: 250px; gap: 16px; }
.destination-card { position: relative; overflow: hidden; border-radius: var(--r-md); background-position: center; background-size: cover; color: var(--on-media); cursor: pointer; }
.destination-card:first-child { grid-row: 1 / 3; }
.destination-card::before { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.destination-card::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--on-media-line); border-radius: inherit; pointer-events: none; }
.destination-card > div { position: absolute; left: 22px; right: 22px; bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.destination-card span { display: grid; gap: 4px; }
.destination-card small { text-transform: uppercase; letter-spacing: .11em; opacity: .72; font-size: 9px; }
.destination-card b { font-family: var(--font-heading), "Space Grotesk", sans-serif; font-size: 24px; }
.destination-card i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--on-media-line-strong); transition: transform .2s, background .2s, border-color .2s; }
.destination-card:hover i { transform: translateX(3px); background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.developer-strip { padding-top: 34px; padding-bottom: 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.developer-list { margin-top: 25px; display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; }
.developer-logo { min-height: 72px; display: grid; place-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink-soft); font-family: var(--font-heading), "Space Grotesk", sans-serif; font-size: 14px; font-weight: 800; text-align: center; }

.show-more-row, .map-list-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.show-more-row button, .map-list-controls button { min-height: 44px; padding: 10px 18px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--brand-ink); cursor: pointer; }
.show-more-row button:focus-visible, .map-list-controls button:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 3px; }
.show-more-row button:disabled { opacity: .6; cursor: wait; }

.project-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.project-card { position: relative; min-height: 200px; border-radius: var(--r-md); background-color: var(--surface-inset); background-size: cover; background-position: center; overflow: hidden; cursor: pointer; display: flex; align-items: flex-end; transition: transform .25s var(--ease); }
.project-card:hover { transform: translateY(-4px); }
.project-card::before { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.project-card-body { position: relative; z-index: 1; padding: 16px; color: var(--on-media); width: 100%; }
.project-card-body h3 { font-size: 17px; margin: 4px 0 2px; }
.project-card-body p { margin: 0 0 6px; font-size: 11px; opacity: .8; }
.project-card-body b { font-size: 13px; }
.verified-badge { display: inline-block; padding: 4px 9px; margin-bottom: 8px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }

.units-section { background: var(--paper); }
.view-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.filter-chip, .choice-row button { min-height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-weight: 700; font-size: 12px; cursor: pointer; }
.filter-chip.active, .choice-row button.selected { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.result-summary { min-height: 28px; margin: -20px 0 18px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; }
.unit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.search-active-filters { margin: 0 0 18px; overflow-wrap: anywhere; color: var(--muted); font-size: 13px; }
.search-active-filters:empty { display: none; }
.unit-grid > .empty-state { grid-column: 1 / -1; }
#units-toggle:disabled { cursor: wait; opacity: .6; }
.unit-card { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--paper); transition: transform .25s var(--ease), box-shadow .25s; }
.unit-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.unit-media { height: 245px; position: relative; background-size: cover; background-position: center; }
.unit-badges { position: absolute; left: 14px; top: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.unit-badges span { padding: 7px 9px; border-radius: 999px; background: var(--glass); color: var(--ink); backdrop-filter: blur(8px); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.unit-badges .offer-badge { background: var(--brand); color: var(--on-brand); }
.unit-card-actions { position: absolute; right: 13px; top: 13px; display: flex; gap: 7px; }
.round-action { width: 38px; height: 38px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--glass); color: var(--ink); backdrop-filter: blur(8px); cursor: pointer; }
.round-action.active { background: var(--brand); color: var(--on-brand); }
.round-action svg { width: 17px; }
.unit-body { padding: 18px; }
.unit-location { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.unit-location svg { width: 13px; height: 13px; }
.unit-body h3 { margin-top: 8px; font-size: 21px; letter-spacing: -.025em; }
/* The card's two links into the generated catalog pages (unit reference and
   project name). The global `a { color: inherit; text-decoration: none }`
   left them pixel-identical to the text they replaced, while .unit-card:hover
   lifts the whole card — so the card read as clickable and the only parts
   that actually were looked like plain text. Underline + forest ink marks
   them; the underline is drawn in a translucent tint of the same token so the
   grid stays quiet until hovered. Decoration only: no box model changes, so
   nothing here can shift layout. */
.unit-location a, .unit-body h3 a {
  color: var(--brand-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--brand-ink) 35%, transparent);
  transition: text-decoration-color .2s;
}
/* The project heading is 21px and semibold, so a hairline reads as an
   artefact rather than a link — it needs a touch more weight than the 11px
   reference code above it to carry the same signal. */
.unit-body h3 a {
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--brand-ink) 45%, transparent);
}
.unit-location a:hover, .unit-body h3 a:hover { text-decoration-color: var(--brand-ink); }
.unit-developer { margin: 3px 0 16px; color: var(--muted); font-size: 12px; }
.unit-specs { padding: 12px 0; display: flex; gap: 17px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 12px; }
.unit-specs span { display: flex; align-items: center; gap: 5px; }
.unit-specs svg { width: 16px; }
.unit-price { padding-top: 15px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.unit-price span { display: grid; gap: 3px; }
.unit-price small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.unit-price b { font-family: var(--font-heading), "Space Grotesk", sans-serif; font-size: 18px; font-variant-numeric: tabular-nums; }
.unit-price em { color: var(--success); font-size: 10px; font-style: normal; font-weight: 700; }
.unit-freshness { margin-top: 11px; color: var(--muted); font-size: 9px; }
.empty-state { grid-column: 1/-1; padding: 64px 24px; border: 1px dashed var(--line); border-radius: var(--r-md); text-align: center; }
.empty-state h3 { font-size: 24px; }
.empty-state p { color: var(--muted); }

.recommendation-section { padding-top: 100px; padding-bottom: 100px; background: var(--contrast); color: var(--on-contrast); display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(48px, 8vw, 130px); align-items: start; }
.recommendation-intro { position: static; }
.recommendation-intro h2 { margin-top: 16px; font-size: clamp(38px,4.2vw,60px); line-height: 1.04; font-weight: 600; }
.recommendation-intro > p { max-width: 500px; margin: 24px 0 30px; color: var(--on-contrast-soft); line-height: 1.7; }
.ai-promise { display: inline-flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--contrast-line); border-radius: 14px; background: var(--contrast-fill); }
.ai-promise svg { color: var(--on-contrast-brand); }
.ai-promise span { display: grid; gap: 3px; }
.ai-promise small { color: var(--on-contrast-faint); }
.recommendation-form { padding: 34px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-pop); }
.form-step { padding: 19px 0; border-bottom: 1px solid var(--line); display: grid; gap: 12px; }
.form-step > span { color: var(--brand-ink); font-size: 10px; font-weight: 800; }
.form-step label { font-family: var(--font-heading), "Space Grotesk", sans-serif; font-size: 18px; font-weight: 700; }
.form-step select { width: 100%; min-height: 44px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-weight: 700; outline: 0; }
.choice-row { display: flex; gap: 7px; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.remember-choice { margin: 22px 0; display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.remember-choice input { margin-top: 4px; accent-color: var(--brand); }
.remember-choice span { display: grid; gap: 3px; }
.remember-choice small { color: var(--muted); line-height: 1.4; }
.recommendation-submit { width: 100%; }
.recommendation-results { grid-column: 1/-1; min-width: 0; padding-top: 38px; border-top: 1px solid var(--contrast-line); }
.recommendation-results-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.recommendation-results h3 { margin: 8px 0 0; font-size: 30px; line-height: 1.1; }
.recommendation-result-count { padding: 8px 12px; border: 1px solid var(--contrast-line); border-radius: var(--r-pill); color: var(--on-contrast-soft); font-size: 11px; white-space: nowrap; }
.recommendation-summary { display: grid; gap: 4px; margin-bottom: 22px; color: var(--on-contrast-soft); }
.recommendation-summary p, .recommendation-summary .recommendation-scope { margin: 0; line-height: 1.55; }
.recommendation-summary p { color: var(--on-contrast-faint); font-size: 13px; }
.recommendation-empty { margin: 0 0 22px; color: var(--on-contrast-soft); }
.match-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; align-items: stretch; }
.match-card { min-height: 294px; padding: 22px; border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045)); border: 1px solid var(--contrast-line); display: flex; flex-direction: column; box-shadow: 0 14px 30px rgba(0,0,0,.12); transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.match-card:hover { transform: translateY(-4px); border-color: rgba(255,122,125,.55); background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); }
.match-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.match-badge { color: var(--on-contrast-brand); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.match-badge.is-near { color: var(--on-contrast-soft); }
.match-score { color: var(--on-contrast-faint); font-size: 11px; }
.match-card h4 { margin: 18px 0 4px; font-family: var(--font-heading), "Space Grotesk", sans-serif; font-size: 23px; line-height: 1.1; }
.match-location { margin: 0; color: var(--on-contrast-faint); font-size: 11px; }
.match-price { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; }
.match-price b { font-size: 19px; }
.match-price span { color: var(--on-contrast-soft); font-size: 12px; }
.match-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }
.match-facts span { padding: 6px 8px; border-radius: 7px; background: rgba(255,255,255,.08); color: var(--on-contrast-soft); font-size: 10px; }
.match-card p.match-reason { min-height: 0; margin: 16px 0 0; color: var(--on-contrast-soft); font-size: 12px; line-height: 1.6; }
.match-trust { display: flex; align-items: center; gap: 6px; margin: 12px 0 20px; color: var(--on-contrast-faint); font-size: 10px; }
.match-trust svg { width: 13px; height: 13px; color: var(--on-contrast-brand); }
.match-card .text-link { color: var(--on-contrast-brand); }
.match-card .text-link { min-height: 44px; margin-top: auto; align-self: flex-start; }

.split-feature { padding-top: 110px; padding-bottom: 110px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 20px; }
.feature-card { min-height: 590px; padding: 36px; border-radius: var(--r-lg); display: flex; flex-direction: column; justify-content: space-between; color: var(--on-media); }
.feature-project { background: var(--scrim), url("https://images.unsplash.com/photo-1600047509807-ba8f99d2cdde?auto=format&fit=crop&w=1500&q=85") center/cover; }
.feature-card h2 { margin: 10px 0 12px; font-size: 55px; font-weight: 600; }
.feature-card p { max-width: 480px; color: var(--on-media-soft); line-height: 1.65; }
.feature-place { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.feature-place svg { width: 15px; }
.feature-panel { padding: 40px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.feature-panel h3 { margin: 15px 0 30px; font-size: 34px; line-height: 1.12; }
.offer-list { display: grid; gap: 0; margin-bottom: 24px; }
.offer-item { padding: 18px 0; display: grid; grid-template-columns: 52px 1fr auto; gap: 13px; align-items: center; border-bottom: 1px solid var(--line); }
.offer-value { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--brand-soft); color: var(--brand-soft-ink); font-weight: 800; }
.offer-item span:nth-child(2) { display: grid; gap: 3px; }
.offer-item small { color: var(--muted); }
.offer-item em { font-style: normal; font-size: 9px; color: var(--brand-ink); font-weight: 800; text-transform: uppercase; }
.launches { background: var(--bg-sunken); }
.launch-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.launch-card { min-height: 370px; padding: 24px; position: relative; overflow: hidden; border-radius: var(--r-md); background-size: cover; background-position: center; color: var(--on-media); display: flex; flex-direction: column; justify-content: space-between; }
.launch-card::before { content: ""; position: absolute; inset: 0; background: var(--scrim-strong); }
.launch-card > * { position: relative; z-index: 1; }
.launch-card > span { align-self: flex-start; padding: 7px 10px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.launch-card h3 { font-size: 28px; }
.launch-card p { margin: 5px 0 15px; opacity: .78; }
.launch-meta { display: flex; gap: 12px; font-size: 11px; }
.news { background: var(--paper); }
.news-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 18px; }
.news-card { border-top: 1px solid var(--ink); padding-top: 15px; }
.news-card:first-child .news-image { height: 330px; }
.news-image { height: 210px; border-radius: 14px; background-size: cover; background-position: center; }
.news-meta { margin: 15px 0 9px; display: flex; gap: 8px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.news-card h3 { font-size: 21px; line-height: 1.25; }
.news-card p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.how-section { padding-top: 100px; padding-bottom: 100px; background: var(--contrast); color: var(--on-contrast); display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(50px,8vw,130px); }
.how-section h2 { margin: 15px 0; max-width: 500px; font-size: clamp(40px,4vw,60px); font-weight: 600; line-height: 1.05; }
.how-section > div > p { color: var(--on-contrast-soft); line-height: 1.7; }
.steps { margin: 0; padding: 0; list-style: none; }
.steps li { padding: 20px 0; display: grid; grid-template-columns: 56px 1fr; border-top: 1px solid var(--contrast-line); }
.steps li > span { color: var(--on-contrast-brand); font-size: 11px; }
.steps b { font-family: var(--font-heading), "Space Grotesk", sans-serif; font-size: 20px; }
.steps p { margin: 5px 0 0; color: var(--on-contrast-faint); }

.site-footer { padding-top: 72px; padding-bottom: 30px; display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 42px; background: var(--contrast-2); color: var(--on-contrast); }
.brand.inverse .brand-mark { background: var(--brand); color: var(--on-brand); }
.brand.inverse .brand-copy small { color: var(--on-contrast-faint); }
.footer-brand p { max-width: 360px; color: var(--on-contrast-soft); line-height: 1.6; }
.site-footer > div:not(.footer-brand) { display: grid; align-content: start; gap: 12px; font-size: 13px; }
.site-footer > div:not(.footer-brand) b { margin-bottom: 7px; color: var(--on-contrast-brand); }
.site-footer > div:not(.footer-brand) a { color: var(--on-contrast-soft); }
.footer-note { grid-column: 1/-1; padding-top: 26px; border-top: 1px solid var(--contrast-line); color: var(--on-contrast-faint); }

.compare-tray { position: fixed; z-index: 70; left: 50%; bottom: 20px; width: min(700px,calc(100% - 32px)); transform: translateX(-50%); padding: 11px 12px 11px 16px; border: 1px solid var(--contrast-line); border-radius: 18px; background: var(--contrast-2); color: var(--on-contrast); box-shadow: var(--shadow-pop); display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.compare-tray > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.compare-tray > div > span:last-child { display: grid; gap: 2px; }
.compare-tray small { color: var(--on-contrast-soft); }
.compare-thumbs { display: flex; padding-left: 6px; }
.compare-thumbs i { width: 38px; height: 38px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--contrast-2); background-size: cover; background-position: center; }
dialog { border: 0; padding: 0; }
dialog::backdrop { background: var(--overlay); backdrop-filter: blur(6px); }
.compare-dialog { width: min(1180px,calc(100% - 28px)); max-height: 88vh; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-pop); }
.dialog-head { padding: 25px 28px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin-top: 8px; font-size: 30px; }
.icon-button { width: 42px; height: 42px; border-radius: 50%; }
.icon-button:hover { background: var(--surface-inset); }
.compare-table-wrap { padding: 24px 28px 30px; overflow: auto; }
.compare-table { width: 100%; min-width: 740px; border-collapse: collapse; text-align: left; }
.compare-table th, .compare-table td { padding: 13px 15px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare-table th { width: 150px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.compare-table td { font-size: 13px; }
.compare-unit-head { min-width: 180px; }
.compare-unit-head img { width: 100%; height: 100px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; }
.compare-unit-head b { font-family: var(--font-heading), "Space Grotesk", sans-serif; font-size: 17px; }
.remove-compare { margin-top: 6px; border: 0; background: transparent; color: var(--danger); padding: 0; font-size: 11px; cursor: pointer; }

.assistant-launcher { position: fixed; z-index: 65; right: 22px; bottom: 22px; min-height: 58px; padding: 8px 16px 8px 8px; border: 1px solid var(--contrast-line); border-radius: 999px; background: var(--contrast); color: var(--on-contrast); display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-pop); cursor: pointer; }
.compare-tray:not([hidden]) ~ .assistant-launcher { bottom: 100px; }
.assistant-pulse { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: var(--on-brand); }
.assistant-launcher > span:last-child { display: grid; gap: 2px; text-align: left; }
.assistant-launcher small { color: var(--on-contrast-soft); font-size: 9px; }
.recommendation-editing .assistant-launcher { opacity: 0; pointer-events: none; transform: translateY(12px); }
.assistant-panel { position: fixed; z-index: 90; right: 22px; bottom: 22px; width: min(390px,calc(100% - 24px)); height: min(620px,calc(100vh - 40px)); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--paper); color: var(--ink); box-shadow: var(--shadow-pop); grid-template-rows: auto 1fr auto auto; }
.assistant-panel:not([hidden]) { display: grid; grid-template-rows: auto minmax(0,1fr) auto auto auto; }
.assistant-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.assistant-actions button { flex: 1 1 140px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-inset); color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; }
.assistant-actions [data-contact-request] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.assistant-head { padding: 14px 15px; display: flex; align-items: center; justify-content: space-between; background: var(--contrast); color: var(--on-contrast); }
.assistant-head > div { display: flex; align-items: center; gap: 9px; }
.assistant-head > div:first-child > span:last-child { display: grid; gap: 3px; }
.assistant-head small { color: var(--on-contrast-soft); font-size: 9px; }
.assistant-head small i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #43c898; }
.assistant-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: var(--on-brand); }
.assistant-head .icon-button { color: var(--on-contrast); }
.assistant-messages { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 11px; background: var(--surface-2); }
.message { max-width: 86%; padding: 11px 13px; border-radius: 15px; font-size: 13px; line-height: 1.5; }
.assistant-message { align-self: flex-start; background: var(--paper); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.user-message { align-self: flex-end; background: var(--brand); color: var(--on-brand); border-bottom-right-radius: 4px; }
.assistant-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
.assistant-suggestions button { border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 10px; background: transparent; color: var(--brand-ink); font-size: 10px; cursor: pointer; }
.assistant-composer { padding: 10px; display: grid; grid-template-columns: 1fr 42px; gap: 8px; border-top: 1px solid var(--line); }
.assistant-composer textarea { width: 100%; max-height: 90px; resize: none; border: 0; outline: 0; padding: 10px; background: transparent; color: var(--ink); font-size: 13px; }
.assistant-composer button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--brand); color: var(--on-brand); cursor: pointer; }
.assistant-composer button svg { width: 18px; }
.assistant-disclaimer { margin: 0; padding: 0 13px 10px; color: var(--muted); font-size: 8px; text-align: center; }
.voice-dialog { position: relative; width: min(480px,calc(100% - 24px)); min-height: 540px; max-height: calc(100vh - 36px); overflow-y: auto; padding: 26px 28px 32px; border-radius: 28px; background: radial-gradient(circle at 50% 32%, var(--red-900), var(--contrast-2) 64%); color: var(--on-contrast); text-align: center; box-shadow: var(--shadow-pop); }
.voice-dialog-top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 8px; }
.voice-model-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--on-contrast-soft); text-transform: uppercase; }
.voice-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); }
.voice-minimize { position: static; color: var(--on-contrast); margin-inline-start: auto; }
.voice-hero { transition: all .35s var(--ease); }
.voice-dialog h2 { margin: 10px 0 18px; font-size: 38px; line-height: 1.05; transition: all .35s var(--ease); }
.voice-orb { width: 160px; height: 160px; margin: 0 auto 18px; position: relative; display: grid; place-items: center; border-radius: 50%; background: rgba(217,31,38,.14); transition: all .35s var(--ease); }
.voice-orb span { position: absolute; inset: 16px; border: 1px solid rgba(239,90,92,.34); border-radius: 50%; }
.voice-orb span:nth-child(2) { inset: 32px; background: radial-gradient(circle at 38% 30%, #ff9b9d, var(--red-500) 42%, var(--red-700) 78%); box-shadow: 0 0 50px rgba(217,31,38,.45); }
.voice-orb svg { position: relative; z-index: 2; width: 34px; height: 34px; color: var(--on-brand); }
.voice-dialog.previewing .voice-orb { animation: breathe 1.8s ease-in-out infinite; }
.voice-dialog[data-voice-state="muted"] .voice-orb, .voice-dialog[data-voice-state="error"] .voice-orb { filter: grayscale(.75); opacity: .72; animation: none; }

/* Dynamic hero collapse when active/connected */
.voice-dialog:not([data-voice-state="idle"]):not([data-voice-state="ended"]):not([data-voice-state="error"]) .voice-hero h2 { font-size: 20px; margin: 4px 0 8px; }
.voice-dialog:not([data-voice-state="idle"]):not([data-voice-state="ended"]):not([data-voice-state="error"]) .voice-orb { width: 78px; height: 78px; margin-bottom: 10px; }
.voice-dialog:not([data-voice-state="idle"]):not([data-voice-state="ended"]):not([data-voice-state="error"]) .voice-orb svg { width: 22px; height: 22px; }
.voice-dialog:not([data-voice-state="idle"]):not([data-voice-state="ended"]):not([data-voice-state="error"]) .voice-orb span { inset: 6px; }
.voice-dialog:not([data-voice-state="idle"]):not([data-voice-state="ended"]):not([data-voice-state="error"]) .voice-orb span:nth-child(2) { inset: 14px; }

/* Real-time acoustic visualizer */
.voice-visualizer { display: flex; align-items: center; justify-content: center; gap: 5px; height: 26px; margin: 8px auto 4px; }
.voice-visualizer .vbar { width: 4px; height: 6px; min-height: 4px; max-height: 26px; border-radius: 3px; background: linear-gradient(180deg, #ff9b9d, var(--brand)); transition: height .06s ease; }
.voice-visualizer[data-speaking="user"] .vbar { background: linear-gradient(180deg, #6ee7b7, var(--success)); }
.voice-visualizer[data-speaking="assistant"] .vbar { background: linear-gradient(180deg, #ffb3b5, var(--brand)); }

/* Tool execution status indicator */
.voice-tool-indicator { display: inline-flex; align-items: center; gap: 8px; margin: 6px auto; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-size: 11px; font-weight: 500; color: var(--on-contrast); max-width: 92%; }
.voice-tool-indicator[hidden] { display: none; }
.voice-tool-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); animation: pulse 1.2s ease-in-out infinite; }
.voice-tool-indicator[data-status="done"] .voice-tool-dot { background: var(--success); animation: none; }

/* Multi-turn transcript feed */
.voice-transcript-feed { display: flex; flex-direction: column; gap: 8px; max-height: 150px; overflow-y: auto; padding: 6px 2px; margin: 8px 0 4px; text-align: start; scroll-behavior: smooth; }
.voice-transcript-feed[hidden] { display: none; }
.voice-turn { display: flex; flex-direction: column; gap: 2px; max-width: 88%; padding: 7px 11px; border-radius: 14px; font-size: 12px; line-height: 1.45; unicode-bidi: plaintext; }
.voice-turn-user { align-self: flex-end; background: rgba(255,255,255,.14); border-bottom-right-radius: 4px; color: #fff; text-align: right; }
[dir="rtl"] .voice-turn-user { align-self: flex-start; border-bottom-right-radius: 14px; border-bottom-left-radius: 4px; text-align: left; }
.voice-turn-assistant { align-self: flex-start; background: rgba(217,31,38,.24); border: 1px solid rgba(239,90,92,.28); border-bottom-left-radius: 4px; color: var(--on-contrast); }
[dir="rtl"] .voice-turn-assistant { align-self: flex-end; border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
.voice-turn-speaker { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .75; }
.voice-turn-text { font-size: 12px; word-break: break-word; }

/* Suggested prompt chips */
.voice-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px 0 4px; }
.voice-suggestions[hidden] { display: none; }
.voice-chip { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); color: var(--on-contrast-soft); font-size: 11px; font-weight: 500; padding: 5px 11px; border-radius: 999px; cursor: pointer; transition: all .15s ease; text-align: center; }
.voice-chip:hover { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.28); transform: translateY(-1px); }

.voice-dialog > p { margin: 0 0 7px; font-weight: 700; }
.voice-dialog > small { display: block; color: var(--on-contrast-soft); line-height: 1.5; }
.voice-captions { display: grid; gap: 7px; margin-top: 14px; text-align: left; }
.voice-captions p { margin: 0; padding: 9px 11px; border-radius: 12px; background: var(--contrast-fill); line-height: 1.35; }
.voice-captions b { display: block; margin-bottom: 2px; color: var(--on-contrast-brand); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.voice-captions span { display: block; max-height: 100px; overflow-y: auto; font-size: 13px; line-height: 1.6; text-align: start; unicode-bidi: plaintext; overflow-wrap: anywhere; }
.voice-captions span[lang="ar"] { font-family: var(--font-arabic), sans-serif; }
#voice-knowledge-status { margin-top: 10px; }
.voice-actions { margin-top: 20px; display: grid; gap: 8px; }
.voice-actions button { min-height: 46px; border-radius: 999px; cursor: pointer; }
.voice-demo { border: 0; background: var(--brand); color: var(--on-brand); font-weight: 800; }
.voice-demo svg { vertical-align: middle; margin-right: 5px; }
.voice-mute { border: 1px solid var(--on-media-line-strong); background: var(--contrast-fill); color: var(--on-contrast); font-weight: 700; }
.voice-mute svg { vertical-align: middle; margin-right: 5px; }
.voice-end { border: 1px solid var(--on-media-line); background: transparent; color: var(--on-contrast); }

/* Switch to text chat button */
.voice-switch-chat { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: transparent; border: 1px solid rgba(255,255,255,.18); color: var(--on-contrast-soft); font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 999px; margin-top: 4px; cursor: pointer; transition: all .18s ease; }
.voice-switch-chat:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.3); }
.voice-switch-chat svg { width: 14px; height: 14px; }
.voice-switch-chat[hidden] { display: none; }
.voice-bubble { position: fixed; z-index: 92; right: 22px; bottom: 22px; max-width: min(330px,calc(100% - 24px)); min-height: 56px; padding: 9px 16px 9px 10px; border: 1px solid var(--contrast-line); border-radius: 999px; background: var(--contrast); color: var(--on-contrast); display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-pop); text-align: left; cursor: pointer; }
.voice-bubble[hidden] { display: none; }
.voice-bubble > span:last-child { display: grid; gap: 2px; overflow: hidden; }
.voice-bubble strong, .voice-bubble small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-bubble small { color: var(--on-contrast-soft); font-size: 9px; }
.voice-bubble-dot { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 7px var(--brand-ring); }
.toast { position: fixed; z-index: 120; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 12px 16px; border: 1px solid var(--contrast-line); border-radius: 12px; background: var(--contrast); color: var(--on-contrast); box-shadow: var(--shadow-pop); font-size: 12px; }
@keyframes breathe { 50% { transform: scale(1.035); filter: saturate(1.18); } }

[dir="rtl"] body { font-family: var(--font-arabic), var(--font-body), sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .brand-copy, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] select,
[dir="rtl"] textarea { font-family: var(--font-arabic), var(--font-heading), sans-serif; }
[dir="rtl"] .hero-copy, [dir="rtl"] .section-head, [dir="rtl"] .recommendation-intro,
[dir="rtl"] .feature-card, [dir="rtl"] .feature-panel, [dir="rtl"] .news-card,
[dir="rtl"] .unit-body, [dir="rtl"] .project-card-body { text-align: right; }
[dir="rtl"] .text-link svg, [dir="rtl"] .search-submit svg { transform: scaleX(-1); }
[dir="rtl"] .hero-status { left: auto; right: -36px; }
[dir="rtl"] .assistant-launcher, [dir="rtl"] .assistant-panel { right: auto; left: 22px; }
[dir="rtl"] .voice-bubble { right: auto; left: 22px; text-align: right; }
[dir="rtl"] .message.assistant-message { border-bottom-left-radius: 15px; border-bottom-right-radius: 4px; }
[dir="rtl"] .message.user-message { border-bottom-right-radius: 15px; border-bottom-left-radius: 4px; }

@media (max-width: 1120px) {
  .desktop-nav { gap: 14px; }
  .desktop-nav > a:nth-of-type(5), .desktop-nav > a:nth-of-type(6) { display: none; }
  .hero { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 56px; }
  .unit-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 820px) {
  :root { --header-h: 68px; }
  .desktop-nav, .header-recommend { display: none; }
  .mobile-menu-toggle { display: inline-flex; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 42px; padding-bottom: 32px; }
  .hero-copy { padding-bottom: 0; }
  .hero h1 { font-size: clamp(44px,10vw,64px); }
  .hero-visual { min-height: 480px; width: 78%; justify-self: end; }
  .search-dock { position: relative; inset: auto; margin-top: -76px; grid-template-columns: 1fr 1fr 58px; width: 94%; }
  .search-dock .search-main { grid-column: 1/-1; border-right: 0; border-bottom: 1px solid var(--line); }
  .trust-strip { flex-wrap: wrap; justify-content: center; }
  .trust-strip > span { width: 100%; text-align: center; }
  .destination-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 220px 220px; grid-auto-rows: 220px; }
  .destination-card:first-child { grid-column: 1/-1; grid-row: auto; }
  .developer-list { grid-template-columns: repeat(3,1fr); }
  .project-grid { grid-template-columns: repeat(2,1fr); }
  .recommendation-section, .split-feature, .how-section { grid-template-columns: 1fr; }
  .feature-card { min-height: 500px; }
  .launch-grid, .match-grid { grid-template-columns: 1fr 1fr; }
  .news-grid { grid-template-columns: 1fr 1fr; }
  .news-card:first-child { grid-column: 1/-1; }
  .site-footer { grid-template-columns: 2fr 1fr 1fr; }
  .footer-brand { grid-column: 1/-1; }
}

@media (max-width: 560px) {
  .brand-copy { display: none; }
  .hero { gap: 28px; }
  .hero-copy > p { font-size: 15px; }
  .hero-proof { justify-content: space-between; }
  .hero-proof b { font-size: 18px; }
  .hero-proof span { font-size: 8px; }
  .hero-visual { min-height: 400px; width: 92%; border-radius: 180px 180px 18px 18px; }
  .hero-status { left: -26px; top: 50px; }
  .search-dock { width: 100%; margin-top: -50px; grid-template-columns: 1fr 54px; padding: 11px; border-radius: 17px; }
  .search-dock label { padding: 11px; }
  .search-dock label:nth-of-type(2), .search-dock label:nth-of-type(3) { grid-column: auto; }
  .search-dock label:nth-of-type(3) { border-right: 0; }
  .search-submit { grid-column: 2; grid-row: 2 / 4; }
  .trust-strip { display: none; }
  .section-head { align-items: flex-start; flex-direction: column; }
  .section-head h2 { font-size: 38px; }
  .destination-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: -20px; padding-right: 20px; }
  .destination-card, .destination-card:first-child { min-width: 82vw; height: 370px; scroll-snap-align: start; }
  .developer-list { grid-template-columns: repeat(2,1fr); }
  .project-grid { grid-template-columns: 1fr; }
  .unit-grid { grid-template-columns: 1fr; }
  .view-actions { justify-content: flex-start; }
  .result-summary { margin-top: 0; }
  .recommendation-section { padding-top: 76px; padding-bottom: 76px; }
  .recommendation-form { padding: 22px; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .split-feature { padding-top: 76px; padding-bottom: 76px; }
  .feature-card { min-height: 450px; padding: 25px; }
  .feature-card h2 { font-size: 42px; }
  .feature-panel { padding: 25px; }
  .launch-grid, .match-grid, .news-grid { grid-template-columns: 1fr; }
  .news-card:first-child { grid-column: auto; }
  .news-card:first-child .news-image { height: 230px; }
  .site-footer { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1/-1; }
  .footer-note { font-size: 9px; }
  .compare-tray { bottom: 10px; align-items: stretch; }
  .compare-thumbs { display: none; }
  .compare-tray small { display: none; }
  .compare-tray .button { padding: 0 14px; font-size: 11px; }
  .assistant-launcher { right: 12px; bottom: 12px; padding-right: 8px; }
  .assistant-launcher > span:last-child { display: none; }
  .compare-tray:not([hidden]) ~ .assistant-launcher { bottom: 84px; }
  .assistant-panel { inset: var(--header-h) 0 0; width: 100%; height: auto; max-height: none; border-radius: 0; }
  .voice-dialog { min-height: 520px; padding: 34px 24px; }
  .voice-dialog h2 { font-size: 36px; }
  .voice-orb { width: 150px; height: 150px; }
}

@media (max-width: 340px) {
  .section-pad { padding-left: 16px; padding-right: 16px; }
  .site-header { padding: 0 14px; }
  .hero h1 { font-size: 40px; }
  .hero-proof span { max-width: 72px; }
  .search-dock label { padding: 9px 7px; }
  .search-dock label > span { font-size: 8px; }
  .search-dock input, .search-dock select { font-size: 11px; }
  .destination-grid { margin-right: -16px; padding-right: 16px; }
  .compare-tray { width: calc(100% - 16px); }
}

/* Search-first mobile layout and shared input/navigation accessibility. */
.search-dock input:focus-visible, .search-dock select:focus-visible,
.assistant-composer textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.search-dock label:focus-within { background: var(--surface-inset); border-radius: 10px; }
.mobile-menu-toggle, .icon-button, .language-toggle, .filter-chip, .choice-row button { min-width: 44px; min-height: 44px; }
.desktop-nav > a, .nav-more { min-height: 44px; display: inline-flex; align-items: center; }
.mobile-nav { max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.mobile-nav a { min-height: 48px; display: flex; align-items: center; overflow-wrap: anywhere; }
.more-menu { inset-inline-end: 0; right: auto; top: 48px; }
.assistant-messages { min-height: 0; overscroll-behavior: contain; }
.assistant-composer label { min-width: 0; }
.assistant-disclaimer { font-size: 10px; line-height: 1.5; }
.unit-card h3, .project-card h3 { overflow-wrap: anywhere; }
@media (max-width: 820px) {
  .hero { gap: 24px; }
  .hero-copy { grid-row: 1; }
  .search-dock { grid-row: 2; width: 100%; margin: 0; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px; }
  .search-dock label { padding: 10px; border: 0; gap: 8px; }
  .search-dock label > span { font-size: 11px; letter-spacing: .025em; }
  .search-dock input, .search-dock select { min-height: 44px; font-size: 16px; }
  .search-submit { grid-column: 1 / -1; grid-row: auto; min-height: 48px; display: flex; justify-content: center; align-items: center; gap: 12px; font-weight: 800; }
  .search-submit span { display: inline; }
  .hero-visual { grid-row: 3; min-height: 260px; width: 100%; border-radius: 24px; margin-top: 8px; }
  .hero-caption b { font-size: 26px; }
  .hero-proof span { font-size: 10px; letter-spacing: 0; }
  .recommendation-form input, .recommendation-form select, .assistant-composer textarea,
  .contact-request input, .contact-request select, .contact-request textarea { font-size: 16px; }
}
@media (max-width: 560px) {
  .hero { padding-top: 28px; }
  .hero h1 { font-size: clamp(36px, 9vw, 46px); }
  .hero-copy > p { margin: 18px 0; }
  .hero-proof { gap: 12px; }
  .search-dock { gap: 4px; padding: 10px; }
  .search-dock label:nth-of-type(2), .search-dock label:nth-of-type(3) { grid-column: auto; }
  .assistant-panel { height: calc(100dvh - var(--header-h)); bottom: auto; }
  .assistant-composer { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .assistant-launcher { bottom: max(12px, env(safe-area-inset-bottom)); }
  .section-head h2 { font-size: clamp(29px, 8vw, 38px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.map-toggle,.map-toolbar button,.map-toolbar select,.nearby-card button{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:8px;padding:10px 13px;font:inherit;cursor:pointer;min-height:42px}
.map-toggle{margin-bottom:18px;font-weight:700}.map-panel{padding:20px;border:1px solid var(--line);background:var(--bg);border-radius:16px;margin-bottom:28px;overflow:hidden}.map-toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.map-toolbar label{display:grid;gap:7px;max-width:100%;font-size:13px}.map-toolbar input{font:inherit;border:1px solid var(--line);border-radius:8px;padding:11px;width:270px;max-width:100%;box-sizing:border-box}.map-note,#map-status{font-size:13px;line-height:1.7;margin:14px 0}.map-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr);gap:20px}.map-layout>div{min-width:0}.estate-map{position:relative;height:470px;overflow:hidden;background:var(--surface-inset);border:1px solid var(--line);border-radius:12px;isolation:isolate}.map-tiles,.map-markers{position:absolute;inset:0}.map-tiles img{position:absolute;max-width:none!important;width:256px;height:256px;user-select:none}.map-pin{position:absolute;transform:translate(-50%,-50%);border:2px solid var(--paper);border-radius:18px;background:var(--brand);color:var(--on-brand);font:bold 12px sans-serif;padding:5px 8px;min-width:32px;min-height:32px;cursor:pointer;box-shadow:var(--shadow-sm)}.map-pin:hover,.map-pin:focus-visible,.map-pin.selected{background:var(--brand-press);z-index:2;outline:2px solid var(--ink)}.map-controls{position:absolute;left:10px;top:10px;display:grid;gap:4px;z-index:3}.map-controls button{width:40px;height:38px;border:1px solid var(--line-strong);background:var(--paper);border-radius:6px;font-size:20px;cursor:pointer;color:var(--ink)}.map-attribution{position:absolute;bottom:0;right:0;background:color-mix(in srgb,var(--paper) 92%,transparent);padding:4px 7px;font:11px/1.5 sans-serif;z-index:4;color:var(--muted)}.map-attribution a{text-decoration:underline}.nearby-results{max-height:535px;overflow-y:auto;scrollbar-gutter:stable;padding-inline-end:5px}.nearby-results h3{font-size:19px;margin:0 0 12px}.nearby-results p{font-size:13px;line-height:1.6}.nearby-card{padding:15px;background:var(--paper);border:1px solid var(--line);border-radius:12px;margin-bottom:12px}.nearby-card h4{margin:0;font-size:16px}.nearby-card a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px}.nearby-card> a,.nearby-card button{font-size:12px}.nearby-card ul{padding-inline-start:18px}.nearby-card li{margin:10px 0;font-size:13px}.nearby-card small{display:block;margin-top:4px;line-height:1.6;color:var(--muted)}.map-panel button:focus-visible,.map-panel a:focus-visible,.map-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media(max-width:800px){.map-layout{grid-template-columns:minmax(0,1fr)}.estate-map{height:360px}.map-panel{padding:12px}.nearby-results{max-height:420px}.map-toolbar{gap:8px}.map-toolbar label{width:100%}.map-toolbar input{width:100%}.map-toolbar button{font-size:12px}.map-attribution{font-size:10px}}
.map-panel{background:var(--bg);border-color:var(--line);color:var(--ink)}
.map-toggle,.map-toolbar button,.map-toolbar select,.map-toolbar input,.nearby-card,.nearby-card button,#map-show-more{background:var(--paper);color:var(--ink);border-color:var(--line)}
.map-pin{width:150px;min-height:44px;display:grid;gap:2px;border-radius:12px;background:var(--brand);color:var(--on-brand);font:600 11px/1.3 var(--font-body),sans-serif;padding:6px 10px}
.map-pin-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:800}
.map-cluster{border-style:dashed}.map-pin.selected{background:var(--brand-press);outline-color:var(--ink)}
.nearby-card{overflow-wrap:anywhere}.nearby-card.selected{border:2px solid var(--brand)}.nearby-card:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.nearby-card .nearby-developer,.nearby-card small{color:var(--muted)}.nearby-card a{color:var(--brand-ink)}
.map-contact-actions{display:flex;flex-wrap:wrap;margin-top:12px}.map-contact-actions a,#map-show-more{display:inline-flex;justify-content:center;align-items:center;min-height:44px;padding:10px 14px;border-radius:10px;font-size:13px;font-weight:700;background:var(--brand);color:var(--on-brand);text-decoration:none}
.map-developer-logo{width:104px;height:40px;object-fit:contain;background:var(--gray-0);padding:5px;margin-bottom:12px}.map-facts{display:flex;flex-wrap:wrap;gap:6px}.map-facts span{padding:5px 8px;border:1px solid var(--line);border-radius:16px;font-size:12px}.developer-logo img{width:104px;height:40px;object-fit:contain}
.map-list-controls #map-show-more,.map-list-controls #map-show-less{width:auto;min-height:44px;margin:0;padding:10px 18px;background:var(--paper);color:var(--brand-ink);border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer}
.map-controls button { min-width: 44px; min-height: 44px; }
.contact-request input:not([type=checkbox]), .contact-request form select, .contact-request form textarea { font-size: 16px; min-height: 44px; }
.contact-request input[type=checkbox] { min-width: 20px; min-height: 20px; vertical-align: middle; }
.contact-request .contact-consent { min-height: 44px; }
.contact-request{width:min(480px,calc(100% - 24px));max-height:85dvh;overflow:auto;border:1px solid var(--line);border-radius:var(--r-md);padding:24px;background:var(--paper);color:var(--ink);box-shadow:var(--shadow-pop)}.contact-request::backdrop{background:var(--overlay)}.contact-request h2{font-size:23px}.contact-request label{display:grid;gap:6px;margin:12px 0;font-size:14px}.contact-request input,.contact-request textarea,.contact-request select{width:100%;padding:10px;border-radius:8px;border:1px solid var(--line);font:inherit;background:var(--paper);color:var(--ink)}.contact-request p{font-size:13px;line-height:1.8}.contact-request button{min-height:44px;border:0;padding:10px 16px;border-radius:9px;background:var(--brand);color:var(--on-brand);cursor:pointer}.contact-request [data-contact-close]{float:right;font-size:22px}.contact-request .contact-consent{display:block;line-height:1.8}.contact-request input[type=checkbox]{width:auto}.contact-request a{color:var(--brand-ink);display:inline-block;padding:10px}.contact-honeypot{position:absolute!important;left:-9999px;width:1px!important}
.place-icon{width:16px;height:16px;flex:none;color:var(--brand-ink)}
.map-places{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.map-places h3{display:flex;align-items:center;gap:8px;font-size:19px;margin:0 0 10px}
.map-places p{font-size:13px;line-height:1.7;margin:8px 0}
.place-categories{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px;margin:12px 0}
.place-categories a{display:flex;align-items:center;gap:9px;min-height:44px;padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);text-decoration:none;font:600 13px/1.4 var(--font-body),sans-serif}
.place-categories a span:first-of-type{flex:1}
.place-categories a:hover{border-color:var(--brand);color:var(--brand-ink)}
.map-fact-group{margin-top:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.map-fact-group summary{display:flex;align-items:center;gap:8px;box-sizing:border-box;min-height:42px;padding:9px 11px;cursor:pointer;font-size:13px;font-weight:600;list-style:none}
.map-fact-group summary::-webkit-details-marker{display:none}
.map-fact-group summary::after{content:"\25be";margin-inline-start:auto;font-size:13px;line-height:1;color:var(--muted)}
.map-fact-group[open] summary::after{content:"\25b4"}
.map-fact-group summary b{color:var(--muted)}
.map-fact-group ul{margin:0;padding:0 11px 10px;list-style:none}
.map-fact-group li{display:flex;align-items:flex-start;gap:8px;margin:8px 0;font-size:13px;line-height:1.6}
.map-empty-facts{margin:10px 0 0;font-size:12px;color:var(--muted)}
@media(max-width:800px){.place-categories{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}

/* ============================================================================
   Appearance control — light / dark / system
   A single trigger plus a menu rather than a three-up segment: the header
   already carries brand, language, CTA and the mobile menu button, and a
   segment wide enough for three labelled targets pushed the 320px layout into
   horizontal overflow. The menu also gives each mode a real label, which the
   Arabic dictionary can translate; an icon-only segment could not.
   ============================================================================ */
.theme-control { position: relative; display: inline-flex; }
.theme-trigger { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color var(--dur-2), background var(--dur-2); }
.theme-trigger:hover { border-color: var(--line-strong); background: var(--surface-inset); }
.theme-trigger svg { width: 19px; height: 19px; }
/* Only the glyph for the active mode is rendered; the other two stay in the
   DOM so the button never reflows while switching. */
.theme-trigger [data-theme-icon] { display: none; }
:root[data-theme-mode="light"] .theme-trigger [data-theme-icon="light"],
:root[data-theme-mode="dark"] .theme-trigger [data-theme-icon="dark"],
:root[data-theme-mode="system"] .theme-trigger [data-theme-icon="system"] { display: block; }
.theme-menu { position: absolute; inset-inline-end: 0; top: 52px; z-index: 60; display: grid; gap: 2px; min-width: 186px; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-soft); }
.theme-menu-title { padding: 6px 10px 8px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.theme-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 11px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); font-size: 13px; font-weight: 600; text-align: start; cursor: pointer; }
.theme-option:hover { background: var(--surface-inset); }
.theme-option svg { width: 17px; height: 17px; color: var(--muted); }
.theme-option[aria-checked="true"] { background: var(--brand-soft); color: var(--brand-soft-ink); font-weight: 700; }
.theme-option[aria-checked="true"] svg { color: var(--brand-ink); }
.theme-option-check { margin-inline-start: auto; opacity: 0; }
.theme-option[aria-checked="true"] .theme-option-check { opacity: 1; }
/* Backend switch: when the Control Center pins the published theme to one
   mode, the whole control is removed rather than shown-but-inert. */
.theme-control[hidden] { display: none; }
.mobile-nav .theme-control { grid-column: 1 / -1; }
.mobile-nav .theme-trigger { width: auto; min-height: 48px; padding: 0 16px; border-radius: var(--r-pill); gap: 9px; font-weight: 600; }
.mobile-nav .theme-menu { inset-inline: 0; }

::selection { background: var(--brand); color: var(--on-brand); }
/* Cross-fade the token swap so switching modes reads as one change of light
   rather than a hard repaint. Opt-in per property: a blanket transition on
   `all` would animate transforms and shadows mid-scroll. */
@media (prefers-reduced-motion: no-preference) {
  :root.theme-switching, :root.theme-switching body,
  :root.theme-switching .site-header, :root.theme-switching .unit-card,
  :root.theme-switching .feature-panel, :root.theme-switching .assistant-panel,
  :root.theme-switching .theme-menu, :root.theme-switching .theme-trigger,
  :root.theme-switching .search-dock, :root.theme-switching .recommendation-form {
    transition: background-color var(--dur-3) var(--ease), color var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease);
  }
}
/* Icon-only in the header row, which is already crowded at 320px; labelled in
   the mobile drawer, where there is room and no other affordance explains it. */
.theme-trigger-label { display: none; }
.mobile-nav .theme-trigger-label { display: inline; }

/* ============================================================================
   Conversion surfaces: hero action, choice groups, search dock, voice states.
   Appended last on purpose -- it adds new selectors and restates its own
   reduced-motion rules rather than relying on the earlier blanket block.
   ============================================================================ */

/* The hero copy column used to end on a stat row, leaving the search dock at
   the foot of the section as the only thing to act on. */
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 30px; }
.hero-cta .button { min-height: 52px; padding: 0 24px; font-size: 15px; }
.hero-cta svg { width: 18px; transition: transform var(--dur-2) var(--ease); }
.hero-cta .button:hover svg { transform: translateX(3px); }

/* The intent question is no longer a <label for> pointing at a hidden input,
   so it needs the styling the label used to carry. */
.form-step .form-step-label { display: block; font-family: var(--font-heading), "Space Grotesk", sans-serif; font-size: 18px; font-weight: 700; }

/* Selection is already carried by aria-checked; this makes it visible without
   relying on the fill colour alone. */
.choice-row button[role="radio"] { position: relative; transition: background var(--dur-2), border-color var(--dur-2), color var(--dur-2); }
.choice-row button[role="radio"][aria-checked="true"]::after { content: ""; position: absolute; inset-inline: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: currentColor; opacity: .55; }

/* Show which field of the dock has focus: the cells are divided by hairlines
   only, so a focused input was otherwise indistinguishable from its neighbours. */
.search-dock label:focus-within { background: var(--surface-2); }
.search-dock label:first-of-type:focus-within { border-start-start-radius: 20px; border-end-start-radius: 20px; }

/* --- Live voice: make the orb say which direction audio is flowing --------
   Every state is already announced in #voice-status; these are the redundant
   visual channel, never the only one. */
#voice-status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 8px; border-radius: 50%; background: var(--on-contrast-faint); vertical-align: middle; }
.voice-dialog[data-voice-state="listening"] #voice-status::before,
.voice-dialog[data-voice-state="user_speaking"] #voice-status::before { background: var(--success); }
.voice-dialog[data-voice-state="assistant_speaking"] #voice-status::before { background: var(--on-contrast-brand); }
.voice-dialog[data-voice-state="thinking"] #voice-status::before,
.voice-dialog[data-voice-state="requesting_permission"] #voice-status::before,
.voice-dialog[data-voice-state="provisioning"] #voice-status::before,
.voice-dialog[data-voice-state="connecting"] #voice-status::before { background: var(--warning); }
.voice-dialog[data-voice-state="muted"] #voice-status::before,
.voice-dialog[data-voice-state="error"] #voice-status::before { background: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  /* Incoming audio pushes the ring outward; outgoing audio lights the core.
     Two different motions, so "it is hearing me" never looks like "it is
     talking to me". */
  .voice-dialog[data-voice-state="listening"] .voice-orb > span:first-child,
  .voice-dialog[data-voice-state="user_speaking"] .voice-orb > span:first-child { animation: voice-intake 1.9s var(--ease) infinite; }
  .voice-dialog[data-voice-state="user_speaking"] .voice-orb > span:first-child { animation-duration: 1.1s; border-color: var(--success); }
  .voice-dialog[data-voice-state="assistant_speaking"] .voice-orb > span:nth-child(2) { animation: voice-output 1.5s var(--ease) infinite; }
  .voice-dialog[data-voice-state="thinking"] .voice-orb > span:first-child { border-style: dashed; border-color: var(--warning); animation: voice-thinking 3.4s linear infinite; }
}
@keyframes voice-intake { 0%, 100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.16); opacity: 0; } }
@keyframes voice-output { 0%, 100% { box-shadow: 0 0 44px rgba(217,31,38,.42); } 50% { box-shadow: 0 0 82px rgba(255,155,157,.72); } }
@keyframes voice-thinking { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .hero-cta .button:hover svg { transform: none; }
  .voice-orb > span { animation: none !important; }
}

@media (max-width: 560px) {
  /* Full-width stacked actions: two pill buttons side by side fall below the
     44px touch target once the viewport is this narrow. */
  .hero-cta { gap: 10px; margin-bottom: 24px; }
  .hero-cta .button { width: 100%; }
  /* At this width the search dock sits directly beneath the hero copy, so
     "Browse homes" and the dock's "Search properties" become two adjacent red
     primaries competing for the same intent. The dock is the better control of
     the two -- it can carry a query -- so the duplicate stands down and the
     recommendation CTA remains as the one secondary action. */
  .hero-cta [data-scroll="units"] { display: none; }
}

/* The dock is absolutely positioned at bottom:34px and is 106px tall, so the
   hero has to reserve 140px plus breathing room. It previously reserved 126px,
   which only looked right because the copy column was shorter than the dock. */
@media (min-width: 821px) {
  .hero { padding-bottom: 172px; }
}

/* Bounded discovery pages and source transparency. */
.catalog-pagination { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center; margin-block:20px; }
.catalog-pagination[hidden] { display:none; }
.catalog-pagination select { max-width:100%; min-height:44px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); color:var(--ink); padding:8px 12px; font:inherit; }
.catalog-pagination button,.show-more-row button { min-height:44px; }
.catalog-pagination button:disabled { opacity:.45; cursor:default; }
.voice-sources { max-height:180px; overflow:auto; text-align:start; font-size:12px; padding:10px; }
.voice-sources a { display:block; text-decoration:underline; overflow-wrap:anywhere; margin-block:6px; }
.voice-sources iframe { width:100%; border:0; min-height:90px; background:white; }

/* Voice connection details. A phone has no console, so when a session fails
   silently this is the only way a visitor can tell us which boundary broke. */
.voice-diagnostics { margin-top: 18px; text-align: start; font-size: 12px; }
.voice-diagnostics summary { min-height: 44px; display: flex; align-items: center; color: var(--on-contrast-soft); cursor: pointer; }
.voice-diagnostics pre { max-height: 190px; margin: 8px 0; padding: 10px 12px; overflow: auto; border-radius: var(--r-sm); background: var(--contrast-fill); color: var(--on-contrast); font-size: 11px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.voice-diagnostics button { min-height: 44px; padding: 0 14px; border: 1px solid var(--on-media-line); border-radius: var(--r-pill); background: transparent; color: var(--on-contrast); font-size: 12px; font-weight: 700; cursor: pointer; }

/* --- Contact request dialog: inline errors on a dark surface -------------- */
.contact-request .field { display: grid; gap: 6px; margin: 12px 0; font-size: 14px; }
.contact-request .field label { margin: 0; }
.contact-request .field-error,
.contact-request .error-summary { color: var(--on-contrast-brand); }
.contact-request .field-error { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.5; }
.contact-request .field-error::before { content: "! "; font-weight: 800; }
.contact-request input[aria-invalid="true"],
.contact-request select[aria-invalid="true"],
.contact-request textarea[aria-invalid="true"] { outline: 2px solid var(--on-contrast-brand); outline-offset: 1px; }
.contact-request .error-summary { margin: 14px 0 0; padding: 13px 15px; border: 2px solid var(--on-contrast-brand); border-radius: var(--r-sm); background: rgba(255,122,125,.12); }
.contact-request .error-summary h3 { margin: 0 0 8px; font-size: 15px; color: var(--on-contrast); }
.contact-request .error-summary ul { margin: 0; padding-inline-start: 20px; }
.contact-request .error-summary li { margin: 4px 0; line-height: 1.6; }
.contact-request .error-summary a { display: inline; padding: 0; color: var(--on-contrast-brand); text-decoration: underline; text-underline-offset: 3px; }
.contact-request #contact-phone-note { font-size: 12px; color: var(--on-contrast-soft); }

/* Listing payment evidence: unit facts and project offers retain their scope. */
.unit-card { display: flex; flex-direction: column; min-width: 0; }
.unit-media { height: auto; aspect-ratio: 16 / 10; flex: none; }
.unit-image-link { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 14px; }
.unit-image-link > span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--glass); color: var(--ink); font-size: 12px; font-weight: 700; backdrop-filter: blur(8px); }
.unit-image-link svg { width: 16px; height: 16px; }
.unit-image-link:focus-visible { outline: 3px solid var(--brand-ink); outline-offset: -5px; }
.unit-badges { pointer-events: none; max-width: calc(100% - 115px); }
.unit-body { flex: 1; display: flex; flex-direction: column; padding: 20px; }
.unit-location { flex-wrap: wrap; font-size: 12px; }
.unit-specs { flex-wrap: wrap; gap: 10px 16px; }
.unit-price { align-items: start; padding-top: 16px; }
.unit-price b { font-size: clamp(21px, 2vw, 26px); overflow-wrap: anywhere; }
.unit-price small { font-size: 10px; }
.unit-payment { margin-top: 14px; font-variant-numeric: tabular-nums; }
.unit-payment-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); }
.unit-payment-facts > div { min-width: 0; display: grid; align-content: start; gap: 4px; }
.unit-payment small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.unit-payment strong { color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
.unit-payment-facts span { color: var(--ink-soft); font-size: 12px; overflow-wrap: anywhere; }
.unit-plan-option { display: grid; gap: 4px; margin-top: 10px; padding-inline-start: 12px; border-inline-start: 3px solid var(--brand); }
.unit-terms-source { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.unit-more-plans { display: inline-block; margin-top: 10px; font-size: 12px; }
.unit-freshness { margin-top: auto; padding-top: 14px; font-size: 10px; line-height: 1.6; }
@media (max-width: 400px) { .unit-body { padding: 15px; } .unit-payment-facts { gap: 8px; padding: 10px; } }