/*
Theme Name: Thaqeel
Theme URI: https://thaqeel.sa
Description: قالب مخصص لمؤسسة ثقيل لتأجير المعدات — عربي RTL، هوية صناعية بالأصفر المستخرج من الشعار، خطوط تجارب وطويل (Tajarib & Taweel)، خامات وموشن جرافيك، ونوع محتوى مخصص للمعدات مع فلترة بالحمولة وبيانات منظمة لمحركات البحث.
Author: Thaqeel
Version: 3.3.1
Requires at least: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thaqeel
Tags: rtl-language-support, custom-logo, custom-menu, translation-ready
*/

/* ═══════════════════════════════════════════════════════════
   الخطوط — عائلة Tajarib بقَطعين (مكتبة حرف · عبدالملك جاسم)

   قَطعان من نفس العائلة، لكل منهما وظيفة:

   • **Tajarib Taweel** للعناوين: حروف أعلى وأضيق، وفيها تطويلات في
     مواضع الوصل تعطي السطر إيقاعاً. هذا الإيقاع قوّة في عنوان يُقرأ
     لمحةً — وتشويش في فقرة تُقرأ متصلة.

   • **Tajarib** للمتن: أشكال منتظمة بلا تطويل، فتستقرّ العين على
     السطر الطويل.

   وهذا تقسيم مقصود في تصميم العائلة نفسها، لا خلط بين خطّين غريبين.

   الوزن ٩٠٠ (Black) موجود في القَطعين، فالعناوين تأخذ ثقلها من
   المسبك لا من تثخين مفتعل.
   ═══════════════════════════════════════════════════════════ */

/* قَطع العناوين — Tajarib Taweel (باسميهما لتوافق تام) */
@font-face{
  font-family:"Taweel";
  src:url("assets/fonts/taweel-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Taweel";
  src:url("assets/fonts/taweel-900.woff2") format("woff2");
  font-weight:800 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Tajarib Taweel";
  src:url("assets/fonts/taweel-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Tajarib Taweel";
  src:url("assets/fonts/taweel-900.woff2") format("woff2");
  font-weight:800 900;font-style:normal;font-display:swap;
}

/* قَطع المتن — Tajarib */
@font-face{
  font-family:"Tajarib";
  src:url("assets/fonts/tajarib-500.woff2") format("woff2");
  font-weight:400 500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Tajarib";
  src:url("assets/fonts/tajarib-700.woff2") format("woff2");
  font-weight:600 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Tajarib";
  src:url("assets/fonts/tajarib-900.woff2") format("woff2");
  font-weight:800 900;font-style:normal;font-display:swap;
}

/* ═══════════════════════════════════════════════════════════
   الهوية
   ═══════════════════════════════════════════════════════════ */
:root{
  /* الأصفر مقيس من ملف الشعار الرسمي مباشرة — لا تخمين */
  --brand:#FEDB03;
  --brand-deep:#E5C400;
  --brand-dim:#9A8503;
  --brand-soft:#FFF3A6;
  --brand-wash:#FFFBE2;

  --ink:#0E0D08;          /* أسود دافئ — لا رمادي */
  --ink-2:#2B271E;
  --mute:#524C3E;         /* تباين عالي ومريح 7.2:1 على الخلفية الفاتحة */
  --faint:#736B5B;        /* تباين معتمد لجميع النصوص الثانوية والتوضيحية 4.7:1 */

  --paper:#FAF7ED;        /* أرضية الصفحة */
  --card:#FFFFFF;
  --line:#E7DFCA;
  --line-2:#D5CAAC;

  --void:#0A0905;         /* أغمق كتلة */
  --steel:#171610;
  --steel-2:#232118;

  --wrap:1240px;
  --gut:24px;
  --r:2px;

  --shadow-1:0 1px 2px rgba(14,13,8,.05), 0 4px 16px -4px rgba(14,13,8,.07);
  --shadow-2:0 2px 6px rgba(14,13,8,.06), 0 22px 48px -16px rgba(14,13,8,.18);
  --shadow-3:0 30px 70px -28px rgba(14,13,8,.42);

  --font:"Tajarib","Tajarib Taweel","Taweel",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --font-display:"Taweel","Tajarib Taweel","Tajarib",system-ui,-apple-system,sans-serif;
  --font-sans:var(--font);
  --font-mono:var(--font);

  /* منحنيات الحركة */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --e-spring:cubic-bezier(.34,1.4,.64,1);

  /* ── الخامات ───────────────────────────────────────────── */
  /* حُبيبات فيلمية — ضوضاء fractal مولّدة داخل SVG، لا صورة تُحمَّل */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  /* ورق هندسي */
  --graph:linear-gradient(0deg,currentColor 1px,transparent 1px),
          linear-gradient(90deg,currentColor 1px,transparent 1px);
  /* نقاط هاف‑تون فائقة النعومة للشاشات عالية الدقة */
  --halftone:radial-gradient(circle,currentColor 1.2px,transparent 1.6px);
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:92px;
  scrollbar-width:thin;
  scrollbar-color:var(--brand) var(--void);
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:var(--brand);border:2px solid var(--void)}
::-webkit-scrollbar-thumb:hover{background:var(--brand-deep)}

/* العناوين الأساسية — Tajarib Taweel بالوزن العريض 900 و700 */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--ink);
  letter-spacing:0;
  margin-top:0;
}
h1,h2{font-weight:900}
h3,h4,h5,h6{font-weight:700}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-weight:500;
  font-size:1.18rem;
  line-height:1.92;
  word-spacing:.05em;      /* فراغ الخط .249em — ضيّق بين حروف ثقيلة */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;   /* لا وزن مزيّف — نستخدم أوزان المسبك الأصلية */
  overflow-x:hidden;
}

/* الحُبيبات فوق الصفحة كلها — رقيقة جداً، تكسر نظافة الشاشة
   وتعطي الأسطح إحساس المادة بدل اللون المسطّح. */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  background-image:var(--grain);background-size:260px 260px;
  opacity:.045;mix-blend-mode:multiply;
  transform:translateZ(0);
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--brand);color:var(--ink)}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

/* العربية لا تقبل التباعد بين الحروف — يقطع الوصل. التباعد للاتيني فقط. */
.en,.lat{font-feature-settings:"kern" 1}
.mono{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1;direction:ltr;unicode-bidi:isolate}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;inset-inline-start:-9999px;z-index:9999;background:var(--brand);color:var(--ink);padding:14px 24px;font-weight:700;text-decoration:none}
.skip-link:focus{inset-inline-start:var(--gut);top:12px}

/* ═══════════════════════════════════════════════════════════
   الخامات كطبقات قابلة لإعادة الاستعمال
   ═══════════════════════════════════════════════════════════ */

/* شريط التحذير المائل — رمز المواقع الإنشائية الصناعي الفاخر */
.hazard{
  height:10px;width:100%;position:relative;z-index:3;
  background:repeating-linear-gradient(135deg,var(--brand) 0 13px,var(--ink) 13px 26px);
  background-size:36.77px 36.77px;
  border-block:1px solid rgba(14,13,8,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.35);
  animation:hazard-roll 2.2s linear infinite;
}
.hazard.thin{height:6px}
.hazard.on-dark{
  background:repeating-linear-gradient(135deg,var(--brand) 0 13px,var(--void) 13px 26px);
  background-size:36.77px 36.77px;
  border-block:1px solid rgba(0,0,0,.6);
  box-shadow:inset 0 1px 0 rgba(254,219,3,.2),inset 0 -1px 0 rgba(0,0,0,.7);
}
@keyframes hazard-roll{to{background-position:36.77px 0}}

/* ورق هندسي باهت — يوضع على الأقسام الفاتحة */
.section.tint::before,
.section.grid-paper::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  color:var(--line-2);opacity:.5;
  background-image:var(--graph);background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 45%,#000 30%,transparent 100%);
  mask-image:radial-gradient(ellipse 85% 70% at 50% 45%,#000 30%,transparent 100%);
}

/* الكتل الداكنة — خامة مركّبة: هاف‑توّن + حُبيبات + وهج علوي */
.on-dark,.section.dark{
  background:var(--void);color:#F4F1E6;position:relative;isolation:isolate;
}
.on-dark::before,.section.dark::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  color:rgba(254,219,3,.16);
  background-image:var(--halftone);background-size:20px 20px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 65%);
  mask-image:linear-gradient(to bottom,#000,transparent 65%);
  opacity:.55;
}
.on-dark::after,.section.dark::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%,rgba(254,219,3,.12),transparent 70%),
    var(--grain);
  background-size:auto,260px 260px;
  mix-blend-mode:overlay;opacity:.5;
}

/* علامات تسجيل هندسية في الزوايا — تفصيلة المطبوعات الفنية */
.reg{position:absolute;width:22px;height:22px;pointer-events:none;z-index:4;opacity:.5}
.reg::before,.reg::after{content:"";position:absolute;background:currentColor}
.reg::before{inset-inline-start:0;top:50%;width:100%;height:1px;transform:translateY(-50%)}
.reg::after{top:0;inset-inline-start:50%;height:100%;width:1px;transform:translateX(-50%)}

/* ═══════════════════════════════════════════════════════════
   نظام الحركة
   ═══════════════════════════════════════════════════════════ */
/* الإخفاء المبدئي مشروط بوجود JS — بدونه يظهر كل شيء طبيعياً. */
.js .reveal{opacity:0;transform:translateY(28px)}
.js .reveal.in{
  opacity:1;transform:none;
  transition:opacity .9s var(--e-out),transform .9s var(--e-out);
}
.js .reveal.d1.in{transition-delay:.09s}
.js .reveal.d2.in{transition-delay:.18s}
.js .reveal.d3.in{transition-delay:.27s}
.js .reveal.d4.in{transition-delay:.36s}

/* كشف بالقصّ — للعناوين: يُمسح السطر من أسفل لأعلى */
.js .reveal .wipe{clip-path:inset(0 0 102% 0)}
.js .reveal.in .wipe{clip-path:inset(0 0 -12% 0);transition:clip-path 1.05s var(--e-out) .1s}

