/* ============================================================
   WE GO 2 U MECHANICS
   MAIN WEBSITE STYLESHEET
============================================================ */


/* ============================================================
   RESET / GLOBAL
============================================================ */

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


html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
    -webkit-text-size-adjust: 100%;
}


body {
    margin: 0;
    min-height: 100vh;

    background: #050505;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow-x: hidden;
}


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


img {
    display: block;
    max-width: 100%;
    height: auto;
}


a {
    color: inherit;
}


button {
    font: inherit;
}



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

.section-container {

    position: relative;

    width: min(1200px, 100%);

    margin: 0 auto;

    z-index: 2;
}


.section-label {

    margin: 0 0 12px;

    color: #f01b1b;

    font-size:
        clamp(
            0.72rem,
            1vw,
            0.88rem
        );

    font-weight: 900;

    letter-spacing: 3px;

    text-transform: uppercase;
}


.content-section h2,
.reviews-section h2,
.cta-section h2 {

    margin: 0;

    font-size:
        clamp(
            2rem,
            5vw,
            4.25rem
        );

    line-height: 0.98;

    letter-spacing: -0.035em;

    text-transform: uppercase;
}


.section-intro {

    max-width: 700px;

    margin:
        20px
        0
        clamp(35px, 5vw, 60px);

    color: #bcbcbc;

    font-size:
        clamp(
            1rem,
            1.4vw,
            1.15rem
        );

    line-height: 1.7;
}


.large-text {

    max-width: 800px;

    margin: 25px 0 0;

    color: #e1e1e1;

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

    line-height: 1.7;
}



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

.site-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.90),
            rgba(0, 0, 0, 0)
        );
}


.navbar {

    width: min(1400px, 100%);

    margin: 0 auto;

    padding:
        clamp(14px, 2vw, 24px)
        clamp(16px, 4vw, 60px);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}




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

.menu-button{
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;

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

.menu-image{
    width: 120px;      /* change to any size */
    height: auto;
    display: block;

    transition:
        transform .25s ease,
        filter .25s ease;
}

.menu-button:hover .menu-image{
    transform: scale(1.08);

    filter:
        drop-shadow(0 0 12px #ffd400)
        drop-shadow(0 0 24px #ffd400);
}



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

.nav-links {

    display: flex;

    align-items: center;

    gap:
        clamp(
            18px,
            3vw,
            40px
        );
}


.nav-links a {

    position: relative;

    padding: 6px 0;

    color: #ffffff;

    text-decoration: none;

    text-transform: uppercase;

    font-size: 0.82rem;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.nav-links a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background: #e00000;

    transition: width 0.25s ease;
}


.nav-links a:hover::after {
    width: 100%;
}



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

.hero {

    position: relative;

    min-height: 100vh;
    min-height: 100dvh;

    display: flex;

    align-items: center;

    padding:
        clamp(100px, 13vh, 150px)
        clamp(20px, 6vw, 100px)
        clamp(70px, 9vh, 110px);

    isolation: isolate;

    overflow: hidden;
}



/* ============================================================
   HERO BACKGROUND IMAGE
============================================================ */

.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -2;


    /*
    // YOUR BACKGROUND IMAGE PATH GOES HERE
    //
    // Current setup assumes:
    //
    // website/
    // ├── css/
    // │   └── styles.css
    // └── images/
    //     └── background_mobile.png
    */

    background-image:
        url("../images/background_mobile.png");


    background-repeat: no-repeat;

    background-size: cover;

    background-position:
        50%
        70%;
}



/* Dark overlay */

.hero::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            90deg,

            rgba(0, 0, 0, 0.733) 0%,

            rgba(0, 0, 0, 0.623) 34%,

            rgba(0, 0, 0, 0.233) 62%,

            rgba(0, 0, 0, 0) 100%
        );
}



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

.hero-content {

    width: min(720px, 100%);

    margin-left:
        max(
            0px,
            calc((100vw - 1400px) / 2)
        );
}


.eyebrow {

    margin: 0 0 14px;

    color: #ff2929;

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

    font-weight: 900;

    letter-spacing: 4px;
}


.hero h1 {

    margin: 0;

    font-size:
        clamp(
            2.5rem,
            6vw,
            5.8rem
        );

    line-height: 0.93;

    letter-spacing: -0.05em;

    font-weight: 900;

    text-transform: uppercase;

    text-shadow:
        0 5px 20px
        rgba(0, 0, 0, 0.90);
}


