/* ============================================================
   REALTEEK — Refined luxury real-estate
   Fonts: Fraunces (display serif) · Bricolage Grotesque (head) · Hanken Grotesk (body)
   ============================================================ */

:root{
  --sky:#db1351;
  --sky-deep:#9E0E3B;
  --sky-soft:#FCE6EB;
  --ink:#131A21;
  --ink-soft:#A0AAB5;
  --paper:#F0F2F5;
  --white:#ffffff;
  --black:#0A0E14;
  --gold:#CF9C47;
  --teal:#38A19B;
  --line:rgba(12,22,32,.09);
  --shadow-sm:0 2px 8px rgba(12,22,32,.05);
  --shadow-md:0 18px 40px -22px rgba(12,22,32,.28);
  --shadow-lg:0 40px 80px -30px rgba(12,22,32,.35);
  --r:22px;
  --container:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ============================================================
   RTL (Arabic) — Cairo replaces the Latin display faces everywhere,
   since Fraunces/Bricolage Grotesque have no Arabic glyphs
   ============================================================ */
[dir="rtl"] body{font-family:"Cairo","Hanken Grotesk",system-ui,sans-serif}
[dir="rtl"] *{font-family:"Cairo",sans-serif !important;font-style:normal !important}

/* admin-entered content (hero copy, project/testimonial text, etc.) isn't
   force-translated, so it may still be plain English while the page is RTL —
   let each of these elements auto-detect its own paragraph direction instead
   of inheriting rtl, which otherwise visually scrambles punctuation/word order */
[dir="rtl"] .hero-eyebrow, [dir="rtl"] .hero-title, [dir="rtl"] .hero-sub,
[dir="rtl"] .journey-lead, [dir="rtl"] .cta-text h2, [dir="rtl"] .cta-text p,
[dir="rtl"] .stats p, [dir="rtl"] .pcard-body h3, [dir="rtl"] .pcard-tag,
[dir="rtl"] .project-body h3, [dir="rtl"] .project-body p,
[dir="rtl"] .testi-card .tc-quote, [dir="rtl"] .city-meta h3,
[dir="rtl"] .project-tag, [dir="rtl"] .card-desc,
[dir="rtl"] .footer-brand > p, [dir="rtl"] .footer-bottom p:first-child,
[dir="rtl"] .brand-name, [dir="rtl"] .project-dev b, [dir="rtl"] .pc-names,
[dir="rtl"] .pcard-price, [dir="rtl"] .pcard-loc, [dir="rtl"] #unitName,
[dir="rtl"] #unitLoc, [dir="rtl"] #crumbName, [dir="rtl"] .plb-name,
[dir="rtl"] .fact-card .price{unicode-bidi:plaintext}

/* directional icons — mirror arrows/chevrons that point along the reading axis */
[dir="rtl"] .view-all svg,
[dir="rtl"] .pcard-foot .arrow svg,
[dir="rtl"] #testiPrev svg,
[dir="rtl"] #testiNext svg{transform:scaleX(-1)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
em{font-style:normal}

.container{width:min(var(--container),92vw);margin-inline:auto}
.center{text-align:center}

/* grain overlay */
.grain{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- display typography ---------- */
.display-head{
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700;
  font-size:clamp(1.9rem,4vw,3.1rem);
  line-height:1.08;
  letter-spacing:-.02em;
}
.display-head em{
  font-family:"Fraunces",serif;
  font-style:italic;
  font-weight:400;
  color:var(--sky);
}
.eyebrow{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.22em;
  color:var(--ink-soft);font-weight:600;display:inline-flex;align-items:center;gap:.6em;margin-bottom:1rem;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--sky);display:inline-block}
.center-eyebrow{justify-content:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:.95rem;
  padding:.85em 1.6em;border-radius:999px;cursor:pointer;border:none;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,color .25s,border-color .25s;
  white-space:nowrap;
}
/* the [hidden] attr must win over display:inline-flex above, or a button
   toggled hidden via JS stays visible (same class of bug as .projects-grid) */
.btn[hidden]{display:none}
.btn-dark{background:var(--black);color:#fff}
.btn-dark:hover{transform:translateY(-3px);box-shadow:0 16px 30px -12px rgba(10,14,20,.6)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{transform:translateY(-3px);box-shadow:0 16px 30px -12px rgba(0,0,0,.3)}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm);padding:.7em 1.4em}
.btn-ghost:hover{transform:translateY(-2px)}

/* ============================================================
   HEADER — rounded glass tab-nav only (no outer capsule)
   ============================================================ */
.site-header{
  position:fixed;top:18px;left:0;right:0;z-index:100;
  background:none;border:none;box-shadow:none;
  transition:top .4s var(--ease),background .4s,box-shadow .4s,border-color .4s;
}
/* once scrolled past the hero, the WHOLE bar (not just the nav pill) needs a
   solid backing — otherwise the brand mark and header padding have nothing
   behind them and busy page content (e.g. the filter chips) shows straight
   through, crisp and overlapping. */
.site-header.scrolled{
  top:0;padding:14px 0;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:0 12px 30px -20px rgba(12,22,32,.4);
  border-bottom:1px solid var(--line);
}
/* transparent layout row — no outer pill, the glass lives in the tabs only */
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  padding-block:2px;
}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:700;color:#fff}
.site-header.scrolled .brand{color:var(--ink)}
.brand-mark{width:40px;height:40px;display:grid;place-items:center}
.brand-mark svg{width:40px;height:40px}
.brand-name{font-family:"Bricolage Grotesque",sans-serif;font-size:1.35rem;letter-spacing:-.01em}
/* no company name set — let the logo take the full brand slot instead of a cramped mark */
.brand--logo-only .brand-mark{width:52px;height:52px}
.brand--logo-only .brand-mark svg{width:52px;height:52px}

