/* ==========================================================
   C&M MASONRY & HARDSCAPING
   CONTACT.HTML
   02. CONTACT HERO
   ========================================================== */


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

.cm-contact-hero {
    --cm-contact-bottom-height: 58px;

    position: relative;

    width: 100%;

    /*
        Nunca puede superar el espacio disponible
        debajo del Header.
    */

    height:
        min(
            720px,
            calc(
                100vh -
                var(--cm-header-height)
            )
        );

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            ellipse at 13% 15%,
            rgba(150, 115, 79, 0.07),
            transparent 29%
        ),

        radial-gradient(
            ellipse at 68% 88%,
            rgba(192, 24, 32, 0.04),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #F8F5EF 0%,
            var(--cm-ivory) 54%,
            #EBE4DA 100%
        );
}


@supports (height: 100svh) {

    .cm-contact-hero {
        height:
            min(
                720px,
                calc(
                    100svh -
                    var(--cm-header-height)
                )
            );
    }

}


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

.cm-contact-hero::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: 0.105;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.19'/%3E%3C/svg%3E");

    mix-blend-mode:
        multiply;
}


/* ==========================================================
   RED EDGE
   ========================================================== */

.cm-contact-hero::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 4px;
    height: 100%;

    z-index: 3;

    background:
        var(--cm-gradient-red);
}


/* ==========================================================
   DECORATION
   ========================================================== */

.cm-contact-hero__decor {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}

.cm-contact-hero__glow {
    position: absolute;

    width: 420px;
    height: 420px;

    left: -250px;
    bottom: -260px;

    border-radius: 50%;

    background:
        rgba(192, 24, 32, 0.07);

    filter:
        blur(60px);
}


/* ==========================================================
   CONTOURS
   ========================================================== */

.cm-contact-hero__contours {
    position: absolute;

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

    width:
        min(
            48vw,
            680px
        );

    height: auto;

    fill: none;

    stroke:
        rgba(134, 18, 23, 0.075);

    stroke-width:
        1.25;

    transform:
        rotate(-6deg);

    will-change:
        transform;
}


/* ==========================================================
   CONTAINER
   ========================================================== */

.cm-contact-hero__container {
    position: relative;

    z-index: 2;

    height:
        calc(
            100% -
            var(--cm-contact-bottom-height)
        );

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, 0.75fr);

    gap:
        clamp(
            60px,
            8vw,
            125px
        );

    align-items: center;
}


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

.cm-contact-hero__content {
    min-width: 0;

    max-width: 760px;
}


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

.cm-contact-hero__eyebrow {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom:
        clamp(
            17px,
            2.2vh,
            24px
        );
}

.cm-contact-hero__eyebrow > span {
    width: 36px;
    height: 2px;

    background:
        var(--cm-red);
}

.cm-contact-hero__eyebrow p {
    margin: 0;

    color:
        var(--cm-red-deep);

    font-size:
        0.78rem;

    font-weight:
        700;

    line-height: 1;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}


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

.cm-contact-hero__title {
    max-width: 800px;

    margin:
        0 0
        clamp(
            20px,
            2.7vh,
            30px
        );

    color:
        var(--cm-ink);

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

    font-size:
        clamp(
            4rem,
            min(5.8vw, 8.2vh),
            6.8rem
        );

    font-weight:
        700;

    line-height:
        0.88;

    letter-spacing:
        -0.038em;

    text-transform:
        uppercase;
}


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

.cm-contact-hero__title-mask {
    display: block;

    overflow: hidden;

    padding-bottom:
        0.045em;
}

.cm-contact-hero__title-mask > span {
    display: block;
}

.cm-contact-hero__title-mask--accent {
    color:
        var(--cm-red);
}


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

.cm-contact-hero__description {
    max-width: 570px;

    margin:
        0 0
        clamp(
            23px,
            3.2vh,
            34px
        );

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

    font-size:
        clamp(
            0.96rem,
            1vw,
            1.08rem
        );

    font-weight:
        500;

    line-height:
        1.7;
}


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

.cm-contact-hero__actions {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;
}


/* ==========================================================
   PRIMARY BUTTON
   ========================================================== */

.cm-contact-hero__primary {
    position: relative;

    min-height: 56px;

    display: inline-flex;

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

    gap: 16px;

    padding:
        0 23px;

    overflow: hidden;

    isolation: isolate;

    color:
        var(--cm-white);

    background:
        var(--cm-gradient-red);

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

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

    box-shadow:
        var(--cm-shadow-red);

    font-size:
        0.84rem;

    font-weight:
        700;

    line-height: 1;

    letter-spacing:
        0.025em;

    text-transform:
        uppercase;

    transition:
        transform 380ms var(--cm-ease),
        box-shadow 380ms var(--cm-ease);
}


/* Shine */

.cm-contact-hero__primary::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            110deg,
            transparent 18%,
            rgba(255,255,255,0.17) 50%,
            transparent 82%
        );

    transform:
        translateX(-130%);

    transition:
        transform 700ms var(--cm-ease);
}

.cm-contact-hero__primary svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

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

.cm-contact-hero__primary:hover {
    color:
        var(--cm-white);

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 45px
        rgba(192,24,32,0.24);
}

.cm-contact-hero__primary:hover::before {
    transform:
        translateX(130%);
}

.cm-contact-hero__primary:hover svg {
    transform:
        translateY(3px);
}


/* ==========================================================
   CALL BUTTON
   ========================================================== */

.cm-contact-hero__call {
    min-height: 56px;

    display: inline-flex;

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

    gap: 11px;

    padding:
        0 21px;

    color:
        var(--cm-ink);

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

    border:
        1px solid
        rgba(23,24,22,0.16);

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

    backdrop-filter:
        blur(12px);

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

    font-size:
        0.87rem;

    font-weight:
        700;

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

.cm-contact-hero__call svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke:
        var(--cm-red);

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}

.cm-contact-hero__call:hover {
    color:
        var(--cm-red-deep);

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

    border-color:
        rgba(192,24,32,0.23);

    transform:
        translateY(-3px);
}


/* ==========================================================
   CONTACT PANEL
   ========================================================== */

.cm-contact-hero__panel {
    position: relative;

    min-width: 0;

    overflow: hidden;

    padding:
        clamp(
            26px,
            2.7vw,
            40px
        );

    color:
        var(--cm-white);

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(192,24,32,0.23),
            transparent 29%
        ),

        radial-gradient(
            circle at 8% 100%,
            rgba(150,115,79,0.12),
            transparent 32%
        ),

        var(--cm-gradient-dark);

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

    border-radius:
        var(--cm-radius-lg);

    box-shadow:
        var(--cm-shadow-strong);
}


/* Mineral grain */

.cm-contact-hero__panel::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.13;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 170 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");

    mix-blend-mode:
        soft-light;
}


/* Red top edge */

.cm-contact-hero__panel::after {
    content: "";

    position: absolute;

    top: 0;
    left: 36px;

    width: 90px;
    height: 3px;

    background:
        var(--cm-gradient-red);
}


/* ==========================================================
   PANEL TOP
   ========================================================== */

.cm-contact-hero__panel-top {
    position: relative;

    z-index: 1;

    display: flex;

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

    gap: 20px;

    margin-bottom:
        28px;
}

.cm-contact-hero__panel-top p {
    margin: 0;

    color:
        rgba(255,255,255,0.53);

    font-size:
        0.69rem;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}

.cm-contact-hero__panel-top > span {
    color:
        rgba(255,255,255,0.17);

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

    font-size:
        1.35rem;

    font-weight:
        700;
}


/* ==========================================================
   CONTACT DETAILS
   ========================================================== */

.cm-contact-hero__panel-main {
    position: relative;

    z-index: 1;
}

.cm-contact-detail {
    width: 100%;

    min-height: 74px;

    display: grid;

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

    align-items: center;

    gap: 14px;

    padding:
        12px 0;

    color:
        var(--cm-white);

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

    transition:
        color 300ms ease,
        padding-left 350ms var(--cm-ease);
}

a.cm-contact-detail:hover {
    padding-left:
        5px;

    color:
        #F4C6C8;
}


/* ==========================================================
   DETAIL ICON
   ========================================================== */

