/* style.css */

/*------------------------------------------------------------------
[TABLE OF CONTENTS]

1.  CSS Variables
2.  Base & Typography
3.  Global Button Styles
4.  Layout & Container
5.  Header & Navigation
6.  Hero Section
7.  General Section Styling
8.  Card System (Neumorphic)
    8.1. General Card Styles
    8.2. Service Card
    8.3. Project Card
    8.4. Press Card
    8.5. Testimonial Card
    8.6. Team Member Card
    8.7. Link Card (External Resources)
9.  Specific Section Styling
    9.1. About Us
    9.2. History (Accordion)
    9.3. Statistics & Progress Indicators
    9.4. Clientele
    9.5. Accolades
    9.6. Contact Form & Details
10. Footer
11. Page-Specific Styles
    11.1. Legal Pages (Privacy, Terms)
    11.2. Success Page
12. Utility Classes
13. Animations & Transitions
14. Responsive Design
-------------------------------------------------------------------*/

/* 1. CSS Variables
-------------------------------------------------------------------*/
:root {
    --font-heading: 'Archivo Black', sans-serif;
    --font-body: 'Roboto', sans-serif;

    /* Neutral Color Scheme with a Vibrant Accent */
    --color-background-main: #E0E5EC; /* Light, slightly cool grey - Neumorphic base */
    --color-background-card: #E0E5EC;
    --color-background-overlay: rgba(0, 0, 0, 0.5); /* For text on images */
    --color-background-footer: #2A3B47; /* Darker, cool grey for footer */
    
    --color-text-primary: #333A40;   /* Dark grey for body text, high contrast on light bg */
    --color-text-secondary: #5F6B7A; /* Lighter grey for less important text */
    --color-text-light: #FFFFFF;     /* For text on dark backgrounds */
    --color-text-headings: #1C252C;  /* Very dark, almost black for strong headings */

    --color-accent-primary: #FF6B6B; /* Vibrant Coral/Red for CTAs and highlights */
    --color-accent-primary-dark: #E05252;
    --color-accent-secondary: #4ECDC4; /* Contrasting Teal for secondary accents (optional) */
    --color-accent-secondary-dark: #3AA89F;

    /* Neumorphic Shadows - Light Theme Base */
    --neumorphic-shadow-outer-strong: 6px 6px 14px #b8bec4, -6px -6px 14px #ffffff;
    --neumorphic-shadow-outer-soft: 4px 4px 10px #c5cbd2, -4px -4px 10px #ffffff;
    --neumorphic-shadow-inner-strong: inset 6px 6px 14px #b8bec4, inset -6px -6px 14px #ffffff;
    --neumorphic-shadow-inner-soft: inset 4px 4px 10px #c5cbd2, inset -4px -4px 10px #ffffff;
    
    /* Gradients (Subtle for backgrounds or elements) */
    --gradient-light: linear-gradient(145deg, #F0F4F8, #CAD2DA);
    --gradient-accent: linear-gradient(145deg, var(--color-accent-primary), var(--color-accent-primary-dark));

    /* Transitions */
    --transition-fast: 0.2s ease-in-out;
    --transition-smooth: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* "Hand-drawn" feel - smooth, responsive */
    --transition-elastic: 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* For more playful effects */

    /* Spacing */
    --space-xs: 0.5rem;  /* 8px */
    --space-s: 1rem;    /* 16px */
    --space-m: 1.5rem;  /* 24px */
    --space-l: 2.5rem;  /* 40px */
    --space-xl: 4rem;   /* 64px */

    /* Border Radius */
    --radius-small: 8px;
    --radius-medium: 15px;
    --radius-large: 25px;
    --radius-circle: 50%;
}

/* 2. Base & Typography
-------------------------------------------------------------------*/
body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-primary);
    background-color: var(--color-background-main);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-headings);
    margin-top: 0;
    margin-bottom: var(--space-m);
    line-height: 1.3;
    font-weight: 400; /* Archivo Black is already bold */
}

h1 { font-size: 3em; } /* Approx 48px */
h2 { font-size: 2.5em; } /* Approx 40px */
h3 { font-size: 1.75em; } /* Approx 28px */
h4 { font-size: 1.25em; } /* Approx 20px */

