/* ROOT VARIABLES & BASIC SETUP
-------------------------------------------------- */
:root {
    /* Fonts */
    --font-primary: 'Inter', sans-serif;
    --font-secondary: 'IBM Plex Sans', sans-serif;

    /* Triadic Color Scheme (Example: Blue, Coral, Purple/Violet) */
    --color-primary: #34568B;         /* Rich Blue */
    --color-primary-rgb: 52, 86, 139;
    --color-secondary: #FF6F61;       /* Coral */
    --color-secondary-rgb: 255, 111, 97;
    --color-accent: #6B5B95;          /* Muted Purple */
    --color-accent-rgb: 107, 91, 149;

    /* Neumorphism Base & Text */
    --color-background: #e9eef2;      /* Light, slightly cool off-white */
    --color-background-darker: #d1d9e6; /* For darker shadow component */
    --color-background-lighter: #ffffff;   /* For lighter shadow component */
    --color-background-medium: #e0e5ec; /* Slightly darker bg for some elements */
    --color-background-light: #f8f9fa;  /* Very light bg, almost white */

    --color-text-dark: #2c3e50;        /* Dark Blue-Gray for high contrast on light bg */
    --color-text-dark-rgb: 44, 62, 80;
    --color-text-medium: #566573;      /* Medium Gray */
    --color-text-light: #FFFFFF;

    /* Neumorphism Shadows */
    --shadow-distance: 6px;
    --shadow-blur: 12px;
    --shadow-light-outer: var(--shadow-distance) var(--shadow-distance) var(--shadow-blur) var(--color-background-darker),
                         calc(-1 * var(--shadow-distance)) calc(-1 * var(--shadow-distance)) var(--shadow-blur) var(--color-background-lighter);
    --shadow-inset: inset var(--shadow-distance) var(--shadow-distance) var(--shadow-blur) var(--color-background-darker),
                    inset calc(-1 * var(--shadow-distance)) calc(-1 * var(--shadow-distance)) var(--shadow-blur) var(--color-background-lighter);
    
    /* Neo-Brutalism Accents */
    --brutalist-border-color: var(--color-text-dark);
    --brutalist-border-width: 2px;
    --brutalist-shadow-offset: 3px;
    --brutalist-shadow: var(--brutalist-shadow-offset) var(--brutalist-shadow-offset) 0px var(--color-text-dark);

    /* UI Component Colors */
    --color-button-primary-bg: var(--color-primary);
    --color-button-primary-text: var(--color-text-light);
    --color-button-secondary-bg: var(--color-secondary);
    --color-button-secondary-text: var(--color-text-light);
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-secondary);
    --color-success: #27AE60;
    --color-error: #E74C3C;

    /* Spacing & Sizing */
    --spacing-unit: 8px;
    --border-radius-soft: 8px;
    --border-radius-medium: 15px;
    --border-radius-sharp: 4px;
    --header-height: 70px;
    --footer-height: auto; /* Will be determined by content */

    /* Transitions */
    --transition-fast: 0.2s ease-in-out;
    --transition-smooth: 0.3s ease-in-out;
    --transition-elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.3s;
}

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

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

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

/* Remove focus outline for mouse users, keep for keyboard */
:focus:not(:focus-visible) {
    outline: none;
}
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-text-dark);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}
h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h4 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); }

p {
    margin-bottom: calc(var(--spacing-unit) * 2);
    color: var(--color-text-medium);
}

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

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

ul, ol {
    list-style: none;
    padding-left: 0;
}

/* Main Container & Content Wrapper */
.main-container {
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.content-wrapper {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* UTILITY CLASSES
-------------------------------------------------- */
.text-center { text-align: center !important; }
.text-light { color: var(--color-text-light) !important; }
.hidden { display: none !important; }

/* GLOBAL BUTTON STYLES
-------------------------------------------------- */
.cta-button, button, input[type="submit"], input[type="button"] {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all var(--transition-smooth);
    text-align: center;
    display: inline-block;
    background: var(--color-background);
    color: var(--color-text-dark);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-light-outer);
}
.cta-button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    box-shadow: var(--shadow-inset);
    transform: translateY(1px); /* Slight press effect */
}
.cta-button:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    box-shadow: var(--shadow-inset);
    transform: translateY(2px); /* Deeper press */
    filter: brightness(0.95);
}

