/* General Body Styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    background-color: #F9DEC9;
    color: #3A405A;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
header {
    background-color: #3A405A;
    color: #F9DEC9;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background-color 0.3s ease;
}

header.scrolled {
    background-color: rgba(58, 64, 90, 0.9);
    backdrop-filter: blur(10px);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.8rem;
    font-weight: bold;
    text-decoration: none;
    color: #F9DEC9;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

nav ul li a {
    text-decoration: none;
    color: #F9DEC9;
    font-weight: 500;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #AEC5EB;
}


section
{
    overflow-x: hidden;
}
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #F9DEC9;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Hero Section */
#hero {
    background: linear-gradient(135deg, #3A405A, #AEC5EB);
    color: #F9DEC9;
    padding: 100px 0;
    text-align: center;
}

#hero .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.hero-content {
    max-width: 600px;
    text-align: left;
    animation: slideInFromLeft 1s ease-out;
}

.hero-content h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.cta-button {
    background-color: #F9DEC9;
    color: #3A405A;
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.cta-button:hover {
    background-color: #AEC5EB;
    transform: translateY(-3px);
}

.hero-image img {
    /* max-width: 100%;28 */
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
    animation: slideInFromRight 1s ease-out;
}

/* About Preview Section */
/* --- Redesigned About Preview Section --- */
#about-preview-redesigned {
    padding: 120px 0;
    position: relative;
    overflow: hidden; /* Ensures no elements poke out during transitions */
}

/* The main container for the layered elements */
.about-composition {
    position: relative;
    max-width: 950px;
    margin: 0 auto;
    height: 550px; /* Define a height for the composition */
}

/* 1. The decorative, offset background frame */
.about-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 90%;
    border: 5px solid #AEC5EB; /* Use a lighter color for the frame */
    border-radius: 10px;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 2. The wrapper for the image and its overlay */
.about-image-wrapper {
    position: absolute;
    right: 0;
    top: 5%; /* Offset from the top */
    width: 65%;
    height: 90%;
    border-radius: 10px;
    overflow: hidden; /* Important for keeping the image within the rounded corners */
    z-index: 2;
    box-shadow: 0 25px 50px -12px rgba(58, 64, 90, 0.3);
}

/* The actual image */
.about-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(50%); /* Start with a slightly desaturated look */
    transform: scale(1.05);
    transition: filter 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 3. The content card that sits on top of everything */
.about-content-card {
    position: absolute;
    top: 50%;
    left: 20px; /* Give it some space from the edge */
    transform: translateY(-50%);
    width: 58%;
    background: #F9DEC9;
    padding: 3rem;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(58, 64, 90, 0.25);
    z-index: 3; /* Highest z-index to be on top */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}

.about-content-card h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #3A405A;
}

/* Keep the existing link style, it works well */
.learn-more-link {
    color: #3A405A;
    text-decoration: none;
    font-weight: bold;
    position: relative;
    display: inline-block;
    margin-top: 1rem;
}

.learn-more-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px; /* Make it a bit thicker */
    bottom: -5px;
    left: 0;
    background-color: #3A405A; /* Darker underline for contrast */
    transform: scaleX(0);
    transform-origin: left; /* Animate from the left */
    transition: transform 0.4s ease;
}

.learn-more-link:hover::after {
    transform: scaleX(1);
}


/* --- Modern Hover Effects --- */
.about-composition:hover .about-image-wrapper img {
    filter: grayscale(0%); /* Bring full color on hover */
    transform: scale(1); /* Zoom out slightly for a parallax effect */
}

.about-composition:hover .about-content-card {
    transform: translateY(-50%) translateX(-10px); /* Lift and shift the card */
    box-shadow: 0 30px 50px rgba(58, 64, 90, 0.3);
}

.about-composition:hover .about-frame {
    transform: translate(10px, 10px); /* Move the frame for added depth */
}


/* --- Responsive Design for the Redesigned Section --- */
@media (max-width: 992px) {
    .about-composition {
        height: auto; /* Let height be determined by content */
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* Stack the elements instead of positioning them absolutely */
    .about-frame {
       display: none; /* Hide the decorative frame on smaller screens for simplicity */
    }

    .about-image-wrapper, .about-content-card {
        position: static;
        width: 100%;
        transform: none;
        box-sizing: border-box; /* Ensure padding is included in width */
    }
    
    .about-image-wrapper {
        height: 400px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    .about-content-card {
       margin-top: -80px; /* Pull the card up over the bottom of the image */
       z-index: 5;
       width: 90%;
       margin-left: auto;
       margin-right: auto;
    }
}

@media (max-width: 768px) {
    #about-preview-redesigned {
        padding: 80px 0;
    }
    
    .about-content-card {
        padding: 2rem;
        margin-top: -60px;
    }
    
    .about-content-card h2 {
        font-size: 2rem;
    }
}
/* Services Highlight Section */
#services-highlight {
    background-color: #AEC5EB;
    padding: 80px 0;
    text-align: center;
}

#services-highlight h2 {
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.service-cards {
    display: flex;
    justify-content: space-around;
    gap: 2rem;
}

.card {
    background-color: #F9DEC9;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 30%;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.card img {
    margin-bottom: 1rem;
}

.card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Market Insights Section */
/* --- Redesigned Market Insights Section --- */
#market-insights-redesigned {
    padding: 120px 0;
    position: relative;
    overflow: hidden; /* Contains the animated dots */
    
    /* The parallax background image with a dark overlay for contrast */
    background-image: linear-gradient(rgba(58, 64, 90, 0.75), rgba(58, 64, 90, 0.75)), url('images/market.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* This creates the parallax effect */
}

/* The "Glass Morphism" card for the content */
.insights-glass-card {
    max-width: 800px;
    margin: 0 auto; /* Center the card */
    text-align: center;
    
    /* The glass effect */
    background: rgba(249, 222, 201, 0.1); /* Very subtle background color */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Card styling */
    border-radius: 15px;
    border: 1px solid rgba(249, 222, 201, 0.2);
    padding: 3rem 4rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    color: #F9DEC9; /* Light text color for contrast */
}

.insights-glass-card h2 {
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
    color: #fff; /* Make the title brighter */
}

.insights-glass-card p {
    font-size: 1.1rem;
    line-height: 1.7;
}

/* --- Animated background dots for a "live data" feel --- */
.insight-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(174, 197, 235, 0.5); /* #AEC5EB with opacity */
    border-radius: 50%;
    animation: float 10s infinite ease-in-out;
}

/* Random positions and animation delays for a natural look */
.insight-dot.dot1 {
    top: 20%;
    left: 15%;
    animation-delay: 0s;
    animation-duration: 8s;
}
.insight-dot.dot2 {
    top: 70%;
    left: 30%;
    animation-delay: 2s;
    animation-duration: 12s;
}
.insight-dot.dot3 {
    top: 80%;
    right: 20%;
    animation-delay: 4s;
    animation-duration: 10s;
}
.insight-dot.dot4 {
    top: 30%;
    right: 10%;
    animation-delay: 1s;
    animation-duration: 9s;
}

/* The floating animation */
@keyframes float {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-30px) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.5;
    }
}

/* --- Responsive Design for the Redesigned Section --- */
@media (max-width: 992px) {
    /* Parallax effect can be choppy on mobile, so we switch to a standard scroll */
    #market-insights-redesigned {
        background-attachment: scroll;
    }
    .insights-glass-card {
        padding: 2.5rem 3rem;
    }
}

@media (max-width: 768px) {
    #market-insights-redesigned {
        padding: 80px 0;
    }
    .insights-glass-card {
        padding: 2rem;
    }
    .insights-glass-card h2 {
        font-size: 2.2rem;
    }
    /* Hide some of the decorative dots on smaller screens to reduce clutter */
    .insight-dot.dot3, .insight-dot.dot4 {
        display: none;
    }
}

/* Client Testimonials Section */
/* --- Modern Testimonial Slider Section --- */
#client-testimonials-slider {
    background-color: #3A405A;
    color: #F9DEC9;
    padding: 80px 0;
    text-align: center;
}

#client-testimonials-slider h2 {
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

/* This container holds the viewport and the navigation elements */
.slider-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

/* The "window" through which you see the slides */
.slider-viewport {
    overflow: hidden;
    width: 100%;
}

/* The element that holds all slides and moves */
.slider-track {
    display: flex;
    /* The JS will calculate the width */
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth sliding animation */
}

/* A single slide, it takes up the full width of the viewport */
.testimonial-slide {
    flex: 1 0 100%;
    box-sizing: border-box;
    padding: 0 20px; /* Creates a small gap between slide content */
}

/* The redesigned card for the testimonial content */
.testimonial-card {
    background-color: #F9DEC9;
    color: #3A405A;
    padding: 3rem;
    border-radius: 10px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 280px;
    justify-content: center;
}

/* A large decorative quotation mark */
.testimonial-card::before {
    content: '“';
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 6rem;
    color: rgba(174, 197, 235, 0.5); /* #AEC5EB with opacity */
    line-height: 1;
    z-index: 1;
}

.testimonial-card img {
    border-radius: 50%;
    margin-bottom: 1.5rem;
    width: 80px;
    height: 80px;
    border: 4px solid #3A405A;
    z-index: 2; /* Sits above the quote mark */
}

.testimonial-card p {
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
    max-width: 600px;
    z-index: 2; /* Sits above the quote mark */
}

.testimonial-card span {
    font-weight: bold;
    font-size: 1rem;
    z-index: 2; /* Sits above the quote mark */
}


/* --- Slider Navigation Controls --- */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(249, 222, 201, 0.5); /* #F9DEC9 */
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 2rem;
    color: #3A405A;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 10;
}

.slider-nav:hover {
    background-color: #F9DEC9;
    transform: translateY(-50%) scale(1.1);
}

.slider-nav.prev {
    left: -60px;
}

.slider-nav.next {
    right: -60px;
}

/* Style for when a button is disabled (at the start/end) */
.slider-nav.is-hidden {
    opacity: 0.3;
    cursor: not-allowed;
}


/* --- Slider Pagination Dots --- */
.slider-dots {
    display: flex;
    justify-content: center;
    padding-top: 2rem;
}

.slider-dot {
    border: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(249, 222, 201, 0.4);
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.slider-dot:hover {
    background: #AEC5EB;
}

.slider-dot.current-slide {
    background: #F9DEC9;
    transform: scale(1.2);
}

/* --- Responsive Adjustments for Slider --- */
@media (max-width: 992px) {
    /* Move arrows inside on smaller screens */
    .slider-nav.prev {
        left: 10px;
    }
    .slider-nav.next {
        right: 10px;
    }
}

@media (max-width: 768px) {
    .testimonial-card {
        padding: 2.5rem 1.5rem;
        min-height: 320px;
    }
    .testimonial-card p {
        font-size: 1rem;
    }
}
/* Technology Focus Section */
/* --- Redesigned Technology Focus Section --- */
#technology-focus-redesigned {
    padding: 120px 0;
    position: relative;
    background-color: #3A405A; /* Dark background is key for this design */
    overflow: hidden; /* Contains all animated elements */
    color: #F9DEC9;
}

/* The animated hexagonal pattern background */
.hex-grid-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Self-contained SVG for the hex pattern */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23AEC5EB' fill-opacity='0.1'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    animation: pulseGrid 10s infinite ease-in-out;
    z-index: 1;
}

@keyframes pulseGrid {
    0% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
    100% { opacity: 0.5; transform: scale(1); }
}

/* The main layout container */
.tech-layout {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
    z-index: 5; /* Sits above the grid and lines */
}

/* The central content hub */
.tech-hub {
    width: 450px;
    height: 500px;
    background: rgba(249, 222, 201, 0.05); /* Very subtle glass effect */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(174, 197, 235, 0.2);
    /* This creates the hexagon shape */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hub-content {
    padding: 4rem;
}

.hub-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #fff; /* Brighter title */
}

/* The smaller satellite nodes */
.tech-node {
    position: absolute;
    width: 150px;
    height: 170px;
    background: rgba(249, 222, 201, 0.1);
    border: 1px solid rgba(174, 197, 235, 0.3);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
    cursor: default;
}

.tech-node:hover {
    transform: scale(1.1);
    border-color: #F9DEC9;
}

.node-icon {
    font-size: 2rem;
    font-weight: bold;
    color: #AEC5EB;
}

.tech-node span {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    text-align: center;
}

/* Positioning the nodes around the central hub */
.node-ai { top: 0; left: 12%; }
.node-ml { top: 0; right: 12%; }
.node-block { bottom: 0; left: 12%; }
.node-quant { bottom: 0; right: 12%; }


/* --- Animated glowing data lines --- */
.grid-line {
    position: absolute;
    width: 2px;
    height: 100%;
    background: #AEC5EB;
    box-shadow: 0 0 10px rgba(174, 197, 235, 0.7);
    opacity: 0;
    animation: flow 8s infinite linear;
    z-index: 2;
}

