/* Polk motion + modern touches, shared by every page (2026-11-02). Copy and layout untouched.
   Everything here is progressive: no JS, old browsers or reduced motion = the static site. */

/* --- type polish --- */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
p,li,dd{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
::selection{background:#FBE3AE;color:#172C33}
:focus-visible{outline-color:#172C33;outline-offset:3px}

/* --- page-to-page cross-fade (Chrome, Safari 18+); the header stays put --- */
@view-transition{navigation:auto}
.site-head{view-transition-name:site-head}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}

/* --- header: sticks, turns to frosted glass once you scroll --- */
.site-head{position:sticky;top:0;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
.site-head.is-scrolled{background:rgba(255,255,255,.8);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom-color:rgba(23,44,51,.08);box-shadow:0 1px 0 rgba(23,44,51,.04),0 10px 30px -22px rgba(23,44,51,.35)}
/* reading progress: a marigold hairline along the header, driven by scroll (CSS scroll timelines where supported) */
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#FDBD55;transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
@supports (animation-timeline:scroll()){
  .site-head::after{animation:polk-progress linear both;animation-timeline:scroll(root)}
}
@keyframes polk-progress{to{transform:scaleX(1)}}

/* --- nav: underline draws in from the left --- */
.nav-links a{position:relative}
.nav-links a:hover{text-decoration:none}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}

/* --- buttons + cards: a little lift under the cursor --- */
.btn{transition:background-color .15s ease,transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(23,44,51,.55)}
.btn:active{transform:translateY(0);box-shadow:none;transition-duration:.08s}
.do,.stage,.case,.promise,.member{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease}
@media (hover:hover){
  .do:hover,.stage:hover,.case:hover,.promise:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(23,44,51,.5)}
  .member:hover{transform:translateY(-3px)}
}

/* --- FAQ: answers glide open (Chrome 131+, others snap as before) --- */
:root{interpolate-size:allow-keywords}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .35s cubic-bezier(.2,.7,.2,1),content-visibility .35s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq summary::after{transition:transform .3s ease}
.faq details[open] summary::after{transform:rotate(180deg)}

/* --- logo: stem drops, dot rolls in, "Polk." writes itself (first page of a visit only) --- */
.wm-t{display:inline-block}
.wm-anim .wordmark .mark rect,.wm-anim .wordmark .mark circle{transform-box:fill-box;transform-origin:50% 50%}
.wm-anim .wordmark .mark rect{animation:wm-stem .7s cubic-bezier(.2,.8,.2,1) .15s both}
.wm-anim .wordmark .mark circle{animation:wm-dot .9s cubic-bezier(.3,1.5,.5,1) .5s both}
.wm-anim .wordmark .mark{animation:wm-click .35s ease-out 1.25s both}
.wm-anim .wordmark .wm-t{animation:wm-word .8s cubic-bezier(.2,.7,.2,1) 1.2s both}
@keyframes wm-stem{from{transform:translateY(-70%) scaleY(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes wm-dot{0%{transform:translate(160%,-40%) scale(.2);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes wm-click{50%{transform:scale(.9)}100%{transform:none}}
@keyframes wm-word{from{clip-path:inset(0 100% 0 0);transform:translateX(-10px);opacity:0}to{clip-path:inset(0 0 0 0);transform:none;opacity:1}}
/* the dot nods when you hover the logo */
.wordmark .mark circle{transform-box:fill-box;transform-origin:50% 50%;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.wordmark:hover .mark circle{transform:translateY(-3px) scale(1.12)}

/* --- photo hero: slower, wider camera move, a warm light drifting across, copy + lanes arrive --- */
html[data-hero="4"] .hz-img{animation:hz-drift2 22s ease-in-out infinite alternate}
@keyframes hz-drift2{0%{transform:scale(1.04) translate(0,0)}50%{transform:scale(1.08) translate(-1.8%,0)}100%{transform:scale(1.11) translate(1.4%,0)}} /* anchored at the top edge so Mt Hood stays in frame */
.hz-glow{position:absolute;inset:-20%;pointer-events:none;background:radial-gradient(38% 30% at 50% 50%,rgba(251,227,174,.32),rgba(251,227,174,0) 70%);mix-blend-mode:screen;animation:hz-glow 16s ease-in-out infinite alternate}
@keyframes hz-glow{from{transform:translate(-18%,-6%)}to{transform:translate(20%,8%)}}
.js .hero .display{animation:rise-in 1s cubic-bezier(.2,.7,.2,1) .25s both}
.js .hero .hero-sub{animation:rise-in 1s cubic-bezier(.2,.7,.2,1) .55s both}
.js .hz-lanes li{animation:lane-in .9s cubic-bezier(.2,.7,.2,1) both}
.js .hz-lanes li:nth-child(1){animation-delay:.9s}.js .hz-lanes li:nth-child(2){animation-delay:1s}.js .hz-lanes li:nth-child(3){animation-delay:1.1s}.js .hz-lanes li:nth-child(4){animation-delay:1.2s}.js .hz-lanes li:nth-child(5){animation-delay:1.3s}.js .hz-lanes li:nth-child(6){animation-delay:1.4s}
@keyframes rise-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes lane-in{from{opacity:0;transform:translateY(14px);border-top-color:rgba(255,255,255,0)}to{opacity:1;transform:none}}

/* --- unfurl: content rises into place as it scrolls into view --- */
.js .unf{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .unf.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .wm-anim .wordmark .mark,.wm-anim .wordmark .mark *,.wm-anim .wordmark .wm-t,.js .hero .display,.js .hero .hero-sub,.js .hz-lanes li,.hz-glow,html[data-hero="4"] .hz-img,.site-head::after{animation:none!important}
  .js .unf{opacity:1;transform:none;transition:none}
  .btn:hover,.do:hover,.stage:hover,.case:hover,.promise:hover,.member:hover{transform:none}
  @view-transition{navigation:none}
}

/* page settle: header first, then the page fades in and its animations begin (see polk-motion.js) */
html.pl-hold main,html.pl-hold .foot{opacity:0;animation:pl-safe 0s 2.5s forwards}
html.pl-hold main *,html.pl-hold .foot *{animation-play-state:paused!important}
html.pl-in main,html.pl-in .foot{transition:opacity .9s ease-out}
.js .unf.unf-first{transform:translateY(20px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform 1.2s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .unf.unf-first.in{transform:none}
@keyframes pl-safe{to{opacity:1}}
html.unf-prep .unf{transition:none!important}