:root {
  --ink:#17352d;
  --cream:#f8f5ed;
  --lime:#d9ee58;
  --line:#c8d2c8
}* {
  box-sizing:border-box
}html {
  scroll-behavior:smooth
}body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'DM Sans',sans-serif
}.top {
  background:var(--ink);
  color:#fff;
  text-align:center;
  padding:11px;
  font-size:10px;
  letter-spacing:.1em
}header {
  height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 7%;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:#f8f5edf2;
  z-index:4
}.logo {
  font:700 18px/.75 Fraunces,serif;
  text-decoration:none;
  color:var(--ink);
  padding-left:43px;
  position:relative
}.logo b {
  position:absolute;
  left:0;
  top:0;
  border-radius:100%;
  height:35px;
  width:35px;
  display:grid;
  place-items:center;
  background:var(--ink);
  color:var(--lime);
  font-size:24px
}nav {
  display:flex;
  gap:30px
}nav a {
  font-size:13px;
  text-decoration:none;
  color:inherit;
  font-weight:600
}.bag,.tabs button,.add {
  font:600 12px 'DM Sans';
  border:0;
  background:transparent;
  color:var(--ink)
}.bag {
  border:1px solid var(--ink);
  padding:9px 14px;
  border-radius:20px
}.bag span {
  background:var(--lime);
  border-radius:50%;
  padding:2px 6px;
  margin-left:3px
}.hero {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  min-height:615px
}.hero>div:first-child {
  padding:110px 12%
}.hero small,.section small,.impact small,.community small,article small {
  color:#547568;
  font-size:10px;
  letter-spacing:.12em;
  font-weight:700
}.hero h1,h2 {
  font:700 clamp(46px,6vw,82px)/.93 Fraunces,serif;
  letter-spacing:-.065em;
  margin:18px 0
}i {
  font-weight:500
}.hero p {
  max-width:410px;
  line-height:1.6
}.button {
  display:inline-block;
  background:var(--ink);
  color:white;
  padding:15px 17px;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  margin-top:13px
}.stats {
  display:flex;
  gap:30px;
  margin-top:65px
}.stats b {
  font:500 22px Fraunces,serif
}.stats em {
  display:block;
  font:10px 'DM Sans';
  color:#597069;
  margin-top:5px
}.heroart {
  background:#78917b;
  position:relative;
  overflow:hidden
}.heroart:after {
  content:'';
  position:absolute;
  width:130%;
  height:53%;
  bottom:-22%;
  left:-15%;
  background:#17352d;
  border-radius:50% 50% 0 0
}.sun {
  position:absolute;
  width:230px;
  height:230px;
  background:var(--lime);
  border-radius:50%;
  top:80px;
  right:18%
}.heroart span {
  position:absolute;
  bottom:65px;
  left:12%;
  color:#fff;
  z-index:1;
  font:700 40px/.85 Fraunces,serif
}.heroart i {
  font:12px 'DM Sans'
}.quote {
  background:var(--lime);
  font:700 clamp(28px,4vw,53px)/1 Fraunces,serif;
  padding:64px 10%;
  text-align:center;
  letter-spacing:-.05em
}.quote strong {
  padding:0 24px
}.section {
  padding:105px 7%
}.section h2 {
  font-size:clamp(40px,4.5vw,65px)
}.tabs {
  display:flex;
  gap:8px;
  margin:35px 0 28px
}.tabs button {
  border:1px solid #b8c4ba;
  border-radius:30px;
  padding:10px 15px
}.tabs button:first-child {
  background:var(--ink);
  color:white
}.grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:17px
}.photo {
  height:300px;
  position:relative;
  overflow:hidden
}.photo img {
  width:100%;
  height:100%;
  object-fit:cover
}.photo span {
  position:absolute;
  top:12px;
  left:12px;
  background:var(--lime);
  z-index:1;
  padding:6px;
  font-size:9px;
  font-weight:700
}.olive {
  background:#b6c2a8
}.sand {
  background:#e2ceb1
}.rose {
  background:#d9a291
}.blue {
  background:#adc9c3
}article>small {
  display:block;
  margin-top:15px;
  font-size:9px
}h3 {
  font:700 19px Fraunces,serif;
  margin:6px 0 10px;
  letter-spacing:-.03em
}article p {
  display:flex;
  justify-content:space-between;
  font-size:13px
}.add {
  border-bottom:1px solid var(--ink)
}.impact {
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--ink);
  color:white
}.impact>div:last-child {
  padding:95px 13%
}.impact small {
  color:var(--lime)
}.impact h2 {
  font-size:clamp(39px,4.5vw,63px)
}.impact p {
  line-height:1.6;
  color:#d4dfd6
}.forest {
  min-height:530px;
  background:#56745e;
  display:grid;
  place-items:center;
  font-size:180px;
  color:var(--lime);
  position:relative
}.forest:after {
  content:'BOSQUE VIVO';
  font:700 36px Fraunces,serif;
  position:absolute;
  bottom:55px
}.light {
  background:var(--cream);
  color:var(--ink)
}hr {
  border:0;
  border-top:1px solid #779080;
  margin-top:55px
}.metric {
  font:500 43px Fraunces,serif;
  color:var(--lime);
  margin-right:15px
}.impact span {
  font-size:11px;
  color:#d4dfd6
}.cards {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:18px;
  margin-top:35px
}.cards>div {
  min-height:310px;
  padding:34px;
  color:#fff;
  background:linear-gradient(130deg,#3e6b57,#1a3a2d)
}.cards>div+div {
  background:#c4846c;
  color:var(--ink)
}.cards span {
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em
}.cards h3 {
  font-size:36px;
  margin-top:90px
}.community {
  background:#e88a68;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  min-height:500px
}.community>div:first-child {
  padding:90px 12%
}.community h2 {
  font-size:clamp(39px,4.3vw,62px)
}.community p {
  max-width:480px;
  line-height:1.5
}.orb {
  background:#d7ad5d;
  display:grid;
  place-items:center;
  text-align:center;
  font:700 31px/.9 Fraunces,serif;
  letter-spacing:-.05em
}.orb:before {
  content:'';
  position:absolute;
  border:1px solid var(--ink);
  width:300px;
  height:300px;
  border-radius:50%
}footer {
  background:var(--ink);
  color:#dfe9df;
  padding:55px 7%;
  display:flex;
  justify-content:space-between;
  align-items:center
}footer .logo {
  color:#fff
}footer p {
  font-size:11px
}@media(max-width:700px) {
  header {
  height:70px
}nav {
  display:none
}.hero,.impact,.community {
  grid-template-columns:1fr
}.hero>div:first-child {
  padding:75px 9%
}.heroart {
  min-height:360px
}.grid {
  grid-template-columns:repeat(2,1fr)
}.photo {
  height:240px
}.impact>div:last-child {
  padding:70px 9%
}.forest {
  min-height:260px
}.cards {
  grid-template-columns:1fr
}.community>div:first-child {
  padding:70px 9%
}.orb {
  min-height:300px
}.stats {
  gap:18px
}.section {
  padding:75px 7%
}
}@media(max-width:430px) {
  .grid {
  grid-template-columns:1fr
}.photo {
  height:300px
}.stats {
  flex-wrap:wrap
}.quote strong {
  display:block
}.top {
  font-size:8px
}
}