/* ---------- FULL-SCREEN MENU (shared) ----------
   Proportions taken from the 1583×913 reference: left column starts at ~14.4vw
   and is 560px wide, links column follows 70px later, rows every 70px. */
.menu-overlay{
  --menu-gold:#C9AD6B;
  position:fixed; inset:0; z-index:100;
  background:var(--indigo, #434AB0); color:var(--cream, #FDEAD3);
  font-family:'Bricolage Grotesque', sans-serif;
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility 0s linear .35s;
}
.menu-overlay.open{opacity:1; visibility:visible; transition:opacity .35s ease, visibility 0s;}
body.menu-lock{overflow:hidden;}

.menu-close{
  position:absolute; top:23px; left:33px; z-index:1;
  width:52px; height:52px; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; padding:0; color:var(--white, #fff); cursor:pointer;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.menu-close:hover{transform:rotate(90deg);}
.menu-close svg{width:28px; height:28px; stroke:currentColor; stroke-width:2.6; fill:none;}
.menu-close:focus-visible, .menu-overlay a:focus-visible{outline:2px solid var(--cream, #FDEAD3); outline-offset:4px;}

.menu-inner{
  position:relative; min-height:100%;
  display:grid; grid-template-columns:min(560px, 36vw) auto; column-gap:70px; align-items:start;
  padding:84px 24px 96px clamp(24px, 14.4vw, 300px);
}

/* Left: contact details */
.menu-info{display:flex; flex-direction:column;}
.menu-info dl{margin:0;}
.menu-info .item{padding-bottom:32px; margin-bottom:16px; border-bottom:1px solid rgba(253,234,211,.85);}
.menu-info dt{font-size:28px; font-weight:600; line-height:1.2; color:var(--sand, #F8DDB5); margin-bottom:16px;}
.menu-info dd{margin:0; font-size:18px; line-height:1.3;}
.menu-info dd a{color:var(--white, #fff); text-decoration:none;}
.menu-info dd a:hover{text-decoration:underline; text-underline-offset:3px;}

.menu-connect{
  align-self:flex-start; margin-top:clamp(40px, calc(100vh - 724px), 189px);
  display:inline-flex; align-items:center; gap:14px;
  height:54px; padding:0 10px 0 28px; border:2px solid var(--cream, #FDEAD3); border-radius:60px;
  color:var(--white, #fff); text-decoration:none; font-size:18px; font-weight:600;
  transition:background .2s, color .2s;
}
.menu-connect .badge{width:32px; height:32px; border-radius:50%; background:var(--sand, #F8DDB5); color:var(--ink, #000); display:inline-flex; align-items:center; justify-content:center; transition:transform .25s;}
.menu-connect .badge svg{width:15px; height:15px; stroke:currentColor; stroke-width:2.6; fill:none;}
.menu-connect:hover{background:var(--cream, #FDEAD3); color:var(--indigo, #434AB0);}
.menu-connect:hover .badge{transform:rotate(45deg);}

.menu-rule{position:absolute; left:0; top:max(calc(100% - 170px), 560px); width:100%; height:1px; margin:0; border:0; background:rgba(253,234,211,.85);}

/* Right: page links */
.menu-links{list-style:none; margin:3px 0 0; padding:0;}
.menu-links a{
  display:inline-block; text-decoration:none; color:var(--white, #fff); white-space:nowrap;
  font-size:44px; font-weight:800; line-height:70px; letter-spacing:.02em; text-transform:uppercase;
  transition:color .2s;
}
/* Extra space between rows; Home stays put */
.menu-links li + li{margin-top:clamp(8px, calc(12.5vh - 79px), 35px);}
.menu-links a:hover, .menu-links a[aria-current="page"]{color:var(--menu-gold);}

/* Entrance */
.menu-overlay .m-in{opacity:0; transform:translate3d(0,14px,0); transition:opacity .45s, transform .55s cubic-bezier(.16,1,.3,1);}
.menu-overlay.open .m-in{opacity:1; transform:none; transition-delay:calc(120ms + var(--i, 0) * 60ms);}

@media (max-width: 960px){
  .menu-inner{grid-template-columns:minmax(0, 1fr); align-content:start; row-gap:40px; padding:100px 24px 56px;}
  .menu-info{order:2;}
  .menu-connect{margin-top:24px;}
  .menu-links li + li{margin-top:0;}
  .menu-rule{display:none;}
  .menu-links a{font-size:clamp(24px, 7.4vw, 44px); line-height:1.6;}
}
@media (prefers-reduced-motion: reduce){
  .menu-overlay, .menu-overlay.open, .menu-overlay .m-in{transition:none; transform:none;}
}
