/* ============================================================
   Digital MarCom USA — Responsive
   Desktop-first: Main styles in style.css
   Mobile overrides below
   ============================================================ */

/* --- MOBILE: < 768px --- */
@media (max-width: 767px) {

  /* Top strip hidden on mobile */
  .top-strip { display: none; }

  /* Header */
  header .container-fluid { height: 60px; }
  .logo-text img { height: 36px; }
  .logo-text span { font-size: 16px !important; }

  /* Mobile nav toggle */
  .mobile-toggle { display: flex; }

  /* Nav — slide from right */
  nav {
    position: fixed !important;
    top: 0;
    right: -100%;
    width: 86%;
    max-width: 320px;
    height: 100%;
    background: #fff;
    z-index: 100000;
    opacity: 0;
    padding-top: 15px;
    transition: right 0.35s ease, opacity 0.35s ease;
    overflow-y: auto;
  }
  nav.open { right: 0; opacity: 1; }

  /* Close button */
  .close-nav { display: block !important; }

  /* Nav list — stacked */
  nav ul.list { flex-direction: column; width: 100%; }
  nav ul.list li { width: 100%; padding: 0 15px; }
  nav ul.list li a {
    padding: 12px 0;
    display: flex;
    font-size: 16px;
  }
  /* Remove underline on mobile */
  nav ul.list li a:before { display: none; }

  /* Dropdown */
  .dropdown-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: inherit !important;
    display: none !important;
    box-shadow: none !important;
    width: 100% !important;
    top: auto !important;
    padding-left: 15px;
  }
  .dropdown-menu.open { display: block !important; }
  .dropdown-menu li a { padding: 10px 0; }

  /* Nav CTA */
  nav ul.list li a.btn { width: 100%; text-align: center; margin: 15px 0; }

  /* Overlay */
  .nav-overlay { display: block !important; pointer-events: none; }
  .nav-overlay.open { pointer-events: auto; }

  /* Hero */
  .hero { min-height: 100vh; padding: 40px 0; }
  .hero .hd { font-size: clamp(24px, 6vw, 32px) !important; }
  .hero-copy { max-width: 100%; }
  .hero-stats { flex-direction: column; gap: 16px; }
  .hero-stat { display: flex; align-items: baseline; gap: 12px; }

  /* Trust bar */
  .trust-bar-inner { flex-direction: column; gap: 12px; }
  .trust-logos { gap: 16px; justify-content: center; }

  /* Services */
  .services-grid { flex-direction: column; }
  .service_card { flex: 0 0 100%; margin: 0 0 16px; }

  /* Process */
  .home-process-grid { flex-direction: column; }
  .home-process-grid .process-item { width: 100%; padding: 0 0 16px; }
  .home-process-grid .process-item:after { display: none !important; }
  .home-process-grid .process-item .card { flex-direction: column; }

  /* Why Us */
  .why-us-grid { grid-template-columns: 1fr; }

  /* Results */
  .results-grid { flex-direction: column; }
  .result-card { flex: 0 0 100%; margin: 0 0 16px; }

  /* Testimonials */
  .testimonial-card { flex: 0 0 300px; }

  /* Local */
  .local-grid { flex-direction: row; flex-wrap: wrap; }
  .local-card { flex: 0 0 calc(50% - 24px); }

  /* Footer */
  footer { padding-bottom: 50px; padding-top: 80px; margin-top: -40px; }
  .footer-grid { flex-direction: column; }
  .footer-grid .col { flex: 0 0 100%; }
  .footer-grid .col-links ul { display: none; }
  .footer-grid .col-links h4 { cursor: pointer; }
  .footer-grid .col-links h4 .fa { display: inline !important; transition: transform 0.2s; }
  .footer-grid .col-links h4.active .fa { transform: rotate(180deg); }

  /* Footer CTA strip */
  .footer-cta-strip { padding: 15px 0; }
  .footer-cta-strip .btn { min-width: auto; width: 100%; }

  /* Inner page hero */
  .page-hero { padding: 60px 0 40px; }
  .results-hero-stats { flex-direction: column; gap: 16px; }

  /* About / Service grids */
  .about-intro-grid,
  .service-overview-grid { grid-template-columns: 1fr; gap: 30px; }

  /* Values */
  .values-grid { grid-template-columns: 1fr; }

  /* Team */
  .team-grid { grid-template-columns: 1fr; }

  /* Service features */
  .service-features-grid { grid-template-columns: 1fr; }

  /* Service process */
  .service-process-steps { grid-template-columns: 1fr; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .form-row { grid-template-columns: 1fr; }

  /* Approach */
  .approach-item { flex-direction: column; gap: 12px; }

  /* WhatsApp */
  .whatsapp-float { bottom: 15px; right: 15px; width: 50px; height: 50px; font-size: 24px; }
}

