/* =========================================================
   ZELMOR HOUSE CLEANING
   GALLERY — HERO
   ========================================================= */


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

.zelmor-gallery-hero {
    position: relative;

    isolation: isolate;

    width: 100%;

    height:
        calc(
            100vh -
            var(
                --zelmor-topbar-live-height,
                var(--zelmor-topbar-height)
            ) -
            var(--zelmor-header-height)
        );

    height:
        calc(
            100svh -
            var(
                --zelmor-topbar-live-height,
                var(--zelmor-topbar-height)
            ) -
            var(--zelmor-header-height)
        );

    max-height: 760px;

    overflow: hidden;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-warm-white);
}


/* =========================================================
   02. BACKGROUND
   ========================================================= */

.zelmor-gallery-hero::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -3;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(var(--zelmor-pink-rgb), 0.07),
            transparent 27rem
        ),
        radial-gradient(
            circle at 88% 56%,
            rgba(var(--zelmor-aqua-rgb), 0.07),
            transparent 30rem
        ),
        linear-gradient(
            180deg,
            var(--zelmor-warm-white) 0%,
            var(--zelmor-ivory) 100%
        );

    pointer-events: none;
}


/* =========================================================
   03. DECORATION
   ========================================================= */

.zelmor-gallery-hero__decor {
    position: absolute;

    inset: 0;

    z-index: -2;

    overflow: hidden;

    pointer-events: none;
}


.zelmor-gallery-hero__orb {
    position: absolute;

    border-radius: 50%;
}


.zelmor-gallery-hero__orb--pink {
    top: -260px;
    left: -220px;

    width: 520px;
    height: 520px;

    border:
        1px solid
        rgba(var(--zelmor-pink-rgb), 0.13);

    box-shadow:
        0 0 0 42px
        rgba(var(--zelmor-pink-rgb), 0.018),
        0 0 0 86px
        rgba(var(--zelmor-pink-rgb), 0.01);
}


.zelmor-gallery-hero__orb--aqua {
    right: -210px;
    bottom: -280px;

    width: 540px;
    height: 540px;

    background:
        rgba(var(--zelmor-aqua-rgb), 0.045);
}


.zelmor-gallery-hero__spark {
    position: absolute;

    color:
        rgba(var(--zelmor-pink-rgb), 0.46);

    font-size: 1.35rem;
}


.zelmor-gallery-hero__spark--one {
    top: 22%;
    left: 46%;
}


.zelmor-gallery-hero__spark--two {
    right: 7%;
    bottom: 18%;

    color:
        rgba(var(--zelmor-aqua-rgb), 0.58);
}


.zelmor-gallery-hero__grid-pattern {
    position: absolute;

    right: -25px;
    top: 13%;

    width: 340px;
    height: 340px;

    opacity: 0.16;

    background-image:
        linear-gradient(
            rgba(var(--zelmor-navy-rgb), 0.09) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(var(--zelmor-navy-rgb), 0.09) 1px,
            transparent 1px
        );

    background-size: 34px 34px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            black
        );
}


/* =========================================================
   04. INNER
   ========================================================= */

.zelmor-gallery-hero__inner {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(360px, 0.78fr);

    align-items: center;

    gap:
        clamp(
            55px,
            7vw,
            110px
        );

    height: 100%;
}


/* =========================================================
   05. CONTENT
   ========================================================= */

.zelmor-gallery-hero__content {
    max-width: 770px;
}


/* =========================================================
   06. EYEBROW
   ========================================================= */

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

    gap: 12px;

    margin-bottom: 18px;

    color: var(--zelmor-pink-600);

    font-size: 0.96rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.4;

    letter-spacing: 0.055em;

    text-transform: uppercase;
}


.zelmor-gallery-hero__eyebrow-line {
    width: 38px;
    height: 2px;

    border-radius: 999px;

    background-color: var(--zelmor-pink-600);
}


/* =========================================================
   07. TITLE
   ========================================================= */

.zelmor-gallery-hero__title {
    max-width: 800px;

    margin:
        0
        0
        22px;

    color: var(--zelmor-navy-950);

    font-size:
        clamp(
            3.6rem,
            5.8vw,
            6.3rem
        );

    line-height: 0.95;

    letter-spacing: -0.048em;
}


.zelmor-gallery-hero__title span {
    display: block;

    color: var(--zelmor-pink-600);
}


/* =========================================================
   08. DESCRIPTION
   ========================================================= */

.zelmor-gallery-hero__description {
    max-width: 650px;

    margin:
        0
        0
        28px;

    color: var(--zelmor-slate);

    font-size:
        clamp(
            1.05rem,
            1.3vw,
            1.15rem
        );

    line-height: 1.68;
}


/* =========================================================
   09. ACTIONS
   ========================================================= */

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

    flex-wrap: wrap;

    gap: 11px;

    margin-bottom: 27px;
}


/* =========================================================
   10. PRIMARY CTA
   ========================================================= */

.zelmor-gallery-hero__primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    min-height: 56px;

    padding:
        7px
        7px
        7px
        21px;

    border-radius: var(--zelmor-radius-pill);

    color: var(--zelmor-white);

    background-color: var(--zelmor-pink-600);

    box-shadow:
        0 15px 38px
        rgba(var(--zelmor-pink-rgb), 0.25);

    font-size: 0.97rem;
    font-weight: var(--zelmor-weight-bold);

    transition:
        background-color var(--zelmor-transition),
        box-shadow var(--zelmor-transition);
}


.zelmor-gallery-hero__primary:hover {
    background-color: var(--zelmor-navy-950);

    box-shadow:
        0 18px 44px
        rgba(var(--zelmor-navy-rgb), 0.2);
}


.zelmor-gallery-hero__primary-icon {
    display: grid;
    place-items: center;

    width: 41px;
    height: 41px;

    flex: 0 0 auto;

    border-radius: 50%;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-white);

    transition:
        transform var(--zelmor-transition);
}


.zelmor-gallery-hero__primary:hover
.zelmor-gallery-hero__primary-icon {
    transform: translateY(2px);
}


.zelmor-gallery-hero__primary-icon svg {
    width: 18px;
    height: 18px;
}


/* =========================================================
   11. SECONDARY CTA
   ========================================================= */

.zelmor-gallery-hero__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 54px;

    padding-inline: 19px;

    border:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.11);

    border-radius: var(--zelmor-radius-pill);

    color: var(--zelmor-navy-950);

    background:
        rgba(var(--zelmor-white-rgb), 0.6);

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

    font-size: 0.96rem;
    font-weight: var(--zelmor-weight-bold);

    transition:
        color var(--zelmor-transition),
        background-color var(--zelmor-transition),
        border-color var(--zelmor-transition);
}


.zelmor-gallery-hero__secondary:hover {
    color: var(--zelmor-white);

    border-color: var(--zelmor-navy-950);

    background-color: var(--zelmor-navy-950);
}


/* =========================================================
   12. CATEGORY PREVIEW
   ========================================================= */

.zelmor-gallery-hero__categories {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap:
        6px
        9px;

    max-width: 680px;

    color:
        rgba(var(--zelmor-navy-rgb), 0.36);
}


.zelmor-gallery-hero__categories a {
    min-height: 34px;

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

    color: var(--zelmor-slate);

    font-size: 0.93rem;
    font-weight: var(--zelmor-weight-semibold);

    line-height: 1.4;

    transition:
        color var(--zelmor-transition);
}


.zelmor-gallery-hero__categories a:hover {
    color: var(--zelmor-pink-600);
}


/* =========================================================
   13. VISUAL
   ========================================================= */

.zelmor-gallery-hero__visual {
    position: relative;

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

    justify-self: end;
}


/* =========================================================
   14. FIGURE
   ========================================================= */

.zelmor-gallery-hero__figure {
    position: relative;

    width: 100%;

    margin: 0;

    overflow: hidden;

    aspect-ratio: 0.83;

    border-radius:
        34px
        95px
        34px
        34px;

    background-color: var(--zelmor-silver-light);

    box-shadow:
        0 30px 75px
        rgba(var(--zelmor-navy-rgb), 0.16);
}


.zelmor-gallery-hero__figure::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(var(--zelmor-navy-rgb), 0.76) 100%
        );
}


.zelmor-gallery-hero__figure img {
    width: 100%;
    height: 100%;

    object-fit: cover;

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


.zelmor-gallery-hero__visual:hover
.zelmor-gallery-hero__figure img {
    transform: scale(1.035);
}


/* =========================================================
   15. CAPTION
   ========================================================= */

.zelmor-gallery-hero__caption {
    position: absolute;

    z-index: 2;

    left: 22px;
    right: 22px;
    bottom: 21px;

    display: grid;

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

    align-items: center;

    gap: 12px;

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


.zelmor-gallery-hero__caption-number {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.2);

    border-radius: 14px;

    background:
        rgba(var(--zelmor-white-rgb), 0.11);

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

    font-size: 0.9rem;
    font-weight: var(--zelmor-weight-bold);
}


.zelmor-gallery-hero__caption div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.zelmor-gallery-hero__caption div span {
    color:
        rgba(var(--zelmor-white-rgb), 0.66);

    font-size: 0.9rem;
}


.zelmor-gallery-hero__caption strong {
    color: var(--zelmor-white);

    font-size: 1rem;
    font-weight: var(--zelmor-weight-bold);
}


/* =========================================================
   16. CATEGORY CARD
   ========================================================= */

.zelmor-gallery-hero__category-card {
    position: absolute;

    z-index: 4;

    top: 15%;
    left: -58px;

    display: flex;
    flex-direction: column;

    width: 132px;

    padding: 17px;

    border:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.08);

    border-radius: 20px;

    background:
        rgba(var(--zelmor-white-rgb), 0.92);

    box-shadow:
        0 17px 42px
        rgba(var(--zelmor-navy-rgb), 0.13);

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


.zelmor-gallery-hero__category-card > span {
    color: var(--zelmor-pink-600);

    font-size: 0.88rem;
    font-weight: var(--zelmor-weight-bold);

    text-transform: uppercase;
}


.zelmor-gallery-hero__category-card strong {
    margin-block: 2px;

    color: var(--zelmor-navy-950);

    font-family: var(--zelmor-font-heading);

    font-size: 3.15rem;
    font-weight: var(--zelmor-weight-regular);

    line-height: 1;
}


.zelmor-gallery-hero__category-card small {
    color: var(--zelmor-slate);

    font-size: 0.9rem;

    line-height: 1.4;
}


/* =========================================================
   17. SERVICE NOTE
   ========================================================= */

.zelmor-gallery-hero__service-note {
    position: absolute;

    z-index: 4;

    right: -42px;
    bottom: 18%;

    display: grid;

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

    align-items: center;

    gap: 10px;

    max-width: 205px;

    padding: 13px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.13);

    border-radius: 17px;

    color: var(--zelmor-white);

    background:
        rgba(var(--zelmor-navy-rgb), 0.91);

    box-shadow:
        0 16px 40px
        rgba(var(--zelmor-navy-rgb), 0.19);

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


.zelmor-gallery-hero__service-note-icon {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border-radius: 12px;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua);
}


.zelmor-gallery-hero__service-note > span:last-child {
    color:
        rgba(var(--zelmor-white-rgb), 0.65);

    font-size: 0.9rem;

    line-height: 1.4;
}


.zelmor-gallery-hero__service-note strong {
    display: block;

    color: var(--zelmor-white);

    font-size: 0.92rem;
}


/* =========================================================
   18. VISUAL RING
   ========================================================= */

.zelmor-gallery-hero__visual-ring {
    position: absolute;

    z-index: -1;

    top: -28px;
    right: -33px;

    width: 130px;
    height: 130px;

    border:
        1px solid
        rgba(var(--zelmor-pink-rgb), 0.25);

    border-radius: 50%;

    box-shadow:
        0 0 0 22px
        rgba(var(--zelmor-pink-rgb), 0.025);
}


/* =========================================================
   19. SCROLL CUE
   ========================================================= */

.zelmor-gallery-hero__scroll {
    position: absolute;

    z-index: 5;

    left: 50%;
    bottom: 15px;

    display: flex;
    align-items: center;

    gap: 10px;

    color: var(--zelmor-slate);

    font-size: 0.9rem;
    font-weight: var(--zelmor-weight-semibold);

    transform: translateX(-50%);
}


.zelmor-gallery-hero__scroll-line {
    width: 42px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--zelmor-pink-600),
            var(--zelmor-aqua)
        );
}


/* =========================================================
   20. ENTRANCE MOTION
   ========================================================= */

.zelmor-gallery-hero.is-motion-ready
[data-zelmor-gallery-hero-reveal] {
    opacity: 0;

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

    transition:
        opacity 760ms var(--zelmor-ease),
        transform 760ms var(--zelmor-ease);
}


.zelmor-gallery-hero.is-motion-ready
[data-zelmor-gallery-hero-reveal="visual"] {
    transform:
        translate3d(
            28px,
            18px,
            0
        );
}


.zelmor-gallery-hero.is-motion-ready
[data-zelmor-gallery-hero-reveal].is-visible {
    opacity: 1;

    transform: none;
}


/* =========================================================
   21. RESPONSIVE
   EXACTLY FOUR PROJECT BREAKPOINTS
   ========================================================= */


/* ---------------------------------------------------------
   COMPUTER
   1200px+
   --------------------------------------------------------- */

@media (min-width: 1200px) {

    .zelmor-gallery-hero__inner {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(380px, 0.75fr);
    }


    .zelmor-gallery-hero__visual {
        max-width: 500px;
    }

}


/* ---------------------------------------------------------
   TABLET / SMALL LAPTOP
   768px — 1199px
   --------------------------------------------------------- */

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

    .zelmor-gallery-hero {
        max-height: 710px;
    }


    .zelmor-gallery-hero__inner {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(300px, 0.72fr);

        gap: 48px;
    }


    .zelmor-gallery-hero__title {
        font-size:
            clamp(
                3rem,
                5.6vw,
                4.8rem
            );
    }


    .zelmor-gallery-hero__description {
        font-size: 1.03rem;
    }


    .zelmor-gallery-hero__visual {
        max-width: 390px;
    }


    .zelmor-gallery-hero__category-card {
        left: -35px;

        width: 118px;
    }


    .zelmor-gallery-hero__service-note {
        right: -20px;

        max-width: 180px;
    }

}


/* ---------------------------------------------------------
   MOBILE
   481px — 767px
   --------------------------------------------------------- */

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

    .zelmor-gallery-hero {
        max-height: none;
    }


    .zelmor-gallery-hero__inner {
        display: flex;
        align-items: center;

        height: 100%;
    }


    .zelmor-gallery-hero__content {
        width: 100%;
        max-width: 650px;
    }


    .zelmor-gallery-hero__title {
        font-size:
            clamp(
                3rem,
                10vw,
                4.2rem
            );
    }


    .zelmor-gallery-hero__description {
        max-width: 590px;

        font-size: 1.02rem;
    }


    /*
     * Remove the large editorial photo from the first
     * screen rather than shrinking all typography.
     */
    .zelmor-gallery-hero__visual {
        display: none;
    }


    .zelmor-gallery-hero__categories {
        max-width: 580px;
    }


    .zelmor-gallery-hero__grid-pattern {
        opacity: 0.1;
    }

}


/* ---------------------------------------------------------
   SMALL MOBILE
   <= 480px
   --------------------------------------------------------- */

@media (max-width: 480px) {

    .zelmor-gallery-hero {
        max-height: none;
    }


    .zelmor-gallery-hero__inner {
        display: flex;
        align-items: center;

        height: 100%;
    }


    .zelmor-gallery-hero__content {
        width: 100%;
    }


    .zelmor-gallery-hero__eyebrow {
        margin-bottom: 14px;

        font-size: 0.9rem;
    }


    .zelmor-gallery-hero__title {
        margin-bottom: 18px;

        font-size:
            clamp(
                2.55rem,
                12vw,
                3.5rem
            );

        line-height: 0.98;
    }


    .zelmor-gallery-hero__description {
        margin-bottom: 22px;

        font-size: 1rem;

        line-height: 1.6;
    }


    .zelmor-gallery-hero__actions {
        align-items: stretch;

        flex-direction: column;

        gap: 9px;

        margin-bottom: 21px;
    }


    .zelmor-gallery-hero__primary,
    .zelmor-gallery-hero__secondary {
        width: 100%;
    }


    .zelmor-gallery-hero__primary {
        justify-content: space-between;

        min-height: 52px;

        font-size: 0.95rem;
    }


    .zelmor-gallery-hero__secondary {
        min-height: 50px;

        font-size: 0.95rem;
    }


    .zelmor-gallery-hero__categories {
        gap:
            4px
            7px;
    }


    .zelmor-gallery-hero__categories a {
        font-size: 0.92rem;
    }


    .zelmor-gallery-hero__visual,
    .zelmor-gallery-hero__scroll,
    .zelmor-gallery-hero__spark--two,
    .zelmor-gallery-hero__grid-pattern {
        display: none;
    }

}


/* =========================================================
   22. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .zelmor-gallery-hero__primary,
    .zelmor-gallery-hero__primary-icon,
    .zelmor-gallery-hero__secondary,
    .zelmor-gallery-hero__categories a,
    .zelmor-gallery-hero__figure img,
    .zelmor-gallery-hero
    [data-zelmor-gallery-hero-reveal] {
        transition: none !important;
    }


    .zelmor-gallery-hero.is-motion-ready
    [data-zelmor-gallery-hero-reveal] {
        opacity: 1 !important;

        transform: none !important;
    }

}








































/* =========================================================
   ZELMOR HOUSE CLEANING
   04. SERVICE GALLERY NAVIGATION
   ========================================================= */


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

:root {
    --zelmor-gallery-nav-height: 74px;

    --zelmor-gallery-nav-live-height:
        var(--zelmor-gallery-nav-height);
}


/* =========================================================
   02. SLOT

   The slot always remains in normal document flow.
   When the actual nav becomes fixed, this slot continues
   reserving its exact height and prevents layout jumping.
   ========================================================= */

.zelmor-gallery-nav-slot {
    position: relative;

    z-index: 900;

    width: 100%;
    height: var(--zelmor-gallery-nav-height);

    background-color: var(--zelmor-white);
}


/* =========================================================
   03. NAV
   ========================================================= */

.zelmor-gallery-nav {
    position: relative;

    z-index: 900;

    width: 100%;
    height: var(--zelmor-gallery-nav-height);

    border-top:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.07);

    border-bottom:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.09);

    background:
        rgba(var(--zelmor-white-rgb), 0.94);

    box-shadow:
        0 8px 24px
        rgba(var(--zelmor-navy-rgb), 0);

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

    transition:
        box-shadow var(--zelmor-transition),
        background-color var(--zelmor-transition);
}


/* =========================================================
   04. FIXED STATE

   Header:
   z-index 1000

   Gallery navigation:
   z-index 900

   This keeps the gallery navigation below the global header.
   ========================================================= */

.zelmor-gallery-nav.is-fixed {
    position: fixed;

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

    z-index: 900;

    box-shadow:
        0 12px 32px
        rgba(var(--zelmor-navy-rgb), 0.09);

    background:
        rgba(var(--zelmor-white-rgb), 0.97);
}


/* =========================================================
   05. INNER
   ========================================================= */

.zelmor-gallery-nav__inner {
    display: grid;

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

    align-items: center;

    gap: 22px;

    height: 100%;
}


/* =========================================================
   06. IDENTITY
   ========================================================= */

.zelmor-gallery-nav__identity {
    display: flex;
    align-items: center;

    gap: 9px;

    min-width: max-content;
}


.zelmor-gallery-nav__identity-number {
    color: var(--zelmor-pink-600);

    font-size: 0.88rem;
    font-weight: var(--zelmor-weight-extrabold);

    line-height: 1;
}


.zelmor-gallery-nav__identity-line {
    width: 24px;
    height: 1px;

    background:
        rgba(var(--zelmor-navy-rgb), 0.18);
}


.zelmor-gallery-nav__identity-label {
    color: var(--zelmor-navy-950);

    font-size: 0.92rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.3;

    letter-spacing: 0.035em;

    text-transform: uppercase;
}


/* =========================================================
   07. SCROLLER
   ========================================================= */

.zelmor-gallery-nav__scroller {
    min-width: 0;

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

    overscroll-behavior-inline: contain;

    scrollbar-width: none;

    scroll-behavior: smooth;
}


.zelmor-gallery-nav__scroller::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   08. LINKS CONTAINER
   ========================================================= */

.zelmor-gallery-nav__links {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 4px;

    width: max-content;
    min-width: 100%;
}


/* =========================================================
   09. SERVICE LINK
   ========================================================= */

.zelmor-gallery-nav__link {
    position: relative;

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

    gap: 7px;

    min-height: 44px;

    padding:
        6px
        12px;

    border:
        1px solid
        transparent;

    border-radius: var(--zelmor-radius-pill);

    color: var(--zelmor-slate);

    background-color: transparent;

    font-size: 0.95rem;
    font-weight: var(--zelmor-weight-semibold);

    line-height: 1.35;

    white-space: nowrap;

    transition:
        color var(--zelmor-transition-fast),
        border-color var(--zelmor-transition-fast),
        background-color var(--zelmor-transition-fast),
        transform var(--zelmor-transition-fast);
}


/* Decorative active indicator */
.zelmor-gallery-nav__link::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -15px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background-color: var(--zelmor-pink-600);

    opacity: 0;

    transform:
        translateX(-50%)
        scale(0.3);

    transition:
        opacity var(--zelmor-transition-fast),
        transform var(--zelmor-transition-fast);
}


.zelmor-gallery-nav__link:hover {
    color: var(--zelmor-navy-950);

    background-color:
        rgba(var(--zelmor-navy-rgb), 0.035);
}


.zelmor-gallery-nav__link.is-active {
    color: var(--zelmor-navy-950);

    border-color:
        rgba(var(--zelmor-pink-rgb), 0.13);

    background-color:
        rgba(var(--zelmor-pink-rgb), 0.075);
}


