/* Custom Properties */
:root {
  --color-forest:      #2E5D4B;   /* primary — headings, buttons, footer */
  --color-pine:        #1E3A30;   /* dark ink — contrast bands, deep footer bg */
  --color-teal:        #2F6E6B;   /* accent — heading marks, active nav, borders */
  --color-teal-light:  #6FA9A0;   /* lighter teal — hover states, accents on dark bg */
  --color-spruce:      #35706B;   /* mid teal-green — card accent depth */
  --color-sage:        #7FB0A4;   /* light sage-green — card accent depth (distinct from teal-light) */
  --color-evergreen:   #21453A;   /* deep evergreen — card accent depth */
  /* Warm earth accents — the bark-and-soil half of the same nature palette.
     Used to break up the all-green card bands so nothing reads as one green wall. */
  --color-bronze:      #B07C3A;   /* warm golden bronze — harmonizing earth accent */
  --color-ochre:       #C1913F;   /* harvest gold / dried grass */
  --color-stone:       #F2F4F1;   /* page / section background */
  --color-stone-pale:  #FAFBFA;   /* subtle panel background */
  --color-white:       #FFFFFF;
  --color-text:        #2C2C2C;
  --color-muted:       #666666;   /* de-emphasized captions/notes */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Lora", Georgia, "Times New Roman", serif;
  --max-width: 1200px;
  --sp-xs: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 2rem;
  --sp-lg: 4rem;
  /* Hero background treatment: a quiet directional wash plus a faint grain
     texture, replacing the old animated orb motif with something static and
     institutional. */
  --hero-wash: radial-gradient(120% 140% at 100% 0%, rgba(47,110,107,0.10), transparent 60%),
               radial-gradient(120% 140% at 0% 100%, rgba(30,58,48,0.06), transparent 55%);
  --hero-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  --heading-mark-color: var(--color-teal);   /* corner-bracket tick color; overridden on dark bands */
  --card-radius: 10px;                 /* Tier 1 — emphasis cards */
  --card-shadow: 0 2px 4px rgba(30,58,48,0.1), 0 30px 54px -10px rgba(30,58,48,0.4);
  --card-shadow-hover: 0 2px 4px rgba(30,58,48,0.12), 0 40px 64px -8px rgba(30,58,48,0.45);
  --card-radius-sm: 8px;               /* Tier 2 — secondary tiles */
  --card-border: 1px solid rgba(30,58,48,0.12);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
body { font-family: var(--font); color: var(--color-text); line-height: 1.65; background: var(--color-white); }
h1, h2, h3 { line-height: 1.25; font-family: var(--font-heading); font-weight: 600; }

/* Skip nav */
.skip-nav {
  position: absolute; top: -100%; left: 1rem;
  background: var(--color-pine); color: var(--color-white);
  padding: 0.75rem 1.5rem; border-radius: 0 0 4px 4px;
  z-index: 9999; text-decoration: none; font-weight: 600;
}
.skip-nav:focus { top: 0; outline: 3px solid var(--color-teal-light); outline-offset: 3px; }

/* Layout */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--sp-md); }

/* Navigation */
.site-nav {
  background: var(--color-white); padding: var(--sp-xs) 0;
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid rgba(30,58,48,0.12);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); }
.nav-logo-svg { height: 48px; width: auto; color: var(--color-pine); }
.nav-menu { display: flex; gap: 1.5rem; align-items: center; }
.nav-menu a {
  color: var(--color-pine); text-decoration: none; font-size: 0.9rem; font-weight: 500;
  padding: 0.25rem 0; border-bottom: 2px solid transparent;
  transition: color 0.2s;
}
.nav-menu a:hover, .nav-menu a:focus { color: var(--color-teal); }
.nav-menu a:focus { outline: 2px solid var(--color-forest); outline-offset: 3px; }
.nav-menu a[aria-current="page"] { color: var(--color-teal); font-weight: 700; }
.badge {
  display: inline-block; font-size: 0.6rem; background: var(--color-forest); color: var(--color-white);
  padding: 0.1rem 0.35rem; border-radius: 3px; margin-left: 0.25rem;
  vertical-align: middle; white-space: nowrap; font-weight: 600;
}
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.nav-toggle:focus { outline: 2px solid var(--color-forest); outline-offset: 2px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--color-pine); }