.primary-cta {
    background-color: var(--color-primary);
    color: var(--color-button-primary-text);
    border: var(--brutalist-border-width) solid var(--brutalist-border-color);
    border-radius: var(--border-radius-sharp);
    box-shadow: var(--brutalist-shadow);
}
.primary-cta:hover {
    background-color: var(--color-secondary);
    box-shadow: calc(var(--brutalist-shadow-offset) - 2px) calc(var(--brutalist-shadow-offset) - 2px) 0px var(--brutalist-border-color);
    transform: translate(2px, 2px);
}
.primary-cta:active {
    transform: translate(var(--brutalist-shadow-offset), var(--brutalist-shadow-offset));
    box-shadow: none;
}

.secondary-cta {
    background-color: var(--color-secondary);
    color: var(--color-button-secondary-text);
    border: var(--brutalist-border-width) solid var(--brutalist-border-color);
    border-radius: var(--border-radius-sharp);
    box-shadow: var(--brutalist-shadow-offset) var(--brutalist-shadow-offset) 0px var(--color-text-dark);
}
.secondary-cta:hover {
    background-color: var(--color-accent);
    box-shadow: calc(var(--brutalist-shadow-offset) - 1px) calc(var(--brutalist-shadow-offset) - 1px) 0px var(--color-text-dark);
    transform: translate(1px, 1px);
}

/* HEADER & NAVIGATION
-------------------------------------------------- */
.site-header {
    background-color: var(--color-background);
    padding: var(--spacing-unit) 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(var(--color-text-dark-rgb), 0.08);
    height: var(--header-height);
    display: flex;
    align-items: center;
}
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-primary);
    text-decoration: none;
}
.logo:hover {
    color: var(--color-secondary);
}
.main-navigation .nav-links {
    display: flex;
    list-style: none;
}
.main-navigation .nav-links li {
    margin-left: calc(var(--spacing-unit) * 3);
}
.main-navigation .nav-links a {
    font-family: var(--font-primary);
    font-weight: 500;
    color: var(--color-text-dark);
    text-decoration: none;
    padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit);
    border-radius: var(--border-radius-soft);
    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.main-navigation .nav-links a:hover,
.main-navigation .nav-links a.active {
    background-color: var(--color-background-medium);
    color: var(--color-primary);
    box-shadow: var(--shadow-inset);
}
.menu-toggle {
    display: none; /* Hidden by default, shown in media query */
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-primary);
    cursor: pointer;
}

/* General Section Styling */
.section-padding {
    padding-top: calc(var(--spacing-unit) * 7);
    padding-bottom: calc(var(--spacing-unit) * 7);
}
.section-padding-large {
    padding-top: calc(var(--spacing-unit) * 9);
    padding-bottom: calc(var(--spacing-unit) * 9);
}
.section-title {
    font-size: clamp(2rem, 5vw, 3rem); /* Responsive */
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 2);
    position: relative; /* For pseudo-elements */
    color: var(--color-text-dark);
    text-shadow: 1px 1px 0px var(--color-background-lighter); /* Subtle lift */
}
.section-title::after { /* "Drawn" or brutalist underline */
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background-color: var(--color-primary);
    margin: var(--spacing-unit) auto calc(var(--spacing-unit) * 5) auto;
    border-radius: 2px;
    /* animation: draw-line 0.8s ease-out forwards; */
}
/* @keyframes draw-line { from { width: 0; } to { width: 70px; }} */

.section-intro {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-medium);
    max-width: 750px;
    margin: 0 auto calc(var(--spacing-unit) * 5) auto;
    text-align: center;
}

