html,body{overflow-x:hidden}
.environmental-hero{--hero-header-offset:0;position:relative;isolation:isolate;display:block;min-height:min(900px,88vh);padding:clamp(48px,6vw,96px) 6vw;background:#f8fbf5;overflow:clip;scroll-margin-top:132px}
@supports not (overflow:clip){.environmental-hero{overflow:hidden}}
.environmental-hero:after{display:none}
.hero__inner{width:min(100%,1440px);min-height:100%;margin-inline:auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(32px,5vw,80px)}
.hero__content,.hero__visual{min-width:0;max-width:100%}
.environmental-hero .hero__content{position:relative;z-index:3;width:min(100%,720px)}
.hero__visual{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#f8fbf5}
.hero__visual picture,.hero__illustration{display:block;width:100%;height:100%}
.hero__illustration{max-width:100%;object-fit:cover;object-position:center;transform:scale(1.025);animation:heroImageBreath 18s ease-in-out infinite alternate}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.96) 35%,rgba(255,255,255,.64) 51%,rgba(255,255,255,.08) 78%,rgba(255,255,255,.02) 100%)}
.sun-glow{position:absolute;width:32vw;height:32vw;min-width:360px;min-height:360px;left:30%;top:5%;border-radius:50%;background:radial-gradient(circle,rgba(229,238,89,.22),transparent 68%);filter:blur(14px)}
.environmental-hero .hero__eyebrow{margin:0 0 14px;color:#075c51;font-size:clamp(.65rem,1vw,.8rem);font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.environmental-hero .hero__title{max-width:9ch;margin:0;color:#087f88;font-size:clamp(4.5rem,7vw,7rem);font-weight:900;line-height:.91;letter-spacing:-.055em;text-transform:uppercase;text-wrap:balance;overflow-wrap:normal;word-break:normal}
.hero__title span{display:block}
.environmental-hero .hero__description{max-width:640px;margin:20px 0 0;color:#173f44;font-size:clamp(.95rem,1.4vw,1.1rem);line-height:1.65}
.environmental-hero .hero__actions{display:flex;gap:12px;margin-top:24px}
.environmental-hero .button-ghost{background:rgba(255,255,255,.78);backdrop-filter:blur(8px)}
.hero-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:34px;padding-top:24px;border-top:1px solid rgba(7,92,81,.19)}
.hero-values article{display:grid;grid-template-columns:28px 1fr;gap:10px;min-width:0}
.hero-value-icon{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#e3f3d3;color:#07685c;font-size:9px;font-weight:900}
.hero-values strong{display:block;color:#0d514b;font-size:11px;line-height:1.2;text-transform:uppercase;letter-spacing:.04em}
.hero-values p{margin:6px 0 0;color:#526d69;font-size:10px;line-height:1.45}
.hero__mobile-status{display:none}
.hero-status-card{padding:12px;border:1px solid rgba(12,138,67,.1);border-radius:14px;background:rgba(255,255,255,.9);box-shadow:0 10px 26px rgba(19,72,48,.08)}
.hero-status-card small,.hero-status-card span{display:block;color:#617a74;font-size:9px;line-height:1.35}
.hero-status-card small{font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.hero-status-card strong{display:block;margin:5px 0 2px;color:#0b4c45;font-size:13px}
.hero-ui{position:absolute;z-index:4;inset:110px 4vw 70px 48%;pointer-events:none;transform:translate3d(var(--hero-shift-x,0),var(--hero-shift-y,0),0);transition:transform .35s ease-out}
.hero-float-card,.hero-capacity-card{position:absolute;border:1px solid rgba(255,255,255,.74);border-radius:18px;background:rgba(255,255,255,.86);box-shadow:0 20px 55px rgba(12,72,59,.17);backdrop-filter:blur(14px);animation:heroCardFloat 6.8s ease-in-out infinite}
.hero-float-card{display:flex;align-items:center;gap:12px;min-width:210px;padding:15px 18px}
.hero-float-card small,.hero-capacity-card small{display:block;color:#70847f;font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.hero-float-card strong{display:block;margin:5px 0 2px;color:#0b4c45;font-size:14px}
.hero-float-card div>span{color:#617a74;font-size:10px}
.hero-card-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#ddf1cf;color:#087f68;font-weight:900}
.resource-card{right:4%;top:13%}
.collection-card{left:9%;top:50%;animation-delay:-2.4s;animation-duration:7.7s}
.hero-capacity-card{right:3%;bottom:3%;width:230px;padding:18px 20px;animation-delay:-4s;animation-duration:8.6s}
.hero-capacity-card strong{display:block;color:#078896;font-size:38px;line-height:1}
.hero-capacity-card>span{display:block;margin:7px 0 9px;color:#274f4b;font-size:11px;line-height:1.35}
.particle-layer{position:absolute;inset:0;pointer-events:none}
.hero-particle{position:absolute;width:11px;height:7px;border-radius:100% 0 100% 0;background:rgba(78,151,24,.54);filter:blur(.15px);animation:leafDrift var(--duration,12s) linear infinite;animation-delay:var(--delay,0s);transform:rotate(var(--rotation,30deg))}
.hero-reveal{opacity:0;transform:translateY(18px);animation:heroReveal .7s ease forwards}
.hero-reveal:nth-child(2){animation-delay:.08s}
.hero-reveal:nth-child(3){animation-delay:.16s}
.hero-reveal:nth-child(4){animation-delay:.24s}
.hero-reveal:nth-child(5){animation-delay:.32s}
.environmental-hero .scroll-cue{text-transform:uppercase;color:#0c5d55}
@keyframes heroImageBreath{to{transform:scale(1.07)}}
@keyframes heroCardFloat{50%{transform:translateY(-9px)}}
@keyframes leafDrift{0%{translate:0 -10vh;rotate:0deg;opacity:0}10%{opacity:.72}100%{translate:24vw 112vh;rotate:420deg;opacity:0}}
@keyframes heroReveal{to{opacity:1;transform:none}}

@media(min-width:768px) and (max-width:1024px){
  .environmental-hero{min-height:auto;padding:48px 40px 64px;scroll-margin-top:118px}
  .hero__inner{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:28px}
  .hero__visual{position:relative;inset:auto;z-index:0;height:clamp(300px,42vw,360px);grid-column:2}
  .hero__visual picture,.hero__illustration{height:100%}
  .hero__illustration{object-fit:cover;object-position:68% center;animation:none;border-radius:28px}
  .hero-overlay{background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,0) 70%),linear-gradient(180deg,rgba(255,255,255,0) 64%,rgba(248,251,245,.36))}
  .sun-glow{display:none}
  .environmental-hero .hero__content{grid-column:1;grid-row:1}
  .environmental-hero .hero__title{font-size:clamp(3rem,6vw,4.4rem)}
  .environmental-hero .hero__description{font-size:.95rem}
  .environmental-hero .hero__actions{flex-wrap:wrap}
  .hero-values{grid-template-columns:1fr;margin-top:24px;padding-top:18px;gap:9px}
  .hero-values p{display:none}
  .hero-ui{inset:0;transform:none!important}
  .hero-float-card{min-width:160px;padding:10px 12px;transform:scale(.86);transform-origin:center}
  .resource-card{right:-8px;top:18px}
  .collection-card{left:-12px;top:auto;bottom:24px}
  .hero-capacity-card{display:none}
  .particle-layer{display:none}
  .environmental-hero .scroll-cue{display:none}
}

@media(max-width:767px){
  .environmental-hero{min-height:100svh;height:auto;padding:16px clamp(18px,5vw,24px) clamp(40px,8vw,56px);scroll-margin-top:108px}
  .hero__inner{display:flex;flex-direction:column;gap:0;width:100%}
  .hero__visual{position:relative;inset:auto;z-index:0;order:1;width:100%;height:clamp(150px,43vw,220px);margin:0 0 10px;overflow:hidden;border-radius:0}
  .hero__visual picture,.hero__illustration{height:100%}
  .hero__illustration{width:104%;max-height:220px;margin-left:auto;object-fit:cover;object-position:68% 42%;transform:translateX(4%);animation:none}
  .hero-overlay{background:linear-gradient(180deg,rgba(255,255,255,0) 52%,#f8fbf5 100%)}
  .sun-glow,.particle-layer,.hero-ui{display:none}
  .environmental-hero .hero__content{order:2;width:100%}
  .environmental-hero .hero__eyebrow{margin-bottom:10px;font-size:.66rem;letter-spacing:.13em}
  .environmental-hero .hero__title{max-width:8.6ch;font-size:clamp(2.45rem,11vw,3.5rem);line-height:.92;letter-spacing:-.05em}
  .environmental-hero .hero__description{max-width:31ch;margin-top:16px;font-size:.94rem;line-height:1.55}
  .environmental-hero .hero__actions{display:flex;flex-wrap:wrap;margin-top:20px}
  .environmental-hero .hero__primary-button{width:fit-content;min-height:46px;padding:12px 22px}
  .environmental-hero .button-ghost{width:fit-content;min-height:46px}
  .hero-values{display:none}
  .hero__mobile-status{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
  .environmental-hero .scroll-cue{display:none}
}

@media(max-width:420px){
  .hero__mobile-status{grid-template-columns:1fr}
}

@media(max-width:360px){
  .environmental-hero{padding-inline:16px}
  .hero__visual{height:145px}
  .environmental-hero .hero__title{font-size:clamp(2.15rem,10.5vw,2.8rem)}
  .environmental-hero .hero__description{font-size:.9rem}
  .environmental-hero .hero__actions{display:grid}
  .environmental-hero .hero__actions .button{width:100%}
}

@media(prefers-reduced-motion:reduce){
  .environmental-hero *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero-reveal{opacity:1;transform:none}
  .hero-ui{transform:none!important}
}