/* =========================================================
   UMIX TILE CONSTRUCTION LLC
   GALLERY.HTML

   02. GALLERY HERO
   ========================================================= */


/* =========================================================
   HERO SHELL
   ========================================================= */

.umix-gallery-hero {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 46%)
        minmax(0, 54%);

    width: 100%;

    height:
        min(
            56svh,
            620px
        );

    min-height:
        min(
            500px,
            calc(
                100svh -
                var(--umix-header-height)
            )
        );

    max-height:
        calc(
            100svh -
            var(--umix-header-height)
        );

    overflow: hidden;

    isolation: isolate;

    color:
        var(--umix-text-main);

    background:
        var(--umix-ink);
}



/* =========================================================
   CONTENT SIDE
   ========================================================= */

.umix-gallery-hero__content {
    position: relative;

    z-index: 5;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    background:

        radial-gradient(
            ellipse at 8% 10%,
            rgba(166,133,100,0.13),
            transparent 29rem
        ),

        radial-gradient(
            ellipse at 80% 85%,
            rgba(255,255,255,0.026),
            transparent 31rem
        ),

        radial-gradient(
            ellipse at 44% 50%,
            rgba(86,66,51,0.075),
            transparent 40%
        ),

        linear-gradient(
            129deg,
            #121210 0%,
            #1A1A18 52%,
            #141412 100%
        );
}



/* Mineral texture */

.umix-gallery-hero__content::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    opacity: 0.62;

    background:

        linear-gradient(
            119deg,
            transparent 0%,
            transparent 22%,
            rgba(255,255,255,0.022) 22.2%,
            rgba(166,133,100,0.02) 22.4%,
            transparent 22.75%
        ),

        linear-gradient(
            68deg,
            transparent 0%,
            transparent 64%,
            rgba(255,255,255,0.016) 64.2%,
            transparent 64.58%
        ),

        radial-gradient(
            ellipse at 20% 78%,
            transparent 0%,
            transparent 50%,
            rgba(255,255,255,0.013) 50.3%,
            transparent 51%
        );
}



/* Soft transition into image */

.umix-gallery-hero__content::after {
    content: "";

    position: absolute;

    top: 0;
    right: -1px;
    bottom: 0;

    z-index: 3;

    width:
        clamp(
            55px,
            6vw,
            95px
        );

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(15,15,13,0.32)
        );
}



/* =========================================================
   CONTENT INNER
   ========================================================= */

.umix-gallery-hero__content-inner {
    position: relative;

    z-index: 4;

    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 100%;
    height: 100%;

    min-width: 0;

    padding:

        clamp(
            1.3rem,
            2.6vh,
            2rem
        )

        clamp(
            1.8rem,
            3vw,
            3.5rem
        )

        clamp(
            1.3rem,
            2.6vh,
            2rem
        )

        max(
            var(--umix-gutter),
            calc(
                (
                    100vw -
                    var(--umix-container)
                ) / 2
                +
                var(--umix-gutter)
            )
        );
}



/* =========================================================
   EYEBROW
   ========================================================= */

.umix-gallery-hero__eyebrow {
    display: flex;
    align-items: center;

    gap: 0.8rem;

    margin-bottom:
        clamp(
            0.8rem,
            1.8vh,
            1.25rem
        );

    color:
        var(--umix-bronze-soft);
}


.umix-gallery-hero__eyebrow > span {
    width: 38px;
    height: 1px;

    background:
        var(--umix-bronze);

    transform-origin:
        left center;
}


.umix-gallery-hero__eyebrow p {
    margin: 0;

    font-size:
        var(--umix-fs-label);

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.2em;

    text-transform: uppercase;
}



/* =========================================================
   TITLE
   ========================================================= */

.umix-gallery-hero__title {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 760px;

    margin:
        0
        0
        clamp(
            1rem,
            2.1vh,
            1.45rem
        );

    font-family:
        var(--umix-font-display);

    font-size:
        clamp(
            3.2rem,
            min(5vw, 8.5vh),
            5.75rem
        );

    font-weight: 600;

    line-height: 0.9;

    letter-spacing:
        -0.046em;
}


.umix-gallery-hero__title-mask {
    display: block;

    overflow: hidden;

    padding-bottom:
        0.075em;
}


.umix-gallery-hero__title-mask > span {
    display: block;
}


.umix-gallery-hero__title-mask--accent {
    color:
        var(--umix-bronze-soft);
}



/* =========================================================
   DESCRIPTION
   ========================================================= */

.umix-gallery-hero__description {
    width: 100%;
    max-width: 570px;

    margin:
        0
        0
        clamp(
            1.15rem,
            2.4vh,
            1.7rem
        );

    color:
        var(--umix-text-soft);

    font-size:
        clamp(
            1rem,
            0.96rem + 0.13vw,
            1.1rem
        );

    line-height: 1.62;

    text-wrap: pretty;
}



/* =========================================================
   ACTIONS
   ========================================================= */

.umix-gallery-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        1rem
        1.35rem;

    margin-bottom:
        clamp(
            1.25rem,
            2.6vh,
            1.8rem
        );
}


.umix-gallery-hero__button {
    min-width:
        205px;
}


.umix-gallery-hero__button svg,
.umix-gallery-hero__estimate svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform
        350ms
        var(--umix-ease);
}


.umix-gallery-hero__button:hover svg {
    transform:
        translateY(4px);
}



/* Estimate text link */

.umix-gallery-hero__estimate {
    display: inline-flex;
    align-items: center;

    gap: 0.7rem;

    color:
        var(--umix-text-soft);

    font-size:
        var(--umix-fs-button);

    font-weight: 700;

    letter-spacing:
        0.07em;

    text-transform: uppercase;

    transition:
        color
        300ms
        var(--umix-ease);
}


.umix-gallery-hero__estimate:hover {
    color:
        var(--umix-bronze-light);
}


.umix-gallery-hero__estimate:hover svg {
    transform:
        translateX(5px);
}



/* =========================================================
   MATERIALS
   ========================================================= */

.umix-gallery-hero__materials {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0.55rem;

    color:
        var(--umix-text-muted);

    font-size:
        clamp(
            0.72rem,
            0.7rem + 0.04vw,
            0.78rem
        );

    font-weight: 600;

    line-height: 1.3;

    letter-spacing:
        0.12em;

    text-transform: uppercase;
}


.umix-gallery-hero__materials i {
    display: block;

    width: 4px;
    height: 4px;

    transform:
        rotate(45deg);

    border:
        1px solid
        var(--umix-bronze);
}



/* =========================================================
   CONTENT GEOMETRY
   ========================================================= */

.umix-gallery-hero__geometry {
    position: absolute;

    left: -110px;
    bottom: -120px;

    z-index: 2;

    width:
        clamp(
            175px,
            16vw,
            255px
        );

    aspect-ratio: 1;

    opacity: 0.15;

    transform:
        rotate(45deg);

    pointer-events: none;
}


.umix-gallery-hero__geometry span {
    position: absolute;

    border:
        1px solid
        var(--umix-bronze);
}


.umix-gallery-hero__geometry span:nth-child(1) {
    inset: 0;
}


.umix-gallery-hero__geometry span:nth-child(2) {
    inset: 38px;
}


.umix-gallery-hero__geometry span:nth-child(3) {
    inset: 78px;
}



/* =========================================================
   VISUAL
   ========================================================= */

.umix-gallery-hero__visual {
    position: relative;

    z-index: 1;

    min-width: 0;
    min-height: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    isolation: isolate;

    background:
        linear-gradient(
            135deg,
            #28261F,
            #171715
        );
}



/* =========================================================
   IMAGE
   ========================================================= */

.umix-gallery-hero__image {
    position: absolute;
    inset: 0;

    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.07)
        translate3d(
            var(--gallery-hero-x, 0px),
            var(--gallery-hero-y, 0px),
            0
        );

    will-change: transform;
}



/* =========================================================
   IMAGE OVERLAYS
   ========================================================= */

.umix-gallery-hero__shade {
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            rgba(13,13,11,0.36) 0%,
            rgba(13,13,11,0.08) 30%,
            transparent 52%
        ),

        linear-gradient(
            180deg,
            rgba(10,10,9,0.05) 0%,
            transparent 38%,
            rgba(10,10,9,0.08) 62%,
            rgba(10,10,9,0.47) 100%
        );
}


.umix-gallery-hero__warmth {
    position: absolute;
    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 65% 23%,
            rgba(198,154,109,0.13),
            transparent 35%
        );

    mix-blend-mode:
        soft-light;
}



/* =========================================================
   VISUAL LABEL
   ========================================================= */

.umix-gallery-hero__visual-label {
    position: absolute;

    z-index: 5;

    top:
        clamp(
            1.4rem,
            3.5vh,
            2.6rem
        );

    right:
        clamp(
            1.4rem,
            3vw,
            3rem
        );

    display: flex;
    align-items: flex-start;

    gap: 0.75rem;

    color:
        rgba(247,245,241,0.82);
}


.umix-gallery-hero__visual-label > span {
    width: 32px;
    height: 1px;

    margin-top: 0.5rem;

    background:
        var(--umix-bronze-soft);
}


.umix-gallery-hero__visual-label p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0.4rem;

    max-width:
        230px;

    margin: 0;

    font-size: 0.7rem;

    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.umix-gallery-hero__visual-label strong {
    color:
        var(--umix-bronze-light);
}



/* =========================================================
   EDITORIAL STATEMENT
   ========================================================= */

.umix-gallery-hero__editorial {
    position: absolute;

    z-index: 5;

    left:
        clamp(
            1.5rem,
            3vw,
            3.25rem
        );

    bottom:
        clamp(
            3.7rem,
            7vh,
            5.5rem
        );

    max-width:
        290px;
}


.umix-gallery-hero__editorial p {
    margin:
        0
        0
        0.8rem;

    font-family:
        var(--umix-font-display);

    font-size:
        clamp(
            1.7rem,
            2.3vw,
            2.8rem
        );

    font-weight: 600;

    line-height: 0.98;

    letter-spacing:
        -0.025em;

    color:
        rgba(247,245,241,0.92);
}


.umix-gallery-hero__editorial p span {
    color:
        var(--umix-bronze-light);
}


.umix-gallery-hero__editorial i {
    display: block;

    width: 58px;
    height: 1px;

    background:
        var(--umix-bronze);
}



/* =========================================================
   VISUAL BOTTOM
   ========================================================= */

.umix-gallery-hero__visual-bottom {
    position: absolute;

    z-index: 5;

    right:
        clamp(
            1.5rem,
            3vw,
            3rem
        );

    bottom:
        clamp(
            1.2rem,
            2.5vh,
            1.8rem
        );

    display: flex;
    align-items: center;

    gap: 0.7rem;

    color:
        rgba(247,245,241,0.68);
}


