/* ===== MOBILE RESPONSIVE — Peak Barbershop ===== */
@media (max-width: 900px) {
  /* NAV */
  nav {
    padding: 0 16px;
    justify-content: flex-start;
    gap: 0;
  }
  /* Hide left nav links (Services, About, Gallery) */
  .nav-links:first-child { display: none; }
  /* Logo pushes right content away */
  .nav-logo { margin-right: auto; }
  /* Show right nav: Contact + Book Now */
  .nav-links:last-child {
    display: flex;
    align-items: center;
    gap: 0;
  }
  .nav-links:last-child li:first-child { display: block; }
  .nav-links:last-child li:first-child a {
    padding: 0 14px;
    font-size: 9px;
    letter-spacing: 2px;
  }
  .nav-book {
    padding: 10px 16px !important;
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
    white-space: nowrap;
  }
  /* Single hamburger */
  .hamburger {
    display: flex;
    margin-left: 12px;
    flex-shrink: 0;
  }

  /* PAGE BANNERS */
  .page-banner { padding: 120px 24px 60px; }

  /* HERO */
  .hero { padding: 0 24px 60px; }
  .hero-actions { flex-direction: column; align-items: center; gap: 12px; }
  .btn-gold, .btn-outline-light { width: 100%; text-align: center; padding: 16px 24px; }

  /* INTRO */
  .intro { grid-template-columns: 1fr; gap: 48px; padding: 80px 24px; }
  .intro-right { grid-template-columns: 1fr 1fr; display: grid; gap: 24px; }

  /* SERVICES PREVIEW */
  .services-preview { padding: 80px 24px; }
  .services-grid { grid-template-columns: 1fr; }

  /* BARBERS */
  .barbers { padding: 80px 24px; }
  .barbers-grid { grid-template-columns: 1fr; gap: 40px; max-width: 400px; margin: 0 auto; }

  /* TESTIMONIALS */
  .testimonials { padding: 80px 24px; }
  .testimonials-grid { grid-template-columns: 1fr; gap: 20px; }

  /* HOURS BANNER */
  .hours-banner { flex-direction: column; gap: 32px; padding: 60px 24px; text-align: center; }
  .hours-divider { display: none; }

  /* CTA */
  .cta-section { padding: 80px 24px; }

  /* FOOTER */
  footer { grid-template-columns: 1fr 1fr; padding: 48px 24px; gap: 32px; }
  .footer-bottom { padding: 20px 24px; flex-direction: column; gap: 8px; text-align: center; }

  /* SERVICES PAGE */
  .services-section { padding: 60px 24px; }
  .service-row { flex-direction: column; gap: 8px; }
  .service-row-price { font-size: 22px; }
  .add-ons { padding: 60px 24px; }
  .add-ons-grid { grid-template-columns: 1fr 1fr; }
  .policy-section { padding: 60px 24px; }
  .policy-grid { grid-template-columns: 1fr; gap: 24px; }
  .cta-strip { padding: 60px 24px; }

  /* ABOUT PAGE */
  .story { grid-template-columns: 1fr; gap: 40px; padding: 60px 24px; }
  .story-img { aspect-ratio: 3/2; max-height: 300px; }
  .values { padding: 60px 24px; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .team { padding: 60px 24px; }
  .team-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .timeline { padding: 60px 24px; }
  .timeline-item { grid-template-columns: 60px 1fr; gap: 20px; }

  /* GALLERY PAGE */
  .filter-bar { padding: 0 24px 40px; flex-wrap: wrap; }
  .gallery-grid { columns: 2; padding: 0 24px 60px; gap: 10px; }
  .gallery-grid .gallery-item { margin-bottom: 10px; }

  /* BOOKING PAGE */
  .booking-layout { grid-template-columns: 1fr; }
  .booking-left { padding: 120px 24px 60px; }
  .booking-right { padding: 60px 24px; }
  .barber-select { grid-template-columns: repeat(3, 1fr); }
  .form-row { grid-template-columns: 1fr; }

  /* CONTACT PAGE */
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info { padding: 60px 24px; }
  .map-placeholder { min-height: 300px; padding: 60px 24px; }
  .hours-section { padding: 60px 24px; }
  .faq-section { padding: 60px 24px; }
  .faq-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  /* Smaller phones */
  .intro-right { grid-template-columns: 1fr 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .add-ons-grid { grid-template-columns: 1fr; }
  .gallery-grid { columns: 1; }
  footer { grid-template-columns: 1fr; }
  .nav-logo-main { font-size: 18px; }
  .barber-select { grid-template-columns: 1fr; }
  .hero-title { font-size: 64px; }
}