/* zh homepage opening hero (bowl photo 956T, type T1). Static layout is the default (no-JS / reduced motion). */
#jh.jh{position:relative;display:block!important;width:100%!important;align-self:stretch!important;padding:0!important;margin:0!important;max-width:none!important;background:#fff;color:#171A1C;font-family:"Noto Sans TC","Source Han Sans TC","PingFang TC",sans-serif;-webkit-font-smoothing:antialiased;--fs:96px;--rs:184px;--rc:17px}
#jh .jh-stage{position:relative;width:100%;min-height:calc(100vh - 64px);min-height:calc(100svh - 64px);overflow:hidden;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;padding:64px 20px}
#jh canvas,#jh .jh-glow,#jh .jh-capt{display:none}
#jh .jh-copy{text-align:center}
#jh .jh-eb{font-size:12px;letter-spacing:.3em;color:#6B7174;font-weight:400;margin:0 0 26px}
#jh .jh-h1{font-weight:300;font-size:calc(var(--fs)*.76);letter-spacing:.02em;line-height:1.15;margin:0;color:#171A1C;max-width:none;font-feature-settings:"palt" 0}
#jh .jh-h1 span{display:block;white-space:nowrap}
#jh .jh-cta{display:inline-flex;align-items:center;gap:10px;background:#171A1C;color:#fff;font-size:15px;font-weight:400;letter-spacing:.12em;padding:14px 30px;border-radius:999px;position:relative;margin-top:44px;text-decoration:none}
#jh .jh-cta::after{content:"";position:absolute;left:14%;right:14%;bottom:-10px;height:1px;background:linear-gradient(90deg,rgba(2,72,62,0),rgba(2,72,62,.55) 30%,rgba(2,72,62,.55) 70%,rgba(2,72,62,0))}
#jh .jh-bowl{display:block;width:min(420px,70vw);margin:0}
#jh .jh-bowl img{display:block;width:100%;height:auto}
#jh .jh-ratio{display:flex;gap:56px;justify-content:center}
#jh .jh-ratio>div{text-align:center}
#jh .jh-ratio b{display:block;font-weight:200;font-size:calc(var(--rs)*.5);letter-spacing:-.04em;line-height:.9;font-variant-numeric:tabular-nums;color:#171A1C}
#jh .jh-ratio i{display:block;font-style:normal;font-size:var(--rc);letter-spacing:.3em;color:#3A3F42;font-weight:300;margin-top:14px;padding-left:.3em}
/* scroll-linked mode */
#jh.is-js{height:400vh}
#jh.is-js .jh-stage{position:sticky;top:0;height:100vh;min-height:0;display:block;padding:0}
#jh.is-js canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
#jh.is-js .jh-glow{display:block;position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(2,72,62,.05),rgba(2,72,62,.018) 55%,rgba(2,72,62,0))}
#jh.is-js .jh-copy{position:absolute;left:0;right:0;z-index:2;will-change:transform,opacity}
#jh.is-js .jh-bowl{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
#jh.is-js .jh-ratio{display:block}
#jh.is-js .jh-ratio>div{position:absolute;opacity:0;will-change:opacity,transform}
#jh.is-js .jh-ratio b{font-size:var(--rs)}
#jh.is-js .jh-capt{display:block;position:absolute;left:0;right:0;bottom:11%;text-align:center;pointer-events:none}
#jh .jh-capt span{position:absolute;left:0;right:0;font-weight:200;font-size:56px;letter-spacing:.12em;color:#171A1C;opacity:0}
@media(max-width:600px){#jh.jh{--fs:44px;--rs:96px;--rc:14px}#jh .jh-capt span{font-size:34px}#jh .jh-ratio{gap:40px}}
@media (prefers-reduced-motion:reduce){#jh canvas,#jh .jh-glow,#jh .jh-capt{display:none!important}}
/* guard against site-wide !important type rules */
html body #jh .jh-h1{font-weight:300!important;font-size:calc(var(--fs)*.76)!important;letter-spacing:.02em!important;line-height:1.15!important;color:#171A1C!important}
html body #jh .jh-eb{font-size:12px!important;line-height:1.4!important;letter-spacing:.3em!important}
html body #jh .jh-ratio b{font-size:calc(var(--rs)*.5)!important;line-height:.9!important;letter-spacing:-.04em!important}
html body #jh.is-js .jh-ratio b{font-size:var(--rs)!important}
/* seamless handoff: capacity stage pins exactly where the hero's final frame sits */
#jh.is-js + #system.cf.is-js{margin-top:-100vh!important;position:relative;z-index:1;background:transparent!important}
/* reduced motion / no-JS desktop: title, bowl and 5/5 fit the first viewport */
@media(min-width:601px){#jh:not(.is-js) .jh-stage{height:calc(100svh - 64px);min-height:560px;gap:20px;padding:24px 20px}
#jh:not(.is-js) .jh-eb{margin-bottom:16px}#jh:not(.is-js) .jh-cta{margin-top:24px}
#jh:not(.is-js) .jh-bowl{width:min(420px,70vw,calc((100svh - 64px - 560px)*1.4));min-width:200px}}
/* certifications + scenario button after the spec strip */
.jh-after{display:flex;flex-direction:column;align-items:center;gap:28px;padding:8px 20px 96px;background:#fff;font-family:"Noto Sans TC","Source Han Sans TC","PingFang TC",sans-serif}
html body .jh-after .jh-cert{margin:0;font-size:13px!important;font-weight:300!important;letter-spacing:.08em;line-height:1.8;color:#6B7174!important;text-align:center;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 28px}
.jh-after .jh-cert span{white-space:nowrap}
html body .jh-after .jh-sec{display:inline-flex;align-items:center;gap:12px;padding:13px 28px;border:1px solid #171A1C;border-radius:999px;background:transparent!important;color:#171A1C!important;font-size:15px;font-weight:400;letter-spacing:.1em;text-decoration:none}
.jh-after .jh-sec svg{width:28px;height:10px;fill:none;stroke:currentColor;stroke-width:1.2}
html body .jh-after .jh-cert{max-width:none!important;width:auto}

/* en/ja: same layout, locale fonts and tighter tracking for Latin text */
html[lang="en"] #jh.jh,html[lang="en"] .cf,html[lang="en"] .jh-after{font-family:"Helvetica Neue",Arial,"Noto Sans",sans-serif}
html[lang="ja"] #jh.jh,html[lang="ja"] .cf,html[lang="ja"] .jh-after{font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
html[lang="en"] #jh .jh-ratio i,html[lang="en"] #jh .jh-capt span,html[lang="en"] .cf-capt span{letter-spacing:.04em}
html[lang="en"] #jh .jh-ratio i{padding-left:0;white-space:nowrap}
html[lang="en"] .cf-sub .cf-cap,html[lang="en"] .jh-after .jh-sec,html[lang="en"] #jh .jh-cta{letter-spacing:.03em}
@media(max-width:600px){html[lang="en"] #jh .jh-h1{font-size:min(calc(var(--fs)*.6),6.6vw)!important;letter-spacing:0!important}html[lang="ja"] #jh .jh-h1{font-size:min(calc(var(--fs)*.6),7vw)!important}html[lang="en"] #jh .jh-ratio i{font-size:12px}}
html[lang="en"] body #jh .jh-h1 span,html[lang="ja"] body #jh .jh-h1 span{font-size:inherit!important;letter-spacing:inherit!important;line-height:inherit!important}
@media(max-width:600px){html[lang="en"] body .jh-after .jh-sec{font-size:14px!important;padding:12px 16px!important;gap:10px!important;letter-spacing:0!important;white-space:nowrap!important}html[lang="en"] body .jh-after .jh-sec svg{width:28px!important;flex:none}}