/* ==========================================================================
   مؤسسة لون للمقاولات العامة — نظام التصميم

   الهوية: ذهبي دافئ على محايد دافئ، والأحمر محجوز للشعار وحده.
   الأحمر لون الشعار لا لون الواجهة — استعماله في كل زر وعنوان كان يجعل
   الصفحة صاخبة ويُفقد العلامة تميّزها.
   والذهبي جار للأحمر على عجلة الألوان فينسجم معه، بخلاف المُكمّل الذي
   يزاحمه. مصدر البنية: قاعدة ui-ux-pro-max (صفوف البناء والعمارة).

   كل لون هنا رمز ينقلب مع الثيم. لا لون مثبّت خارج هذه الكتلة إلا ألوان
   المواد (جدار «قبل/بعد») وأخضر واتساب وحجاب الصور.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- الهوية ----
     المصدر: قاعدة ui-ux-pro-max — صفوف Construction/Architecture و
     Architecture/Interior و Home Decoration. بنيتها الثلاث واحدة:
     محايد دافئ يحمل الواجهة + لمسة ذهبية واحدة للتأكيد.
     الذهبي جار للأحمر على عجلة الألوان فينسجم مع الشعار، بخلاف
     المُكمّل (البترولي) الذي يزاحمه. */
  /* الأحمر من الشعار بقرار المالك (كان ذهبياً). أحمر الشعار #d80000 يرسب
     كنصّ على الداكن (3.49) فالنصّ أفتح منه، والتعبئة به مع نصّ أبيض. */
  /* الدرجة الهادئة #a80001 اختارها المالك لكسر حدّة الأحمر. تصلح تعبئةً
     (الأبيض فوقها 16:1) ونصّاً على الفاتح (15:1)، لكنها مستحيلة نصّاً على
     الداكن (1.16) — فنصّ الداكن أحمر مُطفأ التشبّع بدلها. */
  --brand: #d9807a;        /* أحمر هادئ للنص فوق الداكن — 6.52 على --bg · 5.24 على --surface-2 */
  --brand-solid: #a80001;  /* تعبئة الأزرار */
  --brand-hover: #8a0001;
  --on-brand: #ffffff;     /* 16.16:1 */
  --brand-soft: rgba(217, 128, 122, 0.14);
  --logo: #d50000;         /* الشعار فقط — مقاس من الشعار الأصلي. ≥3.49:1 كرسم */

  /* ---- الأسطح والنص: محايد دافئ لا رمادي بارد ---- */
  --bg: #14120f;
  --surface: #1e1b17;
  --surface-2: #2a2621;
  --fg: #f5f1ea;
  --muted: #a89e91;

  /* قيم RGB خام: تُولّد الشعيرات والتظليل من لون النص/الخلفية نفسه،
     فينقلب كل شيء مع الثيم بلا تكرار أي قاعدة. */
  --fg-rgb: 245, 241, 234;
  --bg-rgb: 20, 18, 15;
  --surface-rgb: 30, 27, 23;
  --brand-rgb: 168, 0, 1;
  --glow-warm: #2b2010;
  --glow-cool: #101820;

  /* ---- الزجاج ----
     حشو 0.45 لا يكلّف تبايناً: --bg و--surface متقاربان فالمركّب بينهما
     لا يتحرّك. مقاس — المتن 15.9 والثانوي 6.8 عند أي حشو من 0.45 إلى
     0.75. الحدّ والوميض الداخلي هما ما يجعله يُقرأ زجاجاً لا لوناً باهتاً. */
  /* خامة الملفّات الزجاجية لكل الصفحة (أكتوبر ٢٠٢٦، بطلب المالك):
     تدرّج يخفّ أعلاه ويثقل أسفله — النص في البطاقات أسفلها غالباً فيقع
     على الأكثف — وحافة بيضاء وومضة علوية كحافة الزجاج في الملف. */
  --glass-fill: linear-gradient(180deg,
    rgba(var(--surface-rgb), 0.2) 0%,
    rgba(var(--surface-rgb), 0.5) 42%,
    rgba(var(--surface-rgb), 0.82) 100%);
  --glass-blur: blur(22px) saturate(150%);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-sheen: inset 0 1.5px 0 rgba(255, 255, 255, 0.16);

  /* حجاب الصور يبقى داكناً في الثيمين: نص أبيض فوق صورة.
     --on-scrim لون النص فوقه، وهو ثابت فاتح لأن الحجاب ثابت داكن —
     ربطه بـ --fg كان يجعله داكناً فوق داكن في الثيم الفاتح. */
  --scrim-rgb: 11, 13, 15;
  --on-scrim: #f5f1ea;

  /* الخطأ: درجتان لأن الأحمر الفاتح يرسب على الخلفية الفاتحة */
  --danger: #ff8a80;

  /* ---- المسافات (إيقاع 4/8) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* ---- الحركة ---- */
  --dur-fast: 180ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);

  /* ---- الطبقات ---- */
  --z-nav: 100;
  --z-menu: 200;
  --z-lightbox: 400;
  --z-wipe: 900;

  --container: 1280px;
  --radius: 4px;
}

/* ==========================================================================
   الثيم الفاتح — رموز فقط، بلا قاعدة تخطيط واحدة مكرّرة
   ========================================================================== */

:root[data-theme="light"] {
  color-scheme: light;

  --brand: #a80001;        /* الدرجة الهادئة نصّاً — 15.14 على --bg · 13.52 على --surface-2 */
  --brand-solid: #a80001;
  --brand-hover: #8a0001;
  --on-brand: #ffffff;     /* 16.16:1 */
  --brand-soft: rgba(168, 0, 1, 0.08);

  --bg: #faf7f3;           /* حجر دافئ يقلّل الوهج */
  --surface: #ffffff;
  --surface-2: #efeae4;
  --fg: #1c1917;
  --muted: #6b6258;

  --fg-rgb: 28, 25, 23;
  --bg-rgb: 250, 247, 243;
  --surface-rgb: 255, 255, 255;
  --glass-edge: rgba(255, 255, 255, 0.8);
  --glass-sheen: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), 0 0 0 0.5px rgba(28, 25, 23, 0.1);
  --brand-rgb: 168, 0, 1;
  --glow-warm: #f7e6c8;
  --glow-cool: #e9eef3;
  --danger: #b3261e;
}

/* بلا اختيار صريح: يُتبع إعداد النظام */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --brand: #a80001;
    --brand-solid: #a80001;
    --brand-hover: #8a0001;
    --on-brand: #ffffff;
    --brand-soft: rgba(168, 0, 1, 0.08);
    --bg: #faf7f3;
    --surface: #ffffff;
    --surface-2: #efeae4;
    --fg: #1c1917;
    --muted: #6b6258;
    --fg-rgb: 28, 25, 23;
    --bg-rgb: 250, 247, 243;
    --surface-rgb: 255, 255, 255;
  --glass-edge: rgba(255, 255, 255, 0.8);
  --glass-sheen: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), 0 0 0 0.5px rgba(28, 25, 23, 0.1);
    --brand-rgb: 168, 0, 1;
    --glow-warm: #f7e6c8;
    --glow-cool: #e9eef3;
    --danger: #b3261e;
  }
}

/* ==========================================================================
   الأساس
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* 🪤 الجوال: overflow-x على body وحده لا يمنع الصفحة من الاتّساع —
     المتصفّح يحسب عرض المنفذ من html، فأي عنصر أعرض من الشاشة (بريد طويل
     في عمود ضيّق مثلاً) يُوسّع المنفذ فتظهر الصفحة مزاحة وتُقصّ حافتها.
     clip على html يقطع الاتّساع من جذره. */
  overflow-x: clip;
  /* الشريط مثبّت فوق المحتوى: بدون هذا يقفز الرابط الداخلي فيختفي
     عنوان القسم تحته. القيمة = ارتفاع الشريط (88px) + هامش تنفّس. */
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 19px;
  line-height: 1.7;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; }

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; }

