/* Home page - Tailwind-resistant version */

:root {
    --primary: #e15c02;
    --primary-dark: #c44f02;
    --dark: #111827;
    --dark-gray: #374151;
    --gray: #6B7280;
    --light-gray: #F3F4F6;
    --white: #FFFFFF;
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Reset Tailwind for content-page */
.content-page * {
    box-sizing: border-box;
}

.content-page {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
    color: var(--dark) !important;
    line-height: 1.7 !important;
}

/* Container */
.content-page .container {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Section spacing */
.content-page section {
    padding: 80px 0 !important;
}

/* Typography resets */
.content-page h1,
.content-page h2,
.content-page h3,
.content-page h4,
.content-page h5,
.content-page h6 {
    margin: 0;
    font-weight: inherit;
}

.content-page p {
    margin: 0;
}

.content-page ul,
.content-page ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.content-page a {
    text-decoration: none;
}

/* Section titles */
.content-page .section-title {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-bottom: 15px !important;
    color: var(--dark) !important;
}

.content-page .section-subtitle {
    font-size: 1.1rem !important;
    color: var(--gray) !important;
    text-align: center !important;
    max-width: 600px !important;
    margin: 0 auto 60px auto !important;
}

/* Fade-in utility - default to visible, animate on scroll with JS */
.content-page .fade-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.content-page .fade-in.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Home-only helper delays for fade-in elements */
.fade-delay-100 { transition-delay: 0.1s !important; }
.fade-delay-200 { transition-delay: 0.2s !important; }
.fade-delay-300 { transition-delay: 0.3s !important; }
.fade-delay-400 { transition-delay: 0.4s !important; }
.fade-delay-500 { transition-delay: 0.5s !important; }
.fade-delay-600 { transition-delay: 0.6s !important; }

/* HERO */
.content-page #hero {
    padding: 100px 0 !important;
    background: var(--white) !important;
}

.content-page .hero-container {
    display: block !important;
}

.content-page .hero-content {
    display: block !important;
    max-width: 860px !important;
}

.content-page .hero-content h1 {
    font-size: 3.5rem !important;
    font-weight: 800 !important;
    line-height: 1.02 !important;
    margin-bottom: 26px !important;
    color: var(--dark) !important;
    display: block !important;
    width: 100% !important;
    letter-spacing: -0.04em !important;
}

.content-page .hero-content h1 span {
    display: block !important;
}

.content-page .hero-content h1 span + span {
    margin-top: 0.22em !important;
}

.content-page .hero-content p {
    font-size: 1.1rem !important;
    color: var(--gray) !important;
    margin-bottom: 22px !important;
    display: block !important;
    width: 100% !important;
}

.content-page .hero-support {
    max-width: 720px !important;
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
    color: var(--dark-gray) !important;
    margin-bottom: 34px !important;
}

.content-page .hero-cta {
    display: inline-block !important;
    background: var(--primary) !important;
    color: var(--white) !important;
    text-decoration: none !important;
    padding: 15px 35px !important;
    border-radius: 8px !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.content-page .hero-cta:hover {
    background: var(--primary-dark) !important;
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-3px) !important;
}

.content-page .social-proof {
    margin-top: 60px !important;
    display: block !important;
    width: 100% !important;
}

.content-page .social-proof p {
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
    margin-bottom: 20px !important;
    color: var(--gray) !important;
    display: block !important;
}

.content-page .social-proof-logos {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    max-width: 100% !important;
}

.content-page .social-proof-logos img {
    display: inline-block !important;
    height: 48px !important;
    width: 120px !important;
    object-fit: contain !important;
    flex-shrink: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* SERVICES */
.content-page #services {
    background: var(--light-gray) !important;
}

.content-page .services-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
    gap: 30px !important;
}

.content-page .service-card {
    background: var(--white) !important;
    padding: 30px !important;
    border-radius: 8px !important;
    box-shadow: var(--shadow-md) !important;
    transition: all 0.3s ease !important;
}

.content-page .service-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--shadow-lg) !important;
}

.content-page .service-card .icon {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 20px !important;
    color: var(--primary) !important;
    display: block !important;
}