.zelmor-gallery-nav__link.is-active::after {
    opacity: 1;

    transform:
        translateX(-50%)
        scale(1);
}


/* =========================================================
   10. LINK NUMBER
   ========================================================= */

.zelmor-gallery-nav__link-number {
    color:
        rgba(var(--zelmor-navy-rgb), 0.39);

    font-size: 0.82rem;
    font-weight: var(--zelmor-weight-bold);

    transition:
        color var(--zelmor-transition-fast);
}


.zelmor-gallery-nav__link.is-active
.zelmor-gallery-nav__link-number {
    color: var(--zelmor-pink-600);
}


/* =========================================================
   11. LINK LABEL
   ========================================================= */

.zelmor-gallery-nav__link-label {
    line-height: 1.3;
}


/* =========================================================
   12. ESTIMATE CTA
   ========================================================= */

.zelmor-gallery-nav__estimate {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 44px;

    padding:
        5px
        6px
        5px
        15px;

    border-radius: var(--zelmor-radius-pill);

    color: var(--zelmor-white);

    background-color: var(--zelmor-navy-950);

    font-size: 0.92rem;
    font-weight: var(--zelmor-weight-bold);

    white-space: nowrap;

    transition:
        color var(--zelmor-transition),
        background-color var(--zelmor-transition);
}


.zelmor-gallery-nav__estimate:hover {
    background-color: var(--zelmor-pink-600);
}


.zelmor-gallery-nav__estimate-icon {
    display: grid;
    place-items: center;

    width: 33px;
    height: 33px;

    flex: 0 0 auto;

    border-radius: 50%;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-white);

    transition:
        transform var(--zelmor-transition);
}


.zelmor-gallery-nav__estimate:hover
.zelmor-gallery-nav__estimate-icon {
    transform: rotate(7deg);
}


.zelmor-gallery-nav__estimate-icon svg {
    width: 16px;
    height: 16px;
}


/* =========================================================
   13. PROGRESS
   ========================================================= */

.zelmor-gallery-nav__progress {
    position: absolute;

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

    z-index: 3;

    height: 2px;

    overflow: hidden;

    background:
        rgba(var(--zelmor-navy-rgb), 0.055);

    pointer-events: none;
}


.zelmor-gallery-nav__progress-bar {
    display: block;

    width: 0%;
    height: 100%;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            var(--zelmor-pink-600),
            var(--zelmor-aqua)
        );

    transition:
        width 120ms linear;
}


/* =========================================================
   14. SERVICE TARGET OFFSET

   Apply to the five permanent gallery sections.

   This means even normal browser anchor behavior receives a
   sensible offset before JS makes the final correction.
   ========================================================= */

#gallery-recurring,
#gallery-deep-cleaning,
#gallery-move-in-out,
#gallery-office,
#gallery-customized {
    scroll-margin-top:
        calc(
            var(--zelmor-header-height) +
            var(
                --zelmor-gallery-nav-live-height,
                var(--zelmor-gallery-nav-height)
            ) +
            20px
        );
}


/* =========================================================
   15. KEYBOARD FOCUS
   ========================================================= */

.zelmor-gallery-nav__link:focus-visible,
.zelmor-gallery-nav__estimate:focus-visible {
    outline:
        3px solid
        rgba(var(--zelmor-aqua-rgb), 0.46);

    outline-offset: 3px;
}


/* =========================================================
   16. RESPONSIVE
   EXACTLY FOUR PROJECT BREAKPOINTS
   ========================================================= */


/* ---------------------------------------------------------
   COMPUTER
   1200px+
   --------------------------------------------------------- */

@media (min-width: 1200px) {

    :root {
        --zelmor-gallery-nav-height: 74px;
    }


    .zelmor-gallery-nav__inner {
        gap: 22px;
    }


    .zelmor-gallery-nav__link {
        padding-inline: 12px;
    }

}


/* ---------------------------------------------------------
   TABLET / SMALL LAPTOP
   768px — 1199px
   --------------------------------------------------------- */

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

    :root {
        --zelmor-gallery-nav-height: 70px;
    }


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

        gap: 15px;
    }


    .zelmor-gallery-nav__identity-label {
        display: none;
    }


    .zelmor-gallery-nav__identity-line {
        width: 18px;
    }


    .zelmor-gallery-nav__links {
        justify-content: flex-start;
    }


    .zelmor-gallery-nav__estimate {
        display: none;
    }


    .zelmor-gallery-nav__link {
        min-height: 43px;

        padding-inline: 11px;

        font-size: 0.94rem;
    }

}


/* ---------------------------------------------------------
   MOBILE
   481px — 767px
   --------------------------------------------------------- */

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

    :root {
        --zelmor-gallery-nav-height: 68px;
    }


    .zelmor-gallery-nav-slot,
    .zelmor-gallery-nav {
        height: var(--zelmor-gallery-nav-height);
    }


    .zelmor-gallery-nav__inner {
        display: block;

        height: 100%;

        padding-inline: 0;
    }


    .zelmor-gallery-nav__identity,
    .zelmor-gallery-nav__estimate {
        display: none;
    }


    .zelmor-gallery-nav__scroller {
        display: flex;
        align-items: center;

        width: 100%;
        height: 100%;

        padding-inline:
            var(--zelmor-page-gutter);

        scroll-padding-inline:
            var(--zelmor-page-gutter);
    }


    .zelmor-gallery-nav__links {
        justify-content: flex-start;

        min-width: max-content;

        gap: 6px;
    }


    .zelmor-gallery-nav__link {
        min-height: 44px;

        padding-inline: 14px;

        font-size: 0.95rem;

        background:
            rgba(var(--zelmor-navy-rgb), 0.028);
    }


    .zelmor-gallery-nav__link::after {
        bottom: -12px;
    }

}


/* ---------------------------------------------------------
   SMALL MOBILE
   <= 480px
   --------------------------------------------------------- */

@media (max-width: 480px) {

    :root {
        --zelmor-gallery-nav-height: 66px;
    }


    .zelmor-gallery-nav-slot,
    .zelmor-gallery-nav {
        height: var(--zelmor-gallery-nav-height);
    }


    .zelmor-gallery-nav__inner {
        display: block;

        height: 100%;

        padding-inline: 0;
    }


    .zelmor-gallery-nav__identity,
    .zelmor-gallery-nav__estimate {
        display: none;
    }


    .zelmor-gallery-nav__scroller {
        display: flex;
        align-items: center;

        width: 100%;
        height: 100%;

        padding-inline:
            var(--zelmor-page-gutter);

        scroll-padding-inline:
            var(--zelmor-page-gutter);
    }


    .zelmor-gallery-nav__links {
        justify-content: flex-start;

        min-width: max-content;

        gap: 5px;
    }


    .zelmor-gallery-nav__link {
        min-height: 43px;

        padding-inline: 13px;

        font-size: 0.94rem;

        background:
            rgba(var(--zelmor-navy-rgb), 0.028);
    }


    .zelmor-gallery-nav__link-number {
        font-size: 0.82rem;
    }


    .zelmor-gallery-nav__link::after {
        bottom: -11px;
    }

}


/* =========================================================
   17. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .zelmor-gallery-nav,
    .zelmor-gallery-nav__link,
    .zelmor-gallery-nav__link::after,
    .zelmor-gallery-nav__link-number,
    .zelmor-gallery-nav__estimate,
    .zelmor-gallery-nav__estimate-icon,
    .zelmor-gallery-nav__progress-bar {
        transition: none !important;
    }


    .zelmor-gallery-nav__scroller {
        scroll-behavior: auto;
    }

}







































/* =========================================================
   ZELMOR HOUSE CLEANING
   05. GALLERY INTRODUCTION
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.zelmor-gallery-intro {
    position: relative;

    overflow: hidden;

    background-color: var(--zelmor-ivory);
}


/* =========================================================
   02. DECORATIVE ENVIRONMENT
   ========================================================= */

.zelmor-gallery-intro__decor {
    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.zelmor-gallery-intro__orb {
    position: absolute;

    border-radius: 50%;
}


.zelmor-gallery-intro__orb--pink {
    top: -300px;
    right: -260px;

    width: 590px;
    height: 590px;

    border:
        1px solid
        rgba(var(--zelmor-pink-rgb), 0.12);

    box-shadow:
        0 0 0 42px
        rgba(var(--zelmor-pink-rgb), 0.016),
        0 0 0 86px
        rgba(var(--zelmor-pink-rgb), 0.009);
}


.zelmor-gallery-intro__orb--aqua {
    left: -260px;
    bottom: -310px;

    width: 530px;
    height: 530px;

    background:
        rgba(var(--zelmor-aqua-rgb), 0.04);
}


.zelmor-gallery-intro__spark {
    position: absolute;

    color:
        rgba(var(--zelmor-pink-rgb), 0.45);

    font-size: 1.35rem;
}


.zelmor-gallery-intro__spark--one {
    top: 18%;
    right: 7%;
}


.zelmor-gallery-intro__spark--two {
    left: 4%;
    bottom: 17%;

    color:
        rgba(var(--zelmor-aqua-rgb), 0.54);
}


.zelmor-gallery-intro__number {
    position: absolute;

    right: 3%;
    bottom: -72px;

    color:
        rgba(var(--zelmor-navy-rgb), 0.025);

    font-family: var(--zelmor-font-heading);

    font-size:
        clamp(
            14rem,
            24vw,
            23rem
        );

    line-height: 1;

    user-select: none;
}


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

.zelmor-gallery-intro__layout {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(330px, 0.62fr);

    align-items: center;

    gap:
        clamp(
            60px,
            8vw,
            110px
        );
}


/* =========================================================
   04. CONTENT
   ========================================================= */

.zelmor-gallery-intro__content {
    max-width: 760px;
}


/* =========================================================
   05. EYEBROW
   ========================================================= */

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

    gap: 12px;

    margin-bottom: 18px;

    color: var(--zelmor-pink-600);

    font-size: 0.96rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.4;

    letter-spacing: 0.055em;

    text-transform: uppercase;
}


.zelmor-gallery-intro__eyebrow-line {
    width: 38px;
    height: 2px;

    border-radius: 999px;

    background-color: var(--zelmor-pink-600);
}


/* =========================================================
   06. TITLE
   ========================================================= */

.zelmor-gallery-intro__title {
    max-width: 760px;

    margin:
        0
        0
        27px;

    color: var(--zelmor-navy-950);

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

    line-height: 0.98;

    letter-spacing: -0.04em;
}


.zelmor-gallery-intro__title span {
    display: block;

    color: var(--zelmor-pink-600);
}


/* =========================================================
   07. COPY
   ========================================================= */

.zelmor-gallery-intro__copy {
    display: grid;

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

    gap: 25px;

    max-width: 750px;
}


.zelmor-gallery-intro__copy p {
    margin: 0;

    color: var(--zelmor-slate);

    font-size: 1.04rem;

    line-height: 1.7;
}


/* =========================================================
   08. PRINCIPLES
   ========================================================= */

.zelmor-gallery-intro__principles {
    display: grid;

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

    gap: 10px;

    margin-top: 33px;
}


.zelmor-gallery-intro__principle {
    display: grid;

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

    align-items: start;

    gap: 10px;

    padding:
        15px
        13px;

    border:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.075);

    border-radius: 16px;

    background:
        rgba(var(--zelmor-white-rgb), 0.55);
}


.zelmor-gallery-intro__principle-icon {
    display: grid;
    place-items: center;

    width: 33px;
    height: 33px;

    border-radius: 11px;

    color: var(--zelmor-pink-600);

    background-color: var(--zelmor-pink-100);

    font-size: 0.82rem;
    font-weight: var(--zelmor-weight-extrabold);
}


.zelmor-gallery-intro__principle:nth-child(2)
.zelmor-gallery-intro__principle-icon {
    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua-soft);
}


.zelmor-gallery-intro__principle:nth-child(3)
.zelmor-gallery-intro__principle-icon {
    color: var(--zelmor-white);

    background-color: var(--zelmor-navy-950);
}


.zelmor-gallery-intro__principle div {
    display: flex;
    flex-direction: column;

    gap: 4px;
}


.zelmor-gallery-intro__principle strong {
    color: var(--zelmor-navy-950);

    font-size: 1rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.4;
}


.zelmor-gallery-intro__principle div span {
    color: var(--zelmor-slate);

    font-size: 1rem;

    line-height: 1.5;
}


/* =========================================================
   09. GUIDE
   ========================================================= */

.zelmor-gallery-intro__guide {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 27px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.1);

    border-radius:
        28px
        28px
        60px
        28px;

    color: var(--zelmor-white);

    background-color: var(--zelmor-navy-950);

    box-shadow:
        0 24px 62px
        rgba(var(--zelmor-navy-rgb), 0.15);
}


.zelmor-gallery-intro__guide::before {
    content: "";

    position: absolute;

    top: -110px;
    right: -100px;

    width: 250px;
    height: 250px;

    border:
        1px solid
        rgba(var(--zelmor-pink-rgb), 0.25);

    border-radius: 50%;

    box-shadow:
        0 0 0 32px
        rgba(var(--zelmor-pink-rgb), 0.022),
        0 0 0 67px
        rgba(var(--zelmor-pink-rgb), 0.012);

    pointer-events: none;
}


/* =========================================================
   10. GUIDE TOP
   ========================================================= */

.zelmor-gallery-intro__guide-top {
    position: relative;

    z-index: 2;

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

    gap: 20px;

    margin-bottom: 28px;
}


.zelmor-gallery-intro__guide-kicker {
    display: block;

    margin-bottom: 5px;

    color: var(--zelmor-aqua);

    font-size: 0.92rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.4;

    letter-spacing: 0.045em;

    text-transform: uppercase;
}


.zelmor-gallery-intro__guide h3 {
    margin: 0;

    color: var(--zelmor-white);

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

    line-height: 1;

    letter-spacing: -0.025em;
}


.zelmor-gallery-intro__guide-star {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    flex: 0 0 auto;

    border-radius: 50%;

    color: var(--zelmor-pink-100);

    background:
        rgba(var(--zelmor-pink-rgb), 0.12);
}


/* =========================================================
   11. GUIDE LIST
   ========================================================= */

.zelmor-gallery-intro__guide-list {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;
}


.zelmor-gallery-intro__guide-list a {
    display: grid;

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

    align-items: center;

    gap: 10px;

    min-height: 62px;

    border-top:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.09);

    color: var(--zelmor-white);

    transition:
        padding-left var(--zelmor-transition),
        border-color var(--zelmor-transition);
}


.zelmor-gallery-intro__guide-list a:last-child {
    border-bottom:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.09);
}


.zelmor-gallery-intro__guide-list a:hover {
    padding-left: 5px;

    border-color:
        rgba(var(--zelmor-aqua-rgb), 0.25);
}


.zelmor-gallery-intro__guide-number {
    color:
        rgba(var(--zelmor-white-rgb), 0.42);

    font-size: 0.87rem;
    font-weight: var(--zelmor-weight-bold);
}


.zelmor-gallery-intro__guide-name {
    color: var(--zelmor-white);

    font-size: 1rem;
    font-weight: var(--zelmor-weight-semibold);

    line-height: 1.4;
}


.zelmor-gallery-intro__guide-arrow {
    display: grid;
    place-items: center;

    width: 35px;
    height: 35px;

    border-radius: 50%;

    color:
        rgba(var(--zelmor-white-rgb), 0.72);

    background:
        rgba(var(--zelmor-white-rgb), 0.055);

    transition:
        color var(--zelmor-transition),
        background-color var(--zelmor-transition),
        transform var(--zelmor-transition);
}


.zelmor-gallery-intro__guide-list a:hover
.zelmor-gallery-intro__guide-arrow {
    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua);

    transform: translateX(3px);
}


/* =========================================================
   12. GUIDE FOOTER
   ========================================================= */

.zelmor-gallery-intro__guide-footer {
    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: start;

    gap: 10px;

    margin-top: 22px;

    padding: 13px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.08);

    border-radius: 15px;

    background:
        rgba(var(--zelmor-white-rgb), 0.045);
}


.zelmor-gallery-intro__guide-footer-icon {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    border-radius: 10px;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-pink-100);
}


.zelmor-gallery-intro__guide-footer p {
    margin: 0;

    color:
        rgba(var(--zelmor-white-rgb), 0.67);

    font-size: 1rem;

    line-height: 1.55;
}


/* =========================================================
   13. REVEAL
   ========================================================= */

.zelmor-gallery-intro.is-motion-ready
[data-zelmor-gallery-intro-reveal] {
    opacity: 0;

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

    transition:
        opacity 720ms var(--zelmor-ease),
        transform 720ms var(--zelmor-ease);
}


.zelmor-gallery-intro.is-motion-ready
[data-zelmor-gallery-intro-reveal="guide"] {
    transform:
        translate3d(
            24px,
            18px,
            0
        );
}


.zelmor-gallery-intro.is-motion-ready
[data-zelmor-gallery-intro-reveal].is-visible {
    opacity: 1;

    transform: none;
}


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


/* ---------------------------------------------------------
   COMPUTER
   1200px+
   --------------------------------------------------------- */

@media (min-width: 1200px) {

    .zelmor-gallery-intro__layout {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(340px, 0.6fr);
    }


    .zelmor-gallery-intro__guide {
        max-width: 410px;

        justify-self: end;
    }

}


/* ---------------------------------------------------------
   TABLET / SMALL LAPTOP
   768px — 1199px
   --------------------------------------------------------- */

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

    .zelmor-gallery-intro__layout {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(290px, 0.72fr);

        gap: 42px;
    }


    .zelmor-gallery-intro__title {
        font-size:
            clamp(
                2.8rem,
                5vw,
                4.2rem
            );
    }


    .zelmor-gallery-intro__copy {
        grid-template-columns: 1fr;

        gap: 13px;
    }


    .zelmor-gallery-intro__principles {
        grid-template-columns: 1fr;

        gap: 8px;
    }


    .zelmor-gallery-intro__guide {
        padding: 23px;
    }


    .zelmor-gallery-intro__guide-list a {
        min-height: 60px;
    }

}


/* ---------------------------------------------------------
   MOBILE
   481px — 767px
   --------------------------------------------------------- */

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

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

        gap: 34px;
    }


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

        font-size:
            clamp(
                2.8rem,
                10vw,
                4rem
            );
    }


    .zelmor-gallery-intro__copy {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }


    .zelmor-gallery-intro__principles {
        grid-template-columns: 1fr;

        gap: 8px;
    }


    .zelmor-gallery-intro__guide {
        max-width: 100%;

        padding: 26px;

        border-radius:
            26px
            26px
            52px
            26px;
    }


    .zelmor-gallery-intro__guide-list {
        display: grid;

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

        gap: 7px;
    }


    .zelmor-gallery-intro__guide-list a,
    .zelmor-gallery-intro__guide-list a:last-child {
        min-height: 67px;

        padding:
            7px
            9px;

        border:
            1px solid
            rgba(var(--zelmor-white-rgb), 0.08);

        border-radius: 14px;

        background:
            rgba(var(--zelmor-white-rgb), 0.035);
    }

}


/* ---------------------------------------------------------
   SMALL MOBILE
   <= 480px
   --------------------------------------------------------- */

@media (max-width: 480px) {

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

        gap: 29px;
    }


    .zelmor-gallery-intro__eyebrow {
        margin-bottom: 15px;

        font-size: 0.9rem;
    }


    .zelmor-gallery-intro__title {
        margin-bottom: 22px;

        font-size:
            clamp(
                2.5rem,
                12vw,
                3.4rem
            );

        line-height: 1;
    }


    .zelmor-gallery-intro__copy {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .zelmor-gallery-intro__copy p {
        font-size: 1rem;

        line-height: 1.63;
    }


    .zelmor-gallery-intro__principles {
        grid-template-columns: 1fr;

        gap: 7px;

        margin-top: 25px;
    }


    .zelmor-gallery-intro__principle {
        padding:
            14px
            12px;
    }


    .zelmor-gallery-intro__principle strong,
    .zelmor-gallery-intro__principle div span {
        font-size: 1rem;
    }


    .zelmor-gallery-intro__guide {
        padding:
            22px
            17px;

        border-radius:
            23px
            23px
            46px
            23px;
    }


    .zelmor-gallery-intro__guide-top {
        margin-bottom: 22px;
    }


    .zelmor-gallery-intro__guide h3 {
        font-size:
            clamp(
                2rem,
                9vw,
                2.55rem
            );
    }


    .zelmor-gallery-intro__guide-list a {
        min-height: 62px;
    }


    .zelmor-gallery-intro__guide-name {
        font-size: 1rem;
    }


    .zelmor-gallery-intro__guide-footer p {
        font-size: 1rem;
    }


    .zelmor-gallery-intro__number,
    .zelmor-gallery-intro__spark--two {
        display: none;
    }

}


/* =========================================================
   15. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .zelmor-gallery-intro__guide-list a,
    .zelmor-gallery-intro__guide-arrow,
    .zelmor-gallery-intro
    [data-zelmor-gallery-intro-reveal] {
        transition: none !important;
    }


    .zelmor-gallery-intro.is-motion-ready
    [data-zelmor-gallery-intro-reveal] {
        opacity: 1 !important;

        transform: none !important;
    }

}





































/* =========================================================
   ZELMOR HOUSE CLEANING
   06. RECURRING CLEANING
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.zelmor-gallery-service--recurring {
    position: relative;

    overflow: hidden;

    background-color: var(--zelmor-warm-white);
}


/* =========================================================
   02. DECORATION
   ========================================================= */

