/* ===== nav ===== */
/* ===== قسم: شريط التنقّل ===== */
.s-nav{
  position:fixed; inset-inline:0; top:0; z-index:50;
  transition:background .45s, box-shadow .45s, backdrop-filter .45s;
}
/* بعرض المحتوى لا بعرض الشاشة — القياسات نفسها التي في `.container`.
   كان الشريط يمتدّ من حافةٍ إلى حافة والنصُّ تحته محصورٌ في `--container`،
   فيقف الشعارُ وأزرارُ التنقّل خارج عمود الصفحة كأنّهما ليسا منها. */
.s-nav__inner{
  display:flex; align-items:stretch;
  max-width:var(--container); margin-inline:auto;
  padding-inline:24px;
  padding-block:26px 0;
  transition:padding .45s var(--ease);
}
/* الشعار كاملاً — لا جزءاً منه ولا اسماً بخطّ الموقع بديلاً عنه.
   قناعٌ لا صورة، فيأخذ لون النصّ ويتبعه في التحويم وفي حالة الشريط
   الصلبة، بملفٍّ واحدٍ لا نسخةٍ لكل لون. */
.s-nav__logo{
  display:block; flex:0 0 auto; align-self:center;
  width:89px; height:70px;
  color:var(--paper);
  background:currentColor;
  -webkit-mask:url(/assets/img/logo.svg) no-repeat center/contain;
          mask:url(/assets/img/logo.svg) no-repeat center/contain;
  transition:color .3s, width .45s var(--ease), height .45s var(--ease);
}
/* ⚠ لا ذهبَ على الشعار: «الشعار بالأخضر أو بالكلسي — لا غير» (القاعدة
   الثانية في نظام الألوان: شعارٌ برونزيٌّ أو أزرق يكسر التعرّف من أوّل
   مرّة). والتحويمُ يخفت قليلاً بدل أن يبدّل اللون. */
.s-nav__logo:hover{opacity:.82}
/* بعد التمرير يصغر ولا يُستبدل: الشريط يضيق، والشعار يضيق معه. */
.s-nav.is-solid .s-nav__logo{width:61px; height:48px}

.s-nav__bar{
  margin-inline-start:auto;
  background:#fff;
  display:flex; align-items:center;
  padding-inline:30px;
  transition:background .45s, box-shadow .45s;
}
.s-nav__links{display:flex; align-items:center; gap:22px}
/* المستوى الأوّل وحده — لا روابطُ القوائم المنسدلة، ولها ستايلُها */
.s-nav__links > li > a,
.s-nav__top{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--green); font-size:14.5px; font-weight:500;
  padding-block:19px;
  position:relative;
  transition:color .3s;
}
.s-nav__links > li > a::after,
.s-nav__top::after{
  content:""; position:absolute; inset-inline:0; bottom:13px; height:1.5px;
  background:var(--gold); transform:scaleX(0); transform-origin:right center;
  transition:transform .35s var(--ease);
}
.s-nav__links > li > a:hover,
.s-nav__top:hover{color:var(--gold-2)}
.s-nav__links > li > a:hover::after,
.s-nav__has:hover .s-nav__top::after,
.s-nav__top:hover::after{transform:scaleX(1)}
/* الصفحة المفتوحة — يعرف الزائر أين هو، ويقرؤه قارئُ الشاشة من `aria-current` */
.s-nav__links > li > a[aria-current]{color:var(--gold-2)}
.s-nav__links > li > a[aria-current]::after{transform:scaleX(1)}
/* ⚠ وإن كانت الصفحة داخل منسدلة أضاء عنوانُ المجموعة أيضاً. بدونه يقف
   الزائر في `/facilities` وليس في الشريط ما يدلّه أين هو — فالعلامةُ
   مخبوءةٌ في لوحةٍ مطويّة لا تُرى حتى تُفتح. */
.s-nav__has:has(.s-nav__pop a[aria-current]) .s-nav__top{color:var(--gold-2)}
.s-nav__has:has(.s-nav__pop a[aria-current]) .s-nav__top::after{transform:scaleX(1)}

/* ---------- القوائم المنسدلة ---------- */
.s-nav__has{position:relative}
/* السهم — حرفٌ مرسوم بالحدود لا محرفُ نصّ، فلا يتبدّل شكلُه بين الخطوط */
.s-nav__top::before{
  content:""; flex:0 0 auto; order:2;
  width:7px; height:7px; margin-top:-3px;
  border-inline-end:1.5px solid currentColor; border-block-end:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .3s var(--ease);
  opacity:.65;
}
.s-nav__has:hover .s-nav__top::before,
.s-nav__top[aria-expanded="true"]::before{transform:rotate(-135deg) translate(-2px,-2px)}

.s-nav__pop{
  position:absolute; top:100%; inset-inline-start:50%;
  transform:translateX(50%) translateY(8px);
  min-width:264px;
  background:var(--card);
  border:1px solid var(--line);
  border-top:2px solid var(--gold);
  border-radius:0 0 14px 14px;
  box-shadow:0 22px 48px rgba(22,33,26,.16);
  padding:8px;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s, transform .3s var(--ease), visibility .25s;
  z-index:2;
}
/* ⚠ جسرٌ شفّاف يغطّي الثمانيةَ بكسلاً بين الزرّ واللوحة. بدونه يمرّ
   المؤشّر على فراغٍ فتُغلق اللوحة قبل أن يبلغها. */
.s-nav__pop::before{content:""; position:absolute; inset-inline:0; top:-10px; height:10px}
.s-nav__has:hover .s-nav__pop,
.s-nav__has:focus-within .s-nav__pop,
.s-nav__has.is-open .s-nav__pop{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(50%) translateY(0);
}
.s-nav__pop a{
  display:flex; flex-direction:column; gap:1px;
  padding:11px 14px; border-radius:9px;
  color:var(--ink);
  transition:background .25s, color .25s;
}
.s-nav__pop a b{font-weight:600; font-size:14.5px}
.s-nav__pop a span{font-size:12.5px; color:var(--muted); line-height:1.6}
.s-nav__pop a:hover{background:var(--sand-2)}
.s-nav__pop a:hover b{color:var(--gold-2)}
.s-nav__pop a[aria-current]{background:var(--sand-2)}
.s-nav__pop a[aria-current] b{color:var(--gold-2)}

.s-nav__cta{
  background:var(--green);
  color:var(--paper);
  display:flex; align-items:center;
  padding-inline:32px;
  font-size:14.5px; font-weight:600;
  transition:background .35s, color .35s;
}
.s-nav__cta:hover{background:var(--gold-face); color:var(--on-gold)}

/* ---------- خلف الباب ----------
   البابُ عتبة، وشريطٌ يقف أمامها ينقضها. فيُخفى حتى ينفتح.

   ⚠ من أوّل رسمةٍ لا بسكربت: لو انتظرنا الجافاسكربت لظهر الشريطُ لحظةً
   ثمّ اختفى — وهي أسوأُ من بقائه. و`:has` يحصر القاعدة في الصفحة التي
   فيها بابٌ، أي الرئيسية وحدها.

   ⚠ و`opacity` لا `visibility`: الثانيةُ تُخرجه من مسار لوحة المفاتيح
   فلا يبلغه من يكبس Tab أصلاً — ولا يعمل `:focus-within` تحته.
================================================================= */
body:has(.s-hero__gate) .s-nav{
  opacity:0; pointer-events:none;
  transition:opacity .8s var(--ease);
}
/* ⚠ ضمانةٌ مشروطة: تعمل **ما لم** يُعلن `hero.js` عن نفسه بـ`gate-live`.
   فإن تعثّر السكربتُ ظهر الشريطُ بعد أربع ثوانٍ بدل أن يبقى الزائر بلا
   قائمةٍ إلى الأبد — وإن عمل فلا مؤقّتَ أصلاً، فلا يقفز الشريطُ في وجه
   من وقف يتأمّل الباب. (كانت غيرَ مشروطةٍ فظهر بعد ستٍّ مهما حدث.) */
body:has(.s-hero__gate):not(.gate-live) .s-nav{
  animation:s-nav-rescue 0s linear 4s forwards;
}
/* يبلغه من يكبس Tab قبل أن ينفتح الباب — فيظهر له وحده */
body:has(.s-hero__gate).is-nav-in .s-nav,
body:has(.s-hero__gate) .s-nav:focus-within{
  opacity:1; pointer-events:auto; animation:none;
}
/* زيارةٌ ثانيةٌ في الجلسة نفسها: لا بابَ ولا تلاشيَ — يقف الشريطُ مكانَه */
body.no-gate .s-nav{opacity:1; pointer-events:auto; transition:none; animation:none}
@keyframes s-nav-rescue{to{opacity:1; pointer-events:auto}}

