/*
 * Homepage refresh (2026 redesign — TwoFools mockup)
 * Loaded ONLY on the homepage via @section('styles') in front/home.blade.php.
 * Everything is scoped under .home-2026 so no other page is affected.
 * Colors approximated from the mockup PDF; swap for exact Figma values when available.
 */

:root {
    --vch-navy: #101C3C;
    --vch-navy-deep: #0B1530;
    --vch-red: #C4112E;
    --vch-red-dark: #A30E26;
    --vch-off-white: #F4F6F9;
    --vch-muted: #5A6478;
}

/* The layout yields content inside a padded .container-fluid; pull the
   bands to the viewport edges the same way Bootstrap rows do. */
section.home-2026 {
    margin-left: -15px;
    margin-right: -15px;
}

/* Figma: every refresh band runs full width with ~48px side margins —
   no centred max-width container. */
.home-2026 .container {
    max-width: 100%;
    padding-left: 3rem;
    padding-right: 3rem;
}

/* ---------- Hero ---------- */

.home-2026.hero-2026 {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 5rem 0 6rem;
}

/* Figma: the photo stays bright — only a light wash behind the copy for legibility */
.home-2026.hero-2026::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 21, 48, 0.5) 0%, rgba(11, 21, 48, 0.15) 45%, rgba(11, 21, 48, 0) 70%);
}

.home-2026.hero-2026 > .container {
    position: relative;
    z-index: 1;
}

.home-2026 .hero-pill {
    display: inline-block;
    padding: 0.35rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(11, 21, 48, 0.35);
    border-radius: 999px;
    color: #fff;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.home-2026 .hero-copy h1 {
    color: #fff;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.home-2026 .hero-sub {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.3rem;
    margin-bottom: 1.75rem;
}

.home-2026 .hero-cta {
    background-color: var(--vch-red);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.75rem;
    border-radius: 6px;
    border: 0;
}

.home-2026 .hero-cta:hover,
.home-2026 .hero-cta:focus {
    background-color: var(--vch-red-dark);
    color: #fff;
    text-decoration: none;
}

/* ---------- Booking card ---------- */

.home-2026 .booking-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(11, 21, 48, 0.35);
    /* Extra padding now that the card heading is gone. */
    padding: 2rem 1.5rem;
    max-width: 560px;
    margin-left: auto;
    text-align: left;
}

.home-2026 .booking-card-title {
    color: var(--vch-navy);
    font-size: 1.5rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 0.25rem;
}

.home-2026 .booking-card-sub {
    color: var(--vch-muted);
    font-size: 0.85rem;
    text-align: center;
    margin-bottom: 1.25rem;
}

/* Reflow the shared widget's grid inside the narrow card:
   full-width locations, date/time side by side, full-width button.
   CSS-only overrides — the widget partial itself is untouched. */

.home-2026 .booking-card .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
}

.home-2026 .booking-card .col-md-3 {
    flex: 0 0 50%;
    max-width: 50%;
}

.home-2026 .booking-card [class*="offset-md"] {
    margin-left: 0;
}

/* Restore small gutters inside the widget's no-gutters rows so the
   date/time pair doesn't touch */
.home-2026 .booking-card .row.no-gutters {
    margin-left: -0.35rem;
    margin-right: -0.35rem;
}

.home-2026 .booking-card .row.no-gutters > [class*="col-"] {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

/* Figma field treatment: uppercase label above a soft grey rounded input
   with the icon inside on the left (labels injected by home.blade.php JS) */
.home-2026 .booking-card .bk-label {
    display: block;
    /* the widget's flight-number column is text-right; labels stay left */
    text-align: left;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vch-muted);
    margin: 0.65rem 0 0.3rem;
}

/* The widget's delivery-address rows carry no injected label, so give
   them the same gap the labels create elsewhere */
.home-2026 .booking-card #pickup_line_1,
.home-2026 .booking-card #pickup_line_2,
.home-2026 .booking-card #pickup_suburb,
.home-2026 .booking-card #return_line_1,
.home-2026 .booking-card #return_line_2,
.home-2026 .booking-card #return_suburb {
    margin-top: 0.65rem;
}

.home-2026 .booking-card .input-group {
    background: var(--vch-off-white);
    border: 1px solid #E3E7EF;
    border-radius: 8px;
    overflow: hidden;
    align-items: center;
    flex-wrap: nowrap;
}

