/* =========================================================
   موئل — Mawil Legal & Labor Consulting
   style.css — global stylesheet
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  --navy-950:#060f20;
  --navy-900:#0b1e3c;
  --navy-800:#122a52;
  --navy-700:#1c3a6b;
  --gold-600:#9c7737;
  --gold-500:#b8923f;
  --gold-400:#cda75f;
  --gold-300:#e2c88a;
  --cream-50:#faf8f4;
  --cream-100:#f3efe6;
  --cream-200:#e9e2d3;
  --ink-900:#10182b;
  --ink-600:#4d566b;
  --ink-400:#828a9c;
  --line:#e3dcc9;
  --white:#ffffff;
  --shadow-lg:0 30px 60px -20px rgba(6,15,32,.35);
  --shadow-md:0 14px 30px -12px rgba(6,15,32,.22);
  --shadow-sm:0 6px 16px -8px rgba(6,15,32,.18);
  --header-h:84px;
  --microbar-h:38px;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  background:var(--cream-50);
  color:var(--ink-900);
  font-family:'Tajawal','Segoe UI',Tahoma,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.5;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
input,textarea{font-family:inherit;font-size:inherit;color:inherit;}
h1,h2,h3,h4{font-family:'Tajawal','Segoe UI',Tahoma,Arial,sans-serif;margin:0;text-wrap:balance;font-weight:800;letter-spacing:0;}
:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;border-radius:4px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

.wrap{max-width:1240px;margin-inline:auto;padding-inline:24px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;letter-spacing:.06em;font-weight:700;
  color:var(--gold-500);text-transform:uppercase;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold-500);display:inline-block;flex:none;}
.center-eyebrow{justify-content:center;}
.visually-hidden{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:fixed;top:-60px;right:16px;z-index:200;
  background:var(--navy-900);color:var(--white);
  padding:12px 18px;border-radius:8px;transition:top .2s var(--ease);
}
.skip-link:focus{top:16px;}

/* ---------- micro bar ---------- */
.microbar{background:var(--navy-950);color:var(--cream-200);font-size:12.5px;height:var(--microbar-h);}
.microbar .wrap{display:flex;align-items:center;justify-content:space-between;height:100%;}
.microbar .left,.microbar .right{display:flex;align-items:center;gap:16px;}
.microbar a{opacity:.85;display:flex;align-items:center;gap:6px;transition:opacity .15s,color .15s;}
.microbar a:hover{opacity:1;color:var(--gold-300);}
.micro-social{display:flex;align-items:center;gap:12px;}
.micro-social a{width:22px;height:22px;display:flex;align-items:center;justify-content:center;}
.micro-social svg{width:14px;height:14px;fill:var(--cream-200);opacity:.8;transition:opacity .15s,fill .15s;}
.micro-social a:hover svg{opacity:1;fill:var(--gold-300);}
.lang-toggle{display:flex;align-items:center;gap:2px;font-weight:700;}
.lang-toggle button{
  padding:4px 7px;border-radius:5px;font-size:12px;font-weight:700;
  color:var(--cream-200);opacity:.55;transition:opacity .15s,background .15s,color .15s;
}
.lang-toggle button:hover{opacity:.85;}
.lang-toggle button[aria-pressed="true"]{opacity:1;color:var(--navy-950);background:var(--gold-400);}
.sep{opacity:.3;}

