.sticky-feat-services {
    position: relative;
    background: var( --white );
    margin-top: clamp( 64px, 7.29vw, 140px );
    margin-bottom: clamp( 100px, 7.29vw, 140px );
}

/* Pin the cards just below the fixed header so it doesn't cover their tops.
   sticky_feat_serv.js overrides `top` inline with the live header height at
   runtime; 166px is only the pre-JS fallback (mobile CSS sets top:0). */
.stickyWrap {
    position: sticky;
    top: 166px;
    padding: 0;
    margin: 0;
    display: grid;
    width: 100%;
    height: clamp( 460px, 26.458vw, 508px );
    scrollbar-width: none;
    justify-items: center;
}

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

/* image fills the card, washed toward tan (matches Figma opacity .75 over #E6E3DD) */
.featBgImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var( --tan );
    z-index: 0;
}

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

/* left-to-right tan gradient so the left copy stays legible
   (Figma: solid tan left ~67%, fading to transparent ~34%) */
.featBox.stickyCard::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient( 270deg, rgba( 230, 227, 221, 0 ) 34%, var( --tan ) 67% );
    pointer-events: none;
}

.sticky-feat-services .featContent {
    position: relative;
    z-index: 2;
    color: var( --black );
    width: auto;
    max-width: min( 42vw, 676px );
    margin: 0;
    padding: clamp( 40px, 7.29vw, 140px );
    display: flex;
    flex-direction: column;
    gap: clamp( 16px, 1.25vw, 24px );
    text-align: left;
}

.sticky-feat-services .featContent .h4 {
    font-family: var( --heading-font );
    font-size: clamp( 28px, 2.083vw, 40px );
    font-weight: var( --heading-font-weight );
    line-height: 1.15;
    letter-spacing: 0;
    margin: 0;
    text-transform: none;
    color: var( --black );
}

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

/* 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';
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-family: var( --body-font );
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var( --black );
    white-space: nowrap;
    margin-top: clamp( 20px, 1.667vw, 32px );
    padding-right: 30px;
    background: url( '/wp-content/themes/fgB-child/images/arrow.svg' ) no-repeat right center;
    background-size: 17px 16px;
    transition: transform .25s ease;
}

.featBox.stickyCard:hover .featContent::after {
    transform: translateX( 6px );
}

@media ( max-width: 1024px ) {
    /* mobile = stacked: tan-washed image on top, copy below on white
       (no overlay, no gradient — matches Figma mobile Featured Service) */
    .stickyWrap {
        position: relative;
        display: block;
        height: auto;
        top: 0;
    }

    .featBox.stickyCard {
        width: 100%;
        height: auto;
        padding: 0 32px;
        gap: 56px;
        background: transparent;
        box-shadow: none;
        justify-content: flex-start;
    }

    .featBox.stickyCard:first-of-type {
        padding-top: 32px;
    }

    .featBox.stickyCard + .featBox.stickyCard {
        margin-top: 80px;
    }

    /* no left-gradient overlay on mobile (copy is below the image, not over it) */
    .featBox.stickyCard::before {
        display: none;
    }

    /* image becomes a normal block on top, tan-washed, native mobile aspect */
    .featBgImg {
        position: relative;
        height: auto;
        aspect-ratio: 326 / 180;
    }

    .featBgImg img {
        object-position: center;
    }

    .sticky-feat-services .featContent {
        z-index: auto;
        max-width: 100%;
        width: 100%;
        padding: 0;
        gap: 16px;
    }

    .sticky-feat-services .featContent .h4 {
        font-size: 32px;
    }

    .sticky-feat-services .featContent::after {
        margin-top: 16px;
    }
}

/* The slide-in/slide-up reveal classes are output on mobile only (PHP wp_is_mobile).
   On desktop the sticky-scroll JS owns the card transform; neutralize the reveal
   transition there so updates don't lag a full second behind the scroll. */
@media ( min-width: 1025px ) {
    .featBox.stickyCard.slide-in,
    .featBox.stickyCard.slide-in.slide-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}