/* --- TABLET: 768px - 991px --- */
@media (min-width: 768px) and (max-width: 991px) {
  .top-strip { display: block; }
  .mobile-toggle { display: none; }
  .close-nav { display: none; }
  nav { 
    position: static !important; 
    right: auto; 
    width: auto; 
    height: auto; 
    opacity: 1; 
    padding-top: 0; 
  }
  .nav-overlay { display: none !important; }
  
  /* Nav horizontal on tablet */
  nav ul.list { 
    flex-direction: row; 
    align-items: center;
  }
  nav ul.list li { width: auto; }
  nav ul.list li a { padding: 12px 10px; }
  
  /* Show underline on tablet */
  nav ul.list li a:before { 
    display: block; 
    content: '';
    width: 0%;
    height: 3px;
    background: #ff6f27;
    position: absolute;
    bottom: 0;
    left: 50%;
    transition: all 0.2s;
  }
  nav ul.list li a:hover:before { width: 100%; left: 0; }

  .hero { min-height: 526px; padding: 45px 0; }
  .hero-stats { flex-direction: row; }
  .services-grid { flex-direction: row; }
  .service_card { flex: 0 0 calc(33.333% - 24px); }
  .home-process-grid { flex-direction: row; }
  .home-process-grid .process-item { width: 50%; }
  .results-grid { flex-direction: row; }
  .result-card { flex: 0 0 calc(33.333% - 24px); }
  .local-card { flex: 0 0 calc(50% - 24px); }
  .footer-grid { flex-direction: row; }
  .footer-grid .col-links ul { display: block; }
  .why-us-grid { grid-template-columns: 1fr 1fr; }
  .about-intro-grid,
  .service-overview-grid { grid-template-columns: 1fr 1fr; }
  .values-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .service-features-grid { grid-template-columns: repeat(2, 1fr); }
  .service-process-steps { grid-template-columns: repeat(4, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .approach-item { flex-direction: row; }
}

/* --- DESKTOP: 992px+ --- */
@media (min-width: 992px) {
  /* Show top strip on desktop */
  .top-strip { display: block; }
  
  /* Hide mobile toggle */
  .mobile-toggle { display: none !important; }
  .close-nav { display: none !important; }
  
  /* Nav - horizontal, static position */
  nav {
    position: relative !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    padding-top: 0 !important;
    background: transparent !important;
  }
  
  /* Hide overlay */
  .nav-overlay { display: none !important; }
  
  /* Nav horizontal */
  nav ul.list { 
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
  }
  nav ul.list li { 
    width: auto !important;
    padding: 0 !important;
  }
  nav ul.list li a {
    padding: 22px 14px;
    display: block;
    font-size: 17px;
  }
  
  /* Enable underline on desktop */
  nav ul.list li a:before {
    display: block;
  }
  
  /* Dropdown */
  .dropdown-menu {
    position: absolute !important;
    opacity: 0 !important;
    visibility: hidden !important;
    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 30%), 0 2px 2px 0 rgb(0 0 0 / 20%), 0 1px 5px 0 rgb(0 0 0 / 30%) !important;
    width: 260px !important;
    top: 150% !important;
    padding-left: 0 !important;
    transition: all 0.3s ease !important;
  }
  .dropdown-menu.show,
  nav ul.list li.dropdown:hover .dropdown-menu {
    visibility: visible !important;
    opacity: 1 !important;
    top: 100% !important;
  }
  .dropdown-menu li a { padding: 10px 15px !important; }
  
  /* Nav CTA button */
  nav ul.list li a.btn { 
    width: auto !important; 
    text-align: center; 
    margin: 0 10px !important; 
    padding: 6px 25px !important;
  }
}

/* --- LARGE: 1200px+ --- */
@media (min-width: 1200px) {
  .hero .hd { font-size: 39px !important; }
  .hero-stat .number { font-size: 32px; }
}