/* =========================================================
   مركز العقارات — نظام بصري موحّد
   Editorial Minimal: ورق دافئ + حبر فحمي + كحلي غامق كلون تمييز واحد
   هذا الملف هو المصدر الوحيد لشكل الموقع. لا CSS مضمّن في الصفحات.
   ========================================================= */

:root{
  --paper:      #F4F3EF;
  --paper-2:    #FFFFFF;
  --wash:       #E7E6DF;
  --ink:        #14161A;
  --ink-2:      #34383E;
  /* ‎#7A7F87‎ السابق كان تباينه 3.63:1 على الورق — دون حد WCAG AA (4.5:1)
     للنص العادي. هذه الدرجة تعطي 4.56:1 مع بقاء الطابع الهادئ نفسه. */
  --muted:      #6A6F76;
  --line:       #DDDAD1;
  --line-2:     #C6C2B6;
  --accent:     #1E3352;   /* كحلي غامق */
  --accent-2:   #45608A;
  --danger:     #9C5A4E;
  /* الاستثناء الثاني والأخير من قاعدة "لون تمييز واحد" (الأول كان شريط
     السعر الكحلي المصمَت) — محجوز حصرًا للعقار "المميّز" وشارة "سعر مناسب
     جدًا"، وهما تمييزان يدويان من صاحب المكتب لا عنصر تصميم عام. نفس
     --gold المستخدَم في شعار الموقع ولوحة الإدارة الداكنة، لا لون جديد. */
  --promo:      #C9A24B;
  /* نسخة داكنة من --promo للاستخدام كنصّ (سطر "مميّز/سعر مناسب" على
     البطاقة): الذهبي الأساسي تباينه ~2.4:1 على خلفية فاتحة — غير مقروء
     لنصّ صغير. هذه محسوبة لتعطي ~5.9:1 (تتجاوز WCAG AA). */
  --promo-text: #7A611F;

  /* المعالجة اللونية الموحّدة أُلغيت بطلب صريح من صاحب المكتب — رآها حيّة
     على صور حقيقية فوصفها بأنها "غواش قوي" و"كأنها كاميرا سيئة": طبقتا
     الكحلي (mix-blend-mode:color) وsoft-light مجتمعتين كانتا تُفقِد وضوح
     السماء والإضاءات وتُضيف طبقة ضبابية فوق صور واضحة أصلًا. القيم هنا
     محايدة تمامًا (بلا أثر بصري) بدل الحذف الكامل للقواعد، حفاظًا على نفس
     البنية (.ph::before/::after) لو أُريد ضبط لاحق أخف بكثير مستقبلًا. */
  --grade-tint: #1E3352;
  --grade-veil: 0;
  --grade-base: none;
  --grade-live: none;

  --pad: clamp(20px, 5vw, 80px);
  --head: 74px;
  --sec: clamp(90px, 12vw, 190px);
  --ease: cubic-bezier(.22,.61,.24,1);
  --ease-img: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:auto}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Cairo", system-ui, "Segoe UI", sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--accent);color:#fff}

.wrap{width:100%;max-width:1600px;margin-inline:auto;padding-inline:var(--pad)}

.skip{position:absolute;top:-100px;right:16px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;font-size:13px}
.skip:focus{top:12px}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- طباعة مشتركة ---------- */
.eyebrow{font-size:12px;font-weight:700;color:var(--accent);margin-bottom:clamp(14px,1.6vw,22px)}
.eyebrow.light{color:var(--accent-2)}
.thin{font-weight:200;color:var(--ink-2)}

h1{
  font-weight:900;
  font-size:clamp(34px, 4.6vw, 66px);
  line-height:1.22;
  margin:0 0 clamp(20px,2.4vw,30px);
}
h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
h1 i{font-style:normal;display:inline-block}
h2{font-weight:800;font-size:clamp(28px,3.6vw,52px);line-height:1.2}
h3{font-weight:700;font-size:clamp(17px,1.35vw,21px);line-height:1.45}

.lede{
  font-weight:300;font-size:clamp(15.5px,1.05vw,17.5px);
  line-height:1.95;color:var(--ink-2);max-width:42ch;
}

/* روابط سهمية */
.link-lg,.link-sm{display:inline-flex;align-items:center;gap:14px;font-weight:600;position:relative;padding-block:8px}
.link-lg{font-size:clamp(15px,1.05vw,16.5px)}
.link-sm{font-size:14px;color:var(--ink-2)}
.link-lg svg,.link-sm svg{width:34px;height:8px;overflow:visible;flex:none;transition:transform .55s var(--ease)}
.link-lg svg path,.link-sm svg path{fill:none;stroke:currentColor;stroke-width:1.1;vector-effect:non-scaling-stroke}
.link-lg::after,.link-sm::after{
  content:"";position:absolute;inset-inline-start:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .6s var(--ease);
}
.link-lg::after{transform:scaleX(1)}
.link-lg:hover::after{transform:scaleX(0);transform-origin:left}
.link-sm:hover::after{transform:scaleX(1)}
.link-lg:hover svg,.link-sm:hover svg{transform:translateX(-8px)}

/* أزرار مشتركة */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-size:14.5px;font-weight:600;padding:14px 26px;cursor:pointer;
  border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:0;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.btn:hover{background:transparent;color:var(--accent)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* =========================================================
   الترويسة
   ========================================================= */
.head{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;height:var(--head);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease),border-color .5s var(--ease);
}
.head.stuck{background:rgba(244,243,239,.9);backdrop-filter:saturate(1.4) blur(14px);border-bottom-color:var(--line)}
.head-in{height:100%;display:flex;align-items:center;gap:clamp(20px,4vw,60px)}

.brand{display:flex;align-items:center;gap:11px}
.brand img{width:34px;height:auto;flex:none}
.brand-txt{display:flex;align-items:baseline;gap:9px}
.brand-mark{font-weight:800;font-size:17px;line-height:1}
.brand-sub{font-weight:300;font-size:12.5px;color:var(--muted)}

.nav{display:flex;gap:clamp(16px,2vw,32px);margin-inline-start:auto}
.nav a{font-size:14.5px;font-weight:500;color:var(--ink-2);position:relative;padding-block:6px}
.nav a::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

