/* ============================================================
   MHS Engineering Consultancy
   Design system: "drawing sheet" — hairline frames, title blocks,
   mono field labels. Brand red #CE2127 sampled from the logo.
   RTL-first: all directional CSS uses logical properties.
   ============================================================ */

:root{
  --ink:#101317;
  --ink-2:#191D23;
  --ink-3:#242A32;
  --red:#CE2127;
  --red-dp:#9E161B;
  --paper:#FFFFFF;
  --sheet:#EDEFF2;
  --sheet-2:#E3E7EB;
  --rule:#D2D7DD;
  --rule-dk:rgba(255,255,255,.16);
  --text:#171B20;
  --muted:#68717C;
  --muted-lt:#9AA3AD;

  --f-body:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-disp:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1220px;
  --gut:clamp(18px,4vw,40px);
  --sp:clamp(64px,8vw,116px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

html[lang="en"]{
  --f-disp:"IBM Plex Sans Condensed","IBM Plex Sans",system-ui,sans-serif;
}

/* IBM Plex Mono carries no Arabic glyphs. Chaining Plex Sans Arabic behind it
   means Latin text and digits render as mono while Arabic stays on the body
   face, instead of dropping to an unrelated system fallback. */
html[lang="ar"]{
  --f-mono:"IBM Plex Mono","IBM Plex Sans Arabic",ui-monospace,monospace;
}
/* Tracking breaks the joins in connected Arabic script — never letterspace it. */
html[lang="ar"] .eyebrow,
html[lang="ar"] .tb-label,
html[lang="ar"] .crumb,
html[lang="ar"] .sheet-loc,
html[lang="ar"] .tb-mini span,
html[lang="ar"] .scope summary,
html[lang="ar"] .filters button,
html[lang="ar"] .sig span,
html[lang="ar"] .info .k,
html[lang="ar"] .field label,
html[lang="ar"] .ftr h4,
html[lang="ar"] .ftr-bot,
html[lang="ar"] .hero-fig figcaption,
html[lang="ar"] .lb-cap{letter-spacing:normal}

*,*::before,*::after{box-sizing:border-box}
/* Author display rules (e.g. .sheet{display:flex}) outrank the user-agent
   [hidden] rule, so the attribute has to be enforced explicitly or the
   project filter cannot hide anything. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-block-start:84px}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--f-body);font-size:16.5px;line-height:1.75;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--f-disp);margin:0;line-height:1.2;font-weight:700;letter-spacing:-.01em}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

:focus-visible{outline:2.5px solid var(--red);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;inset-block-start:-100px;inset-inline-start:12px;z-index:200;
  background:var(--red);color:#fff;padding:10px 18px;font-weight:600}
.skip:focus{inset-block-start:12px}

/* ---------- mono utility label (the "field" voice) ---------- */
.eyebrow{
  font-family:var(--f-mono);font-size:16px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--red);
  display:flex;align-items:center;gap:12px;margin-block-end:18px;
}
.eyebrow::before{content:"";inline-size:32px;block-size:2px;background:var(--red);flex:none}
/* Arabic has no monospace cut and loses its dots at small sizes, so the
   label steps up in size and weight and drops the tracking. */
html[lang="ar"] .eyebrow{font-size:20.5px;font-weight:700}
.eyebrow.on-dark{color:#fff}
.eyebrow.on-dark::before{background:var(--red)}


/* ---------- Bilingual company name lockup ----------
   Reads like the PROJECT field of a drawing title block. Both scripts are
   shown on both language versions, since the firm's registered name is
   bilingual. */
.namemark{
  border-inline-start:3px solid var(--red);
  padding-inline-start:clamp(12px,1.6vw,18px);
  margin-block-end:clamp(20px,2.6vw,28px);
}
.namemark .nm-ar{
  display:block;font-family:"IBM Plex Sans Arabic",var(--f-body);
  font-size:clamp(1.05rem,2.1vw,1.45rem);font-weight:700;color:#fff;line-height:1.45;
}
.namemark .nm-en{
  display:block;font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;
  font-size:clamp(.9rem,1.4vw,1.06rem);font-weight:600;letter-spacing:.1em;
  color:var(--muted-lt);margin-block-start:5px;
}
/* Each name carries its own dir for correct bidi shaping, which would
   otherwise flush it to the opposite edge. Re-align both to the block. */
html[dir="rtl"] .namemark .nm-en{text-align:right}
html[dir="ltr"] .namemark .nm-ar{text-align:left}
.namemark-sm{margin-block-end:20px;border-inline-start-width:3px}
.namemark-sm .nm-ar{font-size:1.3rem;line-height:1.5}
.namemark-sm .nm-en{font-size:1.02rem;letter-spacing:.06em;margin-block-start:4px}

/* ---------- Scope note: what the practice does and does not take on ---------- */
.scope-note{
  border-inline-start:2px solid var(--red);padding-inline-start:14px;
  font-size:1rem;color:var(--muted-lt);
  margin-block:22px 30px;max-inline-size:58ch;
}
.page-head .scope-note{color:var(--muted)}


/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:sticky;inset-block-start:0;z-index:90;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);border-block-end:1px solid var(--rule);
}
.hdr-in{display:flex;align-items:center;gap:20px;
  max-width:var(--wrap);margin-inline:auto;padding:12px var(--gut);}