/* ---------- بعد التمرير ---------- */
.s-nav.is-solid{
  background:rgba(33,47,37,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(243,236,225,.09);
}
/* ⚠ 24 على الطرفين لا `28px 0`: الصفرُ كان يُلصق زرَّ الحجز بحافّة الشاشة،
   وهو ما ينقض المحاذاة نفسها التي من أجلها حُصر الشريط. */
.s-nav.is-solid .s-nav__inner{padding-block:0; padding-inline:24px}
.s-nav.is-solid .s-nav__bar{background:transparent}
.s-nav.is-solid .s-nav__links > li > a,
.s-nav.is-solid .s-nav__top{color:var(--paper)}
.s-nav.is-solid .s-nav__links > li > a:hover,
.s-nav.is-solid .s-nav__top:hover{color:var(--gold-3)}
.s-nav.is-solid .s-nav__links > li > a[aria-current]{color:var(--gold-3)}
.s-nav.is-solid .s-nav__has:has(.s-nav__pop a[aria-current]) .s-nav__top{color:var(--gold-3)}
/* اللوحةُ المنسدلة تبقى فاتحةً على الحالين — هي بطاقةٌ فوق الصفحة لا
   جزءٌ من الشريط، وقلبُ ألوانها مع الشريط يجعلها تختفي في المحتوى. */
.s-nav.is-solid .s-nav__cta{background:var(--gold-3); color:var(--forest)}
.s-nav.is-solid .s-nav__cta:hover{background:var(--gold-3)}

/* ---------- الجوّال ---------- */
.s-nav__burger{display:none; flex-direction:column; gap:6px; padding:16px 20px; align-self:center}
.s-nav__burger span{width:24px; height:2px; background:var(--paper); transition:transform .3s var(--ease)}
.s-nav__burger.is-open span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.s-nav__burger.is-open span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
.s-nav__mobile{
  display:none; flex-direction:column; gap:2px;
  background:rgba(33,47,37,.97); padding:14px 24px 26px;
  /* المجموعتان مطويّتان، فإذا فُتحتا معاً صارت الوجهاتُ تسعاً — وقد
     تتجاوز الشاشة على هاتفٍ قصير، فتنساب بدل أن تُقصّ. */
  max-height:calc(100vh - 76px); overflow-y:auto; overscroll-behavior:contain;
}
.s-nav__mobile.is-open{display:flex}
.s-nav__mobile > a{color:var(--paper); padding:12px 4px; font-size:16px; border-bottom:1px solid rgba(243,236,225,.08)}
.s-nav__mobile a.btn{border:none; margin-top:14px; justify-content:center}

/* المجموعات المطويّة — `<details>` فتعمل بلا سكربت */
.s-nav__m-group{border-bottom:1px solid rgba(243,236,225,.08)}
.s-nav__m-group summary{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 4px; color:var(--paper); font-size:16px;
  cursor:pointer; list-style:none;
}
.s-nav__m-group summary::-webkit-details-marker{display:none}
.s-nav__m-group summary::after{
  content:""; width:8px; height:8px; margin-inline-end:4px;
  border-inline-end:1.5px solid var(--gold-3); border-block-end:1.5px solid var(--gold-3);
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.s-nav__m-group[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.s-nav__m-group a{
  display:block; color:var(--paper-muted);
  padding:9px 18px 9px 4px; font-size:15px;
}
.s-nav__m-group a:last-child{padding-bottom:14px}

@media (max-width:1040px){
  .s-nav__bar, .s-nav__cta{display:none}
  .s-nav__burger{display:flex}
  /* 24 عند الشعار كالمحتوى، و4 عند الزرّ لأنّ للزرّ حشوتَه الداخلية 20 —
     فيقف حدُّه البصري على 24 هو أيضاً. */
  .s-nav__inner{padding-inline:24px 4px; padding-block:16px}
  .s-nav__burger{margin-inline-start:auto}
  .s-nav.is-solid .s-nav__inner{padding-inline:24px 4px; padding-block:10px}
  /* على الجوّال يبقى الشعار كاملاً ويصغر: الشريط هنا يخلو من الروابط
     فلا شيء يوازنه، والمقاسُ الكامل يأكل عرضاً لا يفضل منه شيء. */
  .s-nav__logo{width:67px; height:53px}
  .s-nav.is-solid .s-nav__logo{width:56px; height:44px}
}

/* ===== hero ===== */
/* ===== قسم: الواجهة =====
   كل القواعد مسبوقة بـ .s-hero — لا تتسرّب لأي قسم آخر.

   ⚠ ارتفاعُ القسم 320vh والمسرحُ ملتصقٌ بداخله: هذا الطولُ هو مسافةُ
   التمرير التي تجري فيها الحركتان (صعودُ النصّ ثمّ صعودُ القوس). تقصيرُه
   يسرّع الاثنتين معاً، وتطويلُه يبطّئهما — ولا شيء غيرَه يضبط الإيقاع.
========================================== */
.s-hero{position:relative; height:440vh; color:var(--paper)}
/* ⚠ زيارةٌ ثانيةٌ في الجلسة نفسها: البابُ لا يُعرض، فتُحذف مسافةُ تمريره
   (‏0.20 من 440vh ≈ 88vh) وإلا بقيت مسافةً ميّتةً لا يجري فيها شيء. */
body.no-gate .s-hero{height:352vh}
body.no-gate .s-hero__gate,
body.no-gate .s-hero__frame{display:none}
.s-hero__stage{position:sticky; top:0; height:100svh; overflow:clip}

/* ---------- الصورة ---------- */
/* طبقةٌ مستقلّة (`translateZ(0)`) فلا تُعاد رسمتُها مع كلّ إطارٍ من القوس */
.s-hero__media{position:absolute; inset:0; z-index:1; will-change:transform; transform:translateZ(0)}
.s-hero__media img{width:100%; height:100%; object-fit:cover; display:block}

.s-hero__veil{
  position:absolute; inset:0; z-index:2;
  /* ⚠ خفّت كثيراً، وبقياسٍ لا بذوق. الرندرُ تحت النصّ **داكنٌ أصلاً**:
     سطوعُه 0.16 عند العنوان و0.15 عند السطر — أي أنّ الأبيضَ عليه يبلغ
     6:1 و7:1 بلا ستارةٍ إطلاقاً. وكانت الستارةُ هناك 36% و52%، فلا
     تحمي قراءةً بل تُطفئ حديقةً وماءً وحجراً دافئاً — وهي أكثرُ ما يشدّ
     في الصفحة. وكان أعلاها 44% ولا نصَّ هناك أصلاً: شريطُ التنقّل يحمل
     خلفيّتَه البيضاء بنفسه.

     ⚠ وما بقي منها احتياطٌ لصورةٍ أفتح: الواجهةُ تُبدَّل، فلو ضُبطت على
     هذه الصورة وحدها لانكسرت القراءةُ مع أوّل بديل. فبقي الأسفلُ 58%
     يخفت بسرعة، والوسطُ والأعلى مفتوحان. */
  background:
    linear-gradient(to top,
      rgba(22,33,26,.58) 0%,
      rgba(22,33,26,.30) 18%,
      rgba(22,33,26,.10) 42%,
      rgba(22,33,26,0)   70%);
}

.s-hero__watermark{
  position:absolute; z-index:3;
  bottom:-16%; left:-8%;
  width:min(520px, 48vw);
  color:#fff; opacity:.06;
  pointer-events:none;
}
.s-hero__watermark img{width:100%; height:auto}

/* ---------- النصّ ---------- */
.s-hero__copy{
  position:absolute; z-index:4;
  inset-inline:0; bottom:clamp(96px, 17vh, 190px);
  padding-inline:26px; text-align:center;
  will-change:transform, opacity;
  /* ⚠ ظِلٌّ موضعيٌّ خلف النصّ وحده بدل تعتيم الصورة كلِّها.
     الستارةُ العامّة تُظلم ما لا يُقرأ عليه شيء؛ وهذا يُظلم ما تحت الحروف
     فقط، ويتلاشى قبل أن يبلغ الحديقة. ارفعه إن جاءت واجهةٌ أفتحُ —
     سطرٌ واحد، ولا تُمَسّ الستارة. */
  --scrim:.42;
}
.s-hero__copy::before{
  content:""; position:absolute; z-index:-1;
  inset:-46px -8% -60px;
  background:radial-gradient(60% 62% at 50% 52%,
    rgba(22,33,26,var(--scrim)) 0%,
    rgba(22,33,26,calc(var(--scrim) * .55)) 55%,
    rgba(22,33,26,0) 100%);
  pointer-events:none;
}
.s-hero__eyebrow{
  color:var(--gold-3);
  font-size:13px; font-weight:700; letter-spacing:.04em;
  margin-bottom:12px;
}
.s-hero__title{
  font-family:var(--f-display);
  font-weight:var(--w-display);
  font-size:clamp(32px, 5vw, 66px);
  line-height:1.26; letter-spacing:-.02em;
  color:#fff;
  text-shadow:0 4px 44px rgba(0,0,0,.34);
  text-wrap:balance;
  margin:0;
}
.s-hero__sub{
  margin:18px auto 0; max-width:52ch;
  font-size:clamp(14px, 1.2vw, 16.5px); line-height:1.9;
  color:var(--paper);
  text-shadow:0 2px 22px rgba(0,0,0,.4);
}

/* ---------- تلميح التمرير ---------- */
/* ⚠ `z-index:9` — فوق الباب (7) والإطار (8): التلميحُ هو ما يقول
   للزائر إنّ التمرير يفتح الباب، فلا يُحجب بما يشرحه. وكان يُكتب
   هنا 4 ثمّ يُنقَض بـ9 بعد مئةٍ وثلاثين سطراً؛ فلا يُعرف النافذُ
   إلا بقراءة الملفّ كلِّه. */
.s-hero__hint{
  position:absolute; z-index:9;
  inset-inline-start:max(24px, calc((100% - var(--container)) / 2 + 24px));
  bottom:34px; margin:0;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  writing-mode:vertical-rl;
  font-size:11px; letter-spacing:.24em; color:var(--paper-muted);
  will-change:opacity;
}
.s-hero__hint i{display:block; width:1px; height:46px; background:currentColor; opacity:.45}

/* ---------- الطبقات المقيسة بالسكربت ----------
   ⚠ مخفيّةٌ حتى يقيسها `hero.js`. بلا هذا تُرسم في أوّل إطارٍ بمقاسها
   الطبيعي: الإطارُ 1008×1822 بكسلاً من الذهب — مقاسٌ مكتوبٌ في CSS ولا
   `transform` عليه بعد — والقوسُ 995×1730، لأنّ `viewBox` لا يُضبط إلا
   بالسكربت فتُقاس وحداتُ المسار بالبكسل واحدةً بواحدة.
   فيومض شيءٌ أكبرُ من الشاشة ثمّ يصغر عند كلّ تحديثٍ للصفحة.
   ⚠ و`visibility` لا `display`: الأخيرةُ تمنع القياس نفسَه
   (`getBoundingClientRect` يعود صفراً) فلا يُضبط `viewBox` أصلاً. */
.s-hero__arch,
.s-hero__gate,
.s-hero__frame{visibility:hidden}
.s-hero.is-set .s-hero__arch,
.s-hero.is-set .s-hero__gate,
.s-hero.is-set .s-hero__frame{visibility:visible}
/* ⚠ وكتلةُ الوصول معها — وهي التي كانت ناقصة. `arriveScene` هو ما يضبط
   عتمتَها، فقبل أن يصل السكربتُ تُرسم بكاملها في منتصف الشاشة: فوق صورة
   الواجهة وفوق نصِّها معاً. وكانت وميضاً يُغتفر حين كان النصُّ سطرين؛
   ومذ صار عنواناً كبيراً وفقرةً بستّ علامات (2026-08-21) صارت شاشةً
   مكسورة يراها من يفتح الصفحة على اتّصالٍ بطيء.

   ⚠ ومقيَّدةٌ بـ`.s-hero` عمداً: مسارُ «لا حركة» في `hero.js` ينقل الكتلة
   إلى القسم الذي يلي الواجهة، فتخرج من هذا النطاق وتظهر من نفسها.
   و`.is-static` تؤكّدها ثانيةً — حزامٌ وحمّالة.

   ⚠ و`visibility` لا `opacity`: الأخيرةُ يكتبها `arriveScene` في كلّ
   إطار، فقاعدةٌ ثابتةٌ فوقها تتصارع معها. وهذه تُرفع مرّةً ولا تعود. */
.s-hero .s-hero__arrive{visibility:hidden}
.s-hero.is-set .s-hero__arrive{visibility:visible}

/* ---------- القوس الصاعد ---------- */
.s-hero__arch{position:absolute; inset:0; z-index:5; width:100%; height:100%; display:block; pointer-events:none}
/* ⚠ لونُ خلفيّةِ أوّلِ قسمٍ بعده، فيمرّ التسليم بلا قفزة. كان `--sand`
   حين كانت «الحكاية» أوّلَ ما يليه؛ ولمّا أُخفيت صار «المقوّمات» أوّلَها
   وخلفيّتُه `--sand-2`. من يعيد ترتيب الأقسام فليعد النظر هنا — الخطأُ
   يقع قفزةَ لونٍ في ذروة حركة الافتتاح بالضبط. */
.s-hero__arch-fill{fill:var(--sand-2)}
.s-hero__arch-edge{fill:none; stroke:var(--gold); opacity:.42}
.s-hero__arch-t{
  fill:var(--gold-2);                    /* 4.5:1 على الرملي */
  font-family:var(--f-display); font-weight:var(--w-display);
  letter-spacing:.01em;
}

/* ---------- ما يصل إليه الزائر داخل القوس ----------
   ⚠ فوق القوس (z-index 6) وتحت الباب (7): يُقرأ على الرملِ الذي ابتلع
   الشاشة، ولا يظهر من خلف الباب في أوّل الصفحة. */
/* ⚠ عرضٌ ثابتٌ ومركزٌ بـ`left:50%`، لا `inset-inline:0`: الكتلةُ تُصغَّر
   بـ`transform` لتسع داخل القوس وهو ما يزال ضيّقاً، والتصغيرُ لا يُعيد
   صفَّ النصّ — فلا يقفز سطرٌ إلى سطرين ثمّ يرجع وهو يكبر. */
.s-hero__arrive{
  position:absolute; z-index:6;
  left:50%; top:50%; transform:translate(-50%, -50%);
  width:min(640px, 86vw);
  padding-inline:26px; text-align:center;
  will-change:transform, opacity;
}
.s-hero__arrive h2{
  max-width:20ch; margin:0 auto;
  font-size:clamp(30px, 4vw, 52px);
  line-height:1.34; color:var(--green);
  text-wrap:balance;
}
.s-hero__arrive p{
  margin:20px auto 0; max-width:48ch;
  color:var(--muted);
  font-size:clamp(15px, 1.2vw, 17.5px); line-height:1.9;
}
/* المقوّماتُ الستّة — العدُّ بلمحة.
   ⚠ خطٌّ بتدرّجٍ لا `border-bottom`: الحدُّ السفلي في العربية يمرّ فوق
   النقاط تحت الحروف (ب ج ي) فيقطعها، وهذا يقف تحتها بمسافة.
   ولونٌ واحدٌ للجميع لا لونٌ لكلٍّ — والقاعدةُ منقولةٌ عن «المقوّمات»
   حين انتقل النصُّ منها، لا مخترعةٌ هنا. */
/* ⚠ مسبوقٌ بالكتلة عمداً: `.s-hero__arrive p` تحمل `color` وخصوصيّتُها
   (0,1,1)، فصنفٌ وحدَه (0,1,0) يخسر أمامها ويبقى النصُّ باهتاً بلا لون.
   وفي «المقوّمات» لم تظهر العلّة لأنّ القاعدتين هناك متساويتان في
   الخصوصية والأخيرةُ تغلب. */
.s-hero__arrive .s-hero__mark{
  font-weight:inherit;
  color:var(--olive);                    /* 5.45:1 على أرضية القوس */
  background-image:linear-gradient(var(--gold), var(--gold));
  background-size:100% 2px;
  background-repeat:no-repeat;
  background-position:0 calc(100% + 5px);
  padding-bottom:7px;
}
/* حين تُنقل إلى «الحكاية» بلا حركة — تصير كتلةً عادية في مجراها */
/* حين تُنقل إلى القسم الذي بعد الواجهة بلا حركة — تصير كتلةً عادية */
.s-hero__arrive.is-static{
  position:static; transform:none; opacity:1; z-index:auto;
  /* ⚠ `inset:auto` لا يكفي فيه `position:static` وحدَه: القسمُ المستقبِل
     قد يفرض `position:relative` على `.container` (و`.s-exp` تفعل)، فتغلب
     قاعدتُه المتساويةَ في الخصوصية، ويبقى `left:50%` الموروثُ من الوضع
     المطلق عاملاً — فتُزاح الكتلةُ نصفَ عرض القسم وتخرج عن الشاشة.
     قِيس: 262 بكسلاً خارج الحافّة. فتُبطَل الإزاحةُ نفسُها لا سببُها. */
  inset:auto;
  visibility:visible;                    /* ⚠ تُبطل الإخفاءَ أعلاه */
  width:auto; max-width:56ch; margin:0 auto clamp(58px, 8vw, 112px);
}

/* ---------- الباب ---------- */
/* فوق كلِّ شيءٍ إلا التلميح: هو أوّلُ ما يُرى، ويحجب النصَّ حتى ينفتح */
.s-hero__gate{position:absolute; inset:0; z-index:7; width:100%; height:100%; display:block; pointer-events:none}
.s-hero__gate-ground{fill:var(--forest)}
.s-hero__frame{
  position:absolute; z-index:8; top:0; left:0;
  width:1008.2px; height:1822.3px;            /* مقاسُ `viewBox` في `frame.svg` */
  transform-origin:504.25px 942.9px;          /* مركزُ الفتحة داخله */
  /* ⚠ برونزيٌّ لا كلسيّ، وهو استثناءٌ مقصود: قاعدةُ «الشعار بالأخضر أو
     بالكلسي» للعلامة بخطّها العربي. وهذا قوسٌ معماريٌّ مشتقٌّ منها بلا
     خطّ، والبرونزُ في النظام هو «لون التفاصيل والحواف والمعدن» — وهو
     هنا خيطٌ رفيع، أقلُّ من 1% من الشاشة (قرار المالك 2026-08-21). */
  background:var(--gold-3);
  -webkit-mask:url(/assets/img/frame.svg) no-repeat center/100% 100%;
          mask:url(/assets/img/frame.svg) no-repeat center/100% 100%;
  will-change:transform;
  pointer-events:none;
}
/* ---------- الاستجابة ---------- */
@media (max-width:620px){
  .s-hero__copy{bottom:clamp(110px, 19vh, 200px)}
  .s-hero__sub{line-height:1.85}
  /* يعلو شريطَ واتساب الثابت */
  .s-hero__hint{bottom:calc(76px + env(safe-area-inset-bottom, 0px)); inset-inline-start:20px}
}

/* ---------- تقليل الحركة ---------- */
/* ⚠ لا قوسَ أصلاً ولا مسافةَ تمريرٍ له: من طلب تقليل الحركة يرى واجهةً
   ساكنةً بارتفاع الشاشة، ثمّ «الحكاية» مباشرةً. */
@media (prefers-reduced-motion: reduce){
  /* ⚠ `body.no-gate .s-hero` أخصُّ من `.s-hero` وحدَه، ويُضاف مع تقليل
     الحركة أيضاً — فلولا ذكرُه هنا لغلب 352vh على 100svh. */
  .s-hero,
  body.no-gate .s-hero{height:100svh}
  .s-hero__arch,
  .s-hero__gate,
  .s-hero__frame{display:none}
}

/* ===== experiences ===== */
/* ===== قسم: مقوّمات المشروع =====
   القياسات منقولة من المرجع (GreenAcres · horizontal-scroll)
   ومعكوسة للعربية: المسار يبدأ من اليمين ويتحرّك يساراً مع التمرير.
================================================================ */
/* رمليٌّ أغمق: يفصله عمّا قبله، ويجعل المربّعات الكريمية تبرز،
   ويصنع نزولاً تدريجياً نحو المعرض الداكن الذي يليه. */
.s-exp{
  position:relative;
  background:var(--sand-2);
  /* ⚠ 40 لا 140: كانت الحشوةُ تفصل عنوانَ القسم عمّا قبله، والعنوانُ
     انتقل إلى القوس 2026-08-21 — فبقيت تفصل فراغاً عن فراغ. والقوسُ
     يسلّم إلى هذا القسم مباشرةً، فلا حاجة إلى مسافةِ بدايةٍ ثانية. */
  padding-block:clamp(24px, 3vw, 40px) 0;
  overflow:clip;
}

/* ---------- الزخرفتان ---------- */
.s-exp__bg{position:absolute; inset:0; overflow:clip; pointer-events:none; z-index:0}
.s-exp__watermark{position:absolute}
.s-exp__watermark img{width:100%; height:auto; color:var(--green); opacity:.045}
/* ⚠ 50% و70% بدل 40% و55% — للسبب نفسِه في «الحكاية»: الشعارُ الأفقيُّ
   يملأ 59% ممّا كان ملأه الطوليُّ عند العرض نفسِه. والرقمان محسوبان على
   الظاهر بعد القصّ لا على الصندوق: الأولى تُقصّ يميناً، فحصّتُها أقلّ. */
.s-exp__watermark--1{right:-10%; top:50%; width:50%}
.s-exp__watermark--2{left:-5%;  top:0;   width:70%}

.s-exp .container{position:relative; z-index:1}

/* ---------- العنوان والفقرة ----------
   ⚠ لا وسمَ لهذه القواعد منذ 2026-08-21: انتقل العنوانُ والفقرةُ إلى
   `.s-hero__arrive` داخل القوس. تُركت هنا لأنّ الرجوعَ واردٌ ولأنّها
   توثّق كيف كانت الفقرةُ تُضاء كلمةً كلمة — ومن يعيدها فليُعِد معها
   `data-words` في الوسم، فبلا الوسم لا يفعل `splitWords` شيئاً. */
.s-exp__header{
  padding-bottom:clamp(20px, 2.6vw, 34px);
  border-bottom:1px solid rgba(22,33,26,.15);
  margin-bottom:clamp(32px, 4.4vw, 56px);
}
.s-exp__header h2{
  font-size:clamp(32px, 4.4vw, 48px);
  color:var(--green);
  margin-bottom:0;
}
.s-exp__lead{
  font-family:var(--f-display);
  font-weight:var(--w-display);
  font-size:clamp(21px, 2.8vw, 34px);
  line-height:1.85;
  color:var(--green);
  max-width:24ch;
}
/* كل كلمة تبدأ باهتة وتُضيء مع التمرير */
.s-exp__lead .w{opacity:.22; display:inline-block}

/* ===== المقوّمات =====
   ليست زينة: الفقرة تعدّها، فيراها القارئ معدودةً بلمحة بدل أن يعدّها
   بنفسه. (صارت ستّةً بعد تحديث المحتوى — و`--p` لا يُقرأ في أيّ قاعدة،
   فالعددُ يزيد وينقص بلا تعديل ستايل.)

   ⚠ ولونٌ واحدٌ للجميع لا لونٌ لكلٍّ. كانت لكلِّ مقوّمٍ صبغتُه —
   أخضرُ حديقةٍ وذهبٌ وكحليٌّ وأزرقُ ماءٍ وزيتونيّ — فبدت الفقرةُ قوسَ
   قزحٍ لا هوية، وثلاثةٌ منها من خارج اللوحة المعتمدة أصلاً. والعدُّ لا
   يحتاج ألواناً: خطوطٌ برونزية تحت عباراتٍ زيتونية تُرى معدودةً بلمحة.

   والخطّ تحتها بتدرّجٍ لا بحدٍّ سفلي: الحدُّ السفلي في العربية يمرّ فوق
   النقاط تحت الحروف (ب ج ي) فيقطعها، وهذا يقف تحتها بمسافة. */
.s-exp__p{
  font-weight:inherit;
  color:var(--olive);                                  /* 5.4:1 على أرضية القسم */
  background-image:linear-gradient(var(--gold), var(--gold));
  background-size:100% 2px;
  background-repeat:no-repeat;
  background-position:0 calc(100% + 6px);
  padding-bottom:8px;
}

@media (prefers-reduced-motion: reduce){
  .s-exp__lead .w{opacity:1}
}

/* ---------- المسار الأفقي ---------- */
.s-exp__stage{
  /* ⚠ الهامشُ والحشوةُ العليا كانا يفصلان المسرحَ عن الفقرة فوقه، وقد
     ذهبت. والسفلى باقيةٌ كما كانت — تحتها القسمُ التالي لا فراغ.
     مجموعُ ما فوق البطاقات صار 92 بكسلاً بعد أن كان 310. */
  margin-top:clamp(12px, 1.6vw, 24px);
  padding-block:clamp(16px, 2vw, 28px) clamp(40px, 6vw, 90px);
  position:relative; z-index:1;
}
.s-exp__track{
  display:flex;
  gap:60px;
  width:max-content;
  padding-inline:max(24px, calc((100% - var(--container)) / 2 + 24px));
}

/* ---------- المربّع ---------- */
.s-exp__card{
  flex:0 0 504px;
  width:504px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;                   /* الصورة تلتزم زوايا المربّع */
  transition:transform .55s var(--ease), box-shadow .55s var(--ease),
             border-color .55s var(--ease);
}

/* الصورة تملأ عرض المربّع من حدٍّ إلى حدّ.
   ⚠ كانت `width:288px` ثابتةً داخل مساحةٍ عرضها 396px، فبقي بجانبها فراغٌ
   108px وبدت معلّقةً في زاوية. لا مقاسَ بالبكسل للصور بعد الآن. */
.s-exp__media{overflow:hidden; background:var(--sand-2)}
.s-exp__media-in{padding:0}
.s-exp__media-in img{
  display:block; width:100%; height:auto;
  aspect-ratio:4 / 3;                /* نسبة الرندرات نفسها (720×540) — بلا قصّ */
  object-fit:cover;
  transition:transform 1.1s var(--ease);
}
/* القسم **مثبَّت** أثناء التمرير الأفقي، فارتفاعٌ يتجاوز الشاشة يقصّ أسفل
   المربّعات وهي معلَّقة. على الشاشات القصيرة تُحدّ الصورة ويقصّها
   `object-fit:cover` بدل أن يُقصّ النصّ. */
@media (max-height:880px) and (min-width:992px){
  .s-exp__media-in img{aspect-ratio:auto; height:min(320px, 34vh)}
  .s-exp__body{padding:30px 46px 38px}
}

.s-exp__body{padding:38px 46px 46px}
.s-exp__body h3{
  position:relative;
  font-family:var(--f-display);
  font-weight:var(--w-display);
  font-size:clamp(26px, 2.9vw, 36px);
  line-height:1.5;
  color:var(--green);
  margin-bottom:26px;
  transition:color .45s var(--ease);
}
/* خطٌّ ذهبي تحت العنوان يمتدّ مع التحويم — يبدأ من اليمين كاتّجاه القراءة */
.s-exp__body h3::after{
  content:''; position:absolute; bottom:-11px; inset-inline-start:0;
  width:36px; height:2px; background:var(--gold);
  transition:width .6s var(--ease);
}
.s-exp__body p{
  font-size:16px;
  line-height:1.95;
  color:var(--muted);
}

/* ---------- التحويم ---------- */
.s-exp__card:hover,
.s-exp__card:focus-within{
  transform:translateY(-8px);
  border-color:var(--gold);
  box-shadow:0 26px 60px rgba(22,33,26,.19);
}
.s-exp__card:hover .s-exp__media-in img,
.s-exp__card:focus-within .s-exp__media-in img{transform:scale(1.055)}
.s-exp__card:hover .s-exp__body h3::after,
.s-exp__card:focus-within .s-exp__body h3::after{width:92px}
.s-exp__card:hover .s-exp__body h3{color:var(--gold-2)}

/* ---------- الاستجابة ---------- */
@media (max-width:991px){
  /* لا تثبيت على الجوّال — تمرير أفقي باللمس */
  .s-exp__stage{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .s-exp__stage::-webkit-scrollbar{display:none}
  .s-exp__track{gap:20px}
  .s-exp__card{flex-basis:min(420px, 84vw); width:min(420px, 84vw); scroll-snap-align:center}
  .s-exp__body{padding:26px 28px 32px}
  .s-exp__lead{max-width:none}
  /* على اللمس لا تحويم: لا يُرفع المربّع ولا تُقرَّب صورته */
  .s-exp__card:hover{transform:none; box-shadow:none}
  .s-exp__card:hover .s-exp__media-in img{transform:none}
}
@media (prefers-reduced-motion: reduce){
  .s-exp__lead .w{opacity:1}
  .s-exp__card, .s-exp__media-in img, .s-exp__body h3, .s-exp__body h3::after{transition:none}
  .s-exp__card:hover{transform:none}
  .s-exp__card:hover .s-exp__media-in img{transform:none}
}


/* ===== cinema ===== */
/* ===== قسم: الفاصل البصري الرئيسي ===== */
.s-cinema{position:relative; height:78vh; overflow:clip; display:flex; align-items:flex-end}
.s-cinema__media{position:absolute; inset:-12% 0}
.s-cinema__media img{width:100%; height:100%; object-fit:cover; will-change:transform}
/* ⚠ التدرّج ارتفع من 55٪ إلى 72٪ وثقل: صار تحت العنوان فقرةٌ وزرّ،
   والتدرّجُ القديم كان ينتهي قبلهما فيقع النصُّ على صورةٍ فاتحة. */
.s-cinema::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(22,33,26,.82), rgba(22,33,26,.34) 46%, transparent 72%);
}
.s-cinema__caption{position:relative; z-index:2; color:#fff; padding-bottom:clamp(44px, 6vw, 68px)}
/* الجملة على نَفَسين — كلُّ نَفَسٍ سطرٌ مستقل، بدل `<br>` الذي كان */
.s-cinema__line span{display:block}
/* ⚠ الإخفاء مشروطٌ بـ`is-live` يضعه `cinema.js`: بلا جافاسكربت لا يُضاف
   الصنف فيبقى النصُّ كاملاً ظاهراً — ولا يبقى قسمٌ أعمى إن تعثّر شيء. */
.s-cinema.is-live .s-cinema__line span,
.s-cinema.is-live .s-cinema__sub,
.s-cinema.is-live .s-cinema__cta{opacity:0; will-change:transform, opacity}
.s-cinema__sub{
  max-width:56ch; margin-top:18px;
  color:rgba(243,236,225,.9);
  font-size:clamp(15.5px, 1.6vw, 17.5px); line-height:1.95;
}
.s-cinema__cta{margin-top:26px}

@media (max-width:620px){
  /* الفاصل يطول بالنصّ الجديد، فيرتفع الحدُّ الأدنى ولا يُقصّ */
  .s-cinema{height:auto; min-height:74vh; padding-top:34vh}
}

/* ===== features ===== */
/* ===== قسم: المرافق والخدمات =====
   كتالوجٌ منتظم: مربّعاتٌ متساوية — عكس شبكة «بنتو» قبله المتفاوتة،
   فيقرأ الزائر هذا القسم كقائمةٍ يمسحها بعينه، لا كسردٍ بصري.
================================================================ */
.s-fx{
  background:var(--sand-2);
  padding-block:clamp(80px, 11vw, 140px);
}

/* ---------- الشبكة ----------
   ⚠ ثلاثةُ أعمدة لا أربعة: التصدير يأخذ الصفّ كلَّه، والستُّ بطاقاتٍ
   صفّان تامّان — 3 + 6 = تسعُ خاناتٍ تملأ ثلاثة صفوف بلا فراغ.
   وبأربعةِ أعمدةٍ كانت 3 + 6 = 9 لا تقسم على 4 فيبقى صفٌّ ناقص. */
.s-fx__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

/* ---------- بطاقة التصدير ----------
   ⚠ أفقيّةٌ لا عمودية: كانت رقماً فوق عنوانٍ فوق فقرة، فبلغ ارتفاعُها
   375 بكسلاً بينما البطاقة العادية 230 — فتمطّ جارتَها في الصفّ الأوّل
   إلى 375 وتبقى الباقية 230. رقمٌ إلى جانب نصّ يتّسع في ارتفاع صفٍّ
   واحد، فتستوي البطاقات كلُّها. */
.s-fx__intro{
  grid-column:1 / -1;
  background:var(--green);
  color:var(--paper);
  padding:32px 34px;
  display:flex; flex-direction:row; align-items:center;
  gap:clamp(22px, 3vw, 40px);
}
.s-fx__intro-t{min-width:0}
/* ⚠ الرقمُ لا يتقلّص ولا ينكسر سطراً: هو عمودُ البطاقة الأيمن */
.s-fx__intro .s-fx__n{flex:0 0 auto; margin-bottom:0; line-height:1}
.s-fx__n{
  font-size:clamp(46px, 5.4vw, 68px);
  font-weight:700;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
  line-height:1.15;
  margin-bottom:8px;
}
.s-fx__intro h2{
  font-size:clamp(22px, 2.4vw, 30px);
  color:var(--paper);
  margin-bottom:12px;
}
/* صنفٌ صريح لا محدّد عنصر: `.s-fx__intro > p` كان يغلب `.s-fx__n`
   في الأولوية فيسحق قياس الرقم. */
.s-fx__intro-d{
  font-size:15px; line-height:1.95;
  color:var(--paper-muted);
  max-width:58ch;
  margin-top:auto;
}

/* ---------- المربّع ---------- */
.s-fx__t{
  background:var(--card);
  border:1px solid var(--line);
  padding:26px 24px 24px;
  display:flex; flex-direction:column;
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s;
}
.s-fx__t:hover{
  border-color:var(--gold);
  transform:translateY(-5px);
  box-shadow:0 22px 46px rgba(22,33,26,.10);
}
/* أيقوناتٌ خطّية ترث لونها من هنا — لا صور ثابتة اللون */
.s-fx__i{
  width:46px; height:46px;
  display:block;
  color:var(--green);
  margin-bottom:18px;
  transition:color .4s, transform .4s var(--ease);
}
.s-fx__t:hover .s-fx__i{color:var(--gold-2); transform:scale(1.06)}

.s-fx__k{
  font-size:11.5px; font-weight:700;
  color:var(--gold-2);
  letter-spacing:.06em;
  margin-bottom:6px;
}
.s-fx__t h3{
  font-family:var(--f-display);
  font-weight:var(--w-display);
  font-size:19px;
  line-height:1.5;
  color:var(--green);
  margin-bottom:7px;
}
/* ⚠ حجزُ سطرين للعنوان وسطرين للوصف: «المسبح» عنوانُه سطرٌ و«قاعة
   متعدّدة الاستخدامات» سطران، وبعضُ الأوصاف سطرٌ وبعضُها سطران — فيخرج
   صفٌّ بـ234 وصفٌّ بـ259 وتبدو الشبكة غير مستوية وإن تساوت بطاقاتُ
   الصفّ الواحد. والحجزُ بـ`em` لا ببكسلٍ مثبّت، فيتبع قياسَ الخطّ.

   ⚠ ولا يُحلّ بـ`grid-auto-rows:1fr`: جُرِّبت فمطّت البطاقات إلى 789
   بكسلاً — `1fr` في شبكةٍ ارتفاعُها غيرُ محدَّد لا يعني «سوِّ الصفوف». */
.s-fx__t h3{min-height:calc(2 * 1.5em)}
.s-fx__t p{
  font-size:13.5px;
  line-height:1.85;
  color:var(--muted);
  margin-top:auto;
  min-height:calc(2 * 1.85em);
}

/* ---------- الاستجابة ---------- */
@media (max-width:1100px){
  .s-fx__grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:820px){
  .s-fx__grid{grid-template-columns:repeat(2, 1fr)}
  /* بعرضٍ ضيّق يعود التصدير عمودياً — الرقمُ والنصُّ جنباً إلى جنب يخنقان الاثنين */
  .s-fx__intro{padding:30px 26px 28px;
    flex-direction:column; align-items:flex-start; gap:14px}
  .s-fx__t{padding:22px 20px 20px}
  .s-fx__i{width:40px; height:40px; margin-bottom:14px}
}
@media (max-width:460px){
  .s-fx__grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  .s-fx__t:hover{transform:none}
  .s-fx__t:hover .s-fx__i{transform:none}
}

/* ⚠ الزرُّ يفتح صفحة المرافق ولا يكشف في المكان: كان يُظهر عشراً مطويّة
   قبل أن يصير للمرافق صفحتُها المستقلّة. */
.s-fx__foot{display:flex; justify-content:center; margin-top:clamp(26px, 3.4vw, 42px)}

/* طقمُ الأيقونات — يُحقن مرّةً في كلّ صفحة ولا يُرى */
.s-fx__sprite{position:absolute; width:0; height:0; overflow:hidden}

/* ===== stats ===== */
/* ===== قسم: ديار الأنس بالأرقام =====
   شريطٌ واحدٌ لا أربعُ بطاقات: هذه أرقامٌ تُقرأ معاً وتُقتبس معاً، وفصلُها
   إلى كتلٍ يجعلها أربعَ دعاوى منفصلة. وهي أصلحُ ما يُؤخذ عن المشروع في
   نتيجةِ بحثٍ أو جوابِ مساعدٍ ذكيّ.
================================================================ */
/* ⚠ `--card` لا `--sand`: قسم «الحكاية» قبله على `--sand` نفسه، فكان
   الحدُّ بينهما لا يُرى — قسمان يقرؤهما الزائر واحداً. و`--card` أفتحُ
   درجةً منه وأفتحُ درجتين من `--sand-2` الذي تحته في «المقوّمات» —
   فينفصل من الجهتين بدرجةٍ هادئة لا بقلبِ لون. */
.s-stats{
  background:var(--card);
  padding-block:clamp(64px, 8.5vw, 110px);
}
.s-stats__head{text-align:center; max-width:60ch; margin:0 auto clamp(30px, 4vw, 48px)}
.s-stats__head .eyebrow{justify-content:center}
.s-stats__head h2{color:var(--green); margin-bottom:0}

.s-stats__bar{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(18px, 2.4vw, 34px);
  background:var(--green); color:var(--paper);
  border-radius:var(--radius);
  padding:clamp(28px, 3.4vw, 44px) clamp(22px, 2.8vw, 38px);
}
.s-stats__i + .s-stats__i{
  border-inline-start:1px solid var(--green-line);
  padding-inline-start:clamp(18px, 2.4vw, 34px);
  /* الفاصلُ يقف في منتصف الفجوة لا على حافّة الخانة */
  margin-inline-start:calc(clamp(18px, 2.4vw, 34px) / -2);
}
.s-stats__n{
  font-size:clamp(36px, 4.2vw, 56px);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  line-height:1.15; letter-spacing:-.015em;
  color:var(--gold-3);                 /* 4.6:1 على الأخضر */
  display:flex; align-items:baseline; gap:5px; flex-wrap:wrap;
  margin-bottom:8px;
}
.s-stats__n em{font-style:normal; font-size:.34em; font-weight:700; opacity:.8}
.s-stats__i h3{
  font-family:var(--f-display); font-weight:var(--w-display);
  font-size:16px; line-height:1.55; margin-bottom:6px;
}
.s-stats__d{font-size:13.5px; line-height:1.85; color:var(--paper-muted)}

@media (max-width:820px){
  .s-stats__bar{grid-template-columns:repeat(2, 1fr); row-gap:clamp(22px, 3vw, 32px)}
  /* الفاصلُ الجانبي يُلغى عند رأس كلّ صفّ */
  .s-stats__i:nth-child(odd){border-inline-start:none; padding-inline-start:0; margin-inline-start:0}
}
@media (max-width:560px){
  .s-stats__bar{grid-template-columns:1fr; row-gap:26px}
  .s-stats__i + .s-stats__i{
    border-inline-start:none; padding-inline-start:0; margin-inline-start:0;
    border-top:1px solid var(--green-line); padding-top:22px;
  }
}

/* ===== location ===== */
/* ===== قسم: الموقع والخريطة ===== */
.s-loc{background:var(--green); color:var(--paper); padding-block:var(--sec-pad)}
.s-loc h2{color:var(--paper)}

/* شريط الأدوات: التصفية يميناً ونوع الخريطة يساراً */
.s-loc__bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px; margin-bottom:20px;
}
.s-loc__filters{display:flex; flex-wrap:wrap; gap:10px}
.s-loc__filter{
  border:1px solid var(--green-line); color:var(--paper-muted);
  border-radius:99px; padding:7px 18px; font-size:13.5px; font-weight:600;
  transition:border-color .3s, color .3s, background .3s;
}
.s-loc__filter i{font-style:normal; font-size:11.5px; opacity:.75; margin-inline-start:4px}
.s-loc__filter:hover{border-color:var(--gold-3); color:var(--paper)}
.s-loc__filter.is-active{background:var(--gold-3); border-color:var(--gold-3); color:var(--forest)}

.s-loc__views{
  display:flex; gap:4px; padding:4px;
  border:1px solid var(--green-line); border-radius:99px; background:var(--green-2);
}
.s-loc__view{
  border-radius:99px; padding:10px 16px; font-size:13px; font-weight:600;
  color:var(--paper-muted); transition:background .3s, color .3s;
}
.s-loc__view:hover{color:var(--paper)}
.s-loc__view.is-active{background:var(--gold-3); color:var(--forest)}

/* ===== إطار الخريطة ===== */
.s-loc__map{
  position:relative; background:var(--green-2);
  border:1px solid var(--green-line); border-radius:var(--radius);
  overflow:hidden; box-shadow:0 26px 60px rgba(0,0,0,.32);
}
#locMap{
  height:clamp(400px, 58vh, 620px); width:100%;
  /* لون البلاطة الرمادية نفسه قبل وصولها — أي لونٍ دافئ هنا يصبغ الخريطة
     كلّها بمسحةٍ ترابية أثناء التحميل */
  background:#FAFAF8;
  font-family:var(--f-body);
  z-index:1;                              /* دون البطاقات العائمة في الصفحة */
}
/* القمر الصناعي داكن — نرفع تباين نقاطنا فوقه */
#locMap.is-sat .s-loc__pin span,
#locMap.is-sat .s-loc__ring-tag{background:rgba(33,47,37,.72); color:#fff; border-color:rgba(255,255,255,.14)}

/* --- المشروع: ميدالية مثمّنة كحلية في مدارٍ ذهبي، مركزها على الإحداثي --- */
.s-loc__home-pin{background:none; border:0}
.s-loc__home-svg{
  position:absolute; inset:0; width:100%; height:100%;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.4));
}
/* النبضة تتّسع من حدّ الميدالية — ومركزها الإحداثي نفسه */
.s-loc__home-pin i{
  position:absolute; inset:0; border-radius:50%;
  background:rgba(154,123,65,.3);
  animation:s-loc-pulse 2.8s ease-out infinite;
}
.s-loc__home-pin span{
  position:absolute; bottom:calc(100% + 5px); left:50%; transform:translateX(-50%);
  white-space:nowrap; font-family:var(--f-display); font-weight:var(--w-display);
  font-size:17px; color:#fff; background:var(--green);
  border:1.5px solid var(--gold-3); border-radius:8px; padding:3px 13px;
  box-shadow:0 3px 10px rgba(0,0,0,.32);
}
@keyframes s-loc-pulse{0%{transform:scale(.85); opacity:.9} 100%{transform:scale(1.9); opacity:0}}