/* الأرقام لا ترتجف أثناء العدّ */
.tabular { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   التخطيط
   ========================================================================== */

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

@media (min-width: 768px)  { .container { padding-inline: 40px; } }
@media (min-width: 1280px) { .container { padding-inline: 64px; } }

.section { padding-block: var(--space-8); position: relative; }

/* ==========================================================================
   هالات خلف الزجاج — لونية لا سطوعية

   الزجاج لا يُرى زجاجاً إلا إذا كان خلفه ما يستحقّ الضباب. البطاقات كانت
   واقفة على خلفية مسطّحة بلون شبه مطابق لحشوها فلم تُنتج الشفافية شيئاً.

   المحاولة الأولى كانت هالة ذهبية شفافة، ووقعت في مقايضة خانقة: كل زيادة
   في وضوح الزجاج تُنقص تباين نصّ البطاقة، لأن الحشو يمرّر الهالة إلى ما
   خلف النص. كان السقف 4.55 — على حافة العتبة.

   المخرج أن الهالة تُغيّر اللون لا السطوع. هذان اللونان مختاران بسطوع
   قريب من --bg: في الفاتح 0.81 و0.85 مقابل 0.93، وفي الداكن 0.016 و0.009
   مقابل 0.006. فالعين ترى تموّجاً دافئاً/بارداً واضحاً بينما التباين لا
   يكاد يتحرّك — بكثافة كاملة، لا شفافية.

   ✅ النتيجة مقاسة: أسوأ قيمة 5.13 (الذهبي في الثيم الفاتح) مقابل 4.55
   في الهالة الشفافة. أي أن الزجاج صار أوضح والتباين أفضل معاً.

   ⚠️ لو بدّلت لوني الهالة، أبقِ سطوعهما قريباً من --bg. لون بسطوع بعيد
   يُعيد المقايضة من جديد. */

.section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 62% at 20% 26%, var(--glow-warm), transparent 68%),
    radial-gradient(ellipse 52% 58% at 82% 72%, var(--glow-cool), transparent 66%),
    radial-gradient(ellipse 46% 40% at 55% 92%, var(--glow-warm), transparent 64%);
}

/* المحتوى فوق الهالة لا تحتها */
.section > .container { position: relative; z-index: 1; }

/* بلا ضباب لا فائدة من الهالة — تصير لطخة لونية خلف بطاقة مصمتة */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .section::before { display: none; }
}

@media (min-width: 768px) { .section { padding-block: 128px; } }

/* الأقسام تتناوب بين سطحين من الثيم نفسه بدل «داكن/فاتح» مثبّتين.
   الإيقاع محفوظ في الثيمين: الفرق بين --bg و --surface يبقى محسوساً
   في الداكن والفاتح معاً. */
/* سطح واحد لكل الأقسام. التناوب بين --bg و--surface كان يرسم شريطاً
   أفقياً عند كل حدّ قسم — مقبول يوم كانت الأقسام مسطّحة، لكنه صار ضجيجاً
   بعد أن دخلت الهالات والزجاج: طبقتان تتنافسان على الفصل بين الأقسام.
   الفصل الآن مهمّة الهالة وحدها، وهي تتحرّك بلا حدّ مرئي. */
.section--base,
.section--alt { background: var(--bg); color: var(--fg); }

/* ترويسة القسم */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand); /* الافتراضي للأقسام الداكنة */
  margin-bottom: var(--space-3);
}

.eyebrow::before {
  content: "";
  width: 36px;
  height: 2px;
  background: currentColor;
  /* --line يرسمه مشهد «من نحن» (motion.js §7)؛ الافتراضي مرسوم كاملاً */
  transform: scaleX(var(--line, 1));
  transform-origin: left;
}
[dir="rtl"] .eyebrow::before { transform-origin: right; }

/* 🪤 letter-spacing يفكّك العربية. الحروف العربية متّصلة، وأي تباعد موجب
   يفصلها فتظهر «م ق ا و ل ا ت» — بدت مقطّعة على الجوال فعلاً. والتباعد
   السالب على العناوين يُلصق الحروف فوق بعضها. يُصفَّر كلّه في RTL ويبقى
   للإنجليزية حيث يُحسّن الحروف الكبيرة المتباعدة. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .reveal__tag,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] .hero__title {
  letter-spacing: 0;
}

.section-title {
  font-size: clamp(34px, 5.4vw, 60px);
  max-width: 20ch;
}

.section-lede {
  margin-top: var(--space-4);
  max-width: 58ch;
  color: var(--muted);
}

/* ==========================================================================
   إمكانية الوصول
   ========================================================================== */

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed;
  inset-inline-start: 50%;
  top: 12px;
  transform: translate(-50%, -180%);
  z-index: 999;
  background: var(--brand-solid);
  color: var(--on-brand);
  padding: 12px 20px;
  border-radius: var(--radius);
  font-weight: 500;
}

.skip-link:focus { transform: translate(-50%, 0); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   الأزرار — كل هدف لمس ≥ 44px
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding-inline: 30px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: "Readex Pro", sans-serif;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) ease,
              border-color var(--dur-fast) ease,
              color var(--dur-fast) ease;
  will-change: transform;
}

.btn:hover  { transform: scale(1.03); }
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--brand-solid);
  color: var(--on-brand);
}

.btn--primary:hover { background: var(--brand-hover); }

.btn--ghost {
  background: transparent;
  border-color: rgba(var(--fg-rgb), 0.28);
  color: var(--fg);
}

.btn--ghost:hover {
  border-color: var(--fg);
  background: rgba(var(--fg-rgb), 0.06);
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* السهم ينقلب مع اتجاه اللغة */
[dir="rtl"] .icon-flip { transform: scaleX(-1); }

/* ==========================================================================
   التنقل
   ========================================================================== */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-nav);

  /* شريط زجاجي ثابت: ظاهر على طول الصفحة بما فيها المشهد.
     كان مخفياً فوق المشهد لأن شريطاً صلباً يقطع اللقطة — والزجاج يحلّ
     ذلك: اللقطة تظهر خلاله فلا يُقطع شيء. */
  background: rgba(var(--scrim-rgb), 0.28);
  backdrop-filter: blur(40px) saturate(190%);
  -webkit-backdrop-filter: blur(40px) saturate(190%);
  border-bottom: 1px solid rgba(var(--nav-fg-rgb), 0.12);
  transition: background-color var(--dur-base) ease,
              border-color var(--dur-base) ease;

  --nav-fg: var(--on-scrim);
  --nav-fg-rgb: 245, 241, 234;
}

/* ⚠️ زجاج خفيف بقرار صريح من المالك، والتباين مدفوع ثمناً لا مُغفَلاً.

   أسطع بكسل خلف الشريط عبر الإطارات الستين rgb(221,215,205) — سماء.
   عند 0.28 يصير النص الفاتح فوقه 2.36:1 (المطلوب 4.5). الحدّ الذي كان
   ينجح هو 0.58 (5.42:1).

   يُعوَّض جزئياً بظلّ نصّي أسفل هذا الملف يرفع الحواف محلياً — وهو
   تخفيف لا بديل. لرجوع كامل: أعِد 0.28 إلى 0.58 و0.24 إلى 0.48. */

/* متصفّح بلا backdrop-filter يُظهر الشريط شبه شفاف فوق سماء ساطعة.
   لا زجاج هناك، فيُعوَّض بتعتيم مصمت. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: rgba(var(--scrim-rgb), 0.9); }
}

/* بعد المشهد: خلف الشريط أسطح الصفحة لا صورة، فيتبع الثيم.

   ⚠️ 0.24 زجاج خفيف بقرار المالك. بعنوان ضخم تحته (تغطية حبر ٧٥٪)
   يعطي 4.03 فاتحاً و2.79 داكناً — الداكن يرسب. الحدّ الناجح كان 0.48. */
.nav.is-scrolled {
  background: rgba(var(--bg-rgb), 0.24);
  border-bottom-color: rgba(var(--fg-rgb), 0.12);
  --nav-fg: var(--fg);
  --nav-fg-rgb: var(--fg-rgb);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-scrolled { background: rgba(var(--bg-rgb), 0.94); }
}

/* أُزيل ظلّ النص بطلب المالك — كان يُلطّخ الحروف.
   كان يعوّض جزئياً عن الزجاج الخفيف (0.28 فوق المشهد، 0.24 بعده)،
   فالقراءة فوق لقطات السماء الساطعة تعتمد الآن على الوزن 700 وحده. */

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 88px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
}

/* الشعار الأصلي صورة لا رسم متجّه. الملف المرسل كان محتواه 51% من عرضه
   والباقي هوامش شفافة، فبدا صغيراً مهما كُبّر — قُصّت الهوامش فصار الحجم
   المعلن هو المرئي. الارتفاع هو المقياس هنا لأن الشعار طولي (634×830). */
.nav__logo {
  height: 52px;
  width: auto;
  flex: none;
  display: block;
}

.nav__brand-text {
  font-family: "Readex Pro", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--nav-fg);
  white-space: nowrap;
}

.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-5);
}

@media (min-width: 1024px) { .nav__links { display: flex; } }

.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px; /* الأجهزة اللمسية تصل لهذه النقطة أيضاً */
  font-size: 19px;
  font-weight: 700;
  /* الوزن الثقيل ليس زينة هنا: الزجاج خفيف (0.28) فالحروف الرفيعة تبهت
     فوق لقطات السماء. الحرف السميك يحمل الظلّ ويصمد أكثر. */
  color: rgba(var(--nav-fg-rgb), 0.82);
  transition: color var(--dur-fast) ease;
}

.nav__link:hover { color: var(--nav-fg); }

.nav__link::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform var(--dur-base) var(--ease-out);
}

/* transform-origin لا يقبل الكلمات المنطقية — يُضبط لكل اتجاه */
[dir="rtl"] .nav__link::after { transform-origin: right; }
[dir="ltr"] .nav__link::after { transform-origin: left; }

