/* ─────────────────────────────────────────────────────────────
   Closing call to action — acquisitions / αντιπαροχή

   Was a full-bleed teal band running edge to edge. It is now the same
   deep teal and the same double border, but presented the way the
   panels on a project page are: inset from the screen edges, rounded,
   with a lit top edge and a long soft drop so it reads as a sheet
   lying on the page rather than a stripe across it.
   ───────────────────────────────────────────────────────────── */

.jm-home-cta {
    padding: clamp(16px, 2vw, 30px) 0 clamp(52px, 7vw, 100px);
    background: var(--bg-white);
    /* The same gutter every panel on the site keeps. */
    padding-inline: clamp(12px, 2.4vw, 28px);
}

.jm-home-cta__panel {
    max-width: var(--container-max);
    margin-inline: auto;
    /* One value, not a vertical/horizontal pair: the double border inside
       sits at the padding's edge, so any difference between the two shows
       as an uneven frame all the way round the panel. */
    padding: clamp(20px, 3.2vw, 52px);
    background: var(--bg-deep);
    border-radius: 20px;
    /* Three layers, as on .jm-panel: a lit inner line along the top edge,
       a hairline of the accent, and a long drop beneath. On a dark
       surface the inner line does most of the work — it is what stops
       the panel reading as a hole cut in the page. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 0 1px rgba(104, 152, 168, 0.30),
        0 30px 64px -34px rgba(14, 30, 38, 0.65);
}

/* The double border fills the panel, so the gap around it is the panel's
   padding on all four sides. Capping the frame's width instead — which is
   what it used to do — left it centred with 108px of dead teal either
   side on a wide screen while the top and bottom stayed at the padding,
   and the frame read as floating rather than as the panel's own edge.
   The measure is held on the copy inside it instead. */
.jm-home-cta__frame {
    text-align: center;
}

.jm-home-cta__eyebrow {
    margin-bottom: var(--sp-4);
}

.jm-home-cta__title {
    margin: 0 auto;
    /* Wide enough to keep this heading on one line where there is room —
       a two-line break mid-phrase reads as a squeeze, not a choice. */
    max-width: 34ch;
    color: #fff;
    font-size: var(--fs-h2);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.jm-home-cta__text {
    margin: var(--sp-5) auto 0;
    max-width: 58ch;
    color: var(--text-on-dark);
    line-height: 1.8;
}

.jm-home-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: clamp(26px, 3.5vw, 38px);
}

/* The secondary action on the dark panel: a frosted fill rather than an
   outline, so it is still a surface the label sits on. The weight of the
   two buttons, not solid-versus-empty, is what makes one secondary. */
.jm-home-cta__ghost {
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
            backdrop-filter: blur(8px) saturate(120%);
    color: #fff;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        0 8px 18px -12px rgba(0, 0, 0, 0.55);
}

@media (hover: hover) and (pointer: fine) {
    .jm-home-cta__ghost:hover {
        background: rgba(255, 255, 255, 0.26);
        color: #fff;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.38),
            0 12px 22px -12px rgba(0, 0, 0, 0.6);
    }
}

@media (max-width: 520px) {
    .jm-home-cta__actions { flex-direction: column; }
    .jm-home-cta__actions .jm-btn { width: 100%; }
}