/* style.css */

/*------------------------------------------------------------------
[Table of Contents]

1.  Global Styles & CSS Variables
2.  Typography
3.  Layout & Container
4.  Header & Navigation
    4.1 Mobile Navigation
5.  Footer
6.  Buttons & Interactive Elements
7.  Card Base Styles
8.  Hero Section
9.  About Us Section
10. Services Section
11. Methodology Section
12. Case Studies Section (Carousel)
13. Team Section (Experts)
14. Insights Section
15. Resources Section
16. External Resources Section
17. Careers Section
18. Contact Section
19. Utility Classes
20. Specific Page Styles (Success, Privacy, Terms)
21. Animations & Transitions (Base for JS hooks)
22. Responsive Design
-------------------------------------------------------------------*/

/* 1. Global Styles & CSS Variables */
:root {
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Nunito', sans-serif;

    /* Neomorphism Base & Shadows */
    --nm-bg: #e0e5ec; /* Light grey base for neomorphism */
    --nm-shadow-light: rgba(255, 255, 255, 0.7);
    --nm-shadow-dark: rgba(163, 177, 198, 0.6);
    --nm-shadow-pressed-light: rgba(163, 177, 198, 0.6);
    --nm-shadow-pressed-dark: rgba(255, 255, 255, 0.7);
    --nm-shadow-distance: 6px;
    --nm-shadow-blur: 12px;

    /* Gradient Colors */
    --gradient-primary-start: #6a11cb; /* Deep Purple */
    --gradient-primary-end: #2575fc;   /* Bright Blue */
    --gradient-accent-start: #1abc9c;  /* Teal */
    --gradient-accent-end: #16a085;    /* Darker Teal */

    /* Text Colors */
    --text-dark: #333740;
    --text-light: #ffffff;
    --text-headings: #2c3e50; /* Slightly darker for headings on light bg */
    --text-muted: #7f8c8d;
    --link-color: var(--gradient-primary-end);
    --link-hover-color: var(--gradient-primary-start);

    /* Backgrounds */
    --background-main: #f4f7f6; /* Very light, almost white */
    --background-section-alt: #ffffff;

    /* Borders & UI Elements */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-color: #dce1e6;

    /* Transitions */
    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.3s;
    --transition-speed-slow: 0.5s;
    --transition-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    background-color: var(--background-main);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* 2. Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-headings);
    margin-bottom: 0.75em;
    line-height: 1.3;
    font-weight: 500;
}

h1 { font-size: 2.8rem; margin-bottom: 0.5em;}
h2 { font-size: 2.2rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.4rem; }

p {
    margin-bottom: 1.25em;
    color: var(--text-dark);
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color var(--transition-speed-fast) ease-in-out;
}

a:hover, a:focus {
    color: var(--link-hover-color);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 3. Layout & Container */
.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.main-container {
    padding-top: 0; /* Header is fixed, so content starts below */
}

.content-section {
    padding: 60px 0;
    overflow: hidden; /* For animations */
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    color: var(--text-headings);
    font-weight: 700;
}
.section-title::after {
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, var(--gradient-primary-start), var(--gradient-primary-end));
    margin: 15px auto 0;
    border-radius: 2px;
}

.section-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-top: -30px;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}


/* 4. Header & Navigation */
.site-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 15px 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    transition: background-color var(--transition-speed-normal), box-shadow var(--transition-speed-normal);
}

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

.logo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--gradient-primary-start);
    text-decoration: none;
}
.logo:hover {
    color: var(--gradient-primary-end);
    text-decoration: none;
}

.main-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
}

.main-nav ul li {
    margin-left: 25px;
}

.main-nav ul li a {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text-dark);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--border-radius-sm);
    transition: color var(--transition-speed-fast), background-color var(--transition-speed-fast);
    position: relative;
}

