/* ============================================================
   03. GALLERY HERO
   AMAYA'S LANDSCAPING LLC
   ============================================================ */


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

   TOPBAR + HEADER + HERO <= 100svh
   ============================================================ */

.amaya-gallery-hero {
    position: relative;

    z-index: 1;

    width: 100%;

    height:
        min(
            690px,
            calc(
                100svh -
                var(--amaya-first-screen-ui)
            )
        );

    min-height: 0;

    overflow: hidden;

    color:
        var(--amaya-white);

    background:
        var(--amaya-dark-surface-deep);

    isolation: isolate;
}



/* ============================================================
   02. MEDIA
   ============================================================ */

.amaya-gallery-hero__media {
    position: absolute;

    inset: 0;

    z-index: -5;

    overflow: hidden;

    pointer-events: none;
}


.amaya-gallery-hero__image {
    position: absolute;

    top: -7%;
    right: 0;
    left: 0;

    width: 100%;
    height: 114%;

    object-fit: cover;

    object-position:
        center 52%;

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

    will-change: transform;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;
}



/* ============================================================
   03. OVERLAY
   ============================================================ */

.amaya-gallery-hero__overlay {
    position: absolute;

    inset: 0;

    z-index: -4;

    background:
        linear-gradient(
            90deg,
            rgba(7, 14, 9, .93) 0%,
            rgba(8, 18, 11, .82) 33%,
            rgba(9, 20, 13, .55) 62%,
            rgba(7, 14, 9, .23) 100%
        ),
        linear-gradient(
            180deg,
            rgba(7, 14, 9, .11) 0%,
            rgba(7, 14, 9, .02) 42%,
            rgba(7, 14, 9, .62) 100%
        );

    pointer-events: none;
}



/* ============================================================
   04. AMBIENT LIGHT
   ============================================================ */

.amaya-gallery-hero__light {
    position: absolute;

    z-index: -3;

    top: -260px;
    right: -210px;

    width: 650px;
    height: 650px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(162, 198, 81, .13),
            rgba(131, 169, 56, .035) 43%,
            transparent 69%
        );

    pointer-events: none;
}



/* ============================================================
   05. SUBTLE TEXTURE
   ============================================================ */

.amaya-gallery-hero__grain {
    position: absolute;

    inset: 0;

    z-index: -2;

    opacity: .14;

    pointer-events: none;

    background-image:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 79px,
            rgba(255, 255, 255, .025) 80px
        );
}



/* ============================================================
   06. DECORATIVE FRAME
   ============================================================ */

.amaya-gallery-hero__frame {
    position: absolute;

    top: 29px;
    right: 30px;
    bottom: 58px;
    left: 30px;

    z-index: 1;

    pointer-events: none;

    border:
        1px solid
        rgba(255, 255, 255, .07);
}


.amaya-gallery-hero__frame > span:first-child {
    position: absolute;

    top: -1px;
    left: 9%;

    width: 110px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--amaya-brass),
            transparent
        );
}


.amaya-gallery-hero__frame > span:last-child {
    position: absolute;

    right: -1px;
    bottom: 11%;

    width: 2px;
    height: 80px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--amaya-leaf-light)
        );
}



/* ============================================================
   07. CONTAINER
   ============================================================ */

.amaya-gallery-hero__container {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(180px, .28fr);

    align-items: center;

    gap:
        clamp(
            55px,
            8vw,
            130px
        );

    height: 100%;

    padding-bottom: 43px;
}



/* ============================================================
   08. CONTENT
   ============================================================ */

.amaya-gallery-hero__content {
    width: 100%;

    max-width: 850px;
}



/* ============================================================
   09. EYEBROW
   ============================================================ */

.amaya-gallery-hero__eyebrow {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 19px;

    color:
        rgba(255, 255, 255, .72);

    font-size: .65rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.amaya-gallery-hero__eyebrow-number {
    color:
        var(--amaya-brass-light);

    font-size: .57rem;
}


.amaya-gallery-hero__eyebrow-line {
    width: 35px;
    height: 1px;

    background:
        rgba(162, 198, 81, .55);
}



/* ============================================================
   10. TITLE
   ============================================================ */

.amaya-gallery-hero__title {
    max-width: 900px;

    margin:
        0
        0
        23px;

    color:
        var(--amaya-white);

    font-size:
        clamp(
            3.7rem,
            5.8vw,
            6.5rem
        );

    font-weight: 600;

    line-height: .87;

    letter-spacing: -.045em;
}


.amaya-gallery-hero__title-line {
    display: block;

    overflow: hidden;

    padding-bottom: .08em;
}


.amaya-gallery-hero__title-line > span {
    display: block;
}


.amaya-gallery-hero__title-accent {
    color:
        #E1D1B3;

    font-style: italic;

    font-weight: 500;
}



/* ============================================================
   11. DESCRIPTION
   ============================================================ */

.amaya-gallery-hero__description {
    max-width: 600px;

    margin:
        0
        0
        27px;

    color:
        rgba(255, 255, 255, .65);

    font-size:
        clamp(
            .87rem,
            1vw,
            .98rem
        );

    line-height: 1.72;
}



/* ============================================================
   12. ACTIONS
   ============================================================ */

.amaya-gallery-hero__actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        13px
        22px;
}



/* ============================================================
   13. PRIMARY CTA
   ============================================================ */

.amaya-gallery-hero__primary {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 50px;

    padding:
        0
        13px
        0
        19px;

    overflow: hidden;

    color:
        var(--amaya-ink);

    background:
        var(--amaya-leaf-light);

    border:
        1px solid
        var(--amaya-leaf-light);

    border-radius:
        var(--amaya-radius-sm);

    box-shadow:
        0 15px 35px
        rgba(5, 13, 8, .20);

    font-size: .64rem;

    font-weight: 800;

    letter-spacing: .055em;

    isolation: isolate;
}


.amaya-gallery-hero__primary::before {
    content: '';

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        var(--amaya-white);

    transform:
        translateX(-102%);

    transition:
        transform
        .48s
        cubic-bezier(.22, 1, .36, 1);
}


.amaya-gallery-hero__primary:hover::before {
    transform:
        translateX(0);
}



/* ============================================================
   14. PRIMARY ICON
   ============================================================ */

.amaya-gallery-hero__primary-icon {
    display: grid;

    place-items: center;

    width: 25px;
    height: 25px;

    color:
        var(--amaya-white);

    background:
        var(--amaya-forest-deep);

    border-radius: 4px;

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


.amaya-gallery-hero__primary:hover
.amaya-gallery-hero__primary-icon {
    transform:
        translateY(3px);
}


.amaya-gallery-hero__primary-icon svg {
    width: 13px;
    height: 13px;

    stroke: currentColor;

    stroke-width: 1.8;

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



/* ============================================================
   15. CONTACT LINK
   ============================================================ */

.amaya-gallery-hero__contact-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        rgba(255, 255, 255, .76);

    font-size: .62rem;

    font-weight: 700;

    letter-spacing: .04em;
}


.amaya-gallery-hero__contact-link
span:last-child {
    color:
        var(--amaya-brass-light);

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


.amaya-gallery-hero__contact-link:hover {
    color:
        var(--amaya-white);
}


.amaya-gallery-hero__contact-link:hover
span:last-child {
    transform:
        translate3d(3px, -2px, 0);
}



/* ============================================================
   16. ASIDE
   ============================================================ */

.amaya-gallery-hero__aside {
    align-self: center;

    display: grid;

    grid-template-columns:
        auto
        1fr;

    column-gap: 16px;

    max-width: 230px;

    padding:
        22px
        0
        22px
        20px;

    border-left:
        1px solid
        rgba(255, 255, 255, .14);
}


.amaya-gallery-hero__aside-label {
    grid-column:
        1 / -1;

    margin-bottom: 12px;

    color:
        var(--amaya-leaf-light);

    font-size: .51rem;

    font-weight: 700;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.amaya-gallery-hero__aside-number {
    color:
        #E1D1B3;

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

    font-size: 3.15rem;

    font-weight: 500;

    line-height: .82;
}


.amaya-gallery-hero__aside-copy {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.amaya-gallery-hero__aside-copy strong {
    color:
        var(--amaya-white);

    font-size: .61rem;

    font-weight: 700;
}


.amaya-gallery-hero__aside-copy span {
    color:
        rgba(255, 255, 255, .46);

    font-size: .54rem;

    line-height: 1.45;
}



/* ============================================================
   17. BOTTOM BAR
   ============================================================ */

.amaya-gallery-hero__bottom {
    position: absolute;

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

    z-index: 5;

    border-top:
        1px solid
        rgba(255, 255, 255, .08);

    background:
        rgba(5, 12, 8, .26);

    backdrop-filter:
        blur(8px);

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


.amaya-gallery-hero__bottom-inner {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    min-height: 37px;
}



/* ============================================================
   18. LOCATION
   ============================================================ */

.amaya-gallery-hero__bottom-location {
    display: flex;

    align-items: center;

    gap: 8px;

    color:
        rgba(255, 255, 255, .45);

    font-size: .48rem;

    font-weight: 600;

    letter-spacing: .085em;

    text-transform: uppercase;
}


.amaya-gallery-hero__bottom-dot {
    width: 6px;
    height: 6px;

    background:
        var(--amaya-leaf-light);

    border-radius: 50%;
}



/* ============================================================
   19. BOTTOM SERVICES
   ============================================================ */

.amaya-gallery-hero__bottom-services {
    display: flex;

    align-items: center;

    gap: 11px;

    color:
        rgba(255, 255, 255, .39);

    font-size: .47rem;

    font-weight: 600;

    letter-spacing: .09em;

    text-transform: uppercase;
}


.amaya-gallery-hero__bottom-services i {
    width: 17px;
    height: 1px;

    background:
        rgba(177, 138, 82, .42);
}



/* ============================================================
   20. INITIAL REVEAL
   ============================================================ */

[data-amaya-gallery-title] {
    opacity: 0;

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


[data-amaya-gallery-reveal] {
    opacity: 0;

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



/* ============================================================
   21. READY
   ============================================================ */

.amaya-gallery-hero.amaya-gallery-hero--ready
[data-amaya-gallery-title] {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        opacity .78s ease,
        transform 1s
        cubic-bezier(.16, 1, .3, 1);
}


.amaya-gallery-hero.amaya-gallery-hero--ready
.amaya-gallery-hero__title-line:nth-child(2)
[data-amaya-gallery-title] {
    transition-delay: .09s;
}


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

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        opacity .7s ease,
        transform .86s
        cubic-bezier(.22, 1, .36, 1);
}


.amaya-gallery-hero.amaya-gallery-hero--ready
.amaya-gallery-hero__description {
    transition-delay: .14s;
}


.amaya-gallery-hero.amaya-gallery-hero--ready
.amaya-gallery-hero__actions {
    transition-delay: .21s;
}


.amaya-gallery-hero.amaya-gallery-hero--ready
.amaya-gallery-hero__aside {
    transition-delay: .28s;
}



/* ============================================================
   22. DESKTOP
   ============================================================ */

@media (min-width: 1200px) {

    .amaya-gallery-hero {
        height:
            min(
                690px,
                calc(
                    100svh -
                    var(--amaya-first-screen-ui)
                )
            );
    }

}



/* ============================================================
   23. TABLET / SMALL LAPTOP
   ============================================================ */

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

    .amaya-gallery-hero {
        height:
            min(
                630px,
                calc(
                    100svh -
                    var(--amaya-first-screen-ui)
                )
            );
    }


    .amaya-gallery-hero__container {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(155px, .27fr);

        gap: 42px;
    }


    .amaya-gallery-hero__title {
        font-size:
            clamp(
                3.45rem,
                7vw,
                5rem
            );
    }


    .amaya-gallery-hero__frame {
        top: 22px;
        right: 22px;
        bottom: 54px;
        left: 22px;
    }


    .amaya-gallery-hero__aside-number {
        font-size: 2.7rem;
    }

}



/* ============================================================
   24. MOBILE
   ============================================================ */

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

    .amaya-gallery-hero {
        height:
            calc(
                100svh -
                var(--amaya-first-screen-ui)
            );
    }


    .amaya-gallery-hero__image {
        object-position:
            61% center;
    }


    .amaya-gallery-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(7, 14, 9, .93) 0%,
                rgba(8, 18, 11, .76) 72%,
                rgba(7, 14, 9, .42) 100%
            ),
            linear-gradient(
                180deg,
                rgba(7, 14, 9, .05),
                rgba(7, 14, 9, .70)
            );
    }


    .amaya-gallery-hero__container {
        grid-template-columns: 1fr;

        align-content: center;

        gap: 0;

        padding-bottom: 42px;
    }


    .amaya-gallery-hero__content {
        max-width: 590px;
    }


    .amaya-gallery-hero__title {
        font-size:
            clamp(
                3.15rem,
                10.5vw,
                4.4rem
            );
    }


    .amaya-gallery-hero__description {
        max-width: 520px;

        font-size: .84rem;
    }


    .amaya-gallery-hero__aside {
        display: none;
    }


    .amaya-gallery-hero__frame {
        top: 16px;
        right: 16px;
        bottom: 49px;
        left: 16px;
    }

}



/* ============================================================
   25. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .amaya-gallery-hero {
        height:
            calc(
                100svh -
                var(--amaya-first-screen-ui)
            );
    }


    .amaya-gallery-hero__image {
        object-position:
            63% center;
    }


    .amaya-gallery-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(7, 14, 9, .94) 0%,
                rgba(8, 18, 11, .80) 79%,
                rgba(7, 14, 9, .48) 100%
            ),
            linear-gradient(
                180deg,
                rgba(7, 14, 9, .05),
                rgba(7, 14, 9, .73)
            );
    }


    .amaya-gallery-hero__container {
        grid-template-columns: 1fr;

        align-content: center;

        padding-bottom: 37px;
    }


    .amaya-gallery-hero__eyebrow {
        gap: 8px;

        margin-bottom: 13px;

        font-size: .51rem;
    }


    .amaya-gallery-hero__eyebrow-line {
        width: 25px;
    }


    .amaya-gallery-hero__title {
        margin-bottom: 15px;

        font-size:
            clamp(
                2.72rem,
                12.3vw,
                3.55rem
            );

        line-height: .89;
    }


    .amaya-gallery-hero__description {
        max-width: 420px;

        margin-bottom: 19px;

        font-size: .76rem;

        line-height: 1.56;
    }


    .amaya-gallery-hero__actions {
        gap:
            10px
            16px;
    }


    .amaya-gallery-hero__primary {
        min-height: 44px;

        padding:
            0 10px
            0 14px;

        font-size: .55rem;
    }


    .amaya-gallery-hero__primary-icon {
        width: 22px;
        height: 22px;
    }


    .amaya-gallery-hero__contact-link {
        font-size: .55rem;
    }


    .amaya-gallery-hero__aside {
        display: none;
    }


    .amaya-gallery-hero__frame {
        top: 12px;
        right: 12px;
        bottom: 45px;
        left: 12px;
    }


    .amaya-gallery-hero__bottom-services {
        display: none;
    }


    .amaya-gallery-hero__bottom-inner {
        min-height: 33px;
    }


    .amaya-gallery-hero__bottom-location {
        font-size: .42rem;

        letter-spacing: .065em;
    }

}



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

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

    .amaya-gallery-hero__image {
        transform:
            scale(1.045) !important;

        will-change: auto;
    }


    [data-amaya-gallery-title],
    [data-amaya-gallery-reveal] {
        opacity: 1 !important;

        transform: none !important;

        transition: none !important;
    }


    .amaya-gallery-hero__primary::before,
    .amaya-gallery-hero__primary-icon,
    .amaya-gallery-hero__contact-link span {
        transition: none !important;
    }

}
































/* ============================================================
   04. SERVICE NAVIGATION
   AMAYA'S LANDSCAPING LLC
   ============================================================ */


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

.amaya-gallery-nav {
    --amaya-gallery-nav-height: 96px;

    position: relative;
    z-index: 1200;

    width: 100%;

    background:
        rgba(248, 246, 240, .97);

    border-bottom:
        1px solid
        rgba(45, 91, 57, .11);

    box-shadow:
        0 12px 35px
        rgba(31, 67, 43, .045);

    isolation: isolate;
}


/* Top detail */

.amaya-gallery-nav::before {
    content: '';

    position: absolute;

    top: 0;
    left: 50%;

    width:
        min(
            calc(
                100% -
                (var(--amaya-inline-space) * 2)
            ),
            var(--amaya-container-width)
        );

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(177, 138, 82, .28),
            rgba(131, 169, 56, .32),
            transparent
        );

    transform:
        translateX(-50%);

    pointer-events: none;
}



/* ============================================================
   02. CONTAINER
   ============================================================ */

.amaya-gallery-nav__container {
    display: grid;

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

    align-items: stretch;

    min-height:
        var(--amaya-gallery-nav-height);
}



/* ============================================================
   03. INTRO
   ============================================================ */

.amaya-gallery-nav__intro {
    position: relative;

    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 190px;

    padding-right: 25px;

    margin-right: 17px;
}


.amaya-gallery-nav__intro::after {
    content: '';

    position: absolute;

    top: 22px;
    right: 0;
    bottom: 22px;

    width: 1px;

    background:
        rgba(45, 91, 57, .12);
}


.amaya-gallery-nav__mark {
    display: grid;

    place-items: center;

    width: 32px;
    height: 32px;

    color:
        var(--amaya-brass);

    border:
        1px solid
        rgba(177, 138, 82, .18);

    border-radius:
        var(--amaya-radius-sm);

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

    font-size: .8rem;
}


.amaya-gallery-nav__intro-copy {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.amaya-gallery-nav__intro-copy > span {
    color:
        var(--amaya-forest-deep);

    font-size: .58rem;

    font-weight: 800;

    letter-spacing: .09em;

    text-transform: uppercase;
}


.amaya-gallery-nav__intro-copy small {
    color:
        var(--amaya-text-muted);

    font-size: .49rem;

    font-weight: 500;
}



/* ============================================================
   04. SCROLL AREA
   ============================================================ */

.amaya-gallery-nav__scroll {
    min-width: 0;
    overflow: hidden;
}



/* ============================================================
   05. LINKS
   ============================================================ */

.amaya-gallery-nav__links {
    display: grid;

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

    height: 100%;
}



/* ============================================================
   06. LINK
   ============================================================ */

.amaya-gallery-nav__link {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 8px;

    min-width: 0;

    padding:
        15px
        12px;

    color:
        var(--amaya-text);

    border-right:
        1px solid
        rgba(45, 91, 57, .075);

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


.amaya-gallery-nav__link:last-child {
    border-right: 0;
}


/* Active line */

.amaya-gallery-nav__link::after {
    content: '';

    position: absolute;

    right: 10px;
    bottom: 0;
    left: 10px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--amaya-forest),
            var(--amaya-leaf)
        );

    transform:
        scaleX(0);

    transform-origin:
        right center;

    transition:
        transform
        .42s
        cubic-bezier(.22, 1, .36, 1);
}


.amaya-gallery-nav__link:hover,
.amaya-gallery-nav__link--active {
    color:
        var(--amaya-forest-deep);

    background:
        rgba(45, 91, 57, .035);
}


.amaya-gallery-nav__link:hover::after,
.amaya-gallery-nav__link--active::after {
    transform:
        scaleX(1);

    transform-origin:
        left center;
}



/* ============================================================
   07. NUMBER
   ============================================================ */

.amaya-gallery-nav__number {
    align-self: start;

    margin-top: 3px;

    color:
        var(--amaya-brass);

    font-size: .45rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .08em;
}



/* ============================================================
   08. LINK COPY
   ============================================================ */

.amaya-gallery-nav__link-copy {
    display: flex;

    flex-direction: column;

    min-width: 0;

    gap: 2px;
}


.amaya-gallery-nav__link-copy strong {
    overflow: hidden;

    color:
        var(--amaya-charcoal);

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

    font-size: 1.04rem;

    font-weight: 600;

    line-height: 1;

    text-overflow: ellipsis;

    white-space: nowrap;

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


.amaya-gallery-nav__link-copy small {
    overflow: hidden;

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

    font-size: .43rem;

    font-weight: 500;

    line-height: 1.25;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.amaya-gallery-nav__link:hover
.amaya-gallery-nav__link-copy strong,
.amaya-gallery-nav__link--active
.amaya-gallery-nav__link-copy strong {
    color:
        var(--amaya-forest);
}



/* ============================================================
   09. ARROW
   ============================================================ */

.amaya-gallery-nav__arrow {
    display: grid;

    place-items: center;

    width: 22px;
    height: 22px;

    color:
        rgba(45, 91, 57, .35);

    border:
        1px solid
        rgba(45, 91, 57, .10);

    border-radius: 4px;

    font-size: .58rem;

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


.amaya-gallery-nav__link:hover
.amaya-gallery-nav__arrow,
.amaya-gallery-nav__link--active
.amaya-gallery-nav__arrow {
    color:
        var(--amaya-white);

    background:
        var(--amaya-forest);

    border-color:
        var(--amaya-forest);
}


.amaya-gallery-nav__link:hover
.amaya-gallery-nav__arrow {
    transform:
        translateY(2px);
}



/* ============================================================
   10. MOBILE HINT
   ============================================================ */

.amaya-gallery-nav__mobile-hint {
    display: none;

    align-items: center;

    justify-content: flex-end;

    gap: 6px;

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

    font-size: .43rem;

    font-weight: 700;

    letter-spacing: .09em;

    text-transform: uppercase;
}


.amaya-gallery-nav__mobile-hint svg {
    width: 13px;
    height: 13px;

    stroke:
        currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;
}



/* ============================================================
   11. ANCHOR OFFSET

   These are the exact service sections used by this navigation.
   ============================================================ */

#gallery-landscaping,
#gallery-planting,
#gallery-sod,
#gallery-mulch,
#gallery-lawn-maintenance,
#gallery-trimming {
    scroll-margin-top:
        calc(
            var(--amaya-header-height) +
            var(--amaya-gallery-nav-height) +
            20px
        );
}



/* ============================================================
   12. DESKTOP
   ============================================================ */

@media (min-width: 1200px) {

    .amaya-gallery-nav {
        position: sticky;

        top:
            var(--amaya-header-height);
    }


    .amaya-gallery-nav__container {
        min-height: 96px;
    }

}



/* ============================================================
   13. TABLET / SMALL LAPTOP
   ============================================================ */

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

    .amaya-gallery-nav {
        --amaya-gallery-nav-height: 88px;

        position: relative;
    }


    .amaya-gallery-nav__container {
        grid-template-columns: 1fr;

        padding-top: 14px;

        padding-bottom: 12px;
    }


    .amaya-gallery-nav__intro {
        min-width: 0;

        min-height: 35px;

        margin:
            0
            0
            10px;

        padding:
            0
            0
            10px;

        border-bottom:
            1px solid
            rgba(45, 91, 57, .09);
    }


    .amaya-gallery-nav__intro::after {
        display: none;
    }


    .amaya-gallery-nav__mark {
        width: 27px;
        height: 27px;
    }


    .amaya-gallery-nav__links {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .amaya-gallery-nav__link {
        min-height: 67px;

        border-bottom:
            1px solid
            rgba(45, 91, 57, .075);
    }


    .amaya-gallery-nav__link:nth-child(3) {
        border-right: 0;
    }


    #gallery-landscaping,
    #gallery-planting,
    #gallery-sod,
    #gallery-mulch,
    #gallery-lawn-maintenance,
    #gallery-trimming {
        scroll-margin-top:
            calc(
                var(--amaya-header-height) +
                18px
            );
    }

}



/* ============================================================
   14. MOBILE
   ============================================================ */

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

    .amaya-gallery-nav {
        --amaya-gallery-nav-height: 76px;

        position: relative;
    }


    .amaya-gallery-nav__container {
        display: block;

        padding-top: 13px;

        padding-bottom: 11px;
    }


    .amaya-gallery-nav__intro {
        min-width: 0;

        margin:
            0
            0
            10px;

        padding:
            0
            0
            10px;

        border-bottom:
            1px solid
            rgba(45, 91, 57, .09);
    }


    .amaya-gallery-nav__intro::after {
        display: none;
    }


    .amaya-gallery-nav__mark {
        width: 26px;
        height: 26px;
    }


    .amaya-gallery-nav__scroll {
        margin-right:
            calc(
                var(--amaya-inline-space) * -1
            );

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

        overscroll-behavior-x: contain;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }


    .amaya-gallery-nav__scroll::-webkit-scrollbar {
        display: none;
    }


    .amaya-gallery-nav__links {
        display: flex;

        width: max-content;

        height: auto;

        padding-right:
            var(--amaya-inline-space);
    }


    .amaya-gallery-nav__link {
        flex:
            0
            0
            190px;

        min-height: 67px;
    }


    .amaya-gallery-nav__mobile-hint {
        display: flex;

        margin-top: 8px;
    }


    #gallery-landscaping,
    #gallery-planting,
    #gallery-sod,
    #gallery-mulch,
    #gallery-lawn-maintenance,
    #gallery-trimming {
        scroll-margin-top:
            calc(
                var(--amaya-header-height) +
                16px
            );
    }

}



