/* ============================================================
   GeoAssets Property Group
   Style .......... Exaggerated Minimalism (editorial luxury)
   Palette ........ Trust navy + premium gold
   Type ........... Playfair Display / Inter, with Noto Serif &
                    Noto Sans for Georgian and Arabic
   Written with CSS logical properties throughout so the whole
   layout mirrors automatically when <html dir="rtl"> is set.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  /* navy carries authority; gold is the accent, never the field */
  --brand:        #0f172a;
  --brand-600:    #1e293b;
  --brand-100:    #dbe3f0;
  --ink:          #0f172a;

  /* #a16207 is the WCAG-safe gold for text and small marks;
     #c8973c is decorative only — rules, facets, large glyphs */
  --gold:         #8a5405;
  --gold-soft:    #b8862f;
  --gold-wash:    #f4ecd9;
  --accent:       #8a5405;

  --bg:           #e9edf5;
  --bg-alt:       #dfe5f0;
  --surface:      #ffffff;
  --surface-2:    #e4eaf4;
  --text:         #0f172a;
  --text-soft:    #4d5c72;
  --line:         #d2dbe9;
  --line-strong:  #adbbd0;

  --footer-bg:    #0b1220;
  --footer-text:  #c3cddc;

  --shadow-sm: 0 1px 2px rgba(15,23,42,.07);
  --shadow-md: 0 6px 22px rgba(15,23,42,.10);
  --shadow-lg: 0 26px 64px rgba(15,23,42,.16);

  /* squarer than the old build — editorial, not app-like */
  --r-sm: 3px;
  --r:    6px;
  --r-lg: 10px;
  --r-pill: 999px;

  --container: 1240px;
  --header-h: 80px;

  --font:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(.22,.7,.31,1);
  color-scheme: light;
}

html[data-theme="dark"] {
  --brand:        #f8fafc;
  --brand-600:    #e2e8f0;
  --brand-100:    #1a2438;
  --ink:          #f8fafc;

  --gold:         #d9a441;
  --gold-soft:    #d9a441;
  --gold-wash:    #1d1a12;
  --accent:       #d9a441;

  --bg:           #080d16;
  --bg-alt:       #0c121e;
  --surface:      #101827;
  --surface-2:    #17202f;
  --text:         #e8edf5;
  --text-soft:    #94a3b8;
  --line:         #1e2836;
  --line-strong:  #2c3a4d;

  --footer-bg:    #05090f;
  --footer-text:  #93a2b6;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 6px 20px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6);
  color-scheme: dark;              /* dark select popups + scrollbars */
}

/* Per-script faces. Playfair and Inter cover Latin and Cyrillic;
   Georgian and Arabic get Noto equivalents so the serif/sans
   pairing survives in every language. */
html[lang="ka"] { --font: 'Noto Sans Georgian', system-ui, sans-serif;
                  --display: 'Noto Serif Georgian', Georgia, serif; }
html[lang="ar"] { --font: 'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif;
                  --display: 'Noto Naskh Arabic', Georgia, serif; }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* Any component rule that sets `display` outranks the browser's own
   [hidden] rule, which silently leaves "hidden" elements holding their
   space. Stating it once here keeps `hidden` meaning hidden everywhere. */
[hidden] { display: none !important; }
html {
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + 16px);
  /* the closed off-canvas drawer sits just outside the viewport and is
     position:fixed — the root must clip or the page gains a scrollbar.
     hidden first, clip second: clip is newer but does not break sticky. */
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button, [role="button"], summary { background: none; border: 0; cursor: pointer; }
select, label.field { cursor: pointer; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
}

/* Georgian is not Latin and cannot be set like it. Its letters carry deep
   descenders (ვ, ყ, ც, ჯ) and tall ascenders (ბ, ლ, ჟ) at the same time, so a
   1.12 leading that suits Playfair has them colliding line to line — which is
   what made the homepage headline look broken. It also has no capitals, so
   negative tracking only jams the forms together. */
html[lang="ka"] h1,
html[lang="ka"] h2,
html[lang="ka"] h3 { line-height: 1.34; letter-spacing: 0; }
html[lang="ka"] .hero__title { letter-spacing: 0; line-height: 1.28; }

/* Arabic joins its letters, so tracking pulls the joins apart. */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 { line-height: 1.5; letter-spacing: 0; }
h4 { font-weight: 600; line-height: 1.3; }

.container { width: min(100% - 44px, var(--container)); margin-inline: auto; }

/* ---------- svg icons ---------- */
.ico {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
[dir="rtl"] .ico--prev, [dir="rtl"] .ico--next { transform: scaleX(-1); }

/* ---------- the eyebrow: gold rule + spaced caps ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-block-end: 18px;
  font-family: var(--font);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: ''; inline-size: 28px; block-size: 1px;
  background: var(--gold-soft); flex: none;
}
.section__head--center .eyebrow::after {
  content: ''; inline-size: 28px; block-size: 1px;
  background: var(--gold-soft); flex: none;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: var(--r);
  font-size: .84rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s, border-color .2s,
              transform .2s var(--ease), box-shadow .2s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: var(--bg); }
.btn--primary:hover { background: var(--gold); color: #fff; }
html[data-theme="dark"] .btn--primary:hover { color: #0b0f17; }
.btn--ghost { border: 1px solid var(--line-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--brand); background: var(--brand); color: var(--bg); }
.btn--block { inline-size: 100%; }
/* A button must never inherit a rule meant for the links around it — in the
   mobile drawer the nav links carry a bottom border, and anything similar
   landing on the call-to-action reads as a stray line across it. */
.nav__cta { border: 0; text-decoration: none; }
.nav__cta::after, .nav__cta::before { content: none; }
.btn--sm { min-block-size: 44px; padding: 10px 18px; font-size: .74rem; }

.icon-btn {
  display: inline-grid; place-items: center;
  inline-size: 44px; block-size: 44px; border-radius: var(--r);
  color: var(--text-soft); transition: background .18s, color .18s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn--round { border: 1px solid var(--line-strong); inline-size: 46px; block-size: 46px; }
.icon-btn--round:hover { border-color: var(--gold); color: var(--gold); }

/* language menu */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-block-size: 44px; padding: 8px 12px; border-radius: var(--r);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-soft);
  transition: background .18s, color .18s;
}
.lang__btn:hover { background: var(--surface-2); color: var(--text); }
.lang__btn .ico--chev { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.lang.is-open .lang__btn .ico--chev { transform: rotate(180deg); }
.lang__menu {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0;
  min-inline-size: 200px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s var(--ease), visibility .18s;
  z-index: 120;
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; }
.lang__opt {
  display: flex; align-items: center; gap: 10px; inline-size: 100%;
  padding: 10px 12px; border-radius: var(--r-sm);
  text-align: start; font-size: .9rem; color: var(--text);
  transition: background .15s;
}
.lang__opt:hover { background: var(--surface-2); }
.lang__opt.is-active { background: var(--gold-wash); color: var(--gold); font-weight: 600; }
.lang__opt .flag { font-size: 1.05rem; line-height: 1; }
.lang__opt .code { margin-inline-start: auto; font-size: .7rem; letter-spacing: .1em; color: var(--text-soft); }

/* ---------- currency switcher ---------- */
.cur { position: relative; }
.cur__btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-block-size: 44px; padding: 8px 12px; border-radius: var(--r);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-soft);
  transition: background .18s, color .18s;
}
.cur__btn:hover { background: var(--surface-2); color: var(--text); }
.cur__btn .ico--chev { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.cur.is-open .cur__btn { background: var(--surface-2); color: var(--text); }
.cur.is-open .cur__btn .ico--chev { transform: rotate(180deg); }
.cur__menu {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0;
  min-inline-size: 232px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s var(--ease), visibility .18s;
  z-index: 120;
}
.cur.is-open .cur__menu { opacity: 1; visibility: visible; transform: none; }
.cur__menu button {
  display: flex; align-items: center; gap: 10px; inline-size: 100%;
  min-block-size: 44px; padding: 10px 12px; border-radius: var(--r-sm);
  text-align: start; font-size: .9rem; font-weight: 600; color: var(--text);
  transition: background .15s;
}
.cur__menu button:hover { background: var(--surface-2); }
.cur__menu button.is-on { background: var(--gold-wash); color: var(--gold); }
.cur__menu button b { font-size: 1.05rem; inline-size: 15px; text-align: center; }
.cur__menu button span {
  margin-inline-start: auto; font-size: .74rem; font-weight: 400;
  color: var(--text-soft); text-transform: none; letter-spacing: 0;
}
.cur__menu button.is-on span { color: var(--gold); }
.cur__note {
  padding: 9px 12px 5px; margin-block-start: 4px;
  border-block-start: 1px solid var(--line);
  font-size: .7rem; line-height: 1.5; color: var(--text-soft);
}

.ico--moon { display: none; }
html[data-theme="dark"] .ico--sun { display: none; }
html[data-theme="dark"] .ico--moon { display: block; }

/* ---------- header ---------- */
.header {
  position: sticky; inset-block-start: 0; z-index: 100;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  border-block-end: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.header.is-stuck { border-block-end-color: var(--line); box-shadow: var(--shadow-sm); }
.header .container { width: min(100% - 44px, 1440px); }
.header__inner { display: flex; align-items: center; gap: 18px; min-block-size: var(--header-h); flex-wrap: nowrap; }

/* ---------- logo lockup ---------- */
.logo { display: inline-flex; align-items: center; gap: 13px; flex: none;
  min-inline-size: 0; min-block-size: 44px; }
.logo__mark { display: grid; place-items: center; inline-size: 40px; block-size: 40px; color: var(--brand); flex: none; }
.logo__mark svg { width: 40px; height: 40px; }
.logo__facet { fill: var(--gold-soft); }
.logo__text {
  font-family: var(--display);
  font-size: 1.16rem; font-weight: 600; letter-spacing: -.01em;
  line-height: 1.15; white-space: nowrap; color: var(--text);
}

/* ---------- nav ---------- */
.nav { margin-inline-start: auto; display: flex; align-items: center; gap: 2px; min-inline-size: 0; }
.nav__scroll { display: contents; }
.nav__close { display: none; }
.nav__link {
  position: relative; display: inline-flex; align-items: center;
  min-block-size: 44px; padding: 10px 9px;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-soft); white-space: nowrap;
  transition: color .18s;
}
.nav__link::after {
  content: ''; position: absolute; inset-block-end: 2px;
  inset-inline: 9px; block-size: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: inline-start;
  transition: transform .25s var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--text); }