/* دعوة الفعل الرئيسية بالترويسة — معبّأة من البداية لا عند hover فقط،
   حتى تبرز فورًا عن روابط التصفّح العادية بجانبها (أهمّ زر تسويقيًا). */
.head-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:700;
  background:var(--accent);color:#fff;border:1px solid var(--accent);
  padding:9px 18px;flex:none;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.head-cta svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
.head-cta:hover{background:transparent;color:var(--accent);border-color:var(--accent)}

.burger{display:none;width:38px;height:38px;background:none;border:0;padding:0;margin-inline-start:auto;cursor:pointer;position:relative}
.burger span{position:absolute;inset-inline:6px;height:1.4px;background:var(--ink);transition:transform .5s var(--ease)}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:22px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:99;background:var(--paper);
  padding:calc(var(--head) + 28px) var(--pad) 32px;
  display:flex;flex-direction:column;justify-content:space-between;
  overflow-y:auto;
}
.menu[hidden]{display:none}
.menu nav{display:flex;flex-direction:column}
.menu nav a{
  font-size:clamp(22px,6.4vw,34px);font-weight:800;line-height:1.5;
  border-bottom:1px solid var(--line);padding-block:11px;
  display:flex;align-items:baseline;gap:14px;
}
.menu nav a em{font-style:normal;font-size:11px;font-weight:600;color:var(--accent)}
/* أرقام تواصل مجرَّدة بلا أي سياق أو أيقونة كانت تبدو غير مكتملة وسط قائمة
   تنقّل غنيّة الطباعة أعلاها — عطل بصري رُصد فعليًا على جهاز حقيقي. زر
   واتساب مملوء (نفس لغة .dock a) + عنوان صغير + أيقونات هاتف خطّية تجعلها
   قسمًا مقصودًا في القائمة لا رقمين طليقين. */
.menu-foot{display:flex;flex-direction:column;gap:14px;padding-top:26px}
.menu-foot-lbl{font-size:12px;font-weight:700;color:var(--accent);margin:0}
.menu-wa{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--accent);color:#fff;font-size:15px;font-weight:700;
  padding:15px;text-align:center;
}
.menu-wa svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7}
.menu-tels{display:flex;flex-direction:column}
.menu-tels a{
  display:flex;align-items:center;gap:10px;
  font-size:15px;font-weight:600;color:var(--ink-2);
  padding-block:12px;border-bottom:1px solid var(--line);
}
.menu-tels a:last-child{border-bottom:0}
.menu-tels svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.6}

/* =========================================================
   الواجهة — خلفية حيّة + جدار صور متحرك
   ========================================================= */
.hero{position:relative;min-height:100svh;padding-top:var(--head);display:flex;flex-direction:column;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-in{
  position:relative;z-index:1;flex:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(28px,4vw,72px);align-items:center;
  padding-block:clamp(30px,5vh,64px);
}
.hero-text{max-width:640px}
.hero-acts{display:flex;align-items:center;gap:clamp(18px,3vw,40px);flex-wrap:wrap;margin-top:clamp(26px,3vw,40px)}

/* جدار الصور المتحرك (يظهر فقط حين تتوفّر صور كافية) */
.reel{
  display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(10px,1.1vw,18px);
  height:min(78vh,720px);align-self:stretch;
  margin-left:calc(-1 * var(--pad));
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%);
}
.reel-col{overflow:hidden;position:relative}
.reel-track{display:flex;flex-direction:column;gap:clamp(10px,1.1vw,18px);will-change:transform}
.reel-track .ph{aspect-ratio:var(--ar,4/5);flex:none}
.t-up{animation:reelUp 78s linear infinite}
.t-down{animation:reelDown 90s linear infinite}
@keyframes reelUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes reelDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.reel:hover .reel-track{animation-play-state:paused}

/* بديل الجدار حين تكون الصور قليلة: صورة واحدة كبيرة */
.hero-solo{align-self:stretch;margin-left:calc(-1 * var(--pad))}
.hero-solo .ph{height:min(74vh,660px)}
.hero-solo figcaption{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  margin-top:13px;font-size:12.5px;font-weight:500;color:var(--muted);
}
.hero-solo .c-num{font-weight:700;color:var(--accent)}

/* شريط الأحياء المتحرك */
.ticker{
  position:relative;z-index:1;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:clamp(16px,2.5vw,36px);padding:16px var(--pad);
}
.ticker-lbl{font-size:11.5px;font-weight:700;color:var(--ink);flex:none}
.ticker-win{overflow:hidden;flex:1;-webkit-mask-image:linear-gradient(to left,#000 78%,transparent);mask-image:linear-gradient(to left,#000 78%,transparent)}
.ticker-track{display:flex;white-space:nowrap;width:max-content;animation:tick 46s linear infinite;font-size:13.5px;font-weight:300;color:var(--muted)}
.ticker-track span{padding-inline-end:34px;position:relative}
.ticker-track span::after{content:"·";position:absolute;inset-inline-end:14px;opacity:.55}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* =========================================================
   حاوية الصور + التدرّج اللوني الموحّد
   كل صورة في الموقع تمرّ بالمعالجة نفسها، فتُقرأ صور الموبايل
   المتباينة المصدر كطقم واحد مُدار فنيًا.
   ========================================================= */
.ph{position:relative;overflow:hidden;background:var(--wash);isolation:isolate}
.ph img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;
  filter:var(--grade-base);
  transition:transform 1.6s var(--ease-img), filter 1.1s var(--ease);
}
/* الطبقة ١ — مزج color: يسحب الأصباغ نحو الكحلي دون المساس بالإضاءة */
.ph::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--grade-tint);mix-blend-mode:color;opacity:var(--grade-veil);
  transition:opacity 1.1s var(--ease);
}
/* الطبقة ٢ — soft-light — أُلغيت بنفس قرار إلغاء --grade-veil أعلاه (طلب
   صريح من صاحب المكتب: الصور تبدو "غواش" و"كاميرا سيئة"). opacity:0 بدل
   حذف القاعدة، لنفس سبب إبقاء البنية جاهزة لضبط أخف لاحقًا لو أُريد. */