.zelmor-gallery-service__decor {
    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.zelmor-gallery-service__orb {
    position: absolute;

    border-radius: 50%;
}


.zelmor-gallery-service__orb--pink {
    top: -290px;
    left: -250px;

    width: 580px;
    height: 580px;

    border:
        1px solid
        rgba(var(--zelmor-pink-rgb), 0.1);

    box-shadow:
        0 0 0 44px
        rgba(var(--zelmor-pink-rgb), 0.014),
        0 0 0 90px
        rgba(var(--zelmor-pink-rgb), 0.008);
}


.zelmor-gallery-service__orb--aqua {
    right: -260px;
    bottom: -300px;

    width: 570px;
    height: 570px;

    background:
        rgba(var(--zelmor-aqua-rgb), 0.04);
}


.zelmor-gallery-service__spark {
    position: absolute;

    font-size: 1.4rem;
}


.zelmor-gallery-service__spark--one {
    top: 16%;
    right: 5%;

    color:
        rgba(var(--zelmor-pink-rgb), 0.45);
}


.zelmor-gallery-service__spark--two {
    left: 4%;
    bottom: 14%;

    color:
        rgba(var(--zelmor-aqua-rgb), 0.52);
}


.zelmor-gallery-service__background-number {
    position: absolute;

    right: 1%;
    bottom: -80px;

    color:
        rgba(var(--zelmor-navy-rgb), 0.025);

    font-family: var(--zelmor-font-heading);

    font-size:
        clamp(
            15rem,
            27vw,
            27rem
        );

    line-height: 1;

    user-select: none;
}


/* =========================================================
   03. HEADER
   ========================================================= */

.zelmor-gallery-service__header {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(320px, 0.65fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 45px;

    padding-bottom: 36px;

    border-bottom:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.09);
}


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

.zelmor-gallery-service__eyebrow {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 16px;

    color: var(--zelmor-pink-600);

    font-size: 0.96rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.4;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


.zelmor-gallery-service__eyebrow-number {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 11px;

    color: var(--zelmor-white);

    background-color: var(--zelmor-pink-600);

    font-size: 0.84rem;
    font-weight: var(--zelmor-weight-extrabold);
}


.zelmor-gallery-service__eyebrow-line {
    width: 29px;
    height: 1px;

    background:
        rgba(var(--zelmor-navy-rgb), 0.2);
}


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

.zelmor-gallery-service__heading h2 {
    max-width: 720px;

    margin: 0;

    color: var(--zelmor-navy-950);

    font-size:
        clamp(
            3.35rem,
            5.3vw,
            5.7rem
        );

    line-height: 0.96;

    letter-spacing: -0.045em;
}


.zelmor-gallery-service__heading h2 span {
    display: block;

    color: var(--zelmor-pink-600);
}


/* =========================================================
   06. HEADER COPY
   ========================================================= */

.zelmor-gallery-service__header-copy {
    max-width: 500px;
}


.zelmor-gallery-service__header-copy > p {
    margin:
        0
        0
        18px;

    color: var(--zelmor-slate);

    font-size: 1.05rem;

    line-height: 1.68;
}


/* =========================================================
   07. FREQUENCY
   ========================================================= */

.zelmor-gallery-service__frequency {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}


.zelmor-gallery-service__frequency span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding-inline: 14px;

    border:
        1px solid
        rgba(var(--zelmor-pink-rgb), 0.12);

    border-radius: var(--zelmor-radius-pill);

    color: var(--zelmor-navy-950);

    background:
        rgba(var(--zelmor-pink-rgb), 0.055);

    font-size: 0.94rem;
    font-weight: var(--zelmor-weight-semibold);
}


/* =========================================================
   08. MAIN LAYOUT
   ========================================================= */

.zelmor-gallery-service__layout {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(280px, 0.48fr)
        minmax(0, 1.52fr);

    align-items: stretch;

    gap: 18px;
}


/* =========================================================
   09. INFO PANEL
   ========================================================= */

.zelmor-gallery-service__info {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 28px;

    border:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.08);

    border-radius:
        27px
        27px
        57px
        27px;

    background-color: var(--zelmor-ivory);
}


.zelmor-gallery-service__info-kicker {
    display: block;

    margin-bottom: 18px;

    color: var(--zelmor-pink-600);

    font-size: 0.92rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.4;

    letter-spacing: 0.045em;

    text-transform: uppercase;
}


.zelmor-gallery-service__info h3 {
    margin:
        0
        0
        16px;

    color: var(--zelmor-navy-950);

    font-size:
        clamp(
            2rem,
            2.8vw,
            2.7rem
        );

    line-height: 1.02;

    letter-spacing: -0.025em;
}


.zelmor-gallery-service__info > p {
    margin:
        0
        0
        24px;

    color: var(--zelmor-slate);

    font-size: 1rem;

    line-height: 1.65;
}


/* =========================================================
   10. FEATURES
   ========================================================= */

.zelmor-gallery-service__features {
    display: flex;
    flex-direction: column;

    gap: 0;

    margin:
        0
        0
        27px;

    padding: 0;

    list-style: none;
}


.zelmor-gallery-service__features li {
    display: grid;

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

    align-items: center;

    gap: 8px;

    min-height: 43px;

    border-top:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.07);

    color: var(--zelmor-navy-950);

    font-size: 1rem;

    line-height: 1.45;
}


.zelmor-gallery-service__features li:last-child {
    border-bottom:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.07);
}


.zelmor-gallery-service__features li > span:first-child {
    color: var(--zelmor-aqua);

    font-size: 0.85rem;
}


/* =========================================================
   11. INFO FOOTER
   ========================================================= */

.zelmor-gallery-service__info-footer {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 16px;

    margin-top: auto;
}


/* =========================================================
   12. CTA
   ========================================================= */

.zelmor-gallery-service__cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 13px;

    width: 100%;
    min-height: 56px;

    padding:
        7px
        7px
        7px
        18px;

    border-radius: var(--zelmor-radius-pill);

    color: var(--zelmor-white);

    background-color: var(--zelmor-pink-600);

    box-shadow:
        0 14px 34px
        rgba(var(--zelmor-pink-rgb), 0.21);

    font-size: 0.96rem;
    font-weight: var(--zelmor-weight-bold);

    transition:
        background-color var(--zelmor-transition),
        box-shadow var(--zelmor-transition);
}


.zelmor-gallery-service__cta:hover {
    background-color: var(--zelmor-navy-950);

    box-shadow:
        0 16px 38px
        rgba(var(--zelmor-navy-rgb), 0.18);
}


.zelmor-gallery-service__cta-icon {
    display: grid;
    place-items: center;

    width: 41px;
    height: 41px;

    flex: 0 0 auto;

    border-radius: 50%;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-white);

    transition:
        transform var(--zelmor-transition);
}


.zelmor-gallery-service__cta:hover
.zelmor-gallery-service__cta-icon {
    transform: rotate(7deg);
}


.zelmor-gallery-service__cta-icon svg {
    width: 18px;
    height: 18px;
}


/* =========================================================
   13. PHONE
   ========================================================= */

.zelmor-gallery-service__phone {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.zelmor-gallery-service__phone span {
    color: var(--zelmor-slate);

    font-size: 0.94rem;
}


.zelmor-gallery-service__phone strong {
    color: var(--zelmor-navy-950);

    font-size: 1rem;
    font-weight: var(--zelmor-weight-bold);

    transition:
        color var(--zelmor-transition);
}


.zelmor-gallery-service__phone:hover strong {
    color: var(--zelmor-pink-600);
}


/* =========================================================
   14. MEDIA
   ========================================================= */

.zelmor-gallery-service__media {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(220px, 0.65fr);

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

    gap: 12px;

    min-width: 0;

    min-height: 670px;
}


/* =========================================================
   15. FIGURE
   ========================================================= */

.zelmor-gallery-service__figure {
    position: relative;

    min-width: 0;

    margin: 0;

    overflow: hidden;

    border-radius: 24px;

    background-color: var(--zelmor-silver-light);

    box-shadow:
        0 17px 45px
        rgba(var(--zelmor-navy-rgb), 0.1);
}


.zelmor-gallery-service__figure--main {
    grid-column: 1;
    grid-row: 1 / 3;

    border-radius:
        29px
        29px
        29px
        67px;
}


.zelmor-gallery-service__figure--secondary {
    grid-column: 2;
    grid-row: 1;
}


.zelmor-gallery-service__figure--tertiary {
    grid-column: 2;
    grid-row: 2;

    border-radius:
        24px
        55px
        24px
        24px;
}


/* =========================================================
   16. IMAGE BUTTON
   ========================================================= */

.zelmor-gallery-service__image-button {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    min-height: 100%;

    padding: 0;

    overflow: hidden;

    border: 0;

    color: var(--zelmor-white);

    background: transparent;

    cursor: zoom-in;
}


.zelmor-gallery-service__image-button img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

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


.zelmor-gallery-service__image-button:hover img {
    transform: scale(1.035);
}


/* =========================================================
   17. IMAGE OVERLAY
   ========================================================= */

.zelmor-gallery-service__image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(var(--zelmor-navy-rgb), 0.02) 35%,
            rgba(var(--zelmor-navy-rgb), 0.45) 100%
        );

    transition:
        background-color var(--zelmor-transition);
}


/* =========================================================
   18. IMAGE INDEX
   ========================================================= */

.zelmor-gallery-service__image-index {
    position: absolute;

    left: 15px;
    bottom: 15px;

    display: grid;
    place-items: center;

    width: 39px;
    height: 39px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.18);

    border-radius: 13px;

    background:
        rgba(var(--zelmor-navy-rgb), 0.56);

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

    color: var(--zelmor-white);

    font-size: 0.88rem;
    font-weight: var(--zelmor-weight-bold);
}


/* =========================================================
   19. EXPAND ICON
   ========================================================= */

.zelmor-gallery-service__image-expand {
    position: absolute;

    top: 15px;
    right: 15px;

    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.17);

    border-radius: 50%;

    color: var(--zelmor-white);

    background:
        rgba(var(--zelmor-navy-rgb), 0.53);

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

    transition:
        color var(--zelmor-transition),
        background-color var(--zelmor-transition),
        transform var(--zelmor-transition);
}


.zelmor-gallery-service__image-expand svg {
    width: 19px;
    height: 19px;
}


.zelmor-gallery-service__image-button:hover
.zelmor-gallery-service__image-expand {
    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua);

    transform: scale(1.05);
}


/* =========================================================
   20. MEDIA LABEL
   ========================================================= */

.zelmor-gallery-service__media-label {
    position: absolute;

    z-index: 4;

    left: -30px;
    bottom: 38px;

    display: flex;
    flex-direction: column;

    min-width: 150px;

    padding:
        15px
        17px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.12);

    border-radius: 18px;

    color: var(--zelmor-white);

    background:
        rgba(var(--zelmor-navy-rgb), 0.92);

    box-shadow:
        0 17px 42px
        rgba(var(--zelmor-navy-rgb), 0.18);

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


.zelmor-gallery-service__media-label > span {
    color: var(--zelmor-aqua);

    font-size: 0.88rem;
    font-weight: var(--zelmor-weight-bold);

    text-transform: uppercase;

    letter-spacing: 0.05em;
}


.zelmor-gallery-service__media-label strong {
    margin-block: 2px;

    color: var(--zelmor-white);

    font-family: var(--zelmor-font-heading);

    font-size: 1.7rem;
    font-weight: var(--zelmor-weight-regular);

    line-height: 1;
}


.zelmor-gallery-service__media-label small {
    color:
        rgba(var(--zelmor-white-rgb), 0.62);

    font-size: 0.9rem;
}


/* =========================================================
   21. DYNAMIC IMAGE COUNT
   ========================================================= */

/*
 * TWO IMAGES
 */

.zelmor-gallery-service__media[data-image-count="2"] {
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(260px, 0.65fr);

    grid-template-rows: 1fr;
}


.zelmor-gallery-service__media[data-image-count="2"]
.zelmor-gallery-service__figure--main {
    grid-column: 1;
    grid-row: 1;
}


.zelmor-gallery-service__media[data-image-count="2"]
.zelmor-gallery-service__figure--secondary,
.zelmor-gallery-service__media[data-image-count="2"]
.zelmor-gallery-service__figure--tertiary {
    grid-column: 2;
    grid-row: 1;

    border-radius:
        24px
        55px
        24px
        24px;
}


/*
 * The JS removes failed figures, so only the actual
 * second figure remains in column 2.
 */


/*
 * ONE IMAGE
 */

.zelmor-gallery-service__media[data-image-count="1"] {
    display: block;

    min-height: 670px;
}


.zelmor-gallery-service__media[data-image-count="1"]
.zelmor-gallery-service__figure {
    width: 100%;
    height: 100%;
    min-height: 670px;

    border-radius:
        29px
        80px
        29px
        29px;
}


/* =========================================================
   22. SECTION BOTTOM
   ========================================================= */

.zelmor-gallery-service__bottom {
    position: relative;

    z-index: 2;

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

    gap: 25px;

    margin-top: 36px;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.08);
}


.zelmor-gallery-service__bottom-label {
    color: var(--zelmor-slate);

    font-size: 0.95rem;
    font-weight: var(--zelmor-weight-semibold);
}


.zelmor-gallery-service__bottom > a {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    color: var(--zelmor-navy-950);

    font-size: 1rem;
    font-weight: var(--zelmor-weight-bold);

    transition:
        color var(--zelmor-transition),
        gap var(--zelmor-transition);
}


.zelmor-gallery-service__bottom > a:hover {
    gap: 17px;

    color: var(--zelmor-pink-600);
}


.zelmor-gallery-service__bottom-arrow {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua-soft);
}


/* =========================================================
   23. REVEAL
   ========================================================= */

.zelmor-gallery-service--recurring.is-motion-ready
[data-zelmor-recurring-reveal] {
    opacity: 0;

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

    transition:
        opacity 720ms var(--zelmor-ease),
        transform 720ms var(--zelmor-ease);
}


.zelmor-gallery-service--recurring.is-motion-ready
[data-zelmor-recurring-reveal="media"] {
    transform:
        translate3d(
            24px,
            18px,
            0
        );
}


.zelmor-gallery-service--recurring.is-motion-ready
[data-zelmor-recurring-reveal].is-visible {
    opacity: 1;

    transform: none;
}


/* =========================================================
   24. RESPONSIVE
   EXACTLY FOUR PROJECT BREAKPOINTS
   ========================================================= */


/* ---------------------------------------------------------
   COMPUTER
   1200px+
   --------------------------------------------------------- */

@media (min-width: 1200px) {

    .zelmor-gallery-service__layout {
        grid-template-columns:
            minmax(300px, 0.47fr)
            minmax(0, 1.53fr);
    }


    .zelmor-gallery-service__media {
        min-height: 690px;
    }


    .zelmor-gallery-service__media[data-image-count="1"],
    .zelmor-gallery-service__media[data-image-count="1"]
    .zelmor-gallery-service__figure {
        min-height: 690px;
    }

}


/* ---------------------------------------------------------
   TABLET / SMALL LAPTOP
   768px — 1199px
   --------------------------------------------------------- */

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

    .zelmor-gallery-service__header {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(280px, 0.75fr);

        gap: 42px;
    }


    .zelmor-gallery-service__heading h2 {
        font-size:
            clamp(
                2.9rem,
                5vw,
                4.3rem
            );
    }


    .zelmor-gallery-service__layout {
        grid-template-columns:
            minmax(250px, 0.62fr)
            minmax(0, 1.38fr);

        gap: 14px;
    }


    .zelmor-gallery-service__info {
        padding: 23px;
    }


    .zelmor-gallery-service__media {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(190px, 0.8fr);

        min-height: 590px;
    }


    .zelmor-gallery-service__media[data-image-count="1"],
    .zelmor-gallery-service__media[data-image-count="1"]
    .zelmor-gallery-service__figure {
        min-height: 590px;
    }


    .zelmor-gallery-service__media-label {
        left: -20px;
    }

}


/* ---------------------------------------------------------
   MOBILE
   481px — 767px
   --------------------------------------------------------- */

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

    .zelmor-gallery-service__header {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-bottom: 32px;

        padding-bottom: 27px;
    }


    .zelmor-gallery-service__heading h2 {
        max-width: 650px;

        font-size:
            clamp(
                2.8rem,
                10vw,
                4rem
            );
    }


    .zelmor-gallery-service__header-copy {
        max-width: 600px;
    }


    .zelmor-gallery-service__layout {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .zelmor-gallery-service__info {
        padding: 26px;
    }


    .zelmor-gallery-service__features {
        display: grid;

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

        gap:
            0
            20px;
    }


    .zelmor-gallery-service__media {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(190px, 0.85fr);

        min-height: 520px;
    }


    .zelmor-gallery-service__media[data-image-count="1"],
    .zelmor-gallery-service__media[data-image-count="1"]
    .zelmor-gallery-service__figure {
        min-height: 520px;
    }


    .zelmor-gallery-service__media-label {
        left: 18px;
        bottom: 18px;
    }

}


/* ---------------------------------------------------------
   SMALL MOBILE
   <= 480px
   --------------------------------------------------------- */

@media (max-width: 480px) {

    .zelmor-gallery-service__header {
        grid-template-columns: 1fr;

        gap: 18px;

        margin-bottom: 28px;

        padding-bottom: 24px;
    }


    .zelmor-gallery-service__eyebrow {
        font-size: 0.9rem;
    }


    .zelmor-gallery-service__heading h2 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.4rem
            );

        line-height: 1;
    }


    .zelmor-gallery-service__header-copy > p {
        font-size: 1rem;

        line-height: 1.62;
    }


    .zelmor-gallery-service__frequency span {
        min-height: 37px;

        padding-inline: 12px;

        font-size: 0.94rem;
    }


    .zelmor-gallery-service__layout {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .zelmor-gallery-service__info {
        padding:
            22px
            17px;

        border-radius:
            22px
            22px
            44px
            22px;
    }


    .zelmor-gallery-service__info h3 {
        font-size:
            clamp(
                2rem,
                9vw,
                2.5rem
            );
    }


    .zelmor-gallery-service__info > p,
    .zelmor-gallery-service__features li {
        font-size: 1rem;
    }


    .zelmor-gallery-service__features {
        display: flex;

        flex-direction: column;
    }


    .zelmor-gallery-service__media {
        display: grid;

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

        grid-template-rows:
            330px
            190px;

        gap: 8px;

        min-height: 0;
    }


    .zelmor-gallery-service__figure--main {
        grid-column: 1 / -1;
        grid-row: 1;

        border-radius:
            22px
            45px
            22px
            22px;
    }


    .zelmor-gallery-service__figure--secondary {
        grid-column: 1;
        grid-row: 2;

        border-radius: 18px;
    }


    .zelmor-gallery-service__figure--tertiary {
        grid-column: 2;
        grid-row: 2;

        border-radius: 18px;
    }


    /*
     * Two valid images on small screens.
     */
    .zelmor-gallery-service__media[data-image-count="2"] {
        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows:
            330px
            220px;

        min-height: 0;
    }


    .zelmor-gallery-service__media[data-image-count="2"]
    .zelmor-gallery-service__figure {
        grid-column: 1;

        border-radius: 20px;
    }


    .zelmor-gallery-service__media[data-image-count="2"]
    .zelmor-gallery-service__figure:first-of-type {
        grid-row: 1;

        border-radius:
            22px
            45px
            22px
            22px;
    }


    .zelmor-gallery-service__media[data-image-count="2"]
    .zelmor-gallery-service__figure:last-of-type {
        grid-row: 2;
    }


    /*
     * One valid image.
     */
    .zelmor-gallery-service__media[data-image-count="1"] {
        display: block;

        min-height: 430px;
    }


    .zelmor-gallery-service__media[data-image-count="1"]
    .zelmor-gallery-service__figure {
        min-height: 430px;

        border-radius:
            22px
            50px
            22px
            22px;
    }


    .zelmor-gallery-service__media-label {
        left: 13px;
        bottom: 13px;

        min-width: 135px;

        padding:
            12px
            14px;
    }


    .zelmor-gallery-service__image-index {
        left: 11px;
        bottom: 11px;
    }


    .zelmor-gallery-service__image-expand {
        top: 11px;
        right: 11px;

        width: 40px;
        height: 40px;
    }


    .zelmor-gallery-service__bottom {
        margin-top: 28px;

        padding-top: 21px;
    }


    .zelmor-gallery-service__bottom-label {
        font-size: 0.94rem;
    }


    .zelmor-gallery-service__bottom > a {
        font-size: 1rem;
    }


    .zelmor-gallery-service__background-number,
    .zelmor-gallery-service__spark--two {
        display: none;
    }

}


/* =========================================================
   25. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .zelmor-gallery-service__cta,
    .zelmor-gallery-service__cta-icon,
    .zelmor-gallery-service__phone strong,
    .zelmor-gallery-service__image-button img,
    .zelmor-gallery-service__image-expand,
    .zelmor-gallery-service__bottom > a,
    .zelmor-gallery-service--recurring
    [data-zelmor-recurring-reveal] {
        transition: none !important;
    }


    .zelmor-gallery-service--recurring.is-motion-ready
    [data-zelmor-recurring-reveal] {
        opacity: 1 !important;

        transform: none !important;
    }

}


































/* =========================================================
   ZELMOR HOUSE CLEANING
   07. DEEP CLEANING
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.zelmor-gallery-deep {
    position: relative;

    overflow: hidden;

    color: var(--zelmor-white);

    background-color: var(--zelmor-navy-950);
}


/* =========================================================
   02. DECORATIVE ENVIRONMENT
   ========================================================= */