.umix-gallery-hero__visual-bottom > span {
    width: 34px;
    height: 1px;

    background:
        var(--umix-bronze-soft);
}


.umix-gallery-hero__visual-bottom p {
    margin: 0;

    font-size: 0.67rem;

    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}



/* =========================================================
   IMAGE CORNER
   ========================================================= */

.umix-gallery-hero__corner {
    position: absolute;

    z-index: 5;

    top: 18px;
    left: 18px;

    width: 82px;
    height: 82px;

    pointer-events: none;
}


.umix-gallery-hero__corner::before,
.umix-gallery-hero__corner::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    background:
        var(--umix-bronze-soft);
}


.umix-gallery-hero__corner::before {
    width: 100%;
    height: 1px;
}


.umix-gallery-hero__corner::after {
    width: 1px;
    height: 100%;
}



/* =========================================================
   BOTTOM EDGE
   ========================================================= */

.umix-gallery-hero__bottom-edge {
    position: absolute;

    z-index: 8;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    overflow: hidden;

    background:
        rgba(255,255,255,0.05);
}


.umix-gallery-hero__bottom-edge span {
    display: block;

    width: 45%;
    height: 100%;

    transform:
        translateX(-110%);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--umix-bronze),
            transparent
        );
}



/* =========================================================
   INITIAL ANIMATION STATE
   ========================================================= */

.js
.umix-gallery-hero__title-mask > span {
    transform:
        translate3d(
            0,
            112%,
            0
        );
}


.js
[data-gallery-hero-reveal] {
    opacity: 0;

    transform:
        translate3d(
            0,
            16px,
            0
        );
}


.js
.umix-gallery-hero__image {
    clip-path:
        inset(
            0
            100%
            0
            0
        );
}



/* =========================================================
   READY
   ========================================================= */

.umix-gallery-hero.is-ready
.umix-gallery-hero__title-mask > span {
    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        transform
        850ms
        var(--umix-ease);
}


.umix-gallery-hero.is-ready
.umix-gallery-hero__title-mask:nth-child(2) > span {
    transition-delay:
        90ms;
}



/* Image mask */

.umix-gallery-hero.is-ready
.umix-gallery-hero__image {
    clip-path:
        inset(
            0
            0
            0
            0
        );

    transform:
        scale(1.035)
        translate3d(
            var(--gallery-hero-x, 0px),
            var(--gallery-hero-y, 0px),
            0
        );

    transition:
        clip-path
        1100ms
        var(--umix-ease)
        40ms,

        transform
        1500ms
        var(--umix-ease);
}



/* Supporting content */

.umix-gallery-hero.is-ready
[data-gallery-hero-reveal] {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        opacity
        620ms
        var(--umix-ease),
        transform
        620ms
        var(--umix-ease);
}


.umix-gallery-hero.is-ready
[data-gallery-hero-reveal="eyebrow"] {
    transition-delay: 70ms;
}


.umix-gallery-hero.is-ready
[data-gallery-hero-reveal="description"] {
    transition-delay: 270ms;
}


.umix-gallery-hero.is-ready
[data-gallery-hero-reveal="actions"] {
    transition-delay: 350ms;
}


.umix-gallery-hero.is-ready
[data-gallery-hero-reveal="materials"] {
    transition-delay: 430ms;
}


.umix-gallery-hero.is-ready
[data-gallery-hero-reveal="visual-label"] {
    transition-delay: 480ms;
}


.umix-gallery-hero.is-ready
[data-gallery-hero-reveal="editorial"] {
    transition-delay: 540ms;
}


.umix-gallery-hero.is-ready
[data-gallery-hero-reveal="visual-bottom"] {
    transition-delay: 610ms;
}


.umix-gallery-hero.is-ready
.umix-gallery-hero__bottom-edge span {
    transform:
        translateX(175%);

    transition:
        transform
        1700ms
        var(--umix-ease)
        500ms;
}



/* =========================================================
   IMAGE ERROR
   ========================================================= */

.umix-gallery-hero.has-image-error
.umix-gallery-hero__image {
    display: none;
}


.umix-gallery-hero.has-image-error
.umix-gallery-hero__visual {
    background:

        radial-gradient(
            ellipse at 30% 20%,
            rgba(166,133,100,0.15),
            transparent 34%
        ),

        radial-gradient(
            ellipse at 78% 73%,
            rgba(255,255,255,0.025),
            transparent 39%
        ),

        linear-gradient(
            135deg,
            #292720,
            #181816
        );
}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

html.umix-reduced-motion
.umix-gallery-hero *,
html.umix-reduced-motion
.umix-gallery-hero *::before,
html.umix-reduced-motion
.umix-gallery-hero *::after {
    transition-duration:
        1ms !important;

    animation-duration:
        1ms !important;
}



/* =========================================================
   RESPONSIVE — EXACTLY FOUR BREAKPOINTS
   ========================================================= */


/* =========================================================
   COMPUTER
   ========================================================= */

@media (min-width: 1200px) {

    .umix-gallery-hero {
        grid-template-columns:
            minmax(0,46%)
            minmax(0,54%);
    }


    .umix-gallery-hero__image {
        object-position:
            center center;
    }

}



/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {

    .umix-gallery-hero {
        grid-template-columns:
            minmax(0,54%)
            minmax(0,46%);

        height:
            min(
                60svh,
                600px
            );

        min-height:
            min(
                475px,
                calc(
                    100svh -
                    var(--umix-header-height)
                )
            );
    }


    .umix-gallery-hero__content-inner {
        padding:
            1.4rem
            1.8rem
            1.4rem
            var(--umix-gutter);
    }


    .umix-gallery-hero__title {
        font-size:
            clamp(
                2.9rem,
                min(5.8vw, 8vh),
                4.3rem
            );
    }


    .umix-gallery-hero__description {
        max-width: 470px;

        font-size: 0.98rem;
    }


    .umix-gallery-hero__editorial {
        left: 1.5rem;
    }


    .umix-gallery-hero__visual-label {
        right: 1.2rem;
    }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (min-width: 480px) and (max-width: 767px) {

    .umix-gallery-hero {
        display: block;

        height:
            min(
                66svh,
                590px
            );

        min-height:
            min(
                480px,
                calc(
                    100svh -
                    var(--umix-header-height)
                )
            );
    }


    .umix-gallery-hero__visual {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;
    }


    .umix-gallery-hero__image {
        object-position:
            62% center;
    }


    .umix-gallery-hero__shade {
        background:

            linear-gradient(
                90deg,
                rgba(12,12,11,0.96) 0%,
                rgba(12,12,11,0.84) 48%,
                rgba(12,12,11,0.48) 78%,
                rgba(12,12,11,0.23) 100%
            ),

            linear-gradient(
                0deg,
                rgba(12,12,11,0.58),
                transparent 60%
            );
    }


    .umix-gallery-hero__content {
        position: relative;

        z-index: 6;

        width: 100%;
        height: 100%;

        background:
            transparent;
    }


    .umix-gallery-hero__content::before {
        opacity: 0.2;
    }


    .umix-gallery-hero__content::after {
        display: none;
    }


    .umix-gallery-hero__content-inner {
        height: 100%;

        padding:
            1.3rem
            var(--umix-gutter);
    }


    .umix-gallery-hero__title {
        max-width: 550px;

        font-size:
            clamp(
                2.8rem,
                min(9vw, 7.5vh),
                4rem
            );
    }


    .umix-gallery-hero__description {
        max-width: 470px;

        font-size: 1rem;
    }


    .umix-gallery-hero__visual-label,
    .umix-gallery-hero__editorial,
    .umix-gallery-hero__visual-bottom,
    .umix-gallery-hero__corner {
        display: none;
    }


    .umix-gallery-hero__geometry {
        opacity: 0.09;
    }

}



/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 479px) {

    .umix-gallery-hero {
        display: block;

        height:
            min(
                70svh,
                580px
            );

        min-height:
            min(
                470px,
                calc(
                    100svh -
                    var(--umix-header-height)
                )
            );
    }


    .umix-gallery-hero__visual {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;
    }


    .umix-gallery-hero__image {
        object-position:
            65% center;
    }


    .umix-gallery-hero__shade {
        background:

            linear-gradient(
                90deg,
                rgba(11,11,10,0.97) 0%,
                rgba(11,11,10,0.89) 57%,
                rgba(11,11,10,0.51) 100%
            ),

            linear-gradient(
                0deg,
                rgba(11,11,10,0.68),
                transparent 60%
            );
    }


    .umix-gallery-hero__content {
        position: relative;

        z-index: 6;

        width: 100%;
        height: 100%;

        background:
            transparent;
    }


    .umix-gallery-hero__content::after {
        display: none;
    }


    .umix-gallery-hero__content-inner {
        height: 100%;

        padding:
            0.9rem
            var(--umix-gutter);
    }


    .umix-gallery-hero__eyebrow {
        gap: 0.6rem;

        margin-bottom: 0.75rem;
    }


    .umix-gallery-hero__eyebrow > span {
        width: 26px;
    }


    .umix-gallery-hero__eyebrow p {
        font-size: 0.74rem;

        letter-spacing: 0.15em;
    }


    .umix-gallery-hero__title {
        max-width: 390px;

        margin-bottom: 0.9rem;

        font-size:
            clamp(
                2.4rem,
                min(11.5vw, 7vh),
                3.35rem
            );

        line-height: 0.92;
    }


    .umix-gallery-hero__description {
        max-width: 365px;

        margin-bottom: 1rem;

        font-size: 0.95rem;

        line-height: 1.5;
    }


    .umix-gallery-hero__actions {
        display: grid;

        grid-template-columns: 1fr;

        gap: 0.75rem;

        margin-bottom: 1rem;
    }


    .umix-gallery-hero__button {
        width: 100%;

        min-width: 0;
    }


    .umix-gallery-hero__estimate {
        justify-content: flex-start;

        min-height: 38px;

        font-size: 0.82rem;
    }


    .umix-gallery-hero__materials {
        gap: 0.4rem;

        font-size: 0.67rem;

        letter-spacing: 0.07em;
    }


    .umix-gallery-hero__visual-label,
    .umix-gallery-hero__editorial,
    .umix-gallery-hero__visual-bottom,
    .umix-gallery-hero__corner,
    .umix-gallery-hero__geometry {
        display: none;
    }

}






















































/* =========================================================
   03. GALLERY INTRODUCTION
   UMIX TILE CONSTRUCTION LLC
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.umix-gallery-intro {
    position: relative;

    overflow: hidden;

    isolation: isolate;

    color:
        var(--umix-text-main);

    background:

        radial-gradient(
            ellipse at 8% 16%,
            rgba(166,133,100,0.085),
            transparent 31rem
        ),

        radial-gradient(
            ellipse at 91% 76%,
            rgba(255,255,255,0.02),
            transparent 34rem
        ),

        linear-gradient(
            132deg,
            #151513 0%,
            #1B1B19 51%,
            #141412 100%
        );
}



/* Mineral veins */

