/* WebSolutions v4.1 — consolidated responsive layer */
html{scroll-behavior:smooth}
html,body{width:100%;max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,svg,video{max-width:100%;height:auto}
.wrap{width:min(1220px,calc(100% - 64px))!important;margin-inline:auto!important}
section,main,header,footer,.wrap>*{min-width:0}
h1,h2,h3,h4,p,a{overflow-wrap:break-word}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* footer social icons */
.footer-socials{display:flex;gap:9px;margin:12px 0 14px}
.footer-socials a{
 width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
 border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);
 color:#fff;transition:.2s ease
}
.footer-socials a:hover{transform:translateY(-2px);background:rgba(255,255,255,.13)}
.footer-socials svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}
.footer-socials a[aria-label*="LinkedIn"] svg{fill:currentColor;stroke:none}

/* classic hamburger */
.mobile-nav-toggle{
 display:none;width:46px;height:46px;flex:0 0 46px;border-radius:13px;
 border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.07);
 position:relative;cursor:pointer
}
.mobile-nav-toggle span,.mobile-nav-toggle::before,.mobile-nav-toggle::after{
 content:"";position:absolute;left:50%;width:21px;height:2px;background:#fff;border-radius:2px;
 transform:translateX(-50%);transition:.2s ease
}
.mobile-nav-toggle::before{top:15px}.mobile-nav-toggle span{top:22px}.mobile-nav-toggle::after{top:29px}
.mobile-nav-toggle.open span{opacity:0}
.mobile-nav-toggle.open::before{top:22px;transform:translateX(-50%) rotate(45deg)}
.mobile-nav-toggle.open::after{top:22px;transform:translateX(-50%) rotate(-45deg)}

@media(max-width:1100px){
 .wrap{width:min(1220px,calc(100% - 44px))!important}
 body{padding-top:90px!important}
 .nav{
   position:fixed!important;inset:0 0 auto 0!important;z-index:3000!important;
   width:100%!important;min-height:90px!important;margin:0!important;padding:11px 22px!important;
   display:grid!important;grid-template-columns:minmax(0,1fr) 46px!important;align-items:center!important;gap:14px!important;
   background:rgba(13,7,24,.96)!important;border-bottom:1px solid rgba(255,255,255,.10)!important;
   box-shadow:0 10px 30px rgba(13,7,24,.18)!important;
   backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
 }
 .nav .logo{width:min(285px,72vw)!important;max-width:285px!important;height:auto!important}
 .mobile-nav-toggle{display:block!important;justify-self:end}
 .navlinks{
   display:none!important;position:fixed!important;top:90px!important;left:16px!important;right:16px!important;
   width:auto!important;max-height:calc(100dvh - 108px)!important;overflow:auto!important;
   flex-direction:column!important;align-items:stretch!important;gap:4px!important;padding:12px!important;margin:0!important;
   border:1px solid rgba(255,255,255,.14)!important;border-radius:17px!important;
   background:rgba(13,7,24,.985)!important;box-shadow:0 22px 60px rgba(0,0,0,.38)!important
 }
 .navlinks.open{display:flex!important}
 .navlinks a{display:block!important;width:100%!important;padding:12px!important;margin:0!important;border-radius:10px!important;font-size:15px!important}
 .navlinks .btn{text-align:center!important;margin-top:4px!important}
 .hero-grid,.service-hero-grid,.page-hero-grid,.audit-grid,.about-expertise,.contact-grid,.article-layout,.hosting-card,.split{
   grid-template-columns:1fr!important;gap:34px!important
 }
 .services,.priority-grid,.ecosystem-grid,.projects,.testimonials,.method,.method-row,.client-grid,.insights,.blog-grid,.development-grid,.proof-grid,.category-grid{
   grid-template-columns:repeat(2,minmax(0,1fr))!important
 }
 .section-head{display:block!important}
 .section-head>p{max-width:760px!important;margin-top:14px!important}
 .hero-orbit{min-height:250px!important}
 .footgrid{grid-template-columns:1.25fr .75fr .75fr!important;gap:28px!important}
}

