/* ===== BANI Aluminum - navy, bilingual ===== */
:root{
  --black:#080b12;
  --navy:#0b1e3a;          /* deep navy */
  --navy-2:#102c52;        /* mid navy */
  --navy-3:#0e2646;        /* navy black */
  --navy-panel:#0d2140;
  --panel:#0d1520;
  --panel-2:#122036;
  --white:#f4f7fb;
  --muted:#93a1b5;
  --line:rgba(255,255,255,.10);
  --line-navy:rgba(120,170,230,.18);
  --brand:#1f7ac2;         /* BANI logo blue */
  --brand-2:#4ea3e0;
  --brand-soft:#8fc2ec;
  --silver:#c8d2df;
  --radius:14px;
  --maxw:1240px;
  /* Horizontal gutter. viewport-fit=cover lets the page paint edge to edge on
     notched phones, so every gutter has to clear the cutout itself. Falls back
     to a plain 32px anywhere env() is unsupported. */
  --sg-l:max(32px,env(safe-area-inset-left,0px));
  --sg-r:max(32px,env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.22,.61,.36,1);
  --ar:'Cairo',sans-serif;
  --en-head:'Manrope',sans-serif;
  --en-body:'Inter',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--en-body);
  background:var(--black);color:var(--white);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--en-head);font-weight:800;line-height:1.08;letter-spacing:-.02em}

/* Arabic mode */
html[dir="rtl"] body{font-family:var(--ar)}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{font-family:var(--ar);letter-spacing:0}
html[dir="rtl"] .hero__eyebrow,html[dir="rtl"] .eyebrow,html[dir="rtl"] .stat__label,html[dir="rtl"] .scard__en,html[dir="rtl"] .brand__word{letter-spacing:0}

