/* Mobile refinements; desktop composition and shared color tokens are retained. */
@media(max-width:980px){
  .menu-toggle{width:44px!important;height:44px!important;flex-shrink:0}
  .site-header .theme-control{width:44px;min-width:44px;height:44px}
  .site-header .theme-control svg{left:11px;top:11px}
  .mobile-nav{max-height:calc(100dvh - 74px - env(safe-area-inset-top));overflow-y:auto;overscroll-behavior:contain;padding-bottom:max(18px,env(safe-area-inset-bottom))}
  .mobile-nav>a{min-height:48px;display:flex;align-items:center}
  .mobile-nav .button{flex-shrink:0}
  .booking-dialog input,.booking-dialog select,.booking-dialog textarea{font-size:16px}
  .booking-dialog,.privacy-dialog{position:fixed;inset:calc(var(--mobile-view-top,0px) + max(10px,env(safe-area-inset-top))) max(10px,env(safe-area-inset-right)) auto max(10px,env(safe-area-inset-left));margin:0 auto;max-width:calc(100% - max(10px,env(safe-area-inset-left)) - max(10px,env(safe-area-inset-right)));max-height:calc(var(--mobile-view-height,100dvh) - max(10px,env(safe-area-inset-top)) - max(10px,env(safe-area-inset-bottom)));overscroll-behavior:contain;scroll-padding-block:60px 24px}
  .booking-dialog .dialog-close,.privacy-dialog .dialog-close{width:44px;height:44px;position:sticky;float:right;top:0;right:0;margin:-20px -10px -24px 8px;z-index:5}
}
@media(max-width:640px){
  html{scroll-padding-top:84px}
  .demo-strip{align-items:center;gap:12px;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));font-size:11px;line-height:1.4;min-height:44px}
  .demo-strip>span{min-width:0}
  .demo-strip #motion-toggle{min-height:44px;max-width:145px;font-size:11px;line-height:1.35;white-space:normal;flex-shrink:0}
  .site-header{padding-top:env(safe-area-inset-top);backdrop-filter:blur(10px)}
  .header-inner{height:67px;gap:10px}
  .hero{gap:22px;padding-top:22px;padding-bottom:26px}
  .hero .quiet-label{font-size:12px;padding:6px 12px}
  .hero h1{font-size:clamp(42px,12.4vw,54px);line-height:1.04;letter-spacing:-2.6px;margin:15px 0}
  .hero-description{font-size:14px;line-height:1.65;max-width:37ch}
  .hero-actions{margin-top:18px;gap:4px;width:100%}
  .hero-actions .button{width:100%;min-height:56px;padding:13px 15px;justify-content:space-between}
  .hero-actions .text-link{min-height:44px;font-size:13px}
  .hero-notes{margin-top:10px;gap:9px 17px;flex-wrap:wrap;font-size:11px;line-height:1.4}
  .hero-notes>span{gap:6px}
  .hero-notes svg{flex-shrink:0}
  .hero-visual{height:435px;margin-inline:8px;padding-bottom:26px}
  .hero-photo{height:408px;border-radius:110px 110px 76px 76px}
  .hero-photo img{object-position:center 39%}
  .hero-visual .portrait-label{top:22px;right:-8px;padding:10px 13px}
  .photo-note{left:-11px;bottom:49px;padding:13px 15px;gap:10px}
  .photo-note p{font-size:12px}
  .photo-note .note-line{display:none}
  .image-caption{font-size:11px}
  .intro{padding-top:34px;padding-bottom:36px}
  .intro>div{font-size:14px;line-height:1.65}
  .intro>div br{display:none}
  .section{padding-block:48px}
  .section-heading{margin-bottom:27px}
  .section-heading>p,.topic-content p,.principle p,.format-note,.steps p,.faq-list details>p{font-size:14px;line-height:1.7}
  .section-heading>p br{display:none}
  .text-link{min-height:44px}
  .direction-return,.direction-book{min-height:44px;padding-block:10px}
  .carousel-arrow{min-width:44px;min-height:44px}
  .directions-control{min-width:44px;min-height:44px}
  .story-visual{top:78px}
  .format-carousel-ready .format-card>p{font-size:14px;line-height:1.65}
  .contact-note{font-size:12px}
  .contact-phone,.footer-phone,.booking-phone{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .footer{padding-bottom:max(84px,calc(64px + env(safe-area-inset-bottom)))}
  .footer-top nav{gap:0 18px}
  .footer-top nav a,.footer-top nav button{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
  .footer-bottom{font-size:12px;line-height:1.6}
  .footer-phone{justify-content:flex-start}
  .booking-dialog,.privacy-dialog{width:calc(100% - 20px);padding:30px 20px 24px}
  .booking-dialog input,.booking-dialog select,.booking-dialog textarea{font-size:16px;min-height:48px}
  .booking-dialog input,.booking-dialog select{scroll-margin-block:65px 24px}
  .booking-dialog p,.privacy-dialog p{font-size:14px;line-height:1.7}
  .booking-dialog h2,.privacy-dialog h2{padding-right:22px}
  .result-actions .button{flex:1;min-width:120px}
  .result-actions{gap:10px}
}
@media(max-width:360px){
  .header-inner{gap:8px}
  .site-header .brand{font-size:18px;gap:7px}
  .site-header .brand svg{width:30px;height:30px}
  .hero h1{font-size:42px;letter-spacing:-2.4px}
  .hero-visual{height:393px;margin-inline:5px}
  .hero-photo{height:365px;border-radius:95px 95px 65px 65px}
  .hero-notes{gap:8px 10px;font-size:10px}
  .hero-actions .button{font-size:19px}
  .photo-note{padding:11px 12px;gap:8px}
  .photo-note .note-flower{font-size:30px}
  .photo-note p{font-size:11px}
}
@media(max-height:500px) and (max-width:980px){
  .site-header{position:relative}
  .mobile-nav{max-height:calc(100dvh - 70px)}
  .story-visual{position:relative;top:0}
}