@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600&display=swap');
/* The original art direction, with motion and a dedicated project reel. */
[lang=ar],.hero-topline .arabic,.project-card .arabic-title{font-family:'IBM Plex Sans Arabic',Tahoma,sans-serif!important;letter-spacing:0!important;line-height:1.65;direction:rtl;font-weight:500}.hero-topline .arabic{font-size:24px}.brand span{font-size:12px;font-weight:500}.hero{min-height:900px;max-height:none}.hero-content{padding-top:145px;height:calc(100% - 120px);gap:34px}.hero h1{font-size:clamp(105px,14vw,240px);line-height:.84;max-width:none}.hero-lower{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.9fr);gap:50px;padding-bottom:38px;align-items:end}.hero-intro{max-width:430px}.hero-caption{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;min-width:0}.hero-project{display:block;font-size:11px;line-height:1.65;min-width:0;overflow-wrap:break-word}.hero-project span{display:block;margin-top:7px;font-size:9px;line-height:1.65}.hero-controls{align-self:center;gap:12px;flex-shrink:0}.hero-controls button{width:42px;height:42px}.category-nav a{min-height:108px}.intro-section,.work-section,.clients-section{background:transparent}.work-section{padding-top:60px;padding-bottom:90px;overflow:hidden}.work-section .section-heading{margin-bottom:40px}.work-section .section-heading h2{font-size:clamp(64px,7vw,120px)}.intro-section{position:relative}.intro-title{line-height:1.01}.intro-body .scroll-word{opacity:.26;transition:opacity .2s}.type-line{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}.type-inner{display:block;transform:translateY(108%) rotate(2deg);transform-origin:0 100%;transition:transform 1.05s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--line-index,0)*90ms)}.type-revealed .type-inner{transform:none}.reel-shell{position:relative}.reel-viewport{display:flex;gap:clamp(24px,4vw,64px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding:42px 4% 28px;overscroll-behavior-x:contain;touch-action:pan-x pan-y;cursor:grab;perspective:1600px;scroll-padding-inline:4%;margin-inline:-4%;-webkit-overflow-scrolling:touch}.reel-viewport::-webkit-scrollbar{display:none}.reel-viewport.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}.reel-viewport .project-card{flex:0 0 80%;scroll-snap-align:start;opacity:1!important;transform:none!important;transition:none;margin:0!important}.reel-viewport .image-wrap{aspect-ratio:1.85;transform:perspective(1400px) rotateY(var(--reel-tilt,0deg)) rotateZ(var(--reel-rotate,0deg)) scale(var(--reel-scale,1));transform-origin:center;will-change:transform;transition:transform .18s linear;background:var(--black)}.reel-viewport img{transform:scale(1.035) translateX(var(--reel-image-shift,0px));transition:transform .18s linear;pointer-events:none}.reel-viewport .project-card:hover img{filter:none}.reel-viewport .card-open{transform:none;width:46px;height:46px}.reel-viewport .card-topline{margin-top:25px}.reel-viewport h3{font-size:clamp(34px,4vw,64px)}.reel-viewport .card-meta{font-size:10px}.reel-toolbar{display:flex;align-items:center;gap:24px;padding-top:22px;margin-top:8px;border-top:1px solid currentColor}.reel-hint{opacity:.65}.reel-dots{display:flex;gap:8px;margin-left:auto}.reel-dots button{width:20px;height:32px;background:none;padding:8px 4px}.reel-dots button:after{content:'';display:block;height:3px;background:currentColor;opacity:.22;transition:opacity .2s,transform .2s}.reel-dots button[aria-current=true]:after{opacity:1;transform:scaleY(1.7);background:var(--red)}.reel-controls{display:flex;gap:12px}.reel-controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid currentColor;border-radius:50%;background:none}.reel-controls button:hover{background:var(--ink);color:var(--paper)}.reel-controls button:disabled{opacity:.25;cursor:default}.client-name{transition:background .3s,color .3s}.client-name:hover{background:var(--ink);color:var(--paper)}.hero-images{will-change:transform}.interlude h2{line-height:.95}.index-row{overflow:hidden}.index-row h3{transition:transform .4s}.index-row:hover h3{transform:translateX(12px)}
@media(min-width:1600px){.hero-content{padding-top:155px}.hero h1{font-size:14vw}.hero{min-height:1000px}}
@media(max-width:1000px){.hero h1{font-size:16vw}.hero-lower{gap:30px;grid-template-columns:minmax(0,1fr) minmax(230px,.85fr)}.hero-caption{gap:16px}.hero-project{font-size:10px}.hero-project span{font-size:8px}.reel-hint{display:none}.reel-viewport .project-card{flex-basis:86%}}
@media(max-width:700px){.hero{height:auto;min-height:850px;max-height:none}.hero-content{padding-top:115px;height:auto;min-height:690px;padding-bottom:15px;gap:38px}.hero h1{font-size:20vw;line-height:.87;margin-top:32px}.hero-topline .arabic{font-size:20px}.hero-lower{display:flex;flex-direction:column;align-items:stretch;gap:24px;padding:0 0 25px}.hero-intro{max-width:420px}.hero-caption{display:grid;grid-template-columns:minmax(0,1fr) auto;text-align:left;margin:0;gap:20px}.hero-project{font-size:10px}.hero-project span{font-size:8px}.hero-controls button{width:40px;height:40px}.category-nav a{min-height:63px}.category-nav{position:absolute;bottom:0}.intro-title{font-size:clamp(55px,14vw,80px)}.work-section .section-heading{gap:24px}.work-section .section-heading h2{font-size:clamp(56px,15vw,90px)}.work-section{padding-top:35px}.reel-viewport{padding-block:20px;gap:22px;padding-inline:0;margin-inline:0;scroll-padding-inline:0}.reel-viewport .project-card{flex-basis:91%}.reel-viewport .image-wrap{aspect-ratio:1.25}.reel-viewport .card-topline{gap:10px;margin-top:20px}.reel-viewport h3{font-size:32px}.reel-viewport .arabic-title{font-size:14px;max-width:42%;margin-top:0}.reel-viewport .card-meta{font-size:8px}.reel-toolbar{gap:12px;flex-wrap:wrap;padding-top:18px}.reel-dots{order:3;width:100%;margin:0;justify-content:center}.reel-dots button{width:23px;min-height:32px}.reel-controls{margin-left:auto;gap:10px}.reel-counter{font-size:10px}.reel-controls button{width:40px;height:40px}.clients-section h2{font-size:14vw}.intro-body .scroll-word{opacity:1}}
@media(prefers-reduced-motion:reduce){.type-inner{transform:none!important}.intro-body .scroll-word{opacity:1!important}.reel-viewport .image-wrap,.reel-viewport img{transform:none!important}.reel-viewport{scroll-behavior:auto}}