.nav__link:hover::after,
.nav__link[aria-current="true"]::after { transform: scaleX(1); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.lang-toggle {
  min-width: 66px;
  min-height: 50px;
  padding-inline: 18px;
  background: transparent;
  border: 1px solid rgba(var(--nav-fg-rgb), 0.32);
  border-radius: var(--radius);
  font-family: "Readex Pro", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--nav-fg);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.lang-toggle:hover {
  border-color: var(--nav-fg);
  background: rgba(var(--nav-fg-rgb), 0.1);
}

/* زر الثيم — يشارك اللغة نفس اللغة البصرية */
.theme-toggle {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(var(--nav-fg-rgb), 0.32);
  border-radius: var(--radius);
  color: var(--nav-fg);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.theme-toggle:hover {
  border-color: var(--nav-fg);
  background: rgba(var(--nav-fg-rgb), 0.1);
}

.theme-toggle svg { width: 26px; height: 26px; }

/* تُعرض أيقونة الوجهة لا الحالة: في الداكن تظهر الشمس لأنها ما ستحصل عليه */
.theme-toggle .icon-sun  { display: block; }
.theme-toggle .icon-moon { display: none; }

:root[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .icon-sun  { display: none; }
  :root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: block; }
}

/* الشاشات الضيّقة: الأزرار أولاً والاسم يتنازل. بدون هذا يدفع الاسم
   الطويل أزرار الثيم واللغة والقائمة خارج الشاشة فتختفي. */
.nav__brand { min-width: 0; }
.nav__actions { flex: none; }

@media (max-width: 479px) {
  .nav__inner { gap: var(--space-2); }
  .nav__brand { gap: 8px; }
  .nav__logo { height: 42px; }
  .nav__brand-text { font-size: 17px; overflow: hidden; text-overflow: ellipsis; }
  .nav__actions { gap: 8px; }
  .lang-toggle { min-width: 52px; min-height: 44px; padding-inline: 10px; font-size: 14px; }
  .theme-toggle { width: 44px; height: 44px; }
  .theme-toggle svg { width: 22px; height: 22px; }
  .burger { width: 44px; height: 44px; padding: 0 9px; }
}

/* أضيق من ذلك: الشعار وحده يكفي هوية — الاسم يُخفى لا الأزرار */
@media (max-width: 359px) {
  .nav__brand-text { display: none; }
}

.nav__cta { display: none; }
@media (min-width: 768px) { .nav__cta { display: inline-flex; min-height: 50px; padding-inline: 26px; font-size: 16px; } }

/* زر القائمة */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 50px;
  height: 50px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

@media (min-width: 1024px) { .burger { display: none; } }

.burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--nav-fg);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) ease;
}

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* قائمة الجوال */
/* درج جانبي على نصف الشاشة لا غطاء كامل. الخلفية المعتمة خارج الدرج
   هي زر الإغلاق: نقرة عليها تُغلق — بلا زر ✕. الدرج ينزلق من الجهة التي
   فيها زر القائمة (inline-end) فيخرج من تحت الإبهام الذي فتحه. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  overflow: hidden; /* الدرج المنزلق خارج الشاشة لا يوسّع الصفحة */
  /* غطاء خفيف جداً: وظيفته التقاط النقر خارج الدرج لا إظلام الصفحة —
     الدرج الزجاجي واضح بذاته بحافته وظلّه. */
  background: rgba(var(--scrim-rgb), 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) ease, visibility 0s linear var(--dur-base);
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) ease;
}

.mobile-menu nav {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  width: min(50vw, 320px);
  min-width: 250px;
  padding: calc(88px + var(--space-4)) 24px calc(var(--space-6) + env(safe-area-inset-bottom));
  /* ⚠️ 0.28 بنسبة الهيدر بقرار المالك. فوق سماء المشهد rgb(221,215,205)
     يعطي نص القائمة في الثيم الداكن ~2.4 (الحدّ 4.5)؛ الحدّ الناجح كان
     0.58 (5.2). الثيم الفاتح مرتاح في كل الحالات. */
  background: rgba(var(--bg-rgb), 0.28);
  backdrop-filter: blur(40px) saturate(190%);
  -webkit-backdrop-filter: blur(40px) saturate(190%);
  border-inline-start: 1px solid var(--glass-edge);
  box-shadow: var(--glass-sheen), 0 0 48px rgba(0, 0, 0, 0.25);
  align-content: start;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}

[dir="rtl"] .mobile-menu nav { transform: translateX(-100%); }

.mobile-menu.is-open nav { transform: translateX(0); }

.mobile-menu a {
  font-family: "Readex Pro", sans-serif;
  font-size: clamp(22px, 5.5vw, 28px);
  font-weight: 600;
  padding-block: 14px;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.1);
  transition: color var(--dur-fast) ease;
}

.mobile-menu a:hover { color: var(--brand); }

/* ==========================================================================
   الهيرو
   ========================================================================== */

/* ارتفاع القسم هو مسافة التمرير التي يُفرَد عليها الفيديو.
   ٢٦٠vh ≈ ١٦٠vh تمرير فعلي فوق الشاشة الثابتة لعشر ثوانٍ من المشهد —
   بطيء بما يكفي ليُقرأ، وقصير بما يكفي ألا يحبس الزائر. */
.hero {
  position: relative;
  height: 260vh;
  background: var(--bg);
}

.hero__stage {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  /* safe center: يتوسّط ما دام المحتوى أقصر من الشاشة، وحين يطول (العنوان
     الإنجليزي أربعة أسطر) ينحاز للأعلى بدل أن يخرج نصفه فوق الشاشة تحت
     الشريط الثابت — وهو ما كان يحدث: السطر الأول محجوب. */
  align-items: safe center;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* الحجاب يضمن قراءة النص فوق أي إطار من المشهد — قِيس على الإطارات
   الفعلية لا على التقدير. */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* بركة مركّزة خلف النص بدل حجاب يغطي العرض كله.
     التدرّج الخطي السابق كان مضطراً للبقاء ثقيلاً عبر ٥٨٪ من العرض لأن
     كتلة النص عريضة — فيحجب المشهد كله. البركة تضع الكثافة حيث النص
     فقط وتترك الباقي شبه صافٍ.

     مقاسة (أكتوبر ٢٠٢٦، مشهد البناء→الفيلا) على الإطارات الستين بمواضع
     النص الفعلية من المتصفح عند 1920×1080 و1366×768 و1024×768، أدنى بكسل:
     العنوان الصغير 6.9 · العنوان الضخم 6.1 · الزر 6.9 · المتن 4.65 (1٪ الأدنى؛
     أدنى بكسل 3.84 في طرفه الأيسر عند 1366 يسنده text-shadow).
     الكثافة 0.70 لا 0.90 بطلب المالك («المشهد مو واضح») — أقلّ ما يجتاز؛
     0.65 يرسب. شرطها أن يبقى المتن أبيض كاملاً بلا شفافية.

     البيضاوي ممتدّ رأسياً (110%) عمداً حتى تخرج حوافه العلوية والسفلية عن
     الشاشة — فلا يبقى منه إلا انحدار أفقي ناعم. عند 70% كان يرسم قوساً
     مرئياً في سماء المشهد الزرقاء أعلى اليمين — السماء سطح أملس يُظهر أي حدّ. */
  background:
    radial-gradient(ellipse 46% 110% at 64% 50%,
      rgba(var(--scrim-rgb), 0.70) 0%,
      rgba(var(--scrim-rgb), 0.70) 60%,
      rgba(var(--scrim-rgb), 0.32) 90%,
      transparent 135%),
    linear-gradient(to top, rgba(var(--scrim-rgb), 0.30) 0%, transparent 28%);
}

/* ==========================================================================
   الجوال: نفس تركيب سطح المكتب — النص فوق المشهد والحجاب بركة خلفه.
   الحجاب بركة 0.90 في مركزها تغطّي كتلة النص كاملة — نفس كثافة بركة
   سطح المكتب المقاسة. */
@media (max-width: 767px) {
  /* cover بقرار المالك: المشهد يملأ المسرح كاملاً ولو قُصّ من الجانبين —
     جُرّب contain (الإطار كاملاً مع فراغ داكن فوقه وتحته) ورُفض. */
  .hero__video { object-fit: cover; object-position: center; }

  .hero__scrim {
    background:
      radial-gradient(ellipse 95% 62% at 50% 58%,
        rgba(var(--scrim-rgb), 0.90) 0%,
        rgba(var(--scrim-rgb), 0.90) 50%,
        rgba(var(--scrim-rgb), 0.45) 80%,
        transparent 118%),
      linear-gradient(to bottom, rgba(var(--scrim-rgb), 0.6) 0%, transparent 16%);
  }

  .hero__content { padding-block: 96px var(--space-5); } /* الشريط 88px + هامش صغير — كان 120 فترك فراغاً */
}

