﻿body.landing26 {
    background: url(/images/bg_26.webp) no-repeat center 0 var(--main-background-colour);
    /*background: var(--main-background-colour);*/
}


.home_one {
    height: auto;
    width: 100%;
    max-width: 100%;
    margin-bottom: 1em;
    margin-top: 0.5em;
}

    .home_one h1 {
        height: auto;
        width: 100%;
        max-width: 100%;
        padding: 0;
        font-size: 33px;
        line-height: 33px;
        text-align: left;
    }

.home_three {
    padding: 0 !important;
}

.yvc_black_button.btn_new {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    top: 10px;
    /* The inner element used to provide the button height via its padding;
       the double-button fix below zeroes that, so put the height back on
       the outer wrapper. */
    padding-block: 0.55em;
}

/* Fix double-stacked button visual on the home hero CTA.
   The base .yvc_black_button > * rule also paints the inner <a> as a button,
   which stacks visually on top of the outer .btn_new wrapper. Reset the
   inner element so only the outer wrapper shows the button styling. */
.yvc_black_button.btn_new > * {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    width: 100%;
    display: block;
    text-align: center;
    text-decoration: none;
    /* Kill the inner link's own focus/tap visuals so only the outer
       wrapper's 4px white outline shows when pressed. */
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}
.yvc_black_button.btn_new > *:focus,
.yvc_black_button.btn_new > *:focus-visible,
.yvc_black_button.btn_new > *:active {
    outline: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
.yvc_black_button.btn_new {
    -webkit-tap-highlight-color: transparent;
}

/* ----------------------------------------------------------------------
   Hero "Book Online Now" CTA — match the header "Get a Removals Quote"
   button exactly: same 23px latobold yellow text, and the same hover/click
   animation (brighten to yellow, black text, lift up with a chunky black
   shadow). Text stays "Book Online Now".
   ---------------------------------------------------------------------- */
.yvc_black_button.btn_new {
    font-family: 'latobold' !important;
    font-size: 23px !important;
    font-weight: normal !important;
    line-height: 30px !important;
    border: 3px solid #000 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}
.yvc_black_button.btn_new > * {
    font-family: 'latobold' !important;
    font-size: 23px !important;
    font-weight: normal !important;
    transition: color 0.2s ease !important;
}
.yvc_black_button.btn_new:hover,
.yvc_black_button.btn_new:active {
    background-color: #ffe440 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 0 0 #000, 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}
.yvc_black_button.btn_new:hover > *,
.yvc_black_button.btn_new:active > * {
    color: #000 !important;
}
/* No lift on touch devices (matches the header button's behaviour). */
@media (hover: none) {
    .yvc_black_button.btn_new:hover,
    .yvc_black_button.btn_new:active {
        transform: none !important;
        box-shadow: none !important;
        background-color: var(--black-background) !important;
    }
    .yvc_black_button.btn_new:hover > *,
    .yvc_black_button.btn_new:active > * {
        color: var(--dark-yellow-text) !important;
    }
}

.text_holder.curve_one.dark_text a
{
    color: black;
}

/* Stop the paragraph inside the gamble box adding extra bottom space */
.home_five .text_holder.curve_one.dark_text p {
    margin: 0;
}

.home_three .g51_home_content .g51_home_content_inner.selected {
    grid-template-columns: 1fr;
    padding: 1em;
}

.home_three .g51_home_content .g51_home_content_inner div:nth-child(1) {
    font-family: 'montserratbold';
    font-size: inherit;
    line-height: inherit;
}

.home_three .g51_home_content .g51_home_content_inner ul {
    font-size: 0.9em;
}

.home_four .text_holder, .home_five .text_holder {
    width: 100%;
    float: none;
    box-sizing: border-box;
}

.home_four .text_holder {
    background: white;
}

    .home_four {
        padding: 0;
        margin-top: 1em;
    }

.home_four, .home_five {
    height: fit-content;
}

.home_five {
    margin-top: 1em;
    padding: 0;
    width: 100%;
}

    .home_five .text_holder {
        display: block !important;
    }

.home26_yellow_button {
    font-family: 'montserratextrabold';
    color: black !important;
    background-color: var(--main-background-colour);
    padding: 1em;
    border-radius: 18px;
}
/*special*/
body {
    font-size: 20px;
}

h1 {
    box-sizing: border-box;
    margin: 0;
}

.jc_constrain {
    box-sizing: border-box;
    width: 100%;
    max-width: 920px;
    margin-inline: auto;
    padding-block: 1em;
    padding-top: 0;
    margin-top: 0;
    position: relative;
    top: -40px;
}

.jc_content {
    display: grid;
    gap: 10px;
}

.jc_collapse {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

.jc_slider {
    padding-bottom: 26px;
}

.jc_gap1 {
    background: #997e0b3d;
}

.jc_trust {
    display: grid;
    grid-template-columns: 1fr auto auto auto 1fr;
    gap: 20px;
    margin-bottom: 26px;
    align-items: center;
}

/* Match the footer badge styling: rounded white panels with consistent
   internal padding so each logo has equal breathing room from the edges.
   Force a single uniform size (120 x 60) on all three panels so they
   look like a tidy matching set even though the source images have
   different aspect ratios. object-fit: contain scales the logo inside
   each panel without distorting it. */
.jc_trust img {
    display: block;
    background: #ffffff;
    border-radius: 10px;
    box-sizing: border-box;
    width: 120px;
    height: 60px;
    padding: 8px 10px;
    object-fit: contain;
}

/* TrustATrader source image already has built-in whitespace around its
   logo, so use less CSS padding to match the visual size of the other two. */
.jc_trust img[src*="trustatrader"] {
    padding: 2px 4px;
}

/* Responsive sizing for the home-page badge row so it never forces the
   page wider than a phone viewport. At fixed 120px x 3 badges + gap,
   the row needs ~400px of horizontal space, which overflows narrow
   phones and causes the whole home page to scroll sideways. Scale the
   badges down at each mobile breakpoint so they always fit on a single
   line within the viewport. */
@media (max-width: 600px) {
    .jc_trust {
        gap: 10px;
    }
    .jc_trust img {
        width: 90px;
        height: 48px;
    }
}
@media (max-width: 480px) {
    .jc_trust {
        gap: 8px;
    }
    .jc_trust img {
        width: 78px;
        height: 42px;
    }
}
@media (max-width: 420px) {
    .jc_trust {
        gap: 6px;
    }
    .jc_trust img {
        width: 70px;
        height: 38px;
    }
}
@media (max-width: 360px) {
    .jc_trust img {
        width: 60px;
        height: 32px;
    }
}

.jc_desktop {
    display: none;
}

.jc_trust.jc_desktop {
    position: relative;
}


    .jc_trust.jc_desktop img {
        position: absolute;
        left: 40px;
        width: 150px;
    }

    .jc_trust.jc_desktop .jc_top_image {
        
        bottom: 140px;
    }

    .jc_trust.jc_desktop .jc_bottom_image 
    {
        bottom: 60px;
    }

.no_chance_button {
    place-content: end;
}


.jc_subtext {
    font-size: 0.8em;
    line-height: 0.9em;
}

.jc_special {
    display: grid;
    gap: 1em;
}

.jc_special.jc_mobile {
    margin-bottom: 1em;
}

    .jc_special.jc_mobile .jc_special_headline {
        font-family: 'montserratextrabold';
        font-size: 22px;
        line-height: 22px;
    }

.home_three .g51_home_content .g51_home_content_inner {
    display: none;
}

    .home_three .g51_home_content .g51_home_content_inner.selected {
        display: grid !important;
    }




        #lnkQuote3_tabBusinedd {
            position: relative;
            top: 86px;
            left: -36px;
        }

#lnkQuote4_tabDomestic {
    position: relative;
    left: -10px;
    top: 40px;
}

        @media (min-width: 600px) {
            .jc_special {
                grid-template-columns: 1fr auto;
            }
        }

        @media (min-width: 960px) {

            .jc_picture.jc_hero img {
                width: 100%;
                object-fit: cover;
                border-radius: 10px;
                height: 100%;
            }

            .jc_slider {
                padding-block: 26px;
            }

            .home_one {
                margin-bottom: 0;
            }

                .home_one h1 {
                    font-size: 1.4em;
                }

            .jc_desktop {
                display: block;
            }

                .jc_desktop.home_one {
                    display: grid;
                    gap: 1em;
                }

            .jc_mobile {
                display: none;
            }

            .yvc_black_button.jc_mobile > * {
                display: none;
            }

            .jc_header {
                display: grid;
                gap: 1em;
                grid-template-columns: 1fr 1fr;
            }


            .jc_chances {
                display: grid;
                gap: 1em;
            }

            .jc_tabs {
                height: 200px;
                background: #99990b3d;
            }

            .jc_secure {
                display: grid;
                grid-template-columns: 1fr 1fr;
            }
        }

@media (min-width: 960px) {
    .jc_constrain {
        padding-inline-end: 1em;
    }

}