.contact-rail{position:fixed;z-index:35;display:flex;gap:12px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}.contact-rail.visible{opacity:1;pointer-events:auto}.contact-rail[hidden]{display:none}.contact-rail[data-side=right],.contact-rail:not([data-side]){right:20px;top:50%;flex-direction:column;transform:translateY(-50%)}.contact-rail[data-side=left]{left:20px;top:50%;flex-direction:column;transform:translateY(-50%)}.contact-rail[data-side=bottom]{bottom:22px;left:50%;transform:translateX(-50%)}.rail-item{position:relative}.rail-button{display:grid;place-items:center;width:40px;height:40px;border:1px solid #ffffff40;border-radius:50%;background:#ffffffca;backdrop-filter:blur(18px);box-shadow:0 3px 15px #00000012;transition:transform .2s}.rail-button:hover{transform:translateY(-2px)}.rail-button img{width:19px;height:19px}.rail-bubble{position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%) scale(.96);transform-origin:right center;opacity:0;visibility:hidden;padding:10px;background:#fff;border-radius:12px;box-shadow:0 8px 30px #0002;transition:opacity .2s,transform .25s;min-width:164px}.rail-bubble img{display:block;width:144px;height:auto}.rail-item:hover .rail-bubble,.rail-item:focus-within .rail-bubble{opacity:1;visibility:visible;transform:translateY(-50%) scale(1)}[data-side=left] .rail-bubble{right:auto;left:calc(100% + 14px);transform-origin:left center}[data-side=bottom] .rail-bubble{right:50%;top:auto;bottom:calc(100% + 14px);transform:translateX(50%) scale(.96)}[data-side=bottom] .rail-item:hover .rail-bubble{transform:translateX(50%) scale(1)}@media(max-width:700px){.contact-rail[data-side=left]{left:10px}.contact-rail[data-side=right],.contact-rail:not([data-side]){right:10px}.rail-button{width:44px;height:44px}}
@media(hover:none),(pointer:coarse){.contact-rail{opacity:1;pointer-events:auto}.rail-item.is-open .rail-bubble{opacity:1;visibility:visible;transform:translateY(-50%) scale(1)}}
[data-side=bottom] .rail-item:focus-within .rail-bubble{transform:translateX(50%) scale(1)}
/* Edge-to-edge relay: animate relative motion without crossing the artwork. */
.contact-rail{transition:opacity .7s ease;will-change:opacity,translate}
@media(prefers-reduced-motion:reduce){.contact-rail{transition:none}}
.rail-button img{opacity:.88}.rail-button:hover img{opacity:1}
.rail-bubble:after{content:"";position:absolute;width:9px;height:9px;right:-4px;top:calc(50% - 4px);background:white;transform:rotate(45deg)}
[data-side=left] .rail-bubble:after{right:auto;left:-4px}
[data-side=bottom] .rail-bubble:after{left:calc(50% - 4px);right:auto;top:auto;bottom:-4px}
#home .scroll{transition:bottom .35s ease}
body:has(.contact-rail.visible[data-side=bottom]) #home .scroll{bottom:104px}
.rail-button img{width:21px;height:21px}
.rail-bubble{padding:6px;min-width:164px;border-radius:14px}
.rail-qr-crop{position:relative;width:152px;height:152px;overflow:hidden;background:#fff;border-radius:5px}
.rail-qr-crop img{position:absolute;display:block;max-width:none;width:100%;height:auto;left:0;top:0}
.rail-qr-crop img[src*="wechat-channels"]{width:122.603%;left:-11.30%;top:-37.67%}
.rail-qr-crop img[src*="instagram"]{width:180.24%;left:-40%;top:-73.81%}
.rail-bubble:after{width:12px;height:12px;right:-5px;top:calc(50% - 6px);border-radius:2px 7px 3px 7px}
[data-side=left] .rail-bubble:after{left:-5px;right:auto;border-radius:3px 7px 2px 7px}
[data-side=bottom] .rail-bubble:after{left:calc(50% - 6px);bottom:-5px;top:auto;border-radius:3px 7px 2px 7px}
.rail-bubble:after{width:12px;height:16px;right:-10px;top:calc(50% - 8px);border-radius:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M0 0C2 5 5 6 12 8C5 10 2 11 0 16Z' fill='white'/%3E%3C/svg%3E") center/contain no-repeat;transform:none}
[data-side=left] .rail-bubble:after{left:-10px;right:auto;top:calc(50% - 8px);border-radius:0;transform:scaleX(-1)}
[data-side=bottom] .rail-bubble:after{left:calc(50% - 6px);bottom:-12px;top:auto;border-radius:0;transform:rotate(90deg)}
.contact-rail{transition:opacity .85s ease}
.control-label{position:absolute;right:0;bottom:calc(100% + 5px);white-space:nowrap;font:400 11px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;letter-spacing:.06em;color:#fff;text-shadow:0 1px 5px #000b;opacity:0;transform:translateY(3px);pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.rail-item:hover>.control-label,.rail-item:focus-within>.control-label,.top:hover>.control-label,.top:focus-visible>.control-label{opacity:1;transform:translateY(0)}
.top>.control-label{right:calc(100% + 3px);bottom:35px}

/* Labels wait for deliberate hover, with consistent alignment. */
.rail-item:hover>.control-label,.top:hover>.control-label{transition-delay:2.4s}
.rail-item:focus-within>.control-label,.top:focus-visible>.control-label{transition-delay:.3s}
.contact-rail[data-side=left] .control-label{left:0;right:auto}
.contact-rail[data-side=bottom] .control-label{left:50%;right:auto;transform:translate(-50%,3px)}
.contact-rail[data-side=bottom] .rail-item:hover>.control-label{transform:translate(-50%,0)}

.qr-caption{display:block;text-align:center;color:#555;font:400 11px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;letter-spacing:.04em;margin:5px 0 1px;opacity:0;transition:opacity .4s ease}
.rail-item:hover .qr-caption{opacity:1;transition-delay:2.4s}
.rail-item:focus-within .qr-caption{opacity:1;transition-delay:2.4s}
@media(hover:none){.rail-item.is-open .qr-caption{opacity:1;transition-delay:0s}}

@media(hover:none),(pointer:coarse){
.contact-rail[data-side=right],.contact-rail:not([data-side]){right:max(10px,env(safe-area-inset-right))}
.contact-rail[data-side=left]{left:max(10px,env(safe-area-inset-left))}
.rail-button{min-width:44px;min-height:44px}
.rail-item.is-open .rail-bubble{opacity:1;visibility:visible}
.qr-caption{transition-delay:0s}
}

/* QR captions belong to their cards and appear immediately. */
.qr-caption,.rail-item:hover .qr-caption,.rail-item:focus-within .qr-caption{opacity:1;transition:none;margin:5px 0 1px;text-align:center}
/* Plain hints face the page interior, independent of the QR cards. */
.contact-rail[data-side=right] .rail-item>.control-label,.contact-rail:not([data-side]) .rail-item>.control-label{left:auto;right:calc(100% + 10px);top:50%;bottom:auto;transform:translateY(-50%)}
.contact-rail[data-side=left] .rail-item>.control-label{left:calc(100% + 10px);right:auto;top:50%;bottom:auto;transform:translateY(-50%)}
.contact-rail[data-side=bottom] .rail-item>.control-label{left:50%;right:auto;top:auto;bottom:calc(100% + 10px);transform:translateX(-50%)}
.top>.control-label{left:50%;right:auto;top:auto;bottom:calc(100% + 2px);transform:translateX(-50%);letter-spacing:.1em}
.top:hover>.control-label,.top:focus-visible>.control-label{transform:translateX(-50%)}

.rail-qr-crop img[src*="whatsapp-qr-original"]{width:199.66%;left:-49.66%;top:-166.55%}
.qr-caption{font-size:11px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:152px;margin:4px auto 1px}

.rail-qr-crop img[src^='qr-']{width:100%;height:100%;left:0;top:0;object-fit:contain}
@media(max-width:700px){.contact-rail[data-side],.contact-rail:not([data-side]){left:50%;right:auto;top:auto;bottom:max(18px,env(safe-area-inset-bottom));flex-direction:row;transform:translateX(-50%);gap:10px}.contact-rail .rail-bubble,.contact-rail[data-side=left] .rail-bubble{right:50%;left:auto;top:auto;bottom:calc(100% + 14px);transform:translateX(50%) scale(.96);transform-origin:center bottom}.contact-rail .rail-item:hover .rail-bubble,.contact-rail .rail-item:focus-within .rail-bubble,.contact-rail .rail-item.is-open .rail-bubble{transform:translateX(50%) scale(1)}.contact-rail .rail-bubble:after,.contact-rail[data-side=left] .rail-bubble:after{left:calc(50% - 6px);right:auto;bottom:-12px;top:auto;transform:rotate(90deg)}.page-markers{bottom:78px!important}.top{bottom:66px!important}.contact-rail .control-label{left:50%!important;right:auto!important;top:auto!important;bottom:calc(100% + 8px)!important;transform:translateX(-50%)!important}}

/* QR cards have no extra caption row. */
.qr-caption{display:none!important}.rail-bubble{padding:4px;min-width:160px;width:160px;height:160px;box-sizing:border-box;border-radius:12px}.rail-qr-crop{width:152px;height:152px;border-radius:3px}
.rail-item:hover>.control-label{transition-delay:1s!important}.rail-item:focus-within>.control-label{transition-delay:.3s!important}
.rail-button img[src*='contact-wechat.svg']{width:25px;height:25px}
.contact-final a img[src*='contact-wechat.svg']{width:29px;height:29px}
.contact-rail,.contact-final,.contact-final-card{translate:0 var(--menu-shift,0px);transition:translate .35s ease,opacity .5s ease}
.nav-side.open .drop{max-height:calc(100svh - 90px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
@media(max-width:700px),(pointer:coarse){
.contact-rail[data-side],.contact-rail:not([data-side]){top:50%;bottom:auto;left:auto;right:10px;flex-direction:column;gap:12px;transform:translateY(-50%)}
.contact-rail[data-side=left]{left:10px;right:auto}.contact-rail[data-side=right]{right:10px;left:auto}
.contact-rail:not(.visible){opacity:0;pointer-events:none}.contact-rail.visible{opacity:1;pointer-events:auto}
.contact-rail .rail-bubble{left:auto;right:calc(100% + 12px);top:50%;bottom:auto;transform:translateY(-50%) scale(.96);transform-origin:right center}
.contact-rail[data-side=left] .rail-bubble{left:calc(100% + 12px);right:auto;top:50%;bottom:auto;transform:translateY(-50%) scale(.96);transform-origin:left center}
.contact-rail .rail-item.is-open .rail-bubble,.contact-rail[data-side=left] .rail-item.is-open .rail-bubble{transform:translateY(-50%) scale(1);opacity:1;visibility:visible}
.contact-rail .rail-item:not(.is-open) .rail-bubble{opacity:0;visibility:hidden}
.contact-rail .rail-bubble:after{left:auto;right:-6px;top:calc(50% - 6px);bottom:auto;transform:none}
.contact-rail[data-side=left] .rail-bubble:after{right:auto;left:-6px;transform:rotate(180deg)}
.contact-rail[data-side=right] .rail-item>.control-label{left:auto!important;right:calc(100% + 10px)!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important}
.contact-rail[data-side=left] .rail-item>.control-label{left:calc(100% + 10px)!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important}
.nav-side.open .drop{background:#f3f3f0f7!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
}

.rail-button img[src*="contact-wechat.svg"]{width:28px;height:28px}

/* Phone callouts point to the centre of the selected side control. */
@media(max-width:700px){
 .contact-rail[data-side=left] .rail-bubble:after,
 .contact-rail[data-side=right] .rail-bubble:after{top:calc(50% - 8px)!important;bottom:auto!important;width:12px;height:16px}
 .contact-rail[data-side=right] .rail-bubble:after{left:auto!important;right:-10px!important;transform:none!important}
 .contact-rail[data-side=left] .rail-bubble:after{left:-10px!important;right:auto!important;transform:scaleX(-1)!important}
}

@media(max-width:700px){.contact-rail:not(.visible){opacity:0!important;pointer-events:none!important}.contact-rail.visible{opacity:1;pointer-events:auto}}