/*
Theme Name: الحضارة للعوازل
Theme URI: https://alhadaraksa.com
Author: AL-HADARA Insulation
Author URI: https://alhadaraksa.com
Description: قالب ووردبريس احترافي مخصص لشركة الحضارة للعوازل والمقاولات العامة. مصمم بالكامل بدون أي إضافات (Plugins) مطلوبة، يدعم الوضع الليلي والنهاري، متجاوب بالكامل مع جميع الأجهزة، محسّن لمحركات البحث والسرعة، وقابل للتحكم الكامل من لوحة تحكم ووردبريس.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: al-hadara
Tags: full-site-editing, custom-colors, custom-logo, custom-menu, featured-images, rtl-language-support, translation-ready, threaded-comments

شركة الحضارة للعوازل والمقاولات العامة - AL-HADARA INSULATION
*/

/* =========================================================
   1) CSS RESET (Modern, minimal, prefers-reduced-motion aware)
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding-inline-start: 0; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
/* لا نضع overflow-x على html/body إطلاقًا (بأي قيمة غير visible): أي قيمة غير visible
 * هنا (hidden أو حتى clip) تجبر المتصفح — حسب مواصفات CSSOM — على تحويل body إلى حاوية
 * تمرير مستقلة بنفسها، وهو ما يكسر position:sticky بصمت لأي عنصر بداخلها (مثل الهيدر
 * الثابت) دون ظهور أي خطأ واضح في الـConsole. الحماية من التمرير الأفقي تأتي بدلًا من
 * ذلك من: max-width:100% على الصور، احتواء العناصر العريضة بحاوية overflow-x:auto خاصة
 * بها، وتصميم متجاوب حقيقي لكل قسم (تم التحقق من عدم وجود Overflow أفقي فعليًا). */
html, body { max-width: 100%; }

/* =========================================================
   2) THEME VARIABLES (Light default + Dark override)
   ========================================================= */
:root{
  /* Brand palette — مستخرجة مباشرة من ألوان شعار الحضارة (تحليل بكسل فعلي لملف اللوجو):
     • عائلة "navy/charcoal" من لون أيقونة المبنى في الشعار (~#36383d).
     • عائلة "gold" من لون نص "الحضارة للعوازل" الذهبي في الشعار (~#e5ad73).
     كل الألوان الدلالية بالأسفل (primary/accent وتدرجاتها) مشتقة من هذين المتغيرين فقط،
     لذلك يمكن تحديث هوية الموقع بالكامل مستقبلًا من هذا المكان الوحيد. */
  --c-navy-950:#111318;
  --c-navy-900:#1c1f26;
  --c-navy-800:#323641;
  --c-navy-700:#444a57;
  --c-navy-600:#5c6273;
  --c-gold-400:#eac8a4;
  --c-gold-500:#e5ad73;
  --c-gold-600:#e08f3b;
  --c-gold-700:#ca751d;

  /* Surface & text - LIGHT */
  --bg: #ffffff;
  --bg-alt: #f6f4ef;
  --bg-soft: #eef2f6;
  --surface: #ffffff;
  --surface-2: #f6f4ef;
  --border: #e3e2dd;
  --border-strong: #cfcec7;
  --text: #14202b;
  --text-muted: #4c5a67;
  --text-faint: #74808c;
  --on-primary: #ffffff;
  --on-accent: #1a1300;

  --primary: var(--c-navy-800);
  --primary-hover: var(--c-navy-700);
  --accent: var(--c-gold-500);
  --accent-hover: var(--c-gold-600);

  --success: #1c7c4d;
  --danger: #c23b3b;

  --shadow-sm: 0 1px 2px rgba(10,20,30,.06), 0 1px 1px rgba(10,20,30,.04);
  --shadow-md: 0 6px 20px rgba(10,20,30,.08);
  --shadow-lg: 0 18px 45px rgba(10,20,30,.14);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --container: 1240px;
  --gap: clamp(1rem, 2vw, 1.75rem);

  --ff-base: 'Cairo', 'Tahoma', 'Segoe UI', system-ui, sans-serif;
  --ease: cubic-bezier(.22,.85,.32,1);
}

/* DARK MODE — via explicit toggle (data-theme) or OS preference when no explicit choice saved */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1016; --bg-alt:#14171f; --bg-soft:#1b1f27;
    --surface:#20232d; --surface-2:#171a21;
    --border:#2c303a; --border-strong:#3d414d;
    --text:#f1f2f4; --text-muted:#b6bac3; --text-faint:#8e939f;
    --on-primary:#ffffff; --on-accent:#1a1300;
    --primary: var(--c-navy-600); --primary-hover: var(--c-navy-700);
    --accent: var(--c-gold-400); --accent-hover: var(--c-gold-500);
    --success:#3fbf83; --danger:#e2685f;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --shadow-md: 0 10px 26px rgba(0,0,0,.45);
    --shadow-lg: 0 22px 55px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --bg:#0e1016; --bg-alt:#14171f; --bg-soft:#1b1f27;
  --surface:#20232d; --surface-2:#171a21;
  --border:#2c303a; --border-strong:#3d414d;
  --text:#f1f2f4; --text-muted:#b6bac3; --text-faint:#8e939f;
  --on-primary:#ffffff; --on-accent:#1a1300;
  --primary: var(--c-navy-600); --primary-hover: var(--c-navy-700);
  --accent: var(--c-gold-400); --accent-hover: var(--c-gold-500);
  --success:#3fbf83; --danger:#e2685f;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 10px 26px rgba(0,0,0,.45);
  --shadow-lg: 0 22px 55px rgba(0,0,0,.55);
}
:root[data-theme="light"]{
  --bg: #ffffff; --bg-alt: #f6f4ef; --bg-soft:#eef2f6;
  --surface: #ffffff; --surface-2: #f6f4ef;
  --border: #e3e2dd; --border-strong:#cfcec7;
  --text: #14202b; --text-muted: #4c5a67; --text-faint:#74808c;
  --primary: var(--c-navy-800); --primary-hover: var(--c-navy-700);
  --accent: var(--c-gold-500); --accent-hover: var(--c-gold-600);
}

/* =========================================================
   3) FONTS (self-hosted, subset, swap)
   ========================================================= */
@font-face{
  font-family:'Cairo'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/cairo-arabic-400.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC,U+200C-200E;
}
@font-face{
  font-family:'Cairo'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/cairo-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F;
}
@font-face{
  font-family:'Cairo'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/cairo-arabic-700.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC,U+200C-200E;
}
@font-face{
  font-family:'Cairo'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/cairo-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F;
}

/* =========================================================
   4) BASE
   ========================================================= */
