/* One shared rolling-letter effect for all three side menus. */
body :is(.contact-nav,.service-rail,.works-rail)>a .rail-roll-label,
body :is(.contact-nav,.service-rail,.works-rail)>a:hover .rail-roll-label,
body :is(.contact-nav,.service-rail,.works-rail)>a:focus-visible .rail-roll-label{
 display:flex;flex:none;writing-mode:horizontal-tb;white-space:nowrap;transform:rotate(90deg);transition:none;color:inherit;text-shadow:none;
}
body :is(.contact-nav,.service-rail,.works-rail)>a::before{display:none}
body :is(.contact-nav,.service-rail,.works-rail)>a img,
body :is(.contact-nav,.service-rail,.works-rail)>a:hover img{transform:none;transition:none}
.rail-roll-glyph{display:block;overflow:hidden;height:1.5em;line-height:1.5;font-style:normal}
.rail-roll-track{position:relative;display:block;font-weight:inherit;transform:translateY(0)}
.rail-roll-track::after{content:attr(data-copy);position:absolute;left:0;top:100%;height:100%;white-space:pre}
body :is(.works-bottom-nav,.service-bottom-nav) .rail-roll-label{display:flex;white-space:nowrap;line-height:1.5}
body :is(.works-bottom-nav,.service-bottom-nav)>a:hover{color:inherit}
.menu-roll-icon{display:block;position:relative;overflow:hidden;width:44px;height:44px;flex:0 0 44px;font-style:normal}
.menu-roll-icon-track{display:block;position:relative;width:100%;height:100%}
body .menu-roll-icon img{display:block;width:100%;height:100%;max-width:none;object-fit:contain}
body .menu-roll-icon .menu-roll-icon-copy{position:absolute;left:0;top:100%}
body :is(.contact-nav,.service-rail,.works-rail) .menu-roll-icon-copy{top:0;left:-100%}
:is(.works-bottom-nav,.service-bottom-nav) .menu-roll-icon{width:32px;height:32px;flex-basis:32px}
@media(hover:hover) and (pointer:fine){
 body .menu-roll-link:hover .rail-roll-track{animation:rail-letter-roll 1.4s cubic-bezier(.24,.12,.09,1) var(--letter-delay) infinite}
 body .menu-roll-link:hover .menu-roll-icon-track{animation:rail-letter-roll 1.4s cubic-bezier(.24,.12,.09,1) infinite}
 body :is(.contact-nav,.service-rail,.works-rail) .menu-roll-link:hover .menu-roll-icon-track{animation-name:rail-icon-roll-side}
}
@keyframes rail-letter-roll{0%,12%{transform:translateY(0)}48%,100%{transform:translateY(-100%)}}
@keyframes rail-icon-roll-side{0%,12%{transform:translateX(0)}48%,100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){body .menu-roll-link:hover .rail-roll-track,body .menu-roll-link:hover .menu-roll-icon-track{animation:none!important}}