/* Controls stay visible on touch devices as well as desktop. */
.carousel {scrollbar-width:none}
.carousel::-webkit-scrollbar {display:none}
.carousel.is-scrubbing {scroll-snap-type:none;scroll-behavior:auto}
.carousel-controls button {width:44px;height:44px}
.filter-list {min-width:0}
.carousel-position {display:block;width:100%;height:28px;margin:2px 0 16px;cursor:pointer;accent-color:var(--blue);appearance:none;background:transparent}
.carousel-position::-webkit-slider-runnable-track {height:5px;border-radius:8px;background:#d4e2e9}
.carousel-position::-moz-range-track {height:5px;border-radius:8px;background:#d4e2e9}
.carousel-position::-webkit-slider-thumb {appearance:none;width:54px;height:14px;margin-top:-4.5px;border-radius:8px;background:#799dad;border:2px solid var(--paper)}
.carousel-position::-moz-range-thumb {width:50px;height:10px;border-radius:8px;background:#799dad;border:2px solid var(--paper)}
.carousel-position:hover::-webkit-slider-thumb {background:var(--blue)}
.carousel-position:focus-visible {outline:2px solid #dd9b0e;outline-offset:1px}
.carousel-position:disabled {opacity:.5;cursor:default}

/* Static portraits; the contact button keeps its separate animation. */
.hero-person {animation:none}
.phone-scene {height:390px;max-width:340px;overflow:visible;margin:26px auto 0}
.phone-scene .phone-person {display:block;width:100%;height:320px;object-fit:contain;object-position:bottom;animation:none;transform:none}
.message-prop {bottom:0;right:8px;min-height:46px;font-size:12px;border-radius:28px;z-index:2}
.message-prop:hover {background:#e9f5ee;border-color:#78b194}
.message-prop svg {pointer-events:none}
.phone-scene.in-view .message-prop {animation:phone-invitation 2s ease-out both}
@keyframes phone-invitation {0%{opacity:0;transform:translate(-85px,-190px) scale(.55)}18%{opacity:1}44%{transform:translate(-60px,-160px) scale(.8) rotate(-5deg)}75%{transform:translate(0,5px) scale(1)}100%{opacity:1;transform:translate(0,0) scale(1)}}
@media(max-width:760px){
 .menu-open {--nav-height:280px}
 .site-header {grid-template-rows:76px auto}
 .gallery-toolbar {display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
 .gallery-toolbar .carousel-controls {display:flex;justify-content:flex-end}
 .carousel-position {margin-right:0}
 .contact-copy .phone-scene {height:370px;margin:26px auto 0}
 .phone-scene .phone-person {height:300px}
 .message-prop {font-size:11px;right:5px}
}
@media(prefers-reduced-motion:reduce){.hero-person,.phone-person,.message-prop{animation:none!important}}