/* سطح المكتب فقط — بلا هذا الشرط تغلب القاعدة حجاب الجوال (أعلى تخصيصاً)
   فتأخذ الإنجليزية على الجوال بركة سطح المكتب. */
@media (min-width: 768px) {
  [dir="ltr"] .hero__scrim {
    background:
      radial-gradient(ellipse 46% 110% at 36% 55%,
        rgba(var(--scrim-rgb), 0.70) 0%,
        rgba(var(--scrim-rgb), 0.70) 60%,
        rgba(var(--scrim-rgb), 0.32) 90%,
        transparent 135%),
      linear-gradient(to top, rgba(var(--scrim-rgb), 0.30) 0%, transparent 28%);
  }
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 780px;
  padding-block: 120px var(--space-7);
  /* الحجاب داكن في الثيمين، فنص الهيرو فاتح دائماً */
  color: var(--on-scrim);
  /* ظلّ ناعم يسند أطراف المتن حيث يرقّ الحجاب (الحجاب 0.70 بطلب المالك) */
  text-shadow: 0 1px 14px rgba(var(--scrim-rgb), 0.55);
}

/* نصّ الهيرو كلّه أبيض — جُرّب الأحمر بدرجاته هنا وكان يغرق في الحجاب
   الداكن (2.3–3.4 مقابل 12+ للأبيض)، فاستقرّ المالك على الأبيض. */
.hero__content .eyebrow { color: var(--on-scrim); }

/* ملاحظة مقصودة: المشهد لا يُعطَّل مع prefers-reduced-motion.
   السبب أنه لا يتحرك من تلقاء نفسه إطلاقاً — يتقدّم بمقدار ما يمرّر
   الزائر ويتوقف فور توقّفه، فهو امتداد للتمرير لا حركة مفروضة عليه.
   الحركات الزخرفية (الكشف عند التمرير، خط الدهان) تُلغى كما هي في
   الكتلة العامة أسفل الملف. */

.hero__title {
  /* السقف 96px لا 116px: الإنجليزية ثلاث كلمات في السطر، فعند 116px يلتفّ
     العنوان أربعة أسطر ويتجاوز الشاشة. العربية قصيرة ولا تتأثر. */
  font-size: clamp(44px, 8vw, 96px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.hero__title em {
  font-style: normal;
  color: var(--on-scrim);
}

.hero__sub {
  margin-top: var(--space-4);
  max-width: 52ch;
  font-size: clamp(18px, 2.2vw, 22px);
  /* أبيض كامل لا 0.82 — الشفافية كانت تُلزم الحجاب بـ0.90 فيظلم المشهد */
  color: var(--on-scrim);
}

/* الزر المحدَّد في الهيرو فوق حجاب داكن، فحدوده لا تتبع الثيم */
.hero .btn--ghost {
  border-color: rgba(241, 240, 236, 0.34);
  color: var(--on-scrim);
}

.hero .btn--ghost:hover {
  border-color: var(--on-scrim);
  background: rgba(241, 240, 236, 0.1);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ==========================================================================
   من نحن + العدّادات
   ========================================================================== */

.about__grid {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--space-6);
}

@media (min-width: 1024px) {
  .about__grid { grid-template-columns: 7fr 5fr; gap: var(--space-8); align-items: start; }
}

.about__body p + p { margin-top: var(--space-4); }

.about__points {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.about__points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--muted);
}

.about__points svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  color: var(--brand);
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

/* «+1000» بحجم 42px يتجاوز نصف الشاشة الضيّقة، فيُقصّ. عمود واحد أوضح
   من رقمين مقصوصين. */
@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr; }
}

/* بلاطات زجاجية مثل بطاقات الخدمات — نفس الرموز فتتغيّر معها.
   كانت شبكة بفراغ 1px فوق --surface-2؛ استُبدلت بفجوات وبلاطات مستقلة
   لأن الزجاج يحتاج حافة وظلّاً ليُقرأ زجاجاً، والشبكة الملتصقة تمنعهما.
   التباين نفس حساب البطاقات: الذهبي على الزجاج فوق الهالة 5.13 (الحدّ 4.5). */
.stat {
  container-type: inline-size; /* يجعل cqi أدناه = عرض البلاطة نفسها */
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  box-shadow: var(--glass-sheen), 0 8px 28px rgba(0, 0, 0, 0.16);
  padding: var(--space-5) var(--space-3);
}

/* 🪤 6.4vw كانت تقيس عرض الشاشة لا عرض البلاطة. البلاطة داخل عمود ضيّق
   في شبكة «من نحن»، فعلى شاشة عريضة يكبر الرقم بما لا يسعه إطاره ويفيض.
   cqi تقيس البلاطة نفسها (container-type أعلاه)، فالرقم يتناسب مع ما
   يحويه لا مع النافذة.

   19cqi مقاسة على «+1000» (خمسة محارف، أطول قيمة) عبر عروض بلاطة من
   130px إلى 520px — 24cqi كانت تفيض على البلاطة الضيّقة لأن الحشو
   الجانبي يلتهم نسبة أكبر هناك. */
.stat__num {
  font-family: "Readex Pro", sans-serif;
  font-size: clamp(24px, 19cqi, 66px);
  font-weight: 700;
  line-height: 1;
  color: var(--brand);
}

/* متصفّح بلا دعم استعلامات الحاوية: قيمة ثابتة آمنة لا vw */
@supports not (container-type: inline-size) {
  .stat__num { font-size: clamp(26px, 5vw, 44px); }
}

/* ---- مشهد الأقسام (motion.js 5b) — كان لـ«من نحن» وحده ----
   كل ما هنا لا يظهر إلا حين يحقنه/يحرّكه السكربت؛ بدونه القسم كما هو.
   --line مسجّلة حتى تتدرّج في WAAPI (غير المسجّلة تقفز في المنتصف)،
   وinherits لأن ::before يقرؤها من .eyebrow. */
@property --line {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
.section .eyebrow { position: relative; }

.scene-dot {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--brand-solid);
  pointer-events: none;
}

/* قناع الكلمة: الحشو العمودي يتّسع للحركات والتشكيل فوق الحرف وتحته،
   والهامش السالب يلغي أثره على تباعد الأسطر */
.scene-word {
  display: inline-block;
  overflow: hidden;
  padding: 0.18em 0 0.22em;
  margin: -0.18em 0 -0.22em;
  vertical-align: bottom;
}
.scene-word > span { display: inline-block; }
.scene-dot { transform-origin: 50% 100%; }
.scene-label { display: inline-block; }

/* لمعة تتبع المؤشر (--mx/--my من motion.js) */
.stat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.16), transparent 55%);
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .stat:hover::before { opacity: 1; }
}

.stat__label {
  margin-top: 10px;
  font-size: 16px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   حركة لوحة الأرقام (motion.js §4) — ضربة رول + عدّاد دوّار + مقياس + بريق.
   العناصر الزخرفية يبنيها motion.js؛ بدونه تبقى البلاطة كما هي بالرقم
   المكتوب في HTML. التوقيت كله في JS (WAAPI) لا هنا.
   -------------------------------------------------------------------------- */
.stat {
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.stat:hover {
  box-shadow: var(--glass-sheen), 0 14px 36px rgba(var(--brand-rgb), 0.22);
}

.stat__num,
.stat__label { position: relative; z-index: 1; }

/* الرقم صفّ مرن: الخانات ثم اللاحقة. في العربية تقع «+» يساراً (+1000)
   كما كانت، و«%» تُقدَّم لتبقى يمين الرقم (98%) كما كانت قبل التقسيم. */
.stat__num { display: flex; align-items: baseline; }
html[dir="rtl"] .stat__num[data-suffix="%"] .stat__suffix { order: -1; }

.odo { display: inline-flex; }
.odo__col {
  display: inline-block;
  height: 1.15em;
  line-height: 1.15em;
  overflow: hidden;
}
.odo__strip { display: block; }
.odo__strip > span { display: block; height: 1.15em; text-align: center; }
.stat__suffix { display: inline-block; line-height: 1.15em; }

/* شريط الرول: تعبئة بلون الشعار تمرّ ثم تنسحب */
.stat__wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--brand-solid);
  clip-path: inset(0 0 0 100%);
  pointer-events: none;
}

/* المقياس: خطّ بلون الهوية أسفل البلاطة، يبدأ من جهة القراءة */
.stat__meter {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-solid), var(--brand));
  transform-origin: right;
  pointer-events: none;
  transition: box-shadow var(--dur-base) var(--ease-out);
}
[dir="ltr"] .stat__meter { transform-origin: left; }
.stat:hover .stat__meter { box-shadow: 0 0 14px rgba(var(--brand-rgb), 0.7); }

.stat__shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 35%;
  z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}

/* قبل التشغيل: المحتوى مخفي حتى تكشفه ضربة الرول */
.stats.is-armed .stat__num,
.stats.is-armed .stat__label { opacity: 0; }
.stats.is-armed .stat__meter { transform: scaleX(0); }

