:root{
    --night:#0B1620;
    --night-2:#0E1F26;
    --sand:#F5EFE3;
    --gold:#D4AF6A;
    --silver:#C9D1D6;
    --teal:#2E8C8C;
    --sea:#3E6E8E;
    --pink:#E8A6B4;
    --lush:#5A8C6E;
    --sage:#5A8C6E;
    --coral:#E8A6B4;
    --line: rgba(245,239,227,0.14);
    --serif: 'Cormorant Garamond', serif;
    --sans: 'Work Sans', sans-serif;
  }

  *{margin:0; padding:0; box-sizing:border-box;}

  html{scroll-behavior:smooth; overflow-x:hidden;}

  body{
    background:var(--night);
    color:var(--sand);
    font-family:var(--sans);
    font-weight:300;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  img{max-width:100%; display:block;}

  a{color:inherit; text-decoration:none;}

  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

  @media (max-width: 600px){
    .wrap{padding:0 24px;}
  }

  /* ===================== HEADER ===================== */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:28px 48px;
    background:linear-gradient(to bottom, rgba(11,22,32,0.85), transparent);
    transition: padding .35s ease, background .35s ease, box-shadow .35s ease;
  }
  header.scrolled{
    padding:16px 48px;
    background:rgba(11,22,32,0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  }

  .logo{
    font-family:var(--serif);
    font-size:1.6rem;
    font-weight:500;
    letter-spacing:0.08em;
    text-transform:uppercase;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  }
  .logo span{color:var(--gold); font-style:italic; font-weight:400;}

  nav ul{display:flex; gap:40px; list-style:none;}
  nav a{
    font-size:0.78rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    font-weight:400;
    opacity:0.85;
    transition:opacity .2s, color .2s;
    position:relative;
    padding-bottom:6px;
  }
  nav a:hover{opacity:1; color:var(--teal);}
  nav a::after{
    content:'';
    position:absolute; left:0; bottom:0;
    width:0; height:1px; background:var(--teal);
    transition:width .25s ease;
  }
  nav a:hover::after{width:100%;}

  /* ===================== MOBILE NAV ===================== */
  .nav-toggle{
    display:none;
    width:42px; height:42px;
    border:1px solid var(--line);
    border-radius:50%;
    background:rgba(245,239,227,0.04);
    position:relative;
    cursor:pointer;
    z-index:101;
    transition: border-color .25s ease, background .25s ease;
  }
  .nav-toggle:hover{border-color:var(--gold);}
  .nav-toggle span{
    position:absolute; left:12px; right:12px; height:1px;
    background:var(--sand);
    transition: transform .3s ease, opacity .3s ease;
  }
  .nav-toggle span:nth-child(1){top:16px;}
  .nav-toggle span:nth-child(2){top:21px;}
  .nav-toggle span:nth-child(3){top:26px;}
  .nav-toggle.open span:nth-child(1){transform: translateY(5px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform: translateY(-5px) rotate(-45deg);}

  @media (max-width: 900px){
    .nav-toggle{display:block;}
    nav{
      position:fixed;
      top:0; right:0;
      width:min(78vw, 320px);
      height:100dvh;
      background:rgba(11,22,32,0.97);
      backdrop-filter: blur(14px);
      display:flex;
      align-items:center;
      justify-content:center;
      transform: translateX(100%);
      transition: transform .4s cubic-bezier(.65,0,.35,1);
      z-index:99;
      border-left:1px solid var(--line);
    }
    nav.open{transform: translateX(0);}
    nav ul{flex-direction:column; gap:34px; text-align:center;}
    nav a{font-size:1rem;}
  }

  /* ===================== HERO ===================== */
  .hero{
    height:100vh;
    height:100dvh;
    min-height:560px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;
  }
  .hero-bg{
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(7,14,20,0.55) 0%, rgba(9,18,24,0.6) 45%, rgba(7,14,20,0.92) 100%),
      radial-gradient(ellipse 70% 55% at 50% 45%, rgba(5,10,15,0.55) 0%, rgba(5,10,15,0) 70%),
      url('../img/hero.png') center/cover no-repeat;
    background-blend-mode: normal, normal, normal;
    will-change: transform;
  }
  .hero-content{position:relative; z-index:2; max-width:760px; padding:0 24px;}
  .hero-eyebrow{
    font-size:0.8rem;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--pink);
    margin-bottom:24px;
    font-weight:400;
    text-shadow: 0 2px 18px rgba(0,0,0,0.55);
  }
  .hero h1{
    font-family:var(--serif);
    font-size:clamp(3.2rem, 8vw, 6.5rem);
    font-weight:500;
    line-height:1.05;
    letter-spacing:0.02em;
    color:#FAF6F0;
    text-shadow: 0 4px 28px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.5);
  }
  .hero h1 em{font-style:italic; font-weight:400; color:var(--teal); text-shadow: 0 4px 28px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.5);}
  .hero-sub{
    margin-top:28px;
    font-size:1.05rem;
    font-weight:300;
    color:rgba(245,239,227,0.92);
    max-width:480px;
    margin-left:auto; margin-right:auto;
    text-shadow: 0 2px 16px rgba(0,0,0,0.55);
  }
  .hero-cta{
    margin-top:44px;
    display:inline-flex;
    align-items:center;
    gap:14px;
    padding:16px 38px;
    border:1px solid var(--gold);
    color:var(--gold);
    font-size:0.78rem;
    letter-spacing:0.24em;
    text-transform:uppercase;
    transition: background .25s ease, color .25s ease;
  }
  .hero-cta:hover{background:var(--gold); color:var(--night);}

  .scroll-cue{
    position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
    z-index:2;
    width:1px; height:60px;
    background:linear-gradient(to bottom, transparent, var(--teal) 40%, transparent);
    animation:cuemove 2.2s ease-in-out infinite;
  }
  @keyframes cuemove{
    0%,100%{opacity:0.3;}
    50%{opacity:1;}
  }

  /* ===================== DIVIDER (signature motif) ===================== */
  .frond-divider{
    display:flex; align-items:center; justify-content:center;
    gap:18px;
    padding:64px 0;
    color:var(--gold);
  }
  .frond-divider .line{height:1px; flex:1; max-width:140px; background:var(--line);}
  .frond-divider svg{width:46px; height:46px; opacity:0.85;}

  /* ===================== SECTION GENERAL ===================== */
  section{padding:30px 0;}
  .section-inner{padding-top:90px; padding-bottom:90px;}

  .eyebrow{
    font-size:0.78rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--teal);
    margin-bottom:18px;
  }
  h2.section-title{
    font-family:var(--serif);
    font-size:clamp(2.4rem, 5vw, 3.6rem);
    font-weight:500;
    letter-spacing:0.01em;
    line-height:1.15;
  }
  h2.section-title em{font-style:italic; font-weight:400; color:var(--pink);}

  /* ===================== PHILOSOPHY ===================== */
  .philosophy{
    display:grid;
    grid-template-columns: 1fr 1.1fr;
    gap:80px;
    align-items:center;
  }
  .philosophy-text p{
    margin-top:24px;
    font-size:1.02rem;
    color:rgba(245,239,227,0.75);
    max-width:480px;
  }
  .philosophy-img{
    position:relative;
    border-radius:2px;
    overflow:hidden;
  }
  .philosophy-img img{
    aspect-ratio: 4/5;
    object-fit:cover;
    filter:saturate(0.95) contrast(1.02);
  }
  .philosophy-img::after{
    content:'';
    position:absolute; inset:14px;
    border:1px solid var(--lush);
    opacity:0.6;
    pointer-events:none;
  }

  /* ===================== MENU ===================== */
  .menu-section{background:var(--night-2);}
  .menu-intro{
    text-align:center;
    max-width:560px;
    margin:0 auto 70px;
  }
  .menu-intro p{
    margin-top:18px;
    color:rgba(245,239,227,0.7);
    font-size:1.02rem;
  }

  .menu-categories{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .menu-category{
    display:flex;
    flex-direction:column;
    gap:36px;
    padding:56px 0;
    border-bottom:1px solid var(--line);
  }
  .menu-category-img{
    width:100%;
    aspect-ratio: 4/3;
    border-radius:2px;
    overflow:hidden;
    position:relative;
    background: linear-gradient(135deg, rgba(212,175,106,0.08), rgba(46,140,140,0.08));
  }
  .menu-category-img img{
    width:100%; height:100%; object-fit:cover;
    filter:saturate(0.95) contrast(1.02);
  }
  .menu-category-img::after{
    content:'';
    position:absolute; inset:10px;
    border:1px solid var(--gold);
    opacity:0.4;
    pointer-events:none;
  }
  .menu-category-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom:22px;
  }
  .menu-category-head h3{
    font-family:var(--serif);
    font-size:1.7rem;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--gold);
  }
  .menu-category-head .cat-mark{
    font-family:var(--serif);
    font-style:italic;
    font-size:0.95rem;
    color:var(--teal);
  }

  /* Rotate accent colors per category for tropical variety */
  .menu-category:nth-child(2) h3,
  .menu-category:nth-child(5) h3,
  .menu-category:nth-child(8) h3 { color: var(--teal); }
  .menu-category:nth-child(2) .cat-mark,
  .menu-category:nth-child(5) .cat-mark,
  .menu-category:nth-child(8) .cat-mark { color: var(--pink); }

  .menu-category:nth-child(3) h3,
  .menu-category:nth-child(6) h3,
  .menu-category:nth-child(9) h3 { color: var(--pink); }
  .menu-category:nth-child(3) .cat-mark,
  .menu-category:nth-child(6) .cat-mark,
  .menu-category:nth-child(9) .cat-mark { color: var(--sea); }

  .menu-category:nth-child(4) h3,
  .menu-category:nth-child(7) h3,
  .menu-category:nth-child(10) h3 { color: var(--sea); }
  .menu-category:nth-child(4) .cat-mark,
  .menu-category:nth-child(7) .cat-mark,
  .menu-category:nth-child(10) .cat-mark { color: var(--lush); }

  .menu-item{margin-bottom:22px;}
  .menu-item-name{
    font-family:var(--serif);
    font-size:1.25rem;
    font-weight:500;
    line-height:1.3;
  }
  .menu-item-desc{
    font-size:0.92rem;
    color:rgba(245,239,227,0.58);
    font-style:italic;
    margin-top:4px;
    font-family:var(--serif);
    line-height:1.5;
  }

  .menu-note{
    margin-top:8px;
    font-size:0.85rem;
    color:rgba(245,239,227,0.55);
    letter-spacing:0.04em;
  }

  /* Desktop: alternate image left/right, side-by-side */
  @media (min-width: 860px){
    .menu-category{
      flex-direction:row;
      align-items:flex-start;
      gap:70px;
      padding:80px 0;
    }
    .menu-category-img{
      flex:0 0 38%;
      aspect-ratio: 4/5;
      position:sticky;
      top:120px;
    }
    .menu-category-list{
      flex:1;
    }
    .menu-category:nth-child(even){
      flex-direction:row-reverse;
    }
  }

  /* ===================== GALLERY ===================== */
  .gallery-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 240px);
    gap:10px;
  }
  .gallery-grid img{
    width:100%; height:100%; object-fit:cover;
    filter:saturate(0.92);
    transition:transform .6s ease, filter .6s ease;
  }
  .gallery-grid a{overflow:hidden; display:block;}
  .gallery-grid a:hover img{transform:scale(1.06); filter:saturate(1.05);}
  .gallery-grid a:nth-child(1){grid-column:1/3; grid-row:1/3;}
  .gallery-grid a:nth-child(4){grid-column:4/5; grid-row:1/3;}

  /* ===================== QUOTE ===================== */
  .quote-section{
    text-align:center;
    padding-top:120px;
    padding-bottom:120px;
  }
  .quote-mark{
    font-family:var(--serif);
    font-size:5rem;
    color:var(--pink);
    line-height:1;
    opacity:0.7;
  }
  blockquote{
    font-family:var(--serif);
    font-style:italic;
    font-size:clamp(1.5rem, 3.2vw, 2.3rem);
    max-width:760px;
    margin:0 auto;
    line-height:1.5;
    font-weight:400;
  }
  .quote-attr{
    margin-top:28px;
    font-size:0.78rem;
    letter-spacing:0.24em;
    text-transform:uppercase;
    color:var(--lush);
  }

  /* ===================== HOURS / CONTACT ===================== */
  .info-section{
    background:var(--night-2);
  }
  .info-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:60px;
    text-align:center;
  }
  .info-block .eyebrow{justify-content:center;}
  .info-block h4{
    font-family:var(--serif);
    font-size:1.6rem;
    font-weight:500;
    margin-bottom:14px;
  }
  .info-block p{
    color:rgba(245,239,227,0.7);
    font-size:0.95rem;
  }
  .info-block .gold{color:var(--gold);}
  .info-grid .info-block:nth-child(1) .gold{color:var(--teal);}
  .info-grid .info-block:nth-child(2) .gold{color:var(--pink);}
  .info-grid .info-block:nth-child(3) .gold{color:var(--lush);}

  /* ===================== FOOTER ===================== */
  footer{
    padding:64px 0 32px;
    text-align:center;
  }
  footer .logo{display:inline-block; margin-bottom:24px;}
  footer .foot-links{
    display:flex; justify-content:center; gap:32px;
    margin-bottom:32px;
    list-style:none;
    flex-wrap:wrap;
  }
  footer .foot-links a{
    font-size:0.78rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    opacity:0.7;
    transition:opacity .2s, color .2s;
  }
  footer .foot-links a:hover{opacity:1; color:var(--gold);}
  footer .copyright{
    font-size:0.78rem;
    color:rgba(245,239,227,0.4);
    letter-spacing:0.04em;
  }

  /* ===================== RESPONSIVE ===================== */
  @media (max-width: 900px){
    header{padding:22px 24px;}
    header.scrolled{padding:14px 24px;}
    .philosophy{grid-template-columns:1fr; gap:48px;}
    .philosophy-img{order:-1;}
    .gallery-grid{grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(4,180px);}
    .gallery-grid a:nth-child(1){grid-column:1/3; grid-row:1/2;}
    .gallery-grid a:nth-child(4){grid-column:1/3; grid-row:4/5;}
    .info-grid{grid-template-columns:1fr; gap:44px;}
    .section-inner{padding-top:64px; padding-bottom:64px;}
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
  }

