/* ============================================================= */
/*  Smart Drifty — responsive.css                                 */
/*  Tablet (<=1023px) and Mobile (<=767px)                        */
/* ============================================================= */

/* ---------------- TABLET & BELOW ---------------- */
@media (max-width: 1023px) {
  :root { --header-h: 70px; }

  .main-nav, .header-cta { display: none; }
  .hamburger { display: grid; }

  /* Hero stacks */
  .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero-copy { order: 1; }
  .hero-visual { order: 2; }
  .hero-actions .btn { flex: 1 1 auto; }

  /* Chatbot stacks: widget moves below the copy, so the note arrow points down to it */
  .chatbot-inner { grid-template-columns: 1fr; }
  .chat-note { padding-right: 5rem; }
  .note-arrow { transform: rotate(62deg); }

  /* Trusted stacks */
  .trusted-grid { grid-template-columns: 1fr; }
  .logos { justify-content: flex-start; }

  /* CTA stacks */
  .cta-banner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .cta-text p { margin-inline: auto; }
  .cta-action { align-items: center; }

  /* Footer 2-col */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-news { grid-column: 1 / -1; }

  /* Service modal stacks: photo pane on top, white panel below */
  .service-modal-box { flex-direction: column; overflow-y: auto; }
  .sm-pane { overflow: visible; }
  .sm-pane-right { box-shadow: none; }
}

/* ---------------- MOBILE ---------------- */
@media (max-width: 767px) {
  :root { --header-h: 64px; --radius-card: 24px; }

  .brand-name { font-size: 1.25rem; }
  .brand-mark { width: 34px; height: 34px; }

  /* Hero */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }

  /* Trusted: 3 stat cards stay in a row, testimonial below */
  .stats { gap: 0.55rem; }
  .stat-card { padding: 1.05rem 0.75rem; border-radius: 18px; }
  .stat-ic { width: 32px; height: 32px; margin-bottom: 0.1rem; }
  .stat-ic svg { width: 22px; height: 22px; }
  .stat-num { font-size: 1.5rem; }
  .stat-label { font-size: 0.74rem; }

  /* CTA */
  .cta-mark { display: none; }

  /* Footer accordion */
  .footer-grid { grid-template-columns: 1fr; gap: 0.4rem; }
  .footer-brand, .footer-news { grid-column: auto; }
  .footer-brand { margin-bottom: 1rem; }
  .footer-col { border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .footer-col-head { cursor: pointer; padding-block: 1.1rem; margin-bottom: 0; }
  .footer-col-head .chev { display: block; transition: transform var(--dur) var(--ease); }
  .footer-col .footer-links {
    max-height: 0;
    overflow: hidden;
    margin: 0;
    transition: max-height var(--dur) var(--ease), padding var(--dur) var(--ease);
  }
  .footer-col.open .footer-links { max-height: 260px; padding-bottom: 1.1rem; }
  .footer-col.open .footer-col-head .chev { transform: rotate(180deg); }
  .footer-news { margin-top: 1.4rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; }

  /* Contact modal */
  .cm-header { padding: 1.3rem; }
  .cm-body { padding: 1.3rem; }
  .cm-badge { width: 48px; height: 48px; }
  .cm-badge svg { width: 24px; height: 24px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }

  /* Service modal */
  .sm-head { gap: 0.7rem; margin-bottom: 1.2rem; }
  .sm-badge { width: 52px; height: 52px; }
  .sm-num { font-size: 1.25rem; }
  .sm-close { top: 12px; right: 12px; width: 42px; height: 42px; }
  .sm-pane-left { padding: 1.5rem 1.3rem 0.6rem; }
  .sm-pane-right { padding: 1.4rem 1.3rem 1.6rem; }
  .sm-how-title, .sm-why-title { font-size: 1.2rem; }
  .sm-cta-row { justify-content: stretch; }
  .sm-cta { width: 100%; justify-content: center; }

  /* Contact modal: single column on phones, chat scene hidden (no room beside the form) */
  .contact-modal-box { flex-direction: column; }
  .cm-scene { display: none; }
}

/* very small phones */
@media (max-width: 380px) {
  .stat-num { font-size: 1.3rem; }
}