.cm-contact-detail__icon {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    color:
        var(--cm-red-bright);

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

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

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

.cm-contact-detail__icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        1.55;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* ==========================================================
   DETAIL TEXT
   ========================================================== */

.cm-contact-detail__text {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;
}

.cm-contact-detail__text small {
    color:
        rgba(255,255,255,0.42);

    font-size:
        0.65rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}

.cm-contact-detail__text strong {
    overflow-wrap: anywhere;

    color:
        inherit;

    font-size:
        0.82rem;

    font-weight:
        600;

    line-height:
        1.4;
}

.cm-contact-detail__arrow {
    color:
        var(--cm-red-bright);

    font-size:
        0.9rem;

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

a.cm-contact-detail:hover
.cm-contact-detail__arrow {
    transform:
        translate(
            3px,
            -3px
        );
}


/* ==========================================================
   HOURS
   ========================================================== */

.cm-contact-hero__hours {
    position: relative;

    z-index: 1;

    display: grid;

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

    gap: 1px;

    margin-top:
        25px;

    overflow: hidden;

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

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

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

.cm-contact-hero__hours > div {
    min-height: 68px;

    display: flex;

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

    gap: 4px;

    padding:
        10px 12px;

    background:
        rgba(23,24,22,0.58);
}

.cm-contact-hero__hours span {
    color:
        rgba(255,255,255,0.40);

    font-size:
        0.59rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}

.cm-contact-hero__hours strong {
    color:
        rgba(255,255,255,0.87);

    font-size:
        0.7rem;

    font-weight:
        700;
}

.cm-contact-hero__hours
.is-closed {
    color:
        #DF9296;
}


/* ==========================================================
   BOTTOM RAIL
   ========================================================== */

.cm-contact-hero__bottom {
    position: absolute;

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

    z-index: 4;

    height:
        var(--cm-contact-bottom-height);

    display: flex;

    align-items: center;

    background:
        rgba(249,247,242,0.87);

    border-top:
        1px solid
        var(--cm-border);

    backdrop-filter:
        blur(14px);

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

.cm-contact-hero__bottom-inner {
    display: flex;

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

    gap: 24px;

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

    font-size:
        0.67rem;

    font-weight:
        700;

    line-height: 1;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}

.cm-contact-hero__bottom-inner i {
    width: 4px;
    height: 4px;

    flex: 0 0 auto;

    background:
        var(--cm-red);

    border-radius:
        50%;
}


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

html[data-reduced-motion="true"]
.cm-contact-hero__primary,

html[data-reduced-motion="true"]
.cm-contact-hero__call,

html[data-reduced-motion="true"]
.cm-contact-detail,

html[data-reduced-motion="true"]
.cm-contact-detail__arrow {
    transition: none;
}


/* ==========================================================
   01. COMPUTER
   ========================================================== */

@media (min-width: 1200px) {

    .cm-contact-hero {
        --cm-contact-bottom-height:
            58px;
    }

    .cm-contact-hero__container {
        grid-template-columns:
            minmax(500px, 1.05fr)
            minmax(420px, 0.75fr);
    }

}


/* ==========================================================
   02. TABLET
   ========================================================== */

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

    .cm-contact-hero {
        --cm-contact-bottom-height:
            54px;

        height:
            calc(
                100vh -
                var(--cm-header-height)
            );
    }

    .cm-contact-hero__container {
        width:
            calc(
                100% -
                (
                    var(--cm-padding-tablet) *
                    2
                )
            );

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

        gap:
            42px;
    }

    .cm-contact-hero__title {
        font-size:
            clamp(
                3.35rem,
                min(6.1vw, 7.2vh),
                4.8rem
            );
    }

    .cm-contact-hero__description {
        font-size:
            0.91rem;
    }

    .cm-contact-hero__primary,
    .cm-contact-hero__call {
        min-height:
            49px;
    }

    .cm-contact-hero__panel {
        padding:
            23px;
    }

    .cm-contact-detail {
        min-height:
            65px;
    }

    .cm-contact-hero__hours > div {
        min-height:
            60px;
    }

    .cm-contact-hero__bottom-inner {
        width:
            calc(
                100% -
                (
                    var(--cm-padding-tablet) *
                    2
                )
            );

        font-size:
            0.59rem;
    }

}


/* ==========================================================
   03. MOBILE
   ========================================================== */

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

    .cm-contact-hero {
        --cm-contact-bottom-height:
            48px;

        height:
            calc(
                100vh -
                var(--cm-header-height)
            );
    }

    .cm-contact-hero__container {
        width:
            calc(
                100% -
                (
                    var(--cm-padding-mobile) *
                    2
                )
            );

        height:
            calc(
                100% -
                var(--cm-contact-bottom-height)
            );

        grid-template-columns:
            1fr;

        grid-template-rows:
            minmax(0, 0.53fr)
            minmax(0, 0.47fr);

        gap:
            11px;

        align-items:
            stretch;

        padding:
            10px 0 9px;
    }

    .cm-contact-hero__content {
        display: flex;

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

    .cm-contact-hero__eyebrow {
        margin-bottom:
            10px;
    }

    .cm-contact-hero__eyebrow p {
        font-size:
            0.65rem;
    }

    .cm-contact-hero__eyebrow > span {
        width:
            27px;
    }

    .cm-contact-hero__title {
        margin-bottom:
            11px;

        font-size:
            clamp(
                2.75rem,
                min(9vw, 6.4vh),
                3.7rem
            );

        line-height:
            0.9;
    }

    .cm-contact-hero__description {
        max-width:
            560px;

        margin-bottom:
            14px;

        font-size:
            0.84rem;

        line-height:
            1.5;
    }

    .cm-contact-hero__actions {
        flex-wrap:
            nowrap;

        gap:
            8px;
    }

    .cm-contact-hero__primary,
    .cm-contact-hero__call {
        min-height:
            43px;
    }

    .cm-contact-hero__primary {
        padding:
            0 13px;

        font-size:
            0.68rem;
    }

    .cm-contact-hero__call {
        padding:
            0 12px;

        font-size:
            0.71rem;
    }

    .cm-contact-hero__panel {
        min-height: 0;

        padding:
            16px 19px;

        border-radius:
            var(--cm-radius-md);
    }

    .cm-contact-hero__panel-top {
        margin-bottom:
            8px;
    }

    .cm-contact-detail {
        min-height:
            50px;

        padding:
            6px 0;
    }

    .cm-contact-detail__icon {
        width:
            34px;

        height:
            34px;
    }

    .cm-contact-detail__icon svg {
        width:
            17px;

        height:
            17px;
    }

    .cm-contact-detail__text small {
        font-size:
            0.54rem;
    }

    .cm-contact-detail__text strong {
        font-size:
            0.69rem;
    }

    .cm-contact-hero__hours {
        margin-top:
            10px;
    }

    .cm-contact-hero__hours > div {
        min-height:
            45px;

        padding:
            6px 8px;
    }

    .cm-contact-hero__hours span {
        font-size:
            0.49rem;
    }

    .cm-contact-hero__hours strong {
        font-size:
            0.6rem;
    }

    .cm-contact-hero__bottom-inner {
        width:
            calc(
                100% -
                (
                    var(--cm-padding-mobile) *
                    2
                )
            );

        justify-content:
            center;

        font-size:
            0.54rem;
    }

    .cm-contact-hero__bottom-inner
    span:nth-of-type(4),

    .cm-contact-hero__bottom-inner
    i:nth-of-type(3) {
        display: none;
    }

}


/* ==========================================================
   04. SMALL MOBILE
   ========================================================== */

@media
(max-width: 479.98px) {

    .cm-contact-hero {
        --cm-contact-bottom-height:
            44px;

        height:
            calc(
                100vh -
                var(--cm-header-height)
            );
    }

    .cm-contact-hero__container {
        width:
            calc(
                100% -
                (
                    var(--cm-padding-small) *
                    2
                )
            );

        height:
            calc(
                100% -
                var(--cm-contact-bottom-height)
            );

        grid-template-columns:
            1fr;

        grid-template-rows:
            minmax(0, 0.56fr)
            minmax(0, 0.44fr);

        gap:
            8px;

        padding:
            7px 0;
    }

    .cm-contact-hero__content {
        display: flex;

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

    .cm-contact-hero__eyebrow {
        gap:
            9px;

        margin-bottom:
            7px;
    }

    .cm-contact-hero__eyebrow > span {
        width:
            23px;
    }

    .cm-contact-hero__eyebrow p {
        font-size:
            0.58rem;

        letter-spacing:
            0.13em;
    }

    .cm-contact-hero__title {
        margin-bottom:
            8px;

        font-size:
            clamp(
                2.25rem,
                min(11.5vw, 5.9vh),
                3rem
            );

        line-height:
            0.9;
    }

    .cm-contact-hero__description {
        margin-bottom:
            10px;

        font-size:
            0.76rem;

        line-height:
            1.42;
    }

    .cm-contact-hero__actions {
        display: grid;

        grid-template-columns:
            minmax(0, 1.12fr)
            minmax(0, 0.88fr);

        gap:
            6px;
    }

    .cm-contact-hero__primary,
    .cm-contact-hero__call {
        width: 100%;

        min-height:
            39px;

        padding:
            0 8px;

        border-radius:
            8px;
    }

    .cm-contact-hero__primary {
        gap:
            5px;

        font-size:
            0.57rem;

        letter-spacing:
            0;
    }

    .cm-contact-hero__primary svg {
        width:
            14px;

        height:
            14px;
    }

    .cm-contact-hero__call {
        gap:
            5px;

        font-size:
            0.61rem;
    }

    .cm-contact-hero__call svg {
        width:
            16px;

        height:
            16px;
    }

    .cm-contact-hero__panel {
        min-height: 0;

        padding:
            12px 14px;

        border-radius:
            13px;
    }

    .cm-contact-hero__panel::after {
        left:
            20px;

        width:
            60px;
    }

    .cm-contact-hero__panel-top {
        margin-bottom:
            5px;
    }

    .cm-contact-hero__panel-top p {
        font-size:
            0.52rem;
    }

    .cm-contact-hero__panel-top > span {
        font-size:
            1rem;
    }

    .cm-contact-detail {
        min-height:
            43px;

        gap:
            8px;

        padding:
            4px 0;
    }

    .cm-contact-detail__icon {
        width:
            29px;

        height:
            29px;

        border-radius:
            7px;
    }

    .cm-contact-detail__icon svg {
        width:
            15px;

        height:
            15px;
    }

    .cm-contact-detail__text small {
        font-size:
            0.47rem;
    }

    .cm-contact-detail__text strong {
        font-size:
            0.6rem;

        line-height:
            1.25;
    }

    .cm-contact-detail__arrow {
        font-size:
            0.7rem;
    }

    .cm-contact-hero__hours {
        margin-top:
            7px;
    }

    .cm-contact-hero__hours > div {
        min-height:
            39px;

        padding:
            4px 6px;
    }

    .cm-contact-hero__hours span {
        font-size:
            0.41rem;

        letter-spacing:
            0.04em;
    }

    .cm-contact-hero__hours strong {
        font-size:
            0.51rem;
    }

    .cm-contact-hero__bottom-inner {
        width:
            calc(
                100% -
                (
                    var(--cm-padding-small) *
                    2
                )
            );

        justify-content:
            space-between;

        gap:
            9px;

        font-size:
            0.47rem;

        letter-spacing:
            0.07em;
    }

    .cm-contact-hero__bottom-inner
    span:nth-of-type(4),

    .cm-contact-hero__bottom-inner
    i:nth-of-type(3) {
        display: none;
    }

    .cm-contact-hero__contours {
        width:
            570px;

        left:
            -310px;
    }

}











































/* ==========================================================
   C&M MASONRY & HARDSCAPING
   CONTACT.HTML
   03. FREE ESTIMATE
   ========================================================== */


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

.cm-estimate {
    position: relative;

    width: 100%;

    padding:
        clamp(105px, 9vw, 150px)
        0;

    overflow: clip;

    isolation: isolate;

    background:
        radial-gradient(
            ellipse at 10% 18%,
            rgba(150, 115, 79, 0.07),
            transparent 29%
        ),
        radial-gradient(
            ellipse at 92% 80%,
            rgba(192, 24, 32, 0.04),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #F8F5EF 0%,
            var(--cm-ivory) 52%,
            #EBE4DA 100%
        );
}


/* Mineral texture */

.cm-estimate::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: 0.1;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.19'/%3E%3C/svg%3E");

    mix-blend-mode:
        multiply;
}


/* ==========================================================
   DECORATION
   ========================================================== */

.cm-estimate__decor {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}

.cm-estimate__glow {
    position: absolute;

    display: block;

    border-radius: 50%;

    filter:
        blur(70px);
}

.cm-estimate__glow--red {
    width: 390px;
    height: 390px;

    right: -240px;
    top: 15%;

    background:
        rgba(192, 24, 32, 0.065);
}

.cm-estimate__glow--earth {
    width: 430px;
    height: 430px;

    left: -260px;
    bottom: -170px;

    background:
        rgba(150, 115, 79, 0.075);
}

.cm-estimate__contours {
    position: absolute;

    right: -120px;
    top: 5%;

    width:
        min(
            43vw,
            620px
        );

    height: auto;

    fill: none;

    stroke:
        rgba(134, 18, 23, 0.07);

    stroke-width: 1.2;

    transform:
        rotate(-5deg);
}


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

.cm-estimate__container {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(300px, 0.68fr)
        minmax(600px, 1.32fr);

    gap:
        clamp(
            65px,
            8vw,
            125px
        );

    align-items: start;
}


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

.cm-estimate__intro {
    max-width: 485px;

    padding-top: 17px;
}


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

.cm-estimate__eyebrow {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 24px;
}

.cm-estimate__eyebrow > span {
    width: 36px;
    height: 2px;

    background:
        var(--cm-red);
}

.cm-estimate__eyebrow p {
    margin: 0;

    color:
        var(--cm-red-deep);

    font-size: 0.76rem;
    font-weight: 700;

    line-height: 1;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}


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

.cm-estimate__title {
    margin:
        0 0 26px;

    color:
        var(--cm-ink);

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

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

    font-weight: 700;

    line-height: 0.9;

    letter-spacing:
        -0.035em;

    text-transform:
        uppercase;
}

.cm-estimate__title-mask {
    display: block;

    overflow: hidden;

    padding-bottom:
        0.045em;
}

.cm-estimate__title-mask > span {
    display: block;
}

.cm-estimate__title-mask--accent {
    color:
        var(--cm-red);
}


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

.cm-estimate__description {
    max-width: 455px;

    margin:
        0 0 35px;

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

    font-size:
        0.96rem;

    line-height:
        1.75;
}


/* ==========================================================
   DIRECT CONTACT
   ========================================================== */

.cm-estimate__contact {
    display: flex;

    flex-direction: column;

    gap: 9px;

    padding-top:
        27px;

    border-top:
        1px solid
        var(--cm-border);
}

.cm-estimate__contact-label {
    margin-bottom:
        5px;

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

    font-size:
        0.68rem;

    font-weight: 700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}

.cm-estimate__contact a {
    width: fit-content;
    max-width: 100%;

    display: inline-flex;

    align-items: center;

    gap: 11px;

    color:
        var(--cm-ink);

    font-size:
        0.82rem;

    font-weight:
        600;

    transition:
        color 300ms ease,
        transform 350ms var(--cm-ease);
}

.cm-estimate__contact a:hover {
    color:
        var(--cm-red-deep);

    transform:
        translateX(4px);
}

.cm-estimate__contact a > span:last-child {
    overflow-wrap: anywhere;
}

.cm-estimate__contact-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 auto;

    display: grid;

    place-items: center;

    color:
        var(--cm-red);

    background:
        rgba(192, 24, 32, 0.055);

    border:
        1px solid
        rgba(192, 24, 32, 0.10);

    border-radius:
        8px;
}

.cm-estimate__contact-icon svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.55;

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


/* ==========================================================
   FORM PANEL
   ========================================================== */

.cm-estimate__form-panel {
    position: relative;

    min-width: 0;

    padding:
        clamp(
            25px,
            3vw,
            42px
        );

    overflow: hidden;

    background:
        rgba(249, 247, 242, 0.90);

    border:
        1px solid
        rgba(23, 24, 22, 0.10);

    border-radius:
        var(--cm-radius-lg);

    box-shadow:
        0 28px 70px
        rgba(35, 28, 23, 0.10);

    backdrop-filter:
        blur(16px);

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


/* Accent */

.cm-estimate__form-panel::before {
    content: "";

    position: absolute;

    top: 0;
    left: 42px;

    width: 100px;
    height: 3px;

    background:
        var(--cm-gradient-red);
}


/* ==========================================================
   FORM TOP
   ========================================================== */

.cm-estimate__form-top {
    display: flex;

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

    gap: 20px;

    margin-bottom:
        30px;
}

.cm-estimate__form-top > div {
    display: flex;

    align-items: center;

    gap: 10px;

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

    font-size:
        0.67rem;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}

.cm-estimate__form-dot {
    width: 7px;
    height: 7px;

    background:
        var(--cm-red);

    border-radius:
        50%;

    box-shadow:
        0 0 0 5px
        rgba(192, 24, 32, 0.08);
}

.cm-estimate__form-top > span {
    color:
        rgba(23, 24, 22, 0.17);

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

    font-size:
        1.3rem;

    font-weight:
        700;
}


/* ==========================================================
   STATUS
   ========================================================== */

.cm-estimate__status {
    margin-bottom:
        25px;

    padding:
        14px 16px;

    border:
        1px solid transparent;

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

    font-size:
        0.82rem;

    font-weight:
        600;

    line-height:
        1.5;
}

.cm-estimate__status.is-success {
    color:
        #294A36;

    background:
        rgba(89, 99, 77, 0.10);

    border-color:
        rgba(89, 99, 77, 0.20);
}

.cm-estimate__status.is-error {
    color:
        var(--cm-red-deep);

    background:
        rgba(192, 24, 32, 0.065);

    border-color:
        rgba(192, 24, 32, 0.15);
}


/* ==========================================================
   FORM
   ========================================================== */

.cm-estimate-form {
    position: relative;
}


/* Honeypot */

.cm-estimate-form__trap {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    clip:
        rect(0 0 0 0) !important;

    clip-path:
        inset(50%) !important;

    white-space:
        nowrap !important;
}


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

.cm-estimate-form__grid {
    display: grid;

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

    gap:
        21px 18px;

    margin-bottom:
        27px;
}


/* ==========================================================
   FIELD
   ========================================================== */

.cm-field {
    min-width: 0;

    display: flex;

    flex-direction: column;
}

.cm-field label,
.cm-fieldset legend {
    margin-bottom:
        9px;

    color:
        var(--cm-charcoal);

    font-size:
        0.76rem;

    font-weight:
        700;

    line-height:
        1.3;
}

.cm-field label > span,
.cm-fieldset legend > span {
    color:
        var(--cm-red);
}


/* ==========================================================
   INPUTS
   ========================================================== */

.cm-field input,
.cm-field textarea {
    width: 100%;

    color:
        var(--cm-ink);

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

    border:
        1px solid
        rgba(23, 24, 22, 0.14);

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

    outline: none;

    font-size:
        0.88rem;

    font-weight:
        500;

    transition:
        border-color 280ms ease,
        background 280ms ease,
        box-shadow 280ms ease;
}

.cm-field input {
    height: 52px;

    padding:
        0 15px;
}

.cm-field textarea {
    min-height: 145px;

    padding:
        14px 15px;

    resize:
        vertical;

    line-height:
        1.6;
}

.cm-field input::placeholder,
.cm-field textarea::placeholder {
    color:
        #8D8A83;

    opacity: 1;
}

.cm-field input:hover,
.cm-field textarea:hover {
    border-color:
        rgba(23, 24, 22, 0.22);
}

.cm-field input:focus,
.cm-field textarea:focus {
    background:
        rgba(255,255,255,0.82);

    border-color:
        rgba(192, 24, 32, 0.48);

    box-shadow:
        0 0 0 4px
        rgba(192, 24, 32, 0.07);
}


/* Error */

.cm-field.is-invalid input,
.cm-field.is-invalid textarea {
    border-color:
        rgba(192,24,32,0.68);
}

.cm-field__error {
    min-height: 17px;

    display: block;

    margin-top:
        5px;

    color:
        var(--cm-red-deep);

    font-size:
        0.65rem;

    font-weight:
        600;

    line-height:
        1.35;
}


/* ==========================================================
   FIELDSET
   ========================================================== */

.cm-fieldset {
    min-width: 0;

    margin:
        0 0 26px;

    padding: 0;

    border: 0;
}

.cm-fieldset legend {
    width: 100%;

    padding: 0;
}

.cm-fieldset legend small {
    margin-left:
        8px;

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

    font-size:
        0.64rem;

    font-weight:
        500;
}


/* ==========================================================
   PROPERTY TYPE
   ========================================================== */

.cm-choice-group {
    display: grid;

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

    gap: 9px;
}

.cm-choice {
    position: relative;

    cursor: pointer;
}

.cm-choice > input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.cm-choice__control {
    min-height: 50px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        0 14px;

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

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

    border:
        1px solid
        rgba(23,24,22,0.13);

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

    font-size:
        0.8rem;

    font-weight:
        600;

    transition:
        color 280ms ease,
        border-color 280ms ease,
        background 280ms ease;
}

.cm-choice__radio {
    width: 17px;
    height: 17px;

    display: grid;

    flex: 0 0 auto;

    place-items: center;

    border:
        1px solid
        rgba(23,24,22,0.28);

    border-radius:
        50%;
}

.cm-choice__radio::after {
    content: "";

    width: 7px;
    height: 7px;

    background:
        var(--cm-white);

    border-radius:
        50%;

    transform:
        scale(0);

    transition:
        transform 250ms var(--cm-ease);
}

.cm-choice > input:checked
+ .cm-choice__control {
    color:
        var(--cm-red-deep);

    background:
        rgba(192,24,32,0.055);

    border-color:
        rgba(192,24,32,0.30);
}

.cm-choice > input:checked
+ .cm-choice__control
.cm-choice__radio {
    background:
        var(--cm-red);

    border-color:
        var(--cm-red);
}

.cm-choice > input:checked
+ .cm-choice__control
.cm-choice__radio::after {
    transform:
        scale(1);
}

.cm-choice > input:focus-visible
+ .cm-choice__control {
    outline:
        3px solid
        rgba(192,24,32,0.28);

    outline-offset:
        3px;
}


/* ==========================================================
   SERVICE CHOICES
   ========================================================== */

.cm-service-choices {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}

.cm-service-choice {
    position: relative;

    cursor: pointer;
}

.cm-service-choice input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.cm-service-choice span {
    min-height: 42px;

    display: inline-flex;

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

    padding:
        0 13px;

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

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

    border:
        1px solid
        rgba(23,24,22,0.13);

    border-radius:
        9px;

    font-size:
        0.72rem;

    font-weight:
        600;

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

.cm-service-choice:hover span {
    color:
        var(--cm-red-deep);

    border-color:
        rgba(192,24,32,0.22);
}

.cm-service-choice input:checked
+ span {
    color:
        var(--cm-white);

    background:
        var(--cm-gradient-red);

    border-color:
        transparent;

    box-shadow:
        0 8px 20px
        rgba(192,24,32,0.13);

    transform:
        translateY(-1px);
}

.cm-service-choice input:focus-visible
+ span {
    outline:
        3px solid
        rgba(192,24,32,0.27);

    outline-offset:
        3px;
}


/* ==========================================================
   TEXTAREA
   ========================================================== */

.cm-field--textarea {
    margin-bottom:
        23px;
}


/* ==========================================================
   CAPTCHA
   ========================================================== */

.cm-estimate-form__captcha {
    min-height: 78px;

    margin-bottom:
        22px;

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


/* ==========================================================
   SUBMIT ROW
   ========================================================== */

.cm-estimate-form__submit {
    display: flex;

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

    gap: 24px;

    padding-top:
        22px;

    border-top:
        1px solid
        var(--cm-border);
}

.cm-estimate-form__submit p {
    margin: 0;

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

    font-size:
        0.67rem;
}

.cm-estimate-form__submit p span {
    color:
        var(--cm-red);
}


/* ==========================================================
   SUBMIT BUTTON
   ========================================================== */

.cm-estimate-form__button {
    position: relative;

    min-height: 55px;

    display: inline-flex;

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

    gap: 17px;

    padding:
        0 22px;

    overflow: hidden;

    isolation: isolate;

    cursor: pointer;

    color:
        var(--cm-white);

    background:
        var(--cm-gradient-red);

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

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

    box-shadow:
        var(--cm-shadow-red);

    font-size:
        0.79rem;

    font-weight:
        700;

    letter-spacing:
        0.025em;

    text-transform:
        uppercase;

    transition:
        transform 350ms var(--cm-ease),
        box-shadow 350ms var(--cm-ease);
}

.cm-estimate-form__button::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            110deg,
            transparent 18%,
            rgba(255,255,255,0.18) 50%,
            transparent 82%
        );

    transform:
        translateX(-130%);

    transition:
        transform 700ms var(--cm-ease);
}

.cm-estimate-form__button svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

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

.cm-estimate-form__button:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 20px 44px
        rgba(192,24,32,0.23);
}

.cm-estimate-form__button:hover::before {
    transform:
        translateX(130%);
}

.cm-estimate-form__button:hover svg {
    transform:
        translateX(4px);
}


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

html[data-reduced-motion="true"]
.cm-estimate-form__button,

html[data-reduced-motion="true"]
.cm-estimate__contact a,

html[data-reduced-motion="true"]
.cm-choice__control,

html[data-reduced-motion="true"]
.cm-service-choice span {
    transition: none;
}


/* ==========================================================
   01. COMPUTER
   ========================================================== */

@media (min-width: 1200px) {

    .cm-estimate__container {
        grid-template-columns:
            minmax(320px, 0.68fr)
            minmax(640px, 1.32fr);
    }

}


/* ==========================================================
   02. TABLET
   ========================================================== */

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

    .cm-estimate {
        padding:
            100px 0;
    }

    .cm-estimate__container {
        grid-template-columns:
            minmax(240px, 0.58fr)
            minmax(0, 1.42fr);

        gap:
            48px;
    }

    .cm-estimate__title {
        font-size:
            clamp(
                3.2rem,
                6vw,
                4.3rem
            );
    }

    .cm-estimate__form-panel {
        padding:
            27px;
    }

    .cm-estimate-form__grid {
        gap:
            18px 14px;
    }

    .cm-service-choice span {
        padding:
            0 11px;

        font-size:
            0.68rem;
    }

}


/* ==========================================================
   03. MOBILE
   ========================================================== */

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

    .cm-estimate {
        padding:
            85px 0;
    }

    .cm-estimate__container {
        grid-template-columns:
            1fr;

        gap:
            42px;
    }

    .cm-estimate__intro {
        max-width:
            620px;

        padding-top: 0;
    }

    .cm-estimate__title {
        max-width:
            570px;

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

    .cm-estimate__description {
        max-width:
            570px;
    }

    .cm-estimate__form-panel {
        padding:
            24px;

        border-radius:
            var(--cm-radius-md);
    }

    .cm-estimate-form__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            17px 12px;
    }

    .cm-estimate-form__submit {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .cm-estimate-form__button {
        width: 100%;
    }

}


/* ==========================================================
   04. SMALL MOBILE
   ========================================================== */

@media
(max-width: 479.98px) {

    .cm-estimate {
        padding:
            74px 0;
    }

    .cm-estimate__container {
        grid-template-columns:
            1fr;

        gap:
            35px;
    }

    .cm-estimate__intro {
        padding-top: 0;
    }

    .cm-estimate__eyebrow {
        gap:
            11px;

        margin-bottom:
            16px;
    }

    .cm-estimate__eyebrow > span {
        width:
            28px;
    }

    .cm-estimate__eyebrow p {
        font-size:
            0.66rem;
    }

    .cm-estimate__title {
        margin-bottom:
            20px;

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

        line-height:
            0.92;
    }

    .cm-estimate__description {
        margin-bottom:
            28px;

        font-size:
            0.86rem;

        line-height:
            1.65;
    }

    .cm-estimate__form-panel {
        padding:
            20px 16px;

        border-radius:
            14px;
    }

    .cm-estimate__form-panel::before {
        left:
            25px;

        width:
            70px;
    }

    .cm-estimate__form-top {
        margin-bottom:
            23px;
    }

    .cm-estimate__form-top > div {
        font-size:
            0.58rem;
    }

    .cm-estimate-form__grid {
        grid-template-columns:
            1fr;

        gap:
            12px;

        margin-bottom:
            23px;
    }

    .cm-field label,
    .cm-fieldset legend {
        font-size:
            0.72rem;
    }

    .cm-field input {
        height:
            49px;

        font-size:
            0.82rem;
    }

    .cm-field textarea {
        min-height:
            138px;

        font-size:
            0.82rem;
    }

    .cm-choice__control {
        min-height:
            47px;

        padding:
            0 11px;

        font-size:
            0.74rem;
    }

    .cm-service-choices {
        gap:
            6px;
    }

    .cm-service-choice span {
        min-height:
            39px;

        padding:
            0 10px;

        font-size:
            0.65rem;
    }

    .cm-fieldset legend small {
        display: block;

        margin:
            4px 0 0;
    }

    .cm-estimate-form__captcha {
        /*
            reCAPTCHA v2 has a fixed internal width.
            Scaling keeps it inside narrow phones.
        */

        transform-origin:
            left top;
    }

    .cm-estimate-form__submit {
        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            16px;
    }

    .cm-estimate-form__button {
        width: 100%;

        min-height:
            52px;

        font-size:
            0.72rem;
    }

}













































/* ==========================================================
   C&M MASONRY & HARDSCAPING
   CONTACT.HTML
   04. WHAT HAPPENS NEXT
   ========================================================== */


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

.cm-next {
    position: relative;

    width: 100%;

    padding:
        clamp(105px, 9vw, 150px)
        0;

    overflow: clip;

    isolation: isolate;

    color:
        var(--cm-text-on-dark);

    background:
        radial-gradient(
            ellipse at 8% 20%,
            rgba(192, 24, 32, 0.15),
            transparent 27%
        ),

        radial-gradient(
            ellipse at 91% 79%,
            rgba(150, 115, 79, 0.10),
            transparent 29%
        ),

        linear-gradient(
            135deg,
            #141513 0%,
            var(--cm-ink) 49%,
            #231718 100%
        );
}


/* ==========================================================
   MINERAL GRAIN
   ========================================================== */

.cm-next::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: 0.13;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.22'/%3E%3C/svg%3E");

    mix-blend-mode:
        soft-light;
}


