/* Shared states: a label for hover, a small mark for choice, one frame for focus. */
:root{--focus-ring:#18181B}
.dark,.am-dark{--focus-ring:#FAFAFA}
:is(.text-link,.am-text-link,.hero-film-link){border-bottom:0}
:is(.text-link,.am-text-link,.hero-film-link) .interaction-label{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
:is(.capability-index,.legal-index,.site-directory) a:hover .interaction-label{text-decoration:underline;text-underline-offset:4px}
.zoom-icon{display:inline-block;vertical-align:middle;flex-shrink:0}
:is(.text-link,.am-text-link,.nav-link,.nav-contact,.footer-nav a,.footer-legal a,.site-directory a,.dropdown-grid a,.language-options a,.client-card,.client-perspective,.catalog-card,.am-solution-card,.related-card){transition:color 160ms,border-color 160ms,background-color 160ms}
:is(.client-card,.client-perspective,.catalog-card,.am-solution-card,.related-card):hover{border-color:#A1A1AA}
:is(.card-link>span,.am-card-arrow,.am-link-arrow,.related-card>span[aria-hidden],.client-perspective-name>span[aria-hidden]){display:inline-block;transition:transform 160ms}
:is(.client-card,.catalog-card):is(:hover,:focus-visible) .card-link>span,
.am-solution-card:is(:hover,:focus-visible) .am-card-arrow,
.am-text-link:is(:hover,:focus-visible) .am-link-arrow,
.related-card:is(:hover,:focus-visible)>span[aria-hidden],
.client-perspective:is(:hover,:focus-visible) .client-perspective-name>span[aria-hidden]{transform:translate(2px,-2px)}
/* Boxed controls share their focus edge with the existing border. */
:is(.client-card,.client-perspective,.catalog-card,.am-solution-card,.related-card,.dropdown-card>a,.menu-toggle,.architecture-controls button,.segmented button,.architecture-scroll):focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
/* A light ring on the dark button itself would disappear against the page. */
:is(.button,.am-button,.nav-contact,.film-play-button):focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
/* A view choice uses the same light surface and one short marker everywhere. */
:is(.segmented,.architecture-controls,.media-viewer-toolbar) button{position:relative;transition:background-color 160ms,color 160ms}
:is(.segmented,.architecture-controls,.media-viewer-toolbar) button::after{content:"";position:absolute;left:calc(50% - .5rem);bottom:3px;width:1rem;height:2px;background:transparent}
:is(.segmented,.architecture-controls,.media-viewer-toolbar) button[aria-pressed=true]{background:#F4F4F5;color:#18181B}
:is(.segmented,.architecture-controls,.media-viewer-toolbar) button[aria-pressed=true]::after{background:#71717A}
@media(hover:hover){:is(.segmented,.architecture-controls,.media-viewer-toolbar) button:hover:not([aria-pressed=true]){background:#FAFAFA}}
:where(.js) .nav-group[open]>.dropdown,:where(.js) .language-switch[open]>.language-options{animation:corbel-control-enter 180ms ease-out}
@keyframes corbel-control-enter{from{opacity:.65;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes corbel-backdrop-enter{from{background-color:rgba(24,24,27,0)}to{background-color:rgba(24,24,27,.82)}}
@media(prefers-reduced-motion:reduce){
 :is(.text-link,.am-text-link,.nav-link,.nav-contact,.footer-nav a,.footer-legal a,.site-directory a,.dropdown-grid a,.language-options a,.client-card,.client-perspective,.catalog-card,.am-solution-card,.related-card,.card-link>span,.am-card-arrow,.am-link-arrow,.related-card>span[aria-hidden],.client-perspective-name>span[aria-hidden],.architecture-controls button,.segmented button){transition:none!important;transform:none!important}
 .nav-group[open]>.dropdown,.language-switch[open]>.language-options{animation:none!important}
}