/* Unified support page */
.sf-contact-page {
    position: relative;
    isolation: isolate;
    background: #07090d;
    overflow: hidden;
}

.sf-contact-page::before,
.sf-contact-page::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    pointer-events: none;
}

.sf-contact-page::before {
    bottom: auto;
    height: clamp(900px, 76vw, 1240px);
    background-image: var(--sf-contact-background-image, none);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

.sf-contact-page::after {
    background:
        linear-gradient(180deg, rgba(4, 6, 10, 0.4) 0%, rgba(4, 6, 10, 0.58) 30%, rgba(7, 9, 13, 0.92) 61%, #07090d 76%),
        linear-gradient(90deg, rgba(4, 6, 10, 0.9) 0%, rgba(4, 6, 10, 0.56) 54%, rgba(4, 6, 10, 0.18) 100%),
        radial-gradient(circle at 92% 84%, rgba(69, 194, 255, 0.08), transparent 30%);
}

.sf-contact-story {
    display: grid;
    gap: clamp(54px, 8vw, 110px);
}

.sf-contact-intro h1,
.sf-contact-intro h2 {
    max-width: 760px;
    color: #fff;
    letter-spacing: -0.055em;
    line-height: 0.96;
    text-shadow: 0 3px 28px rgba(0, 0, 0, 0.46);
}

.sf-contact-intro h1 {
    font-size: clamp(42px, 6vw, 82px);
}

.sf-contact-intro h2 {
    font-size: clamp(34px, 4.6vw, 62px);
}

.sf-contact-intro p {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

.sf-contact-intro--secondary {
    padding-top: clamp(34px, 5vw, 64px);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

@media (max-width: 760px) {
    .sf-contact-story {
        gap: 54px;
    }

    .sf-contact-page::before {
        height: 1500px;
    }
}