.nav__cta { display: none; }
@media (min-width: 1400px) {
  .nav__cta { display: inline-flex; margin-inline-start: 12px; }
}

/* language + theme live in the header now that the top bar is gone */
.header__tools {
  display: flex; align-items: center; gap: 2px; flex: none;
  margin-inline-start: 14px; padding-inline-start: 14px;
  border-inline-start: 1px solid var(--line);
}

.burger { display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; inline-size: 44px; block-size: 44px; margin-inline-start: auto; }
.burger span { display: block; inline-size: 22px; block-size: 1.5px; background: var(--text); transition: transform .25s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1240px) {
  .header__inner { gap: 12px; }
  .nav__link { padding-inline: 10px; font-size: .72rem; letter-spacing: .09em; }
  .nav__link::after { inset-inline: 10px; }
  .nav__cta { padding-inline: 18px; }
  .logo__text { font-size: 1.05rem; }
}

/* ============================================================
   Hero — oversized display type, generous negative space
   ============================================================ */
.hero { position: relative; padding-block: clamp(56px, 9vw, 120px) clamp(56px, 8vw, 104px); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -1; background: var(--bg-alt); }
.hero__bg::before {
  content: ''; position: absolute; inset: 0;
  /* the hero glow is decorative; a browser without color-mix just gets the
     flat panel underneath rather than a dropped background */
  background: transparent;
  background:
    radial-gradient(46% 58% at 84% 0%, color-mix(in srgb, var(--gold-soft) 15%, transparent), transparent 68%),
    radial-gradient(52% 60% at 4% 96%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 66%);
}
/* a single hairline grid — restraint, not decoration */
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 25% 100%;
  opacity: .7;
  mask-image: linear-gradient(180deg, #000, transparent 78%);
}
/* ---------- the film behind the headline ---------- */
/* Nothing here until the script decides the screen and the connection can carry
   it -- the element is inert and invisible until then, so a phone pays nothing
   for markup it will never use. */
.hero__film {
  position: absolute; inset: 0; z-index: 0;
  inline-size: 100%; block-size: 100%;
  /* The wide cut is framed a little above centre, where the buildings are; the
     upright cut is already framed on its subject, so it sits dead centre. */
  object-fit: cover; object-position: center 42%;
  opacity: 0; transition: opacity 1.1s var(--ease);
  pointer-events: none;
}
.hero__film.is-playing { opacity: 1; }
@media (max-width: 899px) { .hero__film { object-position: center center; } }

/* The veil is even, so the film reads the same on both sides, and it is dark
   rather than pale: the footage carries near-black shadows as well as white
   stone, and only a dark ground gives light type a contrast it can hold over
   both. Deepened a little towards the bottom, where the subtitle and the search
   box sit, and tinted with the brand navy rather than plain black so it stays
   this agency's hero and not a stock-footage template. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: 0; transition: opacity 1.1s var(--ease);
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, #0b1428 68%, transparent) 0%,
      color-mix(in srgb, #0b1428 70%, transparent) 52%,
      color-mix(in srgb, #0b1428 78%, transparent) 100%);
}
.hero.has-film .hero__scrim { opacity: 1; }

/* The dark theme needs no separate treatment any more -- the hero is dark while
   the film is on, whichever theme the reader chose. It only takes the footage
   down a little further so the two rooms match. */
html[data-theme="dark"] .hero__film { filter: brightness(.72) saturate(.92); }

/* Light type, and only while the film is actually playing. Everyone who never
   receives the film keeps the pale hero exactly as it was. */
