/* --- GLOBAL STYLES & VARIABLES --- */
:root {
    --color-white: #FFFFFF;
    --color-dark: #3B413C;
    --color-accent: #9DB5B2;
    --color-dark-transparent: rgba(59, 65, 60, 0.85);
    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Roboto Condensed', sans-serif;
    --transition-speed: 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-white);
    color: var(--color-dark);
    line-height: 1.7;
    font-size: 16px;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

section
{
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-secondary);
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.2;
}

h1 { font-size: 4rem; }
h2.section-title { font-size: 2.5rem; margin-bottom: 1rem; }
h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }
p { margin-bottom: 1rem; }
a { color: var(--color-accent); text-decoration: none; transition: var(--transition-speed); }
a:hover { color: var(--color-dark); }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

.section-subtitle {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 3rem auto;
    color: #666;
}
.text-center { text-align: center; }

/* --- BUTTONS & LINKS --- */
.btn {
    display: inline-block;
    padding: 12px 28px;
    font-family: var(--font-secondary);
    text-transform: uppercase;
    border-radius: 4px;
    text-align: center;
    transition: var(--transition-speed);
    cursor: pointer;
    font-size: 0.9rem;
    letter-spacing: 1px;
    border: 2px solid transparent;
}
.btn-primary { background-color: var(--color-dark); color: var(--color-white); }
.btn-primary:hover { background-color: var(--color-accent); color: var(--color-dark); }
.btn-secondary { background-color: var(--color-accent); color: var(--color-dark); }
.btn-secondary:hover { background-color: var(--color-white); color: var(--color-dark); }

.btn-link {
    font-weight: bold;
    color: var(--color-dark);
    display: inline-block;
    margin-top: 1rem;
}
.btn-link:hover { letter-spacing: 1px; }

/* --- HEADER --- */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 1rem 0;
    transition: background-color 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
    background-color: var(--color-dark-transparent);
}
.main-header.scrolled {
    background-color: var(--color-dark-transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.5rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--color-white);
}
.main-header.scrolled .logo,
.main-header.scrolled .main-nav a { color: var(--color-white); }
.main-header.scrolled .main-nav a.active { border-bottom-color: var(--color-accent); }

.main-nav ul { display: flex; gap: 2rem; }
.main-nav a {
    color: var(--color-white);
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 600;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
}
.main-nav a.active, .main-nav a:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.hamburger { display: none; background: none; border: none; cursor: pointer; z-index: 1001; }
.hamburger span { display: block; width: 25px; height: 3px; background-color: var(--color-white); margin: 5px 0; transition: var(--transition-speed); }


/* --- HERO SECTION --- */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    color: var(--color-white);
    background: url('images/hero-bg.webp') no-repeat center center/cover;
}
.hero-bg-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(59, 65, 60, 0.7); }
.hero-content { position: relative; max-width: 800px; }
.hero-content h1 { font-size: clamp(2.5rem, 5vw, 4rem); color: var(--color-white); margin-bottom: 1rem; }
.hero-content p { font-size: 1.2rem; margin-bottom: 2rem; }
.animate-on-load {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out forwards;
}
.animate-on-load:nth-child(1) { animation-delay: 0.2s; }
.animate-on-load:nth-child(2) { animation-delay: 0.4s; }
.animate-on-load:nth-child(3) { animation-delay: 0.6s; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }


/* --- SECTION-WIDE STYLES --- */
section { padding: 80px 0; }
section:nth-of-type(odd) { background-color: #f9f9f9; }

/* --- ABOUT SECTION --- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.about-image-container { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.about-image-container img:nth-child(1) { margin-top: -2rem; border-radius: 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.about-image-container img:nth-child(2) { margin-top: 2rem; border-radius: 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }


/* --- SERVICES OVERVIEW SECTION --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 2rem;
}
.service-card {
    background: var(--color-white);
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.service-card img { height: 200px; width: 100%; object-fit: cover; }
.service-card h3, .service-card p { padding: 0 1.5rem; }
.service-card h3 { margin-top: 1.5rem; }
.service-card p { padding-bottom: 1.5rem; font-size: 0.95rem; }

/* --- DIFFERENTIATORS SECTION --- */
.differentiators-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
}
.bg-image-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.1; }
.bg-image-container img { width: 100%; height: 100%; object-fit: cover; }
.differentiators-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: center; }
.differentiators-text h2 { color: var(--color-dark); }
.differentiators-cards { display: grid; gap: 1.5rem; }
.glass-card {
    padding: 2rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    transition: var(--transition-speed);
}
.glass-card:hover { transform: scale(1.03); }
.glass-card h4 { color: var(--color-dark); }
.glass-card p { margin-bottom: 0; font-size: 0.9rem; }


/* --- STATS SECTION --- */
.stats-section {
    background-color: var(--color-dark);
    color: var(--color-white);
    padding: 60px 0;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    gap: 2rem;
}
.stat-number {
    font-family: var(--font-secondary);
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-accent);
}
.stat-label {
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin-bottom: 0;
    color: rgba(0, 0, 0, 0.8);
}

/* --- CASE STUDY SECTION --- */
.case-study-grid { display: grid; gap: 3rem; }
.case-card {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2.5rem;
    background: var(--color-white);
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
}
.case-card:nth-child(even) { grid-template-columns: 1.5fr 1fr; }
.case-card:nth-child(even) .case-image { order: 2; }
.case-image { height: 100%; }
.case-image img { width: 100%; height: 400px; object-fit: cover; }
.case-content { padding: 2rem; }
.case-category {
    display: inline-block;
    font-family: var(--font-secondary);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* --- CTA SECTION --- */
.cta-section { background: var(--color-accent); text-align: center; }
.cta-content { max-width: 800px; }
.cta-section h2, .cta-section p { color: var(--color-dark); }
.cta-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem auto;
    border-radius: 50%;
    object-fit: cover;
}

/* --- SERVICES PAGE STYLES --- */

/* --- 1. Services Hero Section --- */
/* --- REDESIGNED Services Hero Section --- */
.services-hero-section {
    position: relative; /* Crucial for positioning the background blobs */
    background-color: var(--color-white); /* Base color */
    padding-top: 180px;
    padding-bottom: 100px;
    overflow: hidden; /* Prevents blobs from spilling out */
}

/* Animated Gradient Background Container */
.hero-gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Places it behind the content */
}

/* Individual Animated Blobs */
.gradient-blob {
    position: absolute;
    width: 450px;
    height: 450px;
    background-color: var(--color-accent);
    border-radius: 50%;
    filter: blur(200px); /* This creates the ultra-soft effect */
    opacity: 0.3;
    animation: moveBlob 25s infinite alternate ease-in-out;
}

.gradient-blob.blob1 {
    top: -150px;
    left: -150px;
}

.gradient-blob.blob2 {
    bottom: -150px;
    right: -150px;
    animation-delay: -12s; /* Starts animation at a different point */
}

/* Keyframes for the blob animation */
@keyframes moveBlob {
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        transform: translate(80px, -50px) scale(1.2);
    }
}

/* Content styling */
.services-hero-content {
    position: relative; /* Ensures content is above the gradient */
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 0.9fr; /* Gives text slightly more space */
    gap: 3rem;
    align-items: center;
}

