/*
Theme Name: Casa Mima
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Description: Thème enfant sur-mesure pour Casa Mima - Riad d'exception au Maroc.
Author: Casa Mima / La Ligne Web
Template: twentytwentyfive
Version: 1.0.0
Text Domain: casa-mima
*/

/* ==========================================================================
   1. CSS VARIABLES & DESIGN TOKENS (CASA MIMA RIAD MAROC)
   ========================================================================== */
:root {
    --color-primary: #F1E4D8;       /* Sable / Tadelakt Beige (Header) */
    --color-text: #421F19;          /* Terre de Marrakech / Brun Terracotta */
    --color-text-light: #7A5852;    /* Terre cuite adoucie */
    --color-white: #FFFFFF;         /* Fond des pages */
    --font-primary: 'Sulphur Point', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --header-height: 75px;
}

/* ==========================================================================
   2. GLOBAL TYPOGRAPHY & RESET (PAGE BACKGROUND IS PURE WHITE, 0 GAPS)
   ========================================================================== */
html, 
body {
    font-family: var(--font-primary) !important;
    color: var(--color-text) !important;
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    --wp--style--root--padding-left: 0px !important;
    --wp--style--root--padding-right: 0px !important;
    --wp--style--root--padding-top: 0px !important;
    --wp--style--root--padding-bottom: 0px !important;
}

*, *::before, *::after {
    box-sizing: inherit !important;
}

/* Reset root wrapper and main margins so hero touches the header flush */
#page,
.site,
.wp-site-blocks,
main,
main.wp-block-group,
.wp-site-blocks > main,
.is-root-container {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Universal outline reset */
a, button, input, select, textarea {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Alignfull containers must span 100% edge-to-edge */
.alignfull,
.wp-block-group.alignfull {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ==========================================================================
   3. CASA MIMA HEADER COMPONENT (BEIGE BACKGROUND #F1E4D8)
   ========================================================================== */
.casa-site-header-wrap {
    background-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
    width: 100% !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease !important;
    border-bottom: 1px solid rgba(66, 31, 25, 0.07) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.casa-site-header-wrap.is-scrolled {
    box-shadow: 0 4px 25px rgba(66, 31, 25, 0.08) !important;
}

.casa-header-container {
    max-width: 1560px !important;
    margin: 0 auto !important;
    padding: 1.4rem 4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    width: 100% !important;
    background-color: transparent !important;
}

/* --- Brand / Logo Area --- */
.casa-header-brand {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    background-color: transparent !important;
}

.casa-logo-brand-link {
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: opacity 0.25s ease !important;
    background-color: transparent !important;
}

.casa-logo-brand-link:hover {
    opacity: 0.82 !important;
}

.casa-logo-text {
    font-family: var(--font-primary) !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Site Logo Image support */
.casa-site-logo {
    margin: 0 !important;
    background-color: transparent !important;
}

.casa-site-logo img,
.custom-logo {
    max-height: 44px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* --- Desktop Navigation --- */
.casa-header-nav {
    display: flex !important;
    align-items: center !important;
    gap: 3.2rem !important;
    background-color: transparent !important;
}

.casa-nav-list {
    display: flex !important;
    align-items: center !important;
    gap: 2.6rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
}

.casa-nav-item {
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
}

.casa-nav-link {
    font-family: var(--font-primary) !important;
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    position: relative !important;
    padding: 0.3rem 0 !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    white-space: nowrap !important;
}

.casa-nav-link:hover {
    opacity: 0.7 !important;
}

div#sbi_mod_error{
    margin: 0 !important;
    
}

/* --- Language Switcher (FR | EN) --- */
.casa-lang-switcher {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    font-family: var(--font-primary) !important;
    font-size: 1.02rem !important;
    letter-spacing: 0.06em !important;
    user-select: none !important;
    background-color: transparent !important;
}

.casa-lang-btn {
    background: transparent !important;
    border: none !important;
    color: rgba(66, 31, 25, 0.45) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    letter-spacing: inherit !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
}

.casa-lang-btn:hover {
    color: var(--color-text) !important;
}

.casa-lang-btn.is-active {
    color: var(--color-text) !important;
    font-weight: 700 !important;
}

.casa-lang-sep {
    color: rgba(66, 31, 25, 0.3) !important;
    font-size: 0.95rem !important;
    margin: 0 0.1rem !important;
}

/* --- CTA "RÉSERVER" Underlined Button --- */
.casa-header-cta-wrap {
    display: inline-flex !important;
    align-items: center !important;
    background-color: transparent !important;
}

.casa-header-cta {
    font-family: var(--font-primary) !important;
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding-bottom: 3px !important;
    border-bottom: 1.8px solid var(--color-text) !important;
    transition: opacity 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
    white-space: nowrap !important;
    display: inline-block !important;
    line-height: 1.1 !important;
}

.casa-header-cta:hover {
    opacity: 0.72 !important;
    transform: translateY(-1px) !important;
}

/* --- Mobile Burger Toggle Button --- */
.casa-mobile-toggle {
    display: none !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 28px !important;
    height: 18px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 100 !important;
}

.casa-burger-line {
    width: 100% !important;
    height: 2px !important;
    background-color: var(--color-text) !important;
    border-radius: 1px !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
}

/* --- Mobile Navigation Drawer Panel (Beige Background #F1E4D8) --- */
.casa-mobile-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.35s ease, visibility 0.35s ease !important;
    pointer-events: none !important;
}

.casa-mobile-drawer.is-active {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: all !important;
}

.casa-drawer-backdrop {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(66, 31, 25, 0.45) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.casa-drawer-panel {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 82% !important;
    max-width: 360px !important;
    height: 100% !important;
    background-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
    padding: 3rem 2.2rem 3rem 2.2rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-shadow: -10px 0 40px rgba(66, 31, 25, 0.15) !important;
    transform: translateX(100%) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
}

.casa-mobile-drawer.is-active .casa-drawer-panel {
    transform: translateX(0) !important;
}

.casa-drawer-close {
    position: absolute !important;
    top: 1.5rem !important;
    right: 1.5rem !important;
    background: transparent !important;
    border: none !important;
    color: var(--color-text) !important;
    cursor: pointer !important;
    padding: 0.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.casa-drawer-close:hover {
    opacity: 0.7 !important;
    transform: scale(1.1) !important;
}

.casa-drawer-header {
    margin-bottom: 2.8rem !important;
    padding-top: 0.5rem !important;
}

.casa-drawer-brand {
    font-family: var(--font-primary) !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

.casa-drawer-nav-list {
    list-style: none !important;
    margin: 0 0 2.5rem 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.6rem !important;
}

.casa-drawer-link {
    font-family: var(--font-primary) !important;
    font-size: 1.35rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease !important;
    display: inline-block !important;
}

.casa-drawer-link:hover {
    opacity: 0.7 !important;
}

.casa-drawer-lang-switcher {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 2.5rem !important;
    font-family: var(--font-primary) !important;
    font-size: 1.15rem !important;
}

.casa-drawer-cta-wrap {
    margin-top: auto !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid rgba(66, 31, 25, 0.1) !important;
}

.casa-drawer-cta {
    font-family: var(--font-primary) !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding-bottom: 3px !important;
    border-bottom: 2px solid var(--color-text) !important;
    display: inline-block !important;
}

/* ==========================================================================
   5. HOME SECTION 1: HERO PATIO & CALL TO ACTION (.casa-hero-section)
      -> 100% FULL VIEWPORT HEIGHT (calc(100vh - header)) & 50/50 SPLIT
   ========================================================================== */
.casa-hero-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 6rem 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
}

.casa-hero-grid {
    display: grid !important;
    grid-template-columns: 50% 50% !important;
    height: calc(100vh - 75px) !important;
    height: calc(100dvh - 75px) !important;
    min-height: calc(100vh - 75px) !important;
    min-height: calc(100dvh - 75px) !important;
    max-height: calc(100vh - 75px) !important;
    max-height: calc(100dvh - 75px) !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    background-color: transparent !important;
    overflow: hidden !important;
}

/* Left Image Column - Prend 100% de la hauteur de l'écran */
.casa-hero-img-wrap {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    background-color: transparent !important;
}

.casa-hero-img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0px !important;
    background-color: #f8f6f3 !important;
    display: flex !important;
}

.casa-hero-img img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0px !important;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.casa-hero-img:hover img {
    transform: scale(1.03) !important;
}

/* Right Content Column */
.casa-hero-text-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    height: 100% !important;
    padding: 4rem 6rem 4rem 7rem !important;
    box-sizing: border-box !important;
    background-color: transparent !important;
}

.casa-eyebrow-text,
.casa-hero-text-wrap .casa-eyebrow-text {
    font-family: var(--font-primary) !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    margin: 0 0 2.2rem 0 !important;
    line-height: 1.3 !important;
}

.casa-hero-title,
.casa-hero-text-wrap .casa-hero-title {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 4.8rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    line-height: 1.12 !important;
    margin: 0 0 3.2rem 0 !important;
    letter-spacing: 0.01em !important;
}

.casa-hero-cta-wrap {
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
}

.casa-hero-cta {
    font-family: var(--font-primary) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding-bottom: 4px !important;
    border-bottom: 2px solid var(--color-text) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.7rem !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    white-space: nowrap !important;
}

.casa-hero-cta:hover {
    opacity: 0.72 !important;
    transform: translateX(5px) !important;
}

/* ==========================================================================
   6. HOME SECTION 2: INTRO "CINQ SUITES" (.casa-intro-section)
   ========================================================================== */
.casa-intro-section {
    max-width: 900px !important;
    margin: 5rem auto 7rem auto !important;
    padding: 0 2rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
}

.casa-intro-title,
.casa-intro-section .casa-intro-title {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 3.4rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    line-height: 1.25 !important;
    margin: 0 0 1.8rem 0 !important;
    letter-spacing: 0.01em !important;
}

.casa-intro-desc,
.casa-intro-section .casa-intro-desc {
    font-family: var(--font-primary) !important;
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    color: var(--color-text) !important;
    margin: 0 auto !important;
    max-width: 680px !important;
    letter-spacing: 0.02em !important;
}

/* ==========================================================================
   8. HOME SECTION 3: SUITES SHOWCASE (.casa-suites-showcase)
   ========================================================================== */
.casa-suites-showcase {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.casa-suite-row {
    display: grid !important;
    grid-template-columns: 50% 50% !important;
    min-height: 680px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Background variations */
.casa-suite-row.is-bg-beige {
    background-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
}

.casa-suite-row.is-bg-white {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
}

/* Image Column */
.casa-suite-img-wrap {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
}

.casa-suite-img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0px !important;
    display: flex !important;
}

.casa-suite-img img {
    width: 100% !important;
    height: 100% !important;
    min-height: 580px !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0px !important;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.casa-suite-img:hover img {
    transform: scale(1.03) !important;
}

/* Text Content Column */
.casa-suite-text-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 4.5rem 6rem 4.5rem 7rem !important;
    box-sizing: border-box !important;
}

.casa-suite-row.is-reversed .casa-suite-text-wrap {
    padding: 4.5rem 7rem 4.5rem 6rem !important;
}

.casa-suite-title,
.casa-suite-text-wrap .casa-suite-title {
    font-family: var(--font-primary) !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    margin: 0 0 2.2rem 0 !important;
    line-height: 1.3 !important;
}

.casa-suite-desc,
.casa-suite-text-wrap .casa-suite-desc {
    font-family: var(--font-primary) !important;
    font-size: 1.22rem !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    color: var(--color-text) !important;
    margin: 0 0 3rem 0 !important;
    max-width: 520px !important;
    letter-spacing: 0.02em !important;
}

.casa-suite-cta-wrap {
    margin: 0 !important;
    padding: 0 !important;
}

.casa-suite-cta {
    font-family: var(--font-primary) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding-bottom: 4px !important;
    border-bottom: 2px solid var(--color-text) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.7rem !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    white-space: nowrap !important;
}

.casa-suite-cta:hover {
    opacity: 0.72 !important;
    transform: translateX(5px) !important;
}

/* Reversed layout ordering on desktop */
@media screen and (min-width: 961px) {
    .casa-suite-row.is-reversed .casa-suite-text-wrap {
        order: 1 !important;
    }
    .casa-suite-row.is-reversed .casa-suite-img-wrap {
        order: 2 !important;
    }
}

/* ==========================================================================
   9. HOME SECTION 4: 3-SUITES GRID & FULL-WIDTH BANNER
   ========================================================================== */
/* --- 3-Suites Grid (Strict Dead-Center Alignment) --- */
.casa-suites-grid-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 5.5rem 0 6rem 0 !important;
    padding: 0 4rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
}

.casa-suites-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3rem !important;
    align-items: start !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.casa-suites-grid > *,
.casa-suites-grid .casa-suite-card {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    margin-bottom: 0 !important;
    margin-block-end: 0 !important;
    padding: 0 !important;
}

.casa-suite-card {
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: transform 0.3s ease !important;
    align-self: start !important;
}

.casa-suite-card-img-wrap {
    width: 100% !important;
    overflow: hidden !important;
    background-color: #f8f6f3 !important;
    border-radius: 0px !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    padding: 0 !important;
}

.casa-suite-card-img {
    width: 100% !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0px !important;
    display: flex !important;
}

.casa-suite-card-img img {
    width: 100% !important;
    height: 480px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0px !important;
    margin: 0 !important;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.casa-suite-card:hover .casa-suite-card-img img {
    transform: scale(1.035) !important;
}

.casa-suite-card-title,
.casa-suite-card .casa-suite-card-title {
    font-family: var(--font-primary) !important;
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    margin: 1.4rem 0 0 0 !important;
    line-height: 1.3 !important;
    transition: opacity 0.25s ease !important;
}

.casa-suite-card:hover .casa-suite-card-title {
    opacity: 0.7 !important;
}

/* --- Full-Width Panoramic Banner (Slimmer Height: 420px) --- */
.casa-fullwidth-banner-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 6rem 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background-color: #FFFFFF !important;
}

.casa-fullwidth-banner-img {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0px !important;
    display: block !important;
}

.casa-fullwidth-banner-img img {
    width: 100% !important;
    height: 420px !important;
    max-height: 450px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0px !important;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.casa-fullwidth-banner-img:hover img {
    transform: scale(1.02) !important;
}

/* ==========================================================================
   10. RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media screen and (max-width: 1200px) {
    .casa-header-container {
        padding: 1.2rem 2.5rem !important;
    }

    .casa-header-nav {
        gap: 2.2rem !important;
    }

    .casa-nav-list {
        gap: 1.8rem !important;
    }

    .casa-hero-text-wrap {
        padding: 3rem 3.5rem 3rem 4rem !important;
    }

    .casa-hero-title {
        font-size: 3.8rem !important;
    }

    .casa-eyebrow-text {
        font-size: 1.15rem !important;
    }

    .casa-intro-title {
        font-size: 2.8rem !important;
    }

    .casa-suites-grid-section {
        padding: 0 2.5rem !important;
        margin: 4rem 0 4.5rem 0 !important;
    }

    .casa-suites-grid {
        gap: 2rem !important;
    }

    .casa-suite-card-img img {
        height: 380px !important;
    }

    .casa-fullwidth-banner-img img {
        height: 360px !important;
    }
}

@media screen and (max-width: 960px) {
    .casa-header-container {
        padding: 1.1rem 1.8rem !important;
    }

    .casa-header-nav {
        display: none !important;
    }

    .casa-mobile-toggle {
        display: flex !important;
    }

    .casa-logo-text {
        font-size: 1.45rem !important;
    }

    .casa-hero-grid {
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }

    .casa-hero-img {
        min-height: 52vh !important;
        height: 52vh !important;
    }

    .casa-hero-img img {
        height: 100% !important;
        min-height: 52vh !important;
    }

    .casa-hero-text-wrap {
        align-items: center !important;
        text-align: center !important;
        padding: 3.5rem 1.8rem 3.5rem 1.8rem !important;
        height: auto !important;
        width: 100% !important;
    }

    .casa-hero-title {
        font-size: 3rem !important;
        margin-bottom: 2.2rem !important;
        text-align: center !important;
    }

    .casa-eyebrow-text,
    .casa-hero-text-wrap .casa-eyebrow-text {
        font-size: 1.15rem !important;
        margin-bottom: 1.5rem !important;
        text-align: center !important;
        width: 100% !important;
    }

    .casa-hero-cta-wrap {
        text-align: center !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .casa-hero-cta {
        margin: 0 auto !important;
        justify-content: center !important;
    }

    .casa-intro-section {
        margin: 3.5rem auto 5rem auto !important;
        padding: 0 1.5rem !important;
    }

    .casa-intro-title {
        font-size: 2.4rem !important;
    }

    .casa-intro-desc {
        font-size: 1.05rem !important;
    }

    .casa-suite-row {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    .casa-suite-row.is-reversed .casa-suite-text-wrap {
        order: 2 !important;
    }
    .casa-suite-row.is-reversed .casa-suite-img-wrap {
        order: 1 !important;
    }

    .casa-suite-img,
    .casa-suite-img img {
        min-height: 440px !important;
        height: 440px !important;
    }

    .casa-suite-text-wrap {
        padding: 3.5rem 2rem 4rem 2rem !important;
        align-items: center !important;
        text-align: center !important;
    }

    .casa-suite-title {
        font-size: 1.2rem !important;
        margin-bottom: 1.5rem !important;
        text-align: center !important;
    }

    .casa-suite-desc {
        font-size: 1.1rem !important;
        margin-bottom: 2.2rem !important;
        text-align: center !important;
    }

    .casa-suite-cta-wrap {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .casa-suite-cta {
        margin: 0 auto !important;
    }

    .casa-suites-grid-section {
        padding: 0 1.8rem !important;
        margin: 3.5rem 0 4rem 0 !important;
    }

    .casa-suites-grid {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
        max-width: 520px !important;
        margin: 0 auto !important;
    }

    .casa-suite-card {
        align-items: center !important;
        text-align: center !important;
    }

    .casa-suite-card-img img {
        height: 440px !important;
    }

    .casa-suite-card-title {
        text-align: center !important;
        font-size: 1.1rem !important;
    }

    .casa-fullwidth-banner-img img {
        height: 300px !important;
    }
}

@media screen and (max-width: 480px) {
    .casa-header-container {
        padding: 1rem 1.25rem !important;
    }

    .casa-logo-text {
        font-size: 1.3rem !important;
        letter-spacing: 0.09em !important;
    }

    .casa-drawer-panel {
        width: 90% !important;
        padding: 2.5rem 1.5rem !important;
    }

    .casa-hero-img,
    .casa-hero-img img {
        height: 45vh !important;
        min-height: 340px !important;
    }

    .casa-hero-text-wrap {
        padding: 2.5rem 1.25rem 3rem 1.25rem !important;
        align-items: center !important;
        text-align: center !important;
    }

    .casa-hero-title {
        font-size: 2.3rem !important;
        text-align: center !important;
    }

    .casa-eyebrow-text,
    .casa-hero-text-wrap .casa-eyebrow-text {
        font-size: 1.05rem !important;
        text-align: center !important;
        width: 100% !important;
    }

    .casa-hero-cta-wrap {
        text-align: center !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .casa-hero-cta {
        margin: 0 auto !important;
        font-size: 1.05rem !important;
    }

    .casa-intro-title {
        font-size: 2rem !important;
    }

    .casa-intro-desc {
        font-size: 0.98rem !important;
    }

    .casa-suite-img,
    .casa-suite-img img {
        min-height: 340px !important;
        height: 45vh !important;
    }

    .casa-suite-text-wrap {
        padding: 2.8rem 1.4rem 3.2rem 1.4rem !important;
    }

    .casa-suite-title {
        font-size: 1.1rem !important;
    }

    .casa-suite-desc {
        font-size: 1rem !important;
        line-height: 1.65 !important;
    }

    .casa-suites-grid-section {
        padding: 0 1.25rem !important;
        margin: 3rem 0 3.5rem 0 !important;
    }

    .casa-suite-card-img img {
        height: 340px !important;
    }

    .casa-suite-card-title {
        font-size: 1.05rem !important;
    }

    .casa-fullwidth-banner-img img {
        height: 220px !important;
    }
}

/* ==========================================================================
   11. HOME SECTION 5: BREAKFAST RITUAL (.casa-breakfast-section)
   ========================================================================== */
.casa-breakfast-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 6.5rem 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
}

.casa-breakfast-grid {
    display: grid !important;
    grid-template-columns: 50% 50% !important;
    min-height: 680px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Left Content Column */
.casa-breakfast-text-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 4.5rem 6rem 4.5rem 7.5rem !important;
    box-sizing: border-box !important;
    background-color: transparent !important;
}

.casa-breakfast-eyebrow,
.casa-breakfast-text-wrap .casa-breakfast-eyebrow {
    font-family: var(--font-primary) !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    margin: 0 0 2.2rem 0 !important;
    line-height: 1.3 !important;
}

.casa-breakfast-title,
.casa-breakfast-text-wrap .casa-breakfast-title {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 4.5rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    line-height: 1.15 !important;
    margin: 0 0 2.6rem 0 !important;
    letter-spacing: 0.01em !important;
}

.casa-breakfast-desc,
.casa-breakfast-text-wrap .casa-breakfast-desc {
    font-family: var(--font-primary) !important;
    font-size: 1.22rem !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    color: var(--color-text) !important;
    margin: 0 !important;
    max-width: 540px !important;
    letter-spacing: 0.02em !important;
}

/* Right Image Column */
.casa-breakfast-img-wrap {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    background-color: transparent !important;
}

.casa-breakfast-img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0px !important;
    display: flex !important;
}

.casa-breakfast-img img {
    width: 100% !important;
    height: 100% !important;
    min-height: 580px !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0px !important;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.casa-breakfast-img:hover img {
    transform: scale(1.03) !important;
}

/* ==========================================================================
   12. HOME SECTION 6: 4 SERVICES GRID (.casa-services-section)
   ========================================================================== */
.casa-services-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 3.5rem 0 7rem 0 !important;
    padding: 0 4rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
}

.casa-services-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.casa-service-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 1.5rem 2.2rem !important;
    box-sizing: border-box !important;
    border-right: 1px solid rgba(66, 31, 25, 0.25) !important;
}

.casa-service-item:last-child {
    border-right: none !important;
}

.casa-service-icon-wrap {
    margin: 0 0 1.6rem 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--color-text) !important;
    height: 48px !important;
}

.casa-service-icon-wrap svg {
    width: 38px !important;
    height: 38px !important;
    stroke: var(--color-text) !important;
    fill: none !important;
    stroke-width: 1.6px !important;
}

.casa-service-title,
.casa-service-item .casa-service-title {
    font-family: var(--font-primary) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    margin: 0 0 1.2rem 0 !important;
    line-height: 1.35 !important;
}

.casa-service-desc,
.casa-service-item .casa-service-desc {
    font-family: var(--font-primary) !important;
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--color-text) !important;
    margin: 0 !important;
    max-width: 260px !important;
}

.casa-service-cta {
    font-family: var(--font-primary) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding-bottom: 3px !important;
    border-bottom: 1.8px solid var(--color-text) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    margin-top: 0.5rem !important;
}

.casa-service-cta:hover {
    opacity: 0.72 !important;
    transform: translateX(4px) !important;
}

/* Responsive Breakpoints for Section 5 & 6 */
@media screen and (max-width: 1200px) {
    .casa-breakfast-text-wrap {
        padding: 3.5rem 3.5rem 3.5rem 4.5rem !important;
    }

    .casa-breakfast-title {
        font-size: 3.6rem !important;
    }

    .casa-service-item {
        padding: 1.2rem 1.4rem !important;
    }

    .casa-service-title {
        font-size: 1.05rem !important;
    }

    .casa-service-desc {
        font-size: 0.98rem !important;
    }
}

@media screen and (max-width: 960px) {
    .casa-breakfast-grid {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    .casa-breakfast-img-wrap {
        order: 1 !important;
    }

    .casa-breakfast-text-wrap {
        order: 2 !important;
        padding: 3.5rem 2rem 4rem 2rem !important;
        align-items: center !important;
        text-align: center !important;
    }

    .casa-breakfast-eyebrow {
        text-align: center !important;
        margin-bottom: 1.5rem !important;
    }

    .casa-breakfast-title {
        font-size: 3rem !important;
        text-align: center !important;
        margin-bottom: 2rem !important;
    }

    .casa-breakfast-desc {
        text-align: center !important;
    }

    .casa-breakfast-img,
    .casa-breakfast-img img {
        min-height: 440px !important;
        height: 440px !important;
    }

    .casa-services-section {
        padding: 0 2rem !important;
        margin: 3rem 0 5rem 0 !important;
    }

    .casa-services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2.5rem 1.5rem !important;
    }

    .casa-service-item {
        border-right: none !important;
        padding: 1rem !important;
    }
}

@media screen and (max-width: 600px) {
    .casa-breakfast-img,
    .casa-breakfast-img img {
        height: 45vh !important;
        min-height: 340px !important;
    }

    .casa-breakfast-text-wrap {
        padding: 2.8rem 1.25rem 3.5rem 1.25rem !important;
    }

    .casa-breakfast-title {
        font-size: 2.3rem !important;
    }

    .casa-services-grid {
        grid-template-columns: 1fr !important;
        gap: 2.8rem !important;
    }

    .casa-service-item {
        padding: 0.5rem 0 !important;
    }
}

/* --- Support for uploaded image icons in Services --- */
.casa-service-icon-img {
    margin: 0 auto 1.6rem auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
}

.casa-service-icon-img img {
    height: 40px !important;
    max-height: 48px !important;
    width: auto !important;
    max-width: 50px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}
footer.wp-block-template-part{
    margin: 0;
}

/* ==========================================================================
   13. HOME SECTION 7: LOCATION "AU COEUR DE LA KASBAH" (.casa-location-section)
   ========================================================================== */
.casa-location-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 5.5rem 4rem 6.5rem 4rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
}