.hero.has-film .hero__title { color: #f2f6fd; }
.hero.has-film .hero__sub   { color: rgba(238, 244, 253, .86); }
/* A pale champagne, not the brand's deep gold: over film the eyebrow lands on
   white stone as often as on shadow, and the deep one disappears there. */
.hero.has-film .eyebrow     { color: #f0d9a8; }
.hero.has-film .eyebrow::before,
.hero.has-film .eyebrow::after { background: #f0d9a8; opacity: .7; }
/* The counters are the last block inside the hero, not a section of their own,
   so they turn with it. The rule above them was a hairline drawn for a pale
   page; on the film it needs to be light or it disappears. */
.hero.has-film .stats     { border-block-start-color: rgba(238, 244, 253, .24); }
.hero.has-film .stat__num { color: #f2f6fd; }
.hero.has-film .stat span { color: rgba(238, 244, 253, .88); }

/* The gold wash was drawn for a pale ground; over the film it only muddies it. */
.hero.has-film .hero__bg::before { opacity: .35; }
.hero.has-film .hero__bg::after  { opacity: .18; }

/* The gold wash and the hairline grid stay on top of the film: they are what
   makes it this site's hero rather than any agency's stock footage. */
.hero__bg::before { z-index: 2; }
.hero__bg::after  { z-index: 3; }

.hero__inner { text-align: start; max-inline-size: 1000px; }
.hero__title {
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  font-weight: 600;
  letter-spacing: -.035em;
  max-inline-size: 15ch;
}
.hero__sub {
  margin-block-start: 26px; max-inline-size: 56ch;
  color: var(--text-soft); font-size: clamp(1rem, 1.25vw, 1.1rem);
}

/* search box */
.searchbox { margin-block-start: 44px; }

/* ============================================================
   Compact search bar
   ------------------------------------------------------------
   One line: what you type, the control that opens everything else, and the
   button that takes you to the results. The old block ran to three rows of
   paired menus and ate most of the hero to say what fits here in one.
   ============================================================ */
.sbar {
  display: flex; align-items: stretch; gap: 10px;
  padding: 10px;
}

/* The typed field takes whatever the two buttons do not. */
.sbar__q {
  position: relative; flex: 1 1 auto; min-inline-size: 0;
  display: flex; align-items: center; gap: 12px;
  padding-inline: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .18s, background .18s;
}
.sbar__q:hover { border-color: var(--line-strong); }
.sbar__q:focus-within { border-color: var(--gold); background: var(--surface); }
.sbar__ico {
  inline-size: 19px; block-size: 19px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--text-soft); transition: color .18s;
}
.sbar__q:focus-within .sbar__ico { color: var(--gold); }
.sbar__q input {
  inline-size: 100%; min-inline-size: 0; min-block-size: 52px;
  border: 0; background: transparent; color: var(--text);
  font-family: inherit; font-size: 1rem; font-weight: 500;
}
.sbar__q input:focus { outline: none; }
.sbar__q input::placeholder { color: var(--text-soft); font-weight: 400; }

/* The control everything else lives behind. Square, so it reads as a tool
   rather than a second Search. */
.sbar__filter {
  position: relative; flex: none;
  inline-size: 54px; min-block-size: 54px;
  display: grid; place-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text);
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}
.sbar__filter .ico {
  inline-size: 21px; block-size: 21px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.sbar__filter:hover { border-color: var(--line-strong); background: var(--surface-2); }
.sbar__filter:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Filters that are on say so on the control itself — the whole point of
   folding them away is lost if you cannot tell they are there. */
.sbar__filter.is-on { border-color: var(--gold); color: var(--gold); }
.sbar__badge {
  position: absolute; inset-block-start: -7px; inset-inline-end: -7px;
  min-inline-size: 20px; block-size: 20px; padding-inline: 5px;
  display: grid; place-items: center;
  background: var(--gold); color: #fff;
  border: 2px solid var(--surface); border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

.sbar__go {
  flex: none; gap: 10px;
  padding-inline: 26px; min-block-size: 54px;
  border-radius: var(--r);
}
.sbar__go .ico { inline-size: 18px; block-size: 18px; }

/* The chip row sits under the bar rather than inside it: it is the record of
   what the panel was told, and it belongs with the results, not the controls. */
.filterbar > .qchips {
  padding: 12px 12px 14px;
  border-block-start: 1px solid var(--line);
}

@media (max-width: 700px) {
  .sbar { flex-wrap: wrap; gap: 8px; }
  .sbar__q { flex: 1 1 100%; }
  /* The two controls share the second row rather than crowding the input:
     a long field pinched between two squares is what makes a phone feel tight. */
  .sbar__filter { flex: 0 0 54px; }
  .sbar__go { flex: 1 1 auto; }
}

/* ============================================================
   Detailed filter panel
   ============================================================ */
.modal__panel--filter {
  inline-size: min(680px, 100%);
  max-block-size: min(88vh, 860px);
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
.fpanel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 26px; border-block-end: 1px solid var(--line);
}
.fpanel__head h2 {
  font-family: var(--display); font-size: 1.32rem; font-weight: 600;
  letter-spacing: -.01em; margin: 0;
}
.modal__panel--filter .modal__close { position: static; flex: none; }

/* `min-block-size: 0` is the whole reason the footer stops covering the last
   group. A flex item defaults to min-height:auto, which refuses to shrink
   below its content — so the body kept its full height, pushed the panel past
   its own max-height, and the Area boxes ended up underneath the footer where
   they could not be clicked at all. */
.fpanel__body { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; padding: 8px 26px 26px; }
.fgroup { padding-block: 20px; }
.fgroup + .fgroup { border-block-start: 1px solid var(--line); }
.fgroup__h {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-soft); margin: 0 0 14px;
}
/* A group the current type has no use for. Dimmed and inert rather than
   removed: hiding it would make the panel jump and imply the filter itself
   had gone, when the type that brings it back is one pill away. */
.fgroup.is-off { opacity: .4; }
.fgroup.is-off .fpill { cursor: not-allowed; }

.fpills { display: flex; flex-wrap: wrap; gap: 9px; }
.fpill {
  min-block-size: 44px; padding: 10px 18px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-family: inherit; font-size: .9rem; font-weight: 500;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.fpill:hover:not(:disabled) { border-color: var(--line-strong); }
.fpill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* The selected pill is named in gold and ringed in gold. Weight changes too,
   so the row still reads for anyone who cannot separate the two hues. */
/* Counts read as a row of numbers, so they get an even width and sit closer
   together than the word pills — ten of them on a phone would otherwise wrap
   into a paragraph. */
.fpills--num { gap: 7px; }
.fpill--num {
  min-inline-size: 52px; padding-inline: 10px;
  text-align: center; font-variant-numeric: tabular-nums;
}
@media (max-width: 620px) {
  .fpill--num { min-inline-size: 46px; }
}

.fpill.is-on, .fpill.is-active {
  border-color: var(--gold); color: var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  font-weight: 600;
}

/* Ranges: two boxes and the unit, the same grammar as the bar they came from. */
.frange { display: flex; align-items: center; gap: 12px; max-inline-size: 460px; }
.frange__side {
  flex: 1 1 0; min-inline-size: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px; min-block-size: 48px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .18s;
}
.frange__side:focus-within { border-color: var(--gold); }
.frange__side input {
  inline-size: 100%; min-inline-size: 0; padding: 0; border: 0;
  background: transparent; color: var(--text);
  font-family: inherit; font-size: 1rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.frange__side input:focus { outline: none; }
.frange__side input::placeholder { color: var(--text-soft); font-weight: 400; }
.frange__unit { font-style: normal; flex: none; color: var(--text-soft); font-size: .85rem; }
.frange__dash { flex: none; color: var(--text-soft); }

.fpanel__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 26px; border-block-start: 1px solid var(--line);
  background: var(--surface);
}
.fpanel__clear {
  min-block-size: 44px; padding: 10px 4px;
  color: var(--text-soft); font-family: inherit; font-size: .92rem; font-weight: 500;
  cursor: pointer; transition: color .18s;
}
.fpanel__clear:hover { color: var(--text); }
.fpanel__clear:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fpanel__apply { gap: 9px; padding-inline: 30px; min-block-size: 48px; }

@media (max-width: 620px) {
  .fpanel__head, .fpanel__foot, .fpanel__body { padding-inline: 18px; }
  .frange { max-inline-size: none; }
}

/* ============================================================
   Filter bar — one component, used by the hero search and the
   project filters so both look and behave identically.
   ============================================================ */
.filterbar {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  /* not `hidden`: the styled dropdown has to be able to hang below the bar.
     The only child that paints into a corner is the search button, and it
     rounds its own. */
  overflow: visible;
}

.searchbox__tabs { display: flex; border-block-end: 1px solid var(--line); }
.tab {
  padding: 16px 30px;
  font-size: .76rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-soft);
  border-block-end: 2px solid transparent;
  transition: color .18s, border-color .18s, background .18s;
}
.tab:hover { color: var(--text); background: var(--surface-2); }
.tab.is-active { color: var(--text); border-block-end-color: var(--gold); }

/* a quiet icon per field, sitting behind the value */
.field__ico {
  position: absolute; inset-block-start: 18px; inset-inline-end: 22px;
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--line-strong); pointer-events: none;
  transition: color .2s var(--ease), transform .2s var(--ease);
}

/* ---------- fields ---------- */
.field { display: flex; flex-direction: column; gap: 7px; min-inline-size: 0; }
.field__label {
  font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-soft);
}
.field select, .field input, .field textarea {
  inline-size: 100%; padding: 13px 15px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r); font-size: .95rem;
  transition: border-color .18s, background .18s;
  appearance: none;
}
.field textarea { resize: vertical; min-block-size: 108px; line-height: 1.6; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b81' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
  padding-inline-end: 36px;
}
[dir="rtl"] .field select { background-position: left 12px center; }
.field select:focus, .field input:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
}
/* the dropdown popup is drawn by the OS — name the colours explicitly */
select option, select optgroup {
  background-color: var(--surface);
  color: var(--text);
}
.field.has-error select, .field.has-error input, .field.has-error textarea { border-color: #dc2626; }
.field__err { display: none; font-style: normal; font-size: .8rem; color: #dc2626; }
.field.has-error .field__err { display: block; }
.field--compact select { padding: 10px 14px; padding-inline-end: 34px; font-size: .9rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ============================================================
   Pretty select — a listbox we can actually style, standing in for
   the operating system's own dropdown. See assets/js/select.js.
   ============================================================ */
.psel { position: relative; display: block; inline-size: 100%; min-inline-size: 0; }

/* The real <select> stays in the DOM and keeps holding the value, but must
   never be reachable — any click landing on it opens the OS list as well. */
.psel__native {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  pointer-events: none;
}

.psel__btn {
  inline-size: 100%; min-block-size: 46px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px; text-align: start;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r); color: var(--text);
  font-family: inherit; font-size: .95rem; cursor: pointer;
  transition: border-color .18s, background .18s;
}
.psel__btn:hover { border-color: var(--line-strong); }
.psel__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.psel.is-open .psel__btn { border-color: var(--gold); }

/* A field the current selection has no use for — Land carries no status or
   grade — rather than one that is merely empty. Dimmed and inert, not
   hidden: hiding it would make the layout jump and imply the field itself
   had vanished, when the type it needs is one click away. */
.psel--disabled .psel__btn { opacity: .45; cursor: not-allowed; }
.psel--disabled .psel__btn:hover { border-color: var(--line); }
.psel__value { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psel__caret {
  inline-size: 16px; block-size: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--text-soft);
  transition: transform .22s var(--ease), color .18s;
}
.psel.is-open .psel__caret { transform: rotate(180deg); color: var(--gold); }

/* the list itself — the part the OS would never let us style */
.psel__list {
  position: absolute; z-index: 90;
  inset-inline: 0; inset-block-start: calc(100% + 8px);
  max-block-size: 262px; overflow-y: auto; overscroll-behavior: contain;
  padding: 7px;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 44px rgba(9, 15, 28, .22), 0 2px 8px rgba(9, 15, 28, .10);
  animation: pselIn .16s var(--ease);
}
.psel--up .psel__list { inset-block-start: auto; inset-block-end: calc(100% + 8px); }
@keyframes pselIn { from { opacity: 0; transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) {
  .psel__list { animation: none; }
  .psel__caret { transition: none; }
}

.psel__opt {
  min-block-size: 44px;                    /* stays a real tap target */
  display: flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: var(--r);
  font-size: .93rem; text-align: center; cursor: pointer;
  border: 1px solid transparent;
  transition: background .13s, color .13s, border-color .13s;
}
.psel__opt + .psel__opt { margin-block-start: 3px; }
.psel__opt.is-active {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
}
.psel__opt.is-on {
  color: var(--gold); font-weight: 600;
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 11%, transparent);
}
/* visible to screen readers, not on screen */
.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- stats ---------- */
.stats {
  margin-block-start: 56px; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; padding-block-start: 40px; border-block-start: 1px solid var(--line);
}
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat__num {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 600;
  letter-spacing: -.03em; line-height: 1; color: var(--text);
}
.stat span {
  font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft);
}

/* ============================================================
   Sections
   ============================================================ */
.section { padding-block: clamp(64px, 9vw, 120px); }
.section--alt { background: var(--bg-alt); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-block-end: 44px; flex-wrap: wrap; }
.section__head--center { justify-content: center; text-align: center; flex-direction: column; align-items: center; }
.section__head--center > div { max-inline-size: 62ch; }
.section__title { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.section__sub { margin-block-start: 16px; color: var(--text-soft); max-inline-size: 60ch; }
.section__foot { display: flex; justify-content: center; margin-block-start: 52px; }
.sortwrap { min-inline-size: 230px; }

/* ---------- filter chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 34px; }
.chip {
  display: inline-flex; align-items: center; min-block-size: 44px;
  padding: 10px 20px; border-radius: var(--r);
  border: 1px solid var(--line-strong); background: transparent;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-soft);
  transition: all .18s var(--ease);
}
.chip:hover { border-color: var(--brand); color: var(--text); }
.chip.is-active { background: var(--brand); border-color: var(--brand); color: var(--bg); }
.chip__count { opacity: .55; margin-inline-start: 6px; }

/* ---------- property cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 30px; }
.empty { text-align: center; padding-block: 64px; color: var(--text-soft); }

.card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card__media { position: relative; aspect-ratio: 3 / 2; background: var(--surface-2); overflow: hidden; }
.card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.img-fallback { background: linear-gradient(135deg, var(--surface-2), var(--gold-wash)); }

/* One stack in the photo's top corner holds the quality badge and the
   status tags, so they sit under each other instead of one covering the
   other — which is what happened when both claimed the same corner. */
.card__overlay {
  position: absolute; inset-block-start: 14px; inset-inline: 14px;
  z-index: 2; display: flex; flex-direction: column;
  align-items: flex-start; gap: 8px;
  padding-inline-end: 46px;            /* clear of the favourite button */
  pointer-events: none;
}
.card__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  padding: 6px 12px; border-radius: var(--r-sm);
  font-size: .64rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.95); color: #0f172a;
  backdrop-filter: blur(6px);
}
.tag--deal { background: var(--brand); color: var(--bg); }
.tag--new { background: var(--gold-soft); color: #241a06; }
.card__fav {
  position: absolute; inset-block-start: 14px; inset-inline-end: 14px;
  inline-size: 44px; block-size: 44px; display: grid; place-items: center;
  border-radius: var(--r-pill); background: rgba(255,255,255,.95);
  color: #5a6b81; backdrop-filter: blur(6px);
  transition: color .18s, transform .18s var(--ease);
}
.card__fav:hover { transform: scale(1.08); }
.card__fav .ico { width: 18px; height: 18px; }
.card__fav.is-on { color: #be123c; }
.card__fav.is-on .ico { fill: #be123c; }

/* How many photos there are, and which one is showing. Only while the reel
   is actually playing — at rest a card carries no chrome at all. */
.card__dots {
  position: absolute; inset-inline: 0; inset-block-end: 12px; z-index: 2;
  display: flex; justify-content: center; gap: 5px;
  opacity: 0; transition: opacity .2s var(--ease);
  pointer-events: none;
}
.card:hover .card__dots { opacity: 1; }
.card__dots i {
  inline-size: 5px; block-size: 5px; border-radius: 50%;
  background: rgba(255,255,255,.5);
  box-shadow: 0 1px 3px rgba(15,23,42,.45);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.card__dots i.is-on { background: #fff; transform: scale(1.4); }
/* On a pointer the dots appear while you hover. On a touch screen there is no
   hover, so they appear on the one card the reel is playing — which is also
   what tells you the card has more than one photo. */
.card.is-reeling .card__dots { opacity: 1; }

/* Step a card's photos without opening it. Pointer devices only: a phone gets
   the reel playing on its own, and two 36px targets sitting on top of a photo
   you are trying to tap would be in the way rather than useful. */
.card__nav {
  position: absolute; inset-block-start: 50%; z-index: 3;
  inline-size: 36px; block-size: 36px; translate: 0 -50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--text);
  border-radius: var(--r-pill);
  box-shadow: 0 2px 10px rgba(15, 23, 42, .22);
  opacity: 0; cursor: pointer;
  transition: opacity .18s var(--ease), background .18s;
}
.card__nav--prev { inset-inline-start: 10px; }
.card__nav--next { inset-inline-end: 10px; }
.card__nav .ico {
  inline-size: 17px; block-size: 17px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* mirrored automatically: the chevrons are drawn, not glyphs */
[dir="rtl"] .card__nav .ico { transform: scaleX(-1); }
.card:hover .card__nav { opacity: 1; }
.card__nav:hover { background: #fff; }
.card__nav:focus-visible { opacity: 1; outline: 2px solid var(--gold); outline-offset: 2px; }

/* A phone has no hover to reveal them with, so they simply stand there — and
   at 44px, because a thumb is not a mouse pointer. They sit slightly inside
   the frame so neither one lands under the grade badge or the heart. */
@media (hover: none) {
  .card__nav {
    opacity: 1;
    inline-size: 44px; block-size: 44px;
    background: rgba(255, 255, 255, .86);
  }
  .card__nav .ico { inline-size: 19px; block-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .card__nav { transition: none; }
}

/* No reel, nothing to mark. */
@media (prefers-reduced-motion: reduce) {
  .card__dots { display: none; }
}

/* The ambient reel dissolves rather than cuts; the frame underneath is already
   decoded by the time this runs, so nothing flashes through the gap. */
.card__media img { transition: opacity .15s var(--ease), transform .7s var(--ease); }
.card__media img.is-fading { opacity: 0; }

/* The photo arriving from the side, on top of the one being left behind and
   under the badges. It carries its own transform, which is why it is a
   separate element: the photo underneath is already using its own for the
   hover zoom, and one element cannot hold both. */
/* Only where it sits. The movement itself is scripted, so it cannot be
   out-ranked by the reel's own rule -- which is a class and an element, and
   would otherwise hand this copy the reel's timing instead of its own. */
.card__media img.card__slide {
  position: absolute; inset: 0; z-index: 1;
  inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .card__media img { transition: none; }
}

.card__body { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 0; flex: 1; }
.card__price {
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--display); font-size: 1.55rem; font-weight: 600;
  letter-spacing: -.02em; color: var(--text);
}
.card__price small { font-family: var(--font); font-size: .74rem; font-weight: 600; color: var(--text-soft); letter-spacing: .04em; }
.card__title { font-family: var(--font); font-size: 1rem; font-weight: 600; line-height: 1.45; }
.card__loc { display: flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--text-soft); }
.card__loc .ico { width: 14px; height: 14px; color: var(--gold); }

/* How far along the building is. The colour carries the meaning rather than
   decorating it: gold for work still in progress, navy for finished and new,
   plain grey for an older building — so the one a buyer has to plan around
   is the one that catches the eye. */
/* The facts about what a listing IS, boxed and set together. Quiet by design:
   they sit under the address and must not compete with the price above them. */
.card__marks { display: flex; flex-wrap: wrap; gap: 6px; }
.mark {
  display: inline-flex; align-items: center;
  padding: 4px 9px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-soft);
}
/* Two building ages are worth a colour: one is a warning, one is a selling
   point. The rest are neutral facts and stay neutral. */
.mark--construction { border-color: var(--gold); color: var(--gold); background: transparent; }
.mark--new { border-color: var(--brand); color: var(--brand); background: transparent; }
html[data-theme="dark"] .mark--new { border-color: var(--text); color: var(--text); }
/* The floor is a coordinate, not a category — it reads as a footnote. */
.mark--quiet { background: transparent; font-weight: 500; }
.card__meta {
  display: flex; flex-wrap: wrap; gap: 18px; margin-block-start: auto;
  padding-block: 18px; margin-block-start: 8px;
  border-block-start: 1px solid var(--line);
  font-size: .8rem; color: var(--text-soft);
}
.card__meta span { display: inline-flex; align-items: center; gap: 7px; }
.card__meta .ico { width: 15px; height: 15px; }
.card__foot { padding: 0 24px 24px; }

/* ---------- services / agents ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cards--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; background: none; border: 0; }

.svc { padding: 36px 32px; background: var(--surface); transition: background .25s; }
.svc:hover { background: var(--bg-alt); }
.svc__ico {
  display: grid; place-items: center; inline-size: 46px; block-size: 46px;
  color: var(--gold); margin-block-end: 22px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
}
.svc__ico .ico { width: 22px; height: 22px; stroke-width: 1.4; }
.svc h3 { font-family: var(--display); font-size: 1.25rem; margin-block-end: 10px; }
.svc p { color: var(--text-soft); font-size: .92rem; }

.agent {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.agent { cursor: pointer; }
.agent:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.agent:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.agent__more {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-block-size: 44px; margin-block-start: 8px;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold);
}
.agent__more .ico { width: 13px; height: 13px; transition: transform .25s var(--ease); }
.agent:hover .agent__more .ico { transform: translateX(4px); }
[dir="rtl"] .agent:hover .agent__more .ico { transform: translateX(-4px) scaleX(-1); }
.agent__img { aspect-ratio: 4/5; background: var(--surface-2); }
.agent__img img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  object-position: center 22%;      /* same reasoning as .amod__photo */
}
.agent__body { padding: 22px 18px; }
.agent__body h3 { font-family: var(--display); font-size: 1.15rem; }
.agent__role { font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); margin-block-start: 6px; }
.agent__stats { font-size: .82rem; color: var(--text-soft); margin-block-start: 10px; }
.agent__langs { display: flex; justify-content: center; gap: 5px; margin-block-start: 14px; flex-wrap: wrap; }
.agent__langs b {
  padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; color: var(--text-soft);
}
.agent__phone {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-block-size: 44px; margin-block-start: 8px;
  font-size: .84rem; font-weight: 600; color: var(--text-soft); transition: color .18s;
}
.agent__phone:hover { color: var(--gold); }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 84px); align-items: center; }
.about__media { position: relative; }
.about__media img { inline-size: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-lg); }

