@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700;800;900&display=swap');
:root{--orange:#f77c18;--ink:#171717;--paper:#fff;--gray:#656565;--line:#ddd;--font:'Tajawal',Arial,sans-serif;color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:1rem;line-height:1.6}html[lang=en]{--font:'Manrope',Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #245eff;outline-offset:5px}button{touch-action:manipulation}.wrap{width:min(1280px,calc(100% - 96px));margin-inline:auto}.header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:25px}.brand{display:flex;align-items:center;gap:9px;font:800 1.45rem 'Manrope',Arial,sans-serif;direction:ltr;letter-spacing:-1px}.brand-dot{color:var(--orange)}.brand-icon{font-size:.9rem;background:var(--ink);color:white;width:30px;height:30px;display:grid;place-items:center;border-radius:6px}.header nav{display:flex;gap:32px;font-size:.95rem;font-weight:700}.header nav a{transition:color .2s}.header nav a:hover{color:#b94b00}.language{border:1px solid var(--line);border-radius:100px;padding:9px 17px;background:white;direction:ltr;font-family:'Manrope',Arial,sans-serif;font-weight:700;font-size:.875rem;display:flex;gap:12px;align-items:center}.hero{display:grid;grid-template-columns:1fr 1.06fr;border-radius:14px;overflow:hidden;min-height:590px;direction:ltr}.hero-main{background:var(--orange);padding:42px 42px 26px;display:flex;flex-direction:column;align-items:flex-start}.hero-main>*{direction:rtl;text-align:right;width:100%}html[lang=en] .hero-main>*{direction:ltr;text-align:left}.eyebrow{display:flex;align-items:center;gap:12px;font-size:.875rem;font-weight:700}.small-rule{width:24px;height:1px;background:var(--ink)}h1,h2,h3,p{margin:0}h1{font-size:clamp(3.8rem,5.8vw,5.7rem);font-weight:900;line-height:1.12;letter-spacing:-2px;margin-top:28px}html[lang=en] h1{font-weight:800;font-size:clamp(3.5rem,5.6vw,5.4rem);letter-spacing:-4px;line-height:1.02}.hero-description{max-width:400px;margin-top:25px;line-height:1.8;font-weight:500}.button{display:inline-flex!important;align-items:center;justify-content:center;gap:12px;width:auto!important;border-radius:100px;padding:13px 24px;font-weight:700;font-size:1rem;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px);background:#f1f1f1}.button-light{background:white;margin-top:28px}.play-icon{font-size:.8rem}.hero-bottom{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-top:35px;margin-top:auto;font-size:.875rem}.timecode{direction:ltr;font-family:monospace;font-size:.8rem}.hero-side{display:grid;grid-template-columns:1fr 160px;position:relative;background:#f8f8f8}.hero-visual{background:#e0600a;position:relative;min-width:0;overflow:hidden}.hero-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.38),transparent 65%);pointer-events:none}.hero-visual img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:58% center}.image-caption{position:absolute;inset-inline:20px;top:24px;z-index:1;display:flex;justify-content:space-between;gap:12px;color:white;font:600 .75rem 'Manrope',sans-serif}.visual-type{position:absolute;bottom:24px;left:24px;color:white;z-index:1;line-height:1;letter-spacing:-4px;font:800 clamp(2.5rem,4vw,4.3rem)/1 'Manrope',sans-serif}.hero-aside{padding:32px 20px;display:flex;flex-direction:column;justify-content:center;gap:15px;direction:rtl;text-align:right}html[lang=en] .hero-aside{direction:ltr;text-align:left}.aside-label{font-size:.8rem;color:#98420d;font-weight:700}.hero-aside p{font-size:1.1rem;font-weight:700;line-height:1.5}.aside-number{font-size:.75rem;font-family:monospace;margin-top:40px;direction:ltr;color:var(--gray)}.disciplines{margin-top:44px;background:var(--ink);color:white}.discipline-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:20px;font-size:1.05rem;font-weight:500}.discipline-row span:nth-child(even){color:var(--orange);font-size:1.7rem;line-height:1}.work-section{padding-block:84px 76px}.section-top{display:flex;justify-content:space-between;align-items:end;gap:24px}.section-index{font-size:.875rem;font-weight:500;color:var(--gray)}h2{font-size:clamp(2.2rem,3.4vw,3.5rem);font-weight:800;line-height:1.2;letter-spacing:-1px;margin-top:15px}.section-summary{color:var(--gray);font-size:1rem;line-height:1.7}.filters{display:flex;gap:10px;flex-wrap:wrap;margin-block:33px 28px}.filters button{border:1px solid #d9d9d9;border-radius:100px;background:white;padding:8px 18px;font-size:.875rem;min-height:42px}.filters button.active{background:var(--ink);color:white;border-color:var(--ink)}.project-grid{display:grid;grid-template-columns:1.22fr 1fr 1fr;gap:24px}.project{padding:0;border:0;background:none;text-align:start;min-width:0}.project[hidden]{display:none}.project-art{height:340px;position:relative;border-radius:9px;overflow:hidden;padding:23px;transition:transform .25s}.project:hover .project-art{transform:translateY(-5px)}.project-art.orange{background:var(--orange)}.project-art.black{background:var(--ink);color:white}.project-art.white{background:#f0f0f0}.project-count{font:500 .8rem 'Manrope',sans-serif;direction:ltr;display:block}.project-typography{font:800 clamp(2.4rem,3.5vw,3.7rem)/1.03 'Manrope',sans-serif;letter-spacing:-2px;position:absolute;top:100px;left:22px;direction:ltr}.project-typography>span{color:white}.art-caption{position:absolute;bottom:24px;inset-inline-start:23px;font-size:.8rem}.project-open{position:absolute;bottom:19px;inset-inline-end:20px;background:white;color:var(--ink);border-radius:50%;width:33px;height:33px;display:grid;place-items:center;font-size:1.3rem}.vertical-film{direction:ltr;width:150px;border:1px solid #747474;border-radius:12px;height:245px;position:absolute;top:47px;left:50%;transform:translateX(-50%) rotate(-7deg);padding:13px;color:white;display:flex;flex-direction:column;justify-content:space-between;background:#222}.vertical-film>span{font:500 .75rem 'Manrope',sans-serif;color:#ccc}.vertical-film strong{font:800 2rem/1.02 'Manrope',sans-serif;letter-spacing:-1px}.film-progress{height:3px;background:linear-gradient(to right,var(--orange) 65%,#555 65%);width:100%}.quiet{top:72px;font-size:clamp(2.3rem,3vw,3rem)}.quiet em{display:block;font-family:Georgia,serif;font-weight:400;font-size:1.9rem;letter-spacing:-1px;margin-top:15px}.project-info{padding-top:18px;display:flex;flex-direction:column;gap:6px}.project-info h3{font-weight:700;font-size:1.2rem}.project-info>span{font-size:.875rem;color:var(--gray)}.sample-note{font-size:.875rem;color:var(--gray);border-top:1px solid var(--line);margin-top:32px;padding-top:18px}.about-section{padding-block:75px;background:#f6f6f6}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.about-mark{font:700 .8rem 'Manrope',sans-serif;direction:ltr;margin-top:35px;color:#b95208}.about-copy>p{font-size:1.1rem;line-height:1.9}.skill-list{margin-top:25px}.skill-list>div{display:flex;gap:24px;border-top:1px solid #ddd;padding-block:16px;align-items:center}.skill-list span{font-family:monospace;font-size:.8rem;color:#9b4200}.skill-list h3{font-size:1rem;font-weight:500}.contact-section{padding-block:80px}.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center}.contact-grid h2{font-size:clamp(2.6rem,4vw,4rem)}.contact-grid h2 span{color:#bc4c00}.contact-details>p{margin-block:20px;color:var(--gray)}.contact-line{border-top:1px solid var(--line);display:flex;flex-direction:column;gap:5px;padding-block:14px;font-size:.95rem}.muted{color:var(--gray);font-size:.875rem}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);padding-block:25px;font-size:.875rem;color:var(--gray)}.footer-year{direction:ltr}dialog{width:min(620px,calc(100% - 32px));max-height:85dvh;padding:30px;border:0;border-radius:15px;box-shadow:0 30px 100px #0004}dialog::backdrop{background:#0009;backdrop-filter:blur(5px)}.dialog-top{display:flex;justify-content:space-between;align-items:center}.dialog-close{border:0;background:#f1f1f1;border-radius:50%;width:42px;height:42px;font-size:1.8rem;line-height:1}.sample-badge{display:inline-block;background:#ffeddc;color:#8b3d00;font-size:.8rem;padding:4px 12px;border-radius:30px;margin-top:15px}dialog h2{font-size:2.2rem}dialog>p{margin-top:18px;line-height:1.8;color:var(--gray)}.dialog-tags{margin-top:20px;display:flex;gap:8px;flex-wrap:wrap}.dialog-tags span{background:#f4f4f4;padding:5px 12px;border-radius:30px;font-size:.875rem}.video-placeholder{background:var(--ink);color:white;margin-top:25px;border-radius:8px;min-height:180px;padding:28px;text-align:center;display:grid;place-content:center;gap:15px}.video-placeholder>.play-icon{font-size:1.5rem;color:var(--orange)}.video-placeholder p{font-size:.95rem;max-width:400px}.header,.hero,.work-section,.about-section,.contact-section{animation:enter .5s ease both}@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(min-width:1600px){.hero{min-height:640px}}@media(max-width:1100px){.wrap{width:calc(100% - 56px)}.hero-main{padding:32px}.hero-side{grid-template-columns:1fr 125px}.hero-aside{padding:24px 15px}.hero{min-height:565px}.project-grid{gap:16px}.project-art{height:300px}.project-typography{font-size:2.6rem}.about-grid,.contact-grid{gap:45px}}
@media(max-width:800px){.wrap{width:calc(100% - 40px)}.header{padding-block:20px}.header nav{gap:20px}.hero{grid-template-columns:1fr;min-height:0}.hero-main{padding:32px}.hero-main h1{font-size:4.2rem}html[lang=en] .hero-main h1{font-size:4.4rem;letter-spacing:-3px}.hero-description{max-width:500px}.hero-bottom{padding-top:30px}.hero-side{grid-template-columns:1fr 145px;min-height:320px}.hero-visual img{object-position:center 50%}.visual-type{font-size:3.2rem}.discipline-row{gap:12px;font-size:.95rem;flex-wrap:wrap;justify-content:center}.discipline-row span:nth-child(6){display:none}.work-section{padding-block:58px}.project-grid{grid-template-columns:1fr 1fr}.project.featured{grid-column:1/-1}.project.featured .project-art{height:300px}.project.featured .project-typography{font-size:3.6rem;top:78px}.about-grid,.contact-grid{grid-template-columns:1fr;gap:32px}.about-section{padding-block:55px}.contact-section{padding-block:55px}.section-summary{max-width:180px}.contact-details>p{margin-top:0}}
@media(max-width:480px){.wrap{width:calc(100% - 32px)}.header{gap:12px;flex-wrap:wrap}.header .brand{font-size:1.2rem}.brand-icon{width:27px;height:27px}.header nav{order:3;width:100%;justify-content:center;gap:32px;font-size:.9rem}.language{padding:8px 14px}.hero-main{padding:28px 24px 20px}.hero-main h1{font-size:3.65rem;letter-spacing:-1px;margin-top:25px}html[lang=en] .hero-main h1{font-size:3.7rem;letter-spacing:-2.5px}.hero-description{font-size:1rem;margin-top:20px}.hero-side{min-height:285px;grid-template-columns:1fr 118px}.hero-aside{padding:18px 12px}.hero-aside p{font-size:1rem}.aside-label{font-size:.75rem}.visual-type{font-size:2.8rem;letter-spacing:-2px;left:17px}.image-caption{font-size:.65rem;inset-inline:14px;flex-wrap:wrap}.discipline-row{font-size:.85rem;column-gap:14px;row-gap:9px}.discipline-row span:nth-child(even){font-size:1.2rem}.section-top{display:block}.section-summary{margin-top:16px;max-width:none}.section-summary br{display:none}h2{font-size:2.3rem}.filters{gap:7px;margin-top:25px}.filters button{font-size:.85rem;padding:7px 12px}.project-grid{grid-template-columns:1fr;gap:28px}.project.featured{grid-column:auto}.project-art,.project.featured .project-art{height:320px}.project-typography,.project.featured .project-typography{font-size:3rem;top:95px}.quiet{font-size:3rem;top:75px}.hero-bottom{font-size:.8rem;gap:12px}.contact-grid h2{font-size:2.8rem}footer{flex-wrap:wrap;font-size:.8rem}footer .brand{font-size:1.25rem}dialog{padding:22px}.about-copy>p{font-size:1rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}