/* ==========================================================================
   Willow Design — Responsive
   Base CSS above is written desktop-first for readability;
   this file governs the actual mobile-first behavior via max-width cutdowns.
   ========================================================================== */

/* ---- Large desktop refinement ---- */
@media (min-width: 1440px) {
  .container { max-width: 1320px; }
}

/* ---- Laptop / small desktop ---- */
@media (max-width: 1180px) {
  .services-grid, .why-grid, .process-grid, .stats-grid,
  .portfolio-grid, .blog-grid, .team-grid, .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .hero .container { gap: var(--space-lg); }
  .hero-art { height: 460px;  }
}

/* ---- Tablet ---- */
@media (max-width: 960px) {
  :root { --header-h: 74px; }

  .nav-links, .nav-actions .btn-ghost { display: none; }
  .nav-toggle { display: flex; }

  .hero .container { grid-template-columns: 1fr; text-align: center; }
  .hero-sub { margin-inline: auto; }
  .hero-actions, .hero-stats { justify-content: center; }
  .hero-art { height: 340px; order: -1; }
  .glass-chip { position: static; display: inline-flex; margin: 0.3rem; }
  .hero-art .glass-chip { display: none; }
.willow-img{height: 350px;}
  .intro-grid, .service-detail, .service-detail:nth-child(even) .service-detail-text { grid-template-columns: 1fr; }
  .service-detail:nth-child(even) .service-detail-text { order: 0; }
  .intro-badge { position: static; margin-top: -2.5rem; margin-inline: auto var(--space-lg); }

  .footer-top { grid-template-columns: 1fr 1fr; }

  .form-row { grid-template-columns: 1fr; }
  .contact-info-grid { grid-template-columns: 1fr; }
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  :root {
    --space-2xl: 3.5rem;
    --space-3xl: 4.5rem;
  }

  .navbar-inner { padding: 0.6rem 0.6rem 0.6rem 1rem; }
  .nav-actions .btn { padding: 0.7rem 1.1rem; font-size: var(--fs-sm); }

  .hero { min-height: auto; padding-bottom: var(--space-2xl); }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .hero-stats { flex-wrap: wrap; gap: var(--space-md); }

  .services-grid, .why-grid, .process-grid, .stats-grid,
  .portfolio-grid, .blog-grid, .team-grid, .pricing-grid,
  .values-grid { grid-template-columns: 1fr; }

  .process-track::before { display: none; }

  .footer-top { grid-template-columns: 1fr; gap: var(--space-xl); }
  .footer-bottom { flex-direction: column; text-align: center; }

  .testimonial-card { width: 82vw; }

  .modal-box { max-height: 92vh; }

  .section-head { margin-bottom: var(--space-xl); }
  section { padding-block: var(--space-2xl); }
}

@media (max-width: 400px) {
  .hero-stats { gap: var(--space-sm) var(--space-md); }
  .btn { padding: 0.9rem 1.5rem; }
}