@keyframes flow {
    0% { transform: translateY(-100%); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(100%); opacity: 0; }
}

/* Stagger the lines for a random effect */
.line1 { left: 10%; animation-duration: 7s; animation-delay: 0s; }
.line2 { left: 30%; animation-duration: 8s; animation-delay: 3s; }
.line3 { left: 50%; animation-duration: 6s; animation-delay: 1s; }
.line4 { left: 70%; animation-duration: 9s; animation-delay: 4s; }
.line5 { left: 90%; animation-duration: 7s; animation-delay: 2s; }


/* --- Responsive Design for the Redesigned Section --- */
@media (max-width: 992px) {
    .tech-layout {
        flex-direction: column;
        min-height: auto;
    }
    
    .tech-hub {
        width: 100%;
        height: auto;
        clip-path: none; /* Revert to a rectangle */
        border-radius: 10px;
        margin-bottom: 2rem;
    }
    
    /* Reposition nodes into a simple grid below */
    .tech-node {
        position: static;
        width: auto;
        height: 120px;
        clip-path: none;
        border-radius: 10px;
    }
    
    /* Create a grid for the nodes */
    .tech-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .tech-hub {
        grid-column: 1 / -1; /* Hub spans all columns */
    }
    
    /* Arrange nodes in a 2x2 grid by adding a wrapper */
    /* Let's adjust the HTML for this - no, we can do it with CSS grid! */
    /* We'll use a CSS grid on the main layout container */
    #technology-focus-redesigned .container {
        max-width: 600px; /* Constrain width for a better grid layout */
    }
    .tech-layout {
        display: grid;
        grid-template-areas:
            "hub hub"
            "ai ml"
            "block quant";
        gap: 1rem;
    }
    .tech-hub { grid-area: hub; }
    .node-ai { grid-area: ai; }
    .node-ml { grid-area: ml; }
    .node-block { grid-area: block; }
    .node-quant { grid-area: quant; }
}

@media (max-width: 768px) {
    #technology-focus-redesigned {
        padding: 80px 0;
    }
    
    .hub-content {
        padding: 2.5rem;
    }
    
    .hub-content h2 {
        font-size: 2rem;
    }
}

/* CTA Section */
#cta-section {
    background: linear-gradient(135deg, #AEC5EB, #F9DEC9);
    padding: 80px 0;
    text-align: center;
}

#cta-section h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

/* --- Company Page Styles --- */

/* Company Hero Section */
#company-hero {
    background-image: linear-gradient(rgba(58, 64, 90, 0.8), rgba(58, 64, 90, 0.8)), url('images/company-hero.webp');
    background-size: cover;
    background-position: center;
    padding: 120px 0;
    text-align: center;
    color: #F9DEC9;
}

.company-hero-content {
    max-width: 800px;
    margin: 0 auto;
    animation: fadeIn 1.5s ease-in-out;
}

.company-hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.company-hero-content p {
    font-size: 1.2rem;
}

/* History Timeline Section */
/* --- Modern History Timeline Tabs Section --- */
#history-tabs {
    padding: 80px 0;
    background-color: #F9DEC9;
}

#history-tabs h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #3A405A;
}

.timeline-tabs-container {
    max-width: 900px;
    margin: 0 auto;
}

/* --- Tab Navigation Bar --- */
.timeline-nav {
    position: relative;
    display: flex;
    border-bottom: 2px solid rgba(174, 197, 235, 0.5); /* Light bottom border */
}

.timeline-tab {
    flex: 1;
    padding: 1rem 0;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #3A405A;
    opacity: 0.6;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.timeline-tab.active {
    opacity: 1;
    color: #3A405A;
}

.timeline-tab:hover {
    opacity: 1;
}

/* The animated underline/indicator */
.timeline-nav-indicator {
    position: absolute;
    bottom: -2px; /* Sits right on top of the nav border */
    height: 3px;
    background-color: #3A405A;
    border-radius: 2px;
    transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}


/* --- Tab Content Panels --- */
.timeline-content-wrapper {
    position: relative;
    padding-top: 3rem;
    min-height: 350px; /* Prevents layout jump when switching tabs */
}

.timeline-panel {
    display: none; /* Hide all panels by default */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.timeline-panel.active {
    display: flex; /* Show the active panel */
    align-items: center;
    gap: 3rem;
    /* Trigger the animation */
    opacity: 1;
    transform: translateY(0);
}

.panel-content {
    flex: 1;
}

.panel-content h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.panel-image {
    flex: 1;
}

.panel-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(58, 64, 90, 0.2);
}


/* --- Responsive Design for Timeline Tabs --- */
@media (max-width: 768px) {
    .timeline-panel.active {
        flex-direction: column;
        text-align: center;
    }

    .timeline-tab {
        font-size: 1.2rem;
    }
}
/* Leadership Team Section */
/* --- Modern Leadership Team Slider Section --- */
#leadership-slider {
    padding: 80px 0;
    background-color: #AEC5EB;
    text-align: center;
    overflow: hidden; /* Important for preventing horizontal scrollbars */
}

#leadership-slider h2 {
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #3A405A;
}

.team-slider-container {
    position: relative;
}

/* The viewport creates the main window for the slider */
.team-slider-viewport {
    overflow: hidden;
    /* This is a trick to show adjacent slides. Adjust as needed. */
    width: 100%; 
    max-width: 400px;
    margin: 0 auto;
}

/* The track holds all slides and will be moved by JS */
.team-slider-track {
    display: flex;
    /* Adding a large gap that will be centered */
    gap: 40px; 
    /* The JS will set the initial transform */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* A single slide, acting as a container for the card */
.team-slide {
    flex: 0 0 320px; /* Each slide has a fixed width */
    opacity: 0.5;
    transform: scale(0.8); /* Inactive slides are smaller */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}

/* The active (centered) slide */
.team-slide.is-active {
    opacity: 1;
    transform: scale(1); /* Active slide is full size */
}

/* The main card for team member info */
.team-card {
    background-color: #F9DEC9;
    padding: 2.5rem 2rem;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(58, 64, 90, 0.2);
    height: 100%;
}

.team-card img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover;
    margin: 0 auto 1.5rem;
    border: 5px solid #3A405A;
    display: block;
}

.team-card h3 {
    margin: 0.5rem 0;
    font-size: 1.6rem;
    color: #3A405A;
}

.team-card p {
    font-style: italic;
    color: #3A405A;
    margin: 0 0 1rem 0;
    font-weight: 500;
}

.team-card span {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* --- Slider Navigation Arrows --- */
.team-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(58, 64, 90, 0.5); /* #3A405A */
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 2.2rem;
    color: #F9DEC9;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 10;
}

.team-slider-nav:hover {
    background-color: #3A405A;
    transform: translateY(-50%) scale(1.1);
}

/* Position arrows outside the main content area */
.team-slider-nav.prev {
    left: 20px;
}

.team-slider-nav.next {
    right: 20px;
}

/* --- Responsive Design for Leadership Slider --- */
@media (max-width: 768px) {
    .team-slider-viewport {
        max-width: 300px; /* Smaller viewport on mobile */
    }

    .team-slide {
        flex-basis: 280px; /* Smaller cards on mobile */
    }

    /* Move arrows closer in */
    .team-slider-nav.prev {
        left: 5px;
    }
    .team-slider-nav.next {
        right: 5px;
    }
    .team-slider-nav {
        width: 40px;
        height: 40px;
        font-size: 1.8rem;
    }
}

/* Our Philosophy Section */
/* --- Redesigned Interactive Philosophy Section --- */
#our-philosophy-interactive {
    padding: 100px 0;
    position: relative;
    background-color: #3A405A; /* Dark background for a premium feel */
    color: #F9DEC9;
    overflow: hidden;
}

/* Use CSS Grid for a sophisticated asymmetrical layout */
.philosophy-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2/3 for display, 1/3 for triggers */
    align-items: center;
    gap: 4rem;
    min-height: 500px;
}

/* --- The Central Display Area --- */
.philosophy-display {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* The animated rings container */
.rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}

/* The individual rings */
.ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid rgba(174, 197, 235, 0.2); /* #AEC5EB */
    border-radius: 50%;
    transform-origin: center;
    animation: spin 20s infinite linear;
    box-shadow: 0 0 0 rgba(174, 197, 235, 0);
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.ring-1 { width: 300px; height: 300px; margin-left: -150px; margin-top: -150px; animation-duration: 20s; }
.ring-2 { width: 400px; height: 400px; margin-left: -200px; margin-top: -200px; animation-duration: 30s; animation-direction: reverse; }
.ring-3 { width: 500px; height: 500px; margin-left: -250px; margin-top: -250px; animation-duration: 45s; }

/* The spinning animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* The glow effect when a trigger is active */
.rings.is-glowing .ring {
    border-color: rgba(174, 197, 235, 0.6);
    box-shadow: 0 0 30px rgba(174, 197, 235, 0.3);
}

/* The content inside the rings */
.display-content {
    position: relative;
    z-index: 5;
    max-width: 400px;
    transition: opacity 0.2s ease-out;
}
/* Class for fade out/in effect */
.display-content.is-changing {
    opacity: 0;
}

#philosophy-title {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 1rem;
}
#philosophy-text {
    line-height: 1.7;
    color: rgba(249, 222, 201, 0.8);
}


/* --- The Trigger Cards --- */
.philosophy-triggers {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.trigger-card {
    background: rgba(249, 222, 201, 0.05);
    border: 1px solid rgba(174, 197, 235, 0.2);
    border-radius: 10px;
    padding: 1.5rem 2rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.trigger-card:hover, .trigger-card.is-active {
    background-color: rgba(249, 222, 201, 0.1);
    border-color: #AEC5EB;
}

.trigger-card h3 {
    font-size: 1.4rem;
    color: #F9DEC9;
    margin: 0;
}

/* --- Responsive Design for Interactive Section --- */
@media (max-width: 992px) {
    .philosophy-layout {
        grid-template-columns: 1fr; /* Stack the columns */
        min-height: auto;
    }
    .philosophy-display {
        min-height: 400px; /* Give it space on mobile */
    }
    .philosophy-triggers {
        flex-direction: row; /* Side-by-side on tablet */
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .philosophy-triggers {
        flex-direction: column; /* Stack again on mobile */
    }
    .trigger-card {
        text-align: center;
    }
    .ring-3 {
        display: none; /* Hide the largest ring to reduce clutter */
    }
}
/* Global Presence Section */
/* --- Redesigned Global Presence Section (Columns) --- */
#global-presence-columns {
    padding: 100px 0;
    background: #3A405A;
    color: #F9DEC9;
    overflow: hidden;
}

#global-presence-columns h2 {
    text-align: center;
    font-size: 2.5rem;
}

#global-presence-columns .section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 4rem;
    color: rgba(249, 222, 201, 0.8);
}

/* The three-column grid layout */
.presence-grid {
    display: grid;
    /* Asymmetrical columns for visual interest */
    grid-template-columns: 1fr 1.5fr 2fr;
    align-items: center;
    gap: 2rem;
}


/* --- Column 1: Location List --- */
.location-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-right: 1px solid rgba(174, 197, 235, 0.2);
    padding-right: 2rem;
}

.location-trigger {
    background: none;
    border: none;
    padding: 1rem;
    border-radius: 10px;
    text-align: left;
    color: #F9DEC9;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease;
}
.location-trigger::before {
    content: '›';
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease, left 0.3s ease;
}

.location-trigger:hover {
    background: rgba(249, 222, 201, 0.05);
}
.location-trigger.is-active {
    background: rgba(249, 222, 201, 0.1);
}
.location-trigger.is-active::before {
    opacity: 1;
    left: 5px;
}

.location-trigger h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.8rem;
}
.location-trigger span {
    font-size: 0.9rem;
    color: #AEC5EB;
}