/* صعود الكلمات — الحركة الأساسية للعنوان الرئيسي */
/* علبة الكلمة تقصّ ما يخرج عنها لتعمل حركة الصعود. والخط يعلن نزولاً
   قدره .25em بينما حروفه تنزل فعلاً إلى .473em — فلولا هذا التعويض
   لأُكلت أطراف ن و ي و ى و ج و ع. */
.w{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding-block:.14em .52em;margin-block:-.14em -.52em;
}
.w > .i{display:inline-block;will-change:transform}
.js .kinetic .w > .i{transform:translateY(165%)}
.js .kinetic.go .w > .i{
  transform:none;
  transition:transform .95s var(--e-out);
  transition-delay:calc(var(--i,0) * 65ms);
}

@keyframes fade-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes ken-burns{from{transform:scale(1.16)}to{transform:scale(1.01)}}
@keyframes sweep-down{0%{transform:translateY(-110%);opacity:0}12%{opacity:1}100%{transform:translateY(560%);opacity:0}}
@keyframes pulse-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.45}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes shimmer{from{transform:translateX(-120%)}to{transform:translateX(320%)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
@keyframes drift{to{background-position:34px 34px}}

/* ═══════════════════════════════════════════════════════════
   مؤشّر تقدّم القراءة
   ═══════════════════════════════════════════════════════════ */
.progress{
  position:fixed;inset-block-start:0;inset-inline:0;height:3px;z-index:70;
  background:var(--brand);transform:scaleX(var(--p,0));transform-origin:right center;
  will-change:transform;
}
html[dir="ltr"] .progress{transform-origin:left center}

/* ═══════════════════════════════════════════════════════════
   الرأس
   ═══════════════════════════════════════════════════════════ */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(250,247,237,.82);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s var(--e-out),border-color .3s,box-shadow .3s;
}
.site-header.stuck{
  background:rgba(250,247,237,.94);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -22px rgba(14,13,8,.5);
}
.site-header .wrap{display:flex;align-items:center;gap:20px;padding-block:15px;flex-wrap:wrap;transition:padding .3s var(--e-out)}
.site-header.stuck .wrap{padding-block:10px}

.brand{display:flex;align-items:center;gap:13px;margin-inline-end:auto;text-decoration:none}
.brand img{height:50px;width:auto;transition:height .3s var(--e-out)}
.site-header.stuck .brand img{height:42px}
.brand .wordmark{display:flex;flex-direction:column;line-height:1.05}
.brand .ar{font-size:1.65rem;font-weight:700;letter-spacing:0}
.brand .en{font-size:.62rem;letter-spacing:.26em;color:var(--mute);font-weight:700;direction:ltr}

.main-nav ul{list-style:none;display:flex;gap:2px;margin:0;padding:0;flex-wrap:wrap;font-size:1.03rem}
.main-nav a{
  position:relative;display:block;padding:10px 15px;color:var(--ink-2);
  text-decoration:none;font-weight:700;transition:color .2s;
}
.main-nav a::after{
  content:"";position:absolute;inset-inline:12px;bottom:4px;height:2px;
  background:var(--brand);transform:scaleX(0);transform-origin:right center;
  transition:transform .35s var(--e-out);
}
.main-nav a:hover{color:var(--ink)}
.main-nav a:hover::after,.main-nav .current-menu-item>a::after{transform:scaleX(1)}
.main-nav .current-menu-item>a{color:var(--ink);font-weight:700}

.nav-toggle{
  display:none;background:var(--ink);color:var(--brand);border:0;
  padding:12px 20px;font-family:inherit;font-size:.99rem;font-weight:700;cursor:pointer;
  transition:background .2s;
}
.nav-toggle:hover{background:var(--steel-2)}
@media (max-width:980px){
  .nav-toggle{display:block}
  .site-header .wrap{gap:12px}
  .main-nav{display:none;width:100%;order:3}
  .main-nav.open{display:block;animation:fade-up .4s var(--e-out)}
  .main-nav ul{flex-direction:column;gap:0;padding-top:10px;border-top:1px solid var(--line)}
  .main-nav a{padding:14px 4px;border-bottom:1px solid var(--line)}
  .main-nav a::after{inset-inline:4px;bottom:0}
}
@media (max-width:560px){
  .brand .en{display:none}
  .brand img{height:42px}
  .brand .ar{font-size:1.43rem}
  .nav-toggle{padding:10px 15px;font-size:.95rem}
  :root{--gut:18px}
}

/* ═══════════════════════════════════════════════════════════
   الأزرار — التعبئة تكتسح من اليمين عند التمرير
   ═══════════════════════════════════════════════════════════ */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 34px;font-family:inherit;font-size:1.1rem;font-weight:700;
  text-decoration:none;cursor:pointer;line-height:1.3;
  background:var(--brand);color:var(--ink);border:1px solid var(--ink);
  border-radius:0;box-shadow:3px 3px 0 var(--ink);
  transition:transform .22s var(--e-out),box-shadow .22s var(--e-out),color .28s;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:scaleX(0);transform-origin:right center;
  transition:transform .42s var(--e-out);
}
.btn:hover{transform:translate(2px,-2px);box-shadow:5px 5px 0 var(--ink);color:var(--brand)}
.btn:hover::before{transform:scaleX(1)}
.btn:active{transform:translate(0,0);box-shadow:1px 1px 0 var(--ink)}

.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--brand);box-shadow:3px 3px 0 var(--brand)}
.btn.dark::before{background:var(--brand)}
.btn.dark:hover{color:var(--ink);box-shadow:5px 5px 0 var(--brand)}

.btn.line{background:transparent;border-color:rgba(244,241,230,.5);color:#F4F1E6;box-shadow:none}
.btn.line::before{background:#F4F1E6}
.btn.line:hover{color:var(--ink);border-color:#F4F1E6;box-shadow:3px 3px 0 rgba(244,241,230,.35)}

.btn.ghost{background:transparent;border-color:var(--ink);color:var(--ink);box-shadow:none}
.btn.ghost::before{background:var(--ink)}
.btn.ghost:hover{color:var(--brand);box-shadow:3px 3px 0 var(--ink)}

.btns{display:flex;gap:15px;flex-wrap:wrap}

/* ═══════════════════════════════════════════════════════════
   الواجهة — تركيبة مركزية، الصورة ملء الشاشة والعنوان في الوسط

   العنوان لم يعد محشوراً في جهة: العمود مركزي بعرض 60rem كحد أقصى،
   والكتلة كلها متوازنة حول محور الصفحة. الطبقات من الخلف للأمام:
   صورة (بارالاكس + زوم بطيء) ← تدرّج وصبغة ← شبكة هندسية ← مسح ضوئي ← النص.
   ═══════════════════════════════════════════════════════════ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--void);
  min-height:clamp(600px,90vh,980px);
  min-height:clamp(600px,90svh,980px);
  display:grid;place-items:center;
}
.hero-bg{position:absolute;inset:-10% 0;z-index:0;will-change:transform}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.68) contrast(1.14) brightness(.72);
  animation:ken-burns 26s var(--e-out) both;
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,9,5,.62) 0%,rgba(10,9,5,.74) 34%,rgba(10,9,5,.95) 82%,var(--void) 100%),
    radial-gradient(ellipse 110% 75% at 50% 0%,rgba(254,219,3,.15),transparent 62%);
}
/* قرص الشمس — الشكل الذي يقف خلف الرافعة في الشعار، يعود هنا خلف
   العنوان: هالة دافئة وحلقة قياس متقطّعة تدور ببطء. */
.hero-sun{
  position:absolute;z-index:1;pointer-events:none;
  top:50%;left:50%;transform:translate(-50%,-56%);
  width:min(78vw,900px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(254,219,3,.19),rgba(254,219,3,.06) 52%,transparent 70%);
}
.hero-sun::before{
  content:"";position:absolute;inset:11%;border-radius:50%;
  border:1px dashed rgba(254,219,3,.2);
  animation:spin 120s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* شبكة هندسية عند الأطراف، تنحسر خلف النص */
.hero-grid{
  position:absolute;inset:0;z-index:1;pointer-events:none;color:rgba(244,241,230,.08);
  background-image:var(--graph);background-size:68px 68px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 50%,transparent 18%,#000 92%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 50%,transparent 18%,#000 92%);
}
/* مسح ضوئي يمرّ مرّة واحدة عند التحميل */
.hero-sweep{
  position:absolute;inset-inline:0;top:0;height:38vh;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(254,219,3,.14) 45%,transparent);
  animation:sweep-down 3.6s var(--e-io) .35s 1 both;
}
.hero .reg{color:rgba(254,219,3,.55)}
.hero .reg.tl{top:26px;inset-inline-start:26px}
.hero .reg.tr{top:26px;inset-inline-end:26px}
.hero .reg.bl{bottom:64px;inset-inline-start:26px}
.hero .reg.br{bottom:64px;inset-inline-end:26px}

.hero .wrap{position:relative;z-index:3;width:100%;padding-block:clamp(72px,10vh,120px)}
.hero-copy{max-width:min(100%,68rem);margin-inline:auto;text-align:center}

.hero-copy .kicker{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(254,219,3,.45);background:rgba(254,219,3,.09);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--brand);font-size:.9rem;font-weight:700;line-height:1;
  padding:10px 20px;margin:0 0 clamp(20px,3vh,30px);border-radius:99px;
  animation:fade-up .8s var(--e-out) .15s both;
}
.hero-copy .kicker::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);
  animation:pulse-dot 2.1s ease-in-out infinite;
}

.hero-copy h1{
  font-size:clamp(2.75rem,5.94vw,5.06rem);
  line-height:1.34;font-weight:700;letter-spacing:0;
  margin:0 0 clamp(20px,3vh,30px);color:#FCFAF2;text-wrap:balance;
}
.hero-copy h1 mark{
  position:relative;z-index:0;background:none;color:var(--brand);
  white-space:nowrap;padding:0 .12em;transition:color .3s var(--e-out) var(--mark-delay,.85s);
}
.hero-copy h1 mark::before{
  content:"";position:absolute;inset:.04em -.06em -.13em;background:var(--brand);z-index:-1;
  transform:scaleX(0);transform-origin:right center;
}
.js .kinetic.go mark{color:var(--ink)}
.js .kinetic.go mark::before{transform:scaleX(1);transition:transform .75s var(--e-out) var(--mark-delay,.85s)}
.no-js .hero-copy h1 mark,html:not(.js) .hero-copy h1 mark{color:var(--ink)}
.no-js .hero-copy h1 mark::before,html:not(.js) .hero-copy h1 mark::before{transform:scaleX(1)}

