.hero-art--creative .art-index{margin-bottom:14px}
.creative-stage{height:510px;margin-right:15px;position:relative;isolation:isolate;border:1px solid rgba(239,189,104,.22);background-color:#132532;background-image:linear-gradient(rgba(247,244,238,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(247,244,238,.035) 1px,transparent 1px);background-size:44px 44px;overflow:hidden}
.creative-stage::before,.creative-stage::after{content:'';position:absolute;width:10px;height:10px;border-color:var(--gold);border-style:solid;z-index:7;pointer-events:none}
.creative-stage::before{top:0;left:0;border-width:1px 0 0 1px}.creative-stage::after{bottom:0;right:0;border-width:0 1px 1px 0}
.stage-label{position:absolute;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#dce1e1;z-index:5;line-height:1.5}
.stage-label--digital{left:23px;top:21px}.stage-label--physical{right:22px;top:79px;color:var(--gold)}
.concept-device{position:absolute;left:6%;top:63px;width:39%;max-width:214px;border:1px solid #71818b;border-radius:13px;background:#0b1720;padding:10px;transform:rotate(-9deg);box-shadow:8px 17px 0 rgba(0,0,0,.14);z-index:3}
.device-top{display:flex;align-items:center;gap:3px;font-size:7px;letter-spacing:.01em;line-height:1;margin-bottom:10px;color:var(--white)}
.device-top>span{margin-right:auto}.device-top>i{height:2px;width:2px;border-radius:50%;background:var(--white);display:block}
.device-design{width:100%;background:var(--gold)}.studio-artwork{width:100%;height:auto;display:block}
.device-bottom{display:flex;align-items:center;gap:7px;padding-top:10px}.device-bottom>span{display:block;height:5px;width:5px;border:1px solid #a7b2ba;transform:rotate(45deg)}.device-bottom>span:nth-child(2){border-radius:50%;transform:none}.device-bottom>span:nth-child(3){width:7px;height:1px;border:0;background:#a7b2ba;transform:rotate(-35deg)}.device-bottom>i{width:20px;height:2px;background:#5c6c77;margin-left:auto}
.concept-room{position:absolute;width:58%;height:290px;right:-1%;top:113px;transform:rotate(4deg);z-index:2}
.room-surfaces{width:100%;height:100%;display:block;filter:drop-shadow(4px 15px 3px rgba(0,0,0,.12))}
.printed-design{position:absolute;left:14%;top:12%;width:44%;transform:skewY(3deg);overflow:hidden}
.wall-scanline{position:absolute;top:0;left:0;width:100%;height:2px;background:#fff3d8;box-shadow:0 0 10px #fff3d8;animation:studio-print 2.3s ease .6s both;pointer-events:none}
@keyframes studio-print{0%{top:0;opacity:0}12%{opacity:1}86%{opacity:1}100%{top:100%;opacity:0}}
.stage-flow{position:absolute;left:34%;top:28%;width:30%;height:94px;z-index:4;pointer-events:none;filter:drop-shadow(0 1px 2px #132532)}
.stage-concept-label{position:absolute;left:24px;top:404px;z-index:4;font-size:8px;color:#a9b6bd;letter-spacing:.04em}
.stage-services{position:absolute;left:24px;bottom:25px;display:flex;flex-direction:column;gap:8px}
.stage-services>span{display:flex;align-items:center;gap:9px;font-size:10px;color:#c9d2d4;line-height:1.5}
.stage-services i{display:block;width:4px;height:4px;background:var(--gold);border-radius:50%}
.hero-clip{position:absolute;right:20px;bottom:21px;width:49%;max-width:270px;height:142px;overflow:hidden;border:5px solid #132532;outline:1px solid #87908c;background:#0b141c;z-index:6}
.hero-clip video{display:block;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-clip-shade{position:absolute;inset:0;background:linear-gradient(transparent 38%,rgba(8,17,24,.94));pointer-events:none}
.hero-clip-caption{position:absolute;left:10px;right:47px;bottom:10px;color:#fff8ef;font-size:10px;font-weight:600;line-height:1.4;pointer-events:none}
.hero-clip-caption>span,.hero-clip-caption>small{display:block}.hero-clip-caption>small{font-size:7px;font-weight:400;letter-spacing:.03em;color:#d4dade;margin-top:4px}
.hero-motion-toggle{position:absolute;right:9px;bottom:11px;width:30px;height:30px;border:1px solid rgba(255,255,255,.5);border-radius:50%;color:var(--white);background:rgba(15,27,38,.65);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:6px}
.hero-motion-toggle svg{width:17px;height:17px}.hero-motion-toggle:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.hero-motion-toggle[data-playing=true] .motion-play,.hero-motion-toggle[data-playing=false] .motion-pause{display:none}
.hero-art--creative .hero-art-bottom{margin-top:26px}.hero-art--creative .art-coordinate{right:-44px}
@media(max-width:1150px){.creative-stage{height:485px}.concept-device{left:5%;width:40%;top:68px;padding:8px}.concept-room{top:122px;height:250px;width:59%}.stage-concept-label{top:372px}.hero-clip{height:132px;right:16px;width:49%;bottom:21px}.stage-services{left:18px}.stage-label--digital{left:18px}.stage-label--physical{right:17px}}
@media(max-width:960px) and (min-width:761px){.creative-stage{height:450px;margin-right:8px}.concept-device{top:61px;width:42%;left:6%;padding:7px;transform:rotate(-7deg)}.device-top{font-size:6px;gap:2px;margin-bottom:7px}.device-bottom{padding-top:8px}.concept-room{top:116px;height:232px;width:58%;right:-3%}.stage-flow{top:28%;left:35%;width:31%;height:72px}.stage-concept-label{top:293px;left:18px;font-size:7px}.stage-label{font-size:7px}.stage-label--physical{top:85px}.hero-clip{width:52%;height:125px;right:12px;bottom:19px}.hero-clip-caption{font-size:8px;left:8px;right:38px}.hero-clip-caption>small{font-size:6px}.hero-motion-toggle{width:27px;height:27px;right:7px;bottom:9px}.stage-services{font-size:9px;left:16px;bottom:24px;gap:6px}.stage-services>span{font-size:9px;gap:7px}.hero-art--creative .hero-art-bottom p{max-width:205px}}
@media(max-width:760px){.creative-stage{height:485px;margin-right:6px}.concept-device{top:63px;left:6%;width:39%;max-width:190px;padding:9px}.concept-room{top:111px;right:0;width:57%;height:277px}.stage-label--digital{left:20px}.stage-label--physical{right:20px;top:78px}.stage-flow{top:29%;height:90px;left:35%;width:29%}.stage-concept-label{top:372px;left:23px}.hero-clip{height:137px;width:49%;right:17px;bottom:21px}.stage-services{left:23px;bottom:27px}.hero-art--creative .hero-art-bottom p{max-width:none}.hero-art--creative .hero-art-bottom{margin-top:23px}}
@media(max-width:500px){.creative-stage{height:425px}.concept-device{left:6%;top:61px;width:41%;padding:7px;border-radius:11px}.device-top{font-size:6px;gap:2px;margin-bottom:7px}.device-bottom{padding-top:8px;gap:6px}.concept-room{top:112px;width:59%;right:-3%;height:239px}.stage-flow{top:31%;left:37%;height:72px;width:28%}.stage-label{font-size:8px}.stage-label--digital{left:17px;top:20px}.stage-label--physical{right:16px;top:82px}.stage-concept-label{top:300px;left:19px;font-size:7px}.stage-services{left:19px;bottom:24px;gap:7px}.stage-services>span{font-size:9px}.hero-clip{height:116px;width:52%;right:12px;bottom:18px;border-width:4px}.hero-clip-caption{font-size:8px;left:7px;right:37px;bottom:8px}.hero-clip-caption>small{font-size:6px;margin-top:3px}.hero-motion-toggle{height:26px;width:26px;right:7px;bottom:8px;padding:5px}.hero-motion-toggle svg{width:15px;height:15px}}
@media(max-width:370px){.creative-stage{height:405px}.concept-device{width:41%;left:5%;top:63px}.concept-room{top:110px;height:220px}.stage-concept-label{top:280px;left:17px}.stage-services{left:17px;bottom:23px}.hero-clip{height:108px;right:10px;bottom:18px}.hero-clip-caption{font-size:7px;right:33px}.stage-label{font-size:7px}}
@media(max-width:500px){.concept-device{max-width:145px}}
@media(prefers-reduced-motion:reduce){.wall-scanline{display:none}}