html {
    scroll-behavior: smooth;
}

/* --- Base Reset --- */
a {
    text-decoration: none;
    color: inherit;
}
/* --- Global Wrapper & Background Texture --- */
.portfolio-wrapper {
    min-height: 100vh;
    background-color: #f1f1f1; /* Fallback light grey */
    /* Replace 'assets/texture.png' with your actual repeating texture image */
    background-image: url('assets/texture.png'); 
    background-repeat: repeat;
    background-size: 600px; /* Adjust this value to scale the texture size */
    position: relative;
    overflow: hidden;
}

/* --- Navbar --- */
.nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 5%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.nav-logo {
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.5px;
}

.accent-dot {
    color: #FACC15; /* Yellow dot */
}

.nav-center-links {
    display: flex;
    gap: 48px;
}

.nav-center-links a {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #555;
    transition: color 0.3s ease;
}

.nav-center-links a:hover {
    color: #000;
}

.btn-talk {
    border: 1.5px solid #1a1a1a;
    padding: 10px 24px;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    transition: all 0.3s ease;
}

.btn-talk:hover {
    background-color: #1a1a1a;
    color: #ffffff;
}

/* --- Hero Layout --- */
.hero-section {
    position: relative;
    display: flex;
    align-items: flex-start; 
    max-width: 1400px;
    margin: 0 auto;
    /* 1. Reduced bottom padding from 120px to 40px */
    padding: 60px 5% 60px; 
    /* 2. Changed 85vh to auto so it stops forcing invisible empty space */
    min-height: auto; 
}

.hero-content {
    flex: 1;
    max-width: 680px;
    z-index: 2;
}

/* --- Eagle Graphic Placement --- */
.hero-visual {
    position: absolute;
    right: 5%; /* Tweak this left/right */
    
    /* Using a negative number pulls it UP past the starting line */
    top: -40px; 
    
    transform: none; 
    width: 30%; /* Slightly larger to match your reference image */
    max-width: 600px; 
    z-index: 1;
    pointer-events: none; 
}

.eagle-img {
    width: 100%;
    height: auto;
    opacity: 0.9;
}

/* --- Hero Typography --- */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(200, 200, 200, 0.4);
    padding: 4px 12px;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #666;
    /* 1. Drop this to a tiny number */
    margin-bottom: 4x; 
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 40px; 
    font-weight: 400;
    line-height: 1.15;
    color: #444; 
    /* 2. Use a negative margin to pull the text up into the pill's invisible space */
    margin-top: 50px; 
    margin-bottom: 16px; 
    letter-spacing: -0.5px;
}

.hero-desc {
    font-family: 'Inter', sans-serif;
    font-size: 14px; /* Scaled down from 16px */
    color: #666;
    line-height: 1.6;
    margin-bottom: 32px;
    max-width: 500px; /* Narrowed width to match the scaled text */
}


/* --- Hero Buttons --- */
.hero-buttons {
    display: flex;
    align-items: center;
    gap: 16px; /* Tighter gap between buttons */
}

.btn-primary-wrapper {
    background-color: rgba(200, 200, 200, 0.6); 
    padding: 5px; /* Thinner grey ring */
    border-radius: 50px;
    display: inline-flex;
}

.btn-primary-dark {
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 12px 28px; /* Scaled down from 16px 36px */
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 13px; /* Scaled down from 15px */
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.btn-primary-dark:hover {
    background-color: #333;
}

.btn-secondary-grey {
    background-color: #999;
    color: #ffffff;
    padding: 12px 28px; /* Scaled down from 16px 36px */
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 13px; /* Scaled down from 15px */
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.btn-secondary-grey:hover {
    background-color: #888;
}

/* --- Basic Mobile Responsiveness --- */
@media (max-width: 992px) {
    .hero-section {
        flex-direction: column;
        padding: 40px 5% 60px;
        min-height: auto;
    }
    
    .nav-header {
        padding: 20px 5%;
    }
    
    .nav-center-links {
        display: none; 
    }
    
    .nav-logo {
        font-size: 30px; 
    }
    
    .btn-talk {
        padding: 10px 20px;
        font-size: 14px;
    }

    /* --- CENTER ALIGNMENT MAGIC STARTS HERE --- */
    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centers the pill and button groups */
        text-align: center; /* Centers the actual text inside the tags */
        z-index: 2; 
    }

    .hero-title {
        font-size: 36px; 
        line-height: 1.2;
        margin-top: 20px; 
    }
    
    .hero-desc {
        font-size: 16px;
        margin-bottom: 24px;
    }

    .hero-buttons {
        justify-content: center; /* Centers the buttons horizontally */
        flex-wrap: wrap; 
        gap: 12px;
    }
    /* --- CENTER ALIGNMENT MAGIC ENDS HERE --- */

    .hero-visual {
        position: absolute; 
        right: -10%;
        top: 15%;
        width: 80%; 
        opacity: 0.15; 
        z-index: 0; 
        margin-top: 0;
    }
}

/* =========================================
   BRANDS SECTION
========================================= */
.brands-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0px 5% 60px; /* Top padding reduced to 0 to pull it closer to the hero */
    text-align: center;
}

