/* ==========================================================================
   NVC Engineering & Contracting — site record
   Design: a construction record. Every claim carries a number, a date or a
   certificate. Structural device: the dimension line from a working drawing.
   ========================================================================== */

/* ---------- tokens: complete light palette on bare :root ---------- */
:root{
  color-scheme: light dark;
  --bg:        #F1F2F0;   /* cement paper */
  --bg-2:      #E6E9E7;
  --card:      #FFFFFF;
  --fg:        #12222E;   /* structural navy-black */
  --fg-2:      #3D4E59;
  --fg-3:      #6B7A83;
  --rule:      #CBD3D4;
  --rule-2:    #E0E5E4;
  --accent:    #16648C;   /* deep engineering blue */
  --accent-2:  #1B8AB8;
  --gold:      #A9721C;   /* rebar ochre — the one bold accent */
  --gold-soft: #F0E4CC;
  --good:      #2A6E52;
  --warn:      #96551F;
  --shadow:    0 1px 2px rgba(18,34,46,.06), 0 8px 24px -12px rgba(18,34,46,.18);
  --maxw: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  --f-display: 'Archivo', 'IBM Plex Sans', system-ui, sans-serif;
  --f-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --f-ar:      'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme: dark){
    --bg:#0C161D; --bg-2:#111F29; --card:#132330;
    --fg:#E9EEEF; --fg-2:#BAC8CF; --fg-3:#8496A0;
    --rule:#263B49; --rule-2:#1B2E3B;
    --accent:#68B9DE; --accent-2:#8DCDEC;
    --gold:#D8A340; --gold-soft:#3A2E17;
    --good:#5FBE93; --warn:#D89257;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bg:#0C161D; --bg-2:#111F29; --card:#132330;
  --fg:#E9EEEF; --fg-2:#BAC8CF; --fg-3:#8496A0;
  --rule:#263B49; --rule-2:#1B2E3B;
  --accent:#68B9DE; --accent-2:#8DCDEC;
  --gold:#D8A340; --gold-soft:#3A2E17;
  --good:#5FBE93; --warn:#D89257;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--f-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
[dir="rtl"] body, [dir="rtl"] .u-body{font-family:var(--f-ar)}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{font-family:var(--f-ar)}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-2)}
:focus-visible{outline:2.5px solid var(--gold); outline-offset:3px; border-radius:2px}
h1,h2,h3,h4{margin:0; font-family:var(--f-display); font-weight:700;
  line-height:1.12; letter-spacing:-.018em; text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}

/* ---------- the dimension line: this page's structural device ---------- */
.dim{display:flex; align-items:center; gap:.85rem; width:100%}
.dim::before,.dim::after{
  content:""; height:1px; background:var(--rule); flex:1; position:relative;
}
.dim > span{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--fg-3); white-space:nowrap; flex:none;
}
.dim.start::before{flex:none; width:1.75rem}
/* end ticks */
.dim::before{box-shadow:0 0 0 0 transparent}
.tick{position:relative}
.tick::before,.tick::after{
  content:""; position:absolute; top:50%; width:1px; height:9px;
  background:var(--rule); transform:translateY(-50%);
}
.tick::before{inset-inline-start:0} .tick::after{inset-inline-end:0}

/* section eyebrow — a numbered record marker; the numbers are the real
   section order of the company record, not decoration */
.eyebrow{display:flex; align-items:baseline; gap:.9rem; margin-bottom:1.1rem}
.eyebrow b{
  font-family:var(--f-mono); font-weight:500; font-size:.72rem;
  color:var(--gold); letter-spacing:.14em;
}
.eyebrow span{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--fg-3);
}
.eyebrow i{flex:1; height:1px; background:var(--rule); font-style:normal;
  transform-origin:left center}
[dir="rtl"] .eyebrow i{transform-origin:right center}