/* --- Column 2: Visual Centerpiece --- */
.presence-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}
.rotating-globe .globe-continents {
    transform-origin: center;
    animation: rotate-globe 25s infinite linear;
}
@keyframes rotate-globe {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* --- Column 3: Location Details --- */
.details-card {
    background: rgba(249, 222, 201, 0.05);
    border-radius: 15px;
    overflow: hidden;
    /* Transition for content swapping */
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.details-card.is-changing {
    opacity: 0;
    transform: scale(0.98);
}

.details-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}
.card-content {
    padding: 2rem;
}
.card-content h3 {
    font-size: 2rem;
    margin: 0 0 1rem 0;
    color: #fff;
}
.card-content p {
    margin: 0;
    line-height: 1.7;
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .presence-grid {
        grid-template-columns: 1fr; /* Stack the columns */
        gap: 3rem;
    }
    .location-list {
        flex-direction: row; /* Make list horizontal on tablet */
        border-right: none;
        border-bottom: 1px solid rgba(174, 197, 235, 0.2);
        padding: 0 0 2rem 0;
        justify-content: center;
    }
    .presence-visual {
        order: 3; /* Move visual to the bottom */
        max-width: 250px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .location-list {
        flex-direction: column; /* Stack list again on mobile */
        border-bottom: none;
        padding-bottom: 0;
    }
    .location-trigger {
        text-align: center;
    }
    .location-trigger::before {
        display: none; /* Hide the little arrow on mobile */
    }
}
/* Corporate Culture Section */
/* --- Redesigned Corporate Culture Section (Overlapping Panels) --- */
#corporate-culture-panels {
    padding: 120px 0;
    background-color: #F9DEC9; /* Light background from your palette */
    overflow: hidden; /* Important for containing elements that might shift on hover */
}

/* This container uses position: relative to act as an anchor for the absolute-positioned panels inside */
.culture-layout {
    position: relative;
    max-width: 950px;
    margin: 0 auto;
    min-height: 550px; /* Give the container a defined height to work with */
}

/* The decorative shape in the background (lowest z-index) */
.culture-background-shape {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 60%;
    height: 70%;
    border: 4px solid #3A405A;
    border-radius: 15px;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* The panel that holds the image */
.culture-image-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 65%;
    height: 100%;
    border-radius: 15px;
    overflow: hidden; /* Ensures the image respects the border-radius */
    box-shadow: 0 25px 50px -12px rgba(58, 64, 90, 0.3);
    z-index: 2; /* Sits above the background shape */
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.culture-image-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the panel without distortion */
}

/* The panel that holds the content (highest z-index) */
.culture-content-panel {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 55%;
    background: rgba(174, 197, 235, 0.9); /* #AEC5EB with slight transparency */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 3rem;
    box-shadow: 0 20px 40px rgba(58, 64, 90, 0.25);
    z-index: 3; /* Sits on top of everything */
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.culture-content-panel h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #3A405A;
}
.culture-content-panel p {
    font-size: 1rem;
    line-height: 1.7;
    color: #3A405A;
}

/* --- Subtle Hover Effects for Depth --- */
.culture-layout:hover .culture-image-panel {
    transform: translateX(-10px) translateY(-10px) scale(1.02);
}
.culture-layout:hover .culture-content-panel {
    transform: translateY(-50%) translateX(10px);
}
.culture-layout:hover .culture-background-shape {
    transform: translateX(10px) translateY(10px);
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .culture-layout {
        position: static; /* Remove relative positioning to stack elements normally */
        min-height: auto;
    }
    .culture-background-shape {
        display: none; /* Hide the decorative shape for simplicity */
    }
    .culture-image-panel, .culture-content-panel {
        position: static; /* Remove absolute positioning */
        width: 100%;
        transform: none;
    }
    .culture-image-panel {
        height: 400px; /* Give the image a fixed height */
    }
    .culture-content-panel {
        margin-top: -80px; /* Pull the content card up over the image */
        position: relative; /* Needs to be relative to have a z-index */
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    #corporate-culture-panels {
        padding: 80px 0;
    }
    .culture-content-panel {
        padding: 2rem;

        /* margin-top: -60px; */
    }
    .culture-content-panel h2 {
        font-size: 2rem;
    }
}

/* ESG Commitment Section */
#esg-commitment {
    padding: 80px 0;
    background-image: linear-gradient(to right, #AEC5EB, #F9DEC9);
}

#esg-commitment .container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.esg-content {
    max-width: 800px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    padding: 3rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(58, 64, 90, 0.37);
}

.esg-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-align: center;
}


/* Responsive Adjustments for Company Page */
@media (max-width: 768px) {
    .timeline::after {
        left: 20px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    .timeline-item:nth-child(odd), .timeline-item:nth-child(even) {
        left: 0;
        justify-content: flex-start;
        flex-direction: row-reverse;
        text-align: left;
    }

    .timeline-item::after {
        left: 10px;
    }
    
    #our-philosophy .container, #corporate-culture .container {
        flex-direction: column-reverse;
    }

    .philosophy-content, .culture-content {
        max-width: 100%;
    }
}

/* Additional Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- Strategies Page Styles --- */

/* Strategy Hero Section */
/* --- Redesigned "Superb" Strategy Hero Section --- */
#strategy-hero-redesigned {
    position: relative;
    padding: 150px 0;
    background-color: #3A405A; /* Deep, professional background */
    color: #F9DEC9;
    text-align: center;
    overflow: hidden; /* Crucial for containing the shapes */
}

/* --- Background Elements --- */
.hero-background-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* The animated "blueprint" grid */
.hero-grid {
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(174, 197, 235, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(174, 197, 235, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: pan-grid 30s linear infinite;
}
@keyframes pan-grid {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}

/* The floating geometric shapes */
.shape {
    position: absolute;
    will-change: transform; /* Performance optimization for animations */
    transition: transform 0.8s cubic-bezier(0.1, 0.9, 0.2, 1); /* Smooth parallax transition */
}
.shape-1 {
    width: 80px;
    height: 80px;
    border: 2px solid rgba(174, 197, 235, 0.5);
    border-radius: 50%;
    top: 20%;
    left: 15%;
    animation: float 8s infinite ease-in-out;
}
.shape-2 {
    width: 40px;
    height: 40px;
    background: #AEC5EB;
    opacity: 0.5;
    top: 30%;
    right: 20%;
    animation: float 10s infinite ease-in-out reverse;
}
.shape-3 {
    width: 120px;
    height: 120px;
    border: 2px solid rgba(249, 222, 201, 0.3);
    bottom: 15%;
    right: 10%;
    animation: rotate 25s infinite linear;
}
.shape-4 {
    width: 60px;
    height: 60px;
    border: 2px solid #AEC5EB;
    bottom: 25%;
    left: 10%;
    animation: rotate 15s infinite linear reverse;
}
/* Keyframe animations for floating and rotating */
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* --- Main Content --- */
.hero-content-main {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
    /* An improved entrance animation */
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1.5s 0.5s forwards cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content-main h1 {
    font-size: 4.5rem; /* Larger and more impactful */
    margin-bottom: 1.5rem;
    color: #fff;
    letter-spacing: 1px;
}
.hero-content-main p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(249, 222, 201, 0.9);
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .hero-content-main h1 {
        font-size: 3.5rem;
    }
    /* Hide some shapes to reduce clutter */
    .shape-3, .shape-4 {
        display: none;
    }
}
@media (max-width: 768px) {
    #strategy-hero-redesigned {
        padding: 120px 0;
    }
    .hero-content-main h1 {
        font-size: 2.8rem;
    }
    .hero-content-main p {
        font-size: 1.1rem;
    }
    /* Hide all shapes on mobile to prioritize performance and readability */
    .shape {
        display: none;
    }
}


/* Strategy Pillars Section */
#strategy-pillars {
    padding: 80px 0;
    background-color: #F9DEC9;
    text-align: center;
}

#strategy-pillars h2 {
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.pillar {
    padding: 2rem;
    border: 2px solid #AEC5EB;
    border-radius: 10px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.pillar:hover {
    background-color: #AEC5EB;
    color: #3A405A;
    transform: translateY(-10px);
}

.pillar img {
    background-color: #3A405A;
    border-radius: 50%;
    padding: 15px;
    margin-bottom: 1rem;
}

.pillar h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Deep Dive Sections (Quantitative & Growth Equity) */
/* --- Redesigned and Unified Deep Dive Section --- */
#strategies-deep-dive {
    /* This section will take up the full height of the viewport */
    height: 100vh;
    min-height: 700px; /* Ensure it's not too small on short screens */
    padding: 0;
    background-color: #3A405A;
}

/* The main flex container that holds the two panels */
.deep-dive-container {
    display: flex;
    width: 100%;
    height: 70%;
}

/* Styling for each individual strategy panel */
.strategy-panel {
    position: relative;
    flex: 1; /* By default, each panel takes up equal space */
    overflow: hidden;
    color: #F9DEC9;
    padding: 4rem;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align content to the bottom */

    /* The core of the smooth animation */
    transition: flex 0.8s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.8s ease;
}

/* We use ::before pseudo-elements for the background images and overlays */
.strategy-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-size: cover;
    background-position: center;
    /* Dark overlay by default */
    background-color: rgba(58, 64, 90, 0.8);
    background-blend-mode: multiply;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.8s ease;
}

/* Set the specific background images for each panel */
#quant-panel::before {
    background-image: url('images/quant-1.webp');
}
#growth-panel::before {
    background-image: url('images/quant-2.webp');
}

/* The content container inside each panel */
.panel-content {
    position: relative;
    z-index: 2;
    transform: translateY(20px);
    transition: transform 0.6s ease;
}
.panel-content h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #fff;
}
.panel-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 500px;
    /* Hide the paragraph by default */
    opacity: 0;
    max-height: 0;
    transition: opacity 0.6s ease, max-height 0.6s ease, transform 0.6s ease;
    transform: translateY(10px);
}

/* The "Explore" prompt visible in the contracted state */
.panel-prompt {
    position: absolute;
    bottom: 4rem;
    left: 4rem;
    z-index: 3;
    font-size: 1.2rem;
    font-weight: 500;
    color: #AEC5EB;
    opacity: 1;
    transition: opacity 0.6s ease;
}


/* --- THE INTERACTIVE HOVER EFFECT --- */

/* When the user hovers over the main container... */
.deep-dive-container:hover .strategy-panel {
    /* Make the non-hovered panel shrink */
    flex: 1;
}

.deep-dive-container:hover .strategy-panel:hover {
    /* Make the hovered panel expand significantly */
    flex: 2.5;
}

/* Reveal and animate the content in the hovered panel */
.deep-dive-container:hover .strategy-panel:hover .panel-content p {
    opacity: 1;
    max-height: 200px; /* Adjust if your text is longer */
    transform: translateY(0);
}

/* Hide the "Explore" prompt in the hovered panel */
.deep-dive-container:hover .strategy-panel:hover .panel-prompt {
    opacity: 0;
}

/* Make the background image slightly clearer and zoom in on hover */
.deep-dive-container:hover .strategy-panel:hover::before {
    background-color: rgba(58, 64, 90, 0.6);
    transform: scale(1.05);
}


/* --- Responsive Design for the Unified Section --- */
@media (max-width: 992px) {
    #strategies-deep-dive {
        height: auto; /* Revert to natural height */
        min-height: 0;
    }
    .deep-dive-container {
        flex-direction: column; /* Stack the panels vertically */
    }
    .strategy-panel {
        min-height: 50vh; /* Give each panel a decent height */
        justify-content: center; /* Center content vertically */
        text-align: center;
        padding: 3rem;
    }
    .panel-content {
        transform: translateY(0);
    }
    .panel-content p {
        /* Always show the text on mobile since there is no hover */
        opacity: 1;
        max-height: 200px;
        transform: translateY(0);
        margin: 0 auto;
    }
    .panel-prompt {
        display: none; /* Hide the prompt on mobile */
    }

    /* Disable the flex-grow animation on mobile */
    .deep-dive-container:hover .strategy-panel,
    .deep-dive-container:hover .strategy-panel:hover {
        flex: 1;
    }
}

/* ESG Integration Section (Glass Morphism) */
/* --- Redesigned ESG Section (CSS-Only Interactive Accordion) --- */
#esg-accordion-css {
    padding: 100px 0;
    background-color: #3A4A5A; /* Slightly different dark blue for variety */
    color: #F9DEC9;
}

.esg-intro-text {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem;
}
.esg-intro-text h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #fff;
}
.esg-intro-text p {
    font-size: 1.2rem;
    line-height: 1.7;
    color: rgba(249, 222, 201, 0.8);
}

/* The main flex container for the accordion panels */
.esg-accordion-container {
    display: flex;
    min-height: 500px;
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* Individual panel styling */
.esg-panel {
    position: relative;
    overflow: hidden;
    flex: 1; /* Default state: all panels share space equally */
    border-radius: 20px;
    border: 2px solid rgba(174, 197, 235, 0.3);

    /* The core of the animation */
    transition: flex 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.8s ease;
}

/* Background images for each panel */
.esg-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    filter: grayscale(80%);
    transition: filter 0.8s ease, transform 0.8s ease;
}
.panel-e::before { background-image: url('images/sust-1.webp'); }
.panel-s::before { background-image: url('images/sust-2.webp'); }
.panel-g::before { background-image: url('images/sust-3.webp'); }

/* Content styling inside the panel */
.panel-content {
    position: relative;
    z-index: 2;
    background: linear-gradient(to top, rgba(58, 64, 90, 0.9) 0%, rgba(58, 64, 90, 0) 100%);
    width: 100%;
    height: 100%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align content to the bottom */
}

