*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  body {
    overflow-x: hidden;
  }

  /* ── NAV ─────────────────────────────── */
  #navbar {
    background: transparent;
    transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
  }
  #navbar.scrolled {
    background: rgba(27, 67, 50, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 30px rgba(0,0,0,0.18);
    padding: 0;
  }

  /* ── MOBILE MENU ─────────────────────── */
  #mobileMenu.open {
    opacity: 1;
    pointer-events: auto;
  }
  #mobileMenu.closed {
    opacity: 0;
    pointer-events: none;
  }

  /* ── HERO ────────────────────────────── */
  .hero-gradient {
    background: radial-gradient(ellipse at 30% 50%, #2d6a4f 0%, #1B4332 45%, #0f251c 100%);
  }
  .hero-blob {
    background: radial-gradient(circle, #D4A843 0%, transparent 70%);
  }

  /* ── HERO BADGE ──────────────────────── */
  .hero-badge {
    animation: fadeDown 0.8s ease both;
  }
  h1 {
    animation: fadeUp 0.8s 0.15s ease both;
  }
  .hero p {
    animation: fadeUp 0.8s 0.3s ease both;
  }
  .hero > div > div:last-child {
    animation: fadeUp 0.8s 0.45s ease both;
  }
  .hero > div > div:last-child ~ div {
    animation: fadeUp 0.8s 0.55s ease both;
  }
  .hero .flex-wrap {
    animation: fadeUp 0.8s 0.6s ease both;
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── REVEAL (scroll) ─────────────────── */
  .reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.65s ease, transform 0.65s ease;
  }
  .reveal[data-revealed="false"] {
    opacity: 0;
    transform: translateY(36px);
  }

  /* ── CARDS ───────────────────────────── */
  .card {
    background: #fff;
    border-radius: 1.25rem;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 4px 24px rgba(27,67,50,0.07);
    padding: 1.25rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(27,67,50,0.13);
  }

  /* ── SERVICE CARDS ───────────────────── */
  .service-card { padding: 0; overflow: hidden; }
  .service-card .card-inner { padding: 1.5rem; }

  /* ── GALLERY ─────────────────────────── */
  .gallery-item {
    cursor: pointer;
    transition: transform 0.3s ease;
  }
  .gallery-item:hover {
    transform: scale(1.02);
  }

  /* ── BUTTONS ─────────────────────────── */
  a, button {
    cursor: pointer;
  }

  /* ── REDUCED MOTION ──────────────────── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
    .reveal[data-revealed="false"] {
      opacity: 1;
      transform: none;
    }
  }

  /* ── MOBILE MENU ANIMATION ───────────── */
  @keyframes menuIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
  }
  #mobileMenu.open {
    animation: menuIn 0.25s ease forwards;
  }