.brand{display:flex;align-items:center;gap:12px;flex:none;margin-inline-end:auto}
.brand img{block-size:42px;inline-size:auto}
.nav{display:flex;align-items:center;gap:4px}
.nav a{
  font-family:var(--f-disp);font-weight:600;font-size:15px;padding:9px 13px;
  border-radius:3px;position:relative;color:#2A3038;transition:color .18s;
}
.nav a::after{
  content:"";position:absolute;inset-block-end:2px;inset-inline:13px;
  block-size:2px;background:var(--red);transform:scaleX(0);transform-origin:center;
  transition:transform .22s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--ink)}

.lang{
  display:flex;align-items:center;border:1px solid var(--rule);border-radius:2px;
  overflow:hidden;font-family:var(--f-mono);font-size:13.5px;font-weight:600;flex:none;
}
.lang a{padding:7px 12px;color:var(--muted);transition:.18s;letter-spacing:.04em}
.lang a:hover{background:var(--sheet);color:var(--ink)}
.lang a.on{background:var(--ink);color:#fff}

.burger{display:none;flex:none;padding:10px;border:1px solid var(--rule);border-radius:3px}
.burger span{display:block;inline-size:20px;block-size:2px;background:var(--ink);margin:4px 0;transition:.25s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1000px){
  .burger{display:block;order:3}
  .lang{order:2}
  .nav{
    position:fixed;inset-block-start:67px;inset-inline:0;background:var(--paper);
    flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 28px;
    border-block-end:1px solid var(--rule);
    max-block-size:calc(100dvh - 67px);overflow-y:auto;
    clip-path:inset(0 0 100% 0);transition:clip-path .32s var(--ease);
  }
  .nav[data-open="true"]{clip-path:inset(0 0 0 0)}
  .nav a{padding:15px 4px;border-block-end:1px solid var(--rule);font-size:17px}
  .nav a::after{inset-inline:4px}
}

/* ============================================================
   HERO — framed like a drawing sheet
   ============================================================ */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero::before{ /* CAD grid */
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(to right,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
}
.hero::after{ /* red raking light from the start edge */
  content:"";position:absolute;inset-block:0;inset-inline-start:-10%;inline-size:60%;z-index:-1;
  background:radial-gradient(60% 70% at 0% 40%,rgba(206,33,39,.30),transparent 70%);
}
/* Homepage hero over the company banner. The artwork carries its own logo and
   text, so it is pushed to the side the copy does not occupy and darkened
   under the headline; the framed photo is dropped so two images do not fight. */
.hero-banner{background-size:cover,cover;background-repeat:no-repeat,no-repeat}
html[dir="rtl"] .hero-banner{
  background-image:linear-gradient(to left,rgba(16,19,23,.95) 34%,rgba(16,19,23,.80) 58%,rgba(16,19,23,.55) 100%),
                   url(../img/hero-banner.jpg);
  background-position:center left,center left;
}
html[dir="ltr"] .hero-banner{
  background-image:linear-gradient(to right,rgba(16,19,23,.95) 34%,rgba(16,19,23,.80) 58%,rgba(16,19,23,.55) 100%),
                   url(../img/hero-banner.jpg);
  background-position:center right,center right;
}
.hero-banner::before{opacity:.30}
.hero-banner::after{opacity:.45}
.hero-banner .hero-fig{display:none}
.hero-banner .hero-in{grid-template-columns:minmax(0,1fr)}
.hero-banner .hero-lead,.hero-banner .scope-note{max-inline-size:52ch}
@media (max-width:900px){
  /* no spare width for a side fade, so the wash goes uniform to guarantee
     contrast under the headline (specificity must match the rules above) */
  html[dir="rtl"] .hero-banner,html[dir="ltr"] .hero-banner{
    background-image:linear-gradient(rgba(16,19,23,.86),rgba(16,19,23,.92)),
                     url(../img/hero-banner.jpg);
    background-position:center center,center center;
  }
}

.hero-in{
  max-width:var(--wrap);margin-inline:auto;padding:clamp(56px,8vw,92px) var(--gut) 0;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,64px);align-items:center;
  min-block-size:clamp(440px,62vh,600px);
}
.hero h1{
  font-size:clamp(2.15rem,5.4vw,4rem);line-height:1.08;letter-spacing:-.025em;
  margin-block-end:22px;text-wrap:balance;
}
html[lang="ar"] .hero h1{line-height:1.28;letter-spacing:0}
.hero h1 em{font-style:normal;color:var(--red)}
.hero-lead{color:#C4CBD3;font-size:clamp(1rem,1.6vw,1.13rem);max-inline-size:56ch;margin-block-end:32px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-block-end:clamp(36px,5vw,52px)}

/* framed hero image with sheet caption */
.hero-fig{margin:0;position:relative;align-self:end;padding-block-end:clamp(36px,5vw,52px)}
.hero-fig .fr{position:relative;border:1px solid rgba(255,255,255,.28);padding:9px}
.hero-fig img{aspect-ratio:3/4;object-fit:cover;inline-size:100%}
.hero-fig figcaption{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted-lt);margin-block-start:11px;line-height:1.6;
}
html[lang="ar"] .hero-fig figcaption{letter-spacing:normal;font-size:13px}
/* corner ticks */
.fr span{position:absolute;inline-size:13px;block-size:13px;border:1px solid var(--red)}
.fr span:nth-child(1){inset-block-start:-1px;inset-inline-start:-1px;border-inline-end:0;border-block-end:0}
.fr span:nth-child(2){inset-block-start:-1px;inset-inline-end:-1px;border-inline-start:0;border-block-end:0}
.fr span:nth-child(3){inset-block-end:-1px;inset-inline-start:-1px;border-inline-end:0;border-block-start:0}
.fr span:nth-child(4){inset-block-end:-1px;inset-inline-end:-1px;border-inline-start:0;border-block-start:0}

/* ---------- THE SIGNATURE: title block strip ---------- */
.titleblock{
  border-block-start:1px solid var(--rule-dk);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.titleblock .tb-cell{
  padding:22px clamp(12px,2vw,26px);
  border-inline-end:1px solid var(--rule-dk);
}
.titleblock .tb-cell:last-child{border-inline-end:0}
.tb-label{
  display:block;font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-lt);margin-block-end:7px;
}
html[lang="ar"] .tb-label{letter-spacing:normal;font-size:15.5px;font-weight:500}
.tb-value{
  display:block;font-family:var(--f-disp);font-size:clamp(1.25rem,2.6vw,1.85rem);
  font-weight:700;line-height:1.15;color:#fff;letter-spacing:-.01em;
}
.tb-value bdi{unicode-bidi:isolate}
.tb-value small{font-size:.58em;color:var(--red);font-weight:600;margin-inline-start:3px}

@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;min-block-size:0;padding-block-start:44px}
  .hero-fig{display:none}
  .hero-cta{margin-block-end:36px}
  .titleblock{grid-template-columns:1fr 1fr}
  .titleblock .tb-cell{border-block-start:1px solid var(--rule-dk);padding:16px}
  .titleblock .tb-cell:nth-child(2n){border-inline-end:0}
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:13px 24px;
  font-family:var(--f-disp);font-weight:600;font-size:15px;border-radius:2px;
  border:1px solid transparent;transition:.2s var(--ease);white-space:nowrap;
}
.btn svg{inline-size:15px;block-size:15px;flex:none;transition:transform .22s var(--ease)}
html[dir="rtl"] .btn svg{transform:scaleX(-1)}
.btn:hover svg{transform:translateX(4px)}
html[dir="rtl"] .btn:hover svg{transform:scaleX(-1) translateX(4px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dp)}
.btn-ghost{border-color:rgba(255,255,255,.34);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-3)}
.btn-line{border-color:var(--red);color:var(--red)}
.btn-line:hover{background:var(--red);border-color:var(--red);color:#fff}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{padding-block:var(--sp)}
.sec-sheet{background:var(--sheet)}
.sec-dark{background:var(--ink);color:#fff}
.sec-dark p{color:#B9C1CA}
.sec-line{border-block-start:1px solid var(--rule)}

.sec-head{max-inline-size:70ch;margin-block-end:clamp(36px,5vw,56px)}
.sec-head h2{font-size:clamp(1.7rem,3.6vw,2.6rem);letter-spacing:-.02em;margin-block-end:16px}
html[lang="ar"] .sec-head h2{letter-spacing:0;line-height:1.35}
.sec-head p{color:var(--red);font-size:1.03rem}
.sec-dark .sec-head p{color:#A8B1BB}

.page-head{background:var(--paper);color:var(--text);position:relative;overflow:hidden;
  border-block-end:1px solid var(--rule);
  padding-block:clamp(52px,7vw,90px) clamp(44px,6vw,72px)}
.page-head::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(to right,rgba(16,19,23,.045) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(16,19,23,.045) 1px,transparent 1px);
  background-size:24px 24px;
}
.page-head::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;
  inline-size:45%;background:radial-gradient(50% 80% at 0% 50%,rgba(206,33,39,.07),transparent 72%)}
/* Banner behind the page header. The photo sits on the empty side of the band
   and fades into white under the text, so the heading stays on a clean white
   ground. Hidden on narrow screens, where there is no spare room.
   Each page sets --ph-img to artwork that matches its own subject; the
   services photo is the fallback if a page forgets to pick one. */
.page-head-bg{
  --ph-img:url(../img/services/services-banner.jpg);
  background-repeat:no-repeat,no-repeat;background-size:auto 100%,cover;
}
.ph-about{--ph-img:url(../img/banners/about.jpg)}
.ph-services{--ph-img:url(../img/services/services-banner.jpg)}
.ph-projects{--ph-img:url(../img/banners/projects.jpg)}
.ph-designs{--ph-img:url(../img/banners/designs.jpg)}
.ph-partners{--ph-img:url(../img/banners/partners.jpg)}
.ph-contact{--ph-img:url(../img/banners/contact.jpg)}
html[dir="rtl"] .page-head-bg{
  background-image:
    linear-gradient(to left,#fff 34%,rgba(255,255,255,.86) 55%,rgba(255,255,255,.55) 100%),
    var(--ph-img);
  background-position:center left,center left;
}
html[dir="ltr"] .page-head-bg{
  background-image:
    linear-gradient(to right,#fff 34%,rgba(255,255,255,.86) 55%,rgba(255,255,255,.55) 100%),
    var(--ph-img);
  background-position:center right,center right;
}
@media (max-width:900px){
  .page-head-bg{background-image:none}
}
.page-head .wrap{position:relative;z-index:1}
.page-head h1{font-size:clamp(2rem,4.6vw,3.3rem);letter-spacing:-.025em;margin-block-end:16px}
html[lang="ar"] .page-head h1{letter-spacing:0;line-height:1.3}
.page-head p{color:var(--muted);max-inline-size:68ch;font-size:1.05rem}

.crumb{font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-lt);margin-block-end:18px}
html[lang="ar"] .crumb{letter-spacing:normal;font-size:14.5px}
.crumb a:hover{color:var(--red)}

/* ============================================================
   CREDENTIAL / FEATURE LISTS
   ============================================================ */
.grid{display:grid;gap:1px;background:var(--rule)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.grid > *{background:var(--paper)}
.sec-sheet .grid > *{background:var(--sheet)}
.sec-dark .grid{background:var(--rule-dk)}
.sec-dark .grid > *{background:var(--ink)}

@media (max-width:900px){
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
}

.cell{padding:clamp(24px,3vw,34px)}
.cell h3{font-size:1.16rem;margin-block-end:10px;color:var(--red)}
.cell p{color:var(--text);font-size:.96rem}
.sec-dark .cell p{color:#A8B1BB}
.sec-dark .cell h3{color:#fff}
.cell-no{font-family:var(--f-mono);font-size:17px;letter-spacing:.1em;color:var(--red);
  display:block;margin-block-end:14px;font-weight:700}

.ticks li{
  position:relative;padding-inline-start:32px;padding-block:11px;
  border-block-end:1px solid var(--rule);font-size:1rem;color:var(--red);
}
.ticks li:last-child{border-block-end:0}
.ticks li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:20px;
  inline-size:16px;block-size:2px;background:var(--red);
}
.sec-dark .ticks li{border-color:var(--rule-dk)}

/* ============================================================
   SERVICES
   ============================================================ */
.svc{border-block-start:1px solid var(--rule)}
.svc-item{
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(18px,3vw,40px);
  padding-block:clamp(26px,3.4vw,40px);border-block-end:1px solid var(--rule);
  align-items:start;
}
.svc-item h3{font-size:clamp(1.2rem,2.2vw,1.5rem);letter-spacing:-.01em;color:var(--red)}
html[lang="ar"] .svc-item h3{letter-spacing:0}
.svc-item > div p{color:var(--muted);margin-block-start:12px;font-size:.98rem}
/* Supporting image for a service that has no sub-list, sitting in the
   column the sub-list would otherwise occupy. */
.svc-media{margin:0;border:1px solid var(--rule);background:#fff;line-height:0;
  transition:border-color .2s}
.svc-media[data-lb]{cursor:zoom-in}
.svc-media[data-lb]:hover{border-color:var(--ink)}
/* `contain` on white: these renders sit on white already, so anything narrower
   than 3:2 blends into the frame instead of being cropped. */
.svc-media img{inline-size:100%;aspect-ratio:3/2;object-fit:contain;background:#fff}
/* The sub-list now sits under the description rather than in the side column. */
.svc-item .svc-sub{margin-block-start:20px}
.svc-media-wide img{aspect-ratio:3/2;max-block-size:none}
.svc-sub li{padding-block:8px;border-block-end:1px dashed var(--rule);
  font-size:.97rem;display:flex;gap:12px;align-items:baseline}
.svc-sub li:last-child{border-block-end:0}
.svc-sub li::before{content:"—";color:var(--red);font-weight:700;flex:none}

@media (max-width:860px){
  .svc-item{grid-template-columns:1fr;gap:18px}
}

/* ============================================================
   PROJECT SHEETS (title-block cards)
   ============================================================ */
.sheets{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,32px)}
.sheet{
  background:var(--paper);border:1px solid var(--rule);
  display:flex;flex-direction:column;transition:border-color .25s,box-shadow .25s,transform .25s var(--ease);
}
.sheet:hover{border-color:#A9B2BC;box-shadow:0 14px 40px -22px rgba(16,19,23,.5);transform:translateY(-3px)}
.sheet-img{position:relative;overflow:hidden;background:var(--sheet-2);display:block}
.sheet-img img{aspect-ratio:16/10;object-fit:cover;inline-size:100%;transition:transform .6s var(--ease)}
.sheet:hover .sheet-img img{transform:scale(1.045)}
.sheet-tag{
  position:absolute;inset-block-start:0;inset-inline-start:0;background:var(--ink);color:#fff;
  font-family:var(--f-mono);font-size:12.5px;font-weight:600;letter-spacing:.09em;padding:7px 13px;
}
.sheet-tag b{color:var(--red);font-weight:600}
.sheet-img[data-lb]{cursor:zoom-in}

/* ---------- Extra project photos ---------- */
.shots-lab{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-block-end:9px;
}
html[lang="ar"] .shots-lab{letter-spacing:normal;font-size:13px}
/* Fixed four-column grid: a card with one extra photo gets a tile the same
   size as a card with four, rather than one stretched full-width. */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-block-end:20px}
.shot{
  min-inline-size:0;border:1px solid var(--rule);line-height:0;
  cursor:zoom-in;transition:border-color .2s,opacity .2s;background:var(--sheet-2);
}
.shot:hover{border-color:var(--ink);opacity:.88}
.shot img{aspect-ratio:4/3;object-fit:cover;inline-size:100%}

.sheet-body{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;flex:1}
.sheet-body h3{font-size:1.24rem;margin-block-end:8px;letter-spacing:-.01em}
html[lang="ar"] .sheet-body h3{letter-spacing:0;line-height:1.4}
.sheet-loc{
  font-family:var(--f-mono);font-size:14.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--red);margin-block-end:14px;
}
html[lang="ar"] .sheet-loc{letter-spacing:normal;font-size:16.5px;font-weight:600}
.sheet-desc{color:var(--muted);font-size:.95rem;margin-block-end:20px}

/* small title block inside card */
.tb-mini{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule);margin-block-end:18px}
.tb-mini div{padding:11px 12px;border-inline-end:1px solid var(--rule);min-inline-size:0}
.tb-mini div:last-child{border-inline-end:0}
.tb-mini span{display:block;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--red);margin-block-end:5px;line-height:1.35;
  overflow-wrap:anywhere}
html[lang="ar"] .tb-mini span{letter-spacing:normal;font-size:14px;font-weight:600}
.tb-mini b{font-family:var(--f-disp);font-size:.95rem;font-weight:700;line-height:1.3;display:block;
  overflow-wrap:anywhere}

/* Three columns leave ~68px per field below 430px, too narrow for values like
   "Design + Supervision". Stack them instead of letting them spill. */
@media (max-width:430px){
  .tb-mini{grid-template-columns:1fr}
  .tb-mini div{border-inline-end:0;border-block-end:1px solid var(--rule)}
  .tb-mini div:last-child{border-block-end:0}
}

.scope{margin-block-start:auto}
.scope summary{
  cursor:pointer;list-style:none;font-family:var(--f-mono);font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding-block:12px;
  border-block-start:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:10px;
}
html[lang="ar"] .scope summary{letter-spacing:normal;font-size:14.5px}
.scope summary::-webkit-details-marker{display:none}
.scope summary::after{content:"+";color:var(--red);font-size:17px;font-weight:600;line-height:1}
.scope[open] summary::after{content:"–"}
.scope summary:hover{color:var(--red)}
.scope ul{padding-block-end:6px}
.scope li{font-size:.9rem;color:var(--muted);padding-block:5px;padding-inline-start:18px;position:relative}
.scope li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:13px;
  inline-size:9px;block-size:1px;background:var(--red)}

@media (max-width:820px){.sheets{grid-template-columns:1fr}}

/* Notice shown only while the UAE filter is active. */
.filter-note{
  color:var(--red);font-weight:600;font-size:1.02rem;line-height:1.7;
  border-inline-start:3px solid var(--red);padding-inline-start:16px;
  margin-block:0 32px;max-inline-size:80ch;
}
.filter-note[hidden]{display:none}

/* filter bar */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-block-end:36px}
.filters button{
  font-family:var(--f-mono);font-size:13.5px;font-weight:600;letter-spacing:.07em;
  padding:10px 17px;border:1px solid var(--rule);border-radius:2px;transition:.2s;background:var(--paper);
}
html[lang="ar"] .filters button{letter-spacing:normal;font-size:15px}
.filters button:hover{border-color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ============================================================
   SOFTWARE BAND
   ============================================================ */
.soft{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule-dk);
  border:1px solid var(--rule-dk)}
