@view-transition{navigation:auto}
::view-transition-old(root){animation:page-out .28s ease both}
::view-transition-new(root){animation:page-in .55s cubic-bezier(.2,.7,.2,1) both}
.site-header{view-transition-name:woofu-navigation}
::view-transition-old(woofu-navigation),::view-transition-new(woofu-navigation){animation:none;mix-blend-mode:normal}
.mobility-section{padding:95px 0 37px;background:radial-gradient(ellipse at 85% 0,#1a4d5c66,transparent 55%),#071d30;color:#e7f2f6;position:relative;isolation:isolate;overflow:clip}
.mobility-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:40px}
.mobility-heading .eyebrow{color:#92d8c6;font-size:9px;letter-spacing:2.5px;margin-bottom:20px}
.mobility-heading h2{font-size:clamp(38px,4.1vw,61px);letter-spacing:-1.8px;line-height:1.18;white-space:pre-line;color:#edf6fa}
.mobility-intro{max-width:290px;padding-bottom:5px}.mobility-intro p{color:#92adbc;font-size:13px;line-height:1.95}.mobility-intro .text-link{color:#a3ddcd;border-color:#a3ddcd44;margin-top:20px;font-size:11px}
.mobility-film{position:relative;aspect-ratio:16/9;min-height:0;background:#081c2d url('assets/twc-journey-poster.webp') center/contain no-repeat;border:1px solid #b9e0ed22;border-top-color:#d2edf03a;border-radius:20px;overflow:clip;isolation:isolate;box-shadow:0 30px 70px #0002,inset 0 1px 0 #fff1}
.mobility-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 1s ease;background:#071a2b}.film-ready .mobility-video{opacity:1}
.mobility-shade{position:absolute;inset:0;background:linear-gradient(0deg,#041b2ce8,transparent 20%,transparent 88%,#041b2c66);pointer-events:none}.film-hud{position:absolute;top:24px;left:27px;display:flex;align-items:center;gap:9px;font-size:8px;letter-spacing:2px;color:#c2dcdf;text-shadow:0 1px 10px #03243599}.film-hud>span{width:4px;height:4px;border-radius:50%;background:#98dfc8;box-shadow:0 0 10px #98dfc8}
.mobility-footer{position:absolute;bottom:21px;left:27px;right:27px;display:flex;justify-content:space-between;align-items:center;gap:25px}.film-caption{font-size:9px;color:#b1c8d0;letter-spacing:.2px;line-height:1.8}.film-control{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(120deg,#9ddce225,#7aa8c00b);backdrop-filter:blur(18px);color:#e0eeed;border:1px solid #cee7ed42;border-radius:100px;padding:9px 16px;font-size:10px;min-height:38px;flex-shrink:0}.film-control:hover{background:#abdcd339}.film-control:focus-visible{outline-color:#a5e3cf}.film-control-icon{font-size:12px;width:12px;text-align:center;color:#b6eddb}
.journey-chapters{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:28px}.journey-chapter{position:relative;display:flex;align-items:center;gap:12px;text-align:left;border:0;border-top:1px solid #b2d5e123;background:transparent;color:#7695a7;padding:18px 0 10px;font-size:12px;line-height:1.7;min-width:0;transition:color .3s}.journey-chapter .chapter-number{font-size:9px;letter-spacing:1px;color:#58798d}.journey-chapter>i{position:absolute;top:-1px;left:0;right:0;height:1px;background:#a5e4d1;transform-origin:left;transform:scaleX(var(--chapter-progress,0));transition:transform .2s linear;box-shadow:0 0 10px #a5e4d150}.journey-chapter[aria-pressed=true]{color:#dceeea}.journey-chapter[aria-pressed=true] .chapter-number{color:#9cdbc7}.journey-chapter:hover{color:#cce9e2}.journey-chapter:focus-visible{outline-color:#9cdbc7}
.film-chemistry{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:22px;padding-top:21px;border-top:1px solid #b2d5e114}.formula-label{font-size:9px;letter-spacing:.4px;color:#668699}.formula{font-size:12px;letter-spacing:.7px;color:#b9d5dc;font-weight:400}.formula em{font-style:normal;color:#99d9c4;margin:0 17px}
.mobility-section--compact{padding-top:80px}.mobility-section--compact .mobility-heading h2{font-size:clamp(36px,3.7vw,53px)}
@keyframes page-out{to{opacity:0;transform:translateY(-5px)}}@keyframes page-in{from{opacity:0;transform:translateY(10px);filter:blur(2px)}to{opacity:1;transform:none;filter:blur(0)}}
@media(max-width:1050px){.mobility-section{padding-top:78px}.mobility-heading h2{font-size:47px}.mobility-intro{max-width:245px}.journey-chapters{gap:18px}.journey-chapter{font-size:11px;gap:9px}}
@media(max-width:700px){.mobility-section,.mobility-section--compact{padding:61px 0 28px}.mobility-heading{display:block;margin-bottom:29px}.mobility-heading h2,.mobility-section--compact .mobility-heading h2{font-size:37px;letter-spacing:-1px;line-height:1.2}.mobility-heading .eyebrow{font-size:8px;margin-bottom:18px;letter-spacing:2px}.mobility-intro{max-width:none;margin-top:22px;padding:0}.mobility-intro p{font-size:12px;max-width:330px}.mobility-intro .text-link{margin-top:15px;font-size:10px}.mobility-film{width:calc(100% - 24px);border-radius:12px;aspect-ratio:16/9}.film-hud{top:12px;left:13px;font-size:5px;letter-spacing:1.2px;gap:5px}.film-hud>span{width:3px;height:3px}.mobility-footer{left:13px;right:13px;bottom:10px;gap:12px}.film-caption{font-size:6px;max-width:175px;letter-spacing:0;line-height:1.7}.film-control{min-height:29px;padding:5px 9px;gap:5px;font-size:7px}.film-control-icon{font-size:9px;width:9px}.journey-chapters{gap:11px;margin-top:20px}.journey-chapter{display:block;font-size:9px;line-height:1.5;padding-top:12px}.journey-chapter .chapter-number{display:block;font-size:7px;margin-bottom:6px;letter-spacing:.5px}.film-chemistry{margin-top:18px;padding-top:17px;display:block}.formula-label{font-size:8px;display:block;margin-bottom:9px}.formula{font-size:11px;letter-spacing:.1px}.formula em{margin:0 10px}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}.mobility-video,.journey-chapter,.journey-chapter>i{transition:none}}
@media(max-width:700px){.film-hud{font-size:7px;letter-spacing:.8px}.film-caption{font-size:9px;max-width:185px;line-height:1.5}.film-control{font-size:9px;min-height:34px;padding:6px 10px}.film-control-icon{font-size:11px;width:10px}.journey-chapter{font-size:10px}.journey-chapter .chapter-number{font-size:9px}}
