*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:#f5f4f0;color:#191a17;font-family:'IBM Plex Sans Arabic',Arial,sans-serif;font-weight:400}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #d3f44a;outline-offset:6px}h1,h2,h3,p{margin:0}button{color:inherit}::selection{background:#d3f44a;color:#111}section{scroll-margin-top:80px}.header{height:88px;position:absolute;inset:0 0 auto;z-index:20;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 3.5%;color:#fff;border-bottom:1px solid #ffffff30;transition:background .25s,color .25s}.header.scrolled{position:fixed;height:72px;background:#f5f4f0f5;color:#171815;border-color:#191a1720;backdrop-filter:blur(12px)}.nav-links{display:flex;gap:30px;font-size:15px}.nav-links a:hover{opacity:.6}.wordmark{justify-self:center;font-size:27px;line-height:1;font-weight:700;white-space:nowrap;letter-spacing:-1.5px;position:relative}.brand-dot{color:#d3f44a;font-size:38px;line-height:0}.wordmark small{display:block;text-align:center;font-size:8px;letter-spacing:5px;margin-top:9px;margin-right:4px;font-weight:400}.nav-end{justify-self:end;display:flex;align-items:center;gap:15px}.contact-pill{background:#f5f4f0;color:#191a17;border:1px solid #191a1720;border-radius:30px;padding:9px 22px;font-size:14px;display:flex;gap:22px}.contact-pill:hover{background:#d3f44a}.menu-toggle{display:none;background:none;border:0;padding:12px}.menu-toggle span{width:23px;height:1px;background:currentColor;display:block;margin:6px 0}.mobile-menu{position:fixed;inset:72px 0 auto;background:#f5f4f0;z-index:19;padding:20px 6% 35px;color:#191a17}.mobile-menu a{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid #ccc;font-size:28px}.mobile-menu a span{font-size:12px}.hero{height:100svh;min-height:650px;max-height:1100px;position:relative;background:#1b1812;color:#fff;overflow:hidden}.hero-image,.hero-video,.hero-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-image{object-position:center 42%}.hero-video{opacity:0;transition:opacity .8s}.hero-video.ready{opacity:1}.hero-shade{background:linear-gradient(180deg,#0005 0%,#0001 30%,#0006 65%,#000b 100%)}.hero-content{position:absolute;right:4%;bottom:18%;z-index:2}.eyebrow{font-size:13px;letter-spacing:.5px;line-height:1.7}.hero .eyebrow{margin-bottom:24px;color:#ffffffbf}.hero h1{font-weight:450;font-size:clamp(60px,6.2vw,108px);letter-spacing:-3px;line-height:1.2}.hero h1 span{color:#d3f44a}.scroll-link{display:inline-flex;gap:28px;margin-top:30px;align-items:center;font-size:14px}.scroll-link span{font-size:24px}.hero-bottom{position:absolute;inset:auto 4% 25px;display:flex;justify-content:space-between;align-items:center;gap:18px;border-top:1px solid #ffffff40;padding-top:20px;font-size:11px;letter-spacing:.3px}.hero-bottom>span:first-child{letter-spacing:1.5px}.motion-toggle{border:0;background:none;font-size:12px;display:flex;align-items:center;gap:10px;padding:8px}.motion-toggle span{font-size:20px}.hero-credit{color:#fffc}.section-space{padding:100px 4%}.intro{display:grid;grid-template-columns:1fr 1.2fr;gap:70px;padding-top:112px;padding-bottom:120px}.section-label{font-size:15px;line-height:1.8}.section-label span{display:block;font-family:Arial,sans-serif;font-size:10px;letter-spacing:1.3px;margin-top:10px;opacity:.5}.intro h2{font-weight:450;font-size:clamp(32px,3.2vw,54px);line-height:1.5;letter-spacing:-1px}.intro-copy{font-size:18px;line-height:1.95;max-width:620px;margin-top:24px;color:#55564f}.text-link{display:inline-flex;gap:55px;align-items:center;border-bottom:1px solid currentColor;padding-bottom:8px;font-size:15px;margin-top:32px}.text-link span{font-size:25px}.work{padding:0 24px 100px}.section-heading{display:flex;justify-content:space-between;align-items:end;padding:0 2% 32px}.dark{font-family:Arial,sans-serif;font-size:10px;letter-spacing:1.6px;margin-bottom:12px}.section-heading h2{font-size:clamp(28px,3vw,45px);font-weight:450}.work-count{font-size:13px;color:#686960}.filters{display:flex;gap:10px;padding:0 2% 32px;flex-wrap:wrap}.filters button{border:1px solid #cccfc4;border-radius:30px;background:none;padding:8px 21px;font-size:14px;transition:all .2s}.filters button[aria-pressed=true]{background:#1a1b17;color:#f5f4f0;border-color:#1a1b17}.filters button:hover{border-color:#161712}.filters sup{font-family:Arial,sans-serif;font-size:9px;margin-right:8px}.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 20px}.project{min-width:0}.project-media{width:100%;aspect-ratio:1.25;background:#dddcd5;border:0;display:block;padding:0;overflow:hidden;border-radius:7px;position:relative}.project-media img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1),filter .6s}.project-media:hover img{transform:scale(1.035);filter:brightness(.8)}.project-media:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0004,transparent 40%);pointer-events:none}.play-mark{position:absolute;left:22px;bottom:22px;width:48px;height:48px;border:1px solid #fff8;color:#fff;border-radius:100%;z-index:1;display:grid;place-content:center;backdrop-filter:blur(10px);font-family:Arial,sans-serif;font-size:15px;background:#0002;transition:background .2s}.project-media:hover .play-mark{background:#d3f44a;color:#151613;border-color:#d3f44a}.project-number{position:absolute;right:24px;top:22px;color:#fff;z-index:1;font:11px Arial,sans-serif;letter-spacing:1px;background:#0003;padding:6px 8px;border-radius:20px}.project-info{padding:17px 3px 0;display:flex;justify-content:space-between;gap:15px;align-items:center}.project-info h3{font-size:24px;font-weight:450;line-height:1.5}.project-info p{font-size:12px;color:#72746c;margin-top:4px}.project-arrow{font-size:27px;font-family:Arial,sans-serif}.more-button{display:flex;align-items:center;gap:75px;margin:55px auto 0;background:none;border:1px solid #aaa;border-radius:30px;padding:12px 28px;font-size:15px}.more-button:hover{background:#d3f44a;border-color:#d3f44a}[hidden]{display:none!important}.services{background:#e9eae3;display:grid;grid-template-columns:1fr 1.1fr;gap:60px}.services-title h2{font-size:clamp(34px,3.6vw,58px);font-weight:450;line-height:1.45;margin-top:40px;letter-spacing:-1.6px}.services-title em{font-style:normal;color:#717762}.service-list article{display:grid;grid-template-columns:45px 1fr;border-top:1px solid #b8bcb0;padding:26px 0 30px;gap:15px}.service-list article>span{font:11px Arial,sans-serif;padding-top:15px;color:#777c6e}.service-list h3{font-size:28px;font-weight:450}.service-list p{font-size:16px;color:#64685b;line-height:1.9;max-width:450px;margin:12px 0 18px}.service-list small{font:10px Arial,sans-serif;letter-spacing:1.7px}.about{display:grid;grid-template-columns:1fr 1fr;gap:8%;padding:110px 7%;align-items:center}.portrait-wrap{position:relative;background:#d7d8cf;overflow:hidden;border-radius:4px;aspect-ratio:.9;max-height:620px}.portrait-wrap img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:grayscale(100%)}.portrait-wrap span{position:absolute;bottom:25px;left:25px;color:#fff;letter-spacing:2px;font:10px Arial,sans-serif}.about-copy h2{font-size:clamp(35px,3.9vw,60px);font-weight:450;line-height:1.35;letter-spacing:-1.5px;margin:30px 0}.about-copy>p:not(.section-label){font-size:17px;line-height:1.9;color:#62645b;margin-top:16px}.contact{background:#171914;color:#f1f1e9;padding-bottom:25px}.contact .section-label{color:#c4c8b7}.contact-main{display:flex;justify-content:space-between;gap:50px;margin-top:55px;align-items:end}.contact h2{font-size:clamp(40px,5.2vw,84px);font-weight:450;line-height:1.4;letter-spacing:-2px}.contact h2 a{color:#d3f44a;white-space:nowrap}.contact h2 a:hover{color:#fff}.contact h2 a span{display:inline-block;padding-right:18px}.contact-details{padding-bottom:14px;display:flex;flex-direction:column;align-items:start;gap:11px;font-size:17px}.contact-details>p{font-size:13px;color:#b7bcad;margin-bottom:10px}.contact-details .whatsapp{font-size:14px;border-bottom:1px solid #858b75;margin-top:18px;padding-bottom:9px;display:flex;gap:35px}.footer{display:flex;justify-content:space-between;gap:20px;margin-top:110px;padding-top:25px;border-top:1px solid #454a3d;font-size:12px;color:#b7bba9}.footer a{color:#f1f1e9}dialog{width:min(1120px,94vw);max-height:94svh;border:0;background:#161714;color:#f5f4f0;padding:24px;border-radius:6px;overflow:auto}dialog::backdrop{background:#000d;backdrop-filter:blur(10px)}.dialog-header{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:18px}.dialog-header .eyebrow{font:10px Arial,sans-serif;letter-spacing:1px;color:#abb09d}.dialog-header h2{font-size:23px;font-weight:450;margin-top:6px}.close-dialog{width:44px;height:44px;border:1px solid #777;border-radius:50%;background:none}.close-dialog:hover{background:#d3f44a;color:#111}.dialog-header button{flex-shrink:0}#film-player{display:block;width:100%;max-height:66svh;background:#080908}.film-footer{display:flex;justify-content:space-between;gap:20px;font-size:13px;color:#b4baa8;margin-top:16px;line-height:1.8}#video-error{margin:20px 0;color:#d3f44a}#video-error a{text-decoration:underline}.skip{position:fixed;top:-100px;right:15px;background:#d3f44a;color:#111;padding:15px;z-index:100}.skip:focus{top:15px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body.modal-open{overflow:hidden}
@media(min-width:1600px){.intro,.services,.about,.contact{padding-right:7%;padding-left:7%}.work{padding-left:4%;padding-right:4%}}
@media(max-width:900px){.nav-links{gap:18px}.hero h1{font-size:72px}.intro{gap:40px;grid-template-columns:.7fr 1.2fr}.contact-main{display:block}.contact-details{margin-top:45px}.about{gap:6%;padding:80px 5%}.services{gap:35px}.service-list h3{font-size:24px}.project-info h3{font-size:21px}}
@media(max-width:600px){html{scroll-padding-top:72px}.header,.header.scrolled{height:72px;padding:0 5%;grid-template-columns:1fr auto}.header .wordmark{grid-column:1;grid-row:1;justify-self:start;font-size:24px}.nav-links{display:none}.nav-end{grid-column:2;grid-row:1}.contact-pill{padding:7px 13px;font-size:12px;gap:12px}.menu-toggle{display:block}.hero{min-height:620px;height:92svh;max-height:900px}.hero-image{object-position:44% center}.hero-content{right:6%;left:6%;bottom:22%}.hero .eyebrow{font-size:12px;max-width:250px;margin-bottom:22px}.hero h1{font-size:clamp(49px,11.5vw,70px);letter-spacing:-2px;line-height:1.3}.scroll-link{margin-top:22px}.hero-bottom{inset:auto 6% 24px;font-size:9px;gap:10px;flex-wrap:wrap}.hero-credit{display:none}.hero-bottom>span:first-child{font-size:8px;letter-spacing:1px}.motion-toggle{font-size:10px}.section-space{padding:65px 6%}.intro{display:block}.intro .section-label{margin-bottom:35px}.intro h2{font-size:34px}.intro-copy{font-size:16px;line-height:1.95}.section-label{font-size:13px}.section-label span{font-size:9px}.work{padding:0 16px 65px}.section-heading{align-items:start;padding:0 2% 25px}.section-heading h2{font-size:28px}.work-count{display:none}.filters{gap:7px;padding-bottom:25px}.filters button{font-size:12px;padding:7px 14px}.work-grid{grid-template-columns:1fr;gap:32px}.project-media{aspect-ratio:1.15}.project-info{padding-top:12px}.project-info h3{font-size:23px}.project-info p{font-size:11px}.play-mark{width:43px;height:43px;left:18px;bottom:18px}.project-number{right:18px;top:18px}.more-button{margin-top:35px}.services{display:block}.services-title h2{font-size:39px;margin:25px 0 40px}.service-list article{padding:22px 0;grid-template-columns:25px 1fr}.service-list h3{font-size:25px}.service-list p{font-size:15px}.about{padding:65px 6%;display:flex;flex-direction:column;gap:38px}.portrait-wrap{width:100%;aspect-ratio:1;max-height:480px}.about-copy h2{font-size:42px;margin:25px 0}.about-copy>p:not(.section-label){font-size:16px}.contact{padding-bottom:25px}.contact-main{margin-top:35px}.contact h2{font-size:clamp(37px,9.6vw,55px);letter-spacing:-1.5px}.contact h2 a span{padding-right:4px}.contact-details{font-size:16px;margin-top:35px}.footer{margin-top:65px;flex-wrap:wrap;font-size:10px;gap:16px}.footer>span:nth-child(2){display:none}.footer a{margin-right:auto}dialog{padding:16px;width:96vw}.dialog-header h2{font-size:19px}.film-footer{display:block;font-size:12px}.film-footer span{display:block;margin-top:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important}}