.hero-copy .lede{
  font-size:clamp(1.18rem,1.7vw,1.38rem);line-height:1.85;font-weight:500;
  color:rgba(244,241,230,.88);max-width:58ch;margin:0 auto clamp(26px,4vh,40px);
  animation:fade-up .9s var(--e-out) .95s both;
}
.hero-copy .btns{justify-content:center;animation:fade-up .9s var(--e-out) 1.1s both}

.hero-scroll{
  position:absolute;bottom:52px;inset-inline-start:50%;transform:translateX(-50%);
  z-index:4;display:grid;justify-items:center;gap:9px;text-decoration:none;
  color:rgba(244,241,230,.65);font-size:.82rem;font-weight:700;
  animation:fade-in 1s var(--e-out) 1.6s both;
}
.hero-scroll:hover{color:var(--brand)}
.hero-scroll .arr{width:1px;height:40px;background:linear-gradient(to bottom,transparent,var(--brand));animation:bob 2.4s ease-in-out infinite}
@media (max-width:760px){
  .hero{min-height:auto}
  .hero .wrap{padding-block:80px 88px}
  .hero-scroll,.hero .reg{display:none}
}
@media (max-width:520px){
  .btns{flex-direction:column;align-items:stretch;width:100%}
  .btn{width:100%}
  .hero-copy .lede{font-size:1.15rem}
}

/* ═══════════════════════════════════════════════════════════
   الشريط المتحرّك — الأسطول يمرّ أمام العين
   ═══════════════════════════════════════════════════════════ */
.ticker{
  position:relative;z-index:3;overflow:hidden;direction:ltr;
  background:var(--ink);color:var(--brand);
  border-bottom:1px solid rgba(254,219,3,.22);
  padding-block:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker-track{display:flex;width:max-content;direction:ltr;animation:tick 46s linear infinite;will-change:transform}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
.ticker-item{
  display:inline-flex;align-items:center;gap:14px;padding-inline:24px;
  font-size:1.02rem;font-weight:700;white-space:nowrap;
  direction:rtl;unicode-bidi:isolate;
}
.ticker-item b{font-weight:700;font-variant-numeric:tabular-nums}
.ticker-item span{color:rgba(254,219,3,.92);font-weight:500}
.ticker-item::after{content:"";width:5px;height:5px;background:var(--brand);transform:rotate(45deg);opacity:.65;flex:none}
@keyframes tick{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ═══════════════════════════════════════════════════════════
   شريط الأرقام تحت الواجهة
   ═══════════════════════════════════════════════════════════ */
.hero-strip{
  position:relative;z-index:3;background:var(--steel);color:#F4F1E6;
  display:grid;grid-template-columns:repeat(4,1fr);
  isolation:isolate;
}
.hero-strip::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  color:rgba(254,219,3,.14);background-image:var(--halftone);background-size:18px 18px;opacity:.5;
}
.hero-strip .cell{
  padding:clamp(26px,3.6vw,42px) clamp(18px,2.4vw,30px);
  border-inline-start:1px solid rgba(244,241,230,.09);position:relative;
}
.hero-strip .cell:first-child{border-inline-start:0}
.hero-strip .cell::after{
  content:"";position:absolute;inset-block-start:0;inset-inline-end:0;height:3px;width:100%;
  background:var(--brand);transform:scaleX(0);transform-origin:right center;
  transition:transform .9s var(--e-out);
}
.hero-strip .cell.in::after{transform:scaleX(1)}
.hero-strip .n{
  font-size:clamp(2.31rem,4.24vw,3.63rem);font-weight:700;line-height:1;display:block;
  color:var(--brand);font-variant-numeric:tabular-nums;letter-spacing:0;
}
.hero-strip .n sup{font-size:.42em;vertical-align:super;margin-inline-start:2px;font-weight:700}
.hero-strip .l{font-size:1.05rem;font-weight:500;color:rgba(244,241,230,.78);margin-top:10px;display:block;line-height:1.55}
@media (max-width:760px){
  .hero-strip{grid-template-columns:repeat(2,1fr)}
  .hero-strip .cell:nth-child(3){border-inline-start:0}
  .hero-strip .cell:nth-child(n+3){border-top:1px solid rgba(244,241,230,.09)}
}

/* شريط أرقام المشروع (صفحة داخلية) */
.statband{background:var(--void);color:#F4F1E6}
.statband .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;padding-inline:0}
.sb{padding:clamp(38px,5vw,62px) 20px;text-align:center;position:relative}
.sb + .sb::before{content:"";position:absolute;inset-block:20%;inset-inline-start:0;width:1px;background:rgba(254,219,3,.3)}
.sb .n{font-size:clamp(2.86rem,6.36vw,5.06rem);font-weight:700;color:var(--brand);line-height:1;display:block;margin-bottom:8px;font-variant-numeric:tabular-nums}
.sb .n sup{font-size:.42em;vertical-align:super;margin-inline-start:2px}
.sb .l{font-size:1.08rem;color:rgba(244,241,230,.8);font-weight:500}
@media (max-width:760px){
  .statband .wrap{grid-template-columns:repeat(2,1fr)}
  .sb:nth-child(3)::before,.sb:nth-child(1)::before{display:none}
  .sb:nth-child(n+3){border-top:1px solid rgba(244,241,230,.14)}
}

/* ═══════════════════════════════════════════════════════════
   الأقسام
   ═══════════════════════════════════════════════════════════ */
.section{padding-block:clamp(64px,8vw,118px);position:relative;overflow:hidden}
.section > .wrap{position:relative;z-index:1}
.section.tint{background:var(--brand-wash)}
.section.white{background:var(--paper);border-block:1px solid var(--line)}
.section.dark{background:var(--void);color:#F4F1E6}

/* قسم الأعمال — خلفية صناعية داكنة راقية */
.section-jobs{
  background:var(--void);
  color:#F4F1E6;
  position:relative;
  border-block:none;
}
.section-jobs::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  color:rgba(254,219,3,.06);opacity:1;
  background-image:var(--graph);background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 95% 80% at 50% 40%,#000 30%,transparent 100%);
  mask-image:radial-gradient(ellipse 95% 80% at 50% 40%,#000 30%,transparent 100%);
}
.section-jobs .sec-head h2{color:#FCFAF2}
.section-jobs .sec-head p,.section-jobs .jobs-head-desc{color:rgba(244,241,230,.72)}
.section-jobs .sec-head .eyebrow{color:var(--brand)}

.sec-head{margin:0 0 clamp(42px,5.4vw,72px);max-width:66ch;position:relative}
.sec-head .eyebrow{
  display:inline-block;position:relative;margin:0 0 17px;padding-bottom:10px;
  font-size:.88rem;font-weight:700;color:var(--mute);letter-spacing:0;background:none;
}
.sec-head .eyebrow::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--brand);
  transform:scaleX(0);transform-origin:right center;transition:transform .85s var(--e-out) .18s;
}
.sec-head.in .eyebrow::after{transform:scaleX(1)}
html:not(.js) .sec-head .eyebrow::after{transform:scaleX(1)}
.sec-head h2{
  font-size:clamp(2.2rem,4.88vw,4.07rem);font-weight:700;line-height:1.32;
  letter-spacing:0;margin:0 0 15px;text-wrap:balance;
}
.sec-head p{color:var(--mute);margin:0;font-size:1.2rem;font-weight:500;max-width:58ch;line-height:1.85}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center p{margin-inline:auto}
.section.dark .sec-head h2{color:#FCFAF2}
.section.dark .sec-head p{color:rgba(244,241,230,.8)}
.section.dark .sec-head .eyebrow{color:var(--brand)}

/* ═══════════════════════════════════════════════════════════
   الرسم الهندسي المتحرّك — هندسة الرفعة

   مخطط فني لرافعة متحرّكة: الذراع يُرسم سطراً سطراً، الحبل ينزل،
   الحمل يتأرجح، وخطوط القياس تظهر بعده. كل شيء SVG — لا فيديو ولا صور.
   ═══════════════════════════════════════════════════════════ */
.schema{position:relative;width:100%;margin-inline:auto;max-width:980px}
.schema svg{width:100%;height:auto;display:block;overflow:visible}

.cs-grid{color:rgba(254,219,3,.1)}
.cs-grid line{stroke:currentColor;stroke-width:1}
.cs-ground{stroke:var(--brand);stroke-width:2.5;stroke-linecap:round}
.cs-hatch{stroke:rgba(244,241,230,.24);stroke-width:1.4;stroke-linecap:round}
.cs-body{fill:none;stroke:rgba(244,241,230,.85);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.cs-fill{fill:rgba(244,241,230,.08)}
.cs-wheel{fill:none;stroke:rgba(244,241,230,.7);stroke-width:2.2}
.cs-boom,.cs-rope,.cs-arc,.cs-dimline,.cs-range{
  fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;
}
.cs-boom{stroke:var(--brand);stroke-width:6}
.cs-boom-in{stroke:var(--void);stroke-width:1.4;stroke-dasharray:100;stroke-dashoffset:100}
.cs-rope{stroke:rgba(244,241,230,.75);stroke-width:1.8}
.cs-arc{stroke:rgba(254,219,3,.6);stroke-width:1.6;stroke-dasharray:100}
.cs-range{stroke:rgba(254,219,3,.34);stroke-width:1.6}
.schema.in .cs-range{animation:draw 1s var(--e-out) 1.7s forwards}
.cs-dimline{stroke:rgba(244,241,230,.42);stroke-width:1.3}
.cs-tick{stroke:rgba(244,241,230,.42);stroke-width:1.3;stroke-linecap:round}
.cs-load{fill:var(--brand);stroke:var(--void);stroke-width:2}
.cs-hook{fill:none;stroke:rgba(244,241,230,.8);stroke-width:2;stroke-linecap:round}
.cs-node{fill:var(--brand)}
.cs-label{
  font-family:var(--font);font-size:16px;font-weight:700;
  fill:rgba(244,241,230,.7);opacity:0;
}
.cs-label.hi{fill:var(--brand);font-weight:700}
.cs-num{font-family:var(--font);font-size:14px;font-weight:700;fill:var(--void)}

/* التشغيل عند الظهور */
.schema.in .cs-boom{animation:draw 1.15s var(--e-out) .15s forwards}
.schema.in .cs-boom-in{animation:draw 1.15s var(--e-out) .3s forwards}
.schema.in .cs-rope{animation:draw .7s var(--e-out) 1.15s forwards}
.schema.in .cs-arc{animation:draw .8s var(--e-out) 1.5s forwards}
.schema.in .cs-dimline{animation:draw .9s var(--e-out) 1.6s forwards}
.schema.in .cs-swing{animation:sway 4.6s ease-in-out 1.9s infinite;transform-origin:var(--ox,250px) var(--oy,92px)}
.schema.in .cs-label{animation:fade-in .7s ease 1.8s forwards}
.schema.in .cs-tick{animation:fade-in .6s ease 1.75s both}
.schema .cs-tick{opacity:0}
html:not(.js) .cs-boom,html:not(.js) .cs-boom-in,html:not(.js) .cs-rope,
html:not(.js) .cs-arc,html:not(.js) .cs-dimline,html:not(.js) .cs-range{stroke-dashoffset:0}
html:not(.js) .cs-label,html:not(.js) .cs-tick{opacity:1}

/* بطاقات الأرقام الثلاثة بجانب الرسم */
.geo{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4.4vw,64px);align-items:center}
@media (max-width:920px){.geo{grid-template-columns:1fr}}
.geo-keys{display:flex;flex-direction:column;gap:2px;background:rgba(244,241,230,.1)}
.geo-key{background:var(--void);padding:22px 24px;position:relative;overflow:hidden}
.geo-key::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--brand);
  transform:scaleY(0);transform-origin:top;transition:transform .7s var(--e-out);
}
.geo-key.in::before{transform:scaleY(1)}
.geo-key h3{font-size:1.25rem;font-weight:700;margin:0 0 7px;color:var(--brand)}
.geo-key p{margin:0;font-size:1.15rem;color:rgba(244,241,230,.82);font-weight:500;line-height:1.82}

