/* ============================================================================
   STYLES FOR LOCATION PAGES (London, Sutton, Battersea, etc.)
   ============================================================================ */

/* Transparent so the body's brand yellow background (and its decorative
   Big Ben/van/furniture graphics) shows through the gaps between cards.
   Each section card has its own solid background so its text stays readable. */
.yvc_location_page {
    background: transparent;
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------------------------
   TWO-COLUMN LAYOUT: side nav on the left, content on the right.
   On mobile (<900px) the side nav collapses to a horizontal scrolling row
   above the content so it doesn't take up half the screen.
   --------------------------------------------------------------------------- */
.yvc-location-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    max-width: 1450px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Header review badges (top-right .google_one panel): now contains 3
   badges (Google, Trustpilot, TrustATrader) instead of 2. Widen the
   container, switch the grid to 3 columns, and wrap them all in a
   single white rounded panel - matching the look of the live site
   where the two badges share one rounded white box. */
.header_content .google_one {
    display: flex !important;
    align-items: center;
    gap: 14px;
    grid-template-columns: auto auto auto !important;
    width: auto !important;
    min-width: 0;
    background: #ffffff;
    border-radius: 0 0 10px 10px;
    padding: 5px 14px;
    box-sizing: border-box;
}
/* The base ak_style.css floats the images and links left, which makes
   gap useless. Force them back to block-flow so flex gap is respected. */
.header_content .google_one > a,
.header_content .google_one > a > img,
.header_content .google_one img {
    float: none !important;
}
.header_content .google_one img {
    width: 85px !important;
    height: auto;
    display: block;
}

/* Footer review badges - give Google and TrustATrader the same rounded
   corners as the Trustpilot badge so all three panels look consistent.
   Also ensures the images fill the 117px column at a consistent width.
   Internal padding gives each logo equal breathing room from the rounded
   white edges. */
.footer_img ul li img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    background: #ffffff;
    box-sizing: border-box;
    padding: 12px 14px;
}

/* The TrustATrader source image already has built-in whitespace around its
   logo, so applying the same CSS padding as the other two badges makes it
   look over-padded. Use less padding here to match the visual breathing
   room of Trustpilot and Google. */
.footer_img ul li img[src*="trustatrader"] {
    padding: 2px 4px;
}

/* Footer layout: on desktop, switch .footer_content from float-based to
   flexbox so the badges column (.footer_img) can be vertically centered
   within the black container. row-reverse preserves the visual order
   (info text on the left, badges on the right) that the existing
   float: right layout produced. */
@media (min-width: 760px) {
    .footer_content {
        display: flex !important;
        align-items: center;
        flex-direction: row-reverse;
        gap: 20px;
    }
    .footer_content > .footer_img,
    .footer_content > .footer_text {
        float: none !important;
    }
    .footer_content > .footer_img {
        flex: 0 0 117px;
        padding: 0 !important;
    }
    .footer_content > .footer_text {
        flex: 1 1 auto;
    }
}

/* SIDE NAV */
.yvc-location-sidenav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 20px;
    align-self: start;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    /* Buttons inside lift on hover via translateY(-3px) and have a chunky
       black shadow below. Without these padding values, the lift on the
       top button is clipped by overflow-y, and the shadow on the bottom
       button is clipped at the bottom. */
    padding-top: 6px;
    padding-bottom: 14px;
    /* Allow horizontal lift effects (none right now, but future-proof) */
    overflow-x: visible;
}

/* Helpful Info tabs (Why Yellow Van / Resources / FAQs) — make the
   gap between tabs match the Residential side-nav (10px). The grid
   was using gap:1em and each li also added margin-bottom:10px, which
   stacked to a noticeably bigger gap than the Residential nav. */
.helpful_info_tabs {
    gap: 10px !important;
}
.about_one .shadetabs .helpful_info_tabs li,
.about_one .shadetabs li.help {
    margin-bottom: 0 !important;
}

/* ============================================================================
   ABOUT PAGE OVERRIDES
   The About page has its own side nav (Why Yellow Van / Moving Office / etc)
   and a "black bubble" content tile. The user wants both to match the look
   of the Locations pages.
   ============================================================================ */

/* About page side nav buttons - match the look and feel of .yvc-location-link */
#g51_about_tabs_outer.old .outer_tab {
    padding: 12px 18px !important;
    background: #ffd302 !important;
    color: #000 !important;
    border: 3px solid #000 !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    font-family: 'latobold', sans-serif !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

#g51_about_tabs_outer.old .outer_tab:hover {
    background: #ffe440 !important;
    color: #000 !important;
}

#g51_about_tabs_outer .outer_tab.selected {
    background: #000 !important;
    color: #ffd302 !important;
    border-color: #000 !important;
}

#g51_about_tabs_outer .outer_tab.selected:hover {
    background: #222 !important;
    color: #ffd302 !important;
}

/* About page main content "black bubble" - convert to white tile matching the
   Locations pages (white bg, 3px black border, 14px rounded corners). */
.g51_about_content_outer .black_bubble {
    background: #FFFFFF !important;
    color: #000 !important;
    border: 3px solid #000 !important;
    border-radius: 14px !important;
    padding: 30px 40px !important;
}

.g51_about_content_outer .black_bubble .btn_holder {
    color: #000 !important;
}

/* The text content paragraphs inside the bubble */
.g51_about_content_outer .black_bubble .text_holder {
    color: #000 !important;
}

.g51_about_content_outer .black_bubble .text_holder p {
    color: #000 !important;
}

/* Keep links readable inside the white bubble */
.g51_about_content_outer .black_bubble a {
    color: #000;
}

/* "Get an instant quote" button on the About page &mdash; matches the
   secondary CTA style on Locations pages (yellow bg, black border, black text). */
.yvc-about-quote-btn {
    display: inline-block !important;
    padding: 8px 22px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 20px !important;
    line-height: 1.4 !important;
    border: 3px solid #000 !important;
    background: #ffd302 !important;
    color: #000 !important;
    text-align: center !important;
    cursor: pointer !important;
    min-height: 45px !important;
    min-width: 220px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    margin-top: 12px !important;
    transition: all 0.15s ease !important;
}

.yvc-about-quote-btn:hover {
    background: #ffe440 !important;
    color: #000 !important;
    text-decoration: none !important;
}

/* About page inner tab content (Our Customers / Areas Covered / Our Fleet)
   - match the text style of the white tile at the top:
   black text, 17px, line-height 1.6, no floats */
.g51_about_content_inner {
    padding: 20px 30px !important;
}

.g51_about_content_inner div {
    font-family: 'latobold', sans-serif !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: #1a1a1a !important;
    float: none !important;
    width: auto !important;
    margin-bottom: 14px !important;
}

.g51_about_content_inner div:nth-child(1) {
    float: none !important;
    font-family: 'latobold', sans-serif !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    font-weight: 700 !important;
}

.g51_about_content_inner div em {
    font-style: italic;
    color: #555;
}

/* ============================================================================
   FOR BUSINESS PAGE OVERRIDES
   Match the white-tile + black-text style of the About page.
   ============================================================================ */

/* Main intro paragraphs (the 2-column grid at the top of each tab) */
.desktop_visual_business_three .tab_content_holder .main_content {
    font-family: 'latobold', sans-serif !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: #1a1a1a !important;
    padding-bottom: 20px !important;
}

.desktop_visual_business_three .tab_content_holder .main_content p {
    font-family: 'latobold', sans-serif !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: #1a1a1a !important;
}

/* Common text section (the company examples list at the bottom of each tab) */
.desktop_visual_business_three .tab_content_holder .common_text {
    font-family: 'latobold', sans-serif !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: #1a1a1a !important;
}

.desktop_visual_business_three .tab_content_holder .common_text ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.desktop_visual_business_three .tab_content_holder .common_text ul li {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    color: #1a1a1a !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
}

/* Company names (Angel Upholstery, Solace Women's Aid, Paramount Properties) */
.desktop_visual_business_three .tab_content_holder .common_text ul li h4 {
    font-family: 'latobold', sans-serif !important;
    font-size: 17px !important;
    line-height: 1.3 !important;
    color: #000 !important;
    font-weight: 700 !important;
    margin: 0 0 10px 0 !important;
    text-transform: uppercase;
}