/* --- النقاط --- */
.s-loc__pin{background:none; border:0; transition:opacity .3s}
.s-loc__pin b{
  position:absolute; inset:0; border-radius:50%;
  background:var(--gold); border:2.5px solid var(--green);
  box-shadow:0 1px 5px rgba(0,0,0,.35);
  transition:transform .25s var(--ease);
}
.s-loc__pin.is-future b{background:#fff; border-color:var(--gold-2); border-style:dashed}
.s-loc__pin span{
  position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:12.5px; font-weight:600; color:var(--ink);
  background:rgba(255,255,255,.92); border:1px solid rgba(22,33,26,.12);
  border-radius:6px; padding:2px 8px;
  box-shadow:0 1px 4px rgba(0,0,0,.14);
  opacity:0; transition:opacity .3s;
  pointer-events:none;
}
/* اسمٌ فوق النقطة بدل تحتها — يفصل اسمين متجاورين */
.s-loc__pin.is-up span{top:auto; bottom:calc(100% + 6px)}
.s-loc__pin.is-named span{opacity:1}
.s-loc__pin:hover b{transform:scale(1.35)}
.s-loc__pin:hover span{opacity:1}
.s-loc__pin.is-dim{opacity:.2}
.s-loc__pin.is-dim b{pointer-events:none}

/* --- أسماء البلدات: رماديٌّ خفيف، الأساس صامتٌ فهي كل نصّ الخريطة --- */
.s-loc__town{
  background:none; border:0;
  font-size:12.5px; font-weight:600; color:#6E7A85;
  text-align:center; line-height:20px; white-space:nowrap;
  letter-spacing:.02em; pointer-events:none;
  /* هالةٌ بيضاء بدل خلفيةٍ مصمتة — تبقى الخريطة خفيفة */
  text-shadow:0 0 3px #fff, 0 0 3px #fff, 0 0 4px #fff;
  transition:opacity .25s;
}
.s-loc__town.is-city{font-size:15px; color:#55616B; letter-spacing:.05em}
.s-loc__town.is-off{opacity:0}
#locMap.is-sat .s-loc__town{
  color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.7);
}