/* ============================================================
   15. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .amaya-gallery-nav {
        --amaya-gallery-nav-height: 72px;

        position: relative;
    }


    .amaya-gallery-nav__container {
        display: block;

        padding-top: 11px;

        padding-bottom: 10px;
    }


    .amaya-gallery-nav__intro {
        min-width: 0;

        margin:
            0
            0
            9px;

        padding:
            0
            0
            9px;

        border-bottom:
            1px solid
            rgba(45, 91, 57, .09);
    }


    .amaya-gallery-nav__intro::after {
        display: none;
    }


    .amaya-gallery-nav__mark {
        width: 25px;
        height: 25px;

        font-size: .68rem;
    }


    .amaya-gallery-nav__intro-copy > span {
        font-size: .52rem;
    }


    .amaya-gallery-nav__intro-copy small {
        font-size: .44rem;
    }


    .amaya-gallery-nav__scroll {
        margin-right:
            calc(
                var(--amaya-inline-space) * -1
            );

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

        overscroll-behavior-x: contain;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }


    .amaya-gallery-nav__scroll::-webkit-scrollbar {
        display: none;
    }


    .amaya-gallery-nav__links {
        display: flex;

        width: max-content;

        height: auto;

        padding-right:
            var(--amaya-inline-space);
    }


    .amaya-gallery-nav__link {
        flex:
            0
            0
            168px;

        min-height: 62px;

        padding:
            11px
            9px;
    }


    .amaya-gallery-nav__link-copy strong {
        font-size: .94rem;
    }


    .amaya-gallery-nav__link-copy small {
        font-size: .4rem;
    }


    .amaya-gallery-nav__arrow {
        width: 20px;
        height: 20px;
    }


    .amaya-gallery-nav__mobile-hint {
        display: flex;

        margin-top: 7px;
    }


    #gallery-landscaping,
    #gallery-planting,
    #gallery-sod,
    #gallery-mulch,
    #gallery-lawn-maintenance,
    #gallery-trimming {
        scroll-margin-top:
            calc(
                var(--amaya-header-height) +
                14px
            );
    }

}



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

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

    .amaya-gallery-nav__link,
    .amaya-gallery-nav__link::after,
    .amaya-gallery-nav__arrow {
        transition: none !important;
    }


    .amaya-gallery-nav__scroll {
        scroll-behavior: auto !important;
    }

}

































/* ============================================================
   05. GALLERY INTRODUCTION
   AMAYA'S LANDSCAPING LLC
   ============================================================ */


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

.amaya-gallery-intro {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(131, 169, 56, .07),
            transparent 29rem
        ),
        radial-gradient(
            circle at 5% 95%,
            rgba(177, 138, 82, .055),
            transparent 25rem
        ),
        var(--amaya-ivory);

    isolation: isolate;
}



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

.amaya-gallery-intro__ambient {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.amaya-gallery-intro__ambient--one {
    top: -280px;
    right: -260px;

    width: 620px;
    height: 620px;

    border:
        1px solid
        rgba(45, 91, 57, .05);
}


.amaya-gallery-intro__ambient--one::before,
.amaya-gallery-intro__ambient--one::after {
    content: '';

    position: absolute;

    border:
        1px solid
        rgba(45, 91, 57, .04);

    border-radius: 50%;
}


.amaya-gallery-intro__ambient--one::before {
    inset: 75px;
}


.amaya-gallery-intro__ambient--one::after {
    inset: 150px;
}


.amaya-gallery-intro__ambient--two {
    bottom: -330px;
    left: -280px;

    width: 660px;
    height: 660px;

    background:
        radial-gradient(
            circle,
            rgba(177, 138, 82, .07),
            transparent 67%
        );
}



/* ============================================================
   03. BOTANICAL
   ============================================================ */

.amaya-gallery-intro__botanical {
    position: absolute;

    right: 2%;
    bottom: 5%;

    width: 165px;

    color:
        var(--amaya-forest);

    opacity: .045;

    pointer-events: none;
}


.amaya-gallery-intro__botanical svg {
    width: 100%;
    height: auto;

    stroke:
        currentColor;

    stroke-width: 1.15;

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



/* ============================================================
   04. CONTAINER
   ============================================================ */

.amaya-gallery-intro__container {
    position: relative;

    z-index: 2;
}



/* ============================================================
   05. TOP HEADER
   ============================================================ */

.amaya-gallery-intro__header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    margin-bottom:
        clamp(
            48px,
            6vw,
            78px
        );

    padding-bottom: 20px;

    border-bottom:
        1px solid
        rgba(45, 91, 57, .11);
}



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

.amaya-gallery-intro__eyebrow {
    display: flex;

    align-items: center;

    gap: 12px;

    color:
        var(--amaya-forest);

    font-size: .65rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.amaya-gallery-intro__eyebrow-number {
    color:
        var(--amaya-brass);

    font-size: .58rem;
}


.amaya-gallery-intro__eyebrow-line {
    width: 36px;
    height: 1px;

    background:
        rgba(45, 91, 57, .35);
}



/* ============================================================
   07. HEADER RULE
   ============================================================ */

.amaya-gallery-intro__header-rule {
    display: flex;

    align-items: center;

    gap: 13px;
}


.amaya-gallery-intro__header-rule > span {
    width: 60px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(177, 138, 82, .38)
        );
}


.amaya-gallery-intro__header-rule small {
    color:
        var(--amaya-text-muted);

    font-size: .48rem;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;
}



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

.amaya-gallery-intro__layout {
    display: grid;

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

    align-items: start;

    gap:
        clamp(
            60px,
            9vw,
            140px
        );
}



/* ============================================================
   09. MAIN CONTENT
   ============================================================ */

.amaya-gallery-intro__main {
    max-width: 760px;
}



/* ============================================================
   10. TITLE
   ============================================================ */

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

    margin:
        0
        0
        31px;

    color:
        var(--amaya-ink);

    font-size:
        clamp(
            3.55rem,
            5.4vw,
            6rem
        );

    font-weight: 600;

    line-height: .88;

    letter-spacing: -.044em;
}


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

    color:
        var(--amaya-forest);

    font-style: italic;

    font-weight: 500;
}



/* ============================================================
   11. LEAD
   ============================================================ */

.amaya-gallery-intro__lead {
    position: relative;

    max-width: 640px;

    margin-bottom: 28px;

    padding:
        7px
        0
        7px
        33px;

    border-left:
        1px solid
        rgba(177, 138, 82, .34);
}


.amaya-gallery-intro__quote {
    position: absolute;

    top: -18px;
    left: 17px;

    color:
        rgba(177, 138, 82, .22);

    font-family:
        Georgia,
        serif;

    font-size: 5rem;

    line-height: 1;

    pointer-events: none;
}


.amaya-gallery-intro__lead p {
    position: relative;

    z-index: 2;

    margin: 0;

    color:
        var(--amaya-charcoal);

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

    font-size:
        clamp(
            1.32rem,
            1.8vw,
            1.7rem
        );

    font-weight: 500;

    line-height: 1.35;
}



/* ============================================================
   12. BODY
   ============================================================ */

.amaya-gallery-intro__body {
    display: grid;

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

    gap: 28px;

    max-width: 700px;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(45, 91, 57, .09);
}


.amaya-gallery-intro__body p {
    margin: 0;

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

    font-size: .75rem;

    line-height: 1.72;
}



/* ============================================================
   13. DISCIPLINES
   ============================================================ */

.amaya-gallery-intro__disciplines {
    position: relative;

    overflow: hidden;

    background:
        var(--amaya-white);

    border:
        1px solid
        rgba(45, 91, 57, .11);

    border-radius:
        var(--amaya-radius-md);

    box-shadow:
        var(--amaya-shadow-md);
}



/* Brass top line */

.amaya-gallery-intro__disciplines::before {
    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 110px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--amaya-brass),
            transparent
        );

    pointer-events: none;
}



/* ============================================================
   14. DISCIPLINES HEAD
   ============================================================ */

.amaya-gallery-intro__disciplines-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    min-height: 59px;

    padding:
        0
        20px;

    border-bottom:
        1px solid
        rgba(45, 91, 57, .09);
}


.amaya-gallery-intro__disciplines-head
span:first-child {
    color:
        var(--amaya-forest-deep);

    font-size: .56rem;

    font-weight: 800;

    letter-spacing: .10em;

    text-transform: uppercase;
}


.amaya-gallery-intro__disciplines-head
span:last-child {
    color:
        var(--amaya-brass);

    font-size: .47rem;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;
}



/* ============================================================
   15. DISCIPLINE
   ============================================================ */

.amaya-gallery-intro__discipline {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 10px;

    min-height: 72px;

    padding:
        10px
        20px;

    color:
        var(--amaya-text);

    border-bottom:
        1px solid
        rgba(45, 91, 57, .08);

    transition:
        background-color
        var(--amaya-transition),
        padding
        var(--amaya-transition);
}


.amaya-gallery-intro__discipline:last-child {
    border-bottom: 0;
}


.amaya-gallery-intro__discipline::before {
    content: '';

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 3px;

    background:
        var(--amaya-leaf);

    transform:
        scaleY(0);

    transform-origin:
        bottom;

    transition:
        transform
        .4s
        cubic-bezier(.22, 1, .36, 1);
}


.amaya-gallery-intro__discipline:hover {
    padding-left: 24px;

    background:
        var(--amaya-background-soft);
}


.amaya-gallery-intro__discipline:hover::before {
    transform:
        scaleY(1);

    transform-origin:
        top;
}



/* ============================================================
   16. DISCIPLINE NUMBER
   ============================================================ */

.amaya-gallery-intro__discipline-number {
    color:
        var(--amaya-brass);

    font-size: .49rem;

    font-weight: 700;

    letter-spacing: .09em;
}



/* ============================================================
   17. DISCIPLINE COPY
   ============================================================ */

.amaya-gallery-intro__discipline-copy {
    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


.amaya-gallery-intro__discipline-copy strong {
    color:
        var(--amaya-charcoal);

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

    font-size: 1.2rem;

    font-weight: 600;

    line-height: 1;
}


.amaya-gallery-intro__discipline-copy small {
    overflow: hidden;

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

    font-size: .47rem;

    line-height: 1.3;

    text-overflow: ellipsis;

    white-space: nowrap;
}



/* ============================================================
   18. DISCIPLINE ARROW
   ============================================================ */

.amaya-gallery-intro__discipline-arrow {
    display: grid;

    place-items: center;

    width: 24px;
    height: 24px;

    color:
        rgba(45, 91, 57, .38);

    border:
        1px solid
        rgba(45, 91, 57, .10);

    border-radius: 4px;

    font-size: .56rem;

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


.amaya-gallery-intro__discipline:hover
.amaya-gallery-intro__discipline-arrow {
    color:
        var(--amaya-white);

    background:
        var(--amaya-forest);

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



/* ============================================================
   19. PRINCIPLES
   ============================================================ */

.amaya-gallery-intro__principles {
    display: grid;

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

    margin-top:
        clamp(
            55px,
            7vw,
            90px
        );

    border-top:
        1px solid
        rgba(45, 91, 57, .11);

    border-bottom:
        1px solid
        rgba(45, 91, 57, .11);
}



/* ============================================================
   20. PRINCIPLE
   ============================================================ */

.amaya-gallery-intro__principle {
    display: grid;

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

    gap: 17px;

    padding:
        28px
        30px;

    border-right:
        1px solid
        rgba(45, 91, 57, .10);
}


.amaya-gallery-intro__principle:first-child {
    padding-left: 0;
}


.amaya-gallery-intro__principle:last-child {
    padding-right: 0;

    border-right: 0;
}



/* ============================================================
   21. PRINCIPLE ICON
   ============================================================ */

.amaya-gallery-intro__principle-icon {
    display: grid;

    place-items: center;

    width: 39px;
    height: 39px;

    color:
        var(--amaya-forest);

    background:
        var(--amaya-sage-light);

    border:
        1px solid
        rgba(45, 91, 57, .10);

    border-radius:
        var(--amaya-radius-sm);
}


.amaya-gallery-intro__principle-icon svg {
    width: 17px;
    height: 17px;

    stroke:
        currentColor;

    stroke-width: 1.5;

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



/* ============================================================
   22. PRINCIPLE CONTENT
   ============================================================ */

.amaya-gallery-intro__principle div {
    display: flex;

    flex-direction: column;
}


.amaya-gallery-intro__principle
div > span {
    margin-bottom: 3px;

    color:
        var(--amaya-brass);

    font-size: .47rem;

    font-weight: 700;

    letter-spacing: .08em;
}


.amaya-gallery-intro__principle strong {
    margin-bottom: 7px;

    color:
        var(--amaya-forest-deep);

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

    font-size: 1.45rem;

    font-weight: 600;

    line-height: 1;
}


.amaya-gallery-intro__principle p {
    max-width: 290px;

    margin: 0;

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

    font-size: .61rem;

    line-height: 1.55;
}



/* ============================================================
   23. BOTTOM NOTE
   ============================================================ */

.amaya-gallery-intro__note {
    display: grid;

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

    align-items: center;

    gap:
        clamp(
            25px,
            4vw,
            55px
        );

    margin-top: 32px;

    padding:
        21px
        23px;

    background:
        var(--amaya-dark-surface-deep);

    border:
        1px solid
        rgba(45, 91, 57, .11);

    border-radius:
        var(--amaya-radius-md);

    box-shadow:
        var(--amaya-shadow-sm);
}


.amaya-gallery-intro__note-label {
    color:
        var(--amaya-leaf-light);

    font-size: .51rem;

    font-weight: 800;

    letter-spacing: .10em;

    text-transform: uppercase;

    white-space: nowrap;
}


.amaya-gallery-intro__note p {
    margin: 0;

    color:
        rgba(255, 255, 255, .58);

    font-size: .65rem;

    line-height: 1.55;
}


.amaya-gallery-intro__note a {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color:
        var(--amaya-white);

    font-size: .57rem;

    font-weight: 700;

    letter-spacing: .04em;

    white-space: nowrap;
}


.amaya-gallery-intro__note
a span:last-child {
    color:
        var(--amaya-leaf-light);

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


.amaya-gallery-intro__note a:hover
span:last-child {
    transform:
        translateX(4px);
}



/* ============================================================
   24. INITIAL REVEAL
   ============================================================ */

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

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



/* ============================================================
   25. VISIBLE
   ============================================================ */

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

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        opacity
        .7s
        ease,

        transform
        .88s
        cubic-bezier(.22, 1, .36, 1);
}


.amaya-gallery-intro.amaya-gallery-intro--visible
.amaya-gallery-intro__title {
    transition-delay: .05s;
}


.amaya-gallery-intro.amaya-gallery-intro--visible
.amaya-gallery-intro__lead {
    transition-delay: .10s;
}


.amaya-gallery-intro.amaya-gallery-intro--visible
.amaya-gallery-intro__body {
    transition-delay: .15s;
}


.amaya-gallery-intro.amaya-gallery-intro--visible
.amaya-gallery-intro__disciplines {
    transition-delay: .12s;
}


.amaya-gallery-intro.amaya-gallery-intro--visible
.amaya-gallery-intro__principles {
    transition-delay: .20s;
}


.amaya-gallery-intro.amaya-gallery-intro--visible
.amaya-gallery-intro__note {
    transition-delay: .27s;
}



/* ============================================================
   26. DESKTOP
   ============================================================ */

@media (min-width: 1200px) {

    .amaya-gallery-intro__layout {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(350px, .8fr);
    }


    .amaya-gallery-intro__disciplines {
        margin-top: 7px;
    }

}



/* ============================================================
   27. TABLET / SMALL LAPTOP
   ============================================================ */

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

    .amaya-gallery-intro__header {
        margin-bottom: 52px;
    }


    .amaya-gallery-intro__layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, .82fr);

        gap: 45px;
    }


    .amaya-gallery-intro__title {
        font-size:
            clamp(
                3.2rem,
                6vw,
                4.8rem
            );
    }


    .amaya-gallery-intro__body {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .amaya-gallery-intro__discipline {
        padding-inline: 15px;
    }


    .amaya-gallery-intro__discipline-copy strong {
        font-size: 1.05rem;
    }


    .amaya-gallery-intro__principle {
        padding:
            24px
            21px;
    }


    .amaya-gallery-intro__principle:first-child {
        padding-left: 0;
    }


    .amaya-gallery-intro__principle:last-child {
        padding-right: 0;
    }


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

        gap:
            10px
            30px;
    }


    .amaya-gallery-intro__note a {
        grid-column:
            2;
    }

}



/* ============================================================
   28. MOBILE
   ============================================================ */

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

    .amaya-gallery-intro__header {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;

        margin-bottom: 43px;
    }


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

        gap: 45px;
    }


    .amaya-gallery-intro__title {
        max-width: 590px;

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


    .amaya-gallery-intro__lead {
        max-width: 570px;
    }


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

        max-width: none;
    }


    .amaya-gallery-intro__disciplines {
        max-width: none;
    }


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

        margin-top: 55px;
    }


    .amaya-gallery-intro__principle {
        padding:
            22px
            0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(45, 91, 57, .09);
    }


    .amaya-gallery-intro__principle:last-child {
        border-bottom: 0;
    }


    .amaya-gallery-intro__note {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .amaya-gallery-intro__note a {
        justify-self: start;
    }


    .amaya-gallery-intro__botanical {
        opacity: .03;
    }

}



/* ============================================================
   29. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .amaya-gallery-intro__header {
        align-items: flex-start;

        flex-direction: column;

        gap: 13px;

        margin-bottom: 37px;

        padding-bottom: 16px;
    }


    .amaya-gallery-intro__eyebrow {
        gap: 9px;

        font-size: .56rem;
    }


    .amaya-gallery-intro__eyebrow-line {
        width: 27px;
    }


    .amaya-gallery-intro__header-rule > span {
        width: 35px;
    }


    .amaya-gallery-intro__header-rule small {
        font-size: .41rem;
    }


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

        gap: 38px;
    }


    .amaya-gallery-intro__title {
        margin-bottom: 25px;

        font-size:
            clamp(
                2.7rem,
                12vw,
                3.55rem
            );
    }


    .amaya-gallery-intro__lead {
        margin-bottom: 22px;

        padding-left: 22px;
    }


    .amaya-gallery-intro__quote {
        left: 10px;

        font-size: 4rem;
    }


    .amaya-gallery-intro__lead p {
        font-size:
            clamp(
                1.15rem,
                6vw,
                1.4rem
            );
    }


    .amaya-gallery-intro__body {
        grid-template-columns: 1fr;

        gap: 14px;

        padding-top: 20px;
    }


    .amaya-gallery-intro__body p {
        font-size: .69rem;

        line-height: 1.63;
    }


    .amaya-gallery-intro__discipline {
        grid-template-columns:
            25px
            minmax(0, 1fr)
            23px;

        min-height: 67px;

        padding:
            9px
            13px;
    }


    .amaya-gallery-intro__discipline:hover {
        padding-left: 13px;
    }


    .amaya-gallery-intro__discipline-copy strong {
        font-size: 1.02rem;
    }


    .amaya-gallery-intro__discipline-copy small {
        font-size: .42rem;
    }


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

        margin-top: 46px;
    }


    .amaya-gallery-intro__principle {
        gap: 13px;

        padding:
            20px
            0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(45, 91, 57, .09);
    }


    .amaya-gallery-intro__principle:last-child {
        border-bottom: 0;
    }


    .amaya-gallery-intro__principle-icon {
        width: 36px;
        height: 36px;
    }


    .amaya-gallery-intro__principle strong {
        font-size: 1.3rem;
    }


    .amaya-gallery-intro__principle p {
        font-size: .57rem;
    }


    .amaya-gallery-intro__note {
        grid-template-columns: 1fr;

        gap: 11px;

        margin-top: 25px;

        padding: 17px;
    }


    .amaya-gallery-intro__note p {
        font-size: .59rem;
    }


    .amaya-gallery-intro__note a {
        justify-self: start;

        margin-top: 3px;
    }


    .amaya-gallery-intro__botanical,
    .amaya-gallery-intro__ambient--one {
        display: none;
    }

}



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

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

    [data-amaya-gallery-intro-reveal] {
        opacity: 1 !important;

        transform: none !important;

        transition: none !important;
    }


    .amaya-gallery-intro__discipline,
    .amaya-gallery-intro__discipline::before,
    .amaya-gallery-intro__discipline-arrow,
    .amaya-gallery-intro__note a span {
        transition: none !important;
    }

}









































/* ============================================================
   06. LANDSCAPE DESIGN & RENOVATION
   GALLERY SERVICE SYSTEM
   AMAYA'S LANDSCAPING LLC
   ============================================================ */


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

.amaya-gallery-service {
    position: relative;

    overflow: hidden;

    background:
        var(--amaya-background-soft);

    border-top:
        1px solid
        rgba(45, 91, 57, .08);

    isolation: isolate;
}



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

.amaya-gallery-service__ambient {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.amaya-gallery-service__ambient--one {
    top: -300px;
    right: -270px;

    width: 650px;
    height: 650px;

    background:
        radial-gradient(
            circle,
            rgba(131, 169, 56, .075),
            transparent 67%
        );
}


.amaya-gallery-service__ambient--two {
    bottom: -360px;
    left: -320px;

    width: 720px;
    height: 720px;

    border:
        1px solid
        rgba(45, 91, 57, .045);
}


.amaya-gallery-service__ambient--two::before,
.amaya-gallery-service__ambient--two::after {
    content: '';

    position: absolute;

    border:
        1px solid
        rgba(45, 91, 57, .035);

    border-radius: 50%;
}


.amaya-gallery-service__ambient--two::before {
    inset: 80px;
}


.amaya-gallery-service__ambient--two::after {
    inset: 165px;
}



/* ============================================================
   03. LARGE DECORATIVE NUMBER
   ============================================================ */

.amaya-gallery-service__service-number {
    position: absolute;

    top: 4%;
    right: 2%;

    color:
        rgba(45, 91, 57, .035);

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

    font-size:
        clamp(
            11rem,
            20vw,
            20rem
        );

    font-weight: 600;

    line-height: .8;

    pointer-events: none;
}



/* ============================================================
   04. CONTAINER
   ============================================================ */

.amaya-gallery-service__container {
    position: relative;

    z-index: 2;
}



/* ============================================================
   05. HEADER
   ============================================================ */

.amaya-gallery-service__header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-bottom:
        clamp(
            45px,
            6vw,
            75px
        );

    padding-bottom: 19px;

    border-bottom:
        1px solid
        rgba(45, 91, 57, .11);
}



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

