/* Dimensional surfaces below the existing hero. */
.product-grid,.sector-grid,.about-points,.enquiry-grid{perspective:1400px}
.product-card,.sector,.about-point,.form-panel,.contact-detail{--depth-x:0deg;--depth-y:0deg;--depth-glow-x:50%;--depth-glow-y:30%;position:relative;transform-style:preserve-3d;isolation:isolate;transition:transform .35s ease,box-shadow .35s ease,border-color .3s ease;backface-visibility:hidden}
.product-card{overflow:visible;border-color:#cfdee2;border-radius:18px;background:linear-gradient(135deg,#fff,#f8fbfc);box-shadow:0 4px 0 #dae5e8,0 7px 0 #edf2f3,0 16px 30px #143a4511}
.product-card:before{content:'';position:absolute;inset:6px -3px -7px;border-radius:inherit;background:linear-gradient(140deg,#a3d9e7,#c7dfd1);transform:translateZ(-14px);z-index:-1;opacity:.65}
.product-card:after,.sector:after,.form-panel:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--depth-glow-x) var(--depth-glow-y),#ffffff8c,transparent 62%);opacity:0;transition:opacity .3s;transform:translateZ(45px)}
.depth-ready .product-card:hover,.depth-ready .product-card.is-tilting{transform:perspective(1100px) rotateX(var(--depth-x)) rotateY(var(--depth-y)) translateY(-8px);box-shadow:0 5px 0 #c4d9df,0 10px 0 #e3edf0,0 28px 42px #143a4525;border-color:#88c6d7}
.product-card:hover:after,.sector:hover:after,.form-panel:hover:after{opacity:.4}
.product-picture{border-radius:17px 17px 0 0;overflow:hidden;background:linear-gradient(135deg,#eaf4f6,#e6eee9);transform-style:preserve-3d;box-shadow:inset 0 -1px 0 #bfd1d54d}
.product-picture img{transform:perspective(800px) translateZ(18px) scale(.95);border-radius:12px;filter:drop-shadow(0 14px 13px #123b4520);transition:transform .6s ease,filter .6s ease;object-fit:cover;width:100%;height:100%}
.depth-ready .product-card.is-in-view .product-picture img{animation:product-depth-drift 8s ease-in-out infinite}
.depth-ready .product-card:nth-child(2n) .product-picture img{animation-delay:-2.7s}
.depth-ready .product-card:nth-child(3n) .product-picture img{animation-delay:-5.2s}
.depth-ready .product-card.is-tilting .product-picture img{animation-play-state:paused;filter:drop-shadow(0 19px 16px #123b4535)}
.product-number{z-index:3;background:#ffffffdb;padding:5px 9px;border:1px solid #d7e4e7;border-radius:6px;box-shadow:0 3px 0 #d7e4e766;transform:translateZ(38px)}
.product-body{transform:translateZ(18px);background:linear-gradient(180deg,#fff,#f9fcfb);border-radius:0 0 17px 17px;position:relative}
.product-body h3{transform:translateZ(8px)}
.product-body .text-button{background:linear-gradient(150deg,#edf7f2,#e4f1eb);border:1px solid #bfdacb;border-bottom:3px solid #97bba8;padding:8px 15px;border-radius:6px;box-shadow:0 4px 8px #174b3020;transform:translateZ(15px);transition:transform .2s,box-shadow .2s,background .2s}
.product-body .text-button:hover{transform:translateZ(24px) translateY(-2px);background:#e5f5fb;color:#0076a1;border-color:#8dc3d5;box-shadow:0 7px 12px #007ca320}
.product-body .text-button:active{transform:translateZ(14px);border-bottom-width:1px;margin-top:2px}
.filter{box-shadow:0 3px 0 #e3eaec,0 5px 9px #17394509;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.filter[aria-pressed=true]{box-shadow:0 3px 0 #0b3b22,0 7px 13px #18573525;background:linear-gradient(135deg,#25734a,var(--green))}
.filter:hover{transform:translateY(-2px)}
.filter:active{transform:translateY(2px);box-shadow:none}
.ribbon{border-top:1px solid #367d55;border-bottom:5px solid #103f27;box-shadow:inset 0 8px 13px #ffffff0a,0 8px 18px #18573514;position:relative}
.about{background:radial-gradient(ellipse at 80% 30%,#22774b 0%,#185735 55%,#123f29 100%)}
.about:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,transparent 20%,#ffffff05 42%,transparent 60%);background-size:200% 100%;animation:section-light-pass 16s ease-in-out infinite}
.about-points{gap:17px}
.about-point,.about-point:first-child,.about-point:last-child{padding:24px;border:1px solid #81b59b55;border-radius:14px;background:linear-gradient(135deg,#ffffff10,#ffffff05);box-shadow:0 4px 0 #0b3b2566,0 15px 26px #08281935}
.depth-ready .about-point.is-tilting{transform:perspective(1100px) rotateX(var(--depth-x)) rotateY(var(--depth-y)) translateY(-3px);border-color:#a8ded188;box-shadow:0 5px 0 #0b3b25aa,0 20px 28px #08281955}
.about-point>.icon{height:44px;width:44px;padding:8px;border:1px solid #b8e3d155;border-radius:12px;background:linear-gradient(145deg,#60b89066,#0d482d);box-shadow:0 4px 0 #0b3428,0 7px 12px #0b281944;transform:translateZ(24px) rotate(-7deg)}
.about-point>div{transform:translateZ(15px)}
.about-point h3{color:#fff}
.sectors{background:linear-gradient(150deg,#f1f6f7,#edf3f0);border-top:1px solid #dae4df;border-bottom:1px solid #e0e9e7}
.sector{overflow:visible;border-radius:18px;border-color:#cfdee1;background:linear-gradient(130deg,#fff,#f7fafb);box-shadow:0 4px 0 #d5e3e5,0 7px 0 #e8f0f0,0 18px 28px #143a4512}
.depth-ready .sector.is-tilting{transform:perspective(1100px) rotateX(var(--depth-x)) rotateY(var(--depth-y)) translateY(-6px);box-shadow:0 5px 0 #bbd5dc,0 9px 0 #e0edf0,0 25px 35px #143a4523}
.sector>.icon{width:54px;height:54px;padding:11px;border:1px solid #a8d8e6;border-radius:15px;background:linear-gradient(135deg,#e3f6fe,#cde9f1);box-shadow:0 4px 0 #aed0db,0 11px 16px #007ca318;transform:translateZ(32px) rotate(-7deg)}
.sector h3,.sector p{transform:translateZ(15px)}
.sector .number{border:1px solid #d5e4e7;background:#f2f8f8;border-radius:7px;padding:3px 8px;transform:translateZ(25px)}
.form-panel{transform-style:preserve-3d;border-color:#c9dce0;background:linear-gradient(135deg,#f3f8f8,#eaf1f1);box-shadow:0 5px 0 #d1e0e3,0 10px 0 #e6efef,0 24px 45px #143a4515}
.depth-ready .form-panel.is-tilting:not(:focus-within){transform:perspective(1400px) rotateX(var(--depth-x)) rotateY(var(--depth-y));box-shadow:0 6px 0 #bfd4d9,0 12px 0 #e4edee,0 28px 45px #143a4520}
.form-panel h3,.form-panel>p{transform:translateZ(13px)}
.form-panel form{position:relative;z-index:2;transform:translateZ(12px)}
.form-panel:after{transform:none;z-index:0}
.field input,.field select,.field textarea{box-shadow:inset 0 2px 5px #12374508,0 2px 0 #ffffffa3;border-color:#bdd2d7;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:inset 0 1px 4px #12374508,0 0 0 3px #009bd418}
.form-panel .button{background:linear-gradient(145deg,#267c4f,var(--green));border-top:1px solid #468c64;border-bottom:4px solid #0f3d24;box-shadow:0 7px 15px #18573525;transition:transform .2s,box-shadow .2s}
.form-panel .button:hover{transform:translateY(-3px);box-shadow:0 12px 20px #18573530}
.form-panel .button:active{transform:translateY(2px);box-shadow:0 2px 5px #18573520}
.contact-detail{padding:21px 18px;margin-bottom:13px;background:linear-gradient(120deg,#fff,#f5fafb);border:1px solid #d7e4e7;border-radius:11px;box-shadow:0 3px 0 #e4eef0,0 8px 15px #12374508}
.contact-detail>.icon{width:36px;height:36px;padding:7px;border-radius:9px;color:#0084b6;background:linear-gradient(145deg,#edfaff,#d2eaf2);border:1px solid #badce8;box-shadow:0 3px 0 #bcd7e0;transform:translateZ(17px)}
.contact-detail>div{transform:translateZ(10px)}
.depth-ready .contact-detail.is-tilting{transform:perspective(1200px) rotateX(var(--depth-x)) rotateY(var(--depth-y)) translateY(-2px)}
.site-footer{background:linear-gradient(145deg,#eff5f5,#e2eceb);box-shadow:inset 0 3px 0 #ffffffb3;border-top:5px solid #d6e4e3}
.footer-links a{padding:5px 0;transition:transform .25s,color .25s;text-shadow:0 1px 0 #fff}
.footer-links a:hover{transform:translateY(-3px);color:var(--green)}
.depth-ready .product-card:not(.is-in-view) .product-picture img{animation-play-state:paused}
@keyframes product-depth-drift{0%,100%{transform:perspective(900px) translate3d(0,0,12px) rotateY(-4deg) rotateX(1deg) scale(.93);filter:drop-shadow(5px 11px 10px #123b4520)}50%{transform:perspective(900px) translate3d(0,-6px,30px) rotateY(4deg) rotateX(-1deg) scale(.96);filter:drop-shadow(-5px 20px 14px #123b4535)}}
@keyframes section-light-pass{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@media(max-width:850px){.sector>.icon{width:48px;height:48px;padding:10px}.product-grid{gap:28px 23px}}
@media(max-width:520px){.product-grid{gap:28px}.about-point,.about-point:first-child,.about-point:last-child{padding:20px}.about-point>.icon{width:39px;height:39px;flex-shrink:0}.product-body .text-button{min-height:42px}.contact-detail{padding:18px 14px}.sector>.icon{width:45px;height:45px}.form-panel{box-shadow:0 4px 0 #d1e0e3,0 8px 0 #e6efef,0 15px 28px #143a4512}}
.motion-paused .product-card,.motion-paused .sector,.motion-paused .about-point,.motion-paused .form-panel,.motion-paused .contact-detail{transform:none!important}
.motion-paused .product-picture img{transform:perspective(800px) translateZ(18px) scale(.95)!important}
.motion-paused .product-card:after,.motion-paused .sector:after,.motion-paused .form-panel:after{opacity:0!important}
@media(prefers-reduced-motion:reduce){.product-card,.sector,.about-point,.form-panel,.contact-detail{transform:none!important}.product-picture img{transform:perspective(800px) translateZ(18px) scale(.95)!important}.product-card:after,.sector:after,.form-panel:after{opacity:0!important}}

/* Automatic depth on touch screens: no hover or gesture is required. */
@media(hover:none),(pointer:coarse){
 .depth-ready .product-card.is-in-view{animation:touch-card-depth 8s ease-in-out infinite;will-change:transform}
 .depth-ready .product-card:nth-child(2n){animation-delay:-3s}
 .depth-ready .product-card:nth-child(3n){animation-delay:-5s}
 .depth-ready .product-card.is-in-view .product-picture img{animation:touch-product-depth 7s ease-in-out infinite}
 .depth-ready .product-card:nth-child(2n) .product-picture img{animation-delay:-2s}
 .depth-ready .product-card:nth-child(3n) .product-picture img{animation-delay:-4s}
 .depth-ready .sector.is-in-view>.icon,.depth-ready .about-point.is-in-view>.icon,.depth-ready .contact-detail.is-in-view>.icon{animation:touch-icon-depth 7s ease-in-out infinite}
 .depth-ready .product-card:after{opacity:.22;animation:touch-light-depth 8s ease-in-out infinite}
}
@keyframes touch-card-depth{0%,100%{transform:perspective(1100px) rotateY(-2deg) rotateX(1deg) translateY(0)}50%{transform:perspective(1100px) rotateY(2deg) rotateX(-1deg) translateY(-4px)}}
@keyframes touch-product-depth{0%,100%{transform:perspective(900px) translate3d(-4px,0,16px) rotateY(-7deg) rotateX(2deg) scale(.93)}50%{transform:perspective(900px) translate3d(4px,-12px,34px) rotateY(7deg) rotateX(-2deg) scale(.97)}}
@keyframes touch-icon-depth{0%,100%{transform:perspective(700px) translate3d(0,0,20px) rotateY(-8deg) rotate(-5deg)}50%{transform:perspective(700px) translate3d(2px,-5px,30px) rotateY(8deg) rotate(2deg)}}
@keyframes touch-light-depth{0%,100%{opacity:.12;transform:translateZ(40px)}50%{opacity:.35;transform:translateZ(46px)}}
.depth-ready .product-card:not(.is-in-view),.depth-ready .product-card:not(.is-in-view):after{animation-play-state:paused}
.motion-paused .product-card,.motion-paused .sector>.icon,.motion-paused .about-point>.icon,.motion-paused .contact-detail>.icon{animation:none!important}
@media(prefers-reduced-motion:reduce){.product-card,.sector>.icon,.about-point>.icon,.contact-detail>.icon,.product-card:after{animation:none!important}}