/* HERO SECTION
-------------------------------------------------- */
.hero-section {
    position: relative;
    padding: calc(var(--spacing-unit) * 10) 0;
    color: var(--color-text-light);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 85vh; /* Adjust as needed, not fixed 400px */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(var(--color-text-dark-rgb),0.4) 0%, rgba(var(--color-text-dark-rgb),0.7) 100%);
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}
.hero-title {
    color: var(--color-text-light) !important;
    text-shadow: 2px 2px 5px rgba(var(--color-text-dark-rgb), 0.6);
    margin-bottom: calc(var(--spacing-unit) * 2.5);
}
.hero-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    margin-bottom: calc(var(--spacing-unit) * 4);
    line-height: 1.6;
    color: var(--color-text-light) !important;
    text-shadow: 1px 1px 3px rgba(var(--color-text-dark-rgb), 0.5);
}
.hero-section .primary-cta {
    font-size: 1.1rem;
    padding: calc(var(--spacing-unit) * 1.8) calc(var(--spacing-unit) * 3.5);
}

/* CARDS (General for Services, Instructors, Gallery items etc.)
-------------------------------------------------- */
.card {
    background: var(--color-background);
    border-radius: var(--border-radius-medium);
    padding: calc(var(--spacing-unit) * 2.5);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensures cards in a grid row have same height */
    box-shadow: var(--shadow-light-outer);
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: calc(var(--shadow-distance) + 4px) calc(var(--shadow-distance) + 4px) calc(var(--shadow-blur) + 8px) var(--color-background-darker),
                calc(-1 * (var(--shadow-distance) + 4px)) calc(-1 * (var(--shadow-distance) + 4px)) calc(var(--shadow-blur) + 8px) var(--color-background-lighter);
}

.card-image { /* Wrapper for the image */
    width: 100%;
    height: 340px; /* Fixed height for consistency */
    margin-bottom: calc(var(--spacing-unit) * 2);
    border-radius: var(--border-radius-soft);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-background-medium); /* Placeholder */
    max-width: 600px;
    margin: 0 auto;
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop to fit */
    transition: transform 0.4s var(--transition-elastic);
}
.card:hover .card-image img {
    transform: scale(1.08);
}

.card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows content to fill card, pushing cta to bottom */
    text-align: left; /* Default, can be overridden by .text-center on .card */
    max-width: 600px;
    margin: 30px auto 0;
}
.card.text-center .card-content, .card.text-center {
    text-align: center;
    align-items: center;
}
.card-content h3 {
    margin-bottom: var(--spacing-unit);
    color: var(--color-primary);
    font-size: 1.3rem;
}
.card-content p {
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    flex-grow: 1; /* Pushes button down */
    font-size: 0.95rem;
}
.card-content .cta-button,
.card-content .read-more-link {
    margin-top: auto; /* Pushes to bottom of card content */
    align-self: flex-start; /* Default for left align */
}
.card.text-center .card-content .cta-button,
.card.text-center .card-content .read-more-link {
    align-self: center;
}
.price-tag {
    font-weight: 700;
    color: var(--color-accent);
    font-size: 1.1rem;
    margin-bottom: var(--spacing-unit) !important; /* Override p margin */
}

/* Grid Layouts */
.grid-container {
    display: grid;
    gap: calc(var(--spacing-unit) * 3.5);
}
.columns-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.columns-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* Neumorphic section styles */
.neumorphic-raised { /* For sections or large elements that appear raised */
    background-color: var(--color-background);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-light-outer);
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
}
.neumorphic-inset {  /* For sections that appear pressed in */
    background-color: var(--color-background);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-inset);
    padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
}

/* ACCORDIONS
-------------------------------------------------- */
.accordion-container {
    max-width: 800px;
    margin: 0 auto;
}
.accordion-item {
    margin-bottom: var(--spacing-unit);
    background-color: var(--color-background);
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-light-outer);
    overflow: hidden; /* For smooth animation */
}
.accordion-header {
    width: 100%;
    padding: calc(var(--spacing-unit) * 2);
    background-color: transparent;
    border: none;
    text-align: left;
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color var(--transition-fast);
}
.accordion-header:hover {
    background-color: var(--color-background-medium);
}
.accordion-icon {
    font-size: 1.5rem;
    transition: transform var(--transition-smooth);
    color: var(--color-accent);
}
.accordion-header[aria-expanded="true"] .accordion-icon {
    transform: rotate(45deg);
}
.accordion-content {
    padding: 0 calc(var(--spacing-unit) * 2);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}
