/* =====================================================
VISAC CONTACT PAGE
===================================================== */


.contact-page {

background:#ffffff;

color:#050505;

}



.contact-container {

width:min(1400px,90%);

margin:0 auto;

}








/* =====================================================
LABEL
===================================================== */


.contact-label {

display:flex;

align-items:center;

gap:12px;

font-size:12px;

letter-spacing:.28em;

text-transform:uppercase;

color:#666;

margin-bottom:35px;

}



.contact-label span {

width:8px;

height:8px;

background:#0f9f6e;

border-radius:50%;

}







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


.contact-hero {

padding:130px 0 120px;

}



.contact-hero h1 {

font-size:clamp(60px,7vw,110px);

font-weight:500;

line-height:.95;

letter-spacing:-.065em;

max-width:1200px;

margin-bottom:45px;

}



.contact-hero p {

font-size:22px;

line-height:1.7;

color:#555;

max-width:950px;

}









/* =====================================================
AUDIENCE
===================================================== */


.contact-audience {

padding:120px 0;

background:#f5f5f3;

}



.contact-audience h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

margin-bottom:70px;

}



.audience-grid {

display:grid;

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

gap:30px;

}



.audience-grid > div {

background:white;

border:1px solid #ddd;

padding:40px;

min-height:300px;

transition:.25s ease;

}



.audience-grid > div:hover {

border-color:#000;

}



.audience-grid h3 {

font-size:28px;

font-weight:500;

letter-spacing:-.03em;

margin-bottom:20px;

}



.audience-grid p {

font-size:17px;

line-height:1.7;

color:#666;

}









/* =====================================================
PLATFORM CARDS
===================================================== */


.contact-platform {

padding:140px 0;

}



.contact-platform h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

margin-bottom:70px;

}



.platform-grid {

display:grid;

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

gap:30px;

}



.platform-grid > div {

border:1px solid #e5e5e5;

padding:45px;

min-height:360px;

transition:.25s ease;

}



.platform-grid > div:hover {

border-color:#000;

}



.platform-grid h3 {

font-size:42px;

font-weight:500;

letter-spacing:-.04em;

margin-bottom:15px;

}



.platform-grid strong {

display:block;

font-size:12px;

letter-spacing:.2em;

text-transform:uppercase;

margin-bottom:30px;

}



.platform-grid p {

font-size:17px;

line-height:1.7;

color:#666;

}



.platform-grid a {

display:inline-block;

margin-top:35px;

font-size:12px;

letter-spacing:.2em;

text-transform:uppercase;

color:#050505;

}

/* =====================================================
CONTACT FORM
===================================================== */


.contact-form-section {

padding:140px 0;

background:#050505;

color:white;

}



.form-grid {

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:start;

}



.form-intro h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

line-height:1;

margin-bottom:35px;

}



.form-intro p {

font-size:21px;

line-height:1.7;

color:#aaa;

max-width:520px;

}





.contact-form-wrapper {

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

padding:45px;

}





.contact-form {

display:flex;

flex-direction:column;

gap:25px;

}





.form-row {

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

}



.form-field {

display:flex;

flex-direction:column;

gap:10px;

}



.form-field label {

font-size:11px;

letter-spacing:.2em;

text-transform:uppercase;

color:#aaa;

}



.form-field input,
.form-field select,
.form-field textarea {


background:transparent;

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

padding:18px;

color:white;

font-family:inherit;

font-size:16px;

}



.form-field textarea {

resize:vertical;

}



.form-field input::placeholder,
.form-field textarea::placeholder {

color:#777;

}



.form-field select {

color:#aaa;

}



.contact-form .btn {

margin-top:20px;

align-self:flex-start;

}









/* =====================================================
DIRECT CONTACT
===================================================== */


.contact-direct {

padding:130px 0;

background:#f5f5f3;

}



.direct-grid {

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

}



.direct-grid h2 {

font-size:64px;

font-weight:500;

letter-spacing:-.05em;

}



.direct-grid p {

font-size:22px;

line-height:1.7;

color:#555;

}



.direct-grid a {

display:inline-block;

margin-top:30px;

font-size:22px;

color:#050505;

text-decoration:none;

}








/* =====================================================
PARTNERSHIP
===================================================== */


.contact-partners {

padding:140px 0;

text-align:center;

}



.contact-partners h2 {

font-size:72px;

font-weight:500;

letter-spacing:-.06em;

line-height:1;

}



.contact-partners p {

font-size:22px;

line-height:1.7;

color:#555;

max-width:850px;

margin:35px auto 50px;

}



.contact-partners a {

font-size:13px;

letter-spacing:.2em;

text-transform:uppercase;

color:#050505;

}








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


@media(max-width:1100px){


.audience-grid {

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

}



.platform-grid {

grid-template-columns:1fr;

}



.form-grid,
.direct-grid {

grid-template-columns:1fr;

}



}





@media(max-width:700px){


.contact-container {

width:92%;

}



.contact-hero {

padding:80px 0;

}



.contact-hero h1 {

font-size:48px;

}



.contact-hero p {

font-size:18px;

}



.contact-audience h2,
.contact-platform h2,
.form-intro h2,
.direct-grid h2 {

font-size:42px;

}



.audience-grid {

grid-template-columns:1fr;

}



.form-grid {

gap:50px;

}



.contact-form-wrapper {

padding:30px;

}



.form-row {

grid-template-columns:1fr;

}



.platform-grid > div,
.audience-grid > div {

padding:30px;

}



.contact-partners h2 {

font-size:42px;

}



.contact-partners p {

font-size:18px;

}


}