/* =========================================
   PROCESS PAGE STYLES
   ========================================= */
/* 1. HERO SECTION */
.process-hero {
    height: 60vh;
    background:  no-repeat center center;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-attachment: fixed;
    width: 100%; /* Added: Ensures width is strictly 100% */
    overflow: hidden; /* Added: Cuts off any child overflow */
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), #050505);
}

.hero-text { position: relative; z-index: 2; }

.hero-text h1 {
    font-size: 4rem; margin-bottom: 10px;
    text-shadow: 0 5px 15px rgba(0,0,0,0.8);
}

.gold-line {
    width: 80px; height: 3px; 
    background: var(--primary-gold); margin: 20px auto;
}

/* 2. STORY TEXT */
.story-text {
    text-align: center; margin: 60px 0; padding: 0 20px;
}

.reveal-line {
    font-size: 1.4rem; color: var(--text-light); margin-bottom: 15px;
    opacity: 0; transform: translateY(30px); transition: all 1s ease;
}
.reveal-line.visible { opacity: 1; transform: translateY(0); }

/* 3. STEP SECTIONS */
.process-step-section {
    padding: 60px 5%;
    background: var(--bg-color);
    width: 100%;  /* Safety Check */
    overflow: hidden; /* Safety Check for animations */
}

.step-content { padding: 20px; }

.step-number {
    color: var(--primary-gold); font-size: 5rem; opacity: 0.3;
    margin-bottom: -25px; line-height: 1; font-family: 'Cinzel', serif;
}

.step-title {
    font-family: 'Cinzel', serif; font-size: 2rem;
    margin-bottom: 20px; color: var(--primary-gold);
}

.step-desc {
    font-size: 1.1rem; color: #ccc; line-height: 1.8;
}

/* 4. IMAGES */
.step-image-wrapper {
    position: relative;
    height: 400px;
    width: 100%;
}

.step-img {
    width: 100%; height: 100%; object-fit: cover;
    border: 1px solid #C5A059;
    display: block;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.6s ease;
}

.step-image-wrapper:hover .step-img { transform: scale(1.03); }

/* 5. RESPONSIVE */
@media (min-width: 769px) {
    .swap-desktop .step-content { order: 2; }
    .swap-desktop .step-image-wrapper { order: 1; }
}

@media (max-width: 768px) {
    /* FIX: Reduced height to 40vh so the image isn't zoomed in too much */
    .process-hero { 
        height: 40vh; 
        background-attachment: scroll;
        background-position: center center;
        background-size: cover; /* Added explicit cover for mobile */
    }
    .hero-text h1 { font-size: 2.5rem; }
    
    .process-step-section { padding: 40px 5%; }
    .step-image-wrapper { height: 300px; }
    .step-number { font-size: 4rem; }
    .grid-2 { display: flex; flex-direction: column; gap: 30px; }
    .step-content { text-align: center; padding: 0; }
}