/* =========================================================
   OXYN — FEATURED WORK V11
   Figma geometry:
   Track: 1490 × 817
   Center: 462 × 817
   Far edge peek: 29 × 765, clipped
   ========================================================= */

.featured-work {
    position: relative;
    overflow: hidden;
    background: var(--color-page);
    padding: clamp(118px, 8vw, 170px) 0 clamp(120px, 9vw, 190px);
}

.featured-work__inner {
    width: 100%;
    margin-inline: auto;
}

.featured-work__badge {
    width: 214px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    position: relative;
    left: auto;
    right: auto;
    transform: none;
    float: none;

    margin: 0 auto;

    border-radius: 39px;
    background: #FFFFFF;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, .06),
        0 1px 3px rgba(0, 0, 0, .05);

    color: #3B3B3B;
    font-family: var(--font-cta);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .01em;
}

.featured-work__badge-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #626262;
}

.featured-work__mode {
    margin: 34px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-family: var(--font-cta);
}

.featured-work__mode-label {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    color: #000;
    font-family: inherit;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.2;
    cursor: pointer;
    opacity: .62;
    transition: opacity 180ms var(--ease-standard);
}

.featured-work__mode-label.is-active {
    opacity: 1;
}

.featured-work__toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex: 0 0 44px;
    border: 0;
    border-radius: 999px;
    padding: 0;
    background: #D9D9D9;
    cursor: pointer;
}

.featured-work__toggle-knob {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FFF;
    box-shadow: 0 1px 3px rgba(0,0,0,.14);
    transition: transform 220ms var(--ease-standard);
}

.featured-work__toggle[aria-checked="true"] {
    background: #8F8F8F;
}

.featured-work__toggle[aria-checked="true"] .featured-work__toggle-knob {
    transform: translateX(20px);
}

.featured-work__stage {
    position: relative;
    margin-top: 48px;
}

.featured-work__carousel {
    position: relative;
    width: 100%;
}

.featured-work__carousel[hidden] {
    display: none !important;
}

/* ---------------------------------------------------------
   SHORT FORM — exact Figma stage logic
   --------------------------------------------------------- */

.featured-work__carousel--short .featured-work__track {
    position: relative;
    width: min(100%, 1490px);
    height: 817px;
    margin-inline: auto;
    overflow: visible;
}

.featured-work__slide {
    position: absolute;
    margin: 0;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        left 560ms cubic-bezier(.2,.8,.2,1),
        right 560ms cubic-bezier(.2,.8,.2,1),
        top 560ms cubic-bezier(.2,.8,.2,1),
        width 560ms cubic-bezier(.2,.8,.2,1),
        height 560ms cubic-bezier(.2,.8,.2,1),
        transform 560ms cubic-bezier(.2,.8,.2,1),
        opacity 360ms ease;

    will-change: left, right, top, width, height, transform, opacity;
}

.featured-work__slide.is-visible {
    visibility: visible;
}

/* CENTER: 462 × 817 */
.featured-work__carousel--short .featured-work__slide.is-center {
    left: 50%;
    top: 0;
    width: 462px;
    height: 817px;

    transform: translateX(-50%);
    opacity: 1;
    z-index: 8;
    pointer-events: auto;
}

/* NEAR SIDE CARDS: 430 × 765, recessed and washed */
.featured-work__carousel--short .featured-work__slide.is-left,
.featured-work__carousel--short .featured-work__slide.is-right {
    top: 26px;
    width: 429px;
    height: 765px;

    opacity: 1;
    z-index: 4;
    pointer-events: auto;
}

.featured-work__carousel--short .featured-work__slide.is-left {
    left: 42px;
    transform:
        perspective(1500px)
        rotateY(5.5deg)
        rotateZ(-1.25deg)
        scale(.985);
    transform-origin: right center;
}

.featured-work__carousel--short .featured-work__slide.is-right {
    right: 42px;
    transform:
        perspective(1500px)
        rotateY(-5.5deg)
        rotateZ(1.25deg)
        scale(.985);
    transform-origin: left center;
}

/* FAR PEEKS: actual 29 × 765 clipped viewport */
.featured-work__carousel--short .featured-work__slide.is-far-left,
.featured-work__carousel--short .featured-work__slide.is-far-right {
    top: 26px;
    width: 29px;
    height: 765px;

    opacity: 1;
    z-index: 2;
    overflow: hidden;
    pointer-events: auto;
}