/* The main title of each panel (E, S, or G) */
.panel-content h3 {
    font-size: 2.5rem;
    writing-mode: vertical-rl; /* Writes the text vertically */
    transform: rotate(180deg); /* Flips it to read top-to-bottom */
    color: #fff;
    transition: transform 0.6s ease, opacity 0.6s ease;
    opacity: 0.8;
    position: absolute;
    top: 2rem;
    left: 1rem;
}

/* The detailed text that is revealed on hover */
.panel-detail {
    opacity: 0; /* Hidden by default */
    transform: translateY(20px);
    transition: opacity 0.6s 0.2s ease, transform 0.6s 0.2s ease; /* Delay the text animation */
}
.panel-detail p {
    line-height: 1.7;
    margin: 0;
}


/* --- THE CSS-ONLY HOVER INTERACTION --- */

/* When the container is hovered, all panels get a default flex value */
.esg-accordion-container:hover .esg-panel {
    flex: 1;
}

/* The specific panel being hovered over gets a much larger flex value, causing it to expand */
.esg-accordion-container:hover .esg-panel:hover {
    flex: 10;
    border-color: #F9DEC9;
}

/* Reveal the content inside the hovered panel */
.esg-accordion-container:hover .esg-panel:hover .panel-content h3 {
    opacity: 0;
    transform: rotate(180deg) translateX(50px); /* Move title out of the way */
}
.esg-accordion-container:hover .esg-panel:hover .panel-detail {
    opacity: 1;
    transform: translateY(-100px);
}
.esg-accordion-container:hover .esg-panel:hover::before {
    filter: grayscale(0%); /* Bring color to the image */
    transform: scale(1.05); /* Subtle zoom effect */
}


/* --- Responsive Design --- */
@media (max-width: 992px) {
    .esg-accordion-container {
        flex-direction: column; /* Stack panels vertically */
        min-height: 80vh;
    }

    /* On mobile, the hover effect isn't practical. We show everything by default. */
    .panel-content h3 {
        writing-mode: horizontal-tb; /* Normal horizontal text */
        transform: none;
        position: static; /* Let it flow naturally */
        font-size: 2rem;
        opacity: 1;
        margin-bottom: 1rem;
    }

    .panel-detail {
        opacity: 1;
        transform: none;
    }
}

/* Risk Management Framework Section */
/* --- Redesigned Risk Management Vertical Slider --- */
#risk-management-slider {
    /* The section takes up the full viewport height */
    height: 100vh;
    min-height: 650px; /* A sensible minimum height */
    padding: 0;
    background-color: #AEC5EB;
    overflow: hidden; /* Crucial to prevent scrollbars */
}

.risk-slider-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* The viewport defines the visible area of the slider */
.risk-slider-viewport {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* The track holds all slides and moves vertically */
.risk-slider-track {
    width: 100%;
    height: 100%;
    /* The key to the smooth vertical animation */
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Each slide takes up the full height of the viewport */
.risk-slide {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.risk-slide-content {
    max-width: 650px;
    padding: 2rem;
    text-align: center;
    color: #3A405A;
}

.risk-icon {
    margin-bottom: 2rem;
}

.risk-slide-content h2 {
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
}

.risk-slide-content h3 {
    font-size: 2.5rem;
    margin: 0.5rem 0 1.5rem;
}

.risk-slide-content p {
    font-size: 1.1rem;
    line-height: 1.7;
}

/* --- Vertical Navigation Styling --- */
.risk-slider-nav {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 10;
}

.nav-arrow {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid #3A405A;
    background: rgba(249, 222, 201, 0.5); /* #F9DEC9 */
    color: #3A405A;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.nav-arrow:hover {
    background: #F9DEC9;
    transform: scale(1.1);
}

/* Style for disabled buttons at the start/end */
.nav-arrow.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none; /* Make it unclickable */
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    #risk-management-slider {
        /* On mobile, full-height sections can be awkward. Allow natural height. */
        height: auto;
        min-height: 100vh; /* Still try to take up most of the screen */
        padding: 80px 0; /* Add back padding */
    }

    /* Stack slides vertically in the document flow */
    .risk-slider-track {
        display: flex;
        flex-direction: column;
        height: auto;
        transform: none !important; /* Disable JS transform */
    }
    .risk-slide {
        height: auto;
        padding: 3rem 0;
    }

    /* Hide the JS-powered navigation on mobile */
    .risk-slider-nav {
        display: none;
    }
}

/* Custom Solutions CTA Section */
#custom-solutions-cta {
    padding: 80px 0;
    background-color: #3A405A;
    color: #F9DEC9;
    text-align: center;
}

#custom-solutions-cta .container {
    max-width: 800px;
}

#custom-solutions-cta h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

#custom-solutions-cta p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}


/* Responsive Adjustments for Strategies Page */
@media (max-width: 768px) {
    #quantitative-deep-dive .container,
    #growth-equity-deep-dive .container {
        flex-direction: column;
    }

    #growth-equity-deep-dive .container {
        flex-direction: column-reverse; /* Maintain alternating order */
    }

    .risk-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Investment Page Styles --- */

/* Investment Hero Section */
/* --- Redesigned Investment Hero Section (CSS-Only) --- */
#investment-hero-redesigned {
    /* Make the hero section take up the full screen height for maximum impact */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    
    position: relative; /* Acts as an anchor for the background canvas */
    background-color: #3A405A; /* Base background color */
    overflow: hidden; /* Contains all animated elements */
}

/* The canvas for all background effects (lowest z-index) */
.hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Layer 1: A slow, flowing gradient for a dynamic feel */
.animated-gradient {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #3A405A, #AEC5EB, #3A405A);
    background-size: 400% 400%; /* Make the gradient larger than the view */
    animation: gradient-flow 15s ease infinite; /* The animation */
}
@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Layer 2: A subtle grid overlay for a "blueprint" or tech feel */
.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(174, 197, 235, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(174, 197, 235, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}


/* --- The Main Content --- */
.hero-content-wrapper {
    position: relative;
    z-index: 2; /* Sits above the background canvas */
    text-align: center;
    max-width: 900px;
}

/* This is the key effect: The title with a background image clipped to the text */
.hero-title-clipped {
    font-size: 6rem; /* Large and bold for maximum impact */
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 2rem;
    
    /* The image that will show through the text */
    background-image: url('images/hero-title-clipped.webp');
    background-size: cover;
    background-position: center;
    
    /* The magic properties */
    -webkit-background-clip: text; /* For webkit browsers */
    background-clip: text;
    -webkit-text-fill-color: transparent; /* Makes the text color transparent */
    color: transparent; /* Fallback */

    /* A subtle animation to make the background image move */
    animation: zoom-in-bg 30s ease-in-out infinite alternate;
}
@keyframes zoom-in-bg {
    from { background-position: 50% 50%; }
    to { background-position: 60% 40%; }
}

/* Styling for the paragraph */
.hero-content-wrapper p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(249, 222, 201, 0.85); /* Slightly transparent for softness */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}


/* --- Responsive Design --- */
@media (max-width: 992px) {
    .hero-title-clipped {
        font-size: 4.5rem;
    }
}

@media (max-width: 768px) {
    #investment-hero-redesigned {
        min-height: 80vh; /* Shorter hero on mobile */
        padding: 80px 0;
    }
    .hero-title-clipped {
        font-size: 3rem;
    }
    .hero-content-wrapper p {
        font-size: 1rem;
    }
}

/* Investment Approach Section */
/* --- Redesigned Investment Approach Section (Triptych Panels) --- */
#investment-approach-redesigned {
    padding: 100px 0;
    background-color: #3A405A; /* Dark background to make the panels pop */
}

#investment-approach-redesigned h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #F9DEC9;
}

/* The main container that holds the three panels */
.triptych-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden; /* This is crucial for the border-radius on the panels */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    min-height: 550px;
}

/* Individual panel styling */
.triptych-panel {
    position: relative;
    flex: 1; /* By default, each panel takes up 1/3 of the space */
    padding: 3rem 2.5rem;
    color: #fff;
    
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align content to the bottom */
    
    /* The core of the smooth animation */
    transition: flex 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Use a pseudo-element for the background image and overlay */
.triptych-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-size: cover;
    background-position: center;
    /* This creates the dark overlay and a gradient for readability */
    background-image: linear-gradient(to top, rgba(58, 64, 90, 0.95) 20%, rgba(58, 64, 90, 0.2) 100%), var(--bg-image);
    transition: opacity 0.6s ease;
}

/* Set the specific background images for each panel using CSS variables */
.panel-1 { --bg-image: url('images/approach-1.webp'); }
.panel-2 { --bg-image: url('images/approach-2.webp'); }
.panel-3 { --bg-image: url('images/approach-3.webp'); }

/* The content container inside each panel */
.panel-content {
    position: relative;
    z-index: 2;
}

.panel-icon {
    margin-bottom: 1.5rem;
    color: #AEC5EB; /* Icon color */
}
.panel-icon svg {
    transition: transform 0.4s ease;
}

.panel-content h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
}
.panel-content p {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(249, 222, 201, 0.8);
    /* By default, the text is hidden but takes up space */
    max-height: 500px;
    opacity: 1;
    transition: max-height 0.6s 0.1s ease, opacity 0.6s 0.1s ease; /* Delay the text animation */
}


/* --- THE SOPHISTICATED HOVER INTERACTION --- */

/* When the container is hovered, dim the non-hovered panels */
.triptych-container:hover .triptych-panel::before {
    opacity: 0.5;
}
/* The specific panel being hovered gets a much larger flex value, causing it to expand */
.triptych-container:hover .triptych-panel:hover {
    flex: 2;
}
/* Restore the opacity of the hovered panel's background */
.triptych-container:hover .triptych-panel:hover::before {
    opacity: 1;
}

/* Reveal the content inside the hovered panel */
.triptych-container:hover .triptych-panel:hover p {
    max-height: 300px; /* Adjust if your text is longer */
    opacity: 1;
}

/* Animate the icon on hover */
.triptych-container:hover .triptych-panel:hover .panel-icon svg {
    transform: translateY(-5px);
}


/* --- Responsive Design --- */
@media (max-width: 992px) {
    .triptych-container {
        flex-direction: column; /* Stack the panels vertically */
        min-height: auto;
    }
    .triptych-panel {
        min-height: 400px; /* Give each panel a good height */
        text-align: center;
    }
    .panel-content p {
        /* Always show the text on mobile since there is no hover */
        max-width: 200px;
        max-height: 300px;
        opacity: 1;
    }

    /* Disable the hover effects on mobile */
    .triptych-container:hover .triptych-panel,
    .triptych-container:hover .triptych-panel:hover {
        flex: 1;
    }
    .triptych-container:hover .triptych-panel::before {
        opacity: 1;
    }
}


/* Investment Process Section */
#investment-process {
    padding: 80px 0;
    background-color: #AEC5EB;
}

#investment-process h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 4rem;
}

.process-flow {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.process-flow::before {
    content: '';
    position: absolute;
    top: 25px; /* Aligns with the center of the number */
    left: 5%;
    right: 5%;
    height: 4px;
    background: #3A405A;
    z-index: 0;
}

.process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 23%;
    position: relative;
}

.step-number {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    background: #3A405A;
    color: #F9DEC9;
    font-size: 1.5rem;
    font-weight: bold;
    z-index: 1;
    margin-bottom: 1rem;
}

/* Fund Showcase Section */
/* --- Redesigned Fund Showcase Section (Deck of Cards) --- */
#fund-showcase-deck {
    padding: 100px 0;
    background-color: #F9DEC9;
}

#fund-showcase-deck h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #3A405A;
}

.fund-deck-container {
    max-width: 500px; /* The width of a single card + some padding */
    margin: 0 auto;
}

/* The container that holds the stacked cards */
.fund-card-stack {
    position: relative;
    height: 600px; /* Define a fixed height for the stack */
    margin-bottom: 2rem;
}

/* Individual card styling */
.fund-deck-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(58, 64, 90, 0.2);
    
    /* Default (hidden) state */
    opacity: 0;
    transform: scale(0.9) translateY(30px) rotate(5deg);
    z-index: 1;

    /* The core of the smooth animation */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.6s ease;
}

/* Styling for the active (front) card */
.fund-deck-card.is-active {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
    z-index: 10;
}

/* Styling for the card directly behind the active one */
.fund-deck-card.is-active + .fund-deck-card {
    opacity: 1;
    transform: scale(0.95) translateY(20px) rotate(0deg);
    z-index: 9;
}
/* Styling for the card two places behind the active one */
.fund-deck-card.is-active + .fund-deck-card + .fund-deck-card {
    opacity: 1;
    transform: scale(0.9) translateY(40px) rotate(0deg);
    z-index: 8;
}

