/* --- AUTO-COLLAPSE FIX --- */

/* Ensure the open menu is always on top of the other contact links */
.concierge-menu[open] {
    z-index: 9999;
}

/* Hide the menu pointer when the menu is closed to prevent 'ghost clicks' */
.concierge-menu:not([open]) .concierge-options {
    display: none;
}







/* --- REFINED SINGLE-SURFACE CONTEXT MENU --- */
.concierge-options {
    position: absolute;
    bottom: 140%; /* Space above the contact link */
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    z-index: 1000;
    
    /* The Single Surface */
    background: rgba(255, 255, 255, 0.98); 
    backdrop-filter: blur(10px); /* Premium frosted glass effect */
    padding: 8px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.05);
    
    display: flex;
    flex-direction: column;
    gap: 0; /* Remove gaps between items */
}

/* Individual menu items */
.concierge-options a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    color: var(--black) !important;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 12px;
    transition: background 0.2s ease;
}

/* Add a subtle divider between links, but not after the last one */
.concierge-options a:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,0.04);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.concierge-options a:not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.concierge-options a:hover {
    background: #f4f4f4;
    color: var(--primary) !important;
}

/* The Menu Pointer (Small arrow) */
.concierge-options::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.98);
}





/* =========================================
   VARIABLES & CONTROL CENTER
   ========================================= */
:root {
    --primary: #1a785b;
    --black: #000000;
    --white: #ffffff;
    --gray-bg: #f9f9f9; /* Distinct color for In-House section */
    
    /* THE CONTROLS YOU ASKED FOR */
    --section-spacing: 2rem;      /* Reduce this to 3rem to tighten spacing even more */
    --header-label-size: 1.3rem;    /* Massive sizes for 'Connect', 'Partners', etc. */
    --logo-height: 250px;         /* Control your logo size here */
    
    --transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- GLOBAL RESET --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'DM Sans', sans-serif;
    background-color: var(--white);
    color: var(--black);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container { width: min(1200px, 92%); margin: 0 auto; }

/* --- TITLES / LABELS --- */
.eyebrow { 
    text-transform: none; 
    letter-spacing: 0.05em; 
    font-size: var(--header-label-size); 
    font-weight: 800; 
    color: var(--primary); 
    display: block; 
    margin-bottom: 1.5rem; 
}

/* --- NAVIGATION --- */
.nav { 
    padding: 3rem 0; 
    display: flex; 
    justify-content: center; 
}
.logo img { 
    height: var(--logo-height); 
    width: auto; 
    object-fit: contain; 
}

/* --- HERO --- */
.hero { padding: 2rem 0 4rem; text-align: center; }
.hero h1 { 
    font-size: clamp(2.5rem, 8vw, 5rem); 
    font-weight: 800; 
    line-height: 1.1; 
    letter-spacing: -0.03em; 
    margin-bottom: 2rem; 
}
.hero h1 em { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400; }

/* --- CLIENT GRID (Fixed 3-Column Layout) --- */
.client-section { padding: var(--section-spacing) 0; }
.client-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 2rem; 
    max-width: 1100px; 
    margin: 0 auto;
}

.client-card {
    background: #f4f4f4; 
    text-decoration: none; 
    color: inherit;
    transition: var(--transition); 
    border-radius: 4px; 
    overflow: hidden;
    display: flex; 
    flex-direction: column;
}
.client-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.client-img { width: 100%; height: 220px; object-fit: cover; }

/* Mobile fallback for client list */
@media (max-width: 900px) {
    .client-grid { grid-template-columns: 1fr; }
    .editorial-layout { grid-template-columns: 1fr; }
}

/* --- LEGAL DROPDOWNS --- */
summary::-webkit-details-marker { display: none; }
summary:after { content: '+'; float: right; color: var(--primary); font-weight: 400; }
details[open] summary:after { content: '−'; }






/* --- CONNECT SECTION REDESIGN --- */
.footer-connect {
    padding: var(--section-spacing) 0;
    text-align: center;
}

.connect-grid {
    display: flex;
    flex-direction: column; /* Stacks the three main items */
    align-items: center;
    gap: 2.5rem; /* Equal spacing between the three items */
    margin-bottom: 4rem;
}

.connect-item {
    font-size: 2.2rem; /* Uniform size for all three */
    color: var(--black);
    text-decoration: none;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px; /* Space between SVG and text */
}

.insta-link { color: var(--primary); }
.phone-text { color: var(--black); }







/* =========================================
   REFINED MOBILE VIEW (MAX-WIDTH: 900px)
   Editorial Minimalist Strategy
   ========================================= */