.content-page .service-card svg {
    width: 50px !important;
    height: 50px !important;
    color: var(--primary) !important;
    display: block !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

.content-page .service-card h3 {
    font-size: 1.25rem !important;
    margin-bottom: 10px !important;
    color: var(--dark) !important;
    font-weight: 600 !important;
}

.content-page .service-card p {
    color: var(--gray) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

/* TECH STACK */
.content-page #tech-stack .tech-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 40px !important;
}

.content-page #tech-stack .tech-logo {
    height: 40px !important;
    filter: grayscale(100%) !important;
    opacity: 0.6 !important;
    transition: all 0.3s ease !important;
    display: block !important;
}

.content-page #tech-stack .tech-logo:hover {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
}

/* WORK */
.content-page #work .work-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important;
    align-items: center !important;
}

.content-page #work .work-content h2 {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    line-height: 1.3 !important;
    color: var(--dark) !important;
}

.content-page #work .work-content p {
    color: var(--gray) !important;
    margin-bottom: 20px !important;
    line-height: 1.7 !important;
}

.content-page #work .work-video {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background: var(--dark) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-lg) !important;
}

.content-page #work .work-video video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ABOUT */
.content-page #about {
    background: var(--dark) !important;
    color: var(--white) !important;
}

.content-page #about .section-title {
    color: var(--white) !important;
}

.content-page #about .section-subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
}

.content-page #about .about-content {
    max-width: 800px !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: 1.1rem !important;
    line-height: 1.8 !important;
}

/* First about section (dark background) - specific selector to not affect light-gray variant */
.content-page #about:not([style*="light-gray"]) .about-content p {
    color: #FFFFFF !important;
}

/* PROJECTS */
.content-page #projects {
    background: var(--light-gray) !important;
}

.content-page .projects-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
    gap: 30px !important;
}

.content-page .project-card {
    background: var(--white) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-md) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
}

.content-page .project-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--shadow-lg) !important;
}

.content-page .project-card img {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important;
    display: block !important;
}

.content-page .project-card-content {
    padding: 20px !important;
}

.content-page .project-card-content h3 {
    font-size: 1.25rem !important;
    margin-bottom: 10px !important;
    color: var(--dark) !important;
    font-weight: 600 !important;
}

.content-page .project-card-content p {
    color: var(--gray) !important;
    line-height: 1.6 !important;
}

/* PROCESS */
.content-page #process .process-timeline {
    display: flex !important;
    justify-content: space-between !important;
    position: relative !important;
    margin-top: 40px !important;
}

.content-page #process .process-timeline::before {
    content: '' !important;
    position: absolute !important;
    top: 25px !important;
    left: 10% !important;
    width: 80% !important;
    height: 2px !important;
    background: var(--light-gray) !important;
    z-index: -1 !important;
}

.content-page #process .process-step {
    width: 22% !important;
    text-align: center !important;
}

.content-page #process .process-step .icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: var(--white) !important;
    border: 2px solid var(--light-gray) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 20px auto !important;
    color: var(--primary) !important;
    transition: all 0.3s ease !important;
}

.content-page #process .process-step .icon svg {
    width: 24px !important;
    height: 24px !important;
}

.content-page #process .process-step:hover .icon {
    border-color: var(--primary) !important;
    background: var(--primary) !important;
    color: var(--white) !important;
}

.content-page #process .process-step h4 {
    font-size: 1.1rem !important;
    margin-bottom: 10px !important;
    color: var(--dark) !important;
    font-weight: 600 !important;
}

.content-page #process .process-step p {
    color: var(--gray) !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
}

/* ABOUT LIGHT (second about section) */
.content-page section#about[style*="light-gray"] {
    background: var(--light-gray) !important;
    color: var(--dark) !important;
}

.content-page .about-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important;
    align-items: center !important;
}

.content-page .about-container .about-content h2 {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    line-height: 1.3 !important;
    color: var(--dark) !important;
}

/* Second about section paragraph - ensure dark color with higher specificity */
.content-page section#about[style*="light-gray"] .about-container .about-content p {
    color: var(--dark) !important;
    margin-bottom: 20px !important;
    line-height: 1.7 !important;
}

.content-page .team-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
}

