/* =========================================================
   RCD — MOBILE / TABLET OVERRIDES
   Load AFTER base.css, landing.css and animations.css
   ========================================================= */


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

@media (max-width: 892px) {

    /* -----------------------------------------------------
       GLOBAL
       ----------------------------------------------------- */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        padding: 0 !important;
    }

    :root {
        --page-padding: clamp(1rem, 4vw, 2rem);
        --section-spacing: clamp(3rem, 10vw, 5rem);
    }

    .body-wrapper,
    .body-content {
        width: 100%;
        max-width: 100%;
    }

    .body-content {
        padding-inline: clamp(1rem, 4vw, 2rem);
    }

    img,
    svg {
        max-width: 100%;
    }


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

    .blur-nav-wrap {
        top: 12px;
        padding-inline: 12px;
    }

    .blur-nav {
        width: 100%;
        min-height: 56px;
        padding: 7px 8px 7px 14px;
        gap: 8px;
    }

    .brand {
        font-size: 0.9rem;
    }

    .nav-links {
        display: none;
    }

    .menu-btn {
        display: grid;
        place-items: center;
        flex-shrink: 0;
    }

    .nav-cta {
        min-height: 40px;
        padding-inline: 14px;
        font-size: 0.8rem;
    }
    .nav-links.open {
        display: flex;
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        width: 100%;

        flex-direction: column;
        align-items: stretch;
        gap: 4px;

        padding: 10px;

        background: var(--glass);
        border: 1px solid var(--glass-border);
        border-radius: 20px;

        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);

        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    }


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

    .hero-wrapper {
        height: clamp(500px, 125vw, 680px);
        min-height: 500px;
    }

    #hero-container {
        top: -4rem;
        width: 100%;
    }

    #herovehicle {
        width: 130% !important;
        max-width: none !important;
        margin-left: -15%;
    }

    .content-hero {
        width: 100%;
        padding-inline: 0.75rem;

        /* move the tiles down so they overlap the bottom edge */
        transform: translateY(-5%);
    }

    .content-section {
        width: 100%;
        gap: 0.5rem;
    }

    .hero-step {
        width: calc((100% - 1rem) / 3);
        min-width: 0;
        min-height: 8rem;
        margin: 0;
        padding: 10px;
        border-width: 1px;
    }

    .hero-step-title {
        font-size: clamp(0.65rem, 2.2vw, 0.9rem);
        line-height: 1.1;
    }

    .hero-step-subtitle {
        font-size: clamp(0.45rem, 1.7vw, 0.7rem);
    }

    .hero-step-no {
        font-size: clamp(0.7rem, 2vw, 1rem);
    }

    .hero-step-ico {
        transform: scale(0.8);
        transform-origin: right center;
    }


    /* -----------------------------------------------------
       SPONSOR STRIP
       ----------------------------------------------------- */

    .sponsored-partners {
        display:flex;
        height: 3rem;
        border-width: 2px;
        border-left: 0;
        border-right: 0;
    }

    .sponsor-track {
        font-size: clamp(1.4rem, 6vw, 2.4rem);
         animation: sponsor-scroll 80s linear infinite;
    }
    .sponsor-group{
        min-width:225vw;
    }

    /* -----------------------------------------------------
       SECTION TITLES
       ----------------------------------------------------- */

    .title-services {
        font-size: clamp(2.4rem, 14vw, 2rem);
        line-height: 0.9;
    }

    .services {
        height: auto;
        min-height: 6rem;
        padding: 1rem 0;
    }

    .spacer {
        margin-top: 3rem;
    }

    .text-effect {
        font-size: clamp(3rem, 18vw, 9rem);
    }


    /* -----------------------------------------------------
       SERVICE CAROUSEL
       ----------------------------------------------------- */

    .service-carousel {
        --slide-width: min(86vw, 42rem);
        --slide-height: min(145vw, 560px);
        --distance: 72vw;

        width: calc(100% + (var(--page-padding) * 2));
        margin-left: calc(var(--page-padding) * -1);
    }

    .service-carousel-viewport {
        height: var(--slide-height);
    }

    .service-slide {
        width: var(--slide-width);
        height: var(--slide-height);
    }


    /* -----------------------------------------------------
       SERVICE CARD
       ----------------------------------------------------- */

    .service-main {
        width: 100%;
        height: 100%;
        min-height: 0;
        border-radius: 12px;
        background-size: cover;
    }

    .service-main-wrap {
        width: 100%;
        height: 100%;
        padding: clamp(1rem, 4vw, 1.5rem);
        border-radius: 12px;
    }

    .service-main-title {
        max-width: 72%;
        margin-bottom: 0.75rem;
        font-size: clamp(1.8rem, 8vw, 3rem);
        line-height: 0.95;
    }

    .service-title-outline-txt {
        font-size: clamp(3.5rem, 17vw, 3.5rem) !important;
    }

    .services-main-content-list {
        position: relative;
        z-index: 20;
        width: 62%;
        margin: 0;
        padding-left: 1.25rem;
        font-size: clamp(0.58rem, 2.6vw, 0.85rem);
        line-height: 1.25;
    }

    .services-main-content-list li::marker {
        font-size: 1.25rem;
        line-height: 1rem;
    }


    /* -----------------------------------------------------
       SERVICE VEHICLES
       Desktop uses large negative offsets.
       Reposition them proportionally on mobile.
       ----------------------------------------------------- */

    .service-vehicle {
        width: 92%;
        max-width: none;
        right: -18%;
        bottom: -5%;
    }

    .ecal-srv-veh-2,
    .decal-srv-veh-2 {
        width: 105%;
        right: -30% !important;
        bottom: -10% !important;
    }

    .ecal-srv-veh-3,
    .decal-srv-veh-3 {
        width: 100%;
        right: -28% !important;
        bottom: -5%;
    }


    /* -----------------------------------------------------
       SERVICE DECALS
       ----------------------------------------------------- */
    .decals {
        min-width: none;
    }
    .service-decal-1 {
        width: 115%;
        left: -5%;
        bottom: -38%;
    }

    .service-decal-2 {
        width: 100%;
        left: -20%;
        bottom: -28%;
    }

    .service-decal-3 {
        width: 100%;
        right: -55%;
        top: -28%;
        rotate:218deg;
    }


    /* -----------------------------------------------------
       SERVICE PRICE STICKER
       ----------------------------------------------------- */

    .service-main-pricing-container {
        right: -7%;
        bottom: -3%;
        transform: scale(0.72);
        transform-origin: right bottom;
    }

    .service-main-pricing-decal-wrap,
    .service-main-pricing-decal-img {
        width: min(93vw, 29rem);
    }

    .serivce-main-pricing-title {
        font-size: clamp(4.3rem, 17vw, 4rem);
    }

    .serivce-main-pricing-title-sp {
        font-size: clamp(1rem, 4vw, 1.5rem);
    }


    /* -----------------------------------------------------
       CAROUSEL LOADER
       ----------------------------------------------------- */

    .service-main-loader {
        width: min(320px, 70%);
        margin-top: 24px;
    }

    .service-main-loader-wrap {
        gap: 8px;
    }

    .loader-bar-container {
        height: 7px;
    }

    .service-main-loader-wrap::after {
        width: calc((100% - (8px * 3)) / 4);
        height: 7px;

        transform: translateX(
            calc(
                var(--progress, 0) *
                (100% + 8px)
            )
        );
    }


    /* -----------------------------------------------------
       SERVICE TABLE
       ----------------------------------------------------- */

    .service-table {
        width: 100%;
        margin-top: 3rem;
        border-width: 2px;
        border-radius: 12px;
    }

    .service-table-table {
        table-layout: fixed;
    }

    .service-table-td-0 {
        width: 40%;
        padding: 0.7rem 0.55rem;
        font-size: clamp(0.55rem, 2.3vw, 0.8rem);
        overflow-wrap: anywhere;
        border-bottom-width: 2px;
    }

    .service-table-td-n,
    .service-table-td3 {
        width: 30%;
        padding-inline: 0.2rem;
        font-size: clamp(1rem, 5vw, 1.5rem);
        border-bottom-width: 2px;
    }

    .service-table-subtxt {
        display: block;
        font-size: clamp(0.42rem, 1.8vw, 0.65rem);
        line-height: 1.1;
    }

    .service-table-td3-before {
        font-size: clamp(0.55rem, 2.5vw, 0.8rem);
    }

    .service-table-vehicle,
    .service-table-veh-wrapper {
        height: 2.25rem;
    }

    .body-content-faq{
        max-height:600px;
        height:600px;
    }

    /* -----------------------------------------------------
       FORM
       Existing form is already partially responsive.
       ----------------------------------------------------- */

    .shell {
        width: 100%;
        max-width: 100%;
    }

    .form-card {
        width: 100%;
        min-height: 0;
        border-radius: 22px;
    }

    .topbar {
        padding: 20px 20px 10px;
    }

    .step {
        padding-inline: 20px;
    }

    .progress {
        width: clamp(80px, 22vw, 130px);
    }

    .image-stage {
        margin-inline: -20px;
    }


    /* -----------------------------------------------------
       FAQ
       ----------------------------------------------------- */

    .FAQ-container {
        width: 100%;
    }

    .QA-container {
        width: 100%;
        min-height: 370px;
        max-height: none;
        padding-inline: 1rem;
    }

    .FAQ-title {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .title-FAQ {
        top: clamp(2rem, 9vw, 9rem) !important;
    }
    .pada-sponsor-group{
        min-height: 134vh;
  
    }
    .pada-sponsor-reels {
        width: 100%;
        height: 110%;
        /*transform: rotateZ(-5deg);*/
    }

    .pada-sponsor-reel--down .pada-sponsor-track {
        animation: pada-sponsor-scroll-down 120s linear infinite;
    }

    .pada-sponsor-reel--up .pada-sponsor-track {
        animation: pada-sponsor-scroll-up 120s linear infinite;
    }

    .pada-sponsor {
        margin: 0.45rem;
        padding: 7px 9px;
        border-width: 2px;
        border-radius: 10px;
    }

    .QA-tag {
        font-size: 0.375rem;
        letter-spacing: 2px;
        padding-bottom: 6px;
    }

    .QA-Q-ico {
        flex-shrink: 0;
        font-size: 3rem;
        width: 2rem;
    }

    .QA-Q {
        min-width: 0;
        padding-left: 6px;
        font-size: 0.75rem;
        font-weight: 900;
        line-height: 1.2;
    }

    .QA-A {
        min-width: 0;
        padding-right: 6px;
        font-size: 0.5rem;
        line-height: 1.3;
    }

    .QA-A-ico {
        flex-shrink: 0;
        width: 2rem;
        font-size: 1.5rem;
    }


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

    .rcd-footer {
        width: 100%;
        height: clamp(12rem, 55vw, 19rem);
    }

    .footer-decal-container {
        width: 140vw;
    }

    .footer-decal-img {
        width: 100%;
        bottom: clamp(-399px, -66vw, -96px)
    }

    .nav-footer {
        width: calc(100vw - 2rem);
        gap: 1rem;
        padding-inline: 0;
        font-size: 0.75rem;
    }

    .nav-footer-data {
        width: auto;
        gap: 1rem;
    }
}


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

