/* Purpose: CTA Banner. Full-bleed parallax image + emerald scrim, headline, price chip,
   primary CTA. Ported from the WV reference. Background image injected per-instance. */

.vs-cta {
  position: relative; padding: 96px 5vw;
  background-color: var(--emerald);
  background-size: cover; background-position: center; background-attachment: fixed;
  overflow: hidden; isolation: isolate;
  color: var(--cream);
}
@supports (-webkit-touch-callout: none) { .vs-cta { background-attachment: scroll; } }
@media (prefers-reduced-motion: reduce) { .vs-cta { background-attachment: scroll; } }

.vs-cta__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(95deg,
    rgba(21, 32, 29, 0.92) 0%,
    rgba(55, 96, 84, 0.82) 35%,
    rgba(55, 96, 84, 0.55) 70%,
    rgba(55, 96, 84, 0.40) 100%);
}
.vs-cta__inner {
  position: relative; z-index: 2;
  max-width: var(--max-wide); margin: 0 auto;
}
.vs-cta__text { max-width: 760px; }
.vs-cta .eyebrow { color: var(--cream); opacity: 0.9; margin-bottom: 20px; }
.vs-cta .eyebrow--no-rule::before { display: none; }
.vs-cta__title {
  margin-bottom: 20px; color: #FFFFFF;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
  font-family: var(--font-display); font-weight: var(--weight-regular);
  font-size: var(--sec-h2); line-height: 1.05; letter-spacing: -0.022em;
}
.vs-cta__title em { color: var(--cream); font-style: italic; }
.vs-cta__lead { color: rgba(255, 255, 255, 0.88); margin-bottom: 28px; max-width: 56ch; line-height: 1.6; }
.vs-cta__lead strong { color: #FFFFFF; font-weight: 700; }

.vs-cta__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }
.vs-cta__chip {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 14px 24px;
  background: rgba(245, 239, 224, 0.10);
  border: 1px solid rgba(245, 239, 224, 0.30);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
}
.vs-cta__price { font-family: var(--font-display); font-size: 36px; color: #FFFFFF; line-height: 1; }
.vs-cta__save {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cream);
  padding: 4px 10px; border: 1px solid rgba(245, 239, 224, 0.40); border-radius: 4px;
}
.vs-cta__meta {
  margin-top: 18px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; color: rgba(245, 239, 224, 0.65);
}
@media (max-width: 720px) {
  .vs-cta__actions { flex-direction: column; align-items: flex-start; gap: 14px; }
}