p {
    margin-top: 0;
    margin-bottom: var(--space-s);
}

a {
    color: var(--color-accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--color-accent-primary-dark);
    text-decoration: underline;
}

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

/* Specific styles for "Read More" links */
.read-more-link {
    display: inline-block;
    font-weight: 700;
    color: var(--color-accent-secondary);
    text-decoration: none;
    padding-bottom: 2px;
    position: relative;
    transition: color var(--transition-fast);
}
.read-more-link::after {
    content: '→';
    margin-left: var(--space-xs);
    transition: transform var(--transition-fast);
    display: inline-block;
}
.read-more-link:hover {
    color: var(--color-accent-secondary-dark);
    text-decoration: none;
}
.read-more-link:hover::after {
    transform: translateX(4px);
}

/* 3. Global Button Styles
-------------------------------------------------------------------*/
.cta-button,
.submit-button,
button, 
input[type="submit"] { /* Base for all buttons */
    display: inline-block;
    font-family: var(--font-body); /* Roboto for buttons is fine, or specify if different */
    font-size: 1rem;
    font-weight: 700;
    padding: var(--space-s) var(--space-l);
    border-radius: var(--radius-large); /* Rounded for neumorphism */
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: all var(--transition-smooth);
    background-color: var(--color-background-card); /* Base for neumorphic button */
    color: var(--color-accent-primary); /* Text color matching accent */
    box-shadow: var(--neumorphic-shadow-outer-soft);
}

.cta-button:hover,
.submit-button:hover,
button:hover,
input[type="submit"]:hover {
    box-shadow: var(--neumorphic-shadow-inner-soft); /* Inset shadow on hover/active */
    transform: translateY(1px) translateX(1px); /* Slight press effect */
    color: var(--color-accent-primary-dark);
}

.cta-button:active,
.submit-button:active,
button:active,
input[type="submit"]:active {
    box-shadow: var(--neumorphic-shadow-inner-strong);
    transform: translateY(2px) translateX(2px);
}

/* Primary Call to Action specific style (if different from default button) */
.cta-button.cta-primary {
    background-image: var(--gradient-accent);
    color: var(--color-text-light);
    box-shadow: 3px 3px 8px rgba(0,0,0,0.15), var(--neumorphic-shadow-outer-soft); /* Stronger shadow */
}
.cta-button.cta-primary:hover {
    background-image: linear-gradient(145deg, var(--color-accent-primary-dark), var(--color-accent-primary));
    color: var(--color-text-light);
    box-shadow: var(--neumorphic-shadow-inner-strong);
}


/* 4. Layout & Container
-------------------------------------------------------------------*/
.main-container {
    width: 100%;
    overflow-x: hidden; /* Important for preventing horizontal scroll */
}

.section-container {
    max-width: 1140px; /* Standard container width */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-m);
    padding-right: var(--space-m);
}

/* 5. Header & Navigation
-------------------------------------------------------------------*/
.site-header {
    background-color: rgba(224, 229, 236, 0.8); /* Neumorphic base, slightly transparent */
    backdrop-filter: blur(10px); /* Glassmorphism effect */
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Softer shadow for glassmorphism */
    padding: var(--space-s) 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color var(--transition-smooth), box-shadow var(--transition-smooth);
}
.site-header.scrolled { /* Add via JS on scroll */
    background-color: rgba(200, 208, 218, 0.85);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-m);
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.6em; /* Adjusted size */
    color: var(--color-text-headings);
    text-decoration: none;
    font-weight: 400; /* Archivo Black is bold by default */
}
.logo-accent {
    color: var(--color-accent-primary);
}

.main-navigation .nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.main-navigation .nav-links li {
    margin-left: var(--space-l);
}

.main-navigation .nav-links a {
    text-decoration: none;
    color: var(--color-text-primary);
    font-weight: 700; /* Roboto bold for nav links */
    font-size: 0.95rem;
    padding: var(--space-xs) 0;
    position: relative;
    transition: color var(--transition-fast);
}
.main-navigation .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--color-accent-primary);
    transition: width var(--transition-smooth);
}
.main-navigation .nav-links a:hover,
.main-navigation .nav-links a.active-link { /* Use .active-link for JS to set active page */
    color: var(--color-accent-primary);
}
.main-navigation .nav-links a:hover::after,
.main-navigation .nav-links a.active-link::after {
    width: 100%;
}