section{padding-block:clamp(3.5rem, 8vw, 6.5rem); position:relative}
section + section{border-top:1px solid var(--rule-2)}
.sec-title{font-size:clamp(1.75rem, 4vw, 2.85rem); max-width:22ch; margin-bottom:.9rem}
.sec-lead{color:var(--fg-2); max-width:62ch; font-size:1.02rem}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--rule-2);
}
.bar{display:flex; align-items:center; gap:1.25rem; height:70px}
.brand{display:flex; align-items:center; gap:.7rem; flex:none}
.brand img{height:42px; width:auto}
.brand .bn{font-family:var(--f-display); font-weight:800; font-size:1.12rem;
  letter-spacing:.02em; color:var(--fg); line-height:1}
.brand .bs{font-family:var(--f-mono); font-size:.56rem; letter-spacing:.2em;
  color:var(--fg-3); text-transform:uppercase; margin-top:2px}
nav{display:flex; gap:1.15rem; margin-inline-start:auto; flex-wrap:nowrap}
nav a{font-size:.88rem; white-space:nowrap; color:var(--fg-2); font-weight:500; padding-block:.35rem;
  border-bottom:1.5px solid transparent}
nav a:hover{color:var(--fg); border-bottom-color:var(--gold)}
.tools{display:flex; align-items:center; gap:.5rem; flex:none; margin-inline-start:auto}
nav + .tools{margin-inline-start:0}
.btn{
  display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--rule);
  background:var(--card); color:var(--fg); font:inherit; font-size:.82rem;
  font-weight:600; padding:.5rem .85rem; cursor:pointer; border-radius:1px;
  transition:background .18s, border-color .18s, color .18s;
}
.btn:hover{border-color:var(--fg-3); color:var(--fg)}
.btn.mono{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase}
.btn.solid{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.btn.solid:hover{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.wa{background:var(--good); border-color:var(--good); color:#fff}
.btn.wa:hover{filter:brightness(1.12); color:#fff}
.burger{display:none}

/* ---------- hero ---------- */
.hero{padding:0; border:0; position:relative; min-height:min(88vh, 760px);
  display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden}
.hero-img{position:absolute; inset:0}
.hero-img img{width:100%; height:100%; object-fit:cover}
.hero-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,18,26,.94) 0%, rgba(8,18,26,.78) 34%, rgba(8,18,26,.34) 68%, rgba(8,18,26,.5) 100%);
}
.hero-in{position:relative; z-index:2; padding-block:clamp(2.5rem,6vw,4.5rem) 0; color:#EEF3F5}
.hero .kicker{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:#EBC169; display:flex; align-items:center; gap:.8rem; margin-bottom:1.4rem;
}
.hero .kicker::after{content:""; height:1px; width:min(180px,22vw); background:rgba(235,193,105,.55)}
.hero h1{
  font-size:clamp(2.1rem, 6.2vw, 4.4rem); color:#fff; max-width:17ch;
  letter-spacing:-.028em; line-height:1.03;
}
.hero h1 em{font-style:normal; color:#EBC169}
.hero .sub{margin-top:1.35rem; max-width:56ch; color:#C9D6DD; font-size:clamp(1rem,1.6vw,1.13rem)}
.hero .acts{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem}
.hero .btn{padding:.72rem 1.2rem; font-size:.88rem}
.hero .btn:not(.wa):not(.solid){background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); color:#fff}
.hero .btn:not(.wa):not(.solid):hover{background:rgba(255,255,255,.16)}
.hero .btn.solid{background:#EBC169; border-color:#EBC169; color:#12222E}
.hero .btn.solid:hover{background:#fff; border-color:#fff; color:#12222E}

/* the record strip: the hero's thesis, stated in numbers */
.strip{
  position:relative; z-index:2; margin-top:clamp(2.5rem,6vw,4rem);
  border-top:1px solid rgba(255,255,255,.22); background:rgba(8,18,26,.55);
  backdrop-filter:blur(6px);
}
.strip .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.strip .cell{padding:1.1rem 1.1rem 1.25rem; border-inline-start:1px solid rgba(255,255,255,.14)}
.strip .cell:first-child{border-inline-start:0; padding-inline-start:0}
.strip .v{font-family:var(--f-mono); font-size:clamp(1.15rem,2.6vw,1.7rem); font-weight:600;
  color:#fff; letter-spacing:-.02em; line-height:1.1}
.strip .k{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:#9FB2BC; margin-top:.4rem}

/* ---------- status band ---------- */
.status{background:var(--bg-2)}
.status-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:start}
.live-card{background:var(--card); border:1px solid var(--rule); box-shadow:var(--shadow); padding:1.5rem}
.live-tag{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-mono);
  font-size:.63rem; letter-spacing:.18em; text-transform:uppercase; color:var(--good); font-weight:600}
.live-dot{width:7px; height:7px; border-radius:50%; background:var(--good); flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); animation:pulse 2.6s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent)}
  70%{box-shadow:0 0 0 9px transparent} 100%{box-shadow:0 0 0 0 transparent}
}
.live-card h3{font-size:1.2rem; margin:.7rem 0 .3rem}
.live-card .loc{color:var(--fg-3); font-size:.9rem}
.facts{margin-top:1.1rem; border-top:1px solid var(--rule-2)}
.facts div{display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0;
  border-bottom:1px solid var(--rule-2); font-size:.87rem}
.facts dt{color:var(--fg-3)}
.facts dd{margin:0; font-family:var(--f-mono); font-weight:500; text-align:end}
.timeline{margin-top:1.75rem; display:grid; gap:0}
.tl{display:grid; grid-template-columns:auto 1fr; gap:1.1rem; padding-bottom:1.5rem; position:relative}
.tl:last-child{padding-bottom:0}
.tl::before{content:""; position:absolute; inset-inline-start:5px; top:16px; bottom:-2px;
  width:1px; background:var(--rule)}
.tl:last-child::before{display:none}
.tl .pt{width:11px; height:11px; border:2px solid var(--accent); background:var(--bg-2);
  border-radius:50%; margin-top:5px; z-index:1}
.tl.off .pt{border-color:var(--warn)}
.tl.now .pt{border-color:var(--good); background:var(--good)}
.tl .yr{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; color:var(--gold); font-weight:500}
.tl .tx{font-size:.94rem; color:var(--fg-2); margin-top:.15rem}

/* ---------- generic grids ---------- */
.cols-2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem)}
.cols-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}

