/* ============================================================
   BEINC — Contact Connector Section
   White-cream short section with two centered buttons + a
   horizontal dashed (greyish) line spanning edge-to-edge,
   centered vertically on the section.
   ============================================================ */

.contact-connector {
    position: relative;
    width: 100%;
    background: var(--color-white);
    padding: var(--space-9) var(--pad-x);
    box-sizing: border-box;
    isolation: isolate;
    overflow: hidden;
    z-index: 950;          /* sit above the sticky labels (z:900) */
}

.contact-connector__hr {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed var(--color-greyish);
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}

.contact-connector__buttons {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.contact-connector__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-black2);
    color: var(--color-white);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    font-family: var(--font-btn);
    font-weight: var(--font-weight-btn);
    font-size: var(--text-btn);
    letter-spacing: var(--tracking-btn);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s var(--ease-primary), color 0.3s var(--ease-primary), border-color 0.3s var(--ease-primary);
}
.contact-connector__btn:hover {
    background: var(--color-white);
    color: var(--color-black2);
    border: 1px dashed var(--color-greyish);
}

@media (max-width: 767px) {
    .contact-connector { padding: var(--space-8) var(--pad-x); }
    .contact-connector__buttons { gap: var(--space-4); }
}