/* The approved segmented O is used in both the live geometry and static fallback. */
.hero-art{inset:8% -1% auto auto;width:58%;height:80%;display:grid;place-items:center}
.hero-art img{width:86%;height:86%;object-fit:contain;transform:none;transition:none}
html[dir=rtl] .hero-art{inset:8% auto auto -1%;transform:none}
.hero.has-kinetic .hero-art{opacity:0}
.kinetic-stage{position:absolute;inset-inline-end:-1%;top:8%;width:58%;height:80%;z-index:-1;pointer-events:none;opacity:0;transition:opacity .8s;background:radial-gradient(ellipse at 50% 45%,#25262866,transparent 65%)}
.has-kinetic .kinetic-stage{opacity:1}
.kinetic-stage canvas{position:absolute;width:100%;height:100%;inset:0;z-index:2}
.kinetic-stage::after{content:'';position:absolute;bottom:0;left:22%;width:56%;height:8%;background:radial-gradient(ellipse,#65091644,transparent 68%);filter:blur(12px)}
.kinetic-orbit{position:absolute;inset:14% 12%;border:1px solid #ffffff0d;border-radius:50%;transform:rotate(-25deg);animation:orbit-spin 38s linear infinite}
.kinetic-orbit::before{content:'';position:absolute;top:50%;left:-3px;width:5px;height:5px;background:#E10600;border-radius:50%;box-shadow:0 0 14px #E10600}
.kinetic-orbit::after{content:'';position:absolute;top:8%;right:20%;width:35px;height:1px;background:#ffffff38;transform:rotate(38deg)}
.kinetic-caption{display:none}
.hero.has-kinetic::after{background:linear-gradient(90deg,#0b0b0b22,transparent 53%)}
html[dir=rtl] .hero.has-kinetic::after{background:linear-gradient(270deg,#0b0b0b22,transparent 53%)}
.hero-copy{position:relative;z-index:3;width:55%}
.hero h1{font-size:clamp(52px,5.1vw,75px);line-height:1.08}
html[lang=ar] .hero h1{font-size:clamp(45px,5.2vw,75px);line-height:1.38}
.hero .lede{max-width:490px}
.motion-toggle{display:inline-flex;align-items:center;gap:10px;border:0;background:none;color:#bcb8b8;padding:10px 0;min-height:40px;cursor:pointer;font:11px var(--en);letter-spacing:0;text-transform:none}
html[lang=ar] .motion-toggle{font:13px var(--ar)}
.motion-toggle:disabled{cursor:default;opacity:.65}
.motion-symbol{display:inline-block;width:9px;height:10px;border-inline:2px solid currentColor;flex:none}
.motion-toggle[aria-pressed=true] .motion-symbol{border:0;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor}
.hero-bottom .motion-toggle span{max-width:none}
.hero-bottom{z-index:5}
.month-tag{display:inline-flex;border:1px solid #E1060066;color:#f3eeee;padding:7px 13px;font-size:11px;letter-spacing:.12em;margin-bottom:19px;align-items:center;gap:8px}
.month-tag::before{content:'';width:5px;height:5px;background:var(--red);border-radius:50%}
html[lang=ar] .month-tag{letter-spacing:0;font-size:14px}
.result-metrics .result-main strong{color:#fff}
.service-graphic{height:125px;margin:22px 0 10px;position:relative;overflow:hidden;display:grid;place-items:center;background:#e8e7e4;border:1px solid #d9d7d4}
.service-graphic svg{width:150px;height:118px;overflow:visible}
.service-graphic *{animation-play-state:paused!important}
.service.motion-visible .service-graphic *{animation-play-state:running!important}
.service h3{margin-top:25px}
.g-orbit{transform-origin:80px 60px;animation:orbit-spin 12s linear infinite}
.g-orbit.slow{animation-duration:20s;animation-direction:reverse}
.g-target{transform-origin:80px 60px;animation:target-pulse 4s ease-in-out infinite}
.g-layout-a{animation:layout-shift 7s cubic-bezier(.65,0,.35,1) infinite}
.g-layout-b{animation:layout-shift 7s cubic-bezier(.65,0,.35,1) infinite reverse}
.g-frame{transform-origin:80px 60px;animation:frame-turn 9s cubic-bezier(.65,0,.35,1) infinite}
.g-scan{animation:scan-light 5s ease-in-out infinite}
.g-bar{transform-origin:center 88px;animation:bar-rise 4s ease-in-out infinite}
.g-bar:nth-child(2){animation-delay:-1s}.g-bar:nth-child(3){animation-delay:-2s}
.g-data{stroke-dasharray:20 140;animation:data-flow 5s linear infinite}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
@keyframes target-pulse{0%,100%{transform:scale(.88)}50%{transform:scale(1.08)}}
@keyframes layout-shift{0%,20%,100%{transform:translateY(0)}45%,65%{transform:translateY(-11px)}}
@keyframes frame-turn{0%,20%,100%{transform:rotate(-8deg)}45%,70%{transform:rotate(8deg)}}
@keyframes scan-light{0%,100%{transform:translateX(-29px);opacity:.4}50%{transform:translateX(29px);opacity:1}}
@keyframes bar-rise{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
@keyframes data-flow{to{stroke-dashoffset:-160}}
.motion-paused .kinetic-orbit,.motion-paused .service-graphic *{animation-play-state:paused!important}
.hero:not(.motion-in-view) .kinetic-orbit{animation-play-state:paused}
@media(max-width:1100px) and (min-width:801px){.hero h1{font-size:56px}html[lang=ar] .hero h1{font-size:55px}.kinetic-stage{width:55%;inset-inline-end:-3%;top:12%;height:70%}}
@media(max-width:800px){.hero-copy{width:100%;max-width:630px;padding-bottom:415px}.hero h1{font-size:clamp(46px,7.7vw,65px)}html[lang=ar] .hero h1{font-size:clamp(44px,7vw,60px)}.kinetic-stage{width:520px;height:405px;inset-inline-end:calc(50% - 260px);top:auto;bottom:43px}.hero.has-kinetic::after,html[dir=rtl] .hero.has-kinetic::after{background:linear-gradient(180deg,#0b0b0b00 65%,#0b0b0b22)}.kinetic-caption{bottom:2%;font-size:8px}.hero-bottom span:first-child{max-width:55%}.service-graphic{height:145px}.service-graphic svg{height:135px;width:175px}}
@media(max-width:480px){.hero-copy{padding-top:47px;padding-bottom:375px}.hero h1{font-size:44px}html[lang=ar] .hero h1{font-size:39px}.hero .lede{font-size:14px}html[lang=ar] .hero .lede{font-size:16px}.hero-actions{margin-top:24px}.kinetic-stage{width:390px;height:320px;inset-inline-end:calc(50% - 195px);bottom:43px}.kinetic-caption{font-size:7px;bottom:2%}.hero-bottom{bottom:12px;font-size:8px}.motion-toggle{font-size:10px}html[lang=ar] .motion-toggle{font-size:12px}.service-graphic{height:150px}.service-graphic svg{width:185px;height:145px}.month-tag{font-size:10px}}
@media(prefers-reduced-motion:reduce){.kinetic-orbit,.service-graphic *{animation:none!important}.kinetic-stage{transition:none}}
@media(max-width:800px){.hero-art,html[dir=rtl] .hero-art{width:520px;height:405px;inset:auto auto 43px;left:calc(50% - 260px)}}
@media(max-width:480px){.hero-art,html[dir=rtl] .hero-art{width:390px;height:320px;left:calc(50% - 195px)}}

/* Studio presentation: no decorative orbit or fragmented construction. */
.kinetic-orbit{display:none}
.kinetic-stage{background:radial-gradient(ellipse at 58% 42%,#26232750,transparent 65%)}
.kinetic-stage::after{left:25%;bottom:8%;width:53%;height:7%;background:radial-gradient(ellipse,#000c 0%,#0006 34%,transparent 70%);filter:blur(12px);transform:rotate(-6deg)}
.hero-art img{filter:drop-shadow(0 28px 24px #0006)}

/* Approved construction scene, isolated from site layout. */
.kinetic-stage{background:none;top:2%;height:94%;width:57%;inset-inline-end:0}
.kinetic-stage::after{display:none}.kinetic-stage iframe{border:0;display:block;width:100%;height:100%;pointer-events:none}
.hero.has-kinetic::after,html[dir=rtl] .hero.has-kinetic::after{background:none}
.hero-art img{width:100%;height:100%;filter:none}
@media(max-width:1100px) and (min-width:801px){.kinetic-stage{width:54%;inset-inline-end:0;top:4%;height:88%}}
@media(max-width:800px){.kinetic-stage{width:min(620px,100%);height:415px;inset-inline-end:0;left:0;right:0;margin:auto;top:auto;bottom:43px}.hero-copy{padding-bottom:425px}}
@media(max-width:480px){.kinetic-stage{width:100%;height:330px;bottom:43px}.hero-copy{padding-bottom:345px}}
.kinetic-stage,.hero-art{mask-image:linear-gradient(to bottom,#000 84%,transparent 100%),linear-gradient(to right,transparent 0%,#000 7%,#000 94%,transparent 100%);mask-composite:intersect}