/* ==========================================================
   Salahuddin Softtech Solutions
   Light + dark themes, LTR + RTL
   ========================================================== */

:root{
  --navy:#0A1A2F;
  --brand-1:#16386B;
  --brand-2:#1B7FC4;
  --brand-3:#4FC3E8;

  --bg:#FFFFFF;
  --bg-2:#F4F8FC;
  --bg-3:#E9F1F8;
  --fg:#08182C;
  --fg-2:#51657D;
  --line:#DDE7F1;
  --line-2:#EEF3F8;
  --card:#FFFFFF;
  --card-hover:#FFFFFF;
  --shadow:0 26px 60px -34px rgba(8,24,44,.45);
  --shadow-sm:0 10px 24px -18px rgba(8,24,44,.4);

  --panel:#08182C;
  --panel-2:#0D2340;
  --panel-fg:#F1F6FB;
  --panel-fg-2:rgba(241,246,251,.7);
  --panel-line:rgba(255,255,255,.15);

  --accent:#1B7FC4;
  --accent-2:#4FC3E8;
  --accent-soft:#E6F4FB;
  --gold:#B8933E;

  --logo-gap:#FFFFFF;
  --head-bg:rgba(255,255,255,.82);

  --wrap:1260px;
  --r:6px;
  --r-lg:14px;

  --f-display:"Chivo","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono","IBM Plex Sans Arabic",ui-monospace,monospace;

  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}

[data-theme="dark"]{
  --bg:#060D18;
  --bg-2:#0A1524;
  --bg-3:#0E1D31;
  --fg:#E9F1F9;
  --fg-2:#93A8C0;
  --line:#1C2E47;
  --line-2:#152438;
  --card:#0B1727;
  --card-hover:#0E1D31;
  --shadow:0 26px 60px -34px rgba(0,0,0,.85);
  --shadow-sm:0 10px 24px -18px rgba(0,0,0,.7);

  --panel:#0A1524;
  --panel-2:#0E1D31;
  --panel-fg:#E9F1F9;
  --panel-fg-2:rgba(233,241,249,.66);
  --panel-line:rgba(255,255,255,.1);

  --accent:#4FC3E8;
  --accent-2:#4FC3E8;
  --accent-soft:rgba(79,195,232,.12);

  --logo-gap:#060D18;
  --head-bg:rgba(6,13,24,.8);
  color-scheme:dark;
}

html[lang="ar"]{
  --f-display:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-mono:"IBM Plex Sans Arabic",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Nothing is allowed to push the page sideways on a phone. */
html,body{max-width:100%;overflow-x:hidden}
h1,h2,h3,h4,p,li,a{overflow-wrap:break-word}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--f-body);font-size:16.5px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
  transition:background .35s var(--ease),color .35s var(--ease);
}
html[lang="ar"] body{line-height:1.9;font-size:17px}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none;transition:color .2s}
a:hover{color:var(--fg)}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:3px}
::selection{background:var(--accent-2);color:#04121F}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.skip{position:absolute;inset-inline-start:-9999px}
.skip:focus{inset-inline-start:12px;top:12px;z-index:999;background:var(--bg);padding:10px 16px;border:1px solid var(--line)}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.025em;line-height:1.1;margin:0 0 .55em}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{letter-spacing:0;line-height:1.4}
.h-xl{font-size:clamp(2.6rem,6.4vw,4.7rem);letter-spacing:-.04em}
html[lang="ar"] .h-xl{font-size:clamp(2rem,5vw,3.5rem);letter-spacing:0}
.h-lg{font-size:clamp(2rem,4.2vw,3.1rem)}
html[lang="ar"] .h-lg{font-size:clamp(1.6rem,3.4vw,2.5rem)}
.h-md{font-size:clamp(1.4rem,2.5vw,2rem)}
p{margin:0 0 1.15em}
.lead{font-size:clamp(1.06rem,1.6vw,1.26rem);color:var(--fg-2);line-height:1.62}
html[lang="ar"] .lead{line-height:1.95}
.muted{color:var(--fg-2)}
.grad{background:linear-gradient(100deg,var(--accent-2),var(--brand-2) 62%);-webkit-background-clip:text;background-clip:text;color:transparent}