.amaya-gallery-service__eyebrow {
    display: flex;

    align-items: center;

    gap: 12px;

    color:
        var(--amaya-forest);

    font-size: .65rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.amaya-gallery-service__eyebrow-number {
    color:
        var(--amaya-brass);

    font-size: .57rem;
}


.amaya-gallery-service__eyebrow-line {
    width: 36px;
    height: 1px;

    background:
        rgba(45, 91, 57, .34);
}


.amaya-gallery-service__category {
    color:
        var(--amaya-text-muted);

    font-size: .48rem;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;
}



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

.amaya-gallery-service__layout {
    display: grid;

    grid-template-columns:
        minmax(0, .94fr)
        minmax(440px, 1.06fr);

    align-items: start;

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



/* ============================================================
   08. CONTENT
   ============================================================ */

.amaya-gallery-service__content {
    position: relative;

    max-width: 650px;
}



/* ============================================================
   09. TITLE
   ============================================================ */

.amaya-gallery-service__title {
    max-width: 680px;

    margin:
        0
        0
        27px;

    color:
        var(--amaya-ink);

    font-size:
        clamp(
            3.4rem,
            4.9vw,
            5.7rem
        );

    font-weight: 600;

    line-height: .88;

    letter-spacing: -.043em;
}


.amaya-gallery-service__title span {
    display: block;

    color:
        var(--amaya-forest);

    font-style: italic;

    font-weight: 500;
}



/* ============================================================
   10. LEAD
   ============================================================ */

.amaya-gallery-service__lead {
    max-width: 590px;

    margin:
        0
        0
        25px;

    padding-left: 21px;

    color:
        var(--amaya-charcoal);

    border-left:
        2px solid
        var(--amaya-brass);

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

    font-size:
        clamp(
            1.25rem,
            1.6vw,
            1.58rem
        );

    font-weight: 500;

    line-height: 1.35;
}



/* ============================================================
   11. DESCRIPTION
   ============================================================ */

.amaya-gallery-service__description {
    display: grid;

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

    gap: 24px;

    padding-top: 24px;

    border-top:
        1px solid
        rgba(45, 91, 57, .09);
}


.amaya-gallery-service__description p {
    margin: 0;

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

    font-size: .72rem;

    line-height: 1.72;
}



/* ============================================================
   12. SERVICE SCOPE
   ============================================================ */

.amaya-gallery-service__scope {
    margin-top: 34px;

    background:
        var(--amaya-white);

    border:
        1px solid
        rgba(45, 91, 57, .10);

    border-radius:
        var(--amaya-radius-md);

    box-shadow:
        var(--amaya-shadow-sm);
}


.amaya-gallery-service__scope-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    min-height: 53px;

    padding:
        0
        17px;

    border-bottom:
        1px solid
        rgba(45, 91, 57, .08);
}


.amaya-gallery-service__scope-head span {
    color:
        var(--amaya-forest-deep);

    font-size: .53rem;

    font-weight: 800;

    letter-spacing: .09em;

    text-transform: uppercase;
}


.amaya-gallery-service__scope-head small {
    color:
        var(--amaya-text-muted);

    font-size: .43rem;
}



/* ============================================================
   13. SCOPE GRID
   ============================================================ */

.amaya-gallery-service__scope-grid {
    display: grid;

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


.amaya-gallery-service__scope-item {
    display: grid;

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

    align-items: center;

    gap: 9px;

    min-height: 51px;

    padding:
        9px
        16px;

    border-bottom:
        1px solid
        rgba(45, 91, 57, .07);
}


.amaya-gallery-service__scope-item:nth-child(odd) {
    border-right:
        1px solid
        rgba(45, 91, 57, .07);
}


.amaya-gallery-service__scope-item:nth-last-child(-n + 2) {
    border-bottom: 0;
}


.amaya-gallery-service__scope-item span {
    color:
        var(--amaya-brass);

    font-size: .45rem;

    font-weight: 700;
}


.amaya-gallery-service__scope-item p {
    margin: 0;

    color:
        var(--amaya-charcoal);

    font-size: .57rem;

    font-weight: 600;

    line-height: 1.35;
}



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

.amaya-gallery-service__media {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(150px, .47fr);

    align-items: end;

    gap: 15px;

    min-height: 620px;
}



/* Decorative backing */

.amaya-gallery-service__media::before {
    content: '';

    position: absolute;

    top: 9%;
    right: 4%;
    bottom: 7%;
    left: 10%;

    z-index: -1;

    border:
        1px solid
        rgba(177, 138, 82, .18);

    pointer-events: none;
}



/* ============================================================
   15. IMAGE BUTTON
   ============================================================ */

.amaya-gallery-service__image {
    position: relative;

    display: block;

    width: 100%;

    padding: 0;

    overflow: hidden;

    background:
        var(--amaya-dark-surface-deep);

    border: 0;

    border-radius:
        var(--amaya-radius-md);

    box-shadow:
        var(--amaya-shadow-lg);

    cursor: zoom-in;

    text-align: left;
}


.amaya-gallery-service__image--primary {
    height: 570px;
}


.amaya-gallery-service__image--secondary {
    height: 330px;

    margin-bottom: 39px;

    transform:
        translateY(20px);
}


.amaya-gallery-service__image img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        1s
        cubic-bezier(.16, 1, .3, 1);
}


.amaya-gallery-service__image:hover img {
    transform:
        scale(1.045);
}



/* ============================================================
   16. IMAGE SHADE
   ============================================================ */

.amaya-gallery-service__image-shade {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            transparent 48%,
            rgba(8, 17, 11, .18) 67%,
            rgba(8, 17, 11, .80) 100%
        );

    pointer-events: none;
}



/* ============================================================
   17. IMAGE LABEL
   ============================================================ */

.amaya-gallery-service__image-label {
    position: absolute;

    right: 19px;
    bottom: 18px;
    left: 19px;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 3px;

    color:
        var(--amaya-white);

    pointer-events: none;
}


.amaya-gallery-service__image-label span {
    color:
        var(--amaya-leaf-light);

    font-size: .46rem;

    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.amaya-gallery-service__image-label strong {
    font-family:
        var(--amaya-font-heading);

    font-size:
        clamp(
            1.25rem,
            1.8vw,
            1.7rem
        );

    font-weight: 600;

    line-height: 1;
}



/* ============================================================
   18. EXPAND
   ============================================================ */

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

    top: 14px;
    right: 14px;

    z-index: 3;

    display: grid;

    place-items: center;

    width: 35px;
    height: 35px;

    color:
        var(--amaya-white);

    background:
        rgba(8, 17, 11, .42);

    border:
        1px solid
        rgba(255, 255, 255, .17);

    border-radius:
        var(--amaya-radius-sm);

    backdrop-filter:
        blur(8px);

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

    transition:
        color var(--amaya-transition),
        background-color var(--amaya-transition),
        transform var(--amaya-transition);

    pointer-events: none;
}


.amaya-gallery-service__image-expand svg {
    width: 15px;
    height: 15px;

    stroke: currentColor;

    stroke-width: 1.5;

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


.amaya-gallery-service__image:hover
.amaya-gallery-service__image-expand {
    color:
        var(--amaya-ink);

    background:
        var(--amaya-leaf-light);

    transform:
        scale(1.05);
}



/* ============================================================
   19. FOCUS AREAS
   ============================================================ */

.amaya-gallery-service__focus {
    display: grid;

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

    margin-top:
        clamp(
            60px,
            8vw,
            100px);

    border-top:
        1px solid
        rgba(45, 91, 57, .11);

    border-bottom:
        1px solid
        rgba(45, 91, 57, .11);
}


.amaya-gallery-service__focus-item {
    padding:
        30px
        34px;

    border-right:
        1px solid
        rgba(45, 91, 57, .09);
}


.amaya-gallery-service__focus-item:first-child {
    padding-left: 0;
}


.amaya-gallery-service__focus-item:last-child {
    padding-right: 0;

    border-right: 0;
}



/* ============================================================
   20. FOCUS TOP
   ============================================================ */

.amaya-gallery-service__focus-top {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;
}


.amaya-gallery-service__focus-top > span:first-child {
    color:
        var(--amaya-brass);

    font-size: .5rem;

    font-weight: 700;
}


.amaya-gallery-service__focus-line {
    width: 35px;
    height: 1px;

    background:
        rgba(45, 91, 57, .25);
}


.amaya-gallery-service__focus-item h3 {
    margin:
        0
        0
        10px;

    color:
        var(--amaya-forest-deep);

    font-size:
        clamp(
            1.7rem,
            2.4vw,
            2.35rem
        );

    font-weight: 600;

    line-height: 1;
}


.amaya-gallery-service__focus-item p {
    max-width: 330px;

    margin: 0;

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

    font-size: .64rem;

    line-height: 1.6;
}



/* ============================================================
   21. FOOTER
   ============================================================ */

.amaya-gallery-service__footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 30px;

    padding:
        18px
        20px;

    background:
        var(--amaya-white);

    border:
        1px solid
        rgba(45, 91, 57, .10);

    border-radius:
        var(--amaya-radius-sm);
}


.amaya-gallery-service__footer p {
    margin: 0;

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

    font-size: .62rem;

    line-height: 1.5;
}


.amaya-gallery-service__footer a {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color:
        var(--amaya-forest);

    font-size: .57rem;

    font-weight: 800;

    white-space: nowrap;
}


.amaya-gallery-service__footer
a span:last-child {
    color:
        var(--amaya-brass);

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


.amaya-gallery-service__footer
a:hover span:last-child {
    transform:
        translateX(4px);
}



/* ============================================================
   22. REVEAL
   ============================================================ */

[data-amaya-service-reveal] {
    opacity: 0;

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


.amaya-gallery-service.amaya-gallery-service--visible
[data-amaya-service-reveal] {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        opacity .7s ease,
        transform .9s
        cubic-bezier(.22, 1, .36, 1);
}


.amaya-gallery-service.amaya-gallery-service--visible
.amaya-gallery-service__title {
    transition-delay: .05s;
}


.amaya-gallery-service.amaya-gallery-service--visible
.amaya-gallery-service__lead {
    transition-delay: .09s;
}


.amaya-gallery-service.amaya-gallery-service--visible
.amaya-gallery-service__description {
    transition-delay: .13s;
}


.amaya-gallery-service.amaya-gallery-service--visible
.amaya-gallery-service__scope {
    transition-delay: .17s;
}


.amaya-gallery-service.amaya-gallery-service--visible
.amaya-gallery-service__media {
    transition-delay: .11s;
}


.amaya-gallery-service.amaya-gallery-service--visible
.amaya-gallery-service__focus {
    transition-delay: .20s;
}


.amaya-gallery-service.amaya-gallery-service--visible
.amaya-gallery-service__footer {
    transition-delay: .24s;
}



/* ============================================================
   23. DESKTOP
   ============================================================ */

@media (min-width: 1200px) {

    .amaya-gallery-service__layout {
        grid-template-columns:
            minmax(0, .94fr)
            minmax(470px, 1.06fr);
    }


    .amaya-gallery-service__media {
        min-height: 620px;
    }

}



/* ============================================================
   24. TABLET / SMALL LAPTOP
   ============================================================ */

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

    .amaya-gallery-service__layout {
        grid-template-columns:
            minmax(0, .95fr)
            minmax(330px, 1.05fr);

        gap: 43px;
    }


    .amaya-gallery-service__title {
        font-size:
            clamp(
                3.1rem,
                5.8vw,
                4.6rem
            );
    }


    .amaya-gallery-service__description {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .amaya-gallery-service__media {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(115px, .42fr);

        min-height: 520px;
    }


    .amaya-gallery-service__image--primary {
        height: 490px;
    }


    .amaya-gallery-service__image--secondary {
        height: 270px;
    }


    .amaya-gallery-service__scope-grid {
        grid-template-columns: 1fr;
    }


    .amaya-gallery-service__scope-item {
        border-right: 0 !important;

        border-bottom:
            1px solid
            rgba(45, 91, 57, .07) !important;
    }


    .amaya-gallery-service__scope-item:last-child {
        border-bottom: 0 !important;
    }


    .amaya-gallery-service__focus-item {
        padding:
            26px
            25px;
    }


    .amaya-gallery-service__focus-item:first-child {
        padding-left: 0;
    }


    .amaya-gallery-service__focus-item:last-child {
        padding-right: 0;
    }

}



/* ============================================================
   25. MOBILE
   ============================================================ */

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

    .amaya-gallery-service__header {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;

        margin-bottom: 42px;
    }


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

        gap: 45px;
    }


    .amaya-gallery-service__content {
        max-width: none;
    }


    .amaya-gallery-service__title {
        max-width: 600px;

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


    .amaya-gallery-service__description {
        max-width: 620px;
    }


    .amaya-gallery-service__media {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(150px, .45fr);

        min-height: 500px;
    }


    .amaya-gallery-service__image--primary {
        height: 470px;
    }


    .amaya-gallery-service__image--secondary {
        height: 280px;
    }


    .amaya-gallery-service__focus {
        grid-template-columns: 1fr;
    }


    .amaya-gallery-service__focus-item {
        padding:
            23px
            0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(45, 91, 57, .09);
    }


    .amaya-gallery-service__focus-item:last-child {
        border-bottom: 0;
    }

}



/* ============================================================
   26. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .amaya-gallery-service__header {
        align-items: flex-start;

        flex-direction: column;

        gap: 9px;

        margin-bottom: 35px;
    }


    .amaya-gallery-service__eyebrow {
        gap: 9px;

        font-size: .54rem;
    }


    .amaya-gallery-service__eyebrow-line {
        width: 27px;
    }


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

        gap: 36px;
    }


    .amaya-gallery-service__title {
        margin-bottom: 22px;

        font-size:
            clamp(
                2.65rem,
                11.8vw,
                3.5rem
            );
    }


    .amaya-gallery-service__lead {
        padding-left: 16px;

        font-size:
            1.15rem;
    }


    .amaya-gallery-service__description {
        grid-template-columns: 1fr;

        gap: 13px;

        padding-top: 20px;
    }


    .amaya-gallery-service__description p {
        font-size: .67rem;
    }


    .amaya-gallery-service__scope {
        margin-top: 27px;
    }


    .amaya-gallery-service__scope-head {
        align-items: flex-start;

        flex-direction: column;

        justify-content: center;

        gap: 2px;

        min-height: 58px;
    }


    .amaya-gallery-service__scope-grid {
        grid-template-columns: 1fr;
    }


    .amaya-gallery-service__scope-item {
        border-right: 0 !important;

        border-bottom:
            1px solid
            rgba(45, 91, 57, .07) !important;
    }


    .amaya-gallery-service__scope-item:last-child {
        border-bottom: 0 !important;
    }


    /* MEDIA */

    .amaya-gallery-service__media {
        grid-template-columns:
            minmax(0, 1.55fr)
            minmax(90px, .65fr);

        gap: 9px;

        min-height: 390px;
    }


    .amaya-gallery-service__media::before {
        top: 7%;
        right: 3%;
        bottom: 5%;
        left: 8%;
    }


    .amaya-gallery-service__image--primary {
        height: 370px;
    }


    .amaya-gallery-service__image--secondary {
        height: 220px;

        margin-bottom: 28px;

        transform:
            translateY(15px);
    }


    .amaya-gallery-service__image-label {
        right: 11px;
        bottom: 11px;
        left: 11px;
    }


    .amaya-gallery-service__image-label strong {
        font-size: 1rem;
    }


    .amaya-gallery-service__image--secondary
    .amaya-gallery-service__image-label {
        display: none;
    }


    .amaya-gallery-service__image-expand {
        top: 9px;
        right: 9px;

        width: 30px;
        height: 30px;
    }


    /* FOCUS */

    .amaya-gallery-service__focus {
        grid-template-columns: 1fr;

        margin-top: 49px;
    }


    .amaya-gallery-service__focus-item {
        padding:
            21px
            0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(45, 91, 57, .09);
    }


    .amaya-gallery-service__focus-item:last-child {
        border-bottom: 0;
    }


    .amaya-gallery-service__focus-item h3 {
        font-size: 1.7rem;
    }


    .amaya-gallery-service__focus-item p {
        font-size: .6rem;
    }


    /* FOOTER */

    .amaya-gallery-service__footer {
        align-items: flex-start;

        flex-direction: column;

        gap: 11px;

        padding: 16px;
    }


    .amaya-gallery-service__footer p {
        font-size: .58rem;
    }


    .amaya-gallery-service__service-number {
        display: none;
    }

}



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

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

    [data-amaya-service-reveal] {
        opacity: 1 !important;

        transform: none !important;

        transition: none !important;
    }


    .amaya-gallery-service__image img,
    .amaya-gallery-service__image-expand,
    .amaya-gallery-service__footer a span {
        transition: none !important;
    }

}






























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

.amaya-gallery-viewer {
    position: fixed;

    inset: 0;

    z-index: 999999;

    display: grid;

    place-items: center;

    width: 100vw;
    height: 100dvh;

    padding:
        28px;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;

    isolation: isolate;
}


.amaya-gallery-viewer.amaya-gallery-viewer--open {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


.amaya-gallery-viewer__backdrop {
    position: absolute;

    inset: 0;

    z-index: -1;

    width: 100%;
    height: 100%;

    padding: 0;

    background:
        rgba(6, 12, 8, .96);

    border: 0;

    cursor: zoom-out;

    backdrop-filter:
        blur(11px);

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


.amaya-gallery-viewer__stage {
    position: relative;

    display: grid;

    place-items: center;

    width: 100%;
    height: 100%;

    pointer-events: none;
}


.amaya-gallery-viewer__image {
    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius:
        var(--amaya-radius-sm);

    box-shadow:
        0 30px 100px
        rgba(0, 0, 0, .48);

    pointer-events: auto;
}


.amaya-gallery-viewer__close {
    position: fixed;

    top: 22px;
    right: 22px;

    z-index: 5;

    width: 44px;
    height: 44px;

    background:
        rgba(255, 255, 255, .09);

    border:
        1px solid
        rgba(255, 255, 255, .17);

    border-radius:
        var(--amaya-radius-sm);

    cursor: pointer;

    pointer-events: auto;

    backdrop-filter:
        blur(10px);

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


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

    top: 50%;
    left: 50%;

    width: 17px;
    height: 1px;

    background:
        var(--amaya-white);
}


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


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


html.amaya-gallery-viewer-open,
body.amaya-gallery-viewer-open {
    overflow: hidden;
}


@media (min-width: 1200px) {

    .amaya-gallery-viewer {
        padding: 36px;
    }

}


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

    .amaya-gallery-viewer {
        padding: 28px;
    }

}


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

    .amaya-gallery-viewer {
        padding: 20px;
    }


    .amaya-gallery-viewer__close {
        top: 16px;
        right: 16px;
    }

}


@media (max-width: 480px) {

    .amaya-gallery-viewer {
        padding:
            60px
            10px
            16px;
    }


    .amaya-gallery-viewer__close {
        top: 12px;
        right: 12px;

        width: 40px;
        height: 40px;
    }

}


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

    .amaya-gallery-viewer {
        transition: none !important;
    }

}

































/* ============================================================
   07. PLANTS & FLOWERS
   AMAYA'S LANDSCAPING LLC
   ============================================================ */


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

.amaya-gallery-service--planting {
    position: relative;

    background:
        radial-gradient(
            circle at 8% 13%,
            rgba(131, 169, 56, .09),
            transparent 30rem
        ),
        linear-gradient(
            180deg,
            var(--amaya-sage-light) 0%,
            var(--amaya-ivory) 52%,
            var(--amaya-background-soft) 100%
        );

    border-top:
        1px solid
        rgba(45, 91, 57, .10);
}



/* ============================================================
   02. AMBIENT ELEMENTS
   ============================================================ */

.amaya-planting__ambient {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.amaya-planting__ambient--one {
    top: -300px;
    left: -250px;

    width: 640px;
    height: 640px;

    border:
        1px solid
        rgba(45, 91, 57, .05);
}


.amaya-planting__ambient--one::before,
.amaya-planting__ambient--one::after {
    content: '';

    position: absolute;

    border:
        1px solid
        rgba(45, 91, 57, .04);

    border-radius: 50%;
}


.amaya-planting__ambient--one::before {
    inset: 75px;
}


.amaya-planting__ambient--one::after {
    inset: 155px;
}


.amaya-planting__ambient--two {
    right: -280px;
    bottom: -330px;

    width: 680px;
    height: 680px;

    background:
        radial-gradient(
            circle,
            rgba(177, 138, 82, .07),
            transparent 67%
        );
}



/* ============================================================
   03. BOTANICAL
   ============================================================ */

.amaya-planting__botanical {
    position: absolute;

    top: 19%;
    right: 1.5%;

    width: 165px;

    color:
        var(--amaya-forest);

    opacity: .045;

    pointer-events: none;
}


.amaya-planting__botanical svg {
    display: block;

    width: 100%;
    height: auto;

    stroke:
        currentColor;

    stroke-width: 1.1;

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



/* ============================================================
   04. DECORATIVE NUMBER
   ============================================================ */

.amaya-planting__number {
    position: absolute;

    top: 5%;
    left: 1%;

    color:
        rgba(45, 91, 57, .035);

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

    font-size:
        clamp(
            11rem,
            19vw,
            19rem
        );

    font-weight: 600;

    line-height: .8;

    pointer-events: none;
}



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

.amaya-planting__container {
    position: relative;

    z-index: 2;
}



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

.amaya-planting__header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-bottom:
        clamp(
            45px,
            6vw,
            75px
        );

    padding-bottom: 19px;

    border-bottom:
        1px solid
        rgba(45, 91, 57, .11);
}



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

.amaya-planting__layout {
    display: grid;

    grid-template-columns:
        minmax(440px, 1.05fr)
        minmax(0, .95fr);

    align-items: center;

    gap:
        clamp(
            65px,
            9vw,
            135px
        );
}



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

.amaya-planting__media {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(155px, .46fr);

    align-items: end;

    gap: 14px;

    min-height: 625px;

    padding-top: 45px;
}



/* ============================================================
   09. MEDIA NOTE
   ============================================================ */

.amaya-planting__media-note {
    position: absolute;

    top: 0;
    left: 0;

    display: flex;

    align-items: center;

    gap: 11px;

    color:
        var(--amaya-forest);
}


.amaya-planting__media-note > span {
    font-size: .49rem;

    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.amaya-planting__media-note i {
    width: 35px;
    height: 1px;

    background:
        rgba(45, 91, 57, .25);
}


.amaya-planting__media-note small {
    color:
        var(--amaya-text-muted);

    font-size: .43rem;

    letter-spacing: .06em;
}



/* ============================================================
   10. DECORATIVE MEDIA FRAME
   ============================================================ */

.amaya-planting__media-frame {
    position: absolute;

    top: 13%;
    right: 4%;
    bottom: 3%;
    left: 7%;

    z-index: -1;

    border:
        1px solid
        rgba(177, 138, 82, .21);

    pointer-events: none;
}


.amaya-planting__media-frame::before {
    content: '';

    position: absolute;

    top: -1px;
    left: 11%;

    width: 90px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--amaya-brass),
            transparent
        );
}



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

