/* Layout idea: a black-and-white editorial site; each arm tints its photos and accents with one logo colour. Construction leads every page it can. */
:root{
  --ink:#0B0B0B;
  --ink-2:#151514;
  --paper:#F2F1ED;
  --fg:#EEEDE9;
  --mute:#8F8E89;
  --line:rgba(255,255,255,.13);
  --line-d:rgba(11,11,11,.14);
  --con:#D31A1A;
  --trade:#E9AD12;
  --tech:#2E8BFF;
  --tone:#EEEDE9;
  --f-display:"Instrument Serif","Times New Roman",serif;
  --f-body:"Geist",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,monospace;
  --gut:clamp(18px,4vw,56px);
  --ease:cubic-bezier(.77,0,.18,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
html[lang="ar"]{
  --f-display:"Amiri","Times New Roman",serif;
  --f-body:"IBM Plex Sans Arabic",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"IBM Plex Sans Arabic",ui-sans-serif,system-ui,sans-serif;
}
body[data-arm="construction"]{--tone:var(--con)}
body[data-arm="trade"]{--tone:var(--trade)}
body[data-arm="tech"]{--tone:var(--tech)}
body[data-arm="about"],body[data-arm="home"]{--tone:#EEEDE9}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html[lang="ar"] body{font-size:17px;line-height:1.8}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--tone);outline-offset:3px}
::selection{background:var(--tone);color:var(--ink)}
h1,h2,h3{font-weight:400;text-wrap:balance}

/* ---------- type ---------- */
.display{font-family:var(--f-display);font-weight:400;line-height:.98;letter-spacing:-.015em}
html[lang="ar"] .display{line-height:1.3;letter-spacing:0;font-weight:700}
.d-xl{font-size:clamp(46px,7.6vw,128px)}
.d-l{font-size:clamp(38px,5.4vw,88px)}
.d-m{font-size:clamp(30px,3.6vw,56px)}
.d-s{font-size:clamp(24px,2.3vw,34px)}
html[lang="ar"] .d-xl{font-size:clamp(40px,6.4vw,104px)}
html[lang="ar"] .d-l{font-size:clamp(34px,4.6vw,74px)}
html[lang="ar"] .d-m{font-size:clamp(28px,3.2vw,48px)}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:12px}
html[lang="ar"] .eyebrow{letter-spacing:0;font-size:14px;font-weight:500}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--tone)}
.lead{font-size:clamp(20px,1.9vw,28px);line-height:1.4;max-width:30ch;font-family:var(--f-display)}
html[lang="ar"] .lead{font-size:clamp(20px,1.7vw,26px);line-height:1.7}
.body{color:#BDBCB7;max-width:62ch}
.paper .body{color:#4A4A47}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
em.t{font-style:normal;color:var(--tone)}

/* ---------- chrome ---------- */
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:90;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

.nav{position:fixed;top:0;inset-inline:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--gut);transition:background .5s,backdrop-filter .5s,padding .5s}
.nav.solid{background:rgba(11,11,11,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-block:12px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px}
.brand .mk{width:48px;height:auto}
.brand .wmk{height:11px;width:auto}
.brand .wm{font-family:var(--f-body);font-weight:700;letter-spacing:.32em;font-size:13px}
.brand .arm-tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tone);padding-inline-start:12px;border-inline-start:1px solid var(--line)}
html[lang="ar"] .brand .arm-tag{letter-spacing:0;font-size:13px}
.nav-r{display:flex;align-items:center;gap:6px}
.nav-a{font-size:13px;padding:8px 12px;border-radius:99px;transition:background .3s,color .3s;color:#cfcec9}
.nav-a:hover,.nav-a.on{background:rgba(255,255,255,.08);color:#fff}
.nav-arms{display:flex;gap:2px}
.nav-arms .nav-a[data-arm]::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-inline-end:8px;vertical-align:1px;background:var(--c)}
.lang{font-size:13px;border:1px solid var(--line);padding:7px 14px;border-radius:99px;margin-inline-start:8px;transition:border-color .3s,background .3s}
.lang:hover{border-color:#fff;background:#fff;color:var(--ink)}
html[lang="en"] .lang{font-family:"IBM Plex Sans Arabic",sans-serif}
@media (max-width:860px){.nav-arms{display:none}.brand .wmk{display:none}}

/* ---------- views ---------- */
.view{display:none}
.view.on{display:block}
main{min-height:100vh}

/* photo with arm tone */
.ph{position:relative;overflow:hidden;background:#1a1a1a}
.ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(.92);transition:transform 1.6s var(--ease-out),filter 1s}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--pt,var(--tone)) 0%,transparent 75%);mix-blend-mode:color;opacity:var(--po,.32);transition:opacity .8s;pointer-events:none}
.ph.multiply::before{content:"";position:absolute;inset:0;z-index:1;background:var(--pt,var(--tone));mix-blend-mode:multiply;opacity:.18;pointer-events:none}
.shade::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(11,11,11,.62) 0%,rgba(11,11,11,.3) 35%,rgba(11,11,11,.5) 62%,rgba(11,11,11,.95) 100%);pointer-events:none}

