/* --- Global Styles & Variables --- */
:root {
    --bg-color: #121212;
    --text-color: #F4F4F4;
    --accent-color: #4A6C4F; /* Earthy Forest Green */
    --font-heading: 'Syne', sans-serif;
    --font-body: 'Inter', sans-serif;
    --container-padding: 0 8%;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    cursor: none;
    overflow-x: hidden;
}
a { color: var(--accent-color); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: white; }

/* --- Custom Cursor (Enhanced Visibility) --- */
.cursor-dot, .cursor-outline {
    pointer-events: none; position: fixed; top: 0; left: 0;
    transform: translate(-50%, -50%); border-radius: 50%;
    z-index: 9999; opacity: 0; transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out;
    will-change: transform, opacity;
}
body.cursor-visible .cursor-dot, body.cursor-visible .cursor-outline { opacity: 1; }
.cursor-dot { width: 8px; height: 8px; background-color: var(--accent-color); }
.cursor-outline { width: 40px; height: 40px; border: 2px solid var(--accent-color); }
.cursor-outline.hovered { transform: translate(-50%, -50%) scale(1.5); opacity: 0.5; border-color: white; }


/* --- Preloader & Transitions --- */
.preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--bg-color); z-index: 10000;
    display: flex; justify-content: center; align-items: center;
}
.preloader-text { font-family: var(--font-heading); font-size: 2rem; color: var(--accent-color); }
main { opacity: 0; transition: opacity 0.5s ease-in-out; }

/* --- Header & Mobile Navigation --- */
.main-header { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 2rem 5%; z-index: 1000; transition: background-color 0.3s ease; }
.logo-link { text-decoration: none; }
.logo { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; color: var(--accent-color); }
.main-nav { display: flex; }
.main-nav a { color: var(--text-color); margin-left: 2rem; position: relative; padding-bottom: 0.25rem; }
.main-nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--accent-color); transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1); }
.main-nav a:hover::after { width: 100%; }
.hamburger { display: none; background: none; border: none; z-index: 1001; }
.hamburger .bar { display: block; width: 25px; height: 2px; margin: 5px auto; background-color: var(--text-color); transition: all 0.3s ease-in-out; }

/* --- Hero & Page Hero --- */
.hero { height: 100vh; display: flex; align-items: center; text-align: left; position: relative; padding: var(--container-padding); }
.video-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.video-background video { width: 100%; height: 100%; object-fit: cover; }
.video-background::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); }
.hero-title { font-family: var(--font-heading); font-size: clamp(2.5rem, 8vw, 7rem); line-height: 1; color: white; }
.hero-title span { display: block; overflow: hidden; }
.hero-title span span { display: block; }
.hero .cta-button { margin-top: 2rem; }

.page-hero { min-height: 50vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 10rem 5% 4rem; }
.page-title { font-family: var(--font-heading); font-size: clamp(3rem, 10vw, 6rem); color: var(--accent-color); line-height: 1.1; margin-bottom: 1rem; }
.page-hero p { font-size: 1.2rem; color: #aaa; max-width: 600px; }

/* --- General Content & Buttons --- */
.content-section { padding: 8rem 8%; }
.section-title { font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 3rem); text-align: center; margin-bottom: 4rem; color: var(--accent-color); }
.cta-button {
    background-color: var(--accent-color); color: white;
    padding: 1rem 2.5rem; display: inline-block;
    font-family: var(--font-heading); font-weight: 700;
    border: 2px solid var(--accent-color);
    transition: all 0.3s ease;
}
.cta-button:hover { background-color: transparent; color: var(--accent-color); transform: translateY(-3px); }

/* --- Home Page Specific Sections --- */
.intro-section h2 { font-family: var(--font-heading); font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.4; max-width: 900px; margin: 0 auto; text-align: center; }

