/* ─── Base & Reset ─── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { background: none; border: none; cursor: pointer; color: inherit; font: inherit; }

/* ─── Buttons ─── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: #059669; color: #fff;
  padding: .75rem 1.75rem; border-radius: 9999px;
  font-weight: 600; font-size: .9375rem;
  transition: background .25s, transform .2s, box-shadow .25s;
  box-shadow: 0 4px 14px rgba(5,150,105,.3);
}
.btn-primary:hover { background: #047857; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(5,150,105,.4); }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: transparent; color: #059669;
  padding: .75rem 1.75rem; border-radius: 9999px;
  font-weight: 600; font-size: .9375rem;
  border: 2px solid #059669;
  transition: background .25s, color .25s, transform .2s;
}
.btn-secondary:hover { background: #059669; color: #fff; transform: translateY(-2px); }

/* ─── Tags ─── */
.tag-emerald {
  display: inline-block;
  font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #047857; background: #d1fae5;
  padding: .375rem .875rem; border-radius: 9999px;
}
.tag-light {
  display: inline-block;
  font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #6ee7b7; background: rgba(110,231,183,.15);
  padding: .375rem .875rem; border-radius: 9999px;
}

/* ─── Cards ─── */
.card {
  background: #fff; border-radius: 1.25rem; padding: 1.25rem;
  box-shadow: 0 4px 20px rgba(6,78,59,.06);
  border: 1px solid rgba(6,78,59,.06);
  transition: transform .3s, box-shadow .3s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(6,78,59,.12); }

/* ─── Hero Grid ─── */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

/* ─── About Grid ─── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .about-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* ─── Wave Divider ─── */
.wave-divider {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 60px; line-height: 0;
}
.wave-divider svg { display: block; width: 100%; height: 100%; }

/* ─── Nav ─── */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 2px; background: #059669;
  transition: width .3s;
}
.nav-link:hover::after { width: 100%; }

#site-header.scrolled {
  background: rgba(253,248,240,.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(6,78,59,.08);
}

/* ─── Mobile Menu ─── */
.mobile-nav-link { font-size: 1rem; font-weight: 500; }

/* ─── Scroll Reveal (progressive enhancement) ─── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
  }
  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ─── Smooth image transitions ─── */
.menu-card img,
.gallery img {
  will-change: transform;
}