.label{
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:14px;margin:0 0 20px;
}
html[lang="ar"] .label{text-transform:none;font-size:.84rem;letter-spacing:0;font-weight:600}
.label::after{content:"";flex:1;height:1px;background:linear-gradient(to left,transparent,var(--line));max-width:220px}
[dir="rtl"] .label::after{background:linear-gradient(to right,transparent,var(--line))}
.label.on-panel{color:var(--accent-2)}
.label.on-panel::after{background:linear-gradient(to left,transparent,var(--panel-line))}
[dir="rtl"] .label.on-panel::after{background:linear-gradient(to right,transparent,var(--panel-line))}
.label.center{justify-content:center}
.label.center::before{content:"";flex:1;height:1px;background:linear-gradient(to right,transparent,var(--line));max-width:120px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  padding:15px 26px;border-radius:var(--r);border:1px solid transparent;
  transition:.28s var(--ease);cursor:pointer;white-space:nowrap;
}
html[lang="ar"] .btn{letter-spacing:0;text-transform:none;font-size:.94rem;font-weight:600}
.btn svg{width:14px;height:14px;transition:transform .28s var(--ease);flex-shrink:0}
[dir="rtl"] .btn svg{transform:scaleX(-1)}
.btn:hover svg{transform:translateX(4px)}
[dir="rtl"] .btn:hover svg{transform:scaleX(-1) translateX(4px)}
.btn-primary{background:var(--fg);color:var(--bg)}
.btn-primary:hover{background:var(--accent);color:#fff}
[data-theme="dark"] .btn-primary{background:var(--accent-2);color:#04121F}
[data-theme="dark"] .btn-primary:hover{background:#fff;color:#04121F}
.btn-cyan{background:linear-gradient(180deg,#6FD3F2,var(--accent-2));color:#04121F;
  box-shadow:0 8px 22px -12px rgba(79,195,232,.7)}
.btn-cyan:hover{background:#fff;color:#04121F;box-shadow:0 10px 26px -12px rgba(255,255,255,.5)}
.btn-ghost{border-color:var(--line);color:var(--fg);background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.btn-ghost-light{border-color:var(--panel-line);color:var(--panel-fg)}
.btn-ghost-light:hover{background:var(--panel-fg);color:var(--panel)}

/* ---------- Logo (official artwork; reversed variant on dark surfaces) ----------
   Both variants are stacked in one grid cell and cross-faded. Toggling `display`
   was fragile — `.mark img` outranked `.lg-rev{display:none}` and both showed. */
.logo{display:inline-flex;align-items:center;flex-shrink:0;min-width:0}
.logo-img{display:inline-grid;line-height:0;min-width:0}
.logo-img img{
  grid-area:1/1;height:40px;width:auto;display:block;
  filter:none!important;mix-blend-mode:normal;
  transition:opacity .25s var(--ease);
}
.logo-img .lg-rev{opacity:0}
[data-theme="dark"] .logo-img .lg-light{opacity:0}
[data-theme="dark"] .logo-img .lg-rev{opacity:1}
/* the footer is dark in both themes */
.logo-rev .logo-img .lg-light{opacity:0}
.logo-rev .logo-img .lg-rev{opacity:1}
.logo-img .lg-mark{display:none}
.drawer-tools{display:flex;align-items:center;gap:8px;flex-shrink:0}
.site-foot .logo-img img{height:44px}
.drawer-top .logo{flex:0 1 auto}
.drawer-top .logo-img{width:auto;max-width:210px}
.drawer-top .logo-img img{width:100%;height:auto;max-height:34px}

/* ---------- Pointer ----------
   One arrow for both themes: #051657 fill with a thin white stroke. The deep navy
   reads on light pages, the white edge separates it from dark ones, so nothing has to
   switch when the theme does. Over anything clickable the fill turns accent blue and
   the white edge stays.

   The point-cloud panels get a CAD crosshair instead. A reticle belongs on something
   you are meant to be measuring, and those panels are dark in both themes.

   Native CSS cursors, drawn as SVG — crisp at any display density, no requests, and
   no lag, which a scripted cursor cannot avoid. */
html{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2.4%202.1%20L2.4%2019.4%20L7.2%2015.1%20L10.4%2021.8%20L13.6%2020.3%20L10.5%2013.8%20L17.2%2013.5%20Z%22%20fill%3D%22%23051657%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%20paint-order%3D%22stroke%22%2F%3E%3C%2Fsvg%3E") 2 2, default}
a,button,summary,label,[role="button"],.icon-btn,.burger,.card,.tile,
.mark,.news-card,.brand-card,.gal figure,.logo-cell,.clients div{
  cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2.4%202.1%20L2.4%2019.4%20L7.2%2015.1%20L10.4%2021.8%20L13.6%2020.3%20L10.5%2013.8%20L17.2%2013.5%20Z%22%20fill%3D%22%234FC3E8%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%20paint-order%3D%22stroke%22%2F%3E%3C%2Fsvg%3E") 2 2, pointer;
}
input,textarea{cursor:text}
.tower-wrap,.hero canvas{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%201.5V7M12%2017v5.5M1.5%2012H7M17%2012h5.5%22%20stroke%3D%22%23051657%22%20stroke-opacity%3D%22.75%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Crect%20x%3D%229.2%22%20y%3D%229.2%22%20width%3D%225.6%22%20height%3D%225.6%22%20rx%3D%221%22%20fill%3D%22none%22%20stroke%3D%22%23051657%22%20stroke-opacity%3D%22.75%22%20stroke-width%3D%223.2%22%2F%3E%3Cpath%20d%3D%22M12%201.5V7M12%2017v5.5M1.5%2012H7M17%2012h5.5%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Crect%20x%3D%229.2%22%20y%3D%229.2%22%20width%3D%225.6%22%20height%3D%225.6%22%20rx%3D%221%22%20fill%3D%22%234FC3E8%22%20fill-opacity%3D%22.9%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%221.2%22%2F%3E%3C%2Fsvg%3E") 12 12, crosshair}

/* A soft accent glow easing along behind the pointer. Decorative only — the cursor
   itself is native, so the lag here reads as motion rather than delay. */
.cursor-halo{
  position:fixed;top:0;left:0;width:38px;height:38px;border-radius:50%;
  pointer-events:none;z-index:190;opacity:0;
  background:radial-gradient(circle at 50% 50%,var(--accent-soft),transparent 68%);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  transition:opacity .35s var(--ease),width .28s var(--ease),height .28s var(--ease),
             border-color .28s var(--ease);
  will-change:transform;
}
.cursor-halo.on{opacity:1}
.cursor-halo.hot{width:64px;height:64px;
  border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
@media (hover:none),(pointer:coarse){
  html,a,button,summary,label,[role="button"],.icon-btn,.burger,.card,.tile,
.mark,.news-card,.brand-card,.gal figure,.logo-cell,.clients div,.tower-wrap{cursor:auto}
  .cursor-halo{display:none}
}
@media (prefers-reduced-motion:reduce){.cursor-halo{display:none}}

/* ---------- Page loader ----------
   Covers the outgoing page while the next one loads. It is only revealed after a
   short delay, so a fast hop between pages never flashes a spinner. */
.page-loader{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--bg);opacity:0;visibility:hidden;
  transition:opacity .28s var(--ease),visibility 0s linear .28s;
}
.page-loader.on{opacity:1;visibility:visible;transition:opacity .28s var(--ease),visibility 0s}
.pl-mark{grid-area:1/1;width:52px;height:auto;transition:opacity .25s}
.pl-rev{opacity:0}
[data-theme="dark"] .pl-light{opacity:0}
[data-theme="dark"] .pl-rev{opacity:1}
.pl-ring{
  grid-area:1/1;width:108px;height:108px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--accent);
  animation:pl-spin .85s linear infinite;
}
.pl-label{
  grid-area:1/1;transform:translateY(86px);font-family:var(--f-mono);font-size:.68rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--fg-2);white-space:nowrap;
  animation:pl-fade 1.6s ease-in-out infinite;
}
html[lang="ar"] .pl-label{letter-spacing:0;text-transform:none;font-size:.82rem}
@keyframes pl-spin{to{transform:rotate(360deg)}}
@keyframes pl-fade{0%,100%{opacity:.4}50%{opacity:.85}}
@media (prefers-reduced-motion:reduce){
  .pl-ring{animation:none;border-top-color:var(--line)}
  .pl-label{animation:none}
}

/* ---------- Top bar ---------- */
.topbar{background:var(--panel);color:var(--panel-fg-2);font-size:.82rem;border-bottom:1px solid var(--panel-line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;flex-wrap:wrap}
.topbar a{color:var(--panel-fg-2)}
.topbar a:hover{color:var(--accent-2)}
.topbar-r{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.topbar-note{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;opacity:.85}
html[lang="ar"] .topbar-note{letter-spacing:0;font-size:.82rem}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:80;background:var(--head-bg);backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line);transition:background .35s,border-color .35s}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px}
.nav{display:flex;align-items:center;gap:2px;margin:0;padding:0}
.nav > li{list-style:none;position:relative}
.nav a.nav-link{display:flex;align-items:center;gap:6px;padding:11px 13px;border-radius:var(--r);font-size:.92rem;font-weight:500;color:var(--fg)}
html[lang="ar"] .nav a.nav-link{font-size:1rem}
.nav a.nav-link:hover,.nav li.current > a.nav-link{color:var(--accent);background:var(--bg-2)}
.nav .caret{width:9px;height:9px;fill:currentColor;opacity:.5;transition:transform .25s}
.has-mega:hover .caret{transform:rotate(180deg)}

.mega{
  position:absolute;top:calc(100% + 12px);inset-inline-start:50%;transform:translateX(-50%) translateY(-8px);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:20px;min-width:540px;
  opacity:0;visibility:hidden;transition:.22s var(--ease);
}
[dir="rtl"] .mega{transform:translateX(50%) translateY(-8px)}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
[dir="rtl"] .has-mega:hover .mega,[dir="rtl"] .has-mega:focus-within .mega{transform:translateX(50%) translateY(0)}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px;margin:0;padding:0;list-style:none}
.mega-grid.three{grid-template-columns:repeat(3,1fr)}
.mega a{display:block;padding:9px 12px;border-radius:var(--r);font-size:.9rem;color:var(--fg)}
.mega a:hover{background:var(--bg-2);color:var(--accent)}
.mega-head{grid-column:1/-1;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);padding:4px 12px 10px;border-bottom:1px solid var(--line-2);margin-bottom:8px}
html[lang="ar"] .mega-head{letter-spacing:0;text-transform:none;font-size:.82rem}
.mega-wide{min-width:760px}

.head-cta{display:flex;align-items:center;gap:8px}
.icon-btn{
  height:42px;min-width:42px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r);background:transparent;color:var(--fg);
  cursor:pointer;transition:.22s var(--ease);font-family:var(--f-mono);font-size:.78rem;font-weight:500;padding:0 10px;
}
.icon-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* Switch to the Bahrain site — deliberately small */
.region-btn{font-weight:600;letter-spacing:.08em;gap:7px;text-decoration:none;padding-inline:11px}
.region-btn span{font-size:.76rem}
html[lang="ar"] .region-btn span{font-size:.8rem}
.region-btn .flag-bh{width:19px;height:auto;flex-shrink:0;border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.12)}
[data-theme="dark"] .region-btn .flag-bh{box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.icon-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
.icon-btn .sun{display:none}
[data-theme="dark"] .icon-btn .sun{display:block}
[data-theme="dark"] .icon-btn .moon{display:none}

.burger{display:none;width:44px;height:42px;border:1px solid var(--line);border-radius:var(--r);background:transparent;cursor:pointer;padding:0}
.burger span{display:block;width:18px;height:1.6px;background:var(--fg);margin:4px auto;transition:.25s}

.drawer{position:fixed;inset-block:0;inset-inline-end:0;width:min(400px,88vw);background:var(--bg);z-index:120;
  transform:translateX(102%);visibility:hidden;
  transition:transform .32s var(--ease),visibility 0s linear .32s;
  overflow-y:auto;overscroll-behavior:contain;padding:22px;box-shadow:var(--shadow)}
[dir="rtl"] .drawer{transform:translateX(-102%)}
.drawer.open{transform:none;visibility:visible;transition:transform .32s var(--ease),visibility 0s}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer > ul > li{border-bottom:1px solid var(--line-2)}
.drawer a{display:block;padding:13px 4px;color:var(--fg);font-size:1rem}
.drawer .sub{padding-inline-start:14px;border-inline-start:1px solid var(--line);margin:0 0 12px}
.drawer .sub a{padding:8px 4px;font-size:.9rem;color:var(--fg-2)}
.drawer .subtoggle{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;padding:13px 4px;font:inherit;font-size:1rem;color:var(--fg);cursor:pointer;text-align:start}
.scrim{position:fixed;inset:0;background:rgba(4,12,22,.55);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.3s;z-index:110}
.scrim.open{opacity:1;visibility:visible}

/* A very fine grain over the dark panels. Flat navy at this size reads plasticky;
   a little noise gives it the depth of printed ink. */
.hero::before,.sec-panel::before,.cta-band .grain,.site-foot::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E")}
.sec-panel{position:relative}
.sec-panel > *{position:relative;z-index:1}
.site-foot{position:relative}
.site-foot > *{position:relative;z-index:1}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--panel);color:var(--panel-fg);overflow:hidden;isolation:isolate}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.6;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(900px 520px at 82% 8%,rgba(79,195,232,.26),transparent 62%),
  radial-gradient(700px 460px at 8% 92%,rgba(27,127,196,.2),transparent 66%),
  linear-gradient(105deg,var(--panel) 30%,rgba(8,24,44,.5) 100%)}
