/* ============================================================
   base.css — Global Resets & Base Element Styles
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background:             var(--linen);
  color:                  var(--ink);
  font-family:            var(--font-body);
  font-weight:            400;
  line-height:            1.7;
  min-height:             100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:             hidden;
}

h1, h2, h3, h4 {
  font-family:    var(--font-display);
  font-weight:    400;
  letter-spacing: -0.02em;
  line-height:    1.05;
  margin-bottom:  0.4em;
}

h1 { font-size: clamp(2.8rem, 6.2vw, 5.6rem); font-weight: 500; }
h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 500; }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); font-weight: 500; }

a {
  color:           var(--terra);
  text-decoration: none;
  transition:      color var(--t-fast) ease;
}
a:hover { color: var(--sand); }

img {
  max-width: 100%;
  display:   block;
}

/* ── LAYOUT CONTAINER ─────────────────────────────────────── */

.vp-container {
  max-width: 1240px;
  margin:    0 auto;
  padding:   0 2rem;
}

/* ── SECTION WRAPPERS ─────────────────────────────────────── */

.vp-section           { padding: var(--space-xl) 0; }
.vp-section.alt       { background: var(--linen-warm); }
.vp-section.dark      { background: var(--terra-deep); color: var(--linen); }
.vp-section.dark h2   { color: var(--linen); }
.vp-section.charcoal  { background: #1e1c1a; color: var(--linen); }
.vp-section.charcoal h2 { color: var(--linen); }
.vp-section.plum-dark { background: var(--plum-deep); color: var(--linen); }
.vp-section.plum-dark h2 { color: var(--linen); }

/* ── SECTION HEAD ─────────────────────────────────────────── */

.vp-section-head {
  text-align:    center;
  max-width:     700px;
  margin:        0 auto 4rem;
}
.vp-section-head h2      { margin-bottom: 0.3em; }
.vp-section-head p       { color: var(--ink-mid); line-height: 1.8; margin-top: 0.8rem; }
.vp-section.dark  .vp-section-head p    { color: rgba(245,240,234,0.72); }
.vp-section.charcoal .vp-section-head p { color: rgba(245,240,234,0.65); }
.vp-section.plum-dark .vp-section-head p { color: rgba(245,240,234,0.72); }

/* ── EYEBROW ──────────────────────────────────────────────── */

.vp-eyebrow {
  font-family:    var(--font-body);
  font-weight:    600;
  font-size:      0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color:          var(--sand);
  margin-bottom:  1rem;
  display:        block;
}
.vp-section.dark .vp-eyebrow      { color: var(--sand-soft); }
.vp-section.charcoal .vp-eyebrow  { color: var(--lavender); }
.vp-section.plum-dark .vp-eyebrow { color: var(--sand-soft); }

/* ── DIVIDER ──────────────────────────────────────────────── */

.vp-divider {
  width:      48px;
  height:     1px;
  background: var(--sand);
  margin:     1.2rem auto;
  position:   relative;
}
.vp-divider::before,
.vp-divider::after {
  content:       '';
  position:      absolute;
  top:           50%;
  width:         4px;
  height:        4px;
  background:    var(--sand);
  border-radius: 50%;
  transform:     translateY(-50%);
}
.vp-divider::before { left: -10px; }
.vp-divider::after  { right: -10px; }

/* ── ANIMATIONS ───────────────────────────────────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── SCROLL-REVEAL ─────────────────────────────────────────── */

.reveal {
  opacity:   0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}
.reveal.visible {
  opacity:   1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── RESPONSIVE ───────────────────────────────────────────── */

@media (max-width: 992px) {
  .vp-container { padding: 0 1.5rem; }
  .vp-section   { padding: 5rem 0; }
}
@media (max-width: 768px) {
  .vp-container { padding: 0 1.2rem; }
  .vp-section   { padding: 4rem 0; }
  p             { font-size: 0.96rem; }
}
@media (max-width: 480px) {
  .vp-section   { padding: 3rem 0; }
  .vp-container { padding: 0 1rem; }
}