/* Northwest — motion system (03.09.2026). Transform/opacity only; no layout properties animated. */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--t-fast:140ms;--t-base:240ms;--t-slow:520ms}

/* ---- feedback: buttons, nav, links ---- */
.btn,nav .call,button,.aside .btn{transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),background-color var(--t-base),border-color var(--t-base),color var(--t-base);will-change:transform}
.btn:hover,nav .call:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,35,26,.22)}
.btn:active,nav .call:active,button:active{transform:translateY(0) scale(.97);box-shadow:0 3px 8px rgba(16,35,26,.18);transition-duration:var(--t-fast)}
.btn-solid:hover{box-shadow:0 10px 26px rgba(125,98,56,.38)}
.btn:focus-visible,nav .call:focus-visible,a:focus-visible{outline:2px solid #B08D5B;outline-offset:3px}
nav a.lnk{position:relative;transition:color var(--t-base)}
nav a.lnk::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--bronze-lt);transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--ease-out)}
nav a.lnk:hover::after{transform:scaleX(1)}
nav{transition:box-shadow var(--t-slow) var(--ease-out),background-color var(--t-slow)}
nav.scrolled{box-shadow:0 8px 30px rgba(16,35,26,.35);background:rgba(22,36,27,.97)}
.prose a,.faq a,.c-info a,footer a{transition:color var(--t-base)}
.rel-grid a,.city-list a.city{transition:transform var(--t-base) var(--ease-out),border-color var(--t-base),box-shadow var(--t-base),color var(--t-base),background-color var(--t-base)}
.rel-grid a:hover,.city-list a.city:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(30,47,36,.12)}
.rel-grid a:active,.city-list a.city:active{transform:translateY(0) scale(.98)}

/* ---- cards ---- */
.svc,.pf,.incl .it,.incl .inc,.val,.step{transition:transform var(--t-slow) var(--ease-out),box-shadow var(--t-slow) var(--ease-out),border-color var(--t-base)}
.svc:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(30,47,36,.16)}
.svc .svc-ph{transition:transform 900ms var(--ease-out)}
.svc:hover .svc-ph{transform:scale(1.05)}
.svc .more{display:inline-block;transition:transform var(--t-base) var(--ease-out)}
.svc:hover .more{transform:translateX(5px)}
.pf:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(30,47,36,.16)}
.pf-ph{transition:transform 900ms var(--ease-out)}
.pf:hover .pf-ph{transform:scale(1.05)}
.incl .it:hover,.incl .inc:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(30,47,36,.10)}
.svc:active,.pf:active{transform:translateY(-2px) scale(.99)}

/* ---- hero: focal entrance + slow drift ---- */
header#top,header.sub{isolation:isolate;overflow:hidden}
header#top::before,header.sub::before{content:"";position:absolute;inset:-4%;background:inherit;z-index:-1;animation:heroDrift 18s var(--ease-out) both;will-change:transform}
@keyframes heroDrift{from{transform:scale(1.08)}to{transform:scale(1)}}
header .logo-lockup,header h1,header p.sub,header .cta,header .crumbs,header p[style*="letter-spacing"]{animation:rise var(--t-slow) var(--ease-out) both}
header .logo-lockup{animation-duration:420ms}
header .crumbs{animation-delay:60ms}
header h1{animation-delay:120ms}
header p.sub{animation-delay:220ms}
header p[style*="letter-spacing"]{animation-delay:300ms}
header .cta{animation-delay:360ms}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---- scroll reveal (only when JS is present; content stays visible without it) ---- */
html.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
html.js [data-reveal].in{opacity:1;transform:none}
html.js [data-reveal-stagger]>*{opacity:0;transform:translateY(14px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
html.js [data-reveal-stagger].in>*{opacity:1;transform:none}
html.js [data-reveal-stagger].in>:nth-child(2){transition-delay:70ms}
html.js [data-reveal-stagger].in>:nth-child(3){transition-delay:140ms}
html.js [data-reveal-stagger].in>:nth-child(4){transition-delay:210ms}
html.js [data-reveal-stagger].in>:nth-child(5){transition-delay:280ms}
html.js [data-reveal-stagger].in>:nth-child(6){transition-delay:350ms}
html.js [data-reveal-stagger].in>:nth-child(n+7){transition-delay:400ms}

/* ---- FAQ open/close ---- */
.faq summary::after{transition:transform var(--t-base) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq details>div{animation:rise 320ms var(--ease-out) both}

/* ---- before/after handle + gallery ---- */
[data-ba]{transition:box-shadow var(--t-slow) var(--ease-out)}
[data-ba]:hover{box-shadow:0 18px 44px rgba(30,47,36,.18)}
.tick .dot{transition:transform var(--t-base) var(--ease-out)}
.tick:hover .dot{transform:scale(1.15)}

/* ---- primary CTA: one quiet pulse, then rest ---- */
.btn-solid.pulse{position:relative}
.btn-solid.pulse::after{content:"";position:absolute;inset:-3px;border-radius:6px;border:2px solid rgba(176,141,91,.7);animation:ctaPulse 2.4s var(--ease-out) 1.2s 2;pointer-events:none;opacity:0}
@keyframes ctaPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.14)}}

/* ---- reduce motion: keep feedback, drop movement ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:120ms!important}
  header#top::before,header.sub::before{animation:none}
  html.js [data-reveal],html.js [data-reveal-stagger]>*{opacity:1;transform:none}
  .btn:hover,nav .call:hover,.svc:hover,.pf:hover,.rel-grid a:hover,.city-list a.city:hover{transform:none}
}