.menu-toggle {
    display: none; /* Hidden by default, shown on mobile */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--space-s);
    z-index: 1001; /* Above nav links when they are absolute */
}
.hamburger-icon {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-text-headings);
    position: relative;
    transition: all var(--transition-smooth);
}
.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 3px;
    background-color: var(--color-text-headings);
    left: 0;
    transition: all var(--transition-smooth);
}
.hamburger-icon::before { top: -7px; }
.hamburger-icon::after { bottom: -7px; }

/* Mobile Menu Open State */
.menu-toggle[aria-expanded="true"] .hamburger-icon {
    background-color: transparent;
}
.menu-toggle[aria-expanded="true"] .hamburger-icon::before {
    transform: rotate(45deg);
    top: 0;
}
.menu-toggle[aria-expanded="true"] .hamburger-icon::after {
    transform: rotate(-45deg);
    bottom: 0;
}

/* 6. Hero Section
-------------------------------------------------------------------*/
.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-text-light); /* Enforced white text */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    padding: 140px var(--space-m) 80px; /* Adjust padding for natural height, accommodate fixed header */
    min-height: calc(90vh - 140px); /* Example for near full-height, adjust as needed */
}
.hero-overlay { /* For text readability on background image */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}
.hero-title {
    font-size: clamp(2.5em, 6vw, 4em); /* Responsive font size */
    color: var(--color-text-light); /* Enforced white text via HTML style, backup here */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* From HTML, backup here */
    margin-bottom: var(--space-s);
}
.hero-subtitle {
    font-size: clamp(1em, 2.5vw, 1.3em);
    color: var(--color-text-light); /* Enforced white text via HTML style, backup here */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* From HTML, backup here */
    margin-bottom: var(--space-l);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.hero-section .cta-button { /* Specific CTA style for Hero */
    background-image: var(--gradient-accent);
    color: var(--color-text-light);
    box-shadow: 3px 3px 8px rgba(0,0,0,0.2), var(--neumorphic-shadow-outer-soft);
    padding: calc(var(--space-s) * 1.2) calc(var(--space-l) * 1.2);
    font-size: 1.1em;
}
.hero-section .cta-button:hover {
    background-image: linear-gradient(145deg, var(--color-accent-primary-dark), var(--color-accent-primary));
    box-shadow: var(--neumorphic-shadow-inner-strong);
}


/* 7. General Section Styling
-------------------------------------------------------------------*/
.content-section {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}
.page-title-section { /* For title sections on subpages */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px var(--space-m) var(--space-l); /* Ensure header space + content space */
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.page-title-section .hero-overlay { /* Can reuse hero-overlay if needed */
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55));
}
.page-main-title {
    font-size: clamp(2.2em, 5vw, 3.2em);
    color: var(--color-text-light); /* Style from HTML */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* Style from HTML */
    position: relative;
    z-index: 2;
}

