/* === Smartphone-only fixes (<=560px) v3 ===
   - Add generous side padding
   - Force natural wrapping for headings and leads
   - Prevent first character sticking to the left edge
   - Stack header brand above nav
   - Convert 2-col layouts to 1-col
   - No effect on desktop/tablet
*/
@media (max-width:560px){
  /* Global side padding with iOS safe area */
  .container,
  .site-header .container,
  .footer-inner{
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  /* Header layout */
  .header-inner{ display:flex; flex-wrap:wrap; row-gap:8px; }
  .brand{ flex: 1 1 100%; align-items:center; gap:8px; }
  .brand img{ height:22px; }
  .brand .name{ font-size:15px; white-space:normal; word-break:normal; line-break:strict; }
  .nav{ flex: 1 1 100%; gap:12px; flex-wrap:wrap; }
  .nav a{ font-size:14px; }

  /* Hero & lead text */
  .hero-inner{ padding: 44px 0; }
  .hero h1, .banner-copy h1, h1.top-catch{
    font-size: 24px !important;
    line-height: 1.4 !important;
    margin: 10px 0 12px !important;
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  .lead{
    font-size: 15px !important;
    line-height: 1.9 !important;
    max-width: 100% !important;
    word-break: normal !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  .lead .nowrap, .hero .nowrap{ white-space: normal !important; }

  /* Force 1-col for grids/galleries */
  .grid.two{ grid-template-columns:1fr !important; }
  .gallery.three{ grid-template-columns:1fr !important; }

  /* Cards & images */
  .card{ padding:16px !important; border-radius:12px !important; }
  img{ max-width:100% !important; height:auto !important; display:block !important; }

  /* Footer spacing */
  .footer-nav a{ display:inline-block !important; margin:6px 12px 0 0 !important; }
}