.amaya-planting__image {
    position: relative;

    display: block;

    width: 100%;

    padding: 0;

    overflow: hidden;

    background:
        var(--amaya-dark-surface-deep);

    border: 0;

    border-radius:
        var(--amaya-radius-md);

    box-shadow:
        var(--amaya-shadow-lg);

    cursor: zoom-in;

    text-align: left;
}


.amaya-planting__image--primary {
    height: 550px;
}


.amaya-planting__image--secondary {
    height: 310px;

    margin-bottom: 47px;

    transform:
        translate3d(
            0,
            calc(
                18px +
                var(--amaya-planting-media-shift, 0px)
            ),
            0
        );
}


.amaya-planting__image img {
    position: absolute;

    inset: -3% 0;

    width: 100%;
    height: 106%;

    object-fit: cover;

    transition:
        transform
        .95s
        cubic-bezier(.16, 1, .3, 1);
}


.amaya-planting__image--primary img {
    transform:
        translate3d(
            0,
            calc(
                var(--amaya-planting-media-shift, 0px) * -.55
            ),
            0
        )
        scale(1.02);
}


.amaya-planting__image--secondary img {
    transform:
        translate3d(
            0,
            calc(
                var(--amaya-planting-media-shift, 0px) * -.25
            ),
            0
        )
        scale(1.02);
}


.amaya-planting__image:hover img {
    scale: 1.035;
}



/* ============================================================
   12. IMAGE OVERLAY
   ============================================================ */

.amaya-planting__image-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(8, 17, 11, .15) 65%,
            rgba(8, 17, 11, .78) 100%
        );

    pointer-events: none;
}



/* ============================================================
   13. IMAGE CAPTION
   ============================================================ */

.amaya-planting__image-caption {
    position: absolute;

    right: 18px;
    bottom: 17px;
    left: 18px;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 3px;

    color:
        var(--amaya-white);

    pointer-events: none;
}


.amaya-planting__image-caption small {
    color:
        var(--amaya-leaf-light);

    font-size: .45rem;

    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.amaya-planting__image-caption strong {
    font-family:
        var(--amaya-font-heading);

    font-size:
        clamp(
            1.25rem,
            1.7vw,
            1.65rem
        );

    font-weight: 600;

    line-height: 1;
}



/* ============================================================
   14. EXPAND BUTTON
   ============================================================ */

.amaya-planting__expand {
    position: absolute;

    top: 14px;
    right: 14px;

    z-index: 3;

    display: grid;

    place-items: center;

    width: 35px;
    height: 35px;

    color:
        var(--amaya-white);

    background:
        rgba(8, 17, 11, .42);

    border:
        1px solid
        rgba(255, 255, 255, .17);

    border-radius:
        var(--amaya-radius-sm);

    backdrop-filter:
        blur(8px);

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

    pointer-events: none;

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


.amaya-planting__expand svg {
    width: 15px;
    height: 15px;

    stroke:
        currentColor;

    stroke-width: 1.5;

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


.amaya-planting__image:hover
.amaya-planting__expand {
    color:
        var(--amaya-ink);

    background:
        var(--amaya-leaf-light);

    transform:
        scale(1.05);
}



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

.amaya-planting__content {
    max-width: 630px;
}



/* ============================================================
   16. KICKER
   ============================================================ */

.amaya-planting__kicker {
    display: block;

    margin-bottom: 16px;

    color:
        var(--amaya-brass);

    font-size: .53rem;

    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}



/* ============================================================
   17. TITLE
   ============================================================ */

.amaya-planting__title {
    max-width: 650px;

    margin:
        0
        0
        27px;

    color:
        var(--amaya-ink);

    font-size:
        clamp(
            3.5rem,
            4.9vw,
            5.7rem
        );

    font-weight: 600;

    line-height: .87;

    letter-spacing: -.044em;
}


.amaya-planting__title span {
    display: block;

    color:
        var(--amaya-forest);

    font-style: italic;

    font-weight: 500;
}



/* ============================================================
   18. LEAD
   ============================================================ */

.amaya-planting__lead {
    max-width: 570px;

    margin:
        0
        0
        25px;

    padding-left: 20px;

    color:
        var(--amaya-charcoal);

    border-left:
        2px solid
        var(--amaya-brass);

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

    font-size:
        clamp(
            1.22rem,
            1.55vw,
            1.55rem
        );

    font-weight: 500;

    line-height: 1.36;
}



/* ============================================================
   19. DESCRIPTION
   ============================================================ */

.amaya-planting__description {
    display: grid;

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

    gap: 23px;

    padding-top: 23px;

    border-top:
        1px solid
        rgba(45, 91, 57, .09);
}


.amaya-planting__description p {
    margin: 0;

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

    font-size: .71rem;

    line-height: 1.72;
}



/* ============================================================
   20. BENEFITS
   ============================================================ */

.amaya-planting__benefits {
    margin-top: 32px;

    overflow: hidden;

    background:
        rgba(254, 254, 254, .80);

    border:
        1px solid
        rgba(45, 91, 57, .11);

    border-radius:
        var(--amaya-radius-md);

    box-shadow:
        var(--amaya-shadow-sm);
}



/* ============================================================
   21. BENEFITS HEADER
   ============================================================ */

.amaya-planting__benefits-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    min-height: 52px;

    padding:
        0
        17px;

    border-bottom:
        1px solid
        rgba(45, 91, 57, .08);
}


.amaya-planting__benefits-head span {
    color:
        var(--amaya-forest-deep);

    font-size: .52rem;

    font-weight: 800;

    letter-spacing: .09em;

    text-transform: uppercase;
}


.amaya-planting__benefits-head small {
    color:
        var(--amaya-text-muted);

    font-size: .43rem;
}



/* ============================================================
   22. BENEFIT
   ============================================================ */

.amaya-planting__benefit {
    display: grid;

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

    align-items: start;

    gap: 11px;

    padding:
        14px
        17px;

    border-bottom:
        1px solid
        rgba(45, 91, 57, .075);
}


.amaya-planting__benefit:last-child {
    border-bottom: 0;
}


.amaya-planting__benefit-number {
    padding-top: 3px;

    color:
        var(--amaya-brass);

    font-size: .46rem;

    font-weight: 700;
}


.amaya-planting__benefit strong {
    display: block;

    margin-bottom: 3px;

    color:
        var(--amaya-forest-deep);

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

    font-size: 1.1rem;

    font-weight: 600;

    line-height: 1;
}


.amaya-planting__benefit p {
    margin: 0;

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

    font-size: .52rem;

    line-height: 1.5;
}



/* ============================================================
   23. FEATURES
   ============================================================ */

.amaya-planting__features {
    display: grid;

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

    margin-top:
        clamp(
            60px,
            8vw,
            100px);

    border-top:
        1px solid
        rgba(45, 91, 57, .11);

    border-bottom:
        1px solid
        rgba(45, 91, 57, .11);
}



/* ============================================================
   24. FEATURE
   ============================================================ */

.amaya-planting__feature {
    padding:
        29px
        30px;

    border-right:
        1px solid
        rgba(45, 91, 57, .09);
}


.amaya-planting__feature:first-child {
    padding-left: 0;
}


.amaya-planting__feature:last-child {
    padding-right: 0;

    border-right: 0;
}


.amaya-planting__feature-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 17px;
}


.amaya-planting__feature-top > span:first-child {
    color:
        var(--amaya-brass);

    font-size: .46rem;

    font-weight: 700;
}



/* ============================================================
   25. FEATURE ICON
   ============================================================ */

.amaya-planting__feature-icon {
    display: grid;

    place-items: center;

    width: 34px;
    height: 34px;

    color:
        var(--amaya-forest);

    background:
        rgba(213, 221, 207, .55);

    border:
        1px solid
        rgba(45, 91, 57, .09);

    border-radius:
        var(--amaya-radius-sm);
}


.amaya-planting__feature-icon svg {
    width: 15px;
    height: 15px;

    stroke:
        currentColor;

    stroke-width: 1.45;

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


.amaya-planting__feature h3 {
    margin:
        0
        0
        9px;

    color:
        var(--amaya-forest-deep);

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

    font-weight: 600;

    line-height: 1;
}


.amaya-planting__feature p {
    margin: 0;

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

    font-size: .59rem;

    line-height: 1.55;
}



/* ============================================================
   26. CTA
   ============================================================ */

.amaya-planting__cta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    margin-top: 30px;

    padding:
        20px
        22px;

    color:
        var(--amaya-white);

    background:
        var(--amaya-dark-surface-deep);

    border:
        1px solid
        rgba(45, 91, 57, .12);

    border-radius:
        var(--amaya-radius-md);

    box-shadow:
        var(--amaya-shadow-sm);
}


.amaya-planting__cta-copy {
    display: flex;

    align-items: center;

    gap: 18px;
}


.amaya-planting__cta-copy > span {
    color:
        var(--amaya-leaf-light);

    font-size: .5rem;

    font-weight: 800;

    letter-spacing: .10em;

    text-transform: uppercase;

    white-space: nowrap;
}


.amaya-planting__cta-copy p {
    margin: 0;

    color:
        rgba(255, 255, 255, .57);

    font-size: .61rem;

    line-height: 1.5;
}


.amaya-planting__cta > a {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    flex: 0 0 auto;

    color:
        var(--amaya-white);

    font-size: .57rem;

    font-weight: 800;
}


.amaya-planting__cta-arrow {
    display: grid;

    place-items: center;

    width: 28px;
    height: 28px;

    color:
        var(--amaya-ink);

    background:
        var(--amaya-leaf-light);

    border-radius: 4px;

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


.amaya-planting__cta > a:hover
.amaya-planting__cta-arrow {
    color:
        var(--amaya-white);

    background:
        var(--amaya-forest);

    transform:
        translateX(3px);
}



/* ============================================================
   27. DESKTOP
   ============================================================ */

@media (min-width: 1200px) {

    .amaya-planting__layout {
        grid-template-columns:
            minmax(470px, 1.05fr)
            minmax(0, .95fr);
    }


    .amaya-planting__media {
        min-height: 625px;
    }

}



/* ============================================================
   28. TABLET / SMALL LAPTOP
   ============================================================ */

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

    .amaya-planting__layout {
        grid-template-columns:
            minmax(340px, 1fr)
            minmax(0, 1fr);

        gap: 45px;
    }


    .amaya-planting__title {
        font-size:
            clamp(
                3.05rem,
                5.8vw,
                4.55rem
            );
    }


    .amaya-planting__media {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(110px, .40fr);

        min-height: 520px;
    }


    .amaya-planting__image--primary {
        height: 480px;
    }


    .amaya-planting__image--secondary {
        height: 260px;
    }


    .amaya-planting__description {
        grid-template-columns: 1fr;

        gap: 13px;
    }


    .amaya-planting__features {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .amaya-planting__feature {
        padding:
            25px
            25px;

        border-bottom:
            1px solid
            rgba(45, 91, 57, .09);
    }


    .amaya-planting__feature:nth-child(2) {
        border-right: 0;
    }


    .amaya-planting__feature:nth-last-child(-n + 2) {
        border-bottom: 0;
    }


    .amaya-planting__feature:first-child {
        padding-left: 0;
    }


    .amaya-planting__feature:nth-child(3) {
        padding-left: 0;
    }


    .amaya-planting__feature:last-child {
        padding-right: 0;
    }

}



/* ============================================================
   29. MOBILE
   ============================================================ */

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

    .amaya-planting__header {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;

        margin-bottom: 42px;
    }


    .amaya-planting__layout {
        grid-template-columns: 1fr;

        gap: 46px;
    }


    /*
       On mobile we show content first.
       Photography remains visually prominent afterwards.
    */

    .amaya-planting__content {
        order: 1;

        max-width: none;
    }


    .amaya-planting__media {
        order: 2;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(145px, .43fr);

        min-height: 500px;
    }


    .amaya-planting__title {
        max-width: 600px;

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


    .amaya-planting__description {
        max-width: 620px;
    }


    .amaya-planting__image--primary {
        height: 465px;
    }


    .amaya-planting__image--secondary {
        height: 270px;
    }


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

        margin-top: 58px;
    }


    .amaya-planting__feature {
        padding:
            23px
            22px;

        border-bottom:
            1px solid
            rgba(45, 91, 57, .09);
    }


    .amaya-planting__feature:nth-child(2) {
        border-right: 0;
    }


    .amaya-planting__feature:nth-child(3) {
        padding-left: 0;

        border-bottom: 0;
    }


    .amaya-planting__feature:nth-child(4) {
        padding-right: 0;

        border-bottom: 0;
    }


    .amaya-planting__cta {
        align-items: flex-start;

        flex-direction: column;

        gap: 16px;
    }


    .amaya-planting__cta-copy {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }

}



/* ============================================================
   30. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .amaya-planting__header {
        align-items: flex-start;

        flex-direction: column;

        gap: 9px;

        margin-bottom: 35px;
    }


    .amaya-planting__layout {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    .amaya-planting__content {
        order: 1;

        max-width: none;
    }


    .amaya-planting__media {
        order: 2;

        grid-template-columns:
            minmax(0, 1.55fr)
            minmax(90px, .65fr);

        gap: 9px;

        min-height: 395px;

        padding-top: 39px;
    }


    .amaya-planting__media-note {
        gap: 7px;
    }


    .amaya-planting__media-note i {
        width: 21px;
    }


    .amaya-planting__media-note small {
        font-size: .37rem;
    }


    .amaya-planting__kicker {
        margin-bottom: 12px;

        font-size: .47rem;
    }


    .amaya-planting__title {
        margin-bottom: 22px;

        font-size:
            clamp(
                2.65rem,
                11.8vw,
                3.5rem
            );
    }


    .amaya-planting__lead {
        padding-left: 16px;

        font-size: 1.13rem;
    }


    .amaya-planting__description {
        grid-template-columns: 1fr;

        gap: 13px;

        padding-top: 20px;
    }


    .amaya-planting__description p {
        font-size: .67rem;
    }


    .amaya-planting__benefits {
        margin-top: 27px;
    }


    .amaya-planting__benefits-head {
        min-height: 55px;
    }


    .amaya-planting__benefit {
        padding:
            13px
            14px;
    }


    .amaya-planting__image--primary {
        height: 370px;
    }


    .amaya-planting__image--secondary {
        height: 218px;

        margin-bottom: 28px;

        transform:
            translate3d(
                0,
                calc(
                    14px +
                    var(--amaya-planting-media-shift, 0px)
                ),
                0
            );
    }


    .amaya-planting__image-caption {
        right: 11px;
        bottom: 11px;
        left: 11px;
    }


    .amaya-planting__image-caption strong {
        font-size: 1rem;
    }


    .amaya-planting__image--secondary
    .amaya-planting__image-caption {
        display: none;
    }


    .amaya-planting__expand {
        top: 9px;
        right: 9px;

        width: 30px;
        height: 30px;
    }


    .amaya-planting__features {
        grid-template-columns: 1fr;

        margin-top: 48px;
    }


    .amaya-planting__feature {
        padding:
            20px
            0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(45, 91, 57, .09);
    }


    .amaya-planting__feature:last-child {
        border-bottom: 0;
    }


    .amaya-planting__feature h3 {
        font-size: 1.55rem;
    }


    .amaya-planting__feature p {
        font-size: .58rem;
    }


    .amaya-planting__cta {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;

        padding: 17px;
    }


    .amaya-planting__cta-copy {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }


    .amaya-planting__cta-copy p {
        font-size: .57rem;
    }


    .amaya-planting__number,
    .amaya-planting__botanical,
    .amaya-planting__ambient--one {
        display: none;
    }

}



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

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

    .amaya-planting__image,
    .amaya-planting__image img {
        transform: none !important;

        transition: none !important;
    }


    .amaya-planting__expand,
    .amaya-planting__cta-arrow {
        transition: none !important;
    }

}


































/* ============================================================
   08. SOD INSTALLATION
   AMAYA'S LANDSCAPING LLC
   ============================================================ */


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

.amaya-sod {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            var(--amaya-background-soft) 0%,
            var(--amaya-ivory) 100%
        );

    border-top:
        1px solid
        rgba(45, 91, 57, .09);

    isolation: isolate;
}



/* ============================================================
   02. DECORATIVE ELEMENTS
   ============================================================ */

.amaya-sod__ambient {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.amaya-sod__ambient--one {
    top: -330px;
    right: -260px;

    width: 670px;
    height: 670px;

    background:
        radial-gradient(
            circle,
            rgba(131, 169, 56, .08),
            transparent 68%
        );
}


.amaya-sod__ambient--two {
    bottom: -350px;
    left: -310px;

    width: 690px;
    height: 690px;

    border:
        1px solid
        rgba(45, 91, 57, .045);
}


.amaya-sod__ambient--two::before,
.amaya-sod__ambient--two::after {
    content: '';

    position: absolute;

    border:
        1px solid
        rgba(45, 91, 57, .035);

    border-radius: 50%;
}


.amaya-sod__ambient--two::before {
    inset: 80px;
}


.amaya-sod__ambient--two::after {
    inset: 165px;
}



/* ============================================================
   03. LARGE NUMBER
   ============================================================ */

.amaya-sod__number {
    position: absolute;

    top: 5%;
    right: 1%;

    color:
        rgba(45, 91, 57, .035);

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

    font-size:
        clamp(
            11rem,
            19vw,
            19rem
        );

    font-weight: 600;

    line-height: .8;

    pointer-events: none;
}



/* ============================================================
   04. CONTAINER
   ============================================================ */

.amaya-sod__container {
    position: relative;

    z-index: 2;
}



/* ============================================================
   05. HEADER
   ============================================================ */

.amaya-sod__header {
    display: flex;

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

    gap: 30px;

    margin-bottom:
        clamp(
            45px,
            6vw,
            72px
        );

    padding-bottom: 19px;

    border-bottom:
        1px solid
        rgba(45, 91, 57, .11);
}



/* ============================================================
   06. INTRO
   ============================================================ */

.amaya-sod__intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(330px, .85fr);

    align-items: end;

    gap:
        clamp(
            55px,
            8vw,
            120px
        );

    margin-bottom:
        clamp(
            55px,
            7vw,
            90px
        );
}


.amaya-sod__kicker {
    display: block;

    margin-bottom: 14px;

    color:
        var(--amaya-brass);

    font-size: .52rem;

    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}



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

.amaya-sod__title {
    max-width: 760px;

    margin: 0;

    color:
        var(--amaya-ink);

    font-size:
        clamp(
            3.6rem,
            5.2vw,
            6rem
        );

    font-weight: 600;

    line-height: .87;

    letter-spacing: -.044em;
}


.amaya-sod__title span {
    display: block;

    color:
        var(--amaya-forest);

    font-style: italic;

    font-weight: 500;
}



/* ============================================================
   08. INTRO COPY
   ============================================================ */

.amaya-sod__intro-copy {
    max-width: 510px;

    padding-left: 25px;

    border-left:
        1px solid
        rgba(177, 138, 82, .32);
}


.amaya-sod__lead {
    margin:
        0
        0
        17px;

    color:
        var(--amaya-charcoal);

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

    font-size:
        clamp(
            1.2rem,
            1.6vw,
            1.55rem
        );

    font-weight: 500;

    line-height: 1.35;
}


.amaya-sod__intro-copy > p:last-child {
    margin: 0;

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

    font-size: .71rem;

    line-height: 1.7;
}



/* ============================================================
   09. PROCESS
   ============================================================ */

.amaya-sod__process {
    position: relative;

    display: grid;

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

    gap:
        clamp(
            35px,
            5vw,
            70px
        );

    margin-bottom:
        clamp(
            65px,
            8vw,
            105px
        );
}



/* ============================================================
   10. PROCESS LINE
   ============================================================ */

.amaya-sod__process-line {
    position: absolute;

    top: 26px;
    right: 0;
    left: 0;

    height: 1px;

    overflow: hidden;

    background:
        rgba(45, 91, 57, .11);

    pointer-events: none;
}


.amaya-sod__process-line > span {
    display: block;

    width: var(--amaya-sod-process-progress, 0%);
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--amaya-brass),
            var(--amaya-leaf),
            var(--amaya-forest)
        );

    transition:
        width
        1.2s
        cubic-bezier(.16, 1, .3, 1);
}



/* ============================================================
   11. STEP
   ============================================================ */

.amaya-sod__step {
    position: relative;

    z-index: 2;
}


.amaya-sod__step-head {
    position: relative;

    display: flex;

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

    min-height: 53px;

    margin-bottom: 24px;
}


.amaya-sod__step-number {
    position: relative;

    z-index: 2;

    min-width: 54px;

    padding-right: 11px;

    color:
        var(--amaya-brass);

    background:
        var(--amaya-background-soft);

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

    font-size: 2rem;

    font-weight: 600;

    line-height: 1;
}


.amaya-sod__step-node {
    position: absolute;

    top: 50%;
    right: 0;

    display: grid;

    place-items: center;

    width: 13px;
    height: 13px;

    background:
        var(--amaya-background-soft);

    border:
        1px solid
        rgba(45, 91, 57, .32);

    border-radius: 50%;

    transform:
        translateY(-50%);
}


.amaya-sod__step-node i {
    width: 5px;
    height: 5px;

    background:
        var(--amaya-leaf);

    border-radius: 50%;
}



/* ============================================================
   12. STEP CONTENT
   ============================================================ */

.amaya-sod__step-label {
    display: block;

    margin-bottom: 9px;

    color:
        var(--amaya-forest);

    font-size: .49rem;

    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.amaya-sod__step h3 {
    margin:
        0
        0
        12px;

    color:
        var(--amaya-ink);

    font-size:
        clamp(
            1.85rem,
            2.5vw,
            2.6rem
        );

    font-weight: 600;

    line-height: .94;
}


.amaya-sod__step h3 span {
    display: block;

    color:
        var(--amaya-forest);

    font-style: italic;

    font-weight: 500;
}


.amaya-sod__step p {
    max-width: 340px;

    margin: 0;

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

    font-size: .64rem;

    line-height: 1.62;
}



/* ============================================================
   13. GALLERY LAYOUT
   ============================================================ */

.amaya-sod__gallery {
    display: grid;

    grid-template-columns:
        minmax(0, 1.42fr)
        minmax(220px, .48fr)
        minmax(210px, .52fr);

    align-items: stretch;

    gap: 14px;

    min-height: 475px;

    margin-bottom:
        clamp(
            60px,
            8vw,
            100px
        );
}



/* ============================================================
   14. IMAGE
   ============================================================ */

.amaya-sod__image {
    position: relative;

    display: block;

    width: 100%;

    min-width: 0;

    padding: 0;

    overflow: hidden;

    background:
        var(--amaya-dark-surface-deep);

    border: 0;

    border-radius:
        var(--amaya-radius-md);

    box-shadow:
        var(--amaya-shadow-lg);

    cursor: zoom-in;

    text-align: left;
}


.amaya-sod__image--primary {
    min-height: 475px;
}


.amaya-sod__image--secondary {
    min-height: 475px;
}


.amaya-sod__image img {
    position: absolute;

    inset: -3% 0;

    width: 100%;
    height: 106%;

    object-fit: cover;

    transform:
        translate3d(
            0,
            var(--amaya-sod-image-shift, 0px),
            0
        )
        scale(1.025);

    transition:
        transform
        .9s
        cubic-bezier(.16, 1, .3, 1);
}


.amaya-sod__image:hover img {
    scale: 1.045;
}



/* ============================================================
   15. IMAGE OVERLAY
   ============================================================ */

.amaya-sod__image-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            transparent 47%,
            rgba(8, 17, 11, .13) 65%,
            rgba(8, 17, 11, .78) 100%
        );

    pointer-events: none;
}