html{ background:var(--bg); }
body{
  font-family:var(--ff-base);
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.75;
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
h1,h2,h3,h4{ font-weight:700; line-height:1.35; color:var(--text); }
h1{ font-size:clamp(1.9rem, 1.35rem + 2.2vw, 3.2rem); }
h2{ font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2.35rem); }
h3{ font-size:clamp(1.15rem, 1rem + .7vw, 1.5rem); }
p{ color:var(--text-muted); }
a{ transition:color .18s var(--ease); }
strong{ color:var(--text); }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1rem, 4vw, 2rem); }
.section{ padding-block: clamp(3rem, 6vw, 5.5rem); }
.section-alt{ background:var(--bg-alt); }
.section-head{ text-align:center; max-width:760px; margin-inline:auto; margin-bottom:clamp(2rem,4vw,3rem); }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--accent-hover); background:color-mix(in srgb, var(--accent) 14%, transparent);
  font-weight:700; font-size:.82rem; padding:.4rem 1rem; border-radius:var(--radius-full);
  margin-bottom:1rem;
}
:root[data-theme="dark"] .eyebrow, @media (prefers-color-scheme:dark){ .eyebrow{ color:var(--accent);} }
.section-head p{ font-size:1.05rem; }

.visually-hidden{ position:absolute !important; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px; }
.skip-link{
  position:fixed; inset-inline-start:1rem; top:-4rem; z-index:999;
  background:var(--primary); color:var(--on-primary); padding:.75rem 1.25rem; border-radius:var(--radius-sm);
  transition:top .2s var(--ease); font-weight:700;
}
.skip-link:focus{ top:1rem; }

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

/* =========================================================
   5) BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:700; font-size:1rem; line-height:1; white-space:nowrap;
  padding:.95rem 1.6rem; border-radius:var(--radius-full);
  border:2px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
  min-height:48px;
}
.btn svg{ width:1.15em; height:1.15em; flex:none; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--accent-hover); box-shadow:var(--shadow-md); color:var(--on-accent); }
.btn-outline{ background:transparent; border-color:currentColor; color:var(--on-primary); }
.btn-ghost{ background:color-mix(in srgb, currentColor 10%, transparent); color:inherit; }
.btn-dark{ background:var(--primary); color:#fff; }
.btn-dark:hover{ background:var(--primary-hover); color:#fff; }
.btn-whatsapp{ background:#25D366; color:#06210f; }
.btn-whatsapp:hover{ background:#1fbd59; color:#06210f; }
.btn-block{ width:100%; }
.btn-sm{ padding:.6rem 1.1rem; font-size:.9rem; min-height:auto; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none; }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--radius-full);
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  transition:background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.icon-btn:hover{ background:var(--primary); color:#fff; border-color:var(--primary); transform:translateY(-2px); }
.icon-btn svg{ width:20px; height:20px; }

/* =========================================================
   6) HEADER
   ========================================================= */
