:root{
  --petrol:#0B3A41; --teal:#0E6F74; --mint:#78CFBC; --mineral:#EAF0EE;
  --white:#FFFFFF; --aluminium:#C3D2CF; --slate:#46605F; --ink:#0F2426;
  --ok:#1F7A4D; --warn:#9A5B00; --err:#B3261E;

  --bg:var(--white); --bg-sunk:var(--mineral); --fg:var(--ink); --fg-2:var(--slate);
  --rule:var(--aluminium);           
  --control-border:var(--slate);     
  --link:var(--teal); --focus:var(--teal);

  --f-latin:'Noto Sans','Noto Sans Fallback',system-ui,sans-serif;
  --f-ar:'Noto Sans Arabic','Noto Sans Arabic Fallback',system-ui,sans-serif;
  --f-kufi:'Noto Kufi Arabic','Noto Kufi Arabic Fallback',system-ui,sans-serif;
  --f-body:var(--f-latin); --f-display:var(--f-latin);

  --logo-w:167px;                    
  --logo-h:calc(var(--logo-w) / 2.625);
  --logo-k:calc(var(--logo-h) * 0.157);
  --logo-clear:calc(var(--logo-k) * 2);
  --hdr:104px;                       

  --gutter:clamp(26px,4vw,4rem);
  --shell:1440px;
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem;
  --dur:200ms; --out:cubic-bezier(.16,1,.3,1);
}
html[lang="ar"]{ --f-body:var(--f-ar); --f-display:var(--f-kufi); }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.55 var(--f-body)}
html[lang="ar"] body{font-size:17px;line-height:1.85}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font-family:inherit}
[hidden]:not(.mat-detail){display:none !important}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
main[tabindex="-1"]:focus,main[tabindex="-1"]:focus-visible{outline:none}
.ftr :where(a,button):focus-visible,
.util .lang:focus-visible,
.hero :where(a,button):focus-visible,
.rfq :where(a,button):focus-visible,
.rfq-done :where(a,button):focus-visible,
.ovl-card :where(a,button,input):focus-visible,
.sec--dark :where(a,button):focus-visible,
.hub :where(a,button):focus-visible,
[data-concept] .mega :where(a,button):focus-visible{outline-color:var(--white)}
.sr-only{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;inset-block-start:0;inset-inline-start:0;width:auto;height:auto;
  margin:0;overflow:visible;clip-path:none;z-index:100;
  background:var(--teal);color:var(--white);padding:.8rem 1.2rem;font-weight:600}
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}

h1,h2,h3,h4{margin:0;font-weight:700}
h1,h2{font-family:var(--f-display)}
h3,h4{font-family:var(--f-latin)}
html[lang="ar"] h3,html[lang="ar"] h4,html[lang="ar"] h5,html[lang="ar"] h6{font-family:var(--f-ar)}
h4{font-size:16px;line-height:1.35}
html[lang="ar"] h4{font-size:17px;line-height:1.6}
h1,h2{font-stretch:87.5%}
html[lang="ar"] h1,html[lang="ar"] h2{font-stretch:normal}
h1{font-size:36px;line-height:1.2;letter-spacing:-.01em}
h2{font-size:26px;line-height:1.25}
h3{font-size:19px;line-height:1.3;font-family:var(--f-latin)}
html[lang="ar"] h1{font-size:40px;line-height:1.45}
html[lang="ar"] h2{font-size:28px;line-height:1.5}
html[lang="ar"] h3{font-size:20px;line-height:1.6;font-family:var(--f-ar)}

.util{background:var(--mineral);border-block-end:1px solid var(--rule)}
.util-in{display:flex;align-items:center;gap:var(--s-4);min-height:40px}
.util a{display:inline-flex;align-items:center;min-height:40px;padding-inline:.15rem;
  font:400 14px/1 var(--f-body);color:var(--fg-2);text-decoration:none}
html[lang="ar"] .util a{font-family:var(--f-ar);font-size:15px}
.util a:hover{color:var(--teal)}
.util .sp{margin-inline-start:auto}
.util .lang{border:0;background:none;min-height:40px;padding-inline:.15rem;font-size:14px;color:var(--fg-2)}
.util .lang:hover{color:var(--teal)}


.hdr{position:sticky;top:0;z-index:60;background:var(--white);
  border-block-end:1px solid var(--rule)}
.hdr-in{position:relative;display:flex;align-items:center;gap:var(--s-5);min-height:var(--hdr)}

.brand{flex:none;display:block;text-decoration:none;
  padding:var(--logo-clear);margin-inline-start:calc(var(--logo-clear) * -1)}