.section{max-width:var(--maxw);margin:0 auto;padding:120px var(--sg-r) 120px var(--sg-l)}
.eyebrow{font-family:var(--en-head);font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--brand-2);margin-bottom:18px}
.eyebrow--light{color:var(--brand-soft)}
.h2{font-size:clamp(2rem,4.4vw,3.4rem);color:var(--white)}
.section__head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:64px;flex-wrap:wrap}
.section__lead{max-width:440px;color:var(--muted);font-size:1.02rem}
.section__lead--light{color:#b7c6dc}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--white);color:var(--black);font-family:var(--en-head);font-weight:700;font-size:.92rem;padding:14px 26px;border-radius:100px;border:1px solid var(--white);cursor:pointer;transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn--brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn--brand:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn--ghost{background:transparent;color:var(--white);border-color:var(--line-navy)}
.btn--ghost:hover{background:rgba(120,170,230,.10);border-color:var(--brand-2);color:#fff}
.btn--sm{padding:10px 18px;font-size:.83rem}
html[dir="rtl"] .btn{font-family:var(--ar)}

/* language toggle */
.langtoggle{background:transparent;border:1px solid var(--line-navy);color:var(--silver);font-family:var(--en-head);font-weight:700;font-size:.82rem;padding:9px 14px;border-radius:100px;cursor:pointer;transition:.25s;min-width:56px}
.langtoggle:hover{border-color:var(--brand-2);color:#fff}

/* ===== BRAND LOGO ===== */
.brand{display:inline-flex;align-items:center}
.brand__mark{height:42px;width:auto}
.footer__brand .brand__mark{height:46px}

/* ===== NAV ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:border-color .4s;border-bottom:1px solid transparent}
/* The scrolled background sits on a pseudo-element, never on .nav itself.
   backdrop-filter makes an element the containing block for its
   position:fixed descendants, and .nav__links is one: with the filter on
   .nav, the mobile drawer collapsed from full viewport height to the height
   of the bar as soon as .scrolled was added, spilling its links onto the
   page. Keeping the filter on ::before leaves the drawer anchored to the
   viewport. */
.nav::before{content:'';position:absolute;inset:0;z-index:-1;transition:background .4s}
.nav.scrolled{border-bottom-color:var(--line-navy)}
.nav.scrolled::before{background:var(--navy)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nav.scrolled::before{background:rgba(11,30,58,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}
.nav__inner{max-width:var(--maxw);margin:0 auto;padding:16px var(--sg-r) 16px var(--sg-l);display:flex;align-items:center;justify-content:space-between;gap:22px}
.nav__links{display:flex;gap:26px}
.nav__links a{font-family:var(--en-head);font-weight:600;font-size:.9rem;white-space:nowrap;color:var(--silver);position:relative;padding:4px 0;transition:color .25s}
.nav__links a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--brand-2);transition:width .3s var(--ease)}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{width:100%}
html[dir="rtl"] .nav__links a{font-family:var(--ar)}
html[dir="rtl"] .nav__links a::after{left:auto;right:0}
/* Sits above the mobile drawer, which is fixed-position and would otherwise
   cover the burger and trap the menu open. */
.nav__actions{display:flex;align-items:center;gap:12px;position:relative;z-index:2}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav__toggle span{width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
/* burger folds into a close cross while the drawer is open */
.nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle.is-open span:nth-child(2){opacity:0}
.nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== HERO ===== */
.hero{position:relative;height:100vh;min-height:680px;display:flex;align-items:center;overflow:hidden;padding-top:clamp(96px,14vh,180px);padding-bottom:48px}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,rgba(8,11,18,.95) 0%,rgba(11,30,58,.78) 42%,rgba(16,44,82,.5) 100%)}
html[dir="rtl"] .hero__overlay{background:linear-gradient(255deg,rgba(8,11,18,.95) 0%,rgba(11,30,58,.78) 42%,rgba(16,44,82,.5) 100%)}
.hero__content{position:relative;z-index:2;max-width:var(--maxw);width:100%;margin:0 auto;padding:0 var(--sg-r) 0 var(--sg-l)}
.hero__eyebrow{font-family:var(--en-head);font-weight:700;letter-spacing:.24em;font-size:.76rem;color:var(--brand-soft);margin-bottom:26px}
html[dir="rtl"] .hero__eyebrow{font-family:var(--ar)}
.hero__title{font-size:clamp(2.8rem,7vw,5.6rem);letter-spacing:-.03em}
.hero__sub{max-width:560px;margin-top:26px;font-size:clamp(1.02rem,1.6vw,1.22rem);color:var(--silver)}
.hero__cta{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap}
.hero__est{display:inline-flex;align-items:center;gap:14px;margin-top:36px;font-family:var(--en-head);font-weight:600;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-soft)}
html[dir="rtl"] .hero__est{font-family:var(--ar);letter-spacing:0}
.hero__est-line{width:46px;height:1px;background:var(--brand-2);display:inline-block}
.hero__scroll{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;width:26px;height:42px;border:2px solid rgba(140,180,230,.4);border-radius:14px}
.hero__scroll span{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:3px;height:8px;background:var(--brand-2);border-radius:2px;animation:scrollDot 1.8s infinite}
@keyframes scrollDot{0%{opacity:0;top:8px}40%{opacity:1}80%{opacity:0;top:22px}100%{opacity:0}}

/* ===== STATS ===== */
.stats{border-top:1px solid var(--line-navy);border-bottom:1px solid var(--line-navy);background:linear-gradient(180deg,var(--navy) 0%,var(--navy-3) 100%)}
.stats__grid{max-width:var(--maxw);margin:0 auto;padding:56px 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{text-align:center;padding:10px}
.stat__num{font-family:var(--en-head);font-weight:800;font-size:clamp(2rem,3.6vw,3rem);color:#fff;letter-spacing:-.02em}
.stat__label{margin-top:8px;font-size:.82rem;color:var(--brand-soft);text-transform:uppercase;letter-spacing:.08em}
html[dir="rtl"] .stat__label{text-transform:none}

/* ===== INTRO ===== */
.intro__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.intro__body p{color:var(--silver);font-size:1.12rem;margin-bottom:18px}

/* ===== PROJECTS ===== */
/* ===== Projects carousel ===== */
.carousel{--per:3;--gap:20px;position:relative}
.carousel__viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;border-radius:var(--radius)}
.carousel__viewport::-webkit-scrollbar{display:none}
.carousel__viewport.is-dragging{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing}
.carousel__viewport.is-dragging .pcard{pointer-events:none}
.carousel__track{display:flex;gap:var(--gap);padding-bottom:2px}
.carousel__track>.pcard{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));scroll-snap-align:start}
.carousel__arrow{position:absolute;top:50%;z-index:5;translate:0 -50%;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-navy);background:rgba(11,30,58,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--white);cursor:pointer;transition:.28s var(--ease)}
.carousel__arrow svg{width:22px;height:22px}
.carousel__arrow:hover:not(:disabled){background:var(--brand);border-color:var(--brand);transform:scale(1.08)}
.carousel__arrow:disabled{opacity:.28;cursor:default}
.carousel__arrow--prev{inset-inline-start:-22px}
.carousel__arrow--next{inset-inline-end:-22px}
html[dir="rtl"] .carousel__arrow svg{scale:-1 1}
.carousel__dots{display:flex;justify-content:center;gap:10px;margin-top:30px}
.carousel__dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(200,210,223,.28);cursor:pointer;transition:.3s var(--ease)}
.carousel__dot:hover{background:var(--brand-soft)}
.carousel__dot.is-active{background:var(--brand-2);width:28px;border-radius:5px}

