/* Google Fonts moved to tags in HTML for performance */
:root{
--bg:#0b1612;
--bg-soft:#13221c;
--panel:#14241d;
--panel-2:#1a2d25;
--text:#eef3ef;
--muted:#b8c3bd;
--gold:#c7a45a;
--gold-2:#e1c179;
--line:rgba(255,255,255,0.08);
--white:#ffffff;
--dark:#09110d;
--light:#f5f3ee;
--shadow:0 12px 40px rgba(0,0,0,0.07);
--radius:22px;
--max:1200px;
}
.skip-to-content{
position:absolute;
left:-9999px;
top:0;
z-index:9999;
padding:12px 20px;
background:var(--gold);
color:#111;
font-weight:800;
border-radius:0 0 8px 0;
}
.skip-to-content:focus{
left:0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{
scroll-behavior:smooth;
scroll-padding-top:90px;
-webkit-text-size-adjust:100%;
}
body{
font-family:'Source Sans 3', Arial, Helvetica, sans-serif;
background:var(--light);
color:#1f2723;
line-height:1.65;
overflow-x:hidden;
}
body.scroll-locked{
position:fixed;
left:0;
right:0;
width:100%;
overflow:hidden;
}
h1, h2, h3, h4{
font-family:'Playfair Display', Georgia, serif;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,
a,
.gallery-grid img{
touch-action:manipulation;
-webkit-tap-highlight-color:rgba(0,0,0,0.08);
}
:focus-visible{
outline:2px solid var(--gold);
outline-offset:2px;
}
ul{padding-left:18px}
.container{
width:min(var(--max), calc(100% - 32px));
margin:0 auto;
}
.topbar{
background:#06100c;
color:#dce4de;
font-size:.95rem;
}
.topbar-inner{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
padding:10px 0;
}
.topbar a{
color:var(--gold-2);
font-weight:700;
}
.site-header{
position:sticky;
top:0;
z-index:1000;
background:rgba(10,18,14,.92);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-wrap{
display:flex;
align-items:center;
justify-content:space-between;
min-height:82px;
gap:20px;
}
.brand{
display:flex;
align-items:center;
flex-shrink:0;
}
.site-logo{
height:64px;
width:auto;
display:block;
}
.nav-list{
list-style:none;
display:flex;
align-items:center;
gap:18px;
padding-left:0;
}
.nav-list a{
color:#f0f4f1;
font-weight:600;
transition:.25s ease;
padding:8px 2px;
border-bottom:2px solid transparent;
}
.nav-list a.active{
color:var(--gold-2);
}
.nav-list a.active{
border-bottom:2px solid var(--gold-2);
}
.nav-list .nav-cta{
border-bottom:none;
}
.nav-list .nav-cta.active{
color:#111;
background:linear-gradient(135deg, var(--gold), var(--gold-2));
border-color:transparent;
box-shadow:0 12px 24px rgba(199,164,90,.25);
}
.menu-toggle{
display:none;
background:none;
border:none;
color:#fff;
font-size:1.8rem;
cursor:pointer;
min-width:44px;
min-height:44px;
padding:6px;
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:14px 22px;
border-radius:999px;
font-weight:800;
transition:.25s ease;
border:1px solid transparent;
}
.btn-gold{
background:linear-gradient(135deg, var(--gold), var(--gold-2));
color:#111;
box-shadow:0 12px 24px rgba(199,164,90,.25);
}
.btn-outline{
border-color:rgba(255,255,255,.18);
color:#fff;
}
.btn-outline-light{
border:1px solid rgba(255,255,255,.35);
color:#fff;
}
.btn-outline-dark{
border:1px solid rgba(0,0,0,.20);
color:#1f2723;
}
.btn-dark{
background:#102018;
color:#fff;
}
.full{
width:100%;
}
.hero, .page-hero{
position:relative;
overflow:hidden;
color:#fff;
}
.hero{
min-height:70vh;
display:flex;
align-items:center;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.hero-overlay{
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(0deg, rgba(4,10,8,.62), rgba(4,10,8,.36)),
radial-gradient(circle at 20% 20%, rgba(255,255,255,.06), transparent 25%);
}
.hero-content, .page-hero .container{
position:relative;
z-index:2;
padding:72px 0;
}
.compact-hero .container{
padding:64px 0 54px;
}
.hero-bg{
position:absolute;
inset:0;
z-index:0;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
opacity:0;
transition:opacity 1.5s ease;
}
.hero-bg.active{
opacity:1;
}
.hero-slide-2{
background-image:
linear-gradient(135deg, rgba(7,18,14,.60), rgba(18,54,40,.48)),
url("images/striped-lawn-mowing-service-4.webp");
}
.services-hero-image{
background:
linear-gradient(135deg, rgba(8,20,16,.70), rgba(13,42,31,.55)),
url("images/coastal-landscape-design-plymouth-ma-1.webp") center/cover no-repeat;
}
.gallery-hero-image{
background:
linear-gradient(135deg, rgba(8,20,16,.70), rgba(13,42,31,.55)),
url("images/retaining-wall-installation-plymouth-ma-1.webp") center/cover no-repeat;
}
.eyebrow,
.section-tag{
display:inline-block;
color:var(--gold-2);
font-weight:800;
text-transform:uppercase;
letter-spacing:.12em;
font-size:.82rem;
margin-bottom:12px;
}
.hero h1,
.page-hero h1{
font-size:clamp(2.3rem, 5vw, 4.8rem);
line-height:1.05;
max-width:900px;
margin-bottom:18px;
}
.hero-lead{
max-width:820px;
font-size:1.08rem;
color:#e8efea;
}
.hero-lead.narrow{
max-width:760px;
}
.hero-actions{
display:flex;
gap:14px;
flex-wrap:wrap;
margin-top:28px;
}
.hero-badges{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:26px;
}
.hero-badges span,
.service-areas span{
padding:10px 15px;
border-radius:999px;
border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.08);
color:#fff;
font-weight:700;
font-size:.95rem;
}
.section{
padding:84px 0;
}
.section-dark{
background:linear-gradient(180deg, #0d1914, #13211b);
color:#fff;
}
.section-muted{
background:#ece8de;
}
.section-head{
max-width:860px;
margin:0 auto 34px;
text-align:center;
}
.section-head h2{
font-size:clamp(1.9rem, 3.4vw, 3rem);
line-height:1.12;
margin-bottom:12px;
}
.section-head p{
color:inherit;
opacity:.9;
}
.intro-grid,
.split-grid{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:28px;
align-items:start;
}
.stats-card,
.process-card,
.estimator-card,
.contact-card,
.feature-card,
.blog-card,
.service-row,
.map-card{
background:#fff;
border-radius:var(--radius);
box-shadow:var(--shadow);
}
.section-dark .stats-card,
.section-dark .feature-card,
.section-dark .estimator-card{
background:rgba(255,255,255,.06);
color:#fff;
border:1px solid rgba(255,255,255,.08);
box-shadow:none;
}
.stats-card,
.process-card,
.map-card{
padding:28px;
}
.stats-card h3,
.process-card h3,
.map-card h3{
margin-bottom:16px;
font-size:1.45rem;
}
.check-list{
list-style:none;
padding-left:0;
}
.check-list li{
padding-left:28px;
position:relative;
margin:12px 0;
}
.check-list li::before{
content:"✓";
position:absolute;
left:0;
top:0;
color:var(--gold);
font-weight:900;
}
.card-grid{
display:grid;
gap:22px;
}
.card-grid.three{
grid-template-columns:repeat(3, 1fr);
}
.feature-card{
padding:26px;
}
.feature-card h3{
font-size:1.3rem;
margin-bottom:10px;
}
.icon-badge{
width:54px;
height:54px;
border-radius:16px;
background:linear-gradient(135deg, rgba(199,164,90,.25), rgba(255,255,255,.08));
display:grid;
place-items:center;
font-size:1.2rem;
margin-bottom:16px;
color:var(--gold-2);
}
.image-feature{
overflow:hidden;
padding:0;
}
.image-feature img{
width:100%;
height:220px;
object-fit:cover;
}
.feature-card-body{
padding:24px;
}
.luxury-panel{
background:linear-gradient(180deg, #f3eee3, #ffffff);
border-radius:var(--radius);
padding:34px;
box-shadow:var(--shadow);
}
.process-step{
display:flex;
gap:16px;
margin:18px 0;
align-items:flex-start;
}
.process-step span{
width:38px;
height:38px;
min-width:38px;
border-radius:50%;
background:linear-gradient(135deg, var(--gold), var(--gold-2));
color:#111;
display:grid;
place-items:center;
font-weight:900;
}
.gallery-preview{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:18px;
}
.gallery-tile,
.gallery-card{
min-height:260px;
border-radius:26px;
position:relative;
overflow:hidden;
color:#fff;
box-shadow:var(--shadow);
}
.photo-tile{
display:block;
min-height:300px;
}
.photo-tile img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
.photo-tile::before,
.gallery-card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.60));
z-index:1;
}
.gallery-tile > div,
.gallery-copy{
position:absolute;
left:20px;
right:20px;
bottom:18px;
z-index:2;
}
.tile-one{background:linear-gradient(135deg, #244638, #0f1d17)}
.tile-two{background:linear-gradient(135deg, #816536, #21190f)}
.tile-three{background:linear-gradient(135deg, #40614f, #12231c)}
.tile-four{background:linear-gradient(135deg, #4b4d39, #161710)}
.centered{
text-align:center;
margin-top:26px;
}
.service-areas{
display:flex;
flex-wrap:wrap;
gap:12px;
justify-content:center;
}
.service-areas span{
color:#111;
background:#fff;
border:1px solid #ddd3bf;
}
.seo-copy{
max-width:860px;
margin:26px auto 0;
text-align:center;
}
.cta-band{
background:linear-gradient(135deg, #0d1914, #1a2e25);
color:#fff;
}
.cta-band-inner{
display:flex;
justify-content:space-between;
gap:24px;
align-items:center;
}
.cta-band-actions{
display:flex;
gap:14px;
flex-wrap:wrap;
}
.site-footer{
background:#07100c;
color:#dfe7e2;
padding-top:44px;
}
.footer-grid{
display:grid;
grid-template-columns:1.2fr .8fr .8fr;
gap:24px;
padding-bottom:28px;
}
.footer-grid h3,
.footer-grid h4{
margin-bottom:10px;
}
.footer-grid ul{
list-style:none;
padding-left:0;
}
.footer-grid li{
margin:8px 0;
}
.footer-grid a{
transition:color .2s ease;
}
.footer-bottom{
border-top:1px solid rgba(255,255,255,.08);
padding:18px 0 24px;
text-align:center;
color:#b7c2bc;
}
.services-stack{
display:grid;
gap:18px;
}
.service-row{
padding:26px;
display:grid;
grid-template-columns:1.25fr .75fr;
gap:20px;
}
.service-row h3{
font-size:1.45rem;
margin-bottom:8px;
}
.service-row ul li{
margin:8px 0;
}
.service-row-image{
grid-template-columns:min(360px, 38%) 1fr;
align-items:start;
overflow:hidden;
}
.service-row-photo img{
width:100%;
height:100%;
min-height:250px;
object-fit:cover;
border-radius:18px;
}
.service-row-content ul{
margin-top:14px;
}
.estimator-card,
.contact-card{
padding:24px;
margin-top:18px;
}
.estimator-card label,
.contact-card label{
display:block;
font-weight:700;
margin:12px 0 7px;
}
.estimator-card input,
.estimator-card select,
.contact-card input,
.contact-card select,
.contact-card textarea{
width:100%;
padding:14px 15px;
border-radius:14px;
border:1px solid #d8ddd8;
font:inherit;
background:#fff;
color:#222;
}
.section-dark .estimator-card input,
.section-dark .estimator-card select{
border-color:rgba(255,255,255,.14);
background:rgba(255,255,255,.08);
color:#fff;
}
.estimate-result{
margin-top:18px;
padding:16px 18px;
border-radius:16px;
background:#fff5de;
color:#2c2415;
font-weight:700;
}
.section-dark .estimate-result{
background:rgba(199,164,90,.15);
color:#fff3d7;
}
.faq-wrap{
max-width:900px;
margin:0 auto;
}
.faq-item{
background:#fff;
border-radius:18px;
box-shadow:var(--shadow);
margin-bottom:16px;
overflow:hidden;
}
.breadcrumb-nav{
padding:10px 0;
font-size:.88rem;
color:#8a948e;
}
.breadcrumb-nav a{
color:#5a6660;
transition:color .2s ease;
}
.breadcrumb-nav .bc-sep{
margin:0 8px;
color:#c0c8c3;
}
.breadcrumb-nav .bc-current{
color:#1f2723;
font-weight:600;
}
.faq-question{
width:100%;
border:none;
background:#fff;
padding:20px 22px;
text-align:left;
font:inherit;
font-weight:800;
color:#1f2723;
cursor:pointer;
}
.faq-answer{
display:none;
padding:0 22px 20px;
}
.blog-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:22px;
}
.blog-card{
overflow:hidden;
padding:0;
}
.blog-card img{
width:100%;
height:240px;
object-fit:cover;
display:block;
}
.blog-card-content{
padding:22px;
}
.blog-card h3{
margin-bottom:10px;
}
.masonry-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:18px;
}
.gallery-card.tall{
min-height:420px;
}
.gallery-card.wide{
grid-column:span 2;
}
.gallery-card{
min-height:260px;
}
.photo-gallery-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:22px;
}
.photo-gallery-item{
background:#fff;
border-radius:22px;
overflow:hidden;
box-shadow:var(--shadow);
}
.photo-gallery-item img{
width:100%;
height:280px;
object-fit:cover;
}
.photo-gallery-item figcaption{
padding:16px 18px 18px;
font-weight:700;
color:#23302a;
}
.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
}
.floating-call{
position:fixed;
right:18px;
bottom:18px;
z-index:1200;
background:linear-gradient(135deg, var(--gold), var(--gold-2));
color:#111;
font-weight:800;
padding:14px 18px;
border-radius:999px;
box-shadow:0 14px 30px rgba(0,0,0,.25);
}
.estimator-hero-image{
background:
linear-gradient(135deg, rgba(8,20,16,.72), rgba(13,42,31,.55)),
url("images/mulch-bed-installation-2.webp") center/cover no-repeat;
}
.about-hero-image{
background:
linear-gradient(135deg, rgba(8,20,16,.72), rgba(13,42,31,.55)),
url("images/coastal-landscape-design-plymouth-ma-1.webp") center/cover no-repeat;
}
.faq-hero-image{
background:
linear-gradient(135deg, rgba(8,20,16,.72), rgba(13,42,31,.55)),
url("images/hedge-trimming-service-3.webp") center/cover no-repeat;
}
.blog-hero-image{
background:
linear-gradient(135deg, rgba(8,20,16,.72), rgba(13,42,31,.55)),
url("images/striped-lawn-mowing-service-4.webp") center/cover no-repeat;
}
.contact-hero-image{
background:
linear-gradient(135deg, rgba(8,20,16,.72), rgba(13,42,31,.55)),
url("images/mulch-bed-installation-1.webp") center/cover no-repeat;
}
.estimator-form-card{
margin-top:22px;
}
.wizard-progress{
display:flex;
align-items:center;
justify-content:center;
margin-bottom:30px;
gap:0;
}
.wizard-dot{
width:36px;
height:36px;
border-radius:50%;
background:#e8e4db;
color:#8a8579;
display:grid;
place-items:center;
font-weight:800;
font-size:.9rem;
flex-shrink:0;
transition:background .3s ease, color .3s ease;
}
.wizard-dot.active{
background:linear-gradient(135deg, var(--gold), var(--gold-2));
color:#111;
}
.wizard-dot.done{
background:#1a3028;
color:#fff;
}
.wizard-line{
height:3px;
flex:1;
max-width:56px;
background:#e8e4db;
border-radius:2px;
overflow:hidden;
}
.wizard-line-fill{
width:0;
height:100%;
background:var(--gold);
border-radius:2px;
transition:width .35s ease;
}
.wizard-line-fill.done{
width:100%;
}
.wizard-panel{
display:none;
}
.wizard-panel.active{
display:block;
animation:wizardFadeIn .3s ease;
}
@keyframes wizardFadeIn{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:translateY(0)}
}
.wizard-question{
font-family:'Playfair Display', Georgia, serif;
font-size:1.3rem;
font-weight:700;
margin-bottom:18px;
text-align:center;
}
.option-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:12px;
}
.option-grid.two-col{
grid-template-columns:repeat(2, 1fr);
}
.option-card{
background:#fff;
border:2px solid #e4e0d6;
border-radius:16px;
padding:18px 14px;
cursor:pointer;
text-align:center;
font:inherit;
transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.option-card.selected{
border-color:var(--gold);
background:#fffbf0;
box-shadow:0 0 0 1px var(--gold);
}
.option-card strong{
display:block;
font-size:1.05rem;
margin-bottom:5px;
color:#1f2723;
}
.option-card span{
display:block;
font-size:.86rem;
color:#6b7a73;
line-height:1.4;
}
.condition-group{
margin-bottom:18px;
}
.condition-label{
font-weight:700;
margin-bottom:10px;
}
.condition-options{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:10px;
}
.condition-btn{
background:#fff;
border:2px solid #e4e0d6;
border-radius:12px;
padding:14px 10px;
cursor:pointer;
font:inherit;
font-size:.9rem;
text-align:center;
transition:border-color .2s ease, background .2s ease;
color:#1f2723;
}
.condition-btn.selected{
border-color:var(--gold);
background:#fffbf0;
}
.wizard-nav{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:22px;
gap:14px;
}
.wizard-back{
background:none;
border:none;
color:#6b7a73;
font:inherit;
font-weight:600;
cursor:pointer;
padding:10px 12px;
min-height:44px;
box-sizing:border-box;
transition:color .2s;
}
.estimate-result-box{
text-align:center;
padding:28px 20px;
background:#fff5de;
border-radius:18px;
margin-bottom:18px;
}
.estimate-service-label{
font-weight:800;
text-transform:uppercase;
letter-spacing:.1em;
font-size:.82rem;
color:#9a7d3a;
margin-bottom:8px;
}
.estimate-price-display{
font-family:'Playfair Display', Georgia, serif;
font-size:clamp(1.8rem, 4vw, 2.5rem);
font-weight:900;
color:#1f2723;
margin-bottom:10px;
}
.estimate-note-text{
font-size:.9rem;
color:#5a6660;
max-width:500px;
margin:0 auto;
line-height:1.5;
}
.btn-disabled{
opacity:.45;
cursor:not-allowed;
pointer-events:none;
}
.lead-capture-section{
margin-top:24px;
padding:24px;
background:#f9f7f2;
border-radius:18px;
border:1px solid #e8e4db;
}
.lead-capture-heading{
font-family:'Playfair Display', Georgia, serif;
font-size:1.2rem;
font-weight:700;
text-align:center;
margin-bottom:4px;
}
.lead-capture-subtext{
text-align:center;
color:#6b7a73;
font-size:.92rem;
margin-bottom:18px;
}
.lead-fields{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:12px;
margin-bottom:16px;
}
.lead-capture-alt{
text-align:center;
font-size:.88rem;
color:#8a8579;
margin-top:14px;
}
.lead-capture-alt a{
color:var(--gold);
font-weight:700;
text-decoration:underline;
}
.trust-bar{
background:#102018;
padding:14px 0;
}
.trust-items{
display:flex;
justify-content:center;
gap:28px;
flex-wrap:wrap;
}
.trust-item{
color:#e8efea;
font-size:.92rem;
}
.trust-item strong{
color:var(--gold-2);
}
.estimate-result-box.reveal .estimate-service-label{
animation:resultFadeUp .35s ease both;
}
.estimate-result-box.reveal .estimate-price-display{
animation:resultFadeUp .4s ease .1s both;
}
.estimate-result-box.reveal .estimate-note-text{
animation:resultFadeUp .4s ease .2s both;
}
@keyframes resultFadeUp{
from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}
.faq-wrap-full{
max-width:none;
}
.faq-item{
border:1px solid rgba(0,0,0,.05);
}
.breadcrumb-nav{
padding:10px 0;
font-size:.88rem;
color:#8a948e;
}
.breadcrumb-nav a{
color:#5a6660;
transition:color .2s ease;
}
.breadcrumb-nav .bc-sep{
margin:0 8px;
color:#c0c8c3;
}
.breadcrumb-nav .bc-current{
color:#1f2723;
font-weight:600;
}
.faq-question{
font-size:1.05rem;
}
.faq-answer p{
color:#2b342f;
}
.matched-blog-grid .blog-card{
background:#fff;
border-radius:22px;
overflow:hidden;
box-shadow:var(--shadow);
}
.matched-blog-grid .blog-card img{
width:100%;
height:240px;
object-fit:cover;
}
.matched-blog-grid .blog-card-content{
padding:22px;
}
.matched-blog-grid .blog-card-content h3{
font-size:1.35rem;
margin-bottom:10px;
line-height:1.2;
}
.matched-blog-grid .blog-card-content p:last-child{
margin-bottom:0;
}
.hero-logo-wrap{
margin-bottom:24px;
}
.hero-logo{
width:min(340px, 58vw);
height:auto;
display:block;
background:none;
padding:0;
border-radius:0;
box-shadow:none;
filter:drop-shadow(0 10px 24px rgba(0,0,0,.30));
}
.gallery-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:22px;
}
.gallery-grid img{
width:100%;
height:280px;
object-fit:cover;
border-radius:22px;
box-shadow:var(--shadow);
cursor:pointer;
user-select:none;
-webkit-user-select:none;
transition:transform .25s ease, box-shadow .25s ease;
}
.gallery-load-more{
display:none;
margin:22px auto 0;
cursor:pointer;
}
.lightbox{
position:fixed;
inset:0;
background:rgba(0,0,0,0.88);
display:none;
align-items:center;
justify-content:center;
padding:30px;
z-index:3000;
}
.lightbox.open{
display:flex;
}
.lightbox-img{
max-width:92vw;
max-height:88vh;
border-radius:16px;
box-shadow:0 20px 60px rgba(0,0,0,0.45);
}
.lightbox-close{
position:absolute;
top:18px;
right:22px;
background:rgba(255,255,255,0.1);
color:#fff;
border:1px solid rgba(255,255,255,0.2);
width:48px;
height:48px;
border-radius:50%;
font-size:2rem;
line-height:1;
cursor:pointer;
}
.lightbox-prev,
.lightbox-next{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(255,255,255,0.1);
color:#fff;
border:1px solid rgba(255,255,255,0.2);
width:48px;
height:48px;
border-radius:50%;
font-size:2.2rem;
line-height:1;
cursor:pointer;
z-index:3001;
display:flex;
align-items:center;
justify-content:center;
}
.lightbox-prev{ left:18px; }
.lightbox-next{ right:18px; }
.contact-form-modern{
margin-top:22px;
}
.service-areas-left{
justify-content:flex-start;
}
.hidden-field{
position:absolute;
left:-9999px;
opacity:0;
pointer-events:none;
}
.home-trust-bar{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:22px;
}
.trust-card{
background:#fff;
border-radius:var(--radius);
padding:28px 22px;
text-align:center;
box-shadow:var(--shadow);
transition:transform .25s ease, box-shadow .25s ease;
}
.trust-card-icon{
width:56px;
height:56px;
border-radius:16px;
background:linear-gradient(135deg, rgba(199,164,90,.18), rgba(199,164,90,.08));
display:inline-flex;
align-items:center;
justify-content:center;
color:var(--gold);
margin:0 auto 14px;
}
.trust-card strong{
display:block;
font-size:1.1rem;
font-family:'Playfair Display', Georgia, serif;
color:#1f2723;
margin-bottom:6px;
}
.trust-card p{
font-size:.92rem;
color:#5a6660;
line-height:1.45;
margin:0;
}
/* ===============================
NEW SEO SERVICE PAGE ADD-ONS
================================ */
.service-link-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:22px;
margin-top:18px;
}
.service-link-card{
display:block;
background:#fff;
border-radius:22px;
padding:26px;
box-shadow:var(--shadow);
transition:transform .25s ease, box-shadow .25s ease;
}
.service-link-card h3{
font-size:1.3rem;
margin-bottom:10px;
color:#1f2723;
}
.service-link-card p{
color:#38443e;
margin-bottom:0;
}
.section-dark .service-link-card{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
box-shadow:none;
}
.section-dark .service-link-card h3,
.section-dark .service-link-card p{
color:#fff;
}
.map-embed{
margin-top:24px;
border-radius:18px;
overflow:hidden;
box-shadow:var(--shadow);
}
.map-embed iframe{
display:block;
width:100%;
border:0;
}
/* ===============================
APPROVED BRAND TEXT + LARGER HERO LOGO
================================ */
.brand-text{
display:flex;
align-items:center;
color:#ffffff;
font-size:1.7rem;
font-weight:800;
letter-spacing:.02em;
white-space:nowrap;
}
.hero-logo-large{
width:min(520px,82vw) !important;
max-width:82vw;
filter:drop-shadow(0 14px 34px rgba(0,0,0,.36));
}
@media (max-width:1050px){
.card-grid.three,
.blog-grid,
.photo-gallery-grid{
grid-template-columns:repeat(2, 1fr);
}
.gallery-preview{
grid-template-columns:repeat(2, 1fr);
}
.gallery-grid{
grid-template-columns:repeat(2, 1fr);
}
.service-link-grid{
grid-template-columns:repeat(2, 1fr);
}
.home-trust-bar{
grid-template-columns:repeat(2, 1fr);
}
.option-grid{
grid-template-columns:repeat(2, 1fr);
}
}
@media (max-width:860px){
html{
scroll-padding-top:82px;
}
.menu-toggle{
display:block;
margin-left:auto;
}
nav{
position:relative;
flex:0 0 0;
width:0;
min-width:0;
overflow:visible;
}
.site-logo{
height:56px;
}
.nav-wrap{
min-height:76px;
justify-content:flex-start;
}
.nav-list{
position:absolute;
top:100%;
right:0;
min-width:260px;
background:#0d1914;
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
box-shadow:var(--shadow);
padding:16px;
display:none;
flex-direction:column;
align-items:flex-start;
}
.nav-list.open{
display:flex;
max-height:calc(100vh - 76px);
overflow-y:auto;
}
.intro-grid,
.split-grid,
.footer-grid,
.contact-grid,
.service-row,
.cta-band-inner,
.topbar-inner{
grid-template-columns:1fr;
flex-direction:column;
align-items:flex-start;
}
.card-grid.three,
.blog-grid,
.masonry-grid,
.photo-gallery-grid,
.gallery-preview,
.service-link-grid{
grid-template-columns:1fr;
}
.option-grid{
grid-template-columns:1fr 1fr;
}
.condition-options{
grid-template-columns:1fr;
}
.wizard-line{
max-width:36px;
}
.wizard-question{
font-size:1.15rem;
}
.lead-fields{
grid-template-columns:1fr;
}
.option-card{
min-height:48px;
padding:16px 12px;
}
.condition-btn{
min-height:48px;
padding:14px 12px;
}
.trust-items{
gap:12px;
justify-content:center;
}
.trust-item{
font-size:.84rem;
}
.lead-capture-section{
padding:18px 14px;
}
.gallery-grid{
grid-template-columns:repeat(2, 1fr);
gap:12px;
}
.gallery-grid.gallery-collapsed img:nth-child(n+9){
display:none;
}
.gallery-card.wide{
grid-column:span 1;
}
.hero{
min-height:68vh;
}
.hero-content,
.page-hero .container{
padding:58px 0;
}
.hero-logo{
width:min(240px, 68vw);
}
.brand-text{
font-size:1.2rem;
}
.hero-logo-large{
width:min(300px,72vw) !important;
max-width:72vw;
}
.floating-call{
left:50%;
transform:translateX(-50%);
right:auto;
bottom:calc(12px + env(safe-area-inset-bottom, 0px));
max-width:320px;
width:calc(100% - 24px);
text-align:center;
justify-content:center;
}
body{
padding-bottom:calc(70px + env(safe-area-inset-bottom, 0px));
}
.gallery-grid img{
height:180px;
}
.lightbox-prev,
.lightbox-next{
width:44px;
height:44px;
font-size:1.9rem;
}
.lightbox-prev{ left:8px; }
.lightbox-next{ right:8px; }
.gallery-filters{
gap:8px;
}
.filter-btn{
padding:8px 14px;
font-size:.85rem;
min-height:44px;
box-sizing:border-box;
}
.lightbox{
padding:18px;
}
.lightbox-close{
top:12px;
right:12px;
}
.home-trust-bar{
grid-template-columns:repeat(2, 1fr);
gap:14px;
}
.trust-card{
padding:22px 16px;
}
}
@media (max-width:400px){
.topbar{
font-size:.82rem;
}
.topbar-inner{
gap:8px;
}
}
.card-grid .process-step{
text-align:center;
padding:2rem 1.5rem;
}
.process-number{
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:50%;
background:linear-gradient(135deg, var(--gold), var(--gold-2));
color:#111;
font-family:'Playfair Display', Georgia, serif;
font-size:1.25rem;
font-weight:800;
margin-bottom:1rem;
}
.card-grid .process-step h3{
margin-bottom:.5rem;
}
.blog-img{
width:100%;
height:auto;
border-radius:8px;
margin:2rem 0;
}
.blog-article{
max-width:820px;
}
.comparison-table-wrap{
overflow-x:auto;
margin:28px 0;
}
.comparison-table{
width:100%;
border-collapse:collapse;
font-size:1rem;
background:#fff;
border-radius:12px;
overflow:hidden;
box-shadow:0 4px 16px rgba(0,0,0,0.06);
}
.comparison-table thead tr{
background:var(--bg);
color:var(--text);
}
.comparison-table th{
padding:14px 18px;
text-align:left;
font-family:'Playfair Display', Georgia, serif;
}
.comparison-table td{
padding:12px 18px;
border-bottom:1px solid #e8e4da;
}
.comparison-table tr:nth-child(even){
background:#f9f7f2;
}
.cost-table{
width:100%;
border-collapse:collapse;
margin:1.5rem 0 2rem;
}
.cost-table thead tr{
background:#2c3e2d;
color:#fff;
text-align:left;
}
.cost-table th,
.cost-table td{
padding:12px 16px;
}
.cost-table tbody tr{
border-bottom:1px solid #ddd;
}
.cost-table tbody tr:nth-child(even){
background:#f8f8f5;
}
.gallery-filters{
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin-bottom:12px;
}
.filter-btn{
padding:10px 18px;
border-radius:999px;
border:1px solid #d8ddd8;
background:#fff;
font:inherit;
font-weight:700;
font-size:.92rem;
cursor:pointer;
transition:all .2s ease;
}
.filter-btn.active{
background:linear-gradient(135deg, var(--gold), var(--gold-2));
color:#111;
border-color:transparent;
}
.gallery-grid img.hidden{
display:none;
}
.seasonal-cta{
margin-top:10px;
font-weight:700;
color:var(--gold-2);
font-size:1.05rem;
}
.footer-social{
display:flex;
gap:12px;
margin-top:14px;
}
.social-link{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border-radius:50%;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.15);
color:#dfe7e2;
font-size:.8rem;
font-weight:700;
transition:background .2s ease, color .2s ease;
}
.faq-question{
display:flex;
justify-content:space-between;
align-items:center;
}
.faq-question::after{
content:"";
width:12px;
height:12px;
border-right:2.5px solid #888;
border-bottom:2.5px solid #888;
transform:rotate(45deg);
transition:transform .25s ease;
flex-shrink:0;
margin-left:16px;
}
.faq-question.open::after{
transform:rotate(-135deg);
}
@media (hover:hover){
.nav-list a:hover{
color:var(--gold-2);
}
.nav-list .nav-cta:hover{
color:#111;
background:linear-gradient(135deg, var(--gold), var(--gold-2));
border-color:transparent;
box-shadow:0 12px 24px rgba(199,164,90,.25);
}
.btn:hover{
transform:translateY(-2px);
}
.btn-outline-dark:hover{
border-color:var(--gold);
color:var(--gold);
}
.footer-grid a:hover{
color:var(--gold-2);
}
.breadcrumb-nav a:hover{
color:var(--gold);
}
.option-card:hover{
border-color:var(--gold);
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(199,164,90,.12);
}
.condition-btn:hover{
border-color:var(--gold);
}
.wizard-back:hover{
color:var(--gold);
}
.gallery-grid img:hover{
transform:translateY(-4px) scale(1.01);
box-shadow:0 18px 50px rgba(0,0,0,0.14);
}
.lightbox-close:hover{
background:rgba(255,255,255,0.18);
}
.lightbox-prev:hover,
.lightbox-next:hover{
background:rgba(255,255,255,.18);
}
.service-link-card:hover{
transform:translateY(-4px);
box-shadow:0 18px 50px rgba(0,0,0,0.13);
}
.brand-text:hover{
color:var(--gold-2);
}
.filter-btn:hover{
border-color:var(--gold);
color:var(--gold);
}
.trust-card:hover{
transform:translateY(-3px);
box-shadow:0 18px 50px rgba(0,0,0,0.10);
}
.social-link:hover{
background:var(--gold);
color:#111;
border-color:var(--gold);
}
}
@media (prefers-reduced-motion:reduce){
*, *::before, *::after{
transition-duration:0.01ms !important;
animation-duration:0.01ms !important;
}
.hero-bg{
transition:none;
}
}