/* LWAN — site styles · Master Brand Book v1.0: 55% warm white · 30% charcoal · 10% stone · ≤5% lime */
:root{
  --warm:#F6F4EF; --warm-2:#ECE9E1; --warm-3:#E2DED4; --paper:#FBFAF7; --white:#FFFFFF;
  --char:#1A1817; --logo-bg:#FDFCF9; --char-2:#222220; --black:#050505; --stone:#A6A39D; --stone-d:#6B6862;
  --lime:#BBDE15; --line:#D9D5CB; --line-d:#2C2C2A;
  --ok:#2F7D47;
  --ar:"IBM Plex Sans Arabic",Tahoma,"Segoe UI",sans-serif;
  --lat:"Space Grotesk","IBM Plex Sans Arabic",Arial,sans-serif;
  --ui:"Manrope","IBM Plex Sans Arabic",Arial,sans-serif;
  --gut:clamp(16px,6vw,104px);
  --cut:28deg;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--warm);color:var(--char);font-family:var(--ar);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--char);outline-offset:3px}

h1,h2,h3{margin:0;font-weight:600;text-wrap:balance;line-height:1.15}
p{margin:0}
.lat{font-family:var(--lat);direction:ltr;unicode-bidi:isolate}
.num{font-family:var(--lat);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.wrap{padding-inline:var(--gut)}
.slash{display:inline-block;width:.16em;height:.82em;background:var(--lime);transform:skewX(calc(var(--cut) * -1));vertical-align:-.04em;margin-inline:.14em}
.label{font-family:var(--ar);font-size:14px;font-weight:500;letter-spacing:normal;color:var(--stone-d);display:inline-flex;gap:12px;align-items:center}
.label i{width:7px;height:14px;background:var(--lime);transform:skewX(calc(var(--cut) * -1));display:inline-block}
.dk .label{color:var(--stone-d)}
.btn{display:inline-flex;align-items:center;gap:14px;border:0;border-radius:0;padding:16px 26px;font-weight:600;font-size:15px;line-height:1;transition:background .25s,color .25s}
.btn .ar{font-family:var(--lat);transition:transform .25s}
.btn:hover .ar{transform:translateX(-5px)}
.btn-char{background:var(--char);color:var(--warm)}
.btn-char:hover{background:var(--black)}
.btn-lime{background:var(--lime);color:var(--black)}
.btn-line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.btn-line:hover{background:var(--char);color:var(--warm)}

.btn-sm{padding:10px 16px;font-size:14px;gap:8px}

/* ============ header ============ */
.hdr{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;padding-block:24px;border-bottom:1px solid var(--line)}
.hdr .logo{height:24px;color:var(--char)}
.hdr nav{display:flex;gap:34px;justify-content:center;font-size:15px}
.hdr nav a{position:relative;color:#3d3b37;padding-block:4px}
.hdr nav a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;background:var(--char);transform:scaleX(0);transition:transform .3s;transform-origin:right}
.hdr nav a:hover::after{transform:scaleX(1)}
.logo{width:auto;direction:ltr;display:block}

/* ============ hero ============ */
.hero{padding-block:clamp(40px,6vw,84px) 0}
.hero-top{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(24px,4vw,72px);align-items:end}
.hero h1{font-size:clamp(52px,9.2vw,148px);font-weight:700;line-height:1.02;letter-spacing:normal}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 .l>span{display:inline-block;animation:rise .9s cubic-bezier(.2,.7,.1,1) both}
.hero h1 .l:nth-child(2)>span{animation-delay:.12s}
.hero h1 .thin{font-weight:200}
@keyframes rise{from{transform:translateY(60%)}to{transform:none}}
.hero-side{display:grid;gap:26px;padding-bottom:14px}
.hero-side p{color:#4b4944;font-size:17px;max-width:38ch}
.hero-side .row{display:flex;gap:10px;flex-wrap:wrap}
.hero-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:clamp(28px,4vw,56px);padding-block:16px;border-top:1px solid var(--line);font-size:13px;color:var(--stone-d);flex-wrap:wrap}
.hero-meta .lat{letter-spacing:.14em;text-transform:uppercase;font-size:12px}

.cine{position:relative;overflow:hidden}
.cine-frame{position:relative;aspect-ratio:21/9;max-width:100%;overflow:hidden;background:var(--char);clip-path:polygon(9% 0,100% 0,100% 100%,0 100%)}
.cine-frame .sl{position:absolute;inset:0;opacity:0;transition:opacity .5s ease .25s}
.cine-frame .sl.on{opacity:1}
.cine-frame .sl img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 7s ease-out}
.cine-frame .sl.on img{transform:scale(1)}
.cine-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,5,5,.55),transparent 45%);pointer-events:none}
.sweep{position:absolute;top:-5%;bottom:-5%;width:22%;background:var(--lime);transform:translateX(160%) skewX(calc(var(--cut) * -1));z-index:3;pointer-events:none;right:0;opacity:0}
.sweep.go{opacity:1}
.sweep.go{animation:sweep .95s cubic-bezier(.7,0,.25,1)}
@keyframes sweep{0%{transform:translateX(160%) skewX(calc(var(--cut) * -1))}100%{transform:translateX(-560%) skewX(calc(var(--cut) * -1))}}
.cine-cap{position:absolute;z-index:2;bottom:clamp(16px,3vw,36px);right:clamp(16px,3vw,40px);color:var(--warm);display:grid;gap:6px;max-width:min(560px,70%)}
.cine-cap small.lat{letter-spacing:.18em}
.cine-cap small{font-family:var(--lat);font-size:12px;text-transform:uppercase;color:var(--lime)}
.cine-cap strong{font-size:clamp(20px,2.4vw,32px);font-weight:600;line-height:1.3}
.cine-ctl{display:flex;align-items:center;gap:22px;padding-block:18px 0}
.cine-ctl .count{font-family:var(--lat);font-size:14px;color:var(--stone-d);min-width:74px}
.cine-ctl .count b{font-size:28px;color:var(--char);font-weight:500}
.bars{display:flex;gap:8px;flex:1}
.bars button{flex:1;height:2px;border:0;background:var(--line);padding:0;position:relative;overflow:hidden}
.bars button::before{content:"";position:absolute;inset:-8px 0}
.bars button i{position:absolute;inset:0;background:var(--char);transform:scaleX(0);transform-origin:right}
.bars button.done i{transform:scaleX(1)}
.bars button.on i{animation:fill 6.5s linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.arw{display:flex;gap:8px}
.arw button{width:48px;height:48px;border:1px solid var(--char);background:transparent;display:grid;place-items:center;font-family:var(--lat);font-size:18px;transition:.2s}
.arw button:hover{background:var(--char);color:var(--warm)}


/* ============ sections ============ */
.s{padding-block:clamp(80px,11vw,160px)}
.sh{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.sh h2{font-size:clamp(36px,5.2vw,76px);font-weight:600;line-height:1.08;margin-top:18px;letter-spacing:normal}
.sh h2 .thin{font-weight:200}
.sh p{color:var(--stone-d);max-width:46ch;justify-self:end;font-size:16px}
.dk{background:var(--logo-bg);color:var(--char);border-block:1px solid var(--line)}
.dk .sh p{color:var(--stone-d)}

/* about */
.about{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,96px);align-items:start}
.about .big{font-size:clamp(24px,2.9vw,42px);line-height:1.5;font-weight:300}
.about .big b{font-weight:600}
.about .big u{text-decoration:none;background:linear-gradient(var(--lime),var(--lime)) 0 88%/100% .22em no-repeat}
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.figs div{padding:22px 0 0;display:grid;gap:6px}
.figs div+div{border-inline-start:1px solid var(--line);padding-inline-start:24px}
.figs b{font-family:var(--lat);font-size:clamp(40px,4.4vw,64px);font-weight:300;line-height:1;direction:ltr;text-align:right}
.figs span{font-size:14px;color:var(--stone-d)}
.side-facts{display:grid;gap:18px;font-size:14px;color:var(--stone-d);position:sticky;top:90px}
.side-facts div{display:grid;gap:2px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.side-facts b{color:var(--char);font-weight:600;font-size:16px}

/* services */
.svc{border-top:1px solid var(--char)}
.svc-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:32px;align-items:center;padding-block:34px;border-bottom:1px solid var(--line);position:relative;transition:padding .35s}
.svc-row h3{font-size:clamp(26px,3vw,44px);font-weight:600;display:flex;align-items:center;gap:18px;line-height:1.2}
.svc-row h3 .slash{width:.14em;opacity:0;transform:skewX(calc(var(--cut) * -1)) translateX(10px);transition:.35s;margin:0}
.svc-row:hover h3 .slash{opacity:1;transform:skewX(calc(var(--cut) * -1))}
.svc-row p{color:var(--stone-d);font-size:15px;max-width:40ch}
.svc-row .tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tags span{font-size:12px;border:1px solid var(--line);padding:4px 12px;border-radius:999px;color:#4b4944;white-space:nowrap}
.svc-row .peek{position:absolute;left:28%;top:50%;width:230px;aspect-ratio:4/3;transform:translateY(-50%) rotate(-3deg) scale(.9);opacity:0;pointer-events:none;transition:.4s cubic-bezier(.2,.7,.1,1);clip-path:polygon(14% 0,100% 0,100% 100%,0 100%);z-index:2}
.svc-row .peek img{width:100%;height:100%;object-fit:cover}
.svc-row:hover .peek{opacity:1;transform:translateY(-50%) rotate(0) scale(1)}

/* featured showcase (big projects) */
.show{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,72px);align-items:stretch}
.show-stage{position:relative;aspect-ratio:4/3;max-width:100%;background:var(--warm-2);overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%,11% 100%)}
.show-stage .it{position:absolute;inset:0;opacity:0;transition:opacity .6s ease,transform .9s cubic-bezier(.2,.7,.1,1);transform:scale(1.04)}
.show-stage .it.on{opacity:1;transform:none}
.show-stage img{width:100%;height:100%;object-fit:cover}
.show-stage .it.contain{background:#fff}
.show-stage .it.contain img{object-fit:contain;padding:6%}
.show-info{display:flex;flex-direction:column;gap:22px;padding-block:6px}
.show-info .idx{font-family:var(--lat);font-size:clamp(72px,9vw,140px);font-weight:300;line-height:.8;color:var(--char);direction:ltr;text-align:right;display:flex;align-items:flex-start;gap:14px;justify-content:flex-end}
.show-info .idx small{font-size:16px;color:var(--stone-d);font-weight:400;padding-top:10px}
.show-info .cat{color:var(--stone-d);font-size:14px;font-weight:500;display:inline-flex;gap:10px;align-items:center}
.show-info .cat::before{content:"";width:6px;height:13px;background:var(--lime);transform:skewX(-28deg)}
.show-info h3{font-size:clamp(28px,3vw,42px);font-weight:600;line-height:1.2}
.show-info .cl{color:var(--stone-d);font-size:15px}
.show-info p{color:#4b4944;font-size:16px;max-width:42ch}

.show-info .ctl{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;border-top:1px solid var(--line)}
.show-info .fade{animation:fin .6s ease both}
@keyframes fin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.strip{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:10px;margin-top:22px}
.strip button{border:0;padding:0;background:var(--warm-2);aspect-ratio:4/3;position:relative;overflow:hidden;opacity:.45;transition:opacity .3s}
.strip button img{width:100%;height:100%;object-fit:cover}
.strip button.contain{background:#fff}
.strip button.contain img{object-fit:contain;padding:8%}
.strip button:hover{opacity:.8}
.strip button.on{opacity:1}
.strip button.on::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--lime)}

/* rail (small works by field) */
.rail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:transparent;padding:9px 16px;border-radius:999px;font-size:14px;color:#3d3b37;transition:.2s}
.tabs button:hover{border-color:var(--char)}
.tabs button[aria-selected="true"]{background:var(--char);color:var(--warm);border-color:var(--char)}
.tabs button .n{font-family:var(--lat);font-size:11px;color:var(--stone);margin-inline-start:6px}
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-inline:var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none;padding-bottom:6px}
.rail::-webkit-scrollbar{display:none}
.rc{flex:0 0 clamp(220px,21vw,300px);scroll-snap-align:start;display:grid;gap:14px;margin:0}
.rc .ph{aspect-ratio:3/4;overflow:hidden;background:var(--warm-2);position:relative}
.rc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.1,1)}
.rc:hover .ph img{transform:scale(1.05)}
.rc .ph::after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:14%;background:var(--lime);transform:skewX(calc(var(--cut) * -1));transition:left .5s cubic-bezier(.7,0,.25,1)}
.rc:hover .ph::after{left:-4%}
.rc figcaption{display:grid;gap:2px}
.rc figcaption b{font-weight:600;font-size:16px}
.rc figcaption span{font-size:13px;color:var(--stone-d)}
.rail-foot{display:flex;align-items:center;gap:24px;margin-top:28px}
.prog{flex:1;height:2px;background:var(--line);position:relative}
.prog i{position:absolute;top:0;bottom:0;right:0;background:var(--char);width:20%;transition:width .2s,right .2s}

