/* One scroll-led visual language, from the first idea to the last conversation. */
.journey-field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.journey-field canvas{display:block;width:100%;height:100%}
main,footer{position:relative;z-index:1}
.site-header{transition:background .35s,box-shadow .35s}
html[data-scrolled=true] .site-header{background:rgba(244,243,237,.88);box-shadow:0 4px 30px #18231d08}
.experience-ready .services{background:rgba(237,238,230,.93)}
.title-line{display:block;overflow:clip;overflow-clip-margin:8px}
.title-line>span{display:block}
.motion-enabled.experience-ready .section-head .title-line>span,
.motion-enabled.experience-ready .contact-heading .title-line>span{translate:0 110%;transition:translate 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--line-index,0)*90ms)}
.motion-enabled.experience-ready .visible .title-line>span{translate:0 0}
.hero-line{overflow:clip;overflow-clip-margin:8px}
.hero-line-inner{display:block}
.motion-enabled.experience-ready .hero-line-inner{animation:line-arrive 1.15s cubic-bezier(.16,1,.3,1) both}
.motion-enabled.experience-ready .hero-line:nth-child(2) .hero-line-inner{animation-delay:.13s}
.motion-enabled.experience-ready .hero-copy{animation:none;translate:0 calc(var(--hero-out,0)*-65px)}
.motion-enabled.experience-ready .hero-visual{animation:none;translate:0 calc(var(--hero-out,0)*80px);scale:calc(1 - var(--hero-out,0)*.11);rotate:calc(var(--hero-out,0)*-7deg)}
.hero-halo{position:absolute;width:92%;aspect-ratio:1;border:1px solid #0069e522;border-radius:50%;inset:0;margin:auto;pointer-events:none;rotate:-25deg;scale:1 .7}
.hero-halo:before,.hero-halo:after{content:"";position:absolute;inset:8%;border:1px solid #0069e516;border-radius:50%}
.hero-halo:after{inset:-8%;border-style:dashed;opacity:.5}
.motion-enabled .hero-halo{animation:halo-orbit 28s linear infinite}
.journey-caption{position:absolute;right:18px;left:auto;top:43%;writing-mode:vertical-rl;font:10px/1 Arial;letter-spacing:.2em;color:var(--blue);opacity:.6;pointer-events:none}
.motion-enabled.experience-ready .marquee-track{translate:calc(var(--marquee-shift,0)*1px) 0}
.motion-enabled.experience-ready .work-card .work-media{clip-path:inset(16% 0 16% 0);scale:.94;transition:clip-path 1.1s cubic-bezier(.16,1,.3,1),scale 1.1s cubic-bezier(.16,1,.3,1),transform .4s}
.motion-enabled.experience-ready .work-card.visible .work-media{clip-path:inset(0);scale:1}
.motion-enabled.experience-ready .brand-work{translate:0 calc(var(--world-drift,0)*-32px)}
.motion-enabled.experience-ready .digital-work{translate:0 calc(var(--world-drift,0)*32px)}
.motion-enabled.experience-ready .brand-work .work-media img{scale:1.12;translate:0 calc(var(--world-drift,0)*24px)}
.motion-enabled.experience-ready .browser-mockup{rotate:calc(var(--world-drift,0)*-5deg)}
.motion-enabled.experience-ready .digital-star{rotate:calc(var(--world-turn,0)*1deg)}
.work-media{box-shadow:0 24px 60px -35px #18231d55}
.work-card .work-arrow{transition:background .3s,rotate .4s,scale .4s}
.motion-enabled .work-card:is(:hover,:focus-visible) .work-arrow{rotate:45deg;scale:1.08}
.manifesto-inner{position:relative;z-index:1}
.manifesto-contours{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.manifesto-contours i{position:absolute;left:55%;top:48%;width:clamp(450px,65vw,1000px);aspect-ratio:1;border:1px solid #fff3;border-radius:50%;transform:translate(-50%,-50%) rotate(calc(var(--ring)*12deg + var(--manifesto-turn,0)*1deg)) scaleX(calc(.16 + var(--ring)*.055));opacity:calc(.8 - var(--ring)*.045)}
.manifesto-words{position:relative;padding-block:15px;perspective:1000px}
.manifesto-words>span{position:relative;display:block;max-width:100%;color:#ffffff55;isolation:isolate}
.manifesto-words>span>.word-ink{position:absolute;inset:0;color:white;clip-path:inset(0 calc(100% - var(--word-fill,100)*1%) 0 0);pointer-events:none}
html[dir=rtl] .manifesto-words>span>.word-ink{clip-path:inset(0 0 0 calc(100% - var(--word-fill,100)*1%))}
.motion-enabled.experience-ready .manifesto-words>span{translate:calc(var(--word-shift,0)*1px) 0;rotate:y calc(var(--word-rotate,0)*1deg)}
.motion-enabled.experience-ready .manifesto-star{rotate:calc(var(--manifesto-turn,0)*-1deg)}
.motion-enabled.experience-ready .manifesto-orbit{scale:calc(.7 + var(--section-progress,.5)*.7)}
.product-grid{perspective:1400px}
.product-card{position:relative;overflow:hidden;isolation:isolate}
.product-card:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%),#d7f64b42,transparent 55%);opacity:0;transition:opacity .4s;pointer-events:none}
.product-card:is(:hover,:focus-visible):before{opacity:1}
.motion-enabled.experience-ready .product-card{translate:0 calc(var(--card-rise,0)*1px);rotate:y calc(var(--card-turn,0)*1deg);transition:box-shadow .35s,border-color .35s,transform .35s;transform:perspective(1000px) rotateX(var(--card-x,0deg)) rotateY(var(--card-y,0deg))}
.motion-enabled.experience-ready .product-card.visible{transform:perspective(1000px) rotateX(var(--card-x,0deg)) rotateY(var(--card-y,0deg))}
.product-card:is(:hover,:focus-visible){border-color:var(--blue);box-shadow:0 22px 45px -25px #0069e54d}
.motion-enabled .product-card:is(:hover,:focus-visible) .product-graphic{scale:1.08;rotate:-4deg}
.product-graphic{transition:scale .6s cubic-bezier(.2,.8,.2,1),rotate .6s}
.motion-enabled.experience-ready .product-graphic i{animation:system-breathe 5s ease-in-out infinite;animation-delay:calc(var(--piece,0)*-.42s);animation-play-state:paused}
.motion-enabled.experience-ready .products.in-view .product-graphic i{animation-play-state:running}
.steps{position:relative}
.step{position:relative;transition:opacity .5s}
.step:before{content:"";position:absolute;inset-block-start:-2px;inset-inline-start:0;height:3px;width:100%;background:var(--blue);transform:scaleX(var(--step-fill,1));transform-origin:left}
html[dir=rtl] .step:before{transform-origin:right}
.step>span{display:inline-block;transition:color .4s,translate .4s}
.experience-ready .step[data-active=true]>span{color:var(--blue);translate:0 -4px}
.motion-enabled.experience-ready .process-mark{rotate:calc(var(--process-turn,0)*1deg)}
.process-route{position:relative;display:flex;justify-content:space-between;align-items:center;margin-block:25px -25px;border-bottom:1px solid #18231d25;padding-bottom:14px;font:10px/1.2 Arial;letter-spacing:.16em;color:var(--muted)}
.process-route i{position:absolute;bottom:-5px;width:10px;height:10px;inset-inline-start:calc(var(--route-progress,0)*100% - var(--route-progress,0)*10px);background:var(--blue);border-radius:50%;box-shadow:0 0 0 5px #0069e514}
.contact{position:relative;isolation:isolate}
.contact .wrap{position:relative;z-index:1}
.contact-orbits{position:absolute;width:65vw;min-width:600px;aspect-ratio:1;inset-inline-start:-28vw;top:-140px;z-index:0;pointer-events:none;opacity:.4}
.contact-orbits i{position:absolute;inset:calc(var(--ring)*5%);border:1px solid #18231d42;border-radius:42%;rotate:calc(var(--contact-turn,0)*1deg + var(--ring)*22deg)}
.motion-enabled.experience-ready .contact-arrow{rotate:calc(var(--contact-turn,0)*-.4deg);scale:calc(.82 + var(--section-progress,.5)*.36)}
.motion-enabled.experience-ready .contact-heading h2{translate:calc(var(--contact-shift,0)*1px) 0}
.contact form{position:relative}
.contact form input,.contact form textarea,.contact form select{transition:background .25s,box-shadow .25s}
.contact form :is(input,textarea,select):focus{background:#ffffff54;box-shadow:0 3px 0 var(--ink)}
.motion-enabled.experience-ready .button svg,.motion-enabled.experience-ready .header-cta svg{translate:var(--magnet-x,0px) var(--magnet-y,0px);transition:translate .15s ease-out}
.button{isolation:isolate;position:relative;overflow:hidden}
.button:before{content:"";position:absolute;inset:0;z-index:-1;background:#ffffff16;clip-path:circle(0 at 50% 110%);transition:clip-path .5s cubic-bezier(.2,.8,.2,1)}
.button:is(:hover,:focus-visible):before{clip-path:circle(150% at 50% 110%)}
.motion-enabled.experience-ready .footer-word{translate:0 calc(var(--footer-rise,0)*1px);scale:calc(.94 + var(--footer-reveal,1)*.06)}
.motion-enabled.experience-ready .footer-word span{display:inline-block;rotate:calc(var(--footer-turn,0)*1deg)}
.chapter-rail{display:none}
.experience-ready .chapter-rail{position:fixed;z-index:25;inset-inline-start:12px;top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:4px}
.chapter-rail a{display:grid;place-items:center;position:relative;width:30px;height:31px;font:10px/1 Arial;color:#526458;border-radius:30px;transition:color .3s,background .3s}
.chapter-rail a:before{content:"";position:absolute;inset-inline-start:0;width:2px;height:3px;background:currentColor;transition:height .35s}
.chapter-rail a[aria-current=location]{color:var(--blue);background:#f4f3eddd}
.chapter-rail a[aria-current=location]:before{height:17px}
.chapter-rail .chapter-label{position:absolute;inset-inline-start:38px;white-space:nowrap;padding:5px 10px;border-radius:3px;background:var(--ink);color:var(--paper);font:12px/1.5 Tajawal,Arial;opacity:0;translate:4px 0;pointer-events:none;transition:opacity .2s,translate .2s}
.chapter-rail a:is(:hover,:focus-visible) .chapter-label{opacity:1;translate:0}
html[data-chapter=approach] .chapter-rail a,html[data-chapter=contact] .chapter-rail a{color:var(--ink);background:#f4f3edb8}
.experience-dock{display:none}
.experience-ready .experience-dock{position:fixed;z-index:35;bottom:18px;inset-inline-start:18px;display:flex;align-items:center;gap:11px;padding:10px 13px;background:var(--ink);color:var(--paper);border:1px solid #f4f3ed33;border-radius:40px;box-shadow:0 6px 30px #18231d20;font-size:11px;line-height:1}
.experience-dock .motion-toggle{color:inherit;font-size:11px;min-height:24px;padding:0}
.journey-readout{display:flex;gap:5px;align-items:center;direction:ltr;padding-inline-start:10px;border-inline-start:1px solid #f4f3ed33;font:10px/1 Arial;color:#d7f64b}
.journey-readout b{font-weight:400;min-width:23px}
.experience-ready .hero-bottom{padding-bottom:28px}
html[data-motion=off] .journey-field{opacity:.5}
html[data-motion=off] .manifesto-words>span{color:white}
html[data-motion=off] .manifesto-words>span>.word-ink{display:none}
html[data-motion=off] .product-graphic i,html[data-motion=off] .hero-halo{animation:none}
html[data-motion=off] .title-line>span{translate:none!important}
@keyframes line-arrive{from{translate:0 115%;rotate:3deg}to{translate:0 0;rotate:0deg}}
@keyframes halo-orbit{to{rotate:335deg}}
@keyframes system-breathe{50%{translate:0 -8px;filter:brightness(1.12)}}
@media(min-width:1000px){.experience-ready .manifesto{padding-block:110px;min-height:780px}.experience-ready .manifesto-words>span:nth-child(2){margin-inline-start:9%}.experience-ready .manifesto-words>span:nth-child(3){margin-inline-start:23%}}
@media(max-width:1100px){.experience-ready .chapter-rail{display:none}.journey-caption{display:none}.experience-ready .experience-dock{bottom:12px;inset-inline-start:12px}}
@media(max-width:760px){.journey-field{opacity:.65}.motion-enabled.experience-ready .hero-copy,.motion-enabled.experience-ready .hero-visual,.motion-enabled.experience-ready .brand-work,.motion-enabled.experience-ready .digital-work{translate:none;scale:1;rotate:none}.motion-enabled.experience-ready .contact-heading h2{translate:none}.motion-enabled.experience-ready .manifesto-words>span{translate:none;rotate:none}.manifesto-contours i{left:70%;opacity:.15}.contact-orbits{top:0;opacity:.2}.motion-enabled.experience-ready .product-card{rotate:none}.process-route{margin-block:18px 0}.experience-ready .experience-dock{padding:7px 11px}.journey-readout{display:none}.experience-ready footer{padding-bottom:58px}.contact .wrap{padding-bottom:20px}}
@media(prefers-reduced-motion:reduce){html:not([data-motion=on]) .title-line>span{translate:none!important}html:not([data-motion=on]) .hero-line-inner{animation:none!important}}

.manifesto-words>span:nth-child(2){color:#d7f64b55}.manifesto-words>span:nth-child(2)>.word-ink{color:var(--lime)}

html[lang=ar] .process-route{font-family:Tajawal,Arial;font-size:13px;letter-spacing:0}

.motion-enabled .faq summary span{transition:transform .3s ease}.motion-enabled .faq details[open] p{animation:answer-arrive .4s ease-out}.faq summary{transition:color .25s}.faq summary:is(:hover,:focus-visible){color:var(--blue)}
@keyframes answer-arrive{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}

html[dir=rtl] .journey-caption{right:auto;left:18px}