/* ==========================================================================
   حمود المتعب للاستشارات الهندسية — hconsult.sa
   نظام التصميم: كحلي الشعار + أبيض + رمل وطين نجدي هادئ
   الزخارف النجدية: الشُّرَف (حافة السطح المدرّجة) والفُرَج (المثلثات)
   ========================================================================== */

/* ---------- الخطوط (مضمّنة محليًا) ---------- */
@font-face{font-family:"Alexandria";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/alexandria-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Alexandria";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/alexandria-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/plex-arabic-400.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/plex-latin-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/plex-arabic-500.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/plex-latin-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/plex-arabic-600.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/plex-latin-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- المتغيرات ---------- */
:root{
  --navy:#161748;            /* كحلي الشعار — اللون الأساسي */
  --navy-lift:#262a7c;
  --navy-deep:#11123b;
  --ink:#161748;
  --body:#3f4160;
  --muted:#6a6c88;
  --white:#fff;
  --sand-50:#faf7f1;         /* جصّ دافئ */
  --sand-100:#f3ecdf;        /* رمل نجدي فاتح */
  --sand-200:#e6d9c1;
  --clay:#d9bf8f;            /* طيني نجدي هادئ — بديل الأصفر */
  --clay-hover:#ccb07c;
  --clay-deep:#8c6c3a;
  --rule:rgba(22,23,72,.13);
  --rule-strong:rgba(22,23,72,.28);
  --rule-dark:rgba(255,255,255,.18);
  --shadow:0 30px 60px -38px rgba(22,23,72,.45);

  --display:"Alexandria","IBM Plex Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;
  --text:"IBM Plex Sans Arabic","Alexandria",system-ui,"Segoe UI",Tahoma,sans-serif;

  --gutter:clamp(20px,5vw,56px);
  --header-h:88px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --t0:.15s;

  /* الشُّرَف: حافة السطح النجدية المدرّجة */
  --merlon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='24' viewBox='0 0 44 24'%3E%3Cpath d='M0 24v-1h6v-7h6V9h6V2h8v7h6v7h6v7h6v1z'/%3E%3C/svg%3E");
  /* الفُرَج: صف المثلثات */
  --tri:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpath d='M3 11.5 10 .8l7 10.7z'/%3E%3C/svg%3E");
}
.intro{--t0:1.35s}

/* ---------- الأساس ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px)}
body{margin:0;background:var(--white);color:var(--body);font-family:var(--text);font-size:17px;line-height:1.9;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure{margin:0}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:700;text-wrap:balance}
h2{font-size:clamp(1.65rem,1.1rem + 2vw,2.5rem);line-height:1.4}
h3{font-size:1.18rem;line-height:1.6;font-weight:600}
p{text-wrap:pretty}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid #b3915a;outline-offset:3px;border-radius:4px}
::selection{background:var(--navy);color:#fff}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:16px;top:-60px;z-index:100;background:#fff;color:var(--ink);padding:10px 18px;border-radius:10px;font-family:var(--display);font-weight:600;transition:top .2s}
.skip:focus{top:12px}

.wrap{width:min(1200px,100% - 2*var(--gutter));margin-inline:auto}
.sec{padding-block:clamp(72px,9vw,124px);position:relative}
.sec--mist{background:var(--sand-50)}
.lead{font-size:1.14rem;line-height:1.95;color:var(--body)}

/* ---------- الزخارف النجدية ---------- */
.roofline{position:absolute;inset-inline:0;height:24px;background:var(--roof,#fff);pointer-events:none;z-index:2;
  -webkit-mask:var(--merlon) repeat-x center bottom/44px 24px;mask:var(--merlon) repeat-x center bottom/44px 24px}
.roofline--bottom{bottom:-1px}
.roofline--top{top:-23px}
.frieze{height:12px;background:var(--frieze,var(--clay));
  -webkit-mask:var(--tri) center/20px 12px;mask:var(--tri) center/20px 12px;-webkit-mask-repeat:round no-repeat;mask-repeat:round no-repeat}
.tri-mark{display:block;width:60px;height:12px;background:var(--clay-deep);margin-bottom:18px;
  -webkit-mask:var(--tri) repeat-x right center/20px 12px;mask:var(--tri) repeat-x right center/20px 12px}
.permit .tri-mark,.site-footer .tri-mark,.notfound .tri-mark{background:var(--clay)}

.sec-head{max-width:720px;margin-bottom:clamp(36px,5vw,60px)}
.sec-head p{margin-top:16px;font-size:1.1rem}
.sec-head--row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.sec-head--row>div{max-width:680px}

/* ---------- الأزرار والروابط ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 26px;border-radius:12px;font-family:var(--display);font-weight:600;font-size:.95rem;line-height:1;
  white-space:nowrap;transition:color .3s,border-color .3s,transform .3s var(--ease),box-shadow .3s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-hover);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:20px;height:20px;flex:none}
/* زر واتساب: ذهبي بدل الأخضر */
.btn--wa{background:var(--clay);color:var(--ink);--btn-hover:var(--clay-hover);box-shadow:0 14px 26px -16px rgba(140,108,58,.5)}
.btn--blue,.btn--navy{background:var(--navy);color:#fff;--btn-hover:var(--navy-lift);box-shadow:0 14px 26px -16px rgba(22,23,72,.8)}
.btn--light{background:#fff;color:var(--ink);--btn-hover:var(--sand-100)}
.btn--line{border:1.5px solid var(--rule-strong);color:var(--ink);--btn-hover:rgba(22,23,72,.06)}
.btn--line-light{border:1.5px solid rgba(255,255,255,.55);color:#fff;--btn-hover:rgba(255,255,255,.16)}
.btn--glass{border:1.5px solid rgba(255,255,255,.7);background:rgba(255,255,255,.12);color:#fff;--btn-hover:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn--sm{min-height:46px;padding:0 20px;font-size:.9rem;border-radius:10px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

.more{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--navy);
  padding-block:6px;border-bottom:1.5px solid var(--rule-strong);transition:border-color .3s,color .3s}
.more svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.more:hover{border-color:var(--navy)}
.more:hover svg{transform:translateX(-5px)}

.tri-list li{position:relative;padding-inline-start:26px;margin-block:10px;line-height:1.8}
.tri-list li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:13px;height:9px;background:var(--clay-deep);
  -webkit-mask:var(--tri) no-repeat center/15px 9px;mask:var(--tri) no-repeat center/15px 9px}
.permit .tri-list li::before{background:var(--clay)}

/* ---------- شاشة البداية (الشعار يتكوّن) ---------- */
.intro-screen{display:none}
.intro .intro-screen{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--navy);pointer-events:none;
  animation:introOut .7s 1.2s var(--ease) forwards}
.intro-screen svg{width:88px;height:88px}
.intro-screen rect{fill:#fff;transform-box:fill-box;transform:scale(0);animation:bandIn .55s var(--ease) forwards;animation-delay:calc(var(--k)*55ms + 80ms)}
.intro-screen .b-top rect{transform-origin:left center;transform:scaleX(0)}
.intro-screen .b-right rect{transform-origin:center top;transform:scaleY(0)}
.intro-screen .b-bottom rect{transform-origin:right center;transform:scaleX(0)}
.intro-screen .b-left rect{transform-origin:center bottom;transform:scaleY(0)}
.intro-screen .roofline{--roof:var(--navy);bottom:-23px;transform:scaleY(-1)}
@keyframes bandIn{to{transform:none}}
@keyframes introOut{to{transform:translateY(-104%);visibility:hidden}}

/* ---------- الهيدر ---------- */
.site-header{position:fixed;inset-block-start:0;inset-inline:0;z-index:60;color:#fff;transition:background-color .35s,box-shadow .35s,color .35s}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--header-h);transition:height .35s var(--ease)}
.brand{display:block;flex:none}
.brand img{height:50px;width:auto;transition:height .35s var(--ease)}
.brand .logo--dark{display:none}
.site-header.is-stuck{background:#fff;color:var(--ink);box-shadow:0 1px 0 var(--rule),0 16px 34px -26px rgba(22,23,72,.5)}
.site-header.is-stuck .header-inner{height:72px}
.site-header.is-stuck .brand img{height:42px}
.site-header.is-stuck .logo--light{display:none}
.site-header.is-stuck .logo--dark{display:block}

.nav-list{display:flex;align-items:center;gap:2px}
.nav-list>li{position:relative}
.nav-list>li>a{position:relative;display:flex;align-items:center;gap:6px;padding:12px 16px;font-family:var(--display);font-weight:500;font-size:.96rem;opacity:.86;transition:opacity .25s}
.nav-list>li>a::after{content:"";position:absolute;left:50%;bottom:2px;width:14px;height:8px;background:var(--clay);opacity:0;transform:translate(-50%,6px);
  -webkit-mask:var(--tri) no-repeat center/15px 9px;mask:var(--tri) no-repeat center/15px 9px;transition:opacity .3s,transform .3s var(--ease)}
.is-stuck .nav-list>li>a::after{background:var(--clay-deep)}
.nav-list>li>a:hover,.nav-list>li>a[aria-current="page"],.has-sub:focus-within>a{opacity:1}
.nav-list>li>a:hover::after,.nav-list>li>a[aria-current="page"]::after{opacity:1;transform:translate(-50%,0)}
.caret{width:14px;height:14px;transition:transform .3s var(--ease)}
.has-sub:hover .caret,.has-sub:focus-within .caret{transform:rotate(180deg)}
.sub{position:absolute;top:calc(100% + 4px);inset-inline-start:-6px;z-index:5;min-width:270px;padding:10px;background:#fff;border:1px solid var(--rule);border-radius:16px;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .3s var(--ease),visibility 0s .3s}
.sub::before{content:"";position:absolute;inset-inline:0;top:-12px;height:12px}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .3s var(--ease)}
.sub a{display:block;padding:11px 14px;border-radius:10px;font-family:var(--display);font-weight:500;font-size:.93rem;color:var(--ink);transition:background-color .2s}
.sub a:hover,.sub a:focus-visible{background:var(--sand-100)}
.nav-extra{display:none}

.header-actions{display:flex;align-items:center;gap:18px}
.header-phone{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:.98rem;letter-spacing:.02em}
.header-phone svg{width:18px;height:18px;color:var(--clay)}
.is-stuck .header-phone svg{color:var(--clay-deep)}

.menu-toggle{display:none;width:46px;height:46px;border-radius:12px;border:1.5px solid currentColor;position:relative;opacity:.9}
.menu-toggle span{position:absolute;inset-inline:12px;height:2px;background:currentColor;transition:transform .35s var(--ease),opacity .2s,top .35s var(--ease)}
.menu-toggle span:nth-child(1){top:15px}.menu-toggle span:nth-child(2){top:21px}.menu-toggle span:nth-child(3){top:27px}
.nav-open .menu-toggle span:nth-child(1){top:21px;transform:rotate(45deg)}
.nav-open .menu-toggle span:nth-child(2){opacity:0}
.nav-open .menu-toggle span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* ---------- الهيرو: صورة الرياض في الخلفية والنص في المنتصف ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;display:grid;place-items:center;text-align:center;color:#fff;background:var(--navy);
  min-height:min(100svh,880px);padding-block:calc(var(--header-h) + clamp(48px,7vw,96px)) clamp(112px,12vw,164px)}
.hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 62%;animation:kenburns 24s ease-in-out infinite alternate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(22,23,72,.9) 0%,rgba(22,23,72,.66) 40%,rgba(22,23,72,.74) 72%,rgba(22,23,72,.9) 100%)}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.13) translate3d(-1.2%,-1%,0)}}
.hero-inner{position:relative;width:min(920px,100% - 2*var(--gutter));margin-inline:auto}
.hero h1{color:#fff;font-size:clamp(1.7rem,4.5vw,3.8rem);line-height:1.42;font-weight:700;text-shadow:0 2px 34px rgba(12,13,46,.5)}
.hero h1 .row{display:block}
.hero h1 .w{display:inline-block}
.js .hero h1 .w{opacity:0;transform:translateY(.55em);filter:blur(10px);animation:wordIn .95s var(--ease) forwards;animation-delay:calc(var(--t0) + var(--n,0)*.12s)}
/* السطر المتبدّل */
.hero h1 .rot{display:grid;justify-items:center;color:var(--clay)}
.rot>span{grid-area:1/1;white-space:nowrap}
html:not(.js) .rot>span:not(:first-child){display:none}
.js .rot>span{opacity:0;transform:translateY(.6em);filter:blur(8px);transition:opacity .75s var(--ease),transform .75s var(--ease),filter .75s var(--ease)}
.js .rot:not(.is-live)>span:first-child{animation:wordIn .95s var(--ease) forwards;animation-delay:calc(var(--t0) + .62s)}
.js .rot>span.is-on{opacity:1;transform:none;filter:blur(0)}
.js .rot>span.is-out{opacity:0;transform:translateY(-.6em);filter:blur(8px)}
@keyframes wordIn{to{opacity:1;transform:none;filter:blur(0)}}
.hero-dim{display:block;width:min(340px,64%);height:16px;margin:24px auto 0;color:var(--clay);overflow:visible}
.hero-dim path{fill:none;stroke:currentColor;stroke-width:1.6}
.hero-lead{margin:26px auto 0;max-width:640px;font-size:1.18rem;line-height:2;color:rgba(255,255,255,.9)}
.hero .btn-row{margin-top:38px;justify-content:center}
.hero .btn{min-height:58px;padding:0 30px;font-size:1rem}
.js .hero-fade{opacity:0;transform:translateY(18px);animation:fadeUp .9s var(--ease) forwards;animation-delay:calc(var(--t0) + var(--n,0)*.13s)}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw var(--u,1s) cubic-bezier(.65,.05,.2,1) forwards;animation-delay:calc(var(--t0) + var(--d,0s))}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* ---------- رأس الصفحات الداخلية ---------- */
.page-head{position:relative;overflow:hidden;color:#fff;background:radial-gradient(70% 90% at 80% 0%,rgba(58,62,160,.4),transparent 70%),var(--navy);
  padding-block:calc(var(--header-h) + clamp(48px,7vw,96px)) clamp(84px,9vw,124px)}
