/* ==========================================================================
   Wardany Strategic Development — wardany.dev
   Brand system 2026: dk #282828 · gr #555351 · cu #A25C32 · ge #BCBAB0 · cr #F6F4F0
   Cormorant Garamond (display) · DM Sans (text) · Cairo (Arabic)
   Motion: cubic-bezier(0.25, 1, 0.5, 1). Quiet luxury — no flips, spins or hard zooms.
   ========================================================================== */
:root{
  --dk:#282828; --dk-d:#202020; --gr:#555351; --cu:#A25C32; --ge:#BCBAB0; --cr:#F6F4F0;
  --cu-hover:#8B4B26; --cu-press:#723B1C;
  --cu-lt:#D49567;            /* copper tint for small text on charcoal (AA) */
  --paper:#FFFFFF; --line:#DEDBD2; --line-d:rgba(188,186,176,.18); --muted:#6B6963;
  --err:#D93838;
  --dp:"Cormorant Garamond", "Times New Roman", serif;
  --ss:"DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ar:"Cairo", system-ui, sans-serif;
  --ease:cubic-bezier(.25,1,.5,1);
  --gut:clamp(16px,4.4vw,64px);
  --max:1280px;
  --hdr:80px;
}
@media (max-width:760px){ :root{ --hdr:64px } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--hdr) + 16px)}
body{
  margin:0; font-family:var(--ss); font-weight:400; font-size:16px; line-height:1.7;
  color:var(--dk); background:var(--dk); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
[lang="ar"] body, [lang="ar"] button, [lang="ar"] input, [lang="ar"] select, [lang="ar"] textarea{font-family:var(--ar)}
[lang="ar"] *{letter-spacing:0 !important}
img,video,svg{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer}
h1,h2,h3,h4,p,figure,dl,dd,ul,ol{margin:0}
ul,ol{padding:0; list-style:none}
:focus-visible{outline:2px solid var(--cu-lt); outline-offset:3px}
.on-light :focus-visible, .light :focus-visible{outline-color:var(--cu)}
::selection{background:var(--cu); color:#fff}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:fixed; inset-inline-start:12px; top:-60px; z-index:200; background:var(--cu); color:#fff; padding:10px 16px; transition:top .3s var(--ease)}
.skip:focus{top:12px}

.wrap{width:100%; max-width:calc(var(--max) + var(--gut)*2); margin-inline:auto; padding-inline:var(--gut)}

/* ---------- type ---------- */
.eyebrow{
  font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--cu-lt);
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{content:""; width:28px; height:1px; background:currentColor; opacity:.7}
.light .eyebrow{color:var(--cu)}
[lang="ar"] .eyebrow{font-size:13px; font-weight:600}
.display, h1, h2, h3{font-family:var(--dp); font-weight:300; line-height:1.08; letter-spacing:-.012em; text-wrap:balance}
[lang="ar"] .display, [lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3{font-family:var(--ar); font-weight:300; line-height:1.3}
h1{font-size:clamp(44px,6.6vw,96px)}
h2{font-size:clamp(32px,4.4vw,62px)}
h3{font-size:clamp(22px,2.2vw,30px); font-weight:400}
em,.it{font-style:italic; color:var(--cu-lt)}
.light em{color:var(--cu)}
.lead{font-size:clamp(17px,1.5vw,20px); line-height:1.75; color:var(--ge); max-width:58ch}
.light .lead{color:var(--gr)}
.num{font-family:var(--dp); font-weight:300; font-variant-numeric:lining-nums tabular-nums}

/* ---------- sections ---------- */
section{position:relative}
.dark{background:var(--dk); color:var(--cr)}
.light{background:var(--cr); color:var(--dk)}
.glass-zone{background:transparent; color:var(--cr)}
.pad{padding-block:clamp(72px,10vw,144px)}
.sec-head{display:grid; gap:20px; max-width:880px; margin-bottom:clamp(40px,6vw,80px)}

/* ---------- buttons ---------- */
.btn{
  --pad-y:14px; --pad-x:28px;
  display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px;
  padding:var(--pad-y) var(--pad-x); border:1px solid transparent; border-radius:2px;
  font-family:var(--ss); font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  cursor:pointer; touch-action:manipulation; position:relative;
}
[lang="ar"] .btn{font-family:var(--ar); font-size:15px; font-weight:600; text-transform:none}
.btn-primary{background:var(--cu); color:#fff}
.btn-primary:hover{background:var(--cu-hover)}
.btn-primary:active{background:var(--cu-press)}
.btn-ghost{border-color:var(--cu); color:var(--cu-lt); padding:13px 27px}
.btn-ghost:hover{background:var(--cu); color:#fff}
.light .btn-ghost{color:var(--cu)}
.light .btn-ghost:hover{color:#fff}
.btn[disabled]{background:var(--ge); color:#888; opacity:.5; cursor:not-allowed}
.arr{width:18px; height:10px; flex:none; transition:transform .35s var(--ease)}
[dir="rtl"] .arr{transform:scaleX(-1)}
.btn:hover .arr, .tlink:hover .arr{transform:translateX(4px)}
[dir="rtl"] .btn:hover .arr, [dir="rtl"] .tlink:hover .arr{transform:scaleX(-1) translateX(4px)}
.tlink{
  display:inline-flex; align-items:center; gap:12px; font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding-block:6px; position:relative; color:inherit;
}
[lang="ar"] .tlink{font-size:15px; font-weight:600; text-transform:none}
.tlink::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px; background:var(--cu-lt);
  transform:scaleX(.3); transition:transform .45s var(--ease);
}
.light .tlink::after{background:var(--cu)}
.tlink:hover::after{transform:scaleX(1)}

/* ---------- header ---------- */
.hdr{
  position:fixed; inset-inline:0; top:0; z-index:100; height:var(--hdr);
  display:flex; align-items:center; color:var(--cr);
  transition:background-color .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-solid{background:rgba(40,40,40,.85); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom-color:rgba(188,186,176,.15)}
.hdr.is-hidden{transform:translateY(-100%)}
.hdr-in{display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%}
.logo{display:block; flex:none}
.logo img{height:36px; width:auto}
@media (max-width:760px){ .logo img{height:30px} }
.nav{display:flex; align-items:center; gap:clamp(18px,2.4vw,36px)}
.nav a:not(.btn){
  font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; position:relative; padding:8px 0; color:var(--cr);
}
[lang="ar"] .nav a:not(.btn){font-size:15px; font-weight:600; text-transform:none}
.nav a:not(.btn)::after{
  content:""; position:absolute; inset-inline-start:50%; bottom:-2px; width:5px; height:5px; border-radius:50%;
  background:var(--cu); transform:translateX(-50%) scale(0); transition:transform .35s var(--ease);
}
[dir="rtl"] .nav a:not(.btn)::after{transform:translateX(50%) scale(0)}
.nav a[aria-current="page"]::after{transform:translateX(-50%) scale(1)}
[dir="rtl"] .nav a[aria-current="page"]::after{transform:translateX(50%) scale(1)}
.nav a:not(.btn):hover{color:#fff}
.hdr-tools{display:flex; align-items:center; gap:14px}
.lang{
  font-size:13px; font-weight:500; letter-spacing:.08em; min-height:44px; min-width:44px; display:inline-grid; place-items:center;
  border:1px solid var(--line-d); border-radius:2px; padding-inline:12px; transition:border-color .3s, background-color .3s;
}
[lang="ar"] .lang{font-family:var(--ss); letter-spacing:.04em}
.lang:hover{border-color:var(--cu)}
.burger{display:none; width:44px; height:44px; background:none; border:1px solid var(--line-d); border-radius:2px; position:relative}
.burger i{position:absolute; inset-inline:12px; height:1px; background:var(--cr); transition:transform .4s var(--ease), opacity .3s}
.burger i:nth-child(1){top:16px} .burger i:nth-child(2){top:21px} .burger i:nth-child(3){top:26px}
.menu-open .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-open .burger i:nth-child(2){opacity:0}
.menu-open .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media (max-width:980px){
  .burger{display:block}
  .nav{
    position:fixed; inset:0; top:0; padding:calc(var(--hdr) + 32px) var(--gut) 40px; background:var(--dk);
    flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:6px;
    opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
  }
  .menu-open .nav{opacity:1; visibility:visible}
  .nav a:not(.btn){font-family:var(--dp); font-size:clamp(34px,9vw,52px); font-weight:300; text-transform:none; letter-spacing:0; padding:8px 0}
  [lang="ar"] .nav a:not(.btn){font-family:var(--ar); font-size:clamp(28px,8vw,42px)}
  .nav .btn{margin-top:24px}
  .hdr{z-index:110}
  .menu-open .hdr-tools,.menu-open .logo{position:relative; z-index:2}
}

/* ---------- hero ---------- */
#fx{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:0; transition:opacity 1.2s var(--ease)}
#fx.is-live{opacity:1}
.fx-fallback #fx{display:none}
.fx-poster{
  position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--dk) url("../img/cover-copper-1600.webp") center/cover no-repeat; opacity:0;
}
.fx-fallback .fx-poster{opacity:.55}
main{position:relative; z-index:1}
.hero{
  min-height:100svh; display:grid; align-content:end; padding-top:calc(var(--hdr) + 40px); padding-bottom:clamp(32px,5vw,64px);
  color:var(--cr); position:relative; isolation:isolate;
}
.hero::after{ /* ground the copy against the contour field */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(40,40,40,0) 38%, rgba(40,40,40,.55) 78%, rgba(40,40,40,.9) 100%);
}
.hero .eyebrow{margin-bottom:clamp(20px,3vw,36px)}
.hero h1{max-width:none; color:var(--cr); font-size:clamp(40px,min(6vw,11.5vh),92px)}
[lang="ar"] .hero h1{font-size:clamp(38px,min(5.2vw,10vh),80px)}
.hero h1 .ln{display:block}
.hero h1 .ln:last-child{color:var(--cu-lt); font-style:italic}
[lang="ar"] .hero h1 .ln:last-child{font-style:normal}
.hero .lead{margin-top:clamp(20px,3vw,32px); color:var(--ge)}
.hero-cta{display:flex; flex-wrap:wrap; gap:16px; margin-top:clamp(28px,4vw,44px)}
.hero-foot{
  margin-top:clamp(40px,7vw,96px); padding-top:24px; border-top:1px solid var(--line-d);
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px 48px;
}
.hero-foot dl{display:flex; flex-wrap:wrap; gap:16px 56px}
.hero-foot dt{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ge)}
[lang="ar"] .hero-foot dt{font-size:13px}
.hero-foot dd{margin-top:4px; font-family:var(--dp); font-size:22px; color:var(--cr)}
[lang="ar"] .hero-foot dd{font-family:var(--ar); font-size:18px}
.scroll-cue{display:inline-flex; align-items:center; gap:14px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ge)}
[lang="ar"] .scroll-cue{font-size:13px}
.scroll-cue i{position:relative; width:1px; height:56px; background:var(--line-d); overflow:hidden}
.scroll-cue i::after{content:""; position:absolute; inset-inline:0; top:-40%; height:40%; background:var(--cu-lt); animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0)}100%{transform:translateY(360%)}}

/* ---------- pillars (pinned story) ---------- */
.pillars{background:transparent; color:var(--cr); padding-block:clamp(72px,10vw,144px)}
.pillars-grid{display:grid; gap:clamp(32px,5vw,80px); align-items:center}
@media (min-width:980px){ .pillars-grid{grid-template-columns:1fr 1fr} }
.pillar-list{display:grid; gap:0; margin-top:clamp(28px,4vw,48px)}
.pillar{
  display:grid; grid-template-columns:56px 1fr; gap:0 16px; padding-block:24px; border-top:1px solid var(--line-d);
  opacity:.45; transition:opacity .6s var(--ease);
}
.pillar:last-child{border-bottom:1px solid var(--line-d)}
.pillar.is-on{opacity:1}
.pillar .n{font-family:var(--dp); font-size:20px; color:var(--cu-lt); padding-top:2px}
.pillar h3{margin-bottom:8px}
.pillar p{color:var(--ge); max-width:46ch}
.bp{position:relative; aspect-ratio:1; width:100%; max-width:560px; margin-inline:auto; border:1px solid var(--line-d)}
.bp::before{ /* survey grid */
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--line-d) 1px, transparent 1px), linear-gradient(90deg, var(--line-d) 1px, transparent 1px);
  background-size:12.5% 12.5%;
}
.bp svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.bp path,.bp circle,.bp rect,.bp line,.bp polyline{fill:none; stroke:var(--ge); stroke-width:1; vector-effect:non-scaling-stroke}
.bp .cu{stroke:var(--cu-lt); stroke-width:1.5}
.bp .dot{fill:var(--cu-lt); stroke:none}
.bp-g{transition:opacity .6s var(--ease)}
.bp-label{position:absolute; inset-inline-start:12px; bottom:10px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ge)}

