/* Mobile menu.
 * One weight for every service, a compact grid for the rest, and the CTA
 * pinned so it is visible on a 375x667 screen without scrolling to find it.
 * Only the middle band scrolls. */
.mm{
  position:fixed; inset:0; z-index:120;
  display:flex; flex-direction:column;
  background:var(--plum-950); color:var(--on-dark);
  padding:0 var(--gut) calc(14px + env(safe-area-inset-bottom));
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s;
}
.mm.open{opacity:1; visibility:visible; transform:none; transition-delay:0s}
/* the monogram, faint, bottom right */
.mm::after{
  content:""; position:absolute; right:-40px; bottom:-30px; width:min(62vw,300px); aspect-ratio:1;
  background:url(/brand_assets/logo/monogram.png) center/contain no-repeat;
  opacity:.06; pointer-events:none;
}
.mm__top{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s2); padding-block:14px 10px; flex:none}
.mm__top .brand{--mark-h:52px;--word-h:26px;--brand-gap:10px}
.mm__x{display:grid; place-items:center; width:44px; height:44px; flex:none;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(252,181,87,.12); color:var(--oro)}
.mm__scroll{flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  position:relative; z-index:1; padding-bottom:28px}
/* The pinned CTA cuts the list wherever it happens to fall, which on a
   short screen lands mid-letter and reads as a rendering fault. Fade the
   last strip into the ground so it reads as more to scroll. */
.mm__foot{position:relative}
.mm__foot::before{content:""; position:absolute; left:0; right:0; bottom:100%;
  height:34px; pointer-events:none;
  background:linear-gradient(to top,var(--plum-950) 20%,rgba(6,1,9,0))}
.mm__eyebrow{margin:14px 0 10px; color:var(--oro)}
.mm__eyebrow:first-child{margin-top:4px}

/* services: one size, a line of explanation, no oversized arrows */
.mm-s{list-style:none; margin:0; padding:0}
.mm-s li+li{border-top:1px solid var(--hair-oro)}
.mm-s a{display:block; padding:13px 0; text-decoration:none; color:inherit}
.mm-s__n{display:block; font-family:var(--f-display); font-weight:400;
  font-size:24px; line-height:1.15; color:var(--on-dark)}
.mm-s__d{display:block; margin-top:2px; font-size:14px; line-height:1.35; color:var(--on-dark-muted)}
.mm-s a[aria-current="page"] .mm-s__n{color:var(--oro)}
.mm-s a[aria-current="page"] .mm-s__n::after{
  content:""; display:inline-block; width:6px; height:6px; margin-left:8px;
  border-radius:50%; background:var(--oro); vertical-align:middle}

/* everything else: compact, two columns */
.mm-more{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:2px 16px}
.mm-more a{display:block; padding:9px 0; font-size:16px; text-decoration:none; color:var(--on-dark-muted)}
.mm-more a[aria-current="page"]{color:var(--oro)}

/* pinned footer: the CTA never scrolls out of reach */
.mm__foot{flex:none; position:relative; z-index:1; padding-top:12px;
  border-top:1px solid var(--hair-oro)}
.mm__cta{width:100%; justify-content:center}
.mm__row{display:flex; align-items:center; gap:10px; margin-top:10px}
.mm__ic{display:grid; place-items:center; width:44px; height:44px; flex:none;
  border-radius:50%; color:var(--oro); box-shadow:inset 0 0 0 1px var(--oro)}
.mm__ic .ic{width:20px; height:20px}
.mm-lang{margin-left:auto; min-height:44px; display:inline-flex; align-items:center;
  padding:0 16px; border-radius:999px; font-size:14px; font-weight:600;
  color:var(--on-dark-muted); text-decoration:none; box-shadow:inset 0 0 0 1px var(--hair-oro)}
.mm-lang b{color:var(--oro)}

/* staggered entrance, short enough not to feel like a wait */
.mm.open .mm-s li,.mm.open .mm-more li{animation:mm-in .2s var(--ease) both}
.mm.open .mm-s li:nth-child(1){animation-delay:.03s}
.mm.open .mm-s li:nth-child(2){animation-delay:.06s}
.mm.open .mm-s li:nth-child(3){animation-delay:.09s}
.mm.open .mm-s li:nth-child(4){animation-delay:.12s}
.mm.open .mm-s li:nth-child(5){animation-delay:.15s}
.mm.open .mm-s li:nth-child(6){animation-delay:.18s}
.mm.open .mm-s li:nth-child(7){animation-delay:.21s}
@keyframes mm-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (max-height:700px){
  .mm-s a{padding:10px 0}
  .mm-s__n{font-size:21px}
  .mm__top .brand{--mark-h:44px;--word-h:22px}
}
@media (prefers-reduced-motion:reduce){
  .mm,.mm.open .mm-s li,.mm.open .mm-more li{animation:none;transition:opacity .01ms}
}

/* Above the nav breakpoint there is no burger, so the panel must be gone
   outright, not merely transparent. */
@media (min-width:1120px){
  .mm{display:none}
}