/* Buttons */
.btn {
  display: inline-block; padding: 0.8rem 2rem; border-radius: 4px;
  font-weight: 600; text-decoration: none; border: 2px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer; font-size: 1rem; font-family: var(--font);
}
.btn:focus { outline: 3px solid var(--color-teal-light); outline-offset: 3px; }
.btn-primary { background: var(--color-forest); color: var(--color-white); }
.btn-primary:hover { background: var(--color-pine); }
.btn-outline { background: transparent; border-color: var(--color-white); color: var(--color-white); }
.btn-outline:hover { background: var(--color-white); color: var(--color-pine); }
.hero .btn-outline, .page-hero .btn-outline, .about-strip .btn-outline { border-color: var(--color-pine); color: var(--color-pine); }
.hero .btn-outline:hover, .page-hero .btn-outline:hover, .about-strip .btn-outline:hover { background: var(--color-pine); color: var(--color-white); }

/* Shared section utilities */
/* Heading frame — corner brackets around hero titles, evoking a
   survey/blueprint framing mark. `display: table` shrink-wraps to the
   (possibly multi-line) heading text and centers via margin-inline,
   independent of how the parent aligns text. */
.hero h1,
.page-hero h1 {
  display: table;
  margin-inline: auto;
  padding: 0.35em 1.2em;
  background:
    linear-gradient(var(--heading-mark-color), var(--heading-mark-color)) top    left  / 10px 2px no-repeat,
    linear-gradient(var(--heading-mark-color), var(--heading-mark-color)) top    left  / 2px 10px no-repeat,
    linear-gradient(var(--heading-mark-color), var(--heading-mark-color)) top    right / 10px 2px no-repeat,
    linear-gradient(var(--heading-mark-color), var(--heading-mark-color)) top    right / 2px 10px no-repeat,
    linear-gradient(var(--heading-mark-color), var(--heading-mark-color)) bottom left  / 10px 2px no-repeat,
    linear-gradient(var(--heading-mark-color), var(--heading-mark-color)) bottom left  / 2px 10px no-repeat,
    linear-gradient(var(--heading-mark-color), var(--heading-mark-color)) bottom right / 10px 2px no-repeat,
    linear-gradient(var(--heading-mark-color), var(--heading-mark-color)) bottom right / 2px 10px no-repeat;
}
.section-heading {
  text-align: center; color: var(--color-pine);
  font-size: clamp(1.5rem, 2.5vw, 1.75rem); margin-bottom: var(--sp-md);
}

/* Home hero */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-stone);
  background-image: var(--hero-wash), var(--hero-grain);
  color: var(--color-text);
  padding: var(--sp-lg) 0;
  text-align: center;
  border-bottom: 1px solid rgba(30,58,48,0.1);
}
.hero > .container { position: relative; z-index: 1; }
.hero-logo { margin: 0 auto var(--sp-md); max-width: 260px; }
.hero h1 { font-size: clamp(1.75rem, 4vw, 3rem); margin-bottom: var(--sp-sm); font-weight: 600; color: var(--color-pine); }
.hero p { font-size: 1.15rem; max-width: 580px; margin: 0 auto var(--sp-md); opacity: 0.85; }
.hero-ctas { display: flex; gap: var(--sp-sm); justify-content: center; flex-wrap: wrap; }

/* Partner logos — only .logo-img survives, reused by .support-category tiles. */
.logo-img {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-sm);
}
.logo-img img { height: 80px; width: auto; max-width: 280px; object-fit: contain; }

/* Page hero */
.page-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-stone);
  background-image: var(--hero-wash), var(--hero-grain);
  color: var(--color-text);
  padding: 2.5rem 0;
  text-align: center;
  border-bottom: 1px solid rgba(30,58,48,0.1);
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: var(--sp-xs); color: var(--color-pine); font-weight: 600; }
.page-hero p { opacity: 0.85; max-width: 560px; margin: 0 auto; font-size: 1.1rem; }

/* Mission sections */
.mission-section { padding: var(--sp-lg) 0; }
.mission-section:nth-of-type(even) { background: var(--color-stone); }
.mission-section h2 { color: var(--color-pine); font-size: 1.5rem; margin-bottom: var(--sp-sm); border-left: 4px solid var(--color-teal); padding-left: 0.75rem; }
.mission-section p { margin-bottom: var(--sp-sm); max-width: 740px; }
.mission-img { padding: var(--sp-md) 0; }
.mission-img img { border-radius: 6px; width: 100%; }