.umix-gallery-intro::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    pointer-events: none;

    opacity: 0.52;

    background:

        linear-gradient(
            118deg,
            transparent 0%,
            transparent 23%,
            rgba(255,255,255,0.018) 23.2%,
            transparent 23.58%
        ),

        linear-gradient(
            68deg,
            transparent 0%,
            transparent 73%,
            rgba(166,133,100,0.02) 73.2%,
            transparent 73.62%
        ),

        radial-gradient(
            ellipse at 48% 60%,
            transparent 0%,
            transparent 52%,
            rgba(255,255,255,0.012) 52.3%,
            transparent 53%
        );
}



/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.umix-gallery-intro__layout {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(0,1.18fr)
        minmax(320px,0.82fr);

    align-items: end;

    gap:
        clamp(
            3rem,
            8vw,
            9rem
        );

    padding-bottom:
        clamp(
            3rem,
            5vw,
            5rem
        );
}



/* =========================================================
   EYEBROW
   ========================================================= */

.umix-gallery-intro__eyebrow {
    display: flex;
    align-items: center;

    gap:
        0.85rem;

    margin-bottom:
        1.35rem;

    color:
        var(--umix-bronze-soft);
}


.umix-gallery-intro__eyebrow > span {
    width:
        40px;

    height:
        1px;

    background:
        var(--umix-bronze);
}


.umix-gallery-intro__eyebrow p {
    margin: 0;

    font-size:
        var(--umix-fs-label);

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;
}



/* =========================================================
   TITLE
   ========================================================= */

.umix-gallery-intro__title {
    display: flex;
    flex-direction: column;

    max-width:
        860px;

    margin: 0;

    font-family:
        var(--umix-font-display);

    font-size:
        clamp(
            3.2rem,
            5.3vw,
            5.9rem
        );

    font-weight:
        600;

    line-height:
        0.9;

    letter-spacing:
        -0.045em;
}


.umix-gallery-intro__title-mask {
    display: block;

    overflow: hidden;

    padding-bottom:
        0.075em;
}


.umix-gallery-intro__title-mask > span {
    display: block;
}


.umix-gallery-intro__title-mask--accent {
    color:
        var(--umix-bronze-soft);
}



/* =========================================================
   CONTENT
   ========================================================= */

.umix-gallery-intro__content {
    min-width: 0;

    padding-bottom:
        0.45rem;
}


.umix-gallery-intro__copy {
    position: relative;

    padding-left:
        1.6rem;

    border-left:
        1px solid
        rgba(166,133,100,0.28);
}


.umix-gallery-intro__copy-mark {
    position: absolute;

    top: 0;
    left: -1px;

    width:
        1px;

    height:
        58px;

    background:
        var(--umix-bronze-light);
}


.umix-gallery-intro__lead {
    margin:
        0
        0
        1rem;

    color:
        var(--umix-text-soft);

    font-size:
        clamp(
            1.05rem,
            1rem + 0.16vw,
            1.18rem
        );

    line-height:
        1.68;

    text-wrap:
        pretty;
}


.umix-gallery-intro__secondary {
    margin: 0;

    color:
        var(--umix-text-muted);

    font-size:
        1rem;

    line-height:
        1.65;

    text-wrap:
        pretty;
}



/* =========================================================
   EDITORIAL STATEMENT
   ========================================================= */

.umix-gallery-intro__statement {
    display: flex;
    align-items: center;

    gap:
        1rem;

    margin-top:
        2rem;

    padding-top:
        1.5rem;

    border-top:
        1px solid
        rgba(255,255,255,0.07);
}


.umix-gallery-intro__statement > span {
    width:
        8px;

    height:
        8px;

    flex:
        0 0 auto;

    transform:
        rotate(45deg);

    border:
        1px solid
        var(--umix-bronze-soft);
}


.umix-gallery-intro__statement p {
    margin: 0;

    font-family:
        var(--umix-font-display);

    font-size:
        clamp(
            1.4rem,
            1.2rem + 0.55vw,
            1.9rem
        );

    font-weight:
        600;

    line-height:
        1.15;

    color:
        var(--umix-text-main);
}


.umix-gallery-intro__statement em {
    color:
        var(--umix-bronze-light);

    font-style:
        italic;
}



/* =========================================================
   SERVICE STRIP
   ========================================================= */

.umix-gallery-intro__services {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        auto
        minmax(0,1fr)
        auto;

    align-items: center;

    gap:
        clamp(
            1.5rem,
            3vw,
            3rem
        );

    min-height:
        88px;

    padding:
        1rem
        0;

    border-top:
        1px solid
        rgba(166,133,100,0.22);

    border-bottom:
        1px solid
        rgba(166,133,100,0.15);
}



/* =========================================================
   SERVICE LABEL
   ========================================================= */

.umix-gallery-intro__services-label {
    display: flex;
    align-items: center;

    gap:
        0.7rem;

    white-space: nowrap;
}


.umix-gallery-intro__services-label > span {
    width:
        28px;

    height:
        1px;

    background:
        var(--umix-bronze);
}


.umix-gallery-intro__services-label p {
    margin: 0;

    color:
        var(--umix-text-muted);

    font-size:
        0.78rem;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}



/* =========================================================
   SERVICE LIST
   ========================================================= */

.umix-gallery-intro__service-list {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap:
        0.7rem;

    min-width: 0;
}


.umix-gallery-intro__service {
    color:
        var(--umix-text-soft);

    font-size:
        0.86rem;

    font-weight:
        600;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


.umix-gallery-intro__service-list i {
    display: block;

    width:
        5px;

    height:
        5px;

    flex:
        0 0 auto;

    transform:
        rotate(45deg);

    border:
        1px solid
        rgba(166,133,100,0.66);
}



/* =========================================================
   EXPLORE LINK
   ========================================================= */

.umix-gallery-intro__explore {
    display: inline-flex;
    align-items: center;

    gap:
        0.7rem;

    white-space:
        nowrap;

    color:
        var(--umix-bronze-light);

    font-size:
        0.8rem;

    font-weight:
        700;

    letter-spacing:
        0.075em;

    text-transform:
        uppercase;
}


.umix-gallery-intro__explore svg {
    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform
        350ms
        var(--umix-ease);
}


.umix-gallery-intro__explore:hover svg {
    transform:
        translateY(4px);
}



/* =========================================================
   BOTTOM DETAIL
   ========================================================= */

.umix-gallery-intro__bottom-line {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        8px
        minmax(0,1fr);

    align-items: center;

    gap:
        1rem;

    width:
        min(
            440px,
            60%
        );

    margin:
        clamp(
            2.5rem,
            5vw,
            4rem
        )
        auto
        0;
}


.umix-gallery-intro__bottom-line span {
    height:
        1px;

    transform:
        scaleX(0);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(166,133,100,0.62)
        );
}


.umix-gallery-intro__bottom-line span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(166,133,100,0.62),
            transparent
        );
}


.umix-gallery-intro__bottom-line i {
    width:
        8px;

    height:
        8px;

    transform:
        rotate(45deg)
        scale(0);

    border:
        1px solid
        var(--umix-bronze-light);
}



/* =========================================================
   BACKGROUND GEOMETRY
   ========================================================= */

.umix-gallery-intro__geometry {
    position: absolute;

    right:
        -150px;

    top:
        16%;

    z-index:
        -1;

    width:
        260px;

    aspect-ratio:
        1;

    transform:
        rotate(45deg);

    opacity:
        0.1;

    pointer-events:
        none;
}


.umix-gallery-intro__geometry span {
    position:
        absolute;

    border:
        1px solid
        var(--umix-bronze);
}


.umix-gallery-intro__geometry span:nth-child(1) {
    inset: 0;
}


.umix-gallery-intro__geometry span:nth-child(2) {
    inset:
        42px;
}


.umix-gallery-intro__geometry span:nth-child(3) {
    inset:
        86px;
}



/* =========================================================
   INITIAL ANIMATION STATE
   ========================================================= */

.js
.umix-gallery-intro__title-mask > span {
    transform:
        translate3d(
            0,
            112%,
            0
        );
}


.js
[data-gallery-intro-reveal] {
    opacity: 0;

    transform:
        translate3d(
            0,
            18px,
            0
        );
}



/* =========================================================
   VISIBLE STATE
   ========================================================= */

.umix-gallery-intro.is-visible
.umix-gallery-intro__title-mask > span {
    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        transform
        850ms
        var(--umix-ease);
}


.umix-gallery-intro.is-visible
.umix-gallery-intro__title-mask:nth-child(2) > span {
    transition-delay:
        70ms;
}


.umix-gallery-intro.is-visible
.umix-gallery-intro__title-mask:nth-child(3) > span {
    transition-delay:
        140ms;
}


.umix-gallery-intro.is-visible
[data-gallery-intro-reveal] {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        opacity
        650ms
        var(--umix-ease),
        transform
        650ms
        var(--umix-ease);
}


.umix-gallery-intro.is-visible
[data-gallery-intro-reveal="eyebrow"] {
    transition-delay:
        50ms;
}


.umix-gallery-intro.is-visible
[data-gallery-intro-reveal="copy"] {
    transition-delay:
        230ms;
}


.umix-gallery-intro.is-visible
[data-gallery-intro-reveal="statement"] {
    transition-delay:
        330ms;
}


.umix-gallery-intro.is-visible
[data-gallery-intro-reveal="services"] {
    transition-delay:
        410ms;
}


.umix-gallery-intro.is-visible
.umix-gallery-intro__bottom-line span {
    transform:
        scaleX(1);

    transition:
        transform
        950ms
        var(--umix-ease)
        500ms;
}


.umix-gallery-intro.is-visible
.umix-gallery-intro__bottom-line i {
    transform:
        rotate(45deg)
        scale(1);

    transition:
        transform
        500ms
        var(--umix-ease)
        750ms;
}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

html.umix-reduced-motion
.umix-gallery-intro *,
html.umix-reduced-motion
.umix-gallery-intro *::before,
html.umix-reduced-motion
.umix-gallery-intro *::after {
    transition-duration:
        1ms !important;

    animation-duration:
        1ms !important;
}



/* =========================================================
   RESPONSIVE
   EXACTLY FOUR BREAKPOINTS
   ========================================================= */


/* COMPUTER */
@media (min-width: 1200px) {

    .umix-gallery-intro__layout {
        grid-template-columns:
            minmax(0,1.18fr)
            minmax(320px,0.82fr);
    }


    .umix-gallery-intro__services {
        grid-template-columns:
            auto
            minmax(0,1fr)
            auto;
    }

}


