.works-care {
    position: relative;
    overflow: hidden;
    background: var(--color-light-purple);
    color: var(--color-dark-purple);
    padding: 7.5rem 0;
}

.works-care > .container.grid > .works-care-intro,
.works-care > .container.grid > .works-care__panel {
    grid-column: 1 / -1;
}

/* The intro is pinned at `top top` while the stack assembles, so whatever runs
   past one screen is parked under the pin and never seen. Every inner size is
   budgeted against svh instead: the title and caption take what they need, the
   stack absorbs the rest, and the cards measure themselves off the stack. */
.works-care-intro {
    /* The nav pill floats over every section, so the top pad has to clear it. */
    --care-nav: clamp(3.5rem, 12svh, 6.75rem);
    --care-pad: clamp(1rem, 4svh, 3rem);
    --care-gap: clamp(1rem, 4.6svh, 5.625rem);

    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    padding: var(--care-nav) 0 var(--care-pad);
    margin-bottom: 10.5rem;
}

.works-care-intro__corner {
    position: absolute;
    top: -1.125rem;
    right: -0.75rem;
    z-index: 2;
    width: 130px;
    height: 126px;
    background: var(--color-accent-01);
    clip-path: polygon(26% 0, 100% 0, 100% 82%, 89% 100%, 75% 69%, 58% 50%, 30% 34%, 0 18%);
}

/* The design's own grid patch (uploads/…/shared/grid-brand.avif), placed twice:
   one centred on the left edge in the upper half, one out at the right level with
   the middle of the stack. It rides inside the pinned intro rather than the
   section, so it holds still with the artwork instead of scrolling out from
   under it.

   The asset is a 522px square of 87px hand-ruled ruling that fades out radially,
   with a single diamond marker at 66% / 67% of its box. Both copies are anchored
   by that marker, so the offsets below are where the diamond lands — not where
   the image's corner does — and the fade runs off the viewport edges instead of
   ending on a visible seam. */
.works-care-intro__pattern {
    position: absolute;
    /* Under the headline and the stack, but still inside the intro's own
       stacking context, so it stays above the section's background. */
    z-index: -1;
    width: 522px;
    height: auto;
    transform: translate(-66%, -67%);
    opacity: 0.65;
    pointer-events: none;
}

.works-care-intro__pattern--left {
    left: 6%;
    top: 45%;
}

.works-care-intro__pattern--right {
    left: 97%;
    top: 60%;
}

.works-care-intro__title {
    flex: 0 0 auto;
    margin: 0 0 var(--care-gap);
    color: var(--color-dark-purple);
    font-family: var(--font-display);
    /* Sized to hold one line: the vw term keeps a fixed ratio to the content
       column, which stays the wider of the two down to ~535px. The svh term
       only ever shrinks it further, so a short screen hands room back to the
       stack without ever forcing the headline to wrap. */
    font-size: min(clamp(2rem, 4.86vw, 4.375rem), max(1.5rem, 9svh));
    font-weight: var(--fw-bold);
    line-height: 1.1;
}

.works-care-intro__title em {
    font-style: italic;
}

/* Takes whatever height the title and caption left over, and becomes a size
   container so the cards can be measured against it. Every child is absolutely
   positioned, so nothing here wants to size itself off its contents anyway. */
