/* UAE dirham sign (U+20C3, Unicode 18). Used only for that one character, so
   every other glyph still comes from the site fonts. Glyph: Central Bank of the
   UAE, via the MIT-licensed "dirham" package. */
@font-face{font-family:"HTH Dirham";src:url("../fonts/dirham.woff2?v=3") format("woff2"),url("../fonts/dirham.woff?v=3") format("woff");
  font-weight:100 900;font-style:normal;font-display:block;unicode-range:U+20C3}
@font-face{font-family:"HTH Dirham Serif";src:url("../fonts/dirham-serif.woff2?v=3") format("woff2"),url("../fonts/dirham-serif.woff?v=3") format("woff");
  font-weight:100 900;font-style:normal;font-display:block;unicode-range:U+20C3}
.cur-sym,.dh{font-family:"HTH Dirham",var(--f-body)}
/* ==========================================================================
   HTH REAL ESTATE — CORE
   Design tokens · reset · typography · buttons · forms · utilities
   ========================================================================== */

:root{
  /* --- brand ------------------------------------------------------- */
  --navy:#0B1D33;
  --navy-900:#061222;
  --navy-800:#0B1D33;
  --navy-700:#122D4C;
  --navy-600:#1B3E66;
  --navy-500:#2A5686;
  --gold:#C8A45D;
  --gold-dim:#A9853F;
  --gold-lite:#E2C68A;
  --gold-glow:#F7EAC6;
  --sand:#EBDDC2;
  --sand-50:#F7F1E6;
  --light:#F4F4F4;
  --ink:#333333;
  --ink-soft:#5D6B7A;
  --line:rgba(11,29,51,.10);
  --line-dark:rgba(235,221,194,.14);
  --white:#ffffff;
  --danger:#C4535F;
  --success:#3E8C6A;

  /* --- surfaces ---------------------------------------------------- */
  --bg:var(--white);
  --fg:var(--ink);
  --card:#ffffff;
  --shadow-s:0 2px 10px rgba(11,29,51,.05);
  --shadow-m:0 14px 40px -18px rgba(11,29,51,.22);
  --shadow-l:0 40px 90px -40px rgba(11,29,51,.38);
  --shadow-gold:0 18px 46px -22px rgba(200,164,93,.55);

  /* --- radius & spacing -------------------------------------------- */
  --r-xs:8px; --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:38px; --r-pill:999px;
  --gut:clamp(18px,4vw,64px);
  --sec:clamp(64px,8vw,140px);
  --maxw:1480px;
  --maxw-narrow:1140px;

  /* --- type -------------------------------------------------------- */
  --f-display:"HTH Dirham Serif","Prata","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-body:"HTH Dirham","Manrope","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-ar:"HTH Dirham","Almarai","Manrope",ui-sans-serif,system-ui,sans-serif;

  --t-hero:clamp(2.9rem,7.2vw,6.4rem);
  --t-h1:clamp(2.4rem,5vw,4.4rem);
  --t-h2:clamp(1.95rem,3.7vw,3.35rem);
  --t-h3:clamp(1.4rem,2.2vw,2.1rem);
  --t-h4:clamp(1.1rem,1.5vw,1.4rem);
  --t-body:clamp(.95rem,1.05vw,1.06rem);
  --t-small:.83rem;
  --t-eyebrow:.72rem;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --dur:.55s;
  --header-h:88px;
}

html[dir="rtl"]{ --f-body:var(--f-ar); }

/* ------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
/* clip, not hidden — it stops off-canvas panels and marquees creating a
   sideways scroll on a phone without turning <html> into a scroll container
   (which would break every position:sticky on the site) */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--f-body);font-size:var(--t-body);line-height:1.65;
  font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* NOT overflow-x:hidden — that turns <body> into a scroll container and
     silently kills every position:sticky on the site. html{overflow-x:clip}
     above already stops sideways scrolling. */
}
body.is-locked{overflow:hidden}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6,p,figure{margin:0}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--gold);color:var(--navy)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
summary::-webkit-details-marker{display:none}

