@media (max-width: 768px) {
    header { flex-direction: column; gap: 12px; text-align: center; }
    nav { flex-wrap: wrap; justify-content: center; gap: 10px; }
    .top-bar { flex-direction: column; gap: 8px; text-align: center; }
    .hero h2 { font-size: 1.5rem; }
    .quick-booking-card { flex-direction: column; gap: 10px; }
    .step-arrow { transform: rotate(90deg); margin: 5px 0; }
    .service-card p { height: auto; }
}