.site-header{
  /* الحاوية الخارجية بلا أي position خاص بها عن قصد — لا حاجة له، لأن التثبيت (sticky)
   * والـz-index مطبّقان بالكامل على .header-main نفسه أدناه وهذا وحده كافٍ. تعمّدنا عدم
   * إضافة position:relative هنا لتفادي أي تعارض محتمل مع حساب حدود sticky للعنصر الابن. */
}
.header-topbar{
  background:var(--primary); color:#fff; font-size:.85rem;
}
.header-topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.5rem; flex-wrap:wrap; }
/* الشريط العلوي المبسّط: البريد والهاتف فقط، بدون سوشيال ميديا أو مدن أو خريطة. */
.topbar-simple{ display:flex; align-items:center; justify-content:center; gap:clamp(1rem,4vw,2.5rem); width:100%; flex-wrap:wrap; }
.topbar-simple a{ display:inline-flex; align-items:center; gap:.45rem; color:#fff; opacity:.92; max-width:100%; }
.topbar-simple a:hover{ opacity:1; color:var(--c-gold-400); }
.topbar-simple a span{ overflow-wrap:anywhere; }
.topbar-simple svg{ width:16px; height:16px; flex:none; }
.topbar-links{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.topbar-links a{ display:inline-flex; align-items:center; gap:.4rem; color:#fff; opacity:.92; }
.topbar-links a:hover{ opacity:1; color:var(--c-gold-400); }
.topbar-links svg{ width:16px; height:16px; flex:none; }
/* أيقونات السوشيال ميديا (الهيدر والفوتر وصفحة التواصل) بشكل معبأ (Filled) بدلاً من الخطوط
   الرفيعة، لتكون أوضح وأقرب لأشكالها الحقيقية المعروفة. */
.topbar-social svg, .footer-social svg{ fill:currentColor; stroke:none; }
.topbar-cities{ opacity:.85; }

.header-main{
  position:relative; z-index:100;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--border);
}
/* تثبيت الشريط الرئيسي (الشعار/القائمة) أعلى الشاشة أثناء التمرير، بدون الشريط العلوي
   (الهاتف/البريد/المدن/السوشيال ميديا) الذي يمرّ بشكل طبيعي مع الصفحة. نستخدم position:fixed
   يُفعَّل بجافاسكريبت بسيط (main.js → initStickyHeader) بدلاً من position:sticky وحدها،
   لضمان عمل التثبيت بشكل موثوق في كل السياقات (بما فيها صفحات المعاينة المُضمَّنة). */
.header-main.is-pinned{
  position:fixed; top:0; inset-inline:0;
  animation: al-hadara-header-in .25s var(--ease);
}
@keyframes al-hadara-header-in{ from{ transform:translateY(-100%); } to{ transform:translateY(0); } }
.header-main-spacer{ display:none; }
.header-main-spacer.is-active{ display:block; }
.header-main .container{ display:flex; align-items:center; gap:1.25rem; padding-block:.85rem; min-height:74px; }
.site-branding{ display:flex; align-items:center; gap:.75rem; margin-inline-end:auto; }
.site-branding img{ height:52px; width:auto; }
.site-branding .brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.site-branding .brand-name-ar{ font-weight:700; font-size:1.05rem; color:var(--text); }
.site-branding .brand-name-en{ font-size:.7rem; letter-spacing:.08em; color:var(--text-faint); }

.primary-nav{ display:none; }
.primary-nav ul{ display:flex; align-items:center; gap:.15rem; }
.primary-nav a{
  display:inline-flex; align-items:center; padding:.65rem 1rem; border-radius:var(--radius-full);
  font-weight:600; color:var(--text-muted); font-size:.97rem;
}
.primary-nav a:hover, .primary-nav .current-menu-item > a{ color:var(--primary); background:var(--bg-soft); }
:root[data-theme="dark"] .primary-nav a:hover,
:root[data-theme="dark"] .primary-nav .current-menu-item > a{ color:var(--accent); }

.header-actions{ display:flex; align-items:center; gap:.6rem; }
.theme-toggle{
  position:relative; width:52px; height:30px; border-radius:var(--radius-full);
  background:var(--bg-soft); border:1px solid var(--border); flex:none;
}
.theme-toggle .knob{
  position:absolute; top:2px; inset-inline-start:2px; width:24px; height:24px; border-radius:50%;
  background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:inset-inline-start .25s var(--ease), background-color .25s var(--ease);
}
:root[data-theme="dark"] .theme-toggle .knob{ inset-inline-start:26px; background:var(--accent); color:var(--on-accent); }
.theme-toggle svg{ width:14px; height:14px; }
.theme-toggle .i-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .i-moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .i-sun{ display:block; }

.menu-toggle{
  display:inline-flex; width:46px; height:46px; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); background:var(--bg-soft); border:1px solid var(--border);
}
.menu-toggle svg{ width:22px; height:22px; }
.menu-toggle .i-close{ display:none; }
.menu-toggle[aria-expanded="true"] .i-open{ display:none; }
.menu-toggle[aria-expanded="true"] .i-close{ display:block; }

.header-cta{ display:none; }

/* Mobile menu drawer */
.mobile-nav{
  position:fixed; inset:0; z-index:200;
  visibility:hidden; opacity:0; transition:opacity .25s var(--ease), visibility .25s var(--ease);
}
.mobile-nav.is-open{ visibility:visible; opacity:1; }
.mobile-nav-backdrop{ position:absolute; inset:0; background:rgba(6,12,20,.55); }
.mobile-nav-panel{
  position:absolute; top:0; bottom:0; inset-inline-end:0; width:min(86vw, 360px);
  background:var(--surface); box-shadow:var(--shadow-lg);
  padding:1.25rem; overflow-y:auto;
  transform:translateX(105%);
  transition:transform .3s var(--ease);
}
:root:not([dir="ltr"]) .mobile-nav-panel{ transform:translateX(-105%); }
.mobile-nav.is-open .mobile-nav-panel{ transform:translateX(0); }
.mobile-nav-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.mobile-nav ul{ display:flex; flex-direction:column; gap:.15rem; }
.mobile-nav a{
  display:flex; align-items:center; padding:.9rem .5rem; border-bottom:1px solid var(--border);
  font-weight:600; color:var(--text);
}
.mobile-nav .mobile-nav-cta{ margin-top:1.25rem; display:flex; flex-direction:column; gap:.65rem; }

@media (min-width:1080px){
  .primary-nav{ display:block; }
  .menu-toggle{ display:none; }
  .header-cta{ display:inline-flex; }
}

/* =========================================================
   7) HERO
   ========================================================= */
.hero{
  position:relative; overflow:hidden; background:var(--primary); color:#fff;
  padding-block: clamp(3.5rem, 9vw, 7rem);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,13,22,.62), rgba(6,13,22,.82)),
    var(--hero-image, none),
    radial-gradient(1100px 480px at 85% -10%, rgba(211,169,76,.20), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 34px);
  background-size:cover, cover, cover, auto;
  background-position:center;
}
.hero-grid.hero-grid--text-only{ grid-template-columns:1fr; max-width:820px; margin-inline:auto; text-align:center; }
.hero-grid--text-only .hero-actions{ justify-content:center; }
.hero-grid--text-only .hero-trust{ justify-content:center; }
.hero-grid--text-only .hero-desc{ margin-inline:auto; }
.hero .container{ position:relative; z-index:1; }
.hero-grid{ display:grid; gap:2.5rem; align-items:center; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; color:var(--c-gold-400);
  font-weight:700; margin-bottom:1rem; font-size:1.02rem;
}
.hero h1{ color:#fff; margin-bottom:1.1rem; }
.hero h1 mark{ background:none; color:var(--c-gold-400); }
.hero-desc{ color:rgba(255,255,255,.86); font-size:1.1rem; max-width:56ch; margin-bottom:2rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2.25rem; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:1.5rem; }
.hero-trust-item{ display:flex; align-items:center; gap:.6rem; color:rgba(255,255,255,.92); font-weight:600; font-size:.92rem; }
.hero-trust-item svg{ width:22px; height:22px; color:var(--c-gold-400); flex:none; }
.hero-media{ position:relative; }
.hero-media img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}
.hero-media-badge{
  position:absolute; bottom:-1.25rem; inset-inline-start:-1rem;
  background:var(--surface); color:var(--text); padding:1rem 1.25rem; border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:.75rem; font-weight:700;
  max-width:min(80vw,280px);
}
.hero-media-badge svg{ width:38px; height:38px; color:var(--accent-hover); flex:none; }
@media (min-width:960px){
  .hero-grid{ grid-template-columns:1.1fr .9fr; }
}

