:root{
--green:#153d2d;
--green2:#0b241a;
--accent:#9ac653;
--accent2:#b9df76;
--bg:#f4f2ed;
--text:#1e2922;
--muted:#657068;
--white:#fff;
--radius:20px;
--shadow:0 18px 50px rgba(12,30,20,.12);
}

*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:Manrope,Arial,sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.6;
}

.container{
width:min(1180px,92%);
margin:auto;
}

.header{
position:absolute;
z-index:20;
left:0;
right:0;
color:#fff;
border-bottom:1px solid rgba(255,255,255,.14);
}

.nav{
height:120px;
display:flex;
align-items:center;
gap:18px;
}

.logo{
display:flex;
align-items:center;
gap:10px;
color:inherit;
text-decoration:none;
min-width:190px;
}
.logo b{
font-size:28px;
display:block;
letter-spacing:.2px;
line-height:1.05;
}

.logo small{
display:block;
font-size:11px;
text-transform:uppercase;
opacity:.72;
letter-spacing:1.2px;
margin-top:4px;
}

.logo-mark{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.logo-mark img{
    height:100px;
    width:auto;
    max-width:180px;
    object-fit:contain;
    display:block;
}

.menu{
display:flex;
gap:22px;
flex:1;
justify-content:center;
}

.menu a,
.phone{
color:inherit;
text-decoration:none;
font-size:13px;
font-weight:700;
}

.menu a:hover,
.phone:hover{
color:var(--accent);
}

.nav-actions{
display:flex;
align-items:center;
gap:16px;
}

.phones{
display:flex;
flex-direction:column;
align-items:flex-end;
line-height:1.4;
}

.secondary{
font-size:11px;
opacity:.8;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
border:0;
border-radius:8px;
padding:14px 24px;
font:700 13px Manrope;
letter-spacing:.3px;
text-transform:uppercase;
text-decoration:none;
cursor:pointer;
transition:.25s;
}

.btn-primary{
background:var(--accent);
color:#142615;
}

.btn-primary:hover{
transform:translateY(-2px);
filter:brightness(1.05);
}

.btn-outline{
border:1px solid var(--accent);
color:#fff;
background:transparent;
}

.btn-video{
color:#fff;
}

.hero{
min-height:720px;
background:
url('https://images.unsplash.com/photo-1558904541-efa843a96f01?auto=format&fit=crop&w=2200&q=85')
center/cover;
position:relative;
color:#fff;
display:flex;
align-items:center;
}

.hero-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(5,22,15,.94),
rgba(5,22,15,.48),
rgba(5,22,15,.18)
);
}

.hero-content{
position:relative;
display:flex;
justify-content:space-between;
align-items:center;
padding-top:80px;
gap:50px;
}

.hero-text{
max-width:700px;
}

.eyebrow{
text-transform:uppercase;
letter-spacing:2px;
color:var(--accent);
font-size:12px;
font-weight:800;
}

.hero h1,
h2,
h3{
font-family:'Playfair Display',serif;
}

.hero h1{
font-size:clamp(45px,6vw,78px);
line-height:1.06;
margin:10px 0 22px;
}

.lead{
font-size:18px;
max-width:620px;
color:#e1e8e2;
}

.hero-buttons{
display:flex;
gap:14px;
margin-top:32px;
flex-wrap:wrap;
}

.hero-card{
width:290px;
padding:28px;
background:rgba(11,36,26,.9);
backdrop-filter:blur(12px);
border:1px solid rgba(154,198,83,.3);
border-radius:18px;
box-shadow:0 20px 60px rgba(0,0,0,.2);
}

.hero-card div{
padding:14px 0;
border-bottom:1px solid rgba(255,255,255,.12);
}

.hero-card div:last-child{
border:0;
}

.hero-card span{
color:var(--accent);
font-size:25px;
font-weight:800;
}

.hero-card p{
margin:0;
font-size:13px;
}

.quick-services{
margin-top:-38px;
position:relative;
z-index:3;
}

.quick-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
background:#fff;
border-radius:18px;
box-shadow:var(--shadow);
padding:16px;
}

