/* ─────────────────────────────────────────────────────────────
   Forms

   Generic on purpose — the contact, acquisitions and careers
   forms are the same component with different field lists.
   ───────────────────────────────────────────────────────────── */

.jm-form-block__title {
    margin: 0 0 clamp(8px, 1vw, 12px);
    font-size: var(--fs-h2);
    font-weight: 300;
    line-height: 1.16;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.jm-form-block__intro {
    margin: 0 0 clamp(22px, 2.6vw, 32px);
    max-width: 52ch;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: 1.75;
}

/* ─── Outcome notice ───────────────────────────────────────────
   Rendered server-side so it survives with JS off, and placed in
   the reading order rather than floated in a corner.            */
.jm-form-notice {
    margin: 0 0 clamp(20px, 2.4vw, 28px);
    padding: 14px 18px;
    border-radius: 8px;
    font-size: var(--fs-small);
    line-height: 1.6;
}

.jm-form-notice--ok {
    background: rgba(64, 103, 118, 0.10);
    color: var(--primary-dark);
    box-shadow: inset 0 0 0 1px rgba(64, 103, 118, 0.30);
}

.jm-form-notice--error {
    background: rgba(168, 58, 48, 0.08);
    color: #8C3228;
    box-shadow: inset 0 0 0 1px rgba(168, 58, 48, 0.28);
}

/* ─── The honeypot ─────────────────────────────────────────────
   Moved off-screen rather than display:none — some bots skip
   anything that is not rendered, and the point is that they
   should fill it in.                                            */
.jm-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ─── Fields ───────────────────────────────────────────────── */
.jm-form__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(14px, 1.6vw, 20px);
}

@media (min-width: 620px) {
    .jm-form__grid { grid-template-columns: repeat(2, 1fr); }
    /* Full width by default; only fields marked half share a row. */
    .jm-field { grid-column: 1 / -1; }
    .jm-field--half { grid-column: span 1; }
}

.jm-field__label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
}

.jm-field__req {
    margin-left: 2px;
    color: var(--accent);
}

/* A hairline box, not a rounded pill. The site is built from square
   photographs and thin rules; the inputs should belong to it. */
.jm-field__input {
    display: block;
    width: 100%;
    padding: 13px 15px;
    border: 1px solid rgba(64, 103, 118, 0.34);
    border-radius: 6px;
    background: var(--bg-white);
    color: var(--text-primary);
    font-family: inherit;
    /* 1rem, deliberately: anything under 16px makes iOS Safari zoom the
       whole page the moment the field takes focus. */
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.jm-field__input::placeholder { color: var(--text-light); }

.jm-field__input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(104, 152, 168, 0.22);
}

.jm-field__input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

textarea.jm-field__input {
    resize: vertical;
    min-height: 130px;
}

.jm-field__input--select {
    appearance: none;
    /* The arrow is drawn rather than loaded — one fewer request, and it
       takes the brand colour without a second file to keep in step. */
    background-image: linear-gradient(45deg, transparent 50%, var(--primary) 50%),
                      linear-gradient(135deg, var(--primary) 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 42px;
}

/* ─── Radio groups ─────────────────────────────────────────── */
.jm-field__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.jm-choice {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    border: 1px solid rgba(64, 103, 118, 0.34);
    border-radius: 6px;
    background: var(--bg-white);
    font-size: var(--fs-small);
    cursor: pointer;
    transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.jm-choice input { accent-color: var(--primary); }

.jm-choice:has(input:checked) {
    border-color: var(--primary);
    background: rgba(104, 152, 168, 0.10);
}

.jm-choice:has(input:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ─── File fields ──────────────────────────────────────────────
   The native control is kept and driven by its own label rather
   than replaced: it stays keyboard-reachable, announces itself
   correctly and still works with the script absent.             */
.jm-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* Off-screen, not display:none — hidden inputs drop out of the tab
   order and stop being focusable, which would break keyboard use. */
.jm-file__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.jm-file__button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border: 1px solid rgba(64, 103, 118, 0.34);
    border-radius: 6px;
    background: var(--bg-white);
    color: var(--primary-dark);
    font-size: var(--fs-small);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .jm-file__button:hover {
        border-color: var(--primary);
        background: rgba(104, 152, 168, 0.10);
    }
}

/* The ring belongs on the label, since that is what the eye sees —
   the input it is bound to is off-screen. */
.jm-file__input:focus-visible + .jm-file__button {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.jm-file__list {
    margin: 0;
    flex: 1 1 12ch;
    min-width: 0;
    font-size: var(--fs-small);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.jm-file.is-invalid .jm-file__list { color: #8C3228; }
.jm-file.is-invalid .jm-file__button { border-color: rgba(168, 58, 48, 0.5); }

.jm-field__hint {
    margin: 7px 0 0;
    font-size: 12px;
    color: var(--text-light);
}

/* ─── Foot ─────────────────────────────────────────────────── */
.jm-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    margin-top: clamp(20px, 2.4vw, 28px);
}

.jm-form__submit:disabled {
    opacity: 0.6;
    cursor: progress;
}

.jm-form__required {
    margin: 0;
    font-size: 12px;
    color: var(--text-light);
}

.jm-form__legal {
    margin: var(--sp-4) 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-light);
}

.jm-form__legal a { color: var(--primary); }