.featured-work__carousel--short .featured-work__slide.is-far-left {
    left: 0;
}

.featured-work__carousel--short .featured-work__slide.is-far-right {
    right: 0;
}

.featured-work__video-shell {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 29px;
    background: #0B0B0B;
    transform: translateZ(0);
}

.featured-work__carousel--short .featured-work__slide.is-left .featured-work__video-shell,
.featured-work__carousel--short .featured-work__slide.is-right .featured-work__video-shell {
    border-radius: 26px;
}

/* Far peek keeps a full moving video behind a 29px clipping window */
.featured-work__carousel--short .featured-work__slide.is-far-left .featured-work__video-shell,
.featured-work__carousel--short .featured-work__slide.is-far-right .featured-work__video-shell {
    position: absolute;
    top: 0;
    width: 429px;
    height: 765px;
    border-radius: 0;
}

.featured-work__carousel--short .featured-work__slide.is-far-left .featured-work__video-shell {
    left: 0;
}

.featured-work__carousel--short .featured-work__slide.is-far-right .featured-work__video-shell {
    right: 0;
}

.featured-work__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0B0B0B;
    user-select: none;
}

/* Figma-style milky wash — not just lower opacity */
.featured-work__slide.is-left .featured-work__video-shell::after,
.featured-work__slide.is-right .featured-work__video-shell::after,
.featured-work__slide.is-far-left .featured-work__video-shell::after,
.featured-work__slide.is-far-right .featured-work__video-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.featured-work__slide.is-left .featured-work__video-shell::after,
.featured-work__slide.is-right .featured-work__video-shell::after {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.47),
            rgba(217,217,217,.20)
        );
}

.featured-work__slide.is-far-left .featured-work__video-shell::after,
.featured-work__slide.is-far-right .featured-work__video-shell::after {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.62),
            rgba(143,143,143,.28)
        );
}

.featured-work__slide.is-left .featured-work__video,
.featured-work__slide.is-right .featured-work__video {
    filter: saturate(.78) brightness(1.06);
}

.featured-work__slide.is-far-left .featured-work__video,
.featured-work__slide.is-far-right .featured-work__video {
    filter: saturate(.68) brightness(1.08);
}

/* ---------------------------------------------------------
   LONG FORM
   Figma center reference: 1263 × 766, radius 43px.
   Adjacent landscape videos remain partially visible.
   --------------------------------------------------------- */

.featured-work__carousel--long .featured-work__track {
    position: relative;
    width: min(100%, 1490px);
    height: 766px;
    margin-inline: auto;
    overflow: visible;
}

.featured-work__carousel--long .featured-work__slide {
    top: 0;
    width: 1263px;
    height: 766px;
}

.featured-work__carousel--long .featured-work__slide.is-center {
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    visibility: visible;
    z-index: 8;
    pointer-events: auto;
}

.featured-work__carousel--long .featured-work__slide.is-left,
.featured-work__carousel--long .featured-work__slide.is-right {
    width: 520px;
    height: 690px;
    top: 38px;
    opacity: .38;
    visibility: visible;
    z-index: 3;
    pointer-events: auto;
}

.featured-work__carousel--long .featured-work__slide.is-left {
    left: -150px;
    transform: perspective(1500px) rotateY(6deg);
}

.featured-work__carousel--long .featured-work__slide.is-right {
    right: -150px;
    transform: perspective(1500px) rotateY(-6deg);
}

.featured-work__carousel--long .featured-work__slide.is-far-left,
.featured-work__carousel--long .featured-work__slide.is-far-right {
    display: none;
}

.featured-work__carousel--long .featured-work__video-shell {
    border-radius: 43px;
}

/* ---------------------------------------------------------
   PLAY / PAUSE
   --------------------------------------------------------- */

.featured-work__play {
    position: absolute;
    left: 22px;
    bottom: 20px;
    z-index: 5;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 30px;
    padding: 5px 12px;

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;

    background: rgba(40,40,40,.58);
    color: #FFF;

    font-family: var(--font-cta);
    font-size: 12px;
    line-height: 1;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    cursor: pointer;
}

.featured-work__play-icon {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 7px solid currentColor;
}

.featured-work__play.is-playing .featured-work__play-icon {
    width: 7px;
    height: 8px;
    border: 0;
    background:
        linear-gradient(
            90deg,
            currentColor 0 2px,
            transparent 2px 5px,
            currentColor 5px 7px
        );
}

