/* ==========================================================================
   contact.css (page-scoped)
   Neuthinking — Contact Page
   Goal: Match Profile page container + spacing + card rhythm
   Scope: .nt-contact only
   ========================================================================== */

.nt-contact {
    font-family: "Rubik", sans-serif;
    font-size: 14px;
    line-height: 1.45;
    /* Brand tokens (inherit from site.css) */
    --nt-brand: var(--dv-primary, #2E86E6);
    --nt-brand-ink: var(--nt-blue-ink, #1F6EC4);
    --nt-brand-soft: var(--nt-blue-soft, rgba(46,134,230,.10));
    /* Neutrals */
    --nt-ink: rgba(15,23,42,.92);
    --nt-ink-2: rgba(15,23,42,.78);
    --nt-muted: rgba(15,23,42,.55);
    --nt-border: rgba(15,23,42,.10);
    --nt-divider: rgba(15,23,42,.08);
    /* Ring (fallback then preferred) */
    --nt-ring: rgba(46,134,230,.22);
    --nt-ring: color-mix(in srgb, var(--nt-brand) 22%, transparent);
}

/* Match Profile container sizing */
@media (min-width: 992px) {
    .nt-contact .dv-container {
        max-width: 1120px;
        padding-left: 0px;
        padding-right: 0px;
    }
}

/* Mobile container padding to match your general site rhythm */
@media (max-width: 991.98px) {
    .nt-contact .dv-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Cards (match Profile card feel) */
.nt-contact .nt-contact-card {
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    background: #fff;
}

.nt-contact .row + .row .nt-contact-card {
    border-radius: 0;
}


.nt-contact .nt-contact-body {
    padding: 18px;
}

/* Headings */
.nt-contact .nt-contact-title {
    font-weight: 950;
    letter-spacing: -0.2px;
    font-size: 2.05rem;
    color: var(--nt-ink);
}

.nt-contact .nt-contact-send-a-message-title {
    font-weight: 950;
    letter-spacing: -0.2px;
    font-size: 1.4rem;
    color: var(--nt-ink);
}

.nt-contact .nt-contact-sub {
    margin-top: 4px;
    line-height: 1.6;
    color: var(--nt-muted);
}

/* Links */
.nt-contact a {
    color: var(--nt-brand);
    text-decoration: none;
}

    .nt-contact a:hover {
        color: var(--nt-brand-ink);
        text-decoration: underline;
    }

/* Labels */
.nt-contact .nt-contact-label {
    font-weight: 800;
    color: rgba(15, 23, 42, 0.85);
}

/* -----------------------------
   SUPPORT GRID
   ----------------------------- */
.nt-contact .nt-contact-support-grid {
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: 18px;
    align-items: center;
}

.nt-contact .nt-contact-support-left {
    min-width: 0;
}

.nt-contact .nt-contact-support-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nt-contact .nt-contact-support-img {
    width: 100%;
    height: auto;
    max-width: 520px;
    display: block;
    object-fit: contain;
}

/* Support KV blocks */
.nt-contact .nt-contact-kv .k {
    font-weight: 850;
    color: rgba(15, 23, 42, 0.86);
}

.nt-contact .nt-contact-kv .v {
    margin-top: 4px;
    color: rgba(15, 23, 42, 0.72);
}

.nt-contact .nt-contact-kv .s {
    margin-top: 4px;
    font-size: 0.95rem;
    color: var(--nt-muted);
}

/* Mini lines */
.nt-contact .nt-contact-mini .row1 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    color: rgba(15, 23, 42, 0.74);
    font-weight: 650;
}

.nt-contact .nt-contact-mini .ic {
    width: 22px;
    text-align: center;
    opacity: 0.9;
}

/* -----------------------------
   FORM CONTROLS
   ----------------------------- */

/* Select hardening */
.nt-contact select.form-select {
    width: 100% !important;
    border-radius: 5px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    padding: 0.70rem 2.35rem 0.70rem 0.90rem;
    font-weight: 650;
    color: rgba(15, 23, 42, 0.86);
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='rgba(15,23,42,0.55)' d='M4.2 6.2a.75.75 0 0 1 1.06 0L8 9l2.74-2.8a.75.75 0 1 1 1.06 1.06l-3.27 3.33a.9.9 0 0 1-1.26 0L4.2 7.26a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.90rem center;
    background-size: 16px 16px;
}

    .nt-contact select.form-select:focus {
        border-color: color-mix(in srgb, var(--nt-brand) 45%, transparent);
        box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--nt-brand) 14%, transparent);
    }

.nt-contact .form-control:focus {
    border-color: color-mix(in srgb, var(--nt-brand) 45%, transparent);
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--nt-brand) 14%, transparent);
}

/* Button (match site, full width) */
.nt-contact .nt-contact-btn.btn.btn-primary {
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
    float:right;
    width:125px !important;
}

    .nt-contact .nt-contact-btn.btn.btn-primary:hover {
    }

    .nt-contact .nt-contact-btn.btn.btn-primary:focus,
    .nt-contact .nt-contact-btn.btn.btn-primary:focus-visible {
    }

/* Small text */
.nt-contact .nt-contact-legal {
    font-size: 0.92rem;
    color: var(--nt-muted);
}

/* -----------------------------
   RESPONSIVE
   ----------------------------- */
@media (max-width: 991.98px) {
    .nt-contact .nt-contact-support-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* image first on mobile */
    .nt-contact .nt-contact-support-right {
        order: -1;
    }

    .nt-contact .nt-contact-support-img {
        max-width: 100%;
    }
}