/* ==========================================================================
   الخدمات
   ========================================================================== */

/* ==========================================================================
   مشهد الخدمات — مبنى SVG يمرّ بالمراحل الست (motion.js §5)
   حلّ محلّ فيلم MP4: المبنى كان صغيراً داخل إطار أبيض، وشريط الأسماء
   المحروق في الفيديو غير مقروء بحجم الموقع. هنا كل شيء حيّ: حادّ بأي
   حجم، يتبع الثيم بلا حيل مزج، واللغتان من i18n بلا نسخة فيديو ثانية.

   الحالة أصناف تراكمية على .svc-scene: s1 (ترميم) … s6 (ديكور)، و
   data-at = المرحلة الجارية (لإظهار أداتها فقط). كل حركة انتقال CSS
   مدّته في --t — قاعدة «تقليل الحركة» أسفل الملف تُعيدها بـ!important،
   فالمشهد يعمل للجميع بقرار المالك (مثل الفيلم الذي سبقه).
   ========================================================================== */
.svc-show {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .svc-show { grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); }
}

/* --- قائمة المراحل --- */
.svc-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
@media (max-width: 899px) {
  .svc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); order: 2; }
  .svc-step__sub { display: none; }
}

.svc-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 44px;
  padding: 12px 16px 14px;
  text-align: start;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--muted);
  transition: background var(--dur-base) ease, border-color var(--dur-base) ease, color var(--dur-base) ease;
}
.svc-step:hover { color: var(--fg); }
.svc-step[aria-pressed="true"] {
  color: var(--fg);
  background: var(--glass-fill);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-sheen), 0 8px 24px rgba(0, 0, 0, 0.1);
}

.svc-step__num {
  flex: none;
  font-family: "Readex Pro", sans-serif;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  transition: color var(--dur-base) ease;
}
.svc-step[aria-pressed="true"] .svc-step__num,
.svc-step.is-done .svc-step__num { color: var(--brand); }

.svc-step__text { display: grid; gap: 2px; min-width: 0; }
.svc-step__title { font-size: 17px; font-weight: 700; }
.svc-step__sub { font-size: 14px; color: var(--muted); }

/* شريط تقدّم المرحلة — يملؤه motion.js (WAAPI) فيكون هو مؤقّتها */
.svc-step__bar {
  position: absolute;
  inset-inline: 16px;
  bottom: 6px;
  height: 2px;
  background: rgba(var(--fg-rgb), 0.08);
  overflow: hidden;
}
.svc-step__bar i {
  display: block;
  height: 100%;
  background: var(--brand-solid);
  transform: scaleX(0);
  transform-origin: right;
}
[dir="ltr"] .svc-step__bar i { transform-origin: left; }
.svc-step.is-done .svc-step__bar i { transform: scaleX(1); }

/* --- المشهد --- */
.svc-scene {
  margin: 0;
  border-radius: calc(var(--radius) * 3);
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(var(--brand-rgb), 0.06), transparent 70%),
    var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-sheen), 0 18px 50px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.svc-scene svg { display: block; width: 100%; height: auto; }

.svc-scene * {
  --t: 0.7s;
  transition-property: transform, opacity, stroke-dashoffset, clip-path;
  transition-duration: var(--t);
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}
.svc-scene.is-resetting * { transition: none !important; }

.sc-ground { stroke: rgba(var(--fg-rgb), 0.35); stroke-width: 2; }
.sc-shadow { fill: rgba(0, 0, 0, 0.12); }