/* ---------- nav ---------- */
header.site-header{
  background:rgba(250,248,244,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:80;
  transition:box-shadow .25s var(--ease);
}
header.site-header.is-scrolled{box-shadow:var(--shadow-sm);}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:20px;}
.brand{display:flex;align-items:center;height:50px;flex:none;}
.brand img{height:100%;width:auto;}
.nav-menu{display:flex;align-items:center;gap:30px;font-size:15px;font-weight:500;color:var(--ink-600);}
.nav-menu a{position:relative;padding:6px 0;white-space:nowrap;transition:color .15s;}
.nav-menu a:hover,.nav-menu a:focus-visible{color:var(--navy-900);}
.nav-menu a::after{content:"";position:absolute;inset-inline-start:0;bottom:0;height:2px;width:0;background:var(--gold-500);transition:width .2s var(--ease);}
.nav-menu a:hover::after,.nav-menu a:focus-visible::after{width:100%;}
.nav-actions{display:flex;align-items:center;gap:10px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:8px;font-size:14.5px;font-weight:700;
  border:1px solid transparent;white-space:nowrap;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.btn svg{width:16px;height:16px;transition:transform .18s var(--ease);}
.btn-gold{background:var(--gold-500);color:var(--navy-950);}
.btn-gold:hover{background:var(--gold-400);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-gold:hover svg{transform:translateX(-3px);}
[dir="ltr"] .btn-gold:hover svg{transform:translateX(3px);}
.btn-ghost{background:transparent;border-color:var(--navy-900);color:var(--navy-900);}
.btn-ghost:hover{background:var(--navy-900);color:var(--white);}
.btn-outline-light{border-color:rgba(255,255,255,.4);color:var(--white);}
.btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:var(--white);}
.btn-block{width:100%;}

.portal-btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;
  border:1px solid var(--line);color:var(--ink-600);font-size:14px;font-weight:600;
  transition:all .18s var(--ease);
}
.portal-btn:hover,.portal-btn:focus-visible{border-color:var(--navy-900);color:var(--navy-900);background:var(--cream-100);}
.portal-btn svg{width:17px;height:17px;stroke:currentColor;flex:none;}

.nav-burger{
  display:none;flex:none;width:42px;height:42px;border-radius:8px;
  align-items:center;justify-content:center;border:1px solid var(--line);
}
.nav-burger svg{width:20px;height:20px;stroke:var(--navy-900);}
.nav-burger:hover{background:var(--cream-100);}

/* mobile drawer */
.mobile-drawer{
  position:fixed;inset:0;z-index:90;visibility:hidden;
}
.mobile-drawer::before{
  content:"";position:absolute;inset:0;background:rgba(6,15,32,.5);
  opacity:0;transition:opacity .25s var(--ease);
}
.mobile-drawer .panel{
  position:absolute;top:0;bottom:0;inset-inline-end:0;width:min(84vw,360px);
  background:var(--cream-50);box-shadow:var(--shadow-lg);
  transform:translateX(100%);transition:transform .3s var(--ease);
  display:flex;flex-direction:column;padding:22px 22px 28px;overflow-y:auto;
}
[dir="rtl"] .mobile-drawer .panel{transform:translateX(-100%);}
html[dir="rtl"] body.drawer-open .mobile-drawer .panel{transform:translateX(0);}
html[dir="ltr"] body.drawer-open .mobile-drawer .panel{transform:translateX(0);}
body.drawer-open .mobile-drawer{visibility:visible;}
body.drawer-open .mobile-drawer::before{opacity:1;}
body.drawer-open{overflow:hidden;}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;}
.drawer-head img{height:36px;width:auto;}
.drawer-close{width:38px;height:38px;border-radius:8px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;}
.drawer-close svg{width:18px;height:18px;stroke:var(--navy-900);}
.drawer-menu{display:flex;flex-direction:column;gap:4px;margin-bottom:24px;}
.drawer-menu a{padding:13px 6px;font-size:16px;font-weight:600;color:var(--ink-900);border-bottom:1px solid var(--line);}
.drawer-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto;}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:radial-gradient(120% 140% at 15% 0%, var(--navy-800) 0%, var(--navy-900) 45%, var(--navy-950) 100%);
  color:var(--white);overflow:hidden;
}
[dir="ltr"] .hero{background:radial-gradient(120% 140% at 85% 0%, var(--navy-800) 0%, var(--navy-900) 45%, var(--navy-950) 100%);}
.hero-pattern{
  position:absolute;inset:0;opacity:.14;pointer-events:none;
  background-image:url("assets/images/pattern-arch.svg");
  background-size:220px 220px;
}
.hero-grid{
  position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:56px;align-items:center;padding-block:64px 96px;
}
.hero-copy p.lead{font-size:17.5px;line-height:1.85;color:var(--cream-200);max-width:52ch;margin:22px 0 34px;}
.hero-copy h1{font-size:clamp(32px,4.2vw,54px);line-height:1.32;color:var(--white);margin-top:18px;}
.hero-copy h1 em{font-style:normal;color:var(--gold-400);}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px;}
.hero-trust{display:flex;gap:26px;flex-wrap:wrap;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);}
.hero-trust .item{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--cream-200);}
.hero-trust svg{width:19px;height:19px;stroke:var(--gold-400);flex:none;}