/* ---------- services ---------- */
.svc-group + .svc-group{margin-top:2.75rem}
.svc-head{display:flex; align-items:baseline; gap:.9rem; margin-bottom:.6rem}
.svc-head h3{font-size:1.12rem}
.svc-head .n{font-family:var(--f-mono); font-size:.7rem; color:var(--gold); letter-spacing:.14em}
.svc-list{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:0 2.5rem}
.svc-list li{display:grid; grid-template-columns:2.4rem 1fr; gap:.35rem;
  padding:.72rem 0; border-bottom:1px solid var(--rule-2); font-size:.94rem; align-items:baseline}
.svc-list li .i{font-family:var(--f-mono); font-size:.7rem; color:var(--fg-3)}
.badge-new{display:inline-block; font-family:var(--f-mono); font-size:.56rem; letter-spacing:.14em;
  text-transform:uppercase; background:var(--gold-soft); color:var(--gold);
  padding:.18rem .45rem; margin-inline-start:.5rem; vertical-align:.12em; font-weight:600}

/* ---------- projects ---------- */
.proj{display:grid; gap:clamp(2rem,5vw,3.5rem)}
.pcard{display:grid; grid-template-columns:1.05fr .95fr; gap:0;
  background:var(--card); border:1px solid var(--rule); box-shadow:var(--shadow)}
.pcard:nth-child(even) .pshot{order:2}
.pshot{position:relative; min-height:280px; overflow:hidden; background:var(--bg-2); cursor:zoom-in}
.pshot img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pshot:hover img{transform:scale(1.035)}
.pshot .count{position:absolute; inset-block-end:.75rem; inset-inline-end:.75rem;
  background:rgba(8,18,26,.8); color:#fff; font-family:var(--f-mono); font-size:.62rem;
  letter-spacing:.12em; padding:.34rem .6rem; backdrop-filter:blur(4px)}
