/* Layout: brochure language carried to the web. Hexagon-cut photos, a section title that runs into a navy bar, parallelogram ribbons for list items. Single light look, matching the printed profile. */
:root{
  --orange:#FE631A;
  --orange-ink:#C93F00;
  --orange-soft:#FFE9DC;
  --tint:#FFF6F0;
  --navy:#394055;
  --navy-deep:#262B3B;
  --ink:#1D2232;
  --muted:#58607A;
  --paper:#FFFFFF;
  --line:#E6E8EF;
  --f-ar:"Cairo","Segoe UI",Tahoma,sans-serif;
  --f-en:"Poppins","Cairo","Segoe UI",sans-serif;
  --hex:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  --rib:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-ar);font-size:16px;line-height:1.75}
html[lang="en"] body{font-family:var(--f-en);line-height:1.65}
html[lang="ar"] .en{display:none!important}
html[lang="en"] .ar{display:none!important}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--paper);z-index:60}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.wrap{max-width:1180px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
section{scroll-margin-top:96px}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance;line-height:1.3}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:8px}
.brand img{height:52px;width:auto}
.nav{display:flex;gap:4px;margin-inline-start:auto;font-weight:700;font-size:15px}
.nav a{text-decoration:none;padding:8px 12px;color:var(--navy);border-bottom:3px solid transparent}
.nav a:hover{color:var(--orange-ink);border-color:var(--orange)}
.tools{display:flex;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 22px;border:2px solid var(--orange);background:var(--orange);color:#fff;font:inherit;font-weight:800;text-decoration:none;cursor:pointer;clip-path:var(--rib);transition:background .2s,color .2s}
.btn:hover{background:var(--navy);border-color:var(--navy)}
.btn.ghost{background:var(--paper);color:var(--navy);border-color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff}
.lang{min-height:44px;min-width:56px;padding:6px 14px;border:2px solid var(--navy);background:var(--paper);color:var(--navy);font:800 14px var(--f-en);cursor:pointer;border-radius:4px}
.lang:hover{background:var(--navy);color:#fff}
@media (max-width:900px){.nav{order:3;width:100%;margin:0;overflow-x:auto;padding-bottom:2px}.tools{margin-inline-start:auto}.brand img{height:44px}}
@media (max-width:480px){.tools .btn{display:none}}

/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--tint),var(--paper) 78%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding-block:56px 64px}
.chip{display:inline-block;background:var(--navy);color:#fff;font-weight:700;font-size:14px;padding:4px 18px;clip-path:var(--rib);margin-bottom:18px}
.hero h1{font-size:clamp(30px,4.4vw,52px);font-weight:900;color:var(--navy);line-height:1.25}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero p.lead{margin-top:18px;max-width:54ch;color:var(--muted);font-size:18px}
.motto{margin-top:20px;font:700 22px var(--f-en);color:var(--orange-ink);letter-spacing:.01em;direction:ltr;text-align:start}
html[lang="ar"] .motto{text-align:right;direction:rtl}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.facts{display:flex;gap:28px;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:2px solid var(--line)}
.facts b{display:block;font:800 34px/1 var(--f-en);color:var(--navy);font-variant-numeric:tabular-nums}
.facts span{font-size:14px;color:var(--muted);font-weight:600}
.hero-art{position:relative}
.hero-art .hx{position:absolute;width:34%;aspect-ratio:1.155;background:var(--orange);clip-path:var(--hex);inset-block-end:-26px;inset-inline-start:-34px;z-index:0}
.hero-art .hx2{position:absolute;width:16%;aspect-ratio:1.155;background:var(--navy);clip-path:var(--hex);inset-block-start:-20px;inset-inline-end:-8px;z-index:0}
.hero-art img{position:relative;z-index:1;width:100%;aspect-ratio:1000/720;object-fit:cover;object-position:top;clip-path:polygon(9% 0,100% 0,100% 90%,91% 100%,0 100%,0 10%)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;padding-block:36px 48px}.hero-art{order:-1;margin-inline:10px}}