.casa-location-title,
.casa-location-section .casa-location-title {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 4.2rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    line-height: 1.18 !important;
    margin: 0 auto 3.5rem auto !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
}

/* Map wrapper */
.casa-location-map-wrap {
    max-width: 1240px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    box-shadow: 0 12px 35px rgba(66, 31, 25, 0.09) !important;
    border-radius: 0px !important;
    background-color: #f5f2ee !important;
}

/* Interactive Map Canvas */
#casa-airbnb-map {
    width: 100% !important;
    height: 480px !important;
    max-height: 520px !important;
    z-index: 10 !important;
}

/* Image Map Fallback / Upload support */
.casa-location-map-img {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.casa-location-map-img img {
    width: 100% !important;
    height: 480px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* Airbnb Marker Pin Custom Style */
.casa-airbnb-marker-wrap {
    background: transparent !important;
    border: none !important;
}

.casa-airbnb-marker {
    width: 44px !important;
    height: 44px !important;
    background-color: var(--color-text) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35) !important;
    cursor: pointer !important;
    transition: transform 0.25s ease !important;
}

.casa-airbnb-marker:hover {
    transform: scale(1.1) !important;
}

/* Leaflet Zoom control styling matching Airbnb */
.leaflet-control-zoom {
    border: none !important;
    box-shadow: 0 4px 15px rgba(66, 31, 25, 0.15) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 1.5rem !important;
}

.leaflet-control-zoom a {
    background-color: #FFFFFF !important;
    color: var(--color-text) !important;
    width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
    font-size: 1.3rem !important;
    font-family: var(--font-primary) !important;
    border-bottom: 1px solid rgba(66, 31, 25, 0.1) !important;
    transition: background-color 0.2s ease !important;
}

.leaflet-control-zoom a:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-text) !important;
}

/* Responsive Location Section */
@media screen and (max-width: 960px) {
    .casa-location-section {
        padding: 4rem 1.8rem 5rem 1.8rem !important;
    }

    .casa-location-title {
        font-size: 3rem !important;
        margin-bottom: 2.5rem !important;
    }

    #casa-airbnb-map,
    .casa-location-map-img img {
        height: 380px !important;
    }
}

@media screen and (max-width: 480px) {
    .casa-location-section {
        padding: 3.2rem 1.25rem 4rem 1.25rem !important;
    }

    .casa-location-title {
        font-size: 2.3rem !important;
        margin-bottom: 2rem !important;
    }

    #casa-airbnb-map,
    .casa-location-map-img img {
        height: 300px !important;
    }
}

/* --- Custom Illustrated Landmark Badges on Map (Airbnb Style) --- */
.casa-landmark-wrap {
    background: transparent !important;
    border: none !important;
}

.casa-landmark-card {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    cursor: default !important;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.15)) !important;
}

.casa-landmark-icon-box {
    width: 32px !important;
    height: 32px !important;
    background-color: #FFFFFF !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
    margin-bottom: 3px !important;
    border: 1px solid rgba(66, 31, 25, 0.1) !important;
}

.casa-landmark-icon-box.is-orange {
    background-color: #E26D40 !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
}

.casa-landmark-label {
    background-color: rgba(255, 255, 255, 0.94) !important;
    color: var(--color-text) !important;
    font-family: var(--font-primary) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

/* ==========================================================================
   14. AUTHENTIC AIRBNB MAP VECTOR ELEMENTS & UI
   ========================================================================== */
.casa-airbnb-monument-wrap {
    background: transparent !important;
    border: none !important;
}

.casa-airbnb-monument {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    cursor: default !important;
}

.casa-monument-svg {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)) !important;
    transition: transform 0.2s ease !important;
}

.casa-airbnb-monument:hover .casa-monument-svg {
    transform: scale(1.08) translateY(-2px) !important;
}

.casa-monument-title {
    font-family: var(--font-primary), -apple-system, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #222222 !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
    text-shadow: 0 0 4px #FFFFFF, 0 0 4px #FFFFFF, 0 0 6px #FFFFFF !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
}

/* Search Bar (Pill Shape Top Left) */
.casa-airbnb-search-bar {
    background: #FFFFFF !important;
    padding: 0.6rem 1.1rem !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    margin: 1.2rem !important;
    font-family: var(--font-primary), sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: #717171 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.casa-airbnb-search-bar:hover {
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18) !important;
    transform: translateY(-1px) !important;
}

/* Pegman Street View Button */
.casa-airbnb-pegman-btn {
    background: #FFFFFF !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0.6rem 1.2rem !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}

.casa-airbnb-pegman-btn:hover {
    background: #f7f7f7 !important;
    transform: scale(1.05) !important;
}

/* --- Enhanced Search Bar Button Link on Map --- */
.casa-airbnb-search-bar {
    background: #FFFFFF !important;
    padding: 0.65rem 1.25rem !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    margin: 1.2rem !important;
    font-family: var(--font-primary), sans-serif !important;
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    color: #222222 !important;
    text-decoration: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 1000 !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease !important;
}

.casa-airbnb-search-bar:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.24) !important;
    transform: translateY(-2px) !important;
    background-color: #FFFFFF !important;
    color: var(--color-text) !important;
}

/* ==========================================================================
   15. CASA MIMA FOOTER & INSTAGRAM STRIP (.casa-footer-wrap)
   ========================================================================== */
.casa-footer-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* --- 5-Photos Instagram Grid Strip (100% Edge-to-Edge) --- */
.casa-insta-strip-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: #FFFFFF !important;
}

.casa-insta-photos-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

.casa-insta-photo-item {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    height: 300px !important;
    background-color: #f8f6f3 !important;
    display: block !important;
}

.casa-insta-photo-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0px !important;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.casa-insta-photo-item:hover img {
    transform: scale(1.06) !important;
}

