/* ============================================================================
   Mobile navigation — shared by the homepage, portfolio and the work pages.
   ----------------------------------------------------------------------------
   On a phone the old bar put the logo pill, a links pill and the CTA in one
   flex row: the logo image shrank to 0px wide (flex items shrink, and the img
   is width:auto) and "Find your match" wrapped onto three lines. Below 700px
   the links and the CTA now collapse into a <details> hamburger and the logo
   is locked at its natural size.

   No JS: <details> carries the open/closed state, so this survives the design
   canvas re-rendering the page. Panel links close the menu with a one-line
   inline onclick, which matters for same-page anchors (#services, #contact).
   ========================================================================== */

/* the logo must never be the thing that gives way when the bar is tight */
.nav-logo { flex: 0 0 auto; }
.nav-logo img { flex: 0 0 auto; }

.mnav { display: none; position: relative; }

@media (max-width: 700px) {
  .nav-links, .nav-cta { display: none !important; }
  /* the homepage bar carries 40px of inline side padding, which pushed the
     logo and the button into the middle of a 375px screen */
  nav { padding-left: 16px !important; padding-right: 16px !important; }
  .mnav { display: block; }

  .mnav > summary {
    list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
    display: grid; place-items: center; gap: 5px;
    width: 46px; height: 46px; border-radius: 999px;
    background: rgba(250, 247, 242, .92);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 18px rgba(16, 26, 28, .28);
  }
  .mnav > summary::-webkit-details-marker { display: none; }   /* Safari */
  .mnav > summary::marker { content: ""; }

  .mnav-bars, .mnav-bars::before, .mnav-bars::after {
    display: block; width: 20px; height: 2.4px; border-radius: 2px;
    background: #141414; transition: transform .22s ease, opacity .18s ease;
  }
  .mnav-bars { position: relative; }
  .mnav-bars::before, .mnav-bars::after { content: ""; position: absolute; left: 0; }
  .mnav-bars::before { top: -6.5px; }
  .mnav-bars::after  { top:  6.5px; }
  /* open → the three bars fold into an X */
  .mnav[open] .mnav-bars { background: transparent; }
  .mnav[open] .mnav-bars::before { transform: translateY(6.5px) rotate(45deg); }
  .mnav[open] .mnav-bars::after  { transform: translateY(-6.5px) rotate(-45deg); }

  .mnav-panel {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 70;
    min-width: 212px; display: flex; flex-direction: column; gap: 4px;
    padding: 12px; border-radius: 22px;
    background: rgba(250, 247, 242, .97);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 44px rgba(16, 26, 28, .3);
    animation: mnavIn .2s cubic-bezier(.22, 1, .36, 1) both;
  }
  @keyframes mnavIn { from { opacity: 0; transform: translateY(-8px); } }

  .mnav-panel a {
    text-decoration: none; color: #141414; font-weight: 600; font-size: 16px;
    padding: 12px 14px; border-radius: 14px;          /* 46px tall touch target */
  }
  .mnav-panel a:active { background: rgba(20, 20, 20, .07); }
  .mnav-panel a.mnav-go {
    margin-top: 4px; background: var(--teal, #1FA396); color: #fff;
    font-weight: 700; text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mnav-panel { animation: none; }
  .mnav-bars, .mnav-bars::before, .mnav-bars::after { transition: none; }
}

/* footer logo doubles as "back to top" */
.foot-top img, a.foot-top img { display: block; }