/* Home team section spacing */
.team-grid--spaced {
    margin-top: 60px;
}

.content-page .team-member {
    text-align: center !important;
}

.content-page .team-member img {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin: 0 auto 10px auto !important;
    box-shadow: var(--shadow-md) !important;
    display: block !important;
}

.content-page .team-member h5 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--dark) !important;
    margin-bottom: 5px !important;
}

.content-page .team-member span {
    color: var(--gray) !important;
    font-size: 0.9rem !important;
    display: block !important;
}

/* TESTIMONIALS */
.content-page #testimonials {
    background: var(--light-gray) !important;
}

.content-page .testimonial-card {
    background: var(--white) !important;
    padding: 40px !important;
    border-radius: 8px !important;
    box-shadow: var(--shadow-lg) !important;
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

.content-page .testimonial-card p {
    font-size: 1.25rem !important;
    font-style: italic !important;
    line-height: 1.6 !important;
    color: var(--dark-gray) !important;
    margin-bottom: 20px !important;
}

.content-page .testimonial-author {
    display: block !important;
}

.content-page .testimonial-author img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    margin: 0 auto 10px auto !important;
    display: block !important;
}

.content-page .testimonial-author h5 {
    font-weight: 600 !important;
    color: var(--dark) !important;
    margin-bottom: 5px !important;
}

.content-page .testimonial-author span {
    color: var(--gray) !important;
    font-size: 0.9rem !important;
    display: block !important;
}

/* PERFORMANCE */
.content-page #performance {
    background: var(--dark) !important;
    color: var(--white) !important;
}

.content-page #performance .section-title,
.content-page #performance .section-subtitle {
    color: var(--white) !important;
}

.content-page .performance-slider-container {
    position: relative !important;
    width: 100% !important;
    max-width: 900px !important;
    margin: 40px auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-lg) !important;
    line-height: 0 !important;
    touch-action: none !important;
}

.content-page .performance-image-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
}

.content-page .performance-image-before {
    background-image: url('/assets/images/performance/before.jpg') !important;
}

.content-page .performance-slider {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 50%;
    height: 100% !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

.content-page .performance-image-after {
    width: 100% !important;
    height: 100% !important;
    background-image: url('/assets/images/performance/after.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
}

.content-page .performance-slider-handle {
    position: absolute !important;
    top: 0 !important;
    left: 50%;
    width: 4px !important;
    height: 100% !important;
    background: var(--white) !important;
    cursor: ew-resize !important;
    z-index: 2 !important;
    transform: translateX(-2px) !important;
    touch-action: none !important;
}

.content-page .performance-slider-handle::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 40px !important;
    height: 40px !important;
    background: var(--white) !important;
    border-radius: 50% !important;
    border: 2px solid var(--primary) !important;
}

.content-page .performance-base-image {
    display: block !important;
    width: 100% !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* LEAD MAGNET */
#lead-magnet {
    background: var(--light-gray);
}

#lead-feedback {
    margin-top: 8px;
    color: var(--gray);
    font-size: 0.9rem;
}

.content-page #lead-magnet {
    background: var(--light-gray) !important;
}
.content-page .lead-magnet-box {
    background: var(--light-gray) !important;
    border-radius: 12px !important;
    padding: 60px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important;
    align-items: center !important;
}
.content-page .lead-magnet-box--content-only {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

.content-page .lead-magnet-box--content-only .lead-magnet-content {
    width: 100% !important;
    max-width: 820px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.content-page .lead-magnet-box--content-only .lead-magnet-content p {
    max-width: 720px !important;
}

.content-page .lead-magnet-box--content-only .lead-magnet-form {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
}

.content-page .lead-magnet-box h2 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    color: var(--dark) !important;
}

.content-page .lead-magnet-box p {
    color: var(--gray) !important;
    margin-bottom: 20px !important;
    line-height: 1.7 !important;
}

.content-page .lead-magnet-form input {
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 6px !important;
    margin-bottom: 10px !important;
    display: block !important;
}

.content-page .lead-magnet-form button {
    width: 100% !important;
    padding: 12px !important;
    background: var(--primary) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.content-page .lead-magnet-form button:hover {
    background: var(--primary-dark) !important;
}

.content-page .lead-magnet-image img {
    width: 100% !important;
    max-width: 300px !important;
    display: block !important;
    margin: 0 auto !important;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1)) !important;
}