.services-hero-text {
    max-width: 550px; /* Controls text line length for readability */
}

.hero-subtitle {
    font-family: var(--font-secondary);
    text-transform: uppercase;
    color: var(--color-accent);
    font-size: 1rem;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 0.5rem;
}

.services-hero-image {
    perspective: 1000px; /* Adds a bit of 3D space for hover effects */
}

.services-hero-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 12px;
    border: 8px solid var(--color-white);
    box-shadow: 0 20px 50px rgba(59, 65, 60, 0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.services-hero-image img:hover {
    transform: rotateY(-5deg) scale(1.03);
    box-shadow: 0 25px 60px rgba(59, 65, 60, 0.2);
}

/* Responsive adjustments for the new hero */
@media (max-width: 992px) {
    /* The stacking logic from the original responsive code will work, but we can refine */
    .services-hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .services-hero-image {
        order: -1;
        margin-bottom: 2rem;
    }
    .services-hero-text {
        max-width: 100%;
    }
}
/* --- 2. Service Details Section --- */
.service-details-section {
    background-color: var(--color-white);
}
.service-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2.5rem;
}
.service-detail-card {
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}
.service-detail-card img {
    height: 250px;
    width: 100%;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}
.service-detail-card .card-content {
    padding: 2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.service-detail-card h3 {
    margin-bottom: 1rem;
}
.service-detail-card p {
    font-size: 0.95rem;
    flex-grow: 1;
}
.service-detail-card ul {
    list-style: none;
    margin-top: 1rem;
    padding-left: 20px;
}
.service-detail-card ul li {
    position: relative;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
}
.service-detail-card ul li::before {
    content: '✓';
    position: absolute;
    left: -20px;
    color: var(--color-accent);
}

/* --- 3. Process Section --- */
.process-section {
    background-color: #f9f9f9;
}
.process-timeline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}
.process-step {
    display: flex;
    align-items: center;
    gap: 2rem;
    position: relative;
}
.process-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background-color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.process-icon img {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}

.process-icon svg {
    width: 48px;  /* Or your desired size */
    height: 48px;
    transition: transform 0.3s ease;
}

.process-step:hover .process-icon svg {
    transform: scale(1.1);
}

/* Optional: change colors on hover */
.process-step:hover .process-icon svg path,
.process-step:hover .process-icon svg circle,
.process-step:hover .process-icon svg line,
.process-step:hover .process-icon svg polyline {
    stroke: var(--color-accent); /* Makes the whole icon the accent color on hover */
}
.process-content p {
    margin-bottom: 0;
}

/* --- 4. Tech Showcase Section --- */
/* --- REDESIGNED Tech Showcase Section --- */
.tech-showcase-section {
    background-color: var(--color-dark);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
    /* Adds a subtle, high-tech grid background */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

.tech-showcase-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr; /* Asymmetrical for dynamic feel */
    align-items: center;
    gap: 4rem;
}

.tech-showcase-section .section-title, .tech-showcase-section p {
    color: var(--color-white);
}

.tech-showcase-subtitle {
    font-family: var(--font-secondary);
    text-transform: uppercase;
    color: var(--color-accent);
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* Feature tags styling */
.tech-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.tech-feature-item {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(157, 181, 178, 0.1); /* Transparent accent color */
    border: 1px solid rgba(157, 181, 178, 0.3);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Image container and effects */
.tech-showcase-image-wrapper {
    position: relative;
    perspective: 1200px;
}

.tech-showcase-image {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tech-showcase-image-wrapper:hover .tech-showcase-image {
    transform: rotateY(-8deg) rotateX(4deg) scale(1.05);
}

.tech-showcase-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* UI Overlay Effect */
.tech-showcase-image::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 70%;
    height: 60%;
    border-radius: 12px;
    border-top: 2px solid var(--color-accent);
    border-left: 2px solid var(--color-accent);
    opacity: 0.5;
    transition: all 0.5s ease;
}

.tech-showcase-image-wrapper:hover .tech-showcase-image::before {
    transform: translate(10px, 10px);
    opacity: 0.8;
}

/* Animated Data Points */
.data-point {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: var(--color-accent);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--color-accent), 0 0 20px var(--color-accent);
    animation: pulse 2s infinite alternate ease-in-out;
}
.data-point.p1 { top: 20%; left: 15%; animation-delay: 0s; }
.data-point.p2 { top: 50%; left: 60%; animation-delay: -1s; }
.data-point.p3 { bottom: 25%; right: 20%; animation-delay: -0.5s; }

@keyframes pulse {
    0% { transform: scale(0.8); opacity: 0.7; }
    100% { transform: scale(1.2); opacity: 1; }
}

/* Responsive adjustments for the new showcase */
@media (max-width: 992px) {
    .tech-showcase-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .tech-showcase-image-wrapper {
        order: -1;
        margin-bottom: 3rem;
    }
    .tech-features {
        justify-content: center;
    }
}
/* --- 5. Specialized Services Section --- */
/* --- REDESIGNED Specialized Services Section --- */
.specialized-services-section {
    background-color: #f9f9f9;
}

.specialized-services-container {
    max-width: 1000px;
    margin: 3rem auto 0;
}

.service-selectors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.service-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--color-white);
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
    opacity: 0.7;
    border-bottom: 4px solid transparent;
}