.page-head-img{position:absolute;inset-block:0;inset-inline-end:0;width:58%;height:100%;object-fit:cover;opacity:.36;mix-blend-mode:luminosity;
  -webkit-mask-image:linear-gradient(90deg,#000 20%,transparent 96%);mask-image:linear-gradient(90deg,#000 20%,transparent 96%)}
.page-head .wrap{position:relative}
.crumbs{display:flex;align-items:center;gap:10px;font-size:.9rem;color:rgba(255,255,255,.7);margin-bottom:22px}
.crumbs a:hover{color:#fff}
.crumbs [aria-current]{color:var(--clay);font-weight:500}
.page-head h1{color:#fff;font-size:clamp(2rem,1.2rem + 3.2vw,3.3rem);line-height:1.4;max-width:820px}
.page-head p{margin-top:18px;max-width:620px;font-size:1.13rem;line-height:2;color:rgba(255,255,255,.86)}

/* ---------- شريط العملاء ---------- */
.clients-band{padding-block:44px 48px;border-bottom:1px solid var(--rule)}
.clients-band .wrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:36px;align-items:center}
.clients-band h2{font-size:1.02rem;font-weight:600;line-height:1.8;color:var(--ink)}
.marquee{overflow:hidden;direction:ltr;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee-track{display:flex;align-items:center;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track li{flex:none;margin-right:68px;height:66px;display:flex;align-items:center}
.marquee-track img{max-width:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- نبذة (الرئيسية) ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.split-copy p+p{margin-top:16px}
.split-copy h2+p{margin-top:22px}
.split-copy .more{margin-top:30px}
.plate-wrap{position:relative;padding-bottom:9%}
.plate{position:relative;background:var(--sand-100);aspect-ratio:5/4.1;overflow:hidden;border-radius:22px}
.plate .frieze{position:absolute;top:18px;inset-inline:22px;--frieze:var(--clay);z-index:1}
.plate img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:9% 4% 2%;transform:scale(1.02)}
.plate-sm{position:absolute;inset-inline-start:-7%;bottom:0;width:43%;border:8px solid #fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.plate-sm img{aspect-ratio:4/3;object-fit:cover;width:100%}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:34px;border-block:1px solid var(--rule)}
.facts li{padding:20px 0 18px;padding-inline-end:16px}
.facts li+li{border-inline-start:1px solid var(--rule);padding-inline-start:22px}
.facts b{display:block;font-family:var(--display);font-weight:600;font-size:2.2rem;line-height:1.2;color:var(--navy);direction:ltr;text-align:right}
.facts span{display:block;font-size:.9rem;line-height:1.6;color:var(--muted);margin-top:4px}

/* ---------- جدول الخدمات (الرئيسية) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.svc{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:38px 32px 30px;min-height:320px;background:#fff;color:var(--body);--accent:var(--clay-deep);transition:color .45s}
.svc::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--navy);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)}
.svc::after{content:"";position:absolute;top:0;inset-inline:0;height:12px;background:var(--clay);opacity:0;transform:translateY(-4px);transition:opacity .4s,transform .4s var(--ease);
  -webkit-mask:var(--tri) repeat-x right center/20px 12px;mask:var(--tri) repeat-x right center/20px 12px}
.svc-ico{width:60px;height:60px;color:var(--navy);margin-bottom:26px;transition:color .45s}
.svc-ico svg{width:100%;height:100%;overflow:visible}
.ico path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico .ac{stroke:var(--accent,var(--clay-deep))}
.svc h3{font-size:1.22rem;transition:color .45s}
.svc p{margin-top:10px;font-size:.98rem;line-height:1.85;flex:1}
.svc .more{align-self:flex-start;margin-top:22px;border-color:transparent;padding-bottom:2px}
.svc .more::before{content:"";position:absolute;inset:0;z-index:1}
.svc:hover,.svc:focus-within{color:rgba(255,255,255,.9);--accent:#ecdcbb}
.svc:hover::before,.svc:focus-within::before{transform:scaleY(1)}
.svc:hover::after,.svc:focus-within::after{opacity:1;transform:translateY(12px)}
.svc:hover h3,.svc:hover .more,.svc:hover .svc-ico,.svc:focus-within h3,.svc:focus-within .more,.svc:focus-within .svc-ico{color:#fff}
.svc:hover .more svg{transform:translateX(-5px)}
/* الخدمة الأساسية: إصدار رخصة بناء */
.svc--main{background:var(--sand-100)}
.svc--main::after{opacity:1;transform:translateY(12px)}
.svc--main h3{font-size:1.32rem}
.svc--ask{background:var(--navy);color:rgba(255,255,255,.88);justify-content:space-between}
.svc--ask::before,.svc--ask::after{display:none}
.svc--ask h3{color:#fff;font-size:1.3rem;line-height:1.7}
.svc--ask p{flex:none}
.svc--ask .btn{align-self:flex-start;margin-top:24px}

/* رسم الأيقونات عند الظهور */
.js .ico-draw path{stroke-dasharray:1;stroke-dashoffset:1}
.js .is-in .ico-draw path,.js .ico-draw.is-in path{animation:draw 1.1s var(--ease) forwards;animation-delay:calc(var(--i,0)*90ms + var(--k,0)*110ms + .1s)}

/* ---------- رخصة البناء (الرئيسية) ---------- */
.permit{position:relative;background:radial-gradient(60% 90% at 88% 0%,rgba(58,62,160,.42),transparent 70%),var(--navy);color:rgba(255,255,255,.88);overflow:hidden}
/* زخرفة نجدية: ثلاثة صفوف من الفُرَج أسفل القسم */
.permit::before{content:"";position:absolute;inset-inline:0;bottom:0;height:36px;background:var(--clay);opacity:.16;pointer-events:none;
  -webkit-mask:var(--tri) 0 0/20px 12px;mask:var(--tri) 0 0/20px 12px;-webkit-mask-repeat:round;mask-repeat:round}
.permit h2,.permit h3{color:#fff}
.permit-grid{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,6vw,96px);align-items:start}
.permit-copy .lead{margin-top:20px;color:rgba(255,255,255,.92)}
.permit-kinds{display:grid;grid-template-columns:1fr 1fr;margin-top:30px;border-block:1px solid var(--rule-dark)}
.permit-kinds div{padding:18px 0}
.permit-kinds div+div{border-inline-start:1px solid var(--rule-dark);padding-inline-start:22px}
.permit-kinds dt{font-family:var(--display);font-weight:600;color:#fff;font-size:1.02rem}
.permit-kinds dd{margin:4px 0 0;font-size:.93rem;line-height:1.7;color:rgba(255,255,255,.82)}
.permit-copy .btn-row{margin-top:32px}
.docs{position:relative;margin-top:clamp(44px,6vw,72px);padding:28px 32px 22px;background:rgba(255,255,255,.1);border:1px solid var(--rule-dark);border-radius:20px}
.docs h3{font-size:1.06rem}
.docs ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:14px;border-top:1px solid var(--rule-dark)}
.docs li{margin:0;padding-block:18px 16px;padding-inline-end:18px;font-size:.97rem;line-height:1.75;color:rgba(255,255,255,.94)}
.docs li+li{border-inline-start:1px solid var(--rule-dark);padding-inline-start:44px}
.docs li::before{top:calc(18px + .6em)}
.docs li+li::before{inset-inline-start:20px}
.docs small{display:block;padding-top:14px;border-top:1px solid var(--rule-dark);font-size:.87rem;line-height:1.8;color:rgba(255,255,255,.78)}

.steps{position:relative;counter-reset:step}
.steps::before,.steps::after{content:"";position:absolute;inset-inline-start:25px;top:26px;bottom:26px;width:2px;background:var(--rule-dark)}
.steps::after{background:var(--clay);transform:scaleY(var(--p,0));transform-origin:top;transition:transform .25s linear}
.steps li{position:relative;z-index:1;counter-increment:step;padding-inline-start:84px;padding-block:6px 40px}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:counter(step);position:absolute;inset-inline-start:0;top:0;width:52px;height:52px;display:grid;place-items:center;
  font-family:var(--display);font-weight:600;font-size:1.15rem;color:#fff;background:var(--navy-lift);border:1.5px solid rgba(255,255,255,.4);border-radius:14px;transition:background-color .4s,border-color .4s,color .4s}
.steps li.is-on::before{background:var(--clay);border-color:var(--clay);color:var(--ink)}
.steps h3{font-size:1.16rem;padding-top:8px}
.steps p{margin-top:6px;font-size:.98rem;line-height:1.85;max-width:520px}
/* نسخة فاتحة من الخطوات (صفحة من نحن) */
.steps--light::before{background:var(--rule)}
.steps--light::after{background:var(--navy)}
.steps--light li::before{color:var(--navy);background:#fff;border-color:var(--rule-strong)}
.steps--light li.is-on::before{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------- لماذا مكتبنا ---------- */
.why-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,88px);align-items:center}
.why-media{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.why-media img{width:100%;aspect-ratio:4/4.4;object-fit:cover}
.why-media .frieze{position:absolute;bottom:22px;inset-inline:22px;--frieze:rgba(255,255,255,.9);z-index:1}
.why-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,23,72,0) 55%,rgba(22,23,72,.5))}
.why-list{margin-top:8px;border-top:1px solid var(--rule)}
.why-list li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:22px;padding-block:24px;border-bottom:1px solid var(--rule)}
.why-list .ico{width:46px;height:46px;color:var(--navy);margin-top:4px}
.why-list h3{font-size:1.1rem}
.why-list p{margin-top:4px;font-size:.98rem;line-height:1.85}

/* ---------- الأسئلة الشائعة ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq-aside{position:sticky;top:calc(var(--header-h) + 16px)}
.faq-aside p{margin-top:18px}
.faq-aside .btn{margin-top:26px}
.faq{border-top:1px solid var(--rule-strong)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item h3{font-size:1.08rem}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;text-align:start;font-family:var(--display);font-weight:600;color:var(--ink);line-height:1.7}
.faq-q i{flex:none;position:relative;width:36px;height:36px;border:1.5px solid var(--rule-strong);border-radius:10px;transition:background-color .3s,border-color .3s}
.faq-q i::before,.faq-q i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.8px;background:var(--navy);transform:translate(-50%,-50%);transition:transform .35s var(--ease),background-color .3s}
.faq-q i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item.is-open .faq-q i{background:var(--navy);border-color:var(--navy)}
.faq-item.is-open .faq-q i::before,.faq-item.is-open .faq-q i::after{background:#fff}
.faq-item.is-open .faq-q i::after{transform:translate(-50%,-50%) rotate(0)}
.faq-a{display:grid;grid-template-rows:1fr}
.js .faq-a{grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.js .faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding-bottom:24px;max-width:640px;font-size:1rem}

/* ---------- الدعوة الختامية ---------- */
.cta-band{position:relative;background:linear-gradient(180deg,var(--sand-50),var(--sand-100));padding-block:clamp(72px,8vw,112px) clamp(96px,10vw,140px);overflow:hidden}
.cta-band .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,72px);align-items:center}
.cta-band h2{font-size:clamp(1.7rem,1.1rem + 2.4vw,2.7rem)}
.cta-band p{margin-top:16px;font-size:1.1rem;max-width:600px}
.cta-actions{display:flex;flex-direction:column;gap:12px}
.cta-actions .btn{min-height:60px;font-size:1rem}
.cta-emblem{position:absolute;inset-inline-end:-70px;top:50%;width:420px;height:420px;transform:translateY(-50%);color:var(--sand-200);opacity:.75;pointer-events:none}
.cta-emblem rect{fill:currentColor}

/* ---------- الفوتر ---------- */
.site-footer{position:relative;background:var(--navy);color:rgba(255,255,255,.82);font-size:.96rem}
.site-footer .roofline{--roof:var(--navy)}
.footer-main{display:grid;grid-template-columns:1.5fr .8fr 1.1fr 1.2fr;gap:clamp(28px,4vw,64px);padding-block:clamp(56px,7vw,88px) 52px}
.footer-brand img{height:54px;width:auto}
.footer-brand p{margin-top:22px;max-width:340px;line-height:1.95}
.site-footer h2{font-size:1rem;font-weight:600;color:#fff;margin-bottom:16px}
.footer-links li{margin-block:9px}
.footer-links a,.footer-contact a{transition:color .25s}
.footer-links a:hover,.footer-contact a:hover{color:#fff}
.footer-contact li{display:flex;gap:12px;align-items:flex-start;margin-block:12px;line-height:1.7}
.footer-contact svg{flex:none;width:19px;height:19px;margin-top:5px;color:var(--clay)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-block:22px;border-top:1px solid var(--rule-dark);font-size:.88rem;color:rgba(255,255,255,.76)}
.footer-bottom a{color:#fff;font-weight:500;border-bottom:1px solid rgba(255,255,255,.4);transition:border-color .25s}
.footer-bottom a:hover{border-color:var(--clay)}

/* ---------- أزرار التواصل العائمة ---------- */
.wa-float{position:fixed;z-index:55;inset-inline-end:24px;bottom:24px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--clay);color:var(--ink);
  box-shadow:0 14px 30px -12px rgba(140,108,58,.55);transition:opacity .4s,transform .45s var(--ease),background-color .3s}
.wa-float svg{width:28px;height:28px}
.wa-float:not(.is-on){opacity:0;transform:translateY(20px) scale(.9);pointer-events:none}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--clay);animation:ring 2.8s ease-out infinite}
.wa-float:hover{transform:scale(1.07);background:var(--clay-hover)}
@keyframes ring{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(1.7);opacity:0}}
.mobile-bar{display:none}
html:not(.js) .wa-float{opacity:1;transform:none;pointer-events:auto}

/* ---------- صفحة من نحن ---------- */
.story{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,96px);align-items:center}
.story p+p{margin-top:16px}
.story h2+p{margin-top:22px}
.story-media{position:relative}
.story-media img{width:100%;aspect-ratio:4/3.5;object-fit:cover;border-radius:22px;box-shadow:var(--shadow)}
.story-media .frieze{position:absolute;top:-22px;inset-inline:0 40%;--frieze:var(--clay)}
.story-tag{position:absolute;inset-inline-end:-24px;bottom:-28px;background:var(--navy);color:#fff;padding:22px 26px;max-width:260px;border-radius:18px;font-family:var(--display);font-weight:500;font-size:.98rem;line-height:1.8;box-shadow:var(--shadow)}
.story-tag::before{content:"";display:block;width:40px;height:12px;margin-bottom:10px;background:var(--clay);
  -webkit-mask:var(--tri) repeat-x right center/20px 12px;mask:var(--tri) repeat-x right center/20px 12px}

.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pillars>div{padding:34px 32px 30px;background:#fff;border:1px solid var(--rule);border-radius:22px;box-shadow:var(--shadow)}
.pillars .ico{width:50px;height:50px;color:var(--navy);margin-bottom:20px}
.pillars h3{font-size:1.24rem}
.pillars p{margin-top:10px;font-size:1rem}
.pillars .tri-list{margin-top:8px}
.pillars .tri-list li{margin-block:6px;font-size:1rem}

.method{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,96px);align-items:start}
.method-aside{position:sticky;top:calc(var(--header-h) + 16px)}
.method-aside p{margin-top:18px}

.sectors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:22px;overflow:hidden}
.sectors li{padding:30px 30px 28px;background:#fff}
.sectors h3{font-size:1.1rem;color:var(--navy)}
.sectors p{margin-top:6px;font-size:.96rem;line-height:1.8}

.logo-wall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:22px;overflow:hidden}
.logo-wall li{display:grid;place-items:center;aspect-ratio:1.55;padding:18px 22px;background:#fff;transition:background-color .3s}
.logo-wall li:hover{background:var(--sand-50)}
.logo-wall img{max-width:80%}
.logo-wall .logo-wall-note{grid-column:span 2;aspect-ratio:auto;place-items:center start;padding:22px 28px;background:var(--sand-50);font-size:.96rem;line-height:1.85;color:var(--body)}

/* ---------- صفحة الخدمات ---------- */
.svc-nav{position:sticky;top:72px;z-index:40;background:#fff;border-bottom:1px solid var(--rule)}
.svc-nav ul{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter)}
.svc-nav ul::-webkit-scrollbar{display:none}
.svc-nav a{position:relative;display:block;white-space:nowrap;padding:18px 16px;font-family:var(--display);font-weight:500;font-size:.92rem;color:var(--muted);transition:color .25s}
.svc-nav a::after{content:"";position:absolute;inset-inline:16px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--navy);transform:scaleX(0);transition:transform .35s var(--ease)}
.svc-nav a:hover,.svc-nav a.is-active{color:var(--navy)}
.svc-nav a.is-active::after{transform:scaleX(1)}