/* On smaller screens, stack the company examples vertically */
@media (max-width: 768px) {
    .desktop_visual_business_three .tab_content_holder .common_text ul {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   /END FOR BUSINESS PAGE OVERRIDES
   ============================================================================ */

/* ============================================================================
   /END ABOUT PAGE OVERRIDES
   ============================================================================ */

/* Side nav buttons: yellow background with black text and black border.
   Active state inverts to black background with yellow text so the
   current page is obvious. */
.yvc-location-link {
    display: block;
    padding: 12px 18px;
    background: #ffd302;
    color: #000;
    border: 3px solid #000;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 700;
    font-size: 17px;
    text-align: center;
    transition: all 0.15s ease;
}

.yvc-location-link:hover {
    background: #ffe440;
    color: #000;
    text-decoration: none;
}

.yvc-location-link.active {
    background: #000;
    color: #ffd302;
    border-color: #000;
}

.yvc-location-link.active:hover {
    background: #222;
    color: #ffd302;
}

/* CONTENT COLUMN */
.yvc-location-main {
    min-width: 0;
}

.yvc-location-main .yvc-location-hero,
.yvc-location-main .yvc-location-section {
    max-width: none;
    margin: 0 0 20px 0;
}

/* On smaller screens, drop the sidebar above the content */
@media (max-width: 900px) {
    .yvc-location-layout {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
    }
    /* If the JS hasn't loaded yet (fallback), at least show the nav as a
       horizontal scrolling strip rather than a stacked tower of buttons. */
    .yvc-location-sidenav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        max-height: none;
        overflow-y: visible;
    }
    .yvc-location-link {
        flex: 1 1 calc(50% - 5px);
        font-size: 15px;
        padding: 10px 12px;
    }
}

/* ============================================================================
   MOBILE LOCATION PICKER (native <select> inside the mobile header)
   On mobile, yvc_location_mobile_nav.js replaces the side navigation with a
   native HTML <select> element placed inside the .mobile_header bar (which
   is already sticky-on-scroll site-wide). This gives:
     - Native OS picker UI (iOS wheel, Android dropdown)
     - Perfectly-aligned options
     - Automatic sticky-at-top behavior (inherits from .mobile_header)
   The original side nav is hidden on mobile via display: none.
   ============================================================================ */
@media (max-width: 900px) {
    /* Hide the original location side nav on mobile - the native picker
       inside the mobile header takes its place. */
    .yvc-location-sidenav {
        display: none !important;
    }

    /* The mobile_header uses display:grid (from style23.css) with
       grid-template-columns: 1fr auto (logo, hamburger). We add the
       picker wrap as a THIRD grid item that spans both columns -
       grid-column: 1 / -1 places it on its own row at full width. This
       works WITH the grid layout instead of fighting it, so the picker
       is naturally centered and the same size in sticky/non-sticky. */

    /* Force the sticky variant of the header to keep the EXACT SAME
       dimensions as the non-sticky one - same padding, same width. The
       only thing that should change is position: fixed so it follows
       the user on scroll. */
    .mobile_header.sticky,
    .mobile_header.sticky.sticky {
        width: 100% !important;
        padding: 25px 25px !important;
        box-sizing: border-box !important;
        left: 0 !important;
        right: auto !important;
        top: 0 !important;
        background: #ffd302 !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    /* Picker wrap = third grid item, spanning both columns, on a new row */
    .yvc-location-mobile-picker-wrap {
        grid-column: 1 / -1 !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 14px 0 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        position: static !important;
        float: none !important;
        clear: both !important;
    }

    /* Yellow pill <select> sitting on its own row beneath the logo+menu
       inside the mobile header. We have to fight an aggressive global
       `select` rule in ak_style.css that uses `background: ... #fff
       !important` and `width: 94% !important` etc. - so the picker rule
       below uses the same shorthand + high specificity (mobile_header
       descendant + double class) and the !important. */
    .mobile_header select.yvc-location-mobile-picker,
    .mobile_header .yvc-location-mobile-picker.yvc-location-mobile-picker {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        /* Sized to match the .yvc-btn CTA buttons below on the page:
           same font-size (20px), padding, min-height, border, radius,
           chunky black shadow. Width fills like the buttons do. */
        background: #ffd302 url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 14px center / 22px !important;
        color: #000 !important;
        border: 3px solid #000 !important;
        border-radius: 10px !important;
        padding: 8px 44px 8px 22px !important;
        font-size: 20px !important;
        line-height: 1.4 !important;
        font-weight: 700 !important;
        font-family: inherit !important;
        cursor: pointer !important;
        text-align: center !important;
        text-align-last: center !important;
        /* Match the width of the white content tiles below
           (.yvc-location-section), which sit inside the layout with 12px
           padding on each side - so the tile is viewport minus 24px.
           94% gives the same look here in the header. */
        width: 94% !important;
        min-width: 220px !important;
        max-width: none !important;
        height: auto !important;
        min-height: 45px !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        box-shadow: 0 3px 0 0 #000 !important;
        /* inline-block (not block) so text-align:center on the wrap div
           centres us horizontally. */
        display: inline-block !important;
        margin: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
        text-transform: none !important;
        vertical-align: middle !important;
    }

    /* Tap focus ring */
    .yvc-location-mobile-picker:focus {
        outline: 2px solid #000;
        outline-offset: 2px;
    }
}

/* Style options consistently on browsers that allow it (some don't) */
.yvc-location-mobile-picker option {
    background: #fff;
    color: #000;
    font-weight: 700;
}

/* Force normal list behaviour inside location pages.
   The site's global CSS makes some lists inline/floaty which breaks the
   bulleted lists in our pricing and FAQ sections. */
.yvc_location_page ul {
    display: block;
    list-style: disc outside;
    padding-left: 24px;
    margin: 12px 0;
}

.yvc_location_page li {
    display: list-item;
    margin: 6px 0;
    float: none;
    width: auto;
    font-size: 17px;
    line-height: 1.6;
    color: #1a1a1a;
}

.yvc_location_page .yvc-location-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}

.yvc_location_page .yvc-location-hero {
    background: #FFFFFF;
    color: #000;
    padding: 60px 0 50px;
    border: 3px solid #000;
    border-radius: 14px;
    /* margin-top 0 so the hero tile lines up with the top of the side-nav
       buttons. 20px bottom keeps the spacing to the next tile. */
    margin: 0 auto 20px;
    max-width: 1200px;
}

.yvc_location_page .yvc-location-hero h1 {
    font-size: 32px;
    line-height: 1.3;
    margin: 0 0 16px;
    color: #000;
    font-weight: 700;
}

.yvc_location_page .yvc-location-lede {
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 24px;
    max-width: 720px;
    color: #1a1a1a;
}

.yvc_location_page .yvc-location-section {
    padding: 50px 0;
    border: 3px solid #000;
    border-radius: 14px;
    margin: 20px auto;
    max-width: 1200px;
    background: #FFFFFF;
    /* Force the section to fully contain its children &mdash; without this,
       long lists can overflow visually outside the bordered card on some pages. */
    display: block;
    overflow: visible;
    height: auto;
    min-height: auto;
    box-sizing: border-box;
    position: relative;
}

.yvc_location_page .yvc-location-section.yvc-bg-light {
    background: #FAFAFA;
}

/* Make sure the inner container also grows naturally with its content */
.yvc_location_page .yvc-location-container {
    overflow: visible;
    height: auto;
    min-height: auto;
}

/* Areas lists: explicitly positioned in normal flow so they can't escape
   the section card */
.yvc_location_page .yvc-areas-list {
    position: static !important;
    float: none !important;
    clear: both !important;
    display: block !important;
}

.yvc_location_page .yvc-areas-list li {
    position: static !important;
    float: none !important;
    display: list-item !important;
}

.yvc_location_page .yvc-location-section h2 {
    font-size: 26px;
    line-height: 1.3;
    margin: 0 0 20px;
    font-weight: 700;
    color: #000;
}

.yvc_location_page .yvc-location-section h3 {
    font-size: 20px;
    line-height: 1.3;
    margin: 24px 0 12px;
    font-weight: 700;
    color: #000;
    display: block;
    clear: both;
}

.yvc_location_page .yvc-location-section p {
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 16px;
    color: #1a1a1a;
}

/* Local photo: full-width inside the card, rounded corners to match site theme,
   caption underneath. */
.yvc_location_page .yvc-local-photo {
    margin: 0;
}

.yvc_location_page .yvc-local-photo img {
    width: 100%;
    max-width: 650px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
}

.yvc_location_page .yvc-local-photo figcaption {
    text-align: center;
    font-style: italic;
    margin-top: 14px;
    color: #555;
    font-size: 15px;
}

.yvc_location_page .yvc-reason {
    margin: 0 0 24px;
}

.yvc_location_page .yvc-reason h3 {
    margin-top: 0;
}

/* Links inside reason headings (service links on the For Business page).
   At rest (desktop): black bold text with a chunky yellow arrow signalling
   it's a link.
   On hover (desktop): brand-yellow "highlighter" sweeps in from left behind
   the text, the arrow slides right and turns black.
   On mobile / touch: hover doesn't really fire, so the highlight is shown
   as the default state instead - users still get the visual punch. */
.yvc_location_page .yvc-reason h3 a,
.yvc_location_page .yvc-reason h3 a:link,
.yvc_location_page .yvc-reason h3 a:visited {
    color: #000 !important;
    text-decoration: none !important;
    position: relative;
    display: inline-block;
    padding: 4px 38px 6px 10px;
    background-image: linear-gradient(120deg, #ffd302 0%, #ffd302 100%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    transition: background-size 0.35s ease;
    border-radius: 6px;
}

.yvc_location_page .yvc-reason h3 a::after {
    content: "\279C"; /* ➜  Heavy Round-Tipped Rightwards Arrow */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-55%);
    color: #ffd302;
    font-weight: 900;
    font-size: 1.25em;
    line-height: 1;
    transition: right 0.25s ease, color 0.25s ease;
    -webkit-text-stroke: 1px #ffd302; /* thicker arrow on browsers that support it */
}

.yvc_location_page .yvc-reason h3 a:hover,
.yvc_location_page .yvc-reason h3 a:focus,
.yvc_location_page .yvc-reason h3 a:active {
    color: #000 !important;
    text-decoration: none !important;
    background-size: 100% 100%;
}

.yvc_location_page .yvc-reason h3 a:hover::after,
.yvc_location_page .yvc-reason h3 a:focus::after {
    right: 6px;
    color: #000;
    -webkit-text-stroke: 1px #000;
}

/* Mobile / touch: no hover state, so show the highlight as default and
   keep the arrow in black so it pops against the yellow. */
@media (hover: none), (max-width: 768px) {
    .yvc_location_page .yvc-reason h3 a,
    .yvc_location_page .yvc-reason h3 a:link,
    .yvc_location_page .yvc-reason h3 a:visited {
        background-size: 100% 100% !important;
    }
    .yvc_location_page .yvc-reason h3 a::after {
        color: #000 !important;
        -webkit-text-stroke: 1px #000 !important;
        right: 8px !important;
    }
}

/* Areas list: render as plain paragraphs, left-aligned with the rest of
   the body text (no bullets, no list indentation). The area name is
   still visually distinct via <strong> bold + the yellow hover underline
   on the link. */
.yvc_location_page .yvc-areas-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 0 20px;
}

