:root {
  --green: #15251b;
  --green2: #263b2e;
  --cream: #f5ead7;
  --cream2: #fff7ec;
  --gold: #c99b38;
  --brown: #8b6731;
  --dark: #0f1b14;
  --white: #fffaf2;
}

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

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

#home,
#about,
#menu,
#gallery,
#contact {
  scroll-margin-top: 118px;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--green);
  font-family: "Cormorant Garamond", Georgia, serif;
}

body.menu-open {
  overflow: hidden;
}

/* =====================================================
   HEADER
===================================================== */

.top-header{
    position:fixed;
    top:0;
    left:0;
    z-index:50;

    width:100%;
    height:150px;

    display:grid;
    grid-template-columns:120px 1fr;
    align-items:center;

    background:linear-gradient(90deg,var(--green),var(--green2));
    box-shadow:0 8px 25px rgba(0,0,0,.24);
}

.menu-toggle{
    position:relative;
    left:0;
    justify-self:center;

    width:52px;
    height:38px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    border:0;
    background:transparent;
    cursor:pointer;
}

.menu-toggle span{
    width:52px;
    height:4px;
    border-radius:3px;
    background:var(--cream);
    transition:.25s ease;
}

.menu-toggle.active span:nth-child(1){
    transform:translateY(17px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:translateY(-17px) rotate(-45deg);
}

.brand{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.brand img{
    width:560px;
    height:auto;
}

/* =====================================================
   MAIN LAYOUT
===================================================== */

.layout{
    padding-top:150px;
}

/* =====================================================
   SIDE MENU
===================================================== */

.side-menu {
  position: fixed;
  top: 150px;
  left: -300px;
  z-index: 60;
  width: 300px;
  height: calc(100vh - 150px);
  padding-top: 35px;
  background: linear-gradient(135deg, #102018, #283d30);
  box-shadow: 10px 0 28px rgba(0, 0, 0, 0.22);
  transition: left 0.35s ease;
}

.side-menu.active {
  left: 0;
}

.close-menu {
  display: none;
}

.side-logo img {
  display: block;
  width: 180px;
  max-width: none;
  height: auto;
  margin: 5px auto 25px;
}

.side-nav a {
  position: relative;
  display: block;
  margin-bottom: 32px;
  padding-left: 78px;
  color: var(--cream);
  font-size: 31px;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

.side-nav a.active,
.side-nav a:hover {
  color: var(--gold);
}

.side-nav a.active::before,
.side-nav a:hover::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 58px;
  height: 2px;
  background: var(--gold);
}

.side-footer {
  width: 100%;
}

.menu-leaf {
  display: block;
  width: 200px;
  height: auto;
  margin: 20px auto 0;
}

.mobile-overlay {
  display: none;
}

/* =====================================================
   HERO
===================================================== */

.hero {
  min-height: calc(100vh - 118px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.52)),
    url("https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1800&q=80") center / cover no-repeat;
  color: white;
  text-align: center;
}

.hero-content {
  max-width: 850px;
  transform: translateY(12px);
}

.hero h2 {
  font-size: 55px;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 6px;
  text-transform: uppercase;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.75);
}

.divider,
.mini-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 24px 0 18px;
  color: var(--gold);
}

.divider span,
.mini-line span {
  width: 78px;
  height: 1px;
  background: var(--gold);
}

.divider b {
  font-size: 33px;
}

.hero p {
  margin-bottom: 35px;
  font-size: 28px;
  font-style: italic;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.btn {
  width: 222px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.25s ease;
}

.btn.gold {
  background: var(--gold);
  color: var(--green);
}

.btn.outline {
  border: 1.5px solid var(--gold);
  background: rgba(0, 0, 0, 0.08);
  color: white;
}

.btn:hover {
  transform: translateY(-2px);
}

/* =====================================================
   FEATURES
===================================================== */

.features-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 58px;
  padding: 38px 8.5%;
  border-bottom: 1px solid rgba(139, 103, 49, 0.2);
  background: var(--white);
}

.feature {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
}

.feature:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  width: 1px;
  height: 86px;
  background: #d0ad78;
  transform: translateY(-50%);
}

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon img {
  display: block;
  width: 120px;
  height: auto;
}