/* Hide play label on the 29px far peeks */
.featured-work__slide.is-far-left .featured-work__play,
.featured-work__slide.is-far-right .featured-work__play {
    display: none;
}

/* ---------------------------------------------------------
   GLASS ARROWS — attached to center card edges
   --------------------------------------------------------- */

.featured-work__arrow {
    position: absolute;
    top: 50%;
    z-index: 20;

    width: 57px;
    height: 57px;

    display: grid;
    place-items: center;

    padding: 0;
    border: 1px solid rgba(255,255,255,.48);
    border-radius: 50%;

    background: rgba(143,143,143,.50);
    color: #FFF;

    font-family: Arial, sans-serif;
    font-size: 27px;
    font-weight: 300;
    line-height: 1;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.34),
        0 4px 12px rgba(0,0,0,.08);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    cursor: pointer;
    transform: translateY(-50%);
}

.featured-work__carousel--short .featured-work__arrow--prev {
    left: calc(50% - 260px);
}

.featured-work__carousel--short .featured-work__arrow--next {
    right: calc(50% - 260px);
}

.featured-work__carousel--long .featured-work__arrow--prev {
    left: max(18px, calc(50% - 660px));
}

.featured-work__carousel--long .featured-work__arrow--next {
    right: max(18px, calc(50% - 660px));
}

.featured-work__empty {
    position: static !important;
    width: min(90%, 720px) !important;
    height: auto !important;
    margin: 90px auto;
    padding: 34px;
    opacity: 1 !important;
    visibility: visible !important;
    text-align: center;
    border: 1px dashed rgba(0,0,0,.15);
    border-radius: 24px;
    color: var(--color-muted);
    font-family: var(--font-cta);
}

/* ---------------------------------------------------------
   RESPONSIVE
   Scale the complete 1490 × 817 Figma stage as one unit.
   --------------------------------------------------------- */

@media (max-width: 1540px) and (min-width: 761px) {
    .featured-work__carousel--short,
    .featured-work__carousel--long {
        --stage-scale: calc((100vw - 48px) / 1490);
    }

    .featured-work__carousel--short .featured-work__track,
    .featured-work__carousel--long .featured-work__track {
        width: 1490px;
        transform: scale(var(--stage-scale));
        transform-origin: top center;
        left: 50%;
        margin-left: -745px;
    }

    .featured-work__carousel--short {
        height: calc(817px * var(--stage-scale));
    }

    .featured-work__carousel--long {
        height: calc(766px * var(--stage-scale));
    }
}

