/* =========================================
   1. PAGE OVERRIDES
   ========================================= */
body { 
    background-color: var(--bg-cream); 
    font-family: 'Lato', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden; 
    padding-top: 0 !important; /* snap to top */
    margin: 0;
}

h1, h2, h3, h4 { 
    color: var(--primary-red); 
    font-family: 'Playfair Display', serif; 
    font-weight: 700; 
}

/* =========================================
   2. HERO & CTA SNAP-TO
   ========================================= */
.page-hero {
    position: relative;
    height: 450px; /* Shorter than the homepage hero */
    background-image: url('images/hero_contactus.png'); /* You can change this image */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero-bg-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Darkens image slightly for text contrast */
    z-index: 1;
}

.hero-title-container {
    position: relative;
    z-index: 2;
    color: white;
}

.page-title {
    font-family: 'Playfair Display', serif;
    font-size: 4.5rem;
    letter-spacing: 5px;
    margin: 10px 0;
    color: white !important;
}

.italic-red {
    font-style: italic;
    color: var(--primary-red);
}

.title-divider {
    width: 80px;
    height: 3px;
    background: var(--accent-gold);
    margin: 20px auto;
}

.hero-subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 1px;
    opacity: 0.9;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .page-hero { height: 350px; }
    .page-title { font-size: 3rem; }
}


.cta-strip {
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--primary-red) 100%);
    padding: 10px 20px;
    text-align: center; 
    color: white; 
    position: relative;
    box-shadow: 0 10px 40px rgba(86, 3, 25, 0.3);
    margin-top: 0 !important; /* Snaps sections together */
    display: block;
    z-index: 2;
}

.cta-text {
    font-family: 'Playfair Display', serif; 
    font-style: italic;
    font-size: 2rem; 
    margin-bottom: 20px; 
    color: white !important;
}

.btn-white {
    background-color: white; 
    color: var(--burgundy);
    padding: 12px 40px; 
    text-decoration: none; 
    font-weight: 700;
    text-transform: uppercase; 
    letter-spacing: 2px; 
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-white:hover {
    background-color: transparent; 
    color: white; 
    border: 1px solid white;
    transform: translateY(-3px);
}

/* =========================================
   3. ENQUIRY GRID (SIDE-BY-SIDE)
   ========================================= */
.enquiry-section {
    padding: 100px 5%;
    background-color: var(--bg-cream);
}

.enquiry-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.6fr; /* Side-by-side split */
    gap: 80px;
    align-items: start;
}

.paris-title {
    font-size: 2.5rem;
    margin-bottom: 50px;
    letter-spacing: 2px;
    position: relative;
}

.paris-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--primary-red);
}

.contact-item {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
}

.method-tag {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-dark);
    opacity: 0.7;
    margin-bottom: 5px;
}

.method-val {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-red);
    text-decoration: none;
    transition: 0.3s;
}

.method-val-ws{
    font-size: 1.4rem;
    font-weight: 700;
    color: green;
    text-decoration: none;
    transition: 0.3s;
}

/* =========================================
   4. REAL SOCIAL BUBBLES (FILLED STYLE)
   ========================================= */
.social-list-flex {
    display: flex;
    gap: 15px;
    align-items: center;
}

.real-social-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Slightly stronger shadow for depth */
    text-decoration: none;
    font-size: 1.3rem;
    transition: all 0.3s ease;
    
    /* FORCE WHITE ICON inside the color bubble */
    color: #ffffff !important; 
}

/* --- BRAND COLORS --- */

/* Instagram: The official gradient */
.insta-bg { 
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

/* Facebook: Official Blue */
.fb-bg { 
    background-color: #1877F2; 
}

/* TikTok: Official Black */
.tiktok-bg { 
    background-color: #000000; 
}

/* Xiaohongshu: Official Red */
.xhs-official { 
    background-color: #FF2442; 
}

/* HOVER EFFECT: Pop up */
.real-social-icon:hover {
    transform: translateY(-8px) scale(1.1);
    box-shadow: 0 10px 20px var(--primary-red);
}

/* =========================================
   5. TALLY EMBED WRAPPER
   ========================================= */
.tally-embed-container {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(211, 72, 54, 0.05);
}

/* =========================================
   6. LOCATION GRID REDESIGN
   ========================================= */
.location-luxury-section {
    padding: 100px 5%;
    background-color: #ffffff !important;
    position: relative;
    z-index: 1;
}

.luxury-container {
    max-width: 1300px;
    margin: 0 auto;
}

/* Header Styling */
.luxury-header {
    text-align: center;
    margin-bottom: 80px;
}

.luxury-subtitle {
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.9rem;
    color: var(--text-light);
    display: block;
    margin-bottom: 10px;
}

.luxury-main-title {
    font-size: 3.5rem;
    color: var(--primary-red);
    margin-bottom: 20px;
}

.luxury-divider {
    width: 80px;
    height: 2px;
    background: var(--primary-red);
    margin: 0 auto;
}

/* Grid Layout */
.luxury-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 80px;
    align-items: center;
}