/* TABLET */
@media (min-width: 768px) and (max-width: 1199px) {

    .umix-gallery-intro__layout {
        grid-template-columns:
            minmax(0,1.05fr)
            minmax(280px,0.72fr);

        gap:
            3rem;
    }


    .umix-gallery-intro__title {
        font-size:
            clamp(
                2.8rem,
                6vw,
                4.5rem
            );
    }


    .umix-gallery-intro__services {
        grid-template-columns:
            auto
            minmax(0,1fr);

        gap:
            1.4rem;
    }


    .umix-gallery-intro__explore {
        grid-column:
            2;

        justify-self:
            end;
    }

}


/* MOBILE */
@media (min-width: 480px) and (max-width: 767px) {

    .umix-gallery-intro__layout {
        grid-template-columns:
            1fr;

        align-items:
            start;

        gap:
            2.2rem;

        padding-bottom:
            3rem;
    }


    .umix-gallery-intro__title {
        max-width:
            650px;

        font-size:
            clamp(
                2.7rem,
                9vw,
                4rem
            );
    }


    .umix-gallery-intro__content {
        max-width:
            600px;

        margin-left:
            auto;

        width:
            86%;
    }


    .umix-gallery-intro__services {
        grid-template-columns:
            1fr;

        align-items:
            start;

        gap:
            1.25rem;

        padding:
            1.4rem
            0;
    }


    .umix-gallery-intro__service-list {
        justify-content:
            flex-start;
    }


    .umix-gallery-intro__explore {
        justify-self:
            start;
    }


    .umix-gallery-intro__geometry {
        width:
            200px;

        right:
            -130px;
    }

}


/* SMALL MOBILE */
@media (max-width: 479px) {

    .umix-gallery-intro__layout {
        grid-template-columns:
            1fr;

        gap:
            1.8rem;

        padding-bottom:
            2.6rem;
    }


    .umix-gallery-intro__eyebrow {
        gap:
            0.65rem;

        margin-bottom:
            1rem;
    }


    .umix-gallery-intro__eyebrow > span {
        width:
            28px;
    }


    .umix-gallery-intro__eyebrow p {
        font-size:
            0.75rem;

        letter-spacing:
            0.15em;
    }


    .umix-gallery-intro__title {
        font-size:
            clamp(
                2.4rem,
                11.5vw,
                3.45rem
            );

        line-height:
            0.93;
    }


    .umix-gallery-intro__content {
        width:
            100%;
    }


    .umix-gallery-intro__copy {
        padding-left:
            1rem;
    }


    .umix-gallery-intro__lead,
    .umix-gallery-intro__secondary {
        font-size:
            1rem;

        line-height:
            1.58;
    }


    .umix-gallery-intro__statement {
        gap:
            0.75rem;

        margin-top:
            1.5rem;

        padding-top:
            1.25rem;
    }


    .umix-gallery-intro__statement p {
        font-size:
            1.4rem;
    }


    .umix-gallery-intro__services {
        grid-template-columns:
            1fr;

        gap:
            1.15rem;

        min-height:
            auto;

        padding:
            1.4rem
            0;
    }


    .umix-gallery-intro__service-list {
        justify-content:
            flex-start;

        gap:
            0.55rem;
    }


    .umix-gallery-intro__service {
        font-size:
            0.78rem;
    }


    .umix-gallery-intro__explore {
        justify-self:
            start;

        font-size:
            0.78rem;
    }


    .umix-gallery-intro__bottom-line {
        width:
            75%;

        margin-top:
            2.5rem;
    }


    .umix-gallery-intro__geometry {
        display:
            none;
    }

}





















































/* =========================================================
   04. SELECTED WORK
   UMIX TILE CONSTRUCTION LLC
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.umix-work {
    position: relative;

    overflow: hidden;

    isolation: isolate;

    color:
        var(--umix-text-main);

    background:
        radial-gradient(
            ellipse at 90% 7%,
            rgba(166,133,100,0.09),
            transparent 34rem
        ),
        radial-gradient(
            ellipse at 5% 61%,
            rgba(255,255,255,0.021),
            transparent 38rem
        ),
        linear-gradient(
            135deg,
            #11110F 0%,
            #191917 47%,
            #121210 100%
        );
}


.umix-work::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    opacity: 0.48;

    pointer-events: none;

    background:
        linear-gradient(
            118deg,
            transparent 0%,
            transparent 21%,
            rgba(255,255,255,0.017) 21.2%,
            transparent 21.58%
        ),
        linear-gradient(
            68deg,
            transparent 0%,
            transparent 77%,
            rgba(166,133,100,0.019) 77.2%,
            transparent 77.6%
        );
}


/* =========================================================
   HEADER
   ========================================================= */

.umix-work__header {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(300px,0.65fr);

    align-items: end;

    gap:
        clamp(3rem, 8vw, 9rem);

    margin-bottom:
        clamp(3rem, 6vw, 5.5rem);
}


.umix-work__eyebrow {
    display: flex;
    align-items: center;

    gap: 0.85rem;

    margin-bottom: 1.25rem;

    color:
        var(--umix-bronze-soft);
}


.umix-work__eyebrow > span {
    width: 40px;
    height: 1px;

    background:
        var(--umix-bronze);
}


.umix-work__eyebrow p {
    margin: 0;

    font-size:
        var(--umix-fs-label);

    font-weight: 700;

    letter-spacing: 0.2em;

    line-height: 1;

    text-transform: uppercase;
}


.umix-work__title {
    display: flex;
    flex-direction: column;

    margin: 0;

    font-family:
        var(--umix-font-display);

    font-size:
        clamp(3.2rem, 5.25vw, 5.9rem);

    font-weight: 600;

    line-height: 0.9;

    letter-spacing: -0.045em;
}


.umix-work__title-mask {
    display: block;

    overflow: hidden;

    padding-bottom: 0.08em;
}


.umix-work__title-mask > span {
    display: block;
}


.umix-work__title-mask--accent {
    color:
        var(--umix-bronze-soft);
}


.umix-work__intro {
    max-width: 470px;
}


.umix-work__intro > p {
    margin:
        0
        0
        1.4rem;

    color:
        var(--umix-text-soft);

    font-size:
        var(--umix-fs-body);

    line-height: 1.68;
}


.umix-work__intro-detail {
    display: flex;
    align-items: center;

    gap: 0.65rem;
}


.umix-work__intro-detail span {
    width: 50px;
    height: 1px;

    background:
        var(--umix-bronze);
}


.umix-work__intro-detail i {
    width: 6px;
    height: 6px;

    transform:
        rotate(45deg);

    border:
        1px solid
        var(--umix-bronze);
}


/* =========================================================
   GALLERY

   12-column editorial composition.
   Dense flow prevents empty placeholder spaces.
   ========================================================= */

.umix-work__gallery {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        repeat(12, minmax(0,1fr));

    grid-auto-rows:
        clamp(42px, 4vw, 64px);

    grid-auto-flow:
        dense;

    gap:
        clamp(0.7rem, 1vw, 1rem);

    width: 100%;
}


/* =========================================================
   IMAGE PLACEMENT
   ========================================================= */

/* Feature */

.umix-work-photo:nth-of-type(1) {
    grid-column: span 12;
    grid-row: span 10;
}


/* First asymmetric pair */

.umix-work-photo:nth-of-type(2) {
    grid-column: span 5;
    grid-row: span 8;
}


.umix-work-photo:nth-of-type(3) {
    grid-column: span 7;
    grid-row: span 10;
}


/* Second pair */

.umix-work-photo:nth-of-type(4) {
    grid-column: span 7;
    grid-row: span 9;
}


.umix-work-photo:nth-of-type(5) {
    grid-column: span 5;
    grid-row: span 7;
}


/* Cinematic full-width break */

.umix-work-photo:nth-of-type(6) {
    grid-column: span 12;
    grid-row: span 9;
}


/* Third pair */

.umix-work-photo:nth-of-type(7) {
    grid-column: span 4;
    grid-row: span 8;
}


.umix-work-photo:nth-of-type(8) {
    grid-column: span 8;
    grid-row: span 10;
}


/* Closing pair */

.umix-work-photo:nth-of-type(9) {
    grid-column: span 7;
    grid-row: span 8;
}


.umix-work-photo:nth-of-type(10) {
    grid-column: span 5;
    grid-row: span 8;
}


/* =========================================================
   ADAPTIVE ENDING

   JS adds data-image-count automatically.
   Odd endings become intentional full-width pieces.
   ========================================================= */

.umix-work__gallery[data-image-count="3"]
.umix-work-photo:last-of-type,

.umix-work__gallery[data-image-count="5"]
.umix-work-photo:last-of-type,

.umix-work__gallery[data-image-count="7"]
.umix-work-photo:last-of-type,

.umix-work__gallery[data-image-count="9"]
.umix-work-photo:last-of-type {
    grid-column:
        span 12;

    grid-row:
        span 8;
}


/* Four-image version */

.umix-work__gallery[data-image-count="4"]
.umix-work-photo:last-of-type {
    grid-column:
        span 12;

    grid-row:
        span 8;
}


/* =========================================================
   PHOTO
   ========================================================= */

.umix-work-photo {
    position: relative;

    display: block;

    min-width: 0;
    min-height: 0;

    width: 100%;
    height: 100%;

    padding: 0;

    overflow: hidden;

    color:
        var(--umix-white);

    background:
        #20201E;

    border:
        1px solid
        rgba(255,255,255,0.065);

    cursor: zoom-in;

    text-align: left;
}


.umix-work-photo__frame {
    position: absolute;
    inset: 0;

    display: block;

    overflow: hidden;

    background:
        #20201E;
}


/* =========================================================
   IMAGE
   ========================================================= */

.umix-work-photo__image {
    position: absolute;

    inset:
        -3%;

    display: block;

    width:
        106%;

    height:
        106%;

    max-width: none;

    object-fit: cover;

    object-position: center;

    transform:
        translate3d(
            0,
            var(--work-parallax, 0px),
            0
        )
        scale(1.015);

    will-change: transform;

    transition:
        transform
        850ms
        var(--umix-ease),
        filter
        600ms
        var(--umix-ease);
}


/* =========================================================
   SHADE
   ========================================================= */

.umix-work-photo__shade {
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    opacity: 0.32;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(8,8,7,0.57) 100%
        );

    transition:
        opacity
        500ms
        var(--umix-ease);
}


/* =========================================================
   VIEW IMAGE LABEL
   ========================================================= */