.svc-detail{padding-block:clamp(64px,8vw,108px);border-bottom:1px solid var(--rule)}
.svc-detail:nth-of-type(even){background:var(--sand-50)}
.svc-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:start}
.svc-detail .svc-ico{width:72px;height:72px;margin-bottom:24px;--accent:var(--clay-deep)}
.svc-detail h2{font-size:clamp(1.6rem,1.1rem + 1.8vw,2.3rem)}
.svc-detail .lead{margin-top:16px}
.svc-detail-main>p+p{margin-top:14px}
.svc-detail .btn-row{margin-top:30px}
.spec{background:#fff;border:1px solid var(--rule);border-top:4px solid var(--navy);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.spec section{padding:26px 30px 24px}
.spec section+section{border-top:1px solid var(--rule)}
.spec h3{font-size:1.04rem;margin-bottom:6px}
.spec li{font-size:.98rem}
.spec small{display:block;margin-top:10px;font-size:.87rem;line-height:1.8;color:var(--muted)}
.svc-figure{margin-top:36px;background:var(--sand-100);position:relative;border-radius:20px;overflow:hidden}
.svc-figure img{width:100%;aspect-ratio:16/9.5;object-fit:contain;mix-blend-mode:multiply;padding:5% 6% 2%}
.svc-figure .frieze{position:absolute;top:14px;inset-inline:18px;--frieze:var(--clay)}

/* خطوات إصدار الرخصة — صف أفقي داخل صفحة الخدمات */
.steps-block{margin-top:clamp(40px,5vw,64px)}
.steps-block>h3{font-size:1.2rem;margin-bottom:22px}
.steps-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:22px;overflow:hidden;counter-reset:srow;box-shadow:var(--shadow)}
.steps-row li{counter-increment:srow;padding:28px 26px 26px;background:#fff}
.steps-row li::before{content:counter(srow);display:grid;place-items:center;width:46px;height:46px;margin-bottom:16px;border-radius:13px;background:var(--navy);color:#fff;font-family:var(--display);font-weight:600;font-size:1.08rem}
.steps-row li:last-child::before{background:var(--clay);color:var(--ink)}
.steps-row h4{font-size:1.06rem;font-weight:600}
.steps-row p{margin-top:6px;font-size:.95rem;line-height:1.8}

/* ---------- صفحة اتصل بنا ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,88px);align-items:start}
.contact-list{margin-top:28px;border-top:1px solid var(--rule-strong)}
.contact-list li{border-bottom:1px solid var(--rule)}
.contact-list a{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:18px;align-items:center;padding:20px 0;transition:padding .35s var(--ease)}
.contact-list .c-ico{width:54px;height:54px;display:grid;place-items:center;background:var(--sand-100);color:var(--navy);border-radius:14px;transition:background-color .3s,color .3s}
.contact-list .c-ico svg{width:24px;height:24px}
.contact-list small{display:block;font-size:.86rem;color:var(--muted);line-height:1.5}
.contact-list b{display:block;font-family:var(--display);font-weight:600;font-size:1.1rem;color:var(--ink);line-height:1.7}
.contact-list b.ltr{text-align:right}
.contact-list .go{width:18px;height:18px;color:var(--muted);transition:transform .35s var(--ease),color .3s}
.contact-list a:hover{padding-inline-start:10px}
.contact-list a:hover .c-ico{background:var(--navy);color:#fff}
.contact-list a:hover .go{transform:translateX(-5px);color:var(--navy)}

.form-card{background:#fff;border:1px solid var(--rule);border-top:4px solid var(--navy);border-radius:22px;padding:clamp(24px,4vw,44px);box-shadow:var(--shadow)}
.form-card h2{font-size:1.5rem}
.form-card>p{margin-top:8px;font-size:.98rem;color:var(--muted)}
.form{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--display);font-weight:500;font-size:.9rem;color:var(--ink)}
.field label span{color:var(--muted);font-weight:400}
.field input,.field select,.field textarea{width:100%;min-height:54px;padding:12px 16px;background:var(--sand-50);border:1.5px solid var(--rule);border-radius:12px;font-size:1rem;line-height:1.6;transition:border-color .25s,background-color .25s}
.field textarea{min-height:128px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23161748' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 16px center;padding-inline-end:44px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;background:#fff;border-color:var(--navy)}
.field input::placeholder,.field textarea::placeholder{color:#9a9cb5}
.field .err{display:none;font-size:.86rem;color:#a3271c;line-height:1.5}
.field.has-error input,.field.has-error select{border-color:#a3271c;background:#fdf4f3}
.field.has-error .err{display:block}
.form .btn{min-height:58px;font-size:1rem}
.form-hint{grid-column:1/-1;font-size:.88rem;color:var(--muted);line-height:1.7}

.map-block{position:relative;background:var(--sand-100)}
.map-block iframe{display:block;width:100%;height:clamp(360px,46vw,500px);border:0}
.map-card{position:absolute;inset-inline-start:max(var(--gutter),calc((100% - 1200px)/2));top:50%;transform:translateY(-50%);z-index:1;width:min(360px,calc(100% - 2*var(--gutter)));background:#fff;border-radius:20px;padding:30px 30px 28px;box-shadow:var(--shadow)}
.map-card h2{font-size:1.25rem}
.map-card p{margin-top:8px;font-size:.98rem}
.map-card .btn{margin-top:20px}

/* ---------- 404 ---------- */
.notfound{min-height:100svh;display:grid;place-items:center;text-align:center;background:var(--navy);color:rgba(255,255,255,.85);padding:var(--gutter)}
.notfound h1{color:#fff;font-size:clamp(2rem,6vw,3.4rem)}
.notfound p{margin:14px auto 28px;max-width:440px}
.notfound .tri-mark{margin-inline:auto}

/* ---------- حركات الظهور عند التمرير ---------- */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*85ms)}
.js [data-reveal="wipe"]{opacity:1;transform:none}
.js [data-reveal="wipe"]>*{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease);transition-delay:calc(var(--i,0)*85ms + 80ms)}
.js [data-reveal="wipe"].is-in>*{clip-path:inset(0)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js .svc[data-reveal]{transition:opacity .9s var(--ease),transform .9s var(--ease),color .45s;transition-delay:calc(var(--i,0)*85ms),calc(var(--i,0)*85ms),0s}

/* ==========================================================================
   التجاوب
   ========================================================================== */
@media (max-width:1100px){
  .header-phone{display:none}
  .footer-main{grid-template-columns:1.3fr 1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .logo-wall{grid-template-columns:repeat(4,minmax(0,1fr))}
  .logo-wall .logo-wall-note{grid-column:span 3}
  .steps-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  :root{--header-h:72px}
  body{font-size:16.5px}
  .menu-toggle{display:block}
  .header-actions .btn{display:none}
  .brand img{height:42px}
  .nav{position:fixed;inset:0;z-index:-1;background:#fff;color:var(--ink);display:flex;flex-direction:column;justify-content:space-between;
    padding:calc(var(--header-h) + 20px) var(--gutter) 28px;overflow-y:auto;visibility:hidden;opacity:0;transform:translateY(-12px);transition:opacity .35s,transform .45s var(--ease),visibility 0s .45s}
  .nav-open .nav{visibility:visible;opacity:1;transform:none;transition:opacity .35s,transform .45s var(--ease)}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;border-top:1px solid var(--rule)}
  .nav-list>li{border-bottom:1px solid var(--rule)}
  .nav-list>li>a{padding:18px 4px;font-size:1.22rem;font-weight:600;opacity:1}
  .nav-list>li>a::after{left:auto;right:auto;inset-inline-end:6px;bottom:50%;transform:translate(0,50%) rotate(-90deg)!important;background:var(--clay-deep)!important}
  .caret{display:none}
  .sub{position:static;min-width:0;padding:0 0 14px;background:none;border:0;border-radius:0;box-shadow:none;opacity:1;visibility:visible;transform:none;transition:none}
  .sub::before{display:none}
  .sub a{padding:8px 16px;font-size:1rem;font-weight:400;color:var(--body);border-radius:0;border-inline-start:2px solid var(--rule)}
  .nav-extra{display:grid;gap:12px;margin-top:28px}
  .nav-open .site-header,.nav-open .site-header.is-stuck{background:#fff;color:var(--ink);box-shadow:none}
  .nav-open .logo--light{display:none!important}.nav-open .logo--dark{display:block!important}
  .nav-open{overflow:hidden}

  .split,.permit-grid,.why-grid,.faq-grid,.story,.method,.svc-detail-grid,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .hero h1{font-size:clamp(1.6rem,7.4vw,3.2rem)}
  .hero{min-height:min(100svh,760px)}
  .page-head-img{width:100%;opacity:.22}
  .clients-band .wrap{grid-template-columns:minmax(0,1fr);gap:20px}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc{min-height:0}
  .faq-aside,.method-aside{position:static}
  .docs ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .docs li:nth-child(3){border-inline-start:0;padding-inline-start:26px}
  .docs li:nth-child(3)::before{inset-inline-start:0}
  .docs li:nth-child(n+3){border-top:1px solid var(--rule-dark)}
  .cta-band .wrap{grid-template-columns:minmax(0,1fr)}
  .cta-actions{flex-direction:row;flex-wrap:wrap}
  .cta-actions .btn{flex:1 1 220px}
  .cta-emblem{width:300px;height:300px;opacity:.35}
  .pillars{grid-template-columns:minmax(0,1fr)}
  .sectors{grid-template-columns:minmax(0,1fr)}
  .logo-wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .logo-wall .logo-wall-note{grid-column:span 2}
  .story-tag{inset-inline-end:0;bottom:-20px}
  .story-media{margin-bottom:20px}
  .split-media{order:2}
  .why-media img{aspect-ratio:16/10}

  .wa-float{display:none}
  .mobile-bar{position:fixed;z-index:55;inset-inline:0;bottom:0;display:grid;grid-template-columns:1fr 1fr;background:var(--navy);box-shadow:0 -12px 30px -18px rgba(22,23,72,.7);
    transform:translateY(105%);transition:transform .45s var(--ease);padding-bottom:env(safe-area-inset-bottom)}
  .mobile-bar.is-on,html:not(.js) .mobile-bar{transform:none}
  .mobile-bar a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;font-family:var(--display);font-weight:600;font-size:.98rem;color:#fff}
  .mobile-bar a+a{background:var(--clay);color:var(--ink)}
  .mobile-bar svg{width:20px;height:20px}
  .site-footer{padding-bottom:58px}
}
@media (max-width:640px){
  .hero{padding-bottom:88px}
  .btn-row .btn{flex:1 1 100%}
  .svc-grid{grid-template-columns:minmax(0,1fr)}
  .svc{padding:30px 24px 26px}
  .facts b{font-size:1.8rem}
  .facts li+li{padding-inline-start:14px}
  .facts li{padding-inline-end:8px}
  .docs ul{grid-template-columns:minmax(0,1fr)}
  .docs li+li{border-inline-start:0;border-top:1px solid var(--rule-dark);padding-inline-start:26px}
  .docs li+li::before{inset-inline-start:0}
  .permit-kinds{grid-template-columns:minmax(0,1fr)}
  .permit-kinds div+div{border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--rule-dark)}
  .steps li{padding-inline-start:70px}
  .steps li::before{width:46px;height:46px}
  .steps::before,.steps::after{inset-inline-start:22px}
  .steps-row{grid-template-columns:minmax(0,1fr)}
  .footer-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .footer-contact-col{grid-column:1/-1}
  .form{grid-template-columns:minmax(0,1fr)}
  .logo-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logo-wall .logo-wall-note{grid-column:1/-1}
  .logo-wall li:nth-last-child(2){grid-column:1/-1;aspect-ratio:auto;min-height:110px}
  .map-card{position:static;transform:none;width:100%;border-radius:0;box-shadow:none}
  .contact-list a{grid-template-columns:48px minmax(0,1fr) auto;gap:14px}
  .contact-list .c-ico{width:48px;height:48px}
  .contact-list b{font-size:1rem;overflow-wrap:anywhere}
  .plate-sm{inset-inline-start:0}
  .spec section{padding:22px 22px 20px}
  .docs{padding:22px}
  .pillars>div{padding:28px 24px 24px}
}

/* ---------- تقليل الحركة ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001s!important;transition-delay:0s!important}
  .marquee-track{animation:none!important;flex-wrap:wrap;width:auto;justify-content:center;row-gap:20px}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-track li[aria-hidden]{display:none}
  .wa-float::before{display:none}
  .hero-bg{animation:none!important}
}

@media print{
  .site-header,.wa-float,.mobile-bar,.intro-screen,.svc-nav{display:none!important}
  .hero,.page-head{padding-top:40px}
}

/* ==========================================================================
   المدونة وصفحات المقالات (v4)
   ========================================================================== */
.chip{display:inline-flex;align-items:center;min-height:30px;padding:0 14px;border-radius:999px;background:var(--sand-100);color:var(--clay-deep);
  font-family:var(--display);font-weight:600;font-size:.8rem;line-height:1;white-space:nowrap}
.chip--light{background:rgba(255,255,255,.1);color:var(--clay);border:1px solid rgba(255,255,255,.24)}

/* ---------- بطاقات المدونة ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.card{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:30px 28px 26px;background:#fff;border:1px solid var(--rule);border-radius:22px;
  box-shadow:var(--shadow);overflow:hidden;transition:translate .45s var(--ease),border-color .3s}
.card::before{content:"";position:absolute;top:0;inset-inline:0;height:12px;background:var(--clay);opacity:0;transform:translateY(-12px);transition:opacity .35s,transform .45s var(--ease);
  -webkit-mask:var(--tri) repeat-x right center/20px 12px;mask:var(--tri) repeat-x right center/20px 12px}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.card-ico{width:54px;height:54px;color:var(--navy);--accent:var(--clay-deep)}
.card-ico svg{width:100%;height:100%;overflow:visible}
.card h3{font-size:1.14rem;line-height:1.7}
.card h3 a{transition:color .25s}
.card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.card p{margin-top:10px;font-size:.97rem;line-height:1.85;flex:1}
.card .more{align-self:flex-start;margin-top:20px;border-color:transparent;padding-bottom:2px}
.card:hover,.card:focus-within{translate:0 -6px;border-color:var(--rule-strong)}
.card:hover::before,.card:focus-within::before{opacity:1;transform:translateY(8px)}
.card:hover .more svg{transform:translateX(-5px)}
.card h3 a:focus-visible{outline:0}
.card:has(a:focus-visible){outline:2px solid #b3915a;outline-offset:3px}
.js .card[data-reveal]{transition:opacity .9s var(--ease),transform .9s var(--ease),translate .45s var(--ease),border-color .3s;
  transition-delay:calc(var(--i,0)*85ms),calc(var(--i,0)*85ms),0s,0s}

/* ---------- رأس المقال ---------- */
.crumbs{flex-wrap:wrap;row-gap:4px}
.page-head--post{padding-bottom:clamp(76px,8vw,108px)}
.page-head--post h1{font-size:clamp(1.6rem,1.05rem + 2.4vw,2.7rem);line-height:1.5;max-width:900px}
.page-head .post-kind{margin:0 0 14px;font-size:1rem;line-height:1}
.page-head .post-lead{max-width:740px}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:26px;font-size:.9rem;color:rgba(255,255,255,.74)}
.post-meta li{display:flex;align-items:center;gap:20px}
.post-meta li+li::before{content:"";flex:none;width:11px;height:8px;background:var(--clay);
  -webkit-mask:var(--tri) no-repeat center/13px 8px;mask:var(--tri) no-repeat center/13px 8px}