/* Map Wrapper */
.map-wrapper-premium {
    background: white;
    padding: 15px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
    border-radius: 4px;
    margin-bottom: 25px;
}

.luxury-action-bar {
    display: flex;
    gap: 20px;
}

/* Details Styling */
.info-block {
    margin-bottom: 50px;
}

.info-block h3 {
    font-size: 1.8rem;
    color: #000;
    margin-bottom: 20px;
    font-style: italic;
}

.hq-highlight {
    color: var(--primary-red);
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 8px;
}

/* Hours Grid */
.hours-grid {
    border-top: 1px solid rgba(0,0,0,0.1);
}

.hours-row {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.day-label {
    font-weight: 700;
    color: var(--text-dark);
}

.holiday .day-label {
    color: var(--primary-red); /* Highlight Public Holidays */
}

/* Luxury Buttons */
.luxury-btn {
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 18px 30px;
    display: inline-block;
    transition: all 0.3s ease;
    text-align: center;
}

.luxury-btn.outline {
    border: 1px solid var(--primary-red);
    color: var(--primary-red);
    flex: 1;
}

.luxury-btn.solid-red {
    background: var(--primary-red);
    color: white;
    width: 100%;
}

.luxury-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px #e25947;
}

/* Responsive */
@media (max-width: 1024px) {
    .luxury-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   7. REASONS BANNER (SECTION DIVIDER)
   ========================================= */
.reasons-banner-top {
    background-color: var(--primary-red); /* Strong red for division */
    padding: 10px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 !important; /* Creates space above and below the divider */
    box-shadow: 0 10px 30px rgba(211, 72, 54, 0.2);
    position: relative;
    z-index: 5;
}

.banner-text-wide {
    font-family: 'Playfair Display', serif;
    color: rgba(255, 255, 255, 0.95); /* Slightly muted white for elegance */
    font-size: 2.2rem;
    letter-spacing: 5px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 400;
}

.text-white-bold {
    color: #ffffff; /* Brighter white for emphasis */
    font-weight: 700;
    font-style: italic;
}

/* Ensure sections have a slight contrast */
.enquiry-section {
    background-color: var(--bg-cream); /* Cream background */
    padding-bottom: 80px;
}

.location-luxury-section {
    background-color: #ffffff !important; /* White background to divide further */
    padding-top: 100px;
}

/* =========================================
   7. LUXURY ASSIST BOX (BURGUNDY BACKGROUND)
   ========================================= */
.assist-section {
    /* YOUR REQUEST: Burgundy background */
    background-color: var(--burgundy); 
    
    /* Equal padding top/bottom so the box floats in the middle */
    padding: 60px 5%; 
    
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 5;
    
    /* Remove margins to snap to sections above/below */
    margin: 0 !important;
}

.assist-card {
    background: #ffffff; /* White box contrasts beautifully with Burgundy */
    max-width: 800px;
    width: 100%;
    padding: 40px 60px;
    
    /* Refined Border */
    border: 1px solid rgba(0, 0, 0, 0.05); 
    border-radius: 8px;
    
    /* Deep Shadow for depth */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    text-align: center;
    transition: transform 0.3s ease;
}

.assist-card:hover {
    transform: translateY(-5px);
}

.assist-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--primary-red);
    margin-bottom: 15px;
}

.assist-divider {
    width: 50px;
    height: 2px;
    background-color: var(--burgundy);
    margin: 0 auto 20px auto;
}

.assist-content p {
    font-family: 'Lato', sans-serif;
    font-size: 1.1rem;
    color: var(--text-dark);
    line-height: 1.6;
}

.assist-link {
    color: var(--primary-red);
    font-weight: 700;
    text-decoration: underline;
    transition: all 0.3s;
}

.assist-link:hover {
    color: var(--burgundy);
    background-color: rgba(211, 72, 54, 0.05); /* Subtle highlight on hover */
}

/* =========================================
   8. RESPONSIVE (TABLET & MOBILE)
   ========================================= */

/* --- TABLET (Screens smaller than 1024px) --- */
@media (max-width: 1024px) {
    .enquiry-wrapper {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }

    .luxury-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .contact-item { align-items: center; }
    .paris-title::after { left: 50%; transform: translateX(-50%); }
    .social-list-flex { justify-content: center; }
}