.brands-title {
    font-family: 'Playfair Display', serif;
    font-size: 16px; /* Scaled down for a cleaner look */
    font-weight: 400;
    color: #666;
    margin-bottom: 20px; /* Tighter margin */
}

.brands-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.brand-item {
    background-color: rgba(220, 220, 220, 0.4);
    padding: 12px 24px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px; /* Fixed height so all logos align nicely */
    min-width: 120px;
}

.brand-item img {
    max-height: 24px;
    width: auto;
    opacity: 0.7; /* Fades the logos slightly to match the mockup */
}

/* =========================================
   CASE STUDY SECTION
========================================= */
.case-study-section {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 5% 120px;
}

.cs-content {
    flex: 1;
    max-width: 500px;
}

.cs-tag {
    background-color: rgba(200, 200, 200, 0.6);
    margin-bottom: 16px;
}

.cs-title {
    font-family: 'Playfair Display', serif;
    font-size: 34px; /* Scaled down from 36/44px */
    font-weight: 400;
    line-height: 1.2;
    color: #444;
    margin-top: 0;
    margin-bottom: 24px; /* Tighter gap */
}

.cs-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: 18px; /* Scaled down from 22px */
    font-weight: 400;
    color: #999; /* Light grey for the subheadings */
    margin: 0 0 8px 0;
}

.cs-desc {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 32px;
}

.btn-outline {
    display: inline-block;
    border: 1.5px solid #bbb;
    padding: 12px 32px;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background-color: #f1f1f1;
    border-color: #888;
    color: #1a1a1a;
}

/* Right Side Image Box */
.cs-visual {
    flex: 1.2; /* Makes the image side slightly wider than the text side */
    display: flex;
    flex-direction: column;
    align-items: center; /* Perfectly centers the bottom link under the image */
}

.cs-image-box {
    display: block;
    width: 80%;
    aspect-ratio: 16 / 10; /* Keeps a nice wide rectangle shape */
    background-color: #d5d5d5; /* Placeholder grey */
    border-radius: 24px;
    position: relative;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.cs-image-box:hover {
    transform: scale(0.99); /* Slight press effect when clicked */
}

/* The dark tag sitting inside the image box */
.tag-dark {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: rgba(80, 80, 80, 0.8); /* Dark grey */
    color: #fff;
    padding: 6px 16px;
    z-index: 2;
}

.cs-bottom-link a {
    display: inline-block;
    margin-top: 16px;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    color: #333;
    text-decoration: underline;
    text-underline-offset: 4px; /* Drops the underline down a bit for a cleaner look */
    transition: color 0.3s ease;
}

.cs-bottom-link a:hover {
    color: #000;
}


/* =========================================
   MORE WORK SECTION
========================================= */
.more-work-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 5% 120px;
}

.mw-header {
    text-align: center;
    margin-bottom: 60px;
}

.mw-title {
    font-family: 'Playfair Display', serif;
    font-size: 40px; /* Scaled down slightly to match your 80% look */
    font-weight: 400;
    color: #444;
    margin-top: 0;
    margin-bottom: 16px;
}

.mw-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #555;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

/* CSS Grid layout for 2 columns */
.mw-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 40px; /* 60px gap vertically, 40px gap horizontally */
    margin-bottom: 80px; /* Space between grid and the Behance link */
}

.mw-card {
    display: flex;
    flex-direction: column;
}

.mw-image-box {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    background-color: #d5d5d5;
    border-radius: 24px;
    position: relative;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.3s ease;
    margin-bottom: 24px; /* Space between image and title */
}

.mw-image-box:hover {
    transform: scale(0.99); /* Press effect on hover */
}

.mw-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 26px; 
    font-weight: 400;
    color: #444;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.mw-card-desc {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Centers the Behance link */
.mw-footer-link {
    text-align: center;
}

.mw-footer-link a {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    color: #333;
    text-decoration: underline;
    text-underline-offset: 4px; 
    transition: color 0.3s ease;
}

.mw-footer-link a:hover {
    color: #000;
}


/* =========================================
   ABOUT ME SECTION
========================================= */
.about-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 5% 120px;
}