/* Material sweep */

.cm-next::after {
    content: "";

    position: absolute;

    width: 62vw;
    height: 150%;

    top: -25%;
    right: -46vw;

    z-index: 0;

    pointer-events: none;

    background:
        linear-gradient(
            126deg,
            transparent 0%,
            rgba(255,255,255,0.018) 40%,
            rgba(255,255,255,0.05) 50%,
            rgba(255,255,255,0.015) 58%,
            transparent 72%
        );

    transform:
        rotate(-5deg);
}


/* ==========================================================
   DECORATION
   ========================================================== */

.cm-next__decor {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}

.cm-next__glow {
    position: absolute;

    display: block;

    border-radius: 50%;

    filter:
        blur(75px);
}

.cm-next__glow--red {
    width: 420px;
    height: 420px;

    left: -270px;
    top: 14%;

    background:
        rgba(192,24,32,0.12);
}

.cm-next__glow--earth {
    width: 470px;
    height: 470px;

    right: -290px;
    bottom: -210px;

    background:
        rgba(150,115,79,0.09);
}


/* ==========================================================
   CONTOURS
   ========================================================== */

.cm-next__contours {
    position: absolute;

    right: -110px;
    bottom: -110px;

    width:
        min(
            52vw,
            760px
        );

    height: auto;

    fill: none;

    stroke:
        rgba(255,255,255,0.055);

    stroke-width:
        1.2;

    transform:
        rotate(-5deg);

    will-change:
        transform;
}


