/* =========================================================
   UMIX TILE CONSTRUCTION LLC
   GLOBAL DESIGN SYSTEM
   ========================================================= */


/* =========================================================
   01. VARIABLES
   ========================================================= */

:root {

    /* -----------------------------------------------------
       BRAND
    ----------------------------------------------------- */

    --umix-bronze: #A68564;
    --umix-bronze-dark: #765C45;
    --umix-bronze-deep: #564233;

    --umix-bronze-soft: #C19A73;
    --umix-bronze-light: #D4B18E;

    --umix-sand: #D8C7B5;

    --umix-porcelain: #F7F5F1;
    --umix-stone: #E6E1DA;
    --umix-grout: #B7B1AA;

    --umix-charcoal: #20201E;
    --umix-graphite: #343330;

    --umix-white: #FFFFFF;


    /* -----------------------------------------------------
       DARK SURFACES
    ----------------------------------------------------- */

    --umix-ink: #171715;
    --umix-ink-soft: #1C1C1A;
    --umix-ink-raised: #232320;
    --umix-ink-light: #2B2A27;

    --umix-border-dark: rgba(255, 255, 255, 0.10);
    --umix-border-soft: rgba(255, 255, 255, 0.07);
    --umix-border-bronze: rgba(166, 133, 100, 0.42);


    /* -----------------------------------------------------
       TEXT
    ----------------------------------------------------- */

    --umix-text-main: #F4F1EC;
    --umix-text-soft: #D0CBC4;
    --umix-text-muted: #ABA69F;

    --umix-text-dark: #20201E;
    --umix-text-dark-soft: #55514C;


    /* -----------------------------------------------------
       TYPOGRAPHY
    ----------------------------------------------------- */

    --umix-font-display:
        "Cormorant Garamond",
        Georgia,
        "Times New Roman",
        serif;

    --umix-font-body:
        "Manrope",
        Arial,
        Helvetica,
        sans-serif;


    /* Body text — deliberately not tiny */
    --umix-fs-body:
        clamp(1rem, 0.965rem + 0.16vw, 1.125rem);

    --umix-fs-small:
        clamp(0.9rem, 0.875rem + 0.1vw, 0.975rem);

    --umix-fs-label:
        clamp(0.85rem, 0.82rem + 0.1vw, 0.95rem);

    --umix-fs-button:
        clamp(0.925rem, 0.9rem + 0.08vw, 1rem);

    --umix-fs-h6:
        clamp(1.05rem, 1rem + 0.15vw, 1.2rem);

    --umix-fs-h5:
        clamp(1.2rem, 1.1rem + 0.35vw, 1.5rem);

    --umix-fs-h4:
        clamp(1.45rem, 1.25rem + 0.75vw, 2rem);

    --umix-fs-h3:
        clamp(1.9rem, 1.45rem + 1.5vw, 3rem);

    --umix-fs-h2:
        clamp(2.5rem, 1.8rem + 2.8vw, 4.75rem);

    --umix-fs-h1:
        clamp(3.15rem, 2rem + 4vw, 6.25rem);


    /* -----------------------------------------------------
       SPACING
    ----------------------------------------------------- */

    --umix-container:
        1460px;

    --umix-gutter:
        clamp(1.25rem, 4vw, 5.5rem);

    --umix-section-space:
        clamp(5.5rem, 9vw, 10rem);

    --umix-section-space-small:
        clamp(4rem, 6vw, 7rem);


    /* -----------------------------------------------------
       BORDERS
    ----------------------------------------------------- */

    --umix-radius-xs: 4px;
    --umix-radius-sm: 8px;
    --umix-radius-md: 14px;
    --umix-radius-lg: 22px;


    /* -----------------------------------------------------
       SHADOWS
    ----------------------------------------------------- */

    --umix-shadow-soft:
        0 20px 55px rgba(0, 0, 0, 0.18);

    --umix-shadow-medium:
        0 28px 80px rgba(0, 0, 0, 0.28);

    --umix-shadow-strong:
        0 35px 110px rgba(0, 0, 0, 0.38);

    --umix-shadow-bronze:
        0 24px 70px rgba(166, 133, 100, 0.16);


    /* -----------------------------------------------------
       TRANSITIONS
    ----------------------------------------------------- */

    --umix-ease:
        cubic-bezier(0.22, 1, 0.36, 1);

    --umix-ease-soft:
        cubic-bezier(0.4, 0, 0.2, 1);

    --umix-ease-in:
        cubic-bezier(0.65, 0, 0.35, 1);

    --umix-duration-fast:
        220ms;

    --umix-duration:
        480ms;

    --umix-duration-slow:
        760ms;

    --umix-page-duration:
        680ms;


    /* -----------------------------------------------------
       GLOBAL LAYOUT
    ----------------------------------------------------- */

    --umix-header-height: 96px;

    --umix-scroll-offset:
        calc(var(--umix-header-height) + 24px);


    /* -----------------------------------------------------
       Z-INDEX SYSTEM
    ----------------------------------------------------- */

    --umix-z-base: 1;
    --umix-z-content: 10;
    --umix-z-header: 100;
    --umix-z-menu: 300;
    --umix-z-modal: 800;
    --umix-z-transition: 9999;
}



/* =========================================================
   02. RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    width: 100%;
    min-height: 100%;

    font-size: 100%;

    scroll-behavior: auto;
    scroll-padding-top: var(--umix-scroll-offset);

    background: var(--umix-ink);

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


body {
    position: relative;

    width: 100%;
    min-width: 320px;
    min-height: 100vh;
    min-height: 100svh;

    margin: 0;

    overflow-x: clip;

    font-family: var(--umix-font-body);
    font-size: var(--umix-fs-body);
    font-weight: 400;
    line-height: 1.72;

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

    background:
        radial-gradient(
            circle at 14% 8%,
            rgba(166, 133, 100, 0.08),
            transparent 27rem
        ),
        radial-gradient(
            circle at 92% 35%,
            rgba(255, 255, 255, 0.025),
            transparent 32rem
        ),
        radial-gradient(
            ellipse at 38% 82%,
            rgba(118, 92, 69, 0.07),
            transparent 35rem
        ),
        linear-gradient(
            135deg,
            #171715 0%,
            #1B1B19 43%,
            #161614 100%
        );

    isolation: isolate;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;
}


/*
   Mineral texture.
   No grid.
   Very low contrast so content remains readable.
*/

body::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -2;

    pointer-events: none;

    opacity: 0.23;

    background-image:

        radial-gradient(
            ellipse at 15% 20%,
            rgba(255,255,255,0.035) 0,
            transparent 42%
        ),

        radial-gradient(
            ellipse at 85% 75%,
            rgba(166,133,100,0.035) 0,
            transparent 48%
        ),

        radial-gradient(
            circle at 52% 35%,
            rgba(255,255,255,0.018) 0,
            transparent 35%
        );
}


/*
   Extremely subtle vertical mineral lighting.
*/

body::after {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    opacity: 0.10;

    background:

        linear-gradient(
            112deg,
            transparent 0%,
            transparent 22%,
            rgba(255,255,255,0.018) 36%,
            transparent 52%
        ),

        linear-gradient(
            72deg,
            transparent 38%,
            rgba(166,133,100,0.022) 52%,
            transparent 69%
        );
}



/* =========================================================
   03. GLOBAL ELEMENTS
   ========================================================= */

main {
    position: relative;
    z-index: var(--umix-z-content);
}


section {
    position: relative;

    scroll-margin-top:
        var(--umix-scroll-offset);
}


img,
picture,
video,
canvas,
svg {
    display: block;

    max-width: 100%;
}


img {
    height: auto;
}


button,
input,
textarea,
select {
    font: inherit;
}


button,
a {
    -webkit-tap-highlight-color: transparent;
}


a {
    color: inherit;

    text-decoration: none;
}


button {
    border: 0;

    cursor: pointer;
}


p {
    margin-top: 0;
}


::selection {
    color: var(--umix-ink);

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



/* =========================================================
   04. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;

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

    text-wrap: balance;
}


h1,
h2,
h3 {
    font-family: var(--umix-font-display);

    font-weight: 600;

    line-height: 0.98;

    letter-spacing: -0.035em;
}


h1 {
    font-size: var(--umix-fs-h1);
}


h2 {
    font-size: var(--umix-fs-h2);
}


h3 {
    font-size: var(--umix-fs-h3);

    line-height: 1.03;
}


h4 {
    font-size: var(--umix-fs-h4);
}


h5 {
    font-size: var(--umix-fs-h5);
}


h6 {
    font-size: var(--umix-fs-h6);
}



/* =========================================================
   05. GLOBAL CONTAINER
   ========================================================= */

.umix-container {
    width:
        min(
            calc(100% - (var(--umix-gutter) * 2)),
            var(--umix-container)
        );

    margin-inline: auto;
}



/* =========================================================
   06. SECTION SYSTEM
   ========================================================= */

.umix-section {
    position: relative;

    padding-block:
        var(--umix-section-space);
}


.umix-section--compact {
    padding-block:
        var(--umix-section-space-small);
}


.umix-surface-dark {
    color: var(--umix-text-main);

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


.umix-surface-raised {
    color: var(--umix-text-main);

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


.umix-surface-light {
    color: var(--umix-text-dark);

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


.umix-surface-stone {
    color: var(--umix-text-dark);

    background:
        linear-gradient(
            135deg,
            var(--umix-porcelain),
            var(--umix-stone)
        );
}



/* =========================================================
   07. EYEBROW / SMALL LABEL
   ========================================================= */

.umix-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;

    margin-bottom: 1.35rem;

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

    line-height: 1.4;

    letter-spacing: 0.18em;

    text-transform: uppercase;

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


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

    width: 38px;
    height: 1px;

    flex: 0 0 auto;

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



/* =========================================================
   08. GLOBAL BUTTON SYSTEM
   ========================================================= */

.umix-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;

    min-height: 54px;

    padding:
        0.9rem
        1.55rem;

    overflow: hidden;

    border: 1px solid transparent;

    font-family: var(--umix-font-body);
    font-size: var(--umix-fs-button);
    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition:
        color var(--umix-duration-fast) var(--umix-ease),
        border-color var(--umix-duration-fast) var(--umix-ease),
        transform var(--umix-duration-fast) var(--umix-ease),
        box-shadow var(--umix-duration) var(--umix-ease);
}


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

    position: absolute;
    inset: 0;

    transform:
        translate3d(-104%, 0, 0)
        skewX(-12deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.18),
            transparent
        );

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


.umix-btn:hover::before,
.umix-btn:focus-visible::before {
    transform:
        translate3d(104%, 0, 0)
        skewX(-12deg);
}


.umix-btn:hover {
    transform:
        translateY(-3px);
}


.umix-btn:active {
    transform:
        translateY(-1px);
}



/* Bronze button */

.umix-btn--primary {
    color:
        var(--umix-ink);

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

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

    box-shadow:
        0 16px 38px rgba(0,0,0,0.18);
}


.umix-btn--primary:hover {
    background:
        var(--umix-bronze-light);

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

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



/* Outline button */

.umix-btn--outline {
    color:
        var(--umix-text-main);

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

    border-color:
        rgba(193,154,115,0.70);
}


.umix-btn--outline:hover {
    color:
        var(--umix-white);

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

    background:
        rgba(166,133,100,0.08);
}



/* =========================================================
   09. ACCESSIBILITY / FOCUS
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline:
        2px solid var(--umix-bronze-light);

    outline-offset:
        4px;
}



/* =========================================================
   10. BODY SCROLLBAR
   ========================================================= */


/* Firefox */

html {
    scrollbar-width: thin;

    scrollbar-color:
        var(--umix-bronze)
        var(--umix-ink);
}


/* Chromium / Safari */

body::-webkit-scrollbar {
    width: 12px;
}


body::-webkit-scrollbar-track {
    background:
        var(--umix-ink);
}


body::-webkit-scrollbar-thumb {
    border:
        3px solid var(--umix-ink);

    border-radius:
        999px;

    background:
        linear-gradient(
            180deg,
            var(--umix-bronze-light),
            var(--umix-bronze-dark)
        );
}


body::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            #DBB995,
            var(--umix-bronze)
        );
}



/* =========================================================
   11. PAGE TRANSITION
   ========================================================= */

.umix-page-transition {
    position: fixed;
    inset: 0;

    z-index:
        var(--umix-z-transition);

    display: grid;
    place-items: center;

    pointer-events: none;

    visibility: hidden;
}


.js .umix-page-transition {
    visibility: visible;
}


/*
   Main stone slab
*/

.umix-page-transition__surface {
    position: absolute;
    inset: 0;

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

    background:

        radial-gradient(
            circle at 25% 30%,
            rgba(166, 133, 100, 0.09),
            transparent 30rem
        ),

        linear-gradient(
            120deg,
            #171715,
            #23221F 48%,
            #171715
        );

    box-shadow:
        30px 0 90px rgba(0,0,0,0.45);

    will-change:
        transform;
}


/*
   Bronze edge that follows the transition.
*/

.umix-page-transition__surface::after {
    content: "";

    position: absolute;
    top: 0;
    right: 0;

    width: 1px;
    height: 100%;

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

    box-shadow:
        0 0 40px rgba(166,133,100,0.45);
}



/*
   Logo at transition center
*/

.umix-page-transition__mark {
    position: relative;

    z-index: 2;

    width:
        clamp(76px, 7vw, 120px);

    opacity: 0;

    transform:
        scale(0.88)
        rotate(-8deg);

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


.umix-page-transition__mark img {
    width: 100%;

    filter:
        brightness(1.14)
        sepia(0.12);
}



/*
   Thin animated line.
*/

.umix-page-transition__line {
    position: absolute;

    left: 50%;
    bottom: 12%;

    width:
        min(220px, 45vw);

    height: 1px;

    overflow: hidden;

    transform:
        translateX(-50%);

    opacity: 0;
}


.umix-page-transition__line::before {
    content: "";

    position: absolute;
    inset: 0;

    transform:
        translateX(-101%);

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



/* ---------------------------------------------------------
   LEAVING PAGE
--------------------------------------------------------- */

body.umix-is-leaving
.umix-page-transition {
    pointer-events: all;
}


body.umix-is-leaving
.umix-page-transition__surface {
    transform:
        translate3d(0, 0, 0);

    transition:
        transform
        var(--umix-page-duration)
        var(--umix-ease-in);
}


body.umix-is-leaving
.umix-page-transition__mark {
    opacity: 0.9;

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

    transition-delay:
        230ms;
}


body.umix-is-leaving
.umix-page-transition__line {
    opacity: 1;
}


body.umix-is-leaving
.umix-page-transition__line::before {
    transform:
        translateX(101%);

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



/* ---------------------------------------------------------
   ENTERING PAGE
--------------------------------------------------------- */

body.umix-is-entering
.umix-page-transition__surface {
    transform:
        translate3d(0, 0, 0);

    transition: none;
}


body.umix-is-entering
.umix-page-transition__mark {
    opacity: 0.8;

    transform:
        scale(1);
}


body.umix-is-entering.umix-page-ready
.umix-page-transition__surface {
    transform:
        translate3d(102%, 0, 0);

    transition:
        transform
        var(--umix-page-duration)
        var(--umix-ease);
}


body.umix-is-entering.umix-page-ready
.umix-page-transition__mark {
    opacity: 0;

    transform:
        scale(1.08)
        rotate(5deg);
}



/* =========================================================
   12. INTERNAL SECTION NAVIGATION
   ========================================================= */

.umix-section-progress {
    position: fixed;

    top: 0;
    left: 0;

    z-index:
        calc(var(--umix-z-transition) - 10);

    width: 100%;
    height: 2px;

    pointer-events: none;

    opacity: 0;

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

    transition:
        opacity
        180ms ease;
}


.umix-section-progress span {
    display: block;

    width: 100%;
    height: 100%;

    transform:
        scaleX(0);

    transform-origin:
        left center;

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


body.umix-section-moving
.umix-section-progress {
    opacity: 1;
}


body.umix-section-moving
.umix-section-progress span {
    animation:
        umixSectionProgress
        850ms
        var(--umix-ease)
        forwards;
}



/*
   Destination section gets a subtle bronze detail.
*/

.umix-section-arriving::after {
    content: "";

    position: absolute;

    top: 0;
    left: var(--umix-gutter);

    width: min(150px, 25vw);
    height: 1px;

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

    transform-origin:
        left center;

    animation:
        umixSectionArrival
        900ms
        var(--umix-ease)
        both;

    pointer-events: none;
}



/* =========================================================
   13. GLOBAL ANIMATION KEYFRAMES
   ========================================================= */

@keyframes umixSectionProgress {

    0% {
        transform:
            scaleX(0);
    }

    55% {
        transform:
            scaleX(0.74);
    }

    100% {
        transform:
            scaleX(1);
    }

}


@keyframes umixSectionArrival {

    0% {
        opacity: 0;

        transform:
            scaleX(0);
    }

    45% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            scaleX(1);
    }

}



/* =========================================================
   14. RESPONSIVE
   EXACTLY FOUR GLOBAL BREAKPOINTS
   ========================================================= */


/* =========================================================
   COMPUTER
   1200px+
   ========================================================= */

@media (min-width: 1200px) {

    :root {
        --umix-header-height: 96px;
        --umix-gutter: clamp(3rem, 4.4vw, 5.5rem);
    }

}



/* =========================================================
   TABLET
   768px — 1199px
   ========================================================= */

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

    :root {
        --umix-header-height: 86px;
        --umix-gutter: clamp(2rem, 4vw, 3rem);

        --umix-section-space:
            clamp(5rem, 9vw, 7rem);
    }


    body {
        line-height: 1.68;
    }


    .umix-btn {
        min-height: 52px;

        padding-inline:
            1.4rem;
    }

}



/* =========================================================
   MOBILE
   480px — 767px
   ========================================================= */

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

    :root {
        --umix-header-height: 76px;

        --umix-gutter: 1.35rem;

        --umix-section-space: 5rem;
        --umix-section-space-small: 3.8rem;

        --umix-scroll-offset:
            calc(
                var(--umix-header-height)
                + 16px
            );
    }


    body {
        line-height: 1.65;
    }


    .umix-btn {
        min-height: 52px;

        padding:
            0.9rem
            1.3rem;
    }


    .umix-eyebrow {
        gap: 0.65rem;

        letter-spacing: 0.14em;
    }


    .umix-eyebrow::before {
        width: 28px;
    }

}



/* =========================================================
   SMALL MOBILE
   <= 479px
   ========================================================= */

@media (max-width: 479px) {

    :root {
        --umix-header-height: 72px;

        --umix-gutter: 1.1rem;

        --umix-section-space: 4.5rem;
        --umix-section-space-small: 3.4rem;

        --umix-scroll-offset:
            calc(
                var(--umix-header-height)
                + 14px
            );
    }


    body {
        min-width: 300px;

        line-height: 1.62;
    }


    .umix-btn {
        width: 100%;

        min-height: 52px;

        padding:
            0.9rem
            1.1rem;
    }


    .umix-eyebrow {
        letter-spacing: 0.12em;
    }


    .umix-eyebrow::before {
        width: 24px;
    }


    body::-webkit-scrollbar {
        width: 7px;
    }

}




































/* =========================================================
   01. HEADER
   UMIX TILE CONSTRUCTION LLC
   ========================================================= */


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    white-space: nowrap;

    border: 0;
}



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

   IMPORTANT:
   Never use position: sticky here.
   ========================================================= */

.umix-header {
    position: fixed;

    top: 0;
    left: 0;

    z-index: var(--umix-z-header);

    width: 100%;
    height: var(--umix-header-height);

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

    background:
        linear-gradient(
            90deg,
            rgba(20, 20, 18, 0.97),
            rgba(27, 27, 25, 0.95) 50%,
            rgba(20, 20, 18, 0.97)
        );

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

    isolation: isolate;

    transition:
        background-color
        var(--umix-duration)
        var(--umix-ease),
        box-shadow
        var(--umix-duration)
        var(--umix-ease),
        border-color
        var(--umix-duration)
        var(--umix-ease);

    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}


/*
    Mineral highlight.

    This is intentionally irregular rather than
    using a typical grid pattern.
*/

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

    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    opacity: 0.36;

    background:
        radial-gradient(
            ellipse at 15% -30%,
            rgba(166, 133, 100, 0.12),
            transparent 36%
        ),

        radial-gradient(
            ellipse at 72% 170%,
            rgba(255, 255, 255, 0.035),
            transparent 42%
        ),

        linear-gradient(
            112deg,
            transparent 18%,
            rgba(255, 255, 255, 0.018) 39%,
            transparent 53%
        );
}


