:root{
  --sand:#DBE4FF;
  --sand-strong:#B7C4EA;
  --sand-light:#E8EEFF;
  --sand-bg:#F1F4FC;
  --ink:#0A0A0B;
  --bg:#DBE4FF;
  --paper: linear-gradient(135deg, #DBE4FF 0%, #B7C4EA 100%);
  --paper-2:#E8EEFF;
  --text:var(--ink);
  --body-text:var(--ink);
  /* darkened from the original #64748B / #94A3B8 — those measured 3.75:1
     and 2.02:1 against --sand (#DBE4FF), both under WCAG AA's 4.5:1 for
     normal text (muted-2 carries .form-note, small helper/hint text next
     to real form fields — it needs full AA, not just the 3:1 large-text
     minimum). These two clear 4.5:1+ against every background the site
     actually uses (sand, sand-bg, white). Dark mode's own muted/muted-2
     (below, in html.dark-mode) already passed and are untouched. */
  --muted:#475569;
  --muted-2:#566179;
  --card-border:#B7C4EA;
  --line:rgba(10, 10, 11, 0.12);
  --line-strong:rgba(10, 10, 11, 0.22);
  /* fixed-dark tokens: used only by the deliberate dark anchor elements
     (header, hero panel, contact card, mobile nav, toast, lightbox) —
     these never flip, regardless of the site being light or dark mode */
  --dark:#0A0A0B;
  --dark-2:#17171A;
  --dark-text:#FFFFFF;
  --dark-body:#E7E7EA;
  --dark-muted:#8A9BB8;
  --dark-line:rgba(255,255,255,.1);
  --shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5), 0 8px 16px -6px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 10px 30px rgba(15,23,42,.06);
  --shadow-hover: 0 20px 40px rgba(15,23,42,.10);
  --radius-btn: 12px;
  --radius-card: 20px;
  --radius-img: 24px;
  --radius-input: 14px;
  --radius-lg: 24px;
  --radius-md: 20px;
  --radius-sm: 12px;
  --container: 1140px;
  --font-heading-primary:"IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading-secondary:"IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:"IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-english:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* semantic status tokens — part of the Theme Variables system in the
     dashboard's Design Manager; change once here (or from the dashboard)
     and every status message/badge across the site follows */
  --success:#2e7d32;
  --warning:#b8960a;
  --danger:#c0392b;
  --info:#2e6da4;
  /* card shadow system — dark shadows read fine on the light paper
     background, but the exact same shadow is nearly invisible once the
     card itself turns dark, so dark mode needs a different recipe
     (lighter, glow-based) to keep that same "lifted card" elegance */
  --card-shadow:0 10px 26px rgba(20,20,35,.09);
  --card-shadow-hover:0 20px 40px rgba(20,20,35,.15);
}

/* Dark mode — swaps the same tokens every element already references, so
   nothing besides these variables needs to change. The "fixed-dark" anchor
   elements (header, hero, etc.) already look like this, so dark mode mostly
   just brings the rest of the page in line with them. Any color an admin
   has explicitly customized for a specific page/section (via the dashboard)
   still overrides these, exactly as it does in light mode. */
html.dark-mode{
  --bg:#0A0A0B;
  --paper: linear-gradient(150deg, #1B1B20 0%, #141417 60%, #0F0F12 100%);
  --paper-2:#1D1D21;
  --text:#FFFFFF;
  --body-text:#E7E7EA;
  --muted:#9C9CA3;
  --muted-2:#7A7A82;
  --line:rgba(255,255,255,.1);
  --line-strong:rgba(255,255,255,.18);
  --card-border:rgba(183,196,234,.35);
  --sand-bg:rgba(217,225,249,.08);
  --sand-light:rgba(217,225,249,.15);
  --danger:#ff6b6b; /* brighter red — the light-mode value reads too dark/muddy against dark cards */
  /* soft glow instead of a dark drop-shadow — a dark shadow is
     invisible once the surface under it is dark too, so depth here
     comes from a faint cool-toned glow instead */
  --card-shadow:0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05);
  --card-shadow-hover:0 20px 48px rgba(0,0,0,.55), 0 0 26px -6px rgba(217,225,249,.18), 0 0 0 1px rgba(217,225,249,.12);
}

*{box-sizing:border-box}
/* English mode uses its own default font (Plus Jakarta Sans) unless the
   admin explicitly overrides it — kept separate from the Arabic font
   settings so switching site language never fights with Arabic typography
   choices, and vice versa. */
html.lang-en body{ font-family:var(--font-english); }
html.lang-en h1, html.lang-en h2, html.lang-en h3{ font-family:var(--font-english); }
/* عناصر التحكم/القائمة العائمة أعلى الشاشة ثابتة الموضع دائمًا (position:
   fixed) بارتفاع تقريبي ~90px — هامش تمرير يمنع أي قسم مُستهدَف (Anchor)
   من الاختباء خلفها عند التمرير السلس إليه من رابط بالقائمة. */
html{scroll-behavior:smooth; scroll-padding-top:100px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--bg);
  background-attachment: fixed;
  color: var(--body-text);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing: antialiased;
}
h1{ font-family:var(--font-heading-primary); }
h2, h3, h4, h5, h6{ font-family:var(--font-heading-secondary); }
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

/* Branded keyboard-focus ring for links/buttons/controls that don't
   already define their own focus style (form fields keep their existing
   box-shadow focus below — a plain :focus-visible here loses to their
   more specific input:focus/.client-input-wrap input:focus rules, so
   this only fills the gap for nav links, buttons, and the fab/toggles).
   :focus-visible (not :focus) so it only shows for keyboard navigation,
   never on a mouse/touch click. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--sand-strong);
  outline-offset:2px;
}
/* pill buttons already use border-radius:999px — modern browsers shape
   the outline to match it automatically, so no override needed here */
p{margin:0 0 1em}
h1,h2,h3{margin:0; line-height:1.28; letter-spacing:-0.01em; color:var(--text);}
button,input,select,textarea{font:inherit}

.container{ width:min(var(--container), calc(100% - 48px)); margin-inline:auto; }
.container.narrow{ max-width:640px; }
.contact-grid-2col{ display:flex; flex-direction:column; }
@media (min-width:900px){
  .container.contact-wide{ max-width:980px; }
  .contact-grid-2col{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
  .contact-grid-2col .form-card{ margin-bottom:0; }
}


/* ---------- Header (عناصر تحكم عائمة، بلا شريط علوي تقليدي) ---------- */
/* إزالة إجبارية للشريط العلوي التقليدي (Header أفقي بخلفية/حدود/ظل ثابتة)
   — بدلاً منه عنصرا Header نفسه أصبح غير مرئي كليًا (بلا خلفية ولا
   sticky)، ويحوي فقط زر فتح القائمة بالجوال (.menu-toggle، مخفي بسطح
   المكتب/التابلت — راجع .sidebar-nav أدناه). عناصر التحكم الثلاثة
   (اللغة/تسجيل الدخول/الوضع الداكن) أصبحت مجموعة عائمة مستقلة تمامًا
   (.floating-controls) أعلى يسار الشاشة، بلا علاقة بعنصر <header>. */
.site-header{ position:static; background:transparent; border:none; box-shadow:none; }

/* ثلاثة أزرار عائمة صغيرة أعلى يسار الشاشة: اللغة، تسجيل الدخول، الوضع
   الداكن — زجاج داكن شبه شفاف + Backdrop Blur، يبقى مقروءًا فوق أي
   خلفية (هيرو داكن أو محتوى فاتح بالتمرير) بكل صفحات الموقع. */
.floating-controls{
  position:fixed; top:28px; left:28px; z-index:80;
  display:flex; align-items:center; gap:8px;
}
.floating-btn{
  display:flex; align-items:center; justify-content:center; gap:5px;
  height:42px; padding:0 14px; border-radius:999px; min-width:42px;
  background:rgba(10,10,11,.5); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:#fff; font-size:15px; cursor:pointer;
  transition:background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.floating-btn.is-icon-only{ width:42px; padding:0; }
.floating-btn:hover{
  background:rgba(217,225,249,.16); border-color:var(--sand); color:var(--sand);
  transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.floating-btn:active{ transform:translateY(0) scale(.96); }

/* زر فتح القائمة — عائم أعلى يمين الشاشة، لكن يظهر بالجوال فقط (القائمة
   بسطح المكتب/التابلت ظاهرة دومًا بلا حاجة لفتحها — راجع .sidebar-nav). */
.menu-toggle{
  position:fixed; top:28px; right:28px; z-index:81;
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px;
  background:rgba(10,10,11,.5); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:#fff; cursor:pointer;
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}
.menu-toggle:hover{ background:rgba(217,225,249,.16); border-color:var(--sand); transform:translateY(-2px); }
@media (max-width:760px){ .menu-toggle{ display:flex; } }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px; padding:12px 22px; font-weight:600; font-size:14.5px;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
  cursor:pointer; border:1.5px solid transparent; white-space:nowrap;
  position:relative; overflow:hidden;
}
.btn:active{ transform:scale(.96); }
.btn:disabled{
  background:#CBD1DC !important; border-color:#CBD1DC !important; color:#7A7F8C !important;
  cursor:not-allowed !important; box-shadow:none !important; transform:none !important; opacity:.85;
}
html.dark-mode .btn:disabled{ background:#3A3A40 !important; border-color:#3A3A40 !important; color:#8A8A92 !important; }
.btn .ripple{
  position:absolute; border-radius:50%; background:rgba(255,255,255,.35);
  transform:scale(0); animation:ripple .6s ease-out forwards; pointer-events:none;
}
@keyframes ripple{ to{ transform:scale(2.6); opacity:0; } }
.btn-outline{ background:transparent; border-color:rgba(255,255,255,.22); color:var(--text); }
.btn-outline:hover{ border-color:var(--text); background:rgba(255,255,255,.06); }
.btn-sand{ background:var(--sand); color:var(--ink); font-weight:700; border-color:var(--sand-strong); box-shadow:0 8px 20px rgba(183,196,234,.45); }
.btn-sand:hover{ background:var(--sand-strong); }
.btn-sand-sm{ background:var(--sand); color:var(--ink); padding:10px 18px; font-size:13.5px; border-radius:999px; font-weight:700; border-color:var(--sand-strong); }
.btn-sand-sm:hover{ background:var(--sand-strong); }

.lang-toggle-label{ font-size:12px; font-weight:700; }

/* Basic LTR mirroring for the pieces that would otherwise look backwards in English
   — عناصر التحكم العائمة والقائمة العائمة تتبادلان الجهة مع اتجاه الواجهة،
   بنفس منطق قراءة الصفحة (يمين↔يسار)، بدل البقاء بمواضع ثابتة بصرف النظر
   عن اللغة. Note: direction:ltr alone is enough to flip default text
   alignment for elements that don't set their own text-align (browser
   default is "start", which resolves to left under ltr) — we deliberately
   don't force text-align on headings/paragraphs here, since that would
   also override intentionally-centered elements like section titles and
   CTA bands. */
html.lang-en{ direction:ltr; }
html.lang-en .floating-controls{ left:auto; right:28px; }
html.lang-en .menu-toggle{ right:auto; left:28px; }
html.lang-en .sidebar-nav{ right:auto; left:28px; transform:translateX(calc(-100% - 32px)); }
html.lang-en .sidebar-nav.is-open{ transform:translateX(0); }
html.lang-en .sidebar-overlay{ direction:ltr; }
html.lang-en .sidebar-links a{ transform:translateX(-18px); }
html.lang-en .sidebar-nav.is-open .sidebar-links a{ transform:translateX(0); }
@media (max-width:760px){
  html.lang-en .sidebar-nav{ right:auto; left:16px; }
}

/* ---------- Sidebar / floating navigation box ---------- */
/* الخلفية المعتمة خلف القائمة — لازمة بالجوال فقط (القائمة تُفتح كطبقة
   منبثقة هناك)؛ بسطح المكتب/التابلت القائمة ظاهرة دومًا وليست منبثقة،
   فلا حاجة لخلفية معتمة إطلاقًا (مخفية تمامًا هناك، أسفل). */
.sidebar-overlay{
  position:fixed; inset:0; background:rgba(10,10,11,.6); z-index:78;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.sidebar-overlay.is-open{ opacity:1; pointer-events:auto; }

/* القائمة العائمة (Navigation) أعلى يمين الشاشة — صندوق عمودي صغير مضغوط
   بخلفية داكنة شبه شفافة + Backdrop Blur، بحجم عناصرها فقط (لا تمتد
   لأسفل الشاشة). بسطح المكتب/التابلت (min-width:761px أدناه) تبقى ظاهرة
   دومًا بلا حاجة لفتحها؛ بالجوال (max-width:760px) تُخفى افتراضيًا وتُفتح
   عبر زر Menu العائم (.menu-toggle) — نفس آلية .is-open/aria-hidden
   الموجودة أصلًا بالسكربتات (script.js/about.js/works.js/services-
   catalog.js/service-detail.js)، بلا أي تعديل بمنطق الفتح/الإغلاق نفسه. */
.sidebar-nav{
  position:fixed; top:28px; bottom:auto; right:28px; width:132px; max-width:80vw;
  max-height:calc(100vh - 56px); z-index:79;
  background:rgba(10,10,11,.55); color:var(--dark-body); border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  display:flex; flex-direction:column; padding:10px; gap:4px; overflow-y:auto;
  transition:transform .3s ease, opacity .3s ease, padding .25s ease;
}
.sidebar-close{
  align-self:flex-end; background:transparent; border:1px solid rgba(255,255,255,.18);
  color:#fff; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; margin-bottom:4px; transition:.2s; flex-shrink:0;
}
.sidebar-close:hover{ background:rgba(255,255,255,.08); border-color:var(--sand); }
.sidebar-links{ display:flex; flex-direction:column; gap:4px; }
.sidebar-links a{
  padding:9px 8px; border-radius:10px; font-size:12.5px; font-weight:600; color:var(--dark-body);
  text-align:center; line-height:1.35; border:1px solid transparent; background:transparent;
  transition:background .22s ease, color .22s ease, transform .22s ease, border-color .22s ease;
}
.sidebar-links a:hover{ background:var(--sand); color:var(--ink); transform:translateY(-1px); }
.sidebar-links a:active{ transform:translateY(0) scale(.97); }
/* العنصر الحالي (نشِط): خلفية فاتحة + نص داكن، ثابتة بلا حاجة لـhover */
.sidebar-links a.is-active{ background:var(--sand); color:var(--ink); border-color:var(--sand); }
.sidebar-links a.is-active:hover{ transform:translateY(-1px); }

/* بالجوال فقط: القائمة مخفية افتراضيًا (تُفتح عبر .menu-toggle)، وتظهر
   أسفل زر Menu مباشرة (وليس بمكان زر Menu نفسه). زر الإغلاق ✕ يظهر هنا
   فقط (بسطح المكتب/التابلت القائمة دائمة الظهور فلا حاجة لإغلاقها). */
@media (max-width:760px){
  .sidebar-nav{
    top:80px; max-height:calc(100vh - 108px);
    transform:translateY(-12px) scale(.96); opacity:0; pointer-events:none;
  }
  .sidebar-nav.is-open{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
  .sidebar-close{ display:flex; }
}
/* بسطح المكتب/التابلت: القائمة ظاهرة دومًا بلا أي حاجة لفتحها — تتجاهل
   حالة .is-open كليًا، ويختفي زر الإغلاق (لا وظيفة له هنا). حجم أكبر قليلًا
   من نسخة الجوال (طلب صريح: "تكبير بسيط" بوضع الكمبيوتر). */
@media (min-width:761px){
  .sidebar-nav{
    transform:none !important; opacity:1 !important; pointer-events:auto !important;
    width:150px; padding:12px;
  }
  .sidebar-links{ gap:5px; }
  .sidebar-links a{ padding:10px 9px; font-size:13.5px; }
  .sidebar-close{ display:none; }

  /* تفاعلية مع التمرير (سطح المكتب/التابلت فقط): بعد النزول للأسفل تنكمش
     القائمة لزر "الرئيسية" فقط (أول رابط بالقائمة دومًا، بما فيها أي
     روابط مخصّصة يضيفها الأدمن لاحقًا — تُضاف دائمًا بنهاية القائمة)،
     وتعود لكامل حجمها فور تمرير الفأرة عليها أو لمسها (تابلت باللمس) —
     راجع .is-scroll-collapsed/.is-touch-expanded المُضافتين من JS
     (script.js/about.js/works.js/services-catalog.js/service-detail.js). */
  .sidebar-nav.is-scroll-collapsed:not(:hover):not(:focus-within):not(.is-touch-expanded) .sidebar-links a:not(:first-child){
    display:none;
  }
  .sidebar-nav.is-scroll-collapsed:not(:hover):not(:focus-within):not(.is-touch-expanded){
    padding:6px;
  }
}

/* ---------- Top banner carousel ---------- */
.top-banner-carousel{ position:relative; height:442px; overflow:hidden; background:var(--dark); cursor:grab; user-select:none; }
.top-banner-carousel:active{ cursor:grabbing; }
.banner-slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); }
.banner-slide.is-empty-slot{ display:none; }
.banner-slide a{ display:block; width:100%; height:100%; overflow:hidden; }
.banner-slide img{ width:100%; height:100%; object-fit:cover; object-position:center center; transition:transform .5s ease; }
.banner-slide a:hover img{ transform:scale(1.05); }
.banner-dots{ position:absolute; bottom:18px; right:50%; transform:translateX(50%); display:flex; gap:8px; z-index:2; }
.banner-dots span{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); transition:.25s; cursor:pointer; }
.banner-dots span.is-active{ background:var(--sand); width:22px; border-radius:5px; }
@media (max-width:760px){ .top-banner-carousel{ height:271px; } }

/* ---------- Banner CTA buttons (طبقة مستقلة فوق البنر المتحرك) ----------
   طبقة ثابتة (position:absolute على كامل الحاوية) فوق شرائح البنر مباشرة —
   الشرائح تتحرك/تتلاشى بحركتها الخاصة، هذه الطبقة لا علاقة لها بذلك إطلاقًا
   (Layer مستقلة تمامًا، لا تتأثر بتبديل الشريحة). pointer-events:none على
   الحاوية نفسها حتى لا تحجب سحب/Swipe البنر أسفلها، وpointer-events:auto
   على كل زر على حدة فقط حتى يبقى قابلاً للنقر. */
.banner-cta-layer{ position:absolute; inset:0; z-index:5; pointer-events:none; }
/* شفافة بالكامل ومتناسقة مع أي بنر خلفها (لا لون خلفية صلب مهما كانت
   الصورة) — Border فاتح رفيع وحده يبقيها واضحة فوق أي محتوى. */
.banner-cta-btn{
  position:absolute; top:24px; pointer-events:auto;
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 22px; border-radius:10px;
  background:transparent; border:1px solid rgba(255,255,255,.75);
  color:#fff; font-size:14px; font-weight:600; white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  transition:background .25s ease, border-color .25s ease, color .25s ease, transform .15s ease;
}
.banner-cta-btn:hover{ background:rgba(255,255,255,.08); border-color:#fff; }
.banner-cta-btn:active{ background:rgba(255,255,255,.12); transform:scale(.98); }
/* المواضع بالعربية (RTL الافتراضي): "استكشف خدماتنا" يمين، "انضم إلينا"
   يسار — كما بالتصميم المرجعي. تُعكَس تلقائيًا بالإنجليزية أدناه (نفس
   أسلوب عكس .floating-controls/.sidebar-nav الموجود أصلاً بهذا الملف). */
.banner-cta-btn--services{ right:24px; }
.banner-cta-btn--join{ left:24px; }
html.lang-en .banner-cta-btn--services{ right:auto; left:24px; }
html.lang-en .banner-cta-btn--join{ left:auto; right:24px; }

@media (max-width:900px){
  .banner-cta-btn{ padding:9px 16px; font-size:12.5px; border-radius:9px; }
  .banner-cta-btn--services{ right:16px; }
  .banner-cta-btn--join{ left:16px; }
  html.lang-en .banner-cta-btn--services{ left:16px; }
  html.lang-en .banner-cta-btn--join{ right:16px; }
}
/* بالجوال: تصغير إضافي مع البقاء بالزاويتين العلويتين (بلا ازدحام — البنر
   بالجوال أقصر (271px) لكن يتسع لزرين صغيرين بأعلاه بارتياح). */
@media (max-width:520px){
  .banner-cta-btn{ padding:7px 12px; font-size:11px; border-radius:8px; top:14px; }
  .banner-cta-btn--services{ right:12px; }
  .banner-cta-btn--join{ left:12px; }
  html.lang-en .banner-cta-btn--services{ left:12px; }
  html.lang-en .banner-cta-btn--join{ right:12px; }
}

/* ---------- Banner transition styles (selectable from the dashboard) ---------- */

/* 1) fade — classic soft cross-fade (default) */
.top-banner-carousel[data-transition="fade"] .banner-slide{ opacity:0; transform:none; }
.top-banner-carousel[data-transition="fade"] .banner-slide.is-active{ opacity:1; }

/* 2) slide-right — the new slide glides in toward the right */
.top-banner-carousel[data-transition="slide-right"] .banner-slide{ opacity:0; transform:translateX(-7%); }
.top-banner-carousel[data-transition="slide-right"] .banner-slide.is-active{ opacity:1; transform:translateX(0); }

/* 3) slide-left — mirror of slide-right */
.top-banner-carousel[data-transition="slide-left"] .banner-slide{ opacity:0; transform:translateX(7%); }
.top-banner-carousel[data-transition="slide-left"] .banner-slide.is-active{ opacity:1; transform:translateX(0); }

/* 4) zoom — the new slide scales in from slightly larger to full size */
.top-banner-carousel[data-transition="zoom"] .banner-slide{ opacity:0; transform:scale(1.08); }
.top-banner-carousel[data-transition="zoom"] .banner-slide.is-active{ opacity:1; transform:scale(1); }

/* 5) kenburns — cinematic slow continuous zoom while a slide is showing */
.top-banner-carousel[data-transition="kenburns"] .banner-slide{ opacity:0; transform:none; }
.top-banner-carousel[data-transition="kenburns"] .banner-slide.is-active{ opacity:1; }
.top-banner-carousel[data-transition="kenburns"] .banner-slide.is-active img{ animation:shiary-kenburns 4.6s ease-out forwards; }
@keyframes shiary-kenburns{
  from{ transform:scale(1); }
  to{ transform:scale(1.09); }
}
@media (prefers-reduced-motion: reduce){
  .top-banner-carousel .banner-slide{ transition:opacity .3s ease; transform:none !important; }
  .top-banner-carousel .banner-slide.is-active img{ animation:none !important; }
}

/* ---------- Process banner (single, static) ----------
   نفس ارتفاع .top-banner-carousel (البنر المتحرك) بالضبط — بطلب صريح أن
   تكون كل البنرات الثابتة (بنر "منهجيتنا" وبنر الصفحة بكل الصفحات) بنفس
   حجم البنر المتحرك بالرئيسية، وليس أصغر منه. */
.process-banner{ display:block; height:442px; overflow:hidden; margin:0; }
.process-banner.is-no-image{ display:none; }
.process-banner img{ width:100%; height:100%; object-fit:cover; object-position:center center; transition:transform .5s ease; }
.process-banner:hover img{ transform:scale(1.04); }
@media (max-width:760px){ .process-banner{ height:271px; } }

/* ---------- Hero ---------- */
/* هيرو أول ما يراه الزائر عند فتح الموقع، بلا شريط علوي فوقه (راجع
   "Header" أعلاه — عناصر التحكم العائمة تقع أصلًا فوق خلفية الهيرو نفسها
   بما إنها تبدأ من أعلى الصفحة تمامًا، فتبقى "جزءًا من الهيرو" بصريًا
   بلا أي تعديل إضافي). التركيز بصريًا على الشعار الحقيقي والنص فقط: خلفية
   داكنة صلبة موحّدة (بلا طبقات تدرّج لوني — طلب صريح)، بلا صور خارجية/
   Stock — الشعار نفسه (الحقيقي، وليس نصًا بديلاً) هو العنصر البصري
   المركزي.
   الارتفاع يتبع المحتوى فقط (min-height:auto) — كان مفروضًا 100vh حتى لو
   محتواه أقصر من ذلك، يترك فراغًا فارغًا واضحًا أسفل النص قبل نهاية القسم
   (طلب صريح بإزالته بوضع الكمبيوتر أيضًا، بعد أن أُزيل مثله بالجوال سابقًا
   لنفس السبب بالضبط). */
.hero{
  position:relative; overflow:hidden;
  min-height:auto;
  display:flex; flex-direction:column; justify-content:center;
  padding:150px 0 48px;
  background:#131315;
}
/* خلفية صورة/فيديو اختيارية (من المحرر — "خلفية الهيرو") تحل محل الخلفية
   الصلبة أعلاه بصريًا لو فعّلها الأدمن يدويًا؛ لا تُستخدم افتراضيًا (لا صور
   Stock بالخلفية الافتراضية — التركيز على الشعار وحده، تعليمات صريحة).
   .hero-bg-overlay فوقها دائمًا (تعتيم صلب بلا تدرّج) يضمن بقاء النص
   مقروءًا لو فُعِّلت. */
.hero-bg-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
/* :not([hidden]) إجباري هنا — بدونه display:block الصريح (تخصيصه أعلى من
   قاعدة المتصفح الافتراضية [hidden]{display:none}) يُلغي إخفاء العنصر
   المخفي (الفيديو غالبًا، بلا مصدر) فيحجز ارتفاعًا كاملًا بالتخطيط
   العادي ويدفع العنصر الآخر (الصورة) خارج الحاوية المرئية. */
.hero-bg-media img:not([hidden]), .hero-bg-media video:not([hidden]){ width:100%; height:100%; object-fit:contain; display:block; }
.hero-bg-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none; background:transparent; transition:background .3s ease; }
.hero.has-bg-media .hero-bg-overlay{ background:rgba(10,10,11,.65); }
/* عمود واحد يتوسّط الشعار فوق النص، بمسافات سخية بين العناصر (الشعار،
   ثم عنوان الفقرة التعريفية، ثم العنوان الرئيسي، ثم الفقرة) — لا شيء
   ملاصق للقائمة العائمة أو أزرار التحكم أعلى الشاشة (padding-top سخي
   على .hero نفسها أعلاه). */
.hero-grid{
  position:relative; z-index:3; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:36px; padding-bottom:56px;
}
.eyebrow{ color:var(--text); font-size:16px; font-weight:600; margin-bottom:14px; letter-spacing:.02em; }
.hero .eyebrow{ color:var(--dark-text); opacity:.85; }
.hero-copy{ display:flex; flex-direction:column; align-items:center; max-width:640px; }
.hero-copy h1{ font-size:clamp(28px, 3.6vw, 40px); font-weight:700; color:var(--dark-text); margin-bottom:16px; }
.hero-copy > p{ color:var(--dark-muted); font-size:17px; max-width:520px; margin:0; }
.hero .btn-outline{ border-color:rgba(255,255,255,.3); color:var(--dark-text); background:transparent; }
.hero .btn-outline:hover{ border-color:var(--sand); background:rgba(255,255,255,.06); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.hero-ctas .btn{ padding:14px 24px; font-size:15px; }

/* الشعار الحقيقي (assets/logo-full.png — نفس ملف الهوية المستخدم بالفوتر،
   يجمع علامة "شِعاري" ونص "SHAARI Studio" معًا) هو العنصر البصري الرئيسي
   بالهيرو، ظاهر افتراضيًا وبحجم كبير جدًا بسطح المكتب. الحجم يتدرّج عبر
   نقاط التوقف أدناه (كبير جدًا بسطح المكتب، متوسط بالتابلت، مناسب للجوال
   بلا خروج عن حدود الشاشة). يبقى قابلاً للإخفاء من لوحة التحكم (خانة
   "إخفاء شعار الهيرو") عبر الكلاس .is-hidden — راجع cms-connector.js. */
.hero-visual{ position:relative; z-index:3; }
.hero-visual.is-hidden{ display:none; }
.mark-plate{
  position:relative; width:min(620px, 52vw);
  /* نسبة الشعار الافتراضي السابق (logo-full.png، 711×471) — تُثبِّت
     ارتفاع هذا الصندوق دائمًا بنفس القيمة، سواء كان الشعار ظاهرًا أو
     مخفيًا (بلا صورة مرفوعة بعد) أو مستبدَلًا بشعار آخر بنسبة مختلفة —
     حتى لا يتغيّر حجم/ارتفاع الهيرو الكلي إطلاقًا حسب حالة الشعار. مهم
     تحديدًا عند إضافة خلفية للهيرو لاحقًا (حجم ثابت يعتمد عليه). */
  aspect-ratio: 711 / 471;
}
.mark-plate picture{ display:block; width:100%; height:100%; }
.hero-logo{
  width:100%; height:100%; object-fit:contain; display:block;
  animation:hero-reveal-up 1.3s cubic-bezier(.16,.84,.44,1) .25s both;
}
/* لا شعار افتراضي مضمَّن — الصورة نفسها تختفي (بنفس نمط
   .process-banner.is-no-image) حتى يرفع الأدمن صورة له صراحةً من لوحة
   التحكم؛ حينها فقط تُزال .is-no-image (cms-connector.js) وتظهر. صندوق
   .mark-plate الأب يحافظ على نفس المساحة (aspect-ratio أعلاه) بغضّ
   النظر عن ظهور الصورة من عدمه. */
.hero-logo.is-no-image{ display:none; }
@keyframes hero-reveal-up{
  0%{ clip-path:inset(0 0 100% 0); transform:scale(1.08); }
  100%{ clip-path:inset(0 0 0 0); transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .hero-logo{ animation:none; }
}
@media (max-width:920px){
  .mark-plate{ width:min(460px, 62vw); }
}
@media (max-width:520px){
  .mark-plate{ width:min(320px, 78vw); }
  /* الهيرو بالجوال كان مفروضًا 100vh حتى لو محتواه أقصر من ذلك — يترك
     فراغًا فارغًا واضحًا أسفل أزرار الدعوة على الشاشات الطويلة (مُبلَّغ
     بلقطة شاشة حقيقية). min-height:auto يجعل ارتفاع القسم يتبع محتواه
     الفعلي فقط (الشعار + النص + الأزرار + الحشو)، فيختفي أي فراغ زائد. */
  .hero{ padding:120px 0 40px; min-height:auto; }
}
.float-card{
  /* hidden for now — remove this line to bring the stat cards back */
  display:none;
  position:absolute; background:var(--paper);
  border:1px solid var(--line); box-shadow:0 18px 40px rgba(20,20,35,.28);
  border-radius:16px; padding:13px 16px; font-size:13px; color:var(--muted);
}
.float-card-top{ top:20px; left:20px; min-width:126px; }
.float-card-top strong{ display:block; font-size:24px; color:var(--text); line-height:1.1; }
.float-card-bottom{ bottom:20px; right:20px; display:flex; align-items:center; gap:8px; font-weight:500; color:var(--text); }
.live-dot{ width:8px; height:8px; border-radius:50%; background:var(--sand-strong); box-shadow:0 0 0 4px rgba(217,225,249,.35); flex-shrink:0; }

/* ---------- Section base ---------- */
.section{ padding:76px 0; border-top:1px solid var(--line); }
.section:first-of-type{ border-top:none; }
.section-muted{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-title{ text-align:center; max-width:600px; margin:0 auto 42px; }
.section-title h2{ font-size:clamp(26px, 3vw, 34px); font-weight:700; margin-bottom:8px; }
.section-title p{ color:var(--muted); font-size:17px; margin:0; }

/* ---------- About ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
.about-copy p{ color:var(--muted); font-size:16px; }
.check-list{
  list-style:none; padding:0; margin:16px 0 0;
  display:grid; grid-template-columns:1fr 1fr; gap:10px 20px;
  font-size:14.5px; color:var(--text); font-weight:500;
}
.check-list li{ display:flex; align-items:center; gap:9px; }
.check-list li::before{
  content:""; width:19px; height:19px; border-radius:50%; flex-shrink:0;
  background:var(--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2314151A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.about-media{ position:relative; }
.about-plate{
  position:relative;
  border-radius:22px; overflow:hidden; aspect-ratio:4/3.4;
}
.about-plate img{ width:100%; height:100%; object-fit:cover; }
.about-stat-box{
  position:absolute; bottom:-18px; right:20px; display:flex; gap:24px;
  background:var(--paper-2); border-radius:16px; box-shadow:var(--card-shadow-hover); padding:14px 20px; border:1px solid var(--line);
}
.about-stat-box strong{ display:block; font-size:20px; color:var(--ink); transition:transform .25s ease, color .25s ease; }
.about-stat-box span{ font-size:12px; color:var(--muted); }
@media (hover:hover){
  .about-stat-box:hover{ transform:translateY(-4px); box-shadow:0 26px 52px rgba(20,20,35,.22); }
  .about-stat-box:hover strong{ transform:scale(1.12); color:var(--sand-strong); }
  .about-stat-box{ transition:transform .25s ease, box-shadow .25s ease; }
}

/* ---------- Services ---------- */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.services-cta-row{ text-align:center; margin-top:36px; }
.service-card{
  display:block; text-decoration:none; color:inherit; cursor:pointer;
  background:var(--paper-2);
  border:1px solid var(--card-border); border-radius:20px; padding:26px 22px;
  box-shadow:var(--card-shadow);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:var(--card-shadow-hover); border-color:var(--sand-strong); }
.svc-icon{
  width:52px; height:52px; border-radius:15px; background:var(--sand); color:var(--ink);
  display:grid; place-items:center; margin-bottom:14px;
}
.svc-icon-image{ overflow:hidden; padding:0; background:var(--paper-2); }
.svc-icon-image img{ width:100%; height:100%; object-fit:cover; }
.service-card h3{ font-size:23px; font-weight:700; margin-bottom:6px; color:var(--ink); }
.service-card p{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.75; }

/* ---------- Tilt (interactive hover) ---------- */
.tilt{ transition:transform .25s ease, box-shadow .25s ease; will-change:transform; transform-style:preserve-3d; }

/* ---------- Work / Projects ---------- */
.project-filters{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:30px; }
.pill{
  border:1px solid var(--line-strong); background:var(--paper); color:var(--text); padding:9px 18px;
  border-radius:999px; font-size:13.5px; font-weight:600; cursor:pointer; transition:.18s;
}
.pill.is-active, .pill:hover{ background:var(--sand); color:var(--ink); border-color:var(--sand); }

.carousel-wrap{ position:relative; }
.carousel-track{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding:4px 2px 10px;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-track .project-card{
  scroll-snap-align:start; flex:0 0 auto;
  width:87%;
}
@media (min-width:820px){
  .carousel-track .project-card{ width:calc(50% - 10px); }
}
@media (min-width:1200px){
  .carousel-track .project-card{ width:calc(33.333% - 15px); }
}
.carousel-arrow{
  position:absolute; top:calc(50% - 20px); transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong);
  background:var(--paper); color:var(--text); cursor:pointer;
  display:grid; place-items:center; z-index:3; box-shadow:var(--shadow-sm);
  transition:background .2s ease, border-color .2s ease;
}
.carousel-arrow:hover{ background:var(--sand); color:var(--ink); border-color:var(--sand); }
.carousel-prev{ right:-8px; }
.carousel-next{ left:-8px; }
.carousel-dots{ display:flex; gap:7px; justify-content:center; margin-top:18px; }
.carousel-dots span{
  width:7px; height:7px; border-radius:50%; background:var(--line-strong); cursor:pointer; transition:.2s;
}
.carousel-dots span.is-active{ background:var(--sand); width:20px; border-radius:5px; }
@media (max-width:640px){
  .carousel-arrow{ display:none; }
}
.project-card{
  position:relative;
  background:var(--paper-2);
  border:1px solid var(--card-border); border-radius:18px;
  cursor:pointer;
  box-shadow:var(--card-shadow);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), opacity .3s ease, box-shadow .3s ease;
}
.project-card:hover{ transform:translateY(-8px) scale(1.015); box-shadow:var(--card-shadow-hover); }
.project-card.is-hidden{ display:none; }
/* بطاقة "مميّزة" بمنتصف كل مجموعة ثلاثية — نفس الإيقاع البصري بالنموذج
   المرسل (بطاقة وسطى أعلى قليلاً من جارتيها) بدون تثبيت العدد على 3 عناصر
   بالضبط: يتكرر كل 3 بطاقات تلقائيًا مهما كان عدد بطاقات الكاروسيل. */
@media (min-width:1200px){
  .carousel-track .project-card:nth-child(3n+2){ transform:translateY(-18px); z-index:1; }
  .carousel-track .project-card:nth-child(3n+2):hover{ transform:translateY(-24px) scale(1.015); }
}
/* صندوق ثابت الارتفاع (نفس إيقاع الشبكة — كل البطاقات بنفس الطول)، والصورة
   بـobject-fit:cover تملأ الصندوق بالكامل edge-to-edge (قصّ عند الحاجة
   بدل ترك فراغ letterbox حواليها) — بطلب صريح: القصّ غير مشكلة. */
.project-thumb{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  margin:18px 16px 0; border-radius:14px;
  background:var(--paper);
}
.project-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.project-card:hover .project-thumb img{ transform:scale(1.08); }
.project-thumb-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 40%, rgba(10,10,11,.72) 100%);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:20px;
  opacity:0; transition:opacity .3s ease;
  pointer-events:none;
}
.project-card:hover .project-thumb-overlay{ opacity:1; }
.project-thumb-overlay-btn{
  display:flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.95); color:var(--ink); border-radius:999px;
  padding:9px 18px; font-size:12.5px; font-weight:700;
  transform:translateY(10px); transition:transform .3s ease;
}
.project-card:hover .project-thumb-overlay-btn{ transform:translateY(0); }
/* شارة التصنيف — صندوق داكن مصمت يطفو أعلى منتصف الصورة، متراكب مع
   الحافة العلوية للبطاقة والصورة معًا (نفس أثر النموذج المرسل) — لازم
   تكون شقيقة لـ.project-thumb (وليست بداخلها) حتى لا يقصّها overflow:
   hidden الخاص بالصورة (المطلوب أصلاً لاحتواء تكبير الصورة عند hover). */
.project-tag{
  position:absolute; top:6px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; align-items:center; gap:7px;
  background:var(--ink); color:#fff; border:none;
  font-size:11.5px; font-weight:700; padding:7px 16px; border-radius:999px;
  box-shadow:0 8px 18px rgba(10,10,11,.28);
  white-space:nowrap; transition:transform .3s ease;
}
.project-card:hover .project-tag{ transform:translateX(-50%) translateY(-2px); }
.tag-dot{ display:none; } /* الشارة الجديدة نص فقط بلا نقطة لون، لمطابقة النموذج المرسل */
.photo-count{
  position:absolute; bottom:12px; left:12px; z-index:1;
  display:flex; align-items:center; gap:5px;
  background: var(--paper); color: var(--ink); border:1px solid var(--line);
  font-size:11.5px; font-weight:600; padding:5px 10px; border-radius:999px;
}
.project-body{
  margin:14px 16px 16px; padding:12px 14px;
  border:1px solid var(--line); border-radius:12px;
}

/* ---------- "أحدث أعمالنا" — coverflow carousel (قسم مستقل بتصميم
   خاص، مثل .hero/.about-hero/.cta-band — ليس .section/.section-title
   العامّين، لأن التخطيط هنا [عنوان+وصف على اليمين، أسهم على اليسار]
   مختلف جذريًا عن ترويسة الأقسام المركزية المعتادة بالموقع). ألوان
   النموذج المرجعي (#e9eafa/#111/#666...) استُبدلت بمتغيرات هوية الموقع
   الفعلية (--sand-light/--ink/--muted...) — القيم شبه متطابقة أصلاً. */
.latest-work{
  position:relative; overflow:hidden;
  padding:90px 0 100px;
  background:var(--sand-light);
  color:var(--ink);
  isolation:isolate;
}
html.dark-mode .latest-work{ background:var(--sand-bg); } /* يبقى فاتحًا مقصودًا حتى بالوضع الغامق — نفس مبدأ الفوتر */
.latest-work__header{
  width:min(1280px, calc(100% - 60px));
  margin:0 auto 50px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
}
.latest-work__heading{ max-width:560px; }
.section-label{
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:15px; font-size:13px; font-weight:600; color:var(--ink);
}
.section-label::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.latest-work h2{
  margin:0; font-size:clamp(34px, 5vw, 58px); line-height:1.05; font-weight:800; color:var(--ink);
}
.latest-work__heading p{
  max-width:510px; margin:20px 0 0; font-size:15px; line-height:2; color:var(--muted);
}
.latest-work__controls{ display:flex; gap:10px; direction:ltr; }
.work-arrow{
  width:52px; height:52px; border:1px solid var(--line-strong); border-radius:50%;
  background:transparent; color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.work-arrow:hover{ background:var(--ink); color:var(--dark-text); border-color:var(--ink); transform:translateY(-3px); }
.work-arrow:disabled{ opacity:.35; cursor:default; pointer-events:none; }

.works-carousel{
  position:relative; width:100%; height:540px; overflow:hidden;
  perspective:1400px; cursor:grab; user-select:none; touch-action:pan-y;
}
.works-carousel.is-dragging{ cursor:grabbing; }
.works-carousel__track{
  position:absolute; top:0; left:50%; width:100%; height:100%; transform:translateX(-50%);
}
.work-card{
  position:absolute; top:50%; left:50%;
  width:min(430px, 34vw); height:430px; overflow:hidden; border-radius:24px;
  background:var(--paper-2);
  will-change:transform, opacity;
  transition:transform .75s cubic-bezier(.22,.61,.36,1), opacity .75s ease, box-shadow .75s ease;
}
/* بطاقة مستبعدة بفلتر تصنيف (قسم "أعمالنا") — تُستبعد من حساب مواضع
   الكاروسيل بالجافاسكربت، لكن قد يبقى عليها transform/opacity قديم من
   آخر مرة كانت ظاهرة فيها؛ display:none يضمن اختفاءها فعليًا بلا انتظار
   إعادة render(). */
.work-card.is-filtered-out{ display:none !important; }
/* الصورة تملأ البطاقة بالكامل edge-to-edge (object-fit:cover) — أصبح هذا
   آمنًا الآن رغم القصّ لأن نص البطاقة له صندوقه الزجاجي المصنفر الخاص
   فوق الصورة (لا يعتمد على مساحة فارغة/letterbox تحته كما كان سابقًا). */
.work-card__image{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none;
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
}
.work-card__overlay{
  /* التدرّج الغامق اللي كان يقصّ لون أسفل البطاقة أُزيل بطلب صريح —
     العنصر نفسه أُبقي بلا حذف من HTML، فقط بلا أي تأثير بصري. */
  position:absolute; inset:0;
}
/* صندوق فاتح خلف نص البطاقة فقط (لا الصورة كاملة) — بعد إزالة التدرّج
   الغامق، النص الأبيض صار غير مقروء فوق الصور الفاتحة؛ هذا الصندوق يحل
   المشكلة بأقل مساحة ممكنة (فقط خلف العنوان/الوصف) بدل إرجاع تدرّج يغطي
   نصف الصورة. لون الصندوق ولون النص كلاهما متغيّرا CSS جاهزان يتكيّفان
   مع الوضع الفاتح/الغامق تلقائيًا. */
.work-card__content{
  position:absolute; z-index:2; right:24px; left:24px; bottom:22px;
  background:rgba(255,255,255,.68); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--text);
  border-radius:14px; padding:14px 16px;
  box-shadow:0 10px 24px rgba(10,10,11,.18);
}
/* بالوضع الغامق نفس الصندوق شفّاف داكن بدل شفّاف فاتح، حتى يبقى النص
   الأبيض (var(--text) هناك) واضحًا فوقه بدل التصادم مع خلفية فاتحة. */
html.dark-mode .work-card__content{ background:rgba(10,10,11,.55); }
.work-card__category{
  display:inline-block; padding:6px 12px; margin-bottom:8px; border-radius:50px;
  background:var(--ink); font-size:11px; color:#fff;
}
.work-card h3{ margin:0; font-size:22px; line-height:1.3; color:var(--text); }
.work-card p{ margin:8px 0 0; font-size:12px; line-height:1.7; color:var(--muted); }
.work-card.is-center{ box-shadow:0 30px 80px rgba(10,10,11,.22); }
.work-card.is-center .work-card__image{ transform:scale(1.04); }

.works-pagination{ display:flex; justify-content:center; gap:7px; margin-top:30px; }
.work-dot{
  width:7px; height:7px; padding:0; border:0; border-radius:50%;
  background:var(--line-strong); cursor:pointer; transition:.35s ease;
}
.work-dot.is-active{ width:28px; border-radius:20px; background:var(--ink); }

/* نفس كاروسيل الـcoverflow، لكن نسخة ثانية بقسم "أعمالنا" (فلاتر + كل
   الأعمال، لا الـ6 المميّزة فقط) — الأسهم هنا تطفو على حواف الكاروسيل
   نفسه بدل الجلوس بجانب العنوان (العنوان هنا يبقى بتصميمه الأصلي
   المتمركز + الفلاتر تحته، لم يُطلب تغييره). */
.works-carousel-wrap{ position:relative; }
.works-carousel-wrap .work-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  background:var(--paper); box-shadow:var(--shadow-sm);
}
.works-carousel-wrap .work-arrow:hover{ transform:translateY(-50%) translateY(-3px); }
.works-carousel-wrap .work-arrow--prev{ right:-8px; }
.works-carousel-wrap .work-arrow--next{ left:-8px; }

