/* ————————————————————————————————
   BINYAPI Arabia — design language:
   steel plate / blueprint / editorial
   ———————————————————————————————— */
:root{
  --paper:#f2efe8;
  --paper-2:#eae6dc;
  --ink:#15181c;
  --ink-2:#22262c;
  --amber:#e39312;
  --amber-hot:#f5ad2e;
  --line:rgba(21,24,28,.16);
  --line-soft:rgba(21,24,28,.08);
  --line-inv:rgba(242,239,232,.16);
  --muted:#484c54;
  --muted-inv:#9a9da4;
  --chamfer:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--amber);color:var(--ink)}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;max-width:100%}
body{
  font-family:'IBM Plex Sans Arabic',sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:2;
  font-weight:400;
  overflow-x:hidden;
  overflow-x:clip;
  max-width:100%;
  position:relative;
}
html[lang="en"] body{font-family:'IBM Plex Sans',sans-serif;line-height:1.8}
/* faint blueprint grid — anchored to the page so it scrolls with the content */
body::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:72px 72px;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
[id]{scroll-margin-top:96px} /* anchored sections land below the fixed header */
.mono{font-family:'IBM Plex Mono',monospace;direction:ltr;letter-spacing:.08em}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px;position:relative;z-index:1}

/* reveal-on-scroll — only hidden when JS is confirmed running (html.js),
   so content is never invisible if scripts are blocked or fail.
   Uses animation (not transition) so each element's own hover transitions stay live. */
html.js .rv{opacity:0}
html.js .rv.in{opacity:1;animation:rvIn .9s var(--ease) both}
@keyframes rvIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
html.js .rv.in.d1{animation-delay:.08s}
html.js .rv.in.d2{animation-delay:.16s}
html.js .rv.in.d3{animation-delay:.24s}
html.js .rv.in.d4{animation-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .rv,html.js .rv,html.js .rv.in{opacity:1;transform:none;transition:none;animation:none}
  html{scroll-behavior:auto}
  .tick-track,footer::before,.page-head .crumb,.hero .tower{animation:none!important}
  html.js .goals-band li{opacity:1;transform:none;transition:none}
}

