.community-mosaic {
    position: relative;
    z-index: 2;
    width: min(1050px, calc(100% - 64px));
    height: 504px;
    margin: 36px auto 34px;
    isolation: isolate;
    scroll-margin-top: 100px;
}

.community-mosaic__prompt {
    display: flex;
    height: 48px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: rgba(231, 239, 255, .78);
    font-family: 'Inter Tight', sans-serif;
    font-size: 16px;
    font-style: normal;
    letter-spacing: .01em;
    line-height: 1.2;
}

.community-mosaic__prompt svg {
    display: block;
    width: 104px;
    height: 28px;
    margin-top: 0;
    overflow: visible;
}

.community-mosaic__prompt path {
    fill: none;
    stroke: rgba(173, 203, 250, .9);
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.community-mosaic__canvas {
    position: relative;
    width: 100%;
    height: 456px;
}

.community-mosaic__canvas.is-ready {
    transform: translate3d(0, 24px, 0) scale(.985);
    transition: transform 800ms cubic-bezier(.16, 1, .3, 1);
}

.community-mosaic__canvas.is-ready.is-revealed {
    transform: translate3d(0, 0, 0) scale(1);
}

.community-mosaic__canvas:focus-within {
    transform: none !important;
    transition: none !important;
}

.community-mosaic__photo {
    --tilt: 0deg;
    --float: 9s;
    --phase: 0s;
    position: absolute;
    z-index: 1;
    display: block;
    overflow: hidden;
    margin: 0;
    border: 1px solid rgba(226, 236, 255, .32);
    border-radius: 14px;
    background: #1b2030;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .3), 0 2px 8px rgba(3, 7, 18, .25);
    opacity: 1;
    transform: rotate(var(--tilt));
    scale: 1.02;
    transition: none;
    animation: mosaic-drift var(--float) ease-in-out var(--phase) infinite;
    animation-play-state: paused;
    will-change: transform, opacity;
}

.community-mosaic__photo.is-inactive {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.community-mosaic__photo.is-leaving {
    z-index: 2;
    visibility: visible;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1200ms cubic-bezier(.4, 0, .2, 1);
}

.community-mosaic__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--crop, 50% 50%);
    transform: scale(var(--image-scale, 1));
    transition: transform 350ms cubic-bezier(.2, .65, .3, 1);
}

/* Loose, staggered collage: each pair shares one stable animated slot. */
.community-mosaic__photo.photo-1, .community-mosaic__photo.photo-7 { left: 3%; top: 28px; width: 25%; height: 166px; --tilt: -2.8deg; --crop: 48% 44%; --float: 8.4s; --phase: -2.1s; }
.community-mosaic__photo.photo-2, .community-mosaic__photo.photo-8 { left: 32%; top: 12px; width: 30%; height: 184px; --tilt: 1.7deg; --crop: 50% 42%; --float: 9.2s; --phase: -5.8s; }
.community-mosaic__photo.photo-3, .community-mosaic__photo.photo-9 { left: 68%; top: 32px; width: 23.13%; height: auto; aspect-ratio: 898 / 744; --tilt: 2.5deg; --crop: 50% 50%; --float: 8.7s; --phase: -3.4s; }
/* These two originals share the taller frame: show the full tracked stance,
   and include the trophy and hands in the portrait rather than excess ceiling. */
.community-mosaic__photo.photo-3 { --crop: 50% 50%; }
.community-mosaic__photo.photo-9 { --image-scale: 1.1; }
.community-mosaic__photo.photo-9 img { transform-origin: left bottom; }
.community-mosaic__photo.photo-4, .community-mosaic__photo.photo-10 { left: 8%; top: 257px; width: 29%; height: 172px; --tilt: 1.5deg; --crop: 50% 45%; --float: 10.1s; --phase: -7s; }
.community-mosaic__photo.photo-5, .community-mosaic__photo.photo-11 { left: 42%; top: 251px; width: 26%; height: 180px; --tilt: -2.2deg; --crop: 54% 48%; --float: 8.9s; --phase: -1.5s; }
.community-mosaic__photo.photo-6, .community-mosaic__photo.photo-12 { left: 72%; top: 296px; width: 25%; height: 162px; --tilt: -1.2deg; --crop: 50% 50%; --float: 9.7s; --phase: -6.2s; }
.community-mosaic__photo.photo-6, .community-mosaic__photo.photo-12 { height: auto; aspect-ratio: 1200 / 479; }
.community-mosaic__photo.photo-6 { --crop: 50% 25%; }

