/* ============================================================
   CTA SECTION
============================================================ */

.cta {
  position: relative;
  background: var(--color-bg-primary);
  padding: 160px 0 120px;
  overflow: hidden;
  border-top: 1px solid var(--color-border);
}

/* Ghost watermark — right-anchored, behind content */
.cta__watermark {
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  font-family: var(--font-heading);
  font-size: 260px;
  font-weight: 700;
  color: var(--color-text-primary);
  opacity: 0.025;
  letter-spacing: -0.04em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  z-index: 0;
}

/* Oversized gold diamond — anchored bottom-right, decorative weight */
.cta__diamond {
  position: absolute;
  right: 60px;
  bottom: 60px;
  font-size: 88px;
  color: var(--color-accent-gold);
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  z-index: 0;
}

/* Inner split grid: 2fr left | 1fr right */
.cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 64px;
  align-items: start;
}

/* ── LEFT COLUMN ─────────────────────────────────────────── */

.cta__left {
  position: relative;
}

.cta__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-accent-gold);
  margin-bottom: 20px;
}

/* Thin horizontal gold accent rule — sits between label and heading */
.cta__rule {
  width: 60px;
  height: 1px;
  background: var(--color-accent-gold);
  opacity: 0.55;
  margin-bottom: 36px;
}

.cta__heading {
  font-family: var(--font-heading);
  font-size: 72px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.05;
  letter-spacing: var(--letter-spacing-heading);
}

/* ── RIGHT COLUMN ────────────────────────────────────────── */

/* Offset down and separated by thin gold left border */
.cta__right {
  margin-top: 80px;
  padding-left: 40px;
  border-left: 1px solid rgba(201, 168, 76, 0.3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.cta__subtext {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
}

/* .btn-primary is global — no overrides needed */

.cta__link {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-accent-gold);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition:
    color var(--transition-base),
    border-color var(--transition-base);
}

.cta__link:hover {
  color: var(--color-gold-light);
  border-bottom-color: rgba(201, 168, 76, 0.5);
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1024px) {
  .cta__heading {
    font-size: 56px;
  }

  .cta__watermark {
    font-size: 180px;
  }
}

@media (max-width: 768px) {
  .cta {
    padding: 100px 0 80px;
  }

  .cta__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .cta__heading {
    font-size: 44px;
  }

  .cta__right {
    margin-top: 0;
    padding-left: 24px;
  }

  .cta__watermark {
    font-size: 110px;
    right: -10px;
  }

  .cta__diamond {
    font-size: 52px;
    right: 24px;
    bottom: 24px;
  }
}

@media (max-width: 480px) {
  .cta__heading {
    font-size: 36px;
  }
}
