/* مِتر — a measured drawing: black bands alternate with paper sections; a ruler edge marks section breaks. */
:root{
  --ink:#0E0E0E; --paper:#FFFFFF; --stone:#F2F1EE; --line:#D9D8D4; --muted:#55534F;
  --band:#0E0E0E; --band-fg:#FFFFFF; --band-muted:#BDBCB8; --band-line:#3A3A38; --band-soft:#1E1E1D;
  --green:#2E9E44; --red:#E2362B; --focus:#2E9E44; --err:#C62F25;
  --show-light:block; --show-dark:none;
  --display:'Alexandria','Segoe UI',Tahoma,sans-serif;
  --body:'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;
  --gutter:clamp(16px,5vw,64px); --max:1180px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --ink:#F3F2EF; --paper:#121211; --stone:#1B1B1A; --line:#2E2E2C; --muted:#A9A7A2;
  --band:#000000; --band-fg:#FFFFFF; --band-muted:#A9A7A2; --band-line:#2E2E2C; --band-soft:#161615; --err:#FF8A80;
  --show-light:none; --show-dark:block; color-scheme:dark}}
:root[data-theme="dark"]{
  --ink:#F3F2EF; --paper:#121211; --stone:#1B1B1A; --line:#2E2E2C; --muted:#A9A7A2;
  --band:#000000; --band-fg:#FFFFFF; --band-muted:#A9A7A2; --band-line:#2E2E2C; --band-soft:#161615; --err:#FF8A80;
  --show-light:none; --show-dark:block; color-scheme:dark}
*{box-sizing:border-box}
html{direction:rtl;scroll-behavior:smooth}
[hidden]{display:none!important}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.7;margin:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.15}
p{margin:0}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.logo-light{display:var(--show-light)} .logo-dark{display:var(--show-dark)}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--band);color:var(--band-fg);border-bottom:1px solid var(--band-line)}
.site-head .wrap{display:flex;align-items:center;gap:20px;padding-block:12px}
.site-head .brand img{width:92px;height:auto;display:block}
.nav{display:flex;gap:20px;margin-inline-start:auto;font-size:15px}
.nav a{text-decoration:none;color:var(--band-muted)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--band-fg)}
.menu{display:none;margin-inline-start:auto;position:relative}
.menu summary{list-style:none;cursor:pointer;border:1px solid var(--band-line);padding:6px 12px;font-size:14px}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;inset-inline-end:0;top:calc(100% + 10px);background:var(--band);border:1px solid var(--band-line);display:flex;flex-direction:column;min-width:210px;padding:8px}
.menu nav a{padding:10px 12px;text-decoration:none;color:var(--band-fg)}
@media (max-width:960px){.nav{display:none}.menu{display:block}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:600;font-size:16px;padding:12px 22px;text-decoration:none;border:2px solid currentColor;cursor:pointer;background:transparent;color:inherit}
.btn-solid{background:var(--band-fg);color:var(--band);border-color:var(--band-fg)}
.btn-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.site-head .btn{padding:8px 16px;font-size:14px}
@media (max-width:520px){.site-head .btn{display:none}}

.ruler{height:22px;background-color:var(--band);background-image:repeating-linear-gradient(to left,var(--band-muted) 0 1px,transparent 1px 12px),repeating-linear-gradient(to left,var(--band-fg) 0 2px,transparent 2px 120px);background-size:100% 10px,100% 22px;background-repeat:no-repeat;background-position:bottom right,bottom right}
.band{background:var(--band);color:var(--band-fg)}
.eyebrow{font-size:14px;letter-spacing:.04em;color:var(--band-muted)}
.tag{font-size:14px;color:var(--muted);letter-spacing:.03em;display:block;margin-bottom:10px}

/* hero */
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-block:72px 64px}
.hero h1{font-size:clamp(46px,7.4vw,96px);font-weight:800;margin-block:14px 20px}
.hero.sub h1{font-size:clamp(38px,6vw,72px)}
.lead{font-size:clamp(17px,2vw,20px);color:var(--band-muted);max-width:38ch}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;font-size:14px;color:var(--band-muted)}
.drawing{width:100%;max-width:100%;height:auto;color:var(--band-fg);direction:ltr}
.drawing .dim{font-family:var(--display);font-size:13px;fill:var(--band-muted)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:40px;padding-block:48px}}
@media (prefers-reduced-motion:no-preference){.drawing .draw{stroke-dasharray:1200;animation:draw 1.6s ease-out both}@keyframes draw{from{stroke-dashoffset:1200}to{stroke-dashoffset:0}}}