/* ١ ترميم: الشقوق والرطوبة تُرسم فوقها رقعة ثم تزول */
.sc-crack { fill: none; stroke: #3b3834; stroke-width: 3; stroke-linejoin: round; }
.sc-damp { fill: #5d574e; opacity: 0.45; }
.sc-peel { fill: #b9b3a9; }
.sc-damage { transition-delay: 1.5s; }
.s1 .sc-damage { opacity: 0; }
.sc-patch {
  --t: 0.9s;
  fill: none;
  stroke: #cfc8bc;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition-delay: 0.6s;
}
.s1 .sc-patch { stroke-dashoffset: 0; }

/* حلقات الفحص: تنبض على مواضع الضرر أثناء مرحلة الترميم فقط */
.sc-ping {
  fill: none;
  stroke: var(--brand-solid);
  stroke-width: 3;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.svc-scene[data-at="0"] .sc-ping {
  animation: sc-ping 1.3s ease-out calc(var(--i) * 0.15s) 2 both;
}
@keyframes sc-ping {
  0% { opacity: 0; transform: scale(0.3); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4); }
}

/* ٢ لياسة: طبقة ملساء تصعد خلف مسطرة اللياسة */
.sc-plaster {
  --t: 1.8s;
  fill: #dfdbd4;
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(0);
  transition-delay: 0.2s;
}
.s2 .sc-plaster { transform: scaleY(1); }
.sc-darby { --t: 1.8s; opacity: 0; transition-delay: 0.2s, 0s; }
.s2 .sc-darby { transform: translateY(-340px); }
.svc-scene[data-at="1"] .sc-darby { opacity: 1; }

/* ٣ جبس بورد: سقف معلّق في كل غرفة وإنارة مخفية تحته */
.sc-win__void { fill: #23252a; }
.sc-win__ceil {
  fill: #f6f3ed;
  transform-box: fill-box;
  transform-origin: top;
  transform: scaleY(0);
  transition-delay: calc(var(--i) * 0.09s);
}
.s3 .sc-win__ceil { transform: scaleY(1); }
.sc-win__cove {
  stroke: #ffcf6e;
  stroke-width: 2.5;
  opacity: 0;
  transition-delay: calc(0.4s + var(--i) * 0.09s);
}
.s3 .sc-win__cove { opacity: 1; }

/* ٤ دهانات داخلية: كل غرفة تأخذ لونها */
.sc-win__room { opacity: 0; transition-delay: calc(var(--i) * 0.14s); }
.s4 .sc-win__room { opacity: 1; }

/* ٥ دهانات خارجية: الرول ينزل والواجهة تأخذ لونها خلفه */
/* يُكشف بقناع لا بـscaleY: المطّ كان سيمطّ حبيبات الخامة أثناء النزول */
.sc-paint {
  --t: 2s;
  fill: url(#scTex) #cfc8c1; /* اللون احتياط ريثما تُحمَّل الصورة */
  clip-path: inset(0 0 100% 0);
  transition-delay: 0.2s;
}
.s5 .sc-paint { clip-path: inset(0 0 0 0); }
.sc-roller { --t: 2s; opacity: 0; transition-delay: 0.2s, 0s; }
.s5 .sc-roller { transform: translateY(340px); }
.svc-scene[data-at="4"] .sc-roller { opacity: 1; }

/* ٦ ديكور: كرانيش وبروفايلات، إطارات، باب، إنارة */
.sc-trim {
  fill: #f6f1e7;
  stroke: #c9b994;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleX(0);
  transition-delay: calc(var(--i) * 0.12s);
}
.s6 .sc-trim { transform: scaleX(1); }
.sc-win__frame {
  fill: none;
  stroke: #f7f3ea;
  stroke-width: 4;
  opacity: 0;
  transition-delay: calc(0.4s + var(--i) * 0.06s);
}
.sc-win__sill { fill: #f6f1e7; opacity: 0; transition-delay: calc(0.4s + var(--i) * 0.06s); }
.s6 .sc-win__frame,
.s6 .sc-win__sill { opacity: 1; }
.sc-door { fill: #1f2023; }
.sc-door-new { opacity: 0; transition-delay: 0.7s; }
.s6 .sc-door-new { opacity: 1; }
.sc-lamp { opacity: 0; transition-delay: calc(1s + var(--i) * 0.15s); }
.s6 .sc-lamp { opacity: 1; }

/* ==========================================================================
   بطاقة العينات — الخدمات
   المرجع من عالم المهنة نفسها: كرت عيّنات الألوان في محل الدهانات.
   التدرّج كله من الأحمر الأساسي نحو الأبيض، فلا يُكسر قانون «لون مشبع واحد».
   ========================================================================== */

.swatches {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-7);
}



@media (min-width: 640px)  { .swatches { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .swatches { grid-template-columns: repeat(3, 1fr); } }

.swatch {
  display: flex;
  flex-direction: column;
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-sheen), 0 8px 28px rgba(0, 0, 0, 0.16);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) ease;
}

.swatch:hover { transform: translateY(-6px); border-color: rgba(var(--fg-rgb), 0.22); }

/* حقل اللون — الجزء الذي يجعل البطاقة عيّنة دهان لا بطاقة خدمة */
/* حقل الصورة — الجزء الذي يُري الزائر نوع التشطيب بدل وصفه بالكلام.
   كان مربّع لون مصمت (--chip) قبل توفّر الصور. */
.swatch__chip {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: var(--surface-2); /* لون انتظار قبل تحميل الصورة */
}

.swatch__chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   مقارنة داخل البطاقة

   نفس فكرة قسم «قبل/بعد» مصغّرة داخل حقل صورة البطاقة: صورتان متراكبتان
   والعليا مقصوصة بـ clip-path يتحرّك مع المقبض.

   المقبض <input type="range"> شفاف فوق كل شيء — نفس اختيار قسم قبل/بعد،
   ولنفس السبب: يعطي دعم لوحة المفاتيح وقارئ الشاشة مجاناً بدل تقليدهما.

   ⚠️ direction: ltr مقصودة. clip-path: inset(0 0 0 var(--pos)) تقصّ من
   اليسار دائماً، وقلب اتجاه الحاوية يجعل المقبض يتحرّك عكس القصّ. */
.swatch__chip--compare {
  direction: ltr;
  --pos: 50%;
}

.swatch__chip--compare img {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.swatch__chip--compare img + img { clip-path: inset(0 0 0 var(--pos)); }

.compare__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  z-index: 2;
  background: var(--brand-solid);
  transform: translateX(-1.5px);
  pointer-events: none;
}

.compare__grip {
  position: absolute;
  top: 50%;
  left: var(--pos);
  translate: -50% -50%;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-solid);
  color: var(--on-brand);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.compare__grip svg { width: 20px; height: 20px; }

.compare__range {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  background: transparent;
}

.compare__range::-webkit-slider-thumb { appearance: none; width: 38px; height: 38px; }
.compare__range::-moz-range-thumb { width: 38px; height: 38px; border: 0; opacity: 0; }

.compare__range:focus-visible ~ .compare__grip {
  outline: 3px solid var(--bg);
  outline-offset: 3px;
}

/* حُذف حجاب أسفل الصورة مع رمز LN. كان مبرّره الوحيد قراءة الرمز فوق
   الصور الفاتحة (مقاساً عند 0.62)، ولا سبب لتعتيم الصورة بلا نصّ فوقها. */

.swatch__body { padding: var(--space-4); }

.swatch__title { font-size: 21px; margin-bottom: 8px; }

.swatch__desc { font-size: 17px; color: var(--muted); }

/* ==========================================================================
   قبل / بعد — العنصر المميّز للصفحة
   الجدار مرسوم بالكامل بـ CSS: لا صور، لا ادّعاء بمشروع حقيقي.
   ========================================================================== */

.reveal {
  position: relative;
  direction: ltr; /* «قبل» يساراً و«بعد» يميناً في اللغتين — التسميات تحمل المعنى */
  margin-top: var(--space-7);
  /* 3/2 لا 16/9: المصادر طولية، والإطار العريض كان يقتطع 58% منها
     فتبدو كل مرحلة مقرّبة أكثر مما ينبغي. عند 3/2 يظهر نصف الصورة بدل
     42%، ويبقى الشقّ داخل الثلث المرئي بنسبة 61%.
     4/3 يُظهر أكثر (56%) لكنه يجعل الكتلة مفرطة الارتفاع على سطح المكتب. */
  aspect-ratio: 3 / 2;
  /* 🪤 min-height مع aspect-ratio يفرض عرضاً أيضاً: 300px ÷ (2/3) = 450px،
     فيتجاوز أي شاشة أضيق من ذلك ويُقصّ القسم. الحدّ الأدنى بالعرض لا
     بالارتفاع. */
  min-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  --p1: 33%;
  --p2: 66%;
}

@media (max-width: 640px) { .reveal { aspect-ratio: 4 / 3; } }

.reveal__wall { position: absolute; inset: 0; }

/* المراحل الثلاث صور حقيقية. كانت مرسومة بـCSS بالكامل حتى لا يدّعي
   الموقع مشروعاً لم يُنفَّذ — والصور جدران عامة لا مشروع بعينه، فالقاعدة
   قائمة كما هي. */
.reveal__wall--before,
.reveal__wall--during,
.reveal__wall--after {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* --- قبل: جدار متشقّق --- */
.reveal__wall--before { background-image: url("../img/stages/before.jpg"); }

/* --- أثناء: معالجة وتحضير السطح قبل الدهان --- */
.reveal__wall--during {
  clip-path: inset(0 0 0 var(--p1));
  background-image: url("../img/stages/during.jpg");
}

/* --- بعد: جدار مدهون بتشطيب ناعم مستوٍ --- */
.reveal__wall--after {
  clip-path: inset(0 0 0 var(--p2));
  background-image: url("../img/stages/after.jpg");
}

/* الخطوط الفاصلة — موضع كلٍّ من رمزه */
.reveal__line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand-solid);
  transform: translateX(-1.5px);
  pointer-events: none;
}

.reveal__line--1 { left: var(--p1); }
.reveal__line--2 { left: var(--p2); }

.reveal__grip {
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-solid);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.reveal__grip--1 { left: var(--p1); }
.reveal__grip--2 { left: var(--p2); }

.reveal__grip svg { width: 26px; height: 26px; }

/* المقبضان الحقيقيان: عنصرا input range شفافان فوق كل شيء.
   يعطيان دعم لوحة المفاتيح وقارئ الشاشة مجاناً بدل تقليدهما يدوياً.

   🪤 المشكلة التي يحلّها clip-path هنا:
   المقبضان يمتدّان على كامل العرض — وهذا لازم، لأن قيمة الـrange تُحسب
   من عرض العنصر نفسه، فتضييقه يُفسد تطابق الموضع مع القيمة. لكن امتدادهما
   يعني أن العلوي يبتلع كل النقرات والسفلي لا يُلمس أبداً.

   clip-path يؤثّر في اختبار الإصابة لا في الرسم وحده: كل مقبض يُقصّ إلى
   شريط رأسي بعرض 72px حول موضعه، فلا يستقبل نقراً خارجه — بينما عرضه
   المنطقي يبقى كاملاً فتبقى القيمة مطابقة للموضع.

   وبعد بدء السحب يلتقط المتصفّح المؤشّر، فيستمر السحب خارج الشريط
   طبيعياً حتى أقصى الحافة. */
.reveal__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  background: transparent;
}

.reveal__range--1 { clip-path: inset(0 calc(100% - var(--p1) - 36px) 0 calc(var(--p1) - 36px)); }
.reveal__range--2 { clip-path: inset(0 calc(100% - var(--p2) - 36px) 0 calc(var(--p2) - 36px)); }

/* أثناء السحب يُرفع القصّ فلا يُقطع الالتقاط عند حافة الشريط */
.reveal__range:active { clip-path: none; z-index: 5; }

.reveal__range::-webkit-slider-thumb { appearance: none; width: 52px; height: 52px; }
.reveal__range::-moz-range-thumb { width: 52px; height: 52px; border: 0; opacity: 0; }

.reveal__range--1:focus-visible ~ .reveal__grip--1,
.reveal__range--2:focus-visible ~ .reveal__grip--2 {
  outline: 3px solid var(--bg);
  outline-offset: 3px;
}

.reveal__tag {
  position: absolute;
  top: var(--space-3);
  padding: 7px 15px;
  border-radius: 100px;
  background: rgba(var(--scrim-rgb), 0.75);
  color: var(--on-scrim);
  font-family: "Readex Pro", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.reveal__tag--before { left: var(--space-3); }
.reveal__tag--after  { right: var(--space-3); }

/* الوسم الأوسط يتبع منتصف نطاقه لا منتصف الصورة */
.reveal__tag--during {
  left: calc((var(--p1) + var(--p2)) / 2);
  translate: -50% 0;
}

/* ==========================================================================
   أعمالنا
   ========================================================================== */

/* --- الملفّات الزجاجية ---------------------------------------------------
   فكرة مكوّن React «Glass Folder Cards» مبنيّة بلا React. المسرح مرسوم
   بوحدات 340×272 ثابتة ويُكبَّر بـ--k (يكتبها motion.js من عرض الملف)،
   فالأشكال مسارات ثابتة. الحالات متغيّرات فقط: الراحة، المرور/التركيز،
   الفتح — والانتقالات تحسب الباقي.
   الزجاج من --surface-rgb والحبر من --fg، فيتبدّل مع الثيم بلا قاعدة ثانية.
   كل انتقال مدّته --t: قاعدة «تقليل الحركة» تعيدها (بقرار المالك).
   ------------------------------------------------------------------------ */
.folders {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6) 56px;
  /* متّسع فوق الملفين للأوراق حين تخرج */
  margin-top: calc(var(--space-6) + 90px);
}

.folder {
  --k: 1;
  --px: 0;
  --py: 0;
  --hinge: 0deg;
  --lift: 42px;
  --spread: 0px;
  --fan: 0deg;
  --stack: 15px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.36, 0.5, 1);
  position: relative;
  width: min(400px, 100%);
  aspect-ratio: 340 / 326; /* المسرح 272 + 54 متّسع للأوراق */
  -webkit-tap-highlight-color: transparent;
}
.folder:hover,
.folder:focus-within { --hinge: -11deg; --lift: -34px; --spread: 8px; --fan: 1.4deg; --stack: 10px; }
.folder[data-open] { --hinge: -24deg; --lift: -96px; --spread: 40px; --fan: 5deg; --stack: 30px; }

.folder__stage {
  --t: 0.9s;
  position: absolute;
  left: 0;
  top: 0;
  width: 340px;
  height: 272px;
  transform-origin: 0 0;
  transform:
    translateY(calc(54px * var(--k))) scale(var(--k))
    perspective(1400px) rotateX(calc(var(--py) * -3deg)) rotateY(calc(var(--px) * 4deg));
  transition: transform var(--t) var(--ease);
}

.folder__shadow {
  --t: 0.9s;
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -6px;
  height: 60px;
  border-radius: 40px;
  background: rgba(16, 18, 24, 0.3);
  filter: blur(22px);
  transform: translateX(calc(var(--px) * -8px));
  transition: transform var(--t) var(--ease);
}

.folder__back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: rgb(var(--surface-rgb));
  clip-path: path("M0 56A22 22 0 0 1 22 34L146 34C170 34 172 0 198 0L318 0A22 22 0 0 1 340 22L340 250A22 22 0 0 1 318 272L22 272A22 22 0 0 1 0 250Z");
}
.folder__art {
  --t: 1.1s;
  position: absolute;
  left: -12px;
  top: -12px;
  width: 364px;
  height: 296px;
  max-width: none;
  object-fit: cover;
  transform: translate(calc(var(--px) * -7px), calc(var(--py) * -6px)) scale(1.02);
  transition: transform var(--t) var(--ease);
}

.folder__rim {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  overflow: visible;
  pointer-events: none;
  fill: none;
}
.folder__rim--back { width: 340px; height: 272px; }
.folder__rim--back path { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1; }

/* --- الأوراق --- */
.folder__files {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  /* لا شيء يتدلّى من أسفل الجيب مهما علت الرزمة */
  clip-path: inset(-400px -400px 10px -400px);
}
.folder__files > div:not([hidden]) { display: contents; }

.folder__sheet {
  --t: 0.75s;
  position: absolute;
  left: 34px;
  top: 96px;
  width: 272px;
  height: 184px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
  background: #1a1a1d;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 10px 26px -8px rgba(10, 12, 20, 0.32);
  transform-origin: 50% 100%;
  transform:
    translate(calc(var(--jx) + var(--slot) * var(--spread)), calc(var(--lift) + var(--depth) * var(--stack) * -1))
    rotate(calc(var(--jr) + var(--slot) * var(--fan)));
  transition: transform var(--t) var(--spring) calc(var(--depth) * 40ms), box-shadow var(--t) var(--ease);
}
.folder__sheet img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* عتمة علوية خفيفة ليُقرأ الاسم فوق الصورة — وبلا اسم (الفلل) تبقى الحافة وحدها */
.folder__sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 38%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  pointer-events: none;
}
.folder__sheet:not(:has(.folder__sheet-name))::after { background: none; }
.folder__sheet-name {
  position: absolute;
  inset-inline: 14px;
  top: 10px;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-align: start;
}
.folder[data-open] .folder__sheet:hover,
.folder[data-open] .folder__sheet:focus-visible {
  transform:
    translate(calc(var(--jx) + var(--slot) * var(--spread)), calc(var(--lift) + var(--depth) * var(--stack) * -1 - 18px))
    rotate(calc(var(--slot) * var(--fan) * 0.6));
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 22px 40px -12px rgba(10, 12, 20, 0.45);
  transition-delay: 0s;
}
.folder__sheet:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* --- الواجهة الزجاجية: تميل على مفصلها السفلي --- */
.folder__front {
  --t: 0.8s;
  position: absolute;
  left: 0;
  top: 74px;
  width: 340px;
  height: 198px;
  z-index: 10;
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  clip-path: path("M0 22A22 22 0 0 1 22 0L118 0C144 0 146 32 172 32L318 32A22 22 0 0 1 340 54L340 176A22 22 0 0 1 318 198L22 198A22 22 0 0 1 0 176Z");
  transform-origin: 50% 100%;
  transform: perspective(760px) rotateX(var(--hinge));
  transition: transform var(--t) var(--spring);
}
.folder__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--surface-rgb), 0.16) 0%,
    rgba(var(--surface-rgb), 0.55) 42%,
    rgba(var(--surface-rgb), 0.93) 100%);
}
.folder__spec {
  position: absolute;
  inset: 0;
  background: radial-gradient(260px 200px at calc(50% + var(--px) * 46%) calc(30% + var(--py) * 40%),
    rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.folder__rim--front { width: 340px; height: 198px; }
.folder__rim--front path {
  --t: 0.3s;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 2.4;
  transition: stroke-width var(--t) ease;
}
.folder__front:has(.folder__hit:focus-visible) .folder__rim--front path { stroke: var(--brand); stroke-width: 5; }

.folder__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.folder__hit:focus { outline: none; }

/* اسم الملف وحده بلا عدد (بطلب المالك): مسمّى رسمي بالقطاع لا بالحجم */
.folder__label {
  position: absolute;
  inset-inline-start: 28px;
  bottom: 30px;
  z-index: 2;
  pointer-events: none;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--fg);
}

.folders__hint {
  margin-top: var(--space-4);
  text-align: center;
  font-size: 15px;
  color: var(--muted);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(var(--scrim-rgb), 0.92);
}

.lightbox.is-open { display: flex; }

.lightbox__figure {
  position: relative;
  max-width: 1100px;
  max-height: 88dvh;
  margin: 0;
}

.lightbox__figure img {
  max-width: 100%;
  max-height: 78dvh;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius);
}

