/*
Theme Name: دار البناء للاستشارات البيئية
Theme URI: https://daaralbena.com
Description: قالب مخصص عالي الأداء لدار البناء للاستشارات البيئية — عربي RTL، تصميم نظيف سريع، محسّن لتصدّر محركات البحث السعودية. بناء وكالة ثلاث مرات.
Author: 3marat
Version: 1.1.0
Text Domain: daaralbena
*/

/* ===== Fonts — Thmanyah Sans, self-hosted (no third-party font requests) ===== */
@font-face{font-family:'Thmanyah Sans';font-weight:300;font-style:normal;font-display:swap;src:url(fonts/thmanyah-300.woff2) format('woff2');}
@font-face{font-family:'Thmanyah Sans';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/thmanyah-400.woff2) format('woff2');}
@font-face{font-family:'Thmanyah Sans';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/thmanyah-500.woff2) format('woff2');}
@font-face{font-family:'Thmanyah Sans';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/thmanyah-700.woff2) format('woff2');}
@font-face{font-family:'Thmanyah Sans';font-weight:900;font-style:normal;font-display:swap;src:url(fonts/thmanyah-900.woff2) format('woff2');}

/* ===== Tokens ===== */
:root{
  --green:#1B5137; --green-d:#123c28; --green-l:#2c7049; --petrol:#0e3b43;
  --lime:#6fa331; --lime-d:#5c8a25;
  --ink:#152922; --body:#3f4d45; --muted:#6d7c73;
  --paper:#f2f6ee; --paper-2:#e9f0e2; --white:#ffffff; --line:#e3e9dc; --sand:#edf3e4;
  --gold:#b7891f;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;
  --ar:'Thmanyah Sans',"Segoe UI",system-ui,-apple-system,"Tahoma",sans-serif;
  --wrap:1160px; --gap:clamp(18px,4vw,40px);
  --r:14px; --r-lg:22px; --r-sm:9px;
  --sh-sm:0 1px 2px rgba(21,41,34,.05),0 4px 12px -6px rgba(21,41,34,.10);
  --sh:0 2px 6px rgba(21,41,34,.05),0 14px 40px -18px rgba(21,41,34,.20);
  --sh-lg:0 30px 70px -30px rgba(14,59,67,.35);
  --t:.25s cubic-bezier(.2,.7,.2,1);
}

/* ===== Reset/base ===== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;font-family:var(--ar);font-size:18px;line-height:1.85;color:var(--body);background:var(--white);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
h1,h2,h3,h4,h5{margin:0 0 .5em;font-weight:700;line-height:1.28;color:var(--ink);text-wrap:balance;letter-spacing:-.01em;}
p{margin:0 0 1.1em;}
a{color:var(--green);text-decoration:none;transition:color var(--t);}
a:hover{color:var(--lime-d);}
img{max-width:100%;height:auto;display:block;}
ul,ol{margin:0 0 1.2em;padding-inline-start:1.4em;}
li{margin-bottom:.5em;}
strong{color:var(--ink);font-weight:700;}
::selection{background:var(--sand);color:var(--green-d);}
:focus-visible{outline:3px solid var(--lime);outline-offset:2px;border-radius:4px;}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(18px,5vw,40px);}
.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;}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--ar);font-size:1rem;font-weight:700;
  padding:13px 26px;border-radius:99px;border:1.5px solid transparent;cursor:pointer;transition:all var(--t);
  white-space:nowrap;line-height:1;text-align:center;}
.btn svg{width:18px;height:18px;}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 6px 18px -8px rgba(27,81,55,.7);}
.btn-primary:hover{background:var(--green-d);color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(27,81,55,.75);}
.btn-lime{background:var(--lime);color:#0f2b12;}
.btn-lime:hover{background:var(--lime-d);color:#0f2b12;transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--green);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--green);background:var(--paper);color:var(--green-d);}
.btn-wa{background:#25D366;color:#0a3d1c;}
.btn-wa:hover{background:#1eb658;color:#0a3d1c;transform:translateY(-2px);}
.btn-white{background:#fff;color:var(--green-d);}
.btn-white:hover{background:var(--paper);transform:translateY(-2px);color:var(--green-d);}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);transition:box-shadow var(--t);}
.site-header.scrolled{box-shadow:var(--sh-sm);}
.hdr{display:flex;align-items:center;gap:14px;height:72px;}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.brand .mark{width:42px;height:42px;flex:0 0 auto;}
.brand .bt{display:flex;flex-direction:column;line-height:1.15;}
.brand .bt b{font-size:1.12rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;}
.brand .bt span{font-size:.72rem;color:var(--muted);font-weight:500;}
.nav{margin-inline-start:auto;}
.nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;}
/* the header row is capped at the 1160px wrap on every desktop width, so the nav is
   sized once for the tightest case rather than loosened on wide screens */
.nav a{display:block;padding:8px 9px;border-radius:99px;color:var(--ink);font-weight:500;font-size:.88rem;
  transition:all var(--t);white-space:nowrap;}
.hdr-cta .btn{padding:11px 15px;font-size:.9rem;}
.nav a:hover,.nav .current-menu-item>a,.nav .current_page_item>a{background:var(--paper);color:var(--green);}
.nav .menu-item-has-children{position:relative;}
.nav .sub-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:250px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh);padding:8px;list-style:none;margin:0;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:all var(--t);}
.nav .menu-item-has-children:hover .sub-menu,
.nav .menu-item-has-children:focus-within .sub-menu{opacity:1;visibility:visible;transform:none;}
.nav .sub-menu a{padding:9px 12px;font-size:.92rem;}
.hdr-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.menu-toggle{display:none;background:none;border:1.5px solid var(--line);border-radius:10px;width:44px;height:44px;
  cursor:pointer;align-items:center;justify-content:center;color:var(--ink);}
.menu-toggle svg{width:24px;height:24px;}
@media(max-width:1240px){
  .hdr-cta .btn-ghost{display:none;}
  .nav a{font-size:1.02rem;}
  .nav{position:fixed;inset:72px 0 auto 0;background:#fff;border-bottom:1px solid var(--line);
    margin:0;padding:14px;box-shadow:var(--sh);transform:translateY(-120%);transition:transform var(--t);max-height:calc(100vh - 72px);overflow-y:auto;}
  .nav.open{transform:none;}
  .nav ul{flex-direction:column;gap:2px;}
  .nav a{padding:12px 14px;font-size:1.05rem;}
  .nav .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;
    padding-inline-start:16px;border-inline-start:2px solid var(--line);border-radius:0;margin-top:2px;}
  .menu-toggle{display:inline-flex;margin-inline-start:auto;}
}

