.ecoplasma{
display:grid;
grid-template-columns:1.05fr .95fr;
align-items:center;
min-height:680px;
overflow:hidden;
background:var(--color-mint-tint)
}
.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-manufactured-label{
bottom:22px
}
.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;
border:1px solid transparent;
border-radius:var(--radius-md);
transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease
}
.product-card p{
margin-top:7px;
font-size:var(--text-sm);
opacity:.75
}
/* Hover/keyboard-focus parity: reference effect supplied 2026-09-12 (external site,
   inspected manually, not part of this repo). border-color/transform/box-shadow reuse
   existing tokens (--color-teal, --color-primary via color-mix); translateY(-3px) and the
   .22s duration are the reference's own literal values, with no equivalent design token. */
.product-card:hover,
.product-card:focus-visible{
border-color:var(--color-teal);
transform:translateY(-3px);
box-shadow:0 20px 40px -30px color-mix(in srgb,var(--color-primary) 45%,transparent)
}
.product-card a{
transition:color .22s ease
}
.product-card:hover a,
.product-card:focus-visible a{
color:var(--color-teal-dark)
}
.number,.resource-grid small{
font:10px var(--font-mono);
letter-spacing:1px
}
.large{
grid-row:span 2;
background:var(--color-mint-tint)
}
.teal{
background:var(--color-teal)
}
.light{
background:var(--color-mist)
}
.dark{
grid-column:span 2;
background:var(--color-primary);
color:#fff
}
.ppe{
grid-column:span 3;
min-height:175px;
background:var(--color-mint-tint)
}
.card-arrow{
position:absolute;
right:22px;
bottom:19px;
font-size:19px
}
@media (min-width:781px) and (min-height:501px), (min-width:1025px){
.product-grid .large .category-photo-card-media{
height:300px
}
}
.numbers{
background:var(--color-mist)
}
.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:var(--color-mint-tint)
}
.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:var(--color-mint-tint)
}
.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;
overflow:hidden;
border-radius:var(--radius-md);
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:700
}
.news-note{
display:flex;
align-items:flex-start;
flex-direction:column;
min-height:360px;
padding:30px;
background:var(--color-teal);
border-radius:var(--radius-md)
}
.news-note .button{
margin-top:auto
}
.contact{
padding-top:130px;
padding-bottom:130px;
background:var(--color-teal-tint);
color:var(--color-primary);
text-align:center
}
.contact h2{
margin-bottom:35px
}
.at-a-glance{
background:#fff
}
.at-a-glance-inner{
max-width:1120px;
margin:0 auto
}
.at-a-glance h2{
margin-top:12px
}
.at-a-glance-timeline{
position:relative;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:var(--space-4);
list-style:none;
margin:48px 0 36px;
padding:0
}
.at-a-glance-timeline::before{
content:'';
position:absolute;
top:0;
left:calc(100%/8 - var(--space-3));
right:calc(100%/8 - var(--space-3));
height:1px;
background:var(--color-teal)
}
.at-a-glance-item{
position:relative;
padding-top:34px;
text-align:center
}
.at-a-glance-item::before{
content:'';
position:absolute;
top:-5px;
left:50%;
width:11px;
height:11px;
transform:translateX(-50%);
border-radius:50%;
background:var(--color-teal-dark)
}
.at-a-glance-year{
margin:0;
color:var(--color-primary);
font:500 clamp(30px,3.4vw,44px)/1 var(--font-mono);
letter-spacing:-1px
}
.at-a-glance-detail{
max-width:250px;
margin:16px auto 0;
color:var(--color-muted)
}
.at-a-glance .text-link{
display:inline-flex
}
.contact-detail{
margin-top:35px;
color:var(--color-muted);
font:11px var(--font-mono)
}

@media (max-width:780px), (orientation:landscape) and (max-height:500px) and (max-width:1024px){
: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:var(--color-primary)
}
.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-paper);
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)
}
.at-a-glance-timeline{
display:block;
padding-top:0
}
.at-a-glance-timeline::before{
top:6px;
left:5px;
right:auto;
bottom:6px;
width:1px;
height:auto
}
.at-a-glance-item{
padding-top:0;
padding-left:30px;
padding-bottom:var(--space-4);
text-align:left
}
.at-a-glance-item:last-child{
padding-bottom:0
}
.at-a-glance-item::before{
top:2px;
left:0;
transform:none
}
.at-a-glance-detail{
max-width:none;
margin:10px 0 0;
text-align:left
}
.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
}

}