/* TRPN responsive safety layer — 2026-08-03
   Loaded last so public pages, customer portal, marketplace, and admin pages
   remain usable on iPhone, Android, tablets, and narrow laptop windows. */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  max-width:100%;
  overflow-x:hidden;
}
body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden;
}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
input,select,textarea,button{font:inherit;max-width:100%}
input[type="file"]{width:100%}
main,section,article,aside,header,footer,nav,form,fieldset,div{min-width:0}
h1,h2,h3,h4,p,li,a,span,strong,label,td,th{
  overflow-wrap:anywhere;
  word-break:normal;
}
a,button,.btn,input,select,textarea{touch-action:manipulation}

/* Keep wide data usable rather than letting it push the whole page sideways. */
table{max-width:100%}
pre,code{white-space:pre-wrap;overflow-wrap:anywhere}

/* Public-site header and drawer. */
@media (max-width:1050px){
  body .header .nav{display:none!important}
  body .header .menu{display:flex!important}
}

@media (max-width:820px){
  body .header{
    width:100%!important;
    height:72px!important;
    min-height:72px!important;
    padding-top:8px!important;
    padding-right:max(10px,env(safe-area-inset-right))!important;
    padding-bottom:8px!important;
    padding-left:max(10px,env(safe-area-inset-left))!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:7px!important;
  }
  body .header .logo{
    display:flex!important;
    align-items:center!important;
    flex:0 1 104px!important;
    width:104px!important;
    max-width:104px!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  body .header .logo img{
    display:block!important;
    width:auto!important;
    max-width:100%!important;
    height:auto!important;
    max-height:56px!important;
    object-fit:contain!important;
  }
  body .header .header-right{
    margin-left:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex:0 0 auto!important;
    gap:6px!important;
    min-width:0!important;
  }
  body .header .call-now-btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:50px!important;
    max-width:66px!important;
    min-height:44px!important;
    padding:0 9px!important;
    margin:0!important;
    border-radius:10px!important;
    white-space:nowrap!important;
    font-size:12px!important;
    line-height:1!important;
  }
  body .header .call-mobile-label{display:inline!important}
  body .header .call-desktop-label{display:none!important}
  body .header .language-picker{
    position:relative!important;
    inset:auto!important;
    flex:0 0 44px!important;
    width:44px!important;
    max-width:44px!important;
    margin:0!important;
  }
  body .header .language-trigger,
  body .trpn-top .language-trigger{
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:10px!important;
  }
  body .header .language-code,
  body .trpn-top .language-code{display:none!important}
  body .language-menu{
    position:fixed!important;
    top:76px!important;
    right:8px!important;
    left:8px!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - 88px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    z-index:5000!important;
  }
  body .header .menu{
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:9px!important;
    margin:0!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:10px!important;
  }
  body .header .menu span{width:24px!important;min-width:24px!important}
  body .header .mobile{
    position:fixed!important;
    top:72px!important;
    right:8px!important;
    left:8px!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - 80px)!important;
    margin:0!important;
    padding:8px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    border-radius:0 0 14px 14px!important;
    z-index:4500!important;
  }
  body .header .mobile a{
    display:flex!important;
    align-items:center!important;
    min-height:48px!important;
    padding:12px 14px!important;
    font-size:14px!important;
    line-height:1.2!important;
  }

  /* Public content sizing. */
  body .hero,
  body .hero-stacked{
    min-height:auto!important;
    padding:34px 16px 42px!important;
    grid-template-columns:1fr!important;
    gap:24px!important;
    overflow:hidden!important;
  }
  body .hero-message,
  body .hero-card,
  body .panel,
  body .card,
  body .wizard-card{width:100%!important;max-width:100%!important}
  body h1,
  body .hero h1,
  body .hero-message h1{
    font-size:clamp(29px,9.3vw,43px)!important;
    line-height:1.03!important;
    letter-spacing:-.025em!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  body h2,
  body .intro h2{
    font-size:clamp(25px,7.8vw,36px)!important;
    line-height:1.08!important;
  }
  body h3{line-height:1.18!important}
  body .hero p{font-size:15px!important;line-height:1.55!important}
  body .hero-logo,
  body .hero-main-logo,
  body .hero-reference-match{
    width:min(100%,300px)!important;
    max-width:300px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body .section{padding:40px 16px!important}
  body .intro{margin-bottom:24px!important}
  body .grid,
  body .grid3,
  body .dashboard,
  body .pillbar,
  body .service-choice-grid,
  body .service-grid,
  body .upload-grid,
  body .review-grid,
  body .partner-faq-grid,
  body .check-grid,
  body .summary-grid,
  body .form-grid{
    grid-template-columns:1fr!important;
    width:100%!important;
  }
  body .form-wrap,
  body .product{
    grid-template-columns:1fr!important;
    width:100%!important;
    gap:20px!important;
  }
  body .timeline:not(.timeline-item){grid-template-columns:1fr!important}
  body .full{grid-column:auto!important}
  body .card,
  body .panel,
  body .hero-card,
  body .wizard-card{padding:19px!important;border-radius:15px!important}
  body .card{min-height:0!important}
  body input:not([type="checkbox"]):not([type="radio"]),
  body select,
  body textarea{
    width:100%!important;
    min-height:46px!important;
    padding:12px!important;
    font-size:16px!important;
  }
  body textarea{min-height:118px!important}
  body input[type="checkbox"],body input[type="radio"]{min-width:20px;min-height:20px}
  body main .btn,
  body section .btn,
  body .hero-buttons .btn,
  body .wizard-actions .btn-wiz{
    width:100%!important;
    min-height:46px!important;
    margin:6px 0!important;
    white-space:normal!important;
    text-align:center!important;
  }
  body .hero-buttons,
  body .wizard-actions,
  body.admin-portal .page-actions{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    gap:8px!important;
  }
  body .actions{width:100%!important}
  body .filters{width:100%!important;grid-template-columns:1fr!important}
  body .filters input,body .filters select,body .filters button{width:100%!important;min-width:0!important}
  body .faq-item summary{padding:16px!important;line-height:1.3!important}
  body .faq-answer{padding:0 16px 16px!important}
  body .chat{height:min(58dvh,430px)!important}
  body .chat-row{display:grid!important;grid-template-columns:1fr!important}
  body .bubble{max-width:92%!important}

  /* Portal-style header used by Customer Portal and AI Assistant. */
  body .trpn-top{
    position:relative!important;
    top:auto!important;
    width:100%!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:9px!important;
    padding:10px 12px!important;
  }
  body .trpn-top .trpn-brand{
    grid-column:1!important;
    grid-row:1!important;
    max-width:100%!important;
    width:auto!important;
    min-width:0!important;
    justify-content:flex-start!important;
    white-space:normal!important;
    overflow:visible!important;
    font-size:13px!important;
    line-height:1.2!important;
  }
  body .trpn-top .trpn-brand img{width:68px!important;height:68px!important;max-width:68px!important}
  body .trpn-top .language-picker{grid-column:2!important;grid-row:1!important;margin-left:auto!important}
  body .trpn-top .trpn-nav{
    grid-column:1/-1!important;
    grid-row:2!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    overflow:visible!important;
  }
  body .trpn-top .trpn-nav a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:44px!important;
    padding:9px 7px!important;
    white-space:normal!important;
    text-align:center!important;
    font-size:12px!important;
    line-height:1.2!important;
  }
  body .trpn-shell{padding:20px 12px 50px!important}

  /* Marketplace listing/detail header. */
  body .top{
    max-width:100%!important;
    padding:10px 12px!important;
    gap:9px!important;
    flex-wrap:wrap!important;
  }
  body .top .logo img,body .top>a>img{max-height:52px!important;width:auto!important}
  body .top .nav{max-width:100%!important}
  body .wrap{width:100%!important;padding-left:14px!important;padding-right:14px!important}
  body .gallery{width:100%!important;max-width:560px!important;margin-left:auto!important;margin-right:auto!important}
  body .image{width:100%!important}
  body .thumbs{grid-template-columns:repeat(4,minmax(0,1fr))!important}

  /* Touch targets for footer, contact, and card links. */
  body .trpn-brand{min-height:44px!important;align-items:center!important}
  body .trpn-footer-col a,
  body .trpn-contact-item a,
  body .trpn-legal-row a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:44px!important;
    padding-top:7px!important;
    padding-bottom:7px!important;
  }
  body .check{min-height:44px!important;align-items:center!important}

  /* Premium footer. */
  body .trpn-footer-shell{padding-left:16px!important;padding-right:16px!important}
  body .trpn-footer-grid{grid-template-columns:1fr!important}
  body .trpn-footer-brand,
  body .trpn-footer-col,
  body .trpn-footer-contact{grid-column:auto!important;text-align:center!important}
  body .trpn-footer-contact{display:block!important}
  body .trpn-footer-call{width:100%!important;white-space:normal!important}
  body .trpn-trust-row{grid-template-columns:1fr!important}
  body .trpn-trust-item{width:100%!important;justify-content:flex-start!important;text-align:left!important}
  body .trpn-legal-row{justify-content:center!important}
  body .trpn-powered-wrap a{max-width:100%!important}
}

