/* One ink-and-type language, from small editorial links to the closing invitation. */
:root{--musou-ease:cubic-bezier(.16,1,.3,1);--musou-feedback:180ms;--musou-link-time:480ms}
.motion-link{--motion-active:0;--icon-x:0px;--icon-y:0px;--label-out:-125%;--label-in:125%}
.motion-link:focus-visible,.footer-invitation>a:focus-visible,.services-scroll:focus-visible,.enquiry-submit:focus-visible{--motion-active:1;outline:2px solid currentColor;outline-offset:6px}
.motion-label{display:inline-grid;overflow:hidden;vertical-align:bottom;line-height:1.22;padding-block:.06em;max-width:100%;min-width:0}
.motion-label-current,.motion-label-next{grid-area:1/1;transition:transform var(--musou-link-time) var(--musou-ease);min-width:0}
.motion-label-current{transform:translateY(calc(var(--motion-active)*var(--label-out)))}
.motion-label-next{transform:translateY(calc((1 - var(--motion-active))*var(--label-in)));pointer-events:none}
.motion-icon{--arrow-x:125%;--arrow-y:-125%;position:relative;display:inline-grid;place-items:center;flex:none;width:26px;height:26px;overflow:hidden;vertical-align:middle;transform:translate(var(--icon-x),var(--icon-y));transition:transform .6s var(--musou-ease)}
.motion-icon[data-direction="down"]{--arrow-x:0%;--arrow-y:125%}
.motion-icon[data-direction="up"]{--arrow-x:0%;--arrow-y:-125%}
.motion-icon[data-direction="back"]{--arrow-x:-125%;--arrow-y:0%}
.motion-link:is(a,button) .motion-icon svg{grid-area:1/1;display:block;width:100%;height:100%;transition:transform var(--musou-link-time) var(--musou-ease);transform:translate(calc(var(--motion-active)*var(--arrow-x)),calc(var(--motion-active)*var(--arrow-y)))}
.motion-link:is(a,button) .motion-icon .motion-icon-next{transform:translate(calc((var(--motion-active) - 1)*var(--arrow-x)),calc((var(--motion-active) - 1)*var(--arrow-y)))}
.footer-enquire .motion-icon{width:20px;height:20px}.back-top .motion-icon{width:18px;height:18px}.back-top .motion-icon svg{rotate:180deg}
/* Primary actions: an ink fill rises into the outlined capsule. */
.agency-link{--motion-active:0;display:inline-flex;align-items:center;justify-content:space-between;position:relative;width:fit-content;font-size:17px;line-height:1.3;min-height:58px;max-width:100%;gap:30px;padding:11px 12px 11px 24px;border:1px solid color-mix(in srgb,var(--musou-ink) 45%,transparent);border-radius:999px;isolation:isolate;overflow:hidden;transition:color var(--musou-feedback),border-color var(--musou-feedback)}
.agency-link::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--musou-ink);transform:translateY(calc((1 - var(--motion-active))*103%));transition:transform var(--musou-link-time) var(--musou-ease)}
.agency-link::after{display:none}
/* Keep spacing outside the clipping window so the waiting arrow cannot peek through. */
.agency-link>.motion-icon{width:20px;height:20px;margin:7px;padding:0;border:0;border-radius:0}
.agency-link:focus-visible{--motion-active:1;color:var(--musou-page);outline-color:var(--musou-ink);border-color:var(--musou-ink)}
.agency-link>span:first-child{min-width:0}
/* Smaller links retain editorial rules rather than becoming another button. */
:is(.text-link,.footer-enquire,.back-top,.footer-page-links a,.agency-footer-bottom a,.footer-details>div>a:not(.footer-enquire)){position:relative;min-height:44px;align-content:center}
.text-link{display:inline-flex;align-items:center;gap:24px;border-bottom:1px solid var(--musou-border);text-decoration:none!important}
.text-link span{margin-left:0}.text-link .motion-icon{width:18px;height:18px}
:is(.text-link,.footer-enquire)::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(var(--motion-active));transform-origin:left;transition:transform var(--musou-link-time) var(--musou-ease)}
:is(.back-top,.footer-page-links a,.agency-footer-bottom a,.footer-details>div>a:not(.footer-enquire)){text-decoration:none!important;background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-repeat:no-repeat;background-position:0 calc(100% - 7px);transition:background-size var(--musou-link-time) var(--musou-ease)}
:is(.back-top,.footer-page-links a,.agency-footer-bottom a,.footer-details>div>a:not(.footer-enquire)):focus-visible{background-size:100% 1px}
.footer-page-links a{display:inline-flex;align-items:center}.footer-page-links{row-gap:0}
.agency-footer-bottom a{display:inline-flex;align-items:center}
.contact-email,.case-copy a:not(.text-link),.agency-extra a,.page-content p a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:text-decoration-color var(--musou-feedback),text-underline-offset var(--musou-feedback)}
.contact-email:focus-visible,.case-copy a:focus-visible,.agency-extra a:focus-visible,.page-content p a:focus-visible{text-decoration-color:currentColor;text-underline-offset:.4em}
/* Circular arrows exchange directionally; their outlines remain steady. */
.footer-arrow,.button-arrow,.services-scroll{position:relative;isolation:isolate;overflow:hidden;transform:translate(var(--icon-x,0px),var(--icon-y,0px));transition:color var(--musou-feedback),transform .6s var(--musou-ease),border-color var(--musou-feedback);background:transparent}
:is(.footer-arrow,.button-arrow,.services-scroll)::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:currentColor;z-index:-1;transform:translateY(calc((1 - var(--motion-active,0))*103%));transition:transform var(--musou-link-time) var(--musou-ease)}
.footer-arrow::before{background:var(--footer-ink)}.button-arrow::before,.services-scroll::before{background:var(--musou-ink)}
.footer-arrow .motion-icon{width:40%;height:auto;aspect-ratio:1;transform:none}.button-arrow .motion-icon{width:30px;height:30px;transform:none}.services-scroll>.motion-icon{width:28px;height:28px;transform:none}
.footer-invitation a:focus-visible .footer-arrow{color:var(--footer-surface);border-color:var(--footer-ink)}
.enquiry-submit:focus-visible .button-arrow,.services-scroll:focus-visible{color:var(--musou-page);border-color:var(--musou-ink)}
.footer-invitation a .footer-arrow,.enquiry-submit .button-arrow{transform:translate(var(--icon-x,0px),var(--icon-y,0px));background:transparent}
.footer-invitation a h2{transition:opacity var(--musou-feedback)}
.enquiry-submit{position:relative;transition:opacity var(--musou-feedback)}
.enquiry-submit::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:currentColor;transform:scaleX(var(--motion-active,0));transform-origin:left;transition:transform var(--musou-link-time) var(--musou-ease)}
/* Large navigational rows get the same rolling typography and a quiet surface wipe. */
.discipline-index a,.capability-index a{position:relative;isolation:isolate}
.discipline-index a::before,.capability-index a::before{content:"";position:absolute;inset:0;z-index:-1;background:currentColor;opacity:calc(var(--motion-active,0)*.045);transform:scaleY(calc(.2 + var(--motion-active,0)*.8));transform-origin:bottom;transition:transform var(--musou-link-time) var(--musou-ease),opacity var(--musou-feedback)}
.discipline-index a h3,.capability-index a>span:nth-child(2){transform:none!important}
.discipline-index .motion-icon{width:55px;height:55px}.capability-index .motion-icon{width:52px;height:52px}
/* Menu and Close share a text roll but have distinct line-to-cross feedback. */
.menu-open-label::after,.menu-close-label::after,.menu-dismiss>span::after{display:none}
.control-mark{position:relative;display:inline-block!important;width:18px;height:14px;margin-right:10px;flex:none}
.control-mark>span{position:absolute;left:0;top:4px;width:18px;height:1px;background:currentColor;transform-origin:center;transition:transform var(--musou-link-time) var(--musou-ease)}
.control-mark>span+span{top:9px;transform:scaleX(.6);transform-origin:right}
.site-menu>summary .control-mark>span{transform:translateX(calc(var(--motion-active)*-2px))}
.site-menu>summary .control-mark>span+span{transform:scaleX(calc(.6 + var(--motion-active)*.4))}
.menu-dismiss{--label-out:125%;--label-in:-125%;gap:0}
.menu-dismiss .control-mark>span{top:6px;transform-origin:center;transform:rotate(calc(45deg + var(--motion-active)*90deg))}
.menu-dismiss .control-mark>span+span{transform:rotate(calc(-45deg + var(--motion-active)*90deg))}
.menu-links a{transform:none!important;transition:color var(--musou-feedback)}
.menu-links .motion-label{line-height:1.06;padding-block:.06em}
/* Navigation type glides through the mask, with a soft start and finish. */
:is(.site-menu>summary,.menu-links a,.footer-page-links a){--musou-link-time:720ms;--musou-feedback:420ms;--musou-ease:cubic-bezier(.4,0,.2,1)}
.site-menu>summary,.menu-links a,.footer-page-links a{--label-out:-112%;--label-in:112%}
.menu-links a{transition:color var(--musou-feedback) var(--musou-ease)}
/* Form responses remain legible with mouse, keyboard or a fingertip. */
.enquiry-field{position:relative}.enquiry-field:not(:has(.enquiry-services))::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--musou-ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--musou-ease);pointer-events:none}
.enquiry-field:focus-within::after{transform:scaleX(1)}
.enquiry-services label>span{display:flex;align-items:center;gap:10px;min-height:46px;transition:background var(--musou-feedback),color var(--musou-feedback),border-color var(--musou-feedback),transform var(--musou-feedback)}
.enquiry-services label>span::before{content:"";width:7px;height:7px;flex:none;border:1px solid currentColor;border-radius:50%;transition:background var(--musou-feedback)}
.enquiry-services input:checked+span::before{background:currentColor}
.enquiry-services label:active>span{transform:scale(.97)}
.enquiry-submit.motion-link:disabled{--motion-active:0;opacity:.55;cursor:wait}
.enquiry-submit[aria-busy="true"] .button-arrow{border-style:dashed;animation:enquiry-checking 1.8s linear infinite}
@keyframes enquiry-checking{to{rotate:360deg}}
@media(hover:hover) and (pointer:fine){
 .motion-link:hover,.footer-invitation>a:hover,.services-scroll:hover,.enquiry-submit:hover{--motion-active:1}
 .agency-link:hover{--motion-active:1;color:var(--musou-page);border-color:var(--musou-ink)}
 :is(.back-top,.footer-page-links a,.agency-footer-bottom a,.footer-details>div>a:not(.footer-enquire)):hover{background-size:100% 1px}
 :is(.contact-email,.case-copy a,.agency-extra a,.page-content p a):hover{text-decoration-color:currentColor;text-underline-offset:.4em}
 .footer-invitation a:hover .footer-arrow{transform:translate(var(--icon-x,0px),var(--icon-y,0px));background:transparent;color:var(--footer-surface);border-color:var(--footer-ink)}
 .enquiry-submit:hover .button-arrow,.services-scroll:hover{transform:translate(var(--icon-x,0px),var(--icon-y,0px));background:transparent;color:var(--musou-page);border-color:var(--musou-ink)}
}
@media(hover:none){.motion-link:active,.agency-link:active,.services-scroll:active,.footer-invitation>a:active,.enquiry-submit:active{--motion-active:1}.agency-link:active{color:var(--musou-page)}.services-scroll:active,.enquiry-submit:active .button-arrow{color:var(--musou-page)}.footer-invitation a:active .footer-arrow{color:var(--footer-surface)}}
@media(max-width:700px){
 .agency-link{min-height:56px;font-size:16px;padding:10px 10px 10px 20px;gap:24px}
 .discipline-index .motion-icon{grid-column:2;grid-row:1;width:30px;height:30px}.capability-index .motion-icon{width:27px;height:27px}
 .services-scroll>.motion-icon{width:23px;height:23px}
 .footer-details{column-gap:24px}.footer-enquire{gap:12px}.footer-enquire .motion-icon{width:18px;height:18px}
}
@media(prefers-reduced-motion:reduce){
 .motion-link,.motion-label-current,.motion-label-next,.motion-icon,.motion-link:is(a,button) .motion-icon svg,.control-mark>span,.agency-link::before,.agency-link,.footer-arrow,.button-arrow,.services-scroll,.footer-invitation a h2,.enquiry-submit::after,.text-link::after,.footer-enquire::after,.discipline-index a::before,.capability-index a::before,.enquiry-field::after,.enquiry-services label>span{transition:none!important}
 .motion-label-current,.motion-icon,.motion-link:is(a,button) .motion-icon svg{transform:none!important}
 .motion-label-next,.motion-icon-next{display:none!important}
 .enquiry-submit[aria-busy="true"] .button-arrow{animation:none}
}
/* Reserve the Menu mark as well as its label, keeping the original toggle gap. */
.theme-toggle{right:calc(var(--nav-right) + 2.444em + var(--nav-gap) + 28px)}
.studio-principle summary{transition:color var(--musou-feedback),background-color var(--musou-feedback)}
.studio-principle summary:focus-visible,.agency-question summary:focus-visible{outline-offset:4px}
.studio-principle summary:focus-visible{background:color-mix(in srgb,var(--musou-ink) 5%,transparent)}
/* FAQ rows use native disclosure and keyboard focus, without pointer-hover styling. */
@media(hover:hover) and (pointer:fine){.studio-principle summary:hover{background:color-mix(in srgb,var(--musou-ink) 4%,transparent)}}
@media(prefers-reduced-motion:reduce){.studio-principle summary,.agency-question summary{transition:none}}
/* Short desktops keep every menu destination in reach without disabling its motion. */
@media(min-width:701px) and (max-height:550px){.menu-panel{padding-block:6svh}.menu-links{gap:8px}}

@media(hover:none){
 .footer-invitation a:hover .footer-arrow{background:transparent;color:var(--footer-ink);transform:none}
 .enquiry-submit:hover .button-arrow,.services-scroll:hover{background:transparent;color:var(--musou-ink);transform:none}
 .footer-invitation a:is(:active,:focus-visible) .footer-arrow{color:var(--footer-surface)}
 .enquiry-submit:is(:active,:focus-visible) .button-arrow,.services-scroll:is(:active,:focus-visible){color:var(--musou-page)}
}