.nav { position: relative; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 10px 8px;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}
.nav-toggle span {
  display: block;
  height: 3px;
  background: #2D2A26;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle:hover span { background: #C0582B; }

@media (max-width: 768px) {
  .nav { flex-wrap: wrap; padding: 12px 20px; }

  .nav-toggle { display: flex; order: 2; }

  .nav-links {
    order: 3;
    width: 100%;
    display: none;
    flex-direction: column;
    padding: 12px 0 4px;
    gap: 2px;
    border-top: 1px solid #E8DDD4;
    margin-top: 12px;
  }

  .nav[data-open="true"] .nav-links { display: flex; }

  .nav[data-open="true"] .nav-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .nav[data-open="true"] .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav[data-open="true"] .nav-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-links a {
    margin: 0;
    padding: 12px 4px;
    font-size: 16px;
    border-bottom: 1px solid #F2EAE0;
  }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links .btn-nav {
    margin-top: 8px;
    text-align: center;
    padding: 12px 20px;
    font-size: 15px;
    border-bottom: 0 !important;
  }
}