/* the skyscraper illustration sits on its own night-city panel, so it reads
   the same in light and dark mode */
.tower {
  position: relative; inline-size: 100%; aspect-ratio: 4/5;
  background: radial-gradient(70% 60% at 50% 35%, #14203a 0%, #0b1220 70%);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: towerRise 1.1s var(--ease) both;
}
.tower:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tower__stage {
  position: absolute; inset: 0;
  cursor: grab; touch-action: pan-y;
  display: grid; place-items: center;
}
.tower.is-turning .tower__stage { cursor: grabbing; }
.tower__stage svg { inline-size: 100%; block-size: 100%; display: block; }
.tower__hint {
  position: absolute; inset-block-end: 18px; inset-inline: 0; z-index: 2;
  text-align: center; font-size: .64rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(219,227,238,.6); pointer-events: none;
  transition: opacity .4s var(--ease);
}
@keyframes towerRise {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
}
@media (prefers-reduced-motion: reduce) { .about__tower { animation: none; } }
.ticks { display: flex; flex-direction: column; gap: 0; margin-block: 30px 34px; }
.ticks li { display: flex; align-items: flex-start; gap: 14px; font-size: .96rem; padding-block: 14px; border-block-end: 1px solid var(--line); }
.ticks li:first-child { border-block-start: 1px solid var(--line); }
.ticks .ico { width: 18px; height: 18px; color: var(--gold); margin-block-start: 4px; }

/* ---------- reviews ---------- */
.slider { position: relative; }
.slider__track { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-block-end: 8px; scrollbar-width: none; }
.slider__track::-webkit-scrollbar { display: none; }
.review {
  flex: 0 0 min(100%, 460px); scroll-snap-align: start;
  padding: 36px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 20px;
}
.review__stars { display: flex; gap: 3px; color: var(--gold-soft); }
.review__stars .ico { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.review__text { color: var(--text); font-family: var(--display); font-size: 1.08rem; line-height: 1.6; font-weight: 500; }
.review__who { display: flex; align-items: center; gap: 14px; margin-block-start: auto; padding-block-start: 8px; }
.review__who img { inline-size: 48px; block-size: 48px; border-radius: var(--r-pill); object-fit: cover; }
.review__who b { display: block; font-size: .93rem; }
.review__who span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); }
.slider__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-block-start: 34px; }
.dots { display: flex; align-items: center; gap: 7px; }
.dot {
  inline-size: 7px; block-size: 7px; box-sizing: content-box;
  padding-block: 19px;                 /* 45px tall target, 7px visual */
  background: var(--line-strong); background-clip: content-box;
  border-radius: var(--r-pill); cursor: pointer;
  transition: inline-size .25s var(--ease), background .25s;
}
.dot.is-active { inline-size: 28px; background: var(--gold); }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
.contact__list { display: flex; flex-direction: column; gap: 0; margin-block-start: 38px; }
.contact__list li { display: flex; gap: 18px; padding-block: 20px; border-block-end: 1px solid var(--line); }
.contact__list li:first-child { border-block-start: 1px solid var(--line); }
.contact__ico { display: grid; place-items: center; inline-size: 42px; block-size: 42px; flex: none; border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--gold); }
.contact__list b { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--text-soft); margin-block-end: 4px; }
.contact__list span { font-size: .96rem; color: var(--text); }
.contact__form {
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(26px, 3.5vw, 40px); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.form__ok { padding: 14px 18px; border-radius: var(--r); background: var(--gold-wash); color: var(--gold); font-size: .9rem; font-weight: 500; }
.form__ok--bad { background: #fee2e2; color: #b91c1c; }

/* Carried down from a listing when somebody books a viewing, so the agent
   receiving the enquiry knows which property it is about. */
.form__about {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--r);
  background: var(--brand-100); color: var(--brand);
  font-size: .85rem; line-height: 1.4;
}
.form__about[hidden] { display: none; }
.form__about span { flex: 1; min-inline-size: 0; }
.form__about button {
  flex: none; display: grid; place-items: center;
  inline-size: 26px; block-size: 26px; border-radius: var(--r-pill);
  color: inherit; opacity: .65; transition: opacity .16s, background .16s;
}
.form__about button:hover { opacity: 1; background: color-mix(in srgb, var(--brand) 12%, transparent); }
.form__about .ico { width: 14px; height: 14px; }
html[data-theme="dark"] .form__ok--bad { background: #3f1414; color: #fca5a5; }

/* ---------- footer ---------- */
.footer { background: var(--footer-bg); color: var(--footer-text); padding-block: 76px 0; }
.footer .logo__mark { color: #fff; }
.footer .logo__text { color: #fff; }
.footer__inner { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.5fr; gap: 48px; }
.footer__brand p { margin-block-start: 18px; font-size: .89rem; max-inline-size: 40ch; line-height: 1.7; }
.social { display: flex; gap: 8px; margin-block-start: 24px; }
.social a {
  display: grid; place-items: center; inline-size: 44px; block-size: 44px;
  border-radius: var(--r); border: 1px solid rgba(255,255,255,.16); color: #c3cddc;
  transition: all .2s;
}
.social a:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col h4 { font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #fff; margin-block-end: 6px; }
.footer__col a { font-size: .89rem; transition: color .18s; }
.footer__col a:hover { color: var(--gold-soft); }
.footer__col--wide p { font-size: .87rem; max-inline-size: 38ch; line-height: 1.7; }
.newsletter { display: flex; gap: 8px; margin-block-start: 10px; }
.newsletter input {
  flex: 1; min-inline-size: 0; padding: 13px 16px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r); font-size: .9rem; color: #fff;
}
.newsletter input::placeholder { color: #7d8ba0; }
.newsletter input:focus { outline: none; border-color: var(--gold-soft); }
.newsletter .btn--primary { background: var(--gold); color: #fff; }
.newsletter .btn--primary:hover { background: var(--gold-soft); }
.footer .form__ok { background: rgba(201,151,60,.15); color: var(--gold-soft); }
.footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-block-start: 60px; padding-block: 26px;
  border-block-start: 1px solid rgba(255,255,255,.1);
  font-size: .82rem;
}
.footer__bottom .logo__text {
  font-family: inherit; font-size: inherit; font-weight: 600;
  letter-spacing: inherit; line-height: inherit; color: inherit;
}
.footer__legal { display: flex; gap: 26px; }
.footer__legal button { font-size: inherit; color: inherit; padding: 0; transition: color .18s; }
.footer__legal button:hover { color: var(--gold-soft); }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(6,11,20,.72); backdrop-filter: blur(4px); animation: fade .25s var(--ease); }
.modal__panel {
  position: relative; inline-size: min(100%, 1000px); max-block-size: min(90vh, 920px);
  overflow-y: auto; background: var(--bg); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); animation: pop .3s var(--ease);
}
.modal__close {
  position: absolute; inset-block-start: 16px; inset-inline-end: 16px; z-index: 3;
  display: grid; place-items: center; inline-size: 44px; block-size: 44px;
  border-radius: var(--r-pill); background: rgba(255,255,255,.95); color: #0f172a;
  box-shadow: var(--shadow-sm);
}
.modal__close:hover { background: #fff; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.985); } }


.mbody { padding: clamp(26px, 3.5vw, 44px); }
.mhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-block-end: 8px; }
.mhead h2 { font-size: clamp(1.4rem, 2.8vw, 2.1rem); max-inline-size: 22ch; }
.mprice { text-align: end; }
.mprice b { display: block; font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -.02em; }
.mprice span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); }
[dir="rtl"] .mprice { text-align: start; }
.mloc { display: flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: .94rem; margin-block-end: 30px; }
.mloc .ico { color: var(--gold); }

.mspecs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; margin-block-end: 34px;
}
.mspec { background: var(--surface); padding: 20px 18px; display: flex; flex-direction: column; gap: 5px; }
.mspec b {
  font-family: var(--display); font-size: 1.2rem; font-weight: 600;
  /* "ძველი აშენებული" is one value in a 124px column. Without this it ran
     straight out of its tile instead of taking a second line. */
  min-inline-size: 0; overflow-wrap: anywhere; line-height: 1.25;
}
.mspec span {
  font-size: .66rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-soft);
  min-inline-size: 0; overflow-wrap: anywhere;
}
/* Neither script has capitals to make, and spacing the letters of a joined or
   deeply-stacked script apart only makes the label harder to read. */