.main-nav ul li a:hover,
.main-nav ul li a:focus,
.main-nav ul li a.active { /* Add .active class with JS for current page/section */
    color: var(--text-light);
    background: linear-gradient(90deg, var(--gradient-primary-start), var(--gradient-primary-end));
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.main-nav ul li a::before {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--gradient-primary-end);
    transition: width var(--transition-speed-normal) var(--transition-cubic);
}
.main-nav ul li a:hover::before,
.main-nav ul li a:focus::before {
    width: calc(100% - 24px); /* Match padding */
}
.main-nav ul li a:hover, .main-nav ul li a.active {
    color: var(--gradient-primary-end); /* Simpler hover if background is too much */
    text-decoration: none;
    background: transparent; /* Override for simpler hover */
}
.main-nav ul li a:hover::before, .main-nav ul li a.active::before {
     width: calc(100% - 24px); /* Match padding */
     background-color: var(--gradient-primary-end);
}
.main-nav ul li a.active {
    color: var(--gradient-primary-start);
    font-weight: 700;
}


/* 4.1 Mobile Navigation */
.nav-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-dark);
    position: relative;
    transition: transform var(--transition-speed-normal), background-color var(--transition-speed-normal);
}

.hamburger::before,
.hamburger::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--text-dark);
    position: absolute;
    left: 0;
    transition: transform var(--transition-speed-normal), top var(--transition-speed-normal), bottom var(--transition-speed-normal);
}

.hamburger::before { top: -8px; }
.hamburger::after { bottom: -8px; }

/* Active state for hamburger */
.nav-open .hamburger { background-color: transparent; }
.nav-open .hamburger::before { transform: rotate(45deg); top: 0; }
.nav-open .hamburger::after { transform: rotate(-45deg); bottom: 0; }


/* 5. Footer */
.site-footer {
    background: linear-gradient(135deg, var(--text-headings), #1e2833);
    color: var(--text-light);
    padding: 50px 0 20px;
    margin-top: 60px; /* Ensure space from last section */
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.site-footer h4 {
    font-family: var(--font-heading);
    color: var(--text-light);
    margin-bottom: 20px;
    font-size: 1.3rem;
    border-bottom: 2px solid var(--gradient-accent-start);
    padding-bottom: 8px;
    display: inline-block;
}

.site-footer ul {
    list-style: none;
}

.site-footer ul li {
    margin-bottom: 10px;
}

.site-footer ul li a {
    color: #bdc3c7; /* Lighter grey for footer links */
    text-decoration: none;
    transition: color var(--transition-speed-fast), padding-left var(--transition-speed-fast);
}

.site-footer ul li a:hover {
    color: var(--text-light);
    padding-left: 5px;
    text-decoration: underline;
    text-decoration-color: var(--gradient-accent-start);
}

.footer-contact p, .footer-contact a {
    color: #bdc3c7;
    margin-bottom: 8px;
}
.footer-contact a:hover {
    color: var(--text-light);
}

.copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9rem;
    color: #95a5a6; /* Even lighter grey for copyright */
}
.copyright p { margin-bottom: 0;}


/* 6. Buttons & Interactive Elements (Global) */
.cta-button, button, input[type="submit"], input[type="button"], .download-button, .submit-button, .read-more-link {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 28px;
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all var(--transition-speed-normal) var(--transition-cubic);
    background: linear-gradient(135deg, var(--gradient-primary-start), var(--gradient-primary-end));
    color: var(--text-light);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1),
                inset 0 1px 2px rgba(255,255,255,0.3),
                inset 0 -1px 2px rgba(0,0,0,0.2);
    text-decoration: none;
    font-size: 1rem;
    line-height: 1; /* Fix for button height inconsistencies */
    text-align: center;
}