.hero h1 span {

    display: block;

    color: #e00000;

    text-shadow:
        0 0 22px
        rgba(255, 0, 0, 0.28);
}


.hero-description {

    width: min(610px, 100%);

    margin: 25px 0 0;

    color: #e5e5e5;

    font-size:
        clamp(
            1rem,
            1.5vw,
            1.25rem
        );

    line-height: 1.65;
}

/*=================================================
    VETERAN BANNER
=================================================*/

.veteran-banner{

    width:fit-content;

    margin-bottom:28px;

}


.veteran-center{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

}


.veteran-line{

    width:100%;

    height:2px;

    background:
        linear-gradient(
            to right,
            transparent,
            #b30000,
            transparent
        );

    margin:8px 0;

}


.star{

    color:#ffffff;

    font-size:1rem;

    text-shadow:
        0 0 8px rgba(255,255,255,.6);

}


.veteran-text{

    color:#ffffff;

    font-size:.95rem;

    font-weight:900;

    letter-spacing:3px;

    text-transform:uppercase;

    text-shadow:
        0 0 10px rgba(255,0,0,.35);

}


.veteran-subtitle{

    text-align:center;

    color:#c6c6c6;

    font-size:.72rem;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-top:6px;

}

.veteran-banner{

    width:100%;

    margin-left:auto;

    margin-right:auto;

}


.veteran-text{

    font-size:.82rem;

    letter-spacing:2px;

}


.veteran-subtitle{

    font-size:.65rem;

}


/* ============================================================
   BUTTONS
============================================================ */

.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-top:
        clamp(
            28px,
            4vw,
            42px
        );
}


.button {

    min-height: 56px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 28px;

    border-radius: 6px;

    color: white;

    text-align: center;

    text-decoration: none;

    font-size:
        clamp(
            0.85rem,
            1.2vw,
            1rem
        );

    font-weight: 900;

    letter-spacing: 1px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.button:hover {

    transform:
        translateY(-3px);
}


.button-primary {

    background:
        linear-gradient(
            135deg,
            #f21818,
            #970000
        );

    border:
        2px solid
        #ff4545;

    box-shadow:
        0 0 20px
        rgba(255, 0, 0, 0.40);
}


.button-primary:hover {

    box-shadow:
        0 0 36px
        rgba(255, 0, 0, 0.65);
}


.button-secondary {

    background:
        rgba(0, 0, 0, 0.55);

    border:
        2px solid
        rgba(255, 255, 255, 0.80);
}


.button-secondary:hover {

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



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

.scroll-indicator {

    position: absolute;

    left: 50%;
    bottom: 24px;

    transform:
        translateX(-50%);

    width: 30px;
    height: 48px;

    border:
        2px solid
        rgba(255, 255, 255, 0.55);

    border-radius: 20px;
}


.scroll-indicator span {

    position: absolute;

    top: 9px;
    left: 50%;

    width: 5px;
    height: 8px;

    transform:
        translateX(-50%);

    border-radius: 10px;

    background: #e50000;

    animation:
        scrollDot
        1.6s
        infinite;
}


@keyframes scrollDot {

    0% {
        opacity: 1;
        transform:
            translate(-50%, 0);
    }

    75% {
        opacity: 0;
        transform:
            translate(-50%, 18px);
    }

    100% {
        opacity: 0;
    }
}



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

.content-section {

    position: relative;

    padding:
        clamp(75px, 9vw, 130px)
        clamp(20px, 6vw, 80px);

    background: #101010;
}


.dark-section {

    background:
        linear-gradient(
            145deg,
            #0d0d0d,
            #050505
        );
}



/* ============================================================
   SERVICES
============================================================ */

.service-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(250px, 100%),
                1fr
            )
        );

    gap:
        clamp(
            18px,
            3vw,
            28px
        );
}


.service-card {

    position: relative;

    min-height: 270px;

    padding:
        clamp(
            25px,
            4vw,
            36px
        );

    background:
        linear-gradient(
            145deg,
            #1a1a1a,
            #090909
        );

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

    border-top:
        3px solid
        #d30000;

    border-radius: 9px;

    overflow: hidden;

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.35);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.service-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(255, 40, 40, 0.48);

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


.service-number {

    position: absolute;

    top: 14px;
    right: 20px;

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

    font-size: 4.5rem;

    font-weight: 900;
}


.service-card h3 {

    position: relative;

    margin: 15px 0;

    font-size:
        clamp(
            1.3rem,
            2vw,
            1.65rem
        );

    text-transform: uppercase;
}