.section-title {
    font-size: clamp(2em, 4.5vw, 2.8em);
    color: var(--color-text-headings);
    text-align: center;
    margin-bottom: var(--space-s); /* Reduced from 40px */
    position: relative;
    padding-bottom: var(--space-s);
}
.section-title::after { /* Decorative underline */
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 3px;
    background-color: var(--color-accent-primary);
    border-radius: 2px;
}
.section-intro {
    font-size: 1.1em;
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 750px;
    margin: 0 auto var(--space-l) auto;
}
.section-alternative-bg {
    background-color: #D1D9E6; /* Slightly different shade for variation */
    /* background-image set inline */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Ensure text on alternative backgrounds with images has contrast */
.section-alternative-bg.has-bg-image .section-title,
.section-alternative-bg.has-bg-image .section-intro {
    color: var(--color-text-light); /* Or a very light grey */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}
.section-alternative-bg.has-bg-image .section-title::after {
    background-color: var(--color-text-light); /* Adjust underline for dark bg */
}


/* 8. Card System (Neumorphic)
-------------------------------------------------------------------*/
/* 8.1. General Card Styles */
.card {
    background-color: var(--color-background-card);
    border-radius: var(--radius-medium);
    box-shadow: var(--neumorphic-shadow-outer-strong);
    padding: var(--space-m);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
    display: flex; /* For STROGO rule */
    flex-direction: column; /* For STROGO rule */
    align-items: center; /* For STROGO rule */
    text-align: center; /* For STROGO rule - center text content */
    overflow: hidden; /* For image corners */
}
.card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 8px 8px 18px #a9afb6, -8px -8px 18px #ffffff; /* Enhanced shadow */
}
.card-image { /* Container for the image itself */
    width: 100%; /* Take full width of card padding */
    height: 200px; /* STROGO: Fixed height for image containers */
    margin-bottom: var(--space-m);
    border-radius: var(--radius-small);
    overflow: hidden;
    background-color: #ccc; /* Placeholder bg */
    display: flex; /* For centering image if it's smaller than container */
    justify-content: center;
    align-items: center;
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* STROGO: Ensure image covers fixed height container */
    transition: transform var(--transition-smooth);
}
.card:hover .card-image img {
    transform: scale(1.08);
}
.card-content {
    width: 100%; /* Ensure content takes width if card is flex */
}
.card-content h3 {
    font-family: var(--font-heading);
    color: var(--color-text-headings);
    font-size: 1.4em; /* Slightly smaller for cards */
    margin-bottom: var(--space-xs);
}
.card-content p {
    font-size: 0.95em;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-s);
}
.card-content p:last-child {
    margin-bottom: 0;
}

/* 8.2. Service Card */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-l);
}
.service-card .card-image {
    height: 180px; /* Custom height for service icons/images */
}

/* 8.3. Project Card */
.projects-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-l);
}
.project-card .card-image {
    height: 220px; /* Custom height */
}

/* 8.4. Press Card */
.press-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-l);
}
.press-card .card-image { height: 180px; }
.press-card .press-source {
    font-size: 0.85em;
    font-style: italic;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xs);
}

/* 8.5. Testimonial Card */
.testimonials-slider { /* Basic grid, JS for actual slider */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-l);
}
.testimonial-card {
    padding: var(--space-l); /* More padding for testimonials */
}
.testimonial-image-container { /* This is the .card-image for testimonials */
    width: 100px;
    height: 100px;
    border-radius: var(--radius-circle);
    box-shadow: var(--neumorphic-shadow-outer-soft);
}
.testimonial-photo { /* This is the img inside .testimonial-image-container */
   border-radius: var(--radius-circle); /* Ensure img is also circular */
}
.testimonial-quote {
    font-size: 1em;
    font-style: italic;
    color: var(--color-text-primary);
    margin-bottom: var(--space-s);
    position: relative;
    padding: 0 var(--space-xs);
}
.testimonial-quote::before { /* Stylized quote marks */
    content: "“";
    font-family: Georgia, serif;
    font-size: 3em;
    color: var(--color-accent-primary);
    opacity: 0.3;
    position: absolute;
    top: -0.5em;
    left: -0.3em;
}
.testimonial-author {
    font-weight: 700;
    color: var(--color-text-headings);
    margin-top: var(--space-s);
    font-size: 0.9em;
}

/* 8.6. Team Member Card (If About Us has a team grid) */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-l);
}
.team-member-card .card-image {
    width: 150px; /* Or a percentage */
    height: 150px;
    border-radius: var(--radius-circle); /* Circular team photos */
}
.team-member-title {
    font-weight: 700;
    color: var(--color-accent-secondary);
    font-size: 1em;
    margin-top: var(--space-xs);
    margin-bottom: var(--space-xs);
}

/* 8.7. Link Card (External Resources) */
.external-links-list .link-card {
    background-color: var(--color-background-card);
    padding: var(--space-m);
    border-radius: var(--radius-medium);
    margin-bottom: var(--space-m);
    box-shadow: var(--neumorphic-shadow-outer-soft);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    text-align: left; /* Override card's text-align: center if needed */
}
.external-links-list .link-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--neumorphic-shadow-outer-strong);
}
.external-links-list .link-card h4 {
    margin-top: 0;
    margin-bottom: var(--space-xs);
    font-size: 1.2em;
}
.external-links-list .link-card h4 a {
    color: var(--color-text-headings);
}
.external-links-list .link-card h4 a:hover {
    color: var(--color-accent-primary);
}
.external-links-list .link-card p {
    font-size: 0.9em;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}


