@media (max-width: 1280px) {
    .desktop-menu { gap: 17px; }
    .desktop-menu a { font-size: 11px; }
    .nav-book { margin-left: 20px; }
    .room-grid, .offer-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .amenity-grid { grid-template-columns: repeat(4,1fr); }
    .footer-grid { grid-template-columns: 1.3fr .7fr .7fr 1fr; }
    .footer-grid > div:last-child { grid-column: 1 / -1; }
    .footer-gallery { grid-template-columns: repeat(6,1fr); }
}

@media (max-width: 1100px) {
    .topbar { display: none; }
    .site-header.is-scrolled .topbar { display: none; }
    .desktop-menu, .nav-book { display: none; }
    .menu-toggle { display: block; margin-left: auto; }
    .nav-shell { min-height: 82px; }
    .brand img { width: 185px; }
    .hero-content { padding-top: 130px; }
    .highlight-grid { grid-template-columns: repeat(2,1fr); }
    .highlight-item:nth-child(2)::after { display: none; }
    .split-grid, .contact-layout, .booking-page-grid { gap: 55px; }
    .experience-grid { grid-template-columns: repeat(2,1fr); }
    .choose-grid { grid-template-columns: repeat(2,1fr); row-gap: 45px; }
    .choose-item:nth-child(2) { border-right: 1px solid rgba(6,27,36,.13); }
    .masonry-grid { columns: 3; }
    .newsletter-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: repeat(3,1fr); }
    .footer-brand { grid-column: 1 / -1; }
    .footer-grid > div:last-child { grid-column: auto; }
    .footer-gallery { grid-template-columns: repeat(3,1fr); }
    .editorial-grid { grid-template-columns: 60px 1fr 1fr; gap: 35px; }
    .room-list-card { grid-template-columns: 1fr; }
    .room-list-card:nth-child(even) .room-list-image, .room-list-card:nth-child(even) .room-list-content { order: initial; }
    .room-list-image img { max-height: 650px; }
    .room-detail-grid { grid-template-columns: minmax(0,1fr) 340px; gap: 45px; }
    .experience-feature { gap: 45px; }
    .blog-layout { grid-template-columns: 1fr; }
    .blog-sidebar { grid-template-columns: repeat(3,1fr); }
    .sidebar-offer { min-height: 100%; }
    .contact-info-grid { grid-template-columns: repeat(2,1fr); row-gap: 40px; }
    .contact-info-grid article:nth-child(2) { border-right: 1px solid rgba(6,27,36,.12); }
}

@media (max-width: 900px) {
    :root { --section-space: 95px; }
    .hero-content { align-items: flex-start; flex-direction: column; gap: 50px; padding-bottom: 90px; }
    .hero-pagination { align-self: flex-end; }
    .hero-overlay { background: rgba(6,27,36,.62); }
    .split-grid, .dining-home, .chef-layout, .private-dining-layout, .contact-layout, .booking-page-grid { grid-template-columns: 1fr; }
    .about-visual { padding-left: 40px; }
    .dining-copy { order: 2; padding: 75px var(--container-pad); }
    .dining-copy-inner { margin: 0; }
    .dining-image { min-height: 560px; }
    .wellness-layout { grid-template-columns: 1fr; }
    .wellness-card { margin: -60px 35px 0; }
    .heading-row { align-items: flex-start; flex-direction: column; gap: 10px; }
    .heading-row > p { max-width: 700px; }
    .footer-grid { grid-template-columns: repeat(2,1fr); }
    .footer-brand { grid-column: 1 / -1; }
    .footer-grid > div:last-child { grid-column: 1 / -1; }
    .editorial-grid { grid-template-columns: 1fr; }
    .editorial-number { display: none; }
    .three-column-values, .award-grid, .property-stats { grid-template-columns: repeat(2,1fr); }
    .room-detail-grid { grid-template-columns: 1fr; }
    .booking-panel { position: static; }
    .experience-feature, .experience-feature.is-reverse { grid-template-columns: 1fr; }
    .experience-feature.is-reverse .experience-feature-image { order: initial; }
    .wellness-service-grid article { grid-template-columns: 1fr; }
    .package-grid { grid-template-columns: 1fr; }
    .featured-post { grid-template-columns: 1fr; }
    .featured-post img { min-height: 420px; }
    .blog-sidebar { grid-template-columns: 1fr 1fr; }
    .contact-layout, .booking-page-grid { gap: 55px; }
}