/* ---------- gateway ---------- */
.gate{padding:96px var(--gut) 0;display:grid;gap:14px}
.gate-top{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;padding-bottom:10px}
.gate-top h1{max-width:16ch}
.gate-top .meta{display:grid;gap:4px;text-align:end;color:var(--mute);font-size:13px}
.gate-top .meta b{color:var(--fg);font-weight:500}
.door{position:relative;display:block;overflow:hidden;border-radius:4px;isolation:isolate;color:#fff}
.door .ph,.door canvas{position:absolute;inset:0;width:100%;height:100%}
.door .ph img{transform:scale(1.04)}
.door .ph,.hero .ph{--po:.55}
.door:hover .ph img{transform:scale(1.1)}
.door:hover .ph{--po:.75}
.door-in{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,3vw,40px)}
.door-head{display:flex;justify-content:space-between;align-items:start;gap:16px}
.door-num{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:flex;gap:10px;align-items:center}
html[lang="ar"] .door-num{letter-spacing:0;font-size:14px}
.door-num i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.door-cta{display:inline-flex;align-items:center;gap:12px;font-size:14px;padding:12px 18px 12px 20px;border-radius:99px;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);transition:background .4s,color .4s,gap .4s}
.door:hover .door-cta{background:var(--c);color:#0b0b0b;border-color:var(--c);gap:18px}
.arrow{display:inline-block;transition:transform .4s var(--ease-out)}
html[dir="rtl"] .arrow{transform:scaleX(-1)}
.door-foot{display:grid;gap:14px;max-width:820px}
.door-foot p{color:#d8d7d2;max-width:52ch;font-size:15px}
.door-main{height:clamp(440px,62vh,700px)}
.door-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.door-sm{height:clamp(300px,38vh,420px);background:#0f0f0f;border:1px solid var(--line)}
.door-sm .door-in{background:linear-gradient(0deg,rgba(15,15,15,.92) 0%,rgba(15,15,15,.6) 45%,rgba(15,15,15,0) 75%)}
.door-sm .display{font-size:clamp(28px,2.8vw,44px)}
@media (max-width:760px){.door-pair{grid-template-columns:1fr}.gate-top .meta{text-align:start}}
.door::after{content:"";position:absolute;inset:0;z-index:4;border:1px solid transparent;border-radius:4px;transition:border-color .5s;pointer-events:none}
.door:hover::after{border-color:var(--c)}

.band{padding:clamp(80px,12vw,160px) var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:40px;align-items:start}
@media (max-width:860px){.band{grid-template-columns:1fr}}

/* ---------- arm hero ---------- */
.hero{position:relative;padding-top:120px;min-height:clamp(560px,92vh,980px);display:flex;align-items:flex-end;overflow:hidden}
.hero .ph,.hero canvas.bg{position:absolute;inset:0;width:100%;height:100%}
.hero .ph img{animation:kb 18s var(--ease-out) both}
@keyframes kb{from{transform:scale(1.22)}to{transform:scale(1.02)}}
.hero-in{position:relative;z-index:3;width:100%;padding:0 var(--gut) clamp(28px,4vw,48px);display:grid;gap:28px}
.hero h1{max-width:15ch}
.hero .sub{max-width:52ch;color:#d4d3ce;font-size:clamp(16px,1.3vw,19px)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.22);margin-top:12px}
.stat{padding:18px 18px 4px 0;display:grid;gap:2px}
html[dir="rtl"] .stat{padding:18px 0 4px 18px}
.stat b{font-family:var(--f-display);font-weight:400;font-size:clamp(36px,4vw,64px);line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:13px;color:#bdbcb7}
@media (max-width:700px){.stats{grid-template-columns:1fr 1fr}}
.scroll-cue{position:absolute;z-index:3;right:var(--gut);bottom:clamp(160px,22vh,220px);writing-mode:vertical-rl;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#bdbcb7;display:flex;align-items:center;gap:12px}
.scroll-cue::after{content:"";width:1px;height:70px;background:linear-gradient(var(--tone),transparent);animation:cue 2.4s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
html[dir="rtl"] .scroll-cue{right:auto;left:var(--gut)}
@media (max-width:700px){.scroll-cue{display:none}}

/* ---------- sections ---------- */
.sec{padding:clamp(80px,11vw,150px) var(--gut)}
.paper{background:var(--paper);color:var(--ink)}
.paper .eyebrow{color:#6f6e69}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(40px,6vw,80px);max-width:900px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.what .lead{max-width:none;font-size:clamp(26px,3vw,46px);line-height:1.18}
html[lang="ar"] .what .lead{line-height:1.6;font-size:clamp(24px,2.6vw,40px)}

/* disciplines */
.disc{border-top:1px solid var(--line)}
.disc-row{display:grid;grid-template-columns:80px minmax(0,1.1fr) minmax(0,1.3fr) 220px;gap:28px;padding:34px 0;border-bottom:1px solid var(--line);align-items:start;position:relative;transition:padding .5s var(--ease-out)}
.disc-row:hover{padding-inline-start:14px}
.disc-row .n{font-family:var(--f-mono);font-size:13px;color:var(--tone)}
.disc-row h3{font-family:var(--f-display);font-size:clamp(26px,2.6vw,40px);line-height:1.05}
html[lang="ar"] .disc-row h3{line-height:1.4;font-weight:700}
.disc-row p{color:#bdbcb7;font-size:15px}
.disc-row ul{list-style:none;display:grid;gap:6px;margin-top:16px}
.disc-row li{font-size:14px;display:flex;gap:10px}
.disc-row li::before{content:"";width:5px;height:5px;margin-top:.7em;background:var(--tone);flex:none}
.disc-row .ph{aspect-ratio:4/3;border-radius:3px}
.disc-row .ph img{transform:scale(1.15)}
.disc-row:hover .ph img{transform:scale(1)}
.disc-row:hover .ph{--po:.75}
@media (max-width:980px){.disc-row{grid-template-columns:48px 1fr}.disc-row>div:nth-child(3){grid-column:2}.disc-row .ph{grid-column:2;max-width:420px}}

/* sticky capabilities */
.caps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px)}
.caps-media{position:sticky;top:90px;height:calc(100vh - 130px);max-height:760px;border-radius:4px;overflow:hidden}
.caps-media .ph{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease-out)}
.caps-media .ph img{transform:scale(1.12);transition:transform 2.4s var(--ease-out)}
.caps-media .ph.on{opacity:1}
.caps-media .ph.on img{transform:scale(1)}
.caps-media .cap-count{position:absolute;z-index:4;bottom:20px;inset-inline-start:22px;font-family:var(--f-mono);font-size:13px;color:#fff;mix-blend-mode:difference}
.cap-list{display:grid}
.cap{padding:clamp(40px,9vh,90px) 0;border-bottom:1px solid var(--line-d);opacity:.32;transition:opacity .6s}
.cap.on{opacity:1}
.cap .n{font-family:var(--f-mono);font-size:13px;color:#77766f;margin-bottom:12px;display:block}
.cap h3{font-family:var(--f-display);font-size:clamp(30px,3.4vw,54px);line-height:1.02;margin-bottom:14px}
html[lang="ar"] .cap h3{line-height:1.4;font-weight:700}
.cap p{color:#4A4A47;max-width:46ch}
.cap .ph{display:none;aspect-ratio:16/10;margin-top:20px;border-radius:3px}
@media (max-width:860px){.caps{grid-template-columns:1fr}.caps-media{display:none}.cap{opacity:1}.cap .ph{display:block}}

/* marquee */
.marq{overflow:hidden;padding:clamp(30px,5vw,60px) 0;border-block:1px solid var(--line);white-space:nowrap;direction:ltr}
.marq-t{display:inline-flex;gap:48px;animation:marq 38s linear infinite;font-family:var(--f-display);font-size:clamp(60px,10vw,160px);line-height:1}
html[lang="ar"] .marq-t{font-weight:700}
.marq-t span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.5);display:inline-flex;align-items:center;gap:48px}
.marq-t span:nth-child(3n+1){color:var(--fg);-webkit-text-stroke:0}
.marq-t span::after{content:"";width:.18em;height:.18em;background:var(--tone);transform:rotate(45deg)}
@keyframes marq{to{transform:translateX(-50%)}}

/* quality */
.q-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
.q-card{background:var(--ink);padding:32px 28px 36px;display:grid;gap:18px;align-content:start;transition:background .5s}
.q-card:hover{background:var(--ink-2)}
.q-card h3{font-family:var(--f-display);font-size:28px;line-height:1.1}
html[lang="ar"] .q-card h3{font-weight:700;line-height:1.5}
.q-card ul{list-style:none;display:grid;gap:10px}
.q-card li{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:#cfcec9;border-bottom:1px solid var(--line);padding-bottom:10px}
.q-card li span{font-family:var(--f-mono);color:var(--tone);font-size:12px}
@media (max-width:860px){.q-grid{grid-template-columns:1fr}}

/* gallery */
.gal{columns:4 240px;column-gap:12px}
.gal button{display:block;width:100%;margin-bottom:12px;break-inside:avoid;border-radius:3px;overflow:hidden;cursor:zoom-in}
.gal .ph img{height:auto;transform:scale(1.02)}
.gal button:hover .ph img{transform:scale(1.08)}
.gal button:hover .ph{--po:.75}
.lb{position:fixed;inset:0;z-index:80;background:rgba(8,8,8,.94);display:none;place-items:center;padding:5vw}
.lb.on{display:grid;animation:fade .4s}
.lb .ph{max-width:min(1200px,92vw);max-height:84vh;border-radius:3px}
.lb .ph img{max-height:84vh;width:auto;margin:auto}
.lb-x,.lb-p,.lb-n{position:absolute;font-family:var(--f-mono);font-size:13px;padding:10px 16px;border:1px solid var(--line);border-radius:99px;background:rgba(0,0,0,.4)}
.lb-x{top:20px;inset-inline-end:20px}.lb-p{bottom:24px;inset-inline-start:24px}.lb-n{bottom:24px;inset-inline-end:24px}
.lb-c{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);font-family:var(--f-mono);font-size:12px;color:var(--mute)}
@keyframes fade{from{opacity:0}}

/* presence */
.pres{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pres-card{border:1px solid var(--line-d);padding:30px;display:grid;gap:10px;border-radius:3px}
.pres-card h3{font-family:var(--f-display);font-size:32px;line-height:1.1}
html[lang="ar"] .pres-card h3{font-weight:700;line-height:1.5}
.pres-card p{color:#4A4A47}
@media (max-width:700px){.pres{grid-template-columns:1fr}}

/* trade */
.dirs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.dir{padding:36px 28px 40px 0;display:grid;gap:14px;border-inline-end:1px solid var(--line);padding-inline-start:28px}
.dir:first-child{padding-inline-start:0}
.dir:last-child{border-inline-end:0}
.dir .n{font-family:var(--f-mono);color:var(--tone);font-size:13px}
.dir h3{font-family:var(--f-display);font-size:clamp(34px,3.6vw,58px);line-height:1}
html[lang="ar"] .dir h3{font-weight:700;line-height:1.4}
.dir p{color:#bdbcb7;max-width:34ch}
@media (max-width:860px){.dirs{grid-template-columns:1fr}.dir{border-inline-end:0;border-bottom:1px solid var(--line);padding-inline:0}}
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-d);border:1px solid var(--line-d)}
.cat{background:var(--paper);padding:clamp(28px,3vw,44px);display:grid;gap:14px;align-content:start;position:relative;overflow:hidden;min-height:260px}
.cat::before{content:"";position:absolute;inset:auto 0 0 0;height:0;background:var(--trade);transition:height .7s var(--ease);z-index:0}
.cat:hover::before{height:6px}
.cat>*{position:relative}
.cat .k{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:12px;color:#6f6e69;letter-spacing:.08em;text-transform:uppercase}
html[lang="ar"] .cat .k{letter-spacing:0;font-size:13px}
.cat h3{font-family:var(--f-display);font-size:clamp(30px,3vw,46px);line-height:1.02}
html[lang="ar"] .cat h3{font-weight:700;line-height:1.4}
.cat p{color:#4A4A47;max-width:44ch}
@media (max-width:760px){.cats{grid-template-columns:1fr}}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;padding-top:48px}
.flow::before{content:"";position:absolute;top:13px;inset-inline:0;height:1px;background:var(--line)}
.flow .bar{position:absolute;top:13px;inset-inline-start:0;height:1px;width:0;background:var(--tone);transition:width 2.4s var(--ease)}
.flow.in .bar{width:100%}
.step{display:grid;gap:10px;position:relative}
.step::before{content:"";position:absolute;top:-41px;inset-inline-start:0;width:11px;height:11px;border-radius:50%;background:var(--ink);border:1px solid var(--tone);transition:background .4s}
.flow.in .step::before{background:var(--tone);transition-delay:calc(var(--i)*.55s)}
.step .n{font-family:var(--f-mono);font-size:12px;color:var(--mute)}
.step h3{font-family:var(--f-display);font-size:clamp(28px,2.6vw,40px);line-height:1}
html[lang="ar"] .step h3{font-weight:700;line-height:1.4}
.step p{color:#bdbcb7;font-size:15px;max-width:30ch}
@media (max-width:860px){.flow{grid-template-columns:1fr 1fr;row-gap:56px}.flow::before,.flow .bar{display:none}.step::before{top:-22px}}

/* tech */
.pills{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pill{border:1px solid var(--line);border-radius:4px;padding:30px 28px 34px;display:grid;gap:18px;align-content:start;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(46,139,255,.0),rgba(46,139,255,0));transition:background .6s,border-color .6s}
.pill:hover{border-color:var(--tech);background:linear-gradient(180deg,rgba(46,139,255,.12),rgba(46,139,255,0) 70%)}
.pill .n{font-family:var(--f-display);font-size:90px;line-height:.8;color:transparent;-webkit-text-stroke:1px var(--tech)}
.pill h3{font-family:var(--f-display);font-size:clamp(28px,2.4vw,38px);line-height:1.05}
html[lang="ar"] .pill h3{font-weight:700;line-height:1.4}
.pill p{color:#bdbcb7;font-size:15px}
.pill ul{list-style:none;display:grid;gap:0;border-top:1px solid var(--line)}
.pill li{font-family:var(--f-mono);font-size:13px;padding:10px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
html[lang="ar"] .pill li{font-size:14px}
.pill li::after{content:"+";color:var(--tech)}
@media (max-width:960px){.pills{grid-template-columns:1fr}}
.built{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line-d)}
.built div{padding:28px 24px 8px 0;display:grid;gap:10px;border-inline-end:1px solid var(--line-d);padding-inline-start:24px}
.built div:first-child{padding-inline-start:0}
.built div:last-child{border-inline-end:0}
.built h3{font-family:var(--f-display);font-size:28px;line-height:1.1}
html[lang="ar"] .built h3{font-weight:700;line-height:1.5}
.built p{color:#4A4A47;font-size:15px}
@media (max-width:860px){.built{grid-template-columns:1fr 1fr}.built div{border:0;padding-inline:0}}

/* about */
.founder{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,90px);align-items:center}
.mono-card{aspect-ratio:4/5;border-radius:4px;background:#121212;border:1px solid var(--line);display:grid;place-items:center;position:relative;overflow:hidden}
.mono-card .logo{width:72%}
.mono-card .tag{position:absolute;bottom:18px;inset-inline-start:20px;font-family:var(--f-mono);font-size:12px;color:var(--mute)}
@media (max-width:860px){.founder{grid-template-columns:1fr}.mono-card{max-width:360px}}
.vm{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px)}
.vm ol{list-style:none;display:grid;gap:16px;counter-reset:m}
.vm li{counter-increment:m;display:grid;grid-template-columns:40px 1fr;font-size:18px;line-height:1.5}
.vm li::before{content:"0" counter(m);font-family:var(--f-mono);font-size:13px;color:#77766f;padding-top:4px}
@media (max-width:860px){.vm{grid-template-columns:1fr}}
.vals{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.vals>div{padding:30px 24px 10px 0;border-inline-end:1px solid var(--line);padding-inline-start:24px;display:grid;gap:14px;align-content:start}
.vals>div:first-child{padding-inline-start:0}.vals>div:last-child{border-inline-end:0}
.vals h3{font-family:var(--f-display);font-size:32px;line-height:1.05}
html[lang="ar"] .vals h3{font-weight:700;line-height:1.5}
.vals ul{list-style:none;display:grid;gap:8px;color:#bdbcb7}
@media (max-width:860px){.vals{grid-template-columns:1fr}.vals>div{border:0;padding-inline:0}}
.tree{display:grid;gap:0;justify-items:center;text-align:center}
.node{border:1px solid var(--line-d);padding:22px 30px;border-radius:3px;display:grid;gap:4px;background:#fff}
.node b{font-family:var(--f-display);font-weight:400;font-size:clamp(22px,2.2vw,32px);line-height:1.15}
html[lang="ar"] .node b{font-weight:700;line-height:1.5}
.node span{font-family:var(--f-mono);font-size:12px;color:#6f6e69}
html[lang="ar"] .node span{font-size:13px}
.vline{width:1px;height:40px;background:#9b9a95}
.tree-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%;position:relative;padding-top:40px}
.tree-row::before{content:"";position:absolute;top:0;left:12.5%;right:12.5%;height:1px;background:#9b9a95}
.tree-row>a,.tree-row>div{position:relative;border:1px solid var(--line-d);padding:20px 16px;border-radius:3px;display:grid;gap:6px;background:var(--paper);transition:background .4s,color .4s}
.tree-row>a::before,.tree-row>div::before{content:"";position:absolute;top:-41px;left:50%;width:1px;height:40px;background:#9b9a95}
.tree-row>a:hover{background:var(--ink);color:#fff}
.tree-row i{width:9px;height:9px;border-radius:50%;background:var(--c);margin:0 auto}
.tree-row b{font-family:var(--f-display);font-weight:400;font-size:24px}
html[lang="ar"] .tree-row b{font-weight:700;font-size:20px}
.tree-row span{font-family:var(--f-mono);font-size:12px;color:#6f6e69}
@media (max-width:760px){.tree-row{grid-template-columns:1fr 1fr}.tree-row::before{display:none}.tree-row>a::before,.tree-row>div::before{display:none}}

/* contact */
.contact{padding:clamp(80px,11vw,150px) var(--gut) 60px;border-top:1px solid var(--line);position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;inset:auto -10% -60% -10%;height:90%;background:radial-gradient(ellipse at center,var(--tone),transparent 62%);opacity:.12;pointer-events:none}
.contact h2{max-width:18ch;margin:18px 0 clamp(40px,6vw,72px)}
.c-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);position:relative}
.c-cell{background:var(--ink);padding:28px;display:grid;gap:12px;align-content:start;min-height:180px}
.c-cell .eyebrow::before{display:none}
.c-big{font-family:var(--f-display);font-size:clamp(24px,2.2vw,34px);line-height:1.2;direction:ltr;unicode-bidi:isolate;text-align:start}
html[dir="rtl"] .c-big{text-align:right}
.c-big a{transition:color .3s}
.c-big a:hover{color:var(--tone)}
.c-cell p{color:#bdbcb7;font-size:15px}
.copy{justify-self:start;font-family:var(--f-mono);font-size:12px;padding:6px 12px;border:1px solid var(--line);border-radius:99px;transition:background .3s,color .3s}
.copy:hover{background:#fff;color:#0b0b0b}
@media (max-width:860px){.c-grid{grid-template-columns:1fr}}

footer{padding:40px var(--gut) 34px;display:grid;gap:30px;border-top:1px solid var(--line)}
.f-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:end}
.f-big{display:flex;justify-content:center;padding:clamp(20px,4vw,50px) 0}
.f-big .logo{width:min(520px,70vw);height:auto}
.f-links{display:flex;gap:6px;flex-wrap:wrap}
.f-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--mute)}

/* ---------- motion ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
html[lang="ar"] .w{padding-bottom:.2em;margin-bottom:-.2em;padding-inline:.04em}
.w>span{display:inline-block;transform:translateY(105%);transition:transform 1.2s var(--ease-out);transition-delay:calc(var(--i,0)*55ms + var(--d,0ms))}
.in .w>span,.w.in>span{transform:none}
.rv{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease-out),transform 1.3s var(--ease-out);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}
.rv-clip{position:relative}
.rv-clip::before{content:"";position:absolute;inset:-1px;z-index:10;background:var(--ink);transform-origin:top;transition:transform 1.5s var(--ease);transition-delay:var(--d,0ms);pointer-events:none}
.rv-clip.in::before{transform:scaleY(0)}
.no-js .rv{opacity:1;transform:none}.no-js .rv-clip::before{display:none}
.no-js .w>span{transform:none}

/* intro loader */
.loader{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center;transition:clip-path 1.2s var(--ease);clip-path:inset(0 0 0 0)}
.loader.out{clip-path:inset(0 0 100% 0)}
.loader-in{display:grid;justify-items:center;gap:26px}
.loader .logo{width:min(300px,62vw);height:auto}
.loader .word{opacity:0;animation:wordin 1.1s var(--ease-out) .8s forwards}
@keyframes wordin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.loader .logo g{transform-box:fill-box;transform-origin:center;transform:scaleX(0);animation:band .9s var(--ease) forwards}
.loader .logo g.b0{animation-delay:.1s}.loader .logo g.b1{animation-delay:.24s}.loader .logo g.b2{animation-delay:.38s}.loader .logo g.b3{animation-delay:.52s}
@keyframes band{to{transform:scaleX(1)}}
.loader .wm{font-weight:700;letter-spacing:.6em;font-size:15px;opacity:0;animation:wm 1.2s var(--ease-out) .8s forwards;margin-inline-start:.6em;direction:ltr}
@keyframes wm{from{opacity:0;letter-spacing:1.4em}to{opacity:1;letter-spacing:.6em}}
.loader .bar{width:180px;height:1px;background:var(--line);position:relative;overflow:hidden}
.loader .bar::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;animation:lb 1.6s var(--ease) .3s forwards}
@keyframes lb{to{transform:scaleX(1)}}

/* route wipe */
.wipe{position:fixed;inset:0;z-index:95;pointer-events:none;display:grid;place-items:center;visibility:hidden}
.wipe .a,.wipe .b{position:absolute;inset:0;transform:translateY(100%)}
.wipe .a{background:var(--wc,#fff)}
.wipe .b{background:var(--ink)}
.wipe .lbl{position:relative;z-index:2;font-family:var(--f-display);font-size:clamp(48px,9vw,150px);color:#fff;opacity:0;transform:translateY(30px)}
html[lang="ar"] .wipe .lbl{font-weight:700}
.wipe.go{visibility:visible}
.wipe.go .a{animation:wa 1.5s var(--ease) forwards}
.wipe.go .b{animation:wb 1.5s var(--ease) forwards}
.wipe.go .lbl{animation:wl 1.5s var(--ease-out) forwards}
@keyframes wa{0%{transform:translateY(100%)}35%{transform:translateY(0)}65%{transform:translateY(0)}100%{transform:translateY(-100%)}}
@keyframes wb{0%{transform:translateY(100%)}10%{transform:translateY(100%)}45%{transform:translateY(0)}60%{transform:translateY(0)}95%{transform:translateY(-100%)}100%{transform:translateY(-100%)}}
@keyframes wl{0%,35%{opacity:0;transform:translateY(30px)}48%,62%{opacity:1;transform:none}80%,100%{opacity:0;transform:translateY(-30px)}}

/* cursor */
.cur{position:fixed;top:0;left:0;z-index:99;pointer-events:none;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;mix-blend-mode:difference;transition:width .4s var(--ease-out),height .4s var(--ease-out),margin .4s var(--ease-out),background .4s;display:grid;place-items:center}
.cur span{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#000;opacity:0;transition:opacity .3s}
.cur.big{width:92px;height:92px;margin:-46px 0 0 -46px}
.cur.big span{opacity:1}
@media (hover:none),(pointer:coarse){.cur{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .rv{opacity:1;transform:none}.rv-clip::before{display:none}
  .w>span{transform:none}
  .grain,.cur{display:none}
}