/* --- MOBILE (Screens smaller than 768px) --- */
@media (max-width: 768px) {
    
    /* 1. HERO & TEXT FIXES */
    .contact-hero { height: 350px; }
    .hero-content h1 { font-size: 2.2rem; }
    .paris-title, .luxury-main-title { font-size: 2rem; }
    
    /* 2. BURGUNDY ASSIST BOX FIX */
    .assist-section { padding: 40px 5%; }
    .assist-card { padding: 30px 20px; }
    
    /* 3. MAP OVERLAP FIX (CRITICAL) */
    .map-wrapper-premium {
        height: 350px; /* Set fixed height for the white box */
        margin-bottom: 30px; /* Push the buttons down so they don't touch */
        padding: 10px;
    }

    /* Force the Google Map to stay INSIDE the white box */
    .map-wrapper-premium iframe {
        width: 100% !important;
        height: 100% !important; /* This stops it from spilling out */
        border-radius: 4px;
    }

    /* 4. BUTTON STACKING */
    .luxury-action-bar {
        flex-direction: column;
        gap: 15px; /* Space between the two buttons */
        margin-top: 0;
    }

    .luxury-btn.outline {
        width: 100%;
        text-align: center;
        background-color: white; /* Ensures text is readable */
        z-index: 2;
    }
    
    /* 5. GENERAL PADDING */
    .enquiry-section, 
    .location-luxury-section {
        padding: 50px 5%;
    }
}

/* =========================================
   9. NO SIDE EFFECT TEXT (LUXURY FIX)
   ========================================= */
.text-divider-container {
    background-color: #ffffff;
    padding: 80px 5% 40px 5%; /* Adjusted padding for balance */
    text-align: center;
    position: relative;
    z-index: 2;
}

.luxury-quote {
    font-family: 'Lato', sans-serif; /* Clean Sans-Serif looks better for lists */
    font-size: 1.1rem; /* Smaller, punchier text */
    text-transform: uppercase; /* VOGUE style */
    letter-spacing: 3px; /* Wide spacing = Luxury */
    color: var(--primary-red);
    font-weight: 700;
    line-height: 2.5; /* More space between the two lines */
    max-width: 1200px;
    margin: 0 auto;
}

/* The Dots */
.divider-dot {
    color: var(--accent-gold); /* Gold or Light Red looks less harsh */
    font-size: 1rem;
    margin: 0 20px; /* More breathing room */
    vertical-align: middle;
}

/* The decorative line underneath */
.mini-separator {
    width: 60px;
    height: 1px;
    background-color: var(--primary-red);
    margin: 30px auto 0 auto;
    opacity: 0.5;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .desktop-break {
        display: none; /* Let it flow naturally on mobile */
    }
    
    .luxury-quote {
        font-size: 0.9rem;
        letter-spacing: 2px;
        line-height: 2;
    }
    
    .divider-dot {
        display: none; /* Hide dots on mobile */
    }
    
    /* Stack items cleanly on phone */
    .luxury-quote {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

/* =========================================
   3.6. PREMIUM BENEFITS BANNER
   ========================================= */
.benefits-banner {
    background-color: var(--bg-cream); /* Soft luxury background */
    padding: 35px 5%;
    border-top: 1px solid rgba(212, 163, 115, 0.2); /* Subtle gold border */
    border-bottom: 1px solid rgba(212, 163, 115, 0.2);
}

.benefits-container {
    display: flex;
    justify-content: space-between; /* Spreads items evenly */
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: wrap; /* Allows stacking on mobile */
    gap: 20px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}

.benefit-icon {
    font-size: 1.2rem;
    color: var(--burgundy); /* Gold icons for luxury feel */
}

.benefit-text {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--burgundy); 
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* The vertical gold lines between items */
.benefit-divider {
    width: 1px;
    height: 25px;
    background-color: var(--burgundy);
    opacity: 0.5;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .benefit-divider { display: none; } /* Hide lines on tablet/mobile */
    .benefits-container {
        justify-content: center; /* Center items in a grid */
        gap: 30px;
    }
    .benefit-item {
        width: 45%; /* 2 items per row */
    }
}

@media (max-width: 600px) {
    .benefit-item {
        width: 100%; /* 1 item per row */
        justify-content: flex-start;
        padding-left: 20%;
    }
}

/* footer */
@media (max-width: 768px) {
    .brand-col {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centers the logo and text */
        text-align: center !important;
        margin-bottom: 30px;
    }

    .brand-desc {
        max-width: 280px; /* Keeps the text in a nice narrow block */
        margin: 0 auto !important; /* Centers the text block itself */
        color: #555555 !important;
        font-size: 0.95rem !important;
    }

    /* FIXING THE LOGO COLOR */
    .footer-logo-white {
        /* This filter turns the white logo into a dark burgundy/black 
           so it's clear on the white background */
        filter: brightness(0) saturate(100%) invert(18%) sepia(50%) saturate(3475%) hue-rotate(331deg) brightness(88%) contrast(100%) !important;
        max-width: 180px !important;
        margin-bottom: 15px !important;
    }
}