/* WordPress / Elementor adjustments for the VSS theme */
body.vss{font-family:var(--font)}
.elementor-section.vss-phero,.elementor-section.vss-hero,.elementor-section.vss-cta{color:#fff}
.elementor-section.vss-phero .crumbs{font-family:var(--mono);font-size:.72rem;color:#9aa1c7;letter-spacing:.08em;display:flex;gap:10px;margin-bottom:14px}
.elementor-section.vss-phero h1,.elementor-section.vss-hero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.6rem);margin:14px 0 18px}
.elementor-section.vss-hero h1 em{font-style:normal;background:linear-gradient(90deg,#c9cbe6,#9aa0e0);-webkit-background-clip:text;background-clip:text;color:transparent}
.elementor-section.vss-phero .lead,.elementor-section.vss-hero .lead{color:#c3c8e3}
.elementor-section.vss-phero .meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:10px}
.elementor-section.vss-phero .meta div{font-family:var(--mono);font-size:.72rem;color:#9aa1c7}.elementor-section.vss-phero .meta b{display:block;color:#fff;font-family:var(--font);font-size:1.1rem}
.elementor-section.dark h2,.elementor-section.dark h3,.elementor-section.dark .elementor-heading-title{color:#fff}
.elementor-section.dark .lead{color:#b8bdd9}
.elementor-section.dark .elementor-accordion .elementor-tab-title{color:#fff}
.elementor-widget-heading .elementor-heading-title{font-family:var(--font);font-weight:800;letter-spacing:-.02em;line-height:1.12}
.elementor-widget-heading h2.elementor-heading-title{font-size:clamp(1.8rem,3.4vw,2.7rem);margin-top:14px}
.elementor-widget-text-editor{color:var(--ink-2)}
.elementor-widget-text-editor .lead{margin-top:16px}
.vss-split .media{border-radius:var(--r-lg);overflow:hidden;position:relative;box-shadow:var(--shadow)}
.vss-split .media img{width:100%;aspect-ratio:5/4;object-fit:cover}
.vss-split .media .badge{position:absolute;left:18px;bottom:18px;background:rgba(7,11,28,.82);color:#fff;padding:12px 16px;border-radius:12px;font-family:var(--mono);font-size:.72rem}
.vss-split .media .badge b{display:block;font-size:1.3rem;font-family:var(--font)}
.elementor-widget-html .actions{margin-top:28px}
.vss-cta .r{display:grid;gap:12px;justify-items:start}.vss-cta .r a.tel{font-size:1.5rem;font-weight:800;color:#fff;display:flex;align-items:center;gap:10px}.vss-cta .r a.tel svg{width:22px;height:22px;color:var(--red)}
.vss-cta h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.8rem)}.vss-cta p{color:#c3c8e3;margin-top:12px;max-width:52ch}
.trust-wrap .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.trust-grid>div{padding:22px 20px;display:flex;gap:14px;align-items:center;border-left:1px solid var(--line)}.trust-grid>div:first-child{border-left:0;padding-left:0}
.trust-grid i{width:44px;height:44px;border-radius:12px;background:var(--purple-50);color:var(--navy);display:grid;place-items:center;flex:none}.trust-grid i svg{width:22px;height:22px}
.trust-grid b{display:block;font-size:.95rem}.trust-grid small{color:var(--ink-3);font-size:.8rem}
@media(max-width:980px){.trust-wrap .trust-grid{grid-template-columns:1fr 1fr}.trust-grid>div{border-left:0;padding-left:0}}
.band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;color:#fff}.band-grid b{display:block;font-size:2.4rem;font-weight:800}.band-grid span{color:#c9cbe6}
@media(max-width:760px){.band-grid{grid-template-columns:1fr 1fr}}
/* Elementor accordion styled like the site FAQ */
.vss-acc .elementor-accordion-item{border:1px solid var(--line)!important;border-radius:14px;background:#fff;margin-bottom:10px;overflow:hidden}
.vss-acc .elementor-tab-title{padding:18px 22px;font-weight:700;font-family:var(--font);color:var(--ink)}
.vss-acc .elementor-tab-title.elementor-active{color:var(--navy)}
.vss-acc .elementor-tab-content{padding:0 22px 20px;border:0!important;color:var(--ink-2)}
/* Contact Form 7 styled like the site form */
.vss-cf7{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,36px);display:grid;gap:16px;box-shadow:var(--shadow)}
.vss-quote .elementor-widget-html .form-head{margin-bottom:-6px}
.vss-cf7 .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:560px){.vss-cf7 .two{grid-template-columns:1fr}}
.vss-cf7 label{display:grid;gap:6px;font-weight:600;font-size:.88rem}
.vss-cf7 .wpcf7-form-control-wrap{display:block}
.vss-cf7 input:not([type=submit]),.vss-cf7 select,.vss-cf7 textarea{font:inherit;padding:12px 14px;border:1.5px solid var(--line-2);border-radius:10px;background:#fff;width:100%}
.vss-cf7 input:focus,.vss-cf7 select:focus,.vss-cf7 textarea:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 4px rgba(46,61,120,.12)}
.vss-cf7 input[type=submit]{display:inline-flex;padding:14px 22px;border-radius:999px;font-weight:700;background:var(--red);color:#fff;border:0;cursor:pointer;width:auto}
.vss-cf7 .wpcf7-not-valid-tip{color:var(--red-600);font-size:.8rem;font-weight:500}
.vss-cf7 .wpcf7-response-output{margin:0;padding:12px 14px;border-radius:10px;border:1px solid var(--line-2)!important;font-weight:600;color:var(--navy)}
.vss-cf7 .wpcf7-spinner{display:none}
.vss-quote .note{font-size:.8rem;color:var(--ink-3)}
.vss-static.vss-quote .wrap{padding:0}.vss-static .section{padding:0}
.vss-cf7 .wpcf7-acceptance label{display:flex;gap:10px;align-items:flex-start;font-weight:500}.vss-cf7 .wpcf7-acceptance input{width:auto;margin-top:4px}
.elementor-section .elementor-container{max-width:1180px}

/* =====================================================================
   v3.1 — Layout & responsive repair for Elementor + Hello Elementor
   (this file is printed after Elementor's CSS, so these rules win)
   ===================================================================== */

/* 1 — anchors (#quote etc.) land below the sticky header */
html{scroll-padding-top:96px}

/* 2 — "static" sections carry their own .wrap: let them span full width,
   remove Elementor's 10px column gutter so content lines up with header/footer,
   and let background images (.bg, cta image) cover the whole section */
.elementor-section.vss-static:not(.vss-quote)>.elementor-container{max-width:none!important}
.elementor-section.vss-static:not(.vss-quote)>.elementor-container>.elementor-column>.elementor-widget-wrap{padding:0!important}
.elementor-section.vss-static .elementor-container,
.elementor-section.vss-static .elementor-column,
.elementor-section.vss-static .elementor-widget-wrap,
.elementor-section.vss-static .elementor-widget-html,
.elementor-section.vss-static .elementor-widget-html>.elementor-widget-container{position:static}
.elementor-section.vss-static .elementor-widget-html{width:100%}

/* 3 — Elementor-built sections: 10px container + 10px column gutter = same 20px edge as .wrap */
.elementor-top-section:not(.vss-static)>.elementor-container,.elementor-top-section.vss-quote>.elementor-container{padding-left:10px;padding-right:10px}

/* 4 — section rhythm: Elementor writes padding:0 per section, restore the design spacing */
.elementor-section.section{padding-top:clamp(64px,9vw,112px)!important;padding-bottom:clamp(64px,9vw,112px)!important}
.elementor-section.section.tight{padding-top:clamp(44px,6vw,72px)!important;padding-bottom:clamp(44px,6vw,72px)!important}
.elementor-section.vss-quote.section{padding-top:clamp(56px,7vw,88px)!important;padding-bottom:clamp(56px,7vw,88px)!important}

/* 5 — Elementor's img{height:auto} broke every cover image */
.elementor .hero .bg img,.elementor .phero .bg img,.elementor .tile img,.elementor .card .media img,
.elementor .cam img,.elementor .mapcard img,.elementor .cta-band img{height:100%;width:100%;object-fit:cover;max-width:none}
.elementor .split .media img,.elementor .vss-split .media img{height:auto;aspect-ratio:5/4;object-fit:cover;width:100%}
.elementor .case .media img{height:auto;aspect-ratio:16/8;object-fit:cover;width:100%}
.elementor .tile img,.elementor .card .media img,.elementor .split .media img,.elementor .vss-split .media img{border-radius:0}
.elementor .fgrid .about img,.elementor .logo img{height:auto}

/* 6 — Hello Elementor reset leaks (lists, tables, pink button hovers) */
ul.menu{padding:0;margin:0 0 0 auto}
ul.checks{padding:0;margin-left:0;margin-right:0}
.compare table,.spec table{margin:0;font-size:inherit}
.compare th,.compare td,.spec th,.spec td{border-top:0;border-left:0;border-right:0}
.compare table tbody>tr:nth-child(odd)>td:not(.vss),.compare table tbody tr:hover>td:not(.vss){background-color:transparent}
.spec table tbody>tr:nth-child(odd)>td,.spec table tbody tr:hover>td{background-color:transparent}
.burger{color:var(--ink);padding:0}
.burger:hover,.burger:focus{background:var(--bg-2);color:var(--navy);border-color:var(--navy)}
.mnav .x{padding:0}.mnav .x:hover,.mnav .x:focus{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
.page-content a.btn,.page-content .card,.page-content .tile,.page-content .icard,.page-content .chips a{text-decoration:none}
.elementor-widget-text-editor p:last-child{margin-bottom:0}

/* 7 — header & topbar never overflow */
.topbar .wrap{flex-wrap:nowrap;overflow:hidden}
.topbar .live{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .r{flex:none}
.nav{gap:20px}
@media(max-width:1060px){.nav{min-height:68px}.logo img{height:42px}}
@media(max-width:560px){.nav .cta .btn{display:none}.nav{min-height:64px}}
@media(max-width:380px){.topbar .live{font-size:0}.topbar .live i{font-size:initial}.topbar .live::after{content:"24/7 live";font-size:.7rem}}

/* 8 — tablet: stack two-column Elementor sections instead of squeezing them */
@media(max-width:991px){
  .elementor-top-section>.elementor-container{flex-wrap:wrap}
  .elementor-top-section>.elementor-container>.elementor-column{width:100%!important}
  .elementor-top-section:not(.vss-static)>.elementor-container>.elementor-column+.elementor-column,.elementor-top-section.vss-quote>.elementor-container>.elementor-column+.elementor-column{margin-top:24px}
  .vss-cta .r{justify-items:start}
}

/* 9 — mobile rhythm for Elementor-built sections (they carry 70–100px desktop padding) */
@media(max-width:767px){
  .elementor-top-section:not(.vss-static):not(.section){padding-top:56px!important;padding-bottom:56px!important}
  .elementor-section.vss-phero{padding-top:48px!important;padding-bottom:48px!important}
  .elementor-section.vss-phero h1,.elementor-section.vss-hero h1{font-size:clamp(1.9rem,8vw,2.4rem)}
  .elementor-widget-heading h2.elementor-heading-title{font-size:clamp(1.6rem,7vw,2rem)}
  .elementor-widget:not(:last-child){margin-bottom:16px}
  .lead,.elementor-widget-text-editor .lead{font-size:1.02rem}
  .actions{gap:10px}
  .actions .btn{flex:1 1 auto;justify-content:center}
}

/* 10 — home hero / panels on small screens */
@media(max-width:980px){.hero .wrap{gap:36px}.hero .stats{grid-template-columns:repeat(4,auto)}}
@media(max-width:600px){
  .hero .stats{grid-template-columns:1fr 1fr;gap:16px 12px}
  .panel{font-size:.66rem}
  .feed div{grid-template-columns:52px 1fr;gap:6px 10px}
  .feed div .tag{grid-column:2;justify-self:start}
  .spec{padding:18px}
  .spec .row{grid-template-columns:52px 1fr;gap:6px 10px}
  .spec .row .tag{grid-column:2;justify-self:start}
  .spec .kv{grid-template-columns:1fr}
  .spec .grid9{grid-template-columns:repeat(4,1fr)}
  .kv3{grid-template-columns:1fr 1fr}
  .case dl{grid-template-columns:1fr}.case dt{padding-top:6px}
  .steps div{padding:24px 20px}
  .band .wrap,.band-grid{gap:24px 16px}.band b,.band-grid b{font-size:1.9rem}
  .compare{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .compare table{min-width:520px}
  .map,.mapcard{aspect-ratio:4/3}
  .cta-band .r a.tel,.vss-cta .r a.tel{font-size:1.3rem}
  .btn{white-space:normal;text-align:center}
}

/* 11 — floating buttons: compact on phones so they don't cover content */
@media(max-width:760px){
  .chat-btn{font-size:0;gap:0;padding:13px;bottom:78px;right:12px}
  .chat-btn svg{width:24px;height:24px}
  .sticky-bar{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
}

/* 12 — mega menu fits between 1060px and 1240px */
@media(max-width:1240px){.dd-in.mega4,.dd-in.mega3{padding:18px 18px 12px;gap:0 16px}.dd-in .col a,.dd-in a.plain{font-size:.85rem}}

/* 13 — footer on tablet/mobile */
@media(max-width:900px){.fgrid.top .about{grid-column:1/-1}}
@media(max-width:520px){footer.site{padding:48px 0 calc(28px + 64px)}.fbottom{flex-direction:column}.fbottom .legal{line-height:1.9}}

/* 14 — Contact Form 7 on phones */
@media(max-width:560px){.vss-cf7{padding:20px}.vss-cf7 input[type=submit]{width:100%;justify-content:center}}
.vss-cf7 input[type=submit]{width:100%}
/* 15 — shorter footer on phones; sticky bar space lives in the footer (no white strip) */
@media(max-width:760px){body.vss{padding-bottom:0}}
@media(max-width:520px){
  .fgrid.top{grid-template-columns:1fr 1fr;gap:28px 18px}
  .fgrid.svc{grid-template-columns:1fr 1fr;gap:28px 18px}
  .fgrid.svc a,.fgrid.top a{font-size:.84rem;line-height:1.4}
  .fgrid h4{font-size:.7rem}
}
/* 16 — tablet proportions for stacked media, tiles; side social bar only where there is room */
@media(max-width:991px){
  .tile{aspect-ratio:4/3}
  .elementor .split .media img,.elementor .vss-split .media img{aspect-ratio:16/10}
}
@media(max-width:560px){.tile{aspect-ratio:4/5}.grid.g2 .tile{aspect-ratio:4/3}}
@media(max-width:1240px){.social-side{display:none}}