.service-selector:hover {
    opacity: 1;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.service-selector.active {
    opacity: 1;
    border-color: #ccc;
    border-bottom-color: var(--color-accent);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.service-selector svg {
    flex-shrink: 0;
    color: var(--color-dark);
}

.service-selector .selector-text h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.2rem;
}

.service-selector .selector-text p {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
}

/* Content Panel Styling */
.service-content-panel {
    display: none; /* Hidden by default */
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    align-items: center;
}

.service-content-panel.active {
    display: grid; /* Shown when active */
    animation: fadeIn 0.6s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.specialized-service-image img {
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.specialized-service-text h3 {
    margin-top: 0;
}

/* Responsive adjustments for the new section */
@media (max-width: 768px) {
    .service-selectors {
        grid-template-columns: 1fr;
    }
    .service-content-panel,
    .service-content-panel.active {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .specialized-service-image {
        margin-bottom: 2rem;
        height: 400px;
    }

    .specialized-service-image img 
    {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

/* --- 6. Integration Section --- */
.integration-section {
    background-color: var(--color-accent);
}
.integration-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}
.integration-section .section-title, .integration-section p {
    color: var(--color-dark);
}
.integration-image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    position: relative;
}
.integration-image-grid img {
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    transition: var(--transition-speed);
}
.integration-image-grid img:nth-child(1) {
    transform: rotate(-5deg);
}
.integration-image-grid img:nth-child(2) {
    transform: rotate(5deg) translateY(20px);
}
.integration-image-grid:hover img {
    transform: rotate(0) translateY(0);
}

/* --- RESPONSIVE STYLES FOR SERVICES PAGE --- */
@media (max-width: 992px) {
    .services-hero-content { grid-template-columns: 1fr; text-align: center; }
    .services-hero-image { order: -1; margin-bottom: 2rem; }

    .service-details-grid { grid-template-columns: 1fr; }

    .tech-showcase-grid { grid-template-columns: 1fr; text-align: center; }
    .tech-showcase-image { order: -1; margin-bottom: 2rem; }

    .specialized-service-item, .specialized-service-item:nth-child(even) {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .specialized-service-item:nth-child(even) .specialized-service-image { order: 1; }

    .integration-content { grid-template-columns: 1fr; text-align: center; }
}

@media (max-width: 768px) {
    .service-details-grid { grid-template-columns: 1fr; }
    .process-step { flex-direction: column; text-align: center; }
    .process-timeline::before { display: none; }
}

/* --- STORY PAGE STYLES --- */

/* --- 1. Story Hero Section --- */
.story-hero-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    color: var(--color-white);
    background: url('images/story-hero-bg.webp') no-repeat center center/cover;
}
.story-hero-content {
    position: relative;
    max-width: 800px;
}

/* --- 2. Founder Section --- */
.founder-section {
    overflow-x: hidden;
    background-color: var(--color-white);
}
.founder-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: center;
}
.founder-images {
    position: relative;
}
.founder-portrait {
    border-radius: 8px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.founder-action-shot {
    position: absolute;
    bottom: -15%;
    right: -15%;
    width: 50%;
    border-radius: 8px;
    border: 4px solid var(--color-white);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* --- 3. Philosophy Section --- */
/* --- REDESIGNED Philosophy Section --- */
.philosophy-section {
    background-color: var(--color-dark);
    position: relative;
    overflow: hidden;
    /* Reusing the subtle grid for a tech feel */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
}

.philosophy-section .section-title {
    color: var(--color-white);
}

.philosophy-comparison-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5rem;
    min-height: 500px; /* Ensures space for overlapping */
}

/* Base card styles */
.philosophy-card {
    padding: 2rem;
    border-radius: 12px;
    width: 48%;
    max-width: 500px;
    transition: all 0.4s ease;
}
.philosophy-card .card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.philosophy-card img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.philosophy-card h3 {
    margin: 0;
    font-size: 1.3rem;
    text-align: left;
}
.philosophy-card p {
    font-size: 0.95rem;
    text-align: left;
}

/* Styling for the "Old Model" */
.philosophy-card.old-model {
    background-color: #3B413C; /* Slightly lighter than the section bg */
    border: 1px solid #4a514b;
    color: rgba(255,255,255,0.6);
    transform: rotate(-2deg);
    z-index: 1;
    filter: grayscale(80%);
    opacity: 0.8;
}
.philosophy-card.old-model h3 { color: rgba(255,255,255,0.8); }

/* Styling for the "New Model" */
.philosophy-card.new-model {
    background-color: var(--color-white);
    color: var(--color-dark);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4);
    border-top: 4px solid var(--color-accent);
    transform: translateY(-40px) rotate(1deg);
    z-index: 5;
}
.philosophy-card.new-model h3 { color: var(--color-dark); }
.philosophy-card.new-model img {
    border: 2px solid var(--color-accent);
}

/* The 'VS' Divider */
.comparison-divider {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: var(--color-accent);
    color: var(--color-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 0 15px rgba(157, 181, 178, 0.5);
}

/* Responsive adjustments for the comparison section */
@media (max-width: 992px) {
    .philosophy-comparison-container {
        flex-direction: column;
        gap: 2rem;
        margin-top: 3rem;
    }
    .philosophy-card {
        width: 100%;
        max-width: 550px;
    }
    .philosophy-card.old-model, .philosophy-card.new-model {
        transform: none; /* Reset transforms on smaller screens */
    }
    .comparison-divider {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
        margin: -1rem 0; /* Adjust margin to sit between the cards */
    }
}

/* --- 4. Timeline Section --- */
/* --- TIMELINE SLIDER STYLES --- */

.timeline-slider-section {
    background: var(--color-dark);
    color: var(--color-white);
}

.timeline-slider-section .section-title {
    color: var(--color-white);
    margin-bottom: 3rem;
}

.timeline-slider {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden; /* This is the viewport for the slider */
}

.slider-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); /* Smooth sliding animation */
}

.slider-slide {
    flex: 0 0 100%; /* Each slide takes up the full width */
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    align-items: center;
    padding: 1rem;
}

/* Content inside the slides */
.slide-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
}

.slide-content h3 {
    font-size: 2rem;
    position: relative;
    padding-left: 70px; /* Space for the year */
}

.slide-content h3::before {
    content: attr(data-year); /* Pulls the year from the parent slide */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-secondary);
    font-size: 1.2rem;
    color: var(--color-accent);
}

/* Animations for active slide content */
.slider-slide .slide-image,
.slider-slide .slide-content h3,
.slider-slide .slide-content p {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.slider-slide.active .slide-image {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.slider-slide.active .slide-content h3 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.slider-slide.active .slide-content p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

/* Slider Navigation Styling */
.slider-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding: 0 1rem;
}

.slider-arrow {
    background: transparent;
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition-speed);
}

.slider-arrow:hover {
    background: var(--color-accent);
    color: var(--color-dark);
}

.slider-dots {
    display: flex;
    gap: 1rem;
}

.slider-dot {
    width: 12px;
    height: 12px;
    background: transparent;
    border: 2px solid var(--color-accent);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition-speed);
}

.slider-dot.active {
    background: var(--color-accent);
}

/* Responsive adjustments for the slider */
@media (max-width: 768px) {
    .slider-slide {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .slide-image {
        order: -1;
        margin-bottom: 2rem;
    }
    .slide-content h3 {
        padding-left: 0;
        text-align: center;
    }
    .slide-content h3::before {
        position: static;
        transform: none;
        display: block;
        margin-bottom: 0.5rem;
        font-size: 1rem;
    }
}
/* --- 5. Values Section --- */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.value-card {
    background-color: var(--color-white);
    padding: 2rem;
    border: 1px solid #eee;
    border-radius: 8px;
    text-align: center;
}
.value-card img {
    height: 150px;
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

/* --- 6. Team Section --- */
/* --- TEAM DOSSIER SECTION STYLES --- */

.team-dossier-section {
    background-color: var(--color-dark);
    color: var(--color-white);
    /* Reusing the high-tech grid background */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}
.team-dossier-section .section-title,
.team-dossier-section .section-subtitle {
    color: var(--color-white);
}

.team-dossier-container {
    max-width: 1100px;
    margin: 3rem auto 0;
    display: grid;
    grid-template-columns: 1fr 2.5fr; /* Nav list is smaller */
    gap: 2rem;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 2rem;
}

/* Dossier Navigation List */
.dossier-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.dossier-nav li {
    margin: 0;
}
.dossier-nav-item {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--color-white);
    padding: 1.5rem 1rem;
    text-align: left;
    cursor: pointer;
    border-left: 4px solid transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.dossier-nav-item:hover {
    background-color: rgba(255,255,255,0.05);
}
.dossier-nav-item.active {
    background-color: rgba(157, 181, 178, 0.1);
    border-left-color: var(--color-accent);
}
.dossier-nav-item h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    pointer-events: none; /* Makes text inside button unclickable */
}
.dossier-nav-item span {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    pointer-events: none;
}

/* Dossier Content Display */
.dossier-content-display {
    position: relative;
    min-height: 400px;
}
.dossier-profile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: translateX(15px);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    align-items: start;
}
.dossier-profile.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
.profile-image img {
    width: 100%;
    max-width: 250px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
}
.profile-text h3 {
    font-family: var(--font-secondary);
    color: var(--color-accent);
    margin-top: 0;
    font-size: 1.2rem;
}
.profile-text p {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.8);
}