/* Source Section (Parallax Ready) */
.source-section { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; background: #000; }
.source-text p { margin-bottom: 2rem; max-width: 500px; }
.source-images { position: relative; height: 420px; display: block; }
.source-images .bg-image { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; }
.source-images .bg-image img { width: 100%; height: 100%; object-fit: cover; filter: contrast(0.95) saturate(0.9) brightness(0.6); transform: scale(1.05); transition: transform 0.8s ease; }
.source-images .float-image { position: absolute; right: 6%; bottom: 8%; width: 38%; max-width: 360px; box-shadow: 0 30px 60px rgba(0,0,0,0.6); border-radius: 12px; overflow: hidden; transform: translateY(0); transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease; }
.source-images .float-image img { width: 100%; height: 100%; object-fit: cover; }
.source-images .bg-image { z-index: 1; }
.source-images .float-image { z-index: 2; }
.source-images .float-image:hover { transform: translateY(-10px); box-shadow: 0 40px 80px rgba(0,0,0,0.7); }

/* Visual enhancements */
.source-images .bg-image::after {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 60%);
    pointer-events: none; border-radius: 12px;
}
.source-images .bg-image img { position: relative; z-index: 0; }
.source-images .float-image { transform-origin: center right; border: 3px solid rgba(255,255,255,0.06); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }
.source-images .float-image { transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, filter 0.4s ease; }
.source-images .float-image:hover { transform: translateY(-12px) rotate(-1deg) scale(1.02); filter: saturate(1.05); }

/* Slight decorative accent bar on the float image */
.source-images .float-image::before {
    content: '';
    position: absolute; left: 0; top: 0; height: 100%; width: 8px; background: linear-gradient(180deg, var(--accent-color), rgba(74,108,79,0.6)); z-index: 3;
}

/* Make the layout responsive and fallback to stacked images on small screens */
@media (max-width: 900px) {
    .source-images { height: auto; }
    .source-images .bg-image { position: relative; height: 320px; }
    .source-images .bg-image::after { display: block; }
    .source-images .float-image { position: relative; right: auto; bottom: auto; width: 70%; margin: -60px auto 0 auto; box-shadow: 0 20px 40px rgba(0,0,0,0.55); }
}

