/* آريا تيك | الهوية v2 (brand/BRAND_V2/BRAND.md, tokens.json). The tokens below carry the names of tokens.json; the light
   theme is the page's, the navy one a class for the navy sections (.theme-navy). The fonts are local files
   (static/fonts/v2/fonts.css): Alexandria for headings and buttons, Noto Kufi Arabic for text, Montserrat for Latin and
   numbers, Arya Dots 2 for the one hero price of a screen. static/brand-v2.css, loaded last, is the skin itself. */
:root{
  --cta-bg:#167565;--cta-ink:#FFFFFF;--cta-hover:#115E51;--cta-off:#8FB8B0;       /* 1.53.0, the owner: «أخضر غامق بكتابة بيضاء، من ألوان الهوية» — the main order button, wherever it stands, and nothing else */
  --navy:#1F2A4B;--mint:#54BAA7;--charcoal:#1E1E1E;--mint-ink:#167565;--mint-soft:#E0F2EE;--surface:#F1F2F2;--surface-post:#DCDCDE;--surface-raised:#FFFFFF;--surface-navy:#1F2A4B;--ink:#1F2A4B;--ink-muted:#4F5A73;--on-mint:#1F2A4B;--on-navy:#FFFFFF;--line:#DDE1E6;--border-strong:#7A8499;--focus:#167565;--gray-shape:#CBCBCB;--offer:#CF5555;--offer-ink:#B23F3F;--danger:#B42318;--warning:#A15C07;--dot-grey-1:#E0E0E2;--dot-grey-2:#E3E3E5;--dot-grey-3:#E6E6E8;--dot-navy-1:#25315A;--dot-navy-2:#29355F;--dot-navy-3:#2D3A65;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;
  --radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-pill:999px;
  --shadow-card:0 2px 12px rgba(18,40,76,0.08);
  --font-heading:"Alexandria","Montserrat",system-ui,sans-serif;--font-body:"Montserrat","Noto Kufi Arabic",system-ui,sans-serif;--font-latin:"Montserrat",system-ui,sans-serif;--font-accent:"Arya Dots 2","Montserrat",sans-serif;
  /* 1.61.0, the scale of type (the owner: «الخطوط أهم شي عندي لازم تتعالج أحجامها»): every size of text in the stylesheets is one of
     these. A phone first; a wide screen has its own steps below. Order is by weight and colour before size, and one screen
     has one hero number. Under 13px there is only what is drawn inside a picture (static/villa-hud.css). brand/DESIGN_TOKENS.md, 2. */
  --fs-h1:24px;--lh-h1:34px;--fs-h2:20px;--lh-h2:30px;--fs-h3:16px;--lh-h3:25px;
  --fs-item:15px;--lh-item:24px;--fs-body:15px;--lh-body:26px;--fs-ui:14px;--lh-ui:22px;--fs-small:13px;--lh-small:21px;
  --fs-btn:16px;--lh-btn:24px;--fs-btn-sm:14px;--lh-btn-sm:22px;--fs-num:16px;--lh-num:22px;--fs-num-lg:18px;--lh-num-lg:24px;
  --fs-price-card:34px;--lh-price-card:30px;--fs-price-hero:44px;--lh-price-hero:38px;--fs-price-xl:58px;--lh-price-xl:50px;
  --header-h:56px;                 /* 1.62.0, the owner: «الهيدر الموقع خله 56px»: the bar at the top; what stops or sticks under it is counted from it */
  --fs-field:16px;                  /* what is typed into: never under 16px on a phone, or the iPhone zooms the page */
  /* the names the older rules use, pointing at the tokens */
  --navy-900:var(--navy);--muted:var(--ink-muted);--faint:var(--ink-muted);
  --teal:var(--mint);--teal-700:var(--mint-ink);--teal-800:var(--mint-ink);--teal-soft:var(--mint-soft);--teal-line:#BFE3DB;
  --bg:var(--surface);--line-strong:var(--border-strong);--sand:var(--surface);--sand-2:var(--surface-post);--tone-plain:var(--surface);
  --amber:var(--warning);--amber-soft:#FFF4DE;
  --r-sm:var(--radius-sm);--r:var(--radius-lg);--r-lg:var(--radius-lg);--card-r:var(--radius-lg);
  --shadow:var(--shadow-card);--shadow-up:0 -2px 12px rgba(18,40,76,0.08);
  --gutter:16px;--nav-h:64px;
}
@media (min-width:900px){:root{--header-h:64px;--fs-h1:28px;--lh-h1:40px;--fs-h2:24px;--lh-h2:34px;--fs-h3:18px;--lh-h3:28px;--fs-item:16px;--lh-item:26px;--fs-body:16px;--lh-body:28px;--fs-ui:15px;--lh-ui:24px;--fs-small:14px;--lh-small:22px;--fs-num:17px;--lh-num:24px;--fs-num-lg:20px;--lh-num-lg:26px;--fs-price-card:38px;--lh-price-card:34px;--fs-price-hero:52px;--lh-price-hero:44px;--fs-price-xl:64px;--lh-price-xl:56px}}
.theme-navy{--navy:#1F2A4B;--mint:#54BAA7;--charcoal:#1E1E1E;--mint-ink:#54BAA7;--mint-soft:#22405A;--surface:#151D35;--surface-post:#151D35;--surface-raised:#1F2A4B;--surface-navy:#2B3963;--ink:#FFFFFF;--ink-muted:#AEB6C8;--on-mint:#151D35;--on-navy:#FFFFFF;--line:#2E3A5E;--border-strong:#6E7A96;--focus:#54BAA7;--gray-shape:#3A4566;--offer:#FF8A7A;--offer-ink:#FF8A7A;--danger:#FF8A7A;--warning:#F5B84D;--dot-grey-1:#E0E0E2;--dot-grey-2:#E3E3E5;--dot-grey-3:#E6E6E8;--dot-navy-1:#25315A;--dot-navy-2:#29355F;--dot-navy-3:#2D3A65;--shadow-card:0 2px 12px rgba(0,0,0,0.35)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p{margin:0}
small{font-size:var(--fs-small)}          /* 1.61.0: «smaller» of the browser would take a 13px line under the floor */
h1,h2,h3{color:var(--navy);line-height:1.4;font-weight:600}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
svg{display:block}
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}
.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:760px}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* review strip — preview-only, removed in the full build */
.review{background:var(--navy-900);color:#C9D4E5;font-size:var(--fs-small)}
.review .wrap{display:flex;align-items:center;gap:6px;min-height:40px;flex-wrap:wrap;padding-block:4px}
.review b{color:#fff;font-weight:600;margin-inline-end:4px}
.review a{padding:3px 10px;border-radius:99px;border:1px solid rgba(255,255,255,.18)}
.review a[aria-current]{background:var(--teal);border-color:var(--teal);color:var(--navy-900);font-weight:600}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:12px;font-weight:600;font-size:var(--fs-btn);transition:transform .15s,background .15s,box-shadow .15s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--cta-bg);color:var(--cta-ink)}
.btn-primary:hover{background:var(--cta-hover)}
.btn-primary:disabled,.btn-primary[aria-disabled="true"]{background:var(--cta-off);color:var(--cta-ink);cursor:not-allowed}
.btn-mint{background:var(--teal);color:var(--navy)}
.btn-mint:hover{background:#49A998}
.btn-ghost{background:var(--surface-raised);color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn-light{background:#fff;color:var(--navy)}
.btn-sm{min-height:40px;padding:0 14px;font-size:var(--fs-btn-sm);border-radius:12px}
.btn .ico{width:20px;height:20px}

/* top bar (site + portal share the skeleton: menu on the right) */
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:10px;height:var(--header-h)}
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--navy)}
.icon-btn:hover{background:var(--bg)}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--navy);font-size:var(--fs-h3)}
.brand img{height:42px;width:auto}

.topbar .spacer{flex:1}
.desk-nav{display:none;gap:4px;font-weight:600;font-size:var(--fs-small);color:var(--ink)}
.desk-nav a{padding:8px 12px;border-radius:10px;white-space:nowrap}
.desk-nav a:hover{background:var(--bg)}
.pill{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 13px;border-radius:12px;font-size:var(--fs-small);font-weight:600;background:var(--teal-soft);color:var(--teal-800)}
.pill .ico{width:18px;height:18px}
.title-mid{font-weight:700;color:var(--navy);font-size:var(--fs-h3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* back row — same position on every inner page */
.backrow{background:var(--surface-raised);border-bottom:1px solid var(--line)}
.backrow a{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-weight:600;font-size:var(--fs-small);color:var(--navy)}
.backrow .ico{width:20px;height:20px;color:var(--teal-700)}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(31,42,75,.45);z-index:40;opacity:0;pointer-events:none;transition:opacity .2s}
.drawer{position:fixed;inset-block:0;right:0;width:min(86vw,340px);background:var(--surface-raised);z-index:41;transform:translateX(105%);transition:transform .25s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;padding:14px 14px 24px;overflow-y:auto}
.menu-open .scrim{opacity:1;pointer-events:auto}
.menu-open .drawer{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 12px;border-bottom:1px solid var(--line);margin-bottom:8px}
.drawer a{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 10px;border-radius:12px;font-weight:600;color:var(--ink)}
.drawer a:hover,.drawer a[aria-current]{background:var(--bg);color:var(--navy)}
.drawer a .ico{color:var(--teal-700)}
.drawer .group{font-size:var(--fs-small);color:var(--faint);font-weight:600;padding:14px 10px 4px}
.soon{font-size:var(--fs-small);font-weight:600;color:var(--amber);background:var(--amber-soft);border-radius:7px;padding:1px 9px;margin-inline-start:auto}
.live{font-size:var(--fs-small);font-weight:600;color:var(--teal-800);background:var(--teal-soft);border-radius:7px;padding:1px 9px;margin-inline-start:auto}

/* section heading with the logo's teal bar */
.sec{padding-block:34px}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:16px}
.sec-head h2{font-size:var(--fs-h2)}
.sec-head h2::before{content:"";display:block;width:40px;height:8px;margin-bottom:8px;background:radial-gradient(circle at 4px 50%,var(--teal) 4px,transparent 4.5px),linear-gradient(var(--navy),var(--navy)) right center/calc(100% - 11px) 3px no-repeat}
.sec-head a{font-size:var(--fs-item);font-weight:600;color:var(--teal-700);white-space:nowrap}
.lead{color:var(--muted);font-size:var(--fs-body)}

/* hero */
.hero{position:relative;background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 2px 2px,rgba(84,186,167,.55) 1.6px,transparent 2px) 0 0/16px 16px;-webkit-mask-image:linear-gradient(to left,transparent 45%,#000 100%);mask-image:linear-gradient(to left,transparent 45%,#000 100%);opacity:.5;pointer-events:none}
.hero .wrap{position:relative;z-index:1;padding-block:26px 8px;display:grid;gap:18px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-small);font-weight:600;color:var(--teal-800)}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px var(--teal-soft)}
.hero h1{font-size:var(--fs-h1);font-weight:700;line-height:1.3;margin-top:8px}
.hero h1 em{font-style:normal;color:var(--teal-700)}
.hero p{margin-top:10px;color:var(--muted);font-size:var(--fs-body);max-width:34em}
.cta-row{display:grid;gap:10px;margin-top:18px}
.cta-note{font-size:var(--fs-small);color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:10px}
.cta-note .ico{width:16px;height:16px;color:var(--teal-700)}
.hero-art{width:100%;height:auto;max-width:520px;margin-inline:auto}
.wire{stroke-dasharray:4 6;animation:flow 2.4s linear infinite}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out infinite}
@keyframes flow{to{stroke-dashoffset:-20}}
@keyframes pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.1);opacity:0}}

/* service cards */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.svc{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:8px;transition:transform .15s,box-shadow .15s,border-color .15s}
.svc:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--teal-line)}
.svc .badge-ico{width:42px;height:42px;border-radius:12px;background:var(--teal-soft);color:var(--teal-800);display:grid;place-items:center}
.svc h3{font-size:var(--fs-h3)}
.svc p{font-size:var(--fs-small);color:var(--muted);line-height:1.55}

/* works */
.works{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:10px}
.work{position:relative;border-radius:var(--r);min-height:112px;overflow:hidden;background:
  radial-gradient(circle at 1px 1px,rgba(255,255,255,.16) 1.2px,transparent 1.6px) 0 0/14px 14px,var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:12px}
.work:first-child{grid-row:span 2}
.work.alt{background:radial-gradient(circle at 1px 1px,rgba(31,42,75,.22) 1.2px,transparent 1.6px) 0 0/14px 14px,var(--teal-soft);color:var(--teal-800)}
.work .ico{width:26px;height:26px;opacity:.85;margin-bottom:auto}
.work b{font-size:var(--fs-body)}
.work span{font-size:var(--fs-small);opacity:.8}

/* how we work */
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;counter-reset:s}
.step{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r);padding:14px;counter-increment:s;position:relative}
.step::before{content:counter(s);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:var(--fs-item);margin-bottom:8px}
.step h3{font-size:var(--fs-h3)}
.step p{font-size:var(--fs-small);color:var(--muted);line-height:1.55}