/* rounded-tab nav group — the only glassmorphism shape in the header */
.nav{
  display:flex;align-items:center;gap:.2rem;padding:5px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.08));
  backdrop-filter:blur(16px) saturate(1.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 12px 30px -16px rgba(12,22,32,.5),inset 0 1px 0 rgba(255,255,255,.32);
  transition:background .4s,border-color .4s,box-shadow .4s;
}
.nav a{
  font-size:.92rem;font-weight:500;color:rgba(255,255,255,.9);
  padding:.5em 1.15em;border-radius:999px;line-height:1;
  transition:background .25s,color .25s,box-shadow .25s;
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.18)}
.nav a.active{background:#fff;color:var(--ink);box-shadow:0 4px 12px -5px rgba(0,0,0,.35)}
.site-header.scrolled .nav{
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.46));
  border-color:rgba(255,255,255,.7);
  box-shadow:0 12px 28px -18px rgba(12,22,32,.35),inset 0 1px 0 rgba(255,255,255,.85);
}
.site-header.scrolled .nav a{color:var(--ink-soft)}
.site-header.scrolled .nav a:hover{background:rgba(12,22,32,.06);color:var(--ink)}
.site-header.scrolled .nav a.active,.site-header.solid .nav a.active{background:var(--sky);color:#fff}

.header-actions{display:flex;align-items:center;gap:1rem}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.nav-toggle span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.3s}
.site-header.scrolled .nav-toggle span{background:var(--ink)}

/* EN/AR animated toggle — always laid out left-to-right (EN left, AR right)
   regardless of page direction, so the control itself never mirrors. */
