@media (max-width:1024px){.site-nav{padding:0 24px}
.nav-wrapper{margin-left:24px;gap:20px}
.nav-menu li a{padding:0 12px;font-size:12px}
.nav-phone{font-size:12px}
.hero-sites-badge{display:none}}
@media (max-width:768px){:root{--container-padding:30px}
.site-nav{padding:0 20px}
.mobile-menu-toggle{display:flex}
.nav-wrapper{position:fixed;top:0;right:-100%;width:100%;max-width:100%;height:100vh;background:var(--white);flex-direction:column;align-items:stretch;justify-content:flex-start;margin:0;gap:0;padding:0;box-shadow:none;transition:right 0.4s cubic-bezier(0.4, 0, 0.2, 1);overflow-y:auto;z-index:9999}
.nav-wrapper.active{right:0}
.nav-mobile-header{display:flex !important;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--white);border-bottom:1px solid var(--border);flex-shrink:0}
.nav-mobile-header .logo{display:flex;align-items:center;gap:10px;color:var(--blue);font-weight:900;font-size:20px;font-family:var(--font-heading);text-transform:uppercase}
.nav-mobile-header .logo a{color:inherit;text-decoration:none}
.brand-logo-img{height:34px;max-width:180px}
.mobile-menu-close{background:none;border:none;font-size:42px;color:var(--charcoal);cursor:pointer;padding:0;line-height:0.8;font-weight:300}
.nav-menu{flex-direction:column;width:100%;padding:10px 0}
.nav-menu li{width:100%;border-bottom:1px solid var(--border)}
.nav-menu li:last-child{border-bottom:none}
.nav-menu li a{height:auto;padding:16px 24px;border-bottom:none;border-left:3px solid transparent;justify-content:space-between}
.nav-menu li a:hover,.nav-menu li a.active{background:var(--light);border-left-color:var(--blue);border-bottom-color:transparent}
.has-submenu .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:rgba(0,114,198,.05);margin:0;max-height:0;overflow:hidden;transition:max-height 0.3s ease-out;border-top:none}
.has-submenu.open .submenu{max-height:300px}
.has-submenu.open .submenu-arrow{transform:rotate(180deg)}
.submenu li{border-bottom:1px solid rgba(0,114,198,.1)}
.submenu li:last-child{border-bottom:none}
.submenu li a{padding:12px 24px 12px 40px;font-size:12px}
.nav-cta{width:100%;flex-direction:column;gap:12px;padding:24px 24px 0;border-top:2px solid var(--border);margin-top:12px}
.nav-phone{width:100%;text-align:center;padding:12px;background:var(--light);border-radius:4px;font-size:14px}
.wa-btn{width:100%;justify-content:center;padding:12px;font-size:13px}
.selfcheck{padding:40px 24px}
.questions{grid-template-columns:1fr !important;gap:12px !important}
.q-item{grid-column: span 1 !important;flex-direction:column;align-items:stretch;text-align:center;gap:12px}
.yn-toggle{justify-content:center}
.guided-check-grid{grid-template-columns:1fr}
.guided-question{flex-direction:column;align-items:stretch;gap:12px}
.guided-question:last-child{grid-column:1}
.question-text{font-size:13px;text-align:center}
.question-buttons{width:100%}
.guided-btn{padding:10px;font-size:12px;flex:1}
.hero{min-height:400px}
.hero-content{padding:40px 30px}
.hero h1{font-size:36px}
.hero p{font-size:14px}
.btn-primary,.btn-outline{display:block;text-align:center;margin:8px 0}
.stats-bar{grid-template-columns:repeat(2,1fr);border-bottom:1px solid rgba(255,255,255,.15)}
.stat-item{border-right:1px solid rgba(255,255,255,.15);border-bottom:none}
.stat-item:nth-child(even){border-right:none}
.stat-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.15)}
.grid-2,.grid-3,.grid-4,.yt-grid{grid-template-columns:1fr;gap:20px}
.section{padding:48px 24px}
.section-header{margin-bottom:24px}
.form-row{grid-template-columns:1fr}
.form-box{padding:24px}
.site-footer{padding:32px 30px 20px}
.footer-grid{grid-template-columns:1fr;gap:24px;margin-bottom:24px}
.footer-divline{flex-direction:column;gap:12px;text-align:center}
.div-logos{flex-wrap:wrap;justify-content:center}
.gallery-grid{grid-template-columns:repeat(2,1fr)}
.gal-item.tall{grid-row:span 1}
.proj-scroll{gap:12px}
.proj-card{min-width:180px}
.wa-float{bottom:16px;right:16px;width:48px;height:48px}
.wa-float svg{width:24px;height:24px}}
@media (max-width:480px){:root{--container-padding:20px}
.site-nav{padding:0 16px;height:56px}
.brand-logo-img{height:30px;max-width:150px}
.nav-menu{top:56px;height:calc(100vh - 56px)}
.nav-menu li a{height:auto;line-height:1.4;padding:10px 16px}
.hero{min-height:350px}
.hero-content{padding:30px 20px}
.hero h1{font-size:28px}
.hero-tag,.hero-badge{font-size:9px;padding:3px 10px}
.section{padding:32px 20px}
.section-header h2{font-size:28px}
.selfcheck{padding:30px 20px}
.yn-btn{padding:8px 16px;font-size:12px}
.stats-bar{grid-template-columns:repeat(2,1fr)}
.stat-num{font-size:24px}
.stat-label{font-size:10px}
.service-card{padding:20px 16px}
.gallery-grid{grid-template-columns:1fr}
.proj-card{min-width:160px}
.form-box{padding:20px}
.site-footer{padding:24px 20px 16px}
.footer-logo-img{height:36px;max-width:190px}
.strip-header{padding:12px 20px;flex-direction:column;gap:8px;text-align:center}
.strip-header h2{font-size:20px}}
@media (min-width:1400px){.container{max-width:1400px}
.hero-content{max-width:800px}}
@media print{.site-nav,.wa-float,.mobile-menu-toggle{display:none}
.section{page-break-inside:avoid}}

@media (max-width:480px){
.grid-2>*,.grid-3>*,.grid-4>*,.form-row>*,.gallery-grid>*{min-width:0}
.pkg-card,.service-card,.form-box{min-width:0;overflow:hidden}
.service-card p,.pkg-card p,.form-box p,.stat-label,.gal-name,.yt-label,.yt-url{overflow-wrap:anywhere;word-break:break-word}
.step-pills{gap:8px}
.step-pill{white-space:normal!important;width:100%;text-align:center;line-height:1.35;padding:9px 12px}
.design-portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.hero-exp-badge{display:none!important}
.gallery-section .section.dark{padding:14px 10px!important}
.gallery-section .filter-tabs{margin-bottom:16px;padding-bottom:6px}
.gallery-section .filter-tab{font-size:10px;padding:8px 10px}
.gallery-section .gal-name{font-size:13px;line-height:1.25}
.yt-placeholder{height:auto;min-height:160px}
}
@media (max-width:360px){
.section{padding:26px 14px}
.hero-content{padding:24px 14px!important;max-width:100%}
.hero h1{font-size:24px;line-height:1.05}
.btn-primary,.btn-outline{width:100%;margin-right:0}
.filter-tab,.step-pill{font-size:11px}
}