@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=IBM+Plex+Sans+Arabic:wght@400;500;600&display=swap');
body .poster .silhouette{animation-duration:1.3s,var(--float-time,7s)}body.portrait-off .silhouette{animation:none;transform:none}body #work::before{animation-duration:var(--glow-time,14s);opacity:var(--work-strength,1);background:radial-gradient(ellipse at 18% 45%,#195dff30,transparent 48%),radial-gradient(ellipse at 85% 70%,#3c74ff22,transparent 42%)}body #work::after{animation-duration:var(--light-time,20s)}body.work-motion-off #work::before,body.work-motion-off #work::after{animation:none}body .poster .outline{font-size:42cqw}body #work::before{animation-name:work-drift}@keyframes work-drift{from{transform:translate3d(-6%,-3%,0) scale(1)}to{transform:translate3d(7%,4%,0) scale(1.1)}}
body .poster{container-type:inline-size}body .poster .outline{font-size:42cqw;letter-spacing:-2px;transform:scaleX(.9);white-space:nowrap}body .silhouette{animation:entrance 1.3s ease both,portrait-float 7s ease-in-out 1.3s infinite;will-change:transform}body .poster.motion-paused .silhouette{animation-play-state:paused}@keyframes portrait-float{0%,100%{transform:translate(var(--px,0px),calc(var(--py,0px) + 0px)) rotate(-1deg)}50%{transform:translate(calc(var(--px,0px) + 5px),calc(var(--py,0px) - 14px)) rotate(1deg)}}@media(prefers-reduced-motion:reduce){body .silhouette{animation:none;will-change:auto}}
@media(min-width:1100px){body .hero{min-height:clamp(680px,80vh,900px)}body .poster{min-height:680px}body .silhouette{max-height:780px}body .identity{padding-inline-end:8%}body .identity h1{font-size:clamp(105px,9vw,160px)}body .section{max-width:1600px;padding-inline:7%}}
@media(max-width:750px){body .top{padding:14px 5%}body .brand img{width:36px;height:36px}body nav{gap:18px}body nav a{font-size:14px}body .identity{padding:28px 5% 5px}body .identity h1{font-size:clamp(58px,15vw,92px)}body .arabic{font-size:clamp(26px,7vw,34px);margin:12px 0 8px}body .descriptor{font-size:12px;letter-spacing:1.5px;margin-bottom:18px}body .kicker{margin-bottom:15px;font-size:10px}body .button{padding:10px 22px;font-size:14px}body .poster{min-height:300px;margin-top:0}body .silhouette{height:330px;max-height:330px;width:100%;padding:10px 12% 25px}body .poster .outline{font-size:clamp(220px,68vw,360px)}body .hero-bottom{font-size:9px;letter-spacing:1px;bottom:10px}body .section{padding:40px 5%}body .heading{margin-bottom:22px}body .works{gap:28px}body .work h3{font-size:20px}body .contact h2{font-size:34px}body .contact-links span{font-size:28px}}
#work{position:relative;isolation:isolate;overflow:hidden}#work::before,#work::after{content:"";position:absolute;inset:-80px -8%;z-index:-1;pointer-events:none}#work::before{background:radial-gradient(ellipse at 18% 45%,#195dff1c,transparent 48%),radial-gradient(ellipse at 85% 70%,#3c74ff12,transparent 42%);animation:work-glow 18s ease-in-out infinite alternate}#work::after{background:linear-gradient(115deg,transparent 28%,#558aff08 44%,transparent 61%);animation:work-light 24s ease-in-out infinite alternate}#work.motion-paused::before,#work.motion-paused::after{animation-play-state:paused}@keyframes work-glow{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.08)}}@keyframes work-light{from{transform:translateX(-18%);opacity:.35}to{transform:translateX(18%);opacity:.8}}@media(prefers-reduced-motion:reduce){#work::before,#work::after{animation:none;transform:none}}
:root{--bg:#07080b;--ink:#f5f5f7;--muted:#a3a7b2;--blue:#195dff;--line:#ffffff22}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.8 'IBM Plex Sans Arabic',sans-serif}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:2px solid #477cff;outline-offset:5px}button,input,textarea{font:inherit}.top{padding:24px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);max-width:1600px;margin:auto}.brand{line-height:0}nav{display:flex;gap:32px}nav a{font-size:15px;transition:color .2s}nav a:hover{color:#6a92ff}.hero{max-width:1600px;margin:auto;display:grid;grid-template-columns:1fr 1fr;direction:ltr;position:relative;min-height:660px;border-bottom:1px solid var(--line);overflow:hidden}.poster{position:relative;min-width:0;min-height:620px;overflow:hidden;display:flex;align-items:center;justify-content:center;isolation:isolate;background:radial-gradient(ellipse at 35% 60%,#15377b65,transparent 66%)}.outline{position:absolute;font:700 clamp(220px,32vw,540px)/1 'Barlow Condensed',sans-serif;letter-spacing:-6px;color:transparent;-webkit-text-stroke:1px #769bff80;transform:scaleX(.72);white-space:nowrap;z-index:-2;opacity:.7}.halo{position:absolute;inset:15% 5%;background:radial-gradient(ellipse,#185aff28,transparent 65%);filter:blur(15px)}.silhouette{width:100%;max-height:660px;object-fit:contain;filter:drop-shadow(0 0 20px #2465ff30);transform:translate(var(--px,0px),var(--py,0px));transition:transform .5s ease;animation:entrance 1.3s ease both;z-index:2}.light{position:absolute;inset:0;background:linear-gradient(120deg,transparent 20%,#4385ff14 48%,transparent 70%);transform:translateX(-130%);animation:sweep 2.5s ease .4s both;pointer-events:none;z-index:3}.identity{direction:rtl;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:65px 9% 80px 0;min-width:0;animation:words 1.1s ease both}.kicker{font-size:11px;letter-spacing:3px;color:#8993aa;direction:ltr;margin:0 0 22px}.identity h1{font:800 clamp(64px,8.4vw,145px)/.93 'Barlow Condensed',sans-serif;letter-spacing:-1px;margin:0;max-width:100%;text-wrap:balance}.arabic{font-size:clamp(28px,3.6vw,55px);line-height:1.4;margin:24px 0 12px}.descriptor{font-family:Arial,sans-serif;font-size:clamp(14px,1.35vw,19px);letter-spacing:3px;text-transform:uppercase;color:#c3c7d1;margin:0 0 34px}.button{display:inline-flex;gap:30px;align-items:center;padding:13px 25px;background:var(--ink);color:#090b10;border:1px solid var(--ink);transition:background .25s,transform .25s}.button:hover{background:#dbe5ff;transform:translateY(-3px)}.button span{font-size:11px;color:#185aff}.hero-bottom{position:absolute;bottom:20px;inset-inline:5%;display:flex;justify-content:space-between;direction:ltr;color:#8c909c;font-size:11px;letter-spacing:2px;pointer-events:none}.section{max-width:1400px;margin:auto;padding:85px 6%}.heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:32px;gap:20px}.heading h2{font-weight:500;font-size:38px;margin:0}.heading>span{font-family:Arial,sans-serif;font-size:11px;letter-spacing:2px;color:var(--muted)}.works{display:grid;grid-template-columns:1fr 1fr;gap:45px 28px}.work{min-width:0;perspective:1200px}.video-frame{background:#10131b;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);transition:transform .5s,box-shadow .5s;transform-origin:50% 50%}.work:hover .video-frame{transform:rotateY(-2deg) translateY(-4px);box-shadow:0 15px 50px #0008}video{width:100%;height:100%;display:block;object-fit:contain}.work-meta{display:flex;gap:18px;align-items:baseline;margin-top:18px}.work-number{font-size:12px;color:#7397f6;direction:ltr}.work h3{font-size:22px;font-weight:500;margin:0}.work-description{color:var(--muted);font-size:15px;margin:7px 32px 0}.empty{grid-column:1/-1;color:var(--muted);padding:30px 0}.companies-section{border-top:1px solid var(--line)}.companies{display:flex;gap:30px 60px;flex-wrap:wrap;align-items:center}.company{display:flex;gap:15px;align-items:center;color:#b9bdc8;font-size:22px;padding:15px 0}.company img{max-width:100px;max-height:60px;object-fit:contain}.contact{border-top:1px solid var(--line);padding-block:90px}.contact h2{font-size:clamp(38px,5.5vw,74px);font-weight:500;margin:5px 0 35px}.contact-links{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.contact-links a{border-bottom:1px solid var(--line);padding:15px 0 24px;display:flex;flex-direction:column;gap:10px;transition:border-color .25s,transform .25s}.contact-links a:hover{border-color:var(--blue);transform:translateY(-4px)}.contact-links span{font-family:'Barlow Condensed',sans-serif;font-size:34px;align-self:start}.contact-links small{color:var(--muted);font-size:14px;align-self:start}footer{padding:27px 6%;max-width:1600px;margin:auto;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted)}footer span:first-child{font-family:Arial,sans-serif;letter-spacing:2px}.ready{opacity:0;transform:translateY(22px) rotateX(3deg);transition:opacity .8s,transform .8s}.shown{opacity:1;transform:none}.skip{position:absolute;top:-100px}.skip:focus{top:10px;right:20px;background:#fff;color:#000;padding:10px;z-index:20}@keyframes entrance{from{opacity:0;transform:translateY(35px) rotate(-3deg)}to{opacity:1;transform:translateY(0) rotate(0)}}@keyframes words{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@keyframes sweep{to{transform:translateX(130%)}}@media(max-width:750px){.top{padding:20px 6%}nav{gap:20px}.hero{grid-template-columns:1fr;min-height:0}.poster{min-height:420px;order:2;margin-top:-15px}.identity{padding:40px 6% 10px;align-items:center;text-align:center;order:1}.identity h1{font-size:clamp(70px,16vw,115px)}.arabic{font-size:35px;margin:18px 0 10px}.descriptor{font-size:13px;letter-spacing:2px;margin-bottom:24px}.kicker{margin-bottom:20px}.outline{font-size:360px}.silhouette{max-height:450px;width:100%}.hero-bottom{bottom:15px}.section{padding:55px 6%}.heading h2{font-size:28px}.heading>span{font-size:10px;letter-spacing:1px}.works{grid-template-columns:1fr}.contact-links{grid-template-columns:1fr;gap:10px}.contact-links a{flex-direction:row;justify-content:space-between;align-items:center}.contact-links small{align-self:center}.company{font-size:20px}.contact h2{font-size:42px}footer{flex-wrap:wrap}.poster .outline{font-size:clamp(270px,78vw,520px)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before{animation:none!important;transition:none!important}.ready{opacity:1;transform:none}.silhouette{transform:none!important}.work:hover .video-frame{transform:none}}


[hidden]{display:none!important}.work-ribbon{margin-bottom:44px}.ribbon-viewport{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);direction:ltr}.ribbon-track{display:flex;width:max-content;gap:16px;animation:work-ribbon-scroll var(--ribbon-time,70s) linear infinite}.ribbon-copy{display:flex;gap:16px}.ribbon-card{flex:none;width:240px;aspect-ratio:16/9;position:relative;border:1px solid #25406a;border-radius:12px;overflow:hidden;padding:0;background:#101725;color:white;cursor:pointer}.ribbon-card img{width:100%;height:100%;object-fit:cover}.ribbon-card span{position:absolute;inset:auto 0 0;padding:20px 10px 8px;background:linear-gradient(transparent,#060b17);font:12px/1.5 inherit;direction:rtl;text-align:right}.ribbon-card:focus-visible{outline:3px solid #78a6ff;outline-offset:-4px}.ribbon-pause{display:block;margin:14px auto 0;border:1px solid #334763;border-radius:20px;background:#0c1422;color:#b7c8e5;padding:7px 16px;cursor:pointer}.ribbon-paused .ribbon-track,.ribbon-viewport:hover .ribbon-track,.ribbon-viewport:focus-within .ribbon-track{animation-play-state:paused}.works-toggle{display:block;margin:0 auto 32px;cursor:pointer;color:white;background:#10316d;border:1px solid #4886ff}.works-toggle[aria-expanded="false"]{margin-bottom:0}@keyframes work-ribbon-scroll{to{transform:translateX(calc(-50% - 8px))}}@media(max-width:750px){.ribbon-card{width:190px}.work-ribbon{margin-bottom:28px}}@media(prefers-reduced-motion:reduce){.ribbon-track{animation:none}.ribbon-viewport{overflow-x:auto}}