.home-2026 .booking-card .input-group-text {
    background: transparent;
    border: 0;
    color: var(--vch-red);
    font-size: 0.85rem;
    padding: 0.375rem 0.25rem 0.375rem 0.75rem;
}

.home-2026 .booking-card .input-group .form-control {
    background: transparent;
    border: 0;
    box-shadow: none;
    font-size: 0.85rem;
    color: var(--vch-navy);
    height: 2.5rem;
}

.home-2026 .booking-card .btn-search {
    background-color: var(--vch-red);
    border-color: var(--vch-red);
    border-radius: 8px !important;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.7rem 1rem;
    margin-top: 0.9rem;
}

.home-2026 .booking-card .btn-search:hover {
    background-color: var(--vch-red-dark);
    border-color: var(--vch-red-dark);
}

/* ---------- Utility strip: now styled globally in site-refresh.css
   (.strip-2026), since the partial is shared with inner pages ---------- */

/* ---------- Intro band ---------- */

/* Navy ground so the band reads as a break between the hero and the white
   reviews band, rather than another pale section. */
.home-2026.intro-2026 {
    background: var(--vch-navy);
    padding: 4.5rem 0;
}

.home-2026 .intro-2026-inner {
    display: flex;
    align-items: flex-start;
    max-width: 1100px;
    margin: 0 auto;
}

/* The "40 Years" lockup. Flex gap is avoided here for older browsers. */
.home-2026 .intro-2026-stat {
    flex: 0 0 auto;
    padding-right: 3rem;
    margin-right: 3rem;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
}

.home-2026 .intro-2026-stat-num {
    display: block;
    color: var(--vch-red);
    font-size: 3.75rem;
    font-weight: 800;
    line-height: 0.9;
}

