@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&family=Source+Sans+3:wght@400;600;700&display=swap');

:root {
  --forest: #123b2a;
  --olive: #123b2a;
  --moss: #123b2a;
  --sky: #f7f3e8;
  --sand: #f7f3e8;
  --cream: #ffffff;
  --ink: #123b2a;
  --slate: #123b2a;
  --line: rgba(38, 61, 37, .18);
  --amber: #b78628;
  --coral: #b78628;
  --serif: 'Roboto Slab', Georgia, serif;
  --sans: 'Source Sans 3', Arial, sans-serif;
  --mono: 'Source Sans 3', Arial, sans-serif;
  --shadow: 0 22px 50px rgba(25, 44, 26, .12);
  --radius: 1.15rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--sand); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--olive); }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

.skip-link { background: var(--amber); color: var(--ink); left: 1rem; padding: .65rem 1rem; position: absolute; top: -5rem; z-index: 10; }
.skip-link:focus { top: 1rem; }

.site-header { background: rgba(247, 243, 232, .96); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px); }
.nav-shell { align-items: center; display: flex; justify-content: space-between; margin: 0 auto; max-width: 1280px; min-height: 156px; padding: .6rem 5vw; }
.brand { display: inline-flex; text-decoration: none; }
.brand picture { display: block; }
.brand img { display: block; height: auto; width: 390px; }
.site-nav { align-items: center; display: flex; gap: 1.2rem; }
.site-nav a { color: var(--ink); font-size: .94rem; font-weight: 700; text-decoration: none; }
.site-nav a:not(.nav-cta):hover, .site-nav a[aria-current='page'] { color: var(--olive); }
.site-nav .nav-cta { color: white; }
.nav-cta, .button { align-items: center; background: var(--forest); border: 1px solid var(--forest); color: white; display: inline-flex; font-weight: 700; gap: .55rem; justify-content: center; min-height: 48px; padding: .7rem 1rem; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.nav-cta { min-height: 38px; padding: .45rem .75rem; }
.button:hover, .nav-cta:hover { background: var(--olive); color: white; transform: translateY(-2px); }
.button.secondary { background: transparent; border-color: rgba(247,243,232,.72); color: white; }
.button.secondary:hover { background: rgba(247,243,232,.13); }
.button.earth { background: transparent; border-color: var(--forest); color: var(--forest); }
.button.earth:hover { background: var(--forest); color: white; }
.menu-button { background: transparent; border: 0; display: none; font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; padding: .7rem; }

.hero { background: var(--forest); color: white; min-height: min(760px, calc(100vh - 78px)); overflow: hidden; position: relative; }
.hero::after { background: linear-gradient(90deg, rgba(18, 59, 42, .93) 0%, rgba(18, 59, 42, .72) 43%, rgba(18,59,42,.1) 80%); content: ''; inset: 0; position: absolute; }
.hero img { height: 100%; inset: 0; object-fit: cover; object-position: center; position: absolute; width: 100%; }
.hero-content { max-width: 1280px; margin: 0 auto; min-height: inherit; padding: 8rem 5vw 5rem; position: relative; z-index: 1; }
.hero-copy { max-width: 690px; }
.eyebrow { color: var(--cream); font-family: var(--mono); font-size: .76rem; font-weight: 500; letter-spacing: .12em; margin: 0 0 1.2rem; text-transform: uppercase; }
.eyebrow.dark { color: var(--olive); }
h1, h2, h3 { letter-spacing: -.035em; line-height: 1.05; }
h1 { font-family: var(--serif); font-size: clamp(3.25rem, 7vw, 6.45rem); margin: 0; max-width: 12ch; }
h1 em { color: var(--sky); font-style: normal; }
h2 { font-family: var(--serif); font-size: clamp(2.1rem, 4vw, 3.9rem); margin: 0; max-width: 18ch; }
h3 { font-size: 1.25rem; margin: 0 0 .65rem; }
.hero p { font-size: clamp(1.1rem, 2vw, 1.35rem); margin: 1.65rem 0 2rem; max-width: 57ch; }
.button-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-note { border-left: 1px solid var(--sky); color: #f7f3e8; font-size: .92rem; margin-top: 4.5rem; max-width: 57ch; padding-left: 1rem; }
.vision-quote { border-left: 3px solid var(--amber); font-family: var(--serif); font-size: 1.28rem; line-height: 1.4; margin: 1.7rem 0; padding: .35rem 0 .35rem 1rem; }
.vision-quote span { display: block; font-family: var(--sans); font-size: .82rem; font-weight: 700; letter-spacing: .04em; margin-top: .5rem; text-transform: uppercase; }

.section { padding: 6.7rem 5vw; }
.section-shell { margin: 0 auto; max-width: 1180px; }
.section-intro { align-items: end; display: flex; gap: 2rem; justify-content: space-between; margin-bottom: 2.8rem; }
.section-intro > p { color: var(--slate); margin: 0; max-width: 48ch; }
.paper { background: var(--cream); }
.dark-section { background: var(--forest); color: white; }
.dark-section h2 { color: white; }
.dark-section .eyebrow { color: var(--sky); }
.dark-section p { color: #f7f3e8; }

.map-band { background: var(--sky); overflow: hidden; padding: 1rem 5vw; position: relative; }
.map-band::before, .map-band::after { border: 1px solid rgba(38,61,37,.28); border-radius: 50%; content: ''; height: 15rem; position: absolute; right: 6%; top: -5rem; width: 31rem; }
.map-band::after { left: 8%; right: auto; top: -11rem; }
.map-band p { font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; margin: .1rem auto; max-width: 1180px; position: relative; text-transform: uppercase; }

.split { align-items: center; display: grid; gap: clamp(2rem, 7vw, 7rem); grid-template-columns: 1fr 1fr; }
.image-frame { overflow: hidden; position: relative; }
.image-frame::before { border: 1px solid rgba(247,243,232,.72); content: ''; inset: 13px; pointer-events: none; position: absolute; z-index: 1; }
.image-frame img { aspect-ratio: 4 / 3; height: 100%; object-fit: cover; width: 100%; }
.image-caption { color: var(--slate); font-family: var(--mono); font-size: .72rem; letter-spacing: .07em; margin: .85rem 0 0; text-transform: uppercase; }

.program-grid { display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); background: var(--line); border: 1px solid var(--line); }
.program-card { background: var(--cream); min-height: 300px; padding: 2rem 1.7rem; }
.program-card .number { color: var(--olive); font-family: var(--mono); font-size: .8rem; letter-spacing: .07em; }
.program-card p { color: var(--slate); font-size: .96rem; }
.text-link { color: var(--olive); font-weight: 700; }

.values-list { border-top: 1px solid rgba(247,243,232,.3); list-style: none; margin: 3rem 0 0; max-width: 950px; padding: 0; }
.values-list li { align-items: start; border-bottom: 1px solid rgba(247,243,232,.3); display: grid; gap: 2rem; grid-template-columns: 75px 1fr; padding: 1.4rem 0; }
.values-list span { color: var(--sky); font-family: var(--mono); font-size: .8rem; }
.values-list strong { display: block; font-size: 1.15rem; margin-bottom: .25rem; }
.values-list p { margin: 0; }

.impact-strip { display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); background: rgba(247,243,232,.24); }
.impact-strip article { background: var(--forest); padding: 1.8rem 1.35rem; }
.impact-strip strong { color: var(--amber); display: block; font-family: var(--serif); font-size: 2.3rem; line-height: 1; }
.impact-strip span { color: #f7f3e8; display: block; font-size: .92rem; margin-top: .6rem; }

.page-hero { background: var(--forest); color: white; padding: 6.5rem 5vw 5.3rem; position: relative; }
.page-hero::after { background-image: radial-gradient(rgba(168,202,211,.36) 1px, transparent 1px); background-size: 16px 16px; content: ''; inset: 0; opacity: .22; position: absolute; }
.page-hero > div { margin: 0 auto; max-width: 1180px; position: relative; z-index: 1; }
.page-hero h1 { max-width: 12ch; }
.page-hero p:not(.eyebrow) { color: #f7f3e8; font-size: 1.15rem; max-width: 55ch; }
.breadcrumbs { color: #f7f3e8; font-size: .85rem; margin: 0 0 2.2rem; }
.breadcrumbs a { color: white; }

.timeline { border-left: 1px solid var(--olive); margin: 2.5rem 0 0 .55rem; padding: 0 0 0 2.4rem; }
.timeline article { padding: 0 0 2rem; position: relative; }
.timeline article::before { background: var(--amber); border: 4px solid var(--sand); border-radius: 50%; content: ''; height: .9rem; left: calc(-2.4rem - .48rem); position: absolute; top: .35rem; width: .9rem; }
.timeline h3 { margin-bottom: .25rem; }
.timeline p { color: var(--slate); margin: 0; max-width: 60ch; }

.criteria-grid, .two-column { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); }
.criteria-card { border-top: 5px solid var(--olive); padding: 1.6rem 0 0; }
.criteria-card p { color: var(--slate); margin-bottom: 0; }
.notice { background: #f7f3e8; border-left: 4px solid var(--amber); margin-top: 3rem; padding: 1.3rem 1.4rem; }
.notice p { margin: 0; }
.notice strong { display: block; margin-bottom: .25rem; }

.data-grid { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 2.5rem; }
.data-card { border-bottom: 1px solid var(--line); padding: 1.6rem 1.2rem 1.6rem 0; }
.data-card:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 1.5rem; }
.data-card:nth-child(even) { padding-left: 1.5rem; }
.data-card .metric { color: var(--olive); font-family: var(--mono); font-size: .77rem; letter-spacing: .08em; text-transform: uppercase; }
.data-card p { color: var(--slate); font-size: .94rem; margin-bottom: 0; }

.form-panel { background: var(--cream); box-shadow: var(--shadow); padding: clamp(1.5rem, 4vw, 3.4rem); }
.form-panel h2 { font-size: clamp(2rem, 3.2vw, 3rem); }
.field-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin: 1.7rem 0; }
.field.full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: .9rem; font-weight: 700; }
.field input, .field select, .field textarea { background: white; border: 1px solid rgba(38,61,37,.32); border-radius: 0; color: var(--ink); min-height: 48px; padding: .7rem; }
.field textarea { min-height: 115px; resize: vertical; }
.check { align-items: start; display: flex; gap: .65rem; margin: 1rem 0 1.5rem; }
.check input { margin-top: .34rem; }
.form-help { color: var(--slate); font-size: .85rem; }
.form-status { background: #f7f3e8; border-left: 3px solid var(--olive); margin-top: 1.2rem; padding: .9rem; }

.path-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(3, 1fr); }
.path-card { background: var(--cream); border: 1px solid var(--line); display: flex; flex-direction: column; min-height: 280px; padding: 1.8rem; }
.path-card .symbol { color: var(--moss); font-family: var(--serif); font-size: 2.5rem; line-height: 1; margin-bottom: 1.7rem; }
.path-card p { color: var(--slate); flex: 1; }

.faq-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); padding: 1.2rem 0; }
summary { cursor: pointer; font-size: 1.1rem; font-weight: 700; padding-right: 2rem; position: relative; }
summary::marker { color: var(--olive); }
details p { color: var(--slate); max-width: 70ch; }
.resource-list { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.resource-link { background: var(--cream); border: 1px solid var(--line); min-height: 155px; padding: 1.3rem; text-decoration: none; }
.resource-link:hover { border-color: var(--olive); transform: translateY(-2px); }
.resource-link span { color: var(--olive); display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .07em; margin-bottom: .7rem; text-transform: uppercase; }
.resource-link strong { display: block; line-height: 1.2; }
.resource-link small { color: var(--slate); display: block; margin-top: .65rem; }

.site-footer { background: #123b2a; color: #f7f3e8; padding: 3.7rem 5vw 2rem; }
.footer-grid { display: grid; gap: 3rem; grid-template-columns: 1.8fr 1fr 1fr; margin: 0 auto; max-width: 1180px; }
.footer-brand picture { display: block; }
.footer-brand img { height: auto; max-width: 360px; width: 100%; }
.footer-grid p { color: #f7f3e8; font-size: .92rem; max-width: 39ch; }
.footer-links { display: flex; flex-direction: column; gap: .45rem; }
.footer-links a { color: #f7f3e8; font-size: .9rem; }
.footer-meta { border-top: 1px solid rgba(255,255,255,.2); color: #f7f3e8; font-size: .77rem; margin: 2.7rem auto 0; max-width: 1180px; padding-top: 1.2rem; }

@media (max-width: 940px) {
  .nav-shell { align-items: flex-start; flex-wrap: wrap; }
  .site-nav { align-items: center; background: transparent; box-shadow: none; display: flex; flex-direction: row; flex-wrap: wrap; gap: .15rem; justify-content: flex-end; padding: .5rem 0 0; position: static; width: 100%; }
  .site-nav a { border-bottom: 0; padding: .45rem .55rem; }
  .site-nav .nav-cta { margin: 0; padding: .5rem .75rem; }
  .js .nav-shell { align-items: center; flex-wrap: nowrap; }
  .js .site-nav { background: var(--sand); border-bottom: 1px solid var(--line); box-shadow: 0 12px 20px rgba(0,0,0,.07); display: none; flex-direction: column; align-items: stretch; gap: 0; left: 0; padding: .7rem 5vw 1.2rem; position: absolute; right: 0; top: 156px; width: auto; }
  .js .site-nav.is-open { display: flex; }
  .js .site-nav a { border-bottom: 1px solid var(--line); padding: .75rem 0; }
  .js .site-nav .nav-cta { border: 0; margin-top: .9rem; padding: .7rem 1rem; text-align: center; }
  .js .menu-button { display: inline-flex; }
  html:not(.js) [data-preview-form] { display: none; }
  .program-grid, .impact-strip { grid-template-columns: repeat(2, 1fr); }
  .path-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav-shell { min-height: 92px; }
  .js .site-nav { top: 92px; }
  .brand img { height: auto; width: 210px; }
  .hero { min-height: 635px; }
  .hero::after { background: linear-gradient(0deg, rgba(22,38,21,.93) 5%, rgba(24,42,23,.72) 70%, rgba(24,42,23,.35) 100%); }
  .hero img { object-position: 62% center; }
  .hero-content { display: flex; flex-direction: column; justify-content: end; padding-bottom: 3.6rem; padding-top: 4rem; }
  .hero-note { margin-top: 2.7rem; }
  .section { padding: 4.5rem 5vw; }
  .section-intro, .split { display: grid; grid-template-columns: 1fr; }
  .section-intro { gap: 1.2rem; }
  .program-grid, .impact-strip, .criteria-grid, .two-column, .data-grid, .field-grid, .resource-list, .footer-grid { grid-template-columns: 1fr; }
  .program-card { min-height: auto; }
  .impact-strip article { padding: 1.45rem; }
  .data-card:nth-child(odd), .data-card:nth-child(even) { border-right: 0; padding-left: 0; padding-right: 0; }
  .data-card:last-child { border-bottom: 0; }
  .page-hero { padding: 4.5rem 5vw 3.7rem; }
  .values-list li { gap: 1rem; grid-template-columns: 43px 1fr; }
  .timeline { padding-left: 1.8rem; }
  .timeline article::before { left: calc(-1.8rem - .48rem); }
}
