@media (max-width:1023px){
    html body #home-view #contact .contact-footer-divider{
        background:transparent!important;
        background-image:none!important;
        box-shadow:none!important;
        opacity:0!important;
    }

    html body #home-view #contact .contact-direct-message{
        box-sizing:border-box!important;
        border:1px solid rgba(223,184,107,.20)!important;
        border-radius:10px!important;
        background:linear-gradient(180deg,rgba(223,184,107,.018),rgba(255,255,255,.006) 32%,rgba(0,0,0,.055))!important;
        padding:24px 14px 14px!important;
        overflow:visible!important;
    }

    html body #home-view #contact .contact-message-eyebrow{
        margin-top:0!important;
        margin-bottom:18px!important;
    }
}



@media (min-width:1024px){
 html body #home-view .booking-widget{
   width:min(574px,calc(100vw - 96px))!important;
   max-width:574px!important;
   margin-left:auto!important;margin-right:auto!important;
   position:relative!important;top:9px!important;
 }
 html body #home-view .hero{
   display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
   min-height:calc(100vh - 72px)!important;padding-top:72px!important;padding-bottom:0!important;box-sizing:border-box!important;
 }
 html body header nav{display:flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;}
}
@media (min-width:1501px){
 html body header{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;align-items:center!important;}
 html body header .logo-container{justify-self:start!important;}
 html body header nav{justify-self:center!important;gap:clamp(18px,1.7vw,34px)!important;}
 html body header .header-actions{justify-self:end!important;}
}
@media (min-width:1181px) and (max-width:1500px){
 html body header nav{gap:10px!important;}
 html body header nav a{font-size:.62rem!important;letter-spacing:.035em!important;}
}
@media (min-width:1024px) and (max-width:1180px){
 html body header{padding-left:18px!important;padding-right:18px!important;}
 html body header nav{gap:7px!important;}
 html body header nav a{font-size:.56rem!important;letter-spacing:.02em!important;}
 html body header .header-actions{gap:7px!important;}
 html body header .btn-phone-prestige{padding-left:10px!important;padding-right:10px!important;font-size:.68rem!important;}
}

/* Definitive no-hover tile: deliberately higher specificity than legacy :not() hover rules. */
html body div.flatpickr-calendar.open span.flatpickr-day:not(.gesture-preview):not(.flatpickr-disabled):not(.notAllowed):not([aria-disabled="true"]):hover,
html body div.flatpickr-calendar.open span.flatpickr-day:not(.gesture-preview):not(.flatpickr-disabled):not(.notAllowed):not([aria-disabled="true"]):focus,
html body div.flatpickr-calendar.open span.flatpickr-day.today:not(.gesture-preview):not(.flatpickr-disabled):not(.notAllowed):not([aria-disabled="true"]):hover,
html body div.flatpickr-calendar.open span.flatpickr-day.selected:not(.gesture-preview):hover{
 background:none!important;background-color:transparent!important;background-image:none!important;
 border-color:transparent!important;border-radius:0!important;outline:0!important;box-shadow:none!important;
 filter:none!important;text-shadow:none!important;transform:none!important;
}
html body div.flatpickr-calendar.open span.flatpickr-day:hover::before,
html body div.flatpickr-calendar.open span.flatpickr-day:hover::after,
html body div.flatpickr-calendar.open span.flatpickr-day:focus::before,
html body div.flatpickr-calendar.open span.flatpickr-day:focus::after{
 content:none!important;display:none!important;background:none!important;border:0!important;box-shadow:none!important;
}
html body div.flatpickr-calendar.open span.flatpickr-day.selected,
html body div.flatpickr-calendar.open span.flatpickr-day.selected:hover{
 color:#efd79f!important;-webkit-text-fill-color:#efd79f!important;font-weight:600!important;
}

@media (min-width:1024px){
 html body #home-view #contact .contact-footer-divider{
   background:transparent!important;background-image:none!important;box-shadow:none!important;opacity:0!important;
 }
 html body #home-view #contact .contact-direct-message{
   box-sizing:border-box!important;border:1px solid rgba(223,184,107,.20)!important;border-radius:10px!important;
   background:linear-gradient(180deg,rgba(223,184,107,.018),rgba(255,255,255,.006) 32%,rgba(0,0,0,.055))!important;
   padding:26px 22px 18px!important;overflow:visible!important;
 }
 html body #home-view #contact .contact-message-eyebrow{margin-top:0!important;margin-bottom:18px!important;}
}