.pbody{padding:clamp(1.4rem,3vw,2.1rem); display:flex; flex-direction:column}
.pstate{display:inline-flex; align-items:center; gap:.45rem; font-family:var(--f-mono);
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--fg-3)}
.pstate.live{color:var(--good)} .pstate.cert{color:var(--gold)}
.pcard h3{font-size:clamp(1.15rem,2.2vw,1.5rem); margin:.65rem 0 .3rem}
.pcard .where{color:var(--fg-3); font-size:.88rem}
.pcard .desc{color:var(--fg-2); font-size:.94rem; margin-top:.9rem}
.pspecs{margin-top:auto; padding-top:1.3rem; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:.9rem 1rem;
  border-top:1px solid var(--rule-2)}
.pspecs div .sv{font-family:var(--f-mono); font-size:.98rem; font-weight:600; color:var(--fg)}
.pspecs div .sk{font-family:var(--f-mono); font-size:.57rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-3); margin-top:.2rem}

/* ---------- record table ---------- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--rule); background:var(--card)}
table{width:100%; border-collapse:collapse; min-width:640px}
thead th{background:var(--bg-2); font-family:var(--f-mono); font-weight:600; font-size:.63rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-2); text-align:start;
  padding:.75rem .9rem; border-bottom:1px solid var(--rule)}
tbody td{padding:.68rem .9rem; border-bottom:1px solid var(--rule-2); font-size:.88rem; vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--bg-2)}
td.n, th.n{font-family:var(--f-mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.pill{display:inline-block; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.2rem .5rem; font-weight:600;
  background:var(--bg-2); color:var(--fg-2); white-space:nowrap}
.pill.ok{background:color-mix(in srgb,var(--good) 15%,transparent); color:var(--good)}
.pill.gd{background:var(--gold-soft); color:var(--gold)}

/* ---------- capability ---------- */
.cap{background:var(--card); border:1px solid var(--rule); padding:1.5rem; display:flex;
  flex-direction:column; gap:.55rem}
.cap .ci{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}
.cap h3{font-size:1.1rem}
.cap p{color:var(--fg-2); font-size:.92rem}
.cap ul{margin:.3rem 0 0; padding:0; list-style:none; display:grid; gap:.4rem}
.cap li{font-size:.87rem; color:var(--fg-2); display:grid; grid-template-columns:auto 1fr; gap:.55rem}
.cap li::before{content:"—"; color:var(--gold); font-family:var(--f-mono)}

/* ---------- evidence ---------- */
.certs{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.certcard{background:var(--card); border:1px solid var(--rule); padding:.85rem; box-shadow:var(--shadow)}
.certcard .fr{border:1px solid var(--rule-2); background:#fff; overflow:hidden; cursor:zoom-in}
.certcard img{width:100%; height:230px; object-fit:cover; object-position:top center}
.certcard h4{font-size:.97rem; margin:.8rem 0 .25rem}
.certcard .by{font-size:.8rem; color:var(--fg-3)}
.certcard .dt{font-family:var(--f-mono); font-size:.66rem; color:var(--gold); letter-spacing:.1em; margin-top:.45rem}
.regs{margin-top:2.25rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:0; border:1px solid var(--rule); background:var(--card)}
.regs div{padding:1rem 1.15rem; border-inline-start:1px solid var(--rule-2)}
.regs div:first-child{border-inline-start:0}
.regs .rk{font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3)}
.regs .rv{font-family:var(--f-mono); font-size:.95rem; font-weight:600; margin-top:.3rem}

/* ---------- clients ---------- */
.clients{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:0;
  border-top:1px solid var(--rule)}
.clients div{padding:1rem 1.2rem; border-bottom:1px solid var(--rule-2);
  border-inline-start:1px solid var(--rule-2); font-size:.92rem; color:var(--fg-2)}
.clients div:first-child{border-inline-start:0}
.sectors{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2rem}
.sector{border-top:2px solid var(--gold); padding-top:.9rem}
.sector h4{font-size:1rem; margin-bottom:.3rem}
.sector p{font-size:.87rem; color:var(--fg-2)}

/* ---------- contact ---------- */
.contact{background:var(--bg-2)}
.cgrid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,3.5rem)}
form{display:grid; gap:.9rem}
label{display:grid; gap:.35rem; font-family:var(--f-mono); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3)}
input,textarea,select{
  font:inherit; font-size:.95rem; padding:.7rem .8rem; border:1px solid var(--rule);
  background:var(--card); color:var(--fg); border-radius:1px; width:100%;
}
[dir="rtl"] input,[dir="rtl"] textarea,[dir="rtl"] select{font-family:var(--f-ar)}
input:focus,textarea:focus,select:focus{border-color:var(--accent); outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
textarea{min-height:120px; resize:vertical}
.form-note{font-size:.8rem; color:var(--fg-3)}
.cinfo{display:grid; gap:0; align-content:start}
.cinfo a, .cinfo div.row{display:grid; grid-template-columns:8.5rem 1fr; gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--rule-2); color:var(--fg); font-size:.94rem}
.cinfo .lk{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-3); padding-top:.2rem}
.cinfo .lv{font-weight:500}
.cinfo a:hover .lv{color:var(--accent)}
.socials{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem}
.soc{display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--rule);
  padding:.5rem .8rem; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-2); background:var(--card)}