.zelmor-gallery-deep__decor {
    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.zelmor-gallery-deep__orb {
    position: absolute;

    border-radius: 50%;
}


.zelmor-gallery-deep__orb--aqua {
    top: -270px;
    right: -250px;

    width: 570px;
    height: 570px;

    border:
        1px solid
        rgba(var(--zelmor-aqua-rgb), 0.17);

    box-shadow:
        0 0 0 46px
        rgba(var(--zelmor-aqua-rgb), 0.016),
        0 0 0 94px
        rgba(var(--zelmor-aqua-rgb), 0.008);
}


.zelmor-gallery-deep__orb--pink {
    left: -260px;
    bottom: -330px;

    width: 570px;
    height: 570px;

    background:
        rgba(var(--zelmor-pink-rgb), 0.055);
}


.zelmor-gallery-deep__spark {
    position: absolute;

    font-size: 1.4rem;
}


.zelmor-gallery-deep__spark--one {
    top: 16%;
    left: 4%;

    color:
        rgba(var(--zelmor-pink-rgb), 0.62);
}


.zelmor-gallery-deep__spark--two {
    right: 5%;
    bottom: 16%;

    color:
        rgba(var(--zelmor-aqua-rgb), 0.58);
}


.zelmor-gallery-deep__background-number {
    position: absolute;

    right: 1%;
    bottom: -80px;

    color:
        rgba(var(--zelmor-white-rgb), 0.022);

    font-family: var(--zelmor-font-heading);

    font-size:
        clamp(
            15rem,
            27vw,
            27rem
        );

    line-height: 1;

    user-select: none;
}


/* =========================================================
   03. HEADER
   ========================================================= */

.zelmor-gallery-deep__header {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(320px, 0.6fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 45px;

    padding-bottom: 36px;

    border-bottom:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.1);
}


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

.zelmor-gallery-deep__eyebrow {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 16px;

    color: var(--zelmor-aqua);

    font-size: 0.96rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.4;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


.zelmor-gallery-deep__eyebrow-number {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 11px;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua);

    font-size: 0.84rem;
    font-weight: var(--zelmor-weight-extrabold);
}


.zelmor-gallery-deep__eyebrow-line {
    width: 29px;
    height: 1px;

    background:
        rgba(var(--zelmor-white-rgb), 0.23);
}


/* =========================================================
   05. HEADING
   ========================================================= */

.zelmor-gallery-deep__heading h2 {
    max-width: 790px;

    margin: 0;

    color: var(--zelmor-white);

    font-size:
        clamp(
            3.35rem,
            5.3vw,
            5.7rem
        );

    line-height: 0.96;

    letter-spacing: -0.045em;
}


.zelmor-gallery-deep__heading h2 span {
    display: block;

    color: var(--zelmor-pink-100);
}


/* =========================================================
   06. HEADER COPY
   ========================================================= */

.zelmor-gallery-deep__header-copy {
    max-width: 500px;

    margin: 0;

    color:
        rgba(var(--zelmor-white-rgb), 0.7);

    font-size: 1.05rem;

    line-height: 1.68;
}


/* =========================================================
   07. MAIN LAYOUT
   ========================================================= */

.zelmor-gallery-deep__layout {
    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: stretch;

    gap: 18px;
}


/* =========================================================
   08. MEDIA
   ========================================================= */

.zelmor-gallery-deep__media {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(210px, 0.65fr)
        minmax(0, 1.35fr);

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

    gap: 12px;

    min-width: 0;
    min-height: 680px;
}


/* =========================================================
   09. FIGURES
   ========================================================= */

.zelmor-gallery-deep__figure {
    position: relative;

    min-width: 0;

    margin: 0;

    overflow: hidden;

    border-radius: 24px;

    background-color: var(--zelmor-navy-900);

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.2);
}


.zelmor-gallery-deep__figure--main {
    grid-column: 2;
    grid-row: 1 / 3;

    border-radius:
        28px
        68px
        28px
        28px;
}


.zelmor-gallery-deep__figure--secondary {
    grid-column: 1;
    grid-row: 1;

    border-radius:
        50px
        22px
        22px
        22px;
}


.zelmor-gallery-deep__figure--tertiary {
    grid-column: 1;
    grid-row: 2;

    border-radius:
        22px
        22px
        22px
        50px;
}


/* =========================================================
   10. IMAGE BUTTON
   ========================================================= */

.zelmor-gallery-deep__image-button {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    padding: 0;

    overflow: hidden;

    border: 0;

    color: var(--zelmor-white);

    background: transparent;

    cursor: zoom-in;
}


.zelmor-gallery-deep__image-button img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 760ms var(--zelmor-ease);
}


.zelmor-gallery-deep__image-button:hover img {
    transform: scale(1.035);
}


/* =========================================================
   11. IMAGE OVERLAY
   ========================================================= */

.zelmor-gallery-deep__image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(var(--zelmor-navy-rgb), 0.02) 35%,
            rgba(var(--zelmor-navy-rgb), 0.5) 100%
        );

    pointer-events: none;
}


/* =========================================================
   12. IMAGE NUMBER
   ========================================================= */

.zelmor-gallery-deep__image-index {
    position: absolute;

    left: 15px;
    bottom: 15px;

    display: grid;
    place-items: center;

    width: 39px;
    height: 39px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.18);

    border-radius: 13px;

    color: var(--zelmor-white);

    background:
        rgba(var(--zelmor-navy-rgb), 0.62);

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

    font-size: 0.88rem;
    font-weight: var(--zelmor-weight-bold);
}


/* =========================================================
   13. EXPAND
   ========================================================= */

.zelmor-gallery-deep__expand {
    position: absolute;

    top: 15px;
    right: 15px;

    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.18);

    border-radius: 50%;

    color: var(--zelmor-white);

    background:
        rgba(var(--zelmor-navy-rgb), 0.6);

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

    transition:
        color var(--zelmor-transition),
        background-color var(--zelmor-transition),
        transform var(--zelmor-transition);
}


.zelmor-gallery-deep__expand svg {
    width: 19px;
    height: 19px;
}


.zelmor-gallery-deep__image-button:hover
.zelmor-gallery-deep__expand {
    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua);

    transform: scale(1.05);
}


/* =========================================================
   14. MEDIA LABEL
   ========================================================= */

.zelmor-gallery-deep__media-label {
    position: absolute;

    z-index: 4;

    right: -26px;
    bottom: 40px;

    display: flex;
    flex-direction: column;

    min-width: 145px;

    padding:
        15px
        17px;

    border:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.08);

    border-radius: 18px;

    color: var(--zelmor-navy-950);

    background:
        rgba(var(--zelmor-white-rgb), 0.94);

    box-shadow:
        0 18px 46px
        rgba(0, 0, 0, 0.18);

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


.zelmor-gallery-deep__media-label > span {
    color: var(--zelmor-pink-600);

    font-size: 0.88rem;
    font-weight: var(--zelmor-weight-bold);

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


.zelmor-gallery-deep__media-label strong {
    margin-block: 2px;

    color: var(--zelmor-navy-950);

    font-family: var(--zelmor-font-heading);

    font-size: 1.8rem;
    font-weight: var(--zelmor-weight-regular);

    line-height: 1;
}


.zelmor-gallery-deep__media-label small {
    color: var(--zelmor-slate);

    font-size: 0.9rem;
}


/* =========================================================
   15. CONTENT PANEL
   ========================================================= */

.zelmor-gallery-deep__content {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 28px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.11);

    border-radius:
        28px
        28px
        62px
        28px;

    background:
        rgba(var(--zelmor-white-rgb), 0.055);

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.1);

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


/* =========================================================
   16. CONTENT TOP
   ========================================================= */

.zelmor-gallery-deep__content-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 28px;
}


.zelmor-gallery-deep__content-kicker {
    color: var(--zelmor-aqua);

    font-size: 0.92rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.4;

    letter-spacing: 0.045em;

    text-transform: uppercase;
}


.zelmor-gallery-deep__content-star {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    flex: 0 0 auto;

    border-radius: 50%;

    color: var(--zelmor-pink-100);

    background:
        rgba(var(--zelmor-pink-rgb), 0.12);
}


/* =========================================================
   17. CONTENT TYPOGRAPHY
   ========================================================= */

.zelmor-gallery-deep__content h3 {
    margin:
        0
        0
        17px;

    color: var(--zelmor-white);

    font-size:
        clamp(
            2rem,
            2.8vw,
            2.75rem
        );

    line-height: 1.03;

    letter-spacing: -0.025em;
}


.zelmor-gallery-deep__content-copy {
    margin:
        0
        0
        26px;

    color:
        rgba(var(--zelmor-white-rgb), 0.68);

    font-size: 1rem;

    line-height: 1.66;
}


/* =========================================================
   18. APPROACH
   ========================================================= */

.zelmor-gallery-deep__approach {
    display: flex;
    flex-direction: column;

    margin-bottom: 24px;
}


.zelmor-gallery-deep__approach-item {
    display: grid;

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

    align-items: start;

    gap: 12px;

    padding-block: 15px;

    border-top:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.09);
}


.zelmor-gallery-deep__approach-item:last-child {
    border-bottom:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.09);
}


.zelmor-gallery-deep__approach-number {
    display: grid;
    place-items: center;

    width: 35px;
    height: 35px;

    border-radius: 11px;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua);

    font-size: 0.82rem;
    font-weight: var(--zelmor-weight-extrabold);
}


.zelmor-gallery-deep__approach-item:nth-child(2)
.zelmor-gallery-deep__approach-number {
    background-color: var(--zelmor-pink-100);
}


.zelmor-gallery-deep__approach-item:nth-child(3)
.zelmor-gallery-deep__approach-number {
    color: var(--zelmor-white);

    background-color: var(--zelmor-pink-600);
}


.zelmor-gallery-deep__approach-item strong {
    display: block;

    margin-bottom: 3px;

    color: var(--zelmor-white);

    font-size: 1rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.4;
}


.zelmor-gallery-deep__approach-item p {
    margin: 0;

    color:
        rgba(var(--zelmor-white-rgb), 0.61);

    font-size: 1rem;

    line-height: 1.55;
}


/* =========================================================
   19. NOTE
   ========================================================= */

.zelmor-gallery-deep__note {
    display: grid;

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

    align-items: start;

    gap: 10px;

    margin-bottom: 26px;

    padding: 13px;

    border:
        1px solid
        rgba(var(--zelmor-aqua-rgb), 0.15);

    border-radius: 15px;

    background:
        rgba(var(--zelmor-aqua-rgb), 0.06);
}


.zelmor-gallery-deep__note-icon {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua);

    font-size: 0.86rem;
    font-weight: var(--zelmor-weight-bold);
}


.zelmor-gallery-deep__note p {
    margin: 0;

    color:
        rgba(var(--zelmor-white-rgb), 0.68);

    font-size: 1rem;

    line-height: 1.55;
}


/* =========================================================
   20. ACTIONS
   ========================================================= */

.zelmor-gallery-deep__actions {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 16px;

    margin-top: auto;
}


/* =========================================================
   21. CTA
   ========================================================= */

.zelmor-gallery-deep__cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    width: 100%;
    min-height: 57px;

    padding:
        7px
        7px
        7px
        18px;

    border-radius: var(--zelmor-radius-pill);

    color: var(--zelmor-white);

    background-color: var(--zelmor-pink-600);

    box-shadow:
        0 14px 34px
        rgba(var(--zelmor-pink-rgb), 0.22);

    font-size: 0.97rem;
    font-weight: var(--zelmor-weight-bold);

    transition:
        background-color var(--zelmor-transition),
        box-shadow var(--zelmor-transition);
}


.zelmor-gallery-deep__cta:hover {
    background-color: var(--zelmor-aqua);

    box-shadow:
        0 16px 38px
        rgba(var(--zelmor-aqua-rgb), 0.18);
}


.zelmor-gallery-deep__cta:hover > span:first-child {
    color: var(--zelmor-navy-950);
}


.zelmor-gallery-deep__cta-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    flex: 0 0 auto;

    border-radius: 50%;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-white);

    transition:
        transform var(--zelmor-transition);
}


.zelmor-gallery-deep__cta:hover
.zelmor-gallery-deep__cta-icon {
    transform: rotate(7deg);
}


.zelmor-gallery-deep__cta-icon svg {
    width: 18px;
    height: 18px;
}


/* =========================================================
   22. PHONE
   ========================================================= */

.zelmor-gallery-deep__phone {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.zelmor-gallery-deep__phone span {
    color:
        rgba(var(--zelmor-white-rgb), 0.56);

    font-size: 0.94rem;
}


.zelmor-gallery-deep__phone strong {
    color: var(--zelmor-pink-100);

    font-size: 1rem;
    font-weight: var(--zelmor-weight-bold);

    transition:
        color var(--zelmor-transition);
}


.zelmor-gallery-deep__phone:hover strong {
    color: var(--zelmor-aqua);
}


/* =========================================================
   23. TWO IMAGES
   ========================================================= */

.zelmor-gallery-deep__media[data-image-count="2"] {
    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);

    grid-template-rows: 1fr;
}


.zelmor-gallery-deep__media[data-image-count="2"]
.zelmor-gallery-deep__figure--main {
    grid-column: 2;
    grid-row: 1;

    border-radius:
        28px
        65px
        28px
        28px;
}


.zelmor-gallery-deep__media[data-image-count="2"]
.zelmor-gallery-deep__figure--secondary {
    grid-column: 1;
    grid-row: 1;

    border-radius:
        55px
        24px
        24px
        24px;
}


/* =========================================================
   24. ONE IMAGE
   ========================================================= */

.zelmor-gallery-deep__media[data-image-count="1"] {
    display: block;

    min-height: 680px;
}


.zelmor-gallery-deep__media[data-image-count="1"]
.zelmor-gallery-deep__figure {
    width: 100%;
    height: 100%;
    min-height: 680px;

    border-radius:
        30px
        80px
        30px
        30px;
}


/* =========================================================
   25. BOTTOM
   ========================================================= */

.zelmor-gallery-deep__bottom {
    position: relative;

    z-index: 2;

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

    gap: 25px;

    margin-top: 36px;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.09);
}


.zelmor-gallery-deep__bottom-label {
    color:
        rgba(var(--zelmor-white-rgb), 0.55);

    font-size: 0.95rem;
    font-weight: var(--zelmor-weight-semibold);
}


.zelmor-gallery-deep__bottom > a {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    color: var(--zelmor-white);

    font-size: 1rem;
    font-weight: var(--zelmor-weight-bold);

    transition:
        color var(--zelmor-transition),
        gap var(--zelmor-transition);
}


.zelmor-gallery-deep__bottom > a:hover {
    gap: 17px;

    color: var(--zelmor-aqua);
}


.zelmor-gallery-deep__bottom-arrow {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-pink-100);
}


/* =========================================================
   26. ENTRANCE MOTION
   ========================================================= */

.zelmor-gallery-deep.is-motion-ready
[data-zelmor-deep-reveal] {
    opacity: 0;

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

    transition:
        opacity 720ms var(--zelmor-ease),
        transform 720ms var(--zelmor-ease);
}


.zelmor-gallery-deep.is-motion-ready
[data-zelmor-deep-reveal="media"] {
    transform:
        translate3d(
            -24px,
            18px,
            0
        );
}


.zelmor-gallery-deep.is-motion-ready
[data-zelmor-deep-reveal="content"] {
    transform:
        translate3d(
            24px,
            18px,
            0
        );
}


.zelmor-gallery-deep.is-motion-ready
[data-zelmor-deep-reveal].is-visible {
    opacity: 1;

    transform: none;
}


/* =========================================================
   27. RESPONSIVE
   EXACTLY FOUR PROJECT BREAKPOINTS
   ========================================================= */


/* ---------------------------------------------------------
   COMPUTER
   1200px+
   --------------------------------------------------------- */

@media (min-width: 1200px) {

    .zelmor-gallery-deep__layout {
        grid-template-columns:
            minmax(0, 1.5fr)
            minmax(320px, 0.5fr);
    }


    .zelmor-gallery-deep__media {
        min-height: 700px;
    }


    .zelmor-gallery-deep__media[data-image-count="1"],
    .zelmor-gallery-deep__media[data-image-count="1"]
    .zelmor-gallery-deep__figure {
        min-height: 700px;
    }

}


/* ---------------------------------------------------------
   TABLET / SMALL LAPTOP
   768px — 1199px
   --------------------------------------------------------- */

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

    .zelmor-gallery-deep__header {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(280px, 0.75fr);

        gap: 42px;
    }


    .zelmor-gallery-deep__heading h2 {
        font-size:
            clamp(
                2.9rem,
                5vw,
                4.3rem
            );
    }


    .zelmor-gallery-deep__layout {
        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(260px, 0.65fr);

        gap: 14px;
    }


    .zelmor-gallery-deep__media {
        grid-template-columns:
            minmax(180px, 0.78fr)
            minmax(0, 1.22fr);

        min-height: 600px;
    }


    .zelmor-gallery-deep__content {
        padding: 23px;
    }


    .zelmor-gallery-deep__media-label {
        right: -17px;
    }


    .zelmor-gallery-deep__media[data-image-count="1"],
    .zelmor-gallery-deep__media[data-image-count="1"]
    .zelmor-gallery-deep__figure {
        min-height: 600px;
    }

}


/* ---------------------------------------------------------
   MOBILE
   481px — 767px
   --------------------------------------------------------- */

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

    .zelmor-gallery-deep__header {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-bottom: 32px;

        padding-bottom: 27px;
    }


    .zelmor-gallery-deep__heading h2 {
        max-width: 650px;

        font-size:
            clamp(
                2.8rem,
                10vw,
                4rem
            );
    }


    .zelmor-gallery-deep__header-copy {
        max-width: 620px;

        font-size: 1rem;
    }


    .zelmor-gallery-deep__layout {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .zelmor-gallery-deep__media {
        grid-template-columns:
            minmax(190px, 0.82fr)
            minmax(0, 1.18fr);

        min-height: 520px;
    }


    .zelmor-gallery-deep__content {
        padding: 26px;
    }


    .zelmor-gallery-deep__media-label {
        right: 18px;
        bottom: 18px;
    }


    .zelmor-gallery-deep__media[data-image-count="1"],
    .zelmor-gallery-deep__media[data-image-count="1"]
    .zelmor-gallery-deep__figure {
        min-height: 520px;
    }

}


/* ---------------------------------------------------------
   SMALL MOBILE
   <= 480px
   --------------------------------------------------------- */

@media (max-width: 480px) {

    .zelmor-gallery-deep__header {
        grid-template-columns: 1fr;

        gap: 18px;

        margin-bottom: 28px;

        padding-bottom: 24px;
    }


    .zelmor-gallery-deep__eyebrow {
        font-size: 0.9rem;
    }


    .zelmor-gallery-deep__heading h2 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.4rem
            );

        line-height: 1;
    }


    .zelmor-gallery-deep__header-copy {
        font-size: 1rem;

        line-height: 1.62;
    }


    .zelmor-gallery-deep__layout {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .zelmor-gallery-deep__media {
        display: grid;

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

        grid-template-rows:
            330px
            190px;

        gap: 8px;

        min-height: 0;
    }


    .zelmor-gallery-deep__figure--main {
        grid-column: 1 / -1;
        grid-row: 1;

        border-radius:
            22px
            48px
            22px
            22px;
    }


    .zelmor-gallery-deep__figure--secondary {
        grid-column: 1;
        grid-row: 2;

        border-radius: 18px;
    }


    .zelmor-gallery-deep__figure--tertiary {
        grid-column: 2;
        grid-row: 2;

        border-radius: 18px;
    }


    .zelmor-gallery-deep__media[data-image-count="2"] {
        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows:
            330px
            220px;

        min-height: 0;
    }


    .zelmor-gallery-deep__media[data-image-count="2"]
    .zelmor-gallery-deep__figure--main {
        grid-column: 1;
        grid-row: 1;

        border-radius:
            22px
            48px
            22px
            22px;
    }


    .zelmor-gallery-deep__media[data-image-count="2"]
    .zelmor-gallery-deep__figure--secondary {
        grid-column: 1;
        grid-row: 2;

        border-radius: 20px;
    }


    .zelmor-gallery-deep__media[data-image-count="1"] {
        display: block;

        min-height: 430px;
    }


    .zelmor-gallery-deep__media[data-image-count="1"]
    .zelmor-gallery-deep__figure {
        min-height: 430px;

        border-radius:
            22px
            50px
            22px
            22px;
    }


    .zelmor-gallery-deep__content {
        padding:
            22px
            17px;

        border-radius:
            22px
            22px
            44px
            22px;
    }


    .zelmor-gallery-deep__content h3 {
        font-size:
            clamp(
                2rem,
                9vw,
                2.5rem
            );
    }


    .zelmor-gallery-deep__content-copy,
    .zelmor-gallery-deep__approach-item p,
    .zelmor-gallery-deep__note p {
        font-size: 1rem;
    }


    .zelmor-gallery-deep__media-label {
        right: 13px;
        bottom: 13px;

        min-width: 135px;

        padding:
            12px
            14px;
    }


    .zelmor-gallery-deep__image-index {
        left: 11px;
        bottom: 11px;
    }


    .zelmor-gallery-deep__expand {
        top: 11px;
        right: 11px;

        width: 40px;
        height: 40px;
    }


    .zelmor-gallery-deep__bottom {
        margin-top: 28px;

        padding-top: 21px;
    }


    .zelmor-gallery-deep__background-number,
    .zelmor-gallery-deep__spark--two {
        display: none;
    }

}


/* =========================================================
   28. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .zelmor-gallery-deep__image-button img,
    .zelmor-gallery-deep__expand,
    .zelmor-gallery-deep__cta,
    .zelmor-gallery-deep__cta-icon,
    .zelmor-gallery-deep__phone strong,
    .zelmor-gallery-deep__bottom > a,
    .zelmor-gallery-deep
    [data-zelmor-deep-reveal] {
        transition: none !important;
    }


    .zelmor-gallery-deep.is-motion-ready
    [data-zelmor-deep-reveal] {
        opacity: 1 !important;

        transform: none !important;
    }

}




































/* =========================================================
   ZELMOR HOUSE CLEANING
   08. MOVE-IN / MOVE-OUT
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.zelmor-gallery-move {
    position: relative;

    overflow: hidden;

    background-color: var(--zelmor-ivory);
}


/* =========================================================
   02. DECOR
   ========================================================= */