/* ---------- numbers ---------- */
.numbers{background:var(--dk); color:var(--cr); padding-block:clamp(72px,10vw,144px)}
.stat-grid{display:grid; gap:1px; grid-template-columns:repeat(2,1fr); background:var(--line-d); border:1px solid var(--line-d)}
@media (min-width:900px){ .stat-grid{grid-template-columns:repeat(4,1fr)} }
.stat{background:var(--dk); padding:clamp(24px,3vw,40px) clamp(18px,2.4vw,32px); border-top:2px solid var(--cu); min-width:0}
.stat .num{font-size:clamp(40px,5vw,64px); line-height:1; color:var(--cu-lt)}
.stat p{margin-top:14px; font-size:14px; color:var(--ge); line-height:1.5}
[lang="ar"] .stat p{font-size:15px}
.note{margin-top:20px; font-size:13px; color:var(--ge)}

/* ---------- portfolio ---------- */
.portfolio{background:var(--cr); color:var(--dk)}
.pf-grid{display:grid; gap:clamp(14px,1.6vw,24px); grid-template-columns:repeat(12,1fr)}
.pcard{
  position:relative; overflow:hidden; background:var(--dk); color:var(--cr); min-height:clamp(320px,38vw,520px);
  grid-column:span 12; display:flex; align-items:flex-end; border:1px solid rgba(188,186,176,.2);
  transition:border-color .4s var(--ease), transform .5s var(--ease);
}
@media (min-width:900px){
  .pcard.w7{grid-column:span 7} .pcard.w5{grid-column:span 5} .pcard.w6{grid-column:span 6}
}
.pcard:hover{border-color:var(--cu); transform:translateY(-4px)}
.pcard .ph{position:absolute; inset:0; overflow:hidden}
.pcard .ph{transition:transform .5s var(--ease)}
.pcard .ph img{width:100%; height:100%; object-fit:cover; will-change:transform}
.pcard:hover .ph{transform:scale(1.03)}
.pcard::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(40,40,40,0) 30%, rgba(40,40,40,.78) 100%)}
.pcard .cap{position:relative; z-index:2; padding:clamp(20px,2.6vw,36px); width:100%; display:grid; gap:8px}
.pcard .idx{font-family:var(--dp); font-size:16px; color:var(--cu-lt)}
.pcard h3{font-size:clamp(28px,3.2vw,44px); color:var(--cr)}
.pcard .meta{font-size:13px; color:var(--ge); letter-spacing:.04em}
.pcard .go{margin-top:8px; justify-self:start}
.pcard.text{background:var(--dk); min-height:240px; align-items:center}
.pcard.text::before{display:none}
.pcard.text .pat{position:absolute; inset:0; opacity:.5; background:
  repeating-linear-gradient(90deg, transparent 0 79px, var(--line-d) 79px 80px),
  repeating-linear-gradient(0deg, transparent 0 79px, var(--line-d) 79px 80px)}