/* sections */
section.block{padding-block:88px}
.alt{background:var(--stone)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px;margin-bottom:44px}
.sec-head h2{font-size:clamp(32px,4.4vw,52px);font-weight:800}
.sec-head p{color:var(--muted);max-width:46ch}

/* services */
.services{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid var(--ink)}
.svc{padding:28px 22px 30px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px;min-width:0;text-decoration:none}
.svc + .svc{border-right:1px solid var(--line)}
.svc:first-child{padding-right:0}
.svc svg{width:44px;height:44px}
.svc h3{font-size:22px;font-weight:600}
.svc p{color:var(--muted);font-size:15.5px}
.svc .more{margin-top:auto;font-family:var(--display);font-size:14px;font-weight:600}
.svc:hover .more{text-decoration:underline}
@media (max-width:1000px){.services{grid-template-columns:repeat(2,minmax(0,1fr))}.svc,.svc:first-child{padding-inline:0 18px}.svc + .svc{border-right:0}}
@media (max-width:520px){.services{grid-template-columns:1fr}}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.step{padding-inline-end:24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.step .n{font-family:var(--display);font-weight:800;font-size:56px;line-height:1}
.step h3{font-size:20px;font-weight:600}
.step p{color:var(--muted);font-size:15.5px}
.step .tick{height:14px;border-top:2px solid var(--ink);position:relative;margin-block:6px}
.step .tick::before{content:"";position:absolute;right:0;top:-8px;width:2px;height:14px;background:var(--ink)}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;row-gap:40px}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

/* split band */
.split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding-block:80px}
.split h2{font-size:clamp(34px,5vw,60px);font-weight:800}
.split p{color:var(--band-muted);margin-top:18px;max-width:42ch}
.incl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.incl li{display:flex;gap:12px;align-items:center;padding-block:14px;border-bottom:1px solid var(--band-line);font-size:17px}
.incl svg{flex-shrink:0;color:var(--green)}
@media (max-width:860px){.split .wrap{grid-template-columns:1fr}}
@media (max-width:420px){.incl{grid-template-columns:1fr}}

/* cards */
.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.why > div{background:var(--stone);padding:28px;display:flex;flex-direction:column;gap:10px}
.alt .why > div{background:var(--paper)}
.why strong{font-family:var(--display);font-size:20px;font-weight:600}
.why span{color:var(--muted);font-size:15.5px}
.why .mm{font-family:var(--display);font-weight:800;font-size:40px;line-height:1;color:var(--ink)}
@media (max-width:980px){.why{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.why{grid-template-columns:1fr}}

/* spec table */
.spec{width:100%;border-collapse:collapse;font-size:16px}
.spec-wrap{overflow-x:auto}
.spec th,.spec td{text-align:right;padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{font-family:var(--display);font-weight:600;border-bottom:2px solid var(--ink);white-space:nowrap}
.spec td:first-child{font-family:var(--display);font-weight:600;white-space:nowrap}
.sw{display:inline-block;width:18px;height:18px;vertical-align:-3px;margin-inline-end:8px;border:1px solid var(--line)}

/* gallery */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filters button{font:inherit;font-size:15px;border:1px solid var(--line);background:none;color:var(--ink);padding:8px 16px;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:900px){.gallery{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.gallery{grid-template-columns:1fr}}
.proj{display:flex;flex-direction:column;gap:10px;min-width:0}
.ba{position:relative;aspect-ratio:4/3;max-width:100%;overflow:hidden;background:var(--stone)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 var(--cut,50%))}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--cut,50%);width:2px;background:#FFFFFF;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.ba .lbl{position:absolute;top:10px;font-size:13px;padding:2px 10px;background:#0E0E0E;color:#FFFFFF;pointer-events:none}
.ba .lbl.l{left:10px}.ba .lbl.r{right:10px}
.proj h3{font-size:18px;font-weight:600}
.proj span{color:var(--muted);font-size:14px}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.reviews{grid-template-columns:1fr}}
.rev{border-top:2px solid var(--ink);padding-top:18px;display:flex;flex-direction:column;gap:12px}
.rev .stars{color:var(--green);letter-spacing:2px}
.rev p{font-size:17px}
.rev b{font-family:var(--display);font-weight:600;font-size:15px}

