
:root{
  --shadow:0 18px 55px rgba(0,0,0,.18);
  --shadowSoft:0 12px 35px rgba(0,0,0,.10);
  --green:#1f6f3a;
  --green2:#2ea25a;
  --radius:18px;
  --radius2:26px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#0c1210;
  background:linear-gradient(180deg, #ffffff 0%, #fbfbfa 55%, #ffffff 100%);
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
.container{width:min(1180px, calc(100% - 40px)); margin-inline:auto}

/* Decorative mower */
.mower{
  position:fixed;
  left:-260px;
  bottom:18px;
  width:240px;
  height:90px;
  z-index:1400;
  pointer-events:none;
  opacity:0;
  transform:translateX(0);
}
.mower__svg{width:240px; height:90px}
.mower__trail{
  position:absolute;
  left:-1200px;
  right:240px;
  top:62px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(46,162,90,0), rgba(46,162,90,.28), rgba(46,162,90,0));
  opacity:.0;
}
.mower.is-running{opacity:1; animation:mowMove 6.5s ease-in-out forwards}
.mower.is-running .mower__trail{animation:mowTrail 6.5s ease-in-out forwards}
@keyframes mowMove{
  0%{transform:translateX(0)}
  10%{transform:translateX(140px)}
  100%{transform:translateX(calc(100vw + 520px))}
}
@keyframes mowTrail{
  0%{opacity:0}
  12%{opacity:.9}
  100%{opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .mower{display:none}
}

.notice{
  background:linear-gradient(90deg, #0d2b1a, #113423);
  color:#e9f5ee;
  font-size:14px;
}
.notice__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:10px 0;
}
.notice__link{color:#e9f5ee; text-decoration:none; font-weight:700}
.notice__link:hover{text-decoration:underline}
.notice__sep{opacity:.65}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  font-weight:700;
}

/* Header */
.header{
  position:sticky; top:0; z-index:1200;
  background:rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:18px;
}
.brand{display:flex; align-items:center; text-decoration:none}
.brand__logo{height:64px; width:auto}

.nav{display:flex; align-items:center; gap:18px}
.nav a{
  text-decoration:none; font-weight:700; color:#223127;
  padding:10px 10px; border-radius:12px;
}
.nav a:hover{background:rgba(31,111,58,.08)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  background:linear-gradient(180deg, var(--green2), var(--green));
  color:white;
  text-decoration:none;
  font-weight:900;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 28px rgba(31,111,58,.25);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  white-space:nowrap;
  max-width:100%;
}
.btn:hover{transform:translateY(-1px); filter:saturate(1.1); box-shadow:0 16px 34px rgba(31,111,58,.30)}
.btn:active{transform:translateY(0px)}

.btn--ghost{
  background:rgba(255,255,255,.84);
  color:#123321;
  border:1px solid rgba(0,0,0,.10);
  box-shadow:var(--shadowSoft);
}
.btn--ghost:hover{box-shadow:0 16px 40px rgba(0,0,0,.12)}
.btn--sm{padding:10px 12px; border-radius:12px; font-size:14px}
.btn--block{width:100%}

.navToggle{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.9);
  box-shadow:var(--shadowSoft);
  cursor:pointer;
  padding:10px;
}
.navToggle span{
  display:block; height:2px; width:100%;
  background:#1b2a21;
  border-radius:99px;
  margin:6px 0;
}

/* Hero */
.hero{
  position:relative;
  min-height:88vh;
  display:grid;
  align-items:center;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background:url('../images/hero.webp') center/cover no-repeat;
  transform:scale(1.06);
}
.hero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 18% 35%, rgba(18,40,26,.10) 0%, rgba(18,40,26,.65) 55%, rgba(0,0,0,.78) 100%),
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.82));
}
/* moving light sweep */
.hero__particles{
  position:absolute; inset:-30%;
  background:
    radial-gradient(circle at 20% 30%, rgba(46,162,90,.22), transparent 55%),
    radial-gradient(circle at 70% 50%, rgba(255,255,255,.08), transparent 60%);
  filter: blur(22px);
  animation: floatGlow 10s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity:.9;
}
@keyframes floatGlow{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3%, -2%, 0) scale(1.02)}
}