html[lang="ka"] .mspec span,
html[lang="ar"] .mspec span,
html[lang="ka"] .eyebrow,
html[lang="ar"] .eyebrow,
html[lang="ka"] .mark,
html[lang="ar"] .mark { text-transform: none; letter-spacing: .02em; }

.mblock { margin-block-end: 32px; }
.mblock h3 { font-family: var(--display); font-size: 1.2rem; margin-block-end: 14px; }
.mblock p { color: var(--text-soft); }
.mfeats { display: flex; flex-wrap: wrap; gap: 8px; }
.mfeat {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border: 1px solid var(--line); border-radius: var(--r);
  font-size: .85rem;
}
.mfeat .ico { width: 14px; height: 14px; color: var(--gold); }

.magent {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 22px; border: 1px solid var(--line); border-radius: var(--r);
  margin-block-end: 26px;
}
.magent img { inline-size: 56px; block-size: 56px; border-radius: var(--r-pill); object-fit: cover; }
.magent__who b { display: block; font-size: 1rem; }
.magent__who span { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.magent__act { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.mactions { display: flex; gap: 12px; flex-wrap: wrap; margin-block-end: 32px; }

/* ============================================================
   Quality index — badge on the card, breakdown in the detail view
   ============================================================ */
:root {
  --q-navy:   #1B2A4A;
  --q-gold:   #C9A84C;
  --q-b-bg:   #E4E7EE;
  --q-c-bg:   #EDEDED;
  --q-c-text: #555555;
}

.qbadge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  line-height: 1.2; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(9, 15, 28, .22);
}
.qbadge b { font-size: .8rem; font-weight: 800; letter-spacing: .02em; }
.qbadge__star { inline-size: 12px; block-size: 12px; fill: currentColor; flex: none; }

/* Ultra luxury reads as the odd one out on purpose: it is the only tier
   that inverts to the dark brand colour. Gold on navy measures 6.4:1. */
.qbadge--aplus { background: var(--q-navy); color: var(--q-gold); border-color: var(--q-gold); }
.qbadge--a     { background: var(--q-gold); color: var(--q-navy); }   /* 6.1:1 */
.qbadge--b     { background: var(--q-b-bg); color: var(--q-navy); }   /* 11.4:1 */
.qbadge--c     { background: var(--q-c-bg); color: var(--q-c-text); } /* 7.0:1 */

/* ---------- per-listing map inside the property modal ---------- */
.mmap {
  block-size: 360px; border-radius: var(--r-lg); overflow: hidden;
  background: var(--map-sea); border: 1px solid var(--line);
}
@media (max-width: 620px) {
  .mmap { block-size: 280px; }
}
.mmap__wait {
  display: flex; align-items: center; justify-content: center;
  block-size: 100%; color: var(--text-soft); font-size: .86rem;
}
.mmap__svg { display: block; inline-size: 100%; block-size: 100%; }
.mmap__land { fill: var(--map-land-1); stroke: var(--map-stroke); stroke-width: 2; stroke-linejoin: round; }
.mmap__note { font-size: .78rem; color: var(--text-soft); margin-block-start: 8px; }

/* ============================================================
   Coverage map — always the bright/white look, by design, so it
   does not switch with the site's light/dark theme.
   ============================================================ */
:root {
  --map-land-1: #eef1f6; --map-land-2: #e2e7ef; --map-stroke: #c3cbd8; --map-sea: #f5f7fb;
  --map-sale: #c8973c; --map-rent: #2f6fed; --map-both: #17916b;
  /* One hue per property type, all held at a similar darkness so no single
     type shouts louder than the rest, and all dark enough to carry the pin's
     white outline against the pale basemap. Navy is the brand's own and goes
     to apartments, the type there is most of. */
  --map-apartment:  #1B2A4A;
  --map-house:      #2E6B54;
  --map-villa:      #8A5405;
  --map-commercial: #6B4A7A;
  --map-land:       #4E7C9B;
}

#coverage .container { display: flex; flex-direction: column; }

/* sale / rent legend above the map */
/* A key, not a control: what to search by already lives in the toolbar
   above, so this only ever explains what a pin colour means — nothing here
   is clickable, and nothing here should look like it is. */
.maplegend { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; align-items: center; margin: 0 0 18px; padding: 0; list-style: none; }
.maplegend__key {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 4px; font-size: .82rem; color: var(--text-soft);
}
.maplegend__dot { inline-size: 11px; block-size: 11px; border-radius: 50%; flex: none; transition: filter .16s; }
.maplegend__dot--apartment  { background: var(--map-apartment); }
.maplegend__dot--house      { background: var(--map-house); }
.maplegend__dot--villa      { background: var(--map-villa); }
.maplegend__dot--commercial { background: var(--map-commercial); }
.maplegend__dot--land       { background: var(--map-land); }

.mapwrap {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface);
}
.mapwrap__canvas { background: var(--map-sea); padding: 18px; min-inline-size: 0; }
.geomap { inline-size: 100%; block-size: auto; display: block; overflow: visible; }
/* `display:block` above is an author rule, so it beats the browser's own
   [hidden]{display:none}. Without this the hidden fallback map kept its box
   and left a tall blank strip above the real map. */
.geomap[hidden], .geomap-mb[hidden] { display: none; }

