.video-orbit{height:500px;--orbit-angle:0deg}.video-orbit-track{position:absolute;width:86%;aspect-ratio:1;border:1px solid #d9ded3;border-radius:50%;left:7%;top:0;transform:rotate(var(--orbit-angle));transition:transform 1.3s cubic-bezier(.22,.7,.25,1)}.video-orbit-track:before,.video-orbit-track:after{content:'';position:absolute;width:10px;height:10px;border-radius:50%;background:#7fbd32;top:14%;left:14%}.video-orbit-track:after{left:auto;top:auto;bottom:14%;right:14%;width:6px;height:6px;background:#1c2118}.video-orbit .hero-brand-watermark{width:83%;height:auto;left:9%;top:0;opacity:.08}.orbit-cards{position:absolute;inset:0 0 70px}.orbit-card{position:absolute;left:50%;top:49%;width:37%;aspect-ratio:9/16;padding:0;background:#111;border:5px solid #fff;border-radius:14px;overflow:hidden;box-shadow:0 14px 32px #18200d20;cursor:pointer;transform:translate(-50%,-50%) translate(var(--x,0px),var(--y,0px)) scale(.37);transition:transform 1.25s cubic-bezier(.22,.7,.25,1),box-shadow .3s;z-index:1}.orbit-card.is-active{transform:translate(-50%,-50%) scale(1);z-index:3;box-shadow:0 20px 45px #18200d30}.orbit-card img{display:block;width:100%;height:100%;object-fit:cover}.orbit-caption{position:absolute;inset:auto 0 0;padding:38px 18px 16px;text-align:left;color:#fff;background:linear-gradient(transparent,#000d)}.orbit-caption strong,.orbit-caption small{display:block}.orbit-caption strong{font-size:18px}.orbit-caption small{font-size:12px;margin-top:4px}.orbit-card:not(.is-active) .orbit-caption,.orbit-card:not(.is-active) .orbit-play{opacity:0}.orbit-play{position:absolute;top:40%;left:43%;width:44px;height:44px;display:grid;place-items:center;border:1px solid #fff9;border-radius:50%;color:#fff;background:#0005;font-size:16px}.orbit-controls{position:absolute;bottom:15px;left:0;display:flex;gap:16px;align-items:center;z-index:4}.orbit-controls button{font:inherit;font-size:12px;background:none;border:0;border-bottom:1px solid #bbb;padding:8px 0;cursor:pointer;color:#30372b}.orbit-counter{font-size:11px;color:#62685c;font-variant-numeric:tabular-nums;letter-spacing:.1em}.orbit-card:focus-visible,.orbit-controls button:focus-visible{outline:3px solid #57901c;outline-offset:5px}.video-orbit>.sth-pet{pointer-events:none;right:0;bottom:-8px;width:115px;height:115px}.orbit-dialog{width:min(900px,calc(100vw - 32px));padding:22px;border:1px solid #ddd;border-radius:12px;background:#fff;color:#171b14}.orbit-dialog::backdrop{background:#000b}.orbit-close{display:block;margin:0 0 16px auto;padding:10px 20px;border:1px solid #ccc;border-radius:6px;background:#fff;color:#111;font:inherit;cursor:pointer}.orbit-player{aspect-ratio:16/9;background:#111}.orbit-player iframe{width:100%;height:100%;border:0}.orbit-dialog p{margin:14px 0 0;font-size:14px}.orbit-dialog a{text-decoration:underline}
@media(max-width:1000px){.video-orbit{height:420px}.orbit-cards{bottom:60px}.orbit-controls{gap:12px}.video-orbit>.sth-pet{width:90px;height:90px}.orbit-caption strong{font-size:15px}}
@media(max-width:700px){.video-orbit{height:390px;max-width:430px}.video-orbit-track{top:10px}.orbit-cards{bottom:70px}.orbit-card{border-width:4px}.orbit-caption{padding:28px 12px 12px}.orbit-play{width:34px;height:34px;left:42%;top:35%}.orbit-controls{bottom:12px}.video-orbit>.sth-pet{bottom:-3px;width:90px;height:90px}}
@media(prefers-reduced-motion:reduce){.orbit-card,.video-orbit-track{transition:none}}

.video-orbit .hero-brand-watermark{transform:none;object-fit:contain;max-height:85%;top:0;left:9%;opacity:.07}.video-orbit-track{width:80%;left:10%;top:0}.orbit-card.is-active{border-color:#fff}

.orbit-card img{object-fit:cover}.orbit-card.is-replacing img{animation:orbit-replace .9s ease both}.orbit-card:not(.is-active){border-width:7px}.orbit-caption strong{font-size:15px}.orbit-caption small{font-size:11px}.orbit-play{left:calc(50% - 22px);top:42%}.video-orbit{height:540px}.orbit-cards{bottom:85px}.video-orbit-track{top:14px}.orbit-controls{bottom:8px}
@keyframes orbit-replace{0%,25%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}
@media(max-width:1000px){.video-orbit{height:460px}.orbit-caption strong{font-size:13px}.orbit-caption{padding:28px 10px 12px}}
@media(max-width:700px){.video-orbit{height:390px}.orbit-cards{bottom:65px}.orbit-card{width:40%}.orbit-card:not(.is-active){border-width:5px}.orbit-play{left:calc(50% - 17px)}.orbit-caption strong{font-size:12px}.orbit-caption small{font-size:9px}.orbit-caption{padding:25px 8px 9px}}
@media(prefers-reduced-motion:reduce){.orbit-card.is-replacing img{animation:none}}

/* A full departure before a new portfolio thumbnail enters from the other side. */
.orbit-card.is-departing{animation:orbit-depart 1s cubic-bezier(.4,0,.6,1) both;z-index:4;pointer-events:none;transition:none}.orbit-card.is-arriving{animation:orbit-arrive 1.1s cubic-bezier(.2,.7,.25,1) both;pointer-events:none;transition:none}.orbit-next:disabled{opacity:.45;cursor:default}
@keyframes orbit-depart{0%{transform:translate(-50%,-50%) scale(1);opacity:1}45%{transform:translate(-50%,-50%) translate(75%,-20%) rotate(12deg) scale(.4);opacity:1}78%{opacity:1}100%{transform:translate(-50%,-50%) translate(150%,-100%) rotate(28deg) scale(.28);opacity:0}}
@keyframes orbit-arrive{0%{transform:translate(-50%,-50%) translate(-150%,75%) rotate(-25deg) scale(.28);opacity:0}25%{opacity:1}70%{transform:translate(-50%,-50%) translate(calc(var(--x) - 20px),calc(var(--y) + 25px)) rotate(-8deg) scale(.37)}100%{transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(0deg) scale(.37);opacity:1}}
@media(prefers-reduced-motion:reduce){.orbit-card.is-departing,.orbit-card.is-arriving{animation:none}}

/* Desktop playback occupies the selected portrait card, without a modal. */
.orbit-inline-player{position:absolute;left:50%;top:49%;width:37%;aspect-ratio:9/16;transform:translate(-50%,-50%);z-index:5;border:5px solid #fff;border-radius:14px;background:#111;box-shadow:0 20px 45px #18200d30}
.orbit-inline-player iframe{display:block;width:100%;height:100%;border:0;border-radius:9px}
.orbit-stop{position:absolute;right:0;top:calc(100% + 9px);white-space:nowrap;background:#111;color:#fff;border:0;border-radius:5px;padding:9px 14px;font:inherit;font-size:12px;cursor:pointer}
.orbit-stop:focus-visible{outline:3px solid #7fbd32;outline-offset:3px}.orbit-toggle:disabled{opacity:.45;cursor:default}
@media(max-width:700px){
 .orbit-dialog{box-sizing:border-box;width:min(calc(100vw - 24px),calc((100dvh - 136px)*9/16 + 24px));max-height:calc(100dvh - 16px);padding:10px;border:1px solid #333;background:#111;color:#fff;border-radius:12px;overflow:auto}
 .orbit-dialog .orbit-player{aspect-ratio:9/16;width:100%}
 .orbit-dialog .orbit-close{margin-bottom:8px;padding:8px 14px;background:#222;color:#fff;border-color:#555;font-size:14px}
 .orbit-dialog p{font-size:12px;margin:10px 0 0}.orbit-dialog a{color:#b2de7b}
 .orbit-dialog::backdrop{background:#000d}
}

/* Keep the desktop orbit composition on phones, with a native swipe gesture. */
.mobile-swipe-hint{display:none}
@media(max-width:700px){
 .studio-home .studio-hero-grid{display:flex;flex-direction:column;gap:18px;padding-top:24px;padding-bottom:24px}
 .studio-hero-grid>.studio-hero-copy{display:contents}
 .studio-hero-grid>.studio-hero-copy .studio-kicker{order:0;margin:0}
 .studio-hero-grid>.studio-hero-copy h1{order:1;font-size:64px;line-height:.98;margin:0}
 .studio-hero-grid>.studio-hero-copy .studio-intro{order:2;font-size:17px;line-height:1.5;margin:0}
 .studio-hero-grid>.video-orbit{order:3}
 .studio-hero-grid>.studio-hero-copy .studio-description{order:4;font-size:15px;margin:0}
 .studio-hero-grid>.studio-hero-copy .hero-actions{order:5;margin:0;gap:20px}
 .video-orbit{height:400px!important;max-width:430px;width:100%;min-width:0;position:relative;overflow:visible}
 .video-orbit .orbit-cards{display:block;inset:0 0 70px;touch-action:pan-y pinch-zoom}
 .video-orbit .video-orbit-track{display:block;width:88%;left:6%;top:14px}
 .video-orbit .hero-brand-watermark{display:block;top:22px}
 .video-orbit .orbit-card{width:46%;border-width:4px;border-radius:11px;top:49%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
 .video-orbit .orbit-card:not(.is-active){border-width:5px}
 .video-orbit .orbit-card img{-webkit-user-drag:none;pointer-events:none}
 .video-orbit .orbit-controls{display:flex;bottom:0;left:0;right:0;justify-content:center;gap:18px}
 .video-orbit .orbit-next{display:none}
 .mobile-swipe-hint{display:flex;position:absolute;bottom:35px;left:0;right:0;align-items:center;justify-content:center;gap:7px;font-size:11px;line-height:1.4;color:#59604f;margin:0;pointer-events:none}
 .mobile-swipe-hint svg{flex-shrink:0;animation:orbit-swipe-demo 1.4s ease-in-out 1s 2}
 .has-swiped .mobile-swipe-hint svg{animation:none}
 .studio-home .video-orbit>.sth-pet{width:100px;height:112px;right:-5px;bottom:60px}
 .orbit-dialog .orbit-close{min-height:44px;min-width:88px}
}
@keyframes orbit-swipe-demo{0%,100%{transform:translateX(6px);opacity:.6}45%,65%{transform:translateX(-10px);opacity:1}}
.video-orbit[data-direction=previous] .orbit-card.is-departing{animation-name:orbit-depart-previous}
.video-orbit[data-direction=previous] .orbit-card.is-arriving{animation-name:orbit-arrive-previous}
@keyframes orbit-depart-previous{0%{transform:translate(-50%,-50%) scale(1);opacity:1}45%{transform:translate(-50%,-50%) translate(-75%,-20%) rotate(-12deg) scale(.4);opacity:1}78%{opacity:1}100%{transform:translate(-50%,-50%) translate(-150%,-100%) rotate(-28deg) scale(.28);opacity:0}}
@keyframes orbit-arrive-previous{0%{transform:translate(-50%,-50%) translate(150%,75%) rotate(25deg) scale(.28);opacity:0}25%{opacity:1}70%{transform:translate(-50%,-50%) translate(calc(var(--x) + 20px),calc(var(--y) + 25px)) rotate(8deg) scale(.37)}100%{transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(0deg) scale(.37);opacity:1}}
@media(prefers-reduced-motion:reduce){.mobile-swipe-hint svg{animation:none}}

.orbit-controls .orbit-all{font-size:12px;color:#30372b;padding:8px 0;text-decoration:none;border-bottom:1px solid #bbb}.orbit-controls .orbit-all:hover{color:#426d1d;border-color:#83bd25}.orbit-all:focus-visible{outline:3px solid #57901c;outline-offset:5px}
@media(max-width:700px){
 .studio-home .studio-hero-grid .video-orbit{height:440px!important;padding-bottom:0}
 .studio-home .video-orbit .orbit-cards{bottom:110px}
 .studio-home .video-orbit .mobile-swipe-hint{max-width:none;width:100%;bottom:40px;font-size:10px}
 .studio-home .studio-hero-grid .video-orbit>.sth-pet[data-pet-ready]{width:90px;height:100px;right:-3px;bottom:64px;z-index:2}
}

/* Short, direction-matched touch transitions; desktop pacing stays unchanged. */
@media(max-width:700px){
 .studio-home .video-orbit .orbit-card{transition:transform .38s cubic-bezier(.2,.75,.25,1),box-shadow .2s}
 .studio-home .video-orbit .video-orbit-track{transition-duration:.38s}
 .studio-home .video-orbit .orbit-card.is-departing{animation-duration:.24s}
 .studio-home .video-orbit .orbit-card.is-arriving{animation-duration:.4s}
 .studio-home .video-orbit[data-direction=next] .orbit-card.is-departing{animation-name:orbit-depart-previous}
 .studio-home .video-orbit[data-direction=next] .orbit-card.is-arriving{animation-name:orbit-arrive-previous}
 .studio-home .video-orbit[data-direction=previous] .orbit-card.is-departing{animation-name:orbit-depart}
 .studio-home .video-orbit[data-direction=previous] .orbit-card.is-arriving{animation-name:orbit-arrive}
}
@media(prefers-reduced-motion:reduce){.studio-home .video-orbit .orbit-card,.studio-home .video-orbit .video-orbit-track{transition:none}.studio-home .video-orbit .orbit-card.is-departing,.studio-home .video-orbit .orbit-card.is-arriving{animation:none}}
@media(max-width:700px){
 .studio-home .video-orbit .orbit-cards{overflow:hidden;border-radius:12px}
}

/* During a direct gesture there is no interpolation: position belongs to the finger. */
@media(max-width:700px){
 .studio-home .video-orbit.is-manipulating .orbit-card{transition:none;animation:none}
 .studio-home .video-orbit .orbit-cards{cursor:grab}
 .studio-home .video-orbit.is-manipulating .orbit-cards{cursor:grabbing}
}

@media(max-width:700px){
 /* The central video is draggable in both axes. The surrounding page still scrolls. */
 .studio-home .video-orbit .orbit-card.is-active{touch-action:pinch-zoom}
}