@media (max-width: 760px) {
    .featured-work {
        padding: 84px 0 100px;
    }

    .featured-work__badge {
        width: 184px;
        height: 38px;
        font-size: 12px;
    }

    .featured-work__mode {
        gap: 9px;
        margin-top: 28px;
    }

    .featured-work__mode-label {
        font-size: 14px;
    }

    .featured-work__stage {
        margin-top: 34px;
    }

    .featured-work__carousel--short .featured-work__track {
        width: 100%;
        height: 600px;
        overflow: hidden;
    }

    .featured-work__carousel--short .featured-work__slide.is-center {
        width: min(76vw, 340px);
        height: min(134vw, 600px);
    }

    .featured-work__carousel--short .featured-work__slide.is-left,
    .featured-work__carousel--short .featured-work__slide.is-right {
        width: min(62vw, 276px);
        height: min(110vw, 490px);
        top: 55px;
    }

    .featured-work__carousel--short .featured-work__slide.is-left {
        left: -36%;
    }

    .featured-work__carousel--short .featured-work__slide.is-right {
        right: -36%;
    }

    .featured-work__carousel--short .featured-work__slide.is-far-left,
    .featured-work__carousel--short .featured-work__slide.is-far-right {
        display: none;
    }

    .featured-work__carousel--short .featured-work__arrow--prev {
        left: 12px;
    }

    .featured-work__carousel--short .featured-work__arrow--next {
        right: 12px;
    }

    .featured-work__carousel--long .featured-work__track {
        width: 100%;
        height: auto;
        min-height: 360px;
        overflow: hidden;
    }

    .featured-work__carousel--long .featured-work__slide.is-center {
        position: relative;
        left: 50%;
        width: min(92vw, 680px);
        height: auto;
        aspect-ratio: 1263 / 766;
    }

    .featured-work__carousel--long .featured-work__slide.is-left,
    .featured-work__carousel--long .featured-work__slide.is-right {
        display: none;
    }

    .featured-work__carousel--long .featured-work__arrow--prev {
        left: 12px;
    }

    .featured-work__carousel--long .featured-work__arrow--next {
        right: 12px;
    }

    .featured-work__arrow {
        width: 46px;
        height: 46px;
        font-size: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .featured-work__slide,
    .featured-work__toggle-knob {
        transition: none;
    }
}

/* =========================================================
   FEATURED WORK V14 — APPLE-LIKE MOTION + FIGMA LONG FORM
   Desktop/tablet only. Mobile rules above remain untouched.
   ========================================================= */

@media (min-width: 761px) {

    /* GPU-friendly motion: position cards from one fixed center anchor. */
    .featured-work__slide {
        left: 50% !important;
        right: auto !important;
        top: 0 !important;

        transform-style: preserve-3d;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;

        transition:
            transform 760ms cubic-bezier(.22, 1, .36, 1),
            width 760ms cubic-bezier(.22, 1, .36, 1),
            height 760ms cubic-bezier(.22, 1, .36, 1),
            opacity 480ms cubic-bezier(.22, 1, .36, 1),
            filter 620ms cubic-bezier(.22, 1, .36, 1);

        will-change: transform, width, height, opacity;
    }

    .featured-work__video-shell,
    .featured-work__video {
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* ---------------- SHORT FORM ----------------
       Figma: 1490 × 817 stage
       center: 462 × 817
       sides: 429 × 765
       far peeks: 29 × 765
    */

    .featured-work__carousel--short .featured-work__slide.is-center {
        width: 462px;
        height: 817px;
        transform: translate3d(-50%, 0, 0);
        z-index: 8;
        opacity: 1;
    }

    .featured-work__carousel--short .featured-work__slide.is-left,
    .featured-work__carousel--short .featured-work__slide.is-right {
        width: 429px;
        height: 765px;
        z-index: 4;
        opacity: 1;
    }

    .featured-work__carousel--short .featured-work__slide.is-left {
        transform:
            translate3d(calc(-50% - 485px), 37px, 0)
            perspective(1600px)
            rotateY(5deg)
            rotateZ(-1deg);
        transform-origin: right center;
    }

    .featured-work__carousel--short .featured-work__slide.is-right {
        transform:
            translate3d(calc(-50% + 485px), 37px, 0)
            perspective(1600px)
            rotateY(-5deg)
            rotateZ(1deg);
        transform-origin: left center;
    }

    .featured-work__carousel--short .featured-work__slide.is-far-left,
    .featured-work__carousel--short .featured-work__slide.is-far-right {
        width: 29px;
        height: 765px;
        z-index: 2;
        opacity: 1;
        overflow: hidden;
    }

    .featured-work__carousel--short .featured-work__slide.is-far-left {
        transform: translate3d(calc(-50% - 733px), 37px, 0);
    }

    .featured-work__carousel--short .featured-work__slide.is-far-right {
        transform: translate3d(calc(-50% + 733px), 37px, 0);
    }

    /* Park non-visible slides just outside the frame so incoming cards
       animate into the 29px peeks instead of popping in. */
    .featured-work__carousel--short .featured-work__slide.is-off-left,
    .featured-work__carousel--short .featured-work__slide.is-off-right {
        width: 29px;
        height: 765px;
        visibility: visible;
        opacity: 0;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
    }

    .featured-work__carousel--short .featured-work__slide.is-off-left {
        transform: translate3d(calc(-50% - 810px), 37px, 0);
    }

    .featured-work__carousel--short .featured-work__slide.is-off-right {
        transform: translate3d(calc(-50% + 810px), 37px, 0);
    }

    .featured-work__carousel--short .featured-work__slide.is-off-left .featured-work__video-shell,
    .featured-work__carousel--short .featured-work__slide.is-off-right .featured-work__video-shell {
        position: absolute;
        top: 0;
        width: 429px;
        height: 765px;
        border-radius: 0;
    }

    .featured-work__carousel--short .featured-work__slide.is-off-left .featured-work__video-shell {
        left: 0;
    }

    .featured-work__carousel--short .featured-work__slide.is-off-right .featured-work__video-shell {
        right: 0;
    }

    /* ---------------- LONG FORM ----------------
       Figma reference:
       center 1263 × 766, radius 43
       two large faded side videos remain visible.
    */

    .featured-work__carousel--long .featured-work__track {
        width: min(100%, 1490px);
        height: 766px;
        overflow: visible;
    }

    .featured-work__carousel--long .featured-work__slide.is-center {
        width: 1263px;
        height: 766px;
        transform: translate3d(-50%, 0, 0);
        opacity: 1;
        visibility: visible;
        z-index: 8;
        pointer-events: auto;
    }

    .featured-work__carousel--long .featured-work__slide.is-left,
    .featured-work__carousel--long .featured-work__slide.is-right {
        width: 1135px;
        height: 688px;
        visibility: visible;
        opacity: 1;
        z-index: 3;
        pointer-events: auto;
    }

    .featured-work__carousel--long .featured-work__slide.is-left {
        transform:
            translate3d(calc(-50% - 980px), 39px, 0)
            perspective(1800px)
            rotateY(3deg);
        transform-origin: right center;
    }

    .featured-work__carousel--long .featured-work__slide.is-right {
        transform:
            translate3d(calc(-50% + 980px), 39px, 0)
            perspective(1800px)
            rotateY(-3deg);
        transform-origin: left center;
    }

    .featured-work__carousel--long .featured-work__slide.is-far-left,
    .featured-work__carousel--long .featured-work__slide.is-far-right,
    .featured-work__carousel--long .featured-work__slide.is-off-left,
    .featured-work__carousel--long .featured-work__slide.is-off-right {
        width: 1135px;
        height: 688px;
        visibility: visible;
        opacity: 0;
        pointer-events: none;
        z-index: 0;
    }

    .featured-work__carousel--long .featured-work__slide.is-far-left,
    .featured-work__carousel--long .featured-work__slide.is-off-left {
        transform: translate3d(calc(-50% - 1500px), 39px, 0);
    }

    .featured-work__carousel--long .featured-work__slide.is-far-right,
    .featured-work__carousel--long .featured-work__slide.is-off-right {
        transform: translate3d(calc(-50% + 1500px), 39px, 0);
    }

    .featured-work__carousel--long .featured-work__video-shell {
        border-radius: 43px;
    }

    /* Figma-style white wash on the two long-form side videos. */
    .featured-work__carousel--long .featured-work__slide.is-left .featured-work__video-shell::after,
    .featured-work__carousel--long .featured-work__slide.is-right .featured-work__video-shell::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.58),
                rgba(217,217,217,.32)
            );
    }

    .featured-work__carousel--long .featured-work__slide.is-left .featured-work__video,
    .featured-work__carousel--long .featured-work__slide.is-right .featured-work__video {
        filter: saturate(.78) brightness(1.07);
    }

    /* Center-edge arrow placement, same glass treatment as Short Form. */
    .featured-work__carousel--long .featured-work__arrow--prev {
        left: calc(50% - 660px);
    }

    .featured-work__carousel--long .featured-work__arrow--next {
        right: calc(50% - 660px);
    }

    .featured-work__arrow {
        transition:
            transform 220ms cubic-bezier(.22,1,.36,1),
            background 220ms ease,
            box-shadow 220ms ease;
    }

    .featured-work__arrow:hover {
        transform: translateY(-50%) scale(1.055);
        background: rgba(125,125,125,.62);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.40),
            0 8px 22px rgba(0,0,0,.11);
    }

    .featured-work__arrow:active {
        transform: translateY(-50%) scale(.97);
    }
}

