:root{
  --olive:#666b53; --sand:#dbd8cd; --bark:#635f4e; --gold:#d3b45e;
  --bg:#f3f1ea; --paper:#e7e4d9; --ink:#2f3026; --muted:#5d5e50; --line:#cbc7b8; --accent:#8a6f1f; --logo:#666b53; --bar:#f3f1ea;
  --f:'Fahkwang','IBM Plex Sans Arabic',system-ui,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#1f2119;--paper:#2a2c22;--ink:#eceade;--muted:#b5b3a3;--line:#3d3f32;--accent:#d3b45e;--logo:#dbd8cd;--bar:#1f2119}
}
:root[data-theme="dark"]{--bg:#1f2119;--paper:#2a2c22;--ink:#eceade;--muted:#b5b3a3;--line:#3d3f32;--accent:#d3b45e;--logo:#dbd8cd;--bar:#1f2119}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.7;font-weight:400}
html[lang="ar"] body{line-height:2;font-weight:300}
h1,h2,h3{font-family:var(--f);font-weight:500;line-height:1.25;margin:0}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{font-weight:600}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* top bar */
.bar{background:var(--bar);display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px clamp(20px,5vw,64px)}
.logo{display:block;width:clamp(120px,16vw,170px);aspect-ratio:700/181;background:var(--logo);
  -webkit-mask:url(logo-mask.png) center/contain no-repeat;mask:url(logo-mask.png) center/contain no-repeat}
.actions{display:flex;align-items:center;gap:12px}
.lang{background:transparent;border:1px solid var(--line);color:var(--ink);font:inherit;font-size:15px;line-height:1.4;padding:7px 18px;border-radius:99px;cursor:pointer}
.lang:hover{border-color:var(--olive)}
.call{display:inline-flex;align-items:center;gap:8px;background:var(--olive);color:#f5f3ea;text-decoration:none;font-size:15px;line-height:1.4;padding:8px 20px;border-radius:99px}
.call svg{width:17px;height:17px}
.call:hover{background:var(--bark)}
@media (max-width:520px){.call span{display:none}.call{padding:9px 11px}}

/* banner carousel */
.banners{position:relative;background:var(--sand)}
.slides{position:relative;aspect-ratio:1800/845;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;display:block}
.slide.on{opacity:1;z-index:1}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.dots{position:absolute;z-index:2;bottom:14px;inset-inline:0;display:flex;justify-content:center;gap:10px}
.dots button{width:11px;height:11px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.65);box-shadow:0 0 0 1px rgba(60,60,40,.35);cursor:pointer}
.dots button[aria-current="true"]{background:var(--olive);box-shadow:0 0 0 2px #fff}
.nb{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(243,241,234,.85);color:#3a3c2e;display:grid;place-items:center}
.nb:hover{background:#fff}
.nb svg{width:20px;height:20px}
.nb.prev{left:14px}.nb.next{right:14px}
@media (max-width:640px){.nb{display:none}.dots{bottom:8px}}
@media (prefers-reduced-motion:reduce){.slide{transition:none}html{scroll-behavior:auto}}

/* sections */
.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
section{padding:clamp(60px,9vw,110px) 0}
.about{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,88px);align-items:start}
.about h2{font-size:clamp(32px,4.4vw,52px)}
.about .rule{width:64px;height:3px;background:var(--gold);margin-top:22px;border-radius:2px}
.about .body{display:grid;gap:22px;max-width:62ch}
.about .body p:first-child{font-size:1.14em;font-weight:500}
html[lang="ar"] .about .body p:first-child{font-weight:400}
@media (max-width:820px){.about{grid-template-columns:1fr}}

.services{background:var(--paper)}
.services h2,.why h2{font-size:clamp(30px,4vw,46px)}
.services .lead{margin-top:14px;color:var(--muted);max-width:52ch}
.svc{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.svc li{padding:30px 0 8px;padding-inline-end:24px;display:grid;gap:16px;justify-items:start;align-content:start}
.svc svg{width:44px;height:44px;stroke:var(--accent);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.svc h3{font-size:22px}
@media (max-width:900px){.svc{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.svc{grid-template-columns:1fr}}

.why-grid{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.why-grid div{border-inline-start:3px solid var(--gold);padding-inline-start:18px}
.why-grid h3{font-size:21px;margin-bottom:8px}
.why-grid p{color:var(--muted);font-size:15.5px;line-height:1.7}
html[lang="ar"] .why-grid p{line-height:1.9}
@media (max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.why-grid{grid-template-columns:1fr}}

.vision{background:var(--bark);color:#f3f1e8;text-align:center}
.vision p{font-size:clamp(22px,3vw,34px);line-height:1.6;font-weight:400;max-width:26em;margin:0 auto}
html[lang="ar"] .vision p{line-height:1.9;font-weight:400}
.vision small{display:block;margin-bottom:22px;font-size:17px;color:var(--gold);font-weight:500}
.vision svg{width:54px;height:54px;margin:0 auto 20px;display:block}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.contact h2{font-size:clamp(30px,4vw,46px);margin-bottom:22px}
.contact address{font-style:normal;color:var(--muted);max-width:40ch}
.phone-card{background:var(--olive);color:#f3f1e8;border-radius:22px;padding:36px;display:grid;gap:8px;justify-items:start}
.phone-card span{opacity:.9}
.phone-card a.num{font-size:clamp(38px,6vw,56px);font-weight:600;text-decoration:none;line-height:1.2;direction:ltr;unicode-bidi:isolate}
.cta{display:inline-flex;margin-top:18px;background:var(--gold);color:#2b2814;text-decoration:none;font-weight:500;padding:13px 30px;border-radius:99px;font-size:17px;line-height:1.4;transition:background .2s}
.cta:hover{background:#e0c574}
@media (max-width:760px){.contact{grid-template-columns:1fr}}


/* app + whatsapp */
.app{background:var(--paper)}
.app .wrap{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,5vw,72px);align-items:center}
.app h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:12px}
.app p{color:var(--muted);max-width:44ch}
.stores{display:grid;gap:12px;justify-items:stretch;min-width:250px}
.stores .cta{margin-top:0;justify-content:center}
.store{display:flex;align-items:center;gap:12px;border:1px solid var(--olive);color:var(--ink);text-decoration:none;padding:11px 20px;border-radius:14px;font-weight:500;line-height:1.3;transition:background .2s}
.store:hover{background:rgba(102,107,83,.12)}
.store svg{width:26px;height:26px;fill:currentColor;flex:none}
.store small{display:block;font-size:12px;font-weight:300;opacity:.8}
@media (max-width:760px){.app .wrap{grid-template-columns:1fr}.stores{min-width:0}}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.btns .cta{margin-top:0}
.cta.wa{background:#25d366;color:#0b2e17;display:inline-flex;align-items:center;gap:10px}
.cta.wa:hover{background:#3ee07c}
.cta.wa svg{width:22px;height:22px;flex:none}
.wa-float{position:fixed;z-index:20;inset-inline-end:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:58px;height:58px;border-radius:50%;background:#25d366;color:#0b2e17;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.28);transition:transform .2s}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:30px;height:30px}

footer{background:#4d5240;color:#dbd8cd;padding:40px 0 34px;font-size:15px;text-align:center}
.powered{display:block;margin:0 auto 18px;width:210px;height:auto}