/* ————— header ————— */
header{
  position:fixed;top:0;inset-inline:0;z-index:50;
  background:transparent;transition:background .4s,border-color .4s,box-shadow .4s;
  border-bottom:1px solid transparent;
}
header.solid{background:rgba(242,239,232,.92);backdrop-filter:blur(10px);border-bottom-color:var(--line)}
/* if JS never runs, keep the header solid so text can't scroll through it */
html:not(.js) header{background:rgba(242,239,232,.95);border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
/* — logo lockup: coil seal + high-contrast serif wordmark — */
.brand .seal{width:42px;height:42px;color:var(--amber);display:flex;flex-shrink:0}
.brand .seal svg{width:100%;height:100%;transition:transform .6s var(--ease)}
.brand:hover .seal svg{transform:rotate(35deg)}
.lgk{line-height:1;direction:ltr;text-align:left}
.lgk b{
  font-family:'Playfair Display',serif;font-weight:700;font-size:1.55rem;
  color:var(--ink);display:block;letter-spacing:.005em;
}
.lgk i{
  font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:.55rem;
  letter-spacing:.5em;color:var(--amber);display:block;margin-top:3px;
}
footer .lgk b{color:var(--paper)}
.f-logo{margin-bottom:16px}
.f-logo .seal{width:48px;height:48px}
.f-logo .lgk b{font-size:1.8rem}
.brand .bolt{
  width:40px;height:40px;background:var(--ink);color:var(--amber);
  display:flex;align-items:center;justify-content:center;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  transition:background .3s,color .3s;
}
.brand .bolt svg{width:20px;height:20px;transition:transform .35s var(--ease)}
.brand:hover .bolt{background:var(--amber);color:var(--ink)}
.brand:hover .bolt svg{transform:scale(1.15) rotate(-8deg)}
.brand .t b{display:block;font-weight:700;font-size:1.02rem;line-height:1.4}
.brand .t span{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.28em;color:var(--muted)}
.nav-side{display:flex;align-items:center;gap:14px}
nav ul{display:flex;gap:2px}
nav a{
  position:relative;display:block;padding:6px 13px;font-size:.88rem;font-weight:500;color:var(--ink);
}
nav a::after{
  content:"";position:absolute;inset-inline:13px;bottom:2px;height:2px;background:var(--amber);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .35s var(--ease);
}
nav a:hover::after{transform:scaleX(1);transform-origin:0 50%}
nav a.on{font-weight:700}
nav a.on::after{transform:scaleX(1)}
.lang-sw{
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.2em;
  border:1px solid var(--line);padding:8px 16px;direction:ltr;
  transition:background .3s,color .3s,border-color .3s;white-space:nowrap;
}
.lang-sw:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.menu-btn{display:none;background:none;border:1px solid var(--line);width:42px;height:42px;cursor:pointer;font-size:1.1rem;color:var(--ink)}

/* amber reading-progress bar */
.progress{
  position:fixed;top:0;inset-inline-start:0;height:3px;width:0;
  background:var(--amber);z-index:60;pointer-events:none;
}

/* ————— hero (home) ————— */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;padding:0;padding-top:120px;overflow:hidden;
}
/* hero relies on the single page-anchored grid — no second offset grid (was causing half-cut squares) */
.hero .grid-lines{display:none}
.hero .tower{
  position:absolute;inset-inline-start:4%;bottom:0;height:86%;opacity:.3;pointer-events:none;
  animation:hum 8s ease-in-out 4.5s infinite alternate; /* faint breathing after the draw */
}
@keyframes hum{from{opacity:.3}to{opacity:.42}}
.hero .tower path,.hero .tower line{
  stroke:var(--ink);stroke-width:1.1;fill:none;
  stroke-dasharray:1600;stroke-dashoffset:1600;
  animation:draw 3.2s var(--ease) .3s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-head{position:relative;padding-bottom:64px;z-index:1}
/* soft paper glow lifts the headline off the grid without hiding it */
.hero-head::before{
  content:"";position:absolute;z-index:-1;
  inset-block:-60px -20px;inset-inline:0 10%;
  background:radial-gradient(ellipse 85% 80% at 38% 55%,
    rgba(246,243,236,.72) 0%,rgba(242,239,232,.45) 45%,rgba(242,239,232,0) 78%);
  pointer-events:none;
}
.hero .tag{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:28px;
  font-size:.85rem;font-weight:500;color:var(--muted);
}
.hero .tag::before{content:"";width:34px;height:1px;background:var(--amber)}
.hero h1{
  font-size:clamp(2.4rem,6.4vw,4.9rem);
  font-weight:700;line-height:1.55;letter-spacing:-.01em;
  max-width:19ch;
}
html[lang="en"] .hero h1{line-height:1.25;max-width:22ch}
.hero h1 .th{font-weight:400;color:#3a3e45}
.hero h1 .hl{position:relative;white-space:nowrap}
.hero h1 .hl::after{
  content:"";position:absolute;inset-inline:0;bottom:.12em;height:.28em;background:var(--amber);
  z-index:-1;transform:scaleX(0);transform-origin:100% 50%;animation:hl .8s var(--ease) 1.1s forwards;
}
@keyframes hl{to{transform:scaleX(1)}}
.hero p.sub{max-width:62ch;margin-top:22px;color:#33373e;font-size:1.02rem;font-weight:500}
.hero .cta-row{display:flex;align-items:center;gap:26px;margin-top:40px;flex-wrap:wrap}
.btn-ink{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  background:var(--ink);color:var(--paper);padding:15px 34px;font-weight:600;font-size:.95rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
  transition:background .3s;overflow:hidden;border:0;cursor:pointer;
}
.btn-ink::before{
  content:"";position:absolute;inset:0;background:var(--amber);
  transform:translateX(101%);transition:transform .45s var(--ease);
}
html[dir="ltr"] .btn-ink::before{transform:translateX(-101%)}
.btn-ink span{position:relative;z-index:1;transition:color .3s}
.btn-ink:hover::before{transform:translateX(0)}
.btn-ink:hover span{color:var(--ink)}
.link-arrow{
  display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;
  border-bottom:1px solid var(--ink);padding-bottom:4px;
}
.link-arrow .ar{transition:transform .35s var(--ease);display:inline-block}
.link-arrow:hover .ar{transform:translateX(-6px)}
html[dir="ltr"] .link-arrow:hover .ar{transform:translateX(6px)}

/* hero base data strip */
.hero-strip{border-top:1px solid var(--line);position:relative;background:linear-gradient(180deg,rgba(246,243,236,.9),rgba(242,239,232,.85))}
.hero-strip .row{display:grid;grid-template-columns:repeat(4,1fr)}
.hero-strip .cell{padding:26px 26px 24px;border-inline-start:1px solid var(--line);position:relative}
.hero-strip .cell::after{
  content:"";position:absolute;top:-1px;inset-inline:0;height:3px;background:var(--amber);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease);
}
.hero-strip .cell:hover::after{transform:scaleX(1)}
.hero-strip .cell:hover .k{color:var(--amber)}
.hero-strip .cell:last-child{border-inline-end:1px solid var(--line)}
.hero-strip .k{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.22em;color:var(--muted);display:block;margin-bottom:4px;direction:ltr;transition:color .3s}
html[dir="rtl"] .hero-strip .k{text-align:right}
.hero-strip .v{font-weight:700;font-size:1.05rem;line-height:1.6}
.hero-strip .v small{display:block;font-weight:400;color:var(--muted);font-size:.8rem}

/* ————— inner page head ————— */
.page-head{
  padding:170px 0 56px;border-bottom:1px solid var(--line);position:relative;
}
/* page head uses the shared page grid — no duplicate offset grid */
.page-head .crumb{
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.3em;color:var(--amber);
  display:block;margin-bottom:14px;direction:ltr;
}
html.js .page-head .crumb{animation:crumb 1.1s var(--ease) both}
@keyframes crumb{from{opacity:0;letter-spacing:.6em}to{opacity:1;letter-spacing:.3em}}
html[dir="rtl"] .page-head .crumb{text-align:right}
/* soft paper glow behind the page title, echoing the hero */
.page-head::after{
  content:"";position:absolute;inset-block:30% -30%;inset-inline:0 35%;pointer-events:none;
  background:radial-gradient(ellipse 75% 90% at 65% 55%,rgba(248,245,239,.55) 0%,rgba(242,239,232,0) 72%);
}
.page-head .wrap{z-index:1}
.page-head h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;line-height:1.4}
.page-head p.intro{max-width:64ch;color:var(--muted);margin-top:14px;font-size:1rem}

/* ————— section scaffolding ————— */
section{padding:110px 0;position:relative}
.sec-head{
  display:flex;align-items:baseline;gap:26px;margin-bottom:66px;
  border-bottom:1px solid var(--line);padding-bottom:26px;position:relative;
}
/* faint paper glow behind every section title */
.sec-head{background:radial-gradient(ellipse 55% 160% at 12% 50%,rgba(248,245,239,.5) 0%,rgba(242,239,232,0) 70%)}
.dark .sec-head{background:radial-gradient(ellipse 55% 160% at 12% 50%,rgba(36,42,51,.55) 0%,rgba(21,24,28,0) 70%)}
/* short amber rule draws itself in when the section reveals */
.sec-head::after{
  content:"";position:absolute;bottom:-1px;inset-inline-start:0;height:2px;width:0;
  background:var(--amber);transition:width 1.1s var(--ease) .25s;
}
.sec-head.in::after,html:not(.js) .sec-head::after{width:110px}
.sec-head .no{font-family:'IBM Plex Mono',monospace;font-size:.8rem;color:var(--amber);letter-spacing:.15em}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700;line-height:1.5}
.sec-head .en{margin-inline-start:auto;font-family:'IBM Plex Mono',monospace;font-size:.65rem;letter-spacing:.3em;color:var(--muted);direction:ltr}