/* Mapbox GL canvas — swapped in for .geomap when a token is configured */
.geomap-mb {
  inline-size: 100%; min-block-size: 640px; border-radius: var(--r);
  overflow: hidden;
}
.geomap-mb .mapboxgl-ctrl-logo { opacity: .55; }
.geomap-mb .mapboxgl-ctrl-bottom-right,
.geomap-mb .mapboxgl-ctrl-bottom-left { font-size: 10px; }
.mb-3d-btn {
  inline-size: 29px; block-size: 29px; display: block;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  color: #333; background: #fff;
}
.mb-3d-btn:hover { background: #f2f2f2; }

/* One flag per building, coloured by what is inside it. The legend above the
   map is the key, and is also the control that hides each colour. */
.mb-flag {
  position: relative;
  inline-size: 32px; block-size: 32px; cursor: pointer;
  color: var(--map-apartment); filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
  transition: transform .18s var(--ease), filter .18s;
}
.mb-flag--house      { color: var(--map-house); }
.mb-flag--villa      { color: var(--map-villa); }
.mb-flag--commercial { color: var(--map-commercial); }
.mb-flag--land       { color: var(--map-land); }
.mb-flag__ico { inline-size: 100%; block-size: 100%; fill: currentColor; stroke: #fff; stroke-width: 1.5; }
.mb-flag:hover, .mb-flag:focus-visible { transform: scale(1.15); filter: drop-shadow(0 5px 10px rgba(0,0,0,.4)); outline: none; }
/* how many units are inside, when it is more than one */
.mb-flag__n {
  position: absolute; inset-block-start: -5px; inset-inline-end: -5px;
  min-inline-size: 18px; block-size: 18px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); background: #0f172a; color: #fff;
  border: 2px solid #fff;
  font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* the little building panel that opens on a pin */
.bpop-wrap .mapboxgl-popup-content {
  padding: 0; overflow: hidden;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 44px rgba(9,15,28,.26);
  font-family: var(--sans);
}
.bpop-wrap .mapboxgl-popup-tip { border-top-color: var(--surface); }
.bpop-wrap .mapboxgl-popup-close-button {
  inline-size: 30px; block-size: 30px; font-size: 19px;
  color: var(--text-soft); border-radius: var(--r-pill);
}
.bpop-wrap .mapboxgl-popup-close-button:hover { background: var(--surface-2); color: var(--text); }

.bpop { max-block-size: 320px; overflow-y: auto; padding: 14px; }
.bpop__where {
  display: flex; align-items: center; gap: 6px;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-soft); margin-block-end: 10px; padding-inline-end: 24px;
}
.bpop__pin { inline-size: 14px; block-size: 14px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.8; }
.bpop__sec + .bpop__sec { margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px solid var(--line); }
.bpop__h {
  display: flex; align-items: center; gap: 7px;
  font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-soft); margin-block-end: 7px;
}
.bpop__h span {
  min-inline-size: 18px; padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--gold);
  font-size: .68rem; text-align: center; font-variant-numeric: tabular-nums;
}
.bpop__unit {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  inline-size: 100%; min-block-size: 44px; padding: 9px 10px;
  border-radius: var(--r); text-align: start;
  transition: background .14s;
}
.bpop__unit:hover { background: var(--surface-2); }
.bpop__unit:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.bpop__unit-b { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.bpop__unit-b b { font-size: .86rem; font-weight: 600; line-height: 1.35; }
.bpop__unit-b em { font-style: normal; font-size: .74rem; color: var(--text-soft); }
.bpop__unit i {
  font-style: normal; font-family: var(--display); font-weight: 600;
  font-size: .95rem; color: var(--gold); white-space: nowrap;
}

/* Narrow map, narrow panel: a title and a price fight over the same line and
   both lose. Stack them, and let the title wrap rather than overflow — the
   price keeps its own line and stays readable at a glance. */
.bpop-wrap--tight .bpop { padding: 12px; }
.bpop-wrap--tight .bpop__unit {
  flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 8px;
}
.bpop-wrap--tight .bpop__unit-b { inline-size: 100%; }
.bpop-wrap--tight .bpop__unit i { font-size: .9rem; }
.bpop__unit-b b { overflow-wrap: anywhere; }

/* The docked panel a phone gets instead of a floating one. Full width along
   the bottom of the map, so there is no edge for it to hang over and nothing
   for `overflow: hidden` to cut off. */
.bsheet {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 3;
  display: flex; flex-direction: column;
  max-block-size: 64%;
  background: var(--surface); color: var(--text);
  border-block-start: 1px solid var(--line);
  border-start-start-radius: var(--r-lg); border-start-end-radius: var(--r-lg);
  box-shadow: 0 -12px 32px rgba(9, 15, 28, .2);
  /* clears the Mapbox logo and attribution, which stay above it */
  padding-block-end: 30px;
}
/* `display: flex` above is an author rule and would otherwise beat the
   browser's own [hidden] { display: none }. */
.bsheet[hidden] { display: none; }

/* Mapbox requires its logo and attribution to stay visible, so they sit above
   the panel rather than under it. */
.geomap-mb .mapboxgl-ctrl-bottom-left,
.geomap-mb .mapboxgl-ctrl-bottom-right { z-index: 4; }

.bsheet .bpop { max-block-size: none; overflow-y: auto; padding: 14px 16px 8px; }
.bsheet .bpop__where { padding-inline-end: 44px; }
.bsheet__x {
  position: absolute; inset-block-start: 8px; inset-inline-end: 8px; z-index: 1;
  inline-size: 36px; block-size: 36px; display: grid; place-items: center;
  border-radius: var(--r-pill); color: var(--text-soft);
  background: var(--surface-2);
}
.bsheet__x .ico { inline-size: 17px; block-size: 17px; stroke-width: 2; }
.bsheet__x:hover { color: var(--text); }
.bsheet__x:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* SVG fallback's equivalent — used only when no Mapbox token is set */
.mkflag { cursor: pointer; }
.mkflag__halo { fill: var(--map-apartment); opacity: 0; transition: opacity .2s var(--ease); }
.mkflag__dot { fill: var(--map-apartment); stroke: #fff; stroke-width: 2; }
.mkflag--house      .mkflag__halo, .mkflag--house      .mkflag__dot { fill: var(--map-house); }
.mkflag--villa      .mkflag__halo, .mkflag--villa      .mkflag__dot { fill: var(--map-villa); }
.mkflag--commercial .mkflag__halo, .mkflag--commercial .mkflag__dot { fill: var(--map-commercial); }
.mkflag--land       .mkflag__halo, .mkflag--land       .mkflag__dot { fill: var(--map-land); }
.mkflag__n { fill: var(--text); font-size: 13px; font-weight: 700; pointer-events: none; }
.mkflag:hover .mkflag__halo { opacity: .22; }
.mkflag:focus-visible { outline: none; }
.mkflag:focus-visible .mkflag__halo { opacity: .3; }

@media (max-width: 620px) {
  .geomap-mb { min-block-size: 420px; }
}

/* ---------- gallery carousel inside the property modal ---------- */
.mgal { position: relative; }
.mgal__stage {
  position: relative; aspect-ratio: 3/2; background: var(--surface-2);
  overflow: hidden; cursor: zoom-in;
}

.mgal__arrow {
  position: absolute; inset-block-start: 50%; transform: translateY(-50%);
  inline-size: 48px; block-size: 48px; display: grid; place-items: center;
  border-radius: var(--r-pill); background: rgba(255,255,255,.94); color: #0f172a;
  box-shadow: var(--shadow-md); transition: background .18s, transform .18s var(--ease);
  z-index: 2;
}
.mgal__arrow:hover { background: #fff; }
.mgal__arrow--prev { inset-inline-start: 16px; }
.mgal__arrow--next { inset-inline-end: 16px; }
.mgal__counter {
  position: absolute; inset-block-end: 16px; inset-inline-end: 16px; z-index: 2;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: rgba(11,18,32,.78); color: #fff;
  font-size: .74rem; font-weight: 600; letter-spacing: .08em;
}
.mgal__thumbs {
  display: flex; gap: 8px; padding: 10px 10px 0;
  overflow-x: auto; scrollbar-width: thin;
}
.mgal__thumbs button {
  flex: 0 0 84px; block-size: 58px; border-radius: var(--r-sm);
  overflow: hidden; border: 2px solid transparent; opacity: .6;
  transition: opacity .18s, border-color .18s;
}
.mgal__thumbs button img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.mgal__thumbs button.on { opacity: 1; border-color: var(--gold); }
.mgal__thumbs button:hover { opacity: 1; }

/* The photos sit on a strip behind a window: the window clips, the strip
   moves. Sliding is the motion a sequence of rooms asks for -- next arrives
   from the right, previous from the left -- where a cross-fade would say
   "another view of the same thing". Being a real strip is also what lets a
   finger drag it: there is something continuous to take hold of. */
.mgal__track {
  display: flex;
  inline-size: 100%; block-size: 100%;
  will-change: transform;
  transition: transform .42s cubic-bezier(.22,.61,.36,1);
  touch-action: pan-y;               /* sideways is ours, up and down is the page's */
}
/* One frame per photograph, all of them the width of the stage. */
.mgal__slide {
  position: relative; flex: none;
  inline-size: 100%; block-size: 100%; overflow: hidden;
}

/* Every photograph fills its frame, whatever shape it arrived in: the frame
   sets the size and the photograph covers it. One rule, because two rules that
   merely agree today are a specificity trap waiting for the next edit. */
.mgal__stage img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: 50% 50%;
  background: var(--surface-2);
  user-select: none; -webkit-user-drag: none;
}

/* A photograph taken the other way up to the frame is shown whole instead of
   losing half of itself, and the space either side is filled with a blurred,
   darkened copy of that same photograph -- so the frame is still edge to edge
   and the fill is borrowed from the picture rather than being a new colour.
   Scaled past the edges because a blur of exactly the frame's size leaves a
   pale seam where the blur runs out. */
.mgal__slide.is-whole > img:not(.mgal__bg) {
  position: relative; z-index: 1;
  object-fit: contain; background: none;
}
/* Named against the slide so it outranks the rule for the photograph in front
   of it -- which is also an img, and also a direct child. */
.mgal__slide > .mgal__bg {
  position: absolute; inset: 0; z-index: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  transform: scale(1.18);
  filter: blur(30px) saturate(1.1) brightness(.72);
  pointer-events: none;
}
html[data-theme="dark"] .mgal__slide > .mgal__bg {
  filter: blur(30px) saturate(1.05) brightness(.5);
}
/* While a finger is down the strip must not lag behind it. */
.mgal__stage.is-dragging .mgal__track { transition: none; }
.mgal__stage.is-dragging { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .mgal__track { transition: none; }
}

/* ---------- more of the same, under the map ---------- */
/* A row you push sideways. It snaps so it comes to rest on a card rather than
   halfway across one, and the cards are narrow enough that the next one is
   always half-visible at the edge -- which is what tells you the row keeps
   going without needing an arrow to say so. */
.simwrap { position: relative; }

.simstrip {
  display: flex; gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-block-end: 4px;
  /* No bar underneath. The buttons move the row and the fade says there is
     more of it -- a scrollbar as well would be the third thing saying so. */
  scrollbar-width: none;
}
.simstrip::-webkit-scrollbar { display: none; }
.simstrip.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }

/* The row does not end, it thins out. The fade is the panel's own colour, so
   the card at the edge reads as continuing past the frame rather than being
   sliced off by it -- and it gives the button a ground to sit on. It appears
   only on a side that has something left to show. */
.simwrap::before,
.simwrap::after {
  content: ''; position: absolute; inset-block: 0 4px;
  inline-size: 76px; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .25s var(--ease);
}
.simwrap::before {
  inset-inline-start: 0;
  background: linear-gradient(to var(--fade-from, right), var(--bg) 24%, transparent);
}
.simwrap::after {
  inset-inline-end: 0;
  background: linear-gradient(to var(--fade-to, left), var(--bg) 24%, transparent);
}
.simwrap.has-more-start::before,
.simwrap.has-more-end::after { opacity: 1; }
html[dir="rtl"] .simwrap { --fade-from: left; --fade-to: right; }

/* Sat on the band of photographs -- the one horizontal line every card in the
   row shares. Over a card's title a white disc would read as pasted on; over a
   photograph it reads the way the gallery arrows already do. */
.simnav {
  position: absolute; inset-block-start: 65px; transform: translateY(-50%);
  z-index: 2; inline-size: 44px; block-size: 44px;
  display: none; place-items: center;
  border: 0; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .94); color: #0f172a;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: background .18s, opacity .2s var(--ease), transform .18s var(--ease);
}
.simwrap.is-scrollable .simnav { display: grid; }
.simnav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.simnav:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.simnav:disabled { opacity: 0; pointer-events: none; }
.simnav--prev { inset-inline-start: 8px; }
.simnav--next { inset-inline-end: 8px; }
html[dir="rtl"] .simnav .ico { transform: scaleX(-1); }

