/* =========================================================
   CTA / CONTACT
   ========================================================= */

.cta {
    position: relative;
    overflow: hidden;

    background: var(--color-surface);
}

.cta__container {
    position: relative;

    width: min(
        calc(100% - (2 * var(--container-padding-mobile))),
        var(--container-wide-width)
    );

    min-height: 720px;

    margin-inline: auto;
    

    padding-block:
        var(--section-padding-mobile);

    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* =========================================================
   VISUAL
   ========================================================= */

.cta__visual {
    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;
}

.cta__grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            to right,
            color-mix(
                in srgb,
                var(--color-border) 45%,
                transparent
            ) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            color-mix(
                in srgb,
                var(--color-border) 45%,
                transparent
            ) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 20%,
            transparent 75%
        );

    opacity: 0.45;
}

.cta__trajectory {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}

.cta__trajectory-line {
    fill: none;

    stroke: var(--color-line);

    stroke-width: 1.5;

    stroke-dasharray: 8 12;

    vector-effect: non-scaling-stroke;
}

.cta__node {
    fill: var(--color-background);

    stroke-width: 2;
}

.cta__node--start {
    stroke: var(--color-primary);
}

.cta__node--middle {
    stroke: var(--color-yellow);
}

.cta__node--end {
    stroke: var(--color-green);
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.cta__content {
    position: relative;

    z-index: 2;

    max-width: 900px;
}

.cta__eyebrow {
    display: inline-block;

    margin-bottom: var(--space-4);

    color: var(--color-primary);

    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cta__title {
    max-width: 900px;

    color: var(--color-text-primary);

    font-size: var(--font-size-display);

    letter-spacing: -0.06em;
}

.cta__title span {
    display: block;

    color: var(--color-primary);
}

.cta__description {
    max-width: 650px;

    margin-top: var(--space-8);

    color: var(--color-text-secondary);

    font-size: var(--font-size-lg);

    line-height: var(--line-height-relaxed);
}


/* =========================================================
   CONTACT AREA
   ========================================================= */

.cta__contact-area {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(280px, 0.8fr)
        minmax(320px, 1.2fr);

    gap: clamp(
        var(--space-12),
        7vw,
        var(--space-24)
    );

    max-width: 1100px;

    margin-top: var(--space-20);
}


/* =========================================================
   CONTACT INFORMATION
   ========================================================= */

.cta__contact {
    display: flex;

    flex-direction: column;

    justify-content: space-between;

    gap: var(--space-12);

    padding-top: var(--space-6);

    border-top:
        var(--border-width-thin)
        solid
        var(--color-border);
}

.cta__contact-item {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: var(--space-3);
}

.cta__contact-label {
    color: var(--color-text-muted);

    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cta__contact-title {
    color: var(--color-text-primary);

    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);

    letter-spacing: -0.03em;
}

.cta__contact-text {
    max-width: 430px;

    color: var(--color-text-secondary);

    font-size: var(--font-size-md);

    line-height: var(--line-height-relaxed);
}

.cta__contact-link {
    width: fit-content;

    color: var(--color-text-primary);

    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);

    transition: color var(--transition-normal);
}

.cta__contact-link:hover {
    color: var(--color-primary);
}

.cta__contact-tagline {
    color: var(--color-text-muted);

    font-size: var(--font-size-sm);
}


/* =========================================================
   FORM
   ========================================================= */

.cta__form {
    display: flex;

    flex-direction: column;

    gap: var(--space-5);

    padding: var(--space-8);

    border:
        var(--border-width-thin)
        solid
        var(--color-border);

    border-radius: var(--radius-2xl);

    background: var(--color-background);

    box-shadow: var(--shadow-md);
}

.cta__form-group {
    display: flex;

    flex-direction: column;

    gap: var(--space-2);
}

.cta__form-label {
    color: var(--color-text-secondary);

    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.cta__form-input {
    width: 100%;

    min-height: 48px;

    padding:
        var(--space-3)
        var(--space-4);

    border:
        var(--border-width-thin)
        solid
        var(--color-border);

    border-radius: var(--radius-md);

    outline: none;

    background: var(--color-surface);

    color: var(--color-text-primary);

    font-family: var(--font-body);
    font-size: var(--font-size-sm);

    transition:
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        background-color var(--transition-normal);
}

.cta__form-input::placeholder {
    color: var(--color-text-muted);
}

.cta__form-input:hover {
    border-color: color-mix(
        in srgb,
        var(--color-primary) 40%,
        var(--color-border)
    );
}

.cta__form-input:focus {
    border-color: var(--color-primary);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--color-primary) 15%,
            transparent
        );
}

.cta__form-textarea {
    min-height: 120px;

    resize: vertical;
}

.cta__form-submit {
    align-self: flex-start;

    min-height: 50px;

    margin-top: var(--space-2);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) {

    .cta__container {
        width: min(
            calc(100% - (2 * var(--container-padding-tablet))),
            var(--container-wide-width)
        );
    }

}


/* =========================================================
   TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1023px) {

    .cta__contact-area {
        grid-template-columns: 1fr;

        max-width: 750px;
    }

    .cta__contact {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: var(--space-8);
    }

}


/* =========================================================
   LARGE SCREENS
   ========================================================= */

@media (min-width: 1280px) {

    .cta__container {
        width: min(
            calc(100% - (2 * var(--container-padding-desktop))),
            var(--container-wide-width)
        );

        min-height: 800px;
    }

    .cta__grid {
        background-size: 100px 100px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .cta__container {
        min-height: 650px;
    }

    .cta__grid {
        background-size: 50px 50px;

        opacity: 0.25;
    }

    .cta__trajectory {
        opacity: 0.5;
    }

    .cta__content {
        max-width: 100%;
    }

    .cta__title {
        font-size: clamp(
            3rem,
            14vw,
            5rem
        );
    }

    .cta__description {
        margin-top: var(--space-6);

        font-size: var(--font-size-md);
    }

    .cta__contact-area {
        grid-template-columns: 1fr;

        margin-top: var(--space-12);
    }

    .cta__contact {
        grid-template-columns: 1fr;

        gap: var(--space-8);

        padding-top: var(--space-6);
    }

    .cta__form {
        padding: var(--space-6);

        border-radius: var(--radius-xl);
    }

    .cta__form-submit {
        width: 100%;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .cta__trajectory-line,
    .cta__form-input,
    .cta__contact-link {
        transition: none;
    }

    .cta__trajectory-line {
        stroke-dasharray: none;
    }

}