/* MOBILE ONLY — targeted exception. Desktop remains untouched. */
@media (max-width:1023px){

    /*
     * POPULAR PRIVATE TRANSFERS:
     * preserve the existing one-line layout when space allows.
     * If the pills wrap, each wrapped row is centered horizontally.
     */
    html body #home-view #destinations .destination-pills,
    html body #home-view #destinations .destination-pill-list,
    html body #home-view #destinations .popular-transfers-list,
    html body #home-view #destinations .routes-pills{
        justify-content:center!important;
        align-content:center!important;
    }

    html body #home-view #destinations .destination-pill{
        text-align:center!important;
    }
}



/* MOBILE ONLY — when POPULAR PRIVATE TRANSFERS switches to stacked rows. */
@media (max-width:1023px){

    html body #home-view #destinations .route-panel.red-route-stack-all .route-row{
        justify-items:center!important;
        text-align:center!important;
    }

    /* First line: route / airport name + icon. */
    html body #home-view #destinations .route-panel.red-route-stack-all .route-row > div{
        width:100%!important;
        justify-content:center!important;
        justify-self:center!important;
        text-align:center!important;
    }

    html body #home-view #destinations .route-panel.red-route-stack-all .route-row > div > span.lang-en,
    html body #home-view #destinations .route-panel.red-route-stack-all .route-row > div > span.lang-fr{
        text-align:center!important;
    }

    /* Second line: Airport transfer / Private aviation / etc. */
    html body #home-view #destinations .route-panel.red-route-stack-all .route-row > span.lang-en,
    html body #home-view #destinations .route-panel.red-route-stack-all .route-row > span.lang-fr{
        justify-self:center!important;
        width:auto!important;
        max-width:100%!important;
        padding-left:0!important;
        padding-right:0!important;
        text-align:center!important;
    }
}



/* DESKTOP ONLY — mobile remains locked. */
@media (min-width:1200px){

    /*
     * Exact SERVICES desktop width:
     * viewport - 2 × section horizontal padding - inner fluid inset,
     * capped at 1380px.
     */
    html body #home-view #vehicules .vehicles-grid{
        width:min(
            1380px,
            calc(
                100vw
                - (2 * clamp(34px,4.6vw,88px))
                - clamp(0px,1.6vw,30px)
            )
        )!important;
        max-width:1380px!important;
        margin-left:auto!important;
        margin-right:auto!important;
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:clamp(18px,1.25vw,22px)!important;
        align-items:stretch!important;
    }
}

@media (min-width:1024px) and (max-width:1199px){

    /*
     * Exact compact SERVICES width:
     * section has 38px on each side, then the inner block removes
     * another 76px from the remaining width, capped at 960px.
     */
    html body #home-view #vehicules .vehicles-grid{
        width:min(960px,calc(100vw - 152px))!important;
        max-width:960px!important;
        margin-left:auto!important;
        margin-right:auto!important;
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:18px!important;
        align-items:stretch!important;
    }
}

@media (min-width:1024px){

    html body #home-view #vehicules .vehicles-grid > .vehicle-card{
        width:100%!important;
        max-width:none!important;
        min-width:0!important;
        margin:0!important;
        box-sizing:border-box!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
    }

    /*
     * Equal lower band = identical vertical axis for every description.
     */
    html body #home-view #vehicules .vehicle-footer-card{
        width:100%!important;
        height:190px!important;
        min-height:190px!important;
        max-height:190px!important;
        margin-top:auto!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        box-sizing:border-box!important;
    }

    html body #home-view #vehicules .vehicle-footer-card .fleet-description-band{
        width:100%!important;
        height:190px!important;
        min-height:190px!important;
        max-height:190px!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:center!important;
        box-sizing:border-box!important;
        padding:22px!important;
        text-align:center!important;
    }

    html body #home-view #vehicules .vehicle-footer-card .fleet-description-copy{
        width:min(100%,330px)!important;
        max-width:330px!important;
        margin:auto!important;
        text-align:center!important;
        line-height:1.62!important;
    }

    html body #home-view #vehicules .vehicle-img-container{
        margin-left:auto!important;
        margin-right:auto!important;
    }

    html body #home-view #vehicules .vehicle-specs{
        justify-content:center!important;
        align-items:center!important;
        text-align:center!important;
    }

    html body #home-view #vehicules .vehicle-card h3{
        text-align:center!important;
        justify-content:center!important;
    }
}

