.project-cta {
    position: relative;
    z-index: 2;
    isolation: isolate;
    display: grid;
    overflow: hidden;
    background: var(--color-heading);
    color: var(--color-stage-text);
    place-items: center;
}

.project-cta::before,
.project-cta::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
}

.project-cta::before {
    z-index: -2;
    background-image:
        linear-gradient(rgb(var(--color-card-rgb) / 0.09) 0.0625rem, transparent 0.0625rem),
        linear-gradient(90deg, rgb(var(--color-card-rgb) / 0.09) 0.0625rem, transparent 0.0625rem);
    background-size: var(--project-cta-grid-size) var(--project-cta-grid-size);
}

.project-cta::after {
    z-index: -1;
    background:
        linear-gradient(to bottom, var(--color-heading), transparent 24%, transparent 76%, var(--color-heading)),
        linear-gradient(to right, var(--color-heading), transparent 18%, transparent 82%, var(--color-heading));
}

.project-cta__content {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    text-align: center;
}

.project-cta__title-line,
.project-cta__title-word {
    display: block;
}

.project-cta__title-line {
    text-wrap: balance;
}

.project-cta__description {
    max-width: var(--section-copy-wide-max);
    text-wrap: balance;
}

.project-cta__action {
    margin-top: var(--space-lg);
}

.project-cta__edge {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--surface-radius-large);
    border-radius: var(--surface-radius-large) var(--surface-radius-large) 0 0;
    background: var(--color-page);
    pointer-events: none;
}
