.contact-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: var(--section-heading-gap);
    padding-bottom: var(--section-edge-space);
}

.form-field {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}

.form-field > div {
    min-width: 0;
}

.form-field + .form-field {
    margin-top: 28px;
}

.form-field label {
    padding-top: 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;
    cursor: pointer;
}

.required-label,
.optional-label {
    display: inline-flex;
    min-height: 20px;
    align-items: center;
    justify-content: center;
    margin-left: 9px;
    padding: 2px 7px;
    border: 1px solid #c6d1d5;
    background: #fff;
    box-shadow: 0 1px 2px rgb(63 78 86 / 8%);
    color: #71899a;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .06em;
    vertical-align: .1em;
}

.required-label {
    border-color: #607f91;
    background: #607f91;
    color: #fff;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid #c6d1d5;
    border-radius: 0;
    outline: 2px solid transparent;
    outline-offset: 2px;
    background: #fff;
    box-shadow: 0 1px 3px rgb(63 78 86 / 8%);
    font-size: 15px;
    line-height: 1.7;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.contact-form input {
    min-height: 56px;
}

.contact-form textarea {
    display: block;
    height: 288.6px;
    min-height: 160px;
    resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #8da3ae;
    opacity: 1;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #71899a;
    background: #fff;
    box-shadow: 0 0 0 3px rgb(113 137 154 / 18%), 0 6px 16px rgb(63 78 86 / 10%);
}

.contact-form :is(input, textarea)[aria-invalid="true"] {
    border-color: #a34d42;
}

.form-field__error {
    margin: 8px 0 0;
    color: #a34d42;
    font-size: 12px;
    line-height: 1.7;
}

.form-field__help {
    margin: 8px 0 0;
    color: #667984;
    font-size: 12px;
    line-height: 1.7;
}

.form-field__error + .form-field__help {
    margin-top: 4px;
}

.form-error-summary,
.form-notice {
    width: 100%;
    margin: var(--section-heading-gap) 0 0;
    padding: 18px 20px;
    border: 1px solid #c9948d;
    border-radius: 8px;
    background: #fff8f7;
    box-shadow: 0 4px 14px rgb(125 56 47 / 8%);
    color: #7d382f;
    font-size: 13px;
    line-height: 1.8;
}

.form-error-summary + :is(.contact-form, .contact-confirmation),
.form-notice + .contact-form {
    margin-top: 20px;
}

.form-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form__privacy {
    margin: 24px 0 0;
}

.contact-form__privacy a {
    display: inline-block;
    color: #496a7e;
    text-decoration: underline;
}

@media (hover: hover) {
    .contact-form__privacy a:hover {
        color: #71899a;
    }
}

.contact-form__button {
    width: 280px;
    min-height: 52px;
    gap: 9px;
    margin: 42px auto 0;
    border-color: #496a7e;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 14%))
        left / 0 100% no-repeat,
        #496a7e;
    box-shadow: 0 3px 8px rgb(63 78 86 / 14%),
        inset 0 0 0 1px rgb(255 255 255 / 0%);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background-size .28s cubic-bezier(.22, 1, .36, 1),
        border-color .2s ease, box-shadow .2s ease, transform .16s ease;
}

.button.button--outline-pulse.contact-form__button {
    --button-pulse-color: rgb(73 106 126 / 35%);
    --button-pulse-color-clear: rgb(73 106 126 / 0%);
    --button-pulse-size: 12px;
    --button-pulse-duration: .9s;

    border-color: #9fb1bc;
}

.contact-confirmation {
    width: 100%;
    margin: var(--section-heading-gap) 0 0;
    overflow: hidden;
    border: 1px solid #dde5e8;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgb(63 78 86 / 8%);
}

.contact-confirmation > div {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
}

.contact-confirmation > div + div {
    border-top: 1px solid #dde5e8;
}

.contact-confirmation dt,
.contact-confirmation dd {
    margin: 0;
    padding: 22px 24px;
    font-size: 14px;
    line-height: 1.9;
}

.contact-confirmation dt {
    background: #edf1f2;
    font-weight: 600;
}

.contact-confirmation dd {
    overflow-wrap: anywhere;
    background: #fff;
    white-space: normal;
}

.contact-submit {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 36px;
    padding-bottom: var(--section-edge-space);
}

.contact-submit__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    width: 100%;
    margin-top: 36px;
}

.contact-submit .contact-form__button {
    margin: 0;
}

.contact-message-card {
    width: min(712px, 100%);
    margin: var(--section-heading-gap) auto 0;
    padding: 44px 36px;
    border: 1px solid #dde5e8;
    border-radius: 8px;
    background: #f7f9fa;
    box-shadow: 0 8px 24px rgb(63 78 86 / 9%);
    text-align: center;
}

.contact-message-card h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: .04em;
}

.contact-message-card p {
    margin: 20px 0 0;
    font-size: 14px;
    line-height: 1.9;
}

.contact-message-card .contact-form__button {
    margin-top: 32px;
}

.contact-message-card__receipt {
    font-size: 12px !important;
}

.contact-form__response {
    margin: 12px 0 0;
}

.contact-form__privacy,
.contact-form__response {
    font-size: 12px;
    line-height: 1.7;
    text-align: center;
}

@media (hover: hover) {
    .button.button--outline-pulse.contact-form__button:hover {
        border-color: #8da3ae;
    }

    .contact-form__button:not(.button--outline-pulse):hover {
        border-color: #496a7e;
        background:
            linear-gradient(90deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 14%))
            left / 100% 100% no-repeat,
            #496a7e;
        box-shadow: 0 5px 14px rgb(63 78 86 / 18%),
            inset 0 0 0 1px rgb(255 255 255 / 18%);
        color: #fff;
        transform: none;
    }

    .contact-form :is(input, textarea):hover:not(:focus) {
        border-color: #8da3ae;
        box-shadow: 0 3px 8px rgb(63 78 86 / 10%);
    }
}

.contact-form__button:focus-visible {
    background-size: 100% 100%;
}

.contact-form__button:not(.button--outline-pulse):active {
    background:
        linear-gradient(90deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 9%))
        left / 100% 100% no-repeat,
        #405e70;
    box-shadow: inset 0 2px 5px rgb(23 42 56 / 24%);
    transform: scale(.99);
}

@media (min-width: 640px) and (max-width: 959.98px) {
    .form-field + .form-field {
        margin-top: 24px;
    }
}

@media (max-width: 639.98px) {
    .page-hero--contact h1 {
        font-size: clamp(28px, 8vw, 42px);
        letter-spacing: .04em;
    }

    .page-hero--contact h1 span {
        white-space: nowrap;
    }

    .form-field {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .form-field + .form-field {
        margin-top: 20px;
    }

    .form-field label {
        min-height: 28.5px;
        padding-top: 0;
    }

    .contact-form input,
    .contact-form textarea {
        padding: 15px 16px;
    }

    .contact-form input {
        min-height: 54px;
    }

    .contact-form textarea {
        height: 286.6px;
        min-height: 144px;
    }

    .contact-form__button {
        width: 100%;
    }

    .contact-confirmation > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-confirmation dt,
    .contact-confirmation dd {
        padding: 15px 16px;
    }

    .contact-confirmation dt {
        border-bottom: 1px solid #dde5e8;
    }

    .contact-submit__actions {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .contact-message-card {
        padding: 34px 18px;
    }

    .contact-message-card h3 {
        font-size: 20px;
    }
}