:root{
    --bg: #E7E2DD;
    --line: #6a655d;
    --text: #3f3a33;
    --muted:#6b645c;
    --accent:#b29775;
    --maxw: 1050px;

    /* Typography */
    --font-body: 'Montserrat', system-ui, sans-serif;
    --font-display: 'Marcellus', serif;
    --font-serif: 'Times New Roman', serif;
  }

  *,*::before,*::after{ box-sizing: border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* dine hero section */
  .dine-hero-section{
    padding: 80px 24px 0px;
  }

  @media (max-width:768px){
    .dine-hero-section{ padding:70px 16px 30px; }
  }

  /* Header class */
  .header-section {
    text-align: center;
    padding: 0;
    background-color: #E4E0DC;
  }
  .separator-line {
    width: 100%;
    height: 1px;
    background-color: #443e37;
    margin-bottom: 18px;
  }

  .bottom-separator-line {
    width: 100%;
    height: 1px;
    background-color: #443e37;
    margin-top: 30px;
  }

  .head-bottom-separator-line {
    width: 100%;
    height: 1px;
    background-color: #443e37;
    margin-bottom: 30px;
  }
  .section-heading {
    text-align: center;
    font-size: 0.8em;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 15px 0 30px 0;
    font-weight: 400;
    color: #555;
  }

  /* Hero class */
  .hero{
    max-width: var(--maxw);
    margin: 0 auto;
    text-align: center;
  }

  .hero h1{
    font-family: 'Marcellus', serif;
    font-weight: 400;
    font-size: clamp(26px, 5vw, 40px);
    letter-spacing: .02em;
    margin: 24px 0 18px;
  }

  .lead{
    max-width: 920px;
    margin: 0 auto;
    font-family: "times new roman", serif;
    font-size: clamp(15px, 1.5vw, 18px);
    color: var(--muted);
  }
  .lead em{
    font-style: italic;
    color: #4a443d;
  }

  /* Michelin line */
  .award{
    display:inline-flex;
    align-items:center;
    gap: 12px;
    margin-top: 48px;
    color:#6e6a63;
    letter-spacing: .15em;
    font-weight:500;
    font-size: 15px;
    opacity:.9;
  }
  .award svg{ width:18px; height:18px; flex:0 0 18px; }

  /* Hairlines */
  .head-hairline{
    margin: 60px auto 60px;
    height: 1px;
    max-width: 1400px;
    background: linear-gradient(90deg, transparent, var(--line), transparent);
    opacity:.5;
  }

  /* Hairlines */
  .bottom-hairline{
    margin: 60px auto 0px;
    height: 1px;
    max-width: 1400px;
    background: linear-gradient(90deg, transparent, var(--line), transparent);
    opacity:.5;
  }

  /* Dine gallery section */
  .dine-gallery{
    padding: 30px 24px;
    background:#E7E2DD;
    display:grid;
    place-items:center;
    margin-bottom: 60px;
    min-height:140vh;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  }
  /* Outer frame */
  .frame{
    background:#E7E2DD;
    padding:0;
    width:min(1200px, 95vw);
    aspect-ratio: 10 / 9;
    display:grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 20px;
  }
  /* Left column: two stacked tiles */
  .left{
    display:grid;
    gap: 20px;
    grid-template-rows: 1fr .8fr;
  }
  .tile{
    position:relative;
    overflow:hidden;
    background:#2a2a2a; /* fallback */
  }
  .tile img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  /* Right side big image */
  .right{
    position:relative;
    overflow:hidden;
  }
  .right img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* Mobile Responsive */
  @media (max-width: 768px) {
    .bottom-hairline{
      margin: 60px auto 40px;
    }
    .frame{
      aspect-ratio: auto;
      grid-template-columns: 1fr;
      column-gap: 0;
      row-gap: 12px;
      width: calc(100% - 32px);
      max-width: 720px;
      padding: 0 16px;
      margin-bottom: 16px;
    }

    .left{
      grid-template-rows: 1fr 1fr;
      gap: 12px;
    }

    .tile{ min-height: 30vh; border-radius: 6px; overflow: hidden; }

    .right{ min-height: 42vh; border-radius: 6px; overflow: hidden; }

    .tile img,
    .right img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
    }
  }

/* ================= DINE MENU SECTION ================= */
.dine-menu{
  padding: 0px 20px 90px;
  background: #E7E2DD;
}

.dine-menu-inner{
  max-width: 1200px;
  margin: 0 auto;
}

.dine-menu-tagline{
  text-align: center;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 0.8em;
  color: #555;
  margin-bottom: 10px;
}

.dine-menu-title{
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 30px);
  margin-bottom: 32px;
}

/* GRID */
.dine-menu-grid{
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 22px;
  align-items: stretch;
}

/* ================= IMAGE CARDS ================= */
.menu-card{
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 18px 35px rgba(0,0,0,.08);
  transition: transform .3s ease, box-shadow .3s ease;
}

.menu-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(0,0,0,.12);
}

.menu-card-media{
  position: relative;
  height: 100%;
  min-height: 500px;
}

