body.contact-drawer-open {
    overflow: hidden;
    /* position: fixed;
    top: 0;
    left: 0;
    right: 0; */
    width: 100%;
}
.contact-drawer {
    --drawer-accent: #276d36;
    border-left-color: #111;
}
.contact-drawer-shell {
    position: fixed;
    z-index: 10000;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear .48s;
}

.contact-drawer-shell.is-open {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.contact-drawer-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    opacity: 0;
    background: rgba(0, 0, 0, .34);
    backdrop-filter: blur(2px);
    transition: opacity .35s ease;
}

.contact-drawer-shell.is-open .contact-drawer-backdrop {
    opacity: 1;
}

.contact-drawer {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    right: 0;
    width: min(600px, calc(100vw - 48px));
    height: 100%;
    height: 100dvh;
    padding: 0 36px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: #000;
    background: #fff;
    font-family: 'Urbanist', Arial, sans-serif;
    border-left: 1px solid #d9d9d9;
    box-shadow: -24px 0 70px rgba(0, 0, 0, .15);
    transform: translateX(100%);
    transition: transform .48s cubic-bezier(.22, 1, .36, 1);
}

.contact-drawer > * {
    flex-shrink: 0;
}

.contact-drawer__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 20px;
}

.contact-drawer__footer img {
    display: block;
    width: 100px;
    height: auto;
}

.contact-drawer__footer a {
    color: #333;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
}

.contact-drawer__footer a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Keep the added contact footer comfortably within shorter desktop windows. */
@media (min-width: 601px) and (max-height: 800px) {
    .contact-drawer { padding-bottom: 16px; }
    .contact-drawer .contact-drawer__topline { min-height: 48px; }
    .contact-drawer .contact-drawer__intro { padding-bottom: 16px; }
    .contact-drawer .contact-drawer__intro h2 { font-size: 40px; margin-bottom: 8px; }
    .contact-drawer .contact-drawer__form { row-gap: 12px; }
    .contact-drawer .contact-drawer__field textarea { height: 64px; min-height: 64px; }
    .contact-drawer .contact-drawer__footer { padding-top: 16px; }
}

.contact-drawer-shell.is-open .contact-drawer {
    transform: translateX(0);
}

.contact-drawer__topline {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    min-height: 60px;
    align-items: center;
    justify-content: flex-end;
    border-bottom: 0;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
}

.contact-drawer__close {
    position: relative;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid #bdbdbd;
    border-color: transparent;
    border-radius: 50%;
    color: #000;
    background: transparent;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.contact-drawer__close:hover {
    border-color: #000;
    color: #fff;
    background: #000;
}

.contact-drawer__close span {
    position: absolute;
    width: 18px;
    height: 1px;
    background: currentColor;
}

.contact-drawer__close span:first-child { transform: rotate(45deg); }
.contact-drawer__close span:last-child { transform: rotate(-45deg); }

.contact-drawer__intro {
    padding: 0 0 24px;
}

.contact-drawer__intro h2 {
    max-width: 570px;
    margin: 0 0 12px;
    color: #000;
    font-family: 'Urbanist', Arial, sans-serif;
    font-size: 44px;
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: 1;
    text-wrap: balance;
}

.contact-drawer__intro > p:not(.contact-drawer__required-note) {
    max-width: 570px;
    margin: 0;
    color: #555;
    font-size: 15px;
    line-height: 1.5;
    text-wrap: pretty;
}

.contact-drawer__intro > p a {
    color: #000;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.contact-drawer__required-note {
    margin: 12px 0 0 !important;
    color: #767676 !important;
    font-size: 12px !important;
    letter-spacing: .02em;
}

.contact-drawer__required-note span {
    color: #17762a;
}

.contact-drawer__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px 16px;
    padding-bottom: 0;
}

.contact-drawer__field {
    min-width: 0;
}

.contact-drawer__field--full {
    grid-column: 1 / -1;
}

.contact-drawer__field label {
    display: block;
    margin: 0 0 6px;
    color: #111;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: color 160ms ease;
    line-height: 1.4;
}

.contact-drawer__field label sup {
    top: 0;
    color: #17762a;
    font-size: inherit;
}

.contact-drawer__field label > span {
    margin-left: 4px;
    color: #777;
    font-weight: 400;
    text-transform: none;
    font-size: 11px;
    letter-spacing: 0;
}

.contact-drawer__field input,
.contact-drawer__field select,
.contact-drawer__field textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #b4b4b4;
    border-radius: 8px;
    color: #111;
    background-color: #fff;
    font-family: 'Urbanist', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    transition: border-color .2s ease, background-color .2s ease;
    transition: border-color 160ms ease, box-shadow 160ms ease;
    scroll-margin-block: 64px 24px;
}

