:root {
  --cream: #fbf4e8;
  --paper: #fffaf2;
  --orange: #f57c14;
  --orange-deep: #d9620a;
  --chai: #7a3e12;
  --ink: #2b1a0f;
  --muted: #7d6a5a;
  --line: #ead9c2;
  --green: #5f7d3a;
  --radius: 22px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, .serif { font-family: "Fraunces", Georgia, serif; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
em { font-style: italic; color: var(--orange); }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }

/* ── Nav ── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background .3s, box-shadow .3s;
}
.nav.scrolled { background: rgba(251, 244, 232, .86); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.logo { display: flex; align-items: center; gap: 8px; font-family: "Fraunces", serif; font-size: 26px; font-weight: 700; text-decoration: none; letter-spacing: -.03em; }
.logo svg { width: 22px; height: 30px; }
.nav-links { display: flex; gap: 28px; align-items: center; font-size: 15px; }
.nav-links a:not(.btn) { text-decoration: none; color: var(--muted); }
.nav-links a:not(.btn):hover { color: var(--ink); }
@media (max-width: 720px) { .nav-links a:not(.btn) { display: none; } }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ink); color: var(--paper);
  padding: 15px 26px; border-radius: 999px; border: 0; cursor: pointer;
  font: 600 15px "Inter", sans-serif; text-decoration: none;
  transition: transform .25s var(--ease), background .25s, box-shadow .25s;
}
.btn:hover { transform: translateY(-2px); background: var(--orange); box-shadow: 0 12px 28px -10px rgba(245, 124, 20, .7); }
.btn.orange { background: var(--orange); }
.btn.orange:hover { background: var(--ink); box-shadow: 0 12px 28px -10px rgba(43, 26, 15, .5); }
.btn.small { padding: 10px 18px; font-size: 14px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ── Reveal ── */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; } .reveal.d2 { transition-delay: .2s; } .reveal.d3 { transition-delay: .3s; }

/* ── Infuser animation bits ── */
.inf .leaf { transform-origin: 100px 152px; animation: sway 4.5s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* ── Footer ── */
.foot { padding: 28px 0; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); }
.foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.foot nav { display: flex; flex-wrap: wrap; gap: 16px; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { color: var(--ink); }

.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-deep); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}