[data-theme="dark"] .hero::after{background:
  radial-gradient(900px 520px at 82% 8%,rgba(79,195,232,.16),transparent 62%),
  radial-gradient(700px 460px at 8% 92%,rgba(27,127,196,.14),transparent 66%),
  linear-gradient(105deg,var(--panel) 30%,rgba(6,13,24,.55) 100%)}
.hero-in{position:relative;padding-block:clamp(80px,11vw,146px) clamp(60px,8vw,104px)}
.hero h1{max-width:17ch;margin-bottom:24px}
.hero .lead{color:var(--panel-fg-2);max-width:58ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-meta{display:flex;flex-wrap:wrap;gap:44px;margin-top:66px;padding-top:32px;border-top:1px solid var(--panel-line)}
.hero-meta div{min-width:118px}
.hero-meta b{display:block;font-family:var(--f-display);font-size:clamp(1.8rem,3.1vw,2.5rem);letter-spacing:-.035em;color:var(--panel-fg)}
html[lang="ar"] .hero-meta b{letter-spacing:0}
.hero-meta span{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--panel-fg-2)}
html[lang="ar"] .hero-meta span{letter-spacing:0;font-size:.85rem;text-transform:none}

/* ---------- Page header ---------- */
.page-head{background:var(--panel);color:var(--panel-fg);position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--panel-line) 1px,transparent 1px),linear-gradient(90deg,var(--panel-line) 1px,transparent 1px);
  background-size:60px 60px;opacity:.45;
  -webkit-mask-image:radial-gradient(80% 95% at 50% 0%,#000,transparent);
  mask-image:radial-gradient(80% 95% at 50% 0%,#000,transparent)}
.page-head::after{content:"";position:absolute;inset:0;background:radial-gradient(760px 360px at 86% 0%,rgba(79,195,232,.22),transparent 66%)}
.page-head .wrap{position:relative;z-index:2;padding-block:clamp(54px,7vw,92px) clamp(48px,6vw,70px)}
.page-head h1{max-width:22ch;margin-bottom:16px}
.page-head .lead{color:var(--panel-fg-2);max-width:64ch}
.crumb{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--panel-fg-2);margin-bottom:22px}
html[lang="ar"] .crumb{letter-spacing:0;text-transform:none;font-size:.86rem}
.crumb a{color:var(--panel-fg-2)}
.crumb a:hover{color:var(--accent-2)}
.crumb i{font-style:normal;margin-inline:8px;opacity:.45}

/* ---------- Sections ---------- */
.sec{padding-block:clamp(66px,8vw,110px)}
.sec-tight{padding-block:clamp(44px,5vw,68px)}
.sec-surface{background:var(--bg-2)}
.sec-panel{background:var(--panel);color:var(--panel-fg)}
.sec-panel .lead{color:var(--panel-fg-2)}
.sec-head{max-width:64ch;margin-bottom:46px;position:relative}
.sec-head .h-lg + .lead,.sec-head .h-md + .lead{margin-top:18px}
.sec-head.center{margin-inline:auto;text-align:center}
.split{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(32px,6vw,84px);align-items:start}

/* ---------- Cards ---------- */
.grid{display:grid;gap:20px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

.card{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;transition:.3s var(--ease);overflow:hidden;color:inherit;display:block;
}
.card::before{content:"";position:absolute;inset-inline-start:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--accent-2),var(--brand-2));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
[dir="rtl"] .card::before{transform-origin:right}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .35s var(--ease);
  background:radial-gradient(420px 200px at 50% -20%,var(--accent-soft),transparent 70%)}