@media (max-width: 600px) {

    :root {
        --page-padding: 1rem;
        --section-spacing: 3rem;
    }


    /* -----------------------------------------------------
       NAV
       ----------------------------------------------------- */

    .blur-nav-wrap {
        top: 8px;
        padding-inline: 8px;
    }

    .blur-nav {
        min-height: 52px;
        padding: 5px 6px 5px 12px;
    }

    .brand {
        font-size: 0.78rem;
    }

    .nav-cta {
        /*0display: none;*/
    }

    .menu-btn {
        width: 40px;
        height: 40px;
    }

    .nav-links{
        background-color:rgba(20, 20, 20, 0.966);
    }

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

.hero-wrapper {
    height: clamp(450px, 135vw, 590px);
    min-height: 450px;
}
.hero-wrap-container{
    height:750px;
}
#hero-container {
    top: 0;
}

/* do NOT resize the Three.js canvas in CSS */
#herovehicle {
    max-width: none;
    margin-left: 0;
}

.content-hero {
    padding-inline: 0.5rem;
    bottom: 0;
    margin-bottom:3rem;
    transform: translateY(-56%);
}
    .content-section {
        gap: 4px;
    }

    .hero-step {
        width: calc((100% - 8px) / 3);
        min-height: 6.7rem;
        padding: 8px;
        border-radius: 8px;
    }

    .hero-step-title {
        font-size: clamp(0.5rem, 2.4vw, 0.7rem);
    }

    .hero-step-subtitle {
        font-size: clamp(0.38rem, 1.8vw, 0.55rem);
    }




    #hero-container {
        top: -1.5rem;
    }

    #herovehicle {
        width: 160% !important;
        margin-left: -30%;
    }

    .content-hero {
        position: relative;
        bottom: auto;

        display: flex;
        flex-direction: column;
        gap: 0.65rem;

        width: 100%;
        padding-inline: 1rem;
    }

    .hero-step {
        position: relative;

        width: 100%;
        min-height: unset;

        display: grid;
        grid-template-columns: 3rem 1fr 2.5rem;
        align-items: center;
        gap: 0.8rem;

        padding: 0.85rem 1rem;

        border-radius: 10px;
        animation: hero-step-cascade 12s ease-in-out infinite;
        /*transform: none !important;*/
    }

    .hero-step-ico {
        width: 3rem;
        height: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hero-step-ico-container {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hero-step-ico img {
        max-width: 2rem;
        max-height: 2rem;
    }

    .hero-step-title {
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.1;
    }

    .hero-step-subtitle {
        display: block;
        margin-top: 0.2rem;

        font-size: 0.68rem;
        line-height: 1.25;
    }

    .hero-step-no {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .hero-step-no span {
        font-size: 1.4rem;
        font-weight: 900;
    }

    @keyframes hero-step-cascade {
        0% {
            transform: scale(1);
            opacity: 0.7;
        }

        10% {
            transform: scale(1.04);
            opacity: 1;
        }

        30% {
            transform: scale(1.04);
            opacity: 1;
        }

        40% {
            transform: scale(1);
            opacity: 0.7;
        }

        100% {
            transform: scale(1);
            opacity: 0.7;
        }
    }

    /* -----------------------------------------------------
       SERVICES
       ----------------------------------------------------- */

    .title-services {
        font-size: clamp(2.4rem, 14vw, 2rem);
    }

    .service-carousel {
        --slide-width: 88vw;
        --slide-height: min(148vw, 530px);
        --distance: 80vw;
    }

    .service-main-wrap {
        padding: 1rem;
    }

    .service-main-title {
        width: 75%;
        max-width: 75%;
        font-size: clamp(1.6rem, 8vw, 2.4rem);
    }

    .text-effect-svg{
        height: 4rem;
    }
    .service-title-outline-txt {
        font-size: clamp(3rem, 17vw, 3.5rem) !important;
    }

    .services-main-content-list {
        width: 65%;
        padding-left: 1rem;
        font-size: clamp(0.52rem, 2.5vw, 0.72rem);
    }

    .service-vehicle {
        width: 105%;
        right: -28%;
        bottom: -3%;
    }

    .decal-srv-veh-2,
    .decal-srv-veh-2 {
        width: 118%;
        right: -40% !important;
        bottom: -7% !important;
    }

    .decal-srv-veh-3,
    .decal-srv-veh-3 {
        width: 112%;
        right: -38% !important;
    }

    .service-main-pricing-container {
        right: -12%;
        bottom: -4%;
        transform: scale(0.58);
    }

    .service-main-loader {
        width: 62%;
        margin-top: 18px;
    }


    /* -----------------------------------------------------
       TABLE
       ----------------------------------------------------- */

    .service-table {
        margin-top: 2.5rem;
    }

    .service-table-td-0 {
        width: 42%;
        padding: 0.55rem 0.4rem;
    }

    .service-table-td-n,
    .service-table-td3 {
        width: 29%;
        font-size: clamp(0.9rem, 5vw, 1.25rem);
    }

    .services-content{
        min-width:auto;
    }
    
    .services-content{
        min-height: 600px;
    }

    /* -----------------------------------------------------
       FAQ
       ----------------------------------------------------- */
.body-content-faq{
    min-height:150px;
    height: 600px;
}
    .pada-sponsor-reel--down{
        display:none;
    }
    .pada-sponsor-reel--up{
        width:100%;

    }   
    .QA-A{
        font-size: 0.75rem;
        text-transform: capitalize;
    font-weight: 600;
    }

    .QA-container {
        min-height: 330px;
        padding-inline: 0.5rem;
    }
    

    .pada-sponsor-reels {
        width: 108%;
        margin-left: -0%;
        transform: rotateZ(0deg) !important;
    }

    .pada-sponsor {
        font-size: 16px;
    }


    /* -----------------------------------------------------
       FORM
       ----------------------------------------------------- */

    .field-grid {
        grid-template-columns: 1fr;
    }

    .field.full {
        grid-column: auto;
    }

    .topbar,
    .step,
    .footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .image-stage {
        height: 250px;
        margin-left: -16px;
        margin-right: -16px;
    }


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

    .rcd-footer {
        height: 11rem;
    }

    .footer-decal-container {
        width: 170vw;
    }

    .nav-footer {
        width: calc(100vw - 1.5rem);
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .nav-footer-data {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }

        .footer-decal-img {
        width: 100%;
        bottom: clamp(-260px, -67vw, -90px);
    }
    .title-footer{
        top: 32px;
    left: 95px;
    }

        .cookie-consent {
        width: calc(100% - 16px);
        bottom: 8px;
    }















    
    .cookie-consent-inner {
        flex-direction: column;
        align-items: stretch;

        gap: 16px;

        padding: 18px;

        border-radius: 20px;
    }

    .cookie-consent h3 {
        font-size: 1rem;
    }

    .cookie-consent p {
        font-size: .75rem;
    }

    .cookie-consent-actions {
        width: 100%;
    }

    .cookie-btn {
        flex: 1;
        min-width: 0;

        padding-inline: 10px;

        font-size: .75rem;
    }

}


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

@media (max-width: 390px) {

    .hero-wrapper {
        min-height: 430px;
    }

    .hero-step {
        min-height: 6rem;
        padding: 6px;
    }

    .service-carousel {
        --slide-width: 91vw;
        --slide-height: 500px;
    }

    .services-main-content-list {
        width: 68%;
    }

    .service-main-pricing-container {
        transform: scale(0.52);
    }

    .QA-Q {
        font-size: 0.68rem;
    }

    .QA-A {
        font-size: 0.48rem;
    }
}