.pf-foot{margin-top:40px}

/* ---------- services / structure ---------- */
.services{background:var(--dk); color:var(--cr)}
.svc-grid{display:grid; gap:1px; background:var(--line-d); border:1px solid var(--line-d)}
@media (min-width:760px){ .svc-grid.c2{grid-template-columns:repeat(2,1fr)} .svc-grid.c3{grid-template-columns:repeat(3,1fr)} }
.svc{background:var(--dk); padding:clamp(24px,3vw,44px); min-width:0; transition:background-color .4s var(--ease)}
.svc:hover{background:#2f2f2e}
.svc .n{font-family:var(--dp); font-size:15px; color:var(--cu-lt); border-bottom:1px solid var(--cu); display:inline-block; padding-bottom:3px; margin-bottom:20px}
.svc h3{margin-bottom:12px}
.svc p{color:var(--ge); font-size:15.5px}
.stack{display:grid; gap:clamp(56px,8vw,112px)}

/* ---------- founder ---------- */
.founder{background:var(--cr); color:var(--dk)}
.founder-grid{display:grid; gap:clamp(32px,5vw,80px); align-items:center}
@media (min-width:900px){ .founder-grid{grid-template-columns:5fr 6fr} }
.portrait{position:relative; background:var(--dk); aspect-ratio:4/5; overflow:hidden; max-width:520px}
.portrait img{width:100%; height:100%; object-fit:cover; object-position:50% 12%}
.portrait::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(188,186,176,.2); pointer-events:none}
.founder blockquote{margin:0; font-family:var(--dp); font-size:clamp(28px,3.4vw,46px); font-weight:300; line-height:1.18; text-wrap:balance}
[lang="ar"] .founder blockquote{font-family:var(--ar); line-height:1.5}
.founder blockquote::before{content:"“"; display:block; font-size:1.8em; line-height:.7; color:var(--cu); margin-bottom:.1em}
[lang="ar"] .founder blockquote::before{content:"”"}
.founder .body{margin-top:28px; display:grid; gap:14px; color:var(--gr); max-width:56ch}
.sign{margin-top:32px; display:flex; align-items:center; gap:18px}
.sign img{height:44px; width:auto}
.sign b{display:block; font-weight:500}
.sign span{font-size:13px; color:var(--muted)}