/* 9. Specific Section Styling
-------------------------------------------------------------------*/
/* 9.1. About Us */
.about-us-content {
    display: grid;
    grid-template-columns: 1fr; /* Default to 1 column */
    gap: var(--space-l);
    align-items: center;
}
@media (min-width: 768px) { /* Two columns on larger screens */
    .about-us-content {
        grid-template-columns: repeat(2, 1fr); /* Equal columns */
    }
    .about-us-text {
        grid-column: span 1; /* Example for text to be 1 part */
    }
    .about-us-image.card-image { /* Image part */
        grid-column: span 1;
        height: auto; /* Let it define height based on aspect ratio */
        max-height: 450px; /* Control max height */
    }
     /* If one column should be wider, e.g., text is 2/3 */
    .about-us-content.layout-twothirds {
        grid-template-columns: 2fr 1fr; /* Text | Image */
    }
    .about-us-content.layout-twothirds .about-us-image.card-image {
        max-height: 400px;
    }
}
.about-us-text p {
    font-size: 1.05em;
    margin-bottom: var(--space-m);
}
.about-us-image.card-image { /* Overriding default card-image fixed height for this section */
    height: auto; /* Natural height based on content or constrained by grid/max-width */
    max-width: 550px;
    margin-left:auto; margin-right:auto; /* Center if it's not taking full grid width */
    box-shadow: var(--neumorphic-shadow-outer-strong);
}
.about-us-image.card-image img {
    object-fit: contain; /* Or cover, depending on desired effect */
}


/* 9.2. History (Accordion) */
.accordion {
    max-width: 800px;
    margin: 0 auto;
}
.accordion-item {
    margin-bottom: var(--space-s);
    border-radius: var(--radius-medium);
    background-color: var(--color-background-card);
    box-shadow: var(--neumorphic-shadow-outer-soft);
    overflow: hidden; /* For smooth animation of content */
}
.accordion-header {
    background-color: transparent;
    color: var(--color-text-headings);
    cursor: pointer;
    padding: var(--space-m);
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.15em;
    font-weight: 700; /* Roboto bold */
    transition: background-color var(--transition-fast);
    border-radius: var(--radius-medium); /* For when not expanded */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.accordion-header:hover {
    background-color: #d1d9e6; /* Slightly darker on hover */
}
.accordion-icon {
    font-size: 1.2em; /* For + / - icon */
    transition: transform var(--transition-smooth);
    font-weight: bold; /* Make + - bolder */
    color: var(--color-accent-primary);
}
.accordion-header[aria-expanded="true"] .accordion-icon {
    transform: rotate(45deg); /* If using a + that turns to x */
}
/* Ensure icon content is set via JS or HTML for + / - */
.accordion-header[aria-expanded="true"] .accordion-icon::before { content: "–"; }
.accordion-header[aria-expanded="false"] .accordion-icon::before { content: "+"; }

.accordion-content {
    padding: 0 var(--space-m);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-elastic), padding var(--transition-elastic);
    background-color: #f0f4f8; /* Slightly different bg for content */
}
.accordion-content p {
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
    margin:0;
    font-size: 0.95em;
    border-top: 1px solid #d1d9e6;
}
.accordion-header[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


/* 9.3. Statistics & Progress Indicators */
.parallax-section { /* Used for Statistics section */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    color: var(--color-text-light); /* Ensure text is light on parallax bg */
}
.statistics-overlay { /* Dark overlay for parallax */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-background-overlay);
    z-index: 1;
}
.parallax-section .section-container {
    position: relative;
    z-index: 2;
}
.parallax-section .section-title,
.parallax-section .statistic-item p { /* Ensure text is light */
    color: var(--color-text-light);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.parallax-section .section-title::after {
    background-color: var(--color-text-light);
}

.statistics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-l);
    text-align: center;
}
.statistic-item p {
    font-size: 1.05em;
    font-weight: 700; /* Roboto bold */
    margin-top: var(--space-s);
}
.progress-indicator {
    width: 130px;
    height: 130px;
    border-radius: var(--radius-circle);
    background-color: rgba(255,255,255,0.05); /* Very subtle base for the circle */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Neumorphic shadow for dark background */
    box-shadow: inset 5px 5px 10px #1a2327, inset -5px -5px 10px #324149;
    /* For actual progress circle, SVG with stroke-dasharray animation is best */
}
.progress-indicator .progress-value {
    font-family: var(--font-heading);
    font-size: 2em;
    color: var(--color-accent-primary);
    font-weight: 400; /* Archivo Black is bold */
}