.about-title {
    font-family: 'Playfair Display', serif;
    font-size: 34px;
    font-weight: 400;
    color: #444;
    text-align: center;
    margin-top: 0;
    margin-bottom: 40px;
}

.about-container {
    max-width: 850px;
    margin: 0 auto;
}

/* The Grey Card */
.about-card {
    background-color: rgba(230, 230, 230, 0.5); /* Matches the light grey transparency */
    border-radius: 24px;
    padding: 32px 40px;
    margin-bottom: 24px;
}

.about-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.about-profile {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-img {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
    background-color: #333; /* Acts as a dark placeholder until you add your image */
}

.profile-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-name {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 600;
    color: #444;
    margin: 0;
}

.profile-title {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-style: italic;
    color: #888;
    margin: 0;
}

/* Pill specific to the About card */
.about-tag {
    margin: 0; 
    background-color: rgba(200, 200, 200, 0.6);
}

.about-text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* The Text Outside the Card */
.about-bottom-content {
    padding: 0 40px; /* This 40px padding aligns it perfectly with the text inside the grey card */
}

.about-text-outside {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 24px;
}

.linkedin-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #333;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.3s ease;
    margin-top: 8px;
}

.linkedin-link svg {
    width: 14px;
    height: 14px;
}

.linkedin-link:hover {
    color: #000;
}


/* --- About Me Mobile --- */
    .about-section {
        padding: 40px 5% 80px;
    }
    
    .about-title {
        font-size: 32px;
    }
    
    .about-card {
        padding: 24px 20px; /* Reduces side padding on mobile */
    }
    
    .about-bottom-content {
        padding: 0 20px; /* Matches the reduced card padding */
    }
    
    .profile-name {
        font-size: 18px;
    }
    
    .profile-img {
        width: 48px;
        height: 48px;
    }


    /* =========================================
   TESTIMONIAL SECTION
========================================= */
.testimonial-section {
    max-width: 1000px; /* Kept narrow so the text breaks naturally like the mockup */
    margin: 0 auto;
    padding: 60px 5% 120px;
    text-align: center;
}

.testi-title {
    font-family: 'Playfair Display', serif;
    font-size: 34px;
    font-weight: 400;
    color: #444;
    margin-top: 0;
    margin-bottom: 40px;
}

.testi-quote {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-style: italic;
    color: #555;
    line-height: 1.6;
    margin: 0 auto 40px auto;
    max-width: 800px;
}

.testi-author-block {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px; /* Space between the person and the logo */
}

.testi-author-info {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left; /* Ensures the name and title stay left-aligned next to the photo */
}

.testi-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #d5d5d5; /* Placeholder grey */
}

.testi-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.testi-name {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #444;
}

.testi-role {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-style: italic;
    color: #888;
}

.testi-linkedin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: #666;
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-top: 2px;
    transition: color 0.3s ease;
}

.testi-linkedin svg {
    width: 10px;
    height: 10px;
}

.testi-linkedin:hover {
    color: #000;
}

.testi-company-logo {
    max-height: 35px;
    width: auto;
    opacity: 0.8; /* Slight fade to match the subtle look of the mockup */
}

/* =========================================
   FOOTER / CONTACT SECTION
========================================= */
.site-footer {
    background-color: #1a1a1a; /* Dark charcoal background */
    
    /* Optional: If you have a dark version of your texture, you can add it here! */
    /* background-image: url('assets/dark-texture.png'); */
    /* background-repeat: repeat; */
    /* background-size: 300px; */
    
    padding: 100px 5% 60px;
    text-align: center;
    color: #ffffff;
}

.footer-container {
    max-width: 800px;
    margin: 0 auto;
}

.footer-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    color: #cccccc;
    margin-bottom: 12px;
}

.footer-title {
    font-family: 'Playfair Display', serif;
    font-size: 44px; /* Scaled down slightly for the 80% look */
    font-weight: 400;
    margin: 0 0 24px 0;
    letter-spacing: -0.5px;
}

.footer-desc {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #999999;
    line-height: 1.6;
    margin: 0 auto 48px auto;
    max-width: 550px;
}

/* Footer Buttons */
.footer-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 80px;
    flex-wrap: wrap;
}

.btn-footer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #ffffff;
    padding: 12px 28px;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
    transition: all 0.3s ease;
}

.btn-footer svg {
    width: 16px;
    height: 16px;
}

.btn-footer:hover {
    background-color: #ffffff;
    color: #1a1a1a; /* Flips text/icon color to dark on hover */
}