/* Why Us Section */
.why-us-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 3rem; text-align: center; }
.why-us-item { background: #1a1a1a; padding: 2.5rem; border-radius: 8px; }
.why-us-icon { font-family: var(--font-heading); font-size: 2rem; color: var(--accent-color); margin-bottom: 1rem; }
.why-us-item h4 { font-family: var(--font-heading); font-size: 1.8rem; color: white; margin-bottom: 1rem; }

/* Process Section (Horizontal Scroll) */
.process-section { padding: 8rem 0; height: 100vh; }
.process-wrapper { display: flex; width: 500%; height: 100%; }
.process-step { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 15%; }
.step-number { font-family: var(--font-heading); font-size: 5rem; color: rgba(255, 255, 255, 0.1); }
.process-step h4 { font-family: var(--font-heading); font-size: 2.5rem; color: var(--accent-color); margin: 1rem 0; }
.process-step p { font-size: 1.2rem; max-width: 500px; }

.testimonial-slider .swiper-slide { text-align: center; padding: 2rem; }
.testimonial-slider p { font-size: clamp(1.2rem, 3vw, 1.5rem); font-style: italic; max-width: 700px; margin: 0 auto 1rem auto; }
.testimonial-slider span { font-weight: bold; color: var(--accent-color); }
.swiper-pagination-bullet-active { background: var(--accent-color) !important; }

/* All Other Pages (shared styles) */
.founder-section { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: center; }
.founder-image img { width: 100%; object-fit: cover; border-radius: 8px; }
.founder-text h3 { font-size: 1.2rem; color: var(--accent-color); margin-bottom: 0.5rem; }
.founder-text h2 { font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 3.5rem); margin-bottom: 1.5rem; }
.philosophy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 3rem; text-align: center; }
.philosophy-item { background: #1a1a1a; padding: 2.5rem; border-radius: 8px; }
.philosophy-item h4 { font-family: var(--font-heading); font-size: 2rem; color: var(--accent-color); margin-bottom: 1rem; }
.filter-buttons { display: flex; justify-content: center; gap: 1rem; margin-bottom: 3rem; flex-wrap: wrap; }
.filter-btn { background: transparent; border: 1px solid #555; color: #aaa; padding: 0.5rem 1.5rem; border-radius: 20px; transition: all 0.3s ease; }
.filter-btn.active, .filter-btn:hover { background-color: var(--accent-color); color: white; border-color: var(--accent-color); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.gallery-item { position: relative; overflow: hidden; aspect-ratio: 4/5; transition: opacity 0.5s ease; border-radius: 8px; }
.gallery-item.hide { display: none; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.gallery-item:hover img { transform: scale(1.1); }
.item-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.6); opacity: 0; transition: opacity 0.4s ease; }
.gallery-item:hover .item-overlay { opacity: 1; }
.item-overlay h4 { font-family: var(--font-heading); font-size: 1.8rem; color: white; text-align: center; transform: translateY(20px); transition: transform 0.4s ease; }
.gallery-item:hover .item-overlay h4 { transform: translateY(0); }
.contact-section { display: grid; grid-template-columns: 1fr 1.5fr; gap: 5rem; }
.contact-info h3, .contact-form-wrapper h3 { font-family: var(--font-heading); font-size: 2.5rem; color: var(--accent-color); margin-bottom: 2rem; }
.contact-info p { margin-bottom: 1.5rem; }
.form-group { position: relative; margin-bottom: 2.5rem; }
.form-group input, .form-group textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid #555; color: white; padding: 0.5rem 0; font-size: 1rem; font-family: var(--font-body); }
.form-group input:focus, .form-group textarea:focus { outline: none; border-bottom-color: var(--accent-color); }
.form-group label { position: absolute; top: 0.5rem; left: 0; color: #aaa; transition: all 0.3s ease; pointer-events: none; }
.form-group input:focus + label, .form-group input:valid + label, .form-group textarea:focus + label, .form-group textarea:valid + label { top: -1.2rem; font-size: 0.8rem; color: var(--accent-color); }
.contact-form .cta-button { border-radius: 5px; width: 100%; text-align: center; }

/* --- Detailed Footer --- */
.main-footer { padding: 6rem 8% 2rem; background-color: #000; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 3rem; margin-bottom: 4rem; text-align: left; }
.footer-column h5 { font-family: var(--font-heading); font-size: 1.2rem; margin-bottom: 1rem; color: white; }
.footer-column.brand-column p { color: #aaa; margin-top: 1rem; }
.footer-column ul { list-style: none; }
.footer-column ul li { margin-bottom: 0.5rem; }
.footer-column ul li a, .footer-column p, .footer-column p a { color: #aaa; }
.footer-column ul li a:hover, .footer-column p a:hover { color: var(--accent-color); }
.social-links { display: flex; gap: 1.5rem; }
.social-links a { color: #aaa; font-weight: bold; }
.footer-bottom { padding-top: 2rem; border-top: 1px solid #333; color: #666; font-size: 0.9rem; text-align: center; }

/* --- Scroll Animations --- */
.animate-on-scroll { opacity: 0; transform: translateY(50px); }

/* --- Responsiveness --- */
@media (max-width: 900px) {
    .source-section, .founder-section, .contact-section { grid-template-columns: 1fr; }
    .source-images { margin-top: 3rem; }
    .process-section { display: none; /* Hide complex horizontal scroll on tablets */ }
}

@media (max-width: 768px) {
    body { cursor: auto; /* Revert to default cursor on touch devices */ }
    .cursor-dot, .cursor-outline { display: none; }

    .main-header { padding: 1.5rem 5%; }
    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: var(--bg-color);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transform: translateX(100%);
        transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    }
    .main-nav.active { transform: translateX(0); }
    .main-nav a { margin: 1.5rem 0; font-size: 1.5rem; }
    .hamburger { display: block; }
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .content-section { padding: 4rem 5%; }
    .hero { padding: 0 5%; }
    
    .process-section { display: block; height: auto; padding: 4rem 5%; }
    .process-wrapper { flex-direction: column; width: 100%; height: auto; }
    .process-step { padding: 2rem 0; text-align: center; align-items: center;}

    .contact-section { gap: 3rem; }
    .footer-grid { text-align: center; }
    .social-links { justify-content: center; }
}