/*
======================================================
3. 50/50 HERO (PLAIN WHITE LEFT, IMAGE RIGHT)
======================================================
*/

/* --- EDITED: Set background to light gray to make cards stand out --- */
.hero-new {
    padding: 4rem 5%; 
    min-height: calc(90vh - 100px);
    display: flex;
    align-items: center;
    background: var(--bg-light-gray); /* Changed from white to make cards visible */
}

/* --- EDITED: Gap reduced --- */
.hero-new-container {
    max-width: 1800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50/50 split */
    align-items: stretch; /* Make cards equal height */
    gap: 1.5rem; /* <<< EDITED: Reduced gap from 4rem. Set to 0 for no gap. */
}

/* --- EDITED: Added card styles to the left text block --- */
.hero-text-content {
    background: var(--bg-white); /* Card background */
    padding: 2.5rem;
    border-radius: 24px; /* Match the image's radius */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05); /* Softer shadow */
    border: 1px solid var(--border-gray);
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    
    /* --- NEW: Animation --- */
    animation: fadeInUp 0.7s ease-out 0.1s forwards;
    opacity: 0; /* Start hidden for animation */
}

.hero-text-content h1 {
    font-size: clamp(3rem, 6vw, 4.5rem);
    line-height: 1.1;
    font-weight: 900;
    margin-bottom: 0.5rem;
}

.hero-text-content .hero-tagline {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--primary-accent-dark); /* <<< CHANGED TO THEME COLOR */
    margin-bottom: 1.5rem;
}

/* --- 3. NEW: Header for hero services list --- */
.hero-text-content .services-header {
    font-size: 1.25rem; /* <<< 1. INCREASED FONT SIZE */
    font-weight: 900;
    color: var(--primary-accent-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

/* MULTI-COLOR SERVICES LIST (Hero H3) */
.hero-services-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2.5rem; /* <<< 2. INCREASED GAP */
}

/* --- EDITED: Styles for service tags --- */
.hero-services-list span {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 50px; /* Rounded */
    
    /* Your requested changes: */
    background: none; /* No background */
    border: 2px solid var(--primary-accent-dark); /* Theme (orange) border */
    color: var(--text-dark); /* Black text */

    /* --- NEW: Transitions and container styles for blade --- */
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative; /* To contain the animated blade */
    overflow: hidden;   /* To clip the blade as it moves */
}

/* --- NEW: The animated "blade" element --- */
.hero-services-list span::before {
    content: '';
    position: absolute;
    top: -50%; /* Positioned to sweep across the middle */
    left: 0;
    
    /* <<< EDITED: Reduced line size (from 30px) */
    width: 15px; 
    
    height: 200%; /* Tall enough to cover diagonally */
    
    /* The blade's appearance (orange, glowing) */
    background: var(--primary-accent-dark);
    opacity: 0; /* Starts invisible */
    
    /* <<< EDITED: Reduced glow to match new size */
    box-shadow: 0 0 8px 3px var(--primary-accent-dark); 
    
    /* Diagonal angle (like "/") */
    transform: rotate(25deg); 
    
    /* --- APPLY THE NEW ANIMATION --- */
    
    /* <<< EDITED: Slowed down (from 2.5s) */
    animation: sweepBlade 4.5s infinite; 
    
    animation-timing-function: ease-in-out;
}

/* --- On hover, fill the service tag --- */
.hero-services-list span:hover {
  background: var(--primary-accent-dark);
  color: var(--bg-white, #ffffff); /* Fallback to white */
  cursor: default; /* Show it's not a link */
}

/* --- UPDATED: Stagger the *blade* animation --- */
.hero-services-list span:nth-child(1)::before {
  animation-delay: 0.0s;
}
.hero-services-list span:nth-child(2)::before {
  animation-delay: 0.2s;
}
.hero-services-list span:nth-child(3)::before {
  animation-delay: 0.4s;
}
.hero-services-list span:nth-child(4)::before {
  animation-delay: 0.6s;
}
.hero-services-list span:nth-child(5)::before {
  animation-delay: 0.8s;
}
.hero-services-list span:nth-child(6)::before {
  animation-delay: 1.0s;
}


.hero-text-content .hero-statement {
    font-size: 1.2rem;
    color: var(--text-gray);
    margin-bottom: 2.5rem;
    max-width: 550px;
    font-weight: 400;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
}

/* --- 3. NEW: Reduce button size in hero --- */
.hero-buttons .btn {
    padding: 0.75rem 1.5rem; 
    font-size: 0.95rem;    
    
    /* --- NEW: Hover transition --- */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

/* --- NEW: Add a "lift" effect on button hover --- */
.hero-buttons .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
}


/* HERO RIGHT SIDE: IMAGE */
.hero-visual-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    /* --- NEW: Animation --- */
    animation: fadeInUp 0.7s ease-out 0.3s forwards;
    opacity: 0; /* Start hidden for animation */
}

/* --- EDITED: Added border to the image "card" --- */
.hero-visual-content .hero-main-image {
    width: 100%;
    height: 100%;
    min-height: 700px; /* <<< Card height adjustment */
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-gray); /* Added border */
}

@media (max-width: 900px) {
    .hero-new-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.5rem; /* <<< EDITED: Matched gap for mobile */
    }
    .hero-text-content p {
        margin-left: auto;
        margin-right: auto;
    }
    .hero-services-list {
        justify-content: center;
    }
    .hero-buttons {
        justify-content: center;
    }
    .hero-visual-content {
        margin-top: 0; /* <<< EDITED: Removed top margin */
        grid-row: 1; /* Image on top on mobile */
    }
    .hero-visual-content .hero-main-image {
        min-height: 400px;
    }
    
    /* --- NEW: Reverse animation order for mobile --- */
    /* Animate image first (since it's on top) */
    .hero-visual-content {
      animation-delay: 0.1s;
    }
    /* Animate text second */
    .hero-text-content {
      animation-delay: 0.3s;
    }
}

@media (max-width: 600px) {
    .hero-text-content {
        padding: 1.5rem;
    }
    .hero-text-content h1 { font-size: 2.5rem; }
    .hero-text-content .hero-tagline { font-size: 1.5rem; }
    .hero-text-content .hero-statement { font-size: 1.1rem; }
    .hero-buttons { flex-direction: column; }
}


/*
======================================================
NEW: ANIMATION KEYFRAMES
======================================================
*/

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sweepBlade {
  0% {
    /* Start off-screen to the left */
    transform: translateX(-60px) rotate(25deg);
    opacity: 0;
  }
  20% {
    /* Fade in as it enters the tag */
    opacity: 0.6; /* Lowered opacity for a subtler glow */
  }
  80% {
    /* Stay visible as it sweeps */
    opacity: 0.6;
  }
  100% {
    /* Move fully off-screen to the right and fade out */
    transform: translateX(200px) rotate(25deg);
    opacity: 0;
  }
}