/*
    Header does NOT change height when scrolling.

    This is important because the header-slot
    always remains exactly synchronized.
*/

.umix-header.is-scrolled {
    background:
        linear-gradient(
            90deg,
            rgba(17, 17, 16, 0.985),
            rgba(25, 25, 23, 0.98) 50%,
            rgba(17, 17, 16, 0.985)
        );

    border-bottom-color:
        rgba(166, 133, 100, 0.30);

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.24);
}



/* =========================================================
   RESERVED HEADER SPACE
   ========================================================= */

.umix-header-slot {
    position: relative;

    width: 100%;
    height: var(--umix-header-height);

    flex: 0 0 var(--umix-header-height);

    pointer-events: none;
}



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

.umix-header__inner {
    position: relative;

    height: 100%;

    display: grid;
    align-items: center;

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

    gap: clamp(1.2rem, 2vw, 2.7rem);
}



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

.umix-header__edge {
    position: absolute;

    left: 0;
    bottom: -1px;

    width: 100%;
    height: 1px;

    overflow: hidden;

    pointer-events: none;
}


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

    position: absolute;
    inset: 0;

    transform:
        translateX(-72%);

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(166, 133, 100, 0.12) 22%,
            var(--umix-bronze) 50%,
            rgba(166, 133, 100, 0.12) 78%,
            transparent 100%
        );

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


.umix-header.is-scrolled
.umix-header__edge::before {
    transform:
        translateX(0);
}



/* =========================================================
   BRAND / LOGO
   ========================================================= */

.umix-header__brand {
    position: relative;

    z-index: 2;

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

    width: fit-content;

    flex-shrink: 0;
}


.umix-header__logo {
    display: block;

    width: auto;
    max-width: 100%;

    object-fit: contain;

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


.umix-header__brand:hover
.umix-header__logo {
    transform:
        translateY(-2px);

    filter:
        brightness(1.06);
}



/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.umix-header__nav {
    align-items: center;
    justify-content: flex-end;

    min-width: 0;
}


.umix-header__nav-link {
    position: relative;

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

    min-height: 46px;

    padding:
        0.3rem
        0.15rem;

    font-size:
        clamp(
            0.91rem,
            0.86rem + 0.09vw,
            1rem
        );

    font-weight: 500;

    line-height: 1;

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

    white-space: nowrap;

    transition:
        color
        var(--umix-duration-fast)
        var(--umix-ease),
        transform
        var(--umix-duration-fast)
        var(--umix-ease);
}


.umix-header__nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 6px;

    width: 100%;
    height: 1px;

    transform:
        scaleX(0);

    transform-origin:
        right center;

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

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


.umix-header__nav-link:hover,
.umix-header__nav-link:focus-visible {
    color:
        var(--umix-white);

    transform:
        translateY(-1px);
}


.umix-header__nav-link:hover::after,
.umix-header__nav-link:focus-visible::after {
    transform:
        scaleX(1);

    transform-origin:
        left center;
}



/* =========================================================
   FREE ESTIMATE BUTTON
   ========================================================= */

.umix-header__estimate {
    position: relative;

    z-index: 2;

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

    gap: 0.8rem;

    min-height: 52px;

    padding:
        0.75rem
        1.3rem;

    overflow: hidden;

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

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

    background:
        rgba(166, 133, 100, 0.035);

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

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.075em;

    text-transform: uppercase;

    white-space: nowrap;

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


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

    position: absolute;

    top: 0;
    bottom: 0;
    left: -18%;

    width: 138%;

    transform:
        translateX(-103%)
        skewX(-13deg);

    background:
        linear-gradient(
            110deg,
            var(--umix-bronze-dark),
            var(--umix-bronze-soft)
        );

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


.umix-header__estimate-text,
.umix-header__estimate-arrow {
    position: relative;

    z-index: 1;
}


.umix-header__estimate-arrow {
    display: grid;
    place-items: center;

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


.umix-header__estimate:hover,
.umix-header__estimate:focus-visible {
    color:
        var(--umix-ink);

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

    transform:
        translateY(-2px);

    box-shadow:
        0 16px 35px
        rgba(0, 0, 0, 0.24);
}


.umix-header__estimate:hover::before,
.umix-header__estimate:focus-visible::before {
    transform:
        translateX(0)
        skewX(-13deg);
}


.umix-header__estimate:hover
.umix-header__estimate-arrow,
.umix-header__estimate:focus-visible
.umix-header__estimate-arrow {
    transform:
        translateX(4px);
}



/* =========================================================
   HAMBURGER
   ========================================================= */

.umix-menu-toggle {
    position: relative;

    z-index: 3;

    display: none;

    width: 46px;
    height: 46px;

    align-items: center;
    justify-content: center;

    padding: 0;

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

    background:
        transparent;

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

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


.umix-menu-toggle:hover {
    border-color:
        rgba(193, 154, 115, 0.75);

    background:
        rgba(166, 133, 100, 0.06);
}


.umix-menu-toggle__icon {
    position: relative;

    display: block;

    width: 21px;
    height: 14px;
}


.umix-menu-toggle__icon span {
    position: absolute;

    left: 0;

    width: 100%;
    height: 1.5px;

    background:
        currentColor;

    transform-origin:
        center;

    transition:
        top
        300ms
        var(--umix-ease),
        transform
        430ms
        var(--umix-ease),
        width
        300ms
        var(--umix-ease);
}


.umix-menu-toggle__icon span:first-child {
    top: 3px;
}


.umix-menu-toggle__icon span:last-child {
    top: 10px;

    width: 72%;

    left: auto;
    right: 0;
}


.umix-menu-toggle.is-active
.umix-menu-toggle__icon span:first-child {
    top: 6px;

    transform:
        rotate(45deg);
}


.umix-menu-toggle.is-active
.umix-menu-toggle__icon span:last-child {
    top: 6px;

    width: 100%;

    transform:
        rotate(-45deg);
}



/* =========================================================
   MOBILE / TABLET MENU
   ========================================================= */

.umix-mobile-menu {
    position: fixed;

    top: var(--umix-header-height);
    right: 0;
    bottom: 0;
    left: 0;

    z-index:
        calc(var(--umix-z-header) - 1);

    overflow-x: hidden;
    overflow-y: auto;

    visibility: hidden;

    pointer-events: none;

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

    background:
        radial-gradient(
            circle at 85% 18%,
            rgba(166, 133, 100, 0.12),
            transparent 25rem
        ),

        radial-gradient(
            ellipse at 8% 88%,
            rgba(255, 255, 255, 0.035),
            transparent 28rem
        ),

        linear-gradient(
            132deg,
            #161614,
            #20201D 55%,
            #171715
        );

    clip-path:
        inset(
            0
            0
            100%
            0
        );

    transition:
        clip-path
        650ms
        var(--umix-ease),
        visibility
        0s
        linear
        650ms;

    overscroll-behavior: contain;
}


.umix-mobile-menu.is-open {
    visibility: visible;

    pointer-events: auto;

    clip-path:
        inset(
            0
            0
            0
            0
        );

    transition:
        clip-path
        650ms
        var(--umix-ease),
        visibility
        0s
        linear
        0s;
}



/* Mineral light */

.umix-mobile-menu__mineral {
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.45;

    background:
        linear-gradient(
            117deg,
            transparent 0%,
            transparent 31%,
            rgba(255, 255, 255, 0.025) 44%,
            transparent 59%
        ),

        radial-gradient(
            ellipse at 54% 42%,
            transparent 42%,
            rgba(166, 133, 100, 0.035) 43%,
            transparent 44%
        );
}



/*
    Large geometric echo inspired by logo.
*/

.umix-mobile-menu__shape {
    position: absolute;

    right: -115px;
    bottom: -150px;

    width: 330px;
    aspect-ratio: 1;

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

    transform:
        rotate(45deg);

    pointer-events: none;
}


.umix-mobile-menu__shape::before,
.umix-mobile-menu__shape::after {
    content: "";

    position: absolute;

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


.umix-mobile-menu__shape::before {
    inset: 38px;
}


.umix-mobile-menu__shape::after {
    inset: 80px;
}



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

.umix-mobile-menu__inner {
    position: relative;

    z-index: 1;

    display: flex;
    flex-direction: column;

    min-height:
        calc(
            100dvh -
            var(--umix-header-height)
        );

    padding-top:
        clamp(2.3rem, 6vh, 4.5rem);

    padding-bottom:
        max(
            2rem,
            env(safe-area-inset-bottom)
        );
}


.umix-mobile-menu__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.8rem;

    margin:
        0
        0
        1rem;

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

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

    font-weight: 600;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}


.umix-mobile-menu__eyebrow::before {
    content: "";

    width: 34px;
    height: 1px;

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



/* =========================================================
   MOBILE NAV LINKS
   ========================================================= */

.umix-mobile-menu__nav {
    display: flex;
    flex-direction: column;

    width: 100%;
}


.umix-mobile-menu__link {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    min-height: 66px;

    padding:
        0.78rem
        0;

    overflow: hidden;

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

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


.umix-mobile-menu__link span {
    display: block;

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

    font-size:
        clamp(
            1.85rem,
            4.5vw,
            2.75rem
        );

    font-weight: 600;

    line-height: 1;

    letter-spacing:
        -0.025em;

    transform:
        translateY(115%);

    clip-path:
        inset(
            100%
            0
            0
            0
        );

    transition:
        transform
        580ms
        var(--umix-ease),
        clip-path
        580ms
        var(--umix-ease);
}


.umix-mobile-menu__link svg {
    width: 22px;
    height: 22px;

    fill: none;

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

    stroke-width: 1.6;

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

    transform:
        translateX(-8px);

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


.umix-mobile-menu.is-open
.umix-mobile-menu__link span {
    transform:
        translateY(0);

    clip-path:
        inset(
            0
            0
            0
            0
        );

    transition-delay:
        calc(
            110ms +
            var(--menu-index) * 52ms
        );
}


.umix-mobile-menu__link:hover span,
.umix-mobile-menu__link:focus-visible span {
    color:
        var(--umix-bronze-light);
}


.umix-mobile-menu__link:hover svg,
.umix-mobile-menu__link:focus-visible svg {
    transform:
        translateX(0);
}



/* =========================================================
   MOBILE MENU FOOTER
   ========================================================= */

.umix-mobile-menu__footer {
    display: flex;
    align-items: center;
    gap: 0.8rem;

    margin-top: auto;
    padding-top: 2rem;

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

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

    font-weight: 500;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.umix-mobile-menu__footer
span:nth-child(2) {
    width: 32px;
    height: 1px;

    background:
        rgba(166, 133, 100, 0.55);
}



/* =========================================================
   REDUCED MOTION
   Applied by JS instead of another CSS media query.
   ========================================================= */

html.umix-reduced-motion
.umix-mobile-menu,

html.umix-reduced-motion
.umix-mobile-menu__link span,

html.umix-reduced-motion
.umix-menu-toggle__icon span,

html.umix-reduced-motion
.umix-header__estimate,

html.umix-reduced-motion
.umix-header__estimate::before,

html.umix-reduced-motion
.umix-header__nav-link,

html.umix-reduced-motion
.umix-header__edge::before {
    transition-duration: 1ms;
}



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


/* =========================================================
   01. COMPUTER
   1200px+
   ========================================================= */

@media (min-width: 1200px) {

    .umix-header__inner {
        grid-template-columns:
            minmax(245px, 0.9fr)
            minmax(0, 2fr)
            auto;
    }


    .umix-header__brand {
        max-width: 285px;
    }


    .umix-header__logo {
        max-width: 280px;
        max-height: 73px;
    }


    .umix-header__nav {
        display: flex;

        gap:
            clamp(
                1rem,
                1.45vw,
                1.75rem
            );
    }


    .umix-menu-toggle {
        display: none;
    }


    .umix-header__estimate {
        min-width: 172px;
    }


    .umix-mobile-menu {
        display: none;
    }

}



/* =========================================================
   02. TABLET
   768px — 1199px
   ========================================================= */

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

    .umix-header__inner {
        grid-template-columns:
            54px
            minmax(0, 1fr)
            auto;

        gap: 1.35rem;
    }


    .umix-menu-toggle {
        display: inline-flex;
    }


    .umix-header__nav {
        display: none;
    }


    .umix-header__brand {
        justify-self: center;

        max-width: 215px;
    }


    .umix-header__logo {
        max-width: 210px;
        max-height: 64px;
    }


    .umix-header__estimate {
        min-height: 50px;

        padding-inline:
            1.15rem;
    }


    .umix-mobile-menu__inner {
        max-width: 760px;
    }

}



/* =========================================================
   03. MOBILE
   480px — 767px
   ========================================================= */

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

    .umix-header__inner {
        width:
            calc(
                100% -
                2rem
            );

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

        gap: 0.8rem;
    }


    .umix-menu-toggle {
        display: inline-flex;

        width: 44px;
        height: 44px;
    }


    .umix-header__nav {
        display: none;
    }


    .umix-header__brand {
        justify-self: center;

        width: 100%;

        max-width: 154px;
    }


    .umix-header__logo {
        width: 100%;

        max-width: 154px;
        max-height: 56px;
    }


    .umix-header__estimate {
        min-height: 44px;

        gap: 0.45rem;

        padding:
            0.65rem
            0.85rem;

        font-size:
            0.78rem;

        letter-spacing:
            0.055em;
    }


    .umix-header__estimate-arrow svg {
        width: 17px;
        height: 17px;
    }


    .umix-mobile-menu__inner {
        padding-top:
            clamp(
                2rem,
                5vh,
                3rem
            );
    }


    .umix-mobile-menu__link {
        min-height: 63px;
    }

}



/* =========================================================
   04. SMALL MOBILE
   <= 479px
   ========================================================= */

@media (max-width: 479px) {

    .umix-header__inner {
        width:
            calc(
                100% -
                1.2rem
            );

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

        gap: 0.5rem;
    }


    .umix-menu-toggle {
        display: inline-flex;

        width: 42px;
        height: 42px;
    }


    .umix-menu-toggle__icon {
        width: 19px;
    }


    .umix-header__nav {
        display: none;
    }


    .umix-header__brand {
        justify-self: center;

        width: 100%;

        max-width: 128px;
    }


    .umix-header__logo {
        width: 100%;

        max-width: 128px;
        max-height: 52px;
    }


    .umix-header__estimate {
        min-width: 0;
        min-height: 42px;

        gap: 0.35rem;

        padding:
            0.6rem
            0.65rem;

        font-size:
            0.72rem;

        letter-spacing:
            0.035em;
    }


    .umix-header__estimate-arrow svg {
        width: 15px;
        height: 15px;
    }


    .umix-mobile-menu__inner {
        width:
            calc(
                100% -
                2.2rem
            );

        padding-top:
            clamp(
                1.75rem,
                4vh,
                2.4rem
            );
    }


    .umix-mobile-menu__eyebrow {
        margin-bottom: 0.55rem;
    }


    .umix-mobile-menu__link {
        min-height: 58px;

        padding-block:
            0.68rem;
    }


    .umix-mobile-menu__link span {
        font-size:
            clamp(
                1.65rem,
                8vw,
                2.1rem
            );
    }


    .umix-mobile-menu__footer {
        padding-top: 1.5rem;

        font-size: 0.82rem;
    }

}



































/* =========================================================
   02. HERO — REBUILT
   UMIX TILE CONSTRUCTION LLC
   ========================================================= */


/* =========================================================
   01. HERO SHELL

   Header is already occupying:
   var(--umix-header-height)

   Therefore:
   HEADER + HERO = 100svh
   ========================================================= */

.umix-hero {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 47%)
        minmax(0, 53%);

    width: 100%;

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

    min-height: 0;

    overflow: hidden;

    isolation: isolate;

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



/* =========================================================
   02. LEFT CONTENT PANEL
   ========================================================= */

.umix-hero__content {
    position: relative;

    z-index: 5;

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

    overflow: hidden;

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

    background:

        radial-gradient(
            ellipse at 10% 6%,
            rgba(166, 133, 100, 0.105),
            transparent 31%
        ),

        radial-gradient(
            ellipse at 93% 86%,
            rgba(255, 255, 255, 0.028),
            transparent 36%
        ),

        linear-gradient(
            126deg,
            #151513 0%,
            #1A1A18 48%,
            #171715 100%
        );
}



/*
    Fine mineral veins.
    No grid.
*/

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

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.42;

    background:

        linear-gradient(
            119deg,
            transparent 0%,
            transparent 28%,
            rgba(255, 255, 255, 0.026) 28.15%,
            transparent 28.55%
        ),

        linear-gradient(
            69deg,
            transparent 0%,
            transparent 67%,
            rgba(166, 133, 100, 0.025) 67.2%,
            transparent 67.65%
        ),

        radial-gradient(
            ellipse at 25% 66%,
            transparent 0%,
            transparent 45%,
            rgba(255, 255, 255, 0.022) 45.25%,
            transparent 45.8%
        );
}



/*
    Small blend into the image.

    It does NOT occupy another column.
*/

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

    position: absolute;

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

    width: 76px;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(23, 23, 21, 0),
            rgba(23, 23, 21, 0.28)
        );
}



/* =========================================================
   03. CONTENT LAYOUT
   ========================================================= */

.umix-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(
            1rem,
            2.2vh,
            1.8rem
        )

        clamp(
            1.8rem,
            2.5vw,
            3.2rem
        )

        clamp(
            1rem,
            2vh,
            1.6rem
        )

        clamp(
            2rem,
            5.2vw,
            6.25rem
        );
}



/* =========================================================
   04. EYEBROW
   ========================================================= */

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

    gap: 0.82rem;

    width: fit-content;

    margin-bottom:
        clamp(
            0.7rem,
            1.6vh,
            1.35rem
        );

    overflow: hidden;

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

    font-size:
        clamp(
            0.78rem,
            0.74rem + 0.12vw,
            0.91rem
        );

    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.2em;

    text-transform: uppercase;
}


.umix-hero__eyebrow-line {
    display: block;

    width: 30px;
    height: 1px;

    flex: 0 0 auto;

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

    transform-origin:
        left center;
}



/* =========================================================
   05. TITLE
   ========================================================= */

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

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

    min-width: 0;

    margin:
        0
        0
        clamp(
            0.9rem,
            2vh,
            1.6rem
        );

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

    font-size:
        clamp(
            2.85rem,
            min(3.45vw, 7.1vh),
            4.85rem
        );

    font-weight: 600;

    line-height: 0.9;

    letter-spacing: -0.04em;

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


.umix-hero__title-mask {
    display: block;

    width: 100%;

    overflow: hidden;

    padding-bottom: 0.06em;
}


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

    max-width: 100%;

    transform:
        translate3d(
            0,
            112%,
            0
        );

    will-change:
        transform;
}


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



