/* ==========================================================================
   Homepage — Our Work (two case studies and the "Trusted by" logo row)
   Plain CSS, scoped to .wk-*. Loaded only by index.html.
   ========================================================================== */

.wk {
    --wk-ink: #f6f4fb;
    --wk-muted: rgba(226, 224, 236, 0.66);
    --wk-faint: rgba(226, 224, 236, 0.42);
    --wk-line: rgba(255, 255, 255, 0.1);
    --wk-purple: #7c3aed;
    --wk-cyan: #0ea5e9;
    --wk-pink: #f472b6;
    --wk-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --wk-gutter: clamp(1.25rem, 4.2vw, 3.5rem);
    position: relative;
    overflow: hidden;
    color: var(--wk-ink);
    background:
        radial-gradient(60rem 34rem at 88% 4%, rgba(124, 58, 237, 0.16), transparent 60%),
        radial-gradient(44rem 30rem at 6% 46%, rgba(14, 165, 233, 0.07), transparent 62%),
        radial-gradient(50rem 30rem at 92% 82%, rgba(244, 114, 182, 0.06), transparent 62%),
        linear-gradient(180deg, #020617 0%, #070b1d 60%, #050817 100%);
    font-family: "Manrope", sans-serif;
    padding: clamp(5rem, 11vw, 9.5rem) 0 clamp(5rem, 10vw, 8.5rem);
}

/* A hairline of brand light where the bright Services section hands off. */
.wk::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.55) 30%, rgba(14, 165, 233, 0.55) 70%, transparent);
    opacity: 0.7;
}

.wk-shell {
    position: relative;
    max-width: 82rem;
    margin: 0 auto;
    padding: 0 var(--wk-gutter);
}

.wk-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #7fd3f7;
}

.wk-label::before {
    content: "";
    width: 1.75rem;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}

/* ---------- Intro ---------- */

.wk-intro {
    display: grid;
    gap: 2rem;
    align-items: end;
    margin-bottom: clamp(3.5rem, 8vw, 7rem);
}

.wk-title {
    margin: 1.4rem 0 0;
    font-size: clamp(2.5rem, 5.6vw, 4.9rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.035em;
}

.wk-title span {
    display: block;
}

.wk-title-soft {
    /* Room below the line so descenders keep their gradient. */
    padding-bottom: 0.16em;
    margin-bottom: -0.16em;
    color: transparent;
    background: linear-gradient(92deg, #c9b4ff 0%, #8fd8f8 60%, #f6b6dc 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.wk-lede {
    max-width: 30rem;
    margin: 0;
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    line-height: 1.75;
    color: var(--wk-muted);
}

@media (min-width: 960px) {
    .wk-intro {
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
        gap: 3.5rem;
    }

    .wk-lede {
        justify-self: end;
        padding-bottom: 0.6rem;
    }
}

/* ---------- Case studies: each project's key visual at 16:9, with the
   client's logo floating over it in its own light ---------- */

.wk-cases {
    display: grid;
    gap: clamp(3rem, 7vw, 3.5rem) clamp(1.25rem, 3vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 1024px) {
    .wk-cases {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.wk-card {
    display: block;
    color: inherit;
    text-decoration: none;
}

.wk-stage {
    --wk-rx: 0deg;
    --wk-ry: 0deg;
    --wk-px: 0px;
    --wk-py: 0px;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0.5rem;
    background: #05060f;
    box-shadow:
        0 40px 70px -52px rgba(var(--wk-a), 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.06);
    isolation: isolate;
    transition: box-shadow 0.8s var(--wk-ease);
}

/* The key visual drifts slowly and leans a little with the pointer. */
.wk-photo {
    position: absolute;
    inset: -3%;
    transform: translate3d(var(--wk-px), calc(var(--wk-py) + var(--mx-py, 0%) * 0.3), 0);
    transition: transform 1.2s var(--wk-ease);
}

.wk-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 1.4s var(--wk-ease), filter 0.9s var(--wk-ease);
}

/* Soft light behind the logo, as on the brands' own key art. */
.wk-veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.wk-case--safe .wk-veil {
    background:
        radial-gradient(38% 50% at 50% 50%, rgba(5, 5, 9, 0.66), rgba(5, 5, 9, 0.3) 55%, transparent 80%),
        radial-gradient(30% 40% at 50% 50%, rgba(255, 214, 10, 0.2), transparent 72%);
}

.wk-case--crys .wk-veil {
    background:
        radial-gradient(40% 56% at 50% 50%, rgba(252, 237, 230, 0.97) 0%, rgba(250, 229, 219, 0.94) 44%, rgba(247, 218, 207, 0.64) 66%, rgba(246, 214, 204, 0) 86%);
}

.wk-mark {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    perspective: 900px;
}

.wk-mark-float {
    width: 50%;
}

.wk-case--crys .wk-mark-float {
    width: 40%;
}

.wk-mark-tilt {
    position: relative;
    transform: rotateX(var(--wk-rx)) rotateY(var(--wk-ry));
    transition: transform 0.9s var(--wk-ease), scale 0.9s var(--wk-ease);
}

.wk-mark-img {
    display: block;
    width: 100%;
    height: auto;
}

.wk-case--safe .wk-mark-img {
    filter:
        drop-shadow(0 22px 26px rgba(0, 0, 0, 0.6))
        drop-shadow(0 0 32px rgba(255, 214, 10, 0.32));
}

.wk-case--crys .wk-mark-img {
    filter: drop-shadow(0 12px 18px rgba(110, 66, 36, 0.26));
}

/* A band of light that catches the logo now and then (shaped by the logo). */
.wk-mark-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.62) 48%, rgba(255, 255, 255, 0.14) 55%, transparent 62%);
    background-size: 260% 100%;
    background-position: 130% 0;
    -webkit-mask: var(--wk-logo) center / 100% 100% no-repeat;
    mask: var(--wk-logo) center / 100% 100% no-repeat;
}

.wk-stage-n {
    position: absolute;
    top: 0.9rem;
    left: 0.95rem;
    padding: 0.32rem 0.55rem;
    border-radius: 0.25rem;
    background: rgba(5, 6, 16, 0.55);
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.85);
    font-variant-numeric: tabular-nums;
}

