/* A straight, lightweight phone body keeps the real app screen in one shared perspective. */
.phone-scene{width:280px;height:586px;top:0;left:calc(50% - 85px);background:linear-gradient(110deg,#ffb278 0,#ad591e 1%,#8394a3 2%,#182935 4%,#07121d 96%,#7f939f 99%,#e5edf1);border:1px solid #b1c0c9;border-radius:43px;box-shadow:inset 0 0 0 3px #07111c,0 28px 55px #001a3c55;transform:perspective(1600px) rotateY(calc(-8deg + var(--phone-facing)*8deg));filter:none;isolation:isolate}
.phone-frame{display:none}.phone-screen{left:7px;top:7px;width:calc(100% - 14px);height:calc(100% - 14px);border-radius:35px;clip-path:none;transform:none;border:1px solid #03080f;background:#fff}.phone-notch{width:28%;height:3.8%;border-radius:30px;left:36%;top:2.6%;transform:none;z-index:8;background:#050d13;box-shadow:inset 0 1px 1px #a6b4c855}.phone-scene:before{content:'';position:absolute;left:-4px;top:23%;height:12%;width:3px;background:linear-gradient(#768a9c,#182d3c);border-radius:4px}.phone-scene:after{content:'';position:absolute;right:-4px;top:29%;height:9%;width:3px;background:linear-gradient(#809aab,#182d3c);border-radius:4px}.hero-copy{transform:none!important;opacity:1!important}.label-top{left:-30px;top:105px}.label-bottom{right:-8px;bottom:70px}.hero-slide h1,.hero-slide h2{font-size:clamp(3.2rem,5.65vw,5.1rem)}
/* The scenes arrive in a single continuous pass, with just enough room to read them. */
.service-chapter{height:118svh;--arrived:1;--delivery-done:1}.js .service-chapter{--arrived:0;--delivery-done:0}.scene-cue{display:none}.service-stage{height:calc(100svh - 80px)}
.service-chapter[data-service=vai] .car-layer{transform:translateX(calc((1 - var(--arrival))*60%))!important;opacity:var(--arrival)!important;filter:blur(calc((1 - var(--arrival))*13px))!important}
.arrival-note,.delivery-note,.pet-note{position:absolute;z-index:7;left:22px;bottom:22px;background:#ffffffed;color:var(--navy);border:1px solid #fff;border-radius:14px;box-shadow:0 9px 30px #132a451a;display:flex;align-items:center;gap:10px;padding:13px 16px;font-size:.78rem;pointer-events:none}.arrival-note>span,.pet-note>span,.delivery-note>span{width:30px;height:30px;border-radius:50%;background:#fff0e7;color:#ce571e;display:grid;place-items:center;font-size:16px;flex-shrink:0}.arrival-note small,.pet-note small{display:block;font-size:.48rem;letter-spacing:.1em;margin-bottom:4px;color:#687b88}.arrival-note strong,.pet-note strong{font-size:.78rem;letter-spacing:-.02em}.arrival-note{opacity:var(--arrived);transform:translateY(calc((1 - var(--arrived))*10px))}.service-chapter[data-service=vai] .image-tag{top:20px;bottom:auto}
.service-chapter[data-service=entrega] .receiver-layer,.service-chapter[data-service=entrega] .courier-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;clip-path:none!important;filter:none!important;transition:none!important}.service-chapter[data-service=entrega] .receiver-layer{opacity:var(--woman-in)!important;transform:translateY(calc((1 - var(--woman-in))*15px))!important}.service-chapter[data-service=entrega] .courier-layer{opacity:var(--man-in)!important;transform:translateX(calc((1 - var(--man-in))*20px))!important}.delivery-note{opacity:var(--delivery-done);transform:translateY(calc((1 - var(--delivery-done))*8px));left:auto;right:20px;font-size:.64rem;padding:9px 12px;bottom:20px}.delivery-note>span{width:21px;height:21px;font-size:12px}.service-chapter[data-service=entrega] .image-tag{top:18px;bottom:auto}
.pet-ride-photo{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.045 - var(--pet-in)*.045));filter:blur(calc((1 - var(--pet-in))*3px));opacity:calc(.65 + var(--pet-in)*.35);will-change:transform}.pet-note{opacity:var(--pet-in);transform:translateY(calc((1 - var(--pet-in))*12px));left:auto;right:20px;bottom:20px}.service-chapter[data-service=pet] .image-tag{top:18px;bottom:auto}
@media(min-width:801px) and (max-height:780px){.phone-scene{width:254px;height:532px;top:10px;left:calc(50% - 72px)}}
@media(min-width:801px) and (max-width:1100px){.phone-scene{width:248px;height:520px;left:calc(50% - 82px);transform:perspective(1600px) rotateY(calc(-8deg + var(--phone-facing)*8deg))}.hero-slide h1,.hero-slide h2{font-size:clamp(2.9rem,5.35vw,4.5rem)}}
@media(max-width:800px){.hero-grid{grid-template-rows:25px 182px minmax(310px,1fr) 115px}.hero-visual{height:310px}.phone-scene{width:151px;height:316px;top:-3px;left:calc(50% - 65px);border-radius:25px;transform:perspective(1100px) rotateY(calc(-6deg + var(--phone-facing)*6deg));box-shadow:inset 0 0 0 2px #07111c,0 16px 35px #001a3c55}.phone-screen{inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);border-radius:20px}.phone-notch{top:3%;height:3.5%}.hero-slide h1,.hero-slide h2{font-size:2.38rem}.hero-slide p{font-size:.74rem;line-height:1.65}.label-top{left:0;top:42px}.label-bottom{right:0;bottom:32px}.phone-map-caption strong{font-size:6px}.phone-map-caption small,.phone-map-caption>span{font-size:4px}.phone-map-caption{padding:7px 6px}.service-chapter{height:110svh}.service-stage{height:calc(100svh - 72px);padding-block:24px 75px}.arrival-note,.pet-note{left:12px;right:auto;bottom:12px;padding:8px 10px;gap:7px;border-radius:10px}.arrival-note>span,.pet-note>span{width:23px;height:23px;font-size:12px}.arrival-note strong,.pet-note strong{font-size:.58rem}.arrival-note small,.pet-note small{font-size:.36rem;margin-bottom:2px}.delivery-note{bottom:12px;right:12px;left:auto;padding:7px 8px;font-size:.5rem;gap:5px}.image-tag{font-size:.5rem!important;padding:7px 10px!important}.service-chapter[data-service=vai] .car-layer{filter:blur(calc((1 - var(--arrival))*8px))!important}}
@media(max-width:370px){.hero-slide h1,.hero-slide h2{font-size:2.2rem}.hero-slide p{font-size:.66rem}.phone-scene{width:144px;height:301px;left:calc(50% - 62px);top:4px}.hero-grid{grid-template-rows:25px 182px minmax(300px,1fr) 115px}.hero-visual{height:300px}}
@media(max-width:800px) and (max-height:719px){.hero-sticky{height:715px}.hero-story{height:250svh}.hero-sticky{position:sticky;top:72px;height:calc(100svh - 72px);min-height:700px}.service-chapter{height:auto}.service-stage{height:auto;min-height:0;position:relative;padding-block:40px 70px}}
@media(prefers-reduced-motion:reduce){.service-chapter{height:auto}.service-stage{height:auto;min-height:0;position:relative}.phone-scene{transform:none!important;will-change:auto}.pet-ride-photo{transform:none;filter:none;opacity:1;will-change:auto}.arrival-note,.delivery-note,.pet-note{opacity:1;transform:none}.service-chapter .scene-foreground{will-change:auto}}
/* Play arrivals when the frame enters view: pausing the scroll never leaves a half-arrived car. */
.js .service-chapter .car-layer{transform:translateX(58%)!important;opacity:0!important;filter:blur(12px)!important;transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity .55s ease,filter .95s ease!important}
.js .service-chapter.scene-entered .car-layer{transform:translateX(0)!important;opacity:1!important;filter:blur(0)!important}
.js .service-chapter .arrival-note{opacity:0;transform:translateY(10px);transition:opacity .4s .72s ease,transform .4s .72s ease}.js .service-chapter.scene-entered .arrival-note{opacity:1;transform:none}
.js .service-chapter .receiver-layer{opacity:0!important;transform:translateY(14px)!important;transition:opacity .55s .12s ease,transform .7s .12s ease!important}.js .service-chapter.scene-entered .receiver-layer{opacity:1!important;transform:none!important}
.js .service-chapter .courier-layer{opacity:0!important;transform:translateX(24px)!important;transition:opacity .6s .48s ease,transform .85s .48s cubic-bezier(.16,1,.3,1)!important}.js .service-chapter.scene-entered .courier-layer{opacity:1!important;transform:none!important}
.js .service-chapter .delivery-note{opacity:0;transform:translateY(8px);transition:opacity .4s 1.1s ease,transform .4s 1.1s ease}.js .service-chapter.scene-entered .delivery-note{opacity:1;transform:none}
.js .pet-ride-photo{transform:scale(1.055);filter:blur(3px);opacity:.5;transition:transform 1.2s cubic-bezier(.16,1,.3,1),opacity .7s ease,filter .7s ease}.js .scene-entered .pet-ride-photo{transform:scale(1);filter:none;opacity:1}.js .pet-note{opacity:0;transform:translateY(10px);transition:opacity .6s .4s ease,transform .6s .4s ease}.js .scene-entered .pet-note{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .service-chapter .scene-foreground,.js .service-chapter .pet-ride-photo,.js .service-chapter .arrival-note,.js .service-chapter .delivery-note,.js .service-chapter .pet-note{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}}
/* Keep faces, hands and paws clear of the scene captions. */
.service-chapter[data-service=entrega] .receiver-layer,.service-chapter[data-service=entrega] .courier-layer{inset:auto;left:0;top:5%;width:100%;height:95%}
.service-chapter[data-service=entrega] .image-tag{top:auto;bottom:18px;left:18px}
.service-chapter[data-service=pet] .image-tag{left:auto;right:18px;top:18px}
.pet-note{left:18px;right:auto;bottom:18px}
@media(max-width:800px){.pet-note{left:12px;right:auto;bottom:12px}.service-chapter[data-service=pet] .image-tag{right:12px;top:12px}.service-chapter[data-service=entrega] .image-tag{left:12px;bottom:12px}}