/* Direction 03 — cinematic editorial space. Existing approved artwork only. */
:root{--display-ar:'El Messiri','IBM Plex Sans Arabic',sans-serif;--display-en:'Cormorant Garamond','Cinzel',serif;--muted:#b9b4ab}
body{background:#111111;isolation:isolate;position:relative}body:before{content:'';position:fixed;inset:0;background:url('/assets/hero-camera.png') center/cover no-repeat;opacity:.018;z-index:-1;pointer-events:none}
.site-header{position:relative;inset:auto;z-index:auto;height:114px;padding:14px max(28px,calc((100% - 1480px)/2));display:grid;grid-template-columns:330px 1fr 48px;gap:32px;direction:rtl;background:transparent;border:0}
.brand{display:block;width:330px;perspective:700px;mix-blend-mode:screen}.brand img{height:86px;width:100%;object-fit:contain;transition:transform .45s ease;mix-blend-mode:screen}.brand:hover img{transform:rotateY(-7deg) rotateX(3deg)}
.nav{z-index:30;margin:0;justify-content:center;gap:24px;direction:rtl}.nav a{padding:14px 0;font-size:14px}.nav a.active:after{left:0;right:0;bottom:3px}.lang-switch{justify-content:center;font-weight:600}.lang-switch[lang=ar]{font-family:'IBM Plex Sans Arabic',sans-serif}.menu-toggle .ui-icon{filter:invert(1)}
html[lang=en] .nav{direction:ltr}html[lang=en] h1,html[lang=en] h2,html[lang=en] h3{font-family:var(--display-en)}html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3{font-family:var(--display-ar)}
.gravity-hero{max-width:1536px;margin:auto;padding:30px 28px 80px;display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);align-items:center;gap:32px;direction:ltr;min-height:620px}
.hero-copy{grid-column:2;grid-row:1;direction:rtl;text-align:right;padding:12px 0}.hero-role{color:var(--gold);font-size:clamp(18px,1.9vw,25px);line-height:1.6;margin-bottom:19px}.hero-copy h1{font-family:var(--display-ar);font-weight:600;line-height:1.5;font-size:clamp(30px,3.5vw,54px);letter-spacing:0;max-width:100%}.hero-slogan{font-family:Manrope,sans-serif;font-size:clamp(10px,1.08vw,15px);letter-spacing:.13em;line-height:1.8;margin-top:14px;white-space:nowrap}.hero-copy .button{font-weight:500;border-radius:999px;min-height:52px;font-size:18px;padding:10px 34px;margin-top:43px;color:var(--gold);transition:background .2s,color .2s,transform .2s}.hero-copy .button:hover{transform:translateY(-3px);color:var(--black)}
html[lang=en] .hero-copy{text-align:left;direction:ltr}html[lang=en] .hero-copy h1{font-family:var(--display-en);font-size:clamp(36px,4.3vw,69px);line-height:1.2}html[lang=en] .hero-role{font-size:19px}
.hero-film{grid-column:1;grid-row:1;min-width:0}.film-visual{border:1px solid #b49a6b77;overflow:hidden;background:var(--black)}.company-film-poster,.company-film{display:block;width:100%;aspect-ratio:1.5;object-fit:cover}.film-caption{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 0 0;direction:rtl;color:var(--muted);font-size:16px}.film-status{font-size:13px;border:1px solid var(--line);border-radius:99px;padding:2px 12px;color:var(--gold)}html[lang=en] .film-caption{direction:ltr}
.gravity-services{margin:0 auto;max-width:1480px;padding:38px 0 40px;border-block:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));direction:rtl}.gravity-service{padding:0 32px;text-align:center;position:relative;transition:transform .25s}.gravity-service+.gravity-service{border-right:1px solid var(--line)}.service-no{font:500 29px/1.3 Manrope,sans-serif;color:var(--gold)}.gravity-service h2{font-size:clamp(18px,1.7vw,25px);font-weight:500;margin:8px 0 17px;line-height:1.5}.gravity-service p{font-size:15px;color:var(--muted)}.gravity-service .ui-icon{display:block;margin:15px auto 0;filter:invert(67%) sepia(20%) saturate(637%) hue-rotate(1deg);width:19px;opacity:.7}.gravity-service:hover{transform:translateY(-5px)}.gravity-service:hover h2{color:var(--gold)}
.gravity-work{padding:65px 28px;max-width:1536px;margin:auto}.gravity-work-heading{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:28px}.gravity-work-heading .section-title{font-size:clamp(26px,3vw,42px);color:var(--ivory)}.gravity-work-heading .section-title:after{display:none}.gravity-work-heading .editorial-note{max-width:700px;margin:7px 0 0;text-align:inherit;font-size:13px;color:var(--muted)}.carousel-controls{display:flex;align-items:center;gap:14px;direction:ltr;flex-shrink:0}.carousel-controls button{border:1px solid var(--gold);background:transparent;color:var(--gold);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:background .2s}.carousel-controls img{filter:invert(67%) sepia(20%) saturate(637%) hue-rotate(1deg)}.carousel-controls button:hover{background:#b49a6b22}.carousel-controls button:disabled{opacity:.3;cursor:default}.carousel-count{font:12px Manrope,sans-serif;color:var(--muted);min-width:58px;text-align:center}
.gravity-projects{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--gold) transparent;padding:5px 0 22px;overscroll-behavior-x:contain}.gravity-projects .portfolio-card{flex:0 0 calc((100% - 44px)/3);scroll-snap-align:start;transition:transform .25s;min-width:0}.gravity-projects .portfolio-card:hover{transform:translateY(-4px)}.gravity-projects .video-frame{aspect-ratio:16/10;border:1px solid var(--line)}.gravity-projects .video-cover img,.portfolio-grid .video-cover img{object-fit:contain}.video-cover:hover img{transform:none}.play-icon img{width:16px;height:16px;filter:invert(1)}.gravity-projects .portfolio-text h3{font-size:21px}.gravity-projects .portfolio-text p{color:var(--muted)}.work-bottom{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-top:22px}.work-bottom p{font-size:14px;color:var(--muted)}.work-bottom .button{border-radius:99px}
.about-home{background:transparent;color:var(--ivory);border-block:1px solid var(--line);padding-block:62px}.about-home .section-title{color:var(--gold)}.about-photo{border:1px solid var(--line)}.contact-home{background:#181714;color:var(--ivory);padding-block:45px}.contact-geography p{color:var(--muted)}.footer-logo{mix-blend-mode:screen;width:260px}.home-awards{background:transparent}.light:not(.contact-home){background:var(--ivory)}.about-home.light{background:transparent}.about-home.light .button:hover{background:var(--ivory);color:var(--black)}.about-home.light .section-title{color:var(--gold)}
@media(min-width:1537px){.gravity-services{max-width:1480px}.gravity-hero{min-height:660px}}
@media(max-width:1150px){.site-header{grid-template-columns:280px 1fr 38px;gap:17px}.brand{width:280px}.nav{gap:16px}.nav a{font-size:12px}.gravity-hero{gap:28px;min-height:550px}.hero-copy h1{font-size:34px}.hero-role{font-size:19px}.hero-slogan{font-size:10px;letter-spacing:.09em}.gravity-services{margin-inline:28px}.gravity-service{padding-inline:18px}.gravity-service h2{font-size:20px}.gravity-service p{font-size:13px}}
@media(max-width:900px){.site-header{height:90px;grid-template-columns:260px 1fr 44px;padding:10px 22px}.brand{width:260px}.brand img{height:68px}.menu-toggle{display:grid;place-items:center;grid-column:3;grid-row:1}.lang-switch{grid-column:2;grid-row:1;justify-self:end;margin:0}.nav{display:none;position:absolute;top:86px;left:22px;right:22px;flex-direction:column;background:#181714;border:1px solid var(--line);padding:20px;gap:6px}.nav.open{display:flex}.nav a{font-size:15px;display:block;padding:8px 0}.gravity-hero{padding-top:25px;gap:26px;grid-template-columns:1.4fr 1fr;min-height:490px}.hero-copy h1{font-size:29px}.hero-role{font-size:16px}.hero-slogan{font-size:8px}.hero-copy .button{font-size:15px;margin-top:25px;min-height:44px;padding:8px 23px}.film-caption{font-size:13px}.gravity-work-heading{gap:20px}.gravity-projects .portfolio-card{flex-basis:calc((100% - 22px)/2)}.gravity-work-heading .section-title{font-size:28px}.gravity-service h2{font-size:18px}}
@media(max-width:650px){body{background-attachment:scroll}.site-header{padding-inline:18px;grid-template-columns:minmax(0,1fr) 35px 38px;gap:13px;height:86px}.brand{width:240px;max-width:100%}.brand img{height:64px}.lang-switch{font-size:12px;justify-self:center;min-width:0}.gravity-hero{display:flex;flex-direction:column;gap:30px;padding:27px 18px 34px;min-height:0}.hero-copy{width:100%;padding:0;text-align:center;order:0}.hero-role{font-size:17px;margin-bottom:8px}.hero-copy h1{font-size:clamp(29px,7.5vw,44px);line-height:1.5}.hero-slogan{font-size:9px;letter-spacing:.1em;margin-top:12px}.hero-copy .button{margin-top:23px;min-height:44px}.hero-film{width:100%;order:1}.company-film-poster,.company-film{aspect-ratio:1.5}.film-caption{padding-top:12px;font-size:13px}.gravity-services{margin-inline:18px;padding:22px 0;grid-template-columns:1fr}.gravity-service{padding:21px 12px;display:grid;grid-template-columns:40px 1fr 24px;gap:3px 13px;align-items:center;text-align:right}.gravity-service+.gravity-service{border-right:0;border-top:1px solid var(--line)}.service-no{font-size:24px;grid-row:1/3}.gravity-service h2{font-size:19px;margin:0;grid-column:2}.gravity-service p{font-size:13px;grid-column:2}.gravity-service .ui-icon{grid-column:3;grid-row:1/3;margin:0}.gravity-work{padding:38px 18px}.gravity-work-heading{align-items:flex-start;flex-direction:column;gap:20px}.gravity-work-heading .section-title{font-size:27px}.gravity-work-heading .editorial-note{font-size:12px}.carousel-controls{align-self:flex-end;gap:10px}.carousel-controls button{width:38px;height:38px}.gravity-projects{gap:14px}.gravity-projects .portfolio-card{flex-basis:87%}.gravity-projects .portfolio-text h3{font-size:19px}.work-bottom{align-items:flex-start;flex-direction:column;gap:15px}.about-home{display:flex;flex-direction:column;padding:35px 18px;gap:25px}.about-copy{display:block;width:100%}.contact-home{padding-inline:18px}.footer-main{flex-direction:column;gap:22px}.footer-logo{width:240px}.footer-links{justify-content:center}.footer-bottom{font-size:11px}html[lang=en] .hero-copy{text-align:center}html[lang=en] .hero-copy h1{font-size:42px}html[lang=en] .hero-role{font-size:15px}html[lang=en] .gravity-service{text-align:left;direction:ltr}.award-visuals{gap:10px}.award-visuals img{min-height:0}.gravity-service:hover{transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.brand:hover img,.gravity-service:hover,.gravity-projects .portfolio-card:hover,.hero-copy .button:hover{transform:none}}

/* Approved About and Contact imagery, 18 October 2026. */
.about-photo{aspect-ratio:16/9;object-position:center}.contact-photo{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;border:1px solid var(--line);margin-bottom:20px}.contact-geography{min-width:0}.section-editorial-photo{display:block;width:100%;max-width:1200px;aspect-ratio:16/9;object-fit:cover;margin:0 auto 36px}.contact-page-photo{grid-column:1/-1;display:block;width:100%;aspect-ratio:16/9;max-height:560px;object-fit:cover;object-position:center}.contact-layout{row-gap:36px}
@media(max-width:650px){.contact-home{grid-template-columns:1fr}.contact-geography{width:100%}.contact-page-photo{max-height:none}}

/* Full-width approved Contact image on both homepages. */
.contact-home-photo{grid-column:1/-1;display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:560px;object-fit:contain;background:#111111;border:1px solid var(--line)}.contact-home .contact-copy{text-align:start;min-width:0}.company-film-poster{aspect-ratio:16/9;object-fit:contain}.about-photo{aspect-ratio:16/9;object-fit:contain}html[lang=ar] .contact-home .contact-copy{direction:rtl;text-align:right}.contact-home .contact-geography{align-self:center}
@media(max-width:650px){.contact-home-photo{max-height:none}.contact-home{grid-template-columns:1fr;gap:25px}}

/* Approved brand hero, seamless with the page background. */
.film-visual{border:0;background:transparent}.company-film-poster{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}.hero-film{min-width:0}