:root{
  --moss:#2f5d3a;
  --moss-dark:#1f3d26;
  --leaf:#6aa34a;
  --sand:#f4efe4;
  --bark:#3a2a1f;
  --mist:#e8efe7;
  --gold:#c9a24a;
}
*{font-family:'Inter',system-ui,sans-serif;}
.font-serif{font-family:'Playfair Display',serif;}
html{scroll-behavior:smooth;}
body{background:var(--sand);color:var(--bark);overflow-x:hidden;}

.nature-bg{
  background-color:var(--sand);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(106,163,74,0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(47,93,58,0.08) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(201,162,74,0.04) 0%, transparent 50%);
}

.hero{
  position:relative;
  min-height:100vh;
  background:
    linear-gradient(135deg, rgba(31,61,38,0.85) 0%, rgba(47,93,58,0.75) 50%, rgba(106,163,74,0.6) 100%),
    radial-gradient(ellipse at top left, #3a6b3f 0%, #1f3d26 100%);
  color:#f4efe4;
  overflow:hidden;
}

.leaf{
  position:absolute;
  opacity:0.15;
  animation:float 20s infinite ease-in-out;
}
.leaf:nth-child(2){animation-duration:25s;animation-delay:-5s;}
.leaf:nth-child(3){animation-duration:30s;animation-delay:-10s;}
.leaf:nth-child(4){animation-duration:22s;animation-delay:-15s;}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-30px) rotate(15deg);}
}

.btn-primary{
  background:var(--leaf);
  color:#fff;
  padding:0.85rem 1.75rem;
  border-radius:9999px;
  font-weight:600;
  transition:all 0.3s;
  box-shadow:0 4px 14px rgba(106,163,74,0.35);
  display:inline-block;
  cursor:pointer;
  border:none;
}
.btn-primary:hover{background:var(--moss);transform:translateY(-2px);box-shadow:0 8px 20px rgba(47,93,58,0.45);}
.btn-outline{
  border:2px solid rgba(244,239,228,0.6);
  color:#f4efe4;
  padding:0.8rem 1.7rem;
  border-radius:9999px;
  font-weight:600;
  transition:all 0.3s;
  display:inline-block;
  cursor:pointer;
  background:transparent;
}
.btn-outline:hover{background:rgba(244,239,228,0.15);border-color:#f4efe4;}

.card{
  background:#fff;
  border-radius:1.25rem;
  padding:2rem;
  box-shadow:0 4px 20px rgba(31,61,38,0.06);
  transition:all 0.4s;
  border:1px solid rgba(47,93,58,0.08);
}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(31,61,38,0.12);}

.svc-icon{
  width:64px;height:64px;border-radius:18px;
  background:linear-gradient(135deg,var(--leaf),var(--moss));
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  box-shadow:0 6px 18px rgba(47,93,58,0.25);
}

.avatar{
  width:100%;aspect-ratio:1;border-radius:50%;
  background:linear-gradient(135deg,var(--leaf),var(--moss-dark));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:3rem;font-weight:700;
  box-shadow:0 8px 24px rgba(47,93,58,0.25);
  position:relative;overflow:hidden;
}

.nav-link{position:relative;padding:0.25rem 0;font-weight:500;transition:color 0.2s;}
.nav-link::after{
  content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;
  background:var(--leaf);transition:width 0.3s;
}
.nav-link:hover::after,.nav-link.active::after{width:100%;}
.nav-link.active{color:var(--moss);}

.modal-overlay{
  position:fixed;inset:0;background:rgba(31,61,38,0.6);
  backdrop-filter:blur(6px);z-index:100;
  display:none;align-items:center;justify-content:center;padding:1rem;
}
.modal-overlay.active{display:flex;animation:fadeIn 0.3s;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.modal{
  background:#fff;border-radius:1.5rem;padding:2.5rem;
  max-width:480px;width:100%;position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,0.3);
  max-height:90vh;overflow-y:auto;
}