/* ═══════════════════════════════════════════════════════════
   سلّم الحمولات — لوح قياس لا بطاقات
   ═══════════════════════════════════════════════════════════ */
.ladder{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.rung{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:minmax(190px,270px) 1fr auto;align-items:center;gap:26px;
  background:var(--card);padding:19px 26px;text-decoration:none;color:inherit;
  transition:color .25s;
}
.rung::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--brand-wash);
  transform:scaleX(0);transform-origin:right center;transition:transform .5s var(--e-out);
}
.rung:hover::before,.rung:focus-visible::before{transform:scaleX(1)}
.rung .name{font-size:1.22rem;font-weight:700;letter-spacing:0;line-height:1.4}
.rung .name small{display:block;color:var(--mute);font-size:1.02rem;font-weight:500;margin-top:4px;letter-spacing:0}

.track{position:relative;height:26px;background:rgba(14,13,8,.06);overflow:hidden}
.track::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(14,13,8,.14) 1px,transparent 1px);
  background-size:10% 100%;
}
.fill{
  position:absolute;inset-block:0;inset-inline-start:0;min-width:8px;overflow:hidden;
  background:linear-gradient(270deg,var(--brand-deep),var(--brand));
  transition:width 1.4s var(--e-out);
}
.fill::after{
  content:"";position:absolute;inset-block:0;width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  animation:shimmer 3.2s ease-in-out 1.4s infinite;
}
.js .fill[data-width]{width:0}
.fill.pending{
  background:repeating-linear-gradient(135deg,var(--line-2) 0 6px,transparent 6px 12px);
  border:1px dashed var(--line-2);
}
.fill.pending::after{display:none}

.rung .val{font-variant-numeric:tabular-nums;font-size:1.65rem;font-weight:700;white-space:nowrap;min-width:5.6ch;text-align:start;letter-spacing:0}
.rung .val em{font-style:normal;font-size:.58em;color:var(--mute);font-weight:500;margin-inline-start:4px}
.rung .val.ask{font-size:.92rem;font-weight:500;color:var(--mute);background:rgba(14,13,8,.05);padding:6px 12px}
.scale-note{display:flex;justify-content:space-between;margin-top:14px;font-size:.95rem;color:var(--faint);font-variant-numeric:tabular-nums}
@media (max-width:680px){
  .rung{grid-template-columns:1fr auto;gap:12px 14px;padding:16px}
  .rung .val{text-align:end}
  .track{grid-column:1/-1;order:3}
}

/* ═══════════════════════════════════════════════════════════
   وهج يتبع المؤشّر — يُضاف للبطاقات كلها
   ═══════════════════════════════════════════════════════════ */
.sector,.unit,.job,.bcard,.step{position:relative;isolation:isolate}
.sector::after,.unit::after,.job::after,.bcard::after,.step::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(254,219,3,.22),transparent 62%);
  transition:opacity .4s var(--e-out);
}
.sector:hover::after,.unit:hover::after,.job:hover::after,.bcard:hover::after,.step:hover::after{opacity:1}

/* ═══════════════════════════════════════════════════════════
   القطاعات
   ═══════════════════════════════════════════════════════════ */
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:1000px){.sectors{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.sectors{grid-template-columns:1fr}}
.sector{
  background:var(--card);padding:38px 32px 40px;text-decoration:none;color:inherit;display:block;
  transition:background .3s var(--e-out),transform .3s var(--e-out);
}
.sector:hover{background:var(--brand-wash);transform:translateY(-4px);z-index:2;box-shadow:var(--shadow-2)}
.sector .ico{
  position:relative;width:60px;height:60px;background:var(--brand);
  display:grid;place-items:center;margin-bottom:20px;
  transition:transform .45s var(--e-spring);
}
.sector:hover .ico{transform:rotate(-6deg) scale(1.06)}
.sector .ico::after{
  content:"";position:absolute;inset-block-end:-1px;inset-inline-start:-1px;
  width:0;height:0;border-inline-start:12px solid var(--ink);border-top:12px solid transparent;
}
.sector .ico svg{width:30px;height:30px;stroke:var(--ink);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sector h3{font-size:1.35rem;font-weight:700;margin:0 0 12px;letter-spacing:0;line-height:1.4}
.sector p{margin:0 0 18px;font-size:1.15rem;color:var(--mute);line-height:1.82;font-weight:500}
.sector .count{
  font-size:.92rem;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;
  border:1px solid var(--line-2);padding:5px 12px;display:inline-block;transition:background .25s,border-color .25s;
}
.sector:hover .count{background:var(--brand);border-color:var(--brand)}

/* ═══════════════════════════════════════════════════════════
   كيف نعمل — أربع خطوات موصولة بخط يُرسم
   ═══════════════════════════════════════════════════════════ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{background:var(--card);padding:34px 28px 36px;transition:background .3s}
.step:hover{background:var(--brand-wash)}
.step .num{
  position:relative;font-size:.99rem;font-weight:700;font-variant-numeric:tabular-nums;
  width:38px;height:38px;background:var(--ink);color:var(--brand);
  display:grid;place-items:center;margin-bottom:18px;
}
.step .num::after{
  content:"";position:absolute;top:50%;inset-inline-end:100%;height:1px;width:0;
  background:var(--brand);transition:width .7s var(--e-out) .25s;
}
.step.in .num::after{width:28px}
.step:first-child .num::after{display:none}
.step h3{font-size:1.3rem;font-weight:700;margin:0 0 10px;line-height:1.45}
.step p{margin:0;font-size:1.15rem;color:var(--mute);line-height:1.82;font-weight:500}
@media (max-width:920px){.step .num::after{display:none}}

/* ═══════════════════════════════════════════════════════════
   خريطة التغطية
   ═══════════════════════════════════════════════════════════ */
.coverage{display:grid;gap:clamp(24px,3.4vw,40px)}
.branch-list{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:900px){.branch-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.branch-list{grid-template-columns:1fr}}
.map-wrap{background:var(--card);border:1px solid var(--line);padding:16px;box-shadow:var(--shadow-2);overflow:hidden;position:relative}
.map-wrap::before{
  content:"";position:absolute;inset:0;pointer-events:none;color:var(--line-2);opacity:.45;
  background-image:var(--graph);background-size:26px 26px;
}
.qmap{width:100%;height:auto;display:block;background:transparent;position:relative}

/* ── خريطة التغطية الوطنية ─────────────────────────────── */
/* كل المناطق مظلّلة: التغطية وطنية لا محصورة في فروع. */
.sa-region{fill:#EADBAE;stroke:#FFFDF4;stroke-width:1.8;stroke-linejoin:round}
/* القصيم — المقر — بلون الهوية كاملاً */
.sa-qassim{fill:var(--brand);stroke:var(--ink);stroke-width:2.8;stroke-linejoin:round}

/* أقواس الإرسال: تُرسم من المقر بالتتابع */
.sa-route{
  fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;opacity:.5;
  stroke-dasharray:100;stroke-dashoffset:100;
}
.in .sa-route{animation:draw 1.15s var(--e-out) forwards;animation-delay:calc(.25s + var(--i) * .13s)}

/* الوجهات: تظهر بعد وصول القوس إليها */
.sa-dest{opacity:0}
.in .sa-dest{animation:fade-up .65s var(--e-out) forwards;animation-delay:calc(.8s + var(--i) * .13s)}
.sa-dest-dot{fill:var(--ink);stroke:var(--card);stroke-width:3}
.sa-dest-tag{fill:var(--card);stroke:var(--line-2);stroke-width:1.5}
.sa-dest-lbl{font-family:var(--font);font-size:19px;font-weight:700;fill:var(--ink-2)}

/* المقر */
.sa-hq-halo{fill:var(--brand);opacity:.32}
.sa-hq-dot{fill:var(--ink);stroke:var(--brand);stroke-width:4}
.sa-hq-tag{fill:var(--ink)}
.sa-hq-stem{stroke:var(--ink);stroke-width:2}
.sa-hq-lbl{font-family:var(--font);font-size:21px;font-weight:900;fill:var(--brand)}
.qpulse{fill:none;stroke:var(--brand);stroke-width:3;opacity:0}
.in .qpulse{animation:qping 3s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes qping{0%{r:12;opacity:.9}70%{r:52;opacity:0}100%{opacity:0}}

.sa-country-lbl{font-family:var(--font);font-size:21px;font-weight:700;fill:var(--faint)}
.qnorth-arrow{fill:var(--ink)}
.qnorth-n{font-family:var(--font);font-size:15px;font-weight:700;fill:var(--mute)}

/* ── أرقام التواصل ─────────────────────────────────────── */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:900px){.numbers{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.numbers{grid-template-columns:1fr}}
.num-card{
  position:relative;isolation:isolate;background:var(--card);
  padding:24px 22px;display:flex;flex-direction:column;gap:7px;
  text-decoration:none;color:inherit;transition:background .28s;
  border-radius:var(--r);
}
.num-card:hover{background:var(--brand-wash)}
.num-card .role{font-size:.95rem;color:var(--mute);font-weight:500}
.num-card .hint{font-size:.88rem;color:var(--faint);font-weight:500}
.num-card .tel{
  font-size:1.55rem;font-weight:700;font-variant-numeric:tabular-nums;
  direction:ltr;unicode-bidi:isolate;letter-spacing:0;
}
.num-card::after{
  content:"";position:absolute;inset-block-start:0;inset-inline-end:0;height:3px;width:100%;
  background:var(--brand);transform:scaleX(0);transform-origin:right center;transition:transform .45s var(--e-out);
}
.num-card:hover::after{transform:scaleX(1)}

.bcard{
  background:var(--card);padding:22px 24px;border-radius:var(--r);
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;transition:background .28s;
}
.bcard:hover{background:var(--brand-wash)}
.bcard .nm{font-weight:700;font-size:1.3rem;line-height:1.4}
.bcard .nm span{display:block;font-size:.95rem;color:var(--faint);font-weight:500}
.bcard .tels{display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:4}
.bcard a{
  font-size:.95rem;font-weight:700;text-decoration:none;font-variant-numeric:tabular-nums;
  border:1px solid var(--line-2);color:var(--ink);padding:7px 13px;border-radius:var(--r);
  direction:ltr;transition:background .2s,border-color .2s;
}
.bcard a:hover{background:var(--brand);border-color:var(--brand)}

/* ═══════════════════════════════════════════════════════════
   بطاقات الأسطول
   ═══════════════════════════════════════════════════════════ */
.fleet{display:grid;grid-template-columns:repeat(auto-fill,minmax(312px,1fr));gap:22px}
.unit{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .3s var(--e-out),box-shadow .3s var(--e-out),border-color .3s;
}
.unit:hover{transform:translateY(-6px);box-shadow:var(--shadow-3);border-color:var(--ink)}
.unit:target{
  scroll-margin-top:100px;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(232,179,44,.4),var(--shadow-3);
  transform:translateY(-4px);
}
.unit .shot{aspect-ratio:16/9;overflow:hidden;background:var(--brand-wash);position:relative}
.unit .shot::after{
  content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,13,8,.28),transparent 55%);
  opacity:0;transition:opacity .4s;
}
.unit:hover .shot::after{opacity:1}
.unit .shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e-out)}
.unit:hover .shot img{transform:scale(1.06)}
.unit .body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:13px;flex:1}
.unit .model{font-size:1.28rem;font-weight:700;margin:0;letter-spacing:0;line-height:1.42}
.unit .model a{color:inherit;text-decoration:none;transition:color .2s}
.unit .model a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand);text-underline-offset:3px}
.unit .kind{font-size:1.08rem;color:var(--mute);margin:-6px 0 0;font-weight:500}
.specs{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:15px;border-top:1px solid var(--line)}
.chip{
  font-size:.92rem;font-weight:700;padding:6px 13px;font-variant-numeric:tabular-nums;
  background:rgba(14,13,8,.05);color:var(--ink-2);border-radius:var(--r);
}
.chip.cap{background:var(--brand);color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgba(14,13,8,.08)}
.chip.ask{background:transparent;border:1px dashed var(--line-2);color:var(--faint)}