.works-care-intro__showcase {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    container-type: size;
    width: min(1000px, 78vw);
    margin: 0 auto;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.works-care-intro__showcase.is-stacking {
    cursor: default;
}

/* The scroll scrub moves the cards every frame while they stack, so the
   drag and throw transitions would only drag behind it. */
.works-care-intro__showcase.is-stacking .works-care-intro__card {
    pointer-events: none;
    transition: none;
}

.works-care-intro__card {
    /* Share of the stack's height the frame may take. The rest is what the
       rotated poses lean into, so a tilted card still clears the edges. */
    --card-fit: 0.82;
    --card-max: min(620px, 62cqw);

    position: absolute;
    overflow: hidden;
    /* Whichever runs out first — the stack's width or its height — caps the
       card, so the frame keeps its ratio on any screen. */
    width: min(var(--card-max), calc(100cqh * var(--card-fit) * 2880 / 2180));
    aspect-ratio: 2880 / 2180;
    margin: 0;
    padding: clamp(0.375rem, 1.6cqh, 0.75rem);
    left: 50%;
    top: 50%;
    border-radius: 16px;
    background: var(--color-white);
    box-shadow: 0 18px 40px rgba(45, 44, 108, 0.12);
    cursor: grab;
    pointer-events: none;
    touch-action: pan-y;
    transform: translate3d(calc(-50% + var(--card-x, 0px)), calc(-50% + var(--card-y, 0px) + var(--card-lift, 0px)), 0) rotate(var(--card-rotate, 0deg)) scale(var(--card-scale, 1));
    transition:
        transform 440ms cubic-bezier(0.2, 0.9, 0.2, 1.18),
        opacity 180ms ease,
        box-shadow 180ms ease;
    will-change: transform;
}

.works-care-intro__card.is-top {
    cursor: grab;
    pointer-events: auto;
}

.works-care-intro__card.is-dragging {
    cursor: grabbing;
    box-shadow: 0 24px 56px rgba(45, 44, 108, 0.2);
    transition: none;
}

.works-care-intro__card.is-swiping {
    pointer-events: none;
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.works-care-intro__showcase.is-dragging,
.works-care-intro__showcase.is-dragging .works-care-intro__card {
    cursor: grabbing;
}

.works-care-intro__card--1 {
    --card-x: -14px;
    --card-y: -10px;
    --card-rotate: -5deg;
    z-index: 10;
}

.works-care-intro__card--2 {
    --card-x: 16px;
    --card-y: -4px;
    --card-rotate: 2deg;
    z-index: 9;
}

.works-care-intro__card--3 {
    --card-x: -8px;
    --card-y: 8px;
    --card-rotate: 7deg;
    z-index: 8;
}

.works-care-intro__card--4 {
    --card-x: 18px;
    --card-y: 12px;
    --card-rotate: -3deg;
    z-index: 7;
}

.works-care-intro__card--5 {
    --card-x: 4px;
    --card-y: 18px;
    --card-rotate: 1deg;
    z-index: 6;
}

.works-care-intro__card--6 {
    --card-x: -20px;
    --card-y: 24px;
    --card-rotate: -8deg;
    z-index: 5;
}

.works-care-intro__card--7 {
    --card-x: 22px;
    --card-y: 26px;
    --card-rotate: 6deg;
    z-index: 4;
}

.works-care-intro__card--8 {
    --card-x: -12px;
    --card-y: 32px;
    --card-rotate: 3deg;
    z-index: 3;
}

.works-care-intro__card--9 {
    --card-x: 12px;
    --card-y: 36px;
    --card-rotate: -6deg;
    z-index: 2;
}

.works-care-intro__card--10 {
    --card-x: 0px;
    --card-y: 42px;
    --card-rotate: 4deg;
    z-index: 1;
}

.works-care-intro__image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
}

.works-care-intro__caption {
    position: relative;
    /* Above the whole stack (cards run 1–10): now that the caption shares the
       screen with the fly-in, the cards have to pass behind it, not over it. */
    z-index: 11;
    flex: 0 0 auto;
    /* Two lines at 16px. The copy needs 560px to hold the second line; the
       extra 40px is slack so an edit in the field can't tip it to three. */
    width: min(600px, 100%);
    margin: var(--care-gap) 0 0 auto;
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: var(--fw-regular);
    line-height: 1.6667;
    letter-spacing: 0;
}

.works-care__panel {
    position: relative;
    z-index: 2;
    overflow: hidden;
    width: 100%;
    min-height: 760px;
    margin: 0;
    padding: 5.3125rem 4.8125rem 5rem;
    border-radius: 16px;
    background: var(--color-primary);
}

.works-care__grid {
    position: absolute;
    left: -0.125rem;
    top: 0;
    width: 332px;
    height: 294px;
    opacity: 0.18;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(234, 234, 247, 0.36) 1px, transparent 1px),
        linear-gradient(90deg, rgba(234, 234, 247, 0.36) 1px, transparent 1px);
    background-size: 76px 76px;
}

.works-care__cat {
    position: absolute;
    left: -56px;
    bottom: -56px;
    width: 254px;
    height: 254px;
    background: var(--color-soft-purple);
    mask: url("../../../../../uploads/meowgical/images/work/transition-cat.svg") center / contain no-repeat;
    -webkit-mask: url("../../../../../uploads/meowgical/images/work/transition-cat.svg") center / contain no-repeat;
    pointer-events: none;
    transform: rotate(12.46deg);
}