/* Bilingual direction and moving film previews. */
html[lang=en] body{font-family:'DM Sans',Arial,sans-serif}
.language-toggle{border:0;background:transparent;color:inherit;padding:10px 8px;font:14px 'IBM Plex Sans Arabic',Arial,sans-serif;white-space:nowrap;min-height:44px}
.language-toggle:hover{text-decoration:underline;text-underline-offset:5px}
.nav-end{gap:15px}.section-label .label-text{display:block;margin:0;opacity:1;font:inherit;letter-spacing:normal}
.scroll-link>span:first-child{font-size:14px}.text-link>span:first-child{font-size:15px}
.mobile-menu a>span{font-size:28px}.mobile-menu a>small{font-size:12px}
.contact h2 a>span:first-child{padding:0}.contact h2 .direction-arrow{padding-inline-start:18px;padding-inline-end:0}
.collection-label{margin:0 2% 32px;display:inline-flex;align-items:center;gap:16px;padding:10px 22px;background:#1a1b17;color:#f5f4f0;border-radius:30px;font-size:14px}.collection-label sup{font:9px Arial,sans-serif}
.project-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .25s;z-index:0}
.project-preview.preview-playing{opacity:1}.project-media video{border-radius:inherit}.project-media:after{z-index:0}.project-number,.play-mark{z-index:1}
html[dir=ltr] .hero-content{right:auto;left:4%}
html[dir=ltr] .hero h1{font-size:clamp(60px,6.5vw,108px);font-weight:450;letter-spacing:-4px;line-height:1.06}
html[dir=ltr] .hero .eyebrow{font-size:11px;letter-spacing:1.5px}
html[dir=ltr] .wordmark{font-size:26px;letter-spacing:-1.5px}
html[dir=ltr] .hero-bottom{font-size:9px}
html[dir=ltr] .intro h2{line-height:1.15;letter-spacing:-1.8px;font-size:clamp(36px,3.6vw,58px)}
html[dir=ltr] .intro-copy{line-height:1.7}
html[dir=ltr] .services-title h2{line-height:1.15}
html[dir=ltr] .service-list p{line-height:1.7}
html[dir=ltr] .about-copy h2{line-height:1.12;letter-spacing:-2px}
html[dir=ltr] .about-copy>p:not(.section-label){line-height:1.7}
html[dir=ltr] .contact h2{font-size:clamp(40px,5vw,80px);line-height:1.15}
html[dir=ltr] .contact-details{font-size:15px}
html[dir=ltr] .footer a{margin-right:0}
@media(max-width:900px){.nav-links{gap:18px}.nav-end{gap:8px}.contact-pill{padding:9px 14px;gap:12px}html[dir=ltr] .wordmark{font-size:23px}.contact-main{display:block}}
@media(max-width:600px){.header .contact-pill{display:none}.header,.header.scrolled{grid-template-columns:1fr auto}.nav-end{gap:12px}.language-toggle{font-size:14px;padding:8px}.wordmark{max-width:100%}html[dir=ltr] .wordmark{font-size:24px}html[dir=ltr] .hero-content{left:6%;right:6%;bottom:22%}html[dir=ltr] .hero h1{font-size:clamp(43px,11.8vw,70px);letter-spacing:-2.5px;line-height:1.08}html[dir=ltr] .hero .eyebrow{font-size:9px;line-height:1.7;max-width:275px;letter-spacing:1px}.collection-label{font-size:12px;margin-bottom:25px;padding:9px 18px}.contact h2 .direction-arrow{padding-inline-start:4px}html[dir=ltr] .contact h2{font-size:clamp(31px,8.7vw,52px);letter-spacing:-1.5px}html[dir=ltr] .about-copy h2{font-size:40px}html[dir=ltr] .footer a{margin-left:auto}.project-info h3{font-size:22px}html[dir=ltr] .section-heading h2{font-size:28px}}

