/* ============================================================================
   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;
}


/* 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;
}


/* 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;
    }
}


/* ============================================================================
   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;
    }
}


/* ============================================================================
   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;
    }
}