.yvc_location_page .yvc-areas-list li {
    margin: 8px 0;
    font-size: 17px;
    line-height: 1.6;
    padding-left: 0;
    text-indent: 0;
}

/* ============================================================================
   REVIEW SECTION - punchy, confident "in your face" treatment
   - Multi-platform rating banner: stars + rating headline at the top,
     three platform badges (TrustATrader, Google, Trustpilot) below
   - Centered properly with plenty of breathing room from the borders
   - Chunky black drop-shadow for that signature neo-brutalist confidence
   ============================================================================ */
.yvc_location_page .yvc-rating-banner {
    background: #ffd302;
    color: #000;
    padding: 50px 40px 40px;
    border: 3px solid #000;
    border-radius: 14px;
    margin: 0 0 28px;
    text-align: center;
    box-shadow: 0 6px 0 0 #000, 0 12px 24px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
}

/* Headline row: stars on the left of the line, "Rated 4.9+..." text */
.yvc_location_page .yvc-rating-headline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 20px;
    max-width: 100%;
}

.yvc_location_page .yvc-rating-headline .yvc-big-stars {
    color: #000;
    font-size: 28px;
    letter-spacing: 3px;
    line-height: 1;
    font-weight: 900;
}

.yvc_location_page .yvc-rating-headline .yvc-rating-text {
    color: #000;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: 0.3px;
}

/* Platform badges row - 3 equal-width columns via CSS grid.
   Each logo sits centred in its own column, which means the Google logo
   in the middle is guaranteed to be at the exact horizontal centre of
   the row, and TrustATrader / Trustpilot are evenly balanced either
   side of it regardless of their individual logo widths. */
.yvc_location_page .yvc-rating-platforms {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
    gap: 16px;
    max-width: 100%;
}

/* The reviews section (any yvc-location-section that contains a rating-banner)
   gets a properly white background, with generous top padding so the H2 is
   not crammed against the outer tile's top border. */
.yvc_location_page .yvc-location-section:has(.yvc-rating-banner) {
    background: #ffffff !important;
    padding: 40px 0 40px !important;
}

/* The reviews H2 heading now lives INSIDE the rating-banner. The global
   style.css rule h1,h2,h3,h4,h5 sets float:left on ALL headings, which would
   break this layout (the stars row would flow next to the H2 instead of
   below it), so we have to forcibly defeat it with !important and clear: both. */
.yvc_location_page .yvc-rating-banner > h2 {
    text-align: center !important;
    margin: 0 0 32px !important;
    padding: 0 !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #000 !important;
    float: none !important;
    width: 100% !important;
    display: block !important;
    clear: both !important;
}

/* Rating banner background is now WHITE (was yellow gradient).
   The yellow accents come from the stars + the underline on the H2 above. */
.yvc_location_page .yvc-rating-banner {
    background: #ffffff !important;
}

/* Stars - static, no animation. */
.yvc_location_page .yvc-rating-headline .yvc-big-stars {
    display: inline-block;
}

/* Platform logos - BARE images, no card around them.
   Default sizing, then per-logo overrides below to balance the visual weight
   (TrustATrader is a dense circular badge, Google is tightly-cropped,
   Trustpilot has the most internal whitespace, so they each need a
   different actual height to look like the same size on screen). */
.yvc_location_page .yvc-platform-logo {
    width: auto;
    object-fit: contain;
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    padding: 0 !important;
    box-shadow: none !important;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.25s ease;
}

/* Per-logo height overrides for equal visual presence. The TrustATrader
   logo is now a horizontal banner (1.67:1) matching Google's aspect
   ratio, so it gets the same height as Google. Trustpilot has more
   internal whitespace so it gets slightly more height. */
.yvc_location_page .yvc-rating-platforms .yvc-platform-logo:nth-child(1) {
    /* TrustATrader - new landscape banner logo */
    height: 50px;
}
.yvc_location_page .yvc-rating-platforms .yvc-platform-logo:nth-child(2) {
    /* Google - tightly cropped horizontal logo */
    height: 50px;
}
.yvc_location_page .yvc-rating-platforms .yvc-platform-logo:nth-child(3) {
    /* Trustpilot - has internal whitespace, needs a touch more */
    height: 58px;
}

@media (hover: hover) {
    .yvc_location_page .yvc-platform-logo:hover {
        transform: translateY(-4px) scale(1.05);
    }
}

/* Small screens: tighten everything up */
@media (max-width: 600px) {
    .yvc_location_page .yvc-location-section:has(.yvc-rating-banner) {
        padding: 50px 0 40px !important;
    }
    .yvc_location_page h2:has(+ .yvc-rating-banner) {
        font-size: 24px;
        margin: 0;
        padding-bottom: 0;
    }
    .yvc_location_page .yvc-rating-banner {
        padding: 22px 20px;
    }
    .yvc_location_page .yvc-rating-headline .yvc-big-stars {
        font-size: 22px;
    }
    .yvc_location_page .yvc-rating-headline .yvc-rating-text {
        font-size: 17px;
    }
    /* Mobile - same 3-column grid layout as desktop, just with smaller
       heights to make sure all three logos fit comfortably in one row. */
    .yvc_location_page .yvc-rating-platforms {
        gap: 8px !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        justify-items: center !important;
    }
    .yvc_location_page .yvc-rating-platforms .yvc-platform-logo {
        flex-shrink: 0 !important;
        max-width: 100% !important;
    }
    .yvc_location_page .yvc-rating-platforms .yvc-platform-logo:nth-child(1) {
        height: 36px !important;
    }
    .yvc_location_page .yvc-rating-platforms .yvc-platform-logo:nth-child(2) {
        height: 36px !important;
    }
    .yvc_location_page .yvc-rating-platforms .yvc-platform-logo:nth-child(3) {
        height: 40px !important;
    }
}

.yvc_location_page .yvc-review {
    background: #FFF;
    border: 3px solid #000;
    border-left: 8px solid #ffd302;
    padding: 24px 30px;
    margin: 0 0 20px;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
    .yvc_location_page .yvc-review:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
    }
}

.yvc_location_page .yvc-review p {
    margin: 8px 0;
    font-size: 18px;
    line-height: 1.55;
    color: #1a1a1a;
}

/* The review quote itself - a touch bigger and slightly italic for feel */
.yvc_location_page .yvc-review p:not(.yvc-stars) {
    font-size: 18px;
    font-style: italic;
    font-weight: 500;
}

/* BIG, BRIGHT, BOLD STARS - the most "in your face" element */
.yvc_location_page .yvc-review .yvc-stars {
    color: #F5B400;
    font-size: 24px;
    letter-spacing: 4px;
    margin: 0 0 12px;
    font-style: normal !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.yvc_location_page .yvc-review footer {
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    margin-top: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.yvc_location_page .yvc-review footer strong {
    color: #000;
}

/* PRICE TIER CARDS - the "in your face" treatment
   Used inside the pricing sections on Office Removals / Business Logistics /
   Commercial Clearance / Location pages.
   - Thick yellow border + chunky black drop shadow gives a confident "stamp"
   - Yellow strip across the top adds visual interest at rest
   - Hover lifts the whole card with a deeper shadow
   - The price itself is styled as a bold yellow chip so it pops at a glance
*/
.yvc_location_page .yvc-price-tier {
    background: #FFF;
    border: 4px solid #000;
    border-radius: 16px;
    padding: 28px 30px 26px;
    margin: 0 0 32px;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: relative;
    overflow: visible;
    /* Soft shadow for depth (solid drop removed to keep the black border clean) */
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Yellow accent strip across the top, sitting inside the card */
.yvc_location_page .yvc-price-tier::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 6px;
    background: #ffd302;
    border-radius: 0 0 8px 8px;
    pointer-events: none;
}

/* Lift on hover - desktop only (touch users get the resting state) */
@media (hover: hover) {
    .yvc_location_page .yvc-price-tier:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.08);
    }
}

.yvc_location_page .yvc-price-tier > * {
    position: static !important;
    float: none !important;
    clear: none !important;
}

.yvc_location_page .yvc-price-tier ul {
    display: block !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin: 16px 0 0 !important;
    position: static !important;
}

.yvc_location_page .yvc-price-tier li {
    display: list-item !important;
    margin: 10px 0 !important;
    float: none !important;
    position: static !important;
    list-style: none !important;
    font-size: 17px;
    color: #1a1a1a;
}