/* scrollbar */
*{scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:rgba(11,29,51,.05)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold),var(--gold-dim));border-radius:99px}

/* -------------------------------------------------------- typography */
.display,h1,h2,h3{font-family:var(--f-display);font-weight:400;letter-spacing:-.018em;line-height:1.06}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.18}
h4,h5{font-family:var(--f-body);font-weight:700;letter-spacing:-.01em;line-height:1.3}
h4{font-size:var(--t-h4)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong,b{font-weight:700}
small{font-size:var(--t-small)}

.eyebrow{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--f-body);font-size:var(--t-eyebrow);font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.7}
.eyebrow.is-center::after{content:"";width:34px;height:1px;background:currentColor;opacity:.7}

.lead{font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.7;color:var(--ink-soft)}
.gold{color:var(--gold)}
.muted{color:var(--ink-soft)}

/* gilded text */
.gilded{
  background:linear-gradient(100deg,#8C6B2E 0%,#C8A45D 20%,#F7EAC6 42%,#FFFBF0 52%,#E0BE7C 68%,#B08B45 86%,#8C6B2E 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gildFlow 6s linear infinite;
}
@keyframes gildFlow{0%{background-position:0% 50%}100%{background-position:260% 50%}}

/* a thin animated rule */
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}

/* ------------------------------------------------------------ layout */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.container--narrow{max-width:var(--maxw-narrow)}
.section{padding-block:var(--sec);position:relative}
.section--tight{padding-block:clamp(44px,5vw,84px)}
.grid{display:grid;gap:clamp(16px,2vw,30px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.g6{grid-template-columns:repeat(6,1fr)}
.flex{display:flex}
.between{display:flex;align-items:center;justify-content:space-between;gap:20px}
.center{text-align:center}
.stack{display:flex;flex-direction:column}

/* section header pattern */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:clamp(28px,3.5vw,58px);flex-wrap:wrap}
.sec-head__t{max-width:720px}
.sec-head h2{margin:.32em 0 .3em}
.sec-head .lead{max-width:62ch}
.sec-head.is-center{flex-direction:column;align-items:center;text-align:center}
.sec-head.is-center .sec-head__t{margin-inline:auto}

/* --- dark section treatment ---------------------------------------- */
.is-dark{background:var(--navy);color:var(--sand)}
.is-dark h1,.is-dark h2,.is-dark h3,.is-dark h4{color:#fff}
.is-dark .lead,.is-dark .muted{color:rgba(235,221,194,.72)}
.is-dark .rule{opacity:.35}
.is-ink{background:var(--navy-900);color:var(--sand)}
.is-sand{background:var(--sand-50);color:var(--ink)}
.is-light{background:var(--light)}

/* ----------------------------------------------------------- buttons */
.btn{
  --btn-bg:var(--navy);--btn-fg:#fff;--btn-bd:var(--navy);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:.95em 1.7em;border-radius:var(--r-pill);
  font-size:.86rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  overflow:hidden;isolation:isolate;cursor:pointer;
  transition:color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
  white-space:nowrap;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--gold-dim),var(--gold),var(--gold-lite));
  transform:translateY(101%);transition:transform .5s var(--ease-out);
}
.btn:hover{color:var(--navy);border-color:transparent;transform:translateY(-2px);box-shadow:var(--shadow-gold)}
.btn:hover::before{transform:translateY(0)}
.btn .ico{width:1.15em;height:1.15em;transition:transform .4s var(--ease)}
.btn:hover .ico{transform:translateX(3px)}

