/* ===========================================================
   نقش — طبقة الرفع الجمالي (Elevation Layer)
   تُحمَّل بعد الـCSS الأساسي لكل صفحة فتُحسّن المكوّنات المشتركة.
   إعادة تصور: عمق + معالجة صور موحّدة + طباعة محرّرية + حركة + شريط جوال.
   =========================================================== */
:root{
  --ink:#14120E;            /* فحمي دافئ بدل الأسود النقي */
  --ink-2:#1C1A15;
  --gold:#8C7B5E;
  --gold-2:#C8A96E;
  --shadow-sm:0 2px 8px rgba(20,18,14,.06);
  --shadow-md:0 14px 40px -16px rgba(20,18,14,.22);
  --shadow-lg:0 30px 70px -28px rgba(20,18,14,.40);
}

/* ---------- خلفيات داكنة أدفأ + لمسة عمق ---------- */
.stats,#testimonials,.hs-bar,footer,.stories-cta{background-color:var(--ink) !important}
.hs-bar{position:relative;border-top:1px solid rgba(200,169,110,.16);border-bottom:1px solid rgba(200,169,110,.16)}
.stats::before,#testimonials::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 320px at 88% -8%,rgba(200,169,110,.10),transparent 70%)}
.stats,#testimonials{position:relative;overflow:hidden}

/* ---------- توقيع «نقش»: فاصل هندسي ذهبي رفيع ---------- */
.sec-head,.sec-h{position:relative}
.naqsh-rule,.sec-head::after{content:'';display:block;width:54px;height:0;margin-top:14px;
  border-top:2px solid var(--gold);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 12px);
          mask:repeating-linear-gradient(90deg,#000 0 6px,transparent 6px 12px)}

/* ---------- طباعة محرّرية ---------- */
.section-badge,.s-label,.dot-label{font-family:'IBM Plex Mono',monospace !important;
  text-transform:uppercase;letter-spacing:.12em;font-size:11px !important}
.hero h1{letter-spacing:-.01em;line-height:1.12}
.sec-head h2,.sec-h h2{letter-spacing:-.01em}

/* ---------- معالجة الصور: نسبة موحّدة + تدرّج دافئ للتماسك ---------- */
.p-card-img{aspect-ratio:4/3;height:auto !important;position:relative;background:#ECE7DE}
.p-card-img img{width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.p-card-img::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,18,14,0) 52%,rgba(20,18,14,.34))}
.p-card:hover .p-card-img img{transform:scale(1.06)}
.overview-gallery img,.spec-card img{object-position:center}

/* ---------- بطاقات المشاريع: عمق + خط ذهبي عند المرور ---------- */
.p-card{border-radius:18px;box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s,border-color .3s}
.p-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.p-card-body h3{position:relative;display:inline-block;padding-bottom:5px}
.p-card-body h3::after{content:'';position:absolute;right:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--gold-2),var(--gold));transition:width .35s ease}
.p-card:hover .p-card-body h3::after{width:100%}

/* ---------- بطاقات المميزات / المواصفات ---------- */
.feat-card,.spec-card,.story-card{transition:transform .3s,box-shadow .3s,border-color .3s}
.feat-card:hover,.spec-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(140,123,94,.4)}

/* ---------- أزرار بعمق ألطف ---------- */
.btn-p,.nav-cta,.submit-btn{box-shadow:0 8px 22px -10px rgba(140,123,94,.7)}
.btn-p:hover,.submit-btn:hover{box-shadow:0 14px 30px -10px rgba(140,123,94,.85)}

/* ---------- أرقام الإنجاز أوضح ---------- */
.hs-n,.s-num{font-family:'IBM Plex Mono',monospace !important;letter-spacing:-.02em}

/* ---------- الهيرو: Ken Burns + تدرّج أعمق ---------- */
.hero-bg img.kb-on{animation:naqshKB 20s ease-in-out infinite alternate}
@keyframes naqshKB{from{transform:scale(1.02)}to{transform:scale(1.11)}}
.hero-overlay,.hero-bg::after{background:linear-gradient(to left,rgba(20,18,14,.30),rgba(20,18,14,.78)) !important}
/* مؤشر التمرير */
.scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;
  width:26px;height:42px;border:2px solid rgba(255,255,255,.45);border-radius:14px;display:flex;justify-content:center;padding-top:7px}