/* ==========================================================
   CONTAINER
   ========================================================== */

.cm-next__container {
    position: relative;

    z-index: 2;
}


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

.cm-next__header {
    margin-bottom:
        clamp(
            50px,
            5.5vw,
            78px
        );
}


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

.cm-next__eyebrow {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom:
        24px;

    color:
        #E3A6A9;

    font-size:
        0.76rem;

    font-weight:
        700;

    line-height: 1;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}

.cm-next__eyebrow-line {
    width: 36px;
    height: 2px;

    flex: 0 0 auto;

    background:
        var(--cm-red-bright);
}


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

.cm-next__heading-grid {
    display: grid;

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

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

    align-items:
        end;
}


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

.cm-next__title {
    max-width: 830px;

    margin: 0;

    color:
        var(--cm-white);

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

    font-size:
        clamp(
            4rem,
            5.4vw,
            6.2rem
        );

    font-weight:
        700;

    line-height:
        0.9;

    letter-spacing:
        -0.035em;

    text-transform:
        uppercase;
}

.cm-next__title-mask {
    display: block;

    overflow: hidden;

    padding-bottom:
        0.045em;
}

.cm-next__title-mask > span {
    display: block;
}

.cm-next__title-mask--accent {
    color:
        var(--cm-red-bright);
}


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

