/* =====================================================================
   MOBILE RESPONSIVE OPTIMIZATION LAYER
   Address Solutions — additive, mobile-only fixes.

   Every single rule in this file is nested inside a max-width media
   query, so nothing here can ever change the Desktop or Laptop
   experience. This file only patches genuine mobile bugs (overflow,
   touch targets, cramped spacing) without redesigning any component,
   changing colors, typography style, animations, or chatbot logic.
   Loaded last so it can safely win ties for the mobile-only rules it
   adds; it does not duplicate or fight any existing responsive CSS.
   ===================================================================== */

/* --- Universal horizontal-scroll safety net -------------------------- */
@media (max-width:768px){
  html, body{ overflow-x:hidden; max-width:100%; }
  img, svg, video, iframe, picture, embed{ max-width:100%; height:auto; }
  table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* --- Touch-friendly buttons & links ----------------------------------
   Doesn't resize anything visually — only guarantees a comfortable
   minimum tap height and prevents label text from clipping. */
@media (max-width:768px){
  .btn, .cc-btn-back, .cc-btn-continue, .cc-result-cta, .cc-result-restart{ min-height:44px; }
  .btn{ white-space:normal; word-break:break-word; }
}

/* --- Breathing room fine-tuning at the smallest phone widths ---------
   The site already collapses to a 20px container gutter at 768px;
   this trims it slightly further only on the narrowest devices so
   text and cards aren't pressed against the screen edge. */
@media (max-width:390px){
  .container{ padding:0 18px; }
  .hs-ceo-card-container{ padding:0 18px; }
}
@media (max-width:360px){
  .container{ padding:0 16px; }
  .hs-ceo-card-container{ padding:0 16px; }
}
@media (max-width:320px){
  .container{ padding:0 14px; }
  .hs-ceo-card-container{ padding:0 14px; }
}

/* --- Footer / socials row tidy-up on very narrow screens -------------- */
@media (max-width:480px){
  .footer-bottom{ gap:12px; }
  .contact-card .socials{ flex-wrap:wrap; row-gap:10px; }
}

/* --- Reduced-motion respect (mirrors existing site-wide preference) -- */
@media (max-width:768px) and (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; }
}