.zelmor-gallery-move__decor {
    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.zelmor-gallery-move__orb {
    position: absolute;

    border-radius: 50%;
}


.zelmor-gallery-move__orb--pink {
    top: -320px;
    right: -260px;

    width: 610px;
    height: 610px;

    border:
        1px solid
        rgba(var(--zelmor-pink-rgb), 0.11);

    box-shadow:
        0 0 0 46px
        rgba(var(--zelmor-pink-rgb), 0.015),
        0 0 0 94px
        rgba(var(--zelmor-pink-rgb), 0.008);
}


.zelmor-gallery-move__orb--aqua {
    left: -280px;
    bottom: -320px;

    width: 570px;
    height: 570px;

    background:
        rgba(var(--zelmor-aqua-rgb), 0.045);
}


.zelmor-gallery-move__spark {
    position: absolute;

    font-size: 1.4rem;
}


.zelmor-gallery-move__spark--one {
    top: 12%;
    left: 5%;

    color:
        rgba(var(--zelmor-pink-rgb), 0.5);
}


.zelmor-gallery-move__spark--two {
    right: 5%;
    bottom: 17%;

    color:
        rgba(var(--zelmor-aqua-rgb), 0.58);
}


.zelmor-gallery-move__background-number {
    position: absolute;

    right: 1%;
    bottom: -80px;

    color:
        rgba(var(--zelmor-navy-rgb), 0.024);

    font-family: var(--zelmor-font-heading);

    font-size:
        clamp(
            15rem,
            27vw,
            27rem
        );

    line-height: 1;

    user-select: none;
}


/* =========================================================
   03. HEADER
   ========================================================= */

.zelmor-gallery-move__header {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(330px, 0.62fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 44px;

    padding-bottom: 35px;

    border-bottom:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.09);
}


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

.zelmor-gallery-move__eyebrow {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 16px;

    color: var(--zelmor-pink-600);

    font-size: 0.96rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.4;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


.zelmor-gallery-move__eyebrow-number {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 11px;

    color: var(--zelmor-white);

    background-color: var(--zelmor-pink-600);

    font-size: 0.84rem;
    font-weight: var(--zelmor-weight-extrabold);
}


.zelmor-gallery-move__eyebrow-line {
    width: 29px;
    height: 1px;

    background:
        rgba(var(--zelmor-navy-rgb), 0.2);
}


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

.zelmor-gallery-move__heading h2 {
    max-width: 760px;

    margin: 0;

    color: var(--zelmor-navy-950);

    font-size:
        clamp(
            3.35rem,
            5.3vw,
            5.7rem
        );

    line-height: 0.96;

    letter-spacing: -0.045em;
}


.zelmor-gallery-move__heading h2 span {
    display: block;

    color: var(--zelmor-pink-600);
}


/* =========================================================
   06. HEADER COPY
   ========================================================= */

.zelmor-gallery-move__header-copy {
    max-width: 500px;
}


.zelmor-gallery-move__header-copy p {
    margin: 0;

    color: var(--zelmor-slate);

    font-size: 1.05rem;

    line-height: 1.68;
}


/* =========================================================
   07. MEDIA
   ========================================================= */

.zelmor-gallery-move__media {
    position: relative;

    z-index: 2;

    display: grid;

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

    grid-template-rows:
        minmax(390px, 1.45fr)
        minmax(230px, 0.75fr);

    gap: 12px;

    min-height: 650px;

    margin-bottom: 18px;
}


/* =========================================================
   08. FIGURES
   ========================================================= */

.zelmor-gallery-move__figure {
    position: relative;

    min-width: 0;

    margin: 0;

    overflow: hidden;

    border-radius: 25px;

    background-color: var(--zelmor-silver-light);

    box-shadow:
        0 18px 48px
        rgba(var(--zelmor-navy-rgb), 0.11);
}


.zelmor-gallery-move__figure--feature {
    grid-column: 1 / -1;
    grid-row: 1;

    border-radius:
        30px
        75px
        30px
        30px;
}


.zelmor-gallery-move__figure--secondary {
    grid-column: 1;
    grid-row: 2;

    border-radius:
        25px
        25px
        25px
        55px;
}


.zelmor-gallery-move__figure--tertiary {
    grid-column: 2;
    grid-row: 2;

    border-radius:
        25px
        55px
        25px
        25px;
}


/* =========================================================
   09. IMAGE BUTTON
   ========================================================= */

.zelmor-gallery-move__image-button {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    padding: 0;

    overflow: hidden;

    border: 0;

    color: var(--zelmor-white);

    background: transparent;

    cursor: zoom-in;
}


.zelmor-gallery-move__image-button img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 760ms var(--zelmor-ease);
}


.zelmor-gallery-move__image-button:hover img {
    transform: scale(1.035);
}


/* =========================================================
   10. IMAGE OVERLAY
   ========================================================= */

.zelmor-gallery-move__image-overlay {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(var(--zelmor-navy-rgb), 0.01) 35%,
            rgba(var(--zelmor-navy-rgb), 0.5) 100%
        );
}


/* =========================================================
   11. NUMBER
   ========================================================= */

.zelmor-gallery-move__image-number {
    position: absolute;

    left: 15px;
    bottom: 15px;

    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.18);

    border-radius: 13px;

    color: var(--zelmor-white);

    background:
        rgba(var(--zelmor-navy-rgb), 0.59);

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

    font-size: 0.88rem;
    font-weight: var(--zelmor-weight-bold);
}


/* =========================================================
   12. EXPAND
   ========================================================= */

.zelmor-gallery-move__expand {
    position: absolute;

    top: 15px;
    right: 15px;

    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.18);

    border-radius: 50%;

    color: var(--zelmor-white);

    background:
        rgba(var(--zelmor-navy-rgb), 0.58);

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

    transition:
        color var(--zelmor-transition),
        background-color var(--zelmor-transition),
        transform var(--zelmor-transition);
}


.zelmor-gallery-move__expand svg {
    width: 19px;
    height: 19px;
}


.zelmor-gallery-move__image-button:hover
.zelmor-gallery-move__expand {
    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua);

    transform: scale(1.05);
}


/* =========================================================
   13. FLOATING LABEL
   ========================================================= */

.zelmor-gallery-move__media-label {
    position: absolute;

    z-index: 4;

    top: 32px;
    left: -27px;

    display: flex;
    flex-direction: column;

    min-width: 170px;

    padding:
        15px
        17px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.13);

    border-radius: 18px;

    color: var(--zelmor-white);

    background:
        rgba(var(--zelmor-navy-rgb), 0.93);

    box-shadow:
        0 18px 46px
        rgba(var(--zelmor-navy-rgb), 0.18);

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


.zelmor-gallery-move__media-label > span {
    color: var(--zelmor-aqua);

    font-size: 0.88rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.4;

    letter-spacing: 0.045em;

    text-transform: uppercase;
}


.zelmor-gallery-move__media-label strong {
    margin-block: 3px;

    color: var(--zelmor-white);

    font-family: var(--zelmor-font-heading);

    font-size: 1.75rem;
    font-weight: var(--zelmor-weight-regular);

    line-height: 1;
}


.zelmor-gallery-move__media-label small {
    color:
        rgba(var(--zelmor-white-rgb), 0.63);

    font-size: 0.9rem;
}


/* =========================================================
   14. 2 IMAGES
   ========================================================= */

.zelmor-gallery-move__media[data-image-count="2"] {
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(0, 0.65fr);

    grid-template-rows: minmax(520px, 1fr);

    min-height: 520px;
}


.zelmor-gallery-move__media[data-image-count="2"]
.zelmor-gallery-move__figure--feature {
    grid-column: 1;
    grid-row: 1;

    border-radius:
        30px
        30px
        30px
        65px;
}


.zelmor-gallery-move__media[data-image-count="2"]
.zelmor-gallery-move__figure--secondary {
    grid-column: 2;
    grid-row: 1;

    border-radius:
        30px
        65px
        30px
        30px;
}


/* =========================================================
   15. 1 IMAGE
   ========================================================= */

.zelmor-gallery-move__media[data-image-count="1"] {
    display: block;

    min-height: 590px;
}


.zelmor-gallery-move__media[data-image-count="1"]
.zelmor-gallery-move__figure {
    width: 100%;
    min-height: 590px;

    border-radius:
        30px
        80px
        30px
        30px;
}


/* =========================================================
   16. CONTENT GRID
   ========================================================= */

.zelmor-gallery-move__content-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.78fr)
        minmax(0, 1.22fr);

    align-items: stretch;

    gap: 14px;
}


/* =========================================================
   17. STORY
   ========================================================= */

.zelmor-gallery-move__story {
    padding: 29px;

    border:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.08);

    border-radius:
        27px
        27px
        55px
        27px;

    background-color: var(--zelmor-white);

    box-shadow:
        0 15px 42px
        rgba(var(--zelmor-navy-rgb), 0.065);
}


.zelmor-gallery-move__story-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 30px;
}


.zelmor-gallery-move__story-kicker {
    color: var(--zelmor-pink-600);

    font-size: 0.92rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.4;

    letter-spacing: 0.045em;

    text-transform: uppercase;
}


.zelmor-gallery-move__story-star {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua-soft);
}


.zelmor-gallery-move__story h3 {
    margin:
        0
        0
        17px;

    color: var(--zelmor-navy-950);

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

    line-height: 1.02;

    letter-spacing: -0.028em;
}


.zelmor-gallery-move__story > p {
    margin:
        0
        0
        27px;

    color: var(--zelmor-slate);

    font-size: 1rem;

    line-height: 1.68;
}


/* =========================================================
   18. MOVE MODES
   ========================================================= */

.zelmor-gallery-move__modes {
    display: flex;
    flex-direction: column;
}


.zelmor-gallery-move__mode {
    display: grid;

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

    align-items: start;

    gap: 12px;

    padding-block: 16px;

    border-top:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.08);
}


.zelmor-gallery-move__mode:last-child {
    border-bottom:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.08);
}


.zelmor-gallery-move__mode-number {
    display: grid;
    place-items: center;

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

    padding-inline: 6px;

    border-radius: 12px;

    color: var(--zelmor-white);

    background-color: var(--zelmor-navy-950);

    font-size: 0.8rem;
    font-weight: var(--zelmor-weight-extrabold);
}


.zelmor-gallery-move__mode:nth-child(2)
.zelmor-gallery-move__mode-number {
    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua);
}


.zelmor-gallery-move__mode strong {
    display: block;

    margin-bottom: 3px;

    color: var(--zelmor-navy-950);

    font-size: 1rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.4;
}


.zelmor-gallery-move__mode p {
    margin: 0;

    color: var(--zelmor-slate);

    font-size: 1rem;

    line-height: 1.55;
}


/* =========================================================
   19. SCOPE
   ========================================================= */

.zelmor-gallery-move__scope {
    padding: 29px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.1);

    border-radius:
        27px
        27px
        60px
        27px;

    color: var(--zelmor-white);

    background-color: var(--zelmor-navy-950);

    box-shadow:
        0 22px 58px
        rgba(var(--zelmor-navy-rgb), 0.14);
}


/* =========================================================
   20. SCOPE HEADER
   ========================================================= */

.zelmor-gallery-move__scope-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;
}


.zelmor-gallery-move__scope-kicker {
    display: block;

    margin-bottom: 5px;

    color: var(--zelmor-aqua);

    font-size: 0.92rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.4;

    letter-spacing: 0.045em;

    text-transform: uppercase;
}


.zelmor-gallery-move__scope-header h3 {
    max-width: 490px;

    margin: 0;

    color: var(--zelmor-white);

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

    line-height: 1.02;

    letter-spacing: -0.025em;
}


.zelmor-gallery-move__scope-icon {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    flex: 0 0 auto;

    border-radius: 50%;

    color: var(--zelmor-pink-100);

    background:
        rgba(var(--zelmor-pink-rgb), 0.13);
}


/* =========================================================
   21. SCOPE LIST
   ========================================================= */

.zelmor-gallery-move__scope-list {
    display: grid;

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

    gap: 0 22px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.zelmor-gallery-move__scope-list li {
    display: grid;

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

    align-items: center;

    gap: 9px;

    min-height: 57px;

    border-top:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.09);
}


.zelmor-gallery-move__scope-list li:nth-last-child(-n + 2) {
    border-bottom:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.09);
}


.zelmor-gallery-move__scope-list li > span {
    color: var(--zelmor-pink-100);

    font-size: 0.84rem;
    font-weight: var(--zelmor-weight-bold);
}


.zelmor-gallery-move__scope-list p {
    margin: 0;

    color:
        rgba(var(--zelmor-white-rgb), 0.78);

    font-size: 1rem;

    line-height: 1.45;
}


/* =========================================================
   22. SCOPE ACTIONS
   ========================================================= */

.zelmor-gallery-move__scope-actions {
    display: grid;

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

    align-items: center;

    gap: 18px;

    margin-top: 27px;
}


/* =========================================================
   23. CTA
   ========================================================= */

.zelmor-gallery-move__cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 13px;

    min-height: 57px;

    padding:
        7px
        7px
        7px
        19px;

    border-radius: var(--zelmor-radius-pill);

    color: var(--zelmor-white);

    background-color: var(--zelmor-pink-600);

    box-shadow:
        0 14px 34px
        rgba(var(--zelmor-pink-rgb), 0.22);

    font-size: 0.97rem;
    font-weight: var(--zelmor-weight-bold);

    transition:
        color var(--zelmor-transition),
        background-color var(--zelmor-transition);
}


.zelmor-gallery-move__cta:hover {
    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua);
}


.zelmor-gallery-move__cta-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    flex: 0 0 auto;

    border-radius: 50%;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-white);

    transition:
        transform var(--zelmor-transition);
}


.zelmor-gallery-move__cta:hover
.zelmor-gallery-move__cta-icon {
    transform: rotate(7deg);
}


.zelmor-gallery-move__cta-icon svg {
    width: 18px;
    height: 18px;
}


/* =========================================================
   24. PHONE
   ========================================================= */

.zelmor-gallery-move__phone {
    display: flex;
    flex-direction: column;

    min-width: max-content;

    gap: 2px;
}


.zelmor-gallery-move__phone span {
    color:
        rgba(var(--zelmor-white-rgb), 0.55);

    font-size: 0.94rem;
}


.zelmor-gallery-move__phone strong {
    color: var(--zelmor-pink-100);

    font-size: 1rem;
    font-weight: var(--zelmor-weight-bold);

    transition:
        color var(--zelmor-transition);
}


.zelmor-gallery-move__phone:hover strong {
    color: var(--zelmor-aqua);
}


/* =========================================================
   25. BOTTOM
   ========================================================= */

.zelmor-gallery-move__bottom {
    position: relative;

    z-index: 2;

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

    gap: 24px;

    margin-top: 36px;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.08);
}


.zelmor-gallery-move__bottom-label {
    color: var(--zelmor-slate);

    font-size: 0.95rem;
    font-weight: var(--zelmor-weight-semibold);
}


.zelmor-gallery-move__bottom > a {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    color: var(--zelmor-navy-950);

    font-size: 1rem;
    font-weight: var(--zelmor-weight-bold);

    transition:
        color var(--zelmor-transition),
        gap var(--zelmor-transition);
}


.zelmor-gallery-move__bottom > a:hover {
    gap: 17px;

    color: var(--zelmor-pink-600);
}


.zelmor-gallery-move__bottom-arrow {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua-soft);
}


/* =========================================================
   26. REVEAL
   ========================================================= */

.zelmor-gallery-move.is-motion-ready
[data-zelmor-move-reveal] {
    opacity: 0;

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

    transition:
        opacity 720ms var(--zelmor-ease),
        transform 720ms var(--zelmor-ease);
}


.zelmor-gallery-move.is-motion-ready
[data-zelmor-move-reveal="media"] {
    transform:
        translate3d(
            0,
            32px,
            0
        );
}


.zelmor-gallery-move.is-motion-ready
[data-zelmor-move-reveal="story"] {
    transform:
        translate3d(
            -20px,
            18px,
            0
        );
}


.zelmor-gallery-move.is-motion-ready
[data-zelmor-move-reveal="scope"] {
    transform:
        translate3d(
            20px,
            18px,
            0
        );
}


.zelmor-gallery-move.is-motion-ready
[data-zelmor-move-reveal].is-visible {
    opacity: 1;

    transform: none;
}


/* =========================================================
   27. RESPONSIVE
   ========================================================= */


/* ---------------------------------------------------------
   COMPUTER
   1200px+
   --------------------------------------------------------- */

@media (min-width: 1200px) {

    .zelmor-gallery-move__media {
        grid-template-rows:
            minmax(410px, 1.45fr)
            minmax(240px, 0.75fr);

        min-height: 680px;
    }


    .zelmor-gallery-move__content-grid {
        grid-template-columns:
            minmax(350px, 0.72fr)
            minmax(0, 1.28fr);
    }

}


/* ---------------------------------------------------------
   TABLET / SMALL LAPTOP
   768px — 1199px
   --------------------------------------------------------- */

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

    .zelmor-gallery-move__header {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(280px, 0.75fr);

        gap: 42px;
    }


    .zelmor-gallery-move__heading h2 {
        font-size:
            clamp(
                2.9rem,
                5vw,
                4.3rem
            );
    }


    .zelmor-gallery-move__media {
        grid-template-rows:
            minmax(350px, 1.35fr)
            minmax(210px, 0.75fr);

        min-height: 580px;
    }


    .zelmor-gallery-move__media-label {
        left: 18px;
    }


    .zelmor-gallery-move__content-grid {
        grid-template-columns:
            minmax(270px, 0.75fr)
            minmax(0, 1.25fr);
    }


    .zelmor-gallery-move__story,
    .zelmor-gallery-move__scope {
        padding: 24px;
    }


    .zelmor-gallery-move__scope-list {
        gap:
            0
            16px;
    }


    .zelmor-gallery-move__scope-actions {
        grid-template-columns: 1fr;

        align-items: start;
    }

}


/* ---------------------------------------------------------
   MOBILE
   481px — 767px
   --------------------------------------------------------- */

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

    .zelmor-gallery-move__header {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-bottom: 32px;

        padding-bottom: 27px;
    }


    .zelmor-gallery-move__heading h2 {
        max-width: 650px;

        font-size:
            clamp(
                2.8rem,
                10vw,
                4rem
            );
    }


    .zelmor-gallery-move__header-copy {
        max-width: 620px;
    }


    .zelmor-gallery-move__media {
        grid-template-rows:
            390px
            220px;

        min-height: 622px;
    }


    .zelmor-gallery-move__media-label {
        top: 18px;
        left: 18px;
    }


    .zelmor-gallery-move__media[data-image-count="2"] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows: 440px;

        min-height: 440px;
    }


    .zelmor-gallery-move__media[data-image-count="1"] {
        min-height: 500px;
    }


    .zelmor-gallery-move__media[data-image-count="1"]
    .zelmor-gallery-move__figure {
        min-height: 500px;
    }


    .zelmor-gallery-move__content-grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .zelmor-gallery-move__story,
    .zelmor-gallery-move__scope {
        padding: 26px;
    }


    .zelmor-gallery-move__scope-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ---------------------------------------------------------
   SMALL MOBILE
   <= 480px
   --------------------------------------------------------- */

@media (max-width: 480px) {

    .zelmor-gallery-move__header {
        grid-template-columns: 1fr;

        gap: 18px;

        margin-bottom: 28px;

        padding-bottom: 24px;
    }


    .zelmor-gallery-move__eyebrow {
        font-size: 0.9rem;
    }


    .zelmor-gallery-move__heading h2 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.4rem
            );

        line-height: 1;
    }


    .zelmor-gallery-move__header-copy p {
        font-size: 1rem;

        line-height: 1.62;
    }


    .zelmor-gallery-move__media {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows:
            330px
            190px;

        gap: 8px;

        min-height: 528px;
    }


    .zelmor-gallery-move__figure--feature {
        grid-column: 1 / -1;
        grid-row: 1;

        border-radius:
            22px
            47px
            22px
            22px;
    }


    .zelmor-gallery-move__figure--secondary {
        grid-column: 1;
        grid-row: 2;

        border-radius: 18px;
    }


    .zelmor-gallery-move__figure--tertiary {
        grid-column: 2;
        grid-row: 2;

        border-radius: 18px;
    }


    .zelmor-gallery-move__media[data-image-count="2"] {
        grid-template-columns: 1fr;

        grid-template-rows:
            330px
            220px;

        min-height: 558px;
    }


    .zelmor-gallery-move__media[data-image-count="2"]
    .zelmor-gallery-move__figure--feature {
        grid-column: 1;
        grid-row: 1;
    }


    .zelmor-gallery-move__media[data-image-count="2"]
    .zelmor-gallery-move__figure--secondary {
        grid-column: 1;
        grid-row: 2;

        border-radius: 20px;
    }


    .zelmor-gallery-move__media[data-image-count="1"] {
        min-height: 430px;
    }


    .zelmor-gallery-move__media[data-image-count="1"]
    .zelmor-gallery-move__figure {
        min-height: 430px;

        border-radius:
            22px
            49px
            22px
            22px;
    }


    .zelmor-gallery-move__media-label {
        top: 13px;
        left: 13px;

        min-width: 145px;

        padding:
            12px
            14px;
    }


    .zelmor-gallery-move__image-number {
        left: 11px;
        bottom: 11px;
    }


    .zelmor-gallery-move__expand {
        top: 11px;
        right: 11px;

        width: 40px;
        height: 40px;
    }


    .zelmor-gallery-move__content-grid {
        grid-template-columns: 1fr;

        gap: 11px;
    }


    .zelmor-gallery-move__story,
    .zelmor-gallery-move__scope {
        padding:
            22px
            17px;

        border-radius:
            22px
            22px
            44px
            22px;
    }


    .zelmor-gallery-move__story h3,
    .zelmor-gallery-move__scope-header h3 {
        font-size:
            clamp(
                2rem,
                9vw,
                2.5rem
            );
    }


    .zelmor-gallery-move__story > p,
    .zelmor-gallery-move__mode p,
    .zelmor-gallery-move__scope-list p {
        font-size: 1rem;
    }


    .zelmor-gallery-move__scope-list {
        grid-template-columns: 1fr;
    }


    .zelmor-gallery-move__scope-list li:nth-last-child(-n + 2) {
        border-bottom: 0;
    }


    .zelmor-gallery-move__scope-list li:last-child {
        border-bottom:
            1px solid
            rgba(var(--zelmor-white-rgb), 0.09);
    }


    .zelmor-gallery-move__scope-actions {
        grid-template-columns: 1fr;

        align-items: start;
    }


    .zelmor-gallery-move__cta {
        width: 100%;
    }


    .zelmor-gallery-move__bottom {
        margin-top: 28px;

        padding-top: 21px;
    }


    .zelmor-gallery-move__background-number,
    .zelmor-gallery-move__spark--two {
        display: none;
    }

}


