:root{
  --brand-green:#008F4A;
  --brand-green-hover:#006b37;
  --dark-bg:#1f1f1f;
}

/* HERO */
.cs-hero{
  background:linear-gradient(180deg,#f5f5f5 0%,#ffffff 60%);
  padding-top: calc(var(--header-offset) + 2rem); /* match about hero */
  padding-bottom: 4rem;                          /* match about hero */
  min-height: 300px;
}
.cs-hero h1{ color:#1c1c1c; }
.cs-hero p{ color:#4a4a4a; }

/* TABS NAV */
.tab-list{
  display:flex; justify-content:center; flex-wrap:wrap;
  list-style:none; gap:1rem; margin:0 0 2rem; padding:0;
}
.tab-list li{
  cursor:pointer; padding:0.6rem 1.1rem;
  border:2px solid var(--brand-green); border-radius:25px;
  color:var(--brand-green); font-weight:600;
  transition:background .25s,color .25s;
}
.tab-list li.active, .tab-list li:hover{ background:var(--brand-green); color:#fff; }

/* TAB CONTENT */
.tab-content{ display:none; animation:fadeIn .4s ease; }
.tab-content.active{ display:block; }
.tab-content h2{ color:var(--brand-green); margin-bottom:0.5rem; }
.tab-content ul{ padding-left:1.2rem; }
.tab-content ul li{ margin-bottom:0.4rem; }

/* CTA */
.cs-cta{ background:#ffffff; }
.btn-brand{
  background:var(--brand-green); color:#fff; padding:0.7rem 1.5rem; border:none;
}
.btn-brand:hover{ background:var(--brand-green-hover); }

/* ANIMATION */
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

/* RESPONSIVE */
@media(max-width:576px){
  .tab-list{ gap:0.6rem; }
  .tab-list li{ padding:0.5rem 0.9rem; font-size:0.9rem; }
}