/* BQ Painting V4 — static HTML/CSS/JS */
:root{
--navy:#0e2d45;--navy2:#173f5d;--red:#b63a3a;--teal:#068c8d;--green:#5a9152;
--ink:#173047;--muted:#5c6f7f;--line:#dbe5eb;--soft:#f4f7f9;--soft2:#edf4f7;
--white:#fff;--shadow:0 14px 40px rgba(14,45,69,.10);--radius:12px;
--serif:Georgia,'Times New Roman',serif;--sans:Arial,Helvetica,sans-serif;--max:1180px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--sans);color:var(--ink);background:#fff;font-size:16px;line-height:1.58}body.modal-open{overflow:hidden}img{max-width:100%;display:block}a{color:inherit}button,input,select{font:inherit}.container{width:min(var(--max),calc(100% - 48px));margin:auto}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.eyebrow{margin:0 0 8px;text-transform:uppercase;letter-spacing:.18em;font-size:.73rem;font-weight:900;color:var(--teal)}h1,h2,h3,.display,.section-title{font-family:var(--serif);color:var(--navy);line-height:1.06}.display{font-size:clamp(2.7rem,5vw,4.7rem);margin:.12em 0 .3em}.section-title{font-size:clamp(2rem,3.4vw,3.05rem);margin:.18em 0 .28em}.lead{font-size:1.12rem;color:#405667;max-width:64ch}.muted{color:var(--muted)}.section{padding:72px 0}.soft{background:var(--soft)}.soft-blue{background:linear-gradient(180deg,#f8fbfc,var(--soft2))}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}.section-head p{max-width:62ch;margin:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:6px;padding:13px 20px;text-decoration:none;font-weight:800;cursor:pointer;transition:.18s}.btn:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(0,0,0,.08)}.btn-primary{background:var(--red);color:#fff}.btn-secondary{background:#fff;color:var(--navy);border-color:#9dacb8}.text-link{text-decoration:none;font-weight:800}.text-link:hover{text-decoration:underline}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #65bfe8;outline-offset:3px}
/* Header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);border-bottom:1px solid #e6edf2;backdrop-filter:blur(9px)}.header-inner{height:104px;display:flex;align-items:center;gap:32px}.brand{display:flex;align-items:center;margin-right:auto}.brand img{width:235px;height:auto;max-height:88px;object-fit:contain}.nav{display:flex;align-items:center;gap:28px}.nav a{font-size:.93rem;font-weight:800;text-decoration:none;position:relative;padding:40px 0}.nav a.active:after,.nav a:hover:after{content:'';position:absolute;left:0;right:0;bottom:25px;height:3px;border-radius:2px;background:var(--red)}.mobile-toggle{display:none;border:0;background:none;font-size:1.8rem;color:var(--navy);padding:8px;cursor:pointer}
/* Hero, intentionally photo-light */
.hero-compact{padding:54px 0;background:linear-gradient(105deg,#fff 0%,#fff 58%,#f0f5f7 100%);border-bottom:1px solid var(--line)}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}.hero-copy{max-width:650px}.hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:24px}.call-link{font-weight:800;text-decoration:none;color:var(--navy)}
.pending-media{min-height:330px;border:1px solid #cad7df;border-radius:16px;position:relative;overflow:hidden;background:linear-gradient(145deg,#f7fafb,#e8f0f3);box-shadow:var(--shadow);background-size:cover;background-position:center}.pending-media.is-ready .pending-overlay{display:none}.pending-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:32px;text-align:center}.pending-overlay-inner{max-width:320px}.pending-badge{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:.72rem;font-weight:900;letter-spacing:.1em;color:var(--teal);text-transform:uppercase}.pending-overlay h3{font-size:1.55rem;margin:14px 0 7px}.pending-overlay p{margin:0;color:var(--muted)}.pending-file{display:inline-block;margin-top:12px;padding:6px 9px;border-radius:5px;background:#fff;color:#496071;font-size:.78rem;border:1px solid var(--line)}.worker-pending{min-height:290px}
/* Trust */
.trust-strip{background:#f5f8fa;border-bottom:1px solid var(--line)}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}.trust-item{display:flex;gap:12px;align-items:center;padding:19px 20px;border-right:1px solid var(--line)}.trust-item:last-child{border-right:0}.trust-icon{width:42px;height:42px;flex:0 0 42px;border:2px solid #aab9c4;border-radius:50%;display:grid;place-items:center;color:var(--navy)}.trust-icon svg{width:24px;height:24px}.trust-item b{display:block;color:var(--navy)}.trust-item small{color:var(--muted);display:block}
/* cards */
.service-grid,.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.service-card,.photo-card,.value-card,.area-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 24px rgba(14,45,69,.055)}.service-card img,.photo-card img{width:100%;height:220px;object-fit:cover}.service-card-body,.photo-card-body{padding:18px}.service-card h3,.photo-card h3,.value-card h3,.area-card h3{font-size:1.3rem;margin:0 0 7px}.service-card p,.photo-card p{margin:0;color:var(--muted)}.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}.split>img{width:100%;height:390px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}.values{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.value-card{padding:24px}.service-number-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.number-card{padding:25px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}.number-card .num{font-size:.73rem;color:var(--red);font-weight:900;letter-spacing:.1em}.number-card h3{font-size:1.3rem;margin:13px 0 7px}.additional-list{columns:3;column-gap:42px;margin-top:18px;padding-left:20px}.additional-list li{break-inside:avoid;padding:7px 0;border-bottom:1px solid var(--line)}.process{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.process-card{text-align:center;padding:22px}.step{width:45px;height:45px;border-radius:50%;background:#dff1f2;color:#067d7e;font-weight:900;display:grid;place-items:center;margin:0 auto 11px}
/* reviews */
.platform-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 26px}.platform-tile{height:82px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:10px;text-decoration:none;box-shadow:0 6px 18px rgba(14,45,69,.045);transition:.18s}.platform-tile:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(14,45,69,.08)}.platform-tile img{max-width:150px;max-height:44px}.reviews-layout{display:grid;grid-template-columns:1.08fr 1.62fr;gap:18px}.review-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:23px;box-shadow:0 8px 24px rgba(14,45,69,.05)}.review-featured{background:linear-gradient(180deg,#fff,#fbfdfe)}.review-side-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.review-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.review-card-head img{width:auto;max-height:27px;max-width:105px}.review-card blockquote{margin:0;color:#344d5f;line-height:1.65}.review-card .review-city{display:block;margin-top:14px;color:var(--muted);font-size:.82rem}.review-link{display:inline-block;margin-top:16px;font-weight:800;text-decoration:none;color:var(--navy)}.review-link:hover{text-decoration:underline}
/* estimate final */
.estimate-final{background:#f4f7f9;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:42px 0}.estimate-grid{display:grid;grid-template-columns:.8fr 1.5fr;gap:42px;align-items:center}.estimate-form{display:grid;grid-template-columns:1fr 1fr 1fr 1.15fr auto;gap:10px;align-items:center}.field{width:100%;padding:13px 14px;border:1px solid #cbd7df;border-radius:6px;background:#fff;color:var(--ink)}.form-note{font-size:.78rem;color:var(--muted);margin:10px 0 0}.estimate-note{grid-column:1/-1;margin:0}
/* About */
.about-opening{padding:60px 0 30px}.about-opening-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}.about-story{max-width:780px;margin:0 auto 30px;text-align:center}.worker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* Our Work comparison sliders */
.filter-row{display:flex;gap:9px;flex-wrap:wrap;margin:24px 0 30px}.filter-btn{border:1px solid #cbd7df;background:#fff;color:var(--navy);border-radius:999px;padding:9px 16px;font-weight:800;cursor:pointer}.filter-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}.ba-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}.ba-project{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 10px 28px rgba(14,45,69,.06)}.ba-project[hidden]{display:none}.ba-stage{--pos:50%;position:relative;aspect-ratio:16/10;overflow:hidden;background:#e8eef2;touch-action:none}.ba-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}.ba-stage .ba-after{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}.ba-divider{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12);transform:translateX(-1px);pointer-events:none}.ba-handle{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);width:43px;height:43px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;font-weight:900;box-shadow:0 4px 16px rgba(0,0,0,.2);pointer-events:none}.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.ba-label{position:absolute;top:12px;z-index:3;padding:5px 9px;border-radius:4px;color:#fff;font-size:.7rem;font-weight:900;letter-spacing:.04em;pointer-events:none}.ba-label.before{left:12px;background:var(--navy)}.ba-label.after{right:12px;background:var(--red)}.ba-project-body{padding:17px 19px 20px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px}.ba-project-body h3{margin:0 0 4px;font-size:1.35rem}.ba-project-body p{margin:0;color:var(--muted);font-size:.9rem}.compare-open{border:0;background:none;color:var(--navy);font-weight:800;cursor:pointer;white-space:nowrap;padding:4px}.compare-dialog{width:min(980px,calc(100% - 32px));border:0;border-radius:16px;padding:0;box-shadow:0 30px 90px rgba(0,0,0,.38)}.compare-dialog::backdrop{background:rgba(6,20,31,.8)}.compare-dialog-inner{background:#fff;padding:24px}.compare-dialog-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:14px}.compare-dialog-head h2{margin:0;font-size:2rem}.dialog-close{border:0;background:#f0f4f6;border-radius:50%;width:40px;height:40px;font-size:1.5rem;color:var(--navy);cursor:pointer}.compare-dialog .ba-stage{aspect-ratio:16/9;border-radius:10px}
/* Service Areas / Contact */
.area-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.area-card{padding:25px}.city-list{display:flex;flex-wrap:wrap;gap:8px}.city{padding:7px 10px;background:#eef4f7;border-radius:5px;font-size:.9rem}.contact-layout{display:grid;grid-template-columns:1.35fr .8fr;gap:48px;align-items:start}.contact-panel{background:#f5f8fa;border:1px solid var(--line);padding:31px;border-radius:var(--radius)}.contact-form{display:grid;gap:13px}.contact-cards{display:grid;gap:13px}.contact-card{border:1px solid var(--line);padding:19px;border-radius:9px;background:#fff}.contact-card h3{margin-top:0}.payments{display:flex;gap:10px;flex-wrap:wrap}.payment{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fff}
/* legal */
.legal-wrap{max-width:900px;margin:auto}.legal-wrap h1{font-size:clamp(2.6rem,5vw,4rem)}.legal-wrap h2{font-size:1.7rem;margin-top:2.2rem}.legal-note{background:#f4f7f9;border-left:4px solid var(--teal);padding:18px 20px}
/* Footer */
.site-footer{background:#fff;padding:48px 0 22px}.footer-grid{display:grid;grid-template-columns:1.15fr .75fr 1fr 1fr;gap:42px}.footer-logo img{width:235px;height:auto}.slogan{text-align:center;font-size:.84rem;margin:9px 0 3px;max-width:235px}.license{text-align:center;font-size:.82rem;font-weight:900;margin:0;max-width:235px}.footer-socials{display:flex;justify-content:center;gap:10px;margin-top:14px;max-width:235px}.footer-socials img{width:38px;height:38px}.footer-col h4{margin:0 0 11px;color:var(--navy)}.footer-col a{display:block;text-decoration:none;color:#4d6070;font-size:.9rem;margin:6px 0}.footer-col a:hover{text-decoration:underline}.footer-contact-line{display:block;color:#4d6070;font-size:.9rem;margin:6px 0}.footer-bottom{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);margin-top:32px;padding-top:19px;color:var(--muted);font-size:.78rem}
/* Real floating estimate bubble + dialog */
.estimate-bubble{position:fixed;right:22px;bottom:22px;z-index:240;border:0;border-radius:999px;background:var(--red);color:#fff;box-shadow:0 14px 34px rgba(14,45,69,.24);display:flex;align-items:center;gap:9px;padding:13px 18px;font-weight:900;cursor:pointer;transition:.18s}.estimate-bubble:hover{transform:translateY(-2px);box-shadow:0 17px 38px rgba(14,45,69,.3)}.estimate-bubble svg{width:20px;height:20px}.estimate-dialog{width:min(540px,calc(100% - 32px));border:0;border-radius:16px;padding:0;box-shadow:0 28px 86px rgba(0,0,0,.38)}.estimate-dialog::backdrop{background:rgba(7,23,35,.64)}.estimate-dialog-card{padding:30px;background:#fff}.estimate-dialog-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.estimate-dialog h2{font-size:2.1rem;margin:.1em 0 .2em}.estimate-dialog form{display:grid;gap:12px;margin-top:18px}.notice{position:fixed;right:22px;bottom:88px;z-index:400;max-width:420px;padding:13px 16px;background:var(--navy);color:#fff;border-radius:8px;box-shadow:var(--shadow);display:none}.notice.show{display:block}
/* cookies */
.cookie-banner{position:fixed;z-index:300;left:20px;right:20px;bottom:18px;background:#fff;border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.18);border-radius:12px;padding:18px;display:none}.cookie-banner.open{display:block}.cookie-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}.cookie-actions{display:flex;gap:8px;flex-wrap:wrap}.cookie-dialog{width:min(620px,calc(100% - 32px));border:0;border-radius:14px;padding:0;box-shadow:0 25px 80px rgba(0,0,0,.35)}.cookie-dialog::backdrop{background:rgba(7,23,35,.56)}.cookie-card{padding:28px}.cookie-row{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}
@media(max-width:960px){.header-inner{height:90px}.brand img{width:205px}.mobile-toggle{display:block}.nav{position:absolute;left:0;right:0;top:90px;background:#fff;border-bottom:1px solid var(--line);padding:14px 24px 22px;display:none;flex-direction:column;align-items:flex-start;gap:0}.nav.open{display:flex}.nav a{padding:11px 0}.nav a.active:after,.nav a:hover:after{bottom:4px}.hero-grid,.about-opening-grid,.split,.reviews-layout,.estimate-grid,.contact-layout{grid-template-columns:1fr}.trust-grid{grid-template-columns:1fr 1fr}.trust-item:nth-child(2){border-right:0}.service-grid,.service-number-grid,.card-grid{grid-template-columns:1fr 1fr}.values{grid-template-columns:1fr 1fr}.worker-grid{grid-template-columns:1fr 1fr}.platform-strip{grid-template-columns:1fr 1fr}.review-side-grid{grid-template-columns:1fr 1fr}.estimate-form{grid-template-columns:1fr 1fr}.estimate-form .btn,.estimate-note{grid-column:1/-1}.ba-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-logo img,.slogan,.license,.footer-socials{max-width:235px}.additional-list{columns:2}}
@media(max-width:620px){.container{width:min(100% - 28px,var(--max))}.header-inner{height:80px}.brand img{width:170px;max-height:68px}.nav{top:80px}.hero-compact{padding:36px 0}.display{font-size:2.65rem}.pending-media{min-height:235px}.trust-grid{grid-template-columns:1fr}.trust-item{border-right:0;border-bottom:1px solid var(--line)}.trust-item:last-child{border-bottom:0}.section{padding:56px 0}.service-grid,.service-number-grid,.card-grid,.values,.worker-grid,.platform-strip,.review-side-grid,.process,.area-groups,.footer-grid{grid-template-columns:1fr}.additional-list{columns:1}.estimate-form{grid-template-columns:1fr}.footer-bottom{flex-direction:column}.estimate-bubble{right:12px;bottom:12px;padding:11px 14px}.estimate-bubble span{font-size:.86rem}.cookie-inner{align-items:flex-start;flex-direction:column}.ba-project-body{align-items:flex-start;flex-direction:column}.platform-tile{height:70px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* V5 refinements from Nicole review */
.header-inner{height:110px}.brand img{width:265px;max-height:94px}.hero-compact{padding:46px 0}.hero-grid{grid-template-columns:1.08fr .92fr;gap:46px}.hero-compact .display{font-size:clamp(2.55rem,4.5vw,4.15rem)}.hero-compact .lead{font-size:1.06rem}.pending-media{min-height:275px;box-shadow:none;border-style:dashed}.pending-overlay-inner{max-width:300px}.pending-overlay h3{font-size:1.35rem}.pending-overlay p{font-size:.9rem}.pending-file{font-family:monospace}.section{padding:64px 0}.section-head{margin-bottom:25px}.service-card{height:100%;display:flex;flex-direction:column}.service-card img{width:100%;aspect-ratio:16/10;object-fit:cover}.service-card-body{display:flex;flex-direction:column;flex:1}.service-card-body p{margin-bottom:12px}.service-link{display:inline-block;margin-top:auto;font-weight:800;text-decoration:none;color:var(--navy);font-size:.9rem}.service-link:hover{text-decoration:underline}.service-card-link{text-decoration:none;color:inherit}.service-card-link:hover{transform:translateY(-2px)}.services-intro{margin-bottom:28px}.check-list{list-style:none;padding-left:0}.check-list li{position:relative;padding-left:23px}.check-list li::before{content:'✓';position:absolute;left:0;color:var(--teal);font-weight:900}.process-simple .process-card{min-height:150px;display:flex;flex-direction:column;justify-content:center}.process-simple .process-card h3{margin-bottom:0}.home-project-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:20px}.home-project-feature{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 10px 28px rgba(14,45,69,.06)}.home-project-caption{padding:17px 19px}.home-project-caption h3,.home-project-caption p{margin:.15em 0}.home-about img{border-radius:14px;aspect-ratio:4/3;object-fit:cover}.footer-logo img{width:265px}.slogan,.license,.footer-socials{max-width:265px}.estimate-bubble{right:24px;bottom:24px;min-width:172px;justify-content:center}.estimate-bubble span::before{content:'Get a '}.reviews-layout{align-items:stretch}.platform-tile img{max-width:155px;max-height:42px}
@media(max-width:960px){.brand img{width:225px}.home-project-grid{grid-template-columns:1fr 1fr}.home-project-feature{grid-column:1/-1}.hero-grid{gap:28px}.footer-logo img,.slogan,.license,.footer-socials{max-width:240px}}
@media(max-width:620px){.brand img{width:180px}.hero-compact .display{font-size:2.45rem}.home-project-grid{grid-template-columns:1fr}.home-project-feature{grid-column:auto}.pending-media{min-height:210px}.estimate-bubble{min-width:0;right:12px;bottom:12px}.estimate-bubble span::before{content:''}}
/* V7 Home refinements from Nicole review */
/* Larger primary logo while retaining the approved logo artwork unchanged. */
.header-inner{height:148px}.brand img{width:420px;max-height:132px}.nav a{padding:58px 0}.nav a.active:after,.nav a:hover:after{bottom:37px}
/* Home hero: approved image spans a wide rectangular panel with copy over the left side. */
.home-hero{padding:34px 0;background:#fff}.home-hero .container{width:min(1280px,calc(100% - 48px))}.home-hero-panel{position:relative;min-height:520px;border-radius:16px;overflow:hidden;background-image:url('../images/home-hero.webp');background-size:cover;background-position:center right;box-shadow:var(--shadow);display:flex;align-items:center}.home-hero-panel::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,250,251,.96) 0%,rgba(247,250,251,.86) 28%,rgba(247,250,251,.42) 47%,rgba(247,250,251,.08) 62%,rgba(247,250,251,0) 74%);pointer-events:none}.home-hero .hero-copy{position:relative;z-index:1;width:min(48%,610px);margin-left:46px;padding:34px 34px 34px 0}.home-hero .hero-copy::before{content:'';position:absolute;z-index:-1;inset:-22px -26px -22px -30px;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:18px}.home-hero .home-hero-title{font-size:clamp(1.85rem,2.75vw,2.55rem);line-height:1.12;margin:.16em 0 .38em}.home-hero .lead{font-size:1rem;max-width:55ch;color:#344d5f}.home-hero .hero-actions{margin-top:20px}
/* Home section headings intentionally smaller and lighter in visual weight. */
.home-page .home-section-title{font-size:clamp(1.55rem,2.1vw,2.05rem);line-height:1.12}.home-page .section-head{align-items:center}
/* Footer latest approved direction: logo carries the branding; no repeated slogan line. */
.footer-logo .license{margin-top:10px}
@media(max-width:960px){.header-inner{height:112px}.brand img{width:300px;max-height:98px}.nav{top:112px}.nav a{padding:11px 0}.nav a.active:after,.nav a:hover:after{bottom:4px}.home-hero-panel{min-height:470px;background-position:62% center}.home-hero .hero-copy{width:min(62%,560px);margin-left:34px}.home-hero-panel::before{background:linear-gradient(90deg,rgba(247,250,251,.97) 0%,rgba(247,250,251,.88) 38%,rgba(247,250,251,.42) 62%,rgba(247,250,251,.08) 82%)}}
@media(max-width:620px){.header-inner{height:92px}.brand img{width:220px;max-height:82px}.nav{top:92px}.home-hero{padding:20px 0}.home-hero .container{width:min(100% - 20px,1280px)}.home-hero-panel{min-height:510px;background-position:68% center}.home-hero-panel::before{background:linear-gradient(90deg,rgba(247,250,251,.96) 0%,rgba(247,250,251,.88) 63%,rgba(247,250,251,.48) 100%)}.home-hero .hero-copy{width:auto;margin:0 22px;padding:28px 0}.home-hero .hero-copy::before{inset:-16px -12px;background:rgba(255,255,255,.13);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}.home-hero .home-hero-title{font-size:1.9rem}.home-page .home-section-title{font-size:1.6rem}}
/* V8 Home refinements — compact, clean, balanced */
.home-page .home-hero-panel{min-height:365px}
.home-page .home-hero .hero-copy{width:min(49%,590px);margin-left:42px;padding:24px 28px 24px 0}
.home-page .home-hero .hero-copy::before{inset:-16px -22px -16px -26px}
.home-page .home-hero .home-hero-title{font-size:clamp(1.7rem,2.35vw,2.25rem)}
.home-page .home-hero .lead{font-size:.95rem;line-height:1.52}
.home-page .home-hero .hero-actions{margin-top:16px}
/* Keep the main Home sections more compact and visually consistent. */
.home-page .section{padding:46px 0}
.home-page .section-head{margin-bottom:20px}
.home-page .home-about{gap:38px}
.home-page .home-about img{height:300px;aspect-ratio:auto}
.home-page .home-about p{margin:.55em 0}
/* Services are informative first, photographic second. */
.home-page .home-services{gap:16px}
.home-page .home-services .service-card{border-radius:11px}
.home-page .home-services .service-card img{height:118px;aspect-ratio:auto;object-fit:cover}
.home-page .home-services .service-card-body{padding:15px 16px 16px}
.home-page .home-services .service-card h3{font-size:1.12rem;margin-bottom:6px}
.home-page .home-services .service-card p{font-size:.9rem;line-height:1.48;margin-bottom:10px}
.home-page .home-services .service-link{font-size:.84rem}
/* Recent Projects remains the stronger visual proof section without becoming oversized. */
.home-page .home-project-grid{gap:16px;grid-template-columns:1.25fr .875fr .875fr}
.home-page .home-project-grid .ba-stage{aspect-ratio:16/8.7}
.home-page .home-project-grid .photo-card img{height:180px}
.home-page .home-project-caption,.home-page .home-project-grid .photo-card-body{padding:14px 16px}
.home-page .home-project-caption h3,.home-page .home-project-grid .photo-card h3{font-size:1.12rem}
.home-page .home-project-caption p,.home-page .home-project-grid .photo-card p{font-size:.88rem}
/* Six customer reviews with equal visual weight. */
.home-page .reviews-grid-uniform{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.home-page .reviews-grid-uniform .review-card{display:flex;flex-direction:column;padding:19px;min-width:0}
.home-page .reviews-grid-uniform .review-card blockquote{font-size:.9rem;line-height:1.55;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:9;overflow:hidden}
.home-page .reviews-grid-uniform .review-city{margin-top:auto;padding-top:12px}
.home-page .reviews-grid-uniform .review-link{margin-top:10px;font-size:.82rem}
.home-page .platform-strip{margin-bottom:20px}
.home-page .platform-tile{height:68px}
@media(max-width:960px){
.home-page .home-hero-panel{min-height:350px}
.home-page .home-hero .hero-copy{width:min(65%,540px);margin-left:30px}
.home-page .home-services{grid-template-columns:1fr 1fr}
.home-page .home-project-grid{grid-template-columns:1fr 1fr}
.home-page .home-project-feature{grid-column:1/-1}
.home-page .reviews-grid-uniform{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
.home-page .home-hero-panel{min-height:390px}
.home-page .home-hero .hero-copy{margin:0 18px;padding:22px 0;width:auto}
.home-page .home-hero .home-hero-title{font-size:1.72rem}
.home-page .section{padding:38px 0}
.home-page .home-about img{height:245px}
.home-page .home-services{grid-template-columns:1fr}
.home-page .home-services .service-card{display:grid;grid-template-columns:112px 1fr;align-items:stretch}
.home-page .home-services .service-card img{width:112px;height:100%;min-height:142px}
.home-page .home-project-grid{grid-template-columns:1fr}
.home-page .home-project-feature{grid-column:auto}
.home-page .reviews-grid-uniform{grid-template-columns:1fr}
}
/* V9 Home refinements — Nicole review */
/* Hero: keep the full approved house visible, with a soft light fade under copy. */
.home-page .home-hero-panel{
min-height:500px;
background-color:#f4f7f8;
background-size:auto 100%;
background-repeat:no-repeat;
background-position:right center;
}
.home-page .home-hero-panel::before{
background:linear-gradient(90deg,
rgba(247,250,251,.98) 0%,
rgba(247,250,251,.94) 26%,
rgba(247,250,251,.78) 37%,
rgba(247,250,251,.50) 46%,
rgba(247,250,251,.20) 55%,
rgba(247,250,251,.04) 64%,
rgba(247,250,251,0) 72%);
}
.home-page .home-hero .hero-copy::before{
background:rgba(255,255,255,.08);
backdrop-filter:blur(3px);
-webkit-backdrop-filter:blur(3px);
}
.home-page .home-hero .home-hero-title{
font-size:clamp(1.35rem,1.72vw,1.72rem);
line-height:1.15;
}
/* Home imagery: preserve the full approved photos instead of cropping them. */
.home-page .home-about img{
width:100%;
height:auto;
max-height:none;
aspect-ratio:auto;
object-fit:contain;
object-position:center;
}
.home-page .home-services .service-card img{
width:100%;
height:220px;
aspect-ratio:auto;
object-fit:contain;
object-position:center;
background:#f7f9fa;
}
.home-page .home-services .service-card-body{padding:14px 15px 15px}
.home-page .home-services .service-card h3{font-size:1.05rem;margin-bottom:5px}
.home-page .home-services .service-card p{font-size:.84rem;line-height:1.42;margin-bottom:8px}
.home-page .home-services .service-link{font-size:.81rem}
@media(max-width:960px){
.home-page .home-hero-panel{
min-height:470px;
background-size:auto 100%;
background-position:right center;
}
.home-page .home-hero-panel::before{
background:linear-gradient(90deg,rgba(247,250,251,.98) 0%,rgba(247,250,251,.92) 38%,rgba(247,250,251,.62) 55%,rgba(247,250,251,.20) 69%,rgba(247,250,251,0) 82%);
}
.home-page .home-hero .home-hero-title{font-size:1.58rem}
}
@media(max-width:620px){
.home-page .home-hero-panel{
min-height:610px;
background-size:100% auto;
background-position:center bottom;
align-items:flex-start;
}
.home-page .home-hero-panel::before{
background:linear-gradient(180deg,rgba(247,250,251,.98) 0%,rgba(247,250,251,.94) 46%,rgba(247,250,251,.72) 61%,rgba(247,250,251,.20) 72%,rgba(247,250,251,0) 82%);
}
.home-page .home-hero .hero-copy{margin:0 18px;padding:24px 0 245px;width:auto}
.home-page .home-hero .home-hero-title{font-size:1.45rem}
.home-page .home-services .service-card{display:block}
.home-page .home-services .service-card img{width:100%;height:230px;min-height:0;object-fit:contain}
}
/* V10 Home refinements — approved preview pass */
.home-page .home-hero-panel{
min-height:420px;
background-image:url('../images/home-hero.webp');
background-color:#f4f7f8;
background-size:auto 100%;
background-repeat:no-repeat;
background-position:right center;
}
.home-page .home-hero-panel::before{
background:linear-gradient(90deg,
rgba(247,250,251,.985) 0%,
rgba(247,250,251,.95) 25%,
rgba(247,250,251,.80) 37%,
rgba(247,250,251,.52) 48%,
rgba(247,250,251,.18) 59%,
rgba(247,250,251,.03) 69%,
rgba(247,250,251,0) 77%);
}
.home-page .home-services .service-card{display:flex;flex-direction:column}
.home-page .home-services .service-card img{
display:block;
width:100%;
height:auto;
aspect-ratio:4/3;
object-fit:cover;
object-position:center;
background:#fff;
}
.home-page .home-services .service-card-body{padding:13px 15px 15px}
.home-page .home-services .service-card h3{font-size:1.04rem;margin-bottom:5px}
.home-page .home-services .service-card p{font-size:.835rem;line-height:1.4;margin-bottom:8px}
.home-page .home-services .service-link{font-size:.81rem}
@media(max-width:960px){
.home-page .home-hero-panel{min-height:400px;background-size:auto 100%;background-position:right center}
}
@media(max-width:620px){
.home-page .home-hero-panel{min-height:540px;background-size:100% auto;background-position:center bottom;align-items:flex-start}
.home-page .home-services .service-card{display:flex;flex-direction:column}
.home-page .home-services .service-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
}
/* V11 approved refinements */
/* Header navigation uses the same serif family as service titles. */
.nav a{font-family:var(--serif);font-weight:700;letter-spacing:.01em}
/* Floating estimate bubble in brand navy instead of red. */
.estimate-bubble{background:var(--navy)}
.estimate-bubble:hover{background:var(--navy2)}
/* Footer license / insured grouping under logo. */
.footer-logo .footer-insured{
text-align:center;
font-size:.82rem;
font-weight:800;
color:#4d6070;
margin:4px 0 0;
max-width:265px;
}
/* Keep the approved Nextdoor wordmark legible in the review-platform strip. */
.platform-tile img[alt="Nextdoor"]{max-width:180px;max-height:46px;width:auto;height:auto}
/* V12 approved refinements */
/* Slightly larger serif navigation labels. */
.nav a{font-size:1.03rem}
/* Consistent heading scale across interior pages, matching the approved Home hero title scale. */
body:not(.home-page) .display,
body:not(.home-page) .section-title{
font-size:clamp(1.35rem,1.72vw,1.72rem);
line-height:1.15;
}
/* About page content spacing after approved copy update. */
.about-opening-grid > div:first-child > p:not(.eyebrow){margin:.65em 0;color:#405667}
.team-check-list{max-width:620px;margin:16px auto 0;text-align:left}
.about-story{max-width:820px}
/* Match the Peace of Mind / Warranty image-and-copy block to the Home About visual proportion. */
.about-warranty-block{gap:38px}
.about-warranty-block > img{
width:100%;
height:auto;
aspect-ratio:auto;
object-fit:contain;
object-position:center;
border-radius:14px;
}
@media(max-width:960px){
.nav a{font-size:1rem}
}
@media(max-width:620px){
.nav a{font-size:1rem}
body:not(.home-page) .display,
body:not(.home-page) .section-title{font-size:1.45rem}
}
/* V13 approved refinements */
.team-feature-grid{align-items:start}.team-feature h3{font-family:var(--serif);color:var(--navy);font-size:1.35rem;line-height:1.2;margin:0 0 12px;text-align:center;min-height:2.4em}
.services-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.service-detail{display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff;box-shadow:0 8px 24px rgba(14,45,69,.05)}.service-detail img{width:180px;aspect-ratio:4/3;object-fit:cover;border-radius:8px}.service-detail h3{margin:0 0 7px;font-size:1.28rem}.service-detail p{margin:0 0 9px;color:var(--muted);font-size:.94rem;line-height:1.5}.additional-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px;margin-top:26px}.additional-service-grid>div{padding:18px 0;border-bottom:1px solid var(--line)}.additional-service-grid h3{font-size:1.08rem;margin:0 0 5px}.additional-service-grid p{margin:0;color:var(--muted);font-size:.91rem}.additional-service-grid h3 a{text-decoration:none}.additional-service-grid h3 a:hover{text-decoration:underline}
.our-work-hero{padding-bottom:46px}.our-work-hero .hero-copy{max-width:780px}.ba-stage{aspect-ratio:1/1}.ba-stage img{object-fit:cover}.compare-dialog .ba-stage{aspect-ratio:1/1;max-height:72vh}
.legal-hero{padding:46px 0}.legal-copy{max-width:900px}.legal-copy>p:first-child{color:var(--muted)}.legal-copy h2{font-size:1.65rem;margin:2rem 0 .55rem}.legal-copy p,.legal-copy li{color:#405667}.legal-copy ul{padding-left:1.35rem}.legal-copy li{margin:.4rem 0}.commercial-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}.commercial-grid>div{padding:22px;border:1px solid var(--line);border-radius:12px;background:#fff}.commercial-grid h3{margin-top:0;font-size:1.3rem}.cookie-modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.cookie-modal-actions .btn{flex:1 1 150px}
@media(max-width:960px){.services-detail-grid{grid-template-columns:1fr}.additional-service-grid{grid-template-columns:1fr 1fr}.commercial-grid{grid-template-columns:1fr}}
@media(max-width:620px){.service-detail{grid-template-columns:1fr}.service-detail img{width:100%;height:auto}.additional-service-grid{grid-template-columns:1fr}.team-feature h3{min-height:auto}.ba-grid{grid-template-columns:1fr}}
/* V13 slider direction: BEFORE stays on the left; AFTER stays on the right. */
.ba-stage .ba-after{clip-path:none;z-index:1}
.ba-stage .ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0);z-index:2}
.ba-label,.ba-divider,.ba-handle,.ba-range{z-index:3}
.ba-range{z-index:4}
\n\n/* V14 hero refinements */
.service-area-hero,.our-work-hero-image{padding:34px 0;background:#fff}
.service-area-hero .container,.our-work-hero-image .container{width:min(1280px,calc(100% - 48px))}
.service-area-hero-panel,.our-work-hero-panel{position:relative;min-height:420px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:flex;align-items:center;background-size:cover;background-repeat:no-repeat}
.service-area-hero-panel{background-image:url('../images/service-areas-hero.jpg');background-position:center center}
.our-work-hero-panel{background-image:url('../images/our-work-hero.jpg');background-position:center 58%}
.service-area-hero-panel::before,.our-work-hero-panel::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(247,250,251,.985) 0%,rgba(247,250,251,.95) 24%,rgba(247,250,251,.80) 37%,rgba(247,250,251,.50) 49%,rgba(247,250,251,.17) 61%,rgba(247,250,251,.02) 72%,rgba(247,250,251,0) 80%)}
.service-area-hero-copy,.our-work-hero-copy{position:relative;z-index:1;width:min(50%,620px);margin-left:42px;padding:28px 28px 28px 0}
.service-area-hero-copy::before,.our-work-hero-copy::before{content:'';position:absolute;z-index:-1;inset:-18px -8px -18px -26px;background:rgba(255,255,255,.10);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:18px}
.service-area-hero .display,.our-work-hero-image .display{font-size:clamp(1.55rem,2.15vw,2.1rem);line-height:1.14;margin:.18em 0 .4em}
.service-area-hero .lead,.our-work-hero-image .lead{font-size:.98rem;line-height:1.55;color:#344d5f;max-width:58ch}
/* Service-area cards: lighter, cleaner presentation */
.service-areas-page .area-card{box-shadow:none;border-color:#dce5ea;background:#fff;padding:22px}
.service-areas-page .area-card h3{font-size:1.18rem;margin-bottom:13px}
.service-areas-page .city{background:#f4f7f8;border:1px solid #e3eaee;border-radius:999px;padding:6px 10px}
@media(max-width:960px){
.service-area-hero-panel,.our-work-hero-panel{min-height:400px;background-position:center center}
.service-area-hero-copy,.our-work-hero-copy{width:min(66%,560px);margin-left:30px}
.service-area-hero-panel::before,.our-work-hero-panel::before{background:linear-gradient(90deg,rgba(247,250,251,.985) 0%,rgba(247,250,251,.94) 38%,rgba(247,250,251,.62) 57%,rgba(247,250,251,.16) 74%,rgba(247,250,251,0) 86%)}
}
@media(max-width:620px){
.service-area-hero,.our-work-hero-image{padding:20px 0}
.service-area-hero .container,.our-work-hero-image .container{width:min(100% - 20px,1280px)}
.service-area-hero-panel,.our-work-hero-panel{min-height:540px;background-position:center bottom;align-items:flex-start}
.service-area-hero-panel::before,.our-work-hero-panel::before{background:linear-gradient(180deg,rgba(247,250,251,.985) 0%,rgba(247,250,251,.95) 42%,rgba(247,250,251,.70) 60%,rgba(247,250,251,.18) 74%,rgba(247,250,251,0) 84%)}
.service-area-hero-copy,.our-work-hero-copy{width:auto;margin:0 18px;padding:24px 0 250px}
.service-area-hero .display,.our-work-hero-image .display{font-size:1.55rem}
}
/* V15 page heroes and commercial page */
.services-hero-image,.contact-hero-image,.commercial-hero-image{padding:34px 0;background:#fff}
.services-hero-image .container,.contact-hero-image .container,.commercial-hero-image .container{width:min(1280px,calc(100% - 48px))}
.services-hero-panel,.contact-hero-panel,.commercial-hero-panel{position:relative;min-height:420px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:flex;align-items:center;background-size:cover;background-repeat:no-repeat}
.services-hero-panel{background-image:url('../images/heroes/services-hero.jpg');background-position:center center}
.contact-hero-panel{background-image:url('../images/heroes/contact-hero.jpg');background-position:center center}
.commercial-hero-panel{background-image:url('../images/heroes/commercial-hero.jpg');background-position:center center}
.services-hero-panel::before,.contact-hero-panel::before,.commercial-hero-panel::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(247,250,251,.985) 0%,rgba(247,250,251,.95) 24%,rgba(247,250,251,.80) 37%,rgba(247,250,251,.50) 49%,rgba(247,250,251,.17) 61%,rgba(247,250,251,.02) 72%,rgba(247,250,251,0) 80%)}
.services-hero-copy,.contact-hero-copy,.commercial-hero-copy{position:relative;z-index:1;width:min(50%,620px);margin-left:42px;padding:28px 28px 28px 0}
.services-hero-copy::before,.contact-hero-copy::before,.commercial-hero-copy::before{content:'';position:absolute;z-index:-1;inset:-18px -22px -18px -26px;background:rgba(255,255,255,.10);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:18px}
.services-hero-image .display,.contact-hero-image .display,.commercial-hero-image .display{font-size:clamp(1.55rem,2.15vw,2.1rem);line-height:1.14;margin:.18em 0 .4em}
.services-hero-image .lead,.contact-hero-image .lead,.commercial-hero-image .lead{font-size:.98rem;line-height:1.55;color:#344d5f;max-width:58ch}
.commercial-primary-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px}.commercial-primary-grid article,.commercial-benefits>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;box-shadow:0 8px 24px rgba(14,45,69,.045)}
.commercial-primary-grid h3,.commercial-benefits h3{margin:0 0 8px;font-size:1.25rem}.commercial-primary-grid p,.commercial-benefits p{margin:0;color:var(--muted)}
.commercial-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}.commercial-cta{display:flex;align-items:center;justify-content:space-between;gap:28px}.commercial-cta .section-title{margin-bottom:.2em}.commercial-cta p:last-child{margin-bottom:0;color:var(--muted)}
@media(max-width:1100px){.nav{gap:20px}.nav a{font-size:.96rem}}
@media(max-width:960px){.services-hero-panel,.contact-hero-panel,.commercial-hero-panel{min-height:400px;background-position:center center}.services-hero-copy,.contact-hero-copy,.commercial-hero-copy{width:min(66%,560px);margin-left:30px}.services-hero-panel::before,.contact-hero-panel::before,.commercial-hero-panel::before{background:linear-gradient(90deg,rgba(247,250,251,.985) 0%,rgba(247,250,251,.94) 38%,rgba(247,250,251,.62) 57%,rgba(247,250,251,.16) 74%,rgba(247,250,251,0) 86%)}.commercial-benefits{grid-template-columns:1fr 1fr}.commercial-primary-grid{grid-template-columns:1fr}.commercial-cta{align-items:flex-start;flex-direction:column}}
@media(max-width:620px){.services-hero-image,.contact-hero-image,.commercial-hero-image{padding:20px 0}.services-hero-image .container,.contact-hero-image .container,.commercial-hero-image .container{width:min(100% - 20px,1280px)}.services-hero-panel,.contact-hero-panel,.commercial-hero-panel{min-height:540px;background-position:center bottom;align-items:flex-start}.services-hero-panel::before,.contact-hero-panel::before,.commercial-hero-panel::before{background:linear-gradient(180deg,rgba(247,250,251,.985) 0%,rgba(247,250,251,.95) 42%,rgba(247,250,251,.70) 60%,rgba(247,250,251,.18) 74%,rgba(247,250,251,0) 84%)}.services-hero-copy,.contact-hero-copy,.commercial-hero-copy{width:auto;margin:0 18px;padding:24px 0 250px}.services-hero-image .display,.contact-hero-image .display,.commercial-hero-image .display{font-size:1.55rem}.commercial-benefits{grid-template-columns:1fr}}
/* V16 approved refinements */
/* Deeper, less-orange brand red for buttons, active-nav underline and site accents. */
:root{--red:#b63a3a}
/* Contact phone/email: cleaner sans typography, easier to scan. */
.contact-card .contact-direct-link{
font-family:var(--sans);
font-size:1.08rem;
line-height:1.35;
font-weight:700;
letter-spacing:.005em;
color:var(--navy);
overflow-wrap:anywhere;
}
/* Services hero: preserve the wide scene and keep the painter to the right. */
.services-hero-panel{background-position:center center}
/* Commercial hero keeps the same left blur/fade treatment as the other image heroes. */
.commercial-hero-panel{background-position:center center}
/* Commercial page: focused gallery space, no duplicate trust claims below the common trust strip. */
.commercial-benefits{grid-template-columns:repeat(2,1fr)}
.commercial-gallery-placeholder{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.commercial-gallery-placeholder>div{
min-height:180px;
padding:24px;
border:1px dashed #c9d5dc;
border-radius:12px;
background:linear-gradient(145deg,#fbfcfd,#f2f6f8);
display:flex;
flex-direction:column;
justify-content:center;
}
.commercial-gallery-placeholder h3{margin:10px 0 6px;font-size:1.2rem}
.commercial-gallery-placeholder p{margin:0;color:var(--muted);font-size:.92rem}
.commercial-gallery-badge{display:inline-block;width:max-content;border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 9px;font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
@media(max-width:960px){.commercial-gallery-placeholder{grid-template-columns:1fr 1fr}.commercial-benefits{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.commercial-gallery-placeholder{grid-template-columns:1fr}.commercial-benefits{grid-template-columns:1fr}}
/* V17 approved hero framing and focused commercial gallery */
/* Keep the full approved Services scene visible on desktop instead of cropping the painter. */
@media(min-width:961px){
.services-hero-panel{aspect-ratio:16/9;min-height:0;background-size:cover;background-position:center center}
.services-hero-image .container{max-width:1280px}
}
/* Keep the approved Our Work image feeling wide and distant. */
.our-work-hero-panel{background-position:center center}
/* Commercial begins with one focused gallery space, not three placeholders. */
.commercial-gallery-placeholder.commercial-gallery-single{grid-template-columns:minmax(0,1fr);max-width:760px}
.commercial-gallery-placeholder.commercial-gallery-single>div{min-height:150px}
/* V18 — unified primary hero height across main pages */
/* Desktop: keep every image hero on the same visual rhythm. */
@media(min-width:961px){
.home-page .home-hero-panel,
.services-hero-panel,
.commercial-hero-panel,
.our-work-hero-panel,
.service-area-hero-panel,
.contact-hero-panel{
height:420px;
min-height:420px;
aspect-ratio:auto;
}
/* Preserve the approved wide Services scene inside the standard hero height. */
.services-hero-panel{
background-size:cover;
background-position:center center;
}
}
/* Tablet: the same shared height across all main image heroes. */
@media(min-width:621px) and (max-width:960px){
.home-page .home-hero-panel,
.services-hero-panel,
.commercial-hero-panel,
.our-work-hero-panel,
.service-area-hero-panel,
.contact-hero-panel{
height:400px;
min-height:400px;
aspect-ratio:auto;
}
}
/* Mobile: consistent hero height and stacking across the main pages. */
@media(max-width:620px){
.home-page .home-hero-panel,
.services-hero-panel,
.commercial-hero-panel,
.our-work-hero-panel,
.service-area-hero-panel,
.contact-hero-panel{
height:540px;
min-height:540px;
aspect-ratio:auto;
}
}
/* V18 Services framing: standard hero height without zooming into the painter. */
@media(min-width:961px){
.services-hero-panel{
background-color:#f4f7f8;
background-size:auto 100%;
background-position:right center;
}
}
/* V19 — ultra-wide approved Home and Services hero artwork. Hero dimensions remain unchanged from V18. */
/* V20 — approved post-V19 refinements */
/* Home Services header: keep View All Services aligned with the bottom of the intro copy. */
.home-page .home-services-head{align-items:flex-end}
.home-page .home-services-head>.text-link{align-self:flex-end;margin-bottom:1px;white-space:nowrap}
/* Contact hero: preserve the shared hero height and let the approved image extend cleanly across the panel. */
.contact-hero-panel{background-size:cover;background-position:center center}
/* Contact payment options: intentional premium card treatment. */
.payment-options-section{padding-top:18px}
.payment-options-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 36px rgba(14,45,69,.08);padding:34px}
.payment-options-intro{max-width:760px;margin-bottom:22px}
.payment-options-intro .section-title{font-size:clamp(1.7rem,2.7vw,2.45rem)}
.payment-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.payment-grid .payment{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:92px;padding:16px;border:1px solid #d7e1e7;border-radius:10px;background:linear-gradient(180deg,#fff,#f8fbfc);color:var(--navy)}
.payment-grid .payment b{font-family:var(--serif);font-size:1.04rem}
.payment-grid .payment small{font-size:.78rem;color:var(--muted);line-height:1.35}
.payment-note{margin:18px 0 0;color:var(--muted);font-size:.86rem}
@media(max-width:960px){.payment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.payment-grid .payment:last-child{grid-column:1/-1}}
@media(max-width:620px){.home-page .home-services-head{align-items:flex-start}.home-page .home-services-head>.text-link{align-self:flex-start;margin-top:8px}.payment-options-card{padding:24px 20px}.payment-grid{grid-template-columns:1fr}.payment-grid .payment:last-child{grid-column:auto}}
/* V21 — full-site visual refinement approved after V20 */
:root{
--navy:#0e2d45;
--navy2:#173f5d;
--red:#a84338;
--green:#5a9152; /* retained for brand/logo only */
--gray:#68737c;
--gray-rgb:104,115,124;
--ink:#173047;
--muted:var(--gray);
--line:rgba(var(--gray-rgb),.22);
--soft:rgba(var(--gray-rgb),.055);
--soft2:rgba(var(--gray-rgb),.09);
--white:#fff;
--shadow:0 12px 32px rgba(14,45,69,.08);
--serif:Georgia,'Times New Roman',serif;
--sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,Helvetica,sans-serif;
}
body{font-family:var(--sans);color:var(--ink);line-height:1.62}
.eyebrow{color:var(--red);letter-spacing:.16em}
h1,h2,h3,.display,.section-title{letter-spacing:-.012em}
.lead,.muted,.service-card p,.photo-card p,.commercial-primary-grid p,.commercial-benefits p,.review-card blockquote,.footer-col a,.footer-contact-line{color:var(--gray)}
.soft{background:rgba(var(--gray-rgb),.045)}
.soft-blue{background:linear-gradient(180deg,#fff,rgba(var(--gray-rgb),.055))}
.section{padding:66px 0}
.section-head{margin-bottom:26px}
.section-title{font-size:clamp(1.9rem,3vw,2.7rem);line-height:1.1}
.btn{border-radius:8px;box-shadow:none}
.btn-primary{background:var(--red)}
.btn-secondary{border-color:rgba(var(--gray-rgb),.38)}
.text-link,.service-link,.review-link{color:var(--navy);text-decoration:none}
.text-link:hover,.service-link:hover,.review-link:hover{color:var(--red);text-decoration:none}
/* Header — selected Option C: premium serif navigation with subtle separators. */
.site-header{background:rgba(255,255,255,.975);border-bottom:1px solid var(--line);box-shadow:0 5px 18px rgba(14,45,69,.035)}
.header-inner{gap:24px}
.nav{gap:0}
.nav a{font-family:var(--serif);font-size:.97rem;font-weight:700;color:var(--navy);padding:40px 17px;transition:color .18s ease}
.nav a+ a{border-left:1px solid rgba(var(--gray-rgb),.34)}
.nav a::after{content:'';position:absolute;left:17px;right:17px;bottom:26px;height:2px;border-radius:2px;background:var(--red);transform:scaleX(0);transform-origin:center;transition:transform .18s ease}
.nav a.active,.nav a:hover{color:var(--red)}
.nav a.active::after,.nav a:hover::after{transform:scaleX(1)}
/* Unified hero language: consistent height, soft left veil and restrained typography. */
.home-hero-panel,.services-hero-panel,.commercial-hero-panel,.our-work-hero-panel,.service-area-hero-panel,.contact-hero-panel{box-shadow:0 10px 30px rgba(14,45,69,.08)}
.home-hero-panel::before,.services-hero-panel::before,.commercial-hero-panel::before,.our-work-hero-panel::before,.service-area-hero-panel::before,.contact-hero-panel::before{background:linear-gradient(90deg,rgba(250,250,248,.985) 0%,rgba(250,250,248,.94) 25%,rgba(250,250,248,.76) 39%,rgba(250,250,248,.43) 51%,rgba(250,250,248,.12) 64%,rgba(250,250,248,0) 78%)}
.home-hero .hero-copy::before,.services-hero-copy::before,.commercial-hero-copy::before,.our-work-hero-copy::before,.service-area-hero-copy::before,.contact-hero-copy::before{background:rgba(255,255,255,.08);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.services-hero-image .lead,.contact-hero-image .lead,.commercial-hero-image .lead,.service-area-hero .lead,.our-work-hero-image .lead,.home-hero .lead{color:var(--gray)}
/* Keep approved Commercial and Contact scenes visibly pulled back — no hero zoom/crop. */
@media(min-width:961px){
.commercial-hero-panel,.contact-hero-panel{background-size:100% 100%;background-position:center center}
}
/* Trust strip: same system on every primary page, lighter and cleaner. */
.trust-strip{background:rgba(var(--gray-rgb),.04);border-color:var(--line)}
.trust-item{border-color:var(--line);padding:18px 20px}
.trust-icon{border:1px solid rgba(var(--gray-rgb),.42);color:var(--navy);width:40px;height:40px;flex-basis:40px}
.trust-icon svg{width:22px;height:22px}
/* Home: consistent service cards and quieter reviews. */
.home-page .home-services .service-card{border-color:var(--line);box-shadow:none;transition:transform .18s ease,border-color .18s ease}
.home-page .home-services .service-card:hover{transform:translateY(-2px);border-color:rgba(168,67,56,.32)}
.home-page .home-services .service-link::after{content:' →'}
.home-page .home-services-head>.text-link{color:var(--navy)}
.home-page .home-services-head>.text-link:hover{color:var(--red)}
.platform-tile,.review-card{box-shadow:none;border-color:var(--line)}
.reviews-grid-uniform{row-gap:20px}
/* About: more editorial spacing and consistent team presentation. */
.about-opening{padding:68px 0 46px}
.about-opening-grid{gap:62px}
.about-opening-grid>div:first-child{max-width:650px}
.about-opening-grid>div:first-child p:not(.eyebrow){max-width:62ch}
.about-story{max-width:700px;margin-bottom:34px}
.team-feature-grid{gap:24px}
.team-feature h3{font-family:var(--serif);font-size:1.22rem;color:var(--navy);margin:0 0 14px;min-height:2.4em}
.team-feature .pending-media{box-shadow:none;border-color:var(--line)}
.about-warranty-section{background:rgba(var(--gray-rgb),.045)}
.about-warranty-block{gap:58px}
.about-warranty-block>img{box-shadow:none}
/* Services: compact, repeatable rhythm rather than catalog-style cards. */
.services-detail-grid{gap:22px}
.service-detail{border-color:var(--line)!important;box-shadow:none!important;border-radius:12px!important}
.service-detail img{object-fit:cover}
.service-detail h3{font-family:var(--serif);color:var(--navy)}
.additional-service-grid{gap:0!important;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.additional-service-grid>div{box-shadow:none!important;border-radius:0!important;border:0!important;border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;background:#fff!important}
.additional-service-grid h3{font-family:var(--serif);color:var(--navy)}
.additional-service-grid h3 a{color:inherit;text-decoration:none}
/* Commercial: sober, architectural, and restrained. */
.commercial-primary-grid article,.commercial-benefits>div{box-shadow:none;border-color:var(--line);border-radius:10px}
.commercial-primary-grid h3,.commercial-benefits h3{font-family:var(--serif);color:var(--navy)}
.commercial-gallery-placeholder>div{box-shadow:none!important;border-color:var(--line)!important}
.commercial-gallery-badge{color:var(--red);border-color:rgba(168,67,56,.25);background:#fff}
.commercial-cta-section{background:rgba(var(--gray-rgb),.045)}
/* Our Work: imagery leads; filters stay light until selected. */
.filter-row{gap:10px;margin-top:22px}
.filter-btn{background:#fff;border:1px solid rgba(var(--gray-rgb),.35);color:var(--navy);box-shadow:none;transition:.18s}
.filter-btn:hover{border-color:var(--red);color:var(--red)}
.filter-btn.active{background:var(--navy);border-color:var(--navy);color:#fff}
.ba-project{box-shadow:none;border-color:var(--line)}
/* Service Areas: lighter geography blocks with a single neutral gray family. */
.service-areas-page .area-groups{gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.service-areas-page .area-card{border-radius:0;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px;background:#fff}
.service-areas-page .city{background:rgba(var(--gray-rgb),.065);border:0;color:var(--navy);border-radius:999px}
/* Contact: form is the focal point; details and payments support it. */
.contact-layout{gap:56px}
.contact-panel{background:#fff;border-color:var(--line);box-shadow:0 10px 28px rgba(14,45,69,.055);padding:34px}
.contact-card{box-shadow:none;border-color:var(--line);border-radius:10px}
.contact-card h3{font-family:var(--serif);color:var(--navy)}
.contact-direct-link{font-size:1.02rem}
.payment-options-card{box-shadow:none;border-color:var(--line);padding:36px}
.payment-grid .payment{background:#fff;border-color:var(--line);border-radius:10px;box-shadow:none}
.payment-grid .payment b{color:var(--navy)}
.payment-grid .payment small,.payment-note{color:var(--gray)}
/* Footer: cleaner close to every page. */
.site-footer{border-top:1px solid var(--line);padding-top:52px}
.footer-grid{gap:48px}
.footer-col h4{font-family:var(--serif);font-size:1.02rem}
.footer-col a,.footer-contact-line{color:var(--gray)}
.footer-col a:hover{color:var(--red);text-decoration:none}
.footer-bottom{border-color:var(--line);color:var(--gray)}
/* Forms and small UI use one neutral gray system. */
.field{border-color:rgba(var(--gray-rgb),.34);border-radius:8px}
.field:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(14,45,69,.08)}
.pending-badge{color:var(--red);border-color:var(--line)}
@media(max-width:960px){
.nav{gap:0}
.nav a{font-family:var(--serif);padding:11px 0;border-left:0!important}
.nav a::after{left:0;right:auto;width:36px;bottom:3px}
.additional-service-grid,.service-areas-page .area-groups{border-left:0}
}
@media(max-width:620px){
.section{padding:54px 0}
.about-opening{padding:48px 0 30px}
.team-feature h3{min-height:auto}
.contact-panel,.payment-options-card{padding:24px 20px}
.commercial-hero-panel,.contact-hero-panel{background-size:cover;background-position:center center}
}
/* V22 — approved refinements after V21 review */
/* Header: no underline; links remain navy until hover, then turn red. */
.nav a,.nav a.active{color:var(--navy)}
.nav a::after,.nav a.active::after,.nav a:hover::after{content:none!important;display:none!important}
.nav a:hover{color:var(--red)}
/* Short, subtle separators instead of full-height borders. */
.nav a+ a{border-left:0!important}
.nav a+ a::before{content:'';position:absolute;left:0;top:50%;width:1px;height:12px;background:rgba(var(--gray-rgb),.30);transform:translateY(-50%)}
/* Home service links already contain one arrow in the HTML; do not add a second one. */
.home-page .home-services .service-link::after{content:none!important}
/* Restore More Ways We Can Help to the V20 treatment. */
.additional-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px;margin-top:26px;border:0!important}
.additional-service-grid>div{padding:18px 0;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.additional-service-grid h3{font-size:1.08rem;margin:0 0 5px}
.additional-service-grid p{margin:0;color:var(--muted);font-size:.91rem}
.additional-service-grid h3 a{text-decoration:none}
.additional-service-grid h3 a:hover{text-decoration:underline}
/* Heroes: make the entire hero block 20% shorter while preserving approved framing. */
@media(min-width:961px){
.home-page .home-hero-panel,
.services-hero-panel,
.commercial-hero-panel,
.our-work-hero-panel,
.service-area-hero-panel,
.contact-hero-panel{height:336px;min-height:336px}
.home-hero .hero-copy,.services-hero-copy,.commercial-hero-copy,.our-work-hero-copy,.service-area-hero-copy,.contact-hero-copy{padding-top:24px;padding-bottom:24px}
.home-hero .home-hero-title,.services-hero-image .display,.commercial-hero-image .display,.our-work-hero-image .display,.service-area-hero .display,.contact-hero-image .display{font-size:clamp(1.7rem,2.45vw,2.35rem)}
}
@media(min-width:621px) and (max-width:960px){
.home-page .home-hero-panel,
.services-hero-panel,
.commercial-hero-panel,
.our-work-hero-panel,
.service-area-hero-panel,
.contact-hero-panel{height:320px;min-height:320px}
.nav a+ a::before{display:none}
}
@media(max-width:620px){
.home-page .home-hero-panel,
.services-hero-panel,
.commercial-hero-panel,
.our-work-hero-panel,
.service-area-hero-panel,
.contact-hero-panel{height:432px;min-height:432px}
.services-hero-copy,.contact-hero-copy,.commercial-hero-copy{padding-bottom:190px}
.service-area-hero-copy,.our-work-hero-copy{padding-bottom:190px}
.nav a+ a::before{display:none}
}
/* About has a text-led opening instead of an image panel; tighten it by the same visual proportion. */
.about-opening{padding:54px 0 36px}
@media(max-width:620px){.about-opening{padding:38px 0 24px}}
@media(max-width:960px){
.additional-service-grid{grid-template-columns:1fr 1fr;border:0!important}
}
@media(max-width:620px){
.additional-service-grid{grid-template-columns:1fr}
}
/* V23 — refinements from V22 review */
/* Header navigation: center every label within its divider cell, including multi-word items. */
@media(min-width:961px){
.nav a{
display:flex;
align-items:center;
justify-content:center;
text-align:center;
white-space:nowrap;
line-height:1;
}
.nav a+ a::before{
height:8px;
top:50%;
transform:translateY(-50%);
background:rgba(var(--gray-rgb),.28);
}
}
/* Contact hero: preserve the woman's natural proportions. Crop a little top/bottom instead of stretching. */
@media(min-width:961px){
.contact-hero-panel{
background-size:cover;
background-position:center center;
}
.commercial-hero-panel{
background-size:100% 100%;
background-position:center center;
}
}
/* Additional Services: quieter, better distributed, and more elegant. */
.additional-service-grid{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:0 30px!important;
margin-top:30px;
border-top:1px solid var(--line)!important;
border-left:0!important;
}
.additional-service-grid>div{
position:relative;
padding:17px 0 18px!important;
border:0!important;
border-bottom:1px solid var(--line)!important;
background:transparent!important;
box-shadow:none!important;
}
.additional-service-grid>div::before{
content:'';
display:block;
width:22px;
height:2px;
margin-bottom:10px;
background:var(--red);
opacity:.72;
}
.additional-service-grid h3{
margin:0 0 5px!important;
font-size:1rem!important;
line-height:1.25;
}
.additional-service-grid p{
margin:0!important;
font-size:.84rem!important;
line-height:1.48;
color:var(--gray)!important;
}
.additional-service-grid .service-link{
display:inline-block;
margin-left:4px;
font-size:.82rem;
white-space:nowrap;
}
@media(max-width:1050px){
.additional-service-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 26px!important}
}
@media(max-width:760px){
.additional-service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px!important}
}
@media(max-width:520px){
.additional-service-grid{grid-template-columns:1fr;gap:0!important}
.additional-service-grid>div{padding:15px 0 16px!important}
}
/* V24 — reduce visual weight of selected image-heavy blocks */
/* Home About: about 20% more compact without changing copy or structure. */
@media(min-width:961px){
.home-page .home-about{
max-width:980px;
margin-left:auto;
margin-right:auto;
gap:30px;
align-items:center;
}
.home-page .home-about img{
max-height:240px;
width:100%;
object-fit:contain;
}
}
/* Home Services: smaller imagery so the section feels lighter and less photo-heavy. */
@media(min-width:961px){
.home-page .home-services .service-card img{
height:165px;
object-fit:contain;
}
}
/* About / Peace of Mind: reduce the warranty image while preserving its natural proportions. */
@media(min-width:961px){
.about-warranty-block{
grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
align-items:center;
}
.about-warranty-block > img{
max-width:460px;
justify-self:center;
}
}
/* Our Work: substantially reduce Real Projects card/photo size on desktop. */
@media(min-width:1100px){
.ba-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px;
}
.ba-stage{
aspect-ratio:4/3;
}
.ba-project-body{
padding:13px 15px 15px;
}
.ba-project-body h3{font-size:1.08rem}
.ba-project-body p{font-size:.82rem}
.compare-open{font-size:.82rem}
}
@media(min-width:761px) and (max-width:1099px){
.ba-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.ba-stage{aspect-ratio:4/3}
}
/* V25 working draft — dedicated responsive/mobile polish. Desktop rules remain unchanged. */
@media(max-width:760px){
html{overflow-x:hidden}
body{font-size:15px;line-height:1.55;overflow-x:hidden}
.container{width:min(100% - 28px,var(--max))}
/* Header / mobile navigation */
.header-inner{height:86px;gap:14px}
.brand img{width:205px;max-height:76px}
.mobile-toggle{display:block;margin-left:auto}
.nav{top:86px;max-height:calc(100vh - 86px);overflow-y:auto;padding:12px 20px 20px;box-shadow:0 12px 26px rgba(14,45,69,.08)}
.nav a{width:100%;padding:12px 2px!important;font-size:1rem!important;text-align:left!important;border:0!important}
.nav a::before,.nav a::after{display:none!important;content:none!important}
.nav a:hover,.nav a:focus-visible{color:var(--red)}
/* Shared hero rhythm on phones: readable, restrained and consistent. */
.home-hero,.services-hero-image,.commercial-hero-image,.our-work-hero-image,.service-area-hero,.contact-hero-image{padding-top:14px;padding-bottom:14px}
.home-page .home-hero-panel,.services-hero-panel,.commercial-hero-panel,.our-work-hero-panel,.service-area-hero-panel,.contact-hero-panel{height:370px!important;min-height:370px!important;border-radius:12px}
.home-hero .hero-copy,.services-hero-copy,.commercial-hero-copy,.our-work-hero-copy,.service-area-hero-copy,.contact-hero-copy{width:auto!important;max-width:none!important;margin:0 18px!important;padding:22px 0 150px!important}
.home-hero .home-hero-title,.services-hero-image .display,.commercial-hero-image .display,.our-work-hero-image .display,.service-area-hero .display,.contact-hero-image .display{font-size:1.75rem!important;line-height:1.1}
.home-hero .lead,.services-hero-image .lead,.commercial-hero-image .lead,.our-work-hero-image .lead,.service-area-hero .lead,.contact-hero-image .lead{font-size:.9rem!important;line-height:1.48;max-width:38ch}
.eyebrow{font-size:.66rem;letter-spacing:.15em}
.hero-actions{margin-top:14px}
/* Global section density */
.section,.home-page .section{padding:42px 0}
.section-head{display:block;margin-bottom:18px}
.section-title,.home-page .home-section-title{font-size:1.65rem!important}
.lead{font-size:1rem}
/* Trust strip */
.trust-grid{grid-template-columns:1fr}
.trust-item{padding:14px 4px;border-right:0;border-bottom:1px solid var(--line)}
.trust-item:last-child{border-bottom:0}
.trust-icon{width:36px;height:36px;flex-basis:36px}
.trust-icon svg{width:20px;height:20px}
/* Home / content cards */
.home-page .home-about,.split,.about-opening-grid,.contact-layout,.estimate-grid{grid-template-columns:1fr!important;gap:24px!important}
.home-page .home-about img,.split>img,.about-warranty-block>img{height:auto!important;max-height:none!important;width:100%!important;object-fit:contain!important}
.service-grid,.service-number-grid,.card-grid,.values,.worker-grid,.platform-strip,.review-side-grid,.process,.area-groups{grid-template-columns:1fr!important}
.home-page .home-services .service-card img{height:auto!important;aspect-ratio:16/10;object-fit:contain!important;background:#f5f5f3}
.service-card-body,.photo-card-body{padding:15px}
/* Forms */
.estimate-form,.contact-form{grid-template-columns:1fr!important}
.estimate-form .btn,.estimate-note{grid-column:auto!important}
.field,.btn{min-height:46px}
.estimate-dialog{width:calc(100% - 22px)}
.estimate-dialog-card{padding:22px 18px}
.estimate-dialog h2{font-size:1.65rem}
.estimate-bubble{right:10px;bottom:10px;padding:11px 13px;max-width:calc(100vw - 20px)}
/* Our Work filters and projects */
.filter-row{flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:18px -14px 22px;padding:0 14px 7px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filter-row::-webkit-scrollbar{display:none}
.filter-btn{flex:0 0 auto;padding:8px 13px;font-size:.87rem}
.ba-grid{grid-template-columns:1fr!important;gap:20px}
.ba-project{border-radius:11px}
.ba-stage{aspect-ratio:4/3!important;background:#f3f5f6}
.ba-stage img{object-fit:contain!important;background:#f3f5f6}
.ba-project-body{padding:13px 14px 15px;display:block}
.ba-project-body h3{font-size:1.08rem}
.compare-open{margin-top:7px;padding-left:0}
/* Payment / footer */
.payment-grid{grid-template-columns:1fr!important}
.payment-grid .payment:last-child{grid-column:auto!important}
.footer-grid{grid-template-columns:1fr!important;gap:26px}
.site-footer{padding-top:36px}
.footer-bottom{display:block;margin-top:26px}
.footer-bottom>*+*{margin-top:8px}
.footer-logo img,.footer-logo .license,.footer-socials{margin-left:auto;margin-right:auto}
}
@media(max-width:420px){
.container{width:min(100% - 22px,var(--max))}
.brand img{width:185px}
.home-page .home-hero-panel,.services-hero-panel,.commercial-hero-panel,.our-work-hero-panel,.service-area-hero-panel,.contact-hero-panel{height:350px!important;min-height:350px!important}
.home-hero .hero-copy,.services-hero-copy,.commercial-hero-copy,.our-work-hero-copy,.service-area-hero-copy,.contact-hero-copy{margin:0 15px!important;padding-bottom:138px!important}
.home-hero .home-hero-title,.services-hero-image .display,.commercial-hero-image .display,.our-work-hero-image .display,.service-area-hero .display,.contact-hero-image .display{font-size:1.58rem!important}
.section,.home-page .section{padding:36px 0}
.section-title,.home-page .home-section-title{font-size:1.5rem!important}
}
/* V25 Our Work gallery — featured slider first, full Before/After pairs after category selection. */
.ba-stage img{object-fit:contain!important;background:#f3f5f6}
.ba-static{box-shadow:0 8px 22px rgba(14,45,69,.055)}
.static-pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);aspect-ratio:4/3;overflow:hidden}
.static-pair figure{position:relative;margin:0;min-width:0;background:#f3f5f6;overflow:hidden}
.static-pair img{width:100%;height:100%;object-fit:contain;background:#f3f5f6}
.static-pair .ba-label{top:9px}
.static-pair .ba-label.before{left:9px}
.static-pair .ba-label.after{left:9px;right:auto}
@media(max-width:760px){
.static-pair{grid-template-columns:1fr;aspect-ratio:auto;gap:1px}
.static-pair figure{aspect-ratio:4/3}
.static-pair img{object-fit:contain!important}
}
/* V26 Our Work — every category project uses the full before/after slider. */
.our-work-hero-image ~ .trust-strip + #projects .ba-gallery-slider .ba-stage,
#projects .ba-gallery-slider .ba-stage{
aspect-ratio:4/3;
background:#f3f5f6;
}
#projects .ba-gallery-slider .ba-stage img{
object-fit:contain!important;
background:#f3f5f6;
}
#projects .gallery-slider-body{
min-height:82px;
}
/* V26 View Larger — keep the white modal close to the slider instead of leaving a large empty panel. */
#compareDialog.compare-dialog{
width:min(740px,calc(100% - 24px));
max-width:740px;
}
#compareDialog .compare-dialog-inner{
padding:14px;
}
#compareDialog .compare-dialog-head{
margin-bottom:10px;
}
#compareDialog .compare-dialog-head h2{
font-size:1.45rem;
}
#compareDialog .ba-stage{
width:100%;
aspect-ratio:4/3!important;
max-height:none!important;
margin:0 auto;
border-radius:9px;
background:#f3f5f6;
}
#compareDialog .ba-stage img{
object-fit:contain!important;
background:#f3f5f6;
}
/* V26 mobile/tablet gallery polish. Sliders remain touch-friendly and projects stay fully visible. */
@media(max-width:760px){
#projects .ba-grid{gap:18px}
#projects .ba-stage{aspect-ratio:4/3!important;touch-action:none}
#projects .ba-stage img{object-fit:contain!important}
#projects .ba-handle{width:38px;height:38px;font-size:.9rem}
#projects .ba-label{top:8px;padding:4px 7px;font-size:.62rem}
#projects .ba-label.before{left:8px}
#projects .ba-label.after{right:8px}
#projects .gallery-slider-body{min-height:0;padding:12px 13px 14px}
#projects .gallery-slider-body p{font-size:.8rem}
#compareDialog.compare-dialog{width:calc(100% - 16px)}
#compareDialog .compare-dialog-inner{padding:10px}
#compareDialog .compare-dialog-head h2{font-size:1.16rem}
#compareDialog .dialog-close{width:34px;height:34px;font-size:1.25rem}
}
/* V28 Commercial gallery — same slider scale and View Larger behavior as Our Work. */
.commercial-gallery-section .commercial-ba-grid{margin-top:26px}
.commercial-gallery-section .commercial-gallery-slider .ba-stage{aspect-ratio:4/3;background:#f3f5f6}
.commercial-gallery-section .commercial-gallery-slider .ba-stage img{object-fit:contain!important;background:#f3f5f6}
.commercial-gallery-section .gallery-slider-body{min-height:82px}
@media(max-width:760px){
.commercial-gallery-section .commercial-ba-grid{gap:18px}
.commercial-gallery-section .commercial-gallery-slider .ba-stage{aspect-ratio:4/3!important}
.commercial-gallery-section .gallery-slider-body{min-height:0;padding:12px 13px 14px}
.commercial-gallery-section .gallery-slider-body p{font-size:.8rem}
}
/* V30 — Nicole-approved visual polish; V29 remains the base. */
/* Compact trust bar sitewide: same approved content, less vertical weight. */
.trust-item{padding:10px 14px!important;gap:10px!important}
.trust-icon{width:34px!important;height:34px!important;flex-basis:34px!important}
.trust-icon svg{width:18px!important;height:18px!important}
.trust-item b{font-size:.86rem;line-height:1.2}
.trust-item small{font-size:.70rem;line-height:1.2;margin-top:2px}
/* Home reviews: real V29 reviews, cleaner cards, no platform tile row. */
.reviews-section-modern{background:#fff!important}
.reviews-modern-head{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:34px;align-items:center;margin-bottom:30px}
.reviews-heading-copy{text-align:center;padding-left:190px}
.reviews-heading-copy .section-title{margin-bottom:8px}
.reviews-intro{max-width:790px;margin:0 auto;line-height:1.55}
.quality-mark{justify-self:end;width:165px;color:var(--navy);font-family:"Brush Script MT","Segoe Script",cursive;font-size:1.52rem;line-height:.92;transform:rotate(-4deg);text-align:center;padding-right:8px}
.quality-mark span{display:block}
.quality-mark i{display:block;width:92px;height:4px;margin:10px auto 0;background:var(--red);border-radius:100%;transform:rotate(-8deg)}
.reviews-grid-modern{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important}
.reviews-grid-modern .review-card{position:relative;border:1px solid #dbe3e8!important;border-radius:12px!important;padding:24px!important;background:#fff!important;box-shadow:0 8px 22px rgba(14,45,69,.055)!important;min-height:100%;display:flex;flex-direction:column}
.review-stars{color:#e5a000;font-size:1.18rem;letter-spacing:2px;margin-bottom:12px}
.reviews-grid-modern .review-card-head{order:3;margin:18px 0 0;padding-top:14px;border-top:1px solid rgba(var(--gray-rgb),.13)}
.reviews-grid-modern .review-card blockquote{order:2;flex:1}
.reviews-grid-modern .review-city{order:4;margin-top:0!important}
.reviews-grid-modern .review-card-head img{max-height:23px;max-width:85px}
/* Additional Services: approved soft cards + icon + mini explanation, preserving every V29 service. */
.additional-service-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;margin-top:26px!important}
.additional-service-grid>div.additional-service-card{padding:22px!important;border:1px solid #dbe3e8!important;border-radius:12px!important;background:linear-gradient(180deg,#fff,#fbfcfd)!important;box-shadow:0 7px 20px rgba(14,45,69,.045)!important;min-height:175px}
.additional-service-icon,.commercial-card-icon,.payment-icon{width:58px;height:58px;border-radius:50%;background:#f0f4f7;display:grid;place-items:center;color:var(--navy);margin-bottom:14px;flex:0 0 auto}
.additional-service-icon svg,.commercial-card-icon svg,.payment-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.additional-service-grid h3{font-size:1.08rem!important;margin:0 0 7px!important}
.additional-service-grid p{font-size:.9rem!important;line-height:1.5!important}
.additional-service-grid .service-link{font-size:.84rem}
/* Commercial: same V29 copy, polished card language matching Services. */
.commercial-primary-grid{gap:18px!important}
.commercial-primary-card{display:grid!important;grid-template-columns:70px 1fr!important;column-gap:18px;align-items:center;padding:25px!important;border:1px solid #dbe3e8!important;border-radius:12px!important;background:linear-gradient(180deg,#fff,#fbfcfd)!important;box-shadow:0 7px 20px rgba(14,45,69,.045)!important}
.commercial-primary-card .commercial-card-icon{grid-row:1 / span 2;margin:0;width:64px;height:64px}
.commercial-primary-card h3,.commercial-primary-card p{grid-column:2;margin-left:0}
.commercial-primary-card h3{margin-top:0!important;margin-bottom:7px!important}
.commercial-benefits{gap:16px!important}
.commercial-benefit-card{padding:22px!important;border:1px solid #dbe3e8!important;border-radius:12px!important;background:linear-gradient(180deg,#fff,#fbfcfd)!important;box-shadow:0 7px 20px rgba(14,45,69,.045)!important;text-align:left}
.commercial-benefit-card .commercial-card-icon{width:52px;height:52px;margin-bottom:13px}
.commercial-benefit-card h3{margin:0 0 7px!important}
.commercial-benefit-card p{margin:0!important}
/* Contact payment options: approved icon cards + exact fee disclosure. */
.payment-options-card{background:#fff!important;border:1px solid #dbe3e8!important;border-radius:14px!important;box-shadow:0 8px 24px rgba(14,45,69,.05)!important}
.payment-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important}
.payment-grid .payment{min-height:170px!important;padding:20px 15px!important;border:1px solid #dbe3e8!important;border-radius:12px!important;background:linear-gradient(180deg,#fff,#fbfcfd)!important;box-shadow:0 7px 20px rgba(14,45,69,.04)!important;align-items:center;text-align:center}
.payment-icon{margin:0 auto 10px;width:60px;height:60px}
.payment-grid .payment b{font-size:1rem!important;line-height:1.22}
.payment-grid .payment small{font-size:.8rem!important;line-height:1.42;max-width:18ch}
.payment-note{text-align:center;margin-top:20px!important}
/* Service Areas: approved photo cards; exact V29 titles + every V29 city retained. */
.service-areas-page .area-groups-visual{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:16px!important;border:0!important;margin-top:30px!important}
.service-areas-page .area-card-visual{grid-column:span 2;padding:0 0 16px!important;border:1px solid #dbe3e8!important;border-radius:12px!important;background:#fff!important;box-shadow:0 7px 20px rgba(14,45,69,.045)!important;overflow:hidden}
.service-areas-page .area-card-visual:nth-child(4){grid-column:2 / span 2}
.service-areas-page .area-card-visual:nth-child(5){grid-column:4 / span 2}
.area-card-photo{display:block;width:100%;aspect-ratio:2.45/1;object-fit:cover;background:#eef2f4}
.service-areas-page .area-card-visual h3{font-family:var(--serif);font-size:1.38rem;color:var(--navy);margin:14px 16px 8px}
.service-areas-page .area-card-visual .city-list{padding:0 16px;gap:7px}
.service-areas-page .area-card-visual .city{background:rgba(var(--gray-rgb),.065)!important;border-radius:999px!important;padding:7px 12px!important;color:var(--navy)!important}
/* Approved floating estimate attention cue: subtle light sweep only. */
.estimate-bubble{overflow:hidden;isolation:isolate}
.estimate-bubble::before{content:"";position:absolute;z-index:0;top:-45%;left:-42%;width:24%;height:190%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),rgba(255,255,255,.62),rgba(255,255,255,.10),transparent);animation:bq-estimate-shine 4.6s ease-in-out infinite;pointer-events:none}
.estimate-bubble>svg,.estimate-bubble>span{position:relative;z-index:1}
@keyframes bq-estimate-shine{0%,66%{left:-42%;opacity:0}72%{opacity:1}88%{left:120%;opacity:.95}92%,100%{left:120%;opacity:0}}
@media(max-width:960px){
.reviews-modern-head{grid-template-columns:1fr;text-align:center}.reviews-heading-copy{padding-left:0}.quality-mark{justify-self:center;margin-top:-10px}
.reviews-grid-modern{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.additional-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.payment-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.service-areas-page .area-groups-visual{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.service-areas-page .area-card-visual,.service-areas-page .area-card-visual:nth-child(4),.service-areas-page .area-card-visual:nth-child(5){grid-column:auto}
}
@media(max-width:620px){
.reviews-grid-modern,.additional-service-grid,.payment-grid,.service-areas-page .area-groups-visual{grid-template-columns:1fr!important}
.quality-mark{font-size:1.25rem;width:150px}
.commercial-primary-card{grid-template-columns:56px 1fr!important;padding:20px!important}.commercial-primary-card .commercial-card-icon{width:50px;height:50px}
.payment-grid .payment{min-height:145px!important}
.area-card-photo{aspect-ratio:16/7}
.trust-item{padding:9px 12px!important}
}
@media(prefers-reduced-motion:reduce){.estimate-bubble::before{animation:none!important;display:none!important}}
/* V31 — corrections to match Nicole's explicitly approved mockups. */
/* Reviews: source label beside the stars; approved heading/quality mark and cards remain unchanged. */
.review-stars-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.review-stars-row .review-stars{margin:0}
.review-source-badge{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:4px 9px;border:1px solid #e1e7eb;border-radius:999px;background:#f5f7f8;color:var(--navy);font-size:.72rem;font-weight:800;text-decoration:none;line-height:1}
.review-source-badge:hover{border-color:#c8d3da;background:#fff}
.reviews-grid-modern .review-card-head{justify-content:flex-start}
/* Services: exact approved visual hierarchy — eyebrow, title, concise intro, soft icon cards. */
.additional-services-approved{background:#fff}
.additional-services-approved .container{text-align:center}
.additional-services-approved .eyebrow{color:var(--red);margin-bottom:7px}
.additional-services-approved .section-title{margin-bottom:8px}
.additional-services-approved .services-intro{max-width:760px;margin:0 auto 26px;font-size:1rem}
.additional-services-approved .additional-service-grid{text-align:left;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;margin-top:0!important}
.additional-services-approved .additional-service-grid>div.additional-service-card{min-height:176px;padding:20px!important;background:#fbfcfd!important;border:1px solid #e0e7eb!important;box-shadow:0 5px 16px rgba(14,45,69,.035)!important}
.additional-services-approved .additional-service-icon{width:54px;height:54px;margin-bottom:12px;background:#f1f4f6}
.additional-services-approved .additional-service-grid h3{font-family:var(--serif);font-size:1.04rem!important;color:var(--navy)}
.additional-services-approved .additional-service-grid p{font-size:.84rem!important;color:#5c6f7f!important;line-height:1.46!important}
/* Commercial: approved consolidated services composition. */
.commercial-services-approved{background:#fff}
.commercial-approved-head{text-align:center;max-width:850px;margin:0 auto 28px}
.commercial-approved-head .eyebrow{color:var(--red);margin-bottom:7px}
.commercial-approved-head .lead{max-width:760px;margin:0 auto;font-size:1rem}
.approved-commercial-primary{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
.approved-commercial-primary .commercial-primary-card{min-height:150px;background:#f7f9fa!important;box-shadow:none!important}
.approved-commercial-primary .commercial-primary-card h3{font-family:var(--serif);font-size:1.2rem}
.approved-commercial-primary .commercial-primary-card p{font-size:.88rem;line-height:1.5;color:var(--muted)}
.commercial-additional-title{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin:28px auto 16px;max-width:850px;color:#53677a;font-size:.73rem;letter-spacing:.1em;text-align:center}
.commercial-additional-title span{height:1px;background:#d9e2e8}
.approved-commercial-benefits{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px!important}
.approved-commercial-benefits .commercial-benefit-card{min-height:190px;text-align:center!important;background:#f8fafb!important;box-shadow:none!important;padding:18px!important}
.approved-commercial-benefits .commercial-card-icon{margin:0 auto 10px!important}
.approved-commercial-benefits h3{font-family:var(--serif);font-size:1.02rem!important;color:var(--navy)}
.approved-commercial-benefits p{font-size:.8rem!important;line-height:1.45;color:var(--muted)}
/* Payment Options: exact approved title, order, copy and five-card row. */
.payment-options-section{background:#fff!important}
.payment-options-section .payment-options-card{border:0!important;box-shadow:none!important;padding:0!important}
.payment-options-intro{text-align:center;max-width:820px;margin:0 auto 28px}
.payment-options-intro .eyebrow{color:var(--red);margin-bottom:7px}
.payment-options-intro .section-title{margin-bottom:8px}
.payment-options-intro .muted{max-width:760px;margin:0 auto}
.payment-options-section .payment-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important}
.payment-options-section .payment-grid .payment{min-height:220px!important;padding:18px 12px!important;background:#fff!important;border:1px solid #dfe6eb!important;box-shadow:0 6px 18px rgba(14,45,69,.035)!important;border-radius:10px!important}
.payment-options-section .payment-icon{width:62px;height:62px;background:#f1f4f6;margin-bottom:12px}
.payment-options-section .payment b{font-family:var(--serif);font-size:1rem!important;color:var(--navy)}
.payment-options-section .payment small{font-size:.8rem!important;line-height:1.45;color:var(--muted)}
.zelle-word{font-weight:900;font-size:1.32rem;letter-spacing:-.04em;color:var(--navy)}
.payment-options-section .payment-note{font-size:.76rem;color:var(--muted);margin-top:22px!important}
@media(max-width:960px){
.additional-services-approved .additional-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.approved-commercial-primary{grid-template-columns:1fr}
.approved-commercial-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
.payment-options-section .payment-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:620px){
.additional-services-approved .additional-service-grid,.approved-commercial-benefits,.payment-options-section .payment-grid{grid-template-columns:1fr!important}
.commercial-additional-title{grid-template-columns:1fr;gap:8px}.commercial-additional-title span{display:none}
.payment-options-section .payment-grid .payment{min-height:160px!important}
}
/* V32 — exact corrections from Nicole's approved references. */
/* Reviews: smaller full text, no truncation; source badge remains beside stars. */
.home-page .reviews-grid-modern .review-card{padding:20px!important}
.home-page .reviews-grid-modern .review-card blockquote{
font-size:.78rem!important;
line-height:1.44!important;
display:block!important;
overflow:visible!important;
-webkit-line-clamp:unset!important;
-webkit-box-orient:initial!important;
}
.home-page .reviews-grid-modern .review-card-head{margin-top:14px!important;padding-top:11px!important}
.home-page .reviews-grid-modern .review-city{font-size:.74rem!important}
.home-page .review-stars{font-size:1.05rem!important;letter-spacing:1.5px!important}
.home-page .review-source-badge{font-size:.66rem!important;min-height:24px!important;padding:3px 8px!important}
/* Services: use the approved soft icon-card design; remove the prior red dash treatment. */
.additional-services-approved .additional-service-grid>div::before{display:none!important;content:none!important}
.additional-services-approved .additional-service-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;border:0!important}
.additional-services-approved .additional-service-grid>div.additional-service-card{
min-height:174px!important;
padding:20px!important;
border:1px solid #e0e6ea!important;
border-radius:10px!important;
background:#fbfcfd!important;
box-shadow:0 5px 14px rgba(14,45,69,.035)!important;
}
.additional-services-approved .additional-service-icon{
width:58px!important;height:58px!important;margin:0 0 12px!important;
background:#f1f4f6!important;color:var(--navy)!important;
}
.additional-services-approved .additional-service-icon svg{width:31px!important;height:31px!important}
.additional-services-approved .additional-service-grid h3{font-size:1.05rem!important;margin:0 0 6px!important}
.additional-services-approved .additional-service-grid p{font-size:.82rem!important;line-height:1.42!important;margin:0!important}
.additional-services-approved .additional-service-grid .service-link{display:inline!important;font-size:.78rem!important;margin-left:4px!important}
/* Commercial: exact approved visual hierarchy — two soft feature cards plus four compact service cards. */
.commercial-services-approved{padding-top:58px!important;padding-bottom:58px!important}
.commercial-approved-head{max-width:820px!important;margin:0 auto 24px!important;text-align:center!important}
.commercial-approved-head .section-title{margin:0 0 8px!important}
.commercial-approved-head .lead{font-size:.92rem!important;line-height:1.48!important}
.approved-commercial-primary{gap:14px!important}
.approved-commercial-primary .commercial-primary-card{
min-height:146px!important;padding:22px!important;
grid-template-columns:66px 1fr!important;column-gap:16px!important;
border:0!important;border-radius:8px!important;background:#f7f9fa!important;box-shadow:none!important;
}
.approved-commercial-primary .commercial-primary-card .commercial-card-icon{
width:62px!important;height:62px!important;background:#eaf0f4!important;margin:0!important;
}
.approved-commercial-primary .commercial-primary-card .commercial-card-icon svg{width:31px!important;height:31px!important}
.approved-commercial-primary .commercial-primary-card h3{font-size:1.08rem!important;margin:0 0 5px!important}
.approved-commercial-primary .commercial-primary-card p{font-size:.80rem!important;line-height:1.42!important;margin:0!important}
.commercial-additional-title{margin:24px auto 14px!important;font-size:.70rem!important}
.approved-commercial-benefits{gap:12px!important}
.approved-commercial-benefits .commercial-benefit-card{
min-height:177px!important;padding:18px 14px!important;border:0!important;border-radius:8px!important;
background:#f7f9fa!important;box-shadow:none!important;text-align:center!important;
}
.approved-commercial-benefits .commercial-card-icon{width:54px!important;height:54px!important;background:#eaf0f4!important;margin:0 auto 10px!important}
.approved-commercial-benefits .commercial-card-icon svg{width:28px!important;height:28px!important}
.approved-commercial-benefits h3{font-size:.94rem!important;margin:0 0 5px!important}
.approved-commercial-benefits p{font-size:.75rem!important;line-height:1.42!important;margin:0!important}
/* Payment Options: exact approved five-card row with roomy icon circles and no legacy pill styling. */
.payment-options-section{padding-top:44px!important;padding-bottom:54px!important;background:#fff!important}
.payment-options-section .payment-options-card{border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;background:#fff!important}
.payment-options-intro{max-width:820px!important;margin:0 auto 28px!important;text-align:center!important}
.payment-options-intro .section-title{font-size:clamp(1.75rem,2.8vw,2.5rem)!important;margin:0 0 8px!important}
.payment-options-intro .muted{font-size:.92rem!important;line-height:1.48!important}
.payment-options-section .payment-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important;flex-wrap:initial!important}
.payment-options-section .payment-grid .payment{
min-height:224px!important;padding:18px 12px!important;
display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;
gap:5px!important;border:1px solid #dfe6eb!important;border-radius:10px!important;background:#fff!important;
box-shadow:0 5px 16px rgba(14,45,69,.035)!important;text-align:center!important;color:var(--navy)!important;
}
.payment-options-section .payment-icon{width:68px!important;height:68px!important;margin:0 auto 10px!important;background:#f1f4f6!important}
.payment-options-section .payment-icon svg{width:34px!important;height:34px!important}
.payment-options-section .payment b{font-size:1.05rem!important;line-height:1.18!important;margin:0!important}
.payment-options-section .payment small{font-size:.78rem!important;line-height:1.42!important;max-width:18ch!important;color:var(--muted)!important}
.payment-options-section .zelle-word{font-size:1.35rem!important}
.payment-options-section .payment-note{font-size:.74rem!important;margin:22px auto 0!important;text-align:center!important}
@media(max-width:960px){
.additional-services-approved .additional-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.approved-commercial-primary{grid-template-columns:1fr!important}
.approved-commercial-benefits{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.payment-options-section .payment-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:620px){
.home-page .reviews-grid-modern .review-card blockquote{font-size:.80rem!important}
.additional-services-approved .additional-service-grid,.approved-commercial-benefits,.payment-options-section .payment-grid{grid-template-columns:1fr!important}
.payment-options-section .payment-grid .payment{min-height:170px!important}
}
/* V33 - Services additional services cards refined per approval */
.additional-services-approved .additional-service-grid{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:12px!important;
margin-top:2px!important;
}
.additional-services-approved .additional-service-grid>div.additional-service-card{
min-height:auto!important;
padding:14px 12px!important;
background:#fbfcfd!important;
border:1px solid #e1e8ec!important;
border-radius:10px!important;
box-shadow:none!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
align-items:center!important;
text-align:center!important;
}
.additional-services-approved .additional-service-icon{
display:none!important;
}
.additional-services-approved .additional-service-grid h3{
font-family:var(--serif)!important;
font-size:.94rem!important;
line-height:1.28!important;
margin:0 0 6px!important;
color:var(--navy)!important;
text-align:center!important;
}
.additional-services-approved .additional-service-grid p{
font-size:.74rem!important;
line-height:1.4!important;
margin:0!important;
color:#5c6f7f!important;
text-align:center!important;
}
.additional-services-approved .additional-service-grid .service-link{
display:none!important;
}
@media(max-width:1100px){
.additional-services-approved .additional-service-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
}
@media(max-width:780px){
.additional-services-approved .additional-service-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
}
@media(max-width:520px){
.additional-services-approved .additional-service-grid{
grid-template-columns:1fr!important;
}
}
/* V34 - tighten commercial intro block and keep approved payment options block */
.commercial-services-approved{
padding-top:34px!important;
padding-bottom:38px!important;
}
.commercial-approved-head{
max-width:760px!important;
margin:0 auto 16px!important;
}
.commercial-approved-head .eyebrow{
margin-bottom:5px!important;
}
.commercial-approved-head .section-title{
margin:0 0 6px!important;
}
.commercial-approved-head .lead{
font-size:.88rem!important;
line-height:1.4!important;
margin:0 auto!important;
}
.approved-commercial-primary{
gap:10px!important;
margin-top:0!important;
}
.approved-commercial-primary .commercial-primary-card{
min-height:120px!important;
padding:16px 18px!important;
column-gap:14px!important;
}
.approved-commercial-primary .commercial-primary-card .commercial-card-icon{
width:54px!important;
height:54px!important;
}
.approved-commercial-primary .commercial-primary-card .commercial-card-icon svg{
width:27px!important;
height:27px!important;
}
.approved-commercial-primary .commercial-primary-card h3{
font-size:1rem!important;
margin:0 0 4px!important;
}
.approved-commercial-primary .commercial-primary-card p{
font-size:.78rem!important;
line-height:1.38!important;
}
.commercial-additional-title{
margin:16px auto 10px!important;
}
.approved-commercial-benefits{
gap:10px!important;
}
.approved-commercial-benefits .commercial-benefit-card{
min-height:156px!important;
padding:14px 12px!important;
}
.approved-commercial-benefits .commercial-card-icon{
width:50px!important;
height:50px!important;
margin:0 auto 8px!important;
}
.approved-commercial-benefits h3{
font-size:.9rem!important;
margin:0 0 4px!important;
}
.approved-commercial-benefits p{
font-size:.74rem!important;
line-height:1.36!important;
}
/* V34 - payment options block kept as approved mockup with five icon cards */
.payment-options-section{
padding-top:42px!important;
padding-bottom:50px!important;
}
.payment-options-intro{
max-width:820px!important;
margin:0 auto 24px!important;
text-align:center!important;
}
.payment-options-intro .section-title{
margin:0 0 8px!important;
}
.payment-options-intro .muted{
font-size:.92rem!important;
line-height:1.45!important;
}
.payment-options-section .payment-grid{
grid-template-columns:repeat(5,minmax(0,1fr))!important;
gap:12px!important;
}
.payment-options-section .payment-grid .payment{
min-height:210px!important;
padding:18px 12px!important;
background:#fff!important;
border:1px solid #dfe6eb!important;
border-radius:10px!important;
box-shadow:0 4px 14px rgba(14,45,69,.03)!important;
}
.payment-options-section .payment-icon{
width:64px!important;
height:64px!important;
margin:0 auto 10px!important;
background:#f1f4f6!important;
}
.payment-options-section .payment-icon svg{
width:34px!important;
height:34px!important;
}
.payment-options-section .payment b{
font-size:1rem!important;
line-height:1.18!important;
}
.payment-options-section .payment small{
font-size:.78rem!important;
line-height:1.4!important;
max-width:18ch!important;
}
.payment-options-section .payment-note{
margin:18px auto 0!important;
}
@media(max-width:960px){
.payment-options-section .payment-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:640px){
.payment-options-section .payment-grid{grid-template-columns:1fr!important;}
.payment-options-section .payment-grid .payment{min-height:160px!important;}
}
/* V37 - Service Areas hero uses the exact same hero geometry as Services/Commercial/Contact. */
.service-area-hero-panel-exact{
background-image:url('../images/service-areas-hero.jpg')!important;
background-position:center center!important;
}
/* ============================================================
V40 RESPONSIVE PASS
Desktop remains V37. Only approved desktop exception:
Service Areas hero photo is restored to a complete view and
the top hero Call/Text link is removed in HTML.
============================================================ */
/* Mobile hero images are real ![]()
elements, hidden on desktop. */
.mobile-hero-image{display:none}
/* APPROVED DESKTOP EXCEPTION — Service Areas only. */
@media (min-width:961px){
.service-areas-page .service-area-hero-panel-exact{
background-size:contain!important;
background-position:right center!important;
background-repeat:no-repeat!important;
background-color:#f7fafb!important;
}
}
/* Tablet + mobile behavior. No desktop selectors above 960px. */
@media (max-width:960px){
/* HEROES — text first, complete photo directly below. */
.home-page .home-hero,
.services-hero-image,
.commercial-hero-image,
.our-work-hero-image,
.service-area-hero-exact,
.contact-hero-image{padding:14px 0!important}
.home-page .home-hero .container,
.services-hero-image .container,
.commercial-hero-image .container,
.our-work-hero-image .container,
.service-area-hero-exact .container,
.contact-hero-image .container{width:min(100% - 24px,1280px)!important}
.home-page .home-hero-panel,
.services-hero-panel,
.commercial-hero-panel,
.our-work-hero-panel,
.service-area-hero-panel-exact,
.contact-hero-panel{
height:auto!important;
min-height:0!important;
display:block!important;
background-image:none!important;
background:#fff!important;
border-radius:12px!important;
overflow:hidden!important;
}
.home-page .home-hero-panel::before,
.services-hero-panel::before,
.commercial-hero-panel::before,
.our-work-hero-panel::before,
.service-area-hero-panel-exact::before,
.contact-hero-panel::before{display:none!important}
.home-page .home-hero .hero-copy,
.services-hero-copy,
.commercial-hero-copy,
.our-work-hero-copy,
.services-hero-copy,
.contact-hero-copy{
width:auto!important;
max-width:none!important;
margin:0!important;
padding:20px 22px 16px!important;
position:relative!important;
}
.home-page .home-hero .hero-copy::before{display:none!important}
.mobile-hero-image{
display:block!important;
width:100%!important;
height:clamp(180px,32vw,250px)!important;
object-fit:contain!important;
object-position:center center!important;
background:#f3f6f8!important;
border-top:1px solid var(--line)!important;
}
.home-page .home-hero .eyebrow,
.services-hero-copy .eyebrow,
.commercial-hero-copy .eyebrow,
.our-work-hero-copy .eyebrow,
.contact-hero-copy .eyebrow{
font-size:.68rem!important;
line-height:1.25!important;
letter-spacing:.13em!important;
margin-bottom:8px!important;
}
.home-page .home-hero .home-hero-title,
.services-hero-image .display,
.commercial-hero-image .display,
.our-work-hero-image .display,
.service-area-hero-exact .display,
.contact-hero-image .display{
font-size:clamp(1.5rem,5.2vw,2.05rem)!important;
line-height:1.08!important;
margin:.1em 0 .42em!important;
}
.home-page .home-hero .lead,
.services-hero-copy .lead,
.commercial-hero-copy .lead,
.our-work-hero-copy .lead,
.contact-hero-copy .lead{
font-size:.88rem!important;
line-height:1.42!important;
max-width:none!important;
margin:0!important;
}
.home-page .home-hero .hero-actions,
.services-hero-copy .hero-actions,
.commercial-hero-copy .hero-actions,
.our-work-hero-copy .hero-actions,
.contact-hero-copy .hero-actions{margin-top:12px!important}
/* TRUST BAR — compact 2 x 2, no icons on tablet/mobile. */
.trust-strip{padding:6px 0!important}
.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important}
.trust-item{
min-width:0!important;
padding:9px 8px!important;
gap:2px!important;
min-height:66px!important;
flex-direction:column!important;
justify-content:center!important;
align-items:center!important;
text-align:center!important;
border-right:1px solid var(--line)!important;
border-bottom:1px solid var(--line)!important;
}
.trust-item:nth-child(2n){border-right:0!important}
.trust-item:nth-child(n+3){border-bottom:0!important}
.trust-icon{display:none!important}
.trust-item b{font-size:.78rem!important;line-height:1.16!important}
.trust-item small{font-size:.66rem!important;line-height:1.2!important;margin-top:2px!important}
/* FOOTER — same clean centered responsive footer on every page. */
.site-footer{padding-top:30px!important;padding-bottom:118px!important}
.footer-grid{grid-template-columns:1fr 1fr!important;gap:26px!important}
.footer-logo{grid-column:1/-1!important;width:100%!important;text-align:center!important}
.footer-logo img{display:block!important;width:min(235px,52vw)!important;margin:0 auto!important}
.footer-logo .license,
.footer-logo .footer-insured{max-width:none!important;width:100%!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important}
.footer-socials{
width:100%!important;max-width:none!important;margin:14px auto 0!important;
display:grid!important;grid-template-columns:repeat(4,40px)!important;
justify-content:center!important;align-items:center!important;gap:12px!important;
}
.footer-socials a{width:40px!important;height:40px!important;display:grid!important;place-items:center!important;margin:0!important}
.footer-socials img{display:block!important;width:38px!important;height:38px!important;max-width:none!important;margin:0!important}
.footer-bottom{margin-top:22px!important;padding-top:16px!important;padding-bottom:6px!important;font-size:.75rem!important;line-height:1.4!important}
/* Services — Additional Services compact, two columns, names only. */
.additional-services-approved .services-intro{font-size:.88rem!important;line-height:1.38!important;margin:0 auto 16px!important}
.additional-services-approved .additional-service-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:10px!important;margin-top:0!important;
}
.additional-services-approved .additional-service-grid>div.additional-service-card{
min-height:76px!important;padding:12px 10px!important;
display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;
}
.additional-services-approved .additional-service-grid h3{margin:0!important;font-size:.9rem!important;line-height:1.22!important}
.additional-services-approved .additional-service-grid p{display:none!important}
/* Commercial — compact two-column titles-only block before projects. */
.commercial-services-approved{padding-top:34px!important;padding-bottom:34px!important}
.commercial-approved-head{margin:0 auto 16px!important}
.approved-commercial-primary,
.approved-commercial-benefits{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.approved-commercial-primary .commercial-primary-card,
.approved-commercial-benefits .commercial-benefit-card{
min-height:76px!important;padding:12px 10px!important;
display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;
border:1px solid #e1e8ec!important;border-radius:10px!important;background:#f8fafb!important;
}
.approved-commercial-primary .commercial-primary-card{grid-template-columns:1fr!important}
.approved-commercial-primary .commercial-card-icon,
.approved-commercial-benefits .commercial-card-icon,
.approved-commercial-primary p,
.approved-commercial-benefits p{display:none!important}
.approved-commercial-primary h3,
.approved-commercial-benefits h3{margin:0!important;font-size:.9rem!important;line-height:1.22!important}
.commercial-additional-title{margin:14px auto 10px!important}
/* Contact — compact payment options; descriptions removed. */
.payment-options-section{padding-top:36px!important;padding-bottom:40px!important}
.payment-options-intro{margin:0 auto 18px!important}
.payment-options-section .payment-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.payment-options-section .payment-grid .payment{
min-height:92px!important;padding:12px 10px!important;gap:6px!important;
display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;
}
.payment-options-section .payment-icon{width:48px!important;height:48px!important;margin:0 auto 3px!important}
.payment-options-section .payment-icon svg{width:28px!important;height:28px!important}
.payment-options-section .zelle-word{font-size:1rem!important}
.payment-options-section .payment b{font-size:.88rem!important;line-height:1.16!important}
.payment-options-section .payment small{display:none!important}
.payment-options-section .payment-note{margin:14px auto 0!important;font-size:.72rem!important}
/* Back-to-top — left, Estimate remains right. */
.back-to-top{
position:fixed;left:14px;bottom:18px;z-index:239;
width:44px;height:44px;border:0;border-radius:50%;
display:grid;place-items:center;background:var(--navy);color:#fff;
font-size:1.35rem;font-weight:900;line-height:1;text-decoration:none;
box-shadow:0 10px 26px rgba(14,45,69,.22);
opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.estimate-bubble{right:12px!important;bottom:16px!important}
}
@media (max-width:760px){
.home-page .home-hero .container,
.services-hero-image .container,
.commercial-hero-image .container,
.our-work-hero-image .container,
.service-area-hero-exact .container,
.contact-hero-image .container{width:min(100% - 20px,1280px)!important}
.home-page .home-hero .hero-copy,
.services-hero-copy,
.commercial-hero-copy,
.our-work-hero-copy,
.contact-hero-copy{padding:16px 16px 13px!important}
.mobile-hero-image{height:clamp(145px,42vw,205px)!important}
.home-page .home-hero .home-hero-title,
.services-hero-image .display,
.commercial-hero-image .display,
.our-work-hero-image .display,
.service-area-hero-exact .display,
.contact-hero-image .display{font-size:1.38rem!important}
.home-page .home-hero .lead,
.services-hero-copy .lead,
.commercial-hero-copy .lead,
.our-work-hero-copy .lead,
.contact-hero-copy .lead{font-size:.78rem!important;line-height:1.36!important}
.trust-item{min-height:58px!important;padding:7px 6px!important}
.trust-item b{font-size:.72rem!important}
.trust-item small{font-size:.60rem!important}
.footer-grid{grid-template-columns:1fr!important;gap:24px!important}
.footer-logo{grid-column:auto!important}
.footer-logo img{width:min(235px,72vw)!important}
.footer-bottom{display:block!important;font-size:.72rem!important}
.footer-bottom>*+*{margin-top:8px!important}
.payment-options-section .payment-grid{grid-template-columns:1fr!important}
.payment-options-section .payment-grid .payment{
min-height:62px!important;padding:9px 12px!important;
display:grid!important;grid-template-columns:42px 1fr!important;column-gap:12px!important;text-align:left!important;
}
.payment-options-section .payment-icon{width:40px!important;height:40px!important;margin:0!important}
.payment-options-section .payment-icon svg{width:24px!important;height:24px!important}
.payment-options-section .payment b{font-size:.9rem!important;text-align:left!important}
}
/* ============================================================
V41 — approved corrections only.
Desktop remains frozen except the Service Areas hero correction.
============================================================ */
/* DESKTOP: Service Areas hero matches the established hero treatment:
image fills the panel, right side remains visible, left side fades into copy. */
@media (min-width:961px){
.service-areas-page .service-area-hero-panel-exact{
background-size:cover!important;
background-position:right center!important;
background-repeat:no-repeat!important;
background-color:transparent!important;
}
.service-areas-page .service-area-hero-panel-exact::before{
display:block!important;
background:linear-gradient(90deg,
rgba(250,250,248,.985) 0%,
rgba(250,250,248,.94) 25%,
rgba(250,250,248,.76) 39%,
rgba(250,250,248,.43) 51%,
rgba(250,250,248,.12) 64%,
rgba(250,250,248,0) 78%)!important;
}
}
/* MOBILE: Payment Options stays compact in two columns. */
@media (max-width:760px){
.payment-options-section .payment-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:9px!important;
}
.payment-options-section .payment-grid .payment{
min-height:84px!important;
padding:10px 8px!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
align-items:center!important;
gap:5px!important;
text-align:center!important;
}
.payment-options-section .payment-icon{
width:40px!important;
height:40px!important;
margin:0 auto 2px!important;
}
.payment-options-section .payment-icon svg{
width:24px!important;
height:24px!important;
}
.payment-options-section .payment b{
font-size:.82rem!important;
line-height:1.15!important;
text-align:center!important;
}
/* OUR WORK: all filter pills wrap onto visible rows; no sideways scrolling. */
.our-work-hero-image ~ .trust-strip + #projects .filter-row,
#projects .filter-row{
display:flex!important;
flex-wrap:wrap!important;
overflow:visible!important;
margin:16px 0 22px!important;
padding:0!important;
gap:8px!important;
scrollbar-width:auto!important;
-webkit-overflow-scrolling:auto!important;
}
#projects .filter-btn{
flex:0 1 auto!important;
padding:7px 10px!important;
font-size:.79rem!important;
white-space:nowrap!important;
}
}
/* ============================================================
V42 — approved refinements only.
- Our Work mobile hero uses the same wide rectangular frame as other heroes.
- Footer slogan restored sitewide.
- Licensed & Insured is black in every footer, desktop and responsive.
============================================================ */
.footer-logo .footer-insured{color:#000!important}
.footer-logo .slogan{
display:block!important;
text-align:center!important;
color:#4d6070!important;
font-size:.84rem!important;
line-height:1.25!important;
margin:8px auto 4px!important;
}
@media (max-width:960px){
.our-work-hero-panel .mobile-hero-image{
width:100%!important;
height:clamp(180px,32vw,250px)!important;
object-fit:cover!important;
object-position:center center!important;
}
}
@media (max-width:760px){
.our-work-hero-panel .mobile-hero-image{
height:clamp(145px,42vw,205px)!important;
object-fit:cover!important;
object-position:center center!important;
}
}
/* ============================================================
V43 — two small approved footer corrections only.
- Exact slogan text under the BQ Painting logo.
- Mobile social icons centered as one group in every footer.
============================================================ */
@media (max-width:760px){
.footer-logo .footer-socials{
display:flex!important;
flex-wrap:nowrap!important;
justify-content:center!important;
align-items:center!important;
width:max-content!important;
max-width:100%!important;
margin:14px auto 0!important;
gap:12px!important;
}
.footer-logo .footer-socials a{
flex:0 0 40px!important;
width:40px!important;
height:40px!important;
display:grid!important;
place-items:center!important;
margin:0!important;
}
.footer-logo .footer-socials img{
display:block!important;
width:38px!important;
height:38px!important;
margin:0!important;
}
}
/* ============================================================
V44 — approved changes only.
- Footer slogan/license/insured centered to the BQ logo and light weight.
- Contact hero approved color-guidance copy spacing.
============================================================ */
.footer-logo .slogan,
.footer-logo .license,
.footer-logo .footer-insured{
width:265px!important;
max-width:265px!important;
text-align:center!important;
font-weight:400!important;
margin-left:0!important;
margin-right:0!important;
}
.footer-logo .slogan{margin-top:8px!important;margin-bottom:4px!important}
.footer-logo .license{margin-top:0!important;margin-bottom:0!important}
.footer-logo .footer-insured{margin-top:2px!important;margin-bottom:0!important}
.contact-hero-copy .contact-hero-followup{margin-top:12px!important}
@media(max-width:960px){
.footer-logo .slogan,
.footer-logo .license,
.footer-logo .footer-insured{
width:240px!important;
max-width:240px!important;
margin-left:auto!important;
margin-right:auto!important;
}
}
@media(max-width:760px){
.footer-logo .slogan,
.footer-logo .license,
.footer-logo .footer-insured{
width:min(235px,72vw)!important;
max-width:min(235px,72vw)!important;
margin-left:auto!important;
margin-right:auto!important;
}
.contact-hero-copy .contact-hero-followup{margin-top:9px!important}
}
/* ============================================================
V45 — MOBILE HERO UNIFICATION ONLY.
Desktop and tablet remain exactly as V44.
On phones, every hero photo uses the same wide horizontal frame
and clean image treatment as the approved Home / Services heroes.
============================================================ */
@media (max-width:760px){
.home-page .home-hero-panel .mobile-hero-image,
.services-hero-panel .mobile-hero-image,
.commercial-hero-panel .mobile-hero-image,
.our-work-hero-panel .mobile-hero-image,
.service-area-hero-panel-exact .mobile-hero-image,
.contact-hero-panel .mobile-hero-image{
display:block!important;
width:100%!important;
height:clamp(145px,40vw,170px)!important;
object-fit:cover!important;
object-position:center center!important;
filter:none!important;
opacity:1!important;
background:#fff!important;
border-top:1px solid var(--line)!important;
border-radius:0!important;
}
/* The Commercial and Contact source images contain a soft/blurred area
on the far left. On mobile, crop that edge out while keeping the same
hero frame and height as every other page. */
.commercial-hero-panel .mobile-hero-image,
.contact-hero-panel .mobile-hero-image{
object-position:right center!important;
}
/* No hero fade/overlay is allowed over the mobile photographs. */
.home-page .home-hero-panel::before,
.services-hero-panel::before,
.commercial-hero-panel::before,
.our-work-hero-panel::before,
.service-area-hero-panel-exact::before,
.contact-hero-panel::before{
display:none!important;
content:none!important;
}
}
/* ============================================================
V46 — HOME MOBILE HERO ONLY.
Match the subtle soft/blurred top edge seen on the other mobile
hero photos. Desktop/tablet and all other page styling untouched.
============================================================ */
@media (max-width:760px){
.home-page .home-hero-panel{position:relative!important}
.home-page .home-hero-panel::after{
content:""!important;
display:block!important;
position:absolute!important;
left:0!important;
right:0!important;
bottom:calc(clamp(145px,40vw,170px) - 28px)!important;
height:30px!important;
pointer-events:none!important;
z-index:3!important;
background:linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.12) 48%,rgba(255,255,255,0) 100%)!important;
-webkit-backdrop-filter:blur(2px)!important;
backdrop-filter:blur(2px)!important;
}
}
/* ============================================================
V47 — approved header/footer refinements only.
Applies on desktop and mobile.
============================================================ */
/* Header slogan directly below the BQ Painting logo. */
.brand{
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
text-decoration:none!important;
}
.brand .header-slogan{
display:block!important;
width:100%!important;
margin:4px 0 0!important;
text-align:center!important;
color:#6a7783!important;
font-size:1.02rem!important;
font-weight:400!important;
line-height:1.2!important;
white-space:nowrap!important;
text-decoration:none!important;
}
/* Footer spacing approved: slogan closer to logo, lower lines slightly separated. */
.footer-logo .slogan{
margin-top:2px!important;
margin-bottom:10px!important;
}
.footer-logo .license{
margin-top:0!important;
margin-bottom:5px!important;
}
.footer-logo .footer-insured{
margin-top:5px!important;
margin-bottom:0!important;
}
/* Footer Contact: equal spacing for the final hours line. */
.footer-contact-line{
line-height:1.4!important;
}
.footer-contact-line > span{
display:block!important;
}
.footer-contact-line > span + span{
margin-top:6px!important;
}
@media(max-width:960px){
.brand .header-slogan{
font-size:.9rem!important;
margin-top:3px!important;
line-height:1.18!important;
}
}
@media(max-width:620px){
.brand .header-slogan{
font-size:.78rem!important;
line-height:1.15!important;
margin-top:2px!important;
}
}
/* ============================================================
V49 — approved header logo size refinement.
Slightly smaller logo so the slogan fits cleanly below it
in both desktop and mobile headers.
============================================================ */
.brand img{
width:380px!important;
max-height:112px!important;
}
@media(max-width:960px){
.brand img{
width:270px!important;
max-height:84px!important;
}
}
@media(max-width:620px){
.brand img{
width:198px!important;
max-height:66px!important;
}
}
/* ============================================================
V50 — COMMERCIAL PAGE ONLY.
Tighten Commercial Projects spacing and make before/after
presentation more compact, centered and image-forward.
============================================================ */
.commercial-page .commercial-gallery-section{
padding-top:20px!important;
}
.commercial-page .commercial-gallery-section .section-head{
margin-bottom:16px!important;
}
.commercial-page .commercial-gallery-section .commercial-ba-grid{
margin-top:12px!important;
gap:22px!important;
align-items:start!important;
}
.commercial-page .commercial-gallery-slider{
width:100%!important;
max-width:560px!important;
justify-self:center!important;
}
.commercial-page .commercial-gallery-slider .ba-stage{
aspect-ratio:1/1!important;
background:#fff!important;
}
.commercial-page .commercial-gallery-slider .ba-stage img{
object-fit:cover!important;
object-position:center center!important;
background:#fff!important;
}
.commercial-page #compareDialog.compare-dialog{
width:min(760px,calc(100% - 32px))!important;
}
.commercial-page #compareDialog .compare-dialog-inner{
padding:20px!important;
}
.commercial-page #compareDialog .ba-stage{
width:min(100%,680px)!important;
aspect-ratio:1/1!important;
margin:0 auto!important;
background:#fff!important;
}
.commercial-page #compareDialog .ba-stage img{
object-fit:cover!important;
object-position:center center!important;
background:#fff!important;
}
@media(max-width:760px){
.commercial-page .commercial-gallery-section{
padding-top:14px!important;
}
.commercial-page .commercial-gallery-section .commercial-ba-grid{
margin-top:8px!important;
gap:16px!important;
}
.commercial-page .commercial-gallery-slider{
max-width:100%!important;
}
.commercial-page #compareDialog.compare-dialog{
width:calc(100% - 16px)!important;
}
.commercial-page #compareDialog .compare-dialog-inner{
padding:10px!important;
}
}
/* ============================================================
V51 — approved mobile header/footer refinement + commercial slider size.
- MOBILE: center the logo/slogan in the header and make the footer more compact
with smaller three-column content under the social icons.
- COMMERCIAL: before/after sliders match the more standard Our Work sizing.
============================================================ */
@media (max-width:760px){
/* HEADER — center the logo/slogan group perfectly, keep menu on the right. */
.header-inner{
position:relative!important;
justify-content:flex-end!important;
align-items:center!important;
height:116px!important;
padding-left:12px!important;
padding-right:56px!important;
}
.brand{
position:absolute!important;
left:50%!important;
top:50%!important;
transform:translate(-50%,-50%)!important;
margin:0!important;
width:min(100%,300px)!important;
max-width:calc(100% - 92px)!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
}
.brand img{
width:198px!important;
max-width:100%!important;
max-height:66px!important;
margin:0 auto!important;
}
.brand .header-slogan{
display:block!important;
width:100%!important;
max-width:100%!important;
margin:3px auto 0!important;
text-align:center!important;
line-height:1.15!important;
}
.mobile-toggle{
position:relative!important;
right:auto!important;
top:auto!important;
transform:none!important;
margin-left:auto!important;
z-index:2!important;
}
.nav{top:116px!important}
/* FOOTER — compact three-column layout under social icons, better centered spacing. */
.site-footer{padding-top:26px!important;padding-bottom:124px!important}
.footer-grid{
grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr) minmax(0,.95fr)!important;
gap:10px!important;
align-items:start!important;
}
.footer-logo{
grid-column:1/-1!important;
width:100%!important;
text-align:center!important;
}
.footer-logo img{
width:min(210px,62vw)!important;
}
.footer-logo .slogan,
.footer-logo .license,
.footer-logo .footer-insured{
width:min(230px,78vw)!important;
max-width:min(230px,78vw)!important;
margin-left:auto!important;
margin-right:auto!important;
}
.footer-socials{
margin:12px auto 0!important;
gap:12px!important;
}
.footer-socials a{width:38px!important;height:38px!important}
.footer-socials img{width:36px!important;height:36px!important}
.footer-col{
min-width:0!important;
padding-top:10px!important;
padding-left:4px!important;
padding-right:4px!important;
border-top:1px solid var(--line)!important;
}
.footer-col:nth-of-type(2),
.footer-col:nth-of-type(3),
.footer-col:nth-of-type(4){
justify-self:center!important;
width:100%!important;
}
.footer-grid .footer-col:nth-of-type(3){
text-align:center!important;
}
.footer-grid .footer-col:nth-of-type(3) a,
.footer-grid .footer-col:nth-of-type(3) .footer-contact-line{
width:100%!important;
margin-left:auto!important;
margin-right:auto!important;
}
.footer-grid .footer-col:nth-of-type(2){text-align:left!important}
.footer-grid .footer-col:nth-of-type(4){text-align:left!important}
.footer-col h4{
font-size:.86rem!important;
margin:0 0 8px!important;
line-height:1.15!important;
}
.footer-col a,
.footer-contact-line{
display:block!important;
font-size:.69rem!important;
line-height:1.36!important;
margin:4px 0!important;
overflow-wrap:anywhere!important;
word-break:break-word!important;
}
.footer-contact-line > span + span{margin-top:4px!important}
.footer-col a[href^="tel:"]{color:var(--red)!important;font-weight:700!important}
.footer-bottom{
margin-top:16px!important;
padding-top:14px!important;
text-align:center!important;
font-size:.69rem!important;
line-height:1.35!important;
}
/* COMMERCIAL — cards/sliders same visual scale as Our Work. */
.commercial-page .commercial-gallery-section{padding-top:20px!important}
.commercial-page .commercial-gallery-section .commercial-ba-grid{
margin-top:12px!important;
gap:20px!important;
}
.commercial-page .commercial-gallery-slider{
width:100%!important;
max-width:none!important;
}
.commercial-page .commercial-gallery-slider .ba-stage{
aspect-ratio:16/10!important;
background:#e8eef2!important;
}
.commercial-page .commercial-gallery-slider .ba-stage img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center center!important;
}
}
@media (min-width:761px){
/* COMMERCIAL — match Our Work slider scale on larger screens too. */
.commercial-page .commercial-gallery-slider{
width:100%!important;
max-width:none!important;
}
.commercial-page .commercial-gallery-slider .ba-stage{
aspect-ratio:16/10!important;
background:#e8eef2!important;
}
.commercial-page .commercial-gallery-slider .ba-stage img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center center!important;
}
.commercial-page #compareDialog.compare-dialog{
width:min(980px,calc(100% - 32px))!important;
}
.commercial-page #compareDialog .compare-dialog-inner{
padding:24px!important;
}
.commercial-page #compareDialog .ba-stage{
width:100%!important;
aspect-ratio:16/9!important;
margin:0 auto!important;
background:#e8eef2!important;
}
.commercial-page #compareDialog .ba-stage img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center center!important;
}
}
/* ============================================================
V53 — MOBILE ONLY.
- Move hamburger menu to the far-right corner of the header.
- Keep footer email on one line with slightly smaller type.
============================================================ */
@media (max-width:760px){
.mobile-toggle{
position:absolute!important;
right:12px!important;
top:50%!important;
transform:translateY(-50%)!important;
margin:0!important;
z-index:3!important;
}
.footer-grid .footer-col:nth-of-type(3) a[href^="mailto:"]{
font-size:.71rem!important;
line-height:1.25!important;
white-space:nowrap!important;
overflow-wrap:normal!important;
word-break:normal!important;
letter-spacing:-.015em!important;
}
}
/* ============================================================
V55 — About team photo focal-point correction only.
Keep the first two painters lower in frame so their heads have
comfortable space above them on desktop and mobile.
============================================================ */
.about-opening + .trust-strip + .section .team-feature-grid .team-feature:nth-child(1) .worker-pending{
background-position:50% 26%!important;
}
.about-opening + .trust-strip + .section .team-feature-grid .team-feature:nth-child(2) .worker-pending{
background-position:50% 24%!important;
}
@media (max-width:760px){
.about-opening + .trust-strip + .section .team-feature-grid .team-feature:nth-child(1) .worker-pending{
background-position:50% 22%!important;
}
.about-opening + .trust-strip + .section .team-feature-grid .team-feature:nth-child(2) .worker-pending{
background-position:50% 20%!important;
}
}
/* ============================================================
V57 — MOBILE footer email visibility/cache correction only.
- Give Contact column slightly more width.
- Increase email to .71rem while keeping it on one line.
============================================================ */
/* ============================================================
V58 — Our Work mobile slider images fill the full frame.
Removes side gaps caused by portrait/narrow source images.
Commercial page is unchanged.
============================================================ */
@media (max-width:760px){
#projects .ba-project .ba-stage img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center center!important;
background:transparent!important;
}
}
/* ============================================================
V59 — MOBILE footer Contact column correction only.
- Email stays larger and on one line.
- Mon–Sat hours stay on one line without enlarging the schedule text.
============================================================ */
@media (max-width:760px){
.footer-grid .footer-col:nth-of-type(3) a[href^="mailto:"]{
font-size:.72rem!important;
line-height:1.25!important;
white-space:nowrap!important;
overflow-wrap:normal!important;
word-break:normal!important;
letter-spacing:-.015em!important;
}
.footer-grid .footer-col:nth-of-type(3) .footer-contact-line{
font-size:.62rem!important;
line-height:1.3!important;
}
.footer-grid .footer-col:nth-of-type(3) .footer-contact-line > span:first-child{
white-space:nowrap!important;
overflow-wrap:normal!important;
word-break:normal!important;
}
}
/* ============================================================
V60 WORKING — approved final-review refinements.
1) Desktop Our Work project frames fit the source photo ratio so
narrow/square photos do not sit inside oversized side space.
2) Desktop section-to-section spacing uses one consistent rhythm.
3) Mobile Home reviews show two initially with an explicit button.
============================================================ */
/* Desktop only: keep each Our Work photo complete, but make the card/frame
conform to the photo ratio instead of leaving oversized side gutters. */
@media (min-width:961px){
#projects .ba-project{
width:var(--v60-project-width,100%)!important;
justify-self:center!important;
}
#projects .ba-project .ba-stage{
aspect-ratio:var(--v60-project-ratio,4/3)!important;
}
#projects .ba-project .ba-stage img{
object-fit:contain!important;
background:#f3f5f6!important;
}
#compareDialog.compare-dialog{
width:min(var(--v60-dialog-width,740px),calc(100% - 24px))!important;
max-width:none!important;
}
#compareDialog .ba-stage{
aspect-ratio:var(--v60-dialog-ratio,4/3)!important;
}
/* One consistent visual gap between content blocks. The first content
section after the trust bar keeps a full lead-in; adjacent sections
share that same total amount rather than doubling it. */
main > .trust-strip + .section{
padding-top:56px!important;
padding-bottom:32px!important;
}
main > .trust-strip + .section ~ .section{
padding-top:32px!important;
padding-bottom:32px!important;
}
main > .trust-strip + .section:last-of-type,
main > .trust-strip + .section ~ .section:last-of-type{
padding-bottom:56px!important;
}
}
/* Home reviews: no swipe/carrusel. On mobile, show two full reviews and an
obvious View More Reviews button for the remaining four. */
.mobile-reviews-toggle{display:none}
@media (max-width:760px){
.home-page .reviews-grid-modern:not(.reviews-expanded) .review-card:nth-child(n+3){
display:none!important;
}
.home-page .mobile-reviews-toggle{
display:flex!important;
align-items:center;
justify-content:center;
width:100%;
max-width:260px;
min-height:44px;
margin:18px auto 0;
padding:10px 16px;
border:1px solid #9dacb8;
border-radius:7px;
background:#fff;
color:var(--navy);
font-weight:800;
cursor:pointer;
}
}
/* ============================================================
V61 — OUR WORK DESKTOP.
Keep every Our Work project slider at one consistent large size.
Fill the full card frame so the photos do not look smaller than
the surrounding white project card. Mobile stays unchanged.
============================================================ */
@media (min-width:961px){
#projects .ba-project{
width:100%!important;
justify-self:stretch!important;
}
#projects .ba-project .ba-stage{
width:100%!important;
aspect-ratio:4/3!important;
}
#projects .ba-project .ba-stage img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
}
#projects .featured-cta{
white-space:nowrap!important;
flex:0 0 auto!important;
}
#compareDialog.compare-dialog{
width:min(740px,calc(100% - 24px))!important;
max-width:740px!important;
}
#compareDialog .ba-stage{
width:100%!important;
aspect-ratio:4/3!important;
}
#compareDialog .ba-stage img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
}
}
/* V62 About approved client photo */
.about-client-photo{
display:block;
width:100%;
height:300px;
object-fit:cover;
object-position:60% center;
border-radius:14px;
border:1px solid var(--line);
box-shadow:none;
}
@media(max-width:960px){
.about-client-photo{
height:clamp(230px,52vw,340px);
object-position:60% center;
}
}
@media(max-width:620px){
.about-client-photo{
height:clamp(210px,58vw,285px);
border-radius:12px;
object-position:61% center;
}
}
/* ============================================================
V63 — ABOUT hero using the approved existing client photo.
The image file is unchanged; only its page presentation changes.
Desktop: wide hero with left fade/blur and copy over the photo.
Tablet/mobile: match the site's approved responsive hero pattern.
============================================================ */
.about-page .about-hero-image{
padding:34px 0 0;
background:#fff;
}
.about-page .about-hero-image .container{
width:min(1280px,calc(100% - 48px));
}
.about-page .about-hero-panel{
position:relative;
height:420px;
min-height:420px;
border-radius:16px;
overflow:hidden;
box-shadow:var(--shadow);
display:flex;
align-items:center;
background-image:url('../images/about/about-hero-felipe-client.webp');
background-size:cover;
background-repeat:no-repeat;
background-position:right center;
}
.about-page .about-hero-panel::before{
content:'';
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(90deg,rgba(247,250,251,.985) 0%,rgba(247,250,251,.95) 20%,rgba(247,250,251,.80) 30%,rgba(247,250,251,.46) 38%,rgba(247,250,251,.12) 48%,rgba(247,250,251,0) 58%);
}
.about-page .about-hero-copy{
position:relative;
z-index:1;
width:min(45%,560px);
margin-left:42px;
padding:24px 28px 24px 0;
}
.about-page .about-hero-copy::before{
content:'';
position:absolute;
z-index:-1;
inset:-18px -22px -18px -26px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(5px);
-webkit-backdrop-filter:blur(5px);
border-radius:18px;
}
.about-page .about-hero-image .display{
font-size:clamp(1.7rem,2.45vw,2.35rem);
line-height:1.1;
margin:.18em 0 .42em;
}
.about-page .about-hero-copy .lead{
font-size:.94rem;
line-height:1.5;
color:#344d5f;
max-width:58ch;
margin:0;
}
.about-page .about-hero-more{
max-width:940px;
margin:22px auto 0;
padding:0 0 32px;
color:#405667;
}
.about-page .about-hero-more p{
margin:.65em 0;
}
@media(max-width:960px){
.about-page .about-hero-image{
padding:14px 0 0!important;
}
.about-page .about-hero-image .container{
width:min(100% - 24px,1280px)!important;
}
.about-page .about-hero-panel{
height:auto!important;
min-height:0!important;
display:block!important;
background-image:none!important;
background:#fff!important;
border-radius:12px!important;
overflow:hidden!important;
}
.about-page .about-hero-panel::before{
display:none!important;
}
.about-page .about-hero-copy{
width:auto!important;
max-width:none!important;
margin:0!important;
padding:20px 22px 16px!important;
position:relative!important;
}
.about-page .about-hero-copy::before{
display:none!important;
}
.about-page .about-mobile-hero-image{
display:block!important;
width:100%!important;
height:auto!important;
max-height:none!important;
object-fit:contain!important;
object-position:center center!important;
background:#f3f6f8!important;
border-top:1px solid var(--line)!important;
}
.about-page .about-hero-image .display{
font-size:clamp(1.5rem,5.2vw,2.05rem)!important;
line-height:1.08!important;
margin:.1em 0 .42em!important;
}
.about-page .about-hero-copy .eyebrow{
font-size:.68rem!important;
line-height:1.25!important;
letter-spacing:.13em!important;
margin-bottom:8px!important;
}
.about-page .about-hero-copy .lead{
font-size:.88rem!important;
line-height:1.42!important;
max-width:none!important;
margin:0!important;
}
.about-page .about-hero-more{
max-width:none;
margin:16px 8px 0;
padding-bottom:26px;
}
}
@media(max-width:620px){
.about-page .about-hero-more{
margin:14px 4px 0;
padding-bottom:22px;
}
}
/* ============================================================
About + Contact mobile refinements.
- About desktop hero: blur now runs continuously from top to bottom
on the left side and fades smoothly toward the photo.
- Contact mobile: center the final Credit & Debit Cards option.
============================================================ */
@media (min-width:961px){
.about-page .about-hero-copy::before{
display:none!important;
}
.about-page .about-hero-panel::after{
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
width:58%;
z-index:1;
pointer-events:none;
background:rgba(255,255,255,.06);
-webkit-backdrop-filter:blur(5px);
backdrop-filter:blur(5px);
-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 68%,rgba(0,0,0,.72) 82%,transparent 100%);
mask-image:linear-gradient(90deg,#000 0%,#000 68%,rgba(0,0,0,.72) 82%,transparent 100%);
}
.about-page .about-hero-copy{
z-index:2;
}
}
@media (max-width:760px){
.payment-options-section .payment-grid .payment:last-child{
grid-column:1 / -1!important;
width:calc(50% - 4.5px)!important;
justify-self:center!important;
}
}
/* ============================================================
V65 — MATCH ABOUT HERO BLUR FADE ON ALL DESKTOP HEROES.
Home, Services, Commercial, Our Work, Service Areas, Contact.
Uses the same full-height masked backdrop blur as About so the
blur dissolves smoothly into the photo instead of ending abruptly.
About itself is intentionally unchanged.
============================================================ */
@media (min-width:961px){
.home-page .home-hero .hero-copy::before,
.services-hero-copy::before,
.commercial-hero-copy::before,
.our-work-hero-copy::before,
.service-area-hero-panel-exact .services-hero-copy::before,
.contact-hero-copy::before{
display:none!important;
}
.home-page .home-hero-panel::after,
.services-hero-panel::after,
.commercial-hero-panel::after,
.our-work-hero-panel::after,
.service-area-hero-panel-exact::after,
.contact-hero-panel::after{
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
width:58%;
z-index:1;
pointer-events:none;
background:rgba(255,255,255,.06);
-webkit-backdrop-filter:blur(5px);
backdrop-filter:blur(5px);
-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 68%,rgba(0,0,0,.72) 82%,transparent 100%);
mask-image:linear-gradient(90deg,#000 0%,#000 68%,rgba(0,0,0,.72) 82%,transparent 100%);
}
.home-page .home-hero .hero-copy,
.services-hero-copy,
.commercial-hero-copy,
.our-work-hero-copy,
.service-area-hero-panel-exact .services-hero-copy,
.contact-hero-copy{
z-index:2;
}
}
/* V66 — Match About desktop hero height to the other page heroes. */
@media(min-width:961px){
.about-page .about-hero-panel{
height:336px;
min-height:336px;
}
}
/* ============================================================
V67 — FINAL CLEANUP PASS
Clean section alignment, wider About copy, compact mobile footer,
desktop Back to Top polish, Estimate bubble clearance, and compact
review cards. Copy, images, SEO metadata, and approved hero styling
remain unchanged.
============================================================ */
/* Section-heading pattern: centered introduction, content below untouched. */
.section-heading-centered > .container > .eyebrow,
.section-heading-centered > .container > .section-title,
.section-heading-centered > .container > .lead,
.section-heading-centered > .container > .muted{
text-align:center!important;
margin-left:auto!important;
margin-right:auto!important;
}
.section-heading-centered > .container > .lead,
.section-heading-centered > .container > .muted{
max-width:920px!important;
}
.section-heading-centered > .container > .filter-row{
justify-content:center!important;
}
.service-areas-page .section-heading-centered.soft > .container{
text-align:center!important;
}
/* About: use more of the hero/container width so copy reads lighter and cleaner. */
.about-page .about-hero-more{
max-width:none!important;
width:100%!important;
margin:20px 0 0!important;
padding-left:0!important;
padding-right:0!important;
}
.about-page .about-hero-more p{
max-width:none!important;
}
.about-page .about-story{
max-width:1100px!important;
margin-left:auto!important;
margin-right:auto!important;
}
.about-page .about-story > p:last-child{
max-width:1080px!important;
margin-left:auto!important;
margin-right:auto!important;
}
.about-page .warranty-copy-centered > div{
text-align:center!important;
}
/* Reviews: smaller aesthetic cards; source icon + stars, 3 lines, name left/link right. */
.home-page .reviews-section-modern{
padding-top:48px!important;
padding-bottom:48px!important;
}
.home-page .reviews-modern-head{
margin-bottom:22px!important;
}
.home-page .reviews-grid-modern{
gap:16px!important;
}
.home-page .reviews-grid-modern .review-card{
min-height:205px!important;
padding:18px!important;
border-radius:14px!important;
box-shadow:0 6px 18px rgba(14,45,69,.045)!important;
}
.home-page .review-stars-row{
order:1!important;
display:flex!important;
justify-content:flex-start!important;
align-items:center!important;
gap:10px!important;
margin:0 0 12px!important;
}
.home-page .review-source-badge{
order:0!important;
width:32px!important;
height:32px!important;
min-height:0!important;
padding:0!important;
border:0!important;
border-radius:8px!important;
background:transparent!important;
display:grid!important;
place-items:center!important;
flex:0 0 32px!important;
}
.home-page .review-source-icon{
display:block!important;
width:28px!important;
height:28px!important;
object-fit:contain!important;
}
.home-page .review-stars-row .review-stars{
order:1!important;
margin:0!important;
font-size:1rem!important;
letter-spacing:1.5px!important;
line-height:1!important;
}
.home-page .reviews-grid-modern .review-card blockquote{
order:2!important;
flex:0 0 auto!important;
margin:0!important;
font-size:.86rem!important;
line-height:1.5!important;
color:#344d5f!important;
display:-webkit-box!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:3!important;
overflow:hidden!important;
}
.home-page .reviews-grid-modern .review-card-head{
order:3!important;
margin-top:auto!important;
padding-top:14px!important;
border-top:1px solid rgba(68,89,104,.12)!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:14px!important;
}
.home-page .reviews-grid-modern .review-card-head b{
font-size:.86rem!important;
color:var(--navy)!important;
}
.home-page .review-full-link{
margin-left:auto!important;
color:var(--navy)!important;
text-decoration:none!important;
font-size:.78rem!important;
font-weight:800!important;
white-space:nowrap!important;
}
.home-page .review-full-link:hover{text-decoration:underline!important}
/* Desktop: polished floating Back to Top, and lift Estimate bubble above footer copy. */
@media (min-width:961px){
.back-to-top{
position:fixed!important;
left:22px!important;
bottom:24px!important;
z-index:239!important;
width:48px!important;
height:48px!important;
border:0!important;
border-radius:50%!important;
display:grid!important;
place-items:center!important;
background:var(--navy)!important;
color:#fff!important;
font-size:1.45rem!important;
font-weight:900!important;
line-height:1!important;
box-shadow:0 12px 28px rgba(14,45,69,.24)!important;
opacity:0;
visibility:hidden;
transform:translateY(8px);
transition:opacity .18s ease,transform .18s ease,visibility .18s,background .18s ease;
cursor:pointer;
}
.back-to-top:hover{background:var(--navy2)!important;transform:translateY(-2px)!important}
.back-to-top.is-visible{opacity:1!important;visibility:visible!important;transform:translateY(0)!important}
.estimate-bubble{bottom:64px!important}
}
/* Mobile: shorter footer; Quick Links are redundant with the top menu/back-to-top. */
@media (max-width:760px){
.site-footer{
padding-top:24px!important;
padding-bottom:84px!important;
}
.footer-grid{
grid-template-columns:1fr!important;
gap:14px!important;
}
.footer-grid .footer-col:nth-of-type(2){display:none!important}
.footer-col{
padding-top:8px!important;
}
.footer-grid .footer-col:nth-of-type(3){text-align:center!important}
.footer-grid .footer-col:nth-of-type(4){
text-align:center!important;
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
column-gap:12px!important;
row-gap:4px!important;
}
.footer-grid .footer-col:nth-of-type(4) h4{
grid-column:1/-1!important;
margin-bottom:4px!important;
}
.footer-grid .footer-col:nth-of-type(4) a{
margin:2px 0!important;
font-size:.72rem!important;
}
.footer-logo img{width:min(190px,58vw)!important}
.footer-logo .slogan{font-size:.72rem!important;margin-top:5px!important}
.footer-logo .license,.footer-logo .footer-insured{font-size:.72rem!important}
.footer-socials{margin-top:9px!important}
.footer-bottom{
margin-top:12px!important;
padding-top:12px!important;
padding-bottom:0!important;
font-size:.68rem!important;
line-height:1.35!important;
text-align:center!important;
}
.footer-bottom > span:last-child{display:none!important}
.home-page .reviews-grid-modern .review-card{
min-height:190px!important;
padding:16px!important;
}
.home-page .reviews-grid-modern .review-card blockquote{
font-size:.84rem!important;
-webkit-line-clamp:3!important;
}
.home-page .review-full-link{font-size:.74rem!important}
}
/* ============================================================
V68 — alignment refinements requested after V67 review.
- Desktop hero copy starts at one consistent vertical position.
- Home Services and Commercial Projects headings centered.
- About intro uses the full hero width more effectively.
- Desktop floating controls share one baseline.
- Mobile hero copy gutters unified on every page.
- About mobile hero gets the same soft top fade and a tighter crop,
without changing the desktop About image framing.
============================================================ */
/* Desktop: put the floating controls on the same baseline. */
@media (min-width:961px){
.back-to-top{bottom:64px!important}
.estimate-bubble{bottom:64px!important}
/* Every desktop hero begins its copy at the same vertical position. */
.home-page .home-hero-panel,
.about-page .about-hero-panel,
.services-hero-panel,
.commercial-hero-panel,
.our-work-hero-panel,
.service-area-hero-panel-exact,
.contact-hero-panel{
align-items:flex-start!important;
}
.home-page .home-hero .hero-copy,
.about-page .about-hero-copy,
.services-hero-copy,
.commercial-hero-copy,
.our-work-hero-copy,
.service-area-hero-panel-exact .services-hero-copy,
.contact-hero-copy{
margin-top:48px!important;
padding-top:0!important;
}
/* About text below the hero: use the full hero width and lighter line density. */
.about-page .about-hero-more{
width:100%!important;
max-width:100%!important;
margin-left:0!important;
margin-right:0!important;
}
.about-page .about-hero-more p{
width:100%!important;
max-width:100%!important;
font-size:.90rem!important;
line-height:1.46!important;
}
}
/* Home Services: center the section copy while keeping the link available. */
.home-page .home-services-head{
position:relative!important;
justify-content:center!important;
}
.home-page .home-services-head > div{
width:min(900px,100%)!important;
margin:0 auto!important;
text-align:center!important;
}
.home-page .home-services-head > div p{
margin-left:auto!important;
margin-right:auto!important;
}
@media (min-width:761px){
.home-page .home-services-head > .text-link{
position:absolute!important;
right:0!important;
bottom:0!important;
}
}
/* Commercial Projects heading: centered and visually balanced. */
.commercial-page .commercial-gallery-section .section-head{
justify-content:center!important;
text-align:center!important;
}
.commercial-page .commercial-gallery-section .section-head > div{
width:min(900px,100%)!important;
margin:0 auto!important;
}
.commercial-page .commercial-gallery-section .section-head p{
margin-left:auto!important;
margin-right:auto!important;
}
/* Mobile/tablet hero copy: identical left/right gutters on every page. */
@media (max-width:960px){
.home-page .home-hero .hero-copy,
.about-page .about-hero-copy,
.services-hero-copy,
.commercial-hero-copy,
.our-work-hero-copy,
.service-area-hero-panel-exact .services-hero-copy,
.contact-hero-copy{
width:auto!important;
max-width:none!important;
margin:0!important;
padding:20px 22px 16px!important;
}
}
/* Phones: About image only — closer crop, same full-width hero frame,
plus the same subtle soft fade along the top edge of the photo. */
@media (max-width:760px){
.about-page .about-hero-panel{
position:relative!important;
}
.about-page .about-mobile-hero-image{
display:block!important;
width:100%!important;
height:clamp(145px,40vw,170px)!important;
max-height:none!important;
object-fit:cover!important;
object-position:68% center!important;
background:#fff!important;
border-top:1px solid var(--line)!important;
border-radius:0!important;
}
.about-page .about-hero-panel::after{
content:""!important;
display:block!important;
position:absolute!important;
left:0!important;
right:0!important;
bottom:calc(clamp(145px,40vw,170px) - 28px)!important;
height:30px!important;
pointer-events:none!important;
z-index:3!important;
background:linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.12) 48%,rgba(255,255,255,0) 100%)!important;
-webkit-backdrop-filter:blur(2px)!important;
backdrop-filter:blur(2px)!important;
}
.home-page .home-services-head{
align-items:center!important;
text-align:center!important;
}
.home-page .home-services-head > .text-link{
align-self:center!important;
margin-top:8px!important;
}
}
/* ============================================================
V69 — approved Contact refresh + Additional Services copy pass
============================================================ */
.contact-layout-polished{grid-template-columns:minmax(0,1.15fr) minmax(440px,.95fr)!important;gap:20px!important;align-items:stretch!important}
.contact-panel-polished{background:#fff!important;border:1px solid #dbe3e8!important;border-radius:14px!important;box-shadow:0 8px 24px rgba(14,45,69,.05)!important;padding:28px!important}
.contact-panel-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.contact-panel-head .section-title{margin:.05em 0 .25em!important;font-size:clamp(1.65rem,2.5vw,2.15rem)!important}
.contact-panel-head .eyebrow{margin-bottom:4px!important}
.contact-panel-icon,.contact-card-icon,.payment-heading-icon{width:52px;height:52px;flex:0 0 52px;border-radius:50%;display:grid;place-items:center;background:#f2f5f7;color:var(--navy)}
.contact-panel-icon svg,.contact-card-icon svg,.payment-heading-icon svg{width:27px;height:27px}
.contact-side{display:grid;grid-template-rows:auto auto;gap:14px}
.contact-cards-polished{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
.contact-cards-polished .contact-card{min-height:170px!important;padding:20px 16px!important;border:1px solid #dbe3e8!important;border-radius:12px!important;background:#fff!important;box-shadow:0 7px 20px rgba(14,45,69,.045)!important;text-align:center!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important}
.contact-cards-polished .contact-card h3{font-family:var(--serif)!important;color:var(--navy)!important;font-size:1.22rem!important;margin:10px 0 5px!important}
.contact-cards-polished .contact-card p{margin:0!important;color:#526777!important;font-size:.88rem!important;line-height:1.45!important}
.contact-cards-polished .contact-direct-link{font-size:.93rem!important;line-height:1.35!important;word-break:break-word}
.payment-options-polished{background:#fff!important;border:1px solid #dbe3e8!important;border-radius:12px!important;box-shadow:0 7px 20px rgba(14,45,69,.045)!important;padding:18px!important}
.payment-options-polished .payment-options-intro{display:flex!important;gap:12px!important;align-items:center!important;max-width:none!important;margin-bottom:14px!important;text-align:left!important}
.payment-options-polished .payment-options-intro .eyebrow{margin:0 0 2px!important;font-size:.68rem!important}
.payment-options-polished .payment-options-intro .section-title{font-size:1.25rem!important;margin:0 0 2px!important}
.payment-options-polished .payment-options-intro .muted{font-size:.82rem!important;margin:0!important}
.payment-options-polished .payment-heading-icon{width:46px;height:46px;flex-basis:46px}
.payment-options-polished .payment-heading-icon svg{width:24px;height:24px}
.payment-options-polished .payment-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important}
.payment-options-polished .payment-grid .payment{min-height:86px!important;padding:10px 6px!important;border:1px solid #dbe3e8!important;border-radius:9px!important;background:#fff!important;box-shadow:none!important;align-items:center!important;text-align:center!important;gap:5px!important}
.payment-options-polished .payment-grid .payment-icon{width:30px;height:30px;margin:0!important}
.payment-options-polished .payment-grid .payment-icon svg{width:27px;height:27px}
.payment-options-polished .payment-grid .zelle-word{font-size:.72rem!important}
.payment-options-polished .payment-grid .payment b{font-family:var(--sans)!important;font-size:.72rem!important;line-height:1.2!important;color:var(--navy)!important}
.payment-options-polished .payment-note{margin:12px 0 0!important;padding-top:10px!important;border-top:1px solid var(--line)!important;font-size:.72rem!important;color:var(--gray)!important;text-align:left!important}
@media(max-width:1080px){
.contact-layout-polished{grid-template-columns:1fr!important}
.contact-side{max-width:none!important}
}
@media(max-width:760px){
.contact-panel-polished{padding:22px 18px!important}
.contact-panel-head{gap:11px!important}
.contact-panel-icon{width:44px;height:44px;flex-basis:44px}
.contact-panel-icon svg{width:23px;height:23px}
.contact-cards-polished{grid-template-columns:1fr!important}
.contact-cards-polished .contact-card{min-height:132px!important}
.payment-options-polished{padding:16px!important}
.payment-options-polished .payment-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.payment-options-polished .payment-grid .payment:last-child{grid-column:1/-1!important;justify-self:center!important;width:min(240px,100%)!important}
}
/* ============================================================
V71 — footer only: reduce desktop footer visual size by ~30%.
No other layout/content changes.
============================================================ */
@media (min-width:761px){
.site-footer{
padding-top:36px!important;
padding-bottom:15px!important;
}
.footer-grid{
gap:34px!important;
}
.footer-logo img{
width:186px!important;
max-width:186px!important;
}
.footer-logo .slogan,
.footer-logo .license,
.footer-logo .footer-insured,
.footer-socials{
max-width:186px!important;
}
.footer-logo .slogan{
font-size:.72rem!important;
margin-top:6px!important;
margin-bottom:2px!important;
}
.footer-logo .license,
.footer-logo .footer-insured{
font-size:.72rem!important;
}
.footer-socials{
gap:7px!important;
margin-top:10px!important;
}
.footer-socials a{
width:28px!important;
height:28px!important;
}
.footer-socials img{
width:27px!important;
height:27px!important;
}
.footer-col h4{
font-size:.88rem!important;
margin-bottom:8px!important;
}
.footer-col a,
.footer-contact-line{
font-size:.78rem!important;
margin:4px 0!important;
line-height:1.3!important;
}
.footer-bottom{
margin-top:22px!important;
padding-top:13px!important;
font-size:.70rem!important;
}
}
/* ============================================================
V73 — MOBILE FOOTER ONLY
Compact the mobile footer without changing desktop or page content.
============================================================ */
@media (max-width:760px){
.site-footer{
padding-top:14px!important;
padding-bottom:72px!important;
}
.footer-grid{
grid-template-columns:1fr!important;
gap:7px!important;
}
.footer-logo{
padding-top:0!important;
margin:0!important;
}
.footer-logo img{
width:min(128px,38vw)!important;
max-width:128px!important;
margin:0 auto!important;
}
.footer-logo .slogan{
max-width:220px!important;
font-size:.64rem!important;
line-height:1.25!important;
margin:3px auto 2px!important;
}
.footer-logo .license,
.footer-logo .footer-insured{
max-width:none!important;
font-size:.64rem!important;
line-height:1.2!important;
margin:1px auto!important;
}
.footer-socials{
max-width:none!important;
gap:8px!important;
margin:7px auto 5px!important;
}
.footer-socials a{
width:30px!important;
height:30px!important;
}
.footer-socials img{
width:29px!important;
height:29px!important;
}
.footer-col{
padding-top:5px!important;
}
.footer-col h4{
font-size:.92rem!important;
margin:0 0 5px!important;
line-height:1.15!important;
}
.footer-grid .footer-col:nth-of-type(3) a,
.footer-grid .footer-col:nth-of-type(3) .footer-contact-line{
font-size:.72rem!important;
line-height:1.28!important;
margin:2px 0!important;
}
.footer-grid .footer-col:nth-of-type(3) .footer-contact-line > span{
display:block!important;
margin:1px 0!important;
}
.footer-grid .footer-col:nth-of-type(4){
column-gap:8px!important;
row-gap:1px!important;
padding-top:6px!important;
margin-top:2px!important;
}
.footer-grid .footer-col:nth-of-type(4) h4{
margin-bottom:3px!important;
}
.footer-grid .footer-col:nth-of-type(4) a{
font-size:.68rem!important;
line-height:1.2!important;
margin:1px 0!important;
}
.footer-bottom{
margin-top:7px!important;
padding-top:8px!important;
padding-bottom:0!important;
font-size:.62rem!important;
line-height:1.25!important;
}
.footer-bottom>*+*{margin-top:0!important}
}
/* ============================================================
V74 — FINAL ACCESSIBILITY / MOBILE READABILITY PASS
Based on V73. Only:
- ~20% larger mobile typography site-wide
- larger mobile menu trigger
- permanent floating call button above Free Estimate
- mobile Contact estimate header: remove icon + center copy
============================================================ */
/* Permanent call action — all breakpoints. */
.call-bubble{
position:fixed;
right:24px;
bottom:126px;
z-index:241;
width:50px;
height:50px;
border-radius:50%;
display:grid;
place-items:center;
background:var(--navy);
color:#fff;
text-decoration:none;
box-shadow:0 12px 28px rgba(14,45,69,.24);
transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.call-bubble:hover{background:var(--navy2);transform:translateY(-2px);box-shadow:0 15px 32px rgba(14,45,69,.30)}
.call-bubble svg{width:24px;height:24px;display:block}
.call-bubble:focus-visible{outline:3px solid rgba(22,93,139,.35);outline-offset:3px}
@media (max-width:760px){
/* Increase mobile type globally by about 20% while preserving V73 layout rules. */
html{font-size:19.2px!important}
/* Make the hamburger noticeably larger and easier to tap. */
.mobile-toggle{
font-size:2.25rem!important;
line-height:1!important;
padding:10px!important;
min-width:48px!important;
min-height:48px!important;
}
/* Keep floating Call directly above Free Estimate. */
.call-bubble{
right:14px!important;
bottom:128px!important;
width:50px!important;
height:50px!important;
}
.call-bubble svg{width:24px!important;height:24px!important}
/* Contact page mobile: remove the decorative form icon and center heading copy. */
.contact-page .contact-panel-head,
body:has(.contact-layout-polished) .contact-panel-head{
display:block!important;
text-align:center!important;
}
.contact-page .contact-panel-icon,
body:has(.contact-layout-polished) .contact-panel-icon{
display:none!important;
}
.contact-page .contact-panel-head > div,
body:has(.contact-layout-polished) .contact-panel-head > div{
width:100%!important;
max-width:none!important;
margin:0 auto!important;
text-align:center!important;
}
.contact-page .contact-panel-head .eyebrow,
.contact-page .contact-panel-head .section-title,
.contact-page .contact-panel-head .muted,
body:has(.contact-layout-polished) .contact-panel-head .eyebrow,
body:has(.contact-layout-polished) .contact-panel-head .section-title,
body:has(.contact-layout-polished) .contact-panel-head .muted{
text-align:center!important;
margin-left:auto!important;
margin-right:auto!important;
}
}
/* ============================================================
V75 — mobile header micro-adjustment only.
- Center slogan precisely under logo.
- Raise hamburger away from slogan.
============================================================ */
@media (max-width:760px){
.brand .header-slogan{
width:max-content!important;
max-width:calc(100vw - 32px)!important;
margin:3px auto 0!important;
text-align:center!important;
align-self:center!important;
}
.mobile-toggle{
position:absolute!important;
right:14px!important;
top:18px!important;
margin:0!important;
transform:none!important;
}
}
/* ============================================================
V76 — mobile header alignment + floating-action spacing only.
- Center logo + slogan as one group in the viewport.
- Move hamburger higher to the upper-right corner.
- Bring Call bubble closer to Free Estimate on mobile.
Desktop behavior remains unchanged.
============================================================ */
@media (max-width:760px){
.header-inner{
position:relative!important;
height:116px!important;
padding-left:0!important;
padding-right:0!important;
justify-content:center!important;
align-items:flex-start!important;
}
.brand{
position:absolute!important;
left:0!important;
right:0!important;
top:10px!important;
width:100%!important;
max-width:none!important;
margin:0!important;
transform:none!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:flex-start!important;
text-align:center!important;
}
.brand img{
display:block!important;
width:198px!important;
max-width:calc(100vw - 112px)!important;
max-height:66px!important;
margin:0 auto!important;
}
.brand .header-slogan{
display:block!important;
width:auto!important;
max-width:calc(100vw - 36px)!important;
margin:3px auto 0!important;
text-align:center!important;
align-self:center!important;
white-space:nowrap!important;
}
.mobile-toggle{
position:absolute!important;
right:10px!important;
top:7px!important;
margin:0!important;
transform:none!important;
z-index:4!important;
}
.call-bubble{
right:14px!important;
bottom:74px!important;
}
}