.about-section {
    position: sticky;
    top:-50vh;
    width: 100%;
    min-height: 100vh;
    padding: 40px 4% 140px 4%;
    box-sizing: border-box;
    z-index: 2; 
    
    box-shadow: 0 -20px 40px rgba(76, 59, 31, 0.4);
    background:

        radial-gradient(
            circle at top,
            #f8eed7 0%,
            #e8d4af 200vh
        );
    
    display: flex;
    flex-direction: column;
    align-items: center;

    z-index: 2;
}

.about-section::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    
    background-image: url('/static/images/layout/paper_texture.jpg');
    background-repeat: repeat;
    background-size: auto; 
    
    mix-blend-mode: multiply; 
    opacity: 0.3; 
    pointer-events: none; 
    z-index: 1; 
}

.about-header,
.team-grid {
    position: relative;
    z-index: 2; 
}

/* HEADER AREA */
.about-header {
    text-align: center;
    margin-bottom: 60px;
    max-width: 700px;
}

.about-title {
    font-size: 2.4rem;
    color: var(--dark);
    letter-spacing: 2px;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.title-deco {
    color: var(--light); 
    font-size: 1.5rem;
}

.about-subtitle {
    font-size: 1.1rem;
    color: var(--dark);
    margin: 0;
    font-weight: 500;
}

/* TEAM GRID CONTAINER */
.team-grid {
    display: flex;
    flex-direction: row;
    justify-content: center; 
    align-items: stretch;
    width: 100%;
    max-width: 1400px;
    gap: 40px 30px;
    flex-wrap: wrap; 
    
    position: relative;
    z-index: 2;
}

/* CARD OVERRIDES*/
.team-card {
    flex: 1 1 22%;
    min-width: 220px; 
    max-width: 260px;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}

/* PORTRAIT PICTURE FRAMING */
.avatar-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; 
    margin-bottom: 20px;
    border-radius: 50%;
    overflow: visible; 
    position: relative;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: 
        transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        filter 0.4s ease;
}

.avatar-wrapper::before {
    content: '';
    position: absolute;
    inset: -5px; 
    border-radius: 50%;
    
    background: radial-gradient(circle,rgba(255, 202, 117, 0.4) 0%, rgba(220, 175, 86, 0) 70%);
    opacity: 0;
    transform: scale(0.8);
    z-index: -1;
    
    transition: 
        opacity 0.4s ease, 
        transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.team-card:hover .avatar-wrapper {
    transform: translateY(-12px); 
}

.team-card:hover .avatar-img {
    transform: scale(1.12); 
    filter: drop-shadow(0 8px 16px rgba(44, 26, 4, 0.25));
}

.team-card:hover .avatar-wrapper::before {
    opacity: 1;
    transform: scale(1.15);
}

/* TYPOGRAPHY AND LABELS */
.member-name {
    font-size: 1.4rem;
    color: var(--light);
    margin: 0 0 4px 0;
    letter-spacing: 1px;
}

.member-role {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dark);
    letter-spacing: 1.5px;
    margin: 0 0 15px 0;
    text-transform: uppercase;
}

.member-bio {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--light);
    margin: 0 0 20px 0;
    font-weight: 400;
    flex-grow: 1;
}

/* DECORATIVE SYMBOL CORES */
.member-icon {
    font-size: 1.2rem;
    font-weight: bold;
    flex-shrink: 0;
}

/* Individual Color Classes for Icons */
.font-green  { color: #879952; }
.font-blue { color: #8fc3d3; }
.font-yellow { color: #c79f4c; }
.font-red  { color: #8a1a2b; }
.font-black { color: #22201e; }
.font-turq { color: #7cc7ba; }
.font-purple { color: #764e8c; }


/* ==========================================================================
   MOBILE ABOUT LAYOUT ADAPTER
   ========================================================================== */
@media (max-width: 800px) {
    .team-grid {
        gap: 30px 15px; /* Tighter gaps on tablets/phones */
    }
    .team-card {
        flex: 1 1 45%; /* Drops into a clean 2x2x2x1 grid on tablets */
    }
    .about-section {
        top: 0 !important;
        margin-top: 0 !important;
        position: relative !important;
        height: auto !important;
        min-height: 100vh !important;
    }
}

@media (max-width: 500px) {
    .team-card {
        flex: 1 1 100%; /* Drops into a single vertical stack on mobile screens */
    }
    .about-section {
        top: 0 !important;
        margin-top: 0 !important;
        position: relative !important;
        height: auto !important;
        min-height: 100vh !important;
    }
}