.cta-button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, .download-button:hover, .submit-button:hover, .read-more-link:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15),
                inset 0 1px 2px rgba(255,255,255,0.4),
                inset 0 -1px 2px rgba(0,0,0,0.3);
    color: var(--text-light);
    text-decoration: none;
}
.cta-button:active, button:active, input[type="submit"]:active, input[type="button"]:active, .download-button:active, .submit-button:active, .read-more-link:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1),
                inset 0 1px 3px rgba(0,0,0,0.3),
                inset 0 -1px 2px rgba(255,255,255,0.2);
}

/* Specific styling for .read-more-link if it needs to be less button-like */
.read-more-link {
    background: transparent;
    color: var(--gradient-primary-end);
    padding: 8px 0; /* Remove horizontal padding if it's more like a link */
    text-transform: none; /* If not uppercase */
    font-family: var(--font-body);
    font-weight: 700;
    box-shadow: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}
.read-more-link:hover {
    color: var(--gradient-primary-start);
    border-bottom-color: var(--gradient-primary-start);
    transform: none;
    box-shadow: none;
}
.read-more-link::after {
    content: " \2192"; /* Right arrow */
    transition: transform var(--transition-speed-fast);
    display: inline-block;
}
.read-more-link:hover::after {
    transform: translateX(4px);
}


/* 7. Card Base Styles */
.card {
    background-color: var(--nm-bg);
    border-radius: var(--border-radius-lg);
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: var(--nm-shadow-distance) var(--nm-shadow-distance) var(--nm-shadow-blur) var(--nm-shadow-dark),
                calc(-1 * var(--nm-shadow-distance)) calc(-1 * var(--nm-shadow-distance)) var(--nm-shadow-blur) var(--nm-shadow-light);
    transition: all var(--transition-speed-normal) var(--transition-cubic);
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text content */
    overflow: hidden; /* Ensure content stays within rounded corners */
}

.card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: calc(var(--nm-shadow-distance) * 1.5) calc(var(--nm-shadow-distance) * 1.5) calc(var(--nm-shadow-blur) * 1.5) var(--nm-shadow-dark),
                calc(-1.5 * var(--nm-shadow-distance)) calc(-1.5 * var(--nm-shadow-distance)) calc(var(--nm-shadow-blur) * 1.5) var(--nm-shadow-light);
}

.card-image {
    width: 100%; /* Take full width of card padding */
    height: 200px; /* Fixed height for image container */
    margin-bottom: 20px;
    border-radius: var(--border-radius-md); /* Rounded corners for image container */
    overflow: hidden; /* Clip image to container bounds */
    display: flex; /* For centering image if it's smaller */
    justify-content: center;
    align-items: center;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container, cropping if necessary */
    border-radius: var(--border-radius-md); /* Redundant if container has overflow:hidden but good practice */
}

.card-content {
    width: 100%;
    flex-grow: 1; /* Allows content to fill space if cards are in a flex row and need equal height */
}

.card-content h3 {
    font-size: 1.4rem;
    color: var(--text-headings);
    margin-bottom: 10px;
}
.card-content p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* 8. Hero Section */
.hero-section {
    min-height: 80vh; /* Allow dynamic height but ensure it's substantial */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-light); /* White text */
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 120px 0 60px; /* Padding top includes header height allowance */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)); /* Darkening overlay */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.hero-content h1 {
    font-size: 3.5rem; /* Larger for hero */
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 20px;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}

.hero-content p {
    font-size: 1.3rem;
    color: var(--text-light);
    margin-bottom: 30px;
    font-weight: 400;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

/* 9. About Us Section */
.about-us-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
}
.about-image-container img {
    border-radius: var(--border-radius-lg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.stats-widgets-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
    margin-top: 50px;
}
.stat-widget {
    background-color: var(--nm-bg);
    padding: 25px;
    border-radius: var(--border-radius-md);
    text-align: center;
    box-shadow: var(--nm-shadow-distance) var(--nm-shadow-distance) var(--nm-shadow-blur) var(--nm-shadow-dark),
                calc(-1 * var(--nm-shadow-distance)) calc(-1 * var(--nm-shadow-distance)) var(--nm-shadow-blur) var(--nm-shadow-light);
}
.stat-number {
    display: block;
    font-size: 2.5rem;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--gradient-primary-start);
    margin-bottom: 5px;
}
.stat-label {
    font-size: 1rem;
    color: var(--text-muted);
}