@media (min-width:1501px) and (max-width:1750px){
    html body header nav{
        gap:10px!important;
    }
    html body header nav a{
        font-size:.68rem!important;
        letter-spacing:.04em!important;
    }
}



/* =========================================================
   1) LANGUAGE FLAG — remove every legacy selection/frame trace.
   Keep only the flag image itself with its normal rounded crop.
   ========================================================= */
html body header .language-current-flag,
html body header .language-option-flag,
html body header .language-current-btn .language-current-flag,
html body header .language-menu .language-option .language-option-flag{
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    -webkit-box-shadow:none!important;
    filter:none!important;
    background:transparent!important;
    background-image:none!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
    transform:none!important;
    border-radius:2px!important;
    object-fit:cover!important;
    object-position:center!important;
}

/* No hidden frame/pseudo-element may be attached to either flag image. */
html body header .language-current-flag::before,
html body header .language-current-flag::after,
html body header .language-option-flag::before,
html body header .language-option-flag::after{
    content:none!important;
    display:none!important;
}

/* =========================================================
   2) DESKTOP CALENDAR HOVER
   Exact visual logic of NUMBER OF HOURS:
   - soft horizontal gold glow
   - warm gold text
   - very subtle text glow
   - no border / tile / outline
   ========================================================= */
@media (min-width:1024px){

    /* Calendar days */
    html body div.flatpickr-calendar.open span.flatpickr-day:not(.selected):not(.gesture-preview):not(.flatpickr-disabled):not(.notAllowed):not([aria-disabled="true"]):hover,
    html body div.flatpickr-calendar.open span.flatpickr-day.today:not(.selected):not(.gesture-preview):not(.flatpickr-disabled):not(.notAllowed):not([aria-disabled="true"]):hover{
        border:0!important;
        border-color:transparent!important;
        border-radius:0!important;
        outline:0!important;
        box-shadow:none!important;
        transform:none!important;
        background:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(223,184,107,.022) 24%,
                rgba(223,184,107,.060) 50%,
                rgba(223,184,107,.022) 76%,
                transparent 100%
            )!important;
        color:rgba(239,215,159,.94)!important;
        -webkit-text-fill-color:rgba(239,215,159,.94)!important;
        text-shadow:
            0 1px 0 rgba(0,0,0,.94),
            0 0 7px rgba(223,184,107,.07)!important;
    }

    /* Month / year dropdown entries */
    html body .flatpickr-calendar .calendar-header-dropdown .calendar-header-option:not(.selected):not(.gesture-preview):not(.disabled):not(:disabled):hover,
    html body .flatpickr-calendar .calendar-header-dropdown .calendar-header-option:not(.selected):not(.gesture-preview):not(.disabled):not(:disabled):focus{
        border:0!important;
        border-color:transparent!important;
        border-radius:0!important;
        outline:0!important;
        box-shadow:none!important;
        transform:none!important;
        background:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(223,184,107,.022) 24%,
                rgba(223,184,107,.060) 50%,
                rgba(223,184,107,.022) 76%,
                transparent 100%
            )!important;
        color:rgba(239,215,159,.94)!important;
        -webkit-text-fill-color:rgba(239,215,159,.94)!important;
        text-shadow:
            0 1px 0 rgba(0,0,0,.94),
            0 0 7px rgba(223,184,107,.07)!important;
    }

    /* Pseudo-elements stay disabled: hover is only the same soft glow as Hours. */
    html body div.flatpickr-calendar.open span.flatpickr-day:hover::before,
    html body div.flatpickr-calendar.open span.flatpickr-day:hover::after,
    html body .flatpickr-calendar .calendar-header-option:hover::before,
    html body .flatpickr-calendar .calendar-header-option:hover::after{
        content:none!important;
        display:none!important;
    }
}



/* Clean French flag: zero frame, zero shadow, zero selection ring, zero rounding. */
html body header img.language-option-flag[src*="flag-fr-clean.svg"],
html body header img.language-current-flag[src*="flag-fr-clean.svg"]{
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    -webkit-box-shadow:none!important;
    border-radius:0!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
    filter:none!important;
    background:none!important;
    background-color:transparent!important;
    background-image:none!important;
    transform:none!important;
    opacity:1!important;
    object-fit:fill!important;
    object-position:center!important;
}

