.contact-form-section {
    background: #fff;
    color: var(--ink, #0D1821);
    padding: clamp(56px, 9vw, 80px) clamp(16px, 6vw, 80px);
}

.contact-form-title {
    text-align: center;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 800;
    margin: 0 0 clamp(18px, 3vw, 28px);
    color: var(--ink, #0D1821);
}

.dmc-form {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: clamp(14px, 1.8vw, 20px);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(13, 24, 33, .08);
    border-radius: 14px;
    padding: clamp(18px, 2.8vw, 32px);
    box-shadow: 0 14px 32px rgba(13, 24, 33, .08);
    font-size: 16px;
}

/* Fields */
.dmc-field label {
    display: block;
    font-weight: 700;
    color: var(--ink, #0D1821);
    margin-bottom: 6px;
    font-size: 1.17rem;
}

.dmc-field input,
.dmc-field textarea {
    width: 100%;
    font: inherit;
    color: #2a3540;
    background: rgba(13, 24, 33, .03);
    border: 1px solid rgba(13, 24, 33, .14);
    border-radius: 6px;
    padding: 12px 14px;
    outline: none;
    resize: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.dmc-field input:focus,
.dmc-field textarea:focus {
    border-color: var(--accent, #0471A6);
    box-shadow: 0 0 0 3px rgba(4, 113, 166, .15);
    background: #fff;
}

/* Honeypot */
.dmc-hide {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.dmc-button {
    appearance: none;
    border: 0;
    cursor: pointer;
    display: inline-block;
    align-self: start;
    margin-top: 6px;
    padding: 12px 22px;
    border-radius: 6px;
    font-weight: 800;
    letter-spacing: .02em;
    background: linear-gradient(135deg, var(--accent, #0471A6), #129fe0);
    color: #fff;
    box-shadow: 0 12px 26px rgba(4, 113, 166, .35), inset 0 0 0 1px rgba(255, 255, 255, .12);
    transition: transform .15s ease, box-shadow .25s ease, opacity .2s;
}

.dmc-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(4, 113, 166, .45);
}

.dmc-button:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Note / status text */
.dmc-note {
    margin: 6px 0 0;
    min-height: 1.2em;
    font-size: .95rem;
    color: #2a3540;
}

.dmc-note.is-success {
    color: #0a8a2a;
}

.dmc-note.is-error {
    color: #ba1a1a;
}

/* --- Contain form controls exactly inside their parent --- */

/* 1) Make sure form controls use border-box even if a reset is missing */
.dmc-form input,
.dmc-form textarea,
.dmc-form select,
.dmc-form button {
    box-sizing: border-box;
}

/* 2) Prevent grid/flex min-content overflow */
.dmc-form,
.dmc-field {
    min-width: 0;
    /* critical for grid/flex parents */
}

/* 3) Make controls fill the field—but never exceed it */
.dmc-field input,
.dmc-field textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    /* avoid browser default margins */
}

/* Optional: tame the focus outline so it doesn't appear wider */
.dmc-field input:focus,
.dmc-field textarea:focus {
    outline-offset: 2px;
    /* keep outline inside the flow */
}

/* If your fields sit in a grid, this helps alignment */
.dmc-form {
    display: grid;
    gap: 14px;
}

/* Ensure the field wrapper itself doesn’t add unexpected width */
.dmc-field {
    width: 100%;
    padding: 0;
    /* or your intended padding */
    border: 0;
    /* keep borders on the inputs instead */
}