@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Libre+Caslon+Text:wght@400;700&display=swap");

:root {
  --green: #003c2a;
  --green-deep: #002f21;
  --green-soft: #2f6450;
  --cream: #f7efe4;
  --cream-deep: #eadfce;
  --sand: #dfc69d;
  --clay: #9a392f;
  --sage: #849f8c;
  --ink: #17341d;
  --line-light: rgba(247, 239, 228, .2);
  --line-dark: rgba(23, 52, 29, .18);
  --sans: "Hanken Grotesk", Arial, sans-serif;
  --serif: "Libre Caslon Text", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--green-deep); color: var(--cream); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
button, input, select, textarea { font: inherit; }
::selection { background: var(--sand); color: var(--green); }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 14px; background: var(--cream); color: var(--green); font-weight: 800; transform: translateY(-150%); transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }
.green-page { overflow: hidden; background: var(--green); }
.page-width { width: min(1280px, calc(100% - 96px)); margin-inline: auto; }

.site-header { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 34px; width: min(1440px, calc(100% - 72px)); min-height: 96px; margin: 0 auto; color: var(--cream); }
.header-note { font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.header-note::before { content: "◆"; margin-right: 10px; color: var(--sand); font-size: 7px; }
.desktop-nav { display: flex; align-items: center; gap: 25px; }
.desktop-nav a { position: relative; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.desktop-nav a::after { position: absolute; right: 0; bottom: -7px; left: 0; height: 1px; background: var(--sand); content: ""; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.desktop-nav a:hover::after { transform: scaleX(1); }
.brand { display: block; width: 174px; height: 58px; overflow: hidden; background: var(--cream); clip-path: polygon(1% 7%, 14% 3%, 29% 6%, 44% 2%, 61% 5%, 77% 3%, 99% 6%, 98% 92%, 82% 96%, 67% 93%, 49% 97%, 31% 94%, 14% 97%, 2% 93%); }
.brand img { object-fit: contain; }
.desktop-nav--right { justify-content: flex-end; }
.header-cta { justify-self: end; padding: 11px 17px; background: var(--cream); color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transition: background .2s ease; }
.header-cta:hover { background: var(--sand); }
.mobile-nav { display: none; }

.hero { min-height: 920px; padding-bottom: 70px; }
.hero-stage { position: relative; width: min(1240px, calc(100% - 120px)); height: 670px; margin: 24px auto 0; isolation: isolate; }
.hero-stage img { filter: saturate(.86) contrast(1.06); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 30, 21, .92) 0%, rgba(0, 30, 21, .48) 44%, rgba(0, 30, 21, .1) 68%, rgba(0, 30, 21, .38) 100%), linear-gradient(0deg, rgba(0, 30, 21, .46), transparent 48%); }
.hero-title { position: absolute; z-index: 2; top: 50%; left: 9%; max-width: 650px; transform: translateY(-49%); }
.hero-title h1 { margin: 0; font-size: clamp(44px, 5.1vw, 76px); font-weight: 800; letter-spacing: -.045em; line-height: .88; text-transform: uppercase; }
.hero-actions { display: flex; gap: 10px; margin-top: 34px; }
.kicker { margin: 0 0 12px; color: var(--clay); font-size: 9px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.kicker--sand { color: var(--sand); }
.btn { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; border: 1px solid transparent; padding: 10px 18px; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transition: transform .2s ease, background .2s ease, color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn--clay { background: var(--clay); color: white; }
.btn--light { background: var(--cream); color: var(--green); }
.btn--outline { border-color: rgba(247,239,228,.58); color: var(--cream); }
.btn--green { background: var(--green); color: var(--cream); }
.btn--sage { background: var(--sage); color: white; }
.hero-caption { position: absolute; z-index: 2; right: 6%; bottom: 12%; display: flex; align-items: center; gap: 15px; }
.hero-caption span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(247,239,228,.6); border-radius: 50%; font-size: 9px; }
.hero-caption p { margin: 0; font-size: 10px; line-height: 1.3; }
.hero-foot { display: flex; width: min(1240px, calc(100% - 120px)); justify-content: space-between; margin: 18px auto 0; color: rgba(247,239,228,.62); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

.cut-image { overflow: hidden; clip-path: polygon(1% 6%, 7% 4%, 13% 5.5%, 20% 3%, 29% 4.8%, 38% 2.5%, 48% 4.5%, 57% 2.8%, 67% 5%, 77% 3.2%, 86% 5.4%, 94% 3%, 99% 6%, 98% 18%, 100% 30%, 98.6% 43%, 100% 57%, 98% 71%, 99.2% 85%, 97% 96%, 89% 97.5%, 81% 96%, 71% 98.5%, 61% 96.3%, 51% 98%, 42% 96%, 31% 98.2%, 22% 96%, 12% 98.5%, 2% 96%, 1.5% 84%, 0 72%, 1.4% 58%, 0 45%, 1.2% 32%, 0 18%); }
.cut-image--small { clip-path: polygon(2% 8%, 14% 4%, 27% 7%, 39% 3%, 55% 6%, 71% 3%, 86% 6%, 98% 4%, 97% 19%, 100% 35%, 98% 51%, 100% 67%, 97% 84%, 99% 96%, 84% 98%, 70% 95%, 54% 98%, 38% 96%, 23% 99%, 3% 96%, 5% 80%, 2% 64%, 4% 48%, 1% 31%); }
.cut-image--card { clip-path: polygon(1% 8%, 13% 5%, 26% 7%, 39% 3%, 53% 6%, 67% 4%, 82% 7%, 99% 4%, 97% 22%, 100% 40%, 98% 58%, 100% 77%, 97% 97%, 82% 95%, 67% 99%, 52% 96%, 36% 98%, 19% 95%, 2% 98%, 4% 79%, 1% 61%, 3% 43%, 0 24%); }
.cut-round { overflow: hidden; clip-path: polygon(45% 1%, 58% 3%, 70% 7%, 82% 15%, 91% 26%, 97% 39%, 98% 52%, 95% 65%, 90% 78%, 80% 89%, 68% 96%, 54% 99%, 40% 97%, 27% 93%, 16% 84%, 8% 72%, 3% 59%, 2% 45%, 5% 31%, 12% 19%, 22% 10%, 33% 4%); }

.section-title { margin-bottom: 70px; }
.section-title.centered { text-align: center; }
.section-title h2 { margin: 0; font-size: clamp(32px, 4vw, 54px); font-weight: 800; letter-spacing: -.04em; line-height: .9; text-transform: uppercase; }
.section-title h2 span { color: var(--sand); font-weight: 400; }
.section-title--green h2 { color: var(--green); }
.section-title--green h2 span { color: var(--green-soft); }
.story-section { padding: 105px 0 150px; }
.story-grid { display: grid; grid-template-columns: .6fr .9fr 1.2fr; align-items: center; gap: 45px; max-width: 1050px; margin: 0 auto; }
.year-block { align-self: end; padding-bottom: 30px; }
.year-block span { display: block; margin-bottom: -4px; color: var(--sand); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.year-block strong { display: block; color: var(--sand); font-size: clamp(44px, 6.7vw, 92px); letter-spacing: -.06em; line-height: .9; }
.story-image { height: 350px; }
.story-copy { color: rgba(247,239,228,.78); font-size: 14px; }
.under-link { display: inline-block; margin-top: 16px; border-bottom: 1px solid rgba(247,239,228,.4); padding-bottom: 4px; color: var(--cream); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 40px; max-width: 1050px; margin: 80px auto 0; }
.stats-grid div { border-top: 1px solid var(--line-light); padding-top: 22px; }
.stats-grid strong { display: block; color: var(--sand); font-size: clamp(40px, 5vw, 66px); letter-spacing: -.05em; line-height: 1; }
.stats-grid span { display: block; margin-top: 10px; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.stats-grid p { color: rgba(247,239,228,.5); font-size: 11px; }
.center-actions { display: flex; justify-content: center; gap: 10px; margin-top: 58px; }

.jagged { position: relative; }
.jagged--both { clip-path: polygon(0 3.2%, 3% 2.7%, 7% 3.6%, 12% 2.5%, 17% 3.8%, 23% 2.9%, 29% 3.5%, 35% 2.4%, 42% 3.6%, 49% 2.6%, 56% 3.7%, 63% 2.5%, 70% 3.5%, 77% 2.7%, 84% 3.6%, 91% 2.6%, 96% 3.5%, 100% 2.8%, 100% 97%, 96% 97.7%, 90% 96.6%, 84% 97.8%, 77% 96.5%, 70% 97.6%, 63% 96.7%, 56% 97.9%, 49% 96.6%, 42% 97.7%, 35% 96.4%, 28% 97.8%, 21% 96.7%, 14% 97.9%, 7% 96.8%, 0 97.6%); }
.jagged--top { clip-path: polygon(0 5%, 4% 4%, 9% 5.4%, 15% 3.8%, 21% 5.2%, 28% 4%, 35% 5.4%, 42% 3.9%, 49% 5.3%, 56% 4%, 63% 5.2%, 70% 3.8%, 77% 5.4%, 84% 4%, 91% 5.3%, 96% 4.2%, 100% 5%, 100% 100%, 0 100%); }
.cream-section { margin: -28px 0; padding: 150px 0 165px; background: var(--cream); color: var(--green); }
.program-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; }
.program-card { text-align: center; }
.program-image { width: min(210px,100%); aspect-ratio: 1; margin: 0 auto 27px; }
.program-card h3 { min-height: 52px; margin: 0 0 12px; font-size: 18px; font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.program-card > p:last-child { color: #59665c; font-size: 12px; }
.cream-section .center-actions .btn--sage { color: white; }

.experience-section { padding: 155px 0 175px; }
.experience-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 34px; max-width: 1050px; margin: 0 auto; text-align: center; }
.experience-image { height: 255px; margin-bottom: 23px; }
.experience-grid h3 { margin: 0; font-size: 18px; font-weight: 800; text-transform: uppercase; }
.experience-grid p { min-height: 48px; color: rgba(247,239,228,.62); font-size: 12px; }
.experience-grid a { color: var(--sand); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.join-section { min-height: 390px; margin-top: -35px; padding: 120px 24px 75px; overflow: hidden; background: var(--cream); color: var(--green); text-align: center; }
.join-section > div { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.join-section h2 { margin: 0; font-size: clamp(30px,4vw,52px); font-weight: 800; letter-spacing: -.04em; line-height: .92; }
.join-section h2 span { color: var(--green-soft); font-weight: 400; }
.join-section p:not(.kicker) { max-width: 550px; margin: 20px auto 28px; color: #58645a; }
.join-fruit { position: absolute; z-index: 1; top: 70px; width: 210px; height: 210px; border-radius: 50%; opacity: .92; }
.join-fruit--left { left: -40px; clip-path: polygon(10% 0,100% 0,90% 100%,0 86%); }
.join-fruit--right { right: -45px; clip-path: polygon(0 0,90% 0,100% 86%,12% 100%); }

.footer { padding: 95px 48px 34px; background: var(--cream); color: var(--green); }
.footer-inner { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 80px; max-width: 1280px; margin: 0 auto; padding-bottom: 45px; border-bottom: 1px solid var(--line-dark); }
.footer-brand { display: block; width: min(300px,100%); aspect-ratio: 3 / 1; overflow: hidden; background: var(--cream); }
.footer-brand img { object-fit: contain; }
.footer-inner p { color: #667166; font-size: 12px; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 10px 28px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.footer-contact a { font-size: 13px; font-weight: 700; }
.footer-bottom { display: flex; max-width: 1280px; justify-content: space-between; margin: 26px auto 0; color: #7a827b; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }

.inner-hero { position: relative; min-height: 770px; }
.inner-hero-image { position: absolute; inset: 115px 6% 45px 28%; }
.inner-hero-image::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,44,31,.7), transparent 60%), linear-gradient(0deg, rgba(0,44,31,.42), transparent 55%); content: ""; }
.inner-hero-copy { position: relative; z-index: 2; width: min(1140px,calc(100% - 96px)); margin: 0 auto; padding-top: 245px; }
.inner-hero-copy h1 { max-width: 760px; margin: 0; font-size: clamp(48px,6.3vw,88px); font-weight: 800; letter-spacing: -.055em; line-height: .86; text-transform: uppercase; }
.inner-hero-copy > p:last-child { max-width: 510px; color: rgba(247,239,228,.78); }
.about-story, .training-lead { padding: 125px 0 150px; }
.about-columns { display: grid; grid-template-columns: .45fr 1.05fr 1fr; gap: 55px; max-width: 1100px; margin: 0 auto; }
.drop-letter { color: var(--sand); font-family: var(--serif); font-size: 220px; line-height: .75; }
.large-copy { font-family: var(--serif); font-size: clamp(21px,2.2vw,31px); line-height: 1.35; }
.about-columns > div:last-child { color: rgba(247,239,228,.68); }
.value-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; }
.value-image { height: 560px; }
.value-layout h2, .contact-copy h2 { margin: 0; font-size: clamp(36px,4.4vw,60px); font-weight: 800; letter-spacing: -.04em; line-height: .92; }
.value-layout h2 span, .contact-copy h2 span { color: var(--green-soft); font-weight: 400; }
.value-layout > div:last-child > p:last-child { color: #59665c; }
.principles, .formats { padding: 150px 0 180px; }
.principle-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; max-width: 1050px; margin: 0 auto; background: var(--line-light); }
.principle-grid article { padding: 48px; background: var(--green); }
.principle-grid strong { color: var(--sand); font-size: 11px; letter-spacing: .15em; }
.principle-grid h3 { margin: 70px 0 12px; font-size: 28px; text-transform: uppercase; }
.principle-grid p { color: rgba(247,239,228,.6); }

.training-lead-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 950px; margin: 0 auto; }
.training-lead-copy p:last-child { color: rgba(247,239,228,.65); }
.module-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 56px 32px; }
.module-grid article { position: relative; }
.module-image { height: 250px; margin-bottom: 22px; }
.module-grid article > span { position: absolute; top: 18px; right: 18px; display: grid; width: 34px; height: 34px; place-items: center; background: var(--clay); color: white; font-size: 9px; font-weight: 800; }
.module-grid h3 { margin: 0 0 10px; font-size: 20px; text-transform: uppercase; }
.module-grid p { color: #59665c; font-size: 13px; }
.format-list { max-width: 930px; margin: 0 auto; }
.format-list article { display: grid; grid-template-columns: 55px .8fr 1.2fr; gap: 28px; align-items: baseline; padding: 27px 0; border-top: 1px solid var(--line-light); }
.format-list article:last-child { border-bottom: 1px solid var(--line-light); }
.format-list span { color: var(--sand); font-size: 10px; }
.format-list h3 { margin: 0; font-size: 22px; text-transform: uppercase; }
.format-list p { margin: 0; color: rgba(247,239,228,.6); }

.contact-section { margin-top: -25px; padding-top: 170px; }
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; }
.contact-copy > p:not(.kicker) { color: #59665c; }
.contact-meta { display: grid; gap: 24px; margin-top: 45px; padding-top: 30px; border-top: 1px solid var(--line-dark); }
.contact-meta span { display: block; margin-bottom: 6px; color: var(--clay); font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.contact-meta p { margin: 0; }
.contact-meta a { font-weight: 700; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 50px; background: #efe3d2; }
.contact-form label { display: flex; flex-direction: column; gap: 7px; }
.contact-form label > span { color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(23,52,29,.45); border-radius: 0; outline: none; padding: 10px 0; background: transparent; color: var(--green); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-bottom: 2px solid var(--green); }
.contact-form textarea { resize: vertical; }
.field-wide { grid-column: 1/-1; }
.form-action { display: flex; align-items: center; gap: 18px; }
.form-action small { color: #6b756c; }
.not-found { min-height: 720px; }
.not-found > section { width: min(920px,calc(100% - 48px)); margin: 0 auto; padding: 150px 0 190px; text-align: center; }
.not-found h1 { margin: 0 0 24px; font-size: clamp(48px,8vw,105px); letter-spacing: -.06em; line-height: .86; text-transform: uppercase; }
.not-found section > p:not(.kicker) { max-width: 520px; margin: 0 auto 32px; color: rgba(247,239,228,.72); }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto auto; width: calc(100% - 40px); }
  .desktop-nav, .header-cta { display: none; }
  .brand { grid-column: 2; }
  .mobile-nav { position: relative; display: block; grid-column: 3; justify-self: end; }
  .mobile-nav summary { cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: .12em; list-style: none; text-transform: uppercase; }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav nav { position: absolute; top: 30px; right: 0; display: flex; width: 210px; flex-direction: column; padding: 14px; background: var(--cream); color: var(--green); }
  .mobile-nav nav a { padding: 10px; border-bottom: 1px solid var(--line-dark); font-size: 11px; font-weight: 700; text-transform: uppercase; }
  .hero-stage { width: calc(100% - 48px); }
  .hero-foot { width: calc(100% - 48px); }
  .story-grid { grid-template-columns: .65fr 1fr; }
  .story-copy { grid-column: 1/-1; max-width: 680px; margin: 0 auto; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .program-grid { grid-template-columns: 1fr 1fr; gap: 55px 30px; }
  .experience-grid { grid-template-columns: 1fr; max-width: 600px; gap: 55px; }
  .experience-image { height: 360px; }
  .inner-hero-image { left: 18%; }
  .about-columns { grid-template-columns: .35fr 1fr; }
  .about-columns > div:last-child { grid-column: 2; }
  .value-layout { grid-template-columns: 1fr; }
  .value-image { max-width: 650px; }
  .principle-grid { grid-template-columns: 1fr; }
  .module-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .page-width { width: calc(100% - 32px); }
  .site-header { width: calc(100% - 32px); min-height: 80px; }
  .header-note { font-size: 8px; }
  .brand { width: 132px; height: 44px; }
  .hero { min-height: 760px; }
  .hero-stage { width: calc(100% - 20px); height: 580px; margin-top: 10px; }
  .hero-title { top: 49%; left: 8%; right: 8%; }
  .hero-title h1 { font-size: 40px; }
  .hero-caption { display: none; }
  .hero-foot { width: calc(100% - 32px); }
  .hero-foot span:nth-child(2) { display: none; }
  .story-section { padding: 85px 0 125px; }
  .section-title { margin-bottom: 50px; }
  .section-title h2 { font-size: 31px; }
  .story-grid { grid-template-columns: 1fr; gap: 25px; }
  .year-block { order: 2; padding: 0; }
  .story-image { height: 320px; }
  .stats-grid, .program-grid { grid-template-columns: 1fr; }
  .cream-section { padding: 130px 0 145px; }
  .program-image { width: 230px; }
  .experience-section { padding: 130px 0 150px; }
  .experience-image { height: 290px; }
  .center-actions { flex-direction: column; align-items: center; }
  .join-fruit { width: 120px; height: 120px; opacity: .45; }
  .join-section { padding-top: 110px; }
  .footer { padding: 85px 20px 30px; }
  .footer-inner { grid-template-columns: 1fr; gap: 35px; }
  .footer-bottom { flex-direction: column; }
  .inner-hero { min-height: 660px; }
  .inner-hero-image { inset: 90px 3% 25px 11%; }
  .inner-hero-copy { width: calc(100% - 32px); padding-top: 220px; }
  .inner-hero-copy h1 { font-size: 45px; }
  .about-story, .training-lead { padding: 95px 0 125px; }
  .about-columns { grid-template-columns: 1fr; }
  .about-columns > div:last-child { grid-column: auto; }
  .drop-letter { font-size: 140px; }
  .value-image { height: 430px; }
  .principles, .formats { padding: 125px 0 145px; }
  .principle-grid article { padding: 34px; }
  .training-lead-copy { grid-template-columns: 1fr; gap: 16px; }
  .module-grid { grid-template-columns: 1fr; }
  .module-image { height: 260px; }
  .format-list article { grid-template-columns: 35px 1fr; }
  .format-list p { grid-column: 2; }
  .contact-form { grid-template-columns: 1fr; padding: 30px 22px; }
  .field-wide { grid-column: auto; }
  .form-action { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}