.brand img{width:var(--logo-w);height:auto;display:block}
html[dir="rtl"] .brand{transform:none}           
html[dir="rtl"] .brand img{transform:none}

.nav{display:flex;align-items:center;gap:var(--s-1);margin-inline:var(--s-7) auto}
.nav > .item{position:static}
.nav .top{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;
  padding:.6rem .7rem;font:600 15px/1 var(--f-body);text-decoration:none;color:var(--fg);
  background:none;border:0;cursor:pointer;border-radius:2px;white-space:nowrap}
html[lang="ar"] .nav .top{font-family:var(--f-ar);font-size:16px}
.nav .top:hover{color:var(--teal)}
.nav .top[aria-expanded="true"]{color:var(--teal);box-shadow:inset 0 -3px 0 var(--teal)}
.nav .top svg{width:14px;height:14px;transition:transform var(--dur)}
.nav .top[aria-expanded="true"] svg{transform:rotate(180deg)}
.hdr-act{display:flex;align-items:center;gap:var(--s-2);flex:none}

.iconbtn{display:inline-grid;place-items:center;width:44px;height:44px;
  background:none;border:1px solid var(--control-border);border-radius:2px;color:var(--fg);cursor:pointer}
.iconbtn:hover{border-color:var(--teal);color:var(--teal)}
.iconbtn svg{width:20px;height:20px}
.lang{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.6rem .8rem;
  border:1px solid var(--control-border);border-radius:2px;text-decoration:none;
  font:600 14px/1 var(--f-body);color:var(--fg);white-space:nowrap}
.lang:hover{border-color:var(--teal);color:var(--teal)}
.qbasket{position:relative}
.qbasket .n{position:absolute;inset-block-start:-6px;inset-inline-end:-6px;
  min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;
  background:var(--teal);color:var(--white);border-radius:99px;
  font:700 13px/1 var(--f-latin);font-variant-numeric:tabular-nums}   

.btn{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.7rem 1.15rem;
  font:600 15px/1 var(--f-body);text-decoration:none;border:1px solid transparent;
  border-radius:2px;cursor:pointer;white-space:nowrap}
html[lang="ar"] .btn{font-family:var(--f-ar);font-size:16px}
.btn-pri{background:var(--teal);color:var(--white)}
.btn-pri:hover{background:var(--petrol)}
.btn-sec{background:transparent;color:var(--fg);border-color:var(--control-border)}
.btn-sec:hover{border-color:var(--teal);color:var(--teal)}

.mega{position:absolute;inset-block-start:100%;inset-inline:0;
  inline-size:100%;
  background:var(--white);border:1px solid var(--rule);border-block-start:0;
  box-shadow:0 18px 44px -18px rgba(11,58,65,.34);padding:var(--s-6);z-index:70;
  max-block-size:calc(100vh - var(--hdr) - 24px);overflow-y:auto}
.mega[hidden]{display:none}
.mega-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s-5) var(--s-6);align-items:start}
@media (max-width:1180px){ .mega-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){ .mega-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.mega-grp{break-inside:avoid}
.mega-grp > a{display:flex;align-items:baseline;gap:.5rem;font-weight:700;font-size:15px;
  text-decoration:none;padding-block:.3rem;color:var(--fg)}
.mega-grp > a .star{width:10px;height:10px;flex:none;position:relative;top:1px}
.mega-grp--leaf > a{font-weight:600}
html[lang="ar"] .mega-grp > a{font-size:16px}
.mega-grp > a:hover{color:var(--teal)}
.mega-ttl{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--slate);margin-block-end:var(--s-3);
  padding-block-end:var(--s-2);border-block-end:1px solid var(--rule)}
html[lang="ar"] .mega-ttl,html[lang="ar"] .ftr h3{letter-spacing:0;text-transform:none;
  font-size:15px;font-weight:700}
.mega ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mega li > a{display:block;padding:.45rem .5rem;margin-inline-start:-.5rem;
  text-decoration:none;font-size:15px;border-radius:2px;color:var(--fg)}
html[lang="ar"] .mega li > a{font-size:16px}
html[lang="ar"] .mega .sub a{font-size:15px}
.mega li > a:hover{background:var(--mineral);color:var(--teal)}
.mega .sub{list-style:none;margin:.15rem 0 .35rem;padding-inline-start:var(--s-4);
  border-inline-start:1px solid var(--rule);display:flex;flex-direction:column;gap:1px}
