/* ═══════════════════════════════════════════════════════════════════════
   RR Interiors — Vibrancy Layer
   Loads after theme-toggle.css. Adds a second jewel tone (emerald) alongside
   the existing gold/sienna palette for contrast and richness. Does not
   replace gold as the primary brand accent — layers on top at select,
   high-visibility spots only. Scoped to index.html + contact.html.

   ADDED PALETTE
     --emerald     #0B6B4F   jewel accent, contrast to gold
     --emerald-lt  #2FA37D   emerald for text/icons on dark
     --emerald-d   #084F3A   deepest emerald, gradients/borders
═══════════════════════════════════════════════════════════════════════ */

/* ── Hero overlay — richer emerald-black wash instead of flat navy ── */
.hero-overly::before {
    background: linear-gradient(135deg, rgba(6, 42, 32, 0.6) 0%, rgba(2, 8, 6, 0.55) 100%) !important;
}

/* ── Selection color — small delight, site-wide on these two pages ── */
::selection {
    background: #0B6B4F;
    color: #FDFAF5;
}

/* ── Services section badge — emerald instead of gold for rhythm ── */
.services-area .section-tittle span {
    color: #2FA37D !important;
    border-top-color: #2FA37D !important;
}
[data-theme="light"] .services-area .section-tittle span {
    color: #0B6B4F !important;
    border-top-color: #0B6B4F !important;
}

/* ── Testimonial cards — two-tone gold/emerald top border ── */
.rr-testi-card {
    border-top: 2px solid transparent !important;
    border-image: linear-gradient(90deg, #C8A040 0%, #0B6B4F 100%) 1 !important;
}

/* ── Buttons — emerald glow on hover, layered under existing color change ── */
.rr-hero-cta:hover,
.rr-lead-form button:hover,
.btn:hover {
    box-shadow: 0 10px 28px -10px rgba(11, 107, 79, 0.55);
}

/* Note: contact.html's form/sidebar/title are styled by its own inline <style>
   block (fixed light card, gold accents already in place by design) — left
   alone here so this layer doesn't fight that. */