/* ============================================================
   Wadi Al-Binaa — Design Tokens & Components (WordPress-ready)
   ============================================================ */
:root{
  --navy:#0D1B3D; --navy2:#12244E; --navy3:#2A3F6E;
  --orange:#F2B01E; --orange-d:#DA9C12;
  --ink:#1F2937; --mute:#6B7280; --light:#F2F4F7; --line:#E1E4EA;
  --gray:#A6A9AE; --green:#006C35; --white:#fff;
  --ff-ar:'Tajawal',system-ui,sans-serif; --ff-en:'Poppins',sans-serif;
  --container:1200px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px; --s8:64px; --s12:96px;
  --r-btn:10px; --r-card:12px; --r-pill:999px;
  --shadow:0 8px 24px rgba(13,27,61,.08); --shadow-lg:0 16px 40px rgba(13,27,61,.14);
  --tr:.25s ease;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--ff-ar);color:var(--ink);background:var(--white);line-height:1.7;font-size:16px}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.en{font-family:var(--ff-en);direction:ltr;unicode-bidi:embed}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--s3)}
.section{padding-block:var(--s12)}
.section--light{background:var(--light)}
.section--navy{background:var(--navy);color:var(--white);position:relative;overflow:hidden}
.watermark{position:absolute;inset-inline-end:-60px;bottom:-80px;width:420px;opacity:.05;pointer-events:none}
/* Kicker + headings */
.kicker{font-family:var(--ff-en);font-weight:600;font-size:12px;letter-spacing:2.2px;color:var(--orange);text-transform:uppercase;display:flex;align-items:center;gap:14px}
.kicker::after{content:"";width:90px;height:2px;background:var(--orange)}
h1,h2,h3{font-weight:800;color:var(--navy);line-height:1.3}
.section--navy h2,.section--navy h3,.cta h2{color:var(--white)}
h1{font-size:clamp(34px,5vw,54px)}
h2{font-size:clamp(26px,3.4vw,36px);margin-top:var(--s1)}
h3{font-size:20px}
.lead{color:var(--mute);max-width:760px;margin-top:var(--s2)}
.section--navy .lead{color:var(--gray)}
.sec-head{margin-bottom:var(--s6)}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;padding:14px 28px;border-radius:var(--r-btn);border:2px solid transparent;cursor:pointer;transition:var(--tr);font-family:var(--ff-ar)}
.btn--primary{background:var(--orange);color:var(--navy)}
.btn--primary:hover{background:var(--orange-d);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn--outline{border-color:var(--navy);color:var(--navy)}
.btn--outline:hover{background:var(--navy);color:#fff}
.btn--outline-w{border-color:#fff;color:#fff}
.btn--outline-w:hover{background:#fff;color:var(--navy)}
.btn:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
/* Header */
.header{position:fixed;inset-inline:0;top:0;z-index:100;transition:var(--tr);padding-block:14px}
.header.solid,.header.inner{background:var(--navy);box-shadow:0 4px 20px rgba(13,27,61,.25);padding-block:10px}
.nav{display:flex;align-items:center;gap:var(--s4)}
.brand img{height:52px;width:auto}
.menu{display:flex;gap:var(--s3);margin-inline-start:auto;align-items:center}
.menu>li{position:relative}
.menu a{color:#fff;font-weight:500;font-size:15px;padding:10px 4px;position:relative;display:inline-block}
.menu>li>a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--orange);transform:scaleX(0);transition:var(--tr)}
.menu>li>a:hover::after,.menu>li>a.active::after{transform:scaleX(1)}
.menu a.active{color:var(--orange)}
.has-sub>a{display:inline-flex;align-items:center;gap:6px}
.sub{position:absolute;top:100%;inset-inline-start:0;background:#fff;min-width:290px;border-radius:12px;box-shadow:var(--shadow-lg);padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);transition:var(--tr)}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{color:var(--ink);display:block;padding:10px 14px;border-radius:8px;font-size:14px}
.sub a:hover{background:var(--light);color:var(--navy)}
.nav .btn{padding:11px 22px;font-size:14px}
.burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px}
.burger span{display:block;width:26px;height:2.5px;background:#fff;margin:6px auto;transition:var(--tr)}
/* Hero */
.hero{min-height:92vh;display:flex;align-items:center;position:relative;color:#fff;background:var(--navy)}
.hero__bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,27,61,.95) 0%,rgba(13,27,61,.78) 45%,rgba(13,27,61,.35) 100%)}
.hero .container{position:relative;z-index:2;padding-top:90px}
.hero h1{color:#fff;max-width:660px}
.hero h1 .accent{color:var(--orange)}
.hero .lead{color:#D9DDE5}
.hero__cta{display:flex;gap:var(--s2);margin-top:var(--s5);flex-wrap:wrap}
.hero--inner{min-height:360px}
.hero--inner::after{background:rgba(13,27,61,.8)}
.crumbs{display:flex;gap:8px;color:var(--gray);font-size:13px;margin-top:var(--s2)}
.crumbs a{color:var(--orange)}
/* Stats */
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.stat{background:var(--navy2);border-radius:var(--r-card);padding:var(--s4) var(--s3);text-align:center}
.stat b{font-family:var(--ff-en);font-size:44px;font-weight:600;color:var(--orange);display:block;line-height:1}
.stat span{color:var(--gray);font-size:14px;display:block;margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--navy3)}
.note{font-size:12.5px;color:var(--mute);margin-top:var(--s4);text-align:center}
.section--navy .note{color:#6B7692}
/* Grids & cards */
.grid{display:grid;gap:var(--s3)}
.g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s4);box-shadow:var(--shadow);transition:var(--tr)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.num-circle{width:52px;height:52px;min-width:52px;border-radius:50%;background:var(--navy);color:var(--orange);font-family:var(--ff-en);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:16px}
.svc-card{display:flex;align-items:center;gap:var(--s2)}
.svc-card h3{font-size:16px}
.icard p{color:var(--mute);font-size:14px;margin-top:var(--s1)}
/* Big-number cards */
.ncard{border-radius:var(--r-card);padding:var(--s4) var(--s2);text-align:center;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.ncard.dark{background:var(--navy);border:0}
.ncard b{font-family:var(--ff-en);font-weight:600;font-size:42px;color:var(--orange);display:block;line-height:1.05}
.ncard small{display:block;margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line);font-size:15px;font-weight:800;color:var(--navy)}
.ncard.dark small{border-color:var(--navy3);color:#fff}
.ncard .en{font-size:11px;color:var(--mute);margin-top:4px;display:block;font-weight:500}
.ncard.dark .en{color:var(--gray)}
/* Project card */
.pcard{overflow:hidden;padding:0}
.pcard__img{position:relative;height:190px;overflow:hidden}
.pcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pcard:hover .pcard__img img{transform:scale(1.06)}
.badge{position:absolute;top:14px;inset-inline-start:14px;background:var(--orange);color:var(--navy);font-family:var(--ff-en);font-weight:600;font-size:13px;padding:6px 14px;border-radius:var(--r-pill)}
.pcard__body{padding:var(--s3)}
.pcard__body h3{font-size:15.5px;line-height:1.55}
.meta{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s2);font-size:12.5px;color:var(--mute)}
.meta b{color:var(--orange);font-weight:700}
/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s2)}
.chip{background:var(--light);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 16px;font-size:13.5px}
/* Timeline */
.tl{display:flex;justify-content:space-between;position:relative;margin-top:var(--s8)}
.tl::before{content:"";position:absolute;inset-inline:30px;top:58px;height:2px;background:var(--line)}
.tl__item{text-align:center;position:relative;z-index:1;flex:1}
.tl__item b{font-family:var(--ff-en);font-weight:600;font-size:18px;color:var(--navy)}
.tl__dot{width:56px;height:56px;border-radius:50%;background:var(--navy);color:var(--orange);font-family:var(--ff-en);font-weight:600;font-size:20px;display:flex;align-items:center;justify-content:center;margin:10px auto}
.tl__item span{font-size:12.5px;color:var(--mute)}
/* Filters */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:var(--s4)}
.fbtn{border:1.5px solid var(--line);background:#fff;border-radius:var(--r-pill);padding:9px 18px;font-family:var(--ff-ar);font-size:13.5px;cursor:pointer;transition:var(--tr)}
.fbtn:hover{border-color:var(--navy)}
.fbtn.on{background:var(--navy);color:var(--orange);border-color:var(--navy)}
/* Dark trio */
.dark-card{background:var(--navy2);border-radius:var(--r-card);padding:var(--s4)}
.dark-card .tag{font-family:var(--ff-en);font-weight:600;font-size:22px;color:var(--orange)}
.dark-card h3{margin-top:var(--s2)}
.dark-card p{color:var(--gray);font-size:14px;margin-top:var(--s1)}
/* Vision */
.vision{position:relative;isolation:isolate;background:#fff}
.vision::before{content:"";position:absolute;inset:0;background:url(../img/vision_light.jpg) center/cover;opacity:.32;z-index:-1}
.vcard{text-align:center}
.vcard .num-circle{background:var(--green);color:#fff;margin-inline:auto}
/* Accordion */
.acc{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:#fff}
.acc+.acc{margin-top:var(--s2)}
.acc summary{padding:var(--s3);font-weight:800;color:var(--navy);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-family:var(--ff-en);font-size:22px;color:var(--orange);transition:var(--tr)}
.acc[open] summary::after{transform:rotate(45deg)}
.acc p{padding:0 var(--s3) var(--s3);color:var(--mute)}
/* Table */
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow)}
.tbl th{background:var(--navy);color:var(--orange);padding:14px;font-size:14px;text-align:start}
.tbl td{padding:14px;border-top:1px solid var(--line);font-size:14px}
.tbl tr:nth-child(even) td{background:var(--light)}
.tbl-wrap{overflow-x:auto}
/* Docs gallery + lightbox */
.doc{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s2);text-align:center;box-shadow:var(--shadow);cursor:zoom-in;transition:var(--tr)}
.doc:hover{transform:translateY(-4px)}
.doc img{height:300px;object-fit:contain;margin-inline:auto}
.doc figcaption{font-weight:800;color:var(--navy);margin-top:var(--s2);font-size:14px}
.lightbox{position:fixed;inset:0;background:rgba(13,27,61,.92);display:none;align-items:center;justify-content:center;z-index:200;padding:var(--s4);cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-height:90vh;max-width:92vw;background:#fff;padding:8px;border-radius:8px}
/* Forms */
.form{display:grid;gap:var(--s2)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.field label{font-weight:700;font-size:14px;color:var(--navy);display:block;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:var(--r-btn);font-family:var(--ff-ar);font-size:15px;background:#fff;transition:var(--tr)}
.field :is(input,select,textarea):focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,176,30,.2)}
.field.err :is(input,textarea,select){border-color:#C0392B}
.field .msg{font-size:12px;color:#C0392B;margin-top:4px;display:none}
.field.err .msg{display:block}
.alert{padding:var(--s2) var(--s3);border-radius:var(--r-btn);font-weight:700;display:none;margin-top:var(--s2)}
.alert.ok{display:block;background:#E8F5EE;color:var(--green);border:1px solid #BFE3CF}
/* CTA */
.cta{background:var(--navy);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta .btn{margin-top:var(--s4)}
/* Footer */
.footer{background:var(--navy);color:var(--gray);padding-top:var(--s12)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:var(--s6)}
.footer h4{color:#fff;font-size:16px;margin-bottom:var(--s3)}
.footer a{display:block;padding-block:6px;font-size:14px;transition:var(--tr)}
.footer a:hover{color:var(--orange)}
.footer .brand img{height:64px;margin-bottom:var(--s2)}
.footer p{font-size:14px;line-height:1.8}
.contact-line{display:flex;gap:10px;font-size:14px;padding-block:6px}
.contact-line b{color:var(--orange);font-weight:700;min-width:96px}
.footer__bar{border-top:1px solid var(--navy3);margin-top:var(--s8);padding-block:var(--s3);font-size:12.5px;display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
#toTop{position:fixed;bottom:24px;inset-inline-start:24px;width:48px;height:48px;border-radius:50%;background:var(--orange);color:var(--navy);border:0;font-size:20px;cursor:pointer;opacity:0;visibility:hidden;transition:var(--tr);z-index:90;box-shadow:var(--shadow-lg)}
#toTop.show{opacity:1;visibility:visible}
/* Reveal */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
/* 404 */
.nf{min-height:100vh;display:flex;align-items:center;text-align:center;background:var(--navy);color:#fff}
.nf b{font-family:var(--ff-en);font-size:120px;font-weight:600;color:var(--orange);line-height:1;display:block}
.nf h1{color:#fff}
/* Split + facts */
.split{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s8);align-items:center}
.facts{background:var(--navy);border-radius:var(--r-card);padding:var(--s4);color:#fff;box-shadow:var(--shadow-lg)}
.facts h3{color:#fff;border-bottom:2px solid var(--orange);display:inline-block;padding-bottom:10px}
.facts dt{color:var(--gray);font-size:12.5px;margin-top:var(--s2)}
.facts dd{font-weight:800;font-size:16px}
.img-frame{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-lg)}
.map{border:0;width:100%;height:380px;border-radius:var(--r-card);box-shadow:var(--shadow)}
/* Responsive */
@media(max-width:1024px){
  .g4,.g3{grid-template-columns:repeat(2,1fr)}
  .stats__grid,.footer__grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .menu{position:fixed;inset:0;background:var(--navy);flex-direction:column;justify-content:center;transform:translateX(100%);transition:.35s ease;gap:var(--s2)}
  .menu.open{transform:none}
  .burger{display:block;position:relative;z-index:110}
  .nav>.btn{display:none}
  .sub{position:static;opacity:1;visibility:visible;transform:none;background:transparent;box-shadow:none;text-align:center;min-width:0}
  .sub a{color:var(--gray)}
}
@media(max-width:767px){
  .section{padding-block:var(--s8)}
  .g4,.g3,.g2,.form .row,.footer__grid{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stat b{font-size:32px}
  .hero{min-height:80vh}
  .hero__cta .btn{width:100%;justify-content:center}
  .tl{flex-direction:column;gap:var(--s3)}
  .tl::before{display:none}
  .ncard b{font-size:34px}
  .doc img{height:220px}
}

/* ============ RESPONSIVE HARDENING (all screens & devices) ============ */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
*{ min-width:0; }                       /* let flex/grid children shrink, kills overflow */
body{ overflow-x:hidden; }
img,svg,video,iframe,table{ max-width:100%; }
img{ height:auto; }
.container{ width:100%; padding-inline:clamp(16px,4vw,24px); }
/* fluid type */
body{ font-size:clamp(15px,1vw+13px,16px); }
.lead{ font-size:clamp(14px,.5vw+13px,16.5px); }
h3{ font-size:clamp(17px,1.4vw,20px); }
.btn{ min-height:48px; }                /* touch target */
.menu a, .fbtn, .acc summary{ min-height:44px; display:flex; align-items:center; }
.fbtn{ display:inline-flex; }
/* hero: modern small-viewport units with fallback */
.hero{ min-height:92vh; min-height:92svh; }
.hero--inner{ min-height:340px; min-height:42svh; }
/* notch / safe areas */
.header{ padding-inline:env(safe-area-inset-right) env(safe-area-inset-left); }
.footer__bar{ padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
#toTop{ inset-inline-start:calc(24px + env(safe-area-inset-left)); bottom:calc(24px + env(safe-area-inset-bottom)); }
/* tables never break layout */
.tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl{ min-width:640px; }
/* wide desktops: cap container, keep rhythm */
@media (min-width:1600px){
  :root{ --container:1280px; }
  .section{ padding-block:120px; }
}
/* small tablets / large phones */
@media (max-width:900px){
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .g4,.g3{ grid-template-columns:repeat(2,1fr); }
}
/* phones */
@media (max-width:600px){
  .section{ padding-block:56px; }
  .g4,.g3,.g2,.grid,.split,.form .row,.footer__grid{ grid-template-columns:1fr !important; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  h1{ font-size:clamp(28px,8vw,36px); }
  h2{ font-size:clamp(22px,6vw,28px); }
  .hero__cta{ flex-direction:column; }
  .hero__cta .btn{ width:100%; justify-content:center; }
  .kicker::after{ width:48px; }
  .tl{ flex-direction:column; gap:16px; }
  .tl::before{ display:none; }
  .doc img{ height:200px; }
  .facts, .card{ padding:24px; }
  .footer__bar{ flex-direction:column; text-align:center; }
}
/* very small phones */
@media (max-width:380px){
  .stats__grid{ grid-template-columns:1fr; }
  .stat b{ font-size:30px; }
  .ncard b{ font-size:30px; }
  .badge{ font-size:11px; }
}
/* landscape phones: shorter hero so content shows */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:520px; }
  .hero .container{ padding-top:96px; padding-bottom:32px; }
}
/* fine-pointer hover only (avoids sticky hover on touch) */
@media (hover:none){
  .card:hover{ transform:none; }
  .pcard:hover .pcard__img img{ transform:none; }
}
/* print */
@media print{
  .header,#toTop,.hero__cta,.burger{ display:none !important; }
  .section{ padding-block:24px; }
  *{ box-shadow:none !important; }
}