/* Background image styling */
.card-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.card-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(58, 64, 90, 0.8) 0%, transparent 60%);
}
.card-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content styling */
.card-deck-content {
    position: relative;
    z-index: 2;
    padding: 3rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    
    /* Animate the content in after the card moves */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s 0.3s ease, transform 0.4s 0.3s ease;
}
.fund-deck-card.is-active .card-deck-content {
    opacity: 1;
    transform: translateY(-60px);
}

.card-deck-content h3 {
    font-size: 2rem;
    margin: 0 0 0.5rem 0;
}
.card-deck-content p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* Navigation button styling */
.fund-deck-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.fund-nav-button {
    background: transparent;
    border: 2px solid #AEC5EB;
    border-radius: 30px;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #3A405A;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.fund-nav-button:hover {
    background: #AEC5EB;
}
.fund-nav-button.is-active {
    background: #3A405A;
    color: #F9DEC9;
    border-color: #3A405A;
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    /* On mobile, revert to a simple vertical stacked layout */
    .fund-card-stack {
        position: static;
        height: auto;
    }
    .fund-deck-card {
        position: static;
        height: 500px;
        margin-bottom: 2rem;
        /* Reset all animation properties */
        opacity: 1;
        transform: none;
        box-shadow: 0 10px 20px rgba(58, 64, 90, 0.15);
    }
    .fund-deck-card .card-deck-content {
        opacity: 1;
        transform: none;
    }
    .fund-deck-nav {
        display: none; /* Hide the nav since all cards are visible */
    }
}
/* Technology Platform Section */
#tech-platform {
    padding: 80px 0;
    background: #3A405A;
    color: #F9DEC9;
}

#tech-platform .container {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.tech-platform-image img {
    max-width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
    border: 3px solid #AEC5EB;
}

.tech-platform-content {
    flex: 1;
}

.tech-platform-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

/* Client Partnership Section */
/* --- Redesigned Client Partnership Section (CSS-Only) --- */
#client-partnership-css {
    padding: 100px 0;
    background-color: #F9DEC9;
}
#client-partnership-css h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #3A405A;
}

/* --- The Core Interactive Component --- */
.partnership-journey {
    max-width: 1100px;
    margin: 0 auto;
}
/* The radio buttons are hidden from view but remain functional */
.partnership-journey input[type="radio"] {
    display: none;
}

/* The wrapper for the panels, which acts as a positioning anchor */
.journey-panels-wrapper {
    position: relative;
    height: 550px; /* A fixed height is needed for the absolute positioning */
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(58, 64, 90, 0.15);
    overflow: hidden;
}
/* Individual panel styling */
.journey-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    display: flex;
    align-items: center;
    gap: 3rem;

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity 0.6s ease, visibility 0.6s, transform 0.6s ease;
}

/* --- The CSS Magic: The :checked Pseudo-selector --- */
/* When a radio button is checked, its sibling panel becomes visible */
#step1-trigger:checked ~ .journey-panels-wrapper .panel-discovery,
#step2-trigger:checked ~ .journey-panels-wrapper .panel-strategy,
#step3-trigger:checked ~ .journey-panels-wrapper .panel-management {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Panel content styling */
.panel-image {
    flex: 1;
    height: 100%;
}
.panel-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    
}
.panel-text {
    flex: 1;
    padding-right: 4rem;
    color: #3A405A;
}
.panel-text h3 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
}
.panel-text p {
    font-size: 1.1rem;
    line-height: 1.8;
}

/* --- Navigation Styling --- */
.journey-nav {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    border: 2px solid #AEC5EB;
    border-radius: 40px;
    overflow: hidden;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.nav-label {
    flex: 1;
    padding: 1rem 1.5rem;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 500;
    color: #3A405A;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.nav-label:not(:last-child) {
    border-right: 2px solid #AEC5EB;
}
.nav-label:hover {
    background-color: #AEC5EB;
}
/* Style the active label using the sibling combinator */
#step1-trigger:checked ~ .journey-nav .nav-label[for="step1-trigger"],
#step2-trigger:checked ~ .journey-nav .nav-label[for="step2-trigger"],
#step3-trigger:checked ~ .journey-nav .nav-label[for="step3-trigger"] {
    background-color: #3A405A;
    color: #F9DEC9;
}


/* --- Responsive Design --- */
@media (max-width: 992px) {
    .journey-panels-wrapper {
        height: auto; /* Allow height to be determined by content */
    }
    .journey-panel {
        flex-direction: column;
        position: static; /* Let panels stack in the document flow */
        display: none; /* Hide non-active panels completely */
        transform: none;
        opacity: 1;
        visibility: visible;
    }
    /* Only display the panel corresponding to the checked radio */
    #step1-trigger:checked ~ .journey-panels-wrapper .panel-discovery,
    #step2-trigger:checked ~ .journey-panels-wrapper .panel-strategy,
    #step3-trigger:checked ~ .journey-panels-wrapper .panel-management {
        display: flex;
    }

    .panel-image { width: 100%; height: 300px; }
    .panel-text { padding: 2rem; text-align: center; }
}
@media (max-width: 768px) {
    .journey-nav {
        flex-direction: column;
        border: none;
        border-radius: 10px;
    }
    .nav-label:not(:last-child) {
        border-right: none;
        border-bottom: 2px solid #AEC5EB;
    }
}
/* Getting Started CTA Section */
#getting-started-cta {
    padding: 80px 0;
    text-align: center;
    background: linear-gradient(135deg, #AEC5EB, #F9DEC9);
}

#getting-started-cta h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.steps-to-invest {
    margin: 2rem 0;
    font-size: 1.2rem;
    font-weight: 500;
    color: #3A405A;
}


/* Responsive Adjustments for Investment Page */
@media (max-width: 768px) {
    .process-flow {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 30px;
    }

    .process-flow::before {
        left: 25px;
        top: 5%;
        bottom: 5%;
        height: auto;
        width: 4px;
    }
    
    .process-step {
        flex-direction: row;
        width: 100%;
        text-align: left;
        margin-bottom: 2rem;
    }

    .step-content {
        margin-left: 2rem;
    }

    #tech-platform .container,
    #client-partnership .container {
        flex-direction: column;
    }
}

/* --- Careers Page Styles --- */

/* Careers Hero Section */
#careers-hero {
    background-image: linear-gradient(rgba(58, 64, 90, 0.8), rgba(58, 64, 90, 0.8)), url('images/careers-bg.webp');
    background-size: cover;
    background-position: center;
    padding: 120px 0;
    text-align: center;
    color: #F9DEC9;
}

.careers-hero-content {
    max-width: 800px;
    margin: 0 auto;
    animation: fadeIn 1.5s ease-in-out;
}

.careers-hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.careers-hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

/* Why Ace Capital Section */
/* --- Redesigned Why Ace Capital Section (Staggered Glass Grid) --- */
#why-ace-capital-redesigned {
    position: relative; /* Anchor for the background canvas */
    padding: 100px 0;
    background-color: #3A405A; /* Dark background for a premium feel */
    overflow: hidden;
}

/* The animated gradient background */
.why-bg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(315deg, #AEC5EB, #3A405A, #AEC5EB);
    background-size: 400% 400%;
    animation: gradient-flow 20s ease infinite;
    opacity: 0.2; /* Make it very subtle */
    z-index: 1;
}
/* Re-using the gradient animation from the investment hero */
@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* The container sits above the background */
#why-ace-capital-redesigned .container {
    position: relative;
    z-index: 2;
}
#why-ace-capital-redesigned h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 4rem;
    color: #F9DEC9;
}

/* The staggered grid layout */
.why-grid-staggered {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

/* Styling for the glass morphism cards */
.value-card {
    background: rgba(249, 222, 201, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(174, 197, 235, 0.2);
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
    color: #F9DEC9;
    
    /* Smooth transitions for the hover effect */
    transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
}

/* The staggering effect */
.card-growth, .card-rewards {
    margin-top: 3rem;
}

/* --- The CSS-Only Hover Interaction --- */
.value-card:hover {
    transform: translateY(-15px);
    background-color: rgba(249, 222, 201, 0.15);
    box-shadow: 0 0 40px rgba(174, 197, 235, 0.2);
}

.card-icon {
    margin-bottom: 1.5rem;
    color: #AEC5EB; /* Controls the SVG stroke/fill color */
}

.value-card h3 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    color: #fff;
}

/* By default, the paragraph is hidden */
.value-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(249, 222, 201, 0.8);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}

/* On hover, the paragraph is revealed */
.value-card:hover p {
    max-height: 200px; /* Adjust if your text is longer */
    opacity: 1;
}


/* --- Responsive Design --- */
@media (max-width: 992px) {
    /* On smaller screens, switch to a single column */
    .why-grid-staggered {
        grid-template-columns: 1fr;
        max-width: 500px; /* Constrain width for a better look */
        margin: 0 auto;
    }
    /* Remove the staggering */
    .card-growth, .card-rewards {
        margin-top: 0;
    }
}
@media (max-width: 768px) {
    #why-ace-capital-redesigned {
        padding: 80px 0;
    }
    
    /* On mobile, the hover-to-reveal UX is not ideal. Show the content by default. */
    .value-card p {
        max-height: 200px;
        opacity: 1;
    }
}
/* Life at Ace Section */
/* --- Redesigned Life at Ace Capital Section (Filmstrip Layout) --- */
#life-at-ace-redesigned {
    padding: 120px 0;
    background-color: #F9DEC9;
    overflow-x: hidden; /* Prevent horizontal scrollbars from parallax */
}

/* The main 3-column grid layout */
.life-layout {
    display: grid;
    /* This creates the text-image-text effect */
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 2rem;
    align-items: center;
}


/* --- Image Columns --- */
.life-image-column {
    position: relative;
    height: 600px; /* Give the columns a fixed height to work with */
}

/* Individual image wrappers for positioning and effects */
.life-image-wrapper {
    position: absolute;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(58, 64, 90, 0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.life-image-wrapper:hover {
    transform: scale(1.03) !important; /* !important to override JS transform */
    box-shadow: 0 20px 40px rgba(58, 64, 90, 0.25);
    z-index: 10;
}

.life-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Specific positions for the image collage */
.left-column .image-1 { top: 0; left: 0; width: 80%; height: 70%; z-index: 2; }
.left-column .image-2 { bottom: 0; right: 0; width: 70%; height: 50%; z-index: 1; }

.right-column .image-3 { top: 0; right: 0; width: 70%; height: 50%; z-index: 1; }
.right-column .image-4 { bottom: 0; left: 0; width: 80%; height: 70%; z-index: 2; }


/* --- Central Text Column --- */
.life-text-column {
    text-align: center;
    color: #3A405A;
}

.life-text-column h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
.life-text-column .section-subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: #3A405A;
}
.life-description p {
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: left; /* Justify text for a cleaner look */
}


/* --- Responsive Design --- */
@media (max-width: 992px) {
    .life-layout {
        grid-template-columns: 1fr; /* Stack all columns */
        gap: 3rem;
    }
    .life-image-column {
        height: 450px; /* Shorter height on tablet */
    }
    /* Move the text between the two image columns */
    .left-column { order: 1; }
    .life-text-column { order: 2; }
    .right-column { order: 3; }
}
@media (max-width: 768px) {
    #life-at-ace-redesigned {
        padding: 80px 0;
    }
    .life-image-column {
        height: 350px; /* Even shorter on mobile */
    }
}

/* Employee Spotlight Section */
/* --- Redesigned Employee Spotlight Section (Magazine Style) --- */
#employee-spotlight-redesigned {
    padding: 100px 0;
    background-color: #3A405A;
    color: #F9DEC9;
}

#employee-spotlight-redesigned h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 4rem;
}

/* The grid for the spotlight cards */
.spotlight-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* The main card container */
.spotlight-card {
        position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    background: rgba(174, 197, 235, 0.05);
    border: 1px solid rgba(174, 197, 235, 0.2);
    border-radius: 20px;
    padding: 3rem;
    padding-bottom: 5rem;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* A large decorative quotation mark in the background */
.spotlight-card::before {
    content: '“';
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    font-size: 10rem;
    font-weight: 800;
    color: rgba(174, 197, 235, 0.1);
    line-height: 1;
    z-index: 1;
    transition: color 0.4s ease;
}

/* The quote itself */
.spotlight-quote {
    position: relative; /* Sits above the decorative quote mark */
    z-index: 2;
    font-size: 1.6rem; /* Larger, more impactful font size */
    font-style: italic;
    line-height: 1.6;
    margin: 0;
    border: none; /* Remove the old border */
    padding: 0;
}

/* The container for the image and name/title */
.profile-attribution {
    /* position: absolute; */
    bottom: -30px; /* Overlap the bottom edge of the card */
    left: 3rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.profile-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #AEC5EB;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s ease;
}

.profile-details {
    text-align: left;
}
.profile-details h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.3rem;
    color: #fff;
}
.profile-details p {
    margin: 0;
    font-size: 1rem;
    color: #AEC5EB;
    font-style: normal;
}

