/* ==========================================================================
   Contact page — page-contact.php
   Copy comes from killapabloenergy.com/contact; the layout is ours: what we
   can help with on the left, the form on the right.
   ========================================================================== */

.kxp-ct__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
}
@media (min-width: 900px) {
    /* The form is the point of the page, so it takes the wider column. */
    .kxp-ct__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

.kxp-ct__side { display: grid; gap: 1rem; }
.kxp-ct__h { margin-bottom: 1.2rem; }

.kxp-ct__list { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.kxp-ct__list li { position: relative; padding-left: 1.3rem; color: var(--kxp-grey-700); }
.kxp-ct__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.45rem;
    height: 0.45rem;
    background: var(--kxp-accent);
    clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
.kxp-ct__note { margin-top: 1.2rem; font-size: var(--kxp-step--1); color: var(--kxp-grey-500); }

.kxp-ct__card,
.kxp-ct__formwrap {
    background: var(--kxp-grey-50);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}
.kxp-ct__card { display: grid; gap: 0.6rem; padding: clamp(1.25rem, 3vw, 1.75rem); }
.kxp-ct__card-title {
    font-family: var(--kxp-font-display);
    font-size: var(--kxp-step-0);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--kxp-black);
}
.kxp-ct__card p { font-size: var(--kxp-step--1); line-height: 1.6; color: var(--kxp-grey-700); }
.kxp-ct__link {
    justify-self: start;
    font-family: var(--kxp-font-display);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kxp-black);
    transition: color 0.25s var(--kxp-ease);
}
.kxp-ct__link span { display: inline-block; transition: transform 0.3s var(--kxp-ease); }
.kxp-ct__link:hover { color: var(--kxp-accent); }
.kxp-ct__link:hover span { transform: translateX(4px); }

/* ── Form ───────────────────────────────────────────────────────────────── */
.kxp-ct__formwrap { padding: clamp(1.5rem, 4vw, 2.5rem); }
.kxp-ct__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; }
@media (min-width: 600px) {
    .kxp-ct__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kxp-ct__field { display: block; margin: 0 0 1.1rem; }
.kxp-ct__field label {
    display: block;
    margin-bottom: 0.45rem;
    font-family: var(--kxp-font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kxp-grey-700);
}
.kxp-ct__req { color: var(--kxp-accent); }
.kxp-ct__field input,
.kxp-ct__field select,
.kxp-ct__field textarea {
    display: block;
    width: 100%;
    padding: 0.85em 1em;
    background: var(--kxp-white);
    border: 1px solid var(--kxp-grey-300);
    border-radius: 0;
    font: inherit;
    color: var(--kxp-black);
    transition: border-color 0.25s var(--kxp-ease), box-shadow 0.25s var(--kxp-ease);
}
.kxp-ct__field textarea { resize: vertical; min-height: 9rem; }
.kxp-ct__field input:hover,
.kxp-ct__field select:hover,
.kxp-ct__field textarea:hover { border-color: var(--kxp-grey-500); }
.kxp-ct__field input:focus,
.kxp-ct__field select:focus,
.kxp-ct__field textarea:focus {
    outline: none;
    border-color: var(--kxp-accent);
    box-shadow: inset 0 -3px 0 var(--kxp-accent);
}

.kxp-ct__actions { margin: 0.4rem 0 0; }
.kxp-ct__actions .kxp-cta { border: 0; cursor: pointer; font: inherit; }
.kxp-ct__actions .kxp-cta:disabled { opacity: 0.5; cursor: not-allowed; }

.kxp-ct__msg:empty { display: none; }
.kxp-ct__msg { margin-top: 1rem; font-size: var(--kxp-step--1); line-height: 1.5; }
.kxp-ct__msg--ok { color: #1e7b34; }
.kxp-ct__msg--err { color: var(--kxp-accent); }

.kxp-ct__privacy { margin-top: 1.2rem; font-size: var(--kxp-step--1); line-height: 1.5; color: var(--kxp-grey-500); }
.kxp-ct__privacy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.kxp-ct__privacy a:hover { color: var(--kxp-accent); }