/* One persistent logo, moved with a composited transform rather than resized every frame. */
.site-nav{--nav-pad:clamp(20px,5vw,72px);--ink:#161616;--slate:#505050;--steel:#6a6a6a;--line:#dfdfdf;--curve:cubic-bezier(.2,.7,.2,1);color:var(--ink);position:fixed;right:var(--nav-pad);top:28px;width:56px;height:57px;z-index:40;opacity:0}
.site-nav[hidden],.site-links[hidden]{display:none}
.site-nav.ready{opacity:1}
.site-logo{display:block;width:var(--logo-size,56px);padding:0;border:0;background:none;appearance:none;overflow:visible;line-height:0;transform-origin:0 0;
  transform:translate3d(var(--logo-x,0px),var(--logo-y,0px),0) scale(var(--logo-scale,1));will-change:transform}
.site-nav.ready .site-logo{transition:transform 1800ms cubic-bezier(.45,0,.15,1)}
.site-nav.measuring .site-logo{transition:none}
.site-logo[aria-disabled="true"]{pointer-events:none}
.site-nav.compact .site-logo{cursor:pointer}
.site-logo .mark{position:relative;display:block;width:100%;line-height:0;color:var(--ink);transform:translate(var(--pull-x,0),var(--pull-y,0))}
.site-logo .mark img{display:block;width:100%;height:auto;pointer-events:none}
.site-logo .mark svg{display:none}
.logo-reflection{position:absolute;left:0;top:100%;width:100%;height:auto;transform:scaleY(-1);opacity:.17;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 46%,#000);mask-image:linear-gradient(to bottom,transparent 46%,#000);transition:opacity .6s ease}
.site-nav.compact .logo-reflection{opacity:0}
/* The live mark (mark-3d.js) is drawn on a canvas twice the mark's width, so it has room to turn and to show the floor
   under it. The still is its first frame: the canvas comes up over it, and only then is the still put away. */
.mark-3d{position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;max-width:none;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .25s linear}
.mark.live .mark-3d{opacity:1}
.mark.live img{visibility:hidden;transition:visibility 0s .3s}
.site-nav.spin .logo-reflection{opacity:0;transition:opacity .25s linear}
.site-nav.spin .site-logo{pointer-events:auto;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.site-nav.spin.compact .site-logo{cursor:pointer}
.site-nav.spin.grabbing .site-logo{cursor:grabbing}
/* Once it has turned to felt it is a picture: nothing to grab, and a swipe that starts on it moves the page on */
.site-nav.spin.still .site-logo{pointer-events:none;cursor:default}
/* The menu is a box that grows out from around the mark: the mark sits in its top right corner, the links below it.
   --menu-h is the height of what is inside, set by hero-navigation.js whenever that changes. */
.site-nav{--menu-pad:14px;--menu-w:286px}
.site-logo{position:relative;z-index:1}
.site-links{position:absolute;top:calc(-1 * var(--menu-pad));right:calc(-1 * var(--menu-pad));width:min(var(--menu-w),100vw - 12px);height:var(--menu-h,auto);max-height:calc(100vh - 16px);max-height:calc(100svh - 16px);
  overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 18px 48px -18px #0004;
  animation:site-menu-in .36s var(--curve) both;transition:height .26s var(--curve)}
.site-links.closing{animation:site-menu-out .14s linear both}
.site-links-in{position:absolute;top:0;right:0;width:min(var(--menu-w),100vw - 12px);max-height:calc(100vh - 16px);max-height:calc(100svh - 16px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  padding:calc(var(--menu-pad) + var(--logo-box,57px) + 18px) 12px 14px;animation:site-menu-words .3s .1s var(--curve) both}
.site-links-in::-webkit-scrollbar{display:none}
.site-links-in>a,.site-group>a,.site-sub>a{display:block;min-height:44px;padding:9px 12px;border-radius:9px;font-size:16.5px;font-weight:500;line-height:1.4;transition:background .16s linear}
.site-links-in>a:hover,.site-group:hover,.site-sub>a:hover,.site-links a:focus-visible,.site-links-in>a[aria-current="page"],.site-group:has(>a[aria-current="page"]),.site-sub>a[aria-current="page"]{background:#f6f6f6}
/* Services is a folder: its name goes to the services page, the arrow beside it opens the three inside */
.site-group{display:flex;align-items:stretch;border-radius:9px;transition:background .16s linear}
.site-group>a{flex:1;background:none!important}
.site-more{display:grid;place-items:center;flex:none;width:44px;padding:0;border:0;border-radius:9px;background:none;color:var(--steel);cursor:pointer}
.site-more:hover{color:var(--ink)}
.site-more svg{width:19px;height:19px;transition:transform .24s var(--curve)}
.site-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.site-sub{margin:0 0 4px 12px;padding-left:10px;border-left:1px solid var(--line)}
.site-sub>a{padding:7px 12px;font-size:15.5px;font-weight:450;color:var(--slate)}
.site-sub>a:hover,.site-sub>a[aria-current="page"]{color:var(--ink)}
.site-links-foot{margin-top:12px;padding:16px 4px 2px;border-top:1px solid var(--line);text-align:center}
.site-login{display:flex;align-items:center;justify-content:center;height:46px;border-radius:999px;background:var(--ink);color:#fff;font-size:15.5px;font-weight:560;transition:background .24s var(--curve)}
.site-login:hover{background:#2e2e2e}
.site-links-foot p{margin:10px 0 0;font-size:13.5px;color:var(--steel)}
.site-links-foot p a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.site-legal{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;padding:2px 12px;font-size:12.5px;color:var(--steel)}
.site-legal:hover{color:var(--ink)}
@keyframes site-menu-in{from{width:calc(100% + 2 * var(--menu-pad));height:calc(100% + 2 * var(--menu-pad));box-shadow:0 0 0 0 #0000}}
@keyframes site-menu-out{to{opacity:0}}
@keyframes site-menu-words{from{opacity:0;transform:translateY(-6px)}}

/* The same compact emblem on interior pages, above light or dark scene backgrounds. */
.site-nav.compact::before{content:"";position:absolute;inset:-16px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,#ffffffe0 35%,#ffffff00 72%)}
.site-nav~.lb{z-index:60}
.has-site-navigation .phero.plain{padding-top:max(104px,8vw)}
@media (max-width:900px){
  .site-nav{top:20px;width:44px;height:44px;--menu-pad:12px;--logo-box:44px}
}
@media (max-height:560px) and (min-aspect-ratio:11/10){
  .site-nav{top:16px;width:44px;height:44px;--logo-box:44px}
}
@media (prefers-reduced-motion:reduce){
  .site-nav.ready .site-logo,.logo-reflection{transition:none}
  .site-links,.site-links-in,.site-links.closing{animation:none;transition:none}
}