:root {
 --dark:#205c61;
 --accent:#efca81;
 --cream:#faf7f0;
}
* {box-sizing:border-box}
html {scroll-behavior:smooth}
body {
 margin:0;
 background:var(--cream);
 color:#282828;
 font-family:Arial,Helvetica,sans-serif;
 line-height:1.7;
}
a {color:inherit;text-decoration:none}
header {
 position:sticky;
 top:0;
 z-index:100;
 background:var(--dark);
 color:#fff;
}
.navbar {
 max-width:1300px;
 margin:auto;
 padding:19px 25px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:25px;
}
.logo {
 font:30px Georgia,serif;
 color:var(--accent);
}
nav {
 display:flex;
 gap:18px;
 flex-wrap:wrap;
}
nav a {
 font-size:12px;
 text-transform:uppercase;
 letter-spacing:1px;
}
nav a:hover {color:var(--accent)}
.menu-toggle {
 display:none;
 background:var(--accent);
 border:0;
 padding:11px 16px;
 font-weight:bold;
 cursor:pointer;
}
.hero {
 min-height:520px;
 display:grid;
 place-items:center;
 text-align:center;
 padding:50px 20px;
 color:#fff;
 background:
 linear-gradient(#0009,#000a),
 url('https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=1800&q=85') center/cover;
}
.hero-inner {max-width:900px}
.hero h1 {
 font:normal clamp(46px,7vw,88px) Georgia,serif;
 line-height:1.1;
 margin:18px 0;
}
.hero p {
 font-size:20px;
 max-width:680px;
 margin:0 auto 28px;
}
.kicker {
 color:var(--accent);
 text-transform:uppercase;
 letter-spacing:4px;
 font-size:12px;
 font-weight:bold;
}
.btn {
 display:inline-block;
 padding:14px 26px;
 border:0;
 background:var(--accent);
 color:#181818;
 font-weight:bold;
 cursor:pointer;
}
section {padding:75px 24px}
.wrap {max-width:1180px;margin:auto}
h2 {font:normal clamp(34px,4vw,56px) Georgia,serif}
h3 {font:normal 25px Georgia,serif}
.intro {
 text-align:center;
 max-width:760px;
 margin:0 auto 45px;
}
.grid {
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:25px;
}
.card {
 background:white;
 box-shadow:0 12px 35px #0001;
}
.card img {
 width:100%;
 height:240px;
 object-fit:cover;
}
.card-content {padding:25px}
.split {
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:50px;
 align-items:center;
}
.split img {
 width:100%;
 height:440px;
 object-fit:cover;
}
.menu-controls {
 display:flex;
 gap:12px;
 justify-content:center;
 flex-wrap:wrap;
 margin-bottom:35px;
}
.filter {
 padding:12px 19px;
 border:1px solid #bbb;
 background:white;
 cursor:pointer;
}
.filter.active {
 background:var(--dark);
 color:white;
 border-color:var(--dark);
}
.menu-grid {
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:20px;
}
.menu-item {
 background:white;
 padding:25px;
 border-left:4px solid var(--accent);
}
.menu-item h3 {margin:0 0 10px}
.gallery {
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:15px;
}
.gallery img {
 width:100%;
 height:260px;
 object-fit:cover;
 cursor:pointer;
}
.form {
 max-width:720px;
 margin:auto;
 padding:35px;
 background:white;
}
input,select,textarea {
 display:block;
 width:100%;
 padding:13px;
 margin:8px 0 20px;
 border:1px solid #bbb;
 font:inherit;
}
.notice {
 padding:16px;
 background:#f3ead9;
 border-left:4px solid var(--accent);
}
footer {
 background:var(--dark);
 color:white;
 text-align:center;
 padding:55px 20px;
}
footer a {display:inline-block;margin:8px}
@media(max-width:1000px) {
 .navbar {flex-wrap:wrap}
 .logo {font-size:25px}
 nav {gap:12px}
}
@media(max-width:750px) {
 .menu-toggle {display:block}
 nav {
  display:none;
  width:100%;
  flex-direction:column;
  padding:18px 0;
 }
 nav.open {display:flex}
 .grid,.gallery {grid-template-columns:repeat(2,1fr)}
 .split {grid-template-columns:1fr}
}
@media(max-width:560px) {
 .grid,.gallery,.menu-grid {grid-template-columns:1fr}
 section {padding:48px 20px}
 .hero {min-height:390px}
}