/* ===== Section scaffold ===== */
section{padding-block:clamp(54px,8vw,96px);}
.sec-alt{background:var(--paper);}
.sec-dark{background:var(--petrol);color:#cfe0dd;}
.sec-dark h2,.sec-dark h3{color:#fff;}
.sec-head{max-width:units;margin-bottom:clamp(30px,5vw,52px);}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:.85rem;color:var(--green);
  background:var(--sand);padding:9px 20px;border-radius:99px;margin-bottom:16px;
  line-height:1.5;white-space:nowrap;max-width:100%;}
.eyebrow svg{width:18px;height:18px;flex:0 0 auto;}
@media(max-width:420px){.eyebrow{white-space:normal;text-align:center;}}
.eyebrow.on-dark{background:rgba(255,255,255,.1);color:#bfe6a5;}
h2.big{font-size:clamp(1.7rem,4vw,2.5rem);}
.lede{font-size:clamp(1.05rem,2vw,1.22rem);color:var(--muted);max-width:60ch;margin-top:14px;}
.sec-dark .lede{color:#a9c3bf;}

/* ===== Hero ===== */
.hero{position:relative;background:linear-gradient(180deg,var(--paper) 0%,#fff 100%);overflow:hidden;padding-block:clamp(48px,7vw,88px);}
.hero::before{content:"";position:absolute;inset-block:0;inset-inline-start:-10%;width:60%;z-index:0;opacity:.55;
  background:radial-gradient(closest-side,rgba(27,81,55,.16),transparent 70%);}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,56px);align-items:center;}
.hero-badge{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  padding:7px 15px 7px 9px;border-radius:99px;font-size:.86rem;font-weight:600;color:var(--green-d);box-shadow:var(--sh-sm);margin-bottom:22px;}
.hero-badge .lf{width:24px;height:24px;background:var(--green);border-radius:50%;display:grid;place-items:center;}
.hero-badge .lf svg{width:14px;height:14px;color:#fff;}
/* Black (900) only at display sizes — connected Arabic script turns muddy if a
   heavy weight is used at body/section scale, so section h2 stays at 700. */
.hero h1{font-size:clamp(2.05rem,5.2vw,3.5rem);font-weight:900;letter-spacing:-.03em;
  line-height:1.22;margin-bottom:.4em;}
.hero h1 .hl{color:var(--green);position:relative;white-space:nowrap;}
.hero p.sub{font-size:clamp(1.08rem,2.2vw,1.32rem);color:var(--body);max-width:38ch;margin-bottom:28px;line-height:1.7;}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px;}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 22px;}
.hero-trust .ht{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted);font-weight:500;}
.hero-trust .ht svg{width:19px;height:19px;color:var(--lime-d);flex:0 0 auto;}
/* hero visual — real photography, brand-tinted; cards float free outside the frame */
.hero-visual{position:relative;aspect-ratio:4/5;}
.hero-photo{position:absolute;inset:0;margin:0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--green);box-shadow:var(--sh-lg);isolation:isolate;}
.hero-photo .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 45%;filter:saturate(.9) contrast(1.06);}
/* brand gradient anchored at the base — ties the sunset to the palette
   without muddying the sky (a full green multiply turns orange into olive) */
.hero-photo .tint{position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(9,38,29,.92) 0%, rgba(12,48,40,.62) 22%, rgba(14,59,67,.24) 48%, rgba(14,59,67,.05) 70%, transparent 100%);}
.hero-photo .glow{position:absolute;inset-inline:0;top:0;height:38%;
  background:linear-gradient(to bottom,rgba(9,38,29,.34),transparent);}
.hero-photo .topo{position:absolute;inset-inline:0;bottom:0;width:100%;height:46%;opacity:.10;
  mix-blend-mode:overlay;}
.hero-photo .place{position:absolute;inset-inline:0;bottom:0;display:flex;align-items:center;gap:9px;
  padding:40px 22px 17px;color:#fff;font-size:.9rem;font-weight:600;letter-spacing:-.01em;
  background:linear-gradient(to top,rgba(6,26,20,.9),rgba(6,26,20,.45) 45%,transparent);}
.hero-photo .place svg{width:18px;height:18px;color:var(--lime);flex:0 0 auto;}
.hv-card{position:absolute;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.7);
  border-radius:var(--r);box-shadow:0 22px 48px -18px rgba(9,32,25,.55),0 2px 6px rgba(9,32,25,.1);
  padding:14px 17px;display:flex;align-items:center;gap:12px;backdrop-filter:blur(10px) saturate(1.2);}
.hv-card .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;color:#fff;}
.hv-card .tx b{display:block;font-size:1.35rem;font-weight:900;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;}
.hv-card .tx span{font-size:.76rem;color:var(--muted);}
.hv-1{inset-block-start:7%;inset-inline-start:-7%;}
.hv-1 .ic{background:var(--green);}
/* sits above the caption band at the base of the frame */
.hv-2{inset-block-end:23%;inset-inline-end:-6%;}
.hv-2 .ic{background:var(--lime);color:#123;}
.hv-badge{position:absolute;inset-block-end:40%;inset-inline-end:-4%;background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.7);border-radius:var(--r);padding:12px 16px;
  box-shadow:0 22px 48px -18px rgba(9,32,25,.55),0 2px 6px rgba(9,32,25,.1);
  display:flex;align-items:center;gap:11px;backdrop-filter:blur(10px);}
.hv-badge .seal{width:38px;height:38px;flex:0 0 auto;}
.hv-badge b{font-size:.9rem;color:var(--ink);display:block;line-height:1.25;}
.hv-badge span{font-size:.72rem;color:var(--muted);}
/* ===== نموذج الهيرو =====
   العميل طلب أن يواجه النموذجُ الزائرَ فور دخوله (منافس يفعلها)، فحلّ محلّ
   الصورة: النص يميناً والنموذج يساراً وكلاهما فوق الطيّة.
   وكتلة الثقة صارت عنصر شبكة مستقلاً تحتهما — لو بقيت داخل النص لدفعت
   النموذج أسفل الشاشة على الجوال، وهو عكس المطلوب تماماً. */
.hero-form-wrap{position:relative;}
.hero-form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:clamp(20px,2.6vw,28px);}
.hfc-head{display:flex;align-items:center;gap:12px;padding-bottom:15px;margin-bottom:16px;
  border-bottom:1px solid var(--line);}
.hfc-head .seal{width:40px;height:40px;flex:0 0 auto;}
.hfc-head b{display:block;font-size:1.05rem;color:var(--ink);line-height:1.3;}
.hfc-head>div>span{font-size:.82rem;color:var(--muted);}
.hfc-stats{display:flex;gap:22px;justify-content:center;margin-top:16px;padding-top:15px;
  border-top:1px solid var(--line);}
.hfc-stats span{font-size:.8rem;color:var(--muted);display:flex;align-items:baseline;gap:6px;}
.hfc-stats b{font-size:1.15rem;font-weight:900;color:var(--green);font-variant-numeric:tabular-nums;}
.hero-trust{grid-column:1/-1;margin-top:4px;}

@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;gap:32px;}
  .hero-form-wrap{max-width:460px;margin-inline:auto;width:100%;}
  .hero-visual{max-width:400px;margin-inline:auto;width:100%;}
}
/* small screens: two trust cards only — three over a 350px photo is clutter,
   and the third collided with the caption band */
@media(max-width:600px){
  .hv-2{display:none;}
  .hv-1{inset-block-start:5%;inset-inline-start:-2%;}
  .hv-badge{inset-block-end:26%;inset-inline-end:-2%;}
  .hv-card,.hv-badge{transform:scale(.92);transform-origin:center;}
  .hero-photo .place{padding:44px 16px 14px;font-size:.84rem;}
}