/* =========================================================
   06. DESCRIPTION
   ========================================================= */

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

    margin:
        0
        0
        clamp(
            1rem,
            2.2vh,
            1.65rem
        );

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

    font-size:
        clamp(
            1rem,
            0.965rem + 0.12vw,
            1.11rem
        );

    line-height: 1.58;

    text-wrap: pretty;
}



/* =========================================================
   07. ACTIONS
   ========================================================= */

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

    gap: 0.85rem;

    width: 100%;

    margin-bottom:
        clamp(
            1.3rem,
            3vh,
            2.4rem
        );
}


.umix-hero__button {
    width: auto;
    min-width: 178px;

    min-height: 50px;

    flex: 0 1 auto;
}


.umix-hero__button svg {
    width: 19px;
    height: 19px;

    flex: 0 0 auto;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

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

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


.umix-hero__button:hover svg,
.umix-hero__button:focus-visible svg {
    transform:
        translateX(4px);
}



/* =========================================================
   08. FEATURE STRIP
   ========================================================= */

.umix-hero__features {
    display: grid;

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

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

    min-width: 0;
}


.umix-hero-feature {
    position: relative;

    display: grid;

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

    gap: 0.7rem;

    min-width: 0;

    padding-inline:
        clamp(
            0.6rem,
            1vw,
            1rem
        );
}


.umix-hero-feature:first-child {
    padding-left: 0;
}


.umix-hero-feature:last-child {
    padding-right: 0;
}


.umix-hero-feature:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 6px;
    right: 0;

    width: 1px;
    height:
        calc(
            100% - 12px
        );

    background:
        linear-gradient(
            transparent,
            rgba(166, 133, 100, 0.48),
            transparent
        );
}



/* Feature icon */

.umix-hero-feature__icon {
    width: 30px;
    height: 30px;

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


.umix-hero-feature__icon svg {
    width: 100%;
    height: 100%;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.4;

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



/* Text */

.umix-hero-feature__text {
    min-width: 0;
}


.umix-hero-feature h2 {
    margin:
        0
        0
        0.32rem;

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

    font-size:
        clamp(
            0.78rem,
            0.75rem + 0.09vw,
            0.88rem
        );

    font-weight: 700;

    line-height: 1.25;

    letter-spacing:
        0.085em;

    text-transform:
        uppercase;

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

    overflow-wrap:
        anywhere;
}


.umix-hero-feature p {
    margin: 0;

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

    font-size:
        clamp(
            0.78rem,
            0.76rem + 0.05vw,
            0.86rem
        );

    line-height: 1.42;

    text-wrap: pretty;
}



/* =========================================================
   09. SIGNATURE
   ========================================================= */

.umix-hero__signature {
    position: absolute;

    left:
        clamp(
            2rem,
            5.2vw,
            6.25rem
        );

    bottom:
        clamp(
            0.65rem,
            1.4vh,
            1.1rem
        );

    display: flex;
    align-items: center;

    gap: 0.75rem;

    pointer-events: none;
}


.umix-hero__signature > span {
    width: 31px;
    height: 1px;

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


.umix-hero__signature p {
    margin: 0;

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

    font-size:
        clamp(
            0.67rem,
            0.64rem + 0.06vw,
            0.74rem
        );

    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.25em;

    text-transform:
        uppercase;
}



/* =========================================================
   10. IMAGE PANEL

   Critical:
   This is a GRID CELL.
   It can never cover the left content column.
   ========================================================= */

.umix-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,
            #292722,
            #1D1C19
        );
}



/* =========================================================
   11. HERO IMAGE
   ========================================================= */

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

    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;

    object-position:
        center center;

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

    transform-origin:
        center center;

    will-change:
        transform;

    opacity: 1;
}



/* =========================================================
   12. IMAGE SHADING
   ========================================================= */

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

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            rgba(17, 17, 15, 0.28) 0%,
            rgba(17, 17, 15, 0.06) 24%,
            transparent 43%
        ),

        linear-gradient(
            180deg,
            rgba(12, 12, 11, 0.08),
            transparent 32%,
            transparent 70%,
            rgba(12, 12, 11, 0.22)
        );
}


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

    z-index: 3;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 47% 26%,
            rgba(204, 157, 107, 0.12),
            transparent 31%
        );

    mix-blend-mode:
        soft-light;
}



/* =========================================================
   13. EDITORIAL LABEL
   ========================================================= */

.umix-hero__editorial {
    position: absolute;

    z-index: 5;

    top:
        clamp(
            3rem,
            7vh,
            6rem
        );

    right:
        clamp(
            1.6rem,
            2.7vw,
            3rem
        );

    display: flex;
    flex-direction: column;

    gap: 1rem;

    width:
        clamp(
            72px,
            6vw,
            94px
        );

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


.umix-hero__editorial p {
    display: flex;
    flex-direction: column;

    gap: 0.28rem;

    margin: 0;

    font-size:
        clamp(
            0.68rem,
            0.65rem + 0.07vw,
            0.77rem
        );

    font-weight: 600;

    line-height: 1.45;

    letter-spacing: 0.2em;

    text-transform:
        uppercase;
}


.umix-hero__editorial p span {
    display: block;
}


.umix-hero__editorial i {
    display: block;

    width: 30px;
    height: 1px;

    margin-top: 0.35rem;

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



/* =========================================================
   14. QUALITY LABEL
   ========================================================= */

.umix-hero__quality {
    position: absolute;

    z-index: 5;

    right:
        clamp(
            1.6rem,
            2.7vw,
            3rem
        );

    bottom:
        clamp(
            0.75rem,
            1.7vh,
            1.25rem
        );

    display: flex;
    align-items: center;

    gap: 0.7rem;

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


.umix-hero__quality > span {
    width: 30px;
    height: 1px;

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


.umix-hero__quality p {
    margin: 0;

    font-size:
        clamp(
            0.64rem,
            0.62rem + 0.05vw,
            0.71rem
        );

    font-weight: 600;

    line-height: 1.2;

    letter-spacing: 0.22em;

    text-transform:
        uppercase;
}



/* =========================================================
   15. LOGO-INSPIRED GEOMETRY
   ========================================================= */

.umix-hero__brand-geometry {
    position: absolute;

    width:
        clamp(
            130px,
            13vw,
            220px
        );

    aspect-ratio: 1;

    pointer-events: none;

    transform:
        rotate(45deg);

    opacity: 0.13;
}


.umix-hero__brand-geometry span {
    position: absolute;

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


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


.umix-hero__brand-geometry span:nth-child(2) {
    inset: 27px;
}


.umix-hero__brand-geometry span:nth-child(3) {
    inset: 54px;
}


.umix-hero__brand-geometry--left {
    left: -115px;
    bottom: -110px;
}


.umix-hero__brand-geometry--right {
    right: -105px;
    bottom: -105px;

    z-index: 4;

    opacity: 0.18;
}



/* =========================================================
   16. INITIAL ANIMATION STATE
   ========================================================= */

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


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

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


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



/* =========================================================
   17. HERO READY — TITLE
   ========================================================= */

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

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


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


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


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



/* =========================================================
   18. HERO READY — IMAGE
   ========================================================= */

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

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

    transition:

        clip-path
        1050ms
        var(--umix-ease)
        50ms,

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



/* =========================================================
   19. HERO READY — ELEMENTS
   ========================================================= */

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

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        opacity
        600ms
        var(--umix-ease),

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


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


.umix-hero.is-ready
[data-hero-element="description"] {
    transition-delay:
        390ms;
}


.umix-hero.is-ready
[data-hero-element="actions"] {
    transition-delay:
        465ms;
}


.umix-hero.is-ready
[data-hero-element="features"] {
    transition-delay:
        540ms;
}


.umix-hero.is-ready
[data-hero-element="signature"] {
    transition-delay:
        630ms;
}


.umix-hero.is-ready
[data-hero-element="editorial"] {
    transition-delay:
        650ms;
}


.umix-hero.is-ready
[data-hero-element="quality"] {
    transition-delay:
        710ms;
}



/* =========================================================
   REDUCED MOTION
   No additional media query.
   ========================================================= */

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

    animation-duration:
        1ms !important;
}


html.umix-reduced-motion
.umix-hero__image {
    transform:
        scale(1.02) !important;
}



/* =========================================================
   RESPONSIVE
   EXACTLY FOUR MEDIA QUERIES
   ========================================================= */


/* =========================================================
   COMPUTER
   1200px+
   ========================================================= */

@media (min-width: 1200px) {

    .umix-hero {
        grid-template-columns:
            minmax(0, 47%)
            minmax(0, 53%);
    }


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

}



/* =========================================================
   TABLET
   768px — 1199px
   ========================================================= */

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

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


    .umix-hero__content-inner {
        padding:

            clamp(
                0.9rem,
                1.8vh,
                1.4rem
            )

            1.5rem

            clamp(
                0.85rem,
                1.7vh,
                1.25rem
            )

            var(--umix-gutter);
    }


    .umix-hero__title {
        max-width: 510px;

        font-size:
            clamp(
                2.55rem,
                min(5vw, 6.9vh),
                3.75rem
            );
    }


    .umix-hero__description {
        max-width: 440px;

        font-size:
            0.98rem;

        line-height:
            1.5;
    }


    .umix-hero__actions {
        gap: 0.65rem;
    }


    .umix-hero__button {
        min-width: 0;

        padding-inline:
            1rem;

        font-size:
            0.81rem;
    }


    .umix-hero__features {
        max-width: 500px;
    }


    .umix-hero-feature {
        grid-template-columns:
            27px
            minmax(0, 1fr);

        gap: 0.5rem;

        padding-inline:
            0.55rem;
    }


    .umix-hero-feature__icon {
        width: 26px;
        height: 26px;
    }


    .umix-hero-feature p {
        display: none;
    }


    .umix-hero-feature h2 {
        font-size:
            0.74rem;
    }


    .umix-hero__signature {
        left:
            var(--umix-gutter);
    }


    .umix-hero__editorial {
        right: 1.2rem;

        width: 65px;
    }


    .umix-hero__quality {
        right: 1.2rem;
    }

}



/* =========================================================
   MOBILE
   480px — 767px
   ========================================================= */

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

    .umix-hero {
        display: block;

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

        min-height: 0;
    }


    /*
        On mobile the visual becomes the background.

        This does NOT create a second vertical block,
        so Header + Hero still remains <= 100svh.
    */

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

        z-index: 1;

        width: 100%;
        height: 100%;
    }


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


    .umix-hero__visual-shade {
        background:

            linear-gradient(
                90deg,
                rgba(14, 14, 12, 0.96) 0%,
                rgba(14, 14, 12, 0.84) 44%,
                rgba(14, 14, 12, 0.42) 74%,
                rgba(14, 14, 12, 0.20) 100%
            ),

            linear-gradient(
                0deg,
                rgba(14, 14, 12, 0.62),
                transparent 58%
            );
    }


    .umix-hero__content {
        position: relative;

        z-index: 6;

        width: 100%;
        height: 100%;

        overflow: hidden;

        background:
            transparent;
    }


    .umix-hero__content::before {
        opacity: 0.22;
    }


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


    .umix-hero__content-inner {
        justify-content: center;

        width: 100%;
        height: 100%;

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


    .umix-hero__title {
        max-width: 500px;

        font-size:
            clamp(
                2.6rem,
                min(8.8vw, 6.4vh),
                3.75rem
            );

        line-height:
            0.91;
    }


    .umix-hero__description {
        max-width: 425px;

        margin-bottom:
            1.1rem;

        font-size:
            0.98rem;

        line-height:
            1.48;
    }


    .umix-hero__actions {
        gap:
            0.65rem;

        margin-bottom:
            1.35rem;
    }


    .umix-hero__button {
        width: auto;

        min-width: 0;
        min-height: 48px;

        padding:
            0.75rem
            1rem;

        font-size:
            0.78rem;
    }


    .umix-hero__features {
        max-width: 455px;
    }


    .umix-hero-feature {
        grid-template-columns:
            1fr;

        gap:
            0.35rem;

        padding-inline:
            0.65rem;
    }


    .umix-hero-feature:first-child {
        padding-left: 0;
    }


    .umix-hero-feature__icon {
        width: 25px;
        height: 25px;
    }


    .umix-hero-feature p {
        display: none;
    }


    .umix-hero-feature h2 {
        margin: 0;

        font-size:
            0.72rem;

        line-height:
            1.25;
    }


    .umix-hero__signature {
        left:
            var(--umix-gutter);

        bottom:
            0.65rem;
    }


    .umix-hero__editorial,
    .umix-hero__quality {
        display: none;
    }


    .umix-hero__brand-geometry--left {
        display: none;
    }


    .umix-hero__brand-geometry--right {
        right: -100px;
        bottom: -110px;

        width: 205px;
    }

}



/* =========================================================
   SMALL MOBILE
   <= 479px
   ========================================================= */

@media (max-width: 479px) {

    .umix-hero {
        display: block;

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

        min-height: 0;
    }


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

        z-index: 1;

        width: 100%;
        height: 100%;
    }


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


    .umix-hero__visual-shade {
        background:

            linear-gradient(
                90deg,
                rgba(13, 13, 12, 0.97) 0%,
                rgba(13, 13, 12, 0.89) 54%,
                rgba(13, 13, 12, 0.48) 100%
            ),

            linear-gradient(
                0deg,
                rgba(13, 13, 12, 0.72),
                transparent 60%
            );
    }


    .umix-hero__content {
        position: relative;

        z-index: 6;

        width: 100%;
        height: 100%;

        overflow: hidden;

        background:
            transparent;
    }


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


    .umix-hero__content-inner {
        justify-content:
            center;

        width: 100%;
        height: 100%;

        padding:
            0.7rem
            var(--umix-gutter)
            0.85rem;
    }


    .umix-hero__eyebrow {
        gap:
            0.6rem;

        margin-bottom:
            0.62rem;

        font-size:
            0.7rem;

        letter-spacing:
            0.16em;
    }


    .umix-hero__eyebrow-line {
        width:
            23px;
    }


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

        margin-bottom:
            0.72rem;

        font-size:
            clamp(
                2.15rem,
                min(10.8vw, 6.2vh),
                3rem
            );

        line-height:
            0.91;
    }


    .umix-hero__description {
        max-width:
            350px;

        margin-bottom:
            0.85rem;

        font-size:
            0.9rem;

        line-height:
            1.43;
    }


    .umix-hero__actions {
        display: grid;

        grid-template-columns:
            1fr
            1fr;

        gap:
            0.5rem;

        margin-bottom:
            0.95rem;
    }


    .umix-hero__button {
        width: 100%;

        min-width: 0;
        min-height: 44px;

        gap:
            0.35rem;

        padding:
            0.65rem
            0.55rem;

        font-size:
            0.68rem;

        letter-spacing:
            0.035em;
    }


    .umix-hero__button svg {
        width:
            14px;

        height:
            14px;
    }


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

        max-width:
            355px;
    }


    .umix-hero-feature {
        display:
            block;

        padding-inline:
            0.42rem;
    }


    .umix-hero-feature:first-child {
        padding-left:
            0;
    }


    .umix-hero-feature__icon {
        width:
            22px;

        height:
            22px;

        margin-bottom:
            0.28rem;
    }


    .umix-hero-feature h2 {
        margin: 0;

        font-size:
            0.63rem;

        line-height:
            1.24;

        letter-spacing:
            0.045em;
    }


    .umix-hero-feature p {
        display:
            none;
    }


    .umix-hero__signature {
        left:
            var(--umix-gutter);

        bottom:
            0.55rem;

        gap:
            0.48rem;
    }


    .umix-hero__signature > span {
        width:
            22px;
    }


    .umix-hero__signature p {
        font-size:
            0.58rem;

        letter-spacing:
            0.17em;
    }


    .umix-hero__editorial,
    .umix-hero__quality {
        display:
            none;
    }


    .umix-hero__brand-geometry--left {
        display:
            none;
    }


    .umix-hero__brand-geometry--right {
        right:
            -85px;

        bottom:
            -90px;

        width:
            170px;

        opacity:
            0.13;
    }

}











































