/* ── Base & Utilities ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

/* ── Scroll Reveal (progressive enhancement) ─────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(.22,.61,.36,1),
                transform 0.7s cubic-bezier(.22,.61,.36,1);
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Fallback: always visible when reduced-motion is preferred */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ── Nav ─────────────────────────────────────────────────────── */
#site-header {
  background: transparent;
  transition: background 0.35s, box-shadow 0.35s;
}
#site-header.scrolled {
  background: rgba(253, 248, 240, 0.97);
  box-shadow: 0 2px 20px rgba(6, 78, 59, 0.10);
}

/* ── Mobile menu animation ───────────────────────────────────── */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(.4,0,.2,1);
}
#mobile-menu.open {
  max-height: 400px;
}

/* ── Button micro-interactions ───────────────────────────────── */
a, button {
  -webkit-tap-highlight-color: transparent;
}

/* ── Form focus ring ─────────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
  outline: none;
}

/* ── Selection color ─────────────────────────────────────────── */
::selection {
  background: #059669;
  color: #FDF8F0;
}

/* ── Smooth image loading ────────────────────────────────────── */
img {
  display: block;
  max-width: 100%;
}