/* statement */
.state{background:var(--logo-bg);color:var(--char);overflow:hidden;position:relative;border-block:1px solid var(--line)}
.tagbig{display:block;width:100%;height:auto;margin-top:36px;color:var(--char);direction:ltr}
.state .big{font-family:var(--lat);font-weight:600;font-size:clamp(56px,13vw,220px);line-height:.9;letter-spacing:-.035em;direction:ltr;text-align:left;white-space:nowrap}
.state .big .o{color:transparent;-webkit-text-stroke:1.5px var(--stone)}
.state .big .slash{height:.72em;width:.12em}
.state-row{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:32px;align-items:end;margin-top:clamp(36px,5vw,64px)}
.state-row p{font-size:clamp(20px,2.2vw,30px);font-weight:300;line-height:1.5;max-width:26ch}
.vals{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.vals span{font-family:var(--lat);font-size:12px;letter-spacing:.16em;border:1px solid var(--line);padding:7px 14px;color:var(--stone-d)}

/* clients */
.mq{overflow:hidden;position:relative;border-block:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq+.mq{border-top:0}
.mq-t{display:flex;width:max-content;animation:mq 80s linear infinite}
.mq.rev .mq-t{animation-direction:reverse;animation-duration:70s}
.mq:hover .mq-t{animation-play-state:paused}
@keyframes mq{to{transform:translateX(50%)}}
.mq-t div{width:clamp(160px,15vw,230px);height:140px;display:grid;place-items:center;padding:22px;border-inline-start:1px solid var(--line)}
.mq-t img{max-height:58px;width:auto;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.15);opacity:.7;transition:.3s}
.mq-t div:hover img{filter:none;opacity:1}

/* process */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:1px solid var(--char)}
.steps li{padding:26px 22px 0 0;display:grid;gap:10px;align-content:start;border-inline-end:1px solid var(--line);padding-inline-end:22px}
.steps li:first-child{padding-inline-start:0}
.steps li:last-child{border-inline-end:0}
.steps .k{font-family:var(--lat);font-size:clamp(44px,4.4vw,68px);font-weight:300;line-height:1;color:var(--char);direction:ltr;text-align:right}
.steps .k sup{font-size:12px;letter-spacing:.14em;color:var(--stone-d);vertical-align:top;margin-left:8px}
.steps h3{font-size:22px}
.steps p{font-size:14px;color:var(--stone-d);max-width:26ch}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,6vw,110px);align-items:start}
.contact h2{font-size:clamp(56px,9vw,150px);font-weight:700;line-height:1;letter-spacing:normal}
.contact h2 .thin{font-weight:200}
.clist{display:grid;margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--line)}
.clist div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding-block:18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.clist span{color:var(--stone-d);font-size:14px}
.clist b{font-size:clamp(18px,1.7vw,24px);font-weight:500;user-select:all}
form.cf{display:grid;gap:20px}
.fl{display:grid;gap:4px}
.fl label{font-size:13px;color:var(--stone-d)}
.fl input,.fl select,.fl textarea{background:transparent;border:0;border-bottom:1px solid var(--stone);padding:10px 0;color:var(--char);border-radius:0;width:100%}
.fl select option{color:var(--char)}
.fl input:focus,.fl select:focus,.fl textarea:focus{outline:0;border-bottom-color:var(--char)}
.fl textarea{min-height:96px;resize:vertical}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:20px}

