:root {
  --linen: #f8f5f0;
  --surface: #ffffff;
  --navy: #0a2540;
  --gold: #c9a66b;
  --teal: #2a9d8f;
  --text-soft: #43474d;
}

html,
body {
  background: var(--linen);
  color: var(--navy);
}

.page-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.site-header {
  transition: box-shadow 220ms ease, backdrop-filter 220ms ease, background-color 220ms ease;
}

.site-header.scrolled {
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(10, 37, 64, 0.12);
}

.hero-overlay {
  background:
    linear-gradient(120deg, rgba(10, 37, 64, 0.8), rgba(10, 37, 64, 0.58)),
    url("https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?auto=format&fit=crop&w=1600&q=80") center/cover no-repeat;
}

.progress-track {
  background: rgba(10, 37, 64, 0.16);
}

.progress-fill {
  width: 0;
  transition: width 1200ms cubic-bezier(0.17, 0.89, 0.32, 1.28);
}

.quote-watermark {
  font-size: 6rem;
  color: rgba(10, 37, 64, 0.1);
  line-height: 1;
}

.footer-gradient {
  background:
    radial-gradient(circle at 95% 0%, rgba(201, 166, 107, 0.22), transparent 35%),
    var(--navy);
}

.mobile-tab {
  box-shadow: 0 -4px 16px rgba(10, 37, 64, 0.1);
}

.card-shadow {
  box-shadow: 0 20px 50px rgba(10, 37, 64, 0.09);
}

.reveal {
  animation: slideUp 650ms ease both;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}