.input{
  width:100%;padding:0.85rem 1rem;border-radius:0.75rem;
  border:1.5px solid #d4d4d4;background:#fafaf7;
  transition:all 0.2s;font-size:0.95rem;
}
.input:focus{outline:none;border-color:var(--leaf);background:#fff;box-shadow:0 0 0 3px rgba(106,163,74,0.15);}

.section-tag{
  display:inline-block;padding:0.35rem 0.9rem;
  background:rgba(106,163,74,0.12);color:var(--moss);
  border-radius:9999px;font-size:0.8rem;font-weight:600;
  letter-spacing:0.05em;text-transform:uppercase;
}

.mobile-menu{display:none;}
.mobile-menu.active{display:block;}

.toast{
  position:fixed;bottom:2rem;right:2rem;
  background:var(--moss);color:#fff;
  padding:1rem 1.5rem;border-radius:1rem;
  box-shadow:0 10px 30px rgba(0,0,0,0.2);
  z-index:200;transform:translateY(150%);transition:transform 0.4s;
}
.toast.show{transform:translateY(0);}

.stat-num{
  font-family:'Playfair Display',serif;
  font-size:3rem;font-weight:700;color:var(--moss);
  line-height:1;
}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--sand);}
::-webkit-scrollbar-thumb{background:var(--leaf);border-radius:10px;}

.badge{
  display:inline-block;padding:0.25rem 0.75rem;
  background:rgba(201,162,74,0.15);color:var(--gold);
  border-radius:9999px;font-size:0.75rem;font-weight:600;
  margin-right:0.5rem;margin-bottom:0.5rem;
}

.portfolio-img,.blog-img{
  width:100%;aspect-ratio:16/10;border-radius:1rem;
  overflow:hidden;position:relative;
  background:linear-gradient(135deg, var(--mist), #fff);
}
.blog-img{aspect-ratio:16/9;}

.initiative-hero{
  position:relative;
  background:
    linear-gradient(135deg, rgba(31,61,38,0.7) 0%, rgba(106,163,74,0.5) 100%),
    radial-gradient(ellipse at top, #6aa34a 0%, #1f3d26 100%);
  color:#f4efe4;
}

.blog-detail-content p{margin-bottom:1.25rem;line-height:1.8;opacity:0.85;}
.blog-detail-content h2{font-family:'Playfair Display',serif;font-size:1.75rem;font-weight:700;color:var(--moss-dark);margin:2rem 0 1rem;}
.blog-detail-content h3{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:700;color:var(--moss-dark);margin:1.5rem 0 0.75rem;}
.blog-detail-content ul{margin:1rem 0 1.5rem 1.5rem;list-style:disc;}
.blog-detail-content li{margin-bottom:0.5rem;opacity:0.85;}
.blog-detail-content blockquote{border-left:4px solid var(--leaf);padding:0.5rem 1.25rem;margin:1.5rem 0;background:rgba(106,163,74,0.06);border-radius:0 0.5rem 0.5rem 0;font-style:italic;}

.breadcrumb{font-size:0.85rem;opacity:0.7;}
.breadcrumb a{color:var(--moss);font-weight:500;}
.breadcrumb a:hover{text-decoration:underline;}

.autofill-hint{
  display:inline-flex;align-items:center;gap:0.35rem;
  font-size:0.75rem;color:var(--leaf);font-weight:500;
  margin-top:0.35rem;
}

/* NAV: transparent at top, cream after scroll (JS only toggles .scrolled) */
#navbar{background:transparent;transition:all .3s;}
#navbar.scrolled{background:rgba(244,239,228,.95);backdrop-filter:blur(10px);box-shadow:0 2px 20px rgba(31,61,38,.08);}
.nav-brand,#menuBtn{color:var(--moss-dark);}
#navbar.nav-hero:not(.scrolled) .nav-brand,
#navbar.nav-hero:not(.scrolled) .nav-link,
#navbar.nav-hero:not(.scrolled) #menuBtn{color:#f4efe4;}
#navbar.nav-hero:not(.scrolled) .nav-link::after{background:#c9a24a;}

/* brand: text + logo circle white over the hero before scroll */
#navbar.nav-hero:not(.scrolled) .nav-brand{color:#f4efe4 !important;}
#navbar.nav-hero:not(.scrolled) .logo-circle{fill:#f4efe4;}