.quick-grid a{
color:var(--text);
text-decoration:none;
padding:15px;
border-right:1px solid #e6e8e4;
text-align:center;
font-size:13px;
display:flex;
flex-direction:column;
gap:7px;
align-items:center;
transition:.25s;
}

.quick-grid a:hover{
background:#f4f7f0;
transform:translateY(-3px);
border-radius:12px;
}

.quick-grid a:last-child{
border:0;
}

.quick-grid a:first-letter{
font-size:26px;
}

.section{
padding:90px 0;
}

.section-head{
display:flex;
justify-content:space-between;
align-items:end;
margin-bottom:34px;
gap:25px;
}

.section-head h2,
.about h2,
.request-section h2{
font-size:42px;
margin:4px 0;
}

.section-head a{
color:#587b2d;
text-decoration:none;
font-weight:800;
font-size:13px;
}

.before-after-slider{
position:relative;
width:100%;
height:520px;
border-radius:18px;
overflow:hidden;
background:#102a1d;
box-shadow:var(--shadow);
user-select:none;
touch-action:none;
}

.ba-image{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
pointer-events:none;
}

.ba-before-wrap{
position:absolute;
inset:0 auto 0 0;
width:50%;
height:100%;
overflow:hidden;
}

.ba-before{
width:100vw;
max-width:none;
height:100%;
object-fit:cover;
object-position:center;
}

.ba-label{
position:absolute;
top:22px;
z-index:4;
padding:8px 15px;
border-radius:8px;
background:rgba(8,24,16,.78);
backdrop-filter:blur(8px);
color:#fff;
font-size:12px;
font-weight:800;
letter-spacing:.8px;
}

.ba-label-before{
left:22px;
}

.ba-label-after{
right:22px;
}

.ba-divider{
position:absolute;
z-index:5;
top:0;
bottom:0;
left:50%;
width:2px;
background:#fff;
transform:translateX(-50%);
box-shadow:0 0 16px rgba(0,0,0,.35);
pointer-events:none;
}

.ba-handle{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:52px;
height:52px;
border-radius:50%;
display:grid;
place-items:center;
background:#fff;
color:var(--green);
font-size:24px;
font-weight:800;
box-shadow:0 8px 25px rgba(0,0,0,.25);
}

.ba-range{
position:absolute;
z-index:7;
inset:0;
width:100%;
height:100%;
margin:0;
opacity:0;
cursor:ew-resize;
}

.ba-hint{
position:absolute;
z-index:4;
left:50%;
bottom:18px;
transform:translateX(-50%);
margin:0;
padding:7px 13px;
border-radius:20px;
background:rgba(8,24,16,.72);
color:#fff;
font-size:12px;
white-space:nowrap;
pointer-events:none;
}

.section-dark{
background:
linear-gradient(
120deg,
#092217,
#153d2d
);
color:#fff;
}

.light a{
color:var(--accent);
}

.services-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
}

.service-card{
border:1px solid rgba(154,198,83,.28);
padding:28px;
border-radius:14px;
background:rgba(255,255,255,.025);
transition:.25s;
}

.service-card:hover{
transform:translateY(-6px);
background:rgba(255,255,255,.07);
}

.service-featured{
border-color:var(--accent);
background:rgba(154,198,83,.08);
}

.service-icon{
font-size:34px;
}

.service-card h3{
font-size:23px;
margin:12px 0;
}

.service-card p{
font-size:14px;
color:#cbd7cf;
}

.portfolio-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}

.portfolio-grid article{
height:400px;
position:relative;
border-radius:16px;
overflow:hidden;
box-shadow:var(--shadow);
background:#183d2e;
}

.portfolio-grid article:after{
content:"";
position:absolute;
inset:40% 0 0;
background:
linear-gradient(
transparent,
rgba(0,0,0,.72)
);
}

.portfolio-grid img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s;
}

.portfolio-grid article:hover img{
transform:scale(1.05);
}

.portfolio-grid div{
position:absolute;
z-index:2;
bottom:20px;
left:20px;
color:#fff;
right:20px;
}

.portfolio-grid h3{
margin:0;
font-size:25px;
}

.portfolio-grid p{
margin:0;
font-size:13px;
opacity:.9;
}

