/* ==========================================
   MASTER SERVICE TEMPLATE 
   50/50 Split Layout with Bleed Typography
   ========================================== */

.service-split-layout {
    display: flex;
    width: 100%;
    min-height: 100vh;
    background-color: var(--bg-surface);
}

/* --- THE STICKY LEFT COLUMN (IMAGES) --- */
.service-left {
    position: sticky;
    top: 0;
    width: 50vw;
    height: 100vh;
    overflow: hidden;
    flex-shrink: 0;
}

.sticky-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 3s ease-out;
    z-index: 1;
}

.sticky-bg.active {
    opacity: 1;
    transform: scale(1);
}

/* A slight dark gradient on the right edge of the image to ensure the bleed text pops */
.image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 60%, rgba(18, 18, 18, 0.8) 100%);
    z-index: 2;
}

/* --- THE SCROLLING RIGHT COLUMN (TEXT) --- */
.service-right {
    flex: 1;
    padding: 12rem 6rem 8rem 4rem; /* Top padding clears the navbar */
    position: relative;
    z-index: 3;
}

/* --- THE BLEED HEADING --- */
.heading-wrapper {
    position: relative;
    margin-bottom: 6rem;
}

.bleed-heading {
    font-size: clamp(4rem, 7vw, 6.5rem);
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.04em;
    
    /* The Bleed Mechanic */
    margin-left: -20vw; /* Pulls the text heavily over the left image */
    
    /* The Blend Mode Magic */
    color: #ffffff; 
    mix-blend-mode: difference; /* Inverts against whatever pixels are behind it */
    position: relative;
    z-index: 10;
}

/* Inherit the Playfair Display styling for consistency */
.bleed-heading .cursive-text {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 600;
}

.bleed-heading .gold-dot {
    color: #C89B3C;
    /* Prevent the gold from being inverted by the blend mode */
    mix-blend-mode: normal; 
}

/* --- CONTENT BLOCKS --- */
.content-block {
    margin-bottom: 8rem;
    max-width: 600px;
    opacity: 0.3; /* Dimmed by default */
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.content-block.in-view {
    opacity: 1; /* Brightens when scrolled into view */
    transform: translateY(0);
}

.content-block h2 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    font-weight: 500;
}

.content-block p {
    color: var(--text-secondary);
    font-size: 1.15rem;
    margin-bottom: 1.5rem;
}

.content-block ul {
    list-style: none;
    padding-left: 1.5rem;
    border-left: 2px solid #C89B3C;
    margin-top: 2rem;
}

.content-block ul li {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
}

/* --- SERVICE PAGE CTA BLOCK --- */
.service-cta {
    margin-top: 6rem;
    padding-top: 4rem;
    border-top: 1px solid rgba(5, 5, 5, 0.1); /* Subtle divider */
    position: relative;
    opacity: 0.3;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* The Matte Gold Anchor Line */
.service-cta::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 60px;
    height: 2px;
    background-color: #C89B3C;
}

.service-cta.in-view {
    opacity: 1;
    transform: translateY(0);
}

.service-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 3rem;
    border-radius: 50px;
    
    /* Swap hardcoded black/white for dynamic theme variables */
    border: 2px solid var(--text-primary);
    background: var(--text-primary);
    color: var(--bg-surface); 
    
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    margin-top: 1.5rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.service-cta-btn:hover {
    background: transparent;
    color: var(--text-primary); /* Ensures text stays visible on hover */
}

/* --- Process Flow Header --- */
.process-flow-header {
    position: relative;
    z-index: 2; /* Ensures it sits above the dark overlay */
    text-align: center;
    margin-bottom: 4rem; /* Adds breathing room between the heading and the 4 blocks */
}

.process-flow-header h2 {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    color: #ffffff;
    font-weight: 500;
}

.process-flow-header .gold-dot {
    color: #C89B3C;
}

/* --- Process Flow Background & Container --- */
.process-flow-section {
    position: relative;
    width: 100%;
    padding: 6rem 5%;
    
    /* FIX 1: Updated path to be relative to the CSS folder */
    background-image: url('../assets/Process-Background.webp'); 
    
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #ffffff;
    z-index: 10;
}

.process-flow-overlay {
    position: absolute;
    inset: 0;
    background: rgba(18, 18, 18, 0.85);
    z-index: 1;
}

.process-flow-container {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    
    /* FIX 2: Changed to 'stretch' so all boxes match the height of the tallest one */
    align-items: stretch; 
    
    justify-content: space-between;
    gap: 1rem;
}

