.btn-primary {
  font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--gold); color: var(--forest);
  padding: 1rem 2.2rem; font-weight: 500;
  transition: background 0.25s, transform 0.2s;
  display: inline-flex; align-items: center; gap: 0.75rem;
}
.btn-primary:hover { background: var(--gold-l); transform: translateY(-2px); }
.btn-ghost {
  font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.7);
  padding: 1rem 2.2rem; font-weight: 400;
  transition: border-color 0.25s, color 0.25s, transform 0.2s;
  display: inline-flex; align-items: center;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }

/* Outline button for light backgrounds (cards, parchment sections) */
.btn-outline {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  font-family: 'Jost', sans-serif;
  border: 1px solid rgba(14, 26, 22, 0.28);
  color: var(--forest);
  background: var(--white);
  padding: 1rem 2.2rem;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s, transform 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.btn-outline:hover {
  border-color: var(--gold-d);
  background: rgba(200, 169, 110, 0.14);
  color: var(--forest);
  transform: translateY(-2px);
}

.btn-wa {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: #25d366;
  color: #fff;
  padding: 1rem 2.2rem;
  font-weight: 500;
  transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.28);
}
.btn-wa:hover {
  background: #20bd5a;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.38);
}
.btn-wa svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* ─── REVEAL ─────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.9s cubic-bezier(0.22,0.68,0,1.1), transform 0.9s cubic-bezier(0.22,0.68,0,1.1); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-l { opacity: 0; transform: translateX(-36px); transition: opacity 0.9s cubic-bezier(0.22,0.68,0,1.1), transform 0.9s cubic-bezier(0.22,0.68,0,1.1); }
.reveal-l.visible { opacity: 1; transform: none; }
.about-img-wrap.reveal-l { transform: translateY(24px); }
.about-img-wrap.reveal-l.visible { transform: none; }
.reveal-r { opacity: 0; transform: translateX(36px); transition: opacity 0.9s cubic-bezier(0.22,0.68,0,1.1), transform 0.9s cubic-bezier(0.22,0.68,0,1.1); }
.reveal-r.visible { opacity: 1; transform: none; }



/* ─── SECTION COMMONS ────────────────────────────────────── */
.section-pad { padding: 7rem 5vw; }
@media (max-width: 768px) { .section-pad { padding: 4.5rem 1.5rem; } }
.section-head { margin-bottom: 4rem; }
.section-head .eyebrow { color: var(--gold); margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.8rem; }
.section-head .eyebrow::before { content: ''; display: block; width: 1.5rem; height: 1px; background: var(--gold); }
.section-head h2 {
  font-family: 'EB Garamond', serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 400; line-height: 1.12;
  color: var(--ink); letter-spacing: -0.01em;
}
.section-head h2 em { color: var(--gold-d); }
.section-head p { margin-top: 1rem; color: var(--stone); font-size: 0.9rem; line-height: 1.85; max-width: 500px; }
.section-head--white h2 { color: var(--white); }
.section-head--white .eyebrow { color: var(--gold); }
.section-head--white p { color: rgba(255,255,255,0.45); }