@charset "UTF-8";
/* ============================================================================
   HANDASAT AL TATWEER — "THE LIVE GRID"
   Custom design system. No framework, no template, no page builder.
   Logical properties throughout so AR (RTL) and EN (LTR) share one stylesheet.
   ========================================================================= */

/* --------------------------------------------------------------------------
   1. TOKENS
   ----------------------------------------------------------------------- */
:root{
  /* brand */
  --ink:#050F1A;
  --deep:#071521;
  --deep-2:#0A1C2B;
  --navy:#0B2343;
  --navy-2:#102D55;
  --blue:#1F5EA8;
  --blue-lift:#3D82D4;
  --accent:#F5A11A;
  --accent-deep:#D8860B;
  --paper:#F4F6F8;
  --white:#FFFFFF;

  /* neutrals, biased toward the brand blue rather than pure grey */
  --n-050:#F7F9FB;
  --n-100:#E9EEF4;
  --n-200:#D5DEE8;
  --n-300:#B4C3D3;
  --n-500:#6F8296;
  --n-700:#37475A;

  /* semantic surfaces */
  --bg:var(--paper);
  --surface:var(--white);
  --text:#0C1B2A;
  --text-soft:#4A5B6D;
  --rule:#D7E0EA;

  /* dark zone */
  --d-text:#DCE7F3;
  --d-soft:#8AA4C2;
  --d-rule:#173A62;

  /* type */
  /* Self-hosted (assets/fonts). Each stack ends in "Plex Arabic" so an Arabic
     glyph inside a Latin-styled element still renders in the site's own face
     rather than dropping to Tahoma / Segoe UI on the reader's machine. */
  --ff-ar:"Plex Arabic",system-ui,sans-serif;
  --ff-en:"Manrope Local","Plex Arabic",system-ui,sans-serif;
  --ff-mono:"Plex Mono Local","Plex Arabic",ui-monospace,SFMono-Regular,monospace;
  --ff-body:var(--ff-ar);
  --ff-display:var(--ff-ar);

  /* scale */
  --t-mega:clamp(2.6rem,8.4vw,7.4rem);
  --t-h1:clamp(2.2rem,5.6vw,4.6rem);
  --t-h2:clamp(1.75rem,3.8vw,3.1rem);
  --t-h3:clamp(1.25rem,2.1vw,1.85rem);
  --t-h4:clamp(1.05rem,1.5vw,1.3rem);
  --t-body:clamp(1rem,1.02vw,1.075rem);
  --t-small:.9rem;
  --t-mono:.688rem;

  /* layout */
  --shell:1400px;
  --pad:clamp(20px,4vw,64px);
  --rail:76px;
  --sec-y:clamp(72px,10vw,168px);
  --sec-y-lg:clamp(96px,13vw,208px);

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.9s;
}

/* EN switches display + body faces */
html[lang="en"]{
  --ff-body:var(--ff-en);
  --ff-display:var(--ff-en);
  /* Sized so the longest hero word ("ENGINEERING") clears the type column
     without being clipped by the reveal mask. */
  --t-mega:clamp(2.35rem,5.6vw,5rem);
}
/* Arabic sets more ink per glyph and needs a slightly smaller display scale
   to hold the same visual weight as the uppercase Latin lock-up. */
html[lang="ar"]{
  --t-mega:clamp(2.15rem,6.4vw,5.5rem);
  --t-h1:clamp(1.9rem,4.4vw,3.5rem);
  --t-h2:clamp(1.5rem,3.1vw,2.5rem);
}

/* --------------------------------------------------------------------------
   2. RESET
   ----------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:var(--t-body);
  line-height:1.85;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
html[lang="en"] body{line-height:1.72}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0;font-weight:700;line-height:1.14;text-wrap:balance;letter-spacing:-.005em}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{letter-spacing:-.025em;line-height:1.02}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--deep)}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   ----------------------------------------------------------------------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.shell--tight{max-width:1120px}

.section{position:relative;padding-block:var(--sec-y)}
.section--lg{padding-block:var(--sec-y-lg)}
.section--flush{padding-block:0}

/* tonal zones -------------------------------------------------------------- */
.tone-light{background:var(--paper);color:var(--text)}
.tone-white{background:var(--white);color:var(--text)}
.tone-dark{background:var(--navy);color:var(--d-text)}
.tone-deep{background:var(--deep);color:var(--d-text)}
.tone-dark,.tone-deep{--text:var(--d-text);--text-soft:var(--d-soft);--rule:var(--d-rule)}

/* the spine — the single continuous line that ties the page together ------- */
.spine{
  position:absolute;inset-block:0;inset-inline-start:calc(var(--pad) + var(--rail) / 2);
  width:1px;background:var(--rule);pointer-events:none;z-index:0;
}
.spine::before{
  content:"";position:absolute;inset-inline-start:-4px;inset-block-start:0;
  width:9px;height:9px;border-radius:50%;background:var(--accent);
}
@media (max-width:1100px){.spine{display:none}}

.railed{position:relative}
.railed > .shell{position:relative;z-index:1}

/* the vertical section index that rides the spine -------------------------- */
.rail-mark{
  position:absolute;inset-inline-start:var(--pad);inset-block-start:var(--sec-y);
  width:var(--rail);display:flex;flex-direction:column;align-items:center;gap:14px;
  z-index:2;pointer-events:none;
}
.rail-mark span{
  font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.22em;
  color:var(--text-soft);writing-mode:vertical-rl;text-orientation:mixed;
}
.rail-mark i{width:7px;height:7px;background:var(--accent);border-radius:50%;font-style:normal}
@media (max-width:1100px){.rail-mark{display:none}}

.has-rail{padding-inline-start:calc(var(--rail) + 24px)}
@media (max-width:1100px){.has-rail{padding-inline-start:0}}

/* --------------------------------------------------------------------------
   4. TYPE COMPONENTS
   ----------------------------------------------------------------------- */
.h-display{font-family:var(--ff-display);font-size:var(--t-h2);font-weight:700}
.h-display .line{display:block;overflow:hidden}
.h-display .line__in{display:block}
.h-mega{font-size:var(--t-mega);line-height:.98;font-weight:800}
html[lang="ar"] .h-mega{line-height:1.16;font-weight:700}
.h-1{font-size:var(--t-h1)}
.h-3{font-size:var(--t-h3)}
.h-4{font-size:var(--t-h4);font-weight:600}

.lede{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.78;color:var(--text-soft);max-width:64ch}
.body-w{max-width:66ch}
.prose p + p{margin-block-start:1.1em}
.prose{color:var(--text-soft)}

.tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
}
.tag--muted{color:var(--text-soft)}
.tag--blue{color:var(--blue-lift)}

.eyebrow{
  display:flex;align-items:center;gap:16px;margin-block-end:clamp(24px,3vw,42px);
  font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.22em;text-transform:uppercase;
}
.eyebrow__idx{color:var(--accent);font-weight:500}
.eyebrow__txt{color:var(--text-soft)}
.eyebrow__rule{flex:1;height:1px;background:var(--rule);transform-origin:var(--rule-origin,left)}
html[dir="rtl"] .eyebrow__rule{transform-origin:right}

