/* ============================================================
   organic-bg.css — Vrindav Enterprises
   Botanical leaf/spice PNG watermarks as section backgrounds
   Place your PNG files in assets/images/botanicals/
   Naming: leaf-1.png, leaf-2.png, spice-1.png, spice-2.png etc.
   Opacity: 6–12% — decorative only, never distracting
============================================================ */

/* ============================================================
   SHARED — all pseudo-elements non-interactive
============================================================ */
.hero::before,
.hero::after,
.trust-strip::before,
.stats-bar::before,
.about-snippet::before,
.about-snippet::after,
.section--alt::before,
.section--alt::after,
.cta-banner::before,
.page-hero::before,
.page-hero::after {
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* All section content stays above bg layers */
.hero__inner,
.trust-strip__inner,
.stats-bar > .container,
.about-snippet__inner,
.section--alt > .container,
.section > .container,
.cta-banner__inner,
.page-hero > .container,
.footer__grid,
.contact-strip__inner {
    position: relative;
    z-index: 1;
}

/* ============================================================
   1. HERO — large leaf bottom-left + small sprig top-right
============================================================ */
.hero {
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 480px;
    height: 480px;
    background-image: url('../images/botanicals/leaf-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    opacity: 0.10;
}
.hero::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 340px;
    height: 340px;
    background-image: url('../images/botanicals/leaf-2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
    opacity: 0.08;
}

/* ============================================================
   2. TRUST STRIP — tiny spice scattered repeat
============================================================ */
.trust-strip {
    position: relative;
    overflow: hidden;
}
.trust-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/botanicals/spice-1.png');
    background-size: 120px auto;
    background-repeat: repeat-x;
    background-position: center;
    opacity: 0.06;
}

/* ============================================================
   3. STATS BAR — leaf on brand red
============================================================ */
.stats-bar {
    position: relative;
    overflow: hidden;
}
.stats-bar::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 200px;
    height: 200px;
    background-image: url('../images/botanicals/leaf-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.08;
}

/* ============================================================
   4. ABOUT SECTION — leaf top-right + sprig bottom-left
============================================================ */
.about-snippet {
    position: relative;
    overflow: hidden;
}
.about-snippet::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 420px;
    height: 420px;
    background-image: url('../images/botanicals/leaf-2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
    opacity: 0.08;
}
.about-snippet::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 300px;
    height: 300px;
    background-image: url('../images/botanicals/spice-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    opacity: 0.07;
}

/* ============================================================
   5. SECTION ALT — leaf left edge + sprig right edge
============================================================ */
.section--alt {
    position: relative;
    overflow: hidden;
}
.section--alt::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -80px;
    transform: translateY(-50%);
    width: 360px;
    height: 360px;
    background-image: url('../images/botanicals/leaf-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.07;
}
.section--alt::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -80px;
    transform: translateY(-50%);
    width: 300px;
    height: 300px;
    background-image: url('../images/botanicals/leaf-2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
    opacity: 0.06;
}

/* ============================================================
   6. CTA BANNER — white-tinted leaf both sides on red
============================================================ */
.cta-banner {
    position: relative;
    overflow: hidden;
}
.cta-banner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -40px;
    transform: translateY(-50%);
    width: 280px;
    height: 280px;
    background-image: url('../images/botanicals/leaf-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.08;
    filter: brightness(0) invert(1);
}
.cta-banner::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -40px;
    transform: translateY(-50%);
    width: 260px;
    height: 260px;
    background-image: url('../images/botanicals/leaf-2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
    opacity: 0.08;
    filter: brightness(0) invert(1);
}
.cta-banner__inner {
    position: relative;
    z-index: 1;
}

/* ============================================================
   7. PAGE HERO — leaf corners both sides
============================================================ */
.page-hero {
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 500px;
    width: 320px;
    height: 320px;
    background-image: url('../images/botanicals/leaf-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    opacity: 0.08;
    
}
.page-hero::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -60px;
    width: 280px;
    height: 280px;
    background-image: url('../images/botanicals/leaf-2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
    opacity: 0.07;
}


/* ============================================================
   CONTACT PAGE — disable all organic bgs (map section)
============================================================ */
.contact-page .section::before,
.contact-page .section::after,
.contact-page .section--alt::before,
.contact-page .section--alt::after {
    display: none !important;
}