/* Project gallery (Skyway 120 renderings, home page) */
.project-gallery { padding: var(--sp-lg) 0; background: var(--color-stone); }
.project-gallery-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-md); margin-top: var(--sp-md);
}
.project-gallery-grid figure { margin: 0; }
.project-gallery-grid figure img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; display: block;
}
.project-gallery-grid .figure-scheme img {
  object-fit: contain; background: #fff;
}
.project-gallery-grid figcaption { font-size: 0.85rem; font-style: italic; color: #555; margin-top: 0.5rem; line-height: 1.4; }
@media (max-width: 600px) { .project-gallery-grid { grid-template-columns: 1fr; } }

/* Team grid */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); margin-top: var(--sp-md); max-width: 480px; }
.team-card { text-align: center; }
.team-photo { border-radius: 50%; object-fit: cover; object-position: center 15%; margin: 0 auto var(--sp-sm); width: 120px; height: 120px; }
.team-name { font-size: 1rem; color: var(--color-pine); margin-bottom: 0.25rem; }
.team-title { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-teal); }

/* Contact */
.contact-info { font-style: normal; }
.contact-info p { margin-bottom: var(--sp-sm); }
.contact-info a:not(.btn) { color: var(--color-forest); text-decoration: none; }
.contact-info a:not(.btn):hover, .contact-info a:not(.btn):focus { text-decoration: underline; }
.contact-info a:not(.btn):focus { outline: 2px solid var(--color-forest); outline-offset: 2px; }
.info-label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-teal); margin-bottom: 0.15rem; }

/* Stub pages */
.stub-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--sp-lg) var(--sp-md); }
.stub-page h1 { color: var(--color-pine); font-size: 2rem; margin-bottom: var(--sp-sm); border-left: 4px solid var(--color-teal); padding-left: 0.75rem; }
.stub-page p { max-width: 480px; margin-bottom: var(--sp-md); }

/* Footer */
main { padding-bottom: 0; }
footer {
  background: var(--color-pine); color: rgba(255,255,255,0.75);
  padding: var(--sp-lg) 0 var(--sp-md); font-size: 0.875rem;
  position: relative;
}
footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-teal-light) 20%,
    var(--color-teal) 50%,
    var(--color-teal-light) 80%,
    transparent
  );
}
.footer-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; }
.footer-inner address { text-align: right; font-style: normal; }
.footer-brand { display: flex; flex-direction: column; gap: 0.3rem; }
.footer-tagline { font-size: 0.85rem; color: rgba(255,255,255,0.6); max-width: 320px; }
footer a { color: var(--color-teal-light); text-decoration: none; }
footer a:hover, footer a:focus { text-decoration: underline; }
footer a:focus { outline: 2px solid var(--color-teal-light); outline-offset: 2px; }

/* Nav collapse — 7 links + logo need more room than the general mobile
   breakpoint below; collapsing later avoids overflow at "half screen"
   widths (~900-1100px) where the full nav no longer fits. */
@media (max-width: 1024px) {
  .nav-toggle { display: flex; }
  .site-nav { position: relative; }
  .nav-menu {
    display: none; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--color-stone-pale); padding: var(--sp-sm) var(--sp-md);
    gap: var(--sp-sm); border-top: 1px solid rgba(30,28,26,0.12);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  .nav-menu.is-open { display: flex; }
}

/* Mobile */
@media (max-width: 768px) {
  .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: var(--sp-sm); }
  .footer-inner address { text-align: center; }
}

@media (max-width: 480px) {
  .logo-img img { height: 60px; max-width: 200px; }
}

/* Project Support & Engagement categories */
.support-disclaimer {
  font-size: 0.8rem;
  color: #888;
  font-style: italic;
  max-width: 60ch;
  margin: 0 auto var(--sp-lg);
  text-align: center;
  line-height: 1.5;
}

.support-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
}

.support-category {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-md);
  border: var(--card-border);
  border-radius: var(--card-radius-sm);
  background: var(--color-stone);
}

.support-category-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin: 0 0 var(--sp-sm);
}

.support-category .logo-img {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.support-category .logo-img img {
  max-height: 52px;
  max-width: 140px;
  object-fit: contain;
}

.support-category-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-pine);
  margin: 0;
}

.support-category-note {
  font-size: 0.75rem;
  color: var(--color-text);
  opacity: 0.65;
  margin: var(--sp-xs) 0 0;
}

