/* Shared visual identity, with natural reading direction in each language. */
:root{--display-font:'Alexandria',Tahoma,Arial,sans-serif;--body-font:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif;--latin:'Roboto',Arial,sans-serif}
body{font-weight:700}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3,html[lang=ar] .wordmark{letter-spacing:0}
html[lang=ar] .hero h1{font-size:clamp(50px,5.5vw,88px);line-height:1.6}
html[lang=ar] .hero-intro{font-size:20px;line-height:1.85}
html[lang=ar] .wordmark{font-size:26px}
.site-header{gap:24px}.site-header nav{gap:26px;font-weight:700}
.language-switch{display:inline-flex;gap:6px;align-items:center;justify-content:center;min-height:40px;min-width:48px;padding:5px 7px;border:1px solid #345166;border-radius:7px;white-space:nowrap;font-weight:700;font-size:13px!important;letter-spacing:0!important;flex-shrink:0}
.language-switch:hover{border-color:var(--blue);color:var(--blue)}
.language-switch[lang=ar]{font-family:'IBM Plex Sans Arabic',Tahoma,sans-serif}
.language-switch>span{font-family:Arial;font-size:17px}
.header-cta{flex-shrink:0;white-space:nowrap;gap:14px}
.film-play small{font-weight:700}.wordmark-en{font-family:'Roboto',Arial,sans-serif!important;font-weight:700}
.manifesto-heading>[lang=ar]{font-size:12px;color:#88aabe}
.service-index[lang=ar]{font-size:12px;letter-spacing:0}
.vertical-label[lang=ar]{font-size:12px;letter-spacing:0}
.gallery-heading>span[lang=ar]{font-size:12px;color:#8298a6}
.hero-bottom a>[lang=ar]{font-size:12px}
.process-photo-label>[lang=ar]{font-size:12px;color:#92bdd5}
.manifesto-footer>[lang=ar]{font-size:12px}
.direct-email{font-weight:700}
html[lang=en]{--display-font:'Bebas Neue','Arial Narrow',Arial,sans-serif;--body-font:'Roboto',Arial,sans-serif}
html[lang=en] body{font-size:16px;font-weight:700;letter-spacing:0}
html[lang=en] h1,html[lang=en] h2,html[lang=en] h3{font-weight:400;line-height:1.02;letter-spacing:.01em;text-transform:uppercase;font-synthesis:none}
html[lang=en] .site-header nav{margin-right:0;margin-left:auto;font-size:13px;gap:24px}
html[lang=en] .site-header .header-cta{font-size:13px;padding:10px 20px}
html[lang=en] .wordmark{font-family:var(--display-font);font-size:34px;line-height:1;font-weight:400;letter-spacing:.02em;text-transform:uppercase}
html[lang=en] .hero-photo{inset:0 0 0 35%}
html[lang=en] .hero-vignette{background:linear-gradient(90deg,#030609 0%,#030609 27%,#030609dd 37%,#03060910 66%),linear-gradient(0deg,#030609,transparent 27%,transparent 85%,#03060980)}
html[lang=en] .hero-content{width:67%;padding:45px 5vw 80px}
html[lang=en] .hero h1{font-size:clamp(82px,8.3vw,132px);line-height:.98;margin:22px 0;letter-spacing:0}
html[lang=en] .hero-eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:.04em}
html[lang=en] .hero-intro{font-size:18px;line-height:1.65;max-width:570px}
html[lang=en] .hero-intro .desktop-break{display:none}
html[lang=en] .hero-actions{gap:24px;margin-top:25px}
html[lang=en] .hero-bottom{font-size:11px}
html[lang=en] .eyebrow{font-size:13px;text-transform:uppercase;letter-spacing:.045em}
html[lang=en] .client-title h2{font-size:clamp(38px,4vw,60px);line-height:1.08;margin:13px 0}
html[lang=en] .client-title>p:last-child{font-size:14px}
html[lang=en] .section-heading h2{font-size:clamp(54px,5vw,78px);line-height:1.03;margin:16px 0}
html[lang=en] .service-top h3{font-size:clamp(35px,3.7vw,56px);line-height:1.04;letter-spacing:.01em}
html[lang=en] .service-label{font-size:15px}
html[lang=en] .service-bottom p{font-size:15px;line-height:1.65;min-height:95px}
html[lang=en] .service-bottom .button{font-size:13px;gap:15px}
html[lang=en] .about-copy h2{font-size:clamp(52px,5.5vw,82px);line-height:1.08;letter-spacing:0}
html[lang=en] .about-copy>p:not(.eyebrow){font-size:16px;line-height:1.8}
html[lang=en] .about-copy>p.about-emphasis{font-size:18px}
html[lang=en] .about-copy .button{font-size:14px}
html[lang=en] .process-header h2{font-size:58px;line-height:1.04}
html[lang=en] .process-header>p{font-size:16px;line-height:1.6}
html[lang=en] .process-panel h3{font-size:42px;line-height:1.04;margin:15px 0}
html[lang=en] .process-panel p{font-size:16px;line-height:1.65}
html[lang=en] .process-nav button{text-align:left;font-size:14px}
html[lang=en] .outcome{border-right:0;border-left:2px solid var(--blue);padding-right:0;padding-left:15px;font-size:14px;line-height:1.65}
html[lang=en] .film-copy{right:auto;left:6vw}
html[lang=en] .film-copy h2{font-size:clamp(65px,7vw,108px);line-height:1.02;letter-spacing:0}
html[lang=en] .film-shade{background:linear-gradient(90deg,#030609dc,#03060920),linear-gradient(0deg,#03060988,transparent)}
html[lang=en] .film-play{text-align:left}
html[lang=en] .motion-toggle{left:auto;right:25px}
html[lang=en] .faq-section h2{font-size:clamp(58px,6vw,86px);line-height:1.03}
html[lang=en] .faq-list summary{font-size:16px}
html[lang=en] .faq-list p{font-size:15px;line-height:1.8}
html[lang=en] .contact-photo{inset:0 0 0 50%}
html[lang=en] .contact-photo:after{background:linear-gradient(90deg,#06111a,transparent 55%),linear-gradient(0deg,#06111a,transparent 60%)}
html[lang=en] .contact-copy h2{font-size:clamp(66px,6vw,96px);line-height:1.06;letter-spacing:0}
html[lang=en] .manifesto-copy h2{font-size:clamp(82px,8vw,128px);line-height:.98;letter-spacing:0}
html[lang=en] .manifesto-copy h2 em{line-height:1.03;font-size:1.13em;margin-top:6px}
html[lang=en] .old-marketing:after{transform-origin:left}
html[lang=en] .manifesto-copy>p{font-size:18px;line-height:1.6}
html[lang=en] .marketing-film-bar{font-size:12px;gap:12px}
html[lang=en] .marketing-film-bar>div{gap:12px}
html[lang=en] .marketing-film-bar button{border-right:0;border-left:1px solid #2b4252;padding:0 0 0 12px}
html[lang=en] dialog h2{font-size:52px;line-height:1.05;margin-top:18px}
html[lang=en] #video-dialog .close-dialog{margin-right:0;margin-left:auto}
html[lang=en] .scroll-progress{transform-origin:left}
@media(max-width:1100px){.site-header{gap:16px}.site-header nav{gap:18px}html[lang=ar] .hero h1{font-size:59px}html[lang=ar] .hero-intro{font-size:18px}html[lang=en] .hero h1{font-size:88px}html[lang=en] .hero-content{width:65%}html[lang=en] .hero-photo{left:28%;right:-7%}html[lang=en] .hero-intro{font-size:16px}html[lang=en] .site-header nav{gap:17px}html[lang=en] .service-top h3{font-size:40px}html[lang=en] .service-bottom p{font-size:14px;min-height:112px}html[lang=en] .service-bottom .button{font-size:12px}html[lang=en] .process-header h2{font-size:48px}html[lang=en] .process-panel h3{font-size:34px}html[lang=en] .process-panel p{font-size:15px}html[lang=en] .marketing-film-bar>div>[lang=en]{display:none}}
@media(min-width:801px) and (max-width:1000px){.site-header{height:76px}.site-header nav,html[lang=en] .site-header nav{display:none;position:absolute;top:76px;right:0;left:0;margin:0;padding:22px 6vw;background:#06111b;border-top:1px solid #223b4a;flex-direction:column;align-items:stretch;gap:10px}.site-header nav.open{display:flex}html[lang=en] .site-header nav.open{display:flex}.site-header nav a{padding:10px 0;font-size:16px}#menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:7px;background:none;border:0;padding:9px;width:34px;height:34px}#menu-toggle span{height:2px;width:22px;background:white}.site-header .brand{margin-inline-end:auto}html[lang=ar] .hero h1{font-size:52px}html[lang=en] .hero h1{font-size:76px}}
@media(max-width:800px){
 .site-header{gap:13px}.site-header .brand{margin-inline-end:auto}.header-cta{margin:0}.language-switch{min-height:38px;min-width:46px;font-size:12px!important}.site-header nav{font-weight:700}
 html[lang=ar] .wordmark{font-size:24px}html[lang=ar] .hero h1{font-size:clamp(40px,7.5vw,64px);line-height:1.6}html[lang=ar] .hero-intro{font-size:18px}html[lang=ar] .hero-eyebrow{font-size:13px}html[lang=ar] .about-copy h2{font-size:37px;line-height:1.6}html[lang=ar] .contact-copy h2{font-size:37px;line-height:1.65}html[lang=ar] .manifesto-copy h2{font-size:clamp(32px,7vw,54px)}html[lang=ar] .manifesto-copy h2 .old-marketing{margin-right:10px}
 html[lang=en] .site-header nav{margin:0;font-size:16px;gap:10px}html[lang=en] .hero{min-height:860px}html[lang=en] .hero-photo{inset:0 0 auto;height:620px}html[lang=en] .hero-vignette{background:linear-gradient(0deg,#030609 0%,#030609 23%,#030609cb 37%,#03060910 61%,transparent 90%)}html[lang=en] .hero-content{width:100%;padding:355px 6vw 95px}html[lang=en] .hero h1{font-size:clamp(64px,10vw,90px);line-height:1.01;margin:18px 0}html[lang=en] .hero-intro{font-size:16px;line-height:1.7}html[lang=en] .hero-eyebrow{font-size:11px}html[lang=en] .hero-bottom{font-size:10px}html[lang=en] .hero-bottom i{margin:0 5px}html[lang=en] .section-heading h2{font-size:54px}html[lang=en] .service-top h3{font-size:50px}html[lang=en] .service-bottom p{font-size:16px;min-height:0}html[lang=en] .service-bottom .button{font-size:14px}html[lang=en] .about-copy h2{font-size:66px}html[lang=en] .process-header h2{font-size:46px}html[lang=en] .process-panel h3{font-size:33px}html[lang=en] .process-panel p{font-size:15px}html[lang=en] .process-nav button{font-size:12px;gap:8px}html[lang=en] .outcome{font-size:13px}html[lang=en] .film-copy{left:6vw;right:6vw}html[lang=en] .film-copy h2{font-size:66px}html[lang=en] .faq-section h2{font-size:64px}html[lang=en] .contact-photo{inset:0 0 auto;height:520px}html[lang=en] .contact-photo:after{background:linear-gradient(0deg,#06111a 0%,#06111a00 65%)}html[lang=en] .contact-copy h2{font-size:68px}html[lang=en] .copyright{text-align:left}html[lang=en] .manifesto-copy h2{font-size:72px;line-height:1}html[lang=en] .manifesto-copy h2 em{font-size:1.28em}html[lang=en] .manifesto-copy h2 .old-marketing{margin-right:12px}html[lang=en] .manifesto-heading{gap:8px}html[lang=en] .manifesto-heading .eyebrow{font-size:12px}
}
@media(max-width:580px){.header-cta{display:none}.site-header .brand{margin-inline-end:auto}.site-header{gap:14px}.language-switch{padding:5px 9px}html[lang=en] .wordmark{font-size:32px}}
@media(max-width:460px){html[lang=ar] .hero h1{font-size:39px}html[lang=ar] .hero-intro{font-size:17px}html[lang=ar] .section-heading h2{font-size:31px}html[lang=ar] .about-copy h2{font-size:31px}html[lang=ar] .contact-copy h2{font-size:32px}html[lang=ar] .process-header h2{font-size:28px}html[lang=ar] .process-panel h3{font-size:24px}html[lang=ar] .film-copy h2{font-size:32px}html[lang=ar] .manifesto-copy h2{font-size:32px}.hero-bottom a>[lang=ar]{display:none}html[lang=en] .hero{min-height:850px}html[lang=en] .hero-photo{height:535px}html[lang=en] .hero-content{padding-top:325px}html[lang=en] .hero h1{font-size:62px}html[lang=en] .hero-eyebrow{font-size:10px}html[lang=en] .hero-intro{font-size:15px}html[lang=en] .hero-actions .button{font-size:13px}html[lang=en] .hero-actions{gap:16px}html[lang=en] .hero-bottom{font-size:9px}html[lang=en] .about-copy h2{font-size:58px}html[lang=en] .process-header h2{font-size:41px}html[lang=en] .process-panel h3{font-size:30px}html[lang=en] .process-panel p{font-size:14px}html[lang=en] .process-nav{gap:8px}html[lang=en] .process-nav button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:11px}html[lang=en] .process-nav button span{font-size:10px}html[lang=en] .film-copy h2{font-size:56px}html[lang=en] .contact-copy h2{font-size:60px}html[lang=en] .manifesto-copy h2{font-size:61px}html[lang=en] .marketing-film-bar{font-size:10px}html[lang=en] .marketing-film-bar>span{gap:6px}html[lang=en] .marketing-film-bar button{font-size:10px;padding-left:9px}html[lang=en] .preview-note{font-size:10px}}
@media(min-width:801px) and (max-height:750px){html[lang=en] .process-header h2{font-size:41px}html[lang=en] .process-panel h3{font-size:31px}html[lang=en] .process-panel p{font-size:14px}html[lang=en] .outcome{font-size:12px}html[lang=en] .process-header .eyebrow{font-size:11px}html[lang=en] .process-nav button{padding:10px 0}html[lang=ar] .process-header h2{font-size:30px}html[lang=ar] .process-panel h3{font-size:25px}}
@media(prefers-reduced-motion:reduce){html[lang=en] .old-marketing:after{transform:rotate(-9deg) scaleX(1)}}
@media(max-width:460px){html[lang=en] .hero h1{font-size:clamp(43px,13.4vw,60px)}}