/* =====================================================================
   Get in touch.

   Headline, then two cards. No rules, no separators, no borders — the
   cards are set apart by surface and a soft lift, so the section is
   defined by light rather than by drawn lines.

   Both cards fill their height deliberately. The left ends on its two
   actions, the right ends on its facts, and each distributes the space
   between its parts rather than stacking to the top and leaving a hole
   underneath. That is the difference between two cards and two boxes
   with things in them.

   The idea is the thirty minutes. A buyer's hesitation about a call is
   not the number, it is not knowing what the call is — so the left card
   itemises it in Exclr8's own words, ending with the promise to say no.
   ===================================================================== */

.cta.surf-light {
    --c-card: #FFFFFF;
    --c-well: #F6F4F1;
    --c-faint: #A8ADB3;
    --c-open: #3B7C68;
}

.cta__inner {
    max-width: 1240px;
    margin-inline: auto;
}

/* ---- headline --------------------------------------------------------- */

.cta .cta__title {
    margin: 0 0 clamp(40px, 5vw, 68px);
    font-size: clamp(38px, 5.8vw, 82px);
    line-height: 0.98;
    letter-spacing: -0.042em;
    font-weight: 300;
    max-width: 18ch;
    text-wrap: balance;
}

/* The site sets this word in a serif elsewhere; here it is the accent
   word and stays in the same face as the rest of the line. */
.cta .cta__title .serif {
    font-family: inherit;
    font-style: normal;
    color: var(--accent, #A43818);
}

/* ---- the pair --------------------------------------------------------- */

.cta__pair {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: clamp(18px, 2vw, 26px);
}

@media (max-width: 900px) {
    .cta__pair { grid-template-columns: minmax(0, 1fr); }
}

/* A quiet lift, not a drop shadow. Heavier than this and the cards start
   to look pasted on. */
.cta__card {
    background: var(--c-card);
    padding: clamp(28px, 3.2vw, 48px);
    box-shadow: 0 1px 1px rgba(10, 12, 15, 0.03),
                0 10px 26px rgba(10, 12, 15, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(26px, 3vw, 40px);
}

.cta__label {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--c-faint);
}
.cta__label b { color: var(--accent, #A43818); font-weight: 600; }

/* ---- left card -------------------------------------------------------- */

.cta .cta__lede {
    margin: 18px 0 0;
    max-width: 40ch;
    font-size: 18px;
    line-height: 1.55;
    color: var(--text-2);
}

/* One line each. Three points with a paragraph under every one reads as
   a wall; the value is in the promise, not the elaboration. */
.cta__points { margin: 0; padding: 0; list-style: none; }
.cta__points li + li { margin-top: 20px; }

.cta__points h3 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.012em;
    color: var(--text);
}
.cta__points p {
    margin: 0;
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.5;
    max-width: 42ch;
}

.cta .cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* The nav key's press: a hard rust shadow with no blur, travelling
   exactly its own shadow height, faster down than up. */
.cta .cta__actions .btn {
    box-shadow: 0 3px 0 0 var(--accent-deep, #531508);
    transform: translateY(0);
    transition: transform 90ms cubic-bezier(0.2, 0, 0, 1),
                box-shadow 90ms cubic-bezier(0.2, 0, 0, 1),
                background var(--e-fast);
}
.cta .cta__actions .btn:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 0 var(--accent-deep, #531508);
    transition-duration: 40ms;
}
.cta .cta__actions .btn--ghost {
    background: var(--c-well);
    box-shadow: 0 3px 0 0 rgba(10, 12, 15, 0.16);
}
.cta .cta__actions .btn--ghost:active { box-shadow: 0 0 0 0 rgba(10, 12, 15, 0.16); }

/* ---- right card ------------------------------------------------------- */

/* The loud moment. Record typeface, tabular, tracked in, with a rust
   rule that runs past the number on both sides so it reads as drawn
   under it rather than as a border. */
.cta__dial {
    display: inline-block;
    align-self: flex-start;
    margin-top: 16px;
    font-family: var(--f-mono);
    font-size: clamp(24px, 2.7vw, 38px);
    font-weight: 500;
    letter-spacing: -0.022em;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    padding-bottom: 12px;
    position: relative;
    color: var(--text);
    text-decoration: none;
}
.cta__dial::after {
    content: "";
    position: absolute;
    left: -6px; right: -18px; bottom: 0;
    height: 2px;
    background: var(--accent, #A43818);
    transform-origin: left center;
    transition: transform 280ms cubic-bezier(0.2, 0, 0, 1);
}
.cta__dial:hover { color: var(--accent, #A43818); }
.cta__dial:hover::after { transform: scaleX(1.05); }

.cta__note {
    margin: 18px 0 0;
    max-width: 30ch;
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.5;
}

.cta__mail {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    margin-top: 18px;
    font-size: 16px;
    color: var(--accent, #A43818);
    text-decoration: none;
}
.cta__mail span { transition: transform 200ms cubic-bezier(0.2, 0, 0, 1); }
.cta__mail:hover span { transform: translateX(4px); }

/* Sits in its own well, so the small print reads as a separate register
   from the number above it without a line being drawn between them. */
.cta__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 24px;
    margin: 0;
    padding: clamp(20px, 2.4vw, 28px);
    background: var(--c-well);
}
.cta__facts > div { min-width: 0; }
.cta__facts dt {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--c-faint);
    margin-bottom: 5px;
}
.cta__facts dd {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--text);
}

.cta__clock { display: inline-flex; align-items: center; gap: 8px; }
.cta__clock i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--c-faint);
    flex: none;
    display: inline-block;
}
.cta__clock.is-open i { background: var(--c-open); }
.cta__clock b { font-weight: 400; font-variant-numeric: tabular-nums; }

.cta__state {
    display: block;
    margin-top: 3px;
    color: var(--text-2);
    font-size: 13.5px;
}
.cta__state.is-open { color: var(--c-open); }

/* The old two-column grid and the coordinates rail this replaces. */
.cta .cta__grid,
.cta .cta__aside { display: none; }

@media (prefers-reduced-motion: reduce) {
    .cta__dial::after,
    .cta__mail span,
    .cta .cta__actions .btn { transition: none; }
}


/* ---- icons ------------------------------------------------------------ */

/* Font Awesome 6.4.0 artwork, but inlined as .cta__ico SVGs in the
   markup (Jul 2026) — the 167 KB site-wide icon font download is gone.
   Sized to the mono label they sit beside, and muted, so they read as
   markers and not as decoration. */
.cta__facts dt,
.cta__label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cta__facts dt i,
.cta__label i {
    font-size: 11px;
    width: 12px;
    text-align: center;
    color: var(--accent, #A43818);
    opacity: 0.75;
    flex: none;
}

.cta__ico {
    width: 12px;
    height: 11px;
    color: var(--accent, #A43818);
    opacity: 0.75;
    flex: none;
}

/* The live dot keeps its own shape; it is a state, not an icon. */
.cta__clock .cta__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-faint);
    display: inline-block;
    flex: none;
}
.cta__clock.is-open .cta__dot { background: var(--c-open); }

/* Nothing to show until the clock has read the time. */
.cta__clock b:empty { display: none; }