/* the outline mega-numeral used for sectors and ranked lists --------------- */
.numeral{
  font-family:var(--ff-en);font-weight:800;line-height:.8;
  font-size:clamp(3.2rem,7vw,7.5rem);
  color:transparent;-webkit-text-stroke:1.5px var(--blue);
  letter-spacing:-.04em;
}
.tone-dark .numeral,.tone-deep .numeral{-webkit-text-stroke-color:var(--blue-lift)}
.numeral--solid{color:var(--accent);-webkit-text-stroke:0}
.numeral--sm{font-size:clamp(2rem,3.4vw,3.2rem)}

/* --------------------------------------------------------------------------
   5. BUTTONS
   ----------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 28px;border:1px solid currentColor;
  font-family:var(--ff-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  position:relative;overflow:hidden;transition:color .4s var(--ease),border-color .4s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;background:currentColor;
  transform:scaleX(0);transform-origin:inline-start;transition:transform .5s var(--ease);z-index:0;
}
.btn > *{position:relative;z-index:1}
.btn:hover::after{transform:scaleX(1)}
.btn__arrow{width:14px;height:9px;flex:none}
html[dir="rtl"] .btn__arrow{transform:scaleX(-1)}

.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--deep)}
.btn--primary::after{background:var(--deep)}
.btn--primary:hover{color:var(--accent)}

.btn--ghost{color:var(--text)}
.btn--ghost::after{background:var(--text)}
.btn--ghost:hover{color:var(--bg)}
.tone-dark .btn--ghost,.tone-deep .btn--ghost{color:var(--d-text)}
.tone-dark .btn--ghost:hover,.tone-deep .btn--ghost:hover{color:var(--navy)}

.link-more{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-mono);
  font-size:var(--t-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  padding-block-end:6px;border-block-end:1px solid currentColor;
}

/* --------------------------------------------------------------------------
   6. MEDIA COMPONENT — photo + technical overlay
   ----------------------------------------------------------------------- */
.media{position:relative;margin:0;overflow:hidden;background:var(--deep);isolation:isolate}
.media--16-9{aspect-ratio:16/9}
.media--3-4{aspect-ratio:3/4}
.media--4-3{aspect-ratio:4/3}
.media--1-1{aspect-ratio:1/1}
.media--21-9{aspect-ratio:21/9}
.media--full{aspect-ratio:auto;height:100%}
.media__inner{position:absolute;inset:-6% 0;will-change:transform}
.media__plate,.media__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media__img{z-index:1}
.media__grade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,35,67,.20) 0%,rgba(7,21,33,.04) 40%,rgba(5,15,26,.62) 100%);
  mix-blend-mode:multiply;
}
.media__grid{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(140,190,240,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(140,190,240,.10) 1px,transparent 1px);
  background-size:48px 48px;
}
.media__bracket{position:absolute;z-index:4;width:22px;height:22px;pointer-events:none}
.media__bracket--a{inset-block-start:14px;inset-inline-start:14px;border-block-start:2px solid var(--accent);border-inline-start:2px solid var(--accent)}
.media__bracket--b{inset-block-end:14px;inset-inline-end:14px;border-block-end:2px solid var(--accent);border-inline-end:2px solid var(--accent)}
.media__cap{
  position:absolute;z-index:5;inset-block-end:16px;inset-inline-start:20px;
  font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.14em;text-transform:uppercase;
  color:#EAF2FB;text-shadow:0 1px 8px rgba(0,0,0,.6);padding-inline-end:52px;
}
.media--flat .media__grade{background:linear-gradient(180deg,rgba(11,35,67,.18),rgba(5,15,26,.52))}

/* --------------------------------------------------------------------------
   7. HEADER
   ----------------------------------------------------------------------- */
.hdr{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:90;
  transition:background .45s var(--ease),border-color .45s var(--ease),padding .45s var(--ease);
  border-block-end:1px solid transparent;
  padding-block:18px;
}
.hdr__in{display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);min-height:48px}
.logo-link{flex:none}
.hdr.is-stuck{
  background:rgba(7,21,33,.90);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-block-end-color:var(--d-rule);padding-block:11px;
}

