/* Loaded only for Arabic, Sorani and Badini pages (html[dir=rtl]).
   Arabic-script type, mirrored positions and larger small print. */
@font-face{font-family:'Noto Kufi Arabic';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/noto-kufi-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Noto Sans Arabic';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/noto-sans-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
/* Kufi for headings and interface, Noto Sans Arabic for running text. */
:root{--sans:'Noto Kufi Arabic','Space Grotesk',sans-serif;--body:'Noto Sans Arabic','Inter',sans-serif}
html[dir=rtl] .desktop-nav a,html[dir=rtl] .nav-contact,html[dir=rtl] .lang-switch,html[dir=rtl] .button,html[dir=rtl] .text-link,html[dir=rtl] .eyebrow,html[dir=rtl] .edition,html[dir=rtl] .section-top,html[dir=rtl] .filter,html[dir=rtl] .film-top,html[dir=rtl] .film-bottom,html[dir=rtl] .image-label,html[dir=rtl] .mobile-lang a,html[dir=rtl] .footer-lang,html[dir=rtl] .hero-start-link,html[dir=rtl] .scroll-note,html[dir=rtl] .form-grid>label{font-family:var(--sans)}

/* Arabic letters join, so tracking is removed everywhere except Latin brand marks. */
html[dir=rtl] body *:not([dir=ltr]):not([dir=ltr] *){letter-spacing:0!important}
html[dir=rtl] body{font-size:15px}
html[dir=rtl] p{line-height:1.95}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3{font-weight:700}
html[dir=rtl] h2{line-height:1.45}
html[dir=rtl] .section-heading h2,html[dir=rtl] .process-intro h2{font-size:clamp(38px,4.3vw,64px)}
html[dir=rtl] em,html[dir=rtl] .cta-title>span:not(.cta-arrow){font-family:inherit;font-style:normal;font-weight:300}
html[dir=rtl] .hero-title em{font-size:1em}

/* Small print is set larger: Arabic script needs more size to stay legible. */
html[dir=rtl] .eyebrow,html[dir=rtl] .edition,html[dir=rtl] .section-top,html[dir=rtl] .scroll-note,html[dir=rtl] .film-top,html[dir=rtl] .film-bottom,html[dir=rtl] .row-number,html[dir=rtl] .optional,html[dir=rtl] .stage-number,html[dir=rtl] .filter,html[dir=rtl] .services-bottom,html[dir=rtl] .service-excerpt,html[dir=rtl] .demo-disclosure,html[dir=rtl] .intro-bottom .demo-disclosure,html[dir=rtl] .form-footnote,html[dir=rtl] .project-caption p,html[dir=rtl] .project-caption>span,html[dir=rtl] .upload-zone>span:not(.upload-icon),html[dir=rtl] .form-grid .optional,html[dir=rtl] .form-section-title>span,html[dir=rtl] .footer-contact,html[dir=rtl] .footer-links,html[dir=rtl] .film-play,html[dir=rtl] .hero-start-link,html[dir=rtl] .gallery figcaption,html[dir=rtl] .comparison-before-label,html[dir=rtl] .comparison-after-label{font-size:12px}
html[dir=rtl] .image-label,html[dir=rtl] .demo-tag,html[dir=rtl] .footer-bottom,html[dir=rtl] .studio-caption,html[dir=rtl] .service-card-image>span{font-size:11px}
html[dir=rtl] .desktop-nav a,html[dir=rtl] .nav-contact,html[dir=rtl] .lang-switch,html[dir=rtl] .button,html[dir=rtl] .text-link,html[dir=rtl] .hero-bottom>p,html[dir=rtl] .section-heading p,html[dir=rtl] .film-copy p,html[dir=rtl] .process-intro>p,html[dir=rtl] .process-stage p,html[dir=rtl] .studio-story p,html[dir=rtl] .cta-bottom>p,html[dir=rtl] .service-card p,html[dir=rtl] .contact-section aside p,html[dir=rtl] .contact-section aside>a,html[dir=rtl] .form-grid>label,html[dir=rtl] .consent,html[dir=rtl] .upload-zone>strong,html[dir=rtl] .quote-form small[data-error]{font-size:14px}
html[dir=rtl] .intro-bottom p,html[dir=rtl] .detail-body p,html[dir=rtl] .about-editorial p,html[dir=rtl] .privacy-body p,html[dir=rtl] .form-message,html[dir=rtl] .form-grid input,html[dir=rtl] .form-grid textarea,html[dir=rtl] .form-grid select{font-size:15px}
html[dir=rtl] .agency-credit strong{font-size:11px;margin-left:0;margin-right:9px}
html[dir=rtl] .hero-bottom>p{max-width:380px}
html[dir=rtl] .service-excerpt{width:230px}

/* Display type: looser leading for ascenders, descenders and marks. */
html[dir=rtl] .hero-title{font-size:clamp(46px,6.3vw,110px);font-weight:800;line-height:1.5}
html[dir=rtl] .hero-title>span{white-space:normal}
html[dir=rtl] .hero-asterisk{right:auto;left:4.2%;top:14%}
html[dir=rtl] .title-period{margin:12px 15px 0 0}
html[dir=rtl] .film-copy{left:auto;right:5.25%}
html[dir=rtl] .film-copy h2{font-size:clamp(42px,5.6vw,86px);font-weight:800;line-height:1.45}
html[dir=rtl] .marquee-track{animation-name:marquee-scroll-rtl}
html[dir=rtl] .marquee-group{font-weight:700}
@keyframes marquee-scroll-rtl{to{transform:translateX(50%)}}
html[dir=rtl] .cta-title{font-size:clamp(46px,6.6vw,108px);font-weight:800;line-height:1.45}
html[dir=rtl] .page-intro h1{font-size:clamp(46px,6.3vw,98px);line-height:1.45}
html[dir=rtl] .detail-intro h1{font-size:clamp(42px,5.2vw,82px)}
html[dir=rtl] .studio-story h2{line-height:1.3}
html[dir=rtl] .service-row h3,html[dir=rtl] .process-stage h3,html[dir=rtl] .service-card h2,html[dir=rtl] .project-caption h3,html[dir=rtl] .form-section-title h3,html[dir=rtl] .privacy-body h3{line-height:1.45}
html[dir=rtl] .contact-section aside h2,html[dir=rtl] .comparison-section h2{line-height:1.35}
html[dir=rtl] .mobile-nav>a{font-size:30px;font-weight:700;line-height:1.6}
html[dir=rtl] .empty-state{line-height:1.6}

/* Mirrored positions. */
html[dir=rtl] .skip-link{left:auto;right:20px}
html[dir=rtl] .desktop-nav a:after,html[dir=rtl] .film-progress span,html[dir=rtl] .loader-line{transform-origin:right}
html[dir=rtl] .icon--arrow-up-right,html[dir=rtl] .icon--arrow-left,html[dir=rtl] .icon--arrow-right{transform:scaleX(-1)}
html[dir=rtl] .filter sup{margin-left:0;margin-right:4px}
html[dir=rtl] .project-open{right:auto;left:20px}
html[dir=rtl] .image-label{left:auto;right:18px}
html[dir=rtl] .service-row>img{right:auto;left:27%}
html[dir=rtl] .service-row:hover .row-arrow{transform:translate(-5px,-5px)}
html[dir=rtl] .process-stage p{padding:0 45px 30px 30px}
html[dir=rtl] .cta-arrow{right:auto;left:0}
html[dir=rtl] .cta-title:hover .cta-arrow{transform:translate(-7px,-7px)}
html[dir=rtl] .service-card-image>span{left:auto;right:18px}
html[dir=rtl] .footer-wordmark{justify-content:flex-end}
html[dir=rtl] .mobile-nav small{text-align:right}
html[dir=rtl] .form-grid .optional{float:left}
html[dir=rtl] .form-grid select{padding-right:0;padding-left:20px}
html[dir=rtl] .form-grid input[type=email],html[dir=rtl] .form-grid input[type=tel],html[dir=rtl] .form-grid input[type=number]{direction:ltr;text-align:right}
html[dir=rtl] .form-message{border-left:0;border-right:3px solid #bd5100}
html[dir=rtl] .form-message.success{border-color:#526c3a}

@media(max-width:1000px){
html[dir=rtl] .hero-title{font-size:6.6vw}
html[dir=rtl] .hero-asterisk{left:0}
html[dir=rtl] .service-excerpt{width:190px}
}
@media(max-width:700px){
html[dir=rtl] body{font-size:15px}
html[dir=rtl] .eyebrow,html[dir=rtl] .section-top,html[dir=rtl] .film-top,html[dir=rtl] .film-bottom,html[dir=rtl] .demo-disclosure,html[dir=rtl] .intro-bottom .demo-disclosure,html[dir=rtl] .project-caption p,html[dir=rtl] .services-bottom,html[dir=rtl] .form-grid .optional{font-size:11px}
html[dir=rtl] .image-label,html[dir=rtl] .footer-bottom,html[dir=rtl] .demo-tag,html[dir=rtl] .studio-caption,html[dir=rtl] .agency-credit{font-size:10px}
html[dir=rtl] .nav-contact{font-size:13px;margin-right:0}
html[dir=rtl] .menu-toggle{margin-right:0;margin-left:-12px}
html[dir=rtl] .hero-title{font-size:9vw;line-height:1.5}
html[dir=rtl] .hero-title>span:first-child{font-size:1em}
html[dir=rtl] .hero-asterisk{font-size:.69em;left:0;top:22%}
html[dir=rtl] .title-period{margin:5px 5px 0 0}
html[dir=rtl] .hero-bottom>p,html[dir=rtl] .section-heading p,html[dir=rtl] .process-intro>p,html[dir=rtl] .process-stage p,html[dir=rtl] .cta-bottom>p,html[dir=rtl] .service-card p,html[dir=rtl] .intro-bottom p,html[dir=rtl] .contact-section aside p,html[dir=rtl] .detail-body p,html[dir=rtl] .about-editorial p,html[dir=rtl] .privacy-body p{font-size:14px}
html[dir=rtl] .hero-bottom>.button,html[dir=rtl] .cta-bottom>.button,html[dir=rtl] .work-gallery>.button,html[dir=rtl] .film-play{font-size:13px}
html[dir=rtl] .film-copy{right:6%}
html[dir=rtl] .film-copy h2{font-size:10vw}
html[dir=rtl] .film-copy p{font-size:13px}
html[dir=rtl] .section-heading h2,html[dir=rtl] .process-intro h2,html[dir=rtl] .studio-story h2{font-size:34px}
html[dir=rtl] .service-row h3{font-size:23px}
html[dir=rtl] .process-stage h3{font-size:26px}
html[dir=rtl] .process-stage p{padding:0 42px 25px 10px}
html[dir=rtl] .cta-title{font-size:9.6vw}
html[dir=rtl] .page-intro h1{font-size:10vw}
html[dir=rtl] .detail-intro h1{font-size:9vw}
html[dir=rtl] .project-open{left:14px}
html[dir=rtl] .image-label{right:12px}
html[dir=rtl] .footer-bottom>a,html[dir=rtl] .agency-credit{text-align:left}
html[dir=rtl] .agency-credit strong{font-size:10px;margin-right:4px}
html[dir=rtl] .footer-contact,html[dir=rtl] .footer-links{font-size:12px}
html[dir=rtl] .mobile-nav>a{font-size:27px}
html[dir=rtl] .form-grid input,html[dir=rtl] .form-grid textarea,html[dir=rtl] .form-grid select{font-size:16px}
}
html[dir=rtl] .service-row>video{right:auto;left:27%}
html[dir=rtl] .faq-item h3{line-height:1.6}html[dir=rtl] .faq-item p{font-size:15px;padding:0 0 24px 40px}html[dir=rtl] .faq>.eyebrow{font-size:12px}
html[dir=rtl] .footer-brand{align-items:flex-end}
html[dir=rtl] .work-gallery.is-horizontal .project-image>img,html[dir=rtl] .work-gallery.is-horizontal .project-image>video{left:auto;right:-12%}
html[dir=rtl] .work-gallery.is-horizontal .project-caption h3{line-height:1.4;font-size:clamp(32px,4.6vw,76px)}
html[dir=rtl] .work-gallery.is-horizontal .project-caption p{font-size:13px}
html[dir=rtl] .work-gallery.is-horizontal .filter{font-size:13px}
@media(max-width:700px){html[dir=rtl] .work-gallery.is-horizontal .project-caption h3{font-size:clamp(26px,8vw,38px)}}
