/* Mirai Motion Edition — motion is progressive enhancement; all content remains readable without JS. */
.site-header,.inner-header{animation:mirai-header-in .75s cubic-bezier(.2,.8,.2,1) both}
@keyframes mirai-header-in{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
.mirai-page-progress{position:fixed;inset:0 auto auto 0;width:100%;height:3px;background:var(--orange,#ef7049);z-index:100;pointer-events:none;transform:scaleX(0);transform-origin:left center}
[dir="rtl"] .mirai-page-progress{transform-origin:right center}

/* 01 — opening scene */
.hero{position:relative;isolation:isolate;min-height:calc(100svh - 86px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:10% -10% auto auto;width:min(850px,70vw);height:75%;border-radius:50%;background:radial-gradient(circle,rgba(239,112,73,.095),rgba(199,153,82,.035) 45%,transparent 74%);pointer-events:none;z-index:-1;animation:mirai-glow 10s ease-in-out infinite alternate}
[dir="rtl"] .hero::before{right:auto;left:-10%}
@keyframes mirai-glow{from{transform:translate(-20px,12px) scale(.94)}to{transform:translate(20px,-12px) scale(1.05)}}
.hero .hero-inner{min-height:calc(100svh - 151px)}
.hero-copy{transform:translate3d(0,var(--hero-copy-y,0px),0);opacity:var(--hero-opacity,1)}
.hero-visual{position:relative;min-width:0;transform:translate3d(0,var(--hero-visual-y,0px),0) scale(var(--hero-visual-scale,1));opacity:var(--hero-visual-opacity,1)}
.hero-visual .hero-art{width:100%}
.hero .eyebrow{animation:mirai-hero-reveal .8s cubic-bezier(.16,1,.3,1) .12s both}
.hero h1{animation:mirai-hero-reveal 1s cubic-bezier(.16,1,.3,1) .27s both}
.hero .hero-lead{animation:mirai-hero-reveal .85s cubic-bezier(.16,1,.3,1) .49s both}
.hero .hero-actions{animation:mirai-hero-reveal .85s cubic-bezier(.16,1,.3,1) .68s both}
.hero .hero-note{animation:mirai-hero-reveal .85s cubic-bezier(.16,1,.3,1) .84s both}
.hero .hero-visual .hero-art{animation:mirai-visual-in 1.25s cubic-bezier(.16,1,.3,1) .25s both}
.hero .hero-bottom{position:relative;border-top:0}
.hero .hero-bottom::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left center;animation:mirai-draw-line 1.2s ease 1.05s forwards}
[dir="rtl"] .hero .hero-bottom::before{transform-origin:right center}
@keyframes mirai-hero-reveal{from{opacity:0;transform:translateY(40px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes mirai-visual-in{from{opacity:0;transform:translateY(50px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mirai-draw-line{to{transform:scaleX(1)}}

/* A moving editorial hinge between the opening and the first chapter. */
.mirai-marquee{overflow:hidden;background:#efe2d5;border-block:1px solid #d9c9b9;padding:8px 0;white-space:nowrap;direction:ltr}
.mirai-marquee-track{display:flex;width:max-content;align-items:center;gap:0;animation:mirai-marquee 24s linear infinite}
.mirai-marquee span{display:block;font-size:clamp(44px,7vw,110px);line-height:1.18;font-weight:800;letter-spacing:-.06em;color:#cbb8a8;padding-inline-end:22px}
.mirai-marquee span[lang="ar"]{letter-spacing:0}
.mirai-marquee span[lang="ar"],html[lang="ar"] .mirai-marquee span[lang="en"]{display:none}
html[lang="ar"] .mirai-marquee span[lang="ar"]{display:block}
@keyframes mirai-marquee{to{transform:translateX(-50%)}}

/* 02 — a sticky, scroll-lit statement */
.story-section{background:#141516;color:#faf5ed;position:relative}
.story-sticky{min-height:68svh;display:flex;flex-direction:column;justify-content:space-between;gap:50px;box-sizing:border-box;padding-block:38px 36px;overflow:hidden}
body.motion-enabled .story-section{height:185svh}
body.motion-enabled .story-sticky{min-height:0;height:calc(100svh - 86px);position:sticky;top:86px}
.story-overline,.story-bottom{display:flex;gap:25px;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.18em;font-weight:700;color:#b4a99f}
.story-overline::after{content:"";width:38px;height:2px;background:var(--orange);margin-inline-start:auto}
.story-words{max-width:1150px;font-size:clamp(54px,7.2vw,118px);line-height:1.07;letter-spacing:-.055em;font-weight:700;text-wrap:balance}
.story-words[lang="ar"]{font-size:clamp(52px,6.8vw,106px);line-height:1.25;letter-spacing:0}
.story-words>span{color:#faf5ed;transition:color .25s ease,text-shadow .25s ease}
body.motion-enabled .story-words>span{color:rgba(250,245,237,.19)}
.story-words>span.is-lit{color:#faf5ed}
.story-words>span:last-child{color:var(--orange)}
body.motion-enabled .story-words>span:last-child{color:rgba(250,245,237,.19)}
body.motion-enabled .story-words>span:last-child.is-lit{color:var(--orange);text-shadow:0 0 45px rgba(239,112,73,.12)}
.story-progress{position:absolute;inset:auto 0 0;height:3px;background:var(--orange);transform:scaleX(var(--story-progress,0));transform-origin:left}
[dir="rtl"] .story-progress{transform-origin:right}
.story-ar,html[lang="ar"] .story-en{display:none}
html[lang="ar"] .story-ar{display:block}
.story-scroll{margin-inline-start:auto}

/* 03 — a service gallery advanced by normal vertical scrolling */
.services-section{position:relative;background:#f3e8dc}
.services-section::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:1px;background:#dbcab7}
.service-stage{position:relative}
.service-rail-window{min-width:0}
.service-stage-foot,.model-stage-foot{display:none;align-items:center;gap:22px;font-size:10px;font-weight:700;letter-spacing:.15em;color:#7d6e60}
.service-controls{display:flex;gap:8px;flex:none}
.service-controls button{width:34px;height:34px;border:1px solid #bba894;background:transparent;color:var(--ink);border-radius:50%;font-size:17px;transition:background .25s,color .25s,transform .25s}
.service-controls button:hover{background:var(--ink);color:var(--ivory);transform:scale(1.08)}
.service-scroll-progress,.model-scroll-progress{height:2px;background:linear-gradient(to right,var(--orange) 0,var(--orange) var(--progress,0%),#d7c7b8 var(--progress,0%),#d7c7b8 100%);flex:1;min-width:30px}
[dir="rtl"] .service-scroll-progress,[dir="rtl"] .model-scroll-progress{background:linear-gradient(to left,var(--orange) 0,var(--orange) var(--progress,0%),#d7c7b8 var(--progress,0%),#d7c7b8 100%)}
.service-stage .service-card{position:relative;overflow:hidden}
.service-stage .service-card::after{content:"";position:absolute;inset:auto 0 0;height:4px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
[dir="rtl"] .service-stage .service-card::after{transform-origin:right}
.service-stage .service-card[aria-pressed="true"]::after,.service-stage .service-card:hover::after{transform:scaleX(1)}
.service-stage .service-icon{font-size:34px;transition:transform .4s}
.service-stage .service-card:hover .service-icon{transform:rotate(28deg) scale(1.12)}
.service-feature .feature-copy,.service-feature .feature-side{position:relative;z-index:1}
.service-feature .feature-copy{display:flex;flex-direction:column}
.service-feature .feature-side{display:flex;flex-direction:column;justify-content:space-between}
.service-feature .feature-copy,.service-feature .feature-side{animation:mirai-panel-in .65s cubic-bezier(.16,1,.3,1) both}
@keyframes mirai-panel-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* 04 — three operating models as chapters */
.models-section{position:relative}
.model-scroll-scene{position:relative}
.model-stage{position:relative;isolation:isolate}
.model-stage::before{content:attr(data-chapter);position:absolute;inset:3% 0 auto auto;font-size:clamp(180px,25vw,390px);line-height:1;font-weight:800;letter-spacing:-.1em;color:rgba(239,112,73,.06);pointer-events:none;z-index:-1}
[dir="rtl"] .model-stage::before{right:auto;left:0}
.model-stage .model-panel{position:relative;overflow:hidden}
.model-stage .model-panel::after{content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--orange);transform:scaleX(var(--model-progress,0));transform-origin:left center;transition:transform .3s}
[dir="rtl"] .model-stage .model-panel::after{transform-origin:right center}
.model-panel>div{animation:mirai-panel-in .65s cubic-bezier(.16,1,.3,1) both}
.model-tab{transition:background .3s,transform .35s,border-color .3s}
.model-tab:hover{transform:translateY(-5px)}
.model-stage-foot{margin-top:24px}
.model-after{position:relative}

/* Entrance rhythm for the supporting details and the selector. */
body.motion-ready .motion-reveal{opacity:0;transform:translateY(46px);filter:blur(7px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .8s}
body.motion-ready .motion-reveal.is-visible{opacity:1;transform:translateY(0);filter:blur(0)}
body.motion-ready .fit-block.motion-reveal{transition-delay:.12s}
.choice{transition:background .3s,border-color .3s,transform .3s!important;animation:mirai-panel-in .55s cubic-bezier(.16,1,.3,1) both}
.choice:nth-child(2){animation-delay:.08s}.choice:nth-child(3){animation-delay:.16s}
.choice:hover{transform:translateX(7px)}
[dir="rtl"] .choice:hover{transform:translateX(-7px)}
.result-title,.result-explain,.result-reasons,.result-actions{animation:mirai-panel-in .6s cubic-bezier(.16,1,.3,1) both}
.result-explain{animation-delay:.09s}.result-reasons{animation-delay:.18s}.result-actions{animation-delay:.26s}
.footer,.inner-footer{position:relative;overflow:hidden}
.footer::before,.inner-footer::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:3px;background:var(--orange);transform:scaleX(var(--footer-progress,0));transform-origin:left}
[dir="rtl"] .footer::before,[dir="rtl"] .inner-footer::before{transform-origin:right}

/* The same visual rhythm carries into supporting pages. */
.interior-page .inner-hero-grid>div:first-child{animation:mirai-hero-reveal 1s cubic-bezier(.16,1,.3,1) .12s both}
.interior-page .inner-hero-art{animation:mirai-visual-in 1.1s cubic-bezier(.16,1,.3,1) .25s both}
.interior-page .inner-hero-art img{animation:mirai-interior-float 6s ease-in-out infinite alternate}
@keyframes mirai-interior-float{to{transform:translateY(-12px) rotate(3deg)}}
.interior-page .inner-card{transition:transform .4s,border-color .4s,box-shadow .4s}
.interior-page .inner-card:hover{transform:translateY(-7px);box-shadow:0 16px 30px rgba(30,20,13,.08)}

/* Clear, consistent navigation in both languages. */
.site-header .nav a,.mobile-nav a,.interior-page .inner-nav a,.interior-page .inner-mobile-nav a{font-weight:700}
html[lang="en"] .site-header .nav a,html[lang="en"] .mobile-nav a,html[lang="en"] .interior-page .inner-nav a,html[lang="en"] .interior-page .inner-mobile-nav a{text-transform:uppercase;letter-spacing:.045em}
@media(min-width:1101px){
 .site-header .nav a,.interior-page .inner-nav a{font-size:13px}
}
@media(min-width:781px) and (max-width:1100px){
 .site-header .nav,.site-header .header-actions,.interior-page .inner-nav,.interior-page .inner-header-actions{display:none}
 .site-header .menu-toggle,.interior-page .inner-menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:7px;border:0;background:none;padding:12px;cursor:pointer;min-height:44px;min-width:48px}
 .site-header .menu-toggle span,.interior-page .inner-menu-toggle span{width:25px;height:2px;background:var(--ink,#101112);display:block}
 .site-header + .mobile-nav:not([hidden]),.interior-page .inner-mobile-nav:not([hidden]){display:flex;position:fixed;top:86px;inset-inline:0;z-index:29;background:#fefbf5;border-bottom:1px solid #e3d7cb;box-shadow:0 15px 30px #0002;padding:15px 35px 25px;flex-direction:column;max-height:calc(100vh - 86px);overflow:auto}
 .site-header + .mobile-nav a,.interior-page .inner-mobile-nav a,.site-header + .mobile-nav button,.interior-page .inner-mobile-nav button{padding:13px 5px;text-align:start;border:0;border-bottom:1px solid #e4d8cb;background:none;font-size:16px}
}

/* Pinned scenes have a calm, fully navigable flowing layout on narrower screens. */
@media(min-width:1000px) and (min-height:850px){
 body.motion-enabled .services-section{height:280svh;padding:0}
 body.motion-enabled .service-stage{position:sticky;top:86px;height:calc(100svh - 86px);min-height:674px;display:flex;flex-direction:column;box-sizing:border-box;padding-block:40px 25px;overflow:hidden}
 body.motion-enabled .service-stage .section-intro{flex:none;margin-bottom:20px}
 body.motion-enabled .service-stage .section-intro h2{font-size:clamp(43px,4.2vw,63px);margin-top:16px}
 body.motion-enabled .service-stage .service-layout{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(190px,1fr) 240px;gap:16px;flex:1;min-height:0}
 body.motion-enabled .service-rail-window{overflow:hidden;width:100%;min-height:0}
 body.motion-enabled .service-stage .service-grid{display:flex;gap:16px;width:max-content;height:100%;transform:translate3d(var(--service-shift,0px),0,0);will-change:transform}
 body.motion-enabled .service-stage .service-card{width:clamp(270px,29vw,420px);height:100%;min-height:0;flex:none;padding:26px 28px}
 body.motion-enabled .service-stage .service-card:hover{transform:translateY(-6px)}
 body.motion-enabled .service-stage .service-name{font-size:clamp(21px,2vw,28px)}
 body.motion-enabled .service-stage .service-feature{min-height:0;height:240px;padding:22px 32px;display:grid;grid-template-columns:1.2fr .8fr;gap:28px}
 body.motion-enabled .service-feature .feature-copy h3{font-size:29px;max-width:none;margin:9px 0 8px}
 body.motion-enabled .service-feature .feature-copy p{font-size:14px;max-width:650px;line-height:1.43;margin:0}
 body.motion-enabled .service-feature .feature-side .feature-glyph{font-size:47px;margin:0;align-self:flex-end}
 body.motion-enabled .service-feature .feature-outcome{padding-top:10px;margin-top:0;font-size:12px;line-height:1.25}
 body.motion-enabled .service-stage-foot{display:flex;margin-top:17px;flex:none}
 body.motion-enabled .model-scroll-scene{height:235svh}
 body.motion-enabled .model-stage{position:sticky;top:86px;height:calc(100svh - 86px);min-height:674px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding-block:30px 25px}
 body.motion-enabled .models-section{padding:0 0 115px}
 body.motion-enabled .model-stage .model-intro{margin-bottom:28px}
 body.motion-enabled .model-stage .model-intro h2{font-size:clamp(44px,4.6vw,67px);margin-top:15px}
 body.motion-enabled .model-stage .model-tab{min-height:105px;padding:17px 23px;gap:12px}
 body.motion-enabled .model-stage .model-panel{min-height:255px;padding:33px 40px}
 body.motion-enabled .model-stage .model-panel h3{font-size:35px}
 body.motion-enabled .model-stage-foot{display:flex}
 body.motion-enabled .model-after .comparison{margin-top:45px}
}
@media(max-width:999px), (max-height:849px){
 .services-section{height:auto;padding:76px 0 95px}
 .service-stage{position:relative;height:auto;padding:0}
 .service-rail-window{overflow:visible}
 .service-stage .service-grid{transform:none!important}
 .service-stage-foot,.model-stage-foot{display:none}
 .model-scroll-scene{height:auto}
 .models-section{padding:90px 0 105px}
 .model-stage{height:auto;position:relative}
}
@media(max-width:780px){
 .hero{min-height:0}
 .hero .hero-inner{min-height:0}
 .hero-visual{transform:none!important;opacity:1!important}
 body.motion-enabled .story-section{height:145svh}
 body.motion-enabled .story-sticky{top:70px;height:calc(100svh - 70px);padding-block:30px}
 .story-words{font-size:clamp(47px,10vw,72px)}
 .story-words[lang="ar"]{font-size:clamp(42px,9vw,70px)}
 .story-overline,.story-bottom{font-size:10px;letter-spacing:.09em}
 .story-scroll{display:none}
 .mirai-marquee span{font-size:55px}
}
@media(max-width:600px){
 .hero::before{width:120vw;left:-20%;right:auto;top:27%;height:55%}
 .story-words{font-size:clamp(45px,11.8vw,62px);line-height:1.1}
 .story-words[lang="ar"]{font-size:clamp(43px,10.5vw,59px);line-height:1.35}
 .story-sticky{padding-block:25px}
 .story-bottom{display:block;line-height:1.6}
 .services-section{padding:75px 0 90px}
 .service-stage .service-layout{display:grid}
 .models-section{padding:80px 0 95px}
 .model-stage::before{font-size:150px;top:4%}
 .choice:hover,[dir="rtl"] .choice:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important}
 .site-header,.inner-header,.hero .eyebrow,.hero h1,.hero .hero-lead,.hero .hero-actions,.hero .hero-note,.hero .hero-visual,.hero .hero-art,.interior-page .inner-hero-grid>div:first-child,.interior-page .inner-hero-art,.interior-page .inner-hero-art img,.choice,.result-title,.result-explain,.result-reasons,.result-actions,.service-feature .feature-copy,.service-feature .feature-side,.model-panel>div{animation:none!important;filter:none!important;opacity:1!important;transform:none!important}
 .hero::before,.mirai-marquee-track{animation:none!important}
 .hero .hero-bottom::before{animation:none!important;transform:scaleX(1)!important}
 .story-words>span{color:#faf5ed!important;transition:none!important}
 .story-words>span:last-child{color:var(--orange)!important}
 .service-stage .service-grid{transform:none!important;will-change:auto}
 body.motion-ready .motion-reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
 .mirai-page-progress,.story-progress,.service-scroll-progress,.model-scroll-progress{display:none!important}
 .interior-page .inner-card,.service-stage .service-card,.model-tab,.choice{transition:none!important}
}