.cm-next__intro {
    max-width: 430px;

    margin:
        0 0 4px;

    color:
        rgba(248,246,241,0.62);

    font-size:
        0.95rem;

    line-height:
        1.72;
}


/* ==========================================================
   FLOW
   ========================================================== */

.cm-next__flow {
    position: relative;

    display: grid;

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

    gap:
        14px;
}


/* ==========================================================
   CONNECTOR
   ========================================================== */

.cm-next__connector {
    position: absolute;

    top: 56px;
    left: 15%;
    right: 15%;

    z-index: 0;

    height: 1px;

    overflow: hidden;

    pointer-events: none;
}

.cm-next__connector span {
    display: block;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(223,32,40,0.32),
            rgba(255,255,255,0.12),
            rgba(223,32,40,0.32),
            transparent
        );

    transform-origin:
        left center;
}


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

.cm-next-card {
    position: relative;

    z-index: 1;

    min-height: 330px;

    display: flex;

    flex-direction: column;

    padding:
        28px;

    overflow: hidden;

    isolation: isolate;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.075) 0%,
            rgba(255,255,255,0.035) 100%
        );

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

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

    box-shadow:
        inset
        0 1px 0
        rgba(255,255,255,0.035);

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


/* Red accent */

.cm-next-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 27px;

    width: 54px;
    height: 2px;

    background:
        var(--cm-red-bright);

    transform:
        scaleX(0.45);

    transform-origin:
        left center;

    transition:
        transform 420ms var(--cm-ease),
        width 420ms var(--cm-ease);
}


