:root {
  --brand: #1d5b4c;
  --brand-dark: #123c33;
  --surface: #f5f7f5;
  --ink: #202724;
}

html { scroll-behavior: smooth; }
body { color: var(--ink); line-height: 1.8; }
a { text-underline-offset: .18em; }

.site-header { background: rgba(255, 255, 255, .96); position: sticky; top: 0; z-index: 1020; }
.navbar-brand, .nav-link { color: var(--brand-dark); }
.navbar-brand:hover, .nav-link:hover, .nav-link:focus { color: var(--brand); }
.navbar-toggler { border-color: rgba(18, 60, 51, .35); }

.hero-section { background: linear-gradient(120deg, #edf5f0 0%, #fff 70%); }
.py-lg-6 { padding-top: 5rem; padding-bottom: 5rem; }
.section-muted { background: var(--surface); }
.section-heading { max-width: 52rem; margin-bottom: 2rem; }
.section-heading h2 { font-weight: 700; margin-bottom: 1rem; }
.section-kicker { color: var(--brand); font-size: .75rem; font-weight: 700; letter-spacing: .12em; margin-bottom: .5rem; }

.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark); }
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); }

.work-card { background: #fff; border: 1px solid #e2e8e4; border-radius: .5rem; color: var(--ink); display: flex; flex-direction: column; font-weight: 600; height: 100%; justify-content: space-between; min-height: 8rem; padding: 1.25rem; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
.work-card:hover, .work-card:focus { box-shadow: 0 .75rem 1.5rem rgba(18, 60, 51, .12); color: var(--brand-dark); transform: translateY(-2px); }
.work-card span { color: var(--brand); font-size: .8rem; font-weight: 400; margin-top: 1rem; }
.work-card-static { background: transparent; }
.work-card-static:hover { box-shadow: none; transform: none; }
.tag-list { color: #53605a; }
.site-footer { background: var(--brand-dark); }

@media (max-width: 991.98px) { .navbar-nav { padding-top: .75rem; } }
@media (max-width: 575.98px) { .py-lg-6 { padding-top: 3rem; padding-bottom: 3rem; } }