/* =====================================================
   MAGNOLIA GARAGE DOOR TX
   KIMONO INSPIRED HERO
===================================================== */

:root {

    --mn-black: #111111;
    --mn-black-soft: #1b1b1b;

    --mn-white: #ffffff;

    --mn-cream: #f1eee7;
    --mn-light: #f7f5ef;

    --mn-red: #dc5035;
    --mn-red-dark: #bc3b25;

    --mn-gray: #8c8983;
    --mn-line: rgba(17,17,17,.18);

}


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

.mn-header {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 100;

    background: transparent;

}


.mn-navbar {

    min-height: 105px;

    border-bottom:
        1px solid rgba(17,17,17,.18);

}


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

.mn-logo {

    display: flex;

    flex-direction: column;

    color: var(--mn-black) !important;

    text-decoration: none;

    line-height: 1;

}


.mn-logo strong {

    font-size: 25px;

    font-weight: 900;

    letter-spacing: 5px;

}


.mn-logo .mn-logo-icon {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;

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

    font-size: 26px !important;
}

.mn-logo .mn-logo-icon i {
    font-size: 26px !important;
}


/* =====================================================
   NAV
===================================================== */

.mn-menu {

    gap: 10px;

}


.mn-menu .nav-link {

    position: relative;

    padding:
        42px 10px !important;

    color:
        var(--mn-black);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 1.5px;

}


.mn-menu .nav-link::after {

    content: "";

    position: absolute;

    bottom: 31px;

    left: 10px;

    width: 0;

    height: 1px;

    background:
        var(--mn-black);

    transition:
        width .35s ease;

}


.mn-menu .nav-link:hover::after,
.mn-menu .nav-link.active::after {

    width:
        calc(100% - 20px);

}


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

.mn-phone-desktop {

    display: flex;

    align-items: center;

    gap: 12px;

    padding-left: 24px;

    color:
        var(--mn-black);

    text-decoration: none;

}


.mn-phone-circle {

    width: 46px;

    height: 46px;

    display: flex;

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

    border-radius: 50%;

    background:
        var(--mn-black);

    color:
        var(--mn-white);

    transition:
        .3s ease;

}


.mn-phone-desktop:hover .mn-phone-circle {

    background:
        var(--mn-red);

    transform:
        rotate(-10deg);

}


.mn-phone-desktop > span:last-child {

    display: flex;

    flex-direction: column;

}


.mn-phone-desktop small {

    margin-bottom: 4px;

    font-size: 8px;

    letter-spacing: 2px;

}


.mn-phone-desktop strong {

    font-size: 16px;

    font-weight: 800;

}

.mn-email-link {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* =====================================================
   MOBILE PHONE
===================================================== */

.mn-phone-mobile {

    display: none;

}


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

.mn-hero {

    position: relative;

    height: 100vh;

    min-height: 820px;

    overflow: hidden;

    background: #faf9f6;

    color:
        var(--mn-black);

}


/* =====================================================
   BACKGROUND WORD
===================================================== */

.mn-bg-word {

    position: absolute;

    left: 50%;

    bottom: -5%;

    transform:
        translateX(-50%);

    color:
        rgba(17,17,17,.035);

    font-size:
        18vw;

    font-weight:
        900;

    line-height: 1;

    letter-spacing:
        -.08em;

    white-space: nowrap;

    pointer-events: none;

}


/* =====================================================
   IMAGES
===================================================== */

.mn-image {

    position: absolute;

    overflow: hidden;

}


.mn-img-mask {

    width: 100%;

    height: 100%;

    overflow: hidden;

}


.mn-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform:
        scale(1.15);

    animation:
        mnImageZoom
        1.6s
        cubic-bezier(.2,.75,.2,1)
        forwards;

}


@keyframes mnImageZoom {

    to {

        transform:
            scale(1);

    }

}


/* left image */

.mn-image-left {

    left: 4%;

    top: 185px;

    width: 18%;

    height: 46%;

    z-index: 2;

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

    animation:
        mnImageReveal
        1.2s
        cubic-bezier(.6,0,.2,1)
        .1s
        forwards;

}


/* main */

.mn-image-main {

    top: 135px;

    right: 10%;

    width: 39%;

    height: 67%;

    z-index: 3;

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

    animation:
        mnImageRevealBottom
        1.25s
        cubic-bezier(.6,0,.2,1)
        .18s
        forwards;

}


/* small bottom */

.mn-image-detail {

    right: 3%;

    bottom: 5%;

    width: 17%;

    height: 28%;

    z-index: 5;

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

    animation:
        mnImageReveal
        1.1s
        cubic-bezier(.6,0,.2,1)
        .55s
        forwards;

}


@keyframes mnImageReveal {

    to {

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

    }

}


@keyframes mnImageRevealBottom {

    to {

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

    }

}


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

.mn-hero-container {

    position: relative;

    z-index: 10;

    height: 100%;

    padding-top: 205px !important;

}



/* =====================================================
   NEW HERO TITLE
===================================================== */
.mn-title-new {
    width: min(760px, 58vw);
    margin-left: 3%;
    padding-top: 35px;
}

/* top label */
.mn-title-kicker {
    display: flex;
    align-items: center;
    gap: 23px;
    margin: 0 0 17px 7px;

    color: var(--mn-black);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3.5px;

    opacity: 0;
    animation: mnKickerIn .7s ease .2s forwards;
}

.mn-title-kicker > span {
    display: block;
    width: 52px;
    height: 2px;
    background: var(--mn-red);
}

