:root{
  --navy:#123464; --navy-mid:#1B4585; --navy-deep:#0C2450;
  --gold:#C8974D;            /* decorative accent only */
  --gold-ink:#9C6B32;        /* gold TEXT / interactive on light — AA */
  --gold-mid:#D7AC6A;        /* gold text on navy surfaces */
  --gold-tint:#FBF4E8;
  --white:#FFFFFF; --soft:#F5F8FC; --line:#E6ECF4; --line-mid:#D7E0EC;
  --ink:#33404F; --muted:#647080;

  --r-xl:26px; --r-lg:22px; --r-md:16px; --r-btn:12px; --r-sm:10px;

  --sh-sm:0 2px 10px rgba(18,52,100,.045);
  --sh-md:0 10px 34px rgba(18,52,100,.07);
  --sh-lg:0 18px 52px rgba(18,52,100,.10);

  --wrap:1260px;
  --font:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --slow:700ms; --mid:450ms; --fast:260ms;
}

@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);
  font-size:16.5px;line-height:1.9;font-weight:400;letter-spacing:0;-webkit-font-smoothing:antialiased}
img{display:block;max-inline-size:100%}
a{color:inherit;text-decoration:none}
:where(a,button,[tabindex]):focus-visible{outline:3px solid var(--gold-ink);outline-offset:3px;
  border-radius:4px}
.ic:focus-visible,.svc__wide:focus-visible,.pt:focus-visible,.pcard:focus-visible{
  outline:3px solid var(--gold-ink);outline-offset:4px}
/* never let a grid/flex child collapse below its content */
.hero__grid > *,.svc__r1 > *,.svc__r2 > *,.proj__stage > *,.tech__box > *,
.cta__box > *,.aud__row > *,.ftr__grid > *,.stats__box > *,.prail > *{min-inline-size:0;min-block-size:0}
h1,h2,h3,h4,.ftr__h{margin:0;color:var(--navy);font-weight:600;line-height:1.4;letter-spacing:0}
p{margin:0}ul{margin:0;padding:0;list-style:none}
.wrap{max-inline-size:var(--wrap);margin-inline:auto;padding-inline:28px}
.num{direction:ltr;display:inline-block}

/* ---- reveal ---- */
.rv{opacity:0;transform:translateY(15px);
  transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
.rv.in{opacity:1;transform:none}
/* major photography wipes up from the bottom edge */
.mr{clip-path:inset(100% 0 0 0);transition:clip-path 820ms var(--ease)}
.mr.in{clip-path:inset(0 0 0 0)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  block-size:58px;padding-inline:30px;border-radius:var(--r-btn);
  font-family:var(--font);font-size:15.5px;font-weight:500;line-height:1;
  border:1.5px solid transparent;cursor:pointer;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),
             color var(--fast) var(--ease),transform var(--fast) var(--ease),
             box-shadow var(--fast) var(--ease)}
.btn svg{inline-size:19px;block-size:19px;flex:none}
.btn--navy{background:var(--navy);color:#fff;box-shadow:0 6px 18px rgba(18,52,100,.15)}
.btn--navy:hover{background:var(--navy-mid);transform:translateY(-2px);box-shadow:0 12px 30px rgba(18,52,100,.24)}
.btn--gold{background:var(--gold);color:var(--navy);font-weight:600;
  box-shadow:0 6px 18px rgba(200,151,77,.22)}
.btn--gold:hover{background:#D9A860;transform:translateY(-2px);box-shadow:0 12px 30px rgba(200,151,77,.30)}
.btn--line{background:#fff;color:var(--navy);border-color:var(--line-mid)}
.btn--line:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.btn--sm{block-size:46px;padding-inline:22px;font-size:14.5px;border-radius:var(--r-sm)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---- section heads ---- */
.sec{padding-block:118px 0}
#services{padding-block:132px 0}
#projects{padding-block:150px 0}
#tech{padding-block:104px 0}
#audience{padding-block:92px 0}
#contact{padding-block:112px 0}
.head{margin-block-end:52px}
.kicker{color:var(--muted);font-size:13.5px;font-weight:500;margin-block-end:12px;
  display:flex;align-items:center;gap:10px}
.kicker::before{content:"";inline-size:22px;block-size:1px;background:var(--line-mid);flex:none}
.head--c .kicker{justify-content:center}
.hero .kicker{color:var(--gold);font-size:14.5px}
.hero .kicker::before{background:var(--gold-ink)}
.proj__head .kicker::before{background:var(--gold-mid)}
.head h2{font-size:38px;line-height:1.4;max-inline-size:20ch}
.head--c{text-align:center}
.head--c h2{margin-inline:auto}
.head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:48px}

/* ---- header ---- */
.hdr{background:rgba(255,255,255,.80);backdrop-filter:blur(12px);
  border-block-end:1px solid transparent;position:sticky;inset-block-start:0;z-index:60;
  transition:background var(--mid) var(--ease),border-color var(--mid) var(--ease),
             box-shadow var(--mid) var(--ease)}
.hdr.stuck{background:rgba(255,255,255,.97);border-block-end-color:var(--line);
  box-shadow:0 1px 20px rgba(18,52,100,.05)}
.hdr__in{display:flex;align-items:center;gap:32px;block-size:66px;
  transition:block-size var(--mid) var(--ease)}
.hdr.stuck .hdr__in{block-size:66px}
.logo{display:flex;align-items:center;gap:14px;flex:none}
.logo .mk{block-size:44px;inline-size:auto;transition:block-size var(--mid) var(--ease)}
.logo .wd{block-size:37px;inline-size:auto;transition:block-size var(--mid) var(--ease)}
.hdr.stuck .logo .mk{block-size:44px}
.hdr.stuck .logo .wd{block-size:37px}
.ftr .logo{gap:16px}
.ftr .logo .mk{block-size:70px}
.ftr .logo .wd{block-size:60px}
.nav{display:flex;gap:23px;margin-inline-start:auto}
.nav a{font-size:15.5px;font-weight:500;color:var(--ink);padding-block:8px;position:relative;
  transition:color var(--fast) var(--ease)}
.nav a::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  inline-size:0;block-size:2px;background:var(--gold);border-radius:2px;
  transition:inline-size var(--mid) var(--ease)}
.nav a:hover{color:var(--navy)}
.nav a:hover::after,.nav a.on::after{inline-size:100%}
.nav a.on{color:var(--gold-ink)}
.nav .btn--navy{color:#fff}

/* ---- nav dropdown groups (desktop: hover/focus panel · mobile: static sub-list) ---- */
.nav__group{position:relative;display:flex;align-items:center}
.nav__group>a{display:flex;align-items:center;gap:5px}
.nav__caret{display:inline-flex;flex:none;inline-size:12px;block-size:12px;
  color:var(--muted);transition:transform var(--fast) var(--ease)}
.nav__group:hover .nav__caret,.nav__group:focus-within .nav__caret{transform:rotate(180deg)}
.nav__panel{position:absolute;inset-inline-start:-14px;inset-block-start:100%;margin-block-start:14px;
  min-inline-size:230px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-md);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease),visibility var(--fast);
  z-index:70}
.nav__group:hover .nav__panel,.nav__group:focus-within .nav__panel{
  opacity:1;visibility:visible;transform:none}
.nav__panel a{display:block;padding:11px 14px;font-size:14.5px;font-weight:500;color:var(--ink);
  border-radius:var(--r-sm);white-space:nowrap}
.nav__panel a:hover{background:var(--soft);color:var(--navy)}
.nav__panel a::after{display:none}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;padding-block-end:0}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,1fr);
  align-items:center;min-block-size:812px}