.logo{display:inline-flex;align-items:center;gap:12px;flex:none}
.logo__mark{width:42px;height:31px;flex:none}
.logo__type{display:flex;flex-direction:column;line-height:1.1}
.logo__name{font-family:var(--ff-en);font-weight:800;font-size:.84rem;letter-spacing:.05em;color:#fff;white-space:nowrap}
.logo__sub{font-family:var(--ff-en);font-weight:500;font-size:.52rem;letter-spacing:.04em;color:var(--d-soft);white-space:nowrap}
.logo__img{max-height:42px;width:auto}
@media (max-width:640px){.logo__type{display:none}}

/* Navigation: each item sits in its own cell divided by a hairline, so the
   labels read as a list of destinations instead of one run-on string. */
.nav{display:flex;align-items:stretch;margin-inline-start:auto;height:40px}
.nav__link{
  display:flex;align-items:center;flex:0 1 auto;min-width:0;
  font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:#C6D8EA;position:relative;white-space:nowrap;
  padding-inline:clamp(12px,1.25vw,20px);
  border-inline-start:1px solid rgba(160,195,235,.22);
  transition:color .3s var(--ease),background .3s var(--ease);
}
.nav__link:first-child{border-inline-start:0}
html[lang="ar"] .nav__link{
  font-family:var(--ff-ar);font-size:.94rem;letter-spacing:0;font-weight:500;
}
.nav__link::after{
  content:"";position:absolute;inset-block-end:-1px;inset-inline:clamp(12px,1.25vw,20px);height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:inline-end;transition:transform .4s var(--ease);
}
.nav__link:hover{color:#fff;background:rgba(160,195,235,.07)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1);transform-origin:inline-start}
.nav__link.is-active{color:#fff;font-weight:600}
@media (max-width:1279px){.nav{display:none}}
@media (min-width:1280px) and (max-width:1439px){
  .nav__link{padding-inline:11px;font-size:.66rem}
  html[lang="ar"] .nav__link{font-size:.86rem}
}

.hdr__tools{display:flex;align-items:center;gap:12px;margin-inline-start:auto}
@media (min-width:1280px){
  .hdr__tools{
    margin-inline-start:0;padding-inline-start:clamp(14px,1.5vw,24px);
    border-inline-start:1px solid rgba(160,195,235,.22);
  }
}

.lang{
  display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(160,195,235,.35);
  padding:9px 14px;font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.14em;color:#EAF2FB;
  transition:border-color .3s var(--ease),background .3s var(--ease);white-space:nowrap;
}
.lang:hover{border-color:var(--accent);background:rgba(245,161,26,.12)}
.hdr__cta{display:none}
@media (min-width:1280px){
  .hdr__cta{
    display:inline-flex;align-items:center;padding:11px 20px;background:var(--accent);color:var(--deep);
    font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
    transition:background .3s var(--ease);white-space:nowrap;
  }
  html[lang="ar"] .hdr__cta{font-family:var(--ff-ar);letter-spacing:0;font-size:.88rem;font-weight:600}
  .hdr__cta:hover{background:#fff}
}

.burger{display:none;width:44px;height:38px;position:relative;border:1px solid rgba(160,195,235,.35)}
.burger span{position:absolute;inset-inline:11px;height:1.5px;background:#EAF2FB;transition:transform .4s var(--ease),opacity .3s}
.burger span:nth-child(1){inset-block-start:13px}
.burger span:nth-child(2){inset-block-start:19px}
.burger span:nth-child(3){inset-block-start:25px}
body.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1279px){.burger{display:block}}

/* mobile navigation — its own layout, not a squeezed desktop menu */
.mnav{
  position:fixed;inset:0;z-index:88;background:var(--deep);
  display:flex;flex-direction:column;padding:104px var(--pad) 40px;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);
  overflow-y:auto;
}
body.nav-open .mnav{clip-path:inset(0 0 0 0)}
.mnav__list{display:flex;flex-direction:column;border-block-start:1px solid var(--d-rule)}
.mnav__item{border-block-end:1px solid var(--d-rule)}
.mnav__link{
  display:flex;align-items:baseline;gap:16px;padding-block:18px;
  font-family:var(--ff-display);font-size:clamp(1.4rem,6vw,2rem);font-weight:700;color:#fff;
}
.mnav__num{font-family:var(--ff-mono);font-size:.66rem;color:var(--accent);letter-spacing:.16em}
.mnav__foot{margin-block-start:auto;padding-block-start:32px;display:grid;gap:8px;
  font-family:var(--ff-mono);font-size:.72rem;color:var(--d-soft);letter-spacing:.06em;direction:ltr;text-align:start}
.mnav__foot a{color:var(--accent)}

/* --------------------------------------------------------------------------
   8. HERO
   ----------------------------------------------------------------------- */
.hero{
  position:relative;background:var(--deep);color:var(--d-text);overflow:hidden;isolation:isolate;
  --text:var(--d-text);--text-soft:var(--d-soft);--rule:var(--d-rule);
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg .media{height:100%;aspect-ratio:auto}
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(5,15,26,.55),rgba(5,15,26,.20) 40%,rgba(5,15,26,.95)),
    linear-gradient(to right,rgba(7,21,33,.92),rgba(7,21,33,.10) 62%);
}
html[dir="rtl"] .hero__veil{
  background:
    linear-gradient(to bottom,rgba(5,15,26,.55),rgba(5,15,26,.20) 40%,rgba(5,15,26,.95)),
    linear-gradient(to left,rgba(7,21,33,.92),rgba(7,21,33,.10) 62%);
}
.hero__scan{
  position:absolute;inset-inline:0;z-index:2;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(245,161,26,.55),transparent);
  animation:scan 9s linear infinite;
}
@keyframes scan{0%{top:8%}100%{top:92%}}

.hero__in{
  position:relative;z-index:3;
  min-height:clamp(620px,88vh,940px);
  display:grid;grid-template-columns:var(--rail) minmax(0,1.4fr) minmax(0,.75fr);
  align-items:center;gap:clamp(24px,3vw,56px);
  padding-block:clamp(112px,13vh,152px) clamp(56px,7vh,92px);
  position:relative;
}
@media (max-width:1100px){
  .hero__in{grid-template-columns:1fr;min-height:auto;padding-block:140px 64px}
}

.hero__rail{
  align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding-block:10px;border-inline-end:1px solid rgba(140,180,225,.18);
}
.hero__rail span{
  font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.24em;color:var(--d-soft);
  writing-mode:vertical-rl;text-transform:uppercase;
}
.hero__rail i{width:8px;height:8px;background:var(--accent);border-radius:50%;font-style:normal}
@media (max-width:1100px){.hero__rail{display:none}}

.hero__kicker{
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:14px;margin-block-end:clamp(20px,3vw,34px);
}
.hero__kicker::after{content:"";width:clamp(40px,7vw,120px);height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
html[dir="rtl"] .hero__kicker::after{background:linear-gradient(270deg,var(--accent),transparent)}

.hero__title{font-family:var(--ff-display);font-size:var(--t-mega);font-weight:800;color:#fff;line-height:.95}
html[lang="ar"] .hero__title{font-weight:700;line-height:1.16}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line:last-child .line__in{color:transparent;-webkit-text-stroke:1.5px var(--accent)}
html[lang="en"] .hero__title{text-transform:uppercase}

.hero__sub{
  margin-block-start:clamp(18px,2.4vw,28px);
  font-family:var(--ff-en);font-size:clamp(.78rem,1.15vw,.98rem);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue-lift);
}
html[dir="rtl"] .hero__sub{direction:rtl}
.hero__lead{margin-block-start:clamp(18px,2.2vw,26px);max-width:56ch;color:#BFD2E6;font-size:clamp(.98rem,1.15vw,1.1rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-block-start:clamp(26px,3.4vw,42px)}

.hero__side{position:relative;align-self:stretch;min-height:340px}
.hero__side .media{position:absolute;inset:0;aspect-ratio:auto;height:100%}
@media (max-width:1100px){.hero__side{display:none}}

.hero__stats{
  position:relative;z-index:3;border-block-start:1px solid rgba(140,180,225,.18);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.hero__stat{padding:22px clamp(14px,2vw,28px);border-inline-start:1px solid rgba(140,180,225,.18)}
.hero__stat:first-child{border-inline-start:0}
.hero__stat b{
  display:block;font-family:var(--ff-en);font-weight:800;font-size:clamp(1.5rem,2.9vw,2.5rem);
  color:#fff;line-height:1;font-variant-numeric:tabular-nums;
  white-space:nowrap;direction:ltr;text-align:start;
}
/* direct child only — the counter lives in its own span inside <b> */
.hero__stat > span{
  display:block;margin-block-start:8px;font-family:var(--ff-mono);font-size:var(--t-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--d-soft);
}
html[lang="ar"] .hero__stat > span{font-family:var(--ff-ar);font-size:.76rem;letter-spacing:0}

.scroll-ind{
  position:absolute;z-index:4;inset-block-end:8px;inset-inline-end:0;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--ff-mono);font-size:var(--t-mono);
  letter-spacing:.2em;text-transform:uppercase;color:var(--d-soft);
  writing-mode:vertical-rl;
}
.scroll-ind i{display:block;width:1px;height:52px;background:linear-gradient(var(--accent),transparent);font-style:normal}
@media (max-width:1100px){.scroll-ind{display:none}}

/* --------------------------------------------------------------------------
   9. INTRO — editorial
   ----------------------------------------------------------------------- */
.intro__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(32px,5vw,88px);align-items:start}
@media (max-width:940px){.intro__grid{grid-template-columns:1fr}}
.intro__title{font-size:var(--t-h1);font-weight:700}
html[lang="en"] .intro__title{font-weight:800}
.intro__title .line:last-child .line__in{color:var(--blue)}
.intro__since{
  margin-block-start:clamp(24px,3vw,40px);display:flex;align-items:baseline;gap:16px;
  padding-block-start:22px;border-block-start:1px solid var(--rule);
}
.intro__since b{font-family:var(--ff-en);font-weight:800;font-size:clamp(2.6rem,5vw,4.4rem);line-height:.9;color:var(--blue)}
.intro__since span{font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-soft)}
.intro__quote{
  margin-block-start:clamp(28px,4vw,48px);padding-inline-start:26px;
  border-inline-start:3px solid var(--accent);
  font-size:clamp(1.15rem,2vw,1.6rem);font-weight:600;line-height:1.5;color:var(--text);
}
.intro__media{position:relative}
.intro__tri{
  display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule);
  margin-block-start:clamp(20px,2.6vw,30px);
}
.intro__tri div{
  padding:18px 14px;text-align:center;border-inline-start:1px solid var(--rule);
  font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft);
}
html[lang="ar"] .intro__tri div{font-family:var(--ff-ar);font-size:.82rem;letter-spacing:0;font-weight:600;color:var(--text)}
.intro__tri div:first-child{border-inline-start:0}

