/* ============================================================
   1. VARIABLES & GLOBAL RESET
   ============================================================ */
:root {
    --primary-dark: #151d2d;
    --primary-orange: #EA4F1F; 
    --primary-blue: #4B5EC4; 
    --secondary-orange: #EAC1AD;
    --secondary-blue: #C0DEFF;
    --black-10: rgba(0, 0, 0, 0.1);    
    --dark-orange: #C43D15; 
    --light-blue: #DAEDF7;
    /* Added missing variables from your blobs */
    --primary-pink: #f8d7da;
    --primary-beige: #f5f5dc;
}  

body {
    color: var(--primary-dark);
    background-color: #fff;
    overflow-x: hidden; /* Prevents horizontal scroll from parallax */
}

/* ============================================================
   2. TYPOGRAPHY & HEADINGS
   ============================================================ */
.heading-style-h1-large {
    font-size: clamp(2.5rem, 8vw, 6rem); 
    font-weight: 700;    
    line-height: 1.1;    
    letter-spacing: -0.04em;
}

.heading-style-h2 {
    font-size: clamp(2rem, 6vw, 4.5rem); 
    font-weight: 600;
    line-height: 1.2;    
    letter-spacing: -0.02em;
}

.heading-style-h3 {
    font-size: clamp(1.8rem, 4vw, 3.5rem); 
    font-weight: 550;
    line-height: 1.3;    
    letter-spacing: -0.02em;
}

.heading-accent {  
    color: var(--primary-orange);
    opacity: 0.6;  
    font-weight: 550;
    letter-spacing: -1px;
}

.text-size-large { font-size: 1.5rem; line-height: 1.3; }
.text-size-med-lg { font-size: 1.25rem; }
.text-size-medium { font-size: 1.125rem; }

