/* ── FLOATING PIECES DEEPER STYLES ── */
.hero-card-stack:hover .card-back-1 {
  transform: translateX(calc(-50% - 60px)) rotate(-15deg) translateY(-10px);
}

.hero-card-stack:hover .card-back-2 {
  transform: translateX(-50%) rotate(0deg) translateY(-20px);
}

.hero-card-stack:hover .card-back-3 {
  transform: translateX(calc(-50% + 60px)) rotate(12deg) translateY(-10px);
}

/* ── IMAGE PLACEHOLDER STATES ── */
.why-img,
.story-img-wrap img,
.gallery-img-wrap img,
.team-avatar-wrap img {
  background: var(--gradient-cta);
}

/* ── FORM STATES ── */
.form-input.error {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}

.form-input.success {
  border-color: var(--color-sage);
  box-shadow: 0 0 0 3px rgba(122, 140, 110, 0.1);
}

/* ── NAV CTA SPECIFIC ── */
.nav-cta {
  background: var(--gradient-gold);
  color: var(--color-walnut-deep);
  border: none;
  font-weight: 700;
  box-shadow: var(--shadow-gold);
}

.site-header:not(.scrolled) .nav-cta {
  background: rgba(184, 144, 58, 0.2);
  color: var(--color-gold-light);
  border: 1.5px solid rgba(184, 144, 58, 0.4);
  box-shadow: none;
}

.site-header:not(.scrolled) .nav-cta:hover {
  background: var(--gradient-gold);
  color: var(--color-walnut-deep);
  border-color: transparent;
  box-shadow: var(--shadow-gold);
}

.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(184, 144, 58, 0.35);
  color: var(--color-walnut-deep);
}

/* ── SCROLL PROGRESS ── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--gradient-gold);
  z-index: 9999;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.1s linear;
}

/* ── BACK TO TOP ── */
.back-to-top {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-8);
  width: 48px;
  height: 48px;
  background: var(--gradient-cta);
  color: var(--color-parchment-light);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--shadow-warm);
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--transition-base);
  z-index: 100;
  border: 1px solid rgba(255,255,255,0.1);
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}