/* V47 Messenger / in-app browser mobile safety
   Prevents wide-layout rendering in Facebook Messenger, Instagram, and similar embedded browsers.
   Keeps desktop layout intact while forcing safe portrait stacking when an in-app browser reports
   a tablet-sized layout viewport on a phone. */

html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  width:100%;
  min-width:0;
  max-width:100%;
  overflow-x:hidden;
}

img,
svg,
video,
canvas{
  max-width:100%;
  height:auto;
}

.site-header,
main,
.footer,
.hero,
section,
.container,
.nav,
.hero-shell,
.hero-copy,
.hero-visual,
.grid-2,
.grid-3,
.grid-4,
.quote-strip,
.contact-grid,
.wow-band-grid,
.service-paths-head,
.service-paths-panel{
  min-width:0;
  max-width:100%;
}

/* Remove the fixed 560px hero-column floor that can trigger horizontal overflow
   when an in-app browser reports a wider-than-physical viewport. */
.hero-shell{
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr) !important;
}

/* This is the critical compatibility rule:
   portrait in-app browsers stack the site exactly as a normal mobile browser should. */
@media (max-width:1200px), (orientation:portrait){
  .desktop-nav{
    display:none !important;
  }

  .hamburger{
    display:grid !important;
  }

  .home-icon,
  .home-redirect{
    display:grid !important;
  }

  .nav,
  .container,
  .hero-shell{
    width:calc(100% - 28px) !important;
    max-width:760px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .brand{
    min-width:0 !important;
  }

  .top-actions{
    margin-left:auto !important;
    flex-shrink:0 !important;
  }

  .hero-shell,
  .grid-2,
  .grid-3,
  .grid-4,
  .quote-strip,
  .contact-grid,
  .wow-band-grid,
  .service-paths-head{
    grid-template-columns:1fr !important;
  }

  .hero-shell{
    gap:22px !important;
    align-items:stretch !important;
  }

  .hero-copy,
  .hero-visual,
  .hero-visual.photo,
  .card,
  .sample-card,
  .rate-card,
  .quote-box,
  .contact-card,
  .premium-cta,
  .wow-band,
  .service-paths-panel{
    width:100% !important;
    min-width:0 !important;
  }

  .hero-copy,
  .hero-visual.photo{
    min-height:auto !important;
  }

  .hero-visual.photo{
    padding:10px !important;
  }

  .hero-visual.photo img,
  .hero-visual img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
  }

  .section-head{
    display:block !important;
  }

  .section-head p,
  .service-paths-head p{
    margin-top:14px !important;
    max-width:100% !important;
  }
}

@media (max-width:760px), (orientation:portrait){
  .hero{
    padding-top:30px !important;
    padding-bottom:26px !important;
  }

  .nav,
  .container,
  .hero-shell{
    width:calc(100% - 24px) !important;
  }

  .brand img{
    width:42px !important;
    height:42px !important;
  }

  .brand strong{
    font-size:.84rem !important;
  }

  .brand span{
    font-size:.66rem !important;
  }

  .hero-copy,
  .hero-visual,
  .card,
  .sample-card,
  .rate-card,
  .quote-box,
  .contact-card,
  .premium-cta,
  .wow-band,
  .service-paths-panel{
    padding:18px !important;
  }

  .hero-copy h1{
    max-width:100% !important;
    font-size:clamp(2.2rem,10vw,3rem) !important;
    line-height:1.08 !important;
  }

  .button-row{
    width:100% !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .button-row .btn{
    width:100% !important;
    flex:1 1 100% !important;
  }

  .floating-widget{
    right:12px !important;
    bottom:12px !important;
  }

  .widget-panel{
    width:calc(100vw - 24px) !important;
    max-width:340px !important;
  }
}