.intro-title .type-line,.intro-title .type-inner{color:inherit}.intro-title .type-inner>span{color:var(--red)}
@media(max-width:700px){.interlude h2{font-size:clamp(44px,12.5vw,74px);line-height:1}.interlude .type-inner{overflow-wrap:normal}}
.work-section:has(.cinema-embed){padding-inline:0;padding-bottom:0;background:var(--black);color:var(--paper)}.work-section:has(.cinema-embed) .section-heading{padding-inline:var(--gutter);margin-bottom:40px}.cinema-embed{width:100%;height:clamp(650px,52vw,960px)}.cinema-embed iframe{display:block;width:100%;height:100%;border:0;background:var(--black)}@media(max-width:700px){.cinema-embed{height:760px}.work-section:has(.cinema-embed) .section-heading{margin-bottom:25px}}
.work-section:has(.cinema-embed){background:transparent;color:var(--work-ink,var(--ink))}.cinema-embed{position:relative}.cinema-embed:before{content:'';position:absolute;inset:0 0 auto;height:55px;z-index:2;pointer-events:none;background:linear-gradient(#111310,transparent)}.intro-body,.stat p{color:inherit}.stat p{opacity:.7}body{transition:color .3s}.work-section .section-heading{transition:color .3s}

/* Mobile navigation and cinematic stage */
@media(max-width:700px){
.category-nav a{justify-content:flex-start;gap:8px;align-items:flex-end}.category-nav a>span:first-child{flex:0 1 auto}.category-nav .arrow{position:static;margin:0 0 3px;line-height:1;flex:none}.category-nav .arrow svg{width:14px!important;height:14px!important}.category-nav .name{font-size:clamp(18px,5.5vw,24px)}
.index-row{grid-template-columns:25px max-content 25px;justify-content:start;column-gap:12px}.index-row .index-arrow{justify-self:start}
.cinema-embed{height:clamp(440px,72svh,560px);min-height:0}.work-section:has(.cinema-embed) .section-heading{margin-bottom:18px;align-items:end}.work-section .section-heading h2{font-size:clamp(42px,12vw,62px)}.work-section .section-heading .text-link{margin-top:0;font-size:8px;gap:8px}
}