/* ============================================================
   RealEstate Hup — Design System (original PropTech identity)
   Benchmark: Nawy-level clarity. Own palette: teal on white.
============================================================ */
:root{
  --rh-primary:#0E7C66; --rh-primary-600:#0B6A57; --rh-primary-700:#0A5648; --rh-primary-050:#E7F4F0;
  --rh-ink:#12211D; --rh-ink-2:#3B4A45; --rh-muted:#6B7B75;
  --rh-bg:#FFFFFF; --rh-bg-soft:#F6F8F7; --rh-line:#E6EBE9; --rh-line-2:#D6DEDB;
  --rh-accent:#E4A11B; /* used ONLY for price emphasis, sparingly */
  --rh-error:#B42318; --rh-error-bg:#FEF3F2; /* form validation feedback (paired with text/icon, never colour-only) */
  --rh-white:#fff;
  --rh-radius:14px; --rh-radius-sm:10px; --rh-radius-btn:10px; --rh-radius-pill:999px;
  --rh-shadow:0 1px 2px rgba(18,33,29,.04),0 6px 20px rgba(18,33,29,.06);
  --rh-shadow-lg:0 8px 30px rgba(18,33,29,.10);
  --rh-container:1400px; --rh-gutter:24px;
  --rh-font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans Arabic',sans-serif;
  --rh-ease:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.rh{margin:0;font-family:var(--rh-font);color:var(--rh-ink);background:var(--rh-bg);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
body.rh[dir="rtl"]{font-family:'Noto Kufi Arabic','Plus Jakarta Sans',system-ui,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.2;font-weight:800;letter-spacing:-.02em}
p{margin:0}
button{font-family:inherit;cursor:pointer}
.rh-container{max-width:var(--rh-container);margin-inline:auto;padding-inline:var(--rh-gutter)}
.rh-section{padding-block:56px}
.rh-section--tight{padding-block:40px}
.rh-eyebrow{color:var(--rh-primary);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.rh-h2{font-size:clamp(1.5rem,2.4vw,2.15rem)}
.rh-sub{color:var(--rh-muted);margin-top:8px;max-width:60ch}
.rh-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.rh-link-more{color:var(--rh-primary);font-weight:700;white-space:nowrap}
.rh-link-more:hover{text-decoration:underline}

/* buttons */
.rh-btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;border-radius:var(--rh-radius-btn);padding:12px 20px;border:1px solid transparent;transition:transform .12s var(--rh-ease),background .15s,box-shadow .15s;font-size:.95rem}
.rh-btn:active{transform:translateY(1px)}
.rh-btn--primary{background:var(--rh-primary);color:#fff}
.rh-btn--primary:hover{background:var(--rh-primary-600);box-shadow:var(--rh-shadow)}
.rh-btn--ghost{background:#fff;color:var(--rh-ink);border-color:var(--rh-line-2)}
.rh-btn--ghost:hover{border-color:var(--rh-primary);color:var(--rh-primary)}
.rh-btn--wa{background:#25D366;color:#0b3d20}
.rh-btn--wa:hover{filter:brightness(.96)}
.rh-btn--block{width:100%;justify-content:center}
.rh-icn{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;flex:none}

/* ============ HEADER ============ */
.rh-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--rh-line)}
.rh-header__in{display:flex;align-items:center;gap:24px;height:72px}
.rh-logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.15rem;letter-spacing:-.03em;color:var(--rh-ink)}
.rh-logo__mark{width:30px;height:30px;border-radius:8px;background:var(--rh-primary);display:grid;place-items:center;color:#fff}
.rh-logo b{color:var(--rh-primary)}
.rh-nav{display:flex;align-items:center;gap:4px;margin-inline-start:8px}
.rh-nav a{padding:9px 12px;border-radius:8px;font-weight:600;font-size:.95rem;color:var(--rh-ink-2)}
.rh-nav a:hover{background:var(--rh-bg-soft);color:var(--rh-primary)}
.rh-header__right{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.rh-lang{border:1px solid var(--rh-line-2);background:#fff;border-radius:8px;padding:8px 12px;font-weight:700;color:var(--rh-ink-2)}
.rh-burger{display:none;border:1px solid var(--rh-line-2);background:#fff;border-radius:8px;width:42px;height:42px;place-items:center}

/* ============ HERO + SEARCH ============ */
.rh-hero{position:relative;background:var(--rh-primary-700)}
.rh-hero__bg{position:absolute;inset:0;overflow:hidden}
.rh-hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.55}
.rh-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,86,72,.55),rgba(10,86,72,.82))}
.rh-hero__in{position:relative;padding-block:64px 76px}
.rh-hero h1{color:#fff;font-size:clamp(1.9rem,4.4vw,3.25rem);max-width:16ch}
.rh-hero p{color:#dff0eb;margin-top:14px;font-size:clamp(1rem,1.4vw,1.15rem);max-width:52ch}
.rh-search{margin-top:28px;background:#fff;border-radius:18px;box-shadow:var(--rh-shadow-lg);padding:14px;max-width:100%}
.rh-search__tabs{display:flex;gap:6px;margin-bottom:12px}
.rh-tab{border:0;background:transparent;padding:9px 16px;border-radius:var(--rh-radius-pill);font-weight:700;color:var(--rh-muted)}
.rh-tab[aria-selected="true"]{background:var(--rh-primary-050);color:var(--rh-primary-700)}
.rh-search__row{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;align-items:stretch}
.rh-field{display:flex;flex-direction:column;gap:4px;background:var(--rh-bg-soft);border:1px solid var(--rh-line);border-radius:12px;padding:9px 14px;min-width:0}
.rh-field label{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--rh-muted)}
.rh-field input,.rh-field select{border:0;background:transparent;font-size:1rem;color:var(--rh-ink);font-family:inherit;outline:none;width:100%}
.rh-search__go{align-self:stretch}
.rh-search__adv{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.rh-chip{border:1px solid var(--rh-line-2);background:#fff;border-radius:var(--rh-radius-pill);padding:7px 14px;font-weight:600;font-size:.85rem;color:var(--rh-ink-2)}
.rh-chip:hover{border-color:var(--rh-primary);color:var(--rh-primary)}

/* ============ QUICK DISCOVERY ============ */
/* Responsive WRAPPING grid (was a horizontal carousel) — no sideways swipe, cards
   wrap onto new rows; the page scrolls vertically only. */
.rh-scroller{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.rh-disc{background:var(--rh-bg-soft);border:1px solid var(--rh-line);border-radius:var(--rh-radius);padding:18px;transition:transform .15s var(--rh-ease),box-shadow .15s}
.rh-disc:hover{transform:translateY(-3px);box-shadow:var(--rh-shadow);border-color:var(--rh-line-2)}
.rh-disc__ic{width:44px;height:44px;border-radius:12px;background:var(--rh-primary-050);color:var(--rh-primary);display:grid;place-items:center;margin-bottom:12px}
.rh-disc h3{font-size:1.02rem}
.rh-disc p{color:var(--rh-muted);font-size:.86rem;margin-top:4px}

/* ============ CARDS: project / property ============ */
.rh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.rh-grid--3{grid-template-columns:repeat(3,1fr)}
.rh-card{background:#fff;border:1px solid var(--rh-line);border-radius:var(--rh-radius);overflow:hidden;transition:transform .16s var(--rh-ease),box-shadow .16s;display:flex;flex-direction:column}
.rh-card:hover{transform:translateY(-4px);box-shadow:var(--rh-shadow-lg)}
.rh-card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--rh-bg-soft)}
.rh-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--rh-ease)}
.rh-card:hover .rh-card__media img{transform:scale(1.05)}
.rh-badge{position:absolute;top:12px;inset-inline-start:12px;background:var(--rh-primary);color:#fff;font-weight:700;font-size:.72rem;padding:5px 10px;border-radius:var(--rh-radius-pill);letter-spacing:.02em}
.rh-badge--dev{background:#0A5648}
.rh-card__body{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.rh-card__title{font-size:1.05rem;font-weight:800}
.rh-card__dev{color:var(--rh-primary);font-weight:700;font-size:.85rem}
.rh-card__area{color:var(--rh-muted);font-size:.85rem;display:flex;align-items:center;gap:5px}
.rh-price{margin-top:6px}
.rh-price small{color:var(--rh-muted);font-size:.72rem;display:block;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.rh-price b{font-size:1.15rem;font-weight:800}
.rh-price .rh-onreq{font-size:.95rem;color:var(--rh-ink-2);font-weight:700}
.rh-card__meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--rh-ink-2);font-size:.82rem;margin-top:2px}
.rh-card__meta span{display:flex;align-items:center;gap:5px}
.rh-card__foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--rh-line)}
.rh-pill-plan{background:var(--rh-primary-050);color:var(--rh-primary-700);font-weight:700;font-size:.76rem;padding:5px 10px;border-radius:var(--rh-radius-pill)}

/* area / developer tiles */
.rh-area{position:relative;border-radius:var(--rh-radius);overflow:hidden;aspect-ratio:3/4;display:block}
.rh-area img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--rh-ease)}
.rh-area:hover img{transform:scale(1.06)}
.rh-area__ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.72));display:flex;flex-direction:column;justify-content:flex-end;padding:16px;color:#fff}
.rh-area__ov h3{font-size:1.1rem}
.rh-area__ov span{font-size:.82rem;opacity:.9}
.rh-dev{display:flex;flex-direction:column;align-items:center;gap:10px;background:#fff;border:1px solid var(--rh-line);border-radius:var(--rh-radius);padding:22px 14px;text-align:center;transition:box-shadow .15s,transform .15s}
.rh-dev:hover{box-shadow:var(--rh-shadow);transform:translateY(-3px)}
.rh-dev__logo{width:72px;height:72px;border-radius:14px;background:var(--rh-bg-soft);display:grid;place-items:center;font-weight:800;color:var(--rh-primary);font-size:1.3rem;border:1px solid var(--rh-line);overflow:hidden}
.rh-dev__logo--img{background:var(--rh-white);padding:12px}
.rh-dev b{font-size:.95rem}.rh-dev span{color:var(--rh-muted);font-size:.8rem}

/* ============ LEAD / WHY / FAQ ============ */
.rh-lead{background:linear-gradient(120deg,var(--rh-primary-700),var(--rh-primary));border-radius:22px;padding:clamp(24px,4vw,44px);color:#fff;display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
.rh-lead h2{color:#fff;font-size:clamp(1.4rem,2.4vw,2rem)}
.rh-lead p{color:#dff0eb;margin-top:10px}
.rh-lead__form{background:#fff;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px}
.rh-input{border:1px solid var(--rh-line-2);border-radius:10px;padding:12px 14px;font-size:1rem;font-family:inherit;color:var(--rh-ink);width:100%}
.rh-input:focus{outline:2px solid var(--rh-primary-050);border-color:var(--rh-primary)}
.rh-why{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rh-why__item{display:flex;gap:14px}
.rh-why__ic{width:44px;height:44px;flex:none;border-radius:12px;background:var(--rh-primary-050);color:var(--rh-primary);display:grid;place-items:center}
.rh-why__item h3{font-size:1rem}.rh-why__item p{color:var(--rh-muted);font-size:.88rem;margin-top:3px}
.rh-faq details{border:1px solid var(--rh-line);border-radius:12px;padding:16px 18px;margin-bottom:12px;background:#fff}
.rh-faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.rh-faq summary::-webkit-details-marker{display:none}
.rh-faq details[open]{border-color:var(--rh-line-2)}
.rh-faq p{color:var(--rh-ink-2);margin-top:10px}

/* ============ SEO LINKS + FOOTER ============ */
.rh-seo{background:var(--rh-bg-soft);border-top:1px solid var(--rh-line)}
.rh-seo__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.rh-seo h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--rh-muted);margin-bottom:12px}
.rh-seo a{display:block;color:var(--rh-ink-2);font-size:.9rem;padding:4px 0}
.rh-seo a:hover{color:var(--rh-primary)}
.rh-footer{background:var(--rh-ink);color:#c9d4d0}
.rh-footer__grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px;padding-block:48px}
.rh-footer h4{color:#fff;font-size:.95rem;margin-bottom:14px}
.rh-footer a{display:block;color:#c9d4d0;padding:5px 0;font-size:.9rem}
.rh-footer a:hover{color:#fff}
.rh-footer__brand p{margin-top:12px;font-size:.88rem;line-height:1.6}
.rh-disclosure{border-top:1px solid rgba(255,255,255,.12);padding-block:20px;font-size:.8rem;color:#9fb0ab;line-height:1.6}
.rh-footer__legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:28px;font-size:.82rem;color:#9fb0ab}

/* ============ MOBILE BOTTOM BAR ============ */
.rh-bottombar{position:fixed;bottom:0;inset-inline:0;z-index:60;background:#fff;border-top:1px solid var(--rh-line);display:none;grid-template-columns:repeat(4,1fr);padding:6px 4px env(safe-area-inset-bottom)}
.rh-bottombar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;font-size:.68rem;font-weight:600;color:var(--rh-muted)}
.rh-bottombar a.is-active{color:var(--rh-primary)}
.rh-bottombar .rh-icn{width:22px;height:22px}

/* ============ RESPONSIVE ============ */
@media(max-width:1100px){.rh-grid{grid-template-columns:repeat(3,1fr)}.rh-footer__grid{grid-template-columns:1fr 1fr 1fr}.rh-lead{grid-template-columns:1fr}}
@media(max-width:900px){
  .rh-nav,.rh-header__right .rh-desk{display:none}
  .rh-burger{display:grid}
  .rh-search__row{grid-template-columns:1fr 1fr;gap:8px}
  .rh-search__go{grid-column:1/-1}
  .rh-grid,.rh-grid--3{grid-template-columns:repeat(2,1fr);gap:14px}
  .rh-why{grid-template-columns:1fr}
  .rh-seo__cols{grid-template-columns:1fr 1fr}
  .rh-footer__grid{grid-template-columns:1fr 1fr}
  .rh-bottombar{display:grid}
  body.rh{padding-bottom:64px}
  .rh-section{padding-block:40px}
}
@media(max-width:560px){
  .rh-search__row{grid-template-columns:1fr}
  .rh-grid,.rh-grid--3{grid-template-columns:1fr 1fr;gap:12px}
  .rh-hero__in{padding-block:44px 56px}
  .rh-seo__cols{grid-template-columns:1fr 1fr}
  .rh-footer__grid{grid-template-columns:1fr}
}
@media(max-width:380px){.rh-grid,.rh-grid--3{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== Directory search + A-Z (developers/areas archives) ===== */
.rh-dirsearch{position:relative;margin-top:20px;max-width:560px}
.rh-dirsearch__ic{position:absolute;inset-inline-start:16px;top:50%;transform:translateY(-50%);color:var(--rh-muted)}
.rh-dirsearch input{width:100%;height:52px;border:1px solid var(--rh-line-2);border-radius:var(--rh-radius-btn);padding:0 44px;font-size:1rem;font-family:inherit;color:var(--rh-ink);background:#fff}
.rh-dirsearch input:focus{outline:2px solid var(--rh-primary-050);border-color:var(--rh-primary)}
.rh-dirsearch__clear{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);border:0;background:var(--rh-bg-soft);width:28px;height:28px;border-radius:50%;font-size:18px;color:var(--rh-muted);cursor:pointer}
.rh-dir-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.rh-dir-count{color:var(--rh-muted);font-size:.95rem}
.rh-dir-count strong{color:var(--rh-ink);font-size:1.05rem}
.rh-az{display:flex;flex-wrap:wrap;gap:2px}
.rh-az button{border:0;background:transparent;color:var(--rh-ink-2);font-weight:700;font-size:.82rem;width:26px;height:26px;border-radius:6px;cursor:pointer}
.rh-az button:hover{background:var(--rh-bg-soft);color:var(--rh-primary)}
.rh-az button.is-active{background:var(--rh-primary);color:#fff}
.rh-dev__initials{font-weight:800;color:var(--rh-primary);font-size:1.25rem;letter-spacing:.02em}
.rh-dev__logo img{max-width:100%;max-height:100%;object-fit:contain}

/* Global hidden guard — empty-states must never override the hidden attribute */
[hidden]{display:none!important}

/* ===== International phone field (intl-tel-input, vendored) — tokens only ===== */
.rh-phone{display:block;width:100%}
.rh-phone .iti{width:100%;display:block}
/* The tel input keeps .rh-input styling; digits ALWAYS render LTR, even on RTL pages */
.rh-input.rh-tel{width:100%;direction:ltr;text-align:start}
/* Selected-country button + dial code adopt theme colours */
.rh-phone .iti__selected-country{border-start-start-radius:var(--rh-radius-sm);border-end-start-radius:var(--rh-radius-sm)}
.rh-phone .iti__selected-country-primary{padding-inline:8px 6px}
.rh-phone .iti__selected-dial-code{color:var(--rh-ink-2)}
.rh-phone .iti__search-input{font-family:inherit;color:var(--rh-ink)}
.rh-phone .iti__country-list{max-width:min(340px,92vw);border:1px solid var(--rh-line-2);box-shadow:var(--rh-shadow)}
/* Invalid state — border + message (never colour alone: paired with text + aria) */
.rh-input.rh-tel[aria-invalid="true"]{border-color:var(--rh-error)}
.rh-input.rh-tel[aria-invalid="true"]:focus{outline-color:var(--rh-error-bg)}
.rh-phone__err{display:none;margin-top:6px;color:var(--rh-error);font-size:.82rem;font-weight:600;line-height:1.4}
.rh-phone__err[data-show="1"]{display:block}
/* Mobile: intl-tel-input switches to a fullscreen popup; guard against body overflow */
.iti--fullscreen-popup .iti__dropdown-content{max-width:100vw}
@media (max-width:480px){
  .rh-phone .iti__country-list{max-width:96vw}
}
/* Country dropdown readability — GLOBAL (unscoped) so it also covers the mobile
   fullscreen popup that intl-tel-input appends to <body>, and never inherits a
   parent form's light/white text into the light dropdown. Explicit colors beat
   inherited ones regardless of stylesheet order. */
.iti__dropdown-content,.iti__country-list{background:var(--rh-white);color:var(--rh-ink)}
.iti__country{color:var(--rh-ink)}
.iti__country .iti__country-name{color:var(--rh-ink)}
.iti__country .iti__dial-code{color:var(--rh-ink-2)}
.iti__search-input,.iti__search-input:focus{color:var(--rh-ink);background:var(--rh-white);-webkit-text-fill-color:var(--rh-ink)}
.iti__search-input::placeholder{color:var(--rh-muted);opacity:1}
.iti__country.iti__highlight,.iti__country[aria-selected="true"]{background:var(--rh-bg-soft);color:var(--rh-ink)}
.iti__country.iti__highlight .iti__country-name,.iti__country[aria-selected="true"] .iti__country-name{color:var(--rh-ink)}
.iti__selected-dial-code{color:var(--rh-ink-2)}