/* StructPro — "Dark Digital BIM" theme. Plain CSS, logical properties only (RTL-ready). */
@font-face{font-family:"Inter";src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Noto Sans Arabic";src:url("../fonts/noto-sans-arabic-wght.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");font-weight:300 700;font-display:swap}

:root{
  --bg:#0a0c0d; --bg-2:#0f1213; --panel:#13171813; --panel-solid:#131718; --panel-2:#181d1f;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --green:#009f73; --green-bright:#13c594; --green-glow:rgba(0,159,115,.35); --green-dim:rgba(0,159,115,.14);
  --text:#e9eeec; --muted:#9ba8a3; --faint:#8a9893;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Space Grotesk","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --radius:4px; --maxw:1200px; --gutter:clamp(1rem,4vw,2rem); --header-h:68px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-block-start:calc(var(--header-h) + 12px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.65 var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-block-size:100vh;display:flex;flex-direction:column}
/* subtle technical grid */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
  linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,24px 24px,24px 24px}
main{flex:1}
img,svg,video{max-inline-size:100%;display:block}
img{block-size:auto}
a{color:var(--green-bright);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--green-bright);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;margin:0 0 .6em;letter-spacing:-.01em;font-weight:600}
h1{font-size:clamp(2.2rem,6.5vw,4.4rem);font-weight:600}
h2{font-size:clamp(1.7rem,4vw,2.6rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
ul{padding-inline-start:1.2em}
.container{inline-size:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto}
.sr-only{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;inset-inline-start:1rem;inset-block-start:-4rem;background:var(--green);color:#03120d;padding:.6rem 1rem;z-index:200;font-weight:600;border-radius:var(--radius)}
.skip-link:focus{inset-block-start:1rem;color:#03120d}

/* ---------- header ---------- */
.site-header{position:sticky;inset-block-start:0;z-index:100;background:rgba(10,12,13,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-block-end:1px solid var(--line);transition:background .3s}
.site-header.is-scrolled{background:rgba(10,12,13,.92)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-block-size:var(--header-h);gap:1rem}
.logo{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--text)}
.logo-mark{inline-size:30px;block-size:34px;flex:none}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-word{font:700 1.55rem/1 var(--font-display);letter-spacing:-.02em;color:#e4e8e6}
.logo-word b{color:var(--green);font-weight:700}
.logo-tag{font:600 .5rem/1 var(--font-sans);letter-spacing:.07em;color:var(--muted);margin-block-start:.3rem;white-space:nowrap}
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;inline-size:44px;block-size:44px;background:transparent;border:1px solid var(--line-2);border-radius:var(--radius);cursor:pointer;color:var(--text)}
.nav-toggle .bars,.nav-toggle .bars::before,.nav-toggle .bars::after{display:block;inline-size:20px;block-size:2px;background:currentColor;position:relative;transition:transform .25s var(--ease),opacity .2s}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;inset-inline-start:0}
.nav-toggle .bars::before{inset-block-start:-6px}.nav-toggle .bars::after{inset-block-start:6px}
.nav-toggle[aria-expanded="true"] .bars{background:transparent}
.nav-toggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}
.site-nav{position:absolute;inset-inline:0;inset-block-start:100%;background:rgba(10,12,13,.98);border-block-end:1px solid var(--line);padding:1rem var(--gutter) 1.5rem;display:none;flex-direction:column;gap:1rem}
.site-nav.is-open{display:flex}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.site-nav li a{display:block;padding:.75rem 0;color:var(--text);text-decoration:none;border-block-end:1px solid var(--line);font-weight:500}
.site-nav li a[aria-current="page"]{color:var(--green-bright)}
@media (min-width:62em){
  .nav-toggle{display:none}
  .site-nav{position:static;display:flex;flex-direction:row;align-items:center;background:none;border:0;padding:0;gap:1.75rem}
  .site-nav ul{flex-direction:row;gap:1.6rem}
  .site-nav li a{padding:.4rem 0;border:0;font-size:.92rem;position:relative;color:#cfd8d4}
  .site-nav li a::after{content:"";position:absolute;inset-inline:0;inset-block-end:-2px;block-size:1px;background:var(--green-bright);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
  [dir="rtl"] .site-nav li a::after{transform-origin:right}
  .site-nav li a:hover::after,.site-nav li a[aria-current="page"]::after{transform:scaleX(1)}
  .site-nav li a:hover{color:#fff}
}
@media (max-width:34em){.logo-tag{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.35rem;border-radius:var(--radius);font:600 .95rem/1 var(--font-sans);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s var(--ease),background .2s,border-color .2s,box-shadow .2s;min-block-size:46px}
.btn-sm{padding:.6rem 1rem;min-block-size:40px;font-size:.88rem}
.btn-primary{background:var(--green);color:#03120d}
.btn-primary:hover{background:var(--green-bright);color:#03120d;box-shadow:0 0 0 4px var(--green-dim),0 8px 30px var(--green-glow);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.03);color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--green-bright);color:#fff;background:var(--green-dim)}
.btn .arr{inline-size:1em;transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
[dir="rtl"] .btn .arr{transform:scaleX(-1)}

/* ---------- hero ---------- */
.hero{position:relative;min-block-size:min(100svh,880px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;border-block-end:1px solid var(--line)}
.hero-media{position:absolute;inset:0;z-index:-2;background:#050707 url("../img/hero-poster.jpg") center/cover no-repeat}
.hero-media video{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;opacity:.85}
.hero-overlay{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(10,12,13,.55) 0%,rgba(10,12,13,.35) 35%,rgba(10,12,13,.88) 85%,var(--bg) 100%),
  linear-gradient(90deg,rgba(10,12,13,.85) 0%,rgba(10,12,13,.35) 60%,rgba(10,12,13,.1) 100%)}
[dir="rtl"] .hero-overlay{background:linear-gradient(180deg,rgba(10,12,13,.55) 0%,rgba(10,12,13,.35) 35%,rgba(10,12,13,.88) 85%,var(--bg) 100%),linear-gradient(270deg,rgba(10,12,13,.85) 0%,rgba(10,12,13,.35) 60%,rgba(10,12,13,.1) 100%)}
.hero-inner{padding-block:7rem 4.5rem}
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font:500 .74rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--green-bright);margin-block-end:1.4rem}
.eyebrow::before{content:"///";color:var(--green);letter-spacing:-.05em;font-weight:700}
.hero h1{max-inline-size:14ch;margin-block-end:.5em;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.hero h1 span{display:block}
.hero h1 .g{color:var(--green-bright)}
.hero-lead{max-inline-size:56ch;font-size:clamp(1.02rem,2.2vw,1.2rem);color:#d3dbd8;margin-block-end:2rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-hud{display:flex;flex-wrap:wrap;gap:.5rem 1.8rem;margin-block-start:3rem;padding-block-start:1rem;border-block-start:1px solid var(--line-2);font:500 .72rem/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hero-hud b{color:var(--green-bright);font-weight:500}
.media-toggle{position:absolute;inset-inline-end:var(--gutter);inset-block-start:1rem;z-index:3;background:rgba(10,12,13,.6);border:1px solid var(--line-2);color:var(--text);font:500 .72rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;padding:.55rem .8rem;border-radius:var(--radius);cursor:pointer;min-block-size:36px}
.media-toggle:hover{border-color:var(--green-bright)}
.hero .corner{position:absolute;inline-size:28px;block-size:28px;border:1px solid var(--green);opacity:.6;pointer-events:none}
.corner.tl{inset-block-start:84px;inset-inline-start:var(--gutter);border-inline-end:0;border-block-end:0}
.corner.br{inset-block-end:1.2rem;inset-inline-end:var(--gutter);border-inline-start:0;border-block-start:0}
@media (prefers-reduced-motion:reduce){.hero-media video{display:none}}

/* ---------- sections ---------- */
section{position:relative}
.section{padding-block:clamp(3.5rem,9vw,6.5rem)}
.section-alt{background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,.03));border-block:1px solid var(--line)}
.section-head{max-inline-size:60ch;margin-block-end:2.5rem}
.section-head .eyebrow{margin-block-end:1rem}
.section-head p{color:var(--muted);font-size:1.05rem}
.lead{font-size:1.12rem;color:#cdd7d3;max-inline-size:62ch}
.page-hero{padding-block:clamp(4rem,10vw,7rem) 3rem;border-block-end:1px solid var(--line);position:relative;overflow:hidden;
  background:radial-gradient(60% 80% at 85% 0%,rgba(0,159,115,.13),transparent 70%)}
.page-hero h1{font-size:clamp(2rem,5.5vw,3.6rem);max-inline-size:20ch}
.page-hero p{max-inline-size:60ch;color:#c4cfca;font-size:1.1rem;margin:0}
.crumbs{font:500 .72rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-block-end:1.2rem}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--green-bright)}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:1.25rem}
.g-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.card{position:relative;background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;transition:border-color .3s,transform .3s var(--ease),background .3s}
.card::before,.card::after{content:"";position:absolute;inline-size:12px;block-size:12px;border:1px solid var(--green);opacity:0;transition:opacity .3s}
.card::before{inset-block-start:-1px;inset-inline-start:-1px;border-inline-end:0;border-block-end:0}
.card::after{inset-block-end:-1px;inset-inline-end:-1px;border-inline-start:0;border-block-start:0}
.card:hover{border-color:rgba(0,159,115,.45);background:var(--panel-2)}
.card:hover::before,.card:hover::after{opacity:1}
.card h3{margin-block-end:.5rem}
.card p{color:var(--muted);margin:0}
.card .idx{font:500 .72rem var(--font-mono);color:var(--green-bright);letter-spacing:.14em;display:block;margin-block-end:1rem}
.card ul{margin:.8rem 0 0;color:var(--muted);font-size:.93rem}
.card ul li{margin-block:.2rem}
.icon{inline-size:42px;block-size:42px;color:var(--green-bright);margin-block-end:1rem}
.tag{display:inline-block;font:500 .66rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:.35rem .5rem;border:1px solid var(--line-2);color:var(--muted);border-radius:2px}
.tag.g{border-color:rgba(0,159,115,.55);color:var(--green-bright)}
.tag.sample{border-color:#caa23c;color:#e6c46a}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-start:1rem}

/* stats */
.stats{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-solid)}
@media (min-width:48em){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:1.8rem 1.4rem;border-inline-end:1px solid var(--line);border-block-end:1px solid var(--line)}
.stat-num{font:600 clamp(2.2rem,5vw,3.2rem)/1 var(--font-display);color:#fff;display:block}
.stat-num small{color:var(--green-bright);font-size:.6em}
.stat-label{color:var(--muted);font-size:.88rem;display:block;margin-block-start:.6rem}
.stat-label::before{content:"";display:block;inline-size:24px;block-size:2px;background:var(--green);margin-block-end:.7rem}

/* split */
.split{display:grid;gap:2.5rem;align-items:center}
@media (min-width:56em){.split{grid-template-columns:1fr 1fr;gap:4rem}.split.rev>:first-child{order:2}[dir="rtl"] .split.rev>:first-child{order:2}}
.figure{margin:0;position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.figure.dark{background:#000}
.figure img{inline-size:100%;block-size:100%;object-fit:cover}
.figure figcaption{position:absolute;inset-inline:0;inset-block-end:0;padding:.6rem .9rem;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);font:500 .68rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#cfd8d4}

/* values */
.value{border-inline-start:2px solid var(--green);padding-inline-start:1.2rem}
.value h3{color:#fff}
.value p{color:var(--muted)}

/* checklist */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.checks li{padding-inline-start:1.7rem;position:relative;color:#cdd7d3}
.checks li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;inline-size:.8rem;block-size:1px;background:var(--green-bright);box-shadow:0 0 0 0 transparent}
.checks li::after{content:"";position:absolute;inset-inline-start:.8rem;inset-block-start:calc(.62em - 2px);inline-size:5px;block-size:5px;background:var(--green-bright);transform:rotate(45deg)}

/* service blocks */
.svc{display:grid;gap:1.5rem;padding-block:2.5rem;border-block-start:1px solid var(--line)}
@media (min-width:56em){.svc{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem}}
.svc h2{font-size:clamp(1.5rem,3vw,2rem)}
.svc .num{font:500 .75rem var(--font-mono);color:var(--green-bright);letter-spacing:.16em;display:block;margin-block-end:.8rem}
.sub-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.sub{background:var(--panel-solid);border:1px solid var(--line);padding:1.1rem 1.2rem;border-radius:var(--radius)}
.sub h3{font-size:1rem;margin-block-end:.4rem;color:#fff}
.sub p,.sub li{color:var(--muted);font-size:.92rem;margin:0}
.sub ul{margin:.3rem 0 0}

/* project cards */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-block-end:2rem}
.chip{font:500 .78rem var(--font-mono);letter-spacing:.06em;text-transform:uppercase;background:transparent;color:var(--muted);border:1px solid var(--line-2);padding:.6rem .95rem;border-radius:2px;cursor:pointer;min-block-size:40px}
.chip:hover{color:#fff;border-color:var(--green-bright)}
.chip[aria-pressed="true"]{background:var(--green);color:#03120d;border-color:var(--green)}
.proj-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}
.proj{display:flex;flex-direction:column;background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .3s,transform .3s var(--ease)}
.proj:hover{border-color:rgba(0,159,115,.5);transform:translateY(-3px)}
.proj[hidden]{display:none}
.proj-img{aspect-ratio:16/10;background:#fff;overflow:hidden;position:relative}
.proj-img img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform .6s var(--ease)}
.proj:hover .proj-img img{transform:scale(1.04)}
.proj-img.dark{background:#000}
.proj-img.blank{background:#0d1112 linear-gradient(rgba(0,159,115,.12) 1px,transparent 1px) 0 0/100% 20px,linear-gradient(90deg,rgba(0,159,115,.12) 1px,transparent 1px) 0 0/20px 100%;display:grid;place-items:center}
.proj-img.blank span{font:600 1.4rem var(--font-display);color:var(--green-bright);border:1px solid var(--green);padding:.4rem .8rem;background:rgba(10,12,13,.8)}
.proj-body{padding:1.25rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.proj-body .loc{font:500 .7rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green-bright);margin-block-end:.5rem}
.proj-body h3{font-size:1.15rem}
.proj-body p{color:var(--muted);font-size:.93rem}
.proj-body .tags{margin-block-start:auto;padding-block-start:.6rem}
.case{display:grid;gap:2rem;padding-block:3rem;border-block-start:1px solid var(--line)}
@media (min-width:56em){.case{grid-template-columns:5fr 7fr;gap:3.5rem}.case.rev{grid-template-columns:7fr 5fr}.case.rev>.case-text{order:2}}
.case-meta{display:grid;gap:.6rem;margin-block:1.2rem;padding:1rem 1.1rem;border:1px solid var(--line);background:var(--panel-solid);font-size:.9rem}
.case-meta div{display:flex;gap:1rem;justify-content:space-between;border-block-end:1px dashed var(--line);padding-block-end:.5rem}
.case-meta div:last-child{border:0;padding:0}
.case-meta dt{color:var(--faint);font:500 .7rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.case-meta dd{margin:0;text-align:end;color:#d5ded9}
.case-meta{margin-inline:0}
.shots{display:grid;gap:.8rem;grid-template-columns:1fr 1fr}
.shots .figure:first-child{grid-column:1/-1}
.shots .figure{aspect-ratio:auto}
.shots img{aspect-ratio:16/10}
.shots .figure:first-child img{aspect-ratio:16/8}

/* software */
.sw-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr))}
.sw{border:1px solid var(--line);padding:.9rem 1rem;background:var(--panel-solid);border-radius:var(--radius);font:500 .95rem var(--font-display);position:relative}
.sw small{display:block;font:400 .72rem var(--font-sans);color:var(--faint);margin-block-start:.2rem}
.sw::before{content:"";position:absolute;inset-inline-start:0;inset-block:.8rem;inline-size:2px;background:var(--green)}
.lod{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.lod>div{background:var(--panel-solid);padding:1.3rem}
.lod b{font:600 1.7rem var(--font-display);color:var(--green-bright);display:block}
.lod p{margin:.4rem 0 0;color:var(--muted);font-size:.92rem}

/* CTA band */
.cta-band{border:1px solid var(--line-2);border-radius:var(--radius);padding:clamp(2rem,6vw,4rem);background:
  radial-gradient(60% 120% at 100% 0%,rgba(0,159,115,.22),transparent 60%),var(--panel-solid);position:relative;overflow:hidden}
.cta-band h2{max-inline-size:20ch}
.cta-band p{color:#c4cfca;max-inline-size:56ch}
.tagline-2{font:500 .78rem var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green-bright);margin-block-end:1rem}

/* countries */
.countries{display:flex;flex-wrap:wrap;gap:.5rem}
.countries li{list-style:none;border:1px solid var(--line-2);padding:.45rem .8rem;font:500 .8rem var(--font-mono);letter-spacing:.06em;border-radius:2px;color:#d3dcd8}
.countries{padding:0;margin:0}

/* forms */
.form{display:grid;gap:1.1rem}
.form .row{display:grid;gap:1.1rem}
@media (min-width:40em){.form .row{grid-template-columns:1fr 1fr}}
label{display:block;font:500 .8rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-block-end:.4rem}
label .req{color:var(--green-bright)}
input,select,textarea{inline-size:100%;background:#0c0f10;color:var(--text);border:1px solid var(--line-2);border-radius:var(--radius);padding:.8rem .9rem;font:400 1rem var(--font-sans);min-block-size:46px}
textarea{min-block-size:140px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green-bright);outline-offset:1px;border-color:var(--green)}
.notice{border:1px dashed #caa23c;background:rgba(202,162,60,.08);color:#ecd9a3;padding:1rem 1.1rem;border-radius:var(--radius);font-size:.9rem}
.notice strong{color:#f5e3ae}
.form-status{min-block-size:1.5em;font-size:.95rem;color:var(--green-bright)}
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.contact-list li{border-block-end:1px solid var(--line);padding-block-end:1rem}
.contact-list .k{display:block;font:500 .7rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-block-end:.25rem}
.contact-list a{color:#fff;text-decoration:none;overflow-wrap:anywhere}
.contact-list a:hover{color:var(--green-bright)}

/* articles */
.art-tools{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-block-end:2rem}
.search{position:relative;inline-size:min(100%,320px)}
.search input{padding-inline-start:2.4rem}
.search svg{position:absolute;inset-inline-start:.8rem;inset-block-start:50%;transform:translateY(-50%);inline-size:16px;color:var(--muted)}
.art-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.art-card{display:flex;flex-direction:column;background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .3s,transform .3s var(--ease)}
.art-card:hover{border-color:rgba(0,159,115,.5);transform:translateY(-3px)}
.art-card[hidden]{display:none}
.art-card .thumb{aspect-ratio:16/9;background:#0d1112;overflow:hidden}
.art-card .thumb img{inline-size:100%;block-size:100%;object-fit:cover}
.art-card .thumb.blank{background:#0d1112 linear-gradient(rgba(0,159,115,.12) 1px,transparent 1px) 0 0/100% 20px,linear-gradient(90deg,rgba(0,159,115,.12) 1px,transparent 1px) 0 0/20px 100%}
.art-card .body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.art-card .meta{font:500 .7rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--green-bright);display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-block-end:.7rem}
.art-card .meta time{color:var(--muted)}
.art-card h3{font-size:1.2rem}
.art-card h3 a{color:#fff;text-decoration:none}
.art-card h3 a::after{content:"";position:absolute;inset:0}
.art-card{position:relative}
.art-card p{color:var(--muted);font-size:.94rem;margin:0}
.empty{padding:2rem;border:1px dashed var(--line-2);text-align:center;color:var(--muted)}
.article{max-inline-size:760px;margin-inline:auto}
.article h1{font-size:clamp(1.9rem,5vw,3rem);max-inline-size:none}
.article-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;font:500 .75rem var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-block-end:1.5rem;align-items:center}
.article .cover{margin-block:1.5rem 2.5rem;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.prose{font-size:1.06rem;color:#d4dcd8}
.prose h2{font-size:1.6rem;margin-block-start:2.2rem}
.prose h3{font-size:1.2rem;margin-block-start:1.8rem}
.prose img{border:1px solid var(--line);border-radius:var(--radius);margin-block:1.5rem}
.prose blockquote{margin:1.5rem 0;padding:.4rem 1.2rem;border-inline-start:2px solid var(--green);color:#e5ece8;background:var(--green-dim)}
.prose code{font-family:var(--font-mono);background:#171c1d;padding:.1em .35em;border-radius:3px;font-size:.9em}
.prose pre{background:#0c0f10;border:1px solid var(--line);padding:1rem;overflow:auto;border-radius:var(--radius)}
.prose pre code{background:none;padding:0}
.prose li{margin-block:.3rem}
.prose hr{border:0;border-block-start:1px solid var(--line);margin-block:2rem}
.draft-banner{margin-block-end:1.5rem}

/* footer */
.site-footer{margin-block-start:4rem;border-block-start:1px solid var(--line);background:var(--bg-2);padding-block:3.5rem 1.5rem;font-size:.93rem}
.footer-grid{display:grid;gap:2.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.site-footer h2{font:500 .72rem var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-block-end:1rem}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.site-footer a{color:#cdd7d3;text-decoration:none;overflow-wrap:anywhere}
.site-footer a:hover{color:var(--green-bright)}
.site-footer p{color:var(--muted)}
.footer-bottom{margin-block-start:2.5rem;padding-block-start:1.2rem;border-block-start:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;color:var(--faint);font-size:.82rem}

/* reveal */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{body::before,.site-header,.hero-media{display:none}body{background:#fff;color:#000}}

.shots.two{grid-template-columns:1fr}
.proj-grid.four{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}

/* ================= Round 2 ================= */
/* logo image (vector from the company profile) */
.logo-img{block-size:34px;inline-size:auto;aspect-ratio:516/74;display:block}
.logo-img-lg{block-size:48px;aspect-ratio:516/96}
@media (max-width:34em){.logo-img{block-size:26px}}
.header-tools{display:flex;align-items:center;gap:.6rem}
.lang-switch{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;font:600 .78rem/1 var(--font-sans)}
.lang-switch a,.lang-switch .cur{display:inline-flex;align-items:center;justify-content:center;min-inline-size:42px;min-block-size:40px;padding-inline:.7rem;text-decoration:none}
.lang-switch a{color:var(--muted)}
.lang-switch a:hover{color:#fff;background:var(--green-dim)}
.lang-switch .cur{background:var(--green);color:#03120d}
.lang-switch>*+*{border-inline-start:1px solid var(--line-2)}
@media (min-width:62em){
  .site-nav{order:2;margin-inline-start:auto}
  .header-tools{order:3;margin-inline-start:1.25rem}
}

/* delivered-with + collaborations strip */
.proj-body .with{font-size:.84rem;color:var(--muted);margin:.9rem 0 0;padding-block-start:.7rem;border-block-start:1px dashed var(--line-2)}
.proj-body .with bdi{color:#dfe8e4;font-weight:500}
.collab{border-block-end:1px solid var(--line);background:rgba(255,255,255,.015)}
.collab-inner{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 3rem;padding-block:1.6rem}
.collab-head{flex:0 1 20rem}
.collab-label{font:500 .72rem var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--green-bright);margin:0 0 .3rem}
.collab-head p{margin:0;color:var(--faint);font-size:.88rem}
.collab-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;flex:1 1 24rem}
.collab-list li{font:600 1rem/1.3 var(--font-display);color:#dfe8e4;position:relative;padding-inline-start:1rem}
.collab-list li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.55em;inline-size:6px;block-size:6px;background:var(--green);transform:rotate(45deg)}

/* founder card + photo placeholder */
.founder{display:grid;gap:1.6rem;padding:2.2rem;grid-template-columns:1fr;align-items:center}
@media (min-width:36em){.founder{grid-template-columns:200px 1fr}}
.founder-photo{inline-size:min(100%,220px);aspect-ratio:1;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;background:#13181a;position:relative}
.founder-photo img,.founder-photo svg{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.founder-photo::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.founder-text h2{margin-block-end:.2rem}

/* WhatsApp */
.btn-wa{background:#128c5a;color:#fff;border-color:#128c5a}
.btn-wa:hover{background:#17a56b;color:#fff;box-shadow:0 0 0 4px rgba(18,140,90,.2)}
.btn-wa .wa-ico{inline-size:1.25em;block-size:1.25em;flex:none}
.btn-wa:disabled,.btn-wa[aria-disabled="true"]{background:transparent;border:1px dashed var(--line-2);color:var(--faint);cursor:not-allowed;box-shadow:none;transform:none}
.wa-float{position:fixed;inset-inline-end:1rem;inset-block-end:1rem;z-index:90;inline-size:54px;block-size:54px;border-radius:50%;display:grid;place-items:center;background:#128c5a;color:#fff;box-shadow:0 6px 24px rgba(0,0,0,.5);transition:transform .2s var(--ease),background .2s}
.wa-float:hover{background:#17a56b;color:#fff;transform:scale(1.07)}
.wa-float .wa-ico{inline-size:30px;block-size:30px}
@media print{.wa-float{display:none}}

/* ================= Arabic / RTL ================= */
html[lang="ar"]{
  --font-sans:"Noto Sans Arabic","Inter",system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  --font-display:"Noto Sans Arabic","Space Grotesk","Inter",system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  --font-mono:"Noto Sans Arabic","Inter",system-ui,sans-serif;
}
html[lang="ar"] body{line-height:1.85}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{line-height:1.4;letter-spacing:0;font-weight:700}
html[lang="ar"] h1{line-height:1.3}
html[lang="ar"] .hero h1{max-inline-size:16ch}
html[lang="ar"] .lead{line-height:1.9}
/* Arabic letters must stay joined: no tracking, no uppercase tricks */
html[lang="ar"] .eyebrow,html[lang="ar"] .crumbs,html[lang="ar"] .hero-hud,html[lang="ar"] .media-toggle,html[lang="ar"] .chip,html[lang="ar"] .tag,
html[lang="ar"] .card .idx,html[lang="ar"] .svc .num,html[lang="ar"] .stat-label,html[lang="ar"] .collab-label,html[lang="ar"] .site-footer h2,
html[lang="ar"] .art-card .meta,html[lang="ar"] .article-meta,html[lang="ar"] .case-meta dt,html[lang="ar"] .contact-list .k,html[lang="ar"] .figure figcaption,
html[lang="ar"] .sw small,html[lang="ar"] .proj .loc,html[lang="ar"] .tagline-2,html[lang="ar"] label{letter-spacing:0;text-transform:none}
html[lang="ar"] .eyebrow{font-size:.88rem;font-weight:600}
html[lang="ar"] .hero-hud{font-size:.85rem}
html[lang="ar"] .chip{font-size:.88rem}
html[lang="ar"] .tag{font-size:.78rem;line-height:1.4}
html[lang="ar"] .crumbs{font-size:.85rem}
html[lang="ar"] .figure figcaption{font-size:.8rem}
html[lang="ar"] .btn{font-weight:600}
/* Latin runs inside Arabic copy (software names, LOD, emails) keep the Latin font */
html[lang="ar"] :is(.hero-hud b,.stat-num,.sw,.logo-img){font-family:var(--font-display)}
[dir="rtl"] .btn .arr{transform:scaleX(-1)}
[dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(3px)}
[dir="rtl"] input[type="email"],[dir="rtl"] input[type="tel"],[dir="rtl"] input[type="search"]{direction:ltr;text-align:end}
[dir="rtl"] input[type="search"]::placeholder{direction:rtl}
[dir="rtl"] .search input{padding-inline-start:2.4rem}
[dir="rtl"] .lod b,[dir="rtl"] .case-meta dd{unicode-bidi:plaintext}
[dir="rtl"] .contact-list a[href^="mailto"],[dir="rtl"] .contact-list a[href^="tel"]{unicode-bidi:isolate;direction:ltr;display:inline-block}
[dir="rtl"] .countries{unicode-bidi:plaintext}
[dir="rtl"] .prose blockquote{border-inline-start-width:2px}

/* ================= Round 3 ================= */
.badge-done{display:inline-flex;align-items:center;gap:.4rem;font:600 .72rem/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:#bff3df;background:rgba(0,159,115,.16);border:1px solid rgba(19,197,148,.45);border-radius:2px;padding:.35rem .6rem;margin-block-end:.7rem}
.badge-done::before{content:"";inline-size:.9em;block-size:.9em;background:var(--green-bright);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
html[lang="ar"] .badge-done{letter-spacing:0;text-transform:none;font-size:.82rem}
.status-note{border-inline-start:2px solid var(--green);padding:.6rem 1rem;background:rgba(255,255,255,.03);color:#d5ded9;font-size:.95rem;margin-block:1rem}
.site-footer .ph-k{color:var(--faint);font-size:.82rem}
.site-footer .addr{color:var(--muted);line-height:1.6}
.site-footer .addr a{text-decoration:underline;color:var(--green-bright);display:inline-block;margin-block-start:.3rem}
.contact-list .addr-link{text-decoration:underline;display:inline-block;margin-block-start:.4rem;color:var(--green-bright)}
.contact-list .ph-k{color:var(--faint);font-size:.82rem}
.founder-photo svg{background:linear-gradient(160deg,#1a2328,#10161a)}