.btn--gold{--btn-bg:linear-gradient(100deg,var(--gold-dim),var(--gold) 45%,var(--gold-lite));--btn-fg:var(--navy);--btn-bd:transparent;box-shadow:var(--shadow-gold)}
.btn--gold::before{background:var(--navy)}
.btn--gold:hover{color:#fff}
.btn--ghost{--btn-bg:transparent;--btn-fg:currentColor;--btn-bd:currentColor}
.btn--ghost::before{background:linear-gradient(100deg,var(--gold-dim),var(--gold),var(--gold-lite))}
.btn--light{--btn-bg:#fff;--btn-fg:var(--navy);--btn-bd:transparent}
/* "on the map" — navy, so it reads as a different destination rather than a
   second submit button sitting next to Apply filters */
.btn--map{--btn-bg:var(--navy);--btn-fg:#fff;--btn-bd:transparent;box-shadow:0 8px 22px rgba(11,29,51,.24)}
.btn--map::before{background:linear-gradient(100deg,var(--gold-dim),var(--gold),var(--gold-lite))}
.btn--map:hover{color:var(--navy)}
.btn--map .ico{color:var(--gold);transition:transform .4s var(--ease),color .4s var(--ease)}
.btn--map:hover .ico{color:var(--navy);transform:none}
.btn--map.is-busy{pointer-events:none;opacity:.7}
.btn--sm{padding:.7em 1.25em;font-size:.74rem}
.btn--lg{padding:1.15em 2.3em;font-size:.92rem}
.btn--block{width:100%;white-space:normal;text-align:center;line-height:1.3}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}

/* text link with animated arrow */
.link-arrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);position:relative;padding-bottom:4px;
}
.is-dark .link-arrow{color:var(--sand)}
.link-arrow::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;opacity:.28;transform-origin:right;transform:scaleX(1);transition:transform .45s var(--ease)}
.link-arrow:hover{color:var(--gold)}
.link-arrow:hover::after{transform:scaleX(0);transform-origin:left}
.link-arrow .ico{width:1.05em;height:1.05em;transition:transform .4s var(--ease)}
.link-arrow:hover .ico{transform:translate(3px,-3px)}

/* icon button */
.iconbtn{
  display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:inherit;position:relative;
  transition:.35s var(--ease);
}
.iconbtn .ico{width:19px;height:19px}
.iconbtn:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.is-dark .iconbtn{border-color:var(--line-dark)}

/* ------------------------------------------------------------- forms */
.field{position:relative;margin-bottom:18px}
.field>label,.lbl{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:8px;
}
.is-dark .field>label,.is-dark .lbl{color:rgba(235,221,194,.6)}
.inp,.sel,textarea.inp{
  width:100%;padding:.95em 1.1em;border:1px solid var(--line);border-radius:var(--r-s);
  background:#fff;color:var(--ink);font-size:.95rem;transition:.3s var(--ease);
  appearance:none;
}
textarea.inp{min-height:118px;resize:vertical}
.inp::placeholder{color:#9AA7B5}
.inp:focus,.sel:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(200,164,93,.14);outline:none}
.sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px;padding-right:40px}
html[dir="rtl"] .sel{background-position:left 14px center;padding-right:1.1em;padding-left:40px}
.is-dark .inp,.is-dark .sel,.is-dark textarea.inp{background:rgba(255,255,255,.05);border-color:var(--line-dark);color:#fff}
.is-dark .inp::placeholder{color:rgba(235,221,194,.4)}

.check{display:flex;align-items:flex-start;gap:11px;font-size:.86rem;line-height:1.5;cursor:pointer;color:var(--ink-soft)}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__box{flex:0 0 20px;width:20px;height:20px;border:1px solid var(--line);border-radius:6px;
  display:grid;place-items:center;margin-top:2px;transition:.25s var(--ease);background:#fff}
.check__box::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(.4);opacity:0;transition:.25s var(--ease);margin-top:-2px}
.check input:checked+.check__box{background:var(--gold);border-color:var(--gold)}
.check input:checked+.check__box::after{opacity:1;transform:rotate(-45deg) scale(1)}
.check input:focus-visible+.check__box{box-shadow:0 0 0 4px rgba(200,164,93,.22)}
.is-dark .check{color:rgba(235,221,194,.75)}
.is-dark .check__box{background:rgba(255,255,255,.06);border-color:var(--line-dark)}

/* radio pills */
.pillset{display:flex;flex-wrap:wrap;gap:10px}
.pill{position:relative}
.pill input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pill span{
  display:block;padding:.7em 1.2em;border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:.84rem;font-weight:600;transition:.3s var(--ease);background:#fff;
}
.pill input:checked+span{background:var(--navy);color:#fff;border-color:var(--navy)}
.pill:hover span{border-color:var(--gold)}
.is-dark .pill span{background:rgba(255,255,255,.05);border-color:var(--line-dark)}
.is-dark .pill input:checked+span{background:var(--gold);color:var(--navy);border-color:var(--gold)}

/* range slider */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:99px;
  background:linear-gradient(90deg,var(--gold) var(--fill,50%),rgba(11,29,51,.14) var(--fill,50%));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:#fff;border:2px solid var(--gold);box-shadow:0 3px 10px rgba(11,29,51,.22);cursor:grab;transition:.2s}
input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.14)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--gold);cursor:grab}

