:root {
  --ink: #17382f;
  --forest: #173d33;
  --forest2: #0d2b24;
  --sage: #9fac91;
  --cream: #f3efe6;
  --paper: #fbfaf6;
  --gold: #c9a65d;
  --muted: #65736d;
  --line: #d9ddd7;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
.site-header {
  height: 92px;
  padding: 0 clamp(24px, 5vw, 76px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(251, 250, 246, 0.96);
  position: relative;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0.18em;
  font-size: 13px;
}
.brand > span:last-child {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand strong {
  font-weight: 700;
}
.brand em {
  font-style: normal;
  color: #9b7b3a;
  font-size: 10px;
  letter-spacing: 0.42em;
  margin-top: 4px;
}
.brand-mark {
  width: 34px;
  height: 42px;
  position: relative;
  display: flex;
  gap: 3px;
  align-items: flex-end;
}
.brand-mark i {
  display: block;
  width: 8px;
  background: var(--ink);
  border-radius: 7px 7px 0 0;
}
.brand-mark i:nth-child(1) {
  height: 23px;
}
.brand-mark i:nth-child(2) {
  height: 39px;
}
.brand-mark i:nth-child(3) {
  height: 30px;
}
.site-header nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 13px;
  font-weight: 600;
}
.nav-cta {
  border: 1px solid var(--ink);
  padding: 13px 18px;
}
.menu {
  display: none;
}
.hero {
  height: calc(100vh - 92px);
  min-height: 650px;
  position: relative;
  color: white;
  overflow: hidden;
}
.hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(7, 31, 25, 0.9) 0%,
      rgba(7, 31, 25, 0.6) 38%,
      rgba(7, 31, 25, 0.06) 70%
    ),
    linear-gradient(0deg, rgba(7, 31, 25, 0.4), transparent 45%);
}
.hero-content {
  position: absolute;
  left: clamp(24px, 8vw, 120px);
  top: 50%;
  transform: translateY(-51%);
  max-width: 690px;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  font-size: 12px;
  color: #7a5f2c;
  margin: 0 0 24px;
}
.eyebrow.light {
  color: #e0c37c;
}
.hero h1,
.section-title h2,
.principles h2,
.experience h2,
.conversation h2,
.intro h2,
.audience h2 {
  font-family: "Newsreader", serif;
  font-weight: 400;
}
.hero h1 {
  font-size: clamp(55px, 6.5vw, 96px);
  line-height: 0.93;
  letter-spacing: -0.04em;
  margin: 0;
}
.hero h1 em,
.principles h2 em,
.experience h2 em,
.conversation h2 em {
  font-weight: 400;
  color: #e0c37c;
}
.hero-copy {
  font-size: 18px;
  line-height: 1.65;
  max-width: 610px;
  color: #e2e7e4;
  margin: 30px 0;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 34px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  padding: 18px 22px;
  border: 0;
  font: 600 14px "DM Sans";
  cursor: pointer;
}
.button.primary {
  background: #e2c580;
  color: #17382f;
}
.button span {
  font-size: 18px;
}
.text-link {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid;
  padding-bottom: 6px;
}
.light-link {
  color: white;
  border-color: rgba(255, 255, 255, 0.5);
}
.hero-proof {
  position: absolute;
  right: clamp(24px, 5vw, 75px);
  bottom: 44px;
  width: 220px;
  border-left: 2px solid #ddbe73;
  padding-left: 20px;
}
.hero-proof span {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  color: #d7cda9;
}
.hero-proof strong {
  display: block;
  font-family: "Newsreader";
  font-size: 24px;
  font-weight: 400;
  margin: 6px 0;
}
.hero-proof p {
  font-size: 12px;
  line-height: 1.5;
  color: #d8dfdb;
  margin: 0;
}
.intro {
  padding: 120px clamp(24px, 8vw, 120px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
}
.intro h2,
.audience h2 {
  font-size: clamp(42px, 4.2vw, 64px);
  line-height: 1.02;
  margin: 0;
}
.intro-copy {
  max-width: 600px;
}
.intro-copy p {
  font-family: "Newsreader";
  font-size: 21px;
  line-height: 1.55;
  color: #53645e;
  margin: 0 0 22px;
}
.intro-copy strong {
  color: var(--ink);
  font-weight: 500;
}
.intro-copy .text-link {
  margin-top: 18px;
}
.services {
  padding: 0 clamp(24px, 8vw, 120px) 120px;
}
.services-title {
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: 7vw;
  align-items: start;
  margin-bottom: 55px;
}
.services-title h2 {
  font: 400 clamp(42px, 4.2vw, 64px) / 1.02 "Newsreader";
  margin: 0;
}
.service-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.service-cards article {
  padding: 54px;
  background: #ece9df;
  border-top: 4px solid #b49758;
}
.service-cards article.service-featured {
  background: var(--forest);
  color: white;
}
.service-cards article > span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #91713a;
}
.service-featured > span {
  color: #e0c37c !important;
}
.service-cards h3 {
  font: 400 34px/1.15 "Newsreader";
  margin: 25px 0 20px;
}
.service-cards p {
  line-height: 1.7;
  color: #607069;
}
.service-featured p {
  color: #bcc9c4;
}
.service-cards ul {
  padding: 20px 0 0;
  margin: 24px 0 0;
  border-top: 1px solid rgba(87, 104, 97, 0.25);
  list-style: none;
}
.service-cards li {
  padding: 8px 0;
  font-size: 13px;
}
.service-cards li::before {
  content: "→";
  color: #aa8744;
  margin-right: 12px;
}
.principles {
  background: var(--forest);
  color: white;
  padding: 110px clamp(24px, 8vw, 120px);
  display: grid;
  grid-template-columns: 0.8fr 1.5fr;
  gap: 8vw;
}
.principles h2,
.experience h2,
.conversation h2 {
  font-size: clamp(44px, 4.5vw, 68px);
  line-height: 1;
  margin: 0 0 28px;
}
.principles-heading > p:last-child {
  color: #b9c6c1;
  line-height: 1.7;
  max-width: 340px;
}
.principle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.principle-grid article {
  padding: 12px 32px 40px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 34px;
}
.principle-grid span {
  font-size: 11px;
  color: #e0c37c;
  letter-spacing: 0.15em;
}
.principle-grid h3 {
  font: 400 27px "Newsreader";
  margin: 18px 0 12px;
}
.principle-grid p {
  color: #b9c6c1;
  line-height: 1.6;
  font-size: 14px;
}
.journey {
  padding: 120px clamp(24px, 8vw, 120px);
  display: grid;
  grid-template-columns: 0.85fr 1.2fr;
  gap: 10vw;
}
.section-title h2 {
  font-size: clamp(46px, 4.8vw, 72px);
  line-height: 0.98;
  margin: 0 0 28px;
}
.section-title > p:last-child {
  line-height: 1.7;
  color: var(--muted);
  max-width: 460px;
}
.step {
  border-top: 1px solid var(--line);
}
.step:last-child {
  border-bottom: 1px solid var(--line);
}
.step button {
  width: 100%;
  display: grid;
  grid-template-columns: 50px 1fr 30px;
  align-items: center;
  text-align: left;
  padding: 24px 0;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
.step button span {
  font-size: 11px;
  color: #9a7c42;
}
.step button strong {
  font: 400 26px "Newsreader";
}
.step button i {
  font-style: normal;
  font-size: 22px;
}
.step div {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.step div p {
  margin: 0 40px 24px 50px;
  color: var(--muted);
  line-height: 1.65;
}
.step.active div {
  max-height: 160px;
}
.step.active i {
  transform: rotate(45deg);
}
.experience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--forest2);
  color: white;
}
.experience-image {
  min-height: 700px;
  background:
    linear-gradient(rgba(16, 46, 38, 0.1), rgba(16, 46, 38, 0.48)),
    url("assets/stewardship-hero.png") center/cover;
  filter: saturate(0.4);
}
.experience-copy {
  padding: 100px clamp(35px, 7vw, 105px);
}
.experience-copy > p:not(.eyebrow) {
  color: #b8c5c0;
  line-height: 1.75;
}
.stats {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 35px;
  margin-top: 48px;
}
.stats div {
  display: flex;
  align-items: center;
  gap: 11px;
}
.stats strong {
  font: 400 46px "Newsreader";
  color: #e0c37c;
}
.stats span {
  font-size: 10px;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #cad3cf;
}
.audience {
  text-align: center;
  padding: 120px clamp(24px, 8vw, 120px);
}
.audience h2 {
  max-width: 1000px;
  margin: 0 auto 55px;
}
.audience-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}
.audience-tags span {
  border: 1px solid #cdd4cf;
  border-radius: 40px;
  padding: 12px 20px;
  font-size: 12px;
  color: #52645d;
}
.conversation {
  background: #355f52;
  color: white;
  padding: 110px clamp(24px, 8vw, 120px);
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 10vw;
}
.conversation > div > p:last-child {
  color: #d2ddd9;
  line-height: 1.7;
  max-width: 600px;
}
.conversation form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.conversation label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.conversation label:nth-child(5) {
  grid-column: 1/-1;
}
.conversation label span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #c9d6d1;
}
.conversation input,
.conversation textarea {
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: white;
  padding: 8px 0;
  font: 16px "DM Sans";
  outline: none;
}
.conversation input:focus,
.conversation textarea:focus {
  border-color: #e0c37c;
}
.button.cream {
  background: var(--cream);
  color: var(--ink);
}
.form-note {
  font-size: 10px;
  color: #becdc7;
  align-self: center;
}
.form-success {
  grid-column: 1/-1;
  background: rgba(255, 255, 255, 0.1);
  padding: 25px;
  line-height: 1.6;
}
footer {
  padding: 50px clamp(24px, 5vw, 76px);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: 30px;
  background: #091e19;
  color: white;
}
.footer-brand .brand-mark i {
  background: #e6dfcd;
}
footer > p {
  color: #9dafa8;
  font: 18px/1.5 "Newsreader";
  max-width: 350px;
  margin: 0;
}
footer > div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  color: #aab9b4;
  font-size: 11px;
}
footer > div a {
  color: #e0c37c;
}
.page-hero {
  padding: 130px clamp(24px, 8vw, 120px);
  min-height: 610px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  background:
    linear-gradient(90deg, rgba(7, 31, 25, 0.94), rgba(7, 31, 25, 0.48)),
    url("assets/stewardship-hero.png") center/cover;
}
.page-hero.cm-hero {
  background-position: 60% center;
}
.page-hero.case-hero {
  background:
    linear-gradient(90deg, rgba(7, 31, 25, 0.93), rgba(7, 31, 25, 0.56)),
    url("assets/stewardship-hero.png") 30% center/cover;
}
.page-hero h1,
.assessment-intro h1 {
  font: 400 clamp(58px, 7vw, 104px)/0.94 "Newsreader";
  letter-spacing: -0.04em;
  margin: 0;
}
.page-hero h1 em {
  color: #e0c37c;
}
.page-hero > p:last-child {
  max-width: 680px;
  font-size: 19px;
  line-height: 1.65;
  color: #d5dfdb;
  margin-top: 30px;
}
.content-split {
  padding: 110px clamp(24px, 8vw, 120px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9vw;
}
.content-split h2 {
  font: 400 clamp(42px, 4.5vw, 68px)/1.02 "Newsreader";
  margin: 0;
}
.content-split > div:last-child p {
  font: 20px/1.6 "Newsreader";
  color: #53645e;
  margin: 0 0 22px;
}
.deliverables {
  padding: 100px clamp(24px, 8vw, 120px);
  background: #eeece4;
}
.deliverables.dark {
  background: var(--forest);
  color: white;
}
.deliverable-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #cdd2ce;
  margin-top: 45px;
}
.deliverable-grid article {
  background: var(--paper);
  padding: 36px 30px;
}
.dark .deliverable-grid {
  background: rgba(255, 255, 255, 0.18);
}
.dark .deliverable-grid article {
  background: var(--forest);
}
.deliverable-grid span,
.case-options article span {
  color: #aa8744;
  font-size: 11px;
  letter-spacing: 0.14em;
}
.deliverable-grid h3,
.case-options h3 {
  font: 400 27px/1.1 "Newsreader";
  margin: 22px 0 14px;
}
.deliverable-grid p,
.case-options p {
  color: #63726c;
  line-height: 1.6;
  font-size: 13px;
}
.dark .deliverable-grid p {
  color: #b9c6c1;
}
.proof-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #e2c580;
  padding: 55px clamp(24px, 8vw, 120px);
  gap: 30px;
}
.proof-band div {
  display: flex;
  align-items: center;
  gap: 15px;
}
.proof-band strong {
  font: 400 50px "Newsreader";
}
.proof-band span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.page-cta {
  padding: 100px clamp(24px, 8vw, 120px);
  text-align: center;
  background: #355f52;
  color: white;
}
.page-cta h2 {
  font: 400 clamp(42px, 5vw, 70px)/1 "Newsreader";
  max-width: 960px;
  margin: 0 auto 28px;
}
.page-cta > p:not(.eyebrow) {
  color: #d2ddd9;
  margin: -10px auto 34px;
}
.case-options {
  padding: 100px clamp(24px, 8vw, 120px);
}
.case-options > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 45px;
}
.case-options article {
  padding: 46px;
  background: #ece9df;
  border-left: 4px solid #b49758;
}
.case-lesson {
  padding: 110px clamp(24px, 12vw, 180px);
  background: var(--forest2);
  color: white;
  text-align: center;
}
.case-lesson blockquote {
  font: 400 clamp(36px, 4.5vw, 64px)/1.12 "Newsreader";
  margin: 0 auto 38px;
  max-width: 1000px;
  color: #eee7d6;
}
.case-lesson > p:last-child {
  color: #b9c6c1;
  line-height: 1.75;
  max-width: 760px;
  margin: auto;
}
.assessment-cta {
  margin-top: 50px;
}
.assessment-intro {
  padding: 105px clamp(24px, 10vw, 150px);
  background: var(--forest2);
  color: white;
}
.assessment-intro h1 {
  color: #f3efe6;
}
.assessment-intro > p:last-child {
  max-width: 760px;
  color: #c0ccc7;
  font-size: 18px;
  line-height: 1.7;
}
.assessment {
  max-width: 920px;
  margin: 0 auto;
  padding: 75px 28px 110px;
}
.assessment-progress {
  margin-bottom: 55px;
}
.assessment-progress > span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 13px;
}
.assessment-progress > div {
  height: 3px;
  background: #dce0dc;
}
.assessment-progress i {
  display: block;
  height: 100%;
  width: 10%;
  background: #b49758;
  transition: width 0.3s;
}
.question {
  display: none;
  border: 0;
  padding: 0;
  margin: 0;
}
.question.active {
  display: grid;
  gap: 12px;
}
.question legend {
  font: 400 clamp(34px, 4vw, 52px)/1.12 "Newsreader";
  margin-bottom: 38px;
}
.question legend span {
  display: block;
  font: 700 11px "DM Sans";
  color: #a47f3d;
  letter-spacing: 0.15em;
  margin-bottom: 15px;
}
.question label {
  border: 1px solid #d5dbd7;
  padding: 20px;
  cursor: pointer;
  transition: 0.2s;
}
.question label:hover {
  border-color: #9b7b3a;
  background: #f3efe6;
}
.question input {
  margin-right: 12px;
  accent-color: var(--forest);
}
.question.needs-answer {
  padding: 20px;
  border-left: 4px solid #b35d45;
}
.assessment-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
}
.assessment-controls > button:first-child {
  background: none;
  border: 0;
  border-bottom: 1px solid;
  cursor: pointer;
  padding: 8px 0;
  color: var(--ink);
}
.assessment-result {
  display: none;
  text-align: center;
  padding: 45px;
  background: #ece9df;
}
.assessment-result.active {
  display: block;
}
.assessment-result > strong {
  font: 400 58px "Newsreader";
  color: #a47f3d;
}
.assessment-result h2 {
  font: 400 clamp(36px, 4vw, 54px)/1.05 "Newsreader";
  margin: 18px 0;
}
.assessment-result > p:not(.eyebrow) {
  max-width: 650px;
  margin: 0 auto 35px;
  line-height: 1.7;
  color: #596a63;
}
.result-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
}
@media (max-width: 900px) {
  .site-header {
    height: 74px;
  }
  .site-header nav {
    display: none;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    background: var(--paper);
    padding: 30px;
    flex-direction: column;
    align-items: flex-start;
  }
  .site-header nav.open {
    display: flex;
  }
  .menu {
    display: block;
    border: 0;
    background: none;
  }
  .menu span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ink);
    margin: 6px;
  }
  .hero {
    height: 780px;
  }
  .hero-content {
    top: 46%;
  }
  .hero-proof {
    left: 24px;
    right: auto;
  }
  .intro,
  .services-title,
  .service-cards,
  .principles,
  .journey,
  .conversation {
    grid-template-columns: 1fr;
  }
  .principle-grid {
    margin-top: 20px;
  }
  .experience {
    grid-template-columns: 1fr;
  }
  .experience-image {
    min-height: 420px;
  }
  .conversation form {
    margin-top: 15px;
  }
  .content-split,
  .services-title,
  .service-cards {
    grid-template-columns: 1fr;
  }
  .deliverable-grid,
  .proof-band {
    grid-template-columns: 1fr 1fr;
  }
  footer {
    grid-template-columns: 1fr;
  }
  footer > div {
    align-items: flex-start;
  }
}
@media (max-width: 560px) {
  .hero-content {
    left: 24px;
    right: 24px;
  }
  .hero h1 {
    font-size: 54px;
  }
  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
  }
  .hero-proof {
    display: none;
  }
  .intro,
  .services,
  .principles,
  .journey,
  .audience,
  .conversation {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .principle-grid {
    grid-template-columns: 1fr;
  }
  .principle-grid article {
    padding-left: 22px;
  }
  .stats {
    gap: 18px;
    flex-wrap: wrap;
  }
  .conversation form {
    grid-template-columns: 1fr;
  }
  .conversation label:nth-child(5) {
    grid-column: auto;
  }
  .experience-copy {
    padding: 75px 25px;
  }
  .audience h2 {
    font-size: 38px;
  }
  .page-hero {
    min-height: 560px;
    padding-top: 90px;
    padding-bottom: 90px;
  }
  .content-split,
  .deliverables,
  .case-options,
  .case-lesson,
  .page-cta {
    padding-top: 75px;
    padding-bottom: 75px;
  }
  .deliverable-grid,
  .proof-band,
  .case-options > div {
    grid-template-columns: 1fr;
  }
  .result-actions {
    flex-direction: column;
  }
}