.mega .sub a{font-size:14px;color:var(--fg-2);padding:.3rem .5rem}
.mega .sub a:hover{color:var(--teal)}
.mega-foot{margin-block-start:var(--s-5);padding-block-start:var(--s-4);
  border-block-start:1px solid var(--rule);display:flex;gap:var(--s-4);align-items:center;
  flex-wrap:wrap;font-size:14px;color:var(--fg-2)}

.burger{display:none}
.mnav{position:fixed;inset-block:var(--hdr) 0;inset-inline:0;background:var(--white);
  z-index:55;overflow-y:auto;padding:var(--s-5) 0 var(--s-8)}
.mnav[hidden]{display:none}
.mnav details{border-block-end:1px solid var(--rule)}
.mnav summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  min-height:56px;padding:var(--s-4) 0;font:600 17px/1.3 var(--f-body);cursor:pointer;
  list-style:none}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary svg{width:18px;height:18px;flex:none;transition:transform var(--dur)}
.mnav details[open] > summary{color:var(--teal)}
.mnav details[open] > summary svg{transform:rotate(180deg)}
.mnav-row{display:block;min-height:56px;padding:var(--s-4) 0;font:600 17px/1.3 var(--f-body);
  text-decoration:none;border-block-end:1px solid var(--rule)}
.mnav-row:hover{color:var(--teal)}
.mnav .lvl2{list-style:none;margin:0 0 var(--s-4);padding:0}
.mnav .lvl2 > li > a{display:block;padding:.7rem 0 .7rem var(--s-4);font-size:16px;text-decoration:none}
html[dir="rtl"] .mnav .lvl2 > li > a{padding:.7rem var(--s-4) .7rem 0}
.mnav .lvl3{list-style:none;margin:0;padding-inline-start:var(--s-6)}
.mnav .lvl3 a{display:block;padding:.55rem 0;font-size:15px;color:var(--fg-2);text-decoration:none}
.mnav-foot{margin-block-start:var(--s-6);display:flex;gap:var(--s-3);flex-wrap:wrap}

.nav .top{padding:.6rem .5rem}
@media (max-width:1340px){
  .nav{display:none}
  .burger{display:inline-grid}
  .hdr-act{margin-inline-start:auto}
}
@media (max-width:620px){ .util-in > a:not(.lang){display:none} }
.hdr-act .lang{display:none}
@media (max-width:640px){
  :root{--hdr:104px}
  .hdr-in{gap:var(--s-3)}
  .hdr-act .lang,
  .hdr-act .btn-pri,
  .hdr-act .iconbtn[aria-label$="search"],
  .hdr-act .iconbtn.search{display:none}
}

.ftr{position:relative;background:var(--petrol);color:var(--white);
  padding-block:var(--s-8) var(--s-5);margin-block-start:var(--s-8);overflow:hidden}
.ftr::before{content:"";position:absolute;inset-block-start:0;inset-inline-end:0;
  inline-size:min(46%,560px);block-size:100%;pointer-events:none;opacity:.5;
  background:url("brand/construction-lines-restrained-dark.svg") no-repeat right top/cover}
.ftr > *{position:relative}
@media (max-width:900px){ .ftr::before{display:none} }
.ftr-grid{display:grid;grid-template-columns:minmax(0,1.15fr) repeat(4,minmax(0,1fr));
  gap:var(--s-6) var(--s-5)}
.ftr-brand img{width:200px;height:auto}
.ftr p{margin:var(--s-4) 0 0;max-width:34ch;font-size:15px;color:var(--aluminium)}
.ftr h3{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--mint);margin-block-end:var(--s-3);font-family:var(--f-latin)}
html[lang="ar"] .ftr h3{font-family:var(--f-ar)}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.ftr a{color:var(--white);text-decoration:none;font-size:15px}
.ftr a:hover{color:var(--mint);text-decoration:underline;text-underline-offset:3px}
.ftr-btm{margin-block-start:var(--s-5);padding-block-start:var(--s-4);
  border-block-start:1px solid rgba(255,255,255,.18);display:flex;gap:var(--s-5);
  flex-wrap:wrap;font-size:14px;color:var(--aluminium)}
@media (max-width:1180px){ .ftr-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:820px){ .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .ftr-grid{grid-template-columns:1fr} }

.demo{padding-block:var(--s-8)}
.demo-note{border:1px solid var(--rule);border-inline-start:3px solid var(--teal);
  background:var(--mineral);padding:var(--s-4) var(--s-5);font-size:15px;line-height:1.6;
  max-width:78ch}
