/* Virtual Networking Solutions Inc. | Balanced premium sizing 2026-10-23
   Scoped refinements only: no page rebuilding, no image enlargement, preserves content. */
:root{--vns-gold:#ffcc36}
html{scroll-behavior:smooth}
body{font-size:16px!important;line-height:1.62!important;overflow-x:clip}
body h1,body h2,body h3,body h4{line-height:1.2!important;letter-spacing:-.023em!important}
body h1{font-size:clamp(34px,3vw,46px)!important}
body h2{font-size:clamp(27px,2.5vw,36px)!important}
body h3{font-size:clamp(20px,1.7vw,24px)!important}
p{margin-bottom:15px;line-height:1.63}
.wrap,.site-footer .wrap{width:min(1240px,calc(100% - 48px))!important}
.section{padding:50px 0!important}
.eyebrow{font-size:12px!important;letter-spacing:.12em;margin-bottom:9px}
.intro{max-width:780px;margin:0 auto 27px}
.intro>p:not(.eyebrow){font-size:16px!important}
.btn{min-height:44px!important;padding:10px 18px!important;gap:9px!important;font-size:14px!important;border-radius:9px!important;box-shadow:0 5px 13px rgba(18,63,99,.10)!important;transition:transform .22s ease,box-shadow .22s ease,background .22s ease!important}
.btn:hover{transform:translateY(-2px)!important;box-shadow:0 8px 19px rgba(18,63,99,.16)!important}
.call-btn{background:linear-gradient(120deg,#ffdf68,#ffc535)!important;box-shadow:0 5px 14px rgba(201,143,35,.17)!important;white-space:nowrap}
.call-btn:hover{box-shadow:0 8px 19px rgba(201,143,35,.25)!important}
.header-inner{min-height:78px!important;gap:14px!important}
.brand{width:214px!important}
.nav{gap:19px!important}
.nav>a,.drop>summary{font-size:14px!important}
.nav>.btn,.header-call{min-height:42px!important;padding:9px 14px!important;font-size:13.5px!important}
.header-contact{gap:0!important}
.header-phone{display:none!important}
.drop-menu{width:290px}
.drop-menu a{font-size:14px}
.mobile-panel a{font-size:14px}
.mobile-panel .call-btn{display:inline-flex!important;width:max-content;max-width:100%}
/* Desktop hero: medium height, uncropped native-ratio image at original or smaller resolution. */
.hero{padding:0!important;background:#092c49!important}
.hero-shell{position:relative!important;display:block!important;height:clamp(380px,32vw,510px)!important;max-height:510px;overflow:hidden;background:linear-gradient(115deg,#092b49 5%,#104b6e 100%)!important}
.hero-media{position:absolute!important;inset:0 0 0 auto!important;width:69%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;overflow:hidden!important}
.hero-banner{display:block!important;width:auto!important;max-width:100%!important;height:100%!important;max-height:100%!important;object-fit:contain!important;object-position:right center!important;image-rendering:auto}
.hero-shade{display:block!important;position:absolute!important;inset:0!important;pointer-events:none!important;background:linear-gradient(90deg,#092b49 0%,rgba(9,43,73,.99) 25%,rgba(9,43,73,.87) 42%,rgba(9,43,73,.37) 63%,rgba(9,43,73,0) 88%)!important}
.hero-content{position:absolute!important;inset:0!important;width:min(1240px,calc(100% - 48px))!important;height:100%!important;margin:0 auto!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;background:none!important;padding:0!important}
.hero-copy{width:min(550px,51%)!important;padding:12px 0!important}
body .hero h1{font-size:clamp(34px,3.15vw,47px)!important;line-height:1.15!important;margin:0 0 15px!important;letter-spacing:-.028em!important}
.hero .eyebrow{font-size:12px!important;margin-bottom:12px}
.hero .lead{font-size:clamp(16px,1.32vw,19px)!important;line-height:1.46!important;margin-bottom:12px!important;font-weight:550}
.hero-copy>p:not(.eyebrow):not(.lead){font-size:15px!important;line-height:1.52!important;margin-bottom:0!important}
.hero .actions{gap:9px!important;margin-top:18px!important;flex-wrap:wrap!important}
.hero .btn{font-size:13px!important;min-height:43px!important;padding:9px 14px!important}
.hero+.section{padding-top:48px!important}
/* Five service cards remain arranged three on top, two below. */
.home-services .cards{gap:16px!important}
.home-services .card{min-height:238px!important;padding:23px 25px!important;border-radius:16px!important;box-shadow:0 7px 19px rgba(18,63,99,.08)!important;transition:transform .23s ease,box-shadow .23s ease!important}
.home-services .card:before{width:44px!important;height:44px!important;border-radius:12px!important;font-size:17px!important;box-shadow:0 6px 13px rgba(18,63,99,.12)!important}
.home-services .card:after{width:160px!important;height:160px!important;right:-90px!important;top:-80px!important}
.home-services .card h3{font-size:20px!important;line-height:1.28!important;margin:17px 0 9px!important}
.home-services .card p{font-size:15px!important;line-height:1.53!important;margin-bottom:13px!important}
.home-services .card a{font-size:14px!important}
.home-services .card:hover,.home-services .card:focus-within{transform:translateY(-3px)!important;box-shadow:0 12px 24px rgba(18,63,99,.13)!important}
/* Confidence cards: refined medium sizes without changing copy or palette. */
.confidence-section .intro>p:not(.eyebrow){font-size:16px!important}
.confidence-grid{gap:17px!important;margin:27px 0 21px!important}
.confidence-card{min-height:230px!important;padding:23px 24px!important;border-radius:16px!important;box-shadow:0 8px 23px rgba(0,18,32,.12)!important;transition:transform .23s ease,box-shadow .23s ease!important}
.confidence-card:hover{transform:translateY(-3px)!important;box-shadow:0 12px 26px rgba(0,18,32,.17)!important}
.confidence-symbol{width:46px!important;height:46px!important;border-radius:13px!important;font-size:25px!important}
.confidence-kicker{font-size:11px!important;letter-spacing:.07em!important;margin:17px 0 7px!important}
body .confidence-card h3{font-size:21px!important;margin:0 0 10px!important}
.confidence-card p:last-child{font-size:14.5px!important;line-height:1.57!important}
.confidence-cta{font-size:16px!important;gap:14px!important;padding:6px 0 0!important}
/* Existing middle photos untouched; lower support banner rendered in original 4:3 ratio. */
.split{gap:34px!important}
.section .split p,.section .split li{font-size:16px!important}
.steps{gap:23px!important}
.step h3{font-size:20px!important}
.step p{font-size:15px!important}
.faq{max-width:950px}
.faq summary{font-size:16px!important;padding:16px 19px!important}
.faq details p{font-size:15px!important}
.contact-grid{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)!important;gap:33px!important;align-items:start!important}
.contact-photo{width:100%!important;height:auto!important;aspect-ratio:4 / 3!important;max-height:390px!important;object-fit:contain!important;object-position:center!important;border-radius:14px!important}
.contact-grid h2{font-size:clamp(27px,2.5vw,35px)!important}
.contact-grid p{font-size:16px}
.contact-call-actions{display:flex;gap:12px;margin:7px 0 17px}
.contact-call-actions .call-btn{font-size:14px!important;min-height:43px!important}
.form-grid{gap:12px 15px!important}
.field{font-size:13px!important}
.field input,.field select,.field textarea{min-height:42px!important;padding:8px 11px!important;font-size:15px!important}
.field textarea{min-height:90px!important}
.consent,.help,.form-status{font-size:12px!important}
/* Elegant compact footer with location marker, one telephone CTA per location. */
.site-footer{padding:39px 0 0!important;border-top:3px solid #ffcf51!important}
.site-footer .footer-grid{grid-template-columns:1.25fr 1.2fr .75fr 1.25fr!important;gap:26px!important}
.site-footer .footer-brand{width:214px!important;padding:8px!important;border-radius:10px!important;margin-bottom:14px!important}
.site-footer h3{font-size:17px!important;margin-bottom:13px!important;letter-spacing:-.012em}
.site-footer p,.site-footer a{font-size:14px!important;line-height:1.57!important;margin-bottom:9px!important}
.site-footer .footer-call{display:inline-flex!important;font-size:13px!important;min-height:42px!important;padding:9px 15px!important;margin:2px 0 15px!important;overflow-wrap:normal!important}
.site-footer .footer-address{font-style:normal;display:flex;gap:10px;align-items:flex-start;margin:1px 0 12px;font-size:14px;line-height:1.7;color:#e0eff8}
.site-footer .footer-address svg{flex:0 0 21px;width:21px;height:21px;margin-top:2px;color:#ffcf51}
.site-footer .footer-address span{min-width:0;overflow-wrap:normal}
.site-footer .footer-bottom{margin-top:30px!important;padding:17px 0!important;gap:12px!important;font-size:12px!important}
.site-footer .footer-bottom a{font-size:12px!important}
.page-intro{padding:43px 0!important}
.page-intro h1{font-size:clamp(31px,3vw,43px)!important}
.page-intro p{font-size:16px!important}
.content-grid{gap:33px!important}
.service-cards .card,.about-values article{padding:23px!important}
.service-cards .card h3{font-size:21px!important}
.service-cards .card p{font-size:15px!important}
.cta-panel{padding:26px!important}
@media(min-width:801px) and (max-width:1120px){
 .mobile-nav{display:block!important;margin-left:auto!important}
 .nav,.nav.open{display:none!important}
 .header-contact{display:flex!important}
 .brand{width:200px!important}
 .hero-copy{width:min(490px,57%)!important}
 .hero-content{width:calc(100% - 40px)!important}
 .hero-shell{height:clamp(385px,42vw,450px)!important}
 body .hero h1{font-size:clamp(32px,3.5vw,40px)!important}
 .hero .lead{font-size:16px!important}
 .hero-copy>p:not(.eyebrow):not(.lead){font-size:14px!important}
 .hero .btn{padding:8px 11px!important;font-size:12.5px!important}
 .footer-grid{gap:18px!important}
}
@media(max-width:800px){
 .wrap,.site-footer .wrap{width:calc(100% - 34px)!important}
 .section{padding:40px 0!important}
 .header-inner{min-height:73px!important}
 .brand{width:200px!important}
 .header-contact{display:none!important}
 .mobile-nav{display:block!important;margin-left:auto!important}
 .nav,.nav.open{display:none!important}
 .hero-shell{display:flex!important;flex-direction:column!important;height:auto!important;max-height:none!important}
 .hero-media{order:1!important;position:relative!important;inset:auto!important;width:100%!important;height:auto!important;display:block!important}
 .hero-banner{width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important}
 .hero-shade{display:none!important}
 .hero-content{order:2!important;position:relative!important;inset:auto!important;display:block!important;width:100%!important;height:auto!important;padding:27px 23px 30px!important;margin:0!important;background:linear-gradient(120deg,#092b49,#165576)!important}
 .hero-copy{width:100%!important;padding:0!important}
 body .hero h1{font-size:clamp(30px,5.8vw,39px)!important;line-height:1.17!important}
 .hero .lead{font-size:17px!important}
 .hero-copy>p:not(.eyebrow):not(.lead){font-size:14px!important}
 .hero .actions{gap:10px!important;margin-top:16px!important}
 .hero .btn{font-size:13px!important}
 .hero+.section{padding-top:39px!important}
 .home-services .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .home-services .card:nth-child(n){grid-column:auto!important;min-height:225px!important}
 .home-services .card:last-child{grid-column:1/-1!important}
 .confidence-grid{grid-template-columns:1fr!important;gap:14px!important}
 .confidence-card{min-height:0!important}
 .contact-grid{grid-template-columns:1fr!important;gap:24px!important}
 .contact-photo{width:100%!important;max-height:340px!important;object-fit:contain!important}
 .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:25px!important}
 .footer-grid>div:first-child{grid-column:auto!important}
 .site-footer .footer-bottom{margin-top:23px!important}
}
@media(max-width:540px){
 .wrap,.site-footer .wrap{width:calc(100% - 30px)!important}
 .section{padding:35px 0!important}
 .brand{width:183px!important}
 .hero-content{padding:25px 18px 28px!important}
 body .hero h1{font-size:clamp(29px,8.5vw,37px)!important}
 .hero .actions .btn{flex:0 1 auto!important;min-width:0!important}
 .home-services .cards{grid-template-columns:1fr!important;gap:14px!important}
 .home-services .card:nth-child(n){grid-column:1!important;min-height:0!important;padding:21px!important}
 .home-services .card h3{font-size:19px!important}
 .confidence-card{padding:21px!important}
 .footer-grid{grid-template-columns:1fr!important;gap:23px!important}
 .contact-photo{max-height:300px!important}
 .site-footer .footer-bottom{display:flex;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
 .home-services .card,.confidence-card,.btn,.contact-grid .phone-line{transition:none!important}
 .call-btn:before{transition:none!important;transform:none!important;display:none!important}
}


/* Contact CTA: show only one call action rather than adjacent duplicate phone number. */
.contact-call-actions .phone-line{display:none!important}
.contact-call-actions .call-btn{display:inline-flex!important}