/* ============================================================
   16. IMAGE CAPTION
   ============================================================ */

.amaya-sod__image-caption {
    position: absolute;

    right: 19px;
    bottom: 18px;
    left: 19px;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 3px;

    color:
        var(--amaya-white);

    pointer-events: none;
}


.amaya-sod__image-caption small {
    color:
        var(--amaya-leaf-light);

    font-size: .45rem;

    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.amaya-sod__image-caption strong {
    font-family:
        var(--amaya-font-heading);

    font-size:
        clamp(
            1.25rem,
            1.7vw,
            1.75rem
        );

    font-weight: 600;

    line-height: 1;
}



/* ============================================================
   17. EXPAND
   ============================================================ */

.amaya-sod__image-expand {
    position: absolute;

    top: 14px;
    right: 14px;

    z-index: 3;

    display: grid;

    place-items: center;

    width: 35px;
    height: 35px;

    color:
        var(--amaya-white);

    background:
        rgba(8, 17, 11, .42);

    border:
        1px solid
        rgba(255, 255, 255, .17);

    border-radius:
        var(--amaya-radius-sm);

    backdrop-filter:
        blur(8px);

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

    pointer-events: none;

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


.amaya-sod__image-expand svg {
    width: 15px;
    height: 15px;

    stroke:
        currentColor;

    stroke-width: 1.5;

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


.amaya-sod__image:hover
.amaya-sod__image-expand {
    color:
        var(--amaya-ink);

    background:
        var(--amaya-leaf-light);

    transform:
        scale(1.05);
}



/* ============================================================
   18. GALLERY INFO
   ============================================================ */

.amaya-sod__gallery-info {
    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    min-width: 0;

    padding:
        30px
        25px;

    color:
        var(--amaya-white);

    background:
        var(--amaya-dark-surface-deep);

    border-radius:
        var(--amaya-radius-md);

    overflow: hidden;

    isolation: isolate;
}


.amaya-sod__gallery-info::before {
    content: '';

    position: absolute;

    top: -120px;
    right: -120px;

    z-index: -1;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(162, 198, 81, .13),
            transparent 70%
        );
}


.amaya-sod__gallery-label {
    color:
        var(--amaya-leaf-light);

    font-size: .49rem;

    font-weight: 800;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.amaya-sod__gallery-info blockquote {
    margin:
        28px
        0;

    color:
        #E3D3B6;

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

    font-size:
        clamp(
            1.75rem,
            2.3vw,
            2.45rem
        );

    font-style: italic;

    font-weight: 500;

    line-height: 1.08;
}



/* ============================================================
   19. QUALITIES
   ============================================================ */

.amaya-sod__qualities {
    display: flex;

    flex-direction: column;
}


.amaya-sod__qualities > div {
    display: grid;

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

    align-items: center;

    gap: 9px;

    min-height: 42px;

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


.amaya-sod__qualities span {
    color:
        var(--amaya-brass-light);

    font-size: .43rem;

    font-weight: 700;
}


.amaya-sod__qualities strong {
    color:
        rgba(255, 255, 255, .71);

    font-size: .53rem;

    font-weight: 600;
}



/* ============================================================
   20. DETAILS
   ============================================================ */

.amaya-sod__details {
    display: grid;

    grid-template-columns:
        minmax(220px, .8fr)
        repeat(3, minmax(0, 1fr));

    border-top:
        1px solid
        rgba(45, 91, 57, .11);

    border-bottom:
        1px solid
        rgba(45, 91, 57, .11);
}



/* ============================================================
   21. DETAILS INTRO
   ============================================================ */

.amaya-sod__details-intro {
    padding:
        27px
        30px
        27px
        0;

    border-right:
        1px solid
        rgba(45, 91, 57, .09);
}


.amaya-sod__details-intro > span {
    display: block;

    margin-bottom: 8px;

    color:
        var(--amaya-brass);

    font-size: .48rem;

    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.amaya-sod__details-intro h3 {
    margin: 0;

    color:
        var(--amaya-forest-deep);

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

    font-weight: 600;

    line-height: .95;
}


.amaya-sod__details-intro em {
    display: block;

    color:
        var(--amaya-forest);

    font-weight: 500;
}



/* ============================================================
   22. DETAIL
   ============================================================ */

.amaya-sod__detail {
    display: grid;

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

    gap: 11px;

    padding:
        28px
        25px;

    border-right:
        1px solid
        rgba(45, 91, 57, .09);
}


.amaya-sod__detail:last-child {
    border-right: 0;
}


.amaya-sod__detail > span {
    padding-top: 3px;

    color:
        var(--amaya-brass);

    font-size: .45rem;

    font-weight: 700;
}


.amaya-sod__detail strong {
    display: block;

    margin-bottom: 7px;

    color:
        var(--amaya-forest-deep);

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

    font-size: 1.22rem;

    font-weight: 600;

    line-height: 1.05;
}


.amaya-sod__detail p {
    margin: 0;

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

    font-size: .56rem;

    line-height: 1.55;
}



/* ============================================================
   23. CTA
   ============================================================ */

.amaya-sod__cta {
    display: flex;

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

    gap: 35px;

    margin-top: 30px;

    padding:
        20px
        22px;

    background:
        var(--amaya-white);

    border:
        1px solid
        rgba(45, 91, 57, .10);

    border-radius:
        var(--amaya-radius-md);

    box-shadow:
        var(--amaya-shadow-sm);
}


.amaya-sod__cta-copy {
    display: flex;

    align-items: center;

    gap: 18px;
}


.amaya-sod__cta-copy > span {
    color:
        var(--amaya-forest);

    font-size: .5rem;

    font-weight: 800;

    letter-spacing: .10em;

    text-transform: uppercase;

    white-space: nowrap;
}


.amaya-sod__cta-copy p {
    margin: 0;

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

    font-size: .61rem;

    line-height: 1.5;
}


.amaya-sod__cta > a {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    flex: 0 0 auto;

    color:
        var(--amaya-forest-deep);

    font-size: .57rem;

    font-weight: 800;
}


.amaya-sod__cta-arrow {
    display: grid;

    place-items: center;

    width: 29px;
    height: 29px;

    color:
        var(--amaya-white);

    background:
        var(--amaya-forest);

    border-radius: 4px;

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


.amaya-sod__cta > a:hover
.amaya-sod__cta-arrow {
    background:
        var(--amaya-forest-deep);

    transform:
        translateX(3px);
}



/* ============================================================
   24. DESKTOP
   ============================================================ */

@media (min-width: 1200px) {

    .amaya-sod__gallery {
        min-height: 485px;
    }


    .amaya-sod__image--primary,
    .amaya-sod__image--secondary {
        min-height: 485px;
    }

}



/* ============================================================
   25. TABLET / SMALL LAPTOP
   ============================================================ */

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

    .amaya-sod__intro {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(280px, .9fr);

        gap: 45px;
    }


    .amaya-sod__title {
        font-size:
            clamp(
                3.1rem,
                6vw,
                4.7rem
            );
    }


    .amaya-sod__process {
        gap: 30px;
    }


    .amaya-sod__gallery {
        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(180px, .65fr);

        min-height: auto;
    }


    .amaya-sod__image--primary {
        min-height: 430px;
    }


    .amaya-sod__gallery-info {
        min-height: 430px;
    }


    .amaya-sod__image--secondary {
        grid-column:
            1 / -1;

        min-height: 260px;
    }


    .amaya-sod__image--secondary img {
        object-position:
            center 55%;
    }


    .amaya-sod__details {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .amaya-sod__details-intro {
        grid-column:
            1 / -1;

        padding:
            24px
            0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(45, 91, 57, .09);
    }


    .amaya-sod__detail {
        padding:
            25px
            20px;
    }

}



/* ============================================================
   26. MOBILE
   ============================================================ */

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

    .amaya-sod__header {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;

        margin-bottom: 42px;
    }


    .amaya-sod__intro {
        grid-template-columns: 1fr;

        gap: 27px;

        margin-bottom: 55px;
    }


    .amaya-sod__title {
        max-width: 600px;

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


    .amaya-sod__intro-copy {
        max-width: 590px;

        padding-left: 19px;
    }


    /* PROCESS */

    .amaya-sod__process {
        grid-template-columns: 1fr;

        gap: 0;

        padding-left: 38px;

        margin-bottom: 60px;
    }


    .amaya-sod__process-line {
        top: 0;
        right: auto;
        bottom: 0;
        left: 10px;

        width: 1px;
        height: 100%;
    }


    .amaya-sod__process-line > span {
        width: 100%;
        height:
            var(
                --amaya-sod-process-progress,
                0%
            );

        transition:
            height
            1.2s
            cubic-bezier(.16, 1, .3, 1);
    }


    .amaya-sod__step {
        padding-bottom: 42px;
    }


    .amaya-sod__step:last-child {
        padding-bottom: 0;
    }


    .amaya-sod__step-head {
        position: static;

        min-height: 0;

        margin-bottom: 15px;
    }


    .amaya-sod__step-number {
        min-width: 0;

        padding: 0;

        background: transparent;

        font-size: 1.7rem;
    }


    .amaya-sod__step-node {
        top: 6px;
        right: auto;
        left: -33px;

        background:
            var(--amaya-background-soft);
    }


    /* GALLERY */

    .amaya-sod__gallery {
        grid-template-columns:
            minmax(0, 1.3fr)
            minmax(180px, .7fr);

        min-height: auto;
    }


    .amaya-sod__image--primary {
        min-height: 390px;
    }


    .amaya-sod__gallery-info {
        min-height: 390px;

        padding:
            25px
            20px;
    }


    .amaya-sod__image--secondary {
        grid-column:
            1 / -1;

        min-height: 250px;
    }


    .amaya-sod__details {
        grid-template-columns: 1fr;
    }


    .amaya-sod__details-intro,
    .amaya-sod__detail {
        padding:
            22px
            0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(45, 91, 57, .09);
    }


    .amaya-sod__detail:last-child {
        border-bottom: 0;
    }


    .amaya-sod__cta {
        align-items: flex-start;

        flex-direction: column;

        gap: 16px;
    }


    .amaya-sod__cta-copy {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }

}



/* ============================================================
   27. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .amaya-sod__header {
        align-items: flex-start;

        flex-direction: column;

        gap: 9px;

        margin-bottom: 35px;
    }


    .amaya-sod__intro {
        grid-template-columns: 1fr;

        gap: 23px;

        margin-bottom: 47px;
    }


    .amaya-sod__kicker {
        font-size: .46rem;
    }


    .amaya-sod__title {
        font-size:
            clamp(
                2.65rem,
                11.8vw,
                3.5rem
            );
    }


    .amaya-sod__intro-copy {
        padding-left: 16px;
    }


    .amaya-sod__lead {
        font-size: 1.13rem;
    }


    .amaya-sod__intro-copy > p:last-child {
        font-size: .66rem;
    }


    /* PROCESS */

    .amaya-sod__process {
        grid-template-columns: 1fr;

        gap: 0;

        padding-left: 31px;

        margin-bottom: 49px;
    }


    .amaya-sod__process-line {
        top: 0;
        right: auto;
        bottom: 0;
        left: 8px;

        width: 1px;
        height: 100%;
    }


    .amaya-sod__process-line > span {
        width: 100%;
        height:
            var(
                --amaya-sod-process-progress,
                0%
            );
    }


    .amaya-sod__step {
        padding-bottom: 36px;
    }


    .amaya-sod__step:last-child {
        padding-bottom: 0;
    }


    .amaya-sod__step-head {
        position: static;

        min-height: 0;

        margin-bottom: 13px;
    }


    .amaya-sod__step-number {
        min-width: 0;

        padding: 0;

        background:
            transparent;

        font-size: 1.55rem;
    }


    .amaya-sod__step-node {
        top: 5px;
        right: auto;
        left: -27px;

        width: 11px;
        height: 11px;
    }


    .amaya-sod__step h3 {
        font-size: 1.85rem;
    }


    .amaya-sod__step p {
        font-size: .6rem;
    }


    /* GALLERY */

    .amaya-sod__gallery {
        grid-template-columns:
            1fr;

        gap: 10px;

        min-height: 0;

        margin-bottom: 48px;
    }


    .amaya-sod__image--primary {
        min-height: 330px;
    }


    .amaya-sod__gallery-info {
        min-height: 0;

        padding:
            22px
            18px;
    }


    .amaya-sod__gallery-info blockquote {
        margin:
            21px
            0;

        font-size: 1.75rem;
    }


    .amaya-sod__qualities {
        display: grid;

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

        gap: 7px;
    }


    .amaya-sod__qualities > div {
        display: flex;

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        gap: 3px;

        min-height: 48px;

        padding-top: 7px;
    }


    .amaya-sod__qualities strong {
        font-size: .46rem;
    }


    .amaya-sod__image--secondary {
        min-height: 220px;
    }


    .amaya-sod__image-caption {
        right: 11px;
        bottom: 11px;
        left: 11px;
    }


    .amaya-sod__image-caption strong {
        font-size: 1.05rem;
    }


    .amaya-sod__image-expand {
        top: 9px;
        right: 9px;

        width: 30px;
        height: 30px;
    }


    /* DETAILS */

    .amaya-sod__details {
        grid-template-columns: 1fr;
    }


    .amaya-sod__details-intro,
    .amaya-sod__detail {
        padding:
            20px
            0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(45, 91, 57, .09);
    }


    .amaya-sod__detail:last-child {
        border-bottom: 0;
    }


    .amaya-sod__detail strong {
        font-size: 1.13rem;
    }


    .amaya-sod__detail p {
        font-size: .55rem;
    }


    /* CTA */

    .amaya-sod__cta {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;

        padding: 17px;
    }


    .amaya-sod__cta-copy {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }


    .amaya-sod__cta-copy p {
        font-size: .57rem;
    }


    .amaya-sod__number,
    .amaya-sod__ambient--two {
        display: none;
    }

}



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

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

    .amaya-sod__process-line > span {
        width: 100% !important;
        height: 100% !important;

        transition: none !important;
    }


    .amaya-sod__image img {
        transform:
            scale(1.025) !important;

        transition: none !important;
    }


    .amaya-sod__image-expand,
    .amaya-sod__cta-arrow {
        transition: none !important;
    }

}
































/* ============================================================
   09. MULCH INSTALLATION
   AMAYA'S LANDSCAPING LLC
   ============================================================ */


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

.amaya-mulch {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 92% 11%,
            rgba(107, 81, 56, .085),
            transparent 29rem
        ),
        linear-gradient(
            180deg,
            #F1EDE4 0%,
            var(--amaya-ivory) 100%
        );

    border-top:
        1px solid
        rgba(78, 57, 37, .09);

    isolation: isolate;
}



/* ============================================================
   02. AMBIENT ELEMENTS
   ============================================================ */

.amaya-mulch__ambient {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.amaya-mulch__ambient--one {
    top: -320px;
    right: -280px;

    width: 680px;
    height: 680px;

    border:
        1px solid
        rgba(78, 57, 37, .055);
}


.amaya-mulch__ambient--one::before,
.amaya-mulch__ambient--one::after {
    content: '';

    position: absolute;

    border:
        1px solid
        rgba(78, 57, 37, .04);

    border-radius: 50%;
}


.amaya-mulch__ambient--one::before {
    inset: 80px;
}


.amaya-mulch__ambient--one::after {
    inset: 165px;
}


.amaya-mulch__ambient--two {
    bottom: -340px;
    left: -300px;

    width: 700px;
    height: 700px;

    background:
        radial-gradient(
            circle,
            rgba(131, 169, 56, .075),
            transparent 68%
        );
}



/* ============================================================
   03. NUMBER
   ============================================================ */

.amaya-mulch__number {
    position: absolute;

    top: 5%;
    right: 1%;

    color:
        rgba(78, 57, 37, .035);

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

    font-size:
        clamp(
            11rem,
            19vw,
            19rem
        );

    font-weight: 600;

    line-height: .8;

    pointer-events: none;
}



/* ============================================================
   04. BOTANICAL
   ============================================================ */

.amaya-mulch__botanical {
    position: absolute;

    bottom: 8%;
    left: 1.5%;

    width: 155px;

    color:
        var(--amaya-earth);

    opacity: .035;

    pointer-events: none;
}


.amaya-mulch__botanical svg {
    width: 100%;
    height: auto;

    stroke: currentColor;

    stroke-width: 1.1;

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



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

.amaya-mulch__container {
    position: relative;

    z-index: 2;
}



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

.amaya-mulch__header {
    display: flex;

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

    gap: 30px;

    margin-bottom:
        clamp(
            45px,
            6vw,
            72px
        );

    padding-bottom: 19px;

    border-bottom:
        1px solid
        rgba(78, 57, 37, .11);
}



/* ============================================================
   07. INTRO
   ============================================================ */

.amaya-mulch__intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.17fr)
        minmax(330px, .83fr);

    align-items: end;

    gap:
        clamp(
            55px,
            8vw,
            120px
        );

    margin-bottom:
        clamp(
            55px,
            7vw,
            88px
        );
}



/* ============================================================
   08. KICKER
   ============================================================ */

.amaya-mulch__kicker {
    display: block;

    margin-bottom: 14px;

    color:
        var(--amaya-earth-soft);

    font-size: .52rem;

    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}



/* ============================================================
   09. TITLE
   ============================================================ */

.amaya-mulch__title {
    max-width: 800px;

    margin: 0;

    color:
        var(--amaya-ink);

    font-size:
        clamp(
            3.55rem,
            5.15vw,
            5.9rem
        );

    font-weight: 600;

    line-height: .87;

    letter-spacing: -.044em;
}


.amaya-mulch__title span {
    display: block;

    color:
        var(--amaya-earth);

    font-style: italic;

    font-weight: 500;
}



/* ============================================================
   10. INTRO COPY
   ============================================================ */

.amaya-mulch__intro-copy {
    max-width: 510px;

    padding-left: 25px;

    border-left:
        1px solid
        rgba(177, 138, 82, .34);
}


.amaya-mulch__lead {
    margin:
        0
        0
        17px;

    color:
        var(--amaya-charcoal);

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

    font-size:
        clamp(
            1.2rem,
            1.6vw,
            1.55rem
        );

    font-weight: 500;

    line-height: 1.35;
}


.amaya-mulch__intro-copy > p:last-child {
    margin: 0;

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

    font-size: .71rem;

    line-height: 1.7;
}



/* ============================================================
   11. VISUAL COMPOSITION
   ============================================================ */

.amaya-mulch__visual {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.42fr)
        minmax(230px, .48fr);

    grid-template-rows:
        auto
        auto;

    gap: 14px;

    margin-bottom:
        clamp(
            65px,
            8vw,
            100px
        );
}



/* ============================================================
   12. PRIMARY IMAGE
   ============================================================ */

.amaya-mulch__image {
    position: relative;

    display: block;

    width: 100%;

    padding: 0;

    overflow: hidden;

    background:
        var(--amaya-dark-surface-deep);

    border: 0;

    border-radius:
        var(--amaya-radius-md);

    box-shadow:
        var(--amaya-shadow-lg);

    cursor: zoom-in;

    text-align: left;
}


.amaya-mulch__image--primary {
    grid-row:
        1 / 3;

    min-height: 570px;
}


.amaya-mulch__image--secondary {
    min-height: 260px;
}



/* ============================================================
   13. IMAGE
   ============================================================ */

.amaya-mulch__image img {
    position: absolute;

    inset: -3% 0;

    width: 100%;
    height: 106%;

    object-fit: cover;

    transform:
        translate3d(
            0,
            var(--amaya-mulch-image-shift, 0px),
            0
        )
        scale(1.025);

    transition:
        transform
        .9s
        cubic-bezier(.16, 1, .3, 1);
}


.amaya-mulch__image:hover img {
    scale: 1.045;
}



/* ============================================================
   14. IMAGE OVERLAY
   ============================================================ */

.amaya-mulch__image-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            transparent 44%,
            rgba(12, 9, 6, .13) 66%,
            rgba(12, 9, 6, .78) 100%
        );

    pointer-events: none;
}



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

.amaya-mulch__image-caption {
    position: absolute;

    right: 18px;
    bottom: 17px;
    left: 18px;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 3px;

    color:
        var(--amaya-white);

    pointer-events: none;
}


