:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-fast:220ms;--motion-detail:600ms}
@media(prefers-reduced-motion:no-preference){
  .button,button[type=submit],.service-related a{transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast)}
  .button .icon,.card-link .icon,.service-text-link .icon,.service-related .icon{transition:transform 300ms var(--motion-ease)}
  .planning-note,#materials article,.service-scope-grid article{transition:border-color 300ms,box-shadow 300ms}
  .planning-note-icon,.material-icon,.service-icon{transition:background 300ms,border-color 300ms}
  .gallery-grid figcaption{transition:transform var(--motion-detail) var(--motion-ease)}
  #services article>img,.gallery-grid img{transition:transform 800ms var(--motion-ease)}
  h2.motion-arrived em:after{transform-origin:left;animation:roof-underline 750ms var(--motion-ease) both}
  .service-process li.motion-arrived:before{animation:roof-step 650ms var(--motion-ease) both}
  .button:focus-visible .icon,.service-text-link:focus-visible .icon,.service-related a:focus-visible .icon{transform:translate(3px,-3px)}
  @media(hover:hover) and (pointer:fine){
    .button:hover .icon,.card-link:hover .icon,.service-text-link:hover .icon,.service-related a:hover .icon{transform:translate(3px,-3px)}
    .planning-note:hover,#materials article:hover,.service-scope-grid article:hover{border-color:var(--orange);box-shadow:0 12px 28px #2125290c}
    .planning-note:hover .planning-note-icon,#materials article:hover .material-icon,.service-scope-grid article:hover .service-icon{background:#f35b001c;border-color:var(--orange)}
    .gallery-grid figure:hover figcaption{transform:translateY(-5px)}
    #services article:focus-within>img,.gallery-grid figure:focus-within img{transform:scale(1.035)}
  }
}
@keyframes roof-underline{from{transform:rotate(-3deg) scaleX(0)}to{transform:rotate(-3deg) scaleX(1)}}
@keyframes roof-step{from{transform:scale(.4)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .motion-arrived,.motion-arrived:before,.motion-arrived em:after{animation:none!important}
  #services article:hover>img,.gallery-grid figure:hover img{transform:none}
}