@media (max-width: 620px) {
  /* The photographs are shorter here, so the buttons follow them up. */
  .simnav { inset-block-start: 56px; }
  .simwrap::before, .simwrap::after { inline-size: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .simnav { transition: none; }
  .simnav:hover { transform: translateY(-50%); }
  .simwrap::before, .simwrap::after { transition: none; }
}

.simcard {
  flex: 0 0 196px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 3px;
  padding: 0; text-align: start;
  background: none; border: 0; cursor: pointer;
}
.simcard__img {
  display: block; overflow: hidden;
  block-size: 130px; margin-block-end: 9px;
  border-radius: var(--r); background: var(--surface-2);
}
.simcard__img img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: center 40%;
  user-select: none; -webkit-user-drag: none;
  transition: transform .5s var(--ease);
}
.simcard:hover .simcard__img img { transform: scale(1.05); }
.simcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--r); }

.simcard__price {
  font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--text);
}
.simcard__price small { font-size: .68rem; font-weight: 500; color: var(--text-soft); }
.simcard__title {
  font-size: .84rem; font-weight: 600; line-height: 1.35; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.simcard__place {
  font-size: .76rem; color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Georgian stacks marks above and hangs tails below the line, and Arabic
   carries its own dots and vowel marks; at 1.35 the second line of a clamped
   title starts clipping them. */
html[lang="ka"] .simcard__title,
html[lang="ar"] .simcard__title { line-height: 1.5; }

@media (max-width: 620px) {
  .simcard { flex-basis: 162px; }
  .simcard__img { block-size: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .simcard__img img { transition: none; }
}

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: rgba(4,8,15,.94);
  animation: fade .2s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox__stage {
  inline-size: 100%; block-size: 100%;
  display: grid; place-items: center; overflow: hidden;
  cursor: grab; touch-action: none;
}
.lightbox__stage.is-panning { cursor: grabbing; }
.lightbox__stage img {
  max-inline-size: 92vw; max-block-size: 84vh;
  transform-origin: center center;
  transition: transform .18s var(--ease);
  user-select: none; -webkit-user-drag: none;
}
.lightbox__stage.no-anim img { transition: none; }
.lightbox__close {
  position: absolute; inset-block-start: 20px; inset-inline-end: 20px; z-index: 4;
  inline-size: 48px; block-size: 48px; display: grid; place-items: center;
  border-radius: var(--r-pill); background: rgba(255,255,255,.12); color: #fff;
  backdrop-filter: blur(6px); transition: background .18s;
}
.lightbox__close:hover { background: rgba(255,255,255,.24); }
.lightbox__nav {
  position: absolute; inset-block-start: 50%; transform: translateY(-50%); z-index: 4;
  inline-size: 56px; block-size: 56px; display: grid; place-items: center;
  border-radius: var(--r-pill); background: rgba(255,255,255,.12); color: #fff;
  backdrop-filter: blur(6px); transition: background .18s;
}
.lightbox__nav:hover { background: rgba(255,255,255,.24); }
.lightbox__nav--prev { inset-inline-start: 20px; }
.lightbox__nav--next { inset-inline-end: 20px; }
.lightbox__bar {
  position: absolute; inset-block-end: 22px; inset-inline-start: 50%;
  transform: translateX(-50%); z-index: 4;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.12); backdrop-filter: blur(6px); color: #fff;
}
[dir="rtl"] .lightbox__bar { transform: translateX(50%); }
.lightbox__zoom {
  inline-size: 40px; block-size: 40px; display: grid; place-items: center;
  border-radius: var(--r-pill); color: #fff; transition: background .18s;
}
.lightbox__zoom:hover { background: rgba(255,255,255,.18); }
.lightbox__pct { min-inline-size: 54px; text-align: center; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lightbox__count {
  margin-inline-start: 8px; padding-inline-start: 12px;
  border-inline-start: 1px solid rgba(255,255,255,.25);
  font-size: .78rem; font-weight: 600;
}

@media (max-width: 620px) {
  .lightbox__nav { inline-size: 46px; block-size: 46px; }
  .lightbox__nav--prev { inset-inline-start: 8px; }
  .lightbox__nav--next { inset-inline-end: 8px; }
  .mgal__arrow { inline-size: 42px; block-size: 42px; }
}

.modal__panel--agent { inline-size: min(100%, 900px); }
.amod { display: grid; grid-template-columns: 300px 1fr; gap: 0; }
.amod__side {
  padding: clamp(26px, 3vw, 36px); text-align: center;
  border-inline-end: 1px solid var(--line); background: var(--bg-alt);
}
.amod__photo {
  inline-size: 132px; block-size: 132px; margin: 0 auto 18px;
  border-radius: var(--r-pill); overflow: hidden; background: var(--surface-2);
}
.amod__photo img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  /* A portrait has its subject in the top half. Cropping from the middle of
     the frame takes the top of the head off; biasing the crop upwards keeps
     the face centred without anybody having to set anything. */
  object-position: center 22%;
}
.amod__side h2 { font-family: var(--display); font-size: 1.4rem; }
.amod__role {
  font-size: .68rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gold); margin-block: 6px 14px;
}
.amod__side .agent__langs { justify-content: center; margin-block-end: 20px; }
.amod__facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; margin-block-end: 20px;
}
.amod__facts div { background: var(--surface); padding: 14px 8px; }
.amod__facts b { display: block; font-family: var(--display); font-size: 1.5rem; }
.amod__facts span { font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); }
.amod__list { padding: clamp(24px, 3vw, 34px); max-block-size: 70vh; overflow-y: auto; }

/* One of an agent's listings. The markup was already here but no rule ever
   matched it, so the photo went full width and the title, address and price
   ran together on one line. Same shape as the row in the map popup — both
   are "a building, in a list" and there is no reason for them to differ. */
.mapitem {
  display: flex; align-items: center; gap: 14px;
  inline-size: 100%; padding: 10px;
  border-radius: var(--r); text-align: start;
  cursor: pointer; transition: background .16s;
}
.mapitem + .mapitem { margin-block-start: 4px; }
.mapitem:hover { background: var(--surface-2); }
.mapitem:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.mapitem img {
  inline-size: 84px; block-size: 64px; flex: none;
  border-radius: var(--r); object-fit: cover; background: var(--surface-2);
}
.mapitem__b { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; }
.mapitem__b b { font-size: .92rem; font-weight: 600; line-height: 1.35; }
.mapitem__b em {
  font-style: normal; font-size: .78rem; color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mapitem__b i {
  font-style: normal; font-family: var(--display); font-weight: 600;
  font-size: 1rem; color: var(--gold);
}

@media (max-width: 620px) {
  .mapitem img { inline-size: 64px; block-size: 52px; }
}
.amod__list h3 {
  font-size: .68rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--text-soft); margin-block-end: 14px;
}
.amod__none { color: var(--text-soft); font-size: .92rem; }

@media (max-width: 720px) {
  .amod { grid-template-columns: 1fr; }
  .amod__side { border-inline-end: 0; border-block-end: 1px solid var(--line); }
  .amod__list { max-block-size: none; }
}

/* ---------- legal dialog ---------- */
.modal__panel--legal { inline-size: min(100%, 780px); }
.legalbody { padding: clamp(30px, 4.5vw, 56px); }
.legalbody h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-block-end: 8px; }
.legal__meta { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); margin-block-end: 34px; }
.legalbody h4 { font-family: var(--display); font-size: 1.14rem; font-weight: 600; color: var(--text); margin-block: 32px 10px; }
.legalbody h4:first-child { margin-block-start: 0; }
.legalbody p { color: var(--text-soft); margin-block-end: 14px; }