/* =========================================================
   FEATURED WORK V15 — LONG FORM FIGMA CLIP FIX
   Center: 1263 × 766
   Side assets: 1135 × 688, but only narrow edge previews
   are visible because the 1490px frame clips overflow.
   ========================================================= */

@media (min-width: 761px) {

    .featured-work__carousel--long .featured-work__track {
        position: relative;
        width: 1490px;
        height: 766px;
        margin-inline: auto;

        /* Critical Figma behavior: the parent frame clips the
           oversized side videos, leaving only soft edge previews. */
        overflow: hidden;

        border-radius: 0;
    }

    .featured-work__carousel--long .featured-work__slide {
        left: 50% !important;
        right: auto !important;
        top: 0 !important;

        transition:
            transform 820ms cubic-bezier(.22, 1, .36, 1),
            width 820ms cubic-bezier(.22, 1, .36, 1),
            height 820ms cubic-bezier(.22, 1, .36, 1),
            opacity 520ms cubic-bezier(.22, 1, .36, 1),
            filter 650ms cubic-bezier(.22, 1, .36, 1);
    }

    /* ACTIVE LONG VIDEO */
    .featured-work__carousel--long .featured-work__slide.is-center {
        width: 1263px;
        height: 766px;

        transform: translate3d(-50%, 0, 0);

        visibility: visible;
        opacity: 1;
        z-index: 8;
        pointer-events: auto;
    }

    .featured-work__carousel--long .featured-work__slide.is-center .featured-work__video-shell {
        width: 100%;
        height: 100%;
        border-radius: 43px;
    }

    /* LEFT / RIGHT SIDE VIDEOS:
       keep the full 1135×688 video alive, but position most of it
       outside the clipped 1490px frame just like the Figma frame. */
    .featured-work__carousel--long .featured-work__slide.is-left,
    .featured-work__carousel--long .featured-work__slide.is-right {
        width: 1135px;
        height: 688px;
        top: 39px !important;

        visibility: visible;
        opacity: 1;
        z-index: 3;
        pointer-events: auto;
    }

    .featured-work__carousel--long .featured-work__slide.is-left {
        transform:
            translate3d(calc(-50% - 1195px), 39px, 0)
            perspective(1800px)
            rotateY(2deg);
        transform-origin: right center;
    }

    .featured-work__carousel--long .featured-work__slide.is-right {
        transform:
            translate3d(calc(-50% + 1195px), 39px, 0)
            perspective(1800px)
            rotateY(-2deg);
        transform-origin: left center;
    }

    .featured-work__carousel--long .featured-work__slide.is-left .featured-work__video-shell,
    .featured-work__carousel--long .featured-work__slide.is-right .featured-work__video-shell {
        width: 100%;
        height: 100%;
        border-radius: 43px;
    }

    /* Soft white Figma wash over side previews */
    .featured-work__carousel--long .featured-work__slide.is-left .featured-work__video-shell::after,
    .featured-work__carousel--long .featured-work__slide.is-right .featured-work__video-shell::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.58) 0%,
                rgba(255,255,255,.44) 58%,
                rgba(217,217,217,.28) 100%
            );
    }

    .featured-work__carousel--long .featured-work__slide.is-left .featured-work__video,
    .featured-work__carousel--long .featured-work__slide.is-right .featured-work__video {
        filter: saturate(.78) brightness(1.07);
    }

    /* Keep extra long-form cards completely outside the clipped frame.
       They still have a transform destination so transitions remain smooth. */
    .featured-work__carousel--long .featured-work__slide.is-far-left,
    .featured-work__carousel--long .featured-work__slide.is-off-left {
        width: 1135px;
        height: 688px;
        top: 39px !important;
        visibility: visible;
        opacity: 0;
        pointer-events: none;
        z-index: 0;

        transform: translate3d(calc(-50% - 1650px), 39px, 0);
    }

    .featured-work__carousel--long .featured-work__slide.is-far-right,
    .featured-work__carousel--long .featured-work__slide.is-off-right {
        width: 1135px;
        height: 688px;
        top: 39px !important;
        visibility: visible;
        opacity: 0;
        pointer-events: none;
        z-index: 0;

        transform: translate3d(calc(-50% + 1650px), 39px, 0);
    }

    /* Arrows sit exactly on the active card edges.
       Active card half-width = 631.5px; arrow radius = 28.5px. */
    .featured-work__carousel--long .featured-work__arrow--prev {
        left: calc(50% - 660px);
    }

    .featured-work__carousel--long .featured-work__arrow--next {
        right: calc(50% - 660px);
    }
}