/* portal teaser */
.teaser{background:var(--navy);border-radius:var(--r-lg);color:#DCE4F1;padding:20px;display:grid;gap:16px;position:relative;overflow:hidden}
.teaser::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.09) 1.2px,transparent 1.6px) 0 0/16px 16px}
.teaser>*{position:relative}
.teaser h2{color:#fff;font-size:var(--fs-h2)}
.teaser p{font-size:var(--fs-body);color:#B9C5D8}
.mini{background:#fff;border-radius:16px;padding:14px;color:var(--ink);box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.mini-top{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-small);color:var(--muted);margin-bottom:8px}
.mini-top b{color:var(--navy);font-size:var(--fs-body)}
.teaser ul{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:var(--fs-body)}
.teaser li{display:flex;gap:8px;align-items:center}
.teaser li .ico{width:18px;height:18px;color:var(--teal)}

/* group brands */
.brand-card{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:10px}
.brand-card header{display:flex;align-items:center;gap:10px}
.brand-card header .badge-ico{width:44px;height:44px;border-radius:12px;background:var(--navy);color:#fff;display:grid;place-items:center}
.brand-card h3{font-size:var(--fs-h3)}
.brand-card header span{font-size:var(--fs-small);color:var(--muted);display:block;line-height:1.2}
.rows{display:grid;gap:0;font-size:var(--fs-body)}
.rows div{display:flex;align-items:center;gap:8px;padding:9px 0;border-top:1px dashed var(--line)}
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.stack>*{min-width:0}

/* footer */
.foot{background:var(--navy-900);color:#AEBBD0;margin-top:20px;padding:28px 0 calc(28px + env(safe-area-inset-bottom));font-size:var(--fs-small)}




.ask-ai{display:flex;align-items:center;gap:10px;width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 14px;color:#fff;font-weight:600;text-align:start}
.ask-ai .ico{color:var(--teal)}
.ask-ai small{display:block;font-weight:500;color:#AEBBD0;font-size:var(--fs-small)}
.legal{border-top:1px solid rgba(255,255,255,.1);margin-top:18px;padding-top:14px;font-size:var(--fs-small);color:#7F8DA6}

/* ───────── portal ───────── */
.app{padding-bottom:calc(var(--nav-h) + 22px + env(safe-area-inset-bottom))}
.card{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.page-head{padding-block:16px 12px}
.page-head .kicker{font-size:var(--fs-small);color:var(--muted);font-weight:600}
.page-head h1,.page-head .h1{font-size:var(--fs-h1)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-small);font-weight:600;border-radius:8px;padding:2px 10px;background:var(--bg);color:var(--ink);border:1px solid var(--line)}
.chip.ok{background:var(--teal-soft);color:var(--teal-800);border-color:var(--teal-line)}
.chip.warn{background:var(--amber-soft);color:var(--amber);border-color:#F3DDB0}

/* stage rail — one compact row, no horizontal scroll, line never passes the current stage */
.rail{--n:7;position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin:14px -6px 4px;--p:0}
.rail::before,.rail::after{content:"";position:absolute;top:13px;height:4px;border-radius:4px;inset-inline-start:calc(50%/var(--n));}
.rail::before{width:calc(100% - 100%/var(--n));background:var(--line)}
.rail::after{width:calc((100% - 100%/var(--n)) * var(--p));background:var(--teal-700);transition:width 1s cubic-bezier(.3,.7,.2,1)}
.stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:0 1px;min-width:0}
.dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2.5px solid var(--line-strong);color:transparent;transition:background .3s,border-color .3s,box-shadow .3s}
.dot .ico{width:15px;height:15px;stroke-width:3}
.stage span{font-size:var(--fs-small);font-weight:600;color:var(--faint);line-height:1.2;text-align:center;white-space:nowrap}
.stage.done .dot{background:var(--teal-700);border-color:var(--teal-700);color:#fff}
.stage.done span{color:var(--teal-800)}
.stage.now .dot{border-color:var(--navy);box-shadow:0 0 0 5px rgba(84,186,167,.22)}
.stage.now .dot::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--teal)}
.stage.now span{color:var(--navy);font-weight:700}
.stage[aria-pressed="true"] .dot{outline:2px solid var(--navy);outline-offset:2px}
.rail-cap{font-size:var(--fs-small);color:var(--muted);text-align:center;min-height:22px;margin-top:6px}
.rail-cap b{color:var(--navy)}

.facts{display:grid;gap:0;margin-top:10px}
.fact{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;padding:11px 0;border-top:1px solid var(--line)}
.fact .fi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--teal-soft);color:var(--teal-800)}
.fact .fi.amber{background:var(--amber-soft);color:var(--amber)}
.fact .fi.navy{background:#E9EDF5;color:var(--navy)}
.fact .ico{width:18px;height:18px}
.fact small{display:block;font-size:var(--fs-small);color:var(--muted);font-weight:600;line-height:1.3}
.fact b{display:block;font-size:var(--fs-body);color:var(--navy);line-height:1.5}
.fact em{font-style:normal;font-size:var(--fs-small);color:var(--muted)}

.rowlink{display:flex;align-items:center;gap:12px;width:100%;text-align:start}
.rowlink .thumb{width:46px;height:46px;border-radius:12px;background:var(--navy);color:#fff;display:grid;place-items:center;flex:none}
.rowlink .grow{flex:1;min-width:0}
.rowlink small{display:block;font-size:var(--fs-small);color:var(--muted)}
.rowlink b{display:block;color:var(--navy);font-size:var(--fs-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowlink>.ico{color:var(--faint);width:18px;height:18px}

.pay-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pay-top h2{font-size:var(--fs-h2)}
.amount{font-size:var(--fs-num-lg);font-weight:700;color:var(--navy);line-height:1.2;margin-top:6px}
.amount small{font-size:var(--fs-small);font-weight:600;color:var(--muted);margin-inline-start:4px}
.bar{height:8px;border-radius:8px;background:var(--line);overflow:hidden;margin:10px 0 6px}
.bar i{display:block;height:100%;width:0;background:var(--teal-700);border-radius:8px;transition:width 1s .2s cubic-bezier(.3,.7,.2,1)}
.pay-legend{display:flex;justify-content:space-between;font-size:var(--fs-small);color:var(--muted)}
.receipts{margin-top:10px}
.receipt{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);width:100%;text-align:start}
.receipt .ico{width:18px;height:18px;color:var(--teal-700)}
.receipt span{flex:1;font-size:var(--fs-body)}
.receipt b{font-size:var(--fs-body);color:var(--navy)}
.src{font-size:var(--fs-small);color:var(--faint);margin-top:8px;display:flex;gap:6px;align-items:center}
.src .ico{width:14px;height:14px}

.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{align-content:start;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:6px;text-align:start;transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--teal-line);transform:translateY(-2px)}
.tile .badge-ico{width:40px;height:40px;border-radius:12px;background:var(--teal-soft);color:var(--teal-800);display:grid;place-items:center}
.tile b{color:var(--navy);font-size:var(--fs-body)}
.tile small{color:var(--muted);font-size:var(--fs-small);line-height:1.4}

.tabbar{position:fixed;inset-inline:0;bottom:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar nav{display:grid;grid-template-columns:repeat(5,1fr);max-width:760px;margin-inline:auto;height:var(--nav-h)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:var(--fs-small);font-weight:600;color:var(--faint);position:relative}
.tabbar a[aria-current]{color:var(--teal-800)}
.tabbar a[aria-current]::before{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 4px 4px;background:var(--teal)}

/* ───────── estimate result ───────── */
.est-head{padding-block:16px 6px}
.est-head h1{font-size:var(--fs-h1);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.meta-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:#E9EDF3;border-radius:12px;padding:3px;gap:3px}
.seg button{min-height:40px;border-radius:10px;font-weight:600;font-size:var(--fs-btn);color:var(--muted)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(31,42,75,.15)}
.sys{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sys+.sys{margin-top:10px}
.sys-h{display:flex;align-items:center;gap:12px;width:100%;padding:14px;text-align:start}
.sys-h .badge-ico{width:40px;height:40px;border-radius:12px;background:var(--teal-soft);color:var(--teal-800);display:grid;place-items:center;flex:none}
.sys-h .grow{flex:1;min-width:0}
.sys-h b{display:block;color:var(--navy);font-size:var(--fs-h3)}
.sys-h small{display:block;color:var(--muted);font-size:var(--fs-small);line-height:1.3}
.sys-h .sum{font-weight:700;color:var(--navy);font-size:var(--fs-item);white-space:nowrap}
.sys-h .chev{color:var(--faint);transition:transform .2s;width:18px;height:18px}
.sys[data-open="true"] .chev{transform:rotate(180deg)}
.sys-b{display:none;padding:0 14px 14px}
.sys[data-open="true"] .sys-b{display:block}
.line{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.line .nm{font-size:var(--fs-item);font-weight:600;color:var(--navy);line-height:1.4}
.line .sub{font-size:var(--fs-small);color:var(--muted);line-height:1.4}
.line .price{font-size:var(--fs-item);font-weight:600;color:var(--ink);text-align:end;white-space:nowrap}
.stepper{display:inline-grid;grid-template-columns:36px 34px 36px;align-items:center;border:1.5px solid var(--line-strong);border-radius:12px;height:38px;overflow:hidden;background:#fff}
.stepper button{height:100%;display:grid;place-items:center;color:var(--navy)}
.stepper button:hover{background:var(--bg)}
.stepper button:disabled{color:var(--line-strong);cursor:default;background:none}
.stepper .ico{width:16px;height:16px;stroke-width:2.4}
.stepper output{text-align:center;font-weight:700;color:var(--navy);font-size:var(--fs-item)}
.opt{padding:12px 0;border-top:1px solid var(--line);display:grid;gap:8px}
.opt label{font-size:var(--fs-small);font-weight:600;color:var(--muted)}
.rec{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;background:var(--teal-soft);border-radius:12px;padding:10px 12px;margin-top:4px}
.rec b{font-size:var(--fs-h3);color:var(--teal-800)}
.rec small{font-size:var(--fs-small);color:var(--teal-800);opacity:.85}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{min-height:36px;padding:0 12px;border-radius:10px;border:1.5px solid var(--line-strong);font-size:var(--fs-small);font-weight:600;color:var(--ink);background:#fff}
.chips button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.needs{display:flex;gap:10px;align-items:flex-start;background:var(--amber-soft);border:1px solid #F3DDB0;border-radius:var(--r);padding:12px 14px;margin-top:10px;font-size:var(--fs-body);color:#6B4510}
.needs .ico{color:var(--amber);width:20px;height:20px;margin-top:2px}
.needs b{display:block;color:#5A3A0C}
.est-pad{padding-bottom:150px}
.totalbar{position:fixed;inset-inline:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);box-shadow:var(--shadow-up);padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
.totalbar .wrap{display:grid;gap:8px}
.tot-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tot-row>span{font-size:var(--fs-small);color:var(--muted);font-weight:600;line-height:1.3}
.tot-row b{font-size:var(--fs-num-lg);font-weight:700;color:var(--navy);white-space:nowrap}
.tot-row b small{font-size:var(--fs-small);color:var(--muted);margin-inline-start:4px}
.tot-split{font-size:var(--fs-small);color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.tot-split .chip{margin-inline-start:auto}

/* toast */
.toast{position:fixed;inset-inline:16px;bottom:calc(var(--nav-h) + 18px);z-index:60;margin-inline:auto;max-width:420px;background:var(--navy-900);color:#fff;border-radius:14px;padding:12px 16px;font-size:var(--fs-body);box-shadow:var(--shadow);opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;pointer-events:none}
.toast.on{opacity:1;transform:none}
.has-total .toast{bottom:176px}
[hidden]{display:none!important}
.chip{font-style:normal}

/* ───────── forms & feedback ───────── */
.form{display:grid;gap:12px}
.form label{display:grid;gap:6px;font-size:var(--fs-small);font-weight:600;color:var(--navy)}
.form label small,.h-sm small,summary small{font-weight:400;color:var(--muted)}
.field{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--line-strong);border-radius:12px;background:#fff;font:inherit;color:var(--ink)}
textarea.field{min-height:auto;line-height:1.7;resize:vertical}
.field:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(84,186,167,.35)}
.field.sm{min-height:42px;padding:6px 10px;font-size:var(--fs-body)}
.form .check,.check{display:flex;align-items:center;gap:10px;font-weight:500;font-size:var(--fs-body);min-height:40px}
.check input{width:20px;height:20px;accent-color:var(--navy);flex:none}
.form.inline{grid-template-columns:1fr auto;align-items:end;margin-top:10px}
.hint{font-size:var(--fs-small);color:var(--muted);line-height:1.6}
/* Quiet motion (static/motion.js). These classes exist only after the script has run and only where it put them:
   the brand line draws itself, and what was below the screen eases in once. No script, or «reduce motion»: none of it. */
/* «الإنجليزية» in the settings */
.en-row{display:grid;gap:6px}
.en-ar{display:block;padding:8px 10px;border-radius:10px;background:#F4F6F9;font-size:var(--fs-body);line-height:1.7;color:var(--ink)}
.en-flag{color:#912018;font-weight:700}
/* English pages read left to right. Nearly everything follows by itself (logical properties); these are the few things that point. */
[dir=ltr] svg.ico:has(use[href$="#go"]),[dir=ltr] svg.ico:has(use[href$="#back"]){transform:scaleX(-1)}
[dir=ltr] .drawer{right:auto;left:0;transform:translateX(-105%)}
[dir=ltr] .menu-open .drawer{transform:none}
[dir=ltr] .fabs{left:auto;right:16px}
/* a narrow phone: the language switch took the room of the portal's words, so the pill is its icon (its full name stays for screen readers) */
@media (max-width:420px){.topbar .pill span{display:none}.topbar .pill{padding:0 11px}}
/* the other language */
.lang-switch{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;border-radius:12px;font-size:var(--fs-small);font-weight:700;color:var(--navy);text-decoration:none}
.lang-switch:hover{background:#EEF2F6}
/* «قل ما تحتاجه» */
.voice{display:grid;gap:10px}
.voice[hidden],.voice [hidden]{display:none}
.voice-row .btn{width:100%;min-height:48px}
.voice-stop .num{margin-inline-start:6px}
.voice-heard{display:grid;gap:8px}
.voice-heard ul{margin:0;padding-inline-start:18px}
.chip.src{width:fit-content;justify-self:start;align-self:flex-start;margin-block:2px}
.hint .ico{display:inline;width:15px;height:15px;vertical-align:-3px}
.notice{display:flex;gap:8px;align-items:flex-start;padding:10px 14px;border-radius:12px;font-size:var(--fs-body);background:#EEF2F6;color:var(--ink);margin:0}
.notice .ico{width:18px;height:18px;margin-top:3px}
.notice.ok{background:var(--teal-soft);color:var(--teal-800)}
.notice.warn{background:var(--amber-soft);color:#5A3A0C}
.notice.err{background:#FDECEA;color:#912018}
.flash{display:grid;gap:8px;margin-top:12px}
.h-sm{font-size:var(--fs-body);margin-bottom:6px}
.mt{margin-top:14px}
.more{display:inline-flex;margin-top:10px;font-size:var(--fs-item);font-weight:600;color:var(--teal-700)}
.empty{text-align:center;padding:36px 12px;display:grid;gap:10px;justify-items:center}
.empty>.ico{width:44px;height:44px;padding:10px;border-radius:50%;background:var(--teal-soft);color:var(--teal-800);stroke-width:2.4}
.empty b.num{font-size:var(--fs-price-hero);color:var(--teal);line-height:1}
.empty .rows{width:100%;text-align:start}
.spin{display:inline-block;width:16px;height:16px;border:2.5px solid var(--line-strong);border-top-color:var(--navy);border-radius:50%;animation:spin .8s linear infinite;flex:none;margin-top:4px}
@keyframes spin{to{transform:rotate(360deg)}}
.busy{opacity:.6;transition:opacity .15s}
.grow-note{flex:1;color:var(--muted);font-size:var(--fs-small)}
.rows div>b{margin-inline-start:auto}
.tot-row.sum{margin-top:12px;padding-top:12px;border-top:1.5px solid var(--line)}

/* sheet (ask AI) */
.sheet{position:fixed;inset:0;z-index:70;background:rgba(31,42,75,.5);display:grid;align-items:end}
.sheet-card{background:#fff;border-radius:22px 22px 0 0;padding:18px var(--gutter) calc(22px + env(safe-area-inset-bottom));display:grid;gap:12px;max-width:560px;width:100%;margin-inline:auto;max-height:92vh;overflow:auto}
.sheet-head{display:flex;justify-content:space-between;align-items:center}
.sheet-head h2{font-size:var(--fs-h2)}
.ai-links{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}


/* public inner pages */
.svc-detail{display:grid;gap:12px;scroll-margin-top:calc(var(--header-h) + 56px)}
.svc-h{display:flex;gap:12px;align-items:flex-start}
.svc-h .badge-ico{width:46px;height:46px;border-radius:12px;background:var(--teal-soft);color:var(--teal-800);display:grid;place-items:center;flex:none}
.svc-h h2{font-size:var(--fs-h2)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:var(--fs-body)}
.ticks li{display:flex;gap:8px;align-items:flex-start}
.ticks .ico{width:18px;height:18px;color:var(--teal-700);margin-top:4px;stroke-width:2.4}
.cta-band{margin:22px 0;background:var(--navy);color:#C9D4E5;border-radius:var(--r-lg);padding:22px;display:grid;gap:10px;justify-items:start}
.cta-band h2{color:#fff;font-size:var(--fs-h2)}
.cta-band p{font-size:var(--fs-body)}
a.work{transition:transform .15s}
a.work:hover{transform:translateY(-2px)}

/* role entry */
.role-card{display:flex;align-items:center;gap:14px;width:100%;text-align:start;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:16px;transition:border-color .15s,transform .15s}
.role-card:hover{border-color:var(--navy);transform:translateY(-1px)}
.role-card .badge-ico{width:48px;height:48px;border-radius:14px;background:var(--navy);color:#fff;display:grid;place-items:center;flex:none}
.role-card .grow{flex:1}
.role-card b{display:block;color:var(--navy);font-size:var(--fs-h3)}
.role-card small{display:block;color:var(--muted);font-size:var(--fs-small);line-height:1.5}
.role-card>.ico{color:var(--faint)}

/* wizard */
.wiz{padding-bottom:110px}
.wiz-progress{height:5px;background:var(--line);border-radius:5px;margin-top:14px;overflow:hidden}
.wiz-progress i{display:block;height:100%;width:25%;background:var(--teal);border-radius:5px;transition:width .3s}
.wiz-hint{margin:10px 0}
.pick{margin-top:4px}
.pick-card{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:6px;text-align:start;transition:border-color .15s,background .15s}
.pick-card .badge-ico{width:42px;height:42px;border-radius:12px;background:var(--teal-soft);color:var(--teal-800);display:grid;place-items:center}
.pick-card b{color:var(--navy);font-size:var(--fs-body)}
.pick-card small{color:var(--muted);font-size:var(--fs-small)}
.pick-card .tick{position:absolute;top:10px;inset-inline-end:10px;width:24px;height:24px;border-radius:50%;border:2px solid var(--line-strong);display:grid;place-items:center;color:transparent}
.pick-card .tick .ico{width:14px;height:14px;stroke-width:3}
.pick-card[aria-pressed="true"]{border-color:var(--navy);background:#F3FBF8}
.pick-card[aria-pressed="true"] .tick{background:var(--navy);border-color:var(--navy);color:#fff}
.wiz-nav{position:fixed;inset-inline:0;bottom:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));display:grid}
.wiz-nav .btn{max-width:720px;width:100%;margin-inline:auto}
.wiz section>.seg,.wiz section>.card,.wiz [data-floors-editor]{margin-top:12px}
.stepper.big{grid-template-columns:52px 60px 52px;height:50px;justify-self:start}
.stepper.big output{font-size:var(--fs-num-lg)}
.drop{border:2px dashed var(--line-strong);border-radius:var(--r);padding:22px 14px;text-align:center;justify-items:center;cursor:pointer;background:var(--bg)}
.drop .ico{width:30px;height:30px;color:var(--teal-700)}
.drop:hover{border-color:var(--navy)}
.floor-row{display:grid;gap:10px;margin-top:10px;padding:12px}
.floor-top{display:flex;gap:8px;align-items:center}
.floor-top .field{flex:1;min-height:42px;font-weight:600}
.floor-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mini-field{display:grid;gap:4px;font-size:var(--fs-small);font-weight:600;color:var(--muted)}
.per-floor{padding:12px 0;border-top:1px solid var(--line);display:grid;gap:8px}
details.card summary{cursor:pointer;font-weight:600;color:var(--navy);list-style:none;display:flex;justify-content:space-between;align-items:center}
details.card summary::after{content:"+";font-size:var(--fs-h2);color:var(--faint)}
details[open].card summary::after{content:"–"}
.sub.warn{color:var(--amber)}

/* devices */
.searchbar{position:relative;margin-bottom:10px}
.searchbar .ico{position:absolute;inset-inline-start:14px;top:13px;color:var(--faint)}
.searchbar .field{padding-inline-start:44px}
[data-dev-filter]{margin-bottom:12px}
.chips button b{font-weight:600;opacity:.7;margin-inline-start:2px}
.dev{background:#fff;border:1px solid var(--line);border-radius:14px;margin-top:8px;overflow:hidden;scroll-margin-top:calc(var(--header-h) + 66px)}
.dev-h{display:flex;align-items:center;gap:12px;width:100%;padding:12px;text-align:start}
.dev-h .badge-ico{width:40px;height:40px;border-radius:12px;background:var(--teal-soft);color:var(--teal-800);display:grid;place-items:center;flex:none}
.dev-h .grow{flex:1;min-width:0}
.dev-h b{display:block;color:var(--navy);font-size:var(--fs-body)}
.dev-h small{display:block;color:var(--muted);font-size:var(--fs-small);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev-h .ip{font-size:var(--fs-small);color:var(--muted);background:var(--bg);border-radius:8px;padding:2px 8px}
.dev-h .chev{color:var(--faint);width:18px;height:18px;transition:transform .2s}
.dev[data-open="true"]{border-color:var(--navy)}
.dev[data-open="true"] .chev{transform:rotate(180deg)}
.dev-b{display:none;padding:0 12px 14px}
.dev[data-open="true"] .dev-b{display:block}
.kv{margin:0;display:grid}
.kv>div{display:grid;grid-template-columns:110px 1fr;gap:8px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.kv dt{font-size:var(--fs-small);color:var(--muted);font-weight:600}
.kv dd{margin:0;display:flex;align-items:center;gap:6px;font-weight:600;color:var(--navy);font-size:var(--fs-item);min-width:0}
.kv dd bdi{flex:1;overflow-wrap:anywhere;user-select:all}
.kv.wide>div{align-items:start}
.mini-btn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--teal-700);background:var(--bg);flex:none}
.mini-btn:hover{background:var(--teal-soft)}
.mini-btn .ico{width:17px;height:17px}
.mini-btn[aria-pressed="true"]{background:var(--navy);color:#fff}
.dev-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@media (max-width:420px){.dev-h .ip{display:none}}

/* guides */
.thumb.soft{background:var(--teal-soft);color:var(--teal-800)}
.guide-dots{display:flex;gap:6px;justify-content:center}
.guide-dots i{width:8px;height:8px;border-radius:50%;background:var(--line-strong);transition:all .2s}
.guide-dots i.on{width:24px;border-radius:8px;background:var(--navy)}
.guide-step{display:grid;gap:8px;text-align:center;justify-items:center;padding:22px 16px}
.guide-step h2{font-size:var(--fs-h2)}
.guide-step p{font-size:var(--fs-body);color:var(--ink);max-width:30em}
.guide-art{width:96px;height:96px;border-radius:28px;background:radial-gradient(circle at 2px 2px,rgba(84,186,167,.5) 1.4px,transparent 1.8px) 0 0/12px 12px,var(--teal-soft);color:var(--navy);display:grid;place-items:center}
.guide-art .ico{width:44px;height:44px;stroke-width:1.5}
.guide-nav{display:grid;grid-template-columns:1fr 2fr;gap:10px}

/* visits, comments, gallery */
.facts.flush{margin-top:0}.facts.flush .fact:first-child{border-top:0;padding-top:0}
.fact p{font-size:var(--fs-body);color:var(--ink)}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.gallery a,.gallery label{display:grid;gap:4px;font-size:var(--fs-small);color:var(--muted)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--bg)}
.doc-preview{width:100%;border:1px solid var(--line);border-radius:12px}
.bubble{background:var(--bg);border-radius:14px 14px 14px 4px;padding:10px 12px;margin-top:8px;font-size:var(--fs-body)}
.bubble small{display:block;font-size:var(--fs-small);color:var(--muted);font-weight:600}
.bubble.them{background:var(--teal-soft);border-radius:14px 14px 4px 14px}
.bubble.internal{background:var(--amber-soft)}
.receipt small{display:block;font-size:var(--fs-small);color:var(--muted)}
a.receipt:hover span{color:var(--teal-700)}
.receipt>.chip{flex:none}

/* finance */
.fin-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fin-grid small{display:block;font-size:var(--fs-small);color:var(--muted);font-weight:600}
.fin-grid b{font-size:var(--fs-h3);color:var(--navy)}
.fin-grid .span{grid-column:1/-1;border-top:1px solid var(--line);padding-top:10px}
.fin-grid b.big{font-size:var(--fs-h1);font-weight:700}
.fin-grid b.big i{font-style:normal;font-size:var(--fs-small);color:var(--muted);font-weight:600}

/* admin */
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kpis a{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:2px}
.kpis b{font-size:var(--fs-h1);color:var(--navy);line-height:1.1}
.kpis small{font-size:var(--fs-small);color:var(--muted)}
.chipbtn{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:10px;border:1.5px solid var(--line-strong);font-size:var(--fs-small);font-weight:600;background:#fff}
.chipbtn.on{background:var(--navy);border-color:var(--navy);color:#fff}
.table{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
th,td{text-align:start;padding:8px 6px;border-top:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:600;border-top:0}
.pick-photos label span{display:flex;align-items:center;gap:6px;color:var(--navy);font-weight:600}
.tabbar nav.n2{grid-template-columns:repeat(2,1fr)}.tabbar nav.n4{grid-template-columns:repeat(4,1fr)}
@media (min-width:720px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.sheet{align-items:center}.sheet-card{border-radius:22px}.floor-fields{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* choices (real radios/checkboxes styled as chips — work without JS) */
.fs{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0}
.fs legend,.fs .legend{font-size:var(--fs-small);font-weight:600;color:var(--navy);padding:0;margin-bottom:2px}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice{position:relative;display:inline-flex}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.choice span{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 14px;border-radius:12px;border:1.5px solid var(--line-strong);background:#fff;font-size:var(--fs-item);font-weight:600;color:var(--ink);transition:background .15s,border-color .15s}
.choice span .ico{width:18px;height:18px;color:var(--teal-700)}
.choice input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.choice input:checked+span .ico{color:var(--teal)}
.choice input:focus-visible+span{outline:3px solid var(--teal);outline-offset:2px}
.check.offer{background:var(--teal-soft);border-radius:12px;padding:8px 12px;color:var(--teal-800);font-weight:600}
.pick-card.wide{grid-template-columns:1fr;padding:14px 16px;padding-inline-end:48px;width:100%}
.pick-card.wide .tick{top:50%;transform:translateY(-50%)}
.seg.pkg{margin-top:12px}
.more.danger{color:#B42318;display:block;margin-top:12px;text-align:start}
.mini-btn.danger{color:#B42318}
.chips button:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.add-sys button{border-style:dashed}
.opt small.hint{font-size:var(--fs-small)}
/* offers */
.sec-tight{padding-block:18px}
.offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.offer-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:4px;align-content:start;transition:border-color .15s,transform .15s}
.offer-card:hover{border-color:var(--navy);transform:translateY(-2px)}
.offer-card b{color:var(--navy);font-size:var(--fs-body);line-height:1.4}
.offer-card small{color:var(--muted);font-size:var(--fs-small);line-height:1.5}
.offer-card em{font-style:normal;font-size:var(--fs-small);color:var(--teal-800);background:var(--teal-soft);border-radius:7px;padding:1px 8px;justify-self:start}
.offer-card .soon{position:absolute;top:-9px;inset-inline-end:10px;margin:0}
.offer-price{display:flex;align-items:baseline;gap:5px;margin-top:4px}
.offer-price bdi{font-size:var(--fs-price-card);font-weight:700;color:var(--navy);line-height:1}
.offer-price i{font-style:normal;font-size:var(--fs-small);color:var(--muted);font-weight:600}
.offer-price s,s.was{color:#B42318;font-size:var(--fs-item);font-weight:600}
.offer-card .btn{margin-top:8px}
.terms{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.terms summary{cursor:pointer;font-weight:600;color:var(--teal-700);font-size:var(--fs-item)}
.terms ul{margin:8px 0 0;padding-inline-start:18px;font-size:var(--fs-small);color:var(--muted);display:grid;gap:4px}
.hintlink{margin-top:10px}
.timeline{list-style:none;margin:8px 0;padding:0;display:grid;gap:0;border-inline-start:2px solid var(--line);margin-inline-start:6px}
.timeline li{display:grid;grid-template-columns:44px 1fr;gap:8px;padding:5px 12px;font-size:var(--fs-body);position:relative}
.timeline li::before{content:"";position:absolute;inset-inline-start:-6px;top:11px;width:10px;height:10px;border-radius:50%;background:var(--line-strong);border:2px solid #fff}
.timeline li.action::before{background:var(--teal)}
.timeline li bdi{color:var(--faint);font-size:var(--fs-small)}
.timeline li.action span{font-weight:600;color:var(--navy)}
@media (min-width:720px){.offers{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* cloud pbx */
.plans{display:grid;gap:10px}
.plan{position:relative;display:block}
.plan input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.plan-card{display:grid;gap:6px;border:1.5px solid var(--line-strong);border-radius:var(--r);padding:14px;background:#fff}
.plan-card b{font-size:var(--fs-h3);color:var(--navy)}
.plan-card em{font-style:normal;font-weight:700;color:var(--teal-700);font-size:var(--fs-item)}
.plan-card .ticks{font-size:var(--fs-body);gap:5px;margin-top:4px}
.plan input:checked+.plan-card{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy) inset;background:#F3FBF8}
.plan input:focus-visible+.plan-card{outline:3px solid var(--teal);outline-offset:2px}
.dids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:300px;overflow-y:auto;padding:2px}
.did{position:relative;display:block}
.did input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.did span{display:grid;justify-items:center;border:1.5px solid var(--line-strong);border-radius:12px;padding:8px 4px;background:#fff;font-weight:700;color:var(--navy);font-size:var(--fs-h3);letter-spacing:.04em}
.did small{font-weight:500;font-size:var(--fs-small);color:var(--muted);letter-spacing:0}
.did input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.did input:checked+span small{color:#C9D4E5}
.did input:focus-visible+span{outline:3px solid var(--teal);outline-offset:2px}
.did-row{display:grid;grid-template-columns:88px 64px 1fr 38px 38px;gap:6px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.did-row bdi{font-weight:700;color:var(--navy);font-size:var(--fs-item)}
.did-row input[name=note]{grid-column:1/4}
@media (min-width:720px){.plans{grid-template-columns:1fr 1fr}.dids{grid-template-columns:repeat(4,minmax(0,1fr))}.did-row{grid-template-columns:100px 80px 120px 1fr 38px 38px}.did-row input[name=note]{grid-column:auto}}
/* ───────── wider screens ───────── */
@media (min-width:720px){
  :root{--gutter:32px}
  .cta-row{grid-auto-flow:column;justify-content:start}
  .grid-2.svcs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .works{grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:auto}
  .work:first-child{grid-row:auto}
  .work{min-height:170px}
  .stack.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .teaser{grid-template-columns:1fr 1fr;align-items:center;padding:32px}

  .stage span{font-size:var(--fs-small)}
  .dot{width:34px;height:34px}
  .rail::before,.rail::after{top:15px}
}
@media (min-width:980px){
  .desk-nav{display:flex}
  .only-mobile{display:none}
  .hero .wrap{grid-template-columns:1.05fr .95fr;align-items:center;padding-block:56px 40px}
  .sec{padding-block:48px}
  .sec-head h2{font-size:var(--fs-h2)}
  .est-grid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
  .totalbar{position:sticky;top:calc(var(--header-h) + 16px);inset:auto;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 0}
  .totalbar .wrap{padding-inline:16px}
  .est-pad{padding-bottom:40px}
  .has-total .toast,.toast{bottom:24px}
  .portal-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:14px;align-items:start}
}
@media (max-width:350px){
  :root{--gutter:12px}
  .stage span{font-size:var(--fs-small)}
  .stage.now span{font-weight:600}
  .dot{width:26px;height:26px}
  .rail::before,.rail::after{top:11px}
  .hero h1{font-size:var(--fs-h1)}
  .pill span{display:none}
  .stepper{grid-template-columns:32px 30px 32px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ───────── instant quote, print, maintenance, comparison ───────── */
.stepper input{width:100%;border:0;background:none;text-align:center;font:inherit;font-weight:700;color:var(--navy);font-size:var(--fs-item);padding:0;-moz-appearance:textfield}
.btn-wa{background:#128C4B;color:#fff}
.btn-wa:hover{background:#0E7540}
.was{color:var(--faint);font-size:var(--fs-body);font-weight:500;margin-inline-end:4px}
.print-head{display:none}
.quote-doc .kv.wide{margin-top:6px}
.compare{width:100%;font-size:var(--fs-small);border-collapse:collapse}
.compare th,.compare td{padding:8px 6px;text-align:center;border-top:1px solid var(--line)}
.compare th:first-child,.compare td:first-child{text-align:start;color:var(--muted);font-weight:600}
.compare thead th{border-top:0;color:var(--navy);font-size:var(--fs-small)}
.compare .hl{background:var(--teal-soft)}
.scarce{display:flex;align-items:center;gap:6px;font-size:var(--fs-small);font-weight:600;color:var(--amber)}
.scarce .ico{width:16px;height:16px}
.did.taken span{opacity:.45;text-decoration:line-through;cursor:not-allowed}
@media print{
  .topbar,.backrow,.drawer,.scrim,.no-print,.toast,.tabbar,.foot,.totalbar{display:none!important}
  body{background:#fff;font-size:12pt}
  .print-head{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:2px solid var(--navy);padding-bottom:10px;margin-bottom:14px}
  .print-head div{display:grid;text-align:end}
  .print-head b{font-size:15pt;color:var(--navy)}
  .print-head span{font-size:10pt;color:var(--muted)}
  .card{border:1px solid #bbb;break-inside:avoid}
  .wrap{max-width:none;padding:0}
}
.quote-doc .empty b.num{font-size:inherit;color:var(--navy)}
.quote-doc .rows div>span{flex:1}
.ticks li>span{flex:1;min-width:0}
.quote-doc .ticks li{display:block;position:relative;padding-inline-start:26px}
.quote-doc .ticks li .ico{position:absolute;inset-inline-start:0;top:4px;margin:0}
.quote-doc .ticks li>span{display:inline}

/* ── 1.4: suggestions, quick-quote quantities, maintenance ── */
.suggest{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:12px 14px;border-radius:14px;background:var(--teal-soft);color:var(--teal-800);border:1px solid transparent;margin-top:10px;font:inherit}
.suggest:hover{border-color:var(--teal)}
.suggest .grow{display:grid;gap:2px;min-width:0;flex:1;text-align:start}
.suggest b{font-size:var(--fs-body);color:var(--navy);line-height:1.45}
.suggest small{font-size:var(--fs-small);line-height:1.55;color:var(--ink)}
.suggest .ico{width:20px;height:20px;flex:none}
.suggest em{font-style:normal;font-weight:700;font-size:var(--fs-small);background:var(--navy);color:#fff;border-radius:10px;padding:6px 12px;flex:none}
.suggest.upgrade{background:#EEF2F8}
.stepper input{width:100%;border:0;background:none;text-align:center;font:inherit;font-weight:700;color:var(--navy);font-size:var(--fs-item);padding:0;min-width:0}
.choices.tight{gap:6px;flex-wrap:nowrap}
.choice.sm span{min-height:38px;padding:0 12px;font-size:var(--fs-body)}
.card>h2.h-sm .ico,.card.renew h2 .ico{display:inline-block;width:18px;height:18px;color:var(--teal-700);vertical-align:-3px;margin-inline-end:4px}
.stack.sm{gap:0}
.keepnote{font-size:var(--fs-small);color:var(--muted);margin-top:-4px}
.card.renew{border:1.5px solid var(--amber,#E9A23B);background:var(--amber-soft)}
.card.renew h2 .ico{width:18px;height:18px;vertical-align:-3px}
details.fold{margin:4px 0 8px;padding:0 0 8px;border-bottom:1px solid var(--line)}
details.fold summary{cursor:pointer;font-size:var(--fs-small);font-weight:600;color:var(--teal-800);padding:4px 0}
details.fold form{margin-top:8px}
.checkrow{border-top:1px solid var(--line);padding-top:10px}
.checkrow legend{font-weight:700;color:var(--navy);font-size:var(--fs-small)}
.choices.wrap{flex-wrap:wrap}
.bubble.me{background:var(--bg)}
.bubble p{margin:2px 0 0}
small.inline{display:inline}
.kpis b .ico{width:26px;height:26px;color:var(--teal-700)}
.catbar{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;position:sticky;top:calc(var(--header-h) - 4px);z-index:5;background:var(--bg);scrollbar-width:none}
.catbar::-webkit-scrollbar{display:none}
.catbar a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-height:40px;padding:0 14px;border-radius:999px;background:#fff;border:1.5px solid var(--line-strong);font-weight:600;font-size:var(--fs-item);color:var(--navy)}
.catbar a .ico,.offer-cats .chip .ico{width:16px;height:16px;color:var(--teal-700)}
.offer-cats{display:flex;flex-wrap:wrap;gap:8px}
.offer-cats .chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px}
section[id]{scroll-margin-top:calc(var(--header-h) + 56px)}
.big-price{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.big-price b{font-size:var(--fs-price-hero);line-height:1;color:var(--navy)}
.big-price small{color:var(--muted);font-size:var(--fs-body)}
@media (min-width:720px){.offers.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tabbar nav.n3{grid-template-columns:repeat(3,1fr)}

/* two doors + compact request sheet */
.ask-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:8px}
.ask-row .btn{padding-inline:10px;font-size:var(--fs-btn);white-space:nowrap}
.sheet.ask .sheet-card{gap:10px}
.sheet.ask .card{border:0;box-shadow:none;padding:0;background:none}
.sheet.ask .card>.btn{width:100%;margin-top:4px}
.ask-sum{font-size:var(--fs-item);color:var(--muted);font-weight:600;margin-top:-6px}
.ask-mode{background:var(--teal-soft);color:var(--teal-800);border-radius:12px;padding:9px 12px;font-size:var(--fs-item);font-weight:600;line-height:1.6}
body.ask-open{overflow:hidden}

/* maintenance: what the base subscription covers + contract perks */
.incl{background:var(--teal-soft);border-radius:14px;padding:12px 14px;margin-bottom:6px;display:grid;gap:8px}
.incl-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.incl-top b{color:var(--navy);font-size:var(--fs-body)}
.incl-top span{font-size:var(--fs-small);color:var(--teal-800);font-weight:600}
.incl-dots{display:flex;gap:6px}
.incl-dots i{flex:1;height:8px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--teal);transition:background .2s}
.incl-dots i.on{background:var(--teal)}
.perks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.perks div{background:#EEF2F8;border-radius:14px;padding:12px;display:grid;gap:4px}
.perks b{font-size:var(--fs-h1);color:var(--navy);line-height:1}
.perks span{font-size:var(--fs-small);line-height:1.6;color:var(--ink)}
/* offer page: the benefit first */
.pitch{background:var(--navy);color:#fff;border-radius:var(--r);padding:18px;margin-bottom:14px;display:grid;gap:10px}
.pitch h2{color:#fff;font-size:var(--fs-h2);line-height:1.5}
.pitch ul{display:grid;gap:6px;list-style:none;padding:0;margin:0}
.pitch li{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-body);line-height:1.7;color:#E6EDF7}
.pitch li .ico{color:var(--teal);width:18px;height:18px;flex:none;margin-top:4px}
/* explicit cross-link button inside a notice */
.notice .btn{margin-top:10px;width:100%}
.jump{display:grid;gap:8px}

/* one-tap add-on inside the request sheet + what was picked on the home opener */
.form .check.addon,.check.addon{align-items:flex-start;background:#EEF2F8;border-radius:12px;padding:10px 12px;min-height:0}
.check.addon input{margin-top:4px}
.check.addon span{display:grid;gap:2px}
.check.addon b{font-size:var(--fs-body);color:var(--navy)}
.check.addon small{font-size:var(--fs-small);color:var(--muted);line-height:1.6;font-weight:500}
.picked{display:flex;gap:8px;align-items:flex-start;background:var(--teal-soft);color:var(--teal-800);border-radius:12px;padding:10px 12px;font-size:var(--fs-body);line-height:1.7;margin-bottom:12px}
.picked .ico{width:18px;height:18px;flex:none;margin-top:3px}
.doors .mini-field b{font-size:var(--fs-h1);color:var(--navy);line-height:1.2}.doors .mini-field small{font-size:var(--fs-small);color:var(--muted)}
/* admin catalog */
.role-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.role-row .nm{display:grid;min-width:0}.role-row .nm b{font-size:var(--fs-body);color:var(--navy)}.role-row .nm small{font-size:var(--fs-small);color:var(--muted);overflow-wrap:anywhere}
.role-row details[open]{grid-column:1/-1}.role-row summary{cursor:pointer;list-style:none}.role-row summary::-webkit-details-marker{display:none}
/* portal additions */
.pipeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.pipeline div{display:grid;gap:2px}.pipeline small{font-size:var(--fs-small);color:var(--muted)}.pipeline b{font-size:var(--fs-h2);color:var(--navy);line-height:1.3}
.care{background:var(--teal-soft);border-color:var(--teal-line)}
.wa-line{width:100%}

/* offer artwork: a small night scene per card; positions via CSS transforms (works in Safari too) */
.oa{display:block;margin:-14px -14px 8px;border-radius:var(--r) var(--r) 0 0;background:radial-gradient(120% 100% at 50% 100%,#1B3562,var(--navy-900) 70%);overflow:hidden}
.oa svg{display:block;width:100%;height:auto;fill:none;stroke:#8FA5C6;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.oa .mint{stroke:var(--teal)}
.oa .win{fill:#1F2A4B}.oa .win.lit{fill:#FFE9A8;stroke:#FFE9A8}
.oa .eye circle{fill:var(--teal);stroke:none;filter:drop-shadow(0 0 4px rgba(84,186,167,.9))}
.oa .eye .cone{fill:rgba(84,186,167,.22);stroke:none;transform-origin:0 0}
.oa .dots circle{fill:var(--teal);stroke:none}
.oa-cctv .e1{transform:translate(40px,30px)}.oa-cctv .e1 .cone{transform:rotate(25deg)}
.oa-cctv .e2{transform:translate(120px,30px)}.oa-cctv .e2 .cone{transform:rotate(-25deg)}
.oa-cctv .e3{transform:translate(40px,52px)}.oa-cctv .e3 .cone{transform:rotate(70deg) scale(.6)}
.oa-cctv .e4{transform:translate(120px,52px)}.oa-cctv .e4 .cone{transform:rotate(-70deg) scale(.6)}
.oa-cctv .e5{transform:translate(80px,26px)}.oa-cctv .e5 .cone{transform:scale(.8)}
.oa-cctv .e6{transform:translate(22px,56px)}.oa-cctv .e6 .cone{transform:rotate(85deg) scale(.5)}
.oa-cctv .e7{transform:translate(138px,56px)}.oa-cctv .e7 .cone{transform:rotate(-85deg) scale(.5)}
.oa-cctv .e8{transform:translate(80px,48px)}.oa-cctv .e8 .cone{transform:scale(.5)}
.oa-house .h1{transform:translate(52px,38px)}.oa-house .h2{transform:translate(80px,38px)}.oa-house .h3{transform:translate(108px,38px)}
.offer-card .soon{z-index:1}

/* ───────── /manage/، إعدادات الموقع ───────── */
.mg{padding-bottom:48px}
.mg-nav{padding-top:12px}
.mg-out{display:flex;align-items:center;gap:8px}
.mg-out .pill{border:0;cursor:pointer;font-family:inherit}
.mg-who{font-size:var(--fs-small);color:var(--muted);max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-ro{margin-top:12px}
.mg-field{display:grid;gap:4px}
.mg-field.bad .field{border-color:#B42318}
.where{display:block;font-size:var(--fs-small);font-weight:400;color:var(--muted);line-height:1.6}
.field-err{margin:0;font-size:var(--fs-item);font-weight:600;color:#912018}
.mg-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mg-actions .btn:only-child{grid-column:1/-1}
.mg-log{display:grid;gap:6px}
.mg-diff{display:grid;gap:6px;margin:0}
.mg-diff div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:start}
.mg-diff dt{font-size:var(--fs-small);color:var(--muted);font-weight:600}
.mg-diff dd{margin:0;font-size:var(--fs-small);overflow-wrap:anywhere;white-space:pre-line}
.mg-inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mg-inline .field{flex:1;min-width:140px}
.mg-issued{margin-bottom:12px}
.mg-secret{font-weight:700;font-size:var(--fs-h3);user-select:all;overflow-wrap:anywhere}
.previewbar{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 14px;background:var(--navy);color:#fff;font-size:var(--fs-small)}
.previewbar span{flex:1;min-width:90px;color:#C9D6E6}
.previewbar .btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.oa-img img{display:block;width:100%;height:auto;aspect-ratio:20/9;object-fit:cover}
.ask-price{font-size:var(--fs-body)}
.mg-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.mg-row .nm{display:grid;min-width:0}
.mg-row .nm b{font-size:var(--fs-small);color:var(--navy)}
.mg-row .nm small{font-size:var(--fs-small);color:var(--muted);overflow-wrap:anywhere}
.mg-move{display:flex;gap:4px}
.mg-move .mini-btn{border:0;cursor:pointer}
.mg-move .ico.up{transform:rotate(-90deg)}
.mg-move .ico.down{transform:rotate(90deg)}
.mg-comp{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:6px}
.mg-sub{font-size:var(--fs-small);color:var(--navy)}
.mg-sub small{font-weight:400;color:var(--muted)}
.mg-video{display:block;width:100%;max-width:420px;border-radius:12px;background:#000}
.mg-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.mg-shot{display:grid;gap:6px;align-content:start;justify-items:start}
.mg-shot img{width:160px;height:120px;border-radius:8px;object-fit:cover;background:var(--surface)}
.mg-thumb{width:100%;max-width:320px;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.mg-slide{display:grid;gap:8px;padding:14px 0;border-top:1px solid var(--line)}
.mg-danger{color:#B42318}

/* ───────── home page order (phase 2): shared pieces ───────── */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.deck{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:64%;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter) 10px}
.deck::-webkit-scrollbar{display:none}
.deck>*{scroll-snap-align:start}
.kinds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.kind{display:grid;gap:2px;align-content:start;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r);padding:10px;transition:border-color .15s}
.kind:hover{border-color:var(--teal-line)}
.kind .oa{margin:0 0 6px;border-radius:10px}
.kind b{font-size:var(--fs-body);color:var(--navy)}
.kind small{font-size:var(--fs-small);color:var(--muted);line-height:1.5}
/* «اسأل الذكاء الاصطناعي»: one small button under the «للأفراد / للشركات» switch، no section of its own */
.ask-line{padding-block:12px 0}
.askbox.slim{display:grid;gap:8px;justify-items:center}
.askbox .ai-links[hidden]{display:none}
.askbox .ai-links .ico{width:16px;height:16px}
.askbox.slim .ask-ai{width:auto;min-height:40px;padding:6px 14px;border-radius:20px;background:var(--surface-raised);border:1px solid var(--line-strong);color:var(--navy);font-size:var(--fs-body)}
.askbox.slim .ask-ai .ico{width:18px;height:18px;color:var(--teal-700)}
.askbox.slim .ask-done{margin:0;font-size:var(--fs-small);color:var(--muted);text-align:center}
.askbox.slim .ai-links{justify-content:center}
/* one row to swipe: the next card always shows a little, so it is plain there is more */
.row1{margin-top:0}
.kinds.row1{grid-template-columns:none;grid-auto-columns:44%;gap:10px}
.sec-tight{padding-block:4px}
@media (min-width:900px){.offers.row1{grid-auto-columns:23%}.kinds.row1{grid-auto-columns:24%}}
.askbox .ask-done{margin:0;font-size:var(--fs-body);color:var(--muted)}
.askbox:not(.home){display:grid;gap:8px}
.askbox:not(.home) .ask-done{color:#AEBBD0}
.askbox .ai-links{display:flex;flex-wrap:wrap;gap:8px}
/* «العروض»: a pill per system (Offer.CATS) and its offers under it. Radios + these rules: it works with no script. */
.ot{position:relative}
.ot-r{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ot-bar{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gutter) * -1) 12px;padding:2px var(--gutter)}
.ot-bar::-webkit-scrollbar{display:none}
.ot-bar[hidden]{display:none}
.ot-l{flex:none;min-height:40px;display:grid;place-items:center;padding:0 16px;border-radius:999px;border:1.5px solid var(--line-strong);background:#fff;font-size:var(--fs-item);font-weight:600;color:var(--navy);cursor:pointer;white-space:nowrap}
.ot-p{display:none;gap:10px}
#ot-all:checked~[data-ot=all],#ot-cctv:checked~[data-ot=cctv],#ot-intercom:checked~[data-ot=intercom],#ot-wifi:checked~[data-ot=wifi],#ot-pbx:checked~[data-ot=pbx],#ot-sat:checked~[data-ot=sat],#ot-maint:checked~[data-ot=maint],#ot-cloud:checked~[data-ot=cloud],#ot-smart:checked~[data-ot=smart],#ot-house:checked~[data-ot=house],#ot-other:checked~[data-ot=other]{display:grid}
#ot-all:checked~.ot-bar [for=ot-all],#ot-cctv:checked~.ot-bar [for=ot-cctv],#ot-intercom:checked~.ot-bar [for=ot-intercom],#ot-wifi:checked~.ot-bar [for=ot-wifi],#ot-pbx:checked~.ot-bar [for=ot-pbx],#ot-sat:checked~.ot-bar [for=ot-sat],#ot-maint:checked~.ot-bar [for=ot-maint],#ot-cloud:checked~.ot-bar [for=ot-cloud],#ot-smart:checked~.ot-bar [for=ot-smart],#ot-house:checked~.ot-bar [for=ot-house],#ot-other:checked~.ot-bar [for=ot-other]{background:var(--navy);border-color:var(--navy);color:#fff}
#ot-all:focus-visible~.ot-bar [for=ot-all],#ot-cctv:focus-visible~.ot-bar [for=ot-cctv],#ot-intercom:focus-visible~.ot-bar [for=ot-intercom],#ot-wifi:focus-visible~.ot-bar [for=ot-wifi],#ot-pbx:focus-visible~.ot-bar [for=ot-pbx],#ot-sat:focus-visible~.ot-bar [for=ot-sat],#ot-maint:focus-visible~.ot-bar [for=ot-maint],#ot-cloud:focus-visible~.ot-bar [for=ot-cloud],#ot-smart:focus-visible~.ot-bar [for=ot-smart],#ot-house:focus-visible~.ot-bar [for=ot-house],#ot-other:focus-visible~.ot-bar [for=ot-other]{outline:2px solid var(--teal-700);outline-offset:2px}
.ol{position:relative;display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px;transition:border-color .15s}
.ol:hover{border-color:var(--navy)}
.ol-img{width:92px;height:84px;border-radius:14px;background:var(--tone-plain);overflow:hidden;display:grid;place-items:center}
.ol-img img{display:block;width:100%;height:100%;object-fit:cover}
.ol-prod img{object-fit:contain;padding:9px;filter:drop-shadow(0 6px 8px rgba(31,42,75,.2))}
.ol-ico img{width:64px;height:64px;object-fit:contain}
/* the light squares behind the brand's icons: one tone per family of systems (brand/BANNERS_AND_ICONS_AR.md) */
.hx .oh-hero.oh-split{overflow:visible}
.tone-green{background:#e3f6f0}.tone-violet{background:#ece6fb}.tone-sky{background:#e3eefb}.tone-amber{background:#fff1d6}.tone-coral{background:#fde3de}
.ol-text{display:grid;gap:2px;min-width:0}
.ol-text b{color:var(--navy);font-size:var(--fs-body);line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-wrap:balance}
.ol-text small{color:var(--muted);font-size:var(--fs-small);line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ol-text em{font-style:normal;font-size:var(--fs-small);color:var(--teal-800);background:var(--teal-soft);border-radius:7px;padding:1px 8px;justify-self:start}
.ol .offer-price{flex-wrap:wrap;margin-top:2px}
.ol .offer-price bdi{font-size:var(--fs-num-lg)}
.ol .soon{position:absolute;top:-9px;inset-inline-end:10px;margin:0;z-index:1}
.ol .soon.pop{inset-inline:10px auto;color:#fff;background:var(--teal-700)}
.ol-more{justify-self:center;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;font-size:var(--fs-item);font-weight:600;color:var(--teal-700)}
.ol-more .ico{width:16px;height:16px}
.ot+.cta-row{margin-top:14px}
/* «خدماتنا»: nine square tiles, three to a line */
.tiles9{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tile9{aspect-ratio:1;display:grid;justify-items:center;align-content:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px 4px;text-align:center;transition:border-color .15s}
.tile9:hover{border-color:var(--teal-line)}
.tile9-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center}
.tile9-ico img{width:40px;height:40px}
.tile9 b{font-size:var(--fs-small);line-height:1.35;color:var(--navy)}
@media (max-width:340px){.ol{grid-template-columns:72px minmax(0,1fr) auto;gap:9px}.ol-img{width:72px;height:72px}.ol-ico img{width:52px;height:52px}.tile9-ico{width:46px;height:46px}.tile9-ico img{width:36px;height:36px}.tile9 b{font-size:var(--fs-small)}}
@media (min-width:900px){.ot-p{grid-template-columns:repeat(2,minmax(0,1fr))}.ol-more{grid-column:1/-1}.tiles9{grid-template-columns:repeat(9,minmax(0,1fr))}.tile9 b{font-size:var(--fs-small)}}
@media (min-width:1100px){.ot-p{grid-template-columns:repeat(3,minmax(0,1fr))}}
.prose p{margin:0 0 12px;line-height:1.9}
.prose p:last-child{margin-bottom:0}



/* 1.79.0, the one floating button (the designer's assistant-fab-v2; the owner: «مو موجود كل مكان ومو متوحد… ثبته كبار»):
   one round button of 64px on every public page — the assistant's face where she is offered to this visitor, the microphone
   where she is not — 16px from the edge and from the foot (24 on a wide screen), fixed, never larger, never smaller, never
   moved and never inside a bar. Every bar that is fixed at the foot of the screen keeps a place of 76px free at the button's
   end (below), so it covers nothing.
   1.79.1, the manager: a visitor is never left with no way to reach us — the corner always holds exactly one button: the
   assistant; else the microphone; else (the voice unit is down, an English page, /quote/) WhatsApp, in the very same shape:
   the navy circle in its white ring, its sign in mint. The loud green button is gone. templates/base.html still writes the
   WhatsApp link after the microphone (a test of the voice's own keeps it there); beside the microphone it is not drawn. */
.fabs{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;display:flex;align-items:center}
.mic-fab,.wa-fab{display:inline-flex;align-items:center;justify-content:center;width:64px;min-height:64px;padding:0;border-radius:50%;background:var(--navy);color:var(--mint);box-shadow:0 0 0 3px #fff,0 8px 22px -8px rgba(31,42,75,.55)}
.mic-fab .ico,.wa-fab .ico{width:28px;height:28px}
.wa-fab .ico{stroke-width:1.8}
.fabs .wa-fab:not(:only-child){display:none}
.mic-fab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mic-fab:focus-visible,.wa-fab:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
body.menu-open .fabs,body.ask-open .fabs{display:none}
/* the place kept for it: 76px at the button's end of every bar that stays at the foot of a phone's screen */
@media (max-width:899px){
  /* 1.81.1: no bar keeps a place at its end any more — on a phone the one floating button is in the middle of every public page (the end of this file) */
}
@media (min-width:900px){.fabs{left:24px;bottom:24px}[dir=ltr] .fabs{left:auto;right:24px}}
/* the picture head of a page (web/heads.py, {% pic %}): one of the designer's scenes edge to edge of the page's column, a soft navy fall over its foot, and the page's title written on it. Compact: the content under it starts within the first screen. */
.ph{position:relative;isolation:isolate;overflow:hidden;height:180px;margin:12px 0 6px;border-radius:16px;background:linear-gradient(160deg,#151D35,#1F2A4B)}
.ph picture{position:absolute;inset:0;z-index:-2}
.ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.ph::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(21,29,53,.05) 25%,rgba(21,29,53,.78))}
.ph-text{position:absolute;inset:auto 16px 14px 16px;color:#fff}
.ph-text h1,.ph-title{margin:0;font-size:var(--fs-h1);font-weight:700;line-height:1.3;color:#fff}
.ph-text p{margin:2px 0 0;font-size:var(--fs-small);line-height:1.6;color:rgba(255,255,255,.92)}
.ph-kicker{display:block;font-size:var(--fs-small);font-weight:600;color:#9FE0CF}
.ph-sm{height:120px}.ph-sm .ph-text h1,.ph-sm .ph-title{font-size:var(--fs-h1)}
@media (min-width:900px){.ph{height:300px;margin:18px 0 8px}.narrow .ph{height:230px}.ph-sm,.narrow .ph-sm{height:190px}.ph-text{inset:auto 28px 22px 28px}.ph-text h1,.ph-title{font-size:var(--fs-h1)}.ph-sm .ph-text h1,.ph-sm .ph-title{font-size:var(--fs-h1)}.ph-text p{font-size:var(--fs-body)}}
/* a camera package's page: the other resolution, help with the number, what the price includes (moved here from the home page's panel in 1.38.0) */
.pack-more{display:grid;gap:10px;margin:0 0 14px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:16px}
.pack-res{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--fs-item);font-weight:600;color:var(--navy)}
.seg-links{display:inline-flex;gap:6px}
.seg-links a{display:inline-flex;align-items:center;gap:4px;min-height:42px;padding:0 16px;border-radius:12px;border:1.5px solid var(--line-strong);background:#fff;font-weight:700;color:var(--navy)}
.seg-links a.on{background:var(--navy);border-color:var(--navy);color:#fff}
.seg-links small{font-size:var(--fs-small);font-weight:600;opacity:.8}
.pack-help{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--fs-item);font-weight:700;color:var(--teal-800)}
.pack-help .ico{width:20px;height:20px}
.pack-more .w2-facts{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:10px 0 0;list-style:none;border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--muted)}
.pack-more .w2-facts li{display:inline-flex;align-items:center;gap:5px}.pack-more .w2-facts .ico{width:16px;height:16px;color:var(--teal-700)}
/* an answer with a short title and a small line under it (the satellite's question) */
.choice.two span{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;min-height:50px;padding:5px 14px}
.choice.two span b{font-size:var(--fs-item);font-weight:700;line-height:1.35}.choice.two span small{font-size:var(--fs-small);font-weight:500;line-height:1.35;color:var(--muted)}
.choice.two input:checked+span small{color:rgba(255,255,255,.85)}
.chips button.two{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0;padding-block:6px;text-align:start}
.chips button.two small{font-size:var(--fs-small);font-weight:500;opacity:.8}
/* «مكوّنات الباقة» (templates/web/_parts.html): a white tile per part, its quantity in the corner; then the navy strip of what the price includes */
.parts{margin:0 0 14px}
.parts-h{margin:0 0 10px;font-size:var(--fs-h3);font-weight:700;color:var(--navy)}
.parts-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.part{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 10px 12px;overflow:hidden;text-align:center;background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(31,42,75,.06),0 10px 26px rgba(31,42,75,.08)}
.part-qty{position:absolute;top:0;right:0;padding:7px 11px;border-radius:0 16px 0 16px;background:#E9F7F2;color:#2fa98a;font:700 var(--fs-num-lg)/1 Montserrat,system-ui,sans-serif}
.part-pic{display:flex;align-items:center;justify-content:center;width:100%;height:96px}
.part-pic>img{width:auto;height:auto;max-width:88%;max-height:86px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(31,42,75,.16))}
.part-ico{display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:22%;background:#e3eefb}
.part-ico img{width:78%;height:78%;mix-blend-mode:multiply}
.part-name{margin-top:6px;font-size:var(--fs-small);font-weight:600;line-height:1.4;color:var(--navy)}
.part-spec{font-size:var(--fs-small);line-height:1.5;color:#526176}
.parts-strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 16px;margin:10px 0 0;padding:11px 14px;border-radius:16px;background:#1F2A4B;color:#fff;font-size:var(--fs-small);font-weight:600}
.parts-strip span{display:inline-flex;align-items:center;gap:8px}
.parts-strip img{width:30px;height:30px;border-radius:9px;background:#fff}
.parts-strip i{width:1px;height:24px;background:rgba(255,255,255,.22)}
@media (min-width:700px){.part-pic{height:120px}.part-pic>img{max-height:104px}.part-name{font-size:var(--fs-body)}.parts-strip{font-size:var(--fs-small)}}
/* the bottom offer bar: on every public page (web/offer_bar.py says what it holds) */
.oh-bar{position:fixed;inset:auto 0 0 0;z-index:25;display:flex;align-items:center;gap:10px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);backdrop-filter:blur(10px);box-shadow:var(--shadow-up);transform:translateY(115%);transition:transform .25s ease}
.oh-bar.show{transform:none}
.oh-bar .t{flex:1;min-width:0;font-size:var(--fs-small);line-height:1.45;color:var(--muted)}
.oh-bar .t b{display:block;font-size:var(--fs-body);color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oh-bar .btn{flex:none}
.oh-bar-v{display:contents}.oh-bar-v[hidden]{display:none}       /* the home page's bar has a variant per slice of the hero (templates/web/_offer_bar.html) */
/* 1.45.0: what the bar says under its name never ends in dots. Its pieces — the price, then the words after it — stand on one line; a piece that does not fit the screen drops out whole instead of being cut mid-word. */
.oh-bar[data-oh-bar] .t{display:flex;flex-wrap:wrap;align-content:flex-start;column-gap:.35em;max-height:46px;line-height:22px;overflow:hidden;text-overflow:clip;white-space:normal}
.oh-bar[data-oh-bar] .t b{flex:0 0 100%;line-height:22px;margin-bottom:2px;white-space:normal;overflow:visible;text-overflow:clip}       /* 1.51.0: a name that does not fit takes a second line, never dots (two lines fill the 46px and the price line drops whole); the 2px under it keep the dots of a last «ي» */
/* (1.80.2's rules for the bar on a phone went with 1.81.0: the bar there is a new shape, at the end of this file) */
@media (max-width:899px){.oh-bar[data-oh-bar]{padding-block:9px calc(9px + env(safe-area-inset-bottom))}}
@media (min-width:900px){.oh-bar[data-oh-bar]{padding-block:11px}}       /* the bar stays 64px tall */       /* 1.47.0: a name that ends in «ي» keeps its two dots — a line of 22px cut them off under the baseline */
@media (min-width:900px){.oh-bar{padding-inline:max(var(--gutter),calc((100vw - 1120px)/2));padding-block:12px}.oh-bar .t{font-size:var(--fs-small)}.oh-bar .t b{font-size:var(--fs-h3)}}
@media (prefers-reduced-motion:reduce){.oh-bar{transition:none}}
.oh-bar.on{transform:none}
.picks{align-items:stretch}
.offer-card.wide{grid-column:1/-1;grid-template-columns:132px minmax(0,1fr);gap:0 12px;align-items:center;padding:10px}
.offer-card.wide .oa{margin:0;border-radius:12px;align-self:stretch;display:grid;align-items:center}
.wide-text{display:grid;gap:4px;align-content:center}
.wide-text .btn{justify-self:start;margin-top:4px}
.deck-hint{margin:2px 0 0;font-size:var(--fs-small);color:var(--faint);text-align:center}
.trust{padding:6px 0 2px}
.trust-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;padding:12px 14px;border-radius:var(--r);background:var(--surface-raised);border:1px solid var(--line)}
.trust-n{display:inline-flex;align-items:baseline;gap:6px;font-size:var(--fs-body);color:var(--muted)}
.trust-n b{font-size:var(--fs-num-lg);color:var(--navy)}
.trust-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px}
.trust-logo{height:24px;width:auto;max-width:74px;object-fit:contain}
@media (min-width:600px){.trust-logo{height:28px;max-width:110px}}
/* 1.48.0: «للأفراد / للشركات» is no longer a row at the top of the page: the way to the other audience is the first item of the side menu, in the brand's mint */
.drawer a.aud-go{min-height:60px;margin:4px 0 8px;padding:0 12px;background:var(--mint-soft,#E0F2EE);color:var(--navy)}
.drawer a.aud-go:hover{background:var(--mint-soft,#E0F2EE)}
.aud-go span{flex:1;display:grid;gap:1px;min-width:0}
.aud-go b{font-size:var(--fs-h3);line-height:22px}
.aud-go small{font-size:var(--fs-small);line-height:18px;font-weight:500;color:var(--ink-muted,#4F5A73)}
.aud-go .ico:last-child{flex:none;width:18px;height:18px}
.svc-index{margin-top:0}
.svc-index .kind{scroll-margin-top:calc(var(--header-h) + 56px)}
.svc-sec{padding-block:14px}
.svc-sec .notice{margin-bottom:12px}
.svc-points{margin-top:14px}
.svc-sec .more{display:inline-flex;align-items:center;gap:4px;margin-top:12px}
.faq details.card{padding:14px 16px}
.faq details p{margin:8px 0 0;color:var(--ink);font-size:var(--fs-body);line-height:1.7}
.faq summary{gap:10px;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.svc-order{padding-bottom:28px}
.svc-order .btn{width:100%}
.biz-kinds{margin-top:0}
.biz-form{margin:6px 0 28px;scroll-margin-top:calc(var(--header-h) + 26px)}
.biz-form .sec-head{margin-bottom:6px}
#company-maintenance,#biz-offers{scroll-margin-top:calc(var(--header-h) + 26px)}
@media (min-width:720px){.svc-order .btn{width:auto;min-width:280px}}
.facts h2{font-size:var(--fs-h2);margin:22px 0 8px}
.facts h3{font-size:var(--fs-h3);margin:18px 0 6px}
.facts p,.facts li{font-size:var(--fs-body);line-height:1.8}
.facts ul{margin:6px 0;padding-inline-start:20px}
.facts a{color:var(--teal-700);font-weight:600}
.table-wrap{overflow-x:auto;margin:8px 0;border:1px solid var(--line);border-radius:12px;background:var(--surface-raised)}
.facts table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
.facts caption{text-align:start;padding:8px 10px;font-weight:600;color:var(--muted);font-size:var(--fs-small)}
.facts th,.facts td{padding:8px 10px;border-top:1px solid var(--line);text-align:start;vertical-align:top;line-height:1.6}
.facts thead th{color:var(--muted);font-size:var(--fs-small);white-space:nowrap}
.facts tbody th{font-weight:600;min-width:120px}
.facts td:nth-child(2){white-space:nowrap}
.facts td small{display:block;white-space:normal;color:var(--muted)}
.facts{padding-bottom:28px}
@media (max-width:599px){.facts thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.facts tbody tr{display:block;padding:8px 10px;border-top:1px solid var(--line)}.facts tbody th,.facts tbody td{display:block;padding:1px 0;border:0;min-width:0}.facts td:nth-child(3){color:var(--muted);font-size:var(--fs-small)}}
.facts time{white-space:nowrap;unicode-bidi:isolate;direction:ltr;display:inline-block}
.follow h2{font-size:var(--fs-h2)}
.pd{max-width:400px;margin:4px auto 18px;border:1.5px solid var(--line-strong);border-radius:26px;background:#fff;overflow:hidden;box-shadow:var(--shadow)}
.pd-flag{margin:0;padding:8px 14px;background:var(--amber-soft);color:#5A3A0C;font-size:var(--fs-small);text-align:center}
.pd-r{position:absolute;opacity:0;pointer-events:none}
.pd-screens{padding:16px 16px 6px;min-height:330px}
.pd-s{display:none}
.pd-s h2{font-size:var(--fs-h2);margin-bottom:12px}
#pd-1:checked~.pd-screens .pd-s1,#pd-2:checked~.pd-screens .pd-s2,#pd-3:checked~.pd-screens .pd-s3,#pd-4:checked~.pd-screens .pd-s4{display:block}
.pd-steps,.pd-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pd-steps li,.pd-list li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--bg);color:var(--muted)}
.pd-steps li .ico,.pd-list li .ico{width:20px;height:20px;flex:none}
.pd-steps b,.pd-list b{display:block;font-size:var(--fs-body);color:var(--navy)}
.pd-steps small,.pd-list small,.pd-card small{display:block;font-size:var(--fs-small);color:var(--muted)}
.pd-steps li.done .ico{color:var(--teal-700)}
.pd-steps li.now{background:var(--teal-soft);box-shadow:0 0 0 1.5px var(--teal) inset}
.pd-steps li.now .ico,.pd-list li .ico{color:var(--teal-800)}
.pd-card{border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px}
.pd-card p{font-size:var(--fs-body);margin:6px 0}
.pd-shots{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 6px}
.pd-shots .oa{margin:0;border-radius:10px}
.pd-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);background:var(--surface-raised)}
.pd-tabs label{display:grid;justify-items:center;gap:2px;padding:8px 2px 10px;font-size:var(--fs-small);font-weight:600;color:var(--muted);cursor:pointer}
.pd-tabs .ico{width:22px;height:22px}
#pd-1:checked~.pd-tabs label[for=pd-1],#pd-2:checked~.pd-tabs label[for=pd-2],#pd-3:checked~.pd-tabs label[for=pd-3],#pd-4:checked~.pd-tabs label[for=pd-4]{color:var(--navy);box-shadow:0 2px 0 var(--teal) inset}
#pd-1:focus-visible~.pd-tabs label[for=pd-1],#pd-2:focus-visible~.pd-tabs label[for=pd-2],#pd-3:focus-visible~.pd-tabs label[for=pd-3],#pd-4:focus-visible~.pd-tabs label[for=pd-4]{outline:3px solid var(--teal);outline-offset:-3px}
.pd-order{padding-bottom:28px}
@media print{.pd-s{display:block}}
.mg-try{margin-top:8px;padding:12px;border:1px dashed var(--line-strong);border-radius:12px}
.mg-trial{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--teal-soft);font-size:var(--fs-small)}
.mg-trial ul{margin:6px 0 0;padding-inline-start:18px;line-height:1.9}
.rec.warn{background:var(--amber-soft)}.rec.warn b,.rec.warn small{color:#5A3A0C}
.est-note{font-size:var(--fs-body);line-height:1.7;margin:8px 0}
.bk-days{display:grid;gap:8px}
.bk-day{display:flex;align-items:center;gap:10px;min-height:60px;padding:10px 16px;border-radius:var(--r);background:#fff;border:1.5px solid var(--line-strong)}
.bk-day b{flex:1;font-size:var(--fs-h3);color:var(--navy)}
.bk-day small{font-size:var(--fs-small);color:var(--muted)}
.bk-day .ico{color:var(--faint)}
.bk-times .choice span{min-height:48px;min-width:104px;justify-content:center;font-size:var(--fs-body)}
.bk-when{margin-top:10px}
.svc-order .wrap{display:grid;gap:10px}
.mg-book{display:grid;gap:6px}
.mg-book .pay-top b{font-size:var(--fs-h3)}
.mg-book form{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.shot{margin:0;border-radius:var(--r);overflow:hidden;background:var(--surface-raised);border:1px solid var(--line)}
.shot img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.shot figcaption{padding:8px 10px;font-size:var(--fs-small);color:var(--ink);line-height:1.5}
.mg-logo{height:28px;width:auto;max-width:140px;object-fit:contain}
.ask-row>:only-child{grid-column:1/-1}
@media (min-width:900px){.deck-hint{display:none}.shots{grid-template-columns:repeat(3,minmax(0,1fr))}.picks{grid-template-columns:repeat(3,minmax(0,1fr))}.offer-card.wide{grid-column:auto;grid-template-columns:none;padding:14px}.offer-card.wide .oa{margin:-14px -14px 8px;border-radius:var(--r) var(--r) 0 0}.deck{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin-inline:0;padding-inline:0}.qt-p.deck{flex-basis:100%}.kinds{grid-template-columns:repeat(4,minmax(0,1fr))}.qt-l{flex:0 1 220px}}
@media (min-width:900px) and (max-width:1239px){.desk-nav{gap:0;font-size:var(--fs-small)}.desk-nav a{padding:8px 6px}}
@media print{.fabs{display:none!important}}

/* ───────── 1.32.0: the W2 manner on every public page ─────────
   One shared skin, laid over what is above: a light, neutral sand ground; white cards with 16px corners and a soft shadow;
   heavy navy titles with a grey line under them; filled navy buttons and outlined second ones; devices and drawings on
   light grounds. It changes no markup, no route and no word. */

h1,h2,h3{font-weight:700}
.page-head{padding-block:20px 12px}
.page-head h1,.page-head .h1{font-size:var(--fs-h1);line-height:1.3}
.page-head .lead,.lead{color:var(--muted)}
.sec{padding-block:26px}
.sec-head{margin-bottom:12px}
.sec-head h2{font-size:var(--fs-h2)}
.card,.offer-card,.ol,.kind,.tile9,.role-card,.pick-card,.svc,.tile,.brand-card{box-shadow:var(--shadow)}
.card,.offer-card,.ol,.kind,.tile9,.role-card{border-color:var(--line)}
.btn{border-radius:13px}
.btn-ghost{background:#fff}
.backrow{background:transparent}
.ot-l{border-color:var(--line-strong)}
/* drawings and device pictures sit on a light ground, in the brand's own ink */
.kind .oa,.offer-card .oa,.pd-shots .oa{background:var(--tone-plain)}
.kind .oa svg,.offer-card .oa svg,.pd-shots .oa svg{stroke:var(--navy);stroke-width:1.5}
.kind .oa .mint,.offer-card .oa .mint,.pd-shots .oa .mint{stroke:var(--teal-700)}
.kind .oa .win,.offer-card .oa .win,.pd-shots .oa .win{fill:#fff}
.kind .oa .win.lit,.offer-card .oa .win.lit,.pd-shots .oa .win.lit{fill:var(--teal);stroke:var(--teal)}
.kind .oa .eye circle,.offer-card .oa .eye circle,.kind .oa .dots circle,.offer-card .oa .dots circle{fill:var(--teal-700);filter:none}
.kind .oa .eye .cone,.offer-card .oa .eye .cone{fill:rgba(23,107,90,.16)}
.offer-card.follow .oa{background:radial-gradient(120% 100% at 50% 100%,#1B3562,var(--navy-900) 70%)}
/* the footer, shorter: the logo and its line, every link the brief asks for in a tight grid, then the legal line */
.foot{margin-top:28px;padding:22px 0 calc(22px + env(safe-area-inset-bottom));font-size:var(--fs-small);background:var(--navy)}





@media (max-width:340px){}
@media (min-width:900px){.page-head h1,.page-head .h1{font-size:var(--fs-h1)}.sec{padding-block:34px}.sec-head h2{font-size:var(--fs-h2)}}
/* ── 1.37.1 ── */
/* iPhone zooms the page when a field under 16px takes the focus: on phones every field is 16px */
@media (max-width:900px){:root input:not([type=checkbox]):not([type=radio]):not([type=range]),:root textarea,:root select{font-size:var(--fs-field)}}
/* the floating buttons: one place, beside each other, never moved; a page with its own big WhatsApp button has none */
body.no-fab .fabs{display:none!important}
/* «اطلب عرض سعر»: what is missing is said beside its field */
.err-slot{display:none}
.sheet .notice.err,.fs+.notice.err{margin:6px 0 0}
button[aria-busy=true]{opacity:.7;cursor:progress}
.voice-qs{display:grid;gap:10px}
.voice-q{display:grid;gap:6px}
.voice-q p{margin:0;font-size:var(--fs-item);font-weight:600;color:var(--navy)}
.voice-q-b{display:flex;flex-wrap:wrap;gap:6px}
.voice-q-b .btn{width:auto;min-height:40px;flex:0 1 auto}
/* «وصلنا طلبك»: the request as a document */
.doc-head{display:grid;gap:10px}
.doc-head>img{height:44px;width:auto}
.doc-id{font-size:var(--fs-h3);font-weight:700;color:var(--navy)}
.doc-kicker{display:block;font-size:var(--fs-small);font-weight:400;color:var(--muted)}
.print-contact i::before{content:"|";font-style:normal;margin-inline:6px}
.doc-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:0}
.doc-meta div{display:grid;min-width:0}
.doc-meta dt{font-size:var(--fs-small);color:var(--muted)}
.doc-meta dd{margin:0;font-size:var(--fs-small);font-weight:600;color:var(--navy);overflow-wrap:anywhere}
.doc-meta dd small{font-weight:400;color:var(--muted)}
.doc-sec{margin-top:14px;break-inside:avoid}
.doc-sec h3{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:var(--fs-h3);color:var(--navy)}
.doc-sec h3 .ico{width:20px;height:20px;color:var(--teal-700);flex:none}
.doc-sec h3 span{flex:1;min-width:0}
.doc-sec h3 small{font-weight:400;font-size:var(--fs-small);color:var(--muted)}
.doc-lines{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.doc-lines th{font-size:var(--fs-small);font-weight:600;color:var(--muted);text-align:start;padding:4px 0 4px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.doc-lines td{padding:8px 0 8px 6px;border-bottom:1px dashed var(--line);vertical-align:middle}
.doc-lines th:not(:first-child),.doc-lines td:not(:first-child){text-align:end;white-space:nowrap;padding-inline-start:8px}
.doc-lines tr:last-child td{border-bottom:0}
.doc-lines td.num{display:table-cell}
.doc-lines th:first-child,.doc-lines td:first-child{width:100%}
.doc-item{display:flex;align-items:center;gap:8px;min-width:0}
.doc-item img{width:48px;height:32px;object-fit:contain;flex:none;border-radius:6px;background:var(--bg)}
.doc-item>span{display:grid;min-width:0}
.doc-item b{font-weight:600;color:var(--navy)}
.doc-item small{font-size:var(--fs-small);color:var(--muted);overflow-wrap:anywhere}
.doc-strip{margin:12px 0}
.doc-strip .ico{width:22px;height:22px;flex:none;color:var(--teal);stroke-width:2}
@media print{.doc-strip{background:none;color:var(--navy);border:1px solid var(--line);-webkit-print-color-adjust:exact;print-color-adjust:exact}.doc-strip .ico{color:var(--teal-700)}.doc-strip i{background:var(--line)}}
.doc-steps{margin:8px 0 0;padding:0;list-style:none;counter-reset:step;display:grid;gap:10px}
.doc-steps li{counter-increment:step;display:grid;grid-template-columns:30px 1fr;column-gap:10px;align-items:start}
.doc-steps li::before{content:counter(step);grid-row:1 / span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--teal-soft);color:var(--teal-800);font-weight:700;font-size:var(--fs-small)}
.doc-steps b{font-size:var(--fs-small);color:var(--navy)}
.doc-steps span{font-size:var(--fs-small);color:var(--muted)}
.doc-notes{margin:6px 0 0;font-size:var(--fs-small);white-space:normal;overflow-wrap:anywhere}
.print-contact{display:none}
@media print{
  @page{size:A4;margin:14mm}
  .quote-doc{max-width:none}
  .quote-doc .card{box-shadow:none;border:1px solid var(--line);break-inside:avoid}
  .doc-meta{grid-template-columns:repeat(4,minmax(0,1fr))}
  .doc-lines{font-size:10.5pt}
  .print-contact{display:block;margin-top:10px;padding-top:8px;border-top:1px solid var(--line);font-size:10pt;color:var(--muted);text-align:center}
}

/* a service's short blurb: its sentence whole, then (on /services/) one whole point when it is short. Nothing is cut: no clamp, no «…» */
.kind-more{display:block;margin-top:2px;font-size:var(--fs-small);line-height:1.5;color:var(--faint,#7b8798)}
.tile9 small{display:block;padding-inline:4px;font-size:var(--fs-small);line-height:1.45;color:var(--muted)}
/* ── 1.38.1 ── the floating WhatsApp button keeps its corner, so the page ends with room for it: at the end of the scroll it
   covers no last button or field. Only on phones, only while the button floats (no bottom bar is showing) and the page has one. */
@media (max-width:900px){
  body:has(.fabs>*):not(.no-fab):not(.has-total) .foot{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  body:has(.fabs>*):not(.no-fab):not(.has-total):not(:has(.foot)){padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
.biz-form .fs+.notice.err{margin:6px 0 0}
/* ── 1.39.0 ── «اطلب عرض سعر» in three steps */
[data-step][hidden],.qsteps[hidden],.q-nav[hidden],.q-nav .btn[hidden],.ph[hidden],.voice-heard[hidden]{display:none}
.qsteps{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.qsteps li{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:4px 6px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:var(--fs-small);font-weight:600;color:var(--muted);text-align:center}
.qsteps li b{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--muted);font-size:var(--fs-small)}
.qsteps li.on{border-color:var(--navy);color:var(--navy)}
.qsteps li.on b{background:var(--navy);color:#fff}
.qsteps li.done{cursor:pointer;color:var(--teal-800)}
.qsteps li.done b{background:var(--teal-soft);color:var(--teal-800)}
.q-nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:8px}
.q-nav .btn{min-height:48px}
.q-nav [data-prev][hidden]+[data-next]{grid-column:1 / -1}
.q-nav [data-prev]:has(+[data-next][hidden]){grid-column:1 / -1}
.more-opts{border-top:1px dashed var(--line);margin-top:6px;padding-top:4px}
.more-opts>summary,.more-toggle{cursor:pointer;min-height:40px;display:flex;align-items:center;font-size:var(--fs-item);font-weight:600;color:var(--teal-800)}
.more-toggle{width:100%;padding:0;border:0;border-top:1px dashed var(--line);margin-top:6px;background:none;font-family:inherit;text-align:start}
.more-toggle::before{content:"";width:0;height:0;border-inline-start:6px solid currentColor;border-block:5px solid transparent;margin-inline-end:8px}
.more-toggle[aria-expanded=true]::before{transform:rotate(90deg)}
[dir=rtl] .more-toggle[aria-expanded=true]::before{transform:rotate(-90deg)}
.more-toggle[hidden],.line[hidden]{display:none}
[data-site] .more-opts{border-top:0;margin-top:0;padding-top:0}
[data-quick-slot] .voice-heard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px}
[data-quote-page][data-at="1"] .totalbar .tot-row,[data-quote-page][data-at="1"] .totalbar .tot-split{display:none}

/* ── 1.49.0: «العروض» as cards (the designer's offers-v2). One white card per offer: its picture, its name and line, the
   resolution where it is a camera package (two radios: the stylesheet shows the chosen resolution's name, badge, price and
   link — no script), the price in the brand's dotted digits with what it includes, and «احجز». A camera package's picture is
   the scenes its cameras show, laid out like a recorder's screen: two side by side, four in a square, one large and five, one
   large and seven. A scene's number stands at the far corner of its square, the badge at the near one: they never meet. ── */
.pk{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:10px;border-radius:24px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08)}
.pk-r{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pk-r4:checked~.pk-v8,.pk-r8:checked~.pk-v4,.pk-r4:checked~.pk-pic .pk-v8,.pk-r8:checked~.pk-pic .pk-v4{display:none}
.pk-own{position:absolute;inset:0}       /* the owner's own picture of a package covers the scenes */
.pk-pic{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0E1428}
.pk-mo{display:grid;gap:2px;height:100%}
.pk-mo2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pk-mo4{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.pk-mo6{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
.pk-mo6 .pk-cell:first-child{grid-column:1/3;grid-row:1/3}
.pk-mo8{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr))}
.pk-mo8 .pk-cell:first-child{grid-column:1/4;grid-row:1/4}
.pk-cell{position:relative;min-width:0;min-height:0;overflow:hidden}
.pk-cell img{display:block;width:100%;height:100%;object-fit:cover}
.pk-cell b{position:absolute;top:5px;right:5px;display:grid;place-items:center;min-width:20px;height:20px;border-radius:6px;background:rgba(14,20,40,.78);color:#fff;font:700 var(--fs-small)/1 Montserrat,system-ui,sans-serif}
.pk-mo6 .pk-cell:not(:first-child) b,.pk-mo8 .pk-cell:not(:first-child) b{top:3px;right:3px;min-width:18px;height:18px}
[dir=ltr] .pk-mo6 .pk-cell:not(:first-child) b,[dir=ltr] .pk-mo8 .pk-cell:not(:first-child) b{right:auto;left:3px}
.pk-illus{position:absolute;bottom:8px;left:8px;padding:2px 8px;border-radius:8px;background:rgba(14,20,40,.72);color:#fff;font-size:var(--fs-small);line-height:20px}
.pk-img{position:absolute;inset:0;background:var(--surface)}
.pk-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pk-prod img{box-sizing:border-box;object-fit:contain;padding:14px;filter:drop-shadow(0 6px 8px rgba(31,42,75,.2))}
.pk-ico img{margin:auto;width:72px;height:72px;object-fit:contain}
.pk .soon{position:absolute;top:18px;inset-inline-end:18px;margin:0;z-index:1;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;background:var(--mint-soft);color:var(--mint-ink);font-weight:600;font-size:var(--fs-small)}
[dir=ltr] .pk-cell b{right:auto;left:5px}
.pk .soon.pop,.pk-pic>.soon.pop{background:var(--mint-soft);color:var(--mint-ink)}
.pk-pic>.soon{position:absolute;top:8px;inset-inline-end:8px;margin:0;z-index:1;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;font-weight:600;font-size:var(--fs-small)}       /* on the package's own page the badge stands in the picture itself: top left, clear of the first scene's number */
.pk-pic>.soon.pop::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint)}
.pk .soon.soon-2{top:52px}
.pk .soon.pop::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint)}
.pk-head{min-width:0;padding:0 4px}
.pk-head h3{margin:0;font-size:var(--fs-h3);line-height:26px;font-weight:700}
.pk-head h3 a{color:var(--ink)}
.pk-head h3 a::after{content:"";position:absolute;inset:0 0 auto 0;height:0}
.pk-head p{margin:0;font-size:var(--fs-small);line-height:20px;color:var(--ink-muted)}
.pk-res{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px;font-size:var(--fs-small);color:var(--ink-muted)}
.pk-seg{display:inline-flex;gap:2px;padding:4px;border-radius:14px;background:var(--surface)}
.pk-seg label{display:grid;place-items:center;min-width:62px;height:40px;padding:0 10px;border-radius:10px;font:700 var(--fs-ui)/1 Montserrat,system-ui,sans-serif;color:var(--ink-muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
.pk-r4:checked~.pk-res [data-mp="4"],.pk-r8:checked~.pk-res [data-mp="8"]{background:var(--navy);color:#fff}
.pk-r4:focus-visible~.pk-res [data-mp="4"],.pk-r8:focus-visible~.pk-res [data-mp="8"]{outline:2px solid var(--focus,#1F2A4B);outline-offset:2px}
.pk-buy{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding:0 4px 2px}
.pk-cost{display:grid;gap:0;min-width:0}
.pk-cost .offer-price{display:flex;align-items:baseline;gap:8px}
.pk-cost .offer-price bdi{font-family:var(--font-accent);font-weight:700;font-size:var(--fs-price-card);line-height:38px;letter-spacing:.02em;color:var(--ink)}
.pk-cost .offer-price .cur{font-style:normal;font-weight:700;font-size:var(--fs-small);color:var(--ink-muted)}
[dir=ltr] .pk-illus{left:auto;right:8px}
.pk-mo6~.pk-illus{bottom:calc(33.34% + 8px);left:calc(33.34% + 8px)}.pk-mo8~.pk-illus{bottom:calc(25% + 8px);left:calc(25% + 8px)}       /* in the large scene's own corner: it never covers a small scene's number */
[dir=ltr] .pk-mo6~.pk-illus{left:auto;right:calc(33.34% + 8px)}[dir=ltr] .pk-mo8~.pk-illus{left:auto;right:calc(25% + 8px)}
.pk-cost em{font-style:normal;font-size:var(--fs-small);line-height:18px;color:var(--ink-muted)}
.pk-cost small{font-size:var(--fs-small);line-height:18px;font-weight:600;color:var(--ink-muted)}       /* «يبدأ من», over the price of a service that has no ready-made offer (1.54.0) */
/* 1.55.1 (the designer's service-from-cards): the service's picture, its two lines, and the price in the navy box */
.pk-from .pk-head p{color:var(--ink)}
.pk-from .pk-head .pk-more{color:var(--ink-muted)}
.pk-from .pk-cost{gap:4px}
.pk-box{display:inline-flex;align-items:baseline;gap:8px;justify-self:start;padding:6px 14px 5px;border-radius:14px;background:var(--navy)}
.pk-box bdi,.pk-box bdi.num{font-family:var(--font-accent);font-weight:700;font-size:var(--fs-price-card);line-height:34px;letter-spacing:.02em;color:#fff}
.pk-box .cur{font-style:normal;font-weight:700;font-size:var(--fs-small);color:var(--mint)}
.pk-from .pk-buy:has(.btn:only-child){justify-content:flex-end}
.pk-from .pk-buy{flex-wrap:wrap}          /* in a narrow card the button goes under the price, whole */
.pk-from .pk-buy .btn{flex:1 1 auto}
.pk-note{margin:0;font-size:var(--fs-small);line-height:18px;color:var(--ink-muted)}
/* the bottom bar of «العروض» follows the tab (1.55.1); 1.59.0: under «خدمات أخرى» it is the service shown first there — its name, its price and its own button */
.oh-bar-t{display:none}
body:has(#ot-other:checked) .oh-bar-t[data-bar-tab=other]{display:contents}
body:has(#ot-other:checked) .oh-bar:has([data-bar-tab=other]) [data-bar-main]{display:none}
.pk-buy .btn{flex:none;min-height:48px;min-width:84px;padding:0 20px;border-radius:999px}
.ot-p{grid-template-columns:minmax(0,1fr);gap:14px}
.ot-row .ot-p{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(300px,82%);gap:12px;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ot-row .ot-p::-webkit-scrollbar{display:none}
.ot-row .pk{scroll-snap-align:start}
.ot-row .ol-more{align-self:center}
.sec-head a.all-go,a.all-go{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 12px 0 8px;border-radius:999px;background:var(--mint-soft);color:var(--mint-ink);font-weight:600}
[dir=ltr] .sec-head a.all-go,[dir=ltr] a.all-go{padding:0 8px 0 12px}
.sec-head a.all-go .ico,a.all-go .ico{width:18px;height:18px}
a.all-go.ol-more{justify-self:center;align-self:center}
@media (min-width:900px){
  .ot-p{grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:16px}
  .ot-row .ot-p{grid-auto-columns:minmax(244px,calc((100% - 48px) / 4));margin-inline:0;padding:4px 2px 14px;scroll-padding-inline:2px}
  .pk{padding:12px}
}
@media (prefers-reduced-motion:no-preference){.ot-row .ot-p{scroll-behavior:smooth}}

/* ── 1.49.0: the page of one offer (the designer's package-v2). A phone reads it in one column, in the order of the model; a
   wide screen puts the order card, the resolution and the three facts in a column of their own beside the rest. ── */
.pkg-form{display:flex;flex-direction:column;gap:14px}
.pkg-main,.pkg-side{display:contents}
.pkg-pitch{order:1}.pkg .pack-more{order:2}.pkg-facts{order:3}.pkg-parts{order:4}.pkg-extra{order:5}.pkg .terms{order:6}.pkg-also{order:7}.pkg-order{order:8}
.pkg-pitch,.pkg-parts,.pkg-extra,.pkg .terms,.pkg .pack-more,.pkg-order{margin:0;padding:12px;border:0;border-radius:24px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08)}
.pkg-pitch{display:grid;gap:12px}
.pkg-pitch .pitch{margin:0;padding:0 4px 4px;background:none;color:var(--ink)}
.pkg-pitch .pitch h2{color:var(--ink);font-size:var(--fs-h2);line-height:30px}
.pkg-pitch .pitch li{color:var(--ink)}
.pkg-pitch .pitch li .ico,.pkg-parts .ticks .ico{color:var(--mint-ink)}
.pkg .pack-more{display:grid;gap:6px}
.pkg .seg-links{gap:2px;padding:4px;border-radius:14px;background:var(--surface)}
.pkg .seg-links a{min-height:40px;border:0;border-radius:10px;background:none;color:var(--ink-muted)}
.pkg .seg-links a.on{background:var(--navy);color:#fff}
.pkg .pack-help{justify-self:start;min-height:44px;color:var(--mint-ink);text-decoration:underline;text-underline-offset:4px}
.pkg-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pkg-facts:empty{display:none}
.pkg-facts li{display:grid;justify-items:center;gap:4px;padding:12px 6px;border-radius:16px;background:var(--mint-soft);color:var(--ink);font-family:var(--font-heading);font-weight:600;font-size:var(--fs-small);line-height:20px;text-align:center}
.pkg-facts .ico{width:22px;height:22px;color:var(--mint-ink)}
.pkg-parts{display:grid;gap:12px;background:none;box-shadow:none;padding:0}
.pkg-parts .parts{margin:0}
.pkg-parts .parts-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pkg-parts .parts-grid:has(li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}       /* four parts: two and two, never three and one alone */
.pkg-parts .ticks{padding:12px;border-radius:24px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08)}
.pkg-extra{min-width:0}
.pkg-extra legend{float:inline-start;width:100%;padding:0 4px 8px;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h3);color:var(--ink)}
.pkg-extra legend small{font-family:var(--font-body);font-weight:500;font-size:var(--fs-small);color:var(--ink-muted)}
.pkg-chips{clear:both;display:flex;gap:8px;overflow-x:auto;padding:2px;scrollbar-width:none}
.pkg-chips::-webkit-scrollbar{display:none}
.pkg-chips label{flex:none;position:relative}
.pkg-chips input{position:absolute;opacity:0;width:1px;height:1px}
.pkg-chips span{direction:ltr;display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:52px;height:44px;padding:0 14px;border:1.5px solid var(--border-strong,#7A8499);border-radius:12px;background:#fff;color:var(--ink);font-family:var(--font-heading);font-weight:600;font-size:var(--fs-item);cursor:pointer;white-space:nowrap}
.pkg-chips input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.pkg-chips input:focus-visible+span{outline:2px solid var(--focus,#1F2A4B);outline-offset:2px}
.pkg .terms summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 4px;list-style:none;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h3);color:var(--ink)}
.pkg .terms summary::-webkit-details-marker{display:none}
.pkg .terms summary .ico{width:20px;height:20px;transition:transform .2s}
.pkg .terms[open] summary .ico{transform:rotate(180deg)}
.pkg .terms ul{margin:4px 0 4px;padding-inline-start:22px;font-size:var(--fs-ui);line-height:24px;color:var(--ink-muted)}
.pkg-also-in{display:grid;gap:10px}
.pkg .suggest,.pkg .suggest.upgrade{padding:14px;border-radius:20px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08)}
.pkg-order{display:grid;gap:12px}
@media (min-width:900px){
  .pkg .totalbar{order:9;position:static;border:0;border-radius:24px;box-shadow:0 2px 12px rgba(18,40,76,.08);padding:16px 0}
  .pkg-form{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
  .pkg-main,.pkg-side{display:grid;gap:16px;min-width:0}
  .pkg-side{position:sticky;top:calc(var(--header-h) + 20px)}
  .pkg-cams .pkg-pitch{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;padding:12px}
  .pkg-pitch .pitch{padding:8px 8px 8px 4px}
  .pkg-parts{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start;padding:12px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08)}
  .pkg-parts[data-bare]{grid-template-columns:minmax(0,1fr)}
  .pkg-parts .ticks{padding:4px 8px;background:none;box-shadow:none}
  .pkg-also-in{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ── 1.55.0: «مخطط تغطية الكاميرات» on a camera package's page (the designer's camera-coverage-plan). The plan is drawn by
   web/coverage.py; radios choose the camera and the rules below mark it, so it works with no script ── */
.pkg-cover{order:4}
.cp{display:grid;gap:10px;min-width:0;scroll-margin-top:calc(var(--header-h) + 16px)}
.cp-head{margin:0;align-items:center;gap:6px}
.cp .cp-head h2{padding-inline-start:30px;font-size:var(--fs-ui);line-height:24px;white-space:nowrap}          /* on a phone the heading and the four numbers share one row: a shorter dash */
[dir=ltr] .cp .cp-head h2{white-space:normal}          /* the English heading is longer: it takes a second line */
.cp .cp-head h2::before{top:15px;width:16px}
.cp .cp-head h2::after{top:11px;inset-inline-start:16px}
.cp-n{display:flex;gap:4px;margin-inline-start:auto;flex:none}
.cp-n a{display:grid;place-items:center;min-width:32px;height:34px;border-radius:10px;border:1.5px solid #8A93A6;background:#fff;color:var(--ink);font-family:var(--font-heading);font-weight:700;font-size:var(--fs-item)}
.cp-n a[aria-current]{background:var(--navy);border-color:var(--navy);color:#fff}
.cp-card{position:relative;display:grid;gap:10px;min-width:0;padding:12px;border-radius:24px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08)}
.cp-r{position:absolute;opacity:0;pointer-events:none}
.cp-plan{min-width:0}
.cp-plan svg{display:block;width:100%;height:auto;border-radius:14px}
.cp-plan text{font-family:var(--font-heading);font-weight:600}
.cp-plan .cp-m text{font-family:var(--font-latin);font-weight:700}
.cp-plan [data-cp]{cursor:pointer}
.cp-key{display:flex;flex-wrap:wrap;gap:4px 12px;margin:8px 0 0;font-size:var(--fs-small);line-height:20px;color:var(--ink-muted)}
.cp-k{display:inline-flex;align-items:center;gap:6px}
.cp-k i{width:16px;height:10px;border-radius:3px;background:rgba(84,186,167,.45)}
.cp-k-in i{background:rgba(84,186,167,.25);outline:1px dashed #54BAA7}
.cp-s{display:none;grid-template-columns:132px minmax(0,1fr);gap:10px;align-items:center}
.cp-shot{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0E1428}
.cp-shot img{display:block;width:100%;height:100%;object-fit:cover}
.cp-shot em{position:absolute;inset-inline-start:5px;bottom:5px;padding:0 6px;border-radius:6px;background:rgba(14,20,40,.7);color:#fff;font-style:normal;font-size:var(--fs-small);line-height:20px}
.cp-code{display:block;font-family:var(--font-latin);font-weight:700;font-size:var(--fs-small);line-height:18px;letter-spacing:.04em;color:var(--mint-ink);text-align:start}
.cp-s strong{display:block;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h3);line-height:24px;color:var(--ink)}
.cp-s small{display:block;font-size:var(--fs-small);line-height:19px;color:var(--ink-muted)}
.cp-chips{display:flex;flex-wrap:wrap;gap:6px}
.cp-chips label{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding-inline:6px 12px;border-radius:999px;background:var(--surface);color:var(--ink);font-size:var(--fs-ui);cursor:pointer;-webkit-tap-highlight-color:transparent}
.cp-chips b{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-size:var(--fs-small)}
/* 1.62.0 (the designer's coverage-plan-v3): only the chosen camera's cone and what it guards show; the others are marks with a wedge; under the plan — what it covers, its scene whole, and the names in one row that is dragged */
.cp-plan .cp-c,.cp-plan .cp-h{display:none}
.cp-plan .fp-names text{font-family:var(--font-heading);font-weight:500}
.cp-l{display:none;align-items:center;gap:8px;margin:0;font-size:var(--fs-small);line-height:22px;color:var(--ink)}
.cp-l b{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#167565;color:#fff;font-size:var(--fs-small)}
.cp-l .cp-lt{color:var(--ink-muted)}
.cp-l strong{font-family:var(--font-heading);font-weight:600}
.cp .cp-s{grid-template-columns:none}
.cp .cp-shot{display:block;border-radius:14px}
.cp .cp-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-12px;padding-inline:12px;scroll-padding-inline:12px}
.cp .cp-chips::-webkit-scrollbar{display:none}
.cp .cp-chips label{flex:none;white-space:nowrap}
#cp-r1:checked~.cp-plan .cp-c1,#cp-r2:checked~.cp-plan .cp-c2,#cp-r3:checked~.cp-plan .cp-c3,#cp-r4:checked~.cp-plan .cp-c4,#cp-r5:checked~.cp-plan .cp-c5,#cp-r6:checked~.cp-plan .cp-c6,#cp-r7:checked~.cp-plan .cp-c7,#cp-r8:checked~.cp-plan .cp-c8,#cp-r1:checked~.cp-plan .cp-h1,#cp-r2:checked~.cp-plan .cp-h2,#cp-r3:checked~.cp-plan .cp-h3,#cp-r4:checked~.cp-plan .cp-h4,#cp-r5:checked~.cp-plan .cp-h5,#cp-r6:checked~.cp-plan .cp-h6,#cp-r7:checked~.cp-plan .cp-h7,#cp-r8:checked~.cp-plan .cp-h8{display:block}#cp-r1:checked~.cp-plan .cp-w1,#cp-r2:checked~.cp-plan .cp-w2,#cp-r3:checked~.cp-plan .cp-w3,#cp-r4:checked~.cp-plan .cp-w4,#cp-r5:checked~.cp-plan .cp-w5,#cp-r6:checked~.cp-plan .cp-w6,#cp-r7:checked~.cp-plan .cp-w7,#cp-r8:checked~.cp-plan .cp-w8{display:none}#cp-r1:checked~.cp-plan .cp-m1 circle,#cp-r2:checked~.cp-plan .cp-m2 circle,#cp-r3:checked~.cp-plan .cp-m3 circle,#cp-r4:checked~.cp-plan .cp-m4 circle,#cp-r5:checked~.cp-plan .cp-m5 circle,#cp-r6:checked~.cp-plan .cp-m6 circle,#cp-r7:checked~.cp-plan .cp-m7 circle,#cp-r8:checked~.cp-plan .cp-m8 circle{fill:#167565;r:9.5px}#cp-r1:checked~.cp-lines .cp-l1,#cp-r2:checked~.cp-lines .cp-l2,#cp-r3:checked~.cp-lines .cp-l3,#cp-r4:checked~.cp-lines .cp-l4,#cp-r5:checked~.cp-lines .cp-l5,#cp-r6:checked~.cp-lines .cp-l6,#cp-r7:checked~.cp-lines .cp-l7,#cp-r8:checked~.cp-lines .cp-l8{display:flex}#cp-r1:checked~.cp-see .cp-s1,#cp-r2:checked~.cp-see .cp-s2,#cp-r3:checked~.cp-see .cp-s3,#cp-r4:checked~.cp-see .cp-s4,#cp-r5:checked~.cp-see .cp-s5,#cp-r6:checked~.cp-see .cp-s6,#cp-r7:checked~.cp-see .cp-s7,#cp-r8:checked~.cp-see .cp-s8{display:block}#cp-r1:checked~.cp-chips [for=cp-r1],#cp-r2:checked~.cp-chips [for=cp-r2],#cp-r3:checked~.cp-chips [for=cp-r3],#cp-r4:checked~.cp-chips [for=cp-r4],#cp-r5:checked~.cp-chips [for=cp-r5],#cp-r6:checked~.cp-chips [for=cp-r6],#cp-r7:checked~.cp-chips [for=cp-r7],#cp-r8:checked~.cp-chips [for=cp-r8]{background:var(--mint-soft);color:var(--mint-ink);font-weight:600}#cp-r1:checked~.cp-chips [for=cp-r1] b,#cp-r2:checked~.cp-chips [for=cp-r2] b,#cp-r3:checked~.cp-chips [for=cp-r3] b,#cp-r4:checked~.cp-chips [for=cp-r4] b,#cp-r5:checked~.cp-chips [for=cp-r5] b,#cp-r6:checked~.cp-chips [for=cp-r6] b,#cp-r7:checked~.cp-chips [for=cp-r7] b,#cp-r8:checked~.cp-chips [for=cp-r8] b{background:#167565}#cp-r1:focus-visible~.cp-chips [for=cp-r1],#cp-r2:focus-visible~.cp-chips [for=cp-r2],#cp-r3:focus-visible~.cp-chips [for=cp-r3],#cp-r4:focus-visible~.cp-chips [for=cp-r4],#cp-r5:focus-visible~.cp-chips [for=cp-r5],#cp-r6:focus-visible~.cp-chips [for=cp-r6],#cp-r7:focus-visible~.cp-chips [for=cp-r7],#cp-r8:focus-visible~.cp-chips [for=cp-r8]{outline:3px solid var(--mint-ink);outline-offset:2px}
@media (min-width:900px){
  .pkg-form>.pkg-main{grid-area:1/1}
  .pkg-form>.pkg-cover{grid-area:2/1}
  .pkg-form>.pkg-side{grid-area:1/2/3/3}          /* the order column runs beside both, so it never rides over the plan */
  .cp .cp-head h2{padding-inline-start:46px;font-size:var(--fs-h2);line-height:32px;white-space:normal}          /* as every other section's heading */
  .cp .cp-head h2::before{top:19px;width:26px}
  .cp .cp-head h2::after{top:15px;inset-inline-start:26px}
  .cp-card{grid-template-columns:minmax(0,560px) minmax(240px,1fr);grid-template-areas:"plan line" "plan see" "plan chips";grid-template-rows:auto auto 1fr;align-items:start;gap:12px 20px;padding:16px}          /* the plan no wider than 560px, the chosen camera's scene beside it, large */
  .pkg-form .cp-card{grid-template-areas:"plan line" "plan see" "chips chips";grid-template-rows:auto 1fr auto}          /* in the package page's narrower column the cameras' names run under the plan, not down a long empty side */
  .cp-plan{grid-area:plan}
  .cp-lines{grid-area:line}
  .cp .cp-chips{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}
  .cp-l{font-size:var(--fs-body)}
  .cp-see{grid-area:see}
  .cp-chips{grid-area:chips}
  .cp-s{grid-template-columns:minmax(0,1fr)}
  .cp-s strong{font-size:var(--fs-h3);line-height:28px}
}

/* ── 1.55.1: a service's page (the designer's service-cctv-v2). The head is the name, the line and the picture whole; the
   service's offers are the cards of «العروض», in a row that is pulled sideways on a phone ── */
.svc-top{display:grid;gap:12px;padding-top:14px;padding-bottom:6px}
.svc-top h1{margin:0}
.svc-top .lead{margin:4px 0 0}
.svc-top-more{display:none}
.svc-pic{position:relative;margin:0;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:var(--surface-post)}
.svc-pic img{display:block;width:100%;height:100%;object-fit:cover}
.svc-pic figcaption{position:absolute;bottom:10px;inset-inline-start:10px;padding:2px 9px;border-radius:8px;background:rgba(14,20,40,.72);color:#fff;font-size:var(--fs-small);line-height:20px}
.svc-cover{padding-top:10px}
.svc-cover .pkg-cover{order:0}
.svc-cards{display:grid;grid-auto-flow:column;grid-auto-columns:min(300px,82%);gap:12px;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.svc-cards::-webkit-scrollbar{display:none}
.svc-cards .pk{scroll-snap-align:start}
.svc-cards:has(.pk:only-child){grid-auto-columns:100%}
.svc-v2 .svc-points{margin-top:6px;padding:12px;border-radius:24px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08)}
.svc-order .btn-primary:only-child{width:100%}
.svc-sec .sec-head{align-items:center}
.svc-sec .sec-head h2{font-size:var(--fs-h2)}          /* «العروض والأسعار» and its pill on one row of a phone */
@media (min-width:900px){
  .svc-top{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:32px;padding-top:24px}
  .svc-top-more{display:grid;gap:16px;justify-items:start;margin-top:16px}
  .svc-top-more .svc-points{margin:0}
  .svc-v2 .svc-points{display:none}          /* on a wide screen the three points stand in the head, beside the picture */
  .svc-cards{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-inline:0;padding:4px 0 14px;overflow:visible}
  .svc-sec .faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
  .svc-sec .faq>*{margin:0}
  .svc-order .btn-primary:only-child{width:auto}
  .svc-sec .sec-head h2{font-size:var(--fs-h2)}
}

/* ── 1.56.0 (the designer's business-v2 and services-and-footer-lighter): rows — a line icon in a soft mint square, a name,
   one line, an arrow, the whole row a link — each its own card (.lrows) or all in one card (.lcard) ── */
.lrows{display:grid;gap:10px}
.lrow{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px;border-radius:20px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08);color:var(--ink)}
.lrow-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--mint-soft);color:var(--mint-ink)}
.lrow-ico .ico{width:22px;height:22px}
.lrow .grow{flex:1;display:grid;gap:2px;min-width:0}
.lrow b{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h3);line-height:24px}
.lrow small{font-size:var(--fs-small);line-height:20px;color:var(--ink-muted)}
.lrow>.ico{flex:none;width:18px;height:18px;color:var(--ink-muted)}
.lcard{padding:4px 14px;border-radius:24px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08)}
.lcard .lrow{padding:12px 0;border-radius:0;background:none;box-shadow:none;border-bottom:1px solid var(--line)}
.lcard .lrow:last-child{border-bottom:0}
/* /services/: a service's own picture at the start of its card */
.svc-list{display:grid;gap:12px}
.svc-card{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border-radius:24px;background:#fff;box-shadow:0 2px 12px rgba(18,40,76,.08);color:var(--ink)}
.svc-card-pic{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--surface-post)}
.svc-card-pic img{display:block;width:100%;height:100%;object-fit:cover}
.svc-card-pic em{position:absolute;bottom:5px;inset-inline-start:5px;padding:0 6px;border-radius:6px;background:rgba(14,20,40,.72);color:#fff;font-style:normal;font-size:var(--fs-small);line-height:20px}
.svc-card .grow{display:grid;gap:2px;min-width:0}
.svc-card b{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h3);line-height:26px}
.svc-card small{font-size:var(--fs-ui);line-height:22px;color:var(--ink)}
.svc-card small.kind-more{font-size:var(--fs-small);line-height:20px;color:var(--ink-muted)}
.svc-top .svc-title{margin:0;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h1);line-height:38px;color:var(--ink)}
/* the companies' page */
.biz-grid{display:grid;gap:8px}
.biz-rows{min-width:0}
/* the footer, lighter: the logo and its line, the two ways to reach us, the links in two columns, one last line */






@media (min-width:900px){

  .lcard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;padding:8px 20px}
  .lcard .lrow:nth-last-child(2):nth-child(odd){border-bottom:0}
  .svc-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .svc-card{grid-template-columns:180px minmax(0,1fr);gap:16px;padding:12px}
  .biz-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:32px;align-items:start}
  .biz-rows{position:sticky;top:calc(var(--header-h) + 20px)}          /* the rows stay beside the longer form */


}

/* ── 1.57.0: the quote's three steps in the new dress (the designer's quote-v2-step-1/2/3). Looks only: the form, its
   fields, its checks, its sentences and the voice path are as they were ── */
.q2-head{margin:10px 0 12px}
.q2-head h1{margin:0}
.q2-head .lead{margin:4px 0 0}
.q2 .qsteps{grid-template-columns:1.08fr .86fr 1.22fr;gap:5px;margin-bottom:14px}
.q2 .qsteps li{min-height:44px;padding:4px 6px;gap:5px;min-width:0;border:0;border-radius:999px;background:#fff;box-shadow:0 2px 10px rgba(18,40,76,.07);font-family:var(--font-heading);font-size:var(--fs-small);color:var(--ink);white-space:nowrap}
.q2 .qsteps li b{width:26px;height:26px;background:var(--surface);color:var(--ink-muted);font-family:var(--font-latin)}
.q2 .qsteps li.on{background:var(--navy);color:#fff}
.q2 .qsteps li.on b{background:var(--mint);color:var(--navy)}
.q2 .qsteps li.done{color:var(--ink)}
.q2 .qsteps li.done b{background:var(--mint-soft);color:var(--mint-ink)}
.q2 .card{border:0;border-radius:24px;box-shadow:0 2px 12px rgba(18,40,76,.08)}
.q2 .choice>span{border-radius:999px}
.q2 [data-step="1"] .choice .ico{display:none}
.q2 .choices.tight{display:inline-flex;gap:0;padding:3px;border-radius:999px;background:var(--surface)}
.q2 .choices.tight .choice>span{min-height:38px;padding:0 16px;border:0;box-shadow:none;background:none;border-radius:999px;font-family:var(--font-latin);font-weight:700;color:var(--ink-muted)}
.q2 .choices.tight .choice input:checked+span{background:var(--navy);color:#fff}
.q2 .stepper{grid-template-columns:40px 40px 40px;height:40px;border:0;border-radius:0;background:none;overflow:visible}
.q2 .stepper button{width:40px;height:40px;border-radius:50%;background:var(--surface);color:var(--ink)}
.q2 .stepper button:hover{background:var(--surface-post)}
.q2 .stepper button:disabled{background:var(--surface);color:var(--line-strong)}
.q2 .stepper input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]){border:0;border-radius:0;box-shadow:none;background:none;min-height:0;padding:0;font-family:var(--font-latin);font-size:var(--fs-num)}          /* the number stands bare between the two round buttons */
.q2 .totalbar .tot-row{align-items:center}
.q2 .totalbar .tot-row>span{font-size:var(--fs-ui);color:var(--ink-muted)}
.q2 .totalbar .tot-row b{display:inline-flex;align-items:baseline;gap:8px;padding:6px 14px 5px;border-radius:14px;background:var(--navy);color:#fff}
.q2 .totalbar .tot-row b .num{font-family:var(--font-latin);font-weight:700;font-size:var(--fs-h1);line-height:30px;color:#fff}
.q2 .totalbar .tot-row b .cur{margin:0;font-size:var(--fs-small);font-weight:700;color:var(--mint)}
.q2 .q-nav .btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--navy)}
/* «وصلنا طلبك» (the designer's quote-v2-received), on a screen only — the printed document keeps its own rules: the tick in
   the order's green, white cards, and the total in the navy box */
@media screen{
  .quote-doc .empty.ok{padding:26px 12px 20px}
  .quote-doc .empty.ok>.ico{width:72px;height:72px;padding:18px;background:var(--cta-bg);color:#fff}
  .quote-doc>.card{border:0;border-radius:24px;box-shadow:0 2px 12px rgba(18,40,76,.08)}
  .quote-doc .tot-row.price-hero{align-items:center}
  .quote-doc .tot-row.price-hero b{display:inline-flex;align-items:baseline;gap:8px;padding:8px 16px 6px;border-radius:16px;background:var(--navy)}
  .quote-doc .tot-row.price-hero b .num{font-size:var(--fs-price-card);color:#fff}
  .quote-doc .tot-row.price-hero b .cur{margin:0;font-weight:700;color:var(--mint)}
}

/* ── 1.58.0 (the designer's offers-v3 and her review of the wide screen) ── */
.pk .soon:not(.pop){background:var(--offer-ink);color:#fff}          /* «لفترة محدودة»: the red of offers, and only where the offer's own row says so */
.pk-cost .offer-price s{color:var(--offer-ink);text-decoration-color:var(--offer)}
.pk-need{display:none}
@media (min-width:900px){
  /* the bottom bar keeps to the page's own width: no two far ends with an empty middle */
  .oh-bar[data-oh-bar]{padding-inline:max(var(--gutter),calc((100vw - 1120px) / 2 + var(--gutter)))}
  /* «العروض»: a navy card fills what the last row leaves, with the page's own words */
  .ot:not(.ot-row) .pk-need{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;grid-column:span 2;min-height:220px;padding:28px;border-radius:24px;background:var(--navy);color:#fff}
  .pk-need b{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-h2);line-height:32px}
  .ot:has(#ot-all:checked) ~ .need-row{display:none}
}

/* ── 1.58.0 (the designer's quote-print-a4-v2): the printed quote in the identity's dress — a navy head with the light logo,
   a navy head on each table, and the total in the navy box. Shape only: what the document says, and its labels, are as
   they were ── */
@media print{
  .quote-doc{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .quote-doc .print-head{margin:0 0 10px;padding:12px 16px;border:0;border-radius:10px;background:#1F2A4B}
  .quote-doc .print-head b{color:#fff}
  .quote-doc .print-head span{color:#D5DAE6}
  .quote-doc .card{margin:0 0 8px;padding:8px 0;border:0;border-radius:0;box-shadow:none;background:none}
  .quote-doc .doc-sec{margin-top:8px}
  .quote-doc .doc-lines thead th{padding:5px 8px;border:0;background:#1F2A4B;color:#fff}
  .quote-doc .doc-lines thead th:first-child{border-start-start-radius:6px;border-end-start-radius:6px}
  .quote-doc .doc-lines thead th:last-child{border-start-end-radius:6px;border-end-end-radius:6px}
  .quote-doc .doc-lines td{padding:5px 0 5px 6px}
  .quote-doc .tot-row.price-hero{align-items:center;margin-top:8px;padding-top:8px}
  .quote-doc .tot-row.price-hero b{display:inline-flex;align-items:baseline;gap:8px;padding:6px 14px 5px;border-radius:10px;background:#1F2A4B}
  .quote-doc .tot-row.price-hero b .num{font-size:24pt;color:#fff}
  .quote-doc .tot-row.price-hero b .cur{margin:0;font-weight:700;color:#54BAA7}
  .quote-doc .doc-steps{margin:4px 0 0}
  .quote-doc .print-contact{margin-top:8px;border-top:2px solid #1F2A4B;color:#1F2A4B}
}

/* ── 1.58.1: the printed quote, closer set, so an ordinary request is one A4 page (measured by switching these rules on in
   the browser at the page's own width: a request for cameras and Wi-Fi was a page and a half). Sizes and spaces only ── */
@media print{
  .quote-doc{font-size:10pt;line-height:1.35}
  .quote-doc .print-head{padding:9px 14px;margin-bottom:6px}
  .quote-doc .print-head img{height:40px;width:auto}
  .quote-doc .card{margin:0 0 4px;padding:4px 0}
  .quote-doc .doc-meta{gap:2px 12px;margin:0}
  .quote-doc .doc-meta dt{font-size:8.5pt}
  .quote-doc .doc-meta dd{font-size:10pt;margin:0}
  .quote-doc .pay-top h2{font-size:12pt;margin:0}
  .quote-doc .est-note{margin:4px 0;padding:5px 8px;font-size:8.5pt;line-height:1.35}
  .quote-doc .doc-sec{margin-top:6px}
  .quote-doc .doc-sec h3{margin:0 0 2px;font-size:10.5pt}
  .quote-doc .doc-lines{font-size:9.5pt}
  .quote-doc .doc-lines td{padding:2px 0 2px 6px}
  .quote-doc .doc-item{gap:6px}
  .quote-doc .doc-item img{width:30px;height:20px}
  .quote-doc .doc-item>span{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
  .quote-doc .doc-item small{font-size:8.5pt}
  .quote-doc .tot-row.price-hero{margin-top:4px;padding-top:6px}
  .quote-doc .tot-row.price-hero b .num{font-size:20pt}
  .quote-doc .doc-strip{margin:4px 0;padding:4px 8px;font-size:9pt}
  .quote-doc .doc-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;margin:2px 0 0;font-size:9pt}
  .quote-doc .doc-steps li{margin:0;padding:0}
  .quote-doc h2.h-sm{margin:0 0 2px;font-size:11pt}
  .quote-doc .print-note,.quote-doc .hint{margin:3px 0 0;font-size:8.5pt}
  .quote-doc .print-contact{margin-top:6px;padding-top:5px;font-size:9pt}
}
/* 1.58.1: the footer's «اسأل الذكاء الاصطناعي عنا» of the other pages lands here; the line stops under the fixed bar, not behind it */
.ask-line{scroll-margin-top:calc(var(--header-h) + 26px)}
/* 1.61.0: the fils of a price are smaller than its dinars («22.750»); on paper they keep the size of the number */
.fils{font-size:.78em}
@media print{.fils{font-size:inherit}}
/* 1.60.0: on a narrow phone the four tabs of «العروض» stand in one row with no dragging */
@media (max-width:400px){.ot-bar{gap:6px}.ot-l{padding:0 9px;font-size:var(--fs-ui)}}
/* 1.61.0: the English bar on a wide screen: its links are a step larger now (14px), so they stand closer and the bar stays inside 1366px */
@media (min-width:1240px) and (max-width:1499px){[dir=ltr] .desk-nav{gap:0}[dir=ltr] .desk-nav a{padding:8px 7px}}
/* 1.62.0: the bar at the top is 56px on a phone (64px on a wide screen, as it was): the logo, the menu, the language and the account stand smaller in it, each still at least 40px to the finger */
@media (max-width:899px){.topbar .wrap{gap:6px}.topbar .brand img,.topbar .brand picture img{height:36px}.topbar .icon-btn{width:40px;height:40px}.topbar .lang-switch{min-width:40px;min-height:40px;padding:0 8px}.topbar .pill{height:40px}}
/* 1.63.3: every dotted price is the plain Bold cut again, in its rule's own colour. The colour cuts (1.63.0) drew nothing at all
   on the owner's iPhone — Safari loads them and paints empty glyphs, so no fallback steps in and the price is not there. Their
   two files stay in static/fonts/v2/, named by no stylesheet (tests/test_round1633.py), until they can be tried on a real iPhone. */
/* 1.80.0, the owner: «هذا البار خله دايم موجود وتفاعلي». The bar is there from the first screen and never rests (the class 1.63.0 put on it is gone). */
.oh-bar{transition:transform .25s ease,visibility .25s}
@media (prefers-reduced-motion:reduce){.oh-bar{transition:none}}
/* 1.63.2: the dotted colour type is never set under 34px (under that its grey dots crowd the figure): a total in a bar — the
   estimate's result, the live total of a quote — is Montserrat 700 in the ink's colour, large and plain, its fils smaller */
.tot-row b .num[data-total]{font-family:var(--font-latin);font-weight:700;font-size:var(--fs-h1);line-height:var(--lh-h1)}
/* 1.64.0, the owner: a box does not grow and shrink as what is in it changes. The bar of a total keeps one line under the
   total whatever the numbers are (a very long line is cut with dots; the same numbers stand whole in the page above it) */
.totalbar .tot-split{flex-wrap:nowrap;min-height:26px}
.totalbar .tot-split>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.totalbar .tot-split .chip{flex:none}
/* ── 1.66.0, the estimate (/estimate/) on the second designer's S12, S13 and S13b, in the site's own parts (the owner: «خلها
   مندمجة بالموقع لا تصير نشاز كتصميم»): the kind of place is three cards to choose from, the systems a list of rows, and the
   result is its total in a card of its own, the price as an invoice, and a bar at the foot with the total and the way on. ── */
.wiz .ph-sm{height:150px}
.wiz .ph-sm img{object-position:50% 78%}
.wiz-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-muted)}
.wiz-steps span:last-child{text-align:end}
.opts{display:grid;gap:8px}
.optc{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 12px;min-height:64px;padding:12px 16px;border:1.5px solid var(--line);border-radius:18px;background:#fff;color:var(--navy);text-align:start;cursor:pointer;box-shadow:var(--shadow)}
.optc b{font-family:var(--font-heading);font-size:var(--fs-item);line-height:var(--lh-item);font-weight:600}
.optc small{grid-column:2;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-muted)}
.optr{grid-row:1/3;width:22px;height:22px;box-sizing:border-box;border:2px solid var(--line-strong);border-radius:50%}
.optc[aria-pressed=true]{border-color:var(--navy);border-width:2px;padding:11.5px 15.5px}
.optc[aria-pressed=true] .optr{border:6px solid var(--navy)}
.optc:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wiz-q{display:block;margin-top:18px}
.wiz-q+.seg{margin-top:8px}
.pick-list{display:grid;gap:8px}
.pick-list .pick-card{grid-template-columns:auto 44px minmax(0,1fr);grid-template-areas:"tick ico t" "tick ico s";align-items:center;gap:0 12px;min-height:72px;padding:10px 16px;border-radius:18px}
.pick-list .pick-card .badge-ico{grid-area:ico;width:44px;height:44px}
.pick-list .pick-card b{grid-area:t;align-self:end;font-family:var(--font-heading);font-size:var(--fs-item);line-height:var(--lh-item)}
.pick-list .pick-card small{grid-area:s;align-self:start;line-height:var(--lh-small)}
.pick-list .pick-card .tick{grid-area:tick;position:static;width:24px;height:24px;border-radius:7px;transform:none}
.pick-list .pick-card[aria-pressed=true]{border-width:2px;background:#fff}
/* 1.80.0: over the first step, for who came from the banner's «تحت الإنشاء»: what the owner's figure includes, numbered as he wrote it */
.wiz-incl{display:grid;gap:8px;margin:0 0 16px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-raised)}
.wiz-incl-h{margin:0;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-body);color:var(--navy)}
.wiz-incl ol{display:grid;gap:0;margin:0;padding:0;list-style:none}
.wiz-incl li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;padding:8px 0;font-size:var(--fs-ui);line-height:22px}
.wiz-incl li+li{border-top:1px solid #E6E8EB}
.wiz-incl li i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-style:normal;font-family:var(--font-latin);font-weight:700;font-size:var(--fs-small)}
.wiz-incl-f{margin:0;color:var(--mint-ink);font-family:var(--font-heading);font-weight:600;font-size:var(--fs-ui)}
.wiz-more{display:grid;gap:10px;margin:18px 0 0}
.wiz-more .more{display:inline-flex;align-items:center;gap:6px}
.wiz-more .ico{width:14px;height:14px}
/* the result */
.est-head h1{display:block;font-size:var(--fs-h1);line-height:var(--lh-h1)}
.est-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:4px 0 0;font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink-muted)}
.est-meta .more{flex:none;margin:0}
.est-total{display:grid;gap:10px;padding:16px}
.est-total-h{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--fs-ui);font-weight:600;color:var(--navy)}
.est-big{display:flex;align-items:baseline;justify-content:flex-end;gap:8px;min-height:64px;margin:0;color:var(--navy)}
[dir=ltr] .est-big{justify-content:flex-start}
.est-big b{font-family:var(--font-accent);font-weight:700;font-size:var(--fs-price-xl);line-height:1;letter-spacing:.02em}
.est-big-rest{font-family:var(--font-latin);font-weight:700;font-size:var(--fs-num-lg);white-space:nowrap}
.est-split{display:flex;gap:3px;height:10px}
.est-split i{flex:1 1 0;min-width:6px;border-radius:5px}
.est-split-eq,.est-dot-eq{background:var(--mint)}
.est-split-lab,.est-dot-lab{background:var(--navy)}
.est-parts{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-muted)}
.est-parts span{display:grid;grid-template-columns:auto auto;align-items:center;justify-content:start;gap:0 6px}
.est-parts i{width:8px;height:8px;border-radius:2px}
.est-parts b{grid-column:1/-1;font-family:var(--font-latin);font-size:var(--fs-num);color:var(--navy)}
.est-review{justify-self:start}
.est-review[hidden]{display:none}
.est-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.est-acts .btn{min-height:44px;padding:0 6px;white-space:nowrap}
.est-h2{margin:22px 0 10px}
.est-h2 h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
.est-h2 .lead{margin-top:2px}
.est-list{border-radius:20px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
.est-list .sys{border:0;border-radius:0;background:none;box-shadow:none}
.est-list .sys+.sys{margin-top:0;border-top:1px solid var(--line)}
.est-list .sys-h{min-height:72px;padding:12px 16px}
.est-list .sys-h .badge-ico{width:44px;height:44px}
.est-list .sys-h .sum{font-family:var(--font-latin);font-size:var(--fs-num)}
.est-list .sys[data-open="true"] .sys-b{margin:0 12px 12px;padding:4px 12px 12px;border-radius:14px;background:var(--surface)}
.est-list>.opt,.est-list>.needs{margin:0;padding:14px 16px;border-top:1px solid var(--line)}
.est-how{margin-top:12px}
.est-how[hidden]{display:none}
.est-how p{margin:10px 0 0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-muted)}
.est-note{margin:10px 0 12px}
.est-bar .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
.est-bar .tot-row{display:grid;gap:0;justify-items:start}
.est-bar .tot-row>span{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-muted)}
.est-bar .bar-actions{display:flex;align-items:center;gap:8px}
.est-bar .btn{min-height:48px;padding:0 18px;white-space:nowrap}
.est-bar .tot-row b .num[data-total]{font-size:var(--fs-num-lg);line-height:var(--lh-h3)}
.est-bar .tot-row b{white-space:nowrap}
.est-list .sys-h .badge-ico,.pick-list .pick-card .badge-ico{background:var(--mint-soft);color:var(--mint-ink)}
.est-pad{padding-bottom:104px}
@media (min-width:900px){.est-pad{padding-bottom:40px}.est-bar .wrap{grid-template-columns:minmax(0,1fr)}}
/* ── 1.67.0: «ماركات نعمل بها» and «بالأرقام» after «خدماتنا» (brand/generated/mockups/home-brands-numbers-v3-*). The logos stand
   in white cells of one size — two rows that are pulled sideways on a phone, a grid on a wide screen; the numbers are navy
   cards of one height, the number in the dotted type (never under 34px), white. Nothing here grows or shrinks. ── */
.bl{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,60px);grid-auto-columns:112px;gap:8px;margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter) 6px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none}
.bl::-webkit-scrollbar{display:none}
.bl-c{display:grid;place-items:center;padding:10px 12px;border-radius:16px;background:#fff;box-shadow:var(--shadow);scroll-snap-align:start}
.bl-c img{display:block;width:100%;height:100%;object-fit:contain}
.bl-more{margin:6px 0 0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-muted)}
.nb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.nb-c{display:grid;align-content:space-between;justify-items:start;gap:8px;height:112px;box-sizing:border-box;padding:14px;border-radius:20px;background:var(--navy);color:#fff}
.nb-c b{display:block;min-width:2ch;font-family:var(--font-accent);font-weight:700;font-size:var(--fs-price-hero);line-height:44px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.nb-c span{font-size:var(--fs-ui);line-height:var(--lh-ui);color:rgba(255,255,255,.86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.nb-1{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .bl{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(10,minmax(0,1fr));grid-auto-rows:60px;margin-inline:0;padding:2px 0;overflow:visible}
  .bl-more{display:none}
  .nb{grid-template-columns:repeat(4,minmax(0,1fr))}.nb-3{grid-template-columns:repeat(3,minmax(0,1fr))}.nb-2{grid-template-columns:repeat(2,minmax(0,1fr))}.nb-1{grid-template-columns:minmax(0,1fr)}
  .nb-c b{line-height:52px}
}
@media (min-width:900px){.est-bar .tot-row{display:none}}          /* 1.67.0: on a wide screen the total stands once, in its own card; the card at the side holds the way on */
.est-bar-line{display:none;margin:0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-muted)}
@media (min-width:900px){.est-bar-line{display:block}}

/* ── 1.77.1, the footer of the designer's footer-v2 (templates/web/_footer.html): the logo with three white buttons, the links
   in two columns, the last line; no green. It keeps the class «foot» for the rules that leave room for the floating button. ── */
.foot.ft2{margin-top:28px;padding:18px 0 env(safe-area-inset-bottom);background:var(--navy);color:#fff;font-size:var(--fs-ui)}
.bar-on .foot.ft2{padding-bottom:calc(96px + env(safe-area-inset-bottom))}          /* the offer bar is up: the last links and the last line end above it */
.ft2 a{color:#fff;text-decoration:none}
.ft2-in{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo call" "tag tag" "links links";align-items:center;column-gap:12px}
.ft2-top{display:contents}                      /* a phone: the logo beside the buttons, the line under both */
.ft2-logo{grid-area:logo;display:flex;align-items:center;height:44px}
.ft2-logo img{display:block;width:auto;height:32px}
.ft2-tag{grid-area:tag;margin:8px 0 0;font-size:var(--fs-small);line-height:20px;color:#C9CED6}
.ft2-call{grid-area:call;align-self:start;display:flex;align-items:center;gap:8px}
.ft2 .ft2-tel,.ft2 .ft2-ib{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;height:44px;border-radius:14px;background:#fff;color:var(--navy)}
.ft2 .ft2-tel .num{letter-spacing:0}          /* 1.79.0: static/brand-v2.css spaces the digits of every phone link; the drawing's are close */
.ft2 .ft2-tel{padding:0 14px;font-family:var(--font-latin);font-weight:700;font-size:var(--fs-item);white-space:nowrap}
.ft2 .ft2-ib{width:44px}
.ft2-call .ico{width:20px;height:20px}
.ft2-tel .ico{width:18px;height:18px}
.ft2 a:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.ft2-links{grid-area:links;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;margin-top:14px;padding-top:6px;border-top:1px solid rgba(255,255,255,.14)}
.ft2-links div{display:flex;flex-direction:column;min-width:0}
.ft2-links a{display:flex;align-items:center;min-height:40px;font-size:var(--fs-ui);overflow-wrap:anywhere}
.ft2 .ft2-end{display:flex;align-items:center;justify-content:center;min-height:44px;margin:6px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.14);font-size:var(--fs-small);color:#C9CED6;text-align:center}
@media (max-width:359px){.ft2-in{grid-template-areas:"logo logo" "call call" "tag tag" "links links"}.ft2-call{margin-top:10px}}
@media (min-width:900px){
  .foot.ft2{padding-top:28px}
  .ft2-in{grid-template-columns:320px minmax(0,1fr) auto;grid-template-areas:"top links call";align-items:start;column-gap:40px}
  .ft2-top{display:block;grid-area:top;min-width:0}
  .ft2-logo{height:auto}
  .ft2-logo img{height:38px}
  .ft2-links{grid-template-columns:repeat(2,200px);justify-content:center;margin-top:0;padding-top:0;border-top:0}
  .ft2-links a{min-height:36px;font-size:var(--fs-item)}
  .ft2 .ft2-end{margin-top:18px}
}

/* ───────── 1.81.0, the bar with the one floating button in its middle (the designer's assistant-fab-v4 and v5; the owner:
   «اعتمد الخلفية أ», «خلها ليكويد اشوي وتتحرك خفيف») — a phone only; a wide screen is as it was.
   One shape for the three bars that are drawn: the offer bar of every page (templates/web/_offer_bar.html), a package's own
   order bar, and the estimate's «التالي». 76px tall in the identity's light grey, the signal's two waves meeting under the
   button (brand/generated/patterns → static/brand/signal-*-light.svg), and over its middle a hump of 40px that is the
   button's ring: the button, 64px, stands with its centre on the bar's edge. A side, 84px left empty, a side: the name
   alone, and the green button with its word and the price under it.
   The hump is the designer's light way: one still shape (static/brand/bar-hump.svg) that breathes by transform, 5s — no
   path redrawn at every frame, and nothing to write in the page's shell. It rises with the assistant's hop and swells
   under a press. For who asked for stillness nothing moves. */
@keyframes hb-breathe{0%,100%{transform:none}50%{transform:scale(1.03,1.04)}}
@keyframes hb-float{0%,100%{transform:none}50%{transform:translateY(-1.5px)}}
@keyframes hb-hop{0%,100%{transform:none}30%{transform:translateY(-9px) scale(1.06)}55%{transform:none}75%{transform:translateY(-3px)}}
@media (min-width:900px){.oh-bar[data-kind=any]{display:none}.oh-bar .oh-link{display:inline-flex;align-items:center;gap:6px;color:var(--navy);font-weight:700}.oh-bar .btn .oh-p{margin-inline-start:8px}.oh-bar .oh-tail,.oh-bar .oh-area{flex:0 0 100%}}
.oh-bar .btn .amt .num{font-family:var(--font-latin);font-weight:700}
@media (max-width:899px){
  :is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav){position:fixed;inset:auto 0 0 0;z-index:25;display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);align-items:center;gap:0;box-sizing:border-box;height:calc(76px + env(safe-area-inset-bottom));min-height:0;margin:0;padding:0 16px env(safe-area-inset-bottom);border:0;border-top:1px solid #C9CED6;border-radius:0;background:url("brand/signal-bl-light.ece266e45c08.svg") calc(50% + 130px) -140px/260px 260px no-repeat,url("brand/signal-br-light.cb65cb84a7ac.svg") calc(50% - 130px) -140px/260px 260px no-repeat,#DCDCDE;box-shadow:0 -3px 8px rgba(18,40,76,.12);-webkit-backdrop-filter:none;backdrop-filter:none;transform:none}
  :is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav)::before{content:"";position:absolute;left:50%;top:-41px;width:128px;height:41px;margin-left:-64px;background:url("brand/bar-hump.60433bef9d6f.svg") 0 0/128px 41px no-repeat;filter:drop-shadow(0 -3px 3px rgba(18,40,76,.10));transform-origin:50% 100%;pointer-events:none}
  /* the offer bar's two sides */
  .oh-bar[data-oh-bar] .t{grid-column:1;display:grid;align-content:center;gap:0;max-height:60px;overflow:hidden;font-size:var(--fs-small);line-height:18px;color:#4F5A73;text-align:start}
  .oh-bar[data-oh-bar] .t b{flex:none;margin:0;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-ui);line-height:21px;color:#1F2A4B;white-space:normal;overflow:visible}
  .oh-bar[data-oh-bar] .oh-tail{display:none}
  .oh-bar[data-oh-bar] .oh-link{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-ui);line-height:21px;color:#1F2A4B;text-decoration:none}
  .oh-bar[data-oh-bar] .oh-link .ico{width:16px;height:16px;color:var(--mint-ink)}
  :is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav) .btn.btn-primary{grid-column:3;display:grid;align-content:center;justify-items:center;gap:0;width:100%;height:52px;min-height:0;box-sizing:border-box;margin:0;padding:0 6px;border-radius:16px;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-ui);line-height:20px;text-align:center;white-space:nowrap}
  [dir=ltr] :is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav) .btn.btn-primary{padding:0 2px;font-size:var(--fs-small);letter-spacing:-.02em}          /* «Order the package» is wider than its Arabic: set a size down, it stands whole on a phone of 360 */
  .oh-bar[data-oh-bar] .btn .oh-p{display:inline-flex;align-items:baseline;gap:4px;font-size:var(--fs-small);line-height:20px;font-weight:600}
  .oh-bar[data-oh-bar] .btn .amt{display:inline-flex;align-items:baseline;gap:3px}
  .oh-bar[data-oh-bar] .btn .amt .num{font-size:var(--fs-num);line-height:20px;color:inherit}
  .oh-bar[data-oh-bar] .btn .amt .cur{font-family:var(--font-latin);font-weight:700;font-size:var(--fs-small);color:inherit}
  /* the estimate's steps: «رجوع» on the name's side, «التالي» on the button's */
  .wiz-nav .btn.wiz-prev{grid-column:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;height:52px;min-height:0;margin:0;padding:0 6px;border-radius:16px;background:rgba(255,255,255,.7);box-shadow:none;color:#1F2A4B;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-ui)}
  .wiz-nav .btn{max-width:none}
  /* the one floating button, in the hump: no ring of its own (the hump is its ring), its centre on the bar's edge */
  body:has(:is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav)):not(.no-fab) .fabs{left:50%;right:auto;bottom:calc(44px + env(safe-area-inset-bottom));margin-left:-32px;--va-fab-inset:0px;--va-fab-ring:none}          /* the assistant's disc takes its ring from these two (static/assistant.css): in a hump it has none */
  body:has(:is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav)):not(.no-fab) .fabs .mic-fab,body:has(:is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav)):not(.no-fab) .fabs .wa-fab{box-shadow:none}
  /* the page ends above the bar and its hump */
  .bar-on .foot.ft2{padding-bottom:calc(124px + env(safe-area-inset-bottom))}
  body:has(.wiz-nav) main,body:has(.totalbar.pg3-bar) main{padding-bottom:calc(124px + env(safe-area-inset-bottom))}
}
@media (max-width:899px) and (prefers-reduced-motion:no-preference){
  :is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav)::before{animation:hb-breathe 5s cubic-bezier(.45,0,.55,1) infinite}
  body:has(:is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav)):not(.no-fab) .fabs{animation:hb-float 5s cubic-bezier(.45,0,.55,1) infinite}
  body:has(.va-fab.va-hop) :is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav)::before{animation:hb-hop .7s ease}
  body:has(.fabs :active) :is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav)::before{animation:none;transform:scale(1.14,1.06);transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
}
@media (min-width:900px){.wiz-nav .wiz-prev{display:none}}

/* ───────── 1.81.1, the manager: «لا زاوية على الجوال في أي صفحة عامة». On a phone the one floating button is in the middle of
   the foot of every public page, whatever is under it:
   • a bar with the hump (above): in the hump;
   • a bar that is not drawn with it — a quote's total, the cloud's, the maintenance's, an estimate's result, an older
     offer's — the same hump stands over that bar's upper edge, white as the bar is, and the button on the edge; the bar's
     own rows are as they were (their first is a word at one end and a figure at the other: the middle is free).
     static/fab.js says how tall the bar is («--foot-bar») and that it is there («tb-on»);
   • no bar at all: the button alone, 16px over the foot, in its white ring. */
@media (max-width:899px){
  .fabs,[dir=ltr] .fabs{left:50%;right:auto;margin-left:-32px;--va-fab-inset:3px;--va-fab-ring:0 0 0 3px #fff,0 8px 20px -6px rgba(31,42,75,.55)}
  .tb-on body:not(.no-fab) .fabs{bottom:calc(var(--foot-bar,76px) - 32px);--va-fab-inset:0px;--va-fab-ring:none}
  .tb-on body:not(.no-fab) .fabs .mic-fab,.tb-on body:not(.no-fab) .fabs .wa-fab{box-shadow:none}
  .tb-on .totalbar:not(.pg3-bar)::before{content:"";position:absolute;left:50%;top:-41px;width:128px;height:41px;margin-left:-64px;background:url("brand/bar-hump-white.a93016510f27.svg") 0 0/128px 41px no-repeat;filter:drop-shadow(0 -3px 3px rgba(18,40,76,.10));transform-origin:50% 100%;pointer-events:none}
  .tb-on main::after{content:"";display:block;height:44px}          /* the page ends above the hump too */
  /* a quote's steps (the designer's screen 3, as the estimate's): «السابق» on one side and «التالي» on the other, the middle left to the button — at the first step the bar is this row alone, and the button stood over its word */
  .tb-on .totalbar .q-nav{display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);gap:0;align-items:center}
  .tb-on .totalbar .q-nav[hidden]{display:none}
  .tb-on .totalbar .q-nav [data-prev]{grid-column:1;width:100%;margin:0}
  .tb-on .totalbar .q-nav [data-next]{grid-column:3;width:100%;margin:0}
}
@keyframes hb-beat{0%,100%{transform:none}45%{transform:scale(1.035)}}
@media (max-width:899px) and (prefers-reduced-motion:no-preference){
  .tb-on .totalbar:not(.pg3-bar)::before{animation:hb-breathe 5s cubic-bezier(.45,0,.55,1) infinite}
  .tb-on body:not(.no-fab) .fabs{animation:hb-float 5s cubic-bezier(.45,0,.55,1) infinite}
  body:has(.va-fab.va-hop) .totalbar:not(.pg3-bar)::before{animation:hb-hop .7s ease}
  body:has(.fabs :active) .totalbar:not(.pg3-bar)::before{animation:none;transform:scale(1.14,1.06);transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
  /* the designer's v5: when the price in a bar's button changes the button beats once (static/fab.js puts the class; the figure itself goes up and out and the new one comes from below, as everywhere: static/motion.js) */
  :is(.oh-bar[data-oh-bar],.totalbar.pg3-bar,.wiz-nav) .btn.hb-beat{animation:hb-beat .36s ease}
}

/* 1.81.2: the estimate hides its bar for an office or a commercial building (it has no «التالي» there): with no bar under it the button is the lone one, in its ring, 16px over the foot */
@media (max-width:899px){
  /* an estimate's result: its bar is one row, the total and the button — a side, the middle left to the floating button, a side (the button stood under it by 19px) */
  .tb-on .est-bar .wrap{grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);gap:0}
  .tb-on .est-bar .tot-row{grid-column:1}
  .tb-on .est-bar .btn{grid-column:3;width:100%;padding:0 6px;font-size:var(--fs-ui)}
  .wiz-nav[hidden]{display:none}
  body:has(.wiz-nav[hidden]):not(.no-fab) .fabs{bottom:calc(16px + env(safe-area-inset-bottom));animation:none;--va-fab-inset:3px;--va-fab-ring:0 0 0 3px #fff,0 8px 20px -6px rgba(31,42,75,.55)}
  body:has(.wiz-nav[hidden]):not(.no-fab) .fabs .mic-fab,body:has(.wiz-nav[hidden]):not(.no-fab) .fabs .wa-fab{box-shadow:0 0 0 3px #fff,0 8px 22px -8px rgba(31,42,75,.55)}
}

/* ───────── 1.82.4, the owner on his iPhone: «البار مغطي على الكلام وما اقدر انزل تحت؟!». Every page with a bar at the foot
   ends above the bar, the 32 the floating button stands over its edge, and 16 more — and above the iPhone's own strip
   (safe-area). A bar of the usual 76 (the offer's, a package's, the estimate's steps); a taller one (the maintenance's,
   a quote's total) is measured by static/fab.js («tb-on», «--foot-bar»: its height with its own safe-area). The footer
   takes the space when there is one, the page's main part when there is none. Written once here, over the older rules
   that each counted one bar. */
@media (max-width:899px){
  body:has(:is(.oh-bar[data-oh-bar],.totalbar,.wiz-nav:not([hidden]))) :is(.foot,.foot.ft2){padding-bottom:calc(76px + 32px + 16px + env(safe-area-inset-bottom))}
  body:has(:is(.oh-bar[data-oh-bar],.totalbar,.wiz-nav:not([hidden]))):not(:has(.foot)) main{padding-bottom:calc(76px + 32px + 16px + env(safe-area-inset-bottom))}
  html.tb-on body:has(.totalbar) :is(.foot.ft2,.foot.foot){padding-bottom:calc(var(--foot-bar,76px) + 32px + 16px)}
  html.tb-on body:has(.totalbar):not(:has(.foot)) main{padding-bottom:calc(var(--foot-bar,76px) + 32px + 16px)}
  .tb-on main::after{content:none}
  body:has(:is(.oh-bar[data-oh-bar],.totalbar,.wiz-nav:not([hidden]))) .wrap.est-pad{padding-bottom:0}          /* its own older room for a bar, now counted above */
}
form#order{scroll-margin-top:calc(var(--header-h) + 16px)}          /* 1.82.4: «اطلب» of a home card lands on the order, under the header */

/* 1.82.6, a wide screen narrower than about 1300 (900, 1024): the bar's button ran under the floating button in its corner (24 to
   88 from the side, both languages). It keeps the designer's 17 clear of it (home-vertical-rhythm-wide-v1: «زر الشريط يبدأ بعده بـ 17») */
@media (min-width:900px){.oh-bar[data-oh-bar]{padding-inline-end:max(105px,calc((100vw - 1120px) / 2 + var(--gutter)))}}

/* 1.82.7, the header between 900 and 1239: the English row of links ran 143 past the page at 1024 (the Arabic 7) and drew a
   sideways scroll. «Customer portal» keeps its sign there, its words in its own label (aria-label), and the links stand 4 apart */
@media (min-width:900px) and (max-width:1239px){.topbar .pill span{display:none}.topbar .pill{padding:0 11px}.desk-nav a{padding:8px 4px}}

/* 1.82.8, the footer's row of the ways to pay (the designer's footer-payments-v1): between the links and the last line, a
   white square for each way that is on — KNET, VISA, Mastercard with Sadad's switch, Deema with Deema's; one that is off is
   not drawn, all off and the row is gone. Not links. The mark is the way's name until its official logo is in (shop/_pay_logo.html) */
.pay-logo{display:inline-grid;place-items:center;height:24px;min-width:44px;box-sizing:border-box;padding:0 6px;border:1.5px dotted #B7BECB;border-radius:6px;background:#fff;font-family:var(--font-latin);font-weight:700;font-size:var(--fs-small);line-height:1;color:#4F5A73;white-space:nowrap}          /* the mark of one way to pay, wherever it stands (the order step, the footer, Deema's line) */
.ft2-pay{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px;padding:14px 0;border-top:1px solid rgba(255,255,255,.14)}
.ft2-pay .pay-logo{width:76px;height:44px;min-width:0;padding:4px;border:0;border-radius:10px;background:#fff;color:var(--navy);font-size:var(--fs-small);line-height:15px;white-space:normal;text-align:center}          /* «Master card» on two rows in 68, as the designer drew it, while the name stands for the logo */
@media (min-width:900px){.ft2-pay{justify-content:flex-start;gap:10px;padding:16px 0}.ft2-pay .pay-logo{width:88px;height:52px}.ft2-pay+.ft2-end{margin-top:0}}

/* 1.82.9, the bar's button of a house being built: «ابتداء من 150 KD» alone (the owner: «احسب الان مالها داعي»), its figure bold */
.oh-bar[data-oh-bar] .btn.oh-solo .oh-p{margin:0;font-size:var(--fs-ui);line-height:22px}
.oh-bar[data-oh-bar] .btn.oh-solo .num{font-size:var(--fs-h3);font-weight:800}
.pay-logo img{display:block;width:auto;height:auto;max-width:100%;max-height:100%}          /* 1.82.10: an official logo in its slot, whole, never stretched */
.pay-logo:has(img){border-style:solid;border-color:#E3E6EC}

/* 1.84.1: a page inside the heat map's frame (static/motion.js): no bar at its foot, no floating button, no space kept for them */
.framed .fabs,.framed .oh-bar,.framed .totalbar,.framed .wiz-nav{display:none!important}
.framed body{padding-bottom:0!important}