/* Hero story: 12s loop (about 10s of action). Stage is a fixed 1280x720 canvas scaled to its container. */
.story{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#0E182F;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12);direction:ltr}
.story-stage{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;transform:scale(.5);overflow:hidden;--d:12s}
.story *{animation-duration:var(--d);animation-iteration-count:infinite;animation-timing-function:linear;animation-fill-mode:both}
.scr{position:absolute;left:0;top:0;height:100%;width:100%;overflow:hidden;background:#1B2A4A;animation-name:scrW}
.scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.scr .f1{animation-name:f1}.scr .f2{animation-name:f2}.scr .f3{animation-name:f3}.scr .f4{animation-name:f4;object-position:15% 0}
.scr .f1{transform:scale(1.5)}.scr .f2{transform:scale(1.12)}.scr .f3{transform:scale(1.25)}
.chips{position:absolute;left:28px;top:26px;height:64px;width:520px;z-index:3}
.chips span{position:absolute;left:0;top:0;display:flex;align-items:center;gap:14px;background:#D9B95F;color:#1B2A4A;font-family:var(--f-display);font-weight:800;font-size:30px;line-height:1;padding:14px 24px;border-radius:40px;opacity:0;box-shadow:0 10px 24px -8px rgba(0,0,0,.5);direction:rtl;white-space:nowrap}
.chips b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#1B2A4A;color:#D9B95F;font-size:20px}
.chips .c1{animation-name:f1}.chips .c2{animation-name:f2}.chips .c3{animation-name:f3}.chips .c4{animation-name:f4}
.chips .c4{background:#1F7A55;color:#fff}.chips .c4 b{background:#fff;color:#1F7A55}
.story-en .chips span{direction:ltr}
.prog{position:absolute;left:0;bottom:0;height:7px;background:#D9B95F;z-index:3;animation-name:prog;width:0}
.cafe{position:absolute;right:0;top:0;width:640px;height:720px;overflow:hidden;animation-name:cafeIn;transform:translateX(100%)}
.cafe-svg{position:absolute;inset:0;width:100%;height:100%}
.t-app{font-family:var(--f-body);font-weight:500;font-size:20px;fill:#6B7690}
.t-main{font-family:var(--f-display);font-weight:800;font-size:34px;fill:#1B2A4A}
.t-main.t-en{font-size:30px}
.t-sub{font-family:var(--f-body);font-weight:500;font-size:20px;fill:#6B7690}
.cap{position:absolute;left:0;right:0;top:34px;text-align:center;font-family:var(--f-display);font-weight:800;font-size:38px;line-height:1.3;color:#1B2A4A;margin:0;padding:0 24px;opacity:0;animation-name:cap;direction:rtl}
.cafe .arm{animation-name:reach}
.cafe .head{animation-name:look;transform-origin:220px 400px;transform-box:view-box}
.cafe .callout{animation-name:pop;opacity:0;transform:scale(.4)}
.cafe .pscreen{animation-name:screenOn;opacity:0}
.cafe .halo{animation-name:haloOn;opacity:0}
.cafe .phone{animation-name:buzz}
.cafe .steam{animation:steam 3s ease-in-out infinite}
.fade{position:absolute;inset:0;background:#0E182F;z-index:9;animation-name:fadeAll;pointer-events:none}
@keyframes scrW{0%,43.3%{width:100%}48.3%,95%{width:50%}100%{width:100%}}
@keyframes f1{0%{opacity:1}14.2%{opacity:1}15.8%,100%{opacity:0}}
@keyframes f2{0%,14.2%{opacity:0}15.8%{opacity:1}27.5%{opacity:1}29.2%,100%{opacity:0}}
@keyframes f3{0%,27.5%{opacity:0}29.2%{opacity:1}40.8%{opacity:1}42.5%,100%{opacity:0}}
@keyframes f4{0%,40.8%{opacity:0}42.5%{opacity:1}95%{opacity:1}100%{opacity:1}}
@keyframes prog{0%{width:0}43.3%{width:100%}43.4%,100%{width:0}}
@keyframes cafeIn{0%,43.3%{transform:translateX(100%)}48.3%,95%{transform:translateX(0)}100%{transform:translateX(0)}}
@keyframes reach{0%,50%{transform:rotate(0)}56.7%,100%{transform:rotate(-27deg)}}
@keyframes look{0%,57%{transform:rotate(0)}62%,100%{transform:rotate(4deg)}}
@keyframes screenOn{0%,59.5%{opacity:0}60.5%,100%{opacity:1}}
@keyframes haloOn{0%,59.5%{opacity:0}62%,100%{opacity:1}}
@keyframes buzz{0%,60%{transform:translate(0,0)}60.8%{transform:translate(-3px,0)}61.6%{transform:translate(3px,0)}62.4%{transform:translate(-2px,0)}63.2%,100%{transform:translate(0,0)}}
@keyframes pop{0%,62%{opacity:0;transform:scale(.4)}65%{opacity:1;transform:scale(1.06)}66.5%,100%{opacity:1;transform:scale(1)}}
@keyframes cap{0%,71%{opacity:0;transform:translateY(8px)}75%,100%{opacity:1;transform:translateY(0)}}
@keyframes steam{0%,100%{opacity:.2;transform:translateY(2px)}50%{opacity:.75;transform:translateY(-6px)}}
@keyframes fadeAll{0%{opacity:1}2.5%{opacity:0}96.5%{opacity:0}99.5%,100%{opacity:1}}
.story .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  .story *{animation:none!important}
  .scr{width:50%}.scr .f1,.scr .f2,.scr .f3,.chips .c1,.chips .c2,.chips .c3{opacity:0}
  .scr .f4,.chips .c4{opacity:1}.cafe{transform:none}.cafe .arm{transform:rotate(-27deg)}
  .cafe .callout{opacity:1;transform:none}.cafe .pscreen,.cafe .halo,.cap{opacity:1}.fade{display:none}.prog{display:none}
}
.story.hero-shot{width:calc(100% + clamp(0px,6vw,90px));margin-inline-end:0;justify-self:start}
@media (max-width:980px){.story.hero-shot{width:100%;margin-top:14px}}

.vid{margin:28px 0 8px;max-width:860px}.vid video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:16px;background:#0E182F;box-shadow:0 30px 60px -30px rgba(27,42,74,.45)}.vid .note{margin-top:10px}.vid a{color:inherit;text-decoration:underline}

.brand-tag{position:absolute;right:28px;bottom:26px;z-index:8;background:#1B2A4A;border-radius:44px;padding:10px 26px;box-shadow:0 12px 28px -10px rgba(0,0,0,.55);display:flex;align-items:center;animation:none!important}
.brand-tag img{display:block;height:46px;width:auto;opacity:1}