/* Featured project section */
.featured-project { background: var(--color-stone); padding: var(--sp-lg) 0; }
/* Section card — flat banded card used for featured projects and eyebrow-labeled sections */
.section-card {
  background: var(--color-white);
  border: var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.section-card-band {
  height: 84px;
  display: flex;
  align-items: flex-start;
  padding: var(--sp-sm) var(--sp-md);
  background: linear-gradient(120deg, var(--band, var(--color-forest)) 55%, color-mix(in srgb, var(--band, var(--color-forest)) 70%, black) 140%);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 0 100%);
}
.section-card-eyebrow {
  color: rgba(255,255,255,0.85); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.section-card-content { padding: var(--sp-md); }
.section-card-title { color: var(--color-pine); font-size: clamp(1.35rem, 2.5vw, 1.75rem); margin-bottom: var(--sp-xs); }
.section-card-content p { margin-bottom: var(--sp-sm); }
.section-card-facts { list-style: disc; padding-left: var(--sp-md); margin-bottom: var(--sp-md); line-height: 2; }

/* About strip — a plain, lightweight org intro (no card), sits above the
   featured project on the home page. */
.about-strip { background: var(--color-white); color: var(--color-text); padding: var(--sp-lg) 0; text-align: center; }
.eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-teal); margin-bottom: var(--sp-xs); }
.about-strip h2 { color: var(--color-pine); font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--sp-sm); }
/* Lightweight contextual link — used where a full button would echo another CTA. */
.link-arrow { display: inline-block; color: var(--color-teal); font-weight: 600; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }
.about-strip-prose { max-width: 720px; margin: 0 auto var(--sp-md); opacity: 0.9; }
.about-strip-prose p { margin-bottom: var(--sp-sm); }
.about-strip-ctas { display: flex; gap: var(--sp-sm); justify-content: center; flex-wrap: wrap; }

/* Values grid */
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-md); margin-top: var(--sp-md); }
/* Tier 1 emphasis-card base — shared by value & platform grids (identical box). */
.value-card, .platform-card {
  background: var(--color-white); border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.3s ease;
}
.value-card:hover, .platform-card:hover { box-shadow: var(--card-shadow-hover), inset 0 -3px 0 0 var(--band, var(--color-forest)); }
/* The icon is always a deep, band-tinted near-black — the same hue family as
   its band, only far darker. A warm-neutral deep anchor harmonizes with any band
   color, warm or green (no olive cast on the bronze/ochre bands), and a white glyph
   always reads against it. The alternating warm/green bands supply the variety. */
