/* Bright Arabic companion. Load after the existing production styles.
   The animation's physical coordinates, artwork and branded wordmarks stay intact. */
@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url("/static/noto-sans-arabic-regular.20260912.woff") format("woff")}
@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url("/static/noto-sans-arabic-bold.20260912.woff") format("woff")}

/* The one shared component also appears on English pages. */
.bright-language-switch{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;min-height:44px;min-width:44px;padding:5px 10px;border:1px solid #626954;border-radius:24px;color:inherit;text-decoration:none;font:400 13px/1.6 "Noto Sans Arabic",Manrope,Arial,sans-serif;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.bright-language-switch:hover{border-color:#dfff00;color:#dfff00}
.bright-language-switch:focus-visible{outline:2px solid #dfff00;outline-offset:4px}
.site-menu-top .bright-language-switch{margin-inline-start:auto}
.site-footer .bright-language-switch{padding:4px 10px;min-height:40px;font-family:"Noto Sans Arabic",Manrope,Arial,sans-serif}

html[lang="ar"]{--bright-ar-font:"Noto Sans Arabic",Tahoma,Arial,sans-serif}
html[lang="ar"] body,
html[lang="ar"] :is(.site-masthead,.site-menu,.site-footer,.site-context-link,.site-study-links,.site-toast,.ip-toast,.toast,.delivery-receipt h2,.boot-skip),
html[lang="ar"] :is(button,input,textarea,select){font-family:var(--bright-ar-font)}
html[lang="ar"] body{direction:rtl;text-align:start}
html[lang="ar"] :where(h1,h2,h3,h4,h5,p,span,small,strong,em,a,button,label,legend,li,summary,div){letter-spacing:normal!important;text-transform:none}
html[lang="ar"] :where(p,li){line-height:1.85}
html[lang="ar"] :is(h1,h2,h3,h4){font-style:normal;line-height:1.42;text-wrap:balance}
html[lang="ar"] :is(button,a,input,textarea,select){-webkit-tap-highlight-color:transparent}
html[lang="ar"] :is(a[href^="mailto:"],a[href^="tel:"],input[type="email"],input[type="tel"],input[type="url"],input[name="website"],input[autocomplete="url"],.delivery-reference,.founder-number,[dir="ltr"]){direction:ltr;unicode-bidi:isolate}
html[lang="ar"] :is(input[type="email"],input[type="tel"],input[type="url"],input[name="website"],input[autocomplete="url"]){text-align:left}
html[lang="ar"] :is(input,textarea)::placeholder{line-height:1.65}
html[lang="ar"] :is(code,pre){direction:ltr;unicode-bidi:isolate;text-align:left}

/* Navigation follows Arabic reading order; no extra reversal of flex/grid. */
html[lang="ar"] .site-masthead{gap:clamp(22px,4vw,64px)}
html[lang="ar"] .site-masthead .site-main-nav{margin-left:0;margin-inline-start:auto;gap:clamp(14px,1.8vw,27px)}
html[lang="ar"] .site-masthead .site-note{font-size:12px;line-height:1.8}
html[lang="ar"] .site-masthead .site-motion{font-size:12px;line-height:1.6}
html[lang="ar"] .site-masthead .site-nav-link{font-size:14px}
html[lang="ar"] #navigation.site-menu .site-menu-links a{font-size:clamp(25px,2.8vw,43px);line-height:1.65;padding-block:10px}
html[lang="ar"] #navigation.site-menu .site-menu-links a small{margin-right:0;margin-inline-end:10px;direction:ltr;unicode-bidi:isolate}
html[lang="ar"] #navigation.site-menu .site-menu-links a:is(:hover,[aria-current="page"]){transform:translateX(-3px)}
html[lang="ar"] .site-menu .site-menu-caption{line-height:1.8}
html[lang="ar"] .site-menu .site-menu-aside p{line-height:1.9}
html[lang="ar"] .site-footer{line-height:1.8}
html[lang="ar"] .site-footer .site-legal{font-family:Manrope,Arial,sans-serif;direction:ltr;unicode-bidi:isolate;text-align:right}
html[lang="ar"] .site-context-link a{white-space:normal}
html[lang="ar"] .site-home-explore>p{max-width:300px}
html[lang="ar"] :is(.site-toast,.ip-toast,.toast){line-height:1.8}
html[lang="ar"] .status-dot{margin-right:0;margin-inline-end:11px}
html[lang="ar"] .bright-arrow:is([data-bright-arrow="ne"],[data-bright-arrow="right"],[data-bright-arrow="left"]){scale:-1 1}

/* Interior pages: generous Arabic line boxes and logical alignment. */
html[lang="ar"] .ip-hero h1{font-size:clamp(42px,6.35vw,104px);line-height:1.42;max-width:1350px}
html[lang="ar"] .portfolio-case .ip-hero h1,
html[lang="ar"] .bright-inner[data-route="/ar/projects/"] .ip-hero h1{font-size:clamp(40px,5.4vw,88px);line-height:1.45}
html[lang="ar"] .ip-hero-bottom>p{line-height:1.95}
html[lang="ar"] .ip-breadcrumb{flex-wrap:wrap;align-items:center;line-height:1.8}
html[lang="ar"] :is(.ip-section-head h2,.ip-purpose h2,.ip-start-intro h2,.ip-sticky-title h2,.ip-contact-aside h2,.work-section-head h2,.case-direction h2,.case-context h2,.service-selected-work h2){font-size:clamp(30px,3.65vw,59px);line-height:1.48}
html[lang="ar"] :is(.ip-service-row h3,.work-card-title h2){font-size:clamp(27px,2.9vw,44px);line-height:1.55}
html[lang="ar"] :is(.ip-start-result h3,.ip-step>h3,.ip-deliverable h3,.ip-principles h3,.ip-perspective-panel h3,.ip-journey-copy>h3,.ip-work-content h3,.case-focus-grid h3,.founder-story h3){line-height:1.5}
html[lang="ar"] :is(.eyebrow,.work-kicker,.mini-eyebrow,.ip-live-label,.ip-service-tags span,.work-meta span,.case-tags span){line-height:1.8}
html[lang="ar"] :is(.outline-button,.solid-button,.text-link,.ip-start-buttons>button,.ip-button-set button,.ip-service-tags span,.work-meta span,.case-tags span){max-width:100%;white-space:normal;line-height:1.75}
html[lang="ar"] :is(.outline-button,.solid-button){text-align:start;gap:22px}
html[lang="ar"] :is(.outline-button,.solid-button) .bright-arrow{flex-shrink:0}
html[lang="ar"] :is(.ip-demo-nav>button,.ip-product-tabs button,.ip-journey-steps>button,.ip-perspective-tabs button,.ip-process-index>button,.study-open,.delivery-fallback){text-align:start}
html[lang="ar"] .ip-process-index>button>i{margin-left:0;margin-inline-start:auto}
html[lang="ar"] .ip-process-index>button:after{transform-origin:right}
html[lang="ar"] .ip-hero-bottom .ip-down{margin-left:0;margin-inline-start:auto}
html[lang="ar"] .work-section-nav .work-return{margin-left:0;margin-inline-start:auto}
html[lang="ar"] .work-action{right:auto;left:20px;max-width:calc(100% - 40px);text-align:start;line-height:1.65}
html[lang="ar"] .ip-case-end>div:last-child{border-left:0;border-inline-start:1px solid #4c5d3b;padding-left:0;padding-inline-start:40px}
html[lang="ar"] :is(.ip-task-detail ul,.ip-work-delivery ul){padding-left:0;padding-inline-start:20px}
html[lang="ar"] .founder-intro h2{font-size:clamp(45px,5.2vw,82px);line-height:1.4}
html[lang="ar"] .founder-number{font-family:Manrope,Arial,sans-serif;line-height:1.2}
html[lang="ar"] .founder-story .founder-principle{border-left:0;border-inline-start:2px solid #dfff00;padding:5px 24px 5px 0;line-height:1.9!important}
html[lang="ar"] .closing-cta{font-size:clamp(44px,7.8vw,125px);line-height:1.5;padding-inline-end:1.2em}
html[lang="ar"] .closing-cta i{right:auto;left:1%;top:12%;font-size:.9em}
html[lang="ar"] .closing-cta:hover i{transform:translate(-15px,-15px)}
html[lang="ar"] .ip-reading h2{line-height:1.55}
html[lang="ar"] .ip-reading :is(p,li){line-height:2}

/* Forms: preserve the actual value format for contact coordinates and URLs. */
html[lang="ar"] .ip-contact-aside h2{font-size:clamp(27px,2.9vw,43px);line-height:1.65}
html[lang="ar"] .ip-contact-note{border-left:0;border-inline-start:2px solid var(--citron);padding:3px 18px 3px 0}
html[lang="ar"] .ip-contact-form legend{font-size:22px;line-height:1.75;align-items:baseline}
html[lang="ar"] .ip-contact-form legend>span{direction:ltr;unicode-bidi:isolate}
html[lang="ar"] .choice-chips label{max-width:100%}
html[lang="ar"] .choice-chips label>span{max-width:100%;font-size:13px;line-height:1.8;padding:10px 16px;white-space:normal}
html[lang="ar"] .line-input label{line-height:1.8;align-items:baseline;gap:12px}
html[lang="ar"] .line-input label>span{flex-shrink:0}
html[lang="ar"] .line-input :is(input,textarea,select){line-height:1.75}
html[lang="ar"] .line-input textarea{direction:rtl;text-align:start;unicode-bidi:plaintext}
html[lang="ar"] :is(.form-help,.contact-actions>p,.ip-contact-privacy,.contact-delivery-note,.delivery-receipt p){line-height:1.95}
html[lang="ar"] .attachment-button{line-height:1.9;white-space:normal}
html[lang="ar"] .attachment-area li>span{unicode-bidi:plaintext}
html[lang="ar"] .delivery-receipt h2{line-height:1.5}
html[lang="ar"] .result-actions{flex-wrap:wrap}
/* The consent UI injects its own late ID selectors. Keep Arabic line boxes
   readable and both choices large enough to activate on a touch screen. */
html[lang="ar"] #bright-analytics-consent p{min-width:0;line-height:1.8}
html[lang="ar"] #bright-analytics-consent button{min-height:44px;line-height:1.7;white-space:normal}

/* Inner-page demonstrations retain artwork orientation while their UI follows RTL. */
html[lang="ar"] .ip-demo-nav{right:auto;left:22px}
html[lang="ar"] .ip-site-content h3{font-size:clamp(23px,3.7cqw,35px);line-height:1.55}
html[lang="ar"] .ip-product>aside{border-radius:0 15px 15px 0}
html[lang="ar"] .ip-product-body{border-radius:15px 0 0 15px}
html[lang="ar"] .ip-product-body>h3{font-size:30px;line-height:1.55}
html[lang="ar"] .ip-product-tabs button{line-height:1.8}
html[lang="ar"] .ip-journey-steps>button{font-size:clamp(19px,2.1vw,31px);line-height:1.55}
html[lang="ar"] .ip-process-index>button{font-size:clamp(22px,2.4vw,35px);line-height:1.6}

/* The homepage's scene/texture coordinates are authored in LTR pixels. Do not
   mirror the canvas, move the editorial column, or reverse the study-slot grid. */
html[lang="ar"] :is(.bright-boot,.stage,.surface-overlay,.surface-inner,.study-dock){direction:ltr}
html[lang="ar"] .boot-phrase{font-family:Manrope,Arial,sans-serif;direction:ltr}
html[lang="ar"] .boot-skip{direction:rtl;left:max(5%,env(safe-area-inset-left));right:auto;font-size:12px;line-height:1.8}
html[lang="ar"] :is(.editorial,.scene-caption,.assembly-monitor,.surface-indicator,.chapters,.signature-dock,.study-heading,.study-context,.study-view-tabs,.study-open,.study-mobile-disclosure,.study-dock .section-top,.study-dialog-body,.dialog-top){direction:rtl;text-align:start}
html[lang="ar"] .copy h1,
html[lang="ar"] .copy h2,
html[lang="ar"] .copy[data-scene="2"] h2,
html[lang="ar"] .copy[data-scene="3"] h2{font-size:clamp(40px,4.6vw,74px);line-height:1.4}
html[lang="ar"] .copy :is(.intro,.body-copy){line-height:1.85;margin-block:18px}
html[lang="ar"] .copy :is(.eyebrow,.small-label,.micro){line-height:1.9}
html[lang="ar"] .copy :is(.intro,.body-copy,.layer-description,.lens-help){margin-inline-start:0;margin-inline-end:auto}
html[lang="ar"] .layer-tabs button{line-height:1.75;text-align:start}
html[lang="ar"] :is(.layer-tabs button span,.lens-state){margin-left:0;margin-inline-start:auto}
html[lang="ar"] .layer-description{line-height:1.85}
html[lang="ar"] .lens-tools>button{line-height:1.7}
html[lang="ar"] .lens-presets{direction:ltr}
html[lang="ar"] .mode-tabs button{line-height:1.7}
html[lang="ar"] .stage .chapters a{font-size:12px;line-height:1.65;gap:8px}
html[lang="ar"] .chapters i{left:auto;right:0}
html[lang="ar"] :is(.assembly-track span,.chapters a span){unicode-bidi:isolate}
html[lang="ar"] :is(#assembly-status,.stage #renderer-status){text-align:end}
html[lang="ar"] .study-dock .study-heading h2{font-size:clamp(30px,3.05vw,48px);line-height:1.4}
html[lang="ar"] .study-dock .study-heading p{line-height:1.85}
html[lang="ar"] .study-context h3{font-size:28px;line-height:1.55}
html[lang="ar"] .study-dock .study-view-tabs button{line-height:1.75}
html[lang="ar"] .study-dock .study-open{line-height:1.75;text-align:start}
html[lang="ar"] .signature-dock .closing-top a{text-align:end}
html[lang="ar"] .signature-caption p{line-height:1.9}
html[lang="ar"] .study-dialog-body h2{font-size:clamp(31px,4.6vw,66px);line-height:1.45}
html[lang="ar"] .study-dialog-body h3{line-height:1.6}

/* Text within the live surface is translated without flipping poster imagery. */
html[lang="ar"] :is(.web-ui,.brand-ui,.product-content,.product-ui aside){direction:rtl;text-align:start}
html[lang="ar"] .product-ui{direction:ltr}
html[lang="ar"] .demo-header>span{margin-left:0;margin-inline-start:28px}
html[lang="ar"] .demo-header>div{margin-left:0;margin-inline-start:auto}
html[lang="ar"] .demo-copy h3{font-size:51px;line-height:1.5;margin-block:25px 21px}
html[lang="ar"] .demo-copy p{font-size:17px;line-height:1.8;margin-bottom:30px}
html[lang="ar"] .demo-copy .demo-study{width:230px;align-items:center;line-height:1.75}
html[lang="ar"] #demo-menu button{line-height:1.75;text-align:start}
html[lang="ar"] .product-ui aside b{margin-left:0;margin-inline-start:10px}
html[lang="ar"] .product-content h3{font-size:34px;line-height:1.5;max-width:62%}
html[lang="ar"] .task-progress{right:auto;left:42px;text-align:start;line-height:1.7}
html[lang="ar"] .task{font-size:14px;line-height:1.75;text-align:start}
html[lang="ar"] .product-note{right:43px;left:auto;line-height:1.7}
html[lang="ar"] .brand-ui header{line-height:1.8}
html[lang="ar"] .brand-types{line-height:1.9;font-size:17px}
html[lang="ar"] .brand-spec p{line-height:1.9}
html[lang="ar"] .brand-ui footer{line-height:1.8}

@media(max-width:1200px){
 html[lang="ar"] .site-masthead .site-note{display:none}
 html[lang="ar"] .copy h1,html[lang="ar"] .copy h2,html[lang="ar"] .copy[data-scene="2"] h2,html[lang="ar"] .copy[data-scene="3"] h2{font-size:clamp(34px,4.6vw,58px)}
}
@media(max-width:800px){
 .site-masthead .bright-language-switch{font-size:12px;padding:4px 8px;min-width:40px}
 html[lang="ar"] .site-masthead .site-main-nav{gap:12px}
 html[lang="ar"] .site-masthead .site-motion{font-size:11px;padding:8px 10px;gap:7px}
 html[lang="ar"] .site-masthead .site-menu-toggle{min-width:24px}
 html[lang="ar"] #navigation.site-menu .site-menu-links a{font-size:27px;line-height:1.6;min-height:52px;padding-block:10px}
 html[lang="ar"] .site-menu .site-menu-top{gap:12px}
 html[lang="ar"] .ip-hero h1,html[lang="ar"] .portfolio-case .ip-hero h1,html[lang="ar"] .bright-inner[data-route="/ar/projects/"] .ip-hero h1{font-size:clamp(34px,7.8vw,60px);line-height:1.5}
 html[lang="ar"] :is(.ip-section-head h2,.ip-purpose h2,.ip-start-intro h2,.ip-sticky-title h2,.work-section-head h2,.case-direction h2,.case-context h2,.service-selected-work h2){font-size:clamp(29px,6.5vw,42px);line-height:1.55}
 html[lang="ar"] .closing-cta{font-size:clamp(35px,8vw,61px);line-height:1.6}
 html[lang="ar"] .copy h1,html[lang="ar"] .copy h2,html[lang="ar"] .copy[data-scene="2"] h2,html[lang="ar"] .copy[data-scene="3"] h2{font-size:clamp(32px,8.2vw,53px);line-height:1.45}
 html[lang="ar"] .copy :is(.intro,.body-copy){font-size:13px;line-height:1.85;margin-block:11px}
 html[lang="ar"] .copy .eyebrow{font-size:10px;margin-bottom:11px}
 html[lang="ar"] .copy[data-scene="2"] .layer-description{font-size:12px;line-height:1.7;margin-block:8px}
 html[lang="ar"] .layer-tabs button{font-size:11px;gap:5px;line-height:1.65}
 html[lang="ar"] .lens-help{font-size:10px;line-height:1.7}
 html[lang="ar"] .mode-tabs button{font-size:12px;padding:8px 13px}
 html[lang="ar"] .stage .chapters a{font-size:10px;gap:3px;line-height:1.7}
 html[lang="ar"] .study-dock .study-heading h2{font-size:clamp(27px,6.5vw,39px);line-height:1.45}
 html[lang="ar"] .study-dock .study-heading p{font-size:12px;line-height:1.7}
 html[lang="ar"] .study-dock .study-heading p br{display:none}
 html[lang="ar"] .study-dock .study-open{font-size:12px}
 html[lang="ar"] .study-dock .study-view-tabs{gap:22px}
 html[lang="ar"] .study-dock .study-view-tabs button{font-size:12px}
 html[lang="ar"] .study-mobile-disclosure{line-height:1.7}
 html[lang="ar"] .signature-caption p{font-size:14px}
 html[lang="ar"] .demo-copy h3{font-size:32px;line-height:1.5;margin-block:15px}
 html[lang="ar"] .demo-copy p{font-size:15px;line-height:1.75;margin-bottom:18px}
 html[lang="ar"] .demo-copy .demo-study{font-size:15px;line-height:1.7;min-height:62px;width:225px}
 html[lang="ar"] .demo-header button{font-size:17px}
 html[lang="ar"] .product-content h3{font-size:27px;line-height:1.5;margin-block:17px 10px;max-width:100%}
 html[lang="ar"] .task-progress{left:24px;top:18px;font-size:10px;width:145px}
 html[lang="ar"] .product-content .demo-eyebrow{max-width:54%;line-height:1.7}
 html[lang="ar"] .product-content>p:not(.demo-eyebrow){font-size:13px;line-height:1.65}
 html[lang="ar"] .task{font-size:12px;line-height:1.7}
 html[lang="ar"] .task-columns>div>span{font-size:12px;line-height:1.7}
 html[lang="ar"] .brand-types{font-size:13px}
 html[lang="ar"] .brand-spec p{font-size:10px}
 html[lang="ar"] .brand-ui header button{font-size:14px}
}
@media(max-width:700px){
 html[lang="ar"] .work-section-nav .work-return{margin-inline-start:0}
 html[lang="ar"] .work-action{left:12px;right:auto;max-width:calc(100% - 24px);font-size:11px}
 html[lang="ar"] .ip-case-end>div:last-child{border-inline-start:0;padding-inline-start:0}
 html[lang="ar"] .founder-intro h2{font-size:clamp(40px,9vw,59px);line-height:1.45}
 html[lang="ar"] .founder-story h3{font-size:30px;line-height:1.6}
 html[lang="ar"] .ip-contact-aside h2{font-size:29px;line-height:1.6}
 html[lang="ar"] .ip-contact-form legend{font-size:20px;line-height:1.8;gap:12px}
 html[lang="ar"] .choice-chips label>span{font-size:12px;line-height:1.9;padding:9px 13px}
 html[lang="ar"] .line-input :is(input,textarea,select){font-size:16px}
 html[lang="ar"] .attachment-button{font-size:12px}
 html[lang="ar"] .ip-product>aside{border-radius:0 9px 9px 0}
 html[lang="ar"] .ip-product-body{border-radius:9px 0 0 9px}
 html[lang="ar"] .ip-product-body>h3{font-size:23px}
 html[lang="ar"] .ip-journey-steps>button{font-size:clamp(17px,3.8vw,24px)}
 html[lang="ar"] .ip-process-index>button{font-size:clamp(18px,4.2vw,28px);line-height:1.65}
}
@media(max-width:400px){
 .site-masthead .bright-language-switch{font-size:11px;min-width:37px;padding-inline:6px}
 html[lang="ar"] .site-masthead .site-main-nav{gap:8px}
 html[lang="ar"] .site-masthead .site-motion{padding-inline:8px;gap:5px}
 html[lang="ar"] .site-masthead .motion-text{font-size:10px}
 html[lang="ar"] .site-masthead .site-brand{width:84px;flex-basis:84px}
 html[lang="ar"] .site-menu .site-menu-close{padding-inline:13px}
 html[lang="ar"] .copy h1,html[lang="ar"] .copy h2,html[lang="ar"] .copy[data-scene="2"] h2,html[lang="ar"] .copy[data-scene="3"] h2{font-size:31px;line-height:1.4}
 html[lang="ar"] .stage .chapters a{font-size:9px}
 html[lang="ar"] .ip-product-body{border-radius:9px}
}
/* The extra language control must also fit the original English header on
   320px screens: its former 94px logo and 13px nav gaps exceed the usable row. */
@media(max-width:370px){
 header.site-masthead,html[lang="ar"] .site-masthead{gap:12px}
 .site-masthead .site-brand{width:84px;flex-basis:84px}
 .site-masthead .site-main-nav{gap:8px}
 .site-masthead .site-motion{padding-inline:8px}
}
@media(max-width:800px) and (max-height:740px){
 html[lang="ar"] body.compact .copy h1,html[lang="ar"] body.compact .copy h2,html[lang="ar"] body.compact .copy[data-scene="2"] h2,html[lang="ar"] body.compact .copy[data-scene="3"] h2{font-size:31px;line-height:1.4}
 html[lang="ar"] body.compact .copy :is(.intro,.body-copy){font-size:12px;line-height:1.65;margin-block:8px}
 html[lang="ar"] body.compact .study-dock .study-heading h2{font-size:25px;line-height:1.4}
 html[lang="ar"] body.compact .study-dock .study-heading p{font-size:11px;line-height:1.6}
}
/* Match the existing short landscape layout without changing the scene height. */
@media(min-width:600px) and (max-height:600px) and (min-aspect-ratio:6/5){
 html[lang="ar"] .stage .copy h1,html[lang="ar"] .stage .copy h2,html[lang="ar"] .stage .copy[data-scene="2"] h2,html[lang="ar"] .stage .copy[data-scene="3"] h2{font-size:clamp(28px,3.3vw,38px);line-height:1.4}
 html[lang="ar"] .stage .copy.active{padding-right:0;padding-left:8px}
 html[lang="ar"] .stage .study-dock .study-heading h2{font-size:29px;line-height:1.4}
 html[lang="ar"] .stage .copy :is(.intro,.body-copy){font-size:12px;line-height:1.65;margin-block:9px}
}
@media(prefers-reduced-motion:reduce){
 html[lang="ar"] #navigation.site-menu .site-menu-links a,html[lang="ar"] .closing-cta:hover i{transform:none}
}
