@font-face{font-family:Onest;src:url('/assets/motion/onest.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{--motion-font:Onest;--paper:#f5f5f0;--surface:#fcfcf9;--panel:#e9ebe3;--ink:#22251e;--muted:#63675d;--line:#d6d9cf;--lime:#d9ef99;--accent-ink:#22251e;--control-height:42px;color-scheme:light}
body,.btn,.nav-links,.case-hint{font-family:var(--motion-font),Arial,sans-serif}button,input{font-family:inherit}
.motion-controls{position:fixed;top:0;left:0;right:0;height:var(--control-height);z-index:31;display:flex;align-items:center;gap:14px;padding:0 var(--pad);background:var(--surface);border-bottom:1px solid var(--line);font-family:var(--motion-font),Arial,sans-serif;color:var(--ink)}.motion-controls-title{font-size:10px;color:var(--muted)}.motion-theme{margin-left:auto;font-size:10px;border:1px solid var(--line);border-radius:6px;min-height:28px;padding:4px 9px;background:transparent;color:var(--ink)}.palette-return{font-size:10px;color:var(--muted);white-space:nowrap}.nav{top:var(--control-height);height:72px;background:var(--paper)}.nav.scrolled{background:var(--paper)}.btn-ink{background:var(--ink);color:var(--paper)}.pop .btn{background:var(--lime);color:var(--accent-ink)}.project-stage{background:var(--panel)}.dot,.hero-period{color:#719100}.dots i.on{background:#718b27}html{scroll-padding-top:132px}.skip-link{z-index:40}.skip-link:focus{top:45px}
.motion-story{padding:0!important;position:relative}.motion-stage{position:relative;isolation:isolate;height:100svh;min-height:700px;overflow:hidden;background:var(--paper)}.motion-intro{position:absolute;z-index:3;top:calc(140px + 3svh);left:var(--pad);right:var(--pad);pointer-events:none}.motion-kicker{font-size:12px;letter-spacing:.01em;color:var(--muted);margin-bottom:28px}.motion-heading{font-family:var(--motion-font),Arial,sans-serif;font-size:clamp(62px,7.6vw,116px);font-weight:500;line-height:.99;letter-spacing:-.065em;margin:0}.motion-heading>span{display:block}.motion-period{color:#86a33e}.motion-description{position:absolute;z-index:3;top:57%;left:var(--pad);max-width:350px}.motion-description p{font-size:17px;line-height:1.65;color:var(--muted);margin-bottom:26px}.motion-description .btn{font-size:13px;min-height:48px;border-radius:10px;gap:24px;padding:15px 21px}.motion-case-link{display:flex;gap:15px;align-items:center;width:max-content;font-size:12px;margin-top:18px;padding-block:7px}.motion-case-link:hover{text-decoration:underline;text-underline-offset:5px}.motion-film{position:absolute;z-index:1;inset:0;clip-path:inset(43% 4.5% 6% 46% round 18px);background:var(--panel)}.motion-film video{width:100%;height:100%;object-fit:cover;object-position:62% 50%;display:block}.film-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(12,15,10,.72));opacity:0}.motion-caption{position:absolute;z-index:2;left:var(--pad);bottom:11%;right:var(--pad);font-size:clamp(36px,5.2vw,78px);font-weight:500;letter-spacing:-.055em;line-height:1.06;color:#fcfcf9;opacity:0;pointer-events:none}.motion-toggle{position:fixed;z-index:35;bottom:16px;right:var(--pad);font-size:10px;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:7px 10px;min-height:30px}.motion-fallback{position:absolute;z-index:5;right:var(--pad);bottom:57px;font-size:11px;color:var(--ink);background:var(--surface);padding:8px 12px;border-radius:6px}.motion-disabled .motion-caption{display:none}.motion-disabled .motion-film{clip-path:inset(43% 4.5% 6% 46% round 18px)}
/* A second, lighter rhythm: cases enter in sequence, without pinning. */
.motion-preview #keysy .h-sec{font-size:clamp(40px,5vw,70px);letter-spacing:-.055em}.motion-preview .work-grid{row-gap:64px}.motion-preview .work-img{border-radius:6px}.motion-preview .work-grid .work-wide{padding:0;background:transparent;gap:60px}.motion-preview .work-wide .work-name{font-family:var(--motion-font);font-size:clamp(34px,4vw,58px);font-weight:500;letter-spacing:-.05em}.motion-preview .work-name{font-family:var(--motion-font)}.motion-preview .work-wide .work-fact{font-size:16px;max-width:330px}.motion-preview #stats{padding-top:30px}.motion-preview .h-sec{font-family:var(--motion-font);font-weight:500;letter-spacing:-.045em}.motion-preview .faq-q{font-family:var(--motion-font)}
html[data-tone=dark]{color-scheme:dark;--paper:#171916;--surface:#20231e;--panel:#292e25;--ink:#f1f2e9;--muted:#adb4a5;--line:#3c4336;--lime:#d9ef99;--accent-ink:#22251e}html[data-tone=dark] .dot,html[data-tone=dark] .motion-period{color:var(--lime)}html[data-tone=dark] .form-msg{color:#ffb1a2}
@media(max-width:1200px){.motion-heading{font-size:8.1vw}.motion-intro{top:calc(134px + 3svh)}.motion-description{top:57%}.motion-preview .work-grid .work-wide{gap:32px}}
@media(max-width:900px){.motion-stage{min-height:850px}.motion-intro{top:147px}.motion-heading{font-size:clamp(55px,9vw,78px)}.motion-kicker{margin-bottom:24px}.motion-description{top:39%;max-width:300px}.motion-description p{font-size:15px}.motion-film{clip-path:inset(62% 3.5% 5% 3.5% round 12px)}.motion-disabled .motion-film{clip-path:inset(62% 3.5% 5% 3.5% round 12px)}.motion-caption{font-size:48px}.motion-preview .work-wide .work-fact{font-size:14px}.nav-links{top:71px}}
@media(max-width:600px){:root{--control-height:44px}.motion-controls{padding-inline:14px;gap:7px}.motion-controls-title{display:none}.palette-return{font-size:9px}.motion-theme{font-size:9px;padding-inline:7px}.nav{height:66px}.nav-links{top:65px}.motion-stage{height:100svh;min-height:800px}.motion-intro{top:144px}.motion-kicker{font-size:10px;margin-bottom:22px}.motion-heading{font-size:clamp(42px,10.8vw,65px);letter-spacing:-.06em;line-height:1.03}.motion-description{top:330px;max-width:330px}.motion-description p{font-size:14px;line-height:1.55;margin-bottom:20px}.motion-description p br:nth-child(1){display:none}.motion-description .btn{font-size:12px;padding:13px 17px;min-height:45px}.motion-case-link{display:inline-flex;margin:0 0 0 15px;font-size:11px;gap:7px}.motion-film{clip-path:inset(64% 5.6% 6% 5.6% round 12px)}.motion-film video{object-position:66% 50%}.motion-disabled .motion-film{clip-path:inset(64% 5.6% 6% 5.6% round 12px)}.motion-caption{font-size:37px;bottom:16%}.motion-toggle{bottom:12px;font-size:9px;padding:5px 8px;min-height:26px}.motion-preview .work-grid .work-wide{padding:0;gap:0}.motion-preview .work-wide .work-meta{padding:18px 0 0}.motion-preview .work-wide .work-fact{font-size:13px}.motion-preview .work-grid{row-gap:32px}.motion-preview #keysy .h-sec{font-size:40px}.motion-preview .work-wide .work-name{font-size:34px}.motion-fallback{font-size:10px;left:var(--pad);bottom:50px}}
@media(max-width:370px){.palette-return{display:none}.motion-heading{font-size:39px}.motion-description{top:316px}.motion-description p{max-width:270px}.motion-case-link{display:flex;margin:8px 0 0}.motion-caption{font-size:33px}.motion-film{clip-path:inset(67% 5.6% 6% 5.6% round 12px)}}
@media(prefers-reduced-motion:reduce){.motion-caption{display:none}.motion-toggle{display:none}}

.motion-preview .totop{bottom:65px}
/* One click: real interface → engineering → result → case. */
.motion-heading{font-size:clamp(58px,6.6vw,102px)}.motion-description{top:57%}.scroll-invitation{display:block;margin-top:32px;font-size:11px;color:var(--muted)}
.story-cinema{position:absolute;inset:0;background:#171914;clip-path:inset(45% 4.5% 6% 47% round 12px);perspective:1400px;color:#f6f7ee}.story-cinema .motion-film{inset:0;clip-path:none;opacity:0;background:#171914}.story-cinema .motion-film video{object-position:center;width:100%;height:100%;object-fit:cover}.story-cinema .film-shade{opacity:1;background:linear-gradient(180deg,rgba(12,15,10,.88),transparent 44%,transparent 62%,rgba(12,15,10,.9))}.screen-assembly{position:absolute;width:47%;left:48%;top:46%;transform-style:preserve-3d;aspect-ratio:1.6;z-index:2}.purchase-screen{position:absolute;inset:0;background:white;border-radius:5px;overflow:hidden;box-shadow:0 35px 90px #0005;backface-visibility:hidden}.purchase-screen img{display:block;width:100%;height:100%;object-fit:contain}.screen-layer{position:absolute;inset:0;border:1px solid #d5e4bc80;border-radius:6px;background:linear-gradient(120deg,#d5e4bc22,#ffffff06);opacity:0;box-shadow:inset 0 0 30px #fff1}.purchase-cursor{position:absolute;left:76%;top:92%;opacity:0;filter:drop-shadow(0 2px 3px #0005);width:clamp(14px,2vw,30px);height:auto}.click-ripple{position:absolute;left:72.58%;top:75.79%;width:5%;aspect-ratio:1;border:2px solid #c5e98c;border-radius:50%;transform:translate(-50%,-50%);opacity:0;box-shadow:0 0 20px #d9ef9988}
.story-copy{position:absolute;top:calc(140px + 2svh);left:var(--pad);right:var(--pad);z-index:4;opacity:0;pointer-events:none}.story-eyebrow{display:block;font-size:11px;letter-spacing:.045em;color:#c3cbb9;margin-bottom:18px}.story-copy h2,.case-reveal h2{font-family:var(--motion-font),Arial,sans-serif;font-size:clamp(42px,5.2vw,76px);font-weight:500;line-height:1.03;letter-spacing:-.055em;margin:0}.story-copy p{font-size:14px;color:#c3cbb9;margin-top:20px}.copy-result h2{font-size:clamp(40px,4.8vw,70px)}.system-states{position:absolute;left:var(--pad);right:var(--pad);bottom:13%;z-index:4;display:flex;gap:40px;opacity:0}.system-state{flex:1;border-top:1px solid #a6b59460;padding-top:15px;position:relative;display:grid;grid-template-columns:30px 1fr;row-gap:7px}.system-state:before{content:'';position:absolute;left:0;top:-1px;width:100%;height:2px;background:#d9ef99;transform:scaleX(var(--active,0));transform-origin:left}.state-num{font-size:10px;color:#9da793;padding-top:5px}.state-name{font-size:23px;letter-spacing:-.035em}.state-status{grid-column:2;font-size:12px;color:#d9ef99;opacity:0}.state-status b{margin-left:10px}.story-rail{position:absolute;z-index:5;left:var(--pad);right:var(--pad);bottom:6%;display:flex;align-items:center;gap:30px;color:#c3cbb9;font-size:9px;letter-spacing:.05em;opacity:0}.story-rail b{font-weight:400;color:#f2f4eb}.story-progress{flex:1;height:1px;background:#818b7750}.story-progress i{display:block;width:100%;height:1px;background:#d9ef99;transform:scaleX(0);transform-origin:left}.chapter-count{font-variant-numeric:tabular-nums}
.order-receipt{position:absolute;z-index:4;right:11%;top:40%;width:360px;background:#f4f4ed;color:#20261e;padding:28px 28px 23px;border-radius:4px;opacity:0;box-shadow:0 35px 80px #0006;transform:translateY(35px)}.receipt-brand{display:block;font-size:18px;font-weight:750;letter-spacing:-1px}.receipt-check{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#d9ef99;font-size:25px;margin:26px 0 18px}.order-receipt h3{font-size:27px;font-weight:500;letter-spacing:-1px;margin:0 0 7px}.order-receipt>p{font-size:13px;color:#606657}.receipt-line{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #ccd1c3;margin-top:28px;padding-top:18px;font-size:11px}.receipt-line strong{white-space:nowrap}.receipt-foot{display:block;font-size:9px;line-height:1.6;color:#606657;margin-top:24px}.case-reveal{position:absolute;inset:0;opacity:0;z-index:4;background:#171914}.case-reveal-copy{position:absolute;top:calc(145px + 3svh);left:var(--pad);right:var(--pad)}.case-reveal-copy p{font-size:12px;color:#c3cbb9;margin-top:24px}.case-reveal>img{position:absolute;width:49%;max-height:51%;object-fit:cover;object-position:top;right:var(--pad);bottom:14%;border-radius:4px}.story-case-cta{position:absolute;z-index:6;left:var(--pad);bottom:24%;background:#d9ef99;color:#20261e;padding:17px 22px;border-radius:7px;font-size:13px;display:flex;gap:30px;visibility:hidden;opacity:0}.motion-disabled .story-cinema{clip-path:inset(45% 4.5% 6% 47% round 12px)}.motion-disabled .story-case-cta{visibility:hidden!important}.motion-disabled .story-copy,.motion-disabled .system-states,.motion-disabled .story-rail{display:none}
@media(max-width:900px){.motion-heading{font-size:clamp(48px,7.4vw,70px)}.motion-description{top:40%}.story-cinema,.motion-disabled .story-cinema{clip-path:inset(65% 3.5% 5% 3.5% round 10px)}.screen-assembly{width:75%;left:12.5%;top:64%}.scroll-invitation{margin-top:18px}.story-copy h2,.case-reveal h2{font-size:52px}.order-receipt{width:310px;right:8%;top:46%}.system-states{gap:20px}.case-reveal>img{width:62%;bottom:21%;max-height:40%}.story-case-cta{bottom:12%}.case-reveal-copy{top:155px}.story-rail{gap:15px}.state-name{font-size:20px}}
@media(max-width:600px){.motion-stage{min-height:740px}.motion-intro{top:145px}.motion-heading{font-size:clamp(35px,8.9vw,53px);line-height:1.07}.motion-description{top:310px}.motion-description p{font-size:14px;max-width:305px}.scroll-invitation{margin-top:21px;font-size:10px}.story-cinema,.motion-disabled .story-cinema{clip-path:inset(64% 5.6% 6% 5.6% round 10px)}.screen-assembly{width:89%;left:5.5%;top:64%;}.story-copy{top:149px}.story-copy h2,.case-reveal h2,.copy-result h2{font-size:clamp(33px,9vw,45px)}.story-copy p{font-size:12px;line-height:1.5;max-width:270px;margin-top:15px}.story-eyebrow{font-size:9px;margin-bottom:15px}.story-cinema .motion-film video{width:155%;max-width:none;height:100%;margin-left:-27.5%;object-fit:contain}.story-cinema .film-shade{background:linear-gradient(180deg,#171914 20%,transparent 47%,transparent 57%,#171914 83%)}.system-states{bottom:17%;gap:12px}.system-state{grid-template-columns:1fr;row-gap:5px;padding-top:10px}.state-num{font-size:9px}.state-name{font-size:17px}.state-status{grid-column:1;font-size:10px;white-space:nowrap}.state-status b{margin-left:3px}.story-rail{bottom:8%;gap:12px;font-size:8px}.order-receipt{width:min(80%,320px);right:10%;top:42%;padding:20px}.receipt-check{width:35px;height:35px;font-size:20px;margin:18px 0 14px}.order-receipt h3{font-size:25px}.receipt-line{margin-top:20px;font-size:10px}.receipt-foot{margin-top:17px;font-size:9px}.case-reveal-copy{top:151px}.case-reveal>img{width:88%;right:6%;bottom:24%;max-height:36%}.story-case-cta{bottom:14%;padding:14px 18px;font-size:12px}.chapter-count{white-space:nowrap}}
@media(max-width:370px){.motion-description{top:290px}.motion-description p{font-size:13px}.scroll-invitation{margin-top:13px}.story-copy h2,.case-reveal h2{font-size:32px}.state-name{font-size:15px}.state-status{font-size:9px}.story-rail{font-size:7px;gap:8px}}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:600px){.story-cinema .motion-film{inset:33% 0 25%;mask-image:linear-gradient(180deg,transparent,#000 15%,#000 83%,transparent)}.story-cinema .motion-film video{object-fit:cover}.story-cinema .film-shade{display:none}}

/* Preserve every edge of the 16:9 movie at every viewport size. */
.story-cinema .motion-film video{width:100%;max-width:100%;height:100%;margin-left:0;object-fit:contain;object-position:center}
@media(max-width:600px){.story-cinema .motion-film{mask-image:none}}

/* The product and click target share the exact source image coordinate system. */
.motion-stage{min-height:0}
.screen-assembly{aspect-ratio:2880/2118;width:var(--intro-screen-width,47%);left:var(--intro-screen-left,48%);top:var(--intro-screen-top,46%)}
.purchase-cursor{left:var(--button-center-x);top:var(--button-center-y);width:clamp(18px,1.6vw,26px);transform:translate(-10%,-5.5556%);transform-origin:10% 5.5556%;pointer-events:none;z-index:3;filter:drop-shadow(0 2px 2px #0004)}
.purchase-button-feedback{position:absolute;left:var(--button-x);top:var(--button-y);width:var(--button-width);height:var(--button-height);border:1px solid #789a3e;background:rgba(168,201,107,.12);box-shadow:0 0 0 2px rgba(168,201,107,.1);opacity:0;pointer-events:none;z-index:1}
.click-ripple{left:var(--button-center-x);top:var(--button-center-y);width:22px;border:1px solid #8aa94f;box-shadow:none;z-index:2;pointer-events:none}
.copy-click{top:var(--click-copy-top,155px);width:var(--click-copy-width);right:auto}
@media(min-width:901px){.copy-click h2{font-size:clamp(36px,4.3vw,68px)}.copy-click p{max-width:300px;line-height:1.5}}
.story-cinema,.motion-disabled .story-cinema{clip-path:var(--intro-clip,inset(45% 4.5% 6% 47% round 10px))}
@media(min-width:601px){.motion-stage[data-film=signal-v2] .story-cinema .motion-film{top:var(--signal-film-top,20%);left:50%;right:auto;bottom:auto;width:var(--signal-film-width,100%);height:var(--signal-film-height,80%);translate:-50% 0}}
.motion-stage[data-film=signal-v2] .story-cinema{background:#0b0e10}
.motion-stage[data-film=signal-v2] .motion-film{background:#0b0e10;mask-image:linear-gradient(180deg,transparent,#000 20%,#000 76%,transparent);}
.motion-stage[data-film=signal-v2] .film-shade{background:linear-gradient(180deg,#0b0e10,transparent 35%,transparent 70%,#0b0e10)}