.pcard{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--panel-2);cursor:pointer}
.pcard:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px}
.pcard__status{position:absolute;top:14px;inset-inline-start:14px;z-index:3;font-family:var(--en-head);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:100px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pcard__status--completed{background:rgba(31,122,194,.24);border:1px solid rgba(143,194,236,.5);color:var(--brand-soft)}
.pcard__status--ongoing{background:rgba(226,167,48,.2);border:1px solid rgba(240,196,110,.55);color:#f2c97a}
html[dir="rtl"] .pcard__status{font-family:var(--ar);letter-spacing:0}
.pcard__cta{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-family:var(--en-head);font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-2);max-height:0;opacity:0;overflow:hidden;transition:.45s var(--ease)}
.pcard__cta svg{width:15px;height:15px}
html[dir="rtl"] .pcard__cta{font-family:var(--ar);letter-spacing:0}
html[dir="rtl"] .pcard__cta svg{scale:-1 1}
.pcard:hover .pcard__cta,.pcard:focus-visible .pcard__cta{max-height:30px;opacity:1}
.pcard img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .5s;filter:grayscale(.15) brightness(.86)}
.pcard__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,15,30,.94) 0%,rgba(11,30,58,.15) 55%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:24px;transition:.4s}
.pcard__tag{font-family:var(--en-head);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-soft);margin-bottom:8px}
.pcard__name{font-family:var(--en-head);font-weight:700;font-size:1.18rem;color:#fff}
.pcard__loc{font-size:.86rem;color:var(--muted);margin-top:4px}
.pcard__scope{font-size:.82rem;color:var(--silver);margin-top:12px;max-height:0;opacity:0;overflow:hidden;transition:.45s var(--ease)}
.pcard:hover img{transform:scale(1.07);filter:grayscale(0) brightness(1)}
.pcard:hover .pcard__scope{max-height:60px;opacity:1}
html[dir="rtl"] .pcard__name,html[dir="rtl"] .pcard__tag{font-family:var(--ar);letter-spacing:0}

/* ===== SERVICES ===== */
.services__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.scard{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:1/1;background:var(--panel-2);border:1px solid var(--line-navy)}
.scard img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) brightness(.68);transition:transform .6s var(--ease),filter .5s}
.scard__label{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;background:linear-gradient(to top,rgba(8,15,30,.92),transparent 70%)}
.scard__en{font-family:var(--en-head);font-weight:700;font-size:.98rem;color:#fff;line-height:1.2}
.scard__ar{font-size:.82rem;color:var(--brand-soft);margin-top:3px;direction:rtl}
.scard:hover img{transform:scale(1.08);filter:grayscale(0) brightness(.92)}
html[dir="rtl"] .scard__en{font-family:var(--ar)}
html[dir="rtl"] .scard__ar{direction:rtl}

/* ===== ENGINEERING / CAPABILITY GRID (navy band) ===== */
.engineering{max-width:100%;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-3) 55%,var(--black) 100%);border-top:1px solid var(--line-navy);border-bottom:1px solid var(--line-navy)}
.engineering__head{max-width:var(--maxw);margin:0 auto 56px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.capgrid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-navy);border:1px solid var(--line-navy);border-radius:var(--radius);overflow:hidden}
.capcell{background:var(--navy-panel);padding:34px 30px;cursor:pointer;transition:background .3s,transform .3s;position:relative;min-height:150px;display:flex;flex-direction:column;justify-content:space-between}
.capcell:hover{background:var(--navy-2)}
.capcell__num{font-family:var(--en-head);font-weight:800;font-size:1.1rem;color:var(--brand-2)}
.capcell__title{font-family:var(--en-head);font-weight:700;font-size:1.24rem;color:#fff;margin-top:20px}
.capcell__more{margin-top:14px;font-size:.82rem;color:var(--brand-soft);display:inline-flex;align-items:center;gap:7px}
.capcell__more::after{content:'→';transition:transform .25s}
.capcell:hover .capcell__more::after{transform:translateX(4px)}
html[dir="rtl"] .capcell__title{font-family:var(--ar)}
html[dir="rtl"] .capcell__more::after{content:'←'}
html[dir="rtl"] .capcell:hover .capcell__more::after{transform:translateX(-4px)}

/* ===== PROCESS - SNAKE LAYOUT ===== */
.snake{display:flex;flex-direction:column;max-width:1080px;margin:0 auto}
.snake__row{display:flex;gap:18px;align-items:stretch}
.snake__row--rev{flex-direction:row-reverse}
.sstep{flex:1;background:var(--navy-panel);border:1px solid var(--line-navy);border-radius:14px;padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;transition:background .35s,transform .35s var(--ease)}
.sstep:hover{background:var(--navy-2);transform:translateY(-3px)}
.sstep__num{width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff;font-family:var(--en-head);font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center;flex:none}
.sstep__title{font-family:var(--en-head);font-weight:700;font-size:1.08rem;color:#fff}
.sstep__cap{color:var(--muted);font-size:.88rem;line-height:1.5}
html[dir="rtl"] .sstep__title{font-family:var(--ar)}
.snake__chev{flex:0 0 auto;align-self:center;color:var(--brand-2);font-size:.85rem;display:flex;align-items:center}
.snake__chev::before{content:'\25B6'}
.snake__row--rev .snake__chev::before{content:'\25C0'}
.snake__turn{display:flex;padding:10px 0;color:var(--brand-2);font-size:.9rem}
.snake__turn--right{justify-content:flex-end;padding-inline-end:15%}
.snake__turn--left{justify-content:flex-start;padding-inline-start:15%}
.snake__turn::before{content:'\25BC'}

/* ===== ORGANIZATION CHART =====
   Four columns, left to right: leadership, department, manager, reports -
   the same reading order as the printed chart in the company profile.

   Every connector is a pseudo-element drawn with logical properties, so the
   whole chart mirrors itself in Arabic without a single RTL override.

   Geometry: a node card is --org-node tall and each list item adds --org-pad
   above and below it, so a node's centre always sits --org-stub from the top
   of its item. That one number keeps the stubs, the arrowheads and the
   vertical bus aligned at every level.                                        */
.org{
  --org-node:52px;       /* node height */
  --org-pad:7px;         /* space around each item */
  --org-stub:33px;       /* --org-pad + --org-node/2 */
  --org-ind:26px;        /* horizontal stub length */
  --org-trunk:36px;      /* leadership to departments */
  --org-exec:224px;
  --org-join:26px;
  --org-head:180px;
  --org-lead:178px;
  --org-chip:220px;
  max-width:100%;
}
.orgchart{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:var(--org-trunk)}

/* ---- leadership pair ---- */
.orgchart__lead{display:flex;align-items:center;align-self:center}
.orgexec{display:flex;align-items:center;gap:12px;width:var(--org-exec);padding:14px 16px;border-radius:14px;background:linear-gradient(140deg,var(--navy-2) 0%,var(--navy-panel) 100%);border:1px solid var(--line-navy)}
.orgexec--coo{border-color:rgba(78,163,224,.45);box-shadow:0 0 0 1px rgba(78,163,224,.12)}
.orgexec__badge{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--en-head);font-weight:800;font-size:.9rem;letter-spacing:.04em;background:transparent;border:2px solid var(--brand-2);color:var(--brand-soft)}
.orgexec--coo .orgexec__badge{background:var(--brand);border-color:var(--brand);color:#fff}
.orgexec__name{font-family:var(--en-head);font-weight:700;font-size:.86rem;color:#fff;line-height:1.25;letter-spacing:-.01em}
.orgexec__role{color:var(--brand-soft);font-size:.72rem;line-height:1.35;margin-top:3px}
html[dir="rtl"] .orgexec__name{font-family:var(--ar);letter-spacing:0}
/* CEO to COO: a line with an arrowhead, like the printed chart */
.orgexec__join{position:relative;flex:0 0 auto;width:var(--org-join);height:1px;background:var(--line-navy)}
.orgexec__join::after{content:'';position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-inline-start:7px solid var(--brand-2)}

/* ---- connector skeleton, shared by all three levels ---- */
.orgline{list-style:none;display:flex;flex-direction:column;margin-block:calc(-1 * var(--org-pad))}
.orgline > li{position:relative;padding-inline-start:var(--org-ind);padding-block:var(--org-pad)}
/* vertical bus: spans the group, trimmed to the first and last node centres */
.orgline > li::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:1px;background:var(--line-navy)}
.orgline > li:first-child::before{top:var(--org-stub)}
.orgline > li:last-child::before{bottom:calc(100% - var(--org-stub))}
/* horizontal stub into the node */
.orgline > li::after{content:'';position:absolute;inset-inline-start:0;top:var(--org-stub);width:var(--org-ind);height:1px;background:var(--line-navy)}

/* ---- departments column ---- */
.orgdepts{position:relative}
/* trunk from the COO into the middle of the department bus */
.orgdepts::before{content:'';position:absolute;inset-inline-start:calc(-1 * var(--org-trunk));top:50%;width:var(--org-trunk);height:1px;background:var(--line-navy)}
.orgdept{display:grid;grid-template-columns:var(--org-head) 1fr;align-items:start}
.orgdept__head{position:relative;display:flex;align-items:center;gap:11px;min-height:var(--org-node);padding:9px 14px;border-radius:12px;background:var(--navy-panel);border:1px solid var(--line-navy);transition:background .3s,border-color .3s}
.orgdept:hover > .orgdept__head{background:var(--navy-2);border-color:var(--brand)}
/* arrowhead where the stub meets the department box */
.orgdept__head::after{content:'';position:absolute;inset-inline-start:-7px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-inline-start:7px solid var(--brand-2)}
.orgdept__icon{flex:0 0 auto;width:24px;height:24px;color:var(--brand-2);display:flex;align-items:center;justify-content:center}
.orgdept__icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6}
.orgdept__name{font-family:var(--en-head);font-weight:700;font-size:.8rem;color:#fff;line-height:1.25;text-transform:uppercase;letter-spacing:.03em}
html[dir="rtl"] .orgdept__name{font-family:var(--ar);text-transform:none;letter-spacing:0;font-size:.86rem}

/* ---- manager column and their reports ---- */
.orgbranch{display:grid;grid-template-columns:var(--org-lead) 1fr;align-items:start}
.orgbranch--nolead{grid-template-columns:1fr}
.orgnode{min-height:var(--org-node);display:flex;flex-direction:column;justify-content:center;padding:8px 14px;border-radius:12px;border:1px solid var(--line-navy);background:var(--panel-2)}
.orgnode__name{font-family:var(--en-head);font-weight:700;font-size:.84rem;color:#fff;line-height:1.3}
.orgnode__role{font-size:.72rem;color:var(--muted);margin-top:2px;line-height:1.35}
html[dir="rtl"] .orgnode__name{font-family:var(--ar)}
.orgnode--lead{background:var(--navy-3);border-color:rgba(120,170,230,.32)}
.orgnode--chip{max-width:var(--org-chip);background:transparent;border-style:dashed;border-color:rgba(120,170,230,.24)}
.orgnode--chip .orgnode__name{font-weight:600;font-size:.8rem;color:var(--silver)}
.orgnode--team{border-style:solid;background:rgba(31,122,194,.10);border-color:rgba(31,122,194,.4)}
.orgnode--team .orgnode__name{color:var(--brand-soft)}
/* reports hang off dashed connectors, matching their dashed boxes */
.orgreports > li::before{background:none;border-inline-start:1px dashed rgba(120,170,230,.28);width:0}
.orgreports > li::after{background:none;border-top:1px dashed rgba(120,170,230,.28);height:0}

/* ===== MATERIALS ===== */
.materials__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mat{background:var(--navy-panel);border:1px solid var(--line-navy);border-radius:var(--radius);padding:34px}
.mat__title{font-size:1.4rem;color:#fff;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line-navy)}
.mat ul{list-style:none}
.mat li{padding:9px 0;color:var(--silver);position:relative;padding-inline-start:20px}
.mat li::before{content:'';position:absolute;inset-inline-start:0;top:1.05em;width:9px;height:1px;background:var(--brand-2)}

/* ===== CONTACT + FORMS ===== */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.contact__list{list-style:none;margin-top:36px}
.contact__list li{padding:18px 0;border-top:1px solid var(--line-navy);font-size:1.05rem;color:var(--white)}
.contact__list li span{display:block;font-family:var(--en-head);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-soft);margin-bottom:6px}
html[dir="rtl"] .contact__list li span{letter-spacing:0;text-transform:none;font-family:var(--ar)}
.contact__list a:hover{color:var(--brand-2)}
.contact__list li>a[href^="mailto"]{word-break:break-word}
/* A phone number is a run of digit groups separated by spaces. In an RTL
   paragraph the bidi algorithm orders those groups right to left, so
   "+966 55 519 9146" renders as "9146 519 55 966+". Isolating the link as its
   own LTR run fixes the order without affecting the Arabic text around it. */
.tel{direction:ltr;unicode-bidi:isolate;display:inline-block}
/* map link - pill button under the address details */
.maplink{display:inline-flex;align-items:center;gap:9px;margin-top:4px;padding:10px 18px;border:1px solid var(--line-navy);border-radius:100px;background:rgba(120,170,230,.06);color:var(--white);font-family:var(--en-head);font-weight:600;font-size:.88rem;transition:background .25s,border-color .25s,color .25s,transform .25s}
html[dir="rtl"] .maplink{font-family:var(--ar)}
.maplink svg{width:17px;height:17px;flex:0 0 auto;color:var(--brand-2);transition:color .25s}
.maplink:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-2px)}
.maplink:hover svg{color:#fff}

.formcard{background:var(--navy-panel);border:1px solid var(--line-navy);border-radius:var(--radius);padding:30px}
.formswitch{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--black);border-radius:100px;padding:5px;margin-bottom:26px}
.formswitch__btn{position:relative;z-index:2;background:none;border:0;cursor:pointer;padding:11px;font-family:var(--en-head);font-weight:700;font-size:.9rem;color:var(--muted);transition:color .3s}
.formswitch__btn.active{color:#fff}
html[dir="rtl"] .formswitch__btn{font-family:var(--ar)}
.formswitch__ind{position:absolute;z-index:1;top:5px;bottom:5px;inset-inline-start:5px;width:calc(50% - 5px);background:var(--brand);border-radius:100px;transition:transform .35s var(--ease)}
.formswitch__ind.right{transform:translateX(100%)}
html[dir="rtl"] .formswitch__ind.right{transform:translateX(-100%)}
.frm__intro{color:var(--silver);margin-bottom:20px;font-size:.98rem}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--en-head);font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:8px}
html[dir="rtl"] .field label{font-family:var(--ar)}
.field input,.field textarea,.field select{width:100%;background:var(--black);border:1px solid var(--line-navy);border-radius:10px;padding:13px 15px;color:#fff;font-family:inherit;font-size:.95rem;transition:border-color .3s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brand)}
.field select{appearance:none;cursor:pointer}
.field__file{padding:11px 15px;color:var(--muted);cursor:pointer}
.field__file::file-selector-button{background:var(--navy-2);color:#fff;border:0;border-radius:8px;padding:8px 14px;margin-inline-end:12px;cursor:pointer;font-family:var(--en-head);font-weight:600}
.frm__note{margin-top:14px;font-size:.8rem;color:var(--muted)}

/* Honeypot - hidden from humans, still fillable by bots.
   NOT positioned off-screen with a negative offset: in RTL that becomes real
   scrollable width and stretched the page ~9800px sideways. This clips the
   field in place instead, so it adds no overflow in either direction. */
.hp{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap
}

/* submit status line (shares the note's footprint so layout doesn't jump) */
.frm__status{margin-top:14px;font-size:.86rem;line-height:1.5;color:var(--muted);min-height:1.2em}
.frm__status.is-busy{color:var(--silver)}
.frm__status.is-ok{color:var(--brand-soft)}
.frm__status.is-err{color:#f0a3a3}
html[dir="rtl"] .frm__status{font-family:var(--ar)}
.frm button[type="submit"]:disabled{opacity:.55;cursor:not-allowed}

/* ===== FOOTER ===== */
.footer{border-top:1px solid var(--line-navy);background:linear-gradient(180deg,var(--navy-3) 0%,var(--black) 100%)}
.footer__inner{max-width:var(--maxw);margin:0 auto;padding:52px var(--sg-r) 28px var(--sg-l);display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.footer__brand{display:flex;flex-direction:column;gap:12px}
.footer__est{color:var(--brand-soft);font-family:var(--en-head);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
html[dir="rtl"] .footer__est{font-family:var(--ar);letter-spacing:0;text-transform:none}
.footer__links{display:flex;gap:26px;flex-wrap:wrap}
.footer__links a{color:var(--silver);font-family:var(--en-head);font-weight:600;font-size:.9rem}
.footer__links a:hover{color:#fff}
html[dir="rtl"] .footer__links a{font-family:var(--ar)}
.footer__social{display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.soc{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-navy);display:flex;align-items:center;justify-content:center;color:var(--silver);transition:background .25s,color .25s,border-color .25s,transform .25s}
.soc svg{width:18px;height:18px;fill:currentColor}
.soc:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-2px)}
.footer__copy{max-width:var(--maxw);margin:0 auto;padding:22px 32px 40px;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line-navy)}
.footer__tag{color:var(--brand-2)}

/* ===== MODAL ===== */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .3s}
.modal.open{opacity:1;pointer-events:auto}
.modal__backdrop{position:absolute;inset:0;background:rgba(4,8,16,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal__panel{position:relative;z-index:2;background:var(--navy-panel);border:1px solid var(--line-navy);border-radius:18px;max-width:520px;width:100%;padding:44px;transform:translateY(16px) scale(.98);transition:transform .35s var(--ease)}
.modal.open .modal__panel{transform:none}
.modal__close{position:absolute;top:18px;inset-inline-end:20px;background:none;border:0;color:var(--muted);font-size:1.9rem;line-height:1;cursor:pointer;transition:color .25s}
.modal__close:hover{color:#fff}
.modal__num{font-family:var(--en-head);font-weight:800;font-size:1.1rem;color:var(--brand-2)}
.modal__title{font-family:var(--en-head);font-weight:800;font-size:1.7rem;color:#fff;margin:14px 0 16px}
.modal__desc{color:var(--silver);font-size:1.04rem;line-height:1.7}

/* ===== Project modal (mirrors the company-profile slide layout) ===== */
body.no-scroll{overflow:hidden}
.pmodal{position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .3s}
.pmodal.open{opacity:1;pointer-events:auto}
.pmodal__backdrop{position:absolute;inset:0;background:rgba(4,8,16,.84);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pmodal__panel{position:relative;z-index:2;display:flex;flex-direction:column;background:var(--navy-panel);border:1px solid var(--line-navy);border-radius:18px;width:100%;max-width:1120px;max-height:92vh;overflow:hidden;transform:translateY(18px) scale(.985);transition:transform .35s var(--ease)}
.pmodal.open .pmodal__panel{transform:none}
.pmodal__close{position:absolute;top:16px;inset-inline-end:20px;z-index:8;background:none;border:0;color:var(--muted);font-size:2rem;line-height:1;cursor:pointer;transition:color .25s}
.pmodal__close:hover{color:#fff}

.pmodal__head{padding:26px 34px 18px;border-bottom:1px solid var(--line-navy);flex:0 0 auto}
.pmodal__kicker{font-family:var(--en-head);font-weight:800;font-size:1.12rem;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.pmodal__sub{font-size:.84rem;color:var(--muted);margin-top:5px}
.pmodal__head::after{content:"";display:block;width:74px;height:3px;background:var(--brand);margin-top:14px;border-radius:2px}
html[dir="rtl"] .pmodal__kicker{font-family:var(--ar);letter-spacing:0}

.pmodal__body{display:grid;grid-template-columns:1.15fr 1fr;gap:30px;padding:28px 34px;overflow-y:auto;flex:1 1 auto}

/* gallery */
.pgal{display:flex;flex-direction:column;gap:12px;min-width:0}
.pgal__main{position:relative;border-radius:12px;overflow:hidden;background:var(--panel-2);border:1px solid var(--line-navy);aspect-ratio:3/2;max-height:min(52vh,440px)}
.pgal__main img{width:100%;height:100%;object-fit:contain;object-position:center;cursor:zoom-in;transition:transform .5s var(--ease)}
.pgal__main:hover img{transform:scale(1.03)}
.pgal__status{position:absolute;top:14px;inset-inline-start:14px;font-family:var(--en-head);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:100px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pgal__status--completed{background:rgba(31,122,194,.28);border:1px solid rgba(143,194,236,.5);color:var(--brand-soft)}
.pgal__status--ongoing{background:rgba(226,167,48,.24);border:1px solid rgba(240,196,110,.55);color:#f2c97a}
html[dir="rtl"] .pgal__status{font-family:var(--ar);letter-spacing:0}
.pgal__thumbs{display:flex;gap:10px;flex:0 0 auto}
.pgal__thumb{flex:1 1 0;min-width:0;height:clamp(48px,7vh,74px);padding:0;border-radius:9px;overflow:hidden;border:1px solid var(--line-navy);background:var(--panel-2);cursor:pointer;opacity:.55;transition:.3s var(--ease)}
.pgal__thumb img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.pgal__thumb:hover{opacity:.85}
.pgal__thumb.is-active{opacity:1;border-color:var(--brand-2);box-shadow:0 0 0 1px var(--brand-2)}

/* spec list */
.pspec{display:flex;flex-direction:column;gap:20px;min-width:0}
.pspec__name{padding-bottom:16px;border-bottom:1px solid var(--line-navy)}
.pspec__label{font-family:var(--en-head);font-weight:800;font-size:.98rem;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.pspec__value{color:var(--silver);font-size:.93rem;line-height:1.6;margin-top:5px}
.pspec__name .pspec__value{font-family:var(--en-head);font-weight:700;font-size:1.32rem;color:var(--brand-soft);text-transform:none}
html[dir="rtl"] .pspec__label,html[dir="rtl"] .pspec__name .pspec__value{font-family:var(--ar);letter-spacing:0}
.pspec__row{display:flex;gap:15px;align-items:flex-start;padding-bottom:16px;border-bottom:1px solid var(--line-navy)}
.pspec__row:last-child{border-bottom:0;padding-bottom:0}
.pspec__row>div{min-width:0}
.pspec__icon{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:var(--brand);color:#fff}
.pspec__icon svg{width:23px;height:23px}

/* footer strip, as on the slides */
.pmodal__strip{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:10px 34px;padding:15px 34px;background:var(--navy);border-top:1px solid var(--line-navy)}
.pmodal__strip span{font-family:var(--en-head);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pmodal__strip span b{color:#fff;font-weight:700}
html[dir="rtl"] .pmodal__strip span{font-family:var(--ar);letter-spacing:0;font-size:.78rem}

/* prev / next project - siblings of the panel, so they are never clipped by it */
.pmodal__nav{position:absolute;top:50%;translate:0 -50%;z-index:6;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-navy);background:rgba(11,30,58,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer;transition:.28s var(--ease)}
.pmodal__nav svg{width:21px;height:21px}
.pmodal__nav:hover{background:var(--brand);border-color:var(--brand);transform:scale(1.08)}
.pmodal__nav--prev{inset-inline-start:max(14px, calc(50% - 616px))}
.pmodal__nav--next{inset-inline-end:max(14px, calc(50% - 616px))}
html[dir="rtl"] .pmodal__nav svg{scale:-1 1}
html[dir="rtl"] .modal__title{font-family:var(--ar)}

/* ===== REVEAL ===== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ===== RESPONSIVE ===== */
/* arrows tuck inside once the viewport is too narrow to hang them outside */
@media(max-width:1330px){
  .carousel__arrow--prev{inset-inline-start:12px}
  .carousel__arrow--next{inset-inline-end:12px}
}
@media(max-width:1050px){
  .org{--org-exec:184px;--org-join:20px;--org-trunk:26px;--org-head:150px;--org-lead:148px;--org-chip:178px;--org-ind:20px}
  .carousel{--per:2;--gap:16px}
  .services__grid{grid-template-columns:repeat(3,1fr)}
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:36px 24px}
  .capgrid{grid-template-columns:repeat(2,1fr)}
  .nav__links{gap:20px}
  .pmodal__body{grid-template-columns:1fr;gap:24px}
}
/* The 8-link row stops fitting well above 760px, so the drawer starts at 900.
   Width alone is not enough: a phone in landscape can be wider than that (an
   iPhone Pro Max is 932px) while having ~360px of height, hence the
   orientation clause. Short viewports also need the panel itself to scroll -
   eight links at full spacing do not fit in 360px. */
@media (max-width:900px),(max-width:1100px) and (max-height:520px) and (orientation:landscape){
  .nav__links{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);flex-direction:column;background:var(--navy);padding:100px 32px;gap:24px;transform:translateX(100%);transition:transform .4s var(--ease);border-inline-start:1px solid var(--line-navy);overflow-y:auto;overscroll-behavior:contain;padding-left:var(--sg-l);padding-right:var(--sg-r)}
  html[dir="rtl"] .nav__links{inset:0 auto 0 0;transform:translateX(-100%)}
  /* The RTL rule above is more specific than a bare `.nav__links.open`, so the
     open state has to be restated for RTL or the drawer never slides in.
     That is why the mobile menu worked in English and not in Arabic. */
  .nav__links.open,
  html[dir="rtl"] .nav__links.open{transform:none}
  .nav__toggle{display:flex}
  .nav__actions .btn{display:none}
}
@media (max-width:1100px) and (max-height:520px) and (orientation:landscape){
  .nav__links{padding-top:72px;padding-bottom:26px;gap:16px}
}

@media(max-width:820px){
  .nav__actions .btn--ghost{display:none}
}
@media(max-width:760px){
  .section{padding:80px max(22px,env(safe-area-inset-right,0px)) 80px max(22px,env(safe-area-inset-left,0px))}
  .carousel{--per:1;--gap:14px}
  .carousel__arrow{display:none}
  .services__grid{grid-template-columns:1fr 1fr;gap:12px}
  .pmodal{padding:12px}
  .pmodal__panel{max-height:94vh}
  .pmodal__head{padding:20px 22px 14px}
  .pmodal__body{grid-template-columns:1fr;gap:22px;padding:20px 22px}
  .pmodal__strip{padding:13px 22px;gap:8px 20px}
  .pmodal__nav{width:38px;height:38px}
  .pmodal__nav--prev{inset-inline-start:6px}
  .pmodal__nav--next{inset-inline-end:6px}
  .pgal__main{max-height:38vh}
  .pspec__icon{width:36px;height:36px}
  .pspec__icon svg{width:20px;height:20px}
  .stats__grid{grid-template-columns:1fr 1fr}
  .capgrid{grid-template-columns:1fr}
  .intro__grid,.contact__grid,.materials__grid{grid-template-columns:1fr;gap:32px}
  /* the chart drops its columns and becomes a plain indented tree */
  .org{--org-ind:18px;--org-node:46px;--org-stub:30px}
  .orgchart{grid-template-columns:1fr;row-gap:24px}
  .orgchart__lead{flex-direction:column;align-items:stretch;gap:0}
  .orgexec{width:auto}
  .orgexec__join{width:1px;height:24px;margin-inline-start:26px}
  .orgexec__join::after{inset-inline-end:auto;inset-inline-start:0;top:auto;bottom:0;transform:translateX(-50%);border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-top:7px solid var(--brand-2);border-bottom:0}
  html[dir="rtl"] .orgexec__join::after{transform:translateX(50%)}
  .orgdepts::before{display:none}
  .orgdept,.orgbranch,.orgbranch--nolead{grid-template-columns:1fr}
  .orgbranches,.orgreports{margin-block:0}
  .orgbranches > li:first-child::before,.orgreports > li:first-child::before{top:0}
  .orgnode--chip{max-width:none}
  .section__head{margin-bottom:44px}
  .modal__panel{padding:32px 24px}
  .snake__row,.snake__row--rev{flex-direction:column;gap:12px}
  .snake__chev::before,.snake__row--rev .snake__chev::before{content:'\25BC'}
  /* Rows stack into one column here, so the row-to-row turn is no longer a
     sideways bend - it is simply the arrow between the last step of one row
     and the first of the next (03 -> 04). Hiding it broke the sequence.
     Centre it and match the chevrons' spacing (12px, the row gap). */
  .snake__turn,.snake__turn--right,.snake__turn--left{
    display:flex;justify-content:center;padding:12px 0;font-size:.85rem
  }
}
@media(max-width:440px){
  .services__grid{grid-template-columns:1fr}
  .brand__word{display:none}
}