:root{
    --bg: #EFEBE1;
    --bg-deep: #E3DDCE;
    --ink: #2A2E26;
    --ink-soft: #5B5D4F;
    --olive: #4E5A46;
    --olive-deep: #383F32;
    --sand: #B9905A;
    --sand-deep: #96703F;
    --sand-light: #E9D9B8;
    --card: #FBF9F4;
    --line: rgba(42,46,38,0.14);
    --font-display: 'Cairo', sans-serif;
    --font-body: 'Tajawal', sans-serif;
    --font-latin: 'Poppins', sans-serif;
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:1.75; overflow-x:hidden; }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  section{ position:relative; }
  .wrap{ max-width:1220px; margin:0 auto; padding:0 32px; }
  @media(max-width:640px){ .wrap{ padding:0 20px; } }

  .eyebrow{
    font-family:var(--font-latin); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--sand-deep); font-weight:500; display:inline-flex; align-items:center; gap:10px;
  }
  .eyebrow::before{ content:''; width:26px; height:1px; background:var(--olive); display:inline-block; }
  h1,h2,h3{ font-family:var(--font-display); font-weight:900; color:var(--ink); }

  .sig-mark{ font-family:'Cairo',sans-serif; font-weight:900; display:inline-flex; align-items:center; gap:9px; font-size:16px; }
  .sig-mark .dot{ width:8px; height:8px; border-radius:2px; background:var(--sand); transform:rotate(45deg); }
  .sig-mark span.small{ font-family:var(--font-latin); font-weight:500; font-size:10px; letter-spacing:.28em; color:var(--ink-soft); text-transform:uppercase; }

  /* ===== NAV ===== */
  header{ position:fixed; inset-inline:0; top:0; z-index:50; padding:22px 0; transition:all .35s ease; }
  header.solid{ background:rgba(239,235,225,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:14px 0; }
  header .wrap{ display:flex; align-items:center; justify-content:space-between; }
  nav ul{ display:flex; gap:34px; }
  nav a{ font-size:14.5px; font-weight:500; position:relative; padding-bottom:4px; }
  nav a::after{ content:''; position:absolute; inset-inline-end:0; bottom:0; width:0; height:1.5px; background:var(--olive); transition:width .3s ease; }
  nav a:hover::after{ width:100%; }
  .nav-cta{ background:var(--olive); color:#fff !important; padding:10px 22px; border-radius:8px; font-size:13.5px; font-weight:600; }
  .nav-cta::after{ display:none; }

  /* ===== BURGER (زر قائمة الجوال) — عنصر button حقيقي بمساحة ضغط ٤٤×٤٤ ===== */
  .burger{
    display:none; position:relative; width:44px; height:44px; min-width:44px; min-height:44px;
    align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer;
    padding:0; margin:0; z-index:75; -webkit-tap-highlight-color:transparent; flex-shrink:0;
  }
  .burger span{
    position:absolute; inset-inline-start:11px; width:22px; height:2px; background:var(--ink); border-radius:2px;
    transition:transform .3s ease, opacity .3s ease;
  }
  .burger span:nth-child(1){ top:15px; }
  .burger span:nth-child(2){ top:21px; }
  .burger span:nth-child(3){ top:27px; }
  .burger[aria-expanded="true"] span:nth-child(1){ top:21px; transform:rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .burger[aria-expanded="true"] span:nth-child(3){ top:21px; transform:rotate(-45deg); }

  /* ===== خلفية التغطية خلف القائمة (تُنشأ تلقائيًا عبر initMobileMenu في script.js) ===== */
  .nav-backdrop{
    position:fixed; inset:0; background:rgba(20,20,15,.45);
    opacity:0; visibility:hidden; transition:opacity .3s ease; z-index:68;
  }
  .nav-backdrop.open{ opacity:1; visibility:visible; }

  /* زر الإغلاق داخل القائمة — يُنشأ تلقائيًا، ولا يظهر إلا على الجوال */
  .nav-close-item{ display:none; }
  .nav-close{
    display:flex; align-items:center; justify-content:center; width:38px; height:38px;
    border-radius:50%; border:1px solid var(--line); background:var(--bg); font-size:15px; cursor:pointer; padding:0;
    color:var(--ink); min-width:44px; min-height:44px;
  }

  body.nav-open-lock{ overflow:hidden; }

  @media(max-width:860px){
    nav ul{ display:none; }
    .burger{ display:flex; }
    header .wrap{ position:relative; }

    /* القائمة الجانبية: تنزلق من الحافة الفعلية اليمنى للشاشة بغضّ النظر عن اللغة،
       بينما محاذاة النصوص داخلها تتبع dir (rtl/ltr) تلقائيًا كما هو معمول به بالموقع */
    nav ul{
      display:flex; flex-direction:column; align-items:stretch; gap:2px;
      position:fixed; top:0; right:0; height:100vh; width:min(320px, 84vw);
      background:var(--card); box-shadow:-14px 0 40px -20px rgba(0,0,0,.4);
      padding:88px 26px 40px; margin:0; list-style:none;
      transform:translateX(100%); transition:transform .35s ease;
      z-index:70; overflow-y:auto;
    }
    nav ul.open{ transform:translateX(0); }
    nav ul li{ width:100%; }
    nav ul li a{
      display:block; padding:15px 6px; font-size:16px; width:100%;
      border-bottom:1px solid var(--line);
    }
    nav a::after{ display:none; }
    .nav-cta{ display:inline-block; margin-top:18px; text-align:center; width:100%; }
    .nav-close-item{
      display:flex; justify-content:flex-end; position:absolute; top:16px; inset-inline-end:16px; width:auto;
      list-style:none;
    }
  }

  /* ===== HERO (خلفية صورة حقيقية + بطاقة زجاجية شبه شفافة في المنتصف) ===== */
  .hero{
    min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding-top:140px; padding-bottom:90px;
    position:relative; overflow:hidden;
    border-radius:0 0 56px 56px;
    background:
      linear-gradient(rgba(239,235,225,.58), rgba(239,235,225,.58)),
      url("assets/images/hero-background.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  }
  .hero .wrap{ display:flex; justify-content:center; }
  .hero-card{
    width:100%; max-width:820px;
    background:rgba(251,249,244,.55);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    backdrop-filter:blur(16px) saturate(140%);
    border:1px solid rgba(255,255,255,.6);
    border-radius:28px;
    box-shadow:0 40px 70px -35px rgba(42,46,38,.35);
    padding:56px 64px;
  }
  .hero .eyebrow{ justify-content:center; }
  .hero-badge{
    display:block; height:56px; width:auto; margin:0 auto 26px;
  }
  .hero h1{
    font-size:clamp(36px,6.4vw,84px); line-height:1.2; margin:20px auto 30px; max-width:920px;
  }
  .hero h1 span{ color:var(--olive); }
  .hero p.lead{ font-size:18px; color:var(--ink-soft); max-width:640px; margin:0 auto 36px; }
  .btn-row{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
  .btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:9px; font-weight:600; font-size:15px; transition:transform .25s ease, box-shadow .25s ease; }
  .btn-primary{ background:var(--olive); color:#fff; box-shadow:0 14px 30px -12px rgba(56,63,50,.5); }
  .btn-primary:hover{ transform:translateY(-3px); }
  .btn-outline{ border:1.5px solid var(--ink); }
  .btn-outline:hover{ background:var(--ink); color:var(--bg); }

  @media(max-width:760px){
    .hero{ border-radius:0 0 34px 34px; padding-top:118px; padding-bottom:60px; background-position:center 30%; }
    .hero-card{ padding:38px 24px; border-radius:22px; }
    .hero h1{ margin:16px auto 22px; }
    .hero p.lead{ font-size:16px; margin-bottom:28px; }
    .btn-row{ flex-direction:column; align-items:stretch; }
    .btn{ justify-content:center; }
  }

  .ticker-wrap{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-deep); overflow:hidden; padding:18px 0; }
  .ticker{ display:flex; gap:60px; white-space:nowrap; animation:ticker 30s linear infinite; width:max-content; }
  .ticker span{ font-family:var(--font-latin); font-size:13px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft); }
  @keyframes ticker{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

  /* ===== SERVICES: أقسام مرقّمة كبيرة كاملة العرض مثل مشبك ===== */
  .service-block{
    min-height:78vh; display:flex; align-items:center; border-top:1px solid var(--line);
  }
  .service-block:nth-child(even){ background:var(--bg-deep); }
  .service-inner{ display:grid; grid-template-columns:.5fr 1fr; gap:60px; align-items:center; width:100%; }
  @media(max-width:820px){ .service-inner{ grid-template-columns:1fr; gap:30px; } }
  .service-num-big{
    font-family:var(--font-display); font-weight:900; font-size:clamp(90px,12vw,190px);
    line-height:1; color:transparent; -webkit-text-stroke:2px var(--sand);
  }
  .service-content span.tag{
    font-family:var(--font-latin); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--sand-deep); font-weight:600;
  }
  .service-content h3{ font-size:clamp(22px,2.9vw,36px); margin:14px 0 20px; line-height:1.3; }
  .service-content p.desc{ color:var(--ink-soft); font-size:16.5px; max-width:620px; margin-bottom:26px; }
  .service-content ul{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
  .service-content li{
    background:var(--card); border:1px solid var(--line); border-radius:100px; padding:9px 18px; font-size:13.5px; color:var(--ink-soft);
  }
  .service-link{ font-weight:700; color:var(--olive); display:inline-flex; align-items:center; gap:8px; font-size:15px; }
  .service-link::after{ content:'←'; }

  /* ===== STATS (رقم كبير مثل "أكثر من 489 عميل مميز") ===== */
  .bigstat{ padding:130px 0; text-align:center; background:var(--olive); color:#F3EEE0; }
  .bigstat h2{ color:#fff; font-size:clamp(26px,3.9vw,44px); margin-bottom:22px; }
  .bigstat p{ color:#DCD5C2; max-width:680px; margin:0 auto; font-size:16.5px; }
  .bigstat .stat-number{ font-family:var(--font-display); font-size:clamp(60px,9vw,120px); color:var(--sand-light); font-weight:900; line-height:1; margin-bottom:10px; }
  .bigstat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-bottom:60px; }
  @media(max-width:700px){ .bigstat-grid{ grid-template-columns:1fr; gap:40px; } }
  .bigstat-grid .stat-item{ border-inline-start:1px solid rgba(255,255,255,.18); }
  .bigstat-grid .stat-item:first-child{ border-inline-start:none; }
  .bigstat-grid .stat-number{ margin-bottom:14px; }
  .bigstat-grid .stat-label{ font-size:16.5px; color:#F3EEE0; font-weight:500; max-width:320px; margin:0 auto; line-height:1.5; }

  /* ===== ABOUT ===== */
  .about{ padding:120px 0; }
  .about-grid{ display:grid; grid-template-columns:.75fr 1.25fr; gap:60px; align-items:center; }
  @media(max-width:900px){ .about-grid{ grid-template-columns:1fr; } }
  .about-photo{
    position:relative; aspect-ratio:4/5; border-radius:18px; overflow:hidden;
    background:linear-gradient(160deg, var(--olive) 0%, var(--olive-deep) 100%);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 30px 60px -28px rgba(42,46,38,.4);
  }
  .about-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .about-text p{ color:var(--ink-soft); font-size:15.5px; margin-top:16px; }
  .about-text .signoff{ margin-top:30px; font-family:'Cairo'; font-weight:800; font-size:19px; color:var(--olive); }
  .pill-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
  .pill{ border:1px solid var(--line); background:var(--card); padding:9px 18px; border-radius:8px; font-size:13px; font-weight:500; }

  /* ===== CLIENTS (uniform logos, grayscale -> color on hover) ===== */
  .clients{ padding:0 0 120px; }
  .sec-head{ max-width:680px; margin-bottom:56px; }
  .sec-head.center{ margin-inline:auto; text-align:center; }
  .sec-head h2{ font-size:clamp(22px,3vw,36px); margin-top:16px; line-height:1.35; }
  .sec-head p{ color:var(--ink-soft); margin-top:16px; font-size:16px; }
  .clients-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px; }
  @media(max-width:900px){ .clients-grid{ grid-template-columns:repeat(3,1fr); } }
  @media(max-width:560px){ .clients-grid{ grid-template-columns:repeat(2,1fr); } }
  .client-logo{
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    height:110px; display:flex; align-items:center; justify-content:center; padding:22px;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .client-logo:hover{ transform:translateY(-3px); box-shadow:0 16px 30px -18px rgba(42,46,38,.3); }
  .client-logo img{
    max-height:46px; max-width:100%; width:auto; height:auto; object-fit:contain;
    filter:grayscale(100%) contrast(1.1); opacity:.85; transition:filter .3s ease, opacity .3s ease;
  }
  .client-logo:hover img{ filter:grayscale(0%); opacity:1; }

  /* ===== WHY (بطاقات تقارير) ===== */
  .why{ padding:0 0 130px; }
  .why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  @media(max-width:860px){ .why-grid{ grid-template-columns:1fr 1fr; } }
  @media(max-width:560px){ .why-grid{ grid-template-columns:1fr; } }
  .why-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:30px 26px; }
  .why-card .num{ font-family:var(--font-display); font-weight:900; color:var(--sand); font-size:22px; margin-bottom:16px; }
  .why-card p{ font-size:14.5px; color:var(--ink-soft); }

  /* ===== CONTACT ===== */
  .contact{ padding:130px 0; background:var(--ink); color:#F3EEE0; }
  .contact .eyebrow{ color:var(--sand-light); }
  .contact .eyebrow::before{ background:var(--sand-light); }
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
  @media(max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
  .contact-info h2{ font-size:clamp(24px,3.2vw,39px); line-height:1.35; color:#fff; margin-top:16px; }
  .contact-info p{ color:#C9C3AF; margin-top:18px; max-width:420px; }
  .info-list{ margin-top:36px; display:flex; flex-direction:column; gap:16px; }
  .info-list li{ display:flex; gap:14px; align-items:center; font-size:15px; }
  .info-list .ic{ width:38px; height:38px; border-radius:8px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:var(--sand-light); font-weight:700; flex-shrink:0; }
  .info-list a{ direction:ltr; unicode-bidi:bidi-override; }
  form{ display:flex; flex-direction:column; gap:16px; }
  form input, form textarea{ width:100%; padding:16px 18px; border-radius:10px; border:1.5px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); font-family:var(--font-body); font-size:15px; color:#fff; }
  form input::placeholder, form textarea::placeholder{ color:#A9A28D; }
  form input:focus, form textarea:focus{ outline:none; border-color:var(--sand-light); }
  form textarea{ min-height:130px; resize:vertical; }
  form button{ border:none; cursor:pointer; margin-top:6px; background:var(--sand); color:#221A0F; font-weight:800; }
  form button:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -12px rgba(185,144,90,.55); }

  /* ===== FOOTER (قوائم موسعة مثل مشبك) ===== */
  footer{ background:#20241D; color:#EDE7D8; padding:80px 0 30px; }
  .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.1); }
  @media(max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
  @media(max-width:560px){ .foot-grid{ grid-template-columns:1fr; } }
  .foot-grid .sig-mark{ color:#fff; margin-bottom:16px; }
  .foot-grid p{ color:#B7AF97; font-size:14px; max-width:280px; }
  .foot-links h5{ font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--sand-light); margin-bottom:18px; font-family:var(--font-latin); }
  .foot-links ul li{ margin-bottom:12px; font-size:14.5px; opacity:.85; }
  .foot-links ul li:hover{ opacity:1; }
  .foot-bottom{ display:flex; justify-content:space-between; padding-top:24px; font-size:13px; opacity:.65; flex-wrap:wrap; gap:10px; }

  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.show{ opacity:1; transform:translateY(0); }
  @media(prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* ===== LANG TOGGLE ===== */
.lang-toggle{
  display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--ink);
  border-radius:100px; padding:8px 6px; font-family:var(--font-latin); font-size:12px; font-weight:600;
  cursor:pointer; background:transparent; margin-inline-start:18px;
}
.lang-toggle span{ padding:5px 12px; border-radius:100px; transition:all .25s ease; color:var(--ink-soft); }
.lang-toggle span.active{ background:var(--olive); color:#fff; }
@media(max-width:860px){ .lang-toggle{ margin-inline-start:0; } }

/* ===== PROJECT DETAIL PAGE ===== */
.project-hero{ padding:150px 0 60px; }
.project-back{ display:inline-flex; align-items:center; gap:8px; color:var(--olive); font-weight:700; font-size:14.5px; margin-bottom:26px; }
.project-back::before{ content:'→'; }
.project-hero h1{ font-size:clamp(26px,3.9vw,46px); line-height:1.3; max-width:780px; margin:16px 0 20px; }
.project-hero p.lead{ color:var(--ink-soft); font-size:17px; max-width:640px; }
.project-image{ border-radius:20px; overflow:hidden; margin:20px auto 70px; box-shadow:0 30px 60px -30px rgba(42,46,38,.35); max-width:480px; }
.project-image img{ width:100%; display:block; }
.project-body{ padding-bottom:110px; }
.project-body-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:60px; }
@media(max-width:860px){ .project-body-grid{ grid-template-columns:1fr; } }
.project-body-grid h3{ font-size:20px; margin-bottom:16px; }
.project-body-grid ul{ display:flex; flex-direction:column; gap:12px; }
.project-body-grid li{ color:var(--ink-soft); font-size:15px; position:relative; padding-inline-start:20px; }
.project-body-grid li::before{ content:''; position:absolute; inline-size:6px; block-size:6px; border-radius:1px; background:var(--olive); top:8px; inset-inline-start:0; transform:rotate(45deg); }
.project-body-grid .desc p{ color:var(--ink-soft); font-size:16px; margin-bottom:16px; }
.project-cta{ margin-top:40px; padding-top:40px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }

/* ===== LTR (English) MODE ===== */
html[dir="ltr"] body{ font-family: var(--font-latin); }
html[dir="ltr"] h1, html[dir="ltr"] h2, html[dir="ltr"] h3{ font-family: var(--font-latin); }
html[dir="ltr"] .eyebrow::before{ margin-inline-end:0; }


/* ===== WORK: شبكة بطاقات طولية أنيقة + Lightbox ===== */
:root{
  --project-card-radius: 18px;
  --project-gap: 22px;
}

.work{ padding:0; }
.projects-showcase{
  background:#161C13; /* أخضر داكن جدًا من هوية الموقع، وليس أسود مشبك */
  color:#F3EEE0;
  padding: 76px 0 84px;
}
.projects-showcase .work-intro{ max-width:680px; margin-bottom:6px; }
.projects-showcase .work-intro h2{ color:#fff; font-size:clamp(22px,2.9vw,34px); line-height:1.35; }
.projects-showcase .work-intro p{ color:#C9C3AF; }
.projects-showcase .eyebrow{ color:var(--sand-light); }
.projects-showcase .eyebrow::before{ background:var(--sand-light); }

.projects-showcase .work-filters{ display:flex; gap:10px; flex-wrap:wrap; margin:28px 0 34px; }
.projects-showcase .work-filter-btn{
  padding:9px 18px; border-radius:100px; border:1px solid rgba(255,255,255,.22); background:transparent;
  color:#C9C3AF; font-size:13px; font-weight:600; cursor:pointer; transition:all .25s ease; font-family:var(--font-body);
}
.projects-showcase .work-filter-btn.active,
.projects-showcase .work-filter-btn:hover{ background:var(--sand); color:#1C1F17; border-color:var(--sand); }
.projects-showcase .work-filter-btn.active{ font-weight:800; }
.projects-showcase .work-filter-btn.active::before{ content:'● '; font-size:9px; vertical-align:middle; }
.projects-showcase .work-empty{
  background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.25); color:#C9C3AF;
  text-align:center; padding:26px; border-radius:14px; margin:0 auto; grid-column:1/-1;
}

/* ---- الشبكة: 3 أعمدة كمبيوتر / عمودان تابلت / عمود جوال ---- */
.projects-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--project-gap);
}
@media(max-width:1000px){ .projects-grid{ grid-template-columns:repeat(2, 1fr); } }
@media(max-width:600px){ .projects-grid{ grid-template-columns:1fr; } }

.project-card-grid{
  position:relative; display:flex; flex-direction:column; width:100%;
  background:transparent; border:none; padding:0; cursor:pointer; text-align:start; font-family:var(--font-body);
  transition:transform .3s ease;
}
.project-card-grid[hidden]{ display:none; }
.project-card-grid:hover{ transform:translateY(-5px); }
.project-card-grid:focus-visible{ outline:none; }
.project-card-grid:focus-visible .pcg-media{ outline:2px solid var(--sand-light); outline-offset:3px; }

/* صورة الغلاف — نسبة ثابتة موحّدة لكل البطاقات، مهما كانت أبعاد الصورة الأصلية */
.pcg-media{
  position:relative; display:block; width:100%; aspect-ratio:4/5;
  border-radius:var(--project-card-radius); overflow:hidden; background:#1c1f17;
  box-shadow:0 16px 34px -18px rgba(0,0,0,.5); transition:box-shadow .35s ease;
}
.project-card-grid:hover .pcg-media{ box-shadow:0 26px 46px -20px rgba(0,0,0,.55); }
.pcg-media img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  transition:transform .45s ease;
}
.project-card-grid:hover .pcg-media img{ transform:scale(1.045); }

.pcg-hover{
  position:absolute; inset:0; background:rgba(15,20,12,0);
  display:flex; align-items:center; justify-content:center; transition:background .3s ease;
}
.project-card-grid:hover .pcg-hover,
.project-card-grid:focus-visible .pcg-hover{ background:rgba(15,20,12,.48); }
.pcg-label{
  opacity:0; transform:translateY(10px); transition:all .3s ease;
  background:#fff; color:#1C1F17; font-weight:800; font-size:13px; padding:10px 22px; border-radius:100px;
  box-shadow:0 10px 22px -8px rgba(0,0,0,.4);
}
.project-card-grid:hover .pcg-label,
.project-card-grid:focus-visible .pcg-label{ opacity:1; transform:translateY(0); }

/* اسم المشروع ونوعه — ظاهران دومًا أسفل الصورة (وليس فقط عند المرور) */
.pcg-caption{ display:block; padding:14px 2px 0; }
.pcg-cat{
  display:block; color:var(--sand-light); font-size:11px; font-weight:700; letter-spacing:.05em; margin-bottom:5px;
}
.pcg-title{ display:block; color:#fff; font-size:14.5px; font-weight:800; line-height:1.4; }
.pcg-desc{ display:block; color:#C9C3AF; font-size:13px; line-height:1.65; margin-top:7px; }

/* بطاقات "مجالات العمل" الست بالرئيسية فقط: إطار ذهبي خفيف حول الصورة + أيقونة ذهبية صغيرة أسفل الوصف */
/* بطاقات "مجالات العمل" الست بالرئيسية: الصور المستخدمة تصاميم كاملة جاهزة
   (خلفية داكنة + إطار ذهبي + عنوان + وصف + أيقونة كلها داخل الصورة نفسها)،
   لذلك لا نضيف إطارًا أو تسمية HTML فوقها لتفادي التكرار البصري. */
.category-grid .pcg-media{ background:#161C13; }
.category-grid .pcg-caption{ padding:0; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.pcg-icon{
  display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border:1.5px solid var(--sand-light); border-radius:9px; margin-top:14px;
}
.pcg-icon svg{ width:18px; height:18px; color:var(--sand-light); }

.work-more-dark{ display:flex; justify-content:center; margin-top:44px; }
.work-more-dark .btn-outline{
  border:1.5px solid var(--olive); color:var(--olive); background:var(--card);
  box-shadow:0 10px 24px -14px rgba(42,46,38,.35); font-weight:700;
}
.work-more-dark .btn-outline:hover{ background:var(--olive); color:#fff; }

@media(prefers-reduced-motion: reduce){
  .project-card-grid, .pcg-media, .pcg-media img, .pcg-hover, .pcg-label{ transition:none !important; }
  .project-card-grid:hover{ transform:none; }
  .project-card-grid:hover .pcg-media img{ transform:none; }
}

/* على الجوال لا يوجد hover — نُبقي زر "مشاهدة المشروع" ظاهرًا دومًا (اسم/نوع المشروع
   ظاهران أصلًا بشكل دائم أسفل الصورة على كل الأحجام) */
@media(max-width:760px){
  .pcg-hover{ background:rgba(15,20,12,.22); }
  .pcg-label{ opacity:1; transform:none; }
}

/* شبكة صغيرة تُستخدم فقط في قسم "مشاريع مشابهة" بنهاية صفحة المشروع الفردي */
.work-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:22px; }
@media(max-width:900px){ .work-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .work-grid{ grid-template-columns:1fr; } }

.project-card{
  background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease; display:flex; flex-direction:column;
  min-height:380px;
}
.project-card:hover{ transform:translateY(-5px); box-shadow:0 26px 46px -26px rgba(42,46,38,.3); }
.project-card[hidden]{ display:none; }
.project-card-img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg-deep); }
.project-card-img img{ width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .5s ease; display:block; }
.project-card:hover .project-card-img img{ transform:scale(1.04); }
.project-card-view{
  position:absolute; inset-inline:0; bottom:0; padding:16px; display:flex; justify-content:flex-end;
  opacity:0; transform:translateY(8px); transition:all .3s ease;
  background:linear-gradient(180deg, transparent 40%, rgba(42,46,38,.55) 100%);
}
.project-card:hover .project-card-view{ opacity:1; transform:translateY(0); }
.project-card-view span{
  background:#fff; color:var(--ink); font-size:13px; font-weight:700; padding:9px 18px; border-radius:100px;
}
.project-card-body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:8px; flex:1; }
.project-card-body .cat{ font-size:11.5px; letter-spacing:.06em; color:var(--sand-deep); font-weight:700; }
.project-card-body h3{ font-size:19px; }
.project-card-body .sector{ font-size:13px; color:var(--ink-soft); font-weight:500; }
.project-card-body .desc{ font-size:14px; color:var(--ink-soft); margin-top:4px; line-height:1.65; }
.project-card-cta{
  margin-top:14px; align-self:flex-start; font-weight:700; color:var(--olive); font-size:13.5px;
  display:inline-flex; align-items:center; gap:6px;
}
.project-card-cta::after{ content:'←'; }

.work-more{ display:flex; justify-content:center; margin-top:50px; }

/* ===== ALL PROJECTS PAGE header ===== */
.projects-page-hero{ padding:150px 0 20px; text-align:center; }
.projects-page-hero h1{ font-size:clamp(26px,3.9vw,43px); margin:16px auto 14px; max-width:760px; }
.projects-page-hero p{ color:var(--ink-soft); max-width:600px; margin:0 auto; font-size:16.5px; }

/* ===== PROJECT DETAIL: meta grid, story, gallery, lightbox, similar ===== */
.project-meta-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:34px 0 10px;
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px;
}
@media(max-width:760px){ .project-meta-grid{ grid-template-columns:1fr 1fr; } }
.project-meta-item .label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--sand-deep); font-weight:700; margin-bottom:6px; }
.project-meta-item .value{ font-size:14.5px; color:var(--ink); font-weight:600; }

.project-story{ padding:70px 0 20px; }
.project-story-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media(max-width:820px){ .project-story-grid{ grid-template-columns:1fr; } }
.story-card{ background:var(--bg-deep); border-radius:16px; padding:26px; }
.story-card h3{ font-size:16px; margin-bottom:12px; color:var(--olive); }
.story-card p{ font-size:14.5px; color:var(--ink-soft); line-height:1.75; }

.project-gallery{ padding:70px 0 100px; }
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media(max-width:900px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .gallery-grid{ grid-template-columns:1fr; } }
.gallery-item{
  border-radius:16px; overflow:hidden; cursor:zoom-in; position:relative; aspect-ratio:4/5;
  border:1px solid var(--line); background:var(--bg-deep);
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .4s ease; display:block; }
.gallery-item:hover img{ transform:scale(1.05); }

.lightbox{
  position:fixed; inset:0; background:rgba(20,22,17,.94); z-index:200; display:none;
  align-items:center; justify-content:center; padding:30px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:88vh; border-radius:10px; box-shadow:0 30px 60px rgba(0,0,0,.5); }
.lightbox-close{
  position:absolute; top:24px; inset-inline-end:24px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; border:none; font-size:20px; cursor:pointer;
}
.lightbox-close:hover{ background:var(--sand); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; border:none; font-size:18px; cursor:pointer;
}
.lightbox-nav:hover{ background:var(--sand); }
.lightbox-prev{ inset-inline-start:24px; }
.lightbox-next{ inset-inline-end:24px; }
.lightbox-counter{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,.12); color:#fff; font-size:13px; font-weight:700; letter-spacing:.03em;
  padding:8px 18px; border-radius:100px; direction:ltr;
}
.lightbox-counter[hidden]{ display:none; }
@media(max-width:640px){
  .lightbox-nav{ width:42px; height:42px; }
  .lightbox-prev{ inset-inline-start:10px; }
  .lightbox-next{ inset-inline-end:10px; }
  .lightbox-close{ top:14px; inset-inline-end:14px; }
  .lightbox-counter{ bottom:16px; font-size:12px; padding:7px 16px; }
}

.similar-projects{ padding:0 0 120px; background:var(--bg-deep); padding-top:90px; }

/* Back-to-projects nav + breadcrumb */
.project-back-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; margin-bottom:10px; }

/* ============================================================================
   معرض الشعارات — Logo Showcase
   ============================================================================ */
.logos-showcase{ padding:100px 0; background:var(--bg-deep); }
.logos-showcase .sec-head{ max-width:680px; margin-bottom:10px; }
.logos-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px; }
@media(max-width:900px){ .logos-grid{ grid-template-columns:repeat(2,1fr); } }

.logo-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:34px 22px; display:flex; align-items:center; justify-content:center; min-height:130px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.logo-card:hover{ transform:translateY(-4px); box-shadow:0 20px 36px -20px rgba(42,46,38,.18); }
.logo-card img{ max-height:64px; max-width:170px; width:auto; object-fit:contain; }

.logos-more{ display:flex; justify-content:center; margin-top:46px; }

/* logos.html page header */
.logos-page-hero{ padding:150px 0 20px; text-align:center; }
.logos-page-hero h1{ font-size:clamp(24px,3.4vw,38px); margin:16px auto 12px; max-width:700px; }
.logos-page-hero p{ color:var(--ink-soft); max-width:560px; margin:0 auto; font-size:16px; }
.logos-page-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:900px){ .logos-page-grid{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================================
   أيقونة واتساب العائمة
   ============================================================================ */
.wa-fab{
  position:fixed; bottom:24px; left:24px; z-index:120;
  width:58px; height:58px; border-radius:50%;
  background:var(--olive); display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -10px rgba(42,46,38,.55);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.wa-fab:hover{ transform:translateY(-4px) scale(1.05); background:#25D366; box-shadow:0 18px 34px -10px rgba(37,211,102,.55); }
.wa-fab svg{ width:28px; height:28px; }
.wa-fab-tooltip{
  position:absolute; inset-inline-end:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(6px);
  background:var(--ink); color:#fff; font-size:12.5px; font-weight:600; white-space:nowrap;
  padding:8px 14px; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.wa-fab-tooltip::after{
  content:''; position:absolute; top:50%; inset-inline-start:100%; transform:translateY(-50%);
  border:6px solid transparent; border-inline-start-color:var(--ink);
}
.wa-fab:hover .wa-fab-tooltip, .wa-fab:focus-visible .wa-fab-tooltip{ opacity:1; transform:translateY(-50%) translateX(0); }
@media(max-width:640px){
  .wa-fab{ width:50px; height:50px; bottom:16px; left:16px; }
  .wa-fab svg{ width:24px; height:24px; }
  .wa-fab-tooltip{ display:none; }
}

/* ===== نموذج التواصل: select + checkbox honeypot ===== */
form select{
  width:100%; padding:16px 18px; border-radius:10px; border:1.5px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); font-family:var(--font-body); font-size:15px; color:#fff;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23C9C3AF' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat; background-position:left 18px center;
}
form select:focus{ outline:none; border-color:var(--sand-light); }
form select option{ color:#111; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.form-wa-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:1.5px solid #25D366; color:#25D366; background:transparent; border-radius:10px;
  padding:14px 24px; font-weight:700; font-size:14.5px; margin-top:4px; transition:all .25s ease;
}
.form-wa-btn:hover{ background:#25D366; color:#fff; }

/* ============================================================================
   بطاقات "الباقات" — نسخة مختصرة بالصفحة الرئيسية
   ============================================================================ */
.packages-teaser{ padding:100px 0; background:var(--bg-deep); }
.packages-teaser .sec-head{ max-width:680px; margin-bottom:10px; }
.pkg-teaser-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:40px; }
@media(max-width:760px){ .pkg-teaser-grid{ grid-template-columns:1fr; } }
.pkg-teaser-card{
  background:var(--card); border:1px solid var(--line); border-radius:18px; padding:38px 34px;
  display:flex; flex-direction:column; gap:14px; transition:transform .3s ease, box-shadow .3s ease;
}
.pkg-teaser-card:hover{ transform:translateY(-5px); box-shadow:0 26px 46px -26px rgba(42,46,38,.3); }
.pkg-teaser-card .pkg-teaser-icon{
  width:52px; height:52px; border-radius:12px; background:var(--olive); color:var(--sand-light);
  display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:900; font-family:var(--font-display);
}
.pkg-teaser-card h3{ font-size:21px; margin-top:6px; }
.pkg-teaser-card .pkg-teaser-price{ color:var(--sand-deep); font-weight:800; font-size:15px; }
.pkg-teaser-card p.desc{ color:var(--ink-soft); font-size:14.5px; line-height:1.7; }
.pkg-teaser-card .btn{ align-self:flex-start; margin-top:8px; }

/* ============================================================================
   صفحة الباقات — packages.html
   ============================================================================ */
.packages-hero{ padding:150px 0 20px; text-align:center; }
.packages-hero h1{ font-size:clamp(26px,3.9vw,43px); margin:16px auto 14px; max-width:760px; }
.packages-hero p{ color:var(--ink-soft); max-width:620px; margin:0 auto; font-size:16.5px; }

.pkg-tabs{ display:flex; justify-content:center; gap:12px; margin:44px 0 10px; flex-wrap:wrap; }
.pkg-tab-btn{
  padding:13px 28px; border-radius:100px; border:1.5px solid var(--line); background:var(--card);
  color:var(--ink-soft); font-size:14.5px; font-weight:700; cursor:pointer; transition:all .25s ease; font-family:var(--font-body);
}
.pkg-tab-btn.active, .pkg-tab-btn:hover{ background:var(--olive); color:#fff; border-color:var(--olive); }

.packages-section{ padding:50px 0 110px; }
.pkg-panel[hidden]{ display:none; }
.pkg-panel h2{ text-align:center; font-size:clamp(19px,2.6vw,26px); margin-bottom:44px; }

.pkg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
@media(max-width:960px){ .pkg-grid{ grid-template-columns:1fr; max-width:480px; margin-inline:auto; } }

.pkg-card{
  position:relative; background:var(--card); border:1.5px solid var(--line); border-radius:20px;
  padding:38px 30px 34px; display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease;
}
.pkg-card:hover{ transform:translateY(-6px); box-shadow:0 30px 50px -28px rgba(42,46,38,.35); }
.pkg-card.featured{ border-color:var(--olive); box-shadow:0 30px 54px -28px rgba(42,46,38,.4); background:linear-gradient(180deg, var(--card) 0%, var(--bg-deep) 130%); }
.pkg-card-badge{
  position:absolute; top:-15px; inset-inline:0; margin-inline:auto; width:fit-content;
  background:var(--olive); color:#fff; font-size:12.5px; font-weight:800; padding:8px 20px; border-radius:100px;
  box-shadow:0 10px 20px -8px rgba(42,46,38,.5); white-space:nowrap;
}
.pkg-card.premium .pkg-card-badge{ background:var(--sand-deep); }
.pkg-card-name{ font-size:20px; font-weight:900; font-family:var(--font-display); margin-top:10px; }
.pkg-card-price{ display:flex; align-items:baseline; gap:8px; margin:16px 0 6px; }
.pkg-card-price .amount{ font-size:38px; font-weight:900; font-family:var(--font-display); color:var(--olive); }
.pkg-card-price .currency{ font-size:14px; font-weight:700; color:var(--ink-soft); }
.pkg-card-price .period{ font-size:13px; color:var(--ink-soft); }
.pkg-card-quota{ font-size:14px; color:var(--sand-deep); font-weight:700; margin-bottom:22px; }
.pkg-card-features{ display:flex; flex-direction:column; gap:12px; margin-bottom:28px; flex:1; }
.pkg-card-features li{
  position:relative; padding-inline-start:24px; font-size:14.5px; color:var(--ink-soft); line-height:1.6;
}
.pkg-card-features li::before{
  content:'✓'; position:absolute; inset-inline-start:0; top:0; color:var(--olive); font-weight:900;
}
.pkg-card-actions{ display:flex; flex-direction:column; gap:10px; margin-top:auto; }
.pkg-card-actions .btn-primary{ justify-content:center; text-align:center; }
.pkg-card-actions .btn-ghost{
  text-align:center; padding:12px 20px; border-radius:9px; font-weight:700; font-size:13.5px;
  color:var(--olive); border:1.5px solid var(--line); transition:all .25s ease;
}
.pkg-card-actions .btn-ghost:hover{ border-color:var(--olive); background:var(--bg-deep); }

.pkg-notes{
  max-width:820px; margin:56px auto 0; background:var(--bg-deep); border-radius:16px; padding:30px 32px;
}
.pkg-notes h3{ font-size:16px; margin-bottom:16px; color:var(--olive); }
.pkg-notes ul{ display:flex; flex-direction:column; gap:10px; }
.pkg-notes li{ position:relative; padding-inline-start:20px; font-size:14px; color:var(--ink-soft); line-height:1.7; }
.pkg-notes li::before{ content:''; position:absolute; inline-size:6px; block-size:6px; border-radius:1px; background:var(--sand); top:8px; inset-inline-start:0; transform:rotate(45deg); }

@media(max-width:640px){
  .pkg-card{ padding:32px 24px 28px; }
  .pkg-notes{ padding:24px 22px; }
}

/* ===== PORTFOLIO PDF PAGE (portfolio.html) ===== */
.portfolio-hero{ padding:150px 0 20px; text-align:center; }
.portfolio-hero h1{ font-size:clamp(26px,3.9vw,43px); margin:16px auto 14px; max-width:760px; }
.portfolio-hero p{ color:var(--ink-soft); max-width:620px; margin:0 auto; font-size:16.5px; }

.portfolio-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:28px; }

.portfolio-viewer-section{ padding:20px 0 100px; }
.portfolio-viewer-frame{
  width:100%; max-width:900px; margin:0 auto; border-radius:18px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 30px 60px -30px rgba(42,46,38,.35); background:var(--bg-deep);
}
.portfolio-viewer-frame iframe{
  width:100%; height:80vh; min-height:560px; max-height:900px; display:block; border:0; background:#fff;
}
.portfolio-fallback{
  display:none; text-align:center; padding:60px 24px; color:var(--ink-soft); font-size:15px;
}
.portfolio-fallback a{ color:var(--olive); font-weight:700; text-decoration:underline; }

/* على الجوال: العارض المضمّن يصعب استخدامه بارتياح — نُبرز أزرار الفتح/التحميل
   بوضوح ونقلّل ارتفاع العارض بدل إخفائه بالكامل (يبقى بديل احتياطي ظاهر دومًا). */
@media(max-width:760px){
  .portfolio-viewer-frame iframe{ height:60vh; min-height:420px; }
  .portfolio-actions .btn{ width:100%; justify-content:center; }
  .portfolio-actions{ flex-direction:column; }
}