.value-card, .platform-card { --icon: color-mix(in srgb, var(--band) 72%, #1c1512); }
/* After the About dial-back, .value-card is only the 3 Mission & Vision cards. */
.value-card:nth-child(1) { --band: var(--color-forest); }  /* Mission   — green */
.value-card:nth-child(2) { --band: var(--color-bronze); }  /* Vision    — warm  */
.value-card:nth-child(3) { --band: var(--color-teal); }    /* Community — green */
.card-band {
  height: 64px;
  background: linear-gradient(135deg, var(--band, var(--color-forest)) 60%, color-mix(in srgb, var(--band, var(--color-forest)) 70%, black) 140%);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
}
.value-icon, .platform-icon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--icon, var(--color-teal));
  margin: -23px 0 0 1.25rem;
  /* Just a soft drop shadow lifts the icon off the band — no white ring needed,
     since the deep icon tone already harmonizes with every band color. */
  box-shadow: 0 6px 14px rgba(30,58,48,0.25);
  position: relative;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.value-card:hover .value-icon, .platform-card:hover .platform-icon {
  transform: translateY(-5px) rotate(-4deg);
  box-shadow: 0 12px 22px rgba(30,58,48,0.32);
}
.value-icon svg, .platform-icon svg { width: 22px; height: 22px; }
.card-body { padding: 0.85rem 1.25rem 1.35rem; }
.value-card h3 { color: var(--color-pine); font-size: 1rem; margin-bottom: var(--sp-xs); }

/* Mission & Vision — reuses the value-card component so the two sections read
   as one family. Only difference: fewer, wider cards with slightly larger
   statement type, since this is the page's core statement. */
.values-grid--statement { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.values-grid--statement .card-body p { font-size: 1.0625rem; }

/* Value tiles (Tier 2) — a lighter treatment for the "Our Values" list so it no
   longer reads as another wall of banded cards. Flat bordered tiles, a small
   inline colored icon, no diagonal band, no floating chip. The alternating
   green/warm icon colors carry just enough life without competing with the
   banded Tier-1 cards. */
.value-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-sm); margin-top: var(--sp-md); }
.value-tile {
  display: flex; gap: var(--sp-sm); align-items: flex-start;
  padding: var(--sp-md);
  background: var(--color-white);
  border: var(--card-border);
  border-radius: var(--card-radius-sm);
}
.value-tile-icon {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: color-mix(in srgb, var(--tile, var(--color-forest)) 72%, #1c1512);
}
.value-tile-icon svg { width: 20px; height: 20px; }
.value-tile h3 { color: var(--color-pine); font-size: 1rem; margin-bottom: 0.15rem; }
.value-tile p { font-size: 0.9375rem; margin: 0; }
.value-tile:nth-child(1) { --tile: var(--color-forest); }   /* green */
.value-tile:nth-child(2) { --tile: var(--color-bronze); }   /* warm  */
.value-tile:nth-child(3) { --tile: var(--color-teal); }     /* green */
.value-tile:nth-child(4) { --tile: var(--color-ochre); }    /* warm  */
.value-tile:nth-child(5) { --tile: var(--color-spruce); }   /* green */
.value-tile:nth-child(6) { --tile: var(--color-bronze); }   /* warm  */

/* Utility */
.bg-stone { background: var(--color-stone); }
.mt-md { margin-top: var(--sp-md); }
.mt-lg { margin-top: var(--sp-lg); }
.governance-list { margin-top: var(--sp-md); }
.governance-list dt {
  font-family: var(--font-heading); font-weight: 600;
  color: var(--color-pine); font-size: 1.0625rem;
  padding-left: var(--sp-sm);
  border-left: 3px solid var(--color-teal);
}
.governance-list dd { margin: 0.15rem 0 var(--sp-md) calc(var(--sp-sm) + 3px); max-width: 70ch; }
.governance-list dd:last-child { margin-bottom: 0; }

/* Placeholder team cards */
.team-card--placeholder { opacity: 0.7; }
.team-photo-placeholder { width: 120px; height: 120px; border-radius: 50%; background: var(--color-stone); border: 2px dashed var(--color-forest); margin: 0 auto var(--sp-sm); }

/* Platform grid */
.platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--sp-md); margin-top: var(--sp-md); }
/* Base box + hover shared with .value-card above; only the color table differs. */
.platform-card:nth-child(1) { --band: var(--color-spruce); }  /* green */
.platform-card:nth-child(2) { --band: var(--color-ochre); }   /* warm  */
.platform-card:nth-child(3) { --band: var(--color-forest); }  /* green */
.platform-card:nth-child(4) { --band: var(--color-bronze); }  /* warm  */
.platform-card:nth-child(5) { --band: var(--color-teal); }    /* green */
.platform-card h3 { color: var(--color-pine); font-size: 1rem; margin-bottom: var(--sp-xs); }

/* Milestones */
.milestone-list { display: flex; flex-direction: column; gap: var(--sp-md); margin-top: var(--sp-md); }
.milestone-item { display: flex; gap: var(--sp-sm); align-items: flex-start; }
.milestone-marker { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--color-stone); border: 3px solid var(--color-forest); margin-top: 4px; }
.milestone-item--complete .milestone-marker { background: var(--color-forest); border-color: var(--color-forest); }
.milestone-item--active .milestone-marker { background: var(--color-teal); border-color: var(--color-teal); }
.milestone-content h3 { font-size: 1rem; color: var(--color-pine); margin-bottom: 0.25rem; }

/* Archive */
.archive-list { display: flex; flex-direction: column; gap: var(--sp-sm); margin-top: var(--sp-md); }
.archive-item { background: var(--color-white); border-radius: var(--card-radius-sm); padding: var(--sp-sm) var(--sp-md); border-left: 3px solid var(--color-teal); opacity: 0.8; }
.archive-label { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-teal); background: #e9f1f0; padding: 0.15rem 0.5rem; border-radius: 3px; margin-bottom: 0.4rem; }

/* Interest list */
.interest-list { list-style: none; margin-top: var(--sp-sm); display: flex; flex-direction: column; gap: 0.5rem; }
.interest-list a { color: var(--color-forest); font-weight: 500; }
.interest-list a:hover { color: var(--color-teal); }

/* Tax footnote */
.tax-footnote { margin-top: var(--sp-lg); color: var(--color-teal); font-style: italic; }

/* SCHI-specific */
.footer-wordmark {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--color-white);
  letter-spacing: 0.03em;
}

.hero-lead {
  font-size: 1.125rem;
  max-width: 680px;
  margin: 0 auto var(--sp-md);
  opacity: 0.9;
}

.hero-ctas {
  display: flex;
  gap: var(--sp-sm);
  justify-content: center;
  flex-wrap: wrap;
}