/* زر/شارة الانتقال إلى قسم "وين المشكلة في منزلك؟" داخل الهيرو */
.hero-finder-cta{
  display:inline-flex; align-items:center; gap:1rem; margin-top:2rem; padding:.85rem 1.4rem .85rem 1rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-full);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background-color .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
  max-width:100%;
}
.hero-grid--text-only .hero-finder-cta{ margin-inline:auto; }
.hero-finder-cta:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); transform:translateY(-2px); }
.hero-finder-icon{
  flex:none; width:50px; height:50px; border-radius:50%; background:var(--accent); color:var(--on-accent);
  display:flex; align-items:center; justify-content:center;
  animation:hero-finder-float 3s ease-in-out infinite;
}
.hero-finder-icon svg{ width:28px; height:28px; }
@keyframes hero-finder-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@media (prefers-reduced-motion: reduce){ .hero-finder-icon{ animation:none; } }
.hero-finder-text{ display:flex; flex-direction:column; gap:.15rem; text-align:start; }
.hero-finder-text strong{ color:#fff; font-size:.95rem; }
.hero-finder-text span{ color:rgba(255,255,255,.75); font-size:.82rem; }
.hero-finder-arrow{ flex:none; color:var(--c-gold-400); }
.hero-finder-arrow svg{ width:20px; height:20px; transform:rotate(90deg); transition:transform .18s var(--ease); }
:root[dir="ltr"] .hero-finder-arrow svg{ transform:rotate(-90deg); }
.hero-finder-cta:hover .hero-finder-arrow svg{ transform:rotate(90deg) translateX(3px); }
:root[dir="ltr"] .hero-finder-cta:hover .hero-finder-arrow svg{ transform:rotate(-90deg) translateX(3px); }

/* =========================================================
   7ب) الهيرو على الجوال فقط — يغطي ارتفاع الشاشة بالكامل (100dvh) كما كان،
   لكن بدل توسيط المحتوى ككتلة واحدة (اللي كان يُنتج فراغًا متساويًا فوقه
   وتحته)، نوزّع المحتوى نفسه على كامل الارتفاع: النصوص والأزرار تبدأ من أعلى
   طبيعيًا، والصورة تُدفع لأسفل الهيرو، بحيث تُستغل كل المساحة بدل تجمّع كل
   شيء في المنتصف. لا تغيير على Desktop/Tablet (٧٦٨px فأعلى) إطلاقًا. */
@media (max-width:767px){
  .hero{
    padding-block: clamp(1.5rem, 6vw, 2.5rem);
  }
  /* ارتفاع الهيرو طبيعي بحسب محتواه (بدون فرض 100dvh) — أقصر وأخف من قبل.
     المجموعات المنطقية الأربع (الشارة | العنوان+الوصف | الأزرار | شارات الثقة+
     زر "مش عارف مشكلتك فين؟") متباعدة بهوامش صغيرة وثابتة ومتقاربة القيمة —
     3 فواصل بسيطة فقط بدل توزيع مبالغ فيه على كامل الشاشة. */
  .hero-grid{ gap:.45rem; }
  .hero-eyebrow{ margin-bottom:.6rem; font-size:.68rem; gap:.3rem; }
  .hero-eyebrow svg{ width:15px; height:15px; }
  .hero-heading-group{ margin-bottom:.9rem; }
  .hero h1{ font-size:clamp(1.28rem, 5.6vw, 1.9rem); line-height:1.2; margin-bottom:.4rem; }
  .hero-desc{ font-size:.78rem; line-height:1.4; margin-bottom:0; }
  .hero-actions{ margin-bottom:.9rem; gap:.35rem; }
  .hero-actions .btn{ padding:.45rem .85rem; font-size:.78rem; min-height:36px; }
  .hero-helper-group{ display:flex; flex-direction:column; gap:.5rem; }
  .hero-trust{ gap:.3rem .55rem; }
  .hero-trust-item{ font-size:.66rem; gap:.25rem; }
  .hero-trust-item svg{ width:13px; height:13px; }
  .hero-media img{ width:100%; height:110px; object-fit:cover; aspect-ratio:auto; }
  .hero-media-badge{ padding:.4rem .65rem; gap:.35rem; bottom:-.55rem; }
  .hero-media-badge svg{ width:18px; height:18px; }
  .hero-media-badge span{ font-size:.68rem; }
  .hero-finder-cta{ margin-top:0; padding:.32rem .7rem .32rem .4rem; gap:.4rem; }
  .hero-finder-icon{ width:26px; height:26px; }
  .hero-finder-icon svg{ width:14px; height:14px; }
  .hero-finder-text strong{ font-size:.68rem; }
  .hero-finder-text span{ font-size:.6rem; }
  .hero-finder-arrow{ width:14px; height:14px; }
}
/* شاشات ضيقة جدًا (320-359px): حشو أقل قليلًا (لا يزال مريحًا) وارتفاع صورة
   أقل، حتى يبقى المحتوى متوازنًا على أصغر الشاشات. */
@media (max-width:359px){
  .hero{
    padding-block: clamp(1.25rem, 6vw, 2rem);
  }
  .hero-media img{ height:80px; }
}
/* التابلت (768-959px): نفس فكرة "بداية ونهاية مريحة" — الهيرو لسه عمود واحد
   هنا (الشبكة بعمودين تبدأ من 960px فأعلى)، فحشو الديسكتوب الكبير كان بيسيب
   فراغًا واضحًا فوق/تحت المحتوى؛ نخففه لحشو متوسط بدون أي تغيير على التصميم
   الأساسي أو الألوان أو تخطيط الديسكتوب الفعلي (960px فأعلى يبقى كما هو). */
@media (min-width:768px) and (max-width:959px){
  .hero{ padding-block: clamp(2.5rem, 6vw, 4rem); }
}

/* =========================================================
   8) CARDS / GRIDS shared
   ========================================================= */
.grid{ display:grid; gap:var(--gap); }
.grid-2{ grid-template-columns:repeat(1,1fr); }
.grid-3{ grid-template-columns:repeat(1,1fr); }
.grid-4{ grid-template-columns:repeat(1,1fr); }
@media (min-width:640px){ .grid-2{ grid-template-columns:repeat(2,1fr);} .grid-4{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:860px){ .grid-3{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:1080px){ .grid-3{ grid-template-columns:repeat(3,1fr);} .grid-4{ grid-template-columns:repeat(4,1fr);} }

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--border-strong); }

/* Services */
.service-card{ overflow:hidden; display:flex; flex-direction:column; height:100%; }
.service-card-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-soft); }
.service-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.service-card:hover .service-card-media img{ transform:scale(1.06); }
.service-card-icon{
  position:absolute; bottom:-22px; inset-inline-start:1.25rem;
  width:52px; height:52px; border-radius:var(--radius-md); background:var(--accent); color:var(--on-accent);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md);
}
.service-card-icon svg{ width:26px; height:26px; }
.service-card-body{ padding:2.25rem 1.5rem 1.5rem; display:flex; flex-direction:column; gap:.65rem; flex:1; }
.service-card-body h3 a{ color:var(--text); }
.service-card-body h3 a:hover{ color:var(--primary); }
:root[data-theme="dark"] .service-card-body h3 a:hover{ color:var(--accent); }
.service-card-body p{ flex:1; }
.service-more{ display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color:var(--primary); margin-top:.4rem; }
:root[data-theme="dark"] .service-more{ color:var(--accent); }
.service-more svg{ width:18px; height:18px; transition:transform .18s var(--ease); }
.service-more:hover svg{ transform:translateX(-4px); }
:root[dir="rtl"] .service-more:hover svg, [dir="rtl"] .service-more:hover svg{ transform:translateX(4px); }

/* =========================================================
   9) اعرف احتياجك (Know Your Need) — تفاعلي: مشكلة ← حل
   ========================================================= */
