/* =========================================================
   DESKTOP ONLY — mobile stays locked.
   Transition: EXPERIENCE -> editorial image -> SERVICES.
   ========================================================= */
@media (min-width:1024px){

    /* A controlled breathing space after the Experience cards. */
    html body #home-view #experience{
        padding-bottom:clamp(72px,4.4vw,84px)!important;
    }

    /*
     * Editorial image:
     * stable cinematic ratio instead of a viewport-height formula.
     * This prevents the image becoming disproportionately tall on
     * 1280/1366/1440px desktop screens.
     */
    html body #home-view .editorial-yacht{
        width:100%!important;
        margin:0!important;
        padding:0!important;
        background:#000!important;
    }

    html body #home-view .editorial-yacht .editorial-visual-inner{
        width:min(1680px,calc(100% - clamp(48px,7.4vw,142px)))!important;
        max-width:1680px!important;
        height:auto!important;
        aspect-ratio:2.75 / 1!important;
        margin:0 auto!important;
        overflow:hidden!important;
    }

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

    html body #home-view .editorial-yacht img{
        width:100%!important;
        height:100%!important;
        object-fit:cover!important;
        object-position:center 51%!important;
    }

    /* Services begins as a continuation of the editorial image. */
    html body #home-view #services{
        margin-top:-1px!important;
        padding-top:clamp(68px,4.2vw,80px)!important;
        padding-right:clamp(34px,4.6vw,88px)!important;
        padding-bottom:clamp(70px,5vw,92px)!important;
        padding-left:clamp(34px,4.6vw,88px)!important;
        box-sizing:border-box!important;
    }

    html body #home-view #services .luxury-inner{
        width:min(1420px,100%)!important;
        max-width:1420px!important;
        margin:0 auto!important;
    }

    html body #home-view #services .eyebrow{
        margin:0 0 12px!important;
    }

    html body #home-view #services .luxury-title{
        width:min(1120px,100%)!important;
        margin:0 auto 16px!important;
        line-height:1.10!important;
    }

    html body #home-view #services .luxury-intro{
        width:min(930px,100%)!important;
        max-width:930px!important;
        margin:0 auto clamp(38px,2.7vw,46px)!important;
        font-size:clamp(.88rem,.78rem + .10vw,.97rem)!important;
        line-height:1.70!important;
    }

    html body #home-view #services .services-grid{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:20px!important;
        width:100%!important;
        margin:0!important;
        align-items:stretch!important;
    }

    /*
     * Remove a legacy site-frame margin that applied only to the first card
     * and caused the first row to be vertically misaligned.
     */
    html body #home-view #services .service-card,
    html body #home-view #services .service-card + .service-card{
        margin:0!important;
        min-width:0!important;
        height:100%!important;
        min-height:220px!important;
        padding:
            clamp(28px,1.7vw,32px)
            clamp(26px,1.8vw,34px)
            clamp(28px,1.7vw,32px)
            clamp(76px,4.8vw,90px)!important;
        box-sizing:border-box!important;
    }

    html body #home-view #services .service-card > .lux-icon{
        left:clamp(28px,2.1vw,38px)!important;
        top:clamp(29px,1.9vw,35px)!important;
    }

    html body #home-view #services .service-card h3{
        margin:0 0 11px!important;
        font-size:clamp(1.02rem,.90rem + .13vw,1.16rem)!important;
        line-height:1.34!important;
    }

    html body #home-view #services .service-card p{
        margin:0!important;
        font-size:clamp(.80rem,.72rem + .08vw,.88rem)!important;
        line-height:1.68!important;
    }
}

/* Compact desktop: keep a two-column service grid without crowding. */
@media (min-width:1024px) and (max-width:1199px){
    html body #home-view #experience{
        padding-bottom:72px!important;
    }

    html body #home-view .editorial-yacht .editorial-visual-inner{
        width:calc(100% - 52px)!important;
        aspect-ratio:2.55 / 1!important;
    }

    html body #home-view #services{
        padding-top:68px!important;
        padding-right:38px!important;
        padding-left:38px!important;
        padding-bottom:74px!important;
    }

    html body #home-view #services .luxury-inner{
        width:min(960px,100%)!important;
        max-width:960px!important;
    }

    html body #home-view #services .luxury-intro{
        width:min(820px,100%)!important;
        margin-bottom:38px!important;
    }

    html body #home-view #services .services-grid{
        gap:18px!important;
    }

    html body #home-view #services .service-card,
    html body #home-view #services .service-card + .service-card{
        min-height:236px!important;
        padding:27px 24px 27px 70px!important;
    }

    html body #home-view #services .service-card > .lux-icon{
        left:26px!important;
        top:29px!important;
    }
}