/* =========================================================
   UMIX HERO
   ENHANCED DARK MINERAL TEXTURE
   APPEND AT THE END OF style.css
   ========================================================= */


/* =========================================================
   01. DEEP STONE BASE
   ========================================================= */

.umix-hero__content {
    background:

        /* warm bronze illumination */
        radial-gradient(
            ellipse at 15% 13%,
            rgba(166, 133, 100, 0.115) 0%,
            rgba(166, 133, 100, 0.045) 19%,
            transparent 43%
        ),

        /* soft cool mineral reflection */
        radial-gradient(
            ellipse at 87% 32%,
            rgba(255, 255, 255, 0.036) 0%,
            transparent 34%
        ),

        /* lower stone depth */
        radial-gradient(
            ellipse at 40% 91%,
            rgba(86, 66, 51, 0.11) 0%,
            transparent 42%
        ),

        /* subtle black stone variation */
        radial-gradient(
            ellipse at 67% 61%,
            rgba(0, 0, 0, 0.25) 0%,
            transparent 48%
        ),

        /* base */
        linear-gradient(
            128deg,
            #141412 0%,
            #1B1B19 32%,
            #191917 66%,
            #121210 100%
        );
}



/* =========================================================
   02. MARBLE / STONE VEINS
   ========================================================= */

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

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    opacity: 0.8;

    background-image:

        /* main long diagonal vein */
        linear-gradient(
            118deg,
            transparent 0%,
            transparent 15%,
            rgba(255, 255, 255, 0.026) 15.15%,
            rgba(255, 255, 255, 0.052) 15.35%,
            rgba(166, 133, 100, 0.032) 15.55%,
            transparent 15.85%,
            transparent 100%
        ),

        /* second vein */
        linear-gradient(
            67deg,
            transparent 0%,
            transparent 54%,
            rgba(255, 255, 255, 0.018) 54.15%,
            rgba(255, 255, 255, 0.045) 54.33%,
            transparent 54.62%,
            transparent 100%
        ),

        /* thinner crossing vein */
        linear-gradient(
            142deg,
            transparent 0%,
            transparent 69%,
            rgba(166, 133, 100, 0.025) 69.1%,
            rgba(255, 255, 255, 0.03) 69.28%,
            transparent 69.55%
        ),

        /* irregular mineral cloud */
        radial-gradient(
            ellipse at 24% 36%,
            rgba(255, 255, 255, 0.02) 0%,
            rgba(255, 255, 255, 0.01) 22%,
            transparent 48%
        ),

        radial-gradient(
            ellipse at 73% 74%,
            rgba(166, 133, 100, 0.025) 0%,
            transparent 43%
        ),

        /* large soft geological arc */
        radial-gradient(
            ellipse at -5% 68%,
            transparent 0%,
            transparent 54%,
            rgba(255, 255, 255, 0.018) 54.25%,
            rgba(166, 133, 100, 0.022) 54.5%,
            transparent 54.9%
        );

    background-size:
        145% 145%,
        155% 150%,
        170% 170%,
        100% 100%,
        100% 100%,
        145% 145%;

    background-position:
        0% 0%,
        25% 15%,
        -12% 0%,
        center,
        center,
        left center;
}



/* =========================================================
   03. FINE MINERAL GRAIN

   Very subtle grain made only with CSS.
   No grid pattern.
   ========================================================= */

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

    position: absolute;

    inset:
        -12%
        -8%;

    z-index: -1;

    pointer-events: none;

    opacity: 0.32;

    background:

        radial-gradient(
            circle at 17% 21%,
            rgba(255, 255, 255, 0.05) 0 0.6px,
            transparent 0.8px
        ),

        radial-gradient(
            circle at 72% 38%,
            rgba(166, 133, 100, 0.048) 0 0.7px,
            transparent 0.9px
        ),

        radial-gradient(
            circle at 42% 81%,
            rgba(255, 255, 255, 0.035) 0 0.6px,
            transparent 0.9px
        ),

        radial-gradient(
            circle at 88% 69%,
            rgba(255, 255, 255, 0.025) 0 0.7px,
            transparent 1px
        );

    background-size:
        9px 11px,
        13px 15px,
        17px 14px,
        19px 21px;

    mix-blend-mode:
        soft-light;
}



/* =========================================================
   04. LARGE GEOLOGICAL SHADOW / VEIN

   Creates the larger curved stone movement seen in
   the original visual proposal.
   ========================================================= */

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

    position: absolute;

    z-index: -1;

    left: -30%;
    top: -16%;

    width: 115%;
    height: 135%;

    pointer-events: none;

    opacity: 0.62;

    border-radius:
        50%;

    background:

        radial-gradient(
            ellipse at center,
            transparent 0%,
            transparent 58%,
            rgba(255, 255, 255, 0.013) 58.4%,
            rgba(255, 255, 255, 0.032) 58.8%,
            rgba(166, 133, 100, 0.018) 59.2%,
            transparent 59.7%
        ),

        radial-gradient(
            ellipse at 62% 51%,
            transparent 0%,
            transparent 70%,
            rgba(255, 255, 255, 0.012) 70.25%,
            transparent 70.8%
        );

    transform:
        rotate(-16deg)
        scale(1.12);
}



/* =========================================================
   05. SOFTER EDGE BETWEEN STONE + PHOTO
   ========================================================= */

.umix-hero__content::after {
    width: 110px;

    background:
        linear-gradient(
            90deg,
            rgba(20, 20, 18, 0) 0%,
            rgba(20, 20, 18, 0.08) 28%,
            rgba(20, 20, 18, 0.19) 66%,
            rgba(20, 20, 18, 0.29) 100%
        );
}



/* =========================================================
   06. SUBTLE BRONZE AMBIENT LIGHT
   ========================================================= */

.umix-hero__eyebrow,
.umix-hero__title,
.umix-hero__description,
.umix-hero__actions,
.umix-hero__features {
    position: relative;
    z-index: 2;
}



/* =========================================================
   07. EXTRA DEPTH AROUND TITLE AREA
   ========================================================= */

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

    position: absolute;

    left: -7%;
    top: -35%;

    width: 78%;
    height: 175%;

    z-index: -1;

    pointer-events: none;

    opacity: 0.5;

    background:
        radial-gradient(
            ellipse at center,
            rgba(166, 133, 100, 0.055) 0%,
            rgba(166, 133, 100, 0.02) 35%,
            transparent 72%
        );

    filter:
        blur(18px);
}



/* =========================================================
   08. SLIGHTLY STRONGER LOGO GEOMETRY
   ========================================================= */

.umix-hero__brand-geometry--left {
    opacity: 0.19;
}


.umix-hero__brand-geometry--left span {
    border-color:
        rgba(166, 133, 100, 0.72);
}











































/* =========================================================
   03. SERVICES
   UMIX TILE CONSTRUCTION LLC
   ========================================================= */


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

.umix-services {
    position: relative;

    overflow: hidden;

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

    background:

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

        radial-gradient(
            ellipse at 8% 90%,
            rgba(255, 255, 255, 0.025),
            transparent 32rem
        ),

        linear-gradient(
            135deg,
            #181816 0%,
            #1D1D1A 46%,
            #151513 100%
        );
}


/*
    Mineral atmosphere.
*/

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

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.42;

    background:

        linear-gradient(
            116deg,
            transparent 0%,
            transparent 22%,
            rgba(255, 255, 255, 0.019) 22.15%,
            transparent 22.5%
        ),

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

        radial-gradient(
            ellipse at 72% 35%,
            transparent 0%,
            transparent 48%,
            rgba(255, 255, 255, 0.014) 48.25%,
            transparent 49%
        );
}



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

.umix-services__header {
    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: end;

    gap:
        clamp(
            2rem,
            6vw,
            7rem
        );

    margin-bottom:
        clamp(
            2.5rem,
            5vw,
            4.5rem
        );
}



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

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

    gap: 0.85rem;

    margin-bottom:
        1.25rem;

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


.umix-services__eyebrow > span {
    display: block;

    width: 38px;
    height: 1px;

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


.umix-services__eyebrow p {
    margin: 0;

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

    font-weight: 600;

    line-height: 1;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;
}



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

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

    max-width: 790px;

    margin: 0;

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

    font-size:
        clamp(
            3rem,
            5.2vw,
            5.5rem
        );

    font-weight: 600;

    line-height: 0.92;

    letter-spacing:
        -0.04em;
}


.umix-services__title-mask {
    display: block;

    overflow: hidden;

    padding-bottom:
        0.07em;
}


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


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



/* =========================================================
   INTRO
   ========================================================= */

.umix-services__intro {
    max-width: 490px;

    padding-bottom: 0.45rem;
}


.umix-services__intro p {
    margin:
        0
        0
        1.5rem;

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

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

    line-height:
        1.7;
}


.umix-services__all-link {
    display: inline-flex;
    align-items: center;

    gap: 0.8rem;

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

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

    font-weight: 700;

    letter-spacing:
        0.075em;

    text-transform:
        uppercase;
}


.umix-services__all-link svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.6;

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

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


.umix-services__all-link:hover svg {
    transform:
        translateX(5px);
}



/* =========================================================
   GRID

   Desktop composition:

   ┌───────────────┬──────────┬──────────┐
   │               │ Marble   │Porcelain │
   │   Featured    ├──────────┼──────────┤
   │     Tile      │ Ceramic  │  Grout   │
   │               │          │          │
   └───────────────┴──────────┴──────────┘
   ========================================================= */

.umix-services__grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        repeat(
            2,
            minmax(0, 0.85fr)
        );

    grid-template-rows:
        repeat(
            2,
            minmax(250px, 1fr)
        );

    gap: 1rem;

    min-height: 660px;
}



/* =========================================================
   SERVICE CARD
   ========================================================= */

.umix-service-card {
    position: relative;

    display: block;

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

    overflow: hidden;

    isolation: isolate;

    color:
        var(--umix-white);

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

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

    box-shadow:
        0 20px 45px
        rgba(0, 0, 0, 0.20);

    clip-path:
        inset(
            0
            0
            0
            0
        );

    transition:

        transform
        520ms
        var(--umix-ease),

        border-color
        420ms
        var(--umix-ease),

        box-shadow
        520ms
        var(--umix-ease);
}


.umix-service-card--featured {
    grid-row:
        1 / 3;
}



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

.umix-service-card__media {
    position: absolute;
    inset: 0;

    z-index: 1;

    overflow: hidden;
}


.umix-service-card__image {
    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.045)
        translate3d(
            var(--service-x, 0px),
            var(--service-y, 0px),
            0
        );

    transition:
        transform
        900ms
        var(--umix-ease),

        filter
        700ms
        var(--umix-ease);

    will-change:
        transform;
}



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

.umix-service-card__shade {
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,
            rgba(12, 12, 11, 0.22) 0%,
            rgba(12, 12, 11, 0.04) 34%,
            rgba(12, 12, 11, 0.18) 57%,
            rgba(12, 12, 11, 0.88) 100%
        ),

        linear-gradient(
            110deg,
            rgba(20, 20, 18, 0.38),
            transparent 53%
        );

    transition:
        background
        600ms
        var(--umix-ease);
}



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

.umix-service-card__content {
    position: relative;

    z-index: 4;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    width: 100%;
    height: 100%;

    padding:
        clamp(
            1.25rem,
            2.2vw,
            2rem
        );
}



/* =========================================================
   CARD TOP
   ========================================================= */

.umix-service-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 1rem;
}


.umix-service-card__category {
    color:
        rgba(255, 255, 255, 0.78);

    font-size:
        clamp(
            0.72rem,
            0.69rem + 0.07vw,
            0.8rem
        );

    font-weight: 600;

    line-height: 1.3;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;
}



/* =========================================================
   CARD ARROW
   ========================================================= */

