/* =====================================================
   ديار الأنس — الأساس والعناصر المشتركة
   لا يُضاف هنا إلا ما تستخدمه أقسامٌ متعددة فعلاً.
   ===================================================== */
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0}

/* ⚠ القصّ على `html` **و**`body` معاً — لا على `body` وحده.
   كان على `body` فقط، فبقيت الصفحة تنزاح أفقياً على الجوّال: عنصرٌ
   متجاوزٌ داخل الجسم يمدّ `documentElement` نفسه، و`html` هو من يملك
   شريط التمرير — فلا يمنعه قصُّ ابنه.

   و`clip` لا `hidden` عمداً: الأخيرة تُنشئ سياق تمريرٍ جديداً فتكسر
   `position:sticky` وتثبيتَ الأقسام في ScrollTrigger. أمّا `clip` فتقصّ
   بلا أن تُنشئ حاوية تمرير.

   وهذا حزامُ أمانٍ لا بديلٌ عن إصلاح السبب: أيّ تجاوزٍ يبقى خطأً يُلاحَق
   (انظر `clampCards` في قسم المخطّط)، لكنّ الزائر لا يدفع ثمنه. */
html{overflow-x:clip}

body{
  font-family:var(--f-body);
  background:var(--sand);
  color:var(--ink);
  font-size:16.5px;
  line-height:2;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
ul{list-style:none}
button{font:inherit; background:none; border:none; cursor:pointer; color:inherit}
:focus-visible{outline:2px solid var(--water); outline-offset:3px; border-radius:6px}

.container{max-width:var(--container); margin-inline:auto; padding-inline:24px}

/* ---------- عناوين مشتركة ---------- */
/* مع خطٍّ سانس واحد للعائلة كلّها، التمايز يأتي من الوزن والتباعد
   لا من اختلاف العائلة — فنشدّ سطر العنوان ونقلّص تباعد حروفه. */
h2{
  font-family:var(--f-display);
  font-weight:var(--w-display);
  font-size:clamp(30px, 4.6vw, 52px);
  line-height:1.45;
  letter-spacing:-.015em;
  text-wrap:balance;
  margin-bottom:18px;
}
.display-sm{
  font-family:var(--f-display);
  font-weight:var(--w-display);
  font-size:clamp(32px, 5.4vw, 62px);
  line-height:1.4;
  letter-spacing:-.02em;
}
.eyebrow{color:var(--gold-2); font-size:13.5px; font-weight:700; margin-bottom:14px}
.eyebrow.gold{color:var(--gold)}
.section-sub{color:var(--muted); max-width:60ch; margin-bottom:34px}
.section-sub.light{color:var(--paper-muted)}
.footnote{font-size:13px; color:var(--muted); margin-top:18px}

/* ---------- أزرار مشتركة ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 30px; border-radius:99px;
  font-weight:600; font-size:15.5px; line-height:1.6;
  transition:transform .35s var(--ease), box-shadow .35s, background .35s, color .35s, border-color .35s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn-sm{padding:9px 22px; font-size:14px}
.btn-gold{background:var(--gold); color:var(--navy-2); box-shadow:0 10px 28px rgba(201,164,92,.28)}
.btn-gold:hover{background:var(--gold-3)}
.btn-ghost{border:1px solid rgba(234,241,247,.55); color:var(--paper)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold)}
.btn-navy{background:var(--navy); color:var(--paper)}
.btn-navy:hover{background:var(--navy-2)}
.is-soon{cursor:default; opacity:.75}
.is-soon:hover{transform:none}

/* ---------- زر واتساب العائم ---------- */
/* أسفل اليمين — والمربّع الركني أسفل اليسار، فلا يتزاحمان */
.wa-float{
  position:fixed; bottom:22px; right:22px; z-index:40;
  background:#1FA855; color:#fff; font-weight:700; font-size:14px;
  border-radius:99px; padding:12px 24px;
  box-shadow:0 14px 34px rgba(31,168,85,.35);
  transition:transform .3s var(--ease);
}
.wa-float:hover{transform:translateY(-3px)}
/* على الجوّال يصير المربّع الركني شريطاً عريضاً — نرفع الزر فوقه */
@media (max-width:620px){
  .wa-float{bottom:104px; font-size:13.5px; padding:11px 20px}
}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms !important}
}