.ecoplasma{
display:grid;
grid-template-columns:1.05fr .95fr;
align-items:center;
min-height:680px;
padding:var(--space-7) var(--page-padding);
overflow:hidden;
background:#d8ece8
}
.eco-visual{
position:relative;
height:500px
}
.eco-machine{
position:absolute;
top:62px;
left:22%;
width:260px;
height:380px;
border-radius:5px 5px 17px 17px;
background:linear-gradient(125deg,#e9eeed,#9dacab);
box-shadow:var(--shadow-soft),inset 3px 2px 10px #fff
}
.machine-door{
display:flex;
position:absolute;
top:54px;
left:23px;
align-items:center;
justify-content:center;
flex-direction:column;
width:213px;
height:235px;
border:11px solid #c5d0ce;
border-radius:4px;
background:radial-gradient(circle at 52% 42%,#233e42,#102e31 49%,#85a5a2 51%,#d9e0df 54%,#6e8987 56%,#193c3d 59%);
color:#a9e6dc;
line-height:.8;
text-transform:uppercase
}
.machine-door span{
font-size:23px;
letter-spacing:4px
}
.machine-door b{
font-size:25px;
letter-spacing:2px
}
.machine-panel{
display:flex;
position:absolute;
top:12px;
right:16px;
gap:4px
}
.machine-panel i{
width:7px;
height:7px;
border-radius:50%;
background:#578c89
}
.machine-panel i:first-child{
background:#d2e3dc
}
.eco-orbit{
position:absolute;
border:1px solid rgba(16,49,50,.25);
border-radius:50%
}
.orbit-a{
top:90px;
left:-60px;
width:530px;
height:280px;
transform:rotate(-27deg)
}
.orbit-b{
top:20px;
left:35px;
width:430px;
height:470px;
transform:rotate(38deg)
}
.eco-label{
position:absolute;
bottom:0;
left:0;
color:#557c7c;
font:10px var(--font-mono);
letter-spacing:1.3px
}
.eco-copy{
max-width:490px
}
.eco-copy>p:not(.eyebrow),.esg-copy>p:not(.eyebrow){
margin-top:20px;
color:#527070
}
.eco-copy ul{
padding:0;
margin:28px 0;
list-style:none
}
.eco-copy li{
padding:10px 0;
border-top:1px solid rgba(16,49,50,.18);
font-size:var(--text-sm);
font-weight:700
}
.eco-copy li::before{
content:'+';
margin-right:12px;
color:#388482
}
.products,.esg{
background:#fff
}
.product-grid{
display:grid;
grid-template-columns:1.2fr .8fr .8fr;
grid-template-rows:270px 260px;
gap:12px
}
.product-card{
display:flex;
position:relative;
flex-direction:column;
justify-content:space-between;
min-height:190px;
padding:22px;
overflow:hidden
}
.product-card p{
margin-top:7px;
font-size:var(--text-sm);
opacity:.75
}
.number,.resource-grid small{
font:10px var(--font-mono);
letter-spacing:1px
}
.large{
grid-row:span 2;
background:#dceceb
}
.teal{
background:var(--color-teal)
}
.light{
background:#eff2f0
}
.dark{
grid-column:span 2;
background:var(--color-primary);
color:#fff
}
.ppe{
grid-column:span 3;
min-height:175px;
background:#d8ece8
}
.card-arrow{
position:absolute;
right:22px;
bottom:19px;
font-size:19px
}
.product-icon{
position:absolute;
top:35px;
right:25px;
opacity:.8
}
.autoclave{
width:145px;
height:145px;
border:18px solid #91b6b3;
border-radius:50%;
box-shadow:inset 0 0 0 13px #b8d4d0
}
.seal{
width:90px;
height:85px;
border:8px solid var(--color-primary);
border-top:0
}
.seal::after{
content:'';
position:absolute;
top:23px;
left:1px;
width:70px;
border-top:7px solid var(--color-primary)
}
.wash{
width:110px;
height:80px;
border:6px solid #719c9a;
border-bottom:0;
border-radius:55px 55px 0 0
}
.numbers{
background:#f0f5f3
}
.number-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
border-top:1px solid var(--color-line)
}
.number-grid>div{
min-height:155px;
padding:25px 20px 10px 0;
border-right:1px solid var(--color-line)
}
.number-grid>div+div{
padding-left:22px
}
.number-grid>div:last-child{
border-right:0
}
.number-grid strong{
display:block;
font-size:clamp(36px,4vw,60px);
line-height:1;
letter-spacing:-3px
}
.number-grid strong span{
color:#569a98
}
.number-grid .credibility-word{
font-size:clamp(27px,2.8vw,43px);
letter-spacing:-2.5px
}
.number-grid p{
max-width:135px;
margin-top:12px;
font-size:11px
}
.number-grid small{
display:block;
color:var(--color-muted);
font-size:9px
}
.esg{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:80px
}
.esg-copy{
max-width:560px
}
.esg-art{
position:relative;
height:470px;
overflow:hidden;
background:#d3eae5
}
.esg-art>span{
position:absolute;
top:15px;
right:18px;
font:10px var(--font-mono);
letter-spacing:1px
}
.esg-art p{
position:absolute;
bottom:30px;
left:30px;
font:500 12px var(--font-mono);
letter-spacing:2px
}
.arc{
position:absolute;
right:-150px;
bottom:-145px;
width:530px;
height:530px;
border:1px solid #6aa5a2;
border-radius:50%
}
.arc-two{
right:-70px;
bottom:-65px;
width:370px;
height:370px
}
.arc-three{
right:10px;
bottom:10px;
width:210px;
height:210px;
background:#75b4b0
}
.head-copy{
width:280px;
color:#647b7a;
font-size:13px
}
.resources{
background:var(--color-mist)
}
.resource-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
border-top:1px solid var(--color-line);
border-left:1px solid var(--color-line)
}
.resource-grid a{
position:relative;
min-height:230px;
padding:25px;
border-right:1px solid var(--color-line);
border-bottom:1px solid var(--color-line);
transition:background var(--transition)
}
.resource-grid a:hover{
background:#d9eae7
}
.resource-grid a>span{
position:absolute;
right:25px;
font-size:25px
}
.resource-grid small{
color:#568d8d
}
.resource-grid h3{
margin-top:55px
}
.resource-grid p{
max-width:210px;
margin-top:8px;
color:#5d7474;
font-size:var(--text-sm)
}
.news-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:32px
}
.news-image{
height:230px;
margin-bottom:18px;
filter:saturate(.55)
}
.meta{
margin-bottom:14px;
color:#5e8e8d;
font:10px var(--font-mono);
letter-spacing:.7px
}
.news-card h3{
margin-bottom:18px
}
.news-card>a{
border-bottom:1px solid currentColor;
padding-bottom:3px;
font-size:11px;
font-weight:800
}
.news-note{
display:flex;
align-items:flex-start;
flex-direction:column;
min-height:360px;
padding:30px;
background:var(--color-teal)
}
.news-note .button{
margin-top:auto
}
.contact{
padding:130px 20px;
background:var(--color-primary);
color:#fff;
text-align:center
}
.contact h2{
margin-bottom:35px
}
.contact .eyebrow{
color:#9ed5d3
}
.contact-detail{
margin-top:35px;
color:#afc3c0;
font:11px var(--font-mono)
}