.umix-service-card__arrow {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    flex: 0 0 auto;

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

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

    background:
        rgba(20, 20, 18, 0.28);

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

    backdrop-filter:
        blur(12px);

    transition:

        color
        420ms
        var(--umix-ease),

        background-color
        420ms
        var(--umix-ease),

        border-color
        420ms
        var(--umix-ease),

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


.umix-service-card__arrow svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

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



/* =========================================================
   CARD BOTTOM
   ========================================================= */

.umix-service-card__bottom {
    max-width: 440px;
}


.umix-service-card__bottom h3 {
    margin:
        0
        0
        0.65rem;

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

    font-size:
        clamp(
            2rem,
            2.6vw,
            3rem
        );

    font-weight: 600;

    line-height: 0.98;

    letter-spacing:
        -0.03em;

    color:
        var(--umix-white);
}


.umix-service-card--featured
.umix-service-card__bottom h3 {
    font-size:
        clamp(
            2.8rem,
            4vw,
            4.65rem
        );
}


.umix-service-card__bottom p {
    max-width: 390px;

    margin: 0;

    color:
        rgba(247, 245, 241, 0.75);

    font-size:
        clamp(
            0.9rem,
            0.86rem + 0.08vw,
            0.98rem
        );

    line-height: 1.55;

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



/* =========================================================
   BRONZE EDGE
   ========================================================= */

.umix-service-card::after {
    content: "";

    position: absolute;

    z-index: 5;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    pointer-events: none;

    transform:
        scaleX(0);

    transform-origin:
        right center;

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

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



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

.umix-service-card:hover,
.umix-service-card:focus-visible {
    transform:
        translateY(-6px);

    border-color:
        rgba(193, 154, 115, 0.42);

    box-shadow:
        0 32px 70px
        rgba(0, 0, 0, 0.32);
}


.umix-service-card:hover
.umix-service-card__image,
.umix-service-card:focus-visible
.umix-service-card__image {
    transform:
        scale(1.095)
        translate3d(
            var(--service-x, 0px),
            var(--service-y, 0px),
            0
        );

    filter:
        saturate(1.06)
        contrast(1.025);
}


.umix-service-card:hover
.umix-service-card__shade,
.umix-service-card:focus-visible
.umix-service-card__shade {
    background:

        linear-gradient(
            180deg,
            rgba(12, 12, 11, 0.14),
            rgba(12, 12, 11, 0.02) 34%,
            rgba(12, 12, 11, 0.13) 55%,
            rgba(12, 12, 11, 0.82) 100%
        );
}


.umix-service-card:hover
.umix-service-card__arrow,
.umix-service-card:focus-visible
.umix-service-card__arrow {
    color:
        var(--umix-ink);

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

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

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


.umix-service-card:hover::after,
.umix-service-card:focus-visible::after {
    transform:
        scaleX(1);

    transform-origin:
        left center;
}


.umix-service-card:hover
.umix-service-card__bottom p {
    color:
        rgba(247, 245, 241, 0.92);
}



/* =========================================================
   ANIMATION INITIAL STATE
   MASK-BASED, NOT SIMPLE FADE IN
   ========================================================= */

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


.js
[data-services-reveal="eyebrow"],
.js
[data-services-reveal="intro"] {
    opacity: 0;

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


.js
[data-umix-services]
.umix-service-card {
    clip-path:
        inset(
            100%
            0
            0
            0
        );

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



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

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

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


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


.umix-services.is-visible
[data-services-reveal="eyebrow"],
.umix-services.is-visible
[data-services-reveal="intro"] {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:

        opacity
        650ms
        var(--umix-ease),

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


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


.umix-services.is-visible
.umix-service-card {
    clip-path:
        inset(
            0
            0
            0
            0
        );

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:

        clip-path
        880ms
        var(--umix-ease),

        transform
        760ms
        var(--umix-ease),

        border-color
        420ms
        var(--umix-ease),

        box-shadow
        520ms
        var(--umix-ease);
}


.umix-services.is-visible
.umix-service-card:nth-child(1) {
    transition-delay:
        150ms;
}


.umix-services.is-visible
.umix-service-card:nth-child(2) {
    transition-delay:
        220ms;
}


.umix-services.is-visible
.umix-service-card:nth-child(3) {
    transition-delay:
        290ms;
}


.umix-services.is-visible
.umix-service-card:nth-child(4) {
    transition-delay:
        360ms;
}


.umix-services.is-visible
.umix-service-card:nth-child(5) {
    transition-delay:
        430ms;
}



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

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

    animation-duration:
        1ms !important;
}



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


/* =========================================================
   COMPUTER
   1200px+
   ========================================================= */

@media (min-width: 1200px) {

    .umix-services__grid {
        grid-template-columns:
            minmax(0, 1.22fr)
            repeat(
                2,
                minmax(0, 0.8fr)
            );
    }


    .umix-service-card--featured
    .umix-service-card__content {
        padding:
            clamp(
                1.8rem,
                2.6vw,
                2.8rem
            );
    }

}



/* =========================================================
   TABLET
   768px — 1199px
   ========================================================= */

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

    .umix-services__header {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(260px, 0.7fr);

        gap: 2.5rem;
    }


    .umix-services__title {
        font-size:
            clamp(
                2.7rem,
                6vw,
                4.25rem
            );
    }


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

        grid-template-rows:
            420px
            300px
            300px;

        min-height: 0;
    }


    .umix-service-card--featured {
        grid-column:
            1 / 3;

        grid-row:
            auto;
    }


    .umix-service-card__bottom h3 {
        font-size:
            clamp(
                2rem,
                4vw,
                2.8rem
            );
    }


    .umix-service-card--featured
    .umix-service-card__bottom h3 {
        font-size:
            clamp(
                2.8rem,
                5.5vw,
                4rem
            );
    }

}



/* =========================================================
   MOBILE
   480px — 767px
   ========================================================= */

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

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

        align-items: start;

        gap: 1.5rem;

        margin-bottom:
            2.25rem;
    }


    .umix-services__title {
        max-width: 570px;

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


    .umix-services__intro {
        max-width: 520px;
    }


    .umix-services__intro p {
        font-size:
            1rem;

        line-height:
            1.62;
    }


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

        grid-template-rows:
            420px
            310px
            310px;

        gap: 0.8rem;

        min-height: 0;
    }


    .umix-service-card--featured {
        grid-column:
            1 / 3;

        grid-row:
            auto;
    }


    .umix-service-card__content {
        padding:
            1.25rem;
    }


    .umix-service-card__category {
        font-size:
            0.68rem;

        letter-spacing:
            0.11em;
    }


    .umix-service-card__arrow {
        width: 40px;
        height: 40px;
    }


    .umix-service-card__bottom h3 {
        font-size:
            clamp(
                1.85rem,
                5vw,
                2.35rem
            );
    }


    .umix-service-card--featured
    .umix-service-card__bottom h3 {
        font-size:
            clamp(
                2.7rem,
                8vw,
                3.6rem
            );
    }


    .umix-service-card:not(.umix-service-card--featured)
    .umix-service-card__bottom p {
        display: none;
    }

}



/* =========================================================
   SMALL MOBILE
   <= 479px
   ========================================================= */

@media (max-width: 479px) {

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

        gap:
            1.35rem;

        margin-bottom:
            2rem;
    }


    .umix-services__eyebrow {
        margin-bottom:
            1rem;
    }


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


    .umix-services__eyebrow p {
        font-size:
            0.76rem;

        letter-spacing:
            0.16em;
    }


    .umix-services__title {
        font-size:
            clamp(
                2.45rem,
                12vw,
                3.45rem
            );

        line-height:
            0.93;
    }


    .umix-services__intro p {
        margin-bottom:
            1.15rem;

        font-size:
            0.95rem;

        line-height:
            1.58;
    }


    .umix-services__all-link {
        font-size:
            0.82rem;
    }


    /*
        One card per row.
        Better readability and larger touch targets.
    */

    .umix-services__grid {
        display: grid;

        grid-template-columns:
            1fr;

        grid-template-rows:
            none;

        gap:
            0.8rem;

        min-height: 0;
    }


    .umix-service-card,
    .umix-service-card--featured {
        grid-column:
            auto;

        grid-row:
            auto;

        min-height:
            285px;
    }


    .umix-service-card--featured {
        min-height:
            390px;
    }


    .umix-service-card__content {
        padding:
            1.15rem;
    }


    .umix-service-card__category {
        max-width:
            180px;

        font-size:
            0.68rem;

        letter-spacing:
            0.11em;
    }


    .umix-service-card__arrow {
        width:
            39px;

        height:
            39px;
    }


    .umix-service-card__bottom h3 {
        margin-bottom:
            0.45rem;

        font-size:
            clamp(
                2rem,
                10vw,
                2.65rem
            );
    }


    .umix-service-card--featured
    .umix-service-card__bottom h3 {
        font-size:
            clamp(
                2.65rem,
                12vw,
                3.45rem
            );
    }


    .umix-service-card__bottom p {
        font-size:
            0.9rem;

        line-height:
            1.48;
    }

}







































/* =========================================================
   04. WHY CHOOSE US
   UMIX TILE CONSTRUCTION LLC
   ========================================================= */


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

.umix-why {
    position: relative;

    overflow: hidden;

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

    background:

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

        radial-gradient(
            ellipse at 88% 72%,
            rgba(255, 255, 255, 0.022),
            transparent 34rem
        ),

        linear-gradient(
            128deg,
            #141412 0%,
            #1B1B18 46%,
            #171715 100%
        );
}


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

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.46;

    background:

        linear-gradient(
            118deg,
            transparent 0%,
            transparent 21%,
            rgba(255,255,255,0.018) 21.2%,
            transparent 21.55%
        ),

        linear-gradient(
            73deg,
            transparent 0%,
            transparent 76%,
            rgba(166,133,100,0.018) 76.2%,
            transparent 76.55%
        ),

        radial-gradient(
            ellipse at 51% 33%,
            transparent 0%,
            transparent 49%,
            rgba(255,255,255,0.012) 49.3%,
            transparent 50%
        );
}



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

.umix-why__layout {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap:
        clamp(
            3rem,
            6vw,
            7rem
        );
}



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

.umix-why__visual {
    position: relative;

    min-width: 0;
}


.umix-why__image-shell {
    position: relative;

    width: 100%;

    min-height:
        720px;

    overflow: hidden;

    isolation: isolate;

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

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

    box-shadow:
        0 32px 85px
        rgba(0,0,0,0.30);
}



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

.umix-why__image {
    position: absolute;
    inset: 0;

    z-index: 1;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.055)
        translate3d(
            var(--why-x, 0px),
            var(--why-y, 0px),
            0
        );

    transition:
        transform
        1000ms
        var(--umix-ease);

    will-change:
        transform;
}



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

.umix-why__image-shade {
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,
            rgba(11,11,10,0.12) 0%,
            transparent 38%,
            rgba(11,11,10,0.18) 63%,
            rgba(11,11,10,0.76) 100%
        ),

        linear-gradient(
            90deg,
            rgba(15,15,13,0.28),
            transparent 48%
        );
}


.umix-why__image-light {
    position: absolute;
    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 65% 23%,
            rgba(203,158,111,0.13),
            transparent 34%
        );

    mix-blend-mode:
        soft-light;
}



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

.umix-why__image-label {
    position: absolute;

    z-index: 5;

    top:
        clamp(
            1.5rem,
            3vw,
            2.5rem
        );

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

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

    gap: 0.8rem;

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


.umix-why__image-label > span {
    width: 35px;
    height: 1px;

    margin-top:
        0.55rem;

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


.umix-why__image-label p {
    margin: 0;

    max-width:
        110px;

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

    font-weight: 600;

    line-height: 1.55;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;
}



/* =========================================================
   MATERIAL LABEL
   ========================================================= */

.umix-why__material {
    position: absolute;

    z-index: 5;

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

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

    bottom:
        clamp(
            1.5rem,
            3vw,
            2.5rem
        );

    padding-top:
        1rem;

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


.umix-why__material p {
    margin: 0;

    color:
        rgba(247,245,241,0.72);

    font-size:
        clamp(
            0.76rem,
            0.72rem + 0.06vw,
            0.84rem
        );

    font-weight: 600;

    line-height: 1.5;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}



/* =========================================================
   BRONZE FRAME
   ========================================================= */

.umix-why__frame {
    position: absolute;

    z-index: 6;

    width:
        112px;
    height:
        112px;

    pointer-events: none;
}


.umix-why__frame::before,
.umix-why__frame::after {
    content: "";

    position: absolute;

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


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


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


.umix-why__frame--top {
    top: -12px;
    left: -12px;
}


.umix-why__frame--top::before,
.umix-why__frame--top::after {
    top: 0;
    left: 0;
}


.umix-why__frame--bottom {
    right: -12px;
    bottom: -12px;

    transform:
        rotate(180deg);
}


.umix-why__frame--bottom::before,
.umix-why__frame--bottom::after {
    top: 0;
    left: 0;
}



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

.umix-why__geometry {
    position: absolute;

    left:
        -95px;

    bottom:
        -110px;

    z-index: -1;

    width:
        210px;

    aspect-ratio:
        1;

    transform:
        rotate(45deg);

    opacity:
        0.15;

    pointer-events: none;
}


.umix-why__geometry span {
    position: absolute;

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


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


.umix-why__geometry span:nth-child(2) {
    inset: 33px;
}


.umix-why__geometry span:nth-child(3) {
    inset: 68px;
}



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

.umix-why__content {
    min-width: 0;
}



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

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

    gap:
        0.85rem;

    margin-bottom:
        1.3rem;

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


.umix-why__eyebrow > span {
    width:
        38px;

    height:
        1px;

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


.umix-why__eyebrow p {
    margin: 0;

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

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;
}



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

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

    max-width:
        720px;

    margin:
        0
        0
        1.5rem;

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

    font-size:
        clamp(
            3rem,
            4.8vw,
            5.35rem
        );

    font-weight:
        600;

    line-height:
        0.92;

    letter-spacing:
        -0.04em;
}


.umix-why__title-mask {
    display: block;

    overflow: hidden;

    padding-bottom:
        0.07em;
}


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


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



/* =========================================================
   INTRO
   ========================================================= */

.umix-why__intro {
    max-width:
        650px;

    margin:
        0
        0
        clamp(
            2rem,
            4vw,
            3rem
        );

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

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

    line-height:
        1.68;
}



/* =========================================================
   REASONS
   ========================================================= */

.umix-why__reasons {
    border-top:
        1px solid
        rgba(255,255,255,0.09);
}


.umix-why-reason {
    position: relative;

    display: grid;

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

    gap:
        1.15rem;

    padding:
        1.45rem
        0;

    overflow: hidden;

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

    transition:
        padding-left
        440ms
        var(--umix-ease),
        background-color
        440ms
        var(--umix-ease);
}



/* Hover ambient surface */

.umix-why-reason::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            rgba(166,133,100,0.09),
            rgba(166,133,100,0.015) 52%,
            transparent
        );

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



/* =========================================================
   ICON
   ========================================================= */

.umix-why-reason__icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

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

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

    background:
        rgba(166,133,100,0.025);

    transition:
        color
        400ms
        var(--umix-ease),
        border-color
        400ms
        var(--umix-ease),
        background-color
        400ms
        var(--umix-ease),
        transform
        440ms
        var(--umix-ease);
}


.umix-why-reason__icon svg {
    width:
        22px;

    height:
        22px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}



/* =========================================================
   REASON COPY
   ========================================================= */

.umix-why-reason__content {
    max-width:
        590px;
}


.umix-why-reason h3 {
    margin:
        0
        0
        0.42rem;

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

    font-size:
        clamp(
            1.05rem,
            0.99rem + 0.18vw,
            1.22rem
        );

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        0.02em;

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


.umix-why-reason p {
    margin: 0;

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

    font-size:
        clamp(
            0.94rem,
            0.91rem + 0.07vw,
            1rem
        );

    line-height:
        1.55;
}



/* =========================================================
   ANIMATED LINE
   ========================================================= */

.umix-why-reason__line {
    position: absolute;

    left: 0;
    bottom: -1px;

    width:
        100%;

    height:
        1px;

    transform:
        scaleX(0);

    transform-origin:
        right center;

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

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



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

.umix-why-reason:hover {
    padding-left:
        0.75rem;
}


.umix-why-reason:hover::before {
    opacity: 1;
}


.umix-why-reason:hover
.umix-why-reason__icon {
    color:
        var(--umix-ink);

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

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

    transform:
        translateY(-2px);
}


.umix-why-reason:hover
.umix-why-reason__line {
    transform:
        scaleX(1);

    transform-origin:
        left center;
}



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

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

    gap:
        1.4rem;

    margin-top:
        2.25rem;
}


.umix-why__actions
.umix-btn svg {
    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.umix-why__text-link {
    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
        320ms
        var(--umix-ease);
}


.umix-why__text-link svg {
    width:
        19px;

    height:
        19px;

    fill:
        none;

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

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

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


.umix-why__text-link:hover {
    color:
        var(--umix-bronze-light);
}


.umix-why__text-link:hover svg {
    transform:
        translateX(5px);
}



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

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


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

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


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


.js
.umix-why-reason {
    opacity: 0;

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



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

.umix-why.is-visible
.umix-why__image-shell {
    clip-path:
        inset(
            0
            0
            0
            0
        );

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


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

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


.umix-why.is-visible
.umix-why__title-mask:nth-child(2) > span {
    transition-delay:
        85ms;
}


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

    transform:
        translate3d(
            0,
            0,
            0
        );

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


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


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


.umix-why.is-visible
[data-why-reveal="actions"] {
    transition-delay:
        590ms;
}


.umix-why.is-visible
[data-why-reveal="image-label"] {
    transition-delay:
        470ms;
}


.umix-why.is-visible
[data-why-reveal="material"] {
    transition-delay:
        540ms;
}


.umix-why.is-visible
.umix-why-reason {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

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


.umix-why.is-visible
.umix-why-reason:nth-child(1) {
    transition-delay:
        340ms;
}


.umix-why.is-visible
.umix-why-reason:nth-child(2) {
    transition-delay:
        410ms;
}


.umix-why.is-visible
.umix-why-reason:nth-child(3) {
    transition-delay:
        480ms;
}


.umix-why.is-visible
.umix-why-reason:nth-child(4) {
    transition-delay:
        550ms;
}



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

.umix-why.has-image-error
.umix-why__image {
    display: none;
}


.umix-why.has-image-error
.umix-why__image-shell {
    background:

        radial-gradient(
            ellipse at 22% 18%,
            rgba(166,133,100,0.12),
            transparent 31%
        ),

        radial-gradient(
            ellipse at 78% 75%,
            rgba(255,255,255,0.025),
            transparent 36%
        ),

        linear-gradient(
            135deg,
            #24231F,
            #161614
        );
}



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

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

    animation-duration:
        1ms !important;
}



/* =========================================================
   RESPONSIVE
   EXACTLY FOUR MEDIA QUERIES
   ========================================================= */


/* =========================================================
   COMPUTER
   1200px+
   ========================================================= */

@media (min-width: 1200px) {

    .umix-why__layout {
        grid-template-columns:
            minmax(0, 0.92fr)
            minmax(0, 1.08fr);
    }


    .umix-why__image-shell {
        min-height:
            720px;
    }

}



/* =========================================================
   TABLET
   768px — 1199px
   ========================================================= */

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

    .umix-why__layout {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);

        gap:
            3rem;
    }


    .umix-why__image-shell {
        min-height:
            620px;
    }


    .umix-why__title {
        font-size:
            clamp(
                2.65rem,
                5.5vw,
                4rem
            );
    }


    .umix-why__intro {
        font-size:
            1rem;
    }


    .umix-why-reason {
        grid-template-columns:
            40px
            minmax(0,1fr);

        gap:
            0.9rem;

        padding-block:
            1.2rem;
    }


    .umix-why-reason__icon {
        width:
            38px;

        height:
            38px;
    }


    .umix-why-reason p {
        font-size:
            0.94rem;
    }

}



/* =========================================================
   MOBILE
   480px — 767px
   ========================================================= */

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

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

        gap:
            3rem;
    }


    .umix-why__visual {
        order:
            2;
    }


    .umix-why__content {
        order:
            1;
    }


    .umix-why__image-shell {
        min-height:
            500px;
    }


    .umix-why__title {
        max-width:
            570px;

        font-size:
            clamp(
                2.65rem,
                8.7vw,
                3.9rem
            );
    }


    .umix-why__intro {
        max-width:
            560px;

        margin-bottom:
            2rem;

        font-size:
            1rem;
    }


    .umix-why__reasons {
        max-width:
            620px;
    }


    .umix-why-reason {
        padding:
            1.25rem
            0;
    }


    .umix-why__actions {
        margin-top:
            2rem;
    }


    .umix-why__frame {
        width:
            82px;

        height:
            82px;
    }

}



/* =========================================================
   SMALL MOBILE
   <= 479px
   ========================================================= */

@media (max-width: 479px) {

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

        gap:
            2.5rem;
    }


    .umix-why__visual {
        order:
            2;
    }


    .umix-why__content {
        order:
            1;
    }


    .umix-why__eyebrow {
        gap:
            0.65rem;

        margin-bottom:
            1rem;
    }


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


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

        letter-spacing:
            0.16em;
    }


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

        line-height:
            0.94;
    }


    .umix-why__intro {
        margin-bottom:
            1.75rem;

        font-size:
            0.95rem;

        line-height:
            1.58;
    }


    .umix-why-reason {
        grid-template-columns:
            39px
            minmax(0,1fr);

        gap:
            0.8rem;

        padding:
            1.15rem
            0;
    }


    .umix-why-reason:hover {
        padding-left:
            0;
    }


    .umix-why-reason__icon {
        width:
            37px;

        height:
            37px;
    }


    .umix-why-reason__icon svg {
        width:
            19px;

        height:
            19px;
    }


    .umix-why-reason h3 {
        font-size:
            1rem;
    }


    .umix-why-reason p {
        font-size:
            0.9rem;

        line-height:
            1.5;
    }


    .umix-why__actions {
        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            1rem;

        margin-top:
            1.7rem;
    }


    .umix-why__actions
    .umix-btn {
        width:
            100%;
    }


    .umix-why__text-link {
        justify-content:
            center;
    }


    .umix-why__image-shell {
        min-height:
            410px;
    }


    .umix-why__image-label {
        top:
            1.25rem;

        left:
            1.25rem;
    }


    .umix-why__material {
        left:
            1.25rem;

        right:
            1.25rem;

        bottom:
            1.25rem;
    }


    .umix-why__material p {
        font-size:
            0.7rem;

        letter-spacing:
            0.09em;
    }


    .umix-why__frame {
        width:
            65px;

        height:
            65px;
    }


    .umix-why__geometry {
        width:
            160px;

        left:
            -75px;

        bottom:
            -85px;
    }

}
















































/* =========================================================
   05. REVIEWS
   UMIX TILE CONSTRUCTION LLC
   ========================================================= */


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

.umix-reviews {
    position: relative;

    overflow: hidden;

    isolation: isolate;

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

    background:

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

        radial-gradient(
            ellipse at 85% 77%,
            rgba(166, 133, 100, 0.055),
            transparent 31rem
        ),

        radial-gradient(
            ellipse at 48% 40%,
            rgba(255, 255, 255, 0.018),
            transparent 34rem
        ),

        linear-gradient(
            132deg,
            #121210 0%,
            #191917 45%,
            #151513 100%
        );
}


/* Mineral veins */

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

    position: absolute;
    inset: 0;

    z-index: -2;

    pointer-events: none;

    opacity: 0.54;

    background:

        linear-gradient(
            121deg,
            transparent 0%,
            transparent 19%,
            rgba(255, 255, 255, 0.018) 19.2%,
            rgba(166, 133, 100, 0.018) 19.4%,
            transparent 19.75%
        ),

        linear-gradient(
            63deg,
            transparent 0%,
            transparent 68%,
            rgba(255, 255, 255, 0.014) 68.2%,
            transparent 68.6%
        ),

        radial-gradient(
            ellipse at 85% 34%,
            transparent 0%,
            transparent 52%,
            rgba(255,255,255,0.012) 52.25%,
            transparent 53%
        );
}