/* 9.4. Clientele */
.client-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-l);
    margin-bottom: var(--space-m);
}
.client-logos img {
    max-height: 55px;
    width: auto;
    filter: grayscale(100%) brightness(1.5); /* Make them light grey */
    opacity: 0.8;
    transition: filter var(--transition-smooth), opacity var(--transition-smooth);
}
.client-logos img:hover {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}
.clientele-statement {
    text-align: center;
    font-style: italic;
    color: var(--color-text-secondary);
    max-width: 650px;
    margin: var(--space-m) auto 0;
}

/* 9.5. Accolades */
.accolades-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-m);
}
.accolades-list li {
    background-color: var(--color-background-card);
    padding: var(--space-m);
    border-radius: var(--radius-medium);
    box-shadow: var(--neumorphic-shadow-outer-soft);
    display: flex;
    align-items: center;
    gap: var(--space-s);
    font-weight: 500; /* Roboto medium */
    font-size: 0.95rem;
    color: var(--color-text-primary);
}
.accolades-list img { /* For accolade icons/badges */
    flex-shrink: 0;
    width: 50px; /* Adjust size as needed */
    height: 50px;
    object-fit: contain;
}

/* 9.6. Contact Form & Details */
.contact-form-container, .contact-page-layout {
    display: grid;
    grid-template-columns: 1fr; /* Default to 1 column */
    gap: var(--space-l);
    background-color: var(--color-background-main); /* Match page background */
    padding: 0; /* No extra padding, section handles it */
    border-radius: 0;
    box-shadow: none; /* No extra shadow, form elements will have their own */
}
@media (min-width: 992px) { /* Two columns layout for contact form and details */
    .contact-form-container, .contact-page-layout {
        /* Example: form 2/3, details 1/3 */
        grid-template-columns: 2fr 1fr;
    }
}

#contactForm, #contactPageForm, .contact-form-wrapper { /* Form part */
    background-color: var(--color-background-card);
    padding: var(--space-l);
    border-radius: var(--radius-medium);
    box-shadow: var(--neumorphic-shadow-outer-strong);
}
.contact-form-wrapper h3 { /* For contact page specific form title */
    text-align: center;
    margin-bottom: var(--space-m);
    font-size: 1.5em;
}

.contact-details, .contact-info-sidebar { /* Details part */
    background-color: #d1d9e6; /* Slightly different, inset feel */
    padding: var(--space-l);
    border-radius: var(--radius-medium);
    box-shadow: var(--neumorphic-shadow-inner-strong); /* Inset appearance */
}
.contact-details h3, .contact-info-sidebar h3, .contact-info-sidebar h4 {
    font-family: var(--font-heading);
    color: var(--color-text-headings);
    margin-top: 0;
    margin-bottom: var(--space-s);
}
.contact-details p, .contact-info-sidebar p {
    margin-bottom: var(--space-s);
    line-height: 1.7;
    color: var(--color-text-primary);
    font-size: 0.95rem;
}
.contact-details a, .contact-info-sidebar a {
    color: var(--color-accent-primary);
    font-weight: 500; /* Roboto medium */
}
.contact-details a:hover, .contact-info-sidebar a:hover {
    color: var(--color-accent-primary-dark);
}

.form-group {
    margin-bottom: var(--space-m);
}
.form-group label {
    display: block;
    font-weight: 700; /* Roboto bold */
    margin-bottom: var(--space-xs);
    color: var(--color-text-headings);
    font-size: 0.9rem;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--space-s);
    border: none; /* Neumorphic inputs don't usually have borders */
    border-radius: var(--radius-small);
    background-color: var(--color-background-card); /* Base color */
    box-shadow: var(--neumorphic-shadow-inner-soft); /* Inset effect */
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text-primary);
    box-sizing: border-box;
    transition: box-shadow var(--transition-fast);
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    box-shadow: var(--neumorphic-shadow-inner-soft), 0 0 0 2px var(--color-accent-primary-dark_transparent, rgba(224, 82, 82, 0.3)); /* Highlight focus */
}
.form-group textarea {
    resize: vertical;
    min-height: 120px;
}
.map-placeholder.card-image img,
.map-placeholder-contact.card-image img { /* Map placeholder images */
    border-radius: var(--radius-small);
    box-shadow: var(--neumorphic-shadow-outer-soft);
}
.map-placeholder.card-image,
.map-placeholder-contact.card-image {
    height: 250px; /* Adjust height as needed */
}

