@font-face{font-family:Hand;src:url('assets/hand.ttf') format('truetype');font-display:swap}
@font-face{font-family:Zain;src:url('assets/zain.ttf') format('truetype');font-display:swap}
:root{--ink:#0d0b0a;--brown:#241008;--brown2:#3a1d13;--sand:#f2e7d8;--cream:#f7f3ed;--muted:#a89a90;--line:rgba(242,231,216,.18)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--ink)}body{margin:0;background:var(--ink);color:var(--sand);font-family:Zain,Arial,sans-serif;font-size:18px;line-height:1.55;overflow-x:hidden}a{color:inherit;text-decoration:none}img,video{display:block;width:100%}.grain{position:fixed;inset:0;z-index:90;opacity:.055;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.site-header{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;justify-content:space-between;padding:24px 4vw;mix-blend-mode:difference;color:#fff;transition:padding .3s}.site-header.scrolled{padding-top:14px;padding-bottom:14px}.brand{font-family:Hand;font-size:2.5rem;line-height:1}.site-header nav{display:flex;align-items:center;gap:2rem;font-size:.95rem}.nav-contact{border:1px solid currentColor;border-radius:50%;padding:9px 19px}.hero{min-height:100svh;position:relative;display:flex;align-items:flex-end;overflow:hidden}.hero video{position:absolute;inset:0;height:100%;object-fit:cover;filter:saturate(.65) contrast(1.05)}.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,3,2,.28),rgba(13,6,3,.18) 40%,rgba(13,6,3,.86)),linear-gradient(90deg,rgba(13,6,3,.4),transparent 65%)}.hero-content{position:relative;z-index:2;width:100%;padding:0 7vw 9vh}.eyebrow,.section-kicker{font-size:.85rem;letter-spacing:.14em;color:#d4c4b7}.hero h1{font-family:Hand;font-weight:400;font-size:clamp(5rem,11vw,11rem);line-height:.78;margin:.22em 0 .25em;max-width:1000px}.hero h1 span{color:var(--cream)}.showreel{display:inline-flex;align-items:center;gap:15px;font-size:1.05rem}.play{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.65);border-radius:50%;font-size:.7rem;transform:rotate(180deg)}.hero-index{position:absolute;left:4vw;bottom:7vh;z-index:2;display:flex;align-items:center;gap:12px;writing-mode:vertical-rl;font-size:.75rem;color:#d8cdc4}.hero-index i{height:75px;width:1px;background:rgba(255,255,255,.4)}.manifesto{min-height:85vh;padding:16vh 8vw 12vh;background:var(--sand);color:var(--brown);display:grid;grid-template-columns:1fr 4fr;gap:5vw;align-items:start}.manifesto .section-kicker{color:#6e5d52}.manifesto h2,.section-head h2,.services h2,.contact h2{font-family:Hand;font-weight:400;line-height:.95;margin:0;font-size:clamp(4rem,8vw,8rem)}em{font-style:normal;color:#9a6a52}.manifesto-copy{grid-column:2;max-width:620px;margin:3rem 0 0;font-size:1.45rem;color:#5b4b42}.work{padding:15vh 4vw 8vh;background:#120d0b}.section-head{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:end;margin:0 4vw 10vh}.section-head>p{max-width:480px;color:#b9aba2;font-size:1.2rem}.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.project{position:relative;min-height:62vh;overflow:hidden;cursor:zoom-in;background:#241711}.project-wide{grid-column:span 2;min-height:82vh}.project-tall{min-height:76vh}.project img{position:absolute;inset:0;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.8,.2,1),filter .5s;filter:saturate(.7)}.project::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,5,2,.82))}.project:hover img{transform:scale(1.035);filter:saturate(.95)}.project-overlay{position:absolute;z-index:2;inset:auto 0 0;display:flex;justify-content:space-between;align-items:end;padding:32px}.project-overlay span{font-size:.8rem;color:#c5b4a8}.project-overlay p{margin:0 0 3px;color:#cabbb1;font-size:.88rem}.project-overlay h3{margin:0;font-family:Hand;font-size:2.8rem;font-weight:400;line-height:1}.services{padding:18vh 8vw;display:grid;grid-template-columns:1fr 1.2fr;gap:10vw;background:var(--brown)}.services-sticky{position:sticky;top:18vh;align-self:start}.service-list{list-style:none;margin:0;padding:0}.service-list li{position:relative;padding:2.5rem 4rem 2.5rem 0;border-top:1px solid var(--line)}.service-list li:last-child{border-bottom:1px solid var(--line)}.service-list span{position:absolute;right:0;top:3rem;color:#8f776a;font-size:.75rem}.service-list h3{font-family:Hand;font-size:2.6rem;font-weight:400;margin:0 0 .4rem}.service-list p{margin:0;color:#b9a79c;max-width:430px}.clients{padding:10vh 0 15vh;background:var(--sand);color:var(--brown);overflow:hidden}.clients .section-kicker{color:#6e5d52;padding:0 8vw}.client-track{margin-top:5vh;display:flex;width:max-content;gap:5rem;align-items:center;animation:marquee 24s linear infinite;font-family:Hand;font-size:2.7rem;white-space:nowrap}.client-track::after{content:"سلايل · نصنع اللحظة بكل تفاصيلها";color:#a48672}@keyframes marquee{to{transform:translateX(35%)}}.contact{min-height:92vh;padding:14vh 8vw 4vh;background:#130806;display:flex;flex-direction:column;justify-content:space-between}.contact h2{font-size:clamp(5rem,10vw,10rem);margin:4vh 0 8vh}.contact-actions{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}.contact-actions a{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0;border-bottom:1px solid var(--line);font-size:1.1rem}.contact-actions a:first-child{margin-left:3rem}.contact-actions span{direction:ltr;color:#b9a79c}.contact footer{display:flex;justify-content:space-between;margin-top:8vh;font-size:.8rem;color:#947f73}.lightbox{padding:0;border:0;background:#0b0705;color:var(--sand);width:min(92vw,1200px);max-height:92vh}.lightbox::backdrop{background:rgba(0,0,0,.88);backdrop-filter:blur(8px)}.lightbox img{max-height:75vh;object-fit:contain}.lightbox>div{padding:20px 28px}.lightbox p,.lightbox h3{margin:0}.lightbox h3{font:400 2.4rem Hand}.close{position:absolute;top:12px;left:12px;z-index:3;border:0;border-radius:50%;width:42px;height:42px;background:rgba(20,10,5,.72);color:white;font-size:1.7rem;cursor:pointer}.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s ease,transform .85s ease}.reveal.visible{opacity:1;transform:none}@media (max-width:760px){body{font-size:16px}.site-header{padding:18px 20px}.site-header nav a:not(.nav-contact){display:none}.brand{font-size:2rem}.hero-content{padding:0 22px 11vh}.hero h1{font-size:clamp(4.2rem,22vw,7rem)}.hero-index{display:none}.manifesto{padding:13vh 22px;display:block;min-height:auto}.manifesto h2{font-size:4.2rem;margin-top:2rem}.manifesto-copy{margin-top:2rem}.section-head{display:block;margin:0 18px 6vh}.section-head>p{margin-top:2rem}.work{padding-top:12vh}.work-grid{display:block}.project,.project-wide,.project-tall{min-height:60vh;margin-bottom:12px}.project-overlay{padding:22px}.project-overlay h3{font-size:2.25rem}.services{display:block;padding:13vh 22px}.services-sticky{position:static;margin-bottom:5rem}.service-list li{padding-right:2.5rem}.clients{padding-bottom:12vh}.client-track{font-size:2.1rem;gap:3rem}.contact{padding:12vh 22px 3vh}.contact h2{font-size:4.7rem}.contact-actions{display:block}.contact-actions a:first-child{margin-left:0}.contact-actions a{align-items:flex-start;gap:10px;flex-direction:column}.contact footer{gap:1rem;flex-direction:column}.lightbox{width:96vw}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.client-track{animation:none}.reveal{opacity:1;transform:none;transition:none}.project img{transition:none}}