/* ————— about ————— */
.about-grid{display:grid;grid-template-columns:7fr 5fr;gap:70px;align-items:start}
.about-grid > div:first-child{background:radial-gradient(ellipse 90% 80% at 30% 20%,rgba(248,245,239,.5) 0%,rgba(242,239,232,0) 75%)}
.partner-grid .txt,.contact-grid > div:first-child{background:radial-gradient(ellipse 90% 80% at 30% 25%,rgba(248,245,239,.5) 0%,rgba(242,239,232,0) 75%)}
.about-grid .lead{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:500;line-height:2.1}
html[lang="en"] .about-grid .lead{line-height:1.7}
.about-grid .lead .accent{color:var(--amber);font-weight:700}
.about-grid .body{margin-top:26px;color:var(--muted);max-width:60ch}
.about-grid .body a{border-bottom:1px solid var(--amber);font-weight:600;color:var(--ink)}
.spec-table{
  border:1px solid var(--line);
  background:radial-gradient(130% 130% at 25% 0%,rgba(248,245,239,.9) 0%,rgba(242,239,232,.84) 55%,rgba(236,232,221,.8) 120%);
}
.spec-table .r{display:grid;grid-template-columns:110px 1fr;border-bottom:1px solid var(--line)}
.spec-table .r:last-child{border-bottom:0}
.spec-table .k{
  padding:20px 18px;background:var(--paper-2);font-family:'IBM Plex Mono',monospace;
  font-size:.62rem;letter-spacing:.18em;color:var(--muted);display:flex;align-items:center;direction:ltr;
  border-inline-end:1px solid var(--line);
}
.spec-table .v{padding:18px 20px;font-weight:600;font-size:.95rem;line-height:1.8}
.spec-table .v small{display:block;font-weight:400;color:var(--muted);font-size:.82rem}