/* Soft mineral grain */

.umix-reviews::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    opacity: 0.16;

    background:

        radial-gradient(
            circle at 20% 30%,
            rgba(255,255,255,0.12) 0 0.6px,
            transparent 0.8px
        ),

        radial-gradient(
            circle at 70% 60%,
            rgba(166,133,100,0.10) 0 0.7px,
            transparent 0.9px
        );

    background-size:
        13px 15px,
        19px 17px;
}



/* =========================================================
   GIANT QUOTE
   ========================================================= */

.umix-reviews__quote-mark {
    position: absolute;

    top:
        clamp(
            3rem,
            8vw,
            8rem
        );

    right:
        clamp(
            2rem,
            8vw,
            9rem
        );

    z-index: -1;

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

    font-size:
        clamp(
            13rem,
            23vw,
            29rem
        );

    font-weight:
        600;

    line-height:
        0.65;

    color:
        rgba(166, 133, 100, 0.055);

    pointer-events:
        none;

    user-select:
        none;
}



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

.umix-reviews__header {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(280px, 0.65fr);

    align-items:
        end;

    gap:
        clamp(
            2.5rem,
            7vw,
            8rem
        );

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



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

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

    gap:
        0.85rem;

    margin-bottom:
        1.3rem;

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


.umix-reviews__eyebrow > span {
    width:
        38px;

    height:
        1px;

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


.umix-reviews__eyebrow p {
    margin: 0;

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

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;
}



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

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

    max-width:
        850px;

    margin: 0;

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

    font-size:
        clamp(
            3rem,
            5.2vw,
            5.7rem
        );

    font-weight:
        600;

    line-height:
        0.91;

    letter-spacing:
        -0.042em;
}


.umix-reviews__title-mask {
    display: block;

    overflow: hidden;

    padding-bottom:
        0.08em;
}


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


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



/* =========================================================
   INTRO
   ========================================================= */

.umix-reviews__intro {
    max-width:
        440px;

    padding-bottom:
        0.4rem;
}


.umix-reviews__intro > p {
    margin:
        0
        0
        1.5rem;

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

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

    line-height:
        1.68;
}


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

    gap:
        0.5rem;
}