.feature h3 {
  margin-bottom: 8px;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.feature p {
  font-size: 18px;
  line-height: 1.35;
}

/* =====================================================
   CONTACT / BOTTOM INFO
===================================================== */

.bottom-info {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.25fr 1.25fr;
  align-items: center;
  gap: 30px;
  padding: 45px 8.5%;
  border-top: 1px solid #dbc099;
  background: var(--cream);
}

.bottom-brand {
  text-align: center;
}

.bottom-brand img {
  width: 270px;
  height: auto;
}

.bottom-detail {
  min-height: 95px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 34px;
  border-left: 1px solid #d0ad78;
}

.bottom-detail h4 {
  margin-bottom: 10px;
  font-family: "Lato", sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.bottom-detail p {
  font-size: 18px;
  line-height: 1.35;
}

.contact-link,
.instagram-link {
  color: var(--green);
  text-decoration: none;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  transition: color 0.25s ease, transform 0.25s ease;
}

.contact-link img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.contact-link:hover {
  color: var(--gold);
  transform: translateX(3px);
}

.instagram-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 16px;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  font-weight: 600;
  transition: color 0.25s ease;
}

.instagram-link img {
  width: 60px;
  height: 40px;
  object-fit: contain;
}

.instagram-link:hover {
  color: var(--gold);
}

/* =====================================================
   SITE FOOTER
===================================================== */

.site-footer {
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px 20px;
  background: var(--green);
  color: var(--cream);
  font-family: "Lato", sans-serif;
  text-align: center;
}

.site-footer p {
  margin: 4px 0;
  font-size: 15px;
  line-height: 1.4;
}

/* =====================================================
   FULLSCREEN MENU
===================================================== */

.fullscreen-menu{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  overflow-y:auto;
  background:rgba(10,22,15,.96);
  padding:78px 24px 40px;
}

.fullscreen-menu.active{
  display:block;
}

.fullscreen-close{
  position:fixed;
  top:18px;
  right:25px;
  z-index:1010;
  width:48px;
  height:48px;
  padding:0;
  border:1px solid rgba(245,234,215,.7);
  border-radius:50%;
  background:#15251b;
  color:#f5ead7;
  font-size:34px;
  line-height:1;
  cursor:pointer;
}

.menu-selector{
  width:min(980px,100%);
  margin:0 auto;
  color:var(--cream);
  text-align:center;
}

.menu-eyebrow{
  margin-bottom:8px;
  color:var(--gold);
  font-family:"Lato",sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
}

.menu-selector h2,
.menu-coming-soon h2{
  font-size:58px;
  font-weight:500;
  letter-spacing:4px;
  text-transform:uppercase;
}

.menu-selector-intro{
  margin:8px 0 34px;
  font-size:22px;
  font-style:italic;
}

.menu-card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.menu-card{
  min-height:145px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:24px;
  border:1px solid rgba(201,155,56,.72);
  border-radius:12px;
  background:rgba(255,247,236,.06);
  color:var(--cream);
  font-family:"Cormorant Garamond",Georgia,serif;
  cursor:pointer;
  transition:transform .22s ease,background .22s ease,border-color .22s ease;
}

.menu-card:hover,
.menu-card:focus-visible{
  transform:translateY(-3px);
  border-color:var(--gold);
  background:rgba(255,247,236,.11);
  outline:none;
}

.menu-card-title{
  font-size:30px;
  font-weight:600;
  letter-spacing:1px;
}

.menu-card-time{
  font-family:"Lato",sans-serif;
  font-size:13px;
  letter-spacing:.5px;
  opacity:.86;
}

.menu-detail{
  width:min(1500px,100%);
  margin:0 auto;
}

.menu-back{
  display:inline-flex;
  align-items:center;
  margin:0 0 18px;
  padding:10px 0;
  border:0;
  background:transparent;
  color:var(--cream);
  font-family:"Lato",sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
}

.menu-back:hover{
  color:var(--gold);
}

.menu-image{
  display:block;
  width:min(900px,100%);
  height:auto;
  margin:0 auto;
  background:#fff7ec;
}

.menu-coming-soon{
  min-height:360px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px;
  border:1px solid rgba(201,155,56,.55);
  border-radius:12px;
  color:var(--cream);
  text-align:center;
}

.menu-coming-soon p:last-child{
  margin-top:14px;
  font-size:22px;
  font-style:italic;
}

/* =====================================================
   TABLET / PHONE
===================================================== */

@media (max-width: 980px) {
  #home,
  #about,
  #menu,
  #gallery,
  #contact {
    scroll-margin-top: 76px;
  }

  /* Header */
  .top-header {
    height: 76px;
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    justify-content: initial;
  }

  .menu-toggle {
    position: relative;
    left: auto;
    justify-self: center;
    width: 32px;
    height: 24px;
  }

  .menu-toggle span {
    width: 32px;
    height: 2px;
  }

  .menu-toggle.active span:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
  }

  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
  }

  .brand {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-12px);
  }

  .brand img {
    display: block;
    width: 300px;
    max-width: 90%;
    height: auto;
  }

  /* Main layout */
  .layout {
    padding-top: 76px;
    margin-top: 0;
  }

  /* Overlay */
  .mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: block;
    visibility: hidden;
    opacity: 0;
    background: rgba(0, 0, 0, 0.55);
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  .mobile-overlay.active {
    visibility: visible;
    opacity: 1;
  }

  /* Side menu */
  .side-menu {
    position: fixed;
    top: 0;
    left: -62%;
    z-index: 60;
    width: 62%;
    max-width: 255px;
    height: 100dvh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 68px 0 24px;
    background: linear-gradient(135deg, #102018, #20382a);
    box-shadow: 10px 0 28px rgba(0, 0, 0, 0.28);
    transition: left 0.35s ease;
  }

  .side-menu.active {
    left: 0;
  }

  .close-menu {
    position: absolute;
    top: 18px;
    right: 18px;
    display: block;
    border: 0;
    background: transparent;
    color: var(--cream);
    font-size: 38px;
    line-height: 1;
    cursor: pointer;
  }

  .side-logo {
    width: 100%;
    margin: 0;
    padding-top: 8px;
    text-align: center;
  }

  .side-logo img {
    display: block;
    width: 175px;
    max-width: 82%;
    height: auto;
    margin: 0 auto 28px;
  }

  .side-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding-bottom: 150px;
  }

  .side-nav a {
    margin-bottom: 0;
    padding-left: 34px;
    font-size: 22px;
    letter-spacing: 3px;
  }

  .side-nav a.active::before,
  .side-nav a:hover::before {
    width: 27px;
  }

  /* Decorative leaf: fixed higher inside the menu */
  .side-footer {
    position: absolute;
    left: 0;
    bottom: 112px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
  }

  .menu-leaf {
    display: block;
    width: 190px;
    max-width: 80%;
    height: auto;
    margin: 0 auto;
  }

  /* Hero */
  .hero {
    min-height: calc(100vh - 76px);
    margin-top: 0;
    padding: 45px 24px;
    background-position: center;
  }

  .hero-content {
    transform: none;
  }

  .hero h2 {
    font-size: 31px;
    line-height: 1.24;
    letter-spacing: 3px;
  }

  .divider {
    margin: 19px 0 16px;
  }

  .divider span {
    width: 50px;
  }

  .divider b {
    font-size: 25px;
  }

  .hero p {
    margin-bottom: 28px;
    font-size: 18px;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .btn {
    width: 225px;
    height: 54px;
    font-size: 13px;
  }

  /* Features */
  .features-bar {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 34px 26px;
  }

  .feature {
    gap: 18px;
    margin-bottom: 27px;
    padding-bottom: 26px;
    border-bottom: 1px solid #d8bd95;
  }

  .feature:last-child {
    margin-bottom: 0;
  }

  .feature:not(:last-child)::after {
    display: none;
  }

  .feature-icon {
    width: 95px;
    min-width: 95px;
    height: 95px;
  }

  .feature-icon img {
    width: 85px;
  }

  .feature h3 {
    font-size: 13px;
  }

  .feature p {
    font-size: 15px;
  }

  /* Bottom information */
  .bottom-info {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 36px 24px;
    text-align: center;
  }

  .bottom-brand img {
    width: 170px;
  }

  .bottom-detail {
    width: 100%;
    min-height: auto;
    align-items: center;
    padding-left: 0;
    border-left: 0;
    text-align: center;
  }

  .bottom-detail h4 {
    font-size: 13px;
  }

  .bottom-detail p {
    font-size: 15px;
  }

  .contact-link,
  .instagram-link {
    width: max-content;
    max-width: 100%;
    display: grid;
    grid-template-columns: 32px auto;
    align-items: center;
    justify-content: center;
    column-gap: 12px;
    margin: 10px auto;
    text-align: left;
  }

  .contact-link img,
  .instagram-link img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    justify-self: center;
  }

  .contact-link span {
    text-align: left;
  }

  .instagram-link {
    font-family: "Lato", sans-serif;
    font-size: 15px;
    font-weight: 600;
  }

  /* Site footer */
  .site-footer {
    min-height: 60px;
    padding: 16px 20px;
  }

  .site-footer p {
    margin: 0;
    line-height: 1.3;
  }

  .site-footer p:first-child {
    font-size: 12px;
    font-weight: 500;
  }

  .site-footer p:last-child {
    margin-top: 5px;
    font-size: 11px;
    opacity: 0.85;
  }

  /* Fullscreen menu */
  .fullscreen-menu{
    padding:64px 8px 22px;
  }

  .fullscreen-close{
    top:12px;
    right:12px;
    width:42px;
    height:42px;
    font-size:30px;
  }

  .menu-selector{
    padding:0 8px;
  }

  .menu-selector h2,
  .menu-coming-soon h2{
    font-size:38px;
    letter-spacing:2px;
  }

  .menu-selector-intro{
    margin:5px 0 24px;
    font-size:18px;
  }

  .menu-card-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .menu-card{
    min-height:112px;
    padding:18px 14px;
  }

  .menu-card-title{
    font-size:26px;
  }

  .menu-card-time{
    font-size:12px;
  }

  .menu-detail{
    width:100%;
  }

  .menu-back{
    margin-left:8px;
  }

  .menu-image{
    width:98vw;
    max-width:none;
  }

  .menu-coming-soon{
    min-height:300px;
    margin:0 8px;
    padding:28px 18px;
  }
}