.umix-work-photo__action {
    position: absolute;

    z-index: 4;

    left:
        clamp(1rem, 2vw, 1.7rem);

    bottom:
        clamp(1rem, 2vw, 1.6rem);

    display: inline-flex;
    align-items: center;

    gap: 0.65rem;

    opacity: 0;

    transform:
        translate3d(0, 10px, 0);

    color:
        var(--umix-white);

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 0.09em;

    text-transform: uppercase;

    transition:
        opacity
        400ms
        var(--umix-ease),
        transform
        400ms
        var(--umix-ease);
}


.umix-work-photo__action svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke:
        var(--umix-bronze-light);

    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   CORNERS
   ========================================================= */

.umix-work-photo__corner {
    position: absolute;

    z-index: 4;

    width: 56px;
    height: 56px;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity
        400ms
        var(--umix-ease),
        transform
        500ms
        var(--umix-ease);
}


.umix-work-photo__corner::before,
.umix-work-photo__corner::after {
    content: "";

    position: absolute;

    background:
        var(--umix-bronze-light);
}


.umix-work-photo__corner::before {
    width: 100%;
    height: 1px;
}


.umix-work-photo__corner::after {
    width: 1px;
    height: 100%;
}


.umix-work-photo__corner--tl {
    top: 15px;
    left: 15px;

    transform:
        translate3d(-8px,-8px,0);
}


.umix-work-photo__corner--br {
    right: 15px;
    bottom: 15px;

    transform:
        rotate(180deg)
        translate3d(-8px,-8px,0);
}


/* =========================================================
   HOVER
   ========================================================= */

.umix-work-photo:hover {
    border-color:
        rgba(193,154,115,0.38);
}


.umix-work-photo:hover
.umix-work-photo__image {
    transform:
        translate3d(
            0,
            var(--work-parallax, 0px),
            0
        )
        scale(1.045);
}


.umix-work-photo:hover
.umix-work-photo__shade {
    opacity: 0.58;
}


.umix-work-photo:hover
.umix-work-photo__action,

.umix-work-photo:focus-visible
.umix-work-photo__action {
    opacity: 1;

    transform:
        translate3d(0,0,0);
}


.umix-work-photo:hover
.umix-work-photo__corner,

.umix-work-photo:focus-visible
.umix-work-photo__corner {
    opacity: 1;
}


.umix-work-photo:hover
.umix-work-photo__corner--tl {
    transform:
        translate3d(0,0,0);
}


.umix-work-photo:hover
.umix-work-photo__corner--br {
    transform:
        rotate(180deg)
        translate3d(0,0,0);
}


.umix-work-photo:focus-visible {
    outline:
        2px solid
        rgba(193,154,115,0.7);

    outline-offset:
        3px;
}


/* =========================================================
   EDITORIAL STATEMENT

   This is an independent grid object, not an image.
   ========================================================= */

.umix-work__statement {
    grid-column:
        1 / -1;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap:
        clamp(1rem, 2vw, 2rem);

    min-height:
        clamp(120px, 13vw, 190px);

    padding:
        clamp(1.5rem, 3vw, 3rem)
        clamp(1rem, 3vw, 3rem);

    overflow: hidden;
}


.umix-work__statement::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 38%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(166,133,100,0.52)
        );
}


.umix-work__statement-line {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    transform:
        rotate(45deg);

    border:
        1px solid
        var(--umix-bronze);
}


.umix-work__statement p {
    max-width:
        470px;

    margin: 0;

    font-family:
        var(--umix-font-display);

    font-size:
        clamp(2rem, 3.2vw, 3.75rem);

    font-weight: 600;

    line-height: 0.98;

    letter-spacing:
        -0.035em;

    text-align: right;
}


.umix-work__statement em {
    display: block;

    color:
        var(--umix-bronze-light);

    font-style: italic;
}


.umix-work__statement-mark {
    position: relative;

    width: 46px;
    height: 46px;

    flex: 0 0 auto;

    transform:
        rotate(45deg);
}


.umix-work__statement-mark span {
    position: absolute;

    border:
        1px solid
        rgba(166,133,100,0.55);
}


.umix-work__statement-mark span:first-child {
    inset: 0;
}


.umix-work__statement-mark span:last-child {
    inset: 11px;
}


/* =========================================================
   ENDING
   ========================================================= */

.umix-work__ending {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(40px,1fr)
        auto
        8px;

    align-items: center;

    gap: 1.25rem;

    margin-top:
        clamp(3rem, 6vw, 5rem);
}


.umix-work__ending-line {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(166,133,100,0.55)
        );
}


.umix-work__ending p {
    margin: 0;

    color:
        var(--umix-text-muted);

    font-size:
        0.88rem;

    font-weight: 600;

    letter-spacing:
        0.075em;

    text-transform: uppercase;
}


.umix-work__ending p em {
    color:
        var(--umix-bronze-light);

    font-style: normal;
}


.umix-work__ending-mark {
    width: 7px;
    height: 7px;

    transform:
        rotate(45deg);

    border:
        1px solid
        var(--umix-bronze);
}


/* =========================================================
   BACKGROUND GEOMETRY
   ========================================================= */

.umix-work__geometry {
    position: absolute;

    z-index: -1;

    width: 250px;

    aspect-ratio: 1;

    transform:
        rotate(45deg);

    opacity: 0.085;

    pointer-events: none;
}


.umix-work__geometry span {
    position: absolute;

    border:
        1px solid
        var(--umix-bronze);
}


.umix-work__geometry span:nth-child(1) {
    inset: 0;
}


.umix-work__geometry span:nth-child(2) {
    inset: 40px;
}


.umix-work__geometry span:nth-child(3) {
    inset: 82px;
}


.umix-work__geometry--left {
    left: -165px;
    top: 22%;
}


.umix-work__geometry--right {
    right: -155px;
    bottom: 16%;
}


/* =========================================================
   REVEAL INITIAL STATE
   ========================================================= */

.js
.umix-work__title-mask > span {
    transform:
        translate3d(0,112%,0);
}


.js
[data-work-reveal] {
    opacity: 0;

    transform:
        translate3d(0,18px,0);
}


.js
.umix-work-photo {
    opacity: 0;
}


.js
.umix-work-photo__frame {
    clip-path:
        inset(0 100% 0 0);
}


.js
.umix-work__statement {
    opacity: 0;

    transform:
        translate3d(0,20px,0);
}


/* =========================================================
   REVEALED
   ========================================================= */

.umix-work.is-visible
.umix-work__title-mask > span {
    transform:
        translate3d(0,0,0);

    transition:
        transform
        850ms
        var(--umix-ease);
}


.umix-work.is-visible
.umix-work__title-mask:nth-child(2) > span {
    transition-delay: 90ms;
}


.umix-work.is-visible
[data-work-reveal] {
    opacity: 1;

    transform:
        translate3d(0,0,0);

    transition:
        opacity
        650ms
        var(--umix-ease),
        transform
        650ms
        var(--umix-ease);
}


.umix-work.is-visible
[data-work-reveal="eyebrow"] {
    transition-delay: 50ms;
}


.umix-work.is-visible
[data-work-reveal="intro"] {
    transition-delay: 180ms;
}


.umix-work.is-visible
[data-work-reveal="ending"] {
    transition-delay: 250ms;
}


/* Individual photos reveal when JS marks them */

.umix-work-photo.is-visible {
    opacity: 1;

    transition:
        opacity
        450ms
        var(--umix-ease);
}


.umix-work-photo.is-visible
.umix-work-photo__frame {
    clip-path:
        inset(0 0 0 0);

    transition:
        clip-path
        950ms
        var(--umix-ease);
}


.umix-work__statement.is-visible {
    opacity: 1;

    transform:
        translate3d(0,0,0);

    transition:
        opacity
        650ms
        var(--umix-ease),
        transform
        650ms
        var(--umix-ease);
}


/* =========================================================
   FULLSCREEN VIEWER
   ========================================================= */

.umix-gallery-viewer {
    position: fixed;
    inset: 0;

    z-index: 15000;

    display: grid;
    place-items: center;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity
        400ms
        var(--umix-ease),
        visibility
        0s linear
        400ms;
}


.umix-gallery-viewer.is-open {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;

    transition:
        opacity
        400ms
        var(--umix-ease),
        visibility
        0s;
}


.umix-gallery-viewer__backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(7,7,6,0.96);

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

    backdrop-filter:
        blur(15px);
}


.umix-gallery-viewer__stage {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        70px
        minmax(0,1fr)
        70px;

    grid-template-rows:
        minmax(0,1fr)
        auto;

    align-items: center;

    width: 100%;
    height: 100%;

    padding:
        clamp(1rem, 3vw, 2.5rem);
}


/* Image */

.umix-gallery-viewer__image-wrap {
    grid-column: 2;
    grid-row: 1;

    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}


.umix-gallery-viewer__image {
    display: block;

    max-width: 100%;
    max-height:
        calc(100svh - 130px);

    width: auto;
    height: auto;

    object-fit: contain;

    opacity: 1;

    transform:
        scale(1);

    transition:
        opacity
        240ms
        var(--umix-ease),
        transform
        450ms
        var(--umix-ease);
}


.umix-gallery-viewer__image.is-changing {
    opacity: 0;

    transform:
        scale(0.985);
}


/* Close */

.umix-gallery-viewer__close {
    position: absolute;

    z-index: 6;

    top:
        clamp(1rem, 2vw, 1.6rem);

    right:
        clamp(1rem, 2vw, 1.6rem);

    width: 48px;
    height: 48px;

    color:
        var(--umix-white);

    background:
        rgba(255,255,255,0.025);

    border:
        1px solid
        rgba(166,133,100,0.35);
}


.umix-gallery-viewer__close span {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 18px;
    height: 1px;

    background:
        currentColor;
}


.umix-gallery-viewer__close span:first-child {
    transform:
        translate(-50%,-50%)
        rotate(45deg);
}


.umix-gallery-viewer__close span:last-child {
    transform:
        translate(-50%,-50%)
        rotate(-45deg);
}


/* Navigation */

.umix-gallery-viewer__nav {
    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    justify-self: center;

    color:
        var(--umix-bronze-light);

    background:
        rgba(255,255,255,0.02);

    border:
        1px solid
        rgba(166,133,100,0.32);

    transition:
        color
        350ms
        var(--umix-ease),
        background-color
        350ms
        var(--umix-ease),
        transform
        350ms
        var(--umix-ease);
}


.umix-gallery-viewer__nav:hover {
    color:
        var(--umix-ink);

    background:
        var(--umix-bronze-light);
}


.umix-gallery-viewer__nav--prev {
    grid-column: 1;
    grid-row: 1;
}


.umix-gallery-viewer__nav--next {
    grid-column: 3;
    grid-row: 1;
}


.umix-gallery-viewer__nav--prev:hover {
    transform:
        translateX(-4px);
}


.umix-gallery-viewer__nav--next:hover {
    transform:
        translateX(4px);
}


