/* Fieldwork Lawn & Garden — sample site by Leroux Siteworks */
:root{
  --green:#1d3a2a;--green-2:#27503a;--leaf:#3f7d4f;--lime:#d6e685;--lime-2:#c4d968;--cream:#f7f5ee;--paper:#fffdf8;
  --line:#e2dfd2;--ink:#1a2a20;--muted:#4f5f53;--clay:#c2643d;--gold:#e8a317;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--serif:Georgia,"Times New Roman",serif;
  --shell:1200px;--gutter:clamp(16px,4vw,40px);--radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
[id]{scroll-margin-top:90px}
.shell{max-width:calc(var(--shell) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px;top:6px;z-index:100;background:var(--green);color:#fff;padding:10px 14px;border-radius:8px}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.dark :focus-visible,.footer :focus-visible,.hero :focus-visible{outline-color:var(--lime)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
em.s{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}

.demo{background:#101c15;color:#c5d2c8;font-size:13.5px}
.demo .shell{display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:36px;padding-top:4px;padding-bottom:4px}
.demo b{color:#fff;font-weight:650}
.demo a{color:var(--lime);font-weight:650;text-underline-offset:3px;white-space:nowrap}
.short{display:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font:700 17px/1 var(--sans);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .2s,transform .2s;white-space:nowrap}
.btn svg{width:20px;height:20px;flex:none}
.btn-lime{background:var(--lime);color:var(--green)}
.btn-lime:hover{background:var(--lime-2);transform:translateY(-1px)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-2)}
.btn-ghost{border-color:currentColor;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-line{border-color:var(--green);color:var(--green);background:transparent}
.btn-line:hover{background:var(--green);color:#fff}
.btn-sm{min-height:44px;padding:0 18px;font-size:15.5px}

/* Header */
.header{position:sticky;top:0;z-index:40;background:rgba(247,245,238,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header .shell{display:flex;align-items:center;gap:26px;height:74px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--green);flex:none}
.logo svg{width:28px;height:28px}
.logo b{font-size:21px;letter-spacing:.02em;font-weight:850}
.logo small{display:block;font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--leaf);margin-top:2px}
.nav{display:flex;gap:24px;margin-left:auto}
.nav a{text-decoration:none;font-weight:600;font-size:16px}
.nav a:hover{color:var(--leaf);text-decoration:underline;text-underline-offset:6px}
.head-phone{text-decoration:none;font-weight:750;font-size:17px;white-space:nowrap}
.menu-btn{display:none;margin-left:auto;background:none;border:2px solid var(--green);color:var(--green);border-radius:999px;min-height:44px;padding:0 16px;font:700 15px/1 var(--sans);cursor:pointer}

/* Hero */
.hero{position:relative;color:#fff;background:var(--green)}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.hero-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,32,22,.88) 0%,rgba(16,32,22,.7) 45%,rgba(16,32,22,.15) 100%)}
.hero .shell{position:relative;padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(64px,9vw,120px)}
.hero-copy{max-width:640px}
.kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(214,230,133,.16);color:var(--lime);border-radius:999px;padding:7px 14px;font-size:14.5px;font-weight:700}
.hero h1{font-size:clamp(40px,5.6vw,72px);line-height:1.02;letter-spacing:-.04em;font-weight:850;margin:18px 0 18px}
.hero h1 em.s{color:var(--lime)}
.hero .lead{font-size:clamp(18px,1.7vw,21px);color:#e6eee8;max-width:32em}
.hero .lead b{color:#fff}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 26px}
.hero-ctas .btn{min-height:58px;font-size:18px}
.proof{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:15.5px;font-weight:600;color:#e6eee8}
.proof span{display:inline-flex;gap:7px;align-items:center}
.proof svg{width:18px;height:18px;color:var(--lime)}
.stars{color:var(--gold);letter-spacing:1px}

/* Sections */
.section{padding:clamp(56px,8vw,104px) 0}
.section.paper{background:var(--paper)}
.section.dark{background:var(--green);color:#fff}
.eyebrow{display:inline-block;font-size:14px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--leaf)}
.dark .eyebrow{color:var(--lime)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,44px)}
.h2{font-size:clamp(32px,4vw,52px);line-height:1.04;letter-spacing:-.04em;font-weight:850;max-width:16em;margin-top:8px}
.head p{max-width:30em;color:var(--muted);font-size:17.5px}
.dark .head p,.dark .muted{color:#c9d8cd}

/* Services with prices */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.svc img{aspect-ratio:16/10;object-fit:cover;width:100%}
.svc div{padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.svc h3{font-size:21px;letter-spacing:-.02em}
.svc p{color:var(--muted);font-size:16px}
.svc .price{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:15px;color:var(--muted)}
.svc .price b{font-size:22px;color:var(--green);letter-spacing:-.02em}

/* Planner */
.planner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,3vw,36px);align-items:start}
.q{margin-bottom:26px}
.q legend,.q .qt{display:block;font-weight:750;font-size:18.5px;margin-bottom:12px;padding:0;color:#fff}
.q legend small,.q .qt small{font-weight:500;color:#c9d8cd;font-size:15px;margin-left:6px}
fieldset{border:0;margin:0;padding:0;min-width:0}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.choices.two{grid-template-columns:repeat(2,1fr)}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.choice span{display:flex;flex-direction:column;gap:3px;height:100%;border:2px solid rgba(255,255,255,.22);border-radius:14px;padding:14px 34px 14px 16px;font-weight:700;font-size:16.5px;color:#fff;transition:border-color .15s,background .15s}
.choice span small{font-weight:500;font-size:14.5px;color:#c9d8cd}
.choice input:checked+span{border-color:var(--lime);background:rgba(214,230,133,.14)}
.choice input:checked+span:after{content:"✓";position:absolute;right:12px;top:10px;color:var(--lime);font-weight:900}
.choice input:focus-visible+span{outline:3px solid var(--lime);outline-offset:2px}
.choice input:disabled+span{opacity:.45}
.estimate{position:sticky;top:96px;background:var(--lime);color:var(--green);border-radius:22px;padding:clamp(22px,3vw,32px)}
.estimate h3{font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.est-big{font-size:clamp(44px,5vw,60px);font-weight:850;letter-spacing:-.05em;line-height:1;margin:12px 0 4px}
.est-big small{font-size:18px;font-weight:700;letter-spacing:0;margin-left:4px}
.est-sub{font-weight:600;margin-bottom:16px}
.est-lines{border-top:1px solid rgba(29,58,42,.25);padding-top:12px;display:grid;gap:8px;font-size:16px;margin-bottom:18px}
.est-lines div{display:flex;justify-content:space-between;gap:12px}
.est-lines b{white-space:nowrap}
.est-meta{display:grid;gap:6px;font-size:15px;margin-bottom:20px}
.est-meta span{display:flex;gap:8px;align-items:center}
.est-meta svg{width:18px;height:18px;flex:none}
.estimate .btn{width:100%}
.estimate .fine{font-size:13.5px;margin-top:12px;color:#2f4a38}
.empty{font-weight:600}

/* Quote form (revealed after planner) */
.quote{margin-top:clamp(28px,4vw,40px);background:#fff;color:var(--ink);border-radius:22px;padding:clamp(22px,3vw,36px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,3vw,40px)}
.quote h3{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;line-height:1.1;margin-bottom:10px}
.quote .plan-sum{background:var(--cream);border-radius:14px;padding:16px 18px;margin-top:16px;font-size:15.5px;display:grid;gap:6px}
.quote .plan-sum div{display:flex;justify-content:space-between;gap:10px}
.quote .plan-sum span{color:var(--muted)}
.field{display:block;margin-bottom:14px;font-weight:650;font-size:15.5px}
.field input,.field textarea{display:block;width:100%;margin-top:6px;min-height:50px;border:2px solid var(--line);border-radius:12px;padding:12px 14px;font:16px/1.4 var(--sans);color:var(--ink);background:#fff}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--leaf);outline:none}
.field .hint{font-weight:400;color:var(--muted);font-size:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.err{color:#b42318;font-weight:600;font-size:14.5px;margin:-4px 0 12px}
.thanks{text-align:left}
.thanks .tick{width:58px;height:58px;border-radius:50%;background:#e6f2d0;color:var(--green);display:grid;place-items:center;margin-bottom:14px;font-size:28px;font-weight:900}
.thanks h3{margin-bottom:8px}

/* Work gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:14px}
.gallery figure{margin:0;position:relative;border-radius:16px;overflow:hidden}
.gallery figure.big{grid-column:span 2;grid-row:span 2}
.gallery figure.wide{grid-column:span 2}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{position:absolute;left:10px;bottom:10px;right:10px;background:rgba(255,253,248,.94);border-radius:10px;padding:8px 12px;font-size:14.5px;font-weight:650;line-height:1.3}
.gallery figcaption small{display:block;font-weight:500;color:var(--muted);font-size:13px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.step{border-top:3px solid var(--green);padding-top:18px}
.step:before{counter-increment:s;content:"0" counter(s);display:block;font-family:var(--serif);font-style:italic;font-size:30px;color:var(--leaf);margin-bottom:8px}
.step h3{font-size:21px;letter-spacing:-.02em;margin-bottom:6px}
.step p{color:var(--muted)}

/* Reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:12px}
.review p{font-family:var(--serif);font-size:19px;line-height:1.5}
.review footer{margin-top:auto;font-size:15px;color:var(--muted)}
.review footer b{color:var(--ink)}
.fine{font-size:13.5px;color:var(--muted);margin-top:16px}

/* Area + owner */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.towns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0}
.towns div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.towns b{display:block}
.towns span{font-size:14.5px;color:var(--muted)}
.owner-photo{position:relative}
.owner-photo img{border-radius:22px;aspect-ratio:4/4.3;object-fit:cover;object-position:45% 30%;width:100%}
.owner-photo .note{position:absolute;right:-12px;bottom:24px;background:var(--lime);color:var(--green);border-radius:14px;padding:12px 16px;font-weight:750;max-width:230px;line-height:1.3;box-shadow:0 20px 40px -24px rgba(0,0,0,.5)}
.dark blockquote{margin:16px 0 18px;font-family:var(--serif);font-size:clamp(21px,2.2vw,27px);line-height:1.45}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.badges span{border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:8px 14px;font-size:15px;font-weight:650}

.week{background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(22px,3vw,32px)}
.week h3{font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--leaf);margin-bottom:14px}
.week ol{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.week li{display:grid;grid-template-columns:52px 1fr;gap:4px 12px;align-items:center}
.week li b{font-size:15px;grid-row:span 2}
.week li span{font-weight:650;font-size:16px}
.week li i{display:block;height:8px;border-radius:99px;background:var(--cream);position:relative;overflow:hidden}
.week li i:after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--leaf);border-radius:99px}
.week .note-line{margin-top:18px;font-weight:650;color:var(--green);background:var(--lime);border-radius:10px;padding:10px 14px;font-size:15px}

/* FAQ */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px 0;font-weight:750;font-size:18.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";flex:none;width:32px;height:32px;border-radius:50%;background:var(--green);color:var(--lime);display:grid;place-items:center;font-size:21px;transition:transform .2s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{padding:0 48px 22px 0;color:var(--muted)}

/* CTA + footer */
.cta{background:var(--lime);color:var(--green);border-radius:26px;padding:clamp(28px,4vw,52px);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta h2{font-size:clamp(30px,3.6vw,46px);letter-spacing:-.04em;line-height:1.05;max-width:14em}
.cta .btns{display:flex;gap:12px;flex-wrap:wrap}
.footer{background:#101c15;color:#c5d2c8;padding:56px 0 110px;font-size:15.5px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.footer h2{color:#fff;font-size:14.5px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.footer a{color:#eef3ef;text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer .logo{color:#fff;margin-bottom:12px}
.footer .logo small{color:var(--lime)}
.foot-bottom{margin-top:40px;padding-top:20px;border-top:1px solid #24382b;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px}

.callbar{display:none}
/* Pinned price while choosing on smaller screens (shown by script.js) */
.est-mini{position:fixed;left:12px;right:12px;bottom:12px;z-index:70;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--lime);color:var(--green);border-radius:16px;padding:10px 10px 10px 18px;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);transform:translateY(140%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.est-mini.show{transform:none}
.est-mini small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.est-mini b{font-size:24px;letter-spacing:-.03em;line-height:1.1}
.est-mini .btn{flex:none}
.motion .est-mini.bump b{animation:pop .35s cubic-bezier(.3,1.5,.5,1)}
.est-mini b{display:inline-block}
body.mini-on .callbar{visibility:hidden}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;z-index:80;background:var(--green);color:#fff;border-radius:14px;padding:14px 18px;max-width:min(92vw,460px);box-shadow:0 20px 40px -20px #000;font-size:15.5px;transition:opacity .25s,transform .25s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:1020px){
  .nav,.head-phone{display:none}
  .menu-btn{display:block}
  .nav.open{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--line);padding:6px var(--gutter) 14px}
  .nav.open a{padding:14px 0;border-bottom:1px solid var(--line);font-size:17px}
  .svcs,.reviews{grid-template-columns:repeat(2,1fr)}
  .planner{grid-template-columns:1fr}
  .estimate{position:static}
  .gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .split,.quote{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .owner-photo{max-width:440px}
  .owner-photo .note{right:12px}
  .hero-bg:after{background:linear-gradient(180deg,rgba(16,32,22,.55) 0%,rgba(16,32,22,.88) 70%)}
}
@media (max-width:600px){
  body{font-size:16.5px}
  .long{display:none}.short{display:inline}
  .demo{font-size:12.5px}
  .header .shell{height:66px;gap:10px}
  .header .btn-green{display:none}
  .svcs,.reviews,.choices{grid-template-columns:1fr}
  .choices.size{grid-template-columns:repeat(3,1fr)}
  .choices.size .choice span{padding:12px 10px;font-size:15.5px}
  .choices.two{grid-template-columns:1fr 1fr}
  .row2{grid-template-columns:1fr}
  .towns{grid-template-columns:1fr 1fr}
  .svc img{aspect-ratio:2/1}
  .hero-ctas .btn{flex:1 1 100%}
  .gallery{grid-auto-rows:180px}
  .gallery figure.big{grid-column:span 2;grid-row:span 1}
  .gallery figure.wide{grid-column:span 2}
  .faq details p{padding-right:0}
  .foot-grid{grid-template-columns:1fr}
  .callbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(247,245,238,.97);border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .callbar .btn{min-height:50px;font-size:16.5px;padding:0 12px}
  .toast{bottom:86px}
}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.h2 em.s{margin-left:.18em}

/* Motion: only active when script.js adds .motion (visitor hasn't asked for reduced motion) */
.motion .rv{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.8,.2,1) var(--d,0ms),transform .6s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.motion .rv.in{opacity:1;transform:none}
.svc img,.gallery img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.svc:hover img,.gallery figure:hover img{transform:scale(1.05)}
.motion .choice input:checked+span{animation:pop .3s cubic-bezier(.3,1.5,.5,1)}
.motion .est-lines>div{animation:rise .3s ease-out}
.motion .quote:not([hidden]){animation:rise .55s cubic-bezier(.2,.8,.2,1)}
.motion .thanks:not([hidden]){animation:rise .5s cubic-bezier(.2,.8,.2,1)}
.motion .thanks:not([hidden]) .tick path{stroke-dasharray:21;stroke-dashoffset:21;animation:draw .55s .25s ease-out forwards}
.motion .week li i:after{transform-origin:left;animation:grow 1s cubic-bezier(.2,.8,.2,1) both}
.motion .week:not(.in) li i:after{animation-play-state:paused}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes pop{50%{transform:scale(1.04)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes grow{from{transform:scaleX(0)}}
.thanks .tick svg{width:30px;height:30px}