.about-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(108deg, #003823 0%, #005a35 58%, #0d7747 100%)
}
.about-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px);
  background-size: 54px 54px
}
.about-hero__rings {
  position: absolute;
  width: 720px;
  height: 720px;
  border: 1px solid #ffffff1f;
  border-radius: 50%;
  right: -180px;
  top: -260px;
  box-shadow: 0 0 0 100px #ffffff08, 0 0 0 200px #ffffff05
}
.about-hero__inner {
  min-height: 650px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 90px;
  padding: 75px 0 115px
}
.about-hero h1 {
  font-size: 58px;
  line-height: 1.24;
  margin: 20px 0 22px;
  letter-spacing: -1px
}
.about-hero h1 strong {
  color: #c2e875
}
.about-hero__copy > p:not(.eyebrow) {
  max-width: 650px;
  color: #d1e3d8;
  font-size: 17px
}
.about-hero__actions {
  display: flex;
  gap: 14px;
  margin-top: 34px
}
.about-hero__visual {
  height: 470px;
  position: relative
}
.identity-card {
  position: absolute;
  inset: 30px 28px 34px 25px;
  padding: 28px;
  border: 1px solid #ffffff35;
  border-radius: 28px;
  background: linear-gradient(145deg, #ffffff1e, #ffffff08);
  backdrop-filter: blur(10px);
  box-shadow: 0 28px 70px #001c123d;
  overflow: hidden
}
.identity-card:after {
  content: "Y";
  position: absolute;
  right: -25px;
  bottom: -100px;
  font: 800 330px/1 Arial;
  color: #ffffff09
}
.identity-card__top {
  display: flex;
  gap: 7px;
  align-items: center;
  color: #a9c8b4;
  font-size: 9px;
  letter-spacing: 1.5px
}
.identity-card__top span {
  margin-right: auto
}
.identity-card__top i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b4db58
}
.identity-card__mark {
  width: 180px;
  height: 180px;
  margin: 52px auto 25px;
  border: 1px solid #ffffff4a;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 0 38px #ffffff0a, 0 0 0 76px #ffffff06
}
.identity-card__mark b {
  font-size: 37px;
  color: #c8ec79
}
.identity-card__mark small {
  font-size: 10px;
  letter-spacing: 2px
}
.identity-card > p {
  text-align: center;
  font-size: 10px;
  letter-spacing: 2.8px;
  color: #b9d1c2
}
.identity-card__labels {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
  display: flex;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid #ffffff20
}
.identity-card__labels span {
  font-size: 10px;
  color: #cae0d1
}
.float-note {
  position: absolute;
  background: #fff;
  color: var(--color-text);
  border-radius: 12px;
  padding: 11px 15px;
  box-shadow: 0 12px 30px #00251630;
  font-size: 12px
}
.float-note b {
  color: var(--color-primary);
  font-size: 21px;
  margin-right: 5px
}
.float-note--a {
  right: -12px;
  top: 56px
}
.float-note--b {
  left: -20px;
  bottom: 120px
}
.about-hero__bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #002d1d66;
  border-top: 1px solid #ffffff16
}
.about-hero__bottom .container {
  height: 65px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center
}
.about-hero__bottom span {
  text-align: center;
  border-right: 1px solid #ffffff25;
  font-size: 13px;
  color: #d3e6da
}
.about-hero__bottom span:last-child {
  border: 0
}
.about-anchor {
  position: sticky;
  top: 0;
  z-index: 18;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 5px 18px #17412608
}
.about-anchor .container {
  display: flex;
  justify-content: center;
  gap: 58px;
  overflow: auto
}
.about-anchor a {
  padding: 16px 0;
  font-size: 12px;
  font-weight: 700;
  color: #637168;
  white-space: nowrap
}
.about-anchor a:hover {
  color: var(--color-primary)
}
.story {
  padding-bottom: 65px
}
.story__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 90px;
  align-items: center
}
.story__copy h2 {
  font-size: 40px;
  line-height: 1.4;
  margin: 0 0 22px
}
.story__copy h2 strong {
  color: var(--color-primary)
}
.story__copy > p {
  color: var(--color-text-secondary)
}
.story__copy .story__lead {
  font-size: 18px;
  color: var(--color-text);
  font-weight: 600
}
.story__quote {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  margin-top: 30px;
  padding: 21px 24px;
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-soft)
}
.story__quote span {
  font: 52px/1 Georgia;
  color: var(--color-primary)
}
.story__quote p {
  margin: 0;
  font-weight: 700;
  font-size: 17px
}
.story__image {
  position: relative;
  margin: 0
}
.story__image img {
  height: 480px;
  width: 100%;
  object-fit: cover;
  border-radius: 24px
}
.story__image:before {
  content: "";
  position: absolute;
  inset: -12px 28px 22px -12px;
  border: 1px solid #a8cf4580;
  border-radius: 27px;
  z-index: -1
}
.story__image figcaption {
  position: absolute;
  left: 25px;
  right: 25px;
  bottom: 25px;
  padding: 18px 21px;
  border-radius: 12px;
  background: #003c28df;
  color: #fff;
  display: flex;
  justify-content: space-between
}
.story__image figcaption span {
  font-size: 12px;
  color: #c8dbcf
}
.image-index {
  position: absolute;
  right: -28px;
  top: 36px;
  writing-mode: vertical-rl;
  font-size: 9px;
  letter-spacing: 1.8px;
  color: #809088
}
.fact-strip {
  margin-top: 65px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--color-border)
}
.fact-strip div {
  padding: 26px 28px;
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column
}
.fact-strip div:last-child {
  border: 0
}
.fact-strip strong {
  font-size: 35px;
  line-height: 1.1;
  color: var(--color-primary)
}
.fact-strip sup {
  font-size: 12px
}
.fact-strip span {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 7px
}
.purpose {
  padding: 90px 0;
  background: #f2f7f3
}
.purpose__grid {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: 80px
}
.purpose__intro h2 {
  font-size: 38px;
  line-height: 1.45;
  margin: 0
}
.purpose__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px
}
.purpose-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 28px;
  min-height: 310px;
  display: flex;
  flex-direction: column
}
.purpose-card > span {
  color: var(--color-primary);
  font-weight: 800;
  font-size: 11px
}
.purpose-card small {
  color: #8ca096;
  letter-spacing: 1.4px;
  font-size: 8px;
  margin-top: auto
}
.purpose-card h3 {
  font-size: 21px;
  margin: 9px 0
}
.purpose-card p {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0
}
.purpose-card--green {
  background: var(--color-primary-deep);
  color: #fff
}
.purpose-card--green > span {
  color: #c3e776
}
.purpose-card--green small, .purpose-card--green p {
  color: #b8cec0
}
.journey {
  overflow: hidden
}
.journey-line {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  padding-top: 30px
}
.journey-line:before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: 63px;
  height: 1px;
  background: #c4dbcb
}
.journey-step {
  padding: 0 27px;
  position: relative
}
.journey-step > span {
  width: 66px;
  height: 66px;
  border: 1px solid #b4d4bf;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 800;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 9px #fff
}
.journey-step small {
  display: block;
  margin-top: 27px;
  color: var(--color-primary);
  font-size: 8px;
  letter-spacing: 1.2px
}
.journey-step h3 {
  font-size: 18px;
  margin: 8px 0
}
.journey-step p {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0
}
.system {
  background: linear-gradient(135deg, #eff6f1, #fff)
}
.system__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 85px;
  align-items: center
}
.system__visual {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 26px;
  padding: 24px;
  box-shadow: var(--shadow-lg)
}
.system-orbit {
  height: 450px;
  position: relative;
  background: radial-gradient(circle, #e2f1e6 0, transparent 52%);
  overflow: hidden;
  border-radius: 18px
}
.system-orbit__ring {
  position: absolute;
  inset: 70px;
  border: 1px dashed #92c5a4;
  border-radius: 50%;
  transform: rotate(-13deg);
  box-shadow: 0 0 0 45px #f6faf733
}
.system-orbit__core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 145px;
  height: 145px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  box-shadow: 0 20px 40px #08773f40
}
.system-orbit__core small {
  font-size: 9px;
  letter-spacing: 2px
}
.system-orbit__core b {
  font-size: 23px;
  color: #d2ee93
}
.system-orbit__node {
  position: absolute;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 25px #0b68351a;
  border-radius: 20px;
  padding: 8px 15px;
  color: #28543a;
  font-size: 14px
}
.node--1 {
  left: 7%;
  top: 20%
}
.node--2 {
  right: 8%;
  top: 16%
}
.node--3 {
  right: 1%;
  top: 53%
}
.node--4 {
  right: 18%;
  bottom: 9%
}
.node--5 {
  left: 8%;
  bottom: 17%
}
.system__caption {
  display: flex;
  justify-content: space-between;
  padding: 16px 7px 0
}
.system__caption b {
  font-size: 13px
}
.system__caption span {
  font-size: 11px;
  color: var(--color-text-secondary)
}
.system__copy h2 {
  font-size: 39px;
  line-height: 1.4;
  margin: 0 0 20px
}
.system__copy > p {
  color: var(--color-text-secondary)
}
.system-list {
  margin: 25px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--color-border)
}
.system-list div {
  padding: 17px 12px 17px 0;
  border-bottom: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: 30px 1fr
}
.system-list span {
  grid-row: 1/3;
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 800
}
.system-list b {
  font-size: 14px
}
.system-list small {
  font-size: 12px;
  color: var(--color-text-secondary)
}
.business {
  padding: 92px 0;
  background: radial-gradient(circle at 95% 5%, #15764e, transparent 35%), var(--color-primary-deep);
  color: #fff
}
.business__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}
.business-card {
  min-height: 390px;
  padding: 42px;
  border: 1px solid #ffffff22;
  border-radius: 22px;
  background: #ffffff0a;
  display: flex;
  flex-direction: column
}
.business-card > div {
  display: flex;
  align-items: center;
  gap: 18px
}
.business-card > div span {
  font-size: 11px;
  color: #c7e97e
}
.business-card small {
  font-size: 9px;
  letter-spacing: 1.6px;
  color: #a8c4b3
}
.business-card h3 {
  font-size: 29px;
  margin: 55px 0 12px
}
.business-card p {
  color: #bed0c4;
  font-size: 14px;
  max-width: 520px
}
.business-card ul {
  list-style: none;
  padding: 20px 0 0;
  margin: auto 0 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid #ffffff1c
}
.business-card li {
  font-size: 10px;
  padding: 5px 10px;
  border: 1px solid #ffffff2b;
  border-radius: 20px
}
.business-card--accent {
  background: #c9e97c;
  color: #163823;
  border: 0
}
.business-card--accent > div span, .business-card--accent small {
  color: #39704c
}
.business-card--accent p {
  color: #466150
}
.business-card--accent ul {
  border-color: #203f2522
}
.business-card--accent li {
  border-color: #203f2530
}
.footprint__map {
  height: 470px;
  border-radius: 25px;
  background: #eff7f1;
  position: relative;
  overflow: hidden
}
.map-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#0d7d3c0b 1px, transparent 1px), linear-gradient(90deg, #0d7d3c0b 1px, transparent 1px);
  background-size: 48px 48px
}
.map-route {
  position: absolute;
  left: 29%;
  right: 29%;
  top: 45%;
  height: 130px;
  border-top: 2px dashed #68a77f;
  border-radius: 50%;
  transform: rotate(-22deg)
}
.location {
  position: absolute;
  width: 260px;
  padding: 27px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg)
}
.location i {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--color-accent);
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--color-primary)
}
.location small {
  font-size: 12px;
  color: var(--color-primary);
  letter-spacing: 1.2px
}
.location h3 {
  font-size: 21px;
  margin: 9px 0
}
.location p {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 0
}
.location--gz {
  left: 8%;
  bottom: 55px
}
.location--gz i {
  right: -42px;
  top: 45%
}
.location--jn {
  right: 8%;
  top: 55px
}
.location--jn i {
  left: -42px;
  bottom: 35%
}
.footprint__center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 0 25px #07883f14
}
.footprint__center b {
  font-size: 13px;
  letter-spacing: 1.3px
}
.footprint__center span {
  font-size: 9px;
  color: #d0e8d8
}
.footprint__note {
  text-align: center;
  color: #8a978f;
  font-size: 10px;
  margin: 15px 0 0
}
.proof {
  background: #fbfdfb
}
.proof__grid {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 85px;
  align-items: center
}
.proof__copy h2 {
  font-size: 39px;
  line-height: 1.4;
  margin: 0 0 20px
}
.proof__copy > p {
  color: var(--color-text-secondary)
}
.proof__number {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 28px 0
}
.proof__number strong {
  font-size: 70px;
  color: var(--color-primary);
  line-height: 1
}
.proof__number span {
  font-weight: 700
}
.proof__number small {
  font-weight: 400;
  color: var(--color-text-secondary);
  font-size: 11px
}
.proof__stack {
  height: 500px;
  position: relative
}
.proof__stack article {
  position: absolute;
  width: 300px;
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 9px;
  border-radius: 15px;
  box-shadow: 0 20px 45px #0c57292b
}
.proof__stack article:nth-child(1) {
  left: 1%;
  top: 68px;
  transform: rotate(-7deg)
}
.proof__stack article:nth-child(2) {
  left: 34%;
  top: 8px;
  z-index: 2
}
.proof__stack article:nth-child(3) {
  right: 1%;
  top: 80px;
  transform: rotate(7deg)
}
.proof__stack img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: top;
  border-radius: 9px
}
.proof__stack article span {
  display: block;
  padding: 11px 5px 4px;
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 700;
  text-align: center
}
.values {
  padding: 92px 0;
  background: #f0f6f2
}
.values__inner {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 80px
}
.values__title h2 {
  font-size: 39px;
  line-height: 1.45;
  margin: 0
}
.values__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #cbded1
}
.values__grid article {
  padding: 26px 30px 26px 0;
  border-bottom: 1px solid #cbded1
}
.values__grid article:nth-child(even) {
  padding-left: 30px;
  border-left: 1px solid #cbded1
}
.values__grid span {
  font-size: 12px;
  color: var(--color-primary);
  font-weight: 800
}
.values__grid h3 {
  font-size: 18px;
  margin: 8px 0
}
.values__grid p {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 0
}
@media(max-width:980px) {
  .about-hero__inner, .story__grid, .purpose__grid, .system__grid, .proof__grid, .values__inner {
    grid-template-columns: 1fr;
    gap: 50px
  }
  .about-hero__visual {
    max-width: 620px;
    width: 100%;
    margin: auto
  }
  .about-anchor .container {
    justify-content: flex-start
  }
  .purpose__cards {
    grid-template-columns: repeat(3, 1fr)
  }
  .journey-line {
    grid-template-columns: 1fr 1fr;
    gap: 35px
  }
  .journey-line:before {
    display: none
  }
  .business__grid {
    grid-template-columns: 1fr
  }
  .proof__stack {
    max-width: 760px
  }
  .footprint__map {
    height: 600px
  }
  .location--gz {
    left: 5%;
    bottom: 45px
  }
  .location--jn {
    right: 5%;
    top: 45px
  }
  .map-route {
    left: 20%;
    right: 20%
  }
}
@media(max-width:640px) {
  .about-hero__inner {
    padding: 62px 0 120px
  }
  .about-hero h1 {
    font-size: 39px
  }
  .about-hero__actions {
    flex-direction: column;
    align-items: stretch
  }
  .about-hero__visual {
    height: 415px
  }
  .identity-card {
    inset: 15px 4px 30px
  }
  .identity-card__mark {
    width: 145px;
    height: 145px;
    margin-top: 40px
  }
  .float-note--a {
    right: -2px
  }
  .float-note--b {
    left: -2px
  }
  .about-hero__bottom .container {
    grid-template-columns: 1fr 1fr;
    height: 86px
  }
  .about-hero__bottom span:nth-child(2) {
    border: 0
  }
  .about-anchor a {
    padding: 13px 0
  }
  .about-anchor .container {
    gap: 28px
  }
  .story__copy h2, .purpose__intro h2, .system__copy h2, .proof__copy h2, .values__title h2 {
    font-size: 29px
  }
  .story__image img {
    height: 340px
  }
  .image-index {
    display: none
  }
  .fact-strip {
    grid-template-columns: 1fr 1fr
  }
  .fact-strip div:nth-child(2) {
    border-right: 0
  }
  .purpose {
    padding: 62px 0
  }
  .purpose__cards {
    grid-template-columns: 1fr
  }
  .purpose-card {
    min-height: 230px
  }
  .journey-line {
    grid-template-columns: 1fr
  }
  .journey-step {
    padding: 0 10px
  }
  .system-orbit {
    height: 355px
  }
  .system-orbit__ring {
    inset: 65px 32px
  }
  .system-orbit__node {
    padding: 6px 10px;
    font-size: 9px
  }
  .system__caption {
    flex-direction: column
  }
  .system-list {
    grid-template-columns: 1fr
  }
  .business {
    padding: 62px 0
  }
  .business-card {
    min-height: 370px;
    padding: 29px
  }
  .business-card h3 {
    font-size: 24px
  }
  .footprint__map {
    height: 690px
  }
  .footprint__center {
    top: 50%
  }
  .location {
    width: 245px
  }
  .location--jn {
    right: 20px;
    top: 35px
  }
  .location--gz {
    left: 20px;
    bottom: 35px
  }
  .location i {
    display: none
  }
  .map-route {
    left: 30%;
    right: 30%;
    top: 46%;
    height: 110px;
    transform: rotate(80deg)
  }
  .proof__stack {
    height: 420px
  }
  .proof__stack article {
    width: 200px
  }
  .proof__stack article:nth-child(1) {
    left: 0
  }
  .proof__stack article:nth-child(2) {
    left: 27%
  }
  .proof__stack article:nth-child(3) {
    right: 0
  }
  .proof__stack img {
    height: 275px
  }
  .values__grid {
    grid-template-columns: 1fr
  }
  .values__grid article:nth-child(even) {
    padding-left: 0;
    border-left: 0
  }
}