/* Motion is decorative. No content depends on these effects being enabled. */
.motion-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.motion-count{display:inline-block;font-variant-numeric:tabular-nums}
.hero-slides .hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.hero-slides .hero-slide.is-active{opacity:1}
.hero-slideshow>.relative{padding-bottom:112px}
.hero-slider-controls{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:11;display:flex;align-items:center;gap:2px;padding:4px 10px;background:rgb(255 255 255/.92);border:1px solid var(--card-border);border-radius:999px;box-shadow:0 4px 20px #182a380b}
.hero-slider-controls[hidden]{display:none}
.hero-slide-dot{width:44px;height:44px;display:grid;place-items:center;background:transparent;color:var(--action)}
.hero-slide-dot::after{content:"";width:7px;height:7px;border-radius:999px;background:var(--accent);transition:width .25s ease,background-color .25s ease}
.hero-slide-dot[aria-pressed="true"]::after{width:24px;background:var(--action)}
.hero-slide-dot:disabled{opacity:.25;cursor:default}
.hero-slide-toggle{min-height:44px;padding:0 12px;background:transparent;border-left:1px solid var(--card-border);font-size:12px;white-space:nowrap;color:var(--action)}
.hero-slider-controls button:focus-visible{outline-offset:0;border-radius:999px}
.motion-hero>div:first-child img{transform-origin:65% 50%}
.motion-enabled .motion-hero::after{content:"";pointer-events:none;position:absolute;inset:0;z-index:1;background:linear-gradient(110deg,transparent 30%,rgb(255 255 255/.3) 49%,transparent 67%);transform:translateX(-110%);animation:clean-light 1600ms 150ms ease-out both}
@keyframes clean-light{to{transform:translateX(110%)}}
main a,header a,main button{transition:background-color .25s ease,color .25s ease,box-shadow .3s ease,transform .3s ease,border-color .3s ease}
main a svg,header a svg{transition:transform .3s ease}
main a:active,header a:active,main button:active{transform:translateY(1px)}
@media(hover:hover) and (pointer:fine){
  main .grid>a.group:hover,main .grid>.service-card:hover,main .grid>.bg-surface-container-lowest:hover,.work-client:hover,.work-case:hover{transform:translateY(-4px);box-shadow:0 12px 28px -16px #182a3838;border-color:var(--accent)}
  .work-client,.work-case,.grid>.service-card,.grid>.bg-surface-container-lowest{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
  main a[data-path="p5-estimate"]:hover,header a[data-path="p5-estimate"]:hover{transform:translateY(-2px);box-shadow:0 8px 20px -10px #182a3866}
  main a[data-path="p5-estimate"]:hover svg,main a[href^="tel:"]:hover svg{transform:translateX(3px)}
  .work-case-image img{transition:transform .65s ease}
  .work-case:hover img{transform:scale(1.035)}
}
.process-steps li::after{content:"";position:absolute;left:0;right:0;top:-17px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .7s ease}
.process-steps li.process-complete::after{transform:scaleX(1)}
.process-number{transition:color .5s ease}
.process-complete .process-number{color:var(--action)}
@media(max-width:767px){
  .process-steps li::after{left:0;right:auto;top:24px;bottom:0;width:2px;height:auto;transform:scaleY(0);transform-origin:top}
  .process-steps li.process-complete::after{transform:scaleY(1)}
  .process-steps li{padding-left:12px!important}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .motion-hero::after{display:none!important}
  .process-steps li::after{transform:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
}