/* Full-width Sanenge panorama: water, environmental infrastructure and biogas. */
.hero.hero-energy{display:flex;align-items:center;min-height:clamp(680px,76vh,850px);background:var(--navy);color:#fff;isolation:isolate}
.hero-energy .hero-image{z-index:-3;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-energy .hero-shade{z-index:-2;background:linear-gradient(90deg,#032c43f2 0%,#032c43e6 24%,#032c43b3 43%,#032c4330 68%,#032c4310 100%),linear-gradient(0deg,#022c437d,transparent 45%)}
.hero-energy .hero-content{padding-block:72px 104px}
.hero-energy .kicker{color:#d7ece5;font-size:8px;letter-spacing:1.8px;margin-bottom:27px}
.hero-energy .kicker>span{background:#25d391}
.hero.hero-energy h1{font-size:clamp(47px,4.6vw,68px);font-weight:600;line-height:1.09;letter-spacing:-2.8px;max-width:820px}
.hero-energy h1 em{color:#50e3a4}
.hero-energy .hero-content>p:not(.kicker){font-size:15px;line-height:1.9;max-width:510px;color:#e2eeed;margin-top:28px}
.hero-energy .hero-actions{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:14px;margin-top:29px}
.hero-energy .hero-actions .btn{font-size:11px;min-height:52px;padding-inline:23px}
.hero-energy .hero-environment{display:inline-flex;align-items:center;gap:11px;font-size:10px;line-height:1.8;margin-top:26px;color:#d5e9e2}
.hero-energy .hero-environment>.icon:first-child{width:22px;height:22px;color:#56dea5}
.hero-energy .hero-environment>.icon:last-child{width:16px;height:16px;margin-left:2px}
.hero-energy .hero-note{display:block;font-size:9px;line-height:1.8;letter-spacing:.8px;color:#b7cdd1;margin-top:22px;max-width:470px}
.hero-energy .hero-bottom{position:absolute;inset:auto 0 0;padding:17px max(48px,calc((100% - 1320px)/2));background:#032c434a;border-top:1px solid #ffffff2b;color:#d2e5e3;font-size:7px;letter-spacing:1px;gap:24px}
.hero-energy .hero-bottom>a{color:#e1f2e9;white-space:nowrap}
@media(max-width:1199px){
  .hero.hero-energy{min-height:700px}
  .hero.hero-energy h1{font-size:clamp(47px,4.8vw,59px);max-width:720px}
  .hero-energy .hero-content{padding-block:64px 103px}
  .hero-energy .hero-shade{background:linear-gradient(90deg,#032c43f2,#032c43db 30%,#032c4366 65%,#032c4325),linear-gradient(0deg,#022c4380,transparent 50%)}
  .hero-energy .hero-bottom{padding-inline:32px}
}
@media(max-width:899px){
  .hero.hero-energy{min-height:690px}
  .hero-energy .hero-image{object-position:60% center}
  .hero.hero-energy h1{font-size:clamp(42px,6.9vw,59px);max-width:700px}
  .hero-energy .hero-content>p:not(.kicker){font-size:14px;max-width:480px}
  .hero-energy .hero-shade{background:linear-gradient(90deg,#032c43ed,#032c43ba 48%,#032c435c),linear-gradient(0deg,#032c4390,transparent 60%)}
}
@media(max-width:599px){
  .hero.hero-energy{min-height:735px;align-items:flex-start}
  .hero-energy .hero-image{object-position:65% center}
  .hero-energy .hero-shade{background:linear-gradient(90deg,#032c43e8,#032c43b3),linear-gradient(0deg,#032c43a8,transparent 65%)}
  .hero-energy .hero-content{padding-block:46px 100px}
  .hero-energy .kicker{font-size:6px;letter-spacing:1.2px;margin-bottom:25px}
  .hero.hero-energy h1{font-size:clamp(31px,9.8vw,44px);line-height:1.14;letter-spacing:-1.65px;max-width:100%}
  .hero-energy .hero-content>p:not(.kicker){font-size:13px;line-height:1.9;margin-top:24px;max-width:355px}
  .hero-energy .hero-actions{flex-direction:column;align-items:stretch;gap:11px;margin-top:25px}
  .hero-energy .hero-actions .btn{min-width:0;min-height:50px;font-size:11px;padding-inline:18px;justify-content:space-between}
  .hero-energy .hero-environment{font-size:9px;gap:9px;margin-top:25px}
  .hero-energy .hero-environment>.icon:first-child{width:20px;height:20px;flex-shrink:0}
  .hero-energy .hero-environment>.icon:last-child{display:none}
  .hero-energy .hero-note{font-size:8px;line-height:1.9;letter-spacing:.6px;margin-top:20px;max-width:290px}
  .hero-energy .hero-bottom{padding:16px 20px;gap:15px;font-size:5px;line-height:1.9}
  .hero-energy .hero-bottom>span{max-width:183px}
  .hero-energy .hero-bottom>a{font-size:5px;white-space:normal;max-width:88px;text-align:right}
}
@media(max-width:374px){
  .hero.hero-energy{min-height:730px}
  .hero.hero-energy h1{font-size:30px;letter-spacing:-1.55px}
  .hero-energy .hero-content>p:not(.kicker){font-size:12px}
  .hero-energy .hero-content{padding-top:39px}
}