.need-hint{ text-align:center; color:var(--text-faint); font-size:.92rem; margin-top:-.5rem; margin-bottom:1.75rem; }
.need-grid{ display:grid; gap:.9rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:600px){ .need-grid{ grid-template-columns:repeat(3,1fr);} }
@media (min-width:900px){ .need-grid{ grid-template-columns:repeat(4,1fr);} }
.need-card{
  display:flex; flex-direction:column; align-items:center; gap:.65rem; text-align:center;
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-md);
  padding:1.35rem .9rem; font-family:inherit; font-size:.92rem; font-weight:700; color:var(--text);
  min-height:48px; -webkit-tap-highlight-color:transparent;
  transition:border-color .18s var(--ease), background-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.need-card:hover{ transform:translateY(-3px); border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.need-card-icon{
  width:50px; height:50px; border-radius:50%; background:var(--bg-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center; flex:none;
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
:root[data-theme="dark"] .need-card-icon{ color:var(--accent); }
.need-card-icon svg{ width:24px; height:24px; }
.need-card[aria-pressed="true"]{ border-color:var(--accent-hover); background:color-mix(in srgb, var(--accent) 10%, var(--surface)); }
:root[data-theme="dark"] .need-card[aria-pressed="true"]{ border-color:var(--accent); }
.need-card[aria-pressed="true"] .need-card-icon{ background:var(--accent); color:var(--on-accent); }

.need-solution{
  margin-top:1.75rem; max-width:760px; margin-inline:auto;
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity .35s var(--ease), max-height .4s var(--ease);
}
.need-solution.is-visible{ opacity:1; max-height:600px; }
@media (prefers-reduced-motion: reduce){ .need-solution{ transition:none; } }
.need-solution-inner{
  display:flex; gap:1.25rem; align-items:flex-start; background:var(--surface);
  border:1.5px solid var(--accent-hover); border-radius:var(--radius-lg); padding:1.75rem;
  box-shadow:var(--shadow-md);
}
:root[data-theme="dark"] .need-solution-inner{ border-color:var(--accent); }
.need-solution-icon{
  width:56px; height:56px; border-radius:50%; background:var(--accent); color:var(--on-accent);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.need-solution-icon svg{ width:28px; height:28px; }
.need-solution-label{ font-weight:700; font-size:.82rem; color:var(--accent-hover); display:block; margin-bottom:.3rem; }
:root[data-theme="dark"] .need-solution-label{ color:var(--accent); }
.need-solution-body h3{ margin-bottom:.5rem; }
.need-solution-body p{ margin-bottom:1.1rem; }
@media (max-width:560px){ .need-solution-inner{ flex-direction:column; align-items:flex-start; } }

/* =========================================================
   9b) ماذا يحدث لو تأخرت؟ (مسار توعوي Timeline)
   ========================================================= */
.delay-timeline{ position:relative; max-width:720px; margin-inline:auto; }
.delay-timeline::before{
  content:""; position:absolute; top:30px; bottom:38px; inset-inline-start:29px; width:2px;
  background:linear-gradient(to bottom, var(--border-strong), var(--accent-hover));
}
.delay-stage{ position:relative; display:flex; gap:1.5rem; padding-bottom:2.25rem; }
.delay-stage:last-child{ padding-bottom:0; }
.delay-stage-marker{ position:relative; flex:none; width:60px; }
.delay-stage-icon{
  width:60px; height:60px; border-radius:50%; position:relative; z-index:1;
  background:var(--surface); border:2px solid var(--border-strong); color:var(--primary);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);
  transition:background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
:root[data-theme="dark"] .delay-stage-icon{ color:var(--accent); }
.delay-stage-icon svg{ width:26px; height:26px; }
.delay-stage-num{
  position:absolute; top:-6px; inset-inline-end:-6px; z-index:2;
  width:23px; height:23px; border-radius:50%; background:var(--accent); color:var(--on-accent);
  font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  font-variant-numeric:tabular-nums;
}
.delay-stage.is-final .delay-stage-icon{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.delay-stage-body{
  flex:1; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:1.15rem 1.4rem;
}
.delay-stage.is-final .delay-stage-body{ border-color:var(--accent-hover); }
.delay-stage-body h3{ font-size:1.05rem; margin-bottom:.35rem; }
.delay-stage-body p{ margin:0; }

.delay-conclusion{
  max-width:720px; margin:2.75rem auto 0; text-align:center;
  background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:clamp(1.75rem,4vw,2.5rem) 1.5rem;
}
.delay-conclusion p{ font-size:clamp(1.05rem,.95rem + .5vw,1.25rem); font-weight:700; color:var(--text); margin-bottom:1.5rem; }
.delay-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem; }

@media (max-width:480px){
  .delay-stage{ gap:1rem; }
  .delay-stage-marker{ width:48px; }
  .delay-stage-icon{ width:48px; height:48px; }
  .delay-stage-icon svg{ width:22px; height:22px; }
  .delay-timeline::before{ inset-inline-start:23px; }
}

/* =========================================================
   9c) وين المشكلة في منزلك؟ (صورة فيلا بمقطع Cutaway + نقاط تفاعلية حقيقية)
   ========================================================= */
#house-finder{ scroll-margin-top:100px; }

.house-photo-wrap{ max-width:900px; margin-inline:auto; }
/* إطار مستقل بحجم الصورة فقط — مرجع التموضع الوحيد للنقاط التفاعلية، بمعزل عن ارتفاع
   بطاقة المعلومات المتغيّر أسفله، حتى لا تتزحزح مواضع النقاط عند ظهورها. */
.house-photo-frame{ position:relative; }
.house-photo{
  width:100%; height:auto; display:block; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); background:var(--bg-soft);
}

/* توهّج ناعم يبرز المنطقة المختارة فوق الصورة نفسها (بدل تلوين شكل SVG غير موجود هنا) */
.hz-glow{
  position:absolute; inset:0; pointer-events:none; border-radius:var(--radius-lg); overflow:hidden;
  background:radial-gradient(170px 170px at var(--gx,50%) var(--gy,50%), color-mix(in srgb, var(--accent) 60%, transparent), transparent 72%);
  opacity:0; transition:opacity .3s var(--ease); z-index:1;
}
.hz-glow.is-active{ opacity:.85; }

.hz-hotspot{
  /* left فعلية (وليست inset-inline-start المنطقية): مواضع x/y محسوبة فعليًا فوق الصورة
   * الثابتة الاتجاه، فأي خاصية منطقية هنا تنعكس مع RTL وتُخرج النقطة عن مكانها الصحيح. */
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  width:42px; height:42px; border:none; background:transparent; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; border-radius:50%; z-index:2;
}
.hz-hotspot-dot{
  position:relative; z-index:1; width:38px; height:38px; border-radius:50%;
  background:linear-gradient(145deg, var(--c-gold-400), var(--c-gold-600));
  border:3px solid #fff; box-shadow:0 4px 14px rgba(10,15,25,.32);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:transform .2s var(--ease);
}
.hz-hotspot-dot svg{ width:16px; height:16px; }
.hz-hotspot::before{
  content:""; position:absolute; inset:0; margin:auto; width:38px; height:38px; border-radius:50%;
  background:var(--c-gold-400); opacity:.55; animation:hz-pulse 2.4s ease-out infinite;
}
@keyframes hz-pulse{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.9); opacity:0; } }
.hz-hotspot:hover .hz-hotspot-dot, .hz-hotspot:focus-visible .hz-hotspot-dot, .hz-hotspot.is-active .hz-hotspot-dot{ transform:scale(1.15); }
@media (prefers-reduced-motion: reduce){ .hz-hotspot::before{ animation:none; opacity:0; } }

/* بطاقة المعلومات: تظهر فقط عند الضغط، أسفل الصورة دائمًا (لا تغطي تفاصيل المبنى إطلاقًا
   على أي مقاس شاشة)، بلا تداخل مع بعضها لأن JS يظهر بطاقة واحدة فقط في كل مرة. */
.hz-panel{
  display:none; position:relative; text-align:center; max-width:520px; margin:1.5rem auto 0;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:1.75rem 1.6rem; box-shadow:var(--shadow-md);
}
.hz-panel.is-active{ display:block; animation:hz-panel-in .35s var(--ease); }
@keyframes hz-panel-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
.hz-panel-close{ position:absolute; top:.75rem; inset-inline-end:.75rem; width:34px; height:34px; }
.hz-panel-icon{
  width:48px; height:48px; border-radius:50%; background:var(--bg-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center; margin-inline:auto; margin-bottom:.9rem;
}
:root[data-theme="dark"] .hz-panel-icon{ color:var(--accent); }
.hz-panel h3{ font-size:1.15rem; margin-bottom:.6rem; }
.hz-panel-problem{ margin-bottom:.5rem; }
.hz-panel-solution{ font-weight:700; color:var(--text); margin-bottom:1.4rem; }
.hz-panel-btn{ min-width:200px; justify-content:center; }

@media (max-width:480px){
  .hz-hotspot{ width:46px; height:46px; }
  .hz-hotspot-dot{ width:40px; height:40px; }
}

/* =========================================================
   10) WHY US
   ========================================================= */
.feature-card{ padding:1.9rem 1.6rem; display:flex; flex-direction:column; gap:.9rem; }
.feature-icon{
  width:54px; height:54px; border-radius:var(--radius-md); background:var(--bg-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
}
:root[data-theme="dark"] .feature-icon{ color:var(--accent); }
.feature-icon svg{ width:28px; height:28px; }
.feature-card h3{ font-size:1.15rem; }

/* =========================================================
   11) STATS
   ========================================================= */
.stats-band{ background:var(--primary); color:#fff; border-radius:var(--radius-lg); padding:clamp(2rem,4vw,3rem); }
.stats-grid{ display:grid; gap:1.5rem; grid-template-columns:repeat(2,1fr); text-align:center; }
@media (min-width:780px){ .stats-grid{ grid-template-columns:repeat(4,1fr); } }
.stat-item .stat-num{ display:flex; align-items:baseline; justify-content:center; gap:.15rem; font-weight:700; font-size:clamp(1.8rem,1.4rem + 1.6vw,2.6rem); color:var(--c-gold-400); }
.stat-item .stat-label{ color:rgba(255,255,255,.85); font-weight:600; margin-top:.4rem; font-size:.95rem; }

/* =========================================================
   12) SERVICE AREAS MAP — قسم "مناطق خدمتنا في المملكة" (خريطة SVG مضمّنة)
   ========================================================= */
.ksa-map-wrap{ max-width:560px; margin-inline:auto; }
.ksa-map{
  display:block; width:100%; height:auto;
  /* الإحداثيات جغرافية فعلية (يمين/يسار الخريطة = شرق/غرب حقيقي) — تُثبَّت
     صراحة بغضّ النظر عن اتجاه الصفحة RTL حتى لا ينعكس ترتيب أو محاذاة النصوص. */
  direction:ltr;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.12));
}
.ksa-region{ stroke:var(--border); stroke-width:1.3; stroke-linejoin:round; }
.ksa-region-muted{ fill:var(--surface); }
.ksa-region-highlight{ fill:var(--c-gold-400); fill-opacity:.6; }
:root[data-theme="dark"] .ksa-region-highlight{ fill:var(--c-gold-500); fill-opacity:.42; }
.ksa-map-outline{
  fill:none; stroke:var(--border-strong); stroke-width:2.4; stroke-linejoin:round;
}
.ksa-city-pin{
  fill:var(--c-gold-500); stroke:var(--surface); stroke-width:1.3; stroke-linejoin:round;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));
}
.ksa-city-pin-hole{ fill:var(--surface); }
.ksa-city text{
  font-family:inherit; font-weight:700; font-size:15px; fill:var(--text);
  paint-order:stroke; stroke:var(--bg-soft); stroke-width:3px; stroke-linejoin:round;
}
:root[data-theme="dark"] .ksa-map{ filter:drop-shadow(0 10px 24px rgba(0,0,0,.35)); }