.accordion-content p {
    padding: var(--spacing-unit) 0; /* Add padding when content is visible */
    font-size: 0.95rem;
}
/* JS will set max-height on expansion. For CSS only:
.accordion-header[aria-expanded="true"] + .accordion-content {
    max-height: 500px; // Estimate
    padding-bottom: calc(var(--spacing-unit) * 2);
} */

/* SLIDERS & CAROUSELS (Basic structure for JS interaction)
-------------------------------------------------- */
.custom-slider-gallery, .content-carousel, .partners-carousel {
    position: relative;
    overflow: hidden;
    /* Neumorphic container for sliders/carousels */
    background-color: var(--color-background);
    border-radius: var(--border-radius-medium);
    padding: var(--spacing-unit);
    box-shadow: var(--shadow-inset); /* Inset look for the container */
}
.slide-track, .carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out; /* JS will change transform */
}
.slide, .carousel-item {
    min-width: 100%; /* Default for single item view */
    flex-shrink: 0;
    padding: var(--spacing-unit); /* Space around each item */
}
/* Gallery specific item (inside .slide) */
.custom-slider-gallery .slide .card {
    box-shadow: var(--shadow-light-outer); /* Individual cards are raised */
}
/* Partners Carousel items */
.partners-carousel .carousel-track {
    align-items: center; /* Vertically align logos */
}
.partners-carousel .partner-logo {
    min-width: 150px; /* Adjust as needed */
    padding: calc(var(--spacing-unit) * 2);
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(50%);
    transition: filter var(--transition-smooth);
}
.partners-carousel .partner-logo:hover {
    filter: grayscale(0%);
}
.partners-carousel .partner-logo img {
    max-width: 120px;
    max-height: 60px;
    object-fit: contain;
}
.slider-controls, .carousel-controls {
    position: absolute;
    top: 50%;
    left: var(--spacing-unit);
    width: calc(100% - (var(--spacing-unit) * 2));
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none; /* Buttons inside will have pointer-events: all */
    z-index: 10;
}
.slider-prev, .slider-next, .carousel-prev, .carousel-next {
    pointer-events: all;
    background-color: rgba(var(--color-primary-rgb), 0.7);
    color: var(--color-text-light);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
    line-height: 1; /* For better icon centering */
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(var(--color-text-dark-rgb),0.2);
}
.slider-prev:hover, .slider-next:hover, .carousel-prev:hover, .carousel-next:hover {
    background-color: var(--color-primary);
    transform: scale(1.1);
}

/* FORMS (Contact Form)
-------------------------------------------------- */
.neumorphic-form .form-group {
    margin-bottom: calc(var(--spacing-unit) * 2.5);
}
.neumorphic-form label {
    display: block;
    margin-bottom: var(--spacing-unit);
    font-weight: 500;
    color: var(--color-text-medium);
    font-size: 0.9rem;
}
.neumorphic-form input[type="text"],
.neumorphic-form input[type="email"],
.neumorphic-form select,
.neumorphic-form textarea {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    background-color: var(--color-background);
    border: 1px solid transparent; /* Placeholder for focus border */
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-inset);
    font-family: var(--font-secondary);
    font-size: 1rem;
    color: var(--color-text-dark);
    transition: box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}
.neumorphic-form input[type="text"]:focus,
.neumorphic-form input[type="email"]:focus,
.neumorphic-form select:focus,
.neumorphic-form textarea:focus {
    outline: none;
    box-shadow: var(--shadow-inset), 0 0 0 2px var(--color-primary); /* Focus ring */
    border-color: var(--color-primary); /* Optional: make border visible on focus */
}
.neumorphic-form textarea {
    min-height: 120px;
    resize: vertical;
}
.neumorphic-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2334568B' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-unit) center;
    background-size: 1em;
    padding-right: calc(var(--spacing-unit) * 4);
}
.form-submit-button {
    width: 100%; /* Full width for form context */
    margin-top: var(--spacing-unit);
}
.contact-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-unit) * 5);
}
@media (min-width: 992px) {
    .contact-layout {
        grid-template-columns: 1.8fr 1.2fr; /* Form slightly wider */
    }
}
.contact-info-container .card {
    box-shadow: var(--shadow-light-outer);
}
.contact-info-container .card p { font-size: 0.95rem; }
.contact-info-container .card strong { color: var(--color-primary); }