.menu-card-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* gradient for text readability */
.menu-card-media::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top,
    rgba(0,0,0,.45),
    rgba(0,0,0,.05) 55%);
}

/* ================= OVERLAY ================= */
.menu-overlay{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: calc(100% - 36px);

  display: flex;
  justify-content: center;
}

/* keep CTA in one line */
.menu-overlay-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: nowrap;
  white-space: nowrap;

  padding: 12px 20px;
  border-radius: 999px;

  background: rgba(107, 100, 92, 0.85);
  /* color: #E7E2DD; */
  color: #fff;


  font-family: var(--font-body);
  font-size: .82rem;        /* slightly bigger */
  letter-spacing: .18em;
  text-transform: uppercase;

  box-shadow: 0 12px 26px rgba(0,0,0,.28);
  animation: ctaBreath 1.8s ease-in-out infinite;
}

/* text size a bit larger */
.menu-overlay-cta .cta-text{
  font-size: .82rem;
  line-height: 1;
}

/* bigger tap icon on right side */
.tap-icon{
  width: 36px;              /* bigger */
  height: 36px;             /* bigger */
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.26);
  flex: 0 0 36px;
  animation: tapPress 1.5s ease-in-out infinite;
}

.tap-svg{
  width: 24px;              /* bigger */
  height: 24px;             /* bigger */
}

.tap-hand{
  fill: #fff;
  opacity: .95;
}

.tap-ring{
  fill: none;
  stroke: rgba(255,255,255,.95);
  stroke-width: 1.6;
  opacity: .85;
  transform-origin: 9px 7px;
  animation: tapRipple 1.4s ease-in-out infinite;
}

.tap-ring--2{
  opacity: .55;
  animation-delay: .18s;
}

/* pause animations on hover */
.menu-card:hover .tap-ring,
.menu-card:hover .tap-icon,
.menu-card:hover .menu-overlay-cta{
  animation-play-state: paused;
}

/* animations */
@keyframes tapRipple{
  0%   { transform: scale(.85); opacity: 0; }
  25%  { opacity: .85; }
  60%  { transform: scale(1.08); opacity: .25; }
  100% { transform: scale(1.15); opacity: 0; }
}

@keyframes tapPress{
  0%,100% { transform: scale(1); }
  35%     { transform: scale(.9); }
  60%     { transform: scale(1.06); }
}

@keyframes ctaBreath{
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.03); }
}



/* ================= CENTER CONTENT ================= */
.menu-center{
  height: 100%;
  border-radius: 18px;
  background: #FAF8F6;
  padding: 26px 22px;
  box-shadow: 0 18px 35px rgba(0,0,0,.06);
}

.menu-center-kicker{
  letter-spacing: .18em;
  text-transform: uppercase;
  justify-self: center;
  font-size: .78rem;
  color: #6a655d;
}

.menu-center-title{
  font-family: var(--font-display);
  font-size: 22px;
  margin: 6px 0;
  justify-self: center;
}

.menu-center-text{
  font-family: var(--font-serif);
  color: var(--muted);
  line-height: 1.7;
  margin: 12px 0;
  text-align: center;
}

.menu-center-notes{
  margin-top: 20px;
  display: grid;
  
  gap: 10px;
}

.menu-center-notes .note{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(231,226,221,.7);
}

/* ================= ANIMATIONS ================= */
@keyframes pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.05)}
  100%{transform:scale(1)}
}
@keyframes arrow{
  0%{transform:translateX(0)}
  50%{transform:translateX(4px)}
  100%{transform:translateX(0)}
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){
  .dine-menu-grid{
    grid-template-columns: 1fr;
  }
  .menu-card-media{min-height:420px}
}
@media(max-width:768px){
  .menu-center-kicker{
    font-size: .72rem;
    justify-self: center;
  }

  .menu-center-title{
    font-size: 20px;
    justify-self: center;
  }

  .menu-center-text{
    font-size: 15px;
  }

  .menu-center-notes{
    gap: 8px;
  }

  .menu-center-notes .note{
    padding: 8px 10px;
    font-size: 14px;
  }
  .menu-card-media{min-height:380px}
}


/* ================= ECO HARVEST SECTION ================= */
.eco-harvest{
  padding: 0px 20px 90px;
  background: #E7E2DD;
}

.eco-harvest-inner{
  max-width: 1200px;
  margin: 0 auto;
}

.eco-harvest-header{
  text-align: center;
  margin-bottom: 28px;
}

.eco-harvest-kicker{
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 0.8em;
  color: #555;
  margin-bottom: 10px;
}

.eco-harvest-title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 30px);
  margin: 0;
}

.eco-harvest-hairline{
  margin: 18px auto 0;
  height: 1px;
  max-width: 900px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  opacity: .45;
}

/* Layout */
.eco-harvest-grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 26px;
  align-items: stretch;
}

/* LEFT: 3 image grid */
.eco-harvest-gallery{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  border-radius: 18px;
  overflow: hidden;
}

.eco-img{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #2a2a2a;
  min-height: 220px;
  box-shadow: 0 18px 35px rgba(0,0,0,.06);
}

