/* Phone composition: show the salon above a readable, reachable introduction. */
.mobile-booking{display:none}
@media(max-width:700px){
  header{padding: max(8px,env(safe-area-inset-top)) 22px 8px}
  header .brand-logo{width:126px;height:74px}
  #motion{min-height:44px;padding:10px 14px;background:#07101bc9}
  .scene-nav{left:22px;right:22px;bottom:calc(55px + env(safe-area-inset-bottom));gap:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .scene-nav button{min-height:46px;padding:10px 4px;font-size:12px;touch-action:manipulation}
  .bottom{left:22px;right:22px;bottom:calc(22px + env(safe-area-inset-bottom))}
  .bottom .location{display:block;font-size:9px;letter-spacing:1.5px;line-height:1.5}
  .bottom .scroll-cue,.bottom .count{display:none}
  .frame{display:none}
  .hero-actions .mobile-booking{display:inline-flex}
  .hero-actions{display:flex;gap:10px;align-items:center;margin-top:20px}
  .hero-actions .enter{margin:0;min-height:50px;justify-content:center;gap:8px;font-size:13px;border:1px solid #80cfff60;border-radius:6px;padding:10px 14px;flex:1}
  .hero-actions .circle{width:24px;height:24px;border:0;font-size:18px}
  .mobile-booking{min-height:50px;border-radius:6px;font-size:14px;padding:12px 20px}
  .story .action{touch-action:manipulation}
  dialog{max-height:calc(100svh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overscroll-behavior:contain}
}
@media(max-width:700px) and (orientation:portrait){
  .stage{background:#090f19}
  .scene img{height:65%;object-position:43% 58%;filter:brightness(.95)}
  .scene[data-scene="1"] img{object-position:66% center}
  .scene[data-scene="2"] img{object-position:60% center}
  .shade{background:linear-gradient(180deg,#040b1670 0%,transparent 19%,#090f1926 36%,#090f19d9 54%,#090f19 67%)}
  .story{left:24px;right:24px;width:auto;top:auto;bottom:calc(139px + env(safe-area-inset-bottom));transform:none;translate:0 12px}
  .story.active{translate:0 0}
  .story .eyebrow{font-size:9px;letter-spacing:2px;margin-bottom:14px;color:#c5e8ff}
  .story h1{font-size:clamp(40px,11.3vw,60px);letter-spacing:-1.7px;line-height:1.06}
  .story h2{font-size:clamp(34px,9.3vw,50px);letter-spacing:-1.5px;line-height:1.1}
  .story>p:not(.eyebrow){font-size:14px;line-height:1.55;margin:14px 0 0;color:#c4d2e2}
  .action-note{font-size:11px;margin-top:10px}
  .cut .action,.relax .action{margin-top:20px;width:100%}
}
@media(max-width:700px) and (orientation:portrait) and (max-height:700px){
  .shade{background:linear-gradient(180deg,#040b1670, #090f1926 17%,#090f19cc 32%,#090f19 57%)}
  header .brand-logo{width:110px;height:62px}
  .story{bottom:calc(123px + env(safe-area-inset-bottom))}
  .story h1{font-size:clamp(34px,10.4vw,44px)}
  .story h2{font-size:clamp(30px,8.5vw,38px)}
  .story .eyebrow{margin-bottom:9px;font-size:8px;letter-spacing:1.7px}
  .story>p:not(.eyebrow){margin-top:10px;font-size:13px;line-height:1.45}
  .hero-actions{margin-top:14px}
  .cut .action,.relax .action{margin-top:14px}
  .scene-nav{bottom:calc(48px + env(safe-area-inset-bottom))}
  .bottom{bottom:calc(17px + env(safe-area-inset-bottom))}
}
@media(max-width:950px) and (max-height:500px) and (orientation:landscape){
  header{padding:4px 5%}
  header .brand-logo{width:104px;height:56px}
  .frame{display:none}
  .story{left:6%;top:50%;width:64%;transform:translateY(-40%)}
  .story h1,.story h2{font-size:32px;letter-spacing:-1px}
  .story .eyebrow{font-size:8px;margin-bottom:8px}
  .story>p:not(.eyebrow){font-size:12px;line-height:1.4;margin:8px 0}
  .hero-actions{margin-top:10px;max-width:320px}
  .hero-actions .enter,.mobile-booking{min-height:44px}
  .scene-nav{left:auto;right:5%;bottom:48px;display:flex;flex-direction:column;gap:6px}
  .scene-nav button{min-height:44px;min-width:108px;padding:9px}
  .bottom{bottom:14px}
  .action-note{display:none}
  .cut .action,.relax .action{min-height:44px;font-size:13px;padding:10px 18px}
}