.hero__media{order:2;position:relative;align-self:stretch;
  margin-inline-end:calc((100% - 100vw)/2);
  background:linear-gradient(150deg,#E7EDF5,#D6E0EC)}
/* The reveal used to wait for app.js (deferred) to add .lit, which left the LCP image at
   opacity:0 for ~1s and made the hero the slowest thing on the page. Same effect, but driven
   by CSS so it starts the moment the element renders. .lit is kept as a harmless fallback. */
.hero__media img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;
  transform:scale(1.05);opacity:1;
  animation:qsHeroSettle 1600ms var(--ease) forwards}
@keyframes qsHeroSettle{to{transform:scale(1)}}
.hero.lit .hero__media img{transform:scale(1);opacity:1}
.hero__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to left,#fff 0%,rgba(255,255,255,.98) 5%,rgba(255,255,255,.55) 15%,
      rgba(255,255,255,.16) 29%,rgba(255,255,255,.02) 41%,rgba(255,255,255,0) 50%),
    linear-gradient(to top,#fff 0%,rgba(255,255,255,.22) 7%,rgba(255,255,255,0) 19%),
    linear-gradient(to bottom,#fff 0%,rgba(255,255,255,0) 10%)}
.hero__txt{order:1;padding-block:112px 136px;padding-inline-end:30px;
  padding-inline-start:max(28px,calc((100vw - var(--wrap))/2 + 28px))}
.hero h1{font-size:clamp(42px,4.3vw,56px);line-height:1.32;margin-block-end:30px;
  max-inline-size:none}
.hero h1 em{font-style:normal;color:var(--gold-ink)}
.hero h1 .ln{display:block}
.hero__sub{color:var(--muted);font-size:17.5px;line-height:1.95;max-inline-size:42ch;margin-block-end:22px}
.hero__loc{display:flex;gap:10px;align-items:center;color:var(--navy);font-size:14.5px;
  font-weight:500;margin-block-end:38px}
.hero__loc svg{inline-size:18px;block-size:18px;flex:none;color:var(--gold)}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}

/* ---- stats ---- */
.stats{margin-block-start:-58px;position:relative;z-index:10}
.stats__box{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-md);display:grid;grid-template-columns:repeat(3,1fr);padding:38px 12px}
.stat{display:flex;align-items:center;justify-content:center;gap:20px;padding-inline:26px}
.stat + .stat{border-inline-start:1px solid var(--line)}
.stat > svg{inline-size:50px;block-size:50px;flex:none;color:var(--gold)}
.stat b{display:block;font-size:36px;font-weight:600;color:var(--navy);line-height:1.25;direction:ltr}
.stat u{display:block;text-decoration:none;font-size:14.5px;color:var(--muted);
  line-height:1.7;max-inline-size:16ch;font-weight:400}