/* Footer Divider & Bottom Links */
.footer-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Very subtle line */
    margin-bottom: 40px;
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.footer-nav {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-nav a {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #999999;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: #ffffff;
}

.footer-copy {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #666666;
    margin: 0;
}


/* --- Footer Mobile --- */
    .site-footer {
        padding: 60px 5% 40px;
    }
    
    .footer-title {
        font-size: 34px;
    }
    
    .footer-subtitle {
        font-size: 16px;
    }
    
    .footer-buttons {
        flex-direction: column; /* Stacks the buttons vertically */
        gap: 12px;
        margin-bottom: 50px;
    }
    
    .btn-footer {
        justify-content: center; /* Centers the icon and text inside the stacked buttons */
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .footer-nav {
        gap: 20px;
    }

    /* =========================================
   CASE STUDY & MORE WORK - MOBILE FIXES
========================================= */
@media (max-width: 992px) {
    
    /* --- Case Study Mobile --- */
    .case-study-section {
        flex-direction: column;
        gap: 40px;
        padding: 40px 5% 60px;
    }
    
    .cs-visual {
        width: 100%;
    }
    
    .cs-title {
        font-size: 28px; /* Scaled down for mobile */
        margin-bottom: 16px;
    }

    /* --- More Work Mobile --- */
    .more-work-section {
        padding: 40px 5% 80px;
    }
    
    .mw-title {
        font-size: 32px;
    }
    
    .mw-subtitle {
        font-size: 14px;
    }
    
    .mw-grid {
        grid-template-columns: 1fr; /* Forces the 2x2 grid into a single column */
        gap: 40px;
    }
    
    .mw-card-title {
        font-size: 22px;
    }
}



/* =========================================
   CASE STUDY HERO SECTION (drive.html)
========================================= */
.cs-hero-section {
    display: flex;
    align-items: stretch; /* Allows left and right to match height */
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 5% 80px;
    position: relative;
    min-height: 70vh; /* Gives the section room to breathe */
}

.cs-hero-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 500px;
    z-index: 2;
}

/* Custom dark pills for this hero */
.cs-hero-tags {
    display: flex;
    gap: 12px;
    margin-bottom: 32px;
}

.cs-pill-dark {
    background-color: #444444; /* Solid dark grey */
    color: #ffffff;
    font-size: 11px;
    padding: 6px 16px;
    margin: 0; /* overrides default status-pill margin */
}

/* Typography */
.cs-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 64px; 
    font-weight: 400;
    line-height: 1.1;
    color: #444;
    margin-top: 0;
    margin-bottom: 24px;
    letter-spacing: -1px;
}

.cs-hero-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    margin-top: 0;
    margin-bottom: 0; /* Changed from auto */
    /* Removed padding-bottom entirely */
}

/* Dashed Meta Boxes */
.cs-hero-meta {
    display: flex;
    gap: 20px;
    margin-top: 40px;
}

.meta-box {
    border: 1px dashed #888;
    border-radius: 8px;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background-color: transparent;
}

.meta-label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #666;
    letter-spacing: 0.1em;
}

.meta-value {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #444;
}

/* Visual Mockup Container */
.cs-hero-visual {
    flex: 1.2;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 1;
}

.cs-hero-img {
    width: 100%; /* Allows the image to break out of its container slightly */
    max-width: 900px;
    height: auto;
    object-fit: contain;
    /* Shifts the image to the right and slightly down to match your design */
    transform: translate(10%, 5%); 
    pointer-events: none;
}

/* --- Mobile Responsiveness for Case Study Hero --- */
@media (max-width: 992px) {
    .cs-hero-section {
        flex-direction: column;
        padding: 40px 5% 60px;
        min-height: auto;
    }

    .cs-hero-content {
        align-items: center;
        text-align: center;
        max-width: 100%;
    }

    .cs-hero-title {
        font-size: 42px;
    }

    .cs-hero-subtitle {
        font-size: 12px;
        padding-bottom: 40px;
    }

    .cs-hero-meta {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 20px;
    }

    .cs-hero-visual {
        margin-top: 40px;
        justify-content: center;
    }

    .cs-hero-img {
        width: 100%;
        transform: none; /* Resets the shift on mobile */
    }
}


/* =========================================
   CASE STUDY - CONTENT SECTIONS
========================================= */
.cs-intro-section, 
.cs-glance-section, 
.cs-visuals-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 5%;
}

/* Common Typography for Case Study Body */
.cs-section-title {
    font-family: 'Playfair Display', serif;
    font-size: 34px;
    font-weight: 500;
    color: #444;
    text-align: center;
    margin-bottom: 40px;
}

.cs-body-text {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 24px;
}

/* --- Introduction Box (With Corner Squares) --- */
.intro-box {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: 50px 40px;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    text-align: center;
}

