/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { min-height: 100vh; overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Hero ── */
.hero { position: relative; }
.hero-bg { position: absolute; inset: 0; }
.hero-img { animation: heroZoom 20s ease-in-out infinite alternate; }
@keyframes heroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}
.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(10, 23, 16, 0.55) 0%,
    rgba(27, 67, 50, 0.65) 50%,
    rgba(10, 23, 16, 0.80) 100%
  );
}

/* ── Nav ── */
.nav { background: transparent; }
.nav.scrolled {
  background: rgba(250, 249, 246, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(27, 67, 50, 0.08);
}
.nav.scrolled .nav-text { color: #1B4332; }
.nav.scrolled .nav-sub { color: #1B4332; }
.nav-link { position: relative; padding-bottom: 2px; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }
.nav.scrolled .nav-link { color: #1B4332; }

/* ── Mobile Menu ── */
.mobile-menu.open { opacity: 1; pointer-events: all; }
.mobile-menu.closed { opacity: 0; pointer-events: none; }
.mobile-link { transition: opacity 0.3s ease; }
.mobile-link:hover { opacity: 0.7; }

/* ── Buttons ── */
.btn-primary {
  background: #1B4332;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn-primary:hover { background: #2a5c38; transform: translateY(-1px); }
.btn-secondary {
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn-secondary:hover { background: rgba(250, 249, 246, 0.1); transform: translateY(-1px); }

/* ── Eyebrow ── */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #3d7a4e;
  font-weight: 500;
}

/* ── Service Cards ── */
.service-card {
  background: transparent;
  transition: transform 0.4s ease;
}
.service-card:hover { transform: translateY(-4px); }

/* ── Area Cards ── */
.area-card {
  transition: transform 0.4s ease;
}
.area-card:hover { transform: translateY(-4px); }

/* ── Testimonial Cards ── */
.testimonial-card {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.testimonial-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 60px rgba(27, 67, 50, 0.08);
}

/* ── Inputs ── */
.input {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.input:focus {
  box-shadow: 0 0 0 3px rgba(61, 122, 78, 0.1);
}
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231B4332' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

/* ── Scroll Reveal ── */
.reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Default state visible — JS adds revealed class for animation */
.reveal {
  /* Content is visible by default; animation is progressive enhancement */
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f5f3ed; }
::-webkit-scrollbar-thumb { background: #b9d0be; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #8fb896; }

/* ── Selection ── */
::selection { background: rgba(27, 67, 50, 0.15); color: #1B4332; }

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .hero-img { animation: none; }
}

/* ── Tablet ── */
@media (max-width: 767px) {
  .hero-headline { font-size: 2.75rem; }
  .hero-sub { font-size: 15px; }
}

/* ── Large Desktop ── */
@media (min-width: 1280px) {
  .hero-headline { font-size: 5.5rem; }
}