/* ---------- press strip ---------- */
.press-strip{background:var(--cr); color:var(--dk); border-top:1px solid var(--line)}
.outlets{display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--line)}
.outlets a{
  flex:1 1 200px; padding:26px 18px; border-bottom:1px solid var(--line); border-inline-end:1px solid var(--line);
  font-family:var(--dp); font-size:clamp(20px,2vw,26px); color:var(--gr); text-align:center; transition:color .35s, background-color .35s;
}
[lang="ar"] .outlets a{font-family:var(--ar); font-size:20px; font-weight:500}
.outlets a:hover{color:var(--cu); background:var(--paper)}

/* ---------- CTA + form ---------- */
.cta-sec{background:var(--dk); color:var(--cr); border-top:1px solid var(--cu)}
.cta-grid{display:grid; gap:clamp(36px,5vw,80px)}
@media (min-width:980px){ .cta-grid{grid-template-columns:5fr 6fr; align-items:start} }
.cta-grid h2{margin-block:20px 24px}
.form{display:grid; gap:20px}
.form .row{display:grid; gap:20px}
@media (min-width:640px){ .form .row.two{grid-template-columns:1fr 1fr} }
.field{display:grid; gap:8px}
.field label{font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ge)}
[lang="ar"] .field label{font-size:14px; font-weight:600; text-transform:none}
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; min-height:48px; background:rgba(255,255,255,.05); color:var(--cr); border:1px solid var(--ge); border-radius:0;
  font:inherit; font-size:16px; transition:border-color .3s, box-shadow .3s; appearance:none; -webkit-appearance:none;
}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--ge) 50%),linear-gradient(135deg,var(--ge) 50%,transparent 50%); background-position:calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size:5px 5px; background-repeat:no-repeat; padding-inline-end:40px}
[dir="rtl"] .field select{background-position:20px 55%, 15px 55%}
.field select option{color:#222}
.field textarea{min-height:120px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#8a8884; font-style:italic; font-weight:300}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--cu); box-shadow:0 0 0 3px rgba(162,92,50,.28)}
.field.has-err input,.field.has-err select,.field.has-err textarea{border-color:var(--err)}
.field .err{display:none; font-size:12px; color:#ff8e8e}
.field.has-err .err{display:block}
.hp{position:absolute; inset-inline-start:-9999px; width:1px; height:1px; opacity:0}
.form-msg{min-height:1.5em; font-size:15px}
.form-msg.ok{color:#a8d5a0} .form-msg.bad{color:#ff9a9a}
.fine{font-size:13px; color:var(--ge)}
.fine a{color:var(--cu-lt); border-bottom:1px solid currentColor}

/* ---------- footer ---------- */
.ftr{background:var(--dk); color:var(--cr); border-top:1px solid var(--cu); padding-top:clamp(56px,7vw,96px); position:relative; z-index:1}
.ftr-grid{display:grid; gap:40px 24px; grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){ .ftr-grid{grid-template-columns:1.6fr repeat(4,1fr)} }
.ftr-brand img{height:40px; width:auto; margin-bottom:20px}
.ftr-brand p{color:var(--ge); font-size:14px; max-width:34ch}
.ftr h4{font-family:var(--ss); font-weight:500; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--cu-lt); margin-bottom:18px}
[lang="ar"] .ftr h4{font-family:var(--ar); font-size:14px; letter-spacing:0; font-weight:700}
.ftr li{margin-bottom:10px}
.ftr li a{color:var(--ge); font-size:15px; transition:color .3s}
.ftr li a:hover{color:#fff}
.ftr-base{margin-top:clamp(40px,6vw,72px); padding-block:24px; border-top:1px solid var(--line-d); display:flex; flex-wrap:wrap; gap:12px 32px; justify-content:space-between; font-size:13px; color:var(--ge)}
.ftr-base q{font-family:var(--dp); font-style:italic; font-size:17px; quotes:none}
[lang="ar"] .ftr-base q{font-family:var(--ar); font-style:normal; font-size:15px}

/* ---------- ask widget ---------- */
.ask{position:fixed; inset-inline-end:clamp(14px,2.4vw,28px); bottom:calc(clamp(14px,2.4vw,28px) + env(safe-area-inset-bottom,0px)); z-index:90}
.ask-btn{
  display:flex; align-items:center; gap:10px; min-height:52px; padding:0 22px 0 14px; border:0; border-radius:999px; background:var(--cu); color:#fff;
  font-size:13px; font-weight:500; letter-spacing:.06em; box-shadow:0 8px 28px rgba(0,0,0,.35); transition:background-color .3s;
}
[dir="rtl"] .ask-btn{padding:0 14px 0 22px}
[lang="ar"] .ask-btn{font-size:15px; font-weight:600; letter-spacing:0}
.ask-btn:hover{background:var(--cu-hover)}
.ask-btn img{width:30px; height:28px; object-fit:contain}
.ask-menu{
  position:absolute; inset-inline-end:0; bottom:64px; width:min(300px,calc(100vw - 32px)); background:var(--dk); border:1px solid rgba(188,186,176,.25);
  padding:8px; display:grid; gap:2px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.ask.open .ask-menu{opacity:1; visibility:visible; transform:none}
.ask-menu a{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; min-height:48px; color:var(--cr); font-size:15px; transition:background-color .3s}
.ask-menu a:hover{background:rgba(162,92,50,.22)}

/* ---------- inner pages ---------- */
.page-hero{padding-top:calc(var(--hdr) + clamp(56px,9vw,120px)); padding-bottom:clamp(40px,6vw,80px); color:var(--cr); position:relative}
.page-hero h1{max-width:18ch; margin-block:20px 24px}
.crumb{display:flex; gap:10px; font-size:13px; color:var(--ge); margin-bottom:12px}
.crumb a:hover{color:#fff}
.proj-hero{position:relative; min-height:78svh; display:grid; align-items:end; color:var(--cr); overflow:hidden; background:var(--dk)}
.proj-hero .bg{position:absolute; inset:0}
.proj-hero .bg img{width:100%; height:100%; object-fit:cover; will-change:transform}
.proj-hero::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(40,40,40,.55) 0%, rgba(40,40,40,.1) 35%, rgba(40,40,40,.88) 100%)}
.proj-hero .in{position:relative; z-index:2; padding-top:calc(var(--hdr) + 40px); padding-bottom:clamp(32px,5vw,72px)}
.proj-hero h1{margin-block:18px 16px}
.proj-hero .loc{color:var(--ge); font-size:15px}
.pfacts{display:grid; gap:1px; background:var(--line-d); border-top:1px solid var(--line-d); border-bottom:1px solid var(--line-d); grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.pfacts .stat{border-top:2px solid var(--cu)}
.prose{display:grid; gap:clamp(40px,6vw,88px)}
.split{display:grid; gap:clamp(24px,4vw,64px)}
@media (min-width:900px){ .split{grid-template-columns:1fr 2fr} }
.split h2{font-size:clamp(26px,2.8vw,38px)}
.split .txt{display:grid; gap:18px; max-width:64ch}
.split .txt p{color:var(--gr); font-size:17px}
.dark .split .txt p{color:var(--ge)}
.ticks li{position:relative; padding-inline-start:26px; padding-block:6px; color:inherit}
.ticks li::before{content:""; position:absolute; inset-inline-start:0; top:1.05em; width:12px; height:1px; background:var(--cu)}
.gal{display:grid; gap:clamp(12px,1.6vw,24px); grid-template-columns:repeat(12,1fr)}
.gal figure{position:relative; overflow:hidden; background:var(--dk-d); grid-column:span 12; aspect-ratio:16/10}
.gal figure img{width:100%; height:100%; object-fit:cover}
@media (min-width:760px){ .gal figure.h{grid-column:span 6} .gal figure.f{grid-column:span 12; aspect-ratio:21/9} }
.vids{display:grid; gap:clamp(12px,1.6vw,24px); grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.vtile{position:relative; display:block; width:100%; text-align:start; background:var(--dk-d); border:1px solid var(--line-d); padding:0; overflow:hidden; aspect-ratio:16/9; color:var(--cr)}
.vtile img{width:100%; height:100%; object-fit:cover; opacity:.85; transition:opacity .4s, transform .5s var(--ease)}
.vtile:hover img{opacity:1; transform:scale(1.03)}
.vtile .pl{position:absolute; inset:0; display:grid; place-items:center}
.vtile .pl i{width:68px; height:68px; border-radius:50%; background:rgba(162,92,50,.92); display:grid; place-items:center; transition:transform .4s var(--ease)}
.vtile:hover .pl i{transform:scale(1.06)}
.vtile .pl svg{width:22px; height:22px; margin-inline-start:3px; fill:#fff}
[dir="rtl"] .vtile .pl svg{transform:scaleX(-1)}
.vtile span.t{position:absolute; inset-inline:0; bottom:0; padding:18px; font-size:14px; background:linear-gradient(0deg, rgba(40,40,40,.9), transparent)}
.partners{display:grid; gap:clamp(12px,1.6vw,24px); grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.partners figure img{width:100%; aspect-ratio:3/2; object-fit:cover}
.partners figcaption{padding-top:12px; font-size:14px; color:var(--gr)}
.dark .partners figcaption{color:var(--ge)}
.next{display:block; border-top:1px solid var(--line-d); padding-block:clamp(40px,6vw,88px)}
.next .big{font-family:var(--dp); font-size:clamp(40px,7vw,104px); line-height:1.05; font-weight:300; transition:color .4s}
[lang="ar"] .next .big{font-family:var(--ar)}
.next:hover .big{color:var(--cu-lt)}
.disc{font-size:13px; color:var(--ge); max-width:80ch}

/* press page */
.feat{display:grid; gap:1px; background:var(--line)}
@media (min-width:760px){ .feat{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .feat{grid-template-columns:repeat(3,1fr)} }
.fcard{background:var(--cr); padding:clamp(22px,2.6vw,34px); display:grid; gap:14px; align-content:space-between; min-height:220px; transition:background-color .35s}
.fcard:hover{background:var(--paper)}
.fcard .src{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--cu); font-weight:500}
[lang="ar"] .fcard .src{font-size:14px; letter-spacing:0; font-weight:700}
.fcard h3{font-size:22px; line-height:1.25}
[lang="ar"] .fcard h3{font-size:19px; font-weight:400}
.fcard .gloss{font-size:14px; color:var(--muted)}
.arch details{border-top:1px solid var(--line)}
.arch summary{cursor:pointer; list-style:none; padding:22px 0; font-family:var(--dp); font-size:28px; display:flex; justify-content:space-between; align-items:center; min-height:48px}
[lang="ar"] .arch summary{font-family:var(--ar); font-size:22px}
.arch summary::-webkit-details-marker{display:none}
.arch summary::after{content:"+"; color:var(--cu); font-size:28px}
.arch details[open] summary::after{content:"–"}
.arch ul{display:grid; gap:0; padding-bottom:20px}
.arch li a{display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-top:1px solid var(--line); color:var(--gr); font-size:15px; transition:color .3s}
.arch li a:hover{color:var(--cu)}
.arch li a span:last-child{color:var(--muted); font-size:13px; white-space:nowrap}

/* contact + legal + 404 */
.cinfo{display:grid; gap:1px; background:var(--line-d); border:1px solid var(--line-d)}
.cinfo > div{background:var(--dk); padding:22px 24px}
.cinfo dt{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--cu-lt)}
[lang="ar"] .cinfo dt{font-size:13px; letter-spacing:0}
.cinfo dd{margin-top:6px; font-size:18px}
.cinfo a:hover{color:var(--cu-lt)}
.legal-body{max-width:68ch; display:grid; gap:20px; color:var(--gr); font-size:17px}
.legal-body p:first-child{font-size:19px; color:var(--dk)}
.nf{min-height:80svh; display:grid; place-content:center; text-align:center; gap:24px; padding:var(--gut); color:var(--cr)}
.nf .num{font-size:clamp(96px,22vw,260px); line-height:.9; color:var(--cu-lt)}

/* ---------- lightbox ---------- */
.lb{position:fixed; inset:0; z-index:300; background:rgba(20,20,20,.94); display:grid; place-items:center; padding:clamp(12px,3vw,40px); opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s}
.lb.open{opacity:1; visibility:visible}
.lb video{width:min(1200px,100%); max-height:82svh; background:#000}
.lb button{position:absolute; top:max(12px,env(safe-area-inset-top,0px)); inset-inline-end:12px; width:48px; height:48px; border:1px solid var(--line-d); background:rgba(40,40,40,.8); color:#fff; font-size:22px; line-height:1}

/* ---------- reveal states (set by JS only) ---------- */
.js [data-reveal],.js [data-hero]{opacity:0; transform:translateY(20px)}
.js .w{display:inline-block; opacity:0; transform:translateY(24px)}
.js .imgr{clip-path:inset(0 0 99% 0)}
.no-motion [data-reveal],.no-motion [data-hero],.no-motion .w{opacity:1 !important; transform:none !important}
.no-motion .imgr{clip-path:none !important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .scroll-cue i::after{animation:none}
}
@media print{ .hdr,.ask,#fx,.fx-poster{display:none} body{background:#fff} }

.pillar .n,.svc .n,.pcard .idx{font-variant-numeric:lining-nums}
.pillars.compact{padding-block:64px}
.pillars.compact h2{font-size:clamp(30px,3.3vw,48px)}
.pillars.compact .pillar{padding-block:16px}
.pillars.compact .pillar-list{margin-top:24px}
.pillars.compact .bp{max-width:min(520px,70vh)}

/* ---------- 3D build sequence ---------- */
.b3d-sec{padding-block:clamp(72px,10vw,144px) 0; background:var(--dk)}
.b3d-head{display:grid; gap:24px; margin-bottom:clamp(28px,4vw,56px)}
@media (min-width:980px){ .b3d-head{grid-template-columns:1fr 1fr; align-items:end} }
.b3d{position:relative; background:radial-gradient(120% 90% at 50% 20%, #34373a 0%, #1d1e20 70%); overflow:hidden; isolation:isolate}
.b3d-demo{height:clamp(480px,78vh,820px)}
.b3d-stage{position:absolute; inset:0}
.b3d-stage canvas{outline:none}
.b3d-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55}
.is-ready .b3d-poster{display:none}
.b3d-load{position:absolute; inset:0; display:grid; place-items:center; color:var(--ge); font-size:14px; letter-spacing:.12em; text-transform:uppercase; background:rgba(40,40,40,.4); pointer-events:none}
.is-unsupported .b3d-load{background:rgba(40,40,40,.8); padding:24px; text-align:center; text-transform:none; letter-spacing:0; font-size:16px}
.b3d-cap{position:absolute; inset-inline-start:clamp(16px,3vw,40px); top:clamp(16px,3vw,36px); display:grid; gap:2px; max-width:min(360px,60%); pointer-events:none; text-shadow:0 1px 12px rgba(0,0,0,.6)}
.b3d-step{font:300 14px var(--dp); color:var(--cu-lt); letter-spacing:.2em}
.b3d-cap b{font:300 clamp(26px,3.4vw,44px)/1.05 var(--dp); color:var(--cr)}
[lang="ar"] .b3d-cap b{font-family:var(--ar); font-weight:400}
.b3d-cap span:last-child{font-size:14px; color:var(--ge); line-height:1.5}
.b3d-engine{position:absolute; inset-inline-end:16px; top:16px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ge); border:1px solid var(--line-d); padding:4px 10px; background:rgba(40,40,40,.5)}
.b3d-bar{position:absolute; inset-inline:0; bottom:0; display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding:14px clamp(16px,3vw,40px); background:linear-gradient(0deg, rgba(32,32,32,.92), rgba(32,32,32,0)); }
.b3d-btn{width:48px; height:48px; flex:none; display:grid; place-items:center; background:var(--cu); border:0; border-radius:50%; color:#fff; transition:background-color .3s}
.b3d-btn:hover{background:var(--cu-hover)} .b3d-btn svg{width:20px; height:20px; fill:currentColor}
.b3d-chips{display:flex; flex-wrap:wrap; gap:6px}
.b3d-chip{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px; background:rgba(40,40,40,.65); color:var(--ge); border:1px solid var(--line-d); border-radius:2px; font-size:13px; transition:border-color .3s, color .3s, background-color .3s}
.b3d-chip i{font:normal 300 13px var(--dp); color:var(--cu-lt)}
.b3d-chip:hover{color:#fff; border-color:var(--cu)}
.b3d-chip[aria-pressed=true]{background:var(--cu); color:#fff; border-color:var(--cu)} .b3d-chip[aria-pressed=true] i{color:#fff}
.b3d-chip.sm{min-height:36px; padding:0 12px}
.b3d-switch{display:inline-flex; align-items:center; gap:10px; font-size:14px; color:var(--cr); cursor:pointer; min-height:40px}
.b3d-switch input{appearance:none; -webkit-appearance:none; width:42px; height:24px; border-radius:999px; background:#555351; position:relative; flex:none; transition:background-color .3s; cursor:pointer}
.b3d-switch input::after{content:""; position:absolute; top:3px; inset-inline-start:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .3s var(--ease)}
.b3d-switch input:checked{background:var(--cu)} .b3d-switch input:checked::after{transform:translateX(18px)}
[dir="rtl"] .b3d-switch input:checked::after{transform:translateX(-18px)}
.b3d-bar .tlink{margin-inline-start:auto}
@media (max-width:760px){ .b3d-chip span{display:none} .b3d-chip{padding:0 12px} .b3d-bar .tlink{margin:0} .b3d-cap{max-width:80%} }

/* full page */
.b3d-full{padding-top:var(--hdr)}
.b3d-fullmode{display:grid; height:calc(100svh - var(--hdr)); min-height:560px; grid-template-columns:1fr 360px}
.b3d-fullmode .b3d-stage{position:relative; inset:auto}
.b3d-fullmode .b3d-load,.b3d-fullmode .b3d-cap,.b3d-fullmode .b3d-engine{grid-column:1}
.b3d-panel{background:rgba(32,32,32,.96); border-inline-start:1px solid var(--line-d); padding:20px; overflow-y:auto; display:grid; gap:18px; align-content:start; z-index:2}
.b3d-ph h1{font-size:30px; margin:8px 0 6px} .b3d-ph .muted{color:var(--ge); font-size:14px; margin:0}
.b3d-row{display:flex; align-items:center; gap:14px}
.b3d-range{width:100%; accent-color:var(--cu); height:28px}
.b3d-chips-col{display:grid; grid-template-columns:1fr 1fr}
.b3d-chips-col .b3d-chip span{display:inline}
.b3d-group{display:grid; gap:10px; padding-top:14px; border-top:1px solid var(--line-d)}
.b3d-group h3{font:500 11px var(--ss); letter-spacing:.18em; text-transform:uppercase; color:var(--cu-lt)}
.b3d-layers{display:flex; flex-wrap:wrap; gap:8px}
.lyr{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 12px; border:1px solid var(--line-d); font-size:13px; cursor:pointer; color:var(--cr)}
.lyr input{position:absolute; opacity:0; pointer-events:none}
.lyr i{width:12px; height:12px; border-radius:50%; background:var(--c); opacity:.35; transition:opacity .3s}
.lyr input:checked + i{opacity:1; box-shadow:0 0 10px var(--c)}
.lyr input:focus-visible + i{outline:2px solid var(--cu-lt); outline-offset:3px}
.lyr-plumb{--c:#3da5ff} .lyr-power{--c:#ffb627} .lyr-air{--c:#6ff2c4}
.b3d-views{display:flex; flex-wrap:wrap; gap:6px}
.b3d-lab{display:flex; justify-content:space-between; font-size:13px; color:var(--cr)} .b3d-lab small{color:var(--ge)}
.b3d-actions{display:flex; gap:8px; flex-wrap:wrap}
.b3d-actions .btn{padding:10px 16px; min-height:44px; font-size:12px}
.b3d-panel .fine{font-size:12px}
@media (max-width:980px){
  .b3d-fullmode{grid-template-columns:1fr; grid-template-rows:56vh auto; height:auto}
  .b3d-panel{border-inline-start:0; border-top:1px solid var(--line-d)}
}
.b3d-load[hidden],.b3d-engine[hidden]{display:none}
body:has(.b3d-fullmode) .ask{display:none}
.b3d-fullmode .b3d-engine{inset-inline-end:380px}
@media (max-width:980px){ .b3d-fullmode .b3d-engine{inset-inline-end:16px} }