/* light panel behind heading */
.mn-heading-box {
    background: var(--mn-red);

    border-left: 5px solid #fff;

    box-shadow:
        0 20px 55px rgba(17, 17, 17, .08);

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

.mn-heading-box::before {
    content: "";

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

    width: 75px;
    height: 75px;

    border-top: 1px solid rgba(17,17,17,.18);
    border-right: 1px solid rgba(17,17,17,.18);

    pointer-events: none;
}

/* h1 */
.mn-hero-heading {
    position: relative;
    z-index: 2;

    margin: 0;

    line-height: 1;
    text-transform: uppercase;
}

.mn-heading-line {
    display: block;
    width: fit-content;

    color: #fff;

    font-size: clamp(76px, 8.2vw, 145px);
    font-weight: 800;
    line-height: .78;
    letter-spacing: -.07em;

    opacity: 0;
}

.mn-heading-garage {
    animation:
        mnHeadingLeft
        .85s
        cubic-bezier(.2,.8,.2,1)
        .3s
        forwards;
}

.mn-heading-door {
    position: relative;

    margin-left: 13%;
    margin-top: 13px;

    color: #fff;

    font-style: italic;
    font-weight: 500;

    animation:
        mnHeadingRight
        .85s
        cubic-bezier(.2,.8,.2,1)
        .48s
        forwards;
}

.mn-heading-door::after {
    content: "";

    position: absolute;
    left: calc(100% + 22px);
    top: 55%;

    width: 100px;
    height: 1px;

    background: rgba(17,17,17,.35);
}

/* Magnolia TX */
.mn-heading-place {
    position: relative;

    display: flex;
    align-items: center;

    width: fit-content;
    gap: 14px;

    margin-top: 24px;

    color: #fff;

    font-size: clamp(25px, 2.6vw, 43px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .08em;

    opacity: 0;

    animation:
        mnPlaceIn
        .75s ease
        .72s
        forwards;
}

.mn-heading-place b {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 10px;

    background: var(--mn-red);
    color: var(--mn-white);

    font-size: .55em;
    font-weight: 800;
    letter-spacing: .12em;
}

/* service labels */
.mn-heading-services {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 19px;

    color: #ffffff;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2.2px;

    opacity: 0;

    animation:
        mnPlaceIn
        .7s ease
        .9s
        forwards;
}

.mn-heading-services i {
    display: block;

    width: 4px;
    height: 4px;

    border-radius: 50%;

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

/* title animations */
@keyframes mnHeadingLeft {
    from {
        opacity: 0;
        transform: translateX(-65px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes mnHeadingRight {
    from {
        opacity: 0;
        transform: translateX(65px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes mnPlaceIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mnKickerIn {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

.mn-hero-bottom {

    position: absolute;

    left: 5%;

    bottom: 52px;

    display: flex;

    align-items: center;

    gap: 26px;

    z-index: 20;

    opacity: 0;

    animation:
        mnFadeUp
        .8s ease
        1s
        forwards;

}


.mn-bottom-line {

    width: 70px;

    height: 1px;

    background:
        var(--mn-black);

}


.mn-hero-bottom p {

    max-width: 430px;

    margin: 0;

    color:
        #55514d;

    font-size: 13px;

    line-height: 1.75;

}


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

.mn-call-btn {

    display: inline-flex;

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

    gap: 25px;

    min-width: 170px;

    height: 58px;

    padding:
        0 23px;

    background:
        var(--mn-black);

    color:
        var(--mn-white);

    text-decoration: none;

    font-size: 30px;

    font-weight: 700;

    letter-spacing: 2px;

    transition:
        .35s ease;

}


.mn-call-btn i {

    transform:
        rotate(-45deg);

    transition:
        .35s ease;

}


.mn-call-btn:hover {

    background:
        var(--mn-red);

    color:
        var(--mn-white);

    transform:
        translateY(-5px);

}


.mn-call-btn:hover i {

    transform:
        rotate(0);

}


/* =====================================================
   NUMBER
===================================================== */

.mn-slide-number {

    position: absolute;

    right: 5%;

    top: 150px;

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 10px;

}


.mn-slide-number span {

    font-size: 19px;

    font-weight: 800;

}


.mn-slide-number i {

    display: block;

    width: 50px;

    height: 1px;

    background:
        var(--mn-black);

}


.mn-slide-number small {

    font-size: 10px;

    opacity: .5;

}


/* =====================================================
   SIDE TEXT
===================================================== */

.mn-side-text {

    position: absolute;

    left: 20px;

    top: 58%;

    z-index: 20;

    transform:
        rotate(-90deg)
        translateX(-50%);

    transform-origin:
        left top;

    font-size: 8px;

    letter-spacing: 3px;

    color:
        var(--mn-gray);

}


/* =====================================================
   SCROLL
===================================================== */

.mn-scroll {

    position: absolute;

    right: 30px;

    bottom: 45px;

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 12px;

    transform:
        rotate(90deg);

    transform-origin:
        right center;

}


.mn-scroll span {

    font-size: 8px;

    letter-spacing: 3px;

}


.mn-scroll i {

    position: relative;

    display: block;

    width: 65px;

    height: 1px;

    overflow: hidden;

    background:
        rgba(17,17,17,.25);

}


.mn-scroll i::before {

    content: "";

    position: absolute;

    width: 30px;

    height: 1px;

    left: -35px;

    background:
        var(--mn-black);

    animation:
        mnScroll
        1.7s linear infinite;

}


@keyframes mnScroll {

    to {

        left: 80px;

    }

}


/* =====================================================
   FADE
===================================================== */

@keyframes mnFadeUp {

    from {

        opacity: 0;

        transform:
            translateY(25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


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

@media (max-width: 1199px) {
.mn-menu .nav-link {

        padding-left:
            6px !important;

        padding-right:
            6px !important;

        font-size:
            9px;

    }


    .mn-phone-desktop strong {

        font-size:
            14px;

    }

}


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

@media (max-width: 991px) {

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

    .mn-header {

        background:
            var(--mn-cream);

    }


    .mn-navbar {

        min-height:
            77px;

        padding-left:
            16px;

        padding-right:
            16px;

    }


    .mn-logo strong {

        font-size:
            18px;

        letter-spacing:
            3px;

    }


    .mn-logo span {

        font-size:
            6px;

        letter-spacing:
            2px;

    }


    /* =========================
       TOGGLER
    ========================= */

    .mn-toggler {

        width:
            45px;

        height:
            45px;

        padding:
            9px;

        border:
            1px solid var(--mn-black);

        border-radius:
            0;

        box-shadow:
            none !important;

    }


    .mn-toggler span {

        display:
            block;

        width:
            100%;

        height:
            1px;

        margin:
            6px 0;

        background:
            var(--mn-black);

    }


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

    .mn-navbar .navbar-collapse {

        position:
            absolute;

        left:
            0;

        top:
            77px;

        width:
            100%;

        padding:
            15px 22px 25px;

        background:
            var(--mn-light);

        box-shadow:
            0 20px 35px
            rgba(0,0,0,.08);

    }


    .mn-menu {

        gap:
            0;

    }



    .mn-title-new {
        width: min(680px, 62vw);
    }

    .mn-heading-line {
        font-size: clamp(68px, 8vw, 115px);
    }

    .mn-heading-box {
        padding: 23px 34px 25px 29px;
    }

    .mn-menu .nav-link {

        padding:
            13px 0 !important;

        border-bottom:
            1px solid var(--mn-line);

        font-size:
            11px;

    }


    .mn-menu .nav-link::after {

        display:
            none;

    }


    .mn-phone-desktop {

        display:
            none;

    }


    /* =================================================
       VERY IMPORTANT MOBILE PHONE
    ================================================= */

    .mn-phone-mobile {

        display: flex;

        position: relative;

        z-index: 110;

        width: 100%;

        min-height: 78px;

        padding:
            9px 17px;

        align-items: center;

        gap: 13px;

        background:
            var(--mn-red);

        color:
            var(--mn-white);

        text-decoration: none;

        overflow: hidden;

    }


    .mn-phone-mobile::after {

        content: "";

        position: absolute;

        top: 0;

        left: -100%;

        width: 60%;

        height: 100%;

        background:
            linear-gradient(
                110deg,
                transparent,
                rgba(255,255,255,.18),
                transparent
            );

        animation:
            mnPhoneShine
            3.5s infinite;

    }


    .mn-mobile-icon {

        position: relative;

        z-index: 2;

        width: 52px;

        height: 52px;

        flex:
            0 0 52px;

        display: flex;

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

        border-radius: 50%;

        background:
            var(--mn-white);

        color:
            var(--mn-red);

        font-size:
            20px;

        animation:
            mnPhonePulse
            1.7s infinite;

    }


    .mn-mobile-phone-text {

        position: relative;

        z-index: 2;

        display: flex;

        flex-direction: column;

        line-height: 1;

    }


    .mn-mobile-phone-text small {

        margin-bottom: 7px;

        font-size: 9px;

        font-weight: 700;

        letter-spacing: 3px;

    }


    .mn-mobile-phone-text strong {

        font-size: 29px;

        font-weight: 900;

        letter-spacing: .5px;

        color:
            var(--mn-white);

        white-space: nowrap;

    }


    .mn-mobile-arrow {

        position: relative;

        z-index: 2;

        margin-left: auto;

        font-size: 17px;

        transform:
            rotate(-45deg);

    }


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

    .mn-hero {

        height: auto;

        min-height: 850px;

        padding-bottom: 80px;

    }


    .mn-hero-container {

        padding-top:
            210px !important;

    }


    .mn-title-new {
        width: 74%;
        margin-left: 0;
        padding-top: 75px;
    }

    .mn-heading-box {
        padding: 22px 27px 24px 22px;
        background: rgba(247,245,239,.94);
        border-left-width: 4px;
    }

    .mn-heading-line {
        font-size: clamp(62px, 12vw, 100px);
    }

    .mn-heading-place {
        font-size: clamp(23px, 4vw, 35px);
    }


    .mn-image-left {

        display:
            none;

    }


    .mn-image-main {

        top:
            205px;

        right:
            0;

        width:
            55%;

        height:
            50%;

    }


    .mn-image-detail {

        right:
            auto;

        left:
            4%;

        bottom:
            7%;

        width:
            30%;

        height:
            23%;

    }
.mn-hero-bottom {

        left:
            4%;

        bottom:
            35px;

        max-width:
            58%;

    }


    .mn-bottom-line {

        display:
            none;

    }


    .mn-slide-number {

        display:
            none;

    }


    .mn-side-text,
    .mn-scroll {

        display:
            none;

    }

}


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

@media (max-width: 575px) {

    .mn-hero {

        min-height:
            780px;

    }


    .mn-hero-container {

        padding-top:
            205px !important;

    }


    /* IMAGE */

    .mn-image-main {

        top:
            185px;

        right:
            -15%;

        width:
            72%;

        height:
            45%;

    }
     .mn-heading-box {
    display: block;
    width: 100%;
    padding: 17px 16px 18px 15px;
    background: #bc3b25 !important;
    border-left: 4px solid #fff;
    box-shadow: 0 16px 38px rgba(17,17,17,.10);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    overflow: hidden;
  }


    .mn-image-detail {

        left:
            5%;

        bottom:
            19%;

        width:
            35%;

        height:
            20%;

    }
.mn-title-wrap {

        padding-top:
            105px;

    }
/* HERO BOTTOM */

    .mn-hero-bottom {

        bottom:
            27px;

        left:
            5%;

        width:
            90%;

        max-width:
            none;

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            17px;

    }


    .mn-hero-bottom p {

        max-width:
            340px;

        font-size:
            12px;

        line-height:
            1.65;

    }


    .mn-call-btn {

        height:
            50px;

        min-width:
            155px;

    }


    /* MOBILE PHONE */

    .mn-phone-mobile {

        min-height:
            80px;

        padding-left:
            14px;

        padding-right:
            14px;

    }


    .mn-mobile-phone-text strong {

        font-size:
            28px;

    }


    .mn-mobile-icon {

        width:
            50px;

        height:
            50px;

        flex-basis:
            50px;

    }

}


/* =====================================================
   VERY SMALL
===================================================== */

@media (max-width: 390px) {

    .mn-mobile-phone-text strong {

        font-size:
            24px;

    }


    .mn-mobile-icon {

        width:
            44px;

        height:
            44px;

        flex-basis:
            44px;

        font-size:
            17px;

    }

    .mn-heading-line {
        font-size: 54px;
    }

    .mn-heading-place {
        font-size: 21px;
    }
}


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

@keyframes mnPhonePulse {

    0%,
    100% {

        transform:
            scale(1);

    }

    50% {

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

    }

}


@keyframes mnPhoneShine {

    0% {

        left:
            -100%;

    }

    45%,
    100% {

        left:
            150%;

    }

}


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

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

    .mn-image,
    .mn-image img,
    .mn-heading-line,
    .mn-heading-place,
    .mn-heading-services,
    .mn-title-kicker,
    .mn-hero-bottom,
    .mn-mobile-icon,
    .mn-phone-mobile::after {

        animation:
            none !important;

    }


    .mn-image {

        clip-path:
            none;

    }


    .mn-heading-line,
    .mn-heading-place,
    .mn-heading-services,
    .mn-title-kicker,
    .mn-hero-bottom {

        opacity:
            1;

        transform:
            none;

    }

}


/* ============================================================
   FINAL HERO LAYOUT FIX
   Desktop title shift + fully rebuilt mobile hero
============================================================ */

/* Move the readable title panel slightly to the right on desktop
   so the left-side image remains visible. */
@media (min-width: 1200px) {
    .mn-title-new {
        width: min(680px, 49vw);
        margin-left: 16%;
        padding-top: 34px;
    }

    .mn-heading-box {
        padding: 23px 34px 25px 29px;
    }

    .mn-heading-line {
        font-size: clamp(68px, 7vw, 125px);
    }

    .mn-image-left {
        left: 3%;
        width: 19%;
        z-index: 7;
    }

    .mn-image-main {
        right: 6%;
        width: 38%;
    }
}


/* ============================================================
   TABLET / SMALL LAPTOP
============================================================ */
@media (min-width: 576px) and (max-width: 991px) {

    .mn-hero {
        min-height: 900px;
        padding-bottom: 70px;
    }

    .mn-hero-container {
        padding-top: 185px !important;
    }

    .mn-title-new {
        width: 62%;
        margin-left: 4%;
        padding-top: 25px;
    }

    .mn-heading-box {
        width: 100%;
        padding: 21px 24px 23px 20px;
        background: rgba(247,245,239,.95);
    }

    .mn-heading-line {
        font-size: clamp(58px, 9vw, 86px);
    }

    .mn-heading-place {
        font-size: clamp(22px, 3vw, 31px);
    }

    .mn-image-left {
        display: none;
    }

    .mn-image-main {
        top: 245px;
        right: -4%;
        width: 48%;
        height: 47%;
        z-index: 3;
    }

    .mn-image-detail {
        left: auto;
        right: 4%;
        bottom: 8%;
        width: 24%;
        height: 22%;
        z-index: 8;
    }

    .mn-hero-bottom {
        left: 5%;
        bottom: 40px;
        max-width: 53%;
    }
}


/* ============================================================
   MOBILE - COMPLETELY REBUILT
============================================================ */
@media (max-width: 575px) {

    /* Header stays clean */
    .mn-header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: var(--mn-cream);
    }

    .mn-navbar {
        min-height: 68px;
        padding: 0 14px;
    }

    .mn-logo strong {
        font-size: 16px;
        letter-spacing: 2.4px;
    }

    .mn-logo span {
        margin-top: 5px;
        font-size: 6px;
        letter-spacing: 1.7px;
    }

    .mn-toggler {
        width: 40px;
        height: 40px;
        padding: 7px;
    }

    .mn-navbar .navbar-collapse {
        top: 68px;
        z-index: 150;
    }


    /* Big visible call bar */
    .mn-phone-mobile {
        display: flex;
        width: 100%;
        min-height: 68px;
        padding: 8px 14px;
        gap: 11px;

        background: var(--mn-red);
        color: var(--mn-white);

        position: relative;
        z-index: 120;
    }

    .mn-mobile-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        font-size: 17px;
    }

    .mn-mobile-phone-text small {
        margin-bottom: 5px;
        font-size: 7px;
        letter-spacing: 2px;
    }

    .mn-mobile-phone-text strong {
        font-size: clamp(22px, 7vw, 27px);
        line-height: 1;
        letter-spacing: 0;
    }

    .mn-mobile-arrow {
        font-size: 14px;
    }


    /* Hero gets enough vertical room.
       Elements no longer fight for the same space. */
    .mn-hero {
        height: auto;
        min-height: 980px;
        padding-bottom: 0;
        overflow: hidden;
    }

    .mn-hero-container {
        height: 980px;
        padding-top: 158px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .mn-bg-word {
        bottom: 11%;
        font-size: 34vw;
        opacity: .65;
    }


    /* Hide the desktop side image on phones.
       Keep two images so the layered look remains. */
    .mn-image-left {
        display: none;
    }


    /* Main before/after image - BELOW title */
    .mn-image-main {
        top: 455px;
        right: 4%;

        width: 78%;
        height: 260px;

        z-index: 3;
    }

    .mn-image-main img {
        object-position: center;
    }


    /* Detail image overlaps only the lower corner of main image */
    .mn-image-detail {
        top: 640px;
        bottom: auto;
        left: 4%;
        right: auto;

        width: 40%;
        height: 165px;

        z-index: 8;

        border: 6px solid var(--mn-cream);
        box-shadow: 0 18px 45px rgba(17,17,17,.16);
    }


    /* Title sits clearly ABOVE the photos */
    .mn-title-wrap {
        padding-top: 0;
    }

    .mn-title-new {
        width: 94%;
        margin-left: 3%;
        padding-top: 0;

        position: relative;
        z-index: 30;
    }

    .mn-title-kicker {
        gap: 9px;
        margin: 0 0 10px 2px;

        font-size: 6.5px;
        letter-spacing: 1.5px;
        white-space: nowrap;
    }

    .mn-title-kicker > span {
        width: 24px;
    }

    .mn-heading-box {
        display: block;
        width: 100%;

        padding: 17px 16px 18px 15px;

        background: rgba(247,245,239,.97);
        border-left: 4px solid var(--mn-red);

        box-shadow: 0 16px 38px rgba(17,17,17,.10);

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

        overflow: hidden;
    }

    .mn-heading-box::before {
        width: 46px;
        height: 46px;
    }

    .mn-hero-heading {
        overflow: visible;
    }

    .mn-heading-line {
        font-size: clamp(49px, 15vw, 68px);
        line-height: .82;
        letter-spacing: -.055em;
    }

    .mn-heading-door {
        margin-left: 9%;
        margin-top: 8px;
    }

    .mn-heading-door::after {
        left: calc(100% + 10px);
        width: 36px;
    }

    .mn-heading-place {
        gap: 8px;
        margin-top: 15px;

        font-size: clamp(19px, 6.7vw, 27px);
        letter-spacing: .055em;
    }

    .mn-heading-place b {
        padding: 6px 7px;
    }

    .mn-heading-services {
        flex-wrap: wrap;
        gap: 6px 8px;

        margin-top: 12px;

        font-size: 5.8px;
        letter-spacing: 1px;
    }

    .mn-heading-services i {
        width: 3px;
        height: 3px;
    }


    /* Description + CTA at bottom with no image overlap */
    .mn-hero-bottom {
        left: 5%;
        right: auto;
        bottom: 28px;

        width: 90%;
        max-width: none;

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

        gap: 14px;
    }

    .mn-bottom-line {
        display: none;
    }

    .mn-hero-bottom p {
        width: 100%;
        max-width: 335px;

        margin: 0;

        font-size: 11.5px;
        line-height: 1.65;
    }

    .mn-call-btn {
        min-width: 150px;
        height: 48px;
        padding: 0 18px;

        font-size: 9px;
    }


    /* Remove desktop-only decorative controls */
    .mn-slide-number,
    .mn-side-text,
    .mn-scroll {
        display: none;
    }
}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */
@media (max-width: 390px) {

    .mn-hero {
        min-height: 945px;
    }

    .mn-hero-container {
        height: 945px;
        padding-top: 153px !important;
        padding-left: 11px !important;
        padding-right: 11px !important;
    }

    .mn-logo strong {
        font-size: 14px;
    }

    .mn-phone-mobile {
        min-height: 64px;
        padding: 7px 11px;
    }

    .mn-mobile-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 15px;
    }

    .mn-mobile-phone-text strong {
        font-size: 22px;
    }

    .mn-title-new {
        width: 96%;
        margin-left: 2%;
    }

    .mn-title-kicker {
        font-size: 5.8px;
        letter-spacing: 1.15px;
    }

    .mn-heading-box {
        padding: 15px 13px 16px 12px;
    }

    .mn-heading-line {
        font-size: clamp(44px, 15vw, 56px);
    }

    .mn-heading-place {
        font-size: clamp(18px, 6.5vw, 23px);
    }

    .mn-image-main {
        top: 425px;
        right: 3%;

        width: 82%;
        height: 245px;
    }

    .mn-image-detail {
        top: 610px;
        left: 3%;

        width: 42%;
        height: 150px;
    }

    .mn-hero-bottom {
        left: 4%;
        width: 92%;
        bottom: 24px;
    }

    .mn-hero-bottom p {
        font-size: 11px;
    }
}


/* ============================================================
   REDUCED MOTION - NEW TITLE SUPPORT
============================================================ */
@media (prefers-reduced-motion: reduce) {
    .mn-heading-line,
    .mn-heading-place,
    .mn-heading-services,
    .mn-title-kicker {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}


/* ==============================
   SIMPLE LOGO ICON
============================== */

.mn-logo {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    gap: 12px;

    color: var(--mn-black) !important;
    text-decoration: none;
}


/* icon */

.mn-logo-icon {
    position: relative;

    width: 45px;
    height: 45px;

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

    flex: 0 0 45px;

    border: 1px solid var(--mn-black);

    color: var(--mn-black);

    font-size: 35px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


/* tiny accent */

.mn-logo-icon::after {
    content: "";

    position: absolute;

    right: -4px;
    bottom: -4px;

    width: 11px;
    height: 11px;

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


/* text */

.mn-logo-text {
    display: flex;
    flex-direction: column;

    line-height: 1;
}


.mn-logo-text strong {
    font-size: 22px;
    font-weight: 900;

    letter-spacing: 4px;

    color: var(--mn-black);
}


.mn-logo-text small {
    margin-top: 7px;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 3.2px;

    color: var(--mn-black);
}


/* hover */

.mn-logo:hover .mn-logo-icon {
    background: var(--mn-black);
    color: var(--mn-white);

    transform: translateY(-2px);
}


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

@media (max-width: 575px) {

    .mn-logo {
        gap: 9px;
    }

    .mn-logo-icon {
        width: 38px;
        height: 38px;

        flex-basis: 38px;

        font-size: 22px;
    }

    .mn-logo-icon::after {
        width: 8px;
        height: 8px;

        right: -3px;
        bottom: -3px;
    }

    .mn-logo-text strong {
        font-size: 15px;
        letter-spacing: 2px;
    }

    .mn-logo-text small {
        margin-top: 5px;

        font-size: 5.5px;
        letter-spacing: 1.7px;
    }

}
/* =====================================================
   SAME DAY SERVICE - ROTATING SEAL
===================================================== */

.mn-service-seal {
    position: absolute;

    right: 4.5%;
    top: 55%;

    width: 145px;
    height: 145px;

    z-index: 25;

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

    border-radius: 50%;

    background: #111111;

    box-shadow:
        0 15px 40px rgba(17, 17, 17, .18);
}


/* rotating text */

.mn-seal-rotate {
    position: absolute;

    inset: 7px;

    animation:
        mnSealRotate
        14s
        linear
        infinite;
}


.mn-seal-rotate svg {
    width: 100%;
    height: 100%;

    overflow: visible;
}


.mn-seal-rotate text {
    fill: #ffffff;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.4px;
}


/* =========================
   CENTER
========================= */

.mn-seal-center {
    position: relative;

    width: 62px;
    height: 62px;

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

    border-radius: 50%;

    background: var(--mn-red);

    color: #ffffff;

    font-size: 28px;

    z-index: 3;

    box-shadow:
        0 0 0 5px #111111,
        0 0 0 6px rgba(255,255,255,.22);
}


/* gear itself */

.mn-seal-center i {
    display: block;

    animation:
        mnGearRotate
        7s
        linear
        infinite;
}


/* =========================
   ANIMATION
========================= */

@keyframes mnSealRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes mnGearRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }

}


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

.mn-service-seal {
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.mn-service-seal:hover {
    transform: scale(1.06);

    box-shadow:
        0 20px 55px rgba(17,17,17,.25);
}


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

@media (max-width: 991px) {

    .mn-service-seal {
        width: 115px;
        height: 115px;

        right: 4%;
        top: 64%;
    }

    .mn-seal-rotate text {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .mn-seal-center {
        width: 50px;
        height: 50px;

        font-size: 22px;
    }

}


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

@media (max-width: 575px) {

    .mn-service-seal {
        width: 92px;
        height: 92px;

        top: 665px;
        right: 6%;

        z-index: 15;

        border: 4px solid #faf9f6;
    }

    .mn-seal-rotate {
        inset: 5px;
    }

    .mn-seal-rotate text {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .mn-seal-center {
        width: 38px;
        height: 38px;

        font-size: 17px;

        box-shadow:
            0 0 0 3px #111111,
            0 0 0 4px rgba(255,255,255,.2);
    }

}


/* very small phones */

@media (max-width: 390px) {

    .mn-service-seal {
        width: 82px;
        height: 82px;

        top: 625px;
        right: 5%;
    }

    .mn-seal-center {
        width: 34px;
        height: 34px;

        font-size: 15px;
    }

}


/* Accessibility */

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

    .mn-seal-rotate,
    .mn-seal-center i {
        animation: none;
    }

}


/* =====================================================
   KIMONO INSPIRED - ABOUT / PROBLEM SECTION
===================================================== */

.mn-about-fix {
    position: relative;

    padding:
        130px 0 105px;

    background:
        #ffffff;

    color:
        var(--mn-black);

    overflow: hidden;
}


/* subtle background word */

.mn-about-fix::before {
    content: "MAGNOLIA";

    position: absolute;

    right: -3%;
    top: 4%;

    color:
        rgba(17,17,17,.025);

    font-size:
        13vw;

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        -.08em;

    pointer-events:
        none;
}


/* =====================================================
   KICKER
===================================================== */

.mn-about-kicker {
    position: relative;

    z-index: 5;

    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom:
        55px;
}


.mn-about-kicker span {
    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        2px;
}


.mn-about-kicker i {
    display: block;

    width:
        36px;

    height:
        1px;

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


.mn-about-kicker small {
    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        3px;

    color:
        #74706b;
}


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

.mn-about-copy {
    position: relative;

    z-index: 5;

    max-width:
        750px;

    padding-right:
        40px;
}


.mn-about-copy h2 {
    margin:
        0 0 35px;

    font-size:
        4rem;

    font-weight:
        500;

    line-height:
        .96;

    letter-spacing:
        -.055em;

    text-transform:
        uppercase;
}


.mn-about-copy h2 span {
    display:
        block;

    margin-top:
        10px;

    color:
        var(--mn-red);

    font-style:
        italic;

    font-weight:
        400;
}


.mn-about-lead {
    max-width:
        610px;

    margin:
        0;

    color:
        #625f5b;

    font-size:
        14px;

    line-height:
        1.9;
}


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

.mn-about-subtitle {
    position: relative;

    margin-top:
        60px;

    padding-left:
        55px;
}


.mn-about-subtitle::before {
    content: "";

    position: absolute;

    left:
        0;

    top:
        8px;

    width:
        35px;

    height:
        1px;

    background:
        var(--mn-black);
}


.mn-about-subtitle > span {
    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--mn-red);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        3px;

    text-transform:
        uppercase;
}


.mn-about-subtitle h3 {
    max-width:
        570px;

    margin:
        0;

    font-size:
        clamp(24px, 2vw, 37px);

    font-weight:
        500;

    line-height:
        1.25;

    letter-spacing:
        -.025em;
}


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

.mn-about-visual {
    position:
        relative;

    min-height:
        660px;

    margin-top:
        -35px;
}


.mn-about-img {
    position:
        absolute;

    overflow:
        hidden;
}


.mn-about-img img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .8s
        cubic-bezier(.2,.8,.2,1);
}


.mn-about-img:hover img {
    transform:
        scale(1.06);
}


/* main image */

.mn-about-img-main {
    top:
        0;

    right:
        2%;

    width:
        68%;

    height:
        520px;

    z-index:
        2;
}


/* small overlapping image */

.mn-about-img-small {
    left:
        1%;

    bottom:
        5%;

    width:
        45%;

    height:
        315px;

    z-index:
        4;

    border:
        12px solid #ffffff;

    box-shadow:
        0 25px 65px
        rgba(17,17,17,.12);
}


/* =====================================================
   BIG NUMBER
===================================================== */

.mn-about-number {
    position:
        absolute;

    right:
        0;

    bottom:
        2%;

    z-index:
        6;

    display:
        flex;

    align-items:
        flex-end;

    gap:
        12px;

    padding:
        20px 25px;

    background:
        var(--mn-black);

    color:
        #ffffff;
}


.mn-about-number strong {
    font-size:
        55px;

    font-weight:
        300;

    line-height:
        .85;
}


.mn-about-number span {
    font-size:
        8px;

    font-weight:
        700;

    line-height:
        1.4;

    letter-spacing:
        2px;
}


/* =====================================================
   VERTICAL TEXT
===================================================== */

.mn-about-line-text {
    position:
        absolute;

    right:
        -25px;

    top:
        35%;

    transform:
        rotate(90deg)
        translateX(50%);

    transform-origin:
        right top;

    z-index:
        8;

    font-size:
        7px;

    font-weight:
        700;

    letter-spacing:
        4px;

    color:
        #89847f;
}


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

.mn-problems-wrap {
    position:
        relative;

    margin-top:
        75px;
}


.mn-problems-topline {
    width:
        100%;

    height:
        1px;

    margin-bottom:
        0;

    background:
        rgba(17,17,17,.18);
}


.mn-problem-item {
    position:
        relative;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        20px;

    min-height:
        225px;

    padding:
        34px 28px 35px;

    border-right:
        1px solid rgba(17,17,17,.13);

    border-bottom:
        1px solid rgba(17,17,17,.13);

    transition:
        background .4s ease,
        color .4s ease,
        transform .4s ease;
}


.mn-problem-item::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        0;

    height:
        3px;

    background:
        var(--mn-red);

    transition:
        width .4s ease;
}


.mn-problem-item:hover {
    background:
        #111111;

    color:
        #ffffff;

    transform:
        translateY(-5px);
}


.mn-problem-item:hover::after {
    width:
        100%;
}


.mn-problem-num {
    flex:
        0 0 auto;

    color:
        var(--mn-red);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2px;
}


.mn-problem-item h4 {
    margin:
        0 0 15px;

    font-size:
        18px;

    font-weight:
        600;

    line-height:
        1.25;

    transition:
        color .4s ease;
}


.mn-problem-item p {
    margin:
        0;

    color:
        #77736e;

    font-size:
        12px;

    line-height:
        1.75;

    transition:
        color .4s ease;
}


.mn-problem-item:hover p {
    color:
        rgba(255,255,255,.68);
}


/* =====================================================
   DESKTOP GRID BORDERS
===================================================== */

@media (min-width: 992px) {

    .mn-problem-item:nth-child(4n) {
        border-right:
            0;
    }

}


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

@media (max-width: 991px) {

    .mn-about-fix {
        padding:
            90px 0 80px;
    }


    .mn-about-kicker {
        margin-bottom:
            35px;
    }


    .mn-about-copy {
        padding-right:
            0;
    }


    .mn-about-copy h2 {
        max-width:
            720px;

        font-size:
            clamp(48px, 8vw, 75px);
    }


    .mn-about-visual {
        min-height:
            620px;

        margin-top:
            30px;
    }


    .mn-about-img-main {
        width:
            70%;

        height:
            480px;
    }


    .mn-about-img-small {
        width:
            44%;

        height:
            280px;
    }


    .mn-problems-wrap {
        margin-top:
            55px;
    }


    .mn-problem-item {
        min-height:
            200px;
    }

}


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

@media (max-width: 575px) {

    .mn-about-fix {
        padding:
            70px 0 60px;
    }


    .mn-about-fix::before {
        top:
            2%;

        right:
            -10%;

        font-size:
            28vw;
    }


    .mn-about-kicker {
        margin-bottom:
            27px;
    }


    .mn-about-kicker small {
        letter-spacing:
            2px;
    }


    .mn-about-copy h2 {
        margin-bottom:
            25px;

        font-size:
            clamp(41px, 12vw, 58px);

        line-height:
            .98;
    }


    .mn-about-lead {
        font-size:
            12px;

        line-height:
            1.8;
    }


    .mn-about-subtitle {
        margin-top:
            38px;

        padding-left:
            38px;
    }


    .mn-about-subtitle::before {
        width:
            24px;
    }


    .mn-about-subtitle h3 {
        font-size:
            23px;

        line-height:
            1.3;
    }


    /* images */

    .mn-about-visual {
        min-height:
            465px;

        margin-top:
            45px;
    }


    .mn-about-img-main {
        top:
            0;

        right:
            0;

        width:
            82%;

        height:
            340px;
    }


    .mn-about-img-small {
        left:
            0;

        bottom:
            0;

        width:
            48%;

        height:
            210px;

        border-width:
            7px;
    }


    .mn-about-number {
        right:
            0;

        bottom:
            10px;

        padding:
            14px 17px;
    }


    .mn-about-number strong {
        font-size:
            38px;
    }


    .mn-about-number span {
        font-size:
            6px;

        letter-spacing:
            1.3px;
    }


    .mn-about-line-text {
        display:
            none;
    }


    /* grid */

    .mn-problems-wrap {
        margin-top:
            45px;
    }


    .mn-problem-item {
        min-height:
            auto;

        padding:
            25px 15px;

        border-right:
            0;
    }


    .mn-problem-item h4 {
        font-size:
            17px;
    }


    .mn-problem-item p {
        font-size:
            12px;
    }

}

/* =====================================================
   ROTATING REPAIR WHEEL
===================================================== */

.mn-repair-wheel {
    position: absolute;

    left: 34%;
    top: 43%;

    width: 138px;
    height: 138px;

    z-index: 15;

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

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 15px 45px rgba(17, 17, 17, .15);

    transition:
        transform .4s ease;
}


/* thin outer circle */

.mn-repair-wheel::before {
    content: "";

    position: absolute;

    inset: 8px;

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

    border-radius: 50%;
}


/* =========================
   ROTATING TEXT
========================= */

.mn-repair-wheel-text {
    position: absolute;

    inset: 5px;

    animation:
        mnRepairTextRotate
        16s linear infinite;
}


.mn-repair-wheel-text svg {
    width: 100%;
    height: 100%;

    overflow: visible;
}


.mn-repair-wheel-text text {
    fill: #111111;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.2px;
}


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

.mn-repair-wheel-icon {
    position: relative;

    z-index: 5;

    width: 56px;
    height: 56px;

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

    border-radius: 50%;

    background:
        var(--mn-red);

    color:
        #ffffff;

    font-size: 21px;

    box-shadow:
        0 0 0 6px #ffffff;
}


/* little rotating icon */

.mn-repair-wheel-icon i {
    animation:
        mnRepairIconMove
        5s ease-in-out infinite;
}


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

.mn-repair-wheel:hover {
    transform:
        scale(1.08);
}


/* =========================
   ANIMATIONS
========================= */

@keyframes mnRepairTextRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes mnRepairIconMove {

    0%,
    100% {
        transform:
            rotate(-8deg);
    }

    50% {
        transform:
            rotate(8deg);
    }

}


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

@media (max-width: 991px) {

    .mn-repair-wheel {
        left: 35%;
        top: 42%;

        width: 120px;
        height: 120px;
    }

    .mn-repair-wheel-icon {
        width: 48px;
        height: 48px;

        font-size: 18px;
    }

}


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

@media (max-width: 575px) {

    .mn-repair-wheel {
        left: auto;
        right: 4%;
        top: 57%;

        width: 96px;
        height: 96px;

        box-shadow:
            0 10px 30px rgba(17,17,17,.16);
    }


    .mn-repair-wheel::before {
        inset: 5px;
    }


    .mn-repair-wheel-text {
        inset: 3px;
    }


    .mn-repair-wheel-text text {
        font-size: 10px;

        letter-spacing: 1.5px;
    }


    .mn-repair-wheel-icon {
        width: 38px;
        height: 38px;

        font-size: 14px;

        box-shadow:
            0 0 0 4px #ffffff;
    }

}


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

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

    .mn-repair-wheel-text,
    .mn-repair-wheel-icon i {
        animation: none;
    }

}

/* =====================================================
   WHY CHOOSE US
   KIMONO SERVICES INSPIRED
===================================================== */

.mn-why-section {
    position: relative;
    padding: 125px 0 100px;
    background: #111111;
    color: #ffffff;
    overflow: hidden;
}


/* giant background typography */

.mn-why-section::before {
    content: "WHY";
    position: absolute;
    top: 0;
    right: -2%;

    font-size: 25vw;
    font-weight: 900;
    line-height: .8;
    letter-spacing: -.09em;

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

    pointer-events: none;
}


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

.mn-why-label {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 55px;
}


.mn-why-label span {
    color: #ffffff;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}


.mn-why-label i {
    display: block;

    width: 40px;
    height: 1px;

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


.mn-why-label small {
    color: rgba(255,255,255,.52);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
}


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

.mn-why-heading-wrap {
    position: relative;
    z-index: 3;

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

    margin-bottom: 85px;
}


.mn-why-mini {
    margin-top: 17px;

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

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 3px;

    writing-mode: vertical-rl;
    transform: rotate(180deg);
}


.mn-why-heading {
    width: 90%;

    margin: 0;

    color: #ffffff;

    font-size: clamp(60px, 8.4vw, 150px);
    font-weight: 400;

    line-height: .82;

    letter-spacing: -.065em;

    text-transform: uppercase;
}


.mn-why-heading span {
    display: block;

    margin-left: 13%;

    color: var(--mn-red);

    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;

    letter-spacing: -.07em;
}


/* =====================================================
   WHY LIST
===================================================== */

.mn-why-list {
    position: relative;
    z-index: 4;

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


/* each row */

.mn-why-item {
    position: relative;

    display: grid;

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

    align-items: center;

    min-height: 185px;

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

    overflow: hidden;

    transition:
        padding .45s cubic-bezier(.2,.8,.2,1),
        color .45s ease;
}


/* red reveal */

.mn-why-item::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 0;

    background: var(--mn-red);

    transition:
        height .45s cubic-bezier(.2,.8,.2,1);

    z-index: -1;
}


.mn-why-item:hover::before {
    height: 100%;
}


.mn-why-item:hover {
    padding-left: 25px;
}


/* =====================================================
   NUMBER
===================================================== */

.mn-why-number {
    color: rgba(255,255,255,.38);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;

    transition:
        color .4s ease;
}


.mn-why-item:hover .mn-why-number {
    color: rgba(255,255,255,.8);
}





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

.mn-why-content {
    display: grid;

    grid-template-columns:
        minmax(250px, .8fr)
        minmax(280px, 1fr);

    align-items: center;

    gap: 50px;

    padding-right: 50px;
}


.mn-why-content h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(27px, 2.5vw, 43px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: -.035em;
}


.mn-why-content p {
    max-width: 490px;

    margin: 0;

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

    font-size: 12px;

    line-height: 1.8;

    transition:
        color .4s ease;
}


.mn-why-item:hover .mn-why-content p {
    color:
        rgba(255,255,255,.88);
}


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

.mn-why-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;

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

    border-radius: 50%;

    font-size: 17px;

    transition:
        background .4s ease,
        color .4s ease,
        transform .4s ease;
}


.mn-why-item:hover .mn-why-arrow {
    background: #ffffff;

    color: #111111;

    transform:
        rotate(45deg);
}


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

.mn-why-bottom {
    position: relative;
    z-index: 5;

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

    gap: 30px;

    margin-top: 65px;
}


.mn-why-bottom > p {
    margin: 0;

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

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 3px;
}


/* call */

.mn-why-call {
    display: inline-flex;
    align-items: center;

    gap: 30px;

    color: #ffffff;

    text-decoration: none;
}


.mn-why-call > span {
    display: flex;
    flex-direction: column;

    text-align: right;
}


.mn-why-call small {
    margin-bottom: 7px;

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

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 2.5px;
}


.mn-why-call strong {
    color: #ffffff;

    font-size: 25px;

    font-weight: 500;

    letter-spacing: .5px;
}


.mn-why-call > i {
    width: 58px;
    height: 58px;

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

    border-radius: 50%;

    background: var(--mn-red);

    color: #ffffff;

    transition:
        transform .4s ease,
        background .4s ease;
}


.mn-why-call:hover {
    color: #ffffff;
}


.mn-why-call:hover > i {
    transform:
        rotate(-35deg);

    background:
        var(--mn-red-dark);
}


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

@media (max-width: 991px) {

    .mn-why-section {
        padding:
            90px 0 75px;
    }


    .mn-why-heading-wrap {
        margin-bottom:
            60px;
    }


    .mn-why-heading {
        width: 94%;

        font-size:
            clamp(58px, 10vw, 95px);
    }


    .mn-why-item {
        grid-template-columns:
            55px
            85px
            1fr
            60px;

        min-height:
            170px;
    }


    .mn-why-icon {
        width:
            58px;

        height:
            58px;
    }


    .mn-why-content {
        grid-template-columns:
            1fr;

        gap:
            15px;

        padding:
            30px 30px 30px 0;
    }


    .mn-why-content p {
        max-width:
            560px;
    }

}


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

@media (max-width: 575px) {

    .mn-why-section {
        padding:
            70px 0 55px;
    }


    .mn-why-section::before {
        font-size:
            55vw;

        top:
            3%;
    }


    .mn-why-label {
        margin-bottom:
            32px;
    }


    .mn-why-label i {
        width:
            27px;
    }


    .mn-why-label small {
        font-size:
            7px;

        letter-spacing:
            2px;
    }


    /* heading */

    .mn-why-heading-wrap {
        display:
            block;

        margin-bottom:
            45px;
    }


    .mn-why-mini {
        display:
            none;
    }


    .mn-why-heading {
        width:
            100%;

        font-size:
            clamp(49px, 14vw, 68px);

        line-height:
            .86;
    }


    .mn-why-heading span {
        margin-left:
            8%;

        margin-top:
            5px;
    }


    /* rows */

    .mn-why-item {
        display:
            grid;

        grid-template-columns:
            45px
            1fr
            43px;

        min-height:
            auto;

        padding:
            27px 0;
    }


    .mn-why-item:hover {
        padding-left:
            10px;

        padding-right:
            8px;
    }


    .mn-why-number {
        grid-column:
            1;

        grid-row:
            1;

        align-self:
            start;

        padding-top:
            5px;
    }


    .mn-why-icon {
        grid-column:
            2;

        grid-row:
            1;

        width:
            50px;

        height:
            50px;

        margin-bottom:
            20px;

        font-size:
            16px;
    }


    .mn-why-content {
        grid-column:
            1 / 4;

        grid-row:
            2;

        display:
            block;

        padding:
            0 10px 0 45px;
    }


    .mn-why-content h3 {
        margin-bottom:
            13px;

        font-size:
            27px;
    }


    .mn-why-content p {
        font-size:
            11.5px;

        line-height:
            1.75;
    }


    .mn-why-arrow {
        grid-column:
            3;

        grid-row:
            1;

        width:
            41px;

        height:
            41px;

        font-size:
            13px;
    }


    /* bottom */

    .mn-why-bottom {
        flex-direction:
            column;

        align-items:
            flex-start;

        margin-top:
            42px;
    }


    .mn-why-bottom > p {
        max-width:
            310px;

        line-height:
            1.8;

        letter-spacing:
            2px;
    }


    .mn-why-call {
        width:
            100%;

        justify-content:
            space-between;

        margin-top:
            5px;
    }


    .mn-why-call > span {
        text-align:
            left;
    }


    .mn-why-call strong {
        font-size:
            23px;
    }


    .mn-why-call > i {
        width:
            52px;

        height:
            52px;
    }

}


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

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

    .mn-why-item,
    .mn-why-item::before,
    .mn-why-icon,
    .mn-why-arrow,
    .mn-why-call > i {
        transition: none;
    }

}

/* ==========================================
   ROTATING GEAR
========================================== */

.mn-why-gear {
    position: absolute;

    top: 105px;
    right: 5%;

    width: 115px;
    height: 115px;

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

    z-index: 3;

    color: var(--mn-red);

    pointer-events: none;
}


/* gear */

.mn-why-gear i {
    display: block;

    font-size: 105px;

    line-height: 1;

    animation:
        mnWhyGearSpin 12s linear infinite;

    filter:
        drop-shadow(0 12px 25px rgba(0,0,0,.18));
}


/* small center circle */

.mn-why-gear::after {
    content: "";

    position: absolute;

    width: 23px;
    height: 23px;

    border-radius: 50%;

    background: #111111;

    border: 2px solid rgba(255,255,255,.6);

    z-index: 2;
}


@keyframes mnWhyGearSpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


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

@media (max-width: 991px) {

    .mn-why-gear {
        top: 90px;
        right: 4%;

        width: 90px;
        height: 90px;
    }

    .mn-why-gear i {
        font-size: 82px;
    }

}


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

@media (max-width: 575px) {

    .mn-why-gear {
        top: 62px;
        right: -12px;

        width: 75px;
        height: 75px;

        opacity: .85;
    }

    .mn-why-gear i {
        font-size: 68px;
    }

    .mn-why-gear::after {
        width: 15px;
        height: 15px;
    }

}


/* accessibility */

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

    .mn-why-gear i {
        animation: none;
    }

}


/* =====================================================
   GARAGE DOOR SYSTEM
   EDITORIAL / KIMONO INSPIRED
===================================================== */

.mn-system-section {
    position: relative;

    padding: 125px 0 135px;

    background: #faf9f6;

    color: #111111;

    overflow: hidden;
}


/* =====================================================
   GIANT BACKGROUND WORD
===================================================== */

.mn-system-bg-text {
    position: absolute;

    left: -2%;
    bottom: -3%;

    font-size: 20vw;
    font-weight: 900;

    line-height: .75;

    letter-spacing: -.08em;

    color: rgba(17,17,17,.028);

    pointer-events: none;

    white-space: nowrap;
}


/* =====================================================
   SMALL LABEL
===================================================== */

.mn-system-label {
    position: relative;

    z-index: 5;

    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 50px;
}


.mn-system-label span {
    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;
}


.mn-system-label i {
    display: block;

    width: 40px;
    height: 1px;

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


.mn-system-label small {
    color: #77736e;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 3px;
}


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

.mn-system-heading-row {
    position: relative;

    z-index: 5;

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

    gap: 40px;

    margin-bottom: 85px;
}


.mn-system-heading {
    max-width: 1120px;

    margin: 0;

    font-size: 4.5rem;

    font-weight: 400;

    line-height: .86;

    letter-spacing: -.065em;

    text-transform: uppercase;
}


.mn-system-heading span {
    color: var(--mn-red);

    font-family: Georgia, "Times New Roman", serif;

    font-weight: 400;
    font-style: italic;

    text-transform: none;
}


.mn-system-side-note {
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;

    padding-bottom: 10px;

    text-align: right;
}


.mn-system-side-note span {
    font-size: 10px;
    font-weight: 800;

    letter-spacing: 3px;
}


.mn-system-side-note small {
    margin-top: 7px;

    color: #88847f;

    font-size: 7px;

    letter-spacing: 2px;
}


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

.mn-system-layout {
    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        minmax(250px, .75fr)
        minmax(420px, 1.35fr)
        minmax(280px, .9fr);

    align-items: center;

    gap: 0;
}


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

.mn-system-intro {
    position: relative;

    z-index: 5;

    align-self: start;

    margin-top: 80px;

    padding:
        45px 55px 45px 0;
}


.mn-system-number {
    display: block;

    margin-bottom: 35px;

    color: var(--mn-red);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;
}


.mn-system-intro p {
    margin: 0;

    color: #625f5a;

    font-size: 13px;

    line-height: 1.95;
}


.mn-system-mini-line {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 38px;

    color: #111111;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 2px;
}


.mn-system-mini-line span {
    display: block;

    width: 30px;
    height: 1px;

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


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

.mn-system-visual {
    position: relative;

    min-height: 670px;
}


.mn-system-image {
    position: absolute;

    top: 0;
    left: 5%;

    width: 90%;
    height: 650px;

    overflow: hidden;
}


.mn-system-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(17,17,17,.18)
        );

    pointer-events: none;
}


.mn-system-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1.2s cubic-bezier(.2,.8,.2,1);
}


.mn-system-image:hover img {
    transform: scale(1.045);
}


/* =====================================================
   IMAGE BLACK LABEL
===================================================== */

.mn-system-image-label {
    position: absolute;

    left: -2%;
    bottom: 40px;

    z-index: 6;

    min-width: 155px;

    padding: 24px 25px;

    background: #111111;

    color: #ffffff;
}


.mn-system-image-label span {
    display: block;

    margin-bottom: 9px;

    color: var(--mn-red);

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 2.5px;
}


.mn-system-image-label strong {
    display: block;

    font-size: 23px;
    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -.02em;
}


/* =====================================================
   ROTATING WHEEL
===================================================== */

.mn-system-wheel {
    position: absolute;

    top: -55px;
    right: -45px;

    z-index: 10;

    width: 145px;
    height: 145px;

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

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 20px 55px rgba(17,17,17,.14);
}


.mn-system-wheel::before {
    content: "";

    position: absolute;

    inset: 9px;

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

    border-radius: 50%;
}


/* text */

.mn-system-wheel-text {
    position: absolute;

    inset: 5px;

    animation:
        mnSystemWheelSpin
        16s linear infinite;
}


.mn-system-wheel-text svg {
    width: 100%;
    height: 100%;

    overflow: visible;
}


.mn-system-wheel-text text {
    fill: #111111;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.8px;
}


/* center gear */

.mn-system-wheel-icon {
    position: relative;

    z-index: 4;

    width: 56px;
    height: 56px;

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

    border-radius: 50%;

    background: var(--mn-red);

    color: #ffffff;

    font-size: 24px;

    box-shadow:
        0 0 0 6px #ffffff;
}


.mn-system-wheel-icon i {
    animation:
        mnSystemGearSpin
        7s linear infinite;
}


@keyframes mnSystemWheelSpin {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes mnSystemGearSpin {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(-360deg);
    }

}


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

.mn-system-details {
    position: relative;

    z-index: 7;

    margin-left: -30px;

    padding: 55px 48px;

    background: #111111;

    color: #ffffff;

    box-shadow:
        0 25px 65px rgba(17,17,17,.12);
}


.mn-system-details .mn-system-number {
    color: var(--mn-red);

    margin-bottom: 30px;
}


.mn-system-details h3 {
    margin: 0 0 30px;

    color: #ffffff;

    font-size: clamp(31px, 3vw, 52px);

    font-weight: 400;

    line-height: 1.03;

    letter-spacing: -.04em;
}


.mn-system-details p {
    margin: 0;

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

    font-size: 12px;

    line-height: 1.9;
}


/* =====================================================
   PART LABELS
===================================================== */

.mn-system-parts {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 38px;
}


.mn-system-parts span {
    display: inline-flex;
    align-items: center;

    min-height: 31px;

    padding: 0 12px;

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

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

    font-size: 6.5px;
    font-weight: 700;

    letter-spacing: 1.5px;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease;
}


.mn-system-parts span:hover {
    background: var(--mn-red);

    border-color: var(--mn-red);

    color: #ffffff;
}


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

@media (max-width: 991px) {

    .mn-system-section {
        padding: 90px 0;
    }


    .mn-system-heading-row {
        margin-bottom: 60px;
    }


    .mn-system-heading {
        font-size:
            clamp(55px, 9vw, 90px);
    }


    .mn-system-side-note {
        display: none;
    }


    .mn-system-layout {
        grid-template-columns:
            1fr 1.25fr;
    }


    .mn-system-intro {
        padding-right: 40px;
    }


    .mn-system-visual {
        min-height: 600px;
    }


    .mn-system-image {
        height: 580px;
    }


    .mn-system-details {
        grid-column: 1 / 3;

        width: 60%;

        margin:
            -75px 0 0 auto;

        padding:
            45px;

        z-index: 12;
    }


    .mn-system-wheel {
        right: -20px;
    }

}


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

@media (max-width: 575px) {

    .mn-system-section {
        padding: 70px 0 65px;
    }


    .mn-system-bg-text {
        bottom: 1%;

        font-size: 35vw;
    }


    .mn-system-label {
        margin-bottom: 32px;
    }


    .mn-system-label i {
        width: 28px;
    }


    .mn-system-label small {
        font-size: 7px;

        letter-spacing: 2px;
    }


    /* heading */

    .mn-system-heading-row {
        display: block;

        margin-bottom: 42px;
    }


    .mn-system-heading {
        font-size:
            clamp(45px, 13.2vw, 63px);

        line-height: .9;
    }


    .mn-system-heading span {
        display: block;

        margin-left: 8px;
    }


    /* layout */

    .mn-system-layout {
        display: flex;
        flex-direction: column;
    }


    /* intro */

    .mn-system-intro {
        order: 1;

        width: 100%;

        margin: 0;

        padding:
            0 0 40px;
    }


    .mn-system-number {
        margin-bottom: 20px;
    }


    .mn-system-intro p {
        font-size: 12px;

        line-height: 1.85;
    }


    /* image */

    .mn-system-visual {
        order: 2;

        width: 100%;

        min-height: 480px;
    }


    .mn-system-image {
        left: 8%;

        width: 92%;
        height: 430px;
    }


    .mn-system-image-label {
        left: 0;
        bottom: 20px;

        min-width: 130px;

        padding: 18px;
    }


    .mn-system-image-label strong {
        font-size: 19px;
    }


    /* wheel */

    .mn-system-wheel {
        top: -34px;
        right: -5px;

        width: 105px;
        height: 105px;
    }


    .mn-system-wheel::before {
        inset: 6px;
    }


    .mn-system-wheel-text {
        inset: 3px;
    }


    .mn-system-wheel-text text {
        font-size: 10px;

        letter-spacing: 1.4px;
    }


    .mn-system-wheel-icon {
        width: 42px;
        height: 42px;

        font-size: 17px;

        box-shadow:
            0 0 0 4px #ffffff;
    }


    /* details */

    .mn-system-details {
        order: 3;

        width: 94%;

        margin:
            -35px 0 0;

        align-self: flex-end;

        padding:
            34px 28px;
    }


    .mn-system-details h3 {
        font-size: 32px;
    }


    .mn-system-details p {
        font-size: 11.5px;

        line-height: 1.8;
    }


    .mn-system-parts {
        margin-top: 27px;
    }

}


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

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

    .mn-system-wheel-text,
    .mn-system-wheel-icon i {
        animation: none;
    }

}

/* =====================================================
   COUPON + FORM SECTION
===================================================== */

.mn-offer-form-section {
    position: relative;

    padding: 125px 0;

    background: #f8f7f3;

    color: #111111;

    overflow: hidden;
}


/* Background Word */

.mn-offer-bg-word {
    position: absolute;

    left: -2%;
    bottom: -4%;

    color: rgba(17,17,17,.025);

    font-size: 25vw;
    font-weight: 900;

    line-height: .7;

    letter-spacing: -.09em;

    pointer-events: none;
}


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

.mn-offer-label {
    position: relative;

    z-index: 5;

    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 50px;
}


.mn-offer-label > span {
    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;
}


.mn-offer-label > i {
    display: block;

    width: 40px;
    height: 1px;

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


.mn-offer-label small {
    color: #77736e;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 3px;
}


/* =====================================================
   MAIN ROW
===================================================== */

.mn-offer-row {
    position: relative;

    z-index: 5;

    box-shadow:
        0 30px 80px rgba(17,17,17,.10);
}


/* =====================================================
   CLICKABLE COUPON
===================================================== */

.mn-coupon {
    position: relative;

    height: 100%;
    min-height: 680px;

    display: flex;
    flex-direction: column;

    padding: 42px 45px 35px;

    background: var(--mn-red);

    color: #ffffff;

    text-decoration: none;

    overflow: hidden;

    cursor: pointer;

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


.mn-coupon:hover,
.mn-coupon:focus {
    color: #ffffff;
    text-decoration: none;
}


.mn-coupon:hover {
    transform: translateY(-5px);

    box-shadow:
        0 25px 70px rgba(17,17,17,.20);
}


.mn-coupon:focus-visible {
    outline: 3px solid #111111;
    outline-offset: 4px;
}


/* Giant 25 */

.mn-coupon::before {
    content: "25";

    position: absolute;

    right: -35px;
    bottom: 15px;

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

    font-size: 260px;
    font-weight: 900;

    line-height: .7;

    letter-spacing: -.09em;

    pointer-events: none;
}


/* dashed edge */

.mn-coupon::after {
    content: "";

    position: absolute;

    top: 25px;
    right: 0;
    bottom: 25px;

    border-right:
        1px dashed rgba(255,255,255,.50);
}


/* =====================================================
   COUPON TOP
===================================================== */

.mn-coupon-top {
    position: relative;

    z-index: 3;

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

    padding-bottom: 25px;

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


.mn-coupon-mini {
    font-size: 8px;
    font-weight: 800;

    letter-spacing: 2.5px;
}


.mn-coupon-scissors {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    font-size: 13px;

    transition:
        transform .4s ease;
}


.mn-coupon:hover .mn-coupon-scissors {
    transform: rotate(-18deg);
}


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

.mn-coupon-content {
    position: relative;

    z-index: 3;

    flex: 1;

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


.mn-coupon-special {
    display: block;

    margin-bottom: 12px;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 3px;
}


/* Price */

.mn-coupon-price {
    display: flex;
    align-items: flex-end;

    gap: 14px;
}


.mn-coupon-price strong {
    position: relative;

    color: #ffffff;

    font-size:
        clamp(105px, 10vw, 175px);

    font-weight: 900;

    line-height: .78;

    letter-spacing: -.08em;
}


.mn-coupon-price strong sup {
    position: relative;

    top: -37px;

    margin-right: 3px;

    font-size: .28em;

    font-weight: 600;
}


.mn-coupon-price > span {
    margin-bottom: 5px;

    color: #111111;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 43px;
    font-weight: 700;
    font-style: italic;

    line-height: 1;
}


/* Coupon Title */

.mn-coupon h2 {
    max-width: 430px;

    margin: 28px 0 0;

    color: #ffffff;

    font-size:
        clamp(31px, 3.1vw, 50px);

    font-weight: 400;

    line-height: .98;

    letter-spacing: -.04em;
}


.mn-coupon h2 em {
    display: block;

    color: #111111;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 700;
}


/* Divider */

.mn-coupon-divider {
    display: flex;
    align-items: center;

    gap: 12px;

    margin: 30px 0 22px;
}


.mn-coupon-divider span {
    height: 1px;

    flex: 1;

    background:
        rgba(255,255,255,.32);
}


.mn-coupon-divider i {
    font-size: 8px;
}


/* Coupon Description */

.mn-coupon-content > p {
    max-width: 350px;

    margin: 0 0 28px;

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

    font-size: 11px;

    line-height: 1.75;
}


/* =====================================================
   COUPON PHONE DISPLAY
===================================================== */

.mn-coupon-phone {
    display: flex;
    align-items: center;

    gap: 13px;

    width: max-content;

    color: #ffffff;
}


.mn-coupon-phone-icon {
    width: 46px;
    height: 46px;

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

    flex: 0 0 46px;

    border-radius: 50%;

    background: #111111;

    color: #ffffff;

    transition:
        transform .35s ease;
}


.mn-coupon-phone > span:last-child {
    display: flex;
    flex-direction: column;
}


.mn-coupon-phone small {
    margin-bottom: 5px;

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

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 2px;
}


.mn-coupon-phone strong {
    color: #ffffff;

    font-size: 22px;
    font-weight: 700;
}


.mn-coupon:hover .mn-coupon-phone-icon {
    transform:
        rotate(-12deg)
        scale(1.08);
}


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

.mn-coupon-bottom {
    position: relative;

    z-index: 4;

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

    gap: 15px;

    padding-top: 23px;

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

    font-size: 6.5px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


/* Ticket Cutouts */

.mn-ticket-cut {
    position: absolute;

    right: -13px;

    width: 26px;
    height: 26px;

    border-radius: 50%;

    background: #f8f7f3;

    z-index: 5;
}


.mn-ticket-cut-one {
    top: -13px;
}


.mn-ticket-cut-two {
    bottom: -13px;
}


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

.mn-form-panel {
    position: relative;

    height: 100%;
    min-height: 680px;

    padding: 58px 65px;

    background: #111111;

    color: #ffffff;

    overflow: hidden;
}


.mn-form-panel::before {
    content: "";

    position: absolute;

    top: 0;
    right: 12%;

    width: 1px;
    height: 100%;

    background:
        rgba(255,255,255,.045);
}


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

.mn-form-heading {
    position: relative;

    z-index: 3;

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

    gap: 30px;

    margin-bottom: 45px;
}


.mn-form-heading > div:first-child > span {
    display: block;

    margin-bottom: 12px;

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

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 3px;
}


.mn-form-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(47px, 5vw, 80px);

    font-weight: 400;

    line-height: .82;

    letter-spacing: -.055em;
}


.mn-form-heading h2 em {
    display: block;

    margin-left: 40px;

    color: var(--mn-red);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 400;
}


/* =====================================================
   ROTATING GEAR
===================================================== */

.mn-form-gear {
    width: 75px;
    height: 75px;

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

    flex: 0 0 75px;

    color: var(--mn-red);
}


.mn-form-gear i {
    font-size: 68px;

    animation:
        mnFormGear
        12s linear infinite;
}


@keyframes mnFormGear {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


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

.mn-form-panel form,
.mn-form-panel fieldset {
    position: relative;

    z-index: 3;

    margin: 0;
    padding: 0;

    border: 0;
}


.mn-form-panel .cc-fcf-grid {
    display: grid;

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

    gap: 18px;
}


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

.mn-form-panel .cc-fcf-field {
    position: relative;
}


.mn-form-panel .cc-fcf-field-wide {
    grid-column: 1 / -1;
}


.mn-form-panel .cc-fcf-field > i {
    position: absolute;

    left: 19px;
    top: 50%;

    transform: translateY(-50%);

    z-index: 3;

    color: var(--mn-red);

    font-size: 13px;
}


.mn-form-panel input,
.mn-form-panel textarea {
    width: 100%;

    outline: none;

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

    border-radius: 0;

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

    color: #ffffff;

    font-family: inherit;

    font-size: 11px;

    transition:
        border-color .3s ease,
        background .3s ease;
}


.mn-form-panel input {
    height: 60px;

    padding:
        0 20px 0 48px;
}


.mn-form-panel textarea {
    min-height: 110px;

    padding:
        19px 20px 19px 48px;

    resize: vertical;
}


.mn-form-panel .cc-fcf-message > i {
    top: 23px;

    transform: none;
}


.mn-form-panel input::placeholder,
.mn-form-panel textarea::placeholder {
    color:
        rgba(255,255,255,.42);
}


.mn-form-panel input:focus,
.mn-form-panel textarea:focus {
    border-color:
        var(--mn-red);

    background:
        rgba(255,255,255,.065);
}


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

.mn-form-submit {
    width: 100%;
    height: 62px;

    margin-top: 22px;

    padding:
        0 8px 0 25px;

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

    border: 0;

    background:
        var(--mn-red);

    color: #ffffff;

    cursor: pointer;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;

    transition:
        background .35s ease;
}


.mn-form-submit > i {
    width: 47px;
    height: 47px;

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

    background: #ffffff;

    color: #111111;

    border-radius: 50%;

    transition:
        transform .4s ease;
}


.mn-form-submit:hover {
    background:
        var(--mn-red-dark);
}


.mn-form-submit:hover > i {
    transform:
        rotate(-35deg);
}


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

@media (max-width: 991px) {

    .mn-offer-form-section {
        padding: 90px 0;
    }


    .mn-coupon,
    .mn-form-panel {
        min-height: auto;
    }


    .mn-coupon {
        padding: 50px;
    }


    .mn-form-panel {
        padding:
            55px 50px;
    }


    .mn-ticket-cut {
        display: none;
    }

}


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

@media (max-width: 575px) {

    .mn-offer-form-section {
        padding:
            70px 0 60px;
    }


    .mn-offer-bg-word {
        font-size: 48vw;
    }


    .mn-offer-label {
        margin-bottom: 30px;
    }


    .mn-offer-label > i {
        width: 27px;
    }


    .mn-offer-label small {
        font-size: 6.5px;

        letter-spacing: 1.6px;
    }


    /* Coupon */

    .mn-coupon {
        min-height: 580px;

        padding:
            30px 24px 27px;
    }


    .mn-coupon::after {
        display: none;
    }


    .mn-coupon-mini {
        font-size: 6.5px;

        letter-spacing: 1.6px;
    }


    .mn-coupon-price strong {
        font-size: 115px;
    }


    .mn-coupon-price strong sup {
        top: -29px;
    }


    .mn-coupon-price > span {
        font-size: 35px;
    }


    .mn-coupon h2 {
        font-size: 34px;
    }


    .mn-coupon-phone strong {
        font-size: 21px;
    }


    .mn-coupon-bottom {
        flex-direction: column;

        gap: 7px;
    }


    /* Form */

    .mn-form-panel {
        padding:
            42px 23px 32px;
    }


    .mn-form-heading {
        margin-bottom: 35px;
    }


    .mn-form-heading h2 {
        font-size:
            clamp(44px, 13vw, 58px);
    }


    .mn-form-heading h2 em {
        margin-left: 20px;
    }


    .mn-form-gear {
        width: 55px;
        height: 55px;

        flex-basis: 55px;
    }


    .mn-form-gear i {
        font-size: 50px;
    }


    .mn-form-panel .cc-fcf-grid {
        grid-template-columns: 1fr;

        gap: 13px;
    }


    .mn-form-panel .cc-fcf-field-wide {
        grid-column: auto;
    }


    .mn-form-panel input {
        height: 57px;
    }


    .mn-form-submit {
        height: 59px;
    }

}


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

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

    .mn-form-gear i {
        animation: none;
    }

}

/* =====================================================
   COUPON CLICK HERE
===================================================== */

.mn-coupon-click {
    position: relative;

    width: 100%;
    max-width: 245px;
    height: 55px;

    margin: 0 0 28px;

    padding: 0 8px 0 21px;

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

    background: #111111;

    color: #ffffff;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 2.4px;

    overflow: hidden;

    transition:
        background .35s ease,
        transform .35s ease;
}


/* Arrow Circle */

.mn-coupon-click > i {
    position: relative;
    z-index: 2;

    width: 40px;
    height: 40px;

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

    flex: 0 0 40px;

    border-radius: 50%;

    background: #ffffff;

    color: var(--mn-red);

    font-size: 12px;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;
}


/* little red animation */

.mn-coupon-click::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 0;
    height: 100%;

    background: #ffffff;

    transition:
        width .4s cubic-bezier(.2,.8,.2,1);
}


.mn-coupon-click > span {
    position: relative;
    z-index: 2;

    transition:
        color .35s ease;
}


/* Hover happens when whole coupon is hovered */

.mn-coupon:hover .mn-coupon-click::before {
    width: 100%;
}


.mn-coupon:hover .mn-coupon-click > span {
    color: #111111;
}


.mn-coupon:hover .mn-coupon-click > i {
    background: var(--mn-red);
    color: #ffffff;

    transform: rotate(45deg);
}


/* Mobile */

@media (max-width: 575px) {

    .mn-coupon-click {
        max-width: 220px;
        height: 52px;

        margin-bottom: 25px;

        font-size: 7.5px;
    }

    .mn-coupon-click > i {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }

}


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

.mn-gallery-section {
    padding: 110px 0;

    background: #faf9f6;

    color: #111111;
}


.mn-gallery-head {
    margin-bottom: 45px;
}


/* label */

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

    gap: 12px;

    margin-bottom: 25px;
}


.mn-gallery-label span {
    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;
}


.mn-gallery-label i {
    width: 35px;
    height: 1px;

    display: block;

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


.mn-gallery-label small {
    color: #77736e;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 3px;
}


/* heading */

.mn-gallery-head h2 {
    margin: 0;

    font-size: clamp(55px, 7vw, 110px);

    font-weight: 400;

    line-height: .9;

    letter-spacing: -.055em;
}


.mn-gallery-head h2 span {
    color: var(--mn-red);

    font-family: Georgia, "Times New Roman", serif;

    font-style: italic;
    font-weight: 400;
}


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

.mn-gallery-item {
    position: relative;

    height: 360px;

    overflow: hidden;

    background: #111111;

    cursor: pointer;
}


.mn-gallery-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.2,.8,.2,1),
        opacity .5s ease;
}


.mn-gallery-item:hover img {
    transform: scale(1.07);

    opacity: .78;
}


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

.mn-gallery-overlay {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: flex-end;

    padding: 24px;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(17,17,17,.65)
        );

    opacity: 0;

    transition:
        opacity .4s ease;
}


.mn-gallery-item:hover .mn-gallery-overlay {
    opacity: 1;
}


.mn-gallery-overlay span {
    color: #ffffff;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2.5px;
}


/* small red line */

.mn-gallery-overlay span::before {
    content: "";

    display: inline-block;

    width: 25px;
    height: 1px;

    margin-right: 10px;
    margin-bottom: 3px;

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


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

@media (max-width: 991px) {

    .mn-gallery-section {
        padding: 85px 0;
    }


    .mn-gallery-item {
        height: 320px;
    }

}


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

@media (max-width: 575px) {

    .mn-gallery-section {
        padding: 65px 0;
    }


    .mn-gallery-head {
        margin-bottom: 30px;
    }


    .mn-gallery-head h2 {
        font-size: 50px;
    }


    .mn-gallery-item {
        height: 270px;
    }


    .mn-gallery-overlay {
        opacity: 1;

        padding: 18px;

        background:
            linear-gradient(
                180deg,
                transparent 55%,
                rgba(17,17,17,.62)
            );
    }


    .mn-gallery-overlay span {
        font-size: 8px;
    }

}


/* =====================================================
   RESIDENTIAL GARAGE DOOR SECTION
===================================================== */

.mn-residential-section {
    position: relative;

    padding: 120px 0;

    background: #ffffff;

    color: #111111;

    overflow: hidden;
}


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

.mn-residential-label {
    position: relative;

    z-index: 5;

    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 55px;
}


.mn-residential-label span {
    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;
}


.mn-residential-label i {
    display: block;

    width: 38px;
    height: 1px;

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


.mn-residential-label small {
    color: #77736e;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 3px;
}


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

.mn-residential-content {
    position: relative;

    z-index: 5;

    padding-right: 35px;
}


.mn-residential-content h2 {
    margin: 0 0 35px;

    font-size: 3.5rem;

    font-weight: 400;

    line-height: .9;

    letter-spacing: -.06em;

    text-transform: uppercase;
}


.mn-residential-content h2 > span {
    display: block;

    margin-left: 7%;

    color: var(--mn-red);

    font-family: Georgia, "Times New Roman", serif;

    font-style: italic;
    font-weight: 400;

    text-transform: none;
}


.mn-residential-lead {
    max-width: 650px;

    margin: 0;

    color: #625f5a;

    font-size: 13px;

    line-height: 1.95;
}


/* =====================================================
   REPLACEMENT BLOCK
===================================================== */

.mn-replacement-block {
    position: relative;

    margin-top: 55px;

    padding:
        38px 38px 38px 42px;

    border-left:
        4px solid var(--mn-red);

    background:
        #faf9f6;
}


.mn-replacement-number {
    display: block;

    margin-bottom: 16px;

    color: var(--mn-red);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}


.mn-replacement-block h3 {
    margin: 0 0 24px;

    font-size:
        clamp(29px, 2.8vw, 46px);

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -.04em;
}


.mn-replacement-block h3 span {
    display: block;

    color: var(--mn-red);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-style: italic;
}


.mn-replacement-block p {
    margin: 0;

    color: #66625e;

    font-size: 12px;

    line-height: 1.9;
}


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

.mn-residential-call {
    position: relative;

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

    min-height: 78px;

    margin-top: 35px;

    padding:
        9px 10px 9px 12px;

    display: flex;
    align-items: center;

    gap: 14px;

    background:
        #111111;

    color:
        #ffffff;

    text-decoration: none;

    overflow: hidden;

    transition:
        transform .35s ease,
        background .35s ease;
}


.mn-residential-call::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 0;
    height: 100%;

    background: var(--mn-red);

    transition:
        width .45s cubic-bezier(.2,.8,.2,1);
}


.mn-residential-call:hover::before {
    width: 100%;
}


.mn-residential-call:hover {
    color: #ffffff;

    transform:
        translateY(-3px);
}


/* phone circle */

.mn-residential-call-icon {
    position: relative;

    z-index: 2;

    width: 56px;
    height: 56px;

    flex: 0 0 56px;

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

    border-radius: 50%;

    background: var(--mn-red);

    color: #ffffff;

    font-size: 18px;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;
}


.mn-residential-call:hover
.mn-residential-call-icon {
    background: #ffffff;

    color: var(--mn-red);

    transform: rotate(-12deg);
}


/* text */

.mn-residential-call-text {
    position: relative;

    z-index: 2;

    flex: 1;

    display: flex;
    flex-direction: column;
}


.mn-residential-call-text small {
    margin-bottom: 7px;

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

    font-size: 6.5px;
    font-weight: 700;

    letter-spacing: 2px;
}


.mn-residential-call-text strong {
    color: #ffffff;

    font-size: 26px;
    font-weight: 600;
}


/* arrow */

.mn-residential-call-arrow {
    position: relative;

    z-index: 2;

    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

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

    border-radius: 50%;

    color: #ffffff;

    transition:
        transform .4s ease,
        background .4s ease;
}


.mn-residential-call:hover
.mn-residential-call-arrow {
    background: #ffffff;

    color: #111111;

    transform: rotate(-35deg);
}


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

.mn-residential-visual {
    position: relative;

    min-height: 720px;
}


.mn-residential-image {
    position: absolute;

    top: 0;
    right: 4%;

    width: 78%;
    height: 680px;

    overflow: hidden;
}


.mn-residential-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .9s cubic-bezier(.2,.8,.2,1);
}


.mn-residential-image:hover img {
    transform: scale(1.045);
}


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

.mn-residential-tag {
    position: absolute;

    left: 0;
    bottom: 65px;

    z-index: 5;

    min-width: 190px;

    padding:
        24px 28px;

    background: #111111;

    color: #ffffff;
}


.mn-residential-tag span {
    display: block;

    margin-bottom: 9px;

    color: var(--mn-red);

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 2.5px;
}


.mn-residential-tag strong {
    display: block;

    color: #ffffff;

    font-size: 22px;
    font-weight: 400;

    line-height: 1.1;
}


/* =====================================================
   ROTATING GEAR
===================================================== */

.mn-residential-gear {
    position: absolute;

    top: 55px;
    left: 0;

    z-index: 7;

    width: 100px;
    height: 100px;

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

    color: var(--mn-red);

    background: #ffffff;

    border-radius: 50%;

    box-shadow:
        0 18px 45px rgba(17,17,17,.12);
}


.mn-residential-gear i {
    font-size: 72px;

    animation:
        mnResidentialGear
        12s linear infinite;
}


@keyframes mnResidentialGear {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =====================================================
   SIDE TEXT
===================================================== */

.mn-residential-side-text {
    position: absolute;

    right: -20px;
    top: 38%;

    transform:
        rotate(90deg)
        translateX(50%);

    transform-origin:
        right top;

    color: #8b8781;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 3.5px;
}


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

@media (max-width: 991px) {

    .mn-residential-section {
        padding:
            90px 0;
    }


    .mn-residential-content {
        padding-right: 0;
    }


    .mn-residential-content h2 {
        max-width: 780px;

        font-size:
            clamp(52px, 8vw, 80px);
    }


    .mn-residential-visual {
        min-height: 620px;

        margin-top: 45px;
    }


    .mn-residential-image {
        width: 82%;
        height: 580px;
    }

}


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

@media (max-width: 575px) {

    .mn-residential-section {
        padding:
            70px 0 60px;
    }


    .mn-residential-label {
        margin-bottom: 30px;
    }


    .mn-residential-label i {
        width: 27px;
    }


    .mn-residential-label small {
        font-size: 6.5px;

        letter-spacing: 1.8px;
    }


    .mn-residential-content h2 {
        font-size:
            clamp(42px, 12vw, 58px);

        line-height: .94;
    }


    .mn-residential-content h2 > span {
        margin-left: 4%;
    }


    .mn-residential-lead {
        font-size: 12px;

        line-height: 1.85;
    }


    .mn-replacement-block {
        margin-top: 38px;

        padding:
            28px 22px 28px 25px;
    }


    .mn-replacement-block h3 {
        font-size: 29px;
    }


    .mn-replacement-block p {
        font-size: 11.5px;
    }


    /* Call Button */

    .mn-residential-call {
        min-height: 72px;

        margin-top: 28px;

        gap: 10px;
    }


    .mn-residential-call-icon {
        width: 48px;
        height: 48px;

        flex-basis: 48px;

        font-size: 16px;
    }


    .mn-residential-call-text small {
        font-size: 5.5px;

        letter-spacing: 1.3px;
    }


    .mn-residential-call-text strong {
        font-size: 21px;
    }


    .mn-residential-call-arrow {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }


    /* Image */

    .mn-residential-visual {
        min-height: 480px;

        margin-top: 45px;
    }


    .mn-residential-image {
        top: 0;
        right: 0;

        width: 88%;
        height: 440px;
    }


    .mn-residential-tag {
        left: 0;
        bottom: 15px;

        min-width: 155px;

        padding:
            18px 20px;
    }


    .mn-residential-tag strong {
        font-size: 18px;
    }


    .mn-residential-gear {
        top: -30px;
        left: 2%;

        width: 75px;
        height: 75px;
    }


    .mn-residential-gear i {
        font-size: 54px;
    }


    .mn-residential-side-text {
        display: none;
    }

}


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

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

    .mn-residential-gear i {
        animation: none;
    }

}


/* ======================================================
   LOCATION / MAP SECTION
====================================================== */

.mn-location-section {
    position: relative;
    padding: 115px 0;
    background: #faf9f6;
    color: #111;
    overflow: hidden;
}


/* HEADER */

.mn-location-head {
    margin-bottom: 55px;
}

.mn-location-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.mn-location-label span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.mn-location-label i {
    width: 38px;
    height: 1px;
    display: block;
    background: var(--mn-red);
}

.mn-location-label small {
    color: #77736e;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 3px;
}

.mn-location-head h2 {
    margin: 0;
    font-size: clamp(55px, 6.6vw, 108px);
    line-height: .88;
    font-weight: 400;
    letter-spacing: -.06em;
}

.mn-location-head h2 span {
    display: block;
    margin-left: 7%;
    color: var(--mn-red);
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    text-transform: none;
}

.mn-location-head p {
    max-width: 380px;
    margin: 0 0 8px;
    color: #69655f;
    font-size: 12px;
    line-height: 1.9;
}


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

.mn-location-grid {
    position: relative;
    background: #111;
}

.mn-map-wrap {
    position: relative;
    height: 570px;
    overflow: hidden;
}

.mn-map-wrap iframe {
    display: block;
    width: 100%;
    height: 100%;
    filter: grayscale(1) contrast(.95);
}

.mn-map-number {
    position: absolute;
    left: 25px;
    bottom: 25px;
    padding: 12px 18px;
    background: var(--mn-red);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 3px;
}


/* ======================================================
   ADDRESS SIDE
====================================================== */

.mn-location-info {
    position: relative;
    height: 100%;
    min-height: 570px;
    padding: 70px 55px;
    background: #111;
    color: #fff;
    overflow: hidden;
}

.mn-location-info::after {
    content: "TX";
    position: absolute;
    right: -25px;
    bottom: -50px;
    color: rgba(255,255,255,.035);
    font-size: 240px;
    font-weight: 900;
    line-height: 1;
}

.mn-location-icon {
    width: 75px;
    height: 75px;
    margin-bottom: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mn-red);
    color: #fff;
    font-size: 26px;
}

.mn-location-small {
    display: block;
    margin-bottom: 13px;
    color: var(--mn-red);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 3px;
}

.mn-location-info h3 {
    position: relative;
    z-index: 2;
    margin: 0 0 45px;
    font-size: clamp(37px, 3.4vw, 57px);
    line-height: .98;
    font-weight: 400;
    letter-spacing: -.045em;
}

.mn-location-info h3 em {
    display: block;
    color: var(--mn-red);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}


/* ADDRESS */

.mn-address {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 18px;
    padding: 25px 0;
    border-top: 1px solid rgba(255,255,255,.15);
    border-bottom: 1px solid rgba(255,255,255,.15);
}

.mn-address > i {
    margin-top: 4px;
    color: var(--mn-red);
    font-size: 19px;
}

.mn-address small {
    display: block;
    margin-bottom: 9px;
    color: rgba(255,255,255,.45);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 2px;
}

.mn-address strong {
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.55;
}


/* CALL */

.mn-location-call {
    position: relative;
    z-index: 3;
    margin-top: 32px;
    padding: 17px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--mn-red);
    color: #fff;
    text-decoration: none;
    transition: .35s ease;
}

.mn-location-call:hover {
    background: #fff;
    color: #111;
    transform: translateY(-3px);
}

.mn-location-call span {
    display: flex;
    flex-direction: column;
}

.mn-location-call small {
    margin-bottom: 5px;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 2px;
}

.mn-location-call strong {
    font-size: 23px;
    font-weight: 600;
}

.mn-location-call > i {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 50%;
}


/* ======================================================
   SERVICE AREA
====================================================== */

.mn-service-area {
    margin-top: 25px;
    border: 1px solid rgba(17,17,17,.14);
}

.mn-area-box {
    height: 100%;
    padding: 50px;
    background: #fff;
}

.mn-area-title {
    display: flex;
    gap: 25px;
    margin-bottom: 40px;
}

.mn-area-title > span {
    color: var(--mn-red);
    font-size: 10px;
    font-weight: 800;
}

.mn-area-title small {
    display: block;
    margin-bottom: 10px;
    color: #77736e;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.mn-area-title h3 {
    margin: 0;
    font-size: clamp(30px, 3vw, 48px);
    line-height: 1;
    font-weight: 400;
    letter-spacing: -.04em;
}

.mn-area-title h3 em {
    color: var(--mn-red);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}


/* LOCATION CHIPS */

.mn-location-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid rgba(17,17,17,.12);
}

.mn-location-list span {
    padding: 17px 10px 17px 0;
    border-bottom: 1px solid rgba(17,17,17,.12);
    color: #333;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
}

.mn-location-list span:nth-child(odd) {
    border-right: 1px solid rgba(17,17,17,.12);
}

.mn-location-list span:nth-child(even) {
    padding-left: 25px;
}

.mn-location-list i {
    margin-right: 10px;
    color: var(--mn-red);
}


/* ======================================================
   ZIP BOX
====================================================== */

.mn-zip-box {
    height: 100%;
    padding: 50px 42px;
    background: var(--mn-red);
    color: #fff;
}

.mn-zip-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 35px;
}

.mn-zip-top span {
    font-size: 10px;
    font-weight: 800;
}

.mn-zip-top small {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2px;
}

.mn-zip-box h3 {
    margin: 0 0 35px;
    font-size: 38px;
    line-height: .95;
    font-weight: 400;
}

.mn-zip-box h3 em {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
}

.mn-zip-list {
    border-top: 1px solid rgba(255,255,255,.35);
}

.mn-zip-list div {
    padding: 17px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.35);
}

.mn-zip-list span {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 2px;
}

.mn-zip-list strong {
    font-size: 26px;
    font-weight: 400;
}


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

@media (max-width: 991px) {

    .mn-location-section {
        padding: 85px 0;
    }

    .mn-map-wrap {
        height: 480px;
    }

    .mn-location-info {
        min-height: auto;
        padding: 55px 40px;
    }

    .mn-area-box,
    .mn-zip-box {
        padding: 40px;
    }

}


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

@media (max-width: 575px) {

    .mn-location-section {
        padding: 65px 0;
    }

    .mn-location-head {
        margin-bottom: 35px;
    }

    .mn-location-head h2 {
        font-size: 47px;
    }

    .mn-location-head h2 span {
        margin-left: 3%;
    }

    .mn-map-wrap {
        height: 380px;
    }

    .mn-location-info {
        padding: 42px 25px;
    }

    .mn-location-icon {
        width: 62px;
        height: 62px;
        margin-bottom: 30px;
        font-size: 22px;
    }

    .mn-location-info h3 {
        font-size: 38px;
        margin-bottom: 30px;
    }

    .mn-location-call strong {
        font-size: 22px;
    }

    .mn-area-box,
    .mn-zip-box {
        padding: 35px 24px;
    }

    .mn-area-title {
        gap: 15px;
    }

    .mn-location-list {
        grid-template-columns: 1fr;
    }

    .mn-location-list span,
    .mn-location-list span:nth-child(even) {
        padding: 16px 0;
        border-right: 0;
    }

    .mn-zip-box h3 {
        font-size: 34px;
    }

}

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

.mn-diagnosis-section {
    position: relative;
    padding: 120px 0;
    background: #faf9f6;
    color: #111111;
    overflow: hidden;
}


/* LABEL */

.mn-diagnosis-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 55px;
}

.mn-diagnosis-label span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.mn-diagnosis-label i {
    display: block;
    width: 38px;
    height: 1px;
    background: var(--mn-red);
}

.mn-diagnosis-label small {
    color: #77736e;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 3px;
}


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

.mn-diagnosis-intro {
    position: relative;
    padding-right: 45px;
}

.mn-diagnosis-intro h2 {
    margin: 0 0 35px;

    font-size: clamp(52px, 6vw, 104px);

    line-height: .9;

    font-weight: 400;

    letter-spacing: -.06em;

    text-transform: uppercase;
}

.mn-diagnosis-intro h2 span {
    display: block;

    margin-left: 7%;

    color: var(--mn-red);

    font-family: Georgia, "Times New Roman", serif;

    font-style: italic;

    font-weight: 400;

    text-transform: none;
}

.mn-diagnosis-intro p {
    max-width: 680px;

    margin: 0;

    color: #625f5a;

    font-size: 13px;

    line-height: 1.95;
}


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

.mn-diagnosis-image {
    position: relative;

    height: 620px;

    overflow: hidden;
}

.mn-diagnosis-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

.mn-diagnosis-image:hover img {
    transform: scale(1.05);
}


.mn-diagnosis-img-tag {
    position: absolute;

    left: 0;
    bottom: 0;

    min-width: 190px;

    padding: 24px 28px;

    background: #111111;

    color: #ffffff;
}

.mn-diagnosis-img-tag span {
    display: block;

    margin-bottom: 7px;

    color: var(--mn-red);

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 2.5px;
}

.mn-diagnosis-img-tag strong {
    font-size: 22px;
    font-weight: 400;
}


/* =====================================================
   WARNING ROW
===================================================== */

.mn-warning-row {
    margin-top: 95px;

    border-top: 1px solid rgba(17,17,17,.16);

    border-bottom: 1px solid rgba(17,17,17,.16);
}


.mn-warning-title {
    position: relative;

    min-height: 340px;

    padding: 55px 50px;

    background: #111111;

    color: #ffffff;
}


.mn-warning-number {
    display: block;

    margin-bottom: 35px;

    color: var(--mn-red);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;
}


.mn-warning-title h3 {
    margin: 0;

    font-size: clamp(34px, 3.7vw, 58px);

    line-height: .97;

    font-weight: 400;

    letter-spacing: -.045em;
}


.mn-warning-title h3 em {
    display: block;

    color: var(--mn-red);

    font-family: Georgia, "Times New Roman", serif;

    font-weight: 400;
}


.mn-warning-text {
    position: relative;

    min-height: 340px;

    padding: 65px;

    display: flex;

    align-items: center;

    background: #ffffff;
}

.mn-warning-text::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 5px;
    height: 100%;

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

.mn-warning-text p {
    max-width: 760px;

    margin: 0;

    color: #5f5c57;

    font-size: 13px;

    line-height: 2;
}


/* =====================================================
   NEEDS ROW
===================================================== */

.mn-needs-row {
    margin-top: 25px;

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


.mn-needs-title {
    position: relative;

    min-height: 340px;

    padding: 55px 50px;

    background: var(--mn-red);

    color: #ffffff;
}


.mn-needs-number {
    display: block;

    margin-bottom: 35px;

    color: #ffffff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


.mn-needs-title h3 {
    margin: 0;

    font-size: clamp(34px, 3.7vw, 58px);

    line-height: .97;

    font-weight: 400;

    letter-spacing: -.045em;
}


.mn-needs-title h3 em {
    display: block;

    font-family: Georgia, "Times New Roman", serif;

    font-weight: 400;
}


.mn-needs-text {
    position: relative;

    min-height: 340px;

    padding: 65px;

    display: flex;

    align-items: center;

    background: #ffffff;
}


.mn-needs-text p {
    max-width: 760px;

    margin: 0;

    color: #5f5c57;

    font-size: 13px;

    line-height: 2;
}


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

.mn-diagnosis-cta {
    margin-top: 25px;

    padding: 34px 38px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    background: #111111;

    color: #ffffff;
}


.mn-diagnosis-cta-text {
    display: flex;

    flex-direction: column;
}


.mn-diagnosis-cta-text small {
    margin-bottom: 9px;

    color: var(--mn-red);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.mn-diagnosis-cta-text strong {
    font-size: clamp(24px, 2.4vw, 38px);

    font-weight: 400;
}


/* CALL BUTTON */

.mn-diagnosis-call {
    min-width: 300px;

    padding: 13px 14px 13px 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 22px;

    background: var(--mn-red);

    color: #ffffff;

    text-decoration: none;

    transition: background .35s ease,
                color .35s ease,
                transform .35s ease;
}


.mn-diagnosis-call:hover {
    background: #ffffff;

    color: #111111;

    transform: translateY(-3px);
}


.mn-diagnosis-call span {
    display: flex;

    flex-direction: column;
}


.mn-diagnosis-call small {
    margin-bottom: 5px;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 2px;
}


.mn-diagnosis-call strong {
    font-size: 22px;

    font-weight: 600;
}


.mn-diagnosis-call > i {
    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    color: #111111;

    transition: transform .4s ease;
}


.mn-diagnosis-call:hover > i {
    transform: rotate(-35deg);

    background: var(--mn-red);

    color: #ffffff;
}


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

@media (max-width: 991px) {

    .mn-diagnosis-section {
        padding: 90px 0;
    }

    .mn-diagnosis-intro {
        padding-right: 0;
    }

    .mn-diagnosis-image {
        height: 520px;
    }

    .mn-warning-title,
    .mn-warning-text,
    .mn-needs-title,
    .mn-needs-text {
        min-height: auto;
    }

    .mn-diagnosis-cta {
        flex-direction: column;

        align-items: flex-start;
    }

}


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

@media (max-width: 575px) {

    .mn-diagnosis-section {
        padding: 65px 0;
    }


    .mn-diagnosis-label {
        margin-bottom: 30px;
    }


    .mn-diagnosis-intro h2 {
        font-size: 46px;

        line-height: .94;
    }


    .mn-diagnosis-intro h2 span {
        margin-left: 3%;
    }


    .mn-diagnosis-intro p {
        font-size: 12px;
    }


    .mn-diagnosis-image {
        height: 420px;
    }


    .mn-warning-row {
        margin-top: 55px;
    }


    .mn-warning-title,
    .mn-needs-title {
        padding: 38px 26px;
    }


    .mn-warning-title h3,
    .mn-needs-title h3 {
        font-size: 35px;
    }


    .mn-warning-text,
    .mn-needs-text {
        padding: 38px 26px;
    }


    .mn-warning-text p,
    .mn-needs-text p {
        font-size: 11.5px;

        line-height: 1.9;
    }


    .mn-diagnosis-cta {
        padding: 28px 22px;
    }


    .mn-diagnosis-call {
        width: 100%;

        min-width: 0;
    }


    .mn-diagnosis-call strong {
        font-size: 20px;
    }

}


/* =====================================================
   GARAGE DOOR PARTS
===================================================== */

.mn-parts-section {
    position: relative;
    padding: 120px 0;
    background: #111111;
    color: #ffffff;
    overflow: hidden;
}


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

.mn-parts-head {
    position: relative;
    z-index: 5;
    margin-bottom: 75px;
}


.mn-parts-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}


.mn-parts-label span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}


.mn-parts-label i {
    display: block;
    width: 38px;
    height: 1px;
    background: var(--mn-red);
}


.mn-parts-label small {
    color: rgba(255,255,255,.45);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 3px;
}


.mn-parts-head h2 {
    margin: 0;

    font-size: clamp(65px, 8vw, 135px);

    font-weight: 400;

    line-height: .82;

    letter-spacing: -.065em;
}


.mn-parts-head h2 span {
    display: block;

    margin-left: 10%;

    color: var(--mn-red);

    font-family: Georgia, "Times New Roman", serif;

    font-style: italic;

    font-weight: 400;
}


.mn-parts-head p {
    max-width: 330px;

    margin: 0 0 5px;

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

    font-size: 11px;

    line-height: 1.9;
}


/* =====================================================
   SYSTEM
===================================================== */

.mn-parts-system {
    position: relative;
    z-index: 4;
}


/* =====================================================
   PART LIST
===================================================== */

.mn-parts-list {
    position: relative;
    z-index: 8;
}


.mn-part-item {
    position: relative;

    min-height: 135px;

    padding: 27px 18px;

    display: flex;

    align-items: center;

    gap: 14px;

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

    cursor: default;

    overflow: hidden;

    transition:
        padding .4s ease,
        border-color .4s ease;
}


.mn-part-item:last-child {
    border-bottom: 1px solid rgba(255,255,255,.15);
}


/* red hover background */

.mn-part-item::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 0;

    background: var(--mn-red);

    transition:
        height .45s cubic-bezier(.2,.8,.2,1);
}


.mn-part-item:hover::before {
    height: 100%;
}


.mn-part-item:hover {
    padding-left: 27px;
    border-color: transparent;
}


/* NUMBER */

.mn-part-number {
    position: relative;
    z-index: 3;

    align-self: flex-start;

    color: var(--mn-red);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;

    transition: color .35s ease;
}


.mn-part-item:hover .mn-part-number {
    color: #ffffff;
}


/* CONTENT */

.mn-part-content {
    position: relative;

    z-index: 3;

    flex: 1;
}


.mn-part-content small {
    display: block;

    margin-bottom: 9px;

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

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 2px;

    transition: color .35s ease;
}


.mn-part-content h3 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(23px, 2vw, 31px);

    font-weight: 400;

    letter-spacing: -.035em;
}


