/* pns-responsive.css — mobile & tablet layer.
   The React components set grid columns via INLINE styles, so every layout
   override here must use !important to win. Additive only — no desktop changes. */

/* ══ NAVIGATION ══════════════════════════════════════════ */
/* Eight inline links cannot fit a phone. Below 1100px the row is hidden and
   the hamburger overlay is the menu. */
@media (max-width:1100px){
.pns-nav-links{display:none !important}
.pns-hide-md{display:none !important}
nav[style]{padding-left:20px !important;padding-right:20px !important}
/* Centering clips the top of the list once it overflows — start from the top instead. */
.pns-mobile-menu{justify-content:flex-start !important;padding-top:100px !important;padding-bottom:40px !important}
}
@media (max-width:640px){
.pns-mobile-menu a{font-size:24px !important}
.pns-mobile-menu{gap:18px !important;padding-top:84px !important;padding-bottom:32px !important}
.pns-mobile-menu>div:last-child{flex-direction:column !important;gap:10px !important;align-items:center}
.pns-mobile-menu>div:last-child>span{display:none}
}
@media (max-width:380px){
nav[style]{padding-left:14px !important;padding-right:14px !important}
}

/* ══ TABLET ≤1080px ══════════════════════════════════════════════ */
@media (max-width:1080px){
.pns-split,.pns-2col,.pns-hero-grid,.pns-contact-grid{grid-template-columns:1fr !important}
.pns-3col,.pns-grid-resp,.pns-grid-3-pricing{grid-template-columns:repeat(2,1fr) !important}
.pns-split,.pns-2col{gap:48px !important}
.pns-hero-grid{gap:44px !important;padding:112px 32px 64px !important}
.pns-page-hero{padding:128px 32px 68px !important}
section{padding-left:32px !important;padding-right:32px !important}
footer{padding-left:32px !important;padding-right:32px !important}
.pns-tap{min-width:44px;min-height:44px;align-items:center;justify-content:center}
.pns-ham-btn.pns-tap{flex-direction:column}
.pns-dot{position:relative}
.pns-dot::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
}

/* Image blocks are fixed-height on desktop; let them shrink once stacked */
@media (max-width:1080px){
.pns-split>div>div[style*="height: 480px"],.pns-split>div>div[style*="height: 500px"],.pns-split>div>div[style*="height: 440px"]{height:340px !important}
.pns-split>div[style*="height: 500px"]{height:400px !important}
}

/* ══ ≤900px ══════════════════════════════════════════════════════ */
@media (max-width:900px){
section{padding-top:76px !important;padding-bottom:76px !important}
.pns-page-hero{padding-top:120px !important}
footer{padding-top:60px !important}
.pns-grid-3-pricing{grid-template-columns:1fr !important;gap:16px !important}
}

/* ══ PHONE ≤640px ════════════════════════════════════════════════ */
@media (max-width:640px){
.pns-3col,.pns-grid-resp,.pns-grid-resp[style],.pns-contact-2col{grid-template-columns:1fr !important}
section{padding:64px 20px !important}
footer{padding-left:20px !important;padding-right:20px !important}
.pns-hero-grid{padding:100px 20px 56px !important;gap:36px !important}
.pns-page-hero{padding:108px 20px 56px !important}
.pns-split,.pns-2col{gap:34px !important}
.pns-stats-3col{gap:16px !important}
.pns-feature-2col{gap:14px !important}
.pns-hscroll{padding-left:20px !important;padding-right:20px !important;scroll-padding-left:20px;-webkit-overflow-scrolling:touch}
.pns-hscroll>*{flex:0 0 84% !important}
.pns-split>div>div[style*="height:"],.pns-2col>div>div[style*="height:"]{height:260px !important}
.pns-split>div[style*="height: 500px"]{height:320px !important}
}

/* ══ ≤380px ══════════════════════════════════════════════════════ */
@media (max-width:380px){
section{padding-left:16px !important;padding-right:16px !important}
footer{padding-left:16px !important;padding-right:16px !important}
.pns-hero-grid,.pns-page-hero{padding-left:16px !important;padding-right:16px !important}
}

/* ══ FAQ ACCORDION ═══════════════════════════════════════════════ */
@keyframes pnsFaqIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.pns-faq-answer{animation:pnsFaqIn .26s ease both}
@media (prefers-reduced-motion:reduce){.pns-faq-answer{animation:none}}
@media (max-width:640px){
#faq button{padding:18px 14px !important;gap:11px !important}
.pns-faq-answer{padding:0 14px 20px 48px !important}
}
@media (max-width:380px){.pns-faq-answer{padding:0 12px 18px 12px !important}}

/* ══ FORMS — stop iOS zoom-on-focus ══════════════════════════════ */
@media (max-width:640px){
#contact input,#contact select,#contact textarea{font-size:16px !important}
}

/* ══ GLOBAL OVERFLOW GUARD ═══════════════════════════════════════ */
@media (max-width:1080px){
html,body{overflow-x:hidden;max-width:100%}
img{max-width:100%}
}