/* --------------------------------------------------------------------------
   10. CAPABILITIES — one section, five states
   ----------------------------------------------------------------------- */
.caps{position:relative;background:var(--deep);color:var(--d-text);overflow:hidden}
.caps__bg{position:absolute;inset:0;z-index:0}
.caps__bg .media{position:absolute;inset:0;aspect-ratio:auto;height:100%;opacity:0;transition:opacity .8s var(--ease)}
.caps__bg .media.is-on{opacity:1}
.caps__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,21,33,.97),rgba(7,21,33,.78) 55%,rgba(7,21,33,.55))}
html[dir="rtl"] .caps__veil{background:linear-gradient(270deg,rgba(7,21,33,.97),rgba(7,21,33,.78) 55%,rgba(7,21,33,.55))}
.caps__in{position:relative;z-index:2}
.caps__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:940px){.caps__grid{grid-template-columns:1fr;gap:32px}}

.caps__nav{border-block-start:1px solid var(--d-rule)}
.caps__btn{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,2vw,26px);
  width:100%;padding-block:clamp(16px,2.2vw,26px);border-block-end:1px solid var(--d-rule);
  text-align:start;transition:padding-inline-start .45s var(--ease);position:relative;
}
.caps__btn::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:2px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease);
}
.caps__btn.is-on{padding-inline-start:20px}
.caps__btn.is-on::before{transform:scaleY(1)}
.caps__btn .n{
  font-family:var(--ff-en);font-weight:800;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.2px var(--blue-lift);transition:color .4s,-webkit-text-stroke-color .4s;
}
.caps__btn.is-on .n{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
.caps__btn .t{font-family:var(--ff-display);font-size:clamp(1.05rem,1.9vw,1.5rem);font-weight:600;color:#CBDCEC;transition:color .4s}
.caps__btn.is-on .t{color:#fff}
.caps__btn .a{width:16px;height:10px;opacity:0;transform:translateX(-8px);transition:.4s var(--ease);color:var(--accent)}
html[dir="rtl"] .caps__btn .a{transform:scaleX(-1) translateX(-8px)}
.caps__btn.is-on .a{opacity:1;transform:translateX(0)}
html[dir="rtl"] .caps__btn.is-on .a{transform:scaleX(-1)}

.caps__panel{display:none}
.caps__panel.is-on{display:block;animation:fadeUp .7s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.caps__panel h3{font-size:var(--t-h3);color:#fff;margin-block-end:14px}
.caps__panel p{color:#B7CBE0;max-width:60ch}
.caps__list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:1px;
  margin-block-start:clamp(22px,3vw,34px);
}
.caps__list li{
  background:rgba(7,21,33,.72);padding:13px 15px;display:flex;align-items:baseline;gap:10px;
  font-size:.9rem;color:#CFDFEE;box-shadow:0 0 0 1px var(--d-rule);
}
.caps__list li b{font-family:var(--ff-mono);font-size:var(--t-mono);color:var(--accent);font-weight:500;flex:none}

/* --------------------------------------------------------------------------
   11. DISCIPLINE BLOCKS (electrical / construction / mechanical)
   ----------------------------------------------------------------------- */
.disc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:stretch}
@media (max-width:940px){.disc{grid-template-columns:1fr}}
.disc__media{position:relative;min-height:clamp(320px,46vw,620px)}
.disc__media .media{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.disc__body{padding:clamp(32px,5vw,76px);display:flex;flex-direction:column;justify-content:center;background:var(--white)}
.tone-dark .disc__body,.tone-deep .disc__body{background:var(--navy)}
.disc__body .numeral{margin-block-end:18px}
.disc__caps{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0;margin-block-start:clamp(24px,3vw,36px);border-block-start:1px solid var(--rule)}
.disc__caps li{
  padding:12px 0;border-block-end:1px solid var(--rule);display:flex;align-items:baseline;gap:12px;
  font-size:.92rem;padding-inline-end:16px;
}
.disc__caps li b{font-family:var(--ff-mono);font-size:var(--t-mono);color:var(--accent);font-weight:500}
.disc--rev .disc__media{order:2}
@media (max-width:940px){.disc--rev .disc__media{order:0}}

/* --------------------------------------------------------------------------
   12. OIL & GAS — the deep, diagonal-cut zone
   ----------------------------------------------------------------------- */
.oil{position:relative;background:var(--ink);color:var(--d-text);overflow:hidden}
.oil__bg{position:absolute;inset:0;z-index:0;opacity:.45}
.oil__bg .media{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.oil__cut{
  position:absolute;inset-block-start:0;inset-inline:0;height:clamp(60px,8vw,140px);z-index:2;
  background:var(--paper);clip-path:polygon(0 0,100% 0,100% 0,0 100%);
}
html[dir="rtl"] .oil__cut{clip-path:polygon(0 0,100% 0,100% 100%,0 0)}
.oil__in{position:relative;z-index:3}
.oil__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:end;margin-block-end:clamp(36px,5vw,64px)}
@media (max-width:940px){.oil__head{grid-template-columns:1fr}}
.oil__map{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px}
.oil__cell{
  background:var(--ink);padding:clamp(18px,2.4vw,26px);position:relative;
  box-shadow:0 0 0 1px rgba(61,130,212,.22);
  transition:background .45s var(--ease);min-height:132px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;
}
.oil__cell:hover{background:var(--navy)}
.oil__cell b{font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.18em;color:var(--accent);font-weight:500}
.oil__cell span{font-size:.96rem;color:#CFDFEE;line-height:1.55}
.oil__cell::after{
  content:"";position:absolute;inset-block-end:0;inset-inline-start:0;width:100%;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:inline-start;transition:transform .5s var(--ease);
}
.oil__cell:hover::after{transform:scaleX(1)}

/* --------------------------------------------------------------------------
   13. FLEET — horizontal industrial assets
   ----------------------------------------------------------------------- */
.fleet__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;margin-block-end:clamp(28px,4vw,48px)}
.fleet__count{font-family:var(--ff-en);font-weight:800;font-size:clamp(3.4rem,9vw,8rem);line-height:.82;color:var(--accent)}
.fleet__count sup{font-size:.42em;vertical-align:super}
.fleet__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(268px,30vw);gap:1px;
  overflow-x:auto;scroll-snap-type:x mandatory;background:var(--d-rule);
  border-block:1px solid var(--d-rule);padding-block:0;
  scrollbar-width:thin;
}
.fleet__track::-webkit-scrollbar{height:3px}
.fleet__track::-webkit-scrollbar-thumb{background:var(--accent)}
.fleet__item{scroll-snap-align:start;background:var(--deep);display:flex;flex-direction:column}
.fleet__item .media{aspect-ratio:4/3}
.fleet__meta{padding:20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.fleet__meta b{font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.2em;color:var(--accent)}
.fleet__meta h4{font-size:1.05rem;color:#fff}
.fleet__meta p{font-size:.86rem;color:var(--d-soft);line-height:1.65}

/* --------------------------------------------------------------------------
   14. WHY — four large blocks
   ----------------------------------------------------------------------- */
.why__list{border-block-start:1px solid var(--rule)}
.why__item{
  display:grid;grid-template-columns:clamp(90px,12vw,190px) minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(18px,3vw,48px);padding-block:clamp(28px,4vw,52px);
  border-block-end:1px solid var(--rule);align-items:start;
}
@media (max-width:840px){.why__item{grid-template-columns:1fr;gap:12px}}
.why__item h3{font-size:var(--t-h3);font-weight:700}
.why__item p{color:var(--text-soft)}
.why__item .numeral{transition:color .5s var(--ease),-webkit-text-stroke-color .5s}
.why__item:hover .numeral{color:var(--accent);-webkit-text-stroke-color:var(--accent)}

/* --------------------------------------------------------------------------
   15. PROJECTS
   ----------------------------------------------------------------------- */
.pgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.4vw,34px)}
@media (max-width:900px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.pgrid{grid-template-columns:1fr}}
.pcard{grid-column:span 6;position:relative;display:block;background:var(--deep);overflow:hidden}
.pcard--wide{grid-column:span 7}
.pcard--narrow{grid-column:span 5}
@media (max-width:900px){.pcard,.pcard--wide,.pcard--narrow{grid-column:span 1}}
.pcard .media{transition:transform .9s var(--ease)}
.pcard:hover .media{transform:scale(1.02)}
.pcard__body{
  position:absolute;inset-block-end:0;inset-inline:0;z-index:6;padding:clamp(20px,2.6vw,34px);
  background:linear-gradient(to top,rgba(5,15,26,.94),rgba(5,15,26,.55) 55%,transparent);
}
.pcard__sector{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-mono);font-size:var(--t-mono);
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-block-end:12px;
}
.pcard__title{font-size:clamp(1.05rem,1.7vw,1.42rem);color:#fff;font-weight:700;line-height:1.35}
.pcard__meta{
  display:flex;flex-wrap:wrap;gap:6px 18px;margin-block-start:14px;padding-block-start:14px;
  border-block-start:1px solid rgba(160,200,240,.22);
  font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.1em;color:#A9C2DA;
}
html[lang="ar"] .pcard__meta{font-family:var(--ff-ar);font-size:.78rem;letter-spacing:0}
.pcard__meta b{color:#E4EFF9;font-weight:500}
.pcard::after{
  content:"";position:absolute;inset:0;z-index:7;border:1px solid transparent;
  transition:border-color .5s var(--ease);pointer-events:none;
}
.pcard:hover::after{border-color:var(--accent)}

.projects__foot{display:flex;justify-content:center;margin-block-start:clamp(34px,4.6vw,60px)}

/* the contract register, straight from the company profile */
.ptable{border:1px solid var(--rule);background:var(--white)}
.tone-dark .ptable,.tone-deep .ptable{border-color:var(--d-rule);background:var(--navy)}
.ptable table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:860px}
.ptable th{
  text-align:start;padding:14px 16px;background:var(--navy);color:#fff;font-weight:500;
  font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;
  position:sticky;inset-block-start:0;
}
html[lang="ar"] .ptable th{font-family:var(--ff-ar);letter-spacing:0;font-size:.8rem;font-weight:600}
.ptable td{padding:14px 16px;border-block-start:1px solid var(--rule);vertical-align:top;line-height:1.6}
.tone-dark .ptable td,.tone-deep .ptable td{border-color:var(--d-rule)}
.ptable tbody tr:hover{background:var(--n-050)}
.tone-dark .ptable tbody tr:hover,.tone-deep .ptable tbody tr:hover{background:var(--navy-2)}
.ptable td a{border-block-end:1px solid var(--accent);padding-block-end:2px;font-weight:600}
.ptable td a:hover{color:var(--accent)}
.pill{
  display:inline-block;padding:5px 12px;border:1px solid var(--rule);
  font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.1em;white-space:nowrap;
}
html[lang="ar"] .pill{font-family:var(--ff-ar);letter-spacing:0;font-size:.78rem}

/* project detail ----------------------------------------------------------- */
.phero{position:relative;min-height:clamp(420px,62vh,720px);display:flex;align-items:flex-end;background:var(--deep);color:var(--d-text);overflow:hidden}
.phero .media{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.phero__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,15,26,.95),rgba(5,15,26,.35))}
.phero__in{position:relative;z-index:3;padding-block:clamp(120px,15vh,180px) clamp(36px,5vw,64px);width:100%}
.phero__title{font-size:var(--t-h1);color:#fff;max-width:22ch;margin-block-start:16px}
.pmeta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-block-start:1px solid var(--d-rule);margin-block-start:clamp(28px,4vw,44px);
}
.pmeta div{padding:18px 20px;border-inline-start:1px solid var(--d-rule)}
.pmeta div:first-child{border-inline-start:0;padding-inline-start:0}
.pmeta dt{font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--d-soft)}
.pmeta dd{margin:8px 0 0;font-size:.98rem;color:#fff;font-weight:600;line-height:1.5}

/* --------------------------------------------------------------------------
   16. TIMELINE — horizontal, scroll-driven
   ----------------------------------------------------------------------- */
.tl{position:relative;background:var(--navy);color:var(--d-text);overflow:hidden}
.tl__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,34vw);
  gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
  border-block-start:1px solid var(--d-rule);
}
.tl__track::-webkit-scrollbar{height:3px}
.tl__track::-webkit-scrollbar-thumb{background:var(--accent)}
.tl__step{
  scroll-snap-align:start;padding:clamp(26px,3.4vw,44px) clamp(22px,2.6vw,38px) clamp(34px,4vw,56px);
  border-inline-end:1px solid var(--d-rule);position:relative;
}
.tl__step::before{
  content:"";position:absolute;inset-block-start:-5px;inset-inline-start:clamp(22px,2.6vw,38px);
  width:9px;height:9px;border-radius:50%;background:var(--blue-lift);
}
.tl__step:hover::before,.tl__step:first-child::before{background:var(--accent)}
.tl__range{font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.16em;color:var(--accent);font-weight:500}
.tl__step h3{margin-block:16px 12px;font-size:clamp(1.1rem,1.8vw,1.45rem);color:#fff}
.tl__step p{font-size:.92rem;color:var(--d-soft);line-height:1.75}

/* --------------------------------------------------------------------------
   17. VISION / VALUES
   ----------------------------------------------------------------------- */
.vm{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--rule)}
@media (max-width:840px){.vm{grid-template-columns:1fr}}
.vm__cell{padding:clamp(28px,4vw,60px);border-inline-start:1px solid var(--rule)}
.vm__cell:first-child{border-inline-start:0}
.vm__cell h3{font-size:var(--t-h3);color:var(--blue);margin-block-end:18px}
.vm__cell p{font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.8;color:var(--text-soft)}

