/* ==========================================================================
   Wholesale (B2B enquiry). Depends on tokens from redesign.css and the
   .kxp-doc shell from prose.css.
   ========================================================================== */

.kxp-ws__lead { margin-top: 1.5rem; }

/* ── Perks ──────────────────────────────────────────────────────────────────
   Three claims, no icons: emoji read as clip-art next to this typography, and
   these aren't a sequence — a rule per item is enough structure. */
.kxp-ws__perks {
    list-style: none;
    margin: 0 0 clamp(3.5rem, 7vw, 5.5rem);
    padding: 0;
    display: grid;
    gap: clamp(1.5rem, 3vw, 3rem);
    grid-template-columns: 1fr;
}
@media (min-width: 760px) {
    .kxp-ws__perks { grid-template-columns: repeat(3, 1fr); }
}
.kxp-ws__perks li {
    border-top: 1px solid var(--kxp-grey-300);
    padding-top: 1.2rem;
}
.kxp-ws__perk-title {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-1);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}
.kxp-ws__perk-text { color: var(--kxp-grey-700); font-size: var(--kxp-step-0); }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.kxp-ws__grid {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 900px) {
    .kxp-ws__grid { grid-template-columns: 0.85fr 1.15fr; }
    .kxp-ws__intro { position: sticky; top: 110px; }
}

.kxp-ws__contact {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    border-top: 1px solid var(--kxp-grey-100);
}
.kxp-ws__contact li {
    position: relative;
    padding: 0.9rem 0 0.9rem 1.4rem;
    border-bottom: 1px solid var(--kxp-grey-100);
    font-size: var(--kxp-step--1);
    color: var(--kxp-grey-700);
}
.kxp-ws__contact li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.45rem;
    width: 6px;
    height: 1px;
    background: var(--kxp-accent);
}

/* ── Form ───────────────────────────────────────────────────────────────── */
.kxp-ws__form-wrap {
    background: var(--kxp-grey-50);
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.kxp-ws__field + .kxp-ws__field,
.kxp-ws__row + .kxp-ws__field,
.kxp-ws__field + .kxp-ws__row { margin-top: 1.1rem; }

.kxp-ws__row {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 520px) {
    .kxp-ws__row { grid-template-columns: 1fr 1fr; }
    .kxp-ws__row .kxp-ws__field + .kxp-ws__field { margin-top: 0; }
}

.kxp-ws__field label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: var(--kxp-step--1);
    font-weight: 600;
    color: var(--kxp-grey-700);
}
.kxp-ws__field input,
.kxp-ws__field select,
.kxp-ws__field textarea {
    width: 100%;
    padding: 0.85em 1em;
    background: var(--kxp-white);
    border: 1px solid var(--kxp-grey-300);
    border-radius: 0;
    font-family: var(--kxp-font-body);
    font-size: var(--kxp-step-0);
    color: var(--kxp-black);
    transition: border-color 0.3s var(--kxp-ease);
}
.kxp-ws__field textarea { resize: vertical; min-height: 110px; }
.kxp-ws__field input::placeholder,
.kxp-ws__field textarea::placeholder { color: var(--kxp-grey-500); }
.kxp-ws__field input:focus,
.kxp-ws__field select:focus,
.kxp-ws__field textarea:focus { outline: none; border-color: var(--kxp-black); }
.kxp-ws__field select { cursor: pointer; }

.kxp-ws__error {
    margin-top: 0.9rem;
    font-size: var(--kxp-step--1);
    color: var(--kxp-accent);
}
.kxp-ws__submit {
    width: 100%;
    justify-content: center;
    margin-top: 1.5rem;
}
.kxp-ws__submit:disabled { background: var(--kxp-grey-300); cursor: not-allowed; }
.kxp-ws__submit:disabled:hover { background: var(--kxp-grey-300); transform: none; }

/* ── Success ────────────────────────────────────────────────────────────── */
.kxp-ws__success { text-align: center; padding-block: clamp(2rem, 5vw, 3.5rem); }
.kxp-ws__success-title {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-2);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--kxp-accent);
    margin-bottom: 0.6rem;
}
.kxp-ws__success-text { color: var(--kxp-grey-700); margin-bottom: 1.8rem; }
.kxp-ws__again {
    padding: 0.85em 1.8em;
    border: 1px solid var(--kxp-grey-300);
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step--1);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: border-color 0.3s var(--kxp-ease), color 0.3s var(--kxp-ease);
}
.kxp-ws__again:hover { border-color: var(--kxp-accent); color: var(--kxp-accent); }