.ftr{background:var(--black);color:#9d9a93;position:relative;overflow:hidden;padding-block:clamp(56px,7vw,96px) 26px}
.ftr-bg{position:absolute;left:50%;bottom:-6%;width:118%;height:auto;transform:translateX(-50%);color:#FDFCF9;opacity:.045;pointer-events:none}
.ftr-in{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr);gap:40px;align-items:start}
.ftr-brand{display:grid;gap:22px;justify-items:start}
.ftr-brand p{max-width:38ch;font-size:15px;color:#b3b0a8}
.ftr-col{display:grid;gap:10px;font-size:15px;justify-items:start}
.ftr-col b{color:#FDFCF9;font-weight:600;margin-bottom:4px}
.ftr-col a:hover{color:#FDFCF9}
.ftr-row{position:relative;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;border-top:1px solid #1f1f1e;padding-top:22px;margin-top:clamp(48px,6vw,80px)}
@media (max-width:1024px){.ftr-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ftr-brand{grid-column:1/-1}}
@media (max-width:600px){.ftr-in{grid-template-columns:minmax(0,1fr)}}

/* ============ responsive ============ */
@media (max-width:1024px){
  .hdr{grid-template-columns:auto 1fr}
  .hdr nav{display:none}
  .hdr .cta{justify-self:end}
  .hero-top,.sh,.about,.show,.state-row,.contact{grid-template-columns:minmax(0,1fr)}
  .sh p{justify-self:start}
  .side-facts{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .svc-row{grid-template-columns:minmax(0,1fr);gap:12px}
  .svc-row .tags{justify-content:flex-start}
  .svc-row .peek{display:none}
  .show-info .idx{justify-content:flex-start}
  .strip{grid-template-columns:repeat(5,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .steps li{border-inline-end:0;padding-inline:0}
  .vals{justify-content:flex-start}
}
@media (max-width:600px){
  .cine-frame{aspect-ratio:4/3;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}
  .cine-cap{max-width:86%}
  .figs{grid-template-columns:minmax(0,1fr)}
  .figs div+div{border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--line);padding-top:18px}
  .figs div{padding-bottom:18px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .side-facts{grid-template-columns:minmax(0,1fr)}
  .arw button{width:42px;height:42px}
  .hero-meta span:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

@media (max-width:600px){.r2{grid-template-columns:minmax(0,1fr)}}

/* ============ extras ============ */
.mq-t img{mix-blend-mode:normal}
.toast{position:fixed;bottom:calc(22px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--black);color:var(--warm);padding:12px 20px;z-index:90;font-size:14px;display:flex;gap:12px;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100% - 32px)}
.toast::before{content:"";width:6px;height:14px;background:var(--lime);transform:skewX(-28deg);flex:none}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}
.fl .err{font-size:12px;color:#B42318;min-height:0}
.btn[disabled]{opacity:.6;cursor:progress}
.skip{position:absolute;right:16px;top:-60px;background:var(--char);color:var(--warm);padding:10px 16px;z-index:100}
.skip:focus{top:10px}