/* Material glow */

.cm-next-card::after {
    content: "";

    position: absolute;

    z-index: -1;

    width: 230px;
    height: 230px;

    right: -130px;
    bottom: -160px;

    border-radius: 50%;

    background:
        var(--cm-red);

    opacity:
        0.055;

    filter:
        blur(10px);

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


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

.cm-next-card__top {
    display: flex;

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

    gap: 20px;
}


/* ==========================================================
   ICON
   ========================================================== */

.cm-next-card__icon {
    width: 50px;
    height: 50px;

    display: grid;

    place-items: center;

    color:
        var(--cm-red-bright);

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

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

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

    transition:
        transform 420ms var(--cm-ease),
        background 300ms ease;
}

.cm-next-card__icon svg {
    width: 27px;
    height: 27px;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        1.45;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


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

.cm-next-card__arrow {
    display: inline-flex;

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

    width: 32px;
    height: 32px;

    color:
        rgba(255,255,255,0.32);

    font-size:
        1rem;

    transition:
        color 300ms ease,
        transform 350ms var(--cm-ease);
}

.cm-next-card--last
.cm-next-card__arrow {
    color:
        rgba(223,32,40,0.72);
}


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

.cm-next-card__content {
    margin-top:
        auto;

    padding-top:
        70px;
}

.cm-next-card__label {
    display: block;

    margin-bottom:
        12px;

    color:
        #DCA3A6;

    font-size:
        0.67rem;

    font-weight:
        700;

    line-height: 1;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;
}

.cm-next-card__content h3 {
    max-width:
        390px;

    margin:
        0 0 15px;

    color:
        var(--cm-white);

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

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

    font-weight:
        600;

    line-height:
        0.98;

    letter-spacing:
        -0.025em;

    text-transform:
        uppercase;
}

.cm-next-card__content p {
    max-width:
        410px;

    margin: 0;

    color:
        rgba(248,246,241,0.56);

    font-size:
        0.87rem;

    line-height:
        1.67;

    transition:
        color 300ms ease;
}


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

.cm-next-card:hover {
    transform:
        translateY(-6px);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.095),
            rgba(255,255,255,0.045)
        );

    border-color:
        rgba(255,255,255,0.17);

    box-shadow:
        0 24px 54px
        rgba(0,0,0,0.16);
}

.cm-next-card:hover::before {
    width:
        80px;

    transform:
        scaleX(1);
}

.cm-next-card:hover::after {
    opacity:
        0.09;

    transform:
        scale(1.16);
}

.cm-next-card:hover
.cm-next-card__icon {
    transform:
        translateY(-3px);

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

.cm-next-card:hover
.cm-next-card__arrow {
    color:
        var(--cm-red-bright);

    transform:
        translateX(4px);
}

.cm-next-card--last:hover
.cm-next-card__arrow {
    transform:
        scale(1.08);
}

.cm-next-card:hover
.cm-next-card__content p {
    color:
        rgba(248,246,241,0.72);
}


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

.cm-next__bottom {
    display: flex;

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

    gap: 35px;

    margin-top:
        18px;

    padding:
        24px 27px;

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

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

    border-radius:
        var(--cm-radius-md);
}


/* ==========================================================
   BOTTOM COPY
   ========================================================== */

.cm-next__bottom-copy {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.cm-next__bottom-copy > span {
    color:
        var(--cm-white);

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

    font-size:
        1.25rem;

    font-weight:
        600;

    line-height:
        1;

    text-transform:
        uppercase;
}

.cm-next__bottom-copy p {
    margin: 0;

    color:
        rgba(248,246,241,0.48);

    font-size:
        0.77rem;
}


/* ==========================================================
   CALL
   ========================================================== */

.cm-next__call {
    min-height: 50px;

    display: inline-flex;

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

    gap: 11px;

    flex: 0 0 auto;

    padding:
        0 18px;

    color:
        var(--cm-white);

    background:
        var(--cm-gradient-red);

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

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

    box-shadow:
        0 13px 30px
        rgba(192,24,32,0.18);

    font-size:
        0.79rem;

    font-weight:
        700;

    transition:
        transform 350ms var(--cm-ease),
        box-shadow 350ms var(--cm-ease);
}

.cm-next__call svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}

.cm-next__call:hover {
    color:
        var(--cm-white);

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 38px
        rgba(192,24,32,0.25);
}


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

html[data-reduced-motion="true"]
.cm-next-card,

html[data-reduced-motion="true"]
.cm-next-card::before,

html[data-reduced-motion="true"]
.cm-next-card::after,

html[data-reduced-motion="true"]
.cm-next-card__icon,

html[data-reduced-motion="true"]
.cm-next-card__arrow,

html[data-reduced-motion="true"]
.cm-next__call {
    transition: none;
}


/* ==========================================================
   01. COMPUTER
   ========================================================== */

@media (min-width: 1200px) {

    .cm-next__flow {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}


/* ==========================================================
   02. TABLET
   ========================================================== */

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

    .cm-next {
        padding:
            100px 0;
    }

    .cm-next__heading-grid {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(260px, 0.85fr);

        gap:
            45px;
    }

    .cm-next__title {
        font-size:
            clamp(
                3.6rem,
                7vw,
                4.9rem
            );
    }

    .cm-next__flow {
        gap:
            11px;
    }

    .cm-next-card {
        min-height:
            315px;

        padding:
            23px;
    }

    .cm-next-card__content {
        padding-top:
            55px;
    }

    .cm-next-card__content h3 {
        font-size:
            clamp(
                1.8rem,
                3vw,
                2.25rem
            );
    }

    .cm-next-card__content p {
        font-size:
            0.81rem;
    }

}


/* ==========================================================
   03. MOBILE
   ========================================================== */

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

    .cm-next {
        padding:
            85px 0;
    }

    .cm-next__header {
        margin-bottom:
            42px;
    }

    .cm-next__heading-grid {
        grid-template-columns:
            1fr;

        gap:
            23px;
    }

    .cm-next__title {
        max-width:
            580px;

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

    .cm-next__intro {
        max-width:
            560px;

        font-size:
            0.9rem;
    }

    .cm-next__flow {
        grid-template-columns:
            1fr;

        gap:
            11px;
    }

    .cm-next__connector {
        display: none;
    }

    .cm-next-card {
        min-height:
            230px;

        padding:
            23px;
    }

    .cm-next-card__content {
        padding-top:
            42px;
    }

    .cm-next-card__content p {
        max-width:
            570px;
    }

    .cm-next__bottom {
        padding:
            21px 23px;
    }

}


/* ==========================================================
   04. SMALL MOBILE
   ========================================================== */

@media
(max-width: 479.98px) {

    .cm-next {
        padding:
            74px 0;
    }

    .cm-next__header {
        margin-bottom:
            35px;
    }

    .cm-next__eyebrow {
        gap:
            11px;

        margin-bottom:
            16px;

        font-size:
            0.66rem;
    }

    .cm-next__eyebrow-line {
        width:
            28px;
    }

    .cm-next__heading-grid {
        grid-template-columns:
            1fr;

        gap:
            18px;
    }

    .cm-next__title {
        font-size:
            clamp(
                2.65rem,
                13vw,
                3.5rem
            );

        line-height:
            0.92;
    }

    .cm-next__intro {
        font-size:
            0.84rem;

        line-height:
            1.62;
    }

    .cm-next__flow {
        grid-template-columns:
            1fr;

        gap:
            9px;
    }

    .cm-next__connector {
        display: none;
    }

    .cm-next-card {
        min-height:
            210px;

        padding:
            20px;

        border-radius:
            14px;
    }

    .cm-next-card::before {
        left:
            20px;
    }

    .cm-next-card__icon {
        width:
            44px;

        height:
            44px;
    }

    .cm-next-card__icon svg {
        width:
            23px;

        height:
            23px;
    }

    .cm-next-card__content {
        padding-top:
            34px;
    }

    .cm-next-card__label {
        margin-bottom:
            9px;

        font-size:
            0.6rem;
    }

    .cm-next-card__content h3 {
        margin-bottom:
            10px;

        font-size:
            1.85rem;
    }

    .cm-next-card__content p {
        font-size:
            0.81rem;

        line-height:
            1.58;
    }

    .cm-next__bottom {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            17px;

        margin-top:
            10px;

        padding:
            19px;

        border-radius:
            14px;
    }

    .cm-next__bottom-copy > span {
        font-size:
            1.1rem;
    }

    .cm-next__call {
        width: 100%;

        min-height:
            48px;
    }

    .cm-next__contours {
        width:
            570px;

        right:
            -330px;
    }

}








































/* ==========================================================
   C&M MASONRY & HARDSCAPING
   CONTACT.HTML
   05. FAQ
   ========================================================== */


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

.cm-faq {
    position: relative;

    width: 100%;

    padding:
        clamp(105px, 9vw, 150px)
        0;

    overflow: clip;

    isolation: isolate;

    background:
        radial-gradient(
            ellipse at 10% 14%,
            rgba(150, 115, 79, 0.07),
            transparent 29%
        ),

        radial-gradient(
            ellipse at 92% 78%,
            rgba(192, 24, 32, 0.05),
            transparent 27%
        ),

        linear-gradient(
            135deg,
            #F8F5EF 0%,
            var(--cm-ivory) 51%,
            #EBE4DA 100%
        );
}


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

.cm-faq::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: 0.1;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.19'/%3E%3C/svg%3E");

    mix-blend-mode:
        multiply;
}