.text-primary-orange {
    color: var(--primary-orange);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

/* ============================================================
   3. CTA BUTTONS (Fixed for GSAP Stability)
   ============================================================ */
.btn-cta {  
    background: linear-gradient(135deg, var(--primary-orange) 0%, var(--dark-orange) 100%);  
    color: white !important;  
    border: none;  
    padding: 1.2rem 3rem; 
    border-radius: 50px; 
    font-size: 1.8rem !important; /* Locked size */
    font-weight: 700;  
    text-transform: uppercase;  
    letter-spacing: 1px;  
    display: inline-flex;  
    align-items: center;  
    gap: 15px;  
    box-shadow: 0 4px 15px rgba(234, 79, 31, 0.3);  
    position: relative;  
    overflow: hidden; 
    text-decoration: none;
    line-height: 1;
    /* Transition specific props only to avoid GSAP conflicts */
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-cta:hover {  
    transform: translateY(-3px) scale(1.02);  
    box-shadow: 0 8px 25px rgba(234, 79, 31, 0.4);  
    background: linear-gradient(135deg, #ff6333 0%, var(--primary-orange) 100%);  
}  

.btn-cta:active { transform: translateY(1px) scale(0.98); }

.btn-cta .icon-box {  
    background: rgba(255, 255, 255, 0.2);  
    width: 40px;
    height: 40px;
    display: flex;  
    align-items: center;  
    justify-content: center;  
    border-radius: 50%;  
    transition: all 0.3s ease;  
}  

.btn-cta:hover .icon-box { background: white; color: var(--primary-orange); }

/* Hero Specific Pulse */
#Hero .btn-cta .icon-box { animation: hero-icon-pulse 3s infinite; }

@keyframes hero-icon-pulse {  
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }  
    70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }  
}

/* ============================================================
   4. HERO IMAGE GROUP (Blobs, Photos, Shots)
   ============================================================ */
.home-hero_image-group {  
    position: relative;  
    width: 100%;  
    height: 600px; 
    overflow: visible;  
}  

.blob { position: absolute; border-radius: 100%; aspect-ratio: 1 / 1; filter: blur(20px); }
.blob-1 { width: 17%; min-width: 100px; background: var(--primary-pink); left: 8%; top: 68%; transform: translateY(-50%); }
.blob-2 { width: 12%; min-width: 140px; background: var(--primary-beige); left: 37%; top: 27%; transform: translateY(-50%); }

.photo-wrapper {
    position: absolute; overflow: hidden; border: 1px solid var(--black-10);
    top: 50%; transform: translateY(-50%); transition: all 0.3s ease; z-index: 2;
}
.photo-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.photo-1 { width: 30%; aspect-ratio: 2 / 1; border-radius: 50px; left: 1%; top: 30%; transform: translateY(-40%); }
.photo-2 { width: 25%; aspect-ratio: 1; border-radius: 30px; right: 2%; margin-top: 30px; }
.photo-3 { width: 18%; aspect-ratio: 1; border-radius: 100%; right: 33%; margin-top: -80px; }

.shot-wrapper {
    position: absolute; top: 50%; transform: translateY(-50%);
    border: 1px solid var(--black-10); box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 8px; transition: all 0.3s ease; z-index: 3;
}
.shot-wrapper img { width: 100%; display: block; border-radius: 8px; }
.shot-1 { width: 30%; left: 15%; margin-top: 50px; }
.shot-2 { width: 18%; left: 46%; margin-top: 150px; }
.shot-3 { width: 12%; right: 22%; margin-top: -10px; border-radius: 24px; background: transparent; border: none; }

/* ============================================================
   5. MISSION & SCROLL EFFECTS
   ============================================================ */
#mission-statement-container { width: 100%; margin: 0 auto; padding: 8vh 0; text-align: center; }
.word { display: inline-block; opacity: 0.2; margin-right: 0.15em; will-change: opacity; }
.mission-para { font-size: clamp(1.5rem, 4vw, 3rem); line-height: 1.3; margin-bottom: 1.7rem; font-weight: 700; }

.reveal-headline { clip-path: inset(0 50% 0 50%); opacity: 0; transition: none !important; }
.bridge-line { width: 2px; height: 0; background: var(--primary-orange); opacity: 0.6; margin: 0 auto; }
hr.mini-divider { color: var(--primary-orange); opacity: 0.6; width: 150px; margin: 0 auto; }

/* ============================================================
   6. TESTIMONIALS (Glassmorphism)
   ============================================================ */
.testimonials-band {
    background: radial-gradient(circle at 50% 50%, #5c6edb 0%, #16277d 100%);
    padding: 6rem 0; margin: 3rem 0; position: relative; overflow: hidden; color: #fff;
}
.testimonial-card {
    background: rgba(255, 255, 255, 0.12) !important; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: 24px !important;
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.2); transition: all 0.4s ease;
    height: 100%; min-height: 280px; padding: 2.5rem !important; color: #fff;
}
.testimonial-card:hover { transform: translateY(-10px); background: rgba(255, 255, 255, 0.18) !important; }
.testimonial-text::before {
    content: "\201C"; position: absolute; left: 25px; top: 110px; font-size: 90px;
    color: rgba(255, 255, 255, 0.2); font-family: Georgia, serif; line-height: 1;
}
.testimonial-text { margin-left: 30px; }

/* ============================================================
   7. ACCORDION & FEATURES
   ============================================================ */
.accordion { border-top: 1px solid #dee2e6; }
.accordion-item { border-bottom: 1px solid #dee2e6; background: transparent; border-left: none; border-right: none; border-top: none; }
.accordion-button { font-size: 1.25rem; background: #fff !important; color: #212529 !important; box-shadow: none !important; padding: 1.5rem 0; }
.accordion-button:not(.collapsed) { background: #fff !important; }
.accordion-body { padding: 0 0 1.5rem 0; font-size: 1.1rem; }

.features h5 { letter-spacing: -2px; font-size: 2rem; font-weight: 550; line-height: 1.1; opacity: 0.85; }
.features p { font-size: 1.1rem; }
.features img { width: 90px; height: 90px; }
.featuresblock { background-color: var(--light-blue); }

.steps h5 { letter-spacing: -2px; font-size: 2rem; font-weight: 550; line-height: 1.1; opacity: 0.85; }
.steps p { font-size: 1.1rem; }



/* ============================================================
   8. RESPONSIVE & UTILITIES
   ============================================================ */
@media (max-width: 768px) {  
    .home-hero_image-group { height: 500px; }  
    .shot-3, .photo-3 { display: none; } 
    .photo-1 { width: 55%; left: -10%; }  
    .photo-2 { width: 45%; right: -10%; }  
    .shot-1 { width: 45%; left: 5%; }  
    .shot-2 { width: 40%; left: 50%; }  
}

@media (min-width: 768px) {
    .step-container::before {
        content: ''; position: absolute; top: 10%; bottom: 10%; left: 50%;
        width: 2px; border-left: 2px dashed var(--secondary-orange); z-index: -1; opacity: 0.5;
    }
}

.parallax-up, .parallax-down, .parallax-left, .parallax-right {  
    will-change: transform; transition: transform 0.1s linear;  
}

.step-img { transition: transform 0.5s ease; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1)); }
.step-img:hover { transform: translateY(-10px) rotate(2deg); }

.bg-faded-blue { background-color: var(--light-blue); background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3)); background-blend-mode: overlay; border-top: 1px solid var(--light-blue); }
.cta-anchor-card { background: linear-gradient(to bottom, #ffffff, #f9f9f9); border-radius: 24px; border-top: 6px solid var(--primary-orange); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08); }