html{overflow-x:clip}body{min-width:320px;overflow-x:clip}img,video,canvas{max-width:100%}button,a,input,textarea{touch-action:manipulation}.icon{flex-shrink:0}button{min-width:0}
.hero-actions{flex-wrap:wrap}.header nav{min-width:0}.chapter-copy{min-width:0}
.light-salma{position:absolute;left:40%;bottom:5%;width:36%;height:31%;object-fit:contain;opacity:.13;filter:saturate(.55);mask-image:radial-gradient(ellipse at 50% 50%,#000 5%,#0009 38%,transparent 72%);pointer-events:none}
.direct .director-logo{width:clamp(280px,40vw,500px);top:55%;transform:translate(-50%,-50%);opacity:.5;filter:drop-shadow(0 0 12px #fa183b60) drop-shadow(0 0 34px #d2133330)}
.direct .work-card{max-width:18vw}.direct .work-more{max-width:90%;white-space:normal;text-align:center}
.direct .director-frame>span{display:none}
.design-photos-head{justify-content:flex-end;min-height:18px;margin-bottom:8px}.design-photos{top:44%}
.contact{display:block;padding:60px 8% 0;border-top:1px solid #ffffff15}
.contact-about{margin:0 auto 35px;max-width:760px;text-align:center;scroll-margin-top:40px}
.contact .contact-about h2{font-size:clamp(27px,3vw,40px);margin:10px 0;line-height:1.15}
.contact .contact-about p:not(.eyebrow){font-size:13px;line-height:1.8;color:#a7a7b0;margin:0 auto;max-width:680px}
.contact-about .eyebrow{font-size:9px;letter-spacing:.15em}
.contact-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:7%;align-items:center;padding-top:25px}
.contact-copy{min-width:0}.contact-copy .contact-top{min-height:0;display:block}
.contact-copy h2{font-size:clamp(37px,4.5vw,66px);margin:25px 0 18px;line-height:1.1}
.contact-copy>p{font-size:13px;line-height:1.8;color:#aaaab3;margin:0}
.contact-copy .contact-email{font-size:clamp(18px,2.5vw,32px);margin:24px 0 0;gap:15px;max-width:100%;overflow-wrap:anywhere}
.contact-copy .contact-email .icon{width:20px;height:20px}
.contact-copy .contact-links{flex-wrap:wrap;gap:16px 22px;margin-top:23px}.contact-copy .contact-links>span{width:100%}.contact-copy .contact-links a{font-size:12px}
.contact-layout .contact-form{grid-column:auto;grid-row:auto;margin:0;align-self:center;width:100%;max-width:none;gap:15px;grid-template-columns:1fr 1fr}
.contact-form input,.contact-form textarea{font-size:14px;padding:13px;min-width:0}.contact-form textarea{resize:vertical;min-height:135px}.contact-form .message-field{grid-column:1/-1}
.contact-mark{top:16%;left:34%;width:380px;height:380px;opacity:.24}
.contact footer{margin-top:55px;gap:22px;flex-wrap:wrap;padding-bottom:28px}.contact footer>div{flex-wrap:wrap}
.floating-contact{max-width:calc(100vw - 32px)}
.contact-in-view .chapter-nav{opacity:0;pointer-events:none}
body:has(#direct.is-current) .floating-contact{opacity:0;pointer-events:none}
@media(min-width:701px) and (max-width:1100px){.header{padding-left:4%;padding-right:4%}.header nav{gap:17px;font-size:11px}.header-actions{gap:14px}.hero{padding-left:8%;padding-right:8%}.light .chapter-copy{padding-left:8%;padding-right:8%}.light .service-chip{padding:9px 11px;font-size:10px}.direct .work-card{width:140px;max-width:20vw}.direct .work-card:nth-child(3){left:13%}.direct .work-card:nth-child(4){left:87%}.design .curve{left:9%}.design .wheel{right:9%}.design .keyframes{left:13%}.design .timeline{right:13%}.contact{padding-left:6%;padding-right:6%}.contact-layout{gap:5%}.contact-layout .contact-form{grid-template-columns:1fr}.contact-form .message-field{grid-column:auto}.contact-copy h2{font-size:40px}}
@media(max-width:700px){
 .header{height:66px;padding:0 6%}.header nav{display:none}.header-actions{gap:14px}.header #motion-toggle{max-width:100px;line-height:1.4;font-size:9px;padding-left:12px}.brand{width:115px}
 .hero{min-height:730px;max-height:none;padding:125px 7% 125px}.hero h1{font-size:clamp(42px,10.6vw,68px)}.hero-description{font-size:14px}.hero-actions{gap:16px}.hero-actions .pill,.hero-actions .film-link{font-size:11px}.hero-bottom{left:7%;right:7%;gap:14px;flex-wrap:wrap;font-size:8px}
 .chapter .stage{max-height:none}.chapter-label{top:28px;font-size:8px;left:6%;right:6%}.chapter-foot{left:6%;right:6%;font-size:8px;gap:15px}.chapter-foot>span:first-child{max-width:75%}.chapter-copy{padding-left:6%;padding-right:6%}
 .light .chapter-copy{padding-left:6%;padding-right:6%}.light .chapter-copy h2{font-size:clamp(40px,10vw,62px)}.light .chapter-copy>p:last-of-type{font-size:12px}.light .service-list{max-width:100%;gap:7px}.light .service-chip{font-size:9px;padding:9px 11px;line-height:1.3}.service-detail{min-height:70px}.service-detail p{font-size:10px}.light-salma{left:28%;bottom:5%;width:55%;height:26%;opacity:.12}
 .direct{height:112svh;min-height:810px}.direct .stage{height:100svh;min-height:750px}.direct .chapter-copy{padding-top:80px}.direct .chapter-copy h2{font-size:clamp(30px,7.2vw,44px)}.direct .chapter-copy .eyebrow{font-size:8px;margin-bottom:12px}.direct .director-logo{width:68vw;min-width:240px;max-width:390px;top:56%}
 .direct .work-card{width:clamp(100px,27vw,145px);max-width:none}.direct .work-card:nth-child(1){left:25%;top:36%}.direct .work-card:nth-child(2){left:75%;top:36%}.direct .work-card:nth-child(3){left:22%;top:55%}.direct .work-card:nth-child(4){left:78%;top:55%}.direct .work-card:nth-child(5){left:25%;top:74%}.direct .work-card:nth-child(6){left:75%;top:74%}.direct .work-cover{aspect-ratio:16/10}.direct .work-meta h3{font-size:10px}.direct .work-play{width:25px;height:25px}.direct .work-more{bottom:27px;font-size:9px;padding:10px 14px!important}.direct .chapter-foot{bottom:78px}.direct .orbit-ring{width:92vw}
 .design .chapter-copy{padding-top:75px}.design .chapter-copy h2{font-size:clamp(34px,8.4vw,50px)}.design .chapter-copy>p:last-of-type{font-size:11px;max-width:85%;margin-top:20px}.design .tool{width:85px;height:68px}.design .tool>span{font-size:6px}.design .tool svg{width:78px;height:55px}.design .colour-wheel{width:42px;height:42px}.design .colour-wheel i{left:19px;top:19px}.design .curve{top:16%;left:0}.design .wheel{top:16%;right:0}.design .keyframes{top:28%;left:1%}.design .timeline{top:28%;right:1%}.design-photos{left:7%;right:7%;top:46%}
 .contact{padding:40px 7% 0}.contact-about{margin-bottom:30px}.contact .contact-about h2{font-size:28px}.contact .contact-about p:not(.eyebrow){font-size:12px}.contact-layout{display:grid;grid-template-columns:1fr;gap:32px;padding-top:0}.contact-copy h2{font-size:clamp(36px,8.5vw,52px);margin-top:18px}.contact-copy .contact-top .eyebrow{font-size:8px}.contact-copy>p{font-size:12px}.contact-copy .contact-email{font-size:clamp(18px,5vw,26px);margin-top:18px}.contact-copy .contact-links{margin-top:18px;gap:12px 20px}.contact-layout .contact-form{margin:0;grid-template-columns:1fr 1fr;gap:13px}.contact-form label{font-size:10px;gap:7px}.contact-form input,.contact-form textarea{font-size:16px;padding:11px}.contact-form textarea{min-height:110px}.contact-form button{font-size:11px;padding:13px 18px}.contact-mark{width:280px;height:280px;left:66%;top:15%;opacity:.2}.contact footer{margin-top:40px;font-size:9px;gap:20px}.contact footer>div{gap:16px}
 .floating-contact{right:16px;bottom:16px;padding:13px 17px;font-size:10px}.contact-in-view .floating-contact{opacity:0;pointer-events:none}
 #film-dialog,#photo-dialog{width:94vw;padding:14px;max-height:92svh}#film-dialog video{max-height:72svh;object-fit:contain}#photo-full{max-height:73svh;object-fit:contain}.dialog-top{gap:12px}.dialog-top h2{font-size:13px}.dialog-top button{font-size:12px;min-height:38px}
}
@media(max-width:700px){.design .curve{left:12%}.design .wheel{right:12%}.design .keyframes{left:12%}.design .timeline{right:12%}}
@media(max-width:380px){.header #motion-toggle{max-width:75px;font-size:8px}.hero h1{font-size:41px}.contact-layout .contact-form{grid-template-columns:1fr}.contact-form .message-field{grid-column:auto}.service-chip{max-width:100%}}
@media(prefers-reduced-motion:reduce){.fibre-ready{filter:none!important}}

/* Original portraits: only their surrounding background is masked in the page. */
.contact-about{position:relative;max-width:1100px;padding-top:145px;margin-bottom:42px;isolation:isolate}
.contact-about>.eyebrow{position:absolute;top:0;left:0;right:0;z-index:3;font-size:10px;letter-spacing:.18em}
.contact .contact-about h2{position:relative;z-index:3;font-size:clamp(43px,6vw,76px);font-weight:500;letter-spacing:-.055em;line-height:1.05;margin:0 0 18px;white-space:nowrap}
.contact .contact-about h2>span{color:#f2f2f4}.contact .contact-about h2>.duo-amp{color:#929298;font-weight:400}.contact .contact-about h2 .duo-dot{color:#bf3b35}
.contact .contact-about p:not(.eyebrow){position:relative;z-index:3;max-width:1000px;font-size:clamp(12px,1.3vw,17px);color:#b0b0b8;line-height:1.65}
.duo-portraits{position:absolute;inset:30px 0 auto;height:205px;z-index:1;pointer-events:none}
.duo-portrait{position:absolute;top:0;aspect-ratio:1.5;width:255px;mask-image:linear-gradient(to bottom,#000 57%,#000c 74%,transparent 99%);opacity:.9}
.duo-portrait img{display:block;width:100%;height:auto;filter:brightness(.62) contrast(1.12) saturate(.85)}
.duo-portrait-youssef{left:12%;filter:drop-shadow(-.5px -.8px 1px #df4c317a) drop-shadow(-5px -3px 15px #af291b38)}
.duo-portrait-youssef img{clip-path:polygon(0 76%,12% 67%,16% 54%,20% 44%,24% 45%,33% 55%,39% 58%,39% 49%,40% 33%,43% 21%,49% 11%,58% 5%,69% 5%,77% 11%,83% 23%,86% 37%,86% 46%,85% 54%,82% 68%,77% 80%,73% 87%,68% 93%,70% 100%,0 100%)}
.duo-portrait-salma{right:11%;filter:drop-shadow(.5px -.8px 1px #e8bb7866) drop-shadow(4px -3px 15px #d5984a2c)}
.duo-portrait-salma img{clip-path:polygon(0 94%,9% 90%,15% 72%,17% 58%,16% 43%,16% 29%,20% 20%,25% 13%,31% 9%,40% 9%,49% 11%,56% 16%,61% 24%,64% 34%,64% 46%,68% 58%,74% 69%,83% 78%,100% 94%,100% 100%,0 100%)}
.duo-trails{position:absolute;inset:0;width:100%;height:100%;opacity:.6;z-index:2;mask-image:linear-gradient(to bottom,#000 65%,transparent 100%)}
.contact-mark{top:40%;left:24%}
@media(min-width:701px) and (max-width:1100px){.duo-portrait{width:220px}.duo-portrait-youssef{left:5%}.duo-portrait-salma{right:5%}.contact-about{padding-top:130px}.duo-portraits{top:30px}}
@media(max-width:700px){.contact-about{padding-top:123px;margin-bottom:33px}.contact-about>.eyebrow{font-size:7px;letter-spacing:.15em}.contact .contact-about h2{font-size:clamp(31px,8.6vw,56px);margin-bottom:14px}.contact .contact-about p:not(.eyebrow){font-size:12px;max-width:95%;line-height:1.7}.duo-portraits{top:29px;height:140px}.duo-portrait{width:clamp(150px,40vw,220px)}.duo-portrait-youssef{left:-1%}.duo-portrait-salma{right:-1%}.duo-trails{opacity:.45}.contact-mark{top:36%;left:65%}}

/* Approved portraits with selectable bilingual text over the clean image. */
.direct .work-card:nth-child(5){left:24%}
.direct .work-card:nth-child(6){left:76%}
.direct .work-card:nth-child(7){left:50%;top:76%;--tilt:0deg;--delay:-3.5s}
.direct .work-card[data-project=mode] .work-meta h3::after{content:' · Tournage';font-size:9px;color:#a5a5ad;letter-spacing:0;font-weight:400}
html[lang=en] .direct .work-card[data-project=mode] .work-meta h3::after{content:' · Filming'}
@media(max-width:700px){.direct .work-card:nth-child(5){left:20%}.direct .work-card:nth-child(6){left:80%}.direct .work-card:nth-child(n+5){width:clamp(88px,24vw,140px)}.direct .work-card:nth-child(7){top:74%}.direct .work-card[data-project=mode] .work-meta h3::after{display:block;font-size:8px;margin-top:3px}}
.contact-about.duo-approved{container-type:inline-size;max-width:1000px;padding:0;margin:0 auto 24px;min-height:0}
.duo-approved-art{position:relative;width:100%;pointer-events:none;mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 84%,transparent),linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);mask-composite:intersect}
.duo-approved-art img{display:block;width:100%;height:auto}
.contact .contact-about.duo-approved>.eyebrow{position:absolute;top:11.3cqw;left:0;right:0;font-size:clamp(6px,.95cqw,11px);line-height:1.3;letter-spacing:.18em;margin:0}
.contact .contact-about.duo-approved h2{position:absolute;top:16cqw;left:0;right:0;font-size:clamp(26px,5cqw,54px);line-height:1.1;margin:0;white-space:nowrap}
.contact .contact-about.duo-approved p:not(.eyebrow){position:absolute;top:22.3cqw;left:2%;right:2%;max-width:none;font-size:clamp(11px,1.48cqw,16px);line-height:1.5;margin:0}
@media(max-width:700px){.contact-about.duo-approved{padding-bottom:48px;margin-bottom:25px}.contact .contact-about.duo-approved p:not(.eyebrow){top:28cqw;font-size:11px;line-height:1.6}.contact .contact-about.duo-approved>.eyebrow{letter-spacing:.12em}}