:root{
    --ink:#10110e;
    --ink-soft:#171813;
    --ivory:#f1eee5;
    --stone:#d9d3c6;
    --gold:#b9a06a;
    --gold-light:#d2bc88;
    --white:#fff;
    --line:rgba(16,17,14,.18);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    overflow-x:hidden;
    background:var(--ink);
    color:var(--white);
    font-family:"Montserrat",sans-serif;
    line-height:1.75;
}
body::selection{background:var(--gold);color:var(--ink)}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font:inherit}

/* Header */
header{
    position:fixed;
    inset:0 0 auto;
    z-index:1000;
    height:82px;
    border-bottom:1px solid rgba(255,255,255,.16);
    background:rgba(15,16,13,.32);
    backdrop-filter:blur(14px);
    transition:.3s ease;
}
nav{
    width:min(1240px,90%);
    height:100%;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
}
.nav-brand img{width:112px;max-height:54px;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{
    position:relative;
    color:rgba(255,255,255,.82);
    font-size:.65rem;
    font-weight:500;
    letter-spacing:.15em;
    text-transform:uppercase;
}
.nav-links a::after{
    content:"";
    position:absolute;
    left:0;right:100%;bottom:-8px;
    height:1px;background:var(--gold);
    transition:.25s ease;
}
.nav-links a:hover{color:white}
.nav-links a:hover::after{right:0}

/* Hero video */
.hero{
    position:relative;
    min-height:76vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,rgba(8,9,7,.3),rgba(8,9,7,.55)),
        radial-gradient(circle at 50% 50%,transparent,rgba(8,9,7,.35));
}
.video-logo{
    position:relative;
    z-index:2;
    width:min(520px,72vw);
    filter:drop-shadow(0 14px 34px rgba(0,0,0,.55));
}

/* Hero copy */
.hero-text{
    position:relative;
    padding:105px 7vw 115px;
    overflow:hidden;
    background:var(--ink);
    text-align:left;
}
.hero-text::before,.hero-text::after{
    content:"";
    position:absolute;
    border:1px solid rgba(185,160,106,.16);
    border-radius:50%;
    pointer-events:none;
}
.hero-text::before{width:470px;height:470px;right:-170px;top:-220px}
.hero-text::after{width:240px;height:240px;right:12%;bottom:-160px}
.hero-text>*{position:relative;z-index:1;max-width:850px}
.hero-text h1,
#about h2,#services h2,.page-menu h2,.quote h2,#gallery h2,
.instagram h2,#faq h2,#contact h2,footer h3{
    font-family:"Cormorant Garamond",serif;
    font-weight:500;
    letter-spacing:-.035em;
    line-height:.95;
}
.hero-text h1{
    max-width:900px;
    color: var(--gold);
    font-size:clamp(3.7rem,7vw,7rem);
}
.hero-text h1::after{
   
    display:block;
    margin-top:8px;
    color:var(--gold);
    font-style:italic;
}
.hero-text h2{
    margin:34px 0 14px;
    color:rgba(255,255,255,.76);
    font-size:.75rem;
    font-weight:500;
    letter-spacing:.2em;
    text-transform:uppercase;
}
.hero-text p{color:rgba(255,255,255,.57);font-family:"Cormorant Garamond";font-size:1.2rem}
.quote-button{margin-top:32px}
.whatsapp-button,.button,.menu-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-width:230px;
    padding:17px 24px;
    border:1px solid currentColor;
    border-radius:0;
    background:transparent;
    color:var(--gold);
    font-size:.62rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    cursor:pointer;
    transition:.25s ease;
}
.whatsapp-button:hover,.button:hover,.menu-button:hover{
    background:var(--gold);
    color:var(--ink);
    transform:translateY(-2px);
}

section{padding:120px 7vw}
#about,#services,#gallery,#faq,#contact,.instagram,.menu-section{position:relative}
#about::before,#services::before,#gallery::before,#faq::before,.menu-section::before{
    display:none;
    margin-bottom:24px;
    color:var(--gold);
    font-size:.58rem;
    font-weight:600;
    letter-spacing:.22em;
}

/* About */
#about{background:var(--ivory);color:var(--ink)}
#about::before{content:"01 — OUR STORY"}
.container{width:min(1120px,100%);margin:auto}
#about h2{font-size:clamp(3.4rem,6vw,6.2rem);color:var(--ink);margin-bottom:50px}
#about p {
    max-width: 900px;
    margin: 0;
    color: #4f504a;
    font-family: "Montserrat", sans-serif;
    font-size: 0.95rem;
    line-height: 1.9;
    text-align: left;
}

