.transfer-v5{--tf-ink:#123d59;--tf-blue:#0099c4;--tf-progress:0%;background:#f8fbfe}
.transfer-v5 .eyebrow{margin-bottom:14px}
.transfer-v5 .tf-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px}
.transfer-v5 .tf-heading h1{font-size:clamp(30px,3.6vw,58px);line-height:1.08;margin:0;letter-spacing:-1.7px}
.tf-modes{display:flex;flex-shrink:0;padding:5px;border:1px solid #d1e2ec;border-radius:15px;background:white;gap:3px}
.tf-modes button{border:0;background:none;color:#123d59;border-radius:11px;padding:12px 17px;font-size:14px;font-weight:600;white-space:nowrap}
.tf-modes button.selected{background:#008eb5;color:#fff;box-shadow:0 4px 10px #008eb522}
.tf-self .tf-modes button.selected{background:#875b26}
.tf-route{display:flex;align-items:center;gap:15px;margin-bottom:17px;padding:12px 20px;border:1px solid #d6e6ef;border-radius:14px;background:#fff}
.tf-route small{margin-left:auto;color:#6a879b;font-size:11px}
.tf-carrier{display:flex;align-items:center;gap:10px;font-size:13px;color:#648196}
.tf-carrier img{width:74px;height:30px;object-fit:contain}
.tf-carrier.hy img{width:106px;border-radius:4px;background:#003958;padding:4px}
.tf-carrier b,.tf-hub b{font-size:17px;letter-spacing:.4px;color:#133e5b}
.tf-hub{display:flex;gap:9px;align-items:center;color:#007b9e;font-size:12px}
.tf-route-line{width:clamp(20px,4vw,65px);height:1px;background:#abd3e2;position:relative}
.tf-route-line:after{content:'';position:absolute;right:0;top:-3px;border-left:5px solid #6aaac4;border-top:3px solid transparent;border-bottom:3px solid transparent}
.tf-stage{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);border:1px solid #cddfe9;border-radius:23px;overflow:hidden;background:white;box-shadow:0 12px 35px #174a6910}
.tf-visual{display:flex;flex-direction:column;background:linear-gradient(135deg,#eef8fd,#e6f2f8);min-width:0;position:relative}
.tf-scene-top{display:flex;justify-content:space-between;gap:12px;padding:17px 22px 0;font-size:10px;font-weight:700;letter-spacing:1.6px;color:#30758f}
.tf-live{display:flex;align-items:center;gap:6px;font-size:9px;letter-spacing:1px;color:#6b8b9f}
.tf-live i{width:5px;height:5px;border-radius:50%;background:#13a6b0;box-shadow:0 0 0 4px #13a6b014}
#tfScene{display:block;width:100%;height:auto;flex:1;min-height:210px;max-height:330px;font-family:inherit}
.tf-svg-label{fill:#265c77;font-size:13px;font-weight:600;letter-spacing:.2px}
.tf-svg-label.light{fill:#fff;font-size:13px;letter-spacing:.3px}
.tf-visual-footer{display:flex;align-items:center;gap:12px;padding:9px 20px 14px;color:#47748c;font-size:11px;min-height:45px}
.tf-visual-footer>span{margin-right:auto;max-width:60%;line-height:1.4}
.tf-visual-footer button{border:0;padding:7px 0;background:transparent;font-size:11px;color:#1b617f;white-space:nowrap}
.tf-story{padding:24px 27px;display:flex;flex-direction:column;min-width:0;border-left:1px solid #d9e6ee}
.tf-stage-number{font-size:10px;color:#008eae;font-weight:700;letter-spacing:1.5px}
.tf-self .tf-stage-number{color:#875b26}
.tf-story h2{font-size:clamp(21px,2vw,29px);line-height:1.14;margin:10px 0 20px;letter-spacing:-.6px;min-height:2.28em;color:#123d59}
.tf-action{display:flex;gap:12px;margin-bottom:15px;align-items:flex-start}
.tf-action>svg{width:23px;height:23px;flex-shrink:0;color:#078db8;margin-top:2px}
.tf-action b{font-size:11px;letter-spacing:.3px;color:#28617d}
.tf-action p{font-size:14px;line-height:1.45;margin:3px 0 0;color:#32556d}
.tf-outcome{display:flex;gap:10px;align-items:flex-start;border-top:1px solid #dce9f0;padding-top:14px;margin-top:auto;color:#177765;font-size:12px;line-height:1.45}
.tf-outcome svg{width:19px;height:19px;flex-shrink:0}
.tf-self .tf-outcome{color:#875b26}
.tf-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:12px}
.tf-steps button{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;text-align:left;border:1px solid #cddfe9;background:#fff;color:#436981;border-radius:12px;padding:13px 15px;min-height:54px}
.tf-steps button>span{font-size:12px;color:#73a4ba}
.tf-steps button>b{font-size:13px;font-weight:500}
.tf-steps button.selected{border-color:#0099c4;color:#007d9e;background:#e5f7fc}
.tf-step-progress{display:none;position:absolute;bottom:0;left:0;width:var(--tf-progress);height:3px;background:#00a6cc}
.tf-steps button.selected .tf-step-progress{display:block}
.tf-self .tf-steps button.selected{border-color:#b6884b;color:#785124;background:#fcf4e8}
.tf-self .tf-step-progress{background:#b6884b}
.tf-bottom{display:grid;grid-template-columns:1.15fr 1fr;gap:25px;margin-top:17px;align-items:center}
.tf-takeaway{display:flex;align-items:center;gap:14px;color:#52798e;font-size:12px;line-height:1.5}
.tf-takeaway>svg{width:32px;height:32px;flex-shrink:0;color:#009bc1}
.tf-takeaway b{display:block;font-size:16px;font-weight:600;color:#087c9d;margin-bottom:3px}
.tf-self .tf-takeaway b,.tf-self .tf-takeaway>svg{color:#875b26}
.tf-bottom>p{margin:0;font-size:10px;line-height:1.55;color:#6c8698}
.tf-direction{stroke:#58abc8;stroke-width:2;stroke-dasharray:5 7;animation:tfFlow 2s linear infinite}
.tf-unload{animation:tfUnload 5s ease-in-out infinite}
.tf-walk-short{animation:tfWalkShort 5s ease-in-out infinite}
.tf-pass-security{animation:tfSecurity 7s ease-in-out infinite}
.tf-bag-through{animation:tfBagThrough 7s ease-in-out infinite}
.tf-scan-beam{animation:tfScan 1.2s ease-in-out infinite alternate}
.tf-carousel-bag{animation:tfCarousel 6s ease-in-out infinite}
.tf-reclaim-person{animation:tfReclaim 6s ease-in-out infinite}
.tf-checkin-person{animation:tfCheckinPerson 6s ease-in-out infinite}
.tf-checkin-bag{animation:tfCheckinBag 6s ease-in-out infinite}
.tf-walk-gate{animation:tfWalkGate 7s ease-in-out infinite}
.tf-load-hy{animation:tfLoad 7s ease-in-out infinite}
.tf-confirm-cabin{animation:tfConfirm 4s ease-in-out infinite}
.tf-confirm-bag{animation:tfConfirm 4s 1s ease-in-out infinite}
.tf-stopped *{animation-play-state:paused!important}
@keyframes tfFlow{to{stroke-dashoffset:-24}}
@keyframes tfUnload{0%,12%{transform:translate(0,0)}75%,100%{transform:translate(130px,73px)}}
@keyframes tfWalkShort{0%,10%{transform:translate(0,0)}80%,100%{transform:translate(115px,0)}}
@keyframes tfSecurity{0%,8%{transform:translate(0,0)}45%,58%{transform:translate(232px,0)}90%,100%{transform:translate(465px,0)}}
@keyframes tfBagThrough{0%,8%{transform:translate(0,0)}45%,58%{transform:translate(268px,0)}90%,100%{transform:translate(490px,0)}}
@keyframes tfScan{to{opacity:.2}}
@keyframes tfCarousel{0%,12%{transform:translate(0,0)}28%{transform:translate(-95px,0)}40%{transform:translate(-125px,16px)}52%{transform:translate(-130px,36px)}65%{transform:translate(-100px,63px)}85%,100%{transform:translate(-160px,94px)}}
@keyframes tfReclaim{0%,12%{transform:translate(0,0)}53%,65%{transform:translate(160px,0)}85%,100%{transform:translate(63px,0)}}
@keyframes tfCheckinPerson{0%,10%{transform:translate(0,0)}45%,100%{transform:translate(110px,0)}}
@keyframes tfCheckinBag{0%,10%{transform:translate(0,0)}45%{transform:translate(110px,0)}65%,100%{transform:translate(167px,-14px)}}
@keyframes tfWalkGate{0%,10%{transform:translate(0,0)}85%,100%{transform:translate(395px,0)}}
@keyframes tfLoad{0%,10%{transform:translate(0,0)}80%,100%{transform:translate(430px,-53px)}}
@keyframes tfConfirm{0%,100%{opacity:.7}45%,70%{opacity:1}}
@media(min-width:900px) and (max-height:850px){
 .transfer-v5{padding-top:102px;padding-bottom:80px}
 .transfer-v5 .eyebrow{margin-bottom:8px;font-size:10px}
 .transfer-v5 .tf-heading{margin-bottom:13px}
 .transfer-v5 .tf-heading h1{font-size:clamp(30px,3vw,45px)}
 .tf-route{padding:8px 16px;margin-bottom:12px}
 #tfScene{max-height:260px;min-height:185px}
 .tf-story{padding:17px 21px}
 .tf-story h2{font-size:23px;margin:8px 0 13px}
 .tf-action{margin-bottom:11px;gap:10px}
 .tf-action p{font-size:12px}
 .tf-outcome{font-size:11px;padding-top:11px}
 .tf-scene-top{padding-top:12px}
 .tf-visual-footer{padding:7px 17px 10px;min-height:33px}
 .tf-steps button{padding:10px 13px;min-height:45px}
 .tf-bottom{margin-top:12px}
 .tf-takeaway b{font-size:14px}
}
@media(max-width:1000px){.tf-carrier{gap:7px}.tf-route{gap:10px}.tf-carrier>span{display:none}.tf-route small{display:none}.tf-modes button{padding:11px 12px;font-size:12px}.tf-story{padding:20px}.tf-story h2{font-size:23px}.tf-action p{font-size:13px}.tf-outcome{font-size:11px}}
@media(max-width:760px){
 .transfer-v5 .tf-heading{align-items:flex-start;flex-direction:column;gap:16px}
 .transfer-v5 .tf-heading h1{font-size:32px;letter-spacing:-1px}
 .tf-modes{width:100%;display:grid;grid-template-columns:1fr 1fr}
 .tf-modes button{font-size:13px}
 .tf-route{padding:10px;gap:8px;flex-wrap:nowrap}
 .tf-carrier{flex-direction:column;gap:3px}.tf-carrier img{width:62px;height:22px}.tf-carrier.hy img{width:83px;height:25px}.tf-hub{flex-direction:column;gap:3px}.tf-hub>span{font-size:10px;text-align:center}.tf-route-line{flex:1;min-width:10px}.tf-carrier b,.tf-hub b{font-size:14px}
 .tf-stage{grid-template-columns:1fr;border-radius:17px}
 #tfScene{min-height:170px;max-height:290px}
 .tf-story{border-left:0;border-top:1px solid #d9e6ee;padding:20px}
 .tf-story h2{min-height:0;margin-bottom:15px;font-size:23px}
 .tf-action p{font-size:13px}.tf-outcome{font-size:12px}
 .tf-visual-footer{padding:8px 13px 13px;gap:9px;font-size:10px}.tf-visual-footer>span{max-width:53%}.tf-visual-footer button{font-size:10px}
 .tf-scene-top{padding:13px 14px 0;font-size:9px;letter-spacing:1px}.tf-live{font-size:8px;letter-spacing:.3px}
 .tf-steps{grid-template-columns:1fr 1fr;gap:8px}.tf-steps button{padding:12px 10px;gap:7px;min-height:48px}.tf-steps button b{font-size:12px}
 .tf-bottom{grid-template-columns:1fr;gap:14px}.tf-bottom>p{font-size:10px}.tf-takeaway b{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.transfer-v5 *{animation:none!important}}

/* Keep the complete process visible on compact presentation screens. */
@media(min-width:1001px) and (max-height:760px){
 .transfer-v5{padding-top:96px;padding-bottom:72px}
 .transfer-v5 .eyebrow{margin:0 0 7px;font-size:9px}
 .transfer-v5 .tf-heading{margin-bottom:10px}
 .transfer-v5 .tf-heading h1{font-size:32px;line-height:1.05;letter-spacing:-1px}
 .tf-route{padding:6px 16px;margin-bottom:10px}
 #tfScene{max-height:225px;min-height:175px}
 .tf-scene-top{padding:11px 18px 0}
 .tf-visual-footer{padding:5px 17px 8px;min-height:30px}
 .tf-story{padding:13px 20px}
 .tf-story h2{font-size:21px;min-height:0;margin:7px 0 11px}
 .tf-action{margin-bottom:9px}
 .tf-action p{font-size:12px;line-height:1.35}
 .tf-outcome{font-size:10.5px;padding-top:9px;line-height:1.4}
 .tf-steps{margin-top:10px}
 .tf-steps button{min-height:42px;padding:9px 13px}
 .tf-bottom{margin-top:10px}
 .tf-bottom>p{font-size:9px;line-height:1.4}
 .tf-takeaway{font-size:10px;gap:10px}.tf-takeaway b{font-size:13px}
}