.card:hover{border-color:var(--accent);transform:translateY(-5px);
  box-shadow:0 30px 60px -34px rgba(8,24,44,.55);background:var(--card-hover);color:inherit}
[data-theme="dark"] .card:hover{box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.card:hover::after{opacity:1}
.card > *{position:relative;z-index:1}
.card:hover::before{transform:scaleX(1)}
.card h3{margin-bottom:10px;font-size:1.15rem}
.card p{color:var(--fg-2);font-size:.95rem;margin-bottom:16px}
.more{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);display:inline-flex;gap:8px;align-items:center}
html[lang="ar"] .more{letter-spacing:0;text-transform:none;font-size:.88rem;font-weight:600}
.more svg{width:13px;height:13px;transition:transform .25s var(--ease)}
[dir="rtl"] .more svg{transform:scaleX(-1)}
.card:hover .more svg,.brand-card:hover .more svg{transform:translateX(4px)}
[dir="rtl"] .card:hover .more svg,[dir="rtl"] .brand-card:hover .more svg{transform:scaleX(-1) translateX(4px)}
.card-ico{display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;margin-bottom:20px;border-radius:12px;
  background:var(--accent-soft);color:var(--accent);transition:.3s var(--ease)}
.card-ico .ico{width:26px;height:26px}
.card-ico.sm{width:44px;height:44px;margin-bottom:16px}
.card-ico.sm .ico{width:22px;height:22px}
.card:hover .card-ico{background:var(--accent);color:#fff}
[data-theme="dark"] .card:hover .card-ico{color:#04121F}

.brand-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;transition:.3s var(--ease);color:inherit;position:relative;overflow:hidden}
.brand-card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 190px at 50% 0%,var(--accent-soft),transparent 70%);opacity:0;transition:opacity .35s}
.brand-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow);color:inherit}
.brand-card:hover::before{opacity:1}
.brand-card > *{position:relative;z-index:1}
.brand-card h3{font-size:1.05rem;margin-bottom:8px}
.brand-card p{font-size:.9rem;color:var(--fg-2);margin-bottom:14px;flex:1}