@media (min-width:1024px) and (max-width:1199px){
    html body #home-view #vehicules .vehicle-footer-card,
    html body #home-view #vehicules .vehicle-footer-card .fleet-description-band{
        height:230px!important;
        min-height:230px!important;
        max-height:230px!important;
    }

    html body #home-view #vehicules .vehicle-footer-card .fleet-description-band{
        padding:20px 18px!important;
    }

    html body #home-view #vehicules .vehicle-footer-card .fleet-description-copy{
        width:min(100%,260px)!important;
        max-width:260px!important;
    }
}



/* Restore the original black fleet-description background only.
   All V150+ sizing/alignment changes remain intact. */
@media (min-width:1024px){
    html body #home-view #vehicules .vehicle-footer-card,
    html body #home-view #vehicules .vehicle-footer-card .fleet-description-band{
        background:#000!important;
        background-image:none!important;
        box-shadow:none!important;
        filter:none!important;
    }
}



/* DESKTOP ONLY — mobile remains locked.
   Full-width geometry preserved; top/bottom fades restored exactly from V150. */
@media (min-width:1024px){

    html body #home-view .editorial-aviation{
        position:relative!important;
        width:100vw!important;
        max-width:none!important;
        margin-left:calc(50% - 50vw)!important;
        margin-right:calc(50% - 50vw)!important;
        padding-left:0!important;
        padding-right:0!important;
        overflow:visible!important;
        background:#000!important;
    }

    html body #home-view .editorial-aviation .editorial-visual-inner{
        position:relative!important;
        width:100vw!important;
        max-width:none!important;
        height:auto!important;
        aspect-ratio:2.72 / 1!important;
        margin:0!important;
        padding:0!important;
        overflow:hidden!important;
        isolation:isolate!important;
        -webkit-mask-image:none!important;
        mask-image:none!important;
    }

    html body #home-view .editorial-aviation picture,
    html body #home-view .editorial-aviation .desktop-hq-picture{
        display:block!important;
        width:100%!important;
        height:100%!important;
        margin:0!important;
        padding:0!important;
    }

    html body #home-view .editorial-aviation img{
        display:block!important;
        width:100%!important;
        height:100%!important;
        max-width:none!important;
        margin:0!important;
        object-fit:cover!important;
        object-position:54% 50%!important;
        filter:brightness(.82) contrast(1.06) saturate(.92)!important;
        transform:none!important;
    }

    /* Exact V150 top fade. */
    html body #home-view .editorial-aviation .editorial-visual-inner::before{
        content:""!important;
        display:block!important;
        position:absolute!important;
        z-index:3!important;
        top:0!important;
        left:0!important;
        right:0!important;
        height:22%!important;
        pointer-events:none!important;
        background:linear-gradient(
            to bottom,
            #000 0%,
            rgba(0,0,0,.96) 8%,
            rgba(0,0,0,.76) 28%,
            rgba(0,0,0,.42) 52%,
            rgba(0,0,0,.16) 76%,
            rgba(0,0,0,0) 100%
        )!important;
    }

    /* Exact final V150 bottom fade. */
    html body #home-view .editorial-aviation .editorial-visual-inner::after{
        content:""!important;
        display:block!important;
        position:absolute!important;
        z-index:3!important;
        bottom:0!important;
        left:0!important;
        right:0!important;
        height:22%!important;
        pointer-events:none!important;
        background:linear-gradient(
            to top,
            rgb(5,5,5) 0%,
            rgba(5,5,5,.96) 8%,
            rgba(5,5,5,.76) 28%,
            rgba(5,5,5,.42) 52%,
            rgba(5,5,5,.16) 76%,
            rgba(5,5,5,0) 100%
        )!important;
    }

    /* Exact V150 seam guards. */
    html body #home-view .editorial-aviation::before{
        content:""!important;
        position:absolute!important;
        z-index:6!important;
        left:0!important;
        right:0!important;
        top:-2px!important;
        height:4px!important;
        background:#000!important;
        border:0!important;
        box-shadow:none!important;
        pointer-events:none!important;
    }

    html body #home-view .editorial-aviation::after{
        content:""!important;
        position:absolute!important;
        z-index:6!important;
        left:0!important;
        right:0!important;
        bottom:-2px!important;
        height:5px!important;
        background:rgb(5,5,5)!important;
        border:0!important;
        box-shadow:none!important;
        pointer-events:none!important;
    }
}