/* 10. Services Section */
.services-section { background-color: var(--background-section-alt); }
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.service-card { /* Extends .card */
    background-color: #fff; /* Override neomorphism for cleaner service cards if desired */
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
}
.service-card:hover {
    box-shadow: 0 10px 35px rgba(0,0,0,0.12);
}

/* 11. Methodology Section */
.methodology-steps {
    display: grid;
    gap: 30px;
    margin-top: 30px;
}
.step {
    background-color: var(--nm-bg);
    padding: 30px;
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: flex-start;
    gap: 25px;
    box-shadow: var(--nm-shadow-distance) var(--nm-shadow-distance) var(--nm-shadow-blur) var(--nm-shadow-dark),
                calc(-1 * var(--nm-shadow-distance)) calc(-1 * var(--nm-shadow-distance)) var(--nm-shadow-blur) var(--nm-shadow-light);
}
.step-number {
    font-size: 3rem;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--gradient-primary-end);
    line-height: 1;
    min-width: 60px; /* Ensure space for number */
    text-align: center;
}
.step-content h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--text-headings);
}

/* 12. Case Studies Section (Carousel) */
.case-studies-section { background-color: var(--background-section-alt); }
.carousel-container {
    position: relative;
    max-width: 100%; /* Ensure it fits */
}
.case-study-carousel {
    display: flex;
    overflow-x: auto; /* Or use JS for true carousel */
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding-bottom: 20px; /* For scrollbar or shadow */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.case-study-carousel::-webkit-scrollbar { display: none; } /* Chrome, Safari, Opera */

.case-study-card {
    min-width: 320px; /* Adjust as needed */
    scroll-snap-align: start;
    flex: 0 0 auto; /* Prevent shrinking/growing */
    background-color: #fff;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
}
.case-study-card p strong {
    color: var(--text-headings);
}
.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255,255,255,0.7);
    color: var(--text-dark);
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: background-color var(--transition-speed-fast), color var(--transition-speed-fast);
}
.carousel-control:hover {
    background-color: var(--gradient-primary-start);
    color: var(--text-light);
}
.carousel-control.prev { left: -15px; }
.carousel-control.next { right: -15px; }

/* 13. Team Section (Experts) */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}
.team-member-card .card-image {
    width: 150px; /* Smaller, circular images for team */
    height: 150px;
    border-radius: 50%;
    margin-left: auto; /* Center the image container itself if card has align-items: center */
    margin-right: auto;
    box-shadow: 0 0 0 5px var(--nm-bg),
                0 0 0 8px var(--gradient-primary-end); /* Ring effect */
}
.team-member-card .card-image img { border-radius: 50%; }
.team-member-title {
    font-weight: 600;
    color: var(--gradient-primary-end);
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 1rem;
}

/* 14. Insights Section */
.insights-section { background-color: var(--background-section-alt); }
.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.insight-card { /* Extends .card */
    background-color: #fff;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
}
.insight-card .card-content { text-align: left; } /* Override card's text-align center */
.insight-card .read-more-link { margin-top: 15px; }


/* 15. Resources Section */
.resources-list { display: grid; gap: 25px; }
.resource-item {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: var(--nm-bg);
    padding: 20px;
    border-radius: var(--border-radius-md);
    box-shadow: var(--nm-shadow-distance) var(--nm-shadow-distance) var(--nm-shadow-blur) var(--nm-shadow-dark),
                calc(-1 * var(--nm-shadow-distance)) calc(-1 * var(--nm-shadow-distance)) var(--nm-shadow-blur) var(--nm-shadow-light);
}
.resource-icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}
.resource-info h3 { font-size: 1.2rem; margin-bottom: 5px; }
.resource-info p { margin-bottom: 10px; font-size: 0.9rem; }
.resource-info .download-button { padding: 10px 20px; font-size: 0.9rem; }


