.header { z-index: 50; }
.header .nav,
.header .header-cta { display: none; }

.header .menu {
  display: grid;
  place-content: center;
  gap: 7px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  z-index: 52;
  transition: border-color .35s, background .35s;
}

.header .menu span { width: 17px; height: 1px; margin: 0; background: #fff; transition: transform .35s, opacity .25s; }
.header .menu[aria-expanded="true"] { background: var(--acid); border-color: var(--acid); }
.header .menu[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.header .menu[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.menu-overlay { position: fixed; inset: 0; z-index: 40; display: grid; grid-template-columns: minmax(0,1.12fr) minmax(390px,.88fr); background: #080b10; color: #f6f8fb; clip-path: inset(0 0 100% 0); pointer-events: none; transition: clip-path .8s cubic-bezier(.76,0,.24,1); }
.menu-overlay.is-open { clip-path: inset(0); pointer-events: auto; }
.menu-overlay::before { content: ""; position: absolute; inset: 0; opacity: .28; pointer-events: none; background-image: linear-gradient(rgba(80,127,191,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(80,127,191,.08) 1px,transparent 1px); background-size: 32px 32px; }
.menu-main { position: relative; z-index: 1; display: flex; flex-direction: column; padding: 142px 7vw 38px; }
.menu-overline { margin: 0 0 38px; color: #7ca7e4; font: 11px 'DM Mono'; letter-spacing: .08em; }
.menu-links { display: grid; align-content: start; }
.menu-link { color: #f6f8fb; text-decoration: none; font: 700 clamp(42px,5.7vw,88px)/.9 Syne,sans-serif; letter-spacing: -.075em; width: max-content; position: relative; padding: 5px 0; transition: color .3s, transform .35s; }
.menu-link::after { content: ""; position: absolute; left: 50%; right: 50%; top: 50%; height: 3px; background: #3f80da; transform: translateY(-50%); transition: left .35s cubic-bezier(.65,0,.35,1), right .35s cubic-bezier(.65,0,.35,1); }
.menu-link:hover,.menu-link.is-current { color: #8eb8f3; transform: translateX(15px); }
.menu-link:hover::after,.menu-link.is-current::after { left: 0; right: 0; }
.menu-bottom { display: flex; align-items: end; justify-content: space-between; margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.25); }
.menu-bottom p { margin: 0; font: 10px/1.5 'DM Mono'; color: #acb9ca; }
.menu-logo { display: block; width: 84px; height: auto; }
.menu-art { position: relative; overflow: hidden; min-height: 100%; border-left: 1px solid rgba(255,255,255,.18); background: #123663; }
.menu-art::after { content: ""; position:absolute; inset: 0; background: linear-gradient(125deg,rgba(5,11,19,.1),rgba(5,11,19,.65)); pointer-events:none; }
.menu-image { position: absolute; overflow: hidden; background-size: cover; background-position: center; transition: transform .65s cubic-bezier(.2,.8,.2,1), opacity .35s; }
.menu-image::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,transparent 30%,rgba(8,11,16,.68)); }
.menu-image.one { width: 55%; height: 51%; left: 10%; top: 13%; background-image: radial-gradient(circle at 70% 30%,#9ec2f5 0 3%,transparent 3.5%),linear-gradient(135deg,#4079cc,#0b2342 52%,#070d18); transform: rotate(-7deg); }
.menu-image.two { width: 53%; height: 49%; right: -2%; bottom: 10%; background-image: linear-gradient(145deg,transparent 0 40%,rgba(255,255,255,.16) 40% 42%,transparent 42%),radial-gradient(circle at 30% 30%,#6e9ee0,transparent 40%),linear-gradient(135deg,#071523,#2860ad); transform: rotate(8deg); }
.menu-image.three { width: 36%; height: 32%; right: 25%; top: 30%; background: #eaf0fa; transform: rotate(16deg); mix-blend-mode: screen; opacity: .9; }
.menu-art[data-preview="services"] .one { transform: translate(11%,5%) rotate(7deg) scale(1.06); }.menu-art[data-preview="about"] .two { transform: translate(-12%,-5%) rotate(-7deg) scale(1.06); }.menu-art[data-preview="projects"] .three { transform: translate(-35%,35%) rotate(35deg) scale(1.25); }.menu-art[data-preview="contact"] .one { transform: translate(-15%,18%) rotate(-17deg) scale(1.08); }.menu-art[data-preview="home"] .menu-image { transform: none; }
.menu-caption { position:absolute; z-index:2; left:8%; bottom:7%; margin:0; font:11px 'DM Mono'; color:#d6e5fc; letter-spacing:.08em; }

@media (max-width: 720px) { .menu-overlay { grid-template-columns: 1fr; } .menu-art { display:none; } .menu-main { padding: 110px 30px 28px; } .menu-link { font-size: clamp(40px,13vw,65px); } .menu-overline { margin-bottom: 25px; } }