/* ============================================================
   contact.css
   Scoped to the Contact page via .ContactPage.
   ============================================================ */

@font-face {
    font-family: 'Keskiyon Lumisade';
    src: url('../fonts/KeskiyonLumisade.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.ContactPage {
    --paper-ink: #17161A;
    --paper-rule: rgba(56, 37, 87, .18);
    --display: 'Keskiyon Lumisade', 'Haettenschweiler', 'Arial Narrow', sans-serif;
    --label: 'IBM Plex Sans', 'Segoe UI', sans-serif;
}

.InnerContent:has(.ContactPage) {
    padding: 0 !important;
    gap: 0 !important;
}

.ContactPage .contact-wrap {
    max-width: 1200px;
    margin: -22px auto 0;
    padding: clamp(24px, 4vw, 44px) clamp(16px, 4vw, 48px) var(--sectionGap);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}

@media (max-width: 860px) {
    .ContactPage .contact-wrap {
        grid-template-columns: 1fr;
    }
}

/* ---------- left column ---------- */
.ContactPage .eyebrow {
    display: block;
    font-family: var(--label);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tomatoRed);
    margin-bottom: var(--space-sm);
}

.ContactPage h1 {
    font-family: var(--display);
    font-weight: 400 !important;
    /* sized to hold "GET IN TOUCH" on a single line in this column */
    font-size: clamp(2.1rem, 4.4vw, 3.4rem) !important;
    white-space: nowrap;
    line-height: .96;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: left !important;
    margin: 0 0 20px !important;
    color: var(--paper-ink) !important;
}

.ContactPage h1 .w-a { color: var(--justicePurple); }
.ContactPage h1 .w-b { color: var(--justiceOrange); }

.ContactPage .contact-lede {
    font-size: 16px;
    line-height: 1.75;
    max-width: 44ch;
    margin: 0 0 var(--space-xl);
}

/* who should write, and where else to look first */
.ContactPage .contact-list {
    list-style: none;
    margin: 0 0 var(--space-xl);
    padding: 0;
    display: grid;
    gap: 0;
    border-top: 1.5px solid var(--paper-rule);
}

/* Tag stacked above the sentence rather than beside it. Side by side,
   each row sized its own columns, so "Everything else" pushed its
   text further right than "Clients" and nothing lined up. */
.ContactPage .contact-list li {
    padding: var(--space-md) 0;
    border-bottom: 1.5px solid var(--paper-rule);
    font-size: 14.5px;
    line-height: 1.65;
}

.ContactPage .contact-list .tag {
    display: block;
    font-family: var(--display);
    font-weight: 400;
    font-size: 22px;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--justiceOrange);
    margin-bottom: 7px;
}

.ContactPage .contact-list a {
    color: var(--justicePurple);
    font-weight: 600;
    border-bottom: 1.5px solid var(--justiceOrange);
}

.ContactPage .contact-list a:hover {
    color: var(--justiceOrange) !important;
}

.ContactPage .reply-note {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(23, 22, 26, .68);
    margin: 0;
}

/* ---------- form panel ---------- */
.ContactPage .contact-panel {
    background: rgb(255, 231, 207);
    border: 1px solid rgba(56, 37, 87, .12);
    box-shadow:
        0 1px 2px rgba(56, 37, 87, .08),
        0 12px 28px rgba(56, 37, 87, .14);
    padding: clamp(24px, 3vw, 38px);
}

.ContactPage .contact-panel .Form {
    padding: 0;
    gap: 18px;
}

.ContactPage .field {
    display: grid;
    gap: 7px;
}

.ContactPage .field label {
    font-family: var(--label);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--justicePurple);
    margin: 0;
}

.ContactPage .form-control {
    border-radius: 0;
    border: 1px solid rgba(56, 37, 87, .22);
    background: rgba(255, 252, 248, .92);
    padding: 13px 15px;
    font-size: 15px;
    width: 100%;
    transition: border-color .15s, box-shadow .15s;
}

.ContactPage .form-control:focus {
    border-color: var(--justicePurple);
    box-shadow: 0 0 0 3px rgba(56, 37, 87, .14);
    outline: none;
}

/* the sum question reads as part of the field, not a stray bold line */
.ContactPage .captcha-field label {
    font-weight: 700;
    color: var(--tomatoRed);
}

.ContactPage .contact-panel .button {
    border-radius: 0;
    width: 100%;
    padding: 15px 26px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-top: var(--space-2xs);
}

/* status line — JS also sets an inline colour, so this only carries
   size, weight and spacing */
.ContactPage #responseStatus {
    margin-top: 14px !important;
    font-size: 13.5px;
    font-weight: 600;
    min-height: 20px;
}

.ContactPage .privacy-note {
    margin: var(--space-md) 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(56, 37, 87, .18);
    font-size: 12px;
    line-height: 1.6;
    color: rgba(23, 22, 26, .66);
}