@media (max-width: 900px) {
    /* 1. Global Layout & Spacing */
    :root {
        --section-spacing: 4rem; /* Balanced breathing room between sections */
    }

    .container {
        width: 100% !important;
        padding: 0 10% !important; /* The 10% Gold Standard for Mobile */
    }

    /* 2. Header & Hero Refinement */
  /* --- MOBILE LOGO CONTROL --- */
.nav { 
    padding: 0.5rem 0 !important; /* Tightens the space around the logo on phones */
}

.logo img { 
    /* INCREASE THIS NUMBER TO MAKE THE LOGO BIGGER */
    /* DECREASE THIS NUMBER TO MAKE THE LOGO SMALLER */
    height: 200px !important; 
    
    width: auto !important; 
    object-fit: contain !important;
}

    .hero {
        padding: 0rem 0 3rem !important;
    }

    .hero h1 {
        font-size: 2.2rem !important; /* Scaled for mobile readability */
        line-height: 1.2;
    }

    /* 3. Exclusive Partners: Horizontal Scroll & Curvy Corners */
    .client-grid {
        display: flex !important;
        flex-direction: row !important; /* Forces cards into one row */
        overflow-x: auto !important;    /* Enables horizontal scrolling */
        scroll-snap-type: x mandatory;  /* Premium 'snap' feel when scrolling */
        gap: 1.5rem !important;
        padding: 0 10% 2rem 10% !important; /* Side padding so cards align with text */
        margin: 0 -10% !important;      /* Bleeds to screen edges for better scroll UX */
        -webkit-overflow-scrolling: touch; 
    }

    /* Hide ugly scrollbars for the 'Minimalist' look */
    .client-grid::-webkit-scrollbar { display: none; }

    .client-card {
        flex: 0 0 82% !important; /* Card width: 82% ensures the next card 'peeks' in */
        scroll-snap-align: center;
        
        /* --- CORNER RADIUS CONTROL --- */
        border-radius: 45px !important; 
        /* ----------------------------- */
        
        height: auto !important;
        background: #f4f4f4 !important;
    }

    .client-img {
        height: 220px !important;
        object-fit: cover !important;
        
        /* Match the card's top corners */
        border-radius: 45px 45px 0 0 !important; 
    }

   .client-card div {
        /* TOP | RIGHT | BOTTOM | LEFT */
        padding: 1.5rem 1.5rem 1.2rem 1.5rem !important; 
    }

    /* 4. Strategic Intent: Final Stack & Alignment Fix */
    section[style*="background: var(--black)"] .container {
        display: flex !important;
        flex-direction: column !important; /* Forces the vertical stack */
        gap: 0 !important; /* Removes the 'void' gap between image and text */
        padding: 0 !important;
        max-width: 100% !important;
    }

    /* Target the Profile Image Container */
    section[style*="background: var(--black)"] .container > div:first-child {
        height: 350px !important; /* Fixed mobile height */
        width: 100% !important;
        order: -1 !important; /* Ensures image is on TOP */
        border-radius: 0 !important;
    }

    /* Target the Text Container */
    section[style*="background: var(--black)"] .container > div:last-child {
        width: 100% !important;
        /* --- CONTROL PADDING HERE --- */
        padding: 3rem 10% 4rem 10% !important; 
        
        /* --- CONTROL ALIGNMENT HERE (center, left, or justify) --- */
        text-align: center !important; 
    }

    section[style*="background: var(--black)"] h2 {
        font-size: 2.2rem !important;
        margin-bottom: 1.5rem !important;
        text-align: inherit !important; /* Follows parent alignment */
    }

    section[style*="background: var(--black)"] .eyebrow {
        text-align: inherit !important;
        width: 100% !important;
        display: block !important;
    }

    /* 5. reAlive Co. Card: Proportional & Clean */
    section[style*="background: var(--white)"] .container[style*="max-width: 940px"] {
        padding: 0 10% !important;
    }

    section a.client-card img[style*="height: 480px"] {
        height: 250px !important; /* Scaled to match partner cards */
        border-radius: 20px 20px 0 0 !important;
    }

    section a.client-card div[style*="padding: 4.5rem"] {
        padding: 2rem 1.5rem !important; /* Removed 'empty bucket' padding */
    }

    /* 6. Footer & Connect Refinement - One Line Fix */
    .connect-item {
        /* Adjusted from 1.4rem to 1.15rem to fit iPhone 14 width */
        font-size: 1.15rem !important; 
        
        white-space: nowrap !important; /* Prevents text from ever breaking into two lines */
        word-break: normal !important;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .connect-grid {
        gap: 2rem !important; /* Slightly tighter vertical spacing */
    }

    .footer-connect .eyebrow {
        margin-bottom: 2rem !important;
    }

    summary {
        font-size: 0.75rem !important;
    }

    /* Consistency Fix: Ensure all eyebrows are centered or left-aligned properly */
    .eyebrow {
        text-align: center !important;
        font-size: 1rem !important;
    }
}

/* --- SECTION SPACING: CLIENT GRID --- */
    .client-section {
        /* TOP | BOTTOM */
        padding: 1rem 0 2rem 0 !important; 
    }

    /* Tighten the gap specifically between the title and the scrollable cards */
    .client-section .eyebrow {
        margin-bottom: 1rem !important;
    }





/* --- MOBILE CONTEXT MENU (FLOATING) --- */
    .concierge-menu {
        width: 100% !important;
        position: relative !important;
    }

    .concierge-options {
        /* Prevents the floating menu from being wider than the phone screen */
        width: 85vw !important; 
        max-width: 300px !important;
        
        /* Positioning it above the link */
        bottom: 115% !important; 
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .concierge-options a {
        font-size: 1rem !important;
        padding: 1.2rem !important; /* Larger 'tap' area for thumbs */
        width: 100% !important;
        display: block !important;
    }

    .connect-item {
        font-size: 1.4rem !important;
        justify-content: center !important;
    }




    /* --- REALIVE BUTTON STYLING --- */
:root {
    /* ADJUST THESE TO CHANGE SPACING */
    --btn-margin-top: 2.5rem;
    --btn-margin-bottom: 0rem;
}

.btn-subtle {
    display: inline-block;
    margin-top: var(--btn-margin-top);
    margin-bottom: var(--btn-margin-bottom);
    padding: 12px 28px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--black);
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 50px;
    transition: var(--transition);
}

/* Hover effect to match the primary brand color */
.client-card:hover .btn-subtle {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

/* Mobile specific adjustment */
@media (max-width: 900px) {
    .realive-content {
        padding: 2rem 1.5rem !important; /* Matches your existing mobile override */
    }
    
    .btn-subtle {
        font-size: 0.8rem;
        padding: 10px 10px;
        margin-top: 1.5rem; /* Tighter spacing for mobile */
    }
}