/* ============================================================
   PRUDENT CONSULTANCY — responsive.css
   ============================================================ */

/* ============================================================
   TABLET & MOBILE — hide desktop nav, show hamburger (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .main-nav  { display: none !important; }
  .nav-cta   { display: none !important; }
  .mobile-toggle { display: flex !important; }

  .site-nav  { padding: .6rem 0; }
  .brand-name { font-size: 1.2rem; }

  /* Two-col → single col */
  .two-col-grid,
  .two-col-grid-start { grid-template-columns: 1fr !important; gap: 2rem; }

  /* Grids → 2 col */
  .uni-grid          { grid-template-columns: 1fr 1fr; }
  .why-grid          { grid-template-columns: 1fr 1fr; }
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .blog-grid         { grid-template-columns: 1fr 1fr; }
  .stories-grid      { grid-template-columns: 1fr 1fr; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }

  /* Process */
  .process-timeline        { flex-wrap: wrap; justify-content: center; }
  .process-timeline::before{ display: none; }
  .process-step            { flex: 0 0 30%; }

  /* Section */
  .section-title { font-size: 2rem; }
  .section-padding { padding: 70px 0; }
}

/* ============================================================
   MOBILE (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  #custom-cursor  { display: none !important; }
  .floating-icons { display: none !important; }

  /* Header */
  .brand-name    { font-size: 1.1rem; }
  .brand-tagline { font-size: .58rem; }

  /* Hero */
  .hero-section       { padding-top: 80px; padding-bottom: 40px; }
  .hero-inner-grid    { grid-template-columns: 1fr !important; text-align: center; gap: 1.5rem; }
  .hero-3d            { display: none !important; }
  .hero-content h1    { font-size: 1.9rem; line-height: 1.25; }
  .hero-content .subtitle { font-size: .95rem; margin: 0 auto 1.5rem; }
  .hero-eyebrow       { margin: 0 auto 1rem; }
  .hero-btns {
    flex-direction: column;
    align-items: center;
    gap: .75rem;
  }
  .hero-btns .btn-primary-red,
  .hero-btns .btn-outline-red {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
  .hero-content > div:last-child { justify-content: center; flex-wrap: wrap; gap: 1rem; }

  /* Search */
  .search-section { padding: 20px 0 30px; }
  .search-bar-glass {
    flex-direction: column;
    gap: .6rem;
    padding: 1rem;
    border-radius: 16px;
  }
  .search-bar-glass .form-control,
  .search-bar-glass .form-select {
    width: 100% !important;
    min-width: unset !important;
    flex: unset !important;
  }
  .search-divider { display: none; }

  /* Sections */
  .section-padding { padding: 50px 0; }
  .section-title   { font-size: 1.75rem; }

  /* All grids → 1 col */
  .uni-grid          { grid-template-columns: 1fr !important; }
  .why-grid          { grid-template-columns: 1fr !important; }
  .testimonials-grid { grid-template-columns: 1fr !important; }
  .blog-grid         { grid-template-columns: 1fr !important; }
  .stories-grid      { grid-template-columns: 1fr !important; }

  /* Process */
  .process-timeline { flex-direction: column; align-items: center; gap: 1.5rem; }
  .process-step     { max-width: 260px; }

  /* Forms */
  .counsel-form .row      { flex-direction: column; }
  .counsel-form .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }

  /* Newsletter */
  .newsletter-card { padding: 2rem 1rem; }
  .newsletter-form { flex-direction: column; align-items: stretch; }
  .newsletter-form input { max-width: 100%; border-radius: 12px; }
  .newsletter-form .btn-primary-red { border-radius: 12px; justify-content: center; width: 100%; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; }

  /* Popups */
  .popup-box   { width: 95vw; padding: 1.5rem 1rem; max-height: 90vh; overflow-y: auto; }
  .popup-title { font-size: 1.3rem; }

  /* FABs */
  .whatsapp-fab { bottom: 16px; right: 16px; width: 48px; height: 48px; font-size: 1.4rem; }
  .backtop-fab  { bottom: 16px; left: 16px;  width: 40px; height: 40px; }

  /* Comparison */
  .comparison-wrapper { overflow-x: auto; }
}

/* ============================================================
   SMALL MOBILE (≤480px)
   ============================================================ */
@media (max-width: 480px) {
  .container { padding-left: 14px; padding-right: 14px; }

  .brand-name    { font-size: 1rem; }
  .brand-tagline { display: none; }

  .hero-section       { padding-top: 72px; }
  .hero-content h1    { font-size: 1.65rem; }
  .section-title      { font-size: 1.5rem; }
  .section-padding    { padding: 40px 0; }

  .glass-card  { padding: 1.1rem; }
  .uni-card    { padding: 1.1rem; }
  .testi-card  { padding: 1.1rem; }
  .why-card    { padding: 1.1rem; }

  .step-number { width: 50px; height: 50px; font-size: 1.1rem; }
  .slider-track .course-card { flex: 0 0 230px; }

  .popup-box { padding: 1.25rem 1rem; }
  .popup-form .form-control,
  .popup-form .form-select { padding: .6rem .85rem; }

  .site-footer { padding-top: 40px; }
}

/* ============================================================
   DESKTOP XL (≥1400px)
   ============================================================ */
@media (min-width: 1400px) {
  .container       { max-width: 1320px; }
  .hero-content h1 { font-size: 3.8rem; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  #particles-js, #custom-cursor, .whatsapp-fab,
  .backtop-fab, #scroll-progress, .floating-icons,
  header, .hero-section { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}