.scroll-cue::before{content:'';width:4px;height:8px;background:#fff;border-radius:3px;animation:scrollDot 1.6s infinite}
@keyframes scrollDot{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}80%{opacity:0;transform:translateY:(8px)}100%{opacity:0;transform:translateY(8px)}}
@media(max-width:600px){.scroll-cue{display:none}}

/* ---------- حركة الظهور (مع fallback أأمن) ---------- */
.fade{will-change:opacity,transform}
@media(prefers-reduced-motion:reduce){.fade{opacity:1 !important;transform:none !important}}

/* ---------- شريط الإجراءات السفلي للجوال ---------- */
.m-actionbar{position:fixed;bottom:0;right:0;left:0;z-index:960;display:none;
  grid-template-columns:1fr 1fr 1.3fr;background:rgba(20,18,14,.97);backdrop-filter:blur(12px);
  border-top:1px solid rgba(200,169,110,.28);box-shadow:0 -8px 30px rgba(0,0,0,.35)}
.m-actionbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:9px 6px 10px;font-family:'Tajawal',sans-serif;font-weight:700;font-size:12px;color:#fff}
.m-actionbar a svg{width:19px;height:19px}
.m-actionbar .mab-wa{color:#25D366}
.m-actionbar .mab-cta{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#1A1A1A}
@media(max-width:1023px){
  .m-actionbar{display:grid}
  body{padding-bottom:62px}
  .wa{display:none !important}
}

/* ===========================================================
   الطبقة الثانية — خرائط داكنة + توقيع نقش + شبكة تحريرية + فوتر
   =========================================================== */

/* ---------- خرائط بثيم داكن مخصص (مع كشف الألوان عند المرور) ---------- */
.map-section iframe,.map-wrapper iframe{
  filter:grayscale(.25) invert(.90) hue-rotate(185deg) brightness(.92) contrast(.92);
  transition:filter .55s ease;border-radius:16px}
.map-section iframe:hover,.map-wrapper iframe:hover{filter:none}
.map-section .map-wrapper{border:1px solid rgba(140,123,94,.28) !important;box-shadow:var(--shadow-md)}

/* ---------- توقيع «نقش»: شبكة زخرفية خافتة على الأقسام الداكنة ---------- */
#testimonials,.warranty-full,footer,.stories-cta,#warranty{
  background-image:
    repeating-linear-gradient(45deg, rgba(200,169,110,.030) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(-45deg, rgba(200,169,110,.030) 0 1px, transparent 1px 24px) !important;
  background-attachment:fixed}

/* ---------- شبكة المشاريع التحريرية (الرئيسية): مشروع مميّز كبير ---------- */
@media(min-width:880px){
  #projects .projects-grid{grid-template-columns:1fr 1fr !important}
  #projects .projects-grid>.p-card:first-child{grid-column:1 / -1;display:flex;flex-direction:row;overflow:hidden}
  #projects .projects-grid>.p-card:first-child .p-card-img{width:56%;flex-shrink:0;aspect-ratio:16/10;height:auto}
  #projects .projects-grid>.p-card:first-child .p-card-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:34px 36px}
  #projects .projects-grid>.p-card:first-child h3{font-size:30px}
  #projects .projects-grid>.p-card:first-child .price{font-size:26px}
}

/* ---------- فوتر مصقول ---------- */
footer{position:relative;border-top:2px solid transparent;
  border-image:repeating-linear-gradient(90deg,var(--gold) 0 8px,transparent 8px 16px) 1}
footer .f-col h4{color:var(--gold-2) !important;font-family:'IBM Plex Mono',monospace;
  text-transform:uppercase;letter-spacing:.08em;font-size:12px !important}
footer .f-col a:hover{color:var(--gold-2) !important;padding-right:4px;transition:all .2s}