.yvc_location_page .yvc-price-tier h4 {
    margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.3;
    color: #000;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.yvc_location_page .yvc-price-tier h4 em {
    font-size: 14px;
    color: #666;
    font-style: italic;
    font-weight: 400;
    margin-left: 6px;
}

/* The price itself - displayed as a bold black chip with yellow text so it
   reads like a price tag and pops against the white card. */
.yvc_location_page .yvc-price-tier li strong {
    display: inline-block;
    font-size: 22px;
    font-weight: 900;
    color: #ffd302;
    background: #000;
    padding: 4px 12px;
    border-radius: 8px;
    line-height: 1.3;
    letter-spacing: 0.3px;
    margin-left: 4px;
}

@media (max-width: 768px) {
    .yvc_location_page .yvc-price-tier {
        padding: 22px 20px 20px;
    }
    .yvc_location_page .yvc-price-tier h4 {
        font-size: 20px;
    }
    .yvc_location_page .yvc-price-tier li strong {
        font-size: 16px;
        padding: 3px 8px;
        white-space: nowrap;
    }
}

/* Narrower screens (typical Android phones) - the "3-bed house:" label
   plus the price chip together can be just slightly too wide for the
   line. Shrink the chip a touch further so it stays on the same row. */
@media (max-width: 420px) {
    .yvc_location_page .yvc-price-tier li {
        font-size: 16px;
    }
    .yvc_location_page .yvc-price-tier li strong {
        font-size: 15px;
        padding: 2px 7px;
        margin-left: 2px;
    }
}

.yvc_location_page .yvc-faq-item {
    margin: 0 0 20px;
    padding: 0 0 16px;
    border-bottom: 1px solid #E5E5E5;
}

.yvc_location_page .yvc-faq-item:last-child {
    border-bottom: none;
}

.yvc_location_page .yvc-faq-item h3 {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.3;
}

/* CTA row - forced horizontal layout. Width 100% ensures it always fills its
   parent so the buttons can't get squeezed into a narrow column. */
.yvc_location_page .yvc-cta-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0;
    width: 100%;
    clear: both;
    align-items: center;
    justify-content: flex-start;
}

/* CTA buttons styled to match the site's nav buttons (10px rounded, 23px font,
   brand yellow #ffd302). Primary = black background like "Get a Removals Quote",
   secondary = yellow background like the Storage/About/Contact nav items.
   min-width and white-space:nowrap stop them collapsing into vertical strips
   if their container is narrow. */
.yvc_location_page .yvc-btn {
    display: inline-block !important;
    padding: 8px 22px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 20px;
    line-height: 1.4;
    border: 3px solid;
    transition: all 0.15s ease;
    text-align: center;
    cursor: pointer;
    min-height: 45px;
    min-width: 220px;
    white-space: nowrap;
    box-sizing: border-box;
    width: auto !important;
    flex: 0 0 auto;
}

.yvc_location_page .yvc-btn-primary {
    background: #000;
    color: #ffd302;
    border-color: #ffd302;
}

.yvc_location_page .yvc-btn-primary:hover {
    background: #222;
    text-decoration: none;
    color: #ffd302;
}

.yvc_location_page .yvc-btn-secondary {
    background: #ffd302;
    color: #000;
    border-color: #000;
}

.yvc_location_page .yvc-btn-secondary:hover {
    background: #ffe440;
    color: #000;
    text-decoration: none;
}

@media (max-width: 768px) {
    .yvc_location_page .yvc-location-hero {
        padding: 40px 0 30px;
    }
    .yvc_location_page .yvc-location-hero h1 {
        font-size: 28px;
    }
    .yvc_location_page .yvc-location-lede {
        font-size: 16px;
    }
    .yvc_location_page .yvc-location-section {
        padding: 30px 0;
    }
    .yvc_location_page .yvc-location-section h2 {
        font-size: 24px;
    }
    .yvc_location_page .yvc-cta-row {
        flex-direction: column !important;
    }
    .yvc_location_page .yvc-btn {
        width: 100% !important;
        min-width: 0;
        text-align: center;
    }
}

/* ============================================================================
   HELPFUL INFO PAGE - HERO TILE THEME OVERRIDE
   The original page renders the "Browse our useful resources" and FAQ intro
   tiles with a black background and yellow text. We're restyling them to
   the same white tile + black border look used across the rest of the site
   (Locations / About / For Business).
   ============================================================================ */
.about_one .help_content .main_content {
    background: #FFFFFF !important;
    color: #1a1a1a !important;
    border: 3px solid #000 !important;
    border-radius: 14px !important;
    padding: 40px 50px !important;
}

.about_one .help_content .main_content .btn_holder {
    color: #000 !important;
}

.about_one .help_content .main_content .btn_holder a {
    color: #000 !important;
}

.about_one .help_content .main_content .text_holder {
    color: #1a1a1a !important;
}

/* On smaller screens give the tile a bit of breathing room */
@media (max-width: 768px) {
    .about_one .help_content .main_content {
        padding: 28px 24px !important;
        border-radius: 14px !important;
    }
}

/* ============================================================================
   STORAGE PAGE - white tile theme on the intro text section
   The two paragraphs at the top of /storage ("Looking for a storage you can
   trust?" / "For business customers...") were sitting as raw text on the
   yellow page background. Wrap them in a white tile matching the styling
   used across Locations / Residential / Business sub-pages: white bg, 3px
   black border, 14px rounded corners, generous padding.
   ============================================================================ */
.need_some_stuff_container .content_one {
    background: #FFFFFF !important;
    color: #1a1a1a !important;
    border: 3px solid #000 !important;
    border-radius: 14px !important;
    padding: 30px 40px !important;
    margin: 0 0 28px !important;
    box-sizing: border-box;
}

/* Knock the inner ul/li back to readable paragraphs (the global ak_style
   makes them floating 46% columns - on a white tile that's a touch tight)
   and bump the font to match the bigger/bolder copy used on the rest of
   the site's content tiles (latobold, ~19px). */
