html, body { margin: 0; background: #0B1F1A; }
.tw-tel { color: inherit; text-decoration: none; }
.sc { position: relative; height: 520vh; }
.sc__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sc__video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0B1F1A; }
.sc__shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(11,31,26,0) 30%, rgba(11,31,26,.55) 100%), linear-gradient(to top, rgba(11,31,26,.85), rgba(11,31,26,0) 40%); pointer-events: none; }
.sc__chapters { position: absolute; inset: 0; pointer-events: none; }
.sc__ch { position: absolute; left: 0; right: 0; height: 130vh; display: flex; align-items: flex-end; padding: 0 clamp(16px, 6vw, 88px) 14vh; box-sizing: border-box; }
.sc__ch > div { position: sticky; bottom: 14vh; max-width: 560px; display: grid; gap: 14px; pointer-events: auto; transition: opacity .5s, transform .5s; }
.sc__ch[data-align="right"] { justify-content: flex-end; }
.sc__ch.is-off > div { opacity: .0; transform: translateY(24px); }
.sc__kicker { font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); margin: 0; }
.sc__ch h1, .sc__ch h2 { font-family: var(--display); font-weight: 700; font-stretch: 125%; font-size: clamp(2.2rem, 5.4vw, 4.4rem); line-height: 1.04; letter-spacing: -.015em; margin: 0; text-shadow: 0 2px 30px rgba(11,31,26,.6); }
.tw:lang(th) .sc__ch h1, .tw:lang(th) .sc__ch h2 { font-stretch: 100%; line-height: 1.22; }
.sc__ch p.sc__body { color: var(--mist); font-size: 1.08rem; text-shadow: 0 1px 16px rgba(11,31,26,.8); }
.sc__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.sc__tags li { font-family: var(--mono); font-size: .74rem; border: 1px solid rgba(238,242,236,.4); border-radius: 999px; padding: 3px 12px; background: rgba(11,31,26,.45); backdrop-filter: blur(6px); }
.sc__progress { position: fixed; left: 0; right: 0; bottom: 0; height: 2px; z-index: 40; pointer-events: none; }
.sc__progress span { display: block; height: 100%; width: 0; background: var(--coral); }
@media (prefers-reduced-motion: reduce) { .sc { height: auto; } .sc__stage { position: relative; height: 70vh; } .sc__chapters { position: relative; } .sc__ch { position: relative !important; top: auto !important; height: auto; padding-block: 48px; } .sc__ch.is-off > div { opacity: 1; transform: none; } }
.tw-steps li { row-gap: 4px; align-content: start; }
.tw-steps li::before { grid-row: 1 / span 2; }
.tw-steps li h3, .tw-steps li p { grid-column: 2; }