.mn-part-item:hover .mn-part-content small {
    color: rgba(255,255,255,.7);
}


/* ICON */

.mn-part-icon {
    position: relative;

    z-index: 3;

    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: flex;

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

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

    border-radius: 50%;

    color: var(--mn-red);

    font-size: 14px;

    transition:
        background .4s ease,
        color .4s ease,
        border-color .4s ease,
        transform .4s ease;
}


.mn-part-item:hover .mn-part-icon {
    background: #ffffff;

    color: var(--mn-red);

    border-color: #ffffff;

    transform: rotate(-15deg);
}


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

.mn-parts-visual {
    position: relative;

    min-height: 650px;

    margin: 0 35px;
}


/* HUGE NUMBER */

.mn-parts-bg-number {
    position: absolute;

    left: -8%;
    top: -90px;

    z-index: 0;

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

    font-size: clamp(220px, 26vw, 440px);

    font-weight: 900;

    line-height: 1;

    pointer-events: none;
}


/* IMAGE */

.mn-parts-image {
    position: absolute;

    top: 25px;
    left: 50%;

    z-index: 2;

    width: 78%;
    height: 600px;

    transform: translateX(-50%);

    overflow: hidden;
}


.mn-parts-image::after {
    content: "";

    position: absolute;

    inset: 0;

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

    pointer-events: none;
}