/* Services */
#services{background:var(--stone);color:var(--ink)}
#services::before{content:"02 — WHAT WE DO"}
#services h2{font-size:clamp(3.4rem,6vw,6.2rem);margin-bottom:55px}
#services h2::after{content:" Shaped around you.";display:block;color:var(--gold);font-style:italic}
.services-image{
    width:100%;
    height:min(55vw,590px);
    margin:0 auto 70px;
    object-fit:cover;
    filter:saturate(.8) contrast(1.04);
}
.service-cards {
    max-width: 1120px;
    margin: auto;
    border-top: 1px solid var(--line);
}

.service-card {
    position: relative;
    padding-left: 55px;
    border-bottom: 1px solid var(--line);
}

.service-card::before {
    content: counter(service, decimal-leading-zero);
    counter-increment: service;
    position: absolute;
    top: 25px;
    left: 0;
    color: #77786f;
    font-size: 0.58rem;
}

.service-card::after {
    display: none;
}

.service-cards {
    counter-reset: service;
}

.service-question {
    position: relative;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 5px 15px 0;
    cursor: pointer;
}

.service-question h3 {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.25rem;
    font-weight: 500;
}

.service-question span {
    color: var(--gold);
    font-size: 1.3rem;
}

.service-answer {
    display: none;
    padding: 0 50px 22px 0;
}

.service-answer p {
    max-width: 750px;
    color: #575851;
    font-size: 0.9rem;
    line-height: 1.8;
}
/* Menu */
.menu-section{padding-top:90px;background:var(--ink);text-align:center}
.menu-section::before {
    content: "03 — SIGNATURE COCKTAILS";
    font-size: 0.85rem;
}
.menu-button {
    width: fit-content;
    margin: 0 auto 48px;
    padding: 20px 35px;
    font-size: 0.8rem;
    display: flex;
}
.page-menu{
    display:grid;
    grid-template-rows:0fr;
    opacity:0;
    transition:grid-template-rows .55s ease,opacity .35s ease;
}
.page-menu.open{grid-template-rows:1fr;opacity:1}
.page-menu-inner{
    width:min(1040px,100%);
    margin:auto;
    overflow:hidden;
    text-align:left;
}
.menu-logo{width:135px;margin:10px auto 25px}
.page-menu h2{text-align:center;color:var(--ivory);font-size:clamp(3.5rem,7vw,6rem)}
.menu-divider{width:46px;height:1px;margin:26px auto;background:var(--gold)}
.menu-introduction,.menu-footer p{
    max-width:610px;
    margin:0 auto 45px;
    color:rgba(255,255,255,.56);
    text-align:center;
    font-size:.76rem;
}
.cocktail-list{display:grid;grid-template-columns:repeat(2,1fr);column-gap:65px}
.cocktail-item{padding:28px 0;border-bottom:1px solid rgba(185,160,106,.25)}
.cocktail-item h3{color:var(--gold);font-family:"Cormorant Garamond";font-size:2rem;font-weight:500}
.cocktail-description{margin-top:8px;color:rgba(255,255,255,.52);font-size:.9rem;line-height:1.7}
.menu-footer{margin-top:45px}

/* Quote */
.quote{
    min-height:480px;
    display:grid;
    place-items:center;
    background:
        linear-gradient(rgba(12,13,10,.65),rgba(12,13,10,.78)),
        url("images/gallery1.jpg") center/cover fixed;
    text-align:center;
}
.quote h2{max-width:900px;color:white;font-size: 2rem;;font-style:italic}

/* Gallery */
#gallery{background:var(--ivory);color:var(--ink)}
#gallery::before{content:"04 — SELECTED MOMENTS"}
#gallery h2{font-size:clamp(3.4rem,6vw,6.2rem);margin-bottom:55px}
#gallery h2::after {
    content: "A Closer Look";
    display: block;
    color: var(--gold);
    font-style: italic;
}
.gallery {
    width: min(900px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.photo,
.photo:nth-child(n) {
    grid-column: auto;
    position: relative;
    overflow: hidden;
    min-height: 0;
    aspect-ratio: 4 / 3;
    background: #ccc;
}
.photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.78);transition:.6s ease}
.photo:hover img{transform:scale(1.045);filter:saturate(1)}