/* Remove any legacy selection decoration from the French option container itself. */
html body header #btn-fr,
html body header #btn-fr:hover,
html body header #btn-fr:focus,
html body header #btn-fr:focus-visible,
html body header #btn-fr:active,
html body header #btn-fr.active{
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    -webkit-box-shadow:none!important;
    background:transparent!important;
    background-color:transparent!important;
    background-image:none!important;
}

/* Same reset on possible inner wrappers. */
html body header #btn-fr .language-option-stack,
html body header #btn-fr .language-option-stack::before,
html body header #btn-fr .language-option-stack::after{
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    background:transparent!important;
    content:none!important;
}



/* EXPERIENCE — desktop composition only. Mobile remains untouched. */
@media (min-width:1024px){

    html body #home-view #experience{
        padding:62px 40px 68px!important;
        box-sizing:border-box!important;
    }

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

    html body #home-view #experience .eyebrow{
        margin-bottom:9px!important;
    }

    html body #home-view #experience .luxury-title{
        margin-bottom:14px!important;
        line-height:1.12!important;
    }

    html body #home-view #experience .luxury-intro{
        width:min(920px,100%)!important;
        max-width:920px!important;
        margin:0 auto 34px!important;
        font-size:.96rem!important;
        line-height:1.72!important;
    }

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

    html body #home-view #experience .experience-item,
    html body #home-view #experience .experience-item + .experience-item{
        margin:0!important;
        min-height:318px!important;
        height:100%!important;
        padding:27px 28px 29px!important;
        box-sizing:border-box!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:flex-start!important;
    }

    html body #home-view #experience .experience-icon{
        margin-bottom:18px!important;
    }

    html body #home-view #experience .experience-item h3{
        width:100%!important;
        min-height:54px!important;
        margin:0 0 11px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        text-align:center!important;
        font-size:1.12rem!important;
        line-height:1.34!important;
    }

    html body #home-view #experience .experience-item p{
        margin:0!important;
        font-size:.86rem!important;
        line-height:1.66!important;
        text-align:center!important;
    }
}

/* Mid-size desktop: two columns avoid cramped 4-card typography. */
@media (min-width:1024px) and (max-width:1199px){
    html body #home-view #experience{
        padding-left:38px!important;
        padding-right:38px!important;
    }

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

    html body #home-view #experience .experience-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:18px!important;
    }

    html body #home-view #experience .experience-item,
    html body #home-view #experience .experience-item + .experience-item{
        min-height:290px!important;
        padding:25px 28px 27px!important;
    }

    html body #home-view #experience .experience-item h3{
        min-height:44px!important;
    }
}



/* =========================================================
   HERO IMAGE
   Brighter scene overall, while deliberately keeping the
   booking panel itself more opaque for readability.
   ========================================================= */

/* Desktop */
@media (min-width:1024px){
    html body #home-view .hero{
        background-image:
            linear-gradient(
                180deg,
                rgba(0,0,0,.23) 0%,
                rgba(0,0,0,.15) 30%,
                rgba(0,0,0,.25) 68%,
                rgba(0,0,0,.48) 100%
            ),
            url("images/homepage-background-desktop-hq.webp")!important;
    }

    html body #home-view .hero::after{
        background:
            radial-gradient(
                ellipse at 50% 46%,
                rgba(0,0,0,0) 0%,
                rgba(0,0,0,.035) 52%,
                rgba(0,0,0,.20) 100%
            )!important;
    }

    html body #home-view .hero .booking-widget{
        background:
            linear-gradient(180deg,rgba(255,255,255,.018),transparent 18%),
            rgba(7,7,9,.91)!important;
        background-color:rgba(7,7,9,.91)!important;
        -webkit-backdrop-filter:blur(3px)!important;
        backdrop-filter:blur(3px)!important;
        box-shadow:
            0 18px 42px rgba(0,0,0,.32),
            inset 0 1px 0 rgba(255,255,255,.028)!important;
    }
}