/* ---- shared image card ---- */
.ic{position:relative;border-radius:var(--r-lg);overflow:hidden;display:block;
  background:linear-gradient(150deg,#E7EDF5,#D6E0EC);box-shadow:var(--sh-sm);
  transition:box-shadow var(--mid) var(--ease)}
.ic:hover{box-shadow:var(--sh-lg)}
.ic img{inline-size:100%;block-size:100%;object-fit:cover;
  transition:transform 650ms var(--ease)}
.ic:hover img{transform:scale(1.035)}
.ic__cap{position:absolute;inset-block-end:0;inset-inline:0;padding:28px 30px;
  background:linear-gradient(to top,rgba(10,32,66,.86),rgba(10,32,66,.34) 55%,rgba(10,32,66,0))}
.ic__cap h3{color:#fff;font-size:23px;margin-block-end:5px}
.ic__cap p{color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.7}

/* ---- services ---- */
.svc__r1{display:grid;grid-template-columns:minmax(0,1.34fr) minmax(0,1fr);gap:22px;
  grid-auto-rows:472px}
.svc__wide{margin-block-start:22px;border-radius:var(--r-lg);overflow:hidden;position:relative;
  display:block;block-size:300px;background:linear-gradient(150deg,#E7EDF5,#D6E0EC);
  box-shadow:var(--sh-sm);transition:box-shadow var(--mid) var(--ease)}
.svc__wide:hover{box-shadow:var(--sh-lg)}
.svc__wide img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform 700ms var(--ease)}
.svc__wide:hover img{transform:scale(1.03)}
.svc__minor{margin-block-start:58px;border-block-start:1px solid var(--line);
  display:grid;grid-template-columns:repeat(5,1fr)}
.mi{padding:32px 24px 6px;display:block;position:relative}
.mi + .mi{border-inline-start:1px solid var(--line)}
.mi svg{inline-size:26px;block-size:26px;color:var(--navy);opacity:.45;margin-block-end:16px;
  transition:opacity var(--fast) var(--ease),color var(--fast) var(--ease)}
.mi h3{font-size:15.5px;font-weight:500;line-height:1.7}
.mi::after{content:"";position:absolute;inset-block-start:-1px;inset-inline-start:0;
  inline-size:0;block-size:1px;background:var(--gold);transition:inline-size var(--mid) var(--ease)}
.mi:hover::after{inline-size:100%}
.mi:hover svg{opacity:1;color:var(--gold-ink)}
.tlink{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:500;
  color:var(--navy);transition:color var(--fast) var(--ease)}
.tlink svg{inline-size:17px;block-size:17px;transition:transform var(--fast) var(--ease)}
.tlink:hover{color:var(--gold-ink)}
.tlink:hover svg{transform:translateX(-5px)}

/* ---- technical office ---- */
.tech__box{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-xl);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:56px;
  padding:56px;align-items:stretch}
.tech__box > div:first-child{display:flex;flex-direction:column;justify-content:center}
.tech__box h2{font-size:36px;line-height:1.4;margin-block-end:18px;max-inline-size:15ch}
.tech__box > div > p{color:var(--muted);font-size:16.5px;line-height:2;
  margin-block-end:28px;max-inline-size:44ch}
.flow{display:flex;align-items:center;gap:18px;margin-block:4px 34px;flex-wrap:wrap;
  padding-block-start:20px;border-block-start:1px solid var(--line-mid)}
.flow span{font-size:14.5px;font-weight:500;color:var(--navy);position:relative}
.flow span + span{padding-inline-start:18px}
.flow span + span::before{content:"";position:absolute;inset-inline-start:0;inset-block:4px auto;
  block-size:14px;inline-size:1px;background:var(--line-mid)}
.tech__btns{display:flex;gap:14px;flex-wrap:wrap}
.tech__img{border-radius:var(--r-lg);overflow:hidden;min-block-size:432px;box-shadow:var(--sh-sm);
  background:linear-gradient(150deg,#E7EDF5,#D6E0EC)}
.tech__img img{inline-size:100%;block-size:100%;object-fit:cover;
  transition:transform 650ms var(--ease)}
.tech__img:hover img{transform:scale(1.035)}

/* ---- audience ---- */
.aud__row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.aud__row{gap:0}
.aud__card{background:transparent;border:0;border-radius:var(--r-md);
  padding:8px 30px 8px 30px;display:flex;flex-direction:column;
  transition:transform var(--fast) var(--ease)}
.aud__card + .aud__card{border-inline-start:1px solid var(--line)}
.aud__card:hover{transform:translateY(-3px)}
.aud__ic{display:flex;margin-block-end:20px;
  transition:transform var(--fast) var(--ease)}
.aud__card:hover .aud__ic{transform:translateY(-2px)}
.aud__ic svg{inline-size:30px;block-size:30px;color:var(--gold-ink)}
.aud__card h3{font-size:18.5px;line-height:1.5;margin-block-end:12px;max-inline-size:14ch}
.aud__card p{font-size:14.5px;color:var(--muted);line-height:1.85;flex:1;margin-block-end:22px;
  max-inline-size:30ch}

/* ---- PROJECTS — signature section ---- */
.proj__panel{background:var(--navy-deep);border-radius:28px;padding:56px;
  box-shadow:0 26px 70px rgba(12,36,80,.16)}
.proj__head{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;
  margin-block-end:40px}
.proj__head .kicker{color:var(--gold-mid)}
.proj__head h2{color:#fff;font-size:40px;line-height:1.38;max-inline-size:16ch}
.proj__head p{color:rgba(255,255,255,.62);font-size:15.5px;line-height:1.9;
  max-inline-size:38ch;padding-block-end:6px}
.proj__stage{display:grid;grid-template-columns:minmax(0,1fr) 258px;
  grid-template-rows:620px;gap:20px}

.pf{position:relative;border-radius:24px;overflow:hidden;min-block-size:0;
  background:linear-gradient(150deg,#1E4272,#16345F)}
.pf img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;
  transition:opacity 620ms var(--ease),transform 820ms var(--ease)}
.pf img.off{opacity:0}
.pf:hover img.on{transform:scale(1.035) translateX(6px)}
.pf__m{position:absolute;inset-block-end:0;inset-inline:0;padding:38px 42px;z-index:2;
  background:linear-gradient(to top,rgba(6,22,48,.88),rgba(6,22,48,.20) 62%,rgba(6,22,48,0))}
.pf__m h3{color:#fff;font-size:28px;font-weight:600;line-height:1.4;
  transition:transform 500ms var(--ease)}
.pf__m em{display:block;font-style:normal;color:var(--gold-mid);font-size:14.5px;
  line-height:1.7;margin-block-start:8px;opacity:.82;
  transition:opacity 500ms var(--ease),transform 500ms var(--ease)}
.pf:hover .pf__m h3{transform:translateY(-4px)}
.pf:hover .pf__m em{opacity:1;transform:translateY(-4px)}

.prail{display:flex;flex-direction:column;gap:22px;min-block-size:0}
.pt{position:relative;flex:1 1 0;min-block-size:0;border-radius:20px;overflow:hidden;
  border:0;padding:0;cursor:pointer;background:linear-gradient(150deg,#1E4272,#16345F);
  transition:box-shadow var(--mid) var(--ease)}
.pt img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;opacity:.62;
  transition:opacity var(--mid) var(--ease),transform 700ms var(--ease)}
.pt:hover img{opacity:.9;transform:scale(1.04)}
.pt[aria-current="true"]{box-shadow:0 0 0 2px var(--gold)}
.pt[aria-current="true"] img{opacity:1}
.pt span{position:absolute;inset-block-end:0;inset-inline:0;padding:16px 18px;
  color:#fff;font-size:15px;font-weight:500;text-align:start;font-family:var(--font);
  background:linear-gradient(to top,rgba(6,22,48,.9),rgba(6,22,48,0))}
.pt:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.proj__foot{margin-block-start:44px;display:flex;justify-content:center}

/* ---- contact ---- */
.cta__box{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-md);display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:52px;padding:56px;align-items:center}
.cta__box h2{font-size:38px;line-height:1.4;margin-block-end:18px;max-inline-size:18ch}
.cta__box > div > p{color:var(--muted);font-size:16.5px;line-height:2;
  margin-block-end:30px;max-inline-size:42ch}
.cta__btns{display:flex;gap:14px;flex-wrap:wrap}
.cta__side{background:var(--soft);border-radius:var(--r-lg);padding:38px;position:relative;overflow:hidden}
.cta__side h4{font-size:13.5px;font-weight:500;color:var(--muted);margin-block-end:6px}
.info li{display:flex;align-items:center;gap:13px;font-size:15px;color:var(--navy);
  font-weight:500;padding-block:13px}
.info li + li{border-block-start:1px solid var(--line)}
.info svg{inline-size:20px;block-size:20px;color:var(--gold-ink);flex:none}
.ksa{position:absolute;inset-block-end:-30px;inset-inline-start:-24px;inline-size:210px;
  opacity:.5;pointer-events:none}

/* ---- trust ---- */
.trust{margin-block-start:126px;border-block-start:1px solid var(--line);padding-block:36px}
.trust__row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
.trust__it{font-size:15.5px;font-weight:500;color:var(--navy);padding-inline:32px;
  position:relative;line-height:1.7}
.trust__it + .trust__it::before{content:"";position:absolute;inset-inline-start:-2px;
  inset-block-start:50%;inline-size:4px;block-size:4px;border-radius:50%;
  background:var(--gold);transform:translateY(-50%)}

/* ---- footer ---- */
.ftr{background:var(--soft);padding-block:64px 0;border-block-start:1px solid var(--line)}
.ftr__grid{display:grid;grid-template-columns:1.35fr .85fr .95fr .95fr 1.05fr;gap:34px;
  padding-block-end:42px;border-block-end:1px solid var(--line-mid)}
.ftr__brand p{color:var(--muted);font-size:14.5px;line-height:1.95;margin-block-start:18px;max-inline-size:33ch}
.ftr h4,.ftr .ftr__h{font-size:16px;margin-block-end:18px}
.ftr li{margin-block-end:11px}
.ftr li a{font-size:14.5px;color:var(--muted);transition:color var(--fast) var(--ease)}
.ftr li a:hover{color:var(--navy)}
.ftr .info li{padding-block:8px;font-size:14.5px;border:0}
.social{display:flex;gap:10px;margin-block-start:22px}
.social a{inline-size:40px;block-size:40px;border:1px solid var(--line-mid);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;color:var(--gold);
  transition:all var(--fast) var(--ease)}
.social a:hover{background:var(--gold);color:var(--navy);border-color:var(--gold);transform:translateY(-2px)}
.social svg{inline-size:18px;block-size:18px}
.ftr__regions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;
  padding-block-start:22px;font-size:13.5px;color:var(--muted);line-height:1.9}
.ftr__regions span{color:var(--navy);font-weight:600;margin-inline-end:4px}
.ftr__regions a{color:var(--muted);transition:color var(--fast) var(--ease)}
.ftr__regions a:hover{color:var(--gold-ink)}
.ftr__bar{text-align:center;padding-block:24px;font-size:13.5px;color:var(--muted)}
.ftr__rule{block-size:5px;background:var(--navy)}


/* ---- inner-page dark hero: full-bleed banner, text overlaid (used on non-home pages) ---- */
.ihero{position:relative;overflow:hidden;background:linear-gradient(155deg,#1B4585 0%,#123464 45%,#0C2450 100%);
  min-block-size:560px;display:flex;align-items:center}
.ihero__media{position:absolute;inset:0;z-index:0}
.ihero__media img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;
  transform:scale(1.06);opacity:1;
  animation:qsIheroSettle 1800ms var(--ease) forwards}
@keyframes qsIheroSettle{to{transform:scale(1)}}
.ihero.lit .ihero__media img{transform:scale(1);opacity:1}
.ihero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to left, rgba(8,24,54,.96) 0%, rgba(8,24,54,.90) 28%, rgba(11,33,72,.62) 50%, rgba(11,33,72,.24) 70%, rgba(11,33,72,.04) 88%),
    linear-gradient(to top, rgba(6,18,42,.55) 0%, rgba(6,18,42,0) 30%)}
.ihero__deco{position:absolute;inset:0;z-index:1;opacity:.9}
.ihero__deco svg{position:absolute;inset:0;inline-size:100%;block-size:100%}
.ihero__in{position:relative;z-index:2;padding-block:80px;max-inline-size:640px}
.ihero .kicker{color:var(--gold-mid);justify-content:flex-start}
.ihero .kicker::before{background:var(--gold-mid)}
.ihero__crumb{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.5);
  font-size:13.5px;margin-block-end:22px}