/* =========================================================
   13) PROJECTS
   ========================================================= */
.project-card{ overflow:hidden; }
.project-card-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg-soft); }
.project-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.project-card:hover .project-card-media img{ transform:scale(1.05); }
.project-card-tag{
  position:absolute; top:1rem; inset-inline-start:1rem; background:var(--accent); color:var(--on-accent);
  font-size:.78rem; font-weight:700; padding:.3rem .8rem; border-radius:var(--radius-full);
}
.project-card-body{ padding:1.35rem 1.4rem 1.5rem; }
.project-card-city{ display:flex; align-items:center; gap:.4rem; color:var(--text-faint); font-size:.85rem; margin-bottom:.4rem; }
.project-card-city svg{ width:16px; height:16px; }
.project-card-body h3{ margin-bottom:.4rem; }
.project-card-body p{ font-size:.92rem; }
.project-card-body h3 a{ color:var(--text); }
.project-card-body h3 a:hover{ color:var(--primary); }
:root[data-theme="dark"] .project-card-body h3 a:hover{ color:var(--accent); }

/* =========================================================
   14) CAROUSEL (clients + testimonials) - scroll-snap based
   ========================================================= */
.carousel{ position:relative; }
.carousel-viewport{
  display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; padding-block:.35rem;
  overscroll-behavior-x:contain;
}
.carousel-viewport::-webkit-scrollbar{ display:none; }
.carousel-viewport > *{ scroll-snap-align:start; flex:0 0 auto; }
.carousel-controls{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.5rem; }
.carousel-dots{ display:flex; gap:.4rem; }
.carousel-dots span{ width:8px; height:8px; border-radius:50%; background:var(--border-strong); transition:background-color .2s var(--ease), width .2s var(--ease); }
.carousel-dots span.is-active{ background:var(--accent-hover); width:22px; border-radius:var(--radius-full); }
:root[data-theme="dark"] .carousel-dots span.is-active{ background:var(--accent); }