.soc:hover{border-color:var(--gold); color:var(--fg)}
.soc svg{width:14px; height:14px; fill:currentColor; flex:none}

/* ---------- footer ---------- */
footer{background:var(--fg); color:#C6D2D8; padding-block:3rem 2rem}
:root[data-theme="dark"] footer{background:#08121A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) footer{background:#08121A}}
footer .fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; padding-bottom:2rem;
  border-bottom:1px solid rgba(255,255,255,.13)}
footer h4{color:#fff; font-size:.68rem; font-family:var(--f-mono); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; margin-bottom:1rem}
footer a{color:#C6D2D8; font-size:.9rem; display:block; padding:.28rem 0}
footer a:hover{color:#EBC169}
footer .fb{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  padding-top:1.5rem; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; color:#8497A2}

/* ---------- whatsapp float ---------- */
.wafab{
  position:fixed; inset-block-end:1.4rem; inset-inline-end:1.4rem; z-index:70;
  display:inline-flex; align-items:center; gap:.6rem; background:#1E9E63; color:#fff;
  padding:.8rem 1.15rem; box-shadow:0 6px 26px -6px rgba(0,0,0,.5); font-weight:600;
  font-size:.86rem; border-radius:2px;
}
.wafab:hover{background:#178a55; color:#fff}
.wafab svg{width:19px; height:19px; fill:currentColor}

/* ---------- lightbox ---------- */
.lb{position:fixed; inset:0; z-index:100; background:rgba(6,14,20,.96);
  display:none; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem)}
.lb[open], .lb.on{display:flex}
.lb figure{margin:0; max-width:1100px; width:100%}
.lb img{width:100%; max-height:76vh; object-fit:contain}
.lb figcaption{color:#C9D6DD; font-size:.88rem; margin-top:.9rem; display:flex;
  justify-content:space-between; gap:1rem; align-items:center}
.lb .idx{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; color:#8497A2}
.lb button{position:absolute; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28);
  color:#fff; width:44px; height:44px; cursor:pointer; font-size:1.2rem; border-radius:2px}
.lb button:hover{background:rgba(255,255,255,.2)}
.lb .prev{inset-inline-start:clamp(.5rem,2vw,2rem)}
.lb .next{inset-inline-end:clamp(.5rem,2vw,2rem)}
.lb .close{inset-block-start:clamp(.5rem,2vw,1.5rem); inset-inline-end:clamp(.5rem,2vw,1.5rem)}

/* ---------- reveal ---------- */
.js .rv{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1; transform:none}
.js .eyebrow i{transform:scaleX(0); transition:transform .9s cubic-bezier(.2,.7,.2,1) .1s}
.rv.in .eyebrow i, .eyebrow.in i{transform:scaleX(1)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .pcard{grid-template-columns:1fr}
  .pshot{min-height:230px}
  .status-grid,.cgrid,.cols-2{grid-template-columns:1fr}
  .certs{grid-template-columns:1fr 1fr}
  .sectors,.cols-3{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  nav{display:none}
  nav.open{display:flex; position:absolute; inset-block-start:70px; inset-inline:0;
    flex-direction:column; background:var(--bg); border-bottom:1px solid var(--rule);
    padding:1rem var(--gutter) 1.4rem; gap:.2rem}
  nav.open a{padding:.6rem 0; border-bottom:1px solid var(--rule-2)}
  .burger{display:inline-flex; margin-inline-start:auto}
  .tools .lang{margin-inline-start:0}
  .tools .btn.wa{display:none}          /* the floating button already covers this */
  .brand .bs{display:none}
  .brand img{height:34px}
  .bar{gap:.6rem}
  .strip .wrap{grid-template-columns:1fr 1fr}
  .strip .cell:nth-child(3){border-inline-start:0; padding-inline-start:0}
  .strip .cell{border-block-start:1px solid rgba(255,255,255,.12)}
  .strip .cell:nth-child(-n+2){border-block-start:0}
  .certs{grid-template-columns:1fr}
  .cinfo a,.cinfo div.row{grid-template-columns:1fr; gap:.2rem}
  .wafab span{display:none}
  .wafab{padding:.9rem; border-radius:50%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none}
  .eyebrow i{transform:scaleX(1)}
}
@media print{header,.wafab,.lb,nav{display:none}}

/* ---------- Arabic: mono has no Arabic, and letter-spacing breaks joining ---------- */
[dir="rtl"] .strip .k, [dir="rtl"] .eyebrow span, [dir="rtl"] .pstate,
[dir="rtl"] .pspecs .sk, [dir="rtl"] .pill, [dir="rtl"] .certcard .dt,
[dir="rtl"] .cinfo .lk, [dir="rtl"] label, [dir="rtl"] .cap .ci,
[dir="rtl"] .regs .rk, [dir="rtl"] .live-tag, [dir="rtl"] .facts dd,
[dir="rtl"] .regs .rv, [dir="rtl"] .tl .yr, [dir="rtl"] footer h4,
[dir="rtl"] .soc, [dir="rtl"] .svc-head .n, [dir="rtl"] thead th,
[dir="rtl"] .btn.mono, [dir="rtl"] .lb .idx{
  font-family:var(--f-ar); letter-spacing:0; text-transform:none;
}
[dir="rtl"] .facts dd, [dir="rtl"] .regs .rv, [dir="rtl"] td.n{
  font-variant-numeric:tabular-nums;
}
[dir="rtl"] .strip .v, [dir="rtl"] .pspecs .sv, [dir="rtl"] .cap li{letter-spacing:0}
[dir="rtl"] .eyebrow b{letter-spacing:0}

/* ==========================================================================
   MOTION — every effect below is tied to something the content is doing
   ========================================================================== */

/* scroll progress: how far through the record you are */
.prog{position:fixed; inset-block-start:0; inset-inline:0; height:2.5px; z-index:80;
  background:transparent; pointer-events:none}
.prog i{display:block; height:100%; width:0%; background:var(--gold);
  transform-origin:left center; transition:width .08s linear}
[dir="rtl"] .prog i{margin-inline-start:auto}

/* nav marks the section you are reading */
nav a.here{color:var(--fg); border-bottom-color:var(--gold)}

/* hero: a slow push in, so the building keeps moving while you read */
.kb img{animation:kb 26s ease-out forwards}
@keyframes kb{from{transform:scale(1.075)} to{transform:scale(1)}}
.hero .kicker,.hero h1,.hero .sub,.hero .acts{opacity:0; animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero .kicker{animation-delay:.12s} .hero h1{animation-delay:.24s}
.hero .sub{animation-delay:.40s}   .hero .acts{animation-delay:.54s}
.strip .cell{opacity:0; animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.strip .cell:nth-child(1){animation-delay:.66s} .strip .cell:nth-child(2){animation-delay:.74s}
.strip .cell:nth-child(3){animation-delay:.82s} .strip .cell:nth-child(4){animation-delay:.90s}
@keyframes rise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}

/* project photographs drift a little as they pass — depth, not decoration */
.pshot img{will-change:transform}

/* staggered rows: the list builds itself as you arrive */
.js .svc-list li,.js .clients div,.js tbody tr{opacity:0; transform:translateY(10px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1)}
.js .svc-list li.in,.js .clients div.in,.js tbody tr.in{opacity:1; transform:none}

/* buttons and cards answer the pointer */
.btn{transition:background .18s, border-color .18s, color .18s, transform .18s}
.btn:active{transform:translateY(1px)}
.pcard{transition:box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.2,1)}
.pcard:hover{box-shadow:0 2px 4px rgba(18,34,46,.07), 0 22px 48px -22px rgba(18,34,46,.34)}
.cap-hint{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(8,18,26,.34); opacity:0; transition:opacity .3s ease; pointer-events:none}
.pshot:hover .cap-hint{opacity:1}
.cap-hint span{border:1px solid rgba(255,255,255,.7); color:#fff; font-family:var(--f-mono);
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; padding:.55rem 1rem;
  background:rgba(8,18,26,.5)}
.certcard .fr img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.certcard:hover .fr img{transform:scale(1.03)}
.soc{transition:border-color .2s, color .2s, transform .2s}
.soc:hover{transform:translateY(-2px)}
.tl .pt{transition:transform .3s ease}
.timeline:hover .tl.now .pt{transform:scale(1.25)}

/* ---------- before / after comparison ---------- */
.ba{border:1px solid var(--rule); background:var(--card); box-shadow:var(--shadow);
  padding:clamp(1.2rem,3vw,2rem)}
.ba-head{margin-bottom:1.2rem; max-width:60ch}
.ba-head h3{font-size:clamp(1.15rem,2.4vw,1.6rem); margin-bottom:.4rem}
.ba-head p{color:var(--fg-2); font-size:.94rem}
.ba-stage{position:relative; overflow:hidden; aspect-ratio:16/9; background:var(--bg-2);
  cursor:ew-resize; user-select:none; touch-action:pan-y}
.ba-stage:focus-visible{outline:2.5px solid var(--gold); outline-offset:3px}
.ba-after,.ba-before{position:absolute; inset:0}
.ba-before{width:50%; overflow:hidden; border-inline-end:2px solid var(--gold)}
.ba-after img,.ba-before img{width:100%; height:100%; object-fit:cover}
.ba-before img{width:var(--stageW,100vw); max-width:none}
.ba-tag{position:absolute; inset-block-end:1rem; background:rgba(8,18,26,.82); color:#fff;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.42rem .7rem; backdrop-filter:blur(4px); white-space:nowrap}
.ba-tag.start{inset-inline-start:1rem}
.ba-tag.end{inset-inline-end:1rem}
[dir="rtl"] .ba-tag{letter-spacing:0; text-transform:none; font-family:var(--f-ar)}
.ba-handle{position:absolute; inset-block:0; inset-inline-start:50%; width:2px;
  background:var(--gold); transform:translateX(-1px); pointer-events:none}
.ba-grip{position:absolute; inset-block-start:50%; inset-inline-start:50%;
  transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%;
  background:var(--gold); color:#10202E; display:flex; align-items:center; justify-content:center;
  font-size:1rem; font-weight:700; box-shadow:0 4px 16px rgba(0,0,0,.35)}
@media (max-width:760px){ .ba-stage{aspect-ratio:4/3} .ba-tag{font-size:.55rem} }

@media (prefers-reduced-motion:reduce){
  .kb img{animation:none}
  .hero .kicker,.hero h1,.hero .sub,.hero .acts,.strip .cell{opacity:1; animation:none}
  .js .svc-list li,.js .clients div,.js tbody tr{opacity:1; transform:none}
  .prog i{transition:none}
}