/* ============================================================
   RESPONSIVE — mobile-first overrides at 1024px, 768px, 375px
   ============================================================ */

/* ----- Tablet / small laptop (below 1024px) ----- */
@media (max-width: 1024px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .cross-links-grid { grid-template-columns: repeat(2, 1fr); }
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
  .industries-grid-strip { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .service-detail-body { grid-template-columns: 1fr; }
  .mission-grid, .mission-grid.mission-grid-reverse { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .page-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .page-hero-grid .orbit-panel, .mission-grid .orbit-panel {
    height: auto; aspect-ratio: 1/1; max-width: 420px; margin: 0 auto;
  }
  .page-hero-grid, .mission-grid { min-height: 0 !important; }
  .mission-grid .reveal:not(.orbit-panel) { justify-content: flex-start; }
  .hero-visual { margin-top: 8px; padding-bottom: 56px; }
  .hero-visual .orbit-panel { max-width: 340px; margin: 0 auto; }
  .orbit-panel { max-width: 340px; margin: 0 auto; }
  .orbit-node { width: 62px; padding: 7px 4px; }
  .orbit-node span { font-size: 9px; }
  .orbit-node svg { width: 16px; height: 16px; }
  .hero-mockup-card { box-shadow: 0 16px 36px rgba(0,0,0,0.3); }
  .contact-layout { grid-template-columns: 1fr; }
  .legal-layout { grid-template-columns: 1fr; gap: 32px; }
  .legal-sidebar { position: static; }
}

/* ----- Tablet / mobile nav breakpoint (below 900px) ----- */
@media (max-width: 900px) {
  .nav-links, .nav-phone { display: none; }
  .hamburger { display: flex; }
  .nav-cta-group .nav-book { display: none; }

  /* Mobile CTA bar takes over as soon as the desktop nav's Book button
     hides — using a different breakpoint here left a 768-900px dead zone
     with no booking trigger visible at all (a real bug, found via testing
     landscape phone widths). */
  .mobile-cta-bar { display: grid; }
  body { padding-bottom: 66px; }
  .cookie-banner.show { bottom: 66px; }
  #scrollTopBtn { bottom: 90px; }
  #faqBtn { bottom: 144px; }
  .faq-panel { bottom: 198px; }
  .float-btn-left { bottom: 90px; }
  .contact-corner-popup { bottom: 144px; left: 16px; right: 16px; }
  .contact-corner-popup .modal-box { max-width: none; width: 100%; }
}

/* ----- Mobile (below 768px) ----- */
@media (max-width: 768px) {
  :root { --section-pad: 56px; }
  .section { padding: var(--section-pad) 0; }
  .why-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; gap: 32px; }
  .cross-links-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 8px 20px; text-align: center; }
  .footer-col:nth-child(1) { grid-column: span 2; }
  .footer-col:nth-child(4) { grid-column: span 2; margin-top: 20px; }
  .footer-about { margin: 0 auto 20px; }
  .footer-social { justify-content: center; margin-bottom: 28px; }
  .footer-logo { justify-content: center; }
  .footer-address { width: fit-content; margin: 0 auto 18px; justify-content: flex-start; align-items: center; padding-left: 9px; }
  .footer-address svg { margin-top: 0; }
  .footer-address-full { display: none; }
  .footer-address-mobile { display: inline; }
  .footer-hours { width: fit-content; margin: 0 auto; justify-content: flex-start; }
  .footer-hours-row.footer-hours-full { display: none; }
  .footer-hours { align-items: center; padding-left: 9px; }
  .footer-hours svg { margin-top: 0; }
  .footer-hours-row.footer-hours-mobile { display: flex; gap: 18px; padding: 0; }
  .values-grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }

  .hero-content { padding: 40px 0 80px; }
  .bento-cell.bento-hero { grid-column: span 2; grid-row: span 1; }
  .page-hero-text { order: 1; }
  .hero-ctas .btn { width: 100%; }
  .hero-ctas { flex-direction: column; }

  .footer-credit-bar { flex-direction: column; gap: 8px; text-align: center; flex-wrap: wrap; }
  .footer-legal-links { justify-content: center; }
  .footer-copyright, .footer-madewith, .footer-legal-links { text-align: center; flex: none; }

  .contact-row { padding: 16px 18px; }
  .contact-form-wrap { padding: 24px 20px; }
  .contact-form-wrap .form-row { grid-template-columns: 1fr; }

  .final-cta-ctas { flex-direction: column; }
  .final-cta-ctas .btn { width: 100%; }

  .industries-grid { grid-template-columns: 1fr; }
  .industries-grid-strip { grid-template-columns: 1fr; }
}

/* ----- Small mobile (below 375px handled by fluid clamp() already; extra safety at 400px) ----- */
@media (max-width: 400px) {
  .email-toast { white-space: normal; max-width: calc(100vw - 48px); text-align: center; }
  .container { padding: 0 18px; }
  .nav-inner { padding: 0 16px; }
  .faq-panel { right: 10px; width: calc(100vw - 20px); }
  #scrollTopBtn, #faqBtn { right: 10px; }
  .float-btn-left { left: 10px; }
  .modal-box { padding: 18px 20px 14px; max-height: 98vh; }
  .modal-box h3 { font-size: 17px; margin-bottom: 2px; }
  .modal-sub { font-size: 12.5px; margin-bottom: 10px; }
  .form-field { margin-bottom: 6px; }
  .form-field label { margin-bottom: 2px; font-size: 11.5px; }
  .form-field input, .form-field textarea, .form-field select { padding: 6px 10px; font-size: 14px; }
  .form-field textarea { min-height: 36px; }
  .modal-close { top: 10px; right: 10px; width: 28px; height: 28px; }
  .contact-form-actions { gap: 6px; }
  .contact-form-actions .btn { padding: 10px 6px; font-size: 12.5px; }
}
@media (max-height: 600px) {
  .modal-box { padding: 20px 22px 18px; max-height: 98vh; }
  .modal-sub { margin-bottom: 12px; }
  .form-field { margin-bottom: 8px; }
  .form-field textarea { min-height: 40px; }
}
@media (max-height: 420px) {
  .modal-box { padding: 14px 20px 12px; max-height: 99vh; }
  .modal-box h3 { font-size: 16px; margin-bottom: 0; }
  .modal-sub { display: none; }
  .form-field { margin-bottom: 6px; }
  .form-field label { margin-bottom: 2px; font-size: 11.5px; }
  .form-field input, .form-field textarea { padding: 6px 10px; font-size: 13.5px; }
  .form-field textarea { min-height: 28px; }
  .modal-close { top: 8px; right: 8px; width: 26px; height: 26px; }
  #bookingForm .btn-block { padding: 9px 20px; font-size: 14px; }
}