/* Fixed-height paired galleries: the hovered card borrows only horizontal space. */
.work-grid{display:flex;flex-direction:column;gap:50px}
.gallery-row{display:flex;gap:20px;container-type:inline-size}
.gallery-row>.project{flex:1 1 0;min-width:0;transition:flex-grow .65s cubic-bezier(.22,.68,.15,1)}
.gallery-row .project-media{height:clamp(250px,40cqw,560px);aspect-ratio:auto}
.gallery-row .project-info{height:88px;align-items:flex-start}
.gallery-row .project-info>div{min-width:0}
.gallery-row .project-info h3{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.gallery-row .project-media img,.gallery-row .project-media:hover img{transform:none;filter:none;transition:none}
.gallery-row>.project:only-child{flex:0 0 calc(50% - 10px)}
.photography{padding-top:22px}
.photography .section-heading{border-top:1px solid #d7d8cf;padding-top:60px}
#photo-dialog{width:min(1320px,95vw)}
#photo-full{display:block;width:100%;height:70svh;object-fit:contain;background:#10110f}
.photo-controls{display:flex;direction:ltr;align-items:center;justify-content:center;gap:26px;margin-top:18px;font:12px Arial,sans-serif;letter-spacing:2px}
.photo-controls button{border:1px solid #777;background:transparent;color:inherit;border-radius:50%;width:44px;height:44px;font-size:21px}
.photo-controls button:hover{background:#d3f44a;color:#111}
@media(min-width:601px){
 .gallery-row:has(.project-media:focus-visible)>.project:has(.project-media:focus-visible){flex-grow:1.35}
 .gallery-row:has(.project-media:focus-visible)>.project:not(:has(.project-media:focus-visible)){flex-grow:.65}
}
@media(min-width:601px) and (hover:hover) and (pointer:fine){
 .gallery-row:has(.project-media:hover)>.project:has(.project-media:hover){flex-grow:1.35}
 .gallery-row:has(.project-media:hover)>.project:not(:has(.project-media:hover)){flex-grow:.65}
}
@media(max-width:600px){
 .gallery-row{display:flex;flex-direction:column;gap:32px}
 .work-grid{gap:32px}
 .gallery-row>.project:only-child{flex:auto}
 .gallery-row .project-media{height:85cqw}
 .gallery-row .project-info{height:auto;min-height:75px}
 .photography .section-heading{padding-top:40px}
 #photo-dialog{padding:15px}
 #photo-full{height:65svh}
 .photo-controls{margin-top:12px}
}
@media(min-width:601px){.gallery-row>.project:only-child{flex-grow:0!important}}

/* One motion rhythm, with a gentle settle and an uninterrupted fixed header. */
.header{position:fixed;background:rgba(245,244,240,0);backdrop-filter:blur(0px);box-shadow:0 3px 24px #191a1700;transition:height .65s cubic-bezier(.22,1,.36,1),background-color .65s ease,color .65s ease,border-color .65s ease,backdrop-filter .65s ease,box-shadow .65s ease}
.header.scrolled{box-shadow:0 3px 24px #191a1705}
.nav-links a,.contact-pill,.language-toggle,.more-button,.text-link,.photo-controls button,.close-dialog{transition:background-color .35s ease,border-color .35s ease,color .35s ease,opacity .35s ease}
.gallery-row>.project{transition:flex-grow .9s cubic-bezier(.22,1,.36,1)}
.project-preview{transition:opacity .6s ease}
.play-mark{transition:background-color .4s ease,color .4s ease,border-color .4s ease}
.project-arrow{transition:opacity .45s ease}
.project:has(.project-media:hover) .project-arrow{opacity:.55}
.motion-reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .95s cubic-bezier(.22,1,.36,1)}
.motion-reveal.is-visible{opacity:1;transform:translateY(0)}
dialog[open]{animation:dialog-enter .35s cubic-bezier(.22,1,.36,1) both}
dialog[open]::backdrop{animation:backdrop-enter .35s ease both}
@keyframes dialog-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
 .motion-reveal{opacity:1;transform:none;transition:none}
 .header{transition:background-color .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease}
 .gallery-row>.project{transition:flex-grow .45s ease}
 .project-preview{transition:opacity .35s ease}
 dialog[open],dialog[open]::backdrop{animation:none}
}