.ph::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  mix-blend-mode:soft-light;opacity:0;
  background:linear-gradient(180deg,
    rgba(255,255,255,.14) 0%,
    rgba(255,255,255,0)   30%,
    rgba(30,51,82,.20)   100%);
  transition:opacity 1.1s var(--ease);
}
/* عقار بلا صور بعد: رسالة بدل صندوق فارغ، تحت طبقتَي التدرّج نفسهما فتبقى متّسقة بصريًا */
.ph-empty{
  position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:16px;font-size:12.5px;font-weight:600;color:var(--muted);
}
/* بلا هذا السطر، خاصية [hidden] لا تقوى على تجاوز display:flex أعلاه
   بسبب تساوي درجة التحديد (specificity)، فتبقى الرسالة ظاهرة فوق الصورة. */
.ph-empty[hidden]{display:none}

/* =========================================================
   الأقسام
   ========================================================= */
.sec{padding-block:var(--sec)}
.sec-sm{padding-block:clamp(56px,7vw,110px)}

.sec-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:30px;
  padding-bottom:clamp(34px,4.5vw,64px);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(44px,6vw,90px);
}

/* ترويسة الصفحات الداخلية */
.banner{padding-top:calc(var(--head) + clamp(44px,7vw,96px));padding-bottom:clamp(30px,4vw,56px)}
.crumb{font-size:12.5px;font-weight:500;color:var(--muted);margin-bottom:clamp(16px,2vw,26px)}
.crumb a{color:var(--muted);border-bottom:1px solid transparent;transition:color .4s var(--ease),border-color .4s var(--ease)}
.crumb a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.banner h1{margin-bottom:clamp(14px,1.6vw,20px)}
.banner .lede{max-width:56ch}

/* =========================================================
   شبكة العقارات غير المتماثلة
   ========================================================= */
.grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(20px,2.6vw,42px);
  row-gap:clamp(56px,7vw,120px);
  align-items:start;
}
/* الإيقاع يتكرّر كل ستّ بطاقات، فلا ينكسر مهما طالت القائمة */
.grid > *:nth-child(6n+1){grid-column:1 / span 7; --ar:16/11}
.grid > *:nth-child(6n+2){grid-column:9 / span 4; --ar:3/4;   margin-top:clamp(60px,11vw,180px)}
.grid > *:nth-child(6n+3){grid-column:2 / span 5; --ar:4/5}
.grid > *:nth-child(6n+4){grid-column:8 / span 5; --ar:16/11; margin-top:clamp(40px,7vw,120px)}
.grid > *:nth-child(6n+5){grid-column:1 / span 6; --ar:5/4;   margin-top:clamp(24px,4vw,70px)}
.grid > *:nth-child(6n+6){grid-column:8 / span 4; --ar:3/4}

/* شبكة منتظمة — للصفحات التي تعرض نتائج بحث أو قوائم طويلة */
.grid-even{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  column-gap:clamp(20px,2.6vw,42px);row-gap:clamp(46px,5vw,76px);align-items:start;
}
.grid-even > *{--ar:4/3}

/* بطاقة عقار — إطار شعرة يحيط بالبطاقة كاملة، ولوحة بيضاء واضحة تحت النصوص
   (لا الورق الدافئ نفسه) لتمييزها بصريًا عن خلفية الصفحة وإعطائها وزنًا
   أقوى — الصورة أعلاها، ولوحة النص أسفلها، صندوق واحد متماسك بدل نص طليق. */
.card{position:relative;border:1px solid var(--line)}
/* الإطار الذهبي هو الإشارة الأولى — تُرى قبل قراءة أي نص، بخلاف الشارة
   الصغيرة وحدها التي كانت تضيع وسط شارة الغرض المجاورة لها بنفس اللون. */
.card.featured{border:2px solid var(--promo)}
/* ٤:٥ لا ٤:٣ — عقارات المكتب الحقيقية شبه كلّها عمودية (كما يمسك الهاتف
   طبيعيًا)، فإطار أفقي كان يقصّ الجزء الأكبر من كل صورة ويُظهر شريحة ضيقة
   مكبَّرة بصريًا بدل الواجهة كاملة. ٤:٥ يطابق أيضًا النسبة المستخدَمة أصلًا
   في جدار الهيرو المتحرّك (.reel-track .ph) — توحيد لا تناقض. */
.card-ph{aspect-ratio:var(--ar,4/5);display:block;width:100%}
.card:hover .ph img{transform:scale(1.062);filter:var(--grade-live)}
.card:hover .ph::before{opacity:calc(var(--grade-veil) * .55)}
/* هذه كانت تُعيد طبقة soft-light عند التحويم بقوة أعلى (.62) حتى بعد
   تعطيلها أعلاه — إغفالها كان سيُبقي الغواش يظهر لحظة تمرير الفأرة فقط. */
.card:hover .ph::after{opacity:0}

/* رابط يغطّي الصورة — تحت الشارة وزر الحفظ فيبقيان قابلين للنقر */
.card-link{position:absolute;inset:0;z-index:1}