.mn-parts-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .9s cubic-bezier(.2,.8,.2,1);
}


.mn-parts-image:hover img {
    transform: scale(1.05);
}


/* =====================================================
   ROTATING BADGE
===================================================== */

.mn-parts-badge {
    position: absolute;

    z-index: 8;

    top: -30px;
    right: 0;

    width: 125px;
    height: 125px;

    border-radius: 50%;

    background: #faf9f6;

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


.mn-parts-badge svg {
    position: absolute;

    inset: 5px;

    width: calc(100% - 10px);
    height: calc(100% - 10px);

    animation:
        mnPartsTextRotate 16s linear infinite;
}


.mn-parts-badge text {
    fill: #111111;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.mn-parts-badge > span {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 54px;
    height: 54px;

    display: flex;

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

    transform: translate(-50%,-50%);

    border-radius: 50%;

    background: var(--mn-red);

    color: #ffffff;
}


.mn-parts-badge > span i {
    font-size: 24px;

    animation:
        mnPartsGearRotate 10s linear infinite reverse;
}


@keyframes mnPartsTextRotate {

    to {
        transform: rotate(360deg);
    }

}


@keyframes mnPartsGearRotate {

    to {
        transform: rotate(360deg);
    }

}


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

.mn-parts-image-label {
    position: absolute;

    z-index: 6;

    left: 0;
    bottom: 0;

    padding: 25px 30px;

    background: var(--mn-red);

    color: #ffffff;
}


.mn-parts-image-label small {
    display: block;

    margin-bottom: 8px;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 2px;
}


.mn-parts-image-label strong {
    display: block;

    font-size: 23px;

    font-weight: 400;

    line-height: 1.05;
}


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

.mn-parts-bottom {
    position: relative;

    z-index: 8;

    margin-top: 70px;

    padding-top: 35px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

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


.mn-parts-bottom-text {
    max-width: 620px;

    display: flex;

    align-items: flex-start;

    gap: 25px;
}


.mn-parts-bottom-text > span {
    color: var(--mn-red);

    font-size: 8px;

    font-weight: 800;
}


.mn-parts-bottom-text p {
    margin: 0;

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

    font-size: 11px;

    line-height: 1.85;
}


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

.mn-parts-call {
    min-width: 310px;

    padding: 12px 13px 12px 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    background: var(--mn-red);

    color: #ffffff;

    text-decoration: none;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;
}


.mn-parts-call:hover {
    background: #ffffff;

    color: #111111;

    transform: translateY(-3px);
}


.mn-parts-call > span {
    display: flex;

    flex-direction: column;
}


.mn-parts-call small {
    margin-bottom: 5px;

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


.mn-parts-call strong {
    font-size: 22px;

    font-weight: 600;
}


.mn-parts-call > i {
    width: 45px;
    height: 45px;

    display: flex;

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

    border-radius: 50%;

    background: #ffffff;

    color: #111111;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;
}


.mn-parts-call:hover > i {
    background: var(--mn-red);

    color: #ffffff;

    transform: rotate(-35deg);
}


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

@media (max-width: 991px) {

    .mn-parts-section {
        padding: 90px 0;
    }


    .mn-parts-head {
        margin-bottom: 50px;
    }


    .mn-parts-head h2 {
        font-size: clamp(65px, 11vw, 100px);
    }


    .mn-parts-head p {
        margin-top: 30px;
    }


    .mn-parts-visual {
        min-height: 620px;

        margin: 55px 0;
    }


    .mn-parts-image {
        width: 70%;

        height: 570px;
    }


    .mn-parts-badge {
        right: 10%;
    }


    .mn-parts-image-label {
        left: 8%;
    }

}


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

@media (max-width: 575px) {

    .mn-parts-section {
        padding: 65px 0;
    }


    .mn-parts-head {
        margin-bottom: 35px;
    }


    .mn-parts-label {
        margin-bottom: 25px;
    }


    .mn-parts-head h2 {
        font-size: 54px;

        line-height: .88;
    }


    .mn-parts-head h2 span {
        margin-left: 4%;
    }


    .mn-parts-head p {
        margin-top: 25px;

        font-size: 10.5px;
    }


    /* PARTS */

    .mn-part-item {
        min-height: 105px;

        padding: 22px 12px;
    }


    .mn-part-content h3 {
        font-size: 25px;
    }


    /* IMAGE */

    .mn-parts-visual {
        min-height: 480px;

        margin: 60px 0;
    }


    .mn-parts-image {
        top: 0;

        width: 88%;

        height: 450px;
    }


    .mn-parts-badge {
        top: -35px;
        right: 0;

        width: 90px;
        height: 90px;
    }


    .mn-parts-badge text {
        font-size: 7px;
    }


    .mn-parts-badge > span {
        width: 39px;
        height: 39px;
    }


    .mn-parts-badge > span i {
        font-size: 18px;
    }


    .mn-parts-image-label {
        left: 0;

        padding: 18px 20px;
    }


    .mn-parts-image-label strong {
        font-size: 18px;
    }


    /* BOTTOM */

    .mn-parts-bottom {
        margin-top: 45px;

        flex-direction: column;

        align-items: stretch;

        gap: 28px;
    }


    .mn-parts-bottom-text {
        gap: 15px;
    }


    .mn-parts-call {
        width: 100%;

        min-width: 0;
    }


    .mn-parts-call strong {
        font-size: 21px;
    }

}


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

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

    .mn-parts-badge svg,
    .mn-parts-badge > span i {
        animation: none;
    }

}

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

.mn-brands-section {
    position: relative;
    padding: 115px 0;
    background: #faf9f6;
    color: #111111;
    overflow: hidden;
}


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

.mn-brands-head {
    margin-bottom: 55px;
}


.mn-brands-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}


.mn-brands-label span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}