/* Insight Cards specific styling */
.insight-card .card-image { height: 280px; } /* Taller images for insights */

/* Read More Link */
.read-more-link {
    display: inline-block;
    color: var(--color-accent);
    font-weight: 700;
    text-decoration: none;
    position: relative;
    padding-bottom: 4px; /* Space for underline */
    transition: color var(--transition-fast);
    font-size: 0.95rem;
}
.read-more-link::after {
    content: '→'; /* Arrow character */
    display: inline-block;
    margin-left: 6px;
    transition: transform 0.2s ease-out;
}
.read-more-link:hover {
    color: var(--color-secondary);
}
.read-more-link:hover::after {
    transform: translateX(4px);
}

/* External Resources Section */
.external-resources-section .resources-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: calc(var(--spacing-unit) * 3);
}
.resource-item {
    background: var(--color-background-light);
    padding: calc(var(--spacing-unit) * 2.5);
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-light-outer);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    display: flex;
    flex-direction: column;
}
.resource-item:hover {
    transform: translateY(-5px);
    box-shadow: calc(var(--shadow-distance) + 2px) calc(var(--shadow-distance) + 2px) calc(var(--shadow-blur) + 4px) var(--color-background-darker),
                calc(-1 * (var(--shadow-distance) + 2px)) calc(-1 * (var(--shadow-distance) + 2px)) calc(var(--shadow-blur) + 4px) var(--color-background-lighter);
}
.resource-item h4 {
    margin-top: 0;
    margin-bottom: var(--spacing-unit);
    font-size: 1.15rem;
}
.resource-item h4 a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 700;
}
.resource-item h4 a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}
.resource-item p {
    font-size: 0.9rem;
    color: var(--color-text-medium);
    line-height: 1.6;
    flex-grow: 1;
}


/* Contact CTA Section */
.contact-cta-section {
    position: relative;
    padding: calc(var(--spacing-unit) * 8) 0;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--border-radius-medium); /* Neumorphic if desired */
    margin: calc(var(--spacing-unit) * 4) auto; /* Center it if it's not full-width */
    max-width: 1200px; /* Match content-wrapper if not full bleed */
}
.contact-cta-section .cta-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(var(--color-accent-rgb),0.7), rgba(var(--color-primary-rgb),0.8));
    z-index: 1;
    border-radius: inherit;
}
.contact-cta-section .content-wrapper {
    position: relative;
    z-index: 2;
}
.contact-cta-section .section-title,
.contact-cta-section .cta-text {
    color: var(--color-text-light) !important;
    text-shadow: 1px 1px 3px rgba(var(--color-text-dark-rgb),0.4);
}
.contact-cta-section .section-title::after {
    background-color: var(--color-text-light); /* White underline on dark bg */
}
.contact-cta-section .cta-text {
    font-size: 1.15rem;
    margin-bottom: calc(var(--spacing-unit) * 3);
}
.contact-cta-section .secondary-cta {
    background-color: var(--color-secondary);
    color: var(--color-text-light);
    border-color: var(--color-text-light);
    box-shadow: var(--brutalist-shadow-offset) var(--brutalist-shadow-offset) 0px var(--color-text-light);
}
.contact-cta-section .secondary-cta:hover {
    background-color: var(--color-text-light);
    color: var(--color-secondary);
    border-color: var(--color-secondary);
    box-shadow: var(--brutalist-shadow-offset) var(--brutalist-shadow-offset) 0px var(--color-secondary);
}