.umix-gallery-viewer__nav svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Viewer footer */

.umix-gallery-viewer__footer {
    grid-column:
        1 / 4;

    grid-row: 2;

    display: grid;

    grid-template-columns:
        minmax(20px,1fr)
        auto
        minmax(20px,1fr);

    align-items: center;

    gap: 1rem;

    padding-top: 1rem;
}


.umix-gallery-viewer__footer > span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(166,133,100,0.42)
        );
}


.umix-gallery-viewer__footer > span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(166,133,100,0.42),
            transparent
        );
}


.umix-gallery-viewer__footer p {
    margin: 0;

    color:
        var(--umix-text-muted);

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

html.umix-reduced-motion
.umix-work *,
html.umix-reduced-motion
.umix-work *::before,
html.umix-reduced-motion
.umix-work *::after,
html.umix-reduced-motion
.umix-gallery-viewer *,
html.umix-reduced-motion
.umix-gallery-viewer *::before,
html.umix-reduced-motion
.umix-gallery-viewer *::after {
    transition-duration:
        1ms !important;

    animation-duration:
        1ms !important;
}


/* =========================================================
   RESPONSIVE — EXACTLY FOUR BREAKPOINTS
   ========================================================= */


/* COMPUTER */
@media (min-width: 1200px) {

    .umix-work__gallery {
        grid-template-columns:
            repeat(12,minmax(0,1fr));
    }

}


/* TABLET */
@media (min-width: 768px) and (max-width: 1199px) {

    .umix-work__header {
        grid-template-columns:
            minmax(0,1fr)
            minmax(270px,0.62fr);

        gap: 3rem;
    }


    .umix-work__title {
        font-size:
            clamp(2.9rem,6vw,4.5rem);
    }


    .umix-work__gallery {
        grid-template-columns:
            repeat(6,minmax(0,1fr));

        grid-auto-rows:
            52px;
    }


    .umix-work-photo:nth-of-type(1),
    .umix-work-photo:nth-of-type(6) {
        grid-column:
            span 6;
    }


    .umix-work-photo:nth-of-type(2),
    .umix-work-photo:nth-of-type(5),
    .umix-work-photo:nth-of-type(7),
    .umix-work-photo:nth-of-type(10) {
        grid-column:
            span 3;
    }


    .umix-work-photo:nth-of-type(3),
    .umix-work-photo:nth-of-type(4),
    .umix-work-photo:nth-of-type(8),
    .umix-work-photo:nth-of-type(9) {
        grid-column:
            span 3;
    }


    .umix-work__gallery[data-image-count="3"]
    .umix-work-photo:last-of-type,

    .umix-work__gallery[data-image-count="5"]
    .umix-work-photo:last-of-type,

    .umix-work__gallery[data-image-count="7"]
    .umix-work-photo:last-of-type,

    .umix-work__gallery[data-image-count="9"]
    .umix-work-photo:last-of-type {
        grid-column:
            span 6;
    }

}


/* MOBILE */
@media (min-width: 480px) and (max-width: 767px) {

    .umix-work__header {
        grid-template-columns:
            1fr;

        gap: 1.5rem;

        margin-bottom: 2.6rem;
    }


    .umix-work__title {
        font-size:
            clamp(2.7rem,9vw,4rem);
    }


    .umix-work__gallery {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        grid-auto-rows:
            82px;

        gap: 0.65rem;
    }


    .umix-work-photo:nth-of-type(1),
    .umix-work-photo:nth-of-type(3),
    .umix-work-photo:nth-of-type(6),
    .umix-work-photo:nth-of-type(8) {
        grid-column:
            span 2;

        grid-row:
            span 5;
    }


    .umix-work-photo:nth-of-type(2),
    .umix-work-photo:nth-of-type(4),
    .umix-work-photo:nth-of-type(5),
    .umix-work-photo:nth-of-type(7),
    .umix-work-photo:nth-of-type(9),
    .umix-work-photo:nth-of-type(10) {
        grid-column:
            span 1;

        grid-row:
            span 4;
    }


    .umix-work__gallery[data-image-count="3"]
    .umix-work-photo:last-of-type,

    .umix-work__gallery[data-image-count="5"]
    .umix-work-photo:last-of-type,

    .umix-work__gallery[data-image-count="7"]
    .umix-work-photo:last-of-type,

    .umix-work__gallery[data-image-count="9"]
    .umix-work-photo:last-of-type {
        grid-column:
            span 2;
    }


    .umix-work__statement {
        min-height: 130px;
    }


    .umix-work__statement::before {
        width: 22%;
    }


    .umix-work__ending {
        grid-template-columns:
            60px
            minmax(0,1fr)
            8px;
    }


    .umix-gallery-viewer__stage {
        grid-template-columns:
            58px
            minmax(0,1fr)
            58px;

        padding:
            1rem;
    }

}


/* SMALL MOBILE */
@media (max-width: 479px) {

    .umix-work__header {
        grid-template-columns:
            1fr;

        gap: 1.25rem;

        margin-bottom: 2.2rem;
    }


    .umix-work__eyebrow {
        gap: 0.65rem;

        margin-bottom: 1rem;
    }


    .umix-work__eyebrow > span {
        width: 28px;
    }


    .umix-work__eyebrow p {
        font-size: 0.75rem;

        letter-spacing: 0.15em;
    }


    .umix-work__title {
        font-size:
            clamp(2.4rem,11.5vw,3.45rem);

        line-height: 0.93;
    }


    .umix-work__intro > p {
        font-size: 1rem;

        line-height: 1.58;
    }


    /*
        One-column editorial flow.
        Different heights preserve rhythm.
    */

    .umix-work__gallery {
        display: grid;

        grid-template-columns: 1fr;

        grid-auto-rows: auto;

        gap: 0.7rem;
    }


    .umix-work-photo,
    .umix-work-photo:nth-of-type(1),
    .umix-work-photo:nth-of-type(2),
    .umix-work-photo:nth-of-type(3),
    .umix-work-photo:nth-of-type(4),
    .umix-work-photo:nth-of-type(5),
    .umix-work-photo:nth-of-type(6),
    .umix-work-photo:nth-of-type(7),
    .umix-work-photo:nth-of-type(8),
    .umix-work-photo:nth-of-type(9),
    .umix-work-photo:nth-of-type(10) {
        grid-column: auto;
        grid-row: auto;

        height: auto;

        aspect-ratio:
            4 / 5;
    }


    .umix-work-photo:nth-of-type(1),
    .umix-work-photo:nth-of-type(3),
    .umix-work-photo:nth-of-type(6),
    .umix-work-photo:nth-of-type(8) {
        aspect-ratio:
            4 / 3;
    }


    .umix-work__statement {
        grid-column: auto;

        justify-content:
            flex-start;

        min-height: 0;

        padding:
            2.4rem
            0;
    }


    .umix-work__statement::before {
        display: none;
    }


    .umix-work__statement p {
        font-size:
            clamp(2rem,10vw,2.75rem);

        text-align: left;
    }


    .umix-work__statement-mark {
        width: 38px;
        height: 38px;
    }


    .umix-work-photo__action {
        opacity: 1;

        transform: none;

        font-size: 0.74rem;
    }


    .umix-work-photo__shade {
        opacity: 0.4;
    }


    .umix-work__ending {
        grid-template-columns:
            45px
            minmax(0,1fr);

        gap: 0.8rem;

        margin-top: 2.5rem;
    }


    .umix-work__ending p {
        font-size: 0.78rem;

        line-height: 1.5;
    }


    .umix-work__ending-mark {
        display: none;
    }


    .umix-work__geometry {
        display: none;
    }


    /* Viewer */

    .umix-gallery-viewer__stage {
        display: grid;

        grid-template-columns:
            1fr
            1fr;

        grid-template-rows:
            minmax(0,1fr)
            auto
            auto;

        gap:
            0.8rem;

        padding:
            4.5rem
            1rem
            1rem;
    }


    .umix-gallery-viewer__image-wrap {
        grid-column:
            1 / 3;

        grid-row: 1;
    }


    .umix-gallery-viewer__image {
        max-height:
            calc(100svh - 180px);
    }


    .umix-gallery-viewer__nav {
        width: 48px;
        height: 48px;
    }


    .umix-gallery-viewer__nav--prev {
        grid-column: 1;
        grid-row: 2;

        justify-self: start;
    }


    .umix-gallery-viewer__nav--next {
        grid-column: 2;
        grid-row: 2;

        justify-self: end;
    }


    .umix-gallery-viewer__footer {
        grid-column:
            1 / 3;

        grid-row: 3;
    }

}



















































/* =========================================================
   05. PROJECT CTA
   UMIX TILE CONSTRUCTION LLC
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.umix-gallery-cta {
    position: relative;

    min-height:
        clamp(
            520px,
            64svh,
            720px
        );

    overflow: hidden;

    isolation: isolate;

    color:
        var(--umix-text-main);

    background:
        #11110F;
}



/* =========================================================
   BACKGROUND VISUAL
   ========================================================= */

.umix-gallery-cta__visual {
    position: absolute;

    inset: 0;

    z-index: -3;

    overflow: hidden;

    pointer-events: none;
}


.umix-gallery-cta__image {
    position: absolute;

    top: -5%;
    right: -2%;

    width: 58%;
    height: 110%;

    max-width: none;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.045)
        translate3d(
            0,
            var(--gallery-cta-parallax, 0px),
            0
        );

    filter:
        saturate(0.78)
        contrast(1.04);

    will-change:
        transform;
}


.umix-gallery-cta__visual-shade {
    position: absolute;
    inset: 0;

    background:

        linear-gradient(
            90deg,
            #11110F 0%,
            rgba(17,17,15,0.99) 34%,
            rgba(17,17,15,0.91) 49%,
            rgba(17,17,15,0.48) 72%,
            rgba(17,17,15,0.22) 100%
        ),

        linear-gradient(
            180deg,
            rgba(17,17,15,0.18),
            rgba(17,17,15,0.65)
        );
}


.umix-gallery-cta__visual-warmth {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at 82% 34%,
            rgba(193,154,115,0.18),
            transparent 34%
        );

    mix-blend-mode:
        soft-light;
}



/* =========================================================
   MINERAL TEXTURE
   ========================================================= */

.umix-gallery-cta::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    opacity: 0.55;

    pointer-events: none;

    background:

        linear-gradient(
            118deg,
            transparent 0%,
            transparent 22%,
            rgba(255,255,255,0.018) 22.2%,
            transparent 22.58%
        ),

        linear-gradient(
            69deg,
            transparent 0%,
            transparent 72%,
            rgba(166,133,100,0.025) 72.2%,
            transparent 72.6%
        );
}



/* =========================================================
   LAYOUT
   ========================================================= */

