/* Desktop-only controls keep the mobile composition intact. */
.header-phone .header-phone-icon,.desktop-booking{display:none}
/* The same content and controls, composed for tablets and wide screens. */
@media (min-width:600px) and (max-width:899px) {
  .mobile-page{max-width:720px;margin:24px auto 0;padding-inline:20px}
  .page-surface{padding:28px;border-radius:36px}
  h1{font-size:48px;max-width:570px}
  .intro-copy{font-size:16px;max-width:48ch}
  .hero-photo{aspect-ratio:1.4}
  .facts{gap:24px}
  .fact strong{font-size:16px}
  .fact>div>span{font-size:12px}
  .quick-action{font-size:15px;min-height:88px}
  .place-nav{margin-inline:-28px;padding-inline:28px}
  .space-card{flex-basis:60%;max-width:none;height:340px}
  .section{padding-top:56px}
  .sa-section-title{font-size:36px;line-height:1.05}
  .action-dock{width:400px;bottom:16px;border-radius:999px;padding:12px 16px 12px 24px;box-shadow:0 12px 40px #0003}
}

@media (min-width:900px) {
  body{background:#fff}
  html{scroll-padding-top:110px}
  .mobile-page{max-width:1360px;margin:0 auto;padding:0 24px 132px}
  .page-surface{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;padding:0 48px 64px;border-radius:0;overflow:visible}
  .brand-header{grid-column:1/-1;grid-row:1;position:sticky;top:0;z-index:30;align-self:start;background:#fff;margin:0 -48px 32px;padding:20px 48px;min-height:96px;gap:24px;border-bottom:1px solid var(--sa-line)}
  .brand-mark{position:relative;gap:14px}
  .brand-mark:after{content:attr(data-brand-name);font:500 23px/1 var(--sa-font-display);letter-spacing:-.04em}
  .header-phone strong{font-size:16px;line-height:1.25;white-space:nowrap}
  .brand-header .header-phone{display:grid;grid-template-columns:40px auto;column-gap:10px;align-items:center;text-align:left}
  .header-phone .header-phone-icon{display:grid;grid-row:1/3;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sa-container);margin:0}
  .header-phone-icon .icon{width:20px;height:20px}
  .header-phone .header-phone-note{grid-column:2}
  .desktop-booking{display:inline-flex;grid-column:1;grid-row:3;justify-self:start;align-self:start;margin-top:24px;min-height:56px;padding-inline:28px;font-size:16px}
  .header-phone .header-phone-note{font-size:11px;margin-top:4px}
  .intro{grid-column:1;grid-row:2;align-self:start;padding-top:12px}
  h1{font-size:clamp(42px,4.3vw,60px);line-height:1.02;max-width:600px;letter-spacing:-.045em}
  .place-meta{font-size:12px;gap:12px 20px;margin-top:22px}
  .intro-copy{font-size:16px;line-height:1.65;max-width:43ch;margin-top:20px}
  .quick-actions{display:none}
  .quick-action{min-height:88px;gap:10px;font-size:14px;border-radius:24px}
  .quick-action:disabled{cursor:default}
  .hero-photo{grid-column:2;grid-row:2/5;aspect-ratio:auto;min-height:550px;height:100%;margin:0;border-radius:32px}
  .hero-open>img[data-original=true]{width:100%;left:0;top:0}
  .hero-prev{left:16px;width:48px;height:48px;top:calc(50% - 24px)}
  .hero-next{left:auto;right:16px}
  .photo-count{top:20px;right:20px;padding-inline:16px;font-size:13px}
  .hero-pagination{bottom:10px}
  .facts{grid-column:1;grid-row:4;align-self:end;gap:20px 16px;margin-top:28px}
  .fact{gap:12px}
  .fact-icon{width:58px;height:58px}
  .fact strong{font-size:15px;line-height:1.2}
  .fact>div>span{font-size:11px}
  .place-nav{position:static;top:auto}
  .brand-header .place-nav{align-self:center;gap:4px;margin:0;padding:0;overflow:visible;border:0;background:transparent;backdrop-filter:none}
  .brand-header .place-nav .sa-chip{font-size:14px;min-height:44px;padding-inline:16px}
  .brand-header .header-phone{flex:none}
  .section{padding-top:72px;min-width:0;scroll-margin-top:104px}
  .section-heading{margin-bottom:30px;gap:24px}
  .sa-section-title{font-size:44px;line-height:1.04;letter-spacing:-.04em}
  .eyebrow{font-size:12px;margin-bottom:16px}
  .section-index{font-size:12px}
  #spaces{grid-column:1/-1;grid-row:6}
  .space-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:0;margin:0;overflow:visible;cursor:default}
  .space-rail .space-card{width:100%;height:360px;max-width:none;cursor:pointer;border-radius:28px}
  .space-caption{bottom:28px;left:28px}
  .space-caption strong{font-size:30px}
  .space-kicker{font-size:12px}
  .space-arrow{right:20px;bottom:26px;width:40px;height:40px}
  .rail-hint{display:none}
  #prices{grid-column:1;grid-row:7;align-self:stretch}
  .price-card{position:sticky;top:108px;padding:40px;border-radius:32px}
  .price-card h2{font-size:clamp(34px,3.1vw,44px);line-height:1.05}
  .price-value{font-size:46px;margin-top:44px}
  .price-value>span{font-size:20px}
  .price-features{font-size:13px;gap:12px 20px;margin:24px 0 32px}
  .price-card .sa-btn{min-height:64px;font-size:18px}
  .price-note{font-size:12px;max-width:40ch;line-height:1.6;margin-top:20px}
  #relax{grid-column:2;grid-row:7}
  .relax-copy{padding:28px}
  .relax-copy h3{font-size:26px}
  .relax-copy p{font-size:14px;max-width:40ch}
  .amenities{gap:16px;margin-top:16px}
  .amenities .amenity{padding:24px}
  .amenity h3{font-size:24px}
  .amenity p{font-size:13px}
  .extra-service{padding-top:28px;gap:18px}
  .extra-service p{font-size:13px}
  #photos{grid-column:1/-1;grid-row:8}
  .photo-grid{grid-template-columns:2fr 1fr 1fr;gap:20px}
  .photo-grid button,.photo-grid .gallery-wide{grid-column:auto;aspect-ratio:auto;height:360px;border-radius:28px}
  .gallery-wide>span{left:20px;bottom:20px;font-size:13px;padding:10px 16px}
  .photo-grid .gallery-more{font-size:14px}
  #reviews{grid-column:1;grid-row:9}
  .review-summary{padding:32px!important;border-radius:28px}
  .review-score>strong{font-size:92px}
  .review-score{gap:28px}
  .review-score p,.review-award{font-size:14px}
  .stars{font-size:22px}
  .review-summary .sa-btn{font-size:16px;min-height:60px}
  #questions{grid-column:2;grid-row:9}
  .faq-list .sa-accordion summary{font-size:20px;min-height:76px;padding:24px 0}
  .faq-list details p{font-size:14px;line-height:1.65}
  #contacts{grid-column:1/-1;grid-row:10;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;align-items:start}
  #contacts .section-heading{grid-column:1/-1;grid-row:1}
  .address-card{grid-column:1;grid-row:2/5;padding:32px;border-radius:28px}
  .address-street{font-size:40px;line-height:1.05;margin-bottom:32px}
  .address-marker{margin-bottom:24px}
  .address-card .sa-btn{min-height:60px;font-size:17px}
  #contacts .contact-row{grid-column:2;align-self:stretch;padding:28px 8px}
  #contacts a.contact-row{grid-row:2}
  #contacts div.contact-row{grid-row:3}
  .contact-row strong{font-size:22px}
  .contact-row>div>span{font-size:13px}
  #contacts .copy-address{grid-column:2;grid-row:4;justify-content:flex-start;padding:16px 8px;font-size:14px}
  .action-dock{width:400px;bottom:20px;border-radius:999px;padding:12px 14px 12px 24px;gap:24px;background:#171717f5;box-shadow:0 8px 40px #0004;backdrop-filter:blur(16px)}
  .dock-price strong{font-size:20px}
  .dock-price span{font-size:11px}
  .action-dock .sa-btn{min-width:174px}
  .toast{bottom:120px}
  .bottom-sheet{width:480px;max-width:480px;padding:32px;border-radius:32px}
  .bottom-sheet .dialog-handle{display:none}
  #space-image{height:300px}
}

@media (min-width:900px) and (max-width:1100px) {
  .page-surface{padding:0 32px 48px;column-gap:28px}
  .brand-header{gap:12px;margin-inline:-32px;padding-inline:32px}
  .brand-header .header-phone{column-gap:8px;grid-template-columns:32px auto}
  .header-phone .header-phone-icon{width:32px;height:32px}
  .brand-header .place-nav{gap:0}
  .brand-header .place-nav .sa-chip{font-size:12px;padding-inline:10px}
  .brand-header .header-phone strong{font-size:16px}
  .brand-header .header-phone span{font-size:10px}
  .brand-mark{gap:8px}
  .brand-mark:after{font-size:20px}
  .quick-actions{gap:8px}
  .quick-action{font-size:12px}
  .fact-icon{width:44px;height:52px}
  .fact{gap:8px}
  .fact strong{font-size:13px}
  .fact>div>span{font-size:10px}
  .space-rail{gap:14px}
  .space-rail .space-card{height:310px}
  .space-caption{left:20px;right:48px}
  .space-caption strong{font-size:25px}
  .price-card{padding:28px}
  .price-value{font-size:38px}
  .sa-section-title{font-size:38px}
  .amenities .amenity{padding:20px 16px}
  .photo-grid button,.photo-grid .gallery-wide{height:280px}
  #contacts{column-gap:28px}
  .contact-row strong{font-size:19px}
}

/* Floating mobile call panel. */
@media (max-width:899px) {
  .action-dock{position:fixed;bottom:8px;left:16px;right:16px;transform:none;width:auto;border-radius:999px;padding:12px 16px 12px 28px;box-shadow:0 8px 28px #0003}
}

@media (max-width:899px) {
  .brand-header .header-phone{display:grid;grid-template-columns:36px auto;column-gap:10px;align-items:center;text-align:left}
  .header-phone .header-phone-icon{display:grid;grid-column:1;grid-row:1/3;place-items:center;width:36px;height:36px;margin:0;border-radius:50%;background:var(--sa-container)}
  .header-phone-icon .icon{width:20px;height:20px}
  .header-phone strong,.header-phone .header-phone-note{grid-column:2}
  .quick-actions a[href^="tel:"]{background:var(--sa-accent)}
}

@media (max-width:899px) {
  .hero-photo{margin-top:0;margin-bottom:28px}
  .action-dock{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(16px);transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s}
  .action-dock.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition-delay:0s}
}
@media (prefers-reduced-motion:reduce) {
  .action-dock{transition:none;transform:none}
}