/* ===== Trust logos strip ===== */
.trustbar{border-block:1px solid var(--line);background:#fff;}
.trustbar .wrap{display:flex;align-items:center;gap:14px 34px;flex-wrap:wrap;justify-content:center;padding-block:22px;}
.trustbar .tl{font-size:.92rem;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:9px;}
.trustbar .tl svg{width:20px;height:20px;color:var(--green);}
.trustbar .sepdot{width:5px;height:5px;border-radius:50%;background:var(--line);}

/* ===== Cards grid ===== */
.grid{display:grid;gap:20px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:940px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.svc-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;
  transition:all var(--t);overflow:hidden;display:flex;flex-direction:column;}
.svc-card::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--green),var(--lime));transform:scaleX(0);transform-origin:inline-end;transition:transform var(--t);}
.svc-card:hover{border-color:transparent;box-shadow:var(--sh);transform:translateY(-4px);}
.svc-card:hover::after{transform:scaleX(1);}
.svc-card .ic{width:52px;height:52px;border-radius:14px;background:var(--sand);display:grid;place-items:center;margin-bottom:16px;transition:all var(--t);}
.svc-card:hover .ic{background:var(--green);}
.svc-card .ic svg{width:27px;height:27px;color:var(--green);transition:color var(--t);}
.svc-card:hover .ic svg{color:#fff;}
.svc-card h3{font-size:1.18rem;margin-bottom:8px;}
.svc-card h3 a{color:var(--ink);}
.svc-card:hover h3 a{color:var(--green);}
.svc-card p{font-size:.95rem;color:var(--muted);margin-bottom:14px;flex:1;}
.svc-card .more{font-size:.9rem;font-weight:700;color:var(--green);display:inline-flex;align-items:center;gap:6px;}
.svc-card .more svg{width:15px;height:15px;transition:transform var(--t);}
.svc-card:hover .more svg{transform:translateX(-4px);}

/* sectors */
.sector-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;text-align:center;transition:all var(--t);}
.sector-card:hover{box-shadow:var(--sh);transform:translateY(-3px);border-color:var(--paper-2);}
.sector-card .ic{width:56px;height:56px;margin:0 auto 12px;border-radius:50%;background:var(--paper);display:grid;place-items:center;}
.sector-card .ic svg{width:28px;height:28px;color:var(--green);}
.sector-card b{display:block;font-size:1rem;color:var(--ink);font-weight:700;}

/* ===== Stats / why ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 20px;text-align:center;}
.stat .n{font-size:clamp(2rem,4vw,2.8rem);font-weight:900;color:var(--green);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.stat .n .plus{color:var(--lime-d);}
.stat .l{font-size:.92rem;color:var(--muted);margin-top:8px;}
.sec-dark .stat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);}
.sec-dark .stat .n{color:#fff;}
.sec-dark .stat .l{color:#a9c3bf;}

/* ===== Process ===== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:st;}
@media(max-width:820px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.steps{grid-template-columns:1fr;}}
.step{position:relative;padding-top:16px;}
.step .num{width:46px;height:46px;border-radius:13px;background:var(--green);color:#fff;display:grid;place-items:center;
  font-weight:700;font-size:1.2rem;font-family:var(--mono);margin-bottom:14px;box-shadow:0 8px 18px -8px rgba(27,81,55,.6);}
.step h3{font-size:1.08rem;margin-bottom:6px;}
.step p{font-size:.92rem;color:var(--muted);margin:0;}

/* ===== CTA band ===== */
.ctaband{background:linear-gradient(135deg,var(--green) 0%,var(--petrol) 100%);border-radius:var(--r-lg);
  padding:clamp(34px,5vw,58px);color:#fff;position:relative;overflow:hidden;text-align:center;}
.ctaband::after{content:"";position:absolute;inset-block-start:-30%;inset-inline-end:-10%;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(111,163,49,.45),transparent 68%);}
.ctaband h2{color:#fff;font-size:clamp(1.5rem,3.5vw,2.2rem);position:relative;}
.ctaband p{color:rgba(255,255,255,.86);max-width:56ch;margin:12px auto 26px;position:relative;font-size:1.08rem;}
.ctaband .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;}

/* ===== Testimonials ===== */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;position:relative;}
.quote .qm{font-size:3rem;line-height:0;color:var(--paper-2);font-family:Georgia,serif;position:absolute;top:20px;inset-inline-start:24px;}
.quote p{font-size:1.02rem;color:var(--body);position:relative;margin-bottom:16px;}
.quote .who{display:flex;align-items:center;gap:12px;}
.quote .who .av{width:44px;height:44px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;color:var(--green);font-weight:700;}
.quote .who b{display:block;font-size:.95rem;color:var(--ink);}
.quote .who span{font-size:.82rem;color:var(--muted);}

/* ===== Blog cards ===== */
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:all var(--t);display:flex;flex-direction:column;}
.post-card:hover{box-shadow:var(--sh);transform:translateY(-4px);}
.post-card .thumb{aspect-ratio:16/10;background:var(--paper-2);overflow:hidden;}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.post-card:hover .thumb img{transform:scale(1.05);}
.post-card .pc-body{padding:20px 22px;display:flex;flex-direction:column;flex:1;}
.post-card .cat{font-size:.76rem;font-weight:700;color:var(--lime-d);margin-bottom:8px;}
.post-card h3{font-size:1.1rem;margin-bottom:8px;}
.post-card h3 a{color:var(--ink);}
.post-card:hover h3 a{color:var(--green);}
.post-card .ex{font-size:.9rem;color:var(--muted);flex:1;}