.umix-gallery-cta .umix-container {
    min-height:
        inherit;
}


.umix-gallery-cta__layout {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(0,1.2fr)
        minmax(300px,0.52fr);

    align-items: center;

    gap:
        clamp(
            3rem,
            8vw,
            9rem
        );

    min-height:
        inherit;

    padding:
        clamp(
            5rem,
            8vw,
            8rem
        )
        0;
}



/* =========================================================
   CONTENT
   ========================================================= */

.umix-gallery-cta__content {
    max-width:
        860px;
}



/* =========================================================
   EYEBROW
   ========================================================= */

.umix-gallery-cta__eyebrow {
    display: flex;
    align-items: center;

    gap:
        0.85rem;

    margin-bottom:
        1.3rem;

    color:
        var(--umix-bronze-soft);
}


.umix-gallery-cta__eyebrow > span {
    width:
        40px;

    height:
        1px;

    background:
        var(--umix-bronze);
}


.umix-gallery-cta__eyebrow p {
    margin: 0;

    font-size:
        var(--umix-fs-label);

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;
}



/* =========================================================
   TITLE
   ========================================================= */

.umix-gallery-cta__title {
    display: flex;
    flex-direction: column;

    margin:
        0
        0
        1.5rem;

    font-family:
        var(--umix-font-display);

    font-size:
        clamp(
            3.5rem,
            6vw,
            6.8rem
        );

    font-weight:
        600;

    line-height:
        0.88;

    letter-spacing:
        -0.05em;
}


.umix-gallery-cta__title-mask {
    display: block;

    overflow: hidden;

    padding-bottom:
        0.08em;
}


.umix-gallery-cta__title-mask > span {
    display: block;
}


.umix-gallery-cta__title-mask--accent {
    color:
        var(--umix-bronze-light);
}



/* =========================================================
   DESCRIPTION
   ========================================================= */

.umix-gallery-cta__description {
    max-width:
        610px;

    margin:
        0
        0
        2rem;

    color:
        var(--umix-text-soft);

    font-size:
        clamp(
            1rem,
            0.96rem + 0.14vw,
            1.12rem
        );

    line-height:
        1.68;

    text-wrap:
        pretty;
}



/* =========================================================
   ACTIONS
   ========================================================= */

.umix-gallery-cta__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        1rem
        1.5rem;
}



/* =========================================================
   PRIMARY CTA
   ========================================================= */

.umix-gallery-cta__primary {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap:
        0.8rem;

    min-height:
        56px;

    padding:
        0.9rem
        1.55rem;

    overflow: hidden;

    color:
        var(--umix-ink);

    background:
        var(--umix-bronze-light);

    border:
        1px solid
        var(--umix-bronze-light);

    font-size:
        var(--umix-fs-button);

    font-weight:
        700;

    letter-spacing:
        0.065em;

    text-transform:
        uppercase;

    transition:
        color
        350ms
        var(--umix-ease),
        background-color
        350ms
        var(--umix-ease),
        border-color
        350ms
        var(--umix-ease),
        transform
        350ms
        var(--umix-ease),
        box-shadow
        350ms
        var(--umix-ease);
}


.umix-gallery-cta__primary:hover {
    color:
        var(--umix-white);

    background:
        var(--umix-bronze-dark);

    border-color:
        var(--umix-bronze-dark);

    transform:
        translateY(-3px);

    box-shadow:
        var(--umix-shadow-bronze);
}


.umix-gallery-cta__primary svg {
    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform
        350ms
        var(--umix-ease);
}


.umix-gallery-cta__primary:hover svg {
    transform:
        translateX(5px);
}



/* =========================================================
   PHONE
   ========================================================= */

.umix-gallery-cta__phone {
    display: inline-grid;

    grid-template-columns:
        42px
        auto;

    align-items: center;

    gap:
        0.8rem;

    color:
        var(--umix-text-main);
}


.umix-gallery-cta__phone-icon {
    display: grid;
    place-items: center;

    width:
        42px;

    height:
        42px;

    color:
        var(--umix-bronze-light);

    border:
        1px solid
        rgba(166,133,100,0.38);

    transition:
        color
        350ms
        var(--umix-ease),
        background-color
        350ms
        var(--umix-ease),
        transform
        350ms
        var(--umix-ease);
}


.umix-gallery-cta__phone-icon svg {
    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.45;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.umix-gallery-cta__phone-copy small,
.umix-gallery-cta__phone-copy strong {
    display: block;
}


.umix-gallery-cta__phone-copy small {
    margin-bottom:
        0.15rem;

    color:
        var(--umix-text-muted);

    font-size:
        0.76rem;

    font-weight:
        700;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;
}


.umix-gallery-cta__phone-copy strong {
    font-size:
        1rem;

    font-weight:
        600;
}


.umix-gallery-cta__phone:hover
.umix-gallery-cta__phone-icon {
    color:
        var(--umix-ink);

    background:
        var(--umix-bronze-light);

    transform:
        rotate(4deg);
}



/* =========================================================
   ASIDE
   ========================================================= */

.umix-gallery-cta__aside {
    position: relative;

    min-width: 0;

    padding:
        clamp(
            1.6rem,
            3vw,
            2.6rem
        );

    border:
        1px solid
        rgba(166,133,100,0.28);

    background:
        linear-gradient(
            145deg,
            rgba(31,31,28,0.86),
            rgba(16,16,14,0.82)
        );

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

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 28px 70px
        rgba(0,0,0,0.26);
}



/* =========================================================
   ASIDE CORNERS
   ========================================================= */

.umix-gallery-cta__aside-corner {
    position: absolute;

    width:
        56px;

    height:
        56px;

    pointer-events:
        none;
}


.umix-gallery-cta__aside-corner::before,
.umix-gallery-cta__aside-corner::after {
    content: "";

    position: absolute;

    background:
        var(--umix-bronze-soft);
}


.umix-gallery-cta__aside-corner::before {
    width: 100%;
    height: 1px;
}


.umix-gallery-cta__aside-corner::after {
    width: 1px;
    height: 100%;
}


.umix-gallery-cta__aside-corner--top {
    top: -8px;
    left: -8px;
}


.umix-gallery-cta__aside-corner--bottom {
    right: -8px;
    bottom: -8px;

    transform:
        rotate(180deg);
}



/* =========================================================
   ASIDE HEAD
   ========================================================= */

.umix-gallery-cta__aside-head {
    padding-bottom:
        1.5rem;

    border-bottom:
        1px solid
        rgba(255,255,255,0.075);
}


.umix-gallery-cta__aside-head > span {
    display: block;

    margin-bottom:
        0.6rem;

    color:
        var(--umix-bronze-light);

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.umix-gallery-cta__aside-head p {
    margin: 0;

    font-family:
        var(--umix-font-display);

    font-size:
        clamp(
            1.75rem,
            2.2vw,
            2.65rem
        );

    font-weight:
        600;

    line-height:
        1.02;

    letter-spacing:
        -0.025em;
}



/* =========================================================
   SERVICE LIST
   ========================================================= */

.umix-gallery-cta__services {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        0.7rem;

    padding:
        1.6rem
        0;
}


.umix-gallery-cta__services span {
    color:
        var(--umix-text-soft);

    font-size:
        0.86rem;

    font-weight:
        600;
}


.umix-gallery-cta__services i {
    width:
        5px;

    height:
        5px;

    flex:
        0 0 auto;

    transform:
        rotate(45deg);

    border:
        1px solid
        rgba(193,154,115,0.65);
}



/* =========================================================
   ASIDE FOOTER
   ========================================================= */

.umix-gallery-cta__aside-footer {
    display: flex;
    align-items: center;

    gap:
        0.75rem;

    padding-top:
        1.35rem;

    border-top:
        1px solid
        rgba(255,255,255,0.075);
}


.umix-gallery-cta__aside-footer > span {
    width:
        34px;

    height:
        1px;

    background:
        var(--umix-bronze);
}


.umix-gallery-cta__aside-footer p {
    margin: 0;

    color:
        var(--umix-text-muted);

    font-size:
        0.78rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}



/* =========================================================
   DECORATIVE GEOMETRY
   ========================================================= */

.umix-gallery-cta__geometry {
    position: absolute;

    left:
        -120px;

    bottom:
        -130px;

    z-index: -1;

    width:
        250px;

    aspect-ratio:
        1;

    transform:
        rotate(45deg);

    opacity:
        0.12;

    pointer-events:
        none;
}


.umix-gallery-cta__geometry span {
    position: absolute;

    border:
        1px solid
        var(--umix-bronze);
}


.umix-gallery-cta__geometry span:nth-child(1) {
    inset: 0;
}


.umix-gallery-cta__geometry span:nth-child(2) {
    inset:
        40px;
}


.umix-gallery-cta__geometry span:nth-child(3) {
    inset:
        82px;
}



/* =========================================================
   BOTTOM TRANSITION
   ========================================================= */

.umix-gallery-cta__bottom {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 6;

    height:
        1px;

    overflow: hidden;

    background:
        rgba(255,255,255,0.05);
}


.umix-gallery-cta__bottom span {
    display: block;

    width:
        42%;

    height:
        100%;

    transform:
        translateX(-110%);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--umix-bronze-light),
            transparent
        );
}



/* =========================================================
   INITIAL REVEAL
   ========================================================= */

.js
.umix-gallery-cta__title-mask > span {
    transform:
        translate3d(
            0,
            112%,
            0
        );
}


.js
[data-cta-reveal] {
    opacity: 0;

    transform:
        translate3d(
            0,
            18px,
            0
        );
}



/* =========================================================
   VISIBLE
   ========================================================= */

.umix-gallery-cta.is-visible
.umix-gallery-cta__title-mask > span {
    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        transform
        850ms
        var(--umix-ease);
}


.umix-gallery-cta.is-visible
.umix-gallery-cta__title-mask:nth-child(2) > span {
    transition-delay:
        90ms;
}


.umix-gallery-cta.is-visible
[data-cta-reveal] {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        opacity
        650ms
        var(--umix-ease),
        transform
        650ms
        var(--umix-ease);
}


.umix-gallery-cta.is-visible
[data-cta-reveal="eyebrow"] {
    transition-delay:
        50ms;
}


.umix-gallery-cta.is-visible
[data-cta-reveal="description"] {
    transition-delay:
        210ms;
}


.umix-gallery-cta.is-visible
[data-cta-reveal="actions"] {
    transition-delay:
        310ms;
}


.umix-gallery-cta.is-visible
[data-cta-reveal="aside"] {
    transition-delay:
        390ms;
}


.umix-gallery-cta.is-visible
.umix-gallery-cta__bottom span {
    transform:
        translateX(175%);

    transition:
        transform
        1700ms
        var(--umix-ease)
        480ms;
}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

