.contact-form {
    padding-top:    var(--pad-y-alt);
    padding-bottom: var(--pad-y-alt);
    padding-left:   var(--pad-x);
    padding-right:  var(--pad-x);
    background: var(--color-light);
}

.contact-form__inner {
    width: 100%;
    max-width: var(--site-max-w);
    margin: 0 auto;
}

/* ── Header (eyebrow + heading, left-aligned above the columns) ── */
.contact-form__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 640px;
    margin-bottom: 40px;
}

.contact-form__eyebrow {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: var(--color-accent);
}

.contact-form__heading {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 48px;
    line-height: 54px;
    color: var(--color-dark);
}

/* ── Two columns: intro/details (left) + form (right) ─────────── */
.contact-form__row {
    display: flex;
    align-items: flex-start;
    gap: 20px 80px;
}

.contact-form__left {
    flex: 0 0 34%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    gap: 32px;
}

.contact-form__right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-form__body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

/* ── Contact details box ──────────────────────────────────────── */
.contact-form__details {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px;
    background: var(--color-greige-light);
}

.contact-form__details-heading {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-dark);
}

.contact-form__details-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
}

.contact-form__detail {
    position: relative;
    padding-left: 18px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
}

.contact-form__detail::before {
    content: "\2022"; /* • */
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

/* ── Form column ──────────────────────────────────────────────── */
.contact-form__form-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-dark);
}

/* ── WPForms overrides (scoped to this section) ───────────────── */
.contact-form__form .wpforms-container {
    margin: 0 !important;
}

.contact-form__form .wpforms-container .wpforms-field-html {
    margin-top: 20px;
    margin-bottom: 10px;
}

.contact-form__form .wpforms-container .wpforms-field-layout-rows {
    display: grid;
    gap: 12px;
    width: 100%;
}

.contact-form__form .wpforms-container .wpforms-layout-row {
    gap: 12px;
}

.contact-form__form div.wpforms-container .wpforms-form .wpforms-field-layout .wpforms-layout-row {
    margin-right: 0;
    margin-left: 0;
}

.contact-form__form div.wpforms-container .wpforms-form .wpforms-field-layout .wpforms-layout-column {
    padding: 22px 24px;
    background: #EBE8E2;
}

.contact-form__form .wpforms-container .wpforms-field {
    padding: 0;
    display: flex;
}

/* label↔input gap on every field except the last (the message keeps its own spacing) */
.contact-form__form .wpforms-container .wpforms-field:not(:last-child) {
    gap: 5px;
}

.contact-form__form .wpforms-container .wpforms-field-textarea {
    flex-direction: column;
    margin-top: 12px;
    gap: 0 !important;
}

.contact-form__form .wpforms-container .wpforms-field-label {
    margin: 0;
    flex: 0 0 35%;
    justify-content: flex-start;
    align-items: center;
    display: flex;
}

.contact-form__form .wpforms-container .wpforms-field input,
.contact-form__form .wpforms-container .wpforms-field textarea,
.contact-form__form .wpforms-container .wpforms-field select {
    flex: 0 0 65%;
    width: 65%;
    max-width: 65%;
    border: none;
    background: var(--color-greige-light);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

/* Message textarea spans full width (overrides the shared 65% input sizing). */
.contact-form__form .wpforms-container .wpforms-field textarea {
    flex: none;
    width: 100%;
    max-width: 100%;
}

/* Textarea field builds its own greige box: label holds the top/side padding,
   the textarea holds the side/bottom padding. */
.contact-form__form .wpforms-container .wpforms-field-textarea .wpforms-field-label {
    background: #EBE8E2;
    padding: 22px 24px 10px;
}

.contact-form__form .wpforms-container .wpforms-field-textarea textarea {
    padding: 0 24px 14px;
}

/* Hide the number input spinner arrows */
.contact-form__form .wpforms-container input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.contact-form__form .wpforms-container input[type="number"]::-webkit-inner-spin-button,
.contact-form__form .wpforms-container input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.contact-form__form .wpforms-container .wpforms-field input {
    text-align: end;
}

.contact-form__form .wpforms-container .wpforms-field input:focus,
.contact-form__form .wpforms-container .wpforms-field textarea:focus,
.contact-form__form .wpforms-container .wpforms-field select:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Generic baseline for the injected WP form (CF7 / WPForms). These selectors
   are intentionally broad — they'll be tightened to the real markup once the
   form shortcode is in place. */
.contact-form__form input[type="text"],
.contact-form__form input[type="email"],
.contact-form__form input[type="tel"],
.contact-form__form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 18px 20px;
    background: var(--color-greige-light);
    border: none;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 26px;
    color: var(--color-dark);
}

.contact-form__form textarea {
    min-height: 140px;
    resize: vertical;
}

.contact-form__form input::placeholder,
.contact-form__form textarea::placeholder {
    color: var(--color-dark);
    opacity: 0.55;
}

.contact-form__form input:focus,
.contact-form__form textarea:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

/* Submit button → terracotta filled, matching .btn--primary */
.contact-form__form input[type="submit"],
.contact-form__form button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 24px;
    background: var(--color-accent);
    color: var(--color-light);
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: var(--transition);
}

.contact-form__form input[type="submit"]:hover,
.contact-form__form button[type="submit"]:hover {
    filter: brightness(0.92);
}

.contact-form__form .wpforms-container .wpforms-submit {
    display: flex;
    height: auto;
    padding: 14px 32px;
    justify-content: center;
    align-items: center;
    background-color: var(--color-accent) !important; /* #884F3C */
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    font-family: var(--font-body); /* DM Sans */
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: var(--transition);
}

.contact-form__form .wpforms-container .wpforms-submit:hover {
    filter: brightness(0.92);
}

@media (max-width: 1366px) {
    .contact-form__heading {
        font-size: 40px;
        line-height: 46px;
    }
}

@media (max-width: 1024px) {
    .contact-form__row {
        flex-direction: column;
        gap: 40px;
    }

    .contact-form__left,
    .contact-form__right {
        flex: none;
        width: 100%;
    }

    .contact-form__heading {
        font-size: 32px;
        line-height: 38px;
    }
}

@media (max-width: 767px) {
    .contact-form {
        overflow: hidden;
    }

    /* Stack each field's label above a full-width input. */
    .contact-form__form .wpforms-container .wpforms-field {
        flex-direction: column;
    }

    .contact-form__form .wpforms-container .wpforms-field input {
        width: 100%;
        max-width: 100%;
        text-align: left;
        padding: 0;
    }

    .contact-form__form div.wpforms-container .wpforms-form .wpforms-field-layout .wpforms-layout-column {
        padding: 12px;
    }

    .contact-form__form .wpforms-container .wpforms-field-textarea .wpforms-field-label {
        padding: 12px 12px 5px;
    }

    .contact-form__form .wpforms-container .wpforms-field-textarea textarea {
        padding: 0 12px 12px;
    }

    /* Keep name/email side by side on mobile instead of WPForms stacking them. */
    .contact-form__form div.wpforms-container .wpforms-form .wpforms-field-layout .wpforms-layout-row {
        display: flex;
        flex-direction: row !important;
    }
}