/* 16. External Resources Section */
.external-links-section { background-color: var(--background-section-alt); }
.external-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
}
.external-link-card { /* Extends .card, but often simpler */
    background-color: #fff;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    padding: 20px;
    text-align: left; /* Override card default */
}
.external-link-card h3 a {
    color: var(--text-headings);
    font-family: var(--font-heading);
    font-size: 1.2rem;
}
.external-link-card h3 a:hover { color: var(--gradient-primary-start); }
.external-link-card p { font-size: 0.9rem; margin-top: 8px; color: var(--text-muted); }

/* 17. Careers Section */
.careers-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.careers-image-container img {
    border-radius: var(--border-radius-lg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.careers-text .cta-button { margin-top: 20px; }

/* 18. Contact Section */
.contact-section { background-color: var(--nm-bg); }
.contact-form-container {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Form takes more space */
    gap: 40px;
    background-color: #fff;
    padding: 40px;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
.contact-form .form-group {
    margin-bottom: 20px;
    position: relative;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-dark);
    background-color: #f8f9fa; /* Slightly off-white for inputs */
    transition: border-color var(--transition-speed-fast), box-shadow var(--transition-speed-fast);
    box-shadow: inset 2px 2px 5px var(--nm-shadow-dark), inset -2px -2px 5px var(--nm-shadow-light); /* Inset for neomorphism */
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--gradient-primary-start);
    background-color: #fff;
    box-shadow: 0 0 0 2px var(--gradient-primary-end),
                inset 2px 2px 5px var(--nm-shadow-dark), inset -2px -2px 5px var(--nm-shadow-light); /* Subtle focus ring */
}
.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}
/* Floating label styles (optional, requires JS or :placeholder-shown) */
.contact-form label {
    position: absolute;
    top: 15px;
    left: 15px;
    color: var(--text-muted);
    font-size: 1rem;
    pointer-events: none;
    transition: all var(--transition-speed-fast) ease;
}
.contact-form input:focus ~ label,
.contact-form input:not(:placeholder-shown) ~ label,
.contact-form textarea:focus ~ label,
.contact-form textarea:not(:placeholder-shown) ~ label {
    top: -10px;
    left: 10px;
    font-size: 0.8rem;
    color: var(--gradient-primary-start);
    background-color: #fff; /* Match form container bg */
    padding: 0 5px;
}
.contact-form .submit-button { width: 100%; }

.contact-details h3 { color: var(--text-headings); margin-top: 0; }
.contact-details p { margin-bottom: 10px; color: var(--text-muted); }
.contact-details a { color: var(--gradient-primary-end); }
.contact-details a:hover { color: var(--gradient-primary-start); }
.map-placeholder img {
    border-radius: var(--border-radius-md);
    margin-top: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    width: 100%; /* Make map responsive */
    height: 250px;
    object-fit: cover;
}


/* 19. Utility Classes */
.text-center { text-align: center; }
.text-light { color: var(--text-light); }
.text-dark { color: var(--text-dark); }
.mb-0 { margin-bottom: 0 !important; }