/* ===== Footer ===== */
.site-footer{background:var(--petrol);color:#a9c3bf;padding-top:clamp(46px,6vw,72px);}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:36px;padding-bottom:44px;}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:30px;}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr;}}
.site-footer h4{color:#fff;font-size:1.02rem;margin-bottom:16px;}
/* buttons keep their own colours — `.site-footer a` outranks `.btn-*` on
   specificity and was repainting the WhatsApp button text at 1.06:1 contrast */
.site-footer a:not(.btn){color:#a9c3bf;}
.site-footer a:not(.btn):hover{color:#fff;}
.foot-brand .fb{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.foot-brand .fb .mark{width:44px;height:44px;}
.foot-brand .fb b{color:#fff;font-size:1.14rem;}
.foot-brand p{font-size:.92rem;line-height:1.8;}
.foot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.foot-list a{font-size:.94rem;}
.foot-contact li{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;margin-bottom:12px;list-style:none;}
.foot-contact{padding:0;margin:0;}
.foot-contact svg{width:19px;height:19px;color:var(--lime);flex:0 0 auto;margin-top:3px;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-block:22px;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:.85rem;color:#8aa8a3;}

/* ===== Inner page hero + breadcrumb ===== */
.page-hero{background:linear-gradient(180deg,var(--paper),#fff);border-bottom:1px solid var(--line);padding-block:clamp(34px,5vw,58px);position:relative;overflow:hidden;}
.page-hero::before{content:"";position:absolute;inset-block:0;inset-inline-start:-8%;width:44%;
  background:radial-gradient(closest-side,rgba(27,81,55,.10),transparent 72%);}
.page-hero .wrap{position:relative;}
.crumbs{font-size:.84rem;color:var(--muted);margin-bottom:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.crumbs a{color:var(--green);}
.crumbs .sep{color:var(--line);}
.page-hero h1{font-size:clamp(1.8rem,4.2vw,2.7rem);font-weight:900;letter-spacing:-.025em;
  line-height:1.25;max-width:22ch;}
.page-hero .kw-chip{display:inline-flex;align-items:center;gap:8px;background:var(--sand);color:var(--green-d);
  font-size:.82rem;font-weight:600;padding:8px 18px;border-radius:99px;margin-bottom:16px;line-height:1.5;}
.page-hero .kw-chip svg{width:17px;height:17px;flex:0 0 auto;}

/* ===== Article content ===== */
.entry-wrap{display:grid;grid-template-columns:1fr 320px;gap:clamp(30px,5vw,56px);align-items:start;}
@media(max-width:940px){.entry-wrap{grid-template-columns:1fr;}}
.entry{font-size:1.05em;line-height:1.9;color:var(--body);max-width:72ch;}
.entry h2{scroll-margin-top:96px;}
/* auto table of contents (long guides) */
.dab-toc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;margin-bottom:28px;}
.dab-toc b{display:block;font-size:1rem;color:var(--ink);margin-bottom:10px;}
.dab-toc ol{margin:0;padding-inline-start:1.2em;display:grid;gap:6px;}
.dab-toc li{margin:0;}
.dab-toc a{font-size:.95rem;font-weight:500;text-decoration:none;}
.dab-toc a:hover{text-decoration:underline;text-underline-offset:3px;}
.entry h2{font-size:clamp(1.35rem,2.6vw,1.72rem);margin-top:1.7em;padding-top:.2em;}
.entry h3{font-size:1.22rem;margin-top:1.4em;color:var(--green-d);}
.entry p{margin-bottom:1.2em;}
.entry ul{list-style:none;padding-inline-start:0;}
.entry ul li{position:relative;padding-inline-start:30px;margin-bottom:.7em;}
.entry ul li::before{content:"";position:absolute;inset-inline-start:0;top:.5em;width:18px;height:18px;border-radius:50%;
  background:var(--sand);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B5137' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;}
.entry ol{padding-inline-start:1.3em;}
.entry ol li{margin-bottom:.7em;padding-inline-start:6px;}
.entry ol li::marker{color:var(--green);font-weight:700;}
.entry blockquote{margin:1.5em 0;padding:18px 22px;background:var(--paper);border-inline-start:4px solid var(--green);border-radius:var(--r-sm);font-size:1.05rem;color:var(--ink);}
.entry a{font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--paper-2);}
.entry a:hover{text-decoration-color:var(--lime);}
.entry img{border-radius:var(--r);margin-block:1.4em;box-shadow:var(--sh-sm);}
/* figures otherwise keep the UA default 40px inline margin, which eats most of
   the usable width on a phone */
.entry figure{margin-inline:0;}
.entry .dab-fig{margin-block:1.6em;}
.entry .dab-fig img{display:block;width:100%;height:auto;margin-block:0;}
.entry table{width:100%;border-collapse:collapse;margin-block:1.4em;font-size:.96rem;}
.entry th,.entry td{border:1px solid var(--line);padding:11px 14px;text-align:right;}
.entry th{background:var(--paper);color:var(--ink);font-weight:700;}

/* sidebar */
.aside{position:sticky;top:92px;display:flex;flex-direction:column;gap:20px;}
.aside-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-sm);}
.aside-card.cta{background:linear-gradient(150deg,var(--green),var(--petrol));color:#fff;border:none;}
.aside-card.cta h4{color:#fff;}
.aside-card.cta p{color:rgba(255,255,255,.85);font-size:.92rem;}
/* WhatsApp brand green is a different hue from the brand green it sits on here,
   so the sidebar copy becomes a proper secondary under the lime primary */
.aside-card.cta .btn-wa{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.5);}
.aside-card.cta .btn-wa:hover{background:#fff;color:var(--green-d);border-color:#fff;}
.aside-card h4{font-size:1.05rem;margin-bottom:14px;}
.aside-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;}
.aside-links a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;font-size:.94rem;color:var(--ink);font-weight:500;transition:all var(--t);}
.aside-links a:hover{background:var(--paper);color:var(--green);}
.aside-links a svg{width:16px;height:16px;color:var(--lime-d);flex:0 0 auto;}

/* ===== FAQ ===== */
.faq{margin-top:clamp(36px,5vw,60px);}
.faq-item{border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;overflow:hidden;background:#fff;transition:box-shadow var(--t);}
.faq-item[open]{box-shadow:var(--sh-sm);}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:700;color:var(--ink);font-size:1.05rem;
  display:flex;justify-content:space-between;gap:16px;align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .ch{width:24px;height:24px;flex:0 0 auto;border-radius:50%;background:var(--sand);display:grid;place-items:center;transition:transform var(--t);}
.faq-item summary .ch svg{width:14px;height:14px;color:var(--green);}
.faq-item[open] summary .ch{transform:rotate(180deg);background:var(--green);}
.faq-item[open] summary .ch svg{color:#fff;}
.faq-item .ans{padding:0 22px 20px;color:var(--body);font-size:1rem;line-height:1.8;}

/* ===== helper sections ===== */
.center{text-align:center;}
.mt-cta{margin-top:clamp(40px,6vw,72px);}
.section-foot-cta{margin-top:40px;text-align:center;}

/* ===== reveal ===== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}

/* ===== WhatsApp floating fallback (creame handles main) ===== */

/* ===== Contact ===== */
.contact-grid{display:grid;grid-template-columns:1fr 400px;gap:clamp(28px,5vw,52px);align-items:start;}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;}.contact-grid>aside{order:-1;}}
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px;}
@media(max-width:520px){.contact-cards{grid-template-columns:1fr;}}
.cc{display:flex;gap:13px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;transition:all var(--t);}
a.cc:hover{box-shadow:var(--sh);transform:translateY(-2px);border-color:var(--paper-2);}
.cc .ic{width:44px;height:44px;border-radius:12px;background:var(--sand);color:var(--green);display:grid;place-items:center;flex:0 0 auto;}
.cc .ic svg{width:22px;height:22px;}
.cc b{display:block;color:var(--ink);font-size:.98rem;}
.cc span span,.cc>span>span{font-size:.85rem;color:var(--muted);}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh);position:sticky;top:92px;}
.dab-form{display:flex;flex-direction:column;gap:14px;}
/* block لا flex: التسمية ونجمة الإلزام عقدتان شقيقتان، وflex-column يجعل
   كلاً منهما عنصراً مستقلاً فتنزل النجمة سطراً وحدها. */
.dab-form label{display:block;font-size:.88rem;font-weight:600;color:var(--ink);}
.dab-form label>input,.dab-form label>select,.dab-form label>textarea{margin-top:6px;}
.dab-form input,.dab-form select,.dab-form textarea{font-family:var(--ar);font-size:1rem;padding:11px 14px;border:1.5px solid var(--line);
  border-radius:10px;background:var(--paper);color:var(--ink);transition:border-color var(--t);width:100%;}
.dab-form input:focus,.dab-form select:focus,.dab-form textarea:focus{outline:none;border-color:var(--green);background:#fff;}
.map-wrap{margin-top:32px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);height:360px;box-shadow:var(--sh-sm);}
.map-wrap iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.9);}

/* ===== Pagination ===== */
.dab-pagination .page-numbers{display:inline-flex;min-width:42px;height:42px;align-items:center;justify-content:center;
  padding:0 12px;margin:0 3px;border-radius:10px;border:1px solid var(--line);color:var(--ink);font-weight:600;transition:all var(--t);}
.dab-pagination .page-numbers.current{background:var(--green);color:#fff;border-color:var(--green);}
.dab-pagination a.page-numbers:hover{background:var(--paper);border-color:var(--green);color:var(--green);}

/* ===== Form extras (QA round) ===== */
.dab-form .req{color:#b4550f;}
.dab-hp{position:absolute!important;left:-9999px!important;height:0;overflow:hidden;}
.dab-note{font-size:.8rem;color:var(--muted);margin:0;text-align:center;}
.dab-note a{font-weight:600;}
.dab-sent{margin-top:16px;background:var(--sand);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 18px;font-size:.94rem;color:var(--ink);}
.dab-form button + button{margin-top:-4px;}
/* search (404 + archives) */
.dab-search{display:flex;gap:10px;justify-content:center;margin-top:26px;flex-wrap:wrap;}
.dab-search input{font-family:var(--ar);font-size:1rem;padding:12px 18px;border:1.5px solid var(--line);
  border-radius:99px;background:var(--paper);color:var(--ink);min-width:min(320px,100%);}
.dab-search input:focus{outline:none;border-color:var(--green);background:#fff;}
/* blog card category is now a link */
a.cat{display:inline-block;font-size:.76rem;font-weight:700;color:var(--lime-d);margin-bottom:8px;}
a.cat:hover{color:var(--green);text-decoration:underline;text-underline-offset:3px;}
/* footer legal row */
.foot-legal{display:flex;gap:10px;align-items:center;}
.foot-legal a{text-decoration:none;}
.foot-legal a:hover{text-decoration:underline;text-underline-offset:3px;}
/* in-body links inside hub/service copy */
.entry .dab-inline-links{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 26px;}
.entry .dab-inline-links a{display:inline-flex;align-items:center;gap:7px;background:var(--paper);
  border:1px solid var(--line);border-radius:99px;padding:8px 16px;font-size:.92rem;font-weight:600;
  color:var(--green);text-decoration:none;transition:all var(--t);}
.entry .dab-inline-links a:hover{background:var(--sand);border-color:var(--green);transform:translateY(-2px);}

/* photo credit (front page only) */
.foot-credit{margin:0;padding-bottom:18px;font-size:.74rem;color:#7a968f;text-align:center;}
.foot-credit a{color:#9ab8b1;text-decoration:underline;text-underline-offset:2px;}
.foot-credit a:hover{color:#fff;}

/* ===== Floating WhatsApp (native, replaces the Joinchat plugin) ===== */
.whatsapp-float{position:fixed;bottom:24px;right:24px;left:auto;width:60px;height:60px;
  background:#25d366;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 30px rgba(37,211,102,.42),0 2px 8px rgba(0,0,0,.16);z-index:9999;
  transition:transform var(--t),box-shadow var(--t);}
.whatsapp-float svg{width:30px;height:30px;position:relative;z-index:2;}
.whatsapp-float:hover{color:#fff;transform:scale(1.07);box-shadow:0 14px 38px rgba(37,211,102,.55);}
.whatsapp-float:active{transform:scale(.97);}
/* attention ring */
.whatsapp-float::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(37,211,102,.65);animation:dab-wa-ring 2.6s ease-out infinite;}
@keyframes dab-wa-ring{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.55);opacity:0}100%{opacity:0}}
/* label appears on hover (desktop only) */
.whatsapp-float .wa-tip{position:absolute;right:72px;white-space:nowrap;background:var(--ink);color:#fff;
  font-size:.86rem;font-weight:600;padding:8px 14px;border-radius:10px;opacity:0;transform:translateX(6px);
  pointer-events:none;transition:all var(--t);box-shadow:var(--sh);}
.whatsapp-float .wa-tip::after{content:"";position:absolute;right:-5px;top:50%;margin-top:-5px;
  width:10px;height:10px;background:var(--ink);transform:rotate(45deg);}
.whatsapp-float:hover .wa-tip,.whatsapp-float:focus-visible .wa-tip{opacity:1;transform:none;}
@media(max-width:640px){
  .whatsapp-float{width:54px;height:54px;bottom:18px;right:18px;}
  .whatsapp-float svg{width:27px;height:27px;}
  .whatsapp-float .wa-tip{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .whatsapp-float::after{animation:none;}
  .whatsapp-float:hover{transform:none;}
}

/* ===== Legal credentials (CR / NCEC) ===== */
.dab-creds{margin-top:clamp(30px,5vw,46px);}
.dab-creds h2{font-size:clamp(1.3rem,2.6vw,1.65rem);margin-bottom:18px;}
.dab-creds-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;}
.dab-creds .cred{display:flex;gap:14px;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;}
.dab-creds .cred .ic{width:44px;height:44px;flex:0 0 auto;border-radius:12px;background:#fff;
  border:1px solid var(--line);display:grid;place-items:center;}
.dab-creds .cred .ic svg{width:22px;height:22px;color:var(--green);}
.dab-creds .cred .tx{display:flex;flex-direction:column;gap:3px;}
.dab-creds .cred .lab{font-size:.85rem;color:var(--muted);}
.dab-creds .cred .val{font-family:var(--mono);font-size:1.22rem;color:var(--ink);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;direction:ltr;text-align:right;}
.dab-creds .cred .note{font-size:.84rem;color:var(--muted);}
/* footer additions */
.foot-phones{display:flex;flex-direction:column;gap:3px;}
.foot-cr{display:inline-block;margin-inline-start:8px;color:#8aa8a3;}
.foot-cr b{font-family:var(--mono);font-weight:600;color:#a9c3bf;}

/* accreditation stat: an icon instead of a number, long label allowed to wrap */
.stat-accred .n{display:flex;align-items:center;justify-content:center;min-height:2.6rem;}
.stat-accred .n svg{width:38px;height:38px;color:var(--lime);}
.stat-accred .l{max-width:22ch;margin-inline:auto;line-height:1.55;}
/* hero badge: full authority name may wrap on narrow screens */
.hero-badge{align-items:flex-start;line-height:1.55;text-align:start;}
.hero-badge .lf{margin-top:1px;}
/* NCEC seal card over the photo */
.hv-badge{max-width:250px;}
.hv-badge b{font-size:.92rem;}
.hv-badge span span{font-size:.72rem;line-height:1.45;display:block;}

/* ===== Editor copy on the template-driven home and posts pages ===== */
.home-prose{background:var(--paper);border-top:1px solid var(--line);padding-block:clamp(44px,6vw,76px);}
.home-prose .entry,.blog-intro .entry{max-width:80ch;margin-inline:auto;}
.blog-intro{padding-block:0 clamp(40px,6vw,72px);}
.blog-intro .entry{border-top:1px solid var(--line);padding-top:clamp(32px,5vw,52px);}
/* the section already sits on --paper, so lift the ToC card off it */
.home-prose .dab-toc{background:#fff;}

/* ==========================================================================
   «الطبقات» — نظام المحتوى الطويل داخل .entry
   المقال يُقرأ كتقرير مسح ميداني: كل قسم محطة تحمل أيقونتها ورقمها على فاصل
   طبوغرافي، والفهرس لوحة محطات، والقوائم إمّا بطاقات مصطلحات أو سجلّ تحقّق.
   يسري تلقائيًا على ٤٢ صفحة عبر CSS + فلتر the_content — بلا تحرير يدوي.
   RTL بالخصائص المنطقية بالكامل. صفر طلبات شبكة (كل الموتيفات data: URI).
   ========================================================================== */

.entry{
  --dab-leaf-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6'/%3E%3C/svg%3E");
  --dab-leaf-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B5137' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6'/%3E%3C/svg%3E");
  --dab-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  --dab-contour:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' fill='none' stroke='%231B5137' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M0 7c16-5 33-5 50 0s34 5 50 0 33-5 50 0 34 5 50 0'/%3E%3Cpath d='M0 11c16-5 33-5 50 0s34 5 50 0 33-5 50 0 34 5 50 0' opacity='.45'/%3E%3C/svg%3E");
  --dab-topo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%231B5137' stroke-width='2'%3E%3Cpath d='M100 8c50 0 84 38 84 92s-34 92-84 92-84-38-84-92S50 8 100 8z'/%3E%3Cpath d='M100 36c36 0 60 27 60 64s-24 64-60 64-60-27-60-64 24-64 60-64z'/%3E%3Cpath d='M100 64c22 0 36 16 36 36s-14 36-36 36-36-16-36-36 14-36 36-36z'/%3E%3Cpath d='M100 92c8 0 13 6 13 13s-5 13-13 13-13-6-13-13 5-13 13-13z'/%3E%3C/svg%3E");
  --dab-e:cubic-bezier(.2,.7,.2,1);
  counter-reset:dab-sec;
}

/* ---------- 1. الفقرة الافتتاحية ----------
   بالمجاورة لا بـ:first-of-type — أربع صفحات تبدأ بصورة، فـ:first-of-type
   كانت ستضع لوحة الافتتاحية في منتصف المقال. */
.entry > .dab-toc + p{
  font-size:1.1em;line-height:1.85;font-weight:500;color:var(--ink);
  background:linear-gradient(150deg,var(--sand),rgba(237,243,228,0) 78%);
  border-inline-start:3px solid var(--lime);
  border-start-start-radius:var(--r);border-end-start-radius:var(--r);
  padding:18px 22px;margin-bottom:1.6em;
}
.entry h2 + p{color:var(--ink);}

/* ---------- 2. العناوين: أيقونة القسم + رقم شبح + فاصل طبوغرافي ---------- */
.entry h2{
  position:relative;counter-increment:dab-sec;isolation:isolate;
  padding-inline-start:56px;line-height:1.45;margin-top:2.1em;
}
.entry h2::before{                       /* الفاصل المنحني */
  content:"";position:absolute;inset-inline:0;top:-.78em;height:12px;
  background:var(--dab-contour) repeat-x center/200px 12px;
  opacity:.28;pointer-events:none;
}
.entry > h2:first-of-type::before{display:none;}
/* الرقم الشبح خلف العنوان — العناوين تصل إلى ١٤ كلمة، لذا يبقى خلفها بلون
   شديد الخفوت ولا يزاحم النص (تباين النص عليه يظل >12:1). */
.entry h2::after{
  content:counter(dab-sec,decimal);
  position:absolute;inset-inline-end:2px;top:-.34em;z-index:-1;
  font-size:3.05em;font-weight:900;line-height:1;letter-spacing:-.04em;
  color:var(--paper-2);font-variant-numeric:tabular-nums;
  pointer-events:none;user-select:none;
}
/* اللوحة الورقية التي تحمل أيقونة القسم (يحقنها فلتر PHP) */
.entry h2 .dab-h2-ic{
  position:absolute;inset-inline-start:0;top:.04em;
  width:40px;height:40px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,var(--green-l),var(--green) 60%,var(--green-d));
  border-start-start-radius:14px;border-end-end-radius:14px;
  border-start-end-radius:3px;border-end-start-radius:3px;
  box-shadow:0 6px 16px -8px rgba(27,81,55,.75);
  transition:transform .35s var(--dab-e),box-shadow .35s var(--dab-e);
}
.entry h2 .dab-h2-ic svg{width:21px;height:21px;}
.entry h2:hover .dab-h2-ic{transform:rotate(-6deg) scale(1.04);box-shadow:0 10px 22px -8px rgba(27,81,55,.8);}
/* لو عُطِّل الفلتر: لوحة مرقّمة بدل الأيقونة، فلا ينهار التصميم أبدًا */
.entry h2:not(:has(.dab-h2-ic)){padding-inline-start:0;}
.entry h2:not(:has(.dab-h2-ic))::after{inset-inline-end:auto;inset-inline-start:0;}

.entry h3{position:relative;padding-inline-start:30px;line-height:1.6;}
.entry h3::before{
  content:"";position:absolute;inset-inline-start:0;top:.2em;
  width:21px;height:21px;background:var(--dab-leaf-g) no-repeat center/21px;opacity:.9;
}

/* ---------- 3. التمييز داخل الفقرات ---------- */
.entry p strong{
  font-weight:700;color:var(--ink);
  background-image:linear-gradient(transparent 58%,rgba(111,163,49,.32) 58%);
}

/* ---------- 4. الفهرس: لوحة المحطات ---------- */
.entry .dab-toc{
  position:relative;overflow:hidden;container-type:inline-size;
  background:linear-gradient(155deg,var(--white) 0%,var(--paper) 58%,var(--paper-2) 100%);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(18px,2.4vw,26px);margin-bottom:34px;box-shadow:var(--sh-sm);
}
.entry .dab-toc::before{                 /* بصمة طبوغرافية */
  content:"";position:absolute;inset-block:-32%;inset-inline-end:-7%;width:min(300px,44%);
  background:var(--dab-topo) no-repeat center/contain;opacity:.055;pointer-events:none;
}
/* wpautop يترك </p> يتيمًا بعد عنوان الفهرس فيولّد فقرة فارغة ترث
   .entry p{margin-bottom:1.2em} — سبب مادي مباشر لفراغ الصندوق. */
.entry .dab-toc p:empty,.entry .dab-toc > p{display:none;}
.entry .dab-toc b{
  position:relative;display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  font-size:1.02rem;font-weight:700;color:var(--ink);
  margin-bottom:15px;padding-bottom:13px;border-bottom:1px solid var(--line);
}
.entry .dab-toc b::before{
  content:"";flex:0 0 auto;width:27px;height:27px;
  background:var(--dab-leaf-w) no-repeat center/15px,
             linear-gradient(145deg,var(--green-l),var(--green));
  border-start-start-radius:9px;border-end-end-radius:9px;
  border-start-end-radius:3px;border-end-start-radius:3px;
}
.entry .dab-toc ol{
  counter-reset:dab-toc;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:3px 14px;align-content:start;
}
/* استعلام حاوية لا شاشة: الكتلة تظهر بعرضين مختلفين داخل نفس النافذة
   (مقالة بشريط جانبي ~700px / قسم الرئيسية ~1000px). عمودان هما الأمثل —
   أعرض بند مقيس 355px، و١٦٫٧ بندًا وسيطًا. */
@container (min-width:500px){.entry .dab-toc ol{grid-template-columns:1fr 1fr;}}
.entry .dab-toc li{counter-increment:dab-toc;margin:0;}
/* عزل عن الكاسكيد: .entry a تطلي الروابط بتسطير ووزن ٦٠٠ */
.entry .dab-toc a{
  display:flex;height:100%;gap:10px;align-items:flex-start;
  padding:9px 10px;border-radius:11px;background-image:none;
  font-size:.925rem;font-weight:500;line-height:1.55;color:var(--body);
  text-decoration:none;transition:background .22s var(--dab-e),color .22s var(--dab-e);
}
.entry .dab-toc a::before{
  content:counter(dab-toc,decimal);
  flex:0 0 auto;width:25px;height:25px;display:grid;place-items:center;
  font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--green-d);background:var(--white);border:1px solid var(--line);
  border-start-start-radius:8px;border-end-end-radius:8px;
  border-start-end-radius:2px;border-end-start-radius:2px;
  transition:background .22s var(--dab-e),color .22s var(--dab-e),border-color .22s var(--dab-e);
}
.entry .dab-toc a:hover,.entry .dab-toc a:focus-visible{
  background:var(--white);color:var(--green-d);text-decoration:none;
}
.entry .dab-toc a:hover::before,.entry .dab-toc a:focus-visible::before{
  background:var(--green);color:#fff;border-color:var(--green);
}
/* القسم الجاري أثناء القراءة (scroll-spy) — يحوّل الفهرس من زينة إلى أداة */
.entry .dab-toc li.is-now > a{background:var(--white);color:var(--green-d);font-weight:700;}
.entry .dab-toc li.is-now > a::before{background:var(--lime);border-color:var(--lime);color:#0f2b12;}
/* زرّ الطيّ (تحقنه JS، ويظهر على الشاشات الصغيرة فقط) */
.dab-toc-toggle{
  display:none;margin-inline-start:auto;
  font:inherit;font-size:.8rem;font-weight:600;
  color:var(--green-d);background:var(--white);
  border:1px solid var(--line);border-radius:99px;cursor:pointer;
  padding:10px 18px;min-height:44px;align-items:center;
}
.dab-toc-toggle:hover{background:var(--sand);border-color:var(--green-l);}

/* ---------- 5. سجلّ التحقّق (قوائم بلا مصطلح قائد) ---------- */
.entry .dab-checks{list-style:none;padding-inline-start:0;margin-block:1.3em;display:grid;}
.entry .dab-checks li{
  position:relative;margin:0;
  padding-block:10px;padding-inline-start:40px;padding-inline-end:10px;
  border-radius:10px;transition:background .22s var(--dab-e);
}
.entry .dab-checks li + li{border-top:1px solid var(--line);}
.entry .dab-checks li:hover{background:var(--paper);}
.entry .dab-checks li::before{
  content:"";position:absolute;inset-inline-start:0;top:.72em;
  width:24px;height:24px;
  background:var(--dab-check) no-repeat center/13px,
             linear-gradient(145deg,var(--lime),var(--green-l));
  border-start-start-radius:8px;border-end-end-radius:8px;
  border-start-end-radius:2px;border-end-start-radius:2px;
  box-shadow:0 3px 8px -4px rgba(27,81,55,.55);
}
.entry ol.dab-checks{counter-reset:dab-n;}
.entry ol.dab-checks li{counter-increment:dab-n;}
.entry ol.dab-checks li::before{
  content:counter(dab-n,decimal);
  display:grid;place-items:center;background:linear-gradient(145deg,var(--green-l),var(--green));
  color:#fff;font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;
}

/* ---------- 6. بطاقات المصطلحات (كل عنصر يبدأ بـ<strong>) ---------- */
.entry .dab-terms{list-style:none;padding-inline-start:0;margin-block:1.5em;display:grid;gap:10px;}
.entry .dab-terms > li{
  position:relative;margin:0;overflow:hidden;
  padding-block:15px;padding-inline-start:56px;padding-inline-end:18px;
  background:linear-gradient(150deg,var(--white),var(--paper));
  border:1px solid var(--line);border-radius:var(--r);
  border-start-start-radius:var(--r-lg);box-shadow:var(--sh-sm);
  transition:transform .28s var(--dab-e),box-shadow .28s var(--dab-e),border-color .28s var(--dab-e);
}
.entry .dab-terms > li > strong{
  display:block;margin-bottom:3px;background:none;
  color:var(--green-d);font-weight:700;font-size:1.02em;line-height:1.6;
}
.entry .dab-terms > li::before{
  content:"";position:absolute;inset-inline-start:16px;top:16px;
  width:27px;height:27px;
  background:var(--dab-leaf-w) no-repeat center/15px,
             linear-gradient(145deg,var(--green-l),var(--green) 70%);
  border-start-start-radius:9px;border-end-end-radius:9px;
  border-start-end-radius:3px;border-end-start-radius:3px;
  box-shadow:0 4px 10px -5px rgba(27,81,55,.7);
}
.entry ol.dab-terms{counter-reset:dab-t;}
.entry ol.dab-terms > li{counter-increment:dab-t;}
.entry ol.dab-terms > li::before{
  content:counter(dab-t,decimal);
  display:grid;place-items:center;background:linear-gradient(145deg,var(--green-l),var(--green-d));
  color:#fff;font-size:.8rem;font-weight:900;font-variant-numeric:tabular-nums;
}
.entry .dab-terms > li::after{
  content:"";position:absolute;inset-inline-start:0;top:0;width:3px;height:0;
  background:linear-gradient(var(--lime),var(--green));
  transition:height .34s var(--dab-e);
}
.entry .dab-terms > li:hover{
  transform:translateY(-2px);border-color:var(--green-l);
  box-shadow:0 3px 8px rgba(21,41,34,.05),0 18px 40px -22px rgba(21,41,34,.35);
}
.entry .dab-terms > li:hover::after{height:100%;}
/* صمّام للقوائم الطويلة: صفوف بدل بطاقات */
.entry .dab-terms.dab-compact{gap:0;}
.entry .dab-terms.dab-compact > li{
  background:none;border:0;border-radius:0;box-shadow:none;
  padding-block:9px;padding-inline-start:40px;transform:none;
}
.entry .dab-terms.dab-compact > li + li{border-top:1px solid var(--line);}
.entry .dab-terms.dab-compact > li::before{inset-inline-start:0;top:.6em;width:24px;height:24px;background-size:13px,auto;}
.entry .dab-terms.dab-compact > li::after{display:none;}
.entry .dab-terms.dab-compact > li > strong{display:inline;margin:0;}

/* ---------- 7. الصور: إطار مقصود وتعليق مشتق من alt ---------- */
.entry .dab-fig{
  position:relative;overflow:hidden;margin-block:2em;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--paper);box-shadow:var(--sh-sm);
}
.entry .dab-fig img{
  display:block;width:100%;height:auto;margin:0;
  border-radius:0;box-shadow:none;transition:transform .7s var(--dab-e);
}
.entry .dab-fig:hover img{transform:scale(1.03);}
.entry .dab-fig figcaption{
  position:relative;z-index:1;
  display:flex;align-items:flex-start;gap:9px;
  padding:12px 16px;background:var(--paper);
  font-size:.86rem;line-height:1.65;color:var(--body);
  border-top:1px solid var(--line);
}
.entry .dab-fig figcaption::before{
  content:"";flex:0 0 auto;width:17px;height:17px;margin-top:2px;
  background:var(--dab-leaf-g) no-repeat center/17px;opacity:.75;
}
.entry .dab-fig figcaption::after{
  content:"";position:absolute;inset-inline:0;bottom:100%;height:88px;
  background:linear-gradient(to top,rgba(14,59,67,.42),rgba(14,59,67,0));
  pointer-events:none;
}

/* ---------- 8. كتلة الروابط الختامية (موجودة في ٤٢/٤٢ صفحة) ---------- */
.entry p.dab-seo-links{
  display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;
  background:var(--paper);border:1px dashed var(--line);border-radius:var(--r);
  padding:14px 18px;font-size:.94rem;color:var(--muted);margin-bottom:1em;
}
.entry p.dab-seo-links a{
  background-image:none;text-decoration:none;font-weight:600;
  color:var(--green-d);background:var(--white);
  border:1px solid var(--line);border-radius:99px;padding:6px 14px;
  transition:all var(--t);
}
.entry p.dab-seo-links a:hover{background:var(--green);color:#fff;border-color:var(--green);}

/* ---------- 9. إخفاء الأرقام الزخرفية عن قارئات الشاشة ----------
   ترتيب <ol> ونصّ العنوان يغنيان عنها. يجب أن تلي كل قواعد العدّادات أعلاه. */
@supports (content:"a" / "b"){
  .entry h2::after{content:counter(dab-sec,decimal) / "";}
  .entry .dab-toc a::before{content:counter(dab-toc,decimal) / "";}
  .entry ol.dab-checks li::before{content:counter(dab-n,decimal) / "";}
  .entry ol.dab-terms > li::before{content:counter(dab-t,decimal) / "";}
}

/* ---------- 10. الحركة ----------
   مسار أول: مدفوعة بالتمرير بلا جافاسكربت.
   مسار ثانٍ (فايرفوكس/سفاري القديم): IntersectionObserver — والإخفاء مشروط
   بكلاس تضيفه JS نفسها، فلا يختفي محتوى أبدًا لو تعطّل السكربت. */
@keyframes dab-rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes dab-rise-sm{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .entry > h2,.entry .dab-fig,.entry .dab-checks,.entry .dab-terms,.entry .dab-toc{
      animation:dab-rise .6s var(--dab-e) both;
      animation-timeline:view();animation-range:entry 0% cover 22%;
    }
    .entry .dab-terms > li{
      animation:dab-rise-sm .5s var(--dab-e) both;
      animation-timeline:view();animation-range:entry 0% cover 16%;
    }
  }
}
.dab-js-anim .entry > h2,.dab-js-anim .entry .dab-fig,
.dab-js-anim .entry .dab-checks,.dab-js-anim .entry .dab-terms{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--dab-e),transform .6s var(--dab-e);
}
.dab-js-anim .entry .dab-shown{opacity:1;transform:none;}

/* ---------- 11. الشاشات الصغيرة ---------- */
@media (max-width:720px){
  .entry h2{padding-inline-start:46px;}
  .entry h2 .dab-h2-ic{width:33px;height:33px;border-start-start-radius:11px;border-end-end-radius:11px;}
  .entry h2 .dab-h2-ic svg{width:18px;height:18px;}
  .entry h2::after{font-size:2.4em;}
  .entry > .dab-toc + p{padding:15px 17px;}
  .entry .dab-toc ol{grid-template-columns:1fr;gap:1px;}
  .entry .dab-toc.is-collapsed ol{display:none;}
  .dab-toc-toggle{display:inline-flex;}
  .entry .dab-terms > li{padding-inline-start:48px;padding-inline-end:14px;}
  .entry .dab-terms > li::before{inset-inline-start:13px;}
  .entry p.dab-seo-links{padding:12px 14px;}
}

/* ---------- 12. تعطيل الحركة بالكامل ---------- */
@media (prefers-reduced-motion:reduce){
  .entry *,.entry *::before,.entry *::after{animation:none !important;transition:none !important;}
  .dab-js-anim .entry > h2,.dab-js-anim .entry .dab-fig,
  .dab-js-anim .entry .dab-checks,.dab-js-anim .entry .dab-terms{opacity:1;transform:none;}
  .entry .dab-fig:hover img{transform:none;}
  .entry h2:hover .dab-h2-ic{transform:none;}
  .entry .dab-terms > li:hover{transform:none;}
  .entry .dab-terms > li:hover::after{height:100%;}
}

/* ---------- 13. الطباعة ---------- */
@media print{
  .entry .dab-toc::before,.entry h2::before,.entry h2::after,
  .entry .dab-fig figcaption::after,.dab-toc-toggle{display:none;}
  .entry .dab-terms > li,.entry .dab-fig{box-shadow:none;break-inside:avoid;}
  .entry h2{break-after:avoid;}
}

/* ===== إيقاع لوني بين كتل الرئيسية =====
   الصفحة كانت أبيض×3 ثم كتلة داكنة يتيمة ثم ورقي — أي بلا إيقاع.
   ثلاث درجات فاتحة متمايزة (باردة/دافئة/مائلة للبترولي) + كتلة داكنة متدرّجة،
   بحيث لا يتجاور قسمان بنفس النبرة. */
:root{ --mist:#eaf1f0; }                 /* فاتح مائل للبترولي */

.sec-cool{background:var(--paper);}
.sec-warm{background:var(--sand);}
.sec-mist{background:var(--mist);}
.sec-deep{background:var(--paper-2);}

/* الكتلة الداكنة: تدرّج بدل لون مسطّح، مع توهّج خفيف يمنع الجفاف */
.sec-dark{
  background:linear-gradient(158deg,var(--green) 0%,#12474a 55%,var(--petrol) 100%);
  position:relative;overflow:hidden;
}
.sec-dark::before{
  content:"";position:absolute;inset-inline-end:-10%;top:-30%;
  width:min(620px,70%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(111,163,49,.18),transparent 62%);
  pointer-events:none;
}
.sec-dark > *{position:relative;z-index:1;}

/* خيط فاصل شعري بين الفاتحات — يفصل بلا ضجيج */
.sec-cool + .sec-warm,.sec-warm + .sec-cool,
.sec-cool + .sec-mist,.sec-mist + .sec-cool,
.sec-deep + .sec-cool,.sec-cool + .sec-deep{border-top:1px solid var(--line);}

/* الشريط الأخير قبل الفوتر يرث درجة القسم الطويل */
.home-prose{background:var(--mist);border-top:1px solid var(--line);}

/* البطاقات البيضاء تحتاج حدًّا أوضح فوق الدرجات الملوّنة */
.sec-cool .svc-card,.sec-warm .svc-card,.sec-mist .svc-card,.sec-deep .svc-card,
.sec-cool .post-card,.sec-warm .post-card,.sec-mist .post-card,.sec-deep .post-card{
  border-color:#dde5d5;
}

/* ===== العلامة اللفظية =====
   سطر واحد الآن بلا وصف تحته، فيتوسّط الرمز رأسيًا ويكبر قليلًا ليملأ الارتفاع.
   الكشيدة في «البنـــاء» تحاكي مدّ الشعار الأصلي. */
.brand .bt{justify-content:center;}
.brand .bt b{font-size:1.34rem;letter-spacing:-.015em;line-height:1;}
.site-footer .foot-brand .fb b{font-size:1.22rem;}
@media(max-width:720px){.brand .bt b{font-size:1.18rem;}}

/* ===== شريط الثقة على الشاشات الصغيرة =====
   كان flex-wrap مع justify-content:center، فحين تلتفّ البنود تصير النقاط
   الفاصلة عناصر مستقلة تتناثر يمينًا ويسارًا. على الجوال: عمود واحد محاذٍ
   لبداية السطر (اليمين في العربية) والنقاط تختفي لأن لا شيء تفصله. */
@media(max-width:720px){
  .trustbar .wrap{
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:11px;padding-block:18px;
  }
  .trustbar .sepdot{display:none;}
  .trustbar .tl{width:100%;text-align:start;font-size:.88rem;}
  .trustbar .tl svg{flex:0 0 auto;}
}


/* شعار العميل */
.brand-logo{height:46px;width:auto;display:block}
@media(max-width:520px){.brand-logo{height:38px}}
.foot-brand .fb{align-items:center}
.fb-logo{display:inline-flex;background:#fff;border-radius:10px;padding:10px 14px;line-height:0}
.fb-logo .foot-logo{height:44px;width:auto;display:block}