.unit-sectors{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.sector-tag{
  font-size:.78rem;font-weight:600;padding:3px 8px;
  background:rgba(14,13,8,.05);color:var(--mute);text-decoration:none;
  transition:background .2s,color .2s;
}
.sector-tag:hover{background:var(--brand);color:var(--ink)}

.unit-foot{
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  margin-top:4px;padding-top:14px;border-top:1px solid var(--line);
}
.unit-btn-quote{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;background:var(--brand);color:var(--ink);
  font-weight:700;font-size:.9rem;text-decoration:none;
  border:1px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  transition:transform .2s var(--e-out),box-shadow .2s var(--e-out),background .2s,color .2s;
}
.unit-btn-quote:hover{
  transform:translate(1px,-1px);box-shadow:3px 3px 0 var(--ink);background:var(--ink);color:var(--brand);
}
.unit-btn-details{
  font-size:.88rem;font-weight:700;color:var(--ink-2);text-decoration:none;
  display:inline-flex;align-items:center;gap:4px;padding:6px 4px;
  transition:color .2s,transform .2s var(--e-out);
}
.unit-btn-details:hover{color:var(--ink);transform:translateX(-3px)}

.quote-preselected-notice{
  display:inline-flex;align-items:center;gap:10px;padding:12px 18px;
  background:var(--brand-soft);border-inline-start:4px solid var(--brand);
  margin-bottom:24px;font-size:.98rem;color:var(--ink);font-weight:500;
}
.quote-preselected-notice strong{font-weight:700}
.quote-preselected-notice .clear-unit{
  font-size:.84rem;color:var(--mute);text-decoration:underline;margin-inline-start:8px;font-weight:600;
}
.quote-preselected-notice .clear-unit:hover{color:var(--ink)}

/* ═══ الفلترة ══════════════════════════════════════════════ */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:34px}
.filters button{
  position:relative;overflow:hidden;isolation:isolate;
  font-family:inherit;font-size:1.02rem;font-weight:700;padding:11px 22px;cursor:pointer;
  background:var(--card);color:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r);
  transition:color .25s,border-color .25s;
}
.filters button::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--brand);
  transform:scaleX(0);transform-origin:right center;transition:transform .35s var(--e-out);
}
.filters button:hover{border-color:var(--ink);color:var(--ink)}
.filters button:hover::before{transform:scaleX(1)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--brand);font-weight:700}
.filters button[aria-pressed="true"]::before{display:none}
.no-results{color:var(--mute);padding:54px 0;text-align:center;font-size:1.15rem;font-weight:500}

/* ═══════════════════════════════════════════════════════════
   صفحة معدة
   ═══════════════════════════════════════════════════════════ */
.unit-hero{background:var(--brand-wash);padding-block:clamp(32px,4vw,56px) 0;position:relative;overflow:hidden}
.unit-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;color:var(--line-2);opacity:.45;
  background-image:var(--graph);background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 25%,transparent 100%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 25%,transparent 100%);
}
.unit-hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,52px);align-items:center}
@media (max-width:880px){.unit-hero .wrap{grid-template-columns:1fr}}
.unit-hero h1{font-size:clamp(2.04rem,4.66vw,3.52rem);font-weight:700;margin:0 0 10px;letter-spacing:0;line-height:1.24}
.unit-hero .kind{color:var(--mute);margin:0 0 24px;font-size:1.2rem;font-weight:500}
.unit-hero .shot{overflow:hidden;box-shadow:var(--shadow-3);border-radius:var(--r)}
.unit-hero .shot img{width:100%;aspect-ratio:16/10;object-fit:cover}

.spec-table{width:100%;border-collapse:collapse}
.spec-table th,.spec-table td{text-align:start;padding:16px 20px;border-bottom:1px solid var(--line);font-size:1.12rem}
.spec-table tr:nth-child(odd){background:rgba(14,13,8,.03)}
.spec-table th{color:var(--mute);font-weight:500;width:44%}
.spec-table td{font-variant-numeric:tabular-nums;font-weight:700}
.spec-table td.ask{color:var(--faint);font-weight:500;font-size:1.0rem}

.unit-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(26px,4vw,52px);align-items:start}
@media (max-width:880px){
  .unit-layout{grid-template-columns:1fr}
  .unit-cta{position:static;top:auto;margin-top:28px}
}
.unit-cta{
  background:var(--void);color:#F4F1E6;padding:34px 32px;position:sticky;top:98px;
  isolation:isolate;overflow:hidden;border:1px solid rgba(244,241,230,.1);border-radius:var(--r);
}
.unit-cta::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  color:rgba(254,219,3,.16);background-image:var(--halftone);background-size:18px 18px;opacity:.6;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 70%);
  mask-image:linear-gradient(to bottom,#000,transparent 70%);
}
.unit-cta h3{margin:0 0 12px;font-size:1.35rem;font-weight:700;color:#FCFAF2}
.unit-cta p{margin:0 0 24px;font-size:1.15rem;color:rgba(244,241,230,.82);font-weight:500;line-height:1.8}

/* منع أي نصوص سوداء أو أزرار غير متباينة داخل الكتل الداكنة */
.unit-cta .btn.ghost,
.on-dark .btn.ghost,
.section.dark .btn.ghost{
  background:transparent;
  border-color:rgba(244,241,230,.45);
  color:#F4F1E6;
  box-shadow:none;
}
.unit-cta .btn.ghost::before,
.on-dark .btn.ghost::before,
.section.dark .btn.ghost::before{
  background:var(--brand);
}
.unit-cta .btn.ghost:hover,
.on-dark .btn.ghost:hover,
.section.dark .btn.ghost:hover{
  color:var(--ink);
  border-color:var(--brand);
  box-shadow:3px 3px 0 rgba(254,219,3,.35);
}

.unit-cta .chip,
.on-dark .chip,
.section.dark .chip{
  background:rgba(244,241,230,.12);
  color:#F4F1E6;
  border:1px solid rgba(244,241,230,.2);
}
.unit-cta .chip:hover,
.on-dark .chip:hover,
.section.dark .chip:hover{
  background:var(--brand);
  color:var(--ink);
  border-color:var(--brand);
}
.unit-cta .chip.cap,
.on-dark .chip.cap,
.section.dark .chip.cap{
  background:var(--brand);
  color:var(--ink);
  border-color:var(--brand);
}
.unit-cta .spec-label,
.on-dark .spec-label,
.section.dark .spec-label{
  color:rgba(244,241,230,.78);
}
.section.dark a:not(.btn):not(.chip),
.on-dark a:not(.btn):not(.chip),
.unit-cta a:not(.btn):not(.chip){
  color:var(--brand);
}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:14px;margin-top:34px}
.gallery img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);border-radius:var(--r)}