/* --- عناوين الحلقات --- */
.s-loc__ring-tag{
  background:rgba(255,255,255,.88); border:1px solid rgba(154,123,65,.6);
  border-radius:99px; color:var(--gold-2);
  font-size:11.5px; font-weight:700; text-align:center; line-height:16px;
  transition:opacity .25s;
}
.s-loc__ring-tag.is-off{opacity:0}

/* --- البطاقة المنسدلة --- */
.s-loc__pop .leaflet-popup-content-wrapper{
  background:#fff; color:var(--ink); border-radius:14px;
  box-shadow:0 18px 46px rgba(0,0,0,.42); text-align:right;
}
.s-loc__pop .leaflet-popup-content{margin:13px 16px; width:236px !important; font-family:var(--f-body); line-height:1.8}
.s-loc__pop .leaflet-popup-tip{background:#fff}
.s-loc__pop b{display:block; font-size:14.5px; color:var(--green)}
.s-loc__pop .s-loc__meta{display:block; color:var(--gold-2); font-weight:700; font-size:12.5px; margin-bottom:3px}
.s-loc__pop p{margin:0; color:var(--muted); font-size:12.5px}

/* --- أدوات Leaflet بهويّتنا --- */
.s-loc__map .leaflet-bar{border:0; box-shadow:0 6px 18px rgba(0,0,0,.28)}
.s-loc__map .leaflet-bar a{
  width:32px; height:32px; line-height:32px;
  background:rgba(33,47,37,.88); color:var(--paper);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.s-loc__map .leaflet-bar a:hover{background:var(--green); color:var(--gold-3)}
.s-loc__map .leaflet-bar a:first-child{border-radius:9px 9px 0 0}
.s-loc__map .leaflet-bar a:last-child{border-radius:0 0 9px 9px; border-bottom:0}
.s-loc__map .leaflet-control-attribution{
  background:rgba(255,255,255,.82); color:var(--muted);
  font-size:10.5px; padding:2px 8px; border-radius:8px 0 0 0;
}
.s-loc__map .leaflet-control-attribution a{color:var(--gold-2)}
/* شريط المقياس رقمٌ ثم وحدة — والاتجاه العربي يعكسهما، فنثبّته */
.s-loc__map .leaflet-control-scale-line{
  background:rgba(255,255,255,.82); border-color:rgba(22,33,26,.45);
  color:var(--ink); font-size:11px; font-weight:600;
  direction:ltr; text-align:center;
}

/* --- المفتاح: على جهة البدء (يمين الصفحة العربية)، بعيداً عن أزرار التكبير --- */
.s-loc__legend{
  position:absolute; top:14px; inset-inline-start:14px; z-index:500;
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  pointer-events:none;
}
.s-loc__lg{
  display:flex; align-items:center; gap:7px;
  background:rgba(33,47,37,.84); border:1px solid var(--green-line);
  border-radius:99px; padding:5px 12px; font-size:11.5px; color:var(--paper);
}
.s-loc__lg::before{content:''; width:9px; height:9px; flex:0 0 9px}
/* الشاهد يحاكي الميدالية: قرصٌ كحلي في مدارٍ ذهبي */
.s-loc__lg--home::before{
  background:var(--green); border:1.5px solid var(--gold-3); border-radius:50%;
  box-shadow:0 0 0 1px rgba(192,154,82,.45);
}
.s-loc__lg--ring::before{border:1px dashed var(--gold-3); border-radius:50%}

/* --- طبقة التفعيل على اللمس --- */
.s-loc__gate{
  position:absolute; inset:0; z-index:600;
  display:flex; align-items:center; justify-content:center;
  background:rgba(33,47,37,.34); backdrop-filter:blur(1px);
}
.s-loc__gate[hidden]{display:none}
.s-loc__gate span{
  background:rgba(33,47,37,.9); border:1px solid var(--gold-3);
  color:var(--paper); border-radius:99px; padding:10px 22px;
  font-size:13.5px; font-weight:600;
}

/* --- البديل عند تعذّر التحميل --- */
.s-loc__fallback{
  padding:64px 24px; text-align:center; color:var(--paper-muted);
}
.s-loc__fallback[hidden]{display:none}
.s-loc__fallback-sub{font-size:13px; opacity:.75; margin-top:6px}

.s-loc__note{font-size:13px; color:var(--paper-muted); margin:16px 0 38px}

/* ===== بطاقات المسافات ===== */
.s-loc__grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px}
.s-loc__dist{
  background:var(--green-2); border:1px solid var(--green-line); border-radius:var(--radius);
  padding:24px 22px; display:flex; flex-direction:column; gap:2px;
  text-align:right; cursor:pointer; color:inherit; font:inherit;
  transition:border-color .4s, transform .4s var(--ease), background .4s;
}
.s-loc__dist:hover{border-color:var(--gold-3); transform:translateY(-4px)}
.s-loc__dist.is-on{border-color:var(--gold-3); background:rgba(154,123,65,.09)}
.s-loc__dist.is-dim{opacity:.32}
.s-loc__d-name{font-size:14px; color:var(--paper-muted); min-height:44px}
.s-loc__d-val{
  font-size:34px; font-weight:700; color:var(--gold-3);
  font-variant-numeric:tabular-nums; line-height:1.5;
}
.s-loc__d-val small{font-size:15px; font-weight:500}
.s-loc__d-note{font-size:12.5px; color:var(--paper-muted)}

.s-loc__future{
  margin-top:30px; display:flex; align-items:center; gap:12px;
  border:1.5px dashed rgba(154,123,65,.5); border-radius:99px;
  padding:12px 22px; font-size:14px;
  width:fit-content; max-width:100%;
}
.s-loc__future span{
  flex:0 0 10px; height:10px; border-radius:50%;
  background:var(--gold); animation:s-loc-blink 2.4s ease-out infinite;
}
@keyframes s-loc-blink{
  0%{box-shadow:0 0 0 0 rgba(154,123,65,.55)}
  70%{box-shadow:0 0 0 14px rgba(154,123,65,0)}
  100%{box-shadow:0 0 0 0 rgba(154,123,65,0)}
}

@media (max-width:1020px){ .s-loc__grid{grid-template-columns:repeat(2, 1fr)} }
@media (max-width:640px){
  .s-loc__bar{flex-direction:column; align-items:stretch}
  .s-loc__views{align-self:flex-start}
  #locMap{height:clamp(340px, 62vh, 460px)}
  .s-loc__legend{top:auto; bottom:34px; inset-inline-end:10px}
  .s-loc__grid{grid-template-columns:1fr 1fr; gap:10px}
  .s-loc__dist{padding:18px 16px}
  .s-loc__d-name{min-height:auto}
}
@media (prefers-reduced-motion: reduce){
  .s-loc__home-pin i, .s-loc__future span{animation:none}
}

/* ---------- الدعوة إلى صفحة الموقع ---------- */
.s-loc__cta{display:flex; justify-content:center; margin-top:clamp(28px, 3.6vw, 44px)}

/* ===== cta ===== */
/* ===== قسم: الدعوة الختامية ===== */
.s-cta{position:relative; padding-block:var(--sec-pad); overflow:clip; text-align:center; color:var(--paper)}
/* ⚠ `inset:-10% 0` لا `inset:0`: بلا فسحةٍ فوق وتحت لا موضعَ للانزياح —
   أوّلُ بكسلٍ تتحرّكه الصورةُ يكشف حافّةً فارغة. والعشرةُ تكفي لإزاحة 8%
   من صورةٍ صارت 120% من ارتفاع القسم (= 9.6% منه). */
.s-cta__media{position:absolute; inset:-10% 0}
.s-cta__media img{width:100%; height:100%; object-fit:cover; filter:brightness(.3) saturate(.85); will-change:transform}
.s-cta__content{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:14px}
.s-cta__content p{max-width:52ch; color:var(--paper-muted)}
.s-cta__actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:14px}