/* ————— services : editorial rows ————— */
.svc{border-top:1px solid var(--line)}
.svc-row{
  display:grid;grid-template-columns:90px 1fr 1.2fr;gap:30px;align-items:start;
  padding:44px 24px;border-bottom:1px solid var(--line);position:relative;
  transition:background .35s;
  background:linear-gradient(165deg,rgba(247,244,238,.9) 0%,rgba(242,239,232,.84) 55%,rgba(239,235,225,.82) 100%);
}
.svc{border:1px solid var(--line);border-bottom:0}
.svc-row.compact{grid-template-columns:90px 1fr auto;align-items:center}
.svc-row::before{
  content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:0;
  background:var(--amber);transition:width .35s var(--ease);
}
.svc-row:hover{background:linear-gradient(165deg,#f2eee6 0%,#ece8dd 60%,#e9e4d8 100%)}
.svc-row:active{background:linear-gradient(165deg,#ece7db,#e6e1d4)}
.svc-row:hover::before{width:4px}
.svc-row .idx{
  font-family:'IBM Plex Mono',monospace;font-size:1.7rem;font-weight:500;color:var(--amber);
  letter-spacing:.05em;direction:ltr;line-height:1.2;padding-top:6px;
  transition:color .35s,transform .35s var(--ease);
}
html[dir="rtl"] .svc-row .idx{text-align:right}
.svc-row.compact .idx{padding-top:0}
.svc-row:hover .idx{color:var(--amber-hot);transform:scale(1.1)}
.svc-row h3{font-size:1.35rem;font-weight:700;line-height:1.6}
.svc-row .en-t{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.2em;color:var(--muted);direction:ltr;display:block;margin-top:6px}
html[dir="rtl"] .svc-row .en-t{text-align:right}
/* Arabic sublabel on English pages (mirror of the mono EN label on Arabic pages) */
.svc-row .ar-t{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:.82rem;color:var(--muted);display:block;margin-top:4px;direction:rtl;text-align:left}
.svc-row ul{display:grid;gap:6px;padding-top:4px}
.svc-row ul li{position:relative;padding-inline-start:24px;color:var(--muted);font-size:.95rem}
.svc-row ul li::before{content:"—";position:absolute;inset-inline-start:0;color:var(--amber);font-weight:700}
.svc-row .go{
  font-size:1.5rem;color:var(--muted);transition:transform .35s var(--ease),color .35s;
}
.svc-row:hover .go{color:var(--amber);transform:translateX(-8px)}
html[dir="ltr"] .svc-row:hover .go{transform:translateX(8px)}

/* ————— dark band ————— */
.dark{background:linear-gradient(180deg,#181c22 0%,var(--ink) 35%,#12151a 100%);color:var(--paper)}
.dark .sec-head{border-bottom-color:var(--line-inv)}
.dark .sec-head .en{color:var(--muted-inv)}
.dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line-inv) 1px,transparent 1px),linear-gradient(90deg,var(--line-inv) 1px,transparent 1px);
  background-size:72px 72px;opacity:.25;
}
.dark .wrap{z-index:2}

.scope-cols{columns:2;column-gap:60px}
.scope-item{
  break-inside:avoid;display:flex;gap:18px;align-items:baseline;
  padding:20px 4px;border-bottom:1px dashed var(--line-inv);
  transition:border-color .3s;
}
.scope-item:hover{border-bottom-color:rgba(227,147,18,.45)}
.scope-item .n{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--amber);letter-spacing:.1em}
.scope-item .t{font-weight:500;font-size:1.02rem;transition:color .3s}
.scope-item:hover .t{color:var(--amber-hot)}

/* project ticker */
.tick{
  overflow:hidden;border-block:1px solid var(--line-inv);padding:20px 0;
  position:relative;z-index:2;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.tick-track{display:flex;gap:0;width:max-content;animation:tick 36s linear infinite}
@keyframes tick{to{transform:translateX(50%)}}
html[dir="ltr"] .tick-track{animation-name:tick-l}
@keyframes tick-l{to{transform:translateX(-50%)}}
.tick-track span{
  font-weight:300;font-size:1.5rem;white-space:nowrap;padding:0 30px;color:var(--paper);
  display:flex;align-items:center;gap:60px;
}
.tick-track span i{font-style:normal;color:var(--amber);font-size:.9rem}

.proj-list{counter-reset:proj}
.proj-row{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;
  padding:30px 6px;border-bottom:1px solid var(--line-inv);
  transition:padding .55s var(--ease),background .55s var(--ease),border-color .55s;
  position:relative;
}
/* amber accent bar grows in from the start edge */
.proj-row::after{
  content:"";position:absolute;inset-inline-start:0;top:20%;bottom:20%;width:3px;
  background:var(--amber);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .45s var(--ease);
}
.proj-row:hover{
  padding-inline-start:28px;
  border-bottom-color:rgba(227,147,18,.5);
  background:linear-gradient(to right,rgba(227,147,18,.1),rgba(227,147,18,0) 65%);
}
html[dir="rtl"] .proj-row:hover{background:linear-gradient(to left,rgba(227,147,18,.1),rgba(227,147,18,0) 65%)}
.proj-row:hover::after{transform:scaleY(1)}
.proj-row::before{
  counter-increment:proj;content:"0" counter(proj);
  position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);
  font-family:'IBM Plex Mono',monospace;font-size:2.6rem;font-weight:400;
  color:transparent;-webkit-text-stroke:1.2px var(--amber);pointer-events:none;
  transition:color .5s var(--ease),transform .5s var(--ease),-webkit-text-stroke .5s;
}
.proj-row:hover::before{color:var(--amber);-webkit-text-stroke:0;transform:translateY(-50%) scale(1.12)}
.proj-row h3{font-size:clamp(1.1rem,2.4vw,1.7rem);font-weight:600;line-height:1.6;transition:color .45s var(--ease)}
.proj-row:hover h3{color:var(--amber-hot)}
.proj-row .en-t{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.24em;color:var(--muted-inv);display:block;margin-top:2px;direction:ltr;transition:color .45s}
.proj-row:hover .en-t{color:rgba(245,173,46,.75)}
/* rows enter one after another */
html.js .proj-list .proj-row.in:nth-child(2){animation-delay:.08s}
html.js .proj-list .proj-row.in:nth-child(3){animation-delay:.16s}
html.js .proj-list .proj-row.in:nth-child(4){animation-delay:.24s}
html.js .proj-list .proj-row.in:nth-child(5){animation-delay:.32s}
html[dir="rtl"] .proj-row .en-t{text-align:right}
html[lang="en"] .proj-row .ar-t{font-family:'IBM Plex Sans Arabic',sans-serif;font-size:.8rem;color:var(--muted-inv);display:block;margin-top:2px;direction:rtl;text-align:left;letter-spacing:0}
.proj-note{margin-top:34px;color:var(--muted-inv);font-size:.92rem;max-width:70ch}
.proj-note b{color:var(--amber);font-weight:600}

/* home dark cta band */
.cta-band{padding:90px 0}
.cta-band .inner{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(1.6rem,3.6vw,2.6rem);font-weight:700;line-height:1.5;max-width:24ch}
.cta-band h2 em{font-style:normal;color:var(--amber)}
.btn-amber{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  background:var(--amber);color:var(--ink);padding:15px 34px;font-weight:700;font-size:.95rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
  transition:background .3s,transform .3s var(--ease);
}
.btn-amber:hover{background:var(--amber-hot);transform:translateY(-3px)}

/* ————— sectors ————— */
.sect-flow{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line)}
.sect-cell{
  flex:1 1 240px;padding:34px 26px;border:1px solid var(--line);margin:-.5px;
  position:relative;overflow:hidden;transition:color .35s;
  background:radial-gradient(120% 120% at 50% 0%,rgba(247,244,238,.88) 0%,rgba(242,239,232,.82) 60%,rgba(238,234,224,.8) 130%);
}
.sect-cell::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform .4s var(--ease);
}
.sect-cell:hover{color:var(--paper)}
.sect-cell:hover::before{transform:translateY(0)}
.sect-cell .inner{position:relative;z-index:1}
.sect-cell .n{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.2em;color:var(--amber);display:block;margin-bottom:10px;direction:ltr}
html[dir="rtl"] .sect-cell .n{text-align:right}
.sect-cell .t{font-weight:700;font-size:1.08rem}