/* --- The CSS-Only Hover Interaction --- */
.spotlight-card:hover {
    transform: translateY(-10px);
    border-color: #AEC5EB;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.spotlight-card:hover::before {
    color: rgba(174, 197, 235, 0.2); /* Make the quote mark slightly more visible */
}
.spotlight-card:hover .profile-image {
    transform: scale(1.05); /* Pop the image slightly */
}


/* --- Responsive Design --- */
@media (max-width: 992px) {
    /* Stack the cards on smaller screens */
    .spotlight-card-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}
@media (max-width: 768px) {
    #employee-spotlight-redesigned {
        padding: 80px 0;
    }
    .spotlight-card {
        padding: 2.5rem;
        padding-bottom: 4rem;
    }
    .spotlight-quote {
        font-size: 1.3rem;
    }
    .profile-attribution {
        left: 2.5rem;
        bottom: -25px;
    }
    .profile-image {
        width: 80px;
        height: 80px;
    }
}
/* Open Positions Section */
#open-positions {
    padding: 80px 0;
    background: #F9DEC9;
}

#open-positions h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.job-listing {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 1.5rem 2rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.job-listing:hover {
    transform: translateX(5px);
    box-shadow: 0 8px 20px rgba(58, 64, 90, 0.15);
}

.job-info h3 {
    margin: 0 0 0.25rem 0;
    color: #3A405A;
}

.job-info p {
    margin: 0;
    color: #555;
}

.apply-button {
    background: #3A405A;
    color: #F9DEC9;
    padding: 0.8rem 1.5rem;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.apply-button:hover {
    background-color: #AEC5EB;
    color: #3A405A;
}

/* Early Careers Section */
/* --- Redesigned Early Careers Section (CSS-Only Split Reveal) --- */
#early-careers-redesigned {
    /* This section takes up a significant portion of the screen */
    min-height: 80vh;
    padding: 0;
    background-color: #AEC5EB; /* The color revealed on hover */
}

/* The main container for the split panels */
.split-reveal-container {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 80vh;
    overflow: hidden; /* Crucial for the sliding effect */
}

/* Styling for the two sliding panels */
.split-panel {
    width: 50%;
    min-height: 80vh;
    position: relative;
    z-index: 2; /* Sits above the background color */
    
    /* The core of the smooth animation */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Left Panel Styling */
.left-panel {
    background-color: #3A405A; /* Fallback */
}
.panel-background-image {
    width: 100%;
    height: 100%;
    background-image: url('images/early.webp');
    background-size: cover;
    background-position: center;
}

/* Right Panel Styling */
.right-panel {
    background-color: #3A405A;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F9DEC9;
}
.panel-content-wrapper {
    max-width: 500px;
    padding: 4rem;
}
.panel-content-wrapper h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: #fff;
}
.panel-content-wrapper p {
    font-size: 1.1rem;
    line-height: 1.8;
}

/* The central decorative element and hidden text */
.split-center-element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3; /* Sits on top of the panels */
    text-align: center;
}
.launchpad-icon {
    background-color: #3A405A;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 10px #AEC5EB; /* Creates the border that matches the revealed color */
    transition: opacity 0.6s ease;
}
.hidden-cta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 500;
    color: #3A405A;
    opacity: 0; /* Hidden by default */
    white-space: nowrap;
    transition: opacity 0.6s 0.2s ease; /* Delayed transition */
}


/* --- THE CSS-ONLY HOVER INTERACTION --- */
.split-reveal-container:hover .left-panel {
    transform: translateX(-100%);
}
.split-reveal-container:hover .right-panel {
    transform: translateX(100%);
}
/* On hover, fade out the icon and fade in the text */
.split-reveal-container:hover .launchpad-icon {
    opacity: 0;
}
.split-reveal-container:hover .hidden-cta {
    opacity: 1;
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    /* On smaller screens, the hover effect is disabled and we switch to a stacked layout */
    #early-careers-redesigned, .split-reveal-container, .split-panel {
        min-height: auto;
    }
    .split-reveal-container {
        flex-direction: column; /* Stack the panels */
    }
    .split-panel {
        width: 100%;
        transition: none; /* Disable transitions */
    }
    .left-panel {
        height: 400px; /* Give the image a fixed height */
    }
    .panel-content-wrapper {
        padding: 4rem 2rem;
        text-align: center;
    }
    .split-center-element {
        display: none; /* Hide the central element as it doesn't work with this layout */
    }
}

/* Hiring Process Section */
/* --- Redesigned Hiring Process Section (CSS-Only Flow Chart) --- */
#hiring-process-flow {
    padding: 100px 0;
    background: #AEC5EB;
    text-align: center;
    color: #3A405A;
}

#hiring-process-flow h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}
#hiring-process-flow p {
    margin-bottom: 5rem;
    font-size: 1.1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* The main container for the flow chart */
.process-flow-container {
    position: relative; /* Anchor for the connecting line */
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 equal columns */
    align-items: start; /* Align items to the top */
    max-width: 1100px;
    margin: 0 auto;
}

/* The static background line */

/* The animated "progress" line */
/* .process-flow-container::after {
    content: '';
    position: absolute;
    top: 35px;
    left: 10%;
    width: 80%;
    height: 4px;
    background-color: #3A405A;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
} */

/* Individual step styling */
.process-step {
    position: relative;
    padding-top: 80px; /* Space for the node */
    /* By default, the steps are invisible and moved down */
    opacity: 0;
    transform: translateY(20px);
    /* The animation is defined but paused */
    animation: step-appear 0.5s ease-out forwards;
    animation-play-state: paused;
}
@keyframes step-appear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* The circular node with the number */
.step-node {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
    background-color: #F9DEC9;
    border: 4px solid #3A405A;
    font-size: 1.8rem;
    font-weight: 500;
    z-index: 3;
    text-align: center;
}

.step-details h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}
.step-details p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 180px; /* Constrain text width */
}


/* --- THE CSS-ONLY HOVER INTERACTION --- */

/* When the user hovers over the entire section... */
#hiring-process-flow:hover .process-flow-container::after {
    transform: scaleX(1); /* Animate the progress line */
}
#hiring-process-flow:hover .process-step {
    animation-play-state: running; /* Play the animation on all steps */
}

/* The key to the sequential animation: animation-delay */
#hiring-process-flow:hover .process-step:nth-child(1) { animation-delay: 0.2s; }
#hiring-process-flow:hover .process-step:nth-child(2) { animation-delay: 0.4s; }
#hiring-process-flow:hover .process-step:nth-child(3) { animation-delay: 0.6s; }
#hiring-process-flow:hover .process-step:nth-child(4) { animation-delay: 0.8s; }
#hiring-process-flow:hover .process-step:nth-child(5) { animation-delay: 1.0s; }


/* --- Responsive Design --- */
@media (max-width: 992px) {
    .process-flow-container {
        grid-template-columns: 1fr; /* Stack into a single column */
        gap: 2rem;
        padding-left: 50px; /* Space for the vertical line */
    }
    .process-flow-container::before, .process-flow-container::after {
        left: 35px; /* Position line on the left */
        top: 5%;
        width: 4px;
        height: 90%;
        transform-origin: top;
    }
    /* Change animation from scaleX to scaleY */
    .process-flow-container::after { transform: scaleY(0); }
    #hiring-process-flow:hover .process-flow-container::after { transform: scaleY(1); }

    .process-step {
        padding-top: 0;
        text-align: left;
    }
    .step-node {
        left: -80px; /* Position node on the line */
        top: 50%;
        transform: translateY(-50%);
    }
    .step-details {
        max-width: none;
    }
}
/* Responsive Adjustments for Careers Page */
@media (max-width: 768px) {
    .life-gallery {
        grid-template-columns: 1fr;
    }

    .spotlight-grid {
        grid-template-columns: 1fr;
    }

    .spotlight-profile {
        flex-direction: column;
        text-align: center;
    }

    .spotlight-profile blockquote {
        border-left: none;
        border-top: 3px solid #AEC5EB;
        padding-left: 0;
        padding-top: 1.5rem;
    }

    #early-careers .container {
        flex-direction: column;
    }

    .process-steps-horizontal {
        flex-direction: column;
        gap: 1rem;
    }
    
    .process-steps-horizontal div:not(:last-child)::after {
        content: 'v';
        right: 50%;
        top: 120%;
        transform: translate(50%, -50%);
    }
}

/* Track Record Hero Section */
/* --- Redesigned Track Record Hero Section (CSS-Only Split Panel Reveal) --- */
#track-record-hero-redesigned {
    /* Full viewport height for a monumental feel */
    height: 90vh;
    min-height: 600px;
    position: relative;
    background-color: #3A405A; /* Base background */
    overflow: hidden; /* This is crucial for the slide-in effect */
}

.hero-split-container {
    display: flex;
    width: 100%;
    height: 100%;
}

/* Common styling for both panels */
.split-panel {
    flex: 1; /* Each panel takes up 50% width */
    height: 100%;
    position: relative;
    /* Apply the animation on page load */
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth easing */
    animation-fill-mode: forwards; /* Keep the final state of the animation */
}

/* Left Panel: Image and Animation */
.left-panel {
    background-image: linear-gradient(to right, rgba(58, 64, 90, 0.6) 0%, transparent 100%), url('images/split-bg.webp');
    background-size: cover;
    background-position: center;
    animation-name: slideInFromLeft;
}
@keyframes slideInFromLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

/* Right Panel: Content and Animation */
.right-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    animation-name: slideInFromRight;
}
@keyframes slideInFromRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Decorative lines inside the right panel for extra sophistication */
.right-panel::before, .right-panel::after {
    content: '';
    position: absolute;
    background: #AEC5EB;
    opacity: 0.3;
    transform: scaleX(0);
    transform-origin: right;
    animation: drawLine 1s 1.2s forwards ease-out; /* Delayed animation */
}
.right-panel::before {
    top: 4rem;
    right: 4rem;
    width: 100px;
    height: 2px;
}
.right-panel::after {
    bottom: 4rem;
    right: 4rem;
    width: 200px;
    height: 2px;
    animation-delay: 1.4s; /* Slightly more delayed */
}
@keyframes drawLine {
    to { transform: scaleX(1); }
}

/* The content wrapper for the text's own animation */
.hero-content-wrapper {
    max-width: 550px;
    color: #F9DEC9;
    /* Animate the content after the panels are in place */
    opacity: 0;
    animation: fadeInUp 1s 1s forwards cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.hero-content-wrapper h1 {
    font-size: 3.8rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: #fff;
}
.hero-content-wrapper p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(249, 222, 201, 0.9);
}


/* --- Responsive Design --- */
@media (max-width: 992px) {
    /* Switch to a stacked layout */
    .hero-split-container {
        flex-direction: column;
    }
    .split-panel {
        flex: 1 1 50%; /* Each panel takes 50% height */
        animation-name: none; /* Disable horizontal slide animation */
        opacity: 0;
        animation: simpleFadeIn 1s forwards;
    }
    .left-panel {
        animation-delay: 0.2s;
    }
    .right-panel {
        text-align: center;
        animation-delay: 0s;
    }
    @keyframes simpleFadeIn {
        to { opacity: 1; }
    }

    .hero-content-wrapper h1 { font-size: 3rem; }
    .hero-content-wrapper { animation: none; opacity: 1; }
}
@media (max-width: 768px) {
    #track-record-hero-redesigned {
        min-height: 700px;
        height: auto;
    }
    .hero-content-wrapper h1 { font-size: 2.5rem; }
}
/* Performance Snapshot Section */
#performance-snapshot {
    padding: 80px 0;
    background-color: #3A405A;
    color: #F9DEC9;
    text-align: center;
}

#performance-snapshot h2 {
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.snapshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.snapshot-item {
    background: rgba(174, 197, 235, 0.1);
    padding: 2rem;
    border-radius: 10px;
}

.snapshot-figure {
    font-size: 3rem;
    font-weight: bold;
    color: #AEC5EB;
    display: block;
    margin-bottom: 0.5rem;
}

/* Detailed Fund Performance Section */
#detailed-fund-performance {
    padding: 80px 0;
}

#detailed-fund-performance h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.tab-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2rem;
    border-bottom: 2px solid #AEC5EB;
}

.tab-link {
    padding: 1rem 2rem;
    cursor: pointer;
    border: none;
    background: none;
    font-size: 1.1rem;
    font-weight: 500;
    color: #3A405A;
    position: relative;
    transition: color 0.3s ease;
}

.tab-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #3A405A;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.tab-link.active, .tab-link:hover {
    color: #3A405A;
}

.tab-link.active::after {
    transform: scaleX(1);
}

.tab-content {
    display: none;
    animation: fadeIn 0.5s;
}

.tab-content.active {
    display: block;
}