.contact-drawer__field select {
    padding-right: 48px;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #555 50%), linear-gradient(135deg, #555 50%, transparent 50%);
    background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
}

.contact-drawer__field textarea {
    height: 80px;
    min-height: 80px;
    resize: vertical;
}

.contact-drawer__field input::placeholder,
.contact-drawer__field textarea::placeholder {
    color: #777;
    opacity: 1;
}

.contact-drawer__field input:hover,
.contact-drawer__field select:hover,
.contact-drawer__field textarea:hover,
.contact-drawer__field input:focus,
.contact-drawer__field select:focus,
.contact-drawer__field textarea:focus {
    border-color: #6e6e6e;
    background-color: #fff;
}

.contact-drawer__actions {
    display: flex;
    align-items: center;
    margin-top: 4px;
}

.contact-drawer__submit {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: 1px solid #000;
    border-radius: 100px;
    color: #fff;
    background: #000;
    font-family: 'Urbanist', Arial, sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
    position: relative;
    min-width: 220px;
    letter-spacing: .025em;
    text-transform: none;
    font-size: 15px;
}

.contact-drawer__submit-arrow {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    color: #000;
    background: #78db89;
    font-size: 17px;
    transition: transform .2s ease, color .2s ease, background-color .2s ease;
}

.contact-drawer__submit:hover {
    color: #000;
    background: #fff;
}

.contact-drawer__submit:hover .contact-drawer__submit-arrow {
    color: #fff;
    background: #000;
    transform: rotate(45deg);
}
.contact-drawer__submit-label {
    display: inline-block;
    transition: transform 220ms cubic-bezier(.2, .7, .2, 1);
}
.contact-drawer__hover-arrow {
    position: absolute;
    top: calc(50% - 12px);
    left: calc(50% + 52px);
    width: 24px;
    height: 24px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-6px);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.2, .7, .2, 1);
}
.contact-drawer__submit:is(:hover, :focus-visible) .contact-drawer__submit-label {
    transform: translateX(-14px);
}
.contact-drawer__submit:is(:hover, :focus-visible) .contact-drawer__hover-arrow {
    opacity: 1;
    transform: translateX(4px);
}
@media (max-width: 600px) {
    .contact-drawer {
        width: 100%;
        padding: 0 20px 24px;
        border-left: 0;
    }

    .contact-drawer__topline {
        min-height: 60px;
    }

    .contact-drawer__intro {
        padding: 0 0 24px;
    }

    .contact-drawer__intro h2 {
        font-size: 38px;
    }

    .contact-drawer__intro > p:not(.contact-drawer__required-note) {
        font-size: 16px;
    }

    .contact-drawer__form {
        grid-template-columns: 1fr;
        gap: 18px;
        padding-bottom: 0;
    }

    .contact-drawer__field input,
    .contact-drawer__field select,
    .contact-drawer__field textarea {
        font-size: 16px;
        min-height: 48px;
    }

    .contact-drawer__field--full {
        grid-column: auto;
    }

    .contact-drawer__actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .contact-drawer__submit {
        width: 100%;
    }

}

@media (prefers-reduced-motion: reduce) {
    .contact-drawer,
    .contact-drawer-backdrop {
        transition-duration: .01ms;
    }
}

/** WP additions below: CF7 form states, site-wide + contact-drawer specific (no static-mockup equivalent). **/
/* Site-wide: disable the submit button while any CF7 form on the site is
   submitting, so a user can't double-submit while waiting for a response. */
.wpcf7-form.submitting .wpcf7-submit {
    pointer-events: none;
    opacity: 0.7;
}

/* Site-wide: every custom form on this site shows its own success box, so hide
   CF7's generic response message on success to avoid showing it twice. It still
   shows normally for real errors (spam/invalid/failed). */
.wpcf7-form.sent .wpcf7-response-output {
    display: none;
}

/* Spinner overlays the button itself instead of pushing layout below it. */
.contact-drawer__actions .wpcf7-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.contact-drawer__form .wpcf7-response-output {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    background: #f7f7f7;
}

/* Success state: CF7 adds the "sent" class to the form on a successful submission,
   at which point the success message replaces the form fields. */
.contact-drawer__success {
    display: none;
}
.contact-drawer__form.sent .contact-drawer__field,
.contact-drawer__form.sent .contact-drawer__actions {
    display: none;
}
.contact-drawer__form.sent .contact-drawer__success {
    display: block;
}