.lang-switch{
  position:relative;direction:ltr;display:inline-flex;align-items:center;flex:none;
  width:60px;height:30px;padding:3px;border-radius:999px;cursor:pointer;
  font-family:inherit;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.32);transition:background .25s,border-color .25s;
}
.lang-switch:hover{background:rgba(255,255,255,.26)}
.lang-switch .ls-thumb{
  position:absolute;top:3px;left:3px;width:26px;height:22px;border-radius:999px;
  background:var(--sky);box-shadow:0 3px 10px -3px rgba(12,22,32,.5);
  transition:transform .35s cubic-bezier(.65,0,.35,1);
}
.lang-switch[data-lang="ar"] .ls-thumb{transform:translateX(26px)}
.lang-switch .ls-opt{
  position:relative;z-index:1;flex:1;text-align:center;
  font-size:.65rem;font-weight:800;letter-spacing:.03em;
  color:rgba(255,255,255,.68);transition:color .3s;
}
.lang-switch[data-lang="en"] .ls-en,.lang-switch[data-lang="ar"] .ls-ar{color:#fff}
.site-header.scrolled .lang-switch,.site-header.solid .lang-switch{
  background:rgba(12,22,32,.06);border-color:var(--line);
}
.site-header.scrolled .lang-switch:hover,.site-header.solid .lang-switch:hover{
  background:rgba(12,22,32,.1);
}
.site-header.scrolled .lang-switch .ls-opt,.site-header.solid .lang-switch .ls-opt{color:var(--ink-soft)}
.site-header.scrolled .lang-switch[data-lang="en"] .ls-en,.site-header.scrolled .lang-switch[data-lang="ar"] .ls-ar,
.site-header.solid .lang-switch[data-lang="en"] .ls-en,.site-header.solid .lang-switch[data-lang="ar"] .ls-ar{color:#fff}

/* Header contact button — a labeled rectangular CTA that opens a large
   centered modal with WhatsApp / Call options, or acts directly if only
   one contact method is configured. Hidden by default (inline style)
   until whatsapp-widget.js confirms at least one number is configured
   in the company profile. */
.wa-header-btn{
  position:relative;flex:none;display:inline-flex;align-items:center;gap:.55rem;
  padding:.7em 1.3em;border-radius:12px;background:var(--sky);color:#fff;border:none;cursor:pointer;
  font-family:inherit;font-size:.9rem;font-weight:700;white-space:nowrap;
  box-shadow:0 10px 24px -12px rgba(219,19,81,.55);
  transition:transform .25s var(--ease),box-shadow .25s;
}
.wa-header-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(219,19,81,.65)}
.wa-header-btn svg{position:relative;z-index:1;width:18px;height:18px;flex:none}
.wa-header-glow{position:absolute;inset:0;border-radius:12px;animation:waRingPulse 2.4s ease-out infinite}
@keyframes waRingPulse{
  0%{box-shadow:0 0 0 0 rgba(219,19,81,.55)}
  70%,100%{box-shadow:0 0 0 12px rgba(219,19,81,0)}
}
@media(prefers-reduced-motion:reduce){.wa-header-glow{animation:none}}

/* large centered "how would you like to reach us" modal (WhatsApp / Call) */
.contact-modal{position:fixed;inset:0;z-index:410;display:grid;place-items:center;padding:20px;visibility:hidden;pointer-events:none}
.contact-modal.open{visibility:visible;pointer-events:auto}
.contact-modal-backdrop{position:absolute;inset:0;background:rgba(12,22,32,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s}
.contact-modal.open .contact-modal-backdrop{opacity:1}
.contact-modal-card{
  position:relative;background:#fff;border-radius:28px;padding:44px 40px;width:100%;max-width:520px;
  box-shadow:0 60px 120px -30px rgba(10,20,30,.5);
  opacity:0;transform:translateY(24px) scale(.97);transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.contact-modal.open .contact-modal-card{opacity:1;transform:none}
.contact-modal-close{
  position:absolute;top:18px;inset-inline-end:18px;width:36px;height:36px;border-radius:50%;border:none;
  background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .15s;
}
.contact-modal-close:hover{background:var(--line)}
.contact-modal-close svg{width:16px;height:16px}
.contact-modal-head{text-align:center;margin-bottom:28px}
.contact-modal-head b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1.5rem;font-weight:800;color:var(--ink)}
.contact-modal-head small{display:block;color:var(--ink-soft);font-size:.95rem;margin-top:.4rem}
.contact-modal-opts{display:flex;flex-direction:column;gap:14px}
.contact-modal-opt{
  display:flex;align-items:center;gap:1rem;padding:1.1em 1.3em;border-radius:18px;
  border:1px solid var(--line);background:#fff;cursor:pointer;text-align:start;width:100%;
  transition:transform .2s var(--ease),box-shadow .2s,border-color .2s;
}
.contact-modal-opt:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:transparent}
.contact-modal-ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff}
.contact-modal-ic.wa{background:#25D366}
.contact-modal-ic.call{background:var(--sky)}
.contact-modal-ic svg{width:24px;height:24px}
.contact-modal-opt b{display:block;font-size:1.05rem;font-family:"Bricolage Grotesque",sans-serif;color:var(--ink)}
.contact-modal-opt small{display:block;color:var(--ink-soft);font-size:.86rem;margin-top:.15rem}
.contact-modal-opt .arrow{margin-inline-start:auto;width:32px;height:32px;border-radius:50%;background:var(--paper);display:grid;place-items:center;color:var(--ink);flex:none;transition:.25s}
.contact-modal-opt .arrow svg{width:15px;height:15px}
.contact-modal-opt:hover .arrow{background:var(--black);color:#fff}
[dir="rtl"] .contact-modal-opt .arrow svg{transform:scaleX(-1)}

/* WhatsApp lead-form modal */
.wa-modal{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:20px;visibility:hidden;pointer-events:none}
.wa-modal.open{visibility:visible;pointer-events:auto}
.wa-modal-backdrop{position:absolute;inset:0;background:rgba(12,22,32,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s}
.wa-modal.open .wa-modal-backdrop{opacity:1}
.wa-modal-card{
  position:relative;width:min(420px,100%);max-height:90vh;overflow-y:auto;background:#fff;border-radius:22px;padding:28px 26px;
  box-shadow:0 40px 90px -30px rgba(10,20,30,.45);
  transform:translateY(14px) scale(.97);opacity:0;transition:transform .35s var(--ease),opacity .3s;
}
.wa-modal.open .wa-modal-card{transform:none;opacity:1}
.wa-modal-close{position:absolute;top:16px;inset-inline-end:16px;width:32px;height:32px;border-radius:50%;border:none;background:var(--paper);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;transition:.2s}
.wa-modal-close:hover{background:var(--line);color:var(--ink)}
.wa-modal-close svg{width:16px;height:16px}
.wa-modal-head{display:flex;align-items:center;gap:.7rem;margin-bottom:1.3rem}
.wa-modal-icon{width:44px;height:44px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;flex:none}
.wa-modal-icon svg{width:22px;height:22px}
.wa-modal-head b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1.05rem}
.wa-modal-head small{color:var(--ink-soft);font-size:.85rem}
.wa-field{display:block;margin-bottom:1rem}
.wa-field>span{display:block;font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:.4rem}
.wa-field input,.wa-field select,.wa-field textarea{
  width:100%;padding:.75em .9em;border-radius:12px;border:1px solid var(--line);
  font-family:inherit;font-size:.95rem;background:var(--paper);transition:.2s;
}
.wa-field input:focus,.wa-field select:focus,.wa-field textarea:focus{border-color:var(--sky);box-shadow:0 0 0 4px var(--sky-soft);background:#fff;outline:none}
.wa-field textarea{resize:vertical;min-height:90px}
.wa-submit{
  width:100%;display:flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.9em 1.2em;border-radius:999px;border:none;background:#25D366;color:#fff;
  font-family:inherit;font-weight:700;font-size:.95rem;cursor:pointer;transition:.25s;
}
.wa-submit:hover{background:#1fb958;transform:translateY(-1px)}
.wa-submit svg{width:18px;height:18px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:140px;padding-bottom:100px;overflow:hidden}
.hero-sky{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 80% at 50% -10%, #cfeafd 0%, #a9d8f6 36%, #8fc9ef 60%, #cfe6f6 100%);
}
/* full-bleed background photo — covers the whole hero from the very top,
   with only a short fade at the bottom so it blends into the next section */
.hero-skyline{
  position:absolute;inset:0;z-index:-1;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 80%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 80%,transparent 100%);
}
.hero-slide{
  position:absolute;inset:0;background-size:cover;background-position:center 22%;
  opacity:0;transform:scale(1.05);transition:opacity 1.6s ease;
}
.hero-slide.active{opacity:.92;animation:heroKen 7.5s ease-out forwards}
@keyframes heroKen{from{transform:scale(1.05)}to{transform:scale(1.18)}}
/* fallback single image until the gallery script runs */
.hero-skyline.solo{
  background-image:url("https://images.unsplash.com/photo-1486325212027-8081e485255e?auto=format&fit=crop&w=1600&q=80");
  background-size:cover;background-position:center 22%;opacity:.92;
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:26%;z-index:-1;
  background:linear-gradient(180deg,transparent,var(--paper) 92%);
}
.hero-content{text-align:center;max-width:880px;margin-inline:auto}
.hero-eyebrow{
  font-family:"Fraunces",serif;font-style:italic;font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.6rem);color:#fff;
  text-shadow:0 2px 24px rgba(158,14,59,.4);margin-bottom:.2em;
}
.hero-title{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:clamp(2.6rem,7vw,5.4rem);line-height:1;letter-spacing:-.03em;color:#fff;
  text-shadow:0 6px 40px rgba(15,55,90,.35);
}
.hero-title>span{display:block;color:var(--sky);min-height:1.04em}
.hero-title .tw{display:inline}
.hero-title .caret{
  display:inline-block;width:.055em;height:.82em;background:currentColor;
  margin-inline-start:.08em;vertical-align:-.02em;border-radius:3px;
  animation:caretBlink 1.05s steps(1) infinite;
}
@keyframes caretBlink{50%{opacity:0}}
.hero-sub{
  margin:1.6rem auto 0;max-width:540px;color:#103247;font-weight:500;
  font-size:clamp(1rem,1.4vw,1.12rem);
}

/* AI sentiment badge — sits under the hero sub-copy */
.hero-ai-badge{
  display:inline-flex;align-items:center;gap:.6em;margin-top:1.5rem;
  padding:.6em 1.2em;border-radius:999px;
  background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.14));
  border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(10px) saturate(1.5);-webkit-backdrop-filter:blur(10px) saturate(1.5);
  color:#fff;font-size:.86rem;font-weight:600;letter-spacing:.01em;
  box-shadow:0 10px 24px -14px rgba(12,22,32,.45),inset 0 1px 0 rgba(255,255,255,.4);
}
.hero-ai-dot{
  width:8px;height:8px;border-radius:50%;flex:none;background:var(--sky);
  animation:aiDotGlow 3.6s ease-in-out infinite;
}
@keyframes aiDotGlow{
  0%,100%{background:var(--sky);box-shadow:0 0 7px 2px rgba(219,19,81,.6)}
  33%{background:var(--teal);box-shadow:0 0 8px 2px rgba(56,161,155,.6)}
  66%{background:var(--gold);box-shadow:0 0 8px 2px rgba(207,156,71,.6)}
}

