:root{
  --ink:#15202e; --ink2:#3a4c62; --navy:#0b3a73; --blue:#7eb6ff; --gold:#f2c14e; --thread:#e6ae2a;
  --coral:#ff8b6a; --paper:#fffbf4; --sky:#e7f4ff; --warm:#fff6e8; --mint:#e9f8e4; --storm:#142033; --dawn:#fff1d9;
  --line:rgba(11,58,115,.16);
  --font:"PingFang TC","Hiragino Sans CNS","Noto Sans TC","Microsoft JhengHei",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.9;font-feature-settings:"palt";overflow-x:clip}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:4px}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
.skip{position:fixed;left:16px;top:-64px;z-index:90;background:var(--ink);color:#fff;padding:10px 16px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}

/* 導覽 */
.nav.dark{background:rgba(20,32,51,.82);border-bottom-color:rgba(255,255,255,.12);color:#f5f7fb}
.nav.dark .nav-line{color:#cfd9e6}
.nav.dark .btn{background:#f2c14e;color:#10243f}
.nav{transition:background-color .35s,color .35s;position:fixed;left:0;right:0;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px clamp(20px,3.4vw,48px);background:rgba(255,251,244,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{font-size:18px;font-weight:700;letter-spacing:.08em;text-decoration:none;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:28px;font-size:15px}
.nav-links a{text-decoration:none;font-weight:500;letter-spacing:.06em}
.nav-links a:not(.btn):hover{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--thread);text-decoration-thickness:2px}
.nav-line{font-size:13px;color:var(--ink2);letter-spacing:.04em;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 22px;background:var(--navy);color:#fff;text-decoration:none;font-size:15px;font-weight:600;letter-spacing:.08em;border-radius:999px;border:0;white-space:nowrap;transition:background-color .2s,transform .2s}
.btn:hover{background:#0e4a93;transform:translateY(-1px)}
.btn::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.btn.down::after{transform:rotate(135deg) translate(-2px,2px)}
.hint{position:fixed;left:50%;bottom:26px;z-index:55;width:26px;height:40px;margin-left:-13px;border:2px solid var(--navy);border-radius:14px;opacity:0;transition:opacity .5s;pointer-events:none}
.hint.on{opacity:.75}
.hint i{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--navy);animation:hint 1.8s ease-in-out infinite}
@keyframes hint{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}
.tourbar{position:fixed;left:50%;bottom:22px;z-index:70;transform:translateX(-50%);min-height:44px;padding:0 20px;border:1px solid var(--line);border-radius:999px;background:rgba(255,251,244,.94);color:var(--navy);font:600 14px/1 var(--font);letter-spacing:.08em;cursor:pointer;box-shadow:0 10px 26px rgba(11,58,115,.14)}
.tourbar[hidden]{display:none}
.link{display:inline-flex;align-items:center;min-height:46px;font-size:15px;font-weight:600;letter-spacing:.06em;text-decoration:underline;text-decoration-color:var(--thread);text-decoration-thickness:2px;text-underline-offset:7px}
.nav .btn{min-height:40px;padding:0 18px;font-size:14px}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:14px;font-weight:600;letter-spacing:.06em}
.menu summary::-webkit-details-marker{display:none}
.menu ul{position:absolute;right:0;top:50px;min-width:170px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 14px 34px rgba(11,58,115,.12)}
.menu a{display:block;padding:10px 14px;text-decoration:none;font-weight:500}
.progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:61;background:var(--thread);transform-origin:left;transform:scaleX(0);display:none}

/* 文字的基本樣式：沒有 JS 或視窗太矮時就是一般網頁 */
.kicker{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--navy);margin-bottom:14px}
.kicker b{font-weight:600;letter-spacing:.04em}
.kicker::after{content:"";width:34px;height:2px;background:var(--thread)}
h1{font-size:clamp(30px,3.05vw,46px);line-height:1.5;font-weight:600;letter-spacing:.05em}
h2{font-size:clamp(26px,2.75vw,40px);line-height:1.45;font-weight:600;letter-spacing:.05em;margin-bottom:18px}
h3{font-size:19px;font-weight:600;letter-spacing:.05em;line-height:1.5}
.lead{font-size:clamp(17px,1.5vw,20px);font-weight:500;margin-top:14px;letter-spacing:.04em}
.act p.b{color:var(--ink2)}
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln>span{display:block}
.ln.g{margin-top:.75em}
.mark{font-style:normal;font-weight:600;color:var(--ink);position:relative;z-index:0}
.mark::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:.04em;height:.22em;background:var(--gold);transform-origin:left;transform:scaleX(var(--m,1))}
.tags{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:20px;font-size:14px;font-weight:500;color:var(--ink2);letter-spacing:.04em}
.tags li{display:flex;align-items:center;gap:7px}
.tags li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--thread)}
.acts{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin-top:24px}
.do{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:16px;font-size:15px;font-weight:600;color:var(--navy)}
.do li{display:flex;align-items:center;gap:8px}
.do li::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--gold)}
.fine{font-size:13px;color:var(--ink2);margin-top:8px;line-height:1.7}
.quote{font-size:clamp(19px,1.75vw,24px);font-weight:600;line-height:1.7;letter-spacing:.05em;margin-top:20px;color:var(--ink)}
.dark,.dark h2,.dark .kicker{color:#f5f7fb}
.dark p.b{color:#dfe7f2}
.phase .en{display:block;font-size:clamp(50px,8.4vw,128px);font-weight:700;letter-spacing:.05em;line-height:1;color:rgba(11,58,115,.08)}
.phase .zh{display:block;font-size:19px;font-weight:600;letter-spacing:.14em;margin-top:8px}
.phase p{font-size:15px;color:var(--ink2)}
.step .n{display:block;font-size:clamp(34px,3.2vw,48px);font-weight:300;letter-spacing:.02em;line-height:1.05;color:var(--navy)}
.step h3{font-size:clamp(19px,1.6vw,23px);margin:6px 0 6px}
.step p{font-size:16px;line-height:1.8;color:var(--ink2)}
#biz h2{font-size:clamp(22px,2.15vw,31px)}
.biz-grid li h3{font-size:17px}
.biz-grid li .en{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--navy);margin-bottom:6px}
.biz-grid li p{font-size:15px;line-height:1.75;color:var(--ink2)}
.ms-tag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--navy);border:1px solid var(--navy);border-radius:999px;padding:0 10px;line-height:22px;margin-top:10px}
.ms li{font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.reach{margin-top:12px;font-size:16px;font-weight:600}
.reach li{display:flex;gap:12px}
.reach span{font-weight:500;color:var(--ink2);min-width:42px}

/* 一般網頁版面（無 JS、視窗太矮） */
html:not(.stage-on) .act,html:not(.stage-on) #process{scroll-margin-top:84px}
.story{padding-top:72px}
.stage-fx,.rail,.art,.hero{display:none}
.act{max-width:760px;margin:0 auto;padding:60px 24px;border-left:2px solid var(--thread)}
.act.dark,.act .dark{color:inherit}
html:not(.stage-on) .dark,html:not(.stage-on) .dark h2,html:not(.stage-on) .dark .kicker{color:var(--ink)}
html:not(.stage-on) .dark p.b{color:var(--ink2)}
.steps{display:grid;gap:18px;margin-top:16px}
.biz-grid{display:grid;gap:18px;margin-top:20px}
.ms{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px}

/* 一鏡到底：捲動時舞台固定，鏡頭在畫卷上移動 */
html.stage-on .story{padding:0;height:var(--story-h)}
html.stage-on .stage:focus{outline:none}
html.stage-on .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--paper)}
html.stage-on .stage-fx,html.stage-on .art,html.stage-on .hero{display:block}
html.stage-on .rail{display:flex}
.wash,.dots,.far,.dome,.dawn{position:absolute;pointer-events:none}
.wash{inset:0;opacity:0}
.w-sky{background:linear-gradient(180deg,#dcefff 0%,var(--sky) 70%,#f3f9ff 100%)}
.w-warm{background:linear-gradient(180deg,#fff0d8 0%,var(--warm) 70%,#fffaf1 100%)}
.w-mint{background:linear-gradient(180deg,#dcf3d6 0%,var(--mint) 70%,#f6fcf3 100%)}
.w-dawn{background:linear-gradient(180deg,#ffe6c0 0%,var(--dawn) 70%,#fffaf0 100%)}
.grain{position:absolute;inset:0;z-index:45;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .12 0 0 0 0 .25 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
.dots{left:-48px;top:0;width:calc(100% + 96px);height:100%;background-image:radial-gradient(rgba(11,58,115,.11) 1px,transparent 1.2px);background-size:24px 24px;will-change:transform}
.far{left:0;top:0;height:100%;will-change:transform}
.dome,.dawn{left:-500px;top:-500px;width:1000px;height:1000px;border-radius:50%;transform:scale(0);will-change:transform}
.dome{background:radial-gradient(circle closest-side,var(--storm) 86%,rgba(20,32,51,.7) 93%,rgba(20,32,51,0) 100%)}
.dawn{background:radial-gradient(circle closest-side,var(--dawn) 86%,rgba(255,241,217,.7) 93%,rgba(255,241,217,0) 100%)}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
html.stage-on .world{position:absolute;left:0;top:0;height:100%;width:var(--world-w);will-change:transform}
.art{position:absolute;left:0;top:0;height:100%;overflow:visible}
.hero{position:absolute;left:0;top:0;width:1200px;height:100%;overflow:visible;will-change:transform;pointer-events:none;--shirt:var(--navy)}
.c-shirt{fill:var(--shirt);transition:fill .35s}
html.stage-on .act{position:absolute;max-width:none;margin:0;padding:0;border:0}
html.stage-on .act.fx{pointer-events:none}
html.stage-on .act a,html.stage-on .act .btn{pointer-events:auto}
html.stage-on .steps,html.stage-on .biz-grid,html.stage-on .ms{display:block;margin:0}
html.stage-on .step,html.stage-on .phase,html.stage-on .biz-grid li,html.stage-on .ms li{position:absolute}
html.stage-on .ms li{text-align:center;transform:translateX(-50%);white-space:nowrap}
.twinkle{animation:tw 2.6s ease-in-out infinite}
.twinkle:nth-child(2n){animation-delay:-.9s}
.twinkle:nth-child(3n){animation-delay:-1.7s}
@keyframes tw{50%{opacity:.45}}
/* 貓：待著的時候也有一點生氣 */
.cat .wag{animation:wag 3.4s ease-in-out infinite;transform-origin:-36px -44px}
.cat .eyes{animation:blink 5.2s linear infinite;transform-origin:0 -2px}
.cat.c2 .wag{animation-delay:-1.4s}
.cat.c2 .eyes{animation-delay:-2.2s;animation-duration:7.3s}
@keyframes wag{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}
.rail{position:absolute;right:clamp(14px,1.8vw,26px);top:50%;transform:translateY(-50%);z-index:40;flex-direction:column;gap:2px;writing-mode:vertical-rl}
.rail{writing-mode:horizontal-tb}
.rail button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;gap:10px;height:30px;color:var(--navy);font-size:12px;font-weight:600;letter-spacing:.1em}
.rail button span{opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s;background:rgba(255,251,244,.92);padding:0 10px;border-radius:999px;line-height:24px}
.rail button i{display:block;width:16px;height:2px;background:currentColor;opacity:.32;transition:width .3s,opacity .3s}
.rail button:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.rail button.on i{width:30px;opacity:1;background:var(--thread)}
.rail button:hover span,.rail button:focus-visible span{opacity:1;transform:none}
.rail.on-dark button{color:#f5f7fb}

/* 故事之後：同一條線往下走 */
.after{position:relative;background:var(--paper);padding:clamp(70px,9vw,130px) clamp(20px,7vw,104px) clamp(150px,13vw,190px)}
.yarn{position:absolute;bottom:0;right:calc(var(--thread-right,7vw) - 44px);width:300px;height:150px;overflow:visible;pointer-events:none}
.after::before{content:"";position:absolute;top:0;bottom:30px;right:var(--thread-right,7vw);width:5px;background:var(--thread);border-radius:3px}
.after-in{max-width:1040px}
.after h2{max-width:720px}
.after .b{color:var(--ink2);max-width:680px}
.custom{margin-top:14px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.after .note{font-size:14px;color:var(--ink2);margin-top:4px;padding-top:16px;border-top:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 40px;margin-top:36px}
.cards li{padding:22px 0 24px;border-top:1px solid var(--line)}
.cards h3{font-size:18px}
.cards p{font-size:15px;line-height:1.75;color:var(--ink2);margin-top:6px}
.badges{display:flex;gap:8px;margin-bottom:8px}
.badge{font-size:12px;font-weight:600;letter-spacing:.08em;line-height:22px;padding:0 10px;border-radius:999px;border:1px solid var(--line);color:var(--ink2)}
.who{margin-top:clamp(70px,9vw,120px)}
.who .more{margin-top:10px}
.who .name{font-size:20px;font-weight:600;letter-spacing:.06em;margin-bottom:6px}
.foot{position:relative;background:var(--paper);border-top:1px solid var(--line);padding:32px clamp(20px,7vw,104px);display:flex;flex-wrap:wrap;gap:8px 28px;font-size:14px;color:var(--ink2)}

@media (max-width:899px){
  .nav{padding:8px 12px 8px 18px;gap:8px}
  .nav-links,.nav-line{display:none}
  .menu{display:block}
  .nav-r{display:flex;align-items:center;gap:6px}
  .progress{display:block}
  html.stage-on .rail{display:none}
  body{font-size:16px;line-height:1.85}
  h1{font-size:clamp(21px,6.3vw,34px);line-height:1.5}
  h2{font-size:clamp(23px,6.4vw,30px);margin-bottom:10px}
  .kicker{margin-bottom:8px}
  .lead{margin-top:8px}
  .tags{gap:2px 12px;margin-top:10px;font-size:13px}
  .acts{margin-top:10px}
  .act p.b{font-size:15px;line-height:1.8}
  .quote{font-size:18px;margin-top:10px}
  .do{margin-top:8px;gap:2px 14px;font-size:14px}
  #a7 .kicker{display:none}
  .reach{margin-top:6px}
  .phase .en{font-size:52px}
  .step .n{display:inline;font-size:22px;font-weight:400;margin-right:10px}
  .step h3{display:inline;font-size:18px;margin:0}
  .step p{font-size:14.5px;line-height:1.65;margin-top:2px}
  .biz-grid li p{font-size:14.5px}
  .ms li{font-size:12.5px}
  .cards{grid-template-columns:1fr}
  .after{padding-right:44px}
  .yarn{right:8px;width:230px;height:115px}
}
@media (max-width:899px) and (max-height:760px){
  h2{font-size:clamp(21px,5.8vw,26px);margin-bottom:6px}
  .act p.b{font-size:14.5px;line-height:1.7}
  .quote{font-size:16.5px;line-height:1.6;margin-top:6px}
  .kicker{margin-bottom:4px;font-size:12px}
  .do{font-size:13px;margin-top:4px}
  .fine{font-size:12px;margin-top:4px}
  .ln.g{margin-top:.4em}
}
@media (min-width:900px){.nav-r{display:flex;align-items:center;gap:22px}}
@media (prefers-reduced-motion:reduce){
  .twinkle,.cat .wag,.cat .eyes,.hint i{animation:none}
  .btn,.rail button span,.rail button i,.c-shirt{transition:none}
}