/* Shared motion only: geometry, typography and brand colors stay with each page. */
:root{--tw-motion:220ms;--tw-ease:cubic-bezier(.2,.7,.2,1)}
:where(a,button,summary,input,textarea,select){transition:color var(--tw-motion) var(--tw-ease),background-color var(--tw-motion) var(--tw-ease),border-color var(--tw-motion) var(--tw-ease),box-shadow var(--tw-motion) var(--tw-ease),opacity var(--tw-motion) var(--tw-ease),translate var(--tw-motion) var(--tw-ease)}
:where(.product-tile,.service,.testimonial,.contact-channel,.template-option){transition:translate var(--tw-motion) var(--tw-ease),box-shadow var(--tw-motion) var(--tw-ease),border-color var(--tw-motion) var(--tw-ease)}
@media(hover:hover) and (pointer:fine){
 :where(button:not(:disabled),.button,.studio-button,.dc-action,#social-links a):hover{translate:0 -1px}
 :where(.product-tile,.service:has(a),.contact-channel,.template-option):hover{translate:0 -3px}
}
:where(button:not(:disabled),.button,.studio-button,.dc-action,#social-links a):active{translate:0 1px;transition-duration:90ms}
/* Discrete transitions keep native dialog dismissal, focus and keyboard handling. */
@supports (transition-behavior:allow-discrete){
 dialog{opacity:0;translate:0 6px;transition:opacity var(--tw-motion) var(--tw-ease),translate var(--tw-motion) var(--tw-ease),display var(--tw-motion) allow-discrete,overlay var(--tw-motion) allow-discrete}
 dialog[open]{opacity:1;translate:0 0}
 dialog::backdrop{opacity:0;transition:opacity var(--tw-motion),display var(--tw-motion) allow-discrete,overlay var(--tw-motion) allow-discrete}
 dialog[open]::backdrop{opacity:1}
 @starting-style{dialog[open]{opacity:0;translate:0 6px}dialog[open]::backdrop{opacity:0}}
 details::details-content{opacity:0;transition:opacity var(--tw-motion),content-visibility var(--tw-motion) allow-discrete}
 details[open]::details-content{opacity:1}
 @starting-style{details[open]::details-content{opacity:0}}
}
@media(max-width:760px){
 #nav{transition:opacity var(--tw-motion),display var(--tw-motion) allow-discrete;opacity:0}
 #nav.open{opacity:1}
 @starting-style{#nav.open{opacity:0}}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}