@media (min-width:1024px) and (max-width:1199px){
    html body #home-view .editorial-aviation .editorial-visual-inner{
        aspect-ratio:2.48 / 1!important;
    }
}



/* DESKTOP ONLY — restore the pre-V151 upper blend/overlap without changing
   the full-width image, bottom fade, fleet layout, or mobile. */
@media (min-width:1024px){
    html body #home-view .editorial-aviation{
        margin-top:-2px!important;
        overflow:visible!important;
    }

    html body #home-view .editorial-aviation .editorial-visual-inner::before{
        content:""!important;
        display:block!important;
        position:absolute!important;
        z-index:3!important;
        top:0!important;
        left:0!important;
        right:0!important;
        height:22%!important;
        pointer-events:none!important;
        background:linear-gradient(
            to bottom,
            #000 0%,
            rgba(0,0,0,.96) 8%,
            rgba(0,0,0,.76) 28%,
            rgba(0,0,0,.42) 52%,
            rgba(0,0,0,.16) 76%,
            rgba(0,0,0,0) 100%
        )!important;
    }

    html body #home-view .editorial-aviation::before{
        content:""!important;
        display:block!important;
        position:absolute!important;
        z-index:6!important;
        left:0!important;
        right:0!important;
        top:-2px!important;
        height:4px!important;
        background:#000!important;
        border:0!important;
        box-shadow:none!important;
        pointer-events:none!important;
    }
}



/* DESKTOP ONLY — mobile remains locked.
   The description fill is painted on the text box itself, widened to the
   exact width of the existing horizontal separators. This makes the fill
   stop exactly on the separator rectangle on all four sides, while keeping
   the text measure and line wrapping unchanged. */
@media (min-width:1024px){

    /* The footer and the padded band are layout containers only. */
    html body #home-view #vehicules .vehicle-footer-card,
    html body #home-view #vehicules .vehicle-footer-card .fleet-description-band{
        background:transparent!important;
        background-image:none!important;
        box-shadow:none!important;
        filter:none!important;
    }

    html body #home-view #vehicules .vehicle-footer-card{
        position:relative!important;
        overflow:visible!important;
    }

    html body #home-view #vehicules .vehicle-footer-card .fleet-description-band{
        position:relative!important;
        overflow:visible!important;
        isolation:isolate!important;
    }

    /* Disable every legacy pseudo-fill so nothing can paint into the band padding. */
    html body #home-view #vehicules .vehicle-footer-card .fleet-description-band::before,
    html body #home-view #vehicules .vehicle-footer-card .fleet-description-band::after,
    html body #home-view #vehicules .vehicle-footer-card::before,
    html body #home-view #vehicules .vehicle-footer-card::after{
        content:none!important;
        display:none!important;
        background:none!important;
        background-image:none!important;
        box-shadow:none!important;
    }

    /*
     * The separators are 100% of the band's content box. Make the copy use
     * that same width, but increase its horizontal padding so the actual text
     * keeps the former 294px measure (330px box minus 18px + 18px padding).
     * Because the copy sits directly between the two separators, its painted
     * background is therefore bounded exactly by those four virtual edges.
     */
    html body #home-view #vehicules .vehicle-footer-card .vehicle-service-inclusions.fleet-description-band > .fleet-description-copy{
        position:relative!important;
        z-index:1!important;
        width:100%!important;
        max-width:none!important;
        box-sizing:border-box!important;
        padding-top:17px!important;
        padding-bottom:17px!important;
        padding-left:max(18px, calc(50% - 147px))!important;
        padding-right:max(18px, calc(50% - 147px))!important;
        /* v164 — exact mobile fleet-description paint, applied to the
           desktop bounded copy box. Geometry remains untouched. */
        background:
            linear-gradient(
                90deg,
                rgba(16,16,18,0) 0%,
                rgba(7,7,9,.58) 11%,
                rgba(3,3,5,.94) 23%,
                rgba(3,3,5,.94) 77%,
                rgba(7,7,9,.58) 89%,
                rgba(16,16,18,0) 100%
            )!important;
        background-blend-mode:normal!important;
        box-shadow:none!important;
        filter:none!important;
    }

    html body #home-view #vehicules .fleet-description-separator{
        position:relative!important;
        z-index:2!important;
    }
}

