/* The main menu, on every page (Kate, 2026-10-14: Our Technology, Strategic Advisory, Solutions, Insights, Contact).
   On wide screens the five links sit in the header row. Below 1120px they fold behind a round button at the far right of the row,
   which opens them full screen: js/menu.js builds that panel from the same links, at the end of the page, so nothing in the
   header can clip it or sit above it. */
.nav{display:flex;align-items:center;gap:clamp(12px,1.7vw,28px)}
.nav a{color:#fff;text-decoration:none;font-family:'Martian Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:14px 4px;border-bottom:1px solid transparent;min-width:44px;text-align:center;white-space:nowrap;transition:border-color .3s}
.nav a:hover{color:#fff;border-bottom-color:#d4af37}
.nav a.here{border-bottom-color:#007bff}
@media (max-width:1300px){.nav a{letter-spacing:.09em}}

.mbtn{display:none;position:relative;flex:0 0 48px;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.42);background:rgba(6,9,12,.45);color:#fff;cursor:pointer;transition:border-color .3s,background .3s}
.mbtn:hover{border-color:#fff;background:rgba(6,9,12,.7)}
.mbtn i{position:absolute;left:14px;width:18px;height:1.6px;border-radius:2px;background:currentColor;transition:transform .35s cubic-bezier(.2,.7,.2,1),width .35s}
.mbtn i:nth-child(1){top:18px}
.mbtn i:nth-child(2){top:27px;width:12px}
.mbtn:hover i:nth-child(2){width:18px}
.mbtn::after{content:"";position:absolute;right:9px;top:9px;width:5px;height:5px;border-radius:50%;background:#d4af37;box-shadow:0 0 8px rgba(212,175,55,.8)}
@media (max-width:1119px){
  .nav{display:none !important}
  .mbtn{display:block}
}

/* the panel: the night sky, the mark turning slowly in its corner, and the five links large */
.mpanel{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;padding:0 clamp(20px,3.6vw,64px) 40px;background:#04070b;color:#fff;font-family:'Instrument Sans',system-ui,sans-serif;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.mpanel *{box-sizing:border-box}
.mpanel.open{opacity:1;visibility:visible;transition:opacity .35s}
.mpanel::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(1px 1px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 90px 140px,#cfe4ff,transparent),radial-gradient(1.5px 1.5px at 160px 60px,#fff,transparent),radial-gradient(1px 1px at 230px 190px,#fff,transparent),radial-gradient(1px 1px at 280px 90px,#9cc7ff,transparent),radial-gradient(1.5px 1.5px at 120px 250px,#fff,transparent);background-size:300px 300px;opacity:.5}
.mp-mark{position:fixed;right:-26vmin;bottom:-26vmin;width:86vmin;height:86vmin;pointer-events:none;opacity:.5;animation:mpturn 160s linear infinite}
.mp-mark circle{fill:none;stroke:rgba(102,178,255,.4);stroke-width:.8;vector-effect:non-scaling-stroke}
.mp-mark .mp-gold{fill:#d4af37;stroke:none}
@keyframes mpturn{to{transform:rotate(360deg)}}
.mp-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:30px 0}
.mp-top .brand{display:flex;align-items:center;gap:16px;min-height:44px;color:#fff;text-decoration:none}
.mp-top .brand img{width:44px;height:44px}
.mp-top .brand span{font-family:'Martian Mono',monospace;font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.mp-x{position:relative;flex:0 0 48px;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;cursor:pointer;transition:border-color .3s,background .3s,color .3s}
.mp-x:hover{background:#fff;color:#06090c}
.mp-x i{position:absolute;left:14px;top:23px;width:18px;height:1.6px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
.mp-x i+i{transform:rotate(-45deg)}
.mp-links{position:relative;display:flex;flex-direction:column;margin:clamp(12px,4vh,48px) 0 0;border-bottom:1px solid rgba(255,255,255,.14)}
.mp-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:12px 0;border-top:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none;font-family:'Antonio',sans-serif;font-weight:600;font-size:clamp(34px,9vw,64px);line-height:1.05;text-transform:uppercase;opacity:0;transform:translateY(18px);transition:color .3s,padding .3s}
.mp-links a::after{content:"";flex:0 0 auto;width:12px;height:12px;border-top:1.6px solid #66b2ff;border-right:1.6px solid #66b2ff;transform:rotate(45deg);opacity:.5;transition:opacity .3s,transform .3s}
.mp-links a:hover{color:#66b2ff;padding-left:10px}
.mp-links a:hover::after{opacity:1;transform:translateX(4px) rotate(45deg)}
.mp-links a.here{color:#007bff}
.mpanel.open .mp-links a{animation:mpin .6s cubic-bezier(.2,.7,.2,1) forwards}
.mpanel.open .mp-links a:nth-child(2){animation-delay:.05s}
.mpanel.open .mp-links a:nth-child(3){animation-delay:.1s}
.mpanel.open .mp-links a:nth-child(4){animation-delay:.15s}
.mpanel.open .mp-links a:nth-child(5){animation-delay:.2s}
@keyframes mpin{to{opacity:1;transform:none}}
.mp-mail{position:relative;margin:32px 0 0;font-family:'Martian Mono',monospace;font-size:13px;letter-spacing:.08em}
.mp-mail a{color:#fff;text-decoration:none;border-bottom:2px solid #007bff;display:inline-block;padding:10px 0 4px}
.mp-mail a:hover{color:#d4af37;border-bottom-color:#d4af37}
.mpanel a:focus-visible,.mpanel button:focus-visible,.mbtn:focus-visible{outline:2px solid #d4af37;outline-offset:4px}
html.mopen,html.mopen body{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .mpanel,.mp-links a,.mp-mark{transition:none !important;animation:none !important}
  .mp-links a{opacity:1;transform:none}
}