/********************
   SECTION LABELS
*********************/
.page-hero {
    padding-top: 100px;
}
/* remaing code in the custom.css */

/*********************
       ABOUT
*********************/
h1{
    color: var(--text);
}
p{
    color:var(--muted) ;
}
p strong{
    color: var(--text);
}
/* remaing code in the custom.css */

/*********************
     TIMELINE
**********************/
.timeline{ 
    display:flex; 
    flex-direction:column; 
}
.tl-item{ 
    display:grid; 
    grid-template-columns: 130px 1fr; 
    gap: 26px; padding: 22px 0; 
    border-bottom: 1px solid var(--border); 
}
.tl-item:last-child{ 
    border-bottom:none; 
}
.tl-period{ 
    font-family: var(--font-mono); 
    font-size: 13px; 
    color: var(--accent-dim); 
    padding-top: 2px; 
}
.tl-role{ 
    color: var(--text);
    font-family: var(--font-display); 
    font-size: 18px; 
    font-weight: 600; 
    margin-bottom: 6px; 
}
.tl-role span{ 
    color: var(--muted); 
    font-family: var(--font-body); 
    font-weight: 400; 
    font-size: 14.5px; 
}
.tl-desc{ 
    color: var(--muted); 
    font-size: 14.5px; 
    max-width: 560px; 
}

/* ---------- VALUES ---------- */
.values-grid{ 
    display:grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 22px; 
}
.value-card{ 
    background: var(--surface); 
    border: 1px solid var(--border);
    border-radius: var(--radius); 
    padding: 24px; 
    transition: border-color .25s ease, transform .25s ease; 
}
.value-card:hover{ 
    border-color: var(--accent-dim); 
    transform: translateY(-3px); 
}
.value-num{ 
    font-family: var(--font-mono); 
    font-size: 12px; 
    color: var(--accent); 
    margin-bottom: 10px; 
}
.value-title{ 
    color: var(--text);
    font-family: var(--font-display); 
    font-size: 17px; 
    font-weight: 600; 
    margin-bottom: 8px; 
}
.value-desc{ 
    color: var(--muted); 
    font-size: 14px; 
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px){
    .about-grid{ 
        grid-template-columns: 1fr; 
    }
    .values-grid{ 
        grid-template-columns: 1fr; 
    }
    .tl-item{ 
        grid-template-columns: 1fr; gap: 6px; 
    }
    .nav-links{ 
        position:fixed; 
        top:64px; 
        left:0; 
        right:0; 
        background: var(--bg); 
        border-bottom:1px solid var(--border);
        flex-direction:column; 
        padding: 20px 32px; 
        gap: 18px; 
        transform: translateY(-120%); 
        transition: transform .25s ease; 
    }
    .nav-links.open{ 
        transform: translateY(0); 
    }
    .menu-btn{ 
        display:block; 
    }
    .nav-cta{ 
        display:none; 
    }
}
@media (max-width: 480px){
    .wrap{ 
        padding: 0 20px; 
    }
    nav{ 
        padding: 16px 20px; 
    }
    .page-hero{ 
        margin-top: 20px;
        padding: 52px 0 12px; 
    }
}