.service-card p {

    position: relative;

    margin: 0;

    color: #bcbcbc;

    line-height: 1.7;
}



/* ============================================================
   ABOUT
============================================================ */

.about-text {

    max-width: 800px;

    margin: 22px 0 0;

    color: #aaaaaa;

    line-height: 1.8;
}


.about-features {

    display: flex;

    flex-wrap: wrap;

    gap:
        clamp(
            15px,
            3vw,
            30px
        );

    margin-top:
        clamp(
            35px,
            5vw,
            60px
        );
}


.about-feature {

    min-width: 160px;

    padding-left: 18px;

    border-left:
        3px solid
        #db0000;
}


.about-feature strong {

    display: block;

    font-size:
        clamp(
            1.05rem,
            2vw,
            1.4rem
        );
}


.about-feature span {

    display: block;

    margin-top: 4px;

    color: #999;

    font-size: 0.78rem;

    letter-spacing: 2px;
}



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

.reviews-section {

    position: relative;

    padding:
        clamp(75px, 9vw, 130px)
        clamp(16px, 5vw, 80px);

    background:
        radial-gradient(
            circle at 50% 40%,
            #1a1a1a 0%,
            #0a0a0a 48%,
            #030303 100%
        );

    overflow: hidden;
}


.reviews-section::before {

    content: "";

    position: absolute;

    top: 25%;
    left: 50%;

    width: min(900px, 100vw);
    height: 700px;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(200, 0, 0, 0.14),
            transparent 68%
        );

    pointer-events: none;
}



/* ============================================================
   GOOGLE RATING SUMMARY
============================================================ */

.google-summary {

    position: relative;

    z-index: 2;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-bottom:
        clamp(
            35px,
            5vw,
            55px
        );

    padding:
        clamp(
            20px,
            4vw,
            32px
        );

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

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

    border-radius: 10px;

    backdrop-filter:
        blur(8px);
}


.google-summary-left {

    display: flex;

    align-items: center;

    gap:
        clamp(
            15px,
            3vw,
            28px
        );
}


.rating-number {

    font-size:
        clamp(
            2.8rem,
            6vw,
            5rem
        );

    line-height: 1;

    font-weight: 900;
}


.rating-details {

    display: flex;

    flex-direction: column;

    gap: 6px;
}


.google-stars,
.review-stars {

    color: #fbbc04;
}


.google-stars {

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

    letter-spacing: 2px;
}


.rating-count {

    color: #aaaaaa;

    font-size:
        clamp(
            0.82rem,
            1.3vw,
            1rem
        );

    font-weight: 700;
}



/* Google badge */

.google-badge {

    display: flex;

    align-items: center;

    gap: 12px;
}

.google-logo{

    width:42px;

    height:42px;

    object-fit:contain;

    flex-shrink:0;

    display:block;

}


.google-g {

    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: white;

    color: #4285f4;

    border-radius: 50%;

    font-size: 1.4rem;

    font-weight: 900;
}


.google-badge strong,
.google-badge span {

    display: block;
}


.google-badge strong {

    font-size: 1rem;
}


.google-badge span {

    margin-top: 3px;

    color: #888;

    font-size: 0.72rem;
}



/* ============================================================
   REVIEW CAROUSEL
============================================================ */

.reviews-wrapper {

    position: relative;

    z-index: 2;

    width: 100%;

    overflow-x: auto;

    padding:
        4px
        2px
        22px;

    scroll-snap-type:
        x mandatory;

    scrollbar-width: thin;

    scrollbar-color:
        #b60000
        #181818;

    -webkit-overflow-scrolling:
        touch;
}


.reviews-wrapper::-webkit-scrollbar {
    height: 7px;
}


.reviews-wrapper::-webkit-scrollbar-track {
    background: #181818;
}


.reviews-wrapper::-webkit-scrollbar-thumb {

    background: #b90000;

    border-radius: 20px;
}


.reviews-track {

    display: flex;

    gap:
        clamp(
            18px,
            3vw,
            28px
        );

    width: max-content;
}



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

.review-card {

    width:
        clamp(
            290px,
            31vw,
            380px
        );

    min-height: 320px;

    display: flex;

    flex-direction: column;

    padding:
        clamp(
            24px,
            3vw,
            32px
        );

    background:
        linear-gradient(
            145deg,
            rgba(31, 31, 31, 0.97),
            rgba(8, 8, 8, 0.98)
        );

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

    border-top:
        3px solid
        #d50000;

    border-radius: 10px;

    scroll-snap-align: start;

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.45);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.review-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(255, 40, 40, 0.52);

    box-shadow:
        0 20px 48px
        rgba(170, 0, 0, 0.22);
}


