/* ─────────────────────────────────────────────────────────────
   Contact — details beside the form
   ───────────────────────────────────────────────────────────── */

.jm-reach {
    background: var(--bg-white);
    /* Clear of the fabric seam, which laps down over the top of this
       section by --seam-overlap. */
    padding: clamp(54px, 6.4vw, 92px) 0 clamp(30px, 3.6vw, 52px);
}

.jm-reach__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 3.4vw, 48px);
    /* The panel gutter, so this lines up with the map panel below it. */
    padding-inline: clamp(12px, 2.4vw, 28px);
}

/* The form is the point of the page, so it takes the larger share and sits
   on the side the eye lands on last. */
@media (min-width: 920px) {
    .jm-reach__inner {
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
        align-items: start;
        gap: clamp(36px, 4vw, 64px);
    }
}

/* ─── Details ──────────────────────────────────────────────── */

/* The rule below carries its own top margin, so the eyebrow drops its
   default one rather than the two stacking into a gap. */
.jm-reach__eyebrow { margin-bottom: 0; }

.jm-reach__text {
    margin: 0 0 clamp(26px, 3vw, 36px);
    max-width: 44ch;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    line-height: 1.8;
}

.jm-reach__list {
    margin: 0;
    border-top: 1px solid var(--border-rule);
}

.jm-reach__row {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-rule);
}

.jm-reach__label {
    margin: 0 0 5px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
}

.jm-reach__value {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.jm-reach__value a {
    color: var(--text-primary);
    text-decoration: none;
    /* An underline that only shows the link is a link once it matters —
       the row already reads as data, not as navigation. */
    border-bottom: 1px solid rgba(64, 103, 118, 0.32);
    transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .jm-reach__value a:hover {
        color: var(--primary);
        border-bottom-color: var(--primary);
    }
}

.jm-reach__icon {
    flex: none;
    display: grid;
    place-items: center;
    /* Optical: nudged down so the glyph centres on the first line of text
       rather than on its box. */
    margin-top: 2px;
    color: var(--accent);
}

/* ─── Socials ──────────────────────────────────────────────── */
.jm-reach__socials {
    display: flex;
    gap: 8px;
    margin-top: clamp(22px, 2.6vw, 30px);
}

/* Squares, not discs — the same shape the footer uses. */
.jm-reach__social {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    color: var(--primary);
    background: rgba(104, 152, 168, 0.12);
    text-decoration: none;
    transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .jm-reach__social:hover {
        background: var(--primary);
        color: #fff;
        transform: translateY(-2px);
    }
}

.jm-reach__social:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* ─── Form panel ───────────────────────────────────────────── */
.jm-reach__form {
    padding: clamp(24px, 3.2vw, 44px);
}