/* Clients */
.client-slide{ width:200px; }
.client-card{
  height:120px; display:flex; align-items:center; justify-content:center; padding:1.25rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  filter:grayscale(1) opacity(.75); transition:filter .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.client-card:hover{ filter:grayscale(0) opacity(1); transform:translateY(-3px); border-color:var(--border-strong); }
.client-card img{ max-height:56px; width:auto; object-fit:contain; }
.client-name{ display:block; text-align:center; margin-top:.6rem; font-size:.82rem; color:var(--text-faint); }
.clients-empty{ text-align:center; color:var(--text-faint); padding:2rem 1rem; border:1px dashed var(--border-strong); border-radius:var(--radius-md); }

/* Testimonials */
.testimonial-slide{ width:min(88vw,380px); }
.testimonial-card{ padding:1.9rem 1.6rem; height:100%; display:flex; flex-direction:column; gap:1rem; }
.testimonial-stars{ display:flex; gap:.15rem; color:var(--accent-hover); }
.testimonial-stars svg{ fill:currentColor; stroke:currentColor; stroke-width:1; }
:root[data-theme="dark"] .testimonial-stars{ color:var(--accent); }
.testimonial-stars svg{ width:18px; height:18px; }
.testimonial-text{ color:var(--text); font-size:1rem; flex:1; }
.testimonial-person{ display:flex; align-items:center; gap:.85rem; }
.testimonial-person img{ width:48px; height:48px; border-radius:50%; object-fit:cover; }
.testimonial-person-fallback{
  width:48px; height:48px; border-radius:50%; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; flex:none;
}
.testimonial-person strong{ display:block; font-size:.95rem; }
.testimonial-person span{ color:var(--text-faint); font-size:.82rem; }

/* المقالات (كاروسيل) */
.article-slide{ width:min(86vw,340px); }
.article-card{ overflow:hidden; display:flex; flex-direction:column; height:100%; }
.article-card-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-soft); }
.article-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .3s var(--ease); }
/* حركة اهتزازية بسيطة وخفيفة عند مرور الفأرة — transform فقط، ومعطّلة تلقائيًا مع
   إعداد تقليل الحركة في نظام التشغيل (prefers-reduced-motion) عبر القاعدة العامة أعلى الملف. */
@keyframes al-hadara-wiggle{
  0%, 100% { transform: rotate(0deg) scale(1); }
  20%      { transform: rotate(-1.5deg) scale(1.03); }
  40%      { transform: rotate(1.5deg) scale(1.03); }
  60%      { transform: rotate(-1deg) scale(1.03); }
  80%      { transform: rotate(1deg) scale(1.03); }
}
.article-card:hover .article-card-media img{ animation: al-hadara-wiggle .5s ease-in-out; }
/* حركة اهتزازية عامة للبطاقة كاملة مرة واحدة عند ظهورها أثناء التمرير (بعد انتهاء تأثير
   الظهور التدريجي reveal مباشرة)، بالإضافة لاهتزاز الصورة عند مرور الفأرة أعلاه. */