.hero__inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.18fr .92fr;
  gap:28px;
  padding:64px 0 86px;
  color:#f3faf6;
  z-index:2;
}
.hero__kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; color:#e9f6ee;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  padding:8px 12px; border-radius:999px;
  width:fit-content;
}
.dot{width:10px; height:10px; border-radius:99px; background:var(--green2); box-shadow:0 0 0 6px rgba(46,162,90,.18)}
.hero h1{
  margin:16px 0 12px;
  font-size: clamp(34px, 4.9vw, 60px);
  line-height:1.02;
  letter-spacing:-0.03em;
}
.hero p{
  margin:0;
  font-size:18px;
  line-height:1.6;
  color:rgba(243,250,246,.88);
  max-width:62ch;
}
/* FIX: allow wrap + keep spacing so buttons can't overlap text */
.hero__cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:22px;
}
.hero__trust{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}
.trustItem{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
}
.trustItem__icon{
  width:28px; height:28px; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(46,162,90,.18);
  border:1px solid rgba(46,162,90,.35);
  font-weight:900;
}
.trustItem__title{font-weight:900; font-size:14px}
.trustItem__sub{font-size:13px; opacity:.85; margin-top:2px}

.heroCard{
  border-radius:var(--radius2);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 26px 70px rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
  overflow:hidden;
}
.heroCard__top{padding:18px 18px 8px}
.heroCard__badge{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(46,162,90,.16);
  border:1px solid rgba(46,162,90,.35);
  font-weight:900;
  font-size:13px;
}
.heroCard__title{margin-top:12px; font-weight:900; font-size:18px}
.heroCard__phone{
  display:inline-block;
  margin-top:6px;
  font-weight:900;
  font-size:24px;
  letter-spacing:-.01em;
  text-decoration:none;
  color:#f7fff9;
}
.heroCard__phone:hover{text-decoration:underline}
.heroCard__body{
  padding:14px 18px 18px;
  background:rgba(0,0,0,.14);
  border-top:1px solid rgba(255,255,255,.12);
}
.checklist{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.checklist li{
  position:relative;
  padding-left:26px;
  color:rgba(243,250,246,.92);
  font-weight:700;
  font-size:14px;
}
.checklist li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  width:18px; height:18px;
  border-radius:8px;
  display:grid; place-items:center;
  background:rgba(46,162,90,.18);
  border:1px solid rgba(46,162,90,.35);
}
.heroCard__actions{display:grid; gap:10px; margin-top:14px}

