@media screen and (max-width: 900px) {
  body { overflow-x: hidden !important; }

  nav.nav {
    background: #ffffff !important;
    border-bottom: 1.5px solid #C29585 !important;
    box-shadow: 0 2px 8px rgba(35,25,18,0.1) !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    overflow: visible !important;
  }

  .nav__inner {
    padding: 0 16px !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .nav__links {
    display: flex !important;
    position: fixed !important;
    top: 74px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    flex-direction: column !important;
    background: #ffffff !important;
    padding: 20px 16px !important;
    border-bottom: 1px solid rgba(35,25,18,0.12) !important;
    transform: translateY(-110%) !important;
    visibility: hidden !important;
    transition: transform 0.4s ease, visibility 0.4s !important;
    z-index: 200 !important;
    gap: 0 !important;
  }

  .nav__links.is-open {
    transform: translateY(0) !important;
    visibility: visible !important;
  }

  .nav__links li {
    width: 100% !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(35,25,18,0.06) !important;
  }

  .nav__burger {
    display: flex !important;
    flex-shrink: 0 !important;
  }

  .nav__brand-sub { display: none !important; }

  .hero__grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .hero__visual { order: -1 !important; }
}