.intro-box .cs-section-title {
    margin-top: 0;
    margin-bottom: 24px;
}

/* Corner Decorator Squares */
.corner-tl, .corner-tr, .corner-bl, .corner-br {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #666;
}
.corner-tl { top: -5px; left: -5px; }
.corner-tr { top: -5px; right: -5px; }
.corner-bl { bottom: -5px; left: -5px; }
.corner-br { bottom: -5px; right: -5px; }


/* --- At A Glance Section --- */
.glance-content {
    max-width: 750px;
    margin: 0 auto;
}

.glance-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-top: 32px;
    margin-bottom: 12px;
}


/* --- Visuals Section (Dashboard & Grids) --- */
.cs-visuals-section {
    padding-top: 60px;
    padding-bottom: 80px;
}

.cs-visual-row-single {
    text-align: center;
    margin-bottom: 100px; /* Space between Dashboard and the 2 bottom images */
}

.visual-label {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 400;
    color: #555;
    margin-bottom: 40px;
}

.cs-full-img {
    width: 100%;
    max-width: 1100px; /* Restricts the dashboard from getting too massive on 4k screens */
    height: auto;
}

.cs-visual-row-grid {
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: flex-start;
}

.visual-col {
    flex: 1;
    max-width: 500px;
    text-align: center;
}

.cs-grid-img {
    width: 100%;
    height: auto;
}


/* --- Impact Section --- */
.cs-impact-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    max-width: 900px; /* Constrains width so the text and chart sit close together */
    margin: 0 auto;
    padding: 40px 5% 120px;
}

.impact-content {
    flex: 1;
}

.impact-content .glance-subtitle {
    margin-top: 0;
}

.impact-visual {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.impact-chart-img {
    width: 100%;
    max-width: 220px; /* Sizes the donut chart appropriately */
    height: auto;
    margin-bottom: 24px;
}

.impact-subtext {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #666;
    max-width: 200px;
    line-height: 1.5;
    margin: 0;
}


/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .intro-box {
        padding: 40px 20px;
    }

    .cs-visual-row-grid {
        flex-direction: column; /* Stacks the two bottom images */
        gap: 60px;
        align-items: center;
    }
    
    .cs-impact-section {
        flex-direction: column; /* Stacks Impact text above chart */
        gap: 40px;
        text-align: center;
    }
    
    .impact-visual {
        flex: 1;
    }
}


/* =========================================
   CASE STUDY - TEXT & LIST SECTIONS
========================================= */

.cs-text-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 5%;
}

/* Wrapper to constrain and center standard paragraph text */
.cs-text-center-wrapper {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Specific styling for the bulleted list to match the design */
.cs-bullet-list {
    text-align: left; /* Keeps the bullets aligned to the left */
    max-width: 650px;
    margin: 32px auto 0 auto; /* Centers the whole block under the paragraph */
    padding-left: 20px;
}

.cs-bullet-list li {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 12px;
}

.cs-bullet-list strong {
    font-weight: 600;
    color: #333;
}

/* --- Solution Box Additions --- */
.cs-solution-box {
    padding-bottom: 60px; /* Gives extra room for the icons at the bottom */
}

.cs-solution-question {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 400;
    color: #444;
    margin-top: 60px;
    margin-bottom: 40px;
}

.cs-solution-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
}

.sol-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
    opacity: 0.8; /* Matches the slightly muted grey tone in the mockup */
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .cs-solution-icons {
        gap: 30px;
    }
    
    .sol-icon {
        width: 48px;
        height: 48px;
    }
}



/* =========================================
   CASE STUDY - COMPETITION & EMPATHY
========================================= */

/* --- Competition Logos --- */
.cs-competitors {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Aligns logos to their bottom edge */
    gap: 100px; /* Spacing between the logos */
    margin-top: 60px;
}

.competitor-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.competitor-item img {
    height: 48px; /* Fixed height so all logos align nicely regardless of width */
    width: auto;
    object-fit: contain;
}

.competitor-item span {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #0078D4; /* A solid default blue, tweak to match your specific Figma hex */
}

/* --- Empathy Map Visual --- */
.cs-empathy-visual {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .cs-competitors {
        gap: 40px;
        flex-wrap: wrap; /* Allows logos to stack if screen gets too small */
    }
    
    .competitor-item img {
        height: 40px;
    }
}



/* =========================================
   CASE STUDY - QUANTITATIVE RESEARCH
========================================= */

/* Constrain width so the text isn't too wide to read easily */
.cs-quant-section {
    max-width: 1000px; 
}

/* Overrides the default centered case study title */
.left-align {
    text-align: left !important;
}