.home-2026 .intro-2026-stat-label {
    display: block;
    margin-top: 0.5rem;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.home-2026 .intro-2026-copy {
    flex: 1 1 auto;
}

.home-2026 .intro-2026-lede {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.9375rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.home-2026 .intro-2026-kicker {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 0;
}

/* Stack the stat above the copy once the two columns get tight. */
@media (max-width: 767.98px) {
    .home-2026.intro-2026 {
        padding: 3rem 0;
    }

    .home-2026 .intro-2026-inner {
        display: block;
    }

    .home-2026 .intro-2026-stat {
        padding: 0 0 1.5rem;
        margin: 0 0 1.75rem;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        text-align: left;
    }

    .home-2026 .intro-2026-stat-num {
        font-size: 2.75rem;
    }

    .home-2026 .intro-2026-lede {
        font-size: 0.9375rem;
        line-height: 1.75;
    }
}

/* ---------- Reviews band ---------- */

/* Figma: reviews sit on white with light-bordered cards */
.home-2026.reviews-2026 {
    background: #fff;
    padding: 3rem 0;
}

/* Horizontal lockup: bare G left, score + stars beside it, count below */
.home-2026 .reviews-badge {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.85rem;
    align-items: center;
    justify-items: start;
    text-align: left;
    margin-bottom: 1rem;
}

.home-2026 .reviews-badge .reviews-score {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.home-2026 .reviews-badge p {
    grid-column: 2;
    margin: 0;
}

/* Chevron controls sit outside the cards inside the carousel's own padding
   (shared by the reviews and featured-vehicles carousels) */
.home-2026 .carousel-2026 {
    padding: 0 3.25rem;
}

/* Figma: circular white buttons with a light border, vertically centred */
.home-2026 .carousel-2026 .carousel-control-prev,
.home-2026 .carousel-2026 .carousel-control-next {
    width: 2.75rem;
    height: 2.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid #E3E7EF;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(11, 21, 48, 0.12);
    color: var(--vch-navy);
    font-size: 1.1rem;
    opacity: 1;
    padding: 0;
}

.home-2026 .carousel-2026 .carousel-control-prev:hover,
.home-2026 .carousel-2026 .carousel-control-next:hover {
    color: var(--vch-red);
}

/* Every review in one scrolling row, three in view. It does not loop like the
   vehicles do - the arrows stop at the newest and the oldest. */
.home-2026.reviews-2026 .carousel-2026 .carousel-item .row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.home-2026.reviews-2026 .carousel-2026 .carousel-item .row::-webkit-scrollbar {
    display: none;
}

.home-2026.reviews-2026 .carousel-2026 .carousel-item .row > [class*="col-"] {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    scroll-snap-align: start;
}

/* Figma detail: borderless soft-shadow cards, big orange stars,
   divider above the meta row */
.home-2026 .review-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(11, 21, 48, 0.08);
    padding: 1.4rem 1.4rem 1.1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.home-2026 .review-card .stars {
    color: #F5A623;
    font-size: 1.05rem;
    letter-spacing: 2px;
    margin-bottom: 0.75rem;
}

.home-2026 .review-text {
    color: #2A3350;
    font-size: 0.95rem;
    line-height: 1.5;
    flex-grow: 1;
    margin-bottom: 0.85rem;
}

.home-2026 .review-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-top: 0.4rem;
}

.home-2026 .review-meta strong {
    color: #1C2540;
    font-size: 0.92rem;
    font-weight: 600;
}

.home-2026 .review-meta .review-date {
    color: var(--vch-muted);
    font-size: 0.85rem;
}

.home-2026 .review-meta .review-g {
    margin-left: auto;
    line-height: 0;
}

.home-2026 .review-meta .review-g svg {
    width: 1.5rem;
    height: 1.5rem;
}

@media (max-width: 767.98px) {
    /* Mockup page 2: one card per view with the next card peeking;
       each slide's row becomes a horizontal snap scroller */
    .home-2026 .carousel-2026 .carousel-item .row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .home-2026 .carousel-2026 .carousel-item .row > [class*="col-"] {
        flex: 0 0 86%;
        max-width: 86%;
        scroll-snap-align: center;
    }

    .home-2026 .review-card {
        margin-bottom: 1rem;
        height: auto;
    }

    /* Single-column booking card fields (date/time no longer 50/50) */
    .home-2026 .booking-card .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Badge uses the same grid lockup as desktop, slightly smaller */
    .home-2026 .reviews-badge .google-g svg {
        width: 2rem;
        height: 2rem;
    }

    .home-2026 .reviews-badge .reviews-score {
        font-size: 1.4rem;
    }

    /* (chevron compacting lives in the phone block at the end of this file,
       after the <992px rules it must override) */

    .home-2026 .fleet-card-img {
        height: 190px;
    }
}

.home-2026 .reviews-badge .google-g {
    grid-row: 1 / 3;
    display: inline-flex;
    line-height: 0;
}

.home-2026 .reviews-badge .google-g svg {
    width: 2.6rem;
    height: 2.6rem;
}

.home-2026 .reviews-badge .reviews-score {
    font-size: 1.7rem;
    font-weight: 800;
    color: #1C2540;
}

.home-2026 .reviews-badge .stars {
    color: #F5A623;
    font-size: 1.05rem;
    letter-spacing: 1px;
    margin-left: 0;
}

.home-2026 .reviews-badge p {
    color: var(--vch-muted);
    font-size: 0.85rem;
    margin-bottom: 0;
}

/* ---------- Promo cards ---------- */

.home-2026.promos-2026 {
    background: var(--vch-navy);
    padding: 3rem 0;
}

.home-2026 .promo-col {
    margin-bottom: 1.5rem;
}

.home-2026 .promo-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    /* 300px sets the recommended upload size at 1200 x 600 (landscape) */
    min-height: 300px;
    height: 100%;
    display: flex;
}

.home-2026 .promo-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(11, 21, 48, 0.4);
}

.home-2026 .promo-card-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.75rem 1.5rem;
    width: 100%;
}

.home-2026 .promo-tag {
    background: #fff;
    color: var(--vch-navy);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.9rem;
    margin-bottom: 0.9rem;
}

