.sky-page { min-height: 100vh; background: #f6f7fb; color: #202637; }

.sky-hero { padding: 58px 18px 64px; overflow: hidden; background: radial-gradient(circle at 85% 10%, rgba(88, 125, 233, .2), transparent 28%), linear-gradient(135deg, #10193c, #1b2c66 58%, #26428c); color: #fff; }
.sky-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); align-items: center; gap: 52px; }
.sky-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; color: #aebfff; font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.sky-hero h1 { max-width: 670px; margin: 0; font-family: "Montserrat", sans-serif; font-size: clamp(2.45rem, 5vw, 4.45rem); font-weight: 780; line-height: 1.03; letter-spacing: -.055em; }
.sky-hero-copy > p { max-width: 650px; margin: 21px 0 25px; color: #d9e0f7; font-size: 1rem; line-height: 1.75; }
.sky-hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.sky-primary-button, .sky-secondary-button, .sky-cta-button { min-height: 47px; padding: 12px 18px; border-radius: 11px; font-size: .83rem; font-weight: 750; }
.sky-primary-button { border: 0; background: linear-gradient(135deg, #ffcf4b, #f1ad21); color: #26304a; box-shadow: 0 9px 22px rgba(234, 166, 25, .22); }
.sky-primary-button:hover { background: linear-gradient(135deg, #ffdb6c, #f4bb3d); color: #17213c; transform: translateY(-1px); }
.sky-secondary-button { border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; }
.sky-secondary-button:hover { border-color: #fff; background: rgba(255, 255, 255, .16); color: #fff; }
.sky-hero-points { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 23px; color: #c9d2ee; font-size: .75rem; font-weight: 650; }
.sky-hero-points i { margin-right: 4px; color: #72e0b1; }
.sky-hero-visual { position: relative; min-height: 430px; }
.sky-hero-visual > img { width: 100%; height: 430px; border: 1px solid rgba(255,255,255,.2); border-radius: 24px; object-fit: cover; box-shadow: 0 30px 60px rgba(3, 10, 34, .38); }
.sky-hero-caption { position: absolute; right: 20px; bottom: 20px; left: 20px; display: flex; align-items: center; gap: 11px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.23); border-radius: 13px; background: rgba(11, 20, 52, .7); backdrop-filter: blur(10px); }
.sky-hero-caption > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: #ffcb45; color: #24305a; }
.sky-hero-caption small, .sky-hero-caption strong { display: block; }
.sky-hero-caption small { color: #bec9e8; font-size: .65rem; }
.sky-hero-caption strong { margin-top: 2px; font-size: .82rem; }

.sky-value-strip { position: relative; z-index: 2; margin-top: -24px; padding: 0 18px; }
.sky-value-grid { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid #e0e5f0; border-radius: 18px; background: #fff; box-shadow: 0 14px 35px rgba(25, 39, 78, .1); }
.sky-value-grid > div { display: flex; align-items: center; gap: 13px; padding: 20px 24px; border-right: 1px solid #e7eaf1; }
.sky-value-grid > div:last-child { border-right: 0; }
.sky-value-grid > div > span { display: grid; width: 41px; height: 41px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: #ebf0ff; color: #3156bd; }
.sky-value-grid strong, .sky-value-grid small { display: block; }
.sky-value-grid strong { font-size: .8rem; }
.sky-value-grid small { margin-top: 3px; color: #758097; font-size: .69rem; }

.sky-section { padding-top: 78px; padding-bottom: 78px; }
.sky-section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.sky-section-kicker { display: block; margin-bottom: 8px; color: #315bc4; font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.sky-section-header h2, .sky-price-copy h2 { margin: 0; color: #1e2941; font-family: "Montserrat", sans-serif; font-size: clamp(1.65rem, 3vw, 2.35rem); font-weight: 760; letter-spacing: -.035em; }
.sky-section-header p, .sky-price-copy > p { margin: 8px 0 0; color: #707a90; font-size: .84rem; line-height: 1.65; }
.sky-count-badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #d8e1f6; border-radius: 999px; background: #eef3ff; color: #3156b5; font-size: .72rem; font-weight: 750; white-space: nowrap; }

.sky-room-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.sky-room-card { display: flex; min-width: 0; overflow: hidden; border: 1px solid #dce3ef; border-radius: 20px; flex-direction: column; background: #fff; box-shadow: 0 10px 30px rgba(29, 43, 77, .075); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.sky-room-card:hover { border-color: #bdcae3; transform: translateY(-5px); box-shadow: 0 20px 44px rgba(29, 43, 77, .14); }
.sky-room-image { position: relative; display: block; height: 238px; overflow: hidden; background: #dfe5f0; }
.sky-room-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.sky-room-card:hover .sky-room-image img { transform: scale(1.035); }
.sky-room-status { position: absolute; top: 14px; left: 14px; padding: 7px 10px; border-radius: 999px; background: rgba(18, 42, 34, .83); color: #fff; backdrop-filter: blur(6px); font-size: .67rem; font-weight: 750; }
.sky-room-status i { margin-right: 5px; color: #66e4a7; font-size: .45rem; vertical-align: middle; }
.sky-room-photo-link { position: absolute; right: 13px; bottom: 13px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 9px; background: rgba(15,29,61,.78); color: #fff; font-size: .64rem; font-weight: 720; backdrop-filter: blur(7px); }
.sky-room-body { display: flex; padding: 21px 20px 19px; flex: 1; flex-direction: column; }
.sky-room-title { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 12px; }
.sky-room-title > div { min-width: 0; }
.sky-room-title h3 { margin: 0; color: #202b43; font-size: 1.08rem; line-height: 1.35; }
.sky-room-title h3 a { color: inherit; text-decoration: none; }
.sky-room-title h3 a:hover { color: #3159b7; }
.sky-room-map-link { display: grid; width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid #d7e0ef; border-radius: 10px; place-items: center; color: #3859a5; text-decoration: none; }
.sky-room-map-link:hover { border-color: #3156b5; background: #3156b5; color: #fff; }
.sky-feature-grid { display: flex; margin-top: 14px; padding: 14px 0; border-top: 1px solid #edf0f5; border-bottom: 1px solid #edf0f5; }
.sky-feature-grid > div { display: flex; min-width: 0; padding: 0 12px; flex: 1 1 0; align-items: center; gap: 8px; }
.sky-feature-grid > div:first-child { padding-left: 0; }
.sky-feature-grid > div:last-child { padding-right: 0; }
.sky-feature-grid > div + div { border-left: 1px solid #e7ebf2; }
.sky-feature-grid > div > i { flex: 0 0 auto; color: #4669bd; font-size: .9rem; }
.sky-feature-grid small, .sky-feature-grid strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sky-feature-grid small { color: #8992a3; font-size: .59rem; }
.sky-feature-grid strong { margin-top: 2px; color: #343e52; font-size: .72rem; }
.sky-room-rates { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0; margin-top: auto; padding-top: 17px; }
.sky-room-rates > div { min-width: 0; padding: 0 14px; }
.sky-room-rates > div:first-child { padding-left: 0; }
.sky-room-rates > div:last-child { padding-right: 0; }
.sky-room-rates > div + div { border-left: 1px solid #e3e8f1; }
.sky-room-rates > div:only-child { grid-column: 1 / -1; }
.sky-room-rates span, .sky-room-rates strong, .sky-room-rates small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sky-room-rates span { color: #79849a; font-size: .61rem; font-weight: 720; }
.sky-room-rates span i { margin-right: 4px; color: #4c6db9; }
.sky-room-rates strong { margin-top: 5px; color: #25324c; font-size: .82rem; }
.sky-room-rates small { margin-top: 2px; color: #929aab; font-size: .57rem; }
.sky-room-rates del { color: #9ca4b2; }
.sky-room-rates .sky-daily-rate strong { color: #2853a9; }
.sky-room-footer { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; padding: 15px 20px 20px; border-top: 1px solid #edf0f5; }
.sky-room-footer .btn { display: flex; min-width: 0; min-height: 50px; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; font-size: .7rem; font-weight: 750; text-align: left; }
.sky-room-footer .btn:only-child { grid-column: 1 / -1; }
.sky-room-footer .btn span, .sky-room-footer .btn small { display: block; }
.sky-room-footer .btn small { margin-bottom: 1px; font-size: .52rem; font-weight: 650; }
.sky-daily-button { border: 0; background: #284da9; color: #fff; }
.sky-daily-button small { color: rgba(255,255,255,.7); }
.sky-daily-button:hover { background: #1e3c88; color: #fff; }
.sky-monthly-button { border: 1px solid #cbd7ed; background: #fff; color: #2d529f; }
.sky-monthly-button small { color: #8a95aa; }
.sky-monthly-button:hover { border-color: #3156b5; background: #eef3ff; color: #24468d; }

.sky-price-section { padding: 76px 18px; background: #eaf0fb; }
.sky-price-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr); align-items: center; gap: 52px; }
.sky-price-copy > p { max-width: 560px; margin-bottom: 21px; }
.sky-price-notes { display: grid; gap: 9px; margin-bottom: 23px; color: #5e6980; font-size: .74rem; }
.sky-price-notes i { margin-right: 7px; color: #315bc4; }
.sky-price-preview { position: relative; display: block; width: 100%; overflow: hidden; padding: 0; border: 8px solid #fff; border-radius: 17px; background: #fff; box-shadow: 0 18px 38px rgba(37, 58, 105, .16); cursor: zoom-in; }
.sky-price-preview img { display: block; width: 100%; max-height: 440px; object-fit: cover; object-position: top; transition: transform .35s ease; }
.sky-price-preview:hover img { transform: scale(1.02); }
.sky-price-preview span { position: absolute; right: 14px; bottom: 14px; padding: 8px 11px; border-radius: 8px; background: rgba(15, 27, 59, .85); color: #fff; font-size: .7rem; font-weight: 700; }

.sky-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 205px; gap: 12px; }
.sky-gallery-item { position: relative; overflow: hidden; padding: 0; border: 0; border-radius: 13px; background: #dfe4ef; cursor: zoom-in; }
.sky-gallery-item.sky-gallery-featured { grid-column: span 2; grid-row: span 2; }
.sky-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, filter .35s ease; }
.sky-gallery-item > span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 21, 49, 0); color: transparent; font-size: 1.35rem; transition: background .25s ease, color .25s ease; }
.sky-gallery-item:hover img { transform: scale(1.045); filter: saturate(.82); }
.sky-gallery-item:hover > span { background: rgba(10, 21, 49, .32); color: #fff; }
.sky-gallery-more { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.sky-gallery-more small { color: #7c8597; font-size: .7rem; }
.sky-outline-button { min-height: 42px; padding: 9px 15px; border: 1px solid #bac9e8; border-radius: 9px; color: #3156ad; font-size: .76rem; font-weight: 720; }
.sky-outline-button:hover { border-color: #3156ad; background: #3156ad; color: #fff; }

.sky-lightbox-open { overflow: hidden; }
.sky-lightbox { position: fixed; z-index: 2200; inset: 0; display: none; padding: 70px clamp(58px, 7vw, 120px) 32px; color: #fff; }
.sky-lightbox.is-open { display: block; animation: sky-layer-in .18s ease-out; }
.sky-lightbox-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(5,7,11,.95); backdrop-filter: blur(7px); }
.sky-lightbox-toolbar { position: absolute; z-index: 3; top: 0; right: 0; left: 0; display: flex; min-height: 66px; padding: 11px 18px 10px 22px; align-items: center; justify-content: space-between; gap: 20px; background: linear-gradient(180deg,rgba(0,0,0,.58),rgba(0,0,0,0)); pointer-events: none; }
.sky-lightbox-heading small { display: block; color: #aeb5c4; font-size: .63rem; }
.sky-lightbox-heading h2 { margin: 2px 0 0; color: #fff; font-size: .86rem; }
.sky-lightbox-actions { display: flex; gap: 7px; pointer-events: auto; }
.sky-lightbox-action { display: grid; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; place-items: center; background: rgba(17,20,27,.7); color: #fff; backdrop-filter: blur(7px); }
.sky-lightbox-action:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.14); }
.sky-lightbox-stage { position: relative; z-index: 1; display: flex; width: 100%; height: 100%; overflow: hidden; align-items: center; justify-content: center; }
.sky-lightbox-stage img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-in; box-shadow: 0 24px 75px rgba(0,0,0,.46); }
.sky-lightbox-stage.is-zoomed { display: block; overflow: auto; text-align: center; }
.sky-lightbox-stage.is-zoomed img { max-width: none; max-height: none; cursor: zoom-out; }
.sky-lightbox-nav { position: fixed; z-index: 2; top: 50%; display: grid; width: 47px; height: 64px; padding: 0; border: 0; border-radius: 8px; place-items: center; background: rgba(17,20,27,.55); color: #fff; font-size: 1.25rem; transform: translateY(-50%); backdrop-filter: blur(6px); }
.sky-lightbox-nav[hidden] { display: none; }
.sky-lightbox-nav:hover { background: rgba(255,255,255,.16); color: #fff; }
.sky-lightbox-prev { left: 12px; }
.sky-lightbox-next { right: 12px; }
@keyframes sky-layer-in { from { opacity: 0; } to { opacity: 1; } }

.sky-empty-state { padding: 55px 20px; border: 1px solid #e0e5ef; border-radius: 18px; background: #fff; text-align: center; }
.sky-empty-state > i { color: #9aa8c5; font-size: 2.4rem; }
.sky-empty-state h3 { margin: 13px 0 6px; color: #28334a; }
.sky-empty-state p { margin: 0 0 17px; color: #778095; font-size: .8rem; }

.sky-cta { padding: 54px 18px; background: #15234f; color: #fff; }
.sky-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.sky-cta-inner span { color: #aebce4; font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.sky-cta-inner h2 { max-width: 760px; margin: 7px 0 0; font-family: "Montserrat", sans-serif; font-size: clamp(1.4rem, 3vw, 2.15rem); font-weight: 750; }
.sky-cta-button { flex: 0 0 auto; border: 0; background: #fff; color: #213b7e; }
.sky-cta-button:hover { background: #ffcf4b; color: #22325c; }
.sky-page footer { border-top: 1px solid #e0e4ed; }

@media (max-width: 991.98px) {
    .sky-hero-grid, .sky-price-grid { grid-template-columns: 1fr; }
    .sky-hero-visual { min-height: 380px; }
    .sky-hero-visual > img { height: 380px; }
    .sky-room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sky-price-grid { gap: 30px; }
    .sky-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .sky-hero { padding: 38px 12px 50px; }
    .sky-hero-grid { gap: 30px; }
    .sky-hero h1 { font-size: 2.55rem; }
    .sky-hero-visual, .sky-hero-visual > img { min-height: 300px; height: 300px; }
    .sky-value-grid { grid-template-columns: 1fr; }
    .sky-value-grid > div { border-right: 0; border-bottom: 1px solid #e7eaf1; }
    .sky-value-grid > div:last-child { border-bottom: 0; }
    .sky-section { padding: 56px 12px; }
    .sky-section-header { align-items: flex-start; flex-direction: column; }
    .sky-room-grid { grid-template-columns: 1fr; }
    .sky-room-image { height: 240px; }
    .sky-price-section { padding: 56px 12px; }
    .sky-price-grid { grid-template-columns: minmax(0, 1fr); }
    .sky-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 165px; }
    .sky-gallery-item.sky-gallery-featured { grid-column: span 2; grid-row: span 2; }
    .sky-lightbox { padding: 66px 48px 20px; }
    .sky-lightbox-toolbar { padding-right: 12px; padding-left: 14px; }
    .sky-lightbox-nav { width: 40px; height: 58px; border-radius: 6px; }
    .sky-lightbox-prev { left: 4px; }
    .sky-lightbox-next { right: 4px; }
    .sky-cta-inner { align-items: stretch; flex-direction: column; }
    .sky-cta-button { width: 100%; }
}

@media (max-width: 420px) {
    .sky-hero h1 { font-size: 2.15rem; }
    .sky-hero-actions .btn { width: 100%; }
    .sky-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
    .sky-feature-grid > div { padding: 0 10px; }
    .sky-feature-grid > div:nth-child(odd) { padding-left: 0; border-left: 0; }
    .sky-feature-grid > div:nth-child(even) { padding-right: 0; }
    .sky-room-footer { grid-template-columns: 1fr; }
    .sky-room-footer .btn { grid-column: 1; }
    .sky-gallery { grid-auto-rows: 135px; }
    .sky-gallery-more { align-items: stretch; flex-direction: column; text-align: center; }
}