/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; max-width: 100%; }

/* ── Navigation ── */
#nav { background: transparent; }
#nav.scrolled {
  background: rgba(254, 252, 248, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.nav-logo { transition: color 0.3s; }
#nav.scrolled .nav-logo { color: #1c1917; }

/* ── Mobile Menu ── */
#mobile-menu.open { opacity: 1; pointer-events: all; }
#mobile-menu.closed { opacity: 0; pointer-events: none; }
#menu-btn.active #bar1 { transform: translateY(5px) rotate(45deg); }
#menu-btn.active #bar2 { opacity: 0; }
#menu-btn.active #bar3 { transform: translateY(-5px) rotate(-45deg); width: 1.5rem; }

/* ── Hero Animations (above fold — no JS required for visibility) ── */
.hero-eyebrow {
  opacity: 1;
  animation: fadeDown 0.8s 0.2s both;
}
.hero-headline {
  opacity: 1;
  animation: fadeUp 0.9s 0.4s both;
}
.hero-sub {
  opacity: 1;
  animation: fadeUp 0.9s 0.6s both;
}
.hero-ctas {
  opacity: 1;
  animation: fadeUp 0.9s 0.8s both;
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scrollLine {
  0%   { top: -12px; }
  100% { top: 32px; }
}
.scroll-line { animation: scrollLine 1.4s ease-in-out infinite; }

/* ── Section utilities ── */
.section-eyebrow { }
.section-title { }
.section-desc { }

/* ── Scroll Reveal (below fold — progressive enhancement) ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal-section {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal-section.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Default state: visible even if JS is disabled */
.reveal-section {
  opacity: 1;
  transform: translateY(0);
}
/* JS adds this class to trigger animation */
.reveal-section.animate-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-section.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Buttons ── */
.btn-primary, .btn-secondary, .btn-submit {
  position: relative;
  overflow: hidden;
}
.btn-primary::after, .btn-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  transition: opacity 0.3s;
}
.btn-primary:hover::after, .btn-submit:hover::after { opacity: 1; }

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

/* ── Form ── */
input:focus, select:focus, textarea:focus {
  border-color: #c4704b !important;
  box-shadow: 0 0 0 3px rgba(196, 112, 75, 0.1);
}

/* ── Utilities ── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}