/* Punavuori City Studio v7: coherent vector UI, iPhone-safe layout and subtle motion.
   Deliberately layered over the tested v6 design, without rearranging content. */
:root{--v7-ease:cubic-bezier(.22,1,.36,1);--v7-accent:#bb9c76}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{appearance:none;-webkit-appearance:none}
.ui-icon{width:19px;height:19px;flex:none;display:inline-block;vertical-align:middle;stroke:currentColor;fill:none;pointer-events:none;vector-effect:non-scaling-stroke}
.arrow,.photo-open{display:inline-flex;align-items:center;justify-content:center}
.btn-pill .arrow,.text-link .ui-icon{transition:transform .3s var(--v7-ease)}
.btn-pill:where(:hover,:focus-visible) .arrow,.text-link:where(:hover,:focus-visible) .ui-icon{transform:translate(2px,-2px)}
.text-link{display:inline-flex;align-items:center;gap:8px}
.site-footer nav a{display:inline-flex;align-items:center;gap:6px;width:fit-content}
.site-footer nav .ui-icon{width:15px;height:15px;opacity:.75}
.carousel-controls button,.orbit-nav,.lightbox button{display:inline-flex;align-items:center;justify-content:center;isolation:isolate}
.carousel-controls .ui-icon,.orbit-nav .ui-icon,.lightbox .ui-icon{width:20px;height:20px}
.photo-open .ui-icon{width:17px;height:17px}
.platform-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:8px}
.platform-icon .ui-icon{width:25px;height:25px}
.booking-card{transition:box-shadow .38s var(--v7-ease),border-color .38s,transform .38s var(--v7-ease)}
.gallery-view-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:43px;white-space:nowrap}
.gallery-view-button .ui-icon{width:16px;height:16px}
/* Premium details: restrained rather than ornamental. */
.site-header{position:sticky;top:0;z-index:80;transition:background-color .3s ease,box-shadow .3s ease;backdrop-filter:saturate(1.1);-webkit-backdrop-filter:saturate(1.1)}
.site-header.is-scrolled{background:#fbfaf6fa;box-shadow:0 9px 26px #192d2213}
.eyebrow{font-size:11px;letter-spacing:.19em}
.hero-photo{filter:none!important}
.hero-slide.is-current .hero-photo{animation:v7-photo-in 1.15s var(--v7-ease) both}
@keyframes v7-photo-in{from{transform:scale(1.035);filter:brightness(.94)}to{transform:scale(1);filter:brightness(1)}}
.hero-content>.eyebrow,.hero-content>h1,.hero-content>.hero-intro{animation:v7-intro .85s var(--v7-ease) both}
.hero-content>h1{animation-delay:.09s}.hero-content>.hero-intro{animation-delay:.16s}
@keyframes v7-intro{from{opacity:.15;transform:translate3d(0,13px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.photo-tile{isolation:isolate;transition:box-shadow .35s var(--v7-ease),transform .35s var(--v7-ease)}
.photo-tile img{filter:none;transition:transform .65s var(--v7-ease)}
.amenity{transition:background-color .35s,border-color .35s,transform .35s var(--v7-ease)}
:where(.btn-pill,.booking-card,.amenity,.photo-tile):focus-visible{outline:3px solid #cc9f68;outline-offset:3px}
/* Effect is only enabled after an observer is registered; always renders normally without JS. */
/* Content stays visible even if a browser delays IntersectionObserver; only animate on entry. */
.motion-ready [data-reveal].is-visible{animation:v7-content-in .58s var(--v7-ease) both}
@keyframes v7-content-in{from{opacity:.86;transform:translate3d(0,9px,0)}to{opacity:1;transform:none}}
/* Safe-area: iOS home indicator and dynamic browser toolbar must not cover booking CTA. */
@media(max-width:700px){
 html{scroll-padding-top:78px}
 body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
 .site-header{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
 .mobile-bar{height:auto;min-height:72px;padding-top:10px;padding-bottom:max(12px,env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
 .mobile-bar .btn-pill{min-height:44px;max-width:60%;white-space:nowrap;gap:8px}
 .mobile-bar a:not(.btn-pill){min-height:44px;display:flex;align-items:center}
 .hero-photo{object-fit:cover}
 .photo-grid .photo-tile,.amenity,.booking-card{min-width:0}
 .gallery-view-button{min-height:44px}
 .location-visual .map-load{min-height:48px}
 .site-footer{padding-bottom:max(100px,calc(88px + env(safe-area-inset-bottom,0px)))}
 .booking-landing .booking-card{border-radius:8px}
 .booking-landing-head h1{overflow-wrap:break-word}
 .lightbox-content{max-width:100%}
}
@media(max-width:350px){.hero h1{font-size:clamp(2.8rem,14vw,3rem)}.gallery-view-button{font-size:10px;padding:8px 9px}.mobile-bar .btn-pill{font-size:10.5px}}
/* Limit hover effects to devices with fine pointers: no sticky pseudo-hover on iPhone. */
@media(hover:hover) and (pointer:fine){
 .booking-card:hover{transform:translateY(-4px);border-color:#c1c8be;box-shadow:0 18px 38px #1c38211a}
 .amenity:hover{transform:translateY(-3px);border-color:#a2b4a0}
 .photo-tile:hover{box-shadow:0 18px 38px #1b302021}
}
@media(prefers-reduced-motion:reduce){
 .hero-slide.is-current .hero-photo,.hero-content>.eyebrow,.hero-content>h1,.hero-content>.hero-intro{animation:none!important;transform:none!important}
 .motion-ready [data-reveal].is-visible{animation:none!important;opacity:1!important;transform:none!important}
 .booking-card,.amenity,.photo-tile,.btn-pill,.text-link .ui-icon,.btn-pill .arrow{transition:none!important;transform:none!important}
}