:root {
  --c-forest-green: #2D5016;
  --c-holiday-red: #C41E3A;
  --c-sandy-brown: #F4A460;
  --c-warm-beige: #F5E6D3;
  --c-off-white: #FEFDFB;
  --c-white: #FFFFFF;
  --c-warm-cream: #FEF3E9;
  --c-soft-tan: #F5EBE0;
  --c-dark-olive: #2D3319;
  --c-olive-gray: #6B7048;
  --c-forest-green-dark: #243f10;
  --c-border: #e8ddca;
  --c-border-soft: #efe6d6;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;
  --radius: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(45, 51, 25, 0.06);
  --shadow-md: 0 4px 16px rgba(45, 51, 25, 0.08);
  --container-max: 1120px; --header-h: 72px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--c-dark-olive); background: var(--c-off-white); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--c-forest-green); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.25; color: var(--c-dark-olive); }
p { margin: 0; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--c-forest-green); color: var(--c-white); padding: var(--sp-3) var(--sp-4); border-radius: 0 0 var(--radius) 0; z-index: 1000; font-weight: 500; }
.skip-link:focus { left: 0; }
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-4); }
@media (min-width: 640px) { .container { padding: 0 var(--sp-6); } }
@media (min-width: 1024px) { .container { padding: 0 var(--sp-8); } }
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(254, 253, 251, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-border-soft); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: var(--sp-4); }
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--c-sandy-brown); flex-shrink: 0; }
.brand-name { font-size: 18px; font-weight: 600; color: var(--c-dark-olive); letter-spacing: -0.01em; }
@media (max-width: 639px) { .brand-name { display: none; } }
.primary-nav { display: none; }
@media (min-width: 860px) {
  .primary-nav { display: block; }
  .nav-list { display: flex; align-items: center; gap: var(--sp-6); }
  .nav-list a { color: var(--c-dark-olive); font-size: 15px; font-weight: 500; text-decoration: none; transition: color 0.15s ease; }
  .nav-list a:hover { color: var(--c-forest-green); text-decoration: none; }
  .nav-list .nav-cta { background: var(--c-forest-green); color: var(--c-white); padding: var(--sp-2) var(--sp-6); border-radius: var(--radius-pill); transition: background 0.15s ease; }
  .nav-list .nav-cta:hover { background: var(--c-forest-green-dark); color: var(--c-white); }
}
.nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: transparent; border: 1px solid var(--c-border); border-radius: var(--radius); cursor: pointer; padding: 0; }
@media (min-width: 860px) { .nav-toggle { display: none; } }
.nav-toggle-bar { width: 22px; height: 2px; background: var(--c-dark-olive); border-radius: 2px; margin: 0 auto; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.primary-nav.is-open { display: block; position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--c-white); border-bottom: 1px solid var(--c-border); padding: var(--sp-6) var(--sp-4); box-shadow: var(--shadow-md); }
.primary-nav.is-open .nav-list { display: flex; flex-direction: column; gap: var(--sp-4); align-items: stretch; }
.primary-nav.is-open .nav-list a { font-size: 16px; padding: var(--sp-2) 0; display: block; }
.primary-nav.is-open .nav-list .nav-cta { text-align: center; margin-top: var(--sp-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--font-sans); font-size: 16px; font-weight: 500; padding: var(--sp-3) var(--sp-6); border-radius: var(--radius); border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease; line-height: 1.4; }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--c-sandy-brown); outline-offset: 2px; }
.btn-primary { background: var(--c-forest-green); color: var(--c-white); border-color: var(--c-forest-green); }
.btn-primary:hover { background: var(--c-forest-green-dark); border-color: var(--c-forest-green-dark); }
.btn-secondary { background: var(--c-white); color: var(--c-forest-green); border-color: var(--c-border); }
.btn-secondary:hover { border-color: var(--c-forest-green); }
.btn-block { width: 100%; }
.hero { position: relative; overflow: hidden; padding: var(--sp-16) 0 var(--sp-12); background: linear-gradient(180deg, var(--c-warm-cream) 0%, var(--c-off-white) 100%); }
.hero-decor { position: absolute; inset: 0; pointer-events: none; display: flex; justify-content: space-around; align-items: flex-start; padding-top: var(--sp-8); opacity: 0.35; font-size: 28px; }
.hero-decor span { animation: float 6s ease-in-out infinite; }
.hero-decor span:nth-child(2) { animation-delay: 1s; }
.hero-decor span:nth-child(3) { animation-delay: 2s; }
.hero-decor span:nth-child(4) { animation-delay: 3s; }
.hero-decor span:nth-child(5) { animation-delay: 4s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-12); text-align: center; }
@media (min-width: 860px) { .hero-inner { flex-direction: row; text-align: left; align-items: center; } }
.hero-text { flex: 1; max-width: 620px; }
.hero-eyebrow { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-forest-green); background: var(--c-warm-beige); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-pill); margin-bottom: var(--sp-6); }
.hero-title { font-size: 36px; font-weight: 600; color: var(--c-forest-green); letter-spacing: -0.02em; margin-bottom: var(--sp-6); }
@media (min-width: 640px) { .hero-title { font-size: 48px; } }
.hero-subtitle { font-size: 18px; color: var(--c-olive-gray); line-height: 1.7; max-width: 560px; margin: 0 auto; }
@media (min-width: 860px) { .hero-subtitle { margin: 0; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); justify-content: center; }
@media (min-width: 860px) { .hero-actions { justify-content: flex-start; } }
.hero-card { position: relative; width: 220px; height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
@media (min-width: 860px) { .hero-card { width: 280px; height: 280px; } }
.hero-card-glow { position: absolute; inset: 20%; background: radial-gradient(circle, var(--c-sandy-brown) 0%, transparent 70%); border-radius: 50%; opacity: 0.3; }
.hero-card-ring { position: absolute; border-radius: 50%; border: 2px solid var(--c-forest-green); opacity: 0.15; inset: 0; }
.hero-card-ring-2 { inset: 12%; opacity: 0.25; border-color: var(--c-sandy-brown); }
.hero-card-ring-3 { inset: 24%; opacity: 0.4; border-color: var(--c-holiday-red); }
.hero-card-emoji { font-size: 64px; z-index: 1; }
@media (min-width: 860px) { .hero-card-emoji { font-size: 80px; } }
.hero-card-label { margin-top: var(--sp-3); font-size: 14px; font-weight: 600; color: var(--c-forest-green); z-index: 1; }
.section { padding: var(--sp-16) 0; }
.section-cream { background: var(--c-warm-cream); }
.section-head { max-width: 720px; margin: 0 auto var(--sp-12); text-align: center; }
.section-eyebrow { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-forest-green); margin-bottom: var(--sp-3); }
.section-title { font-size: 24px; font-weight: 600; color: var(--c-dark-olive); letter-spacing: -0.01em; margin-bottom: var(--sp-4); }
@media (min-width: 640px) { .section-title { font-size: 32px; } }
.section-desc { font-size: 17px; color: var(--c-olive-gray); line-height: 1.7; }
.steps-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 760px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }
.step-card { position: relative; background: var(--c-white); border: 1px solid var(--c-border-soft); border-radius: var(--radius-lg); padding: var(--sp-8); text-align: center; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.step-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.step-number { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--c-warm-beige); color: var(--c-forest-green); font-weight: 700; font-size: 14px; border-radius: 50%; }
.step-emoji { font-size: 48px; margin-bottom: var(--sp-4); }
.step-title { font-size: 20px; font-weight: 500; color: var(--c-dark-olive); margin-bottom: var(--sp-3); }
.step-text { font-size: 16px; color: var(--c-olive-gray); line-height: 1.65; }
.mission-inner { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); align-items: start; }
@media (min-width: 860px) { .mission-inner { grid-template-columns: 1.6fr 1fr; gap: var(--sp-12); } }
.mission-text .section-eyebrow, .mission-text .section-title, .mission-text .section-desc { text-align: left; }
.mission-text .section-desc + .section-desc { margin-top: var(--sp-4); }
.mission-values { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
.mission-values li { display: flex; align-items: center; gap: var(--sp-3); font-size: 16px; color: var(--c-dark-olive); font-weight: 500; }
.value-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-sandy-brown); flex-shrink: 0; }
.mission-callout { background: var(--c-white); border: 1px solid var(--c-border-soft); border-radius: var(--radius-lg); padding: var(--sp-8); box-shadow: var(--shadow-sm); }
.callout-emoji { font-size: 40px; margin-bottom: var(--sp-4); }
.callout-title { font-size: 20px; font-weight: 500; color: var(--c-forest-green); margin-bottom: var(--sp-3); }
.callout-text { font-size: 16px; color: var(--c-olive-gray); line-height: 1.65; }
.impact-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); margin-bottom: var(--sp-12); }
@media (min-width: 760px) { .impact-grid { grid-template-columns: repeat(3, 1fr); } }
.impact-card { background: var(--c-white); border: 1px solid var(--c-border-soft); border-radius: var(--radius-lg); padding: var(--sp-8) var(--sp-6); text-align: center; display: flex; flex-direction: column; gap: var(--sp-2); }
.impact-number { font-size: 36px; font-weight: 700; color: var(--c-forest-green); letter-spacing: -0.02em; }
@media (min-width: 640px) { .impact-number { font-size: 44px; } }
.impact-label { font-size: 15px; color: var(--c-olive-gray); line-height: 1.5; }
.impact-story { max-width: 720px; margin: 0 auto; text-align: center; background: var(--c-warm-cream); border-radius: var(--radius-lg); padding: var(--sp-8); }
.story-quote { margin: 0; font-size: 20px; font-weight: 500; color: var(--c-dark-olive); line-height: 1.6; font-style: italic; }
.story-cite { display: block; margin-top: var(--sp-4); font-size: 15px; color: var(--c-olive-gray); font-style: normal; }
.involve-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 760px) { .involve-grid { grid-template-columns: repeat(3, 1fr); } }
.involve-card { background: var(--c-white); border: 1px solid var(--c-border-soft); border-radius: var(--radius-lg); padding: var(--sp-8); display: flex; flex-direction: column; text-align: center; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.involve-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.involve-emoji { font-size: 48px; margin-bottom: var(--sp-4); }
.involve-title { font-size: 20px; font-weight: 500; color: var(--c-dark-olive); margin-bottom: var(--sp-3); }
.involve-text { font-size: 16px; color: var(--c-olive-gray); line-height: 1.65; margin-bottom: var(--sp-6); flex: 1; }
.site-footer { background: var(--c-dark-olive); color: var(--c-warm-beige); padding: var(--sp-12) 0 var(--sp-8); }
.footer-inner { display: flex; flex-direction: column; gap: var(--sp-8); }
@media (min-width: 760px) { .footer-inner { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } }
.footer-brand { display: flex; align-items: center; gap: var(--sp-3); }
.footer-logo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--c-sandy-brown); flex-shrink: 0; }
.footer-brand-text { display: flex; flex-direction: column; }
.footer-name { font-size: 18px; font-weight: 600; color: var(--c-off-white); }
.footer-tagline { font-size: 14px; color: var(--c-sandy-brown); }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); }
.footer-nav a { color: var(--c-warm-beige); font-size: 15px; text-decoration: none; transition: color 0.15s ease; }
.footer-nav a:hover { color: var(--c-sandy-brown); }
.footer-legal { max-width: 480px; border-top: 1px solid rgba(244, 164, 96, 0.2); padding-top: var(--sp-6); font-size: 14px; color: var(--c-soft-tan); line-height: 1.6; }
.footer-copy { margin-top: var(--sp-3); font-size: 13px; opacity: 0.7; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }