/*------------------------------------*\
    Homepage - Contact Block
\*------------------------------------*/
.page-template-homepage-refresh {
    --homepage-contact-wave-blend: #194886;
    /* Height of the CTA top wave that overlaps the bottom of this contact
       section. Shared so the contact can reserve clearance for it. */
    --cta-top-wave: calc(100vw * 192 / 1920);
}

/* Reserve room at the bottom of the contact section so its content clears the
   CTA wave peaks that rise up into it (the CTA is pulled up by --cta-top-wave). */
.page-template-homepage-refresh .homepage-contact.section-padding {
    padding-bottom: calc(var(--hr-section-gap) + var(--cta-top-wave));
}

.homepage-contact {
    position: relative;
    z-index: 1;
    background: linear-gradient(129deg,#0063D8 20.84%, #194886 91.72%);
    color: #fff;
}

/* Top wave: clip the contact top edge into the wave shape and pull it up so it
   overlaps the section before it. The contact gradient forms the wave peaks and
   the previous section shows through the troughs, so the wave blends into the
   contact background with no color to match. Replaces the old gradient-filled
   .contact-wave SVG that floated over the section. */
.homepage-contact.section-padding {
    --contact-top-wave: calc(100vw * 188 / 1920);
    margin-top: calc(-1 * var(--contact-top-wave));
    padding-top: calc(var(--contact-top-wave) + var(--hr-section-gap, var(--section-margins)));
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201920%20188'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1747.29%20186.837C1625.81%20178.061%201504.32%20119.025%201382.84%2093.2572C1261.36%2067.9676%201139.87%2075.9469%201018.39%2097.4859C896.91%20119.025%20775.426%20152.531%20653.944%20152.772C532.461%20152.533%20410.978%20119.026%20289.496%2093.2572C176.852%2069.8058%2064.2209%2053.0138%200%2044.1425L0%20188L1920%20188L1920%20170.79C1867.31%20182.85%201807.3%20191.173%201747.29%20186.837Z'%20fill='%23000'/%3E%3C/svg%3E") top / 100% var(--contact-top-wave) no-repeat,
        linear-gradient(#000, #000) bottom / 100% calc(100% - var(--contact-top-wave) + 1px) no-repeat;
    -webkit-mask-composite: source-over;
    mask:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201920%20188'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1747.29%20186.837C1625.81%20178.061%201504.32%20119.025%201382.84%2093.2572C1261.36%2067.9676%201139.87%2075.9469%201018.39%2097.4859C896.91%20119.025%20775.426%20152.531%20653.944%20152.772C532.461%20152.533%20410.978%20119.026%20289.496%2093.2572C176.852%2069.8058%2064.2209%2053.0138%200%2044.1425L0%20188L1920%20188L1920%20170.79C1867.31%20182.85%201807.3%20191.173%201747.29%20186.837Z'%20fill='%23000'/%3E%3C/svg%3E") top / 100% var(--contact-top-wave) no-repeat,
        linear-gradient(#000, #000) bottom / 100% calc(100% - var(--contact-top-wave) + 1px) no-repeat;
    mask-composite: add;
}

.homepage-contact .container {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* Form block (intro + form card) */
.homepage-contact__form-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 100%;
    max-width: 966px;
    margin: 0 auto;
}

.homepage-contact__intro {
    color: #fff;
    text-align: center;
    max-width: 615px;
    width: 100%;
}

.homepage-contact__intro > * {
    color: #fff;
}

.homepage-contact__intro p,
.homepage-contact__intro h1,
.homepage-contact__intro h2,
.homepage-contact__intro h3,
.homepage-contact__intro h4,
.homepage-contact__intro h5,
.homepage-contact__intro h6 {
    line-height: 1.25;
    color: #fff;
}

.homepage-contact__intro p:last-child,
.homepage-contact__intro > *:last-child {
    margin-bottom: 0;
}

.homepage-contact__intro h2 {
    font-size: 32px;
    font-weight: 700;
}

.homepage-contact__intro h3 {
    font-size: 22px;
    font-weight: 700;
}

.homepage-contact__intro p {
    font-size: 18px;
}

/* White form card */
.homepage-contact__form {
    width: 100%;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 20px 0 rgba(0, 99, 216, 0.2);
    padding: 35px 25px;
    color: #194886;
}

/* CF7 form styling overrides */
.homepage-contact__form .wpcf7-form p {
    margin: 0 0 18px;
}

.homepage-contact__form .wpcf7-form label,
.homepage-contact__form .wpcf7-form .wpcf7-form-control-wrap > label {
    display: block;
    color: #0063D8;
    font-weight: 700;
    font-size: 16px;
    text-transform: capitalize;
    margin-bottom: 6px;
    line-height: 1.25;
}

.homepage-contact__form .wpcf7-form input[type="text"],
.homepage-contact__form .wpcf7-form input[type="email"],
.homepage-contact__form .wpcf7-form input[type="tel"],
.homepage-contact__form .wpcf7-form input[type="url"],
.homepage-contact__form .wpcf7-form input[type="number"],
.homepage-contact__form .wpcf7-form select,
.homepage-contact__form .wpcf7-form textarea {
    width: 100%;
    background: #f5f5f5;
    border: none;
    border-radius: 4px;
    padding: 18px 20px;
    font-size: 16px;
    color: #194886;
    font-family: "Rubik", sans-serif;
    font-weight: 500;
    line-height: 1.25;
}

.homepage-contact__form .wpcf7-form input::placeholder,
.homepage-contact__form .wpcf7-form textarea::placeholder {
    color: #194886;
    opacity: 1;
    text-transform: capitalize;
}

.homepage-contact__form .wpcf7-form input:focus,
.homepage-contact__form .wpcf7-form select:focus,
.homepage-contact__form .wpcf7-form textarea:focus {
    outline: 2px solid #0063D8;
    outline-offset: 1px;
}

/* Submit button - dark blue pill, full width */
.homepage-contact__form .wpcf7-form .wpcf7-submit,
.homepage-contact__form .wpcf7-form input[type="submit"],
.homepage-contact__form .wpcf7-form button[type="submit"] {
    display: block;
    width: 100%;
    background: #194886;
    color: #fff;
    font-family: "Rubik", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.25;
    text-align: center;
    text-transform: capitalize;
    padding: 18px 45px;
    border: none;
    border-radius: 200px;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 10px;
}

.homepage-contact__form .wpcf7-form .wpcf7-submit:hover,
.homepage-contact__form .wpcf7-form input[type="submit"]:hover,
.homepage-contact__form .wpcf7-form button[type="submit"]:hover {
    background: #0063D8;
}


.homepage-contact__form .wpcf7-response-output {
    color: #194886;
    border-color: #194886;
    margin: 18px 0 0;
}

/* Bottom block */
.homepage-contact__bottom-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 100%;
    max-width: 832px;
    margin: 0 auto;
    padding-top: 20px;
}

.homepage-contact__bottom-content {
    color: #fff;
    text-align: center;
    width: 100%;
}

.homepage-contact__bottom-content > * {
    color: #fff;
}

.homepage-contact__bottom-content p,
.homepage-contact__bottom-content h1,
.homepage-contact__bottom-content h2,
.homepage-contact__bottom-content h3,
.homepage-contact__bottom-content h4,
.homepage-contact__bottom-content h5,
.homepage-contact__bottom-content h6 {
    margin: 0 0 12px;
    line-height: 1.25;
    color: #fff;
}

.homepage-contact__bottom-content h2 {
    font-size: 32px;
    font-weight: 700;
}

.homepage-contact__bottom-content h3 {
    font-size: 22px;
    font-weight: 700;
}

.homepage-contact__bottom-content p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.homepage-contact__bottom-content p:last-child,
.homepage-contact__bottom-content > *:last-child {
    margin-bottom: 0;
}

/* Bottom CTA - white pill with dark blue text */
.homepage-contact__bottom-cta {
    margin-top: 10px;
}

.homepage-contact__bottom-cta .btn,
.homepage-contact__bottom-cta a {
    background: #fff;
    color: #194886;
    border-radius: 200px;
    padding: 16px 70px 16px 45px;
    font-weight: 700;
    text-transform: capitalize;
    font-size: 18px;
    line-height: 1.25;
}
h3 + h2 {
    padding-top: 0;
}
h3:has(+ h2) {
    padding-bottom: 0;
    margin-bottom: 0 !important;
    ;
}
.contact-pattern {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    z-index: -1;
}
.homepage-contact__bottom-cta .btn:hover,
.homepage-contact__bottom-cta a:hover {
    background: #f5f5f5;
    color: #194886;
}

/* Desktop */
@media (min-width: 768px) {
    .homepage-contact__form {
        padding: 65px 67px;
    }


    .homepage-contact__form .wpcf7-form p {
        margin: 0;
    }

    /* Submit button row spans both columns */
    .homepage-contact__form .wpcf7-form p:has(.wpcf7-submit),
    .homepage-contact__form .wpcf7-form p:has(input[type="submit"]),
    .homepage-contact__form .wpcf7-form p:has(button[type="submit"]) {
        grid-column: 1 / -1;
        margin-top: 22px;
    }

    .homepage-contact__form .wpcf7-form .wpcf7-response-output {
        grid-column: 1 / -1;
    }

    .homepage-contact__form .wpcf7-form label,
    .homepage-contact__form .wpcf7-form .wpcf7-form-control-wrap > label {
        font-size: 20px;
    }

    .homepage-contact__form .wpcf7-form input[type="text"],
    .homepage-contact__form .wpcf7-form input[type="email"],
    .homepage-contact__form .wpcf7-form input[type="tel"],
    .homepage-contact__form .wpcf7-form input[type="url"],
    .homepage-contact__form .wpcf7-form input[type="number"],
    .homepage-contact__form .wpcf7-form select,
    .homepage-contact__form .wpcf7-form textarea {
        font-size: 18px;
        padding: 20px 20px;
    }

    .homepage-contact__form .wpcf7-form .wpcf7-submit,
    .homepage-contact__form .wpcf7-form input[type="submit"],
    .homepage-contact__form .wpcf7-form button[type="submit"] {
        font-size: 20px;
        padding: 18px 45px;
    }

    .homepage-contact__intro h2 {
        font-size: 40px;
    }

    .homepage-contact__intro h3 {
        font-size: 26px;
    }

    .homepage-contact__bottom-content h2 {
        font-size: 40px;
    }

    .homepage-contact__bottom-content h3 {
        font-size: 26px;
    }

    .homepage-contact__bottom-content p {
        font-size: 18px;
    }
}

@media (min-width: 1200px) {
    .homepage-contact .container {
        gap: 80px;
    }

    .homepage-contact__intro h2 {
        font-size: 48px;
    }

    .homepage-contact__intro h3 {
        font-size: 28px;
    }

    .homepage-contact__bottom-content h2 {
        font-size: 48px;
    }

    .homepage-contact__bottom-content h3 {
        font-size: 28px;
    }
}