/* Small, live compositions. All motion is paused until observed in view. */
.demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:30px;color:var(--slate);font-size:12px}.demo-toggle{font:inherit;color:var(--graphite);background:transparent;border:1px solid var(--linen);border-radius:30px;padding:8px 12px;cursor:pointer}.demo-toggle span{margin-left:8px}.demo-toggle:focus-visible{outline:2px solid var(--safety-orange);outline-offset:4px}.demo-toolbar+.is-izgara{margin-top:14px}
.site-demo{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1.35;background:#eeeae2;border-bottom:1px solid var(--linen);padding:27px 22px 42px;color:#292923;font-family:var(--font-ui);container-type:inline-size}.demo-launch{background:#e8e8df}.demo-connected{background:#e9e4db}.demo-orbit{position:absolute;width:80%;aspect-ratio:1;border:1px solid #d4cdbd;border-radius:50%;left:38%;top:-36%;z-index:-1}.demo-orbit:after{content:'';position:absolute;inset:-28px;border:1px solid #d4cdbd;border-radius:50%;opacity:.5}
.demo-browser{position:relative;height:100%;background:#fffdf7;border:1px solid #d0cabe;border-radius:10px;overflow:hidden;box-shadow:0 14px 26px -16px #59503d66;transform:translateY(0);transition:transform .6s}.is-kart:hover .demo-brand>.demo-browser{transform:translateY(-3px)}.demo-chrome{height:25px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;gap:7px;border-bottom:1px solid #e8e2d7;background:#f8f6f0;font-size:8px;color:#8b8579}.demo-dots{font-size:7px;letter-spacing:2px;color:#c6c0b5}.demo-caption{position:absolute;left:22px;right:22px;bottom:15px;display:flex;align-items:center;gap:6px;font-size:9px;color:#777165}.demo-caption>span:last-child{margin-left:auto;font-size:8px;letter-spacing:1px}.demo-live-dot{height:5px;width:5px;border-radius:50%;background:#f34b18}.site-demo small{display:block;font-size:7px;letter-spacing:1px;color:#807867}.demo-title{font-family:var(--font-display);font-size:clamp(18px,7cqw,36px);line-height:1.07;letter-spacing:-.6px;font-weight:500}.demo-title>span{color:#fa4a16}.demo-link{font-size:8px;display:block}.demo-cta{display:inline-flex;align-items:center;justify-content:center;background:#fa4a16;color:#fffdf7;padding:8px 12px;font-size:8px;border-radius:5px}.brand-nav{display:flex;align-items:center;justify-content:space-between;padding:13px 15px 9px}.brand-nav strong{font-size:15px;letter-spacing:-1px}.brand-nav strong>span{font-size:8px;margin-left:2px;vertical-align:top}.brand-nav>div{display:flex;gap:10px;font-size:7px}.brand-tab{position:relative;padding-bottom:3px;color:#8b8579}.brand-tab:after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:#fa4a16;transform:scaleX(0)}.brand-pages{position:relative;height:calc(100% - 65px)}.brand-page{position:absolute;inset:0;padding:8px 15px 12px;opacity:0;transform:translateY(12px)}.brand-page small{margin-bottom:9px}.brand-home{opacity:1;transform:none}.brand-art{height:60px;display:flex;gap:6px;align-items:center;margin:13px 0 10px;overflow:hidden;background:#e9e4d9;border-radius:5px;padding-left:13px}.brand-art i{display:block;height:80px;width:36%;background:#f54b20;transform:rotate(-30deg);border-radius:40px}.brand-art i:nth-child(2){background:#cabda4}.brand-art i:nth-child(3){background:#333b30}.project-pair{display:flex;gap:7px;margin-top:12px}.project-pair>div{position:relative;background:#ddd6c8;flex:1;height:86px;overflow:hidden;border-radius:4px}.project-pair>div:nth-child(2){background:#333c30}.project-pair span{position:absolute;bottom:7px;left:8px;font-size:7px}.project-pair>div:nth-child(2) span{color:#faf5e8}.project-sculpture{position:absolute;width:40px;height:65px;background:#f54b20;border-radius:40px 40px 0 0;transform:rotate(25deg);left:34%;top:5px}.project-circle{position:absolute;border:12px solid #d4c5a4;width:58px;height:58px;border-radius:50%;left:28%;top:4px}.contact-note{font-size:9px;margin-top:25px;border-top:1px solid #e3dccd;padding-top:15px}.contact-note .demo-cta{display:flex;width:max-content;margin-top:15px}
.launch-window{height:calc(100% - 25px);position:relative;overflow:hidden}.launch-scroll{height:300%;will-change:transform}.launch-scroll>div{height:33.3333%;padding:15px 20px;box-sizing:border-box;overflow:hidden;position:relative}.launch-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.launch-nav strong{font-size:14px;letter-spacing:-.5px}.launch-nav>span{font-size:6px}.launch-hero .demo-title{margin-top:9px;position:relative;z-index:1}.launch-hero .demo-title em{font-weight:400}.launch-hero .demo-link{margin-top:16px;position:relative;z-index:1}.launch-art{position:absolute;right:-8px;bottom:4px;width:40%;height:66%;transform:rotate(-22deg)}.launch-art i{position:absolute;width:68%;height:85%;border-radius:100px;background:#c2c6ac;box-shadow:inset -7px -7px 15px #75835c33;right:10%;top:0}.launch-art i:nth-child(2){right:38%;top:24%;background:#dee0cd}.launch-art i:nth-child(3){right:-14%;top:16%;background:#f75523}.launch-details{background:#333d32;color:#faf4e5}.launch-details small{color:#c0c9b8}.launch-details .demo-title{margin:12px 0 16px;font-size:6.7cqw}.launch-feature{border-top:1px solid #ffffff29;padding:10px 0;font-size:10px;display:flex;align-items:center;gap:10px}.launch-feature span{color:#aeb99f;font-size:8px}.launch-feature b{margin-left:auto;font-weight:400}.launch-convert{background:#f1e9d9;display:flex;flex-direction:column;justify-content:center}.launch-convert .demo-title{margin:12px 0 19px;font-size:6.5cqw}.launch-email{border-bottom:1px solid #bcb19d;font-size:9px;padding:8px 0;margin-bottom:9px}.launch-email>span{float:right}.launch-success{position:absolute;bottom:16px;font-size:9px;opacity:0;color:#48513b}.launch-rail{position:absolute;right:4px;top:8px;bottom:8px;width:2px;background:#897f6115}.launch-rail i{display:block;height:30%;background:#f45420;border-radius:5px}
.demo-connected{padding-left:14px;padding-right:14px}.connected-layout{position:relative;height:100%;display:flex;align-items:center;gap:18px}.connected-layout .demo-browser{width:calc(50% - 9px);height:90%;flex-shrink:0}.connected-site{transform:translateY(-9px)}.connected-panel{transform:translateY(10px)}.connected-layout .demo-chrome{font-size:6px;padding:0 7px;gap:2px}.connected-layout .demo-dots{font-size:5px;letter-spacing:0}.connected-body{padding:12px 10px}.connected-body small{font-size:5px;letter-spacing:.6px}.connected-body .demo-title{font-size:5.6cqw;margin:9px 0 16px}.demo-field{border:1px solid #e2dbcf;border-radius:4px;padding:5px 6px;margin-bottom:6px;min-height:30px}.demo-field>span{display:block;color:#96907f;font-size:6px}.demo-field>b{display:block;white-space:nowrap;overflow:hidden;font-size:8px;font-weight:400;margin-top:3px;clip-path:inset(0 100% 0 0)}.connected-send{width:100%;padding:7px 3px;font-size:7px;margin-top:3px}.data-bridge{position:absolute;height:1px;background:#c9bca5;left:calc(50% - 9px);width:18px;top:53%;z-index:2}.data-bridge i{position:absolute;left:-3px;top:-2px;width:5px;height:5px;border-radius:50%;background:#fa4a16;opacity:0}.data-bridge>span{position:absolute;right:-1px;top:-8px;font-size:12px;color:#a89b82}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.panel-heading strong{font-size:12px}.panel-heading>span{font-size:5px;letter-spacing:1px;color:#78866e}.panel-row{display:flex;align-items:center;gap:5px;padding:9px 0;border-top:1px solid #e7e1d6;font-size:7px}.panel-row>i{display:grid;place-items:center;font-size:6px;font-style:normal;background:#e4ddcb;border-radius:50%;height:20px;width:20px;flex-shrink:0}.panel-row small{margin-top:3px;letter-spacing:0}.panel-row>span{margin-left:auto}.incoming-row{background:#f8ead8;border-radius:4px;opacity:0;transform:translateY(8px)}.incoming-row>i{background:#f44e20;color:white}.panel-placeholder{height:22px;border-bottom:1px solid #e9e4da}.sync-note{margin-top:12px;font-size:7px;color:#58624c;opacity:0}
/* One twelve-second cycle per story; shared pause state preserves the frame. */
.motion-ready .brand-page{animation:brandPage 12s infinite both}.motion-ready .brand-work{animation-delay:-8s}.motion-ready .brand-contact{animation-delay:-4s}.motion-ready .brand-tab:after{animation:brandTab 12s infinite}.motion-ready .tab-work:after{animation-delay:-8s}.motion-ready .tab-contact:after{animation-delay:-4s}.motion-ready .launch-scroll{animation:launchScroll 12s infinite}.motion-ready .launch-rail i{animation:launchRail 12s infinite}.motion-ready .launch-success{animation:launchSuccess 12s infinite}.motion-ready .field-name{animation:fieldName 12s infinite}.motion-ready .field-project{animation:fieldProject 12s infinite}.motion-ready .connected-send{animation:sendEnquiry 12s infinite}.motion-ready .data-bridge i{animation:dataPacket 12s infinite}.motion-ready .incoming-row,.motion-ready .sync-note{animation:receiveEnquiry 12s infinite}.site-demo *, .site-demo *:after{animation-play-state:paused!important}.site-demo.is-playing *, .site-demo.is-playing *:after{animation-play-state:running!important}
@keyframes brandPage{0%,27%{opacity:1;transform:translateY(0)}32%,94%{opacity:0;transform:translateY(-9px)}95%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}@keyframes brandTab{0%,28%{transform:scaleX(1)}33%,95%{transform:scaleX(0)}100%{transform:scaleX(1)}}@keyframes launchScroll{0%,25%,100%{transform:translateY(0)}33%,55%{transform:translateY(-33.3333%)}63%,92%{transform:translateY(-66.6666%)}}@keyframes launchRail{0%,25%,100%{transform:translateY(0)}33%,55%{transform:translateY(110%)}63%,92%{transform:translateY(225%)}}@keyframes launchSuccess{0%,73%,96%,100%{opacity:0;transform:translateY(4px)}78%,91%{opacity:1;transform:translateY(0)}}@keyframes fieldName{0%,8%,100%{clip-path:inset(0 100% 0 0)}22%,94%{clip-path:inset(0 0 0 0)}}@keyframes fieldProject{0%,24%,100%{clip-path:inset(0 100% 0 0)}38%,94%{clip-path:inset(0 0 0 0)}}@keyframes sendEnquiry{0%,40%,55%,100%{transform:scale(1);background:#fa4a16}46%{transform:scale(.94);background:#bf3611}}@keyframes dataPacket{0%,47%,69%,100%{opacity:0;transform:translateX(0)}49%{opacity:1;transform:translateX(0)}64%{opacity:1;transform:translateX(18px)}}@keyframes receiveEnquiry{0%,62%,100%{opacity:0;transform:translateY(8px)}69%,94%{opacity:1;transform:translateY(0)}}
@media(min-width:901px) and (max-width:1100px){.site-demo{padding:18px 12px 37px;aspect-ratio:1.12}.demo-connected{padding-left:8px;padding-right:8px}.demo-caption{left:12px;right:12px;font-size:8px}.brand-nav{padding-left:10px;padding-right:10px}.brand-page{padding-left:10px;padding-right:10px}.connected-body{padding:10px 6px}}
@media(max-width:900px){.site-demo{aspect-ratio:1.5;padding:25px 30px 44px}.demo-browser{max-width:540px;margin:auto}.site-demo{container-type:normal}.demo-title{font-size:30px}.launch-details .demo-title,.launch-convert .demo-title{font-size:28px}.connected-body .demo-title{font-size:25px}.brand-art{height:80px}.brand-pages{height:calc(100% - 65px)}.brand-page{padding:14px 20px}.connected-layout{max-width:540px;margin:auto}.launch-scroll>div{padding-left:25px;padding-right:25px}}
@media(max-width:480px){.site-demo{aspect-ratio:1.1;padding:22px 16px 40px}.demo-connected{padding:20px 12px 40px}.demo-title{font-size:27px}.launch-details .demo-title,.launch-convert .demo-title{font-size:26px}.connected-body .demo-title{font-size:21px}.demo-toolbar{font-size:10px;gap:8px}.demo-toggle{white-space:nowrap}.demo-caption{left:16px;right:16px}.brand-art{height:65px}.connected-body{padding:12px 8px}}
@media(prefers-reduced-motion:reduce){.site-demo *, .site-demo *:after{animation:none!important;transition:none!important}.brand-work,.brand-contact{opacity:0}.brand-home{opacity:1;transform:none}.incoming-row,.sync-note{opacity:1;transform:none}.demo-field>b{clip-path:none}.tab-home:after{transform:scaleX(1)}}
/* Keep the complete action visible inside compact desktop previews. */
@media(min-width:901px){.brand-nav{padding-top:9px;padding-bottom:6px}.brand-page{padding-top:5px}.brand-page small{margin-bottom:7px}.contact-note{margin-top:14px;padding-top:11px}.contact-note .demo-cta{margin-top:11px}.brand-art{height:48px;margin:10px 0 8px}.project-pair>div{height:68px}.connected-body .demo-title{margin:7px 0 10px;font-size:5cqw}.connected-body{padding:9px 8px}.demo-field{min-height:27px;padding:4px 5px}.panel-heading{margin-bottom:10px}.panel-row{padding:7px 0}.panel-placeholder{height:18px}}
@media(min-width:1101px){.site-demo{aspect-ratio:1.2}}
@media(max-width:480px){.site-demo{aspect-ratio:.95}}