/* ==========================================================
   DECOR
   ========================================================== */

.cm-faq__decor {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}

.cm-faq__glow {
    position: absolute;

    display: block;

    border-radius: 50%;

    filter:
        blur(75px);
}

.cm-faq__glow--red {
    width: 390px;
    height: 390px;

    right: -245px;
    top: 8%;

    background:
        rgba(192,24,32,0.065);
}

.cm-faq__glow--earth {
    width: 450px;
    height: 450px;

    left: -290px;
    bottom: -200px;

    background:
        rgba(150,115,79,0.075);
}


/* ==========================================================
   LARGE FAQ WORD
   ========================================================== */

.cm-faq__word {
    position: absolute;

    left:
        max(
            4vw,
            calc(
                (
                    100vw -
                    var(--cm-container)
                ) / 2 -
                30px
            )
        );

    bottom: -45px;

    color:
        transparent;

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

    font-size:
        clamp(
            12rem,
            22vw,
            25rem
        );

    font-weight:
        800;

    line-height: 0.7;

    letter-spacing:
        -0.05em;

    text-transform:
        uppercase;

    -webkit-text-stroke:
        1px
        rgba(23,24,22,0.045);

    opacity:
        0.8;

    user-select:
        none;
}


/* ==========================================================
   CONTOURS
   ========================================================== */

.cm-faq__contours {
    position: absolute;

    right: -100px;
    top: 5%;

    width:
        min(
            45vw,
            680px
        );

    height: auto;

    fill: none;

    stroke:
        rgba(134,18,23,0.07);

    stroke-width:
        1.2;

    transform:
        rotate(-6deg);

    will-change:
        transform;
}


/* ==========================================================
   MAIN CONTAINER
   ========================================================== */

.cm-faq__container {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(310px, 0.7fr)
        minmax(580px, 1.3fr);

    column-gap:
        clamp(
            70px,
            8vw,
            130px
        );

    row-gap:
        55px;

    align-items: start;
}


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

.cm-faq__intro {
    max-width: 500px;

    padding-top:
        10px;
}


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

.cm-faq__eyebrow {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom:
        24px;

    color:
        var(--cm-red-deep);

    font-size:
        0.76rem;

    font-weight:
        700;

    line-height: 1;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}

.cm-faq__eyebrow-line {
    width: 36px;
    height: 2px;

    flex: 0 0 auto;

    background:
        var(--cm-red);
}


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

.cm-faq__title {
    max-width:
        570px;

    margin:
        0 0 27px;

    color:
        var(--cm-ink);

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

    font-size:
        clamp(
            3.8rem,
            5vw,
            5.8rem
        );

    font-weight:
        700;

    line-height:
        0.9;

    letter-spacing:
        -0.035em;

    text-transform:
        uppercase;
}

.cm-faq__title-mask {
    display: block;

    overflow: hidden;

    padding-bottom:
        0.045em;
}

.cm-faq__title-mask > span {
    display: block;
}

.cm-faq__title-mask--accent {
    color:
        var(--cm-red);
}


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

.cm-faq__description {
    max-width:
        450px;

    margin:
        0 0 37px;

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

    font-size:
        0.95rem;

    line-height:
        1.75;
}


/* ==========================================================
   CONTACT BLOCK
   ========================================================== */

.cm-faq__contact {
    padding-top:
        26px;

    border-top:
        1px solid
        var(--cm-border);
}

