/* GH STUDIO - shared stylesheet (base, navbar, footer, buttons, modal) */

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ background:#050505; color:#fff; font-family:"DM Sans",sans-serif; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
:root{
    --black:#050505;
    --black2:#0b0b0b;
    --black3:#111111;
    --white:#ffffff;
    --gray:#999999;
    --gray2:#666666;
    --line:rgba(255,255,255,.13);
    --container:1200px;
}
.container{ width:min(var(--container), calc(100% - 50px)); margin:auto; }
/* =====================================================
   NAVBAR
===================================================== */
.navbar{
    position:fixed; top:0; left:0; width:100%; z-index:999;
    padding:22px 0;
    background:linear-gradient(rgba(5,5,5,.95), rgba(5,5,5,.65));
    backdrop-filter:blur(15px);
    border-bottom:1px solid var(--line);
}
.nav-inner{
    width:min(var(--container), calc(100% - 50px));
    margin:auto;
    display:flex; align-items:center; justify-content:space-between;
}
.logo img{ height:43px; filter:grayscale(1) brightness(2); }
.nav-links{ display:flex; align-items:center; gap:35px; list-style:none; }
.nav-links a{ font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:#aaa; transition:.3s; }
.nav-links a:hover{ color:#fff; }
.nav-book{ padding:13px 20px; border:1px solid #fff; color:#fff!important; transition:.3s; }
.nav-book:hover{ background:#fff; color:#000!important; }
/* =====================================================
   HERO
===================================================== */
.hero{ min-height:100vh; position:relative; display:flex; align-items:center; overflow:hidden; }
.hero-content{
    position:relative; z-index:2;
    width:min(var(--container), calc(100% - 50px));
    margin:auto; padding-top:90px;
}
.hero-small{ font-size:11px; letter-spacing:4px; text-transform:uppercase; color:#aaa; margin-bottom:25px; }
.hero h1{
    font-family:"Playfair Display", serif;
    font-weight:500;
    font-size:clamp(65px, 10vw, 150px);
    line-height:.82;
    letter-spacing:-7px;
    max-width:900px;
}
.hero h1 span{
    display:block;
    font-family:"DM Sans", sans-serif;
    font-weight:800;
    font-size:clamp(50px, 8vw, 120px);
    letter-spacing:-6px;
}
.hero-description{ max-width:480px; margin-top:40px; color:#aaa; font-size:15px; line-height:1.8; }
.hero-buttons{ display:flex; gap:12px; margin-top:35px; }
.btn{ padding:15px 25px; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; transition:.3s; }
.btn-white{ background:#fff; color:#000; }
.btn-white:hover{ background:#ddd; }
.btn-outline{ border:1px solid #555; }
.btn-outline:hover{ border-color:#fff; }
.hero-side{
    position:absolute; right:35px; bottom:50px; z-index:3;
    writing-mode:vertical-rl;
    color:#666; font-size:10px; letter-spacing:4px; text-transform:uppercase;
}
/* =====================================================
   MARQUEE
===================================================== */
.marquee{
    overflow:hidden;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:17px 0;
    background:#fff; color:#000;
}
.marquee-track{ display:flex; width:max-content; animation:marquee 25s linear infinite; }
.marquee span{ font-size:13px; font-weight:800; letter-spacing:3px; margin-right:50px; text-transform:uppercase; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.gallery-grid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:15px; }
.gallery-item{ position:relative; overflow:hidden; background:#111; }
.gallery-item:nth-child(1){ grid-column:span 7; height:600px; }
.gallery-item:nth-child(2){ grid-column:span 5; height:600px; }
.gallery-item:nth-child(3){ grid-column:span 4; height:430px; }
.gallery-item:nth-child(4){ grid-column:span 4; height:430px; }
.gallery-item:nth-child(5){ grid-column:span 4; height:430px; }
.gallery-item:nth-child(6){ grid-column:span 12; height:600px; }
/* =====================================================
   FOOTER
===================================================== */
footer{ border-top:1px solid var(--line); padding:70px 0 25px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:60px; }
.footer-logo{ height:100px; filter:grayscale(1) brightness(2); }
.footer-brand p{ color:#666; max-width:350px; margin-top:20px; line-height:1.7; font-size:13px; }
.footer-title{ font-size:10px; color:#555; letter-spacing:3px; margin-bottom:20px; }
.footer-links{ display:flex; flex-direction:column; gap:12px; }
.footer-links a{ color:#aaa; font-size:13px; transition:.3s; }
.footer-links a:hover{ color:#fff; }
.footer-bottom{
    display:flex; justify-content:space-between; margin-top:70px; padding-top:20px;
    border-top:1px solid var(--line); color:#444; font-size:10px; letter-spacing:1px;
}
/* =====================================================
   FLOATING BOOKING
===================================================== */
.floating-book{
    position:fixed; right:25px; bottom:25px; z-index:999;
    width:65px; height:65px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%; background:#fff; color:#000;
    font-size:10px; font-weight:800; text-align:center;
    box-shadow:0 10px 40px rgba(0,0,0,.5);
    transition:.3s;
}
.floating-book:hover{ transform:scale(1.08); }
/* =====================================================
   MOBILE NAVIGATION (hamburger)
===================================================== */
.nav-toggle{
    display:none; width:30px; height:30px; flex:0 0 30px;
    align-items:center; justify-content:center; padding:0;
    border:1px solid rgba(255,255,255,.22); border-radius:2px;
    background:rgb(5 5 5 / 21%); color:#fff; cursor:pointer;
    -webkit-appearance:none; appearance:none; position:relative; z-index:1002;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    display:block; width:20px; height:1px; background:#fff;
    transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle span{ position:relative; }
.nav-toggle span::before, .nav-toggle span::after{ content:""; position:absolute; left:0; }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); }
.mobile-menu{
    display:none; position:fixed; top:0; left:0; right:0; z-index:1001;
    padding:88px 20px 24px;
    background:rgba(5,5,5,.98);
    border-bottom:1px solid rgba(255,255,255,.14);
    box-shadow:0 20px 50px rgba(0,0,0,.45);
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition:opacity .25s ease, visibility .25s ease, transform .25s ease;
}
.mobile-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
.mobile-menu-inner{ width:100%; max-width:var(--container); margin:0 auto; }
.mobile-menu a{
    display:flex; align-items:center; justify-content:space-between;
    min-height:54px; padding:0 2px;
    border-bottom:1px solid rgba(255,255,255,.10);
    color:#aaa; font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
}
.mobile-menu a::after{ content:"↗"; color:#555; font-size:13px; }
.mobile-menu a:hover{ color:#fff; }
.mobile-menu .mobile-book{
    justify-content:center; margin-top:16px; min-height:50px;
    border:1px solid #fff; color:#fff;
}
.mobile-menu .mobile-book::after{ display:none; }
body.menu-open{ overflow:hidden; }
@media(max-width:800px){
    .nav-inner{ position:relative; }
    .nav-inner nav{ display:none; }
    .nav-toggle{ display:flex; }
    .mobile-menu{ display:block; }
}
@media(min-width:801px){
    .mobile-menu{ display:none!important; }
}
/* =====================================================
   PAGE HERO
===================================================== */

.page-hero{

    position:relative;

    min-height:60vh;

    display:flex;

    align-items:flex-end;

    overflow:hidden;

    padding-bottom:90px;

}
.page-hero-content{

    position:relative;

    z-index:2;

    width:min(
        var(--container),
        calc(100% - 50px)
    );

    margin:auto;

    padding-top:90px;

}
.label{

    color:#888;

    font-size:11px;

    letter-spacing:3px;

    text-transform:uppercase;

}
.page-hero h1{

    margin-top:20px;

    font-family:
        "Playfair Display",
        serif;

    font-weight:500;

    font-size:
        clamp(
            48px,
            8vw,
            110px
        );

    line-height:.9;

    letter-spacing:-4px;

}
.page-hero p{

    max-width:480px;

    margin-top:25px;

    color:#999;

    font-size:14px;

    line-height:1.8;

    letter-spacing:.5px;

    text-transform:uppercase;

}
/* =====================================================
   CATALOG FILTER CHIPS
===================================================== */

.catalog-filters{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:0 0 35px;
}
.catalog-filters button{
    border:1px solid var(--line);
    background:transparent;
    color:#999;
    padding:10px 20px;
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    transition:.25s;
}
.catalog-filters button:hover{
    border-color:#fff;
    color:#fff;
}
.catalog-filters button.active{
    background:#fff;
    color:#000;
    border-color:#fff;
}
/* =====================================================
   CTA
===================================================== */

.cta{

    padding:130px 0 150px;

    text-align:center;

    border-top:1px solid var(--line);

}
.cta h2{

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            42px,
            6vw,
            80px
        );

    line-height:.95;

    letter-spacing:-3px;

}
.cta p{

    color:#777;

    max-width:480px;

    margin:25px auto 35px;

    line-height:1.8;

    font-size:14px;

}
.btn{

    display:inline-block;

    padding:16px 30px;

    font-size:12px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    transition:.3s;

}