/* Preserve the narrower desktop text measure used by the existing 1024–1199px layout. */
@media (min-width:1024px) and (max-width:1199px){
    html body #home-view #vehicules .vehicle-footer-card .vehicle-service-inclusions.fleet-description-band > .fleet-description-copy{
        padding-left:max(18px, calc(50% - 112px))!important;
        padding-right:max(18px, calc(50% - 112px))!important;
    }
}



/* v177 — French V-Class description, desktop only. */
@media (min-width:1200px){
    html[data-red-language="fr"] body #home-view #vehicules
    .vehicle-card.vehicle-card-vclass
    .vehicle-service-inclusions.fleet-description-band > .fleet-description-copy.lang-fr{
        display:flex!important;
        flex:1 1 0!important;
        min-height:0!important;
        height:auto!important;
        margin:0!important;
        box-sizing:border-box!important;
        align-items:center!important;
        justify-content:center!important;
        text-align:center!important;
        padding-left:max(14px, calc(50% - 154px))!important;
        padding-right:max(14px, calc(50% - 154px))!important;
        padding-top:8px!important;
        padding-bottom:8px!important;
        font-size:.70rem!important;
        line-height:1.44!important;
        overflow:hidden!important;
    }
}
@media (min-width:1024px) and (max-width:1199px){
    html[data-red-language="fr"] body #home-view #vehicules
    .vehicle-card.vehicle-card-vclass
    .vehicle-service-inclusions.fleet-description-band > .fleet-description-copy.lang-fr{
        display:flex!important;
        flex:1 1 0!important;
        min-height:0!important;
        height:auto!important;
        margin:0!important;
        box-sizing:border-box!important;
        align-items:center!important;
        justify-content:center!important;
        text-align:center!important;
        padding-left:max(14px, calc(50% - 124px))!important;
        padding-right:max(14px, calc(50% - 124px))!important;
        padding-top:8px!important;
        padding-bottom:8px!important;
        font-size:.68rem!important;
        line-height:1.42!important;
        overflow:hidden!important;
    }
}



/* v178 — founder card uses the exact neutral surface used by
   THE RIVIERA JOURNAL .service-card ("Private Chauffeur in Cannes"). */
@media (min-width:1024px){
    html body #home-view #contact .founder-profile-card{
        background:#080808!important;
    }
    html body #home-view #contact .founder-profile-card:hover{
        background:#0d0d0d!important;
    }
}



/* v179 — desktop founder card only.
   1) Give the resting outline slightly more presence while keeping the
      validated Journal surface and stronger existing hover state.
   2) Reuse exactly the same vertical rhythm as the gap between the contact
      section title and its first founder-story paragraph. */
@media (min-width:1024px){
    html body #home-view #contact .founder-profile-card{
        border-color:rgba(223,184,107,.24)!important;
        margin-top:clamp(22px,1.45vw,28px)!important;
    }
    html body #home-view #contact .founder-profile-card:hover{
        border-color:rgba(223,184,107,.5)!important;
    }
}



/* v180 — mobile/tablet divider restored exactly as before.
   Hide this divider only on desktop; no mobile geometry is overridden. */
@media (min-width:1024px){
    html body #home-view #contact .contact-valentin-divider{
        display:none!important;
    }
}