.quant-header {
    margin-bottom: 60px;
}

.cs-section-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 500;
    color: #444;
    margin-bottom: 0; /* Let the grid handle the vertical spacing */
}

/* 2-Column layout for the stats */
.quant-grid {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.quant-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 100px; /* Massive gap between vertical items to match design */
}

/* Creating the staggered zig-zag effect */
.left-col {
    padding-top: 80px; 
    padding-left: 80px; /* Indents the left column inward */
}

.right-col {
    margin-top: -40px; /* Pulls the right column up alongside 'Observations' */
}

.quant-percent {
    font-family: 'Inter', sans-serif;
    font-size: 44px;
    font-weight: 600;
    color: #555;
    margin: 0 0 16px 0;
    letter-spacing: -1px;
}

.quant-desc {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #444;
    line-height: 1.7;
    margin: 0;
}

/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
    .quant-grid {
        flex-direction: column;
        gap: 50px;
        margin-top: 40px;
    }
    
    .quant-col {
        gap: 50px; /* Tightens up the vertical space on small screens */
    }
    
    /* Resets the complex zig-zag formatting for mobile viewing */
    .left-col {
        padding-top: 0;
        padding-left: 0;
    }
    
    .right-col {
        margin-top: 0;
    }
}


/* =========================================
   CASE STUDY - USER NEEDS & FEATURES
========================================= */

/* --- User Needs Custom Arrow List --- */
.cs-user-needs-section {
    max-width: 900px; /* Constrains width so the sentences don't stretch too far */
    margin: 0 auto;
    padding-top: 80px;
}

.cs-arrow-list {
    list-style: none;
    padding: 0;
    margin: 40px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cs-arrow-list li {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.arrow-icon {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    color: #444;
    line-height: 1.6; /* Aligns perfectly with the body text height */
}

/* Removes the default margin on paragraphs inside the list to keep flex alignment clean */
.cs-arrow-list .cs-body-text {
    margin: 0; 
}


/* --- Features & Functionalities --- */
.cs-features-section {
    padding-top: 100px;
    padding-bottom: 120px;
    text-align: center;
}

.cs-features-section .cs-section-title {
    margin-bottom: 12px; /* Tighter spacing above the subtitle */
}

.cs-features-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #444;
    margin-top: 0;
    margin-bottom: 60px;
}

.cs-feature-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px; /* Generous spacing between the items */
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Creates the circular grey background for the icons */
.icon-circle {
    width: 90px;
    height: 90px;
    background-color: rgba(200, 200, 200, 0.4); /* Matches the subtle grey tone */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.f-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    opacity: 0.85; /* Slightly mutes the dark icons */
}

.feature-label {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #444;
}

/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
    .cs-arrow-list li {
        gap: 16px;
    }
    
    .cs-feature-grid {
        flex-direction: column;
        gap: 60px;
    }
}


/* =========================================
   CASE STUDY - PERSONAS
========================================= */

.cs-personas-section {
    max-width: 1200px;
    padding-top: 80px;
}

.persona-block {
    margin-bottom: 80px;
}

.persona-main-title {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 500;
    color: #333;
    margin-bottom: 40px;
}

/* Flexbox Layout */
.persona-content {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

/* Side Column (Profile, About, Maslow) */
.persona-sidebar {
    flex: 0 0 280px; /* Fixed width for the sidebar */
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.persona-profile {
    text-align: center;
}

.persona-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 16px;
    background-color: #d5d5d5;
}

.persona-name {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 4px 0;
}

.persona-role {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #888;
    margin: 0;
}

.persona-sub-label {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 600;
    color: #444;
    margin-top: 0;
    margin-bottom: 16px;
}

/* About Grid */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.about-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #555;
}

.about-item svg {
    width: 16px;
    height: 16px;
    color: #555;
}

.maslow-img {
    width: 100%;
    height: auto;
}

/* Main Text Details */
.persona-details {
    flex: 1;
}

.mt-40 {
    margin-top: 40px;
}

.persona-bullets {
    margin-top: 0;
    margin-bottom: 40px;
    max-width: 100%;
}

.persona-bullets li {
    margin-bottom: 16px;
}

/* The Grey Quote Box */
.persona-quote-box {
    background-color: rgba(180, 180, 180, 0.4); /* Replicates the soft grey from the mockup */
    border-radius: 20px;
    padding: 32px 40px;
    position: relative;
    margin-top: 50px; /* Room for the quote mark to overlap */
}

/* Big Quote Mark floating on the edge */
.quote-icon {
    position: absolute;
    top: -45px;
    left: -10px;
    font-family: 'Playfair Display', serif;
    font-size: 120px;
    line-height: 1;
    color: #555;
    opacity: 0.8;
}