.home-2026 .promo-text {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 1.1rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.home-2026 .promo-cta {
    background: var(--vch-red);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 6px;
    padding: 0.5rem 1.2rem;
}

.home-2026 .promo-cta:hover {
    background: var(--vch-red-dark);
    color: #fff;
}

/* ---------- Video section ---------- */

.home-2026.video-2026 {
    padding: 3rem 0;
}

.home-2026 .video-panel {
    background: var(--vch-navy);
    border-radius: 12px;
    padding: 2.5rem;
}

.home-2026 .video-poster {
    position: relative;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.home-2026 .video-play {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--vch-red);
    color: #fff;
    border: 0;
    font-size: 1.2rem;
    padding-left: 5px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(11, 21, 48, 0.35);
}

/* Shown while no video has been supplied: still reads as a video panel, and
   pressing it drops the note below in rather than doing nothing */
.home-2026 .video-play-placeholder {
    background: rgba(255, 255, 255, 0.9);
    color: var(--vch-navy);
}

.home-2026 .video-soon {
    margin-top: 0.75rem;
    background: rgba(11, 21, 48, 0.85);
    color: #fff;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.35rem 0.9rem;
}

/* Sits over an autoplaying video that the browser forced to start silent */
.home-2026 .video-sound {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 2;
    background: rgba(11, 21, 48, 0.85);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.45rem 1rem;
    cursor: pointer;
}

.home-2026 .video-sound:hover {
    background: var(--vch-red);
}

.home-2026 .video-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.home-2026 .video-copy {
    color: #fff;
    padding-left: 2rem;
}

.home-2026 .section-pill {
    display: inline-block;
    background: var(--vch-red);
    color: #fff;
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.9rem;
    margin-bottom: 1rem;
}

.home-2026 .video-copy h2 {
    font-size: 1.9rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}

.home-2026 .video-copy p {
    color: rgba(255, 255, 255, 0.85);
}

.home-2026 .video-chips span {
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.35rem 0.9rem;
    margin: 0 0.4rem 0.5rem 0;
}

/* ---------- Featured vehicles ---------- */

/* Figma: neutral grey band; the card row is a narrower centred block, with
   the chevrons floating in the gutter between the cards and the band edge */
.home-2026.fleet-2026 {
    background: #F0F0F2;
    padding: 3rem 0;
}

/* Card row spans 85% of the band; chevrons float in the side gutters */
.home-2026.fleet-2026 .container {
    max-width: 75%;
    padding-left: 0;
    padding-right: 0;
}

.home-2026.fleet-2026 .carousel-2026 {
    padding: 0;
}

/* One continuous row of vehicles at every width, three in view on desktop.
   Chunking them into slides of three left a near empty slide whenever the
   count was not a multiple of three, and it could only ever rewind at the
   end. The script in home.blade.php repeats the cards so it loops instead.
   The scrollbar is hidden because the arrows are the control here. */
.home-2026.fleet-2026 .carousel-2026 .carousel-item .row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.home-2026.fleet-2026 .carousel-2026 .carousel-item .row::-webkit-scrollbar {
    display: none;
}

.home-2026.fleet-2026 .carousel-2026 .carousel-item .row > [class*="col-"] {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    scroll-snap-align: start;
}

.home-2026.fleet-2026 .carousel-control-prev {
    left: -4.5rem;
}

.home-2026.fleet-2026 .carousel-control-next {
    right: -4.5rem;
}

.home-2026 .section-title {
    color: var(--vch-navy);
    font-size: 1.9rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 2rem;
}

.home-2026 .fleet-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(11, 21, 48, 0.08);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}

/* The car JPEGs have white backgrounds, so the whole photo area stays white
   to blend seamlessly into the card */
.home-2026 .fleet-card-img {
    height: 210px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
    background-origin: content-box;
    padding: 1rem;
}