/* ---------- هيكل المقال ---------- */
.post-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:clamp(36px,5vw,76px);align-items:start;padding-block:clamp(44px,6vw,76px) clamp(64px,8vw,104px)}
.post{min-width:0}
.post-side{position:sticky;top:96px;display:grid;gap:18px}

/* الإجابة المباشرة (صفحات الأسئلة) */
.answer{position:relative;margin-bottom:34px;padding:30px 32px 40px;border-radius:22px;color:rgba(255,255,255,.94);overflow:hidden;box-shadow:var(--shadow);
  background:radial-gradient(70% 120% at 88% 0%,rgba(58,62,160,.45),transparent 70%),var(--navy)}
.answer::after{content:"";position:absolute;inset-inline:0;bottom:0;height:24px;background:var(--clay);opacity:.18;pointer-events:none;
  -webkit-mask:var(--tri) 0 0/20px 12px;mask:var(--tri) 0 0/20px 12px;-webkit-mask-repeat:round;mask-repeat:round}
.answer-label{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--clay)}
.answer-label .tri-mark{margin:0;width:40px;background:var(--clay)}
.answer p:not(.answer-label){font-size:1.12rem;line-height:2.05}

/* نص المقال */
.prose{font-size:1.06rem;line-height:2.05}
.prose>*+*{margin-top:1.05em}
.prose h2,.post-faq>h2{position:relative;padding-top:28px;font-size:clamp(1.36rem,1.1rem + 1vw,1.74rem);line-height:1.6}
.prose h2{margin-top:2.3em}
.prose h2::before,.post-faq>h2::before{content:"";position:absolute;top:0;inset-inline-start:0;width:60px;height:12px;background:var(--clay-deep);
  -webkit-mask:var(--tri) repeat-x right center/20px 12px;mask:var(--tri) repeat-x right center/20px 12px}
