:root{
  --black:#0b0b0c;--ink:#141415;--g900:#1c1c1e;--g800:#2a2a2d;--g700:#3d3d41;--g600:#5a5a60;--g500:#7b7b82;
  --g400:#a1a1a8;--g300:#c9c9ce;--g200:#e3e3e6;--g100:#f1f1f3;--g50:#f8f8f9;--charcoal:#1c1c1f;--charcoal-2:#26262a;--bar:#e3e3e6;--white:#fff;
  --r:6px;--max:1200px;
  --ar:'Cairo','Segoe UI',Tahoma,sans-serif;--en:'Archivo','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ar);background:var(--white);color:var(--ink);line-height:1.8;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(var(--max),100% - 40px);margin-inline:auto}
.en{font-family:var(--en);letter-spacing:.02em}
.eyebrow{font-family:var(--en);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--g500);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor}

/* header */
header.site{position:sticky;top:0;z-index:50;background:var(--bar);border-bottom:1px solid var(--g300);transition:box-shadow .3s}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.brand img{height:52px;width:auto;transition:transform .3s}
.menu{display:flex;gap:4px;list-style:none}
.menu a{display:flex;flex-direction:column;align-items:center;padding:6px 16px;line-height:1.25;border-radius:var(--r);transition:background .2s}
.menu a b{font-weight:600;font-size:15px}
.menu a span{font-family:var(--en);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--g500)}
.menu a:hover{background:rgba(0,0,0,.07)}
.menu a.active{background:var(--black);color:#fff}
.menu a.active span{color:var(--g300)}
.burger{display:none;background:none;border:1px solid var(--g300);border-radius:var(--r);width:44px;height:44px;cursor:pointer}
.burger i{display:block;width:20px;height:2px;background:var(--black);margin:5px auto;transition:.25s}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:var(--r);font-weight:600;font-size:16px;border:2px solid var(--black);cursor:pointer;transition:.2s;font-family:var(--ar)}
.btn small{font-family:var(--en);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.btn-dark{background:var(--black);color:#fff}
.btn-dark:hover{background:var(--g700);border-color:var(--g700)}
.btn-light{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.btn-light:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.18)}
.btn-line{background:transparent;color:var(--black)}
.btn-line:hover{background:var(--black);color:#fff}
.btn svg{width:18px;height:18px;flex:none}
html[dir=rtl] .btn .arr{transform:scaleX(-1)}

/* hero */
.hero{background:var(--charcoal);color:#fff;position:relative;overflow:hidden}
.hero .wrap{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:44px;padding-block:80px}
.hero h1{font-size:clamp(38px,5.4vw,66px);line-height:1.2;font-weight:700;margin:20px 0 22px}
.hero h1 em{font-style:normal;color:var(--g400)}
.hero p.lead{color:var(--g300);font-size:19px;max-width:560px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.logo-card{background:#fff;border-radius:14px;padding:34px;box-shadow:0 30px 80px rgba(0,0,0,.55);position:relative}
.logo-card::after{content:"";position:absolute;inset:12px;border:1px solid var(--g200);border-radius:8px;pointer-events:none}
.logo-card img{width:100%;height:auto}


/* sections */
section{padding-block:96px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:48px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(30px,4vw,46px);line-height:1.25;font-weight:600;margin-top:10px}
.sec-head h2 small{display:block;font-family:var(--en);font-size:.4em;font-weight:500;color:var(--g500);letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
.sec-head p{max-width:460px;color:var(--g600)}
.bg-gray{background:var(--g50)}
.bg-dark{background:var(--charcoal);color:#fff}
.bg-dark .sec-head p{color:var(--g400)}
.bg-dark .eyebrow{color:var(--g400)}

/* intro */
.intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.intro .big{font-size:clamp(26px,3vw,38px);font-weight:600;line-height:1.4}
.intro p{color:var(--g600);margin-bottom:16px}

/* cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--g200);border-radius:10px;overflow:hidden;transition:.25s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);border-color:var(--black);box-shadow:0 20px 40px rgba(0,0,0,.1)}
.card .ph{aspect-ratio:4/3;background:var(--g100);overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15);transition:.5s}
.card:hover .ph img{transform:scale(1.05);filter:none}
.card .bd{padding:24px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .num{font-family:var(--en);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--g500)}
.card h3{font-size:21px;font-weight:600;line-height:1.4}
.card p{color:var(--g600);font-size:15.5px}
.card .more{margin-top:auto;padding-top:12px;font-weight:600;font-size:15px;display:flex;gap:8px;align-items:center}

/* quality */
.q-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--g800);border:1px solid var(--g800);border-radius:10px;overflow:hidden}
.q{background:var(--charcoal-2);padding:34px 26px}
.q .ic{width:46px;height:46px;border:1px solid var(--g600);border-radius:50%;display:grid;place-items:center;margin-bottom:20px}
.q .ic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.q h3{font-size:19px;margin-bottom:8px}
.q p{color:var(--g400);font-size:15px}

/* cta band */
.band{background:var(--g100);border-radius:14px;padding:56px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.band h2{font-size:clamp(26px,3.2vw,38px);font-weight:600;line-height:1.35;max-width:640px}

/* page hero */
.page-hero{background:var(--charcoal);color:#fff;padding:72px 0 64px;position:relative;overflow:hidden}
.page-hero .wrap{position:relative}
.page-hero h1{font-size:clamp(34px,5vw,58px);font-weight:700;line-height:1.2;margin-top:14px}
.page-hero h1 small{font-family:var(--en);font-size:.38em;font-weight:500;letter-spacing:.2em;color:var(--g400);text-transform:uppercase;margin-inline-start:14px}
.page-hero p{color:var(--g300);max-width:680px;margin-top:16px;font-size:18px}
.crumbs{font-family:var(--en);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--g500)}
.crumbs a:hover{color:#fff}

/* about */
.story{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px}
.story .side{position:sticky;top:110px;align-self:start}
.story .side .logo-card{padding:28px}
.story blockquote{font-size:clamp(20px,2.3vw,27px);font-weight:600;line-height:1.7;border-inline-start:4px solid var(--black);padding-inline-start:26px;margin-bottom:28px}
.story p{color:var(--g600);margin-bottom:16px}
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.pillar{border:1px solid var(--g200);border-radius:10px;padding:40px;background:#fff}
.pillar .k{font-family:var(--en);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--g500);font-weight:600}
.pillar h3{font-size:28px;margin:10px 0 14px;font-weight:600}
.pillar p{color:var(--g600)}
.pillar ul{list-style:none;margin-top:14px;display:grid;gap:8px}
.pillar li{padding-inline-start:26px;position:relative;color:var(--g700)}
.pillar li::before{content:"";position:absolute;inset-inline-start:0;top:.7em;width:12px;height:2px;background:var(--black)}
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:860px}
.person{background:var(--charcoal-2);border:1px solid var(--g800);border-radius:10px;padding:34px;display:flex;gap:24px;align-items:center}
.avatar{flex:none;width:84px;height:84px;border-radius:50%;background:linear-gradient(145deg,var(--g700),var(--g900));border:1px solid var(--g600);display:grid;place-items:center;font-family:var(--en);font-weight:600;font-size:26px;letter-spacing:.04em}
.person h3{font-family:var(--en);font-size:21px;font-weight:600;line-height:1.3;direction:ltr;text-align:start}
.person .role{color:var(--g400);font-size:15px;margin-top:6px;font-family:var(--en);direction:ltr;text-align:start}

/* products */
.sub-nav{background:#fff;border-bottom:1px solid var(--g200);position:sticky;top:76px;z-index:40}
.sub-nav .wrap{display:flex;gap:6px;overflow-x:auto;padding-block:10px}
.sub-nav a{white-space:nowrap;padding:8px 18px;border-radius:999px;border:1px solid var(--g300);font-weight:600;font-size:14.5px;transition:.2s}
.sub-nav a:hover{background:var(--black);color:#fff;border-color:var(--black)}
.product{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-block:72px;border-bottom:1px solid var(--g200)}
.product:last-of-type{border-bottom:0}
.product.flip .media{order:2}
.product .num{font-family:var(--en);font-size:13px;letter-spacing:.2em;color:var(--g500);font-weight:600}
.product h3{font-size:clamp(26px,3vw,36px);font-weight:600;line-height:1.3;margin:6px 0 16px}
.product p{color:var(--g600);margin-bottom:12px}
.product .note{background:var(--g100);border-inline-start:3px solid var(--black);padding:12px 16px;font-size:15px;border-radius:0 var(--r) var(--r) 0;color:var(--g700)}
html[dir=rtl] .product .note{border-radius:var(--r) 0 0 var(--r)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:22px}
.cols h4{font-size:15px;letter-spacing:.04em;font-weight:600;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid var(--black)}
.cols ul{list-style:none;display:grid;gap:7px}
.cols li{padding-inline-start:22px;position:relative;font-size:15.5px;color:var(--g700)}
.cols li::before{content:"✓";position:absolute;inset-inline-start:0;font-weight:600;font-size:13px;top:1px}
.media{display:grid;gap:14px}
.media.two{grid-template-columns:1fr 1fr}
.media.three{grid-template-columns:1fr 1fr}
.media.three .tall{grid-row:span 2}
.shot{border-radius:10px;overflow:hidden;background:var(--g100);border:1px solid var(--g200)}
.shot img{width:100%;height:100%;object-fit:cover}
.media.one .shot img{aspect-ratio:1/1}
.media.two .shot img{aspect-ratio:3/4}
.media.three .shot img{aspect-ratio:1/1}
.media.three .tall img{aspect-ratio:auto}
.ph-box{aspect-ratio:1/1;display:grid;place-items:center;text-align:center;background:repeating-linear-gradient(45deg,var(--g100) 0 14px,var(--g50) 14px 28px);color:var(--g500);padding:24px;font-size:15px;border-radius:10px;border:1px dashed var(--g400)}
.ph-box b{display:block;font-family:var(--en);letter-spacing:.2em;font-size:12px;margin-bottom:6px;color:var(--g600)}

/* applications */
.app-row{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;padding-block:56px}
.app-row.flip .shot{order:2}
.app-row .shot img{aspect-ratio:5/4}
.app-row h3{font-size:clamp(24px,2.8vw,34px);font-weight:600;line-height:1.35;margin:8px 0 14px}
.app-row p{color:var(--g600);margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{border:1px solid var(--g300);padding:5px 14px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--g700);background:#fff}
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--g800);border:1px solid var(--g800);border-radius:10px;overflow:hidden}
.sector{background:var(--charcoal-2);padding:34px 28px;transition:.25s}
.sector:hover{background:#303035}
.sector .n{font-family:var(--en);font-size:12px;color:var(--g500);letter-spacing:.2em;font-weight:600}
.sector h3{font-size:22px;margin:10px 0 8px}
.sector h3 small{display:block;font-family:var(--en);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--g500);font-weight:500;margin-top:3px}
.sector p{color:var(--g400);font-size:15px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.c-list{display:grid;gap:14px}
.c-item{display:flex;gap:18px;align-items:center;padding:22px 24px;border:1px solid var(--g200);border-radius:10px;background:#fff;transition:.2s}
a.c-item:hover{border-color:var(--black);transform:translateX(-4px)}
html[dir=ltr] a.c-item:hover{transform:translateX(4px)}
.c-item .ic{flex:none;width:52px;height:52px;border-radius:50%;background:var(--black);display:grid;place-items:center}
.c-item .ic svg{width:23px;height:23px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.c-item small{display:block;font-family:var(--en);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--g500)}
.c-item strong{font-size:19px;font-weight:600;word-break:break-all}
.c-item .ltr{direction:ltr;unicode-bidi:embed;display:inline-block}
.form{background:var(--charcoal);color:#fff;border-radius:14px;padding:40px}
.form h3{font-size:26px;font-weight:600;margin-bottom:6px}
.form p{color:var(--g400);margin-bottom:22px;font-size:15.5px}
.form label{display:block;font-size:14px;font-weight:600;margin:14px 0 6px;color:var(--g300)}
.form input,.form textarea,.form select{width:100%;background:var(--g900);border:1px solid var(--g700);color:#fff;border-radius:var(--r);padding:13px 15px;font:inherit;font-size:16px}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid #fff;outline-offset:1px}
.form textarea{min-height:120px;resize:vertical}
.form .btn{margin-top:22px;width:100%;justify-content:center;background:#fff;color:var(--black);border-color:#fff}
.form .btn:hover{background:var(--g200)}
.map-card{margin-top:40px;background:var(--g100);border-radius:14px;padding:44px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden}
.map-card::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 40px),
  repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 40px)}
.map-card>*{position:relative}
.map-card h3{font-size:26px;font-weight:600}
.map-card p{color:var(--g600)}

/* footer */
footer.site{background:var(--charcoal);color:var(--g400);padding:64px 0 26px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:40px;border-bottom:1px solid var(--g800)}
.f-grid .logo-box{background:#fff;border-radius:10px;padding:14px 18px;display:inline-block;margin-bottom:18px}
.f-grid .logo-box img{height:56px;width:auto}
.f-grid h4{color:#fff;font-size:16px;margin-bottom:14px}
.f-grid ul{list-style:none;display:grid;gap:8px}
.f-grid a:hover{color:#fff}
.copy{display:flex;justify-content:space-between;padding-top:22px;font-size:13.5px;flex-wrap:wrap;gap:8px}
.fab{position:fixed;bottom:22px;inset-inline-start:22px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--black);border:2px solid #fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:.2s}
.fab:hover{transform:scale(1.08)}
.fab svg{width:28px;height:28px;fill:#fff}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:980px){
  .hero .wrap,.intro,.story,.product,.app-row,.contact-grid{grid-template-columns:1fr;gap:36px}
  .hero .wrap{padding-block:56px}
  .story .side{position:static}
  .product.flip .media,.app-row.flip .shot{order:0}
  .grid3,.q-grid,.sectors{grid-template-columns:1fr 1fr}
  .pillars,.team,.grid2{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .f-grid>div:first-child{grid-column:1/-1}
  section{padding-block:64px}
  .band{padding:36px 28px}
}
@media (max-width:760px){
  .burger{display:block}
  .menu{position:absolute;top:76px;inset-inline:0;background:var(--bar);flex-direction:column;padding:12px 20px 20px;border-bottom:1px solid var(--g200);display:none;gap:2px}
  .menu.open{display:flex}
  .menu a{flex-direction:row;justify-content:space-between;padding:14px 16px}
  .sub-nav{top:76px}
}
@media (max-width:560px){
  body{font-size:16px}
  .grid3,.q-grid,.sectors,.cols,.f-grid{grid-template-columns:1fr}
  .person{flex-direction:column;text-align:center}
  .person h3,.person .role{text-align:center}
  .form{padding:26px}
  .map-card{padding:28px}
  .brand img{height:44px}
}
.arr{width:18px;height:18px;flex:none}

/* hero centered */
.hero .eyebrow{justify-content:center}
.hero p.lead{margin-inline:auto}
.hero .cta{justify-content:center;position:relative}
.hero .cta::before{content:"";position:absolute;inset:-26px 8%;background:radial-gradient(closest-side,rgba(255,255,255,.2),transparent);filter:blur(28px);z-index:0;pointer-events:none}
.hero .cta .btn{position:relative;z-index:1}
.hero .logo-card{width:min(400px,100%);padding:30px}
.logo-card::after{display:none}
.product,.app-row,.story,.pillars,.sec-head,.contact-grid{scroll-margin-top:140px}
.product{scroll-margin-top:150px}
.person .tel{display:inline-block;margin-top:12px;font-family:var(--en);font-weight:500;letter-spacing:.05em;direction:ltr;border-bottom:1px solid var(--g600);color:#fff;transition:border-color .25s}
.person .tel:hover{border-color:#fff}
.media.one .shot.doc img{aspect-ratio:auto}

/* motion */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(20px)}to{opacity:1;transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(28,28,31,.45)}70%{box-shadow:0 0 0 18px rgba(28,28,31,0)}100%{box-shadow:0 0 0 0 rgba(28,28,31,0)}}
body{animation:pageIn .7s ease both;transition:opacity .35s ease}
body.leaving{opacity:0}
header.site .nav{animation:fadeUp .7s .05s ease both}
.hero .wrap>*,.page-hero .wrap>*{animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) both}
.hero .wrap>*:nth-child(1){animation-delay:.1s}
.hero .wrap>*:nth-child(2){animation-delay:.3s}
.hero .wrap>*:nth-child(3){animation-name:pop;animation-delay:.5s}
.page-hero .crumbs{animation:fadeUp .8s .1s both}
.page-hero h1{animation:fadeUp .9s .22s both}
.page-hero p{animation:fadeUp .9s .36s both}
.hero h1,.hero p.lead{animation:none}
.reveal{transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.menu a{transition:background .25s,color .25s,transform .25s}
.menu a:hover{transform:translateY(-2px)}
.brand:hover img{transform:scale(1.05)}
.btn{transition:transform .3s,background .3s,color .3s,box-shadow .3s,border-color .3s}
.btn:hover{transform:translateY(-3px)}
.btn .arr{transition:transform .3s}
html[dir=rtl] .btn:hover .arr{transform:scaleX(-1) translateX(6px)}
.card .more .arr{transition:transform .3s}
html[dir=rtl] .card:hover .more .arr{transform:scaleX(-1) translateX(6px)}
.logo-card{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.logo-card:hover{transform:translateY(-6px) scale(1.02)}
.shot{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.shot img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.shot:hover{box-shadow:0 24px 50px rgba(0,0,0,.14)}
.shot:hover img{transform:scale(1.06)}
.shot{overflow:hidden}
.q,.sector,.pillar,.person,.c-item,.chips span{transition:transform .35s,background .35s,border-color .35s,box-shadow .35s}
.q:hover{background:#303035;transform:translateY(-4px)}
.q .ic{transition:transform .5s,background .35s}
.q:hover .ic{transform:rotate(360deg);background:#fff}
.q:hover .ic svg{stroke:var(--black)}
.sector:hover{transform:translateY(-4px)}
.pillar:hover{transform:translateY(-6px);border-color:var(--black);box-shadow:0 20px 40px rgba(0,0,0,.08)}
.person:hover{transform:translateY(-5px);border-color:var(--g600)}
.person .avatar{transition:transform .5s}
.person:hover .avatar{transform:scale(1.08) rotate(-4deg)}
.chips span:hover{background:var(--black);color:#fff;border-color:var(--black);transform:translateY(-2px)}
.sub-nav a{transition:background .25s,color .25s,transform .25s}
.sub-nav a:hover{transform:translateY(-2px)}
.fab{animation:pulse 2.4s infinite}
.form input,.form textarea,.form select{transition:border-color .25s,background .25s}
.form input:focus,.form textarea:focus,.form select:focus{background:#2d2d32}
header.site.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.12)}
header.site.scrolled .brand img{transform:scale(.92)}
@media (prefers-reduced-motion:reduce){
  body,header.site .nav,.hero .wrap>*,.page-hero .wrap>*,.page-hero h1,.page-hero p,.page-hero .crumbs,.fab{animation:none!important}
  *{transition-duration:.01ms!important}
}

/* ===== hero: logo left, name + text right ===== */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:72px;direction:ltr;text-align:start}
.hero .hero-text{direction:rtl;text-align:right}
html[dir=ltr] .hero .hero-text{direction:ltr;text-align:left}
.hero .eyebrow,.hero .cta{justify-content:flex-start}
.hero p.lead{margin-inline:0;max-width:none}
.hero .logo-card{width:100%;max-width:540px;justify-self:start}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:36px}.hero .logo-card{justify-self:center;max-width:420px}}
/* ===== language switch ===== */
.lang-btn{font:inherit;font-weight:700;font-size:14px;cursor:pointer;border:1.5px solid var(--black);background:transparent;color:var(--black);border-radius:999px;padding:7px 18px;transition:background .25s,color .25s;white-space:nowrap}
.lang-btn:hover{background:var(--black);color:#fff}
html[lang=en] body{font-family:var(--en),'Cairo',sans-serif}
html[lang=en] .menu a span,html[lang=en] .btn small,html[lang=en] .sec-head h2 small,html[lang=en] .page-hero h1 small,html[lang=en] .sector h3 small{display:none}

/* =====================================================
   BRAND THEME — logo colors: white · black · blue · yellow
   Rule: black = structure, blue = accents/links/icons,
   yellow = primary action & highlights (only on dark or as a fill)
   ===================================================== */
:root{
  --blue:#17A2E8;--blue-d:#0A78B6;--blue-l:#EAF6FD;--blue-m:#CBE8F8;
  --yellow:#FFC20E;--yellow-d:#E5AB00;
  --charcoal:#0b0b0c;--charcoal-2:#161618;--bar:#fff;
  --brand-line:linear-gradient(90deg,var(--blue) 0 50%,var(--yellow) 50% 100%);
}
/* header */
header.site{background:#fff;border-bottom:1px solid var(--g200);position:sticky}
header.site::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:3px;background:var(--brand-line)}
.menu a:hover{background:var(--blue-l);color:var(--blue-d)}
.menu a.active{background:var(--black);color:#fff;box-shadow:inset 0 -3px 0 var(--yellow)}
.menu a.active span{color:var(--yellow)}
.menu a span{color:var(--blue-d)}
.burger{border-color:var(--black)}
.lang-btn{border-color:var(--blue);color:var(--blue-d)}
.lang-btn:hover{background:var(--blue);color:#fff}
.menu{background:var(--bar)}
@media (max-width:760px){.menu{background:#fff}}

/* typography accents */
.eyebrow{color:var(--blue-d)}
.eyebrow::before{background:var(--yellow);height:3px}
.hero .eyebrow,.bg-dark .eyebrow,.page-hero .eyebrow{color:var(--blue)}
.hero h1 em{color:var(--yellow)}
.sec-head h2 small,.page-hero h1 small{color:var(--blue)}
.sec-head h2 small{color:var(--blue-d)}
.hero p.lead,.page-hero p{color:#d7dade}

/* buttons */
.btn-dark{background:var(--yellow);color:var(--black);border-color:var(--yellow)}
.btn-dark:hover{background:var(--black);color:var(--yellow);border-color:var(--black)}
.btn-dark small{opacity:.75}
.btn-line{border-color:var(--blue-d);color:var(--blue-d)}
.btn-line:hover{background:var(--blue-d);border-color:var(--blue-d);color:#fff}
.btn-light{background:rgba(23,162,232,.16);border:1px solid rgba(23,162,232,.55);color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.btn-light:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.hero .cta::before{background:radial-gradient(closest-side,rgba(23,162,232,.28),transparent)}

/* hero + page hero */
.hero,.page-hero{background:var(--black);background-image:radial-gradient(60% 90% at 85% 10%,rgba(23,162,232,.22),transparent 70%),radial-gradient(40% 60% at 5% 100%,rgba(255,194,14,.10),transparent 70%)}
.hero::after,.page-hero::after{content:"";position:absolute;inset-inline:0;bottom:0;height:4px;background:var(--brand-line)}
.crumbs{color:var(--g400)}
.crumbs a:hover{color:var(--yellow)}
.logo-card{box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(23,162,232,.35)}

/* sections: white / soft blue tint / black — never more than one accent per block */
.bg-gray{background:var(--blue-l)}
.bg-dark{background:var(--black)}
.bg-dark .sec-head p{color:#b9bec4}

/* intro / text */
.intro .big{color:var(--black)}

/* cards */
.card{border-color:var(--g200)}
.card:hover{border-color:var(--blue);box-shadow:0 20px 40px rgba(23,162,232,.18)}
.card .num{color:var(--blue-d)}
.card .more{color:var(--blue-d)}
.card .ph{background:var(--blue-l)}
.card .ph img{filter:none}

/* quality (dark) */
.q-grid,.sectors{background:#26262a;border-color:#26262a}
.q{background:var(--charcoal-2)}
.q .ic{border-color:var(--yellow)}
.q .ic svg{stroke:var(--yellow)}
.q:hover{background:#1d1d20}
.q:hover .ic{background:var(--yellow)}
.q:hover .ic svg{stroke:var(--black)}
.q h3{color:#fff}
.q p{color:#b9bec4}

/* CTA band */
.band{background:var(--yellow);color:var(--black)}
.band h2{color:var(--black)}
.band .btn-dark{background:var(--black);color:var(--yellow);border-color:var(--black)}
.band .btn-dark:hover{background:#fff;color:var(--black);border-color:#fff}
.band .eyebrow{color:var(--black)}
.band .eyebrow::before{background:var(--black)}

/* about */
.story blockquote{border-inline-start-color:var(--blue)}
.pillar{background:#fff}
.pillar:nth-child(odd){border-top:4px solid var(--blue)}
.pillar:nth-child(even){border-top:4px solid var(--yellow)}
.pillar:hover{border-color:var(--blue)}
.pillar .k{color:var(--blue-d)}
.pillar li::before{background:var(--yellow);height:3px}
.person{background:var(--charcoal-2);border-color:#26262a}
.avatar{background:var(--blue);border-color:var(--blue);color:#fff}
.person:nth-child(even) .avatar{background:var(--yellow);border-color:var(--yellow);color:var(--black)}
.person:hover{border-color:var(--blue)}
.person .role{color:#b9bec4}
.person .tel{border-bottom-color:var(--yellow);color:var(--yellow)}
.person .tel:hover{border-color:#fff;color:#fff}

/* products */
.sub-nav{background:#fff;border-bottom:1px solid var(--g200)}
.sub-nav a{border-color:var(--blue-m);color:var(--blue-d);background:#fff}
.sub-nav a:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.product .num{color:var(--blue-d)}
.product .note{background:var(--blue-l);border-inline-start-color:var(--yellow)}
.cols h4{border-bottom-color:var(--blue)}
.cols li::before{color:var(--blue-d)}
.shot{background:var(--blue-l);border-color:var(--g200)}
.shot:hover{box-shadow:0 24px 50px rgba(23,162,232,.2)}
.ph-box{background:repeating-linear-gradient(45deg,var(--blue-l) 0 14px,#fff 14px 28px);border-color:var(--blue)}

/* applications */
.chips span{border-color:var(--blue-m);color:var(--blue-d);background:#fff}
.chips span:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.sector{background:var(--charcoal-2)}
.sector:hover{background:#1d1d20}
.sector .n{color:var(--yellow)}
.sector h3 small{color:var(--blue)}
.sector p{color:#b9bec4}

/* contact */
.c-item{border-color:var(--g200)}
a.c-item:hover{border-color:var(--blue);box-shadow:0 12px 30px rgba(23,162,232,.15)}
.c-item .ic{background:var(--blue)}
.c-item:nth-child(even) .ic{background:var(--black)}
.c-item small{color:var(--blue-d)}
.c-item .phones{display:flex;flex-wrap:wrap;gap:4px 22px;word-break:normal}
.c-item .phones a{transition:color .2s}
.c-item .phones a:hover{color:var(--blue-d)}
.form{background:var(--black);border-top:4px solid var(--yellow)}
.form label{color:#d7dade}
.form input,.form textarea,.form select{background:#161618;border-color:#33333a}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--blue);background:#1d1d20}
.form .btn{background:var(--yellow);border-color:var(--yellow);color:var(--black)}
.form .btn:hover{background:#fff;border-color:#fff}
.map-card{background:var(--blue-l)}
.map-card::before{background:repeating-linear-gradient(0deg,rgba(23,162,232,.10) 0 1px,transparent 1px 40px),repeating-linear-gradient(90deg,rgba(23,162,232,.10) 0 1px,transparent 1px 40px)}

/* footer */
footer.site{background:var(--black);color:#b9bec4;position:relative}
footer.site::before{content:"";position:absolute;inset-inline:0;top:0;height:4px;background:var(--brand-line)}
.f-grid{border-bottom-color:#26262a}
.f-grid h4{color:var(--yellow)}
.f-grid a:hover{color:var(--blue)}
.f-grid .phones{display:flex;flex-wrap:wrap;gap:4px 18px}
.copy{color:#8d939a}

/* floating whatsapp */
.fab{background:var(--blue);border-color:#fff}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(23,162,232,.55)}70%{box-shadow:0 0 0 18px rgba(23,162,232,0)}100%{box-shadow:0 0 0 0 rgba(23,162,232,0)}}

/* focus */
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
::selection{background:var(--yellow);color:var(--black)}
.f-grid .phones{direction:ltr;justify-content:flex-start}html[dir=rtl] .f-grid .phones{justify-content:flex-end}

/* home cards: show the middle of the photo, full photo on hover */
.card.mid .ph{background:#fff}
.card.mid .ph img{object-fit:cover;object-position:center;filter:none;transition:transform .5s ease}
.card.mid:hover .ph img{object-fit:contain;transform:none;filter:none}
/* products: show first plastic image completely */
.media.two .shot.full img{aspect-ratio:auto;height:auto;object-fit:contain}
.media.two .shot.full{align-self:start}
/* map */
.map-embed{margin-top:24px;border-radius:14px;overflow:hidden;border:1px solid var(--g200);border-bottom:4px solid var(--yellow);box-shadow:0 12px 30px rgba(23,162,232,.12)}
.map-embed iframe{display:block;width:100%;height:420px;border:0}
@media (max-width:560px){.map-embed iframe{height:320px}}

/* home cards: same hover on all three — box grows so the whole photo shows edge to edge */
.card.mid .ph{aspect-ratio:4/3;transition:aspect-ratio .5s ease;background:#fff}
.card.mid:hover .ph{aspect-ratio:var(--full,4/3)}
.card.mid .ph img{object-fit:cover;object-position:center;width:100%;height:100%}
.card.mid:hover .ph img{object-fit:cover;transform:none;filter:none}
/* applications */
.app-row .shot.full img{aspect-ratio:auto;height:auto;object-fit:contain}
.app-row .shot.white{background:#fff}
.app-row .shot.white img{aspect-ratio:5/4;object-fit:contain}
.f-grid a.loc{display:inline-flex;align-items:center;gap:6px;color:var(--yellow);font-weight:600}
.f-grid a.loc::before{content:"📍";font-size:14px}
.f-grid a.loc:hover{color:var(--blue)}

/* email dropdown — inline accordion, first item of the contact list */
.mail-dd{position:relative;display:block}
.mail-btn{width:100%;justify-content:space-between;gap:14px;padding:18px 24px;cursor:pointer;font-size:18px;border-radius:10px}
.mail-btn .lbl{display:flex;align-items:center;gap:14px}
.mail-btn .mi svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block}
.mail-btn .chev{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.mail-dd.open .chev{transform:rotate(180deg)}
.mail-dd.open .mail-btn{background:var(--black);color:var(--yellow);border-color:var(--black);border-bottom-left-radius:0;border-bottom-right-radius:0}
.mail-menu{overflow:hidden;max-height:0;opacity:0;visibility:hidden;background:#fff;border:1px solid var(--g200);border-top:0;border-radius:0 0 10px 10px;padding:0 8px;transition:max-height .4s ease,opacity .3s ease,padding .3s ease,visibility .3s}
.mail-dd.open .mail-menu{max-height:420px;opacity:1;visibility:visible;padding:8px;box-shadow:0 14px 30px rgba(23,162,232,.12)}
.mail-menu a{display:block;padding:12px 16px;border-radius:8px;transition:background .2s;text-align:start}
.mail-menu a small{display:block;font-size:12.5px;font-weight:600;color:var(--blue-d);line-height:1.5}
.mail-menu a strong{display:block;font-size:16px;font-weight:600;word-break:break-all}
.mail-menu a:hover,.mail-menu a:focus-visible{background:var(--blue-l)}
.mail-menu a.primary{background:#fff8e1;border:1px solid var(--yellow);margin-bottom:6px}
.mail-menu a.primary small{color:var(--black)}
.mail-menu a.primary:hover{background:var(--yellow)}
html[dir=rtl] .mail-menu a strong{text-align:right}html[dir=ltr] .mail-menu a strong{text-align:left}