:root{
  --bg: #FAF7F2; --text:#1B1B1B; --muted:#5B5B5B; --brand:#0E7C66; --brand-2:#C7E2D8;
  --card:#FFFFFF; --accent:#B96938; --radius:18px; --shadow:0 8px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans';
  color:var(--text); background:var(--bg); line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px; margin:0 auto; padding:0 20px}
header{position:sticky; top:0; z-index:60; backdrop-filter:saturate(180%) blur(8px); background:rgba(255,255,255,.6)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.2px}
.brand-logo{width:36px; height:36px; border-radius:50%; background:var(--brand); display:grid; place-items:center; box-shadow:var(--shadow)}
.brand-logo svg{width:22px; height:22px; fill:white}
.nav a.btn{display:inline-flex; align-items:center; gap:.5rem; background:var(--brand); color:#fff; padding:10px 14px; border-radius:999px; box-shadow:var(--shadow)}
.nav .links{display:flex; gap:14px; align-items:center}
.nav .links a{padding:8px 10px; border-radius:10px}
.nav .links a.active{background:var(--brand-2); text-decoration:none}
.hero{padding:64px 0 36px}
.hero-inner{display:grid; grid-template-columns:1.2fr .8fr; gap:32px}
.badge{display:inline-block; background:var(--brand-2); color:#0a4f41; padding:6px 10px; border-radius:999px; font-size:14px; font-weight:600}
h1{font-size:clamp(28px, 4vw, 48px); line-height:1.1; margin:12px 0}
.lead{font-size:18px; color:var(--muted)}
.cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:12px 16px; border-radius:12px; border:1px solid #e6e6e6; background:#fff}
.btn.primary{background:var(--brand); color:#fff; border-color:var(--brand)}
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px}
.hours{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.hours .row{display:flex; justify-content:space-between; padding:10px 12px; border-radius:12px; background:#fff; border:1px solid #eee}
.hours .row.active{border-color:var(--brand); box-shadow:0 0 0 3px rgba(14,124,102,.15)}
section{padding:38px 0}
h2{font-size:clamp(22px, 2.6vw, 32px); margin:0 0 12px}
.sub{color:var(--muted); margin:0 0 12px}
.menu{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.menu-item{display:flex; justify-content:space-between; gap:14px; background:#fff; border:1px solid #eee; border-radius:14px; padding:12px}
.menu-item h3{margin:0; font-size:16px}
.menu-item p{margin:4px 0 0; color:var(--muted); font-size:14px}
.tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.tile{background:#fff; border:1px solid #eee; border-radius:14px; padding:16px}
.map{aspect-ratio: 16/9; border:0; width:100%; border-radius:14px; box-shadow:var(--shadow)}
footer{padding:30px 0 60px; color:#2c2c2c}
.foot{display:grid; grid-template-columns:1.2fr .8fr; gap:18px}
.fine{color:var(--muted); font-size:14px}
@media (max-width: 880px){
  .hero-inner, .foot{grid-template-columns:1fr}
  .menu{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
}