/* ---------- back to top ---------- */
.totop {
  position: fixed; inset-block-end: 26px; inset-inline-end: 26px; z-index: 90;
  display: grid; place-items: center; inline-size: 48px; block-size: 48px;
  border-radius: var(--r); background: var(--brand); color: var(--bg);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s, transform .25s var(--ease), visibility .25s, background .2s;
}
.totop:hover { background: var(--gold); color: #fff; }
.totop.is-on { opacity: 1; visibility: visible; transform: none; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer__col--wide { grid-column: 1 / -1; }
}

/* Georgian and Russian labels are long, so the drawer takes over
   earlier than a purely English site would need. */
@media (max-width: 1180px) {
  /* The drawer is position:fixed and must anchor to the viewport.
     backdrop-filter would make .header its containing block instead,
     which pins the drawer under the header and pushes it off-screen. */
  .header { backdrop-filter: none; background: var(--bg); }

  .nav {
    position: fixed; inset-block-start: 0; inset-inline-end: 0;
    /* vh first so browsers without dvh still get a full-height panel —
       without this the drawer collapses to just the close button */
    block-size: 100vh;
    block-size: 100dvh;
    inline-size: min(86vw, 360px);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: 0; background: var(--surface);
    border-inline-start: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%); transition: transform .34s var(--ease);
    overflow: hidden; z-index: 150;
  }
  [dir="rtl"] .nav { transform: translateX(-100%); }
  .nav.is-open { transform: none; }

  /* the close button lives in the drawer's own fixed header, so it can
     never scroll out of reach */
  .nav__close {
    display: grid; place-items: center; flex: none;
    inline-size: 46px; block-size: 46px; margin: 16px 16px 4px;
    margin-inline-start: auto;
    border-radius: var(--r); border: 1px solid var(--line-strong);
    color: var(--text); background: var(--surface);
  }
  .nav__close:hover { border-color: var(--gold); color: var(--gold); }
  .nav__close .ico { width: 20px; height: 20px; }

  .nav__scroll {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 8px 24px calc(32px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; flex: 1; min-block-size: 0;
    -webkit-overflow-scrolling: touch;
  }
  .nav__link { padding: 16px 4px; font-size: .84rem; letter-spacing: .12em; border-block-end: 1px solid var(--line); }
  .nav__link::after { display: none; }
  .nav__link.is-active { color: var(--gold); }
  .nav__cta { display: inline-flex; margin-inline-start: 0; margin-block-start: 24px; }
  .burger { display: flex; position: relative; z-index: 160; }
  /* The drawer carries its own close button. Leaving the burger visible
     stacked a second X glyph on top of it. */
  .nav.is-open ~ .burger { opacity: 0; visibility: hidden; }
  /* the drawer is out of flow on mobile, so the tools push themselves right */
  .header__tools { margin-inline-start: auto; }

  .about, .contact { grid-template-columns: 1fr; }
  .about__media { order: -1; }
  .about__media img { aspect-ratio: 4/3; }
}

/* Step 1: the language button drops its label and keeps just the globe. */
@media (max-width: 700px) {
  #langCurrent { display: none; }
  .lang__btn { gap: 4px; padding-inline: 10px; }
  .header__tools { margin-inline-start: auto; padding-inline-start: 10px; }
}

/* Step 2: below this the wordmark cannot fit beside the controls, so the
   header keeps the mark alone. The full name still sits in the hero,
   the footer and the page title. */
@media (max-width: 560px) {
  .header .logo__text { display: none; }
  .header__inner { gap: 8px; }
  /* keep the dropdown inside the viewport on a narrow phone */
  .lang__menu {
    min-inline-size: 0; inline-size: max-content;
    max-inline-size: calc(100vw - 28px);
  }
}

@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .grid { grid-template-columns: 1fr; }
  .section__head { flex-direction: column; align-items: stretch; }
  .sortwrap { min-inline-size: 0; }
  .footer__inner { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .mhead { flex-direction: column; gap: 10px; }
  .mprice { text-align: start; }
  .newsletter { flex-direction: column; }
  .newsletter .btn { inline-size: 100%; }
  .hero__title { letter-spacing: -.025em; }
}

@media (max-width: 520px) {
  .container { width: min(100% - 32px, var(--container)); }
  .totop { inset-block-end: 16px; inset-inline-end: 16px; }
  .review { padding: 26px; }
  .svc { padding: 28px 24px; }
}

/* ============================================================
   Unified search — one typed field, a grouped suggestion list,
   and a row of removable chips for whatever is currently applied.
   ============================================================ */
.qsearch { position: relative; }
.qsearch input {
  inline-size: 100%; min-inline-size: 0;
  min-block-size: 44px; padding: 0; padding-inline-end: 26px;
  border: 0; background: transparent; color: var(--text);
  font-family: inherit; font-size: 1rem; font-weight: 500;
}
.qsearch input:focus { outline: none; }
.qsearch input::placeholder { color: var(--text-soft); opacity: .75; font-weight: 400; }

/* The suggestion list. It opens on focus with nothing typed, so it doubles as
   the menu the five dropdowns used to be — browsable as well as typable. */
.qpanel {
  position: absolute; inset-inline: 0; inset-block-start: calc(100% + 10px);
  z-index: 40; max-block-size: min(60vh, 420px); overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.qpanel[hidden] { display: none; }
.qpanel__group {
  padding: 12px 12px 6px;
  font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft);
}
.qpanel__group:first-child { padding-block-start: 6px; }
.qpanel__empty { padding: 20px 12px; font-size: .9rem; color: var(--text-soft); text-align: center; }

.qopt {
  display: flex; align-items: center; gap: 12px; inline-size: 100%;
  padding: 10px 12px; border-radius: var(--r);
  font-size: .93rem; color: var(--text); text-align: start;
  transition: background .14s;
}
.qopt span { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the live count behind each option, so the shape of the stock is visible
   before anything is clicked */
.qopt em {
  flex: none; font-style: normal;
  font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--text-soft);
}
.qopt:hover:not(:disabled), .qopt.is-active { background: var(--surface-2); }
.qopt.is-chosen { color: var(--brand); font-weight: 600; }
.qopt.is-chosen::after {
  content: '✓'; flex: none; color: var(--gold); font-weight: 700;
}
/* a category the catalogue has but nothing in it today: shown, not hidden */
.qopt.is-dead { opacity: .38; cursor: not-allowed; }
.qopt--text { color: var(--brand); font-weight: 600; }

/* ---------- what is currently applied ---------- */
.qchips {
  flex: 1 1 100%;
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 18px;
  border-block-start: 1px solid var(--line);
}
.qchips[hidden] { display: none; }
.qchip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: var(--r-pill);
  background: var(--brand-100); color: var(--brand);
  font-size: .82rem; font-weight: 600;
  transition: background .16s, color .16s;
}
.qchip .ico { width: 13px; height: 13px; opacity: .65; }
.qchip:hover { background: var(--brand); color: var(--bg); }
.qchip:hover .ico { opacity: 1; }
.qchip--all { background: transparent; color: var(--text-soft); text-decoration: underline; text-underline-offset: 3px; }
.qchip--all:hover { background: transparent; color: var(--text); }

/* how many listings the button is about to take you to */
.searchbox__count {
  min-inline-size: 22px; padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.18);
  font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.searchbox__count:empty { display: none; }

@media (max-width: 560px) {
  .qpanel { max-block-size: 52vh; }
  .qchips { padding: 12px 14px; }
}

/* ============================================================
   Map's own searchbar — same fields, same state, a different OBJECT.

   Two earlier attempts got the differentiation wrong. The first inverted the
   palette into a dark slab: it ignored the theme, so light mode got a black
   brick on a pale page, and it used --gold as a large fill when that value is
   tuned to be WCAG-safe for text and small marks — at slab size it reads as
   mud. The second kept the colour honest but ran all seven controls across
   one full-bleed line, which was long and airless.

   So: the difference is carried by FORM, the colours all come from the same
   tokens as the rest of the page, and the panel is NARROW and STACKED rather
   than wide and packed. The hero is a tall form you fill in before you go
   looking; this is a compact panel you adjust while the map is already in
   front of you — centred under a centred heading, four short rows, real gaps
   instead of hairlines, and an underline per field rather than a grid of
   boxed cells.
   ============================================================ */
[data-searchbar="map"] {
  /* narrower than the map it sits above, and centred to match the section
     heading — a full-bleed control strip fights that centred composition */
  max-inline-size: 780px;
  margin: 0 auto 26px;
  padding: 18px 22px 20px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);          /* sits on the page, does not float above it */
  display: flex; flex-direction: column; gap: 16px;
}

/* Buy/Rent becomes a small segmented control on its own line rather than a
   full-width tab strip — it is one control among several here, not the
   heading of a form. */
[data-searchbar="map"] .searchbox__tabs {
  align-self: flex-start;
  display: inline-flex; padding: 0;
  border-block-end: 0;
  background: var(--surface-2); border-radius: var(--r-pill);
}
/* Full 44px: this is the first thing a thumb reaches for on the panel. */
[data-searchbar="map"] .tab {
  min-block-size: 44px; padding: 8px 20px;
  border-block-end: 0; border-radius: var(--r-pill);
  color: var(--text-soft);
}
[data-searchbar="map"] .tab:hover { background: transparent; color: var(--text); }
[data-searchbar="map"] .tab.is-active {
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-sm);
}
/* the icon leaves the corner and sits on the baseline beside the value */
[data-searchbar="map"] .field__ico { position: static; inline-size: 16px; block-size: 16px; }

[data-searchbar="map"] .qsearch input,
[data-searchbar="map"] .psel__btn { min-block-size: 44px; font-size: .92rem; }
[data-searchbar="map"] .searchbox__count { background: rgba(255, 255, 255, .2); }
html[data-theme="dark"] [data-searchbar="map"] .searchbox__count { background: rgba(0, 0, 0, .25); }

[data-searchbar="map"] .qchips { flex: 1 1 100%; padding: 0; border-block-start: 0; }

@media (max-width: 620px) {
  /* one control per line — three 33% columns at this width are narrower than
     the words inside them */
  [data-searchbar="map"] { padding: 16px; }
}

/* ---------- page numbers ----------
   Replaces "load more" on the full catalogue: it says how much there is,
   and it lets somebody go back to where they were instead of scrolling
   the whole way down again. */
.pager {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 6px;
  margin-block-start: 48px;
}
.pager[hidden] { display: none; }
.pager__num, .pager__step {
  min-inline-size: 44px; min-block-size: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--text);
  font-size: .92rem; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: border-color .16s, background .16s, color .16s;
}
.pager__num:hover:not(.is-current), .pager__step:hover:not(:disabled) {
  border-color: var(--brand); background: var(--surface-2);
}
.pager__num.is-current {
  background: var(--brand); border-color: var(--brand); color: var(--bg);
  cursor: default;
}
.pager__step:disabled { opacity: .35; cursor: not-allowed; }
.pager__step .ico { width: 17px; height: 17px; }
.pager__num:focus-visible, .pager__step:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
/* stands in for the pages that were left out, and is never a target */
.pager__gap {
  min-inline-size: 24px; text-align: center;
  color: var(--text-soft); user-select: none;
}

/* The whole card is the target, not just the button at the bottom of it. */
.card { cursor: pointer; }
/* The controls that live on top of it do their own job instead. */
.card__nav, .card__fav { cursor: pointer; }

/* A group heading with a control sitting on the same line. */
.fgroup__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-block-end: 14px;
}
.fgroup__row .fgroup__h { margin-block-end: 0; }

/* Lari or dollar, right where the money is being typed. */
.curtoggle {
  display: inline-flex; flex: none;
  padding: 3px; gap: 2px;
  background: var(--surface-2); border-radius: var(--r-pill);
}
.curtoggle button {
  min-inline-size: 40px; min-block-size: 34px;
  border-radius: var(--r-pill);
  color: var(--text-soft); background: transparent;
  font-family: inherit; font-size: .95rem; font-weight: 600;
  cursor: pointer; transition: background .16s, color .16s;
}
.curtoggle button:hover { color: var(--text); }
.curtoggle button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.curtoggle button.is-on {
  background: var(--surface); color: var(--gold);
  box-shadow: var(--shadow-sm);
}
/* A thumb needs the full target; a mouse pointer does not. */
@media (hover: none) {
  .curtoggle button { min-inline-size: 48px; min-block-size: 44px; }
}