/* ============================================================
   OLYMPIA — VIDA CSS
   Inspired by the flyer: ivory/cream highlights, rich navy
   accents, more vibrant gold. No structural changes.
   ============================================================ */

/* ── 1. RICHER GOLD VARIABLES ─────────────────────────────── */
:root {
  --gold-vivid:    #d4a843;
  --gold-bright:   #f0c45a;
  --ivory:         #faf6ee;
  --ivory-soft:    #f5f0e8;
  --navy-deep:     #0d1b2a;
  --navy-mid:      #1a2e44;
  --navy-accent:   rgba(13,27,42,0.85);
  --cream-glow:    rgba(240,196,90,0.07);
}

/* ── 2. HERO — richer overlay, ivory text pop ─────────────── */
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 30% 60%,
    rgba(13,27,42,0.45) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}

.hero-label {
  color: var(--gold-bright) !important;
  letter-spacing: 0.32em !important;
}

.hero-title {
  text-shadow: 0 2px 24px rgba(0,0,0,0.5) !important;
}

.hero-title em,
.hero-title .gold-word {
  color: var(--gold-bright) !important;
  -webkit-text-stroke: 0px !important;
}

/* ── 3. SECTION LABELS — more vivid ──────────────────────── */
.section-label {
  color: var(--gold-bright) !important;
  letter-spacing: 0.3em !important;
}

/* ── 4. GOLD LINE — richer glow ──────────────────────────── */
.gold-line {
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold-bright),
    var(--gold-vivid),
    var(--gold-bright),
    transparent
  ) !important;
  height: 1.5px !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 4px rgba(240,196,90,0.5)) !important;
}

/* ── 5. NAVY ACCENT SECTIONS — from flyer's dark corners ──── */
/* Stats / trust bar gets a navy-to-black treatment */
.stats-bar,
.trust-section {
  background: linear-gradient(
    135deg,
    var(--navy-deep) 0%,
    #0a1520 40%,
    #090909 100%
  ) !important;
  border-top: 1px solid rgba(13,27,42,0.8) !important;
  border-bottom: 1px solid rgba(201,168,76,0.12) !important;
}

/* ── 6. IVORY/CREAM TINT on alternating sections ─────────── */
/* Adds very subtle warmth — like the flyer's white/cream bg */
.why-section,
.quality-promise-section {
  background: linear-gradient(
    180deg,
    #0e0d0b 0%,
    #111008 100%
  ) !important;
}

/* CTA section — richer navy-black */
.cta-section {
  background: linear-gradient(
    135deg,
    var(--navy-deep) 0%,
    #0f1a27 35%,
    #0a0a08 70%,
    #090909 100%
  ) !important;
  position: relative;
}
.cta-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(201,168,76,0.08) 0%,
    transparent 60%
  );
  pointer-events: none;
}

/* ── 7. H2 HEADINGS — subtle cream warmth ────────────────── */
h2 {
  color: #f5f0e6 !important;
}
h2 em {
  color: var(--gold-bright) !important;
  font-style: italic;
}

/* ── 8. BUTTONS — more vivid gold ────────────────────────── */
.btn-gold {
  background: linear-gradient(
    135deg,
    #a87b20 0%,
    #c9a84c 30%,
    #f0c45a 60%,
    #d4a843 85%,
    #c9a84c 100%
  ) !important;
  box-shadow:
    0 4px 20px rgba(212,168,67,0.38),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
  color: #0a0a08 !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
}
.btn-gold:hover {
  box-shadow:
    0 6px 32px rgba(240,196,90,0.55),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
  filter: brightness(1.08) !important;
}

/* ── 9. NAV CTA BUTTON — vivid ───────────────────────────── */
.nav-cta {
  background: linear-gradient(135deg, #c9a84c, #f0c45a, #c9a84c) !important;
  box-shadow: 0 2px 12px rgba(212,168,67,0.3) !important;
}

/* ── 10. STAT NUMBERS — bright gold gradient text ─────────── */
.stat-number {
  background: linear-gradient(
    135deg,
    var(--gold-vivid) 0%,
    var(--gold-bright) 50%,
    var(--gold-vivid) 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 10px rgba(240,196,90,0.3)) !important;
}

/* ── 11. TRUST / WHY CARDS — ivory border tint ───────────── */
.trust-card,
.why-point {
  border-color: rgba(201,168,76,0.16) !important;
}
.trust-card:hover {
  border-color: rgba(240,196,90,0.38) !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.6),
    0 0 20px rgba(240,196,90,0.09) !important;
}

/* ── 12. REVIEW CARDS — navy-dark base ───────────────────── */
.review-card {
  background: linear-gradient(
    160deg,
    #131820 0%,
    #101010 100%
  ) !important;
  border-color: rgba(201,168,76,0.13) !important;
}
.review-card:hover {
  border-color: rgba(240,196,90,0.30) !important;
}
.review-quote {
  color: rgba(240,196,90,0.22) !important;
}
.review-stars {
  color: var(--gold-bright) !important;
}

/* ── 13. SECTION DIVIDERS — navy glow pulse ──────────────── */
.section-header h2::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(240,196,90,0.25),
    transparent
  ) !important;
}

/* ── 14. PAGE HERO — navy left-edge accent (like flyer) ───── */
.page-hero-content {
  position: relative;
}
.page-hero-content::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    transparent,
    var(--gold-bright),
    transparent
  );
  opacity: 0.7;
}

/* ── 15. FOOTER — navy dark base like flyer corners ──────── */
.footer {
  background: linear-gradient(
    160deg,
    #0d1520 0%,
    #0a0f18 40%,
    #080808 100%
  ) !important;
  border-top: 1px solid rgba(13,27,42,0.9) !important;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(240,196,90,0.4),
    transparent
  );
}
.footer {
  position: relative;
}

/* ── 16. SOCIAL LINKS — vivid on hover ───────────────────── */
.social-link:hover {
  border-color: var(--gold-bright) !important;
  color: var(--gold-bright) !important;
  background: rgba(240,196,90,0.1) !important;
  box-shadow: 0 0 12px rgba(240,196,90,0.2) !important;
}

/* ── 17. CONTACT INFO LINKS ──────────────────────────────── */
.contact-info-card a {
  transition: color 0.3s ease !important;
}
.contact-info-card a:hover {
  color: var(--gold-bright) !important;
}

/* ── 18. FLOAT PHONE BUTTON — navy ring ──────────────────── */
.float-phone-btn {
  box-shadow:
    0 4px 18px rgba(0,0,0,0.5),
    0 0 0 2px rgba(13,27,42,0.6) !important;
}

/* ── 19. AREAS SECTION — navy ambiance ───────────────────── */
.areas-section {
  background: linear-gradient(
    160deg,
    #0d1520 0%,
    #0a0d12 50%,
    #090909 100%
  ) !important;
}

/* ── 20. MOBILE — keep gold vivid ────────────────────────── */
@media (max-width: 768px) {
  .hero-label {
    color: var(--gold-bright) !important;
  }
  .section-label {
    color: var(--gold-bright) !important;
  }
  .btn-gold {
    box-shadow: 0 4px 16px rgba(212,168,67,0.35) !important;
  }
}