/* 20. Specific Page Styles (Success, Privacy, Terms) */
.success-page-container,
.error-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, var(--gradient-primary-start), var(--gradient-primary-end));
    color: var(--text-light);
}
.success-page-container h1, .error-page-container h1 {
    color: var(--text-light);
    font-size: 3rem;
    margin-bottom: 20px;
}
.success-page-container p, .error-page-container p {
    color: var(--text-light);
    font-size: 1.2rem;
    margin-bottom: 30px;
}
.success-page-container .cta-button, .error-page-container .cta-button {
    background: var(--text-light);
    color: var(--gradient-primary-start);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.success-page-container .cta-button:hover, .error-page-container .cta-button:hover {
    background: #f1f1f1;
    color: var(--gradient-primary-end);
}

.page-content-wrapper { /* For privacy.html, terms.html content */
    padding-top: 120px; /* Ensure space below fixed header */
    padding-bottom: 60px;
}
.page-content-wrapper .container h1 { /* Main title on static pages */
    margin-bottom: 30px;
    text-align: center;
}
.page-content-wrapper .container h2 {
    margin-top: 40px;
    margin-bottom: 15px;
}


/* 21. Animations & Transitions (Base for JS hooks) */
/* Animate.css is used via JS. These are for basic hovers. */
.animate-on-scroll {
    opacity: 0; /* Hidden initially, JS will make it visible */
    transition: opacity var(--transition-speed-slow); /* Fallback if JS animation fails */
}
.animate-on-scroll.is-visible {
    opacity: 1;
}

/* Parallax placeholder - typically needs JS or more complex CSS */
[data-parallax] {
    background-attachment: fixed; /* Simple parallax effect */
}

/* 22. Responsive Design */
@media (max-width: 992px) {
    h1 { font-size: 2.4rem; }
    .hero-content h1 { font-size: 2.8rem; }
    h2 { font-size: 1.9rem; }

    .about-us-content, .careers-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .about-image-container, .careers-image-container {
        margin: 0 auto 30px auto; /* Center image */
    }
    .contact-form-container {
        grid-template-columns: 1fr;
    }
    .contact-details { order: -1; margin-bottom: 30px; text-align: center;}
    .map-placeholder img { margin-left: auto; margin-right: auto;}
}

@media (max-width: 768px) {
    .site-header { padding: 10px 0; }
    .main-nav {
        position: fixed;
        top: 0; /* Adjust based on actual header height when open */
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(5px);
        transform: translateX(-100%);
        transition: transform var(--transition-speed-normal) var(--transition-cubic);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 70px; /* Space for header */
        z-index: 999; /* Below header, above toggle */
    }
    .main-nav.nav-open {
        transform: translateX(0);
    }
    .main-nav ul {
        flex-direction: column;
        width: 100%;
    }
    .main-nav ul li {
        margin: 0;
        width: 100%;
        text-align: center;
    }
    .main-nav ul li a {
        display: block;
        padding: 20px;
        font-size: 1.3rem;
        border-bottom: 1px solid var(--border-color);
    }
    .main-nav ul li a:hover, .main-nav ul li a.active {
        background: linear-gradient(90deg, var(--gradient-primary-start), var(--gradient-primary-end));
        color: var(--text-light);
    }
    .main-nav ul li a::before { display: none; } /* Remove underline hover for mobile */

    .nav-toggle {
        display: block;
        z-index: 1001; /* Above mobile nav panel */
    }

    .hero-section { min-height: 70vh; padding: 100px 0 40px; }
    .hero-content h1 { font-size: 2.2rem; }
    .hero-content p { font-size: 1.1rem; }

    .stats-widgets-container { grid-template-columns: 1fr 1fr; }
    .case-study-card { min-width: 280px; }
    .carousel-control.prev { left: 5px; }
    .carousel-control.next { right: 5px; }

    .page-content-wrapper { padding-top: 90px; }
}

@media (max-width: 576px) {
    .container { width: 95%; }
    h1 { font-size: 2rem; }
    .hero-content h1 { font-size: 1.8rem; }
    h2 { font-size: 1.6rem; }
    p { font-size: 0.95rem; }

    .stats-widgets-container { grid-template-columns: 1fr; }
    .services-grid, .team-grid, .insights-grid, .external-links-grid {
        grid-template-columns: 1fr;
    }
    .footer-content { grid-template-columns: 1fr; text-align: center; }
    .site-footer h4 { display: block; }
    .contact-form-container { padding: 25px; }
}
*{
    opacity: 1 !important;
}