/* Phones and small tablets: the pictures stand on their own, no counter. */
@media (max-width: 899px) {
    .wk-stage-n {
        display: none;
    }
}

/* With motion: the logo arrives a beat after its card opens. */
.mx-on .wk-case.mx-fade .wk-mark {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(8px);
    transition:
        opacity 0.8s ease calc(var(--mx-d, 0ms) + 0.4s),
        transform 1.1s var(--wk-ease) calc(var(--mx-d, 0ms) + 0.4s),
        filter 0.8s ease calc(var(--mx-d, 0ms) + 0.4s);
}

.mx-on .wk-case.mx-fade.mx-in .wk-mark {
    opacity: 1;
    transform: none;
    filter: none;
}

/* ---------- Under each stage ---------- */

.wk-meta {
    padding-top: 1.5rem;
}

.wk-name {
    margin: 0;
    font-size: clamp(1.6rem, 2.6vw, 2.25rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.wk-desc {
    max-width: 30rem;
    margin: 0.55rem 0 0;
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.55;
    color: var(--wk-muted);
}

.wk-cta {
    display: flex;
    width: fit-content;
    align-items: center;
    transform-origin: left center;
    transition: scale 0.5s var(--wk-ease);
    gap: 0.9rem;
    margin-top: 1.25rem;
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wk-ink);
}

.wk-arrow {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.375rem;
    transition: border-color 0.5s var(--wk-ease), background-color 0.5s var(--wk-ease);
}

.wk-arrow svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.5s var(--wk-ease);
}

.wk-card:focus-visible {
    outline: none;
}

.wk-card:focus-visible .wk-stage {
    outline: 2px solid #7dd3fc;
    outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
    .wk-card:hover .wk-stage {
        box-shadow:
            0 50px 90px -46px rgba(var(--wk-a), 0.85),
            0 0 0 1px rgba(var(--wk-a), 0.35);
    }

    /* The picture leans back and dims so the logo steps forward. */
    .wk-card:hover .wk-photo img {
        scale: 1.06;
        filter: brightness(0.7) saturate(1.05);
    }

    .wk-card:hover .wk-mark-tilt {
        scale: 1.07;
    }

    .wk-card:hover .wk-cta {
        scale: 1.05;
    }

    .wk-card:hover .wk-arrow {
        border-color: transparent;
        background-color: rgba(var(--wk-a), 0.9);
        color: #0b0b12;
    }

    .wk-card:hover .wk-arrow svg {
        transform: translateX(2px);
    }
}

