:root{
  --green-900:#16382c;
  --green-800:#1e4d3a;
  --green-700:#2a6b4e;
  --green-600:#349067;
  --green-500:#4aa67c;
  --green-100:#e6f4ea;
  --green-50:#f2faf4;
  --cream:#fffbf5;
  --sand:#f9f5eb;
  --peach:#fff0e6;
  --coral:#e76f51;
  --coral-dark:#d65a3b;
  --text:#1d2a26;
  --muted:#5a6d68;
  --border:rgba(30,77,58,.10);
  --radius:18px;
  --shadow:0 12px 30px rgba(22,56,44,.08);
  --shadow-lg:0 20px 50px rgba(22,56,44,.12);
}

*{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
  color:var(--text);
  background:var(--cream);
  line-height:1.65;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Lora',serif; letter-spacing:-.02em}
a{text-decoration:none}
img{max-width:100%}

/* NAV */
.topbar{
  background:var(--green-900);
  color:#dbece5;
  font-size:.82rem;
  padding:.45rem 0;
}
.topbar a{color:#dbece5}
.topbar a:hover{color:white}
.navbar{
  background:rgba(255,251,245,.92)!important;
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  padding:.9rem 0;
}
.navbar-brand{
  display:flex; align-items:center; gap:.65rem;
  font-weight:800; letter-spacing:-.02em;
}
.logo-mark{
  width:38px; height:38px; border-radius:11px;
  background:linear-gradient(135deg,var(--green-700),var(--green-500));
  display:grid; place-items:center; color:white; flex-shrink:0;
  box-shadow:0 8px 18px rgba(42,107,78,.25);
}
.logo-text{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800; font-size:1.22rem; line-height:1;
  color:var(--green-900);
  white-space:nowrap; letter-spacing:-.03em;
}
.logo-text span{color:var(--green-600); font-weight:800}
.nav-link{font-weight:600; color:var(--green-900)!important; padding:.5rem .9rem!important; font-size:.93rem; border-radius:100px}
.nav-link:hover,.nav-link.active{background:var(--green-100); color:var(--green-800)!important}
.btn-primary{
  background:var(--green-700); border-color:var(--green-700);
  border-radius:100px; padding:.68rem 1.45rem; font-weight:700; font-size:.92rem;
  box-shadow:0 8px 18px rgba(42,107,78,.18);
}
.btn-primary:hover{background:var(--green-800); border-color:var(--green-800); transform:translateY(-1px)}
.btn-outline-primary{border-radius:100px; padding:.68rem 1.35rem; font-weight:700; border-color:var(--green-700); color:var(--green-700)}
.btn-outline-primary:hover{background:var(--green-700); color:white}
.btn-coral{background:var(--coral); border-color:var(--coral); color:white; border-radius:100px; padding:.68rem 1.45rem; font-weight:700}
.btn-coral:hover{background:var(--coral-dark); color:white}

/* HERO */
.hero{
  padding:3.2rem 0 2.5rem;
  background:
    radial-gradient(900px 500px at 85% -10%, #d8f3dc 0%, transparent 60%),
    radial-gradient(700px 500px at 5% 10%, #fff0e6 0%, transparent 60%),
    var(--cream);
  overflow:hidden; position:relative;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:white; border:1px solid var(--border);
  padding:.38rem .85rem; border-radius:100px; font-size:.82rem; font-weight:700; color:var(--green-800);
  box-shadow:var(--shadow);
}
.hero h1{font-size:clamp(2.2rem,4.2vw,3.55rem); line-height:.95; font-weight:700; color:var(--green-900)}
.hero h1 em{font-style:italic; color:var(--green-600); font-weight:500}
.hero p.lead{color:var(--muted); font-size:1.08rem}
.hero-card{
  background:white; border-radius:24px; padding:.75rem;
  box-shadow:var(--shadow-lg); border:1px solid var(--border);
}
.hero-card img{border-radius:18px; height:420px; width:100%; object-fit:cover}
.hero-float{
  position:absolute; background:white; border-radius:16px; padding:.9rem 1rem;
  box-shadow:var(--shadow-lg); border:1px solid var(--border);
  display:flex; align-items:center; gap:.75rem; font-size:.88rem; font-weight:600
}
.hero-float .icon{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:white}

/* SECTIONS */
.section{padding:4rem 0}
.section-head{max-width:640px; margin:0 auto 2.2rem; text-align:center}
.section-kicker{color:var(--green-600); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:.72rem}
.section-head h2{font-size:clamp(1.7rem,3vw,2.35rem); color:var(--green-900); margin:.35rem 0 .7rem}
.section-head p{color:var(--muted)}
.bg-sand{background:var(--sand)}
.bg-mint{background:var(--green-50)}
.bg-white{background:white}

/* CARDS */
.service-card{
  background:white; border:1px solid var(--border); border-radius:20px;
  overflow:hidden; transition:.3s; height:100%; display:flex; flex-direction:column;
}
.service-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(42,107,78,.14)}
.service-card img{height:195px; width:100%; object-fit:cover}
.service-card .card-body{padding:1.25rem 1.25rem 1.15rem; flex:1; display:flex; flex-direction:column}
.service-card h3{font-size:1.08rem; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; color:var(--green-900); margin:.15rem 0 .45rem}
.service-card p{color:var(--muted); font-size:.9rem; line-height:1.6; flex:1}
.service-card .btn{margin-top:.9rem; font-size:.85rem; padding:.5rem 1rem}

/* WHY CHOOSE */
.why-card{
  background:white; border:1px solid var(--border); border-radius:18px; padding:1.35rem;
  display:flex; gap:1rem; align-items:flex-start; height:100%;
}
.why-icon{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; color:white}
.why-card h4{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:.98rem; color:var(--green-900); margin:0 0 .25rem}
.why-card p{font-size:.88rem; color:var(--muted); margin:0}

/* TESTIMONIALS */
.testimonial{
  background:white; border:1px solid var(--border); border-radius:20px; padding:1.5rem;
  height:100%; position:relative;
}
.testimonial .stars{color:#f4a261; font-size:.9rem}
.testimonial p.quote{color:var(--text); font-size:.95rem; line-height:1.7; margin:.6rem 0 1rem}
.testimonial .author{display:flex; align-items:center; gap:.8rem}
.author img{width:44px; height:44px; border-radius:50%; object-fit:cover}
.author strong{font-size:.92rem; color:var(--green-900)}
.author span{font-size:.82rem; color:var(--muted)}

/* BLOG */
.blog-card{
  background:white; border:1px solid var(--border); border-radius:20px; overflow:hidden;
  transition:.3s; height:100%; display:flex; flex-direction:column;
}
.blog-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}
.blog-card img{height:210px; width:100%; object-fit:cover}
.blog-card .card-body{padding:1.25rem}
.blog-meta{font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green-600)}
.blog-card h3{font-size:1.08rem; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; color:var(--green-900); margin:.35rem 0 .5rem; line-height:1.35}
.blog-card p{color:var(--muted); font-size:.88rem}
.read-link{font-weight:800; color:var(--green-700); font-size:.88rem; display:inline-flex; align-items:center; gap:.35rem}
.read-link:hover{color:var(--green-800)}

/* FAQ */
.accordion-item{border:1px solid var(--border)!important; border-radius:14px!important; overflow:hidden; margin-bottom:.8rem; background:white}
.accordion-button{font-weight:700; color:var(--green-900); background:white; box-shadow:none!important; font-family:'Plus Jakarta Sans',sans-serif}
.accordion-button:not(.collapsed){background:var(--green-50); color:var(--green-800)}
.accordion-body{color:var(--muted); font-size:.93rem; line-height:1.7}

/* CTA */
.cta{
  background:linear-gradient(135deg,var(--green-900),var(--green-700));
  border-radius:26px; padding:3rem 2rem; color:white; position:relative; overflow:hidden;
}
.cta h2{color:white; font-size:clamp(1.6rem,3vw,2.2rem)}
.cta p{color:#dbece5}
.cta .btn{background:white; color:var(--green-800); border-radius:100px; padding:.75rem 1.5rem; font-weight:800; border:none}
.cta .btn:hover{background:#f2faf4; color:var(--green-900)}
.cta-shape{position:absolute; right:-40px; top:-40px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.08); pointer-events:none}

/* FOOTER */
footer{background:var(--green-900); color:#cfe5dc; padding:3rem 0 1.5rem; margin-top:2rem}
footer h5{color:white; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:.95rem; margin-bottom:1rem}
footer a{color:#cfe5dc; font-size:.9rem}
footer a:hover{color:white}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:2rem; padding-top:1.2rem; font-size:.85rem; color:#a6c3b8}
.newsletter-input{border-radius:100px 0 0 100px; border:none; padding:.65rem 1rem}
.newsletter-btn{border-radius:0 100px 100px 0; background:var(--coral); border:none; color:white; padding:.65rem 1.2rem; font-weight:700}
.social a{width:38px; height:38px; border-radius:50%; display:inline-grid; place-items:center; background:rgba(255,255,255,.08); color:white; margin-right:.4rem}
.social a:hover{background:rgba(255,255,255,.18)}

/* PAGE HEADER */
.page-header{
  background:linear-gradient(180deg, var(--green-50), var(--cream));
  padding:3rem 0 2rem; border-bottom:1px solid var(--border); text-align:center;
}
.page-header h1{color:var(--green-900); font-size:clamp(1.9rem,3.5vw,2.6rem)}
.page-header p{color:var(--muted); max-width:620px; margin:.6rem auto 0}
.breadcrumb{justify-content:center; background:transparent; margin:.6rem 0 0}
.breadcrumb a{color:var(--green-700); font-weight:600}

/* CONTACT */
.contact-card{background:white; border:1px solid var(--border); border-radius:18px; padding:1.5rem; height:100%}
.form-control, .form-select{border-radius:12px; padding:.7rem .95rem; border-color:var(--border); background:#fff}
.form-control:focus, .form-select:focus{border-color:var(--green-500); box-shadow:0 0 0 4px rgba(52,144,103,.12)}
.map-wrap{border-radius:18px; overflow:hidden; border:1px solid var(--border); height:100%; min-height:380px}
.map-wrap iframe{width:100%; height:100%; min-height:380px; border:0}

/* UTIL */
.rounded-soft{border-radius:20px}
.badge-soft{background:var(--green-100); color:var(--green-800); border-radius:100px; padding:.35rem .75rem; font-size:.78rem; font-weight:700}
.divider{height:1px; background:var(--border); margin:1.2rem 0}

/* ANIM */
.reveal{opacity:0; transform:translateY(14px); transition:.6s ease}
.reveal.in{opacity:1; transform:none}

/* MOBILE */
@media(max-width:991px){
  .hero-card img{height:360px}
  .hero{padding-top:1.8rem}
}