body{margin:0;background:#FFFFFF}
*{box-sizing:border-box}
a{color:#5A7222}a:hover{color:#003B42}
html{scroll-behavior:smooth}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 32px}
.sec{padding:112px 0}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.g6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.navlinks{display:flex}
.menu-btn{display:none}
.hero-float{display:block}
.hero-stage{width:100%;display:flex;justify-content:center;overflow:hidden}
.btn-p{transition:background .15s ease}
.btn-p:hover{background:#0E5A61 !important;color:#FFFFFF !important}
.btn-l:hover{background:#BCD779 !important;color:#003B42 !important}
.btn-o:hover{border-color:#003B42 !important;color:#003B42 !important}
.navlink:hover{background:#FFFFFF;color:#003B42}
.dd-item:hover{background:#F4F7F3}
.dd a:hover{color:#003B42}
.pd-link{position:relative;display:flex;align-items:center;gap:10px;margin:0 -10px;padding:9px 10px;border-radius:10px;transition:background .15s ease,color .15s ease,padding .15s ease}
.pd-link::before{content:"";width:6px;height:6px;flex:none;border-radius:99px;background:#A7C856;opacity:0;transform:scale(.4);transition:opacity .15s ease,transform .15s ease;margin-left:-16px}
.pd-link::after{content:"↗";margin-left:auto;font-weight:700;color:#5A7222;opacity:0;transform:translate(-4px,4px);transition:opacity .15s ease,transform .15s ease}
.pd-link:hover,.pd-link:focus-visible{background:#F4F7F3;color:#003B42 !important;padding-left:24px}
.pd-link:hover::before,.pd-link:focus-visible::before{opacity:1;transform:scale(1)}
.pd-link:hover::after,.pd-link:focus-visible::after{opacity:1;transform:translate(0,0)}
.pd-head{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 12px;margin-left:-12px;transition:background .15s ease}
.pd-head:hover{background:#EEF5DC}
.pd-cta{transition:background .2s ease,transform .2s ease}
.pd-cta:hover{background:#0E5A61 !important;transform:translateY(-2px)}
.ph{position:relative;overflow:hidden;background:#E3EFEF;display:flex;align-items:flex-end;justify-content:flex-start}
.ph-dark{background:#0E5A61}
.ph-label{position:relative;margin:14px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.9);font-size:12px;font-weight:600;color:#003B42;line-height:1.4}
.ph-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-60%);opacity:.5}
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,220px);gap:16px}
.gal-a{grid-column:span 2;grid-row:span 2}
.gal-b{grid-column:span 2}
.logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.gal{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,200px)}.logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.gal{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:220px}.gal-a,.gal-b{grid-column:auto;grid-row:auto}.logos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ft-links a{position:relative;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;transition:color .15s ease,transform .15s ease}
.ft-links a::before{content:"";width:6px;height:6px;border-radius:99px;background:#A7C856;margin-left:-14px;opacity:0;transform:scale(.4);transition:opacity .15s ease,transform .15s ease,margin .15s ease}
.ft-links a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:99px;background:#A7C856;transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.ft-links a:hover,.ft-links a:focus-visible{color:#003B42 !important;transform:translateX(4px)}
.ft-links a:hover::before,.ft-links a:focus-visible::before{opacity:1;transform:scale(1);margin-left:0}
.ft-links a:hover::after,.ft-links a:focus-visible::after{transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){.ft-links a,.ft-links a::before,.ft-links a::after{transition:none}}
/* ===== Micro-interactions ===== */
/* buttons: lift, shadow, press, arrow nudge */
.btn-p,.btn-o,.btn-l{transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,translate .2s ease,scale .1s ease}
.btn-p:hover,.btn-l:hover{translate:0 -2px;box-shadow:0 10px 22px rgba(0,59,66,.18)}
.btn-o:hover{translate:0 -2px;box-shadow:0 8px 18px rgba(0,59,66,.08)}
.btn-p:active,.btn-o:active,.btn-l:active{translate:0 0;scale:.98;box-shadow:none}
.btn-p svg,.btn-o svg{transition:translate .2s ease}
.btn-p:hover svg{translate:2px -2px}
.btn-o:hover > span{transition:scale .2s ease}
.btn-o:hover > span{scale:1.08}
/* text links with arrows */
a svg{transition:translate .2s ease}
a:hover > svg{translate:3px 0}
.navlink{transition:background .3s ease-in-out,color .3s ease-in-out,box-shadow .3s ease-in-out}
.navlink:active{scale:.97}
/* nav dropdown chevrons + panel entrance */
button[aria-expanded] > svg{transition:rotate .3s ease-in-out}
button[aria-expanded="true"] > svg{rotate:180deg}
.dd{transition:opacity .28s ease-in-out,translate .28s ease-in-out,visibility .28s ease-in-out}
.dd[data-open="false"]{opacity:0;translate:0 -10px;visibility:hidden;pointer-events:none}
.dd[data-open="true"]{opacity:1;translate:0 0;visibility:visible}
@media (max-width:900px){.dd{display:none !important}}
/* hero: gentle floating cards + pulsing lime dot */
div.hero-float[style*="box-shadow"]{animation:bob 6s ease-in-out infinite}
div.hero-float[style*="box-shadow"] + div.hero-float[style*="box-shadow"]{animation-delay:-3s}
.hero-visual > div[style*="backdrop-filter"]{animation:bob 5s ease-in-out infinite;transition:box-shadow .25s ease}
.hero-visual > div[style*="backdrop-filter"]:nth-of-type(2n){animation-duration:6.5s;animation-delay:-2s}
.hero-visual > div[style*="backdrop-filter"]:nth-of-type(3n){animation-duration:5.6s;animation-delay:-4s}
.hero-visual > div[style*="backdrop-filter"]:hover{box-shadow:0 18px 40px rgba(0,59,66,.22)}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
#top > span > span{animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(167,200,86,.7)}70%{box-shadow:0 0 0 10px rgba(167,200,86,0)}100%{box-shadow:0 0 0 0 rgba(167,200,86,0)}}
/* photos: slow zoom on hover inside their frames */
img[style*="object-fit: cover"]{transition:scale .6s cubic-bezier(.2,.8,.2,1)}
div:hover > img[style*="object-fit: cover"]{scale:1.05}
.card-h:hover img[style*="object-fit: cover"]{scale:1.06}
/* card icon wells pop on hover */
.card-h span[style*="width: 52px"],.card-h span[style*="width: 42px"]{transition:scale .25s ease,rotate .25s ease}
.card-h:hover span[style*="width: 52px"],.card-h:hover span[style*="width: 42px"]{scale:1.08;rotate:-4deg}
/* quality steps */
ol.g4 > li > span:first-child{transition:scale .25s ease,background .25s ease}
ol.g4 > li:hover > span:first-child{scale:1.1}
/* partner logo tiles */
.logos > div{transition:border-color .2s ease,translate .2s ease,box-shadow .2s ease,color .2s ease}
.logos > div:hover{border-color:#A7C856 !important;translate:0 -3px;box-shadow:0 10px 22px rgba(0,59,66,.08);color:#003B42 !important}
/* chips */
section span[style*="border-radius: 999px"][style*="padding: 8px"]{transition:background .2s ease,translate .2s ease}
section span[style*="border-radius: 999px"][style*="padding: 8px"]:hover{translate:0 -2px}
/* product filter tabs */
div[role="group"] button{position:relative;z-index:1;transition:background .4s cubic-bezier(.65,0,.35,1),color .45s cubic-bezier(.65,0,.35,1)}
.tab-ind{position:absolute;z-index:0;border-radius:999px;background:#003B42;box-shadow:0 6px 16px rgba(0,59,66,.18);pointer-events:none;transition:left .6s cubic-bezier(.65,0,.35,1),width .6s cubic-bezier(.65,0,.35,1),top .6s cubic-bezier(.65,0,.35,1),height .6s cubic-bezier(.65,0,.35,1),opacity .3s ease}
.tab-ind.moving{animation:liquid .6s cubic-bezier(.65,0,.35,1)}
@keyframes liquid{0%{border-radius:999px}45%{border-radius:999px / 70%}100%{border-radius:999px}}
@keyframes prodInA{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes prodInB{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.prod-grid > article{animation:none !important}
.prod-grid > article.is-new{animation:prodInA .55s cubic-bezier(0,0,.2,1) both !important}
.load-more svg{transition:translate .25s ease-in-out}
.load-more:hover svg{translate:0 3px}
.load-more:hover .lm-count{background:#A7C856;color:#003B42}
.lm-count{transition:background .25s ease-in-out,color .25s ease-in-out}
div[role="group"] button[aria-pressed="false"]:hover{background:rgba(255,255,255,.9)}
div[role="group"] button[aria-pressed="true"]:hover{background:transparent}
/* FAQ */
button[aria-expanded] > span{transition:background .25s ease,color .25s ease}
button[aria-expanded]:hover{color:#0E5A61}
.faq-item{transition:border-color .25s ease,box-shadow .25s ease}
.faq-item:has(button[aria-expanded="true"]){border-color:#A7C856 !important;box-shadow:0 8px 22px rgba(0,59,66,.06)}
/* smooth ease-in-out toggles: FAQ, mobile menu */
.collapse{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease-in-out,opacity .35s ease-in-out}
.collapse[data-open="true"]{grid-template-rows:1fr;opacity:1}
.collapse-inner{overflow:hidden;min-height:0}
.collapse .faq-a{translate:0 -6px;transition:translate .4s ease-in-out}
.collapse[data-open="true"] .faq-a{translate:0 0}
.faq-item button > span{transition:background .35s ease-in-out,color .35s ease-in-out,scale .35s ease-in-out}
.faq-item button[aria-expanded="true"] > span{scale:1.06}
/* form fields */
input,select,textarea{transition:border-color .2s ease,box-shadow .2s ease}
input:hover,select:hover,textarea:hover{border-color:#A9BEBC !important}
input:focus,select:focus,textarea:focus{border-color:#003B42 !important;box-shadow:0 0 0 4px rgba(167,200,86,.25)}
/* contact rows */
#quote a[href^="tel"] > span:first-child,#quote a[href^="mailto"] > span:first-child{transition:background .2s ease,scale .2s ease}
#quote a[href^="tel"]:hover > span:first-child,#quote a[href^="mailto"]:hover > span:first-child{background:#A7C856;scale:1.06}
#quote a[href^="tel"]:hover svg,#quote a[href^="mailto"]:hover svg{stroke:#003B42}
/* partner marquee: continuous left-to-right loop */
.marquee{position:relative;overflow:hidden;margin:0 -32px;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:16px;width:max-content;animation:marqueeLR 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marqueeLR{from{transform:translateX(calc(-50% - 8px))}to{transform:translateX(0)}}
.logo-tile{transition:border-color .2s ease,translate .2s ease,box-shadow .2s ease,color .2s ease}
.logo-tile:hover{border-color:#A7C856 !important;translate:0 -3px;box-shadow:0 10px 22px rgba(0,59,66,.08);color:#003B42 !important}
@media (max-width:720px){.marquee{margin:0 -16px}.logo-tile{width:160px !important;height:88px !important}}
@media (prefers-reduced-motion: reduce){.marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}
/* floating action buttons */
.fab{transition:translate .3s ease-in-out,box-shadow .3s ease-in-out,opacity .3s ease-in-out,visibility .3s ease-in-out,scale .12s ease-in-out}
.fab:hover{translate:0 -3px}
.fab:active{scale:.94}
.fab-wa:hover{box-shadow:0 14px 32px rgba(37,211,102,.45) !important;color:#FFFFFF}
.fab-wa::before{content:"";position:absolute;inset:0;border-radius:999px;background:#25D366;z-index:-1;animation:waPulse 2.8s ease-out infinite}
@keyframes waPulse{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(1.45);opacity:0}}
.fab-top:hover{background:#0E5A61 !important;box-shadow:0 14px 32px rgba(0,59,66,.35) !important}
.fab-top:hover svg{translate:0 -2px;transition:translate .25s ease-in-out}
.fab-top[data-show="false"]{opacity:0;visibility:hidden;translate:0 12px;pointer-events:none}
.fab-top[data-show="true"]{opacity:1;visibility:visible}
@media (max-width:720px){.fab-label{display:none}.fab-wa{padding:0 !important;width:56px;height:56px !important}.fab{bottom:16px !important}.fab-top{left:16px !important}.fab-wa{right:16px !important}}
/* Product filter: full-width three-part toggle on mobile */
.tl-short{display:none}
@media (max-width:600px){
div[role="group"][aria-label="Filter product areas"]{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px !important;width:100%;box-sizing:border-box}
div[role="group"][aria-label="Filter product areas"] button{padding:0 6px !important;font-size:13px !important;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.tl-full{display:none}
.tl-short{display:inline}
}
@media (max-width:340px){.tl-count{display:none}}
/* Quote section: info card and form as two separate cards on mobile */
@media (max-width:720px){
.quote-panel{background:transparent !important;padding:0 !important;border-radius:0 !important;overflow:visible !important;gap:20px !important}
.quote-mark{display:none}
.quote-info{background:#003B42;border-radius:24px;padding:32px 22px;overflow:hidden}
.quote-info::after{content:"";position:absolute;right:-40px;bottom:-40px;width:160px;height:160px;border-radius:999px;border:18px solid rgba(167,200,86,.08);pointer-events:none}
.quote-form{border:1px solid #D6E0DD;border-radius:24px !important;box-shadow:0 1px 2px rgba(0,59,66,.06),0 12px 30px rgba(0,59,66,.08);padding:24px 20px !important}
}
/* Values infographic */
.vi-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;position:relative}
.vi-track::before{content:"";position:absolute;left:10%;right:10%;top:42px;height:4px;border-radius:99px;background:#D6E0DD}
.vi-track::after{content:"";position:absolute;left:10%;right:10%;top:42px;height:4px;border-radius:99px;background:#A7C856;transform-origin:left;transform:scaleX(1)}
.vi-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;position:relative;z-index:1}
.vi-node{width:88px;height:88px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#003B42;color:#A7C856;box-shadow:0 0 0 10px #F4F7F3,0 12px 26px rgba(0,59,66,.18);margin-bottom:6px;transition:scale .35s cubic-bezier(.2,.8,.2,1),rotate .35s cubic-bezier(.2,.8,.2,1),background .3s ease-in-out,color .3s ease-in-out}
.vi-item:nth-child(even) .vi-node{background:#FFFFFF;color:#003B42;box-shadow:0 0 0 10px #F4F7F3,inset 0 0 0 2px #003B42,0 12px 26px rgba(0,59,66,.10)}
.vi-item:last-child .vi-node{background:#A7C856;color:#003B42}
.vi-item:hover .vi-node{scale:1.08;rotate:-6deg}
.vi-num{font-size:12px;font-weight:800;letter-spacing:.22em;color:#5A7222}
@supports (animation-timeline: view()){
.vi-track::after{animation:viGrow linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
.vi-item{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
}
@keyframes viGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:860px){
.vi-track{grid-template-columns:minmax(0,1fr);gap:22px}
.vi-track::before,.vi-track::after{left:42px;right:auto;top:44px;bottom:44px;width:4px;height:auto}
.vi-track::after{transform-origin:top}
@keyframes viGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.vi-item{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:20px;row-gap:4px;align-items:start;text-align:left}
.vi-node{grid-row:1 / span 3;margin-bottom:0}
.vi-num{padding-top:14px}
}
@media (prefers-reduced-motion: reduce){.vi-track::after{animation:none !important;transform:none}}
/* About collage: stack vertically on mobile */
@media (max-width:600px){
.about-collage{grid-template-columns:minmax(0,1fr) !important;grid-template-rows:none !important;grid-auto-rows:auto}
.about-collage > div{grid-row:auto !important;grid-column:auto !important}
.about-collage > div:nth-child(1){height:360px}
.about-collage > div:nth-child(2){height:220px}
.about-collage > div:nth-child(3){min-height:150px;gap:16px}
}
/* scroll reveal (supporting browsers only) */
@supports (animation-timeline: view()){
.sec .wrap > *,.sec .wrap.g2 > *,.g3 > article,.g5 > div,.gal > div,.logos > div{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
}
@keyframes reveal{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
.btn-p:hover,.btn-o:hover,.btn-l:hover,.logos > div:hover{translate:none}
div:hover > img[style*="object-fit: cover"],.card-h:hover img[style*="object-fit: cover"]{scale:1}
}
.card-h{transition:box-shadow .2s ease,transform .2s ease}
.card-h:hover{box-shadow:0 1px 2px rgba(0,59,66,.06),0 8px 24px rgba(0,59,66,.08);transform:translateY(-2px)}
.spin{animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
input,select,textarea{font:inherit}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:3px solid #5A7222;outline-offset:2px}
@media (prefers-reduced-motion: reduce){.spin{animation:none}html{scroll-behavior:auto}}
@media (max-width:1140px){.hero-float{display:none}}
@media (max-width:1000px){.g3,.g4,.g6{grid-template-columns:repeat(2,minmax(0,1fr))}.g5{grid-template-columns:repeat(3,minmax(0,1fr))}.g2{grid-template-columns:minmax(0,1fr);gap:40px}}
@media (max-width:900px){.navlinks{display:none}.nav-cta{display:none !important}.menu-btn{display:inline-flex}}
@media (max-width:720px){.wrap{padding:0 16px}.sec{padding:72px 0}.hero-visual{transform:scale(.56);transform-origin:top center;margin-bottom:-194px}}
@media (max-width:600px){.g3,.g4,.g5,.g6{grid-template-columns:minmax(0,1fr)}}

/* static-site additions */
[hidden]{display:none !important}
.navlink[aria-expanded="true"]{background:#FFFFFF;box-shadow:0 1px 2px rgba(0,59,66,.08)}
.prod-grid.anim{animation:prodInA .5s cubic-bezier(0,0,.2,1) both}
.prod-grid > article.is-hidden{display:none !important}