/* Shared, non-overshooting motion family. Layout and header scroll are untouched. */
:root{--button-ease:cubic-bezier(.22,1,.36,1);--button-roll-duration:600ms;--button-icon-duration:450ms}
.site-header nav a .nav-roll-track,
.site-header .header-cta .cta .cta-roll-track{transition:transform var(--button-roll-duration) var(--button-ease)}
.site-header .header-cta .cta{transition:background-color 600ms var(--button-ease),color 600ms var(--button-ease)}

/* Reserve a fixed 32px icon wrapper. Static -4px margins retain the original
   24px layout footprint and center, including left-arrow variants. No hover padding changes. */
[data-button-roll]{transition:border-color 400ms ease}
[data-button-roll] .button-roll-window{position:relative;display:block;overflow:hidden;height:1.4em;line-height:1.4;flex-shrink:0}
[data-button-roll] .button-roll-line{display:block;white-space:nowrap;transition:transform var(--button-roll-duration) var(--button-ease)}
[data-button-roll] .button-roll-line+ .button-roll-line{position:absolute;top:100%;left:0;width:100%}
[data-button-roll] .button-arrow-state{position:relative;display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;margin-inline:-4px}
[data-button-roll] .button-arrow-state:before{content:none}
[data-button-roll] .button-arrow-state>img{grid-area:1 / 1;transition:opacity 450ms var(--button-ease)}
[data-button-roll] .button-arrow-state>img:not(.button-arrow-hover){width:24px;height:24px;max-width:none}
[data-button-roll] .button-arrow-state>.button-arrow-hover{display:block;position:absolute;left:50%;top:50%;width:32px;height:32px;max-width:none;opacity:0;transform:translate(-50%,-50%) scale(.75);transition:transform var(--button-icon-duration) var(--button-ease),opacity var(--button-icon-duration) var(--button-ease)}
[data-button-roll="left"] .button-arrow-state>.button-arrow-hover{transform:translate(-50%,-50%) scale(-.75,.75)}
[data-button-roll][data-button-over="true"]{border-color:#6d7882}
.about [data-button-roll][data-button-over="true"],.business [data-button-roll][data-button-over="true"],.recruit [data-button-roll][data-button-over="true"]{border-color:#b1b8be}
[data-button-roll][data-button-over="true"] .button-roll-line{transform:translateY(-100%)}
[data-button-roll][data-button-over="true"] .button-arrow-state>img:not(.button-arrow-hover){opacity:0}
[data-button-roll][data-button-over="true"] .button-arrow-state>.button-arrow-hover{opacity:1;transform:translate(-50%,-50%) scale(1)}
[data-button-roll="left"][data-button-over="true"] .button-arrow-state>.button-arrow-hover{transform:translate(-50%,-50%) scale(-1,1)}

/* CONTACT preserves the existing Figma roll windows, rows and icon geometry. */
#contact .contact-mail,#contact .contact-phone{--contact-mail-easing:var(--button-ease);--contact-phone-easing:var(--button-ease);transition:background-color 600ms var(--button-ease),color 600ms var(--button-ease)}
#contact .contact-mail-label,#contact .contact-phone-row{transition:transform 600ms var(--button-ease)}
#contact .contact-phone .phone-number{transition:color 600ms var(--button-ease)}
#contact .contact-mail-icon:after{background:transparent url('../img/7cac5.svg') center/32px 32px no-repeat;mask:none;-webkit-mask:none;transition:opacity 600ms var(--button-ease)}
#contact .contact-mail-icon:before{content:'';position:absolute;inset:0;background:url('../img/contact-mail-hover.svg') center/32px 32px no-repeat;opacity:0;transition:opacity 600ms var(--button-ease)}
@media(hover:hover) and (pointer:fine){#contact .contact-mail:hover .contact-mail-icon:after{opacity:0}#contact .contact-mail:hover .contact-mail-icon:before{opacity:1}}
@media(prefers-reduced-motion:reduce){
 .site-header nav a .nav-roll-track,.site-header .header-cta .cta,.site-header .header-cta .cta .cta-roll-track,
 [data-button-roll],[data-button-roll] .button-roll-line,[data-button-roll] .button-arrow-state>img,
 #contact .contact-mail,#contact .contact-phone,#contact .contact-mail-label,#contact .contact-phone-row,#contact .contact-phone .phone-number,#contact .contact-mail-icon:before,#contact .contact-mail-icon:after{transition:none!important}
 [data-button-roll] .button-roll-line,.site-header nav a .nav-roll-track,.site-header .header-cta .cta .cta-roll-track,#contact .contact-mail-label,#contact .contact-phone-row{transform:none!important}
 [data-button-roll] .button-arrow-state>.button-arrow-hover{display:none!important}
 [data-button-roll][data-button-over="true"] .button-arrow-state>img:not(.button-arrow-hover){opacity:1}
}

#contact .contact-mail:focus-visible,#contact .contact-phone:focus-visible{background-color:#f4f6fc;color:#39506c}
#contact .contact-mail:focus-visible .contact-mail-label{transform:translateY(calc(-1 * (var(--contact-mail-row) + var(--contact-mail-gap))))}
#contact .contact-mail:focus-visible .contact-mail-icon:after{opacity:0}
#contact .contact-mail:focus-visible .contact-mail-icon:before{opacity:1}
#contact .contact-phone:focus-visible .phone-number{color:#39506c}
#contact .contact-phone:focus-visible .contact-phone-row{transform:translateY(calc(-1 * var(--contact-phone-next-row)))}