.lightbox__figure figcaption {
  margin-top: var(--space-3);
  text-align: center;
  color: var(--muted);
  font-size: 17px;
}

.lightbox__close {
  position: absolute;
  top: -60px;
  inset-inline-end: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(var(--fg-rgb), 0.3);
  border-radius: var(--radius);
  color: var(--fg);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.lightbox__close:hover { background: var(--brand-solid); border-color: var(--brand-solid); }

/* أسهم العارض: تتصفّح صور الملف المفتوح (data-group). البداية/النهاية
   منطقيتان فتنعكسان مع اللغة، والسهم يُقلب في الإنجليزية ليشير للخارج. */
.lightbox__nav {
  position: absolute;
  top: calc(50% - 40px);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: rgba(var(--scrim-rgb), 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.lightbox__nav:hover { background: var(--brand-solid); border-color: var(--brand-solid); }
.lightbox__nav[hidden] { display: none; }
.lightbox__nav--prev { inset-inline-start: 10px; }
.lightbox__nav--next { inset-inline-end: 10px; }
[dir="ltr"] .lightbox__nav svg { transform: scaleX(-1); }
@media (min-width: 1200px) {
  .lightbox__nav--prev { inset-inline-start: -64px; }
  .lightbox__nav--next { inset-inline-end: -64px; }
}

body.is-locked { overflow: hidden; }

/* ==========================================================================
   تواصل معنا
   ========================================================================== */

.contact__grid {
  display: grid;
  gap: var(--space-7);
  margin-top: var(--space-7);
}

@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: 5fr 7fr; gap: var(--space-8); }
}

.contact-cards { display: grid; gap: var(--space-3); }

.contact-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 76px;
  padding: var(--space-3) var(--space-4);
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-sheen);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

/* 🪤 عنصر flex لا ينكمش دون عرض محتواه ما لم يُصرَّح min-width: 0.
   بدونها يوسّع البريد الطويل البطاقة خارج الشاشة. */
.contact-card > span { min-width: 0; }

.contact-card:hover { border-color: var(--brand); transform: translateY(-2px); }

.contact-card__icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--brand-soft);
  color: var(--brand);
}

.contact-card__icon svg { width: 22px; height: 22px; }

.contact-card__label { font-size: 15px; color: var(--muted); }

.contact-card__value {
  font-family: "Readex Pro", sans-serif;
  font-size: 18px;
  font-weight: 500;

  /* 🪤 direction وحدها لا تفعل شيئاً على عنصر سطري.
     المواصفة: direction تُهمَل على الصناديق السطرية ما لم تكن unicode-bidi
     شيئاً غير normal. فبدونها يبقى الرقم داخل سياق الصفحة RTL، ويُرتَّب
     كمقاطع أرقام من اليمين لليسار: «0503 840 013» تُعرض «013 840 0503».
     كل مقطع سليم داخلياً والترتيب بينها معكوس — وهذه بصمة خلل bidi.

     ظلّ الخلل مستوراً ما دامت القيم عناصر نائبة: «05X XXX XXXX» معكوسة
     تُشبه نفسها. الأرقام الحقيقية هي ما كشفته.

     isolate لا embed: تعزل الرقم عن جيرانه في الاتجاهين معاً. وهي نفس ما
     تفعله السمة dir="ltr" ضمنياً — ولذلك كان رقم الفوتر سليماً. */
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
  overflow-wrap: anywhere;
}

