/* ===== Global mobile sanity ===== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, canvas, svg { max-width: 100%; height: auto; display: block; }
:where(.container){ padding-inline:16px; }

/* Header rows used across pages: .h-row, .row, .nav__in */
@media (max-width: 720px){
  .h-row, .row, .nav__in { flex-wrap: wrap; gap: 6px; padding-block: 10px; }
  .brand .logo { width: 30px; height: 30px; border-radius: 8px; }
  .brand strong, .brand .title { font-size: 16px; line-height: 1.1; }
  .navlinks { width: 100%; gap: 6px; row-gap: 6px; }
  .navlinks a { padding: 6px 10px; font-size: 15px; }
}

/* Optional hamburger (see section 2) */
@media (max-width: 720px){
  .nav-toggle { display:inline-flex; align-items:center; justify-content:center;
                width:38px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.15);
                background:rgba(255,255,255,.06); color:#fff }
  .navlinks.collapsible { display:none; width:100%; }
  .navlinks.collapsible.open { display:flex; }
}

/* Hero blocks (index/about/faq) */
@media (max-width: 640px){
  .hero { min-height: 62vh !important; }
  .hero-inner { padding: 64px 0 36px !important; }
  .title, .hero-title, .hero h1 {
    font-size: clamp(22px, 6vw, 34px) !important;
    line-height: 1.22 !important;
    margin: 0 !important;
    word-break: normal; hyphens: auto;
    text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 3px 12px rgba(0,0,0,.35);
  }
  .sub, .hero-sub, .hero p { font-size: 15px !important; margin-top: 8px !important; }
  .hero-ctas, .hero-actions { gap: 8px !important; margin-top: 14px !important; flex-wrap: wrap; }
  .btn-outline, .btn-brand { padding: .56rem .85rem !important; border-radius: 10px !important; font-size: 15px !important; }
  .chips, .hero-chips { gap: 6px !important; margin-top: 12px !important; }
  .chip, .chip-tight { font-size: .82rem !important; padding: .28rem .58rem !important; }
  /* stronger overlay for text legibility on phones if you use .hero background images */
  .hero, .hero-overlay {
    background: linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.84)) !important;
  }
}

/* Grids → single column below tablet (works for .grid + span-X on index) */
@media (max-width: 980px){
  .grid { grid-template-columns: 1fr !important; }
  .span-6, .span-4, .span-3, .span-8, .span-12 { grid-column: span 12 !important; }
}

/* Cards/heights (prevents awkward cropping) */
@media (max-width: 640px){
  .card img, .service-img, .who-img { height: 200px !important; object-fit: cover; }
}

/* Testimonials feed from index */
@media (max-width: 720px){
  .feed { height: 360px !important; }
  .msg { min-height: 124px !important; max-height: 124px !important; padding: 12px 14px !important; }
  .msg blockquote { -webkit-line-clamp: 3 !important; font-size: 1rem !important; }
}

/* Section padding tighter on phones (all pages) */
@media (max-width: 640px){
  .section { padding-block: 16px !important; }
}

/* Micro: on very narrow phones, stack hero buttons full width */
@media (max-width: 360px){
  .hero-ctas a, .hero-actions a { flex: 1 1 100%; text-align: center; }
}