/* ── Base / Reset ── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  body { min-height: 100vh; overflow-x: hidden; }
  img { display: block; max-width: 100%; }
  ::selection { background: rgba(196, 112, 75, 0.15); }

  /* ── Navigation ── */
  .nav {
    background: rgba(254, 252, 248, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(26, 22, 20, 0.06);
  }
  .nav.scrolled {
    background: rgba(254, 252, 248, 0.95);
    box-shadow: 0 1px 0 rgba(26, 22, 20, 0.06);
  }
  .nav-link { position: relative; }
  .nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: #C4704B;
    transition: width 0.3s ease;
  }
  .nav-link:hover::after { width: 100%; }

  /* ── Mobile menu ── */
  #mobile-menu.open { opacity: 1; pointer-events: all; }
  .mobile-link { transition: opacity 0.3s ease; }
  .mobile-link:hover { opacity: 0.7; }
  .menu-line { transition: all 0.3s ease; }
  #menu-btn[aria-expanded="true"] .menu-line:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
  }
  #menu-btn[aria-expanded="true"] .menu-line:nth-child(2) {
    opacity: 0;
  }
  #menu-btn[aria-expanded="true"] .menu-line:nth-child(3) {
    transform: translateY(-4px) rotate(-45deg);
    width: 1.25rem;
  }

  /* ── Reveal animations ── */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal.delay-1 { transition-delay: 0.1s; }
  .reveal.delay-2 { transition-delay: 0.2s; }
  .reveal.delay-3 { transition-delay: 0.3s; }

  /* ── Form focus styles ── */
  input:focus, textarea:focus {
    outline: none;
  }

  /* ── Smooth scroll offset for fixed nav ── */
  section[id], header[id] {
    scroll-margin-top: 80px;
  }

  /* ── Mobile adjustments ── */
  @media (max-width: 767px) {
    .nav { background: rgba(254, 252, 248, 0.95); }
    header { scroll-margin-top: 0; }
  }