#about {
    background: transparent !important;
}

#about .about-card {
    border: 1px solid rgba(23, 23, 23, .07);
    box-shadow: 0 10px 28px rgba(23, 23, 23, .08);
}

#about .about-card--strategy,
#about .about-card--portrait,
#about .about-card--system {
    border-color: transparent;
}

#about .about-card--pills,
#about .about-card--contacts,
#about .about-card--legal,
#about .about-card--experience,
#about .about-card--value {
    background-color: #fff;
}

/* Keep the homepage sections on one consistent vertical rhythm. */
.marquee-section,
#about,
#approach,
#process,
#pricing,
#faq-section {
    margin-bottom: 24px;
}

#audit {
    margin-bottom: 90px;
}

#cases {
    scroll-margin-top: 96px;
}

@media (max-width: 767px) {
    /* Keep vertical page scrolling native; the rails handle horizontal touch explicitly. */
    #approach .mobile-card-slider,
    #process .mobile-card-slider {
        overflow-x: scroll;
        overflow-y: hidden;
        touch-action: pan-y;
        scroll-snap-type: none;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    #process {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    #faq-section {
        margin-inline: 0 !important;
    }

    #faq-section > .max-w-\[1200px\] {
        padding-inline: 16px !important;
    }

    #faq-section .faq-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 10px;
    }

    #faq-section .faq-card {
        display: flex;
        height: 100%;
        flex-direction: column;
    }

    #faq-section .faq-card > button {
        flex: 1 0 auto;
        min-height: 68px;
        padding: 16px 14px !important;
    }

    #faq-section .faq-card > button > span {
        min-width: 0;
    }

    #faq-section .faq-card > button > i {
        flex: 0 0 auto;
        margin-left: 4px;
    }

    #faq-section .faq-card > div {
        padding-inline: 14px !important;
    }
}