/* per-card WhatsApp / Call quick-contact — overlaid on card images by
   default; `.inline` variant (detail-page sidebars) lays out as two
   full, labeled buttons instead. See card-contact.js. */
.card-contact{position:absolute;top:14px;inset-inline-start:14px;z-index:3;display:flex;gap:.4rem}
.cc-btn{
  width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;color:#fff;
  display:grid;place-items:center;box-shadow:0 4px 14px -4px rgba(12,22,32,.45);
  transition:transform .25s var(--ease),box-shadow .25s;flex:none;
}
.cc-btn svg{width:18px;height:18px}
.cc-wa{background:#25D366}
.cc-call{background:var(--ink)}
.cc-btn:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 8px 20px -6px rgba(12,22,32,.5)}
.card-contact.inline{position:static;gap:.7rem;margin:1rem 0}
.card-contact.inline .cc-btn{
  width:auto;height:auto;flex:1;border-radius:999px;padding:.75em 1.1em;gap:.5em;
  display:flex;align-items:center;justify-content:center;font-family:inherit;font-size:.88rem;font-weight:700;
}
.card-contact.inline .cc-btn svg{width:16px;height:16px;flex:none}

/* search bar — frosted glass panel */
.search-bar{
  position:relative;margin-top:64px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.42));
  backdrop-filter:blur(22px) saturate(1.6);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.6);
  display:flex;align-items:center;gap:.5rem;padding:11px;
  box-shadow:0 30px 60px -28px rgba(15,55,90,.45),inset 0 1px 0 rgba(255,255,255,.7);
}
.search-field{
  display:flex;align-items:center;gap:.6rem;padding:.7em 1.1em;border-radius:999px;flex:1;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  transition:background .25s,border-color .25s,box-shadow .25s;
}
.search-field:hover{background:rgba(255,255,255,.78);border-color:#fff;box-shadow:0 6px 16px -10px rgba(15,55,90,.4)}
.search-loc{flex:1.6}
.sf-icon{width:20px;height:20px;color:var(--sky);flex:none}
.sf-icon svg{width:20px;height:20px}
.search-field input{
  border:none;outline:none;background:none;font-family:inherit;font-size:.98rem;font-weight:500;color:var(--ink);
  width:100%;cursor:text;
}
.search-field input::placeholder{color:var(--ink-soft)}

/* custom dropdown (native <select> popups can't be styled cross-browser, so
   this is a real component: a trigger button + an absolutely-positioned list) */
.csel{position:relative;flex:1;min-width:0}
.csel-btn{
  display:flex;align-items:center;gap:.6rem;width:100%;border:none;background:none;cursor:pointer;
  font-family:inherit;font-size:.98rem;font-weight:600;color:var(--ink);padding:0;text-align:start;
}
.csel-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csel-caret{flex:none;width:20px;height:20px;display:grid;place-items:center;color:var(--sky-deep);transition:transform .25s var(--ease),color .25s}
.csel-caret svg{width:16px;height:16px}
.search-field:hover .csel-caret{color:var(--sky)}
.csel.open .csel-caret{color:var(--sky);transform:rotate(180deg)}
/* position/top/left/width are set inline by JS (position:fixed, computed from
   the trigger button's rect) — the hero's overflow:hidden would otherwise
   clip an absolutely-positioned list before it ever reaches the viewport edge */
.csel-list{
  z-index:250;list-style:none;max-height:280px;overflow-y:auto;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px;
  box-shadow:var(--shadow-lg);animation:cselIn .18s var(--ease) both;
}
@keyframes cselIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.csel-list li{
  padding:.65em .9em;border-radius:10px;font-size:.94rem;font-weight:500;color:var(--ink);
  cursor:pointer;transition:background .15s,color .15s;
}
.csel-list li:hover{background:var(--sky-soft);color:var(--sky-deep)}
.csel-list li.active{background:var(--black);color:#fff;font-weight:600}
/* glassmorphism "Find Property" button — sky-tinted frosted glass */
.search-go{
  flex:none;padding:1.05em 1.8em;color:#fff;
  background:linear-gradient(135deg,rgba(219,19,81,.92),rgba(158,14,59,.95));
  backdrop-filter:blur(8px) saturate(1.4);
  -webkit-backdrop-filter:blur(8px) saturate(1.4);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 12px 28px -12px rgba(158,14,59,.65),inset 0 1px 0 rgba(255,255,255,.45);
}
.search-go:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,rgba(219,19,81,1),rgba(158,14,59,1));
  box-shadow:0 18px 34px -12px rgba(158,14,59,.7),inset 0 1px 0 rgba(255,255,255,.55);
}

/* "Advanced" toggle — sits inline in the search bar, opens .adv-panel below */
.search-adv-btn{
  flex:none;display:inline-flex;align-items:center;gap:.5rem;padding:.85em 1.3em;border-radius:999px;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);color:var(--ink);
  font-family:inherit;font-size:.9rem;font-weight:700;cursor:pointer;transition:.25s var(--ease);
}
.search-adv-btn svg{width:17px;height:17px;flex:none}
.search-adv-btn:hover{background:rgba(255,255,255,.78);border-color:#fff}
.search-adv-btn.active{background:var(--black);border-color:var(--black);color:#fff}

/* Advanced filter panel — animates open/closed via a JS-measured max-height */
.adv-panel{
  overflow:hidden;max-height:0;opacity:0;margin-top:0;
  background:rgba(255,255,255,.9);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid rgba(255,255,255,.7);border-radius:24px;
  box-shadow:0 24px 50px -28px rgba(15,55,90,.4);
  transition:max-height .4s var(--ease),opacity .35s,margin-top .4s var(--ease);
}
.adv-panel.open{opacity:1;margin-top:14px}
.adv-panel[hidden]{display:block}
.adv-row{display:flex;gap:28px;padding:22px 26px 0;flex-wrap:wrap}
.adv-row:last-of-type{padding-bottom:6px}
.adv-group{flex:1;min-width:220px;display:flex;flex-direction:column;gap:.6rem}
.adv-group-grow{flex:2}
.adv-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);font-weight:700}
.adv-select{
  border:1px solid var(--line);background:#fff;border-radius:12px;padding:.7em .9em;
  font-family:inherit;font-size:.92rem;font-weight:600;color:var(--ink);cursor:pointer;
}
.adv-reset{
  display:block;margin:6px 26px 22px;padding:.6em 0;background:none;border:none;
  color:var(--sky-deep);font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}