.article-card.reveal.is-visible{ animation: al-hadara-wiggle .6s ease-in-out .55s both; }
.article-card-body{ padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.article-card-meta{ display:flex; align-items:center; gap:.4rem; color:var(--text-faint); font-size:.82rem; }
.article-card-meta svg{ width:15px; height:15px; }
.article-card-body h3{ font-size:1.05rem; }
.article-card-body h3 a{ color:var(--text); }
.article-card-body h3 a:hover{ color:var(--primary); }
:root[data-theme="dark"] .article-card-body h3 a:hover{ color:var(--accent); }
.article-card-body p{ flex:1; font-size:.92rem; }
.articles-empty{ text-align:center; color:var(--text-faint); padding:2rem 1rem; border:1px dashed var(--border-strong); border-radius:var(--radius-md); }

/* =========================================================
   15) HOW WE WORK
   ========================================================= */
.steps-grid{ display:grid; gap:1.5rem; grid-template-columns:repeat(1,1fr); counter-reset:step; }
@media (min-width:700px){ .steps-grid{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:1080px){ .steps-grid{ grid-template-columns:repeat(3,1fr);} }
.step-item{ position:relative; padding:1.75rem 1.5rem; counter-increment:step; }
.step-item::before{
  content:counter(step,decimal-leading-zero); position:absolute; top:1rem; inset-inline-end:1.25rem;
  font-weight:700; font-size:1.6rem; color:var(--border-strong);
}
.step-icon{
  width:52px; height:52px; border-radius:50%; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
}
:root[data-theme="dark"] .step-icon{ background:var(--accent); color:var(--on-accent); }
.step-icon svg{ width:24px; height:24px; }

/* =========================================================
   16) FAQ (native details/summary, zero JS)
   ========================================================= */
.faq-list{ max-width:840px; margin-inline:auto; display:flex; flex-direction:column; gap:.75rem; }
.faq-item{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.faq-item > summary{
  list-style:none; cursor:pointer; padding:1.25rem 1.4rem; display:flex; align-items:center; gap:1rem;
  font-weight:700; color:var(--text);
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item summary .chev{ margin-inline-start:auto; width:20px; height:20px; color:var(--text-faint); transition:transform .22s var(--ease); flex:none; }
.faq-item[open] summary .chev{ transform:rotate(180deg); }
.faq-item-body{ padding:0 1.4rem 1.4rem; }

/* =========================================================
   17) CTA band
   ========================================================= */
.cta-band{
  position:relative; overflow:hidden; border-radius:var(--radius-lg); background:var(--primary); color:#fff;
  padding:clamp(2.5rem,5vw,4rem); text-align:center;
}
.cta-band::after{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(600px 200px at 15% 0%, rgba(211,169,76,.35), transparent 60%),
             radial-gradient(600px 220px at 85% 100%, rgba(30,90,134,.5), transparent 60%);
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ color:#fff; margin-bottom:.75rem; }
.cta-band p{ color:rgba(255,255,255,.85); max-width:60ch; margin-inline:auto; margin-bottom:2rem; }
.cta-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem; }

/* =========================================================
   18) FOOTER
   ========================================================= */
.site-footer{ background:var(--c-navy-950); color:rgba(255,255,255,.88); }
:root[data-theme="dark"] .site-footer{ background:#08090c; }
.footer-top{ padding-block:clamp(3rem,5vw,4.5rem); }
.footer-grid{ display:grid; gap:2.25rem; grid-template-columns:repeat(1,1fr); }
@media (min-width:700px){ .footer-grid{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:1080px){ .footer-grid{ grid-template-columns:1.3fr .8fr .8fr 1fr;} }
.footer-brand img{ height:52px; width:auto; max-width:180px; object-fit:contain; margin-bottom:1rem; }
.footer-about{ color:rgba(255,255,255,.82); max-width:36ch; margin-bottom:1.25rem; }
.footer-social{ display:flex; gap:.6rem; }
.footer-social a{
  width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; color:#fff; border:1px solid rgba(255,255,255,.12);
  transition:background-color .18s var(--ease), transform .18s var(--ease);
}
.footer-social a:hover{ background:var(--accent); color:var(--on-accent); transform:translateY(-3px); }
.footer-social svg{ width:18px; height:18px; }
.footer-col h4{ color:#fff; font-size:1.02rem; margin-bottom:1.1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.65rem; }
.footer-col a{ color:rgba(255,255,255,.85); }
.footer-col a:hover{ color:var(--c-gold-400); }
.footer-contact li{ display:flex; align-items:flex-start; gap:.6rem; color:rgba(255,255,255,.88); }
.footer-contact svg{ width:19px; height:19px; flex:none; margin-top:.2rem; color:var(--c-gold-400); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-block:1.25rem; }
.footer-bottom .container{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; justify-content:space-between; font-size:.85rem; color:rgba(255,255,255,.72); }
.footer-bottom a{ color:rgba(255,255,255,.85); }
.footer-bottom a:hover{ color:var(--c-gold-400); }

.mobile-fab{ position:fixed; bottom:1.1rem; inset-inline-end:1.1rem; z-index:150; display:flex; flex-direction:column; gap:.65rem; }
.mobile-fab a{
  width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); color:#fff;
}
.mobile-fab .fab-whatsapp{ background:#25D366; }
.mobile-fab .fab-call{ background:var(--primary); }
.mobile-fab svg{ width:26px; height:26px; }

/* =========================================================
   19) FORMS (contact page)
   ========================================================= */
.form-grid{ display:grid; gap:1.1rem; grid-template-columns:repeat(1,1fr); }
@media (min-width:700px){ .form-grid{ grid-template-columns:repeat(2,1fr); } .form-grid .full{ grid-column:1 / -1; } }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field label{ font-weight:700; font-size:.92rem; color:var(--text); }
.field .req{ color:var(--danger); }
.field input, .field select, .field textarea{
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-sm);
  padding:.85rem 1rem; color:var(--text); width:100%; min-height:48px;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}
:root[data-theme="dark"] .field input:focus, :root[data-theme="dark"] .field select:focus, :root[data-theme="dark"] .field textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field-hint{ font-size:.8rem; color:var(--text-faint); }
.form-msg{ padding:1rem 1.2rem; border-radius:var(--radius-sm); font-weight:600; margin-bottom:1.25rem; }
.form-msg.success{ background:color-mix(in srgb, var(--success) 16%, transparent); color:var(--success); border:1px solid color-mix(in srgb, var(--success) 40%, transparent); }
.form-msg.error{ background:color-mix(in srgb, var(--danger) 14%, transparent); color:var(--danger); border:1px solid color-mix(in srgb, var(--danger) 40%, transparent); }
.honeypot-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

.contact-info-card{ background:var(--primary); color:#fff; border-radius:var(--radius-lg); padding:2rem; height:100%; }
.contact-info-card h3{ color:#fff; }
.contact-info-list{ display:flex; flex-direction:column; gap:1.25rem; margin-top:1.5rem; }
.contact-info-list li{ display:flex; align-items:flex-start; gap:.85rem; }
.contact-info-list svg{ width:22px; height:22px; color:var(--c-gold-400); flex:none; margin-top:.15rem; }
.contact-info-list a, .contact-info-list span{ color:rgba(255,255,255,.9); }
.contact-info-list strong{ display:block; color:#fff; font-size:.85rem; margin-bottom:.15rem; }

/* =========================================================
   20) PAGE HEADER (interior pages)
   ========================================================= */
.page-header{
  background:var(--primary); color:#fff; padding-block:clamp(2.5rem,5vw,4rem);
  position:relative; overflow:hidden;
}
.page-header::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,13,22,.58), rgba(6,13,22,.8)),
    var(--hero-image, none),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 34px);
  background-size:cover, cover, auto;
  background-position:center;
}
.page-header .container{ position:relative; z-index:1; }
.page-header h1{ color:#fff; margin-bottom:.6rem; }
.breadcrumbs{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; color:rgba(255,255,255,.75); font-size:.9rem; }
.breadcrumbs a{ color:rgba(255,255,255,.85); }
.breadcrumbs a:hover{ color:var(--c-gold-400); }
.breadcrumbs .sep{ opacity:.6; }

/* Single service / project layout */
.single-layout{ display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media (min-width:960px){ .single-layout{ grid-template-columns:2fr 1fr; } }
.single-content img{ border-radius:var(--radius-lg); margin-block:1.5rem; }
.single-content h2{ margin-block:1.5rem .75rem; }
.single-content ul{ list-style:disc; padding-inline-start:1.4rem; display:flex; flex-direction:column; gap:.5rem; color:var(--text-muted); }
.single-content p{ margin-bottom:1rem; }
.sidebar-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.5rem; }
.sidebar-card + .sidebar-card{ margin-top:1.5rem; }
.sidebar-card h3{ margin-bottom:1rem; }
.sidebar-services{ display:flex; flex-direction:column; gap:.35rem; }
.sidebar-services a{
  display:flex; align-items:center; justify-content:space-between; padding:.75rem .9rem; border-radius:var(--radius-sm);
  color:var(--text-muted); font-weight:600;
}
.sidebar-services a:hover, .sidebar-services a.is-current{ background:var(--bg-soft); color:var(--primary); }
:root[data-theme="dark"] .sidebar-services a:hover, :root[data-theme="dark"] .sidebar-services a.is-current{ color:var(--accent); }

.meta-row{ display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; color:var(--text-faint); font-size:.9rem; margin-bottom:1rem; }
.meta-row span{ display:inline-flex; align-items:center; gap:.4rem; }
.meta-row svg{ width:16px; height:16px; }

.pagination-nav{ display:flex; justify-content:center; gap:.5rem; margin-top:2.5rem; }
.pagination-nav a, .pagination-nav span{
  min-width:42px; height:42px; padding-inline:.5rem; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); color:var(--text-muted); font-weight:600;
}
.pagination-nav .current{ background:var(--primary); border-color:var(--primary); color:#fff; }
.pagination-nav a:hover{ border-color:var(--primary); color:var(--primary); }

/* Empty states */
.empty-state{ text-align:center; padding:3rem 1rem; color:var(--text-faint); }

/* Comments (optional, on blog/project single) */
.comments-area{ margin-top:3rem; max-width:840px; }
.comment-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.25rem; }
.comment-body{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.25rem; }

/* =========================================================
   21) UTILITIES
   ========================================================= */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

.lazy-img{ background:var(--bg-soft); }

/* Screen-reader text (WP standard) */
.screen-reader-text{ position:absolute !important; width:1px;height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* Icon size utilities */
.i-16{ width:16px; height:16px; }
.i-18{ width:18px; height:18px; }
.i-20{ width:20px; height:20px; }
.i-24{ width:24px; height:24px; }
.i-26{ width:26px; height:26px; }
.i-28{ width:28px; height:28px; }
.rot-180{ transform:rotate(180deg); }

/* اتجاه أسهم الكاروسيل حسب اتجاه الصفحة (RTL افتراضيًا للموقع العربي) */
.carousel-prev-btn svg{ transform:rotate(0deg); }
.carousel-next-btn svg{ transform:rotate(180deg); }
[dir="ltr"] .carousel-prev-btn svg{ transform:rotate(180deg); }
[dir="ltr"] .carousel-next-btn svg{ transform:rotate(0deg); }

/* Print */
@media print{ .site-header, .mobile-fab, .cta-band, .site-footer{ display:none; } }