.community-mosaic__canvas.is-active .community-mosaic__photo {
    animation-play-state: running;
}

.community-mosaic__photo:hover {
    z-index: 5;
    border-color: rgba(255,255,255,.78);
}

@media (hover: hover) and (pointer: fine) {
    .community-mosaic__photo.is-active:hover img {
        transform: scale(calc(var(--image-scale, 1) * 1.055));
    }
}

.community-mosaic__photo:focus-visible {
    z-index: 5;
    outline: 2px solid #76aaff;
    outline-offset: 4px;
}

@keyframes mosaic-drift {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--tilt)); }
    50% { transform: translate3d(4px, -8px, 0) rotate(calc(var(--tilt) * -.55)); }
}

.work-with-us-section { z-index: 0; }
.work-with-us-section > div:first-child { z-index: 0; }
.work-with-us-section > div:nth-child(2) { z-index: 1; }

.community-mosaic ~ .work-with-us-section {
    margin-top: 0 !important;
    padding-top: 54px !important;
}

.work-with-us-section.is-journey-ready .journey-content > :not(.is-journey-revealed) {
    opacity: 0;
    transform: translateY(36px) scale(.98);
}

.work-with-us-section .journey-content > .is-journey-revealed {
    animation: journey-arrive .9s cubic-bezier(.16, 1, .3, 1) var(--journey-delay, 0ms) both;
}

@keyframes journey-arrive {
    from { opacity: 0; transform: translateY(36px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.work-with-us-section:focus-within .journey-content > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

@media (max-width: 760px) {
    .community-mosaic {
        --tall-frame-space: clamp(0px, calc(40.6vw - 170px), 65px);
        width: min(540px, calc(100% - 40px));
        height: calc(492px + var(--tall-frame-space));
        margin: 28px auto 30px;
    }

    .community-mosaic__canvas { height: calc(444px + var(--tall-frame-space)); }

    .community-mosaic__photo.photo-1, .community-mosaic__photo.photo-7 { left: 1%; top: 7px; width: 53%; height: 116px; --tilt: -2.8deg; }
    .community-mosaic__photo.photo-2, .community-mosaic__photo.photo-8 { left: 50%; top: 0; width: 47%; height: 126px; --tilt: 1.7deg; }
    .community-mosaic__photo.photo-3, .community-mosaic__photo.photo-9 { left: 8%; top: 155px; width: 40.48%; height: auto; --tilt: 2.5deg; }
    .community-mosaic__photo.photo-4, .community-mosaic__photo.photo-10 { left: 53%; top: 173px; width: 45%; height: 119px; --tilt: 1.5deg; }
    .community-mosaic__photo.photo-5, .community-mosaic__photo.photo-11 { left: 1%; top: calc(324px + var(--tall-frame-space)); width: 48%; height: 116px; --tilt: -2.2deg; }
    .community-mosaic__photo.photo-6, .community-mosaic__photo.photo-12 { left: 50%; top: calc(338px + var(--tall-frame-space)); width: 48%; height: auto; aspect-ratio: 1200 / 479; --tilt: -1.2deg; }

    .community-mosaic ~ .work-with-us-section {
        padding-top: 48px !important;
    }
}

@media (max-width: 390px) {
    .community-mosaic { height: 464px; }
    .community-mosaic__canvas { height: 416px; }
    .community-mosaic__photo.photo-1, .community-mosaic__photo.photo-7 { height: 108px; }
    .community-mosaic__photo.photo-2, .community-mosaic__photo.photo-8 { height: 116px; }
    .community-mosaic__photo.photo-3, .community-mosaic__photo.photo-9 { top: 145px; height: auto; }
    .community-mosaic__photo.photo-4, .community-mosaic__photo.photo-10 { top: 161px; height: 109px; }
    .community-mosaic__photo.photo-5, .community-mosaic__photo.photo-11 { top: 301px; height: 106px; }
    .community-mosaic__photo.photo-6, .community-mosaic__photo.photo-12 { top: 316px; }
}

@media (prefers-reduced-motion: reduce) {
    .community-mosaic__photo img {
        transform: scale(var(--image-scale, 1)) !important;
        transition: none !important;
    }
    .community-mosaic__canvas.is-ready {
        transform: none !important;
        transition: none !important;
    }
    .work-with-us-section .journey-content > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .community-mosaic__photo,
    .community-mosaic__photo.is-inactive,
    .community-mosaic__photo.is-leaving {
        animation: none !important;
        transition: none !important;
        will-change: auto;
    }
}