/* Responsive adjustments for the dossier */
@media (max-width: 992px) {
    .team-dossier-container {
        grid-template-columns: 1fr;
    }
    .dossier-nav {
        display: flex;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 1rem;
    }
    .dossier-nav-item {
        border-left: none;
        border-bottom: 4px solid transparent;
        flex-shrink: 0;
    }
    .dossier-profile {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .profile-image {
        margin: 0 auto 2rem auto;
    }

    .dossier-content-display
    {
        min-height: 500px;
    }
}
@media (max-width: 600px)
{
    .dossier-content-display
    {
        min-height: 750px;
    }
}
/* --- 7. Future Vision Section --- */
/* --- REDESIGNED Future Vision Section --- */
.future-vision-section {
    position: relative;
    background-color: var(--color-dark);
    padding: 120px 0;
    overflow: hidden;
}

/* Animation Container */
.vision-animation-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 800px;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0.3;
}

.vision-animation-container svg {
    width: 100%;
    height: auto;
    animation: rotateNetwork 60s linear infinite;
}

/* SVG Element Styling */
.central-orb {
    fill: var(--color-accent);
    filter: drop-shadow(0 0 10px var(--color-accent));
    animation: pulseOrb 4s infinite alternate ease-in-out;
}

.node {
    fill: var(--color-white);
    animation: pulseNode 3s infinite alternate ease-in-out;
}
/* Staggering node animations */
.node:nth-of-type(2) { animation-delay: -1s; }
.node:nth-of-type(3) { animation-delay: -2.5s; }
.node:nth-of-type(4) { animation-delay: -0.5s; }

.connection {
    stroke: var(--color-accent);
    stroke-width: 1px;
    stroke-dasharray: 200; /* A large number, length of the line */
    stroke-dashoffset: 200;
    animation: drawConnection 8s infinite alternate ease-in-out;
}
/* Staggering connection animations */
.connection:nth-of-type(2) { animation-delay: -2s; }
.connection:nth-of-type(3) { animation-delay: -4s; }
.connection:nth-of-type(4) { animation-delay: -6s; }

/* Text Content Styling */
.future-vision-text {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    color: var(--color-white);
}
.future-vision-section .section-title { color: var(--color-white); }
.future-vision-section p { color: rgba(255,255,255,0.8); }

/* Keyframe Animations */
@keyframes rotateNetwork {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulseOrb {
    from { r: 7; }
    to { r: 9; }
}

@keyframes pulseNode {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

@keyframes drawConnection {
    from { stroke-dashoffset: 200; }
    to { stroke-dashoffset: 0; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .future-vision-section {
        padding: 100px 0;
    }
    .vision-animation-container {
        opacity: 0.2;
    }
}

/* --- RESPONSIVE STYLES FOR STORY PAGE --- */
@media (max-width: 992px) {
    .founder-grid { grid-template-columns: 1fr; text-align: center; }
    .founder-images { max-width: 400px; margin: 0 auto 2rem auto; }
    .philosophy-grid { grid-template-columns: 1fr; }
    .future-vision-grid { grid-template-columns: 1fr; text-align: center; }
    .future-vision-image { order: -1; margin-bottom: 2rem; }
}

@media (max-width: 768px) {
    .timeline-container::after { left: 20px; }
    .timeline-item { width: 100%; padding-left: 50px; padding-right: 0; left: 0 !important; }
    .timeline-item:nth-child(odd), .timeline-item:nth-child(even) { left: 0; }
    .timeline-item::after { left: 10px; }
    .timeline-item:nth-child(odd)::after, .timeline-item:nth-child(even)::after { left: 10px; }
    .timeline-date { position: static; margin-bottom: 0.5rem; }
    .timeline-item:nth-child(odd) .timeline-content,
    .timeline-item:nth-child(even) .timeline-content { text-align: left; }
    .timeline-content { display: flex; flex-direction: column; }
    .timeline-image { display: block; order: -1; width: 100%; margin-bottom: 1rem; }
    .timeline-image img { width: 100%; height: 150px; object-fit: cover; border-radius: 4px; }
}

/* --- INDUSTRIES PAGE STYLES --- */

/* --- 1. Industries Hero Section --- */
.industries-hero-section {
    position: relative;
    background: url('images/indus-bg.webp') no-repeat center center/cover;
    padding: 200px 0 100px 0;
    color: var(--color-white);
}
.industries-hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, var(--color-dark) 0%, rgba(59, 65, 60, 0.4) 100%);
}
.industries-hero-content {
    position: relative;
}
.industries-hero-text {
    max-width: 60%;
}
.industries-hero-section h1, .industries-hero-section p, .industries-hero-section .hero-subtitle {
    color: var(--color-white);
}

/* --- 2. Expertise Matters Section --- */
.expertise-matters-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}
.expertise-matters-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.expertise-matters-images img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.expertise-matters-images img:nth-child(2) {
    margin-top: 2rem;
}

/* --- 3. Industry Grid Section --- */
/* --- INDUSTRY CAROUSEL STYLES --- */

.industry-carousel-section {
    background-color: #f9f9f9;
    padding-bottom: 100px;
}

.industry-carousel-container {
    margin-top: 3rem;
}

.industry-carousel {
    position: relative;
    width: 100%;
    height: 450px;
    perspective: 1200px; /* This enables the 3D effect */
    margin: 0 auto;
}

.carousel-track {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d; /* Key for maintaining 3D transforms */
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.carousel-slide {
    position: absolute;
    left: 0; right: 0;
    margin: 0 auto;
    width: 320px; /* Fixed width for the cards */
    height: 420px;
    border-radius: 12px;
    overflow: hidden;
    color: var(--color-white);
    display: flex;
    align-items: flex-end;
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.6s ease;
}

.carousel-slide img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
}

.industry-card-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
    z-index: 2;
}

.slide-content {
    position: relative;
    z-index: 3;
    padding: 2rem;
    width: 100%;
}

.slide-content h3 {
    color: var(--color-white);
    margin-bottom: 0;
    font-size: 1.5rem;
}

/* Navigation Styling */
.carousel-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
}

.carousel-arrow {
    background: var(--color-white);
    border: 1px solid #ddd;
    color: var(--color-dark);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: var(--transition-speed);
}
.carousel-arrow:hover {
    background: var(--color-accent);
    color: var(--color-dark);
    border-color: var(--color-accent);
}

.carousel-dots { display: flex; gap: 1rem; }

.carousel-dot {
    width: 12px;
    height: 12px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition-speed);
}
.carousel-dot.active {
    background: var(--color-dark);
    transform: scale(1.2);
}
/* --- 4. Deep Dive Section --- */
.deep-dive-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
}
.deep-dive-image img {
    width: 100%;
    height: 400px;
    object-fit: cover1;
    border-radius: 8px;
}
.deep-dive-tag {
    display: inline-block;
    font-family: var(--font-secondary);
    text-transform: uppercase;
    background-color: var(--color-accent);
    color: var(--color-dark);
    padding: 5px 15px;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.8rem;
}
.deep-dive-text ul {
    list-style: none;
    padding-left: 20px;
    margin-top: 1rem;
}
.deep-dive-text ul li {
    position: relative;
    margin-bottom: 0.75rem;
}
.deep-dive-text ul li::before {
    content: '›';
    position: absolute;
    left: -20px;
    color: var(--color-accent);
    font-weight: bold;
    font-size: 1.2rem;
    top: -3px;
}

