/* ==========================================================
   AFAQ ALNJAH — shared stylesheet
   Bilingual (EN / AR) · RTL-aware via CSS logical properties
   ========================================================== */

:root{
  --ink:      #0C1A14;
  --ink-2:    #142A20;
  --ink-3:    #07120D;
  --slate:    #4A5A52;
  --steel:    #DDE2DE;
  --steel-2:  #EEF1EE;
  --paper:    #FAFAF8;
  --green:    #0E7A3C;
  --crimson:  #B3181F;
  --gold:     #C08A2E;
  --gold-lo:  #9A6C1F;

  --f-lat: 'Archivo', system-ui, sans-serif;
  --f-ar:  'IBM Plex Sans Arabic', 'Archivo', system-ui, sans-serif;
  --f: var(--f-lat);

  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --flow-to: right;
}
html[lang="ar"]{ --f: var(--f-ar); }
html[dir="rtl"]{ --flow-to: left; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body{
  margin:0; background:var(--paper); color:var(--ink); overflow-x:hidden;
  font-family:var(--f); font-size:17px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
html[lang="ar"] body{ font-size:17.5px; line-height:1.85; }
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.12; }
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{ letter-spacing:0; line-height:1.3; }
p{ margin:0 0 1em; max-width:68ch; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
[id]{ scroll-margin-top:96px; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.skip{ position:absolute; top:0; inset-inline-start:0; z-index:200; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; background:var(--ink); color:#fff; }
.skip:focus{ width:auto; height:auto; clip-path:none; padding:12px 20px; }

/* ---------------- header ---------------- */
.hdr{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.95); backdrop-filter:blur(10px); border-bottom:1px solid var(--steel); }
.hdr::after{ content:""; display:block; height:2px;
  background:linear-gradient(to right,var(--green) 0 34%,var(--crimson) 34% 67%,var(--gold) 67% 100%); }
.hdr-in{ display:flex; align-items:center; gap:20px; min-height:82px; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.hdr-end{ flex:1 1 0; display:flex; justify-content:flex-end; align-items:center; }
.brand{ display:flex; align-items:center; text-decoration:none; flex:1 1 0; }
.brand img{ height:46px; width:auto; }
@media(max-width:520px){ .brand img{ height:38px; } }

.nav{ display:flex; gap:26px; align-items:center; flex:0 1 auto; justify-content:center; }
.nav a{ text-decoration:none; font-size:14px; font-weight:500; color:var(--slate); padding:6px 0;
  border-bottom:2px solid transparent; white-space:nowrap; }
.nav a:hover,.nav a:focus-visible{ color:var(--ink); border-bottom-color:var(--gold); }
.nav a[aria-current="page"]{ color:var(--ink); font-weight:600; border-bottom-color:var(--green); }
html[lang="ar"] .nav a{ font-size:15px; }
@media(max-width:1180px){ .nav{ gap:16px; } .nav a{ font-size:13.5px; } }

.lang{ flex:0 0 auto; display:inline-flex; align-items:stretch;
  border:1px solid var(--ink); background:transparent; padding:0; cursor:pointer; border-radius:1px;
  overflow:hidden; line-height:1; }
.lang span{ display:flex; align-items:center; justify-content:center; min-width:38px; padding:8px 10px;
  font-size:13px; font-weight:600; color:var(--slate); transition:background .18s ease,color .18s ease; }
.lang .s-en{ font-family:var(--f-lat); letter-spacing:.05em; }
.lang .s-ar{ font-family:var(--f-ar); font-size:16px; border-inline-start:1px solid var(--steel); }
.lang [data-on="true"]{ background:var(--ink); color:#fff; }
.lang:hover [data-on="false"]{ color:var(--ink); }

.burger{ display:none; margin-inline-start:auto; background:none; border:1px solid var(--steel);
  width:44px; height:40px; cursor:pointer; padding:0; border-radius:1px; }
.burger span{ display:block; width:20px; height:2px; background:var(--ink); margin:4px auto; }
@media(max-width:1040px){
  .burger{ display:block; order:2; }
  .hdr-end{ order:3; flex:0 0 auto; }
  .brand{ flex:0 0 auto; }
  .nav{ order:4; width:100%; margin:0; flex-direction:column; align-items:stretch; gap:0;
    max-height:0; overflow:hidden; transition:max-height .3s ease; }
  .nav.open{ max-height:calc(100vh - 96px); overflow-y:auto; padding-bottom:14px; }
  .nav a{ padding:13px 2px; border-bottom:1px solid var(--steel-2); }
  .nav a[aria-current="page"]{ border-bottom-color:var(--green); }
  .hdr-in{ flex-wrap:wrap; padding-block:12px; }
}

/* ---------------- home hero ---------------- */
.hero{ position:relative; background:var(--ink); overflow:hidden; min-height:min(90vh,860px); display:flex; }
/* hero slideshow: layered slides that cross-fade on a timer */
.hero-bg{ position:absolute; inset:0; }
.hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center 45%;
  filter:saturate(.55) contrast(1.05); opacity:0; transition:opacity 1.6s ease;
  animation:drift 26s ease-in-out infinite alternate; transform-origin:60% 45%; }
.hero-slide.on{ opacity:1; }

/* slide indicators */
.hero-dots{ display:flex; gap:9px; margin-top:44px; }
.hero-dots button{ width:34px; height:3px; padding:0; border:0; cursor:pointer;
  background:rgba(255,255,255,.28); transition:background .3s ease, width .3s ease; }
.hero-dots button[aria-current="true"]{ background:var(--gold); width:56px; }
.hero-dots button:hover{ background:rgba(255,255,255,.55); }
.hero .hero-dots{ opacity:0; transform:translateY(14px); }
.hero.ready .hero-dots{ opacity:1; transform:none; transition:opacity .6s ease .78s, transform .6s ease .78s; }
.hero-scrim{ position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(12,26,20,.35), rgba(12,26,20,.92) 88%),
             linear-gradient(to var(--flow-to), rgba(12,26,20,.94) 0%, rgba(12,26,20,.7) 46%, rgba(12,26,20,.15) 100%); }
.hero-in{ position:relative; width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:clamp(96px,12vw,140px) var(--gutter) clamp(150px,16vw,190px); color:#fff;
  display:flex; flex-direction:column; justify-content:center; }

/* engineering-drawing grid, drifting slowly behind the plant */
.hero-grid{ position:absolute; inset:-80px; pointer-events:none; opacity:.16;
  background-image:linear-gradient(to right, rgba(192,138,46,.55) 1px, transparent 1px),
                   linear-gradient(to bottom, rgba(192,138,46,.55) 1px, transparent 1px);
  background-size:76px 76px;
  animation:gridDrift 46s linear infinite; }
@keyframes gridDrift{ to{ transform:translate(76px,76px); } }

/* one orchestrated moment: a gold line passes down the whole hero on load */
.hero-scan{ position:absolute; inset-inline:0; top:0; height:2px; pointer-events:none; opacity:0;
  background:linear-gradient(to right, transparent, rgba(192,138,46,.9) 35%, #fff 50%, rgba(192,138,46,.9) 65%, transparent); }
.hero.ready .hero-scan{ animation:heroScan 2.4s .25s cubic-bezier(.45,0,.3,1) forwards; }
@keyframes heroScan{ 0%{ opacity:0; top:0; } 12%{ opacity:1; } 88%{ opacity:.85; } 100%{ opacity:0; top:100%; } }

/* headline lines rise out of a mask, in sequence */
.kin{ display:block; }
.kl{ display:block; overflow:hidden; padding-block:1px; }
.kl > span{ display:block; transform:translateY(112%); opacity:0; }
.hero.ready .kl > span{ transform:none; opacity:1;
  transition:transform .95s cubic-bezier(.16,.8,.24,1), opacity .7s ease; }
.hero.ready .kl:nth-child(2) > span{ transition-delay:.13s; }
.hero.ready .kl:nth-child(3) > span{ transition-delay:.26s; }
.hero .hero-tag, .hero .hero-lede, .hero .cta-row{ opacity:0; transform:translateY(14px); }
.hero.ready .hero-tag{ opacity:1; transform:none; transition:opacity .6s ease .05s, transform .6s ease .05s; }
.hero.ready .hero-lede{ opacity:1; transform:none; transition:opacity .6s ease .5s, transform .6s ease .5s; }
.hero.ready .cta-row{ opacity:1; transform:none; transition:opacity .6s ease .64s, transform .6s ease .64s; }
.hero h1{ font-size:clamp(2.05rem,5.6vw,4.15rem); max-width:16ch; color:#fff; text-wrap:balance; }
html[lang="ar"] .hero h1{ max-width:19ch; font-size:clamp(2rem,5vw,3.6rem); }
.hero-lede{ margin-top:26px; max-width:56ch; font-size:clamp(1rem,1.55vw,1.16rem);
  color:rgba(255,255,255,.8); line-height:1.7; }
.hero-tag{ display:inline-flex; align-items:center; gap:12px; margin-bottom:26px;
  font-size:13.5px; font-weight:500; color:var(--gold); }
.hero-tag::before{ content:""; width:34px; height:1px; background:var(--gold); }
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }

/* ---------------- inner page header ---------------- */
.phead{ position:relative; background:var(--ink); overflow:hidden; }
.phead-bg{ position:absolute; inset:0; background-size:cover; background-position:center;
  filter:saturate(.5) contrast(1.02); opacity:.5; }
.phead-scrim{ position:absolute; inset:0;
  background:linear-gradient(to var(--flow-to), rgba(12,26,20,.95) 0%, rgba(12,26,20,.72) 55%, rgba(12,26,20,.35) 100%); }
.phead-in{ position:relative; max-width:var(--wrap); margin-inline:auto;
  padding:clamp(56px,8vw,96px) var(--gutter) clamp(56px,8vw,92px); color:#fff; }
.phead h1{ font-size:clamp(1.9rem,4.2vw,3.1rem); max-width:20ch; color:#fff; }
html[lang="ar"] .phead h1{ font-size:clamp(1.7rem,3.8vw,2.7rem); }
.phead .lede{ margin-top:20px; max-width:60ch; color:rgba(255,255,255,.78); }
.crumb{ font-size:13.5px; color:rgba(255,255,255,.55); margin-bottom:16px; }
.crumb a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); }
.crumb a:hover{ color:var(--gold); border-bottom-color:var(--gold); }
.crumb .sep{ padding-inline:8px; color:var(--gold); }

/* ---------------- buttons ---------------- */
.btn{ display:inline-block; text-decoration:none; padding:15px 30px; font-size:15px; font-weight:600;
  border-radius:1px; border:1px solid transparent; transition:background .18s ease,color .18s ease,border-color .18s ease; }
.btn-solid{ background:var(--green); color:#fff; }
.btn-solid:hover{ background:#fff; color:var(--ink); }
.btn-ghost{ border-color:rgba(255,255,255,.42); color:#fff; }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.1); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:var(--green); }

/* ---------------- service rail, overlapping the hero ---------------- */
.rail-holder{
  --overlap:118px;
  position:relative; z-index:5; margin-top:calc(-1 * var(--overlap));
  padding-bottom:clamp(26px,3.5vw,44px);
  background:linear-gradient(to bottom, transparent var(--overlap), var(--ink) var(--overlap));
}
.rail{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); background:var(--ink-2);
  box-shadow:0 30px 54px -34px rgba(0,0,0,.8); }
.rail a{ position:relative; display:block; text-decoration:none; padding:30px 24px 34px;
  border-inline-end:1px solid rgba(255,255,255,.11); color:rgba(255,255,255,.62);
  font-size:13.5px; line-height:1.5; transition:background .3s ease; }
html[lang="ar"] .rail a{ font-size:14.5px; }
.rail a:last-child{ border-inline-end:0; }
.rail a::before{ content:""; position:absolute; top:0; inset-inline-start:0; width:100%; height:3px; }
.rail a:nth-child(1)::before{ background:var(--green); }
.rail a:nth-child(2)::before{ background:var(--gold); }
.rail a:nth-child(3)::before{ background:var(--crimson); }
.rail a:nth-child(4)::before{ background:var(--green); }
.rail a:nth-child(5)::before{ background:var(--gold); }
.rail a::after{ content:""; position:absolute; inset-inline-start:0; bottom:0; width:0; height:2px;
  background:var(--gold); transition:width .4s cubic-bezier(.4,0,.2,1); }
.rail a:hover, .rail a:focus-visible{ background:rgba(255,255,255,.05); color:rgba(255,255,255,.8); }
.rail a:hover::after, .rail a:focus-visible::after{ width:100%; }
.rail strong{ display:block; color:#fff; font-weight:600; font-size:15px; margin-bottom:6px; line-height:1.3; }
html[lang="ar"] .rail strong{ font-size:16px; }
@media(max-width:980px){
  .rail-holder{ --overlap:86px; }
  .rail{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rail a{ border-bottom:1px solid rgba(255,255,255,.11); }
  .rail a:nth-child(2n){ border-inline-end:0; }
  .rail a:last-child{ grid-column:1 / -1; }
}
@media(max-width:600px){
  .rail-holder{ --overlap:52px; }
  .rail{ grid-template-columns:1fr; }
  .rail a{ border-inline-end:0; }
  .rail a:last-child{ border-bottom:0; }
}

/* ---------------- value strip ---------------- */
.strip{ background:var(--ink-2); border-top:1px solid rgba(255,255,255,.09); }
.strip ul{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:repeat(3,1fr); }
.strip li{ padding:34px 26px 38px; color:rgba(255,255,255,.72); font-size:15px; line-height:1.55;
  border-inline-end:1px solid rgba(255,255,255,.12); position:relative; }
.strip li:first-child{ padding-inline-start:0; }
.strip li:last-child{ border-inline-end:0; padding-inline-end:0; }
.strip strong{ display:block; color:#fff; font-size:17px; font-weight:600; margin-bottom:8px; }
html[lang="ar"] .strip li{ font-size:16px; } html[lang="ar"] .strip strong{ font-size:18px; }
@media(max-width:820px){
  .strip ul{ grid-template-columns:1fr; }
  .strip li{ border-inline-end:0; border-bottom:1px solid rgba(255,255,255,.12); padding-inline:0; }
  .strip li:last-child{ border-bottom:0; }
}

/* ---------------- sections ---------------- */
.sec{ padding:clamp(64px,9vw,110px) 0; }
.sec-dark{ background:var(--ink); color:rgba(255,255,255,.82); }
.sec-dark h2,.sec-dark h3{ color:#fff; }
.sec-tint{ background:var(--steel-2); }
.sec-head{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); margin-bottom:clamp(36px,5vw,56px); }
.sec-head h2{ font-size:clamp(1.75rem,3.5vw,2.6rem); max-width:22ch; }
html[lang="ar"] .sec-head h2{ font-size:clamp(1.6rem,3.2vw,2.35rem); }
.sec-head p{ margin-top:18px; color:var(--slate); font-size:1.02rem; }
.sec-dark .sec-head p{ color:rgba(255,255,255,.66); }
.kicker{ display:flex; align-items:center; gap:12px; margin-bottom:18px; font-size:13px; font-weight:600; color:var(--gold-lo); }
.kicker::before{ content:""; width:26px; height:2px; background:var(--gold); flex:0 0 auto; }
.sec-dark .kicker{ color:var(--gold); }

/* ---------------- service rows (home) ---------------- */
.rows{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); display:grid; gap:clamp(48px,6vw,84px); }
.row{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(28px,4.5vw,60px); align-items:center; }
.row:nth-child(even) .row-media{ order:2; }
.row-media img{ width:100%; }
.row-body{ padding-inline-start:22px; border-inline-start:3px solid var(--steel); }
.row:nth-child(1) .row-body{ border-inline-start-color:var(--green); }
.row:nth-child(2) .row-body{ border-inline-start-color:var(--gold); }
.row:nth-child(3) .row-body{ border-inline-start-color:var(--crimson); }
.row:nth-child(4) .row-body{ border-inline-start-color:var(--green); }
.row:nth-child(5) .row-body{ border-inline-start-color:var(--gold); }
.row-body h3{ font-size:clamp(1.3rem,2.3vw,1.75rem); margin-bottom:14px; }
.row-body p{ color:var(--slate); font-size:1rem; }
.rowlink{ display:inline-block; margin-top:16px; text-decoration:none; font-weight:600; font-size:15px;
  color:var(--green); border-bottom:2px solid var(--gold); padding-bottom:2px; }
.rowlink:hover{ color:var(--ink); }
@media(max-width:860px){
  .row{ grid-template-columns:1fr; }
  .row:nth-child(even) .row-media{ order:0; }
}

/* ---------------- split (media + blocks) ---------------- */
.split{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(30px,5vw,68px); align-items:start; }
.split-media{ position:sticky; top:112px; }
.split-media img{ width:100%; }
.split-media .reveal{ display:block; }
.media-cap{ margin-top:14px; font-size:13.5px; color:var(--slate); padding-inline-start:14px; border-inline-start:2px solid var(--gold); }
.sec-dark .media-cap{ color:rgba(255,255,255,.6); }
@media(max-width:900px){ .split{ grid-template-columns:1fr; } .split-media{ position:static; } }

.block{ padding-inline-start:22px; border-inline-start:3px solid var(--steel); margin-bottom:38px; }
.block:last-child{ margin-bottom:0; }
.block-green{ border-inline-start-color:var(--green); }
.block-red{ border-inline-start-color:var(--crimson); }
.block-gold{ border-inline-start-color:var(--gold); }
.block h3{ font-size:1.16rem; margin-bottom:12px; }
html[lang="ar"] .block h3{ font-size:1.22rem; }
.block p{ color:var(--slate); font-size:.98rem; }
.sec-dark .block{ border-inline-start-color:rgba(255,255,255,.2); }
.sec-dark .block p{ color:rgba(255,255,255,.66); }

.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tags li{ font-size:13.5px; line-height:1.4; padding:7px 13px; background:#fff; border:1px solid var(--steel); color:var(--ink); border-radius:1px; }
html[lang="ar"] .tags li{ font-size:14.5px; }
.sec-dark .tags li{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.86); }

.ticks li{ position:relative; padding-inline-start:20px; margin-bottom:9px; font-size:.98rem; color:var(--slate); }
html[lang="ar"] .ticks li{ font-size:1.02rem; }
.ticks li::before{ content:""; position:absolute; inset-inline-start:0; top:.62em; width:7px; height:7px; background:var(--gold); }
.sec-dark .ticks li{ color:rgba(255,255,255,.72); }

/* ---------------- image band ---------------- */
.band img{ width:100%; height:clamp(240px,34vw,420px); object-fit:cover; }

/* ---------------- pipeline ---------------- */
.pipe-wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.pipe{ position:relative; height:34px;
  background:linear-gradient(to bottom,#7B8A82 0%,#C6CEC8 22%,#8C9A92 55%,#556259 100%);
  border-block:1px solid #46524B; }
.pipe::after{ content:""; position:absolute; inset-inline:0; top:50%; height:1px; background:rgba(255,255,255,.35); }
.pipe-flow{ position:absolute; inset:0; opacity:.5;
  background:repeating-linear-gradient(to var(--flow-to), transparent 0 46px, rgba(255,255,255,.55) 46px 54px, transparent 54px 100px);
  animation:flow 3.2s linear infinite; }
@keyframes flow{ to{ background-position-x:100px; } }
html[dir="rtl"] .pipe-flow{ animation-direction:reverse; }
@media (prefers-reduced-motion: reduce){ .pipe-flow{ animation:none; } }

.stations{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--steel); border-top:0; background:#fff; }
.station{ padding:34px clamp(20px,2.6vw,34px) 38px; border-inline-end:1px solid var(--steel); position:relative; }
.station:last-child{ border-inline-end:0; }
.station::before{ content:""; position:absolute; top:-1px; inset-inline-start:0; width:100%; height:4px; }
.station:nth-child(1)::before{ background:var(--green); }
.station:nth-child(2)::before{ background:var(--gold); }
.station:nth-child(3)::before{ background:var(--crimson); }
.station .stage{ font-family:var(--f-lat); font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--slate); margin-bottom:10px; display:block; }
.station h3{ font-size:1.24rem; margin-bottom:8px; }
.station .st-sub{ font-size:.93rem; color:var(--slate); margin-bottom:20px; }
.station .ticks li{ font-size:.95rem; }
@media(max-width:820px){
  .stations{ grid-template-columns:1fr; }
  .station{ border-inline-end:0; border-bottom:1px solid var(--steel); }
  .station:last-child{ border-bottom:0; }
}

/* ---------------- systems grid ----------------
   Light by default; .sec-dark repaints it. Without the light case it
   rendered white-on-white anywhere outside a dark section.            */
.sysgrid-wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
/* both grids hold six items, so three columns fill two rows exactly */
.sysgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--steel); border-inline-start:1px solid var(--steel); }
@media(max-width:820px){ .sysgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px){ .sysgrid{ grid-template-columns:1fr; } }
.sysgrid li{ padding:24px 22px; font-size:1rem; color:var(--ink); font-weight:500;
  display:flex; align-items:flex-start; gap:12px; line-height:1.45; background:#fff;
  border-bottom:1px solid var(--steel); border-inline-end:1px solid var(--steel); }
.sec-tint .sysgrid li{ background:var(--paper); }
.sysgrid li::before{ content:""; flex:0 0 auto; width:9px; height:9px; margin-top:.42em; background:var(--gold); transform:rotate(45deg); }

.sec-dark .sysgrid{ border-top-color:rgba(255,255,255,.16); border-inline-start-color:rgba(255,255,255,.16); }
.sec-dark .sysgrid li{ color:#fff; background:transparent;
  border-bottom-color:rgba(255,255,255,.16); border-inline-end-color:rgba(255,255,255,.16); }

/* ---------------- duo ---------------- */
.duo{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,3.5vw,44px); }
.duo article img{ width:100%; height:250px; object-fit:cover; }
.duo article h3{ font-size:1.14rem; margin:20px 0 10px; }
.duo article p{ color:var(--slate); font-size:.97rem; margin:0 0 14px; }
@media(max-width:760px){ .duo{ grid-template-columns:1fr; } }

/* ---------------- contact ---------------- */
.contact{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:start; }
@media(max-width:880px){ .contact{ grid-template-columns:1fr; } }
.cdl{ display:grid; border-top:1px solid var(--steel); }
.cdl div{ display:grid; grid-template-columns:130px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--steel); }
.cdl dt{ font-size:13.5px; color:var(--gold-lo); }
.cdl dd{ margin:0; font-size:1.03rem; }
.cdl dd a{ text-decoration:none; border-bottom:1px solid var(--steel); }
.cdl dd a:hover{ color:var(--green); border-bottom-color:var(--green); }
.sec-dark .cdl{ border-top-color:rgba(255,255,255,.18); }
.sec-dark .cdl div{ border-bottom-color:rgba(255,255,255,.18); }
.sec-dark .cdl dt{ color:var(--gold); }
.sec-dark .cdl dd{ color:#fff; }
.sec-dark .cdl dd a{ border-bottom-color:rgba(255,255,255,.35); }
.sec-dark .cdl dd a:hover{ color:var(--gold); border-bottom-color:var(--gold); }
@media(max-width:880px){ .cdl div{ grid-template-columns:1fr; gap:4px; } }


/* ---------------- CTA strip ---------------- */
.cta{ background:var(--green); color:#fff; }
.cta-in{ max-width:var(--wrap); margin-inline:auto; padding:clamp(44px,6vw,72px) var(--gutter);
  display:flex; flex-wrap:wrap; gap:26px 40px; align-items:center; justify-content:space-between; }
.cta-text{ max-width:62ch; }
.cta-in h2{ font-size:clamp(1.5rem,3vw,2.15rem); color:#fff; max-width:22ch; }
.cta-in p{ margin:14px 0 0; color:rgba(255,255,255,.88); font-size:1.02rem; max-width:58ch; }
html[lang="ar"] .cta-in p{ font-size:1.06rem; }
.cta .btn{ background:#fff; color:var(--ink); }
.cta .btn:hover{ background:var(--ink); color:#fff; }

/* ---------------- footer ---------------- */
.ftr{ background:var(--ink-3); color:rgba(255,255,255,.6); font-size:14.5px; }
.ftr-top{ max-width:var(--wrap); margin-inline:auto; padding:clamp(44px,6vw,64px) var(--gutter);
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px 40px; }
@media(max-width:820px){ .ftr-top{ grid-template-columns:1fr; } }
.ftr h4{ color:#fff; font-size:14px; margin-bottom:16px; }
.ftr-links li{ margin-bottom:10px; }
.ftr-links a{ text-decoration:none; }
.ftr-links a:hover{ color:var(--gold); }
.ftr-brand img{ height:52px; width:auto; background:#fff; padding:8px 12px; border-radius:1px; }
.ftr-brand p{ margin-top:18px; max-width:36ch; font-size:14px; }
.ftr-bot{ max-width:var(--wrap); margin-inline:auto; padding:22px var(--gutter);
  display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.12); font-size:13.5px; }
.ftr-bot a{ color:#fff; text-decoration:none; border-bottom:1px solid var(--gold); }
.ftr-bot a:hover{ color:var(--gold); }



/* ============================================================
   MEGA MENU
   ============================================================ */
.nav-item{ display:flex; align-items:center; }
.mega-btn{
  font:inherit; font-size:14px; font-weight:500; color:var(--slate);
  background:none; border:0; padding:6px 0; cursor:pointer;
  border-bottom:2px solid transparent; display:inline-flex; align-items:center; gap:7px;
  white-space:nowrap;
}
html[lang="ar"] .mega-btn{ font-size:15px; }
.mega-btn:hover, .nav-item.open .mega-btn{ color:var(--ink); border-bottom-color:var(--gold); }
.mega-btn[aria-current="page"]{ color:var(--ink); font-weight:600; border-bottom-color:var(--green); }
.mega-btn .chev{ display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background:var(--gold); color:#fff; flex:0 0 auto; transition:transform .3s cubic-bezier(.3,.7,.2,1), background .2s ease; }
.mega-btn .chev svg{ width:11px; height:11px; display:block; }
.mega-btn:hover .chev{ background:var(--green); }
.nav-item.open .mega-btn .chev{ transform:rotate(180deg); background:var(--green); }

.mega{
  position:absolute; inset-inline:0; top:calc(100% + 2px);
  background:#fff; border-bottom:1px solid var(--steel);
  box-shadow:0 22px 44px -26px rgba(12,26,20,.5);
  clip-path:inset(0 0 100% 0); pointer-events:none;
  transition:clip-path .34s cubic-bezier(.6,0,.2,1);
  z-index:99;
}
.nav-item.open .mega{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.mega-in{ max-width:var(--wrap); margin-inline:auto; padding:30px var(--gutter) 12px;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px; }
.nav .mega-card, .nav .mega-card *{ white-space:normal; }
.nav .mega-card{ padding:0; border-bottom:0; font-size:inherit; font-weight:400; color:inherit; }
.nav .mega-card:hover, .nav .mega-card:focus-visible{ border-bottom-color:transparent; }
.mega-card{ text-decoration:none; display:block; }
.mega-thumb{ display:block; position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--steel); }
.mega-thumb img{ width:100%; height:100%; object-fit:cover;
  transform:scale(1.02); transition:transform .6s cubic-bezier(.2,.6,.2,1), filter .6s ease; filter:saturate(.75); }
.mega-thumb::after{ content:""; position:absolute; top:0; inset-inline-start:0; width:100%; height:3px; background:var(--steel); transition:background .25s ease; }
.mega-card:nth-child(1) .mega-thumb::after{ background:var(--green); }
.mega-card:nth-child(2) .mega-thumb::after{ background:var(--gold); }
.mega-card:nth-child(3) .mega-thumb::after{ background:var(--crimson); }
.mega-card:nth-child(4) .mega-thumb::after{ background:var(--green); }
.mega-card:nth-child(5) .mega-thumb::after{ background:var(--gold); }
.mega-card:hover .mega-thumb img, .mega-card:focus-visible .mega-thumb img{ transform:scale(1.1); filter:saturate(1.05); }
.mega-card h4{ font-size:14.5px; margin:13px 0 6px; line-height:1.35; min-height:2.7em;
  display:flex; align-items:flex-end; }
html[lang="ar"] .mega-card h4{ font-size:15.5px; }
.mega-card p{ font-size:12.8px; line-height:1.5; color:var(--slate); margin:0; max-width:none; }
html[lang="ar"] .mega-card p{ font-size:13.8px; }
.mega-card:hover h4{ color:var(--green); }
.mega-foot{ border-top:1px solid var(--steel); margin-top:8px; }
.mega-foot div{ max-width:var(--wrap); margin-inline:auto; padding:14px var(--gutter);
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; justify-content:space-between; font-size:13.5px; color:var(--slate); }
.nav .mega-foot a{ white-space:normal; padding:0; border-bottom:2px solid var(--gold); }
.mega-foot a{ text-decoration:none; font-weight:600; color:var(--green); border-bottom:2px solid var(--gold); padding-bottom:2px; }
.mega-foot a:hover{ color:var(--ink); }

@media(max-width:1180px){ .mega-in{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1040px){
  .nav-item{ display:block; }
  .mega-btn{ width:100%; justify-content:space-between; padding:13px 2px; border-bottom:1px solid var(--steel-2); }
  .mega{ position:static; box-shadow:none; border-bottom:0; clip-path:none;
    max-height:0; overflow:hidden; transition:max-height .34s ease; background:var(--steel-2); }
  .nav-item.open .mega{ max-height:1400px; }
  .mega-in{ grid-template-columns:1fr; gap:0; padding:6px 0 0; }
  .mega-card{ display:grid; grid-template-columns:72px minmax(0,1fr); column-gap:14px; row-gap:3px;
    align-items:center; padding:12px 4px; border-bottom:1px solid var(--steel); }
  .mega-thumb{ aspect-ratio:1/1; grid-column:1; grid-row:1 / span 2; align-self:start; }
  .mega-card h4{ grid-column:2; grid-row:1; margin:0; align-self:end; min-height:0; display:block; }
  .mega-card p{ grid-column:2; grid-row:2; align-self:start; }
  .mega-foot div{ padding:14px 4px; }
}

/* ============================================================
   MOTION — one vocabulary: everything moves along the flow
   ============================================================ */

/* flow reveal: media wipes in along the reading direction.
   The clip sits on the image, not the wrapper — a fully clipped wrapper
   never reports as intersecting, so it could never reveal itself. */
.reveal{ overflow:hidden; }
.reveal > img{ clip-path:inset(0 100% 0 0); transform:scale(1.09); transform-origin:center; }
html[dir="rtl"] .reveal > img{ clip-path:inset(0 0 0 100%); }
.reveal.in > img{ clip-path:inset(0 0 0 0); transform:scale(1);
  transition:clip-path 1s cubic-bezier(.62,0,.2,1), transform 1.5s cubic-bezier(.2,.6,.2,1); }

/* inspection sweep: a gold line passes over the image, like an NDT scan */
.sweep{ position:relative; }
.sweep::after{
  content:""; position:absolute; inset-inline:0; top:-24%; height:16%; pointer-events:none;
  background:linear-gradient(to bottom, rgba(192,138,46,0), rgba(192,138,46,.6), rgba(255,255,255,.35), rgba(192,138,46,0));
  opacity:0; mix-blend-mode:screen;
}
.sweep:hover::after, .sweep:focus-within::after, .sweep.scan::after{ animation:scan 1.15s cubic-bezier(.5,0,.5,1); }
@keyframes scan{ 0%{ opacity:0; top:-24%; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ opacity:0; top:108%; } }
.sweep > img{ transition:transform .9s cubic-bezier(.2,.6,.2,1), filter .9s ease; }
.sweep:hover > img{ transform:scale(1.035); filter:saturate(1.12) contrast(1.03); }

/* slow drift, so the plant never sits completely still */
@keyframes drift{ from{ transform:scale(1.05); } to{ transform:scale(1.16) translate3d(-1.6%,-1.2%,0); } }

/* staggered entrances that follow the flow direction */
:root{ --dx:-20px; }
html[dir="rtl"]{ --dx:20px; }
.flowin{ opacity:0; transform:translateX(var(--dx)); }
.flowin.in{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.3,.7,.2,1); }
.flowin.in:nth-child(2){ transition-delay:.16s; }
.flowin.in:nth-child(3){ transition-delay:.32s; }

/* rising entrance for text blocks */
.riseup{ opacity:0; transform:translateY(16px); }
.riseup.in{ opacity:1; transform:none; transition:opacity .65s ease, transform .65s cubic-bezier(.3,.7,.2,1); }

@media (prefers-reduced-motion: reduce){
  .reveal > img, html[dir="rtl"] .reveal > img{ clip-path:none; transform:none; }
  .flowin, .riseup{ opacity:1; transform:none; }
  .hero-slide{ animation:none; transform:scale(1.05); transition:none; }
  .sweep::after{ display:none; }
  .sweep:hover > img{ transform:none; }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.lead-2col{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,64px); align-items:start; }
@media(max-width:880px){ .lead-2col{ grid-template-columns:1fr; } }
.lead-2col .big{ font-size:clamp(1.35rem,2.5vw,1.75rem); line-height:1.45; font-weight:600; letter-spacing:-.015em; }
html[lang="ar"] .lead-2col .big{ line-height:1.7; letter-spacing:0; }
.lead-2col .body p{ color:var(--slate); }

/* process ladder — the only place numbers are used, because it is a sequence */
.ladder{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); position:relative; }
.ladder-line{ position:absolute; inset-inline-start:calc(var(--gutter) + 25px); top:8px; bottom:40px; width:2px;
  background:linear-gradient(to bottom,var(--gold),rgba(192,138,46,.15));
  transform:scaleY(0); transform-origin:top; }
.ladder-line.in{ transform:scaleY(1); transition:transform 1.4s cubic-bezier(.5,0,.2,1); }
.step{ display:grid; grid-template-columns:52px 1fr; gap:clamp(18px,3vw,34px); padding-bottom:36px; position:relative; }
.step:last-child{ padding-bottom:0; }
.step .num{ width:52px; height:52px; display:grid; place-items:center; background:var(--paper);
  border:2px solid var(--gold); color:var(--ink); font-family:var(--f-lat); font-weight:700; font-size:17px;
  border-radius:50%; position:relative; z-index:2; }
.sec-tint .step .num{ background:var(--steel-2); }
.step h3{ font-size:1.16rem; margin-bottom:8px; padding-top:11px; }
.step p{ color:var(--slate); font-size:.98rem; margin:0; }
@media(max-width:560px){
  .ladder-line{ inset-inline-start:calc(var(--gutter) + 21px); }
  .step{ grid-template-columns:44px 1fr; gap:16px; }
  .step .num{ width:44px; height:44px; font-size:15px; }
  .step h3{ padding-top:7px; }
}

/* sector chips */
.sectors-wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.sectors{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--steel); border-inline-start:1px solid var(--steel); }
@media(max-width:820px){ .sectors{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px){ .sectors{ grid-template-columns:1fr; } }
.sectors li{ padding:26px 24px; border-bottom:1px solid var(--steel); border-inline-end:1px solid var(--steel);
  font-size:1.02rem; font-weight:500; position:relative; background:#fff; }
.sectors li span{ display:block; }
.sectors li .s-name{ font-size:1.06rem; font-weight:600; color:var(--ink); }
.sectors li .s-name + span{ font-size:.92rem; font-weight:400; color:var(--slate); margin-top:7px; }
.sectors li::before{ content:""; position:absolute; top:0; inset-inline-start:0; width:0; height:3px;
  background:var(--green); transition:width .45s cubic-bezier(.4,0,.2,1); }
.sectors li:hover::before{ width:100%; }

/* services hub cards */
.hub{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:clamp(24px,3vw,38px); }
.hub article{ background:#fff; border:1px solid var(--steel); display:flex; flex-direction:column; }
.hub .hub-media{ aspect-ratio:16/9; }
.hub .hub-media img{ width:100%; height:100%; object-fit:cover; }
.hub .hub-body{ padding:24px 24px 26px; border-top:3px solid var(--steel); flex:1; display:flex; flex-direction:column; }
.hub article:nth-child(1) .hub-body{ border-top-color:var(--green); }
.hub article:nth-child(2) .hub-body{ border-top-color:var(--gold); }
.hub article:nth-child(3) .hub-body{ border-top-color:var(--crimson); }
.hub article:nth-child(4) .hub-body{ border-top-color:var(--green); }
.hub article:nth-child(5) .hub-body{ border-top-color:var(--gold); }
.hub h3{ font-size:1.2rem; margin-bottom:10px; }
.hub p{ color:var(--slate); font-size:.96rem; flex:1; }
.hub .rowlink{ margin-top:6px; align-self:flex-start; }

/* ---------------- contact: direct-reach panel (replaces the form) ---------------- */
.reach{ border:1px solid rgba(255,255,255,.2); padding:clamp(28px,4vw,44px); background:rgba(255,255,255,.035); }
.reach h3{ font-size:clamp(1.3rem,2.4vw,1.75rem); margin-bottom:14px; }
.reach p{ color:rgba(255,255,255,.7); }
.reach .mail{
  display:inline-block; margin-top:10px; font-family:var(--f-lat);
  font-size:clamp(1.05rem,2.2vw,1.5rem); font-weight:600; color:#fff; text-decoration:none;
  border-bottom:2px solid var(--gold); padding-bottom:4px; word-break:break-word;
}
.reach .mail:hover{ color:var(--gold); }
.reach .btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.reach .note{ margin:22px 0 0; font-size:13.5px; color:rgba(255,255,255,.5); }

/* hero entrance respects reduced motion */
@media (prefers-reduced-motion: reduce){
  .kl > span, .hero .hero-tag, .hero .hero-lede, .hero .cta-row{ opacity:1; transform:none; }
  .hero-grid{ animation:none; }
  .hero .hero-dots{ opacity:1; transform:none; }
  .hero.ready .hero-scan{ animation:none; opacity:0; }
}

/* ---------------- contact form ---------------- */
.form{ display:grid; gap:16px; }
.field{ display:grid; gap:7px; }
.field label{ font-size:13.5px; font-weight:600; color:var(--gold); }
.field input,.field select,.field textarea{
  font-family:var(--f); font-size:16px; color:#fff; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.22); border-radius:1px; padding:14px; width:100%;
  transition:border-color .2s ease, background .2s ease; }
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold); outline:none; background:rgba(255,255,255,.1); }
.field input::placeholder,.field textarea::placeholder{ color:rgba(255,255,255,.38); }
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(1.35em),calc(100% - 14px) calc(1.35em);
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
html[dir="rtl"] .field select{ background-position:20px calc(1.35em),26px calc(1.35em); }
.field select option{ color:#111; background:#fff; }
/* nothing chosen yet: the select is :invalid, so show it like the other placeholders */
.field select:invalid{ color:rgba(255,255,255,.38); }
.form-note{ font-size:13.5px; color:rgba(255,255,255,.5); margin:0; }
.form-note a{ color:rgba(255,255,255,.8); white-space:nowrap; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:520px){ .two{ grid-template-columns:1fr; } }

.form-status{ margin:0 0 20px; padding:15px 18px; border-radius:1px; font-size:15px; font-weight:500; }
.form-status[data-state="ok"]{ background:rgba(14,122,60,.24); border:1px solid var(--green); color:#fff; }
.form-status[data-state="fail"]{ background:rgba(179,24,31,.22); border:1px solid var(--crimson); color:#fff; }

/* honeypot: hidden from people and screen readers, visible to bots */
.hp{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
     clip-path:inset(50%); white-space:nowrap; border:0; }

/* ============================================================
   SUPPLY CHAIN — six stages from manufacturer to site.
   Genuinely a sequence, so numbered markers are earned here.
   ============================================================ */
.chain-wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.chain{ position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; }

/* the line the stages sit on */
.chain::before{
  content:""; position:absolute; top:26px; height:4px; z-index:0;
  inset-inline-start:calc(100% / 12); inset-inline-end:calc(100% / 12);
  background:linear-gradient(to bottom,#7B8A82 0%,#C6CEC8 26%,#8C9A92 60%,#556259 100%);
  border-block:1px solid rgba(70,82,75,.6);
  transform:scaleX(0); transform-origin:var(--flow-from,left);
}
html[dir="rtl"] .chain::before{ --flow-from:right; }
.chain.in::before{ transform:scaleX(1); transition:transform 1.5s cubic-bezier(.5,0,.2,1); }

/* flow markers travelling along it */
.chain::after{
  content:""; position:absolute; top:28px; height:2px; z-index:1; opacity:0;
  inset-inline-start:calc(100% / 12); inset-inline-end:calc(100% / 12);
  background:repeating-linear-gradient(to var(--flow-to), transparent 0 30px,
    rgba(255,255,255,.7) 30px 38px, transparent 38px 68px);
  animation:flow 2.6s linear infinite;
}
.chain.in::after{ opacity:.55; transition:opacity .6s ease 1.3s; }
html[dir="rtl"] .chain::after{ animation-direction:reverse; }

.stage-node{ position:relative; z-index:2; text-align:center; padding-inline:8px; }
.stage-node .dot{
  width:56px; height:56px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper); border:3px solid var(--steel); color:var(--slate);
  font-family:var(--f-lat); font-weight:700; font-size:17px;
  transform:scale(.4); opacity:0;
}
.sec-tint .stage-node .dot{ background:var(--steel-2); }
.sec-dark .stage-node .dot{ background:var(--ink); }
.chain.in .stage-node .dot{ transform:none; opacity:1;
  transition:transform .5s cubic-bezier(.34,1.4,.5,1), opacity .35s ease, border-color .4s ease, color .4s ease; }
.chain.in .stage-node:nth-child(1) .dot{ transition-delay:.15s; }
.chain.in .stage-node:nth-child(2) .dot{ transition-delay:.37s; }
.chain.in .stage-node:nth-child(3) .dot{ transition-delay:.59s; }
.chain.in .stage-node:nth-child(4) .dot{ transition-delay:.81s; }
.chain.in .stage-node:nth-child(5) .dot{ transition-delay:1.03s; }
.chain.in .stage-node:nth-child(6) .dot{ transition-delay:1.25s; }
.chain.in .stage-node:nth-child(1) .dot,
.chain.in .stage-node:nth-child(4) .dot{ border-color:var(--green); color:var(--green); }
.chain.in .stage-node:nth-child(2) .dot,
.chain.in .stage-node:nth-child(5) .dot{ border-color:var(--gold); color:var(--gold-lo); }
.chain.in .stage-node:nth-child(3) .dot,
.chain.in .stage-node:nth-child(6) .dot{ border-color:var(--crimson); color:var(--crimson); }
.sec-dark .chain.in .stage-node .dot{ color:#fff; }
.stage-node h3{ font-size:1rem; margin-bottom:6px; line-height:1.3; min-height:2.6em; }
html[lang="ar"] .stage-node h3{ font-size:1.06rem; }
.stage-node p{ font-size:.86rem; color:var(--slate); margin:0; max-width:none; }
html[lang="ar"] .stage-node p{ font-size:.92rem; }
.sec-dark .stage-node p{ color:rgba(255,255,255,.62); }

@media(max-width:1040px){ .chain{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:44px; }
  .chain::before,.chain::after{ display:none; } }
@media(max-width:620px){
  .chain{ grid-template-columns:1fr; row-gap:0; }
  .stage-node h3{ min-height:0; }
  .stage-node{ display:grid; grid-template-columns:56px minmax(0,1fr); gap:18px; text-align:start;
    padding-bottom:30px; padding-inline:0; }
  .stage-node .dot{ margin:0; }
  .stage-node .body{ padding-top:12px; }
  .stage-node:not(:last-child)::after{ content:""; position:absolute; top:56px; bottom:2px;
    inset-inline-start:26px; width:3px; background:var(--steel); }
}

/* ============================================================
   PILLARS — what we do, three of them
   ============================================================ */
.pillars-wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.pillars{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
  background:var(--steel); border:1px solid var(--steel); }
.pillars article{ background:#fff; padding:clamp(28px,3.4vw,42px); position:relative; }
.sec-tint .pillars article{ background:var(--paper); }
.pillars article::before{ content:""; position:absolute; top:0; inset-inline-start:0; width:100%; height:4px; }
.pillars article:nth-child(1)::before{ background:var(--green); }
.pillars article:nth-child(2)::before{ background:var(--gold); }
.pillars article:nth-child(3)::before{ background:var(--crimson); }
.pillars h3{ font-size:1.18rem; margin-bottom:12px; }
html[lang="ar"] .pillars h3{ font-size:1.26rem; }
.pillars p{ color:var(--slate); font-size:.98rem; margin:0; }
@media(max-width:860px){ .pillars{ grid-template-columns:1fr; } }

/* ============================================================
   EDGE — why buy through us, five reasons
   ============================================================ */
.edge-wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.edge{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border-top:1px solid rgba(255,255,255,.16); border-inline-start:1px solid rgba(255,255,255,.16); }
.edge li{ padding:28px 26px 32px; border-bottom:1px solid rgba(255,255,255,.16);
  border-inline-end:1px solid rgba(255,255,255,.16); position:relative; }
.edge li::before{ content:""; position:absolute; top:28px; inset-inline-start:0; width:3px; height:26px; background:var(--gold); }
.edge strong{ display:block; color:#fff; font-size:1.04rem; font-weight:600; margin-bottom:9px; }
html[lang="ar"] .edge strong{ font-size:1.12rem; }
.edge span{ color:rgba(255,255,255,.65); font-size:.95rem; line-height:1.6; }
html[lang="ar"] .edge span{ font-size:1rem; }

/* ============================================================
   SPEC — product line-item columns
   ============================================================ */
.spec{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1px;
  background:var(--steel); border:1px solid var(--steel); }
.spec > div{ background:#fff; padding:24px 22px 26px; }
.sec-tint .spec > div{ background:var(--paper); }
.spec h4{ font-size:.98rem; margin-bottom:14px; padding-bottom:12px; border-bottom:2px solid var(--gold);
  min-height:calc(2.6em + 12px); display:flex; align-items:flex-end; }
.spec li{ font-size:.95rem; color:var(--slate); padding-block:6px; border-bottom:1px solid var(--steel-2); }
.spec li:last-child{ border-bottom:0; }
html[lang="ar"] .spec li{ font-size:1rem; }


@media (prefers-reduced-motion: reduce){
  .chain::before{ transform:none; }
  .chain::after{ animation:none; }
  .stage-node .dot{ transform:none; opacity:1; }
}