.about{
background:#fff;
}

.about-grid,
.request-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.about img{
width:100%;
height:500px;
object-fit:cover;
border-radius:18px;
box-shadow:var(--shadow);
}

.about li{
margin:12px 0;
}

.request-section{
background:
linear-gradient(
120deg,
#153d2d,
#0d2b20
);
color:#fff;
}

.request-form{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
background:#fff;
padding:28px;
border-radius:16px;
color:var(--text);
box-shadow:var(--shadow);
}

input,
select,
textarea{
width:100%;
padding:13px;
border:1px solid #d8ddd7;
border-radius:8px;
background:#fff;
margin-top:6px;
font:14px Manrope;
}

.request-form textarea,
.request-form .agree,
.request-form button,
.form-message{
grid-column:span 2;
}

.request-form textarea{
min-height:120px;
resize:vertical;
}

.agree{
font-size:11px;
font-weight:500;
}

.agree input{
width:auto;
}

.contact-highlight{
margin-top:28px;
display:flex;
flex-direction:column;
gap:10px;
}

.contact-highlight a{
color:var(--accent);
font-size:21px;
font-weight:800;
text-decoration:none;
}

.form-message{
font-size:13px;
min-height:20px;
}

.form-message.success{
color:#397516;
}

.form-message.error{
color:#b22;
}

footer{
background:#081a12;
color:#d5ded7;
padding:50px 0 20px;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:40px;
}

.footer-grid a{
color:#d5ded7;
text-decoration:none;
}

.footer-grid a:hover{
color:var(--accent);
}

.footer-grid p{
font-size:13px;
}

.copyright{
border-top:1px solid rgba(255,255,255,.12);
padding-top:20px;
margin-top:30px;
font-size:12px;
color:#849088;
}

.burger{
display:none;
background:none;
border:0;
}

@media(max-width: 800px){

.menu,
.nav-actions{
display:none;
}

.nav{
height:90px;
}

  .logo-mark img{
        height:50px;
        max-width:130px;
    }


.burger{
display:flex;
margin-left:auto;
flex-direction:column;
gap:5px;
}

.burger span{
display:block;
width:25px;
height:2px;
background:#fff;
}

.menu.open{
display:flex;
position:absolute;
top:86px;
left:0;
right:0;
background:#0b241a;
padding:25px;
flex-direction:column;
align-items:center;
}

.hero{
min-height:760px;
}

.hero-content{
flex-direction:column;
align-items:flex-start;
padding-bottom:50px;
}

.hero-card{
width:100%;
display:grid;
grid-template-columns:repeat(3,1fr);
}

.hero-card div{
border:0;
}

.quick-grid{
grid-template-columns:repeat(3,1fr);
}

.services-grid{
grid-template-columns:repeat(2,1fr);
}

.about-grid,
.request-grid{
grid-template-columns:1fr;
}

.portfolio-grid{
grid-template-columns:1fr;
}

.portfolio-grid article{
height:320px;
}

}

@media(max-width:600px){

.header{
position:absolute;
}

.nav{
height:90px;
}

  .logo-mark img{
        height:50px;
        max-width:130px;
    }


.menu.open{
top:70px;
}

.hero{
min-height:780px;
}

.hero h1{
font-size:46px;
}

.hero-buttons{
flex-direction:column;
align-items:flex-start;
}

.hero-card{
grid-template-columns:1fr;
padding:18px;
}

.quick-grid{
grid-template-columns:repeat(2,1fr);
}

.quick-grid a{
border-bottom:1px solid #e6e8e4;
}

.section{
padding:65px 0;
}

.section-head{
align-items:flex-start;
flex-direction:column;
gap:10px;
}

.section-head h2,
.about h2,
.request-section h2{
font-size:34px;
}

.services-grid{
grid-template-columns:1fr;
}

.before-after-slider{
height:340px;
}

.ba-before{
width:100vw;
}

.request-form{
grid-template-columns:1fr;
}

.request-form textarea,
.request-form .agree,
.request-form button,
.form-message{
grid-column:span 1;
}

.footer-grid{
grid-template-columns:1fr;
}

}