.quote-text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #444;
    line-height: 1.7;
    margin: 0;
    position: relative;
    z-index: 2; /* Keeps text above the massive quote mark */
}

/* Divider between Personas */
.persona-divider {
    border: none;
    border-top: 1px solid #999;
    margin: 80px 0;
    width: 100%;
    max-width: 800px; /* Makes the line a bit shorter than the full width, like the mockup */
    margin-left: auto;
    margin-right: auto;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 992px) {
    .persona-content {
        flex-direction: column;
        gap: 60px;
    }
    
    /* On mobile, forces the reverse layout to stack Profile first, then text, to remain consistent */
    .reverse-content {
        flex-direction: column-reverse;
    }
    
    .persona-sidebar {
        flex: auto;
        width: 100%;
        max-width: 400px;
        margin: 0 auto; /* Centers the sidebar on mobile */
    }
    
    .persona-quote-box {
        padding: 32px 24px;
    }
}

/* =========================================
   CASE STUDY - SCREENS FOR REDESIGN
========================================= */

.cs-screens-section {
    padding-top: 80px;
    padding-bottom: 120px;
}

.screens-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px; /* Generous spacing between each annotated screen */
    margin-top: 60px;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .cs-screens-section {
        padding-top: 60px;
        padding-bottom: 80px;
    }

    .screens-stack {
        gap: 60px; /* Tightens the gap on smaller screens */
        margin-top: 40px;
    }
}

/* =========================================
   CASE STUDY - DESIGN PHASES & TAKEAWAYS
========================================= */

.cs-design-phase {
    padding-top: 60px;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Ensures the whole section content is centered */
}

.cs-phase-title {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 500;
    color: #333;
    margin-bottom: 40px;
    text-align: center; /* Changed from left to center */
    width: 100%;
}

.phase-stack {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the images inside the stack */
    justify-content: center;
    gap: 60px; 
    width: 100%;
}

/* Extra spacing for the final high-fidelity annotated screens if needed */
.visual-design-stack {
    gap: 100px; 
}

/* Extra padding to give the footer some breathing room at the end */
.cs-takeaways-section {
    padding-top: 80px;
    padding-bottom: 140px; 
}

/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
    .cs-phase-title {
        font-size: 22px;
        text-align: center; /* Centers titles on small screens for better balance */
    }
    
    .phase-stack, 
    .visual-design-stack {
        gap: 40px;
    }
    
    .cs-takeaways-section {
        padding-bottom: 80px;
    }
}

/* =========================================
   CASE STUDY - QUICK NAVIGATION
========================================= */

.cs-quick-nav-section {
    max-width: 1000px;
    margin: 40px auto 60px auto;
    padding: 24px 5%;
    display: flex;
    align-items: center;
    gap: 24px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.quick-nav-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap; /* Prevents the label from breaking onto two lines */
}

.quick-nav-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap; /* Allows pills to wrap neatly on desktop */
}

.nav-pill {
    display: inline-block;
    padding: 8px 20px;
    background-color: rgba(220, 220, 220, 0.4);
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    transition: all 0.3s ease;
    text-decoration: none;
    border: 1px solid transparent;
}

.nav-pill:hover {
    background-color: #1a1a1a;
    color: #ffffff;
}

/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
    .cs-quick-nav-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px 5%;
    }
    
    .quick-nav-links {
        flex-wrap: nowrap; /* Forces a horizontal scroll row on mobile */
        overflow-x: auto;
        width: 100%;
        padding-bottom: 8px; /* Room for scrollbar */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
    
    /* Hides the default ugly scrollbar but keeps functionality */
    .quick-nav-links::-webkit-scrollbar {
        height: 4px;
    }
    .quick-nav-links::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 4px;
    }
    
    .nav-pill {
        white-space: nowrap; /* Keeps button text on one line */
    }
}

/* Add this to your style.css */
#overview, #research, #personas, #designs, #takeaways {
    scroll-margin-top: 80px; /* Adjust this number to add more or less space */
}

/* =========================================
   CASE STUDY - SCREENS IN ACTION BOX
========================================= */

.action-box {
    position: relative;
    max-width: 1100px;
    margin: 40px auto 80px auto;
    padding: 140px 40px; /* Huge top/bottom padding to give the title room to breathe */
    border: 1px solid #999; /* Full border on all 4 sides */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Overriding the default title size to make this one massive */
.action-title {
    font-size: 52px !important;
    margin: 0 !important;
    letter-spacing: -1px;
}

/* Pinning the quote to the bottom left */
.action-quote {
    position: absolute;
    bottom: 30px;
    left: 30px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
}

.action-avatar {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background-color: #a0a0a0; /* Grey backdrop */
}

.action-quote-text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #444;
    margin: 0;
    max-width: 280px; /* Prevents the text from stretching too wide */
    line-height: 1.5;
}