.tags{position:absolute;inset-block-start:0;inset-inline-start:0;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.tag{background:var(--paper);color:var(--ink);font-size:11px;font-weight:700;padding:7px 13px}
.tag.rent{background:var(--accent);color:#fff}

/* زر عائم بهامش وخلفية شبه شفّافة + تمويه، بدل مربّع مصمَت ملتصق بالزاوية
   (كان يبدو كصندوق واجهة افتراضي لا كزر مصمَّم). الزوايا تبقى حادّة. */
.fav-btn{
  position:absolute;inset-block-start:12px;inset-inline-end:12px;z-index:3;
  width:38px;height:38px;border:0;cursor:pointer;padding:0;
  background:rgba(244,243,239,.55);color:var(--muted);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:grid;place-items:center;
  transition:color .4s var(--ease),background .4s var(--ease);
}
.fav-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.fav-btn:hover{color:var(--accent)}
.fav-btn.on{background:var(--accent);color:#fff}
.fav-btn.on svg{fill:currentColor}

.card-body{background:var(--paper-2);padding:16px 16px 18px}
/* إشارة "مميّز"/"سعر مناسب جدًا" — نصّ ذهبي صغير بلا أي خلفية أو تعبئة،
   بعد تجربتين فاشلتين لصناديق/شرائط ذهبية فوق الصورة بدَتا رخيصتين
   ومزدحمتين. تفصيل أنيق لا ملصق تخفيضات. */
.card-promo{font-size:13.5px;font-weight:800;color:var(--promo-text);margin-bottom:6px}
.card-meta{font-size:12.5px;font-weight:600;color:var(--accent);margin-bottom:8px}
.card-title{font-weight:700;font-size:clamp(17px,1.35vw,22px);line-height:1.5;transition:color .45s var(--ease)}
.card:hover .card-title{color:var(--accent)}
/* نصّ صريح ("المساحة 93 م²") بدل أيقونة خطّية — أوضح فورًا وأثقل قليلاً
   ليقرأ كمعلومة أساسية لا هامشية. */
.specs{display:flex;flex-wrap:wrap;gap:8px 0;margin-top:13px;font-size:16px;font-weight:600;color:var(--ink-2)}
.specs li + li::before{content:"·";opacity:.55;margin-inline:10px}
/* شريط كحلي صريح يُغلق كل بطاقة — لا لبس أبدًا في أي إعلان ينتمي إليه السعر
   لأن كل بطاقة صندوق شعرة مكتفٍ بذاته الآن (انظر .card{border}). اللون
   القوي هنا هو الاستثناء الوحيد المتعمَّد لقاعدة "لا ظلال ولا ألوان زائدة" —
   الرقم الحاسم لدى المشتري يستحقّه، ويُغلق البطاقة بثقة بدل أن يتلاشى فيها. */
.card-foot{
  padding:14px 16px;background:var(--accent);
  display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap;
}
.price{font-size:clamp(18px,1.35vw,22px);font-weight:300;white-space:nowrap;color:#fff}
.price b{font-weight:800}
.price .cur{font-size:.74em;color:rgba(255,255,255,.68);font-weight:400}
.wa{
  font-size:12.5px;font-weight:600;color:#fff;
  border:1px solid rgba(255,255,255,.4);padding:7px 14px;flex:none;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.wa:hover{background:#fff;border-color:#fff;color:var(--accent)}

/* =========================================================
   كيف نعمل
   ========================================================= */
.sec-how{border-top:1px solid var(--line)}
.how-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,110px);align-items:start}
.say{font-size:clamp(24px,2.9vw,42px);font-weight:800;line-height:1.55;max-width:16ch}
.how-list{margin-top:6px}
.how-list li{display:flex;gap:clamp(18px,2.5vw,44px);padding-block:clamp(24px,3vw,38px);border-top:1px solid var(--line)}
.how-list li:last-child{border-bottom:1px solid var(--line)}
.how-list .n{font-size:12px;font-weight:700;color:var(--accent);padding-top:8px;flex:none}
.how-list p{margin-top:8px;font-weight:300;font-size:15px;line-height:1.95;color:var(--ink-2);max-width:50ch}

/* =========================================================
   أعلن معنا — دعوة فعل لأصحاب العقارات (لا للباحثين عنها)
   ========================================================= */
.advertise{background:var(--accent);color:#fff}
.advertise-in{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,60px);flex-wrap:wrap}
.advertise h2{color:#fff}
.advertise-lede{font-weight:300;font-size:16px;line-height:1.9;color:#C7CCD4;max-width:52ch;margin-top:10px}
.advertise-btn{background:#fff;color:var(--ink);border-color:#fff;flex:none}
.advertise-btn:hover{background:transparent;color:#fff}
.advertise-btn svg{width:34px;height:8px;overflow:visible;flex:none;transition:transform .55s var(--ease)}
.advertise-btn svg path{fill:none;stroke:currentColor;stroke-width:1.1;vector-effect:non-scaling-stroke}
.advertise-btn:hover svg{transform:translateX(-8px)}

/* =========================================================
   المناطق
   ========================================================= */
.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));column-gap:clamp(20px,2.6vw,42px)}
.areas li{border-top:1px solid var(--line)}
.areas a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-block:15px;font-size:15px;font-weight:500;
  transition:padding-inline-start .5s var(--ease),color .4s var(--ease);
}
.areas a::after{
  content:"←";font-size:13px;color:var(--accent);
  opacity:0;transform:translateX(6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.areas a:hover{color:var(--accent);padding-inline-start:8px}
.areas a:hover::after{opacity:1;transform:none}

/* =========================================================
   عن المكتب — دفّتان بمقياسين + نص متداخل
   ========================================================= */
.band{position:relative;padding-bottom:var(--sec)}
.band-title{font-size:clamp(21px,1.9vw,30px);font-weight:800;line-height:1.35;margin-bottom:14px}
/* حين لا تتوفّر صور بعد: كتلة نصّية عريضة بلا تداخل */
.band-grid:not(.has-img) .band-note{
  grid-column:1 / span 8;grid-row:1;margin-top:0;padding:0;background:none;
}
.band-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(20px,2.6vw,42px);align-items:start}
.band-a{grid-column:1 / span 7;grid-row:1;margin-right:calc(-1 * var(--pad))}
.band-a .ph{aspect-ratio:16/10}
.band-b{grid-column:9 / span 4;grid-row:1 / span 2;margin-top:clamp(80px,12vw,190px)}
.band-b .ph{aspect-ratio:3/4}
.band-cap{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-size:12.5px;font-weight:500;color:var(--muted)}
.band-cap .c-num{font-weight:700;color:var(--accent)}
.band-note{
  grid-column:2 / span 5;grid-row:2;
  margin-top:clamp(-140px,-8vw,-56px);
  background:var(--paper);position:relative;z-index:3;
  padding:clamp(26px,3.2vw,46px) clamp(26px,3.2vw,48px) clamp(10px,1.4vw,20px) clamp(18px,2vw,30px);
}
.band-note p{font-weight:300;font-size:clamp(15px,1.12vw,17.5px);line-height:2;color:var(--ink-2)}

/* =========================================================
   تواصل (سطح داكن)
   ========================================================= */
.contact{background:var(--ink);color:#ECEBE7}
.contact h2{margin-bottom:clamp(16px,2vw,26px)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(44px,6vw,110px);align-items:start}
.contact-lede{font-weight:300;font-size:16px;line-height:2;color:#A9ADAF;max-width:38ch}
/* صفّ فارغ بصريًا سابقًا: رقم كبير فوق تسمية صغيرة بلا أي إشارة أنه عنصر
   قابل للنقر — عطل حقيقي رُصد فعليًا ("هذه الواجهة غير جميلة"). أيقونة
   محادثة + سهم "افتح" (نفس سهم "افتح في خرائط جوجل" أسفل هذا القسم بالضبط،
   لا نمط جديد) يحوّلانه إلى صفّ فعل واضح، لا نصًّا طليقًا. */
.phones{display:flex;flex-direction:column;margin-top:clamp(34px,4vw,54px)}
.phones a{
  border-top:1px solid #2C2F34;padding-block:18px;display:flex;align-items:center;gap:16px;
  transition:padding-inline-start .5s var(--ease),color .4s var(--ease);
}
.phones a:last-child{border-bottom:1px solid #2C2F34}
.phones a:hover{padding-inline-start:12px;color:#fff}
.ph-icon{width:20px;height:20px;flex:none;fill:none;stroke:var(--accent-2);stroke-width:1.5;transition:stroke .4s var(--ease)}
.phones a:hover .ph-icon{stroke:#fff}
.ph-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ph-lbl{font-size:11.5px;font-weight:600;color:var(--accent-2)}
.ph-num{font-size:clamp(20px,1.9vw,27px);font-weight:700}
.ph-arrow{width:28px;height:7px;flex:none;fill:none;stroke:currentColor;stroke-width:1.2;opacity:.5;transition:transform .5s var(--ease),opacity .4s var(--ease)}
.phones a:hover .ph-arrow{opacity:1;transform:translateX(-6px)}

.socials{display:flex;gap:26px;margin-top:clamp(26px,3vw,40px);font-size:14px;font-weight:500;flex-wrap:wrap}
.socials a{color:#A9ADAF;position:relative;padding-bottom:4px;transition:color .4s var(--ease)}
.socials a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.socials a:hover{color:#fff}
.socials a:hover::after{transform:scaleX(1)}

/* موقع المكتب داخل القسم الداكن — خط شعرة فاصل بدل صندوق، والخريطة
   بلا إطار مدوّر التزامًا بالزوايا الحادّة في بقية الموقع. */
.office{margin-top:clamp(30px,3.6vw,46px);padding-top:clamp(24px,3vw,34px);border-top:1px solid #2A2E33}
.office-lbl{display:block;font-size:11.5px;font-weight:700;letter-spacing:0;color:#8A8F94;margin-bottom:10px}
.office-addr{font-size:15px;font-weight:400;line-height:1.9;color:#ECEBE7;margin-bottom:16px}
.office-addr:empty{display:none}
.office-map{aspect-ratio:16/10;border:1px solid #2A2E33;background:#1A1D21}
.office-map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.35) contrast(1.05)}
.office-open{
  display:inline-flex;align-items:center;gap:12px;margin-top:14px;
  font-size:13.5px;font-weight:600;color:#A9ADAF;transition:color .4s var(--ease);
}
.office-open svg{width:34px;height:7px;fill:none;stroke:currentColor;stroke-width:1.2}
.office-open:hover{color:#fff}

/* نموذج على سطح داكن */
.form{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,30px)}
.f{display:flex;flex-direction:column;gap:7px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.f label{font-size:11.5px;font-weight:600;color:#8B9090}
.f input,.f select,.f textarea{
  background:transparent;border:0;border-bottom:1px solid #33373C;
  padding:10px 0;font-size:16px;color:#fff;border-radius:0;width:100%;
  transition:border-color .5s var(--ease);
}
.f textarea{resize:vertical;line-height:1.8;font-weight:300}
.f select{appearance:none;cursor:pointer}
.f select option{background:#1B1E22;color:#fff}
.f input::placeholder,.f textarea::placeholder{color:#5E6469;font-weight:300}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-bottom-color:var(--accent-2)}
.f .bad{border-bottom-color:var(--danger)}

.submit{
  align-self:flex-start;margin-top:6px;cursor:pointer;
  background:transparent;border:1px solid #3A3E43;color:#fff;
  padding:15px 28px;font-size:14.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:16px;
  transition:background .5s var(--ease),border-color .5s var(--ease);
}
.submit svg{width:34px;height:8px;overflow:visible;transition:transform .55s var(--ease)}
.submit svg path{fill:none;stroke:currentColor;stroke-width:1.1;vector-effect:non-scaling-stroke}
.submit:hover{background:var(--accent);border-color:var(--accent)}
.submit:hover svg{transform:translateX(-8px)}
.form-note{font-size:13px;color:#8B9090;min-height:20px}
.form-note.err{color:#C98879}

/* =========================================================
   نماذج على سطح فاتح (الفلاتر، المقيّم، الضريبة)
   ========================================================= */
.fields{display:grid;gap:clamp(18px,2.2vw,30px)}
.fl{display:flex;flex-direction:column;gap:7px;min-width:0}
.fl label{font-size:11.5px;font-weight:600;color:var(--muted)}
.fl input,.fl select{
  background:transparent;border:0;border-bottom:1px solid var(--line-2);
  padding:11px 0;font-size:15.5px;color:var(--ink);border-radius:0;width:100%;
  transition:border-color .5s var(--ease);
}
.fl select{appearance:none;cursor:pointer}
.fl input:focus,.fl select:focus{outline:none;border-bottom-color:var(--accent)}
.fl input::placeholder{color:var(--muted);font-weight:300}
.fl-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* شريط الفلاتر في صفحة العقارات */
.filters{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;
  gap:clamp(16px,2vw,30px);align-items:end;
  padding-bottom:clamp(26px,3vw,40px);border-bottom:1px solid var(--line);
}
.filters-acts{display:flex;gap:10px;align-items:center}
.filter-reset{
  background:transparent;border:0;cursor:pointer;padding:14px 4px;
  font-size:13.5px;font-weight:600;color:var(--muted);
  border-bottom:1px solid transparent;transition:color .4s var(--ease),border-color .4s var(--ease);
}
.filter-reset:hover{color:var(--accent);border-bottom-color:var(--accent)}

.toolbar{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding-block:clamp(24px,3vw,38px);
}
.result-count{font-size:14px;font-weight:600}
.result-count b{font-size:1.35em;font-weight:800}
.sort-wrap{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.sort-wrap select{
  background:transparent;border:0;border-bottom:1px solid var(--line-2);
  padding:7px 0;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;appearance:none;
}
.sort-wrap select:focus{outline:none;border-bottom-color:var(--accent)}

/* شرائح التصفية السريعة */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(34px,4vw,56px)}
.chip{
  background:transparent;border:1px solid var(--line-2);cursor:pointer;
  padding:8px 17px;font-size:13px;font-weight:600;color:var(--ink-2);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff}

.load-more{display:flex;justify-content:center;margin-top:clamp(50px,6vw,90px)}

/* =========================================================
   الحالات: فراغ + هيكل تحميل
   ========================================================= */
.empty-state{
  display:none;text-align:center;padding:clamp(50px,7vw,90px) 20px;
  border:1px solid var(--line);color:var(--muted);font-weight:300;
}
.empty-state.show{display:block}
.empty-state b{display:block;color:var(--ink);font-size:clamp(18px,1.6vw,23px);font-weight:700;margin-bottom:10px}
.empty-state .btn,.empty-state .wa{margin-top:22px}

/* نموذج "سجّل طلبك" داخل حالة الفراغ — الفلاتر التي بحث بها الزائر هي الطلب،
   فلا يُطلب منه سوى الاسم والرقم. صفّ واحد على سطح المكتب، عمود على الجوال. */
.want-form{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin:26px auto 0;max-width:560px;
}
.want-form input{
  flex:1 1 180px;min-width:0;padding:12px 14px;
  border:1px solid var(--line);background:var(--paper);
  color:var(--ink);font:inherit;font-weight:400;
}
.want-form input:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.want-form .btn{flex:0 0 auto;margin-top:0}
/* إذن استقبال رسائل واتساب — شرط ميتا لأي قالب تسويقي، لا مجرد صياغة مهذّبة.
   يبقى مقروءًا (لا 11px رماديًا) وإلا لم يُعتبر إذنًا صريحًا. */
.consent-note{
  margin:14px auto 0;max-width:520px;
  font-size:13px;line-height:1.7;color:var(--muted);font-weight:300;
}
.want-note{margin-top:12px;font-size:14px;color:var(--muted);min-height:1em}
.want-note.err{color:#B3261E}
@media (max-width:560px){
  .want-form{flex-direction:column}
  .want-form .btn{width:100%}
}

@keyframes skel-shimmer{0%{background-position:-468px 0}100%{background-position:468px 0}}
.skel{
  background-color:var(--wash);
  background-image:linear-gradient(90deg, var(--wash) 8%, rgba(255,255,255,.85) 22%, var(--wash) 36%);
  background-size:468px 100%;
  animation:skel-shimmer 1.5s linear infinite;
}
.skel-card{pointer-events:none}
.skel-card .ph{background:var(--wash)}
.skel-card .ph::before,.skel-card .ph::after{display:none}
.skel-line{display:block}
@media (prefers-reduced-motion: reduce){ .skel{animation:none} }

/* =========================================================
   صفحة تفاصيل العقار
   ========================================================= */
.detail{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(36px,5vw,86px);align-items:start}

.gallery-main{position:relative;aspect-ratio:16/10}
.gallery-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:10px}
.gallery-thumbs .ph{aspect-ratio:1/1;cursor:pointer;opacity:.62;transition:opacity .45s var(--ease)}
.gallery-thumbs .ph:hover,.gallery-thumbs .ph.on{opacity:1}

.p-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-top:clamp(28px,3.4vw,46px)}
.p-title{font-weight:800;font-size:clamp(24px,2.6vw,40px);line-height:1.32}
.p-loc{font-size:14px;font-weight:600;color:var(--accent);margin-top:8px}
.p-price{font-size:clamp(22px,2.1vw,32px);font-weight:300;white-space:nowrap}
.p-price b{font-weight:800}
.p-price .cur{font-size:.66em;color:var(--muted);font-weight:400}
.p-price-per-m{font-size:13px;color:var(--muted);margin-top:4px;text-align:end}

.spec-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:1px;background:var(--line);border-block:1px solid var(--line);
  margin-top:clamp(26px,3vw,42px);
}
.spec{background:var(--paper);padding:clamp(16px,1.8vw,24px) clamp(12px,1.4vw,20px)}
.spec-label{font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
.spec-value{font-size:clamp(15px,1.3vw,19px);font-weight:700}

.p-block{margin-top:clamp(34px,4vw,60px)}
.p-block h2{font-size:clamp(19px,1.6vw,25px);font-weight:800;margin-bottom:clamp(14px,1.6vw,20px)}
.p-block p{font-weight:300;line-height:2;color:var(--ink-2);white-space:pre-line}
.p-media{aspect-ratio:16/9;border:1px solid var(--line);background:var(--wash)}
.p-media iframe{width:100%;height:100%;border:0;display:block}

.p-side{position:sticky;top:calc(var(--head) + 26px);border:1px solid var(--line);padding:clamp(22px,2.4vw,34px)}
.p-side h3{margin-bottom:6px}
.p-side p{font-size:14px;font-weight:300;color:var(--ink-2);line-height:1.9;margin-bottom:22px}
.p-side .btn{width:100%;margin-bottom:10px}
.p-side-alt{
  width:100%;background:transparent;border:1px solid var(--line-2);color:var(--ink);
  padding:13px 20px;font-size:13.5px;font-weight:600;cursor:pointer;text-align:center;display:block;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.p-side-alt:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* =========================================================
   المقيّم + حاسبة الضريبة
   ========================================================= */
.tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,5vw,96px);align-items:start}
.tool-panel{border:1px solid var(--line);padding:clamp(24px,3vw,44px)}
.tool-panel .btn{width:100%;margin-top:clamp(24px,3vw,36px)}
.tool-panel .btn:disabled{opacity:.45;cursor:not-allowed}
.tool-panel .btn:disabled:hover{background:var(--accent);color:#fff}

.result{display:none;border:1px solid var(--line);border-top:3px solid var(--accent);padding:clamp(24px,3vw,44px)}
.result.show{display:block}
/* إشارة بصرية أن نتيجة جديدة وصلت — عطل حقيقي رُصد فعليًا: على الجوال يظهر
   العمودان مكدَّسين (النموذج فوق النتيجة)، فالضغط على "احسب" أو تغيير الرقم
   وإعادة الحساب لا ينتج عنه أي إشارة أن شيئًا حدث؛ الزبون يجب أن يسحب الشاشة
   يدويًا ليكتشف أن النتيجة تغيّرت أصلًا. .pulse تُضاف/تُزال بجافاسكربت في كل
   عملية حساب (حتى الثانية والثالثة، لا الأولى فقط) لتتكرّر الأنيميشن دومًا.*/
@keyframes resultPulse{
  0%{opacity:0;transform:translateY(16px)}
  55%{opacity:1;transform:translateY(0);box-shadow:0 0 0 4px rgba(30,51,82,.16)}
  100%{opacity:1;transform:translateY(0);box-shadow:0 0 0 0 rgba(30,51,82,0)}
}
.result.pulse{animation:resultPulse .7s var(--ease)}
.result-eyebrow{font-size:12px;font-weight:700;color:var(--accent);margin-bottom:14px}
.result-mid{font-size:clamp(28px,3.4vw,48px);font-weight:900;line-height:1.2}
.result-range{font-size:clamp(15px,1.2vw,18px);font-weight:300;color:var(--ink-2);margin-top:10px}
.result-note{font-size:13.5px;font-weight:300;color:var(--muted);line-height:1.9;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.disclaimer{font-size:12.5px;font-weight:300;color:var(--muted);line-height:1.9;margin-top:20px}

.tax-table{width:100%;border-collapse:collapse;margin-top:clamp(22px,2.6vw,34px);font-size:14px}
.tax-table th,.tax-table td{padding:13px 10px;text-align:right;border-bottom:1px solid var(--line)}
.tax-table th{font-size:11.5px;font-weight:700;color:var(--muted)}
.tax-table td{font-weight:500}

/* طيّة اختيارية لتفصيل الشرائح — الرقم النهائي يكفي أغلب الزوّار، والتفصيل
   موجود لمن يريده دون أن يُثقل الواجهة بشرح تقني افتراضيًا. */
.brackets-details{margin-top:clamp(22px,2.6vw,32px);padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--line)}
.brackets-details summary{
  cursor:pointer;font-size:13px;font-weight:700;color:var(--accent);
  list-style:none;display:flex;align-items:center;gap:8px;
}
.brackets-details summary::-webkit-details-marker{display:none}
.brackets-details summary::after{content:"↓";font-weight:400;transition:transform .35s var(--ease)}
.brackets-details[open] summary::after{transform:rotate(180deg)}
.brackets-details .disclaimer{margin-top:14px}
.tax-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:14px;border-bottom:1px solid var(--line)}
.tax-total:last-of-type{border-bottom:0}
.tax-total.grand{border-top:2px solid var(--ink);border-bottom:0;margin-top:6px;padding-top:18px}
.tax-total .lbl{font-size:14px;font-weight:600}
.tax-total .val{font-size:clamp(17px,1.5vw,22px);font-weight:800;white-space:nowrap}
.tax-total.grand .val{font-size:clamp(22px,2.2vw,32px);font-weight:900}

/* =========================================================
   نصّ قانوني / صفحات المحتوى
   ========================================================= */
.prose{max-width:74ch}
.prose h2{font-size:clamp(19px,1.7vw,26px);font-weight:800;margin-top:clamp(38px,4vw,60px);margin-bottom:14px}
.prose h2:first-child{margin-top:0}
.prose p{font-weight:300;line-height:2.05;color:var(--ink-2);margin-bottom:16px}
.prose a{color:var(--accent);border-bottom:1px solid var(--line-2)}
.prose a:hover{border-bottom-color:var(--accent)}

/* =========================================================
   التذييل
   ========================================================= */
.foot{padding-block:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.foot-in{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,70px);align-items:flex-start}
.foot-brand{display:flex;flex-direction:column;gap:2px;max-width:30ch}
.foot-loc{font-size:12.5px;font-weight:300;color:var(--muted)}
.foot-nav{display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:var(--ink-2)}
.foot-nav b{font-size:11.5px;font-weight:700;color:var(--ink);margin-bottom:4px}
.foot-nav a:hover{color:var(--accent)}
.foot-c{margin-inline-start:auto;font-size:12.5px;color:var(--muted);font-weight:300}

/* شريط الجوال السفلي */
.dock{display:none}

/* =========================================================
   تكبير الصورة القابل للنقر + العارض ملء الشاشة
   ========================================================= */
.gallery-main{
  display:block;cursor:zoom-in;border:0;padding:0;margin:0;width:100%;text-align:start;
  background:var(--wash);appearance:none;font:inherit;color:inherit;
}
.zoom-hint{
  position:absolute;inset-block-end:12px;inset-inline-end:12px;z-index:3;
  width:34px;height:34px;display:grid;place-items:center;
  background:rgba(20,22,26,.55);color:#fff;
  opacity:0;transform:translateY(4px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.zoom-hint svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.gallery-main:hover .zoom-hint{opacity:1;transform:none}

.lightbox{
  position:fixed;inset:0;z-index:200;
  background:rgba(10,11,13,.97);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0);
}
.lightbox[hidden]{display:none}
.lightbox-stage{position:relative;width:100%;flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:6px}
.lightbox-stage img{max-width:100%;max-height:100%;object-fit:contain;-webkit-user-select:none;user-select:none}
.lightbox-spin{
  width:34px;height:34px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;
  border-radius:50%;animation:lb-spin .8s linear infinite;
}
@keyframes lb-spin{to{transform:rotate(360deg)}}
.lightbox-close{
  position:absolute;top:calc(14px + env(safe-area-inset-top,0));left:14px;z-index:2;
  width:38px;height:38px;display:grid;place-items:center;
  background:rgba(10,11,13,.5);border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.lightbox-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.lightbox-close:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}

/* التنقّل بين صور العقار — يمين = السابقة، يسار = التالية (بلا اعتبار
   لاتجاه نص الصفحة، كزر الإغلاق نفسه، فتبقى الأزرار الثلاثة بمنطق فيزيائي
   واحد). تُخفى تلقائيًا (JS) لو كان للعقار صورة واحدة فقط. */
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:38px;height:38px;display:grid;place-items:center;
  background:rgba(10,11,13,.5);border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.lightbox-nav[hidden]{display:none}
.lightbox-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.lightbox-nav:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}
.lightbox-prev{right:14px}
.lightbox-next{left:14px}
@media (max-width:640px){
  .lightbox-prev{right:8px}
  .lightbox-next{left:8px}
}

/* =========================================================
   الحركة
   ========================================================= */
/* انتقال سلس بين الصفحات (View Transitions API الأصلية في المتصفح) — بديل
   عن الانتقال الأبيض الفجائي عند تحميل صفحة جديدة كاملة، بلا أي JS أو
   إطار عمل (لا يوجد SPA في المشروع). المتصفحات التي لا تدعمها (Safari
   القديم مثلًا) تتجاهلها تلقائيًا وتعود للتحميل العادي — لا كسر لأي شيء. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.42s;animation-timing-function:var(--ease);
}

.reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .95s var(--ease),transform .95s var(--ease);
  transition-delay:var(--d,0ms);
}
.reveal.in{opacity:1;transform:none}

.up{opacity:0;transform:translateY(105%);animation:rise 1.05s var(--ease) forwards;animation-delay:var(--d,0ms)}
.reel.up,.hero-solo.up{transform:translateY(26px)}
@keyframes rise{to{opacity:1;transform:none}}

/* حالة انتظار محتوى الواجهة (eyebrow/العنوان/الوصف) قبل تشغيل حركة .up —
   بلا حركة، فقط مخفي، حتى يصل نصّ Firestore أو تنتهي مهلة الانتظار */
.hero-wait{opacity:0}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .up{opacity:1;transform:none;animation:none}
  .t-up,.t-down,.ticker-track{animation:none}
  .ph img,.link-lg svg,.link-sm svg{transition:none}
  .result.pulse{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* =========================================================
   الاستجابة
   ========================================================= */
@media (max-width:1180px){
  .filters{grid-template-columns:repeat(2,minmax(0,1fr));}
  .filters-acts{grid-column:1 / -1}
  .detail{grid-template-columns:1fr}
  .p-side{position:static}
  .tool{grid-template-columns:1fr}
}

@media (max-width:1080px){
  .grid > *:nth-child(6n+1){grid-column:1 / span 7}
  .grid > *:nth-child(6n+2){grid-column:8 / span 5; margin-top:clamp(40px,8vw,110px)}
  .grid > *:nth-child(6n+3){grid-column:1 / span 5}
  .grid > *:nth-child(6n+4){grid-column:7 / span 6; margin-top:clamp(30px,5vw,80px)}
  .grid > *:nth-child(6n+5){grid-column:1 / span 6}
  .grid > *:nth-child(6n+6){grid-column:8 / span 5; margin-top:clamp(30px,5vw,80px)}
}

@media (max-width:900px){
  :root{--head:64px}
  .nav,.head-cta{display:none}
  .burger{display:block}

  /* أهداف لمس لا تقل عن 44px (توصية WCAG وآبل) — بأصابع حقيقية على شاشة
     صغيرة، زرّ 24px يُخطئه المستخدم باستمرار. */
  .burger,.fav-btn{width:44px;height:44px}
  .wa{padding:11px 16px}
  .foot-nav{gap:2px}
  .foot-nav a{padding-block:10px}
  .socials a{padding-block:10px}
  .areas a{padding-block:17px}

  .hero{min-height:0}
  .hero-in{grid-template-columns:1fr;gap:clamp(28px,6vw,44px);padding-block:clamp(26px,6vh,48px)}
  .reel{height:min(46vh,360px);margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad))}
  .hero-solo{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad))}
  .hero-solo .ph{height:min(44vh,340px)}
  .hero-solo figcaption{padding-inline:var(--pad)}
  h1{font-size:clamp(33px,8vw,50px)}

  .how-grid{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}
  .say{max-width:22ch}
  .contact-grid{grid-template-columns:1fr}

  .band-grid{display:flex;flex-direction:column;gap:0}
  .band-a{order:1;margin-inline:calc(-1 * var(--pad))}
  .band-a .ph{aspect-ratio:4/3}
  .band-note{order:2;margin-top:clamp(-52px,-7vw,-30px);padding:24px 22px 0 0;grid-column:auto}
  .band-b{order:3;width:64%;margin-top:clamp(26px,5vw,44px);margin-inline-start:auto}
  .band-cap{margin-top:10px}

  .foot-in{gap:26px}
  .foot-c{margin-inline-start:0;width:100%}

  body{padding-bottom:60px}
  .dock{
    display:grid;grid-template-columns:1.6fr 1fr;
    position:fixed;inset-inline:0;bottom:0;z-index:90;
    border-top:1px solid var(--line-2);
    background:rgba(244,243,239,.94);backdrop-filter:blur(14px);
  }
  .dock a{padding:17px 10px;text-align:center;font-size:14px;font-weight:700;background:var(--accent);color:#fff}
  .dock .dock-alt{background:transparent;color:var(--ink);font-weight:600}
  .p-side{border-inline:0;padding-inline:0}
}

@media (max-width:640px){
  .reel{grid-template-columns:1fr 1fr}
  /* عمود واحد على الجوال. كل بطاقة الآن صندوق شعرة مكتفٍ بذاته (إطار كامل +
     لوحة بيضاء)، فحدودها واضحة بلا حاجة لخط إغلاق يدوي كسابقًا — فراغ صغير
     ثابت بين الصناديق يكفي، ولا لبس في أي إعلان تنتمي إليه أيّ معلومة. */
  .grid{grid-template-columns:1fr;row-gap:18px}
  .grid > *{grid-column:1 / -1 !important;margin-top:0 !important;--ar:4/3}
  .grid-even{grid-template-columns:1fr;row-gap:18px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:18px}
  .filters{grid-template-columns:1fr}
  .f2,.fl-pair{grid-template-columns:1fr}
  .submit{align-self:stretch;justify-content:space-between}
  .ticker{flex-direction:column;align-items:flex-start;gap:8px}
  .hero-acts{gap:16px}
  .hero-acts .link-lg{font-size:16px}
  .hero-acts .link-sm{color:var(--ink);font-weight:600}
  .hero-acts .link-sm::after{transform:scaleX(1)}
  .toolbar{gap:12px}
  .spec-strip{grid-template-columns:1fr 1fr}
  .advertise-in{flex-direction:column;align-items:flex-start}
  .advertise-btn{align-self:stretch;justify-content:center}
}
.load-error{grid-column:1/-1}.load-error .btn{margin-top:16px}
.favorites-error{position:fixed;inset-inline:20px;bottom:90px;z-index:1000;max-width:520px;margin-inline:auto;padding:18px 24px;background:var(--ink);color:var(--paper);border:1px solid var(--line);font-size:16px;line-height:1.7}