/* MOBILE ONLY — visual arrow position is unchanged.
   Only the touch/click hit areas are moved away from the hour/minute buttons. */
@media (max-width:1023px){

    html body #home-view #timePickerPopup .red-clock-step-btn-v136{
        overflow:visible!important;
    }

    /*
     * Create an invisible hit area via pseudo-element.
     * The visible arrow stays exactly where V139 placed it.
     */
    html body #home-view #timePickerPopup .red-clock-step-btn-v136::after{
        content:""!important;
        position:absolute!important;
        left:50%!important;
        width:34px!important;
        height:24px!important;
        transform:translateX(-50%)!important;
        background:transparent!important;
        pointer-events:auto!important;
    }

    /* Upper arrows: move hitbox upward, away from the value button. */
    html body #home-view #timePickerPopup .red-clock-step-btn-v136[data-direction="1"]::after{
        top:-10px!important;
    }

    /* Lower arrows: move hitbox downward, away from the value button. */
    html body #home-view #timePickerPopup .red-clock-step-btn-v136[data-direction="-1"]::after{
        bottom:-10px!important;
    }
}



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

    /*
     * Editorial cabin image:
     * true full-bleed composition, no artificial side gutters.
     * Width is tied to the viewport, not to the centered content container.
     */
    html body #home-view .editorial-yacht{
        width:100vw!important;
        max-width:none!important;
        margin-left:calc(50% - 50vw)!important;
        margin-right:calc(50% - 50vw)!important;
        padding:0!important;
        background:#000!important;
        overflow:hidden!important;
    }

    html body #home-view .editorial-yacht .editorial-visual-inner{
        width:100vw!important;
        max-width:none!important;
        height:auto!important;
        aspect-ratio:2.95 / 1!important;
        margin:0!important;
        padding:0!important;
        overflow:hidden!important;
    }

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

    html body #home-view .editorial-yacht img{
        display:block!important;
        width:100%!important;
        height:100%!important;
        max-width:none!important;
        object-fit:cover!important;
        object-position:center 50%!important;
        margin:0!important;
        padding:0!important;
    }

    /*
     * Keep a controlled black transition above and below,
     * without side framing.
     */
    html body #home-view #experience{
        padding-bottom:clamp(66px,4vw,78px)!important;
    }

    html body #home-view #services{
        margin-top:-1px!important;
        padding-top:clamp(66px,4vw,78px)!important;
    }
}

/* Compact desktop keeps the same full-bleed logic with a slightly taller crop. */
@media (min-width:1024px) and (max-width:1199px){
    html body #home-view .editorial-yacht .editorial-visual-inner{
        aspect-ratio:2.60 / 1!important;
    }

    html body #home-view #experience{
        padding-bottom:66px!important;
    }

    html body #home-view #services{
        padding-top:66px!important;
    }
}



/* DESKTOP ONLY. Mobile remains locked.
   IMPORTANT: section top/bottom spacing is intentionally untouched. */
@media (min-width:1024px){

    /*
     * Keep the existing section padding exactly as V141.
     * Only refine the internal content width.
     */
    html body #home-view #services .luxury-inner{
        width:min(1380px,calc(100% - clamp(0px,1.6vw,30px)))!important;
        max-width:1380px!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }

    html body #home-view #services .services-grid{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:clamp(18px,1.25vw,22px)!important;
        width:100%!important;
        margin-left:auto!important;
        margin-right:auto!important;
        align-items:stretch!important;
    }

    /*
     * Equal structure within each row:
     * card is flex-column and CTA is pushed to the bottom.
     * This fixes the uneven CTA baselines caused by different paragraph lengths.
     */
    html body #home-view #services .service-card,
    html body #home-view #services .service-card + .service-card{
        position:relative!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
        justify-content:flex-start!important;
        min-width:0!important;
        height:100%!important;
        margin:0!important;
        padding:
            clamp(28px,1.7vw,32px)
            clamp(28px,1.75vw,34px)
            clamp(28px,1.7vw,32px)
            clamp(78px,4.75vw,88px)!important;
        box-sizing:border-box!important;
    }

    html body #home-view #services .service-card > .lux-icon{
        position:absolute!important;
        left:clamp(30px,2vw,36px)!important;
        top:clamp(30px,1.8vw,34px)!important;
        margin:0!important;
    }

    html body #home-view #services .service-card h3{
        width:100%!important;
        margin:0 0 10px!important;
        min-height:24px!important;
        line-height:1.34!important;
    }

    html body #home-view #services .service-card p{
        width:100%!important;
        margin:0 0 18px!important;
        line-height:1.68!important;
    }

    html body #home-view #services .service-card .service-link{
        margin-top:auto!important;
        align-self:flex-start!important;
        padding-top:0!important;
    }
}

