/* ---------- CSS VARIABLES ---------- */
:root{
  --bg: #d3e9fb;        /* light Mediterranean blue */
  --card: #ffffff;
  --ink: #0f1a24;       /* dark navy text */
  --muted: #5b6b79;
  --navy: #1f2e3a;
  --olive: #5a7d4e;     /* accent */
  --sand: #f4efe6;
  --radius: 18px;
  --shadow: 0 8px 24px rgba(15,26,36,.08);
}

/* ---------- RESET ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
a{color:inherit;text-decoration:none}

/* ---------- GLOBAL ---------- */
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}

.container{width:min(1100px, 92vw); margin:auto}

.section{padding: clamp(28px, 5vw, 64px) 0}
.grid{display:grid; gap:clamp(16px, 3vw, 28px)}
.grid-3{grid-template-columns: repeat(3, 1fr)}
.grid-2{grid-template-columns: repeat(2, 1fr)}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .grid-3,.grid-2{grid-template-columns:1fr}}

/* ---------- HEADER / NAV ---------- */
.header{
  position: sticky; top:0; z-index:10;
  background:#fff; box-shadow: var(--shadow);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand__logo-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #eaf4eb; /* Light greenish background */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Ensures the image doesn't overflow the circle */
}
.brand__logo{
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the logo scales to fit the circle */
  background: radial-gradient(circle at 35% 35%, #89a88a, #2e4733);
  display:grid;place-items:center;color:#fff;font-weight:700
}
.brand__name{font-size:1.2rem; font-weight:700; letter-spacing:.3px}
.nav__links{display:flex; align-items:center; gap:18px}
.nav__link{
  padding:.6rem .9rem; border-radius:999px; color:var(--navy);
}
.nav__link[aria-current="page"]{background:var(--navy); color:#fff}
.nav__toggle{display:none}
@media (max-width:760px){
  .nav__toggle{display:inline-flex; padding:.5rem .8rem; border:1px solid #e5e7eb; border-radius:10px; background:#fff}
  .nav__links{display:none}
  .nav--open .nav__links{
    display:flex; position:absolute; left:0; right:0; top:60px; 
    background:#fff; padding:10px; flex-direction:column; gap:10px; border-bottom:1px solid #eef2f5
  }
}

/* ---------- HERO ---------- */
.hero{
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.6)), url('https://images.unsplash.com/photo-1551218808-94e220e084d2?q=80&w=1400&auto=format&fit=crop') center/cover no-repeat;
  border-radius: calc(var(--radius) + 8px);
  box-shadow: var(--shadow);
  padding: clamp(32px, 6vw, 96px);
  text-align:center;
}
.hero h1{font-size:clamp(1.8rem, 4vw, 3rem); margin:0 0 10px}
.hero p{color:var(--muted); margin:0 0 22px}
.btn{
  display:inline-flex; gap:10px; align-items:center; justify-content:center;
  padding:.9rem 1.1rem; border-radius:12px; border:0; cursor:pointer; font-weight:600
}
.btn.primary{background:var(--navy); color:#fff}
.btn.ghost{background:#fff; border:1px solid #e6eaf0; color:var(--navy)}
.btn.olive{background:var(--olive); color:#fff}

/* ---------- CARDS ---------- */
.card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card__img{aspect-ratio: 16/9; object-fit: cover}
.card__body{padding:18px}
.card__title{margin:0 0 6px; font-size:1.2rem}
.card__muted{color:var(--muted); margin:0}

/* ---------- MENU ---------- */
.menu__tabs{
  display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 24px;
}
.tab{
  background:#fff; border:1px solid #e6eaf0; padding:.55rem .9rem; border-radius:999px; cursor:pointer
}
.tab.is-active{background:var(--navy); color:#fff}
.menu__list{display:grid; gap:14px}
.menu-item{
  display:grid; grid-template-columns: 110px 1fr auto; gap:16px; align-items:center;
  background:#fff; border-radius:14px; padding:12px; box-shadow: var(--shadow)
}
.menu-item img{width:110px; height:85px; object-fit:cover; border-radius:10px}
.menu-item h4{margin:0 0 6px}
.menu-item p{margin:0; color:var(--muted)}
.menu-item .price{font-weight:700}
@media (max-width:640px){
  .menu-item{grid-template-columns: 90px 1fr}
  .menu-item .price{justify-self:start; margin-top:6px}
}

/* ---------- QUOTE FORM ---------- */
.quote{
  background:#fff; border-radius: var(--radius); box-shadow:var(--shadow);
  padding:20px; max-width: 760px; margin:auto
}
.form{display:grid; gap:14px}
.form .row{display:grid; gap:12px; grid-template-columns:1fr 1fr}
@media (max-width:640px){ .form .row{grid-template-columns:1fr} }
.label{font-weight:600; font-size:.95rem}
.input, .select, .textarea{
  width:100%; padding:.8rem .9rem; border:1px solid #d9e1e8; border-radius:10px; background:#fafcff
}
.textarea{min-height:120px; resize:vertical}
.helper{font-size:.85rem; color:var(--muted)}
.success{
  margin-top:10px; background:#ecfdf5; color:#065f46; padding:.7rem .9rem; border-radius:10px; display:none
}
.error{color:#b00020; font-size:.9rem; display:none}

/* ---------- FOOTER ---------- */
.footer{
  margin-top: 60px;
  background: var(--navy); color:#dbe6f0;
  padding: 28px 0;
}
.footer a{color:#dbe6f0}