/* =========================================================
   28. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .zelmor-gallery-move__image-button img,
    .zelmor-gallery-move__expand,
    .zelmor-gallery-move__cta,
    .zelmor-gallery-move__cta-icon,
    .zelmor-gallery-move__phone strong,
    .zelmor-gallery-move__bottom > a,
    .zelmor-gallery-move
    [data-zelmor-move-reveal] {
        transition: none !important;
    }


    .zelmor-gallery-move.is-motion-ready
    [data-zelmor-move-reveal] {
        opacity: 1 !important;

        transform: none !important;
    }

}








































/* =========================================================
   ZELMOR HOUSE CLEANING
   09. SMALL OFFICE CLEANING
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.zelmor-gallery-office {
    position: relative;

    overflow: hidden;

    background-color: var(--zelmor-white);
}


/* =========================================================
   02. DECORATIVE SYSTEM
   ========================================================= */

.zelmor-gallery-office__decor {
    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.zelmor-gallery-office__line {
    position: absolute;

    background:
        rgba(var(--zelmor-navy-rgb), 0.055);
}


.zelmor-gallery-office__line--one {
    top: 0;
    left: 11%;

    width: 1px;
    height: 100%;
}


.zelmor-gallery-office__line--two {
    top: 0;
    right: 11%;

    width: 1px;
    height: 100%;
}


.zelmor-gallery-office__square {
    position: absolute;

    border:
        1px solid
        rgba(var(--zelmor-aqua-rgb), 0.12);
}


.zelmor-gallery-office__square--one {
    top: 9%;
    right: 5%;

    width: 145px;
    height: 145px;

    transform: rotate(8deg);
}


.zelmor-gallery-office__square--two {
    left: 3%;
    bottom: 12%;

    width: 110px;
    height: 110px;

    border-color:
        rgba(var(--zelmor-pink-rgb), 0.1);

    transform: rotate(-7deg);
}


.zelmor-gallery-office__background-number {
    position: absolute;

    right: 2%;
    bottom: -80px;

    color:
        rgba(var(--zelmor-navy-rgb), 0.024);

    font-family: var(--zelmor-font-heading);

    font-size:
        clamp(
            15rem,
            27vw,
            27rem
        );

    line-height: 1;

    user-select: none;
}


/* =========================================================
   03. HEADER
   ========================================================= */

.zelmor-gallery-office__header {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(330px, 0.58fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 45px;

    padding-bottom: 35px;

    border-bottom:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.1);
}


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

.zelmor-gallery-office__eyebrow {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 16px;

    color: var(--zelmor-aqua);

    font-size: 0.96rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.4;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


.zelmor-gallery-office__eyebrow-number {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 8px;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua);

    font-size: 0.84rem;
    font-weight: var(--zelmor-weight-extrabold);
}


.zelmor-gallery-office__eyebrow-line {
    width: 30px;
    height: 1px;

    background:
        rgba(var(--zelmor-navy-rgb), 0.2);
}


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

.zelmor-gallery-office__heading h2 {
    max-width: 800px;

    margin: 0;

    color: var(--zelmor-navy-950);

    font-size:
        clamp(
            3.35rem,
            5.2vw,
            5.65rem
        );

    line-height: 0.96;

    letter-spacing: -0.045em;
}


.zelmor-gallery-office__heading h2 span {
    display: block;

    color: var(--zelmor-pink-600);
}


/* =========================================================
   06. HEADER SIDE
   ========================================================= */

.zelmor-gallery-office__header-side {
    max-width: 500px;
}


.zelmor-gallery-office__header-side p {
    margin:
        0
        0
        17px;

    color: var(--zelmor-slate);

    font-size: 1.05rem;

    line-height: 1.68;
}


.zelmor-gallery-office__header-link {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    min-height: 40px;

    color: var(--zelmor-navy-950);

    font-size: 1rem;
    font-weight: var(--zelmor-weight-bold);

    transition:
        color var(--zelmor-transition),
        gap var(--zelmor-transition);
}


.zelmor-gallery-office__header-link:hover {
    gap: 14px;

    color: var(--zelmor-pink-600);
}


/* =========================================================
   07. EXPERIENCE LAYOUT
   ========================================================= */

.zelmor-gallery-office__experience {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(310px, 0.52fr)
        minmax(0, 1.48fr);

    align-items: stretch;

    gap: 14px;
}


/* =========================================================
   08. INFO
   ========================================================= */

.zelmor-gallery-office__info {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 29px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.1);

    border-radius:
        22px
        22px
        58px
        22px;

    color: var(--zelmor-white);

    background-color: var(--zelmor-navy-950);

    box-shadow:
        0 22px 56px
        rgba(var(--zelmor-navy-rgb), 0.15);
}


/* =========================================================
   09. INFO TOP
   ========================================================= */

.zelmor-gallery-office__info-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 35px;
}


.zelmor-gallery-office__info-kicker {
    color: var(--zelmor-aqua);

    font-size: 0.92rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.4;

    letter-spacing: 0.045em;

    text-transform: uppercase;
}


.zelmor-gallery-office__info-icon {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    flex: 0 0 auto;

    border-radius: 11px;

    color: var(--zelmor-pink-100);

    background:
        rgba(var(--zelmor-pink-rgb), 0.12);
}


/* =========================================================
   10. INFO TYPOGRAPHY
   ========================================================= */

.zelmor-gallery-office__info h3 {
    margin:
        0
        0
        17px;

    color: var(--zelmor-white);

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

    line-height: 1.03;

    letter-spacing: -0.025em;
}


.zelmor-gallery-office__info-copy {
    margin:
        0
        0
        27px;

    color:
        rgba(var(--zelmor-white-rgb), 0.68);

    font-size: 1rem;

    line-height: 1.66;
}


/* =========================================================
   11. DETAILS
   ========================================================= */

.zelmor-gallery-office__details {
    display: flex;
    flex-direction: column;

    margin-bottom: 28px;
}


.zelmor-gallery-office__detail {
    display: grid;

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

    align-items: start;

    gap: 12px;

    padding-block: 15px;

    border-top:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.09);
}


.zelmor-gallery-office__detail:last-child {
    border-bottom:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.09);
}


.zelmor-gallery-office__detail-number {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    border-radius: 8px;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua);

    font-size: 0.82rem;
    font-weight: var(--zelmor-weight-extrabold);
}


.zelmor-gallery-office__detail:nth-child(2)
.zelmor-gallery-office__detail-number {
    background-color: var(--zelmor-pink-100);
}


.zelmor-gallery-office__detail:nth-child(3)
.zelmor-gallery-office__detail-number {
    color: var(--zelmor-white);

    background-color: var(--zelmor-pink-600);
}


.zelmor-gallery-office__detail strong {
    display: block;

    margin-bottom: 3px;

    color: var(--zelmor-white);

    font-size: 1rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.4;
}


.zelmor-gallery-office__detail p {
    margin: 0;

    color:
        rgba(var(--zelmor-white-rgb), 0.6);

    font-size: 1rem;

    line-height: 1.55;
}


/* =========================================================
   12. ACTIONS
   ========================================================= */

.zelmor-gallery-office__actions {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 16px;

    margin-top: auto;
}


/* =========================================================
   13. CTA
   ========================================================= */

.zelmor-gallery-office__cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    width: 100%;
    min-height: 57px;

    padding:
        7px
        7px
        7px
        19px;

    border-radius: var(--zelmor-radius-pill);

    color: var(--zelmor-white);

    background-color: var(--zelmor-pink-600);

    box-shadow:
        0 14px 34px
        rgba(var(--zelmor-pink-rgb), 0.22);

    font-size: 0.97rem;
    font-weight: var(--zelmor-weight-bold);

    transition:
        color var(--zelmor-transition),
        background-color var(--zelmor-transition);
}


.zelmor-gallery-office__cta:hover {
    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua);
}


.zelmor-gallery-office__cta-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    flex: 0 0 auto;

    border-radius: 50%;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-white);

    transition:
        transform var(--zelmor-transition);
}


.zelmor-gallery-office__cta:hover
.zelmor-gallery-office__cta-icon {
    transform: rotate(7deg);
}


.zelmor-gallery-office__cta-icon svg {
    width: 18px;
    height: 18px;
}


/* =========================================================
   14. PHONE
   ========================================================= */

.zelmor-gallery-office__phone {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.zelmor-gallery-office__phone span {
    color:
        rgba(var(--zelmor-white-rgb), 0.56);

    font-size: 0.94rem;
}


.zelmor-gallery-office__phone strong {
    color: var(--zelmor-pink-100);

    font-size: 1rem;
    font-weight: var(--zelmor-weight-bold);

    transition:
        color var(--zelmor-transition);
}


.zelmor-gallery-office__phone:hover strong {
    color: var(--zelmor-aqua);
}


/* =========================================================
   15. MEDIA
   ========================================================= */

.zelmor-gallery-office__media {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(220px, 0.65fr);

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

    gap: 9px;

    min-width: 0;

    min-height: 675px;
}


/* =========================================================
   16. FIGURES
   ========================================================= */

.zelmor-gallery-office__figure {
    position: relative;

    min-width: 0;

    margin: 0;

    overflow: hidden;

    border-radius: 17px;

    background-color: var(--zelmor-silver-light);

    box-shadow:
        0 17px 44px
        rgba(var(--zelmor-navy-rgb), 0.1);
}


.zelmor-gallery-office__figure--main {
    grid-column: 1;
    grid-row: 1 / 3;

    border-radius:
        20px
        20px
        20px
        55px;
}


.zelmor-gallery-office__figure--secondary {
    grid-column: 2;
    grid-row: 1;

    border-radius:
        17px
        42px
        17px
        17px;
}


.zelmor-gallery-office__figure--tertiary {
    grid-column: 2;
    grid-row: 2;

    border-radius: 17px;
}


/* =========================================================
   17. IMAGE BUTTON
   ========================================================= */

.zelmor-gallery-office__image-button {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    padding: 0;

    overflow: hidden;

    border: 0;

    color: var(--zelmor-white);

    background: transparent;

    cursor: zoom-in;
}


.zelmor-gallery-office__image-button img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 760ms var(--zelmor-ease);
}


.zelmor-gallery-office__image-button:hover img {
    transform: scale(1.035);
}


/* =========================================================
   18. IMAGE OVERLAY
   ========================================================= */

.zelmor-gallery-office__image-overlay {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(var(--zelmor-navy-rgb), 0.02) 35%,
            rgba(var(--zelmor-navy-rgb), 0.5) 100%
        );
}


/* =========================================================
   19. IMAGE NUMBER
   ========================================================= */

.zelmor-gallery-office__image-number {
    position: absolute;

    left: 14px;
    bottom: 14px;

    display: grid;
    place-items: center;

    width: 39px;
    height: 39px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.17);

    border-radius: 10px;

    color: var(--zelmor-white);

    background:
        rgba(var(--zelmor-navy-rgb), 0.6);

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

    font-size: 0.88rem;
    font-weight: var(--zelmor-weight-bold);
}


/* =========================================================
   20. EXPAND
   ========================================================= */

.zelmor-gallery-office__expand {
    position: absolute;

    top: 14px;
    right: 14px;

    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.17);

    border-radius: 11px;

    color: var(--zelmor-white);

    background:
        rgba(var(--zelmor-navy-rgb), 0.59);

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

    transition:
        color var(--zelmor-transition),
        background-color var(--zelmor-transition),
        transform var(--zelmor-transition);
}


.zelmor-gallery-office__expand svg {
    width: 19px;
    height: 19px;
}


.zelmor-gallery-office__image-button:hover
.zelmor-gallery-office__expand {
    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua);

    transform: scale(1.05);
}


/* =========================================================
   21. MEDIA LABEL
   ========================================================= */

.zelmor-gallery-office__media-label {
    position: absolute;

    z-index: 4;

    right: 22px;
    bottom: 22px;

    display: flex;
    flex-direction: column;

    min-width: 150px;

    padding:
        14px
        16px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.12);

    border-radius: 14px;

    color: var(--zelmor-white);

    background:
        rgba(var(--zelmor-navy-rgb), 0.92);

    box-shadow:
        0 17px 40px
        rgba(var(--zelmor-navy-rgb), 0.18);

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


.zelmor-gallery-office__media-label > span {
    color: var(--zelmor-aqua);

    font-size: 0.88rem;
    font-weight: var(--zelmor-weight-bold);

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


.zelmor-gallery-office__media-label strong {
    margin-block: 2px;

    color: var(--zelmor-white);

    font-family: var(--zelmor-font-heading);

    font-size: 1.72rem;
    font-weight: var(--zelmor-weight-regular);

    line-height: 1;
}


.zelmor-gallery-office__media-label small {
    color:
        rgba(var(--zelmor-white-rgb), 0.62);

    font-size: 0.9rem;
}


/* =========================================================
   22. TWO IMAGES
   ========================================================= */

.zelmor-gallery-office__media[data-image-count="2"] {
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(0, 0.65fr);

    grid-template-rows: 1fr;
}


.zelmor-gallery-office__media[data-image-count="2"]
.zelmor-gallery-office__figure--main {
    grid-column: 1;
    grid-row: 1;

    border-radius:
        20px
        20px
        20px
        55px;
}


.zelmor-gallery-office__media[data-image-count="2"]
.zelmor-gallery-office__figure--secondary {
    grid-column: 2;
    grid-row: 1;

    border-radius:
        20px
        50px
        20px
        20px;
}


/* =========================================================
   23. ONE IMAGE
   ========================================================= */

.zelmor-gallery-office__media[data-image-count="1"] {
    display: block;

    min-height: 675px;
}


.zelmor-gallery-office__media[data-image-count="1"]
.zelmor-gallery-office__figure {
    width: 100%;
    min-height: 675px;

    border-radius:
        22px
        60px
        22px
        22px;
}


/* =========================================================
   24. BOTTOM STRIP
   ========================================================= */

.zelmor-gallery-office__bottom {
    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: center;

    gap: 50px;

    margin-top: 34px;

    padding:
        25px
        0
        0;

    border-top:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.09);
}


.zelmor-gallery-office__bottom-copy > span {
    display: block;

    margin-bottom: 4px;

    color: var(--zelmor-aqua);

    font-size: 0.92rem;
    font-weight: var(--zelmor-weight-bold);

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


.zelmor-gallery-office__bottom-copy p {
    max-width: 580px;

    margin: 0;

    color: var(--zelmor-slate);

    font-size: 1rem;

    line-height: 1.58;
}


.zelmor-gallery-office__bottom-next {
    display: flex;
    flex-direction: column;

    align-items: flex-end;

    gap: 4px;
}


.zelmor-gallery-office__bottom-next > span {
    color: var(--zelmor-slate);

    font-size: 0.94rem;
}


.zelmor-gallery-office__bottom-next a {
    display: flex;
    align-items: center;

    gap: 12px;

    color: var(--zelmor-navy-950);

    font-size: 1rem;

    transition:
        gap var(--zelmor-transition),
        color var(--zelmor-transition);
}


.zelmor-gallery-office__bottom-next a:hover {
    gap: 17px;

    color: var(--zelmor-pink-600);
}


.zelmor-gallery-office__bottom-next strong {
    font-weight: var(--zelmor-weight-bold);
}


.zelmor-gallery-office__bottom-arrow {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    border-radius: 10px;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua-soft);
}


/* =========================================================
   25. REVEALS
   ========================================================= */

.zelmor-gallery-office.is-motion-ready
[data-zelmor-office-reveal] {
    opacity: 0;

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

    transition:
        opacity 720ms var(--zelmor-ease),
        transform 720ms var(--zelmor-ease);
}


.zelmor-gallery-office.is-motion-ready
[data-zelmor-office-reveal="info"] {
    transform:
        translate3d(
            -20px,
            18px,
            0
        );
}


.zelmor-gallery-office.is-motion-ready
[data-zelmor-office-reveal="media"] {
    transform:
        translate3d(
            22px,
            18px,
            0
        );
}


.zelmor-gallery-office.is-motion-ready
[data-zelmor-office-reveal].is-visible {
    opacity: 1;

    transform: none;
}


/* =========================================================
   26. RESPONSIVE
   ========================================================= */

@media (min-width: 1200px) {

    .zelmor-gallery-office__experience {
        grid-template-columns:
            minmax(320px, 0.5fr)
            minmax(0, 1.5fr);
    }


    .zelmor-gallery-office__media {
        min-height: 700px;
    }


    .zelmor-gallery-office__media[data-image-count="1"],
    .zelmor-gallery-office__media[data-image-count="1"]
    .zelmor-gallery-office__figure {
        min-height: 700px;
    }

}


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

    .zelmor-gallery-office__header {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(280px, 0.75fr);

        gap: 42px;
    }


    .zelmor-gallery-office__heading h2 {
        font-size:
            clamp(
                2.9rem,
                5vw,
                4.3rem
            );
    }


    .zelmor-gallery-office__experience {
        grid-template-columns:
            minmax(260px, 0.65fr)
            minmax(0, 1.35fr);

        gap: 12px;
    }


    .zelmor-gallery-office__info {
        padding: 24px;
    }


    .zelmor-gallery-office__media {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(180px, 0.8fr);

        min-height: 590px;
    }


    .zelmor-gallery-office__media[data-image-count="1"],
    .zelmor-gallery-office__media[data-image-count="1"]
    .zelmor-gallery-office__figure {
        min-height: 590px;
    }

}


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

    .zelmor-gallery-office__header {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-bottom: 32px;

        padding-bottom: 27px;
    }


    .zelmor-gallery-office__heading h2 {
        max-width: 650px;

        font-size:
            clamp(
                2.8rem,
                10vw,
                4rem
            );
    }


    .zelmor-gallery-office__header-side {
        max-width: 620px;
    }


    .zelmor-gallery-office__experience {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .zelmor-gallery-office__info {
        padding: 26px;
    }


    .zelmor-gallery-office__details {
        display: grid;

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

        gap: 8px;
    }


    .zelmor-gallery-office__detail {
        display: block;

        padding: 15px;

        border:
            1px solid
            rgba(var(--zelmor-white-rgb), 0.08);

        border-radius: 13px;
    }


    .zelmor-gallery-office__detail:last-child {
        border-bottom:
            1px solid
            rgba(var(--zelmor-white-rgb), 0.08);
    }


    .zelmor-gallery-office__detail-number {
        margin-bottom: 12px;
    }


    .zelmor-gallery-office__media {
        min-height: 520px;
    }


    .zelmor-gallery-office__media[data-image-count="1"],
    .zelmor-gallery-office__media[data-image-count="1"]
    .zelmor-gallery-office__figure {
        min-height: 520px;
    }


    .zelmor-gallery-office__bottom {
        gap: 30px;
    }

}


@media (max-width: 480px) {

    .zelmor-gallery-office__header {
        grid-template-columns: 1fr;

        gap: 18px;

        margin-bottom: 28px;

        padding-bottom: 24px;
    }


    .zelmor-gallery-office__eyebrow {
        font-size: 0.9rem;
    }


    .zelmor-gallery-office__heading h2 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.4rem
            );

        line-height: 1;
    }


    .zelmor-gallery-office__header-side p {
        font-size: 1rem;

        line-height: 1.62;
    }


    .zelmor-gallery-office__experience {
        grid-template-columns: 1fr;

        gap: 11px;
    }


    .zelmor-gallery-office__info {
        padding:
            22px
            17px;

        border-radius:
            20px
            20px
            42px
            20px;
    }


    .zelmor-gallery-office__info h3 {
        font-size:
            clamp(
                2rem,
                9vw,
                2.5rem
            );
    }


    .zelmor-gallery-office__info-copy,
    .zelmor-gallery-office__detail p {
        font-size: 1rem;
    }


    .zelmor-gallery-office__media {
        display: grid;

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

        grid-template-rows:
            330px
            190px;

        gap: 7px;

        min-height: 0;
    }


    .zelmor-gallery-office__figure--main {
        grid-column: 1 / -1;
        grid-row: 1;

        border-radius:
            18px
            42px
            18px
            18px;
    }


    .zelmor-gallery-office__figure--secondary {
        grid-column: 1;
        grid-row: 2;

        border-radius: 15px;
    }


    .zelmor-gallery-office__figure--tertiary {
        grid-column: 2;
        grid-row: 2;

        border-radius: 15px;
    }


    .zelmor-gallery-office__media[data-image-count="2"] {
        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows:
            330px
            220px;

        min-height: 0;
    }


    .zelmor-gallery-office__media[data-image-count="2"]
    .zelmor-gallery-office__figure--main {
        grid-column: 1;
        grid-row: 1;
    }


    .zelmor-gallery-office__media[data-image-count="2"]
    .zelmor-gallery-office__figure--secondary {
        grid-column: 1;
        grid-row: 2;

        border-radius: 17px;
    }


    .zelmor-gallery-office__media[data-image-count="1"] {
        display: block;

        min-height: 430px;
    }


    .zelmor-gallery-office__media[data-image-count="1"]
    .zelmor-gallery-office__figure {
        min-height: 430px;

        border-radius:
            19px
            45px
            19px
            19px;
    }


    .zelmor-gallery-office__media-label {
        right: 12px;
        bottom: 12px;

        min-width: 135px;

        padding:
            12px
            14px;
    }


    .zelmor-gallery-office__image-number {
        left: 10px;
        bottom: 10px;
    }


    .zelmor-gallery-office__expand {
        top: 10px;
        right: 10px;

        width: 40px;
        height: 40px;
    }


    .zelmor-gallery-office__bottom {
        grid-template-columns: 1fr;

        gap: 22px;

        margin-top: 28px;

        padding-top: 21px;
    }


    .zelmor-gallery-office__bottom-next {
        align-items: flex-start;
    }


    .zelmor-gallery-office__background-number,
    .zelmor-gallery-office__square--two {
        display: none;
    }

}