@media (max-width: 768px) {
    body { font-size: 15px; }
    h1 { font-size: 48px; }
    h2 { font-size: 36px; }
    h3 { font-size: 24px; }
    .container-xxl { padding-left: 22px; padding-right: 22px; }
    .hero-home { min-height: 780px; }
    .hero-content { padding-top: 150px; }
    .hero-copy h1 { font-size: 64px; }
    .hero-copy p { font-size: 15px; }
    .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
    .scroll-cue { display: none; }
    .highlight-grid { grid-template-columns: 1fr; }
    .highlight-item { min-height: auto; padding: 28px 10px; }
    .highlight-item::after { bottom: 0; height: 1px !important; left: 0; right: 0; top: auto !important; width: 100% !important; }
    .highlight-item:last-child::after { display: none; }
    .split-grid { grid-template-columns: 1fr; }
    .about-visual { padding-left: 25px; }
    .stats-row strong { font-size: 34px; }
    .room-grid, .experience-grid, .offer-grid, .blog-grid, .compact-room-grid { grid-template-columns: 1fr; }
    .room-card-image img { aspect-ratio: 1.05; }
    .experience-card { aspect-ratio: 1.15; }
    .dining-home { min-height: auto; }
    .dining-image { min-height: 430px; }
    .wellness-card { margin: -35px 18px 0; padding: 38px 28px; }
    .choose-grid { grid-template-columns: 1fr; }
    .choose-item, .choose-item:nth-child(2), .choose-item:last-child { border-left: 0; border-right: 0; border-top: 1px solid rgba(6,27,36,.13); padding: 30px 0; }
    .masonry-grid, .full-gallery { columns: 2; }
    .testimonial-slider { min-height: 440px; }
    .testimonial-card p { font-size: 29px; }
    .booking-cta { background-attachment: scroll; min-height: 520px; }
    .booking-cta-content > div { align-items: stretch; flex-direction: column; width: 100%; }
    .newsletter-control { align-items: stretch; flex-direction: column; gap: 10px; }
    .newsletter-control input { border-right: 1px solid rgba(6,27,36,.12); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; justify-content: center; padding: 18px 0; }
    .inner-hero { min-height: 540px; }
    .inner-hero-content { padding-bottom: 65px; padding-top: 140px; }
    .inner-hero h1 { font-size: 50px; }
    .image-collage { padding-right: 30px; }
    .three-column-values, .award-grid, .property-stats { grid-template-columns: 1fr; }
    .property-stats div { border-bottom: 1px solid rgba(255,255,255,.1); }
    .room-title-row { flex-direction: column; }
    .room-list-content { padding: 35px 24px; }
    .room-list-actions { align-items: flex-start; flex-direction: column; }
    .amenity-grid { grid-template-columns: repeat(2,1fr); }
    .room-detail-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 440px 180px; padding-top: 0; }
    .room-detail-image.is-main { grid-column: 1 / -1; grid-row: 1; }
    .detail-amenities, .info-table { grid-template-columns: 1fr; }
    .experience-page-grid { gap: 70px; }
    .opening-hours { grid-template-columns: 1fr; gap: 12px; }
    .meal-grid, .dining-gallery-grid, .wellness-service-grid { grid-template-columns: 1fr; }
    .wellness-service-grid article { grid-template-columns: 1fr; }
    .featured-post > div { padding: 35px 25px; }
    .featured-post h2 { font-size: 36px; }
    .blog-page-grid { grid-template-columns: 1fr; }
    .blog-sidebar { grid-template-columns: 1fr; }
    .article-header { padding: 180px 0 70px; }
    .article-meta { flex-wrap: wrap; }
    .article-container { grid-template-columns: 1fr; padding-left: 22px; padding-right: 22px; }
    .article-share { flex-direction: row; }
    .article-share span { writing-mode: initial; }
    .contact-info-grid { grid-template-columns: 1fr; }
    .contact-info-grid article, .contact-info-grid article:nth-child(2), .contact-info-grid article:last-child { border-left: 0; border-right: 0; border-top: 1px solid rgba(6,27,36,.12); }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .full-field { grid-column: auto; }
    .faq-list button { font-size: 21px; }
}

