/* ============================================
   BASE — Reset, Variables, Shared, Animations
   ============================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ink: #12423b;
  --cream: #f8faf9;
  --gold: #009b77;
  --gold-light: #7fcbc3;
  --rust: #009b77;
  --sage: #ffffff;
  --white: #a9bebb;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
}

/* ——— SECTION BASE ——— */
section { padding: 8rem 4rem; }

.section-label {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1;
}
.section-title em { font-style: italic; color: var(--rust); }

/* ——— SCROLL REVEAL ——— */
.reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ——— ANIMATIONS ——— */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: translate(-50%,-50%) scale(1); }
  50%       { transform: translate(-50%,-50%) scale(1.05); }
}
@keyframes lineGrow {
  to { transform: scaleX(1); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ——— RESPONSIVE BASE ——— */
@media (max-width: 900px) {
  section { padding: 5rem 2rem; }
}