.cm-faq__contact-label {
    display: block;

    margin-bottom:
        13px;

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

    font-size:
        0.67rem;

    font-weight:
        700;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


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

.cm-faq__phone {
    width: 100%;

    max-width:
        390px;

    min-height:
        68px;

    display: grid;

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

    align-items: center;

    gap:
        13px;

    padding:
        10px 13px;

    color:
        var(--cm-ink);

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

    border:
        1px solid
        var(--cm-border);

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

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

.cm-faq__phone-icon {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    color:
        var(--cm-red);

    background:
        rgba(192,24,32,0.055);

    border:
        1px solid
        rgba(192,24,32,0.10);

    border-radius:
        8px;
}

.cm-faq__phone-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        1.55;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}

.cm-faq__phone > span:nth-child(2) {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 2px;
}

.cm-faq__phone small {
    color:
        var(--cm-text-muted);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}

.cm-faq__phone strong {
    color:
        inherit;

    font-size:
        0.84rem;

    font-weight:
        700;
}

.cm-faq__phone-arrow {
    color:
        var(--cm-red);

    font-size:
        0.9rem;

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

.cm-faq__phone:hover {
    color:
        var(--cm-red-deep);

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

    border-color:
        rgba(192,24,32,0.18);

    transform:
        translateY(-3px);

    box-shadow:
        var(--cm-shadow-soft);
}

.cm-faq__phone:hover
.cm-faq__phone-arrow {
    transform:
        translate(
            3px,
            -3px
        );
}


/* ==========================================================
   ACCORDION
   ========================================================== */

.cm-faq__accordion {
    min-width: 0;

    border-top:
        1px solid
        rgba(23,24,22,0.14);
}


/* ==========================================================
   ITEM
   ========================================================== */

.cm-faq-item {
    position: relative;

    border-bottom:
        1px solid
        rgba(23,24,22,0.14);

    transition:
        background 350ms ease;
}

.cm-faq-item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 2px;
    height: 0;

    background:
        var(--cm-gradient-red);

    transition:
        height 450ms var(--cm-ease);
}

.cm-faq-item.is-open {
    background:
        rgba(255,255,255,0.27);
}

.cm-faq-item.is-open::before {
    height: 100%;
}


/* ==========================================================
   HEADING
   ========================================================== */

.cm-faq-item__heading {
    margin: 0;
}


/* ==========================================================
   TRIGGER
   ========================================================== */

.cm-faq-item__trigger {
    width: 100%;

    min-height:
        112px;

    display: grid;

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

    align-items: center;

    gap:
        30px;

    padding:
        27px 9px
        27px 25px;

    cursor: pointer;

    color:
        var(--cm-ink);

    background:
        transparent;

    border: 0;

    text-align:
        left;
}


/* ==========================================================
   QUESTION
   ========================================================== */

.cm-faq-item__question {
    max-width:
        680px;

    color:
        inherit;

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

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

    font-weight:
        600;

    line-height:
        1.02;

    letter-spacing:
        -0.02em;

    text-transform:
        uppercase;

    transition:
        color 300ms ease,
        transform 350ms var(--cm-ease);
}

.cm-faq-item__trigger:hover
.cm-faq-item__question,
.cm-faq-item.is-open
.cm-faq-item__question {
    color:
        var(--cm-red-deep);
}


/* ==========================================================
   PLUS / MINUS
   ========================================================== */

.cm-faq-item__toggle {
    position: relative;

    width: 43px;
    height: 43px;

    flex: 0 0 auto;

    display: grid;

    place-items: center;

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

    border:
        1px solid
        var(--cm-border);

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

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

.cm-faq-item__toggle span {
    position: absolute;

    width: 15px;
    height: 1.5px;

    background:
        var(--cm-red);

    border-radius:
        10px;

    transition:
        transform 420ms var(--cm-ease),
        opacity 300ms ease;
}

.cm-faq-item__toggle
span:nth-child(2) {
    transform:
        rotate(90deg);
}


/* Open */

.cm-faq-item.is-open
.cm-faq-item__toggle {
    background:
        var(--cm-gradient-red);

    border-color:
        transparent;

    transform:
        rotate(180deg);
}

.cm-faq-item.is-open
.cm-faq-item__toggle span {
    background:
        var(--cm-white);
}

.cm-faq-item.is-open
.cm-faq-item__toggle
span:nth-child(2) {
    opacity: 0;

    transform:
        rotate(0deg);
}


/* ==========================================================
   ANSWER
   ========================================================== */

.cm-faq-item__answer {
    display: grid;

    grid-template-rows:
        0fr;

    opacity: 0;

    transition:
        grid-template-rows 520ms var(--cm-ease),
        opacity 330ms ease;
}

.cm-faq-item.is-open
.cm-faq-item__answer {
    grid-template-rows:
        1fr;

    opacity: 1;
}

.cm-faq-item__answer-inner {
    min-height: 0;

    overflow: hidden;
}

.cm-faq-item__answer-inner p {
    max-width:
        670px;

    margin:
        0;

    padding:
        0 80px
        30px 25px;

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

    font-size:
        0.94rem;

    line-height:
        1.72;
}


/* ==========================================================
   BOTTOM STRIP
   ========================================================== */

.cm-faq__bottom {
    grid-column:
        1 / -1;

    display: flex;

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

    gap: 35px;

    margin-top:
        9px;

    padding:
        23px 25px;

    background:
        rgba(249,247,242,0.58);

    border:
        1px solid
        var(--cm-border);

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

    backdrop-filter:
        blur(12px);

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

.cm-faq__bottom > div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.cm-faq__bottom > div > span {
    color:
        var(--cm-ink);

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

    font-size:
        1.3rem;

    font-weight:
        600;

    line-height: 1;

    text-transform:
        uppercase;
}

.cm-faq__bottom p {
    margin: 0;

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

    font-size:
        0.78rem;
}


/* ==========================================================
   ESTIMATE LINK
   ========================================================== */

.cm-faq__estimate-link {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    flex: 0 0 auto;

    color:
        var(--cm-ink);

    font-size:
        0.82rem;

    font-weight:
        700;
}

.cm-faq__estimate-arrow {
    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    color:
        var(--cm-white);

    background:
        var(--cm-gradient-red);

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

    box-shadow:
        var(--cm-shadow-red);

    transition:
        transform 350ms var(--cm-ease),
        box-shadow 350ms var(--cm-ease);
}

.cm-faq__estimate-arrow svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}

.cm-faq__estimate-link:hover
.cm-faq__estimate-arrow {
    transform:
        translateX(4px);

    box-shadow:
        0 17px 36px
        rgba(192,24,32,0.23);
}


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

html[data-reduced-motion="true"]
.cm-faq-item,

html[data-reduced-motion="true"]
.cm-faq-item::before,

html[data-reduced-motion="true"]
.cm-faq-item__answer,

html[data-reduced-motion="true"]
.cm-faq-item__toggle,

html[data-reduced-motion="true"]
.cm-faq-item__toggle span,

html[data-reduced-motion="true"]
.cm-faq__phone,

html[data-reduced-motion="true"]
.cm-faq__estimate-arrow {
    transition: none;
}


/* ==========================================================
   01. COMPUTER
   ========================================================== */

@media (min-width: 1200px) {

    .cm-faq__container {
        grid-template-columns:
            minmax(330px, 0.7fr)
            minmax(620px, 1.3fr);
    }

}


/* ==========================================================
   02. TABLET
   ========================================================== */

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

    .cm-faq {
        padding:
            100px 0;
    }

    .cm-faq__container {
        grid-template-columns:
            minmax(260px, 0.65fr)
            minmax(0, 1.35fr);

        column-gap:
            48px;
    }

    .cm-faq__title {
        font-size:
            clamp(
                3.3rem,
                6.5vw,
                4.7rem
            );
    }

    .cm-faq-item__trigger {
        min-height:
            104px;

        gap:
            20px;
    }

    .cm-faq-item__question {
        font-size:
            clamp(
                1.65rem,
                3vw,
                2.1rem
            );
    }

}


/* ==========================================================
   03. MOBILE
   ========================================================== */

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

    .cm-faq {
        padding:
            85px 0;
    }

    .cm-faq__container {
        grid-template-columns:
            1fr;

        row-gap:
            43px;
    }

    .cm-faq__intro {
        max-width:
            610px;

        padding-top: 0;
    }

    .cm-faq__title {
        max-width:
            590px;

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

    .cm-faq__description {
        max-width:
            560px;
    }

    .cm-faq__phone {
        max-width:
            420px;
    }

    .cm-faq-item__trigger {
        min-height:
            98px;

        padding:
            23px 5px
            23px 18px;
    }

    .cm-faq-item__question {
        font-size:
            clamp(
                1.7rem,
                5vw,
                2rem
            );
    }

    .cm-faq-item__answer-inner p {
        padding:
            0 65px
            27px 18px;
    }

    .cm-faq__bottom {
        padding:
            21px;
    }

    .cm-faq__word {
        left:
            -20px;

        font-size:
            16rem;
    }

}


/* ==========================================================
   04. SMALL MOBILE
   ========================================================== */

@media
(max-width: 479.98px) {

    .cm-faq {
        padding:
            74px 0;
    }

    .cm-faq__container {
        grid-template-columns:
            1fr;

        row-gap:
            36px;
    }

    .cm-faq__intro {
        padding-top: 0;
    }

    .cm-faq__eyebrow {
        gap:
            11px;

        margin-bottom:
            16px;

        font-size:
            0.65rem;
    }

    .cm-faq__eyebrow-line {
        width:
            28px;
    }

    .cm-faq__title {
        margin-bottom:
            20px;

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

        line-height:
            0.92;
    }

    .cm-faq__description {
        margin-bottom:
            29px;

        font-size:
            0.85rem;

        line-height:
            1.63;
    }

    .cm-faq__phone {
        min-height:
            62px;

        padding:
            8px 10px;
    }

    .cm-faq__phone-icon {
        width:
            38px;

        height:
            38px;
    }

    .cm-faq__phone strong {
        font-size:
            0.77rem;
    }

    .cm-faq-item__trigger {
        min-height:
            88px;

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

        gap:
            13px;

        padding:
            20px 3px
            20px 14px;
    }

    .cm-faq-item__question {
        font-size:
            1.65rem;

        line-height:
            1;
    }

    .cm-faq-item__toggle {
        width:
            38px;

        height:
            38px;
    }

    .cm-faq-item__toggle span {
        width:
            13px;
    }

    .cm-faq-item__answer-inner p {
        padding:
            0 48px
            23px 14px;

        font-size:
            0.83rem;

        line-height:
            1.62;
    }

    .cm-faq__bottom {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            18px;

        padding:
            19px;

        border-radius:
            14px;
    }

    .cm-faq__bottom > div > span {
        font-size:
            1.12rem;
    }

    .cm-faq__estimate-link {
        width: 100%;

        justify-content:
            space-between;
    }

    .cm-faq__contours {
        width:
            560px;

        right:
            -350px;
    }

    .cm-faq__word {
        left:
            -25px;

        bottom:
            40px;

        font-size:
            12rem;
    }

}