@media (max-width: 480px) {
    :root { --section-space: 78px; }
    .nav-shell { min-height: 74px; }
    .brand img { width: 160px; }
    .menu-toggle { width: 42px; }
    .hero-home { min-height: 720px; }
    .hero-content { padding-top: 130px; }
    .hero-copy h1 { font-size: 52px; }
    .hero-copy p { line-height: 1.65; }
    .hero-pagination { align-self: flex-start; }
    .btn-gold, .btn-outline-dark, .btn-outline-light { width: 100%; }
    .stats-row { gap: 12px; }
    .stats-row strong { font-size: 29px; }
    .stats-row span { font-size: 8px; }
    .about-visual { padding-left: 16px; }
    .floating-note { max-width: 235px; padding: 22px; }
    .room-card-image img { aspect-ratio: .9; }
    .masonry-grid, .full-gallery { columns: 1; }
    .newsletter-grid { gap: 30px; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-brand, .footer-grid > div:last-child { grid-column: auto; }
    .footer-gallery { grid-template-columns: repeat(3,1fr); }
    .floating-actions { bottom: 14px; right: 14px; }
    .float-btn { height: 44px; width: 44px; }
    .inner-hero h1 { font-size: 44px; }
    .room-detail-hero { padding-top: 74px; }
    .room-detail-gallery { grid-template-rows: 340px 130px; }
    .mini-amenities { grid-template-columns: 1fr; }
    .filter-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; }
    .filter-bar button { flex: 0 0 auto; }
    .premium-form { padding: 30px 20px; }
    .article-content .article-intro, .article-content blockquote { font-size: 25px; }
    .article-content h2 { font-size: 33px; }
    .contact-direct a { align-items: flex-start; }
    .faq-answer p { padding-right: 0; }
    .lightbox { padding: 20px; }
}

@media (max-width: 350px) {
    .container-xxl { padding-left: 16px; padding-right: 16px; }
    .hero-copy h1 { font-size: 46px; }
    .brand img { width: 145px; }
    .mobile-drawer { padding-left: 22px; padding-right: 22px; }
    .mobile-links a { font-size: 28px; }
}

/* Luxury refinement responsive safeguards */
@media (min-width: 1101px) {
    .experience-grid {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .experience-card:nth-child(1) { grid-column: span 7; aspect-ratio: 1.62; }
    .experience-card:nth-child(2) { grid-column: span 5; aspect-ratio: 1.15; }
    .experience-card:nth-child(3),
    .experience-card:nth-child(4),
    .experience-card:nth-child(5) { grid-column: span 4; aspect-ratio: 1.05; }
    .experience-card:nth-child(6) { grid-column: span 12; aspect-ratio: 2.55; }
}

@media (max-width: 1100px) {
    .nav-shell { min-height: 84px; }
    .brand::after { display: none; }
    .hero-signature { display: none; }
    .hero-luxury-frame { inset: 18px; }
    .hero-copy { padding-left: 27px; }
}

@media (max-width: 900px) {
    .dining-home::before { inset: 18px; }
    .booking-cta::after { inset: 18px; }
    .about-home { background: var(--ivory); }
    .about-visual::before { inset: -14px 18px 20px -14px; }
}

@media (max-width: 768px) {
    .hero-luxury-frame,
    .inner-hero::before { inset: 12px; }
    .hero-copy { padding-left: 20px; }
    .hero-copy::before { height: 125px; }
    .hero-copy h1 { letter-spacing: .02em; }
    .section-heading { margin-bottom: 50px; }
    .room-card:hover,
    .blog-card:hover,
    .offer-card:hover,
    .choose-item:hover { transform: none; }
    .dining-home::before,
    .booking-cta::after { inset: 12px; }
    .booking-cta { background-attachment: scroll; }
    .testimonial-card { padding: 38px 0; }
    .testimonials-home::before { font-size: 250px; top: 20px; }
}

@media (max-width: 480px) {
    .hero-luxury-frame,
    .inner-hero::before { display: none; }
    .hero-copy { padding-left: 16px; }
    .hero-copy::before { height: 100px; }
    .hero-copy h1 { line-height: .88; }
    .about-visual::before { display: none; }
    .dining-home::before,
    .booking-cta::after { display: none; }
    .wellness-card::after { display: none; }
    .section::after { left: 18px; right: 18px; }
}

/* Professional square-card responsiveness */
@media (max-width: 1199.98px) {
    .home-masonry,
    .full-gallery,
    .masonry-grid.full-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .home-masonry,
    .full-gallery,
    .masonry-grid.full-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .room-card-body,
    .offer-card > div,
    .blog-body {
        min-height: auto;
    }
}

@media (max-width: 575.98px) {
    .home-masonry,
    .full-gallery,
    .masonry-grid.full-gallery {
        grid-template-columns: 1fr;
    }

    .room-card-image img,
    .blog-image img,
    .offer-card img,
    .home-masonry .gallery-item,
    .full-gallery .gallery-item,
    .masonry-grid.full-gallery .gallery-item {
        aspect-ratio: 1 / 1;
    }
}

@media (max-width: 767px) {
    .brand img { width: 180px; }
    .mobile-drawer-top img { width: 190px; }
    .about-brand-logo { max-width: 245px; width: 72%; }
}
@media (max-width: 380px) {
    .brand img { width: 158px; }
}


@media (max-width: 991.98px) {
    .mobile-drawer { width: min(92vw, 390px); }
}

@media (max-width: 575.98px) {
    .mobile-drawer { padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); }
    .mobile-drawer::before { inset: 8px; border-radius: 20px; }
    .mobile-drawer-top img { width: 138px; }
    .drawer-close { height: 42px; width: 42px; }
    .mobile-menu-label { font-size: 9px; letter-spacing: .22em; }
    .mobile-links { gap: 7px; }
    .mobile-links a {
        border-radius: 14px;
        font-size: 18px;
        min-height: 46px;
        padding: 12px 14px;
    }
    .mobile-drawer-footer { border-radius: 18px; padding: 12px; }
    .mobile-drawer-footer .btn-gold { min-height: 44px; padding: 12px 14px; }
    .mobile-drawer-footer > a:not(.btn-gold) { font-size: 11px; }
}


