/* ========== 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 { max-width: 100%; display: block; }

  /* ========== ANIMATIONS ========== */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-up { animation: fadeUp 0.9s ease-out forwards; }

  @keyframes scrollLine {
    0% { opacity: 0; transform: scaleY(0); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
    51% { transform-origin: bottom; }
    100% { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
  }
  .animate-scroll-line { animation: scrollLine 1.8s ease-in-out infinite; }

  /* ========== REVEAL ON SCROLL ========== */
  .reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  .reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ========== HEADER ========== */
  #header { background: transparent; }
  #header.scrolled {
    background: rgba(253, 248, 240, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(62, 39, 35, 0.08);
  }
  #header.scrolled .font-display,
  #header.scrolled .text-bark { color: #3E2723; }
  #header.scrolled .text-sand-600 { color: #c4883a; }

  /* ========== NAV LINKS ========== */
  .nav-link { position: relative; }
  .nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: #c4552f;
    transition: width 0.3s ease;
  }
  .nav-link:hover::after { width: 100%; }

  /* ========== MOBILE MENU ========== */
  #mobile-menu.open { opacity: 1; pointer-events: all; }
  .mobile-nav-link { transition: opacity 0.3s ease; }
  #menu-toggle.active .menu-line:nth-child(1) { transform: rotate(45deg) translate(3px, 3px); }
  #menu-toggle.active .menu-line:nth-child(2) { opacity: 0; }
  #menu-toggle.active .menu-line:nth-child(3) { transform: rotate(-45deg) translate(3px, -3px); width: 24px; }

  /* ========== BUTTONS ========== */
  .btn-primary {
    display: inline-flex;
    align-items: center;
    background: #c4552f;
    color: #FDF8F0;
    padding: 16px 36px;
    border-radius: 50px;
    font-family: 'Lora', Georgia, serif;
    font-size: 0.875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
  }
  .btn-primary:hover { background: #a33f22; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(196, 85, 47, 0.3); }

  .btn-secondary {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: #FDF8F0;
    padding: 16px 36px;
    border-radius: 50px;
    font-family: 'Lora', Georgia, serif;
    font-size: 0.875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid rgba(253, 248, 240, 0.4);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
  }
  .btn-secondary:hover { background: rgba(253, 248, 240, 0.1); border-color: rgba(253, 248, 240, 0.8); transform: translateY(-2px); }

  .btn-reserve {
    display: inline-flex;
    align-items: center;
    background: #c4552f;
    color: #FDF8F0;
    padding: 12px 28px;
    border-radius: 50px;
    font-family: 'Lora', Georgia, serif;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  }
  .btn-reserve:hover { background: #a33f22; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(196, 85, 47, 0.3); }

  .btn-outline {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: #c4552f;
    padding: 14px 32px;
    border-radius: 50px;
    font-family: 'Lora', Georgia, serif;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid #c4552f;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
  }
  .btn-outline:hover { background: #c4552f; color: #FDF8F0; transform: translateY(-2px); }

  /* ========== INPUTS ========== */
  .input-field {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e8d5c0;
    border-radius: 12px;
    background: #FDF8F0;
    font-family: 'Lora', Georgia, serif;
    font-size: 0.9375rem;
    color: #3E2723;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none;
    appearance: none;
  }
  .input-field::placeholder { color: #c4a882; }
  .input-field:focus { border-color: #c4552f; box-shadow: 0 0 0 3px rgba(196, 85, 47, 0.1); }
  .input-field:hover { border-color: #d4a252; }

  select.input-field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c4883a' stroke-width='2' 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 14px center;
    padding-right: 40px;
  }

  /* ========== RESPONSIVE ========== */
  @media (max-width: 767px) {
    .font-display.text-5xl { font-size: 2.5rem; }
    .font-display.text-4xl { font-size: 2rem; }
  }