@media (max-width:560px){ .s-cta__actions .btn{flex:1; text-align:center} }

/* ===== footer ===== */
/* ===== قسم: التذييل ===== */
.s-footer{background:var(--green-2); color:var(--paper); padding-top:70px; position:relative}

/* نقشُ الغصون خلف التذييل — قناعٌ لا صورة، لأنّ النقش مرسومٌ بالأسود
   ووضعُه صورةً على أرضٍ داكنة يجعله أدكنَ فلا يُرى. القناعُ يقلب المعادلة:
   الشكلُ يصير ورقياً فاتحاً والأرضُ تبقى خضراء.

   عند 4٪ — نسيجٌ يُحسّ ولا يُقرأ. وارتفاعُ البلاطة 4/3 عرضِها كنسبة الملفّ،
   وإلّا تمطّط النقش وانكسر التحامُ حوافّه. */
.s-footer::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:var(--paper); opacity:.04;
  /* ⚠ مربّعٌ لا 210×280: بلاطةُ النقش صارت 1000×1000 (2026-08-31) بعد أن
     كانت 240×320 — ومقاسٌ غيرُ متناسبٍ يمطّ الزخرفةَ في اتّجاهٍ واحد. */
  -webkit-mask:url(/assets/orn/pattern.svg) repeat; -webkit-mask-size:300px 300px;
          mask:url(/assets/orn/pattern.svg) repeat;         mask-size:300px 300px;
}
.s-footer > *{position:relative; z-index:1}
/* أربعةُ أعمدة: التعريف، ثمّ عمودا الصفحات، ثمّ التواصل. صار التذييل
   خريطةَ الموقع بعد أن جاوزت الصفحاتُ الاثنتي عشرة. */