.umix-reviews__intro-detail span {
    display: block;

    height:
        1px;

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


.umix-reviews__intro-detail span:nth-child(1) {
    width:
        48px;
}


.umix-reviews__intro-detail span:nth-child(2) {
    width:
        8px;

    opacity:
        0.65;
}


.umix-reviews__intro-detail span:nth-child(3) {
    width:
        18px;

    opacity:
        0.38;
}



/* =========================================================
   MAIN COMPOSITION
   ========================================================= */

.umix-reviews__composition {
    position: relative;

    z-index: 3;

    display: grid;

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

    align-items:
        stretch;

    gap:
        clamp(
            1.2rem,
            2.3vw,
            2.5rem
        );
}



/* =========================================================
   LEFT RAIL
   ========================================================= */

.umix-reviews__rail {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-height:
        100%;

    padding-top:
        0.8rem;
}


.umix-reviews__rail-line {
    display: block;

    width:
        1px;

    height:
        88px;

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


.umix-reviews__rail p {
    display: flex;
    align-items: center;

    gap:
        0.8rem;

    margin:
        1.3rem
        0;

    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);

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

    font-size:
        0.72rem;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        0.23em;

    text-transform:
        uppercase;
}


.umix-reviews__rail p span {
    color:
        var(--umix-bronze-soft);
}


.umix-reviews__rail-dot {
    display:
        block;

    width:
        5px;

    height:
        5px;

    margin-top:
        auto;

    border-radius:
        50%;

    background:
        var(--umix-bronze);

    box-shadow:
        0 0 18px
        rgba(166,133,100,0.42);
}



/* =========================================================
   WIDGET SHELL
   ========================================================= */

.umix-reviews__widget-shell {
    position: relative;

    min-width: 0;

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

    background:

        radial-gradient(
            ellipse at 20% 0%,
            rgba(166,133,100,0.08),
            transparent 30rem
        ),

        linear-gradient(
            135deg,
            rgba(35,35,31,0.94),
            rgba(24,24,22,0.96)
        );

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

    box-shadow:
        0 32px 90px
        rgba(0,0,0,0.30);

    isolation:
        isolate;
}


.umix-reviews__widget-shell::before {
    content: "";

    position: absolute;
    inset: 7px;

    z-index: -1;

    pointer-events: none;

    border:
        1px solid
        rgba(255,255,255,0.035);
}



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

.umix-reviews__frame-corner {
    position: absolute;

    z-index: 5;

    width:
        70px;

    height:
        70px;

    pointer-events:
        none;
}


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

    position: absolute;

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


.umix-reviews__frame-corner::before {
    width:
        100%;

    height:
        1px;
}


.umix-reviews__frame-corner::after {
    width:
        1px;

    height:
        100%;
}


.umix-reviews__frame-corner--tl {
    top:
        -10px;

    left:
        -10px;
}


.umix-reviews__frame-corner--br {
    right:
        -10px;

    bottom:
        -10px;

    transform:
        rotate(180deg);
}



/* =========================================================
   WIDGET TOP
   ========================================================= */

.umix-reviews__widget-top {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:
        center;

    gap:
        1rem;

    margin-bottom:
        1.2rem;
}


.umix-reviews__widget-top > span {
    height:
        1px;

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


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


.umix-reviews__widget-top p {
    margin: 0;

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

    font-size:
        0.72rem;

    font-weight:
        600;

    line-height:
        1;

    letter-spacing:
        0.21em;

    text-transform:
        uppercase;
}



/* =========================================================
   ELFSIGHT STAGE
   ========================================================= */

.umix-reviews__widget-stage {
    position: relative;

    min-height:
        470px;

    overflow: hidden;

    background:
        rgba(10,10,9,0.30);

    border:
        1px solid
        rgba(255,255,255,0.055);
}



/* =========================================================
   STATIC PLACEHOLDER
   NO LOADER
   NO SHIMMER
   NO SPINNER
   ========================================================= */

.umix-reviews__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height:
        470px;

    padding:
        3rem
        1.5rem;

    text-align:
        center;

    background:

        radial-gradient(
            ellipse at center,
            rgba(166,133,100,0.06),
            transparent 45%
        ),

        linear-gradient(
            135deg,
            rgba(255,255,255,0.012),
            transparent
        );
}


.umix-reviews__placeholder-mark {
    display: grid;
    place-items: center;

    width:
        74px;

    height:
        74px;

    margin-bottom:
        1.4rem;

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

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

    transform:
        rotate(45deg);
}


.umix-reviews__placeholder-mark svg {
    width:
        34px;

    height:
        34px;

    transform:
        rotate(-45deg);

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.umix-reviews__placeholder-copy {
    max-width:
        430px;
}


.umix-reviews__placeholder-label {
    margin:
        0
        0
        0.7rem;

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

    font-size:
        0.76rem;

    font-weight:
        700;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;
}


.umix-reviews__placeholder-title {
    margin:
        0
        0
        0.7rem;

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

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

    font-weight:
        600;

    line-height:
        1;

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


.umix-reviews__placeholder-text {
    margin: 0;

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

    font-size:
        0.96rem;

    line-height:
        1.6;
}



/* =========================================================
   WIDGET FOOTER
   ========================================================= */

.umix-reviews__widget-footer {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap:
        0.75rem;

    padding-top:
        1.15rem;

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

    font-size:
        0.71rem;

    font-weight:
        600;

    line-height:
        1.4;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


.umix-reviews__widget-footer i {
    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

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



/* =========================================================
   RIGHT DECORATIVE SIDE
   ========================================================= */

.umix-reviews__side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap:
        1.8rem;
}


.umix-reviews__side-symbol {
    position: relative;

    width:
        72px;

    aspect-ratio:
        1;

    transform:
        rotate(45deg);
}


.umix-reviews__side-symbol span {
    position: absolute;

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


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


.umix-reviews__side-symbol span:nth-child(2) {
    inset:
        14px;
}


.umix-reviews__side-symbol span:nth-child(3) {
    inset:
        28px;
}


.umix-reviews__side p {
    display: flex;
    flex-direction: column;

    margin: 0;

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

    font-size:
        0.72rem;

    font-weight:
        600;

    line-height:
        1.65;

    letter-spacing:
        0.21em;

    text-align:
        center;

    text-transform:
        uppercase;
}


.umix-reviews__side p span {
    color:
        var(--umix-bronze-soft);
}


.umix-reviews__side > i {
    width:
        1px;

    height:
        72px;

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



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

.umix-reviews__geometry {
    position: absolute;

    z-index:
        -1;

    width:
        250px;

    aspect-ratio:
        1;

    transform:
        rotate(45deg);

    opacity:
        0.11;

    pointer-events:
        none;
}


.umix-reviews__geometry span {
    position: absolute;

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


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


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


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


.umix-reviews__geometry--left {
    left:
        -145px;

    top:
        30%;
}


.umix-reviews__geometry--right {
    right:
        -155px;

    bottom:
        -90px;
}



/* =========================================================
   BOTTOM HORIZON
   ========================================================= */

.umix-reviews__horizon {
    position: absolute;

    left:
        50%;

    bottom: 0;

    width:
        min(
            calc(100% - 3rem),
            1440px
        );

    height:
        1px;

    transform:
        translateX(-50%);

    overflow: hidden;

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


.umix-reviews__horizon span {
    display:
        block;

    width:
        36%;

    height:
        100%;

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

    transform:
        translateX(-100%);
}



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

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


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

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


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



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

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

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


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


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

    transform:
        translate3d(
            0,
            0,
            0
        );

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


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


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


.umix-reviews.is-visible
[data-reviews-reveal="rail"] {
    transition-delay:
        280ms;
}


.umix-reviews.is-visible
[data-reviews-reveal="side"] {
    transition-delay:
        520ms;
}


.umix-reviews.is-visible
.umix-reviews__widget-shell {
    clip-path:
        inset(
            0
            0
            0
            0
        );

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


.umix-reviews.is-visible
.umix-reviews__horizon span {
    transform:
        translateX(
            190%
        );

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



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

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

    animation-duration:
        1ms !important;
}



/* =========================================================
   RESPONSIVE — EXACTLY FOUR MEDIA QUERIES
   ========================================================= */


/* =========================================================
   COMPUTER
   1200px+
   ========================================================= */

@media (min-width: 1200px) {

    .umix-reviews__composition {
        grid-template-columns:
            78px
            minmax(0, 1fr)
            120px;
    }


    .umix-reviews__widget-stage,
    .umix-reviews__placeholder {
        min-height:
            470px;
    }

}



/* =========================================================
   TABLET
   768px — 1199px
   ========================================================= */

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

    .umix-reviews__header {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(250px, 0.6fr);

        gap:
            3rem;
    }


    .umix-reviews__title {
        font-size:
            clamp(
                2.8rem,
                6vw,
                4.4rem
            );
    }


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

        gap:
            1.4rem;
    }


    .umix-reviews__side {
        display:
            none;
    }


    .umix-reviews__rail p {
        font-size:
            0.67rem;
    }


    .umix-reviews__widget-stage,
    .umix-reviews__placeholder {
        min-height:
            430px;
    }

}



/* =========================================================
   MOBILE
   480px — 767px
   ========================================================= */

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

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

        align-items:
            start;

        gap:
            1.5rem;

        margin-bottom:
            2.5rem;
    }


    .umix-reviews__title {
        max-width:
            600px;

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


    .umix-reviews__intro {
        max-width:
            520px;
    }


    .umix-reviews__composition {
        display:
            block;
    }


    .umix-reviews__rail,
    .umix-reviews__side {
        display:
            none;
    }


    .umix-reviews__widget-shell {
        padding:
            1rem;
    }


    .umix-reviews__widget-stage,
    .umix-reviews__placeholder {
        min-height:
            400px;
    }


    .umix-reviews__placeholder {
        padding:
            2.5rem
            1.25rem;
    }


    .umix-reviews__quote-mark {
        right:
            -1rem;

        font-size:
            15rem;
    }


    .umix-reviews__geometry--left {
        left:
            -170px;
    }

}



/* =========================================================
   SMALL MOBILE
   <=479px
   ========================================================= */

@media (max-width: 479px) {

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

        gap:
            1.3rem;

        margin-bottom:
            2rem;
    }


    .umix-reviews__eyebrow {
        gap:
            0.65rem;

        margin-bottom:
            1rem;
    }


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


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

        letter-spacing:
            0.16em;
    }


    .umix-reviews__title {
        font-size:
            clamp(
                2.45rem,
                11.5vw,
                3.4rem
            );

        line-height:
            0.94;
    }


    .umix-reviews__intro > p {
        margin-bottom:
            1rem;

        font-size:
            0.95rem;

        line-height:
            1.58;
    }


    .umix-reviews__composition {
        display:
            block;
    }


    .umix-reviews__rail,
    .umix-reviews__side {
        display:
            none;
    }


    .umix-reviews__widget-shell {
        padding:
            0.7rem;
    }


    .umix-reviews__widget-shell::before {
        inset:
            4px;
    }


    .umix-reviews__widget-top {
        gap:
            0.55rem;

        margin-bottom:
            0.8rem;
    }


    .umix-reviews__widget-top p {
        font-size:
            0.62rem;

        letter-spacing:
            0.14em;
    }


    .umix-reviews__widget-stage,
    .umix-reviews__placeholder {
        min-height:
            350px;
    }


    .umix-reviews__placeholder {
        padding:
            2rem
            1rem;
    }


    .umix-reviews__placeholder-mark {
        width:
            62px;

        height:
            62px;

        margin-bottom:
            1.2rem;
    }


    .umix-reviews__placeholder-title {
        font-size:
            2rem;
    }


    .umix-reviews__placeholder-text {
        font-size:
            0.9rem;
    }


    .umix-reviews__widget-footer {
        gap:
            0.55rem;

        padding:
            0.9rem
            0.5rem
            0;

        font-size:
            0.62rem;

        letter-spacing:
            0.08em;
    }


    .umix-reviews__frame-corner {
        width:
            48px;

        height:
            48px;
    }


    .umix-reviews__quote-mark {
        top:
            7rem;

        right:
            -2.5rem;

        font-size:
            11rem;
    }


    .umix-reviews__geometry {
        width:
            180px;
    }

}




















































/* =========================================================
   08. SERVICE AREAS
   UMIX TILE CONSTRUCTION LLC
   ========================================================= */


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

.umix-areas {
    position: relative;

    overflow: hidden;

    isolation: isolate;

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

    background:

        radial-gradient(
            ellipse at 88% 11%,
            rgba(166, 133, 100, 0.09),
            transparent 31rem
        ),

        radial-gradient(
            ellipse at 8% 84%,
            rgba(255, 255, 255, 0.024),
            transparent 34rem
        ),

        linear-gradient(
            132deg,
            #161614 0%,
            #1C1C19 48%,
            #131311 100%
        );
}


/* Mineral veins */

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

    position: absolute;
    inset: 0;

    z-index: -2;

    pointer-events: none;

    opacity: 0.48;

    background:

        linear-gradient(
            117deg,
            transparent 0%,
            transparent 25%,
            rgba(255,255,255,0.018) 25.18%,
            transparent 25.55%
        ),

        linear-gradient(
            68deg,
            transparent 0%,
            transparent 72%,
            rgba(166,133,100,0.021) 72.2%,
            transparent 72.65%
        ),

        radial-gradient(
            ellipse at 27% 47%,
            transparent 0%,
            transparent 51%,
            rgba(255,255,255,0.012) 51.3%,
            transparent 52%
        );
}


/* Fine grain */

.umix-areas::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    opacity: 0.13;

    background:

        radial-gradient(
            circle at 20% 30%,
            rgba(255,255,255,0.12) 0 0.6px,
            transparent 0.8px
        ),

        radial-gradient(
            circle at 65% 72%,
            rgba(166,133,100,0.10) 0 0.7px,
            transparent 1px
        );

    background-size:
        13px 17px,
        19px 21px;
}



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

.umix-areas__header {
    position: relative;

    z-index: 3;

    display: grid;

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

    align-items: end;

    gap:
        clamp(
            2.5rem,
            7vw,
            8rem
        );

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



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

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

    gap: 0.85rem;

    margin-bottom:
        1.3rem;

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


.umix-areas__eyebrow > span {
    display: block;

    width: 38px;
    height: 1px;

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


.umix-areas__eyebrow p {
    margin: 0;

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

    font-weight: 600;

    line-height: 1;

    letter-spacing:
        0.2em;

    text-transform:
        uppercase;
}



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

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

    max-width:
        860px;

    margin: 0;

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

    font-size:
        clamp(
            3rem,
            5.2vw,
            5.65rem
        );

    font-weight: 600;

    line-height: 0.91;

    letter-spacing:
        -0.042em;
}


.umix-areas__title-mask {
    display: block;

    overflow: hidden;

    padding-bottom:
        0.08em;
}


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


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



/* =========================================================
   INTRO
   ========================================================= */

.umix-areas__intro {
    max-width:
        470px;

    padding-bottom:
        0.35rem;
}


.umix-areas__intro > p {
    margin:
        0
        0
        1.45rem;

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

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

    line-height:
        1.7;
}


.umix-areas__intro-line {
    display: flex;
    align-items: center;

    gap: 0.55rem;
}


.umix-areas__intro-line span {
    width:
        52px;

    height:
        1px;

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


.umix-areas__intro-line i {
    display: block;

    width:
        6px;

    height:
        6px;

    transform:
        rotate(45deg);

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



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

.umix-areas__layout {
    position: relative;

    z-index: 4;

    display: grid;

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

    min-height:
        670px;

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

    background:
        #171715;

    box-shadow:
        0 36px 100px
        rgba(0,0,0,0.30);
}



/* =========================================================
   LOCATION PANEL
   ========================================================= */

.umix-areas__panel {
    position: relative;

    z-index: 3;

    display: flex;
    flex-direction: column;

    min-width: 0;

    padding:
        clamp(
            1.5rem,
            2.6vw,
            2.4rem
        );

    border-right:
        1px solid
        rgba(166,133,100,0.20);

    background:

        radial-gradient(
            ellipse at 0% 0%,
            rgba(166,133,100,0.09),
            transparent 25rem
        ),

        linear-gradient(
            145deg,
            #20201D,
            #171715
        );
}



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

.umix-areas__panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom:
        2rem;

    padding-bottom:
        1.4rem;

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


.umix-areas__panel-head > div > span {
    display: block;

    margin-bottom:
        0.5rem;

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

    font-size:
        0.72rem;

    font-weight: 700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


.umix-areas__panel-head h3 {
    margin: 0;

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

    font-size:
        clamp(
            1.8rem,
            2vw,
            2.4rem
        );

    font-weight: 600;

    line-height: 1;

    letter-spacing:
        -0.025em;
}


.umix-areas__panel-mark {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    flex: 0 0 auto;

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

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

    transform:
        rotate(45deg);
}


.umix-areas__panel-mark svg {
    width: 21px;
    height: 21px;

    transform:
        rotate(-45deg);

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}



/* =========================================================
   GROUPS
   ========================================================= */

.umix-areas__group {
    margin-bottom:
        1.8rem;
}


.umix-areas__group-title {
    display: flex;
    align-items: center;

    gap: 0.8rem;

    margin-bottom:
        0.55rem;
}


.umix-areas__group-title span {
    color:
        var(--umix-text-muted);

    font-size:
        0.72rem;

    font-weight: 700;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}


.umix-areas__group-title i {
    display: block;

    flex: 1;

    height: 1px;

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



/* =========================================================
   LOCATION BUTTONS
   ========================================================= */

.umix-areas__list {
    display: flex;
    flex-direction: column;
}


.umix-area-location {
    position: relative;

    display: grid;

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

    align-items: center;

    gap:
        0.8rem;

    width: 100%;
    min-height:
        50px;

    padding:
        0.65rem
        0.4rem;

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

    text-align:
        left;

    background:
        transparent;

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

    transition:
        color
        330ms
        var(--umix-ease),
        padding-left
        420ms
        var(--umix-ease),
        background-color
        420ms
        var(--umix-ease);
}


.umix-area-location::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 100%;
    height: 1px;

    transform:
        scaleX(0);

    transform-origin:
        right center;

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

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


.umix-area-location__dot {
    display: block;

    width: 6px;
    height: 6px;

    border-radius: 50%;

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

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


.umix-area-location__name {
    min-width: 0;

    font-size:
        clamp(
            0.94rem,
            0.91rem + 0.06vw,
            1rem
        );

    font-weight: 600;

    line-height: 1.3;
}


.umix-area-location__arrow {
    display: grid;
    place-items: center;

    justify-self: end;

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

    opacity:
        0.48;

    transform:
        translateX(-4px);

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


.umix-area-location__arrow svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}



/* Hover + Active */

.umix-area-location:hover,
.umix-area-location.is-active {
    color:
        var(--umix-white);

    padding-left:
        0.75rem;

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


.umix-area-location:hover::before,
.umix-area-location.is-active::before {
    transform:
        scaleX(1);

    transform-origin:
        left center;
}


.umix-area-location:hover
.umix-area-location__dot,
.umix-area-location.is-active
.umix-area-location__dot {
    background:
        var(--umix-bronze-light);

    box-shadow:
        0 0 14px
        rgba(166,133,100,0.55);
}


.umix-area-location:hover
.umix-area-location__arrow,
.umix-area-location.is-active
.umix-area-location__arrow {
    opacity: 1;

    transform:
        translateX(0);
}



/* =========================================================
   RESET BUTTON
   ========================================================= */

.umix-areas__reset {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    width: 100%;
    min-height:
        50px;

    margin-top: auto;

    padding:
        0.8rem
        1rem;

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

    background:
        rgba(166,133,100,0.045);

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

    font-size:
        0.8rem;

    font-weight: 700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

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


.umix-areas__reset svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.55;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

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


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

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

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


.umix-areas__reset:hover svg {
    transform:
        rotate(-180deg);
}



/* =========================================================
   MAP SHELL
   ========================================================= */

.umix-areas__map-shell {
    position: relative;

    min-width: 0;
    min-height:
        670px;

    overflow: hidden;

    isolation: isolate;

    background:
        #1C1C19;
}



/* =========================================================
   LEAFLET MAP
   ========================================================= */

.umix-areas__map {
    position: absolute;
    inset: 0;

    z-index: 1;

    width: 100%;
    height: 100%;

    min-height:
        670px;

    background:
        #24231F;
}



/* =========================================================
   DARKEN / BRAND OSM MAP
   ========================================================= */

.umix-areas__map
.leaflet-tile-pane {
    filter:
        grayscale(0.72)
        sepia(0.20)
        saturate(0.62)
        brightness(0.63)
        contrast(1.10);
}


.umix-areas__map
.leaflet-container {
    font-family:
        var(--umix-font-body);
}



/* =========================================================
   LEAFLET CONTROLS
   ========================================================= */

.umix-areas__map
.leaflet-control-zoom {
    margin:
        22px
        0
        0
        22px;

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

    border-radius:
        0;

    overflow:
        hidden;

    box-shadow:
        0 15px 35px
        rgba(0,0,0,0.22);
}


.umix-areas__map
.leaflet-control-zoom a {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

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

    background:
        rgba(22,22,20,0.94);

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

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

    font-size: 20px;

    line-height: 1;

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


.umix-areas__map
.leaflet-control-zoom a:hover {
    color:
        var(--umix-ink);

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


.umix-areas__map
.leaflet-control-attribution {
    padding:
        4px
        7px;

    color:
        rgba(247,245,241,0.62);

    background:
        rgba(18,18,16,0.82);

    font-size:
        10px;
}


.umix-areas__map
.leaflet-control-attribution a {
    color:
        var(--umix-bronze-light);
}



/* =========================================================
   CUSTOM MARKER
   ========================================================= */

.umix-map-marker {
    position: relative;

    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    background:
        transparent;
}


.umix-map-marker__ring {
    position: absolute;

    inset: 2px;

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

    transform:
        rotate(45deg);

    background:
        rgba(20,20,18,0.72);

    box-shadow:
        0 8px 25px
        rgba(0,0,0,0.32);

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


.umix-map-marker__core {
    position: relative;

    z-index: 2;

    display: block;

    width: 9px;
    height: 9px;

    border-radius: 50%;

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

    box-shadow:
        0 0 0 4px
        rgba(166,133,100,0.15),
        0 0 18px
        rgba(166,133,100,0.55);
}


.umix-map-marker.is-active
.umix-map-marker__ring {
    transform:
        rotate(135deg)
        scale(1.12);

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



/* =========================================================
   POPUPS
   ========================================================= */

.umix-areas__map
.leaflet-popup-content-wrapper {
    padding: 0;

    overflow: hidden;

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

    background:
        rgba(25,25,22,0.98);

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

    border-radius: 0;

    box-shadow:
        0 22px 60px
        rgba(0,0,0,0.34);
}


.umix-areas__map
.leaflet-popup-content {
    width:
        220px !important;

    margin: 0;
}


.umix-map-popup {
    padding:
        1.05rem
        1.1rem;
}


.umix-map-popup__region {
    display: block;

    margin-bottom:
        0.35rem;

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

    font-size:
        0.66rem;

    font-weight: 700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.umix-map-popup h4 {
    margin:
        0
        0
        0.42rem;

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

    font-size:
        1.6rem;

    font-weight: 600;

    line-height: 1;

    color:
        var(--umix-white);
}


.umix-map-popup p {
    margin: 0;

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

    font-size:
        0.82rem;

    line-height:
        1.5;
}


.umix-areas__map
.leaflet-popup-tip {
    background:
        #191916;

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


.umix-areas__map
.leaflet-popup-close-button {
    top: 4px;
    right: 5px;

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

    font-size:
        20px;
}



/* =========================================================
   MAP META
   ========================================================= */

.umix-areas__map-meta {
    position: absolute;

    z-index: 500;

    top:
        1.45rem;

    right:
        1.5rem;

    display: flex;
    align-items: center;

    gap:
        0.7rem;

    pointer-events: none;

    padding:
        0.65rem
        0.8rem;

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

    background:
        rgba(18,18,16,0.70);

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

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

    backdrop-filter:
        blur(10px);
}


.umix-areas__map-meta > span {
    width:
        24px;

    height:
        1px;

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


.umix-areas__map-meta p {
    margin: 0;

    font-size:
        0.67rem;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;
}



/* =========================================================
   MAP CAPTION
   ========================================================= */

.umix-areas__map-caption {
    position: absolute;

    z-index: 500;

    right:
        1.5rem;

    bottom:
        2rem;

    display: flex;
    align-items: center;

    gap:
        0.7rem;

    pointer-events: none;

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


.umix-areas__map-caption > span {
    width:
        32px;

    height:
        1px;

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


.umix-areas__map-caption p {
    margin: 0;

    font-size:
        0.67rem;

    font-weight:
        600;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}



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

.umix-areas__map-corner {
    position: absolute;

    z-index: 510;

    width:
        72px;

    height:
        72px;

    pointer-events:
        none;
}


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

    position: absolute;

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


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


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


.umix-areas__map-corner--tl {
    top: 12px;
    left: 12px;
}


.umix-areas__map-corner--br {
    right: 12px;
    bottom: 12px;

    transform:
        rotate(180deg);
}



/* =========================================================
   BOTTOM ROW
   ========================================================= */

.umix-areas__bottom {
    position: relative;

    z-index: 3;

    display: grid;

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

    align-items: center;

    gap:
        1.5rem;

    margin-top:
        2.5rem;
}


.umix-areas__bottom-line {
    overflow: hidden;
}


.umix-areas__bottom-line span {
    display: block;

    width: 100%;
    height: 1px;

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


.umix-areas__bottom > p {
    max-width:
        720px;

    margin: 0;

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

    font-size:
        0.95rem;

    line-height:
        1.6;
}


.umix-areas__contact-link {
    display: inline-flex;
    align-items: center;

    gap:
        0.75rem;

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

    font-size:
        0.82rem;

    font-weight:
        700;

    letter-spacing:
        0.075em;

    text-transform:
        uppercase;
}


.umix-areas__contact-link 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-areas__contact-link:hover svg {
    transform:
        translateX(5px);
}



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

.umix-areas__geometry {
    position: absolute;

    z-index: -1;

    width:
        260px;

    aspect-ratio:
        1;

    opacity:
        0.11;

    transform:
        rotate(45deg);

    pointer-events:
        none;
}


.umix-areas__geometry span {
    position: absolute;

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


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


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


.umix-areas__geometry span:nth-child(3) {
    inset: 85px;
}


.umix-areas__geometry--left {
    left:
        -165px;

    top:
        20%;
}


.umix-areas__geometry--right {
    right:
        -145px;

    bottom:
        -80px;
}



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

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


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

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


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



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

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

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


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


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

    transform:
        translate3d(
            0,
            0,
            0
        );

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


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


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


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


.umix-areas.is-visible
.umix-areas__map-shell {
    clip-path:
        inset(
            0
            0
            0
            0
        );

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


.umix-areas.is-visible
[data-areas-reveal="bottom"] {
    transition-delay:
        480ms;
}



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

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

    animation-duration:
        1ms !important;
}



/* =========================================================
   RESPONSIVE
   EXACTLY FOUR MEDIA QUERIES
   ========================================================= */


/* =========================================================
   COMPUTER
   1200px+
   ========================================================= */

@media (min-width: 1200px) {

    .umix-areas__layout {
        grid-template-columns:
            minmax(300px, 0.32fr)
            minmax(0, 1fr);
    }


    .umix-areas__map-shell,
    .umix-areas__map {
        min-height:
            670px;
    }

}



/* =========================================================
   TABLET
   768px — 1199px
   ========================================================= */

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

    .umix-areas__header {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(250px, 0.6fr);

        gap:
            3rem;
    }


    .umix-areas__title {
        font-size:
            clamp(
                2.75rem,
                6vw,
                4.4rem
            );
    }


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

        min-height:
            620px;
    }


    .umix-areas__panel {
        padding:
            1.5rem;
    }


    .umix-areas__map-shell,
    .umix-areas__map {
        min-height:
            620px;
    }


    .umix-area-location {
        min-height:
            47px;
    }


    .umix-areas__map-meta {
        right:
            1rem;
    }

}



/* =========================================================
   MOBILE
   480px — 767px
   ========================================================= */

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

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

        align-items:
            start;

        gap:
            1.5rem;

        margin-bottom:
            2.5rem;
    }


    .umix-areas__title {
        font-size:
            clamp(
                2.65rem,
                8.8vw,
                3.9rem
            );
    }


    .umix-areas__intro {
        max-width:
            550px;
    }


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

        min-height: 0;
    }


    .umix-areas__panel {
        order: 2;

        border-right: 0;

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


    .umix-areas__map-shell {
        order: 1;

        min-height:
            500px;
    }


    .umix-areas__map {
        min-height:
            500px;
    }


    .umix-areas__list {
        display: grid;

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

        column-gap:
            1rem;
    }


    .umix-areas__reset {
        margin-top:
            0.5rem;
    }


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

        gap:
            1rem;

        margin-top:
            2rem;
    }


    .umix-areas__bottom-line {
        width:
            100px;
    }

}



/* =========================================================
   SMALL MOBILE
   <= 479px
   ========================================================= */

@media (max-width: 479px) {

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

        gap:
            1.3rem;

        margin-bottom:
            2rem;
    }


    .umix-areas__eyebrow {
        gap:
            0.65rem;

        margin-bottom:
            1rem;
    }


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


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

        letter-spacing:
            0.16em;
    }


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

        line-height:
            0.94;
    }


    .umix-areas__intro > p {
        font-size:
            0.95rem;

        line-height:
            1.58;
    }


    .umix-areas__layout {
        display:
            flex;

        flex-direction:
            column;

        min-height:
            0;
    }


    .umix-areas__map-shell {
        order:
            1;

        min-height:
            420px;
    }


    .umix-areas__map {
        min-height:
            420px;
    }


    .umix-areas__panel {
        order:
            2;

        padding:
            1.2rem;

        border-right:
            0;

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


    .umix-areas__panel-head {
        margin-bottom:
            1.5rem;
    }


    .umix-areas__panel-head h3 {
        font-size:
            1.8rem;
    }


    .umix-areas__list {
        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            0;
    }


    .umix-area-location {
        min-height:
            48px;
    }


    .umix-areas__map-meta {
        top:
            0.85rem;

        right:
            0.85rem;

        padding:
            0.55rem
            0.65rem;
    }


    .umix-areas__map-meta > span {
        width:
            16px;
    }


    .umix-areas__map-caption {
        right:
            0.9rem;

        bottom:
            1.4rem;
    }


    .umix-areas__map-caption p {
        display:
            none;
    }


    .umix-areas__map-corner {
        width:
            48px;

        height:
            48px;
    }


    .umix-areas__map
    .leaflet-control-zoom {
        margin:
            14px
            0
            0
            14px;
    }


    .umix-areas__map
    .leaflet-control-zoom a {
        width:
            38px;

        height:
            38px;
    }


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

        gap:
            1rem;

        margin-top:
            1.7rem;
    }


    .umix-areas__bottom-line {
        width:
            80px;
    }


    .umix-areas__bottom > p {
        font-size:
            0.9rem;
    }


    .umix-areas__contact-link {
        font-size:
            0.78rem;
    }

}















































/* =========================================================
   09. FOOTER
   UMIX TILE CONSTRUCTION LLC
   ========================================================= */


/* =========================================================
   FOOTER SHELL
   ========================================================= */

.umix-footer {
    position: relative;

    overflow: hidden;

    isolation: isolate;

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

    background:

        radial-gradient(
            ellipse at 7% 10%,
            rgba(166, 133, 100, 0.11),
            transparent 28rem
        ),

        radial-gradient(
            ellipse at 91% 76%,
            rgba(255, 255, 255, 0.022),
            transparent 30rem
        ),

        linear-gradient(
            135deg,
            #11110F 0%,
            #181816 48%,
            #10100F 100%
        );

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



/* Mineral surface */

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

    position: absolute;
    inset: 0;

    z-index: -2;

    pointer-events: none;

    opacity: 0.46;

    background:

        linear-gradient(
            117deg,
            transparent 0%,
            transparent 22%,
            rgba(255,255,255,0.017) 22.2%,
            transparent 22.6%
        ),

        linear-gradient(
            68deg,
            transparent 0%,
            transparent 74%,
            rgba(166,133,100,0.019) 74.2%,
            transparent 74.65%
        ),

        radial-gradient(
            ellipse at 38% 74%,
            transparent 0%,
            transparent 54%,
            rgba(255,255,255,0.012) 54.3%,
            transparent 55%
        );
}


/* Fine grain */

.umix-footer::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    opacity: 0.12;

    background:

        radial-gradient(
            circle at 20% 30%,
            rgba(255,255,255,0.12) 0 0.6px,
            transparent 0.8px
        ),

        radial-gradient(
            circle at 72% 60%,
            rgba(166,133,100,0.11) 0 0.7px,
            transparent 0.9px
        );

    background-size:
        13px 17px,
        19px 21px;
}



/* =========================================================
   SIGNATURE
   ========================================================= */

.umix-footer__signature {
    display: grid;

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

    align-items: center;

    gap:
        1.2rem;

    padding:
        2.15rem
        0;

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


.umix-footer__signature > span {
    height:
        1px;

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


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


.umix-footer__signature p {
    margin: 0;

    font-size:
        clamp(
            0.7rem,
            0.67rem + 0.05vw,
            0.76rem
        );

    font-weight:
        600;

    line-height:
        1.3;

    letter-spacing:
        0.19em;

    text-align:
        center;

    text-transform:
        uppercase;
}



/* =========================================================
   GRID
   ========================================================= */

.umix-footer__grid {
    display: grid;

    grid-template-columns:
        minmax(270px, 1.3fr)
        minmax(170px, 0.72fr)
        minmax(250px, 1fr)
        minmax(220px, 0.9fr);

    gap:
        clamp(
            2rem,
            4.5vw,
            5.5rem
        );

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



/* =========================================================
   BRAND
   ========================================================= */

.umix-footer__brand {
    min-width: 0;
}


.umix-footer__logo-link {
    display: inline-flex;

    max-width:
        250px;

    margin-bottom:
        1.5rem;
}


.umix-footer__logo {
    display: block;

    width:
        auto;

    max-width:
        100%;

    max-height:
        78px;

    object-fit:
        contain;
}


.umix-footer__description {
    max-width:
        410px;

    margin:
        0
        0
        1.75rem;

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

    font-size:
        clamp(
            0.95rem,
            0.92rem + 0.06vw,
            1rem
        );

    line-height:
        1.65;
}



/* =========================================================
   CONTACT
   ========================================================= */

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

    align-items:
        flex-start;

    gap:
        0.75rem;
}


.umix-footer__contact-link {
    display: inline-flex;
    align-items: center;

    gap:
        0.7rem;

    max-width:
        100%;

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

    font-size:
        0.92rem;

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


.umix-footer__contact-link:hover {
    color:
        var(--umix-bronze-light);
}


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

    width:
        32px;

    height:
        32px;

    flex:
        0 0 auto;

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

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


.umix-footer__contact-icon svg {
    width:
        16px;

    height:
        16px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.45;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}



/* =========================================================
   COLUMN HEADINGS
   ========================================================= */

.umix-footer__heading {
    position: relative;

    margin:
        0
        0
        1.65rem;

    padding-bottom:
        0.85rem;

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

    font-size:
        0.82rem;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

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


.umix-footer__heading::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width:
        38px;

    height:
        1px;

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



/* =========================================================
   QUICK LINKS
   ========================================================= */

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

    gap:
        0.15rem;

    margin: 0;
    padding: 0;

    list-style:
        none;
}


.umix-footer__links a {
    position: relative;

    display: flex;
    align-items: center;

    gap:
        0.65rem;

    min-height:
        39px;

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

    font-size:
        0.94rem;

    transition:
        color
        300ms
        var(--umix-ease),
        padding-left
        350ms
        var(--umix-ease);
}


.umix-footer__links a i {
    display: block;

    width:
        0;

    height:
        1px;

    opacity:
        0;

    background:
        var(--umix-bronze);

    transition:
        width
        350ms
        var(--umix-ease),
        opacity
        350ms
        var(--umix-ease);
}


.umix-footer__links a:hover,
.umix-footer__links a:focus-visible {
    color:
        var(--umix-white);

    padding-left:
        0.35rem;
}


.umix-footer__links a:hover i,
.umix-footer__links a:focus-visible i {
    width:
        22px;

    opacity:
        1;
}



/* =========================================================
   HOURS
   ========================================================= */

.umix-footer__hours-list {
    border-top:
        1px solid
        rgba(255,255,255,0.075);
}


.umix-footer__hours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        1rem;

    padding:
        0.9rem
        0;

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


.umix-footer__hours-row span {
    color:
        var(--umix-text-muted);

    font-size:
        0.9rem;
}


.umix-footer__hours-row strong {
    color:
        var(--umix-text-main);

    font-size:
        0.88rem;

    font-weight:
        600;

    white-space:
        nowrap;
}



/* =========================================================
   ESTIMATE LINK
   ========================================================= */

.umix-footer__estimate-link {
    display: inline-flex;
    align-items: center;

    gap:
        0.75rem;

    margin-top:
        1.5rem;

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

    font-size:
        0.78rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.umix-footer__estimate-link 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-footer__estimate-link:hover svg {
    transform:
        translateX(5px);
}



/* =========================================================
   SOCIAL
   ========================================================= */

.umix-footer__social-copy {
    margin:
        0
        0
        1.35rem;

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

    font-size:
        0.92rem;

    line-height:
        1.6;
}


.umix-footer__social-links {
    display: flex;
    flex-direction: column;

    gap:
        0.7rem;
}


.umix-footer-social {
    display: grid;

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

    align-items:
        center;

    gap:
        0.75rem;

    min-height:
        52px;

    padding:
        0.55rem
        0.7rem;

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

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

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

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


.umix-footer-social:hover,
.umix-footer-social:focus-visible {
    color:
        var(--umix-white);

    background:
        rgba(166,133,100,0.075);

    border-color:
        rgba(193,154,115,0.48);

    transform:
        translateX(4px);
}


.umix-footer-social__icon {
    display: grid;
    place-items: center;

    width:
        36px;

    height:
        36px;

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

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


.umix-footer-social__icon svg {
    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.umix-footer-social__name {
    font-size:
        0.91rem;

    font-weight:
        600;
}


.umix-footer-social__arrow {
    display: grid;
    place-items: center;

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


.umix-footer-social__arrow svg {
    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

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


.umix-footer-social:hover
.umix-footer-social__arrow svg {
    transform:
        translateX(4px);
}



/* =========================================================
   FOOTER BOTTOM
   ========================================================= */

.umix-footer__bottom {
    position: relative;

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

    background:
        rgba(7,7,6,0.28);
}


.umix-footer__bottom-inner {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap:
        1.5rem;

    min-height:
        78px;

    padding-top:
        1rem;

    padding-bottom:
        1rem;
}


.umix-footer__copyright {
    margin: 0;

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

    font-size:
        0.82rem;

    line-height:
        1.5;
}



/* Powered by */

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

    gap:
        0.4rem;

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

    font-size:
        0.8rem;

    line-height:
        1.3;

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


.umix-footer__powered strong {
    color:
        var(--umix-bronze-soft);

    font-weight:
        700;
}


.umix-footer__powered svg {
    width:
        16px;

    height:
        16px;

    margin-left:
        0.2rem;

    fill:
        none;

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

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

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


.umix-footer__powered:hover {
    color:
        var(--umix-white);
}


.umix-footer__powered:hover svg {
    transform:
        translate(
            2px,
            -2px
        );
}



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

.umix-footer__geometry {
    position: absolute;

    z-index: -1;

    width:
        230px;

    aspect-ratio:
        1;

    pointer-events:
        none;

    opacity:
        0.105;

    transform:
        rotate(45deg);
}


.umix-footer__geometry span {
    position:
        absolute;

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


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


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


.umix-footer__geometry span:nth-child(3) {
    inset:
        77px;
}


.umix-footer__geometry--left {
    left:
        -150px;

    top:
        18%;
}


.umix-footer__geometry--right {
    right:
        -130px;

    bottom:
        4%;
}



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

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

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


.js
.umix-footer__signature > span {
    transform:
        scaleX(0);
}


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

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

    transform:
        translate3d(
            0,
            0,
            0
        );

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


.umix-footer.is-visible
.umix-footer__signature > span {
    transform:
        scaleX(1);

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


.umix-footer.is-visible
[data-footer-reveal="brand"] {
    transition-delay:
        100ms;
}


.umix-footer.is-visible
[data-footer-reveal="links"] {
    transition-delay:
        170ms;
}


.umix-footer.is-visible
[data-footer-reveal="hours"] {
    transition-delay:
        240ms;
}


.umix-footer.is-visible
[data-footer-reveal="social"] {
    transition-delay:
        310ms;
}



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

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

    animation-duration:
        1ms !important;
}



/* =========================================================
   RESPONSIVE
   EXACTLY FOUR MEDIA QUERIES
   ========================================================= */


/* =========================================================
   COMPUTER
   1200px+
   ========================================================= */

@media (min-width: 1200px) {

    .umix-footer__grid {
        grid-template-columns:
            minmax(270px, 1.3fr)
            minmax(170px, 0.72fr)
            minmax(250px, 1fr)
            minmax(220px, 0.9fr);
    }

}


/* =========================================================
   TABLET
   768px — 1199px
   ========================================================= */

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

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

        gap:
            3rem
            4rem;
    }


    .umix-footer__brand {
        max-width:
            480px;
    }


    .umix-footer__bottom-inner {
        min-height:
            74px;
    }

}


/* =========================================================
   MOBILE
   480px — 767px
   ========================================================= */

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

    .umix-footer__signature {
        padding:
            1.8rem
            0;
    }


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

        gap:
            2.75rem
            2rem;

        padding:
            3.5rem
            0;
    }


    .umix-footer__brand {
        grid-column:
            1 / 3;
    }


    .umix-footer__social {
        grid-column:
            1 / 3;
    }


    .umix-footer__social-links {
        display:
            grid;

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


    .umix-footer__bottom-inner {
        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            center;

        gap:
            0.75rem;

        min-height:
            94px;
    }

}


/* =========================================================
   SMALL MOBILE
   <= 479px
   ========================================================= */

@media (max-width: 479px) {

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

        gap:
            0.7rem;

        padding:
            1.5rem
            0;
    }


    .umix-footer__signature p {
        font-size:
            0.62rem;

        letter-spacing:
            0.11em;
    }


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

        gap:
            2.6rem;

        padding:
            3rem
            0;
    }


    .umix-footer__logo-link {
        max-width:
            210px;
    }


    .umix-footer__description {
        font-size:
            0.94rem;
    }


    .umix-footer__contact-link {
        font-size:
            0.87rem;
    }


    .umix-footer__hours-row {
        gap:
            0.75rem;
    }


    .umix-footer__hours-row span,
    .umix-footer__hours-row strong {
        font-size:
            0.85rem;
    }


    .umix-footer__social-links {
        grid-template-columns:
            1fr;
    }


    .umix-footer__bottom-inner {
        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            center;

        gap:
            0.75rem;

        min-height:
            110px;
    }


    .umix-footer__copyright {
        font-size:
            0.76rem;
    }


    .umix-footer__powered {
        flex-wrap:
            wrap;

        font-size:
            0.76rem;
    }


    .umix-footer__geometry {
        width:
            175px;
    }

}