/* Compact desktop: same geometry, slightly tighter internal rhythm. */
@media (min-width:1024px) and (max-width:1199px){
    html body #home-view #services .luxury-inner{
        width:min(960px,calc(100% - 76px))!important;
        max-width:960px!important;
    }

    html body #home-view #services .services-grid{
        gap:18px!important;
    }

    html body #home-view #services .service-card,
    html body #home-view #services .service-card + .service-card{
        padding:27px 24px 27px 70px!important;
    }

    html body #home-view #services .service-card > .lux-icon{
        left:26px!important;
        top:29px!important;
    }
}



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

    /*
     * Current desktop top gap is 38px.
     * Exact requested reduction: 38 × 0.80 = 30.4px.
     * No padding-bottom value is declared here on purpose.
     */
    html body #home-view #vehicules{
        padding-top:30.4px!important;
    }

    /* Keep heading composition centered without changing vertical section ends. */
    html body #home-view #vehicules > .eyebrow,
    html body #home-view #vehicules > .luxury-title,
    html body #home-view #vehicules > .luxury-intro{
        margin-left:auto!important;
        margin-right:auto!important;
        text-align:center!important;
    }

    html body #home-view #vehicules > .luxury-title{
        width:min(1120px,calc(100% - 80px))!important;
        max-width:1120px!important;
    }

    html body #home-view #vehicules > .luxury-intro{
        width:min(900px,calc(100% - 96px))!important;
        max-width:900px!important;
    }

    /*
     * A late legacy rule constrained the fleet to only 850px.
     * Restore the intended desktop width while keeping three equal columns.
     */
    html body #home-view #vehicules .vehicles-grid{
        width:min(1160px,calc(100% - 80px))!important;
        max-width:1160px!important;
        margin-left:auto!important;
        margin-right:auto!important;
        grid-template-columns:repeat(3,minmax(0,1fr))!important;
        gap:clamp(20px,1.35vw,24px)!important;
        align-items:stretch!important;
    }

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

    /* Equal visual image area for E / V / S without changing the images themselves. */
    html body #home-view #vehicules .vehicles-grid .vehicle-card .vehicle-img-container{
        width:100%!important;
        height:clamp(190px,13vw,220px)!important;
        min-height:clamp(190px,13vw,220px)!important;
        max-height:clamp(190px,13vw,220px)!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        box-sizing:border-box!important;
    }

    html body #home-view #vehicules .vehicles-grid .vehicle-card .vehicle-img-container img{
        width:auto!important;
        height:auto!important;
        max-width:92%!important;
        max-height:88%!important;
        object-fit:contain!important;
        transform:scale(1.07)!important;
        transform-origin:center center!important;
    }

    /* Preserve identical card axes. */
    html body #home-view #vehicules .vehicles-grid .vehicle-card h3{
        width:100%!important;
        text-align:center!important;
    }

    html body #home-view #vehicules .vehicles-grid .vehicle-card .vehicle-specs{
        width:100%!important;
        justify-content:center!important;
    }
}

/* Compact desktop remains three columns, just with tighter gutters. */
@media (min-width:1024px) and (max-width:1199px){
    html body #home-view #vehicules .vehicles-grid{
        width:calc(100% - 56px)!important;
        max-width:none!important;
        gap:16px!important;
    }

    html body #home-view #vehicules > .luxury-title{
        width:calc(100% - 64px)!important;
    }

    html body #home-view #vehicules > .luxury-intro{
        width:min(820px,calc(100% - 76px))!important;
    }

    html body #home-view #vehicules .vehicles-grid .vehicle-card .vehicle-img-container{
        height:176px!important;
        min-height:176px!important;
        max-height:176px!important;
    }
}