@media (max-width:480px){
  .fleet{grid-template-columns:1fr;gap:16px}
  .unit .body{padding:18px 16px 20px}
  .unit-foot{grid-template-columns:1fr;gap:8px}
  .unit-btn-quote{width:100%;text-align:center}
  .unit-btn-details{justify-content:center}
  .spec-table th,.spec-table td{padding:11px 12px;font-size:.95rem}
  .filters button{padding:9px 14px;font-size:.88rem;flex:1 1 auto;text-align:center}
}

/* ═══════════════════════════════════════════════════════════
   الأعمال
   ═══════════════════════════════════════════════════════════ */

/* ═══ ترويسة قسم المشاريع المتوازنة ═════════════════════════ */
.jobs-head{
  display:grid;
  grid-template-columns:1.22fr 1fr;
  gap:clamp(32px,4.5vw,68px);
  align-items:end;
  max-width:none;
  margin-bottom:clamp(38px,5vw,58px);
}
.jobs-head-main .eyebrow{
  margin-bottom:14px;
}
.jobs-head-main h2{
  margin-bottom:14px;
}
.jobs-head-desc{
  font-size:1.15rem;
  color:var(--mute);
  line-height:1.85;
  font-weight:500;
  margin:0;
  max-width:56ch;
}
.jobs-head-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(244,241,230,.1);
  border:1px solid rgba(244,241,230,.1);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:none;
}
.jobs-stat{
  background:rgba(244,241,230,.04);
  padding:20px 14px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  transition:background .3s var(--e-out);
}
.jobs-stat:hover{
  background:rgba(254,219,3,.08);
}
.jobs-stat-val{
  font-family:var(--font-display);
  font-size:clamp(1.7rem,2.3vw,2.35rem);
  font-weight:700;
  color:var(--brand);
  line-height:1.1;
  margin-bottom:6px;
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  font-variant-numeric:tabular-nums;
}
.jobs-stat-val sup{
  font-size:.52em;
  color:var(--brand-dim);
  font-weight:800;
  margin-inline-start:2px;
  vertical-align:super;
}
.jobs-stat-val small{
  font-size:.44em;
  color:var(--brand-dim);
  font-weight:700;
  margin-inline-start:4px;
}
.jobs-stat-label{
  font-size:.86rem;
  font-weight:600;
  color:rgba(244,241,230,.6);
  line-height:1.45;
  text-wrap:balance;
}
@media (max-width:992px){
  .jobs-head{
    grid-template-columns:1fr;
    gap:28px;
    align-items:start;
  }
  .jobs-head-stats{
    width:100%;
  }
}
@media (max-width:480px){
  .jobs-head-stats{
    grid-template-columns:1fr;
  }
  .jobs-stat{
    padding:14px 18px;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    text-align:start;
  }
  .jobs-stat-val{
    margin-bottom:0;
  }
}

.jobs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(244,241,230,.08);
  border:1px solid rgba(244,241,230,.08);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:none;
}
@media (max-width:900px){
  .jobs{grid-template-columns:1fr}
}
.job{
  background:rgba(14,13,8,.7);
  padding:0 0 28px;
  transition:background .3s var(--e-out), transform .3s var(--e-out), box-shadow .3s var(--e-out);
  display:flex;
  flex-direction:column;
  position:relative;
  cursor:pointer;
}
.job > :not(.job-shot){
  padding-inline:clamp(20px,2.5vw,30px);
}
.job-shot{
  display:block;
  overflow:hidden;
  aspect-ratio:16/9;
  background:rgba(254,219,3,.05);
  margin-bottom:0;
  position:relative;
}
.job-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s var(--e-out), filter .5s;
  filter:brightness(0.92) contrast(1.05);
}
.job:hover .job-shot img{
  transform:scale(1.06);
  filter:brightness(1) contrast(1.1);
}
.job:hover{
  background:rgba(254,219,3,.06);
}
.job .where{
  font-size:1.32rem;
  font-weight:700;
  margin:22px 0 10px;
  line-height:1.42;
  position:relative;
  z-index:4;
  color:#FCFAF2;
}
.job .where a{
  color:#FCFAF2;
  text-decoration:none;
  background-image:linear-gradient(var(--brand),var(--brand));
  background-size:0 3px;
  background-position:100% 100%;
  background-repeat:no-repeat;
  transition:background-size .4s var(--e-out);
  padding-bottom:2px;
}
.job:hover .where a{
  background-size:100% 3px;
}
.job .what{
  font-size:1.12rem;
  color:rgba(244,241,230,.6);
  margin:0 0 20px;
  line-height:1.82;
  font-weight:500;
}
.job .kit{
  margin-top:auto;
  align-self:flex-start;
  font-size:.9rem;
  color:var(--brand);
  background:rgba(254,219,3,.08);
  border:1px solid rgba(254,219,3,.2);
  padding:6px 14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  border-radius:var(--r);
  transition:background .25s ease, border-color .25s ease;
}
.job:hover .kit{
  background:rgba(254,219,3,.15);
  border-color:rgba(254,219,3,.4);
}

/* ═══ مودال المشروع السينمائي ═══════════════════════════════ */
.job-modal-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,3vw,48px);
  opacity:0;pointer-events:none;transition:opacity .4s var(--e-out);
}
.job-modal-overlay.active{opacity:1;pointer-events:auto}
.job-modal{
  background:var(--void);border:1px solid rgba(254,219,3,.15);
  border-radius:calc(var(--r)*2);max-width:880px;width:100%;
  max-height:90vh;overflow-y:auto;position:relative;
  box-shadow:0 32px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(254,219,3,.08);
  transform:translateY(28px) scale(.97);transition:transform .4s var(--e-out);
}
.job-modal-overlay.active .job-modal{transform:translateY(0) scale(1)}
.job-modal-close{
  position:sticky;top:16px;float:inline-end;margin:16px;z-index:2;
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(244,241,230,.15);
  background:rgba(14,13,8,.8);color:#F4F1E6;font-size:1.4rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s;
}
.job-modal-close:hover{background:var(--brand);color:var(--void);border-color:var(--brand)}
.job-modal-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.job-modal-body{padding:clamp(24px,4vw,48px)}
.job-modal-title{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;color:#FCFAF2;margin:0 0 16px;line-height:1.35}
.job-modal-desc{font-size:1.18rem;color:rgba(244,241,230,.7);line-height:1.85;margin:0 0 28px;font-weight:500}
.job-modal-meta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px}
.job-modal-chip{
  font-size:.92rem;font-weight:700;color:var(--brand);
  background:rgba(254,219,3,.08);border:1px solid rgba(254,219,3,.2);
  padding:8px 18px;border-radius:var(--r);
}
.job-modal-actions{display:flex;flex-wrap:wrap;gap:14px}
.job-modal-actions .btn{flex:1;min-width:200px;text-align:center;justify-content:center}

/* ═══ أرقام المشروع ════════════════════════════════════════ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(162px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--brand-wash);padding:32px 28px}
.stat .n{font-size:clamp(2.42rem,4.45vw,3.52rem);font-weight:700;color:var(--ink);line-height:1;display:block;margin-bottom:8px;font-variant-numeric:tabular-nums}
.stat .l{font-size:1.05rem;color:var(--mute);font-weight:500}

/* ═══════════════════════════════════════════════════════════
   الإسناد الميداني
   ═══════════════════════════════════════════════════════════ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,62px);align-items:center}
@media (max-width:880px){.split{grid-template-columns:1fr}}
.split .shot{overflow:hidden;box-shadow:var(--shadow-3);position:relative;border-radius:var(--r)}
.split .shot img{width:100%;aspect-ratio:16/11;object-fit:cover;transition:transform 1.2s var(--e-out)}
.split .shot:hover img{transform:scale(1.04)}
.split .shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(14,13,8,.12);
  background:linear-gradient(115deg,transparent 60%,rgba(254,219,3,.16));
}
.points{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:20px}
.points li{display:grid;grid-template-columns:auto 1fr;gap:17px;align-items:start}
.points .n{
  position:relative;width:48px;height:48px;background:var(--brand);
  display:grid;place-items:center;flex-shrink:0;
}
.points .n::after{
  content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  width:0;height:0;border-inline-start:10px solid var(--ink);border-top:10px solid transparent;
}
.points .n svg{width:24px;height:24px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.points strong{display:block;font-weight:700;font-size:1.25rem;margin-bottom:4px;line-height:1.45}
.points .txt{font-size:1.15rem;color:var(--mute);line-height:1.82;font-weight:500}

/* ═══════════════════════════════════════════════════════════
   الخاتمة — شريطان متحرّكان يحيطان بالدعوة
   ═══════════════════════════════════════════════════════════ */