/* --- The 4 Blocks --- */
.process-step {
    flex: 1;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.05);
    
    /* FIX 3: Solid gold border all the way around */
    border: 2px solid #C89B3C; 
    
    border-radius: 8px;
    backdrop-filter: blur(4px);
}

.process-step h3 {
    font-size: 1.6rem;
    color: #C89B3C;
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
    font-style: italic;
}

.process-step p {
    font-size: 1.05rem;
    line-height: 1.5;
    color: #e0e0e0;
}

/* --- Arrows --- */
.process-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C89B3C;
    font-size: 1.5rem;
    margin-top: 3rem; 
    
    /* Ensures the arrows stay aligned with the headers even when the boxes stretch */
    align-self: flex-start; 
}

.process-arrow.mobile-arrow {
    display: none;
}

/* --- New Global CTA --- */
.global-cta-section {
    background-color: var(--bg-surface);
    padding: 8rem 5%; /* This adds the massive breathing room above and below */
    text-align: center; /* This centers all the text */
    position: relative;
}

.global-cta-content {
    max-width: 800px;
    margin: 0 auto; /* This centers the container itself */
    display: flex;
    flex-direction: column;
    align-items: center; /* Ensures the button centers perfectly too */
}

.global-cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    font-weight: 500;
}

.global-cta-content p {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

/* ==========================================
   MOBILE TRANSLATION (STACKED VIEW)
   ========================================== */
@media (max-width: 768px) {
    /* --- 50/50 Split becomes stacked --- */
    .service-split-layout {
        flex-direction: column;
    }

    .service-left {
        position: relative;
        width: 100%;
        height: 50vh; /* Shorter hero image on mobile */
    }

    .image-overlay {
        /* Change gradient to fade vertically into the content background */
        background: linear-gradient(to bottom, transparent 50%, var(--bg-surface) 100%);
    }

    .service-right {
        width: 100%;
        padding: 3rem 5%;
    }

    .heading-wrapper {
        margin-top: -6rem; /* Pulls heading up over the bottom edge of the image */
        margin-bottom: 3rem;
    }

    .bleed-heading {
        margin-left: 0; /* Reset the extreme left pull */
        
        /* NEW ADDITIONS: Force long words to break onto the next line */
        overflow-wrap: break-word;
        word-wrap: break-word;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
    
    .content-block {
        opacity: 1; /* Keep fully visible on mobile */
        transform: none;
        margin-bottom: 4rem;
    }
}
    /* --- Process Flow Mobile Fixes --- */

    @media (max-width: 768px) {
    /* 1. Set the section to Grid to manage overlapping layers */
    .process-flow-section {
        display: grid;
        grid-template-rows: auto auto; /* Explicit rows for header and content */
        padding: 0 !important; /* Fixes the black line gap at the top */
        background-image: none !important; 
    }

    /* 2. Span the background across the entire grid and stick to top */
    .process-flow-overlay {
        grid-column: 1 / -1;
        grid-row: 1 / 3; /* Spans across both row 1 and row 2 */
        align-self: start; /* CRUCIAL: Allows sticky to work inside a grid track */
        position: sticky;
        top: 0;
        height: 100vh;
        width: 100%;
        background-image: url('../assets/Process-Background.webp');
        background-size: cover;
        background-position: center;
        z-index: 0;
        margin-bottom: 0; /* Removes the old negative margin hack */
    }

    /* 3. Ensure the dark tint remains */
    .process-flow-overlay::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(18, 18, 18, 0.85);
    }

    /* 4. Place the header over the background in Row 1 */
    .process-flow-header {
        grid-column: 1 / -1;
        grid-row: 1; 
        position: relative;
        z-index: 2;
        padding-top: 4rem; /* Restores the breathing room at the top */
    }

    /* 5. Place the stacked boxes over the background in Row 2 */
    .process-flow-container {
        grid-column: 1 / -1;
        grid-row: 2; 
        position: relative;
        z-index: 2;
        padding-bottom: 4rem; /* Restores breathing room at the bottom */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    /* 6. Process Steps (Retaining your 80% width settings) */
    .process-step {
        width: 80%;
        margin: 0 auto;
        border-radius: 8px;
        border: 2px solid #C89B3C;
        padding: 2.5rem 2rem;
        background: rgba(25, 25, 25, 0.5);
        backdrop-filter: blur(8px);
    }

    /* 7. Arrow Management */
    .process-arrow.desktop-arrow {
        display: none !important;
    }

    .process-arrow.mobile-arrow {
        display: flex !important;
        margin: 0;
        padding: 1.5rem 0;
        align-self: center;
    }
}