/* Instagram */
.instagram{background:var(--stone);color:var(--ink);text-align:center}
.instagram h2{font-size:clamp(3.2rem,5vw,5.4rem);margin-bottom:28px}
.instagram a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px 42px;
    border: 1px solid var(--gold);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: 0.3s;
}    display:inline-flex;align-items:center;gap:12px;
    padding-bottom:7px;border-bottom:1px solid var(--gold);
    font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
}
.instagram .fa-instagram {
    color: var(--gold);
    font-size: 1.8rem;
}

/* FAQ */
#faq{background:var(--stone);color:var(--ink)}
#faq::before{content:"05 — GOOD TO KNOW"}
#faq h2{font-size:clamp(3.4rem,6vw,6.2rem);margin-bottom:55px}
#faq h2::after{content:" before we begin.";display:block;color:var(--gold);font-style:italic}
.faq-container{width:min(900px,100%);margin-left:auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-question{
    position:relative;
    padding:26px 55px 26px 0;
    cursor:pointer;
    font-family:"Cormorant Garamond";
    font-size:1.35rem;
    line-height:1.3;
}
.faq-question span{position:absolute;right:8px;color:var(--gold);font-family:Montserrat;font-weight:400}
.faq-answer{display:none;padding:0 55px 25px 0}
.faq-answer p{color:#575851;font-size:.95rem;line-height:1.75}

/* Contact and footer */
#contact{
    padding-top:145px;padding-bottom:145px;
    background:var(--ink);text-align:center;
}
#contact::before{
    content:"YOUR EVENT STARTS HERE";
    display:block;margin-bottom:27px;color:var(--gold);
    font-size:.88rem;letter-spacing:.22em;
}
#contact h2{font-size:clamp(3.6rem,7vw,7rem)}
#contact>p{margin:28px 0 15px;color:rgba(255,255,255,.54)}
#contact>.whatsapp-button{margin:22px 0 34px}
#contact{color:rgba(255,255,255,.68)}
footer{
    padding:55px 7vw;
    display:grid;
    grid-template-columns:1fr auto;
    gap:12px 60px;
    align-items:end;
    border-top:1px solid rgba(255,255,255,.13);
    background:#090a08;
}
footer h3{grid-row:span 2;color:var(--ivory);font-size:2.3rem}
footer p{color:rgba(255,255,255,.42);font-size:.56rem;text-align:right;letter-spacing:.08em}
.floating-whatsapp{position:fixed;right:24px;bottom:24px;z-index:999}
.floating-whatsapp a{
    width:56px;height:56px;display:grid;place-items:center;
    border-radius:50%;background:#25d366;color:white;
    box-shadow:0 10px 30px rgba(0,0,0,.32);font-size:1.55rem;
}

@media(max-width:760px){
    header{height:70px}
    nav{width:90%}
    .nav-brand img{width:88px}
    .nav-links{gap:13px}
    .nav-links a{font-size:.5rem;letter-spacing:.08em}
    .nav-links a:nth-child(4),.nav-links a:nth-child(5){display:none}
    .hero{min-height:62vh}
    .video-logo{width:68vw}
    .hero-text,section{padding-left:7vw;padding-right:7vw}
    .hero-text{padding-top:82px;padding-bottom:90px}
    .hero-text h1{font-size:clamp(3.3rem,15vw,5.5rem)}
    #about,#services,#gallery,#faq,.instagram,.menu-section{padding-top:85px;padding-bottom:85px}
    #about p{font-size:1.12rem}
    .services-image{height:58vw;margin-bottom:40px}
    .service-card{min-height:78px;padding-left:43px;padding-right:28px}
    .service-card:hover{padding-left:49px}
    .cocktail-list{grid-template-columns:1fr}
    .gallery{grid-template-columns:1fr;gap:12px}
    .photo,.photo:nth-child(n){grid-column:auto;min-height:260px}
    .quote{min-height:360px;background-attachment:scroll}
    .faq-container{margin:0}
    .faq-question{font-size:1.12rem}
    footer{grid-template-columns:1fr}
    footer h3{grid-row:auto}
    footer p{text-align:left}
}

@media(max-width:440px){
    .nav-links a{display:none!important}
    .nav-links a:last-child{display:block!important}
    .hero-text h1{font-size:3.2rem}
    .whatsapp-button,.button,.menu-button{width:100%;min-width:0}
}

@media(prefers-reduced-motion:reduce){
    *{scroll-behavior:auto!important;transition:none!important}
}