:root{--g:#f9ac2b;--g2:#ffd27a;--d:#2d2d2f;--dd:#18181a;--w:#f5f2ec}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--dd);color:var(--w);font-family:'Outfit','Cairo',sans-serif;overflow-x:hidden;line-height:1.7}
html[dir=rtl] body{font-family:'Cairo','Outfit',sans-serif}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.gold{background:linear-gradient(110deg,var(--g) 30%,#fff3d1 50%,var(--g) 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4s linear infinite}
@keyframes shine{to{background-position:-250% 0}}
.wrap{max-width:1200px;margin:auto;padding:0 24px}
section{padding:120px 0;position:relative}
.eyebrow{letter-spacing:.35em;font-size:.8rem;color:var(--g);text-transform:uppercase;display:flex;align-items:center;gap:14px}
.eyebrow:before{content:"";width:48px;height:1px;background:var(--g)}
h2{font-size:clamp(2.2rem,5vw,4rem);font-weight:300;line-height:1.15;margin:12px 0 24px}
h2 b{font-weight:700}
/* preloader */
#pre{position:fixed;inset:0;background:var(--dd);z-index:99;display:grid;place-items:center;transition:transform 1s cubic-bezier(.77,0,.18,1)}
#pre.go{transform:translateY(-100%)}
#pre .ring{width:110px;height:110px;border-radius:50%;border:2px solid #333;border-top-color:var(--g);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* cursor */
.cur{position:fixed;width:340px;height:340px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(249,172,43,.13),transparent 65%);transform:translate(-50%,-50%)}
/* nav */
nav{position:fixed;top:0;inset-inline:0;z-index:50;padding:18px 0;transition:.4s}
nav.s{background:rgba(24,24,26,.82);backdrop-filter:blur(16px);padding:10px 0;border-bottom:1px solid rgba(249,172,43,.2)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{font-weight:800;letter-spacing:.3em;font-size:1.3rem}.logo i{color:var(--g);font-style:normal}
.logo img{height:42px;display:inline-block}
nav ul{display:flex;gap:26px;list-style:none;font-size:.88rem}
nav ul a{position:relative;padding:4px 0}
nav ul a:after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:0;height:1px;background:var(--g);transition:.4s}
nav ul a:hover:after{width:100%}
.lang{border:1px solid var(--g);color:var(--g);background:none;padding:6px 16px;border-radius:30px;cursor:pointer;font:inherit;transition:.3s}
.lang:hover{background:var(--g);color:#000}
@media(max-width:860px){nav ul{display:none}}
/* hero */
.hero{min-height:100vh;display:grid;align-items:center;overflow:hidden;background:#111 center/cover}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(24,24,26,.95),rgba(24,24,26,.55))}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;animation:float 14s ease-in-out infinite alternate}
.b1{width:520px;height:520px;background:var(--g);top:-120px;inset-inline-end:-120px}
.b2{width:420px;height:420px;background:#7a4b00;bottom:-100px;inset-inline-start:-80px;animation-delay:-6s}
@keyframes float{to{transform:translate(60px,50px) scale(1.2)}}
.orb{position:absolute;inset-inline-end:6%;top:50%;width:min(480px,70vw);aspect-ratio:1;translate:0 -50%;z-index:1}
.orbit{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(249,172,43,.5);animation:spin 40s linear infinite}
.orbit:before,.orbit:after{content:"";position:absolute;border-radius:50%}
.orbit:before{inset:12%;border:50px solid var(--g);opacity:.9;border-bottom-color:transparent;border-left-color:transparent;animation:spin 18s linear infinite reverse}
.orbit:after{width:22px;height:22px;background:var(--g);top:-11px;left:50%;box-shadow:0 0 30px var(--g)}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(3rem,9vw,8rem);line-height:1;font-weight:800;letter-spacing:-.02em}
.hero h1 span{display:inline-block;opacity:0;transform:translateY(80px) rotate(8deg);animation:up 1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes up{to{opacity:1;transform:none}}
.hero p.tag{font-size:clamp(1.1rem,2.4vw,1.8rem);font-weight:300;margin:26px 0 40px;opacity:0;animation:up 1s 1.2s forwards}
.btn{display:inline-block;padding:15px 38px;border-radius:50px;background:var(--g);color:#111;font-weight:600;position:relative;overflow:hidden;transition:.4s;border:0;cursor:pointer;font-family:inherit}
.btn:hover{box-shadow:0 0 40px rgba(249,172,43,.6);transform:translateY(-3px)}
.btn.o{background:none;border:1px solid var(--g);color:var(--g);margin-inline-start:12px}
.btn.o:hover{background:var(--g);color:#111}
.scroll{position:absolute;bottom:30px;left:50%;width:26px;height:44px;border:2px solid var(--g);border-radius:20px;z-index:2}
.scroll:after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;background:var(--g);border-radius:3px;animation:dot 1.6s infinite}
@keyframes dot{60%{transform:translateY(16px);opacity:0}}
/* marquee */
.mq{overflow:hidden;border-block:1px solid rgba(249,172,43,.25);padding:22px 0;background:#111;direction:ltr}
.mq div{display:flex;gap:60px;width:max-content;animation:mq 30s linear infinite;font-size:1.5rem;font-weight:200;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.mq div:hover{animation-play-state:paused}.mq b{color:var(--g)}
@keyframes mq{to{transform:translateX(-50%)}}
/* reveal */
.rv{opacity:0;transform:translateY(60px);transition:1s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.l{transform:translateX(-70px)}.rv.r{transform:translateX(70px)}.rv.in.l,.rv.in.r{transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}
/* about */
.two{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
@media(max-width:860px){.two{grid-template-columns:1fr}}
.about-img{aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,#3a3a3d,#222) center/cover;border:1px solid rgba(249,172,43,.4);position:relative;box-shadow:0 0 0 18px rgba(249,172,43,.07),0 40px 90px #000}
.about-img:after{content:"";position:absolute;inset:-26px;border-radius:50%;border:2px solid transparent;border-top-color:var(--g);border-inline-end-color:var(--g);animation:spin 12s linear infinite}
.mv{display:grid;gap:18px;margin-top:30px}
.card{background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.09);border-radius:22px;padding:30px;transition:.5s;transform-style:preserve-3d;position:relative;overflow:hidden}
.card:hover{border-color:var(--g);box-shadow:0 20px 60px rgba(249,172,43,.15)}
.card h3{color:var(--g);font-weight:600;margin-bottom:8px}
.card p{opacity:.8;font-size:.95rem}
/* services */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:50px}
.num{font-size:3.5rem;font-weight:800;color:transparent;-webkit-text-stroke:1px var(--g);line-height:1;margin-bottom:12px}
.card:before{content:"";position:absolute;width:180px;height:180px;background:radial-gradient(var(--g),transparent 70%);opacity:0;top:-90px;inset-inline-end:-90px;transition:.5s}
.card:hover:before{opacity:.35}
/* work */
.work{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:26px;margin-top:50px}
.wk{height:380px;border-radius:26px;overflow:hidden;position:relative;background:linear-gradient(135deg,#3a3a3d,#1f1f21) center/cover;display:flex;align-items:flex-end;transition:.6s}
.wk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:1.2s}
.wk:hover img{transform:scale(1.15) rotate(1.5deg)}
.wk:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.9))}
.wk div{position:relative;z-index:2;padding:28px;width:100%}
.wk h3{font-size:1.5rem;font-weight:600}.wk span{color:var(--g);font-size:.85rem;letter-spacing:.2em}
.wk:hover{box-shadow:0 0 0 2px var(--g),0 30px 80px rgba(249,172,43,.2)}
/* profile strip */
.strip{overflow:hidden;padding:50px 0;direction:ltr;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;gap:26px;width:max-content;animation:slide 60s linear infinite}
.strip:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.strip img{height:360px;border-radius:18px;border:1px solid rgba(249,172,43,.3);transition:transform .5s,box-shadow .5s;cursor:zoom-in;animation:bob 6s ease-in-out infinite}
.strip img:nth-child(even){animation-delay:-3s;margin-top:34px}
@keyframes bob{50%{translate:0 -18px}}
.strip img:hover{transform:scale(1.1) rotate(-1.5deg);box-shadow:0 30px 80px rgba(249,172,43,.35);z-index:3;position:relative}
/* clients */
.cl{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;margin-top:46px}
.cl div{background:#fff;border-radius:16px;height:100px;display:grid;place-items:center;padding:16px;transition:.4s;color:#222;font-weight:700;text-align:center;font-size:.9rem}
.cl div:hover{filter:none;opacity:1;transform:translateY(-8px) scale(1.05);box-shadow:0 20px 40px rgba(249,172,43,.3)}
.cl img{max-height:68px;object-fit:contain}
/* contact */
.ct{display:grid;gap:18px;margin-top:30px}
.ct a,.ct p{display:flex;gap:14px;align-items:center;font-size:1.05rem;direction:ltr;justify-content:flex-start}
html[dir=rtl] .ct a,html[dir=rtl] .ct p{justify-content:flex-end}
.ct i{width:46px;height:46px;border-radius:50%;border:1px solid var(--g);display:grid;place-items:center;font-style:normal;flex:none;transition:.4s}
.ct a:hover i{background:var(--g);color:#000}
form{display:grid;gap:16px}
input,textarea{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px;color:#fff;font:inherit;transition:.3s}
input:focus,textarea:focus{outline:0;border-color:var(--g);box-shadow:0 0 25px rgba(249,172,43,.2)}
footer{text-align:center;padding:40px;border-top:1px solid rgba(249,172,43,.2);opacity:.7;font-size:.85rem}
/* lightbox + gallery */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:98;display:none;place-items:center;cursor:zoom-out}
.lb.on{display:grid}.lb img{max-height:90vh;max-width:92vw;border-radius:14px;animation:up .5s forwards}
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0}
.tabs a{padding:9px 22px;border:1px solid rgba(249,172,43,.4);border-radius:30px;font-size:.9rem;transition:.3s}
.tabs a:hover,.tabs a.on{background:var(--g);color:#111}
.mas{columns:3 280px;column-gap:20px}
.mas img{width:100%;margin-bottom:20px;border-radius:18px;cursor:zoom-in;transition:.5s;break-inside:avoid}
.mas img:hover{transform:scale(1.03);box-shadow:0 0 0 2px var(--g),0 25px 60px rgba(249,172,43,.25)}
.empty{opacity:.6;padding:40px;border:1px dashed var(--g);border-radius:20px;display:none}

/* image motion */
.wk img{animation:kb 14s ease-in-out infinite alternate}
@keyframes kb{from{scale:1;translate:0 0}to{scale:1.12;translate:-1.5% -1.5%}}
.hero{animation:hz 24s ease-in-out infinite alternate;background-size:115%}
@keyframes hz{to{background-position:60% 40%;background-size:130%}}
.about-img{animation:bob 7s ease-in-out infinite}
.mas img.rv{transform:translateY(80px) rotate(-3deg) scale(.9);filter:blur(8px)}
.mas img.rv:nth-child(even){transform:translateY(80px) rotate(3deg) scale(.9)}
.mas img.rv.in{transform:none;filter:none;transition:1s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.mas img.in:hover{transform:scale(1.04) rotate(-1deg)}
.shine{position:relative}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

.hero h1 em{font-style:normal}
html[dir=rtl] .en,html:not([dir=rtl]) .ar{display:none}
html[dir=rtl] .hero h1{letter-spacing:0;line-height:1.3;font-size:clamp(2.6rem,7.5vw,6.5rem)}

.olg{position:absolute;inset:25%;border-radius:50%;background:#fff;display:grid;place-items:center;padding:7%;box-shadow:0 0 80px rgba(249,172,43,.5);animation:bob 6s ease-in-out infinite;color:#222}
.olg img{width:100%;height:100%;object-fit:contain}
.logo img{background:#fff;padding:4px 10px;border-radius:8px;height:44px}

/* light pages */
.light{background:#f6f3ee;color:#2d2d2f}
.light .gold{background-image:linear-gradient(110deg,#d98a00 30%,#ffbf4d 50%,#d98a00 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text}
.light .eyebrow,.light .card h3{color:#b87000}.light .eyebrow:before{background:#b87000}
.light .card{background:#fff;border-color:#ebe4d6;box-shadow:0 14px 44px rgba(0,0,0,.07)}
.light .card:hover{border-color:var(--g);box-shadow:0 24px 60px rgba(249,172,43,.28)}
.light .card p,.light p{opacity:.8}
.light .about-img{box-shadow:0 0 0 18px rgba(249,172,43,.14),0 40px 90px rgba(0,0,0,.18)}
.light .cl div{border:1px solid #eee;box-shadow:0 8px 24px rgba(0,0,0,.07)}
.light .wk{box-shadow:0 20px 50px rgba(0,0,0,.18)}
.light .wk span{color:var(--g2)}

/* contact (orange) */
.ctc{background:var(--g);color:#2d2d2f;overflow:hidden;padding:140px 0}
.ctc:before{content:"";position:absolute;width:980px;height:980px;border-radius:50%;border:150px solid rgba(45,45,47,.07);left:-480px;top:50%;translate:0 -50%;animation:pulse 9s ease-in-out infinite}
@keyframes pulse{50%{scale:1.08}}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;z-index:2}
@media(max-width:860px){.cgrid{grid-template-columns:1fr;gap:50px}}
.ar-t{font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:800;line-height:1.9;text-align:right;opacity:1}
.en-t{direction:ltr;text-align:left;margin-top:22px;font-size:1.05rem;line-height:1.9;opacity:.75}
.cbtns{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px}
.cb{padding:20px 44px;border-radius:60px;border:2px solid #2d2d2f;font-weight:800;font-size:1.15rem;transition:.4s;color:#2d2d2f;font-family:'Cairo',sans-serif}
.cb.d{background:#2d2d2f;color:#fff}
.cb:hover{background:#2d2d2f;color:var(--g);transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.25)}
.cb.d:hover{background:#fff;color:#2d2d2f;border-color:#fff}
.ci{padding:30px 0;border-bottom:1px solid rgba(45,45,47,.35)}.ci:first-child{padding-top:0}
.ci small{display:block;text-align:right;font-weight:800;opacity:.7;margin-bottom:8px}
.ci h4{text-align:right;font-size:1.5rem;font-weight:800;line-height:1.7}
.ci p{direction:ltr;text-align:left;opacity:.8;margin-top:4px}
.ci a{display:block;direction:ltr;text-align:left;font-size:1.6rem;font-weight:800;transition:.3s}
.ci a:hover{translate:8px 0;color:#fff}
.ctc p,.ctc .cb{opacity:1}

/* mosaic covers */
.wk .mosaic{position:absolute;inset:0;padding:0;z-index:0;display:grid;gap:4px;grid-template:1fr/1fr}
.wk .mosaic[data-n="2"]{grid-template:1fr/1fr 1fr}
.wk .mosaic[data-n="3"]{grid-template:1fr 1fr/1.4fr 1fr}
.wk .mosaic[data-n="4"]{grid-template:1fr 1fr/1fr 1fr}
.wk .mosaic[data-n="5"]{grid-template:1fr 1fr/1.3fr 1fr 1fr}
.wk .mosaic[data-n="3"] .c:first-child,.wk .mosaic[data-n="5"] .c:first-child{grid-row:span 2}
.wk .c{position:relative;display:block;overflow:hidden;min-height:0}
.wk .wkt{position:relative;z-index:2}
.wk h3{color:#fff}
.wk:after{background:linear-gradient(transparent 45%,rgba(0,0,0,.85))}