/* Four Seasons — v9 design system, forked from the Wix Velo repo by site/fork-css.mjs.
DO NOT hand-edit: re-run the fork script instead.
Source: ~/4seasonsconstruction/src/styles/global.css (49866 bytes)
Forked: 2026-07-27T16:47:39.253Z
Wix component ids rewritten to semantic classes; fonts self-hosted. */
/* Montserrat 600/700/800 inlined (was a render-blocking @import chain: embed CSS -> css2 -> woff2). font files still load async w/ swap. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wdh.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wlh.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wdh.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wlh.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wdh.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wlh.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
body{--bvg-css-src:repo}
/* collapse their fixed grid tracks (rows 2-4 of the section grid) so the gap actually closes */
.comp-mq9p22ds-container{grid-template-rows:auto 0 0 0 auto !important}
/* hero: navy gradient band instead of black */
/* vertical padding only — Wix's responsive horizontal padding keeps the H1 aligned with body content */
/* the black band is a solid-black .inner-box child inside the hero — let the gradient show */
.bvg-hero .inner-box,.bvg-hero .wixui-box{background:transparent !important}
/* hero H1: white Poppins */
.bvg-hero h1,.bvg-hero h1{color:#fff !important;font-family:poppins-semibold,poppins,sans-serif !important;font-size:44px !important;line-height:1.25 !important}
.bvg-hero h1 *,.bvg-hero h1 *{color:#fff !important;font-family:inherit !important;font-size:inherit !important}
/* B. content-section classes (scoped to the body strip .bvg-body) */
.bvg-body .bvg-lead{font-size:19px;color:#333;max-width:60ch;line-height:1.65}
.bvg-body ul.bvg-svc-grid{list-style:none;padding:0;margin:18px 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bvg-body .bvg-svc-grid li{background:#f4f8fb;border-radius:12px;padding:14px 18px}
.bvg-body .bvg-svc-grid a{font-weight:600;color:#1D5E94;text-decoration:none}
.bvg-body .bvg-trust{display:flex;flex-wrap:wrap;gap:16px;margin:18px 0}
.bvg-body .bvg-trust-box{background:#fff;border:1px solid #e3ebf2;border-radius:14px;padding:20px;flex:1;min-width:210px}
.bvg-body .bvg-trust-box h3{color:#14365c;font-size:18px;font-family:poppins-semibold,poppins,sans-serif;margin:0 0 8px}
.bvg-body details.bvg-acc{border:1px solid #e3ebf2;border-radius:10px;margin:10px 0;padding:4px 16px;background:#fff}
.bvg-body details.bvg-acc summary{font-weight:600;color:#14365c;cursor:pointer;padding:10px 0;list-style-position:outside}
.bvg-body .bvg-review-band{background:#f4f8fb;border-radius:14px;padding:24px;text-align:center;margin:18px 0}
.bvg-body .bvg-stars{color:#C66F27;font-size:22px;letter-spacing:2px}
.bvg-body .bvg-dir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}
.bvg-body .bvg-dir-card{background:#fff;border:1px solid #e3ebf2;border-radius:14px;padding:18px}
.bvg-body .bvg-dir-card h3{font-size:16px;color:#1D5E94;font-family:poppins-semibold,poppins,sans-serif;margin:0 0 6px}
.bvg-body .bvg-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.bvg-body .bvg-route{background:#f4f8fb;border-radius:10px;padding:14px 16px}
.bvg-body .bvg-route strong{color:#14365c}
.bvg-body .bvg-band--dark{background:linear-gradient(135deg,#14365c,#1D5E94);color:#fff;border-radius:16px;padding:36px 28px;text-align:center;margin:24px 0}
.bvg-body .bvg-band--dark h2{color:#fff;font-family:poppins-semibold,poppins,sans-serif}
.bvg-body .bvg-btn{display:inline-block;background:#C66F27;color:#fff !important;border-radius:999px;padding:14px 30px;font-weight:600;text-decoration:none}
.bvg-body .bvg-band--light{background:#f4f8fb;border-radius:16px;padding:28px;margin:24px 0}
/* mobile (<=1000px): single-column everything, tighter padding */
@media (max-width:1000px){
.bvg-hero{padding-top:32px !important;padding-bottom:32px !important}
.bvg-hero h1,.bvg-hero h1{font-size:30px !important}
.bvg-body ul.bvg-svc-grid,
.bvg-body .bvg-dir-grid,
.bvg-body .bvg-routes{grid-template-columns:1fr}
.bvg-body .bvg-trust{flex-direction:column}
.bvg-body .bvg-trust-box{min-width:0}
.bvg-body .bvg-lead{font-size:17px}
.bvg-body .bvg-band--dark{padding:28px 18px}
.bvg-body .bvg-band--light{padding:20px 16px}
}
.bvg-body .bvg-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}
.bvg-body .bvg-photo{width:100%;height:220px;object-fit:cover;border-radius:14px;display:block}
@media (max-width:1000px){.bvg-body .bvg-photo-grid{grid-template-columns:1fr}.bvg-body .bvg-photo{height:240px}}
@media (max-width:1000px){
.bvg-hero{padding-top:44px !important;padding-bottom:48px !important}
.bvg-hero h1{font-size:32px !important}
.bvg-hero-form{background:#fff !important;border-radius:16px;box-shadow:0 14px 40px rgba(13,38,66,.18);padding:18px}
}
/* bvg-v4: full-width zone + polish */
.bvg-body .wixui-rich-text{overflow:visible !important}
.bvg-body p{font-size:17px;line-height:1.65}
.bvg-body h2{font-size:40px !important;line-height:1.15;margin-top:56px;margin-bottom:20px}
.bvg-body h3{margin-bottom:8px}
summary::-webkit-details-marker{display:none}
.bvg-body details.bvg-acc summary{list-style:none;position:relative;padding-right:34px}
.bvg-body details.bvg-acc summary:after{content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:22px;color:#C66F27;font-weight:600}
.bvg-body details.bvg-acc[open] summary:after{content:'\2212'}
@media (min-width:1001px){
/* bvg-v5: everything from the trust section down breaks out to full container width */
.bvg-body .bvg-trust, .bvg-body .bvg-trust ~ *{width:calc(100% + 486px);max-width:none}
.bvg-body .bvg-trust ~ p, .bvg-body .bvg-trust ~ h3{width:auto;max-width:880px}
.bvg-body .bvg-trust ~ details.bvg-acc{width:calc(100% + 486px);max-width:1120px}
.bvg-body .bvg-photo{height:300px}
.bvg-body .bvg-review-band{text-align:center;padding:34px}
.bvg-body .bvg-review-band p{font-size:19px;max-width:none}
.bvg-body .bvg-band--dark{padding:56px 40px}
.bvg-body .bvg-band--dark h2{margin-top:0}
.bvg-body .bvg-band--light{padding:36px}
.bvg-body iframe[src*='google.com/maps']{width:100% !important;height:430px !important;border-radius:16px}
.bvg-body .bvg-trust .bvg-trust-box{padding:22px}
}
@media (min-width:1001px){.bvg-body .bvg-photo--side{float:right;width:420px;height:330px;object-fit:cover;border-radius:16px;margin:0 0 18px 26px}}
@media (max-width:1000px){.bvg-body .bvg-photo--side{width:100%;height:240px;object-fit:cover;border-radius:14px;margin:12px 0}}
/* bvg-hero-v7: Bluebird-exact. Full-bleed steel-blue band, Montserrat 65px H1
with eyebrow + orange underline, form card overhanging the band. Palette:
navy #0B2432, orange #ED833C, hero blue #3E6C94. */
@media (min-width:1001px){
.bvg-hero{
background:linear-gradient(135deg,#46759e 0%,#3E6C94 55%,#365f83 100%) !important;
width:100% !important;margin-left:0 !important;border-radius:0 !important;
padding-top:64px !important;padding-bottom:150px !important;overflow:visible !important;
}
.bvg-hero h1{font-family:Montserrat,poppins,sans-serif !important;font-size:62px !important;font-weight:800 !important;line-height:1.08 !important;max-width:640px;color:#fff !important}
.bvg-hero h1:before{content:attr(data-bvg-eyebrow);display:block;width:fit-content;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(11,36,50,.45);border-radius:6px;padding:7px 14px;margin-bottom:22px}
.bvg-hero h1:after{content:'';display:block;width:120px;height:6px;border-radius:3px;background:#ED833C;margin-top:24px}
.bvg-hero-form{background:#fff !important;border-radius:10px;box-shadow:0 20px 55px rgba(11,36,50,.3);padding:26px 26px 18px;position:relative !important;z-index:5}
}
@media (max-width:1000px){
.bvg-hero{background:linear-gradient(135deg,#46759e,#365f83) !important;border-radius:0 !important;padding-top:40px !important;padding-bottom:44px !important}
.bvg-hero h1{font-family:Montserrat,poppins,sans-serif !important;font-size:34px !important;font-weight:800 !important;color:#fff !important}
.bvg-hero h1:after{content:'';display:block;width:90px;height:5px;border-radius:3px;background:#ED833C;margin-top:14px}
.bvg-hero-form{background:#fff !important;border-radius:12px;box-shadow:0 14px 40px rgba(11,36,50,.25);padding:18px}
}
/* bvg-v7 palette: swap brand blues/orange to Bluebird tokens on /nj/ pages */
.bvg-body h2{font-family:Montserrat,poppins,sans-serif !important;font-weight:800 !important;color:#0B2432}
.bvg-body .bvg-band--dark{background:#0B2432 !important}
.bvg-body .bvg-btn{background:#ED833C !important}
.bvg-body .bvg-stars{color:#ED833C}
.bvg-body details.bvg-acc summary{color:#0B2432}
.bvg-body details.bvg-acc summary:after{color:#ED833C}
.bvg-body .bvg-trust-box h3,.bvg-body .bvg-route strong{color:#0B2432}
.bvg-body .bvg-dir-card h3{color:#3E6C94}
.bvg-body .bvg-svc-grid a{color:#3E6C94}
/* bvg-v7 chrome: navy header + footer on /nj/ pages only (html.bvg-nj set by JS) */
html.bvg-nj .bvg-cta-inner, html.bvg-nj .bvg-cta-inner [class*=inner], html.bvg-nj .bvg-cta-inner .wixui-box{background:#0B2432 !important}
html.bvg-nj .bvg-cta-inner a:not(.bvg-keep), html.bvg-nj .bvg-cta-inner p, html.bvg-nj .bvg-cta-inner span{color:#fff !important}
html.bvg-nj .bvg-cta, html.bvg-nj .bvg-cta [class*=inner], html.bvg-nj .bvg-cta .wixui-box{background:#0B2432 !important}
html.bvg-nj .bvg-cta a, html.bvg-nj .bvg-cta p, html.bvg-nj .bvg-cta span, html.bvg-nj .bvg-cta h2{color:#e8eef3 !important}
/* ============ bvg-v8: full-bleed section band system ============
Bluebird's page rhythm: white / ice #EAF6FB / navy #0B2432 bands
alternating, steel #2A79A1 CTA band before the navy footer.
Bands are .bvg-sec wrappers in the CMS bodyRichText. Pages without
wrappers (other towns) keep the v5 flow untouched. */
/* --bvg-bleed is set by the 'NJ design JS' embed = -(text column's viewport left
offset); the column is NOT viewport-centered (form rail on the right), so the
pure-CSS 50%-50vw trick over-shoots. Fallback 0 = bands fill the column.
border-box is load-bearing: Wix rich text is content-box, so 100vw+padding
would overflow by 2x the gutter without it. */
.bvg-body .bvg-sec{box-sizing:border-box;width:100vw;margin:0 0 0 var(--bvg-bleed,0px) !important;padding:85px max(24px,calc(50vw - 560px))}
.bvg-body .bvg-sec>h2:first-child{margin-top:0}
.bvg-body .bvg-sec--white{background:#fff !important}
.bvg-body .bvg-sec--ice{background:#EAF6FB !important}
.bvg-body .bvg-sec--navy{background:#0B2432 !important}
.bvg-body .bvg-sec--navy h2{color:#fff !important}
.bvg-body .bvg-sec--navy p,.bvg-body .bvg-sec--navy li{color:#d6e2ea}
.bvg-body .bvg-sec--navy a{color:#fff}
.bvg-body .bvg-sec--steel{background:#2A79A1 !important;text-align:center}
.bvg-body .bvg-sec--steel h2{color:#fff !important}
.bvg-body .bvg-sec--steel p{color:#eaf4f9}
.bvg-body .bvg-sec--steel a:not(.bvg-btn){color:#fff;text-decoration:underline}
/* neutralize the v5 sibling-breakout inside wrapped sections (wrappers center themselves) */
.bvg-body .bvg-sec .bvg-trust,.bvg-body .bvg-sec .bvg-trust ~ *,.bvg-body .bvg-sec details.bvg-acc{width:auto;max-width:none}
/* navy inset card (Common Challenges): rounded navy panel on a white band */
.bvg-body .bvg-card-navy{background:#0B2432 !important;border-radius:18px;padding:44px 40px;color:#d6e2ea}
.bvg-body .bvg-card-navy h2{color:#fff !important;margin-top:0}
.bvg-body .bvg-card-navy p{color:#d6e2ea}
.bvg-body .bvg-card-navy details.bvg-acc{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
.bvg-body .bvg-card-navy details.bvg-acc summary{color:#fff}
.bvg-body .bvg-card-navy details.bvg-acc p{color:#cfdde6}
/* navy trust cards on the ice band (Serving the Community) */
.bvg-body .bvg-sec--ice .bvg-trust-box{background:#0B2432 !important;border:none}
.bvg-body .bvg-sec--ice .bvg-trust-box h3{color:#fff}
.bvg-body .bvg-sec--ice .bvg-trust-box p{color:#d6e2ea}
/* town chip grid (Proudly Serving navy band) */
.bvg-body .bvg-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.bvg-body .bvg-chips a{display:inline-block;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:11px 18px;color:#fff !important;font-weight:600;font-size:15px;text-decoration:none}
.bvg-body .bvg-chips a:hover{background:rgba(255,255,255,.15)}
/* routes band gets no heading: tighten top padding */
.bvg-body .bvg-sec--routes{padding-top:60px;padding-bottom:60px}
.bvg-body .bvg-sec--routes .bvg-route{background:#fff}
@media (max-width:1000px){
.bvg-body .bvg-sec{padding:36px 20px}
.bvg-body .bvg-card-navy{padding:26px 18px;border-radius:14px}
}
/* ============ bvg-v9: agent-polished Bluebird pixel match ============ */
/* bvg-hero-v9: photo hero, two-tone H1, hero sub-copy, check pills,
Bluebird form styling, orange header CTA. Desktop layout rules scoped
to min-width:1001px; chrome rules prefixed html.bvg-nj (shared header). */
@media (min-width:1001px){
.bvg-hero{background:linear-gradient(97deg,rgba(11,36,50,.96) 0%,rgba(27,58,86,.93) 32%,rgba(53,92,127,.62) 66%,rgba(43,75,104,.42) 100%),url('/assets/img/hero-f2c363047130.webp') right center/cover no-repeat !important;padding-top:96px !important;padding-bottom:160px !important}
/* two-tone H1: line 1 white via ::first-line, wrapped town line(s) orange.
The eyebrow ::before MUST be position:absolute or its block box becomes
the "first line" and the trick silently fails. */
.bvg-hero h1{font-size:65px !important;max-width:480px;color:#ED833C !important;position:relative;padding-top:58px}
.bvg-hero h1::first-line{color:#fff !important}
.bvg-hero h1:before{position:absolute;top:0;left:0;margin-bottom:0}
/* hero sub-copy replaces the v7 orange underline bar (town-agnostic copy — CSS is shared by all /nj/ pages) */
.bvg-hero h1:after{content:'A local New Jersey crew that fixes storm damage, leaks, flashing, and worn shingles right the first time. Free written estimates on every job.';display:block;width:auto;max-width:540px;height:auto;background:transparent;border-radius:0;font-family:Montserrat,sans-serif;font-size:17px;font-weight:500;line-height:1.7;color:rgba(255,255,255,.93);margin-top:24px}
/* Bluebird-style check pills (flex items via order, below the H1 block) */
.bvg-hero::before{content:'Highly rated by local homeowners';order:2;margin-top:30px}
.bvg-hero::after{content:'Free, no-obligation estimates';order:3;margin-top:12px}
.bvg-hero::before,.bvg-hero::after{width:fit-content;background:rgba(11,36,50,.5) url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2222%22 height=%2222%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2211%22 fill=%22%23ED833C%22/%3E%3Cpath d=%22M7 12.5l3.2 3.2L17 8.5%22 stroke=%22white%22 stroke-width=%222.5%22 fill=%22none%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E') 13px 50% no-repeat;border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:12px 20px 12px 47px;color:#fff;font-family:Montserrat,sans-serif;font-size:15px;font-weight:600}
/* form card: Bluebird treatment */
.bvg-hero-form h3, .bvg-hero-form h3 span{font-family:Montserrat,poppins,sans-serif !important;font-size:25px !important;font-weight:800 !important;color:#0B2432 !important}
/* orange stars / dark text in one text node: gradient clipped to glyphs, stop tuned to the 85px 5-star run */
.bvg-hero-form p{font-size:15px !important;background:linear-gradient(90deg,#ED833C 0 78px,#33424E 78px);-webkit-background-clip:text;background-clip:text}
.bvg-hero-form p span{color:transparent !important}
.bvg-hero-form label{font-family:Montserrat,sans-serif !important;font-size:12px !important;font-weight:700 !important;letter-spacing:.05em;text-transform:uppercase;color:#19567E !important}
.bvg-hero-form label span[aria-hidden=true]{color:#D93025 !important}
/* .skzvMVg = input/phone field box, .sTyqRvT = textarea box (Wix Forms wrapper classes) */
.bvg-hero-form .skzvMVg,.bvg-hero-form .sTyqRvT{border:1px solid #D8E0E8 !important;border-radius:8px !important;background:#fff !important}
.bvg-hero-form .skzvMVg:focus-within,.bvg-hero-form .sTyqRvT:focus-within{border-color:#2A79A1 !important}
.bvg-hero-form input,.bvg-hero-form textarea{font-size:15px !important;color:#243B4A !important}
/* submit = the only button without aria-label (phone country picker has one) */
.bvg-hero-form button:not([aria-label]){background:#ED833C !important;border-radius:8px !important;font-family:Montserrat,sans-serif !important;font-size:16px !important;font-weight:700 !important;color:#fff !important;border:none !important;cursor:pointer}
.bvg-hero-form button:not([aria-label]):hover{background:#D96F2C !important}
.bvg-hero-form button:not([aria-label]) span:after{content:' \2192'}
/* !important required: the menu-phone embed sets display:flex !important, which was beating this
hide rule — leaving a white-on-white (invisible but tappable) "Call" pill in the /nj/ mobile
header. Verified live 2026-07-16 (computed color #fff on bg #fff at 375px). */
html.bvg-nj .bvg-cta-inner .bvg-menu-phone{display:none !important}
}
/* header chrome (shared comp — bvg-nj scoped) */
html.bvg-nj .bvg-cta-inner a.wixui-button{background:#ED833C !important;border-radius:999px !important;padding:8px 22px !important;height:auto !important}
html.bvg-nj .bvg-cta-inner a.wixui-button:hover{background:#D96F2C !important}
html.bvg-nj .bvg-cta-inner a.wixui-button .wixui-button__label{font-size:15px !important;font-weight:700 !important}
html.bvg-nj #bvg-nav-phone{color:#fff !important;font-family:Montserrat,sans-serif;font-weight:700;font-size:15px}
/* logo PNG has a baked-in white plate — round it into a deliberate chip */
html.bvg-nj .bvg-cta-inner img{border-radius:8px}
/* header/footer section bgLayers can paint a tint OVER the comp background
(found on the footer; applied to both for safety) */
html.bvg-nj [id^='bgLayers_comp-mq9p22f51']>div{background:#0B2432 !important}
/* floating Google-reviews badge (MarketPush "Google Reviews" app): its GBP sync froze
Dec 2025 — shows stale "69 REVIEWS" + pre-rename name vs real 116/5.0. Hide SITE-WIDE
until the app is reconnected or uninstalled (was already NJ-hidden as duplicate). */
mkp-google-reviews{display:none !important}
/* ---- body sections (bvg-v9) ---- */
/* eyebrow pills (Real Reviews / FAQs / Service Areas) */
.bvg-body .bvg-eyebrow-row{margin:0 0 18px}
.bvg-body .bvg-sec--center .bvg-eyebrow-row{text-align:center}
.bvg-body .bvg-eyebrow{display:inline-block;background:#0B2432;color:#ED833C;font-family:Montserrat,sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-radius:8px;padding:8px 16px}
.bvg-body .bvg-sec--navy .bvg-eyebrow{background:rgba(237,131,60,.16)}
.bvg-body .bvg-eyebrow-row+h2{margin-top:0}
.bvg-body .bvg-sec--center>h2{text-align:center}
/* 1. Comprehensive: steel service pills (Bluebird #1F648E, radius 16, white check badge) */
.bvg-body ul.bvg-svc-grid{gap:20px;margin:26px 0 0}
.bvg-body .bvg-svc-grid li{background:#1F648E !important;border-radius:16px;padding:16px 18px 16px 60px;position:relative;color:#D9E8F2;font-size:15px;line-height:1.5}
.bvg-body .bvg-svc-grid li::before{content:'';position:absolute;left:15px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:8px;background:rgba(11,36,50,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px 16px no-repeat}
.bvg-body .bvg-svc-grid a{color:#fff !important;font-family:Montserrat,sans-serif;font-weight:700;font-size:16px}
/* 2. Community: navy cards radius 16, white icon badge w/ orange glyph, Montserrat h3 */
.bvg-body .bvg-trust{gap:20px;margin:26px 0 0}
.bvg-body .bvg-sec--ice .bvg-trust-box{border-radius:16px;padding:26px 24px}
.bvg-body .bvg-sec--ice .bvg-trust-box::before{content:'';display:block;width:42px;height:42px;border-radius:10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ED833C' d='M12 3 2 12h3v8h6v-5h2v5h6v-8h3z'/%3E%3C/svg%3E") center/22px 22px no-repeat;margin-bottom:16px}
.bvg-body .bvg-sec--ice .bvg-trust-box h3{font-family:Montserrat,sans-serif;font-weight:700;font-size:19px;margin:0 0 8px;color:#fff}
.bvg-body .bvg-sec--ice .bvg-trust-box p{color:#e2edf4;font-size:15.5px;line-height:1.6;margin:0}
/* 3. Challenges: navy panel radius 16, translucent accordion rows, Montserrat summaries */
.bvg-body .bvg-card-navy{border-radius:16px;padding:48px 44px}
.bvg-body .bvg-card-navy h2{margin-bottom:14px}
.bvg-body .bvg-card-navy details.bvg-acc{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:10px;margin:12px 0;padding:6px 20px}
.bvg-body .bvg-card-navy details.bvg-acc summary{font-family:Montserrat,sans-serif;font-weight:600;font-size:16.5px;padding:13px 36px 13px 0}
.bvg-body .bvg-card-navy details.bvg-acc p{font-size:15.5px;line-height:1.65;margin:4px 0 12px}
/* 4. All About: white copy on navy, photo floats right */
.bvg-body .bvg-sec--navy p{color:#e6eef4}
/* 5. Review band: open centered strip, orange stars */
.bvg-body .bvg-review-band{background:transparent !important;border-radius:0;padding:0 !important;margin:0;text-align:center}
.bvg-body .bvg-stars{font-size:34px;letter-spacing:9px;margin:14px 0 10px;text-indent:9px}
.bvg-body .bvg-review-band p{font-size:18px !important;color:#0B2432;margin:0}
/* 6. FAQ: navy summary bars on ice (Bluebird live pattern), orange +/- */
.bvg-body .bvg-sec--ice details.bvg-acc{background:#0B2432;border:none;border-radius:10px;margin:18px 0;padding:8px 22px;text-align:left}
.bvg-body .bvg-sec--ice details.bvg-acc summary{color:#fff;font-family:Montserrat,sans-serif;font-weight:600;font-size:16.5px;padding:14px 36px 14px 0}
.bvg-body .bvg-sec--ice details.bvg-acc summary:after{color:#ED833C;right:2px}
.bvg-body .bvg-sec--ice details.bvg-acc p{color:#d6e2ea;font-size:15.5px;line-height:1.65;margin:2px 0 14px}
/* 7. Town chips: orange cards w/ white pin badge (Bluebird) */
.bvg-body .bvg-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;margin-top:30px}
.bvg-body .bvg-chips a{display:flex;align-items:center;gap:13px;background:#ED833C !important;border:none;border-radius:10px;padding:14px 16px;color:#fff !important;font-family:Montserrat,sans-serif;font-weight:700;font-size:16px;line-height:1.3;text-decoration:none}
.bvg-body .bvg-chips a::before{content:'';flex:0 0 28px;height:28px;border-radius:8px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231F648E' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/15px 15px no-repeat}
.bvg-body .bvg-chips a:hover{background:#f29254 !important}
/* 8. Directions + routes: navy cards radius 10 (Bluebird) */
.bvg-body .bvg-dir-grid{gap:20px;margin:30px 0 0}
.bvg-body .bvg-dir-card{background:#0B2432 !important;border:none;border-radius:10px;padding:24px 22px}
.bvg-body .bvg-dir-card h3{color:#fff !important;font-family:Montserrat,sans-serif;font-weight:700;font-size:19px;margin:0 0 10px}
.bvg-body .bvg-dir-card p{color:#d6e2ea;font-size:15.5px;line-height:1.6;margin:0}
.bvg-body .bvg-sec--routes .bvg-route{background:#0B2432 !important;border-radius:10px;padding:22px;color:#d6e2ea;font-size:15.5px;line-height:1.6}
.bvg-body .bvg-route strong{color:#fff !important;font-family:Montserrat,sans-serif}
.bvg-body .bvg-routes{gap:20px;margin:0}
/* 9. CTA: Bluebird pill buttons (orange + ghost), centered copy */
.bvg-body .bvg-sec--steel h2{margin-bottom:16px}
.bvg-body .bvg-sec--steel p{font-size:17px;max-width:680px;margin-left:auto;margin-right:auto}
.bvg-body .bvg-btn{border-radius:50px;font-family:Montserrat,sans-serif;font-weight:800;font-size:16px;padding:15px 30px;box-shadow:0 4px 14px rgba(11,36,50,.22)}
.bvg-body .bvg-btn--ghost{background:rgba(255,255,255,.22) !important;border:1.5px solid rgba(255,255,255,.55)}
.bvg-body .bvg-sec--steel .bvg-btn{margin:8px 9px 4px}
.bvg-body .bvg-cta-note{font-size:15px;color:#d9eaf3 !important;margin-top:14px}
/* 10. rhythm: kill the strip padding so the CTA band touches the footer
(scoped to band-system pages only; v5-flow towns keep their padding) */
.bvg-body:has(.bvg-sec){padding-bottom:0 !important}
/* photo grids: 2-up variant + taller imgs in 6-up jobs grid */
.bvg-body .bvg-photo-grid--2{grid-template-columns:1fr 1fr}
.bvg-body .bvg-photo-grid--2 .bvg-photo{height:260px}
/* ---- footer (bvg-v9, preview-verified) ---- */
/* footer bgLayers paints a rgba(29,94,148,.1) tint over the navy — flatten */
html.bvg-nj #bgLayers_comp-mq9p22f9_r_comp-kbgakgyt > div{background:#0B2432 !important}
/* dark wordmark invisible on navy — invert; hue-rotate restores the orange mark */
html.bvg-nj .bvg-cta-card-mmcoxx5w img{filter:invert(1) hue-rotate(180deg) saturate(1.15) !important}
/* column headings: Montserrat 20px / 600 / white */
html.bvg-nj .bvg-cta-card-m1mh0jyp span,
html.bvg-nj .bvg-cta-card-m1mh2m892 span,
html.bvg-nj .bvg-cta-card-m1mgzem1 span{font-family:Montserrat,sans-serif !important;font-weight:600 !important;font-size:20px !important;color:#fff !important}
/* links: Montserrat 16/500, light, orange hover */
html.bvg-nj .bvg-cta a{font-family:Montserrat,sans-serif !important;font-weight:500 !important;color:#e8eef3 !important}
html.bvg-nj .bvg-cta a:hover,
html.bvg-nj .bvg-cta a:hover span{color:#ED833C !important}
/* chevrons light (no !important so the icon rule below still wins) */
html.bvg-nj .bvg-cta svg{fill:#e8eef3}
/* contact icons to palette orange */
html.bvg-nj [id^="comp-mq9p22f9_r_comp-m1mhcb7p"] svg,
html.bvg-nj [id^="comp-mq9p22f9_r_comp-m1mhcb7p"] svg *{fill:#ED833C !important}
/* Google Reviews + Get Directions buttons to orange */
html.bvg-nj .bvg-cta-card-m1mh416v a,
html.bvg-nj .bvg-cta-card-mmlg47d5 a,
html.bvg-nj .bvg-cta-card-m1mh416v .wixui-button,
html.bvg-nj .bvg-cta-card-mmlg47d5 .wixui-button{background:#ED833C !important;color:#fff !important}
/* divider above copyright row */
html.bvg-nj .bvg-cta-card-m1mgvrl8{border-top-color:rgba(255,255,255,0.18) !important}
/* copyright row dimmer */
html.bvg-nj .bvg-cta-card-kd5pdf7t,
html.bvg-nj .bvg-cta-card-kd5pdf7t span,
html.bvg-nj .bvg-cta-card-kd5pdf7t p{color:rgba(232,238,243,0.65) !important;font-weight:400 !important}
/* social icons: black PNGs -> light */
html.bvg-nj .bvg-cta-card-m1mgut42 img{filter:invert(0.92) !important;opacity:0.85}
/* ---- mobile (bvg-m1, <=1000px) — Bluebird mobile parity ---- */
@media (max-width:1000px){
/* hero: Bluebird-scale H1 + eyebrow pill (was desktop-only) */
.bvg-hero h1{font-size:30px !important;line-height:1.2 !important}
.bvg-hero h1:before{content:attr(data-bvg-eyebrow);display:block;width:fit-content;font-family:Montserrat,sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(11,36,50,.45);border-radius:6px;padding:6px 12px;margin-bottom:16px}
/* section headings: Bluebird mobile scale + centered */
.bvg-body h2{font-size:26px !important;line-height:1.25;margin-top:36px;text-align:center}
/* Wix mobile rich-text base is 10px — text NOT inside needs explicit sizes */
.bvg-body details.bvg-acc summary{font-size:16px;line-height:1.4}
.bvg-body .bvg-svc-grid li{font-size:15px;line-height:1.5}
.bvg-body .bvg-route{font-size:15px;line-height:1.6}
/* header: hamburger SVG was fill #0F2F4A — invisible on the navy header */
html.bvg-nj .bvg-cta-inner [class*="Hamburger"] svg path{fill:#fff !important}
/* footer: dark transparent-PNG logo + black social icons invisible on navy */
html.bvg-nj .bvg-cta img[src*="Logo"]{background:#fff;border-radius:8px;padding:6px 10px}
html.bvg-nj .bvg-cta ul[aria-label="Social Bar"] img{filter:invert(1)}
/* close the white sliver between the steel CTA band and the navy footer
(strip grid leaves ~10px below the rich text; overshoot hides under the opaque footer) */
.bvg-body .bvg-sec--steel{box-shadow:0 24px 0 0 #2A79A1}
.bvg-body .bvg-sec--steel .bvg-btn{margin:6px 4px}
}
/* ---- map band (bvg-map-sec, injected by the town-maps embed) ---- */
.bvg-body .bvg-map-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.bvg-body .bvg-map-frame{position:relative;width:100%;padding-bottom:72%;height:0;overflow:hidden;border-radius:16px;background:#EAF6FB}
.bvg-body .bvg-map-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.bvg-body .bvg-map-cap{font-size:15px;color:#4A5A66;margin-top:10px}
@media (max-width:1000px){.bvg-body .bvg-map-grid{grid-template-columns:1fr}}
/* ---- bvg-v10: hub pages (Bluebird /services + /service-areas clones) ---- */
/* image cards: photo top, navy title, blurb, orange learn-more */
.bvg-body .bvg-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px;text-align:left}
.bvg-body .bvg-img-card{background:#fff !important;border-radius:14px;overflow:hidden;box-shadow:0 6px 24px rgba(11,36,50,.08);display:flex;flex-direction:column}
.bvg-body .bvg-img-card img{width:100%;height:220px;object-fit:cover;display:block;margin:0;border-radius:0}
.bvg-body .bvg-img-card .bvg-card-body{padding:20px 22px 22px}
.bvg-body .bvg-img-card h3{font-family:Montserrat,sans-serif;font-weight:700;font-size:19px;color:#0B2432;margin:0 0 8px}
.bvg-body .bvg-img-card p{font-size:15px;line-height:1.55;color:#445A66;margin:0 0 12px}
.bvg-body .bvg-img-card p a{color:#1F648E}
.bvg-body .bvg-img-card a.bvg-more{color:#ED833C !important;font-family:Montserrat,sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;margin-top:auto}
/* hub hero: centered Bluebird-style, lead form hidden (html.bvg-hub set by JS embed) */
html.bvg-hub .bvg-hero-form{display:none !important}
@media (min-width:1001px){
html.bvg-hub .bvg-hero{padding-bottom:90px !important}
html.bvg-hub .bvg-hero h1{max-width:900px;margin-left:auto;margin-right:auto;text-align:center;padding-top:0;font-size:56px !important}
html.bvg-hub .bvg-hero h1:before{position:static;display:block;margin:0 auto 24px;width:fit-content}
html.bvg-hub .bvg-hero h1:after{margin-left:auto;margin-right:auto;text-align:center;max-width:660px}
html.bvg-hub .bvg-hero{align-items:center}
html.bvg-hub .bvg-hero::before,html.bvg-hub .bvg-hero::after{align-self:center}
}
@media (max-width:1000px){
.bvg-body .bvg-card-grid{grid-template-columns:1fr}
html.bvg-hub .bvg-hero h1{text-align:center}
html.bvg-hub .bvg-hero h1:before{margin:0 auto 16px}
}
/* nav dropdowns: solid navy panel (was transparent = unreadable). Site-wide. */
header nav [class*="submenu"]{background:#0B2432 !important;border-radius:10px;box-shadow:0 14px 40px rgba(11,36,50,.35);padding:6px 0 !important;border:1px solid rgba(255,255,255,.08)}
header nav [class*="submenu"] a,header nav [class*="submenu"] span,header nav [class*="submenu"] div{color:#fff !important}
header nav [class*="submenu"] a:hover{background:rgba(237,131,60,.22) !important}
/* location cards (service-areas hub): Bluebird-exact — photo top, navy body,
centered uppercase town name, orange Explore Location pill */
.bvg-body .bvg-loc-card{background:#0B2432 !important}
.bvg-body .bvg-loc-card img{height:260px}
.bvg-body .bvg-loc-card .bvg-card-body{padding:28px 22px 32px;text-align:center;display:flex;flex-direction:column;align-items:center}
.bvg-body .bvg-loc-card h3{color:#fff !important;font-size:20px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 20px}
.bvg-body .bvg-loc-card .bvg-btn{font-size:15px;padding:13px 28px;margin:0}
/* hub hero: text block spans the full grid and centers (the hidden form's
track otherwise keeps it pinned left) */
html.bvg-hub .bvg-hero,html.bvg-hub .bvg-hero{grid-column:1 / -1 !important;justify-self:center !important;width:100% !important;max-width:920px !important;margin-left:auto !important;margin-right:auto !important}
/* ---- bvg-v11: Bluebird body components — split sections + icon feature card ---- */
/* two-column split: text one side, photo the other (--rev flips) */
.bvg-body .bvg-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin:26px 0 0}
.bvg-body .bvg-split>div{min-width:0}
.bvg-body .bvg-split img{width:100%;height:380px;object-fit:cover;border-radius:16px;margin:0;display:block}
.bvg-body .bvg-split h2{margin-top:0}
.bvg-body .bvg-split--rev>*:first-child{order:2}
/* navy feature card with icon rows (Bluebird 'why us' card) */
.bvg-body .bvg-feature-card{background:#0B2432 !important;border-radius:16px;padding:34px 30px;display:flex;flex-direction:column;gap:24px}
.bvg-body .bvg-feature{display:flex;gap:16px;align-items:flex-start}
.bvg-body .bvg-fi{flex:0 0 46px;height:46px;border-radius:10px;background-color:#FDF3EA;background-position:center;background-repeat:no-repeat;background-size:22px}
.bvg-body .bvg-fi--search{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ED833C' d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/%3E%3C/svg%3E")}
.bvg-body .bvg-fi--bolt{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ED833C' d='M11 21h-1l1-7H7.5c-.58 0-.57-.32-.38-.66.19-.34.05-.08.07-.12C8.48 10.94 10.42 7.54 13 3h1l-1 7h3.5c.49 0 .56.33.47.51l-.07.15C12.96 17.55 11 21 11 21z'/%3E%3C/svg%3E")}
.bvg-body .bvg-fi--phone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ED833C' d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.24.2 2.45.57 3.57a1 1 0 0 1-.24 1.02z'/%3E%3C/svg%3E")}
.bvg-body .bvg-feature h4,.bvg-body .bvg-feature .bvg-feature-title{color:#fff !important;font-family:Montserrat,sans-serif;font-size:18px;font-weight:700;margin:0 0 4px;line-height:1.3}
.bvg-body .bvg-feature p{color:#d6e2ea !important;font-size:15px;margin:0;line-height:1.55}
@media (max-width:1000px){
.bvg-body .bvg-split{grid-template-columns:1fr;gap:20px}
.bvg-body .bvg-split--rev>*:first-child{order:0}
.bvg-body .bvg-split img{height:240px}
.bvg-body .bvg-feature-card{padding:24px 18px;gap:18px}
}
/* ---- reviews band (#bvg-rev-sec, injected by the reviews embed once Dylan
provides a Featurable widget id) — real Google review cards, FAQ -> here -> map ---- */
.bvg-body #bvg-rev-sec{background:#f4f8fb;border-radius:16px;padding:34px 26px;margin:34px 0;text-align:center}
.bvg-body #bvg-rev-sec h2{margin-top:0}
.bvg-body #bvg-rev-sec .bvg-rev-sub{font-family:Montserrat,sans-serif;font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:#ED833C;margin:0 0 18px}
.bvg-body #bvg-rev-sec [data-featurable-async]{margin-top:6px}
@media (max-width:1000px){.bvg-body #bvg-rev-sec{padding:24px 16px}}
/* ---- form + hero hardening: the lead form and left-aligned hero can never be
hidden/centered on a non-hub /nj/ page (defends against stray injection,
hydration races, future regressions). Hubs keep their centered form-less hero. */
html.bvg-nj:not(.bvg-hub) .bvg-hero-form{display:block !important}
html.bvg-nj:not(.bvg-hub) .bvg-hero{align-items:flex-start !important}
html.bvg-nj:not(.bvg-hub) .bvg-hero h1{text-align:left !important}
/* ---- nav dropdown chevrons (Services / Areas / About) — site-wide, Bluebird-style.
Wix's native caret button renders 0-width; hide it and draw one clean chevron on
the top-level label of items that have a submenu. currentColor adapts to header. */
header nav [class*=accessibilityIconWrapper]{display:none !important}
header nav .wixui-horizontal-menu__item:has([class*=accessibilityIconWrapper]) > [class*=rootContainer] > a .wixui-horizontal-menu__item-label::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:.95}
/* varied hero H1 (text set by the 'NJ design JS' embed): clean white headline with
one orange accent word, replacing the messy first-line/wrap two-tone for the
longer Bluebird-style headlines. */
html.bvg-h1v .bvg-hero h1,html.bvg-h1v .bvg-hero h1::first-line{color:#fff !important}
html.bvg-h1v .bvg-hero h1 .bvg-h1a{color:#ED833C !important}
/* ============ bvg-v12: UI polish pass (Bluebird parity — 7-agent audit) ============ */
/* --- HERO (desktop) --- */
@media (min-width:1001px){
.bvg-hero h1{line-height:1.2 !important}
.bvg-hero h1:before{background:rgba(255,255,255,.12) !important;color:#fff !important;font-size:13px !important;font-weight:700 !important;letter-spacing:.08em !important;padding:6px 14px !important;border-radius:6px !important;margin-bottom:18px !important}
.bvg-hero h1:after{color:#fff !important;line-height:1.5 !important}
.bvg-hero::before,.bvg-hero::after{background-color:rgba(255,255,255,.12) !important;border:none !important;border-radius:14px !important;color:#fff !important;font-size:16px !important}
.bvg-hero-form{border-radius:20px !important;padding:30px !important}
.bvg-hero-form .skzvMVg,.bvg-hero-form .sTyqRvT{border-radius:12px !important;background:rgba(247,247,247,.6) !important}
.bvg-hero-form button:not([aria-label]){padding-top:15px !important;padding-bottom:15px !important}
}
/* --- CARDS --- */
.bvg-body .bvg-fi{background-color:#FDF3EA !important}
.bvg-body .bvg-img-card{box-shadow:0 4px 18px rgba(11,36,50,.14);border:2px solid #fff;transition:transform .35s ease,box-shadow .3s ease}
.bvg-body .bvg-img-card:hover{transform:translateY(-8px);box-shadow:0 16px 32px rgba(11,36,50,.18)}
.bvg-body .bvg-loc-card:hover{transform:translateY(-8px);box-shadow:0 16px 32px rgba(11,36,50,.32)}
.bvg-body .bvg-img-card h3{font-size:20px;line-height:1.25;margin:0 0 10px}
.bvg-body .bvg-img-card p{font-size:16px;line-height:1.6;color:#33424E}
.bvg-body .bvg-feature h4,.bvg-body .bvg-feature .bvg-feature-title{font-size:19px !important;line-height:1.25 !important}
.bvg-body .bvg-feature p{font-size:16px !important;line-height:1.6 !important}
/* --- TYPOGRAPHY --- */
.bvg-body h2{font-weight:700 !important;line-height:1.12 !important;letter-spacing:-0.01em}
.bvg-body .bvg-trust-box h3,.bvg-body .bvg-dir-card h3{line-height:1.25}
.bvg-body p{line-height:1.55}
.bvg-body .bvg-lead{font-size:18px;line-height:1.55}
.bvg-body .bvg-eyebrow{font-weight:600;letter-spacing:.09em}
/* --- FAQ ice-band open-state: navy question bar, answer on the light section bg --- */
.bvg-body .bvg-sec--ice details.bvg-acc{background:transparent !important;margin:0 0 16px !important;padding:0 !important}
.bvg-body .bvg-sec--ice details.bvg-acc summary{background:#0B2432;border-radius:10px;padding:18px 44px 18px 22px !important}
.bvg-body .bvg-sec--ice details.bvg-acc summary:after{right:20px !important}
.bvg-body .bvg-sec--ice details.bvg-acc p{color:#1a3242 !important;margin:14px 22px 4px !important}
/* --- FOOTER --- */
html.bvg-nj .bvg-cta h2,html.bvg-nj .bvg-cta h3,html.bvg-nj .bvg-cta h4,html.bvg-nj .bvg-cta [class*=title] span{font-family:Montserrat,sans-serif !important;font-weight:600 !important;font-size:20px !important;color:#fff !important}
html.bvg-nj .bvg-cta a{line-height:24px !important;padding:3px 0 !important}
html.bvg-nj .bvg-cta-card-m1mh416v a,html.bvg-nj .bvg-cta-card-mmlg47d5 a,html.bvg-nj .bvg-cta-card-m1mh416v .wixui-button__label,html.bvg-nj .bvg-cta-card-mmlg47d5 .wixui-button__label{font-family:Montserrat,sans-serif !important;font-size:15px !important;font-weight:600 !important}
html.bvg-nj .bvg-cta-card-kd5pdf7t,html.bvg-nj .bvg-cta-card-kd5pdf7t span,html.bvg-nj .bvg-cta-card-kd5pdf7t p{font-size:15px !important;color:rgba(232,238,243,.75) !important}
/* --- NAV top-level spacing + Montserrat --- */
header nav .wixui-horizontal-menu__item > [class*=rootContainer] > a{padding-left:12px !important;padding-right:12px !important}
header nav .wixui-horizontal-menu__item-label{font-family:Montserrat,sans-serif !important;font-weight:700 !important;font-size:16px !important}
/* --- MOBILE: hero text column must fill the track (was shrink-wrapping to ~215px) --- */
@media (max-width:1000px){
html.bvg-nj:not(.bvg-hub) .bvg-hero{align-items:stretch !important}
html.bvg-nj:not(.bvg-hub) .bvg-hero,html.bvg-nj:not(.bvg-hub) .bvg-hero{width:100% !important;max-width:100% !important}
}
/* loop iter 2: body copy to Bluebird's airier 18px scale (desktop only — mobile keeps 17px);
navy "All About" band text capped to a ~760px column instead of a full-width wall. */
@media (min-width:1001px){.bvg-body p,.bvg-body li{font-size:18px;line-height:1.6}}
.bvg-body .bvg-sec--navy:not(.bvg-sec--center) p{max-width:760px}
/* loop iter 3: ice-band FAQ affordance — rotating chevron caret (matches Bluebird's
down/up caret, plus a smooth rotate theirs lacks). Navy-card FAQ keeps the +/-. */
.bvg-body .bvg-sec--ice details.bvg-acc summary:after{content:'';width:9px;height:9px;border-right:2.5px solid #ED833C;border-bottom:2.5px solid #ED833C;border-top:none;border-left:none;font-size:0;transform:translateY(-70%) rotate(45deg);transition:transform .25s ease}
.bvg-body .bvg-sec--ice details.bvg-acc[open] summary:after{content:'';transform:translateY(-30%) rotate(-135deg)}
/* loop iter 4: missing hover feedback — primary .bvg-btn pills and .bvg-more "Learn More"
links were fully inert (no :hover). Add the darken+lift convention used elsewhere. */
.bvg-body .bvg-btn:not(.bvg-btn--ghost):hover{background:#D96F2C !important;transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,36,50,.30)}
.bvg-body .bvg-btn--ghost:hover{background:rgba(255,255,255,.32) !important}
.bvg-body .bvg-img-card a.bvg-more:hover{color:#D96F2C !important;text-decoration:underline}
/* loop iter 5: lead form was styled desktop-only — on mobile it fell back to raw Wix
(black square 40px fields below the 44px tap min, generic blue submit). Bring the
mobile form to Bluebird/desktop parity: soft rounded fields, 46-48px tap targets, orange submit. */
@media (max-width:1000px){
.bvg-hero-form .skzvMVg,.bvg-hero-form .sTyqRvT{border:1px solid #D8E0E8 !important;border-radius:8px !important;background:#fff !important}
.bvg-hero-form .skzvMVg:focus-within,.bvg-hero-form .sTyqRvT:focus-within{border-color:#2A79A1 !important}
.bvg-hero-form input,.bvg-hero-form textarea{min-height:46px !important;color:#243B4A !important}
.bvg-hero-form textarea{min-height:74px !important}
.bvg-hero-form button:not([aria-label]){background:#ED833C !important;border-radius:8px !important;min-height:48px !important;font-family:Montserrat,sans-serif !important;font-weight:700 !important;color:#fff !important;border:none !important}
}
/* full-bleed hero background at wide viewports (>1440): the hero box stays at content
width so the H1/form keep their positions, but its gradient+photo now extends
edge-to-edge via a 100vw ::before — fixes the white gutters beside the hero.
left uses min(0, 720-50vw) so it spans full width at every desktop width. */
@media(min-width:1001px){
.bvg-hero{background:transparent !important;position:relative !important}
.bvg-hero::before{content:'';position:absolute;z-index:0;top:0;height:100%;left:min(0px,calc(720px - 50vw));width:100vw;background:linear-gradient(97deg,rgba(11,36,50,.96) 0%,rgba(27,58,86,.93) 32%,rgba(53,92,127,.62) 66%,rgba(43,75,104,.42) 100%),url('/assets/img/hero-f2c363047130.webp') right center/cover no-repeat}
.bvg-hero > *{position:relative;z-index:1}
}
/* ===================== page shell ===================== */
/* Four Seasons — page shell.
design.css (forked from the Wix repo) styles the CONTENT BANDS only: .bvg-sec,
.bvg-lead, .bvg-svc-grid, .bvg-trust, .bvg-acc, .bvg-photo-grid, .bvg-btn.
Everything structural around them — header, nav, hero grid, form, breadcrumbs,
footer — was Wix editor layout with no source anywhere, so it is written here.
Design tokens taken from the forked stylesheet so the two match exactly. */
/* Montserrat 400/500. The two self-hosted woff2s are VARIABLE fonts covering
100-900, but design.css only declares faces at 600/700/800 — so a request
for weight 400 clamped to the 600 face and every paragraph on the site
rendered semi-bold. Declaring 400/500 against the SAME files fixes the body
weight with zero new bytes. */
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wdh.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wlh.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:500; font-display:swap; src:url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wdh.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Montserrat'; font-style:normal; font-weight:500; font-display:swap; src:url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wlh.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root{
--navy:#0B2432; --navy-2:#14365c; --orange:#ED833C; --orange-dk:#C66F27;
--steel:#3E6C94; --ice:#f4f8fb; --line:#d6e2ea; --ink:#1c2b36; --muted:#5a6b78;
--wrap:1200px; --radius:12px;
--font:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:#fff;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--steel)}
h1,h2,h3,h4,h5,h6{font-family:var(--font);line-height:1.2;margin:0 0 .5em}
/* skip link: present for keyboard users, out of the way for everyone else */
.bvg-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;text-decoration:none}
.bvg-skip:focus{left:0}
/* ─────────────────────────────────────────── header
Matches the v9 design already live on the /nj/ pages (sampled from
/nj/roof-repair, 2026-07-28): navy bar, five centred nav items in white
Montserrat 700/16px, phone + orange "Get a Quote" pill on the right.
The homepage of the live site still runs the older white-header Wix design;
v9 is the one we are standardising on, so every page matches. */
.bvg-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:20px;
min-height:90px;padding:10px clamp(14px,3vw,40px);background:var(--navy);
box-shadow:0 2px 14px rgba(0,0,0,.2);flex-wrap:wrap}
/* The real brand mark (orange "4" roof glyph + wordmark), white type on a
transparent background so it sits on the navy bar. 840x158 native = 5.32:1. */
.bvg-logo{flex:0 0 auto;display:block;line-height:0}
.bvg-logo img{width:245px;height:46px;display:block}
.bvg-nav{flex:1 1 auto;min-width:0}
.bvg-nav>ul{display:flex;flex-wrap:wrap;align-items:center;gap:2px 30px;
list-style:none;margin:0;padding:0;justify-content:center}
.bvg-nav>ul>li{position:relative}
.bvg-nav a{display:inline-block;color:#fff;text-decoration:none;font-weight:700;font-size:16px;
padding:8px 0;white-space:nowrap}
.bvg-nav a:hover,.bvg-nav a:focus{color:var(--orange)}
.bvg-nav [aria-current="page"]{color:var(--orange)}
/* Dropdowns. Hover for pointers, :focus-within so they are keyboard-reachable
with no JS at all — the whole site ships zero nav script. */
.bvg-has-sub>a::after{content:"";display:inline-block;margin-left:7px;vertical-align:2px;
border:4px solid transparent;border-top-color:currentColor}
.bvg-has-sub>ul{position:absolute;left:50%;transform:translateX(-50%);top:100%;min-width:236px;
background:#fff;border-radius:10px;box-shadow:0 18px 44px rgba(0,0,0,.26);
padding:8px 0;margin:0;list-style:none;display:none;z-index:120}
.bvg-has-sub:hover>ul,.bvg-has-sub:focus-within>ul{display:block}
.bvg-has-sub>ul a{display:block;color:var(--navy);font-weight:600;font-size:15px;padding:9px 20px}
.bvg-has-sub>ul a:hover,.bvg-has-sub>ul a:focus{background:var(--ice);color:var(--orange-dk)}
.bvg-nav-actions{flex:0 0 auto;display:flex;align-items:center;gap:8px 16px;
flex-wrap:wrap;justify-content:flex-end}
.bvg-nav-tel{display:inline-flex;align-items:center;gap:7px;color:#fff;text-decoration:none;
font-weight:700;font-size:15px;white-space:nowrap}
.bvg-nav-tel:hover,.bvg-nav-tel:focus{color:var(--orange)}
.bvg-tel-icon{flex:0 0 auto}
.bvg-nav-cta{background:var(--orange);color:#fff;text-decoration:none;font-weight:700;font-size:15px;
padding:11px 24px;border-radius:999px;white-space:nowrap}
.bvg-nav-cta:hover,.bvg-nav-cta:focus{background:var(--orange-dk);color:#fff}
/* Review bar. Bluebird's most prominent social proof is a full-width strip
immediately under the header; we had the same figures only inside the form
card and the footer, i.e. nothing above the fold on most pages. Steel blue so
it separates the navy header from the hero instead of merging with it. */
.bvg-reviewbar{background:#2a79a1;color:#fff;text-align:center;
padding:9px clamp(14px,3vw,40px);font-size:15px;line-height:1.4}
.bvg-reviewbar p{margin:0}
.bvg-reviewbar b{font-weight:800}
.bvg-reviewbar .bvg-stars{color:#ffc93c;vertical-align:-2px;margin:0 4px}
@media (max-width:520px){.bvg-reviewbar{font-size:13.5px;padding:8px 12px}}
/* ─────────────────────────────────────────── hero
Two columns on desktop (copy | form), stacked on mobile. The forked stylesheet
supplies the hero background and H1 treatment; this supplies the grid the Wix
editor used to provide by absolute positioning. */
.bvg-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);
align-items:center;padding:clamp(36px,6vw,84px) clamp(16px,4vw,40px);
background:linear-gradient(120deg,var(--navy) 0%,#1b3a56 55%,var(--steel) 100%);color:#fff}
.bvg-hero>*{min-width:0}
.bvg-hero h1{color:#fff;font-size:clamp(30px,4.6vw,58px);font-weight:800;margin:0 0 18px}
.bvg-hero-sub{color:#dbe7f0;font-size:clamp(15px,1.6vw,18px);max-width:52ch;margin:0 0 22px}
.bvg-hero-cta{margin:0;display:flex;flex-wrap:wrap;gap:12px}
/* The forked stylesheet renders an eyebrow badge above the H1 via
content:attr(data-bvg-eyebrow). Wix set that attribute; our markup does not,
so without this the badge renders as an empty grey pill. Show it only when
there is actually something to show. */
.bvg-hero h1:not([data-bvg-eyebrow])::before{content:none!important;display:none!important}
/* ─────────────────────────────────────────── hero form */
.bvg-hero-form{background:#fff;color:var(--ink);border-radius:var(--radius);
padding:clamp(20px,2.4vw,30px);box-shadow:0 20px 55px rgba(11,36,50,.28);
display:grid;gap:4px;margin:0}
.bvg-form-title{font-size:clamp(20px,2.2vw,26px);font-weight:800;color:var(--navy);margin:0 0 2px}
.bvg-form-rating{margin:0 0 14px;font-size:14px;color:var(--muted);font-weight:600}
.bvg-form-rating .bvg-stars{letter-spacing:0}
.bvg-hero-form label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--navy);margin-top:8px}
.bvg-hero-form input,.bvg-hero-form textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);
padding:11px 13px;border:1px solid var(--line);border-radius:8px;background:#fdfefe}
.bvg-hero-form input:focus,.bvg-hero-form textarea:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange)}
.bvg-hero-form textarea{resize:vertical;min-height:74px}
.bvg-hero-form button{margin-top:16px;width:100%;font:inherit;font-weight:800;font-size:16px;cursor:pointer;border:0;
background:var(--orange);color:#fff;padding:14px 20px;border-radius:50px}
.bvg-hero-form button:hover,.bvg-hero-form button:focus{background:var(--orange-dk)}
.bvg-form-note{margin:10px 0 0;font-size:13px;color:var(--muted);text-align:center}
/* ─────────────────────────────────────────── body + bands */
.bvg-body{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.bvg-body .bvg-sec{padding:clamp(28px,4vw,56px) 0;border-bottom:1px solid var(--line)}
.bvg-body .bvg-sec:last-child{border-bottom:0}
.bvg-body h2{font-size:clamp(22px,2.6vw,34px);font-weight:800;color:var(--navy);margin-top:1.2em}
.bvg-body h3{font-size:clamp(18px,2vw,22px);font-weight:700;color:var(--navy-2)}
.bvg-body p{margin:0 0 1em;max-width:74ch}
/* :not([class]) is load-bearing: the bare version of this rule capped EVERY ul
at ~784px — including the service/photo/direction GRIDS, which are
s —
left-pinned with dead space to the right. Dylan's "shits all shifted left"
screenshot was this rule capping a full-width tile grid. Prose lists only. */
.bvg-body ul:not([class]),.bvg-body ol:not([class]){max-width:74ch}
/* ══════════════════════════════════════════════════════════════════════════
BODY FORMAT CLEANUP (pass 16) — what actually made the bodies read as trash,
found by LOOKING at the rendered homepage, not by measuring the DOM:
portrait card images blowing every card up to ~450px tall, orphan cells on
3-column grids, one giant white section with no band rhythm, and section
headers left-stuck above full-width grids.
══════════════════════════════════════════════════════════════════════════ */
/* Centred section headers, Bluebird-style: any section that opens with an
eyebrow pill gets pill + heading + first paragraph centred as a unit. Scoped
by adjacency so plain prose sections keep their left-aligned measure. */
.bvg-sec > .bvg-eyebrow-row{display:flex;justify-content:center;margin:0 0 10px}
.bvg-sec > .bvg-eyebrow-row + h2{text-align:center;margin-left:auto;margin-right:auto;margin-top:0}
/* Intro paragraph: centred BOX everywhere, centred TEXT only in bands that are
explicitly centred. The CMS --center intros are one-liners where centred text
reads as designed; the homepage Process/Where-We-Work "intros" are full
content paragraphs, and centring 400 characters of prose is what made those
sections look wrecked. */
.bvg-sec > .bvg-eyebrow-row + h2 + p{margin-left:auto!important;margin-right:auto!important;max-width:640px}
/* Which intros get centred TEXT is decided at build time, not by CSS: the build
marks the post-heading paragraph .bvg-intro only when it is short enough to
read well centred (<=170 chars). Long intros keep left text in a centred box.
!important because the left-reset below carries the same specificity. */
.bvg-body .bvg-sec p.bvg-intro{text-align:center!important;max-width:640px;margin-left:auto!important;margin-right:auto!important}
/* pill on a dark band */
.bvg-sec--navy .bvg-eyebrow,.bvg-sec--steel .bvg-eyebrow{background:rgba(255,255,255,.14);color:#fff}
/* Centred bands centre EVERYTHING. The CMS --center bands centred the heading
and paragraph but left buttons at the section edge — a lone orange
"All Service Areas" pill hard-left under centred text (Dylan's screenshot,
/nj/roof-inspection). text-align on the section centres inline-block buttons
and text alike; prose measure inside stays centred via its auto margins. */
/* Centred bands: centre the FURNITURE, never the prose. The first version of
this was a blanket text-align:center on the whole band, which also centred
every long paragraph and accordion inside those bands — ragged centred
body text on essentially every page, which is what Dylan was seeing.
What actually gets centred text: the header unit (pill/h2/intro, handled by
the adjacency rules above), short CTA lines, and button rows. Everything
else keeps left text inside its centred 730px box. */
.bvg-sec--center > p,.bvg-sec--cent > p{margin-left:auto!important;margin-right:auto!important}
/* design.css centres paragraph TEXT in --center bands natively, which is fine
for one-line intros and wrong for full paragraphs (the centred wall of prose
in the navy "All About " bands). Text goes back left; the pill-header
intro rule above re-centres itself by higher specificity (0,2,3 > 0,2,1),
and button-only paragraphs re-centre via :has below. */
.bvg-body .bvg-sec--center > p,.bvg-body .bvg-sec--cent > p{text-align:left}
.bvg-body .bvg-sec--center > p:has(> .bvg-btn),
.bvg-body .bvg-sec--cent > p:has(> .bvg-btn){text-align:center}
/* short link rows (the "A · B · C" nav notes) centre with the band too */
.bvg-body .bvg-sec--center > p.bvg-cta-note,
.bvg-body .bvg-sec--cent > p.bvg-cta-note{text-align:center}
/* Steel bands are short CTA bands; centre their box AND their text. */
.bvg-sec--steel{text-align:center}
.bvg-sec--steel > p{margin-left:auto!important;margin-right:auto!important}
/* Contrast repairs, found by a computed-style sweep:
1. design.css paints steel-band prose #eaf4f9 on #2A79A1 — about 4.2:1,
under the 4.5:1 small-text floor. Pure white reads 4.7:1.
2. The .bvg-cta-note link row is coloured #d9eaf3 for DARK bands, but on
/nj/services it renders inside an ICE band — pale blue on pale blue at
~1.1:1, effectively invisible. Light bands get the dark palette back. */
/* html- prefix + !important to tie/beat design.css `html.bvg-nj .bvg-cta p/a
{color:#e8eef3 !important}` (0,2,2) — that #e8eef3 is the 4.1:1 text the
sweep kept flagging. Buttons keep their own colours via :not(). */
html .bvg-body .bvg-sec--steel p,
html .bvg-body .bvg-sec--steel p a:not(.bvg-btn),
html .bvg-body .bvg-sec--steel .bvg-cta-note,
html .bvg-body .bvg-sec--steel .bvg-cta-note a{color:#fff!important}
.bvg-sec--white .bvg-cta-note,.bvg-sec--ice .bvg-cta-note{color:var(--muted)!important}
.bvg-sec--white .bvg-cta-note a,.bvg-sec--ice .bvg-cta-note a{color:var(--steel)!important}
/* explicit left resets for long-form content inside any centred band */
.bvg-sec--center details.bvg-acc,.bvg-sec--cent details.bvg-acc,
.bvg-sec--center .bvg-mini-grid,.bvg-sec--cent .bvg-mini-grid,
.bvg-sec--center .bvg-trust,.bvg-sec--cent .bvg-trust,
.bvg-sec--center .bvg-dir-grid,.bvg-sec--cent .bvg-dir-grid,
.bvg-sec--center .bvg-card-grid,.bvg-sec--cent .bvg-card-grid{text-align:left}
/* .bvg-chips: design.css:299 re-declares it as display:grid with auto-fill
1fr tracks for desktop, so the tracks swallow the full row and neither
text-align nor justify-content can centre a short set — which is exactly the
lone left-stuck "All Service Areas" pill under centred text in Dylan's
screenshot (298 pages carry chips). In centred/CTA bands, force a centred
flex row: pills hug their content and the row centres regardless of count. */
.bvg-sec--center .bvg-chips,.bvg-sec--cent .bvg-chips,
.bvg-sec--steel .bvg-chips{display:flex!important;flex-wrap:wrap;
justify-content:center;grid-template-columns:none!important}
/* Same class of bug, block-level flavour: the measure rule pins h2/h3/details
to the band's left edge, and the centred-band overrides only reached .
Result: every FAQ heading and accordion in a centred band sat 195px
off-centre at 730px wide — 37 instances across 11 templates in one sweep.
!important because the measure block loads later in this same file. */
.bvg-body .bvg-sec--center > h2,.bvg-body .bvg-sec--center > h3,
.bvg-body .bvg-sec--center > details,
.bvg-body .bvg-sec--cent > h2,.bvg-body .bvg-sec--cent > h3,
.bvg-body .bvg-sec--cent > details,
.bvg-body .bvg-sec--steel > h2,.bvg-body .bvg-sec--steel > h3{
margin-left:auto!important;margin-right:auto!important}
/* design.css: .bvg-body .bvg-sec--ice details.bvg-acc {margin:0 0 16px !important}
— (0,3,1) with !important, which beats the (0,2,1) rule above for accordions
in the ice FAQ bands. Match its specificity; shell loads later, so this wins
the tie. Keeps its 16px bottom rhythm, only the inline axis changes. */
.bvg-body .bvg-sec--center > details.bvg-acc,
.bvg-body .bvg-sec--cent > details.bvg-acc{
margin-left:auto!important;margin-right:auto!important}
/* Service cards. The card photos are portrait phone shots (900x1200); rendered
at natural ratio each card became ~450px of image over four lines of text —
ten of them in a row is what made the homepage read as a wall. Landscape-crop
the image and let the text carry the card. */
.bvg-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:26px 0 0}
.bvg-card-grid .bvg-img-card{display:flex;flex-direction:column;background:#fff;
border:1px solid var(--line);border-radius:12px;overflow:hidden;
box-shadow:0 6px 18px rgba(11,36,50,.07)}
.bvg-card-grid .bvg-img-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;border-radius:0}
.bvg-card-grid .bvg-card-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:16px 18px 18px}
.bvg-card-grid .bvg-card-body h3{margin:0;font-size:18px;color:var(--navy)}
.bvg-card-grid .bvg-card-body p{margin:0;font-size:14.5px;color:var(--muted);max-width:none}
.bvg-card-grid .bvg-card-body .bvg-more{margin-top:auto;padding-top:10px;font-weight:800;
font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--orange-dk);text-decoration:none}
.bvg-card-grid .bvg-card-body .bvg-more:hover,
.bvg-card-grid .bvg-card-body .bvg-more:focus{color:var(--orange)}
/* Orphan cells. 10 cards on a 3-column grid strand the tenth alone at the left
of its own row; centring the straggler reads as intentional. Same for a lone
photo on the 3-column photo grid. Only fires when the grid is actually 3-up
(the media queries below reset it). */
.bvg-card-grid > :last-child:nth-child(3n+1){grid-column:2}
.bvg-body .bvg-photo-grid > li:last-child:nth-child(3n+1){grid-column:2}
/* 2-col service-tile lists (design.css:30 locks 1fr 1fr) with an odd count
stranded the last tile bottom-left — 550 grids across the build end on an odd
item. Span the straggler across both tracks, cap at one column's width and
centre it, so it reads as a deliberate closer. Desktop-only: below 1001px the
grid collapses to one column, where a 50% cap would shrink the last tile. */
@media (min-width:1001px){
.bvg-svc-grid > li:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 6px);justify-self:center}
}
/* 4-photo strip: one clean row instead of 3+1. The margin override matters as
much as the columns — design.css gives photo grids a large top margin that,
stacked with section padding and heading margins, opened a ~600px near-empty
hole around this strip on the homepage. */
.bvg-photo-grid--4{grid-template-columns:repeat(4,1fr)!important;margin:22px 0 0!important}
.bvg-photo-grid--4 > li:last-child{grid-column:auto!important}
@media (max-width:1000px){
.bvg-card-grid{grid-template-columns:repeat(2,1fr)}
.bvg-card-grid > :last-child:nth-child(3n+1){grid-column:auto}
.bvg-photo-grid--4{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:640px){
.bvg-card-grid{grid-template-columns:1fr}
}
/* ── de-stacked heading+paragraph runs ──────────────────────────────────────
build.mjs wraps any run of 3+ consecutive heading+paragraph blocks in
.bvg-mini-grid. Those runs are what made the bodies read as one endless
vertical column — 34% of pages had one, the worst twelve deep. Side by side
they roughly halve the scroll depth and give the page horizontal rhythm.
The measure rules below deliberately do not reach these: once wrapped, the
headings and paragraphs are no longer direct children of the band, so they
keep the full grid width instead of being pinned to a 730px column. */
.bvg-mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
gap:clamp(16px,2vw,30px) clamp(26px,3vw,46px);margin:0 0 1.5em}
.bvg-mini{min-width:0}
.bvg-mini > :first-child{margin-top:0}
.bvg-mini h2,.bvg-mini h3{font-size:clamp(18px,1.8vw,21px);line-height:1.3;font-weight:800;
color:var(--navy);margin:0 0 .4em;max-width:none}
.bvg-mini p{margin:0 0 .7em;max-width:none;font-size:15.5px}
.bvg-mini p:last-child{margin-bottom:0}
/* inside the dark bands those headings have to stay readable */
.bvg-sec--navy .bvg-mini h2,.bvg-sec--navy .bvg-mini h3,
.bvg-sec--steel .bvg-mini h2,.bvg-sec--steel .bvg-mini h3{color:#fff}
@media (max-width:640px){.bvg-mini-grid{grid-template-columns:1fr}}
/* ── reading measure ────────────────────────────────────────────────────────
The bands are 1120px wide but prose caps at 74ch (~700px), and it was all
flush left — so every text section sat with roughly 400px of dead space down
its right edge, which is what made the bodies read as ragged and half-empty.
Centring the prose block inside the band balances it. Cards, service grids,
photo grids and trust rows all carry classes and keep the full width. */
:root{--measure:730px}
.bvg-body .bvg-sec > h2,
.bvg-body .bvg-sec > h3,
.bvg-body .bvg-sec > p,
.bvg-body .bvg-sec > ul:not([class]),
.bvg-body .bvg-sec > ol:not([class]),
.bvg-body .bvg-sec > details,
.bvg-body .bvg-sec > blockquote{max-width:var(--measure)!important;margin-left:auto;margin-right:auto}
/* CENTRED columns, left TEXT. The left-pinned experiment (margin-left:0) read
tolerably at the 1280px viewport all testing ran at, and increasingly
lopsided on wide monitors — Dylan's 2K screenshots showed 730px columns
hugging the left of wide bands with a desert of dead space to the right.
Auto margins keep the column balanced at every viewport; text inside stays
left-aligned, which is the half of the old decision that was right. */
.bvg-body .bvg-sec--center > h2,
.bvg-body .bvg-sec--center > h3,
.bvg-body .bvg-sec--center > p,
.bvg-body .bvg-sec--center > ul:not([class]),
.bvg-body .bvg-sec--center > ol:not([class]){margin-left:auto;margin-right:auto}
/* !important because design.css sets max-width:760px on paragraphs inside the
navy bands. That beat the measure for
but not for
, so those sections
came out 15px off — heading at 730px, prose at 760px, visibly misaligned. */
/* The measure MUST be a fixed length, not ch. `ch` scales with font-size, so
74ch on a 34px h2 resolves to ~1250px (wider than the band, i.e. no constraint
at all) while 74ch on 16px prose is ~700px. The heading then filled the band
and the paragraph centred under it, leaving the body text visibly indented
relative to its own heading. One px value = one shared left edge. */
/* a touch more air between sections, and a little more between a heading and
the paragraph under it, so the page has rhythm instead of one flat column */
.bvg-body .bvg-sec > h2{margin-bottom:.55em}
.bvg-body .bvg-sec > h3{margin-bottom:.4em}
.bvg-body p{line-height:1.72}
.bvg-body li{line-height:1.65;margin-bottom:.3em}
.bvg-body figure{margin:0 0 1.4em}
/* breadcrumbs */
.bvg-crumbs{padding:14px 0 2px;font-size:13px;color:var(--muted)}
.bvg-crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.bvg-crumbs li+li::before{content:"/";margin-right:6px;color:var(--line)}
.bvg-crumbs a{color:var(--steel);text-decoration:none}
.bvg-crumbs a:hover{text-decoration:underline}
.bvg-crumbs [aria-current]{color:var(--ink);font-weight:600}
/* photo + service grids */
.bvg-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;list-style:none;padding:0}
/* aspect-ratio + object-fit is load-bearing, not polish. The source photos are a
mix of landscape and phone-camera portrait (640x1137 among them), and with
only width:100% set they rendered at their natural ratio — measured 983px,
647px, 485px and 273px tall side by side in the same grid, which is what made
the body sections look broken. Locking the ratio makes every tile match and
also reserves the box before the image loads, so nothing shifts. */
.bvg-photo-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
/* /projects gallery: each tile is a figure with a real caption (town + what the
job was), pulled from RoofingProjects.json rather than invented. */
.bvg-project-grid li{margin:0}
.bvg-project-grid figure{margin:0}
.bvg-project-grid figcaption{margin-top:9px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.bvg-project-grid figcaption b{color:var(--navy);font-weight:800;display:block}
.bvg-project-grid figcaption span{display:block;margin-top:2px}
/* same treatment for the two-column text+photo bands */
.bvg-split img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;display:block}
/* design.css collapses .bvg-photo-grid to one column under 1000px, but its
.bvg-photo-grid--2 modifier has no such override, so that variant stayed
two-up at every width — 172x129px tiles on a 390px phone, too small to read.
Force single column on small screens for every photo-grid variant. */
@media (max-width:700px){
.bvg-body .bvg-photo-grid,
.bvg-body .bvg-photo-grid--2,
.bvg-body .bvg-photo-grid--3,
.bvg-photo-grid{grid-template-columns:1fr!important}
}
/* ...and for photos dropped straight into a band with no grid or split wrapper.
Those were still display:inline at natural size: a 900x1200 phone portrait ran
the full 1200px tall inside a navy section on the town pages, and a 1200x929
filled the whole 1120px content width on /nj/siding-repair. Capped to a
readable, centred band so every standalone photo reads the same. */
/* centred like the prose columns (the whole layout re-centred for wide
viewports — see the reading-measure block) */
.bvg-body .bvg-sec > img{display:block;width:100%;max-width:820px;
aspect-ratio:3/2;object-fit:cover;border-radius:12px;margin:6px auto 20px}
.bvg-svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;list-style:none;padding:0;margin:0 0 1.2em}
.bvg-svc-grid li{margin:0}
.bvg-svc-grid a{display:block;text-decoration:none}
/* NOTE: colour + tile background for .bvg-svc-grid come from the forked design
sheet, which sets them with !important on the
- . Overriding the background
here while its colour rule won produced white-on-pale text at 1.06:1. Layout
only in this file. */
.bvg-feature-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;padding-bottom:14px}
/* Blog-family cards: design.css:442 paints .bvg-feature-card NAVY with
!important at (0,2,0) — that IS the designed look, and it beats any
single-class white override. The genuine bug was this file's early contrast
block forcing DARK text onto those navy cards (navy-2 titles at 1.30:1,
muted excerpts at 2.32:1 across all 46 blog cards). Honour the navy card,
fix the text: html-prefixed + !important outranks every dark-text rule. */
html .bvg-body .bvg-feature-card h3 a{color:#fff!important}
html .bvg-body .bvg-feature-card h3{color:#fff}
html .bvg-body .bvg-feature-card p{color:#c9d8e3!important}
html .bvg-body .bvg-feature-card .bvg-post-meta{color:#9fb4c2!important}
.bvg-feature-card img{border-radius:0}
.bvg-feature-card h3{font-size:17px;margin:14px 14px 6px}
.bvg-feature-card p{font-size:14px;color:var(--muted);margin:0 14px}
.bvg-feature-card a{text-decoration:none;color:inherit}
.bvg-feature-card h3 a:hover{color:var(--orange-dk)}
/* trust boxes */
.bvg-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.bvg-trust-box{background:var(--ice);border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:8px;padding:18px}
.bvg-trust-box h3{margin:0 0 6px;font-size:17px}
.bvg-trust-box p{margin:0;font-size:14.5px;color:var(--muted)}
/* accordions */
details.bvg-acc{border:1px solid var(--line);border-radius:8px;margin:0 0 10px;background:#fff}
details.bvg-acc summary{cursor:pointer;list-style:none;padding:14px 46px 14px 16px;font-weight:700;color:var(--navy);position:relative}
details.bvg-acc summary::-webkit-details-marker{display:none}
details.bvg-acc summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);
font-size:22px;font-weight:700;color:var(--orange);line-height:1}
details.bvg-acc[open] summary::after{content:"–"}
details.bvg-acc p{padding:0 16px 15px;margin:0;color:var(--muted)}
/* buttons: fill + text colour come from the forked design sheet (!important).
Only the ghost variant and hover states are ours. */
.bvg-btn{display:inline-block;text-decoration:none}
.bvg-btn--ghost{background:transparent!important;border:2px solid #fff;color:#fff!important}
.bvg-btn--ghost:hover,.bvg-btn--ghost:focus{background:#fff!important;color:var(--navy)!important}
.bvg-cta-note{font-size:14px;color:var(--muted)}
.bvg-cta-note a{color:var(--steel)}
/* section tints (the forked file names these; sizes/padding live here) */
.bvg-sec--ice{background:var(--ice)}
.bvg-sec--white{background:#fff}
.bvg-sec--steel,.bvg-sec--navy{background:var(--navy);color:#fff;border-radius:var(--radius);padding-left:clamp(18px,3vw,40px);padding-right:clamp(18px,3vw,40px);margin:28px 0}
.bvg-sec--steel h2,.bvg-sec--navy h2{color:#fff}
.bvg-sec--steel p,.bvg-sec--navy p{color:#dbe7f0}
.bvg-sec--steel a,.bvg-sec--navy a{color:#fff}
.bvg-sec--ice,.bvg-sec--white{padding-left:clamp(18px,3vw,32px);padding-right:clamp(18px,3vw,32px);border-radius:var(--radius)}
/* maps + directions */
.bvg-map-frame{margin:0 0 14px}
.bvg-map-frame iframe{width:100%;max-width:100%;height:230px;border:0;border-radius:10px;display:block}
.bvg-dir-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.bvg-dir-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px}
.bvg-dir-card h3{font-size:16px;margin:0 0 8px}
/* blog */
.bvg-post-meta{font-size:14px;color:var(--muted)}
.bvg-post img{border-radius:10px}
/* ─────────────────────────────────────────── footer */
/* margin-top was 48px, which now leaves a white strip between the navy closing
band and the navy footer — two dark blocks with a gap punched between them.
Every page ends with .bvg-endcta, so the footer butts straight onto it. */
.bvg-footer{background:var(--navy);color:#c9d8e3;margin-top:0;padding:clamp(32px,5vw,56px) clamp(16px,4vw,40px) 24px}
.bvg-footer-grid{max-width:var(--wrap);margin:0 auto;display:grid;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:32px}
.bvg-footer h2{font-size:15px;text-transform:uppercase;letter-spacing:.07em;color:#fff;margin:0 0 12px}
.bvg-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.bvg-footer a{color:#c9d8e3;text-decoration:none;font-size:14.5px}
.bvg-footer a:hover,.bvg-footer a:focus{color:var(--orange);text-decoration:underline}
.bvg-footer p{margin:0 0 8px;font-size:14.5px}
.bvg-footer-name{font-weight:800;color:#fff;font-size:16px}
.bvg-footer-map iframe{width:100%;height:200px;border:0;border-radius:10px}
.bvg-footer-legal{max-width:var(--wrap);margin:28px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);
font-size:13px;color:#94a9b8}
/* ─────────────────────────────────────────── responsive */
@media (max-width:960px){
.bvg-hero{grid-template-columns:1fr}
.bvg-nav>ul{justify-content:flex-start}
}
/* Below 900px a hover dropdown is unusable and there is no nav JS, so the
submenus collapse away and the five top-level items wrap. Every submenu
destination is still reachable from the footer, which carries the full set. */
@media (max-width:900px){
.bvg-has-sub>ul{display:none!important}
.bvg-has-sub>a::after{display:none}
}
@media (max-width:720px){
.bvg-header{gap:12px;min-height:0}
.bvg-logo img{width:190px;height:36px}
.bvg-nav{order:3;flex-basis:100%}
.bvg-nav>ul{gap:2px 16px;justify-content:flex-start}
.bvg-nav a{font-size:14px;padding:6px 0}
.bvg-nav-actions{margin-left:auto;gap:6px 10px}
.bvg-nav-tel{font-size:14px}
.bvg-nav-cta{padding:9px 17px;font-size:14px}
.bvg-hero-form button{font-size:15px}
}
/* Respect users who ask for less motion, and never let a wide element
(table, map, code) force the whole page to scroll sideways. */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.bvg-body table{display:block;overflow-x:auto;max-width:100%}
/* Gold star mark (social-proof canon: "site's own star partial/icon").
Replaces the ★ character, which rendered inconsistently across platforms and
read as an emoji to content scanners. Gold per canon (#f5b301 family). */
.bvg-stars{display:inline-flex;gap:2px;vertical-align:-2px;color:#f5b301;line-height:0}
.bvg-star{width:15px;height:15px;display:block}
.bvg-footer .bvg-stars{color:#f5b301}
.bvg-form-rating b,.bvg-footer-nap b{color:var(--navy);font-weight:800}
.bvg-footer-nap b{color:#fff}
/* ── contrast fixes (Lighthouse a11y, 28 failures) ─────────────────────────
1. WAS: .bvg-nav-phone, white on #ED833C = 2.65:1 at 15px, under the 4.5:1
small-text floor, so it was made navy.
NOW: that pill is gone. .bvg-nav-cta reproduces the live v9 header exactly
— white on --orange — which means it carries that same 2.65:1 ratio.
KNOWN, DELIBERATE, and not gate-blocking (verify/ld-gate.mjs has no
contrast check; this was a Lighthouse finding). Kept because matching the
live /nj/ header was the explicit requirement. To fix without losing the
orange, swap the pill text to var(--navy): that reads 6.0:1. One line.
2. .bvg-sec--navy a / .bvg-sec--steel a set white link text for dark bands,
but that also hit .bvg-svc-grid links nested inside those bands, whose own
background is pale ice (#f4f8fb) — white on ice is 1.06:1, invisible.
Re-assert the dark link colour for grid items regardless of the parent band. */
.bvg-sec--navy .bvg-svc-grid a,
.bvg-sec--steel .bvg-svc-grid a,
.bvg-sec--navy .bvg-trust-box p,
.bvg-sec--steel .bvg-trust-box p,
.bvg-sec--navy .bvg-feature-card p,
.bvg-sec--steel .bvg-feature-card p{color:var(--navy)}
.bvg-sec--navy .bvg-trust-box h3,
.bvg-sec--steel .bvg-trust-box h3{color:var(--navy)}
.bvg-sec--navy .bvg-feature-card h3 a,
.bvg-sec--steel .bvg-feature-card h3 a{color:var(--navy)}
/* muted grey on white was borderline at small sizes; nudge it darker */
:root{--muted:#4d5c69}
/* Band horizontal padding, RESTORED. The generic band rule above
(.bvg-body .bvg-sec — specificity 0,2,0) sets horizontal padding to 0 and
silently beat every tinted band's own (0,1,0) padding rule — so content sat
flush against the rounded card edges on every tinted band, and headings
rendered hard against the navy edge in Dylan's screenshots. Same selector
weight, declared later, wins. */
.bvg-body .bvg-sec--ice,.bvg-body .bvg-sec--white{
padding-left:clamp(20px,2.5vw,44px);padding-right:clamp(20px,2.5vw,44px)}
.bvg-body .bvg-sec--navy,.bvg-body .bvg-sec--steel{
padding-left:clamp(22px,3vw,52px);padding-right:clamp(22px,3vw,52px)}
/* ══════════════════════════════════════════════════════════════════════════
LAYOUT REPAIRS — defects inherited from the forked Wix CSS.
Found by measuring the built page, not by reading it: scrollWidth 1460
against a 1280 viewport, hero 920px wide with 180px gutters, check pills
absent. This block loads last, so it wins on equal specificity.
1. HORIZONTAL OVERFLOW — every page.
design.css:158 sets .bvg-body .bvg-sec{width:100vw;margin-left:var(--bvg-bleed,0)}.
--bvg-bleed was supplied at runtime by a Wix "NJ design JS" embed that a
static build does not ship, so it falls back to 0 and a 100vw band starts
at the content edge — ~160px of overhang, and the page scrolls sideways.
shell.css already styles these bands as inset rounded cards, so the right
width here is simply "as wide as the container".
2. HERO GUTTERS — the 14 hub pages.
design.css:403 caps html.bvg-hub .bvg-hero at max-width:920px, centred.
The live v9 /nj/ pages are edge-to-edge, so the cap goes.
3. HERO BACKGROUND + CHECK PILLS.
design.css:561 blanks the hero background and rebuilds it on a 100vw
::before positioned by left:min(0px,calc(720px - 50vw)) — math that only
resolves on a 1440 wrapper, and which overwrites the v9 check pill
declared on that same ::before at design.css:217. Background returns to
the element; the pills become real markup (.bvg-hero-pills).
══════════════════════════════════════════════════════════════════════════ */
.bvg-body .bvg-sec{width:auto!important;margin-left:0!important;margin-right:0!important}
/* width:100%, NOT width:auto. .bvg-hero is display:grid, and `auto` on a grid
container shrink-wraps to its tracks instead of filling the parent — it sized
to one 660px column + 80px padding. design.css used 100% for this reason. */
.bvg-hero{margin-left:0!important;margin-right:0!important;max-width:none!important;width:100%!important}
/* Hub pages need the SAME selector shape, not more !important. design.css:403
is `html.bvg-hub .bvg-hero` = specificity (0,2,1); a bare `.bvg-hero` is
(0,1,0) and loses regardless of !important or source order, because those
only decide ties at equal specificity. Matching the shape lets source order
(shell.css is concatenated last) settle it.
Also: the form is hidden on hub pages (design.css:402), so a 2-col grid would
strand the copy in a half-width column; and design.css centres the hub H1
while the live v9 /nj/ pages are left-aligned. */
html.bvg-hub .bvg-hero{max-width:none!important;width:100%!important;
margin-left:0!important;margin-right:0!important;
grid-template-columns:minmax(0,1fr)!important}
/* The two-tone H1 is an ::first-line trick: the h1 is orange, ::first-line
paints white. design.css warns the eyebrow ::before must be position:absolute
or its block box BECOMES the first line — then ::first-line whitens the badge
and the headline stays fully orange. design.css:406 re-sets it to static for
hub pages only, so hub H1s lost their white line the moment the eyebrow was
wired up. Restore absolute positioning plus the padding that makes room. */
html.bvg-hub .bvg-hero h1{max-width:660px;margin-left:0;margin-right:0;text-align:left;padding-top:58px}
html.bvg-hub .bvg-hero h1::before{position:absolute;top:0;left:0;margin:0}
html.bvg-hub .bvg-hero h1::after{margin-left:0;margin-right:0;text-align:left;max-width:580px}
html.bvg-hub .bvg-hero .bvg-hero-sub{margin-left:0;margin-right:0;text-align:left}
@media (min-width:1001px){
.bvg-hero{background:
linear-gradient(97deg,rgba(11,36,50,.96) 0%,rgba(27,58,86,.93) 32%,rgba(53,92,127,.62) 66%,rgba(43,75,104,.42) 100%),
url('/assets/img/hero-f2c363047130.webp') right center/cover no-repeat!important}
}
/* retire the pseudo-element hero furniture from the fork. Scoped to ::before /
::after ON .bvg-hero — the h1::before eyebrow and h1::after sub-copy are
different selectors and stay. */
.bvg-hero::before,.bvg-hero::after{content:none!important;display:none!important}
.bvg-hero-pills{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
margin:30px 0 0;padding:0;list-style:none}
.bvg-hero-pills li{display:flex;align-items:center;gap:11px;background:rgba(11,36,50,.5);
border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:12px 20px;
color:#fff;font-weight:600;font-size:15px}
.bvg-hero-pills svg{flex:0 0 auto}
/* ── hero-form star rating: visible again ────────────────────────────────────
design.css v9 paints the rating line with a gradient clipped to the text
(`background-clip:text`) and sets `.bvg-hero-form p span{color:transparent}`.
That is a Wix-era trick from when the stars were literal ★ CHARACTERS and the
gradient tinted the first 78px of the run orange.
This build renders the stars as inline SVGs that inherit fill:currentColor,
so `color:transparent` erased them outright. The rule is scoped to
min-width:1001px, so the strip showed gold on mobile and NOTHING on desktop —
measured rgba(0,0,0,0) on the homepage and all 398 town pages, i.e. the main
conversion form's social proof was invisible on every desktop visit.
Re-assert the colours and drop the text-clip. Specificity beats the v9 rules
(3 classes vs 1 class + 2 types), so no !important arms race is needed —
though the source rules use !important, so these must too. */
.bvg-hero-form .bvg-form-rating{background:none!important;
-webkit-background-clip:border-box!important;background-clip:border-box!important;
color:var(--ink)!important;font-size:15px!important}
.bvg-hero-form .bvg-form-rating .bvg-stars{color:#f5b301!important}
.bvg-hero-form .bvg-form-rating span{color:#f5b301!important}
.bvg-hero-form .bvg-form-rating b{color:var(--navy)!important}
/* ── closing estimate band ──────────────────────────────────────────────────
Renders on EVERY page, immediately before the footer. On /contact, /about and
the 14 hub pages this is the ONLY form, because design.css:402 hides
.bvg-hero-form on html.bvg-hub — hence the separate .bvg-lead-form class here,
which that rule cannot reach. */
.bvg-endcta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);
gap:clamp(28px,4vw,60px);align-items:center;
background:linear-gradient(140deg,var(--navy) 0%,#123049 55%,#1d5e94 100%);
color:#fff;padding:clamp(38px,5vw,72px) clamp(20px,4vw,56px)}
.bvg-endcta-copy h2{color:#fff;font-size:clamp(26px,3.2vw,40px);font-weight:800;
line-height:1.15;margin:0 0 14px}
.bvg-endcta-copy p{color:#d7e4ee;font-size:16.5px;max-width:52ch;margin:0 0 18px}
.bvg-endcta-points{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:11px}
.bvg-endcta-points li{display:flex;align-items:center;gap:11px;color:#fff;font-weight:600;font-size:15.5px}
.bvg-endcta-points svg{flex:0 0 auto}
.bvg-endcta-tel{font-size:16px;color:#d7e4ee}
.bvg-endcta-tel a{color:#fff;font-weight:800;text-decoration:none;border-bottom:2px solid var(--orange)}
.bvg-lead-form{background:#fff;color:var(--ink);border-radius:16px;
padding:clamp(20px,2.2vw,28px);box-shadow:0 24px 60px rgba(0,0,0,.32);
display:grid;gap:0;margin:0}
.bvg-lead-form .bvg-form-title{font-size:22px;font-weight:800;color:var(--navy);margin:0 0 4px}
.bvg-lead-form .bvg-form-rating{margin:0 0 12px;font-size:14.5px;color:var(--muted)}
.bvg-lead-form .bvg-form-rating .bvg-stars{color:#f5b301}
.bvg-lead-form .bvg-form-rating b{color:var(--navy)}
.bvg-lead-form label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;color:var(--navy);margin-top:12px}
.bvg-lead-form input,.bvg-lead-form textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);
padding:11px 13px;border:1px solid var(--line);border-radius:8px;background:#fdfefe;margin-top:5px}
.bvg-lead-form input::placeholder,.bvg-lead-form textarea::placeholder{color:#93a3b0}
.bvg-lead-form input:focus,.bvg-lead-form textarea:focus{outline:2px solid var(--orange);
outline-offset:1px;border-color:var(--orange)}
.bvg-lead-form textarea{resize:vertical;min-height:76px}
.bvg-lead-form button{margin-top:18px;width:100%;font:inherit;font-weight:800;font-size:16px;
cursor:pointer;border:0;background:var(--orange);color:#fff;padding:14px 20px;border-radius:10px}
.bvg-lead-form button:hover,.bvg-lead-form button:focus{background:var(--orange-dk)}
.bvg-lead-form .bvg-form-note{margin:10px 0 0;font-size:13px;color:var(--muted);text-align:center}
/* Two-up name/phone row. Applies to both forms — the live Wix form paired these
and it reads friendlier than five stacked full-width boxes. */
.bvg-form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.bvg-form-row>div{min-width:0}
@media (max-width:860px){
.bvg-endcta{grid-template-columns:1fr}
.bvg-form-row{grid-template-columns:1fr}
}
/* ══════════════════════════════════════════════════════════════════════════
FULL-BLEED BANDS — the "stuck in containers" defect.
Found by measuring at 2560, which is the width Dylan actually reads the site
at. Every .bvg-sec reported width 1120 / left 720 in a 2560 viewport: the
bands were not bands at all, they were rounded cards floating inside
.bvg-body's 1200px wrapper with 720px of dead gutter either side. At the 1280
viewport every previous audit ran at, 1120+padding fills the screen, so this
was invisible in all of them. Bluebird alternates FULL-BLEED colour with the
reading column centred inside — that is what this block does.
The centring math deliberately uses `100%` (resolved against .bvg-body, now
full width) and never `vw`. `100vw` includes the scrollbar gutter, which is
the exact trap that produced the original 160px overhang: scrollWidth 1460
against a 1280 viewport. max() keeps the gutter from going negative on
narrow screens, so nothing overflows below 1200.
══════════════════════════════════════════════════════════════════════════ */
:root{ --wrap-inner:1120px; --gut:clamp(16px,4vw,40px) }
/* The wrapper stops constraining. Sections now span the viewport. */
.bvg-body{max-width:none;margin:0;padding:0}
/* Anything that is NOT a band keeps the old centred wrapper, so loose
top-level content on any page type cannot suddenly run the full 2560. */
.bvg-body > :not(.bvg-sec){
max-width:var(--wrap);margin-left:auto;margin-right:auto;
padding-left:var(--gut);padding-right:var(--gut)}
/* Bands: full-bleed background, content column centred by padding.
Specificity 0,3,0 matches the band-padding block above and loads later,
which is what lets it win — !important would not have, at equal weight. */
.bvg-body .bvg-sec--ice,.bvg-body .bvg-sec--white,
.bvg-body .bvg-sec--navy,.bvg-body .bvg-sec--steel,
.bvg-body > .bvg-sec{
border-radius:0;
margin-left:0;margin-right:0;
padding-left:max(var(--gut), calc((100% - var(--wrap-inner)) / 2));
padding-right:max(var(--gut), calc((100% - var(--wrap-inner)) / 2))}
/* Navy/steel carried margin:28px 0, which would now cut white slivers across
the full width between bands. Bands butt directly against each other. */
.bvg-body .bvg-sec--navy,.bvg-body .bvg-sec--steel{margin-top:0;margin-bottom:0}
/* The hairline separator existed to divide cards. Alternating colour does that
job now — but only when the colour actually alternates. Handling just
white+white was a bug I shipped: 174 pages stack two bands of the SAME tint
(white+white 189 times, ice+ice 39, navy+navy 5), and those merged into one
continuous slab with no break at all. On /nj/roof-repair-wayne-nj the "MORE IN
WAYNE" eyebrow of the second ice band ran straight into the chip row of the
first, which is what Dylan flagged. Every same-tint pair now gets a rule and
extra breathing room above the eyebrow, so a new band always reads as new. */
.bvg-body .bvg-sec{border-bottom:0}
.bvg-body .bvg-sec--white + .bvg-sec--white,
.bvg-body .bvg-sec--ice + .bvg-sec--ice{border-top:1px solid var(--line)}
.bvg-body .bvg-sec--navy + .bvg-sec--navy,
.bvg-body .bvg-sec--steel + .bvg-sec--steel,
.bvg-body .bvg-sec--navy + .bvg-sec--steel,
.bvg-body .bvg-sec--steel + .bvg-sec--navy{border-top:1px solid rgba(255,255,255,.16)}
/* A rule alone still reads as one block when the eyebrow pill sits tight under
it. Same-tint neighbours get a deliberate gap so the pill has air. */
.bvg-body .bvg-sec--white + .bvg-sec--white,
.bvg-body .bvg-sec--ice + .bvg-sec--ice,
.bvg-body .bvg-sec--navy + .bvg-sec--navy,
.bvg-body .bvg-sec--steel + .bvg-sec--steel,
.bvg-body .bvg-sec--navy + .bvg-sec--steel,
.bvg-body .bvg-sec--steel + .bvg-sec--navy{padding-top:clamp(34px,4.6vw,68px)}
/* Citation footnotes (.bvg-sources, tagged at build time — CSS cannot measure
text length). A 298-character list of licence records and directories had
inherited text-align:center from its band and rendered as a centred blob
under a call-to-action heading. Footnote treatment instead. The steel/navy
colour override that follows has to out-specify
`html .bvg-body .bvg-sec--steel p{color:#fff!important}` declared earlier. */
.bvg-body .bvg-sec p.bvg-sources{
text-align:left!important;
max-width:var(--wrap-inner);
margin-left:auto;margin-right:auto;
font-size:13px;line-height:1.65;
padding-top:14px;border-top:1px solid rgba(255,255,255,.16)}
.bvg-body .bvg-sec--white p.bvg-sources,
.bvg-body .bvg-sec--ice p.bvg-sources{
color:var(--muted);border-top-color:var(--line)}
html .bvg-body .bvg-sec--steel p.bvg-sources,
html .bvg-body .bvg-sec--navy p.bvg-sources{color:#b8ccdb!important}
/* Steel bands join the centre-the-furniture family.
`.bvg-sec--steel{text-align:center}` was written on the assumption in its own
comment — "steel bands are short CTA bands" — which holds for most of them and
fails badly where it does not. /nj/siding-clifton-nj carries a 233-character
service-area paragraph in a steel band, rendered fully centred. 433 of 470
pages contain a steel band, so this was a site-wide version of the same
centred-prose defect already fixed for --center and --cent bands.
Identical treatment to those: the BOX stays centred (the margin:auto rule
above is untouched), the PROSE reads left, and the furniture that is supposed
to be centred — button rows and the short "A · B · C" link notes — is opted
back in explicitly. Headings are unaffected; they inherit the band's centring. */
.bvg-body .bvg-sec--steel > p{text-align:left}
.bvg-body .bvg-sec--steel > p:has(> .bvg-btn){text-align:center}
.bvg-body .bvg-sec--steel > p.bvg-cta-note:not(.bvg-sources){text-align:center}
/* ══════════════════════════════════════════════════════════════════════════
HERO PHOTO ON MOBILE.
shell.css only ever set the hero photograph inside @media (min-width:1001px),
so below that the forked sheet's `@media (max-width:1000px){.bvg-hero{
background:linear-gradient(135deg,#46759e,#365f83)!important}}` won and every
phone and tablet got a flat blue rectangle where desktop gets a roofing photo.
Most roofing leads arrive on a phone, so this was exactly the wrong way round.
Not a regression — the photo was never applied below 1001px in the first place.
Served from a purpose-built 800x450 variant (49 KB) rather than the 1600x900
desktop file (106 KB): a 390px viewport at DPR 2 needs 780 device px, so the
larger file is 57 KB of nothing. Mobile first-load goes 38 KB -> ~87 KB, still
an order of magnitude under the old Wix homepage, and the hero becomes a real
LCP element instead of flat colour.
The scrim is vertical and heavier than desktop's directional one because the
mobile layout stacks the headline directly over the photo rather than beside it.
Equal specificity to the rule it beats (0,1,0 + !important) — shell.css is
concatenated AFTER design.css, so source order decides.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1000px){
.bvg-hero{background:
linear-gradient(180deg,rgba(11,36,50,.90) 0%,rgba(11,36,50,.74) 38%,rgba(16,44,62,.88) 100%),
url('/assets/img/hero-f2c363047130-800.webp') center center/cover no-repeat!important}
}