/* =================================================================
   DIRECTION D — SHARED CHROME
   The generic, page-agnostic pieces of the Direction D design system
   that the previews carried in their inline <style> base block:
     - topographic contour canvas behind final CTAs
     - corner kratom-leaf foliage on dark heroes
   Header chrome lives in header.css; the two-column prefooter lives in
   footer.css. Enqueued on every page in functions.php.
   ================================================================= */

/* Topo contours behind the final CTA --------------------------------- */
.final-cta {
    position: relative;
    overflow: hidden;
}
.cta-topo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.final-cta-inner {
    position: relative;
    z-index: 1;
}

/* Corner kratom-leaf silhouettes framing dark heroes ----------------- */
.hero {
    position: relative;
    overflow: hidden;
}
.hero-inner {
    position: relative;
    z-index: 1;
}
.hero-foliage {
    position: absolute;
    pointer-events: none;
    filter: blur(0.5px) drop-shadow(0 10px 24px rgba(3, 10, 7, 0.5));
    z-index: 0;
}
.hero-foliage svg {
    display: block;
    width: 100%;
    height: auto;
}
.hero-foliage-left {
    left: -6px;
    bottom: -6px;
    width: 270px;
}
.hero-foliage-right {
    right: -6px;
    top: -6px;
    width: 240px;
}
@media (max-width: 680px) {
    .hero-foliage-left {
        width: 180px;
    }
    .hero-foliage-right {
        width: 150px;
    }
}