/* v181 — desktop only: double the validated story-to-founder-card spacing.
   Previous value: clamp(22px,1.45vw,28px)
   Doubled value:  clamp(44px,2.90vw,56px) */
@media (min-width:1024px){
    html body #home-view #contact .founder-profile-card{
        margin-top:clamp(44px,2.90vw,56px)!important;
    }
}



/* =========================================================
   DESKTOP ONLY (>=1024px) — final contact / bespoke request
   composition. Mobile/tablet remains byte-for-byte governed
   by the existing rules below this breakpoint.
   ========================================================= */
@media (min-width:1024px){
    /* A slightly narrower direct-contact row gives the lower part of the
       page a clear visual hierarchy without disconnecting it from the
       1120px Private Assistance axis above. */
    html body #home-view #contact .contact-actions-grid{
        width:min(1000px,calc(100% - 24px))!important;
        max-width:1000px!important;
        margin-left:auto!important;
        margin-right:auto!important;
        gap:clamp(12px,.9vw,14px)!important;
    }

    /* The old transparent divider still occupied vertical space. Collapse
       it on desktop and define the transition explicitly on the form frame. */
    html body #home-view #contact .contact-footer-divider{
        display:none!important;
        width:0!important;
        height:0!important;
        margin:0!important;
        padding:0!important;
    }

    /* Smaller, centred request frame: intentionally narrower than the
       three direct-contact actions, while remaining fluid at compact
       desktop widths. */
    html body #home-view #contact .contact-direct-message{
        width:min(940px,calc(100% - 48px))!important;
        max-width:940px!important;
        margin:clamp(46px,3vw,56px) auto 0!important;
        padding:
            clamp(26px,1.7vw,30px)
            clamp(22px,1.55vw,28px)
            clamp(18px,1.25vw,22px)!important;
        box-sizing:border-box!important;
    }

    html body #home-view #contact .contact-message-eyebrow{
        margin:0 auto clamp(20px,1.35vw,24px)!important;
        text-align:center!important;
    }

    /* Name / Email / Phone share one exact row. The message keeps the full
       second row because a textarea must retain a usable reading measure. */
    html body #home-view #contact .contact-message-grid{
        width:100%!important;
        display:grid!important;
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        column-gap:clamp(10px,.8vw,13px)!important;
        row-gap:13px!important;
        align-items:start!important;
        box-sizing:border-box!important;
    }

    html body #home-view #contact .contact-message-field{
        min-width:0!important;
        width:100%!important;
        margin:0!important;
    }

    html body #home-view #contact .contact-message-field-full{
        grid-column:1 / -1!important;
        width:100%!important;
    }

    html body #home-view #contact .contact-message-field input{
        width:100%!important;
        min-width:0!important;
    }

    html body #home-view #contact #contact_message{
        width:100%!important;
        min-height:124px!important;
        box-sizing:border-box!important;
    }

    html body #home-view #contact .contact-message-submit{
        width:100%!important;
        margin-top:13px!important;
    }

    html body #home-view #contact .contact-response-note{
        width:min(760px,100%)!important;
        max-width:760px!important;
        margin:12px auto 0!important;
        text-align:center!important;
    }
}

/* Compact desktop: keep the exact same three-column architecture rather
   than falling back to two columns. Only the outer measure tightens. */
@media (min-width:1024px) and (max-width:1199px){
    html body #home-view #contact .contact-actions-grid{
        width:min(920px,calc(100% - 24px))!important;
        max-width:920px!important;
    }

    html body #home-view #contact .contact-direct-message{
        width:min(900px,calc(100% - 48px))!important;
        max-width:900px!important;
        margin-top:46px!important;
        padding:26px 20px 18px!important;
    }

    html body #home-view #contact .contact-message-grid{
        column-gap:10px!important;
    }
}



/* Desktop only — the three direct-contact cards and the bespoke-request
   frame now share the exact same outer horizontal axis. */