.mn-brands-label i {
    display: block;
    width: 38px;
    height: 1px;
    background: var(--mn-red);
}


.mn-brands-label small {
    color: #77736e;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 3px;
}


.mn-brands-head h2 {
    margin: 0;

    font-size: clamp(58px, 7vw, 115px);

    font-weight: 400;

    line-height: .88;

    letter-spacing: -.06em;
}


.mn-brands-head h2 span {
    display: block;

    margin-left: 7%;

    color: var(--mn-red);

    font-family: Georgia, "Times New Roman", serif;

    font-style: italic;

    font-weight: 400;
}


.mn-brands-head p {
    max-width: 390px;

    margin: 0 0 7px;

    color: #66625d;

    font-size: 12px;

    line-height: 1.9;
}


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

.mn-brands-grid {
    position: relative;
}


/* individual brand */

.mn-brand-item {
    position: relative;

    height: 150px;

    padding: 28px;

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

    background: #ffffff;

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

    overflow: hidden;

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}


.mn-brand-item::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background: var(--mn-red);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .4s ease;
}


.mn-brand-item:hover {
    transform: translateY(-6px);

    border-color: rgba(220,80,53,.45);

    box-shadow:
        0 20px 45px rgba(17,17,17,.08);
}


.mn-brand-item:hover::before {
    transform: scaleX(1);
}