/* --- 5. Cross-Sector Section --- */
.cross-sector-section {
    background-color: #f9f9f9;
}
.cross-sector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.cross-sector-item {
    text-align: center;
    padding: 2rem;
    background: var(--color-white);
    border: 1px solid #eee;
    border-radius: 8px;
}
.cross-sector-item img {
    height: 120px;
    width: 120px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 1.5rem auto;
}

/* --- 6. Case Teaser Section --- */
.case-teaser-section {
    position: relative;
    padding: 100px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.case-teaser-content .glass-card {
    max-width: 600px;
}
.case-teaser-tag {
    font-family: var(--font-secondary);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    letter-spacing: 1px;
}
.case-teaser-section .btn-link {
    color: var(--color-white);
}

/* --- RESPONSIVE STYLES FOR INDUSTRIES PAGE --- */
@media (max-width: 992px) {
    .industries-hero-text { max-width: 80%; }
    .expertise-matters-grid { grid-template-columns: 1fr; }
    .expertise-matters-images { order: -1; margin-bottom: 2rem; }
    .deep-dive-grid { grid-template-columns: 1fr; }
    .deep-dive-image { order: -1; margin-bottom: 2rem; }
    .case-teaser-section { justify-content: center; text-align: center; }
}

@media (max-width: 768px) {
    .industries-hero-section { padding: 160px 0 60px 0; }
    .industries-hero-text { max-width: 100%; text-align: center; }
    .expertise-matters-images { grid-template-columns: 1fr; }
    .expertise-matters-images img:nth-child(2) { margin-top: 1rem; }
    .case-teaser-content { padding: 0; }
}

/* --- CASES PAGE STYLES --- */

/* --- 1. Cases Hero Section --- */
.cases-hero-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    color: var(--color-white);
    background: url('images/cases-bg.webp') no-repeat center center/cover;
}
.cases-hero-content { position: relative; max-width: 800px; }

/* --- 2. Case Methodology Section --- */
/* --- METHODOLOGY STEPPER STYLES --- */

.case-methodology-section {
    background-color: var(--color-dark);
}
.case-methodology-section .section-title,
.case-methodology-section .section-subtitle {
    color: var(--color-white);
}

.methodology-container {
    max-width: 1100px;
    margin: 3rem auto 0;
    background: #4A514B; /* A slightly lighter dark shade */
    border-radius: 12px;
    padding: 2.5rem;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Stepper Navigation Bar */
.methodology-stepper {
    /* display: grid;
    grid-template-columns: repeat(4, 1fr); */
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
    margin-bottom: 2.5rem;
}
.methodology-stepper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 12.5%; /* Start after half of the first item */
    width: 75%; /* Span across the middle two items */
    height: 2px;
    background-color: rgba(255,255,255,0.2);
    transform: translateY(-50%);
    z-index: 1;
}

.step-button {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 1rem 0;
}
.step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4);
    background-color: #4A514B;
    transition: all 0.3s ease;
}
.step-icon svg { width: 24px; height: 24px; }
.step-label { font-family: var(--font-secondary); font-weight: 700; }

.step-button:hover .step-icon {
    border-color: var(--color-accent);
}
.step-button.active { color: var(--color-white); }
.step-button.active .step-icon {
    background-color: var(--color-accent);
    color: var(--color-dark);
    border-color: var(--color-accent);
    transform: scale(1.1);
}

/* Content Display Area */
.methodology-display {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2.5rem;
    align-items: center;
}
.methodology-image-pane, .methodology-text-pane {
    position: relative;
    min-height: 350px; /* Prevent layout shift */
}
.step-image, .step-text {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.step-image { transform: scale(0.98); width: 100%;  object-fit: cover;}
.step-text { transform: translateY(10px); }

.step-image.active, .step-text.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}
.step-image img { width: 100%; height: 400px; object-fit: cover; border-radius: 8px; }

.step-text h3 { color: var(--color-accent); margin-top: 0; }
.step-text p { color: rgba(255,255,255,0.8); }

/* Responsive Adjustments */
@media (max-width: 992px) {
    .methodology-display { grid-template-columns: 1fr; }
    .methodology-image-pane { min-height: 300px; margin-bottom: 2rem; }
}
@media (max-width: 768px) {
    .step-label { font-size: 0.8rem; }
}
/* --- 3. Case Grid Section --- */
.case-grid-section { background-color: #f9f9f9; }
.case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}
.case-grid-card {
    background: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.06);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.case-grid-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.1);
}
.case-grid-card img {
    height: 220px;
    width: 100%;
    object-fit: cover;
}
.case-grid-content { padding: 1.5rem; }
.case-grid-content p { font-size: 0.95rem; margin-bottom: 0; }

/* --- 4. Case Spotlight Section --- */
.case-spotlight-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
    align-items: center;
}
.case-spotlight-tag {
    display: inline-block;
    font-family: var(--font-secondary);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1rem;
    font-size: 0.8rem;
    letter-spacing: 1px;
}
.case-breakdown h4 {
    margin-top: 1.5rem;
    border-left: 3px solid var(--color-accent);
    padding-left: 1rem;
}
.case-spotlight-image img { border-radius: 8px; width: 100%; height: 400px; object-fit: cover;}

/* --- 5. Case Metrics Section --- */
.case-metrics-section {
    background-color: var(--color-dark);
    color: var(--color-white);
}
.case-metrics-section .section-title { color: var(--color-white); }
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    text-align: center;
    margin-top: 3rem;
}
/* Updated CSS for Metric Icons */
.metric-item svg {
    height: 60px;
    width: 60px;
    margin: 0 auto 1rem auto;
    color: var(--color-accent); /* Directly sets the icon color */
}
.metric-item h3 {
    font-family: var(--font-secondary);
    font-size: 3rem;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}
.metric-item p {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
    margin: 0;
}

/* --- 6. 'What If?' Section --- */
.what-if-section { background-color: #f9f9f9; }
.what-if-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 900px;
    margin: 3rem auto 0;
}
.what-if-card {
    background: var(--color-white);
    border: 1px solid #eee;
    padding: 2rem;
    border-radius: 8px;
    border-left: 4px solid var(--color-accent);
}
.what-if-card h4 { margin-top: 0; }
.what-if-card p { font-size: 0.95rem; margin-bottom: 0; }

/* --- 7. Testimonial & CTA Section --- */
.testimonial-cta-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: center;
}
.testimonial-image img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto;
}
.testimonial-content blockquote {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    border-left: 4px solid var(--color-accent);
    padding-left: 2rem;
    margin: 0 0 1rem 0;
}
.testimonial-content cite {
    display: block;
    font-weight: bold;
    font-style: normal;
    margin-bottom: 2rem;
}