.s-footer__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr;
  gap:36px 32px; padding-bottom:50px;
  border-bottom:1px solid rgba(243,236,225,.08);
}
/* عنوانُ العمود — `h2` للبنية لا للحجم، فتقرأه قارئةُ الشاشة عنواناً */
.s-footer__h{
  font-family:var(--f-display); font-weight:600;
  font-size:13px; letter-spacing:.06em;
  color:var(--gold-3); margin-bottom:14px;
}
.s-footer__col{display:flex; flex-direction:column}
/* ذهبيٌّ على الأخضر الداكن — وهو التقابل نفسه في كرّاسة المشروع ولوحة
   السور، فمن رآهما ووصل الموقع وجد الشيء نفسه لا ترجمةً له. */
.s-footer__logo{
  display:block; width:106px; height:83px; margin-bottom:20px;
  /* ⚠ كلسيٌّ لا ذهبيّ: التذييلُ أخضرُ داكن، والقاعدةُ الثانية في نظام
     الألوان تحصر الشعارَ في الأخضر أو الكلسي. وكان `--gold-3`. */
  color:var(--paper); background:currentColor;
  -webkit-mask:url(/assets/img/logo.svg) no-repeat center/contain;
          mask:url(/assets/img/logo.svg) no-repeat center/contain;
}
.s-footer__line{font-size:14px; color:var(--paper-muted); max-width:40ch}
.s-footer__links{display:flex; flex-direction:column; gap:10px}
.s-footer__links a{color:var(--paper-muted); font-size:14.5px; transition:color .3s}
.s-footer__links a:hover{color:var(--gold-3)}
.s-footer__contact{display:flex; flex-direction:column; gap:10px; font-size:14.5px; color:var(--paper-muted)}
.s-footer__contact a{transition:color .3s}
.s-footer__contact a:hover{color:var(--gold-3)}
.s-footer__bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-block:24px; font-size:13px; color:var(--paper-muted);
}
.s-footer__bottom a{transition:color .3s}
.s-footer__bottom a:hover{color:var(--gold-3)}

@media (max-width:960px){ .s-footer__grid{grid-template-columns:1fr 1fr; gap:32px} }
@media (max-width:620px){ .s-footer__grid{grid-template-columns:1fr; gap:28px} }