/* LOGO IMAGE */

.mn-brand-item img {
    position: relative;
    z-index: 2;

    max-width: 82%;
    max-height: 72px;

    width: auto;
    height: auto;

    object-fit: contain;

    filter: grayscale(1);

    opacity: .72;

    transition:
        filter .4s ease,
        opacity .4s ease,
        transform .4s ease;
}


.mn-brand-item:hover img {
    filter: grayscale(0);

    opacity: 1;

    transform: scale(1.05);
}


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

.mn-brands-bottom {
    margin-top: 35px;

    display: grid;

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

    border-top:
        1px solid rgba(17,17,17,.16);

    border-bottom:
        1px solid rgba(17,17,17,.16);
}


.mn-brand-feature {
    position: relative;

    min-height: 120px;

    padding: 25px 30px;

    display: flex;

    align-items: center;

    gap: 20px;
}


.mn-brand-feature:not(:last-child) {
    border-right:
        1px solid rgba(17,17,17,.16);
}


.mn-brand-feature-icon {
    width: 55px;
    height: 55px;

    flex: 0 0 55px;

    display: flex;

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

    border-radius: 50%;

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

    color: var(--mn-red);

    font-size: 18px;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;
}


.mn-brand-feature:hover
.mn-brand-feature-icon {
    background: var(--mn-red);

    color: #ffffff;

    transform: rotate(-12deg);
}