.close{background:var(--brand);color:var(--ink);text-align:center;position:relative;overflow:hidden;padding-block:0}
.close::before{
  content:"";position:absolute;inset:0;pointer-events:none;color:rgba(14,13,8,.16);
  background-image:var(--halftone);background-size:16px 16px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,transparent 25%,#000 95%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,transparent 25%,#000 95%);
}
.close .wrap{position:relative;z-index:2;padding-block:clamp(44px,6vw,76px)}
.close h2{font-size:clamp(2.2rem,5.09vw,4.07rem);font-weight:700;margin:0 0 18px;letter-spacing:0;line-height:1.34;text-wrap:balance}
.close p{color:rgba(14,13,8,.84);max-width:52ch;margin:0 auto 34px;font-size:1.22rem;font-weight:500;line-height:1.85}
.close .btns{justify-content:center}
.close .btn{background:var(--ink);border-color:var(--ink);color:var(--brand);box-shadow:3px 3px 0 rgba(14,13,8,.35)}
.close .btn::before{background:var(--brand)}
.close .btn:hover{color:var(--ink);box-shadow:5px 5px 0 rgba(14,13,8,.35)}
.close .btn.line{background:transparent;border-color:rgba(14,13,8,.4);color:var(--ink);box-shadow:none}
.close .btn.line::before{background:var(--ink)}
.close .btn.line:hover{color:var(--brand);border-color:var(--ink)}

.marquee{
  position:relative;z-index:1;overflow:hidden;padding-block:14px;direction:ltr;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{display:flex;width:max-content;direction:ltr;animation:tick 34s linear infinite;will-change:transform}
.marquee.rev .marquee-track{animation-direction:reverse;animation-duration:40s}
.marquee-track span{
  padding-inline:26px;white-space:nowrap;direction:rtl;unicode-bidi:isolate;
  font-size:clamp(1.98rem,5.3vw,4.29rem);font-weight:700;line-height:1.5;color:rgba(14,13,8,.14);
}
@supports (-webkit-text-stroke:1px black){
  .marquee-track span{color:transparent;-webkit-text-stroke:1.4px rgba(14,13,8,.32)}
}

/* ═══════════════════════════════════════════════════════════
   التذييل
   ═══════════════════════════════════════════════════════════ */
.site-footer{
  background:var(--void);color:rgba(244,241,230,.78);padding-block:44px;font-size:1.02rem;
  position:relative;isolation:isolate;overflow:hidden;
}
.site-footer::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  color:rgba(254,219,3,.14);background-image:var(--halftone);background-size:18px 18px;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 75%);
  mask-image:linear-gradient(to top,#000,transparent 75%);
}
.site-footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.site-footer .en{letter-spacing:.18em;font-size:.8rem;color:var(--brand);font-weight:700;direction:ltr}

