.sticky-feat-services {
    position: relative;
    background: var( --white );
}

.stickyWrap {
    position: sticky;
    top: var( --header-h, 166px );
    padding: 0;
    margin: 0;
    display: grid;
    width: 100%;
    height: clamp( 700px, 44.79vw, 860px );
    scrollbar-width: none;
    justify-items: center;
}

.featBox.stickyCard {
    position: relative;
    display: flex;
    grid-area: 1 / 1 / 2 / 2;
    width: min( 100vw, 1920px );
    height: clamp( 700px, 44.79vw, 860px );
    padding: 0;
    border-radius: 100px 100px 0 0;
    box-shadow: 0 -60px 60px 0 rgba( 0, 0, 0, 0.05 );
    overflow: hidden;
    background-color: var( --black );
    color: var( --white );
    font-size: 16px;
    flex-direction: column;
    justify-content: center;
    will-change: transform;
    align-items: flex-start;
    text-decoration: none;
}

/* image fills the card */
.featBgImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.featBgImg img {
    display: block;
    object-fit: cover;
    object-position: right center;
    width: 100%;
    height: 100%;
}

/* left-to-right navy gradient so the left copy stays legible
   (matches Figma: solid navy left ~64%, fading to transparent ~37%) */
.featBox.stickyCard::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient( 270deg, rgba( 18, 35, 63, 0 ) 37%, var( --black ) 64% );
    pointer-events: none;
}

.sticky-feat-services .featContent {
    position: relative;
    z-index: 2;
    color: var( --white );
    width: auto;
    max-width: min( 46vw, 813px );
    margin: 0;
    /* DB QA #103527602 (Ali): wider copy — trimmed the oversized horizontal padding
       (was clamp(24px,14.43vw,277px) ≈ 180px/side at desktop, squeezing text to ~216px) */
    padding: clamp( 40px, 7.29vw, 140px ) clamp( 24px, 8vw, 160px );
    display: flex;
    flex-direction: column;
    gap: clamp( 20px, 2.92vw, 56px );
    text-align: left;
}

.sticky-feat-services .featContent .h4 {
    font-family: var( --heading-font );
    font-size: clamp( 24px, 1.667vw, 32px ); /* DB QA #103527602 (Ali): feat service titles 32px (was var(--h2)=40) */
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0;
    margin: 0;
    text-transform: uppercase;
    color: var( --white );
}

.sticky-feat-services .featContent p {
    font-family: var( --body-font );
    font-size: var( --body-font-size );
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    color: var( --white );
}

/* The card is the link; "Learn More" + arrow rendered via pseudo-element
   (PHP markup has no visible CTA — aria-label carries the title). */
.sticky-feat-services .featContent::after {
    content: 'Learn More'; /* DB QA #103527602 (Ali): use the attached arrow.svg (was unicode →) */
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-family: var( --heading-font );
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var( --white );
    white-space: nowrap;
    padding-right: 28px;
    background: url( '/wp-content/themes/fgB-child/images/arrow.svg' ) no-repeat right center;
    background-size: 19px 15px;
    transition: transform .25s ease; /* DB QA #103527602 (Ali): arrow nudges on hover */
}

.featBox.stickyCard:hover .featContent::after {
    transform: translateX( 6px ); /* nudge instead of underline; label+arrow share one ::after */
}

/* dead legacy rules removed (.featLink, :nth-of-type(2) color flip) */

@media ( max-width: 1024px ) {
    .stickyWrap {
        position: relative;
        display: block;
        overflow: hidden;
        height: fit-content;
        padding-top: 0;
    }

    .featBox.stickyCard {
        position: relative;
        width: 100%;
        height: auto;
        min-height: clamp( 560px, 120vw, 800px );
        border-radius: 40px 40px 0 0;
        justify-content: flex-end;
    }

    .featBox.stickyCard:not( :first-of-type ) {
        margin-top: -30px;
    }

    /* mobile portrait images bake in image-top / navy-bottom; gradient
       overlay flips to bottom→top so bottom copy stays legible */
    .featBox.stickyCard::before {
        background: linear-gradient( 0deg, var( --black ) 38%, rgba( 18, 35, 63, 0 ) 70% );
    }

    .featBgImg img {
        object-position: center top;
    }

    .sticky-feat-services .featContent {
        max-width: 100%;
        width: 100%;
        padding: clamp( 28px, 8vw, 48px );
        padding-bottom: clamp( 56px, 16vw, 88px );
        gap: 32px; /* DB QA #103527602 (Ali): 32px between copy and Learn More on mobile */
        text-align: left;
    }
}

/* The slide-in/slide-up reveal classes are always output (PHP) so mobile gets the
   slidein.js reveal. On desktop the sticky-scroll JS owns the card motion — it
   rewrites `transform` on every scroll frame, so the reveal's
   `transition: all .5s ease 1s` (style.css ~1372) made each update lag a full
   second behind the scroll (frozen/janky stacking). Neutralize opacity + the
   transition here and let the JS drive transform unimpeded. */
@media ( min-width: 1025px ) {
    .featBox.stickyCard.slide-in,
    .featBox.stickyCard.slide-in.slide-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}