[dir="rtl"] .contact-card__value { text-align: right; }

/* بطاقة الجوال: رقمان تحت العنوان، كل منهما رابط اتصال مستقل */
.contact-card__nums { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.contact-card__nums .contact-card__value { color: inherit; text-decoration: none; }
.contact-card__nums .contact-card__value:hover { color: var(--brand); }

/* النموذج */
.form { display: grid; gap: var(--space-4); }

.field { display: grid; gap: 8px; }

.field--full { grid-column: 1 / -1; }

@media (min-width: 640px) {
  .form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
}

.field label {
  font-size: 16px;
  font-weight: 500;
  color: var(--fg);
}

.field .req { color: var(--brand); margin-inline-start: 3px; }

/* 🪤 عرض <input> الافتراضي مبنيّ على السمة size (~20 حرفاً) لا على
   حاويته، فيتجاوز الشاشة الضيّقة. width: 100% تُلزمه بالحاوية. */
.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 14px 16px;
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  border-radius: var(--radius);
  color: var(--fg);
  font-family: inherit;
  font-size: 17px; /* ≥16px يمنع تكبير iOS التلقائي */
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.field textarea { min-height: 132px; resize: vertical; line-height: 1.6; }

.field input::placeholder,
.field textarea::placeholder { color: var(--muted); }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(var(--fg-rgb), 0.28); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface-2);
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8b8f' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 16px center;
  background-size: 20px;
  padding-inline-end: 16px;
  padding-inline-start: 48px;
}

[dir="ltr"] .field select {
  background-position: right 16px center;
  padding-inline-start: 16px;
  padding-inline-end: 48px;
}

.field select option { background: var(--surface); color: var(--fg); }

.field__hint { font-size: 15px; color: var(--muted); }

.field__error {
  display: none;
  font-size: 15px;
  color: var(--danger);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--danger); }

.field.has-error .field__error { display: block; }

.form__note { font-size: 15px; color: var(--muted); }

/* زر واتساب العائم */
.wa-float {
  position: fixed;
  inset-inline-end: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: var(--z-nav);
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #06301a;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  transition: transform var(--dur-fast) var(--ease-out);
}

.wa-float:hover  { transform: scale(1.08); }
.wa-float:active { transform: scale(0.95); }
.wa-float svg { width: 30px; height: 30px; }

/* ==========================================================================
   الفوتر
   ========================================================================== */

/* الفوتر يأخذ دور «القسم»: الهالة عليه، واللوح الزجاجي هو .container
   داخله — نفس ترتيب الأقسام والبطاقات تماماً.

   ⚠️ لا تضع الزجاج على .footer نفسه وتحته ::before بـ z-index:-1.
   backdrop-filter ينشئ سياق تكديس، فالأبناء ذوو الترتيب السالب يُرسمون
   فوق خلفية العنصر لا تحتها — فتقع الهالة فوق الزجاج ولا تُفرَّس أبداً. */
.footer {
  position: relative;
  border-top: 3px solid var(--brand);
  background: var(--bg);
  padding-block: var(--space-7) var(--space-5);
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 66% at 20% 24%, var(--glow-warm), transparent 68%),
    radial-gradient(ellipse 50% 58% at 84% 78%, var(--glow-cool), transparent 66%);
}

/* شعار الفوتر بحجم شعار الشريط. واسم المؤسسة بلون النص لا الشعار:
   --nav-fg غير معرّف خارج الشريط فكان النص يرث أحمر الشعار — والأحمر
   للشعار وحده. */
.footer .nav__brand { gap: 16px; }
.footer .nav__logo { height: 72px; }
.footer .nav__brand-text { color: var(--fg); font-size: 26px; white-space: normal; }

.footer > .container {
  position: relative;
  z-index: 1;
  padding-block: var(--space-6);
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  box-shadow: var(--glass-sheen), 0 8px 28px rgba(0, 0, 0, 0.16);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .footer::before { display: none; }
  .footer > .container { background: var(--surface); }
}

.footer__grid {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.1);
}

/* الجوال: الهوية بعرض كامل، و«روابط» و«للتواصل» جنباً إلى جنب بدل
   عمود طويل يستهلك شاشة كاملة من التمرير. */
.footer__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.footer__grid > :first-child { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr; }
  .footer__grid > :first-child { grid-column: auto; }
}

.footer__links { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }

.footer__links a,
.footer__meta {
  display: flex;
  align-items: center;
  min-height: 44px; /* روابط الفوتر أهداف لمس أيضاً */
  color: var(--muted);
  font-size: 18px;
  min-width: 0;
  overflow-wrap: anywhere; /* البريد الطويل يلتفّ بدل أن يوسّع عموده على الجوال */
}

/* بند نصّي لا رابط (السجل التجاري): كان <span> بأنماط مضمّنة وحجم 15px،
   فلا يشارك الروابط ارتفاع السطر ولا حجمه — ومن هنا اختلال الإيقاع. */
.footer__meta { color: var(--muted); }

/* 🪤 dir="ltr" يقلب محور العنصر نفسه. داخل صفحة RTL يصير مبدأ محتواه
   اليسار، فيتعلّق الرقم والبريد بالحافة المقابلة لبقية العمود.
   المحاذاة يجب أن تتبع اتجاه الصفحة لا اتجاه العنصر. */
[dir="rtl"] .footer__links > li > [dir="ltr"] { justify-content: flex-end; }

.footer__links a {
  transition: color var(--dur-fast) ease;
}

.footer__links li > span { display: flex; align-items: center; min-height: 44px; }

.footer__links a:hover { color: var(--brand); }

.footer__heading {
  font-family: "Readex Pro", sans-serif;
  font-size: 19px;
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-4);
  font-size: 15px;
  color: var(--muted);
}

/* ==========================================================================
   خط الدهان — المخاطرة الجمالية
   ========================================================================== */

.paint-wipe {
  position: fixed;
  inset: 0;
  z-index: var(--z-wipe);
  background: var(--brand-solid);
  transform-origin: right;
  pointer-events: none;
}

[dir="ltr"] .paint-wipe { transform-origin: left; }

/* ==========================================================================
   حالات الكشف عند التمرير (الوضع الأساسي قبل تدخّل GSAP)
   ملاحظة: يُفعَّل فقط عبر .js-motion التي يضيفها motion.js —
   لو فشل تحميل GSAP يبقى المحتوى مرئياً بالكامل.
   ========================================================================== */

.js-motion [data-reveal] { opacity: 0; }

/* ==========================================================================
   خامة الملفّات على كل الأسطح الزجاجية
   الحشو والحافة من الرموز أعلاه؛ هنا اللمعة التي تتبع المؤشر (--gx/--gy
   يكتبها motion.js على السطح تحت الفأرة) — نفس لمعة واجهة الملف. ثابتة
   أعلى السطح بلا مؤشر، وتشتدّ عند المرور. شريط التنقل مستثنى: شفافيته
   قرار مقاس للتباين فوق المشهد.
   ========================================================================== */
.stat,
.svc-step[aria-pressed="true"],
.svc-scene,
.swatch,
.contact-card,
.footer > .container,
.mobile-menu nav {
  background:
    radial-gradient(260px 200px at var(--gx, 50%) var(--gy, 0%),
      rgba(255, 255, 255, var(--spec, 0.12)), rgba(255, 255, 255, 0) 70%),
    var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
@media (hover: hover) and (pointer: fine) {
  .stat:hover, .svc-scene:hover, .swatch:hover, .contact-card:hover { --spec: 0.3; }
}

/* ==========================================================================
   احترام تقليل الحركة — يلغي كل شيء ويُظهر المحتوى فوراً
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
  /* مشهد الخدمات يعمل للجميع بقرار المالك: يستعيد مدده من --t */
  .svc-scene * { transition-duration: var(--t) !important; }
  .folder *, .folder *::before { transition-duration: var(--t, 0s) !important; }
  .svc-scene[data-at="0"] .sc-ping { animation-duration: 1.3s !important; animation-iteration-count: 2 !important; }
  .paint-wipe { display: none !important; }
  .btn:hover, .btn:active,
  .service:hover, .contact-card:hover, .wa-float:hover { transform: none; }
}


/* ==========================================================================
   احتياط الزجاج
   متصفّح بلا backdrop-filter يعرض الحشو الشفاف بلا ضباب — أي لوناً باهتاً
   فوق ما تحته مباشرة. تُعاد الأسطح مصمتة هناك بدل تركها شبه شفافة.
   ========================================================================== */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .swatch,
  .contact-card,
  .field input,
  .field textarea,
  .field select { background: var(--surface); }

  .stat { background: var(--surface); }
  .mobile-menu nav { background: var(--bg); }
}