/* ========== RESET & BASE ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { -webkit-font-smoothing: antialiased; }

/* ========== NAV ========== */
#nav { background: transparent; }
#nav.scrolled { background: rgba(92, 42, 26, 0.95); backdrop-filter: blur(12px); box-shadow: 0 4px 30px rgba(0,0,0,0.15); }

/* ========== MOBILE NAV ========== */
#mobileNav.open { transform: translateX(0); }

/* ========== HERO STAT CARDS ========== */
.stat-card {
  animation: floatCard 6s ease-in-out infinite;
}
.card-1 { animation-delay: 0s; }
.card-2 { animation-delay: 1.5s; }
.card-3 { animation-delay: 3s; }
.card-4 { animation-delay: 4.5s; }

@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ========== SCROLL REVEAL ========== */
.reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .stat-card { animation: none; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ========== SERVICE CARDS ========== */
.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.service-card:hover { transform: translateY(-4px); }

/* ========== GALLERY ========== */
.gallery-item {
  transition: transform 0.3s ease;
}
.gallery-item:hover img { transform: scale(1.1); }

/* ========== REVIEW CARDS ========== */
.review-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.review-card:hover { transform: translateY(-4px); }

/* ========== FORM ========== */
input:focus, select:focus, textarea:focus {
  outline: none;
}

/* ========== UTILITIES ========== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #FDF8F0; }
::-webkit-scrollbar-thumb { background: #C1694F; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #A14F37; }
</styles.css>

<sm-file path="script.js">
(function () {
  'use strict';

  // ── NAV SCROLL ──
  const nav = document.getElementById('nav');
  let lastScroll = 0;

  function handleNavScroll() {
    const currentScroll = window.pageYOffset;
    if (currentScroll > 60) {
      nav.classList.add('scrolled');
    } else {
      nav.classList.remove('scrolled');
    }
    lastScroll = currentScroll;
  }

  window.addEventListener('scroll', handleNavScroll, { passive: true });
  handleNavScroll();

  // ── MOBILE MENU ──
  const menuBtn = document.getElementById('menuBtn');
  const closeMenu = document.getElementById('closeMenu');
  const mobileNav = document.getElementById('mobileNav');
  const mobileLinks = mobileNav.querySelectorAll('a');

  function openMenu() {
    mobileNav.classList.add('open');
    mobileNav.setAttribute('aria-hidden', 'false');
    document.body.style.overflow = 'hidden';
  }

  function closeMenuFn() {
    mobileNav.classList.remove('open');
    mobileNav.setAttribute('aria-hidden', 'true');
    document.body.style.overflow = '';
  }

  menuBtn.addEventListener('click', openMenu);
  closeMenu.addEventListener('click', closeMenuFn);
  mobileLinks.forEach(function (link) {
    link.addEventListener('click', closeMenuFn);
  });

  // ── SCROLL REVEAL ──
  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  if (!prefersReducedMotion) {
    const revealElements = document.querySelectorAll('.reveal');

    const revealObserver = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add('revealed');
          revealObserver.unobserve(entry.target);
        }
      });
    }, {
      threshold: 0.12,
      rootMargin: '0px 0px -40px 0px'
    });

    revealElements.forEach(function (el) {
      revealObserver.observe(el);
    });
  } else {
    document.querySelectorAll('.reveal').forEach(function (el) {
      el.classList.add('revealed');
    });
  }

  // ── CONTACT FORM ──
  const form = document.getElementById('contactForm');
  const successMsg = document.getElementById('formSuccess');

  if (form) {
    form.addEventListener('submit', function (e) {
      e.preventDefault();

      // Simple validation
      const name = document.getElementById('name').value.trim();
      const email = document.getElementById('email').value.trim();

      if (!name || !email) return;

      // Show success
      form.style.display = 'none';
      successMsg.classList.remove('hidden');
    });
  }

  // ── SMOOTH SCROLL FOR ANCHOR LINKS ──
  document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
    anchor.addEventListener('click', function (e) {
      const targetId = this.getAttribute('href');
      if (targetId === '#') return;
      const target = document.querySelector(targetId);
      if (target) {
        e.preventDefault();
        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  });
})();
</script>