/* ============================================================
   KEIRI TECH — phones and small tablets.  v2 (Nov 2026)
   Written for the site's own markup: header .navbar, the
   inline-styled two-column sections, the hero art and its
   floating cards, the chat button. Below 860px only.
   ============================================================ */
@media (max-width: 860px) {
  html, body { overflow-x: hidden; }
  img, video, iframe { max-width: 100%; height: auto; }

  /* every two- and three-column layout written inline becomes one column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .wrap, .container { padding-left: 18px !important; padding-right: 18px !important; }

  /* header: logo, one call to action, the menu */
  #hdr .navbar { gap: 10px !important; padding-top: 12px !important; padding-bottom: 12px !important; flex-wrap: nowrap !important; }
  #hdr nav.links { display: none !important; }
  #hdr .brand { flex: 1 1 auto; min-width: 0; }
  #hdr .brand b { white-space: nowrap; font-size: 20px; }
  #hdr .navactions { display: flex !important; align-items: center; gap: 8px; flex: none; flex-wrap: nowrap !important; }
  #hdr .navactions .btn-ghost { display: none !important; }
  #hdr .navactions .btn-gold { white-space: nowrap !important; padding: 9px 14px !important; font-size: 13.5px !important; width: auto !important; display: inline-flex !important; }
  #hdr .nav-toggle { display: inline-flex !important; width: 42px !important; height: 42px !important; padding: 0 !important; align-items: center; justify-content: center; flex: none; }

  /* the hero: text first, then Keiri, her cards beside her not on top of the words */
  .page-hero { padding-top: 96px !important; padding-bottom: 48px !important; }
  .page-hero h1 { font-size: clamp(32px, 9vw, 44px) !important; line-height: 1.08 !important; }
  .page-hero .lede, .lede { font-size: 16px !important; line-height: 1.6 !important; }
  .page-hero [style*="min-height:560px"] { min-height: 0 !important; margin-top: 18px; }
  .page-hero img[style*="height:560px"] { height: 340px !important; width: auto !important; }
  .page-hero [style*="width:430px"] { width: 300px !important; height: 300px !important; }
  .page-hero .mock[style*="position:absolute"] { transform: scale(.82); transform-origin: top left; }
  .page-hero .mock[style*="bottom:70px"] { transform-origin: bottom right; right: 0 !important; }
  .page-hero .mock[style*="top:50px"] { left: 0 !important; top: 10px !important; }
  .statband { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
  .statband .s b { font-size: 22px !important; }
  .statband .s small { font-size: 11.5px !important; line-height: 1.3; display: block; }

  /* sections and cards breathe less */
  .sec, section.sec { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding:34px 34px"] { padding: 22px 18px !important; }
  h2 { font-size: clamp(24px, 6.6vw, 32px) !important; line-height: 1.18 !important; }
  h3 { font-size: clamp(18px, 5vw, 22px) !important; }

  /* links set side by side inline wrap onto their own lines */
  a[style*="margin-left:14px"] { display: inline-block; margin: 12px 14px 0 0 !important; }

  /* tables scroll in their own box */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* the menu sheet sits over the page and fills it */
  .mobile-menu { max-width: 100vw; }
}
@media (max-width: 380px) {
  #hdr .navactions .btn-gold { padding: 8px 10px !important; font-size: 12.5px !important; }
  .page-hero h1 { font-size: 30px !important; }
}
/* the chat button stays a round button on a phone */
@media (max-width: 900px) {
  button.chat-fab { width: 56px !important; height: 56px !important; padding: 0 !important; left: auto !important; right: 16px !important; bottom: 16px !important; display: flex !important; align-items: center; justify-content: center; border-radius: 50% !important; }
}