/* Service motion: compositor-driven artwork, isolated from readable content. */
.reading-progress{position:fixed;z-index:60;inset:0 auto auto 0;width:100%;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;pointer-events:none}
.motion-toggle{position:fixed;right:20px;bottom:20px;z-index:50;display:flex;align-items:center;gap:10px;min-height:42px;padding:10px 15px;border:1px solid #68705d;border-radius:30px;background:#161a15ed;color:#f4f4ec;box-shadow:0 6px 24px #0004;font-size:.75rem;font-weight:650;backdrop-filter:blur(12px)}
.motion-toggle[hidden]{display:none}
.motion-toggle-icon{width:12px;height:13px;border-inline:3px solid currentColor}
.motion-toggle[aria-pressed="true"] .motion-toggle-icon{width:0;height:0;border:6px solid transparent;border-left:9px solid currentColor;border-right:0}
.motion-toggle:disabled{cursor:default}
.service-stage{border-radius:24px;background:#171b16;border:1px solid #3a4132;overflow:hidden;box-shadow:0 35px 100px #0003}
.stage-topline{position:absolute;top:25px;left:28px;right:28px;display:flex;justify-content:space-between;gap:20px;z-index:3;font-size:.75rem;letter-spacing:.11em;color:#c2c8b8}
.stage-slides{position:absolute;inset:30px 0 70px}
.stage-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateX(45px) scale(.92);transition:opacity .65s,transform .85s cubic-bezier(.2,.8,.2,1),visibility .65s}
.stage-slide.is-active{opacity:1;visibility:visible;transform:none}
.stage-slide .service-scene{position:absolute;inset:0 0 95px;min-height:0;aspect-ratio:auto}
.stage-caption{position:absolute;bottom:22px;left:32px;right:28px;z-index:3;pointer-events:none}
.stage-caption p{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.stage-caption h2{font-size:clamp(1.7rem,2.5vw,2.4rem);line-height:1.04;max-width:460px}
.stage-controls{position:absolute;bottom:0;left:0;right:0;z-index:4;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #3a4132}
.stage-controls button{position:relative;min-height:70px;padding:12px 9px;background:transparent;border:0;border-right:1px solid #3a4132;font-size:.75rem;color:#bec5b4;overflow:hidden}
.stage-controls button:last-child{border-right:0}
.stage-controls button[aria-pressed="true"]{color:#fff;background:#ffffff08}
.stage-controls button[aria-pressed="true"]::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--scene-accent,#ff7a32);opacity:.4}
.stage-progress{position:absolute;left:0;top:0;height:2px;width:100%;transform-origin:left;background:var(--scene-accent,#ff7a32);transform:scaleX(0)}
html[data-motion="on"] .service-stage[data-autoplay="true"] button[aria-pressed="true"] .stage-progress{animation:stage-countdown 6s linear infinite}
.service-stage[data-active-service="pets"]{--scene-accent:#a8d8b2}
.service-stage[data-active-service="gym"]{--scene-accent:#baa1f7}
.service-stage[data-active-service="car"]{--scene-accent:#9ce0e8}
.service-stage[data-active-service="pets"] .stage-caption p{color:#a8d8b2}
.service-stage[data-active-service="gym"] .stage-caption p{color:#baa1f7}
.service-stage[data-active-service="car"] .stage-caption p{color:#9ce0e8}
.service-scene{--scene-accent:#ff7a32;position:relative;isolation:isolate;aspect-ratio:1.15;overflow:hidden;contain:paint}
.scene-pets{--scene-accent:#a8d8b2}
.scene-gym{--scene-accent:#baa1f7}
.scene-car{--scene-accent:#9ce0e8}
.scene-glow{position:absolute;inset:15% 12%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--scene-accent) 20%,transparent),transparent 68%);opacity:.8;animation:scene-breathe 7s ease-in-out infinite alternate}
.scene-floor{position:absolute;left:18%;right:18%;bottom:9%;height:15%;border:1px solid color-mix(in srgb,var(--scene-accent) 30%,transparent);border-radius:50%;background:radial-gradient(ellipse,#0005,transparent);transform:rotate(-5deg)}
.scene-orbit{position:absolute;inset:14% 17%;border:1px solid color-mix(in srgb,var(--scene-accent) 24%,transparent);border-radius:50%;transform:rotate(-25deg) scaleY(.76);animation:orbit-turn 16s linear infinite}
.orbit-two{inset:21% 10%;border-style:dashed;opacity:.6;animation-direction:reverse;animation-duration:22s}
.scene-art{position:absolute;inset:3% auto auto 50%;height:94%;aspect-ratio:1;max-width:96%;translate:-50% 0;z-index:2;transform:perspective(850px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .45s ease-out}
.scene-float{position:absolute;inset:0;animation:salon-float 5.5s cubic-bezier(.45,0,.55,1) infinite}
.atlas-window{position:absolute;width:100%;aspect-ratio:1;top:50%;transform:translateY(-50%);overflow:hidden;border-radius:50%;mask-image:radial-gradient(ellipse 52% 53% at 50% 51%,#000 59%,transparent 96%)}
.service-atlas{position:absolute;width:200%;height:200%;max-width:none;left:0;top:0;object-fit:fill;mix-blend-mode:lighten;pointer-events:none}
.scene-pets .service-atlas{left:-100%;top:0}
.scene-gym .service-atlas{left:0;top:-100%}
.scene-car .service-atlas{left:-100%;top:-100%}
.scene-pets .scene-float{animation-name:pet-bounce;animation-duration:4.5s}
.scene-gym .scene-float{animation-name:gym-lift;animation-duration:3.5s}
.scene-car .scene-float{animation-name:car-cruise;animation-duration:6s}
.scene-particles{position:absolute;inset:0;pointer-events:none}
.scene-particles i{position:absolute;width:7px;height:22px;left:20%;top:70%;border-radius:4px;background:var(--scene-accent);opacity:0;animation:salon-confetti 4s ease-out infinite}
.scene-particles i:nth-child(2){left:33%;top:65%;animation-delay:.7s;scale:.6}
.scene-particles i:nth-child(3){left:76%;top:75%;animation-delay:1.6s;scale:.8}
.scene-particles i:nth-child(4){left:81%;top:48%;animation-delay:2.3s;scale:.5}
.scene-particles i:nth-child(5){left:16%;top:44%;animation-delay:3.1s;scale:.7}
.scene-particles i:nth-child(6){left:62%;top:83%;animation-delay:.4s;scale:.4}
.scene-pets .scene-particles i,.scene-car .scene-particles i{width:17px;height:17px;background:transparent;border:1px solid var(--scene-accent);border-radius:50%;animation-name:soap-rise;animation-duration:5s}
.scene-gym .scene-particles i{width:3px;height:38px;border-radius:0;animation-name:energy-rise;animation-duration:2.7s}
.scene-sweep{position:absolute;inset:-10%;z-index:3;pointer-events:none;background:linear-gradient(110deg,transparent 30%,#ffffff0c 47%,#ffffff26 50%,transparent 62%);opacity:0;transform:translateX(-80%);animation:service-shine 8s ease-in-out infinite}
.scene-pets .scene-sweep{animation-delay:1.5s}
.scene-gym .scene-sweep{animation-delay:3s}
.scene-car .scene-sweep{animation-duration:5s}
.motion-service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.motion-service-card{display:block;min-width:0;background:#191d18;border:1px solid #363e31;border-radius:16px;overflow:hidden;transition:border-color .35s,box-shadow .35s}
.motion-service-card:hover{border-color:#7d8b6f;box-shadow:0 20px 40px #0004}
.motion-service-card .service-scene{aspect-ratio:1.06}
.motion-card-copy{padding:0 25px 28px}
.motion-card-copy>span:first-child{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.motion-card-copy h3{font-size:1.45rem;line-height:1.15;margin-block:14px 12px}
.motion-card-copy p{font-size:.875rem;min-height:3.3em}
.motion-card-copy .card-link{display:inline-block;font-size:.8125rem;margin-top:22px;text-decoration:underline;text-underline-offset:5px}
.service-motion-section{padding-bottom:0}
.service-visual{height:285px;position:relative;margin:-47px -48px 25px;background:#151a14;border-bottom:1px solid #3b4432;overflow:hidden}
.service-visual-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
.service-visual-slide.is-active{opacity:1;visibility:visible}
.service-visual .service-scene{height:100%;width:min(100%,400px);margin-inline:auto;aspect-ratio:auto}
.visual-caption{position:absolute;bottom:15px;left:23px;font-size:.6875rem;letter-spacing:.12em;color:#bdc8b0}
.service-tabs [aria-selected="true"]{box-shadow:0 4px 20px #ff7a321c}
#service-panel[data-active-service="pets"]{border-color:#52664d}
#service-panel[data-active-service="gym"]{border-color:#645479}
#service-panel[data-active-service="car"]{border-color:#416774}
html.js[data-motion="on"] .reveal{transition-duration:.95s}
html[data-motion="on"] .page-card.in-view:hover{transform:translateY(-8px)}
html[data-motion="on"] .motion-service-card.in-view:hover{transform:translateY(-8px)}
.service-scene *{animation-play-state:paused}
html[data-motion="on"]:not([data-page-hidden="true"]) .service-scene.in-motion *{animation-play-state:running}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after,html[data-page-hidden="true"] *,html[data-page-hidden="true"] *::before,html[data-page-hidden="true"] *::after{animation-play-state:paused!important}
html[data-motion="off"]{scroll-behavior:auto}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{transition:none!important}
html[data-motion="off"] .js .reveal,html[data-motion="off"] .reveal{opacity:1;transform:none}
html[data-motion="off"] .scene-art{transform:none}
@keyframes stage-countdown{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes scene-breathe{from{opacity:.4;transform:scale(.9)}to{opacity:1;transform:scale(1.15)}}
@keyframes orbit-turn{0%{transform:rotate(-25deg) scaleY(.76)}50%{transform:rotate(155deg) scaleY(.6)}100%{transform:rotate(335deg) scaleY(.76)}}
@keyframes salon-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-13px) rotate(4deg)}}
@keyframes pet-bounce{0%,100%{transform:translateY(3px) rotate(-2deg)}35%{transform:translateY(-13px) rotate(3deg)}65%{transform:translateY(-4px) rotate(-1deg)}}
@keyframes gym-lift{0%,100%{transform:translateY(10px) rotate(-10deg)}45%,55%{transform:translateY(-18px) rotate(9deg)}}
@keyframes car-cruise{0%,100%{transform:translate(-10px,3px) rotate(-2deg)}50%{transform:translate(12px,-7px) rotate(2deg)}}
@keyframes salon-confetti{0%{opacity:0;transform:translate(0,20px) rotate(-30deg)}25%{opacity:.65}100%{opacity:0;transform:translate(22px,-90px) rotate(110deg)}}
@keyframes soap-rise{0%{opacity:0;transform:translateY(35px) scale(.4)}20%{opacity:.5}85%{opacity:.25}100%{opacity:0;transform:translate(12px,-120px) scale(1.2)}}
@keyframes energy-rise{0%{opacity:0;transform:translateY(50px) scaleY(.25)}25%{opacity:.5}100%{opacity:0;transform:translateY(-85px) scaleY(1.7)}}
@keyframes service-shine{0%,60%{opacity:0;transform:translateX(-80%)}70%{opacity:.6}87%,100%{opacity:0;transform:translateX(80%)}}
@media(max-width:1100px){.motion-service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.service-visual{margin:-32px -32px 25px}.stage-caption{left:24px}.stage-caption h2{font-size:1.8rem}.stage-controls button{padding-inline:5px}.motion-service-card .service-scene{aspect-ratio:1.4}}
@media(max-width:800px){.service-visual{margin:-26px -26px 25px;height:250px}.stage-topline{left:20px;right:20px;font-size:.6875rem}.stage-controls button{font-size:.6875rem}.stage-caption h2{font-size:1.55rem}.stage-slide .service-scene{bottom:100px}.scene-particles i:nth-child(n+5){display:none}}
@media(max-width:580px){.hero .service-stage{height:530px;margin-left:0;border-radius:20px}.stage-slide .service-scene{bottom:105px}.stage-caption h2{font-size:2rem}.stage-caption{left:25px;bottom:25px}.stage-controls button{font-size:.75rem;min-height:70px}.stage-topline{left:24px;right:24px}.motion-service-grid{gap:12px}.motion-card-copy{padding:0 15px 22px}.motion-card-copy h3{font-size:1.15rem}.motion-card-copy p{font-size:.8125rem;min-height:5em}.motion-card-copy>span:first-child{font-size:.6875rem;letter-spacing:.04em}.motion-card-copy .card-link{font-size:.75rem}.motion-service-card .service-scene{aspect-ratio:1}.service-visual{margin:-30px -25px 25px;height:250px}.motion-toggle{right:12px;bottom:12px;padding:10px 13px}.motion-toggle-label{font-size:.75rem}footer{padding-bottom:75px}}
@media(prefers-reduced-motion:reduce){.service-scene *{animation:none!important}.stage-slide,.service-visual-slide,.scene-art{transition:none}.scene-particles,.scene-sweep{display:none}.stage-progress{animation:none!important}.reading-progress{display:none}}
/* Reserve caption space even when headings wrap at smaller widths. */
.stage-slide{display:flex;flex-direction:column}
.stage-slide .service-scene{position:relative;inset:auto;flex:1;min-height:0}
.stage-caption{position:relative;inset:auto;margin:0 28px 22px 32px}
@media(max-width:580px){.stage-caption{margin:0 25px 25px}}