.ihero__crumb a{color:rgba(255,255,255,.72);transition:color var(--fast) var(--ease)}
.ihero__crumb a:hover{color:var(--gold-mid)}
.ihero h1{color:#fff;font-size:clamp(34px,4vw,50px);line-height:1.32;margin-block-end:22px;
  max-inline-size:none}
.ihero h1 em{font-style:normal;color:var(--gold-mid)}
.ihero p{color:rgba(255,255,255,.68);font-size:17.5px;line-height:2;max-inline-size:52ch;
  margin-block-end:36px}
.ihero__btns{display:flex;gap:14px;flex-wrap:wrap}
.ihero .btn--line{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
.ihero .btn--line:hover{border-color:var(--gold);color:var(--gold-mid);background:rgba(255,255,255,.06)}
.ihero .btn--gold:hover{background:#D9A860}

/* ---- numbered step strip (alt. to plain bullet lists) ---- */
.steps{display:grid;grid-template-columns:repeat(var(--sn,3),1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  position:relative}
.steps::before{content:"";position:absolute;inset-inline:0;inset-block-start:56px;block-size:1.5px;
  background:repeating-linear-gradient(to left,var(--gold) 0 8px,transparent 8px 16px);
  opacity:.45;z-index:0}
.step{background:#fff;padding:34px 30px;position:relative;z-index:1}
.step b{display:flex;align-items:center;justify-content:center;inline-size:46px;block-size:46px;
  border-radius:50%;background:#fff;border:1.5px solid var(--gold);color:var(--gold-ink);
  font-size:17px;font-weight:600;margin-block-end:20px;font-family:var(--font)}
.step h3{font-size:16.5px;line-height:1.5;margin-block-end:8px}
.step p{font-size:14px;color:var(--muted);line-height:1.8}

/* ---- checklist tile grid (alt. to plain bullet lists for document/requirement checklists) ---- */
.checklist{display:grid;grid-template-columns:repeat(var(--cn,2),1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  margin-block-start:8px}
.check{background:#fff;padding:18px 22px;display:flex;align-items:center;gap:13px}
.check svg{inline-size:20px;block-size:20px;flex:none;color:var(--gold-ink)}
.check span{font-size:14.5px;color:var(--ink);font-weight:500;line-height:1.5}

/* ══════════ RESPONSIVE ══════════ */
.hbg{display:none}.scrim{display:none}.mbar{display:none}
.nav__cta{display:none}   /* drawer-only */
.navwrap{display:contents}

/* ─────────── TABLET · ≤1024 ─────────── */
@media (max-width:1024px){
  .wrap{padding-inline:28px}

  /* header: solid (backdrop-filter would trap fixed children), above the scrim */
  .hdr{backdrop-filter:none;background:rgba(255,255,255,.97);z-index:80}
  .hdr.stuck{background:#fff}
  .hdr__in{block-size:62px;gap:18px}
  .hdr.stuck .hdr__in{block-size:62px}
  .logo .mk{block-size:42px}.logo .wd{block-size:35px}
  .hdr.stuck .logo .mk{block-size:42px}.hdr.stuck .logo .wd{block-size:35px}
  .hdr__cta,.hdr__wa{display:none}
  .hbg{display:flex;flex-direction:column;justify-content:center;gap:5px;
    inline-size:48px;block-size:48px;padding:0 10px;margin-inline-start:auto;
    background:none;border:0;cursor:pointer;border-radius:10px}
  .hbg span{display:block;block-size:2px;background:var(--navy);border-radius:2px;
    transition:transform var(--mid) var(--ease),opacity var(--fast) var(--ease)}
  body.navon .hbg span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.navon .hbg span:nth-child(2){opacity:0}
  body.navon .hbg span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* drawer enters from the RTL start edge */
  .navwrap{display:block;position:fixed;inset:0;z-index:70;overflow:hidden;
    visibility:hidden;pointer-events:none}
  body.navon .navwrap{visibility:visible;pointer-events:auto}
  .nav{position:absolute;inset-block:0;inset-inline-start:0;block-size:100%;
    inline-size:min(360px,88vw);background:#fff;margin:0;
    flex-direction:column;justify-content:flex-start;gap:0;
    padding:96px 30px 32px;overflow-y:auto;
    box-shadow:18px 0 60px rgba(18,52,100,.16);
    transform:translateX(100%);visibility:hidden;
    transition:transform 420ms var(--ease),visibility 420ms}
  body.navon .nav{transform:none;visibility:visible}
  .nav a{font-size:19px;text-align:start;padding-block:18px;
    border-block-end:1px solid var(--line);min-block-size:56px;display:flex;align-items:center}
  .nav a::after{display:none}

  /* dropdown groups collapse into a flat, always-open indented sub-list on the drawer */
  .nav__group{display:block}
  .nav__caret{display:none}
  .nav__panel{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;
    box-shadow:none;border:0;border-radius:0;background:var(--soft);margin:0;padding-inline-start:16px}
  .nav__panel a{font-size:16px;font-weight:400;color:var(--muted);padding:14px 0 14px 22px;
    border-block-end:1px solid var(--line);min-block-size:auto}
  .nav__panel a:last-child{border-block-end:1px solid var(--line)}
  .nav__cta{display:flex;flex-direction:column;gap:12px;margin-block-start:28px}
  .nav__cta .btn{inline-size:100%;block-size:54px}
  /* closed scrim must never take taps: display:block here overrides the [hidden] attribute (25 Sep 2026) */
  .scrim{display:block;position:fixed;inset:0;z-index:65;background:rgba(10,26,50,.45);
    opacity:0;transition:opacity 380ms var(--ease);pointer-events:none}
  body.navon .scrim{opacity:1;pointer-events:auto}
  body.navon{overflow:hidden}

  .sec,#services,#projects,#tech,#audience,#contact{padding-block:80px 0}
  .head{margin-block-end:36px}
  .head h2,.proj__head h2{font-size:32px;max-inline-size:none}
  .head--row{flex-direction:column;align-items:stretch;gap:24px}
  .head--row .btn{inline-size:100%}

  /* hero: text first, architecture below — not a squeezed desktop split */
  .hero__grid{grid-template-columns:1fr;min-block-size:0}
  .hero__txt{padding:56px 28px 40px;text-align:center;max-inline-size:720px;margin-inline:auto}
  .hero .kicker{justify-content:center}
  .hero__sub,.hero h1{max-inline-size:none;margin-inline:auto}
  .hero h1{font-size:42px;line-height:1.30}
  .hero__loc{justify-content:center;text-align:center}
  .hero__cta{justify-content:center}
  .hero__media{margin-inline-end:0;block-size:auto;aspect-ratio:16/9;max-block-size:400px}
  .hero__media::after{background:linear-gradient(to top,rgba(255,255,255,0) 78%,#fff 100%)}
  .stats{margin-block-start:-46px}
  .stats__box{grid-template-columns:repeat(3,minmax(0,1fr));padding:26px 6px}
  .stat{flex-direction:column;gap:10px;padding-inline:14px;text-align:center}
  .stat > svg{inline-size:32px;block-size:32px}
  .stat b{font-size:30px}
  .stat u{font-size:13px;max-inline-size:16ch}

  .svc__r1{grid-template-columns:1fr;grid-auto-rows:auto}
  .svc__r1 .ic{min-block-size:300px}
  .svc__wide{block-size:auto;min-block-size:280px}
  /* Thirty of the page bodies set grid-template-columns inline on .svc__minor — repeat(3,1fr)
     through repeat(8,1fr), written for the desktop row. An inline style outranks every rule in
     this file, so on a phone those columns survived, and 1fr's min-content floor kept each one
     as wide as its longest word: seven tracks totalling 486px inside a 335px container, which
     pushed the whole document 131px wider than the viewport and let every page slide sideways.
     Beating an inline declaration takes !important; this is the one place in the file that
     earns it. Remove it only by stripping the inline styles from all thirty bodies first. */
  .svc__minor{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .mi{padding:26px 22px 22px;min-block-size:118px}
  .mi:nth-child(odd){border-inline-start:0}
  .mi:nth-child(n+3){border-block-start:1px solid var(--line)}
  .mi:last-child{grid-column:1 / -1;border-inline-start:0}

  .tech__box{grid-template-columns:1fr;gap:30px;padding:34px}
  .tech__img{order:2;min-block-size:280px}
  .tech__box > div:first-child{order:1}

  .aud__row{grid-template-columns:1fr}
  .aud__card{padding:24px 0;border-inline-start:0 !important}
  .aud__card + .aud__card{border-block-start:1px solid var(--line)}
  .aud__card p{max-inline-size:none}
  .aud__card .tlink{min-block-size:46px;align-items:center}

  .proj__panel{padding:24px;border-radius:22px}
  .proj__stage{display:block}
  .pf{block-size:auto;min-block-size:340px;aspect-ratio:4/3;max-block-size:400px}
  .prail{flex-direction:row;gap:12px;margin-block-start:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .prail::-webkit-scrollbar{display:none}
  .pt{flex:0 0 144px;block-size:100px;scroll-snap-align:start}

  .cta__box{grid-template-columns:1fr;gap:26px;padding:34px}
  .cta__btns .btn{inline-size:100%}
  .cta__side{padding:26px}

  .ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
  .ftr__brand{grid-column:1 / -1;padding-block-end:12px;
    border-block-end:1px solid var(--line);margin-block-end:6px}

  .ihero__in{padding-block:88px 64px;max-inline-size:none;text-align:center}
  .ihero .kicker{justify-content:center}
  .ihero__crumb{justify-content:center}
  .ihero p{max-inline-size:none;margin-inline:auto}
  .ihero__btns{justify-content:center}

  .steps{grid-template-columns:1fr !important}
  .steps::before{display:none}
  .step{padding:26px 24px}
  .checklist{grid-template-columns:1fr !important}
}

/* ─────────── SMALL TABLET · ≤768 ─────────── */
@media (max-width:768px){
  .wrap{padding-inline:24px}
  .sec,#services,#projects,#tech,#audience,#contact{padding-block:72px 0}
  .hero h1{font-size:40px}
  .hero__media{aspect-ratio:3/2;max-block-size:360px}
  .head h2,.proj__head h2{font-size:30px}
  .svc__r1 .ic{min-block-size:280px}
  .svc__wide{min-block-size:260px}
}

/* ─────────── MOBILE · ≤480 ─────────── */
@media (max-width:480px){
  body{font-size:16px;line-height:1.8}
  /* labels must never be clipped by a fixed button height */
  .btn{block-size:auto;min-block-size:54px;padding-block:13px;line-height:1.45;text-align:center}
  .wrap{padding-inline:20px}

  .hdr__in{block-size:58px;gap:12px}
  .hdr.stuck .hdr__in{block-size:58px}
  .logo .mk{block-size:38px}.logo .wd{block-size:31px}
  .hdr.stuck .logo .mk{block-size:38px}.hdr.stuck .logo .wd{block-size:31px}
  .hbg{inline-size:46px;block-size:46px}

  .sec,#services,#projects,#tech,#audience,#contact{padding-block:66px 0}
  .head{margin-block-end:30px}
  .head h2,.proj__head h2{font-size:28px;line-height:1.42}
  .kicker{font-size:13px}

  .hero__txt{padding:40px 20px 34px}
  .hero h1{font-size:38px;line-height:1.28;margin-block-end:18px;max-inline-size:none;
    text-wrap:balance}
  /* forced desktop breaks would strand two-word lines here — let it flow */
  .hero h1 .ln{display:inline}
  .hero h1 .ln + .ln::before{content:' '}
  .hero__sub{font-size:16.5px;line-height:1.8;margin-block-end:16px;max-inline-size:38ch}
  .hero__loc{font-size:14px;margin-block-end:26px;max-inline-size:none;margin-inline:auto}
  .hero__cta{flex-direction:column;gap:12px}
  .hero__cta .btn{inline-size:100%;min-block-size:54px}
  .hero__media{aspect-ratio:auto;block-size:320px;max-block-size:none}

  .stats{margin-block-start:-38px}
  .stats__box{padding:20px 2px;border-radius:20px}
  .stat{gap:8px;padding-inline:6px}
  .stat + .stat{border-inline-start:1px solid var(--line)}
  .stat > svg{inline-size:28px;block-size:28px}
  .stat b{font-size:clamp(21px,6.3vw,28px);white-space:nowrap}
  .stat u{font-size:12px;max-inline-size:13ch;line-height:1.55;min-block-size:2.9em}

  /* informational Arabic stays right-aligned; only these stay centred */
  .head--c,.stats,.trust__row,.hero__txt{text-align:center}
  .svc__r1 .ic,.svc__wide,.mi,.aud__card,.tech__box,.cta__box,
  .ftr__grid,.info,.proj__head{text-align:start}

  .svc__r1{gap:16px}
  .svc__r1 .ic{min-block-size:270px}
  .svc__wide{min-block-size:250px;margin-block-start:16px}
  .ic__cap{padding:22px 22px;
    background:linear-gradient(to top,rgba(8,26,54,.92),rgba(8,26,54,.55) 55%,rgba(8,26,54,.12))}
  .ic__cap h3{font-size:19px}
  .ic__cap p{font-size:13.5px;line-height:1.65}
  .svc__minor{margin-block-start:38px}
  .mi{padding:24px 16px 20px;min-block-size:112px}
  .mi svg{inline-size:24px;block-size:24px;margin-block-end:12px}
  .mi h3{font-size:14.5px;line-height:1.6}

  .proj__panel{padding:22px;border-radius:20px}
  .proj__head{margin-block-end:20px}
  .pf{min-block-size:320px;aspect-ratio:auto;block-size:330px;max-block-size:none}
  .pf__m{padding:22px 20px}
  .pf__m h3{font-size:21px}
  .pf__m em{font-size:13px;opacity:1}
  .prail{gap:10px}
  .pt{flex:0 0 132px;block-size:92px}
  .pt span{font-size:12.5px;padding:9px 11px}
  .proj__foot{margin-block-start:22px}
  .proj__foot .btn{inline-size:100%}

  .tech__box{padding:24px;gap:24px;border-radius:20px}
  .tech__box h2{font-size:26px;max-inline-size:none}
  .tech__box > div > p{font-size:16px;max-inline-size:none}
  .flow{gap:8px}
  .flow span{font-size:13px;padding:8px 13px}
  .tech__img{min-block-size:260px}
  .tech__btns,.cta__btns{flex-direction:column;gap:12px}
  .tech__btns .btn,.cta__btns .btn{inline-size:100%}

  .aud__card{padding:22px 0}
  .aud__card h3{font-size:18px;max-inline-size:none}
  .aud__card p{font-size:15px;margin-block-end:14px}

  .cta__box{padding:24px;border-radius:20px;gap:22px}
  .cta__box h2{font-size:26px;max-inline-size:none}
  .cta__box > div > p{max-inline-size:none}
  .cta__side{padding:20px;border-radius:18px}
  .ksa{display:none}

  .ihero__in{padding-block:64px 48px}
  .ihero h1{font-size:30px;line-height:1.38}
  .ihero p{font-size:16px}
  .ihero__btns{flex-direction:column;gap:12px}
  .ihero__btns .btn{inline-size:100%}

  .trust{margin-block-start:74px;padding-block:26px}
  .trust__row{gap:10px 0}
  .trust__it{font-size:14px;padding-inline:14px}
  .trust__it + .trust__it::before{inline-size:3px;block-size:3px}

  .ftr{padding-block:46px 0}
  .ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
  .ftr__brand{grid-column:1 / -1}
  .ftr h4,.ftr .ftr__h{font-size:15px}
  .ftr li a{font-size:14px;display:inline-flex;align-items:center;min-block-size:44px}
  .social a{inline-size:44px;block-size:44px}
  .logo{min-block-size:44px}
  .info li a,.info li span{min-block-size:44px;display:flex;align-items:center;gap:14px}
  .ftr .info li{padding-block:0}
  .ftr__bar{font-size:12.5px;line-height:1.9}

  /* .mbar is fixed and never hides once shown, so reserve its height or it covers the footer.
     84px was 3px short of the tallest case: on /calculator/ the bar carries «أرسل مستندات
     مشروعك», which wraps to two lines (62px button → 87px bar) where the one-line «احسب
     التكلفة» on every other page is 52px → 77px. 88px clears the tallest of the two. */
  body{padding-block-end:calc(88px + env(safe-area-inset-bottom))}

  /* the hero CTA scrolls away fast on a phone — keep the primary action reachable */
  .mbar{display:flex;gap:10px;position:fixed;inset-inline:0;inset-block-end:0;z-index:55;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
    border-block-start:1px solid var(--line);
    transform:translateY(120%);transition:transform 420ms var(--ease)}
  .mbar.on{transform:none}
  .mbar .btn{min-block-size:52px;flex:1;font-size:14.5px;padding-inline:12px;
    padding-block:10px;min-inline-size:0;line-height:1.35}
  .mbar__wa{flex:0 0 56px;padding-inline:0}
  .mbar__wa svg{inline-size:22px;block-size:22px}
  .ftr__rule{margin-block-end:78px}
}

@media (max-width:360px){
  .hero h1{font-size:34px}
  .stat b{font-size:clamp(19px,6.2vw,25px)}
  .stat u{font-size:11.5px}
  .mi{padding:22px 12px 18px}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .rv{opacity:1;transform:none}
  .mr{clip-path:none}
  .hero__media img{opacity:1;transform:none}
}


/* contact form */
.cform{display:flex;flex-direction:column;gap:14px;margin-block:22px 26px}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.cform__row{grid-template-columns:1fr}}
.cform label{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:600;color:var(--ink)}
.cform input,.cform select,.cform textarea{
  font-family:var(--font);font-size:15.5px;font-weight:400;color:var(--ink);
  background:var(--soft);border:1.5px solid var(--line-mid);border-radius:var(--r-sm);
  padding:12px 14px;transition:border-color var(--fast) var(--ease);
}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  outline:none;border-color:var(--navy);background:var(--white);
}
.cform textarea{resize:vertical;min-block-size:90px;font-weight:400}
.cform__hint{font-size:13.5px;color:var(--muted);font-weight:400;margin-block-start:-4px}

/* ---- project portfolio grid (/projects/) ---- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:1024px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.pgrid{grid-template-columns:1fr}}
.pcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.pcard__ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--soft)}
.pcard__ph img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.pcard__tag{position:absolute;inset-block-start:14px;inset-inline-start:14px;background:rgba(18,52,100,.88);
  color:#fff;font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:20px;backdrop-filter:blur(4px)}
.pcard__body{padding:20px 22px 24px}
.pcard__body h3{font-size:17.5px;margin:0 0 8px;color:var(--navy)}
.pcard__body p{color:var(--muted);font-size:14.5px;line-height:1.85;margin:0}
.pcard__tag--wip{background:var(--gold);color:var(--navy);inset-inline-start:auto;inset-inline-end:14px}

/* ---- projects page: quick-facts band under the inner hero ---- */
.pfacts{background:var(--soft);border-block-end:1px solid var(--line);padding-block:30px}

/* ---- projects page: sector filter pills ---- */
.pfilter{display:flex;gap:10px;flex-wrap:wrap;margin-block-end:40px}
.pfilter__btn{font-family:var(--font);font-size:14.5px;font-weight:500;color:var(--muted);
  background:#fff;border:1.5px solid var(--line-mid);border-radius:999px;
  padding:11px 22px;cursor:pointer;transition:all var(--fast) var(--ease)}
.pfilter__btn:hover{border-color:var(--gold);color:var(--navy)}
.pfilter__btn[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
@media (max-width:480px){.pfacts{padding-block:22px}.pfacts .trust__row{gap:8px 0}.pfilter{gap:8px}.pfilter__btn{padding:9px 16px;font-size:13.5px}}

/* ---- price calculator (/calculator/) ---- */
.calc{max-inline-size:820px;margin-inline:auto}
.calc__bar{display:flex;gap:8px;margin-block-end:36px}
.calc__bar i{flex:1;block-size:5px;border-radius:4px;background:var(--line)}
.calc__bar i.on{background:var(--gold)}
.calc__step{display:none}
.calc__step.on{display:block;animation:calcIn .35s var(--ease)}
@keyframes calcIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.calc__eyebrow{font-size:13px;font-weight:700;color:var(--gold-ink);margin:0 0 8px}
.calc__h{font-size:24px;font-weight:700;color:var(--navy);margin:0 0 28px}
.calc__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:640px){.calc__grid{grid-template-columns:1fr}}
.calc__opt{border:2px solid var(--line);border-radius:var(--r-md);padding:18px 20px;text-align:start;
  background:#fff;cursor:pointer;transition:border-color var(--fast) var(--ease),transform var(--fast) var(--ease);
  font-family:inherit;display:block;inline-size:100%}
.calc__opt:hover{border-color:var(--gold-mid);transform:translateY(-2px)}
.calc__opt.on{border-color:var(--gold);background:var(--gold-tint)}
.calc__opt h4{margin:0 0 4px;font-size:16px;color:var(--navy)}
.calc__opt span{display:block;font-size:12.5px;color:var(--muted)}
.calc__opt em{display:block;font-style:normal;font-size:13px;color:var(--gold-ink);font-weight:600;margin-block-start:8px}
.calc__opt.soon{opacity:.5;cursor:not-allowed}
.calc__opt.soon:hover{transform:none;border-color:var(--line)}
.calc__opt.soon em{color:var(--muted)}
.calc__area{display:flex;align-items:center;gap:14px;margin-block-start:8px;max-inline-size:320px}
.calc__area input{flex:1;block-size:58px;border:2px solid var(--line);border-radius:var(--r-btn);
  padding-inline:18px;font-size:20px;font-weight:600;color:var(--navy);font-family:inherit;text-align:center}
.calc__area input:focus{outline:none;border-color:var(--gold)}
.calc__area span{font-size:15px;color:var(--muted);font-weight:600}
.calc__hint{font-size:13.5px;color:var(--muted);margin-block-start:14px;line-height:1.8}
.calc__nav{display:flex;justify-content:space-between;margin-block-start:32px}
.calc__back{background:none;border:0;color:var(--muted);font-family:inherit;font-size:14.5px;
  cursor:pointer;font-weight:600;padding:10px 4px}
.calc__back:hover{color:var(--navy)}
.calc__result{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-lg);padding:36px 32px;text-align:center}
.calc__result .lbl{font-size:14px;color:var(--muted);margin:0 0 6px}
.calc__result .num{font-size:40px;font-weight:800;color:var(--navy);margin:0;direction:ltr;display:block}
.calc__result .rng{font-size:14px;color:var(--muted);margin:8px 0 0}
.calc__result .warn{margin:22px auto 0;max-inline-size:52ch;font-size:13.5px;color:var(--gold-ink);
  background:var(--gold-tint);border:1px solid var(--line-mid);border-radius:var(--r-sm);padding:12px 16px}
.calc__result .cta{display:flex;gap:12px;justify-content:center;margin-block-start:26px;flex-wrap:wrap}
@media (max-width:480px){.calc__result .num{font-size:30px}}

/* ---- calculator v2 additions ---- */
.calc__trail{font-size:13px;color:var(--gold-ink);font-weight:600;margin:-18px 0 24px;padding-block-end:16px;border-block-end:1px solid var(--line)}
.calc__ic{display:flex;margin-block-end:14px;color:var(--gold-ink)}
.calc__ic svg{inline-size:26px;block-size:26px}
.calc__result .brk{font-size:12.5px;color:var(--muted);margin:10px 0 0;direction:rtl}
.calc__proof{display:inline-block;margin-block-start:18px;font-size:13.5px;color:var(--navy);
  text-decoration:underline;font-weight:600}
.calc__proof:hover{color:var(--gold-ink)}

/* ═══════════════════════════════════════════════════════════════════════════
   COST CALCULATOR ENTRY POINTS
   The calculator is the only thing here a visitor can finish alone, at 2am,
   without handing a stranger their phone number — so it gets a lane nothing
   else on the site uses (gold on gold-tint) and three fixed positions: the
   header, directly under every inner-page hero, and the mobile bottom bar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- header pill: the site's ONE primary action ----
   Solid gold, and the only solid gold in the header. It used to be a tinted outline sitting
   beside a solid gold WhatsApp button, which read as "calling us is the point and the estimate
   is a side note" — the wrong way round for a page whose job is to qualify a visitor. */
/* Desktop: the gold CTA sits in the header slot beside it, so a second gold pill here would
   be the same offer twice. In the drawer (≤1024) the CTA slot is hidden, so the pill takes the
   gold back — see the media query below. */
/* Desktop: hidden outright. The gold CTA sits two elements away saying the same words, and a
   nav link beside it is the same offer twice in one bar. In the drawer (≤1024) the CTA slot is
   hidden, so this becomes the calculator's only entry there and takes the gold back. */
.nav a.nav__calc{display:none;align-items:center;gap:7px;line-height:1;
  background:none;border:0;color:var(--ink);
  border-radius:0;padding:8px 0;font-weight:500;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease),
             transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.nav a.nav__calc svg{inline-size:17px;block-size:17px;flex:none}
.nav a.nav__calc::after{display:none}
.nav a.nav__calc:hover{color:var(--navy)}
/* on the calculator page the pill is a "you are here" marker, not an invitation — a ring
   separates the two states now that both are solid */
.nav a.nav__calc.on{color:var(--gold-ink)}
.nav a.nav__calc::after{display:none}

/* WhatsApp in the header: present, findable, quiet. */
.hdr__cta{gap:8px}
.hdr__cta svg{inline-size:17px;block-size:17px;flex:none}

/* ---- entry band under the hero of every page except home and the calculator ---- */
.calcbar{background:var(--gold-tint);border-block:1px solid var(--line-mid)}
.calcbar__in{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-block:20px}
.calcbar__txt{margin:0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:15.5px;line-height:1.75;color:var(--ink)}
.calcbar__txt b{flex:none;font-size:12.5px;font-weight:700;color:var(--gold-ink);line-height:1;
  background:#fff;border:1px solid var(--gold);border-radius:999px;padding:6px 12px}
.calcbar__txt .num{font-weight:700;color:var(--navy)}
.calcbar__btn{flex:none;block-size:50px;padding-inline:24px;font-size:15.5px}
.calcbar__btn svg{inline-size:19px;block-size:19px}

/* ---- home page: the calculator's first step, lifted onto the front door ----
   Eleven tiles, each a deep link that opens the calculator already set to that
   work type (#q= is the same state the "copy this estimate" link encodes), so
   the choice a visitor makes here is not repeated on arrival. */
.calcx{padding-block:100px 0}
.calcx__panel{background:var(--navy-deep);border-radius:var(--r-xl);padding:56px}
.calcx__head{max-inline-size:780px;margin-block-end:34px}
.calcx__head .kicker{color:var(--gold-mid)}
.calcx__head .kicker::before{background:var(--gold-mid)}
.calcx__head h2{color:#fff;font-size:36px;margin:0 0 14px}
.calcx__head p{margin:0;color:rgba(255,255,255,.72);font-size:16px}
.calcx__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
/* Eleven work types since louvres and the electric shutter joined (26 Sep 2026): three columns, the
   last row two tiles. In the two-column band the eleventh tile spans the row (see the 1024px rule). */
.calcx__tile{display:block;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md);padding:18px 20px;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),
             transform var(--fast) var(--ease)}
.calcx__tile:hover{background:rgba(255,255,255,.10);border-color:var(--gold);transform:translateY(-2px)}
.calcx__tile b{display:block;color:#fff;font-size:16px;font-weight:600;margin-block-end:4px}
/* direct child only — the rate line carries its own <span class="num">, which must stay inline */
.calcx__tile>span{display:block;color:rgba(255,255,255,.58);font-size:13.5px;line-height:1.7}
.calcx__tile em{display:block;font-style:normal;color:var(--gold-mid);font-size:13.5px;
  font-weight:600;margin-block-start:10px}
.calcx__foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-block-start:32px}
.calcx__note{margin:0;color:rgba(255,255,255,.58);font-size:14px}

@media (max-width:1024px){
  /* in the drawer the pill becomes the one highlighted row, not a small chip */
  .nav a.nav__calc{display:flex;background:var(--gold);color:var(--navy);border:1px solid var(--gold);
    border-radius:14px;padding:14px 16px;margin-block:14px;
    min-block-size:56px;font-size:17px;justify-content:flex-start}
  .nav a.nav__calc svg{inline-size:20px;block-size:20px}
  .calcx{padding-block:80px 0}
  .calcx__panel{padding:40px 28px}
  .calcx__head h2{font-size:29px}
  .calcx__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calcx__grid > :last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:768px){
  .calcbar__in{flex-direction:column;align-items:stretch;gap:16px;padding-block:22px}
  .calcbar__btn{inline-size:100%}
}
@media (max-width:640px){
  .calcx__grid{grid-template-columns:1fr}
  .calcx__foot{gap:14px}
  .calcx__foot .btn{inline-size:100%}
  .calcx__note{text-align:center;inline-size:100%}
}
@media (max-width:480px){
  /* The footer's contact column holds the phone link, which is direction:ltr and therefore one
     unbreakable token: 152px of number beside a 20px icon and a 14px gap needs 186px, while a
     half-width column on a 375px screen is 157.5px. The row could not shrink to fit, so it hung
     7px past the viewport and let every page on the site drag sideways. Below 480px the column
     takes the whole row instead — above it, two columns still have room to spare. */
  .ftr__grid>div:last-child{grid-column:1 / -1}
  .calcx{padding-block:66px 0}
  .calcx__panel{padding:28px 22px;border-radius:20px}
  .calcx__head h2{font-size:26px}
}
/* ---- footer v2 (26 Sep 2026) ----
   Four short columns plus ONE collapsed site guide. The long tail of service, guide and audience
   pages sits inside <details>: still in the HTML, so every page keeps its sitewide link (several
   are young and not yet indexed by Google), without a wall of links on screen. Do not "clean up"
   the guide by deleting links from it — move them, never drop them. */
.ftr__grid{grid-template-columns:1.45fr 1fr .9fr 1.3fr}
.ftr li.ftr__grp{margin-block-end:14px}
.ftr__grp>span{display:block;font-size:14.5px;font-weight:600;color:var(--navy);margin-block-end:10px}
.ftr__grp>ul{padding-inline-start:14px;border-inline-start:2px solid var(--line-mid)}
.ftr__grp>ul li{margin-block-end:8px}
.ftr .ftr__all a{display:inline-flex;align-items:center;gap:6px;color:var(--navy);font-weight:600}
.ftr .ftr__all svg{inline-size:16px;block-size:16px;flex:none}
.ftr .ftr__map{display:flex;flex-wrap:wrap;gap:8px}
.ftr .ftr__map a{display:inline-flex;align-items:center;gap:7px;min-block-size:40px;padding-inline:14px;
  border:1px solid var(--line-mid);border-radius:999px;background:var(--white);color:var(--navy);
  font-size:13.5px;font-weight:500;transition:border-color var(--fast) var(--ease)}
.ftr .ftr__map a:hover{border-color:var(--navy)}
.ftr .ftr__map svg{inline-size:16px;block-size:16px;flex:none}
.ftr__dir{border-block-end:1px solid var(--line-mid)}
.ftr__dir>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-block-size:56px;padding-block:14px;cursor:pointer;list-style:none;color:var(--navy);
  font-size:15px;font-weight:600}
.ftr__dir>summary::-webkit-details-marker{display:none}
.ftr__dir>summary small{margin-inline-start:10px;font-size:13px;font-weight:400;color:var(--muted)}
.ftr__dir>summary svg{inline-size:20px;block-size:20px;flex:none;transition:transform var(--fast) var(--ease)}
.ftr__dir[open]>summary svg{transform:rotate(180deg)}
.ftr__dirgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px;padding-block:6px 32px}
.ftr__dirh{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--navy)}
.ftr__dirgrid li{margin-block-end:8px}
.ftr__dirgrid li a{font-size:13.5px}
/* two lines on purpose: one run wrapped mid-time («9:00–» / «17:00»). The ≤480px .info li span rule
   makes every span a 44px flex row, so this needs the extra specificity. */
.ftr .info .ftr__hrs,.ftr .info .ftr__hrs span{display:block;min-block-size:0}
@media (max-width:1024px){
  .ftr__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ftr__dirgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr__grid>div:last-child{grid-column:1 / -1}
  .ftr__dirgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
  .ftr__dirgrid li{margin-block-end:0}
  .ftr__dir>summary small{display:block;margin:2px 0 0}
  .ftr .ftr__map a{min-block-size:44px}
}
/* 27 Sep 2026 (asset 4.40): one real project or factory photo on its matching inner page, section#from-projects.
   The frame is fixed at 16:10 so portrait and landscape originals sit the same way and nothing shifts on load. */
.qfig{margin:0;max-inline-size:820px}
.qfig img{display:block;inline-size:100%;block-size:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-lg);background:var(--soft)}
.qfig figcaption{margin-block-start:12px;color:var(--muted);font-size:14.5px;line-height:1.9;max-inline-size:70ch}

/* ══════════ LANGUAGE BUTTON · 7 Oct 2026 ══════════
   Moataz: «عايز العميل يقدر يغيّر ما بين اللغات… وتكون ظاهرة أكتر». The switch used to be one plain
   word inside the nav, and on phones it only existed inside the closed drawer. It is now an outlined
   pill in the header bar on every viewport, next to the gold calculator CTA (desktop) or the menu
   button (≤1024). The drawer keeps its own .nav__lang row. */
.hdr__lang{display:inline-flex;align-items:center;gap:7px;flex:none;
  min-block-size:40px;padding-inline:14px;border:1.5px solid var(--navy);border-radius:999px;
  background:#fff;color:var(--navy);font-size:14.5px;font-weight:600;line-height:1;white-space:nowrap;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease)}
.hdr__lang svg{inline-size:18px;block-size:18px;flex:none}
.hdr__lang:hover{background:var(--navy);color:#fff}
.hdr__lang:focus-visible{background:var(--navy);color:#fff;outline:2px solid var(--gold);outline-offset:2px}
.hdr__lang-s{display:none}
@media (min-width:1025px){
  .nav .nav__lang{display:none}
  .hdr__lang{margin-inline-start:-12px}
  .hdr__lang+.hdr__cta{margin-inline-start:-18px}
}
@media (min-width:1025px) and (max-width:1199px){
  .hdr__lang{padding-inline:11px}
  .hdr__lang-l{display:none}
  .hdr__lang-s{display:inline}
}
@media (max-width:1024px){
  .hdr__lang{margin-inline-start:auto;min-block-size:44px}
  .hdr__in .hbg{margin-inline-start:0}
}
@media (max-width:480px){
  .hdr__lang{padding-inline:12px;gap:6px}
  .hdr__lang-l{display:none}
  .hdr__lang-s{display:inline}
}
/* English header (LTR): its nav labels are longer than the Arabic ones and the row sat ~10px from
   wrapping, so the button would push it onto two lines. The button shows the short «عربي» there,
   the gaps tighten, and below 1280 the «Home» link gives way (the logo already goes home). */
@media (min-width:1025px){
  html[dir=ltr] .nav{gap:18px}
  html[dir=ltr] .hdr__lang{padding-inline:11px}
  html[dir=ltr] .hdr__lang-l{display:none}
  html[dir=ltr] .hdr__lang-s{display:inline}
}
@media (min-width:1025px) and (max-width:1279px){
  html[dir=ltr] .hdr__in{gap:20px}
  html[dir=ltr] .nav{gap:13px}
  html[dir=ltr] .nav a{font-size:14.5px}
  html[dir=ltr] .hdr__cta{font-size:14px}
  html[dir=ltr] .nav>a:first-child{display:none}
}