.home-2026 .fleet-card-body {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.home-2026 .fleet-group-badge {
    align-self: flex-start;
    background: var(--vch-navy);
    color: #fff;
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    margin-bottom: 0.6rem;
}

.home-2026 .fleet-card h3 {
    color: var(--vch-navy);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.75rem;
}

/* Grid, not wrapped flex. With flex a label that runs onto two lines - POWER
   STEERING is the usual culprit - only pushes its own half down, so the pair
   below it stops lining up with the pair beside it. Grid rows share a height,
   so every spec stays level with its neighbour however the text falls.

   minmax(0, ...) rather than a bare 1fr: a column sized 1fr will not shrink
   below its longest word, and RADIO/AUX/BLUETOOTH/INFOTAINMENT is one long
   word as far as the browser is concerned, so the column outgrew the card and
   the text spilled over the edge. */
.home-2026 .fleet-specs {
    list-style: none;
    padding: 0;
    margin: 0 0 0.9rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 0.5rem;
    row-gap: 0.45rem;
}

.home-2026 .fleet-specs li {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    color: #232D4B;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Those labels have no spaces to break at, so let them break anywhere rather
   than run past the card */
.home-2026 .fleet-specs li span {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.home-2026 .fleet-specs li i {
    color: var(--vch-red);
    flex: 0 0 1.2rem;
    text-align: center;
    margin-top: 0.1rem;
    margin-right: 0.35rem;
}

.home-2026 .fleet-quote-btn {
    margin-top: auto;
    align-self: flex-start;
    background: var(--vch-red);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 6px;
    padding: 0.6rem 1.3rem;
}

.home-2026 .fleet-quote-btn:hover {
    background: var(--vch-red-dark);
    color: #fff;
}

.home-2026 .fleet-view-all {
    margin-top: 2.5rem;
}

/* ---------- Our Commitment ---------- */

/* Figma: rounded navy panel inset on white, photo flush to the panel's right */
.home-2026.commitment-2026 {
    background: #fff;
    padding: 3rem 0;
}

.home-2026 .commitment-panel {
    background: var(--vch-navy);
    border-radius: 12px;
    overflow: hidden;
}

.home-2026 .commitment-copy {
    color: #fff;
    padding: 2.5rem;
}

.home-2026 .commitment-copy h1,
.home-2026 .commitment-copy h2,
.home-2026 .commitment-copy h3,
.home-2026 .commitment-copy h4,
.home-2026 .commitment-copy h5 {
    color: #fff;
    font-weight: 800;
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

/* Figma Body M: 16px, tight leading, 8px paragraph gap */
.home-2026 .commitment-copy p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.45;
    margin-bottom: 0.6rem;
}

.home-2026 .commitment-copy p:last-child {
    margin-bottom: 0;
}

.home-2026 .commitment-img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    background-size: cover;
    background-position: center;
}

/* ---------- Responsive (mockup page 2: everything stacks) ---------- */

@media (max-width: 991.98px) {
    /* Mockup page 2: the photo becomes a top band with the copy on it,
       fading into deep navy behind the booking card */
    .home-2026.hero-2026 {
        background-image: none;
        background-color: var(--vch-navy-deep);
        padding: 0 0 2.5rem;
    }

    .home-2026.hero-2026::before {
        inset: 0 0 auto 0;
        height: 360px;
        background-image: linear-gradient(180deg, rgba(11, 21, 48, 0.55) 0%, rgba(11, 21, 48, 0.1) 45%, rgba(11, 21, 48, 0.65) 88%, var(--vch-navy-deep) 100%), var(--hero-img);
        background-size: cover;
        background-position: center;
    }

    .home-2026 .hero-copy {
        text-align: left;
        min-height: 320px;
        padding-top: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .home-2026 .hero-copy h1 {
        font-size: 1.9rem;
        margin-bottom: 0.75rem;
    }

    .home-2026 .hero-pill {
        font-size: 0.72rem;
        padding: 0.3rem 0.85rem;
        margin-bottom: 1rem;
    }

    .home-2026 .hero-sub {
        font-size: 1rem;
        margin-bottom: 1.25rem;
    }

    .home-2026 .hero-cta {
        font-size: 0.85rem;
        padding: 0.6rem 1.4rem;
    }

    .home-2026 .booking-card-title {
        font-size: 1.35rem;
    }

    .home-2026 .booking-card {
        margin-left: auto;
        margin-right: auto;
        max-width: 520px;
    }

    .home-2026 .video-panel {
        padding: 1.5rem;
    }

    .home-2026 .video-copy {
        padding-left: 15px;
        margin-top: 1.5rem;
    }

    .home-2026 .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .home-2026.fleet-2026 .container {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .home-2026.fleet-2026 .carousel-2026 {
        padding: 0 1.5rem;
    }


    .home-2026.fleet-2026 .carousel-control-prev {
        left: 0;
    }

    .home-2026.fleet-2026 .carousel-control-next {
        right: 0;
    }

    .home-2026 .carousel-2026 {
        padding: 0 1.5rem;
    }

    .home-2026 .commitment-copy {
        padding: 1.5rem;
    }

    .home-2026 .commitment-img {
        min-height: 220px;
    }
}

/* Two across below 1200px, not 992. Three cards on a 1000px window leaves each
   about 300px wide, which is narrow enough that nearly every spec label wraps
   onto two or three lines - the cards read as a wall of broken text. */
@media (max-width: 1199.98px) {
    .home-2026.fleet-2026 .carousel-2026 .carousel-item .row > [class*="col-"],
    .home-2026.reviews-2026 .carousel-2026 .carousel-item .row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Arrows that exist only to scroll the phone row. Hidden by default: on
   desktop a single slide has nothing to scroll and nothing to slide to. */
.home-2026 .fleet-control-phone {
    display: none;
}

/* Phone-only carousel chrome — must come after the <992px block above */
@media (max-width: 767.98px) {
    .home-2026 .carousel-2026,
    .home-2026.fleet-2026 .carousel-2026 {
        padding: 0 2.4rem;
    }

    .home-2026 .carousel-2026 .carousel-control-prev,
    .home-2026 .carousel-2026 .carousel-control-next {
        width: 2.1rem;
        height: 2.1rem;
        font-size: 0.85rem;
        opacity: 0.85;
    }

    .home-2026 .carousel-2026 .carousel-control-prev,
    .home-2026.fleet-2026 .carousel-2026 .carousel-control-prev {
        left: 0.15rem;
    }

    .home-2026 .carousel-2026 .carousel-control-next,
    .home-2026.fleet-2026 .carousel-2026 .carousel-control-next {
        right: 0.15rem;
    }

    /* The container padding and the carousel gutters were compounding, leaving
       the card a sliver of the screen. The carousel keeps its gutters below;
       the container gives up its own. */
    .home-2026.fleet-2026 .container {
        padding-left: 0;
        padding-right: 0;
    }

    /* A peek of the next car, so a single-slide carousel does not read as the
       only vehicle we have - which is what testing reported. The mockup shows a
       single arrow. It sits on the right rather than the mockup's left, because
       one control that only ever advances is easier to follow than one that
       steps backwards, and forward belongs on the right. */
    .home-2026.fleet-2026 .carousel-2026 {
        padding: 0 2rem 0 0.5rem;
    }

    /* A peek of about 20px: enough to say there is more, small enough to leave
       the card its width */
    .home-2026.fleet-2026 .carousel-2026 .carousel-item .row > [class*="col-"] {
        flex: 0 0 94%;
        max-width: 94%;
        scroll-snap-align: start;
    }

    .home-2026 .fleet-card-body {
        padding: 1.25rem 1.25rem 1.5rem;
    }

    /* Two spec columns as per the mockup, with the labels wrapping. This is the
       case the grid above exists for: RADIO/CD/AUX/BLUETOOTH runs to three
       lines and 5 DOORS beside it still starts level with it. */

    /* Reviews keep both arrows but stack them in a single gutter on the right,
       which gives the card back the whole of the other side. */
    .home-2026.reviews-2026 .carousel-2026 {
        padding: 0 2.6rem 0 0;
    }

    .home-2026.reviews-2026 .carousel-2026 .carousel-control-prev,
    .home-2026.reviews-2026 .carousel-2026 .carousel-control-next {
        left: auto;
        right: 0.15rem;
        transform: none;
    }

    .home-2026.reviews-2026 .carousel-2026 .carousel-control-prev {
        top: calc(50% - 2.35rem);
    }

    .home-2026.reviews-2026 .carousel-2026 .carousel-control-next {
        top: calc(50% + 0.25rem);
    }

    .home-2026.reviews-2026 .carousel-2026 .carousel-item .row > [class*="col-"] {
        flex: 0 0 94%;
        max-width: 94%;
    }

    /* One arrow, always forward: it advances a card at a time and returns to
       the first vehicle after the last (see home.blade.php). */
    .home-2026.fleet-2026 .carousel-control-prev {
        display: none;
    }

    .home-2026.fleet-2026 .carousel-control-next.fleet-control-phone {
        display: flex;
    }
}

/* Spent arrow: the reviews strip has a newest and an oldest, so once the
   reader is at either the control fades and stops responding rather than
   sitting there looking live. Last in the file so it beats the sizing rules
   above, which set their own opacity. */
.home-2026 .carousel-2026 .carousel-control-prev.is-off,
.home-2026 .carousel-2026 .carousel-control-next.is-off {
    opacity: 0.3;
    pointer-events: none;
}