@media (max-width: 1200px){
    .site-nav{
        gap:22px;
        padding-right:0;
    }

    .booking-card{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .booking-submit{
        grid-column:1 / -1;
    }

    .icon-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    .room-grid,
    .amenity-grid,
    .stats-grid,
    .gallery-grid,
    .property-grid,
    .contact-property-grid,
    .area-info-grid,
    .room-amenities-categories{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .booking-layout{
        grid-template-columns:1fr;
    }

    .booking-side-card{
        position:relative;
        top:auto;
    }

    .footer-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 992px){
    .site-header::before{
        inset:10px 12px;
    }

    .nav-toggle{
        display:flex;
    }

    .site-nav{
        position:fixed;
        top:88px;
        left:4%;
        right:4%;
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
        padding:20px;
        border-radius:22px;
        /* solid dark navy mobile menu (no blur/gradient/shadow) */
        background:#020b1f;
        border:0;
        opacity:0;
        visibility:hidden;
        transform:translateY(-10px);
        transition:opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    }

    .site-nav.is-open{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

    .site-nav a{
        width:100%;
        padding:8px 0;
    }

    .nav-toggle.is-open span:nth-child(1){
        transform:translateY(8px) rotate(45deg);
    }

    .nav-toggle.is-open span:nth-child(2){
        opacity:0;
    }

    .nav-toggle.is-open span:nth-child(3){
        transform:translateY(-8px) rotate(-45deg);
    }

    .header-actions .button{
        display:none;
    }

    .header-shell{
        grid-template-columns:auto auto;
        gap:10px;
    }

    .hero-section{
        min-height:auto;
    }

    .hero-grid,
    .page-hero-content{
        padding-top:150px;
    }

    .hero-grid{
        padding-bottom:154px;
    }

    .hero-content,
    .page-hero-content{
        margin-top:-24px;
        padding-left:42px;
    }

    .hero-content{
        top:136px;
    }

    .about-split,
    .why-grid,
    .page-split,
    .signature-grid,
    .contact-grid,
    .booking-page-grid,
    .booking-layout,
    .detail-room-card{
        grid-template-columns:1fr;
    }

    .about-media{
        min-height:520px;
    }

    .three-column-grid{
        grid-template-columns:1fr;
    }

    .gallery-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px){
    .section{
        padding:25px 0;
    }

    .container{
        width:min(94%, 1280px);
    }

    .brand-mark{
        width:66px;
        height:66px;
        border-radius:20px;
    }

    .brand-copy strong{
        font-size:1.28rem;
    }

    .brand-copy small{
        font-size:0.62rem;
        letter-spacing:0.2em;
    }

    .hero-content h1,
    .page-hero-content h1{
        /* responsive scaling with reduced maxima for tablet */
        font-size:clamp(1.6rem, 6.8vw, 2.9rem);
        max-width:100%;
        line-height:1.04;
    }

    .hero-description,
    .page-hero-content p{
        max-width:100%;
        margin-top:18px;
        margin-left:18px;
    }

    .hero-buttons,
    .hero-controls,
    .newsletter-form,
    .dual-actions,
    .booking-form-footer,
    .room-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .booking-overlap{
        margin-top:-66px;
    }

    .booking-card,
    .icon-grid,
    .room-grid,
    .amenity-grid,
    .stats-grid,
    .footer-grid,
    .contact-form,
    .booking-form,
    .property-grid,
    .contact-property-grid,
    .area-info-grid,
    .room-amenities-categories{
        grid-template-columns:1fr;
    }

    .about-media{
        min-height:420px;
    }

    .about-image-primary{
        inset:0 40px 70px 0;
    }

    .about-image-secondary{
        width:180px;
        height:200px;
    }

    .why-image,
    .signature-image,
    .page-image-stack{
        min-height:360px;
    }

    .gallery-grid{
        grid-template-columns:1fr;
    }

    .gallery-card{
        min-height:260px;
    }
}

@media (max-width: 540px){
    .site-header{
        padding:12px 0;
    }

    .site-header::before{
        inset:8px;
        border-radius:22px;
    }

    .header-shell{
        gap:12px;
    }

    .brand{
        gap:10px;
    }

    .brand-mark{
        width:58px;
        height:58px;
        padding:7px;
    }

    .brand-copy strong{
        font-size:1.18rem;
    }

    .brand-copy small{
        letter-spacing:0.14em;
    }

    .hero-grid{
        padding-top:136px;
        padding-bottom:118px;
    }

    .hero-content{
        margin-top:-10px;
        padding-left:20px;
        top:122px;
    }

    .hero-content h1,
    .page-hero-content h1{
        /* mobile: keep headings compact and readable */
        font-size:clamp(1.5rem, 8.6vw, 2.4rem);
        line-height:1.02;
        max-width:100%;
    }

    .page-hero-content{
        padding-left:20px;
    }

    .hero-description,
    .page-hero-content p{
        margin-left:0;
        margin-top:16px;
        text-wrap:pretty;
    }

    .booking-overlap{
        margin-top:-48px;
    }

    .booking-card,
    .contact-panel,
    .info-panel,
    .amenity-detail-card,
    .amenity-card,
    .map-shell,
    .detail-room-body,
    .booking-side-card,
    .booking-form-card,
    .area-info-card,
    .amenity-category-card,
    .property-rules-card{
        padding:24px;
    }

    .booking-float{
        right:16px;
        bottom:84px;
        min-height:48px;
        padding:0 18px;
    }

    .whatsapp-float{
        right:16px;
        bottom:16px;
    }
}