/* ═══ واتساب ═══════════════════════════════════════════════ */
.wa{
  position:fixed;inset-block-end:24px;inset-inline-end:24px;z-index:65;
  width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;
  box-shadow:0 8px 26px rgba(37,211,102,.45);transition:transform .28s var(--e-spring);
}
.wa::before{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:wa-ring 2.6s var(--e-out) infinite;
}
@keyframes wa-ring{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.55);opacity:0}100%{opacity:0}}
.wa:hover{transform:scale(1.09)}
.wa svg{width:30px;height:30px;fill:#fff;position:relative}

/* ═══════════════════════════════════════════════════════════
   النموذج
   ═══════════════════════════════════════════════════════════ */
.quote-layout{display:grid;grid-template-columns:1.45fr .55fr;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:920px){.quote-layout{grid-template-columns:1fr}}
.quote-form .hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:20px}
.form-grid .field{margin:0;display:flex;flex-direction:column;gap:7px}
.form-grid .field.full{grid-column:1/-1}
.form-grid label{font-size:1.02rem;font-weight:700}
.form-grid .req{color:#C8321E}
.form-grid input,.form-grid select,.form-grid textarea{
  font-family:inherit;font-size:1.12rem;font-weight:500;background:var(--card);color:var(--ink);
  border:1px solid var(--line-2);padding:14px 16px;width:100%;border-radius:var(--r);
  transition:border-color .2s,box-shadow .2s;appearance:none;
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{
  border-color:var(--ink);outline:none;box-shadow:0 0 0 3px var(--brand-soft);
}
.form-grid input::placeholder,.form-grid textarea::placeholder{color:var(--faint);font-weight:500}
.form-grid textarea{resize:vertical;min-height:122px;line-height:1.75}
.form-grid select{
  background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:calc(0% + 18px) calc(50% + 1px),calc(0% + 23px) calc(50% + 1px);
  background-size:5px 5px;background-repeat:no-repeat;padding-inline-start:40px;
}
.form-grid input[type="date"]{direction:ltr;text-align:start}
.form-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.form-hint{font-size:1.02rem;color:var(--mute);font-weight:500}
.form-note{padding:17px 20px;margin-bottom:28px;font-size:1.1rem;font-weight:500;border-radius:var(--r)}
.form-note.ok{font-weight:700;background:var(--brand-soft);border-inline-start:4px solid var(--brand)}
.form-note.bad{background:#FDECE9;border-inline-start:4px solid #C8321E}
.quote-aside{background:var(--brand-wash);border:1px solid var(--line);padding:28px 26px;border-radius:var(--r)}
.quote-aside h2{font-size:1.28rem;font-weight:700;margin:0 0 20px}
.aside-branch{padding-block:15px;border-bottom:1px solid var(--line)}
.aside-branch:last-child{border-bottom:0;padding-bottom:0}
.aside-branch h3{font-size:1.12rem;font-weight:700;margin:0 0 9px}
.aside-branch ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.aside-branch a{
  font-size:.95rem;font-weight:700;text-decoration:none;background:var(--card);
  border:1px solid var(--line);padding:5px 12px;direction:ltr;display:block;transition:background .2s;border-radius:var(--r);
}
.aside-branch a:hover{background:var(--brand);border-color:var(--brand)}

/* ═══════════════════════════════════════════════════════════
   الترقيم والمحتوى
   ═══════════════════════════════════════════════════════════ */
.pagination{margin-top:50px}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center}
.pagination .page-numbers{
  font-size:1.02rem;font-weight:700;padding:11px 18px;border:1px solid var(--line-2);border-radius:var(--r);
  text-decoration:none;color:var(--ink-2);background:var(--card);transition:all .2s;
  font-variant-numeric:tabular-nums;
}
.pagination .page-numbers:hover{border-color:var(--ink);color:var(--ink);background:var(--brand-soft)}
.pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:var(--brand);font-weight:700}

.page-title{font-size:clamp(2.2rem,4.88vw,3.85rem);font-weight:900;margin:0 0 .45em;letter-spacing:0;line-height:1.26}
.page-body{max-width:72ch;font-size:1.2rem;font-weight:500;line-height:1.95}
.page-body h2{font-size:1.85rem;font-weight:900;margin:2em 0 .55em;line-height:1.35}
.page-body h3{font-size:1.4rem;font-weight:700;margin:1.8em 0 .45em;line-height:1.4}
.page-body p{margin:0 0 1.3em;color:var(--ink-2)}
.page-body ul,.page-body ol{color:var(--ink-2);padding-inline-start:1.35em}
.page-body li{margin-bottom:.55em}
.page-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:3px;text-underline-offset:3px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* الأنماط المساعدة للقوالب الفرعية والمفردة */
.spec-head{font-size:1.4rem;font-weight:700;margin:0 0 12px;font-family:var(--font-display)}
.spec-label{margin:22px 0 8px;font-size:.95rem;color:var(--mute);font-weight:500}
.unit-body{margin-top:34px}
.btns-stack{flex-direction:column}
.btns-stack .btn{justify-content:center}
.btns-top{margin-top:22px}
.specs-chips{border-top:0!important;padding-top:0!important}
.specs-chips .chip{text-decoration:none}
.section-flush{padding-bottom:0!important;border-bottom:0!important}
.project-client{color:var(--mute);margin:0;font-size:1.2rem;font-weight:500}
.project-kit{margin-top:28px;color:var(--mute);font-size:1.05rem;font-weight:500}
.sec-subhead{font-size:1.4rem;font-weight:700;margin:0 0 22px;font-family:var(--font-display)}
.sec-subhead-spaced{margin-top:46px}
.quote-lede{color:var(--mute);max-width:54ch;margin:0 0 30px;font-size:1.2rem;line-height:1.85}
.page-body-tight{margin-bottom:30px}

/* ═══════════════════════════════════════════════════════════
   احترام تقليل الحركة — كل ما سبق يتوقّف
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .kinetic .w > .i,.js .reveal .wipe{opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important}
  .js .kinetic.go mark::before,.hero-copy h1 mark::before{transform:scaleX(1)!important}
  .ticker-track,.marquee-track,.hazard,.hero-bg img,.hero-sweep,.wa::before,.fill::after,
  .hero-scroll .arr,.hero-copy .kicker::before,.in .qpulse,.schema.in .cs-swing,
  .hero-sun::before{animation:none!important}
  .hero-sweep{display:none}
  .cs-boom,.cs-boom-in,.cs-rope,.cs-arc,.cs-dimline,.cs-range{stroke-dashoffset:0!important;animation:none!important}
  .cs-label,.cs-tick{opacity:1!important;animation:none!important}
  .sec-head .eyebrow::after,.hero-strip .cell::after,.geo-key::before{transform:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ═══════════════════════════════════════════════════════════
   تثخين العناوين — وزن أعرض مما يملكه الخط

   أقصى وزن في ABC Favorit Arabic هو ٧٠٠، و«العريض» فيه معتدل بطبعه.
   لزيادة الثقل نضيف حدّاً خارجياً بلون الحرف نفسه، و`paint-order`
   يرسمه **تحت** التعبئة — فينمو الحرف للخارج فقط ولا تُبلع تجاويفه،
   وهذا فرق جوهري عن الحدّ الافتراضي الذي يتوسّط الحافة فيضيّقها.

   الحدّ لا يغيّر عرض الحرف المتريّ إطلاقاً، فلا يتزحزح أي تخطيط.

   المقادير بالـem لتتناسب مع حجم الخط تلقائياً. لتخفيف الثقل لاحقاً
   يكفي تصغير المتغيّرات الثلاثة أدناه.
   ═══════════════════════════════════════════════════════════ */
:root{
  /* صفر: العائلة الحالية فيها Black حقيقي بوزن ٩٠٠، فلا داعي
     للتثخين المفتعل. ارفعيها فقط لو عُدنا لخط يقف عند ٧٠٠. */
  --bold-xl:0;
  --bold-lg:0;
  --bold-md:0;
  --bold-sm:0;
}

.hero-copy h1{-webkit-text-stroke:var(--bold-xl) currentColor;paint-order:stroke fill}

.sec-head h2,
.close h2,
.page-title,
.unit-hero h1,
.hero-strip .n,
.sb .n,
.stat .n{-webkit-text-stroke:var(--bold-lg) currentColor;paint-order:stroke fill}

.sector h3,
.step h3,
.geo-key h3,
.job .where,
.unit .model,
.unit-cta h3,
.quote-aside h2,
.bcard .nm,
.points strong,
.rung .name,
.rung .val,
.page-body h2,
.page-body h3{-webkit-text-stroke:var(--bold-md) currentColor;paint-order:stroke fill}

.btn,
.nav-toggle,
.filters button[aria-pressed="true"]{-webkit-text-stroke:var(--bold-sm) currentColor;paint-order:stroke fill}

/* الرقم داخل صندوق الحمل في المخطط الهندسي */
.cs-num{-webkit-text-stroke:.02em currentColor;paint-order:stroke fill}

/* استثناءات: الشريط العملاق يستعمل الحدّ نفسه لتفريغ الحرف،
   والنص الصغير تُغلق تجاويفه لو ثُخّن — فيُترك كما هو. */
.marquee-track span{paint-order:normal}
.rung .val em,
.unit .kind,
.bcard .nm span,
.sector .count{-webkit-text-stroke:0}

/* ═══════════════════════════════════════════════════════════
   سلّم العرض — أين يُستعمل الوزن ٩٠٠ (Black)

   ٩٠٠ للعناوين الكبيرة والأرقام الضخمة فقط: هذه مواضع تُقرأ لمحةً
   لا قراءةً متصلة، فالثقل فيها قوّة لا عائق.
   ٧٠٠ لعناوين البطاقات والأزرار والقائمة.
   ٥٠٠ للمتن والفقرات — عريض خفيف.
   ═══════════════════════════════════════════════════════════ */
.hero-copy h1,
.sec-head h2,
.close h2,
.page-title,
.unit-hero h1,
.hero-strip .n,
.sb .n,
.stat .n,
.marquee-track span,
.brand .ar{font-weight:900;font-family:var(--font-display)}

/* عناوين البطاقات: نفس القَطع بوزن ٧٠٠ */
.sector h3,
.step h3,
.geo-key h3,
.job .where,
.unit .model,
.unit-cta h3,
.quote-aside h2,
.bcard .nm,
.page-body h2,
.page-body h3,
.sa-hq-lbl,
.sa-region-lbl,
.sec-subhead,
.spec-head{font-family:var(--font-display)}

/* العنوان الضخم بوزن ٩٠٠ يحتاج سطراً أضيق قليلاً — الكتلة صارت أثقل */
.hero-copy h1{line-height:1.34;word-spacing:.09em}
.sec-head h2{line-height:1.32;word-spacing:.07em}


/* Reviewed visitor journey and dimension planner. */
.service-strip{background:var(--ink);color:var(--paper);padding:18px 0}
.service-strip .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:1rem}
.service-strip span::before{content:'●';color:var(--brand);margin-inline-end:12px;font-size:.7rem}
.hero-image-note{position:absolute;bottom:26px;left:30px;z-index:2;color:#eee8d5;font-size:.76rem;background:#10181099;padding:3px 9px}
.fleet-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:42px;margin-bottom:35px}
.fleet-heading .sec-head{margin:0;max-width:670px}
.fleet-heading .btn{flex-shrink:0;margin-bottom:9px}
.fleet-featured{grid-template-columns:repeat(3,minmax(0,1fr))}
.fleet-note{font-size:.95rem;color:#586258;margin:25px 0 0}
.image-caption{position:absolute;bottom:8px;right:10px;background:#fffdf0de;color:#455042;padding:2px 8px;font-size:.72rem}
.unit .shot{position:relative}
.equipment-placeholder{display:flex;align-items:center;justify-content:center;min-height:190px;background:#eceee7;color:#596454;padding:24px;text-align:center}
.filters a{display:inline-flex;align-items:center;min-height:46px;padding:8px 18px;color:var(--ink);border:1px solid #bfc4b7;text-decoration:none;font-size:1rem}
.filters a[aria-current='page']{background:var(--ink);color:var(--brand);border-color:var(--ink)}
.fleet-filter-note{color:#53604f;font-size:.95rem}
.lift-section{background:#e7eae3}
.lift-intro{max-width:385px;margin:0;color:#4c584e;font-size:1.08rem}
.lift-steps{list-style:none;display:flex;padding:0;margin:0 0 25px;gap:40px;color:#344c3c;font-size:1rem}
.lift-steps b{font-family:monospace;color:#526b59;margin-inline-end:8px}
.lift-planner{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);direction:ltr;border:1px solid #bcc6ba;background:#f8faf5;box-shadow:0 12px 35px #2734250b}
.lift-stage{min-width:0;direction:rtl;align-self:start;background:#eef2ed}
.lift-stage-heading{display:flex;justify-content:space-between;align-items:center;padding:17px 24px;border-bottom:1px solid #cfd8cf;font-weight:700;font-size:1rem}
.lift-tag{font-size:.8rem;color:#536554;border:1px solid #acbda9;padding:2px 9px;font-weight:500}
#liftDrawing{display:block;width:100%;height:auto;overflow:visible;font-family:var(--font)}
#liftLoad{cursor:grab;touch-action:none}#liftLoad:active{cursor:grabbing}
.lift-drag-hint{font-size:.87rem;margin:0;padding:12px 22px 19px;color:#435e4d;border-top:1px solid #d3dcd1}
.lift-controls{direction:rtl;padding:24px 28px;border-left:1px solid #ccd5c9}
.lift-controls h3{font-size:1.3rem;margin:0 0 19px}
.lift-field{margin:0 0 22px}.lift-field-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.lift-field label{font-weight:700;font-size:1.02rem}.lift-number{display:flex;align-items:center;background:white;border:1px solid #a2b39d;border-radius:3px;overflow:hidden;direction:ltr}
.lift-number input{width:80px;height:43px;min-width:0;border:0;padding:8px;font:700 1.1rem monospace;background:white;color:#162a1b}
.lift-number span{padding:0 8px;color:#596b58;font-size:.9rem}
.lift-field input[type=range]{display:block;appearance:none;direction:ltr;width:100%;height:6px;margin:24px 0 17px;cursor:pointer;background:linear-gradient(to right,#71865d var(--range-progress,20%),#d8dfd3 var(--range-progress,20%));border-radius:10px}
.lift-field input[type=range]::-webkit-slider-thumb{appearance:none;width:24px;height:24px;border:3px solid #f8faf5;border-radius:50%;background:#284735;box-shadow:0 0 0 1px #7c9172}
.lift-field input[type=range]::-moz-range-thumb{width:20px;height:20px;border:3px solid #f8faf5;border-radius:50%;background:#284735}
.lift-field p{font-size:.82rem;color:#4e634e;margin:0;line-height:1.7}
.lift-reset{border:0;background:none;color:#3e593e;padding:8px 0;font:inherit;font-size:.88rem;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.lift-summary{direction:rtl;grid-column:1/-1;background:#233e2e;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:36px;padding:25px 30px}
.lift-summary .eyebrow{color:#cad5bc;font-size:.8rem}.lift-summary p{font-size:1.24rem;font-weight:700;margin:3px 0 6px}
.lift-summary small{display:block;max-width:600px;color:#d4decf;font-size:.85rem;line-height:1.8}
.lift-actions{display:flex;flex-direction:column;align-items:center;gap:12px;flex-shrink:0}.lift-actions .btn{font-size:1rem;padding:16px 22px}
.lift-wa{font-size:.88rem;color:#edf3df;text-underline-offset:4px}
.lift-error{color:#922b1c;font-size:.9rem}.lift-actions [aria-disabled=true]{opacity:.5}
:focus-visible{outline:3px solid #477653;outline-offset:4px}
.js .reveal{opacity:1;transform:none}
@media(max-width:980px){.fleet-heading{display:block}.fleet-heading .btn{margin-top:22px}.fleet-featured{grid-template-columns:repeat(3,minmax(0,1fr))}.lift-intro{max-width:600px;margin-top:22px}.lift-planner{grid-template-columns:minmax(0,1.25fr) minmax(250px,1fr)}.lift-controls{padding:20px}.lift-summary{gap:20px;padding:24px;flex-wrap:wrap}.lift-actions{align-items:flex-start}.lift-steps{gap:22px}}
@media(max-width:680px){.fleet-featured{grid-template-columns:1fr}.service-strip .wrap{gap:8px;flex-direction:column}.fleet-heading .sec-head h2{font-size:2.25rem}.lift-planner{grid-template-columns:1fr}.lift-controls{border-left:0;border-top:1px solid #ccd5c9}.lift-steps{gap:10px;justify-content:space-between;font-size:.82rem}.lift-steps li{max-width:100px}.lift-steps b{display:block}.lift-stage-heading{padding:12px 16px}.lift-summary{padding:22px 18px;gap:20px}.lift-summary p{font-size:1.08rem}.lift-actions{width:100%;align-items:stretch;text-align:center}.hero-image-note{bottom:10px;left:12px}.hero-scroll{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal,.js .reveal{opacity:1;transform:none}}
@media(max-width:980px){html:not(.js) .main-nav{display:block}html:not(.js) .nav-toggle{display:none}}
.lift-number:focus-within{outline:3px solid #477653;outline-offset:3px}
.lift-number input:focus-visible{outline:none}
.main-nav .nav-quote a{background:var(--brand);color:var(--ink);padding:10px 16px;border:1px solid var(--ink)}
@media(max-width:680px){#liftRadiusLabel,#liftHeightLabel{font-size:29px}#liftWeightLabel{font-size:24px}.lift-number input{font-size:16px}}

.lift-section .sec-head h2{font-size:clamp(2.1rem,3.7vw,3.3rem)}
.contact-fallback{background:var(--paper);color:var(--ink);padding:32px;text-align:right;margin-top:35px}
.close .contact-fallback p{color:var(--ink);max-width:none}.close .contact-fallback .field{margin:0}
@media(max-width:680px){.contact-fallback{padding:18px}}