/* section heading: title, icon disc, bar running to the edge */
.sec-head{display:flex;align-items:center;gap:14px;margin-bottom:34px}
.sec-head h2{font-size:clamp(26px,3.6vw,38px);font-weight:900;color:var(--orange);white-space:nowrap}
.sec-head .disc{flex:none;width:52px;height:52px;border-radius:50%;background:var(--navy);display:grid;place-items:center;color:#fff}
.sec-head .disc svg{width:26px;height:26px}
.sec-head .rule{flex:1;height:16px;background:var(--navy);clip-path:polygon(0 0,100% 0,100% 100%,14px 100%)}
html[dir="rtl"] .sec-head .rule{clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.ico{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pad{padding-block:76px}
.alt{background:var(--tint)}

/* about */
.about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.about-grid p{color:var(--ink);font-size:17px}
.hexpic{position:relative;max-width:520px;margin-inline:auto;width:100%}
.hexpic img{width:100%;aspect-ratio:1.155;object-fit:cover;clip-path:var(--hex)}
.hexpic::after{content:"";position:absolute;width:26%;aspect-ratio:1.155;background:var(--orange);clip-path:var(--hex);inset-block-end:2%;inset-inline-end:-4%}
.vmg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.vmg article{background:var(--paper);border:1px solid var(--line);padding:26px 24px;border-top:5px solid var(--orange)}
.vmg article:nth-child(2){border-top-color:var(--navy)}
.vmg h3{display:flex;align-items:center;gap:10px;font-size:22px;color:var(--navy);margin-bottom:10px}
.vmg h3 svg{width:28px;height:28px;color:var(--orange)}
.vmg p{font-size:15.5px;color:var(--muted)}
.values{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;align-items:center}
.values h3{font-size:18px;color:var(--navy);margin-inline-end:10px}
.rib{display:inline-block;padding:7px 30px;color:#fff;background:var(--navy);font-weight:800;clip-path:var(--rib)}
.rib.o{background:var(--orange)}
@media (max-width:900px){.about-grid{grid-template-columns:1fr;gap:28px}.vmg{grid-template-columns:1fr}.pad{padding-block:52px}}

/* services */
.sub{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.sub h3{font-size:24px;color:var(--navy);font-weight:800}
.sub small{font:600 14px var(--f-en);color:var(--orange-ink);letter-spacing:.04em}
.elv{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;list-style:none;margin:0;padding:0}
.elv li{display:flex;gap:12px;align-items:center;background:var(--paper);border:1px solid var(--line);padding:14px 14px;min-height:78px;transition:background .2s,color .2s,transform .2s}
.elv li:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.elv .hx{flex:none;width:34px;aspect-ratio:1.155;background:var(--orange);clip-path:var(--hex)}
.elv li:nth-child(even) .hx{background:var(--navy)}
.elv li:hover .hx{background:var(--orange)}
.elv b{display:block;font-size:15.5px;line-height:1.4;font-weight:700}
.elv small{display:block;font:500 12px/1.4 var(--f-en);color:var(--muted);margin-top:2px}
html[lang="en"] .elv small{font-family:var(--f-ar)}
.elv li:hover small{color:#D8DCE8}
.strip{margin-top:26px}
.strip img{width:100%;height:auto;aspect-ratio:1000/330;object-fit:cover;object-position:center 40%;clip-path:polygon(2.5% 0,100% 0,97.5% 100%,0 100%)}
.ff{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;margin-top:72px}
.ff img{width:100%;aspect-ratio:900/455;object-fit:cover;clip-path:polygon(8% 0,100% 0,100% 88%,92% 100%,0 100%,0 12%)}
.ff-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ff-list li{background:var(--navy);color:#fff;font-weight:700;padding:12px 34px;clip-path:polygon(18px 0,100% 0,calc(100% - 18px) 100%,0 100%)}
.ff-list li:first-child{background:var(--orange)}
.note{margin-top:18px;color:var(--muted);font-size:15px}
@media (max-width:1000px){.elv{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.elv{grid-template-columns:repeat(2,1fr)}.ff{grid-template-columns:1fr;gap:26px;margin-top:52px}}
@media (max-width:440px){.elv{grid-template-columns:1fr}}

/* sectors */
.dark{background:var(--navy-deep);color:#fff;position:relative;overflow:hidden}
.dark .sec-head .rule{background:var(--orange)}
.dark .sec-head h2{color:#fff}
.dark .sec-head .disc{background:var(--orange)}
.sectors{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.sector{padding:28px 14px 24px;text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.sector svg{width:44px;height:44px;color:var(--orange);margin-bottom:12px}
.sector b{display:block;font-size:17px;line-height:1.4}
.sector small{display:block;font:500 12.5px var(--f-en);color:#C4CADB;margin-top:4px}
html[lang="en"] .sector small{font-family:var(--f-ar)}
.coop{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.coop div{padding:22px 24px;border-inline-start:6px solid var(--orange);background:rgba(255,255,255,.06)}
.coop h3{font-size:19px;margin-bottom:6px}
.coop p{color:#D3D8E6;font-size:15.5px}
@media (max-width:1000px){.sectors{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.sectors{grid-template-columns:repeat(2,1fr)}.coop{grid-template-columns:1fr}}

/* work */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tab{min-height:44px;padding:8px 26px;border:0;background:var(--orange-soft);color:var(--navy);font:800 15.5px inherit;font-family:inherit;cursor:pointer;clip-path:var(--rib)}
.tab[aria-selected="true"]{background:var(--navy);color:#fff}
.tab:hover{background:var(--orange);color:#fff}
.ptitle{font-size:22px;color:var(--navy);font-weight:800;margin:22px 0 16px}
.ptitle small{display:block;font-size:14.5px;color:var(--muted);font-weight:600}
.tags{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;list-style:none;margin:0;padding:0}
.tags li{padding:10px 30px;color:#fff;background:var(--navy);font-weight:700;font-size:15px;line-height:1.45;clip-path:var(--rib)}
.tags li:nth-child(4n+1),.tags li:nth-child(4n+2){background:var(--navy)}
.tags li:nth-child(odd){background:var(--orange)}
.tags li:nth-child(even){background:var(--navy)}
.tags li{display:flex;align-items:center;min-height:50px}
@media (max-width:900px){.tags{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.tags{grid-template-columns:1fr}}

/* contact */
.contact{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.contact h3{font-size:clamp(26px,3.4vw,38px);font-weight:900}
.contact p{color:#D3D8E6;margin-top:10px;max-width:50ch}
.person{margin-top:26px;font-weight:800;font-size:20px;color:var(--orange)}
.phones{display:grid;gap:12px}
.phone{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:16px 18px}
.phone .num{font:700 clamp(22px,3.2vw,30px)/1 var(--f-en);direction:ltr;unicode-bidi:isolate;letter-spacing:.03em;user-select:all;flex:1;min-width:0}
.mini{min-height:44px;padding:6px 16px;border:2px solid rgba(255,255,255,.5);background:transparent;color:#fff;font:700 14px var(--f-ar);cursor:pointer;border-radius:4px}
.mini:hover{background:#fff;color:var(--navy-deep)}
.wa{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:6px 20px;background:var(--orange);color:#fff;font-weight:800;text-decoration:none;clip-path:var(--rib)}
.wa:hover{background:#fff;color:var(--orange-ink)}
@media (max-width:900px){.contact{grid-template-columns:1fr}}

footer{background:#1B1F2C;color:#B7BED0;padding-block:30px;font-size:14px}
footer .wrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:space-between}
footer .plate{background:#fff;padding:6px 14px;border-radius:6px}
footer .plate img{height:42px;width:auto}