.review-card-top {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 15px;
}


.review-stars {

    font-size: 1.15rem;

    letter-spacing: 1px;
}


.quote-mark {

    height: 40px;

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

    font-family:
        Georgia,
        serif;

    font-size: 4rem;

    line-height: 0.8;
}


.review-text {

    flex: 1;

    margin:
        22px
        0
        0;

    color: #dddddd;

    font-size:
        clamp(
            0.95rem,
            1.4vw,
            1.06rem
        );

    line-height: 1.75;
}



/* ============================================================
   REVIEW AUTHOR
============================================================ */

.review-author {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 26px;

    padding-top: 20px;

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


.review-avatar {

    width: 44px;
    height: 44px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #e00000,
            #750000
        );

    color: white;

    font-size: 1.05rem;

    font-weight: 900;

    box-shadow:
        0 0 14px
        rgba(255, 0, 0, 0.30);
}


.review-author strong {

    display: block;

    font-size: 0.95rem;
}


.review-author span {

    display: block;

    margin-top: 4px;

    color: #858585;

    font-size: 0.72rem;
}



/* ============================================================
   SWIPE HINT
============================================================ */

.swipe-hint {

    display: none;

    margin: 10px 0 0;

    color: #777;

    font-size: 0.75rem;

    letter-spacing: 1px;

    text-align: center;

    text-transform: uppercase;
}


/* ============================================================
   GOOGLE REVIEW BUTTON
============================================================ */

.reviews-actions {

    position: relative;

    z-index: 2;

    margin-top:
        clamp(
            32px,
            5vw,
            50px
        );

    text-align: center;
}


.google-review-button {

    min-height: 58px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    padding: 14px 30px;

    background:
        linear-gradient(
            135deg,
            #e80000,
            #900000
        );

    border:
        2px solid
        #ff4141;

    border-radius: 6px;

    color: white;

    text-decoration: none;

    font-size:
        clamp(
            0.82rem,
            1.3vw,
            0.95rem
        );

    font-weight: 900;

    letter-spacing: 1px;

    box-shadow:
        0 0 22px
        rgba(255, 0, 0, 0.35);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.google-review-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 0 38px
        rgba(255, 0, 0, 0.65);
}


.google-button-icon {

    width: 29px;
    height: 29px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: white;

    color: #4285f4;

    font-size: 0.9rem;

    font-weight: 900;
}



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

.cta-section {

    position: relative;

    padding:
        clamp(
            65px,
            8vw,
            100px
        )
        clamp(
            20px,
            6vw,
            80px
        );

    background:
        linear-gradient(
            110deg,
            #080808,
            #1b0000
        );

    border-top:
        1px solid
        rgba(255, 0, 0, 0.22);

    border-bottom:
        1px solid
        rgba(255, 0, 0, 0.22);
}


.cta-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 45px;
}


.cta-section h2 {

    max-width: 850px;

    font-size:
        clamp(
            2rem,
            4.5vw,
            4rem
        );
}


.cta-section h2 span {

    display: block;

    color: #df0000;
}


.cta-button {

    flex-shrink: 0;

    min-width: 180px;
}



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

#contact {
    scroll-margin-top: 325px;
}

.contact-section {

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            #181818,
            #050505 65%
        );
}


.contact-container .large-text {

    margin-left: auto;
    margin-right: auto;
}


.contact-phone {

    display: inline-block;

    margin-top:
        clamp(
            30px,
            5vw,
            50px
        );

    color: #ffffff;

    text-decoration: none;

    font-size:
        clamp(
            2rem,
            6vw,
            4.5rem
        );

    font-weight: 900;

    letter-spacing: -0.03em;

    transition:
        color 0.2s ease,
        text-shadow 0.2s ease;
}


.contact-phone:hover {

    color: #ff2222;

    text-shadow:
        0 0 22px
        rgba(255, 0, 0, 0.50);
}



/* ============================================================
   FOOTER
============================================================ */