/* ---------- Trusted by: a slow row of client logos ----------
   Every logo is a white version (assets/images/clients/). Each item's --h is its
   height in pixels, set so all of them carry about the same visual weight. */

.wk-trusted {
    display: grid;
    gap: 1.75rem;
    margin-top: clamp(4.5rem, 10vw, 7.5rem);
}

.wk-trusted-label {
    justify-self: center;
}

.wk-logos {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* Every logo is decoded up front (decoding="sync" in the markup), so none is
   dropped and re-decoded as the row moves; that is what made it flicker now
   and then. */
.wk-logos-track {
    display: flex;
    width: max-content;
    animation: wk-logos 42s linear infinite;
    will-change: transform;
}

/* Grab the row to slide it (a finger, or a pressed mouse): the script. A
   vertical swipe over it still scrolls the page. */
.wk-logos.is-grabbable {
    cursor: grab;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

.wk-logos.is-dragging {
    cursor: grabbing;
}

.wk-logos.is-grabbable img {
    -webkit-user-drag: none;
    pointer-events: none;
}

.wk-logos-group {
    --wk-logo-scale: 1;
    display: flex;
    flex: none;
    align-items: center;
    gap: clamp(3rem, 6vw, 5.5rem);
    margin: 0;
    padding: 0 clamp(3rem, 6vw, 5.5rem) 0 0;
    list-style: none;
}

.wk-logo {
    display: flex;
    flex: none;
    align-items: center;
}

.wk-logo img {
    display: block;
    width: auto;
    height: calc(var(--h, 40) * 1px * var(--wk-logo-scale));
    opacity: 0.82;
}

@keyframes wk-logos {
    to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 767px) {
    /* Larger on phones; the longer loop keeps the same easy pace. */
    .wk-logos-track {
        animation-duration: 38s;
    }

    .wk-logos-group {
        --wk-logo-scale: 0.95;
        gap: 3.25rem;
        padding-right: 3.25rem;
    }

    .wk-logos.is-grabbable {
        padding-block: 0.5rem;
    }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
    .wk-photo img {
        animation: wk-drift 24s ease-in-out infinite alternate;
    }

    .wk-mark-float {
        animation: wk-float 8s ease-in-out infinite;
    }

    .wk-mark-sheen {
        animation: wk-sheen 7s ease-in-out 1.5s infinite;
    }

    .wk-case--crys .wk-photo img {
        animation-delay: -9s;
    }

    .wk-case--crys .wk-mark-float {
        animation-duration: 9.5s;
        animation-delay: -3.5s;
    }

    .wk-case--crys .wk-mark-sheen {
        animation-delay: 4.5s;
    }
}

/* Hovering sends the light across the logo straight away. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .wk-card:hover .wk-mark-sheen {
        animation: wk-sheen-now 1.3s var(--wk-ease) both;
    }
}

@keyframes wk-drift {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to { transform: scale(1.045) translate3d(-0.8%, -0.6%, 0); }
}

@keyframes wk-float {
    0%, 100% { transform: translate3d(0, -2.2%, 0) rotate(-0.5deg); }
    50% { transform: translate3d(0, 2.2%, 0) rotate(0.5deg); }
}

@keyframes wk-sheen {
    0% { background-position: 130% 0; }
    28%, 100% { background-position: -30% 0; }
}

@keyframes wk-sheen-now {
    from { background-position: 130% 0; }
    to { background-position: -30% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .wk *,
    .wk *::before,
    .wk *::after {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    .wk-mark-tilt,
    .wk-photo {
        transform: none;
    }

    .wk-mark-sheen {
        display: none;
    }

    .wk-logos {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .wk-logos-track {
        width: auto;
        animation: none;
    }

    .wk-logos-group {
        flex: 1;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0.75rem;
        padding: 0;
    }

    .wk-logos-group[aria-hidden="true"] {
        display: none;
    }
}