/* ===================== SCROLL REVEAL ===================== */
.js-enabled .reveal{
  opacity:0;
  transform: translateY(36px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}
.js-enabled .reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}
.js-enabled .reveal-stagger > *{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
.js-enabled .reveal-stagger.is-visible > *{
  opacity:1;
  transform: translateY(0);
}
.js-enabled .reveal-stagger.is-visible > *:nth-child(1){transition-delay:.05s;}
.js-enabled .reveal-stagger.is-visible > *:nth-child(2){transition-delay:.12s;}
.js-enabled .reveal-stagger.is-visible > *:nth-child(3){transition-delay:.19s;}
.js-enabled .reveal-stagger.is-visible > *:nth-child(4){transition-delay:.26s;}

/* ===================== PARALLAX LAYERS ===================== */
.hero-bg{
  transform: translateY(var(--parallax-y, 0));
}
.hero-content{
  transform: translateY(var(--content-parallax-y, 0));
}

/* ===================== FROND DIVIDER ANIMATION ===================== */
.frond-divider svg path{
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 1.2s ease;
}
.frond-divider.is-visible svg path{
  stroke-dashoffset: 0;
  transition-delay: calc(var(--delay, 0) * 1s);
}
.frond-divider.is-visible svg path:nth-child(1){--delay:0;}
.frond-divider.is-visible svg path:nth-child(2),
.frond-divider.is-visible svg path:nth-child(3){--delay:.15;}
.frond-divider.is-visible svg path:nth-child(4),
.frond-divider.is-visible svg path:nth-child(5){--delay:.3;}
.frond-divider.is-visible svg path:nth-child(6),
.frond-divider.is-visible svg path:nth-child(7){--delay:.45;}

.frond-divider .line{
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1s ease .2s;
}
.frond-divider.is-visible .line{transform: scaleX(1);}

/* ===================== MENU ITEM MICRO-INTERACTIONS ===================== */
.menu-item{
  position:relative;
  padding-left:0;
  transition: padding-left .35s ease;
  cursor:default;
}
.menu-item::before{
  content:'';
  position:absolute;
  left:-18px; top:0.45em;
  width:0; height:0;
  border-radius:50%;
  background:var(--gold);
  opacity:0;
  transition: width .3s ease, height .3s ease, opacity .3s ease, left .3s ease;
}
.menu-item:hover{padding-left:18px;}
.menu-item:hover::before{
  width:6px; height:6px; left:0; opacity:1;
}
.menu-item-name{transition: color .3s ease;}
.menu-item:hover .menu-item-name{color:var(--gold);}

.menu-category:nth-child(2):hover .menu-item-name,
.menu-category:nth-child(5):hover .menu-item-name,
.menu-category:nth-child(8):hover .menu-item-name{}
.menu-category:nth-child(2) .menu-item:hover .menu-item-name,
.menu-category:nth-child(5) .menu-item:hover .menu-item-name,
.menu-category:nth-child(8) .menu-item:hover .menu-item-name{color:var(--teal);}
.menu-category:nth-child(2) .menu-item:hover::before,
.menu-category:nth-child(5) .menu-item:hover::before,
.menu-category:nth-child(8) .menu-item:hover::before{background:var(--teal);}

.menu-category:nth-child(3) .menu-item:hover .menu-item-name,
.menu-category:nth-child(6) .menu-item:hover .menu-item-name,
.menu-category:nth-child(9) .menu-item:hover .menu-item-name{color:var(--pink);}
.menu-category:nth-child(3) .menu-item:hover::before,
.menu-category:nth-child(6) .menu-item:hover::before,
.menu-category:nth-child(9) .menu-item:hover::before{background:var(--pink);}

.menu-category:nth-child(4) .menu-item:hover .menu-item-name,
.menu-category:nth-child(7) .menu-item:hover .menu-item-name,
.menu-category:nth-child(10) .menu-item:hover .menu-item-name{color:var(--sea);}
.menu-category:nth-child(4) .menu-item:hover::before,
.menu-category:nth-child(7) .menu-item:hover::before,
.menu-category:nth-child(10) .menu-item:hover::before{background:var(--sea);}

/* ===================== MENU CATEGORY IMAGE HOVER ===================== */
.menu-category-img{
  transition: transform .5s ease;
}
.menu-category-img img{
  transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .7s ease;
}
.menu-category:hover .menu-category-img img{
  transform: scale(1.04);
  filter:saturate(1.05) contrast(1.04);
}
.menu-category-img::after{
  transition: opacity .4s ease, inset .4s ease;
}
.menu-category:hover .menu-category-img::after{
  inset:6px;
  opacity:0.75;
}

/* ===================== GALLERY TILT ===================== */
.gallery-grid a{
  perspective: 800px;
}
.gallery-grid img{
  transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .6s ease;
}
.gallery-grid a:hover img{
  transform: scale(1.07) rotate(0.3deg);
  filter:saturate(1.08);
}

/* ===================== HERO CTA RIPPLE ===================== */
.hero-cta{
  position:relative;
  overflow:hidden;
}
.hero-cta::before{
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:0; height:0;
  border-radius:50%;
  background: var(--gold);
  opacity:0.25;
  transform: translate(-50%,-50%);
  transition: width .5s ease, height .5s ease;
  z-index:-1;
}
.hero-cta:hover::before{
  width:240px; height:240px;
}

/* ===================== PHILOSOPHY IMG PARALLAX TILT ===================== */
.philosophy-img{
  transition: transform .4s ease;
}
.philosophy-img img{
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.philosophy-img:hover img{
  transform: scale(1.03);
}

/* ===================== FLOATING PARTICLES (HERO) ===================== */
.hero-particles{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.hero-particles span{
  position:absolute;
  bottom:-20px;
  display:block;
  border-radius:50%;
  opacity:0.35;
  animation: floatUp linear infinite;
}
@keyframes floatUp{
  0%{
    transform: translateY(0) translateX(0) scale(1);
    opacity:0;
  }
  10%{opacity:0.4;}
  90%{opacity:0.25;}
  100%{
    transform: translateY(-110vh) translateX(var(--drift, 30px)) scale(1.2);
    opacity:0;
  }
}

/* ===================== BACK TO TOP ===================== */
.back-to-top{
  position:fixed;
  bottom:28px; right:28px;
  width:48px; height:48px;
  border-radius:50%;
  background:rgba(11,22,32,0.85);
  border:1px solid var(--gold);
  color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  opacity:0; pointer-events:none;
  transform: translateY(16px);
  transition: opacity .35s ease, transform .35s ease, background .25s ease, color .25s ease;
  z-index:90;
  backdrop-filter: blur(6px);
}
.back-to-top.visible{
  opacity:1; pointer-events:auto;
  transform: translateY(0);
}
.back-to-top:hover{
  background:var(--gold); color:var(--night);
}
.back-to-top svg{width:18px; height:18px;}

/* ===================== ANIMATED LOGO MARK ===================== */
.logo span{
  display:inline-block;
  transition: transform .4s ease, color .3s ease;
}
.logo:hover span{
  transform: rotate(-4deg) scale(1.05);
  color: var(--teal);
}

/* Respect reduced motion overrides */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{opacity:1 !important; transform:none !important;}
  .frond-divider svg path{stroke-dashoffset:0 !important;}
  .frond-divider .line{transform:scaleX(1) !important;}
  .hero-particles{display:none;}
}