.site-footer {

    padding:
        30px
        20px
        150px;

    background: #020202;

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


.footer-inner {

    width: min(1200px, 100%);

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    color: #777;

    font-size: 0.75rem;
}


.footer-inner strong {

    color: #ccc;

    letter-spacing: 1px;
}



/* ============================================================
   TABLET
   1024px AND SMALLER
============================================================ */

@media (max-width: 1024px) {


    .hero {

        align-items: flex-start;

        padding-top: 130px;
    }


    .hero::before {

        background-position:
            58%
            70%;
    }


    .hero-content {

        margin-left: 0;
    }


    .cta-container {

        align-items: flex-start;

        flex-direction: column;
    }

}



/* ============================================================
   MOBILE
   768px AND SMALLER
============================================================ */

@media (max-width: 768px) {


    /* --------------------------------------------------------
       MOBILE NAVIGATION
    --------------------------------------------------------- */

    .navbar {

        position: relative;

        padding:
            14px
            16px;
    }


    .nav-links {

        position: absolute;

        top: calc(100% + 4px);
        left: 16px;
        right: 16px;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 10px;

        background:
            rgba(5, 5, 5, 0.97);

        border:
            1px solid
            rgba(255, 0, 0, 0.32);

        border-radius: 8px;

        box-shadow:
            0 18px 40px
            rgba(0, 0, 0, 0.65);

        backdrop-filter:
            blur(12px);
    }


    .nav-links.open {
        display: flex;
    }


    .nav-links a {

        width: 100%;

        padding:
            15px
            12px;

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


    .nav-links a:last-child {
        border-bottom: 0;
    }



    /* --------------------------------------------------------
       MOBILE HERO
    --------------------------------------------------------- */

    .hero {

        min-height: 100svh;

        padding:
            105px
            18px
            65px;

        align-items: flex-start;
    }


    .hero::before {

        background-size: cover;

        background-position:
            center center;
    }


    .hero::after {

        background:
            linear-gradient(
                to bottom,

                rgba(0, 0, 0, 0.86) 0%,

                rgba(0, 0, 0, 0.60) 38%,

                rgba(0, 0, 0, 0.14) 66%,

                rgba(0, 0, 0, 0.35) 100%
            );
    }


    .hero-content {

        width: 100%;

        text-align: center;
    }


    .hero h1 {

        font-size:
            clamp(
                2.1rem,
                11vw,
                3.7rem
            );
    }


    .hero-description {

        margin-left: auto;
        margin-right: auto;

        max-width: 520px;
    }


    .hero-buttons {
    width: 100%;

    flex-direction: column;

    align-items: center;
}


.button {
    width: fit-content;
}


    .scroll-indicator {
        display: none;
    }



    /* --------------------------------------------------------
       MOBILE SECTIONS
    --------------------------------------------------------- */

    .content-section,
    .reviews-section,
    .cta-section {

        padding-left: 16px;
        padding-right: 16px;
    }



    /* --------------------------------------------------------
       MOBILE GOOGLE SUMMARY
    --------------------------------------------------------- */

    .google-summary {

        align-items: flex-start;

        flex-direction: column;
    }


    .google-summary-left {

        width: 100%;
    }


    .google-badge {

        padding-top: 18px;

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

        width: 100%;
    }



    /* --------------------------------------------------------
       MOBILE REVIEWS
    --------------------------------------------------------- */

    .review-card {

        /*
        // About 86% of the phone width.
        //
        // This lets the visitor see part of the next card,
        // making it obvious that the reviews can be swiped.
        */

        width:
            min(
                86vw,
                355px
            );

        min-height: 300px;
    }


    .swipe-hint {
        display: block;
    }


    .google-review-button {

        width: 100%;

        max-width: 430px;
    }



    /* --------------------------------------------------------
       MOBILE ABOUT
    --------------------------------------------------------- */

    .about-features {

        flex-direction: column;
    }



    /* --------------------------------------------------------
       MOBILE FOOTER
    --------------------------------------------------------- */

    .footer-inner {

        flex-direction: column;

        text-align: center;

        line-height: 1.6;
    }

}



/* ============================================================
   SMALL PHONES
   480px AND SMALLER
============================================================ */

@media (max-width: 480px) {


    .hero {

        padding-left: 15px;
        padding-right: 15px;
    }


    .hero h1 {

        font-size:
            clamp(
                1.95rem,
                11.5vw,
                3rem
            );
    }


    .hero-description {

        font-size: 0.95rem;
    }


    .rating-number {

        font-size: 3rem;
    }


    .google-stars {

        font-size: 1.25rem;
    }


    .review-card {

        width:
            min(
                88vw,
                340px
            );
    }


    .contact-phone {

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

}



/* ============================================================
   VERY LARGE MONITORS
============================================================ */

@media (min-width: 1600px) {


    .hero::before {

        background-position:
            center
            68%;
    }

}



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

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


    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {

        animation: none !important;

        transition: none !important;
    }

}