/* ─── Base & Reset ─── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; }
img { max-width: 100%; height: auto; }

/* ─── Hero ─── */
.hero {
  background: linear-gradient(135deg, #fdf5e9 0%, #fdf0ec 50%, #fae8cc 100%);
  min-height: 100vh;
  padding-top: 6rem;
  padding-bottom: 4rem;
}
@media (min-width: 1024px) {
  .hero { padding-top: 0; }
}

.hero-img-wrapper {
  box-shadow: 0 25px 60px -12px rgba(192, 112, 78, 0.18);
}

/* ─── Service Cards ─── */
.service-card {
  will-change: transform;
}

/* ─── Gallery ─── */
.gallery-item {
  overflow: hidden;
  position: relative;
}
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(133, 66, 45, 0.08) 0%, transparent 40%);
  pointer-events: none;
  border-radius: inherit;
}

/* ─── Nav scroll state ─── */
.nav.scrolled {
  box-shadow: 0 1px 12px rgba(133, 66, 45, 0.08);
}

/* ─── Scroll-reveal (progressive enhancement) ─── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gallery-item img { transition: none; }
  .gallery-item:hover img { transform: none; }
}