/* --- RESPONSIVE STYLES FOR CASES PAGE --- */
@media (max-width: 992px) {
    .case-methodology-grid { grid-template-columns: 1fr; }
    .case-methodology-image { order: -1; margin-bottom: 2rem; }
    .case-spotlight-grid { grid-template-columns: 1fr; }
    .case-spotlight-image { order: -1; margin-bottom: 2rem; }
    .testimonial-cta-grid { grid-template-columns: 1fr; text-align: center; }
    .testimonial-content blockquote { border: 0; padding: 0; }
}

@media (max-width: 768px) {
    .case-grid { grid-template-columns: 1fr; }
    .testimonial-image img { width: 150px; height: 150px; }
    .testimonial-content blockquote { font-size: 1.2rem; }
}

/* --- INSIGHTS PAGE STYLES --- */

/* --- 1. Insights Hero Section --- */
.insights-hero-section {
    position: relative;
    background: url('images/insights-bg.webp') no-repeat top center/cover;
    padding: 200px 0 100px 0;
    color: var(--color-white);
}
.insights-hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, rgba(59, 65, 60, 0.9) 0%, rgba(59, 65, 60, 0.2) 100%);
}
.insights-hero-content { position: relative; }
.insights-hero-text { max-width: 50%; }
.insights-hero-section h1, .insights-hero-section p, .insights-hero-section .hero-subtitle { color: var(--color-white); }

/* --- 2. Latest Briefings Section --- */
/* --- INSIGHTS MASONRY ACCORDION STYLES --- */

.latest-briefings-section {
    background-color: #f9f9f9;
}

.insights-accordion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    align-items: start;
    grid-auto-flow: dense; /* Helps fill gaps */
    gap: 1.5rem;
    margin-top: 3rem;
}

.article-card {
    background: var(--color-white);
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    overflow: hidden; /* Crucial for the max-height animation */
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.article-card:hover:not(.active) {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.article-card.active {
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-color: var(--color-accent);
}
/* Staggered masonry effect: make the middle card taller */
.article-card:nth-child(2) {
    grid-row: span 2;
}

.article-header {
    position: relative;
    height: 250px;
    color: var(--color-white);
}
.article-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.article-card:hover .article-header img,
.article-card.active .article-header img {
    transform: scale(1.05);
}

.article-header::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 80%);
}

.header-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem;
    z-index: 2;
}
.header-content .article-category {
    font-family: var(--font-secondary);
    text-transform: uppercase;
    color: var(--color-accent);
    font-size: 0.8rem;
    letter-spacing: 1px;
}
.header-content h3 {
    color: var(--color-white);
    margin: 0.25rem 0 0 0;
    font-size: 1.3rem;
}

/* The expandable content */
.article-expanded-content {
    max-height: 0; /* Initially hidden */
    overflow: hidden;
    padding: 0 1.5rem;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
}
.article-card.active .article-expanded-content {
    max-height: 20rem; /* Animate to reveal */
    padding: 1.5rem;
}

.article-expanded-content p {
    margin-bottom: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* On smaller screens, disable the masonry effect for a simple stack */
    .article-card:nth-child(2) {
        grid-row: auto;
    }
}
/* --- 3. Featured Report Section --- */
/* --- REDESIGNED Featured Report Section --- */
.featured-report-section {
    background-color: var(--color-dark);
    color: var(--color-white);
    position: relative;
    padding: 100px 0;
    overflow: hidden;
}

/* Subtle, glowing backdrop */
.report-backdrop {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(157, 181, 178, 0.08) 0%, transparent 60%);
    z-index: 1;
}

/* The main showcase container */
.report-showcase {
    position: relative;
    z-index: 2;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3rem;
    perspective: 1500px; /* The "camera" for our 3D scene */
}

.report-cover {
    width: 280px;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.report-showcase:hover .report-cover {
    transform: rotateY(-15deg) rotateX(10deg) scale(1.1);
}

.report-cover img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 30px 60px -15px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* The orbiting highlight tags */
.report-highlight {
    position: absolute;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    animation: float 5s infinite alternate ease-in-out;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Positioning each highlight */
.report-highlight.h1 { top: 20%; left: 15%; animation-delay: 0s; }
.report-highlight.h2 { bottom: 25%; right: 10%; animation-delay: -2.5s; }
.report-highlight.h3 { top: 60%; left: 5%; animation-delay: -1s; }

/* The 3D hover effect also moves the highlights */
.report-showcase:hover .report-highlight.h1 { transform: translate3d(-20px, -10px, 50px); }
.report-showcase:hover .report-highlight.h2 { transform: translate3d(20px, 10px, 60px); }
.report-showcase:hover .report-highlight.h3 { transform: translate3d(-15px, 5px, 40px); }

/* The text content below */
.report-details {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 650px;
    margin: 0 auto;
}
.report-details .section-title, .report-details p { color: var(--color-white); }
.featured-report-tag {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-dark);
    padding: 5px 15px;
    border-radius: 4px;
    font-family: var(--font-secondary);
    text-transform: uppercase;
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

/* Keyframe for the floating animation */
@keyframes float {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-15px); }
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .report-showcase { height: 350px; }
    .report-cover { width: 220px; }
    .report-highlight { font-size: 0.8rem; padding: 8px 16px; }
    .report-highlight.h1 { left: 5%; }
    .report-highlight.h2 { right: 2%; }
    .report-highlight.h3 { left: 0%; }
}
@media (max-width: 768px) {
    .report-showcase { margin-bottom: 2rem; }
    .report-highlight { display: none; } /* Hide highlights on small mobile for clarity */
}

/* --- 4. Expert Spotlight Section --- */
.expert-spotlight-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: center;
}
.expert-spotlight-image img {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto;
}
.expert-spotlight-content blockquote {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.4;
    border-left: 4px solid var(--color-accent);
    padding-left: 2rem;
    margin: 0 0 1rem 0;
}
.expert-spotlight-content cite {
    display: block;
    font-weight: bold;
    font-style: normal;
}

/* --- 5. Threat Radar Section --- */
.radar-section { background-color: #f9f9f9; }
.radar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
    text-align: center;
}
.radar-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1.5rem auto;
}
.radar-column ul { list-style: none; padding: 0; }
.radar-column ul li {
    background: var(--color-white);
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    border: 1px solid #eee;
}

/* --- 6. Podcast Teaser Section --- */
.podcast-teaser-section {
    position: relative;
    padding: 100px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.podcast-teaser-content .glass-card { max-width: 600px; }
.podcast-teaser-section .btn-link { color: var(--color-white); }
.podcast-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 1rem auto;
}

/* --- 7. Newsletter CTA Section --- */
.newsletter-cta-section { background: var(--color-accent); }
.newsletter-cta-content { max-width: 700px; text-align: center; }
.newsletter-cta-content .section-title, .newsletter-cta-content p { color: var(--color-dark); }
.newsletter-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 2rem;
}
.newsletter-form input {
    flex-grow: 1;
    padding: 14px;
    border: 1px solid var(--color-dark);
    border-radius: 4px;
    font-size: 1rem;
}
.btn.btn-dark { background-color: var(--color-dark); color: var(--color-white); }
.btn.btn-dark:hover { background-color: var(--color-white); color: var(--color-dark); border-color: var(--color-dark); }