/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
    .action-box {
        padding: 80px 20px 140px 20px; /* Extra bottom padding on mobile to clear the quote */
    }
    
    .action-title {
        font-size: 36px !important;
    }
    
    .action-quote {
        bottom: 20px;
        left: 20px;
        right: 20px; /* Allows the quote to stretch across small screens if needed */
    }
}





/* =========================================
   FREELANCE PAGE SPECIFIC STYLES
   (Inherits base styling from style.css)
========================================= */

/* --- Hero Section --- */
.fl-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 5%;
    text-align: center;
    z-index: 2;
}

/* Dashed Selection Box */
.selection-box {
    position: relative;
    border: 2px dashed #999;
    padding: 40px 80px;
    background-color: rgba(200, 200, 200, 0.2);
    margin-bottom: 24px;
}

/* Square Handles */
.handle {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #f1f1f1;
    border: 2px solid #999;
}
.handle.tl { top: -9px; left: -9px; }
.handle.tr { top: -9px; right: -9px; }
.handle.bl { bottom: -9px; left: -9px; }
.handle.br { bottom: -9px; right: -9px; }

.fl-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 64px;
    font-weight: 400;
    color: #444;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -1px;
    text-transform: uppercase;
}

.fl-hero-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #666;
    margin: 0;
}

/* Cursor Decoration */
.fl-cursor {
    position: absolute;
    bottom: -60px;
    right: 10%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 10;
}

.fl-cursor svg {
    width: 24px;
    height: 24px;
    fill: #1a1a1a;
    transform: rotate(-15deg);
}

.fl-cursor-label {
    background-color: #1a1a1a;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 50px;
    margin-top: 4px;
    margin-left: 12px;
}

/* --- Projects List --- */
.fl-projects-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 5% 120px;
}

.fl-project-row {
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 100px 0;
    border-bottom: 1px solid #ccc;
}

.fl-project-row:last-child {
    border-bottom: none;
}

.fl-content {
    flex: 1;
    max-width: 500px;
}

/* Logo Box Treatment */
.fl-logo-box {
    display: inline-block;
    border: 1.5px dashed #999;
    padding: 12px 24px;
    margin-bottom: 24px;
    position: relative;
}

.fl-logo-box::before, .fl-logo-box::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border: 1.5px solid #999;
    background: #f1f1f1; /* Matches page texture background */
}
.fl-logo-box::before { top: -4px; left: -4px; }
.fl-logo-box::after { bottom: -4px; right: -4px; }

.fl-logo-box img {
    max-height: 24px;
    width: auto;
    display: block;
    opacity: 0.8;
}

/* Typography */
.fl-title {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 400;
    color: #444;
    line-height: 1.3;
    margin: 0 0 16px 0;
}

/* Styled Pill Tag */
.fl-role {
    display: inline-block;
    background-color: rgba(200, 200, 200, 0.4);
    padding: 4px 12px;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #666;
    margin: 0 0 24px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fl-desc {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin: 0 0 24px 0;
}

.fl-link {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #333;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.3s ease;
}

.fl-link:hover {
    color: #000;
}

/* Floating Image Styling */
.fl-visual {
    flex: 1.2;
    display: flex;
    justify-content: flex-end; /* Pushes floating images to the right edge */
    align-items: center;
}

.fl-mockup-img {
    width: 100%;
    max-width: 600px;
    height: auto;
    object-fit: contain;
    /* Soft shadow to separate it from the background just like the reference */
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.12)); 
    transition: transform 0.4s ease;
}

.fl-mockup-img:hover {
    transform: translateY(-5px); /* Subtle hovering effect */
}

/* --- Background Decoration Elements --- */
.bg-dashed-line {
    position: absolute;
    z-index: 0;
    opacity: 0.3;
    pointer-events: none;
}

/* --- Mobile Adjustments --- */
@media (max-width: 992px) {
    .fl-hero {
        min-height: auto;
        padding: 60px 5%;
    }
    .selection-box {
        padding: 30px 40px;
    }
    .fl-hero-title {
        font-size: 40px;
    }
    .fl-project-row {
        flex-direction: column;
        gap: 40px;
        padding: 60px 0;
        text-align: left;
    }
    .fl-content {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .fl-visual {
        justify-content: center;
        width: 100%;
    }
    .fl-mockup-img {
        max-width: 100%;
    }
}