@media (max-width:760px){
  .latest-work{ padding:65px 0 70px; }
  .latest-work__header{ width:calc(100% - 32px); flex-direction:column; align-items:flex-start; margin-bottom:30px; }
  .latest-work__controls{ display:none; } /* على الجوال: Swipe فقط، الأسهم مخصصة لسطح المكتب */
  .works-carousel-wrap .work-arrow{ display:none; }
  .works-carousel{ height:430px; }
  .work-card{ width:290px; height:380px; border-radius:20px; }
}
@media (max-width:480px){
  .work-card{ width:270px; height:360px; }
}
@media (prefers-reduced-motion: reduce){
  .work-card, .work-card__image, .work-arrow, .work-dot{ transition:none !important; }
}

/* ---------- Portfolio engagement row (views / likes / shares) ---------- */
.project-engagement{
  display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--line);
}
.engagement-item{
  display:inline-flex; align-items:center; gap:6px; background:none; border:none; padding:0;
  font-size:13px; font-weight:600; color:var(--muted); cursor:default;
  transition:color .2s ease, transform .15s ease;
}
.engagement-views svg{ opacity:.75; }
button.engagement-item{ cursor:pointer; }
button.engagement-item:hover{ color:var(--text); transform:scale(1.06); }
.engagement-like svg{ transition:fill .2s ease, stroke .2s ease, transform .2s ease; }
.engagement-like:active svg{ transform:scale(1.25); }
.engagement-like:hover{ color:#e0245e; }
.engagement-like.is-liked{ color:#e0245e; }
.engagement-like.is-liked svg{ fill:#e0245e; stroke:#e0245e; }
.engagement-share:hover{ color:var(--sand-strong); }
.engagement-share:hover svg{ transform:rotate(-8deg); }
.engagement-count{ min-width:12px; font-variant-numeric:tabular-nums; }

.engagement-share-wrap{ position:relative; }
.engagement-share-menu{
  position:absolute; bottom:calc(100% + 8px); right:0; z-index:300;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 16px 36px rgba(20,20,35,.18); padding:6px; width:172px;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease;
}
.engagement-share-menu.engagement-share-menu-detached{
  position:fixed; right:auto; bottom:auto; /* JS sets top/bottom/left explicitly once moved to <body> */
}
.engagement-share-menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.engagement-share-option{
  display:flex; align-items:center; gap:10px; width:100%; text-align:right; background:none; border:none; cursor:pointer;
  padding:9px 10px; border-radius:9px; font-size:13px; font-weight:600; color:var(--text);
  transition:background .15s ease;
}
.engagement-share-option svg{ flex-shrink:0; opacity:.85; }
.engagement-share-option:hover{ background:var(--paper-2); }
.project-body h3{ font-size:22px; font-weight:700; margin-bottom:4px; color:var(--ink); }
.project-body p{ color:var(--muted); font-size:14.5px; margin:0; }

/* ---------- Lightbox (full-screen studio viewer) ---------- */
.lightbox-overlay{
  position:fixed; inset:0; z-index:500; background:var(--dark);
  overflow-y:auto; overflow-x:hidden; scroll-behavior:smooth;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.lightbox-overlay.hidden{ display:none; }
.lightbox-overlay.is-visible{ opacity:1; pointer-events:auto; }

.lightbox-top{
  position:sticky; top:0; z-index:5; background:var(--dark);
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; gap:12px;
}
.lightbox-top-meta{ display:flex; align-items:center; gap:10px; }
.lightbox-tag{
  display:inline-block; background:rgba(255,255,255,.1); color:var(--dark-body); font-size:12px; font-weight:700;
  padding:6px 13px; border-radius:999px;
}
.lightbox-count{ color:rgba(255,255,255,.5); font-size:12.5px; font-family:"IBM Plex Sans Arabic"; }
.lightbox-close{
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.08); border:none; color:var(--dark-body); cursor:pointer;
  display:grid; place-items:center; flex-shrink:0; transition:background .2s ease;
}
.lightbox-close:hover{ background:rgba(255,255,255,.18); }

.lightbox-stage{
  padding:0 16px 24px;
}
.lightbox-image-stack{
  display:flex; flex-direction:column; gap:16px;
  max-width:900px; margin:0 auto;
}
.lightbox-image-stack img{
  width:100%; height:auto; display:block;
  border-radius:10px;
}

.lightbox-footer{
  background:rgba(255,255,255,.03); border-top:1px solid rgba(255,255,255,.08);
  padding:16px 18px calc(16px + env(safe-area-inset-bottom));
}
.lightbox-meta{ margin-bottom:0; }
.lightbox-meta h3{ color:var(--dark-text); font-size:16.5px; margin-bottom:4px; }
.lightbox-meta p{ color:var(--dark-muted); font-size:13.5px; margin:0; max-width:640px; }

@media (max-width:720px){
  .lightbox-stage{ padding:0 10px 20px; }
}

/* ---------- Process (compact timeline) ---------- */
.timeline{ position:relative; margin-top:6px; }
.timeline::before{
  content:""; position:absolute; right:19px; top:6px; bottom:6px; width:2px; background:var(--line-strong);
}
.timeline-item{ position:relative; padding-right:56px; margin-bottom:26px; }
.timeline-item:last-child{ margin-bottom:0; }
.timeline-dot{
  position:absolute; right:10px; top:2px; width:20px; height:20px; border-radius:50%;
  background:var(--sand); border:4px solid #dbe4ff; box-shadow:0 0 0 2px var(--sand-strong);
}
.timeline-year{ font-size:12.5px; font-weight:700; color:var(--text); margin-bottom:3px; letter-spacing:.04em; }
.timeline-item h3{ font-size:16.5px; margin-bottom:4px; }
.timeline-item p{ color:var(--muted); font-size:14px; margin:0; max-width:560px; }

/* ---------- Process (cards) ---------- */
.process-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:6px; }
.process-card{
  position:relative;
  background:var(--paper-2);
  border:1px solid var(--card-border); border-radius:20px; padding:26px 22px;
  box-shadow:var(--card-shadow);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s;
}
.process-card:hover{ transform:translateY(-4px); box-shadow:var(--card-shadow-hover); border-color:var(--sand-strong); }
.process-card .svc-icon{ transition:background .22s ease, transform .22s ease; }
.process-card:hover .svc-icon{ background:var(--sand-strong); transform:scale(1.08) rotate(-4deg); }
.process-num{
  position:absolute; top:20px; inset-inline-end:20px;
  font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--muted);
  background:var(--paper); border:1px solid var(--line); border-radius:999px;
  padding:3px 11px; line-height:1.6;
}
.process-card h3{ font-size:20px; font-weight:700; margin-bottom:6px; color:var(--ink); }
.process-card p{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.75; }

/* ---------- Why ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.why-item{
  background:var(--paper-2);
  border:1px solid var(--line); border-radius:18px; padding:20px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow:var(--card-shadow);
  transition:box-shadow .22s ease, transform .22s ease;
}
.why-item:hover{ transform:translateY(-3px); box-shadow:var(--card-shadow-hover); }
.why-icon{ width:42px; height:42px; border-radius:12px; background:var(--sand); color:var(--ink); display:grid; place-items:center; }
.why-item h3{ font-size:22px; font-weight:700; margin-bottom:2px; color:var(--ink); }
.why-item p{ color:var(--muted); font-size:14.5px; margin:0; line-height:1.7; }

/* ---------- CTA band ---------- */
.cta-band{
  background:radial-gradient(900px 300px at 50% -30%, rgba(183,196,234,.4), transparent 70%), var(--sand-bg);
  padding:52px 0; border-top:1px solid var(--sand-light); border-bottom:1px solid var(--sand-light);
}
.cta-band-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cta-band-buttons{ display:flex; gap:12px; flex-wrap:wrap; }
.cta-band h3{ font-size:clamp(17px, 1.9vw, 22px); margin:0 0 6px; color:var(--text); }
.cta-band p{ margin:0; color:var(--muted); font-size:15px; }

/* ---------- Contact ---------- */
.form-card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:24px; padding:30px 26px;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:16px; margin-bottom:28px;
  color:var(--ink);
}
.careers-form-card{ max-width:760px; margin-inline:auto; }
.field-hint{ font-size:12px; color:var(--muted); margin-top:6px; display:block; }
.form-status{ font-size:13.5px; margin:14px 0 0; min-height:20px; }
.form-status.is-error{ color:var(--danger, #c0392b); }
.form-status.is-success{ color:var(--success, #2e7d32); }

/* ---------- Site-wide startup/welcome popup ---------- */
.site-popup-overlay{
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity var(--popup-anim-duration, .3s) ease;
}
.site-popup-overlay.is-open{ opacity:1; pointer-events:auto; }
.site-popup{
  border-radius:22px; padding:36px 30px 28px; max-width:440px; width:100%;
  text-align:center; position:relative; box-shadow:0 30px 70px rgba(0,0,0,.4);
  transition:transform var(--popup-anim-duration, .3s) cubic-bezier(.2,.9,.3,1.2), opacity var(--popup-anim-duration, .3s) ease;
}
/* fade (default): gentle rise + scale */
.site-popup-overlay.anim-fade .site-popup{ transform:translateY(14px) scale(.97); }
.site-popup-overlay.anim-fade.is-open .site-popup{ transform:translateY(0) scale(1); }
/* slide-right: enters moving from the left edge towards the right */
.site-popup-overlay.anim-slide-right .site-popup{ transform:translateX(-60px); opacity:0; }
.site-popup-overlay.anim-slide-right.is-open .site-popup{ transform:translateX(0); opacity:1; }
/* slide-left: enters moving from the right edge towards the left */
.site-popup-overlay.anim-slide-left .site-popup{ transform:translateX(60px); opacity:0; }
.site-popup-overlay.anim-slide-left.is-open .site-popup{ transform:translateX(0); opacity:1; }
/* typewriter: the popup itself just fades in; the title/description type themselves out via JS */
.site-popup-overlay.anim-typewriter .site-popup{ transform:translateY(10px); }
.site-popup-overlay.anim-typewriter.is-open .site-popup{ transform:translateY(0); }
.site-popup-typing::after{ content:'|'; animation:site-popup-caret 1s step-end infinite; opacity:.7; }
@keyframes site-popup-caret{ 50%{ opacity:0; } }
.site-popup-image{ width:100%; max-height:180px; object-fit:cover; border-radius:14px; margin-bottom:18px; }
.site-popup h3{ font-size:20px; margin:0 0 12px; }
.site-popup p{ font-size:14px; opacity:.85; line-height:1.8; margin:0 0 22px; }
.site-popup-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.site-popup-close{
  position:absolute; top:14px; left:14px; width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2); background:transparent; color:inherit; opacity:.75;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:20px; transition:.2s;
}
.site-popup-close:hover{ opacity:1; background:rgba(255,255,255,.08); }

/* fullscreen auto-close mode — media fills the entire viewport, no card
   chrome, no title/description/buttons */
.site-popup-overlay.mode-fullscreen{ padding:0; background:#000 !important; }
.site-popup.fullscreen{
  max-width:none; width:100vw; height:100vh; height:100dvh; border-radius:0;
  padding:0; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.site-popup-fullscreen-media{ width:100%; height:100%; object-fit:cover; display:block; }
.site-popup.fullscreen .site-popup-close{
  top:20px; left:20px; background:rgba(0,0,0,.4); border-color:rgba(255,255,255,.35); z-index:2;
}

/* ---------- PWA "Add to Home Screen" install banner ---------- */
.pwa-install-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:390;
  max-width:480px; margin-inline:auto;
  background:var(--dark); color:var(--dark-body); border:1px solid var(--dark-line);
  border-radius:16px; padding:14px 16px; box-shadow:0 20px 50px rgba(0,0,0,.35);
  display:flex; align-items:center; gap:12px;
  transform:translateY(120%); opacity:0; transition:transform .35s cubic-bezier(.2,.9,.3,1.1), opacity .35s ease;
}
.pwa-install-banner.is-open{ transform:translateY(0); opacity:1; }
.pwa-install-text{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.pwa-install-text strong{ font-size:13.5px; color:var(--dark-text); }
.pwa-install-text span{ font-size:12px; color:var(--dark-muted); line-height:1.5; }
.pwa-install-close{
  width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  background:transparent; color:inherit; opacity:.7; flex-shrink:0; order:3;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px;
}
.pwa-install-close:hover{ opacity:1; }
@media (max-width:520px){
  .pwa-install-banner{ flex-wrap:wrap; }
  .pwa-install-text{ order:1; width:100%; }
  #pwaInstallBtn{ order:2; }
}
.site-popup-never-again{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px;
  font-size:12.5px; opacity:.7; cursor:pointer;
}
.site-popup-never-again input{ width:15px; height:15px; accent-color:var(--sand-strong); }


.careers-modal-overlay{
  position:fixed; inset:0; background:rgba(10,10,11,.72); z-index:300;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.careers-modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.careers-modal{
  background:var(--paper); border-radius:24px; padding:40px 32px 32px; max-width:420px; width:100%;
  text-align:center; position:relative; box-shadow:0 30px 70px rgba(0,0,0,.35);
  transform:translateY(14px) scale(.97); transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.careers-modal-overlay.is-open .careers-modal{ transform:translateY(0) scale(1); }
.careers-modal-icon{ font-size:44px; margin-bottom:12px; }
.careers-modal h3{ font-size:19px; margin:0 0 12px; }
.careers-modal p{ font-size:14px; color:var(--muted); line-height:1.8; margin:0 0 24px; }
.careers-modal .btn{ width:100%; }
.careers-modal-close{
  position:absolute; top:14px; left:14px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s;
}
.careers-modal-close:hover{ background:var(--paper-2); color:var(--ink); }
.careers-modal-app-number{
  font-size:22px !important; font-weight:800; letter-spacing:.5px; direction:ltr;
  color:var(--ink) !important; background:var(--sand); border-radius:12px; padding:10px 16px;
  margin:0 0 18px !important; display:inline-block;
}
.careers-form-section-title{ font-size:15px; margin:8px 0 -2px; color:var(--ink); }
.careers-form-section-title:first-child{ margin-top:0; }
.careers-track-result{
  margin-top:18px; padding:18px; border-radius:16px; background:var(--paper); border:1px solid var(--line);
}
.careers-track-result-status{
  display:inline-block; padding:5px 14px; border-radius:999px; font-size:13px; font-weight:700; margin-bottom:10px;
}
.careers-track-result-status.is-under-review{ background:rgba(217,183,90,.18); color:#8a6d1f; }
.careers-track-result-status.is-accepted{ background:rgba(46,125,50,.15); color:var(--success, #2e7d32); }
.careers-track-result-status.is-rejected{ background:rgba(192,57,43,.15); color:var(--danger, #c0392b); }
/* حالات إضافية — استعلام طلب الخدمة بصفحة الخدمات (services.html)، نفس
   البطاقة/الشارة أعلاه بالضبط، فقط حالات مختلفة (new/reviewing/converted
   بدل under_review فقط بطلبات التوظيف). */
.careers-track-result-status.is-new{ background:rgba(94,110,204,.15); color:#4550a0; }
.careers-track-result-status.is-reviewing{ background:rgba(217,183,90,.18); color:#8a6d1f; }
.careers-track-result-status.is-converted{ background:rgba(46,125,50,.15); color:var(--success, #2e7d32); }
.form-field{ display:flex; flex-direction:column; gap:6px; }
label{ font-size:13px; font-weight:600; color:var(--muted); }
input,select,textarea{
  width:100%; border:1.3px solid var(--line-strong); background:var(--paper-2); border-radius:12px; padding:12px 14px;
  outline:none; transition:border-color .18s, box-shadow .18s; color:var(--text);
}
input:focus, select:focus, textarea:focus{ border-color:var(--sand-strong); box-shadow:0 0 0 3px rgba(217,225,249,.2); background:var(--paper); }
textarea{ min-height:110px; resize:vertical; }

.checkbox-field{
  display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--muted); cursor:pointer; line-height:1.6;
}
.checkbox-field input{ width:19px; height:19px; flex-shrink:0; margin-top:2px; accent-color:var(--sand-strong); }

.btn-block{ width:100%; padding:15px 22px; font-size:15px; }
.btn-sand svg{ flex-shrink:0; }

.form-actions{ margin-top:2px; }
.form-note{ font-size:12px; color:var(--muted-2); margin-top:6px; }
.form-note.center{ text-align:center; color:var(--muted-2); }

.contact-card-dark{
  background:var(--dark); color:var(--dark-body); border-radius:24px; padding:30px;
  box-shadow:0 22px 50px rgba(20,20,35,.2); border:1px solid var(--dark-line);
}
.contact-card-logo{ display:block; height:44px; width:auto; margin:0 auto 16px; }
.contact-card-dark h3{ color:var(--dark-text); font-size:22px; margin-bottom:8px; text-align:center; }
.contact-dark-desc{ color:var(--dark-muted); font-size:14px; margin-bottom:6px; text-align:center; }
.contact-dark-sub{
  color:#7A7A82; font-size:13px; text-align:center; line-height:1.75;
  margin:14px auto 0; padding-top:14px; max-width:36ch;
  border-top:1px solid rgba(255,255,255,.08);
}
.contact-list{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:13px; font-size:14.5px; }
.contact-list li{ display:flex; gap:11px; align-items:flex-start; }
.contact-list svg{ flex-shrink:0; margin-top:3px; color:var(--sand); }

.socials.socials-dark a{
  width:38px; height:38px;
  background:var(--sand); border-color:var(--sand); color:var(--ink);
  box-shadow:0 6px 18px rgba(217,225,249,.35), 0 0 0 4px rgba(217,225,249,.08);
  transition:background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.socials.socials-dark a:hover{
  background:var(--sand-strong); color:var(--ink); border-color:var(--sand-strong);
  transform:translateY(-3px) scale(1.08);
  box-shadow:0 12px 26px rgba(217,225,249,.5), 0 0 0 5px rgba(217,225,249,.14);
}
.contact-phone-link{ transition:color .2s ease; }
.contact-phone-link:hover{ color:var(--sand); text-decoration:underline; }
.contact-socials-tagline{
  text-align:center; color:var(--dark-muted); font-size:12.5px; line-height:1.8;
  margin:18px 0 0; padding-top:16px; border-top:1px solid rgba(255,255,255,.08);
}
.tagline-link{ color:var(--sand); font-weight:700; transition:color .2s ease; }
.tagline-link:hover{ color:var(--sand-strong); text-decoration:underline; }

/* ---------- Footer ---------- */
footer{ background:var(--paper-2); border-top:1px solid var(--line); padding:44px 0 24px; color:var(--muted); font-size:13.5px; }

/* ---------- Professional minimal footer (3-column row) ----------
   خلفية وألوان ثابتة عمدًا (--sand/--ink، لا تتبع وضع فاتح/غامق) — بنفس
   مبدأ "المرساة الثابتة" المستخدم أصلًا بالهيدر والهيرو (لكن هنا فاتحة
   بدل داكنة)، لضمان تطابق الفوتر دائمًا مع النموذج المرسل بغض النظر عن
   تفضيل الزائر فاتح/غامق. */
.site-footer{ background:var(--sand); color:var(--ink); padding:32px 0; }
.footer-minimal-row{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:22px;
}
.footer-col{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.footer-col-brand{ flex:0 0 auto; }
/* الشعار الكامل (assets/logo-full.png) مرسوم بلون فاتح فاتح (--sand) —
   مصمَّم أصلاً ليظهر فوق خلفية داكنة (الهيدر). فوتر فاتح الآن فخلفيته
   قريبة جدًا من لون الشعار نفسه، فيختفي بلا تحويله للون داكن هنا عبر
   فلتر CSS (يحافظ على الشكل والشفافية، فقط يغيّر اللون). */
.footer-logo-full{ height:58px; width:auto; object-fit:contain; filter:brightness(0) saturate(100%); opacity:.88; }
.footer-col-center{ flex:1 1 220px; text-align:center; font-size:13px; color:var(--ink); gap:4px; }
.footer-col-center .footer-tagline{ font-weight:700; font-size:13.5px; }
.footer-col-center span:not(.footer-tagline){ color:rgba(10,10,11,.6); }
.footer-col-actions{ flex:0 0 auto; }
.footer-careers-link{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(10,10,11,.28); border-radius:999px; padding:10px 24px;
  font-weight:700; font-size:13.5px; color:var(--ink); text-decoration:none;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.footer-careers-link:hover{ background:rgba(10,10,11,.06); border-color:var(--ink); transform:translateY(-2px); text-decoration:none; }
.footer-col-actions-sub{ display:flex; align-items:center; gap:12px; margin-top:8px; }
.footer-terms-link{ color:rgba(10,10,11,.55); font-weight:600; font-size:12px; text-decoration:none; }
.footer-terms-link:hover{ color:var(--ink); }
.footer-socials-item{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; }

@media (min-width:761px){
  /* the floating contact button sits fixed at the bottom-left corner —
     give the actions column (now on the left end of this row) enough
     clearance so it never renders underneath it. */
  .footer-col-actions{ margin-left:170px; }
}
@media (max-width:760px){
  .footer-minimal-row{ flex-direction:column; text-align:center; }
  .footer-col-brand{ order:1; }
  .footer-col-center{ order:2; }
  .footer-col-actions{ order:3; }
}

/* الشارات الاجتماعية بخلفية فاتحة الآن (سابقًا كانت مصمَّمة لخلفية داكنة
   بالوضع الافتراضي) — الأيقونات ذات لون العلامة التجارية (instagram/
   twitter...) غير متأثرة، هذا فقط لأيقونة بلا لون منصة محدد. */
.footer-social-icon{
  width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,11,.05); border:1px solid rgba(10,10,11,.12); color:var(--ink);
  box-shadow:0 4px 12px rgba(10,10,11,.1);
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.footer-social-icon:hover{ transform:translateY(-3px); box-shadow:0 8px 18px rgba(10,10,11,.18); }

.dynamic-social-icon:hover{ transform:translateY(-3px) scale(1.05); }

/* each platform gets its own solid brand-color tile + white icon, with a matching glow shadow */
.footer-social-icon[data-social="instagram"]{ background:#e4405f; border-color:#e4405f; color:#fff; box-shadow:0 6px 16px rgba(228,64,95,.35); }
.footer-social-icon[data-social="instagram"]:hover{ box-shadow:0 10px 24px rgba(228,64,95,.5); }

.footer-social-icon[data-social="tiktok"]{ background:#0a0a0b; border-color:#25f4ee; color:#25f4ee; box-shadow:0 6px 16px rgba(37,244,238,.25); }
.footer-social-icon[data-social="tiktok"]:hover{ box-shadow:0 10px 24px rgba(37,244,238,.4); }

.footer-social-icon[data-social="twitter"]{ background:#1da1f2; border-color:#1da1f2; color:#fff; box-shadow:0 6px 16px rgba(29,161,242,.35); }
.footer-social-icon[data-social="twitter"]:hover{ box-shadow:0 10px 24px rgba(29,161,242,.5); }

.footer-social-icon[data-social="snapchat"]{ background:#fffc00; border-color:#fffc00; color:#14151a; box-shadow:0 6px 16px rgba(255,252,0,.3); }
.footer-social-icon[data-social="snapchat"]:hover{ box-shadow:0 10px 24px rgba(255,252,0,.45); }

.footer-social-icon[data-social="linkedin"]{ background:#0a66c2; border-color:#0a66c2; color:#fff; box-shadow:0 6px 16px rgba(10,102,194,.35); }
.footer-social-icon[data-social="linkedin"]:hover{ box-shadow:0 10px 24px rgba(10,102,194,.5); }

.footer-social-icon[data-social="facebook"]{ background:#1877f2; border-color:#1877f2; color:#fff; box-shadow:0 6px 16px rgba(24,119,242,.35); }
.footer-social-icon[data-social="facebook"]:hover{ box-shadow:0 10px 24px rgba(24,119,242,.5); }

.footer-social-icon[data-social="pinterest"]{ background:#e60023; border-color:#e60023; color:#fff; box-shadow:0 6px 16px rgba(230,0,35,.35); }
.footer-social-icon[data-social="pinterest"]:hover{ box-shadow:0 10px 24px rgba(230,0,35,.5); }

/* ---------- Reveal / toast ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity var(--reveal-duration, .6s) ease, transform var(--reveal-duration, .6s) ease; }

/* per-field visibility from the "🎨 تنسيق النص" editor — reacts live to
   the language toggle (translate.js adds/removes html.lang-en) instead of
   only being checked once when the page first loads */
html:not(.lang-en) .cms-hide-ar{ display:none !important; }
html.lang-en .cms-hide-en{ display:none !important; }

/* per-section reveal effect override (set via data-reveal-effect from the dashboard) */
[data-reveal-effect="fade"] .reveal{ transform:none; }
[data-reveal-effect="none"] .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }

/* per-section hover effect override (set via data-hover-effect from the dashboard) —
   applies to the common "card" elements found within that section */
[data-hover-effect="lift"] .service-card:hover,
[data-hover-effect="lift"] .project-card:hover,
[data-hover-effect="lift"] .mv-card:hover,
[data-hover-effect="lift"] .why-item:hover,
[data-hover-effect="lift"] .process-card:hover,
[data-hover-effect="lift"] .stat-block:hover,
[data-hover-effect="lift"] .about-stat-box:hover{ transform:translateY(-6px); }

[data-hover-effect="scale"] .service-card:hover,
[data-hover-effect="scale"] .project-card:hover,
[data-hover-effect="scale"] .mv-card:hover,
[data-hover-effect="scale"] .why-item:hover,
[data-hover-effect="scale"] .process-card:hover,
[data-hover-effect="scale"] .stat-block:hover,
[data-hover-effect="scale"] .about-stat-box:hover{ transform:scale(1.035); }

[data-hover-effect="glow"] .service-card:hover,
[data-hover-effect="glow"] .project-card:hover,
[data-hover-effect="glow"] .mv-card:hover,
[data-hover-effect="glow"] .why-item:hover,
[data-hover-effect="glow"] .process-card:hover,
[data-hover-effect="glow"] .stat-block:hover,
[data-hover-effect="glow"] .about-stat-box:hover{ box-shadow:0 0 0 2px var(--sand); }

/* Staggered line-by-line reveal for text groups (eyebrow, heading, paragraph)
   inside a .reveal container — each line cascades in slightly after the one
   before it, both scrolling down into view and scrolling back up into view. */
.section-title.reveal > *, .hero-copy.reveal > *, .about-copy.reveal > *, .story-copy.reveal > *, .about-hero-inner.reveal > * {
  opacity:0; transform:translateY(14px);
  transition:opacity .55s ease, transform .55s ease;
}
.section-title.reveal.in > *, .hero-copy.reveal.in > *, .about-copy.reveal.in > *, .story-copy.reveal.in > *, .about-hero-inner.reveal.in > * {
  opacity:1; transform:translateY(0);
}
.section-title.reveal > *:nth-child(1), .hero-copy.reveal > *:nth-child(1), .about-copy.reveal > *:nth-child(1), .story-copy.reveal > *:nth-child(1), .about-hero-inner.reveal > *:nth-child(1){ transition-delay:.05s; }
.section-title.reveal > *:nth-child(2), .hero-copy.reveal > *:nth-child(2), .about-copy.reveal > *:nth-child(2), .story-copy.reveal > *:nth-child(2), .about-hero-inner.reveal > *:nth-child(2){ transition-delay:.16s; }
.section-title.reveal > *:nth-child(3), .hero-copy.reveal > *:nth-child(3), .about-copy.reveal > *:nth-child(3), .story-copy.reveal > *:nth-child(3), .about-hero-inner.reveal > *:nth-child(3){ transition-delay:.27s; }
.section-title.reveal > *:nth-child(4), .hero-copy.reveal > *:nth-child(4), .about-copy.reveal > *:nth-child(4), .story-copy.reveal > *:nth-child(4), .about-hero-inner.reveal > *:nth-child(4){ transition-delay:.38s; }
.section-title.reveal > *:nth-child(5), .hero-copy.reveal > *:nth-child(5), .about-copy.reveal > *:nth-child(5), .story-copy.reveal > *:nth-child(5), .about-hero-inner.reveal > *:nth-child(5){ transition-delay:.49s; }
.reveal.in{ opacity:1; transform:none; }
#toast{
  position:fixed; bottom:20px; right:20px; z-index:99; background:var(--paper); color:var(--text);
  padding:13px 18px; border-radius:14px; box-shadow:0 16px 32px rgba(20,20,35,.12); font-size:13.5px; font-weight:600;
  transform:translateY(14px); opacity:0; pointer-events:none; transition:.28s ease;
}
#toast.show{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .services-grid, .why-grid, .process-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:920px){
  .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .about-media{ order:-1; }
}
@media (max-width:760px){
  .header-actions .btn-sand-sm{ display:none; }
  .section{ padding:56px 0; }
  .check-list{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .cta-band-inner{ flex-direction:column; align-items:flex-start; }
  .footer-grid{ flex-direction:column; }
}
@media (max-width:520px){
  .container{ width:min(var(--container), calc(100% - 56px)); }
  .services-grid, .why-grid, .process-grid{ grid-template-columns:1fr; }
  .about-stat-box{ right:12px; left:12px; justify-content:space-between; }
}

/* ---------- Floating contact button ---------- */
.fab-contact{
  position:fixed; bottom:36px; left:22px; z-index:80;
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  /* the container's own fixed box is far taller than the visible button
     (it reserves room for the menu that only appears on click), so its
     empty area was sitting on top of — and silently swallowing clicks
     meant for — whatever content scrolls underneath it (like the CTA
     band's own "تواصل معنا الآن" button, right at this same screen
     position). Only the actual visible controls inside should be
     clickable; the invisible wrapper itself should not. */
  pointer-events:none;
}
.fab-contact > *{ pointer-events:auto; }
.fab-toggle{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; padding:0;
  background:var(--sand); color:var(--ink); border:1px solid var(--sand-strong);
  border-radius:50%; cursor:pointer;
  font-family:inherit;
  box-shadow:0 16px 34px rgba(20,20,35,.22), 0 6px 18px rgba(183,196,234,.55);
  transition:transform .2s ease, box-shadow .2s ease;
}
.fab-toggle:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 22px 44px rgba(20,20,35,.26), 0 8px 22px rgba(183,196,234,.65); }
.fab-toggle svg{ color:var(--ink); }
.fab-icon-close{ display:none; }
.fab-toggle.is-open .fab-icon-chat{ display:none; }
.fab-toggle.is-open .fab-icon-close{ display:block; }

.fab-menu{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  margin-right:auto;
  opacity:0; pointer-events:none; transform:translateY(10px) scale(.96); transform-origin:bottom center;
  transition:opacity .2s ease, transform .2s ease;
}
.fab-menu.is-open{ opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
.fab-menu-item{
  width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center;
  box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease;
}
.fab-menu-item:hover{ transform:translateY(-2px); }
.fab-whatsapp{ background:#25D366; color:#fff; }
.fab-call{ background:var(--dark); color:#fff; }
.fab-message{ background:var(--sand); color:var(--ink); border:none; cursor:pointer; }

/* ---------- attention-grabbing bubble next to the FAB ---------- */
.msg-attention-bubble{
  position:fixed; z-index:81; bottom:104px; left:22px; max-width:250px;
  background:var(--dark); color:var(--dark-text); border:1px solid var(--dark-line);
  border-radius:14px; border-bottom-left-radius:4px; padding:12px 34px 12px 14px;
  font-size:13px; line-height:1.6; box-shadow:0 16px 40px rgba(0,0,0,.3); cursor:pointer;
  opacity:0; transform:translateY(10px) scale(.96); transition:opacity .25s ease, transform .25s ease;
}
.msg-attention-bubble.is-open{ opacity:1; transform:translateY(0) scale(1); }
.msg-attention-close{
  position:absolute; top:8px; left:8px; width:20px; height:20px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2); background:transparent; color:inherit; opacity:.7;
  font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.msg-attention-close:hover{ opacity:1; }
/* السلة العائمة (.cart-icon-btn) تُضاف فوق زر المحادثة داخل نفس حاوية
   .fab-contact — لما تكون ظاهرة (فيها عناصر) لازم نرفع هذي الفقاعة
   وقائمة "راسلنا" فوقها بالمقدار، حتى ما تتعارض معها بصريًا. الكلاس
   نفسه يُضاف/يُزال من body.has-cart-bubble بواسطة cart.js. */
body.has-cart-bubble .msg-attention-bubble{ bottom:162px; }
@media (max-width:520px){
  .msg-attention-bubble{ bottom:96px; left:16px; max-width:calc(100vw - 100px); }
  body.has-cart-bubble .msg-attention-bubble{ bottom:154px; }
}

/* ---------- "راسلنا" async messaging panel ---------- */
.msg-panel{
  position:fixed; z-index:395; bottom:100px; left:24px;
  width:340px; max-width:calc(100vw - 32px); height:440px; max-height:70vh;
  background:var(--dark); color:var(--dark-body); border:1px solid var(--dark-line);
  border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.4);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; pointer-events:none; transform:translateY(16px) scale(.97);
  transition:opacity .22s ease, transform .22s ease;
}
.msg-panel.is-open{ opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
.msg-panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--dark-line); flex-shrink:0;
}
.msg-panel-header strong{ color:var(--dark-text); font-size:14.5px; }
.msg-panel-close{
  width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  background:transparent; color:inherit; cursor:pointer; font-size:16px; opacity:.7;
  display:flex; align-items:center; justify-content:center;
}
.msg-panel-close:hover{ opacity:1; }
.msg-panel-body{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.msg-empty{ color:var(--dark-muted); font-size:13px; text-align:center; margin:auto; padding:0 10px; }
.msg-bubble{ max-width:82%; padding:9px 13px; border-radius:14px; font-size:13.5px; line-height:1.6; word-break:break-word; }
.msg-from-visitor{ align-self:flex-end; background:var(--sand); color:var(--ink); border-bottom-left-radius:4px; }
.msg-from-admin{ align-self:flex-start; background:rgba(255,255,255,.08); color:var(--dark-body); border-bottom-right-radius:4px; }
.msg-panel-footer{ padding:10px 12px 12px; border-top:1px solid var(--dark-line); flex-shrink:0; }
.msg-start-form{ display:flex; flex-direction:column; gap:8px; }
.msg-start-form input, .msg-start-form textarea{
  width:100%; background:rgba(255,255,255,.06); border:1px solid var(--dark-line); border-radius:10px;
  padding:9px 12px; color:var(--dark-text); font-size:13px; font-family:inherit; resize:none;
}
.msg-start-form input::placeholder, .msg-start-form textarea::placeholder{ color:var(--dark-muted); }
.msg-start-row{ display:flex; gap:8px; }
.msg-start-hint{ color:#ff8080; font-size:11.5px; margin:0; min-height:14px; }
.msg-start-form button{
  background:var(--sand); color:var(--ink); border:none; border-radius:10px;
  padding:10px; font-size:13px; font-weight:700; cursor:pointer;
}
.msg-panel-footer input{
  width:100%; background:rgba(255,255,255,.06); border:1px solid var(--dark-line); border-radius:10px;
  padding:9px 12px; color:var(--dark-text); font-size:13px; margin-bottom:8px;
}
.msg-panel-footer input::placeholder{ color:var(--dark-muted); }
.msg-panel-input-row{ display:flex; gap:8px; margin-bottom:0; }
.msg-panel-input-row input{ margin-bottom:0; flex:1; }
#msgSendBtn{
  background:var(--sand); color:var(--ink); border:none; border-radius:10px;
  padding:0 16px; font-size:13px; font-weight:700; cursor:pointer; flex-shrink:0;
}
body.has-cart-bubble .msg-panel{ bottom:158px; }
@media (max-width:520px){
  .msg-panel{ left:16px; bottom:96px; width:calc(100vw - 32px); }
  body.has-cart-bubble .msg-panel{ bottom:154px; }
}

/* quick-action menu — the single FAB now opens straight into this,
   replacing the old 3-button fan-out (call/whatsapp/message) */
.msg-menu{ display:flex; flex-direction:column; gap:8px; }
.msg-menu-btn{
  display:block; width:100%; text-align:center; text-decoration:none;
  background:rgba(255,255,255,.06); color:var(--dark-text); border:1px solid var(--dark-line);
  border-radius:10px; padding:11px; font-size:13.5px; font-weight:600; cursor:pointer;
  transition:background .15s ease;
}
.msg-menu-btn:hover{ background:rgba(255,255,255,.12); }
.msg-menu-btn.is-whatsapp{ background:rgba(37,211,102,.15); border-color:rgba(37,211,102,.35); }
.msg-menu-btn.is-whatsapp:hover{ background:rgba(37,211,102,.25); }

/* in-site WhatsApp-style handoff screen */
.msg-wa-header{ display:flex; align-items:center; gap:10px; padding:6px 0 14px; border-bottom:1px solid var(--dark-line); margin-bottom:12px; }
.msg-wa-avatar{
  width:38px; height:38px; border-radius:50%; background:rgba(37,211,102,.18);
  display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;
}
.msg-wa-header strong{ display:block; color:var(--dark-text); font-size:13.5px; }
.msg-wa-status{ font-size:11px; color:#25D366; }
.msg-wa-bubble{
  background:rgba(255,255,255,.06); color:var(--dark-body); border-radius:12px; border-bottom-right-radius:4px;
  padding:10px 13px; font-size:13px; line-height:1.6; max-width:88%;
}
.msg-wa-textarea{
  width:100%; background:rgba(255,255,255,.06); border:1px solid var(--dark-line); border-radius:10px;
  padding:9px 12px; color:var(--dark-text); font-size:13px; font-family:inherit; resize:vertical; margin-bottom:8px;
}
.msg-back-btn{ background:none; border:none; color:var(--dark-muted); font-size:12.5px; font-weight:600; cursor:pointer; padding:0 0 10px; display:block; }

@media (max-width:520px){
  .fab-contact{ bottom:28px; left:16px; }
  .fab-toggle{ width:50px; height:50px; }
}

/* ---------- About page ---------- */
.about-hero{
  background:#131315;
  padding:96px 0 76px; text-align:center;
}
.about-hero-inner{ max-width:720px; margin:0 auto; }
.about-hero .eyebrow{ color:var(--dark-text); text-align:center; }
.about-hero h1{
  color:var(--dark-text); font-size:clamp(28px, 4vw, 44px); font-weight:700; line-height:1.35;
  margin-bottom:18px;
}
.about-hero p{ color:var(--dark-muted); font-size:17px; max-width:600px; margin:0 auto; }

.story-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:56px; align-items:start; }
.story-copy p{ color:var(--muted); font-size:16px; margin-bottom:18px; }
.story-copy p:last-child{ margin-bottom:0; }

.story-quote{
  background:var(--dark); color:var(--dark-text); border-radius:20px; padding:28px 26px;
  box-shadow:var(--shadow); position:relative; margin-bottom:24px;
}
.story-quote-mark{ font-size:48px; color:var(--sand); line-height:1; display:block; margin-bottom:6px; font-family:Georgia, serif; }
.story-quote p{ font-size:16px; line-height:1.7; margin-bottom:14px; }
.story-quote-by{ font-size:13px; color:var(--dark-muted); }
.story-check{ grid-template-columns:1fr; }

.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.mv-card{
  background:var(--paper-2);
  border:1px solid var(--line); border-radius:20px; padding:30px;
  box-shadow:0 10px 26px rgba(20,20,35,.08);
}
.mv-icon{
  width:48px; height:48px; border-radius:14px; background:var(--sand); color:var(--ink);
  display:grid; place-items:center; margin-bottom:16px;
}
.mv-card h3{ font-size:23px; font-weight:700; margin-bottom:10px; color:var(--ink); }
.mv-card p{ color:var(--muted); font-size:15px; margin:0; }

/* ---------- client reviews ---------- */
.reviews-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
@media (max-width:900px){ .reviews-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px){ .reviews-grid{ grid-template-columns:1fr; } }
.review-card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:18px; padding:24px;
  box-shadow:var(--card-shadow); display:flex; flex-direction:column; gap:12px;
  transition:box-shadow .22s ease, transform .22s ease;
}
.review-card:hover{ transform:translateY(-3px); box-shadow:var(--card-shadow-hover); }
.review-stars{ color:#D9A441; font-size:16px; letter-spacing:2px; }
.review-comment{ color:var(--muted); font-size:14.5px; line-height:1.8; margin:0; }
.review-author{ display:flex; flex-direction:column; gap:1px; margin-top:auto; padding-top:6px; border-top:1px solid var(--line); }
.review-author strong{ color:var(--ink); font-size:13.5px; }
.review-author span{ color:var(--muted); font-size:12px; }

.stats-strip{ background:var(--dark); padding:52px 0; }
.stats-strip-inner{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat-block{ border-radius:16px; padding:14px 10px; transition:transform .25s ease, background .25s ease; }
.stat-block strong{ display:block; font-size:clamp(28px,4vw,38px); font-weight:700; color:var(--sand); margin-bottom:6px; transition:transform .25s ease; }
.stat-block span{ font-size:13px; color:var(--dark-muted); }
@media (hover:hover){
  .stat-block:hover{ transform:translateY(-6px); background:rgba(217,225,249,.06); }
  .stat-block:hover strong{ transform:scale(1.1); }
}

@media (max-width:900px){
  .story-grid{ grid-template-columns:1fr; }
  .mv-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .stats-strip-inner{ grid-template-columns:1fr 1fr; }
  .about-hero{ padding:72px 0 56px; }
}

.view-all-wrap{ text-align:center; margin-top:36px; }
.view-all-btn{
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 10px 26px rgba(20,20,35,.14); border-width:1.8px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.view-all-btn:hover{ transform:translateY(-3px); box-shadow:0 18px 36px rgba(20,20,35,.2); }
.view-all-btn svg{ transition:transform .2s ease; }
.view-all-btn:hover svg{ transform:translateX(-3px); }

/* ---------- Works gallery page ---------- */
.works-hero{
  padding-bottom:60px;
  background:#131315;
}
.careers-hero{
  background:#131315;
}
.works-count{
  text-align:center; color:var(--muted); font-size:13.5px; margin:-8px 0 28px;
}
.works-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.works-grid .project-card.is-hidden{ display:none; }
.empty-state{
  text-align:center; color:var(--muted); padding:60px 20px; font-size:15px;
}
.empty-state.hidden{ display:none; }

@media (max-width:900px){
  .works-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .works-grid{ grid-template-columns:1fr; }
}

/* ---------- Larger, more comfortable text sizes for desktop reading ---------- */
@media (min-width:1024px){
  body{ font-size:18px; }
  p{ font-size:17.5px; }

  .btn, .btn-sand-sm{ font-size:16px; }
  .pill{ font-size:15.5px; }

  .eyebrow{ font-size:18px; }
  .hero-copy > p{ font-size:19px; }
  .section-title p{ font-size:17px; }
  .about-copy p, .story-copy p, .story-quote p{ font-size:18.5px; }
  .service-card h3, .why-item h3, .project-body h3, .timeline-item h3, .process-card h3{ font-size:19px; }
  .service-card p, .why-item p, .project-body p, .process-card p{ font-size:16px; }
  .mv-card h3{ font-size:19px; }
  .mv-card p{ font-size:17px; }
  .timeline-item p{ font-size:16px; }
  .cta-band h3{ font-size:24px; }
  .cta-band p{ font-size:17px; }
  .form-note, .form-status, .checkbox-field{ font-size:15.5px; }
  .contact-list{ font-size:17px; }
  .contact-dark-desc, .contact-dark-sub{ font-size:16px; }
  .lightbox-meta h3{ font-size:19px; }
  .lightbox-meta p{ font-size:15.5px; }
  .footer-col-brand p, .footer-col a, .footer-col span, footer{ font-size:15.5px; }
  .stats-strip .stat-block span, .about-stat-box span{ font-size:14.5px; }
  .works-count{ font-size:15.5px; }
  .sidebar-links a{ font-size:17px; }
  label{ font-size:14.5px; }
  input, select, textarea{ font-size:16px; }

  h1{ font-size:calc(1em * 1.12); }
  h2{ font-size:calc(1em * 1.1); }
}

/* ---------- Services catalog page (services.html) ---------- */
.services-catalog-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-top:28px; }
@media (max-width:900px){ .services-catalog-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px){ .services-catalog-grid{ grid-template-columns:1fr; } }
.catalog-card{ position:relative; text-decoration:none; }
.catalog-price{ font-size:13.5px; color:var(--muted); margin-top:4px !important; }
.catalog-price strong{ color:var(--ink); font-size:15px; }
.catalog-details-link{ display:inline-block; margin-top:12px; font-size:13px; font-weight:700; color:var(--sand-strong); }

/* بطاقة الخدمة هنا تظهر "كأنها منتج" — صورة/أيقونة كبيرة تملأ عرض
   البطاقة أعلاها بدل الأيقونة الصغيرة (52px) المستخدمة بكل مكان آخر.
   مُقيَّد بـ[data-page="services"] .catalog-card تحديدًا حتى لا يمسّ
   .service-card/.svc-icon الأساسية إطلاقًا — تصميم بطاقات "خدماتنا"
   بالصفحة الرئيسية (services-render.js) يبقى بلا أي تغيير كما طُلب. */
body[data-page="services"] .catalog-card{ padding:0; overflow:hidden; }
body[data-page="services"] .catalog-card .svc-icon{
  width:100%; height:auto; aspect-ratio:4/3; margin:0 0 18px; border-radius:0;
}
body[data-page="services"] .catalog-card .svc-icon svg{ width:56px; height:56px; }
body[data-page="services"] .catalog-card .svc-icon-image{ background:var(--paper); }
body[data-page="services"] .catalog-card h3,
body[data-page="services"] .catalog-card p,
body[data-page="services"] .catalog-card .catalog-price{ margin-inline:22px; }
body[data-page="services"] .catalog-card h3{ margin-top:0; }
body[data-page="services"] .catalog-card .catalog-details-link{ display:block; margin:12px 22px 22px; }

/* ---------- Service detail page ---------- */
.includes-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; margin-top:28px; }
.includes-grid.is-grouped{ display:block; }
.includes-group-title{ font-size:16px; font-weight:700; color:var(--text); margin:26px 0 12px; }
.includes-group-title:first-child{ margin-top:0; }
.includes-group-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
@media (max-width:640px){ .includes-grid{ grid-template-columns:1fr; } .includes-group-grid{ grid-template-columns:1fr; } }
.includes-item{
  display:flex; align-items:flex-start; gap:10px; background:var(--paper-2); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px; font-size:14px; color:var(--muted);
}
.includes-check{
  flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--sand); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
}

.packages-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-top:28px; align-items:start; }
@media (max-width:900px){ .packages-grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; } }
.package-card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:20px; padding:28px 24px;
  box-shadow:0 10px 26px rgba(20,20,35,.08); position:relative; display:flex; flex-direction:column;
}
.package-card.is-popular{ border-color:var(--sand-strong); box-shadow:0 16px 40px rgba(20,20,35,.16); transform:translateY(-6px); }
.package-badge{
  position:absolute; top:-13px; right:20px; background:var(--dark); color:var(--dark-text);
  font-size:11.5px; font-weight:700; padding:5px 14px; border-radius:999px;
}
.package-card h3{ font-size:19px; color:var(--ink); margin:6px 0 10px; }
.package-price{ font-size:28px; font-weight:800; color:var(--ink); margin:0 0 18px; }
.package-price span{ font-size:14px; font-weight:600; color:var(--muted); }
.package-features{ list-style:none; padding:0; margin:0 0 6px; display:flex; flex-direction:column; gap:10px; }
.package-features li{ display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:var(--muted); }
.package-meta{ font-size:12.5px; color:var(--muted); margin:4px 0 0; }

.packages-compare-table-wrap{ overflow-x:auto; margin-top:24px; }
.packages-compare-table{ width:100%; border-collapse:collapse; background:var(--paper-2); border-radius:14px; overflow:hidden; min-width:480px; }
.packages-compare-table th, .packages-compare-table td{ padding:12px 16px; text-align:center; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--ink); }
.packages-compare-table th:first-child, .packages-compare-table td:first-child{ text-align:right; font-weight:600; }
.packages-compare-table thead th{ background:var(--sand); color:var(--ink); font-weight:700; }

.faq-list{ display:flex; flex-direction:column; gap:10px; margin-top:28px; }
.faq-item{
  background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:16px 20px; cursor:pointer;
}
.faq-item summary{ font-weight:700; font-size:14.5px; color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::after{ content:'+'; font-size:20px; color:var(--sand-strong); flex-shrink:0; margin-inline-start:10px; }
.faq-item[open] summary::after{ content:'−'; }
.faq-item p{ margin:12px 0 0; font-size:13.5px; color:var(--muted); line-height:1.8; }

/* ---------- Order tracking compact bar (services.html top) ---------- */
.order-tracking-compact{ padding:28px 0; }
.order-tracking-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--paper-2); border:1px solid var(--line); border-radius:16px; padding:16px 20px;
  box-shadow:0 8px 20px rgba(20,20,35,.06);
}
.order-tracking-bar-label{ display:flex; flex-direction:column; gap:1px; flex-shrink:0; }
.order-tracking-bar-label strong{ font-size:14px; color:var(--ink); }
.order-tracking-bar-label span{ font-size:12px; color:var(--muted); }
.order-tracking-bar input{
  flex:1; min-width:140px; background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:10px 14px; font-size:13.5px; color:var(--ink);
}
.order-tracking-bar button{ flex-shrink:0; }
@media (max-width:640px){
  .order-tracking-bar{ flex-direction:column; align-items:stretch; }
  .order-tracking-bar-label{ flex-direction:row; gap:6px; align-items:baseline; }
}

/* ---------- Cart bubble (floats next to the contact FAB) + panel ---------- */
.cart-icon-btn{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; padding:0;
  /* --sand/--ink (like .fab-toggle right below it) stay the same fixed
     light-bg/dark-text pair in BOTH color modes — unlike --paper, which
     flips dark in dark mode and would turn --ink text illegible on it. */
  background:var(--sand); color:var(--ink); border:1px solid var(--sand-strong);
  border-radius:50%; cursor:pointer; font-family:inherit;
  box-shadow:0 12px 26px rgba(20,20,35,.2), 0 4px 12px rgba(183,196,234,.4);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cart-icon-btn:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 18px 36px rgba(20,20,35,.24), 0 6px 16px rgba(183,196,234,.5); }
.cart-icon-badge{
  position:absolute; top:-5px; right:-5px; background:var(--dark); color:var(--dark-text);
  font-size:10.5px; font-weight:700; min-width:18px; height:18px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
  border:2px solid var(--sand);
}
.cart-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:396;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.cart-overlay.is-open{ opacity:1; pointer-events:auto; }
/* السلة إطار يظهر من الأسفل (Bottom Sheet) بدل درج جانبي — نفس النمط
   المألوف بتطبيقات الجوال (قوائم تطبيقات التوصيل مثلًا). */
.cart-panel{
  position:fixed; left:0; right:0; bottom:0; z-index:397;
  width:100%; max-width:560px; margin-inline:auto; max-height:min(78vh, 640px);
  background:var(--paper); color:var(--text); box-shadow:0 -20px 60px rgba(0,0,0,.25);
  border-radius:22px 22px 0 0;
  display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform .32s cubic-bezier(.2,.9,.3,1.1);
}
.cart-panel.is-open{ transform:translateY(0); }
.cart-panel-grabber{ width:44px; height:5px; border-radius:999px; background:var(--line); margin:10px auto 0; flex-shrink:0; }
.cart-panel-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); flex-shrink:0; }
.cart-panel-header strong{ font-size:15px; }
.cart-panel-close{ width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:transparent; color:inherit; cursor:pointer; font-size:17px; }
.cart-panel-body{ flex:1; overflow-y:auto; padding:16px 18px; }
.cart-panel-footer{ padding:14px 18px 18px; border-top:1px solid var(--line); flex-shrink:0; }
.cart-empty{ color:var(--muted); font-size:13.5px; text-align:center; margin-top:40px; }
.cart-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); }
.cart-item-info{ display:flex; flex-direction:column; gap:2px; }
.cart-item-info strong{ font-size:13.5px; }
.cart-item-info span{ font-size:12px; color:var(--muted); }
.cart-item-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.cart-item-price{ font-size:12.5px; font-weight:700; color:var(--sand-strong); white-space:nowrap; }
.cart-item-remove{ width:22px; height:22px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; font-size:14px; }
.cart-total-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; font-size:14px; }
.cart-total-row strong{ font-size:17px; color:var(--text); }
.cart-back-btn{ background:none; border:none; color:var(--sand-strong); font-size:13px; font-weight:700; cursor:pointer; padding:0; margin-bottom:14px; }
.cart-checkout-title{ font-size:16px; margin:0 0 16px; }
.cart-checkout-form{ display:flex; flex-direction:column; gap:10px; }
.cart-checkout-form input[type="text"], .cart-checkout-form input[type="tel"], .cart-checkout-form input[type="email"]{
  border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-size:13.5px; background:var(--paper-2); color:var(--text);
}
.cart-terms-check{ display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--muted); cursor:pointer; }
.cart-terms-check input{ margin-top:2px; }
.cart-terms-check a{ color:var(--sand-strong); font-weight:700; text-decoration:underline; }
.cart-terms-check a:hover{ color:var(--sand); }
.cart-checkout-error{ color:var(--danger); font-size:12px; min-height:14px; margin:0; }
.cart-success{ text-align:center; padding:30px 10px; }
.cart-success-title{ font-size:18px; font-weight:700; margin:0 0 10px; }
.cart-success-msg{ font-size:13px; color:var(--muted); margin:0; }
.cart-success-number{ font-family:monospace; font-size:22px; font-weight:800; color:var(--sand-strong); margin:8px 0 16px; }
.cart-success-sub{ font-size:12.5px; color:var(--muted); line-height:1.7; margin:0; }

.cart-account-nudge{
  display:flex; align-items:flex-start; gap:10px; margin:0 14px 14px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:14px;
}
.cart-account-nudge svg{ flex-shrink:0; color:var(--sand-strong); margin-top:2px; }
.cart-account-nudge-title{ font-size:13px; font-weight:700; color:var(--text); margin:0 0 3px; }
.cart-account-nudge-sub{ font-size:12px; color:var(--muted); line-height:1.6; margin:0; }

/* ---------- Client account login/register + portal ---------- */
.client-auth-tabs{ display:flex; gap:8px; margin-bottom:20px; background:var(--paper-2); border-radius:12px; padding:5px; }
.client-auth-tab{
  flex:1; background:none; border:none; border-radius:9px; padding:10px; font-size:14px; font-weight:700;
  color:var(--muted); cursor:pointer; transition:background .15s ease, color .15s ease;
}
.client-auth-tab.is-active{ background:var(--paper); color:var(--ink); box-shadow:0 2px 8px rgba(15,23,42,.08); }

.cp-section{ margin-bottom:30px; }
.cp-section h2{ font-size:18px; margin:0 0 14px; }
.cp-item-card{
  display:block; background:var(--paper-2); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; margin-bottom:10px; text-decoration:none; color:inherit; transition:box-shadow .15s ease;
}
.cp-item-card:not(.cp-item-static):hover{ box-shadow:0 8px 20px rgba(15,23,42,.08); }
.cp-item-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.cp-item-top strong{ font-size:14.5px; color:var(--text); }
.cp-item-badge{ font-family:monospace; font-size:12px; background:var(--sand); color:var(--ink); padding:3px 9px; border-radius:999px; font-weight:700; }
.cp-progress-track{ height:6px; background:var(--line); border-radius:999px; overflow:hidden; margin-bottom:8px; }
.cp-progress-fill{ height:100%; background:var(--sand-strong); border-radius:999px; }
.cp-item-sub{ font-size:12.5px; color:var(--muted); }

/* ---------- Client account login/register — professional redesign ---------- */
.client-auth-card{
  background:var(--paper); border:1px solid var(--line); border-radius:22px;
  padding:30px 28px; box-shadow:0 20px 50px rgba(15,23,42,.08);
}
.client-auth-tabs{ display:flex; gap:8px; margin-bottom:22px; background:var(--paper-2); border-radius:12px; padding:5px; }
.client-auth-tab{
  flex:1; background:none; border:none; border-radius:9px; padding:10px; font-size:14px; font-weight:700;
  color:var(--muted); cursor:pointer; transition:background .15s ease, color .15s ease;
}
.client-auth-tab.is-active{ background:var(--paper); color:var(--ink); box-shadow:0 2px 8px rgba(15,23,42,.08); }

.client-input-group{ margin-bottom:16px; }
.client-input-group label{ display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.client-input-wrap{ position:relative; display:flex; align-items:center; }
.client-input-icon{
  position:absolute; inset-inline-start:14px; color:var(--muted); pointer-events:none; flex-shrink:0;
}
.client-input-wrap input{
  width:100%; padding-inline-start:42px; padding-inline-end:14px; padding-block:12px;
  border:1.3px solid var(--line-strong); background:var(--paper-2); border-radius:12px;
  font-size:15px; color:var(--text); outline:none; transition:border-color .18s, box-shadow .18s;
}
.client-input-wrap input:focus{ border-color:var(--sand-strong); box-shadow:0 0 0 3px rgba(183,196,234,.25); }
.client-input-wrap:has(.client-eye-toggle) input{ padding-inline-end:42px; }
.client-eye-toggle{
  position:absolute; inset-inline-end:10px; background:none; border:none; color:var(--muted);
  cursor:pointer; padding:4px; display:flex; align-items:center; justify-content:center;
}
.client-eye-toggle:hover{ color:var(--text); }

.client-forgot-link{ text-align:end; margin:0 0 16px; }
.client-forgot-link a{ font-size:12.5px; color:var(--muted); text-decoration:none; }
.client-forgot-link a:hover{ color:var(--sand-strong); text-decoration:underline; }

.client-google-wrap{ margin-bottom:20px; }
#googleSigninBtn{ display:flex; justify-content:center; }
.client-auth-divider{
  display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--muted); font-size:12.5px;
}
.client-auth-divider::before, .client-auth-divider::after{ content:''; flex:1; height:1px; background:var(--line); }
.cp-section-title{ display:flex; align-items:center; gap:8px; }

/* ---------- international phone field (country code + number) ---------- */
.phone-input-group{ display:flex; gap:6px; }
.phone-country-select{
  flex-shrink:0; width:auto; min-width:88px; max-width:100px;
  padding-inline-end:6px; font-size:13px; text-align:center;
}
.phone-number-input{ flex:1; min-width:0; direction:ltr; text-align:right; }
/* the dark "راسلنا" widget context uses its own dark inputs already —
   the country select just needs to match that same dark styling */
.msg-start-form .phone-country-select{
  background:rgba(255,255,255,.06); border:1px solid var(--dark-line); color:var(--dark-text);
}

/* chat widget — personalized thank-you shown right after registration */
.msg-thankyou{ text-align:center; padding:22px 10px; animation:msgThankYouIn .4s ease; }
.msg-thankyou-icon{
  width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
  background:rgba(46,125,50,.14); color:#2e7d32;
  display:flex; align-items:center; justify-content:center;
}
.msg-thankyou-title{ font-size:15.5px; font-weight:700; color:var(--dark-text); margin:0 0 6px; }
.msg-thankyou-sub{ font-size:13px; color:var(--dark-muted); margin:0; line-height:1.6; }
@keyframes msgThankYouIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

/* ---------- smooth page transitions (fade out on navigation click) ---------- */
html.page-leaving body{ opacity:0 !important; transition:opacity .16s ease !important; }

/* ---------- hero heading word-by-word reveal ---------- */
.hero-word-reveal-ready{ overflow:hidden; }
.hero-word{
  display:inline-block; opacity:0; transform:translateY(22px);
  transition:opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1);
}
.hero-word-reveal-ready.is-revealed .hero-word{ opacity:1; transform:translateY(0); }

/* ---------- smooth dark/light mode crossfade — active only during the
   brief moment of toggling (class removed automatically right after),
   never a permanent global transition that would fight with hover/
   reveal animations elsewhere ---------- */
html.theme-transitioning, html.theme-transitioning *{
  transition:background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important;
}

/* ---------- skeleton loading placeholders (shimmer) — shown in-markup
   immediately, replaced wholesale the moment the real fetch resolves
   (innerHTML= in works.js/services-render.js overwrites these along
   with everything else in the grid, no extra code needed) ---------- */
.skeleton-card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:18px; overflow:hidden;
  padding:14px; display:flex; flex-direction:column; gap:10px;
}
.skeleton-thumb{
  aspect-ratio:4/3; border-radius:12px;
  background:linear-gradient(100deg, var(--line) 30%, var(--sand-light) 50%, var(--line) 70%);
  background-size:200% 100%; animation:skeletonShimmer 1.4s ease-in-out infinite;
}
.skeleton-line{
  height:12px; border-radius:6px;
  background:linear-gradient(100deg, var(--line) 30%, var(--sand-light) 50%, var(--line) 70%);
  background-size:200% 100%; animation:skeletonShimmer 1.4s ease-in-out infinite;
}
@keyframes skeletonShimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce){
  .skeleton-thumb, .skeleton-line{ animation:none; opacity:.6; }
}

/* ---------- client portal — dashboard redesign ---------- */
.cp-hero-compact{ padding-top:36px !important; padding-bottom:36px !important; }
.cp-hero-compact h1{ font-size:26px; margin:6px 0 4px; }

.cp-section-header{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.cp-section-header .cp-section-title{ margin:0; }
.cp-new-request-btn{ width:auto; padding:9px 18px; font-size:13px; }

/* stats row */
.cp-stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:22px; }
.cp-stat-box{
  background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:14px 8px;
  text-align:center; box-shadow:var(--card-shadow);
}
.cp-stat-box strong{ display:block; font-size:20px; color:var(--ink); }
.cp-stat-box span{ font-size:11px; color:var(--muted); }
.cp-stat-box.has-attention{ border-color:rgba(217,180,20,.4); background:rgba(217,180,20,.06); }
.cp-stat-box.has-attention strong{ color:#a8860a; }
@media (max-width:520px){ .cp-stats-row{ grid-template-columns:repeat(2,1fr); } }

/* current project hero card */
.cp-current-project-card{
  background:var(--paper); border:1px solid var(--card-border); border-radius:20px; padding:22px;
  box-shadow:var(--card-shadow-hover);
}
.cp-current-project-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.cp-current-project-top strong{ font-size:16px; }
.cp-status-pill{ background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:700; }
.cp-progress-track-lg{ height:10px; }
.cp-progress-percent{ text-align:end; font-size:12.5px; font-weight:700; color:var(--sand-strong); margin-top:4px; }
.cp-current-project-meta{ display:flex; gap:24px; margin-top:16px; flex-wrap:wrap; }
.cp-current-project-meta div{ display:flex; flex-direction:column; gap:2px; }
.cp-current-project-meta span{ font-size:11.5px; color:var(--muted); }
.cp-current-project-meta strong{ font-size:13.5px; }
.cp-other-projects{ margin-top:14px; }
.cp-other-projects-label{ font-size:12px; color:var(--muted); margin:0 0 8px; }

/* last update card */
.cp-last-update-card{
  background:rgba(183,196,234,.14); border:1px solid var(--card-border); border-radius:16px; padding:16px 18px;
}
.cp-last-update-label{ font-size:12px; font-weight:700; color:var(--sand-strong); margin:0 0 6px; }
.cp-last-update-text{ font-size:14px; color:var(--text); margin:0 0 8px; line-height:1.6; }
.cp-last-update-footer{ display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--muted); }
.cp-last-update-footer a{ color:var(--sand-strong); font-weight:700; text-decoration:none; }

/* payments */
.cp-payment-card{ background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:10px; }
.cp-payment-project-name{ font-size:13px; font-weight:700; margin:0 0 10px; }
.cp-payment-numbers{ display:flex; gap:28px; }
.cp-payment-numbers span{ display:block; font-size:11px; color:var(--muted); }
.cp-payment-numbers strong{ font-size:15px; }
.cp-payment-pending-note{ font-size:12px; color:#a8860a; margin:10px 0 0; }

/* chat card */
.cp-chat-card{ background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:16px; }
.cp-chat-prompt{ font-size:13.5px; color:var(--muted); margin:0 0 12px; }

/* account section */
.cp-account-summary{ padding:16px 18px; }
.cp-account-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; }
.cp-account-row:last-of-type{ border-bottom:none; }
.cp-account-row span{ color:var(--muted); }
.cp-security-details{ margin-top:14px; }
.cp-security-details summary{ cursor:pointer; font-size:13px; font-weight:700; color:var(--sand-strong); padding:6px 0; }

/* mobile bottom navigation */
.cp-bottom-nav{ display:none; }
@media (max-width:768px){
  .cp-bottom-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:396;
    background:var(--dark); border-top:1px solid var(--dark-line);
    padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  }
  .cp-bottom-nav a, .cp-bottom-nav button{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; color:var(--dark-muted); font-size:10.5px; font-family:inherit;
    padding:4px; cursor:pointer; text-decoration:none;
  }
  .cp-bottom-nav a:hover, .cp-bottom-nav button:hover{ color:var(--sand); }
  /* room for the fixed bottom nav so the last section + FAB don't hide behind it */
  body[data-page="client-portal"] .site-footer{ margin-bottom:64px; }
  body[data-page="client-portal"] .fab-contact{ bottom:76px; }
}
.cart-login-prompt-sub{ font-size:13px; color:var(--muted); line-height:1.7; margin:0 14px 16px; }

/* ---------- chat widget — inline quick-action chips (replace the old
   separate menu screen) ---------- */
.msg-quick-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px; }
.msg-quick-chips:empty{ display:none; padding:0; }
.msg-chip{
  background:rgba(255,255,255,.06); color:var(--dark-text); border:1px solid var(--dark-line);
  border-radius:999px; padding:6px 13px; font-size:12px; font-weight:600; cursor:pointer;
  text-decoration:none; transition:background .15s ease; white-space:nowrap;
}
.msg-chip:hover{ background:rgba(255,255,255,.14); }

/* ---------- FAB smart unread badge ---------- */
.fab-unread-badge{
  position:absolute; top:-3px; left:-3px; min-width:19px; height:19px; padding:0 4px;
  background:#e0245e; color:#fff; border-radius:999px; border:2px solid var(--bg);
  font-size:10.5px; font-weight:800; display:flex; align-items:center; justify-content:center;
  line-height:1;
}
.fab-unread-badge.is-dot{ min-width:11px; width:11px; height:11px; padding:0; background:#d9a441; }
.msg-system-notice{
  text-align:center; font-size:11.5px; color:var(--dark-muted); background:rgba(255,255,255,.05);
  border-radius:999px; padding:5px 14px; margin:8px auto; max-width:85%;
}

/* ---------- chat widget — attachments ---------- */
.msg-attach-btn{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:36px; height:36px; border-radius:50%; cursor:pointer; color:var(--dark-muted);
  transition:background .15s ease, color .15s ease;
}
.msg-attach-btn:hover{ background:rgba(255,255,255,.08); color:var(--dark-text); }
.msg-attach-status{ font-size:11px; color:var(--dark-muted); padding:0 14px 8px; margin:0; }
.msg-attachment-img{ max-width:100%; max-height:180px; border-radius:10px; display:block; margin-bottom:6px; cursor:pointer; }
.msg-attachment-file{
  display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.08); border-radius:8px;
  padding:8px 10px; font-size:12.5px; color:inherit; text-decoration:none; margin-bottom:4px;
}

/* ---------- chat widget — inline service request flow ---------- */
.msg-service-picker{ padding:6px 14px; display:flex; flex-direction:column; gap:8px; }
.msg-service-picker-title{ font-size:13px; font-weight:700; color:var(--dark-text); margin:0 0 4px; }
.msg-service-option{
  display:flex; align-items:center; justify-content:space-between; width:100%; text-align:right;
  background:rgba(255,255,255,.06); color:var(--dark-text); border:1px solid var(--dark-line);
  border-radius:10px; padding:11px 14px; font-size:13px; font-weight:600; cursor:pointer;
  transition:background .15s ease;
}
.msg-service-option:hover{ background:rgba(255,255,255,.12); }
.msg-package-option{ flex-direction:column; align-items:flex-start; gap:2px; }
.msg-package-option span{ font-size:12px; color:var(--dark-muted); font-weight:400; }
.msg-service-option.is-back{ background:none; border:none; color:var(--dark-muted); justify-content:center; padding:6px; }
.msg-request-summary{ background:rgba(255,255,255,.05); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.msg-request-summary > div{ display:flex; justify-content:space-between; font-size:12.5px; }
.msg-request-summary span{ color:var(--dark-muted); }
.msg-request-success{ text-align:center; padding:20px 10px; }
.msg-request-success p{ font-size:13.5px; color:var(--dark-text); margin:0 0 8px; }
.msg-request-success strong{ font-size:20px; color:var(--sand); font-family:monospace; }

/* ---------- FAB button — dashboard-driven animation options ---------- */
.fab-toggle.fab-anim-pulse{ animation:fabPulse 1.8s ease-in-out infinite; }
.fab-toggle.fab-anim-bounce{ animation:fabBounce 2.6s ease-in-out infinite; }
@keyframes fabPulse{
  0%,100%{ box-shadow:0 16px 34px rgba(20,20,35,.22), 0 6px 18px rgba(183,196,234,.55), 0 0 0 0 rgba(183,196,234,.5); }
  50%{ box-shadow:0 16px 34px rgba(20,20,35,.22), 0 6px 18px rgba(183,196,234,.55), 0 0 0 12px rgba(183,196,234,0); }
}
@keyframes fabBounce{ 0%,85%,100%{ transform:translateY(0); } 92%{ transform:translateY(-8px); } }
@media (prefers-reduced-motion: reduce){
  .fab-toggle.fab-anim-pulse, .fab-toggle.fab-anim-bounce{ animation:none; }
}
.msg-login-prompt-sub{ font-size:12px; color:var(--dark-muted); line-height:1.6; margin:-4px 0 4px; }
.msg-service-suggestion-btn{
  display:flex; align-items:center; gap:6px; margin-top:8px;
  background:var(--sand,#DBE4FF); color:var(--ink,#0A0A0B); border-radius:10px;
  padding:9px 13px; font-size:12.5px; font-weight:700; text-decoration:none; width:fit-content;
  border:none; cursor:pointer; font-family:inherit;
}
.msg-service-suggestion-btn.is-whatsapp{ background:#25D366; color:#fff; }

/* ================================================================
   حاسبة التسعير التفاعلية (services.html) — pricing-calculator.js
   ================================================================ */
.pc-section{ padding-bottom:60px; }
/* the sticky bar is position:fixed (visible everywhere on this page, not
   just inside the calculator section) — reserve room so it never
   permanently covers the CTA band / footer beneath it. */
body[data-page="services"]{ padding-bottom:92px; }
@media (max-width:640px){ body[data-page="services"]{ padding-bottom:150px; } }
.pc-intro{ text-align:center; max-width:680px; margin:0 auto 46px; }
.pc-intro h2{ font-size:clamp(26px, 3vw, 34px); font-weight:700; margin-bottom:8px; }
.pc-intro p{ color:var(--muted); font-size:16px; margin:0; line-height:1.8; }

/* ---------- Package cards ---------- */
.pc-packages{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:22px;
  margin-bottom:56px; align-items:stretch;
}
.pc-pkg-card{
  position:relative; background:var(--paper-2); border:1px solid var(--card-border);
  border-radius:var(--radius-card, 20px); padding:28px 24px 24px; box-shadow:var(--card-shadow);
  display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pc-pkg-card:hover{ transform:translateY(-4px); box-shadow:var(--card-shadow-hover); }
.pc-pkg-card.is-popular{
  border-color:var(--sand-strong); background:var(--paper);
  transform:scale(1.035); box-shadow:0 20px 46px rgba(183,196,234,.35);
}
.pc-pkg-card.is-popular:hover{ transform:scale(1.035) translateY(-4px); }
.pc-pkg-card.is-active{ border-color:var(--sand-strong); box-shadow:0 0 0 3px var(--sand), var(--card-shadow-hover); }
.pc-pkg-badge{
  position:absolute; top:-13px; inset-inline:0; margin-inline:auto; width:fit-content;
  background:var(--sand); color:var(--ink); font-size:12px; font-weight:800; letter-spacing:.02em;
  padding:6px 16px; border-radius:999px; box-shadow:0 6px 14px rgba(183,196,234,.5);
}
.pc-pkg-card h3{ font-size:20px; margin:6px 0 4px; }
.pc-pkg-tagline{ font-size:13.5px; color:var(--muted); margin:0 0 16px; line-height:1.7; min-height:22px; }
.pc-pkg-price{
  font-size:30px; font-weight:800; color:var(--ink); margin-bottom:18px;
  display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
}
.pc-pkg-price span{ font-size:13px; font-weight:400; color:var(--muted); }
.pc-pkg-price em{ font-style:normal; font-size:13px; font-weight:400; color:var(--muted); }
.pc-pkg-includes{ list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; }
.pc-pkg-includes li{ font-size:13.5px; color:var(--ink); display:flex; align-items:flex-start; gap:8px; line-height:1.6; }
.pc-pkg-includes li::before{ content:'✓'; color:var(--sand-strong); font-weight:800; flex-shrink:0; }
.pc-pkg-select{ width:100%; }

/* ---------- Modifiers (speed / org size) ---------- */
.pc-modifiers{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:26px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-card, 20px);
  padding:24px 26px; margin-bottom:32px; box-shadow:var(--shadow-sm);
}
.pc-modifier-group label.pc-modifier-label{ display:block; font-weight:700; font-size:14px; margin-bottom:12px; color:var(--ink); }
.pc-pill-row{ display:flex; gap:8px; flex-wrap:wrap; }
.pc-pill{
  border:1.5px solid var(--card-border); background:transparent; color:var(--ink);
  padding:9px 18px; border-radius:999px; font-size:13.5px; font-weight:600; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.pc-pill:hover{ border-color:var(--sand-strong); transform:translateY(-1px); }
.pc-pill.is-active{ background:var(--sand); border-color:var(--sand-strong); color:var(--ink); font-weight:800; }

/* ---------- Category accordion ---------- */
.pc-categories{ display:flex; flex-direction:column; gap:14px; margin-bottom:40px; }
.pc-category{
  background:var(--paper-2); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  transition:border-color .2s ease;
}
.pc-category[open]{ border-color:var(--card-border); }
.pc-category summary{
  list-style:none; cursor:pointer; padding:18px 22px; display:flex; align-items:center;
  justify-content:space-between; gap:14px; font-weight:700; font-size:15px; color:var(--ink);
}
.pc-category summary::-webkit-details-marker{ display:none; }
.pc-category summary::after{
  content:'+'; font-size:20px; color:var(--sand-strong); flex-shrink:0; order:3; margin-inline-start:6px;
}
.pc-category[open] summary::after{ content:'−'; }
.pc-cat-title{ display:flex; align-items:center; gap:10px; }
.pc-cat-icon{ font-size:19px; }
.pc-cat-subtotal{ font-size:13px; font-weight:800; color:var(--sand-strong); order:2; white-space:nowrap; }
.pc-cat-body{ padding:2px 22px 18px; display:flex; flex-direction:column; gap:4px; }
.pc-item-row{
  display:flex; align-items:center; gap:12px; padding:12px 8px; border-radius:12px;
  cursor:pointer; transition:background .15s ease;
}
.pc-item-row:hover{ background:var(--sand-bg); }
.pc-item-row input[type="checkbox"]{
  width:19px; height:19px; accent-color:var(--sand-strong); flex-shrink:0; cursor:pointer;
}
.pc-item-name{ flex:1; font-size:14px; color:var(--ink); }
.pc-item-info{
  width:19px; height:19px; border-radius:50%; border:1px solid var(--card-border); color:var(--muted);
  display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; cursor:help;
}
.pc-item-info:hover, .pc-item-info:focus{ border-color:var(--sand-strong); color:var(--sand-strong); outline:none; }
.pc-item-price{ font-size:13.5px; font-weight:700; color:var(--muted); white-space:nowrap; }

/* ---------- Tooltip ---------- */
.pc-tooltip{
  position:absolute; z-index:500; max-width:260px; background:var(--ink); color:#fff;
  font-size:12.5px; line-height:1.7; padding:10px 14px; border-radius:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.3); opacity:0; pointer-events:none;
  transform:translateY(4px); transition:opacity .15s ease, transform .15s ease;
}
.pc-tooltip.is-open{ opacity:1; transform:translateY(0); }
html.dark-mode .pc-tooltip{ background:#F1F4FC; color:#0A0A0B; }

/* ---------- Sticky summary bar ---------- */
#pcStickyBar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:120;
  max-width:900px; margin-inline:auto;
  background:var(--dark); color:var(--dark-text); border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.35); padding:16px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  opacity:.55; transition:opacity .25s ease, transform .25s ease;
}
#pcStickyBar.has-items{ opacity:1; }
.pc-sticky-info{ display:flex; flex-direction:column; gap:6px; min-width:0; flex:1; }
.pc-sticky-price-row{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.pc-sticky-price-row span{ font-size:12px; color:var(--dark-muted); }
#pcStickyPrice{ font-size:26px; font-weight:800; color:var(--dark-text); }
.pc-sticky-currency{ font-size:13px; color:var(--dark-muted); }
#pcStickyDays{ font-size:12.5px; color:var(--dark-muted); }
#pcStickyDiscount{ font-size:12px; color:var(--sand-strong); font-weight:700; }
.pc-sticky-chips{ display:flex; gap:6px; flex-wrap:wrap; max-width:100%; }
.pc-chip{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:var(--dark-text);
  font-size:11.5px; padding:5px 11px; border-radius:999px; white-space:nowrap;
}
.pc-sticky-empty{ font-size:12.5px; color:var(--dark-muted); }
#pcStickyCta{ flex-shrink:0; }
#pcStickyCta:disabled{ opacity:.4; cursor:not-allowed; }
@media (max-width:640px){
  #pcStickyBar{ bottom:8px; padding:14px 16px; flex-direction:column; align-items:stretch; }
  .pc-sticky-chips{ display:none; }
  #pcStickyCta{ width:100%; }
}

/* ---------- Request modal ---------- */
.pc-modal-overlay{
  position:fixed; inset:0; background:rgba(10,10,11,.72); z-index:300;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.pc-modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.pc-modal{
  background:var(--paper); border-radius:24px; padding:32px 28px; max-width:480px; width:100%;
  max-height:88vh; overflow-y:auto; position:relative; box-shadow:0 30px 70px rgba(0,0,0,.35);
  transform:translateY(14px) scale(.97); transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
  color:var(--ink);
}
.pc-modal-overlay.is-open .pc-modal{ transform:translateY(0) scale(1); }
.pc-modal-close{
  position:absolute; top:14px; left:14px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s;
}
.pc-modal-close:hover{ background:var(--paper-2); color:var(--ink); }
.pc-modal h3{ font-size:19px; margin:0 0 18px; }
.pc-modal-summary{
  background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:20px;
}
#pcModalSummaryList{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:6px; }
#pcModalSummaryList li{ display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--muted); }
#pcModalSummaryList li span{ color:var(--ink); font-weight:700; white-space:nowrap; }
.pc-modal-summary-total{
  display:flex; justify-content:space-between; align-items:center; padding-top:10px;
  border-top:1px solid var(--line); font-weight:800; font-size:16px; color:var(--ink);
}
.pc-modal-summary-total small{ display:block; font-weight:500; font-size:12px; color:var(--muted); margin-top:2px; }
.pc-modal-form{ display:flex; flex-direction:column; gap:14px; }
.pc-modal-form .field{ display:flex; flex-direction:column; gap:6px; }
.pc-modal-error{ color:var(--danger, #c0392b); font-size:13px; min-height:18px; }
.pc-modal-form .btn{ width:100%; margin-top:4px; display:flex; align-items:center; justify-content:center; gap:10px; }

/* ---------- drag & drop attachments zone ---------- */
.pc-dropzone{
  border:1.5px dashed var(--card-border); border-radius:14px; padding:22px 16px;
  text-align:center; cursor:pointer; background:var(--paper-2); transition:border-color .2s ease, background .2s ease;
  font-size:13px; color:var(--muted); line-height:1.7;
}
.pc-dropzone-main{ font-weight:700; color:var(--ink); }
.pc-dropzone-hint{ display:block; font-size:11.5px; color:var(--muted); margin-top:4px; }
.pc-dropzone:hover, .pc-dropzone:focus-visible{ border-color:var(--sand-strong); background:var(--sand-bg); outline:none; }
.pc-dropzone.is-dragover{ border-color:var(--sand-strong); background:var(--sand-bg); transform:scale(1.01); }
.pc-file-list{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.pc-file-chip{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:10px; padding:8px 12px;
  font-size:12.5px; color:var(--ink);
}
.pc-file-chip-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc-file-chip-name em{ font-style:normal; color:var(--muted); }
.pc-file-chip-remove{
  background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:14px;
  flex-shrink:0; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.pc-file-chip-remove:hover{ background:var(--sand); color:var(--ink); }

/* ---------- submit button loading spinner ---------- */
.pc-btn-spinner{
  width:16px; height:16px; border-radius:50%; flex-shrink:0;
  border:2px solid rgba(10,10,11,.25); border-top-color:var(--ink);
  animation:pc-spin .7s linear infinite;
}
@keyframes pc-spin{ to{ transform:rotate(360deg); } }

.pc-modal-success{ text-align:center; padding:6px 0; }
.pc-modal-success-icon{ font-size:44px; margin-bottom:10px; }
.pc-modal-success h3{ margin-bottom:6px; }
.pc-modal-success p{ font-size:14px; color:var(--muted); margin:0 0 6px; line-height:1.8; }
.pc-modal-success-num{
  font-size:22px !important; font-weight:800; letter-spacing:.5px;
  color:var(--ink) !important; background:var(--sand); border-radius:12px; padding:10px 16px;
  margin:8px 0 18px !important; display:inline-block;
}
.pc-modal-success-sub{ color:var(--muted); }

@media (max-width:520px){
  .pc-pkg-card.is-popular{ transform:none; }
  .pc-pkg-card.is-popular:hover{ transform:translateY(-4px); }
  .pc-modifiers{ padding:20px 18px; }
}

/* ================================================================
   صفحة الشروط والأحكام (terms.html)
   ================================================================ */
.terms-doc{ padding:56px 0 30px; }
.terms-updated{ font-size:12.5px; color:var(--muted); margin:0 0 6px; }
.terms-intro{ font-size:14.5px; color:var(--muted); line-height:1.9; margin:0 0 40px; padding-bottom:28px; border-bottom:1px solid var(--line); }
.terms-section{ margin-bottom:34px; }
.terms-section h2{
  display:flex; align-items:center; gap:12px; font-size:19px; margin:0 0 12px;
}
.terms-num{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:32px; height:32px; border-radius:10px; background:var(--sand); color:var(--ink);
  font-size:13px; font-weight:800;
}
.terms-section p{ font-size:14.5px; color:var(--muted); line-height:1.9; margin:0 0 10px; }
.terms-section p:last-child{ margin-bottom:0; }
.terms-revision-list{
  list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:8px;
}
.terms-revision-list li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:12px 16px;
  font-size:13.5px;
}
.terms-revision-list li strong{ color:var(--ink); }
.terms-revision-list li span{ color:var(--muted); }
.terms-actions{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:44px; padding-top:28px; border-top:1px solid var(--line);
}
.terms-actions .btn{ flex:1; min-width:180px; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
@media (max-width:520px){
  .terms-doc{ padding:36px 0 20px; }
  .terms-actions{ flex-direction:column; }
  .terms-actions .btn{ width:100%; }
}