/* --- RESPONSIVE STYLES FOR INSIGHTS PAGE --- */
@media (max-width: 992px) {
    .insights-hero-text { max-width: 70%; }
    .featured-report-grid { grid-template-columns: 1fr; text-align: center; }
    .featured-report-image { order: -1; margin-bottom: 2rem; max-width: 400px; margin-left: auto; margin-right: auto; }
    .expert-spotlight-grid { grid-template-columns: 1fr; text-align: center; }
    .expert-spotlight-content blockquote { border: 0; padding: 0; }
}

@media (max-width: 768px) {
    .insights-hero-text { max-width: 100%; text-align: center; }
    .newsletter-form { flex-direction: column; }
    .expert-spotlight-image img { width: 200px; height: 200px; }
    .expert-spotlight-content blockquote { font-size: 1.5rem; }
}

/* --- CAREERS PAGE STYLES --- */

/* --- 1. Careers Hero Section --- */
/* --- REDESIGNED Careers Hero Section --- */
.careers-hero-section {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    color: var(--color-white);
    background-color: var(--color-dark);
    /* Adding the subtle grid for a high-tech feel */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    overflow: hidden;
}

/* The animated SVG container */
.hero-iris-animation {
    position: absolute;
    top: 50%;
    right: -15%;
    width: 800px;
    height: 800px;
    transform: translateY(-50%);
    opacity: 0.3;
    z-index: 1;
}

.iris-svg {
    width: 100%;
    height: 100%;
    stroke: var(--color-accent);
    animation: rotateIris 90s linear infinite;
}
.iris-svg .orb {
    fill: var(--color-accent);
    filter: drop-shadow(0 0 10px var(--color-accent));
    animation: pulseOrb 5s infinite alternate ease-in-out;
}

/* The content container within the section */
.careers-hero-container {
    position: relative;
    z-index: 2;
}

.careers-hero-content {
    max-width: 600px; /* Control line length */
    text-align: left; /* Shift to an asymmetrical layout */
}
.careers-hero-content h1,
.careers-hero-content p {
    color: var(--color-white);
}

