:root{--phone-facing:0}
.phone-scene{width:465px;height:697.5px;top:-38px;left:11%;transform:perspective(1500px) translateX(calc(var(--travel)*-560px)) rotateY(calc(-27deg + var(--phone-facing)*27deg));transform-origin:center center;will-change:transform}
.hero-visual{height:620px}.route-popup{--stop-reveal:0;position:absolute;z-index:5;display:flex;flex-direction:column;align-items:center;gap:3px;transform:translate(-50%,calc(-100% + (1 - var(--stop-reveal))*12px)) scale(calc(.76 + var(--stop-reveal)*.24));opacity:var(--stop-reveal);pointer-events:none;filter:drop-shadow(0 3px 4px #102c4425)}
.route-popup>span{display:grid;place-items:center;width:31px;height:31px;border-radius:10px;background:var(--navy);border:2px solid white;color:#ff9b5c}.route-popup svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.route-popup-pet svg{fill:currentColor;stroke-width:.5}.route-popup strong{background:white;color:var(--navy);padding:4px 7px;border-radius:6px;font-size:8px;white-space:nowrap;line-height:1.2;letter-spacing:-.02em}
.services-section{padding-bottom:0}.services-heading{margin-bottom:40px}.service-chapter{position:relative;height:180svh;--scene-p:0;--arrival:1;--woman-in:1;--man-in:1;--pet-in:1;--pet-settle:1}.js .service-chapter{--arrival:0;--woman-in:0;--man-in:0;--pet-in:0}
.service-stage{position:sticky;top:80px;height:calc(100svh - 80px);min-height:570px;display:grid;grid-template-columns:1.12fr 1fr;gap:88px;align-items:center;padding-block:65px;background:var(--paper)}
.service-chapter.reverse .service-media{order:2}.service-chapter.reverse .service-copy{order:1}.service-chapter .service-media{aspect-ratio:3/2;border-radius:24px;transform:none!important;opacity:1!important;isolation:isolate;box-shadow:0 20px 65px #102c4409}.service-chapter .service-copy{transform:translateY(calc((1 - var(--scene-p))*10px));opacity:1}.service-chapter .service-copy h3{font-size:clamp(2.6rem,4.3vw,4rem)}.service-chapter .service-number{font-size:6rem;top:-55px}.scene-cue{position:absolute;bottom:26px;left:64px;right:64px;display:flex;gap:15px;align-items:center;color:#6e8293}.scene-cue span{font-size:.55rem;letter-spacing:.12em}.scene-cue i{display:block;width:90px;height:2px;background:#dbe4eb;position:relative;overflow:hidden}.scene-cue i:after{content:'';position:absolute;inset:0;background:var(--orange);transform:scaleX(var(--scene-p));transform-origin:left}.scene-cue b{font-size:.62rem;letter-spacing:.1em;font-weight:500}
.service-chapter .scene-background{transform:scale(calc(1.03 + var(--scene-p)*.025))!important;transition:none!important}.service-chapter .scene-foreground{transition:none!important;translate:none!important;will-change:transform;filter:none}
.service-chapter[data-service=vai] .car-layer{left:3%;top:8%;width:94%;height:94%;object-fit:contain;transform:translateX(calc((1 - var(--arrival))*105%))!important;opacity:var(--arrival)!important;filter:blur(calc((1 - var(--arrival))*7px))!important}
.service-chapter[data-service=entrega] .people-layer{left:0;top:7%;width:100%;height:94%;object-fit:contain;object-position:center bottom;filter:none!important}
.service-chapter .woman-layer{clip-path:inset(0 43% 0 0);opacity:var(--woman-in)!important;transform:translateY(calc((1 - var(--woman-in))*25px))!important}
.service-chapter .man-layer{clip-path:inset(0 0 0 53%);opacity:var(--man-in)!important;transform:translateX(calc((1 - var(--man-in))*30px))!important}
.service-chapter[data-service=pet] .pet-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:translateY(calc((1 - var(--pet-in))*34px)) scale(calc(.94 + var(--pet-in)*.06 + var(--pet-settle)*.025)) rotate(calc((1 - var(--pet-in))*-3deg))!important;opacity:var(--pet-in)!important;filter:none!important;transform-origin:39% 85%}
@media(min-width:801px) and (max-height:780px){.service-stage{padding-block:45px}.phone-scene{width:425px;height:637.5px;top:-15px;left:9%}.hero-visual{height:580px}}
@media(max-width:1100px) and (min-width:801px){.service-stage{gap:45px}.phone-scene{width:415px;height:622.5px;left:0;top:-20px;transform:perspective(1500px) translateX(calc(var(--travel)*-460px)) rotateY(calc(-27deg + var(--phone-facing)*27deg))}.service-chapter .service-copy p{font-size:.9rem}.scene-cue{left:40px;right:40px}}
@media(max-width:800px){.hero-sticky{min-height:666px}.hero-grid{grid-template-rows:25px 182px minmax(290px,1fr) 115px}.hero-visual{height:290px}.phone-scene{width:238px;height:357px;top:-34px;left:calc(50% - 118px);transform:perspective(950px) rotateY(calc(-25deg + var(--phone-facing)*25deg));filter:drop-shadow(0 14px 18px #001c3660)}.phone-screen{border-radius:19px}.label-top{top:40px}.label-bottom{bottom:24px}.orbit-one{width:280px;height:250px;left:calc(50% - 140px);top:10px}.route-popup>span{width:19px;height:19px;border-radius:6px;border-width:1px}.route-popup svg{width:13px;height:13px}.route-popup strong{font-size:5.7px;padding:3px 4px;border-radius:4px}.route-popup{gap:2px}.service-chapter{height:180svh}.service-stage{top:72px;height:calc(100svh - 72px);min-height:650px;grid-template-columns:1fr;grid-template-rows:auto auto;gap:18px;align-content:center;padding:28px 24px 45px}.service-chapter.reverse .service-media,.service-chapter.reverse .service-copy{order:initial}.service-chapter .service-media{width:100%;max-width:470px;justify-self:center;aspect-ratio:3/2;border-radius:19px;box-shadow:none}.service-chapter .service-copy{padding:0;max-width:470px;justify-self:center;width:100%}.service-chapter .service-copy>.eyebrow{font-size:.58rem;margin-bottom:10px}.service-chapter .service-copy h3{font-size:2.55rem}.service-chapter .service-copy p{font-size:.82rem;line-height:1.65;margin-top:13px;max-width:none}.service-chapter .service-detail{font-size:.68rem;margin:13px 0;line-height:1.6}.service-chapter .service-copy .button{font-size:.73rem;padding:12px 18px}.service-chapter .service-number{font-size:4.4rem;top:-22px}.scene-cue{left:24px;right:24px;bottom:18px}.scene-cue span{font-size:.47rem}.scene-cue i{width:60px}.scene-cue b{font-size:.53rem}.service-chapter[data-service=vai] .car-layer{filter:blur(calc((1 - var(--arrival))*4px))!important}}
@media(max-width:370px){.hero-slide h1,.hero-slide h2{font-size:2.32rem}.hero-slide p{font-size:.68rem}.phone-scene{width:228px;height:342px;left:calc(50% - 113px);top:-27px}.service-stage{padding-inline:20px;gap:16px}.service-chapter .service-copy h3{font-size:2.4rem}.service-chapter .service-copy p{font-size:.78rem}}
@media(max-width:800px) and (max-height:719px){.hero-story{height:auto}.hero-sticky{position:relative;top:0;height:690px}.service-chapter{height:auto}.service-stage{position:relative;top:0;height:auto;min-height:0;padding-block:45px 60px}.scene-cue{display:none}}
@media(prefers-reduced-motion:reduce){.phone-scene{transform:none!important;will-change:auto}.service-chapter{height:auto}.service-stage{position:relative;top:0;height:auto;min-height:0;padding-block:50px}.service-chapter .scene-foreground,.service-chapter .scene-background,.service-chapter .service-copy{transform:none!important;opacity:1!important;filter:none!important;will-change:auto}.route-popup{opacity:1;transform:translate(-50%,-100%)}.scene-cue{display:none}}
.service-chapter .layered-scene{--arrival:inherit;--scene-progress:inherit}
/* Clip visual spill without creating a scroll container: sticky scenes follow the viewport. */
.services-section{overflow:clip}