.prose h3{margin-top:1.8em;font-size:1.16rem;line-height:1.7}
.prose h2+*,.prose h3+*{margin-top:.7em}
.prose a,.post-faq .faq-a a,.post-sources a{color:var(--navy);font-weight:500;text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:2px;text-underline-offset:6px;
  transition:background-color .25s,text-decoration-color .25s}
.prose a:hover,.post-faq .faq-a a:hover,.post-sources a:hover{background:var(--sand-100);text-decoration-color:var(--clay-deep)}
.prose strong{color:var(--ink);font-weight:600}
.prose ul{display:grid;gap:10px}
.prose ul li{position:relative;padding-inline-start:28px}
.prose ul li::before{content:"";position:absolute;inset-inline-start:0;top:.78em;width:13px;height:9px;background:var(--clay-deep);
  -webkit-mask:var(--tri) no-repeat center/15px 9px;mask:var(--tri) no-repeat center/15px 9px}
.prose ol{counter-reset:pstep;display:grid;gap:12px}
.prose ol li{counter-increment:pstep;position:relative;padding-inline-start:50px;min-height:36px}
.prose ol li::before{content:counter(pstep);position:absolute;inset-inline-start:0;top:3px;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
  background:var(--navy);color:#fff;font-family:var(--display);font-weight:600;font-size:.92rem;line-height:1}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);border-radius:18px;background:#fff;box-shadow:var(--shadow)}
.prose table{width:100%;min-width:560px;border-collapse:collapse;font-size:.97rem;line-height:1.8}
.prose th{padding:14px 18px;background:var(--navy);color:#fff;font-family:var(--display);font-weight:600;font-size:.9rem;text-align:start;white-space:nowrap}
.prose td{padding:14px 18px;border-top:1px solid var(--rule);vertical-align:top}
.prose tbody tr:nth-child(even) td{background:var(--sand-50)}
.prose td:first-child{font-weight:500;color:var(--ink)}
.callout{padding:20px 24px;border-radius:18px;background:var(--sand-50);border:1px solid var(--sand-200);border-inline-start:4px solid var(--clay)}
.callout p{font-size:1rem;line-height:1.95;color:var(--ink)}

/* صندوق التواصل بعد المقدمة */
.contact-box{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px 28px;margin-block:34px;padding:30px 28px 24px;border-radius:20px;background:var(--sand-100);overflow:hidden}
.contact-box::before{content:"";position:absolute;top:0;inset-inline:0;height:12px;background:var(--clay);opacity:.7;
  -webkit-mask:var(--tri) repeat-x right center/20px 12px;mask:var(--tri) repeat-x right center/20px 12px}
.contact-box p{font-family:var(--display);font-weight:500;font-size:1rem;line-height:1.9;color:var(--ink)}
.contact-box .btn-row{flex-wrap:nowrap}
.contact-box .btn{padding-inline:20px}

/* المحتويات */
.toc--inline{display:none;margin-bottom:34px;border:1px solid var(--rule);border-radius:16px;background:#fff;overflow:hidden}
.toc--inline summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;font-family:var(--display);font-weight:600;color:var(--ink)}
.toc--inline summary::-webkit-details-marker{display:none}
.toc--inline summary::after{content:"";flex:none;width:9px;height:9px;margin-top:-5px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg);transition:transform .3s var(--ease),margin .3s}
.toc--inline[open] summary::after{transform:rotate(-135deg);margin-top:5px}
.toc--inline ol{counter-reset:toc;padding:0 20px 10px}
.toc--inline li{counter-increment:toc;border-top:1px solid var(--rule)}
.toc--inline a{display:flex;gap:12px;padding:11px 0;font-size:.96rem;line-height:1.7}
.toc--inline a::before{content:counter(toc);flex:none;min-width:1.3em;font-family:var(--display);font-weight:600;color:var(--clay-deep)}
.toc--side{padding:22px 22px 18px;border:1px solid var(--rule);border-radius:20px;background:#fff}
.toc-title{margin-bottom:12px;font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--ink)}
.toc--side ol{max-height:max(160px,calc(100vh - 540px));overflow-y:auto;border-inline-start:2px solid var(--rule);scrollbar-width:thin}
.toc--side a{display:block;margin-inline-start:-2px;padding:6px 14px;border-inline-start:2px solid transparent;font-size:.9rem;line-height:1.7;color:var(--muted);transition:color .2s,border-color .2s}
.toc--side a:hover{color:var(--navy)}
.toc--side a.is-active{color:var(--navy);font-weight:500;border-color:var(--navy)}

/* بطاقة التواصل الجانبية */
.side-card{position:relative;padding:26px 22px 22px;border-radius:20px;background:var(--navy);color:rgba(255,255,255,.84);overflow:hidden}
.side-card::before{content:"";position:absolute;top:0;inset-inline:0;height:12px;background:var(--clay);opacity:.5;
  -webkit-mask:var(--tri) repeat-x right center/20px 12px;mask:var(--tri) repeat-x right center/20px 12px}
.side-title{padding-top:6px;font-family:var(--display);font-weight:600;font-size:1.04rem;line-height:1.7;color:#fff}
.side-card p+p{margin-top:6px;font-size:.9rem;line-height:1.8}
.side-card .btn{width:100%;min-height:50px;margin-top:10px;padding-inline:14px;font-size:.92rem}
.side-card .btn--wa{margin-top:16px}

/* الأسئلة والدعوة والمصادر داخل المقال */
.post-faq{margin-top:60px}
.post-faq .faq{margin-top:20px}
.post-faq .faq-a p{max-width:none}
.post-faq .faq-a p+p{margin-top:-10px}
.post-cta{position:relative;margin-top:56px;padding:38px 36px 50px;border-radius:22px;color:rgba(255,255,255,.88);overflow:hidden;box-shadow:var(--shadow);
  background:radial-gradient(70% 120% at 88% 0%,rgba(58,62,160,.45),transparent 70%),var(--navy)}
.post-cta::after{content:"";position:absolute;inset-inline:0;bottom:0;height:24px;background:var(--clay);opacity:.18;pointer-events:none;
  -webkit-mask:var(--tri) 0 0/20px 12px;mask:var(--tri) 0 0/20px 12px;-webkit-mask-repeat:round;mask-repeat:round}
.post-cta .tri-mark{background:var(--clay)}
.post-cta h2{color:#fff;font-size:clamp(1.32rem,1.1rem + 1vw,1.7rem);line-height:1.6}
.post-cta p{margin-top:10px;max-width:580px}
.post-cta .btn-row{margin-top:24px}
.post-sources{margin-top:48px;padding-top:28px;border-top:1px solid var(--rule)}
.post-sources h2{font-size:1.08rem}
.post-sources ul{display:grid;gap:12px;margin-top:14px}
.post-sources li{position:relative;padding-inline-start:26px;font-size:.95rem;line-height:1.8}
.post-sources li::before{content:"";position:absolute;inset-inline-start:0;top:.7em;width:13px;height:9px;background:var(--clay-deep);
  -webkit-mask:var(--tri) no-repeat center/15px 9px;mask:var(--tri) no-repeat center/15px 9px}
.post-sources li span{display:block;font-size:.88rem;color:var(--muted)}
.post-sources>p{margin-top:18px;font-size:.86rem;line-height:1.95;color:var(--muted)}
.related .sec-head{margin-bottom:clamp(28px,4vw,44px)}

/* روابط الأدلة في صفحة الخدمات */
.svc-guides{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:22px!important;font-size:.95rem;line-height:1.8}
.svc-guides b{font-family:var(--display);font-weight:600;color:var(--ink)}
.svc-guides a{color:var(--navy);font-weight:500;border-bottom:1.5px solid var(--clay);transition:border-color .25s}
.svc-guides a:hover{border-color:var(--navy)}

@media (max-width:1180px){
  .nav-list>li>a{padding-inline:12px}
}
@media (max-width:1100px){
  .post-grid{grid-template-columns:minmax(0,1fr)}
  .post-side{display:none}
  .toc--inline{display:block}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .nav-list>li>a{padding-inline:4px}
  .mobile-bar a{white-space:nowrap}
  .plate-sm{inset-inline-start:0}
}
@media (max-height:690px){
  .toc--side{display:none}
}
@media (max-width:760px){
  .contact-box{grid-template-columns:minmax(0,1fr)}
  .contact-box .btn-row{flex-wrap:wrap}
}
@media (max-width:640px){
  .card-grid{grid-template-columns:minmax(0,1fr)}
  .card{padding:26px 22px 22px}
  .answer{padding:24px 22px 38px}
  .answer p:not(.answer-label){font-size:1.05rem}
  .prose{font-size:1.02rem;line-height:2}
  .prose ol li{padding-inline-start:46px}
  .contact-box{padding:28px 20px 20px}
  .post-cta{padding:30px 22px 46px}
  .post-meta{gap:6px 14px;font-size:.86rem}
  .post-meta li{gap:14px}
  .callout{padding:18px 18px}
}
@media (max-width:380px){
  .mobile-bar a{font-size:.88rem;gap:8px}
}
@media print{
  .post-side,.contact-box,.toc--inline,.post-cta,.related{display:none!important}
  .post-grid{display:block}
}

/* الجداول على الجوال: كل صف بطاقة مستقلة بدل التمرير الأفقي */
@media (max-width:640px){
  .table-wrap{overflow:visible;border:0;border-radius:0;background:none;box-shadow:none}
  .prose table{display:block;min-width:0}
  .prose thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .prose tbody{display:grid;gap:12px}
  .prose tr{display:block;border:1px solid var(--rule);border-radius:16px;background:#fff;overflow:hidden}
  .prose td{display:block;padding:12px 16px;border-top:1px solid var(--rule)}
  .prose tbody tr:nth-child(even) td{background:none}
  .prose td:first-child,.prose tbody tr:nth-child(even) td:first-child{border-top:0;background:var(--sand-100);font-family:var(--display);font-weight:600;font-size:.95rem;line-height:1.75}
  .prose td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;margin-bottom:2px;font-family:var(--display);font-weight:600;font-size:.78rem;color:var(--clay-deep)}
  .prose td:empty{display:none}
}

/* ==========================================================================
   v5: ست خدمات في الشبكة، زر الاستشارة المجانية، تيك توك
   ========================================================================== */
.svc-grid .svc--ask{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;justify-content:space-between;gap:32px}
.svc-grid .svc--ask>div{max-width:680px}
.svc-grid .svc--ask .btn{flex:none;align-self:center;margin-top:0}
.side-card .btn{gap:8px;padding-inline:10px;font-size:.86rem}
.side-card .btn svg{width:18px;height:18px}
@media (max-width:1320px){
  .contact-box{grid-template-columns:minmax(0,1fr)}
  .contact-box .btn-row{flex-wrap:wrap}
}
@media (max-width:760px){
  .svc-grid .svc--ask{flex-direction:column;align-items:flex-start;gap:0}
  .svc-grid .svc--ask .btn{align-self:flex-start;margin-top:24px}
}
@media (max-width:640px){
  .svc-grid .svc--ask .btn{align-self:stretch}
}