/* FOOTER
-------------------------------------------------- */
.site-footer {
    background-color: var(--color-background-medium); /* Slightly different from main bg */
    color: var(--color-text-medium);
    padding: calc(var(--spacing-unit) * 5) 0 calc(var(--spacing-unit) * 2) 0;
    border-top: var(--brutalist-border-width) solid var(--brutalist-border-color); /* Neo-brutalist touch */
}
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: calc(var(--spacing-unit) * 4);
    margin-bottom: calc(var(--spacing-unit) * 3);
}
.site-footer h4 {
    font-size: 1.1rem;
    color: var(--color-primary);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    font-weight: 700;
}
.site-footer ul li {
    margin-bottom: var(--spacing-unit);
}
.site-footer ul a {
    color: var(--color-text-medium);
    text-decoration: none;
    font-size: 0.95rem;
}
.site-footer ul a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}
.footer-contact p {
    font-size: 0.95rem;
    margin-bottom: var(--spacing-unit);
}
.footer-social ul {
    display: flex;
    flex-wrap: wrap; /* Ensure links wrap on small screens */
}
.footer-social ul li {
    margin-right: calc(var(--spacing-unit) * 2); /* Spacing between text links */
}
.footer-social ul li:last-child {
    margin-right: 0;
}
.footer-bottom {
    text-align: center;
    padding-top: calc(var(--spacing-unit) * 2);
    border-top: 1px solid var(--color-background-darker);
    font-size: 0.9rem;
}

/* SPECIFIC PAGE STYLES (Privacy, Terms, Success)
-------------------------------------------------- */
/* Add padding to main content area for pages with fixed header */
.page-padding {
    padding-top: calc(var(--header-height) + var(--spacing-unit) * 4);
    padding-bottom: calc(var(--spacing-unit) * 6);
}
.page-title { /* For h1 on static pages like about, contact, privacy, terms */
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    color: var(--color-text-dark);
    margin-bottom: calc(var(--spacing-unit) * 4);
    text-align: center;
}
.page-title::after { /* Use the same ::after as .section-title */
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background-color: var(--color-primary);
    margin: var(--spacing-unit) auto calc(var(--spacing-unit) * 3) auto;
    border-radius: 2px;
}

.privacy-policy-section article,
.terms-conditions-section article,
.about-us-section > .content-wrapper > div:not(.image-container) { /* Target main content blocks */
    margin-bottom: calc(var(--spacing-unit) * 4);
    background: var(--color-background-light);
    padding: calc(var(--spacing-unit) * 3);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-light-outer);
}
.privacy-policy-section article h2, /* section-title-minor */
.terms-conditions-section article h2,
.about-us-section .section-title-minor {
    color: var(--color-primary);
    margin-top: 0;
    font-size: 1.5rem;
    border-bottom: 1px solid var(--color-background-darker);
    padding-bottom: var(--spacing-unit);
}
.privacy-policy-section ul,
.terms-conditions-section ul,
.about-us-section .values-list {
    list-style: disc; /* Use standard disc for readability */
    padding-left: calc(var(--spacing-unit) * 3);
}
.privacy-policy-section ul li,
.terms-conditions-section ul li,
.about-us-section .values-list li {
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}
.about-us-section .mission-vision {
    gap: calc(var(--spacing-unit) * 3);
}
.about-us-section .mission-vision .card { /* Specific styling for mission/vision cards */
    background-color: var(--color-background);
    box-shadow: var(--shadow-inset); /* Inset style for these */
}
.about-us-section .mission-vision .card h2 {
    border-bottom: none;
    color: var(--color-accent);
}