.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;margin-block-start:clamp(28px,4vw,52px)}
.values__i{background:var(--paper);padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:12px;transition:background .45s var(--ease);box-shadow:0 0 0 1px var(--rule)}
.values__i:hover{background:var(--white)}
.values__i .numeral{font-size:clamp(1.6rem,2.4vw,2.2rem)}
.values__i h4{font-size:1.12rem}
.values__i p{font-size:.9rem;color:var(--text-soft);line-height:1.7}

/* --------------------------------------------------------------------------
   18. QHSE + CERTIFICATES
   ----------------------------------------------------------------------- */
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px}
.qcell{background:var(--navy);padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:14px;box-shadow:0 0 0 1px var(--d-rule)}
.qcell__code{
  font-family:var(--ff-en);font-weight:800;font-size:clamp(2.4rem,4vw,3.6rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px var(--accent);
}
.qcell h4{font-size:1.2rem;color:#fff}
.qcell p{font-size:.9rem;color:var(--d-soft);line-height:1.75}

.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 clamp(24px,4vw,60px);margin-block-start:clamp(28px,4vw,44px)}
.checks li{
  display:flex;gap:14px;padding-block:14px;border-block-end:1px solid var(--rule);
  font-size:.95rem;align-items:flex-start;
}
.checks li::before{
  content:"";flex:none;width:8px;height:8px;margin-block-start:9px;background:var(--accent);
  transform:rotate(45deg);
}

.certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(16px,2.4vw,28px)}
.cert{
  background:var(--white);border:1px solid var(--rule);padding:clamp(24px,3vw,38px);
  display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;
}
.tone-dark .cert,.tone-deep .cert{background:var(--navy);border-color:var(--d-rule)}
.cert::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;background:var(--accent)}
.cert__code{font-family:var(--ff-en);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--blue);letter-spacing:-.02em}
.tone-dark .cert__code,.tone-deep .cert__code{color:var(--accent)}
.cert h4{font-size:1.04rem;font-weight:600}
.cert__rows{display:grid;gap:0;margin-block-start:auto;border-block-start:1px solid var(--rule)}
.tone-dark .cert__rows{border-color:var(--d-rule)}
.cert__rows div{display:flex;justify-content:space-between;gap:16px;padding-block:10px;border-block-end:1px solid var(--rule)}
.tone-dark .cert__rows div{border-color:var(--d-rule)}
.cert__rows dt{font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft)}
.cert__rows dd{margin:0;font-family:var(--ff-mono);font-size:.76rem;font-weight:500;direction:ltr}
.cert__seal{
  position:absolute;inset-inline-end:-30px;inset-block-end:-30px;width:150px;height:150px;
  border:1px solid var(--rule);border-radius:50%;opacity:.5;pointer-events:none;
}

