/* Color Palette Mapping Variables */
:root {
    --psychotic-brand-green: #005a4e;
    --psychotic-soft-cream: #fbf1e6;
    --psychotic-text-charcoal: #2d2d2d;
}

/* Base Utility Classes */
.text-brand-green {
    color: var(--psychotic-brand-green) !important;
}

.btn-brand-green {
    background-color: var(--psychotic-brand-green) !important;
    border-color: var(--psychotic-brand-green) !important;
}

.btn-brand-green:hover {
    background-color: #003d35 !important;
    border-color: #003d35 !important;
}

.py-2-5 {
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
}

.z-index-2 {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   SECTION 1: HERO CONTAINER & ANGLED LAYERS (image_c1e128.jpg)
   ========================================================================== */
.psychotic-hero-section {
    background-color: var(--psychotic-soft-cream);
    z-index: 1;
}

.psychotic-hero-title {
    font-size: 2.65rem;
    line-height: 1.25;
    letter-spacing: -0.2px;
}

.psychotic-hero-text {
    font-size: 1.02rem;
    line-height: 1.65;
    text-align: justify;
}

/* Replicates the modern leaf rounded edge mask profile on the main visual */
.psychotic-hero-mask {
    width: 100%;
    max-width: 440px;
    overflow: hidden;
    border-top-left-radius: 2.5rem !important;
    border-bottom-left-radius: 2.5rem !important;
    border-bottom-right-radius: 2.5rem !important;
    border-top-right-radius: 8rem !important;
    /* Exaggerated top-right curve */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.hero-cropped-img {
    width: 100%;
    height: 380px;
    object-fit: cover;
}

/* Generates the custom subtle upward angled bottom baseline divider line */
.hero-angled-bottom-deck {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 45px;
    background-color: #ffffff;
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
    z-index: 1;
}

/* ==========================================================================
   SECTION 2: CLINICAL UNDERSTANDING GRID (image_c1e0e8.png)
   ========================================================================== */
.understanding-psychotic-heading {
    font-size: 1.95rem;
    line-height: 1.3;
}

.understanding-psychotic-text {
    font-size: 1rem;
    line-height: 1.65;
    text-align: justify;
}

/* Produces the counter-leaf curve mask layer matching the second container block */
.psychotic-asymmetric-frame {
    width: 100%;
    max-width: 410px;
    overflow: hidden;
    border-top-left-radius: 6rem !important;
    border-top-right-radius: 3rem !important;
    border-bottom-right-radius: 0.5rem !important;
    border-bottom-left-radius: 6rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.leaf-mask-img {
    width: 100%;
    height: 360px;
    object-fit: cover;
}