.tab-pane-content {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.performance-chart {
    flex: 1;
}

.performance-chart img {
    width: 100%;
    border-radius: 10px;
}

.performance-details {
    flex: 1;
}

.performance-details ul {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem;
}

.performance-details li {
    background: #F9DEC9;
    padding: 0.75rem;
    border-radius: 5px;
    margin-bottom: 0.5rem;
}

/* Case Studies Section */
/* --- Redesigned Case Studies Section (CSS-Only Immersive Cards) --- */
#case-studies-redesigned {
    padding: 100px 0;
    background: #F9DEC9;
}

#case-studies-redesigned h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #3A405A;
}

/* The grid for the case study cards */
.case-study-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

/* The main card container */
.case-card {
    position: relative; /* Anchor for all the layered elements */
    height: 500px;
    border-radius: 20px;
    overflow: hidden; /* This is crucial for the rounded corners and zoom effect */
    box-shadow: 0 10px 30px rgba(58, 64, 90, 0.2);
}

/* Layer 1: The background image */
.card-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: transform 0.6s ease-out; /* For the zoom effect */
}
.card-background-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Layer 2: The semi-transparent overlay */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(58, 64, 90, 0.8) 0%, transparent 100%);
    z-index: 2;
    transition: background-color 0.6s ease;
}

/* Layer 3: The text content */
.card-content {
    position: relative;
    z-index: 3;
    padding: 2.5rem;
    color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align content to the bottom */
}
.card-content h3 {
    font-size: 2.2rem;
    line-height: 1.2;
    margin: 0;
    transform: translateY(0); /* Default position */
    transition: transform 0.6s ease-out;
}

/* The detailed text, hidden by default */
.card-details {
    margin-top: 1rem;
    opacity: 0; /* Hidden */
    max-height: 0; /* Collapsed */
    overflow: hidden;
    transition: max-height 0.6s ease-out, opacity 0.6s ease-out;
}
.card-details p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}


/* --- THE CSS-ONLY HOVER INTERACTION --- */
.case-card:hover .card-background-image {
    transform: scale(1.05); /* Zoom the image */
}
.case-card:hover .card-overlay {
    background: linear-gradient(to top, rgba(58, 64, 90, 0.95) 20%, transparent 100%); /* Darken the overlay */
}
.case-card:hover .card-content h3 {
    transform: translateY(-190px); /* Move the title up to make space */
    /* Adjust this value if your .card-details content is taller */
}
.case-card:hover .card-details {
    opacity: 1; /* Reveal the details */
    max-height: 300px; /* Expand the details */
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    /* Stack the cards on smaller screens */
    .case-study-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    #case-studies-redesigned {
        padding: 80px 0;
    }
    
    /* On mobile, the hover-to-reveal UX is not ideal. Show everything by default. */
    .case-card:hover .card-background-image { transform: none; }
    .case-card:hover .card-overlay { background: linear-gradient(to top, rgba(58, 64, 90, 0.8) 0%, transparent 100%); }
    .case-card:hover .card-content h3 { transform: none; }
    .case-card:hover .card-details { transition: none; }
    
    .card-content { justify-content: flex-start; background: linear-gradient(to bottom, rgba(58, 64, 90, 0.8) 0%, transparent 100%); }
    .card-content h3 { font-size: 2rem; transform: none; margin-bottom: 1rem; }
    .card-details { opacity: 1; max-height: 300px; }
}

/* Risk-Adjusted Returns Section */
/* --- Redesigned Risk-Adjusted Returns Section (CSS-Only Data Viz) --- */
#risk-viz-section {
    padding: 100px 0;
    background-color: #3A405A; /* Dark background for a data-focused feel */
    color: #F9DEC9;
}

#risk-viz-section h2, #risk-viz-section .section-subtitle {
    text-align: center;
}
#risk-viz-section h2 { font-size: 2.5rem; }
#risk-viz-section .section-subtitle { margin-bottom: 4rem; color: rgba(249, 222, 201, 0.8); }

/* The main visualizer component container */
.risk-visualizer {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50/50 split for chart and text */
    align-items: center;
    gap: 3rem;
    max-width: 950px;
    margin: 0 auto;
    background: rgba(174, 197, 235, 0.05);
    border: 1px solid rgba(174, 197, 235, 0.2);
    border-radius: 20px;
    padding: 3rem;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* --- The Chart Area --- */
.chart-area {
    display: flex;
    height: 300px;
}
.y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-right: 1rem;
    font-size: 0.9rem;
    color: #AEC5EB;
    text-align: right;
}
.chart-bars {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    border-left: 2px solid rgba(174, 197, 235, 0.3);
    padding-left: 2rem;
    align-items: flex-end; /* Align bars to the bottom */
}

/* Individual bar styling */
.chart-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.bar-inner {
    width: 60%;
    background-color: #AEC5EB;
    border-radius: 5px 5px 0 0;
    position: relative;
    
    /* Default state: height is 0 */
    height: 0;
    /* The core animation */
    transition: height 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.bar-value {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    color: #fff;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.5s 0.8s ease; /* Delayed fade-in */
}
.bar-label {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
}
/* Specific color for the Ace Capital bar */
.bar-ace .bar-inner {
    background-color: #F9DEC9;
}
.bar-ace .bar-value {
    color: #F9DEC9;
}

/* --- The Commentary Panel --- */
.commentary-panel {
    border-left: 1px solid rgba(174, 197, 235, 0.3);
    padding-left: 3rem;
}
.commentary-panel h4 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #fff;
}
.commentary-panel p {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(249, 222, 201, 0.9);
}


/* --- THE CSS-ONLY HOVER INTERACTION --- */
.risk-visualizer:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Animate the bars to their target height on hover */
.risk-visualizer:hover .bar-ace .bar-inner {
    height: 49%; /* Represents -9.8% on a 0-20 scale */
    transition-delay: 0.2s;
}
.risk-visualizer:hover .bar-benchmark .bar-inner {
    height: 91%; /* Represents -18.2% on a 0-20 scale */
    transition-delay: 0.4s;
}
/* Fade in the value labels on hover */
.risk-visualizer:hover .bar-value {
    opacity: 1;
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    /* Stack the layout on smaller screens */
    .risk-visualizer {
        grid-template-columns: 1fr;
    }
    .commentary-panel {
        border-left: none;
        padding-left: 0;
        text-align: center;
        margin-top: 2rem;
    }

    /* On mobile, the hover effect is not practical. Animate by default. */
    .risk-visualizer, .risk-visualizer:hover {
        transform: none;
        box-shadow: none;
    }
    .bar-ace .bar-inner { height: 49%; }
    .bar-benchmark .bar-inner { height: 91%; }
    .bar-value { opacity: 1; }
}
@media (max-width: 768px) {
    #risk-viz-section { padding: 80px 0; }
    .risk-visualizer { padding: 2rem; }
}

/* Awards & Recognition Section */
/* --- Redesigned Awards & Recognition Section (Ribbon Display) --- */
#awards-recognition-redesigned {
    padding: 100px 0;
    background: #3A405A;
    color: #F9DEC9;
}

#awards-recognition-redesigned h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 4rem;
}

/* The container for the vertical stack of ribbons */
.awards-showcase {
    max-width: 850px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Individual award ribbon styling */
.award-ribbon {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding: 2rem;
    border-radius: 15px;
    background: transparent;
    border: 1px solid rgba(174, 197, 235, 0.2);
    
    /* The core of the smooth animation */
    transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
}

/* The logo container on the left */
.award-logo {
    color: #AEC5EB; /* Controls the SVG color */
}

/* The details container on the right */
.award-details {
    flex: 1;
    border-left: 1px solid rgba(174, 197, 235, 0.3);
    padding-left: 2.5rem;
}

.award-details h3 {
    font-size: 1.8rem;
    color: #fff;
    margin: 0 0 0.5rem 0;
    position: relative; /* Anchor for the animated underline */
    display: inline-block; /* Allows the underline to fit the text width */
}
/* The animated underline pseudo-element */
.award-details h3::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #F9DEC9;
    transform: scaleX(0); /* Hidden by default */
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.award-details p {
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
    color: rgba(249, 222, 201, 0.8);
}


/* --- THE CSS-ONLY HOVER INTERACTION --- */
.award-ribbon:hover {
    transform: translateY(-8px);
    background-color: rgba(174, 197, 235, 0.05); /* Subtle glow */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.award-ribbon:hover .award-logo {
    color: #F9DEC9; /* Change logo color to match the glowing underline */
}
/* Animate the underline into view on hover */
.award-ribbon:hover .award-details h3::after {
    transform: scaleX(1);
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    #awards-recognition-redesigned {
        padding: 80px 0;
    }
    .award-ribbon {
        flex-direction: column; /* Stack logo and details vertically */
        text-align: center;
        gap: 1.5rem;
        padding: 2.5rem;
    }
    .award-details {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(174, 197, 235, 0.3);
        padding-top: 1.5rem;
    }
    .award-details h3 {
        font-size: 1.5rem;
    }
}
/* Track Record Testimonials */
/* --- Redesigned Testimonial Section (CSS-Only Parallax Showcase) --- */
#testimonial-showcase-css {
    /* Set a significant height to allow the parallax effect to be noticeable */
    min-height: 90vh;
    padding: 100px 0;
    
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    /* The background image with an overlay for readability */
    background-image: linear-gradient(rgba(58, 64, 90, 0.7), rgba(58, 64, 90, 0.7)), url('images/testi-bg.webp');
    background-size: cover;
    background-position: center;
    
    /* The key to the parallax effect */
    background-attachment: fixed;
}

/* The main "glass morphism" card */
.testimonial-showcase-card {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    
    /* The glass effect */
    background: rgba(249, 222, 201, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    /* Styling */
    border-radius: 20px;
    border: 1px solid rgba(249, 222, 201, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    padding: 4rem;
    
    /* The subtle hover effect */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.testimonial-showcase-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.4);
}

.profile-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 2rem;
    border: 3px solid #F9DEC9;
}

/* The blockquote styling */
.testimonial-showcase-card blockquote {
    font-size: 2rem;
    font-weight: 500;
    font-style: normal;
    line-height: 1.6;
    margin: 0 0 2.5rem 0;
    color: #fff;
    border: none;
    padding: 0;
}

/* The attribution styling */
.testimonial-attribution cite {
    font-style: normal;
    font-size: 1.2rem;
    font-weight: 600;
    color: #F9DEC9;
}
.testimonial-attribution cite span {
    display: block;
    margin-top: 0.25rem;
    font-size: 1rem;
    font-weight: 400;
    color: #AEC5EB;
}


/* --- Responsive Design --- */
@media (max-width: 768px) {
    /* On mobile, parallax can be choppy. Switch to a standard scroll behavior. */
    #testimonial-showcase-css {
        background-attachment: scroll;
        padding: 80px 20px;
        min-height: auto;
    }
    .testimonial-showcase-card {
        padding: 2.5rem;
    }
    .testimonial-showcase-card blockquote {
        font-size: 1.5rem;
    }
}


/* Responsive Adjustments for Track Record Page */
@media (max-width: 768px) {
    .tab-pane-content {
        flex-direction: column;
    }
    .case-study, .case-study.reverse {
        flex-direction: column;
    }
}

/* --- Mission Page Styles --- */

/* Mission Hero Section */
/* --- Redesigned Mission Hero Section (CSS-Only Animated Aura) --- */
#mission-hero-redesigned {
    /* Full viewport height for an immersive, focused experience */
    min-height: 90vh;
    padding: 100px 0;
    position: relative; /* Anchor for the absolute-positioned aura */
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: #F9DEC9; /* A clean, light background */
    color: #3A405A;
    overflow: hidden; /* Contains the expanding rings */
}

/* The container for the animated background rings */
.aura-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 1px;
    z-index: 1;
}

/* Individual ring styling */
.aura-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid rgba(174, 197, 235, 0.5); /* #AEC5EB */
    border-radius: 50%;
    
    /* The animation will change size and opacity */
    animation-name: pulsate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

/* The pulsating animation */
@keyframes pulsate {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    100% {
        width: 1500px; /* Expands to a large size */
        height: 1500px;
        opacity: 0;
        transform: translate(-50%, -50%);
    }
}

/* Stagger the animations for a more organic, layered effect */
.ring-1 { animation-duration: 6s; animation-delay: 0s; }
.ring-2 { animation-duration: 6s; animation-delay: 1.5s; }
.ring-3 { animation-duration: 6s; animation-delay: 3s; }
.ring-4 { animation-duration: 6s; animation-delay: 4.5s; }


/* --- The Main Content --- */
.mission-hero-content-wrapper {
    position: relative;
    z-index: 2; /* Sits above the aura */
    text-align: center;
    max-width: 850px;
    
    /* A subtle entrance animation for the content */
    opacity: 0;
    animation: fadeInContent 1.5s 0.5s forwards ease-out;
}
@keyframes fadeInContent {
    to {
        opacity: 1;
    }
}