.need_some_stuff_container .content_one ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.need_some_stuff_container .content_one ul li {
    width: auto !important;
    float: none !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'latobold', sans-serif !important;
    font-size: 19px !important;
    line-height: 1.55 !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

@media (max-width: 768px) {
    .need_some_stuff_container .content_one {
        padding: 24px 26px !important;
    }
    .need_some_stuff_container .content_one ul {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .need_some_stuff_container .content_one ul li {
        font-size: 17px !important;
    }
}

/* ============================================================================
   HELPFUL INFO - RESOURCES TILES
   The cards inside the Resources tab (Top Tips, Moving With Your Pet, etc.)
   were a plain layout. Apply the same white-tile + black-border + 14px
   rounded corner theme used across the rest of the site for consistency.
   Includes the chunky-lift hover effect for interactivity.
   ============================================================================ */
.about_one .help_content .resources_container ul.resources_container.grid > li.select {
    background: #FFFFFF !important;
    border: 3px solid #000 !important;
    border-radius: 14px !important;
    overflow: hidden;
    box-sizing: border-box;
    list-style: none !important;
    box-shadow: 0 4px 0 0 #000, 0 8px 16px rgba(0, 0, 0, 0.10);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
    .about_one .help_content .resources_container ul.resources_container.grid > li.select:hover {
        transform: translateY(-3px);
        box-shadow: 0 7px 0 0 #000, 0 12px 22px rgba(0, 0, 0, 0.15);
    }
}

/* Anchor inside the tile takes the whole card area and removes blue link
   colour - black text on white tile, consistent with the rest of the site. */
.about_one .help_content .resources_container ul.resources_container.grid > li.select > a,
.about_one .help_content .resources_container ul.resources_container.grid > li.select > a:link,
.about_one .help_content .resources_container ul.resources_container.grid > li.select > a:visited,
.about_one .help_content .resources_container ul.resources_container.grid > li.select > a:hover {
    color: #1a1a1a !important;
    text-decoration: none !important;
    display: block;
}

/* Inner content: image at top with a clean break, text below.
   No old g51 borders or rounded corners on the inner item div - the
   outer li handles all that now. */
.about_one .help_content .resources_container ul.resources_container.grid > li.select .g51_helpful_info_item {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.about_one .help_content .resources_container ul.resources_container.grid > li.select .g51_helpful_info_item .img_holder {
    overflow: hidden;
    border-bottom: 3px solid #000;
}

.about_one .help_content .resources_container ul.resources_container.grid > li.select .g51_helpful_info_item .img_holder img {
    display: block;
    width: 100% !important;
    height: 180px !important;
    object-fit: cover;
}

.about_one .help_content .resources_container ul.resources_container.grid > li.select .g51_helpful_info_item .text_holder {
    padding: 20px 24px !important;
    color: #1a1a1a !important;
    font-family: 'latobold', sans-serif !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
    background: #FFFFFF !important;
}

.about_one .help_content .resources_container ul.resources_container.grid > li.select .g51_helpful_info_item .text_holder h3 {
    color: #000 !important;
    margin: 0 0 10px !important;
    font-family: 'latobold', sans-serif !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

@media (max-width: 768px) {
    .about_one .help_content .resources_container ul.resources_container.grid > li.select .g51_helpful_info_item .text_holder {
        padding: 16px 18px !important;
        font-size: 16px !important;
    }
    .about_one .help_content .resources_container ul.resources_container.grid > li.select .g51_helpful_info_item .text_holder h3 {
        font-size: 18px !important;
    }
}

/* ============================================================================
   HELPFUL INFO TABS - styled to match the location-page side nav buttons
   (.yvc-location-link). Yellow with black border, 17px bold centered text,
   14px rounded corners. Active tab gets black background + yellow text.
   Includes the chunky lift+shadow hover effect used everywhere else.
   ============================================================================ */
.help_grid .shadetabs li.help a,
.help_grid .shadetabs li.help a:link,
.help_grid .shadetabs li.help a:visited {
    display: block !important;
    padding: 12px 18px !important;
    background: #ffd302 !important;
    color: #000 !important;
    border: 3px solid #000 !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    font-family: 'latobold', sans-serif !important;
    text-align: center !important;
    line-height: 1.3 !important;
    width: auto !important;
    height: auto !important;
    float: none !important;
    background-image: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* Hover: brighter yellow, lift up with chunky black drop shadow */
.help_grid .shadetabs li.help a:hover {
    background: #ffe440 !important;
    color: #000 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 0 0 #000, 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

/* Active/selected tab: black background, yellow text - matches the
   .yvc-location-link.active state on the location side nav. */
.help_grid .shadetabs li.help a.selected {
    background: #000 !important;
    color: #ffd302 !important;
    border-color: #000 !important;
    background-image: none !important;
}

.help_grid .shadetabs li.help a.selected:hover {
    background: #1a1a1a !important;
    color: #ffd302 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 0 0 #ffd302, 0 8px 16px rgba(0, 0, 0, 0.20) !important;
}

/* On mobile, slightly smaller font + padding (matches the location side
   nav mobile sizing). */
@media (max-width: 900px) {
    .help_grid .shadetabs li.help a,
    .help_grid .shadetabs li.help a:link,
    .help_grid .shadetabs li.help a:visited {
        font-size: 15px !important;
        padding: 10px 12px !important;
    }
}

/* ============================================================================
   CLIENT LOGO STRIP (Partners tile)
   Used on the For Business hub page. The tile sits at the very top of the
   main content column so it aligns with the top of the For Business sidenav
   button.
   ============================================================================ */

/* Pull the partners tile right to the top of the column so it aligns with
   the top of the side nav. */
.yvc_location_page .yvc-location-section.yvc-partners-tile {
    margin-top: 0;
    padding: 30px 0 24px;
}

.yvc_location_page .yvc-client-logos {
    display: flex !important;
    flex-wrap: nowrap;
    /* space-evenly gives equal whitespace around each logo regardless of
       logo width, so the gaps look consistent even when one logo has more
       built-in whitespace in its source file than another. */
    justify-content: space-evenly;
    align-items: center;
    gap: 0;
    list-style: none !important;
    padding: 0 12px !important;
    margin: 0 0 18px !important;
}

.yvc_location_page .yvc-client-logos li {
    display: flex !important;
    align-items: center;
    justify-content: center;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: auto !important;
    min-height: 75px;
    flex: 0 1 auto;
}

.yvc_location_page .yvc-client-logos li img {
    /* Fix the height so every logo sits on the same baseline; let widths
       vary naturally with each logo's aspect ratio so nothing gets squashed. */
    height: 80px;
    width: auto;
    max-width: 200px;
    display: block;
    object-fit: contain;
}

/* Responsive scaling for the partner logos strip.
   Above 900px: full desktop size (80px tall).
   900px - 700px (small desktop / tablet landscape): all 5 still shown, scaled down.
   700px - 600px (tablet portrait): all 5 still shown, smaller again.
   Below 600px (phone): drop to 3 logos - hide BT (1st) and Chelsea FC (2nd)
       so National Theatre, Costa Coffee and Great Ormond Street have room
       to display at a generous size. Bumped back up since fewer to fit.
*/
@media (max-width: 900px) {
    .yvc_location_page .yvc-client-logos {
        padding: 0 6px !important;
    }
    .yvc_location_page .yvc-client-logos li img {
        height: 60px;
        max-width: 150px;
    }
}
@media (max-width: 700px) {
    .yvc_location_page .yvc-client-logos li img {
        height: 42px;
        max-width: 100px;
    }
}
@media (max-width: 600px) {
    /* Phone: hide BT (1st li) and Chelsea FC (2nd li) so only 3 logos show. */
    .yvc_location_page .yvc-client-logos li:nth-child(1),
    .yvc_location_page .yvc-client-logos li:nth-child(2) {
        display: none !important;
    }
    .yvc_location_page .yvc-client-logos {
        padding: 0 8px !important;
    }
    .yvc_location_page .yvc-client-logos li img {
        height: 60px;
        max-width: 140px;
    }
}
@media (max-width: 420px) {
    .yvc_location_page .yvc-client-logos li img {
        height: 50px;
        max-width: 105px;
    }
}
@media (max-width: 360px) {
    .yvc_location_page .yvc-client-logos li img {
        height: 42px;
        max-width: 90px;
    }
}

.yvc_location_page .yvc-partners-caption {
    text-align: center !important;
    font-size: 16px !important;
    color: #555 !important;
    font-style: italic;
    margin: 0 !important;
    line-height: 1.4 !important;
}

@media (max-width: 768px) {
    /* Mobile - allow the 5 partner logos to wrap onto multiple rows
       so they don't overflow the viewport. flex-wrap: wrap centred
       means any logos on the last incomplete row stay centred too. */
    .yvc_location_page .yvc-client-logos {
        flex-wrap: wrap !important;
        gap: 18px 22px !important;
        justify-content: center !important;
    }
    .yvc_location_page .yvc-client-logos li {
        min-height: 50px;
        flex: 0 1 auto;
    }
    .yvc_location_page .yvc-client-logos li img {
        max-height: 50px;
        max-width: 100px;
    }
    .yvc_location_page .yvc-partners-caption {
        font-size: 14px !important;
    }
}

/* ============================================================================
   AREA LIST LINKS (Sutton, Battersea, Clapham etc on the London page)
   Clean black text in every state (no purple visited, no blue default).
   On hover, a brand-yellow underline sweeps in from left to right under the
   area name. Subtle but very on-brand.
   ============================================================================ */
.yvc_location_page .yvc-areas-list a,
.yvc_location_page .yvc-areas-list a:link,
.yvc_location_page .yvc-areas-list a:visited {
    color: #000 !important;
    text-decoration: none !important;
    background-image: linear-gradient(180deg, transparent 88%, #ffd302 88%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size 0.3s ease;
    padding-bottom: 1px;
}

.yvc_location_page .yvc-areas-list a:hover,
.yvc_location_page .yvc-areas-list a:focus,
.yvc_location_page .yvc-areas-list a:active {
    color: #000 !important;
    text-decoration: none !important;
    background-size: 100% 100%;
}

/* On mobile / touch (no hover), show the yellow underline as default so
   touch users still get the visual cue */
@media (hover: none), (max-width: 768px) {
    .yvc_location_page .yvc-areas-list a,
    .yvc_location_page .yvc-areas-list a:link,
    .yvc_location_page .yvc-areas-list a:visited {
        background-size: 100% 100% !important;
    }
}

/* ============================================================================
   UNIVERSAL BUTTON HOVER ANIMATION (applies sitewide)
   Same look-and-feel as the location-page side-nav buttons:
   - Lift slightly upward (3px)
   - Chunky black drop-shadow appears beneath
   - Background brightens to a lighter yellow
   - Smooth 0.2s transition
   Targets:
   - Location side-nav buttons (.yvc-location-link)
   - Top desktop menu buttons (.desktop_header .button_one)
   - Location-page CTA buttons (.yvc-btn primary + secondary)
   - "Get a Removals Quote" / book CTAs anywhere (.book.button_one, a.book)
   ============================================================================ */

/* Make sure all targeted buttons use a smooth transition */
.yvc-location-link,
.desktop_header .button_one,
.yvc_location_page .yvc-btn,
a.book.button_one,
.book.button_one {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

/* YELLOW BUTTONS - hover effect: lift + chunky black shadow + brighter yellow */
.yvc-location-link:hover,
.desktop_header .button_one:hover,
.yvc_location_page .yvc-btn-secondary:hover {
    background: #ffe440 !important;
    color: #000 !important;
    text-decoration: none !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 0 0 #000, 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

/* BLACK PRIMARY BUTTONS (e.g. yvc-btn-primary "Get a free quote") - same
   lift, but the chunky shadow is yellow to suit the dark background. */
.yvc_location_page .yvc-btn-primary:hover {
    background: #1a1a1a !important;
    color: #ffe440 !important;
    text-decoration: none !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 0 0 #ffd302, 0 8px 16px rgba(0, 0, 0, 0.20) !important;
}

/* The "Get a Removals Quote" CTA (.book class) appears in the desktop
   header, mobile menu, and footer. It uses .button_one styling but we want
   the same lift + chunky shadow treatment as the rest. */
a.book.button_one:hover,
.book.button_one:hover {
    background: #ffe440 !important;
    color: #000 !important;
    text-decoration: none !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 0 0 #000, 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

/* Side-nav ACTIVE button (the current page) gets the same lift treatment
   but keeps its black background and yellow text so the active state stays
   obvious. Yellow chunky shadow under it instead of black. */
.yvc-location-link.active:hover {
    background: #1a1a1a !important;
    color: #ffd302 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 0 0 #ffd302, 0 8px 16px rgba(0, 0, 0, 0.20) !important;
}

/* Disable the lift effect on touch devices - it makes no sense without
   a real hover, and prevents sticky highlight states on tap. */
@media (hover: none) {
    .yvc-location-link:hover,
    .desktop_header .button_one:hover,
    .yvc_location_page .yvc-btn:hover,
    .yvc_location_page .yvc-btn-primary:hover,
    .yvc_location_page .yvc-btn-secondary:hover,
    a.book.button_one:hover,
    .book.button_one:hover,
    .yvc-location-link.active:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* ============================================================================
   CONTACT PAGE - WHITE-TILE INTRO, BLACK BUTTON-TILES FOR PHONE/EMAIL,
   POLISHED MODERN FORM
   Same white-tile / black-border / 14px-rounded / latobold theme used across
   the rest of the site. Phone + email + quote blocks become big chunky black
   click-to-call / click-to-email / quote tiles.
   ============================================================================ */

.yvc-contact-page {
    padding-top: 16px;
    padding-bottom: 60px !important;
}

.yvc-contact-page > * {
    float: none !important;
}

.yvc-contact-page .textbox {
    width: auto !important;
    float: none !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* HERO ROW: intro tile on the left, phone + email + quote buttons stacked
   on the right. The 3 buttons stretch evenly to match the intro tile
   height on the left. */
.yvc-contact-page .yvc-contact-hero {
    display: grid !important;
    grid-template-columns: 1.3fr 1fr;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 40px;
    width: 100%;
}

.yvc-contact-page .yvc-contact-buttons {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    height: 100%;
}

.yvc-contact-page .yvc-contact-buttons > .yvc-contact-button {
    flex: 1 1 0;
    min-height: 70px;
}

/* LEFT INTRO - white tile to match the rest of the site. */
.yvc-contact-page .yvc-contact-intro {
    background: #FFFFFF !important;
    color: #1a1a1a !important;
    border: 3px solid #000 !important;
    border-radius: 14px !important;
    padding: 30px 32px !important;
    margin: 0 !important;
    box-sizing: border-box;
    width: auto !important;
    float: none !important;
}

.yvc-contact-page .yvc-contact-intro h1 {
    font-family: 'latobold', sans-serif !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    line-height: 1.35 !important;
    color: #1a1a1a !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}

.yvc-contact-page .yvc-contact-intro p {
    font-family: 'latobold', sans-serif !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
    color: #1a1a1a !important;
    margin: 0 0 14px !important;
}

.yvc-contact-page .yvc-contact-intro p:last-child {
    margin-bottom: 0 !important;
}

/* PHONE + EMAIL + QUOTE BUTTONS - chunky inverted version of the yellow
   "Call us on" button: black face, yellow border + text, yellow drop-shadow. */
.yvc-contact-page .yvc-contact-button {
    background: #000 !important;
    color: #ffd302 !important;
    border: 3px solid #ffd302 !important;
    border-radius: 12px !important;
    padding: 16px 22px !important;
    margin: 0 !important;
    box-sizing: border-box;
    width: 100% !important;
    float: none !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    box-shadow: 0 5px 0 0 #ffd302, 0 9px 18px rgba(0, 0, 0, 0.18) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    cursor: pointer;
    text-align: left;
}

@media (hover: hover) {
    .yvc-contact-page .yvc-contact-button:hover {
        background: #1a1a1a !important;
        color: #ffd302 !important;
        text-decoration: none !important;
        transform: translateY(-2px);
        box-shadow: 0 7px 0 0 #ffd302, 0 12px 22px rgba(0, 0, 0, 0.22) !important;
    }
}

.yvc-contact-page .yvc-contact-button > img {
    display: none !important;
}

.yvc-contact-page .yvc-contact-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    color: #ffd302;
}

.yvc-contact-page .yvc-contact-button-icon svg {
    width: 28px;
    height: 28px;
    display: block;
}

.yvc-contact-page .yvc-contact-button-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
    flex: 1 1 auto;
}

.yvc-contact-page .yvc-contact-button-label {
    display: block;
    font-family: 'latobold', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 1.3px;
    color: #FFFFFF !important;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 4px;
    opacity: 1;
}

.yvc-contact-page .yvc-contact-button-value {
    display: block;
    font-family: 'latobold', sans-serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    color: #ffd302 !important;
    line-height: 1.2;
    word-break: break-word;
}

.yvc-contact-page .yvc-contact-button-email .yvc-contact-button-value {
    font-size: 15px !important;
    text-transform: lowercase;
    word-break: break-all;
    letter-spacing: 0.2px;
}

.yvc-contact-page .yvc-contact-button-quote .yvc-contact-button-value {
    font-size: 18px !important;
}

/* FORM SECTION: heading row across the top with a down arrow, form tile
   centred below. */
.yvc-contact-page .yvc-contact-form-row {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    margin-top: 12px;
    width: 100%;
    clear: both;
}

.yvc-contact-page .yvc-contact-form-heading {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
}

.yvc-contact-page .yvc-contact-form-heading h2 {
    font-family: 'latobold', sans-serif !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    text-transform: uppercase;
    font-size: 28px !important;
    line-height: 1.2 !important;
    letter-spacing: 1px;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    text-align: center !important;
    width: 100%;
    float: none !important;
}

.yvc-contact-page .yvc-contact-form-heading h2 .yvc-contact-form-heading-arrow {
    margin-left: 10px;
}

.yvc-contact-page .yvc-contact-form-heading-arrow {
    display: inline-block;
    font-size: 32px;
    line-height: 1;
    color: #1a1a1a;
    animation: yvc-contact-arrow-bounce 1.8s ease-in-out infinite;
}

@keyframes yvc-contact-arrow-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

.yvc-contact-page .yvc-contact-form-tile {
    display: block;
    background: #FFFFFF !important;
    border: 3px solid #000 !important;
    border-radius: 14px !important;
    padding: 32px 36px !important;
    margin: 0 !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 720px;
    float: none !important;
    clear: both;
    box-shadow: 0 4px 0 0 #000, 0 8px 16px rgba(0, 0, 0, 0.08);
    text-align: left;
}

/* MODERN INPUT STYLING */
.yvc-contact-page .contact_form_grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 16px !important;
}

.yvc-contact-page .contact_form_grid > div {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.yvc-contact-page .contact_form_grid > div:nth-last-child(-n+4) {
    grid-column: 1 / -1;
}

.yvc-contact-page .contact_form_grid input[type="text"],
.yvc-contact-page .contact_form_grid input[type="email"],
.yvc-contact-page .contact_form_grid input[type="tel"],
.yvc-contact-page .contact_form_grid input[type="phone"],
.yvc-contact-page .contact_form_grid select,
.yvc-contact-page .contact_form_grid textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    background: #FFFFFF !important;
    color: #1a1a1a !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    font-family: 'latobold', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    box-shadow: 0 2px 0 0 #000 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

.yvc-contact-page .contact_form_grid textarea {
    min-height: 140px;
    resize: vertical;
    font-family: 'latobold', sans-serif !important;
}

.yvc-contact-page .contact_form_grid input::placeholder,
.yvc-contact-page .contact_form_grid textarea::placeholder {
    color: #8a8a8a !important;
    font-weight: 600;
    opacity: 1;
}

.yvc-contact-page .contact_form_grid input:focus,
.yvc-contact-page .contact_form_grid select:focus,
.yvc-contact-page .contact_form_grid textarea:focus {
    border-color: #FFD600 !important;
    box-shadow: 0 0 0 3px rgba(255, 214, 0, 0.35), 0 2px 0 0 #000 !important;
}

.yvc-contact-page .contact_form_grid input[type="button"][name="send"] {
    background: #000 !important;
    color: #FFD600 !important;
    border: 3px solid #000 !important;
    border-radius: 12px !important;
    padding: 16px 38px !important;
    font-family: 'latobold', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 4px 0 0 #000, 0 8px 16px rgba(0, 0, 0, 0.10);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin: 4px 0 0 !important;
    float: none !important;
}

@media (hover: hover) {
    .yvc-contact-page .contact_form_grid input[type="button"][name="send"]:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 0 0 #000, 0 10px 18px rgba(0, 0, 0, 0.16);
    }
}

.yvc-contact-page > hr {
    display: none;
}

@media (max-width: 1024px) {
    .yvc-contact-page .yvc-contact-hero {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .yvc-contact-page .yvc-contact-intro {
        padding: 24px 22px !important;
    }
    .yvc-contact-page .yvc-contact-intro h1 {
        font-size: 21px !important;
    }
    .yvc-contact-page .yvc-contact-intro p {
        font-size: 16px !important;
    }
    .yvc-contact-page .yvc-contact-button {
        padding: 13px 18px !important;
        gap: 12px;
    }
    .yvc-contact-page .yvc-contact-button-icon {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }
    .yvc-contact-page .yvc-contact-button-icon svg {
        width: 24px;
        height: 24px;
    }
    .yvc-contact-page .yvc-contact-button-value {
        font-size: 19px !important;
    }
    .yvc-contact-page .yvc-contact-button-email .yvc-contact-button-value {
        font-size: 13px !important;
    }
    .yvc-contact-page .contact_form_grid {
        grid-template-columns: 1fr;
    }
    .yvc-contact-page .yvc-contact-form-tile {
        padding: 22px 18px !important;
    }
    .yvc-contact-page .yvc-contact-form-heading h2 {
        font-size: 22px !important;
        gap: 10px;
    }
    .yvc-contact-page .yvc-contact-form-heading-arrow {
        font-size: 26px;
    }
}

/* ============================================================================
   HELPFUL INFO - WHY YELLOW VAN TILE REDESIGN
   Three separate tiles stacked vertically:
     1) Small intro tile  - title + button + brief description
     2) Photo tile        - portrait of Luke + bio underneath
     3) Detail tile       - the original company copy
   All three use the same white-tile theme as the rest of the site.
   ============================================================================ */

/* Stack the three tiles with consistent spacing. */
.yvc-why-yellow-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Neutralise the legacy .about_one .main_content layout (fixed 785px width,
   300px height, dark background, 2-column inner grid) for our 3 new tiles
   so each tile sits as a full-width white tile with text spanning all the
   way across. */
.help_content .yvc-why-yellow.main_content {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    background: #FFFFFF !important;
    color: #1a1a1a !important;
    border: 3px solid #000 !important;
    border-radius: 14px !important;
    padding: 28px 32px !important;
    box-shadow: 0 4px 0 0 #000, 0 8px 16px rgba(0, 0, 0, 0.08);
    float: none !important;
    box-sizing: border-box;
    overflow: hidden;
}

/* Force the text_holder inside our tiles to span full width (legacy CSS
   gave it width:50% float:right). */
.help_content .yvc-why-yellow.main_content .text_holder {
    width: 100% !important;
    float: none !important;
    font-family: 'latobold', sans-serif;
    font-weight: 700;
    color: #1a1a1a !important;
    font-size: 16px;
    line-height: 1.6;
}

.help_content .yvc-why-yellow.main_content .text_holder p {
    margin: 0 0 14px 0;
    color: #1a1a1a !important;
}

.help_content .yvc-why-yellow.main_content .text_holder p:last-child {
    margin-bottom: 0;
}

/* Button holder (title + quote button) - centre it on the intro tile and
   give it room above the brief paragraph. */
.help_content .yvc-why-yellow.main_content .btn_holder {
    width: 100% !important;
    float: none !important;
    font-family: 'latobold', sans-serif !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    line-height: 1.25 !important;
    color: #1a1a1a !important;
    text-align: center;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.help_content .yvc-why-yellow.main_content .btn_holder img {
    margin: 0 !important;
    width: auto !important;
    height: 56px;
    max-width: 100%;
}

.help_content .yvc-why-yellow.main_content .btn_holder a {
    display: inline-flex;
}

/* INTRO TILE (Why all the Yellow?) - 2-column layout matching the FAQ tile:
   big bold left-aligned title on the left (~40%), body text on the right
   (~60%). Overrides the generic centered layout above. */
.help_content .yvc-why-yellow.yvc-why-yellow-intro {
    display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 36px;
    align-items: start;
}

.help_content .yvc-why-yellow.yvc-why-yellow-intro .btn_holder {
    text-align: left !important;
    justify-content: flex-start !important;
    font-size: 38px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    display: block !important;
}

.help_content .yvc-why-yellow.yvc-why-yellow-intro .text_holder {
    font-family: 'latobold', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    color: #1a1a1a !important;
    width: 100% !important;
    float: none !important;
}

.help_content .yvc-why-yellow.yvc-why-yellow-intro .text_holder p {
    margin: 0 !important;
}

/* Mobile: drop to single column so the title doesn't squash. */
@media (max-width: 700px) {
    .help_content .yvc-why-yellow.yvc-why-yellow-intro {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .help_content .yvc-why-yellow.yvc-why-yellow-intro .btn_holder {
        font-size: 28px !important;
    }
}

/* CTA at the bottom of tile 3 - centered "Get an instant quote" button
   with a black border drawn around it. */
.help_content .yvc-why-yellow .yvc-why-yellow-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 28px 0 0 0;
    padding: 24px 0 0 0;
    border-top: 2px solid rgba(0, 0, 0, 0.12);
    width: 100%;
}

.help_content .yvc-why-yellow .yvc-why-yellow-cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 3px solid #000;
    border-radius: 12px;
    overflow: hidden;
    background: #FFD600;
    box-shadow: 0 4px 0 0 #000, 0 8px 16px rgba(0, 0, 0, 0.10);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    line-height: 0;
}

.help_content .yvc-why-yellow .yvc-why-yellow-cta-link img {
    display: block;
    height: 64px;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

@media (hover: hover) {
    .help_content .yvc-why-yellow .yvc-why-yellow-cta-link:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 0 0 #000, 0 10px 20px rgba(0, 0, 0, 0.16);
    }
}

@media (max-width: 600px) {
    .help_content .yvc-why-yellow .yvc-why-yellow-cta-link img {
        height: 52px;
    }
}

/* Photo tile - portrait photo centred at a sensible max width with the
   owner bio panel directly below it. */
.yvc-why-yellow-portrait {
    text-align: center;
}

.yvc-why-yellow .yvc-why-yellow-photo {
    margin: 0 auto 22px auto;
    padding: 0;
    border: 3px solid #000;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 0 0 #000, 0 8px 16px rgba(0, 0, 0, 0.10);
    box-sizing: border-box;
    max-width: 760px;
    width: 100%;
}

.yvc-why-yellow .yvc-why-yellow-photo img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

.yvc-why-yellow .yvc-why-yellow-photo figcaption {
    background: #FFD600;
    color: #1a1a1a;
    font-family: 'latobold', sans-serif;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    padding: 12px 16px;
    border-top: 3px solid #000;
    line-height: 1.3;
}

/* OWNER NOTE - sits under the photo as Luke's personal bio. Pale yellow
   background to read as a quote / personal note. */
.yvc-why-yellow .yvc-owner-note {
    margin: 0 auto;
    padding: 24px 26px;
    background: #FFF9D6;
    border: 3px solid #000;
    border-radius: 14px;
    box-shadow: 0 4px 0 0 #000, 0 8px 16px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    text-align: left;
    max-width: 760px;
}

.yvc-why-yellow .yvc-owner-note .yvc-owner-note-title {
    font-family: 'latobold', sans-serif;
    font-weight: 700;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #1a1a1a;
    margin: 0 0 12px 0;
    padding: 0 0 10px 0;
    border-bottom: 2px solid #1a1a1a;
}

.yvc-why-yellow .yvc-owner-note p {
    font-family: 'latobold', sans-serif;
    font-weight: 700;
    font-size: 15.5px;
    line-height: 1.6;
    color: #1a1a1a;
    margin: 0 0 12px 0;
    font-style: italic;
}

.yvc-why-yellow .yvc-owner-note p:last-child {
    margin-bottom: 0;
}

.yvc-why-yellow .yvc-owner-note .yvc-owner-signoff {
    margin-top: 14px;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    text-align: right;
    color: #444;
}

/* RESPONSIVE - shrink photo + note padding on phones. */
@media (max-width: 600px) {
    .yvc-why-yellow .yvc-why-yellow-photo {
        max-width: 100%;
    }
    .yvc-why-yellow .yvc-owner-note {
        padding: 20px 18px;
    }
    .yvc-why-yellow .yvc-owner-note .yvc-owner-note-title {
        font-size: 15px;
    }
    .yvc-why-yellow .yvc-owner-note p {
        font-size: 14.5px;
    }
}

/* ============================================================================
   HOME PAGE - BUSINESS / DOMESTIC TABS REDESIGN
   Replace the dark-tile look with the white-tile + black border + 14px
   rounded corners theme used across the rest of the site. Match latobold
   typography. Brand yellow active-tab indicator, brand yellow CTA button.
   ============================================================================ */

/* Wrap the whole tab block - margin below so the next tile doesn't crowd
   it. Explicit height:auto so the wrapper always sizes to its content. */
.yvc-home-tabs {
    margin-bottom: 28px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* The two clickable tab buttons at the top. No grid-gap so the black
   borders of the two tabs touch and form a visible black separator
   between them. */
.yvc-home-tabs .g51_home_tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 !important;
    margin-bottom: 0;
}

/* INACTIVE TAB - yellow (clearly clickable, "switch to me").
   ACTIVE TAB - white (visually merges with the white content tile below). */
.yvc-home-tabs .g51_home_tabs .inner_tab {
    height: auto !important;
    line-height: 1.2 !important;
    padding: 16px 12px !important;
    background: #FFD600 !important;
    color: #1a1a1a !important;
    border: 3px solid #000 !important;
    border-bottom: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    font-family: 'latobold', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    top: 0 !important;
    position: relative !important;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/* Solid black 4px divider between the two tabs so you can clearly see
   they're separate buttons, regardless of which is active. */
.yvc-home-tabs .g51_home_tabs .inner_tab:first-child {
    border-right-width: 4px !important;
}
.yvc-home-tabs .g51_home_tabs .inner_tab:last-child {
    border-left-width: 0 !important;
}

.yvc-home-tabs .g51_home_tabs .inner_tab:hover {
    background: #ffe440 !important;
}

.yvc-home-tabs .g51_home_tabs .inner_tab.selected {
    background: #FFFFFF !important;
    color: #1a1a1a !important;
    height: auto !important;
    padding: 18px 12px !important;
    top: 0 !important;
    font-size: 19px !important;
}

.yvc-home-tabs .g51_home_tabs .inner_tab.selected:hover {
    background: #FFFFFF !important;
}

/* The main content tile that holds the tab body. Simple even padding all
   around so the border wraps neatly around the intro + bullets. Explicit
   height:auto so the tile always grows to fit content (some legacy CSS
   leaks a height constraint that was clipping the longer Domestic content). */
.yvc-home-tabs .g51_home_content {
    width: 100% !important;
    padding: 32px 36px !important;
    background: #FFFFFF !important;
    color: #1a1a1a !important;
    border: 3px solid #000 !important;
    border-top: 0 !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: 0 4px 0 0 #000, 0 8px 16px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    overflow: visible !important;
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.yvc-home-tabs .g51_home_content .g51_home_content_inner {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.yvc-home-tabs .g51_home_content .g51_home_content_inner > div {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Reset the inner content layout so our new structure controls everything. */
.yvc-home-tabs .g51_home_content .g51_home_content_inner.selected {
    display: block !important;
    grid-template-columns: 1fr !important;
    padding: 0 !important;
}

.yvc-home-tabs .g51_home_content .g51_home_content_inner > div:first-child,
.yvc-home-tabs .g51_home_content .g51_home_content_inner .yvc-home-tab-intro {
    float: none !important;
    width: 100% !important;
    font-family: 'latobold', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
    color: #1a1a1a !important;
    margin: 0 0 22px 0 !important;
    padding: 0 !important;
    text-align: left;
}

.yvc-home-tabs .g51_home_content .g51_home_content_inner > div:nth-child(2) {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    position: static !important;
    float: none !important;
}

/* The bullet list - two columns on desktop, one on mobile, brand yellow
   markers, polished latobold typography. */
.yvc-home-tabs .yvc-home-tab-list {
    list-style: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 32px;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

.yvc-home-tabs .yvc-home-tab-list li {
    position: relative;
    padding-left: 56px;
    min-height: 42px;
    font-family: 'latobold', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15.5px !important;
    line-height: 1.5 !important;
    color: #1a1a1a !important;
    list-style: none !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Big chunky yellow CIRCLE bullet with a thick black tick mark inside.
   Stamp-like, on-brand, and gives each bullet visible character. The tick
   is drawn with CSS borders on a pseudo-element so it scales crisply
   without an image asset. */
.yvc-home-tabs .yvc-home-tab-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background: #FFD600;
    border: 3px solid #000;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 0 3px 0 0 #000, 0 5px 10px rgba(0, 0, 0, 0.12);
}

/* The tick mark inside the circle. */
.yvc-home-tabs .yvc-home-tab-list li::after {
    content: "";
    position: absolute;
    left: 13px;
    top: 9px;
    width: 11px;
    height: 18px;
    border-right: 4px solid #1a1a1a;
    border-bottom: 4px solid #1a1a1a;
    transform: rotate(45deg);
    box-sizing: border-box;
    pointer-events: none;
}

.yvc-home-tabs .yvc-home-tab-list li strong {
    display: block;
    margin-bottom: 4px;
    color: #1a1a1a;
    font-family: 'latobold', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
}

/* CTA button - inline-block so it sizes to its text content. Pinned to
   the tile's bottom-left corner with absolute positioning + bottom:-28px
   so the bottom half breaks out of the tile while the top half stays in. */
.yvc-home-tabs .yvc-home-tab-cta,
.yvc-home-tabs a.home26_yellow_button {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 14px 28px !important;
    background: #FFD600 !important;
    color: #1a1a1a !important;
    border: 3px solid #000 !important;
    border-radius: 12px !important;
    font-family: 'latobold', sans-serif !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-decoration: none !important;
    box-shadow: 0 4px 0 0 #000, 0 8px 16px rgba(0, 0, 0, 0.10);
    transition: box-shadow 0.15s ease, background 0.15s ease, transform 0.15s ease;
    cursor: pointer;
    position: absolute !important;
    left: 36px !important;
    bottom: -28px !important;
    top: auto !important;
    right: auto !important;
    box-sizing: border-box;
    line-height: 1.2;
    z-index: 2;
    transform: none !important;
    white-space: nowrap;
}

@media (hover: hover) {
    .yvc-home-tabs .yvc-home-tab-cta:hover,
    .yvc-home-tabs a.home26_yellow_button:hover {
        background: #ffe440 !important;
        box-shadow: 0 6px 0 0 #000, 0 10px 18px rgba(0, 0, 0, 0.16) !important;
        transform: translateY(-2px) !important;
    }
}

/* Mobile: stack the two tabs and collapse the bullet list to one column. */
@media (max-width: 700px) {
    .yvc-home-tabs .g51_home_content {
        padding: 22px 20px !important;
    }
    .yvc-home-tabs .g51_home_tabs .inner_tab {
        padding: 12px 10px !important;
        font-size: 16px !important;
    }
    .yvc-home-tabs .g51_home_tabs .inner_tab.selected {
        padding: 14px 10px !important;
        font-size: 16px !important;
    }
    .yvc-home-tabs .g51_home_content .g51_home_content_inner > div:first-child,
    .yvc-home-tabs .g51_home_content .g51_home_content_inner .yvc-home-tab-intro {
        font-size: 16px !important;
    }
    .yvc-home-tabs .yvc-home-tab-list {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .yvc-home-tabs .yvc-home-tab-list li {
        font-size: 14.5px !important;
        padding-left: 50px;
        min-height: 36px;
    }
    .yvc-home-tabs .yvc-home-tab-list li::before {
        width: 34px;
        height: 34px;
    }
    .yvc-home-tabs .yvc-home-tab-list li::after {
        left: 11px;
        top: 7px;
        width: 9px;
        height: 16px;
        border-right-width: 3px;
        border-bottom-width: 3px;
    }
    .yvc-home-tabs .yvc-home-tab-list li strong {
        font-size: 15.5px;
    }
    .yvc-home-tabs .yvc-home-tab-cta,
    .yvc-home-tabs a.home26_yellow_button {
        display: inline-block !important;
        width: auto !important;
        text-align: center;
        padding: 12px 18px !important;
        font-size: 15px !important;
        margin: 0 !important;
        left: 20px !important;
        bottom: -24px !important;
    }
}

/* ============================================================================
   HOME PAGE - "DON'T TAKE A GAMBLE" SECTION CTA BUTTON
   The original StringPlaceholder rendered nothing, leaving just a thin black
   bar at the bottom of the page. Now uses literal text in a properly-styled
   chunky yellow button to match the site's other CTAs.
   ============================================================================ */
.yvc-gamble-button-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 20px !important;
}

a.yvc-gamble-button,
.yvc-gamble-button-wrap a.yvc-gamble-button:link,
.yvc-gamble-button-wrap a.yvc-gamble-button:visited {
    display: inline-block !important;
    padding: 16px 36px !important;
    background: #FFD600 !important;
    color: #1a1a1a !important;
    border: 3px solid #000 !important;
    border-radius: 12px !important;
    font-family: 'latobold', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none !important;
    box-shadow: 0 4px 0 0 #000, 0 8px 16px rgba(0, 0, 0, 0.10);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    cursor: pointer;
    line-height: 1.2;
    width: auto !important;
    min-width: 240px;
    text-align: center;
    box-sizing: border-box;
}

@media (hover: hover) {
    a.yvc-gamble-button:hover {
        background: #ffe440 !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 0 0 #000, 0 10px 18px rgba(0, 0, 0, 0.16) !important;
        color: #1a1a1a !important;
        text-decoration: none !important;
    }
}

@media (max-width: 600px) {
    /* Force wrap to fill its parent so button matches title tile above */
    .yvc-gamble-button-wrap {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }

    a.yvc-gamble-button,
    .yvc-gamble-button-wrap a.yvc-gamble-button:link,
    .yvc-gamble-button-wrap a.yvc-gamble-button:visited {
        display: block !important;
        padding: 18px 22px !important;
        font-size: 16px !important;
        width: 100% !important;
        min-width: 0;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
}

/* ============================================================================
   LOCATION PAGES - "WHAT CHANGES THE PRICE" BULLET LIST
   Professional chunky-yellow-square bullets matching the site's design
   language. Replaces the bare/unstyled <li> that legacy CSS leaves behind.
   ============================================================================ */
.yvc-price-factors {
    list-style: none !important;
    padding: 0 !important;
    margin: 14px 0 22px 4px !important;
    box-sizing: border-box;
}

.yvc-price-factors li {
    position: relative;
    padding: 6px 0 6px 34px;
    margin: 0;
    font-family: 'latobold', sans-serif !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
    color: #1a1a1a !important;
    list-style: none !important;
    float: none !important;
    width: auto !important;
}

/* Chunky yellow square bullet with thick black border and a small
   drop-shadow for a lifted, on-brand feel. */
.yvc-price-factors li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 16px;
    height: 16px;
    background: #FFD600;
    border: 2.5px solid #000;
    border-radius: 3px;
    box-sizing: border-box;
    box-shadow: 0 2px 0 0 #000;
}

/* Mobile: slightly smaller bullets so they don't dominate on phones. */
@media (max-width: 600px) {
    .yvc-price-factors li {
        font-size: 15.5px !important;
        padding-left: 28px;
    }
    .yvc-price-factors li::before {
        width: 13px;
        height: 13px;
        top: 11px;
        border-width: 2px;
    }
}