/* Arabic uses natural joining, real weights and generous line boxes. */
html[lang="ar"] body,html[lang="ar"] button,html[lang="ar"] a,html[lang="ar"] input,html[lang="ar"] textarea,html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] .contact-title,html[lang="ar"] .service-row b,html[lang="ar"] .process strong{font-family:"Thmanyah Sans",Tahoma,Arial,sans-serif;font-synthesis:none;letter-spacing:0!important}
html[lang="ar"] body{font-size:var(--body-size,17px);line-height:1.8}
html[lang="ar"] h2 em{font-style:normal}
html[lang="ar"] .hero h1{font-size:clamp(54px,calc(7.3vw * var(--heading-scale,1)),124px);line-height:1.22;font-weight:700}
html[lang="ar"] .hero-copy{position:relative;left:auto;right:auto;bottom:auto;margin-inline:var(--pad);padding-block:180px 74px;max-width:1100px;flex:1;min-width:0}
html[lang="ar"] .hero{display:flex;align-items:end;min-height:100svh}
html[lang="ar"] .hero h1 span:nth-child(2){margin-inline-start:4vw}
html[lang="ar"] .about h2,html[lang="ar"] .section-head h2,html[lang="ar"] .services h2,html[lang="ar"] .clients h2,html[lang="ar"] .portfolio h2{font-size:clamp(40px,calc(5.2vw * var(--heading-scale,1)),88px);line-height:1.35;font-weight:700}
html[lang="ar"] .contact-title span{font-size:clamp(44px,calc(8vw * var(--heading-scale,1)),138px);line-height:1.35;font-weight:700}
html[lang="ar"] .project-info h3{line-height:1.5;font-weight:700;overflow-wrap:anywhere}
html[lang="ar"] .modal-heading h2{font-size:clamp(40px,6vw,96px);line-height:1.4;font-weight:700;overflow-wrap:anywhere}
html[lang="ar"] .about-copy .lead{font-size:clamp(23px,2vw,34px);line-height:1.85}
html[lang="ar"] .about-copy>p:not(.lead),html[lang="ar"] .services-title p,html[lang="ar"] .portfolio-head>p{font-size:var(--body-size,17px)}
html[lang="ar"] .hero-topline,html[lang="ar"] .hero-kicker,html[lang="ar"] .eyebrow{font-size:13px;letter-spacing:0!important}
html[lang="ar"] .ticker{font-weight:700;line-height:1.5}
.client-marquee{direction:ltr;margin-top:28px}.client-marquee>div{direction:ltr;animation-duration:48s}.client-logo{width:240px;height:145px}.client-logo img{width:172px;height:80px;object-fit:contain;max-height:none}.client-marquee:hover>div,.client-marquee>div.paused{animation-play-state:paused}.logo-fallback{font-size:20px;color:#fff}
#clientsPause{margin-top:28px;background:transparent;color:#fff;border:1px solid #ffffff55;border-radius:30px;padding:10px 22px;cursor:pointer}
.contact-bottom a{display:inline-block;direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere}.brand{direction:ltr}.viewer-stage,.thumb-strip{direction:ltr}
.site-header,.site-header.light{background:rgba(24,18,39,.94);color:#fff;border-color:#ffffff26}.site-header.light .lang-toggle{background:transparent;color:#fff;border-color:#ffffff55}
.start-project{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:999px;background:var(--purple);color:var(--deep);font-size:13px;font-weight:700;line-height:1.35;text-decoration:none;white-space:nowrap;transition:background .2s,transform .2s}
.start-project:hover{background:#c4a6ff;transform:translateY(-2px)}
html[lang="en"] .contact-title span{font-size:clamp(30px,7.2vw,120px)!important;line-height:1.12;letter-spacing:-.045em;text-wrap:balance;overflow-wrap:normal}
@media(max-width:600px){.site-header{padding-inline:10px;height:66px}.header-actions{gap:4px}.start-project{font-size:11px;padding:8px 10px;min-height:40px}.brand{font-size:18px;gap:5px}.brand img{width:27px;height:27px}.lang-toggle{padding:8px;font-size:10px}.menu{padding:8px}}
@media(max-width:360px){.brand span{display:none}.start-project{padding-inline:8px}}
/* English display type: generous line boxes, controlled measure, no clipping. */
html[lang="en"] body{font-size:var(--body-size,17px);line-height:1.65}
html[lang="en"] .hero{display:flex;align-items:end}
html[lang="en"] .hero-copy{position:relative;inset:auto;flex:1;min-width:0;margin-inline:var(--pad);padding-block:178px 82px}
html[lang="en"] .hero h1{font-size:clamp(48px,calc(8.1vw * var(--heading-scale,1)),140px);line-height:.98;letter-spacing:-.055em;font-weight:800;max-width:1100px}
html[lang="en"] .hero h1 span:nth-child(2){margin-left:8vw}
html[lang="en"] .about h2,html[lang="en"] .section-head h2,html[lang="en"] .services h2,html[lang="en"] .clients h2,html[lang="en"] .portfolio h2{font-size:clamp(40px,calc(5.5vw * var(--heading-scale,1)),96px);line-height:1.06;letter-spacing:-.05em;text-wrap:balance}
html[lang="en"] .about-copy .lead{font-size:clamp(24px,2.5vw,38px);line-height:1.45;letter-spacing:-.025em}
html[lang="en"] .about-copy>p:not(.lead),html[lang="en"] .section-head>p,html[lang="en"] .services-title p,html[lang="en"] .portfolio-head>p{font-size:var(--body-size,17px);line-height:1.75;max-width:55ch}
html[lang="en"] .process{grid-template-columns:38px 1fr;gap:12px 18px}html[lang="en"] .process p{grid-column:2;margin:0;line-height:1.65}html[lang="en"] .process strong{font-size:clamp(25px,2.4vw,38px);line-height:1.2}
html[lang="en"] .project-info h3{line-height:1.12;letter-spacing:-.035em;overflow-wrap:anywhere;font-size:clamp(26px,3vw,50px)}
html[lang="en"] .service-row b{line-height:1.2;letter-spacing:-.035em;font-size:clamp(25px,3.6vw,58px)}
html[lang="en"] .contact-title span{font-size:clamp(42px,calc(10.4vw * var(--heading-scale,1)),180px);line-height:1.02;letter-spacing:-.055em}
html[lang="en"] .modal-heading h2{font-size:clamp(40px,7vw,116px);line-height:1.06;letter-spacing:-.045em;overflow-wrap:anywhere}
html[lang="en"] .hero-project b{letter-spacing:.02em}html[lang="en"] .hero-project small{line-height:1.5}
@media(max-width:600px){html[lang="en"] .hero-copy{margin-inline:22px;padding-block:148px 48px}html[lang="en"] .hero h1{font-size:clamp(35px,8.9vw,54px);line-height:1.08;letter-spacing:-.04em}html[lang="en"] .hero h1 span:nth-child(2){margin-left:6vw}html[lang="en"] .hero-project{gap:16px}html[lang="en"] .hero-project b{font-size:12px}html[lang="en"] .contact-title span{font-size:clamp(34px,10.6vw,62px)}html[lang="en"] .eyebrow{letter-spacing:.1em}}
.hero-dots button{height:24px;background:transparent!important;position:relative}.hero-dots button:after{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:#ffffff66}.hero-dots button.active:after{background:#fff}
.project-card:focus-visible,button:focus-visible,a:focus-visible,.viewer:focus-visible{outline:3px solid var(--purple);outline-offset:5px}.project-info>div{min-width:0}.project-info i{flex-shrink:0}.about-grid>*,.services-title>*,.portfolio-head>*,.modal-heading>*{min-width:0}
section[id]{scroll-margin-top:110px}.reveal{opacity:1;transform:none}.cursor,.cursor.hot{display:none}
/* Intro exits via CSS even if JavaScript or an image request fails. */
.loader{display:grid;pointer-events:none;animation:brandCurtain .85s cubic-bezier(.76,0,.24,1) 1.15s both;will-change:transform}
.loader.done{display:none}
.loader img{width:clamp(130px,19vw,250px);height:clamp(130px,19vw,250px);animation:brandTurn 1.3s cubic-bezier(.65,0,.35,1) both}
.loader-line i{animation:loading 1.1s ease-out both}
@keyframes brandTurn{0%{transform:rotate(-90deg) scale(.78);opacity:0}20%{opacity:1}75%{transform:rotate(180deg) scale(1)}100%{transform:rotate(270deg) scale(.94)}}
@keyframes brandCurtain{0%{transform:translateY(0);visibility:visible}100%{transform:translateY(-101%);visibility:hidden}}
.motion-reveal{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s ease var(--reveal-delay,0ms),transform .9s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms)}
.motion-reveal.in,.motion-reveal:focus-within{opacity:1;transform:translate3d(0,0,0)}
@media(max-width:600px){.motion-reveal{transform:translate3d(0,18px,0)}}
@media(prefers-reduced-motion:reduce){.loader{display:none}.motion-reveal{opacity:1;transform:none;transition:none}}
@media(max-width:900px){html[lang="ar"] .hero-copy{padding-block:148px 48px;margin-inline:24px}html[lang="ar"] .hero h1{font-size:clamp(52px,12vw,90px)}html[lang="ar"] .about h2,html[lang="ar"] .section-head h2,html[lang="ar"] .services h2,html[lang="ar"] .clients h2,html[lang="ar"] .portfolio h2{font-size:clamp(38px,9vw,64px)}html[lang="ar"] .service-row b{font-size:clamp(23px,5vw,38px)}.service-row{grid-template-columns:38px 1fr 26px;gap:12px}.project-info{gap:12px}html[lang="ar"] .project-info h3{font-size:28px}.site-header nav a{min-height:44px}.contact-title{margin-block:36px}.contact-title span{overflow-wrap:anywhere}.viewer-arrow{width:40px;height:40px}.fullscreen{font-size:9px;padding:9px}.viewer-count{padding:8px;gap:5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.client-marquee{overflow-x:auto}.client-logo[aria-hidden="true"]{display:none}}