/* Success Page: Full viewport height and centered content */
body.success-page { /* Add this class to <body> tag on success.html */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.success-page .main-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
body.success-page main { /* Main content fills available space */
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.success-message-section { /* This section is the direct child of main */
    width: 100%; /* Take full width of its parent (main) */
}
/* .success-message-container and .success-icon styles are in success.html's <style> tag */
/* Ensure those styles blend with this global CSS if needed or move them here */
.success-message-container .page-title::after { display: none; } /* Remove underline for success title */

/* RESPONSIVE STYLES
-------------------------------------------------- */
@media (max-width: 991px) {
    .grid-container.columns-3 {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    }
    .hero-section { min-height: 70vh; }
    .hero-title { font-size: clamp(2rem, 6vw, 3rem); }
    .hero-subtitle { font-size: clamp(1rem, 3vw, 1.3rem); }
}

@media (max-width: 768px) {
    .main-navigation .nav-links {
        display: none; /* Hide nav links by default */
        flex-direction: column;
        position: absolute;
        top: calc(var(--header-height) - 1px); /* Position below header */
        left: 0;
        width: 100%;
        background-color: var(--color-background);
        box-shadow: 0 5px 10px rgba(var(--color-text-dark-rgb), 0.1);
        padding: var(--spacing-unit) 0;
        border-top: 1px solid var(--color-background-darker);
        z-index: 999; /* Ensure it's above content */
    }
    .main-navigation .nav-links.active {
        display: flex; /* Show when burger is clicked */
    }
    .main-navigation .nav-links li {
        width: 100%;
        text-align: center;
        margin-left: 0;
    }
    .main-navigation .nav-links li a {
        padding: calc(var(--spacing-unit) * 1.5) var(--spacing-unit);
        display: block;
        width: 100%;
        border-bottom: 1px solid var(--color-background-medium);
    }
    .main-navigation .nav-links li:last-child a {
        border-bottom: none;
    }
    .main-navigation .nav-links a:hover,
    .main-navigation .nav-links a.active {
        background-color: var(--color-background-medium); /* More distinct hover */
        color: var(--color-secondary);
        box-shadow: none; /* Remove inset shadow for mobile menu items */
    }
    .menu-toggle {
        display: block; /* Show burger icon */
    }

    .section-padding {
        padding-top: calc(var(--spacing-unit) * 5);
        padding-bottom: calc(var(--spacing-unit) * 5);
    }
    .section-padding-large {
        padding-top: calc(var(--spacing-unit) * 7);
        padding-bottom: calc(var(--spacing-unit) * 7);
    }
    .section-title { font-size: clamp(1.8rem, 6vw, 2.5rem); }
    .section-title::after { margin-bottom: calc(var(--spacing-unit) * 3); }
    .section-intro { font-size: 1rem; margin-bottom: calc(var(--spacing-unit) * 4); }

    .footer-content {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: calc(var(--spacing-unit) * 3);
    }
    .footer-content > div {
        margin-bottom: var(--spacing-unit) * 2;
    }
    .contact-layout {
        grid-template-columns: 1fr; /* Stack form and info on mobile */
    }
}

@media (max-width: 480px) {
    body { font-size: 15px; }
    .hero-section { padding: calc(var(--spacing-unit) * 6) 0; min-height: 60vh;}
    .cta-button, button, input[type="submit"], input[type="button"] {
        padding: calc(var(--spacing-unit) * 1.2) calc(var(--spacing-unit) * 2.5);
        font-size: 0.9rem;
    }
    .card-image { height: 180px; }
    .card-content h3 { font-size: 1.15rem; }
}

/* Cookie Popup (Minimal styles as requested, can be enhanced) */
/* HTML provides inline styles, but for completeness if moved to CSS: */
/*
#cookie-popup {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(var(--color-text-dark-rgb), 0.95);
    color: var(--color-text-light);
    padding: calc(var(--spacing-unit) * 2.5);
    text-align: center;
    z-index: 9999;
    box-shadow: 0 -3px 10px rgba(0,0,0,0.2);
    font-size: 0.9rem;
}
#cookie-popup p {
    margin: 0 0 calc(var(--spacing-unit) * 1.5) 0;
    color: var(--color-text-light);
}
#accept-cookie {
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: var(--border-radius-soft);
    box-shadow: none; /* Override global button 
} */
#accept-cookie:hover {
    background-color: var(--color-secondary);
    box-shadow: none;
    transform: none;
}
*/

/* AOS Animation defaults (can be overridden per element) */
[data-aos] {
    transition-property: transform, opacity; /* Default animated properties */
}