.values-section {
    padding: 8rem 5%;
    background: var(--bg-surface);
    /* position: relative; */         /* REMOVED */
    /* z-index: 20; */                /* REMOVED */
}

.values-container {
    display: flex;
    gap: 5rem;
    max-width: 1400px;
    margin: 0 auto;
    /* flex-start is crucial. If omitted, the left side stretches to the height of the right side and won't stick. */
    align-items: flex-start; 
}

/* --- THE STICKY LEFT COLUMN --- */
.values-left {
    position: sticky;
    top: 150px; /* Accounts for your taller navigation bar */
    flex: 0 0 35%;
}

.values-left .section-title {
    text-align: left;
    margin-bottom: 1.5rem;
}

.values-intro {
    color: var(--text-secondary);
    font-size: 1.2rem;
}

/* --- THE SCROLLING RIGHT COLUMN --- */
.values-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    align-items: flex-end;   /* 👈 pushes cards to the right */
}

.value-card {
    position: relative;
    width: 75%; 
    min-height: 340px; /* Reduced by ~25% from 450px */
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 2.25rem; /* Tighter padding to match the smaller card */
    
    /* --- NEW: Image Rendering --- */
    background-color: var(--bg-elevated); /* Fallback color */
    background-image: var(--bg-img);
    background-size: cover;
    background-position: center;
}

/* --- The Dark Tint Layer --- */
.card-tint {
    position: absolute;
    inset: 0;
    /* Dark gradient so white text pops */
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 100%);
    z-index: 1;
    opacity: 0; 
    /* Smooth fade in/out */
    transition: opacity 0.8s ease-in-out; 
}

/* --- The Text Content (Hidden by default) --- */
.value-card .card-content {
    position: relative;
    z-index: 2;
    opacity: 0; /* Hidden */
    transform: translateY(30px); /* Pushed down slightly */
    /* Smooth fade and slide up */
    transition: opacity 0.8s ease-in-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- THE 'SWEET SPOT' ACTIVE STATE --- */
/* These styles apply when JS detects the card is in the middle of the screen */
.value-card.is-active .card-tint {
    opacity: 1; 
}

.value-card.is-active .card-content {
    opacity: 1;
    transform: translateY(0); 
}



.value-card h4 {
    font-size: 1.2rem; 
    color: var(--text-primary);
    letter-spacing: 0.05em;
    position: relative;
    z-index: 2;
    margin-bottom: 1rem;
    /* We removed the padding-bottom and border-bottom from here */
}

/* 2. The 50% Matte Gold Architectural Line */
.value-card h4::after {
    content: '';
    display: block;
    width: 45%; /* Cuts the line length exactly in half */
    height: 1px; /* The line thickness */
    background-color: #C89B3C; /* Your matte gold */
    margin-top: 0.75rem; /* The breathing room between text and line */
}

.value-card p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    max-width: 90%;
    position: relative;
    z-index: 2;
}

/* Responsive fallback for tablets/mobile */
@media (max-width: 768px) {
    .values-container {
        flex-direction: column;
        gap: 3rem;
    }
    
    .values-left {
        position: relative; /* Stops the clipping by allowing it to scroll away */
        top: 0; 
        flex: auto;
        text-align: center; /* Centers the content */
    }
    
.values-left .section-title {
        text-align: center !important; /* The !important tag overpowers the inline HTML style */
    }

    .values-intro {
        margin: 0 auto; /* Ensures the intro paragraph centers perfectly */
    }

    .values-right {
        align-items: center; /* Centers the cards instead of pinning them to the right */
    }

    .value-card {
        width: 100%; /* Makes the cards take up the full screen width on mobile */
        padding: 1.5rem; /* Tighter mobile padding */
        min-height: 260px; /* Reduced mobile height proportionally */
    }
}