/* Mobile */
@media (max-width:1023px){
    html body #home-view .hero{
        background-image:
            linear-gradient(
                180deg,
                rgba(0,0,0,.25) 0%,
                rgba(0,0,0,.17) 30%,
                rgba(0,0,0,.28) 68%,
                rgba(0,0,0,.52) 100%
            ),
            url("images/homepage-background-mobile.webp")!important;
        background-position:50% 41%!important;
    }

    html body #home-view .hero::after{
        background:
            radial-gradient(
                ellipse at 50% 45%,
                rgba(0,0,0,0) 0%,
                rgba(0,0,0,.045) 50%,
                rgba(0,0,0,.22) 100%
            )!important;
    }

    html body #home-view .hero .booking-widget{
        background:
            linear-gradient(180deg,rgba(255,255,255,.016),transparent 18%),
            rgba(7,7,9,.92)!important;
        background-color:rgba(7,7,9,.92)!important;
        -webkit-backdrop-filter:blur(3px)!important;
        backdrop-filter:blur(3px)!important;
        box-shadow:
            0 16px 34px rgba(0,0,0,.30),
            inset 0 1px 0 rgba(255,255,255,.026)!important;
    }
}

/* Previously approved choice: neutral/default cursor on the clock dial. */
html body #home-view #timePickerPopup .clock-face,
html body #home-view #timePickerPopup .clock-face:active{
    cursor:default!important;
}



@media (min-width:1024px){
    html body #home-view #experience{
        padding-top:90px!important;
    }
}

html body #home-view #timePickerPopup .clock-face{
    cursor:default!important;
}

html body #home-view #timePickerPopup .clock-number:not(.disabled),
html body #home-view #timePickerPopup .clock-minute-dot:not(.disabled){
    cursor:pointer!important;
}

html body #home-view #timePickerPopup .clock-number.disabled,
html body #home-view #timePickerPopup .clock-minute-dot.disabled{
    cursor:default!important;
}

html body #home-view #timePickerPopup .clock-time-value{
    cursor:pointer!important;
}

html body #home-view #timePickerPopup.clock-cursor-dragging,
html body #home-view #timePickerPopup.clock-cursor-dragging *{
    cursor:grabbing!important;
}



/* Clock APPLY / VALIDER = same pointer as AM/PM and 12/24. */
html body #home-view #timePickerPopup .clock-apply-btn,
html body #home-view #timePickerPopup #clockApplyInline{
    cursor:pointer!important;
}

/* Number of Hours: each selectable hour uses the same pointer cursor. */
html body :is(#home-view #hoursPickerPopup, #checkout-view #passengersPickerPopup) .hour-grid-item:not(.disabled),
html body :is(#home-view #hoursPickerPopup, #checkout-view #passengersPickerPopup) .hours-grid-container .hour-grid-item:not(.disabled){
    cursor:pointer!important;
}

/* Disabled hour options stay neutral. */
html body :is(#home-view #hoursPickerPopup, #checkout-view #passengersPickerPopup) .hour-grid-item.disabled,
html body :is(#home-view #hoursPickerPopup, #checkout-view #passengersPickerPopup) .hours-grid-container .hour-grid-item.disabled{
    cursor:default!important;
}

/* Booking form date field = same pointer as AM/PM and 12/24. */
html body #home-view #date_picker,
html body #home-view #box-date input,
html body #home-view #box-date .input-icon-wrapper{
    cursor:pointer!important;
}



@media (min-width:1024px){

    /*
     * EXPERIENCE — final desktop proportions.
     * Keep the original 90px separation from the end of the hero,
     * then use a fluid but bounded composition from 1024px to 1920px+.
     */
    html body #home-view #experience{
        box-sizing:border-box!important;
        padding-top:90px!important;
        padding-right:clamp(34px,4.6vw,88px)!important;
        padding-bottom:clamp(72px,7vw,108px)!important;
        padding-left:clamp(34px,4.6vw,88px)!important;
    }

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

    /* Title block */
    html body #home-view #experience .eyebrow{
        margin:0 0 12px!important;
    }

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

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

    /* 4-card row */
    html body #home-view #experience .experience-grid{
        display:grid!important;
        grid-template-columns:repeat(4,minmax(0,1fr))!important;
        gap:clamp(16px,1.35vw,24px)!important;
        width:100%!important;
        margin:0 auto!important;
        align-items:stretch!important;
    }

    html body #home-view #experience .experience-item,
    html body #home-view #experience .experience-item + .experience-item{
        min-width:0!important;
        min-height:clamp(306px,18.1vw,336px)!important;
        height:100%!important;
        margin:0!important;
        padding:
            clamp(24px,1.65vw,30px)
            clamp(20px,1.55vw,28px)
            clamp(26px,1.8vw,32px)!important;
        box-sizing:border-box!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:flex-start!important;
    }

    html body #home-view #experience .experience-icon{
        margin-bottom:clamp(16px,1.15vw,20px)!important;
        flex:0 0 auto!important;
    }

    html body #home-view #experience .experience-item h3{
        width:100%!important;
        min-height:clamp(46px,3.2vw,58px)!important;
        margin:0 0 11px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        text-align:center!important;
        font-size:clamp(.96rem,.82rem + .16vw,1.12rem)!important;
        line-height:1.34!important;
    }

    html body #home-view #experience .experience-item p{
        width:100%!important;
        margin:0!important;
        text-align:center!important;
        font-size:clamp(.78rem,.70rem + .08vw,.87rem)!important;
        line-height:1.66!important;
    }
}