/* Mobile alignment and scroll stability fix */
@media (max-width: 767.98px) {
    html,
    body {
        max-width: 100%;
        overflow-x: clip;
        width: 100%;
    }

    main,
    section,
    header,
    footer {
        max-width: 100%;
    }

    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        box-sizing: border-box;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        padding-left: 18px !important;
        padding-right: 18px !important;
        width: 100%;
    }

    /* On mobile, use vertical reveal only so content never sticks to either edge. */
    .reveal-left,
    .reveal-right {
        transform: translateY(22px);
    }

    .reveal-left.is-visible,
    .reveal-right.is-visible {
        transform: translateY(0);
    }

    .about-visual {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .dining-copy {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    .wellness-card {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    .editorial-grid,
    .experience-feature,
    .contact-layout,
    .booking-page-grid,
    .blog-layout,
    .room-detail-grid {
        min-width: 0;
        width: 100%;
    }

    img,
    video,
    iframe,
    svg {
        max-width: 100%;
    }

    .mobile-drawer {
        overscroll-behavior: contain;
    }
}

@media (max-width: 380px) {
    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .mobile-links a {
        font-size: 17px;
    }
}

/* About-page image collage: clean mobile stacking */
@media (max-width: 767.98px) {
    .philosophy-section .split-grid {
        gap: 34px;
    }

    .image-collage {
        display: grid;
        gap: 14px;
        max-width: 100%;
        overflow: hidden;
        padding: 0 !important;
        width: 100%;
    }

    .image-collage .collage-main,
    .image-collage .collage-small {
        border-radius: 0;
        display: block;
        height: auto;
        max-width: 100%;
        object-fit: cover;
        position: static !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
    }

    .image-collage .collage-main {
        aspect-ratio: 4 / 5;
        object-position: center;
    }

    .image-collage .collage-small {
        aspect-ratio: 16 / 10;
        box-shadow: 0 16px 36px rgba(3, 24, 32, .14);
        object-position: center;
    }
}

@media (max-width: 480px) {
    .image-collage {
        gap: 10px;
    }

    .image-collage .collage-main {
        aspect-ratio: 3 / 4;
    }

    .image-collage .collage-small {
        aspect-ratio: 16 / 9;
    }
}