/* dual-thumb range slider — two overlapping <input type=range>, thumb-only
   pointer-events so both remain independently draggable */
.dual-slider{position:relative;padding-top:4px}
.ds-track{position:relative;height:4px;border-radius:999px;background:var(--line);margin:14px 3px}
.ds-range{position:absolute;height:100%;background:var(--sky);border-radius:999px}
.ds-input{
  position:absolute;top:0;inset-inline-start:0;width:100%;margin:14px 0 0;height:4px;
  -webkit-appearance:none;appearance:none;background:none;pointer-events:none;
}
.ds-input::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;pointer-events:auto;width:18px;height:18px;border-radius:50%;
  background:#fff;border:3px solid var(--sky);box-shadow:0 2px 6px rgba(12,22,32,.3);cursor:pointer;
}
.ds-input::-moz-range-thumb{
  pointer-events:auto;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--sky);
  box-shadow:0 2px 6px rgba(12,22,32,.3);cursor:pointer;
}
.ds-input::-moz-range-track{background:none;border:none}
.ds-labels{display:flex;justify-content:space-between;margin-top:.5rem;font-size:.86rem;font-weight:700;color:var(--ink)}

/* live combined results grid (Projects + Units), shown once a search/filter
   is active */
.smart-results{margin-top:22px}
.smart-results-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding:0 4px}
.smart-results-head span{font-size:.9rem;font-weight:700;color:var(--ink-soft)}
.smart-results-clear{background:none;border:none;color:var(--sky-deep);font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.smart-results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.smart-results-empty{grid-column:1/-1;color:var(--ink-soft);text-align:center;padding:40px 0}
.result-kind-badge{
  position:absolute;bottom:14px;inset-inline-start:14px;z-index:2;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);color:var(--ink);
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.4em .8em;border-radius:999px;
}
.result-kind-badge.unit{color:var(--sky-deep)}

/* ============================================================
   SECTIONS base
   ============================================================ */
.section{padding:96px 0}
.section-head{display:grid;grid-template-columns:1fr .9fr;gap:2rem;align-items:end;margin-bottom:54px}
.section-lead{color:var(--ink-soft);font-size:1.05rem;max-width:46ch}
.section-lead.center{margin-inline:auto;margin-top:1rem}
.view-all{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;font-weight:600;color:var(--ink);font-size:.95rem;transition:gap .3s var(--ease),color .25s}
.view-all svg{width:18px;height:18px}
.view-all:hover{color:var(--sky);gap:.85rem}

/* filter chips — shared with pages.css's .filter-toolbar (subpages); the
   homepage doesn't load pages.css, so the Units section chips need this
   here too or they render unstyled (buttons glued together) */
.cat-chips{display:flex;gap:.6rem;overflow-x:auto;scrollbar-width:none;padding:3px}
.cat-chips::-webkit-scrollbar{display:none}
.cat-chips .chip{
  flex:none;border:1px solid rgba(12,22,32,.16);background:#fff;color:var(--ink);
  padding:.55em 1.2em;border-radius:999px;font-family:inherit;font-size:.86rem;font-weight:600;
  cursor:pointer;transition:.25s var(--ease);white-space:nowrap;box-shadow:var(--shadow-sm);
}
.cat-chips .chip:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}
.cat-chips .chip.active{background:var(--black);color:#fff;border-color:var(--black)}

/* ============================================================
   BY CITIES
   ============================================================ */
.cities{background:linear-gradient(180deg,#fff,var(--paper))}
.city-grid{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:20px;
}
.city-card{
  position:relative;border-radius:var(--r);overflow:hidden;cursor:pointer;
  background-image:linear-gradient(180deg,rgba(8,16,28,0) 35%,rgba(8,16,28,.78)),var(--img);
  background-size:cover;background-position:center;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;padding:22px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.city-card::after{content:"";position:absolute;inset:0;background:var(--img);background-size:cover;background-position:center;z-index:-1;transition:transform .8s var(--ease)}
.city-card:hover{box-shadow:var(--shadow-md)}
.city-card:hover::after{transform:scale(1.08)}
.city-card.big{grid-row:span 2}
.city-card.wide{grid-column:span 2}
.city-meta h3{font-family:"Bricolage Grotesque",sans-serif;font-size:1.5rem;font-weight:700}
.city-meta p{font-size:.85rem;opacity:.85}
.city-count{
  position:absolute;top:18px;inset-inline-end:18px;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.25);padding:.4em .9em;border-radius:999px;font-size:.78rem;font-weight:600;
}

/* ============================================================
   JOURNEY / STATS
   ============================================================ */
.journey .display-head{margin-bottom:20px}
.journey-lead{max-width:620px;margin-inline:auto;color:var(--ink-soft);margin-bottom:48px}
.journey-card{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow-md)}
.journey-photo{aspect-ratio:24/9;background-size:cover;background-position:center 35%;min-height:340px}
.journey-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,16,28,.45))}
.stats{
  position:absolute;left:24px;right:24px;bottom:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.stat{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-radius:18px;padding:22px 24px}
.stat-num{font-family:"Bricolage Grotesque",sans-serif;font-size:2.4rem;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.02em}
.stat p{font-size:.82rem;color:var(--ink-soft);margin-top:.6rem;line-height:1.45}

/* ============================================================
   RECENT PROJECTS
   ============================================================ */
.project-list{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.project{
  display:grid;grid-template-columns:.85fr 1fr;background:#fff;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.project:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.project-img{position:relative;min-height:220px;overflow:hidden;background:#dfe6ec}
.pg-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;
  transform:scale(1.04);transition:opacity 1s var(--ease),transform 6s linear}
.pg-slide.active{opacity:1;transform:scale(1.12)}
.project:hover .pg-slide.active{transform:scale(1.16)}
.pg-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;gap:6px;justify-content:center;z-index:2;pointer-events:none}
.pg-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:.35s var(--ease)}
.pg-dots i.on{background:#fff;width:18px;border-radius:3px}
.pg-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(8,16,24,.28))}
.project-body{padding:26px 28px;display:flex;flex-direction:column;justify-content:center}
.project-tag{
  align-self:flex-start;background:var(--sky-soft);color:var(--sky-deep);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;padding:.4em .9em;border-radius:999px;margin-bottom:.9rem;
}
.project-body h3{font-family:"Bricolage Grotesque",sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:-.01em}
.project-body p{color:var(--ink-soft);font-size:.92rem;margin:.5rem 0 1.2rem}
.project-foot{display:flex;gap:1rem;color:var(--ink-soft);font-size:.85rem;font-weight:500;border-top:1px solid var(--line);padding-top:.9rem}
.project-foot span:first-child{color:var(--ink)}
.project-foot span:last-child{margin-inline-start:auto;font-family:"Fraunces",serif;font-style:italic}

