/* Navigation motion: stable hit areas; opacity only, no sliding target. */
.main-nav.js-nav li.is-open>.sub-menu{animation:none;display:block}
@media(min-width:961px){
 .main-nav.js-nav>ul>li>.sub-menu,.main-nav.js-nav .sub-menu .sub-menu{display:none;opacity:0;visibility:hidden;pointer-events:none;transform:none;animation:none;transition:none}
 .main-nav.js-nav li.is-open>.sub-menu{display:block;opacity:1;visibility:visible;pointer-events:auto;animation:none}
 .main-nav.js-nav .sub-menu .sub-menu:before{content:'';position:absolute;left:-10px;top:0;width:10px;height:100%;background:transparent}
 .main-nav.js-nav .sub-menu li.opens-left>.sub-menu:before{left:auto;right:-10px}
 .main-nav.js-nav .sub-menu a{transition:background-color .1s ease-out,color .1s ease-out}
 .main-nav.js-nav>ul>li>.sub-menu{max-height:calc(100dvh - 136px);overflow:visible}
}
@media(max-width:960px){.main-nav.js-nav li>.sub-menu{animation:none;transition:none}.main-nav.js-nav li.is-open>.sub-menu{display:block}.main-nav{overscroll-behavior:contain}}
@media(prefers-reduced-motion:reduce){.main-nav.js-nav .sub-menu{transition:none!important;animation:none!important}}

/* Keep the phone dropdown inside the viewport and its enquiry label on one line. */
@media(max-width:820px){.header-inner{gap:12px}.brand,.menu-toggle{flex-shrink:0}.header-cta{white-space:nowrap}.menu-toggle{padding:7px 10px}.main-nav{left:-18px;right:-18px;max-height:calc(100dvh - 108px)}}