.hero-visual{position:relative;}
.hero-frame{
  position:relative;border-radius:18px;padding:10px;
  background:linear-gradient(160deg,var(--gold-400),var(--gold-600) 60%,var(--navy-800));
  box-shadow:var(--shadow-lg);max-width:440px;margin-inline-start:auto;
}
.hero-frame .inner{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.25);}
.hero-frame img{width:100%;height:auto;display:block;}
.hero-tag{
  position:absolute;bottom:-18px;inset-inline-end:24px;
  background:var(--white);color:var(--navy-900);padding:10px 16px;border-radius:10px;
  box-shadow:var(--shadow-md);font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;
}
.hero-tag .dot{width:8px;height:8px;border-radius:50%;background:var(--gold-500);flex:none;}
.hero-orb{
  position:absolute;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(205,167,95,.35),transparent 70%);
  top:-60px;inset-inline-start:-60px;filter:blur(6px);z-index:0;
}

/* ---------- stats card ---------- */
.stats-wrap{position:relative;z-index:3;margin-top:-56px;}
.stats-card{
  background:var(--white);border-radius:16px;box-shadow:var(--shadow-lg);
  border-top:3px solid var(--gold-500);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;
}
.stat{padding:28px 20px;text-align:center;border-inline-start:1px solid var(--line);}
.stat:first-child{border-inline-start:none;}
.stat .num{font-family:'Tajawal','Segoe UI',Tahoma,Arial,sans-serif;font-size:34px;color:var(--navy-900);display:flex;align-items:center;justify-content:center;gap:4px;font-variant-numeric:tabular-nums;}
.stat .num .plus{color:var(--gold-500);font-size:24px;}
.stat .label{font-size:13.5px;color:var(--ink-600);margin-top:6px;}

/* ---------- section shell ---------- */
section{padding-block:96px;}
.section-head{max-width:640px;margin-bottom:52px;}
.section-head.center{margin-inline:auto;text-align:center;}
.section-head h2{font-size:clamp(26px,3vw,38px);color:var(--navy-900);margin-top:14px;line-height:1.35;}
.section-head p{color:var(--ink-600);font-size:15.5px;line-height:1.8;margin-top:14px;}
section[id]{scroll-margin-top:calc(var(--header-h) + var(--microbar-h) + 14px);}

/* ---------- services ---------- */
.services{background:var(--cream-50);}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.svc-card{
  background:var(--white);border:1px solid var(--line);border-radius:14px;padding:30px 26px;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent;}
.svc-icon{width:52px;height:52px;border-radius:12px;background:var(--navy-900);display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:background .22s var(--ease);}
.svc-card:hover .svc-icon{background:var(--gold-500);}
.svc-icon svg{width:26px;height:26px;stroke:var(--gold-400);fill:none;transition:stroke .22s var(--ease);}
.svc-card:hover .svc-icon svg{stroke:var(--navy-950);}
.svc-card h3{font-size:18px;color:var(--navy-900);margin-bottom:10px;}
.svc-card p{font-size:14px;line-height:1.8;color:var(--ink-600);margin:0;}

