/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { overflow-x: hidden; }
img { display: block; max-width: 100%; }

/* ─── Scroll Reveal ─── */
.scroll-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.scroll-reveal.revealed:nth-child(2) { transition-delay: 0.1s; }
.scroll-reveal.revealed:nth-child(3) { transition-delay: 0.2s; }
.scroll-reveal.revealed:nth-child(4) { transition-delay: 0.3s; }
.scroll-reveal.revealed:nth-child(5) { transition-delay: 0.4s; }
.scroll-reveal.revealed:nth-child(6) { transition-delay: 0.5s; }

/* ─── Navigation ─── */
.nav {
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(254, 253, 248, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(6, 95, 70, 0.08);
}
.nav-link {
  color: #065f46;
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: #059669;
  transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* ─── Mobile Menu ─── */
.mobile-menu {
  background: rgba(254, 253, 248, 0.98);
  backdrop-filter: blur(20px);
}
.mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}
.mobile-link {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ─── Hero ─── */
.hero-gradient {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 25%, #047857 50%, #059669 75%, #10b981 100%);
}
.hero-pattern {
  background-image: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.03) 1px, transparent 1px),
                    radial-gradient(circle at 75% 75%, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.hero-eyebrow { transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s; }
.hero-title { transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s; }
.hero-subtitle { transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s; }
.hero-cta { transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.55s; }
.hero.animate .hero-eyebrow { opacity: 1; transform: translateY(0); }
.hero.animate .hero-title { opacity: 1; transform: translateY(0); }
.hero.animate .hero-subtitle { opacity: 1; transform: translateY(0); }
.hero.animate .hero-cta { opacity: 1; transform: translateY(0); }

.hero-btn-primary {
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
.hero-btn-primary:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  transform: translateY(-1px);
}
.hero-btn-secondary:hover {
  transform: translateY(-1px);
}

/* ─── Scroll Indicator ─── */
@keyframes scrollDown {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 48px; opacity: 0; }
}
.hero-scroll-dot {
  animation: scrollDown 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* ─── Eyebrow ─── */
.eyebrow {
  letter-spacing: 0.25em;
}

/* ─── Service Cards ─── */
.service-card {
  transition: background-color 0.5s ease;
}
.service-icon {
  transition: color 0.5s ease;
}

/* ─── Why Cards ─── */
.why-card {
  transition: background-color 0.5s ease;
}

/* ─── CTA Buttons ─── */
.cta-btn {
  box-shadow: 0 2px 16px rgba(6, 78, 59, 0.1);
}
.cta-btn:hover {
  box-shadow: 0 6px 28px rgba(6, 78, 59, 0.2);
  transform: translateY(-2px);
}
.cta-btn:hover {
  transform: translateY(-2px);
}

/* ─── Contact Form ─── */
.contact-form {
  border-left: 1px solid rgba(6, 95, 70, 0.1);
  padding-left: 0;
}
@media (max-width: 767px) {
  .contact-form { border-left: none; padding-left: 0; }
}
.contact-input {
  border-image: linear-gradient(to right, #a7f3d0, #6ee7b7) 1;
}
.contact-input:focus {
  border-image: linear-gradient(to right, #059669, #10b981) 1;
}
.contact-input::placeholder {
  color: #a7f3d0;
}
.contact-submit {
  box-shadow: 0 4px 24px rgba(6, 78, 59, 0.15);
}
.contact-submit:hover {
  box-shadow: 0 8px 32px rgba(6, 78, 59, 0.25);
  transform: translateY(-1px);
}

/* ─── Utility ─── */
@media (max-width: 767px) {
  .font-display { line-height: 1.1; }
}