/* النسخة ١ — «الواجهة الليلية» · Readex Pro للعناوين + Tajawal للمتن · صور 3:5 */
:root{
  --bg:#1E110D; --bg2:#26150F; --paper:#2A1712; --ink:#F3EBE3; --muted:#BFA697;
  --line:rgba(243,235,227,.12); --gold:#B4885D; --gold-ink:#D4AE84;
  --accent:#C69A6C; --on-accent:#1E110D; --chip-on:#C69A6C; --chip-on-ink:#1E110D;
  --price:#F3EBE3; --media-bg:#2A1712; --field:#1E110D; --nav-hover:rgba(243,235,227,.07);
  --font-h:'Readex Pro','Tajawal',sans-serif; --font-b:'Tajawal',sans-serif; --w-h:500;
  --ratio:3/5; --pos:50% 30%; --r-m:16px; --r-s:12px; --top-h:72px;
  --top-bg:rgba(30,17,13,.0); --top-ink:#F3EBE3; --top-line:transparent;
  --foot-bg:#140B08; --foot-ink:#E8DCD0; --foot-h:#D4AE84; --fab-bg:#C69A6C; --fab-ink:#1E110D; --pacts-bg:#1E110D;
}
body{background:var(--bg)}
.top{position:fixed;inset-inline:0;top:0}
body.scrolled .top,body:not([data-page=home]) .top{--top-bg:rgba(30,17,13,.9);--top-line:rgba(243,235,227,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body:not([data-page=home]) main{padding-top:var(--top-h)}
.callbtn{color:#D4AE84}
.icbtn{border-color:rgba(243,235,227,.18)}
.btn-o{color:#F3EBE3;border-color:rgba(243,235,227,.45)}
.btn-o:hover{border-color:#F3EBE3}

/* الواجهة: مقطعٌ بملء الشاشة وكتابةٌ كبيرة خفيفة — هي اللحظة الوحيدة الجريئة في الصفحة */
.hero{min-height:100svh;display:flex;align-items:flex-end;color:#fff;background:#1E110D}
/* p93 (المالك): «إذا حطيت الشعار فقط العنوان… يرقى فوق… أبيه يكون نفس الفراغ… يبقى زي الباقيين» — الارتفاعُ والمحاذاةُ كبقيّة
   الأوضاع (١٠٠svh · أسفل)، والوضعُ يغيّر الخلفيّةَ وحدَها ويضع الشعارَ مكانَ الوسيطة. كان ٧٢svh ومتوسّطاً فارتفع العنوانُ عن مكانه. */
.hero[data-hero=logo]{background:radial-gradient(120% 90% at 70% 10%,#4a2a20 0%,#1E110D 70%)}
.hero-media.hero-logo{display:flex;align-items:center;justify-content:center;inset:var(--top-h) 0 auto 0;height:calc(54svh - var(--top-h));pointer-events:none}
.hero-media.hero-logo img{width:min(34vw,360px);height:auto;max-height:70%;object-fit:contain;opacity:.95;filter:drop-shadow(0 10px 30px rgba(0,0,0,.25))}
.hero-veil{background:linear-gradient(180deg,rgba(30,17,13,.55) 0%,rgba(30,17,13,.12) 38%,rgba(30,17,13,.9) 100%)}
.hero-in{padding-block:0 clamp(70px,12vh,120px);width:100%}
.kick{display:flex;align-items:center;gap:10px;font-size:.92rem;color:#E9D9C8;margin-bottom:18px}
.kick img{width:34px;height:34px}
.hero-t{font-weight:300;font-size:clamp(2.4rem,7.4vw,5.6rem);line-height:1.08;letter-spacing:-.02em;max-width:14ch}
.hero-s{color:#D4AE84;font-family:var(--font-h);font-weight:400;font-size:clamp(1.15rem,2.6vw,1.6rem);margin-top:14px}
.cue{position:absolute;inset-block-end:22px;inset-inline-start:50%;transform:translateX(50%);width:26px;height:42px;border:1.5px solid rgba(255,255,255,.5);border-radius:14px}
.cue span{position:absolute;top:8px;left:50%;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@media (max-width:760px){.cue{display:none}.hero-in{padding-bottom:56px}}
/* الجولة ٣ — فهد: «الفيديو جداً منسوي زوم». على الشاشة الطولية كان المقطع يملأ الشاشة كلّها فيُقصّ شريطاً ضيّقاً من وسطه
   (≈٢٦٪ من عرض المشهد بالجوال، ≈٣١٪ بالآيباد العمودي) ويُكبَّر. صار صندوقُه أقصر (فيُظهر ≈٤٥٪ بالجوال و≈٦٠٪ بالآيباد)،
   ويذوب أسفلُه في لون الواجهة بمنحنى ناعم (smoothstep بإحدى عشرة نقطة) — فلا حافّةَ تظهر ولا حدَّ للتلاشي. */
@media (orientation:portrait){
  .hero-media.hero-logo{height:calc(min(66svh,128vw) * .78 - var(--top-h) * .4)}
  .hero-media.hero-logo img{width:min(58vw,300px)}
  .hero[data-hero=video] .hero-media,.hero[data-hero=animated] .hero-media,.hero[data-hero=still] .hero-media{
    bottom:auto;height:min(66svh,128vw);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,rgba(0,0,0,.972) 56.8%,rgba(0,0,0,.896) 61.6%,rgba(0,0,0,.784) 66.4%,rgba(0,0,0,.648) 71.2%,rgba(0,0,0,.5) 76%,rgba(0,0,0,.352) 80.8%,rgba(0,0,0,.216) 85.6%,rgba(0,0,0,.104) 90.4%,rgba(0,0,0,.028) 95.2%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 0%,#000 52%,rgba(0,0,0,.972) 56.8%,rgba(0,0,0,.896) 61.6%,rgba(0,0,0,.784) 66.4%,rgba(0,0,0,.648) 71.2%,rgba(0,0,0,.5) 76%,rgba(0,0,0,.352) 80.8%,rgba(0,0,0,.216) 85.6%,rgba(0,0,0,.104) 90.4%,rgba(0,0,0,.028) 95.2%,transparent 100%)}
}

/* اكتب طلبك — حبّةٌ ذهبيّة وسهمٌ يتحرّك تحتها (بنية بيئة مساح التجريبية) */
.req{padding:52px 0 8px}
.req .rb-in{border-color:rgba(212,174,132,.28);background:transparent}
:root{--rb-pill:#C69A6C;--rb-pill-ink:#1E110D;--rb-chev:#D4AE84;--rb-shadow:rgba(0,0,0,.45)}
.req input,.req textarea{background:#1A0F0B;border-color:rgba(243,235,227,.14);color:#F3EBE3}
.req textarea::placeholder{color:#8f786b}
.rb-chip{background:#1E110D;border-color:rgba(243,235,227,.16);color:#E9DCD0}
.rb-sep{border-color:rgba(243,235,227,.1)}

/* العقارات */
.listings{padding:56px 0 80px}
.sec-t{font-weight:400}
.mapbtn{background:transparent;color:#F3EBE3;border-color:rgba(243,235,227,.2)}
.mapbtn .ic{color:#D4AE84}
.chip{color:#E9DCD0;border-color:rgba(243,235,227,.16)}
.srch input,.srch button{background:#26150F;color:#F3EBE3;border-color:rgba(243,235,227,.16)}
.card-media{border-radius:14px}
.card-media::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(212,174,132,.28);pointer-events:none;z-index:2}
.badge{background:rgba(20,11,8,.74)}
.badge.pur{background:#C69A6C;color:#1E110D}
.card-p .pr{color:#F3EBE3}
.card-code{color:#9c8577}
.grid{--gap:26px}
@media (max-width:760px){.grid{--gap:14px}}

/* صورة مع نص */
.band{min-height:min(78vh,640px);display:flex;align-items:center;color:#fff}
.band-veil{background:linear-gradient(90deg,rgba(30,17,13,.25),rgba(30,17,13,.88) 70%)}
[dir=rtl] .band-veil{background:linear-gradient(270deg,rgba(30,17,13,.92) 0%,rgba(30,17,13,.55) 55%,rgba(30,17,13,.2) 100%)}
.band-in{padding-block:80px;max-width:var(--wrap);width:100%}
.band-in h2{font-weight:300;font-size:clamp(2rem,5vw,3.4rem);max-width:16ch}
.band-in p{max-width:44ch;margin-top:14px;color:#E9DCD0;font-size:1.05rem}
.band-in .line{display:block;width:64px;height:2px;background:#D4AE84;margin-bottom:22px}
/* الجولة ٣ — فهد: «النسخة السوداء بدون صور»: قسمٌ داكنٌ هادئ بالخطّ الذهبي والعنوان والنص والزرّين */
.band.noimg{min-height:0;background:#22130E;border-block:1px solid rgba(212,174,132,.12)}
.band.noimg .band-in{padding-block:clamp(64px,9vw,104px)}

/* صفحة العقار */
.v1pp .sticky{position:sticky;top:calc(var(--top-h) + 12px)}
@media (max-width:900px){.v1pp .sticky{position:static}}
.gal{background:#120A07}
.slide{--pp-maxh:84vh}
.price-card{--price-bg:#26150F;border:1px solid rgba(212,174,132,.25)}
.prow b{color:#F3EBE3}
.cells{background:rgba(243,235,227,.1);border-color:rgba(243,235,227,.1)}
.cell{background:#22130E}
.pab{background:#26150F;border-color:rgba(243,235,227,.12);color:#F3EBE3}
.pab.main{background:#C69A6C;color:#1E110D;border-color:#C69A6C}
.pab.main .ic{color:#1E110D}
.sheet{--paper:#26150F;--bg2:#1E110D}
.sheet input,.sheet textarea{background:#1A0F0B;color:#F3EBE3}
.drawer{--paper:#22130E;--bg2:#2E1A13}
.drawer .ctc .ci{background:#2E1A13}
.team div{background:#2E1A13}
.hit{background:#22130E}
.est-sum div{background:#26150F}
.unit{background:#22130E}
.pageov{--bg:#1E110D}

/* ── p92 (مساح) ─────────────────────────────────────────────────────────────────────────────────
   ن٦ (المالك): «بالمشاريع… الصورة تطلع برا الكيربز… تتقيد بالكيربز… وكأنه خلفها بطاقات خفيفة» ⟵ الصورةُ مقصوصةٌ بزواياها في كلّ
   محرّك (سفاري يُفلت الزوايا مع التحويل بلا قناع) · وبطاقةُ المشروع طبقتان خفيفتان خلفها تطلّان من أعلاها. */
.card-media{isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(white,black)}
.card.est{isolation:isolate;margin-top:13px}
.card.est::before,.card.est::after{content:'';position:absolute;inset-inline:7%;top:-7px;height:44px;border-radius:14px 14px 0 0;
  background:rgba(180,136,93,.34);z-index:-1;pointer-events:none}
.card.est::after{inset-inline:14%;top:-13px;background:rgba(180,136,93,.17)}
/* سومُ المشروع: «طريقة كتابة السعر للسوم» فوق زرّين متساويين (صياغة p89) */
.bmt{margin:2px 2px 6px;font-size:.84rem;font-weight:800;text-align:start}
.bmode{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.bmode button{min-height:44px;padding:7px 8px;border-radius:var(--r-s,12px);border:1.5px solid var(--line,rgba(180,136,93,.4));background:transparent;
  color:inherit;font:inherit;font-size:.82rem;font-weight:700;line-height:1.3;text-wrap:balance;cursor:pointer}
.bmode button.on{background:var(--gold,#B4885D);border-color:var(--gold,#B4885D);color:#fff}
.ttl{margin:-4px 2px 8px;font-size:.84rem;opacity:.75}

/* p94 ن٥ — «بيع / إيجار» قسمان كبيران فوق الفلاتر (القالبُ المخصّص) */
.phero{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 16px}
.phc{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:20px 22px;border-radius:var(--r-m,16px);border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;cursor:pointer;text-align:start;transition:border-color .2s,transform .2s}
.phc b{font-family:var(--font-h);font-weight:500;font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.2}
.phc span{font-size:.85rem;color:var(--muted)}
.phc:hover{transform:translateY(-2px);border-color:var(--gold)}
.phc.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:color-mix(in srgb,var(--accent) 9%,var(--paper))}
.phall{align-self:center;justify-self:start;border:0;background:none;color:var(--gold-ink,var(--gold));font:inherit;font-weight:700;cursor:pointer;padding:6px 2px}