/* ---------- why us (navy) ---------- */
.why{background:linear-gradient(180deg,var(--navy-950),var(--navy-900) 55%,var(--navy-950));color:var(--white);position:relative;overflow:hidden;}
.why::before{content:"";position:absolute;inset:0;opacity:.07;background-image:url("assets/images/pattern-arch.svg");background-size:220px 220px;}
.why .section-head p{color:var(--cream-200);}
.why .section-head h2{color:var(--white);}
.why-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.why-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:26px 20px;text-align:center;transition:background .2s var(--ease),transform .2s var(--ease);}
.why-item:hover{background:rgba(255,255,255,.08);transform:translateY(-3px);}
.why-item svg{width:30px;height:30px;stroke:var(--gold-400);margin-bottom:16px;}
.why-item h4{font-size:14.5px;font-weight:700;margin-bottom:8px;color:var(--white);}
.why-item p{font-size:12.5px;color:var(--cream-200);line-height:1.7;margin:0;}

/* ---------- sectors + engagement ---------- */
.split{background:var(--cream-100);}
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.split-box h3{font-family:'Tajawal','Segoe UI',Tahoma,Arial,sans-serif;font-size:21px;color:var(--navy-900);display:flex;align-items:center;gap:10px;margin-bottom:22px;}
.split-box h3 svg{width:22px;height:22px;stroke:var(--gold-500);flex:none;}
.chip-list{display:flex;flex-wrap:wrap;gap:10px;}
.chip{background:var(--white);border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-size:13.5px;font-weight:600;color:var(--ink-900);display:flex;align-items:center;gap:8px;transition:border-color .2s,box-shadow .2s;}
.chip:hover{border-color:var(--gold-500);box-shadow:var(--shadow-sm);}
.chip .n{width:20px;height:20px;border-radius:50%;background:var(--navy-900);color:var(--gold-400);font-size:10.5px;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none;}
.engage-list{display:flex;flex-direction:column;gap:12px;}
.engage-item{display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:16px 18px;transition:border-color .2s,box-shadow .2s;}
.engage-item:hover{border-color:var(--gold-500);box-shadow:var(--shadow-sm);}
.engage-item .ic{width:38px;height:38px;border-radius:9px;background:var(--gold-500);display:flex;align-items:center;justify-content:center;flex:none;}
.engage-item .ic svg{width:19px;height:19px;stroke:var(--navy-950);}
.engage-item span{font-size:14px;font-weight:600;color:var(--ink-900);}

/* ---------- CTA banner ---------- */
.cta-section{padding-block:0 96px;}
.cta-band{
  background:linear-gradient(120deg,var(--navy-900),var(--navy-800));border-radius:22px;
  position:relative;overflow:hidden;padding:56px 48px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 90% 10%, rgba(205,167,95,.28), transparent 65%);}
[dir="ltr"] .cta-band::after{background:radial-gradient(60% 120% at 10% 10%, rgba(205,167,95,.28), transparent 65%);}
.cta-band .txt{position:relative;z-index:1;max-width:560px;}
.cta-band h2{color:var(--white);font-size:clamp(22px,2.6vw,30px);line-height:1.5;margin-top:14px;}
.cta-band .phone{position:relative;z-index:1;display:flex;align-items:center;gap:12px;color:var(--white);font-weight:700;font-size:19px;direction:ltr;}
.cta-band .phone svg{width:20px;height:20px;stroke:var(--gold-400);flex:none;}
.cta-band-actions{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;align-items:flex-start;}

/* ---------- contact ---------- */
.contact{background:var(--cream-50);}
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start;}
.contact-channels{display:flex;flex-direction:column;gap:14px;}
.contact-card{
  display:flex;align-items:center;gap:16px;background:var(--white);border:1px solid var(--line);
  border-radius:14px;padding:18px 20px;transition:border-color .2s,box-shadow .2s,transform .2s;
}
.contact-card:hover{border-color:var(--gold-500);box-shadow:var(--shadow-sm);transform:translateY(-2px);}
.contact-card .ic{width:44px;height:44px;border-radius:11px;background:var(--navy-900);display:flex;align-items:center;justify-content:center;flex:none;}
.contact-card .ic svg{width:21px;height:21px;stroke:var(--gold-400);}
.contact-card .t{font-size:12.5px;color:var(--ink-400);margin-bottom:3px;}
.contact-card .v{font-size:15px;font-weight:700;color:var(--ink-900);direction:ltr;text-align:start;}
.contact-card .v.rtl-text{direction:rtl;}

