.dispenser-intro{position:relative;z-index:1;width:min(981px,100%);height:742px;margin:auto}
.dispenser-intro>img{position:absolute;max-width:none;height:auto}
.dispenser-product{left:196px;top:-21px;width:707px}
.dispenser-year{left:87px;top:75px;width:371px}
.dispenser-title{left:91px;top:168px;width:484px}
.dispenser-model{left:374px;top:272px;width:202px}
.dispenser-rule{left:89px;top:342px;width:488px}
.dispenser-badges{left:89px;top:364px;width:488px}
.dispenser-automatic{left:100px;top:425px;width:400px}
.dispenser-spray{left:99px;top:471px;width:294px}
.dispenser-certifications{left:99px;top:520px;width:225px}
.dispenser-features{position:relative;overflow:hidden;clip-path:inset(0);isolation:isolate;color:#fff}
.hygiene-backdrop{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;object-fit:cover;z-index:-2;pointer-events:none}
.hygiene-shade{position:absolute;inset:0;background:rgba(8,39,43,.48);z-index:-1}
.dispenser-feature-inner{position:relative;z-index:1;width:min(900px,94%);padding:12px 0 0;margin:auto}
.dispenser-feature-title{width:600px;margin:0 auto 21px}
.dispenser-icon-grid{display:grid;grid-template-columns:repeat(3,1fr);width:min(666px,100%);margin:auto}
.dispenser-icon-grid>img{width:100%;height:auto}
.dispenser-detail-inner{position:relative;z-index:1;width:min(900px,94%);margin:auto;padding:25px 0 82px}
.dispenser-video-row{display:grid;grid-template-columns:551fr 345fr;gap:4px;align-items:end}
.dispenser-video-title{display:flex;align-items:center;gap:4px;margin:0 auto 2px;width:92%}
.dispenser-video-title>img:first-child{width:32%;height:auto}
.dispenser-video-title>img:last-child{width:67%;height:auto}
.dispenser-video{aspect-ratio:551/302;border-radius:12px;overflow:hidden;background:#132c40}
.dispenser-video iframe{width:100%;height:100%;border:0;display:block}
.dispenser-function{width:100%}
.dispenser-info-panel{background:#fff;color:#222;border-radius:30px;box-shadow:0 8px 24px #061f3a45;padding:43px 38px 79px;margin:35px auto 0;width:min(889px,100%)}
.dispenser-detail-heading{width:176px;margin:0 auto 15px}
.dispenser-drawings{display:grid;grid-template-columns:540fr 639fr;gap:0;width:100%;margin:auto}
.dispenser-drawings>img{width:100%;height:100%;object-fit:fill}
.dispenser-size-heading{width:147px;margin:12px auto 18px}
.dispenser-size{width:600px;margin:auto}
.dispenser-spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:58px;align-items:start}
.dispenser-spec-heading{width:117px;margin:0 auto 27px}
.dispenser-spec-image{width:100%;height:auto}
.dispenser-notice{width:471px;margin:34px auto 0}
@media(min-width:761px) and (max-width:1000px){
 .dispenser-intro{width:100%;height:74.2vw}
 .dispenser-product{left:20%;top:-2.1vw;width:72%}
 .dispenser-year{left:8.9%;top:7.5vw;width:37.8%}
 .dispenser-title{left:9.3%;top:16.8vw;width:49.3%}
 .dispenser-model{left:38.1%;top:27.2vw;width:20.6%}
 .dispenser-rule{left:9.1%;top:34.2vw;width:49.7%}
 .dispenser-badges{left:9.1%;top:36.4vw;width:49.7%}
 .dispenser-automatic{left:10.2%;top:42.5vw;width:40.8%}
 .dispenser-spray{left:10.1%;top:47.1vw;width:30%}
 .dispenser-certifications{left:10.1%;top:52vw;width:22.9%}
}
@media(max-width:760px){
 .dispenser-intro{width:min(440px,100%);height:calc(119vw + 329px);max-height:853px}
 .dispenser-product{width:98%;left:1%;top:313px}
 .dispenser-year{width:62%;left:7%;top:25px}
 .dispenser-title{width:86%;left:7%;top:87px}
 .dispenser-model{width:36%;left:57%;top:calc(87px + 18.6vw)}
 .dispenser-rule{width:86%;left:7%;top:calc(87px + 31vw)}
 .dispenser-badges{width:86%;left:7%;top:calc(102px + 31vw)}
 .dispenser-automatic{width:76%;left:8%;top:calc(147px + 31vw)}
 .dispenser-spray{width:57%;left:8%;top:calc(183px + 31vw)}
 .dispenser-certifications{width:38%;left:8%;top:calc(216px + 31vw)}
 .dispenser-feature-inner{padding:25px 0 22px;width:90%}
 .dispenser-feature-title{width:100%;margin-bottom:18px}
 .dispenser-icon-grid{grid-template-columns:repeat(2,1fr);width:100%;gap:2px 12px}
 .hygiene-shade{background:rgba(8,39,43,.56)}
 .dispenser-detail-inner{width:94%;padding:28px 0 38px}
 .dispenser-video-row{display:flex;flex-direction:column;gap:24px;align-items:center}
 .dispenser-video-column{width:100%}
 .dispenser-video-title{width:100%;margin-bottom:10px}
 .dispenser-video{aspect-ratio:16/9}
 .dispenser-function{width:min(345px,94%)}
 .dispenser-info-panel{padding:28px 14px 30px;margin-top:28px;border-radius:18px}
 .dispenser-detail-heading{width:150px;margin-bottom:18px}
 .dispenser-drawings{grid-template-columns:1fr;gap:12px}
 .dispenser-drawings>img{height:auto;object-fit:contain}
 .dispenser-drawings>img:first-child{width:86%;margin:auto}
 .dispenser-size-heading{width:140px;margin:28px auto 18px}
 .dispenser-size{width:100%}
 .dispenser-spec-grid{grid-template-columns:1fr;gap:30px;margin-top:30px}
 .dispenser-spec-heading{width:110px;margin-bottom:16px}
 .dispenser-notice{width:100%;margin-top:28px}
}


.dispenser-accessible-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.dispenser-video.video-shell{aspect-ratio:auto;overflow:visible;background:transparent}
.dispenser-video-poster{background:radial-gradient(ellipse at 35% 40%,#3084a4,#102a40)}
.dispenser-video-poster>img{object-fit:contain}

/* The four copy lines share the original single reveal mask. */
.dispenser-intro-group{position:absolute;left:89px;top:342px;width:488px;height:160px}
.dispenser-intro-group>img{position:absolute;max-width:none;height:auto}
.dispenser-intro-group .dispenser-rule{left:0;top:0;width:100%}
.dispenser-intro-group .dispenser-badges{left:0;top:22px;width:100%}
.dispenser-intro-group .dispenser-automatic{left:11px;top:83px;width:400px}
.dispenser-intro-group .dispenser-spray{left:10px;top:129px;width:294px}
.js [data-dispenser-motion]{animation:var(--dispenser-animation);animation-play-state:paused;will-change:transform,opacity,clip-path}
.js [data-dispenser-motion].motion-in{animation-play-state:running}
.js [data-dispenser-motion][data-motion-state="done"]{animation:none;will-change:auto}
@keyframes dispenser-fade-in{from{opacity:0}to{opacity:1}}
@keyframes dispenser-slide-in{
 0%{opacity:0;animation-timing-function:step-end}
 .0001%{opacity:1;transform:translate(var(--motion-translate-x,-100%),var(--motion-translate-y,0%));clip-path:var(--motion-clip-start)}
 100%{transform:translate(0,0);clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
}
@keyframes dispenser-reveal-in{
 0%{opacity:0;animation-timing-function:step-end}
 .0001%{opacity:1;clip-path:var(--motion-clip-start)}
 100%{clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
}
@keyframes dispenser-flip-in{
 .0001%{transform:perspective(800px) rotateX(var(--motion-rotate-x,0deg)) rotateY(var(--motion-rotate-y,-45deg))}
 100%{transform:perspective(800px) rotateX(0deg) rotateY(0deg)}
}
@keyframes dispenser-fold-in{
 .0001%{transform:translate(var(--motion-origin-x,-50%),var(--motion-origin-y,0%)) perspective(800px) rotateX(var(--motion-rotate-x,0deg)) rotateY(var(--motion-rotate-y,90deg)) translate(calc(-1 * var(--motion-origin-x,-50%)),calc(-1 * var(--motion-origin-y,0%)))}
 100%{transform:translate(var(--motion-origin-x,-50%),var(--motion-origin-y,0%)) perspective(800px) rotateX(0deg) rotateY(0deg) translate(calc(-1 * var(--motion-origin-x,-50%)),calc(-1 * var(--motion-origin-y,0%)))}
}
@media(min-width:761px) and (max-width:1000px){
 .dispenser-intro-group{left:9.1%;top:34.2vw;width:49.7%;height:16.3vw}
 .dispenser-intro-group .dispenser-badges{top:2.2vw}
 .dispenser-intro-group .dispenser-automatic{left:2.2%;top:8.3vw;width:82.1%}
 .dispenser-intro-group .dispenser-spray{left:2%;top:12.9vw;width:60.4%}
}
@media(max-width:760px){
 .dispenser-intro-group{left:7%;top:calc(87px + 31vw);width:86%;height:130px}
 .dispenser-intro-group .dispenser-badges{top:15px}
 .dispenser-intro-group .dispenser-automatic{left:1.163%;top:60px;width:88.372%}
 .dispenser-intro-group .dispenser-spray{left:1.163%;top:96px;width:66.279%}
}
@media(prefers-reduced-motion:reduce){.js [data-dispenser-motion]{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important;will-change:auto}}

.dispenser-intro-group{z-index:1}

/* Mint molecular footage, scoped to this page. Product artwork keeps its original colors. */
.dispenser-molecule{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;object-fit:cover;z-index:-2;pointer-events:none;filter:hue-rotate(-45deg) saturate(.68) brightness(.88)}
.blue-section::before{background:#17695f}
.blue-section::after{background-color:rgba(2,41,38,.23)}
footer.blue-section::after{background-color:rgba(2,41,38,.23);background-image:linear-gradient(#022b2440,#022b2440),url('assets/bokeh-stripes.svg')}
.hygiene-backdrop{filter:brightness(1.14) saturate(1.12)}
.hygiene-shade{background:rgba(8,65,59,.20)}
/* Hide pending motion before the first paint, including delayed hero copy. */
.js [data-dispenser-motion]:not(.motion-in):not([data-motion-state="done"]){visibility:hidden}
.js .dispenser-icon-grid>[data-dispenser-motion]{animation:none;opacity:0;transform:perspective(850px) rotateY(-100deg);transform-origin:50% 50%;backface-visibility:hidden}
.js .dispenser-icon-grid>[data-dispenser-motion].motion-in{visibility:visible;animation:dispenser-icon-turn 1000ms cubic-bezier(.22,.7,.25,1) both}
.js .dispenser-icon-grid>[data-motion-state="done"]{visibility:visible;animation:none;opacity:1;transform:none}
@keyframes dispenser-icon-turn{from{opacity:0;transform:perspective(850px) rotateY(-100deg)}to{opacity:1;transform:perspective(850px) rotateY(0deg)}}
@media(prefers-reduced-motion:reduce){.js [data-dispenser-motion]{visibility:visible!important}.js .dispenser-icon-grid>[data-dispenser-motion]{animation:none!important;opacity:1;transform:none}}

/* Keep the compact phone artwork in place, trimming only the unused lower canvas. */
@media(max-width:440px){
 .dispenser-intro{height:calc(337px + 103.672vw);max-height:none}
}
/* Between phone and desktop layouts, leave room below the last copy line. */
@media(min-width:441px) and (max-width:760px){
 .dispenser-product{top:calc(225px + 31vw)}
 .dispenser-intro{height:calc(705px + 31vw);max-height:none}
}

/* Selected style 3: translucent circular glass, with the existing six-item reveal sequence. */
.dispenser-icon-grid{gap:30px 22px;padding:12px 0 35px}
.dispenser-feature-icon{min-width:0;text-align:center;color:#fff}
.dispenser-glass-icon{display:grid;place-items:center;width:132px;height:132px;max-width:100%;margin:0 auto 15px;border:1px solid #e0fffa77;border-radius:50%;background:linear-gradient(135deg,#ffffff35,#ffffff08);box-shadow:inset 0 1px 2px #fff7,0 8px 22px #003b4433;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dispenser-glass-icon svg{width:78px;height:78px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 4px #002f4666)}
.dispenser-feature-icon p{font-size:18px;line-height:1.65;font-weight:700;margin:0;text-shadow:0 1px 3px #003b4455}
@media(max-width:760px){.dispenser-icon-grid{gap:28px 14px;padding:10px 0 12px}.dispenser-glass-icon{width:110px;height:110px;margin-bottom:12px}.dispenser-glass-icon svg{width:68px;height:68px}.dispenser-feature-icon p{font-size:15px}}