/* form messages */
.alert{padding:14px 18px;border-radius:var(--r-s);font-size:.9rem;margin-bottom:18px;border:1px solid}
.alert--ok{background:rgba(62,140,106,.08);border-color:rgba(62,140,106,.3);color:#2C6B50}
.alert--err{background:rgba(196,83,95,.08);border-color:rgba(196,83,95,.3);color:#A23A46}

/* ---------------------------------------------------------- utilities */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:44px}
.hide{display:none!important}
.ratio{position:relative;overflow:hidden;border-radius:var(--r-m)}
.ratio>img,.ratio>video,.ratio>iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.r-16x9{aspect-ratio:16/9}.r-4x3{aspect-ratio:4/3}.r-3x2{aspect-ratio:3/2}
.r-1x1{aspect-ratio:1/1}.r-3x4{aspect-ratio:3/4}.r-2x3{aspect-ratio:2/3}

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

/* custom cursor */
.cursor{position:fixed;top:0;left:0;width:34px;height:34px;border:1px solid var(--gold);border-radius:50%;
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s,height .3s,background .3s,opacity .3s;mix-blend-mode:difference;opacity:0}
.cursor.is-on{opacity:1}
.cursor.is-hot{width:62px;height:62px;background:rgba(200,164,93,.16)}
.cursor__dot{position:fixed;width:5px;height:5px;background:var(--gold);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);opacity:0}
.cursor__dot.is-on{opacity:1}
@media (hover:none){.cursor,.cursor__dot{display:none}}

/* ------------------------------------------------------------ badges */
.badge{
  display:inline-flex;align-items:center;gap:.45em;padding:.42em .85em;border-radius:var(--r-pill);
  font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  background:rgba(11,29,51,.06);color:var(--navy);
}
.badge--gold{background:linear-gradient(100deg,var(--gold-dim),var(--gold-lite));color:var(--navy)}
.badge--navy{background:var(--navy);color:var(--sand)}
.badge--glass{background:rgba(255,255,255,.14);backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.22)}
.badge--live{background:rgba(62,140,106,.14);color:#2C6B50}
.badge--live::before{content:"";width:6px;height:6px;border-radius:50%;background:#3E8C6A;animation:pulseDot 1.6s infinite}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

/* ------------------------------------------------------------ tables */
.tbl{width:100%;font-size:.92rem}
.tbl th{text-align:left;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  font-weight:700;padding:12px 14px;border-bottom:1px solid var(--line)}
.tbl td{padding:14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
html[dir="rtl"] .tbl th{text-align:right}
.tbl-wrap{overflow-x:auto;border-radius:var(--r-m);border:1px solid var(--line)}

/* ------------------------------------------------------- responsive */
@media (max-width:1200px){
  .g6{grid-template-columns:repeat(3,1fr)}
  .g5{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px){
  :root{--header-h:72px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .g2,.g3,.g4,.g5,.g6{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start}
  .btn{padding:.9em 1.4em}
}