.demo h2{margin-block:var(--s-7) var(--s-4)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);max-width:60ch}
.fld{display:flex;flex-direction:column;gap:.4rem}
.fld label{font-size:14px;font-weight:600}
.fld input{min-height:44px;padding:.65rem .8rem;font:400 16px/1.5 var(--f-body);
  border:1px solid var(--control-border);border-radius:2px;background:var(--white);color:var(--fg)}
.fld input:focus{outline:2px solid var(--focus);outline-offset:1px}
@media (max-width:560px){ .fields{grid-template-columns:1fr} }

.mnav .lvl2 > li.mnav-all > a{font-weight:700;color:var(--teal)}

.arw[data-pause] .ic-play{display:none}
.arw[data-pause][data-state="paused"] .ic-pause{display:none}
.arw[data-pause][data-state="paused"] .ic-play{display:inline-flex}
.arw[data-pause] .ic-pause,.arw[data-pause] .ic-play{align-items:center;justify-content:center}

.va-btn{position:absolute;inset-block-start:12px;inset-inline-end:12px;z-index:4;display:inline-flex;align-items:center;gap:.45rem;
  min-block-size:44px;padding:.4rem .9rem;border:1px solid rgba(255,255,255,.55);border-radius:99px;background:rgba(15,36,38,.78);
  color:#fff;font:600 14px/1 var(--f-body);cursor:pointer}
.va-btn[hidden]{display:none}
.va-btn:hover{background:rgba(15,36,38,.92)}
.va-btn:focus-visible,.va-hero:focus-visible{outline:2px solid #fff;outline-offset:2px}
.va-btn svg{flex:none}
.va-btn.va-hero{inset-block-start:var(--s-3);inset-inline-end:var(--s-3);z-index:6}
.va-btn.va-hero[hidden]{display:none}
html[dir="rtl"] .arw[data-pause] svg{transform:none}
html[lang="ar"] .va-btn,html[lang="ar"] .va-hero{font-family:var(--f-body-ar,var(--f-body))}
@media (prefers-reduced-motion:reduce){ .va-btn{transition:none} }

.ftr-group{margin-block-start:var(--s-4);padding-block-start:var(--s-3);border-block-start:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-5)}
.ftr-group h3{margin:0;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mint);font-family:var(--f-latin)}
html[lang="ar"] .ftr-group h3{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-size:16px}
.ftr .grp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--s-3)}
.ftr .grp-card{display:inline-flex;align-items:center;gap:var(--s-2);min-block-size:44px;padding:.25rem .8rem;
  border:1px solid rgba(255,255,255,.26);border-radius:2px;color:var(--white);text-decoration:none;
  transition:border-color .2s,background-color .2s,color .2s}
.grp-card:hover{border-color:var(--mint);background:rgba(255,255,255,.06);color:var(--white);text-decoration:none}
.grp-card:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.grp-name{font:700 20px/1 var(--f-latin);letter-spacing:.01em}
.grp-card .grp-logo{display:block;block-size:var(--lh,60px);inline-size:auto;max-inline-size:100%;flex:none}
.ftr .grp-card:has(.grp-logo){padding-block:.25rem;min-block-size:44px;gap:var(--s-2)}
.grp-logo--expeiq{--lh:30px}
.grp-logo--vr-decorations{--lh:34px}
html[lang="ar"] .grp-logo--vr-decorations{--lh:34px}
.grp-go{display:inline-flex;color:var(--mint);transition:transform .2s}
.grp-card:hover .grp-go{transform:translateX(3px)}
html[dir="rtl"] .grp-go svg{transform:scaleX(-1)}
html[dir="rtl"] .grp-card:hover .grp-go{transform:translateX(-3px)}
@media (max-width:560px){ .ftr-group{flex-direction:column;align-items:flex-start;gap:var(--s-2)} .ftr .grp-list{inline-size:100%;flex-direction:row;flex-wrap:wrap;gap:var(--s-2)} .grp-list li{flex:0 1 auto} .ftr .grp-card{padding-inline:.65rem} .grp-go svg{inline-size:12px;block-size:12px} }
@media (prefers-reduced-motion:reduce){ .grp-card,.grp-go{transition:none} .grp-card:hover .grp-go{transform:none} }
@media (max-width:420px){ .grp-logo--expeiq{--lh:28px} .grp-logo--vr-decorations,html[lang="ar"] .grp-logo--vr-decorations{--lh:30px} .grp-go{display:none} }
a[href*="twitter.com/"]{display:inline-block;min-inline-size:24px;text-align:center}