.mn-brand-feature small {
    display: block;

    margin-bottom: 7px;

    color: #8a8680;

    font-size: 6.5px;

    font-weight: 800;

    letter-spacing: 2px;
}


.mn-brand-feature strong {
    color: #111111;

    font-size: 16px;

    font-weight: 500;
}


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

@media (max-width: 991px) {

    .mn-brands-section {
        padding: 85px 0;
    }


    .mn-brand-item {
        height: 135px;
    }


    .mn-brands-bottom {
        grid-template-columns: 1fr;
    }


    .mn-brand-feature:not(:last-child) {
        border-right: 0;

        border-bottom:
            1px solid rgba(17,17,17,.16);
    }

}


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

@media (max-width: 575px) {

    .mn-brands-section {
        padding: 65px 0;
    }


    .mn-brands-head {
        margin-bottom: 35px;
    }


    .mn-brands-head h2 {
        font-size: 50px;
    }


    .mn-brands-head h2 span {
        margin-left: 3%;
    }


    .mn-brands-head p {
        margin-top: 25px;

        font-size: 11px;
    }


    .mn-brand-item {
        height: 105px;

        padding: 18px;
    }


    .mn-brand-item img {
        max-width: 88%;

        max-height: 55px;
    }


    .mn-brands-bottom {
        margin-top: 25px;
    }


    .mn-brand-feature {
        min-height: 105px;

        padding: 20px 15px;
    }


    .mn-brand-feature-icon {
        width: 48px;
        height: 48px;

        flex-basis: 48px;

        font-size: 16px;
    }


    .mn-brand-feature strong {
        font-size: 14px;
    }

}


/* =====================================================
   COMPACT EDITORIAL FAQ
===================================================== */

.mn-faq-editorial {
    position: relative;
    padding: 110px 0;
    background: #faf9f6;
    color: #111111;
    overflow: hidden;
}


/* smaller whole section */

.mn-faq-editorial .container {
    max-width: 1120px;
}


/* two-column narrow layout */

.mn-faq-editorial-wrap {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 75px;
    align-items: start;
}


/* =====================================================
   LEFT
===================================================== */

.mn-faq-editorial-intro {
    position: sticky;
    top: 40px;
}


/* label */

.mn-faq-editorial-label {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 32px;
}


.mn-faq-editorial-label span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}


.mn-faq-editorial-label i {
    width: 32px;
    height: 1px;
    display: block;
    background: var(--mn-red);
}


.mn-faq-editorial-label small {
    color: #817d77;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 3px;
}


/* heading */

.mn-faq-editorial-intro h2 {
    margin: 0 0 28px;

    font-size: clamp(48px, 5vw, 74px);

    line-height: .88;

    font-weight: 400;

    letter-spacing: -.06em;
}


.mn-faq-editorial-intro h2 span {
    display: block;

    color: var(--mn-red);

    font-family: Georgia, "Times New Roman", serif;

    font-style: italic;

    font-weight: 400;
}


/* intro text */

.mn-faq-editorial-intro > p {
    max-width: 285px;

    margin: 0;

    color: #6d6963;

    font-size: 11px;

    line-height: 1.9;
}


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

.mn-faq-editorial-call {
    width: 100%;

    margin-top: 38px;

    padding: 11px 14px;

    display: flex;

    align-items: center;

    gap: 13px;

    background: #111111;

    color: #ffffff;

    text-decoration: none;

    transition:
        background .35s ease,
        transform .35s ease;
}


.mn-faq-editorial-call:hover {
    background: var(--mn-red);

    color: #ffffff;

    transform: translateY(-3px);
}


.mn-faq-editorial-call-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;

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

    border-radius: 50%;

    background: var(--mn-red);

    color: #ffffff;

    font-size: 15px;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;
}


