/* ==========================
   VS QUOTE PAGE ONLY
========================== */


.vsq-page {
    background:#f8f8f6;
}


/* HERO */

.vsq-hero {
    background:#0b132b;
    background-image:
    linear-gradient(rgba(214,216,220,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(214,216,220,.05) 1px,transparent 1px);
    background-size:72px 72px;
}


.vsq-container {
    max-width:1200px;
    margin:auto;
    padding:75px 32px;
}


.vsq-kicker {
    font-family:'Space Mono',monospace;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:12px;
    color:#86a9d6;
}


.vsq-title {
    margin:14px 0 0;
    font-family:'Space Grotesk',sans-serif;
    font-size:48px;
    line-height:1.05;
    letter-spacing:-1px;
    color:white;
}


.vsq-subtitle {
    max-width:600px;
    margin-top:18px;
    font-size:18px;
    line-height:1.6;
    color:#c7cbd2;
}



/* CONTENT */

.vsq-layout {

    max-width:1200px;
    margin:auto;

    padding:64px 32px 96px;

    display:grid;

    grid-template-columns:
    minmax(0,2fr)
    minmax(280px,1fr);

    gap:40px;

    align-items:start;

}



/* FORM */

.vsq-form-card {

    background:white;

    border:1px solid #d6d8dc;

    border-radius:20px;

    padding:38px;

    box-shadow:
    0 10px 40px rgba(11,19,43,.07);

}



/* CF7 */

.vsq-form-card label {

    display:block;

    font-size:13px;

    font-weight:600;

    color:#0b132b;

    margin-bottom:18px;

}


.vsq-form-card input,
.vsq-form-card select,
.vsq-form-card textarea {


    width:100%;

    padding:14px 15px;

    margin-top:7px;

    border:1px solid #d6d8dc;

    border-radius:10px;

    font-size:15px;

    color:#0b132b;

    background:white;

    outline:none;

    box-sizing:border-box;

}


.vsq-form-card textarea {

    min-height:140px;

    resize:vertical;

}


.vsq-form-card input:focus,
.vsq-form-card select:focus,
.vsq-form-card textarea:focus {

    border-color:#3f6fa8;

    box-shadow:
    0 0 0 3px rgba(63,111,168,.16);

}



.vsq-form-card .wpcf7-submit {

    width:100%;

    background:#0b132b;

    color:white;

    border:none;

    padding:16px;

    border-radius:12px;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    margin-top:10px;

}


.vsq-form-card .wpcf7-submit:hover {

    background:#172344;

}




/* SIDEBAR */


.vsq-sidebar {

    display:flex;

    flex-direction:column;

    gap:18px;

}



.vsq-info-box {

    background:white;

    border:1px solid #d6d8dc;

    border-radius:18px;

    padding:28px;

}


.vsq-info-box h3 {

    margin:10px 0 0;

    font-family:'Space Grotesk',sans-serif;

    font-size:22px;

    color:#0b132b;

}


.vsq-info-box p {

    margin-top:12px;

    color:#4b5563;

    line-height:1.6;

}



.vsq-info-box ul {

    margin:18px 0 0;

    padding:0;

    list-style:none;

}


.vsq-info-box li {

    margin-bottom:12px;

    color:#4b5563;

    font-size:14px;

}


.vsq-info-box li:before {

    content:"✓";

    color:#3f6fa8;

    font-weight:bold;

    margin-right:10px;

}



.vsq-dark {

    background:#0b132b;

    border:none;

}


.vsq-dark h3 {

    color:white;

}


.vsq-dark p {

    color:#c7cbd2;

}



.vsq-label {

    font-family:'Space Mono',monospace;

    font-size:11px;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#86a9d6;

}




/* MOBILE */

@media(max-width:900px){

.vsq-layout {

    grid-template-columns:1fr;

}


.vsq-title {

    font-size:38px;

}


.vsq-container,
.vsq-layout {

    padding-left:20px;
    padding-right:20px;

}

}
/* CF7 two column layout */

.vsq-form-card .wpcf7-form {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}


/* Make full width fields */

.vsq-form-card .full-width,
.vsq-form-card textarea,
.vsq-form-card .wpcf7-textarea,
.vsq-form-card .wpcf7-submit,
.vsq-form-card .wpcf7-response-output {
    grid-column:1 / -1;
}


/* Labels should fill their grid cell */

.vsq-form-card label {
    margin:0;
}


/* Mobile */

@media(max-width:700px){

    .vsq-form-card .wpcf7-form {
        grid-template-columns:1fr;
    }

}