header{position:fixed;top:0;left:0;right:0;z-index:60;border-bottom-color:transparent;transition:height .6s cubic-bezier(.65,0,.35,1),background-color .3s,border-color .3s}
header.nav-docked{height:72px;background:var(--paper);border-bottom-color:var(--bone)}
main>.services,main>.work{padding-top:100px}
@media(min-width:1001px){
  header{background:transparent}
  header #navigation{position:absolute;right:6%;top:27px;display:flex;flex-direction:column;align-items:flex-end;gap:13px;height:auto}
  header #navigation> *{flex-shrink:0;transform-origin:center;will-change:transform}
  header #navigation .nav-cta{margin-top:3px;gap:28px;padding:9px 18px}
  header .nav-services .dropdown{top:-12px;left:auto;right:calc(100% + 20px)}
  header.nav-docked #navigation{top:0;height:72px;flex-direction:row;align-items:center;gap:32px}
  header.nav-docked #navigation .nav-cta{margin-top:0}
  header.nav-docked .nav-services .dropdown{top:40px;left:-20px;right:auto}
}
@media(min-width:1600px){header #navigation{right:calc((100% - 1267px)/2)}}
@media(min-width:681px) and (max-width:1000px){header #navigation{position:static;flex-direction:row}}
@media(max-width:680px){header{background:var(--paper)}header.nav-docked{height:64px}header.nav-docked #navigation{top:64px}header #navigation{transition:top .3s}.nav-services .dropdown{position:static}}
@media(prefers-reduced-motion:reduce){header,header #navigation{transition:none}header #navigation>*{will-change:auto}}