.sep{
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:120px;
  width:100%;
  z-index:3;
}
.sep path{fill:#ffffff}

/* Sections */
.section{padding:86px 0}
.section--tight{padding:70px 0}
.section--muted{background:linear-gradient(180deg, #f5f7f5 0%, #ffffff 80%)}
.section__head{text-align:center; max-width:850px; margin:0 auto 34px}
.eyebrow{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(31,111,58,.08);
  border:1px solid rgba(31,111,58,.15);
  color:#1a5c31;
  font-weight:900;
  font-size:12px;
  letter-spacing:.12em;
}
.section__head h2{
  margin:14px 0 10px;
  font-size: clamp(26px, 3.1vw, 40px);
  letter-spacing:-.02em;
}
.lead{margin:0 auto; color:#324438; line-height:1.6; font-size:16px; max-width:70ch}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  align-items:center;
}
.split__media img{
  width:100%;
  border-radius:var(--radius2);
  box-shadow:var(--shadow);
}
.split__content{padding:12px}
.featureGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.feature{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:16px;
  box-shadow:var(--shadowSoft);
}
.feature h3{margin:0 0 8px; font-size:16px}
.feature p{margin:0; color:#3a4c40; line-height:1.55; font-size:14px}
.inlineCtas{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px}

.servicesGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
.serviceCard{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:22px;
  padding:18px 18px 16px;
  box-shadow:var(--shadowSoft);
  transition:transform .18s ease, box-shadow .18s ease;
  position:relative;
  overflow:hidden;
}
.serviceCard::before{
  content:"";
  position:absolute; inset:-40% -40% auto auto;
  width:160px; height:160px;
  background:radial-gradient(circle at 30% 30%, rgba(46,162,90,.28), rgba(46,162,90,0));
  transform:rotate(12deg);
}
.serviceCard h3{margin:0 0 8px; font-size:16px; position:relative}
.serviceCard p{margin:0; color:#3a4c40; line-height:1.6; font-size:14px; position:relative}
.serviceCard:hover{transform:translateY(-3px); box-shadow:0 22px 60px rgba(0,0,0,.14)}
.serviceCard--highlight{border-color:rgba(46,162,90,.35)}
.textLink{
  display:inline-flex; gap:8px; align-items:center;
  text-decoration:none;
  color:#1a5c31;
  font-weight:900;
  margin-top:10px;
  position:relative;
}
.textLink:hover{text-decoration:underline}

.section__foot{
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center;
  margin-top:26px;
}

.carousel{
  position:relative;
  border-radius:var(--radius2);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#0e1b13;
}
.carousel__track{
  display:flex;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.carousel__slide{min-width:100%; margin:0}
.carousel__slide img{width:100%; height:min(560px, 62vh); object-fit:cover}
.carousel__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.35);
  color:white; font-size:26px;
  display:grid; place-items:center;
  cursor:pointer;
  z-index:5;
}
.carousel__btn:hover{background:rgba(0,0,0,.55)}
.carousel__btn--prev{left:14px}
.carousel__btn--next{right:14px}
.carousel__dots{
  position:absolute; left:0; right:0; bottom:14px;
  display:flex; gap:8px; justify-content:center;
  z-index:6;
}
.dotBtn{
  width:10px; height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.18);
  cursor:pointer;
}
.dotBtn.is-active{background:rgba(255,255,255,.95)}

/* Reviews */
.reviewGrid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px}
.reviewCard{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:22px;
  padding:18px;
  box-shadow:var(--shadowSoft);
  position:relative;
  overflow:hidden;
}
.reviewCard::before{
  content:"";
  position:absolute; left:-40px; top:-40px;
  width:120px; height:120px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%, rgba(46,162,90,.22), rgba(46,162,90,0));
}
.reviewCard__top{display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:12px; position:relative}
.stars{font-weight:900; letter-spacing:.08em; color:#1f6f3a}
.reviewCard__meta{color:#55665b; font-weight:800; font-size:13px}
.reviewCard p{margin:0; color:#2f4036; line-height:1.65; position:relative}
.reviewCard__foot{margin-top:14px; display:flex; justify-content:space-between; gap:10px; align-items:center; position:relative}
.reviewCard__name{font-weight:900; font-size:13px; color:#223127}

/* Service area */
.areaWrap{display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; align-items:stretch}
.areaMap{
  height:420px;
  border-radius:var(--radius2);
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--shadowSoft);
}
.areaList{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius2);
  padding:18px;
  box-shadow:var(--shadowSoft);
}
.areaList h3{margin:0 0 10px; font-size:16px}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0}
.chip{
  text-decoration:none;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  font-weight:900;
}
.chip:hover{background:rgba(31,111,58,.08)}
.muted{color:#55665b; line-height:1.6}
.stack{display:grid; gap:10px; margin-top:14px}

/* CTA band */
.ctaBand{
  background:radial-gradient(900px 420px at 20% 30%, rgba(46,162,90,.25) 0%, rgba(46,162,90,0) 60%),
             linear-gradient(90deg, #0f2a1b, #0c1f15);
  color:#eaf6ef;
  padding:60px 0;
}
.ctaBand__inner{display:flex; align-items:center; justify-content:space-between; gap:16px}
.ctaBand h2{margin:0 0 8px; font-size:28px; letter-spacing:-.02em}
.ctaBand p{margin:0; color:rgba(234,246,239,.86); line-height:1.6; max-width:62ch}
.ctaBand__actions{display:flex; flex-wrap:wrap; gap:12px}

/* Contact */
.contactCard{display:grid; grid-template-columns: 1.15fr .85fr; gap:16px}
.contactCard__left,.contactCard__right{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius2);
  padding:22px;
  box-shadow:var(--shadowSoft);
}
.contactWays{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px}
.smallPrint{margin-top:18px; display:grid; gap:6px; color:#45584d}
.miniPanel__title{font-weight:900; margin-bottom:10px}
.miniList{margin:0; padding-left:18px; display:grid; gap:8px; color:#2f4036}
.miniPanel__note{margin-top:14px; color:#45584d}
.miniPanel__note a{font-weight:900}

/* Footer */
.footer{background:linear-gradient(180deg, #07110c, #060d09); color:#e9f5ee}
.footer__inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; padding:50px 0}
.footer__brand img{height:58px; width:auto; margin-bottom:10px}
.footer__brand p{margin:0; color:rgba(233,245,238,.82); line-height:1.6; max-width:52ch}
.footer__buttons{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.footer__cols{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-content:start}
.footerCol__title{font-weight:900; margin-bottom:10px}
.footerCol a{display:block; text-decoration:none; color:rgba(233,245,238,.86); padding:8px 0}
.footerCol a:hover{text-decoration:underline}
.footer__bar{border-top:1px solid rgba(255,255,255,.10); padding:14px 0}
.footer__barInner{display:flex; justify-content:space-between; gap:12px; color:rgba(233,245,238,.72); font-size:13px}

/* Leaflet custom pin */
.mapPin .pin{
  width:14px; height:14px; border-radius:999px;
  background:linear-gradient(180deg, #2ea25a, #1f6f3a);
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 10px 25px rgba(0,0,0,.25);
}

/* Scroll reveal */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-in{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none}
}

/* Mobile sticky CTA */
.stickyCta{
  position:fixed;
  left:14px; right:14px; bottom:14px;
  display:none;
  gap:10px;
  z-index:1300;
}
.stickyCta__btn{
  flex:1;
  text-decoration:none;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:var(--shadow);
  font-weight:900;
  text-align:center;
}
.stickyCta__btn--primary{
  background:linear-gradient(180deg, var(--green2), var(--green));
  color:#fff;
  border-color:rgba(0,0,0,.08);
}
@media (max-width: 760px){
  .stickyCta{display:flex}
  body{padding-bottom:84px}
}

/* Responsive */
@media (max-width: 980px){
  .hero__inner{grid-template-columns:1fr; padding:56px 0 96px}
  .hero__trust{grid-template-columns:1fr; max-width:520px}
  .split{grid-template-columns:1fr}
  .featureGrid{grid-template-columns:1fr}
  .servicesGrid{grid-template-columns:1fr 1fr}
  .reviewGrid{grid-template-columns:1fr}
  .areaWrap{grid-template-columns:1fr}
  .contactCard{grid-template-columns:1fr}
  .ctaBand__inner{flex-direction:column; align-items:flex-start}
  .footer__inner{grid-template-columns:1fr}
}
@media (max-width: 820px){
  .navToggle{display:inline-flex; align-items:center; justify-content:center}
  .nav{
    position:fixed;
    left:14px; right:14px;
    top:calc(54px + 44px); /* notice + header-ish */
    background:rgba(255,255,255,.96);
    border:1px solid rgba(0,0,0,.10);
    border-radius:18px;
    box-shadow:var(--shadow);
    padding:12px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    transform:translateY(-12px);
    opacity:0;
    pointer-events:none;
    transition:opacity .15s ease, transform .15s ease;
    z-index:1250;
  }
  .nav.is-open{opacity:1; transform:translateY(0); pointer-events:auto}
  .nav a{padding:12px 12px}
}
@media (max-width: 520px){
  .notice__inner{flex-direction:column; align-items:flex-start}
  .servicesGrid{grid-template-columns:1fr}
  .footer__barInner{flex-direction:column; align-items:flex-start}
}
