.about-hero, .about-markets, .about-inquiry { position: relative; overflow: hidden; isolation: isolate; }
.about-hero > img, .about-inquiry > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-hero { display: grid; min-height: clamp(430px, 36vw, 550px); align-items: center; color: #fff; }
.about-hero > img { object-position: center 54%; }
.about-hero__wash { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgb(2 56 30 / 88%) 0%, rgb(3 64 35 / 68%) 43%, rgb(3 64 35 / 10%) 78%); }
.about-hero__content { max-width: 1460px; padding-block: 74px; }
.about-eyebrow { margin: 0 0 10px; color: #249445; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.about-hero .about-eyebrow, .about-inquiry .about-eyebrow { color: #d9f894; }
.about-hero h1, .about-heading h2, .about-intro h2, .about-resources h2, .about-markets h2, .about-inquiry h2 { margin: 0; font-weight: 800; letter-spacing: -.045em; line-height: 1.06; }
.about-hero h1 { max-width: 760px; font-size: clamp(2.65rem, 4.45vw, 4.55rem); }
.about-hero__content > p:not(.about-eyebrow) { max-width: 610px; margin: 21px 0 0; font-size: 1.04rem; font-weight: 600; line-height: 1.55; }
.about-button { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 44px; border: 0; border-radius: 999px; padding: 12px 22px; font: inherit; font-size: .8rem; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.about-button:hover { transform: translateY(-2px); }
.about-button--gold { margin-top: 28px; color: #173b25; background: #f4cf25; box-shadow: 0 8px 18px rgb(80 61 0 / 18%); }
.about-button--gold:hover { background: #ffdc39; box-shadow: 0 11px 23px rgb(80 61 0 / 25%); }
.about-intro, .about-resources, .about-partners { padding: 90px 0; background: #fff; }
.about-intro__layout, .about-resources__layout, .about-markets__layout, .about-inquiry__wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(42px, 6vw, 96px); }
.about-intro__copy, .about-resources__copy, .about-markets__copy { max-width: 655px; }
.about-intro h2, .about-resources h2, .about-markets h2, .about-inquiry h2 { color: #0d4b2b; font-size: clamp(2.1rem, 3.25vw, 3.45rem); }
.about-intro__copy > p:not(.about-eyebrow), .about-resources__copy > p:not(.about-eyebrow), .about-markets__copy > p:not(.about-eyebrow) { margin: 18px 0 0; color: #596e5f; font-size: 1rem; line-height: 1.72; }
.about-intro__image, .about-resources__image, .about-markets__image { margin: 0; overflow: hidden; border-radius: 13px; box-shadow: 0 18px 38px rgb(7 65 29 / 13%); }
.about-intro__image img, .about-resources__image img, .about-markets__image img { display: block; width: 100%; min-height: 370px; object-fit: cover; }
.about-intro__image figcaption { margin-top: 12px; color: #658068; font-size: .83rem; font-weight: 700; }
.about-connect, .about-process { padding: 86px 0; background: #eff8ed; }
.about-heading { margin-bottom: 34px; }
.about-heading--center { max-width: 840px; margin-inline: auto; text-align: center; }
.about-heading h2 { color: #0c4b2b; font-size: clamp(1.95rem, 2.7vw, 3rem); }
.about-heading > p:not(.about-eyebrow) { margin: 14px auto 0; color: #617868; font-size: 1rem; line-height: 1.6; }
.about-connect__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.about-connect__grid article { min-height: 208px; padding: 26px 24px; border: 1px solid #e0ecdF; border-radius: 13px; background: #fff; box-shadow: 0 12px 28px rgb(8 71 33 / 8%); }
.about-icon { width: 34px; height: 34px; fill: none; stroke: #19843a; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.about-connect__grid h3 { margin: 17px 0 0; color: #15472a; font-size: .98rem; line-height: 1.25; }
.about-connect__grid p { margin: 8px 0 0; color: #66796b; font-size: .8rem; line-height: 1.5; }
.about-resources { padding-bottom: 58px; background: #fff; }
.about-resources__note { padding: 15px 17px; border-left: 3px solid #2d9a4b; background: #f0f8ed; color: #315a3d !important; font-size: .88rem !important; line-height: 1.56 !important; }
.about-resources__image img { min-height: 390px; object-position: center; }
.about-value-chain { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1.25fr; align-items: center; gap: 13px; margin-top: 38px; padding: 23px 28px; border: 1px solid #dfebde; border-radius: 13px; background: #fbfdf9; }
.about-value-chain article { display: flex; align-items: center; justify-content: center; gap: 11px; color: #194d2c; font-size: .83rem; font-weight: 800; line-height: 1.25; }
.about-value-chain .about-icon { width: 31px; height: 31px; flex: 0 0 auto; }
.about-value-chain > i { color: #299247; font-size: 1.2rem; font-style: normal; }
.about-process__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 23px 16px; border-radius: 14px; background: #fff; box-shadow: 0 10px 26px rgb(8 71 33 / 7%); list-style: none; }
.about-process__list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 15px; min-width: 0; padding: 8px 25px 12px; border-right: 1px solid #dce9db; }
.about-process__list li:last-child { border-right: 0; }
.about-process__list .about-icon { width: 46px; height: 46px; padding: 9px; border-radius: 50%; background: #e9f6e7; }
.about-process__list b { color: #3da057; font-size: .7rem; }
.about-process__list h3 { min-height: 2.4em; margin: 2px 0 0; color: #174b2b; font-size: .94rem; line-height: 1.2; }
.about-process__list p { min-height: 2.85em; margin: 6px 0 0; color: #708074; font-size: .74rem; line-height: 1.42; }
.about-markets { padding: 86px 0; color: #fff; background: #07552d; }
.about-markets__copy .about-eyebrow { color: #d9f894; }
.about-markets h2 { color: #fff; }
.about-markets__copy > p:not(.about-eyebrow) { color: rgb(255 255 255 / 90%); }
.about-markets__image img { min-height: 370px; }
.about-partners { background: #fff; }
.about-partners__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.about-partners__grid article { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 116px; padding: 22px; border: 1px solid #e0ecdf; border-radius: 12px; background: #fbfdf9; }
.about-partners__grid .about-icon { width: 37px; height: 37px; }
.about-partners__grid h3 { margin: 0; color: #174b2b; font-size: .96rem; }
.about-partners__grid p { margin: 7px 0 0; color: #647568; font-size: .79rem; line-height: 1.42; }
.about-inquiry { padding: 72px 0; color: #fff; }
.about-inquiry > img { object-position: center; }
.about-inquiry__wash { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgb(0 65 33 / 90%), rgb(0 76 39 / 76%)); }
.about-inquiry__copy .about-eyebrow { color: #d9f894; }
.about-inquiry h2 { color: #fff; }
.about-inquiry__copy > p:not(.about-eyebrow) { margin: 18px 0 0; color: rgb(255 255 255 / 90%); font-size: 1rem; line-height: 1.68; }
.about-inquiry__form { min-width: 0; padding: 30px; border-radius: 13px; background: rgb(255 255 255 / 95%); box-shadow: 0 18px 38px rgb(0 32 13 / 20%); }
.about-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.about-form-grid input, .about-form-grid select, .about-form-grid textarea { display: block; width: 100%; border: 1px solid #d4e3d3; border-radius: 7px; padding: 13px 15px; color: #164529; background: #fff; font: inherit; font-size: .88rem; line-height: 1.35; outline-color: #239042; }
.about-form-grid textarea { min-height: 116px; resize: vertical; }
.about-form-grid__message { grid-column: 1 / -1; }
.about-inquiry__form .about-button { margin-top: 14px; }
.about-honeypot { position: absolute; left: -9999px; overflow: hidden; width: 1px; height: 1px; }
.about-form-message { margin: 0 0 12px; border-radius: 7px; padding: 10px 12px; font-size: .8rem; line-height: 1.4; }
.about-form-message--success { color: #125928; background: #e5f7e5; }
.about-form-message--error { color: #9c3019; background: #fff0e9; }
@media (max-width: 1050px) { .about-process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-process__list li:nth-child(2) { border-right: 0; } .about-process__list li:nth-child(-n+2) { border-bottom: 1px solid #dce9db; } .about-value-chain { grid-template-columns: 1fr auto 1fr; } .about-value-chain article:last-child { grid-column: 1 / -1; } .about-value-chain > i:nth-of-type(3) { display: none; } }
@media (max-width: 760px) { .about-hero { min-height: 475px; } .about-hero > img { object-position: 63% center; } .about-hero__wash { background: linear-gradient(90deg, rgb(2 56 30 / 88%), rgb(3 64 35 / 54%)); } .about-hero__content { padding-block: 72px; } .about-hero h1 { font-size: clamp(2.45rem, 11vw, 3.45rem); } .about-intro, .about-resources, .about-connect, .about-process, .about-markets, .about-partners, .about-inquiry { padding-block: 58px; } .about-intro__layout, .about-resources__layout, .about-markets__layout, .about-inquiry__wrap { grid-template-columns: 1fr; gap: 32px; } .about-intro__copy, .about-resources__copy, .about-markets__copy { max-width: none; } .about-intro__image, .about-resources__image, .about-markets__image { order: -1; } .about-connect__grid, .about-partners__grid { grid-template-columns: 1fr; } .about-process__list { grid-template-columns: 1fr; padding: 13px; } .about-process__list li, .about-process__list li:nth-child(2) { border-right: 0; border-bottom: 1px solid #dce9db; } .about-process__list li:last-child { border-bottom: 0; } .about-value-chain { grid-template-columns: 1fr; gap: 15px; } .about-value-chain > i { transform: rotate(90deg); } .about-value-chain > i:nth-of-type(3) { display: block; } .about-value-chain article:last-child { grid-column: auto; } .about-inquiry__form { padding: 21px; } }
@media (max-width: 440px) { .about-button { width: 100%; } .about-connect__grid { grid-template-columns: 1fr; } .about-form-grid { grid-template-columns: 1fr; } .about-hero__content > p:not(.about-eyebrow), .about-intro__copy > p:not(.about-eyebrow), .about-resources__copy > p:not(.about-eyebrow), .about-markets__copy > p:not(.about-eyebrow), .about-inquiry__copy > p:not(.about-eyebrow) { font-size: .95rem; } }