.mn-faq-editorial-call:hover
.mn-faq-editorial-call-icon {
    background: #ffffff;

    color: var(--mn-red);

    transform: rotate(-12deg);
}


.mn-faq-editorial-call span:last-child {
    display: flex;
    flex-direction: column;
}


.mn-faq-editorial-call small {
    margin-bottom: 5px;

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

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 1.8px;
}


.mn-faq-editorial-call strong {
    font-size: 19px;
    font-weight: 600;
}


/* =====================================================
   FAQ LIST
===================================================== */

.mn-faq-editorial-list {
    width: 100%;
    max-width: 680px;
}


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

.mn-faq-editorial-item {
    position: relative;

    margin-bottom: 14px;

    background: #ffffff;

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

    overflow: hidden;

    transition:
        border-color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
}


.mn-faq-editorial-item:hover {
    border-color: rgba(220,80,53,.35);

    transform: translateY(-2px);

    box-shadow:
        0 16px 38px rgba(17,17,17,.06);
}


/* remove default details arrow */

.mn-faq-editorial-item summary {
    list-style: none;
}


.mn-faq-editorial-item summary::-webkit-details-marker {
    display: none;
}


/* =====================================================
   SUMMARY
===================================================== */

.mn-faq-editorial-item summary {
    position: relative;

    min-height: 108px;

    padding: 23px 22px;

    display: grid;

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

    gap: 15px;

    align-items: center;

    cursor: pointer;
}


/* thin red accent */

.mn-faq-editorial-item summary::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 0;

    background: var(--mn-red);

    transition: height .4s ease;
}


.mn-faq-editorial-item[open]
summary::before,
.mn-faq-editorial-item:hover
summary::before {
    height: 100%;
}


/* NUMBER */

.mn-faq-editorial-num {
    align-self: start;

    margin-top: 4px;

    color: var(--mn-red);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.3px;
}


/* QUESTION */

.mn-faq-editorial-question {
    max-width: 510px;

    color: #111111;

    font-size: clamp(20px, 1.65vw, 27px);

    line-height: 1.18;

    font-weight: 400;

    letter-spacing: -.025em;
}


/* PLUS */

.mn-faq-editorial-plus {
    width: 40px;
    height: 40px;

    display: flex;

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

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

    border-radius: 50%;

    color: #111111;

    font-size: 13px;

    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        transform .4s ease;
}


.mn-faq-editorial-item:hover
.mn-faq-editorial-plus {
    border-color: var(--mn-red);

    color: var(--mn-red);
}


.mn-faq-editorial-item[open]
.mn-faq-editorial-plus {
    background: var(--mn-red);

    color: #ffffff;

    border-color: var(--mn-red);

    transform: rotate(45deg);
}


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

.mn-faq-editorial-answer {
    position: relative;

    padding:
        0 72px 30px 72px;
}


.mn-faq-editorial-answer::before {
    content: "";

    display: block;

    width: 100%;
    height: 1px;

    margin-bottom: 22px;

    background:
        rgba(17,17,17,.08);
}


.mn-faq-editorial-answer p {
    max-width: 510px;

    margin: 0;

    color: #66615b;

    font-size: 11.5px;

    line-height: 1.9;
}


/* =====================================================
   OPEN STATE
===================================================== */

.mn-faq-editorial-item[open] {
    border-color:
        rgba(220,80,53,.28);

    box-shadow:
        0 16px 40px rgba(17,17,17,.055);
}


.mn-faq-editorial-item[open]
.mn-faq-editorial-question {
    color: var(--mn-red);
}


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

@media (max-width: 991px) {

    .mn-faq-editorial {
        padding: 85px 0;
    }


    .mn-faq-editorial .container {
        max-width: 780px;
    }


    .mn-faq-editorial-wrap {
        grid-template-columns: 1fr;
        gap: 45px;
    }


    .mn-faq-editorial-intro {
        position: relative;
        top: auto;

        max-width: 520px;
    }


    .mn-faq-editorial-intro h2 {
        font-size: 64px;
    }


    .mn-faq-editorial-intro > p {
        max-width: 480px;
    }


    .mn-faq-editorial-call {
        max-width: 330px;
    }


    .mn-faq-editorial-list {
        max-width: 680px;
    }

}


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

@media (max-width: 575px) {

    .mn-faq-editorial {
        padding: 65px 0;
    }


    .mn-faq-editorial-wrap {
        gap: 35px;
    }


    .mn-faq-editorial-intro h2 {
        font-size: 48px;

        margin-bottom: 22px;
    }


    .mn-faq-editorial-call {
        margin-top: 28px;
    }


    .mn-faq-editorial-item {
        margin-bottom: 10px;
    }


    .mn-faq-editorial-item summary {
        min-height: 100px;

        padding: 20px 15px;

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

        gap: 10px;
    }


    .mn-faq-editorial-question {
        font-size: 19px;
    }


    .mn-faq-editorial-plus {
        width: 34px;
        height: 34px;

        font-size: 11px;
    }


    .mn-faq-editorial-answer {
        padding:
            0 20px 25px 50px;
    }


    .mn-faq-editorial-answer p {
        font-size: 11px;
    }

}


/* =====================================================
   MAGNOLIA FOOTER
===================================================== */

.mn-footer {
    position: relative;

    padding: 85px 0 25px;

    background: #111111;

    color: #ffffff;

    overflow: hidden;
}


/* subtle top line */

.mn-footer::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 3px;

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


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

.mn-footer-top {
    display: grid;

    grid-template-columns:
        1.35fr .8fr 1.1fr 1.1fr;

    gap: 55px;

    padding-bottom: 55px;
}


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

.mn-footer-brand {
    position: relative;
}


.mn-footer-gear {
    width: 72px;
    height: 72px;

    margin-bottom: 28px;

    display: flex;

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

    color: var(--mn-red);
}


.mn-footer-gear i {
    font-size: 66px;

    animation:
        mnFooterGear 12s linear infinite;
}


@keyframes mnFooterGear {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


.mn-footer-brand h3 {
    margin: 0 0 22px;

    color: #ffffff;

    font-size: clamp(35px, 3.3vw, 53px);

    line-height: .9;

    font-weight: 400;

    letter-spacing: -.05em;
}


.mn-footer-brand h3 span {
    display: block;

    margin-top: 7px;

    color: var(--mn-red);

    font-family: Georgia, "Times New Roman", serif;

    font-style: italic;

    font-weight: 400;
}


.mn-footer-brand p {
    max-width: 310px;

    margin: 0;

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

    font-size: 11px;

    line-height: 1.9;
}


/* =====================================================
   TITLES
===================================================== */

.mn-footer-title {
    position: relative;

    display: inline-block;

    margin-bottom: 25px;

    color: var(--mn-red);

    font-size: 17px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.mn-footer-title::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -9px;

    width: 28px;
    height: 1px;

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


/* =====================================================
   LINKS
===================================================== */

.mn-footer-column ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.mn-footer-column li {
    margin-bottom: 13px;
}


.mn-footer-column li:last-child {
    margin-bottom: 0;
}


.mn-footer-column li a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

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

    font-size: 11px;

    line-height: 1.45;

    text-decoration: none;

    transition:
        color .3s ease,
        transform .3s ease;
}


.mn-footer-column li a i {
    color: var(--mn-red);

    font-size: 8px;
}


.mn-footer-column li a:hover {
    color: #ffffff;

    transform: translateX(5px);
}


/* =====================================================
   CONTACT BOX
===================================================== */

.mn-footer-contact {
    margin-top: 28px;
}


.mn-footer-contact > a {
    padding: 12px 14px;

    display: flex;

    align-items: center;

    gap: 12px;

    background: var(--mn-red);

    color: #ffffff;

    text-decoration: none;

    transition:
        transform .3s ease,
        background .3s ease;
}


.mn-footer-contact > a:hover {
    background: #ffffff;

    color: #111111;

    transform: translateY(-3px);
}


.mn-footer-contact > a > i {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;

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

    border-radius: 50%;

    background: #ffffff;

    color: var(--mn-red);
}


.mn-footer-contact span {
    display: flex;

    flex-direction: column;
}


.mn-footer-contact small {
    margin-bottom: 3px;

    font-size: 5.5px;

    font-weight: 800;

    letter-spacing: 1.7px;
}


.mn-footer-contact strong {
    font-size: 17px;

    font-weight: 600;
}


/* =====================================================
   INFO STRIP
===================================================== */

.mn-footer-info {
    padding: 25px 0;

    display: grid;

    grid-template-columns:
        1.5fr .7fr 1fr;

    gap: 25px;

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

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


.mn-footer-info a {
    display: flex;

    align-items: center;

    gap: 12px;

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

    font-size: 10px;

    text-decoration: none;

    transition: color .3s ease;
}


.mn-footer-info a:hover {
    color: #ffffff;
}


.mn-footer-info i {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(220,80,53,.12);

    color: var(--mn-red);

    font-size: 12px;
}


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

.mn-footer-bottom {
    padding-top: 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.mn-footer-bottom p {
    margin: 0;

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

    font-size: 8px;

    letter-spacing: .6px;
}


.mn-footer-top-btn {
    display: inline-flex;

    align-items: center;

    gap: 10px;

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

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.7px;

    text-decoration: none;

    transition: color .3s ease;
}


.mn-footer-top-btn i {
    color: var(--mn-red);
}


.mn-footer-top-btn:hover {
    color: #ffffff;
}


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

@media (max-width: 991px) {

    .mn-footer {
        padding-top: 70px;
    }


    .mn-footer-top {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 45px 35px;
    }


    .mn-footer-info {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 575px) {

    .mn-footer {
        padding:
            55px 0 22px;
    }


    .mn-footer-top {
        grid-template-columns: 1fr;

        gap: 40px;

        padding-bottom: 40px;
    }


    .mn-footer-brand h2 {
        font-size: 42px;
    }


    .mn-footer-gear {
        width: 58px;
        height: 58px;

        margin-bottom: 22px;
    }


    .mn-footer-gear i {
        font-size: 54px;
    }


    .mn-footer-column li {
        margin-bottom: 12px;
    }


    .mn-footer-column li a {
        font-size: 11px;
    }


    .mn-footer-info {
        gap: 16px;

        padding: 22px 0;
    }


    .mn-footer-info a {
        font-size: 9.5px;
    }


    .mn-footer-bottom {
        flex-direction: column;

        align-items: flex-start;
    }

}


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

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

    .mn-footer-gear i {
        animation: none;
    }

}

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

/* FORM WRAPPER */
form.CUS {
    max-width: 900px;
    width: 100%;
    margin: 20px auto;
    padding: 20px;
    background: #f9fafb;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-family: system-ui, sans-serif;
}

/* FLEX FIELDSET */
form.CUS fieldset {
    display: flex;
    flex-wrap: wrap;
    border: none;
    padding: 0;
    margin: 0;
}

/* BASE BLOCK STYLE */
form.CUS fieldset > p {
    width: 100%;
    padding: 10px;
    margin: 0;
    font-size: 0.95rem;
    color: #444;
}

/* Universal input/select styling */
form.CUS input,
form.CUS select,
form.CUS textarea {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

/* ===============================
   ROW 1: Name, Phone, Address
=============================== */
form.CUS fieldset > p:nth-of-type(1),
form.CUS fieldset > p:nth-of-type(2),
form.CUS fieldset > p:nth-of-type(3) {
    width: 33.333%;
}

/* ===============================
   ROW 2: City, State, Zip Code
=============================== */
form.CUS fieldset > p:nth-of-type(4),
form.CUS fieldset > p:nth-of-type(5),
form.CUS fieldset > p:nth-of-type(6) {
    width: 33.333%;
}

/* ===============================
   SERVICE NEEDED TEXTAREA
=============================== */
form.CUS fieldset > p:nth-of-type(7) {
    width: 100%;
}

/* ===============================
   SERVICE DATE (Month, Day, Year)
   → ALL 3 IN ONE ROW
=============================== */

/* Make the 8th <p> (Service Date block) a flex row */
form.CUS fieldset > p:nth-of-type(8) {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: flex-start;
}

/* Month, Day, Year = 3 equal flex columns */
form.CUS fieldset > p:nth-of-type(8) select#service_date,
form.CUS fieldset > p:nth-of-type(8) select#service_day,
form.CUS fieldset > p:nth-of-type(8) input#service_year {
    flex: 1 1 0;
    width: auto;          /* flex handles width */
    margin-top: 6px;
}

/* ===============================
   SERVICE TIME (Full width)
=============================== */
form.CUS fieldset > p:nth-of-type(9) {
    width: 100%;
}

/* ===============================
   SUBMIT BUTTON (Full width)
=============================== */
form.CUS fieldset > p:nth-of-type(10) {
    width: 100%;
}

form.CUS input[type="submit"] {
    width: 100%;
    background: #000;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

form.CUS input[type="submit"]:hover {
    background: #030827;
}

/* Hide honeypot */
form.CUS input.subject {
    display: none;
}

/* ===============================
   MOBILE RESPONSIVE (stack fields)
=============================== */
@media (max-width: 600px) {

    form.CUS fieldset > p {
        width: 100%;
        padding: 6px 0;
    }

    /* Month, Day, Year full width stacked on mobile */
    form.CUS fieldset > p:nth-of-type(8) {
        flex-direction: column;
        gap: 6px;
    }

    form.CUS fieldset > p:nth-of-type(8) select#service_date,
    form.CUS fieldset > p:nth-of-type(8) select#service_day,
    form.CUS fieldset > p:nth-of-type(8) input#service_year {
        flex: none;
        width: 100% !important;
    }
/* ===============================
   ROW 1: Name, Phone, Address
=============================== */
form.CUS fieldset > p:nth-of-type(1),
form.CUS fieldset > p:nth-of-type(2),
form.CUS fieldset > p:nth-of-type(3) {
    width: 100%;
}

/* ===============================
   ROW 2: City, State, Zip Code
=============================== */
form.CUS fieldset > p:nth-of-type(4),
form.CUS fieldset > p:nth-of-type(5),
form.CUS fieldset > p:nth-of-type(6) {
    width: 100%;
}
}



.blogbox{text-align:justify;padding:20px;background-color:#FFF;box-sizing:border-box;clear:both;overflow:hidden;margin-bottom:15px;box-shadow:3px 3px 7px rgba(0,0,0,0.2)}
.blogbox .blogimg img {float: right; width: 35%; height: auto; margin: 15px;box-shadow: 0 0 3px rgba(0,0,0,0.8)}
.blogbox .read-more a{background-color:#ccc;color:#2D2D2D;padding:10px;border-radius:5px;border:1px solid #2D2D2D}
.blogbox .read-more a:hover {background-color:#2D2D2D;color:#FFF;letter-spacing: 2px;padding:10px 15px}
.blogpost {text-align: justify;padding:20px;background-color: #FFF;box-sizing: border-box}
.blogpost h1, .blogbox h1 {margin:0;font-size:28px;color:#222;}
.blogpost h2, .blogbox h2 {margin:0;font-size:24px;color:#222;}
.blogpost .blog_wrapper img {float: right; max-width: 35%; height: auto; margin: 15px;box-shadow: 0 0 3px rgba(0,0,0,0.8)}
.socialbox{overflow:hidden;position:relative;text-align:center;width:100%;}
.social-share-btns{display:inline-block;overflow:hidden}
.social-share-btns .share-btn{float:left;margin:0 5px;padding:8px 16px;border-radius:3px;color:#fff;font-size:14px;line-height:18px;vertical-align:middle;transition:background .2s ease-in-out;display:flex;align-items:center;}
.social-share-btns .share-btn svg {fill:currentColor;height:1rem;width:1rem;margin-right:10px;}
.share-btn{background-color:#95a5a6}
.share-btn:hover{background-color:#798d8f}
.share-btn-twitter{background-color:#00aced}
.share-btn-twitter:hover{background-color:#0087ba}
.share-btn-facebook{background-color:#3b5998}
.share-btn-facebook:hover{background-color:#2d4373}
.share-btn-linkedin{background-color:#007bb6}
.share-btn-linkedin:hover{background-color:#005983}
@media only screen and (max-width:700px){
.blogbox .blogimg img{max-width:90%;width:auto}
}

.mn-footer-hours {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
}

.mn-footer-hours > i {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mn-red);
    color: #fff;
    font-size: 16px;
}

.mn-footer-hours span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mn-footer-hours small {
    color: #8c8983;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.mn-footer-hours strong {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}