/* The phone menu: a full-screen index of the site, with the two ways to reach the team and both addresses in a dock below. */

.mobile-nav { --mn-ease: cubic-bezier(.2,.75,.15,1); }

@media(max-width:1000px) {
  .studio-header .menu-toggle { display: inline-flex; align-items: center; gap: 10px; width: auto; height: 44px; padding: 0; border: 0; background: none; color: #fff; font: 13px var(--body); letter-spacing: .03em; }
  .studio-header .menu-toggle::before { content: 'Menu'; }
  .studio-header .menu-toggle svg { width: 26px; height: 26px; }

  .studio-header .mobile-nav { display: none; }
  body.studio .site-header .mobile-nav.open { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 100; padding: 0 var(--gutter) calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--deep); color: #fff; border: 0; animation: mn-in .5s var(--mn-ease) both; }
  @keyframes mn-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

  .mn-top { display: flex; justify-content: space-between; align-items: center; min-height: 86px; flex: none; border-bottom: 1px solid #ffffff1f; }
  .mn-brand img { display: block; width: 125px; height: 54px; object-fit: contain; filter: brightness(0) invert(1); }
  .mn-close { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0; border: 0; background: none; color: #fff; font: 13px var(--body); letter-spacing: .03em; }
  .mn-close svg { width: 24px; height: 24px; color: var(--orange); }

  .mn-links { display: flex; flex-direction: column; padding-top: 8px; }
  .mn-links a { display: grid; grid-template-columns: 34px minmax(0,1fr) 22px; align-items: center; gap: 12px; padding: 15px 0 16px; border-bottom: 1px solid #ffffff1a; color: #fff; animation: mn-item .6s var(--mn-ease) both; animation-delay: calc(.08s + var(--i) * .045s); }
  @keyframes mn-item { from { opacity: 0; transform: translateY(18px); } }
  .mn-no { align-self: start; padding-top: 9px; font-size: 11px; letter-spacing: .08em; color: #7f9ba2; }
  .mn-label strong { display: block; font: 400 30px/1.1 var(--display); letter-spacing: -.045em; }
  .mn-label small { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.4; color: #9fb8be; }
  .mn-links a>svg { width: 20px; height: 20px; color: #6f8d95; transition: transform .3s, color .3s; }
  .mn-links a:active>svg,.mn-links a:hover>svg { color: var(--orange); transform: translateX(4px); }
  .mn-links a.active .mn-no,.mn-links a.active strong { color: var(--orange-light, #ffac64); }
  .mn-links a.active>svg { color: var(--orange); }

  .mn-dock { margin-top: auto; padding-top: 30px; animation: mn-item .6s var(--mn-ease) .38s both; }
  .mn-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
  .mn-actions a { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; min-height: 64px; padding: 14px; background: #ffffff0d; border: 1px solid #ffffff1f; color: #fff; transition: background .3s, border-color .3s; }
  .mn-actions a:first-child { background: var(--orange); border-color: var(--orange); color: var(--deep); }
  .mn-actions a:active { background: #ffffff1a; }
  .mn-actions a:first-child:active { background: #ffad65; }
  .mn-actions svg { flex: none; width: 24px; height: 24px; }
  .mn-actions strong { display: block; font: 400 16px/1.15 var(--display); letter-spacing: -.02em; }
  .mn-actions span { min-width: 0; }
  .mn-actions small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.35; opacity: .8; white-space: nowrap; }

  .mn-places { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); margin-top: 18px; border-top: 1px solid #ffffff1f; }
  .mn-places a { position: relative; display: block; padding: 14px 26px 14px 0; color: #fff; }
  .mn-places a+a { padding-left: 14px; border-left: 1px solid #ffffff1f; }
  .mn-places span { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #9fb8be; }
  .mn-places strong { display: block; margin-top: 5px; font: 400 14.5px/1.3 var(--display); letter-spacing: -.02em; }
  .mn-places svg { position: absolute; right: 6px; top: 15px; width: 15px; height: 15px; color: var(--orange); }

  .mn-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 14px; border-top: 1px solid #ffffff1f; font-size: 12px; color: #9fb8be; }
  .mn-foot a { display: inline-flex; align-items: center; gap: 8px; color: #fff; }
  .mn-foot svg { width: 17px; height: 17px; }
}
@media(max-width:700px) {
  .studio-header .studio-contact { display: none; }
}
@media(max-height:640px) and (max-width:1000px) {
  .mn-links a { padding-block: 11px 12px; }
  .mn-label strong { font-size: 26px; }
}
@media(prefers-reduced-motion:reduce) {
  body.studio .site-header .mobile-nav.open,.mn-links a,.mn-dock { animation: none; }
}