/* One continuous visit from the storefront to the salon. The film stays 16:9. */
.site-header{position:sticky;top:0}
.walkthrough-track{background:#25161e;position:relative}
.walkthrough-track.is-scroll-ready{height:calc(100svh - 100px + 180svh)}
.walkthrough.cinema{position:relative;display:block;height:calc(100svh - 100px);min-height:580px;max-height:none;padding:0;overflow:hidden;--walk-progress:0;--copy-opacity:1;--copy-shift:0px}
.is-scroll-ready>.walkthrough{position:sticky;top:100px}
.walkthrough-visual{position:absolute;inset:0;display:grid;place-items:center}
.walkthrough-visual picture,.walkthrough-visual canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.walkthrough-visual img{width:100%;height:100%;object-fit:contain}
.walkthrough-canvas{opacity:0;pointer-events:none}
.walkthrough.is-frame-ready .walkthrough-canvas{opacity:1}
.walkthrough .cinema-shade{background:linear-gradient(90deg,#25161ef5 0%,#25161ee8 16%,#25161e77 43%,#25161e00 72%),linear-gradient(0deg,#25161edb 0%,#25161e00 26%);opacity:var(--copy-opacity);transition:opacity .15s linear}
.walkthrough .hero-copy{opacity:var(--copy-opacity);transform:translateY(calc(-50% + var(--copy-shift)));transition:opacity .15s linear;max-width:52%}
.walkthrough.is-exploring .hero-copy{pointer-events:none}
.walkthrough .hero-copy:focus-within{opacity:1;pointer-events:auto;transform:translateY(-50%)}
.walkthrough.cinema h1{font-size:clamp(64px,6.7vw,96px)}
.walkthrough .cinema-bottom{bottom:40px;align-items:center}
.walkthrough-controls{display:flex;align-items:center;gap:18px;min-height:44px;color:#fff7f2;padding:8px 12px 8px 18px;background:#25161ee8}
.walkthrough-status{font-size:12px;min-width:60px}
.walkthrough-position{width:clamp(90px,13vw,200px);height:44px;accent-color:var(--gold-light);cursor:ew-resize;margin:0}
.walkthrough-position:disabled{cursor:default;opacity:.45}
.walkthrough-controls .motion-toggle{flex:none}
.walkthrough-progress{position:absolute;z-index:5;bottom:0;left:0;right:0;height:2px;background:#e4c58440;pointer-events:none}
.walkthrough-progress span{display:block;width:100%;height:100%;background:var(--gold-light);transform-origin:left;transform:scaleX(var(--walk-progress))}
.walkthrough .cinema-scroll{background:#25161ee8;padding:10px 14px;min-height:44px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.walkthrough [hidden]{display:none!important}
body.walkthrough-visible .whatsapp-float{visibility:hidden}
@media(max-width:1100px){.walkthrough.cinema h1{font-size:clamp(64px,7vw,84px)}}
@media(max-width:760px){
 .site-header{gap:12px}
 .brand{gap:9px;min-width:0;flex-shrink:1}
 .brand img{width:46px;height:46px;flex:none}
 .brand>span{min-width:0}
 .brand small{max-width:calc(100vw - 216px);font-size:10px;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .header-actions{gap:8px;flex:none}
 .walkthrough-track.is-scroll-ready{height:calc(100svh - 83px + 120svh)}
 .walkthrough.cinema{height:calc(100svh - 83px);min-height:640px}
 .is-scroll-ready>.walkthrough{top:83px}
 .walkthrough-visual{position:relative;inset:auto;width:100%;aspect-ratio:16/9;isolation:isolate}
 .walkthrough .cinema-shade{display:none}
 .walkthrough .cinema-frame{inset:12px 12px auto;height:calc(100vw * 9 / 16 - 24px)}
 .walkthrough .hero-copy{top:calc(100vw * 9 / 16 + 30px);bottom:auto;left:7%;right:7%;max-width:none;opacity:1;transform:none;pointer-events:auto}
 .walkthrough .hero-copy:focus-within{transform:none}
 .walkthrough.cinema h1{font-size:clamp(44px,11vw,60px);line-height:.94;margin-bottom:16px}
 .walkthrough .hero-copy>p{margin-bottom:18px;font-size:13px}
 .walkthrough .hero-line{padding-bottom:3px}
 .walkthrough .cinema-bottom{left:7%;right:7%;bottom:20px;gap:8px;align-items:center}
 .walkthrough .cinema-scroll{display:flex;max-width:85px;padding:0;background:none;font-size:11px;gap:8px}
 .walkthrough-controls{gap:9px;padding:0;background:none}
 .walkthrough-status{font-size:11px;min-width:47px}
 .walkthrough-position{width:76px}
 .walkthrough .motion-label{right:0;bottom:53px}
}
@media(max-width:380px){.walkthrough.cinema{min-height:625px}.walkthrough .hero-copy{top:calc(100vw * 9 / 16 + 26px)}.walkthrough .cinema-scroll{display:none}.walkthrough .cinema-bottom{justify-content:flex-end}.walkthrough-position{width:110px}}
@media(prefers-reduced-motion:reduce){.walkthrough .hero-copy,.walkthrough .cinema-shade{transition:none}}