/* Keyframe Animations */
@keyframes rotateIris {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulseOrb {
    from { r: 4; opacity: 0.8; }
    to { r: 6; opacity: 1; }
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .careers-hero-section {
        min-height: 80vh;
        text-align: center; /* Center text on smaller screens */
    }
    .careers-hero-content {
        max-width: 700px;
        margin: 0 auto;
        text-align: center;
    }
    .hero-iris-animation {
        right: 50%;
        transform: translate(50%, -50%); /* Center the animation */
        width: 600px;
        height: 600px;
        opacity: 0.2;
    }
}

@media (max-width: 768px) {
    .hero-iris-animation {
        width: 500px;
        height: 500px;
    }
}
/* --- 2. Why Us Section --- */
.why-us-section { background-color: #f9f9f9; }
.why-us-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.why-us-card {
    text-align: center;
    padding: 2rem;
}
.why-us-card img {
    height: 60px;
    width: 60px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 1.5rem auto;
}

/* --- 3. Values in Practice Section --- */
/* --- REDESIGNED Values-in-Practice Section --- */
.values-in-practice-section {
    background-color: var(--color-dark);
}
.values-in-practice-section .section-title,
.values-in-practice-section .section-subtitle {
    color: var(--color-white);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 2rem;
    margin-top: 4rem;
}

/* Base style for each value card */
.value-card {
    background: #4A514B; /* Lighter dark shade */
    padding: 2.5rem 2rem;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(0);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, opacity 0.4s ease;
}

.value-icon {
    margin: 0 auto 1.5rem auto;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    transition: color 0.4s ease, transform 0.4s ease;
}
.value-icon svg {
    width: 48px;
    height: 48px;
}

.value-card h3 {
    color: var(--color-white);
    margin-bottom: 1rem;
}
.value-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.8;
}

/* The sophisticated hover interaction */
.values-grid:hover .value-card {
    opacity: 0.5;
    transform: translateY(10px);
}

.values-grid .value-card:hover {
    opacity: 1;
    transform: translateY(0);
    border-color: var(--color-accent);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.values-grid .value-card:hover .value-icon {
    transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Disable the fade-out effect on mobile as it can be confusing with touch */
    .values-grid:hover .value-card {
        opacity: 1;
        transform: none;
    }
}

/* --- 4. Team Testimonials Section --- */
.team-testimonials-section { background-color: #f9f9f9; }
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.testimonial-card {
    background: var(--color-white);
    padding: 2rem;
    border-radius: 8px;
    border-top: 4px solid var(--color-accent);
    text-align: center;
}
.testimonial-card img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin: -70px auto 1rem auto;
    border: 4px solid var(--color-white);
}
.testimonial-card blockquote {
    font-style: italic;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 0.95rem;
}
.testimonial-card cite {
    display: block;
    font-weight: bold;
    font-style: normal;
    margin-top: 1rem;
    color: var(--color-dark);
}

/* --- 5. Openings Section --- */
.openings-list {
    display: grid;
    gap: 1.5rem;
    margin-top: 3rem;
}
.job-listing {
    display: grid;
    grid-template-columns: 1.5fr 2fr 1fr;
    gap: 2rem;
    align-items: center;
    background: var(--color-white);
    padding: 2rem;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: var(--transition-speed);
}
.job-listing:hover {
    border-color: var(--color-accent);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.job-info h3 { margin-bottom: 0.25rem; }
.job-info span { font-size: 0.9rem; color: #666; }
.job-desc p { margin: 0; font-size: 0.9rem; }
.job-apply { text-align: right; }

/* --- 6. Recruitment Process Section --- */
.process-careers { background-color: #f9f9f9; }

/* --- 7. Final CTA Section --- */
/* --- REDESIGNED Final CTA Section (Assessment Scan) --- */
.final-cta-section {
    position: relative; /* Crucial for positioning the scanner line */
    background: var(--color-dark);
    text-align: center;
    padding: 120px 0;
    overflow: hidden;
    /* High-tech grid background */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* The glowing scanner line */
.scanner-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-accent);
    box-shadow: 0 0 15px var(--color-accent), 0 0 25px var(--color-accent);
    pointer-events: none; /* Allows clicks to pass through */
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 3;
}

.final-cta-section:hover .scanner-line {
    opacity: 1;
}

/* Content styling */
.final-cta-content {
    position: relative;
    z-index: 2;
    max-width: 750px;
}

.final-cta-section .section-title, .final-cta-section p {
    color: var(--color-white);
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
    transition: color 0.4s ease;
}

/* Text subtly fades on hover to make the 'scan' more dramatic */
.final-cta-section:hover .section-title,
.final-cta-section:hover p {
    color: rgba(255, 255, 255, 0.8);
}

.final-cta-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem auto;
    color: var(--color-accent);
}
.final-cta-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    animation: rotateIcon 20s linear infinite;
}

@keyframes rotateIcon {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- RESPONSIVE STYLES FOR CAREERS PAGE --- */
@media (max-width: 992px) {
    .values-in-practice-grid { grid-template-columns: 1fr; }
    .values-in-practice-image { order: -1; margin-bottom: 2rem; }
    .job-listing { grid-template-columns: 1fr; text-align: center; }
    .job-apply { text-align: center; margin-top: 1rem; }
}

@media (max-width: 768px) {
    .testimonials-grid { gap: 4rem; }
}


/* --- FOOTER --- */
.main-footer {
    background-color: var(--color-dark);
    color: rgba(255, 255, 255, 0.7);
    padding: 60px 0 20px 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 3rem;
    margin-bottom: 3rem;
}
.footer-grid h4 {
    font-family: var(--font-secondary);
    color: var(--color-white);
    margin-bottom: 1rem;
    text-transform: uppercase;
}
.footer-about p { font-size: 0.9rem; margin-bottom: 1.5rem; }
.footer-socials { display: flex; gap: 1rem; }
.footer-socials img { width: 24px; height: 24px; border-radius: 4px; }
.footer-links ul li { margin-bottom: 0.5rem; }
.footer-links a { color: rgba(255, 255, 255, 0.7); }
.footer-links a:hover { color: var(--color-white); }
.footer-contact p { font-size: 0.9rem; margin-bottom: 0.5rem; }
.footer-contact a { color: var(--color-accent); }
.footer-contact a:hover { color: var(--color-white); }
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
    text-align: center;
    font-size: 0.8rem;
}
.footer-bottom a { color: rgba(255, 255, 255, 0.7); }
.footer-bottom a:hover { color: var(--color-white); }

/* --- SCROLL ANIMATIONS --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.service-card.animate-on-scroll:nth-child(2) { transition-delay: 0.2s; }
.service-card.animate-on-scroll:nth-child(3) { transition-delay: 0.4s; }
.glass-card.animate-on-scroll:nth-child(2) { transition-delay: 0.2s; }
.glass-card.animate-on-scroll:nth-child(3) { transition-delay: 0.4s; }


body.no-scroll {
    overflow: hidden;
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 1220px) {
    h1 { font-size: 2.5rem; }
    h2.section-title { font-size: 2rem; }
    section { padding: 60px 0; }
    
    .main-nav { display: none; }
    .hamburger { display: block; }

    /* .main-nav.active {
        display: flex;
        position: absolute;
        top: 100%;
        right: 0;
        background: var(--color-dark);
        width: 100%;
        flex-direction: column;
        padding: 1rem;
        text-align: center;
    } */
    .main-nav.active ul { flex-direction: column; }
    
    .about-grid { grid-template-columns: 1fr; }
    .about-image-container { order: 1; }
    .about-text-content { order: 2; text-align: center; }

    .differentiators-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .case-card, .case-card:nth-child(even) { grid-template-columns: 1fr; }
    .case-card:nth-child(even) .case-image { order: 1; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-socials { justify-content: center; }
}

@media (max-width: 992px) {
    .main-nav {
        display: flex; /* Always display, but hide it off-screen */
        position: absolute;
        top: 70px; /* Adjust based on your final header height */
        right: 0;
        width: 100%;
        flex-direction: column;
        background: var(--color-dark-transparent);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        padding: 1rem 0;
        
        /* Initial hidden state */
        opacity: 0;
        transform: translateY(-20px);
        visibility: hidden;
        transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s 0.4s;
    }

    .main-nav.active {
        /* Active visible state */
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s 0s;
    }

    .main-nav ul {
        flex-direction: column;
        width: 100%;
    }
    
    .main-nav ul li {
        width: 100%;
        text-align: center;
        padding: 0.5rem 0;
        
        /* Staggered animation for list items */
        opacity: 0;
        transform: translateX(-15px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Animate list items into view when menu is active */
    .main-nav.active ul li {
        opacity: 1;
        transform: translateX(0);
    }

    /* Stagger the delay for a beautiful cascade effect */
    .main-nav.active ul li:nth-child(1) { transition-delay: 0.15s; }
    .main-nav.active ul li:nth-child(2) { transition-delay: 0.20s; }
    .main-nav.active ul li:nth-child(3) { transition-delay: 0.25s; }
    .main-nav.active ul li:nth-child(4) { transition-delay: 0.30s; }
    .main-nav.active ul li:nth-child(5) { transition-delay: 0.35s; }
    .main-nav.active ul li:nth-child(6) { transition-delay: 0.40s; }
    .main-nav.active ul li:nth-child(7) { transition-delay: 0.45s; }
}

/* 3. Animated Hamburger Icon (to 'X') */
.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-white);
    margin: 5px 0;
    border-radius: 2px;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), 
                opacity 0.4s ease;
}

/* Transform top bar into part of the 'X' */
.hamburger.active span:nth-child(1) {
    transform-origin: center;
    transform: translateY(8px) rotate(45deg);
}

/* Fade out the middle bar */
.hamburger.active span:nth-child(2) {
    opacity: 0;
}

/* Transform bottom bar into part of the 'X' */
.hamburger.active span:nth-child(3) {
    transform-origin: center;
    transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 768px) {
    body { font-size: 15px; }
    .main-header .container .btn { display: none; }
    .about-image-container { grid-template-columns: 1fr; }
    .about-image-container img:nth-child(1), .about-image-container img:nth-child(2) { margin-top: 1rem; width: 100%; height: 400px; object-fit: cover; }
    .stats-grid { grid-template-columns: 1fr; }
}   

/* --- LEGAL PAGE STYLES --- */
.legal-hero {
    background-color: var(--color-dark);
    padding: 160px 0 60px 0;
    color: var(--color-white);
}
.legal-page-title {
    font-size: 3rem;
    color: var(--color-white);
    margin-bottom: 0.5rem;
}
.legal-page-subtitle {
    font-size: 1.2rem;
    color: var(--color-accent);
}

.legal-content {
    padding: 80px 0;
}
.legal-content-container {
    max-width: 800px;
}
.last-updated {
    font-style: italic;
    color: #666;
    margin-bottom: 2rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 2rem;
}
.legal-content article {
    margin-bottom: 3rem;
}
.legal-content h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--color-accent);
    padding-left: 1rem;
}
.legal-content ul {
    list-style-type: disc;
    padding-left: 20px;
}
.legal-content ul li {
    margin-bottom: 0.75rem;
}

/* --- UTILITY & THANK YOU PAGE STYLES --- */

.utility-page-body {
    background-color: var(--color-dark);
    /* High-tech grid background for consistency */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    color: var(--color-white);
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 2rem;
}

.thank-you-box {
    background-color: #4A514B; /* Lighter dark shade */
    padding: 3rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    text-align: center;
    max-width: 550px;
    width: 100%;
}

.thank-you-box h1 {
    color: var(--color-white);
    font-size: 2rem;
    margin-bottom: 1rem;
}

.thank-you-box p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
}

.thank-you-box .security-notice {
    font-size: 0.9rem;
    color: var(--color-accent);
    background: rgba(157, 181, 178, 0.1);
    padding: 0.75rem;
    border-radius: 4px;
    margin-top: 1.5rem;
}

.thank-you-box .btn-secondary {
    margin-top: 2rem;
}

/* Animated Checkmark SVG */
.checkmark-container {
    width: 100px;
    height: 100px;
    margin: 0 auto 2rem auto;
}

.checkmark-svg {
    width: 100%;
    height: 100%;
}

.checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: var(--color-accent);
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 3;
    stroke: var(--color-accent);
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}