.soft figure{margin:0;background:var(--ink);padding:0;display:flex;flex-direction:column}
.soft img{inline-size:100%;aspect-ratio:44/18;object-fit:contain;background:var(--ink)}
.soft figcaption{font-family:var(--f-mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted-lt);text-align:center;padding:0 8px 14px}
@media (max-width:900px){.soft{grid-template-columns:repeat(3,1fr)}}
@media (max-width:540px){.soft{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   GALLERY (design samples)
   ============================================================ */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.gal figure{margin:0;border:1px solid var(--rule);background:var(--paper);cursor:zoom-in;
  transition:border-color .25s,box-shadow .25s}
.gal figure:hover{border-color:var(--ink);box-shadow:0 12px 32px -20px rgba(16,19,23,.55)}
/* Engineering drawings are mostly whitespace with detail at the edges —
   `cover` crops them to a blank centre, so the whole sheet must be shown. */
.gal img{aspect-ratio:4/3;object-fit:contain;object-position:center;inline-size:100%;
  background:#fff;padding:10px}
.gal figcaption{padding:13px 15px;border-block-start:1px solid var(--rule);
  display:flex;align-items:baseline;gap:10px}
.gal figcaption b{font-family:var(--f-disp);font-size:.95rem;font-weight:600;flex:1}
.gal figcaption span{font-family:var(--f-mono);font-size:12px;font-weight:600;color:var(--red);letter-spacing:.09em;flex:none}
@media (max-width:860px){.gal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.gal{grid-template-columns:1fr}}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(10,12,15,.95);display:none;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,52px)}
.lb[data-open="true"]{display:flex}
.lb img{max-inline-size:100%;max-block-size:82vh;object-fit:contain;border:1px solid rgba(255,255,255,.2)}
.lb-cap{position:absolute;inset-block-end:20px;inset-inline:0;text-align:center;color:#C4CBD3;
  font-family:var(--f-mono);font-size:13.5px;letter-spacing:.07em;padding-inline:20px}
.lb-x{position:absolute;inset-block-start:16px;inset-inline-end:18px;color:#fff;
  inline-size:44px;block-size:44px;border:1px solid rgba(255,255,255,.3);font-size:22px;
  display:flex;align-items:center;justify-content:center;border-radius:2px}
.lb-x:hover{background:var(--red);border-color:var(--red)}
.lb-nav{position:absolute;inset-block-start:50%;transform:translateY(-50%);color:#fff;
  inline-size:48px;block-size:48px;border:1px solid rgba(255,255,255,.3);font-size:20px;
  display:flex;align-items:center;justify-content:center;border-radius:2px}
.lb-nav:hover{background:var(--red);border-color:var(--red)}
.lb-prev{inset-inline-start:16px}
.lb-next{inset-inline-end:16px}
@media (max-width:640px){.lb-nav{inline-size:40px;block-size:40px}}

/* ============================================================
   PARTNERS
   ============================================================ */
.logos{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.logos div{background:var(--paper);padding:0}
.logos img{inline-size:100%;aspect-ratio:46/22;object-fit:contain;
  filter:grayscale(1) contrast(.95);opacity:.72;transition:.3s var(--ease)}
.logos div:hover img{filter:none;opacity:1}
@media (max-width:900px){.logos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.logos{grid-template-columns:repeat(2,1fr)}}

.certs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.certs figure{margin:0;border:1px solid var(--rule);background:var(--paper);cursor:zoom-in}
.certs img{aspect-ratio:3/4;object-fit:cover;object-position:top;inline-size:100%}
.certs figcaption{padding:14px 16px;border-block-start:1px solid var(--rule);font-size:.92rem;color:var(--muted)}
@media (max-width:820px){.certs{grid-template-columns:1fr;max-inline-size:420px}}

/* ============================================================
   FOUNDER
   ============================================================ */
.founder{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(28px,5vw,64px);align-items:center}
.quote{
  font-family:var(--f-disp);font-size:clamp(1.15rem,2.3vw,1.5rem);line-height:1.55;
  font-weight:600;letter-spacing:-.01em;border-inline-start:3px solid var(--red);
  padding-inline-start:clamp(18px,2.5vw,28px);
}
html[lang="ar"] .quote{letter-spacing:0;line-height:1.75}
.sig{margin-block-start:28px;padding-block-start:20px;border-block-start:1px solid var(--rule)}
.sig strong{display:block;font-family:var(--f-disp);font-size:1.12rem}
.sig span{font-family:var(--f-mono);font-size:13px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--red)}
html[lang="ar"] .sig span{letter-spacing:normal;font-size:15px}
@media (max-width:820px){.founder{grid-template-columns:1fr}}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta{background:var(--paper);color:var(--text);position:relative;overflow:hidden;
  border-block-start:1px solid var(--rule)}
.cta::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(to right,rgba(16,19,23,.045) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(16,19,23,.045) 1px,transparent 1px);
  background-size:24px 24px}
