/* ==========================================================================
VISAC TECHNOLOGIES
CAREERS PAGE SYSTEM
========================================================================== */


/* ==========================================================================
FOUNDATION
========================================================================== */


.careers-page {

    background:#ffffff;
    color:#111111;

}


.careers-container {

    max-width:1600px;

    margin:0 auto;

    padding:0 56px;

}





/* ==========================================================================
HERO
========================================================================== */


.careers-hero {

    padding:140px 0 170px;

}


.careers-label {

    display:flex;

    align-items:center;

    gap:12px;

    font-family:var(--font-mono);

    font-size:11px;

    letter-spacing:.25em;

    text-transform:uppercase;

    color:#777;

    margin-bottom:35px;

}


.careers-label span {

    width:7px;

    height:7px;

    background:#0f9f6e;

    border-radius:50%;

}



.careers-hero h1 {

    max-width:1000px;

    font-size:clamp(56px,6vw,92px);

    line-height:1;

    letter-spacing:-.065em;

    font-weight:400;

}



.careers-hero p {

    margin-top:40px;

    max-width:700px;

    font-size:21px;

    line-height:1.7;

    color:#555;

}




.careers-actions {

    display:flex;

    gap:16px;

    margin-top:55px;

}



.careers-button {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:52px;

    padding:0 34px;

    font-family:var(--font-mono);

    font-size:11px;

    letter-spacing:.18em;

    text-transform:uppercase;

    border:1px solid #000;

    transition:.25s ease;

}



.careers-button.dark {

    background:#000;

    color:#fff;

}


.careers-button.dark:hover {

    background:white;

    color:black;

}



.careers-button.light {

    background:white;

    color:black;

}





/* ==========================================================================
MISSION
========================================================================== */


.careers-mission {

    background:#050505;

    color:white;

    padding:150px 0;

}



.section-title {

    max-width:900px;

}



.section-title h2 {

    font-size:64px;

    letter-spacing:-.05em;

    line-height:1;

}



.section-title p {

    margin-top:30px;

    font-size:20px;

    line-height:1.7;

    color:rgba(255,255,255,.65);

}





.mission-grid {

    margin-top:80px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

}



.mission-card {

    padding:45px;

    border:1px solid rgba(255,255,255,.15);

    background:#0c0c0c;

}



.mission-card span {

    font-family:var(--font-mono);

    color:#0f9f6e;

    font-size:13px;

}



.mission-card h3 {

    margin-top:35px;

    font-size:28px;

}



.mission-card p {

    margin-top:20px;

    color:rgba(255,255,255,.65);

    line-height:1.6;

}





/* ==========================================================================
EXPERTISE
========================================================================== */


.careers-expertise {

    padding:150px 0;

}



.careers-expertise h2 {

    max-width:950px;

    font-size:60px;

    letter-spacing:-.05em;

    line-height:1.05;

}



.expertise-grid {

    margin-top:80px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}



.expertise-grid div {

    padding:40px;

    border:1px solid #dedede;

    font-size:22px;

}





/* ==========================================================================
CULTURE
========================================================================== */


.careers-culture {

    background:#f5f5f3;

    padding:140px 0;

}



.careers-culture h2 {

    font-size:64px;

    letter-spacing:-.05em;

}



.culture-grid {

    margin-top:70px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.culture-grid div {

    background:white;

    padding:45px;

    border:1px solid #ddd;

}



.culture-grid h3 {

    font-size:26px;

}



.culture-grid p {

    margin-top:20px;

    color:#555;

    line-height:1.7;

}





/* ==========================================================================
POSITIONS CTA
========================================================================== */


.careers-positions {

    padding:170px 0;

    text-align:center;

}



.careers-positions h2 {

    font-size:72px;

    letter-spacing:-.06em;

}



.careers-positions p {

    max-width:700px;

    margin:35px auto 55px;

    font-size:21px;

    line-height:1.7;

    color:#555;

}





/* ==========================================================================
RESPONSIVE
========================================================================== */


@media(max-width:1100px){


.careers-container {

    padding:0 35px;

}


.mission-grid,
.expertise-grid,
.culture-grid {

    grid-template-columns:1fr;

}


}



@media(max-width:700px){


.careers-container {

    padding:0 20px;

}


.careers-hero {

    padding:90px 0 100px;

}


.careers-hero h1 {

    font-size:48px;

}



.careers-actions {

    flex-direction:column;

}



.section-title h2,
.careers-expertise h2,
.careers-culture h2 {

    font-size:42px;

}



.careers-positions h2 {

    font-size:42px;

}


.mission-card,
.culture-grid div,
.expertise-grid div {

    padding:30px;

}


}