@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root {
  --green: #123b2a;
  --green-dark: #0b281d;
  --cream: #f5efdf;
  --orange: #d97832;
  --ink: #172019;
  --muted: #687067;
  --white: #fffdf7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "DM Sans", Arial, sans-serif; color: var(--ink); background: var(--cream); }
a { color: inherit; text-decoration: none; }
.container { width: min(1120px, calc(100% - 36px)); margin: auto; }

.hero {
  min-height: 720px;
  color: white;
  background:
    linear-gradient(90deg, rgba(7,31,21,.88) 0%, rgba(7,31,21,.62) 48%, rgba(7,31,21,.20) 100%),
    url("https://images.unsplash.com/photo-1589302168068-964664d93dc0?auto=format&fit=crop&w=1800&q=85") center/cover;
  display: flex; flex-direction: column;
}
.nav { display:flex; align-items:center; justify-content:space-between; padding-top:24px; }
.logo { font-weight:800; letter-spacing:2px; font-size:20px; }
.logo span { color: var(--orange); font-size:9px; vertical-align:top; }
.nav-btn { border:1px solid rgba(255,255,255,.45); padding:11px 17px; border-radius:999px; font-size:12px; font-weight:700; }
.hero-content { margin-top:auto; margin-bottom:95px; }
.eyebrow { letter-spacing:2.5px; font-size:11px; font-weight:700; color: var(--orange); margin:0 0 15px; }
h1,h2 { font-family:"Playfair Display", Georgia, serif; line-height:1.02; margin:0; }
h1 { font-size:clamp(56px,9vw,102px); max-width:800px; }
h1 span { color:#f4c47f; }
.hero-text { max-width:530px; font-size:17px; line-height:1.7; color:#eee; margin:24px 0; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:14px 20px; border-radius:5px; font-weight:700; font-size:12px; letter-spacing:.5px; }
.primary { background:var(--orange); color:white; }
.secondary { background:transparent; color:inherit; border:1px solid currentColor; }

.intro { display:grid; grid-template-columns:1fr 1fr; gap:50px; padding:105px 0; }
h2 { font-size:clamp(40px,6vw,70px); }
.intro-copy { align-self:end; max-width:430px; color:var(--muted); font-size:18px; line-height:1.8; }

.info-strip { background:var(--green); color:white; }
.info-grid { display:grid; grid-template-columns:repeat(3,1fr); padding:35px 0; gap:20px; }
.info-grid div { border-left:1px solid rgba(255,255,255,.2); padding-left:22px; }
.info-grid strong,.info-grid span { display:block; }
.info-grid strong { font-size:20px; }
.info-grid span { margin-top:5px; color:#cbd6cf; font-size:12px; }

.menu-section { padding:100px 0; }
.section-heading { display:flex; justify-content:space-between; gap:30px; align-items:end; }
.text-link { font-size:12px; font-weight:700; border-bottom:1px solid var(--ink); padding-bottom:6px; }
.search-wrap { margin:40px 0 20px; }
#search { width:100%; padding:16px 18px; border:1px solid #d5cdbb; border-radius:5px; background:var(--white); font:inherit; outline:none; }
.categories { display:flex; gap:8px; overflow-x:auto; padding:5px 0 20px; scrollbar-width:none; }
.category { white-space:nowrap; border:1px solid #cfc6b3; background:transparent; padding:10px 14px; border-radius:999px; cursor:pointer; font:inherit; font-size:12px; }
.category.active { background:var(--green); color:white; border-color:var(--green); }
.menu-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.menu-card { background:var(--white); padding:22px; border-radius:7px; display:flex; justify-content:space-between; gap:20px; border:1px solid #e8e0ce; }
.menu-card h3 { margin:0 0 7px; font-size:16px; }
.menu-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.price { font-weight:800; color:var(--orange); white-space:nowrap; }
.menu-note { color:var(--muted); font-size:11px; line-height:1.6; margin-top:25px; }

.visit-section { background:var(--green); color:white; padding:100px 0; }
.visit-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.visit-card { background:#f8f1df; color:var(--ink); padding:35px; border-radius:7px; font-size:16px; line-height:1.7; }
.visit-card .secondary { color:var(--ink); }
.order-section { text-align:center; padding:90px 0; }
.order-section p:not(.eyebrow) { color:var(--muted); max-width:550px; margin:20px auto 30px; line-height:1.7; }

footer { background:var(--green-dark); color:white; padding:55px 0 25px; }
.footer-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.footer-grid p { margin:0 0 10px; color:#cbd6cf; line-height:1.6; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:55px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); color:#9eaca3; font-size:11px; }

@media (max-width:700px) {
  .hero { min-height:680px; }
  .hero-content { margin-bottom:55px; }
  .intro, .visit-grid { grid-template-columns:1fr; }
  .intro { padding:70px 0; gap:25px; }
  .info-grid { grid-template-columns:1fr; gap:22px; }
  .info-grid div { border-left:0; border-top:1px solid rgba(255,255,255,.2); padding:15px 0 0; }
  .info-grid div:first-child { border-top:0; }
  .menu-section { padding:70px 0; }
  .section-heading { align-items:start; flex-direction:column; }
  .menu-grid { grid-template-columns:1fr; }
  .visit-section { padding:70px 0; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; }
}