/* Photo catalogue and independent appliance interactions. */
#services .catalogue-help{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;margin-top:32px;padding:40px;background:#fff;border:1px solid #e4c2cf;border-radius:20px}
#services .catalogue-help h3{color:#650b28;font-size:clamp(26px,2.4vw,34px);line-height:1.2;letter-spacing:-.025em;margin:0 0 16px}
#services .catalogue-help-copy p{color:#744554;font-size:18px;line-height:1.65;margin:0;max-width:560px}
#services .inline-lead-form{min-width:0}
#services .inline-lead-form label{display:block;color:#650b28;font-size:16px;font-weight:700;margin-bottom:10px}
#services .inline-lead-fields{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
#services .inline-lead-fields input{display:block;width:100%;min-width:0;height:58px;padding:0 16px;border:1px solid #cf9eb1;border-radius:10px;background:#fffafb;color:#380012;font:inherit;font-size:17px;outline-offset:3px}
#services .inline-lead-fields input::placeholder{color:#896575;opacity:1}
#services .inline-lead-fields input:focus-visible{outline:2px solid #8b3153}
#services .inline-lead-fields .btn{background:#57051f;border:1px solid #57051f;color:#fff;border-radius:10px;padding:16px 20px;gap:16px;min-height:58px;font-size:16px;white-space:nowrap}
#services .inline-lead-fields .btn:hover{background:#380012}
#services .inline-lead-form .form-status{font-size:15px;color:#650b28;line-height:1.5;margin:12px 0}
#services .inline-lead-form .form-status:empty{display:none}
#services .inline-lead-note{font-size:13px;line-height:1.6;color:#805965;margin:12px 0 0}
@media(max-width:1100px){#services .catalogue-help{gap:28px;padding:32px}#services .inline-lead-fields{grid-template-columns:1fr}#services .inline-lead-fields .btn{justify-content:center}}
@media(max-width:760px){#services .catalogue-help{grid-template-columns:1fr;gap:24px;padding:26px;margin-top:24px}#services .catalogue-help-copy p{font-size:17px}}
@media(max-width:400px){#services .catalogue-help{padding:22px 18px}#services .catalogue-help h3{font-size:26px}}
#services .section-head{margin-bottom:40px}
#services .section-head h2{margin-bottom:0}
#services .service{background:#380012;border-color:#5c172e;padding:16px 18px 22px;gap:0;box-shadow:0 10px 24px #38001212}
#services .service:is(:hover,:focus-visible,.is-active){background:#380012;border-color:#f4bfd0;box-shadow:0 16px 32px #3800122b;transform:translateY(-4px)}
#services .appliance-stage{flex:1;min-height:0;width:100%;overflow:visible}
#services .appliance-stage:before{display:none}
#services .catalogue-object{display:block;position:absolute;aspect-ratio:1;width:auto;height:100%;max-width:100%;max-height:none;perspective:700px;isolation:isolate;filter:none;transition:filter .4s}
#services .catalogue-object img{width:100%;height:100%;object-fit:contain;margin:0;filter:grayscale(1) brightness(.98) contrast(.88);user-select:none;pointer-events:none}
#services .service:is(:hover,:focus-visible,.is-active) .catalogue-object{filter:none}
#services .service h3{font-size:clamp(18px,1.5vw,22px);text-align:center;line-height:1.3;min-height:2.6em;display:flex;align-items:center;justify-content:center;margin:6px 0 0;color:#fff}
#services .catalogue-object>span{position:absolute;pointer-events:none}
.moving-door{inset:0;background-size:100% 100%;background-repeat:no-repeat;filter:grayscale(1) brightness(.98) contrast(.88);transform-origin:var(--hinge-x,30%) var(--hinge-y,50%);clip-path:var(--door-clip,polygon(30% 14%,70% 14%,70% 70%,30% 70%));transition:transform .8s cubic-bezier(.2,.65,.2,1)}
.cabinet-inside{left:var(--inside-x,30%);top:var(--inside-y,14%);width:var(--inside-w,40%);height:var(--inside-h,56%);border-radius:2px;background:linear-gradient(90deg,#4b4548,#c7c4bf 17%,#eeeae1 75%,#8a8081);box-shadow:inset 2px 0 6px #090105a3;opacity:0;transition:opacity .3s .05s;overflow:hidden;display:flex;flex-direction:column;justify-content:space-evenly;padding:5% 3%}
.cabinet-inside i{height:2px;width:100%;background:#f4f0e8;box-shadow:0 3px 2px #59514f88}
.door-light{left:var(--inside-x,30%);top:var(--inside-y,14%);width:var(--inside-w,40%);height:var(--inside-h,56%);background:radial-gradient(ellipse at 50% 10%,#fffbe9c2,transparent 75%);filter:blur(3px);opacity:0;mix-blend-mode:screen;transition:opacity .6s}
#services .service:is(:hover,:focus-visible,.is-active) .effect-cold-door .cabinet-inside,#services .service:is(:hover,:focus-visible,.is-active) .effect-cold-door .door-light{opacity:1}
#services .service:is(:hover,:focus-visible,.is-active) .effect-cold-door .moving-door{transform:rotateY(-48deg)}
.effect-fold-door .moving-door{transform-origin:50% var(--hinge-y,84%)}
.effect-fold-door .cabinet-inside{background:repeating-linear-gradient(0deg,transparent 0 9%,#9a9c9e99 10% 11%,transparent 12% 18%),linear-gradient(90deg,#17191b,#5c6064,#191b1d);padding:0;border:2px solid #979797}
#services .service:is(:hover,:focus-visible,.is-active) .effect-fold-door .cabinet-inside{opacity:1}
#services .service:is(:hover,:focus-visible,.is-active) .effect-fold-door .moving-door{transform:rotateX(-42deg)}
.interior-light{left:var(--light-x,23%);top:var(--light-y,40%);width:var(--light-w,54%);height:var(--light-h,36%);border-radius:4px;background:radial-gradient(ellipse at 75% 20%,#ffecc8df 0,#d27b326b 35%,#e8964022 70%,transparent 100%);box-shadow:inset 0 0 8px #ffc16a6b;mix-blend-mode:screen;opacity:0;transition:opacity .55s}
#services .service:is(:hover,:focus-visible,.is-active) .interior-light{opacity:1}
.moving-drum{left:var(--drum-x,32.5%);top:var(--drum-y,30.5%);width:var(--drum-w,34%);height:var(--drum-h,34%);border-radius:50%;background-size:var(--drum-bg-size,294.12% 294.12%);background-position:var(--drum-bg-pos,49.24% 46.21%);filter:grayscale(1) brightness(.98) contrast(.88);animation:drum-turn 3s linear infinite;animation-play-state:paused}
#services .service:is(:hover,:focus-visible,.is-active) .moving-drum{animation-play-state:running}
.burner{width:var(--burner-w,20%);height:var(--burner-h,20%);border:3px solid #ff2f27;border-radius:50%;background:repeating-radial-gradient(ellipse,transparent 0 3px,#ff3927b3 4px 5px,transparent 6px 8px);box-shadow:0 0 9px #ff3425,inset 0 0 7px #ff4c30;opacity:0;transition:opacity .6s;mix-blend-mode:screen}
.burner-1{left:23%;top:23%}.burner-2{left:57%;top:23%}.burner-3{left:23%;top:57%}.burner-4{left:57%;top:57%}
#services .service:is(:hover,:focus-visible,.is-active) .burner{opacity:.9}
.burner-2{transition-delay:.1s}.burner-3{transition-delay:.2s}.burner-4{transition-delay:.3s}
.air-stream{width:10%;height:24%;top:78%;border-left:3px solid #edf4f7;border-radius:48%;opacity:0;animation:air-draw 1.35s ease-in-out infinite;animation-play-state:paused}
.air-1{left:33%}.air-2{left:48%;animation-delay:.25s}.air-3{left:63%;animation-delay:.5s}
#services .service:is(:hover,:focus-visible,.is-active) .air-stream{animation-play-state:running}
.coffee-stream{left:var(--coffee-x,48%);top:var(--coffee-y,53%);width:2%;height:var(--coffee-h,15%);border-radius:20%;background:linear-gradient(90deg,#402013,#ad7242,#502513);box-shadow:0 0 1px #dd9c62;opacity:0;transform:scaleY(0);transform-origin:top}
.coffee-surface{left:var(--cup-x,42%);top:var(--cup-y,67%);width:var(--cup-w,15%);height:3%;border-radius:50%;background:#6a391f;opacity:0;transition:opacity .6s .5s}
#services .service:is(:hover,:focus-visible,.is-active) .coffee-stream{opacity:1;animation:coffee-flow 2.4s ease-in-out infinite}
#services .service:is(:hover,:focus-visible,.is-active) .coffee-surface{opacity:.9}
.steam{width:3%;height:14%;border-left:2px solid #fff2;filter:blur(1px);border-radius:50%;opacity:0;animation:steam-rise 2.2s ease-out infinite;animation-play-state:paused}
.effect-coffee-pour .steam{top:50%;left:46%}.effect-coffee-pour .steam-2{left:54%;animation-delay:.8s}
#services .service:is(:hover,:focus-visible,.is-active) .steam{animation-play-state:running}
.dust{width:2px;height:2px;top:82%;background:#ead8df;border-radius:50%;opacity:0;animation:dust-in 2s ease-in-out infinite;animation-play-state:paused}
.dust-1{left:24%}.dust-2{left:30%;animation-delay:.4s}.dust-3{left:20%;animation-delay:.8s}
#services .service:is(:hover,:focus-visible,.is-active) .dust{animation-play-state:running}
.moving-iron{inset:0;background-size:100% 100%;background-repeat:no-repeat;clip-path:var(--iron-clip,polygon(20% 20%,42% 20%,42% 40%,20% 40%));filter:grayscale(1) brightness(.98) contrast(.88);animation:iron-slide 3s ease-in-out infinite;animation-play-state:paused}
#services .service:is(:hover,:focus-visible,.is-active) .moving-iron{animation-play-state:running}
.effect-steam-iron .steam{top:var(--steam-y,23%);left:var(--steam-x,38%);animation-name:iron-steam}
.effect-steam-iron .steam-2{margin-left:3%;animation-delay:.4s}.effect-steam-iron .steam-3{margin-left:6%;animation-delay:.9s}
@keyframes drum-turn{to{transform:rotate(360deg)}}
@keyframes air-draw{0%{opacity:0;transform:translateY(10%) scaleY(.85)}25%,65%{opacity:.88}100%{opacity:0;transform:translateY(-45%) scaleY(1)}}
@keyframes coffee-flow{0%,100%{transform:scaleY(0);opacity:0}15%,85%{transform:scaleY(1);opacity:1}}
@keyframes steam-rise{0%{opacity:0;transform:translateY(5px) scaleX(.8)}30%{opacity:.45}100%{opacity:0;transform:translateY(-22px) scaleX(1.4)}}
@keyframes dust-in{0%{opacity:0;transform:translateX(-8px)}25%{opacity:.65}100%{opacity:0;transform:translateX(18px) translateY(2px)}}
@keyframes iron-slide{0%,100%{transform:translateX(0)}50%{transform:translateX(25%)}}
@keyframes iron-steam{0%{opacity:0;transform:translate(0,0)}35%{opacity:.3}100%{opacity:0;transform:translate(20px,-22px)}}
/* Effects aligned to the photographed product geometry. */
.object-fridge{--hinge-x:31.2%;--inside-x:31.4%;--inside-y:4.4%;--inside-w:37.5%;--inside-h:55.6%;--door-clip:polygon(31.2% 4%,69.1% 4%,69.1% 60.3%,31.2% 60.3%)}
.object-freezer{--hinge-x:30%;--inside-x:30.2%;--inside-y:4.6%;--inside-w:40%;--inside-h:88.8%;--door-clip:polygon(30% 4.4%,70.8% 4.4%,70.8% 93.8%,30% 93.8%)}
.object-dishwasher{--hinge-y:85.4%;--inside-x:19.6%;--inside-y:14.4%;--inside-w:60.8%;--inside-h:70.7%;--door-clip:polygon(19.3% 14.2%,80.8% 14.2%,80.8% 85.4%,19.3% 85.4%)}
.object-oven{--light-x:21.2%;--light-y:35%;--light-w:57.6%;--light-h:38.5%}
.object-microwave{--light-x:18%;--light-y:38%;--light-w:50%;--light-h:25.5%}
.object-dryer{--drum-x:34%;--drum-y:27%;--drum-w:32%;--drum-h:32%;--drum-bg-size:312.5% 312.5%;--drum-bg-pos:50% 39.706%}
.object-cooktop{--burner-w:27.4%;--burner-h:27.4%}
.object-cooktop .burner-1{left:18.5%;top:20%}.object-cooktop .burner-2{left:54.3%;top:20%}.object-cooktop .burner-3{left:18.5%;top:52.1%}.object-cooktop .burner-4{left:54.3%;top:52.1%}
.object-hood .air-stream{top:81%;height:23%;width:10%}
.object-coffee{--coffee-x:44.8%;--coffee-y:54.4%;--coffee-h:5.8%;--cup-x:40.2%;--cup-y:59.7%;--cup-w:19.3%}
.object-coffee .coffee-stream{width:1.3%;box-shadow:none}
.object-coffee .coffee-stream:after{content:'';position:absolute;left:750%;top:0;width:100%;height:100%;background:inherit;border-radius:inherit}
.object-coffee .coffee-surface{height:1.1%}
.object-coffee .steam{top:48%;left:47%}
.object-vacuum .dust{top:94%}
.object-ironing{--iron-clip:polygon(9% 29.9%,10.1% 26%,12.3% 20%,13.2% 18.2%,21.5% 19.2%,26.3% 22%,31.6% 29.9%);--patch-x:3%;--patch-y:13.5%;--patch-w:29%;--patch-h:16.8%;--steam-x:31%;--steam-y:20%}
#services .service:not(:hover):not(:focus-visible):not(.is-active) :is(.moving-drum,.air-stream,.steam,.dust,.moving-iron,.vacuum-brush){animation:none}
/* Short brush stroke; the vacuum body stays stationary. */
#services .object-vacuum img{clip-path:polygon(0 0,100% 0,100% 100%,50.5% 100%,50.5% 88.7%,42% 87.5%,39.7% 83.5%,29% 83.5%,27.7% 87.8%,15.2% 88.5%,15.2% 100%,0 100%)}
.vacuum-brush{inset:0;background-image:var(--photo);background-size:100% 100%;background-repeat:no-repeat;clip-path:polygon(15.2% 96.5%,15.2% 88.5%,27.7% 87.8%,29% 83.5%,39.7% 83.5%,42% 87.5%,50.5% 88.7%,50.5% 96.5%);filter:grayscale(1) brightness(.98) contrast(.88);transform-origin:35% 83.5%}
#services .service:is(:hover,:focus-visible,.is-active) .vacuum-brush{animation:brush-stroke 1.35s ease-in-out 1}
.object-vacuum .dust{width:3px;height:3px;animation-duration:1.1s;animation-iteration-count:1}
.object-vacuum .dust-2{animation-delay:.12s}.object-vacuum .dust-3{animation-delay:.24s}
@keyframes brush-stroke{0%,100%{transform:translateX(0) rotate(0)}45%{transform:translateX(-1.8%) rotate(1.4deg)}70%{transform:translateX(.7%) rotate(-.5deg)}}
#services .object-hood img{transform:translateY(-5%) scale(.84)}
.object-hood .air-stream{top:78%;height:22%;border-left-width:3px}
.object-hood .air-stream:after{content:'';position:absolute;width:7px;height:7px;left:-5px;top:0;border-top:2px solid #edf4f7;border-left:2px solid #edf4f7;transform:rotate(35deg)}
@media(max-width:1100px){#services .service{padding:12px 14px 16px}#services .service h3{font-size:18px}}
@media(max-width:900px){#services .service{padding:16px 20px 20px}#services .service h3{font-size:22px}}
@media(max-width:560px){#services .service{aspect-ratio:1;min-height:0;padding:9px 8px 12px}#services .appliance-stage{height:auto;flex:1;min-height:0}#services .service h3{font-size:15px;min-height:2.6em;margin-top:0}#services .section-head{margin-bottom:28px}}
@media(prefers-reduced-motion:reduce){#services .catalogue-object,#services .catalogue-object>span{animation:none!important;transition:none!important}#services .service:is(:hover,:focus-visible,.is-active) .moving-door{transform:none}#services .service:is(:hover,:focus-visible,.is-active) .cabinet-inside,#services .service:is(:hover,:focus-visible,.is-active) .door-light,#services .service:is(:hover,:focus-visible,.is-active) .iron-patch{opacity:0}}
