:root { --forest:#143d2a; --deep:#0c281b; --leaf:#58a83e; --cream:#f4f0e6; --sand:#c9b99d; --charcoal:#242722; --muted:#6e756b; --line:rgba(20,61,42,.2); --serif:"Cormorant Garamond",serif; --sans:"DM Sans",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--cream); color:var(--charcoal); font-family:var(--sans); }
body::selection { background:var(--leaf); color:white; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
img { display:block; width:100%; }
.honeypot { position:absolute; left:-9999px; }
.green-header { height:80px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2rem; padding:0 clamp(1.2rem,4vw,4.5rem); position:absolute; inset:0 0 auto; z-index:20; color:white; border-bottom:1px solid rgba(255,255,255,.24); }
.green-logo { display:flex; flex-direction:column; width:max-content; line-height:1; }.green-logo strong { font-size:1.25rem; letter-spacing:.04em; }.green-logo strong span { font-weight:400; }.green-logo small { margin-top:.35rem; font-size:.48rem; font-weight:600; letter-spacing:.34em; text-transform:uppercase; }
.green-header nav { display:flex; justify-content:center; gap:2.3rem; }.green-header nav a { position:relative; font-size:.62rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }.green-header nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-.7rem; height:2px; background:var(--leaf); transition:right .25s; }.green-header nav a:hover::after { right:0; }
.green-header-cta,.green-button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:1.5rem; padding:.8rem 1.15rem; border:1px solid currentColor; font-size:.61rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; transition:background .25s,color .25s,transform .25s; }.green-header-cta:hover,.green-button:hover { transform:translateY(-2px); }
.green-menu { display:none; }
.green-hero { min-height:900px; display:flex; align-items:flex-end; position:relative; overflow:hidden; padding:130px clamp(1.2rem,5vw,5rem) 85px; color:white; }.green-hero > img { position:absolute; inset:0; height:100%; object-fit:cover; object-position:center; animation:greenHero 1.3s ease both; }@keyframes greenHero { from{opacity:.6;transform:scale(1.05)}to{opacity:1;transform:scale(1)} }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,24,14,.93),rgba(4,24,14,.52) 46%,rgba(4,24,14,.12)),linear-gradient(0deg,rgba(4,24,14,.75),transparent 52%); }
.green-hero-copy { max-width:850px; position:relative; z-index:2; }.green-hero-copy > p { margin:0; color:#d9e6d4; font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }.green-hero-copy > p i { margin:0 .55rem; color:var(--leaf); font-style:normal; }.green-hero h1 { margin:1.8rem 0; font:500 clamp(4.8rem,8.5vw,9rem)/.76 var(--serif); letter-spacing:-.045em; text-transform:uppercase; }.green-hero h1 em { color:#a8d697; font-style:italic; }.green-hero-copy > span { max-width:570px; display:block; color:#e1e6dd; font-size:1rem; line-height:1.75; }.green-hero-copy > div { display:flex; align-items:center; gap:2rem; margin-top:2rem; }
.green-button-light { color:var(--deep); background:white; border-color:white; }.green-button-light:hover { color:white; background:var(--leaf); border-color:var(--leaf); }.green-button-dark { color:white; background:var(--forest); border-color:var(--forest); }.green-button-dark:hover { background:var(--leaf); border-color:var(--leaf); }.green-text-link { padding-bottom:.35rem; border-bottom:1px solid rgba(255,255,255,.55); font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.green-area,.green-concept { position:absolute; z-index:2; right:clamp(1.2rem,4vw,4.5rem); background:rgba(6,31,18,.74); backdrop-filter:blur(9px); }.green-area { bottom:5rem; padding:1rem 1.2rem; border-left:2px solid var(--leaf); }.green-area span,.green-concept { color:#b8c5b5; font-size:.5rem; letter-spacing:.12em; text-transform:uppercase; }.green-area strong { display:block; margin-top:.35rem; font:500 1.2rem/1.05 var(--serif); }.green-concept { top:110px; padding:.8rem 1rem; text-align:right; }.green-concept strong { color:white; }
.green-intro { display:flex; justify-content:space-between; gap:2rem; padding:2.5rem clamp(1.2rem,5vw,5rem); background:var(--forest); color:white; font:500 clamp(1.5rem,2.7vw,2.7rem) var(--serif); }.green-intro p { margin:0; }.green-intro em { color:#9fd68a; }
.green-services,.green-transform,.green-work { padding:clamp(6rem,10vw,10rem) clamp(1.2rem,5vw,5rem); }.green-heading { display:grid; grid-template-columns:.25fr 1fr .55fr; gap:3rem; align-items:end; margin-bottom:5rem; }.green-heading > span,.craft-copy > span,.split-copy > span,.green-process > div > span,.quote-copy > span { color:#478d33; font-size:.56rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }.green-heading h2,.craft-copy h2,.split-copy h2,.green-process h2,.quote-copy h2 { margin:0; font:500 clamp(4rem,7.2vw,7.7rem)/.8 var(--serif); letter-spacing:-.045em; }.green-heading h2 em,.craft-copy h2 em,.split-copy h2 em,.green-process h2 em,.quote-copy h2 em { color:#4c9635; }.green-heading p { margin:0; color:var(--muted); line-height:1.8; }
.service-list { border-top:1px solid var(--line); }.service-list article { display:grid; grid-template-columns:.14fr .8fr 1fr auto; gap:2rem; align-items:center; min-height:120px; padding:1.4rem 0; border-bottom:1px solid var(--line); transition:padding .25s,background .25s; }.service-list article:hover { padding-inline:1.2rem; background:rgba(88,168,62,.08); }.service-list article > span { color:#4f925b; font:.7rem var(--sans); }.service-list h3 { margin:0; font:500 clamp(1.8rem,3vw,3rem) var(--serif); }.service-list p { margin:0; color:var(--muted); }.service-list i { color:var(--leaf); font-style:normal; font-size:1.4rem; }
.green-transform { color:white; background:var(--deep); }.green-transform .green-heading p { color:#adbaae; }.compare-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:1.2rem; }.compare { min-height:520px; margin:0; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.2); }.compare-portrait { min-height:520px; }.compare > img,.compare-after,.compare-after img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.compare-after { overflow:hidden; }.compare-after img { width:100vw; max-width:none; }.compare-grid .compare:first-child .compare-after img { width:calc((100vw - 10vw - 1.2rem) * .675); }.compare-grid .compare-portrait .compare-after img { width:calc((100vw - 10vw - 1.2rem) * .325); }.compare input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }.compare-line { position:absolute; top:0; bottom:0; left:var(--position); width:2px; background:white; box-shadow:0 0 0 1px rgba(0,0,0,.15); pointer-events:none; }.compare-line::after { content:"↔"; width:44px; height:44px; display:grid; place-items:center; position:absolute; top:50%; left:50%; border-radius:50%; background:white; color:var(--forest); transform:translate(-50%,-50%); }.compare-label { position:absolute; top:1rem; z-index:2; padding:.5rem .65rem; background:rgba(8,35,21,.8); font-size:.52rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }.before-label { left:1rem; }.after-label { right:1rem; }.compare-instruction { margin:1rem 0 0; color:#96a598; font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; }
.green-craft { min-height:760px; display:grid; grid-template-columns:1.15fr .85fr; background:var(--cream); }.craft-image { min-height:700px; overflow:hidden; }.craft-image img { height:100%; object-fit:cover; }.craft-copy { align-self:center; padding:clamp(3rem,7vw,7rem); }.craft-copy p,.split-copy p { color:var(--muted); line-height:1.85; }.craft-copy a { display:inline-block; margin-top:1.5rem; color:#397b2d; font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.green-split { min-height:700px; display:grid; grid-template-columns:1fr 1fr; }.green-split > img { height:100%; object-fit:cover; }.split-copy { align-self:center; padding:clamp(3rem,7vw,7rem); }.split-copy .green-button { margin-top:1.5rem; }.green-lawn { background:#e6e0d3; }.green-outdoor { color:white; background:var(--forest); }.green-outdoor .split-copy > span { color:#a5d88f; }.green-outdoor .split-copy h2 em { color:#b9dfaa; }.green-outdoor .split-copy p { color:#d0d9ce; }
.green-detail-break { min-height:760px; position:relative; overflow:hidden; }.green-detail-break > img { position:absolute; inset:0; height:100%; object-fit:cover; }.green-detail-break::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,30,17,.1),rgba(4,30,17,.75)); }.green-detail-break p { max-width:650px; position:absolute; right:7vw; bottom:7vw; z-index:2; color:white; }.green-detail-break p span { display:block; margin-bottom:1rem; color:#cfe2c6; font-size:.58rem; letter-spacing:.15em; text-transform:uppercase; }.green-detail-break p strong { font:500 clamp(3rem,5.5vw,6rem)/.84 var(--serif); }
.green-work { background:#efebdf; }.green-gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:1.2rem; align-items:start; }.green-gallery figure { margin:0; }.green-gallery img { height:100%; object-fit:cover; transition:transform .5s; }.green-gallery figure:hover img { transform:scale(1.018); }.green-gallery figcaption { margin-top:.7rem; color:#777a72; font-size:.5rem; letter-spacing:.1em; text-transform:uppercase; }.gallery-hero { grid-column:1/9; }.gallery-hero img { aspect-ratio:16/9; }.gallery-front { grid-column:9/13; margin-top:6rem!important; }.gallery-front img { aspect-ratio:3/4; }.gallery-pool { grid-column:2/6; margin-top:2rem!important; }.gallery-pool img { aspect-ratio:4/5; }.gallery-outdoor { grid-column:6/13; margin-top:7rem!important; }.gallery-outdoor img { aspect-ratio:16/9; }.gallery-worker { grid-column:3/10; margin-top:5rem!important; }.gallery-worker img { aspect-ratio:16/9; }
.green-process { display:grid; grid-template-columns:.8fr 1.2fr; gap:7vw; padding:clamp(6rem,10vw,10rem) clamp(1.2rem,5vw,5rem); color:white; background:var(--forest); }.green-steps article { display:grid; grid-template-columns:70px 1fr; gap:1rem; align-items:baseline; padding:1.5rem 0; border-bottom:1px solid rgba(255,255,255,.16); }.green-steps span { color:#9ed28a; font:500 1.8rem var(--serif); }.green-steps h3 { margin:0; font:500 clamp(1.7rem,2.8vw,2.8rem) var(--serif); }
.green-quote { display:grid; grid-template-columns:.72fr 1.28fr; gap:7vw; padding:clamp(6rem,10vw,10rem) clamp(1.2rem,5vw,5rem); background:#e3dbc9; }.quote-copy p { color:#676b63; line-height:1.8; }.quote-copy small { color:#85877f; }.green-quote form { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; padding:clamp(1.5rem,3vw,2.5rem); border:1px solid rgba(20,61,42,.25); background:rgba(255,255,255,.35); }.green-quote label { display:flex; flex-direction:column; gap:.5rem; }.green-quote label span { color:#5d655b; font-size:.52rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.green-quote input,.green-quote select,.green-quote textarea { width:100%; border:0; border-bottom:1px solid rgba(20,61,42,.35); border-radius:0; padding:.8rem 0; background:transparent; color:var(--charcoal); outline:none; }.green-quote input:focus,.green-quote select:focus,.green-quote textarea:focus { border-color:var(--leaf); }.green-quote .wide { grid-column:1/-1; }
.green-sales { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:3rem clamp(1.2rem,5vw,5rem); background:var(--charcoal); color:white; }.green-sales p { margin:0; font:500 clamp(1.6rem,2.8vw,3rem) var(--serif); }.green-sales a { padding:.9rem 1.1rem; border:1px solid var(--leaf); color:#b7e0a5; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.green-footer { min-height:190px; display:grid; grid-template-columns:1fr auto auto; gap:3rem; align-items:center; padding:3rem clamp(1.2rem,4vw,4.5rem); color:white; background:var(--deep); }.green-footer p,.green-footer > span { color:#91a095; font-size:.54rem; letter-spacing:.1em; text-transform:uppercase; }.green-mobile-cta { display:none; }
[data-reveal] { opacity:0; transform:translateY(24px); transition:opacity .75s,transform .75s cubic-bezier(.2,.7,.2,1); }[data-reveal].visible { opacity:1; transform:none; }
@media(max-width:900px){.green-header{grid-template-columns:1fr auto}.green-header nav{display:none;position:absolute;top:80px;left:0;right:0;padding:2rem;background:var(--deep);flex-direction:column}.green-header nav.open{display:flex}.green-menu{display:block;justify-self:end;border:1px solid rgba(255,255,255,.4);background:transparent;color:white}.green-header-cta{display:none}.green-heading{grid-template-columns:1fr}.compare-grid{grid-template-columns:1fr}.compare-grid .compare-after img,.compare-grid .compare:first-child .compare-after img,.compare-grid .compare-portrait .compare-after img{width:calc(100vw - 2.4rem)}.green-craft,.green-split,.green-process,.green-quote{grid-template-columns:1fr}.green-outdoor img{order:2}.green-outdoor .split-copy{order:1}.package-featured{transform:none}.green-footer{grid-template-columns:1fr auto}.green-footer>span{display:none}}
@media(max-width:620px){body{padding-bottom:58px}.green-header{height:70px}.green-header nav{top:70px}.green-hero{min-height:780px;padding:120px 1.2rem 60px}.green-hero>img{object-position:58% center}.green-hero h1{font-size:4.8rem}.green-hero-copy>div{align-items:flex-start;flex-direction:column}.green-area{left:1.2rem;right:auto;bottom:1.2rem}.green-concept{top:90px;right:1.2rem}.green-intro{display:block}.green-intro p+p{margin-top:.4rem}.green-services,.green-transform,.green-work{padding:5.5rem 1.2rem}.green-heading h2,.craft-copy h2,.split-copy h2,.green-process h2,.quote-copy h2{font-size:4rem}.service-list article{grid-template-columns:40px 1fr auto;gap:1rem}.service-list article p{grid-column:2/-1}.compare{min-height:420px}.green-craft{display:block}.craft-image{min-height:520px}.green-split{display:flex;flex-direction:column}.green-split>img{min-height:500px}.green-detail-break{min-height:620px}.green-gallery{display:block}.green-gallery figure{margin:0 0 3rem!important}.green-gallery img{aspect-ratio:4/3!important}.green-quote form{grid-template-columns:1fr}.green-quote .wide{grid-column:auto}.green-sales{align-items:flex-start;flex-direction:column}.green-footer{grid-template-columns:1fr;gap:1.2rem}.green-mobile-cta{height:58px;display:flex;align-items:center;justify-content:center;gap:1rem;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--leaf);color:var(--deep);font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 -8px 24px rgba(0,0,0,.25)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.green-hero>img{animation:none}[data-reveal]{opacity:1;transform:none;transition:none}}