.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.tile{display:block;position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 18px 16px 20px;transition:.24s var(--ease);color:inherit;
  border-inline-start:2px solid var(--line)}
.tile.has-ico{display:flex;gap:14px;align-items:flex-start}
.tile-ico{width:42px;height:42px;flex-shrink:0;object-fit:contain;border-radius:8px;
  background:#fff;padding:3px;margin-top:2px}
[data-theme="dark"] .tile-ico{background:rgba(255,255,255,.94)}
.tile-txt{min-width:0}
.tile:hover{border-color:var(--accent);border-inline-start-color:var(--accent);
  transform:translateY(-2px);box-shadow:var(--shadow-sm);color:inherit;
  background:linear-gradient(180deg,var(--accent-soft),transparent 60%),var(--card)}
.tile b{display:block;font-family:var(--f-display);font-size:.97rem;letter-spacing:-.01em}
html[lang="ar"] .tile b{letter-spacing:0}
.tile small{color:var(--fg-2);font-size:.8rem;line-height:1.55;display:block;margin-top:3px}

.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{position:relative;padding-inline-start:30px;color:var(--fg-2)}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.68em;width:14px;height:1.5px;background:var(--accent-2);border-radius:2px}
.ticks li strong{color:var(--fg)}
.sec-panel .ticks li{color:var(--panel-fg-2)}
.sec-panel .ticks li strong{color:var(--panel-fg)}

.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.chip{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);font-size:.93rem;font-weight:500;transition:.24s var(--ease)}
.chip:hover{border-color:var(--accent);transform:translateY(-2px)}
.chip .ico{width:22px;height:22px;flex-shrink:0;color:var(--accent)}
.chip span{min-width:0}
.chip-type{justify-content:center;font-family:var(--f-display);font-weight:700;letter-spacing:-.01em}

.mark{position:relative;display:inline-grid;place-items:center;line-height:0}
/* Dark theme, hovered: the colour artwork comes forward on a light plate. Most
   vendor logos are drawn with near-black type — V-Ray's is #1C1C1C, SketchUp's
   #363545 — so revealing the colour version on a dark card made half the lockup
   disappear. The plate is what makes the real colours readable. */
