/* ==================================================
   SQUEAK – CONTACT
================================================== */

.squeak-contact-main {
    background:#0b0d0e;
    color:#f2efe8;
    position:relative;
    overflow:hidden}

.squeak-contact-main-inner {
    width:min(92%,1500px);
    min-height:650px;
    margin:auto;
    display:grid;
    grid-template-columns:33% 17% 50%;
    align-items:center}

.squeak-contact-main .copy {
    padding:60px 35px 60px 0}

.squeak-contact-main h1,.squeak-contact-main .form h2,.squeak-contact-remote h2,.squeak-contact-remote h3,.squeak-contact-location h2 {
    font-family:'Barlow Condensed',sans-serif!important;
    font-weight:800!important;
    text-transform:uppercase!important}

.squeak-contact-main h1 {
    font-size:64px!important;
    line-height:.92!important;
    letter-spacing:-.02em!important;
    color:#f2efe8!important;
    margin:0 0 24px!important}

.squeak-contact-main h1 span,.squeak-contact-remote h2 span {
    color:#e51d24}

.squeak-contact-main .copy>p {
    font:400 14px/1.55 'Barlow',sans-serif;
    color:#c8c9c7}

.squeak-contact-main .copy ul,.squeak-contact-location ul {
    list-style:none;
    padding:0;
    margin:26px 0;
    display:grid;
    gap:14px;
    font:400 15px/1.3 'Barlow',sans-serif}

.squeak-contact-main .tagline {
    margin-top:30px;
    padding-top:22px;
    border-top:2px solid #e51d24;
    font:700 17px/1.25 'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    max-width:330px}

.squeak-contact-main .visual {
    height:100%;
    display:flex;
    align-items:flex-end;
    justify-content:center}

.squeak-contact-main .visual img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block}


.squeak-contact-main a {
color: #f2efe8!important;
}
.squeak-contact-main a:hover {
color: #e51d24!important;
text-decoration: underline !important;
}

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

.squeak-contact-main .form {
    position: relative;

    margin: 45px 0;
    padding: 34px;

    background: rgba(14, 16, 18, .94);

    border: 1px solid rgba(237, 28, 36, .85);

    box-sizing: border-box;
}

.squeak-contact-main .form > h2 {
    margin: 0 0 24px !important;
    padding: 0 !important;

    font-family: "Barlow Condensed", sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -.01em !important;
    text-transform: uppercase !important;

    color: #f2efe8 !important;
}


/* ==================================================
   FORMINATOR – BASE
================================================== */

.squeak-contact-main .form .forminator-ui {
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    font-family: "Barlow", sans-serif !important;
}

.squeak-contact-main .form .forminator-ui *,
.squeak-contact-main .form .forminator-ui *::before,
.squeak-contact-main .form .forminator-ui *::after {
    box-sizing: border-box;
}


/* ==================================================
   FORMINATOR – ROWS / COLUMNS
================================================== */

.squeak-contact-main .form .forminator-row {
    margin-right: -7px !important;
    margin-bottom: 22px !important;
    margin-left: -7px !important;
}

.squeak-contact-main .form .forminator-col {
    padding-right: 7px !important;
    padding-left: 7px !important;
}

.squeak-contact-main .form .forminator-field {
    margin: 0 !important;
}

/* Gelijke verticale afstand tussen alle Forminator-rijen */
.squeak-contact-main .form .forminator-row {
    margin-top: 0 !important;
    margin-bottom: 22px !important;
}

.squeak-contact-main .form .forminator-row:last-child {
    margin-bottom: 0 !important;
}

/* Forminator mag zelf geen extra verticale ruimte
   op kolommen of velden toevoegen */
.squeak-contact-main .form .forminator-col,
.squeak-contact-main .form .forminator-field {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ==================================================
   FORMINATOR – LABELS
================================================== */

.squeak-contact-main .form .forminator-label {
    display: block !important;

    margin: 0 0 7px !important;

    font-family: "Barlow Condensed", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;

    color: #f2efe8 !important;
}

.squeak-contact-main .form .forminator-required {
    color: #ed1c24 !important;
}


/* ==================================================
   FORMINATOR – INPUTS
================================================== */

.squeak-contact-main .form input[type="text"],
.squeak-contact-main .form input[type="email"],
.squeak-contact-main .form input[type="tel"],
.squeak-contact-main .form input[type="number"],
.squeak-contact-main .form input[type="url"],
.squeak-contact-main .form .forminator-input {
    width: 100% !important;
    min-height: 52px !important;

    padding: 14px 16px !important;

    background: rgba(255, 255, 255, .025) !important;

    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font-family: "Barlow", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;

    color: #f2efe8 !important;

    transition:
        border-color .2s ease,
        background-color .2s ease,
        box-shadow .2s ease;
}


/* ==================================================
   FORMINATOR – TEXTAREA
================================================== */

.squeak-contact-main .form textarea,
.squeak-contact-main .form .forminator-textarea {
    width: 100% !important;
    min-height: 150px !important;

    padding: 14px 16px !important;

    resize: vertical;

    background: rgba(255, 255, 255, .025) !important;

    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font-family: "Barlow", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;

    color: #f2efe8 !important;

    transition:
        border-color .2s ease,
        background-color .2s ease,
        box-shadow .2s ease;
}


/* ==================================================
   FORMINATOR – PLACEHOLDERS
================================================== */

.squeak-contact-main .form input::placeholder,
.squeak-contact-main .form textarea::placeholder {
    color: rgba(242, 239, 232, .42) !important;
    opacity: 1 !important;
}


/* ==================================================
   FORMINATOR – FOCUS
================================================== */

.squeak-contact-main .form input:focus,
.squeak-contact-main .form textarea:focus,
.squeak-contact-main .form .forminator-input:focus,
.squeak-contact-main .form .forminator-textarea:focus {
    outline: none !important;

    background: rgba(255, 255, 255, .045) !important;

    border-color: #ed1c24 !important;

    box-shadow: 0 0 0 1px #ed1c24 !important;
}


/* ==================================================
   FORMINATOR – SELECT
================================================== */

.squeak-contact-main .form .select2-container {
    width: 100% !important;
}

.squeak-contact-main .form
.select2-container
.select2-selection--single {
    display: flex !important;
    align-items: center !important;

    min-height: 52px !important;

    padding: 0 16px !important;

    background: rgba(255, 255, 255, .025) !important;

    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}

.squeak-contact-main .form
.select2-container
.select2-selection--single
.select2-selection__rendered {
    width: 100% !important;

    padding: 0 !important;

    font-family: "Barlow", sans-serif !important;
    font-size: 14px !important;
    line-height: 50px !important;

    color: #f2efe8 !important;
}

.squeak-contact-main .form
.select2-container
.select2-selection--single
.select2-selection__arrow {
    top: 50% !important;
    right: 12px !important;

    transform: translateY(-50%) !important;
}


/* ==================================================
   FORMINATOR – CHECKBOX
================================================== */

.squeak-contact-main .form .forminator-checkbox {
    display: flex !important;
    align-items: flex-start !important;

    gap: 10px !important;
}

.squeak-contact-main .form .forminator-checkbox-box {
    flex: 0 0 auto;

    width: 20px !important;
    height: 20px !important;

    margin-top: 1px !important;

    background: transparent !important;

    border: 1px solid rgba(255, 255, 255, .45) !important;
    border-radius: 0 !important;
}

.squeak-contact-main .form
.forminator-checkbox
input:checked + .forminator-checkbox-box {
    background: #ed1c24 !important;
    border-color: #ed1c24 !important;
}

.squeak-contact-main .form .forminator-checkbox-label {
    font-family: "Barlow", sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;

    color: rgba(242, 239, 232, .78) !important;
}

.squeak-contact-main .form .forminator-checkbox-label a {
    color: #ed1c24 !important;
    text-decoration: underline !important;
}


/* ==================================================
   FORMINATOR – RADIO
================================================== */

.squeak-contact-main .form .forminator-radio {
    font-family: "Barlow", sans-serif !important;
    font-size: 13px !important;

    color: rgba(242, 239, 232, .82) !important;
}

.squeak-contact-main .form .forminator-radio-bullet {
    border-color: rgba(255, 255, 255, .45) !important;
}

.squeak-contact-main .form
.forminator-radio
input:checked + .forminator-radio-bullet {
    border-color: #ed1c24 !important;
}


/* ==================================================
   FORMINATOR – CAPTCHA
================================================== */

.squeak-contact-main .form .forminator-field-captcha {
    margin-top: 5px !important;
}


/* ==================================================
   FORMINATOR – SUBMIT
================================================== */

.squeak-contact-main .form .forminator-row-last {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
}

.squeak-contact-main .form .forminator-button-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 210px !important;
    min-height: 50px !important;

    padding: 16px 24px !important;

    background: #ed1c24 !important;

    border: 1px solid #ed1c24 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font-family: "Barlow Condensed", sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;

    color: #ffffff !important;

    cursor: pointer !important;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease !important;
}

.squeak-contact-main .form .forminator-button-submit:hover {
    background: #f3262e !important;
    border-color: #f3262e !important;

    transform: translateY(-1px);
}


/* ==================================================
   FORMINATOR – ERRORS
================================================== */

.squeak-contact-main .form .forminator-error-message {
    margin-top: 7px !important;

    background: transparent !important;

    font-family: "Barlow", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;

    color: #ff6469 !important;
}

.squeak-contact-main .form .forminator-has_error .forminator-input,
.squeak-contact-main .form .forminator-has_error .forminator-textarea,
.squeak-contact-main .form
.forminator-has_error
.select2-selection--single {
    border-color: #ed1c24 !important;
}


/* ==================================================
   FORMINATOR – RESPONSE MESSAGE
================================================== */

.squeak-contact-main .form .forminator-response-message {
    margin: 0 0 20px !important;
    padding: 18px 20px !important;

    background: rgba(237, 28, 36, .08) !important;

    border: 1px solid rgba(237, 28, 36, .8) !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font-family: "Barlow", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;

    color: #f2efe8 !important;
}

.squeak-contact-main .form .forminator-response-message p {
    margin: 0 !important;
    color: inherit !important;
}


/* ==================================================
   CONTACT FORM – TABLET
================================================== */

@media (max-width: 980px) {

    .squeak-contact-main .form {
        margin-top: 20px;
        padding: 28px;
    }
}


/* ==================================================
   CONTACT FORM – MOBILE
================================================== */

@media (max-width: 767px) {

    .squeak-contact-main .form {
        padding: 24px 20px;
    }

    .squeak-contact-main .form > h2 {
        font-size: 25px !important;
    }

    .squeak-contact-main .form .forminator-row {
        margin-right: 0 !important;
        margin-bottom: 13px !important;
        margin-left: 0 !important;
    }

    .squeak-contact-main .form .forminator-col {
        width: 100% !important;

        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .squeak-contact-main .form .forminator-button-submit {
        width: 100% !important;
        min-width: 0 !important;
    }
}

.squeak-contact-remote {
    background:#f1eee7;
    color:#171819;
    padding:48px 0}

.squeak-contact-remote .inner {
    width:min(92%,1500px);
    margin:auto;
    display:grid;
    grid-template-columns:32% 27% 41%;
    align-items:center}

.squeak-contact-remote .copy>span {
    font:700 14px/1 'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    color:#e51d24}

.squeak-contact-remote h2 {
    font-size:48px!important;
    line-height:.94!important;
    color:#171819!important;
    margin:14px 0 20px!important}

.squeak-contact-remote .copy>p {
    font:400 14px/1.55 'Barlow',sans-serif;
    color:#3b3c3d}

.squeak-contact-remote .copy ul {
    list-style:none;
    padding:0;
    margin:22px 0;
    display:grid;
    gap:12px;
    font:500 14px/1.3 'Barlow',sans-serif}

.squeak-contact-remote .copy li {
    color:#252627}

.squeak-contact-remote .copy a,.squeak-contact-location .reachable a {
    display:inline-flex;
    padding:16px 22px;
    background:#101214;
    color:#fff!important;
    text-decoration:none!important;
    font:700 13px/1 'Barlow Condensed',sans-serif;
    text-transform:uppercase}

.squeak-contact-remote .image img {
    width:100%;
    height:auto;
    display:block}

.squeak-contact-remote .steps {
    padding-left:35px;
    border-left:1px dashed #aaa}

.squeak-contact-remote h3 {
    font-size:25px!important;
    margin:0 0 18px!important}

.squeak-contact-remote .steps article {
    display:grid;
    grid-template-columns:38px 40px 1fr;
    gap:14px;
    align-items:start;
    margin:0 0 17px}

.squeak-contact-remote .steps article>strong {
    width:30px;
    height:30px;
    border:2px solid #e51d24;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#e51d24;
    font:700 14px/1 'Barlow',sans-serif}

.squeak-contact-remote .steps img {
    width:32px;
    height:32px;
    object-fit:contain}

.squeak-contact-remote .steps h4 {
    font:700 14px/1.1 'Barlow',sans-serif;
    margin:0 0 5px}

.squeak-contact-remote .steps p {
    font:400 12px/1.4 'Barlow',sans-serif;
    margin:0;
    color:#444}

.squeak-contact-location {
    position:relative;
    background:#0b0d0e;
    color:#f2efe8;
    min-height:330px;
    overflow:hidden}

.squeak-contact-location:before {
    content:"";
    position:absolute;
    inset:0 0 0 52%;
    background-image:linear-gradient(90deg,#0b0d0e 0%,rgba(11,13,14,.25) 30%),var(--squeak-contact-map);
    background-size:cover;
    background-position:center}

.squeak-contact-location .inner {
    position:relative;
    z-index:2;
    width:min(92%,1500px);
    margin:auto;
    display:grid;
    grid-template-columns:27% 26% 47%;
    min-height:330px;
    align-items:center}

.squeak-contact-location h2 {
    font-size:23px!important;
    color:#e51d24!important;
    margin:0 0 18px!important}

.squeak-contact-location ul {
    margin:0}

.squeak-contact-location .social {
    display:flex;
    gap:14px;
    margin-top:22px}

.squeak-contact-location .social a {
    width:44px;
    height:44px;
    border:1px solid #fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff!important;
    text-decoration:none!important}

.squeak-contact-location .reachable {
    padding:0 38px;
    border-left:1px solid rgba(255,255,255,.22)}

.squeak-contact-location .reachable p {
    font:400 14px/1.55 'Barlow',sans-serif;
    color:#c8c9c7;
    margin-bottom:24px}

.squeak-contact-location .reachable a {
    background:transparent;
    border:1px solid rgba(255,255,255,.5)}

.squeak-contact-location .map-label {
    justify-self:end;
    background:#0b0d0e;
    padding:14px 18px;
    display:flex;
    flex-direction:column;
    min-width:220px}

.squeak-contact-location .map-label strong {
    font:700 14px/1.2 'Barlow',sans-serif}

.squeak-contact-location .map-label span {
    font:400 12px/1.3 'Barlow',sans-serif;
    color:#ddd}

@media(max-width:980px) {
    .squeak-contact-main-inner {
    grid-template-columns:1fr}

.squeak-contact-main .visual {
    min-height:300px}

.squeak-contact-main .form {
    margin-top:20px}

.squeak-contact-remote .inner {
    grid-template-columns:1fr;
    gap:30px}

.squeak-contact-remote .steps {
    border-left:0;
    padding-left:0}

.squeak-contact-location:before {
    inset:50% 0 0 0}

.squeak-contact-location .inner {
    grid-template-columns:1fr;
    padding:40px 0;
    gap:30px}

.squeak-contact-location .reachable {
    border-left:0;
    padding:0}

.squeak-contact-location .map-label {
    justify-self:start;
    margin-top:140px}
}

@media(max-width:640px) {
    .squeak-contact-main h1 {
    font-size:50px!important}

.squeak-contact-main .form {
    padding:20px}

.squeak-contact-remote h2 {
    font-size:40px!important}
}