@media (min-width:1200px){
    html body #home-view #contact .contact-actions-grid{
        width:min(940px,calc(100% - 48px))!important;
        max-width:940px!important;
    }
}
@media (min-width:1024px) and (max-width:1199px){
    html body #home-view #contact .contact-actions-grid{
        width:min(900px,calc(100% - 48px))!important;
        max-width:900px!important;
    }
}



/* Desktop only — one shared vertical rhythm for the contact stack:
   VALENTIN SASSI card -> direct-contact cards -> bespoke request form. */
@media (min-width:1200px){
    html body #home-view #contact .contact-actions-grid{
        margin-top:clamp(46px,3vw,56px)!important;
    }
    html body #home-view #contact .contact-direct-message{
        margin-top:clamp(46px,3vw,56px)!important;
    }
}
@media (min-width:1024px) and (max-width:1199px){
    html body #home-view #contact .contact-actions-grid{
        margin-top:46px!important;
    }
    html body #home-view #contact .contact-direct-message{
        margin-top:46px!important;
    }
}



/* =========================================================
   DESKTOP ONLY (>=1024px)
   - PRIVATE ASSISTANCE body copy centred
   - FRENCH RIVIERA DESTINATIONS body copy centred
   - destination keyword pills centred as a group
   - POPULAR PRIVATE TRANSFERS:
       * natural one-line mode remains one line
       * if existing collision detection stacks ONE row, ALL rows stack
       * stacked mode is fully centred (journey + service label)
   Mobile/tablet remains untouched.
   ========================================================= */
@media (min-width:1024px){

    /* PRIVATE ASSISTANCE — centre the actual text, not only its container. */
    html body #home-view #contact .founder-story-copy,
    html body #home-view #contact .founder-story-copy p,
    html body #home-view #contact .founder-story-copy .founder-story-closing{
        text-align:center!important;
    }

    /* FRENCH RIVIERA DESTINATIONS — same centred reading axis as its title. */
    html body #home-view #destinations .destinations-copy .luxury-intro{
        text-align:center!important;
    }

    /* Destination keywords — centre every wrapped row, not just the block. */
    html body #home-view #destinations .destination-pills{
        justify-content:center!important;
        align-content:center!important;
    }

    /*
     * POPULAR PRIVATE TRANSFERS
     * The v84 JS already measures every visible row in its natural one-line
     * state and adds .red-route-stack-all if ANY row cannot fit. Keep that
     * decision mechanism and correct only the stacked desktop geometry.
     *
     * Natural mode remains untouched:
     * journey + service label stay on the same line whenever all rows fit.
     */
    html body #home-view #destinations
    .route-panel.red-route-stack-all .route-row{
        justify-items:center!important;
        text-align:center!important;
    }

    html body #home-view #destinations
    .route-panel.red-route-stack-all .route-row > div{
        width:auto!important;
        max-width:100%!important;
        justify-self:center!important;
        justify-content:center!important;
        text-align:center!important;
    }

    html body #home-view #destinations
    .route-panel.red-route-stack-all .route-row > div > span.lang-en,
    html body #home-view #destinations
    .route-panel.red-route-stack-all .route-row > div > span.lang-fr{
        text-align:center!important;
    }

    html body #home-view #destinations
    .route-panel.red-route-stack-all .route-row > span.lang-en,
    html body #home-view #destinations
    .route-panel.red-route-stack-all .route-row > span.lang-fr{
        justify-self:center!important;
        width:100%!important;
        max-width:100%!important;
        margin-left:auto!important;
        margin-right:auto!important;
        padding-left:0!important;
        padding-right:0!important;
        text-align:center!important;
        white-space:normal!important;
        box-sizing:border-box!important;
    }
}



/* v187 — desktop only.
   Reinforce the centred composition requested for the Destinations copy
   without changing any mobile/tablet geometry. */
@media (min-width:1024px){
    html body #home-view #destinations .destinations-copy .luxury-intro{
        margin-left:auto!important;
        margin-right:auto!important;
        text-align:center!important;
    }

    html body #home-view #destinations .destination-pills{
        margin-left:auto!important;
        margin-right:auto!important;
        justify-content:center!important;
        align-content:center!important;
    }

    html body #home-view #destinations .destination-pill{
        text-align:center!important;
    }
}