.mark::before{content:"";position:absolute;inset:-10px -14px;border-radius:10px;
  background:#fff;opacity:0;transform:scale(.96);pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease)}
.mark img{position:relative;z-index:1}
[data-theme="dark"] .mark:hover::before,
[data-theme="dark"] a:hover .mark::before,
[data-theme="dark"] .logo-cell:hover .mark::before,
[data-theme="dark"] .clients div:hover .mark::before{opacity:1;transform:scale(1)}
/* Size comes from --mw/--mh, worked out per logo from its own aspect ratio so
   every mark carries roughly the same optical weight. --ms scales the whole set
   per context (card, marquee, brand page). */
.mark img{grid-area:1/1;display:block;object-fit:contain;
  width:calc(var(--mw,140px) * var(--ms,1));
  height:calc(var(--mh,44px) * var(--ms,1));
  transition:opacity .3s var(--ease)}
.mark .lg-rev{opacity:0}
[data-theme="dark"] .mark .lg-light{opacity:0}
[data-theme="dark"] .mark .lg-rev{opacity:1}
/* dark theme: reveal the brand's real colours on hover */
[data-theme="dark"] .mark:hover .lg-light,
[data-theme="dark"] a:hover .mark .lg-light,
[data-theme="dark"] .logo-cell:hover .mark .lg-light,
[data-theme="dark"] .clients div:hover .mark .lg-light{opacity:1}
[data-theme="dark"] .mark:hover .lg-rev,
[data-theme="dark"] a:hover .mark .lg-rev,
[data-theme="dark"] .logo-cell:hover .mark .lg-rev,
[data-theme="dark"] .clients div:hover .mark .lg-rev{opacity:0}

.mark-type > span{
  display:inline-flex;align-items:center;height:44px;padding:0 16px;border-radius:8px;
  background:var(--bg-2);border:1px solid var(--line);line-height:1;
  font-family:var(--f-display);font-weight:700;font-size:1rem;letter-spacing:-.02em;color:var(--fg)}
html[lang="ar"] .mark-type > span{letter-spacing:0}
.mark-lg{margin-bottom:20px;min-height:66px;justify-items:start;--ms:1}
.mark-center{margin-bottom:16px;--ms:.86}
.mark-xl{--ms:1.5}
.mark-xl{justify-items:start}
.mark-xl .mark-type > span,.mark-xl > span{height:66px;font-size:1.35rem;padding:0 22px;border-radius:12px}
.mark-sm{--ms:.62}
.mark-sm > span{height:30px;font-size:.82rem;padding:0 12px}
/* Borrowed marks: one file, so the dark theme reverses it with a filter.
   Only used until the real artwork is imported. */
.mark-remote img{opacity:1;width:auto;height:calc(40px * var(--ms,1));max-width:100%}
[data-theme="dark"] .mark-remote img{filter:brightness(0) invert(1);opacity:.88}
[data-theme="dark"] .mark-remote:hover img,
[data-theme="dark"] a:hover .mark-remote img{filter:none;opacity:1}
.mark-plain{width:100%}
.mark-plain{--ms:1}
.mark-plain img{max-width:88%}

/* client / regional name plates */
.client-plate{
  font-family:var(--f-display);font-weight:700;font-size:.98rem;letter-spacing:-.015em;
  text-align:center;line-height:1.35;color:var(--fg-2);transition:color .25s}
html[lang="ar"] .client-plate{letter-spacing:0}
.clients div:hover .client-plate{color:var(--accent)}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;position:relative;padding-block:32px;border-block:1px solid var(--line);background:var(--bg)}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.marquee::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.marquee-track{display:flex;gap:62px;width:max-content;animation:slide 48s linear infinite;align-items:center}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track a.mq-item,.mq-item{display:inline-flex;align-items:center;padding:6px 4px;border-radius:8px;
  transition:background .25s var(--ease)}
.mq-item:hover{background:var(--accent-soft)}
.marquee-track .mark{opacity:.72;transition:opacity .3s}
.mq-item:hover .mark{opacity:1}
.marquee-track .mark::before{display:none}
.marquee-track .mark:hover{opacity:1}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Tower point cloud ---------- */
.tower-wrap{position:relative;width:100%;aspect-ratio:4/4.4;border-radius:var(--r-lg);
  overflow:hidden;border:1px solid var(--panel-line);
  background:radial-gradient(120% 90% at 50% 100%,rgba(27,127,196,.16),transparent 62%),
             linear-gradient(180deg,#08182C,#05101F)}
[data-theme="dark"] .tower-wrap{background:
  radial-gradient(120% 90% at 50% 100%,rgba(27,127,196,.14),transparent 62%),
  linear-gradient(180deg,#0A1524,#060D18)}
.tower-wrap::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 60%,#000,transparent);
  mask-image:radial-gradient(80% 70% at 50% 60%,#000,transparent)}
.tower-wrap canvas{position:absolute;inset:0;width:100%;height:100%}
.tower-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 90px 10px rgba(4,12,22,.55)}
.tower-wide{aspect-ratio:16/6.5}
@media (max-width:640px){.tower-wide{aspect-ratio:4/3.4}}
.tower-cap{position:absolute;inset-inline-start:18px;bottom:16px;z-index:2;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(233,241,249,.5)}
html[lang="ar"] .tower-cap{letter-spacing:0;text-transform:none;font-size:.8rem}

/* a portrait field photograph sitting beside body copy */
.split-media{grid-template-columns:.86fr 1.14fr;align-items:center}
.scan-photo{margin:0}
.scan-photo .ph-frame{border-radius:var(--r-lg)}
.scan-photo figcaption{margin-top:14px;font-family:var(--f-mono);font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);line-height:1.6}
html[lang="ar"] .scan-photo figcaption{letter-spacing:0;text-transform:none;font-size:.84rem}
@media (max-width:900px){
  .split-media{grid-template-columns:1fr}
  .scan-photo{max-width:480px}
}

/* ---------- Photo slots ---------- */
.ph-frame{display:block;position:relative;width:100%;aspect-ratio:var(--ratio,4/3);
  border-radius:var(--r-lg);overflow:hidden;background:var(--bg-3);border:1px solid var(--line)}
.ph-frame img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.ph-frame img.is-missing{display:none}
.ph-fallback{position:absolute;inset:0;z-index:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:var(--fg-2);text-align:center;padding:24px;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:28px 28px}
.ph-mark svg{width:30px;height:30px;opacity:.55}
.ph-cap{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;line-height:1.5;max-width:26ch;opacity:.8}
html[lang="ar"] .ph-cap{font-size:.82rem;letter-spacing:0}
.portrait{max-width:190px}
.portrait-lg{max-width:220px}
.scan-graphic{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--panel-line)}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stats div{background:var(--card);padding:34px 26px}
.stats b{display:block;font-family:var(--f-display);font-size:clamp(2rem,3.4vw,2.8rem);letter-spacing:-.04em;line-height:1;margin-bottom:10px;
  background:linear-gradient(120deg,var(--brand-2),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
html[lang="ar"] .stats b{letter-spacing:0}
.stats span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-2);line-height:1.55;display:block}
html[lang="ar"] .stats span{letter-spacing:0;text-transform:none;font-size:.88rem}

/* logo grids (partners, technology stack) */
.logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.logo-grid-sm{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.logo-cell{background:var(--card);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:28px 18px;min-height:132px;transition:background .25s}
.logo-cell:hover{background:var(--bg-3)}

.logo-grid-sm .logo-cell{min-height:112px;padding:22px 14px}
.logo-grid-sm .logo-cell .mark{--ms:.7}
.logo-cell-name{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-2);text-align:center;line-height:1.4}
html[lang="ar"] .logo-cell-name{letter-spacing:0;text-transform:none;font-size:.82rem}

/* ---------- Clients ---------- */
.clients{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.clients div{background:var(--card);display:flex;align-items:center;justify-content:center;padding:24px 18px;min-height:152px;transition:background .25s}
.clients div:hover{background:var(--bg-3)}

/* ---------- News ---------- */
.news-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:.3s var(--ease);color:inherit}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent);color:inherit}
.news-ph{border-radius:0;border:0;border-bottom:1px solid var(--line)}
.news-card .news-ph img{transition:.6s var(--ease)}
.news-card:hover .news-ph img{transform:scale(1.05)}
.news-body{padding:22px 24px 26px;display:block}
.news-date{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;display:block}
html[lang="ar"] .news-date{letter-spacing:0;text-transform:none;font-size:.85rem}
.news-card h3{font-size:1.03rem;line-height:1.4;margin-bottom:9px}
.news-card p{font-size:.9rem;color:var(--fg-2);margin:0}