.cta-in{position:relative;z-index:1;padding-block:clamp(48px,6vw,78px);
  display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between}
.cta h2{font-size:clamp(1.5rem,3vw,2.2rem);max-inline-size:22ch;letter-spacing:-.02em}
html[lang="ar"] .cta h2{letter-spacing:0;line-height:1.4}
.cta p{color:var(--muted);margin-block-start:12px;max-inline-size:52ch}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,64px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}

.info li{display:flex;gap:16px;padding-block:18px;border-block-end:1px solid var(--rule);align-items:flex-start}
.info li:first-child{padding-block-start:0}
.info svg{inline-size:19px;block-size:19px;flex:none;color:var(--red);margin-block-start:5px}
.info .k{font-family:var(--f-mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);display:block;margin-block-end:3px}
html[lang="ar"] .info .k{letter-spacing:normal;font-size:13.5px;font-weight:500}
.info .v{font-size:1.02rem;font-weight:500}
.info a.v:hover{color:var(--red)}
.info bdi{unicode-bidi:embed;direction:ltr}

.socials{display:flex;gap:10px;margin-block-start:26px}
.socials a{inline-size:42px;block-size:42px;border:1px solid var(--rule);border-radius:2px;
  display:flex;align-items:center;justify-content:center;transition:.2s}