/* Admin portal: prevent a tall sticky toolbar and retain access to every action. */
@media (max-width:900px){
  body.admin-portal .top{
    position:relative!important;
    top:auto!important;
    align-items:stretch!important;
    flex-direction:column!important;
  }
  body.admin-portal .top>.brand,body.admin-portal .top>b{width:100%!important;text-align:center!important}
  body.admin-portal .top>.nav{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  body.admin-portal .top>.nav a{
    min-height:44px!important;
    padding:9px 7px!important;
    white-space:normal!important;
    text-align:center!important;
    justify-content:center!important;
    font-size:12px!important;
  }
  body.admin-portal .page-head{flex-direction:column!important}
  body.admin-portal .page-actions{width:100%!important}
  body.admin-portal .stats,body.admin-portal .grid{grid-template-columns:1fr 1fr!important}
  body.admin-portal table{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:10px!important;
  }
  body.admin-portal table th,body.admin-portal table td{min-width:115px}
}

@media (max-width:620px){
  body .wrap{padding:20px 12px 44px!important}
  body.admin-portal .stats,body.admin-portal .grid{grid-template-columns:1fr!important}
  body.admin-portal .top>.nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body .page-actions .btn{width:100%!important}
}

@media (max-width:390px){
  body .header .logo{flex-basis:92px!important;width:92px!important;max-width:92px!important}
  body .header .call-now-btn{min-width:46px!important;max-width:58px!important;padding:0 7px!important}
  body .header .language-trigger,body .header .menu{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important}
  body .trpn-top .trpn-nav{grid-template-columns:1fr!important}
  body .actions,body .checks{flex-direction:column!important}
  body .actions .btn{width:100%!important}
}

@media (orientation:landscape) and (max-height:520px){
  body .header .mobile,body .language-menu{max-height:calc(100dvh - 74px)!important}
}

@media (max-width:820px){
  body .language-picker-floating{top:max(10px,env(safe-area-inset-top))!important;right:max(10px,env(safe-area-inset-right))!important}
}