/* group cards + footer group line */
.group-card{display:flex;flex-direction:column}
.group-where{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:12px}
html[lang="ar"] .group-where{letter-spacing:0;text-transform:none;font-size:.84rem}
.group-card h3{font-size:1.22rem;margin-bottom:12px}
.group-card p{flex:1}
.foot-group{margin-top:18px;font-size:.9rem;color:var(--panel-fg-2);line-height:1.7}
.foot-group a{color:var(--panel-fg);font-weight:600}
.foot-group a:hover{color:var(--accent-2)}

/* ---------- Badges ---------- */
.badge-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.badge{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:100px;padding:10px 18px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg);background:var(--card)}
html[lang="ar"] .badge{letter-spacing:0;text-transform:none;font-size:.86rem}
.badge i{width:7px;height:7px;background:var(--gold);border-radius:50%;display:block;flex-shrink:0}
.sec-panel .badge,.hero .badge{background:rgba(255,255,255,.06);border-color:var(--panel-line);color:var(--panel-fg)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--panel);color:var(--panel-fg);position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--panel-line) 1px,transparent 1px),linear-gradient(90deg,var(--panel-line) 1px,transparent 1px);background-size:52px 52px;opacity:.5;
  -webkit-mask-image:radial-gradient(72% 100% at 50% 50%,#000,transparent);
  mask-image:radial-gradient(72% 100% at 50% 50%,#000,transparent)}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(700px 340px at 15% 120%,rgba(79,195,232,.2),transparent 65%)}
.cta-band .wrap{position:relative;z-index:2;padding-block:clamp(58px,7vw,92px);display:flex;flex-wrap:wrap;gap:34px;align-items:center;justify-content:space-between}
.cta-band h2{margin-bottom:10px;max-width:20ch}
.cta-band p{color:var(--panel-fg-2);margin:0;max-width:54ch}

/* ---------- Prose ---------- */
.prose{max-width:74ch}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:2em}
.prose h3{margin-top:1.7em;font-size:1.16rem}
.prose > :first-child{margin-top:0}
.prose ul{padding:0;list-style:none;display:grid;gap:11px;margin:0 0 1.4em}
.prose ul li{position:relative;padding-inline-start:28px;color:var(--fg-2)}
.prose ul li::before{content:"";position:absolute;inset-inline-start:0;top:.72em;width:13px;height:1.5px;background:var(--accent-2);border-radius:2px}
.prose ol{padding-inline-start:20px;color:var(--fg-2)}
.prose img{border-radius:var(--r-lg);margin:1.6em 0;border:1px solid var(--line)}
.figure{margin:0 0 1.8em}
.figure img{margin:0;width:100%}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,60px);align-items:start}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);margin-bottom:8px}
html[lang="ar"] .field label{letter-spacing:0;text-transform:none;font-size:.86rem}
.field input,.field textarea,.field select{
  width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);
  font:inherit;font-size:.95rem;background:var(--card);color:var(--fg);transition:.2s;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.field textarea{min-height:150px;resize:vertical}
