/* Whistler Management — considered motion, shared by every page. */
:root{--motion-ease:cubic-bezier(.2,.75,.25,1);--motion-quick:220ms;--motion-medium:400ms}
.footer{background:var(--white);color:var(--charcoal)}
/* True alpha logo preserves the artwork on the white footer. */
.footer-brand img{filter:none;mix-blend-mode:normal}

/* No JavaScript means no hidden content. Only off-screen observed elements get this. */
.motion-pending{opacity:0}
.motion-pending:focus-within{opacity:1}
.section-kicker[data-motion],.footer-bottom[data-motion]{position:relative;border-color:transparent}
.section-kicker[data-motion]::after,.footer-bottom[data-motion]::before{content:'';position:absolute;left:0;right:0;height:1px;background:var(--line);transform-origin:left;transform:scaleX(1);transition:transform 900ms var(--motion-ease);pointer-events:none}
.section-kicker[data-motion]::after{bottom:0}.footer-bottom[data-motion]::before{top:0}
.section-kicker.motion-pending::after,.footer-bottom.motion-pending::before{transform:scaleX(0)}

/* Links draw a precise underline; buttons lift and settle without moving the layout. */
.desktop-nav a,.footer-links a,.text-link,.underlink{position:relative}
.desktop-nav a::after,.footer-links a::after,.text-link::after,.underlink::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--motion-medium) var(--motion-ease);pointer-events:none}
.underlink::after{bottom:-1px;height:2px}
.desktop-nav a[aria-current=page]::after{transform:scaleX(1)}
.desktop-nav a[aria-current=page]{text-decoration:none}
.desktop-nav a:is(:hover,:focus-visible)::after,.footer-links a:is(:hover,:focus-visible)::after,.text-link:is(:hover,:focus-visible)::after,.underlink:is(:hover,:focus-visible)::after{transform:scaleX(1);transform-origin:left}
.nav-cta,.button-dark,.button-light,.sun-cta{transition:background var(--motion-quick),color var(--motion-quick),transform var(--motion-medium) var(--motion-ease),box-shadow var(--motion-medium) var(--motion-ease)}
.nav-cta:active,.button-dark:active,.button-light:active,.sun-cta:active{transform:translateY(0) scale(.985);box-shadow:none}
.contact-hero .button-dark span{transition:transform var(--motion-medium) var(--motion-ease)}
.contact-hero .button-dark:is(:hover,:focus-visible) span{transform:translateY(4px)}
.menu-button span{transition:transform 300ms var(--motion-ease)}
.menu-button[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-button[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.mobile-nav.open{animation:wm-menu-in 300ms var(--motion-ease) both}
@keyframes wm-menu-in{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
.platform-motion-toggle{display:block;margin-top:10px;padding:2px 0;background:none;border:0;color:var(--alpine-blue);font:inherit;letter-spacing:.07em;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.platform-motion-toggle[hidden]{display:none}

/* Each card family has its own tactile detail. Images stay within their original box. */
.image-card{overflow:hidden;transition:box-shadow 450ms var(--motion-ease),transform 450ms var(--motion-ease)}
.image-card>img{clip-path:inset(0);transition:clip-path 600ms var(--motion-ease)}
.image-card h3,.insight-card h2{transition:color var(--motion-quick)}
.insight-card{transition:box-shadow 450ms var(--motion-ease),transform 450ms var(--motion-ease)}
.insight-image img{transition:transform 850ms var(--motion-ease)}
.benefit-grid article,.values-grid article,.detail-list article{position:relative}
.benefit-grid article::after,.values-grid article::after{content:'';position:absolute;top:0;left:0;width:40px;height:2px;background:var(--alpine-blue);transform:scaleX(0);transform-origin:left;transition:transform 450ms var(--motion-ease)}
.detail-list article>span{transition:translate var(--motion-medium) var(--motion-ease),color var(--motion-quick)}
.story-highlight strong{transform-origin:left center}
.story-highlight{transition:background 400ms,box-shadow 400ms;transform:none}
.story-highlight:hover{transform:none}
.estimate-panel,.lead-form{transition:box-shadow 450ms var(--motion-ease)}
.estimate-panel:focus-within,.lead-form:focus-within{box-shadow:0 22px 55px rgba(41,46,48,.10),0 0 0 1px var(--alpine-blue)}
.estimate-field :is(input,select,textarea){transition:background var(--motion-quick),border-color var(--motion-quick),box-shadow var(--motion-quick)}
.estimate-field:focus-within label{color:var(--alpine-blue)}
.estimate-field :is(input,select,textarea):focus{background:var(--white)}
.faq-list details,.faq-list details:hover,.faq-list details[open]{transform:none}
.faq-list summary b{transition:transform 300ms var(--motion-ease),background 250ms,color 250ms}
.faq-list summary:focus-visible b{background:var(--alpine-blue);color:var(--white)}
.tool-card{transition:background 200ms,border-color 200ms,box-shadow 250ms,translate 250ms var(--motion-ease)}
#tool-detail[open]{animation:wm-dialog-in 280ms var(--motion-ease)}
#tool-detail[open]::backdrop{animation:wm-backdrop-in 250ms ease}
@keyframes wm-dialog-in{from{opacity:0;translate:0 12px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@keyframes wm-backdrop-in{from{opacity:0}to{opacity:1}}
.sun-explorer :is(button,.sun-cta){transition:background 200ms,color 200ms,box-shadow 200ms}
.sun-search-field{transition:box-shadow 250ms}
.sun-search-field:focus-within{box-shadow:0 0 0 3px var(--alpine-blue)}

@media(hover:hover) and (pointer:fine){
  .nav-cta:hover:not(:active),.button-dark:hover:not(:active),.button-light:hover:not(:active),.sun-cta:hover:not(:active){transform:translateY(-3px);box-shadow:0 8px 20px rgba(41,46,48,.13)}
  .image-card:hover{transform:translateY(-5px);box-shadow:0 18px 35px rgba(41,46,48,.1)}
  .image-card:hover>img{clip-path:inset(7px 7px 0)}
  .image-card:hover h3,.insight-card:hover h2{color:var(--alpine-blue)}
  .insight-card:hover,.insight-card:focus-within{transform:translateY(-4px);box-shadow:0 18px 35px rgba(41,46,48,.08)}
  .insight-card:hover .insight-image img,.insight-card:focus-within .insight-image img{transform:scale(1.045)}
  .benefit-grid article:hover::after,.values-grid article:hover::after{transform:scaleX(1)}
  .detail-list article:hover>span{translate:4px 0}
  .tool-card:hover{translate:2px 0;box-shadow:inset 2px 0 var(--alpine-blue)}
}

/* Never animate reading or interaction when the visitor requests less motion. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .motion-pending{opacity:1!important}
  .section-kicker[data-motion]::after,.footer-bottom[data-motion]::before{transform:scaleX(1)}
  .nav-cta:hover,.button-dark:hover,.button-light:hover,.sun-cta:hover,.image-card:hover,.insight-card:hover,.insight-card:focus-within,.benefit-grid article:hover,.values .values-grid article:hover,.detail-list article:hover,.insights-controls button:hover,.footer-links a:hover{transform:none!important;translate:none!important}
  .image-card:hover>img{clip-path:none}
  .detail-list article:hover>span,.tool-card:hover{translate:none}
  .insight-card:hover .insight-image img,.insight-card:focus-within .insight-image img,.contact-hero .button-dark:is(:hover,:focus-visible) span{transform:none}
}
@media print{.motion-pending{opacity:1!important}*{animation:none!important;transition:none!important}}