/* --------------------------------------------------------------------------
   19. TEAM / GENERIC NUMBERED LIST
   ----------------------------------------------------------------------- */
.nlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:1px}
.nlist__i{background:var(--white);padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:12px;box-shadow:0 0 0 1px var(--rule)}
.tone-dark .nlist__i,.tone-deep .nlist__i{background:var(--navy);box-shadow:0 0 0 1px var(--d-rule)}
.nlist__i b{font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.2em;color:var(--accent)}
.nlist__i h4{font-size:1.08rem}
.nlist__i p{font-size:.9rem;color:var(--text-soft);line-height:1.72}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:clamp(22px,3vw,34px)}
.chips li{
  border:1px solid var(--rule);padding:10px 16px;font-size:.86rem;color:var(--text-soft);
  transition:border-color .35s,color .35s;
}
.chips li:hover{border-color:var(--accent);color:var(--text)}

/* --------------------------------------------------------------------------
   20. CONTACT
   ----------------------------------------------------------------------- */
.contact{position:relative;background:var(--deep);color:var(--d-text);overflow:hidden}
.contact__bg{position:absolute;inset:0;opacity:.3;z-index:0}
.contact__bg .media{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.contact__in{position:relative;z-index:2}
.contact__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px)}
@media (max-width:940px){.contact__grid{grid-template-columns:1fr}}
.cinfo{display:grid;gap:0;border-block-start:1px solid var(--d-rule)}
.cinfo div{padding-block:18px;border-block-end:1px solid var(--d-rule)}
.cinfo dt{font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--d-soft)}
.cinfo dd{margin:8px 0 0;font-size:1.02rem;color:#fff;line-height:1.7}
.cinfo dd a{transition:color .3s}
.cinfo dd a:hover{color:var(--accent)}
.cinfo .ltr{direction:ltr;text-align:start;font-family:var(--ff-mono);font-size:.94rem}

.form{display:grid;gap:0}
.form__row{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
@media (max-width:640px){.form__row{grid-template-columns:1fr}}
.field{position:relative;border-block-end:1px solid var(--d-rule);border-inline-start:1px solid var(--d-rule)}
.field:first-child{border-inline-start:0}
@media (max-width:640px){.field{border-inline-start:0}}
.field label{
  position:absolute;inset-block-start:14px;inset-inline-start:0;
  font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--d-soft);pointer-events:none;
}
html[lang="ar"] .field label{font-family:var(--ff-ar);font-size:.78rem;letter-spacing:0}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:0;padding:38px 0 16px;color:#fff;font-size:1rem;
  border-radius:0;
}
.field--pad{padding-inline-start:22px}
.field textarea{min-height:132px;resize:vertical}
.field select{appearance:none}
.field select option{background:var(--navy);color:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;box-shadow:0 1px 0 var(--accent)}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding-block-start:26px}
.form__note{font-size:.84rem;color:var(--d-soft)}
.form__msg{padding:14px 18px;border:1px solid var(--accent);color:var(--accent);font-size:.9rem;display:none}
.form__msg.is-on{display:block}
.form__msg.is-err{border-color:#E0674F;color:#E0674F}

.map{border:1px solid var(--d-rule);margin-block-start:clamp(28px,4vw,48px);filter:grayscale(1) invert(.92) hue-rotate(178deg) contrast(.88)}
.map iframe{display:block;width:100%;height:clamp(260px,34vw,420px);border:0}

/* --------------------------------------------------------------------------
   21. FOOTER
   ----------------------------------------------------------------------- */
.ftr{background:var(--ink);color:var(--d-text);padding-block:clamp(56px,7vw,96px) 0;border-block-start:3px solid var(--accent)}
.ftr__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
@media (max-width:940px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__grid{grid-template-columns:1fr}}
.ftr__desc{margin-block-start:22px;max-width:44ch;color:var(--d-soft);font-size:.94rem}
.ftr__iso{margin-block-start:20px;font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.14em;color:var(--accent)}
.ftr h4{font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-block-end:20px;font-weight:500}
html[lang="ar"] .ftr h4{font-family:var(--ff-ar);letter-spacing:0;font-size:.92rem;font-weight:600}
.ftr__list{display:grid;gap:11px}
.ftr__list a,.ftr__list span{color:var(--d-soft);font-size:.92rem;transition:color .3s}
.ftr__list a:hover{color:var(--accent)}
.ftr__list .ltr{direction:ltr;text-align:start;font-family:var(--ff-mono);font-size:.84rem}
.ftr__bar{
  margin-block-start:clamp(40px,5vw,64px);padding-block:22px;border-block-start:1px solid var(--d-rule);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.1em;color:var(--d-soft);
}
html[lang="ar"] .ftr__bar{font-family:var(--ff-ar);letter-spacing:0;font-size:.82rem}
.social{display:flex;gap:10px}
.social a{
  width:36px;height:36px;border:1px solid var(--d-rule);display:grid;place-items:center;
  transition:border-color .3s,background .3s;
}
.social a:hover{border-color:var(--accent);background:rgba(245,161,26,.12)}
.social svg{width:15px;height:15px;fill:currentColor}

/* --------------------------------------------------------------------------
   22. PAGE HERO (inner pages)
   ----------------------------------------------------------------------- */
.phead{position:relative;background:var(--deep);color:var(--d-text);overflow:hidden}
.phead .media{position:absolute;inset:0;aspect-ratio:auto;height:100%;opacity:.55}
.phead__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,15,26,.96),rgba(5,15,26,.5))}
.phead__in{position:relative;z-index:3;padding-block:clamp(140px,18vh,220px) clamp(48px,6vw,84px)}
.phead h1{font-size:var(--t-h1);color:#fff;max-width:20ch}
.phead p{margin-block-start:18px;max-width:62ch;color:#BCD0E4}
.crumbs{display:flex;gap:10px;font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--d-soft);margin-block-end:20px}
.crumbs a{color:var(--accent)}

/* --------------------------------------------------------------------------
   23. MOTION — content is visible by default; JS opts into animation
   ----------------------------------------------------------------------- */
html.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js [data-reveal].is-in{opacity:1;transform:none}
html.js [data-reveal-delay="1"]{transition-delay:.09s}
html.js [data-reveal-delay="2"]{transition-delay:.18s}
html.js [data-reveal-delay="3"]{transition-delay:.27s}
html.js [data-reveal-delay="4"]{transition-delay:.36s}

html.js .h-display .line__in,html.js .hero__title .line__in{
  transform:translateY(105%);transition:transform 1s var(--ease);
}
html.js .h-display.is-in .line__in,html.js .hero__title.is-in .line__in{transform:none}
html.js .h-display.is-in .line:nth-child(2) .line__in{transition-delay:.08s}
html.js .h-display.is-in .line:nth-child(3) .line__in{transition-delay:.16s}
html.js .hero__title.is-in .line:nth-child(2) .line__in{transition-delay:.1s}
html.js .hero__title.is-in .line:nth-child(3) .line__in{transition-delay:.2s}

html.js [data-mask]{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease)}
html.js [data-mask].is-in{clip-path:inset(0 0 0 0)}