/* CONTACT CTA */
.home-contact-cta {
    text-align: center;
}

.content-page #contact {
    background: var(--dark) !important;
    padding: 100px 0 !important;
}
.content-page #contact .cta-box {
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

.content-page #contact .cta-box h2 {
    font-size: 3rem !important;
    font-weight: 700 !important;
    color: var(--white) !important;
    margin-bottom: 40px !important;
    line-height: 1.2 !important;
}

.content-page #contact .cta-btn {
    display: inline-block !important;
    background: var(--primary) !important;
    color: var(--white) !important;
    text-decoration: none !important;
    padding: 18px 45px !important;
    border-radius: 8px !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.content-page #contact .cta-btn:hover {
    background: var(--primary-dark) !important;
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-3px) !important;
}

/* Responsive */
@media (max-width: 768px) {
    /* Global mobile adjustments */
    .content-page section {
        padding: 40px 0 !important;
    }

    .content-page .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Typography */
    .content-page .section-title {
        font-size: 1.75rem !important;
        margin-bottom: 12px !important;
    }

    .content-page .section-subtitle {
        font-size: 1rem !important;
        margin-bottom: 30px !important;
    }

    /* Hero */
    .content-page #hero {
        padding: 60px 0 !important;
    }

    .content-page .hero-container {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 30px !important;
    }

    .content-page .hero-content h1 {
        font-size: 2rem !important;
        margin-bottom: 18px !important;
    }

    .content-page .hero-content p {
        font-size: 1rem !important;
        margin-bottom: 25px !important;
    }

    .content-page .hero-cta {
        padding: 12px 25px !important;
        font-size: 1rem !important;
    }

    .content-page .social-proof {
        margin-top: 40px !important;
    }

    .content-page .social-proof-logos {
        justify-content: center !important;
        gap: 15px !important;
    }

    .content-page .social-proof-logos img {
        height: 30px !important;
        width: 80px !important;
    }

    /* Services */
    .content-page .services-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .content-page .service-card {
        padding: 25px !important;
    }

    /* Tech Stack */
    .content-page #tech-stack .tech-grid {
        gap: 20px !important;
    }

    .content-page #tech-stack .tech-logo {
        height: 30px !important;
    }

    /* Work */
    .content-page #work .work-container {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .content-page #work .work-content h2 {
        font-size: 1.75rem !important;
    }

    .content-page #work .work-video {
        height: 250px !important;
    }

    /* About */
    .content-page #about .about-content {
        font-size: 1rem !important;
        padding: 0 10px !important;
    }

    /* Projects */
    .content-page .projects-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .content-page .project-card img {
        height: 200px !important;
    }

    /* Process */
    .content-page #process .process-timeline {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .content-page #process .process-step {
        width: 100% !important;
    }

    .content-page #process .process-timeline::before {
        display: none !important;
    }

    /* About Container (second about) */
    .content-page .about-container {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .content-page .about-container .about-content h2 {
        font-size: 1.75rem !important;
    }

    /* Testimonials */
    .content-page .testimonial-card {
        padding: 30px 20px !important;
    }

    .content-page .testimonial-card p {
        font-size: 1.1rem !important;
    }

    /* Performance */
    .content-page .performance-slider-container {
        max-width: 100% !important;
        margin: 20px auto !important;
    }

    /* Lead Magnet */
    .content-page .lead-magnet-box {
        grid-template-columns: 1fr !important;
        padding: 30px 20px !important;
        gap: 30px !important;
    }

    .content-page .lead-magnet-box h2 {
        font-size: 1.5rem !important;
    }

    .content-page .lead-magnet-image img {
        max-width: 200px !important;
    }

    /* Contact CTA */
    .content-page #contact {
        padding: 60px 0 !important;
    }

    .content-page #contact .cta-box h2 {
        font-size: 1.75rem !important;
        margin-bottom: 30px !important;
    }

    .content-page #contact .cta-btn {
        padding: 14px 30px !important;
        font-size: 1.1rem !important;
    }
}