/* 10. Footer
-------------------------------------------------------------------*/
.site-footer {
    background-color: var(--color-background-footer);
    color: #A9B4BE; /* Lighter grey text for footer */
    padding: var(--space-xl) 0 0;
    font-size: 0.9rem;
}
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-m);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-l);
}
.footer-column h4 {
    font-family: var(--font-heading);
    color: var(--color-text-light);
    font-size: 1.25em;
    margin-bottom: var(--space-m);
}
.footer-column p {
    line-height: 1.6;
    margin-bottom: var(--space-s);
}
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-column ul li {
    margin-bottom: var(--space-xs);
}
.footer-column ul a {
    color: #A9B4BE;
    text-decoration: none;
    transition: color var(--transition-fast), padding-left var(--transition-fast);
    display: inline-block; /* For padding effect */
}
.footer-column ul a:hover {
    color: var(--color-accent-primary);
    padding-left: 5px; /* Slight indent on hover */
}

/* Text-based social links in footer */
.social-links-text li { margin-bottom: 8px;}
.social-links-text a {
    font-weight: 500; /* Roboto medium */
    /* Other styles inherited from .footer-column ul a */
}
.social-links-text a::before { /* Optional: pseudo-element for subtle icon-like feel */
    /* content: '› '; /* Example character */
    /* margin-right: 4px; */
    /* color: var(--color-accent-primary); */
}

.footer-bottom {
    text-align: center;
    padding: var(--space-m) 0;
    margin-top: var(--space-l);
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.85em;
}
.footer-bottom p {
    margin: 0;
    color: #82909C; /* Even lighter for copyright */
}

/* 11. Page-Specific Styles
-------------------------------------------------------------------*/
/* 11.1. Legal Pages (Privacy, Terms) */
.legal-content-page main { /* Apply to main tag on privacy.html and terms.html */
    padding-top: 100px; /* VITAL: Avoid header overlap */
}
.legal-content { /* Class for the content div within these pages */
    background-color: var(--color-background-card);
    padding: var(--space-l);
    border-radius: var(--radius-medium);
    box-shadow: var(--neumorphic-shadow-outer-strong);
    margin-top: var(--space-l); /* Space after page title section */
    margin-bottom: var(--space-l);
}
.legal-content h2 { font-size: 1.8em; margin-top: var(--space-l); margin-bottom: var(--space-s); }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 { font-size: 1.4em; margin-top: var(--space-m); margin-bottom: var(--space-xs); }
.legal-content p, .legal-content li {
    margin-bottom: var(--space-s);
    line-height: 1.8;
    color: var(--color-text-secondary);
}
.legal-content ul, .legal-content ol {
    padding-left: var(--space-m);
    margin-bottom: var(--space-m);
}
.legal-content strong {
    color: var(--color-text-primary);
}

/* 11.2. Success Page */
.success-page-container { /* Add this class to body or main-container of success.html */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.success-page { /* Section on success.html */
    flex-grow: 1; /* Make section take available space */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-l) var(--space-m); /* Padding for content */
}
.success-page img[alt="Icono de Éxito"] { /* Style the success icon */
    width: 100px;
    height: 100px;
    margin-bottom: var(--space-m);
    /* Neumorphic effect for the icon if desired */
    /* background: var(--color-background-card); */
    /* padding: 10px; */
    /* border-radius: 50%; */
    /* box-shadow: var(--neumorphic-shadow-outer-soft); */
}
.success-page .section-title { font-size: 2.2em; }
.success-page .section-intro { font-size: 1.15em; max-width: 600px; margin-bottom: var(--space-m); }
.success-page .cta-button { margin-top: var(--space-m); }

