:root{--ease-out:cubic-bezier(.22,1,.36,1);--motion-fast:250ms;--motion-reveal:600ms}
html{scrollbar-gutter:stable}
.motion-pending{opacity:0;translate:0 24px}
.motion-visible{animation:content-appear var(--motion-reveal) var(--ease-out) var(--reveal-delay,0ms) both}
.title-enter{animation:title-appear 500ms var(--ease-out) var(--title-delay,200ms) both}
.letter-heading h1>span{display:inline-block}
.cue-enter{animation:content-appear 600ms var(--ease-out) 700ms both}
.outline-button,.icon-button,.all-expertise,.audience-tabs button{transition:background-color var(--motion-fast) ease-in-out,color var(--motion-fast) ease-in-out,border-color var(--motion-fast) ease-in-out}
.icon-button img,.scroll-cue img{transition:transform 350ms var(--ease-out)}
.feature-image{transition:transform 800ms var(--ease-out)}
.expertise-heading h3{transition:transform 500ms var(--ease-out)}
.expertise-preview{transition:opacity 350ms ease-in-out,transform 500ms var(--ease-out),visibility 350ms}
.menu-grid>nav>a,.menu-grid>nav>button,.quick-links a,.quick-links button,.footer a,.footer .text-button{transition:color 250ms ease-in-out,opacity 250ms ease-in-out,transform 350ms var(--ease-out)}
.menu-grid>nav>a:focus-visible,.quick-links a:focus-visible{transform:translateX(6px)}
.search-results li{animation:content-appear 300ms var(--ease-out) both}
dialog[open],.contact-dialog[open]{animation:panel-appear 400ms var(--ease-out) both}
.contact-dialog[open]{animation-name:drawer-appear;animation-duration:500ms}
dialog[open]::backdrop{animation:backdrop-appear 350ms ease both}
dialog[open] .menu-grid>*,dialog[open] .search-content,dialog[open] .contact-panel{animation:content-appear 500ms var(--ease-out) 100ms both}
dialog[open] .menu-grid>:nth-child(2){animation-delay:160ms}
dialog[open] .menu-grid>:nth-child(3){animation-delay:220ms}
dialog[open][data-closing=true]{animation:panel-disappear 250ms ease-in-out both;pointer-events:none}
.contact-dialog[open][data-closing=true]{animation:drawer-disappear 300ms ease-in-out both}
dialog[open][data-closing=true]::backdrop{animation:backdrop-disappear 250ms ease-in-out both}
/* A still dark canvas and individually revealed links, as on the reference. */
#menu-dialog[open]{animation:backdrop-appear 220ms ease-out both}
#menu-dialog[open] .menu-grid>nav{animation:none}
#menu-dialog[open] .menu-grid>nav>a{animation:menu-link-appear 580ms var(--ease-out) var(--menu-link-delay,90ms) both}
#menu-dialog[open] .menu-grid>nav>h2{animation:backdrop-appear 400ms ease-out 60ms both}
#menu-dialog[open] .menu-grid>:not(nav){animation:content-appear 650ms var(--ease-out) 160ms both}
#menu-dialog[open] .menu-grid>:nth-child(3){animation-delay:230ms}
#menu-dialog[open][data-closing=true]{animation:backdrop-disappear 220ms ease-in-out both}
@keyframes menu-link-appear{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@media(hover:hover) and (pointer:fine){
  .carousel-next:hover img{transform:translateX(3px)}
  .carousel-prev:hover img{transform:translateX(-3px)}
  .menu-grid>nav>a:hover,.quick-links a:hover{transform:translateX(6px)}
}
@keyframes content-appear{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@keyframes title-appear{from{opacity:0;translate:0 .3em}to{opacity:1;translate:0 0}}
@keyframes caption-appear{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes panel-appear{from{opacity:0;translate:0 -12px}to{opacity:1;translate:0 0}}
@keyframes panel-disappear{from{opacity:1;translate:0 0}to{opacity:0;translate:0 -8px}}
@keyframes drawer-appear{from{translate:100% 0}to{translate:0 0}}
@keyframes drawer-disappear{from{translate:0 0}to{translate:100% 0}}
@keyframes backdrop-appear{from{opacity:0}to{opacity:1}}
@keyframes backdrop-disappear{from{opacity:1}to{opacity:0}}
@view-transition{navigation:none}
::view-transition{pointer-events:none}
::view-transition-old(root){animation:backdrop-disappear 180ms ease both}
::view-transition-new(root){animation:backdrop-appear 300ms ease both}
@media(prefers-reduced-motion:reduce){
  html,.carousel{scroll-behavior:auto}
  .motion-pending,.motion-visible,.title-enter,.cue-enter{opacity:1;translate:none;animation:none!important}
  .feature-image,.expertise-heading h3,.expertise-preview,.menu-grid>nav>a,.quick-links a{transition:none;transform:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  dialog[open],dialog[open]::backdrop,dialog[open] *{animation:none!important;translate:none!important}
}
@media print{.motion-pending{opacity:1;translate:none}.statement h2{opacity:1!important;transform:none!important;line-height:1!important}.statement-muted,.statement-muted span{opacity:1!important}}

/* Consistent interaction rhythm, no layout motion when opening a dialog. */
html{scrollbar-gutter:stable}
.fullscreen-dialog,.contact-dialog{overscroll-behavior:contain}
.footer-social a,.chain-engine,.about-link,.impact-link{transition:background-color 250ms ease-in-out,color 250ms ease-in-out,border-color 250ms ease-in-out}
:where(a,button,input,textarea,summary){touch-action:manipulation}
/* Enlarge subtle controls' hit areas without adding visible button chrome. */
.chain-down{position:relative}
.chain-down::after{content:'';position:absolute;inset:-12px}
.chain-topbar button,.chain-topbar .chain-menu-trigger{min-height:44px}
.form-row label{font-size:.875rem}
.form-row input,.form-row textarea{scroll-margin-block:24px}
.about-row-copy p,.impact-case-copy p,.letter-body p{text-wrap:pretty}
@media(pointer:coarse){
  .footer>div:not(.footer-brand) a,.footer .text-button,.popular-searches>button{min-height:44px;display:flex;align-items:center}
  .footer-social a{min-height:44px}
}
@media(prefers-reduced-motion:reduce){.chain-engine,.about-link,.impact-link,.footer-social a{transition:none}}
