/* ========== MOBILE NAVIGATION ==========
   The burger button existed but did nothing; below 860px the links and the
   demo CTA are hidden, so there was no way to navigate on a phone. This sheet
   adds the panel it opens.
   ======================================= */

/* Burger turns into a close icon while the panel is open. */
@media (max-width: 860px) {
  .burger span,
  .burger span::before,
  .burger span::after {
    transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .18s linear, top .25s cubic-bezier(.2,.8,.2,1);
  }
  .burger.on span { background: transparent; }
  .burger.on span::before { top: 0; transform: rotate(45deg); }
  .burger.on span::after  { top: 0; transform: rotate(-45deg); }
  .burger.on { background: rgba(10,10,20,.08); }
}

/* ---- scrim ---- */
.nav-mobile-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10,10,20,.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s cubic-bezier(.2,.8,.2,1);
  z-index: 90;
}
.nav-mobile-scrim.on { opacity: 1; pointer-events: auto; }

/* ---- panel ---- */
.nav-mobile {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 95;
  padding: 84px 20px 24px;
  max-height: 100dvh;
  overflow-y: auto;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 50px -20px rgba(10,10,20,.28);
  transform: translateY(-102%);
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
}
.nav-mobile.on { transform: translateY(0); }

/* `hidden` keeps it out of the tab order and off screen readers while closed;
   without this override the attribute would also kill the slide animation. */
.nav-mobile[hidden] { display: block; visibility: hidden; }
.nav-mobile.on[hidden] { visibility: visible; }

.nav-mobile > ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.nav-mobile > ul li + li { border-top: 1px solid var(--line); }
/* Scoped to the link list on purpose — a bare `.nav-mobile a` would also hit
   the phone/e-mail rows in the footer and push their text to the far edge. */
.nav-mobile > ul a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.nav-mobile > ul a svg { color: var(--ink-4); transition: transform .2s var(--ease), color .2s var(--ease); }
.nav-mobile > ul a:active { color: var(--brand); padding-left: 8px; }
.nav-mobile > ul a:active svg { color: var(--brand); transform: translateX(3px); }
.nav-mobile > ul a.active { color: var(--brand); }

.nav-mobile-foot { display: flex; flex-direction: column; gap: 10px; }
.nav-mobile-foot .btn { width: 100%; justify-content: center; }

.nav-mobile-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.nav-mobile-contact a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.nav-mobile-contact a:active { color: var(--brand); }

/* Desktop never shows the panel, whatever state it was left in. */
@media (min-width: 861px) {
  .nav-mobile, .nav-mobile-scrim { display: none !important; }
}

/* The panel is a child of <header class="nav">, so raising the nav's own
   z-index does nothing — both live in the same stacking context. The bar with
   the logo and the burger needs to outrank the panel directly, otherwise the
   panel slides over the top of it and the close button becomes untappable. */
.nav { z-index: 100; }
.nav-inner { position: relative; z-index: 96; }
.nav.menu-open { background: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  .nav-mobile, .nav-mobile-scrim, .burger span,
  .burger span::before, .burger span::after { transition: none; }
}