.info-card{background:var(--panel);color:var(--panel-fg);border-radius:var(--r-lg);padding:34px 32px;border:1px solid var(--panel-line)}
.info-card h3{color:var(--panel-fg)}
.info-row{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--panel-line)}
.info-row:last-child{border-bottom:0}
.info-row svg{width:17px;height:17px;fill:var(--accent-2);flex-shrink:0;margin-top:5px}
.info-row a{color:var(--panel-fg)}
.info-row a:hover{color:var(--accent-2)}
.info-row .k{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--panel-fg-2);display:block;margin-bottom:4px}
html[lang="ar"] .info-row .k{letter-spacing:0;text-transform:none;font-size:.84rem}
.map{width:100%;aspect-ratio:16/7;border:1px solid var(--line);border-radius:var(--r-lg);filter:grayscale(.3)}
[data-theme="dark"] .map{filter:grayscale(.4) invert(.92) hue-rotate(180deg)}

/* ---------- Gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.gal figure{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card);transition:.3s var(--ease)}
.gal .ph-empty{background-color:var(--bg-2)}
.gal figure:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.gal .ph-frame{border:0;border-radius:0}
.gal .ph-frame img{transition:.6s var(--ease)}
.gal figure:hover .ph-frame img{transform:scale(1.06)}
.gal figcaption{padding:14px 16px;font-size:.87rem;color:var(--fg-2);border-top:1px solid var(--line)}

/* ---------- Footer ---------- */
.site-foot{background:var(--panel);color:var(--panel-fg-2);padding-block:clamp(58px,7vw,84px) 0;border-top:1px solid var(--panel-line)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:42px}
.site-foot h4{color:var(--panel-fg);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;margin-bottom:20px}
html[lang="ar"] .site-foot h4{letter-spacing:0;text-transform:none;font-size:.92rem}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.site-foot a{color:var(--panel-fg-2);font-size:.93rem}
.site-foot a:hover{color:var(--accent-2)}
.foot-addr{font-size:.93rem;line-height:1.85;font-style:normal;margin-top:20px}
.social{display:flex;gap:10px;margin-top:22px}
.social a{width:38px;height:38px;border:1px solid var(--panel-line);border-radius:var(--r);display:flex;align-items:center;justify-content:center;transition:.25s}
.social a:hover{background:var(--accent-2);border-color:var(--accent-2)}
.social svg{width:16px;height:16px;fill:currentColor}
.social a:hover svg{fill:#04121F}
.foot-bot{margin-top:56px;border-top:1px solid var(--panel-line);padding-block:22px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;color:var(--panel-fg-2)}
html[lang="ar"] .foot-bot{letter-spacing:0;font-size:.86rem}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(22px) scale(.985);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1140px){
  .nav{display:none}
  .burger{display:block}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .logo-img img{height:34px}
}
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .topbar-note{display:none}
  .topbar .wrap{justify-content:center;gap:10px 18px}
  .head-cta .btn{display:none}
  .clients{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  /* The lockup is 7.8:1, so on a phone it can't keep a fixed height — it sizes to
     whatever the header has left instead, and the BH and language buttons move
     into the drawer to give it that room. */
  .region-btn{display:none}
  .icon-btn.lang-btn{display:none}
  .logo{flex:1 1 auto;min-width:0}
  .logo-img{width:100%;max-width:342px}
  .logo-img img{width:100%;height:auto;max-height:44px;object-fit:contain;object-position:left}
  [dir="rtl"] .logo-img img{object-position:right}
  .head-cta{flex-shrink:0}
  .head-in{min-height:66px;gap:10px}
  .wrap{padding-inline:18px}
  .clients{grid-template-columns:repeat(2,1fr)}
  .logo-grid{grid-template-columns:repeat(2,1fr)}
  .tile-grid{grid-template-columns:1fr 1fr}
  .marquee-track{gap:40px}
}
@media (max-width:640px){
  body{font-size:16px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:34px}
  .hero-meta{gap:22px 26px;margin-top:44px}
  .hero-meta div{min-width:calc(50% - 26px)}
  .card{padding:26px 22px}
  .tile-grid{grid-template-columns:1fr}
  .cta-band .wrap{gap:24px}
  .cta-band .btn,.hero-cta .btn{width:100%;justify-content:center}
  .info-card{padding:26px 22px}
  .mega,.mega-wide{min-width:0}
  .topbar-r{font-size:.78rem;gap:12px}
}
@media (max-width:480px){
  /* Every button removed from the header is width the lockup gets back. The theme
     toggle sits at the top of the drawer instead. */
  .site-head .theme-btn{display:none}
  .head-in{gap:8px}
}
@media (max-width:420px){
  .wrap{padding-inline:14px}
  .icon-btn{height:38px;min-width:38px}
  .burger{width:40px;height:38px}
  .clients{grid-template-columns:1fr}
  .logo-grid{grid-template-columns:1fr}
}
@media (max-width:310px){
  /* Below this the wordmark lines fall under 10px — the mark alone is more
     legible than an unreadable lockup. */
  .site-head .logo-img .lg-full{display:none}
  .site-head .logo-img .lg-mark{display:block;width:auto;height:30px}
  .site-head .logo-img{width:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .marquee-track{animation:none}
}
@media print{.site-head,.topbar,.site-foot,.cta-band,.drawer,.scrim,.marquee{display:none}}

/* Brand marks on light backgrounds need inverting in dark mode */