html.umix-reduced-motion
.umix-gallery-cta *,
html.umix-reduced-motion
.umix-gallery-cta *::before,
html.umix-reduced-motion
.umix-gallery-cta *::after {
    transition-duration:
        1ms !important;

    animation-duration:
        1ms !important;
}



/* =========================================================
   RESPONSIVE
   EXACTLY FOUR BREAKPOINTS
   ========================================================= */


/* COMPUTER */
@media (min-width: 1200px) {

    .umix-gallery-cta__layout {
        grid-template-columns:
            minmax(0,1.2fr)
            minmax(320px,0.52fr);
    }

}


/* TABLET */
@media (min-width: 768px) and (max-width: 1199px) {

    .umix-gallery-cta {
        min-height:
            600px;
    }


    .umix-gallery-cta__layout {
        grid-template-columns:
            minmax(0,1fr)
            minmax(270px,0.48fr);

        gap:
            3rem;
    }


    .umix-gallery-cta__title {
        font-size:
            clamp(
                3rem,
                6.7vw,
                5rem
            );
    }


    .umix-gallery-cta__image {
        width:
            65%;
    }


    .umix-gallery-cta__visual-shade {
        background:
            linear-gradient(
                90deg,
                #11110F 0%,
                rgba(17,17,15,0.98) 41%,
                rgba(17,17,15,0.75) 72%,
                rgba(17,17,15,0.28) 100%
            );
    }

}


/* MOBILE */
@media (min-width: 480px) and (max-width: 767px) {

    .umix-gallery-cta {
        min-height:
            auto;
    }


    .umix-gallery-cta__layout {
        grid-template-columns:
            1fr;

        gap:
            2.5rem;

        padding:
            5rem
            0;
    }


    .umix-gallery-cta__image {
        right:
            -10%;

        width:
            100%;

        opacity:
            0.48;
    }


    .umix-gallery-cta__visual-shade {
        background:
            linear-gradient(
                90deg,
                rgba(17,17,15,0.97),
                rgba(17,17,15,0.84)
            ),

            linear-gradient(
                0deg,
                rgba(17,17,15,0.88),
                transparent
            );
    }


    .umix-gallery-cta__title {
        max-width:
            620px;

        font-size:
            clamp(
                3rem,
                9vw,
                4.4rem
            );
    }


    .umix-gallery-cta__content {
        max-width:
            650px;
    }


    .umix-gallery-cta__aside {
        max-width:
            560px;
    }

}


/* SMALL MOBILE */
@media (max-width: 479px) {

    .umix-gallery-cta {
        min-height:
            auto;
    }


    .umix-gallery-cta__layout {
        grid-template-columns:
            1fr;

        gap:
            2rem;

        padding:
            4.5rem
            0;
    }


    .umix-gallery-cta__image {
        top: 0;
        right: -22%;

        width:
            125%;

        height:
            100%;

        opacity:
            0.4;
    }


    .umix-gallery-cta__visual-shade {
        background:
            linear-gradient(
                90deg,
                rgba(15,15,13,0.98),
                rgba(15,15,13,0.87)
            ),

            linear-gradient(
                0deg,
                rgba(15,15,13,0.93),
                transparent 60%
            );
    }


    .umix-gallery-cta__eyebrow {
        gap:
            0.65rem;

        margin-bottom:
            1rem;
    }


    .umix-gallery-cta__eyebrow > span {
        width:
            28px;
    }


    .umix-gallery-cta__eyebrow p {
        font-size:
            0.75rem;

        letter-spacing:
            0.15em;
    }


    .umix-gallery-cta__title {
        font-size:
            clamp(
                2.7rem,
                12vw,
                3.6rem
            );

        line-height:
            0.91;
    }


    .umix-gallery-cta__description {
        font-size:
            1rem;

        line-height:
            1.58;
    }


    .umix-gallery-cta__actions {
        display: grid;

        grid-template-columns:
            1fr;

        gap:
            1.15rem;
    }


    .umix-gallery-cta__primary {
        width:
            100%;
    }


    .umix-gallery-cta__phone {
        width:
            fit-content;
    }


    .umix-gallery-cta__aside {
        padding:
            1.25rem;
    }


    .umix-gallery-cta__aside-head p {
        font-size:
            1.8rem;
    }


    .umix-gallery-cta__services {
        gap:
            0.6rem;

        padding:
            1.35rem
            0;
    }


    .umix-gallery-cta__services span {
        font-size:
            0.82rem;
    }


    .umix-gallery-cta__geometry {
        display:
            none;
    }

}
















































/* =========================================================
   SELECTED WORK
   EXTENSION: IMAGES 11–20

   IMPORTANT:
   Append only.
   Existing Selected Work CSS remains unchanged.
   ========================================================= */


/* =========================================================
   DESKTOP / BASE PLACEMENT

   Continues the same 12-column editorial rhythm.
   ========================================================= */


/* New cinematic break */

.umix-work-photo:nth-of-type(11) {
    grid-column: span 12;
    grid-row: span 9;
}


/* Asymmetric pair */

.umix-work-photo:nth-of-type(12) {
    grid-column: span 5;
    grid-row: span 8;
}


.umix-work-photo:nth-of-type(13) {
    grid-column: span 7;
    grid-row: span 10;
}


/* Opposite asymmetric pair */

.umix-work-photo:nth-of-type(14) {
    grid-column: span 7;
    grid-row: span 9;
}


.umix-work-photo:nth-of-type(15) {
    grid-column: span 5;
    grid-row: span 7;
}


/* Second cinematic image */

.umix-work-photo:nth-of-type(16) {
    grid-column: span 12;
    grid-row: span 9;
}


/* Narrow + wide pair */

.umix-work-photo:nth-of-type(17) {
    grid-column: span 4;
    grid-row: span 8;
}


.umix-work-photo:nth-of-type(18) {
    grid-column: span 8;
    grid-row: span 10;
}


/* Final pair */

.umix-work-photo:nth-of-type(19) {
    grid-column: span 7;
    grid-row: span 8;
}


.umix-work-photo:nth-of-type(20) {
    grid-column: span 5;
    grid-row: span 8;
}



/* =========================================================
   OPTIONAL ROBUSTNESS

   If you temporarily remove one of the final images,
   odd counts still finish intentionally.
   ========================================================= */

.umix-work__gallery[data-image-count="11"]
.umix-work-photo:last-of-type,

.umix-work__gallery[data-image-count="13"]
.umix-work-photo:last-of-type,

.umix-work__gallery[data-image-count="15"]
.umix-work-photo:last-of-type,

.umix-work__gallery[data-image-count="17"]
.umix-work-photo:last-of-type,

.umix-work__gallery[data-image-count="19"]
.umix-work-photo:last-of-type {
    grid-column: span 12;
    grid-row: span 8;
}



/* =========================================================
   RESPONSIVE
   ========================================================= */


/* COMPUTER */
@media (min-width: 1200px) {

    /*
        Base definitions above already produce the
        approved 12-column composition.

        These two full-width images deliberately
        continue the rhythm used by images 1 and 6.
    */

    .umix-work-photo:nth-of-type(11),
    .umix-work-photo:nth-of-type(16) {
        grid-column: span 12;
    }

}


/* TABLET */
@media (min-width: 768px) and (max-width: 1199px) {

    .umix-work-photo:nth-of-type(11),
    .umix-work-photo:nth-of-type(16) {
        grid-column: span 6;
    }


    .umix-work-photo:nth-of-type(12),
    .umix-work-photo:nth-of-type(13),
    .umix-work-photo:nth-of-type(14),
    .umix-work-photo:nth-of-type(15),
    .umix-work-photo:nth-of-type(17),
    .umix-work-photo:nth-of-type(18),
    .umix-work-photo:nth-of-type(19),
    .umix-work-photo:nth-of-type(20) {
        grid-column: span 3;
    }


    .umix-work__gallery[data-image-count="11"]
    .umix-work-photo:last-of-type,

    .umix-work__gallery[data-image-count="13"]
    .umix-work-photo:last-of-type,

    .umix-work__gallery[data-image-count="15"]
    .umix-work-photo:last-of-type,

    .umix-work__gallery[data-image-count="17"]
    .umix-work-photo:last-of-type,

    .umix-work__gallery[data-image-count="19"]
    .umix-work-photo:last-of-type {
        grid-column: span 6;
    }

}


/* MOBILE */
@media (min-width: 480px) and (max-width: 767px) {

    /*
        Same mobile rhythm already used by
        images 1–10:
        large image → paired images → large image.
    */

    .umix-work-photo:nth-of-type(11),
    .umix-work-photo:nth-of-type(13),
    .umix-work-photo:nth-of-type(16),
    .umix-work-photo:nth-of-type(18) {
        grid-column: span 2;
        grid-row: span 5;
    }


    .umix-work-photo:nth-of-type(12),
    .umix-work-photo:nth-of-type(14),
    .umix-work-photo:nth-of-type(15),
    .umix-work-photo:nth-of-type(17),
    .umix-work-photo:nth-of-type(19),
    .umix-work-photo:nth-of-type(20) {
        grid-column: span 1;
        grid-row: span 4;
    }


    .umix-work__gallery[data-image-count="11"]
    .umix-work-photo:last-of-type,

    .umix-work__gallery[data-image-count="13"]
    .umix-work-photo:last-of-type,

    .umix-work__gallery[data-image-count="15"]
    .umix-work-photo:last-of-type,

    .umix-work__gallery[data-image-count="17"]
    .umix-work-photo:last-of-type,

    .umix-work__gallery[data-image-count="19"]
    .umix-work-photo:last-of-type {
        grid-column: span 2;
    }

}


/* SMALL MOBILE */
@media (max-width: 479px) {

    /*
        Reset desktop/tablet placement.
        Everything returns to the approved
        one-column editorial flow.
    */

    .umix-work-photo:nth-of-type(11),
    .umix-work-photo:nth-of-type(12),
    .umix-work-photo:nth-of-type(13),
    .umix-work-photo:nth-of-type(14),
    .umix-work-photo:nth-of-type(15),
    .umix-work-photo:nth-of-type(16),
    .umix-work-photo:nth-of-type(17),
    .umix-work-photo:nth-of-type(18),
    .umix-work-photo:nth-of-type(19),
    .umix-work-photo:nth-of-type(20) {
        grid-column: auto;
        grid-row: auto;

        height: auto;

        aspect-ratio: 4 / 5;
    }


    /*
        Landscape interruptions continue
        the same visual rhythm as 1–10.
    */

    .umix-work-photo:nth-of-type(11),
    .umix-work-photo:nth-of-type(13),
    .umix-work-photo:nth-of-type(16),
    .umix-work-photo:nth-of-type(18) {
        aspect-ratio: 4 / 3;
    }

}