@media (prefers-reduced-motion: reduce) {

    .zelmor-gallery-office__header-link,
    .zelmor-gallery-office__image-button img,
    .zelmor-gallery-office__expand,
    .zelmor-gallery-office__cta,
    .zelmor-gallery-office__cta-icon,
    .zelmor-gallery-office__phone strong,
    .zelmor-gallery-office__bottom-next a,
    .zelmor-gallery-office
    [data-zelmor-office-reveal] {
        transition: none !important;
    }


    .zelmor-gallery-office.is-motion-ready
    [data-zelmor-office-reveal] {
        opacity: 1 !important;

        transform: none !important;
    }

}






































/* =========================================================
   ZELMOR HOUSE CLEANING
   10. CUSTOMIZED CLEANING
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.zelmor-gallery-customized {
    position: relative;

    overflow: hidden;

    background-color: var(--zelmor-warm-white);
}


/* =========================================================
   02. DECOR
   ========================================================= */

.zelmor-gallery-customized__decor {
    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


.zelmor-gallery-customized__orb {
    position: absolute;

    border-radius: 50%;
}


.zelmor-gallery-customized__orb--pink {
    top: -290px;
    left: -260px;

    width: 600px;
    height: 600px;

    background:
        rgba(var(--zelmor-pink-rgb), 0.045);
}


.zelmor-gallery-customized__orb--aqua {
    right: -260px;
    bottom: -310px;

    width: 590px;
    height: 590px;

    border:
        1px solid
        rgba(var(--zelmor-aqua-rgb), 0.13);

    box-shadow:
        0 0 0 44px
        rgba(var(--zelmor-aqua-rgb), 0.015),
        0 0 0 90px
        rgba(var(--zelmor-aqua-rgb), 0.008);
}


.zelmor-gallery-customized__curve {
    position: absolute;

    border:
        1px solid
        rgba(var(--zelmor-pink-rgb), 0.11);

    border-radius: 50%;
}


.zelmor-gallery-customized__curve--one {
    top: 27%;
    right: -160px;

    width: 430px;
    height: 620px;

    transform: rotate(21deg);
}


.zelmor-gallery-customized__curve--two {
    left: -120px;
    bottom: 22%;

    width: 330px;
    height: 480px;

    border-color:
        rgba(var(--zelmor-aqua-rgb), 0.11);

    transform: rotate(-17deg);
}


.zelmor-gallery-customized__spark {
    position: absolute;

    font-size: 1.4rem;
}


.zelmor-gallery-customized__spark--one {
    top: 13%;
    right: 6%;

    color:
        rgba(var(--zelmor-pink-rgb), 0.5);
}


.zelmor-gallery-customized__spark--two {
    left: 5%;
    bottom: 16%;

    color:
        rgba(var(--zelmor-aqua-rgb), 0.6);
}


.zelmor-gallery-customized__background-number {
    position: absolute;

    right: 1%;
    bottom: -85px;

    color:
        rgba(var(--zelmor-navy-rgb), 0.023);

    font-family: var(--zelmor-font-heading);

    font-size:
        clamp(
            15rem,
            27vw,
            27rem
        );

    line-height: 1;

    user-select: none;
}


/* =========================================================
   03. HEADER
   ========================================================= */

.zelmor-gallery-customized__header {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(330px, 0.6fr);

    align-items: end;

    gap: 70px;

    margin-bottom: 46px;

    padding-bottom: 35px;

    border-bottom:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.09);
}


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

.zelmor-gallery-customized__eyebrow {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 16px;

    color: var(--zelmor-pink-600);

    font-size: 0.96rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.4;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}


.zelmor-gallery-customized__eyebrow-number {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    color: var(--zelmor-white);

    background-color: var(--zelmor-pink-600);

    font-size: 0.84rem;
    font-weight: var(--zelmor-weight-extrabold);
}


.zelmor-gallery-customized__eyebrow-line {
    width: 30px;
    height: 1px;

    background:
        rgba(var(--zelmor-navy-rgb), 0.2);
}


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

.zelmor-gallery-customized__heading h2 {
    max-width: 820px;

    margin: 0;

    color: var(--zelmor-navy-950);

    font-size:
        clamp(
            3.35rem,
            5.3vw,
            5.75rem
        );

    line-height: 0.96;

    letter-spacing: -0.045em;
}


.zelmor-gallery-customized__heading h2 span {
    display: block;

    color: var(--zelmor-pink-600);
}


/* =========================================================
   06. HEADER COPY
   ========================================================= */

.zelmor-gallery-customized__header-copy {
    max-width: 500px;
}


.zelmor-gallery-customized__header-copy p {
    margin: 0;

    color: var(--zelmor-slate);

    font-size: 1.05rem;

    line-height: 1.68;
}


/* =========================================================
   07. MEDIA CANVAS
   ========================================================= */

.zelmor-gallery-customized__media {
    position: relative;

    z-index: 2;

    display: grid;

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

    grid-template-rows:
        repeat(10, 62px);

    gap: 0;

    min-height: 620px;

    margin-bottom: 18px;
}


/* =========================================================
   08. FIGURES
   ========================================================= */

.zelmor-gallery-customized__figure {
    position: relative;

    min-width: 0;

    margin: 0;

    overflow: hidden;

    background-color: var(--zelmor-silver-light);

    box-shadow:
        0 22px 56px
        rgba(var(--zelmor-navy-rgb), 0.13);
}


.zelmor-gallery-customized__figure--main {
    grid-column: 4 / 13;
    grid-row: 1 / 10;

    z-index: 1;

    border-radius:
        34px
        90px
        34px
        34px;
}


.zelmor-gallery-customized__figure--secondary {
    grid-column: 1 / 5;
    grid-row: 2 / 6;

    z-index: 3;

    border:
        8px solid
        var(--zelmor-warm-white);

    border-radius:
        60px
        24px
        24px
        24px;
}


.zelmor-gallery-customized__figure--tertiary {
    grid-column: 2 / 6;
    grid-row: 6 / 10;

    z-index: 4;

    border:
        8px solid
        var(--zelmor-warm-white);

    border-radius:
        24px
        24px
        60px
        24px;
}


/* =========================================================
   09. IMAGE BUTTON
   ========================================================= */

.zelmor-gallery-customized__image-button {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    padding: 0;

    overflow: hidden;

    border: 0;

    color: var(--zelmor-white);

    background: transparent;

    cursor: zoom-in;
}


.zelmor-gallery-customized__image-button img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 760ms var(--zelmor-ease);
}


.zelmor-gallery-customized__image-button:hover img {
    transform: scale(1.035);
}


/* =========================================================
   10. IMAGE OVERLAY
   ========================================================= */

.zelmor-gallery-customized__image-overlay {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(var(--zelmor-navy-rgb), 0.01) 35%,
            rgba(var(--zelmor-navy-rgb), 0.49) 100%
        );
}


/* =========================================================
   11. IMAGE NUMBER
   ========================================================= */

.zelmor-gallery-customized__image-number {
    position: absolute;

    left: 15px;
    bottom: 15px;

    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.18);

    border-radius: 50%;

    color: var(--zelmor-white);

    background:
        rgba(var(--zelmor-navy-rgb), 0.58);

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

    font-size: 0.88rem;
    font-weight: var(--zelmor-weight-bold);
}


/* =========================================================
   12. EXPAND
   ========================================================= */

.zelmor-gallery-customized__expand {
    position: absolute;

    top: 15px;
    right: 15px;

    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.18);

    border-radius: 50%;

    color: var(--zelmor-white);

    background:
        rgba(var(--zelmor-navy-rgb), 0.58);

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

    transition:
        color var(--zelmor-transition),
        background-color var(--zelmor-transition),
        transform var(--zelmor-transition);
}


.zelmor-gallery-customized__expand svg {
    width: 19px;
    height: 19px;
}


.zelmor-gallery-customized__image-button:hover
.zelmor-gallery-customized__expand {
    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua);

    transform: scale(1.05);
}


/* =========================================================
   13. FLOATING WORDS
   ========================================================= */

.zelmor-gallery-customized__word {
    position: absolute;

    z-index: 6;

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

    min-height: 39px;

    padding-inline: 15px;

    border:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.08);

    border-radius: var(--zelmor-radius-pill);

    color: var(--zelmor-navy-950);

    background:
        rgba(var(--zelmor-white-rgb), 0.93);

    box-shadow:
        0 12px 30px
        rgba(var(--zelmor-navy-rgb), 0.09);

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

    font-size: 0.94rem;
    font-weight: var(--zelmor-weight-bold);
}


.zelmor-gallery-customized__word--home {
    top: 8%;
    right: 5%;
}


.zelmor-gallery-customized__word--priorities {
    top: 49%;
    right: 3%;

    color: var(--zelmor-white);

    border-color:
        rgba(var(--zelmor-pink-rgb), 0.2);

    background:
        rgba(var(--zelmor-pink-rgb), 0.93);
}


.zelmor-gallery-customized__word--routine {
    right: 12%;
    bottom: 7%;

    background:
        rgba(var(--zelmor-aqua-rgb), 0.94);
}


/* =========================================================
   14. MEDIA LABEL
   ========================================================= */

.zelmor-gallery-customized__media-label {
    position: absolute;

    z-index: 7;

    left: 30%;
    bottom: 5%;

    display: flex;
    flex-direction: column;

    min-width: 165px;

    padding:
        15px
        17px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.12);

    border-radius: 18px;

    color: var(--zelmor-white);

    background:
        rgba(var(--zelmor-navy-rgb), 0.93);

    box-shadow:
        0 18px 45px
        rgba(var(--zelmor-navy-rgb), 0.2);

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


.zelmor-gallery-customized__media-label > span {
    color: var(--zelmor-aqua);

    font-size: 0.88rem;
    font-weight: var(--zelmor-weight-bold);

    letter-spacing: 0.045em;

    text-transform: uppercase;
}


.zelmor-gallery-customized__media-label strong {
    margin-block: 2px;

    color: var(--zelmor-white);

    font-family: var(--zelmor-font-heading);

    font-size: 1.78rem;
    font-weight: var(--zelmor-weight-regular);

    line-height: 1;
}


.zelmor-gallery-customized__media-label small {
    color:
        rgba(var(--zelmor-white-rgb), 0.62);

    font-size: 0.9rem;
}


/* =========================================================
   15. TWO IMAGES
   ========================================================= */

.zelmor-gallery-customized__media[data-image-count="2"] {
    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(0, 0.7fr);

    grid-template-rows: minmax(560px, 1fr);

    gap: 12px;

    min-height: 560px;
}


.zelmor-gallery-customized__media[data-image-count="2"]
.zelmor-gallery-customized__figure--main {
    grid-column: 1;
    grid-row: 1;

    border-radius:
        30px
        30px
        30px
        72px;
}


.zelmor-gallery-customized__media[data-image-count="2"]
.zelmor-gallery-customized__figure--secondary {
    grid-column: 2;
    grid-row: 1;

    border: 0;

    border-radius:
        30px
        72px
        30px
        30px;
}


/* =========================================================
   16. ONE IMAGE
   ========================================================= */

.zelmor-gallery-customized__media[data-image-count="1"] {
    display: block;

    min-height: 590px;
}


.zelmor-gallery-customized__media[data-image-count="1"]
.zelmor-gallery-customized__figure {
    width: 100%;
    min-height: 590px;

    border: 0;

    border-radius:
        32px
        85px
        32px
        32px;
}


/* =========================================================
   17. CONTENT
   ========================================================= */

.zelmor-gallery-customized__content {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.78fr)
        minmax(0, 1.22fr);

    align-items: stretch;

    gap: 14px;
}


/* =========================================================
   18. STORY
   ========================================================= */

.zelmor-gallery-customized__story {
    padding: 30px;

    border:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.08);

    border-radius:
        28px
        28px
        60px
        28px;

    background-color: var(--zelmor-white);

    box-shadow:
        0 16px 42px
        rgba(var(--zelmor-navy-rgb), 0.065);
}


.zelmor-gallery-customized__story-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 31px;
}


.zelmor-gallery-customized__story-kicker {
    color: var(--zelmor-pink-600);

    font-size: 0.92rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.4;

    letter-spacing: 0.045em;

    text-transform: uppercase;
}


.zelmor-gallery-customized__story-star {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua-soft);
}


.zelmor-gallery-customized__story h3 {
    margin:
        0
        0
        17px;

    color: var(--zelmor-navy-950);

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

    line-height: 1.02;

    letter-spacing: -0.028em;
}


.zelmor-gallery-customized__story > p {
    margin:
        0
        0
        16px;

    color: var(--zelmor-slate);

    font-size: 1rem;

    line-height: 1.68;
}


.zelmor-gallery-customized__story > p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   19. PRIORITIES PANEL
   ========================================================= */

.zelmor-gallery-customized__priorities {
    display: flex;
    flex-direction: column;

    padding: 30px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.1);

    border-radius:
        28px
        28px
        62px
        28px;

    color: var(--zelmor-white);

    background-color: var(--zelmor-navy-950);

    box-shadow:
        0 22px 58px
        rgba(var(--zelmor-navy-rgb), 0.15);
}


.zelmor-gallery-customized__priorities-header {
    margin-bottom: 25px;
}


.zelmor-gallery-customized__priorities-header > span {
    display: block;

    margin-bottom: 5px;

    color: var(--zelmor-aqua);

    font-size: 0.92rem;
    font-weight: var(--zelmor-weight-bold);

    letter-spacing: 0.045em;

    text-transform: uppercase;
}


.zelmor-gallery-customized__priorities-header h3 {
    max-width: 580px;

    margin: 0;

    color: var(--zelmor-white);

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

    line-height: 1.02;

    letter-spacing: -0.025em;
}


/* =========================================================
   20. PRIORITY LIST
   ========================================================= */

.zelmor-gallery-customized__priority-list {
    display: grid;

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

    gap: 8px;

    margin-bottom: 28px;
}


.zelmor-gallery-customized__priority {
    min-width: 0;

    padding: 16px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.08);

    border-radius: 15px;

    background:
        rgba(var(--zelmor-white-rgb), 0.045);
}


.zelmor-gallery-customized__priority-number {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    margin-bottom: 16px;

    border-radius: 12px;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua);

    font-size: 0.82rem;
    font-weight: var(--zelmor-weight-extrabold);
}


.zelmor-gallery-customized__priority:nth-child(2)
.zelmor-gallery-customized__priority-number {
    background-color: var(--zelmor-pink-100);
}


.zelmor-gallery-customized__priority:nth-child(3)
.zelmor-gallery-customized__priority-number {
    color: var(--zelmor-white);

    background-color: var(--zelmor-pink-600);
}


.zelmor-gallery-customized__priority strong {
    display: block;

    margin-bottom: 5px;

    color: var(--zelmor-white);

    font-size: 1rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.4;
}


.zelmor-gallery-customized__priority p {
    margin: 0;

    color:
        rgba(var(--zelmor-white-rgb), 0.64);

    font-size: 1rem;

    line-height: 1.55;
}


/* =========================================================
   21. ACTIONS
   ========================================================= */

.zelmor-gallery-customized__actions {
    display: grid;

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

    align-items: center;

    gap: 20px;

    margin-top: auto;
}


/* =========================================================
   22. CTA
   ========================================================= */

.zelmor-gallery-customized__cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    min-height: 57px;

    padding:
        7px
        7px
        7px
        19px;

    border-radius: var(--zelmor-radius-pill);

    color: var(--zelmor-white);

    background-color: var(--zelmor-pink-600);

    box-shadow:
        0 14px 34px
        rgba(var(--zelmor-pink-rgb), 0.22);

    font-size: 0.97rem;
    font-weight: var(--zelmor-weight-bold);

    transition:
        color var(--zelmor-transition),
        background-color var(--zelmor-transition);
}


.zelmor-gallery-customized__cta:hover {
    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua);
}


.zelmor-gallery-customized__cta-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    flex: 0 0 auto;

    border-radius: 50%;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-white);

    transition:
        transform var(--zelmor-transition);
}


.zelmor-gallery-customized__cta:hover
.zelmor-gallery-customized__cta-icon {
    transform: rotate(7deg);
}


.zelmor-gallery-customized__cta-icon svg {
    width: 18px;
    height: 18px;
}


/* =========================================================
   23. PHONE
   ========================================================= */

.zelmor-gallery-customized__phone {
    display: flex;
    flex-direction: column;

    min-width: max-content;

    gap: 2px;
}


.zelmor-gallery-customized__phone span {
    color:
        rgba(var(--zelmor-white-rgb), 0.56);

    font-size: 0.94rem;
}


.zelmor-gallery-customized__phone strong {
    color: var(--zelmor-pink-100);

    font-size: 1rem;
    font-weight: var(--zelmor-weight-bold);

    transition:
        color var(--zelmor-transition);
}


.zelmor-gallery-customized__phone:hover strong {
    color: var(--zelmor-aqua);
}


/* =========================================================
   24. BOTTOM
   ========================================================= */

.zelmor-gallery-customized__bottom {
    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: center;

    gap: 35px;

    margin-top: 35px;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(var(--zelmor-navy-rgb), 0.09);
}


.zelmor-gallery-customized__bottom-copy > span {
    display: block;

    margin-bottom: 4px;

    color: var(--zelmor-pink-600);

    font-size: 0.92rem;
    font-weight: var(--zelmor-weight-bold);

    letter-spacing: 0.045em;

    text-transform: uppercase;
}


.zelmor-gallery-customized__bottom-copy p {
    margin: 0;

    color: var(--zelmor-slate);

    font-size: 1rem;

    line-height: 1.55;
}


/* =========================================================
   25. BACK LINK
   ========================================================= */

.zelmor-gallery-customized__back {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    color: var(--zelmor-navy-950);

    font-size: 1rem;
    font-weight: var(--zelmor-weight-bold);

    transition:
        color var(--zelmor-transition),
        gap var(--zelmor-transition);
}


.zelmor-gallery-customized__back:hover {
    gap: 16px;

    color: var(--zelmor-pink-600);
}


.zelmor-gallery-customized__back-icon {
    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-aqua-soft);
}


/* =========================================================
   26. REVEALS
   ========================================================= */

.zelmor-gallery-customized.is-motion-ready
[data-zelmor-customized-reveal] {
    opacity: 0;

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

    transition:
        opacity 720ms var(--zelmor-ease),
        transform 720ms var(--zelmor-ease);
}


.zelmor-gallery-customized.is-motion-ready
[data-zelmor-customized-reveal="media"] {
    transform:
        translate3d(
            0,
            32px,
            0
        );
}


.zelmor-gallery-customized.is-motion-ready
[data-zelmor-customized-reveal="story"] {
    transform:
        translate3d(
            -20px,
            18px,
            0
        );
}


.zelmor-gallery-customized.is-motion-ready
[data-zelmor-customized-reveal="priorities"] {
    transform:
        translate3d(
            20px,
            18px,
            0
        );
}


.zelmor-gallery-customized.is-motion-ready
[data-zelmor-customized-reveal].is-visible {
    opacity: 1;

    transform: none;
}


/* =========================================================
   27. RESPONSIVE
   EXACTLY FOUR PROJECT BREAKPOINTS
   ========================================================= */