/* =========================================================
   FEATURED WORK V16
   1) smoother Apple-like short-form motion
   2) corrected long-form Figma spacing
   3) real side-card wash + screen-edge fade
   4) responsive fixed-stage scaling
   ========================================================= */

/* ---------------------------------------------------------
   SHORT FORM — smoother position interpolation
   --------------------------------------------------------- */
.featured-work__carousel--short .featured-work__slide {
    transition:
        transform 900ms cubic-bezier(.16, 1, .3, 1),
        width 900ms cubic-bezier(.16, 1, .3, 1),
        height 900ms cubic-bezier(.16, 1, .3, 1),
        opacity 520ms cubic-bezier(.16, 1, .3, 1),
        filter 700ms cubic-bezier(.16, 1, .3, 1);
}

.featured-work__carousel--short .featured-work__video-shell {
    transition:
        border-radius 700ms cubic-bezier(.16, 1, .3, 1),
        filter 700ms cubic-bezier(.16, 1, .3, 1);
}

/* ---------------------------------------------------------
   LONG FORM — desktop Figma geometry
   Stage is wider than the center card so there is an actual
   white gap before the faded side previews.
   --------------------------------------------------------- */
@media (min-width: 761px) {

    .featured-work__carousel--long {
        --long-stage-width: 1780px;
        --long-center-width: 1263px;
        --long-center-height: 766px;
        --long-side-width: 1135px;
        --long-side-height: 688px;
        --long-gap: 30px;
        --long-side-offset: 1229px;
    }

    .featured-work__carousel--long .featured-work__track {
        position: relative;

        width: var(--long-stage-width);
        height: var(--long-center-height);

        margin-inline: auto;

        /*
         * The frame itself clips side videos, exactly like the
         * Figma long-form frame.
         */
        overflow: hidden;

        isolation: isolate;
    }

    .featured-work__carousel--long .featured-work__slide {
        left: 50% !important;
        right: auto !important;
        top: 0 !important;

        transition:
            transform 920ms cubic-bezier(.16, 1, .3, 1),
            width 920ms cubic-bezier(.16, 1, .3, 1),
            height 920ms cubic-bezier(.16, 1, .3, 1),
            opacity 560ms cubic-bezier(.16, 1, .3, 1),
            filter 720ms cubic-bezier(.16, 1, .3, 1);

        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        will-change: transform, opacity, width, height;
    }

    /* ACTIVE CENTER VIDEO */
    .featured-work__carousel--long .featured-work__slide.is-center {
        width: var(--long-center-width);
        height: var(--long-center-height);

        transform: translate3d(-50%, 0, 0);

        visibility: visible;
        opacity: 1;
        z-index: 8;
        pointer-events: auto;
    }

    .featured-work__carousel--long .featured-work__slide.is-center .featured-work__video-shell {
        width: 100%;
        height: 100%;
        border-radius: 43px;
        overflow: hidden;
    }

    /* SIDE VIDEOS — exact 30px visual gap from active video */
    .featured-work__carousel--long .featured-work__slide.is-left,
    .featured-work__carousel--long .featured-work__slide.is-right {
        width: var(--long-side-width);
        height: var(--long-side-height);

        visibility: visible;
        opacity: 1;

        z-index: 3;
        pointer-events: auto;
    }

    .featured-work__carousel--long .featured-work__slide.is-left {
        transform:
            translate3d(calc(-50% - var(--long-side-offset)), 39px, 0)
            perspective(1800px)
            rotateY(2deg);

        transform-origin: right center;
    }

    .featured-work__carousel--long .featured-work__slide.is-right {
        transform:
            translate3d(calc(-50% + var(--long-side-offset)), 39px, 0)
            perspective(1800px)
            rotateY(-2deg);

        transform-origin: left center;
    }

    .featured-work__carousel--long .featured-work__slide.is-left .featured-work__video-shell,
    .featured-work__carousel--long .featured-work__slide.is-right .featured-work__video-shell {
        width: 100%;
        height: 100%;
        border-radius: 43px;
        overflow: hidden;
    }

    /*
     * Strong Figma-style milky fade over side videos.
     * The video remains visible/moving underneath.
     */
    .featured-work__carousel--long .featured-work__slide.is-left .featured-work__video-shell::after,
    .featured-work__carousel--long .featured-work__slide.is-right .featured-work__video-shell::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 4;
        pointer-events: none;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.66) 0%,
                rgba(255,255,255,.52) 50%,
                rgba(235,235,235,.42) 100%
            );
    }

    .featured-work__carousel--long .featured-work__slide.is-left .featured-work__video,
    .featured-work__carousel--long .featured-work__slide.is-right .featured-work__video {
        filter:
            saturate(.66)
            brightness(1.08)
            contrast(.88);
    }

    /* Other cards live just outside the stage for seamless animation. */
    .featured-work__carousel--long .featured-work__slide.is-far-left,
    .featured-work__carousel--long .featured-work__slide.is-off-left {
        width: var(--long-side-width);
        height: var(--long-side-height);

        visibility: visible;
        opacity: 0;
        pointer-events: none;
        z-index: 0;

        transform: translate3d(calc(-50% - 1740px), 39px, 0);
    }

    .featured-work__carousel--long .featured-work__slide.is-far-right,
    .featured-work__carousel--long .featured-work__slide.is-off-right {
        width: var(--long-side-width);
        height: var(--long-side-height);

        visibility: visible;
        opacity: 0;
        pointer-events: none;
        z-index: 0;

        transform: translate3d(calc(-50% + 1740px), 39px, 0);
    }

    /*
     * SCREEN-EDGE FADE:
     * hides the hard cut at the left/right ends of the clipped
     * long-form frame and makes it melt into the page.
     */
    .featured-work__carousel--long .featured-work__track::before,
    .featured-work__carousel--long .featured-work__track::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;

        width: 118px;

        z-index: 14;
        pointer-events: none;
    }

    .featured-work__carousel--long .featured-work__track::before {
        left: 0;
        background:
            linear-gradient(
                90deg,
                var(--color-page) 0%,
                rgba(247,247,245,.88) 26%,
                rgba(247,247,245,.44) 58%,
                rgba(247,247,245,0) 100%
            );
    }

    .featured-work__carousel--long .featured-work__track::after {
        right: 0;
        background:
            linear-gradient(
                270deg,
                var(--color-page) 0%,
                rgba(247,247,245,.88) 26%,
                rgba(247,247,245,.44) 58%,
                rgba(247,247,245,0) 100%
            );
    }

    /* Arrows remain above the fade and sit on center video edges. */
    .featured-work__carousel--long .featured-work__arrow {
        z-index: 20;
    }

    .featured-work__carousel--long .featured-work__arrow--prev {
        left: calc(50% - 660px);
    }

    .featured-work__carousel--long .featured-work__arrow--next {
        right: calc(50% - 660px);
    }
}