.eco-img--tall{
  grid-row: span 2;
  min-height: 454px; /* tall tile */
}

.eco-img img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .6s ease;
}

.eco-img:hover img{
  transform: scale(1.08);
}

/* RIGHT: content card */
.eco-harvest-content{
  border-radius: 18px;
  background: #FAF8F6;
  padding: 26px 22px;
  box-shadow: 0 18px 35px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.eco-tag{
  margin: 0 0 10px 0;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .78rem;
  color: #6a655d;
  text-align: center;
}

.eco-title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  margin: 6px 0 10px 0;
  text-align: center;
}

.eco-text{
  font-family: var(--font-serif);
  color: var(--muted);
  line-height: 1.75;
  margin: 8px 0 18px 0;
  text-align: center;
}

/* points */
.eco-points{
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.eco-point{
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(231,226,221,.75);
}

.eco-point i{
  margin-top: 2px;
  color: #6a655d;
  opacity: .95;
}

.eco-point-title{
  margin: 0;
  font-weight: 500;
  color: #4a443d;
  letter-spacing: .02em;
}

.eco-point-text{
  margin: 2px 0 0 0;
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.5;
}

/* CTA row */
.eco-cta-row{
  margin-top: 18px;
  display: grid;
  gap: 12px;
  justify-items: center;
}

.eco-cta{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .78rem;
  color: #fff;
  background: rgba(107, 100, 92, 0.9);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  transition: transform .25s ease, box-shadow .25s ease;
}

.eco-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0,0,0,.22);
}

.eco-cta-arrow{
  display: inline-block;
  transform: translateY(-1px);
}

.eco-note{
  margin: 0;
  font-size: .95rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Responsive */
@media (max-width: 900px){
  .eco-harvest-grid{
    grid-template-columns: 1fr;
  }
  .eco-img--tall{
    grid-row: auto;
    min-height: 320px;
  }
  .eco-img{
    min-height: 200px;
  }
}
@media (max-width: 560px){
  .eco-harvest-gallery{
    grid-template-columns: 1fr;
  }
  .eco-img--tall{
    min-height: 260px;
  }
}

/* ================= PIZZA SPECIAL HIGHLIGHT SECTION ================= */
.pizza-special{
  padding: 0px 20px 90px;
  background: #E7E2DD;
}

.pizza-special-inner{
  max-width: 1200px;
  margin: 0 auto;
}

.pizza-special-grid{
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 26px;
  align-items: stretch;
}

/* LEFT: content card */
.pizza-special-content{
  border-radius: 18px;
  background: #FAF8F6;
  padding: 28px 24px;
  box-shadow: 0 18px 35px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pizza-kicker{
  margin: 0 0 10px 0;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .8em;
  color: #6a655d;
  text-align: center;
}

.pizza-title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 30px);
  margin: 0 0 12px 0;
  text-align: center;
}

.pizza-text{
  font-family: var(--font-serif);
  color: var(--muted);
  line-height: 1.75;
  margin: 8px 0 18px 0;
  text-align: center;
}

/* points list */
.pizza-points{
  display: grid;
  gap: 10px;
  margin-top: 2px;
}

.pizza-point{
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(231,226,221,.75);
}

.pizza-point i{
  margin-top: 2px;
  color: #6a655d;
  opacity: .95;
}

.pizza-point-title{
  margin: 0;
  font-weight: 500;
  color: #4a443d;
  letter-spacing: .02em;
}

.pizza-point-text{
  margin: 2px 0 0 0;
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.5;
}

/* CTA row */
.pizza-cta-row{
  margin-top: 18px;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.pizza-cta{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .78rem;
  color: #fff;
  background: rgba(107, 100, 92, 0.9);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  transition: transform .25s ease, box-shadow .25s ease;
}

.pizza-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0,0,0,.22);
}

.pizza-cta-arrow{
  display: inline-block;
  transform: translateY(-1px);
}

.pizza-note{
  margin: 0;
  font-size: .95rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* RIGHT: image grid */
.pizza-special-gallery{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  border-radius: 18px;
  overflow: hidden;
}

.pizza-img{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #2a2a2a;
  min-height: 220px;
  box-shadow: 0 18px 35px rgba(0,0,0,.06);
}

.pizza-img--wide{
  grid-column: span 2;
  min-height: 320px;
}

.pizza-img img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .6s ease;
}

.pizza-img:hover img{
  transform: scale(1.08);
}

/* hairline under section */
.pizza-special-hairline{
  margin: 34px auto 0;
  height: 1px;
  max-width: 1100px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  opacity:.45;
}

/* Responsive */
@media (max-width: 900px){
  .pizza-special-grid{
    grid-template-columns: 1fr;
  }
  .pizza-img--wide{
    grid-column: auto;
    min-height: 260px;
  }
}

@media (max-width: 560px){
  .pizza-special-gallery{
    grid-template-columns: 1fr;
  }
  .pizza-img--wide{
    min-height: 240px;
  }
  .pizza-img{
    min-height: 200px;
  }
}