/* Keep the original video composition; Arabic changes reading direction only. */
@font-face{font-family:'Noto Arabic';src:url('../fonts/noto-sans-arabic.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
.locale-switch{display:inline-flex;align-items:center;flex-shrink:0;direction:ltr;gap:2px;margin:0;padding:3px;border:1px solid #1c5977;border-radius:24px;background:#071a2b;color:#d4e8f7;min-height:34px}
.locale-switch button{font:600 12px/1.5 Tahoma,Arial,sans-serif;color:inherit;background:transparent;border:0;border-radius:20px;padding:5px 10px;cursor:pointer;white-space:nowrap}
.locale-switch button[aria-pressed=true]{background:linear-gradient(125deg,#087ef3,#23b9f0);color:white}
.locale-switch button:focus-visible{outline:2px solid #73dcff;outline-offset:3px}
.standalone-locale{position:absolute;inset-inline-end:24px;top:18px;z-index:3}
.quote[lang=en]{font-family:Inter,Arial,sans-serif;direction:ltr;text-align:left}
html[lang^=ar] body,html[lang^=ar] button,html[lang^=ar] input,html[lang^=ar] select,html[lang^=ar] textarea,html[lang^=ar] .button,html[lang^=ar] .navigation a,html[lang^=ar] .tech,html[lang^=ar] .service h3,html[lang^=ar] .service p,html[lang^=ar] .category,html[lang^=ar] .project-card h3,html[lang^=ar] .fact strong,html[lang^=ar] .process-item h3{font-family:'Noto Arabic',Tahoma,Arial,sans-serif}
html[lang^=ar] h1,html[lang^=ar] h2,html[lang^=ar] h3,html[lang^=ar] .eyebrow,html[lang^=ar] .work-eyebrow,html[lang^=ar] .nav-label,html[lang^=ar] .journey-label,html[lang^=ar] .meeting-badge{letter-spacing:0;line-height:1.55}
html[lang^=ar] p{line-height:1.85}
html[lang^=ar] .hero{direction:ltr}
html[lang^=ar] .hero-copy,html[lang^=ar] .process-item{direction:rtl;text-align:right}
html[lang^=ar] .hero-copy{max-width:770px}
html[lang^=ar] .hero h1{font-size:clamp(31px,2.65vw,50px);line-height:1.48;letter-spacing:0;margin-bottom:10px}
html[lang^=ar] .hero .eyebrow{font-size:13px;line-height:1.5;margin-bottom:8px}
html[lang^=ar] .hero .intro{font-size:clamp(13px,1.04vw,19px);line-height:1.85}
html[lang^=ar] .hero-actions{gap:15px}
html[lang^=ar] .hero-actions .button{font-size:16px;min-width:0;padding-inline:20px}
html[lang^=ar] .process-item h3{font-size:16px;line-height:1.5}
html[lang^=ar] .process-item p{font-size:10px;line-height:1.7}
html[lang^=ar] .hero .process-item{padding-top:8px;padding-bottom:8px}
html[lang^=ar] .direction-arrow,html[lang^=ar] .work-button>svg,html[lang^=ar] .work-project-card__link>svg,html[lang^=ar] .work-project-card__visual-label>svg,html[lang^=ar] .project-related__card>svg{transform:scaleX(-1)}
html[lang^=ar] .service-list{border-left:0;border-right:1px solid var(--line);padding-left:0;padding-right:12px}
html[lang^=ar] .service h3,html[lang^=ar] .service p,html[lang^=ar] .fact p{white-space:normal}
html[lang^=ar] .service h3{font-size:12px}
html[lang^=ar] .service p{font-size:10px}
html[lang^=ar] .external{right:auto;left:12px}
html[lang^=ar] .category{align-self:flex-start;white-space:normal;line-height:1.7;padding-block:3px}
html[lang^=ar] .project-card h3{line-height:1.55;font-size:24px}
html[lang^=ar] .project-card>p{line-height:1.85;min-height:4em}
html[lang^=ar] .projects-intro{padding-right:0;padding-left:19px}
html[lang^=ar] .projects-intro h2{line-height:1.5}
html[lang^=ar] .fact{border-right:0;border-left:1px solid var(--line)}
html[lang^=ar] .fact:last-child{border-left:0}
html[lang^=ar] .footer-name{margin-left:0;margin-right:auto}
html[lang^=ar] .journey-story h2{line-height:1.6;letter-spacing:0}
html[lang^=ar] .journey-specialties,html[lang^=ar] .journey-personal{line-height:1.8}
html[lang^=ar] .milestone-date,html[lang^=ar] .resume-languages{direction:ltr;unicode-bidi:isolate}
html[lang^=ar] .journey-milestones ol{border-left:0;padding-left:0}
html[lang^=ar] .process-card h3,html[lang^=ar] .process-card p{line-height:1.8}
html[lang^=ar] .process-number{direction:ltr}
html[lang^=ar] .process-card__body{text-align:right}
html[lang^=ar] .process-return{line-height:1.8}
html[lang^=ar] .work-brand__mark{transform:none}
html[lang^=ar] .work-collection-hero h1,html[lang^=ar] .project-hero h1{line-height:1.6;letter-spacing:0}
html[lang^=ar] .work-header-search input,html[lang^=ar] .work-collection-search input{text-align:right}
html[lang^=ar] .work-header-search kbd{margin-left:0;margin-right:auto}
html[lang^=ar] .work-back>svg{transform:none}
html[lang^=ar] .work-project-card__body h2{line-height:1.7}
html[lang^=ar] .project-gallery__thumbnails{direction:ltr}
html[lang^=ar] .project-gallery__thumbnails button{direction:rtl}
html[lang^=ar] .project-gallery__controls,html[lang^=ar] [data-gallery-counter]{direction:ltr;unicode-bidi:isolate}
html[lang^=ar] .project-demo__credentials dd,html[lang^=ar] code,html[lang^=ar] input[type=email],html[lang^=ar] input[type=url],html[lang^=ar] input[type=tel]{direction:ltr;unicode-bidi:isolate}
html[lang^=ar] .project-demo__credentials dd{justify-content:flex-start}
html[lang^=ar] .work-tech-stack,html[lang^=ar] .tags{direction:ltr;justify-content:flex-end}
html[lang^=ar] .project-step__copy strong{line-height:1.7}
html[lang^=ar] .work-panel__header h2,html[lang^=ar] .project-story__card h3{line-height:1.7}
html[lang^=ar] .dashboard-sidebar{border-right:0;border-left:1px solid var(--line)}
html[lang^=ar] .dashboard-sidebar nav a[aria-current]{box-shadow:inset -3px 0 var(--cyan)}
html[lang^=ar] .dashboard-brand small,html[lang^=ar] .dashboard-topbar .eyebrow{letter-spacing:0}
html[lang^=ar] .account form{border-left:0;border-right:1px solid var(--line);padding-left:0;padding-right:12px}
html[lang^=ar] .metric svg{right:auto;left:20px}
html[lang^=ar] .metric small{padding-right:0;padding-left:20px}
html[lang^=ar] .metric strong{line-height:1.4}
html[lang^=ar] .request-row time{text-align:left}
html[lang^=ar] .table-scroll th,html[lang^=ar] .table-scroll td{text-align:right}
html[lang^=ar] .dash-field input[dir=ltr],html[lang^=ar] .dash-field textarea[dir=ltr]{text-align:left}
html[lang^=ar] .dash-field input[dir=rtl],html[lang^=ar] .dash-field textarea[dir=rtl]{text-align:right}
html[lang^=ar] .overview-banner h2,html[lang^=ar] .login-intro h1{line-height:1.7;letter-spacing:0}
html[lang^=ar] .dashboard-topbar{height:auto;min-height:88px;flex-wrap:wrap;padding-block:14px}
html[lang^=ar] .dashboard-footer{line-height:1.9}
html[lang^=ar] .status-badge,html[lang^=ar] .type-badge{line-height:1.9}
html[lang^=ar] .verification-card h1,html[lang^=ar] .verification-layout h1{line-height:1.6;letter-spacing:0}
html[lang^=ar] .verification-brand small{letter-spacing:0}
html[lang^=ar] .verification-button>span{transform:scaleX(-1)}
html[lang^=ar] .meeting-section[dir=rtl] .meeting-field input[dir=ltr]{text-align:left}
@media(max-width:1200px){html[lang^=ar] .work-header-search{display:none}html[lang^=ar] .work-header__inner{gap:14px}}
@media(max-width:1050px){html[lang^=ar] .hero h1{font-size:35px}html[lang^=ar] .hero .intro{font-size:14px}html[lang^=ar] .fact{border:0}}
@media(max-width:800px){html[lang^=ar] .dashboard-sidebar{left:auto;right:0;transform:translateX(100%)}html[lang^=ar] body.nav-open .dashboard-sidebar{transform:translateX(0)}}
@media(max-width:900px){html[lang^=ar] .hero-copy{margin-top:24px}html[lang^=ar] .hero h1{font-size:clamp(29px,6.7vw,43px);line-height:1.6}html[lang^=ar] .hero .intro{font-size:14px;line-height:1.9}html[lang^=ar] .hero .process-item{flex-direction:row;text-align:right}html[lang^=ar] .process-item p{font-size:11px}html[lang^=ar] .service-list{border:0;padding:0}html[lang^=ar] .projects-intro{padding:0}html[lang^=ar] .work-header-cta{display:none}html[lang^=ar] .work-brand strong{font-size:16px}html[lang^=ar] .work-header__inner{gap:10px}html[lang^=ar] .dashboard-topbar{padding-inline:18px}html[lang^=ar] .dashboard-topbar>.locale-switch{margin-inline-start:auto}html[lang^=ar] .account{flex-wrap:wrap}html[lang^=ar] .account>span:not(.account-avatar){display:none}}
@media(max-width:480px){.locale-switch button{padding:4px 8px;font-size:11px}.standalone-locale{top:12px;inset-inline-end:14px}html[lang^=ar] .brand{font-size:15px;gap:6px}html[lang^=ar] .header{padding-inline:12px;gap:8px}html[lang^=ar] .hero-actions .button{font-size:13px;padding-inline:8px}html[lang^=ar] .header-controls{gap:5px}html[lang^=ar] .work-header__inner{padding-inline:12px}html[lang^=ar] .work-brand__mark{width:30px}html[lang^=ar] .work-brand{gap:6px}html[lang^=ar] .work-brand small{font-size:10px}html[lang^=ar] .work-brand strong{font-size:14px}}
