.brand-story{background:#080f10;padding:0!important}
.brand-story-sticky{padding:100px var(--gutter);display:grid;grid-template-columns:25% 1fr;gap:5%;align-items:center;min-height:100svh;border-block:1px solid #28403f}
.brand-story-label{align-self:start;padding-top:12px}
.brand-story .brand-story-label h2{font:500 21px/1.6 "Noto Serif TC","PMingLiU",serif;letter-spacing:.12em;border-left:2px solid var(--teal);padding-left:18px}
.brand-story-label p{color:#889e9c;font-size:14px;margin-top:20px;line-height:1.9}
.brand-story-scenes{display:grid;gap:80px}
.brand-scene h3{font:500 clamp(32px,3.5vw,60px)/1.45 "Noto Serif TC","PMingLiU",serif;color:#eef3f0;letter-spacing:.02em}
.brand-scene p{font-size:clamp(15px,1.2vw,18px);line-height:2;color:#a3b2b0;margin-top:32px;max-width:740px}
.brand-story-progress{height:1px;background:#365553;margin:40px 0}
.brand-story-progress span{display:block;width:100%;height:2px;background:var(--teal);transform:scaleX(var(--story-progress,0));transform-origin:left}
.story-link{display:inline-flex;align-items:center;gap:24px;color:var(--teal);font-size:15px;letter-spacing:.15em;min-height:44px}
.story-link svg{width:42px;height:42px;border:1px solid currentColor;border-radius:50%;padding:9px}
@media(min-width:1200px) and (min-height:760px) and (not (pointer:coarse)) and (prefers-reduced-motion:no-preference){
 .brand-story.story-enhanced{height:280dvh;min-height:280dvh;scroll-snap-align:none}
 .story-enhanced .brand-story-sticky{height:100dvh;min-height:0;position:sticky;top:0;padding-block:27vh 9vh;align-items:start}
 .story-enhanced .brand-story-scenes{display:grid;gap:0;align-items:start}
 .story-enhanced .brand-scene h3{font-size:clamp(32px,3vw,48px)}
 .story-enhanced .brand-scene h3 br{display:none}
 .story-enhanced .brand-scene p{font-size:20px}
 .story-enhanced .brand-scene{grid-area:1/1;opacity:var(--story-opacity,0);transform:translateY(var(--story-shift,0));pointer-events:none}
}
@media(max-width:899px){
 .brand-story-sticky{padding:70px var(--gutter);grid-template-columns:1fr;gap:50px;min-height:0}
 .brand-story-label p{margin-top:12px}
 .brand-story-scenes{gap:50px}
 .brand-scene h3{font-size:clamp(28px,5vw,40px)}
 .brand-scene p{margin-top:20px;font-size:15px}
 .brand-story-progress{display:none}
 .story-link{margin-top:36px}
}
@media(prefers-reduced-motion:reduce){.brand-scene{transform:none!important;opacity:1!important}.brand-story-progress{display:none}}