html.js .eyebrow__rule{transform:scaleX(0);transition:transform .8s var(--ease) .15s}
html.js .eyebrow.is-in .eyebrow__rule{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js [data-reveal],html.js [data-mask],
  html.js .h-display .line__in,html.js .hero__title .line__in,html.js .eyebrow__rule{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;
  }
  .hero__scan{animation:none;display:none}
  .caps__panel.is-on{animation:none}
}

/* --------------------------------------------------------------------------
   24. UTILITIES
   ----------------------------------------------------------------------- */
.u-ltr{direction:ltr;text-align:start}
.u-mono{font-family:var(--ff-mono);font-variant-numeric:tabular-nums}
.u-center{text-align:center}
.u-mt{margin-block-start:clamp(28px,4vw,52px)}
.u-mt-s{margin-block-start:18px}
.u-mt-xs{margin-block-start:8px}
.u-mb{margin-block-end:clamp(28px,4vw,44px)}

/* shared composition helpers */
.head-row{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:24px;margin-block-end:clamp(28px,4vw,48px);
}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}
.split--end{align-items:flex-end}
.split--media{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
@media (max-width:940px){.split,.split--media{grid-template-columns:1fr}}
.disc--boxed{border:1px solid var(--rule)}
.tone-dark .disc--boxed,.tone-deep .disc--boxed{border-color:var(--d-rule)}
.disc__media--sm{min-height:clamp(260px,32vw,420px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.scroll-x{overflow-x:auto}
.skip{
  position:absolute;inset-block-start:-100px;inset-inline-start:var(--pad);z-index:200;
  background:var(--accent);color:var(--deep);padding:12px 20px;font-family:var(--ff-mono);font-size:.75rem;
}
.skip:focus{inset-block-start:12px}

/* project detail — spec list + gallery */
.specs{display:grid;gap:0;border-block-start:1px solid var(--rule)}
.specs div{display:flex;justify-content:space-between;gap:20px;padding-block:14px;border-block-end:1px solid var(--rule)}
.specs dt{font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft)}
html[lang="ar"] .specs dt{font-family:var(--ff-ar);letter-spacing:0;font-size:.85rem}
.specs dd{margin:0;font-weight:600}
.pgallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.8vw,24px)}
.pgallery > :first-child{grid-column:1 / -1}
@media (max-width:640px){.pgallery{grid-template-columns:1fr}.pgallery > :first-child{grid-column:auto}}

/* ==========================================================================
   ADDED SECTIONS
   ========================================================================== */