@media(max-width:780px){
 .wrap{width:min(1220px,calc(100% - 34px))!important}
 body{padding-top:86px!important}
 .nav{min-height:86px!important;padding:9px 17px!important}
 .nav .logo{width:min(265px,72vw)!important;max-width:265px!important}
 .navlinks{top:86px!important}
 .hero,.services-hero,.clients-hero,.dev-hero{min-height:0!important}
 .hero-grid,.service-hero-grid,.page-hero-grid{padding-top:34px!important;padding-bottom:50px!important}
 .hero h1,.service-hero-grid h1,.page-hero-grid h1,.page-hero h1,.article-hero h1{
   font-size:clamp(38px,9vw,52px)!important;line-height:1.01!important;letter-spacing:-.035em!important
 }
 .hero p,.service-hero-grid p,.page-hero-grid p,.page-hero p{font-size:17px!important;line-height:1.55!important}
 .section,.priority,.ecosystem,.faq,.service-method,.services-cta,.final-cta,.hosting-promo,.clients-main,.dev-main,.project-section,.proof-band{
   padding-top:54px!important;padding-bottom:54px!important
 }
 .section-head h2,.split h2,.proof-card h2,.cta-card h2{font-size:clamp(30px,7vw,40px)!important;line-height:1.07!important}
 .services,.priority-grid,.ecosystem-grid,.projects,.testimonials,.method,.method-row,.client-grid,.insights,.blog-grid,.development-grid,.proof-grid,.category-grid,.project-grid{
   grid-template-columns:1fr!important
 }
 .actions{display:grid!important;grid-template-columns:1fr!important}
 .actions .btn,.hero .btn,.service-hero-grid .btn{width:100%!important;text-align:center!important}
 .hero-orbit{display:none!important}
 .cta-card,.hosting-mini-card,.hosting-card{
   display:grid!important;grid-template-columns:1fr!important;gap:18px!important;padding:26px 21px!important;border-radius:22px!important
 }
 .cta-card .btn,.services-cta .btn{width:100%!important;text-align:center!important}
 .form-grid,.field-grid{grid-template-columns:1fr!important}
 input,textarea,select{font-size:16px!important}
 .footer{padding:28px 0 20px!important}
 .footgrid{grid-template-columns:1fr 1fr!important;gap:20px 16px!important}
 .footgrid>div:first-child{grid-column:1/-1!important}
 .footgrid>div:first-child p{font-size:13px!important;line-height:1.45!important;max-width:45ch!important;margin:8px 0!important}
 .footgrid img{width:min(230px,72vw)!important}
 .footgrid h4{font-size:13px!important;margin:0 0 8px!important}
 .footgrid a{font-size:13px!important;margin:5px 0!important;line-height:1.3!important}
 .legal{padding-top:14px!important;margin-top:18px!important;font-size:11px!important}
 .ws-wa-float{right:12px!important;bottom:12px!important;width:50px!important;height:50px!important;padding:0!important;justify-content:center!important}
 .ws-wa-float span{display:none!important}

 /* projects: approved visual on home */
 .project-showcase .projects{grid-template-columns:1fr!important;gap:16px!important}
 .project-v4{min-height:0!important;grid-template-rows:auto 1fr!important}
 .project-v4-head{min-height:0!important;grid-template-columns:60px minmax(0,1fr)!important;padding:19px!important;gap:15px!important}
 .project-v4-icon{width:54px!important;height:54px!important}
 .project-v4-heading h3{font-size:21px!important;line-height:1.1!important}
 .project-v4-body{min-height:0!important;padding:17px 19px 19px!important}
 .project-more-btn{width:100%!important}
 .cta-card-v4{grid-template-columns:minmax(0,1fr) 54px!important;text-align:left!important}
 .cta-card-v4 h2{font-size:40px!important}
 .cta-v4-arrow{width:54px!important;height:54px!important}

 /* blog/article: eliminate giant empty gaps */
 .article-hero{padding-bottom:28px!important}
 .article-hero .article-wrap{padding:24px 0 10px!important}
 .article-body{padding:38px 0!important}
 .article-body section{margin:0 0 34px!important;padding:0!important;min-height:0!important}
 .article-body h2{font-size:clamp(28px,8vw,35px)!important;line-height:1.08!important;margin:0 0 13px!important}
 .article-body p,.article-body li{font-size:16px!important;line-height:1.68!important}
}

@media(max-width:480px){
 .wrap{width:min(1220px,calc(100% - 28px))!important}
 body{padding-top:82px!important}
 .nav{min-height:82px!important;padding:8px 14px!important}
 .nav .logo{width:min(245px,70vw)!important;max-width:245px!important}
 .navlinks{top:82px!important;left:12px!important;right:12px!important}
 .hero h1,.service-hero-grid h1,.page-hero-grid h1,.page-hero h1,.article-hero h1{font-size:clamp(36px,11vw,47px)!important}
 .section,.priority,.ecosystem,.faq,.service-method,.services-cta,.final-cta,.hosting-promo,.clients-main,.dev-main,.project-section,.proof-band{padding-top:46px!important;padding-bottom:46px!important}
 .service-card,.priority-card,.eco-card,.quote,.article,.step,.method-mini,.client-card,.contact-card,.scope-card,.level-card,.blog-card,.post-card,.project-card{padding:20px!important}
 .project-v4-head{grid-template-columns:52px minmax(0,1fr)!important;padding:17px!important}
 .project-v4-icon{width:48px!important;height:48px!important}
 .project-v4-heading span{font-size:9px!important}
 .project-v4-heading h3{font-size:19px!important}
 .project-v4-body{grid-template-columns:minmax(0,1fr) 42px!important;padding:15px 17px 17px!important}
 .project-v4-arrow{width:42px!important;height:42px!important}
 .footgrid{gap:17px 11px!important}
 .footer-socials{margin-top:10px!important}
}


/* v4.3 — unified footer/copyright */
.footer .ws-global-legal{
  display:block;
  width:100%;
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.68);
  font-size:12px;
  line-height:1.45;
  text-align:left;
}
@media(max-width:780px){
  .footer .ws-global-legal{
    margin-top:16px!important;
    padding-top:13px!important;
    font-size:11px!important;
    text-align:center!important;
  }
}