@media (min-width: 1200px) {

    .zelmor-gallery-customized__media {
        grid-template-rows:
            repeat(10, 64px);

        min-height: 640px;
    }


    .zelmor-gallery-customized__content {
        grid-template-columns:
            minmax(350px, 0.72fr)
            minmax(0, 1.28fr);
    }

}


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

    .zelmor-gallery-customized__header {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(280px, 0.75fr);

        gap: 42px;
    }


    .zelmor-gallery-customized__heading h2 {
        font-size:
            clamp(
                2.9rem,
                5vw,
                4.3rem
            );
    }


    .zelmor-gallery-customized__media {
        grid-template-rows:
            repeat(10, 52px);

        min-height: 520px;
    }


    .zelmor-gallery-customized__figure--main {
        grid-column: 4 / 13;
    }


    .zelmor-gallery-customized__figure--secondary {
        grid-column: 1 / 5;
    }


    .zelmor-gallery-customized__figure--tertiary {
        grid-column: 2 / 6;
    }


    .zelmor-gallery-customized__media-label {
        left: 29%;
    }


    .zelmor-gallery-customized__content {
        grid-template-columns:
            minmax(280px, 0.75fr)
            minmax(0, 1.25fr);
    }


    .zelmor-gallery-customized__story,
    .zelmor-gallery-customized__priorities {
        padding: 24px;
    }


    .zelmor-gallery-customized__priority-list {
        grid-template-columns: 1fr;

        gap: 7px;
    }


    .zelmor-gallery-customized__priority {
        display: grid;

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

        gap: 11px;
    }


    .zelmor-gallery-customized__priority-number {
        margin-bottom: 0;
    }


    .zelmor-gallery-customized__actions {
        grid-template-columns: 1fr;

        align-items: start;
    }

}


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

    .zelmor-gallery-customized__header {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-bottom: 32px;

        padding-bottom: 27px;
    }


    .zelmor-gallery-customized__heading h2 {
        max-width: 670px;

        font-size:
            clamp(
                2.8rem,
                10vw,
                4rem
            );
    }


    .zelmor-gallery-customized__header-copy {
        max-width: 620px;
    }


    .zelmor-gallery-customized__media {
        grid-template-rows:
            repeat(10, 48px);

        min-height: 480px;
    }


    .zelmor-gallery-customized__figure--main {
        grid-column: 4 / 13;
    }


    .zelmor-gallery-customized__figure--secondary {
        grid-column: 1 / 6;

        border-width: 6px;
    }


    .zelmor-gallery-customized__figure--tertiary {
        grid-column: 2 / 7;

        border-width: 6px;
    }


    .zelmor-gallery-customized__word--home {
        right: 3%;
    }


    .zelmor-gallery-customized__word--priorities {
        right: 2%;
    }


    .zelmor-gallery-customized__word--routine {
        right: 5%;
    }


    .zelmor-gallery-customized__media-label {
        left: 31%;
        bottom: 4%;
    }


    .zelmor-gallery-customized__media[data-image-count="2"] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows: 440px;

        min-height: 440px;
    }


    .zelmor-gallery-customized__media[data-image-count="1"] {
        min-height: 500px;
    }


    .zelmor-gallery-customized__media[data-image-count="1"]
    .zelmor-gallery-customized__figure {
        min-height: 500px;
    }


    .zelmor-gallery-customized__content {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .zelmor-gallery-customized__story,
    .zelmor-gallery-customized__priorities {
        padding: 26px;
    }


    .zelmor-gallery-customized__priority-list {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 480px) {

    .zelmor-gallery-customized__header {
        grid-template-columns: 1fr;

        gap: 18px;

        margin-bottom: 28px;

        padding-bottom: 24px;
    }


    .zelmor-gallery-customized__eyebrow {
        font-size: 0.9rem;
    }


    .zelmor-gallery-customized__heading h2 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.4rem
            );

        line-height: 1;
    }


    .zelmor-gallery-customized__header-copy p {
        font-size: 1rem;

        line-height: 1.62;
    }


    .zelmor-gallery-customized__media {
        display: grid;

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

        grid-template-rows:
            330px
            190px;

        gap: 8px;

        min-height: 528px;
    }


    .zelmor-gallery-customized__figure--main {
        grid-column: 1 / -1;
        grid-row: 1;

        border: 0;

        border-radius:
            22px
            48px
            22px
            22px;
    }


    .zelmor-gallery-customized__figure--secondary {
        grid-column: 1;
        grid-row: 2;

        border: 0;

        border-radius: 18px;
    }


    .zelmor-gallery-customized__figure--tertiary {
        grid-column: 2;
        grid-row: 2;

        border: 0;

        border-radius: 18px;
    }


    .zelmor-gallery-customized__media[data-image-count="2"] {
        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows:
            330px
            220px;

        gap: 8px;

        min-height: 558px;
    }


    .zelmor-gallery-customized__media[data-image-count="2"]
    .zelmor-gallery-customized__figure--main {
        grid-column: 1;
        grid-row: 1;
    }


    .zelmor-gallery-customized__media[data-image-count="2"]
    .zelmor-gallery-customized__figure--secondary {
        grid-column: 1;
        grid-row: 2;

        border-radius: 20px;
    }


    .zelmor-gallery-customized__media[data-image-count="1"] {
        min-height: 430px;
    }


    .zelmor-gallery-customized__media[data-image-count="1"]
    .zelmor-gallery-customized__figure {
        min-height: 430px;

        border-radius:
            22px
            50px
            22px
            22px;
    }


    .zelmor-gallery-customized__word {
        display: none;
    }


    .zelmor-gallery-customized__media-label {
        left: 13px;
        bottom: 13px;

        min-width: 145px;

        padding:
            12px
            14px;
    }


    .zelmor-gallery-customized__image-number {
        left: 11px;
        bottom: 11px;
    }


    .zelmor-gallery-customized__expand {
        top: 11px;
        right: 11px;

        width: 40px;
        height: 40px;
    }


    .zelmor-gallery-customized__content {
        grid-template-columns: 1fr;

        gap: 11px;
    }


    .zelmor-gallery-customized__story,
    .zelmor-gallery-customized__priorities {
        padding:
            22px
            17px;

        border-radius:
            22px
            22px
            44px
            22px;
    }


    .zelmor-gallery-customized__story h3,
    .zelmor-gallery-customized__priorities-header h3 {
        font-size:
            clamp(
                2rem,
                9vw,
                2.5rem
            );
    }


    .zelmor-gallery-customized__story > p,
    .zelmor-gallery-customized__priority p {
        font-size: 1rem;
    }


    .zelmor-gallery-customized__priority-list {
        grid-template-columns: 1fr;

        gap: 7px;
    }


    .zelmor-gallery-customized__priority {
        display: grid;

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

        gap: 11px;
    }


    .zelmor-gallery-customized__priority-number {
        margin-bottom: 0;
    }


    .zelmor-gallery-customized__actions {
        grid-template-columns: 1fr;

        align-items: start;
    }


    .zelmor-gallery-customized__cta {
        width: 100%;
    }


    .zelmor-gallery-customized__bottom {
        grid-template-columns: 1fr;

        gap: 19px;

        margin-top: 28px;

        padding-top: 21px;
    }


    .zelmor-gallery-customized__background-number,
    .zelmor-gallery-customized__spark--two,
    .zelmor-gallery-customized__curve--two {
        display: none;
    }

}


/* =========================================================
   28. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .zelmor-gallery-customized__image-button img,
    .zelmor-gallery-customized__expand,
    .zelmor-gallery-customized__cta,
    .zelmor-gallery-customized__cta-icon,
    .zelmor-gallery-customized__phone strong,
    .zelmor-gallery-customized__back,
    .zelmor-gallery-customized
    [data-zelmor-customized-reveal] {
        transition: none !important;
    }


    .zelmor-gallery-customized.is-motion-ready
    [data-zelmor-customized-reveal] {
        opacity: 1 !important;

        transform: none !important;
    }

}










































/* =========================================================
   ZELMOR HOUSE CLEANING
   11. FULLSCREEN GALLERY VIEWER
   ========================================================= */


/* =========================================================
   01. BODY STATE
   ========================================================= */

body.zelmor-gallery-viewer-open {
    overflow: hidden;
}


/* =========================================================
   02. VIEWER
   ========================================================= */

.zelmor-gallery-viewer {
    position: fixed;

    inset: 0;

    z-index:
        var(
            --zelmor-z-modal,
            6000
        );

    display: grid;

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

    width: 100%;
    height: 100vh;
    height: 100svh;

    overflow: hidden;

    color: var(--zelmor-white);

    background:
        rgba(
            var(--zelmor-navy-rgb),
            0.985
        );

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 300ms var(--zelmor-ease),
        visibility 300ms var(--zelmor-ease);
}


.zelmor-gallery-viewer.is-open {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   03. DECORATION
   ========================================================= */

.zelmor-gallery-viewer__decor {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}


.zelmor-gallery-viewer__orb {
    position: absolute;

    border-radius: 50%;
}


.zelmor-gallery-viewer__orb--pink {
    top: -330px;
    right: -280px;

    width: 650px;
    height: 650px;

    border:
        1px solid
        rgba(var(--zelmor-pink-rgb), 0.2);

    box-shadow:
        0 0 0 50px
        rgba(var(--zelmor-pink-rgb), 0.018),
        0 0 0 105px
        rgba(var(--zelmor-pink-rgb), 0.009);
}


.zelmor-gallery-viewer__orb--aqua {
    left: -290px;
    bottom: -340px;

    width: 620px;
    height: 620px;

    background:
        rgba(var(--zelmor-aqua-rgb), 0.055);
}


.zelmor-gallery-viewer__line {
    position: absolute;

    background:
        rgba(var(--zelmor-white-rgb), 0.04);
}


.zelmor-gallery-viewer__line--one {
    top: 0;
    left: 18%;

    width: 1px;
    height: 100%;
}


.zelmor-gallery-viewer__line--two {
    top: 0;
    right: 18%;

    width: 1px;
    height: 100%;
}


/* =========================================================
   04. TOP
   ========================================================= */

.zelmor-gallery-viewer__top {
    position: relative;

    z-index: 5;

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

    gap: 24px;

    min-height: 78px;

    padding:
        14px
        clamp(
            20px,
            3vw,
            48px
        );

    border-bottom:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.08);

    background:
        rgba(var(--zelmor-navy-rgb), 0.7);

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


/* =========================================================
   05. BRAND
   ========================================================= */

.zelmor-gallery-viewer__brand {
    display: flex;
    align-items: center;

    gap: 11px;

    min-width: 0;
}


.zelmor-gallery-viewer__brand-name {
    color: var(--zelmor-white);

    font-family: var(--zelmor-font-heading);

    font-size: 1.65rem;

    line-height: 1;
}


.zelmor-gallery-viewer__brand-line {
    width: 30px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--zelmor-pink-600),
            var(--zelmor-aqua)
        );
}


.zelmor-gallery-viewer__brand-label {
    color:
        rgba(var(--zelmor-white-rgb), 0.66);

    font-size: 0.94rem;
    font-weight: var(--zelmor-weight-semibold);

    line-height: 1.4;
}


/* =========================================================
   06. TOP ACTIONS
   ========================================================= */

.zelmor-gallery-viewer__top-actions {
    display: flex;
    align-items: center;

    gap: 18px;
}


.zelmor-gallery-viewer__keyboard-hint {
    color:
        rgba(var(--zelmor-white-rgb), 0.56);

    font-size: 0.93rem;

    line-height: 1.4;
}


/* =========================================================
   07. CLOSE BUTTON
   ========================================================= */

.zelmor-gallery-viewer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding:
        5px
        5px
        5px
        16px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.12);

    border-radius: var(--zelmor-radius-pill);

    color: var(--zelmor-white);

    background:
        rgba(var(--zelmor-white-rgb), 0.055);

    cursor: pointer;

    font-size: 0.96rem;
    font-weight: var(--zelmor-weight-bold);

    transition:
        color var(--zelmor-transition),
        background-color var(--zelmor-transition),
        border-color var(--zelmor-transition);
}


.zelmor-gallery-viewer__close:hover {
    color: var(--zelmor-navy-950);

    border-color: var(--zelmor-pink-600);

    background-color: var(--zelmor-pink-600);
}


.zelmor-gallery-viewer__close-icon {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    color: var(--zelmor-navy-950);

    background-color: var(--zelmor-white);
}


.zelmor-gallery-viewer__close-icon svg {
    width: 18px;
    height: 18px;
}


/* =========================================================
   08. STAGE
   ========================================================= */

.zelmor-gallery-viewer__stage {
    position: relative;

    z-index: 2;

    display: grid;

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

    align-items: center;

    gap: 20px;

    min-height: 0;

    padding:
        22px
        clamp(
            20px,
            3vw,
            48px
        );
}


/* =========================================================
   09. FIGURE
   ========================================================= */

.zelmor-gallery-viewer__figure {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
    min-height: 0;

    margin: 0;
}


/* =========================================================
   10. IMAGE SHELL
   ========================================================= */

.zelmor-gallery-viewer__image-shell {
    position: relative;

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

    width: 100%;
    height: 100%;

    min-height: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.08);

    border-radius:
        25px
        62px
        25px
        25px;

    background:
        rgba(var(--zelmor-white-rgb), 0.025);

    box-shadow:
        0 28px 75px
        rgba(0, 0, 0, 0.28);
}


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

.zelmor-gallery-viewer__image {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    opacity: 1;

    transform:
        scale(1);

    will-change:
        opacity,
        transform;

    transition:
        opacity 210ms var(--zelmor-ease),
        transform 280ms var(--zelmor-ease);
}


.zelmor-gallery-viewer__image.is-changing {
    opacity: 0.22;

    transform:
        scale(0.992);
}


/* =========================================================
   12. IMAGE CORNER
   ========================================================= */

.zelmor-gallery-viewer__image-corner {
    position: absolute;

    left: 18px;
    bottom: 18px;

    display: flex;
    flex-direction: column;

    min-width: 105px;

    padding:
        10px
        12px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.1);

    border-radius: 13px;

    color: var(--zelmor-white);

    background:
        rgba(var(--zelmor-navy-rgb), 0.74);

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

    pointer-events: none;
}


.zelmor-gallery-viewer__image-corner span {
    color: var(--zelmor-aqua);

    font-size: 0.86rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.35;

    text-transform: uppercase;

    letter-spacing: 0.04em;
}


.zelmor-gallery-viewer__image-corner strong {
    color: var(--zelmor-white);

    font-size: 1rem;
    font-weight: var(--zelmor-weight-bold);
}


/* =========================================================
   13. ERROR
   ========================================================= */

.zelmor-gallery-viewer__error {
    position: absolute;

    inset: 0;

    display: flex;
    flex-direction: column;

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

    gap: 12px;

    padding: 30px;

    text-align: center;

    background-color:
        var(--zelmor-navy-900);
}


.zelmor-gallery-viewer__error[hidden] {
    display: none;
}


.zelmor-gallery-viewer__error > span {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;

    border-radius: 50%;

    color: var(--zelmor-white);

    background-color: var(--zelmor-pink-600);

    font-weight: var(--zelmor-weight-extrabold);
}


.zelmor-gallery-viewer__error p {
    margin: 0;

    color:
        rgba(var(--zelmor-white-rgb), 0.76);

    font-size: 1rem;

    line-height: 1.55;
}


/* =========================================================
   14. PREVIOUS / NEXT
   ========================================================= */

.zelmor-gallery-viewer__nav {
    position: relative;

    z-index: 5;

    display: grid;
    place-items: center;

    width: 56px;
    height: 56px;

    border:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.12);

    border-radius: 50%;

    color: var(--zelmor-white);

    background:
        rgba(var(--zelmor-white-rgb), 0.055);

    cursor: pointer;

    transition:
        color var(--zelmor-transition),
        background-color var(--zelmor-transition),
        border-color var(--zelmor-transition),
        transform var(--zelmor-transition);
}


.zelmor-gallery-viewer__nav svg {
    width: 23px;
    height: 23px;
}


.zelmor-gallery-viewer__nav:hover {
    color: var(--zelmor-navy-950);

    border-color: var(--zelmor-aqua);

    background-color: var(--zelmor-aqua);
}


.zelmor-gallery-viewer__nav--prev:hover {
    transform:
        translateX(-3px);
}


.zelmor-gallery-viewer__nav--next:hover {
    transform:
        translateX(3px);
}


.zelmor-gallery-viewer__nav:disabled {
    opacity: 0.28;

    cursor: default;

    pointer-events: none;
}


/* =========================================================
   15. BOTTOM
   ========================================================= */

.zelmor-gallery-viewer__bottom {
    position: relative;

    z-index: 5;

    display: grid;

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

    align-items: center;

    gap: 30px;

    min-height: 92px;

    padding:
        15px
        clamp(
            20px,
            3vw,
            48px
        );

    border-top:
        1px solid
        rgba(var(--zelmor-white-rgb), 0.08);

    background:
        rgba(var(--zelmor-navy-rgb), 0.72);

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


/* =========================================================
   16. META
   ========================================================= */

.zelmor-gallery-viewer__meta {
    min-width: 0;
}


.zelmor-gallery-viewer__kicker {
    display: block;

    margin-bottom: 3px;

    color: var(--zelmor-aqua);

    font-size: 0.9rem;
    font-weight: var(--zelmor-weight-bold);

    line-height: 1.35;

    letter-spacing: 0.045em;

    text-transform: uppercase;
}


.zelmor-gallery-viewer__meta h2 {
    margin: 0;

    overflow: hidden;

    color: var(--zelmor-white);

    font-size:
        clamp(
            1.8rem,
            2.6vw,
            2.5rem
        );

    line-height: 1;

    letter-spacing: -0.02em;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   17. NAVIGATION META
   ========================================================= */

.zelmor-gallery-viewer__navigation-meta {
    display: flex;
    align-items: center;

    gap: 18px;
}


/* =========================================================
   18. DOTS
   ========================================================= */

.zelmor-gallery-viewer__dots {
    display: flex;
    align-items: center;

    gap: 2px;
}


.zelmor-gallery-viewer__dot {
    position: relative;

    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: transparent;

    cursor: pointer;
}


.zelmor-gallery-viewer__dot::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: var(--zelmor-radius-pill);

    background:
        rgba(var(--zelmor-white-rgb), 0.34);

    transition:
        width var(--zelmor-transition),
        background-color var(--zelmor-transition);
}


.zelmor-gallery-viewer__dot:hover::before {
    background-color: var(--zelmor-aqua);
}


.zelmor-gallery-viewer__dot.is-active::before {
    width: 20px;

    background-color: var(--zelmor-pink-600);
}


/* =========================================================
   19. COUNTER
   ========================================================= */

.zelmor-gallery-viewer__counter {
    display: flex;
    align-items: baseline;

    gap: 6px;

    min-width: 73px;

    color:
        rgba(var(--zelmor-white-rgb), 0.52);

    font-size: 1rem;
}


.zelmor-gallery-viewer__counter strong {
    color: var(--zelmor-white);

    font-family: var(--zelmor-font-heading);

    font-size: 1.8rem;
    font-weight: var(--zelmor-weight-regular);

    line-height: 1;
}


.zelmor-gallery-viewer__counter span:last-child {
    color:
        rgba(var(--zelmor-white-rgb), 0.76);
}


/* =========================================================
   20. FOCUS
   ========================================================= */

.zelmor-gallery-viewer button:focus-visible {
    outline:
        3px solid
        rgba(var(--zelmor-aqua-rgb), 0.65);

    outline-offset: 3px;
}


/* =========================================================
   21. RESPONSIVE
   EXACT FOUR PROJECT BREAKPOINTS
   ========================================================= */


/* ---------------------------------------------------------
   COMPUTER
   --------------------------------------------------------- */

@media (min-width: 1200px) {

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

        gap: 26px;
    }


    .zelmor-gallery-viewer__image-shell {
        max-width: 1280px;

        justify-self: center;
    }

}


/* ---------------------------------------------------------
   TABLET / SMALL LAPTOP
   --------------------------------------------------------- */

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

    .zelmor-gallery-viewer__top {
        min-height: 72px;
    }


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

        gap: 13px;

        padding-block: 18px;
    }


    .zelmor-gallery-viewer__nav {
        width: 50px;
        height: 50px;
    }


    .zelmor-gallery-viewer__bottom {
        min-height: 86px;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

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

    .zelmor-gallery-viewer__top {
        min-height: 68px;

        padding:
            10px
            var(--zelmor-page-gutter);
    }


    .zelmor-gallery-viewer__brand-label,
    .zelmor-gallery-viewer__keyboard-hint {
        display: none;
    }


    .zelmor-gallery-viewer__stage {
        display: block;

        padding:
            14px
            var(--zelmor-page-gutter);
    }


    .zelmor-gallery-viewer__figure,
    .zelmor-gallery-viewer__image-shell {
        width: 100%;
        height: 100%;
    }


    .zelmor-gallery-viewer__image-shell {
        border-radius:
            22px
            48px
            22px
            22px;
    }


    .zelmor-gallery-viewer__nav {
        position: absolute;

        top: 50%;

        width: 48px;
        height: 48px;

        transform:
            translateY(-50%);
    }


    .zelmor-gallery-viewer__nav--prev {
        left:
            calc(
                var(--zelmor-page-gutter) +
                10px
            );
    }


    .zelmor-gallery-viewer__nav--next {
        right:
            calc(
                var(--zelmor-page-gutter) +
                10px
            );
    }


    .zelmor-gallery-viewer__nav--prev:hover,
    .zelmor-gallery-viewer__nav--next:hover {
        transform:
            translateY(-50%);
    }


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

        min-height: 84px;

        padding:
            12px
            var(--zelmor-page-gutter);
    }


    .zelmor-gallery-viewer__meta h2 {
        font-size:
            clamp(
                1.65rem,
                5vw,
                2.1rem
            );
    }

}


/* ---------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------- */

@media (max-width: 480px) {

    .zelmor-gallery-viewer__top {
        min-height: 64px;

        padding:
            8px
            var(--zelmor-page-gutter);
    }


    .zelmor-gallery-viewer__brand {
        gap: 8px;
    }


    .zelmor-gallery-viewer__brand-name {
        font-size: 1.45rem;
    }


    .zelmor-gallery-viewer__brand-line {
        width: 22px;
    }


    .zelmor-gallery-viewer__brand-label,
    .zelmor-gallery-viewer__keyboard-hint,
    .zelmor-gallery-viewer__close > span:first-child {
        display: none;
    }


    .zelmor-gallery-viewer__close {
        min-height: 44px;

        padding: 3px;

        border: 0;

        background: transparent;
    }


    .zelmor-gallery-viewer__close-icon {
        width: 42px;
        height: 42px;
    }


    .zelmor-gallery-viewer__stage {
        display: block;

        padding:
            10px
            var(--zelmor-page-gutter);
    }


    .zelmor-gallery-viewer__figure,
    .zelmor-gallery-viewer__image-shell {
        width: 100%;
        height: 100%;
    }


    .zelmor-gallery-viewer__image-shell {
        border-radius:
            18px
            40px
            18px
            18px;
    }


    .zelmor-gallery-viewer__image-corner {
        left: 10px;
        bottom: 10px;

        padding:
            8px
            10px;
    }


    .zelmor-gallery-viewer__nav {
        position: absolute;

        top: 50%;

        width: 46px;
        height: 46px;

        transform:
            translateY(-50%);

        background:
            rgba(var(--zelmor-navy-rgb), 0.72);
    }


    .zelmor-gallery-viewer__nav--prev {
        left:
            calc(
                var(--zelmor-page-gutter) +
                7px
            );
    }


    .zelmor-gallery-viewer__nav--next {
        right:
            calc(
                var(--zelmor-page-gutter) +
                7px
            );
    }


    .zelmor-gallery-viewer__nav--prev:hover,
    .zelmor-gallery-viewer__nav--next:hover {
        transform:
            translateY(-50%);
    }


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

        gap: 12px;

        min-height: 80px;

        padding:
            10px
            var(--zelmor-page-gutter);
    }


    .zelmor-gallery-viewer__kicker {
        font-size: 0.86rem;
    }


    .zelmor-gallery-viewer__meta h2 {
        font-size:
            clamp(
                1.45rem,
                7vw,
                1.9rem
            );
    }


    .zelmor-gallery-viewer__dots {
        display: none;
    }


    .zelmor-gallery-viewer__counter {
        min-width: 63px;
    }


    .zelmor-gallery-viewer__counter strong {
        font-size: 1.65rem;
    }


    .zelmor-gallery-viewer__line--two,
    .zelmor-gallery-viewer__orb--aqua {
        display: none;
    }

}


/* =========================================================
   22. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .zelmor-gallery-viewer,
    .zelmor-gallery-viewer__image,
    .zelmor-gallery-viewer__close,
    .zelmor-gallery-viewer__nav,
    .zelmor-gallery-viewer__dot::before {
        transition: none !important;
    }

}