.socials a:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.socials svg{inline-size:18px;block-size:18px}

.form{border:1px solid var(--rule);padding:clamp(22px,3vw,34px);background:var(--paper)}
.sec-sheet .form{background:var(--paper)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.f-row{grid-template-columns:1fr}}
.field{margin-block-end:16px}
.field label{display:block;font-family:var(--f-mono);font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-block-end:7px}
html[lang="ar"] .field label{letter-spacing:normal;font-size:13.5px;font-weight:500}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{
  inline-size:100%;padding:12px 14px;border:1px solid var(--rule);border-radius:2px;
  font-family:var(--f-body);font-size:16px;background:var(--paper);color:var(--text);
  transition:border-color .2s;
}
.field textarea{min-block-size:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--red);outline-offset:1px}
.hp{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.form-note{font-size:.92rem;color:var(--muted);margin-block-start:14px}
.msg{padding:13px 16px;border-inline-start:3px solid;margin-block-end:20px;font-size:.95rem}
.msg-ok{border-color:#1E7A4C;background:#EAF6F0;color:#14603B}
.msg-err{border-color:var(--red);background:#FDECEC;color:#8C1318}

.map{border:1px solid var(--rule);line-height:0;background:var(--sheet-2)}
.map iframe{inline-size:100%;block-size:clamp(300px,42vw,430px);border:0;display:block}

/* ============================================================
   FOOTER — built as a title block
   ============================================================ */
.ftr{background:var(--ink);color:#B9C1CA;font-size:.94rem}
.ftr-top{display:grid;grid-template-columns:1.75fr 1fr 1fr 1.15fr;gap:clamp(24px,4vw,48px);
  padding-block:clamp(48px,6vw,72px)}
.ftr img.lg{block-size:52px;inline-size:auto;margin-block-end:20px}
.ftr h4{color:#fff;font-size:.95rem;font-family:var(--f-mono);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;margin-block-end:18px}
html[lang="ar"] .ftr h4{letter-spacing:normal;font-size:1.08rem}
.ftr a:hover{color:#fff}
.ftr-links li{padding-block:6px}
.ftr-city{color:var(--red);font-weight:600;margin-inline-end:9px}
.ftr-links a{transition:color .18s}
.ftr p{max-inline-size:42ch}
.ftr bdi{unicode-bidi:embed;direction:ltr}
.ftr-bot{
  border-block-start:1px solid var(--rule-dk);padding-block:22px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  font-family:var(--f-mono);font-size:13px;letter-spacing:.05em;color:var(--muted-lt);
}
html[lang="ar"] .ftr-bot{letter-spacing:normal;font-size:14px}
.ftr-bot a{color:#fff;border-block-end:1px solid var(--red);padding-block-end:1px}
.ftr-bot a:hover{color:var(--red)}
@media (max-width:900px){.ftr-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr-top{grid-template-columns:1fr}}

/* ============================================================
   MOTION
   ============================================================ */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@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}
}

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  .hdr,.lb,.cta,.filters,.socials,.form{display:none!important}
  body{font-size:11pt}
  .hero,.page-head,.sec-dark,.ftr{background:#fff!important;color:#000!important}
  .hero::before,.hero::after,.page-head::before,.page-head::after{display:none}
  .tb-value,.ftr h4{color:#000!important}
}