.amaya-mulch__image-caption small {
    color:
        var(--amaya-brass-light);

    font-size: .45rem;

    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.amaya-mulch__image-caption strong {
    font-family:
        var(--amaya-font-heading);

    font-size:
        clamp(
            1.25rem,
            1.8vw,
            1.8rem
        );

    font-weight: 600;

    line-height: 1;
}



/* ============================================================
   16. EXPAND
   ============================================================ */

.amaya-mulch__expand {
    position: absolute;

    top: 14px;
    right: 14px;

    z-index: 3;

    display: grid;

    place-items: center;

    width: 35px;
    height: 35px;

    color:
        var(--amaya-white);

    background:
        rgba(12, 9, 6, .43);

    border:
        1px solid
        rgba(255, 255, 255, .17);

    border-radius:
        var(--amaya-radius-sm);

    backdrop-filter:
        blur(8px);

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

    pointer-events: none;

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


.amaya-mulch__expand svg {
    width: 15px;
    height: 15px;

    stroke: currentColor;

    stroke-width: 1.5;

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


.amaya-mulch__image:hover
.amaya-mulch__expand {
    color:
        var(--amaya-ink);

    background:
        var(--amaya-brass-light);

    transform:
        scale(1.05);
}



/* ============================================================
   17. VISUAL PANEL
   ============================================================ */

.amaya-mulch__visual-panel {
    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    min-height: 295px;

    padding:
        27px
        24px;

    overflow: hidden;

    color:
        var(--amaya-white);

    background:
        var(--amaya-earth);

    border-radius:
        var(--amaya-radius-md);

    isolation: isolate;
}


.amaya-mulch__visual-panel::before {
    content: '';

    position: absolute;

    top: -120px;
    right: -100px;

    z-index: -1;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(207, 176, 120, .18),
            transparent 70%
        );
}



/* ============================================================
   18. PANEL HEAD
   ============================================================ */

.amaya-mulch__visual-panel-head {
    display: flex;

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

    gap: 12px;
}


.amaya-mulch__visual-panel-head span {
    color:
        var(--amaya-brass-light);

    font-size: .47rem;

    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.amaya-mulch__visual-panel-head small {
    color:
        rgba(255, 255, 255, .46);

    font-size: .4rem;

    white-space: nowrap;
}



/* ============================================================
   19. QUOTE
   ============================================================ */

.amaya-mulch__visual-panel blockquote {
    margin:
        22px
        0;

    color:
        #F2E4CE;

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

    font-size:
        clamp(
            1.55rem,
            2vw,
            2.15rem
        );

    font-style: italic;

    font-weight: 500;

    line-height: 1.08;
}



/* ============================================================
   20. VALUES
   ============================================================ */

.amaya-mulch__visual-values {
    display: grid;

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

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


.amaya-mulch__visual-values > div {
    display: flex;

    flex-direction: column;

    gap: 3px;

    padding-top: 11px;
}


.amaya-mulch__visual-values span {
    color:
        var(--amaya-brass-light);

    font-size: .39rem;

    font-weight: 700;
}


.amaya-mulch__visual-values strong {
    color:
        rgba(255, 255, 255, .70);

    font-size: .46rem;

    font-weight: 600;
}



/* ============================================================
   21. BENEFITS
   ============================================================ */

.amaya-mulch__benefits {
    display: grid;

    grid-template-columns:
        minmax(260px, .85fr)
        repeat(4, minmax(0, 1fr));

    border-top:
        1px solid
        rgba(78, 57, 37, .12);

    border-bottom:
        1px solid
        rgba(78, 57, 37, .12);
}



/* ============================================================
   22. BENEFITS INTRO
   ============================================================ */

.amaya-mulch__benefits-intro {
    padding:
        30px
        35px
        30px
        0;

    border-right:
        1px solid
        rgba(78, 57, 37, .10);
}


.amaya-mulch__benefits-intro > span {
    display: block;

    margin-bottom: 10px;

    color:
        var(--amaya-earth-soft);

    font-size: .48rem;

    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.amaya-mulch__benefits-intro h3 {
    margin:
        0
        0
        13px;

    color:
        var(--amaya-ink);

    font-size:
        clamp(
            1.8rem,
            2.5vw,
            2.6rem
        );

    font-weight: 600;

    line-height: .93;
}


.amaya-mulch__benefits-intro em {
    display: block;

    color:
        var(--amaya-earth);

    font-weight: 500;
}


.amaya-mulch__benefits-intro p {
    max-width: 290px;

    margin: 0;

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

    font-size: .58rem;

    line-height: 1.55;
}



/* ============================================================
   23. BENEFIT
   ============================================================ */

.amaya-mulch__benefit {
    padding:
        29px
        22px;

    border-right:
        1px solid
        rgba(78, 57, 37, .09);
}


.amaya-mulch__benefit:last-child {
    border-right: 0;
}


.amaya-mulch__benefit-top {
    display: flex;

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

    gap: 12px;

    margin-bottom: 17px;
}


.amaya-mulch__benefit-top > span:first-child {
    color:
        var(--amaya-brass);

    font-size: .44rem;

    font-weight: 700;
}



/* ============================================================
   24. BENEFIT ICON
   ============================================================ */

.amaya-mulch__benefit-icon {
    display: grid;

    place-items: center;

    width: 33px;
    height: 33px;

    color:
        var(--amaya-earth);

    background:
        rgba(177, 138, 82, .10);

    border:
        1px solid
        rgba(78, 57, 37, .08);

    border-radius:
        var(--amaya-radius-sm);
}


.amaya-mulch__benefit-icon svg {
    width: 15px;
    height: 15px;

    stroke: currentColor;

    stroke-width: 1.45;

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


.amaya-mulch__benefit h4 {
    margin:
        0
        0
        8px;

    color:
        var(--amaya-earth);

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

    font-size: 1.3rem;

    font-weight: 600;

    line-height: 1;
}


.amaya-mulch__benefit p {
    margin: 0;

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

    font-size: .54rem;

    line-height: 1.55;
}



/* ============================================================
   25. APPLICATION
   ============================================================ */

.amaya-mulch__application {
    display: grid;

    grid-template-columns:
        minmax(260px, .7fr)
        minmax(0, 1.3fr);

    align-items: center;

    gap:
        clamp(
            40px,
            6vw,
            85px
        );

    margin-top:
        clamp(
            50px,
            6vw,
            75px
        );

    padding:
        26px
        28px;

    background:
        rgba(254, 254, 254, .72);

    border:
        1px solid
        rgba(78, 57, 37, .10);

    border-radius:
        var(--amaya-radius-md);

    box-shadow:
        var(--amaya-shadow-sm);
}



/* ============================================================
   26. APPLICATION HEADING
   ============================================================ */

.amaya-mulch__application-heading > span {
    display: block;

    margin-bottom: 7px;

    color:
        var(--amaya-brass);

    font-size: .45rem;

    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.amaya-mulch__application-heading h3 {
    margin: 0;

    color:
        var(--amaya-ink);

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

    font-weight: 600;

    line-height: .95;
}


.amaya-mulch__application-heading em {
    display: block;

    color:
        var(--amaya-earth);

    font-weight: 500;
}



/* ============================================================
   27. APPLICATION LIST
   ============================================================ */

.amaya-mulch__application-list {
    display: grid;

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


.amaya-mulch__application-list > div {
    display: flex;

    flex-direction: column;

    gap: 6px;

    min-height: 55px;

    padding:
        0
        17px;

    border-left:
        1px solid
        rgba(78, 57, 37, .10);
}


.amaya-mulch__application-list span {
    color:
        var(--amaya-brass);

    font-size: .42rem;

    font-weight: 700;
}


.amaya-mulch__application-list strong {
    color:
        var(--amaya-earth);

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

    font-size: 1.05rem;

    font-weight: 600;
}



/* ============================================================
   28. CTA
   ============================================================ */

.amaya-mulch__cta {
    display: flex;

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

    gap: 35px;

    margin-top: 29px;

    padding:
        20px
        22px;

    color:
        var(--amaya-white);

    background:
        var(--amaya-dark-surface-deep);

    border-radius:
        var(--amaya-radius-md);
}


.amaya-mulch__cta-copy {
    display: flex;

    align-items: center;

    gap: 18px;
}


.amaya-mulch__cta-copy > span {
    color:
        var(--amaya-brass-light);

    font-size: .49rem;

    font-weight: 800;

    letter-spacing: .10em;

    text-transform: uppercase;

    white-space: nowrap;
}


.amaya-mulch__cta-copy p {
    margin: 0;

    color:
        rgba(255, 255, 255, .55);

    font-size: .6rem;

    line-height: 1.5;
}


.amaya-mulch__cta > a {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color:
        var(--amaya-white);

    font-size: .56rem;

    font-weight: 800;

    white-space: nowrap;
}


.amaya-mulch__cta-arrow {
    display: grid;

    place-items: center;

    width: 29px;
    height: 29px;

    color:
        var(--amaya-earth);

    background:
        var(--amaya-brass-light);

    border-radius: 4px;

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


.amaya-mulch__cta > a:hover
.amaya-mulch__cta-arrow {
    background:
        var(--amaya-white);

    transform:
        translateX(3px);
}



/* ============================================================
   29. DESKTOP
   ============================================================ */

@media (min-width: 1200px) {

    .amaya-mulch__image--primary {
        min-height: 590px;
    }


    .amaya-mulch__visual-panel {
        min-height: 305px;
    }

}



/* ============================================================
   30. TABLET / SMALL LAPTOP
   ============================================================ */

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

    .amaya-mulch__intro {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(280px, .9fr);

        gap: 45px;
    }


    .amaya-mulch__title {
        font-size:
            clamp(
                3.1rem,
                6vw,
                4.65rem
            );
    }


    .amaya-mulch__visual {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(210px, .75fr);
    }


    .amaya-mulch__image--primary {
        min-height: 540px;
    }


    .amaya-mulch__benefits {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .amaya-mulch__benefits-intro {
        grid-column:
            1 / -1;

        padding:
            26px
            0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(78, 57, 37, .09);
    }


    .amaya-mulch__benefit {
        border-bottom:
            1px solid
            rgba(78, 57, 37, .09);
    }


    .amaya-mulch__benefit:nth-child(3),
    .amaya-mulch__benefit:nth-child(5) {
        border-right: 0;
    }


    .amaya-mulch__benefit:nth-last-child(-n + 2) {
        border-bottom: 0;
    }


    .amaya-mulch__application {
        grid-template-columns:
            1fr;
    }


    .amaya-mulch__application-list {
        border-top:
            1px solid
            rgba(78, 57, 37, .09);

        padding-top: 20px;
    }


    .amaya-mulch__application-list
    > div:first-child {
        border-left: 0;

        padding-left: 0;
    }

}



/* ============================================================
   31. MOBILE
   ============================================================ */

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

    .amaya-mulch__header {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;

        margin-bottom: 42px;
    }


    .amaya-mulch__intro {
        grid-template-columns: 1fr;

        gap: 27px;

        margin-bottom: 54px;
    }


    .amaya-mulch__title {
        max-width: 610px;

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


    .amaya-mulch__intro-copy {
        max-width: 590px;

        padding-left: 19px;
    }


    .amaya-mulch__visual {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(190px, .85fr);
    }


    .amaya-mulch__image--primary {
        min-height: 475px;
    }


    .amaya-mulch__visual-panel {
        min-height: 275px;
    }


    .amaya-mulch__benefits {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .amaya-mulch__benefits-intro {
        grid-column:
            1 / -1;

        padding:
            25px
            0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(78, 57, 37, .09);
    }


    .amaya-mulch__benefit {
        border-bottom:
            1px solid
            rgba(78, 57, 37, .09);
    }


    .amaya-mulch__benefit:nth-child(3),
    .amaya-mulch__benefit:nth-child(5) {
        border-right: 0;
    }


    .amaya-mulch__benefit:nth-last-child(-n + 2) {
        border-bottom: 0;
    }


    .amaya-mulch__application {
        grid-template-columns: 1fr;
    }


    .amaya-mulch__application-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 0;
    }


    .amaya-mulch__application-list > div {
        padding:
            13px
            15px;

        border-bottom:
            1px solid
            rgba(78, 57, 37, .08);
    }


    .amaya-mulch__application-list
    > div:nth-child(odd) {
        border-left: 0;

        padding-left: 0;
    }


    .amaya-mulch__application-list
    > div:nth-last-child(-n + 2) {
        border-bottom: 0;
    }


    .amaya-mulch__cta {
        align-items: flex-start;

        flex-direction: column;

        gap: 16px;
    }


    .amaya-mulch__cta-copy {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }

}



/* ============================================================
   32. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .amaya-mulch__header {
        align-items: flex-start;

        flex-direction: column;

        gap: 9px;

        margin-bottom: 35px;
    }


    .amaya-mulch__intro {
        grid-template-columns: 1fr;

        gap: 23px;

        margin-bottom: 45px;
    }


    .amaya-mulch__kicker {
        font-size: .46rem;
    }


    .amaya-mulch__title {
        font-size:
            clamp(
                2.65rem,
                11.8vw,
                3.5rem
            );
    }


    .amaya-mulch__intro-copy {
        padding-left: 16px;
    }


    .amaya-mulch__lead {
        font-size: 1.13rem;
    }


    .amaya-mulch__intro-copy > p:last-child {
        font-size: .66rem;
    }


    /* VISUAL */

    .amaya-mulch__visual {
        grid-template-columns: 1fr;

        gap: 10px;

        margin-bottom: 48px;
    }


    .amaya-mulch__image--primary {
        grid-row: auto;

        min-height: 340px;
    }


    .amaya-mulch__visual-panel {
        min-height: 0;

        padding:
            22px
            18px;
    }


    .amaya-mulch__visual-panel blockquote {
        margin:
            20px
            0;

        font-size: 1.7rem;
    }


    .amaya-mulch__image--secondary {
        min-height: 220px;
    }


    .amaya-mulch__image-caption {
        right: 11px;
        bottom: 11px;
        left: 11px;
    }


    .amaya-mulch__image-caption strong {
        font-size: 1.05rem;
    }


    .amaya-mulch__expand {
        top: 9px;
        right: 9px;

        width: 30px;
        height: 30px;
    }


    /* BENEFITS */

    .amaya-mulch__benefits {
        grid-template-columns: 1fr;
    }


    .amaya-mulch__benefits-intro {
        padding:
            22px
            0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(78, 57, 37, .09);
    }


    .amaya-mulch__benefit {
        padding:
            20px
            0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(78, 57, 37, .09);
    }


    .amaya-mulch__benefit:last-child {
        border-bottom: 0;
    }


    .amaya-mulch__benefit h4 {
        font-size: 1.25rem;
    }


    /* APPLICATION */

    .amaya-mulch__application {
        grid-template-columns: 1fr;

        gap: 22px;

        padding:
            20px
            17px;
    }


    .amaya-mulch__application-list {
        grid-template-columns: 1fr;
    }


    .amaya-mulch__application-list > div {
        min-height: 47px;

        padding:
            10px
            0;

        border-left: 0;

        border-bottom:
            1px solid
            rgba(78, 57, 37, .08);
    }


    .amaya-mulch__application-list
    > div:last-child {
        border-bottom: 0;
    }


    /* CTA */

    .amaya-mulch__cta {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;

        padding: 17px;
    }


    .amaya-mulch__cta-copy {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }


    .amaya-mulch__cta-copy p {
        font-size: .57rem;
    }


    .amaya-mulch__number,
    .amaya-mulch__botanical,
    .amaya-mulch__ambient--one {
        display: none;
    }

}



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

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

    .amaya-mulch__image img {
        transform:
            scale(1.025) !important;

        transition: none !important;
    }


    .amaya-mulch__expand,
    .amaya-mulch__cta-arrow {
        transition: none !important;
    }

}



































/* ============================================================
   10. LAWN MAINTENANCE
   AMAYA'S LANDSCAPING LLC
   ============================================================ */


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

.amaya-lawn {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 11%,
            rgba(131, 169, 56, .085),
            transparent 30rem
        ),
        linear-gradient(
            180deg,
            var(--amaya-sage-light) 0%,
            var(--amaya-background-soft) 100%
        );

    border-top:
        1px solid
        rgba(45, 91, 57, .09);

    isolation: isolate;
}



/* ============================================================
   02. AMBIENT ELEMENTS
   ============================================================ */

.amaya-lawn__ambient {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.amaya-lawn__ambient--one {
    top: -330px;
    left: -280px;

    width: 680px;
    height: 680px;

    border:
        1px solid
        rgba(45, 91, 57, .05);
}


.amaya-lawn__ambient--one::before,
.amaya-lawn__ambient--one::after {
    content: '';

    position: absolute;

    border:
        1px solid
        rgba(45, 91, 57, .035);

    border-radius: 50%;
}


.amaya-lawn__ambient--one::before {
    inset: 80px;
}


.amaya-lawn__ambient--one::after {
    inset: 165px;
}


.amaya-lawn__ambient--two {
    right: -300px;
    bottom: -350px;

    width: 710px;
    height: 710px;

    background:
        radial-gradient(
            circle,
            rgba(177, 138, 82, .07),
            transparent 68%
        );
}



/* ============================================================
   03. DECORATIVE NUMBER
   ============================================================ */

.amaya-lawn__number {
    position: absolute;

    top: 5%;
    left: 1%;

    color:
        rgba(45, 91, 57, .035);

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

    font-size:
        clamp(
            11rem,
            19vw,
            19rem
        );

    font-weight: 600;

    line-height: .8;

    pointer-events: none;
}



/* ============================================================
   04. CONTAINER
   ============================================================ */

.amaya-lawn__container {
    position: relative;

    z-index: 2;
}



/* ============================================================
   05. HEADER
   ============================================================ */

.amaya-lawn__header {
    display: flex;

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

    gap: 30px;

    margin-bottom:
        clamp(
            45px,
            6vw,
            72px
        );

    padding-bottom: 19px;

    border-bottom:
        1px solid
        rgba(45, 91, 57, .11);
}



/* ============================================================
   06. INTRO
   ============================================================ */

.amaya-lawn__intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(330px, .85fr);

    align-items: end;

    gap:
        clamp(
            55px,
            8vw,
            120px
        );

    margin-bottom:
        clamp(
            55px,
            7vw,
            88px
        );
}



/* ============================================================
   07. KICKER
   ============================================================ */

.amaya-lawn__kicker {
    display: block;

    margin-bottom: 14px;

    color:
        var(--amaya-brass);

    font-size: .52rem;

    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}



/* ============================================================
   08. TITLE
   ============================================================ */

.amaya-lawn__title {
    max-width: 780px;

    margin: 0;

    color:
        var(--amaya-ink);

    font-size:
        clamp(
            3.55rem,
            5.15vw,
            5.9rem
        );

    font-weight: 600;

    line-height: .87;

    letter-spacing: -.044em;
}


.amaya-lawn__title span {
    display: block;

    color:
        var(--amaya-forest);

    font-style: italic;

    font-weight: 500;
}



/* ============================================================
   09. INTRO COPY
   ============================================================ */

.amaya-lawn__intro-copy {
    max-width: 510px;

    padding-left: 25px;

    border-left:
        1px solid
        rgba(177, 138, 82, .33);
}


.amaya-lawn__lead {
    margin:
        0
        0
        17px;

    color:
        var(--amaya-charcoal);

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

    font-size:
        clamp(
            1.2rem,
            1.6vw,
            1.55rem
        );

    font-weight: 500;

    line-height: 1.35;
}


.amaya-lawn__intro-copy > p:last-child {
    margin: 0;

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

    font-size: .71rem;

    line-height: 1.7;
}



/* ============================================================
   10. SHOWCASE
   ============================================================ */

.amaya-lawn__showcase {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(235px, .55fr);

    grid-template-rows:
        auto
        auto;

    gap: 14px;

    margin-bottom:
        clamp(
            65px,
            8vw,
            100px
        );
}



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

.amaya-lawn__image {
    position: relative;

    display: block;

    width: 100%;

    padding: 0;

    overflow: hidden;

    background:
        var(--amaya-dark-surface-deep);

    border: 0;

    border-radius:
        var(--amaya-radius-md);

    box-shadow:
        var(--amaya-shadow-lg);

    cursor: zoom-in;

    text-align: left;
}


.amaya-lawn__image--primary {
    grid-row:
        1 / 3;

    min-height: 570px;
}


.amaya-lawn__image--secondary {
    min-height: 255px;
}



/* ============================================================
   12. IMAGE CONTENT
   ============================================================ */

.amaya-lawn__image img {
    position: absolute;

    inset: -3% 0;

    width: 100%;
    height: 106%;

    object-fit: cover;

    transform:
        translate3d(
            0,
            var(--amaya-lawn-image-shift, 0px),
            0
        )
        scale(1.025);

    transition:
        transform
        .95s
        cubic-bezier(.16, 1, .3, 1);
}


.amaya-lawn__image:hover img {
    scale: 1.045;
}



/* ============================================================
   13. OVERLAY
   ============================================================ */

.amaya-lawn__image-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(8, 17, 11, .14) 65%,
            rgba(8, 17, 11, .80) 100%
        );

    pointer-events: none;
}



/* ============================================================
   14. CAPTION
   ============================================================ */

.amaya-lawn__image-caption {
    position: absolute;

    right: 19px;
    bottom: 18px;
    left: 19px;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 3px;

    color:
        var(--amaya-white);

    pointer-events: none;
}


.amaya-lawn__image-caption small {
    color:
        var(--amaya-leaf-light);

    font-size: .45rem;

    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.amaya-lawn__image-caption strong {
    font-family:
        var(--amaya-font-heading);

    font-size:
        clamp(
            1.25rem,
            1.8vw,
            1.8rem
        );

    font-weight: 600;

    line-height: 1;
}



/* ============================================================
   15. EXPAND
   ============================================================ */

.amaya-lawn__expand {
    position: absolute;

    top: 14px;
    right: 14px;

    z-index: 3;

    display: grid;

    place-items: center;

    width: 35px;
    height: 35px;

    color:
        var(--amaya-white);

    background:
        rgba(8, 17, 11, .42);

    border:
        1px solid
        rgba(255, 255, 255, .17);

    border-radius:
        var(--amaya-radius-sm);

    backdrop-filter:
        blur(8px);

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

    pointer-events: none;

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


.amaya-lawn__expand svg {
    width: 15px;
    height: 15px;

    stroke: currentColor;

    stroke-width: 1.5;

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


.amaya-lawn__image:hover
.amaya-lawn__expand {
    color:
        var(--amaya-ink);

    background:
        var(--amaya-leaf-light);

    transform:
        scale(1.05);
}



/* ============================================================
   16. MAINTENANCE PANEL
   ============================================================ */

.amaya-lawn__maintenance-panel {
    position: relative;

    min-height: 300px;

    padding:
        27px
        24px;

    overflow: hidden;

    color:
        var(--amaya-white);

    background:
        var(--amaya-forest-deep);

    border-radius:
        var(--amaya-radius-md);

    isolation: isolate;
}


.amaya-lawn__maintenance-panel::before {
    content: '';

    position: absolute;

    top: -130px;
    right: -110px;

    z-index: -1;

    width: 270px;
    height: 270px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(162, 198, 81, .15),
            transparent 70%
        );
}



/* ============================================================
   17. PANEL HEADER
   ============================================================ */

.amaya-lawn__panel-head {
    display: flex;

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

    gap: 12px;

    margin-bottom: 18px;

    padding-bottom: 14px;

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


.amaya-lawn__panel-head span {
    color:
        var(--amaya-leaf-light);

    font-size: .47rem;

    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.amaya-lawn__panel-head small {
    color:
        rgba(255, 255, 255, .40);

    font-size: .4rem;
}



/* ============================================================
   18. APPROACH
   ============================================================ */

.amaya-lawn__approach {
    display: flex;

    flex-direction: column;
}


.amaya-lawn__approach-item {
    display: grid;

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

    gap: 10px;

    padding:
        13px
        0;

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


.amaya-lawn__approach-item:last-child {
    border-bottom: 0;
}


.amaya-lawn__approach-number {
    padding-top: 3px;

    color:
        var(--amaya-brass-light);

    font-size: .43rem;

    font-weight: 700;
}


.amaya-lawn__approach-item strong {
    display: block;

    margin-bottom: 3px;

    color:
        var(--amaya-white);

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

    font-size: 1.2rem;

    font-weight: 600;

    line-height: 1;
}


.amaya-lawn__approach-item p {
    margin: 0;

    color:
        rgba(255, 255, 255, .50);

    font-size: .49rem;

    line-height: 1.5;
}



/* ============================================================
   19. BENEFITS
   ============================================================ */

.amaya-lawn__benefits {
    display: grid;

    grid-template-columns:
        minmax(280px, .92fr)
        repeat(3, minmax(0, 1fr));

    border-top:
        1px solid
        rgba(45, 91, 57, .11);

    border-bottom:
        1px solid
        rgba(45, 91, 57, .11);
}



/* ============================================================
   20. BENEFITS HEADING
   ============================================================ */

.amaya-lawn__benefits-heading {
    padding:
        30px
        35px
        30px
        0;

    border-right:
        1px solid
        rgba(45, 91, 57, .09);
}


.amaya-lawn__benefits-heading > span {
    display: block;

    margin-bottom: 9px;

    color:
        var(--amaya-brass);

    font-size: .47rem;

    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.amaya-lawn__benefits-heading h3 {
    margin:
        0
        0
        12px;

    color:
        var(--amaya-ink);

    font-size:
        clamp(
            1.8rem,
            2.5vw,
            2.55rem
        );

    font-weight: 600;

    line-height: .94;
}


.amaya-lawn__benefits-heading em {
    display: block;

    color:
        var(--amaya-forest);

    font-weight: 500;
}


.amaya-lawn__benefits-heading p {
    max-width: 300px;

    margin: 0;

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

    font-size: .58rem;

    line-height: 1.55;
}



/* ============================================================
   21. BENEFIT
   ============================================================ */

.amaya-lawn__benefit {
    padding:
        29px
        26px;

    border-right:
        1px solid
        rgba(45, 91, 57, .09);
}


.amaya-lawn__benefit:last-child {
    border-right: 0;
}


.amaya-lawn__benefit-top {
    display: flex;

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

    gap: 12px;

    margin-bottom: 17px;
}


.amaya-lawn__benefit-top > span:first-child {
    color:
        var(--amaya-brass);

    font-size: .44rem;

    font-weight: 700;
}



/* ============================================================
   22. BENEFIT ICON
   ============================================================ */

.amaya-lawn__benefit-icon {
    display: grid;

    place-items: center;

    width: 33px;
    height: 33px;

    color:
        var(--amaya-forest);

    background:
        rgba(213, 221, 207, .62);

    border:
        1px solid
        rgba(45, 91, 57, .09);

    border-radius:
        var(--amaya-radius-sm);
}


.amaya-lawn__benefit-icon svg {
    width: 15px;
    height: 15px;

    stroke: currentColor;

    stroke-width: 1.45;

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


.amaya-lawn__benefit h4 {
    margin:
        0
        0
        8px;

    color:
        var(--amaya-forest-deep);

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

    font-size: 1.35rem;

    font-weight: 600;

    line-height: 1;
}


.amaya-lawn__benefit p {
    margin: 0;

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

    font-size: .55rem;

    line-height: 1.56;
}



/* ============================================================
   23. SUMMARY
   ============================================================ */

.amaya-lawn__summary {
    display: grid;

    grid-template-columns:
        minmax(290px, .72fr)
        minmax(0, 1.28fr);

    align-items: center;

    gap:
        clamp(
            40px,
            6vw,
            80px
        );

    margin-top:
        clamp(
            50px,
            6vw,
            72px
        );

    padding:
        26px
        28px;

    background:
        var(--amaya-white);

    border:
        1px solid
        rgba(45, 91, 57, .10);

    border-radius:
        var(--amaya-radius-md);

    box-shadow:
        var(--amaya-shadow-sm);
}



/* ============================================================
   24. SUMMARY HEADING
   ============================================================ */

.amaya-lawn__summary-heading > span {
    display: block;

    margin-bottom: 6px;

    color:
        var(--amaya-brass);

    font-size: .45rem;

    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.amaya-lawn__summary-heading strong {
    display: block;

    color:
        var(--amaya-forest-deep);

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

    font-size:
        clamp(
            1.25rem,
            1.8vw,
            1.6rem
        );

    font-weight: 600;

    line-height: 1.2;
}



/* ============================================================
   25. SUMMARY LIST
   ============================================================ */

.amaya-lawn__summary-list {
    display: grid;

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


.amaya-lawn__summary-list > div {
    display: flex;

    flex-direction: column;

    gap: 6px;

    min-height: 50px;

    padding:
        0
        17px;

    border-left:
        1px solid
        rgba(45, 91, 57, .10);
}


.amaya-lawn__summary-list span {
    color:
        var(--amaya-brass);

    font-size: .41rem;

    font-weight: 700;
}


.amaya-lawn__summary-list strong {
    color:
        var(--amaya-forest);

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

    font-size: 1rem;

    font-weight: 600;

    line-height: 1.08;
}



/* ============================================================
   26. CTA
   ============================================================ */

.amaya-lawn__cta {
    display: flex;

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

    gap: 35px;

    margin-top: 29px;

    padding:
        20px
        22px;

    color:
        var(--amaya-white);

    background:
        var(--amaya-dark-surface-deep);

    border-radius:
        var(--amaya-radius-md);
}


.amaya-lawn__cta-copy {
    display: flex;

    align-items: center;

    gap: 18px;
}


.amaya-lawn__cta-copy > span {
    color:
        var(--amaya-leaf-light);

    font-size: .49rem;

    font-weight: 800;

    letter-spacing: .10em;

    text-transform: uppercase;

    white-space: nowrap;
}


.amaya-lawn__cta-copy p {
    margin: 0;

    color:
        rgba(255, 255, 255, .55);

    font-size: .6rem;

    line-height: 1.5;
}


.amaya-lawn__cta > a {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    flex: 0 0 auto;

    color:
        var(--amaya-white);

    font-size: .56rem;

    font-weight: 800;

    white-space: nowrap;
}


.amaya-lawn__cta-arrow {
    display: grid;

    place-items: center;

    width: 29px;
    height: 29px;

    color:
        var(--amaya-ink);

    background:
        var(--amaya-leaf-light);

    border-radius: 4px;

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


.amaya-lawn__cta > a:hover
.amaya-lawn__cta-arrow {
    background:
        var(--amaya-white);

    transform:
        translateX(3px);
}



/* ============================================================
   27. DESKTOP
   ============================================================ */

@media (min-width: 1200px) {

    .amaya-lawn__image--primary {
        min-height: 590px;
    }


    .amaya-lawn__maintenance-panel {
        min-height: 315px;
    }

}



/* ============================================================
   28. TABLET / SMALL LAPTOP
   ============================================================ */

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

    .amaya-lawn__intro {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(280px, .9fr);

        gap: 45px;
    }


    .amaya-lawn__title {
        font-size:
            clamp(
                3.1rem,
                6vw,
                4.65rem
            );
    }


    .amaya-lawn__showcase {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(220px, .75fr);
    }


    .amaya-lawn__image--primary {
        min-height: 535px;
    }


    .amaya-lawn__benefits {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .amaya-lawn__benefits-heading {
        grid-column:
            1 / -1;

        padding:
            25px
            0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(45, 91, 57, .09);
    }


    .amaya-lawn__benefit {
        padding:
            25px
            22px;
    }


    .amaya-lawn__summary {
        grid-template-columns: 1fr;

        gap: 22px;
    }


    .amaya-lawn__summary-list {
        border-top:
            1px solid
            rgba(45, 91, 57, .09);

        padding-top: 20px;
    }


    .amaya-lawn__summary-list
    > div:first-child {
        padding-left: 0;

        border-left: 0;
    }

}



/* ============================================================
   29. MOBILE
   ============================================================ */

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

    .amaya-lawn__header {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;

        margin-bottom: 42px;
    }


    .amaya-lawn__intro {
        grid-template-columns: 1fr;

        gap: 27px;

        margin-bottom: 54px;
    }


    .amaya-lawn__title {
        max-width: 610px;

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


    .amaya-lawn__intro-copy {
        max-width: 590px;

        padding-left: 19px;
    }


    .amaya-lawn__showcase {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(190px, .85fr);
    }


    .amaya-lawn__image--primary {
        min-height: 475px;
    }


    .amaya-lawn__maintenance-panel {
        min-height: 300px;
    }


    .amaya-lawn__benefits {
        grid-template-columns: 1fr;
    }


    .amaya-lawn__benefits-heading,
    .amaya-lawn__benefit {
        padding:
            23px
            0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(45, 91, 57, .09);
    }


    .amaya-lawn__benefit:last-child {
        border-bottom: 0;
    }


    .amaya-lawn__summary {
        grid-template-columns: 1fr;
    }


    .amaya-lawn__summary-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .amaya-lawn__summary-list > div {
        padding:
            13px
            15px;

        border-bottom:
            1px solid
            rgba(45, 91, 57, .08);
    }


    .amaya-lawn__summary-list
    > div:nth-child(odd) {
        padding-left: 0;

        border-left: 0;
    }


    .amaya-lawn__summary-list
    > div:nth-last-child(-n + 2) {
        border-bottom: 0;
    }


    .amaya-lawn__cta {
        align-items: flex-start;

        flex-direction: column;

        gap: 16px;
    }


    .amaya-lawn__cta-copy {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }

}



/* ============================================================
   30. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .amaya-lawn__header {
        align-items: flex-start;

        flex-direction: column;

        gap: 9px;

        margin-bottom: 35px;
    }


    .amaya-lawn__intro {
        grid-template-columns: 1fr;

        gap: 23px;

        margin-bottom: 45px;
    }


    .amaya-lawn__kicker {
        font-size: .46rem;
    }


    .amaya-lawn__title {
        font-size:
            clamp(
                2.65rem,
                11.8vw,
                3.5rem
            );
    }


    .amaya-lawn__intro-copy {
        padding-left: 16px;
    }


    .amaya-lawn__lead {
        font-size: 1.13rem;
    }


    .amaya-lawn__intro-copy > p:last-child {
        font-size: .66rem;
    }


    /* SHOWCASE */

    .amaya-lawn__showcase {
        grid-template-columns: 1fr;

        gap: 10px;

        margin-bottom: 48px;
    }


    .amaya-lawn__image--primary {
        grid-row: auto;

        min-height: 335px;
    }


    .amaya-lawn__maintenance-panel {
        min-height: 0;

        padding:
            22px
            18px;
    }


    .amaya-lawn__image--secondary {
        min-height: 220px;
    }


    .amaya-lawn__image-caption {
        right: 11px;
        bottom: 11px;
        left: 11px;
    }


    .amaya-lawn__image-caption strong {
        font-size: 1.05rem;
    }


    .amaya-lawn__expand {
        top: 9px;
        right: 9px;

        width: 30px;
        height: 30px;
    }


    /* BENEFITS */

    .amaya-lawn__benefits {
        grid-template-columns: 1fr;
    }


    .amaya-lawn__benefits-heading,
    .amaya-lawn__benefit {
        padding:
            21px
            0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(45, 91, 57, .09);
    }


    .amaya-lawn__benefit:last-child {
        border-bottom: 0;
    }


    .amaya-lawn__benefit h4 {
        font-size: 1.25rem;
    }


    /* SUMMARY */

    .amaya-lawn__summary {
        grid-template-columns: 1fr;

        gap: 20px;

        padding:
            20px
            17px;
    }


    .amaya-lawn__summary-list {
        grid-template-columns: 1fr;
    }


    .amaya-lawn__summary-list > div {
        min-height: 46px;

        padding:
            10px
            0;

        border-left: 0;

        border-bottom:
            1px solid
            rgba(45, 91, 57, .08);
    }


    .amaya-lawn__summary-list
    > div:last-child {
        border-bottom: 0;
    }


    /* CTA */

    .amaya-lawn__cta {
        align-items: flex-start;

        flex-direction: column;

        gap: 15px;

        padding: 17px;
    }


    .amaya-lawn__cta-copy {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }


    .amaya-lawn__cta-copy p {
        font-size: .57rem;
    }


    .amaya-lawn__number,
    .amaya-lawn__ambient--one {
        display: none;
    }

}



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

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

    .amaya-lawn__image img {
        transform:
            scale(1.025) !important;

        transition: none !important;
    }


    .amaya-lawn__expand,
    .amaya-lawn__cta-arrow {
        transition: none !important;
    }

}



































/* ============================================================
   11. HEDGE, SHRUB & PALM TRIMMING
   AMAYA'S LANDSCAPING LLC
   ============================================================ */


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

.amaya-trimming {
    position: relative;

    overflow: hidden;

    color:
        var(--amaya-white);

    background:
        linear-gradient(
            145deg,
            #0D1811 0%,
            #13271A 48%,
            #102016 100%
        );

    border-top:
        1px solid
        rgba(255, 255, 255, .07);

    isolation: isolate;
}



/* ============================================================
   02. AMBIENT ELEMENTS
   ============================================================ */

.amaya-trimming__ambient {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.amaya-trimming__ambient--one {
    top: -300px;
    right: -230px;

    width: 650px;
    height: 650px;

    background:
        radial-gradient(
            circle,
            rgba(162, 198, 81, .13),
            rgba(131, 169, 56, .03) 42%,
            transparent 69%
        );
}


.amaya-trimming__ambient--two {
    bottom: -350px;
    left: -310px;

    width: 700px;
    height: 700px;

    background:
        radial-gradient(
            circle,
            rgba(177, 138, 82, .09),
            transparent 68%
        );
}



/* ============================================================
   03. ARCHITECTURAL GRID
   ============================================================ */

.amaya-trimming__grid {
    position: absolute;

    inset: 0;

    opacity: .20;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        );

    background-size:
        90px 90px;

    pointer-events: none;
}



/* ============================================================
   04. LARGE NUMBER
   ============================================================ */

.amaya-trimming__number {
    position: absolute;

    top: 4%;
    right: 1%;

    color:
        rgba(255, 255, 255, .025);

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

    font-size:
        clamp(
            11rem,
            19vw,
            19rem
        );

    font-weight: 600;

    line-height: .8;

    pointer-events: none;
}



/* ============================================================
   05. BOTANICAL
   ============================================================ */

.amaya-trimming__botanical {
    position: absolute;

    right: 2%;
    bottom: 8%;

    width: 160px;

    color:
        var(--amaya-white);

    opacity: .025;

    pointer-events: none;
}


.amaya-trimming__botanical svg {
    width: 100%;
    height: auto;

    stroke:
        currentColor;

    stroke-width: 1.1;

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



/* ============================================================
   06. CONTAINER
   ============================================================ */

.amaya-trimming__container {
    position: relative;

    z-index: 2;
}



/* ============================================================
   07. HEADER
   ============================================================ */

.amaya-trimming__header {
    display: flex;

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

    gap: 30px;

    margin-bottom:
        clamp(
            45px,
            6vw,
            72px
        );

    padding-bottom: 19px;

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



/* ============================================================
   08. EYEBROW
   ============================================================ */

.amaya-trimming__eyebrow {
    display: flex;

    align-items: center;

    gap: 12px;

    color:
        var(--amaya-leaf-light);

    font-size: .65rem;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .14em;

    text-transform: uppercase;
}


.amaya-trimming__eyebrow-number {
    color:
        var(--amaya-brass-light);

    font-size: .57rem;
}


.amaya-trimming__eyebrow-line {
    width: 36px;
    height: 1px;

    background:
        rgba(162, 198, 81, .42);
}


.amaya-trimming__category {
    color:
        rgba(255, 255, 255, .38);

    font-size: .48rem;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;
}



/* ============================================================
   09. INTRO
   ============================================================ */

.amaya-trimming__intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(330px, .85fr);

    align-items: end;

    gap:
        clamp(
            55px,
            8vw,
            120px
        );

    margin-bottom:
        clamp(
            55px,
            7vw,
            90px
        );
}



/* ============================================================
   10. KICKER
   ============================================================ */

.amaya-trimming__kicker {
    display: block;

    margin-bottom: 14px;

    color:
        var(--amaya-brass-light);

    font-size: .52rem;

    font-weight: 800;

    letter-spacing: .13em;

    text-transform: uppercase;
}



/* ============================================================
   11. TITLE
   ============================================================ */

.amaya-trimming__title {
    max-width: 760px;

    margin: 0;

    color:
        var(--amaya-white);

    font-size:
        clamp(
            3.55rem,
            5.2vw,
            6rem
        );

    font-weight: 600;

    line-height: .87;

    letter-spacing: -.044em;
}


.amaya-trimming__title span {
    display: block;

    color:
        #E1D1B3;

    font-style: italic;

    font-weight: 500;
}



/* ============================================================
   12. INTRO COPY
   ============================================================ */

.amaya-trimming__intro-copy {
    max-width: 510px;

    padding-left: 25px;

    border-left:
        1px solid
        rgba(207, 176, 120, .28);
}


.amaya-trimming__lead {
    margin:
        0
        0
        17px;

    color:
        rgba(255, 255, 255, .82);

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

    font-size:
        clamp(
            1.2rem,
            1.6vw,
            1.55rem
        );

    font-weight: 500;

    line-height: 1.35;
}


.amaya-trimming__intro-copy > p:last-child {
    margin: 0;

    color:
        rgba(255, 255, 255, .48);

    font-size: .71rem;

    line-height: 1.7;
}



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

.amaya-trimming__visual {
    display: grid;

    grid-template-columns:
        minmax(0, 1.32fr)
        minmax(235px, .53fr)
        minmax(210px, .45fr);

    align-items: stretch;

    gap: 14px;

    min-height: 525px;

    margin-bottom:
        clamp(
            65px,
            8vw,
            100px
        );
}



/* ============================================================
   14. IMAGES
   ============================================================ */

.amaya-trimming__image {
    position: relative;

    display: block;

    width: 100%;

    min-width: 0;

    padding: 0;

    overflow: hidden;

    background:
        #09100C;

    border:
        1px solid
        rgba(255, 255, 255, .08);

    border-radius:
        var(--amaya-radius-md);

    box-shadow:
        var(--amaya-shadow-dark);

    cursor: zoom-in;

    text-align: left;
}


.amaya-trimming__image--primary,
.amaya-trimming__image--secondary {
    min-height: 525px;
}


.amaya-trimming__image img {
    position: absolute;

    inset: -3% 0;

    width: 100%;
    height: 106%;

    object-fit: cover;

    transform:
        translate3d(
            0,
            var(--amaya-trimming-image-shift, 0px),
            0
        )
        scale(1.025);

    transition:
        transform
        .95s
        cubic-bezier(.16, 1, .3, 1);
}


.amaya-trimming__image:hover img {
    scale: 1.045;
}



/* ============================================================
   15. OVERLAY
   ============================================================ */

.amaya-trimming__image-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(5, 11, 7, .04) 35%,
            rgba(5, 11, 7, .17) 64%,
            rgba(5, 11, 7, .86) 100%
        );

    pointer-events: none;
}



/* ============================================================
   16. CAPTION
   ============================================================ */

.amaya-trimming__image-caption {
    position: absolute;

    right: 19px;
    bottom: 18px;
    left: 19px;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 3px;

    color:
        var(--amaya-white);

    pointer-events: none;
}


.amaya-trimming__image-caption small {
    color:
        var(--amaya-leaf-light);

    font-size: .45rem;

    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.amaya-trimming__image-caption strong {
    font-family:
        var(--amaya-font-heading);

    font-size:
        clamp(
            1.25rem,
            1.75vw,
            1.8rem
        );

    font-weight: 600;

    line-height: 1;
}



/* ============================================================
   17. EXPAND
   ============================================================ */

.amaya-trimming__expand {
    position: absolute;

    top: 14px;
    right: 14px;

    z-index: 3;

    display: grid;

    place-items: center;

    width: 35px;
    height: 35px;

    color:
        var(--amaya-white);

    background:
        rgba(5, 12, 8, .48);

    border:
        1px solid
        rgba(255, 255, 255, .17);

    border-radius:
        var(--amaya-radius-sm);

    backdrop-filter:
        blur(8px);

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

    pointer-events: none;

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


.amaya-trimming__expand svg {
    width: 15px;
    height: 15px;

    stroke: currentColor;

    stroke-width: 1.5;

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


.amaya-trimming__image:hover
.amaya-trimming__expand {
    color:
        var(--amaya-ink);

    background:
        var(--amaya-leaf-light);

    transform:
        scale(1.05);
}



/* ============================================================
   18. PRINCIPLES
   ============================================================ */

.amaya-trimming__principles {
    display: flex;

    flex-direction: column;

    overflow: hidden;

    background:
        rgba(255, 255, 255, .035);

    border:
        1px solid
        rgba(255, 255, 255, .09);

    border-radius:
        var(--amaya-radius-md);

    backdrop-filter:
        blur(8px);

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



/* ============================================================
   19. PRINCIPLE
   ============================================================ */

.amaya-trimming__principle {
    display: flex;

    flex:
        1 1 0;

    flex-direction: column;

    justify-content: center;

    min-height: 0;

    padding:
        22px
        20px;

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


.amaya-trimming__principle:last-child {
    border-bottom: 0;
}


.amaya-trimming__principle-top {
    display: flex;

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

    gap: 12px;

    margin-bottom: 11px;
}


.amaya-trimming__principle-top > span:first-child {
    color:
        var(--amaya-brass-light);

    font-size: .43rem;

    font-weight: 700;
}



/* ============================================================
   20. PRINCIPLE ICON
   ============================================================ */

.amaya-trimming__principle-icon {
    display: grid;

    place-items: center;

    width: 30px;
    height: 30px;

    color:
        var(--amaya-leaf-light);

    background:
        rgba(162, 198, 81, .065);

    border:
        1px solid
        rgba(162, 198, 81, .11);

    border-radius:
        var(--amaya-radius-sm);
}


.amaya-trimming__principle-icon svg {
    width: 14px;
    height: 14px;

    stroke: currentColor;

    stroke-width: 1.45;

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


.amaya-trimming__principle-label {
    display: block;

    margin-bottom: 3px;

    color:
        rgba(255, 255, 255, .37);

    font-size: .4rem;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.amaya-trimming__principle h3 {
    margin:
        0
        0
        6px;

    color:
        #E1D1B3;

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

    font-style: italic;

    font-weight: 500;

    line-height: 1;
}


.amaya-trimming__principle p {
    margin: 0;

    color:
        rgba(255, 255, 255, .47);

    font-size: .51rem;

    line-height: 1.5;
}



/* ============================================================
   21. TYPES
   ============================================================ */

.amaya-trimming__types {
    display: grid;

    grid-template-columns:
        minmax(280px, .95fr)
        repeat(3, minmax(0, 1fr));

    border-top:
        1px solid
        rgba(255, 255, 255, .10);

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



/* ============================================================
   22. TYPES HEADING
   ============================================================ */

.amaya-trimming__types-heading {
    padding:
        30px
        36px
        30px
        0;

    border-right:
        1px solid
        rgba(255, 255, 255, .08);
}


.amaya-trimming__types-heading > span {
    display: block;

    margin-bottom: 9px;

    color:
        var(--amaya-leaf-light);

    font-size: .47rem;

    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.amaya-trimming__types-heading h3 {
    margin:
        0
        0
        13px;

    color:
        var(--amaya-white);

    font-size:
        clamp(
            1.8rem,
            2.45vw,
            2.55rem
        );

    font-weight: 600;

    line-height: .94;
}


.amaya-trimming__types-heading em {
    display: block;

    color:
        #E1D1B3;

    font-weight: 500;
}


.amaya-trimming__types-heading p {
    max-width: 300px;

    margin: 0;

    color:
        rgba(255, 255, 255, .43);

    font-size: .58rem;

    line-height: 1.55;
}



/* ============================================================
   23. TYPE
   ============================================================ */

.amaya-trimming__type {
    padding:
        30px
        27px;

    border-right:
        1px solid
        rgba(255, 255, 255, .08);
}


.amaya-trimming__type:last-child {
    border-right: 0;
}


.amaya-trimming__type-top {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;
}


.amaya-trimming__type-top > span:first-child {
    color:
        var(--amaya-brass-light);

    font-size: .44rem;

    font-weight: 700;
}


.amaya-trimming__type-line {
    width: 31px;
    height: 1px;

    background:
        rgba(162, 198, 81, .30);
}


.amaya-trimming__type h4 {
    margin:
        0
        0
        10px;

    color:
        var(--amaya-white);

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

    font-size:
        clamp(
            1.55rem,
            2.1vw,
            2rem
        );

    font-weight: 600;

    line-height: 1;
}


.amaya-trimming__type p {
    margin: 0;

    color:
        rgba(255, 255, 255, .46);

    font-size: .56rem;

    line-height: 1.58;
}



/* ============================================================
   24. EFFECT
   ============================================================ */

.amaya-trimming__effect {
    display: grid;

    grid-template-columns:
        minmax(310px, .76fr)
        minmax(0, 1.24fr);

    align-items: center;

    gap:
        clamp(
            40px,
            6vw,
            85px
        );

    margin-top:
        clamp(
            50px,
            6vw,
            74px
        );

    padding:
        27px
        29px;

    background:
        rgba(255, 255, 255, .045);

    border:
        1px solid
        rgba(255, 255, 255, .09);

    border-radius:
        var(--amaya-radius-md);
}



/* ============================================================
   25. EFFECT COPY
   ============================================================ */

.amaya-trimming__effect-copy > span {
    display: block;

    margin-bottom: 7px;

    color:
        var(--amaya-brass-light);

    font-size: .45rem;

    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.amaya-trimming__effect-copy strong {
    display: block;

    max-width: 420px;

    color:
        rgba(255, 255, 255, .82);

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

    font-size:
        clamp(
            1.25rem,
            1.8vw,
            1.6rem
        );

    font-weight: 600;

    line-height: 1.2;
}



/* ============================================================
   26. EFFECT LIST
   ============================================================ */

.amaya-trimming__effect-list {
    display: grid;

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


.amaya-trimming__effect-list > div {
    display: flex;

    flex-direction: column;

    gap: 6px;

    min-height: 53px;

    padding:
        0
        17px;

    border-left:
        1px solid
        rgba(255, 255, 255, .09);
}


.amaya-trimming__effect-list span {
    color:
        var(--amaya-brass-light);

    font-size: .4rem;

    font-weight: 700;
}


.amaya-trimming__effect-list strong {
    color:
        rgba(255, 255, 255, .72);

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

    font-size: 1rem;

    font-weight: 600;

    line-height: 1.05;
}



/* ============================================================
   27. CTA
   ============================================================ */

.amaya-trimming__cta {
    display: flex;

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

    gap: 35px;

    margin-top: 29px;

    padding:
        20px
        22px;

    background:
        rgba(162, 198, 81, .07);

    border:
        1px solid
        rgba(162, 198, 81, .13);

    border-radius:
        var(--amaya-radius-md);
}


.amaya-trimming__cta-content {
    display: flex;

    align-items: center;

    gap: 14px;
}


.amaya-trimming__cta-mark {
    display: grid;

    place-items: center;

    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    color:
        var(--amaya-brass-light);

    border:
        1px solid
        rgba(207, 176, 120, .18);

    border-radius:
        var(--amaya-radius-sm);

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

    font-size: .8rem;
}


.amaya-trimming__cta-content
div > span {
    display: block;

    margin-bottom: 3px;

    color:
        var(--amaya-leaf-light);

    font-size: .49rem;

    font-weight: 800;

    letter-spacing: .09em;

    text-transform: uppercase;
}


.amaya-trimming__cta-content p {
    margin: 0;

    color:
        rgba(255, 255, 255, .51);

    font-size: .59rem;

    line-height: 1.5;
}


.amaya-trimming__cta > a {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    flex: 0 0 auto;

    color:
        var(--amaya-white);

    font-size: .56rem;

    font-weight: 800;

    white-space: nowrap;
}


.amaya-trimming__cta-arrow {
    display: grid;

    place-items: center;

    width: 30px;
    height: 30px;

    color:
        var(--amaya-ink);

    background:
        var(--amaya-leaf-light);

    border-radius: 4px;

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


.amaya-trimming__cta-arrow svg {
    width: 14px;
    height: 14px;

    stroke:
        currentColor;

    stroke-width: 1.7;

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


.amaya-trimming__cta > a:hover
.amaya-trimming__cta-arrow {
    background:
        var(--amaya-white);

    transform:
        translateX(3px);
}



/* ============================================================
   28. DESKTOP
   ============================================================ */

@media (min-width: 1200px) {

    .amaya-trimming__visual {
        min-height: 540px;
    }


    .amaya-trimming__image--primary,
    .amaya-trimming__image--secondary {
        min-height: 540px;
    }

}



/* ============================================================
   29. TABLET / SMALL LAPTOP
   ============================================================ */

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

    .amaya-trimming__intro {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(280px, .9fr);

        gap: 45px;
    }


    .amaya-trimming__title {
        font-size:
            clamp(
                3.1rem,
                6vw,
                4.7rem
            );
    }


    .amaya-trimming__visual {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(220px, .75fr);

        min-height: 0;
    }


    .amaya-trimming__image--primary {
        min-height: 510px;
    }


    .amaya-trimming__principles {
        min-height: 510px;
    }


    .amaya-trimming__image--secondary {
        grid-column:
            1 / -1;

        min-height: 270px;
    }


    .amaya-trimming__image--secondary img {
        object-position:
            center 45%;
    }


    .amaya-trimming__types {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .amaya-trimming__types-heading {
        grid-column:
            1 / -1;

        padding:
            26px
            0;

        border-right: 0;

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


    .amaya-trimming__effect {
        grid-template-columns: 1fr;

        gap: 23px;
    }


    .amaya-trimming__effect-list {
        padding-top: 20px;

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


    .amaya-trimming__effect-list
    > div:first-child {
        padding-left: 0;

        border-left: 0;
    }

}



/* ============================================================
   30. MOBILE
   ============================================================ */

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

    .amaya-trimming__header {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;

        margin-bottom: 42px;
    }


    .amaya-trimming__intro {
        grid-template-columns: 1fr;

        gap: 27px;

        margin-bottom: 54px;
    }


    .amaya-trimming__title {
        max-width: 610px;

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


    .amaya-trimming__intro-copy {
        max-width: 590px;

        padding-left: 19px;
    }


    .amaya-trimming__visual {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(190px, .85fr);

        min-height: 0;
    }


    .amaya-trimming__image--primary {
        min-height: 470px;
    }


    .amaya-trimming__principles {
        min-height: 470px;
    }


    .amaya-trimming__principle {
        padding:
            17px
            15px;
    }


    .amaya-trimming__image--secondary {
        grid-column:
            1 / -1;

        min-height: 255px;
    }


    .amaya-trimming__types {
        grid-template-columns: 1fr;
    }


    .amaya-trimming__types-heading,
    .amaya-trimming__type {
        padding:
            23px
            0;

        border-right: 0;

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


    .amaya-trimming__type:last-child {
        border-bottom: 0;
    }


    .amaya-trimming__effect {
        grid-template-columns: 1fr;

        gap: 22px;
    }


    .amaya-trimming__effect-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .amaya-trimming__effect-list > div {
        padding:
            12px
            15px;

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


    .amaya-trimming__effect-list
    > div:nth-child(odd) {
        padding-left: 0;

        border-left: 0;
    }


    .amaya-trimming__effect-list
    > div:nth-last-child(-n + 2) {
        border-bottom: 0;
    }


    .amaya-trimming__cta {
        align-items: flex-start;

        flex-direction: column;

        gap: 17px;
    }

}



/* ============================================================
   31. SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .amaya-trimming__header {
        align-items: flex-start;

        flex-direction: column;

        gap: 9px;

        margin-bottom: 35px;
    }


    .amaya-trimming__eyebrow {
        gap: 9px;

        font-size: .53rem;
    }


    .amaya-trimming__eyebrow-line {
        width: 27px;
    }


    .amaya-trimming__intro {
        grid-template-columns: 1fr;

        gap: 23px;

        margin-bottom: 45px;
    }


    .amaya-trimming__kicker {
        font-size: .45rem;
    }


    .amaya-trimming__title {
        font-size:
            clamp(
                2.65rem,
                11.8vw,
                3.5rem
            );
    }


    .amaya-trimming__intro-copy {
        padding-left: 16px;
    }


    .amaya-trimming__lead {
        font-size: 1.13rem;
    }


    .amaya-trimming__intro-copy
    > p:last-child {
        font-size: .65rem;
    }


    /* VISUAL */

    .amaya-trimming__visual {
        grid-template-columns: 1fr;

        gap: 10px;

        min-height: 0;

        margin-bottom: 48px;
    }


    .amaya-trimming__image--primary {
        min-height: 335px;
    }


    .amaya-trimming__principles {
        min-height: 0;
    }


    .amaya-trimming__principle {
        min-height: 145px;

        padding:
            19px
            17px;
    }


    .amaya-trimming__principle h3 {
        font-size: 1.55rem;
    }


    .amaya-trimming__image--secondary {
        min-height: 220px;
    }


    .amaya-trimming__image-caption {
        right: 11px;
        bottom: 11px;
        left: 11px;
    }


    .amaya-trimming__image-caption strong {
        font-size: 1.05rem;
    }


    .amaya-trimming__expand {
        top: 9px;
        right: 9px;

        width: 30px;
        height: 30px;
    }


    /* TYPES */

    .amaya-trimming__types {
        grid-template-columns: 1fr;
    }


    .amaya-trimming__types-heading,
    .amaya-trimming__type {
        padding:
            21px
            0;

        border-right: 0;

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


    .amaya-trimming__type:last-child {
        border-bottom: 0;
    }


    .amaya-trimming__type h4 {
        font-size: 1.55rem;
    }


    .amaya-trimming__type p {
        font-size: .55rem;
    }


    /* EFFECT */

    .amaya-trimming__effect {
        grid-template-columns: 1fr;

        gap: 20px;

        padding:
            20px
            17px;
    }


    .amaya-trimming__effect-list {
        grid-template-columns: 1fr;
    }


    .amaya-trimming__effect-list > div {
        min-height: 46px;

        padding:
            10px
            0;

        border-left: 0;

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


    .amaya-trimming__effect-list
    > div:last-child {
        border-bottom: 0;
    }


    /* CTA */

    .amaya-trimming__cta {
        align-items: flex-start;

        flex-direction: column;

        gap: 16px;

        padding: 17px;
    }


    .amaya-trimming__cta-content {
        align-items: flex-start;
    }


    .amaya-trimming__cta-content p {
        font-size: .55rem;
    }


    .amaya-trimming__number,
    .amaya-trimming__botanical,
    .amaya-trimming__ambient--two {
        display: none;
    }

}



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

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

    .amaya-trimming__image img {
        transform:
            scale(1.025) !important;

        transition: none !important;
    }


    .amaya-trimming__expand,
    .amaya-trimming__cta-arrow {
        transition: none !important;
    }

}
















































/* ============================================================
   AMAYA'S LANDSCAPING LLC
   GALLERY — COMPLETE TYPOGRAPHY READABILITY PATCH

   IMPORTANT:
   Place this block at the VERY END of /css/gallery.css

   Goals:
   - No excessively tiny visible text
   - Stronger readability on mobile
   - Better contrast on dark surfaces
   - Preserve editorial hierarchy
   - Preserve existing large headings
   ============================================================ */


/* ============================================================
   01. READABILITY SCALE — DESKTOP
   ============================================================ */

@media (min-width: 1200px) {

    :root {
        --amaya-gallery-text-micro: .70rem;
        --amaya-gallery-text-small: .76rem;
        --amaya-gallery-text-body: .87rem;
        --amaya-gallery-text-body-lg: .98rem;
        --amaya-gallery-text-action: .75rem;
        --amaya-gallery-text-caption: .70rem;
    }

}



/* ============================================================
   02. READABILITY SCALE — TABLET / SMALL LAPTOP
   ============================================================ */

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

    :root {
        --amaya-gallery-text-micro: .70rem;
        --amaya-gallery-text-small: .75rem;
        --amaya-gallery-text-body: .86rem;
        --amaya-gallery-text-body-lg: .94rem;
        --amaya-gallery-text-action: .74rem;
        --amaya-gallery-text-caption: .69rem;
    }

}



/* ============================================================
   03. READABILITY SCALE — MOBILE
   ============================================================ */

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

    :root {
        --amaya-gallery-text-micro: .71rem;
        --amaya-gallery-text-small: .76rem;
        --amaya-gallery-text-body: .87rem;
        --amaya-gallery-text-body-lg: .93rem;
        --amaya-gallery-text-action: .74rem;
        --amaya-gallery-text-caption: .70rem;
    }

}



/* ============================================================
   04. READABILITY SCALE — SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

    :root {
        --amaya-gallery-text-micro: .71rem;
        --amaya-gallery-text-small: .76rem;
        --amaya-gallery-text-body: .87rem;
        --amaya-gallery-text-body-lg: .91rem;
        --amaya-gallery-text-action: .74rem;
        --amaya-gallery-text-caption: .70rem;
    }

}



/* ============================================================
   05. GALLERY HERO
   ============================================================ */

.amaya-gallery-hero__eyebrow {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-gallery-hero__eyebrow-number {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-gallery-hero__description {
    color:
        rgba(255, 255, 255, .78);

    font-size:
        var(--amaya-gallery-text-body-lg);
}


.amaya-gallery-hero__primary {
    font-size:
        var(--amaya-gallery-text-action);
}


.amaya-gallery-hero__contact-link {
    color:
        rgba(255, 255, 255, .85);

    font-size:
        var(--amaya-gallery-text-action);
}


.amaya-gallery-hero__aside-label {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-gallery-hero__aside-copy strong {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-gallery-hero__aside-copy span {
    color:
        rgba(255, 255, 255, .70);

    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-gallery-hero__bottom-location,
.amaya-gallery-hero__bottom-services {
    color:
        rgba(255, 255, 255, .67);

    font-size:
        var(--amaya-gallery-text-micro);

    line-height: 1.35;
}



/* ============================================================
   06. SERVICE NAVIGATION
   ============================================================ */

.amaya-gallery-nav__intro-copy > span {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-gallery-nav__intro-copy small {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-micro);

    line-height: 1.35;
}


.amaya-gallery-nav__number {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-gallery-nav__link-copy strong {
    font-size: 1.05rem;
}


.amaya-gallery-nav__link-copy small {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-micro);

    line-height: 1.35;
}


.amaya-gallery-nav__arrow {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-gallery-nav__mobile-hint {
    font-size:
        var(--amaya-gallery-text-micro);
}



/* ============================================================
   07. GALLERY INTRODUCTION
   ============================================================ */

.amaya-gallery-intro__eyebrow {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-gallery-intro__eyebrow-number {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-gallery-intro__header-rule small {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-gallery-intro__body p {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.72;
}


.amaya-gallery-intro__disciplines-head
span:first-child {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-gallery-intro__disciplines-head
span:last-child {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-gallery-intro__discipline-number {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-gallery-intro__discipline-copy small {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-micro);

    line-height: 1.35;
}


.amaya-gallery-intro__discipline-arrow {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-gallery-intro__principle
div > span {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-gallery-intro__principle p {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.6;
}


.amaya-gallery-intro__note-label {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-gallery-intro__note p {
    color:
        rgba(255, 255, 255, .74);

    font-size:
        var(--amaya-gallery-text-body);
}


.amaya-gallery-intro__note a {
    font-size:
        var(--amaya-gallery-text-action);
}



/* ============================================================
   08. LANDSCAPE DESIGN & RENOVATION
   SHARED SERVICE SYSTEM
   ============================================================ */

.amaya-gallery-service__eyebrow {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-gallery-service__eyebrow-number {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-gallery-service__category {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-gallery-service__description p {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.72;
}


.amaya-gallery-service__scope-head span {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-gallery-service__scope-head small {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-gallery-service__scope-item span {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-gallery-service__scope-item p {
    font-size:
        var(--amaya-gallery-text-small);

    line-height: 1.45;
}


.amaya-gallery-service__image-label span {
    font-size:
        var(--amaya-gallery-text-caption);
}


.amaya-gallery-service__focus-top
> span:first-child {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-gallery-service__focus-item p {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.6;
}


.amaya-gallery-service__footer p {
    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.55;
}


.amaya-gallery-service__footer a {
    font-size:
        var(--amaya-gallery-text-action);
}



/* ============================================================
   09. PLANTS & FLOWERS
   ============================================================ */

.amaya-planting__media-note > span {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-planting__media-note small {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-planting__image-caption small {
    font-size:
        var(--amaya-gallery-text-caption);
}


.amaya-planting__kicker {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-planting__description p {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.72;
}


.amaya-planting__benefits-head span {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-planting__benefits-head small {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-planting__benefit-number {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-planting__benefit p {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.55;
}


.amaya-planting__feature-top
> span:first-child {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-planting__feature p {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.6;
}


.amaya-planting__cta-copy > span {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-planting__cta-copy p {
    color:
        rgba(255, 255, 255, .74);

    font-size:
        var(--amaya-gallery-text-body);
}


.amaya-planting__cta > a {
    font-size:
        var(--amaya-gallery-text-action);
}



/* ============================================================
   10. SOD INSTALLATION
   ============================================================ */

.amaya-sod__kicker {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-sod__intro-copy > p:last-child {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.7;
}


.amaya-sod__step-label {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-sod__step p {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.62;
}


.amaya-sod__image-caption small {
    font-size:
        var(--amaya-gallery-text-caption);
}


.amaya-sod__gallery-label {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-sod__qualities span {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-sod__qualities strong {
    color:
        rgba(255, 255, 255, .78);

    font-size:
        var(--amaya-gallery-text-small);

    line-height: 1.35;
}


.amaya-sod__details-intro > span {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-sod__detail > span {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-sod__detail p {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.6;
}


.amaya-sod__cta-copy > span {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-sod__cta-copy p {
    font-size:
        var(--amaya-gallery-text-body);
}


.amaya-sod__cta > a {
    font-size:
        var(--amaya-gallery-text-action);
}



/* ============================================================
   11. MULCH INSTALLATION
   ============================================================ */

.amaya-mulch__kicker {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-mulch__intro-copy > p:last-child {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.7;
}


.amaya-mulch__image-caption small {
    font-size:
        var(--amaya-gallery-text-caption);
}


.amaya-mulch__visual-panel-head span {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-mulch__visual-panel-head small {
    color:
        rgba(255, 255, 255, .68);

    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-mulch__visual-values span {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-mulch__visual-values strong {
    color:
        rgba(255, 255, 255, .78);

    font-size:
        var(--amaya-gallery-text-small);

    line-height: 1.3;
}


.amaya-mulch__benefits-intro > span {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-mulch__benefits-intro p {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.6;
}


.amaya-mulch__benefit-top
> span:first-child {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-mulch__benefit p {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.6;
}


.amaya-mulch__application-heading > span {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-mulch__application-list span {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-mulch__cta-copy > span {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-mulch__cta-copy p {
    color:
        rgba(255, 255, 255, .74);

    font-size:
        var(--amaya-gallery-text-body);
}


.amaya-mulch__cta > a {
    font-size:
        var(--amaya-gallery-text-action);
}



/* ============================================================
   12. LAWN MAINTENANCE
   ============================================================ */

.amaya-lawn__kicker {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-lawn__intro-copy > p:last-child {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.7;
}


.amaya-lawn__image-caption small {
    font-size:
        var(--amaya-gallery-text-caption);
}


.amaya-lawn__panel-head span {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-lawn__panel-head small {
    color:
        rgba(255, 255, 255, .68);

    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-lawn__approach-number {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-lawn__approach-item p {
    color:
        rgba(255, 255, 255, .72);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.55;
}


.amaya-lawn__benefits-heading > span {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-lawn__benefits-heading p {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.6;
}


.amaya-lawn__benefit-top
> span:first-child {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-lawn__benefit p {
    color:
        var(--amaya-text-soft);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.6;
}


.amaya-lawn__summary-heading > span {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-lawn__summary-list span {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-lawn__cta-copy > span {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-lawn__cta-copy p {
    color:
        rgba(255, 255, 255, .74);

    font-size:
        var(--amaya-gallery-text-body);
}


.amaya-lawn__cta > a {
    font-size:
        var(--amaya-gallery-text-action);
}



/* ============================================================
   13. HEDGE, SHRUB & PALM TRIMMING
   ============================================================ */

.amaya-trimming__eyebrow {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-trimming__eyebrow-number {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-trimming__category {
    color:
        rgba(255, 255, 255, .68);

    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-trimming__kicker {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-trimming__intro-copy
> p:last-child {
    color:
        rgba(255, 255, 255, .72);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.68;
}


.amaya-trimming__image-caption small {
    font-size:
        var(--amaya-gallery-text-caption);
}


.amaya-trimming__principle-top
> span:first-child {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-trimming__principle-label {
    color:
        rgba(255, 255, 255, .70);

    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-trimming__principle p {
    color:
        rgba(255, 255, 255, .72);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.55;
}


.amaya-trimming__types-heading > span {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-trimming__types-heading p {
    color:
        rgba(255, 255, 255, .72);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.6;
}


.amaya-trimming__type-top
> span:first-child {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-trimming__type p {
    color:
        rgba(255, 255, 255, .72);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.6;
}


.amaya-trimming__effect-copy > span {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-trimming__effect-list span {
    font-size:
        var(--amaya-gallery-text-micro);
}


.amaya-trimming__cta-content
div > span {
    font-size:
        var(--amaya-gallery-text-small);
}


.amaya-trimming__cta-content p {
    color:
        rgba(255, 255, 255, .72);

    font-size:
        var(--amaya-gallery-text-body);

    line-height: 1.55;
}


.amaya-trimming__cta > a {
    font-size:
        var(--amaya-gallery-text-action);
}



/* ============================================================
   14. MOBILE — KEEP SECONDARY IMAGE TEXT VISIBLE
   ============================================================ */

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

    /*
       Slightly more room for navigation text.
    */

    .amaya-gallery-nav__link {
        flex-basis: 205px;

        min-height: 72px;
    }


    /*
       Do not make paragraphs smaller just because the
       screen is smaller.
    */

    .amaya-gallery-intro__body p,
    .amaya-gallery-service__description p,
    .amaya-planting__description p,
    .amaya-sod__intro-copy > p:last-child,
    .amaya-mulch__intro-copy > p:last-child,
    .amaya-lawn__intro-copy > p:last-child,
    .amaya-trimming__intro-copy > p:last-child {
        font-size:
            var(--amaya-gallery-text-body);
    }

}



/* ============================================================
   15. SMALL MOBILE — COMPLETE READABILITY
   ============================================================ */

@media (max-width: 480px) {

    /*
       Navigation items need enough physical space after
       increasing the text size.
    */

    .amaya-gallery-nav__link {
        flex:
            0 0
            190px;

        min-height: 69px;

        padding:
            11px
            10px;
    }


    .amaya-gallery-nav__link-copy strong {
        font-size: 1rem;
    }


    /*
       The original CSS intentionally hid captions on some
       secondary photos.

       Keep them visible so the actual textual content is not
       lost on phones.
    */

    .amaya-gallery-service__image--secondary
    .amaya-gallery-service__image-label {
        display: flex;
    }


    .amaya-planting__image--secondary
    .amaya-planting__image-caption {
        display: flex;
    }


    .amaya-gallery-service__image--secondary
    .amaya-gallery-service__image-label strong,
    .amaya-planting__image--secondary
    .amaya-planting__image-caption strong {
        font-size: .95rem;
    }


    /*
       Keep captions readable without covering too much image.
    */

    .amaya-gallery-service__image-label,
    .amaya-planting__image-caption,
    .amaya-sod__image-caption,
    .amaya-mulch__image-caption,
    .amaya-lawn__image-caption,
    .amaya-trimming__image-caption {
        gap: 4px;
    }


    /*
       Sod has three qualities inside a relatively narrow area.
       Give the labels additional breathing room.
    */

    .amaya-sod__qualities > div {
        min-height: 58px;
    }


    /*
       Prevent excessively tight readable text.
    */

    .amaya-gallery-intro__principle p,
    .amaya-gallery-service__focus-item p,
    .amaya-planting__benefit p,
    .amaya-planting__feature p,
    .amaya-sod__step p,
    .amaya-sod__detail p,
    .amaya-mulch__benefit p,
    .amaya-lawn__approach-item p,
    .amaya-lawn__benefit p,
    .amaya-trimming__principle p,
    .amaya-trimming__type p {
        line-height: 1.62;
    }


    /*
       CTA text should be allowed to wrap naturally rather
       than being forced into an extremely small font.
    */

    .amaya-planting__cta-copy > span,
    .amaya-sod__cta-copy > span,
    .amaya-mulch__cta-copy > span,
    .amaya-lawn__cta-copy > span {
        white-space: normal;

        line-height: 1.35;
    }

}



/* ============================================================
   16. DARK-SURFACE CONTRAST
   ============================================================ */

.amaya-gallery-hero__description,
.amaya-gallery-hero__aside-copy span,

.amaya-gallery-intro__note p,

.amaya-planting__cta-copy p,

.amaya-sod__qualities strong,

.amaya-mulch__visual-panel-head small,
.amaya-mulch__visual-values strong,
.amaya-mulch__cta-copy p,

.amaya-lawn__panel-head small,
.amaya-lawn__approach-item p,
.amaya-lawn__cta-copy p,

.amaya-trimming__intro-copy > p:last-child,
.amaya-trimming__principle-label,
.amaya-trimming__principle p,
.amaya-trimming__types-heading p,
.amaya-trimming__type p,
.amaya-trimming__cta-content p {
    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;
}