/* 12. Utility Classes
-------------------------------------------------------------------*/
.text-center { text-align: center; }
.text-light { color: var(--color-text-light) !important; }
.text-primary { color: var(--color-text-primary) !important; }
.text-accent { color: var(--color-accent-primary) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-xs { margin-bottom: var(--space-xs) !important; }
.mb-s { margin-bottom: var(--space-s) !important; }
.mb-m { margin-bottom: var(--space-m) !important; }
.mb-l { margin-bottom: var(--space-l) !important; }
.mb-xl { margin-bottom: var(--space-xl) !important; }

/* 13. Animations & Transitions (GSAP will handle scroll-triggered, CSS for hovers etc)
-------------------------------------------------------------------*/
/* Placeholder for GSAP target classes - actual animation in JS */
.gsap-fade-in { opacity: 0; }
.gsap-slide-up { opacity: 0; transform: translateY(40px); }

/* Ensure all interactive elements have smooth transitions already defined */
/* e.g. links, buttons, cards already have transition properties */


/* 14. Responsive Design
-------------------------------------------------------------------*/
@media (max-width: 992px) {
    h1 { font-size: 2.6em; }
    h2 { font-size: 2.2em; }
    .section-title { font-size: clamp(1.8em, 4vw, 2.4em); }
    .page-main-title { font-size: clamp(2em, 4.5vw, 2.8em); }

    .main-navigation .nav-links li { margin-left: var(--space-m); }
    
    .contact-form-container, .contact-page-layout {
        grid-template-columns: 1fr; /* Stack on smaller screens */
    }
}

@media (max-width: 768px) {
    .site-header { padding: var(--space-s) 0; }
    .header-container { padding: 0 var(--space-s); }

    .main-navigation .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%; /* Position below header */
        left: 0;
        width: 100%;
        background-color: rgba(236, 239, 241, 0.98); /* Solid background for mobile menu */
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        padding: var(--space-s) 0;
        border-top: 1px solid #d1d9e6;
    }
    .main-navigation .nav-links.active { /* Class added by JS to show menu */
        display: flex;
    }
    .main-navigation .nav-links li {
        margin: 0;
        width: 100%;
        text-align: center;
    }
    .main-navigation .nav-links a {
        padding: var(--space-m);
        display: block;
        width: 100%;
        border-bottom: 1px solid #d1d9e6;
        font-size: 1rem;
    }
    .main-navigation .nav-links li:last-child a { border-bottom: none; }
    .main-navigation .nav-links a::after { display: none; } /* No underline effect in mobile menu */
    
    .menu-toggle { display: block; } /* Show hamburger icon */

    .hero-section { padding: 120px var(--space-s) 60px; }
    .hero-title { font-size: clamp(2em, 7vw, 2.8em); }
    .hero-subtitle { font-size: clamp(0.9em, 3vw, 1.1em); }
    
    .section-container { padding-left: var(--space-s); padding-right: var(--space-s); }
    .content-section { padding-top: var(--space-l); padding-bottom: var(--space-l); }
    
    .services-grid, .projects-gallery, .press-grid, .testimonials-slider, .team-grid, .accolades-list, .statistics-grid, .values-grid {
        grid-template-columns: 1fr; /* Single column for most grids on mobile */
    }
    .about-us-content { grid-template-columns: 1fr; }
    .client-logos img { max-height: 45px; }

    /* For legal pages on mobile, ensure header padding still works */
    .legal-content-page main { padding-top: 80px; } 
}

@media (max-width: 480px) {
    body { font-size: 15px; }
    .logo { font-size: 1.4em; }
    h1 { font-size: 2em; }
    h2 { font-size: 1.8em; }
    .section-title { font-size: clamp(1.6em, 5vw, 2em); }
    .page-main-title { font-size: clamp(1.8em, 5.5vw, 2.2em); }
    
    .cta-button, .submit-button, button, input[type="submit"] {
        padding: var(--space-s) var(--space-m);
        font-size: 0.95rem;
    }
    .hero-section .cta-button {
        padding: calc(var(--space-s) * 1.1) calc(var(--space-m) * 1.1);
        font-size: 1em;
    }

    .footer-container { text-align: left; } /* Align footer columns left on small mobile */
    .footer-column h4 { margin-bottom: var(--space-s); }
}