.contact-form{
  background:var(--white);border:1px solid var(--line);border-radius:18px;padding:34px;box-shadow:var(--shadow-sm);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field.full{grid-column:1/-1;}
.field label{font-size:13.5px;font-weight:700;color:var(--ink-900);}
.field input,.field textarea{
  border:1px solid var(--line);border-radius:9px;padding:12px 14px;font-size:14.5px;
  background:var(--cream-50);transition:border-color .18s,box-shadow .18s;
}
.field input:focus,.field textarea:focus{border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(184,146,63,.15);outline:none;}
.field textarea{resize:vertical;min-height:110px;font-family:inherit;}
.form-note{
  display:flex;gap:10px;align-items:flex-start;background:var(--cream-100);border:1px dashed var(--line);
  border-radius:10px;padding:12px 14px;font-size:12.5px;color:var(--ink-600);line-height:1.7;margin-top:6px;margin-bottom:18px;
}
.form-note svg{width:16px;height:16px;stroke:var(--gold-600);flex:none;margin-top:2px;}
.form-status{margin-top:14px;font-size:14px;font-weight:700;display:none;}
.form-status.show{display:block;}
.form-status.ok{color:#4d7c3a;}
.form-status.err{color:#b3413f;}

/* ---------- footer ---------- */
footer{background:var(--navy-950);color:var(--cream-200);padding-top:72px;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.1);}
.footer-brand img{height:46px;width:auto;margin-bottom:18px;}
.footer-brand p{font-size:13.5px;line-height:1.9;color:var(--cream-200);opacity:.8;max-width:34ch;}
.footer-social{display:flex;gap:10px;margin-top:20px;}
.footer-social a{width:36px;height:36px;border-radius:9px;border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;transition:all .18s var(--ease);}
.footer-social a:hover{background:var(--gold-500);border-color:var(--gold-500);}
.footer-social svg{width:16px;height:16px;fill:var(--cream-200);}
.footer-social a:hover svg{fill:var(--navy-950);}
.footer-col h5{font-size:14.5px;color:var(--white);margin-bottom:20px;font-weight:700;}
.footer-col ul{display:flex;flex-direction:column;gap:12px;}
.footer-col a{font-size:13.5px;opacity:.78;transition:opacity .15s,color .15s;}
.footer-col a:hover{opacity:1;color:var(--gold-300);}
.footer-contact li{display:flex;align-items:center;gap:10px;font-size:13.5px;opacity:.85;}
.footer-contact svg{width:16px;height:16px;stroke:var(--gold-400);flex:none;}
.footer-contact li[dir="ltr"]{justify-content:flex-end;}
[dir="ltr"] .footer-contact li[dir="ltr"]{justify-content:flex-start;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-block:24px;font-size:12.5px;opacity:.6;flex-wrap:wrap;gap:10px;}

/* ---------- portal modal ---------- */
.modal-layer{position:fixed;inset:0;z-index:150;visibility:hidden;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal-layer::before{content:"";position:absolute;inset:0;background:rgba(6,15,32,.6);opacity:0;transition:opacity .2s var(--ease);}
body.modal-open .modal-layer{visibility:visible;}
body.modal-open .modal-layer::before{opacity:1;}
body.modal-open{overflow:hidden;}
.modal-card{
  position:relative;z-index:1;background:var(--white);border-radius:16px;max-width:420px;width:100%;
  padding:32px;box-shadow:var(--shadow-lg);text-align:center;
  transform:translateY(14px) scale(.98);opacity:0;transition:transform .25s var(--ease),opacity .25s var(--ease);
}
body.modal-open .modal-card{transform:translateY(0) scale(1);opacity:1;}
.modal-icon{width:56px;height:56px;border-radius:14px;background:var(--navy-900);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.modal-icon svg{width:26px;height:26px;stroke:var(--gold-400);}
.modal-card h3{font-size:20px;color:var(--navy-900);margin-bottom:12px;}
.modal-card p{font-size:14px;line-height:1.8;color:var(--ink-600);margin-bottom:24px;}
.modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.modal-close-x{position:absolute;top:14px;inset-inline-end:14px;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;}
.modal-close-x:hover{background:var(--cream-100);}
.modal-close-x svg{width:16px;height:16px;stroke:var(--ink-600);}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.reveal.in-view{opacity:1;transform:translateY(0);}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;padding-block:40px 40px;}
  .hero-visual{order:-1;}
  .hero-frame{max-width:340px;margin-inline:auto;}
  .stats-card{grid-template-columns:repeat(2,1fr);}
  .stat:nth-child(3){border-inline-start:none;}
  .stat{border-bottom:1px solid var(--line);}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .split-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .nav-menu,.nav-actions .portal-btn,.nav-actions .btn{display:none;}
  .nav-burger{display:flex;}
  .nav-actions{gap:8px;}
  .cta-band{flex-direction:column;align-items:flex-start;}
  section{padding-block:72px;}
}
@media (max-width:640px){
  .microbar .label-text{display:none;}
  .svc-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
  .stats-card{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1/-1;}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn{width:100%;}
  .form-row{grid-template-columns:1fr;}
  .cta-band{padding:36px 26px;}
  section{padding-block:60px;}
}


/* ---------- V3.1 Arabic typography refinement ---------- */
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,
html[dir="rtl"] .hero-copy h1,html[dir="rtl"] .svc-card h3,html[dir="rtl"] .why-card h3,
html[dir="rtl"] .split-box h3,html[dir="rtl"] .cta-band h2{
  font-family:'Tajawal','Segoe UI',Tahoma,Arial,sans-serif;
  font-weight:800;
  letter-spacing:0;
  word-spacing:0;
  font-kerning:normal;
  font-variant-ligatures:normal;
  text-rendering:optimizeLegibility;
}
html[dir="rtl"] .hero-copy h1{line-height:1.45;}
html[dir="rtl"] .section-head h2{line-height:1.45;}
html[dir="rtl"] .svc-card h3,html[dir="rtl"] .why-card h3{line-height:1.55;}

/* ==========================================================
   V3.2 — Spacing & Layout Polish
   Tightens dead vertical space while preserving the approved visual identity.
   ========================================================== */
@media (min-width: 981px){
  section{padding-block:72px;}
  .section-head{margin-bottom:36px;}

  /* About: keep breathing room, remove the oversized blank tail. */
  .about{padding-block:76px 64px;}
  .about .section-head{margin-bottom:34px;}
  .about .svc-card{padding:26px 24px;}

  /* Services: tighter rhythm around heading and card grid. */
  .services{padding-block:72px;}
  .services .section-head{margin-bottom:38px;}
  .services .svc-grid{gap:20px;}
  .services .svc-card{padding:26px 24px;}

  /* Why Mawil: compact the section without crowding the five cards. */
  .why{padding-block:72px 64px;}
  .why .section-head{margin-bottom:38px;}
  .why-item{padding:24px 18px;}
  .why .wrap > p:last-child{margin-top:28px !important;}

  /* Sectors / engagement: remove the large unused lower half. */
  .split{padding-block:64px;}
  .split-grid{gap:42px;align-items:start;}
  .split-box h3{margin-bottom:18px;}
  .engage-list{gap:10px;}
  .engage-item{padding:14px 17px;}

  /* Keep the approved CTA prominent, but bring it closer to the split section. */
  .cta-section{padding-block:0 72px;}
  .cta-band{padding:48px 44px;}

  /* Contact + footer finish with a tighter premium rhythm. */
  .contact{padding-block:72px;}
  .contact .section-head{margin-bottom:38px;}
  .contact-grid{gap:44px;}
  footer{padding-top:60px;}
  .footer-grid{padding-bottom:44px;}
}

@media (max-width: 980px) and (min-width: 641px){
  section{padding-block:64px;}
  .section-head{margin-bottom:36px;}
  .split-grid{gap:34px;}
  .cta-section{padding-block:0 64px;}
  .contact-grid{gap:36px;}
}

@media (max-width: 640px){
  section{padding-block:52px;}
  .section-head{margin-bottom:30px;}
  .about,.services,.why,.split,.contact{padding-block:52px;}
  .cta-section{padding-block:0 52px;}
}

/* ==========================================================
   V3.3 — Final Hero / Header / Responsive Polish
   ========================================================== */
@media (min-width: 981px){
  :root{--header-h:76px;}
  .nav-row{gap:18px;}
  .brand{height:46px;}
  .nav-menu{gap:26px;}
  header.site-header.is-scrolled .nav-row{height:70px;}
  header.site-header.is-scrolled .brand{height:42px;}

  /* Give the approved MAWIL visual a little more presence and align it
     with the headline/lead block without letting it dominate the hero. */
  .hero-grid{grid-template-columns:1.02fr .98fr;gap:48px;padding-block:60px 92px;}
  .hero-visual{transform:translateY(-18px);}
  .hero-frame{max-width:520px;margin-inline-start:auto;}
  .hero-copy h1{font-size:clamp(34px,4vw,54px);}
  .hero-copy p.lead{max-width:54ch;margin:20px 0 30px;}
  .hero-cta{margin-bottom:34px;}
}

@media (max-width: 980px){
  :root{--header-h:72px;}
  .nav-row{height:72px;}
  .brand{height:43px;}
  .hero-grid{gap:30px;}
  .hero-visual{transform:none;}
  .hero-frame{max-width:390px;}
  .hero-copy{text-align:center;}
  .hero-copy p.lead{margin-inline:auto;}
  .hero-cta,.hero-trust{justify-content:center;}
}

@media (max-width: 640px){
  :root{--header-h:66px;--microbar-h:34px;}
  .nav-row{height:66px;padding-inline:2px;}
  .brand{height:39px;}
  .hero-grid{padding-block:32px 36px;gap:28px;}
  .hero-frame{max-width:min(88vw,360px);}
  .hero-copy h1{font-size:clamp(30px,9vw,39px);line-height:1.42;}
  .hero-copy p.lead{font-size:16px;line-height:1.8;margin:18px auto 26px;}
  .hero-trust{gap:14px 20px;padding-top:22px;justify-content:flex-start;text-align:start;}
  .hero-trust .item{font-size:13px;}
}

/* ==========================================================
   V3.3.1 — Approved hero visual size/position adjustment
   Desktop only: approximately +1.5 cm horizontal presence,
   +1 cm upward, while keeping the lower edge nearly unchanged.
   ========================================================== */
@media (min-width: 981px){
  /* Final desktop hero alignment: keep the approved size and lift the visual
     so the full frame is visible in the opening viewport and its lower edge
     aligns more closely with the end of the lead paragraph. */
  .hero-visual{transform:translateY(-112px);}
  .hero-frame{max-width:577px;}
}

/* ==========================================================
   V3.3.3 — Hero visual final vertical alignment
   Raise the existing visual card only; keep its approved size.
   ========================================================== */
@media (min-width: 981px){
  .hero-visual{
    transform:translateY(-145px) !important;
  }
}


/* ==========================================================
   V3.3.4 — Final requested desktop hero sizing
   Expand the visual ~2cm on each horizontal side and ~2cm upward,
   while preserving the current lower edge position.
   ========================================================== */
@media (min-width: 981px){
  .hero-frame{
    width:728px !important;
    max-width:none !important;
    margin-inline:auto !important;
  }
  .hero-visual{
    transform:translateY(-230px) !important;
  }
}

/* ==========================================================
   V3.4 FINAL — Desktop hero visual placement
   Keep the approved expanded size; move the visual down ~1 cm only.
   ========================================================== */
@media (min-width: 981px){
  .hero-visual{
    transform:translateY(-192px) !important;
  }
}