.mission-hero-content-wrapper h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.mission-hero-content-wrapper p {
    font-size: 1.3rem;
    line-height: 1.8;
    color: rgba(58, 64, 90, 0.85); /* #3A405A */
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .mission-hero-content-wrapper h1 {
        font-size: 3rem;
    }
    /* Make the aura smaller and less intense on smaller screens */
    @keyframes pulsate {
        100% {
            width: 1000px;
            height: 1000px;
            opacity: 0;
            transform: translate(-50%, -50%);
        }
    }
}
@media (max-width: 768px) {
    #mission-hero-redesigned {
        min-height: 70vh;
    }
    .mission-hero-content-wrapper h1 {
        font-size: 2.5rem;
    }
    .mission-hero-content-wrapper p {
        font-size: 1.1rem;
    }
}

/* Mission Statement Section */
#mission-statement {
    padding: 80px 0;
    text-align: center;
}

#mission-statement h2 {
    font-size: 1.5rem;
    font-weight: 500;
    color: #555;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.statement-text {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
    color: #3A405A;
}

/* Guiding Principles Section */
/* --- Redesigned Guiding Principles Section (Modern Tabs) --- */
#guiding-principles-tabs {
    padding: 100px 0;
    background-color: #AEC5EB;
}

#guiding-principles-tabs h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #3A405A;
}

.principles-tabs-container {
    max-width: 900px;
    margin: 0 auto;
    background: #F9DEC9;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(58, 64, 90, 0.2);
    padding: 2rem;
}

/* --- Tab Navigation Bar --- */
.principles-nav {
    position: relative; /* Anchor for the indicator */
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid rgba(58, 64, 90, 0.1);
}

.principle-tab-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #3A405A;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.principle-tab-btn:hover {
    opacity: 1;
}
.principle-tab-btn.is-active {
    opacity: 1;
}

.tab-btn-icon svg {
    stroke: #3A405A;
    fill: #3A405A;
    stroke-width: 6;
    fill-opacity: 0;
}
.principle-tab-btn[data-tab="excellence"] svg path:nth-child(2) {
    fill-opacity: 1;
}
.principle-tab-btn[data-tab="integrity"] svg rect,
.principle-tab-btn[data-tab="integrity"] svg path {
    fill: #F9DEC9;
    fill-opacity: 1;
}
.principle-tab-btn[data-tab="partnership"] svg path {
    fill-opacity: 0;
}

.principle-tab-btn span {
    font-size: 1.1rem;
    font-weight: 500;
}

/* The animated underline */
.nav-indicator {
    position: absolute;
    bottom: -2px;
    height: 3px;
    background-color: #3A405A;
    transition: left 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}


/* --- Tab Content Area --- */
.principles-content-area {
    position: relative;
    text-align: center;
    padding: 3rem 1rem;
    min-height: 150px; /* Prevents layout jump */
}

.principle-content-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    transform: translate(-50%, -50%);
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    
    /* Animation */
    transition: opacity 0.5s ease, visibility 0.5s;
}
.principle-content-panel.is-active {
    opacity: 1;
    visibility: visible;
}
.principle-content-panel p {
    font-size: 1.3rem;
    line-height: 1.8;
    color: #3A405A;
    max-width: 600px;
    margin: 0 auto;
}


/* --- Responsive Design --- */
@media (max-width: 768px) {
    .principle-tab-btn {
        padding: 1rem 0;
    }
    .principle-tab-btn span {
        font-size: 0.9rem;
    }
    .principles-content-area {
        padding: 2rem 0;
    }
    .principle-content-panel p {
        font-size: 0.9rem;
    }
}


/* Client Promise Section */
#client-promise {
    padding: 80px 0;
}

#client-promise .container {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.promise-content {
    flex: 1.2;
}

.promise-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.promise-image-gallery {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.promise-image-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.promise-image-gallery img:nth-child(2) {
    grid-row: span 2;
}

/* Societal Impact Section */
#societal-impact {
    padding: 100px 0;
    background-image: url('images/impact-bg.webp');
    background-size: cover;
    background-position: center;
}

.impact-content {
    background: rgba(58, 64, 90, 0.85); /* #3A405A with transparency */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(249, 222, 201, 0.18);
    padding: 3rem;
    color: #F9DEC9;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    text-align: center;
}

.impact-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

/* Future Vision Section */
#future-vision {
    padding: 80px 0;
    background: #F9DEC9;
}

#future-vision h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.vision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}

.vision-item {
    border-left: 4px solid #AEC5EB;
    padding-left: 1.5rem;
}

.vision-item h3 {
    font-size: 1.5rem;
    margin: 0 0 0.5rem 0;
}

.vision-stats {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.stat-number {
    font-size: 3.5rem;
    font-weight: bold;
    color: #3A405A;
}

.stat p {
    font-size: 1.2rem;
    margin-top: 0.5rem;
}

/* Mission CTA Section */
#mission-cta {
    padding: 80px 0;
    background: #3A405A;
    color: #F9DEC9;
    text-align: center;
}

#mission-cta .container {
    max-width: 800px;
}

#mission-cta h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

#mission-cta p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}


/* Responsive Adjustments for Mission Page */
@media (max-width: 768px) {
    #client-promise .container {
        flex-direction: column;
    }

    .vision-grid {
        grid-template-columns: 1fr;
    }

    .vision-stats {
        flex-direction: column;
        gap: 2rem;
    }
}

/* Footer */
footer {
    background-color: #3A405A;
    color: #F9DEC9;
    padding: 40px 0 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.footer-logo {
    font-size: 1.5rem;
    font-weight: bold;
}

.footer-links {
    display: flex;
    gap: 4rem;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links ul li {
    margin-bottom: 0.5rem;
}

.footer-links ul li a {
    text-decoration: none;
    color: #F9DEC9;
    transition: color 0.3s ease;
}

.footer-links ul li a:hover {
    color: #AEC5EB;
}

.footer-social a {
    margin-left: 1rem;
}

.footer-social img {
    transition: transform 0.3s ease;
}

.footer-social img:hover {
    transform: scale(1.1);
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #AEC5EB;
    padding-top: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    nav ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: #3A405A;
    }

    nav ul.active {
        display: flex;
    }

    #hero .container, #about-preview .container, #market-insights .container, #technology-focus .container {
        flex-direction: column;
    }

    .about-content, .insights-content, .tech-content {
        max-width: 100%;
    }

    .service-cards, .testimonial-grid {
        flex-direction: column;
    }

    .card {
        width: 80%;
        margin: 0 auto;
    }

    .testimonial-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-links {
        margin: 2rem 0;
        gap: 2rem;
    }
}

/* Animations */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.reveal {
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 1s all ease;
}

.reveal.active {
    transform: translateY(0);
    opacity: 1;
}

/* --- Redesigned Adaptive Header --- */

/* Base Header Styling */
header {
    /* background-color: transparent; */
    padding: 1.5rem 0;
    position: fixed; /* Fixed position for modern feel */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/* Scrolled State with Glass Morphism */
header.scrolled {
    background-color: rgba(58, 64, 90, 0.85); /* #3A405A */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    font-size: 1.8rem;
    font-weight: bold;
    text-decoration: none;
    color: #F9DEC9;
}

/* --- Combined Navigation Links --- */
.nav-links {
    list-style: none;
    display: flex; /* Horizontal on desktop */
    gap: 2.5rem;
    margin: 0;
    padding: 0;
}

.nav-links a {
    text-decoration: none;
    color: #F9DEC9;
    font-weight: 500;
    position: relative;
    padding-bottom: 0.5rem;
}
/* Modern underline hover effect */
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #AEC5EB;
    transition: width 0.4s ease;
}
.nav-links a:hover::after {
    width: 100%;
}


/* --- Mobile Menu Toggle (Hamburger) --- */
.menu-toggle {
    display: none; /* Hidden on desktop */
    width: 30px;
    height: 22px;
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001; /* Sits on top of everything */
}
.hamburger-bar {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #F9DEC9;
    position: absolute;
    left: 0;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger-bar:nth-child(1) { top: 0; }
.hamburger-bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger-bar:nth-child(3) { bottom: 0; }

/* Animated state for the hamburger icon (turns into an "X") */
.menu-toggle.is-active .hamburger-bar:nth-child(1) {
    transform: translateY(9.5px) rotate(45deg);
}
.menu-toggle.is-active .hamburger-bar:nth-child(2) {
    opacity: 0;
}
.menu-toggle.is-active .hamburger-bar:nth-child(3) {
    transform: translateY(-9.5px) rotate(-45deg);
}


/* --- Responsive Breakpoint --- */
@media (max-width: 992px) {
    .main-nav {
        flex-wrap: wrap; /* Allows the nav-links to drop to the next line */
    }
    
    .menu-toggle {
        display: block; /* Show hamburger */
    }

    /* Mobile Navigation Styling */
    .nav-links {
        display: flex;
        flex-direction: column; /* Stack links vertically */
        align-items: center;
        gap: 0;
        
        /* The slide-down effect is controlled here */
        max-height: 0; /* Hidden by default */
        overflow: hidden;
        
        /* Take up full width below the logo/hamburger line */
        width: 100%;
        order: 3; /* Places it at the bottom */
        
        /* The smooth transition */
        transition: max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    
    /* When the menu is open, expand the max-height */
    .nav-links.is-open {
        /* Set a large enough max-height to reveal all links */
        max-height: 500px;
        padding-top: 1rem; /* Add some space when opened */
    }

    .nav-links li {
        width: 100%;
        text-align: center;
    }

    .nav-links a {
        display: block; /* Make the link fill the list item */
        padding: 1.5rem 0; /* Generous touch targets */
    }
    
    /* Disable the underline hover effect on mobile */
    .nav-links a::after {
        display: none;
    }
}

/* --- Legal Page Specific Styles (Hero & Content) --- */
#legal-hero {
    padding: 150px 0 80px 0;
    background-color: #3A405A;
    color: #F9DEC9;
}

.legal-page-title {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
}

.legal-page-subtitle {
    font-size: 1.3rem;
    color: #AEC5EB;
}

#policy-content {
    padding: 80px 0;
    background-color: #fff; /* Clean white background for readability */
}

.policy-container {
    max-width: 800px;
    color: #3A405A;
}

.last-updated {
    font-style: italic;
    color: #555;
    margin-bottom: 3rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 1rem;
}

#policy-content article {
    margin-bottom: 3rem;
}

#policy-content h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    border-left: 4px solid #AEC5EB;
    padding-left: 1rem;
}

#policy-content p, #policy-content ul {
    font-size: 1.1rem;
    line-height: 1.8;
}

#policy-content ul {
    list-style-position: outside;
    padding-left: 1.5rem;
}

#policy-content li {
    margin-bottom: 1rem;
}

#policy-content a {
    color: #3A405A;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid #AEC5EB;
}
#policy-content a:hover {
    color: #AEC5EB;
}

/* --- Utility Page Styles (e.g., Contact Success) --- */




/* The "Glass Morphism" confirmation box */
.confirmation-box {
    max-width: 550px;
    background: rgba(249, 222, 201, 0.1); /* #F9DEC9 with opacity */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(174, 197, 235, 0.2); /* #AEC5EB */
    border-radius: 20px;
    padding: 3rem 4rem;
    text-align: center;
    color: #F9DEC9;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* --- Animated Checkmark Styling --- */
.checkmark-container {
    width: 100px;
    height: 100px;
    margin: 0 auto 2rem;
}
.checkmark-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* Start the circle drawing from the top */
}
/* The circle path */
.checkmark-circle {
    stroke: #AEC5EB;
    stroke-width: 3;
    /* This creates the "drawing" effect */
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: draw-circle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
/* The checkmark path */
.checkmark-check {
    stroke: #F9DEC9;
    stroke-width: 4;
    stroke-linecap: round;
    /* This creates the "drawing" effect */
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: draw-check 0.5s 0.5s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
/* Keyframe Animations */
@keyframes draw-circle {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes draw-check {
    to {
        stroke-dashoffset: 0;
    }
}

/* --- Text and Button Styling --- */
.confirmation-title {
    font-size: 2.8rem;
    color: #fff;
    margin: 0 0 1rem 0;
}

.confirmation-text {
    font-size: 1.1rem;
    line-height: 1.7;
    opacity: 0.9;
    margin: 0 0 2rem 0;
}

/* Re-using the CTA button style for consistency */
.cta-button {
    display: inline-block;
    background-color: #F9DEC9;
    color: #3A405A;
    padding: 1rem 2.5rem;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.cta-button:hover {
    background-color: #AEC5EB;
    transform: translateY(-3px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .confirmation-box {
        padding: 2rem;
    }
    .confirmation-title {
        font-size: 2.2rem;
    }
    .confirmation-text {
        font-size: 1rem;
    }
}