/* faq */
.faq{border-top:2px solid var(--ink);max-width:880px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding-block:20px;font-family:var(--display);font-weight:600;font-size:19px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:26px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{padding-bottom:22px;color:var(--muted);max-width:65ch}

/* forms (on band) */
.book .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;padding-block:80px}
.book h2{font-size:clamp(34px,5vw,56px);font-weight:800}
.book .side p{color:var(--band-muted);margin-top:16px;max-width:38ch}
.contact-list{margin-top:32px;display:flex;flex-direction:column;gap:16px}
.contact-list div{display:flex;flex-direction:column;border-top:1px solid var(--band-line);padding-top:12px}
.contact-list small{color:var(--band-muted);font-size:13px}
.contact-list b{font-family:var(--display);font-weight:600;font-size:18px}
.copy{font:inherit;font-size:13px;color:var(--band-muted);background:none;border:1px solid var(--band-line);padding:2px 10px;cursor:pointer;margin-inline-start:10px}
form.f{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-content:start}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.band label,.band .lab{font-size:14px;color:var(--band-muted)}
.band input,.band select,.band textarea{font:inherit;font-size:16px;color:var(--band-fg);background:transparent;border:0;border-bottom:2px solid var(--band-line);padding:10px 2px;border-radius:0;width:100%}
.band select option{color:#0E0E0E}
.band input:focus,.band select:focus,.band textarea:focus{outline:none;border-bottom-color:var(--band-fg)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{color:var(--band-fg);border:1px solid var(--band-line);padding:8px 14px;cursor:pointer;font-size:15px}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips label:has(input:checked){background:var(--band-fg);color:var(--band);border-color:var(--band-fg)}
.chips label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.err{color:#FF8A80;font-size:14px;grid-column:1/-1}
.result{grid-column:1/-1;border:1px solid var(--band-line);padding:18px;display:flex;flex-direction:column;gap:12px}
.result pre{white-space:pre-wrap;font-family:var(--body);font-size:14.5px;margin:0;color:var(--band-muted)}
@media (max-width:860px){.book .wrap{grid-template-columns:1fr}}
@media (max-width:480px){form.f{grid-template-columns:1fr}}

/* configurator */
.cfg{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
@media (max-width:900px){.cfg{grid-template-columns:1fr}}
.cfg-preview{position:sticky;top:90px;display:flex;flex-direction:column;gap:16px;min-width:0}
.cfg-preview svg{width:100%;height:auto;background:var(--stone);direction:ltr}
.cfg-steps{display:flex;flex-direction:column;gap:34px;min-width:0}
.cfg-steps fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.cfg-steps legend{font-family:var(--display);font-weight:600;font-size:20px;padding:0;margin-bottom:14px;display:flex;gap:12px;align-items:baseline}
.cfg-steps legend .n{font-weight:800;color:var(--muted)}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.opt{position:relative;border:1px solid var(--line);padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:8px;font-size:15px}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.opt .code{font-family:var(--display);font-weight:600;font-size:13px;color:var(--muted)}
.opt .chip{height:46px;border:1px solid var(--line)}
.opt svg{width:100%;height:56px;color:var(--ink)}
.summary{border-top:2px solid var(--ink);padding-top:14px;display:flex;flex-direction:column;gap:6px;font-size:15px}
.summary div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-block:6px}
.summary span{color:var(--muted)}
.note{font-size:13.5px;color:var(--muted)}

/* floating */
.float{position:fixed;inset-inline-start:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;flex-direction:column;gap:10px}
.float a{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.25);text-decoration:none}
.float .wa{background:#25D366;color:#FFFFFF}
.float .call{background:var(--band);color:var(--band-fg);border:1px solid var(--band-line)}
@media (min-width:821px){.float .call{display:none}}

/* footer */
.foot{border-top:1px solid var(--line)}
.foot .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:24px 48px;align-items:start;padding-block:44px 96px;font-size:14px;color:var(--muted)}
.foot .brand img{width:120px;height:auto}
.foot .cols{display:flex;flex-wrap:wrap;gap:8px 32px}
.foot b{color:var(--ink);font-weight:600}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px;grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px}
.foot nav a{text-decoration:none}
@media (max-width:760px){.foot .wrap{grid-template-columns:1fr}}

/* type illustrations */
.ill{width:100%;height:100%;display:block;direction:ltr}
.ill polygon,.ill rect,.ill path,.ill line,.ill circle{stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ill .t{fill:var(--paper)} .ill .f{fill:var(--ill-f)} .ill .s{fill:var(--ill-s)} .ill .ct{fill:var(--ill-ct)}
.ill .wl{fill:none;stroke:var(--line)!important;stroke-dasharray:4 4}
.ill .in{fill:none;stroke-width:1!important;opacity:.7}
.ill .ln{stroke-width:1.1}
.ill .hd{stroke-width:3!important;stroke-linecap:round}
.ill .gr{stroke-width:2.4!important;opacity:.75}
.ill .kn{fill:var(--ink)}
.ill .dash{fill:none;stroke-dasharray:6 5;stroke-width:1!important}
.ill .dim,.ill .ar{fill:none;stroke:var(--green)!important;stroke-width:1.4!important}
:root{--ill-f:#ECEBE7;--ill-s:#D5D3CE;--ill-ct:#BDBBB5}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ill-f:#242423;--ill-s:#1A1A19;--ill-ct:#3A3A38}}
:root[data-theme="dark"]{--ill-f:#242423;--ill-s:#1A1A19;--ill-ct:#3A3A38}
.types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}
.types.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.types,.types.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.types,.types.four{grid-template-columns:1fr}}
.type{display:flex;flex-direction:column;gap:10px;min-width:0}
.type figure{margin:0;aspect-ratio:4/3;max-width:100%;background:var(--stone);display:flex;align-items:center;justify-content:center;padding:18px;position:relative;overflow:hidden}
.alt .type figure{background:var(--paper)}
.type figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.type figcaption{position:absolute;bottom:8px;inset-inline-start:10px;font-size:12px;color:var(--muted)}
.type figure img + figcaption{color:#FFFFFF;background:rgba(0,0,0,.55);padding:1px 8px}
.type h3{font-size:21px;font-weight:600}
.type p{color:var(--muted);font-size:15.5px}
.type .fit{font-size:14px;color:var(--ink);border-top:1px solid var(--line);padding-top:8px}
.type .fit b{font-weight:600}
.type .pick{align-self:flex-start;font-family:var(--display);font-weight:600;font-size:14px;text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:2px;margin-top:auto}

/* articles */
.prose{max-width:70ch;font-size:17.5px;display:flex;flex-direction:column;gap:16px}
.prose h2{font-size:26px;font-weight:600;margin-top:18px}
.prose ul,.prose ol{margin:0;padding-inline-start:1.3em;display:flex;flex-direction:column;gap:8px}
.prose li::marker{color:var(--muted)}
.tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.tips{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tips{grid-template-columns:1fr}}
.tipcard{display:flex;flex-direction:column;gap:10px;padding:24px;background:var(--stone);text-decoration:none;min-width:0}
.tipcard h3{font-size:21px;font-weight:600}
.tipcard p{color:var(--muted);font-size:15.5px}
.tipcard .more{margin-top:auto;font-family:var(--display);font-weight:600;font-size:14px}
.tipcard:hover h3{text-decoration:underline}
.tipcta{border-top:2px solid var(--ink);padding-top:20px;margin-top:20px}
/* track */
.trackf{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end}
.trackf label{font-size:14px;color:var(--muted)}
.trackf input{font:inherit;padding:11px 12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);width:100%}
@media (max-width:640px){.trackf{grid-template-columns:1fr}}
.stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0}
.stages .st{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--muted);position:relative;padding-top:4px}
.stages .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);background:var(--paper);position:relative;z-index:1}
.stages .st::before{content:"";position:absolute;top:12px;right:0;left:0;height:2px;background:var(--line)}
.stages .done .dot{background:var(--ink);border-color:var(--ink)} .stages .done::before{background:var(--ink)}
.stages .now .dot{background:var(--green);border-color:var(--green);box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 25%,transparent)}
.stages .now{color:var(--ink);font-weight:600}
@media (max-width:640px){.stages{grid-template-columns:1fr;gap:14px}.stages .st{flex-direction:row;align-items:center}.stages .st::before{display:none}}
.tnote{background:var(--stone);padding:14px 16px}