/* ————— vision / mission ————— */
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line)}
.vm-col{padding:56px 48px;background:radial-gradient(140% 100% at 50% 0%,rgba(248,245,239,.9) 0%,rgba(242,239,232,.82) 70%)}
.vm-col:first-child{border-inline-end:1px solid var(--line)}
.vm-col .lbl{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.vm-col .lbl .sq{width:12px;height:12px;background:var(--amber);transition:transform .45s var(--ease)}
.vm-col:hover .lbl .sq{transform:rotate(45deg)}
.vm-col .lbl h3{font-size:1.5rem;font-weight:700}
.vm-col .lbl .en{margin-inline-start:auto;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.3em;color:var(--muted);direction:ltr}
.vm-col p{color:var(--ink-2);margin-bottom:18px;font-size:.98rem}
.vm-col p:last-child{margin-bottom:0}
.vm-col .q{border-inline-start:3px solid var(--amber);padding-inline-start:18px;color:var(--ink);font-weight:500}
.vm-col ul{display:grid;gap:0}
.vm-col ul li{
  position:relative;padding:13px 30px 13px 0;color:var(--ink-2);font-size:.95rem;
  border-bottom:1px dashed var(--line);
}
html[dir="ltr"] .vm-col ul li{padding:13px 0 13px 30px}
.vm-col ul li:last-child{border-bottom:0}
.vm-col ul li::before{
  content:"";position:absolute;inset-inline-start:6px;top:24px;width:10px;height:10px;
  border:2px solid var(--amber);
}
.goals-band{
  margin-top:70px;display:grid;grid-template-columns:auto 1fr;gap:50px;align-items:center;
  background:radial-gradient(130% 160% at 20% 0%,#1e232b 0%,var(--ink) 60%);
  color:var(--paper);padding:48px;clip-path:var(--chamfer);
}
.goals-band h3{font-size:1.3rem;font-weight:700;white-space:nowrap}
.goals-band h3 small{display:block;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.3em;color:var(--amber);font-weight:400;margin-top:6px;direction:ltr}
.goals-band ul{display:flex;flex-wrap:wrap;gap:12px 34px}
.goals-band li{position:relative;padding-inline-start:20px;font-size:.94rem;color:var(--paper);font-weight:500}
.goals-band li::before{content:"";position:absolute;inset-inline-start:0;top:14px;width:8px;height:8px;background:var(--amber)}
/* goals cascade in one after another */
html.js .goals-band li{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .goals-band.in li{opacity:1;transform:none}
.goals-band li:nth-child(2){transition-delay:.1s}
.goals-band li:nth-child(3){transition-delay:.2s}
.goals-band li:nth-child(4){transition-delay:.3s}
.goals-band li:nth-child(5){transition-delay:.4s}

/* ————— partner ————— */
.partner-grid{display:grid;grid-template-columns:5fr 7fr;gap:70px;align-items:center}
.p-plate{
  background:radial-gradient(120% 120% at 50% 0%,#1d222a 0%,var(--ink) 65%);
  color:var(--paper);padding:70px 50px;text-align:center;
  clip-path:var(--chamfer);position:relative;overflow:hidden;
}
.p-plate::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--line-inv) 1px,transparent 1px),linear-gradient(90deg,var(--line-inv) 1px,transparent 1px);
  background-size:72px 72px;opacity:.3;
}
.p-plate .in{position:relative}
.p-plate .wordmark{font-family:'IBM Plex Mono',monospace;font-size:1.9rem;font-weight:500;letter-spacing:.06em;color:var(--paper);direction:ltr}
.p-plate .wordmark b{color:var(--amber);font-weight:500}
.p-plate .sub{color:var(--muted-inv);margin-top:8px;font-size:.9rem}
.p-plate .est{
  display:inline-block;margin-top:26px;border:1px solid rgba(227,147,18,.55);color:var(--amber);
  padding:6px 22px;font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.25em;direction:ltr;
}
.partner-grid .txt p{color:var(--ink-2);margin-bottom:18px;max-width:62ch}
.partner-grid .txt .btn-ink{margin-top:10px}

/* ————— contact ————— */
.contact-grid{display:grid;grid-template-columns:6fr 6fr;gap:70px;align-items:start}
.contact-grid .lead{font-size:clamp(1.2rem,2.4vw,1.7rem);font-weight:500;line-height:1.9;max-width:24ch}
html[lang="en"] .contact-grid .lead{line-height:1.5}
.contact-grid .lead em{font-style:normal;color:var(--amber)}
.contact-grid p.note{color:var(--muted);margin-top:18px;max-width:48ch}
.contact-grid .btn-ink{margin-top:30px}

/* ————— footer ————— */
footer{background:linear-gradient(180deg,var(--ink) 0%,#101318 100%);color:var(--muted-inv);position:relative}
footer::before{
  content:"";position:absolute;inset-inline:0;top:0;height:4px;
  background:repeating-linear-gradient(-45deg,var(--amber) 0 14px,var(--ink) 14px 28px);
  background-size:40px 4px;
  animation:hazard 2.6s linear infinite;
}
@keyframes hazard{to{background-position:40px 0}}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:60px;padding-block:80px 60px}
.f-brand{font-size:1.5rem;font-weight:700;color:var(--paper);line-height:1.5}
.f-brand em{font-style:normal;color:var(--amber)}
.f-brand + p{margin-top:14px;font-size:.92rem;max-width:44ch}
footer h4{
  color:var(--paper);font-size:.8rem;font-weight:600;margin-bottom:20px;
  font-family:'IBM Plex Mono',monospace;letter-spacing:.25em;direction:ltr;
}
html[dir="rtl"] footer h4{text-align:right}
footer ul{display:grid;gap:10px;font-size:.92rem}
footer ul a{display:inline-block;transition:color .25s,transform .3s var(--ease)}
footer ul a:hover{color:var(--amber);transform:translateX(-5px)}
html[dir="ltr"] footer ul a:hover{transform:translateX(5px)}
footer .mono-sm{font-family:'IBM Plex Mono',monospace;font-size:.8rem;direction:ltr;display:inline-block}
.f-bottom{
  border-top:1px solid var(--line-inv);padding-block:22px;display:flex;justify-content:space-between;
  align-items:center;gap:14px;flex-wrap:wrap;font-size:.78rem;
}
.f-bottom .mono{font-size:.65rem;color:var(--muted-inv)}

/* ————— responsive ————— */
@media (max-width:1000px){
  .about-grid,.partner-grid,.contact-grid{grid-template-columns:1fr;gap:44px}
  .vm-grid{grid-template-columns:1fr}
  .vm-col:first-child{border-inline-end:0;border-bottom:1px solid var(--line)}
  .scope-cols{columns:1}
  .hero-strip .row{grid-template-columns:1fr 1fr}
  .hero-strip .cell{border-top:1px solid var(--line)}
  .goals-band{grid-template-columns:1fr;gap:26px;padding:38px 30px}
  .svc-row{grid-template-columns:1fr;gap:14px;padding:36px 6px}
  .svc-row.compact{grid-template-columns:auto 1fr auto;gap:16px}
  .svc-row.compact .idx{font-size:1.25rem}
  .svc-row .idx{padding-top:0}
}
@media (max-width:760px){
  nav ul{
    display:none;position:fixed;top:74px;inset-inline:0;background:var(--paper);
    flex-direction:column;padding:18px 24px 26px;border-bottom:1px solid var(--line);gap:4px;
    box-shadow:0 20px 40px rgba(21,24,28,.12);
  }
  nav ul.open{display:flex}
  nav a{padding:12px 4px;font-size:1rem;border-bottom:1px dashed var(--line-soft)}
  .menu-btn{display:block}
  .lang-sw{padding:7px 12px;font-size:.62rem}
  .brand .t span{display:none}
  section{padding:72px 0}
  .wrap{padding:0 20px}
  .page-head{padding:130px 0 40px}
  .sec-head{flex-wrap:wrap;gap:12px;margin-bottom:44px;padding-bottom:20px}
  .sec-head .en{display:none}
  .f-grid{grid-template-columns:1fr;gap:44px;padding-block:60px 40px}
  .vm-col{padding:40px 26px}
  /* hero on phones */
  .hero{min-height:auto;padding-top:120px}
  .hero .tower{opacity:.16;height:70%}
  .hero-head{padding-bottom:44px}
  .hero-head::before{inset-inline:0}
  .hero h1{font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .hero p.sub{font-size:.95rem}
  .hero .cta-row{gap:16px;margin-top:30px}
  .btn-ink,.btn-amber{padding:13px 26px;font-size:.9rem}
  /* strips, rows & lists */
  .hero-strip .cell{padding:18px 18px 16px}
  .hero-strip .v{font-size:.95rem}
  .tick{padding:14px 0}
  .tick-track span{font-size:1.02rem;gap:26px;padding:0 14px}
  .svc-row h3{font-size:1.15rem}
  .proj-row{padding:24px 6px;padding-inline-end:64px}
  .proj-row::before{font-size:1.5rem;inset-inline-end:8px}
  .proj-row h3{font-size:1.05rem}
  .cta-band .inner{flex-direction:column;align-items:flex-start}
  .p-plate{padding:50px 26px}
  .p-plate .wordmark{font-size:1.45rem}
  .spec-table .r{grid-template-columns:88px 1fr}
  .spec-table .k{padding:14px 12px;font-size:.56rem}
  .spec-table .v{padding:14px 16px;font-size:.9rem}
  .contact-grid .lead{max-width:none}
  .goals-band{padding:34px 24px}
}
@media (max-width:460px){
  .hero-strip .row{grid-template-columns:1fr}
  .hero-strip .cell{border-inline:1px solid var(--line)}
  .sect-cell{flex-basis:100%}
  .scope-item .t{font-size:.95rem}
  .page-head h1{font-size:1.8rem}
}
/* comfortable tap targets on touch devices */
@media (hover:none){
  .svc-row:hover{background:none}
  .rv{transition-duration:.7s}
}