/* ── Reset & Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--off-white);
  color: var(--text);
  line-height: 1.65;
}

h1, h2, h3, h4, h5 { font-family: 'Syne', sans-serif; line-height: 1.12; }

/* ── Animations ───────────────────────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fu  { animation: fadeUp 0.5s ease both; }
.fu1 { animation-delay: 0.05s; }
.fu2 { animation-delay: 0.15s; }
.fu3 { animation-delay: 0.25s; }

/* contact.html uses a different animation class name */
.fade-up  { animation: fadeUp 0.5s ease both; }
.fade-up-1 { animation-delay: 0.1s; }
.fade-up-2 { animation-delay: 0.2s; }
.fade-up-3 { animation-delay: 0.3s; }