/* developer + executive consultants — shown on the homepage's recent-project cards */
.project-dev{display:flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--ink-soft);margin-bottom:.9rem}
.project-dev b{color:var(--ink);font-weight:600}
.project-dev .av{
  width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--sky-soft);color:var(--sky-deep);font-weight:700;font-size:.74rem;
  font-family:"Bricolage Grotesque",sans-serif;
}
.project-dev .av.has-logo{background:#fff;border:1px solid var(--line);padding:3px}
.project-dev .av.has-logo img{width:100%;height:100%;object-fit:contain}
.project-consultants{margin-bottom:1rem}
.pc-label{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-soft);font-weight:700;margin-bottom:.4rem}
.pc-avatars{display:flex;align-items:center}
.pc-avatar{
  width:26px;height:26px;border-radius:50%;flex:none;object-fit:contain;background:#fff;
  border:1px solid var(--line);box-shadow:0 0 0 2px #fff;margin-inline-start:-8px;padding:3px;
}
.pc-avatar:first-child{margin-inline-start:0}
.pc-avatar-fallback{
  display:grid;place-items:center;background:var(--paper);color:var(--ink-soft);
  font-weight:700;font-size:.7rem;font-family:"Bricolage Grotesque",sans-serif;
}
.pc-names{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:.45rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============================================================
   DEVELOPERS WHO TRUST US
   ============================================================ */
.developers{background:linear-gradient(180deg,var(--paper),#fff)}
.dev-head{margin-bottom:46px}
.dev-head .section-lead{max-width:54ch}
.logo-wall{
  position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.logo-track{display:flex;width:max-content;animation:logoMarquee 34s linear infinite}
.logo-wall:hover .logo-track{animation-play-state:paused}
.logo{
  flex:none;display:grid;place-items:center;padding:20px 32px;min-width:200px;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.35rem;color:var(--ink);
  letter-spacing:.01em;transition:.3s var(--ease);filter:grayscale(1);opacity:.5;
  border-right:1px solid var(--line);
}
.logo img{display:block;max-height:64px;width:auto;max-width:180px;object-fit:contain}
.logo:hover{filter:grayscale(0);opacity:1;color:var(--sky-deep)}
@keyframes logoMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials .display-head{margin-bottom:46px}
/* four review cards in a row, fading between pages */
.testi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch}
.testi-card{
  display:flex;flex-direction:column;gap:1rem;text-align:start;
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 24px;
  box-shadow:var(--shadow-sm);
  opacity:0;transform:translateY(20px) scale(.98);
  transition:opacity .55s var(--ease),transform .55s var(--ease),box-shadow .4s var(--ease);
  transition-delay:var(--d,0ms);
}
.testi-grid.in .testi-card{opacity:1;transform:none}
.testi-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);transition-delay:0ms}
.tc-stars{display:flex;gap:.18rem;color:var(--gold)}
.tc-stars svg{width:18px;height:18px}
.tc-quote{
  font-family:"Fraunces",serif;font-size:1.04rem;line-height:1.5;color:var(--ink);font-weight:400;
  flex:1;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;
}
.tc-person{display:flex;align-items:center;gap:.7rem;border-top:1px solid var(--line);padding-top:1rem}
.tc-person img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.tc-person h4{font-family:"Bricolage Grotesque",sans-serif;font-size:.95rem;font-weight:600}
.tc-person p{font-size:.8rem;color:var(--ink-soft)}
.testi-nav{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:2.6rem}
.round-btn{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:.25s;
}
.round-btn svg{width:20px;height:20px}
.round-btn:hover{background:var(--black);color:#fff;border-color:var(--black)}
.testi-count{font-family:"Fraunces",serif;font-style:italic;font-size:1.1rem;color:var(--ink-soft);min-width:64px}
.testi-count i{margin:0 .3rem;opacity:.5}

/* ============================================================
   CTA
   ============================================================ */
.cta-banner{
  position:relative;border-radius:28px;overflow:hidden;
  background:radial-gradient(120% 140% at 0% 0%, #f2a8bc, #e8567e 55%, #db1351);
  display:grid;grid-template-columns:1.1fr 1fr;align-items:center;min-height:300px;
  box-shadow:var(--shadow-md);
}
.cta-text{padding:54px 56px;color:#fff;z-index:1}
.cta-text h2{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:700;line-height:1.05;letter-spacing:-.02em}
.cta-text h2 em{font-family:"Fraunces",serif;font-style:italic;font-weight:400}
.cta-text p{margin:1rem 0 1.8rem;max-width:38ch;color:rgba(255,255,255,.92)}
.cta-img{align-self:stretch;background-size:cover;background-position:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);color:#cdd6e0;padding:72px 0 30px;margin-top:40px;position:relative;overflow:hidden}
.footer .container{position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1)}
.brand--light{color:#fff;margin-bottom:1.2rem}
.footer-brand p{font-size:.92rem;color:#9aa6b4;max-width:32ch;margin-bottom:1.4rem}
.socials{display:flex;gap:.7rem}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;color:#cdd6e0;transition:.25s}
.socials a svg{width:18px;height:18px}
.socials a:hover{background:var(--sky);border-color:var(--sky);color:#fff}
.footer-col h4{font-family:"Bricolage Grotesque",sans-serif;font-size:1rem;color:#fff;margin-bottom:1.1rem}
.footer-col a{display:block;font-size:.92rem;color:#9aa6b4;padding:.32rem 0;transition:.2s}
.footer-col a:hover{color:#fff;padding-inline-start:.3rem}
.footer-news p{font-size:.9rem;color:#9aa6b4;margin-bottom:1rem}
.news-form{display:flex;gap:.5rem;background:rgba(255,255,255,.07);padding:6px;border-radius:999px}
.news-form input{flex:1;background:none;border:none;outline:none;color:#fff;padding:.6em 1em;font-family:inherit}
.news-form input::placeholder{color:#7d8896}
.news-msg{margin-top:.6rem;font-size:.85rem;font-weight:500}
.news-msg.ok{color:#7fd9a8}
.news-msg.err{color:#f2a5a5}
.footer-bottom{display:flex;justify-content:space-between;padding-top:24px;font-size:.85rem;color:#7d8896}

/* ============================================================
   STARFIELD — drifting, twinkling particles behind hero + footer
   ============================================================ */
.stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
.hero .stars{z-index:-1;opacity:.85}
.footer .stars{z-index:0;opacity:.9}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   AI MATCHMAKER WIDGET — floating pulsing FAB + chat panel
   ============================================================ */
/* --ai-fab-bottom is measured live by ai-widget.js so the button always
   clears the hero search bar, no matter the viewport height — 26px is the
   default once that bar has scrolled out of view (or on pages without one) */
.ai-widget{position:fixed;inset-inline-end:26px;bottom:var(--ai-fab-bottom,26px);z-index:300;transition:bottom .25s var(--ease)}

.ai-fab{
  position:relative;display:inline-flex;align-items:center;gap:.65rem;
  padding:.95em 1.35em .95em 1em;border-radius:999px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#12283b,#0a1826);color:#fff;
  font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:.95rem;
  box-shadow:0 10px 30px -10px rgba(10,20,30,.55);
  transition:transform .35s var(--ease);
  animation:aiShadowPulse 5.5s ease-in-out infinite;
}
.ai-fab:hover{transform:translateY(-3px)}
.ai-fab:active{transform:translateY(-1px) scale(.98)}
/* the shadow hugging the button cycles through brand colors in place —
   no rotation, just a gentle glow that breathes and shifts hue */
@keyframes aiShadowPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(219,19,81,0),0 10px 30px -10px rgba(10,20,30,.55)}
  25%{box-shadow:0 0 26px 7px rgba(219,19,81,.5),0 10px 30px -10px rgba(10,20,30,.55)}
  50%{box-shadow:0 0 30px 9px rgba(56,161,155,.48),0 10px 30px -10px rgba(10,20,30,.55)}
  75%{box-shadow:0 0 28px 8px rgba(207,156,71,.46),0 10px 30px -10px rgba(10,20,30,.55)}
}
/* a soft blurred aura behind the button that breathes in size/opacity only */
.ai-fab-glow{
  position:absolute;inset:-13px;border-radius:999px;z-index:-1;filter:blur(16px);
  background:
    radial-gradient(circle at 28% 32%, var(--sky) 0%, transparent 62%),
    radial-gradient(circle at 72% 68%, var(--teal) 0%, transparent 62%),
    radial-gradient(circle at 50% 85%, var(--gold) 0%, transparent 65%);
  animation:aiGlowBreathe 5.5s ease-in-out infinite;
}
@keyframes aiGlowBreathe{
  0%,100%{opacity:.32;transform:scale(.92)}
  50%{opacity:.7;transform:scale(1.1)}
}
.ai-fab-icon{width:20px;height:20px;flex:none;display:grid;place-items:center}
.ai-fab-icon svg{width:20px;height:20px}
.ai-fab-label{white-space:nowrap}

/* chat panel — always rides 74px above wherever the fab button currently is */
.ai-panel{
  position:fixed;inset-inline-end:26px;bottom:calc(var(--ai-fab-bottom,26px) + 74px);width:min(400px,calc(100vw - 40px));
  max-height:min(640px,74vh);display:flex;flex-direction:column;
  background:#fff;border-radius:22px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(10,20,30,.45),0 0 0 1px rgba(12,22,32,.06);
  transform:translateY(18px) scale(.97);opacity:0;pointer-events:none;
  transition:transform .4s var(--ease),opacity .3s;z-index:300;
}
.ai-panel.open{transform:none;opacity:1;pointer-events:auto}

.ai-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:16px 18px;background:linear-gradient(135deg,#0d2233,#123449);color:#fff;flex:none;
}
.ai-panel-id{display:flex;align-items:center;gap:.7rem;min-width:0}
.ai-avatar{
  width:38px;height:38px;border-radius:50%;position:relative;flex:none;
  display:grid;place-items:center;background:#fff;color:var(--sky-deep);
}
.ai-avatar::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;z-index:-1;filter:blur(3px);
  background:
    radial-gradient(circle at 30% 30%, var(--sky) 0%, transparent 60%),
    radial-gradient(circle at 70% 70%, var(--teal) 0%, transparent 60%),
    radial-gradient(circle at 50% 90%, var(--gold) 0%, transparent 65%);
  animation:aiGlowBreathe 5.5s ease-in-out infinite;
}
.ai-avatar svg{width:18px;height:18px}
.ai-panel-id b{font-family:"Bricolage Grotesque",sans-serif;font-size:1rem;display:block}
.ai-panel-id small{color:rgba(255,255,255,.7);font-size:.78rem}
.ai-panel-close{background:rgba(255,255,255,.12);border:none;color:#fff;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:.2s;flex:none}
.ai-panel-close:hover{background:rgba(255,255,255,.22)}
.ai-panel-close svg{width:15px;height:15px}

.ai-panel-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--paper)}
.ai-msg{max-width:86%;padding:.75em 1em;border-radius:16px;font-size:.92rem;line-height:1.5;animation:aiPop .3s var(--ease)}
@keyframes aiPop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.ai-msg.bot{align-self:flex-start;background:#fff;color:var(--ink);border-bottom-left-radius:4px;box-shadow:var(--shadow-sm)}
.ai-msg.user{align-self:flex-end;background:var(--black);color:#fff;border-bottom-right-radius:4px}

.ai-typing{align-self:flex-start;display:flex;gap:4px;padding:.85em 1.1em;background:#fff;border-radius:16px;border-bottom-left-radius:4px;box-shadow:var(--shadow-sm)}
.ai-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);opacity:.5;animation:aiDot 1.2s ease-in-out infinite;display:block}
.ai-typing i:nth-child(2){animation-delay:.15s}
.ai-typing i:nth-child(3){animation-delay:.3s}
@keyframes aiDot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.ai-panel-foot{padding:12px 16px;border-top:1px solid var(--line);flex:none;background:#fff}
.ai-panel-foot:empty{padding:0;border-top:none}
.ai-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.ai-chip{font-family:inherit;font-size:.86rem;font-weight:500;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.55em 1.05em;cursor:pointer;transition:.2s}
.ai-chip:hover{border-color:var(--sky);color:var(--sky-deep)}

/* always-on free-text input — lets the customer chat with the real AI at any time */
.ai-input-row{display:flex;align-items:center;gap:.5rem;padding:12px 14px 16px;border-top:1px solid var(--line);flex:none;background:#fff}
.ai-input-row input{
  flex:1;border:1px solid var(--line);background:var(--paper);border-radius:999px;
  padding:.7em 1.1em;font-family:inherit;font-size:.9rem;color:var(--ink);outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.ai-input-row input:focus{border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-soft);background:#fff}
.ai-input-row input:disabled{opacity:.6}
.ai-input-row button{
  flex:none;width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:var(--black);color:#fff;display:grid;place-items:center;transition:transform .2s,opacity .2s;
}
.ai-input-row button svg{width:17px;height:17px}
.ai-input-row button:hover{transform:scale(1.06)}
.ai-input-row button:disabled{opacity:.5;cursor:default;transform:none}

.ai-match{display:flex;gap:.75rem;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s;text-align:start;width:100%}
.ai-match:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.ai-match img{width:60px;height:60px;border-radius:10px;object-fit:cover;flex:none}
.ai-match-body{min-width:0}
.ai-match-body h4{font-family:"Bricolage Grotesque",sans-serif;font-size:.92rem;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-match-body p{font-size:.78rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.ai-match-body b{color:var(--sky-deep);font-size:.85rem}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .city-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
  .city-card.wide{grid-column:span 2}
  .project-list{grid-template-columns:1fr}
  .smart-results-grid{grid-template-columns:repeat(2,1fr)}
  .adv-row{flex-wrap:wrap}
  .section-head{grid-template-columns:1fr}
  .logo-wall{grid-template-columns:repeat(3,1fr)}
  .cta-banner{grid-template-columns:1fr}
  .cta-img{min-height:200px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%);mask-image:linear-gradient(180deg,transparent,#000 30%)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .testi-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .nav{
    /* explicit viewport-relative height instead of top:0;bottom:0 auto-sizing —
       .site-header.scrolled's backdrop-filter makes it a new containing block
       for this fixed element (per spec, filter/backdrop-filter on an ancestor
       does that), so "bottom:0" was resolving against the short header box
       instead of the real viewport and collapsing the drawer to header-height. */
    position:fixed;top:0;right:0;left:auto;height:100vh;height:100dvh;
    width:min(80vw,320px);background:#fff;flex-direction:column;
    align-items:stretch;padding:100px 32px;gap:.4rem;transform:translateX(100%);
    transition:transform .4s var(--ease);box-shadow:var(--shadow-lg);z-index:90;
    border:none;border-radius:0;
  }
  .nav.open{transform:none}
  /* the desktop .site-header.scrolled .nav rule (3 classes) outranks the
     plain mobile .nav{background:#fff} above (1 class) once the header
     picks up .scrolled, so the open drawer turned semi-transparent under
     scroll — pin it back to solid white with a same-or-higher-specificity
     override instead of relying on source order. */
  .site-header.scrolled .nav.open{background:#fff;box-shadow:var(--shadow-lg);backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav a{color:var(--ink)!important;background:none!important;box-shadow:none!important;font-size:1.1rem;padding:.7em 0;border-bottom:1px solid var(--line);border-radius:0}
  .nav-toggle{display:flex}
  .search-bar{flex-direction:column;border-radius:24px;align-items:stretch}
  .search-field{border-left:none!important;border-bottom:1px solid var(--line)}
  .search-adv-btn{justify-content:center}
  .search-go{margin-top:.4rem}
  .adv-row{gap:18px;padding:18px 18px 0}
  .adv-row:last-of-type{padding-bottom:2px}
  .adv-reset{margin:4px 18px 18px}
  .smart-results-grid{grid-template-columns:1fr}
  .city-grid{grid-template-columns:1fr}
  .city-card.wide,.city-card.big{grid-column:auto;grid-row:auto}
  .stats{position:static;grid-template-columns:1fr;margin-top:16px;left:0;right:0}
  .journey-card{background:var(--paper)}
  .journey-card::before{display:none}
  .project{grid-template-columns:1fr}
  .logo-wall{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:.4rem;text-align:center}
  .testi-grid{grid-template-columns:1fr}
  .section{padding:70px 0}
  .hero-ai-badge{font-size:.78rem;text-align:start;padding:.55em 1em}
  .ai-widget{inset-inline-end:14px}
  .ai-fab-label{display:none}
  .ai-fab{padding:.9em}
  .ai-panel{inset-inline:10px;width:auto}
  .header-inner{padding-block:0}
  .brand-mark{width:40px;height:40px}
  .brand-mark svg{width:40px;height:40px}
  .brand--logo-only .brand-mark{width:52px;height:52px}
  .brand--logo-only .brand-mark svg{width:52px;height:52px}
}