@media (max-width:780px){
:root{
--page-padding:6vw
}
.site-header{
height:68px
}
.nav,.header-contact{
display:none
}
.menu-toggle{
display:block;
z-index:2;
width:35px;
padding:7px;
border:0;
background:transparent;
color:#fff
}
.menu-toggle span{
display:block;
width:100%;
height:1px;
margin:6px 0;
background:currentColor
}
.nav.open{
display:flex;
position:absolute;
top:0;
right:0;
left:0;
flex-direction:column;
gap:16px;
padding:90px 6vw 30px;
background:var(--color-primary);
font-size:15px
}
.hero{
display:block;
min-height:auto
}
.hero-copy{
padding:90px 6vw 52px
}
.hero-visual{
height:300px;
margin-left:10vw;
clip-path:none
}
.image-tag{
bottom:20px;
left:0
}
.hero-footer{
display:none
}
.statement{
padding:90px 8vw
}
.statement>p:last-child{
margin-left:0
}
.section-pad{
padding:80px var(--page-padding)
}
.ecoplasma,.solutions,.esg{
grid-template-columns:1fr
}
.ecoplasma{
padding:50px var(--page-padding) 75px
}
.eco-visual{
height:390px
}
.eco-machine{
left:13%;
transform:scale(.8);
transform-origin:left top
}
.product-grid{
grid-template-columns:1fr 1fr;
grid-template-rows:auto
}
.product-card.large,.product-card.dark{
grid-column:span 2;
grid-row:span 1
}
.product-card.ppe{
grid-column:span 2;
min-height:160px
}
.solution-image{
min-height:330px
}
.solution-copy{
padding:75px 8vw
}
.number-grid{
grid-template-columns:1fr 1fr
}
.number-grid>div:nth-child(2){
border-right:0
}
.number-grid>div:nth-child(n+3){
border-top:1px solid var(--color-line)
}
.esg{
gap:40px
}
.esg-art{
height:330px
}
.resource-grid,.news-grid{
grid-template-columns:1fr
}
.footer-top,.footer-bottom{
flex-direction:column
}
.footer-columns{
grid-template-columns:1fr 1fr;
gap:28px
}
.footer-bottom{
gap:15px;
margin-top:35px
}
.footer-bottom div{
flex-wrap:wrap
}
.actions{
gap:18px
}

}

@media (max-width:480px){
h1{letter-spacing:-2.8px}
.button{justify-content:space-between;min-height:48px}
.actions .button{width:100%}
.hero-copy{padding-top:72px}
.number-grid strong{font-size:clamp(29px,9vw,38px)}
.number-grid .credibility-word{font-size:clamp(20px,6vw,26px);letter-spacing:-1.5px}
.eco-machine{left:7%}
}

@media (prefers-reduced-motion:reduce){
html{
scroll-behavior:auto
}
.reveal{
opacity:1;
transform:none;
transition:none
}
.button,.site-header,.resource-grid a{
transition:none
}

}