/* delivery model — one continuous run, not four cards --------------------- */
.flow{display:grid;gap:0;border-block-start:1px solid var(--rule);counter-reset:flow}
.flow__step{
  display:grid;grid-template-columns:clamp(78px,10vw,150px) minmax(0,1fr);
  gap:clamp(16px,3vw,44px);padding-block:clamp(26px,3.6vw,46px);
  border-block-end:1px solid var(--rule);position:relative;
}
@media (max-width:720px){.flow__step{grid-template-columns:1fr;gap:10px}}
.flow__num{
  font-family:var(--ff-en);font-weight:800;font-size:clamp(2.2rem,4.6vw,4.4rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px var(--blue);letter-spacing:-.04em;
  transition:color .5s var(--ease),-webkit-text-stroke-color .5s var(--ease);
}
.tone-dark .flow__num,.tone-deep .flow__num{-webkit-text-stroke-color:var(--blue-lift)}
.flow__step:hover .flow__num{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
.flow__body h3{font-size:var(--t-h3);margin-block-end:12px}
.flow__body p{color:var(--text-soft);max-width:70ch}
.flow__items{
  display:flex;flex-wrap:wrap;gap:8px 10px;margin-block-start:18px;
}
.flow__items li{
  border:1px solid var(--rule);padding:7px 14px;font-family:var(--ff-mono);
  font-size:var(--t-mono);letter-spacing:.1em;color:var(--text-soft);
}
html[lang="ar"] .flow__items li{font-family:var(--ff-ar);letter-spacing:0;font-size:.8rem}

/* clients register strip --------------------------------------------------- */
.clients{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px}
.clients__i{
  background:var(--white);box-shadow:0 0 0 1px var(--rule);
  padding:clamp(20px,2.6vw,30px);display:grid;
  grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:18px;row-gap:4px;align-items:baseline;
}
.tone-dark .clients__i,.tone-deep .clients__i{background:var(--navy);box-shadow:0 0 0 1px var(--d-rule)}
.clients__n{
  grid-row:1 / span 2;font-family:var(--ff-en);font-weight:800;
  font-size:clamp(1.7rem,3vw,2.6rem);line-height:.9;color:var(--accent);
}
.clients__name{font-weight:600;font-size:1rem;line-height:1.5}
.clients__lbl{
  font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-soft);
}
html[lang="ar"] .clients__lbl{font-family:var(--ff-ar);letter-spacing:0;font-size:.8rem}

/* register filters --------------------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-block-end:6px}
.filters__b{
  border:1px solid var(--rule);padding:9px 16px;font-family:var(--ff-mono);
  font-size:var(--t-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-soft);
  transition:border-color .3s,color .3s,background .3s;
}
html[lang="ar"] .filters__b{font-family:var(--ff-ar);letter-spacing:0;font-size:.85rem}
.filters__b:hover{border-color:var(--blue);color:var(--text)}
.filters__b.is-on{background:var(--accent);border-color:var(--accent);color:var(--deep);font-weight:600}
.filters__empty{margin-block-start:22px;color:var(--text-soft)}

.fig{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.fig b{font-family:var(--ff-en);font-weight:800;font-size:clamp(2.4rem,5vw,4.2rem);line-height:.85;color:var(--accent)}
.fig span{font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft)}
html[lang="ar"] .fig span{font-family:var(--ff-ar);letter-spacing:0;font-size:.85rem}

/* organizational chart ----------------------------------------------------- */
.org{display:grid;gap:1px}
.org__head{
  background:var(--navy);box-shadow:0 0 0 1px var(--d-rule);padding:clamp(22px,3vw,34px);
  display:flex;flex-direction:column;gap:10px;
}
.tone-light .org__head,.tone-white .org__head{background:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.org__head h3{font-size:var(--t-h3);color:#fff}
.org__staff{
  background:var(--deep-2);box-shadow:0 0 0 1px var(--d-rule);padding:clamp(20px,2.6vw,28px);
  display:grid;grid-template-columns:auto 1fr;gap:16px 24px;align-items:start;
}
@media (max-width:720px){.org__staff{grid-template-columns:1fr}}
.org__label{
  font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap;
}
html[lang="ar"] .org__label{font-family:var(--ff-ar);letter-spacing:0;font-size:.82rem}
.org__staff ul{display:flex;flex-wrap:wrap;gap:8px 10px}
.org__staff li{border:1px solid var(--d-rule);padding:7px 13px;font-size:.86rem;color:var(--d-soft)}
.org__divs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px}
.org__div{
  background:var(--navy);box-shadow:0 0 0 1px var(--d-rule);
  padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:12px;
}
.org__n{font-size:var(--t-mono);letter-spacing:.2em;color:var(--accent)}
.org__div h4{font-size:1.04rem;color:#fff;line-height:1.45}
.org__div ul{display:grid;gap:8px;margin-block-start:6px;padding-block-start:12px;border-block-start:1px solid var(--d-rule)}
.org__div li{font-size:.86rem;color:var(--d-soft);display:flex;gap:9px;line-height:1.6}
.org__div li::before{content:"";flex:none;width:5px;height:5px;margin-block-start:8px;background:var(--blue-lift)}

/* policies ----------------------------------------------------------------- */
.policies{display:grid;gap:1px}
.policy{
  background:var(--white);box-shadow:0 0 0 1px var(--rule);
  padding:clamp(24px,3.4vw,44px);
  display:grid;grid-template-columns:clamp(56px,7vw,110px) minmax(0,1fr);gap:clamp(16px,3vw,40px);
}
@media (max-width:720px){.policy{grid-template-columns:1fr;gap:12px}}
.tone-dark .policy,.tone-deep .policy{background:var(--navy);box-shadow:0 0 0 1px var(--d-rule)}
.policy__code{
  font-family:var(--ff-en);font-weight:800;font-size:clamp(1.7rem,3.2vw,2.8rem);line-height:.85;
  color:transparent;-webkit-text-stroke:1.5px var(--accent);letter-spacing:-.03em;
}
.policy h3{font-size:var(--t-h3);margin-block-end:14px}
.policy p{color:var(--text-soft);max-width:78ch}

/* commitments -------------------------------------------------------------- */
.commit{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1px}
.commit__i{
  background:var(--navy);box-shadow:0 0 0 1px var(--d-rule);
  padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:12px;
}
.tone-light .commit__i,.tone-white .commit__i{background:var(--white);box-shadow:0 0 0 1px var(--rule)}
.commit__n{font-size:var(--t-mono);letter-spacing:.2em;color:var(--accent)}
.commit__i h3{font-size:1.2rem}
.commit__i p{font-size:.94rem;color:var(--text-soft);line-height:1.75}

/* spec rows reused on the equipment page ----------------------------------- */
.terms{display:grid;gap:0;border-block-start:1px solid var(--rule)}
.terms div{
  display:grid;grid-template-columns:minmax(140px,.4fr) minmax(0,1fr);gap:20px;
  padding-block:15px;border-block-end:1px solid var(--rule);
}
@media (max-width:560px){.terms div{grid-template-columns:1fr;gap:4px}}
.terms dt{font-family:var(--ff-mono);font-size:var(--t-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft)}
html[lang="ar"] .terms dt{font-family:var(--ff-ar);letter-spacing:0;font-size:.86rem}
.terms dd{margin:0;font-weight:500}

/* ==========================================================================
   ABOUT + CONTACT
   ========================================================================== */

/* contact channels — one card per line, labelled with what it is for --------- */
.channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px}
.channel{
  background:var(--white);box-shadow:0 0 0 1px var(--rule);
  padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:12px;
}
.tone-dark .channel,.tone-deep .channel{background:var(--navy);box-shadow:0 0 0 1px var(--d-rule)}
.channel__code{
  font-size:var(--t-mono);letter-spacing:.22em;color:var(--accent);font-weight:500;
}
.channel h3{font-size:1.12rem;line-height:1.4}
.channel p{font-size:.9rem;color:var(--text-soft);line-height:1.72;flex:1}
.channel__v{
  display:inline-block;margin-block-start:6px;padding-block-start:14px;
  border-block-start:1px solid var(--rule);font-size:1rem;font-weight:600;
  color:var(--blue);transition:color .3s;
}
.tone-dark .channel__v,.tone-deep .channel__v{border-color:var(--d-rule);color:var(--accent)}
a.channel__v:hover{color:var(--accent)}
.tone-dark a.channel__v:hover{color:#fff}

/* geographic coverage ------------------------------------------------------- */
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px}
.area{
  background:var(--white);box-shadow:0 0 0 1px var(--rule);
  padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:10px;
}
.tone-dark .area,.tone-deep .area{background:var(--navy);box-shadow:0 0 0 1px var(--d-rule)}
.area__n{font-size:var(--t-mono);letter-spacing:.2em;color:var(--accent)}
.area h3{font-size:1.2rem}
.area p{font-size:.9rem;color:var(--text-soft);line-height:1.75}

/* a taller map for the office block ----------------------------------------- */
.map--tall{margin-block-start:0;height:100%}
.map--tall iframe{height:clamp(320px,42vw,520px)}