/* --- Instagram Handle Banner (Beige Background #F1E4D8) --- */
.casa-insta-handle-wrap {
    background-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
    padding: 2.2rem 2rem !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.casa-insta-handle-link {
    font-family: var(--font-primary) !important;
    font-size: 1.35rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    letter-spacing: 0.06em !important;
    text-decoration: none !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    display: inline-block !important;
}

.casa-insta-handle-link:hover {
    opacity: 0.7 !important;
    transform: translateY(-1px) !important;
}

/* --- Main Dark Footer (Terracotta Brown #421F19) --- */
.casa-main-footer {
    background-color: var(--color-text) !important;
    background: var(--color-text) !important;
    color: var(--color-primary) !important;
    padding: 4.5rem 4rem 3rem 4rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.casa-footer-container {
    max-width: 1560px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.casa-footer-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 3rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Footer Brand */
.casa-footer-brand {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.casa-footer-logo-text {
    font-family: var(--font-primary) !important;
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* Footer Navigation */
.casa-footer-nav {
    display: flex !important;
    align-items: center !important;
    gap: 3.2rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.casa-footer-nav-item {
    margin: 0 !important;
    padding: 0 !important;
}

.casa-footer-nav-link {
    font-family: var(--font-primary) !important;
    font-size: 1.08rem !important;
    font-weight: 400 !important;
    color: var(--color-primary) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: color 0.25s ease, opacity 0.25s ease !important;
    white-space: nowrap !important;
}

.casa-footer-nav-link:hover {
    color: #FFFFFF !important;
    opacity: 0.8 !important;
}

/* Footer CTA */
.casa-footer-cta-wrap {
    display: inline-flex !important;
    align-items: center !important;
}

.casa-footer-cta {
    font-family: var(--font-primary) !important;
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding-bottom: 3px !important;
    border-bottom: 1.8px solid var(--color-primary) !important;
    transition: opacity 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
    white-space: nowrap !important;
}

.casa-footer-cta:hover {
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    opacity: 0.85 !important;
}

/* Footer Bottom Credits */
.casa-footer-bottom {
    margin-top: 3.8rem !important;
    padding-top: 2rem !important;
    border-top: 1px solid rgba(241, 228, 216, 0.12) !important;
    text-align: center !important;
    width: 100% !important;
}

.casa-footer-copy {
    font-family: var(--font-primary) !important;
    font-size: 0.95rem !important;
    font-weight: 300 !important;
    color: rgba(241, 228, 216, 0.72) !important;
    letter-spacing: 0.04em !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

.casa-footer-copy a {
    color: rgba(241, 228, 216, 0.85) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.casa-footer-copy a:hover {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

/* --- Footer Responsive Breakpoints --- */
@media screen and (max-width: 1200px) {
    .casa-main-footer {
        padding: 3.8rem 2.5rem 2.5rem 2.5rem !important;
    }

    .casa-footer-nav {
        gap: 2.2rem !important;
    }

    .casa-insta-photo-item {
        height: 240px !important;
    }
}

@media screen and (max-width: 960px) {
    .casa-insta-photos-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .casa-insta-photos-grid > *:nth-child(4),
    .casa-insta-photos-grid > *:nth-child(5) {
        display: none !important;
    }

    .casa-insta-photo-item {
        height: 200px !important;
    }

    .casa-main-footer {
        padding: 3.5rem 1.8rem 2.5rem 1.8rem !important;
    }

    .casa-footer-top {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 2.2rem !important;
    }

    .casa-footer-nav {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 1.8rem !important;
    }

    .casa-footer-bottom {
        margin-top: 2.8rem !important;
    }
}

@media screen and (max-width: 480px) {
    .casa-insta-photos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .casa-insta-photos-grid > *:nth-child(3) {
        display: none !important;
    }

    .casa-insta-photo-item {
        height: 170px !important;
    }

    .casa-insta-handle-link {
        font-size: 1.15rem !important;
    }

    .casa-footer-nav {
        flex-direction: column !important;
        gap: 1.2rem !important;
    }

    .casa-footer-logo-text {
        font-size: 1.5rem !important;
    }

    .casa-footer-copy {
        font-size: 0.85rem !important;
        line-height: 1.7 !important;
    }
}

/* --- Single Banner Image for Instagram Strip --- */
.casa-insta-banner-img {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: block !important;
}

.casa-insta-banner-img img {
    width: 100% !important;
    height: 320px !important;
    max-height: 360px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0px !important;
    margin: 0 !important;
}

@media screen and (max-width: 960px) {
    .casa-insta-banner-img img {
        height: 220px !important;
    }
}

@media screen and (max-width: 480px) {
    .casa-insta-banner-img img {
        height: 160px !important;
    }
}

/* --- Direct links support in Footer Navigation --- */
.casa-footer-nav a.casa-footer-nav-link {
    font-family: var(--font-primary) !important;
    font-size: 1.08rem !important;
    font-weight: 400 !important;
    color: var(--color-primary) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: color 0.25s ease, opacity 0.25s ease !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

.casa-footer-nav a.casa-footer-nav-link:hover {
    color: #FFFFFF !important;
    opacity: 0.8 !important;
}

/* --- Footer Logo Image Support --- */
.casa-footer-logo-img {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.casa-footer-logo-img img {
    max-height: 48px !important;
    width: auto !important;
    max-width: 220px !important;
    object-fit: contain !important;
    display: block !important;
}

/* --- Strict Gutenberg Native Compatibility for Footer --- */
.casa-footer-nav {
    display: flex !important;
    align-items: center !important;
    gap: 3.2rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.casa-footer-nav p {
    margin: 0 !important;
    padding: 0 !important;
}

.casa-footer-nav a,
.casa-footer-nav .casa-footer-nav-link {
    font-family: var(--font-primary) !important;
    font-size: 1.08rem !important;
    font-weight: 400 !important;
    color: var(--color-primary) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: color 0.25s ease, opacity 0.25s ease !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

.casa-footer-nav a:hover,
.casa-footer-nav .casa-footer-nav-link:hover {
    color: #FFFFFF !important;
    opacity: 0.8 !important;
}

.casa-footer-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 3rem !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   16. FOOTER EXACT DESIGN & COLOR CORRECTIONS (MOCKUP ACCURATE)
   ========================================================================== */
.casa-main-footer {
    background-color: var(--color-text) !important;
    background: #421F19 !important;
    padding: 4.5rem 4rem 3rem 4rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.casa-footer-container {
    max-width: 1560px !important;
    margin: 0 auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

.casa-footer-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Brand / Logo - White #FFFFFF */
.casa-footer-brand {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.casa-footer-logo-text {
    font-family: var(--font-primary) !important;
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.casa-footer-logo-img img {
    max-height: 44px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* Navigation - Warm Sand / Peach Tone #E3C2B4 (Exact Mockup Color) */
.casa-footer-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3.2rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.casa-footer-nav p {
    margin: 0 !important;
    padding: 0 !important;
}

.casa-footer-nav a,
.casa-footer-nav .casa-footer-nav-link {
    font-family: var(--font-primary) !important;
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    color: #E3C2B4 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: opacity 0.25s ease, color 0.25s ease !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

.casa-footer-nav a:hover,
.casa-footer-nav .casa-footer-nav-link:hover {
    color: #FFFFFF !important;
    opacity: 0.9 !important;
}

/* CTA "RÉSERVER SUR AIRBNB" - Underlined in #E3C2B4 */
.casa-footer-cta-wrap {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.casa-footer-cta {
    font-family: var(--font-primary) !important;
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    color: #E3C2B4 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding-bottom: 3px !important;
    border-bottom: 1.5px solid #E3C2B4 !important;
    transition: opacity 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

.casa-footer-cta:hover {
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    opacity: 0.9 !important;
}

/* Mentions Légales & Copyright - Dead-Centered across the bottom */
p.casa-footer-copy,
.casa-footer-container p.casa-footer-copy {
    font-family: var(--font-primary) !important;
    font-size: 0.92rem !important;
    font-weight: 300 !important;
    color: rgba(227, 194, 180, 0.6) !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
    margin: 3.5rem auto 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    line-height: 1.6 !important;
    display: block !important;
}

.casa-footer-copy a {
    color: rgba(227, 194, 180, 0.75) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.casa-footer-copy a:hover {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

/* Section 17 unified into definitive Section 78 at the bottom of stylesheet */
@media (prefers-reduced-motion: reduce) {
    .casa-reveal-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   18. HERO TEXT SLIDE-IN FROM RIGHT (DESKTOP & LARGE SCREENS)
   ========================================================================== */
@keyframes casaHeroSlideFromRight {
    0% {
        opacity: 0;
        transform: translateX(55px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@media screen and (min-width: 961px) {
    .casa-hero-text-wrap .casa-eyebrow-text {
        opacity: 0;
        animation: casaHeroSlideFromRight 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards !important;
        will-change: transform, opacity !important;
    }

    .casa-hero-text-wrap .casa-hero-title {
        opacity: 0;
        animation: casaHeroSlideFromRight 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.32s forwards !important;
        will-change: transform, opacity !important;
    }

    .casa-hero-text-wrap .casa-hero-cta-wrap {
        opacity: 0;
        animation: casaHeroSlideFromRight 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.50s forwards !important;
        will-change: transform, opacity !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .casa-hero-text-wrap .casa-eyebrow-text,
    .casa-hero-text-wrap .casa-hero-title,
    .casa-hero-text-wrap .casa-hero-cta-wrap {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   19. COMPREHENSIVE FOOTER RESPONSIVE RULES (TABLET & MOBILE)
   ========================================================================== */
@media screen and (max-width: 960px) {
    .casa-main-footer {
        padding: 3.5rem 2rem 2.8rem 2rem !important;
        text-align: center !important;
    }

    .casa-footer-container {
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .casa-footer-top {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2.2rem !important;
        width: 100% !important;
        text-align: center !important;
    }

    .casa-footer-brand {
        margin: 0 auto !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .casa-footer-logo-text {
        text-align: center !important;
        font-size: 1.65rem !important;
    }

    .casa-footer-logo-img {
        margin: 0 auto !important;
        justify-content: center !important;
    }

    .casa-footer-logo-img img {
        margin: 0 auto !important;
        max-height: 40px !important;
    }

    .casa-footer-nav {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 1.8rem !important;
        margin: 0 auto !important;
        width: 100% !important;
        text-align: center !important;
    }

    .casa-footer-nav p {
        margin: 0 !important;
        text-align: center !important;
    }

    .casa-footer-nav a,
    .casa-footer-nav .casa-footer-nav-link {
        font-size: 1rem !important;
        text-align: center !important;
    }

    .casa-footer-cta-wrap {
        margin: 0.4rem auto 0 auto !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .casa-footer-cta {
        margin: 0 auto !important;
        font-size: 1rem !important;
    }

    p.casa-footer-copy,
    .casa-footer-container p.casa-footer-copy {
        margin: 2.5rem auto 0 auto !important;
        padding-top: 1.5rem !important;
        border-top: 1px solid rgba(227, 194, 180, 0.12) !important;
        font-size: 0.88rem !important;
        text-align: center !important;
        width: 100% !important;
        line-height: 1.6 !important;
    }

    .casa-insta-banner-img img {
        height: 200px !important;
    }

    .casa-insta-handle-wrap {
        padding: 1.8rem 1rem !important;
        text-align: center !important;
    }

    .casa-insta-handle-link {
        font-size: 1.2rem !important;
    }
}

@media screen and (max-width: 480px) {
    .casa-main-footer {
        padding: 3rem 1.25rem 2.2rem 1.25rem !important;
    }

    .casa-footer-top {
        gap: 1.8rem !important;
    }

    .casa-footer-logo-text {
        font-size: 1.45rem !important;
    }

    .casa-footer-logo-img img {
        max-height: 36px !important;
    }

    .casa-footer-nav {
        flex-direction: column !important;
        gap: 1.2rem !important;
    }

    .casa-footer-nav a,
    .casa-footer-nav .casa-footer-nav-link {
        font-size: 0.95rem !important;
    }

    .casa-footer-cta {
        font-size: 0.95rem !important;
    }

    p.casa-footer-copy,
    .casa-footer-container p.casa-footer-copy {
        font-size: 0.82rem !important;
        line-height: 1.7 !important;
        margin-top: 2rem !important;
    }

    .casa-insta-banner-img img {
        height: 150px !important;
    }

    .casa-insta-handle-wrap {
        padding: 1.5rem 1rem !important;
    }

    .casa-insta-handle-link {
        font-size: 1.1rem !important;
    }
}

/* ==========================================================================
   20. PAGE "LE RIAD - L'ÂME D'UN RIAD" & INNER PAGES HERO
   ========================================================================== */
.casa-page-hero-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    height: calc(100vh - 75px) !important;
    min-height: 560px !important;
    max-height: calc(100vh - 75px) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    background-color: #222222 !important;
}

/* Background image wrapper */
.casa-page-hero-img-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
}

.casa-page-hero-img {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.casa-page-hero-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0px !important;
    filter: brightness(0.88) !important;
}

/* Dark overlay for contrast */
.casa-page-hero-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.45) 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Centered Text Overlay */
.casa-page-hero-content {
    position: relative !important;
    z-index: 3 !important;
    text-align: center !important;
    padding: 2rem !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.casa-page-hero-eyebrow {
    font-family: var(--font-primary) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    margin: 0 0 1.8rem 0 !important;
    line-height: 1.3 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
}

.casa-page-hero-title {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 5.2rem !important;
    font-weight: 400 !important;
    color: #FFFFFF !important;
    line-height: 1.12 !important;
    margin: 0 !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

/* ==========================================================================
   21. SECTION "L'HISTOIRE - UNE DEMEURE AVANT D'ÊTRE UN RIAD"
   ========================================================================== */
.casa-story-section {
    max-width: 860px !important;
    margin: 6rem auto 7.5rem auto !important;
    padding: 0 2rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
    background-color: #FFFFFF !important;
}

.casa-story-eyebrow {
    font-family: var(--font-primary) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #7A4237 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    margin: 0 0 1.8rem 0 !important;
    line-height: 1.3 !important;
}

.casa-story-title {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 3.8rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    line-height: 1.22 !important;
    margin: 0 0 2.4rem 0 !important;
    letter-spacing: 0.01em !important;
}

.casa-story-desc {
    font-family: var(--font-primary) !important;
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
    color: var(--color-text) !important;
    margin: 0 auto !important;
    max-width: 740px !important;
    letter-spacing: 0.02em !important;
}

/* Responsive Rules for Page Le Riad */
@media screen and (max-width: 960px) {
    .casa-page-hero-section {
        height: 65vh !important;
        min-height: 440px !important;
        max-height: none !important;
    }

    .casa-page-hero-title {
        font-size: 3.8rem !important;
    }

    .casa-page-hero-eyebrow {
        font-size: 1.1rem !important;
        margin-bottom: 1.2rem !important;
    }

    .casa-story-section {
        margin: 4.5rem auto 5.5rem auto !important;
        padding: 0 1.8rem !important;
    }

    .casa-story-title {
        font-size: 2.8rem !important;
        margin-bottom: 1.8rem !important;
    }

    .casa-story-desc {
        font-size: 1.08rem !important;
    }
}

@media screen and (max-width: 480px) {
    .casa-page-hero-section {
        height: 55vh !important;
        min-height: 380px !important;
    }

    .casa-page-hero-title {
        font-size: 2.6rem !important;
    }

    .casa-page-hero-eyebrow {
        font-size: 0.95rem !important;
        letter-spacing: 0.12em !important;
    }

    .casa-story-section {
        margin: 3.5rem auto 4.5rem auto !important;
        padding: 0 1.25rem !important;
    }

    .casa-story-eyebrow {
        font-size: 1.05rem !important;
    }

    .casa-story-title {
        font-size: 2.2rem !important;
    }

    .casa-story-desc {
        font-size: 1rem !important;
        line-height: 1.65 !important;
    }
}

/* ==========================================================================
   22. SECTION "LE TEMPS S'ÉTIRE ICI" & 3-REVIEWS GRID
   ========================================================================== */
/* --- Full-Width Patio Mood Banner --- */
.casa-time-banner-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 6.5rem 0 !important;
    padding: 0 !important;
    position: relative !important;
    height: 580px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background-color: #222222 !important;
}

.casa-time-banner-img-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
}

.casa-time-banner-img {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.casa-time-banner-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0px !important;
}

/* Gradient overlay on the left for contrast */
.casa-time-banner-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.05) 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Text floating on left */
.casa-time-banner-content {
    position: absolute !important;
    left: 6.5rem !important;
    bottom: 4.5rem !important;
    max-width: 520px !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
}

.casa-time-banner-title {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 4.2rem !important;
    font-weight: 400 !important;
    color: #FFFFFF !important;
    line-height: 1.15 !important;
    margin: 0 0 1.8rem 0 !important;
    letter-spacing: 0.01em !important;
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.45) !important;
}

.casa-time-banner-desc {
    font-family: var(--font-primary) !important;
    font-size: 1.18rem !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    color: #FFFFFF !important;
    margin: 0 0 2.5rem 0 !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
}

.casa-time-banner-cta-wrap {
    margin: 0 !important;
    padding: 0 !important;
}

.casa-time-banner-cta {
    font-family: var(--font-primary) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding-bottom: 3px !important;
    border-bottom: 2px solid #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    white-space: nowrap !important;
}

.casa-time-banner-cta:hover {
    opacity: 0.8 !important;
    transform: translateX(4px) !important;
}

/* --- 3-Reviews Testimonials Grid --- */
.casa-reviews-section {
    max-width: 1480px !important;
    margin: 6rem auto 7.5rem auto !important;
    padding: 0 4rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
    background-color: #FFFFFF !important;
}

.casa-reviews-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3.8rem !important;
    align-items: start !important;
    box-sizing: border-box !important;
}

.casa-review-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.casa-review-quote {
    font-family: var(--font-primary) !important;
    font-size: 1.08rem !important;
    font-weight: 400 !important;
    line-height: 1.78 !important;
    color: var(--color-text) !important;
    margin: 0 !important;
    letter-spacing: 0.01em !important;
}

.casa-review-stars {
    color: #C97D6A !important;
    font-size: 1.25rem !important;
    margin: 2rem 0 0.6rem 0 !important;
    letter-spacing: 0.25em !important;
    line-height: 1 !important;
    user-select: none !important;
}

.casa-review-author {
    font-family: var(--font-primary) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Responsive Rules for Section 22 */
@media screen and (max-width: 1200px) {
    .casa-time-banner-content {
        left: 4rem !important;
        bottom: 3.5rem !important;
        max-width: 480px !important;
    }

    .casa-time-banner-title {
        font-size: 3.5rem !important;
    }

    .casa-reviews-section {
        padding: 0 2.5rem !important;
    }

    .casa-reviews-grid {
        gap: 2.5rem !important;
    }
}

@media screen and (max-width: 960px) {
    .casa-time-banner-section {
        height: auto !important;
        min-height: 480px !important;
        display: flex !important;
        align-items: center !important;
    }

    .casa-time-banner-content {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        padding: 4rem 2rem !important;
        max-width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }

    .casa-time-banner-title {
        font-size: 3rem !important;
        text-align: center !important;
    }

    .casa-time-banner-desc {
        text-align: center !important;
        font-size: 1.1rem !important;
    }

    .casa-time-banner-overlay {
        background: rgba(0, 0, 0, 0.55) !important;
    }

    .casa-reviews-section {
        margin: 4.5rem auto 5.5rem auto !important;
        padding: 0 1.8rem !important;
    }

    .casa-reviews-grid {
        grid-template-columns: 1fr !important;
        gap: 3.5rem !important;
        max-width: 580px !important;
        margin: 0 auto !important;
    }

    .casa-review-quote {
        font-size: 1.05rem !important;
    }
}

@media screen and (max-width: 480px) {
    .casa-time-banner-content {
        padding: 3.5rem 1.25rem !important;
    }

    .casa-time-banner-title {
        font-size: 2.4rem !important;
    }

    .casa-time-banner-desc {
        font-size: 1rem !important;
        line-height: 1.65 !important;
    }

    .casa-reviews-section {
        margin: 3.5rem auto 4.5rem auto !important;
        padding: 0 1.25rem !important;
    }
}

/* ==========================================================================
   23. HEIGHT & REVIEWS CONTAINER FIXES
   ========================================================================== */
/* Increase Patio Mood Banner Height */
.casa-time-banner-section {
    height: 720px !important;
    min-height: 680px !important;
}

.casa-time-banner-img img {
    height: 720px !important;
    min-height: 680px !important;
}

.casa-time-banner-content {
    left: 7.5rem !important;
    bottom: 5.5rem !important;
    max-width: 560px !important;
}

/* Strict Centered Container for Reviews */
.casa-reviews-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 6.5rem 0 8rem 0 !important;
    padding: 0 2rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: #FFFFFF !important;
}

.casa-reviews-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3.8rem !important;
    align-items: start !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 1260px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.casa-review-card {
    max-width: 370px !important;
    margin: 0 auto !important;
}

.casa-review-quote {
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
}

@media screen and (max-width: 1200px) {
    .casa-time-banner-section,
    .casa-time-banner-img img {
        height: 620px !important;
        min-height: 580px !important;
    }

    .casa-reviews-grid {
        max-width: 1060px !important;
        gap: 2.5rem !important;
    }
}

@media screen and (max-width: 960px) {
    .casa-time-banner-section,
    .casa-time-banner-img img {
        height: auto !important;
        min-height: 500px !important;
    }

    .casa-reviews-grid {
        grid-template-columns: 1fr !important;
        max-width: 540px !important;
        gap: 3.5rem !important;
    }
}

/* ==========================================================================
   24. REVIEWS BOTTOM ALIGNMENT (PERFECT HORIZONTAL BASELINE FOR STARS & AUTHORS)
   ========================================================================== */
.casa-reviews-grid {
    align-items: stretch !important;
}

.casa-review-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

.casa-review-quote {
    flex-grow: 1 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.casa-review-stars {
    margin-top: auto !important;
    margin-bottom: 0.6rem !important;
    padding-top: 2rem !important;
}

.casa-review-author {
    margin-top: 0 !important;
}

/* ==========================================================================
   25. SECTION "CHAQUE PIERRE RACONTE MARRAKECH" & CALL TO ACTION BANNER
   ========================================================================== */
/* --- Craft & Architecture Full-Width Banner (Text Right) --- */
.casa-craft-banner-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    height: 720px !important;
    min-height: 680px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background-color: #222222 !important;
}

.casa-craft-banner-img-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
}

.casa-craft-banner-img {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.casa-craft-banner-img img {
    width: 100% !important;
    height: 720px !important;
    min-height: 680px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0px !important;
}

/* Gradient overlay on the right for text contrast */
.casa-craft-banner-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.05) 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Text floating on right */
.casa-craft-banner-content {
    position: absolute !important;
    right: 7.5rem !important;
    bottom: 5.5rem !important;
    max-width: 540px !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

.casa-craft-banner-title {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 4.2rem !important;
    font-weight: 400 !important;
    color: #FFFFFF !important;
    line-height: 1.15 !important;
    margin: 0 0 1.8rem 0 !important;
    letter-spacing: 0.01em !important;
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.45) !important;
}

.casa-craft-banner-desc {
    font-family: var(--font-primary) !important;
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    color: #FFFFFF !important;
    margin: 0 0 2.5rem 0 !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
}

.casa-craft-banner-cta-wrap {
    margin: 0 !important;
    padding: 0 !important;
}

.casa-craft-banner-cta {
    font-family: var(--font-primary) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding-bottom: 3px !important;
    border-bottom: 2px solid #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    white-space: nowrap !important;
}

.casa-craft-banner-cta:hover {
    opacity: 0.8 !important;
    transform: translateX(4px) !important;
}

/* --- Call To Action Section: "Venez vous perdre à Marrakech" --- */
.casa-cta-banner-section {
    width: 100% !important;
    max-width: 100% !important;
    background-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
    padding: 7.5rem 2rem 8rem 2rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.casa-cta-banner-title {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 4.6rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    line-height: 1.18 !important;
    margin: 0 0 3.5rem 0 !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
}

.casa-cta-buttons-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
}

.casa-cta-btn-primary {
    font-family: var(--font-primary) !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding-bottom: 4px !important;
    border-bottom: 2px solid var(--color-text) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    white-space: nowrap !important;
}

.casa-cta-btn-primary:hover {
    opacity: 0.75 !important;
    transform: translateX(3px) !important;
}

.casa-cta-btn-secondary {
    font-family: var(--font-primary) !important;
    font-size: 1.12rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    white-space: nowrap !important;
}

.casa-cta-btn-secondary:hover {
    opacity: 0.75 !important;
    transform: translateX(3px) !important;
}

/* Responsive Rules for Section 25 */
@media screen and (max-width: 1200px) {
    .casa-craft-banner-content {
        right: 4rem !important;
        bottom: 4rem !important;
        max-width: 480px !important;
    }

    .casa-craft-banner-title {
        font-size: 3.5rem !important;
    }

    .casa-cta-banner-title {
        font-size: 3.8rem !important;
    }

    .casa-cta-buttons-wrap {
        gap: 3rem !important;
    }
}

@media screen and (max-width: 960px) {
    .casa-craft-banner-section {
        height: auto !important;
        min-height: 500px !important;
        display: flex !important;
        align-items: center !important;
    }

    .casa-craft-banner-img img {
        height: auto !important;
        min-height: 500px !important;
    }

    .casa-craft-banner-content {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        padding: 4rem 2rem !important;
        max-width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }

    .casa-craft-banner-title {
        font-size: 3rem !important;
        text-align: center !important;
    }

    .casa-craft-banner-desc {
        text-align: center !important;
        font-size: 1.1rem !important;
    }

    .casa-craft-banner-overlay {
        background: rgba(0, 0, 0, 0.55) !important;
    }

    .casa-cta-banner-section {
        padding: 5rem 1.8rem 5.5rem 1.8rem !important;
    }

    .casa-cta-banner-title {
        font-size: 3rem !important;
        margin-bottom: 2.8rem !important;
    }

    .casa-cta-buttons-wrap {
        flex-direction: column !important;
        gap: 2rem !important;
    }
}

@media screen and (max-width: 480px) {
    .casa-craft-banner-content {
        padding: 3.5rem 1.25rem !important;
    }

    .casa-craft-banner-title {
        font-size: 2.4rem !important;
    }

    .casa-craft-banner-desc {
        font-size: 1rem !important;
        line-height: 1.65 !important;
    }

    .casa-cta-banner-title {
        font-size: 2.4rem !important;
    }

    .casa-cta-btn-primary,
    .casa-cta-btn-secondary {
        font-size: 1rem !important;
    }
}

/* ==========================================================================
   26. INSTAGRAM LIVE 6-POSTS GRID (.casa-insta-feed-grid)
   ========================================================================== */
.casa-insta-feed-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    background-color: #f8f6f3 !important;
    overflow: hidden !important;
}

.casa-insta-feed-item {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    height: 260px !important;
    text-decoration: none !important;
    background-color: #e8ded4 !important;
}

.casa-insta-feed-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0px !important;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Instagram Hover Overlay with Camera Icon */
.casa-insta-feed-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(66, 31, 25, 0.45) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.35s ease !important;
    z-index: 2 !important;
}

.casa-insta-feed-overlay svg {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3)) !important;
    transform: scale(0.85) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.casa-insta-feed-item:hover .casa-insta-feed-overlay {
    opacity: 1 !important;
}

.casa-insta-feed-item:hover .casa-insta-feed-overlay svg {
    transform: scale(1) !important;
}

.casa-insta-feed-item:hover img {
    transform: scale(1.08) !important;
}

/* Responsive Grid for 6 Instagram Posts */
@media screen and (max-width: 1100px) {
    .casa-insta-feed-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .casa-insta-feed-item {
        height: 220px !important;
    }
}

@media screen and (max-width: 600px) {
    .casa-insta-feed-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .casa-insta-feed-item {
        height: 160px !important;
    }
}

/* ==========================================================================
   27. SMASH BALLOON AUTOMATED INSTAGRAM FEED INTEGRATION
   ========================================================================== */
#sb_instagram,
.sbi_feed {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
}

#sb_instagram #sbi_images {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    width: 100% !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#sb_instagram .sbi_item {
    padding: 0 !important;
    margin: 0 !important;
    height: 260px !important;
    overflow: hidden !important;
    position: relative !important;
}

#sb_instagram .sbi_photo_wrap {
    height: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
}

#sb_instagram .sbi_photo {
    height: 100% !important;
    width: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#sb_instagram .sbi_item:hover .sbi_photo {
    transform: scale(1.08) !important;
}

#sb_instagram .sbi_item:hover .sbi_link {
    opacity: 1 !important;
    background: rgba(66, 31, 25, 0.45) !important;
}

/* Hide default Smash Balloon elements */
#sb_instagram .sbi_header,
#sb_instagram #sbi_load,
#sb_instagram .sbi_follow_btn {
    display: none !important;
}

/* Responsive for Automated Instagram Feed */
@media screen and (max-width: 1100px) {
    #sb_instagram #sbi_images {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    #sb_instagram .sbi_item {
        height: 200px !important;
    }
}

@media screen and (max-width: 600px) {
    #sb_instagram #sbi_images {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    #sb_instagram .sbi_item {
        height: 150px !important;
    }
}

/* ==========================================================================
   28. 5-PHOTOS SEAMLESS INSTAGRAM BANNER STRIP (.casa-insta-photos-grid)
   ========================================================================== */
.casa-insta-photos-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    background-color: #f8f6f3 !important;
}

.casa-insta-photo-item {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    height: 300px !important;
    display: block !important;
}

.casa-insta-photo-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0px !important;
    margin: 0 !important;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.casa-insta-photo-item:hover img {
    transform: scale(1.06) !important;
}

@media screen and (max-width: 1100px) {
    .casa-insta-photos-grid {
        grid-template-columns: repeat(5, 1fr) !important;
    }
    .casa-insta-photo-item {
        height: 220px !important;
    }
}

@media screen and (max-width: 768px) {
    .casa-insta-photos-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .casa-insta-photos-grid > *:nth-child(4),
    .casa-insta-photos-grid > *:nth-child(5) {
        display: none !important;
    }
    .casa-insta-photo-item {
        height: 180px !important;
    }
}

@media screen and (max-width: 480px) {
    .casa-insta-photos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .casa-insta-photos-grid > *:nth-child(3) {
        display: none !important;
    }
    .casa-insta-photo-item {
        height: 150px !important;
    }
}

/* ==========================================================================
   29. SMASH BALLOON 5-COLUMNS STREAMLINED STYLES
   ========================================================================== */
#sb_instagram #sbi_images {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    width: 100% !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#sb_instagram .sbi_item {
    padding: 0 !important;
    margin: 0 !important;
    height: 280px !important;
    overflow: hidden !important;
    position: relative !important;
}

#sb_instagram .sbi_photo {
    height: 100% !important;
    width: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#sb_instagram .sbi_item:hover .sbi_photo {
    transform: scale(1.06) !important;
}

@media screen and (max-width: 1100px) {
    #sb_instagram #sbi_images {
        grid-template-columns: repeat(5, 1fr) !important;
    }
    #sb_instagram .sbi_item {
        height: 220px !important;
    }
}

@media screen and (max-width: 768px) {
    #sb_instagram #sbi_images {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    #sb_instagram .sbi_item:nth-child(4),
    #sb_instagram .sbi_item:nth-child(5) {
        display: none !important;
    }
    #sb_instagram .sbi_item {
        height: 180px !important;
    }
}

@media screen and (max-width: 480px) {
    #sb_instagram #sbi_images {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    #sb_instagram .sbi_item:nth-child(3) {
        display: none !important;
    }
    #sb_instagram .sbi_item {
        height: 150px !important;
    }
}

/* ==========================================================================
   30. SECTION "LE FIL D'UNE JOURNÉE - UNE JOURNÉE À CASA MIMA"
   ========================================================================== */
.casa-day-section {
    max-width: 1040px !important;
    margin: 6.5rem auto 8rem auto !important;
    padding: 0 2rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background-color: #FFFFFF !important;
}

.casa-day-eyebrow {
    font-family: var(--font-primary) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #7A4237 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    margin: 0 0 1.6rem 0 !important;
    line-height: 1.3 !important;
}

.casa-day-title {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 3.8rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    line-height: 1.2 !important;
    margin: 0 0 5.5rem 0 !important;
    letter-spacing: 0.01em !important;
}

/* Timeline Outer Wrap */
.casa-timeline-wrap {
    position: relative !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* Center vertical line */
.casa-timeline-line {
    position: absolute !important;
    left: 35% !important;
    top: 15px !important;
    bottom: 25px !important;
    width: 1.5px !important;
    background-color: #C97D6A !important;
    transform: translateX(-50%) !important;
    z-index: 1 !important;
}

/* Timeline Rows */
.casa-timeline-row {
    display: grid !important;
    grid-template-columns: 35% 65% !important;
    align-items: start !important;
    margin-bottom: 4.8rem !important;
    position: relative !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.casa-timeline-row:last-child {
    margin-bottom: 0 !important;
}

/* Left Time Column (Le matin, L'après-midi, À toute heure) */
.casa-timeline-time {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 2.7rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    text-align: right !important;
    padding-right: 3.2rem !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    box-sizing: border-box !important;
}

/* Bullet Dot */
.casa-timeline-dot {
    position: absolute !important;
    left: 35% !important;
    top: 14px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: #7A4237 !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2 !important;
    box-shadow: 0 0 0 4px #FFFFFF !important;
}

/* Right Content Column */
.casa-timeline-content {
    padding-left: 3.2rem !important;
    box-sizing: border-box !important;
}

.casa-timeline-heading {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 2.35rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    line-height: 1.25 !important;
    margin: 0 0 1.2rem 0 !important;
    letter-spacing: 0.01em !important;
}

.casa-timeline-desc {
    font-family: var(--font-primary) !important;
    font-size: 1.12rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    line-height: 1.75 !important;
    margin: 0 !important;
    max-width: 450px !important;
    letter-spacing: 0.01em !important;
}

/* Timeline Responsive for Tablet & Mobile */
@media screen and (max-width: 860px) {
    .casa-day-section {
        margin: 4.5rem auto 5.5rem auto !important;
    }

    .casa-day-title {
        font-size: 2.8rem !important;
        margin-bottom: 4rem !important;
    }

    .casa-timeline-line {
        left: 14px !important;
    }

    .casa-timeline-dot {
        left: 14px !important;
        top: 12px !important;
    }

    .casa-timeline-row {
        display: flex !important;
        flex-direction: column !important;
        padding-left: 45px !important;
        margin-bottom: 3.5rem !important;
    }

    .casa-timeline-time {
        text-align: left !important;
        padding-right: 0 !important;
        font-size: 2.2rem !important;
        margin-bottom: 0.6rem !important;
    }

    .casa-timeline-content {
        padding-left: 0 !important;
    }

    .casa-timeline-heading {
        font-size: 1.95rem !important;
    }

    .casa-timeline-desc {
        font-size: 1.05rem !important;
    }
}

@media screen and (max-width: 480px) {
    .casa-day-title {
        font-size: 2.3rem !important;
    }

    .casa-timeline-time {
        font-size: 1.85rem !important;
    }

    .casa-timeline-heading {
        font-size: 1.65rem !important;
    }

    .casa-timeline-desc {
        font-size: 0.98rem !important;
        line-height: 1.65 !important;
    }
}

/* ==========================================================================
   31. PURE CSS PSEUDO-ELEMENTS FOR TIMELINE LINE & DOTS (ZERO CORRUPTION)
   ========================================================================== */
/* Vertical Line via ::before on .casa-timeline-wrap */
.casa-timeline-wrap {
    position: relative !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.casa-timeline-wrap::before {
    content: "" !important;
    position: absolute !important;
    left: 35% !important;
    top: 18px !important;
    bottom: 25px !important;
    width: 1.5px !important;
    background-color: #C97D6A !important;
    transform: translateX(-50%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Bullet Dot via ::after on .casa-timeline-row */
.casa-timeline-row {
    display: grid !important;
    grid-template-columns: 35% 65% !important;
    align-items: start !important;
    margin-bottom: 4.8rem !important;
    position: relative !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.casa-timeline-row:last-child {
    margin-bottom: 0 !important;
}

.casa-timeline-row::after {
    content: "" !important;
    position: absolute !important;
    left: 35% !important;
    top: 16px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: #7A4237 !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2 !important;
    box-shadow: 0 0 0 4px #FFFFFF !important;
    pointer-events: none !important;
}

/* Responsive adjustment for pseudo-elements on tablet & mobile */
@media screen and (max-width: 860px) {
    .casa-timeline-wrap::before {
        left: 14px !important;
    }

    .casa-timeline-row::after {
        left: 14px !important;
        top: 14px !important;
    }
}

/* ==========================================================================
   32. LUXURY TIMELINE REDESIGN & BIDIRECTIONAL SCROLL ANIMATION (MOCKUP ACCURATE)
   ========================================================================== */
.casa-day-section {
    max-width: 1080px !important;
    margin: 7rem auto 9rem auto !important;
    padding: 0 2rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background-color: #FFFFFF !important;
}

.casa-day-eyebrow {
    font-family: var(--font-primary) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #7A4237 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    margin: 0 0 1.6rem 0 !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

.casa-day-title {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 4.2rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    line-height: 1.18 !important;
    margin: 0 0 6.5rem 0 !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
}

/* Timeline Wrap */
.casa-timeline-wrap {
    position: relative !important;
    max-width: 920px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* Vertical Line in Terracotta with smooth growth */
.casa-timeline-wrap::before {
    content: "" !important;
    position: absolute !important;
    left: 34% !important;
    top: -15px !important;
    bottom: -35px !important;
    width: 1.5px !important;
    background-color: #C97D6A !important;
    transform: translateX(-50%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Timeline Rows with Stagger & Animation */
.casa-timeline-row {
    display: grid !important;
    grid-template-columns: 34% 66% !important;
    align-items: start !important;
    margin-bottom: 5.5rem !important;
    position: relative !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.casa-timeline-row:last-child {
    margin-bottom: 0 !important;
}

/* Bullet Dot on Axis */
.casa-timeline-row::after {
    content: "" !important;
    position: absolute !important;
    left: 34% !important;
    top: 18px !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background-color: #7A4237 !important;
    transform: translate(-50%, -50%) scale(0) !important;
    z-index: 2 !important;
    box-shadow: 0 0 0 5px #FFFFFF !important;
    pointer-events: none !important;
    transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s !important;
}

/* Left Time (Le matin, L'après-midi, À toute heure) */
.casa-timeline-time {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 3.2rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    text-align: right !important;
    padding-right: 3.8rem !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1), transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, opacity !important;
}

/* Right Content */
.casa-timeline-content {
    padding-left: 3.8rem !important;
    box-sizing: border-box !important;
    text-align: left !important;
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1), transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, opacity !important;
}

.casa-timeline-heading {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 2.7rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    line-height: 1.2 !important;
    margin: 0 0 1.3rem 0 !important;
    letter-spacing: 0.01em !important;
}

.casa-timeline-desc {
    font-family: var(--font-primary) !important;
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    line-height: 1.8 !important;
    margin: 0 !important;
    max-width: 460px !important;
    letter-spacing: 0.01em !important;
}

/* --- Active State on Scroll (Revealed) --- */
.casa-timeline-row.is-revealed .casa-timeline-time {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.casa-timeline-row.is-revealed .casa-timeline-content {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.casa-timeline-row.is-revealed::after {
    transform: translate(-50%, -50%) scale(1) !important;
}

/* Responsive Rules for Timeline */
@media screen and (max-width: 860px) {
    .casa-day-section {
        margin: 4.5rem auto 6rem auto !important;
    }

    .casa-day-title {
        font-size: 3rem !important;
        margin-bottom: 4rem !important;
    }

    .casa-timeline-wrap::before {
        left: 14px !important;
        top: -10px !important;
        bottom: -20px !important;
    }

    .casa-timeline-row {
        display: flex !important;
        flex-direction: column !important;
        padding-left: 45px !important;
        margin-bottom: 3.8rem !important;
    }

    .casa-timeline-row::after {
        left: 14px !important;
        top: 14px !important;
    }

    .casa-timeline-time {
        text-align: left !important;
        padding-right: 0 !important;
        font-size: 2.4rem !important;
        margin-bottom: 0.6rem !important;
        transform: translateY(-15px) !important;
    }

    .casa-timeline-content {
        padding-left: 0 !important;
        transform: translateY(15px) !important;
    }

    .casa-timeline-row.is-revealed .casa-timeline-time,
    .casa-timeline-row.is-revealed .casa-timeline-content {
        transform: translateY(0) !important;
    }

    .casa-timeline-heading {
        font-size: 2.1rem !important;
    }

    .casa-timeline-desc {
        font-size: 1.05rem !important;
    }
}

@media screen and (max-width: 480px) {
    .casa-day-title {
        font-size: 2.3rem !important;
    }

    .casa-timeline-time {
        font-size: 2rem !important;
    }

    .casa-timeline-heading {
        font-size: 1.75rem !important;
    }

    .casa-timeline-desc {
        font-size: 0.98rem !important;
        line-height: 1.65 !important;
    }
}

/* ==========================================================================
   33. EXACT TIMELINE LINE & DOTS REPLICATION (100% MOCKUP MATCH)
   ========================================================================== */
.casa-timeline-wrap::before {
    content: "" !important;
    position: absolute !important;
    left: 32% !important;
    top: -30px !important;
    bottom: -55px !important;
    width: 2px !important;
    background-color: #7A4237 !important;
    transform: translateX(-50%) !important;
    z-index: 1 !important;
}

.casa-timeline-row {
    display: grid !important;
    grid-template-columns: 32% 68% !important;
    align-items: start !important;
    margin-bottom: 5.5rem !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Exact Dot matching Mockup (Solid Terracotta, No white border, 13px) */
.casa-timeline-row::after {
    content: "" !important;
    position: absolute !important;
    left: 32% !important;
    top: 24px !important;
    width: 13px !important;
    height: 13px !important;
    border-radius: 50% !important;
    background-color: #7A4237 !important;
    transform: translate(-50%, -50%) scale(0) !important;
    z-index: 2 !important;
    box-shadow: none !important;
    pointer-events: none !important;
    transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s !important;
}

/* Time (Close to the line, warm dark terracotta #7A4237) */
.casa-timeline-time {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 3.2rem !important;
    font-weight: 400 !important;
    color: #7A4237 !important;
    text-align: right !important;
    padding-right: 1.8rem !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    box-sizing: border-box !important;
}

/* Right Content */
.casa-timeline-content {
    padding-left: 2.8rem !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

.casa-timeline-heading {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 2.7rem !important;
    font-weight: 400 !important;
    color: #7A4237 !important;
    line-height: 1.2 !important;
    margin: 0 0 1.2rem 0 !important;
}

.casa-timeline-desc {
    font-family: var(--font-primary) !important;
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    line-height: 1.8 !important;
    margin: 0 !important;
    max-width: 460px !important;
}

/* Responsive adjustment */
@media screen and (max-width: 860px) {
    .casa-timeline-wrap::before {
        left: 16px !important;
    }

    .casa-timeline-row::after {
        left: 16px !important;
        top: 20px !important;
    }

    .casa-timeline-row {
        padding-left: 45px !important;
    }

    .casa-timeline-time {
        padding-right: 0 !important;
        margin-bottom: 0.5rem !important;
    }
}

/* ==========================================================================
   34. EXACT COLOR HEX CODES SPECIFICATION (#7C3B30 & #421F19)
   ========================================================================== */
.casa-day-eyebrow {
    color: #7C3B30 !important;
}

.casa-day-title {
    color: #421F19 !important;
}

.casa-timeline-wrap::before {
    background-color: #7C3B30 !important;
}

.casa-timeline-row::after {
    background-color: #7C3B30 !important;
}

.casa-timeline-time {
    color: #7C3B30 !important;
}

.casa-timeline-heading {
    color: #421F19 !important;
}

.casa-timeline-desc {
    color: #421F19 !important;
}

/* ==========================================================================
   35. SECTION "MARRAKECH ET AU-DELÀ" & PATIO BREAK BANNER
   ========================================================================== */
/* --- Clean Aerial Patio Panoramic Banner --- */
.casa-patio-break-banner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    height: 560px !important;
    display: block !important;
    background-color: #222222 !important;
}

.casa-patio-break-banner img {
    width: 100% !important;
    height: 560px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0px !important;
    margin: 0 !important;
}

/* --- Section "Marrakech et au-delà" on Warm Beige #F1E4D8 --- */
.casa-beyond-section {
    width: 100% !important;
    max-width: 100% !important;
    background-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
    padding: 6.5rem 2rem 7.5rem 2rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
    margin: 0 !important;
}

.casa-beyond-title {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 4.2rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    line-height: 1.18 !important;
    margin: 0 0 5.5rem 0 !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
}

.casa-beyond-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3.8rem !important;
    max-width: 1260px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    align-items: start !important;
}

.casa-beyond-card {
    border-left: 1.8px solid #7C3B30 !important;
    padding-left: 1.6rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.casa-beyond-num {
    font-family: var(--font-primary) !important;
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    color: #7C3B30 !important;
    letter-spacing: 0.05em !important;
    margin: 0 0 0.35rem 0 !important;
    line-height: 1.2 !important;
}

.casa-beyond-heading {
    font-family: var(--font-primary) !important;
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    color: #7C3B30 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin: 0 0 1.2rem 0 !important;
    line-height: 1.2 !important;
}

.casa-beyond-desc {
    font-family: var(--font-primary) !important;
    font-size: 1.08rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    line-height: 1.78 !important;
    margin: 0 !important;
    letter-spacing: 0.01em !important;
}

/* Responsive Rules for Section 35 */
@media screen and (max-width: 1100px) {
    .casa-patio-break-banner,
    .casa-patio-break-banner img {
        height: 440px !important;
    }

    .casa-beyond-title {
        font-size: 3.5rem !important;
        margin-bottom: 4rem !important;
    }

    .casa-beyond-grid {
        gap: 2.2rem !important;
    }
}

@media screen and (max-width: 860px) {
    .casa-patio-break-banner,
    .casa-patio-break-banner img {
        height: 360px !important;
    }

    .casa-beyond-section {
        padding: 4.5rem 1.8rem 5.5rem 1.8rem !important;
    }

    .casa-beyond-title {
        font-size: 2.8rem !important;
        margin-bottom: 3.5rem !important;
    }

    .casa-beyond-grid {
        grid-template-columns: 1fr !important;
        max-width: 520px !important;
        gap: 3rem !important;
    }
}

@media screen and (max-width: 480px) {
    .casa-patio-break-banner,
    .casa-patio-break-banner img {
        height: 280px !important;
    }

    .casa-beyond-title {
        font-size: 2.3rem !important;
    }

    .casa-beyond-card {
        padding-left: 1.2rem !important;
    }
}

/* ==========================================================================
   36. SECTION SPACING & FULL-WIDTH FIX (PREVENTS OVERLAP & ENSURES 100% WIDTH)
   ========================================================================== */
/* Fix Timeline Section Containment */
.casa-day-section {
    max-width: 1080px !important;
    margin: 7rem auto 7rem auto !important;
    padding: 0 2rem 2.5rem 2rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background-color: #FFFFFF !important;
    overflow: visible !important;
    clear: both !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure Timeline line stays strictly inside the section */
.casa-timeline-wrap::before {
    top: 15px !important;
    bottom: 15px !important;
}

/* 100% Full-Width Edge-to-Edge Panoramic Patio Break Banner */
.casa-patio-break-banner,
.wp-block-group.alignfull.casa-patio-break-banner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: both !important;
    display: block !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 2 !important;
    background-color: #222222 !important;
    box-sizing: border-box !important;
}

.casa-patio-break-banner figure,
.casa-patio-break-banner .wp-block-image {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.casa-patio-break-banner img {
    width: 100% !important;
    max-width: 100% !important;
    height: 560px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 0px !important;
}

/* 100% Full-Width Edge-to-Edge Section "Marrakech et au-delà" */
.casa-beyond-section,
.wp-block-group.alignfull.casa-beyond-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 7rem 2rem 8rem 2rem !important;
    box-sizing: border-box !important;
    background-color: var(--color-primary) !important;
    background: #F1E4D8 !important;
    position: relative !important;
    z-index: 2 !important;
    clear: both !important;
}

/* Ensure separation between Day Section and Patio Banner */
.casa-day-section {
    margin-bottom: 8rem !important;
    padding-bottom: 0 !important;
}

.casa-patio-break-banner {
    margin-top: 0 !important;
}

/* ==========================================================================
   37. SEPARATION & EDGE-TO-EDGE FULL-WIDTH LOCK FOR SERVICES PAGE
   ========================================================================== */
.casa-day-section {
    max-width: 1040px !important;
    margin: 7rem auto 9rem auto !important;
    padding: 0 2rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background-color: #FFFFFF !important;
    clear: both !important;
}

.casa-patio-break-banner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    height: 560px !important;
    display: block !important;
    clear: both !important;
}

.casa-patio-break-banner img {
    width: 100% !important;
    height: 560px !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
}

.casa-beyond-section {
    width: 100% !important;
    max-width: 100% !important;
    background-color: var(--color-primary) !important;
    background: #F1E4D8 !important;
    padding: 7.5rem 2rem 8.5rem 2rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
    margin: 0 !important;
    clear: both !important;
}

/* ==========================================================================
   38. TIMELINE TOP EXTENSION & LUXURY MOBILE REDESIGN
   ========================================================================== */
/* Desktop: Taller line extension above "Le matin" */
.casa-timeline-wrap::before {
    top: -65px !important;
    bottom: -45px !important;
}

/* --- High-End Mobile & Tablet Timeline Experience --- */
@media screen and (max-width: 860px) {
    .casa-day-section {
        margin: 5rem auto 6.5rem auto !important;
        padding: 0 1.5rem !important;
        text-align: left !important;
    }

    .casa-day-eyebrow {
        text-align: center !important;
        font-size: 1.15rem !important;
        margin-bottom: 1.2rem !important;
    }

    .casa-day-title {
        text-align: center !important;
        font-size: 2.8rem !important;
        margin-bottom: 4.5rem !important;
    }

    .casa-timeline-wrap {
        max-width: 540px !important;
        margin: 0 auto !important;
        padding-left: 5px !important;
    }

    .casa-timeline-wrap::before {
        left: 20px !important;
        top: -35px !important;
        bottom: 10px !important;
        width: 2px !important;
    }

    .casa-timeline-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding-left: 52px !important;
        margin-bottom: 4rem !important;
        position: relative !important;
        text-align: left !important;
    }

    .casa-timeline-row:last-child {
        margin-bottom: 0 !important;
    }

    .casa-timeline-row::after {
        left: 20px !important;
        top: 14px !important;
        width: 12px !important;
        height: 12px !important;
        box-shadow: 0 0 0 4px #FFFFFF !important;
    }

    .casa-timeline-time {
        font-size: 2.4rem !important;
        color: #7C3B30 !important;
        text-align: left !important;
        padding: 0 !important;
        margin: 0 0 0.4rem 0 !important;
        line-height: 1.15 !important;
    }

    .casa-timeline-content {
        padding: 0 !important;
        text-align: left !important;
        width: 100% !important;
    }

    .casa-timeline-heading {
        font-size: 1.85rem !important;
        color: #421F19 !important;
        line-height: 1.25 !important;
        margin: 0 0 0.8rem 0 !important;
    }

    .casa-timeline-desc {
        font-size: 1.05rem !important;
        color: #421F19 !important;
        line-height: 1.72 !important;
        max-width: 100% !important;
    }
}

@media screen and (max-width: 480px) {
    .casa-day-section {
        margin: 4rem auto 5rem auto !important;
        padding: 0 1.2rem !important;
    }

    .casa-day-title {
        font-size: 2.3rem !important;
        margin-bottom: 3.5rem !important;
    }

    .casa-timeline-wrap::before {
        left: 14px !important;
        top: -25px !important;
    }

    .casa-timeline-row {
        padding-left: 42px !important;
        margin-bottom: 3.2rem !important;
    }

    .casa-timeline-row::after {
        left: 14px !important;
        top: 12px !important;
        width: 10px !important;
        height: 10px !important;
    }

    .casa-timeline-time {
        font-size: 2rem !important;
    }

    .casa-timeline-heading {
        font-size: 1.6rem !important;
    }

    .casa-timeline-desc {
        font-size: 0.98rem !important;
        line-height: 1.65 !important;
    }
}

/* ==========================================================================
   39. ADJUSTMENTS: PATIO BREAK BANNER HEIGHT & BEYOND TEXT SIZES
   ========================================================================== */
/* Slightly taller Patio Break Banner */
.casa-patio-break-banner,
.wp-block-group.alignfull.casa-patio-break-banner {
    height: 660px !important;
}

.casa-patio-break-banner img {
    height: 660px !important;
}

/* Slightly enlarged card texts in "Marrakech et au-delà" */
.casa-beyond-num {
    font-size: 1.18rem !important;
    margin-bottom: 0.4rem !important;
}

.casa-beyond-heading {
    font-size: 1.25rem !important;
    letter-spacing: 0.09em !important;
    margin-bottom: 1.4rem !important;
}

.casa-beyond-desc {
    font-size: 1.18rem !important;
    line-height: 1.82 !important;
}

@media screen and (max-width: 1100px) {
    .casa-patio-break-banner,
    .casa-patio-break-banner img {
        height: 520px !important;
    }
}

@media screen and (max-width: 860px) {
    .casa-patio-break-banner,
    .casa-patio-break-banner img {
        height: 420px !important;
    }

    .casa-beyond-num {
        font-size: 1.12rem !important;
    }

    .casa-beyond-heading {
        font-size: 1.18rem !important;
    }

    .casa-beyond-desc {
        font-size: 1.12rem !important;
    }
}

@media screen and (max-width: 480px) {
    .casa-patio-break-banner,
    .casa-patio-break-banner img {
        height: 320px !important;
    }

    .casa-beyond-desc {
        font-size: 1.05rem !important;
        line-height: 1.7 !important;
    }
}

/* ==========================================================================
   40. BEYOND CARDS: EQUAL LINE HEIGHTS & PERFECT HORIZONTAL ALIGNMENT
   ========================================================================== */
.casa-beyond-grid {
    align-items: stretch !important;
}

.casa-beyond-card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    border-left: 1.8px solid #7C3B30 !important;
    padding-left: 1.6rem !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    box-sizing: border-box !important;
}

.casa-beyond-num {
    font-size: 1.1rem !important;
    margin-bottom: 0.35rem !important;
    line-height: 1 !important;
}

.casa-beyond-heading {
    font-size: 1.15rem !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 1.1rem !important;
    line-height: 1.2 !important;
}

.casa-beyond-desc {
    font-size: 1.08rem !important;
    line-height: 1.74 !important;
    flex-grow: 1 !important;
}

/* ==========================================================================
   41. STRICT ABSOLUTE ALIGNMENT FOR "MARRAKECH ET AU-DELÀ" CARDS & LINES
   ========================================================================== */
.casa-beyond-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3.8rem !important;
    max-width: 1260px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}

.casa-beyond-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 0 0 0 1.8rem !important;
    margin: 0 !important;
    border-left: none !important;
    box-sizing: border-box !important;
}

/* Identical Vertical Line for all 3 cards via ::before */
.casa-beyond-card::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0px !important;
    bottom: 0px !important;
    width: 1.8px !important;
    background-color: #7C3B30 !important;
    pointer-events: none !important;
}

/* Reset any unwanted Gutenberg default margins */
.casa-beyond-card p,
.casa-beyond-card h3 {
    margin: 0 !important;
    padding: 0 !important;
}

p.casa-beyond-num,
.casa-beyond-card p.casa-beyond-num {
    font-family: var(--font-primary) !important;
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    color: #7C3B30 !important;
    letter-spacing: 0.05em !important;
    margin: 0 0 0.35rem 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

h3.casa-beyond-heading,
.casa-beyond-card h3.casa-beyond-heading {
    font-family: var(--font-primary) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #7C3B30 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin: 0 0 1.2rem 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

p.casa-beyond-desc,
.casa-beyond-card p.casa-beyond-desc {
    font-family: var(--font-primary) !important;
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    line-height: 1.75 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   42. THIN ELEGANT VERTICAL ACCENT LINES (1PX FINE DEFINITION)
   ========================================================================== */
.casa-beyond-card::before {
    width: 1px !important;
}

/* ==========================================================================
   43. PERFECT HORIZONTAL ALIGNMENT FOR TIMELINE TITLES & TIMES
   ========================================================================== */
.casa-timeline-row p,
.casa-timeline-row h3 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.casa-timeline-time,
.casa-timeline-row p.casa-timeline-time {
    margin: 0 !important;
    padding-top: 0 !important;
    line-height: 1.15 !important;
    font-size: 3.1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: auto !important;
}

.casa-timeline-heading,
.casa-timeline-content h3.casa-timeline-heading {
    margin: 0 0 1.2rem 0 !important;
    padding-top: 0 !important;
    line-height: 1.15 !important;
    font-size: 2.7rem !important;
    display: flex !important;
    align-items: center !important;
    height: auto !important;
}

/* Align dot on the exact optical text center */
.casa-timeline-row::after {
    top: 18px !important;
}

/* ==========================================================================
   44. PIXEL-PERFECT BASELINE LOCK FOR TIMELINE TIMES & HEADINGS
   ========================================================================== */
.casa-timeline-content {
    margin: 0 !important;
    padding: 0 0 0 2.8rem !important;
}

.casa-timeline-time,
.casa-timeline-row p.casa-timeline-time,
p.casa-timeline-time {
    margin: 0 !important;
    padding: 0 1.8rem 0 0 !important;
    line-height: 1.05 !important;
    font-size: 2.9rem !important;
    display: block !important;
    text-align: right !important;
}

.casa-timeline-heading,
.casa-timeline-content h3.casa-timeline-heading,
h3.casa-timeline-heading,
.wp-block-heading.casa-timeline-heading {
    margin: 0 0 1.2rem 0 !important;
    padding: 0 !important;
    line-height: 1.05 !important;
    font-size: 2.9rem !important;
    display: block !important;
    text-align: left !important;
}

.casa-timeline-row::after {
    top: 16px !important;
}

/* ==========================================================================
   45. SECTION "RÉSERVEZ VOTRE SÉJOUR" (SERVICES CTA SECTION)
   ========================================================================== */
.casa-services-cta-section {
    width: 100% !important;
    max-width: 100% !important;
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    padding: 7.5rem 2rem 8.5rem 2rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
    margin: 0 !important;
    clear: both !important;
}

.casa-services-cta-title {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 4.2rem !important;
    font-weight: 400 !important;
    color: #421F19 !important;
    line-height: 1.18 !important;
    margin: 0 0 1.8rem 0 !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
}

.casa-services-cta-desc {
    font-family: var(--font-primary) !important;
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    color: #421F19 !important;
    line-height: 1.72 !important;
    max-width: 580px !important;
    margin: 0 auto 3.8rem auto !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
}

.casa-services-cta-buttons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3.5rem !important;
    flex-wrap: wrap !important;
    margin: 0 auto !important;
}

.casa-services-btn-airbnb {
    font-family: var(--font-primary) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #421F19 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-bottom: 1.5px solid #421F19 !important;
    padding-bottom: 5px !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    display: inline-block !important;
}

.casa-services-btn-airbnb:hover {
    opacity: 0.75 !important;
    transform: translateY(-2px) !important;
}

.casa-services-btn-galerie {
    font-family: var(--font-primary) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #7C3B30 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    display: inline-block !important;
}

.casa-services-btn-galerie:hover {
    opacity: 0.75 !important;
    transform: translateY(-2px) !important;
}

@media screen and (max-width: 860px) {
    .casa-services-cta-section {
        padding: 5rem 1.8rem 6rem 1.8rem !important;
    }

    .casa-services-cta-title {
        font-size: 3rem !important;
        margin-bottom: 1.5rem !important;
    }

    .casa-services-cta-desc {
        font-size: 1.05rem !important;
        margin-bottom: 3rem !important;
    }

    .casa-services-cta-buttons {
        gap: 2.2rem !important;
        flex-direction: column !important;
    }
}

@media screen and (max-width: 480px) {
    .casa-services-cta-title {
        font-size: 2.4rem !important;
    }

    .casa-services-cta-desc {
        font-size: 0.98rem !important;
    }
}

/* ==========================================================================
   46. EXACT COLOR #AD6951 & PIXEL-PERFECT BASELINE FOR CTA BUTTONS
   ========================================================================== */
.casa-services-cta-buttons {
    display: flex !important;
    justify-content: center !important;
    align-items: baseline !important;
    gap: 3.5rem !important;
    flex-wrap: wrap !important;
    margin: 0 auto !important;
}

.casa-services-cta-buttons p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-block !important;
}

.casa-services-btn-airbnb,
a.casa-services-btn-airbnb {
    font-family: var(--font-primary) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #421F19 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-bottom: 1.5px solid #421F19 !important;
    padding-bottom: 5px !important;
    line-height: 1 !important;
    display: inline-block !important;
    vertical-align: baseline !important;
}

.casa-services-btn-galerie,
a.casa-services-btn-galerie {
    font-family: var(--font-primary) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #AD6951 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-bottom: 1.5px solid transparent !important;
    padding-bottom: 5px !important;
    line-height: 1 !important;
    display: inline-block !important;
    vertical-align: baseline !important;
}

/* ==========================================================================
   47. GALLERY PAGE: 3-COLUMNS LUXURY MASONRY GRID (.casa-gallery-masonry)
   ========================================================================== */
.casa-gallery-section-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #FFFFFF !important;
    clear: both !important;
}

.casa-gallery-masonry {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    max-width: 1260px !important;
    margin: 5rem auto 8.5rem auto !important;
    padding: 0 1.5rem !important;
    box-sizing: border-box !important;
    align-items: start !important;
}

.casa-gallery-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.casa-gallery-item,
figure.wp-block-image.casa-gallery-item {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    background-color: #F8F6F3 !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    transform: none !important;
}

.casa-gallery-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 0px !important;
    margin: 0 !important;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.casa-gallery-item:hover img {
    transform: scale(1.035) !important;
}

/* Reveal State on Scroll */
.casa-gallery-item.is-revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Stagger delay for masonry columns */
.casa-gallery-col:nth-child(2) .casa-gallery-item {
    transition-delay: 0.12s !important;
}

.casa-gallery-col:nth-child(3) .casa-gallery-item {
    transition-delay: 0.24s !important;
}

/* Responsive Masonry Rules */
@media screen and (max-width: 860px) {
    .casa-gallery-masonry {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin: 3.5rem auto 5.5rem auto !important;
        padding: 0 1rem !important;
    }

    .casa-gallery-col {
        gap: 12px !important;
    }
}

@media screen and (max-width: 540px) {
    .casa-gallery-masonry {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin: 2.5rem auto 4.5rem auto !important;
        padding: 0 1rem !important;
    }

    .casa-gallery-col {
        gap: 14px !important;
    }
}

/* ==========================================================================
   48. FIX GALLERY VISIBILITY (ALWAYS VISIBLE WITH SMOOTH SCROLL REVEAL)
   ========================================================================== */
.casa-gallery-item,
figure.wp-block-image.casa-gallery-item,
.wp-block-image.casa-gallery-item {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    background-color: #F8F6F3 !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    transform: none !important;
    border-radius: 0px !important;
}

.casa-gallery-item img,
figure.wp-block-image.casa-gallery-item img,
.wp-block-image.casa-gallery-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 0px !important;
    margin: 0 !important;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.casa-gallery-item:hover img {
    transform: scale(1.035) !important;
}

/* Gallery reveal unified in Section 78 */

/* ==========================================================================
   49. EXACT MASONRY PLACEMENT & DIMENSIONS FOR GALLERY PAGE
   ========================================================================== */
.casa-gallery-masonry {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    max-width: 1280px !important;
    margin: 4.5rem auto 7.5rem auto !important;
    padding: 0 1.5rem !important;
    box-sizing: border-box !important;
    align-items: start !important;
}

.casa-gallery-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.casa-gallery-item,
figure.wp-block-image.casa-gallery-item,
.wp-block-image.casa-gallery-item {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    background-color: #F8F6F3 !important;
    box-sizing: border-box !important;
    border-radius: 0px !important;
    width: 100% !important;
}

.casa-gallery-item img,
figure.wp-block-image.casa-gallery-item img,
.wp-block-image.casa-gallery-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0px !important;
    margin: 0 !important;
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.casa-gallery-item:hover img {
    transform: scale(1.035) !important;
}

@media screen and (max-width: 860px) {
    .casa-gallery-masonry {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin: 3rem auto 5rem auto !important;
        padding: 0 1rem !important;
    }

    .casa-gallery-col {
        gap: 12px !important;
    }
}

@media screen and (max-width: 540px) {
    .casa-gallery-masonry {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin: 2.5rem auto 4rem auto !important;
        padding: 0 1rem !important;
    }

    .casa-gallery-col {
        gap: 14px !important;
    }
}

/* ==========================================================================
   50. GALLERY ALIGNMENT, EXPANDED CONTAINER (1380PX) & VISIBLE ENTRANCE ANIMATION
   ========================================================================== */
.casa-gallery-masonry {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    max-width: 1380px !important;
    margin: 4rem auto 8rem auto !important;
    padding: 0 2rem !important;
    box-sizing: border-box !important;
    align-items: start !important;
}

.casa-gallery-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.casa-gallery-col > *:first-child,
.casa-gallery-col figure:first-child,
.casa-gallery-item:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.casa-gallery-item,
figure.wp-block-image.casa-gallery-item,
.wp-block-image.casa-gallery-item {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    background-color: #F8F6F3 !important;
    box-sizing: border-box !important;
    border-radius: 0px !important;
    width: 100% !important;
}

.casa-gallery-item img,
figure.wp-block-image.casa-gallery-item img,
.wp-block-image.casa-gallery-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0px !important;
    margin: 0 !important;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.casa-gallery-item:hover img {
    transform: scale(1.035) !important;
}

/* Gallery entrance unified in Section 78 */

/* Stagger delay for columns & rows */
.casa-gallery-col:nth-child(1) .casa-gallery-item:nth-child(1) { transition-delay: 0.05s !important; }
.casa-gallery-col:nth-child(2) .casa-gallery-item:nth-child(1) { transition-delay: 0.15s !important; }
.casa-gallery-col:nth-child(3) .casa-gallery-item:nth-child(1) { transition-delay: 0.25s !important; }

.casa-gallery-col:nth-child(1) .casa-gallery-item:nth-child(2) { transition-delay: 0.15s !important; }
.casa-gallery-col:nth-child(2) .casa-gallery-item:nth-child(2) { transition-delay: 0.25s !important; }
.casa-gallery-col:nth-child(3) .casa-gallery-item:nth-child(2) { transition-delay: 0.35s !important; }

.casa-gallery-col:nth-child(1) .casa-gallery-item:nth-child(3) { transition-delay: 0.25s !important; }
.casa-gallery-col:nth-child(2) .casa-gallery-item:nth-child(3) { transition-delay: 0.35s !important; }
.casa-gallery-col:nth-child(3) .casa-gallery-item:nth-child(3) { transition-delay: 0.45s !important; }

@media screen and (max-width: 960px) {
    .casa-gallery-masonry {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
        padding: 0 1.2rem !important;
        max-width: 100% !important;
    }

    .casa-gallery-col {
        gap: 14px !important;
    }
}

@media screen and (max-width: 540px) {
    .casa-gallery-masonry {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 0 1rem !important;
    }

    .casa-gallery-col {
        gap: 16px !important;
    }
}

/* Section 51 gallery entrance unified in Section 78 */

/* ==========================================================================
   52. GALLERY BREAK BANNER & "DÉCOUVRIR LES SUITES" 2X2 GRID SECTION
   ========================================================================== */
/* Full-Width Panoramic Gallery Break Banner */
.casa-gallery-break-banner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    height: 580px !important;
    display: block !important;
    clear: both !important;
    background-color: #222222 !important;
}

.casa-gallery-break-banner img {
    width: 100% !important;
    height: 580px !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 0px !important;
}

/* Section "Découvrir les suites" */
.casa-suites-preview-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 6rem 1.5rem 8rem 1.5rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background-color: #FFFFFF !important;
    clear: both !important;
}

.casa-suites-preview-title {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 4rem !important;
    font-weight: 400 !important;
    color: #421F19 !important;
    line-height: 1.2 !important;
    margin: 0 0 3.8rem 0 !important;
    letter-spacing: 0.01em !important;
    text-align: center !important;
}

.casa-suites-preview-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    max-width: 1260px !important;
    margin: 0 auto 4.5rem auto !important;
    box-sizing: border-box !important;
}

.casa-suites-preview-item,
figure.wp-block-image.casa-suites-preview-item,
.wp-block-image.casa-suites-preview-item {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    background-color: #F8F6F3 !important;
    border-radius: 0px !important;
    box-sizing: border-box !important;
}

.casa-suites-preview-item img,
figure.wp-block-image.casa-suites-preview-item img,
.wp-block-image.casa-suites-preview-item img {
    width: 100% !important;
    height: 420px !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0px !important;
    margin: 0 !important;
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.casa-suites-preview-item:hover img {
    transform: scale(1.035) !important;
}

/* Solid Brown Button CTA */
.casa-suites-preview-cta-wrap {
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.casa-suites-preview-cta,
a.casa-suites-preview-cta {
    display: inline-block !important;
    background-color: #421F19 !important;
    color: #FFFFFF !important;
    font-family: var(--font-primary) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 16px 36px !important;
    border-radius: 0px !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
}

.casa-suites-preview-cta:hover,
a.casa-suites-preview-cta:hover {
    background-color: #5C2C24 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

/* Responsive Rules for Section 52 */
@media screen and (max-width: 1100px) {
    .casa-gallery-break-banner,
    .casa-gallery-break-banner img {
        height: 460px !important;
    }

    .casa-suites-preview-item img {
        height: 360px !important;
    }
}

@media screen and (max-width: 860px) {
    .casa-gallery-break-banner,
    .casa-gallery-break-banner img {
        height: 380px !important;
    }

    .casa-suites-preview-section {
        padding: 4.5rem 1.2rem 6rem 1.2rem !important;
    }

    .casa-suites-preview-title {
        font-size: 2.8rem !important;
        margin-bottom: 2.8rem !important;
    }

    .casa-suites-preview-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin-bottom: 3.5rem !important;
    }

    .casa-suites-preview-item img {
        height: 320px !important;
    }
}

@media screen and (max-width: 480px) {
    .casa-gallery-break-banner,
    .casa-gallery-break-banner img {
        height: 280px !important;
    }

    .casa-suites-preview-title {
        font-size: 2.3rem !important;
    }

    .casa-suites-preview-item img {
        height: 250px !important;
    }

    .casa-suites-preview-cta {
        padding: 14px 24px !important;
        font-size: 0.88rem !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   53. CURRENT PAGE ACTIVE LINK HIGHLIGHTING (.is-current)
   ========================================================================== */
.casa-nav-link.is-current,
.casa-nav-item.current-menu-item .casa-nav-link,
a.casa-nav-link.is-current {
    font-weight: 700 !important;
    color: #421F19 !important;
    opacity: 1 !important;
    border-bottom: 2px solid #421F19 !important;
    padding-bottom: 4px !important;
}

.casa-drawer-link.is-current,
a.casa-drawer-link.is-current {
    font-weight: 700 !important;
    color: #421F19 !important;
    opacity: 1 !important;
    border-bottom: 2px solid #421F19 !important;
    padding-bottom: 4px !important;
}

/* ==========================================================================
   54. PURE BOLD HIGHLIGHT FOR ACTIVE NAV LINKS (NO UNDERLINE BORDER)
   ========================================================================== */
.casa-nav-link.is-current,
.casa-nav-item.current-menu-item .casa-nav-link,
a.casa-nav-link.is-current {
    font-weight: 700 !important;
    color: #421F19 !important;
    opacity: 1 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.casa-drawer-link.is-current,
a.casa-drawer-link.is-current {
    font-weight: 700 !important;
    color: #421F19 !important;
    opacity: 1 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* ==========================================================================
   55. ULTRA-BOLD CONTRAST FOR ACTIVE NAV LINKS
   ========================================================================== */
.casa-nav-link {
    font-weight: 400 !important;
    opacity: 0.75 !important;
}

.casa-nav-link.is-current,
.casa-nav-item.current-menu-item .casa-nav-link,
a.casa-nav-link.is-current {
    font-weight: 700 !important;
    color: #421F19 !important;
    opacity: 1 !important;
    text-shadow: 0.4px 0 0 #421F19, -0.4px 0 0 #421F19 !important;
    letter-spacing: 0.1em !important;
}

.casa-drawer-link {
    font-weight: 400 !important;
    opacity: 0.75 !important;
}

.casa-drawer-link.is-current,
a.casa-drawer-link.is-current {
    font-weight: 700 !important;
    color: #421F19 !important;
    opacity: 1 !important;
    text-shadow: 0.4px 0 0 #421F19, -0.4px 0 0 #421F19 !important;
    letter-spacing: 0.1em !important;
}

/* ==========================================================================
   56. PIXEL-PERFECT BASELINE ALIGNMENT FOR CTA BANNER BUTTONS
   ========================================================================== */
.casa-cta-buttons-wrap {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 3.5rem !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.casa-cta-buttons-wrap p {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: baseline !important;
}

.casa-cta-btn-primary {
    font-family: var(--font-primary) !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding-bottom: 4px !important;
    border-bottom: 2px solid var(--color-text) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
}

.casa-cta-btn-secondary {
    font-family: var(--font-primary) !important;
    font-size: 1.12rem !important;
    font-weight: 400 !important;
    color: #AD6951 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding-bottom: 4px !important;
    border-bottom: 2px solid transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
}

.casa-cta-btn-primary:hover {
    opacity: 0.75 !important;
    transform: translateX(3px) !important;
}

.casa-cta-btn-secondary:hover {
    opacity: 0.75 !important;
    transform: translateX(3px) !important;
}

@media screen and (max-width: 600px) {
    .casa-cta-buttons-wrap {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.5rem !important;
    }
}

/* ==========================================================================
   57. LUXURY LIGHTBOX MODAL & TOUCH SLIDER FOR GALLERY
   ========================================================================== */
.casa-gallery-item,
figure.wp-block-image.casa-gallery-item,
.wp-block-image.casa-gallery-item,
.casa-suites-preview-item,
figure.wp-block-image.casa-suites-preview-item {
    cursor: zoom-in !important;
}

/* Lightbox Backdrop Modal */
.casa-lightbox-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 12, 10, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease !important;
    user-select: none !important;
    touch-action: none !important;
}

.casa-lightbox-modal.is-open {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Lightbox Content Container */
.casa-lightbox-container {
    position: relative !important;
    max-width: 90vw !important;
    max-height: 88vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.casa-lightbox-img {
    max-width: 90vw !important;
    max-height: 85vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 2px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
    transform: scale(0.96);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.casa-lightbox-modal.is-open .casa-lightbox-img.is-loaded {
    transform: scale(1) !important;
    opacity: 1 !important;
}

/* Close Button (Top Right) */
.casa-lightbox-close {
    position: absolute !important;
    top: 2rem !important;
    right: 2.5rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 1000000 !important;
    transition: background-color 0.25s, transform 0.25s, border-color 0.25s !important;
}

.casa-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: #FFFFFF !important;
    transform: scale(1.08) !important;
}

.casa-lightbox-close svg {
    width: 22px !important;
    height: 22px !important;
    stroke: #FFFFFF !important;
}

/* Navigation Chevrons (Prev / Next) */
.casa-lightbox-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 1000000 !important;
    transition: background-color 0.25s, transform 0.25s, border-color 0.25s !important;
}

.casa-lightbox-prev {
    left: 2rem !important;
}

.casa-lightbox-next {
    right: 2rem !important;
}

.casa-lightbox-arrow:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: #FFFFFF !important;
    transform: translateY(-50%) scale(1.08) !important;
}

.casa-lightbox-arrow svg {
    width: 24px !important;
    height: 24px !important;
    stroke: #FFFFFF !important;
}

/* Image Counter (Bottom Center) */
.casa-lightbox-counter {
    position: absolute !important;
    bottom: 2rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: var(--font-primary) !important;
    font-size: 1rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    background: rgba(0, 0, 0, 0.4) !important;
    padding: 6px 18px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    z-index: 1000000 !important;
}

@media screen and (max-width: 768px) {
    .casa-lightbox-arrow {
        width: 42px !important;
        height: 42px !important;
    }
    .casa-lightbox-prev { left: 0.8rem !important; }
    .casa-lightbox-next { right: 0.8rem !important; }
    .casa-lightbox-close {
        top: 1rem !important;
        right: 1rem !important;
        width: 40px !important;
        height: 40px !important;
    }
    .casa-lightbox-counter {
        bottom: 1.2rem !important;
        font-size: 0.85rem !important;
    }
}

/* ==========================================================================
   58. LARGE IMMERSIVE DISPLAY FOR LIGHTBOX IMAGES (SVGS & HIGH-RES)
   ========================================================================== */
.casa-lightbox-container {
    position: relative !important;
    max-width: 95vw !important;
    max-height: 92vh !important;
    width: 95vw !important;
    height: 90vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.casa-lightbox-img {
    max-width: 94vw !important;
    max-height: 88vh !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    border-radius: 2px !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65) !important;
    transform: scale(0.97);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.casa-lightbox-modal.is-open .casa-lightbox-img.is-loaded {
    transform: scale(1) !important;
    opacity: 1 !important;
}

/* ==========================================================================
   59. MASTER UPGRADES: FIXED HEADER, 404, FLICKER FIX, BALANCED SUITES & MOBILE PERFECTION
   ========================================================================== */

/* 1. FIXED HEADER ON DESKTOP & MOBILE */
.casa-site-header-wrap {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background-color: rgba(250, 248, 245, 0.94) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(66, 31, 25, 0.08) !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

body {
    padding-top: 86px !important;
}

@media screen and (max-width: 768px) {
    body {
        padding-top: 72px !important;
    }
}

/* 2. CUSTOM LUXURY 404 PAGE STYLING */
.casa-404-section {
    min-height: 75vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background-color: #FAF8F5 !important;
    padding: 6rem 1.5rem !important;
    box-sizing: border-box !important;
}

.casa-404-container {
    max-width: 680px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.casa-404-code {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 6.5rem !important;
    color: #AD6951 !important;
    opacity: 0.35 !important;
    margin: 0 0 -1.8rem 0 !important;
    line-height: 1 !important;
}

.casa-404-eyebrow {
    font-family: var(--font-primary) !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    color: #AD6951 !important;
    text-transform: uppercase !important;
    margin: 0 0 1rem 0 !important;
}

.casa-404-title {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 4.2rem !important;
    color: #421F19 !important;
    line-height: 1.15 !important;
    margin: 0 0 1.5rem 0 !important;
}

.casa-404-desc {
    font-family: var(--font-primary) !important;
    font-size: 1.15rem !important;
    color: #421F19 !important;
    opacity: 0.85 !important;
    max-width: 520px !important;
    margin: 0 auto 2.5rem auto !important;
    line-height: 1.6 !important;
}

.casa-404-cta {
    display: inline-block !important;
    background-color: #421F19 !important;
    color: #FFFFFF !important;
    font-family: var(--font-primary) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 16px 36px !important;
    border-radius: 0px !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
}

.casa-404-cta:hover {
    background-color: #5C2C24 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
}

/* 3. BALANCED WIDTH & COMFORT FOR SUITE SAFRAN & SUITE AMBRE */
.casa-suite-row,
.casa-suite-row.is-reversed {
    display: grid !important;
    grid-template-columns: 50% 50% !important;
    width: 100% !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}

.casa-suite-text-wrap,
.casa-suite-row.is-reversed .casa-suite-text-wrap {
    padding: 5rem 6rem !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
}

.casa-suite-desc,
.casa-suite-text-wrap .casa-suite-desc {
    max-width: 520px !important;
    width: 100% !important;
    font-size: 1.18rem !important;
    line-height: 1.72 !important;
}

/* 4. SEAMLESS PATIO BANNER & SERVICES CORRECTIONS */
.casa-patio-break-banner,
.wp-block-group.alignfull.casa-patio-break-banner {
    background-color: transparent !important;
    background: transparent !important;
    height: auto !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.casa-patio-break-banner img {
    width: 100% !important;
    height: 600px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
}

.casa-beyond-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6.5rem 1.5rem 7.5rem 1.5rem !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
    background-color: #F1E4D8 !important;
}

.casa-beyond-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2.5rem !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.casa-services-cta-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 6.5rem 1.5rem 7.5rem 1.5rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.casa-services-cta-title,
.casa-services-cta-desc,
.casa-services-cta-buttons {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 5. MOBILE RESPONSIVE OPTIMIZATIONS (ZERO BLANKS, NO FLICKER, PERFECT TIMELINE) */
@media screen and (max-width: 860px) {
    /* Layout structure preserved */

    /* Suite rows mobile stack */
    .casa-suite-row,
    .casa-suite-row.is-reversed {
        grid-template-columns: 1fr !important;
    }

    .casa-suite-text-wrap,
    .casa-suite-row.is-reversed .casa-suite-text-wrap {
        padding: 3.5rem 1.5rem !important;
    }

    /* Le Riad Mood Banners mobile layout (Never cut off text) */
    .casa-time-banner-section,
    .casa-craft-banner-section {
        height: auto !important;
        min-height: 560px !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        padding: 6rem 1.5rem 3.5rem 1.5rem !important;
        box-sizing: border-box !important;
    }

    .casa-time-banner-img-wrap,
    .casa-craft-banner-img-wrap {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
    }

    .casa-time-banner-img-wrap img,
    .casa-craft-banner-img-wrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .casa-time-banner-overlay,
    .casa-craft-banner-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.78) 100%) !important;
        z-index: 2 !important;
    }

    .casa-time-banner-content,
    .casa-craft-banner-content {
        position: relative !important;
        z-index: 3 !important;
        left: auto !important;
        bottom: auto !important;
        right: auto !important;
        top: auto !important;
        padding: 0 !important;
        max-width: 100% !important;
        text-align: center !important;
        align-items: center !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .casa-time-banner-title,
    .casa-craft-banner-title {
        font-size: 2.6rem !important;
        line-height: 1.15 !important;
        margin-bottom: 1.2rem !important;
        text-align: center !important;
    }

    .casa-time-banner-desc,
    .casa-craft-banner-desc {
        font-size: 1.05rem !important;
        line-height: 1.6 !important;
        margin-bottom: 2rem !important;
        text-align: center !important;
    }

    /* Flawless Mobile Timeline ("Une journée à Casa Mima") */
    .casa-day-section {
        margin: 4rem auto 4.5rem auto !important;
        padding: 0 1.2rem !important;
        text-align: left !important;
    }

    .casa-day-title {
        font-size: 2.8rem !important;
        text-align: left !important;
    }

    .casa-timeline-wrap {
        position: relative !important;
        padding-left: 28px !important;
        margin: 2.5rem 0 !important;
        text-align: left !important;
    }

    .casa-timeline-wrap::before {
        content: '' !important;
        position: absolute !important;
        top: 10px !important;
        bottom: 10px !important;
        left: 5px !important;
        width: 1.5px !important;
        background-color: #7C3B30 !important;
        display: block !important;
        transform: none !important;
    }

    .casa-timeline-row {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 3rem !important;
        padding: 0 !important;
    }

    .casa-timeline-row::before {
        content: '' !important;
        position: absolute !important;
        top: 8px !important;
        left: -28px !important;
        width: 12px !important;
        height: 12px !important;
        border-radius: 50% !important;
        background-color: #7C3B30 !important;
        transform: none !important;
        z-index: 2 !important;
    }

    .casa-timeline-time {
        font-family: var(--font-serif) !important;
        font-style: italic !important;
        font-size: 2.2rem !important;
        color: #7C3B30 !important;
        margin: 0 0 0.4rem 0 !important;
        text-align: left !important;
        line-height: 1.1 !important;
    }

    .casa-timeline-content {
        text-align: left !important;
        padding: 0 !important;
    }

    .casa-timeline-heading {
        font-family: var(--font-primary) !important;
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        color: #421F19 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        margin: 0 0 0.6rem 0 !important;
    }

    .casa-timeline-desc {
        font-family: var(--font-primary) !important;
        font-size: 1rem !important;
        color: #421F19 !important;
        opacity: 0.85 !important;
        line-height: 1.6 !important;
        margin: 0 !important;
    }

    .casa-patio-break-banner img {
        height: 380px !important;
    }

    .casa-beyond-grid {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }
}

@media screen and (max-width: 480px) {
    .casa-404-title {
        font-size: 3rem !important;
    }
    .casa-404-code {
        font-size: 5rem !important;
    }
}

/* ==========================================================================
   60. SEAMLESS ZERO-GAP STICKY/FIXED HEADER (FLUSH WITH HERO SECTIONS)
   ========================================================================== */
body {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.casa-site-header-wrap,
header.wp-block-group.alignfull.casa-site-header-wrap {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background-color: rgba(250, 248, 245, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(66, 31, 25, 0.08) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Ensure all heroes start immediately flush with the header */
.casa-hero-section,
.casa-page-hero-section,
.casa-main-content > *:first-child,
.entry-content > *:first-child,
.wp-site-blocks > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.casa-hero-img,
.casa-hero-img img,
.casa-page-hero-img,
.casa-page-hero-img img {
    margin-top: 0 !important;
}

/* ==========================================================================
   61. HEADER LOGO IMAGE STYLING
   ========================================================================== */
.casa-site-logo-img,
figure.wp-block-image.casa-site-logo-img,
.casa-header-brand figure {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.casa-site-logo-img img,
figure.wp-block-image.casa-site-logo-img img,
.casa-header-brand img {
    height: 24px !important;
    max-height: 26px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
}

.casa-drawer-brand {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.casa-drawer-brand img {
    height: 24px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* ==========================================================================
   62. GLOBAL HORIZONTAL OVERFLOW FIX (ELIMINATES RIGHT MARGIN / SCROLL SPILL)
   ========================================================================== */
html,
body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

*,
*::before,
*::after {
    box-sizing: border-box !important;
}

#page,
.site,
.wp-site-blocks,
.is-root-container,
main,
main.wp-block-group,
.casa-main-content,
.alignfull,
.wp-block-group.alignfull {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Modals & Drawers must strictly respect viewport width without scrollbar bleed */
.casa-mobile-drawer,
.casa-lightbox-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
}

/* Ensure all section rows, grids & containers span 100% cleanly */
.casa-hero-section,
.casa-hero-grid,
.casa-intro-section,
.casa-suites-showcase,
.casa-suite-row,
.casa-suites-grid-section,
.casa-fullwidth-banner-section,
.casa-breakfast-section,
.casa-breakfast-grid,
.casa-services-section,
.casa-services-grid,
.casa-location-section,
.casa-insta-strip-section,
.casa-insta-strip,
.casa-main-footer,
.casa-footer-wrap,
.casa-story-section,
.casa-time-banner-section,
.casa-reviews-section,
.casa-craft-banner-section,
.casa-cta-banner-section,
.casa-page-hero-section,
.casa-timeline-section,
.casa-day-section,
.casa-patio-break-banner,
.casa-beyond-section,
.casa-services-cta-section,
.casa-gallery-masonry,
.casa-gallery-break-banner,
.casa-suites-preview-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Image containment guarantee */
img,
figure.wp-block-image img,
.casa-hero-img img,
.casa-suite-img img,
.casa-suite-card-img img,
.casa-fullwidth-banner-img img,
.casa-breakfast-img img,
.casa-insta-photo-img {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   63. INTRO SECTION CENTERING FIX & HEADER LOGO UNIVERSAL PATH
   ========================================================================== */
/* Restore centered intro section (override the section 62 width: 100%) */
.casa-intro-section,
.wp-block-group.casa-intro-section {
    width: auto !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* ==========================================================================
   64. MOBILE DRAWER FIX (ENSURE DRAWER RENDERS ABOVE OVERFLOW CLIP)
   ========================================================================== */
/* Override overflow-x:hidden on html/body to use clip instead, which allows
   fixed-position children (drawer, lightbox) to render outside the clip */
html {
    overflow-x: clip !important;
    overflow-y: auto !important;
}

body {
    overflow-x: clip !important;
    overflow-y: auto !important;
}

/* When drawer is active, temporarily disable overflow clipping so the
   fixed-position drawer panel is fully visible */
body.casa-drawer-open {
    overflow: hidden !important;
}

/* Re-enforce drawer panel styling to ensure it renders correctly */
.casa-mobile-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.35s ease, visibility 0.35s ease !important;
    overflow: visible !important;
}

.casa-mobile-drawer.is-active {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: all !important;
}

.casa-drawer-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(66, 31, 25, 0.5) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 1 !important;
}

.casa-drawer-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 82% !important;
    max-width: 360px !important;
    height: 100% !important;
    background-color: #F1E4D8 !important;
    background: #F1E4D8 !important;
    padding: 3.5rem 2.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
    transform: translateX(100%) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}

.casa-mobile-drawer.is-active .casa-drawer-panel {
    transform: translateX(0) !important;
}

.casa-drawer-close {
    position: absolute !important;
    top: 1.5rem !important;
    right: 1.5rem !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #421F19 !important;
    padding: 0.4rem !important;
    z-index: 10 !important;
}

.casa-drawer-header {
    margin-bottom: 2.8rem !important;
    padding-top: 0.5rem !important;
}

.casa-drawer-brand {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.casa-drawer-brand img {
    height: 22px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

.casa-drawer-nav-list {
    list-style: none !important;
    margin: 0 0 2.5rem 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.8rem !important;
    width: 100% !important;
}

.casa-drawer-link {
    font-family: var(--font-primary) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #421F19 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease !important;
}

.casa-drawer-link:hover {
    opacity: 0.7 !important;
}

.casa-drawer-lang-switcher {
    margin-bottom: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.casa-drawer-cta-wrap {
    margin-top: auto !important;
}

.casa-drawer-cta {
    font-family: var(--font-primary) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #421F19 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding-bottom: 3px !important;
    border-bottom: 2px solid #421F19 !important;
    display: inline-block !important;
}

@media screen and (max-width: 480px) {
    .casa-drawer-panel {
        width: 90% !important;
        padding: 2.5rem 1.5rem !important;
    }
}

/* ==========================================================================
   65. GALLERY IMAGES RESPONSIVE SIZING
   ========================================================================== */
.casa-gallery-item img,
.casa-gallery-masonry img,
.casa-gallery-masonry .wp-block-image img,
figure.wp-block-image.casa-gallery-item img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* ==========================================================================
   66. INSTAGRAM STRIP SEAMLESS FIX & BULLETPROOF FOOTER STYLES
   ========================================================================== */

/* 1. Instagram Section: Seamless Beige Background, No White Gaps */
.casa-insta-strip-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--color-primary, #F1E4D8) !important;
    background: var(--color-primary, #F1E4D8) !important;
    overflow: hidden !important;
    display: block !important;
    line-height: 0 !important;
}

/* Eliminate wpautop stray paragraphs & linebreaks containing hidden inputs */
.casa-insta-strip-section > p,
.casa-insta-strip-section p:empty,
.casa-insta-strip-section br {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

/* Spotlight Instagram Feed flush container styles */
.spotlight-instagram-feed,
.Spotlight-Instagram-Feed,
.sli-feed-container,
.sli-feed,
.sli-feed-wrapper,
.sli-posts-container,
.sli-grid,
.sli-row,
.sli-slider {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    line-height: normal !important;
}

.sli-feed-container,
.sli-feed-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Instagram Handle Banner */
.casa-insta-handle-wrap {
    background-color: var(--color-primary, #F1E4D8) !important;
    background: var(--color-primary, #F1E4D8) !important;
    margin: 0 !important;
    padding: 2.2rem 1.5rem !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    line-height: normal !important;
}

.casa-insta-handle-wrap p {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    line-height: normal !important;
}

.casa-insta-handle-link {
    font-family: var(--font-primary) !important;
    font-size: 1.35rem !important;
    font-weight: 400 !important;
    color: var(--color-text, #421F19) !important;
    letter-spacing: 0.06em !important;
    text-decoration: none !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    display: inline-block !important;
}

.casa-insta-handle-link:hover {
    opacity: 0.75 !important;
    transform: translateY(-1px) !important;
}

/* 2. Main Dark Footer Layout (Terracotta Brown #421F19) */
.casa-main-footer {
    background-color: var(--color-text, #421F19) !important;
    background: var(--color-text, #421F19) !important;
    color: #E3C2B4 !important;
    padding: 4.5rem 4rem 3rem 4rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}

.casa-footer-container {
    max-width: 1560px !important;
    margin: 0 auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

.casa-footer-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 2.5rem !important;
    box-sizing: border-box !important;
}

.casa-footer-logo-img {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.casa-footer-logo-img a {
    display: inline-flex !important;
    align-items: center !important;
}

.casa-footer-logo-img img {
    max-height: 40px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

.casa-footer-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3.2rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.casa-footer-nav p {
    margin: 0 !important;
    padding: 0 !important;
}

.casa-footer-nav-link {
    font-family: var(--font-primary) !important;
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    color: #E3C2B4 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: opacity 0.25s ease, color 0.25s ease !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

.casa-footer-nav-link:hover {
    color: #FFFFFF !important;
    opacity: 0.9 !important;
}

.casa-footer-cta-wrap {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.casa-footer-cta {
    font-family: var(--font-primary) !important;
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    color: #E3C2B4 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding-bottom: 3px !important;
    border-bottom: 1.8px solid #E3C2B4 !important;
    transition: opacity 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

.casa-footer-cta:hover {
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    opacity: 0.9 !important;
}

p.casa-footer-copy,
.casa-footer-container p.casa-footer-copy {
    font-family: var(--font-primary) !important;
    font-size: 0.92rem !important;
    font-weight: 300 !important;
    color: rgba(227, 194, 180, 0.6) !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
    margin: 3.5rem auto 0 auto !important;
    padding-top: 1.8rem !important;
    border-top: 1px solid rgba(227, 194, 180, 0.12) !important;
    width: 100% !important;
    line-height: 1.6 !important;
    display: block !important;
}

.casa-footer-copy a {
    color: rgba(227, 194, 180, 0.75) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.casa-footer-copy a:hover {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

/* Footer Responsive Breakpoints */
@media screen and (max-width: 1024px) {
    .casa-main-footer {
        padding: 3.5rem 2rem 2.8rem 2rem !important;
        text-align: center !important;
    }

    .casa-footer-container {
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .casa-footer-top {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2.2rem !important;
        width: 100% !important;
        text-align: center !important;
    }

    .casa-footer-logo-img {
        margin: 0 auto !important;
        justify-content: center !important;
    }

    .casa-footer-logo-img img {
        margin: 0 auto !important;
        max-height: 36px !important;
    }

    .casa-footer-nav {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 2rem !important;
        margin: 0 auto !important;
        width: 100% !important;
        text-align: center !important;
    }

    .casa-footer-cta-wrap {
        margin: 0.4rem auto 0 auto !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    p.casa-footer-copy,
    .casa-footer-container p.casa-footer-copy {
        margin: 2.5rem auto 0 auto !important;
        padding-top: 1.5rem !important;
        font-size: 0.88rem !important;
    }
}

@media screen and (max-width: 600px) {
    .casa-main-footer {
        padding: 3rem 1.25rem 2.2rem 1.25rem !important;
    }

    .casa-footer-top {
        gap: 1.8rem !important;
    }

    .casa-footer-nav {
        flex-direction: column !important;
        gap: 1.2rem !important;
    }

    .casa-footer-nav-link,
    .casa-footer-cta {
        font-size: 0.95rem !important;
    }

    p.casa-footer-copy,
    .casa-footer-container p.casa-footer-copy {
        font-size: 0.82rem !important;
        margin-top: 2rem !important;
    }
}

/* ==========================================================================
   67. PERFECT CENTERING FIX FOR STORY & DAY SECTIONS
   ========================================================================== */

/* 1. Section "L'HISTOIRE - Une demeure avant d'être un riad" (Page Le Riad) */
.casa-story-section,
.wp-block-group.casa-story-section,
div.casa-story-section {
    max-width: 860px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.casa-story-eyebrow,
p.casa-story-eyebrow,
.casa-story-section .casa-story-eyebrow,
.casa-story-section > p:first-child {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    display: block !important;
}

.casa-story-title,
h2.casa-story-title,
.casa-story-section .casa-story-title,
.casa-story-section h2.wp-block-heading,
.casa-story-section h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    display: block !important;
}

.casa-story-desc,
p.casa-story-desc,
.casa-story-section .casa-story-desc,
.casa-story-section > p.casa-story-desc {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 740px !important;
    width: 100% !important;
    display: block !important;
}

/* 2. Section "LE FIL D'UNE JOURNÉE - Une journée à Casa Mima" (Page Services) */
.casa-day-section,
.wp-block-group.casa-day-section,
div.casa-day-section {
    max-width: 1080px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.casa-day-eyebrow,
p.casa-day-eyebrow,
.casa-day-section .casa-day-eyebrow,
.casa-day-section > p:first-child {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    display: block !important;
}

.casa-day-title,
h2.casa-day-title,
.casa-day-section .casa-day-title,
.casa-day-section h2.wp-block-heading,
.casa-day-section h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    display: block !important;
}

.casa-timeline-wrap,
.casa-day-section .casa-timeline-wrap,
div.casa-timeline-wrap {
    width: 100% !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* ==========================================================================
   68. LOGO REFINEMENTS, 100% FLUID SCROLL (NO LAG/BLOCK), & BULLETPROOF FOOTER WITH TIKTOK
   ========================================================================== */

/* 1. Header & Footer Logos */
.casa-header-brand a,
.casa-logo-brand-link,
.casa-drawer-brand {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.casa-header-logo-img,
.casa-drawer-logo-img {
    max-height: 38px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

.casa-footer-logo-img,
figure.casa-footer-logo-img {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.casa-footer-logo-img img,
.casa-footer-logo-img-el {
    max-height: 42px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* Scroll Animation Fix unified in Section 78 */
/* 3. Footer Layout & TikTok Link */
.casa-footer-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2.8rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.casa-footer-nav-link,
.casa-footer-nav a {
    font-family: var(--font-primary) !important;
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    color: #E3C2B4 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: opacity 0.25s ease, color 0.25s ease !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
}

.casa-footer-nav-link:hover,
.casa-footer-nav a:hover,
.casa-footer-tiktok:hover {
    color: #FFFFFF !important;
    opacity: 0.9 !important;
}

.casa-footer-tiktok svg {
    transition: transform 0.25s ease !important;
}

.casa-footer-tiktok:hover svg {
    transform: scale(1.15) !important;
}

/* Fallback: Even if Gutenberg flattens the footer into raw elements, maintain layout */
.casa-main-footer {
    background-color: var(--color-text, #421F19) !important;
    background: var(--color-text, #421F19) !important;
    color: #E3C2B4 !important;
    padding: 4.5rem 4rem 3rem 4rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.casa-footer-copy,
p.casa-footer-copy,
.casa-main-footer p.casa-footer-copy {
    font-family: var(--font-primary) !important;
    font-size: 0.92rem !important;
    font-weight: 300 !important;
    color: rgba(227, 194, 180, 0.65) !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
    margin: 3.5rem auto 0 auto !important;
    padding-top: 1.8rem !important;
    border-top: 1px solid rgba(227, 194, 180, 0.12) !important;
    width: 100% !important;
    line-height: 1.6 !important;
    display: block !important;
}

.casa-footer-copy a,
p.casa-footer-copy a {
    color: rgba(227, 194, 180, 0.8) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.casa-footer-copy a:hover,
p.casa-footer-copy a:hover {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

@media screen and (max-width: 1024px) {
    .casa-footer-top {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2rem !important;
        text-align: center !important;
    }

    .casa-footer-nav {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 1.8rem !important;
    }
}

@media screen and (max-width: 600px) {
    .casa-footer-nav {
        flex-direction: column !important;
        gap: 1.2rem !important;
    }
}

/* ==========================================================================
   69. ENLARGED LOGOS & ULTRA-SMOOTH ZERO-BLOCKING SCROLL ENTRANCE ANIMATION
   ========================================================================== */

/* 1. Enlarged Logos (Header & Drawer: Brown | Footer: White) */
.casa-header-brand,
.casa-header-brand a,
.casa-logo-brand-link {
    display: inline-flex !important;
    align-items: center !important;
}

.casa-header-logo-img {
    height: 50px !important;
    max-height: 54px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

.casa-header-logo-img:hover {
    transform: scale(1.03) !important;
}

.casa-drawer-header,
.casa-drawer-brand {
    display: inline-flex !important;
    align-items: center !important;
}

.casa-drawer-logo-img {
    height: 46px !important;
    max-height: 50px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

.casa-footer-logo-img,
figure.casa-footer-logo-img {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.casa-footer-logo-img img,
.casa-footer-logo-img-el {
    height: 52px !important;
    max-height: 58px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

.casa-footer-logo-img img:hover,
.casa-footer-logo-img-el:hover {
    transform: scale(1.03) !important;
}

/* Entrance Animation unified in Section 78 */
@media screen and (max-width: 860px) {
    .casa-header-logo-img {
        height: 42px !important;
        max-height: 46px !important;
    }

    .casa-footer-logo-img img,
    .casa-footer-logo-img-el {
        height: 44px !important;
        max-height: 48px !important;
    }
}

/* ==========================================================================
   70. DEFINITIVE HIGH-RES LOGO SIZING & BUTTERY-SMOOTH ENTRANCE ANIMATIONS
   ========================================================================== */

/* 1. Header Logo (Dark Brown #421F19 on Beige/White Header) */
.casa-header-brand,
.casa-header-brand a,
.casa-logo-brand-link {
    display: inline-flex !important;
    align-items: center !important;
}

.casa-header-logo-img {
    height: 60px !important;
    max-height: 64px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    transition: transform 0.25s ease !important;
}

.casa-header-logo-img:hover {
    transform: scale(1.03) !important;
}

.casa-drawer-header,
.casa-drawer-brand {
    display: inline-flex !important;
    align-items: center !important;
}

.casa-drawer-logo-img {
    height: 52px !important;
    max-height: 56px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* 2. Footer Logo (Pure Bright White #FFFFFF on Dark Brown #421F19 Footer) */
.casa-footer-logo-img,
figure.casa-footer-logo-img {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.casa-footer-logo-img img,
.casa-footer-logo-img-el {
    height: 62px !important;
    max-height: 68px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    transition: transform 0.25s ease !important;
}

.casa-footer-logo-img img:hover,
.casa-footer-logo-img-el:hover {
    transform: scale(1.03) !important;
}

/* Scroll Animations unified in Section 78 */
@media screen and (max-width: 860px) {
    .casa-header-logo-img {
        height: 48px !important;
        max-height: 52px !important;
    }

    .casa-footer-logo-img img,
    .casa-footer-logo-img-el {
        height: 50px !important;
        max-height: 54px !important;
    }
}

/* ==========================================================================
   71. LARGE HEADER LOGO (80PX) & GUTENBERG-COMPATIBLE HEADER NAVIGATION
   ========================================================================== */

/* 1. Large High-Impact Header Logo */
.casa-header-brand,
.casa-header-logo-img,
figure.casa-header-logo-img,
figure.wp-block-image.casa-header-logo-img {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.casa-header-logo-img a {
    display: inline-flex !important;
    align-items: center !important;
}

.casa-header-logo-img img,
figure.casa-header-logo-img img,
figure.wp-block-image.casa-header-logo-img img {
    height: 80px !important;
    max-height: 85px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    transition: transform 0.25s ease !important;
}

.casa-header-logo-img img:hover {
    transform: scale(1.03) !important;
}

.casa-header-container {
    max-width: 1560px !important;
    margin: 0 auto !important;
    padding: 0.9rem 4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.casa-header-nav {
    display: flex !important;
    align-items: center !important;
    gap: 3.2rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.casa-header-nav p {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

@media screen and (max-width: 1200px) {
    .casa-header-container {
        padding: 0.8rem 2.5rem !important;
    }

    .casa-header-logo-img img,
    figure.casa-header-logo-img img {
        height: 70px !important;
        max-height: 74px !important;
    }

    .casa-header-nav {
        gap: 2.2rem !important;
    }
}

@media screen and (max-width: 960px) {
    .casa-header-container {
        padding: 0.75rem 1.8rem !important;
    }

    .casa-header-logo-img img,
    figure.casa-header-logo-img img {
        height: 60px !important;
        max-height: 64px !important;
    }

    .casa-header-nav {
        display: none !important;
    }
}

/* ==========================================================================
   72. REFINED, ELEGANT HEADER LOGO SIZING (46PX - LUXURY SWEET SPOT)
   ========================================================================== */

.casa-header-logo-img,
figure.casa-header-logo-img,
figure.wp-block-image.casa-header-logo-img {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.casa-header-logo-img img,
figure.casa-header-logo-img img,
figure.wp-block-image.casa-header-logo-img img {
    height: 46px !important;
    max-height: 50px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    transition: transform 0.25s ease !important;
}

.casa-header-container {
    padding: 1.1rem 4rem !important;
}

@media screen and (max-width: 1200px) {
    .casa-header-container {
        padding: 1rem 2.5rem !important;
    }

    .casa-header-logo-img img,
    figure.casa-header-logo-img img {
        height: 42px !important;
        max-height: 46px !important;
    }
}

@media screen and (max-width: 960px) {
    .casa-header-container {
        padding: 0.9rem 1.8rem !important;
    }

    .casa-header-logo-img img,
    figure.casa-header-logo-img img {
        height: 38px !important;
        max-height: 42px !important;
    }
}

/* ==========================================================================
   73. FINE-TUNED HEADER LOGO SIZING (52PX - PERFECT BALANCE)
   ========================================================================== */

.casa-header-logo-img img,
figure.casa-header-logo-img img,
figure.wp-block-image.casa-header-logo-img img {
    height: 52px !important;
    max-height: 56px !important;
    width: auto !important;
}

@media screen and (max-width: 1200px) {
    .casa-header-logo-img img,
    figure.casa-header-logo-img img {
        height: 46px !important;
        max-height: 50px !important;
    }
}

@media screen and (max-width: 960px) {
    .casa-header-logo-img img,
    figure.casa-header-logo-img img {
        height: 42px !important;
        max-height: 46px !important;
    }
}

/* ==========================================================================
   74. HEADER LOGO CLICKABLE HOME LINK & CURSOR POINTER
   ========================================================================== */

.casa-header-brand,
.casa-header-logo-img,
.casa-header-logo-img a,
.casa-header-logo-img img,
figure.casa-header-logo-img,
figure.casa-header-logo-img a,
figure.casa-header-logo-img img {
    cursor: pointer !important;
}

/* ==========================================================================
   75. TIMELINE RESTORATION & FLAWLESS HIGH-END SCROLL REVEAL (NO BLANKS)
   ========================================================================== */

/* 1. Complete Restoration of Timeline "Le Fil d'une Journée" */
.casa-timeline-wrap {
    position: relative !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

.casa-timeline-row,
.wp-block-group.casa-timeline-row {
    display: grid !important;
    grid-template-columns: 34% 66% !important;
    align-items: start !important;
    margin-bottom: 5rem !important;
    position: relative !important;
    text-align: left !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

.casa-timeline-row:last-child {
    margin-bottom: 0 !important;
}

/* Timeline Left Time Column (Le matin, L'après-midi, À toute heure) */
.casa-timeline-time,
.casa-timeline-row p.casa-timeline-time,
p.casa-timeline-time {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 2.9rem !important;
    font-weight: 400 !important;
    color: #7C3B30 !important;
    text-align: right !important;
    padding: 0 2.2rem 0 0 !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    display: block !important;
}

/* Timeline Right Content Column (Headings & Descriptions) */
.casa-timeline-content,
.casa-timeline-row .casa-timeline-content {
    padding-left: 3rem !important;
    box-sizing: border-box !important;
    text-align: left !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    display: block !important;
}

.casa-timeline-heading,
.casa-timeline-content h3.casa-timeline-heading {
    font-family: var(--font-serif) !important;
    font-style: italic !important;
    font-size: 2.6rem !important;
    font-weight: 400 !important;
    color: var(--color-text, #421F19) !important;
    line-height: 1.2 !important;
    margin: 0 0 1.1rem 0 !important;
    letter-spacing: 0.01em !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    display: block !important;
}

.casa-timeline-desc,
.casa-timeline-content p.casa-timeline-desc {
    font-family: var(--font-primary) !important;
    font-size: 1.12rem !important;
    font-weight: 400 !important;
    color: var(--color-text, #421F19) !important;
    line-height: 1.75 !important;
    margin: 0 !important;
    max-width: 480px !important;
    letter-spacing: 0.01em !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    display: block !important;
}

/* Timeline Dot */
.casa-timeline-row::after {
    content: "" !important;
    position: absolute !important;
    left: 34% !important;
    top: 18px !important;
    width: 11px !important;
    height: 11px !important;
    background-color: #7C3B30 !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) scale(1) !important;
    z-index: 2 !important;
    opacity: 1 !important;
    display: block !important;
}

/* Timeline Line */
.casa-timeline-wrap::before,
.casa-timeline-line {
    content: "" !important;
    position: absolute !important;
    left: 34% !important;
    top: 15px !important;
    bottom: 25px !important;
    width: 1.5px !important;
    background-color: #7C3B30 !important;
    transform: translateX(-50%) !important;
    z-index: 1 !important;
    display: block !important;
}

/* Mobile Timeline Responsiveness */
@media screen and (max-width: 860px) {
    .casa-timeline-wrap::before,
    .casa-timeline-line {
        left: 16px !important;
    }

    .casa-timeline-row,
    .wp-block-group.casa-timeline-row {
        display: flex !important;
        flex-direction: column !important;
        padding-left: 45px !important;
        margin-bottom: 3.5rem !important;
    }

    .casa-timeline-row::after {
        left: 16px !important;
        top: 14px !important;
    }

    .casa-timeline-time,
    .casa-timeline-row p.casa-timeline-time {
        text-align: left !important;
        padding: 0 !important;
        font-size: 2.3rem !important;
        margin-bottom: 0.6rem !important;
    }

    .casa-timeline-content,
    .casa-timeline-row .casa-timeline-content {
        padding-left: 0 !important;
    }

    .casa-timeline-heading {
        font-size: 2rem !important;
    }

    .casa-timeline-desc {
        font-size: 1.05rem !important;
    }
}

/* ==========================================================================
   76. 100% NATIVE, FRICTIONLESS SCROLLING (ZERO JANK, ZERO BLOCKING)
   ========================================================================== */

/* Native browser scrolling without momentum fighting */
html {
    scroll-behavior: auto !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    height: auto !important;
}

body {
    overflow-x: clip !important;
    overflow-y: visible !important;
    height: auto !important;
    position: relative !important;
}

/* Outer layout containers MUST ALWAYS be in normal flow to guarantee zero layout collapse */
.casa-hero-section,
.casa-intro-section,
.casa-suite-row,
.casa-fullwidth-banner-section,
.casa-breakfast-section,
.casa-location-section,
.casa-story-section,
.casa-time-banner-section,
.casa-craft-banner-section,
.casa-day-section,
.casa-beyond-section,
.casa-services-cta-section,
.casa-reviews-section,
.casa-gallery-section-wrap,
.casa-gallery-break-banner,
.casa-suites-preview-section,
.casa-cta-banner-section {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* ==========================================================================
   77. LUXURY TIMELINE APPEARANCE ANIMATION ("UNE JOURNÉE À CASA MIMA")
   ========================================================================== */

/* The vertical line draws smoothly from top to bottom */
.casa-timeline-wrap.casa-timeline-animated::before,
.casa-timeline-wrap.casa-timeline-animated .casa-timeline-line {
    transform-origin: top center !important;
    transform: translateX(-50%) scaleY(0) !important;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: transform !important;
}

.casa-timeline-wrap.casa-timeline-animated.is-line-drawn::before,
.casa-timeline-wrap.casa-timeline-animated.is-line-drawn .casa-timeline-line {
    transform: translateX(-50%) scaleY(1) !important;
}

/* Timeline rows: start gently offset and float up with silky cinematic fade */
.casa-timeline-wrap.casa-timeline-animated .casa-timeline-row {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: opacity, transform !important;
}

.casa-timeline-wrap.casa-timeline-animated .casa-timeline-row.is-inview {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
}

/* Timeline dot pops in with an elegant scale */
.casa-timeline-wrap.casa-timeline-animated .casa-timeline-row::after {
    transform: translate(-50%, -50%) scale(0) !important;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s !important;
}

.casa-timeline-wrap.casa-timeline-animated .casa-timeline-row.is-inview::after {
    transform: translate(-50%, -50%) scale(1) !important;
}

/* Timeline row stagger */
.casa-timeline-wrap.casa-timeline-animated .casa-timeline-row:nth-child(1) { transition-delay: 0.05s !important; }
.casa-timeline-wrap.casa-timeline-animated .casa-timeline-row:nth-child(2) { transition-delay: 0.20s !important; }
.casa-timeline-wrap.casa-timeline-animated .casa-timeline-row:nth-child(3) { transition-delay: 0.35s !important; }

.casa-timeline-wrap.casa-timeline-animated .casa-timeline-row:nth-child(1)::after { transition-delay: 0.15s !important; }
.casa-timeline-wrap.casa-timeline-animated .casa-timeline-row:nth-child(2)::after { transition-delay: 0.30s !important; }
.casa-timeline-wrap.casa-timeline-animated .casa-timeline-row:nth-child(3)::after { transition-delay: 0.45s !important; }

@media screen and (max-width: 860px) {
    .casa-timeline-wrap.casa-timeline-animated::before,
    .casa-timeline-wrap.casa-timeline-animated .casa-timeline-line {
        transform-origin: top center !important;
        transform: scaleY(0) !important;
    }

    .casa-timeline-wrap.casa-timeline-animated.is-line-drawn::before,
    .casa-timeline-wrap.casa-timeline-animated.is-line-drawn .casa-timeline-line {
        transform: scaleY(1) !important;
    }

    .casa-timeline-wrap.casa-timeline-animated .casa-timeline-row::after {
        transform: scale(0) !important;
    }

    .casa-timeline-wrap.casa-timeline-animated .casa-timeline-row.is-inview::after {
        transform: scale(1) !important;
    }
}

/* ==========================================================================
   78. SIGNATURE LUXURY SCROLL REVEAL (ALL PAGES: HOME, LE RIAD, SERVICES, GALERIE)
   ========================================================================== */

/* Elements waiting for scroll reveal - Soft, Velvet Smooth 0.8s Float */
.casa-reveal-item {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: opacity, transform !important;
}

/* Revealed active state */
.casa-reveal-item.is-revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
}

/* Stagger on Suite Cards (Home) */
.casa-suites-grid .casa-suite-card.casa-reveal-item:nth-child(2) { transition-delay: 0.12s !important; }
.casa-suites-grid .casa-suite-card.casa-reveal-item:nth-child(3) { transition-delay: 0.24s !important; }

/* Stagger on Services Grid (Home) */
.casa-services-grid .casa-service-item.casa-reveal-item:nth-child(2) { transition-delay: 0.10s !important; }
.casa-services-grid .casa-service-item.casa-reveal-item:nth-child(3) { transition-delay: 0.20s !important; }
.casa-services-grid .casa-service-item.casa-reveal-item:nth-child(4) { transition-delay: 0.30s !important; }

/* Stagger on Instagram Grid (Home) */
.casa-insta-strip .casa-insta-col.casa-reveal-item:nth-child(2) { transition-delay: 0.08s !important; }
.casa-insta-strip .casa-insta-col.casa-reveal-item:nth-child(3) { transition-delay: 0.16s !important; }
.casa-insta-strip .casa-insta-col.casa-reveal-item:nth-child(4) { transition-delay: 0.24s !important; }
.casa-insta-strip .casa-insta-col.casa-reveal-item:nth-child(5) { transition-delay: 0.32s !important; }
.casa-insta-strip .casa-insta-col.casa-reveal-item:nth-child(6) { transition-delay: 0.40s !important; }

/* Stagger on Reviews Grid (Le Riad) */
.casa-reviews-grid .casa-review-card.casa-reveal-item:nth-child(2) { transition-delay: 0.14s !important; }
.casa-reviews-grid .casa-review-card.casa-reveal-item:nth-child(3) { transition-delay: 0.28s !important; }

/* Stagger on Beyond Cards (Services) */
.casa-beyond-grid .casa-beyond-card.casa-reveal-item:nth-child(2) { transition-delay: 0.14s !important; }
.casa-beyond-grid .casa-beyond-card.casa-reveal-item:nth-child(3) { transition-delay: 0.28s !important; }


/* Gallery Items Specificity & Silk Entrance (Galerie page) */
.casa-gallery-item,
figure.wp-block-image.casa-gallery-item,
.wp-block-image.casa-gallery-item {
    opacity: 1;
    transform: none;
    visibility: visible !important;
}

.casa-gallery-item.casa-reveal-item,
figure.wp-block-image.casa-gallery-item.casa-reveal-item {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: opacity, transform !important;
}

.casa-gallery-item.is-revealed,
.casa-gallery-item.casa-reveal-item.is-revealed,
figure.wp-block-image.casa-gallery-item.is-revealed,
figure.wp-block-image.casa-gallery-item.casa-reveal-item.is-revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
}

/* Stagger on Gallery Columns (Galerie) */
.casa-gallery-col:nth-child(2) .casa-gallery-item.casa-reveal-item { transition-delay: 0.12s !important; }
.casa-gallery-col:nth-child(3) .casa-gallery-item.casa-reveal-item { transition-delay: 0.24s !important; }

/* Stagger on Suites Preview (Galerie) */
.casa-suites-preview-grid .casa-suites-preview-item.casa-reveal-item:nth-child(2) { transition-delay: 0.14s !important; }
.casa-suites-preview-grid .casa-suites-preview-item.casa-reveal-item:nth-child(3) { transition-delay: 0.28s !important; }