.works-care__header {
    position: relative;
    z-index: 1;
    margin: 0 auto 7.75rem;
    text-align: center;
}

.works-care__title {
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: clamp(3.25rem, 5.3vw, 5rem);
    font-weight: var(--fw-bold);
    line-height: 1.1;
}

.works-care__subtitle {
    margin: 0.5rem 0 0;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: var(--fw-semibold);
    line-height: 1.6;
    letter-spacing: 0;
}

.works-care__list {
    position: relative;
    z-index: 1;
}

.works-care-project {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 600px);
    gap: 5rem;
    align-items: start;
    padding: 2.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.48);
}

.works-care-project:last-child {
    padding-bottom: 0;
}

.works-care-project__title {
    margin: 0 0 1rem;
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: var(--fw-bold);
    line-height: 1.1875;
    letter-spacing: 0;
}

.works-care-project__content p {
    margin: 0 0 1.125rem;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: var(--fw-regular);
    line-height: 1.4444;
}

.works-care-project__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 2rem 0.75rem 0;
    color: var(--color-light-purple);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: var(--fw-bold);
    line-height: 1.5;
}

.works-care-project__link:hover {
    color: var(--color-light-purple);
}

.works-care-project__link-icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: var(--color-accent-01);
}

.works-care-project__link-icon::before,
.works-care-project__link-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    background: currentColor;
}

.works-care-project__link-icon::before {
    left: 4px;
    width: 12px;
    height: 2px;
    transform: translateY(-50%);
}

.works-care-project__link-icon::after {
    right: 4px;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    background: transparent;
    transform: translateY(-50%) rotate(45deg);
}

/* `.section-bg :is(h1…h6) { color: inherit }` in _shared.css outranks the
   single-class rules above, so the headings sitting on the primary-purple panel
   need a scoped colour or they inherit the dark purple off `.works-care`.
   Colour only — the size rules above and in the media queries must still win. */
.works-care__panel .works-care__title,
.works-care__panel .works-care-project__title {
    color: var(--color-white);
}

.works-care-project__media {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 600 / 400;
    margin: 0;
    border-radius: 16px;
    background: var(--color-dark-purple);
}

.works-care-project__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1024px) {
    /* Two 522px patches would swallow a narrower viewport, so they shrink with
       it. The marker anchor is a share of the image, so it holds either way. */
    .works-care-intro__pattern {
        width: 52vw;
    }

    .works-care {
        padding: 5rem 0;
    }

    .works-care-intro {
        margin-bottom: 6rem;
    }

    .works-care-intro__showcase {
        width: min(100%, 760px);
    }

    .works-care__panel {
        padding: 4rem 2rem;
    }

    .works-care__header {
        margin-bottom: 4rem;
    }

    .works-care-project {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .works-care {
        padding: 4rem 0;
    }

    .works-care-intro__corner,
    .works-care-intro__pattern {
        display: none;
    }

    .works-care-intro__title {
        font-size: min(clamp(2.5rem, 12vw, 4rem), max(1.25rem, 7svh));
    }

    .works-care-intro__showcase {
        width: 100%;
    }

    .works-care-intro__card {
        --card-max: min(320px, 82cqw);

        border-radius: 12px;
    }

    .works-care-intro__card--6,
    .works-care-intro__card--7,
    .works-care-intro__card--8,
    .works-care-intro__card--9,
    .works-care-intro__card--10 {
        display: none;
    }

    .works-care-intro__caption {
        font-size: clamp(0.625rem, 1.9svh, 0.875rem);
    }

    .works-care__panel {
        padding: 3rem 1.25rem;
        border-radius: 12px;
    }

    .works-care__cat {
        display: none;
    }

    .works-care__title {
        font-size: clamp(2.5rem, 11vw, 3.5rem);
    }

    .works-care__subtitle {
        font-size: 1rem;
    }

    .works-care-project {
        padding: 2rem 0;
    }

    .works-care-project__title {
        font-size: 1.5rem;
    }

    .works-care-project__content p,
    .works-care-project__link {
        font-size: 0.9375rem;
    }
}