/* ---------------------------------------------------------
   RESPONSIVE LONG-FORM STAGE
   Scale the whole Figma composition as one unit.
   --------------------------------------------------------- */
@media (max-width: 1828px) and (min-width: 761px) {

    .featured-work__carousel--long {
        --long-stage-scale: calc((100vw - 48px) / 1780);
        height: calc(766px * var(--long-stage-scale));
    }

    .featured-work__carousel--long .featured-work__track {
        width: 1780px;

        left: 50%;
        margin-left: -890px;

        transform: scale(var(--long-stage-scale));
        transform-origin: top center;
    }
}

/* Small tablet: preserve a visible center-to-side gap while scaling. */
@media (max-width: 980px) and (min-width: 761px) {

    .featured-work__carousel--long .featured-work__track::before,
    .featured-work__carousel--long .featured-work__track::after {
        width: 84px;
    }
}

/* ---------------------------------------------------------
   MOBILE LONG FORM
   One centered active video; no hard edge clipping.
   --------------------------------------------------------- */
@media (max-width: 760px) {

    .featured-work__carousel--long {
        height: auto;
    }

    .featured-work__carousel--long .featured-work__track {
        width: 100%;
        height: auto;
        min-height: 360px;

        overflow: hidden;
    }

    .featured-work__carousel--long .featured-work__track::before,
    .featured-work__carousel--long .featured-work__track::after {
        display: none;
    }

    .featured-work__carousel--long .featured-work__slide.is-center {
        position: relative;
        left: 50% !important;

        width: min(92vw, 680px);
        height: auto;
        aspect-ratio: 1263 / 766;

        transform: translateX(-50%);
    }

    .featured-work__carousel--long .featured-work__slide.is-left,
    .featured-work__carousel--long .featured-work__slide.is-right,
    .featured-work__carousel--long .featured-work__slide.is-far-left,
    .featured-work__carousel--long .featured-work__slide.is-far-right,
    .featured-work__carousel--long .featured-work__slide.is-off-left,
    .featured-work__carousel--long .featured-work__slide.is-off-right {
        display: none;
    }
}

/* =========================================================
   FEATURED WORK V17 — GSAP/FLIP MOTION ENGINE
   Prevent CSS transitions from fighting GSAP.
   ========================================================= */

.featured-work.is-gsap-ready .featured-work__slide,
.featured-work.is-gsap-ready .featured-work__video-shell {
    transition: none !important;
}

.featured-work.is-gsap-animating .featured-work__arrow {
    pointer-events: none;
}

/* Keep compositing on the GPU during carousel movement. */
.featured-work.is-gsap-ready .featured-work__slide {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.featured-work.is-gsap-ready .featured-work__video,
.featured-work.is-gsap-ready .featured-work__video-shell {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}