/*
 * Compact desktop: preserve the same composition and proportions
 * while avoiding cramped 4-column cards below 1200px.
 */
@media (min-width:1024px) and (max-width:1199px){
    html body #home-view #experience{
        padding-right:38px!important;
        padding-left:38px!important;
        padding-bottom:76px!important;
    }

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

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

    html body #home-view #experience .experience-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:18px!important;
    }

    html body #home-view #experience .experience-item,
    html body #home-view #experience .experience-item + .experience-item{
        min-height:286px!important;
        padding:25px 28px 27px!important;
    }

    html body #home-view #experience .experience-item h3{
        min-height:44px!important;
    }
}



html body #home-view #timePickerPopup .clock-time-value::before,
html body #home-view #timePickerPopup .clock-time-value::after{
    content:none!important;
    display:none!important;
}

html body #home-view #timePickerPopup .clock-time-display{
    position:relative!important;
    overflow:visible!important;
}

/* Legacy CSS disabled hit-testing on the dial numbers. */
html body #home-view #timePickerPopup #clockFace .clock-number:not(.disabled){
    pointer-events:auto!important;
}
html body #home-view #timePickerPopup #clockFace .clock-number.disabled{
    pointer-events:none!important;
}

html body #home-view #timePickerPopup .red-clock-step-btn-v136{
    position:absolute!important;
    z-index:90!important;
    width:20px!important;
    height:14px!important;
    min-width:20px!important;
    min-height:14px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    appearance:none!important;
    -webkit-appearance:none!important;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:rgba(223,184,107,.68)!important;
    font-family:Arial,sans-serif!important;
    font-weight:400!important;
    line-height:1!important;
    letter-spacing:0!important;
    cursor:pointer!important;
    user-select:none!important;
    -webkit-user-select:none!important;
    -webkit-tap-highlight-color:transparent!important;
    touch-action:none!important;
    transform:translateX(-50%)!important;
    transition:color .10s ease,text-shadow .10s ease!important;
}

@media (min-width:1024px){
    html body #home-view #timePickerPopup .red-clock-step-btn-v136{
        font-size:9px!important;
    }
    html body #home-view #timePickerPopup .red-clock-step-btn-v136[data-direction="1"]{
        top:-13px!important;
    }
    html body #home-view #timePickerPopup .red-clock-step-btn-v136[data-direction="-1"]{
        bottom:-13px!important;
    }
}

@media (max-width:1023px){
    html body #home-view #timePickerPopup .red-clock-step-btn-v136{
        font-size:8px!important;
    }
    html body #home-view #timePickerPopup .red-clock-step-btn-v136[data-direction="1"]{
        top:-10px!important;
    }
    html body #home-view #timePickerPopup .red-clock-step-btn-v136[data-direction="-1"]{
        bottom:-10px!important;
    }
}

html body #home-view #timePickerPopup .red-clock-step-btn-v136:hover,
html body #home-view #timePickerPopup .red-clock-step-btn-v136:focus-visible,
html body #home-view #timePickerPopup .red-clock-step-btn-v136.is-holding{
    color:#efd79f!important;
    text-shadow:0 0 7px rgba(223,184,107,.24)!important;
}