/* style.css */

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

1. CSS Variables
2. Global Styles & Typography
3. Layout & Container
4. UI Components
    - Buttons
    - Forms
    - Cards
    - Toggles
    - Modals (for potential success message - although handled by success.html)
5. Header & Navigation
6. Hero Section
7. Features Section
8. Methodology Section
9. Workshops Section
10. Webinars Section
11. Statistics Section
12. Clientele Section
13. News Section
14. Media Section
15. External Resources Section
16. Contact Section
17. Footer
18. Specific Page Styles
    - success.html
    - privacy.html, terms.html
19. Animations & Transitions
20. Utility Classes
21. Media Queries (Responsiveness)
-------------------------------------------------------------------*/

/* 1. CSS Variables */
:root {
    --font-primary: 'Space Grotesk', sans-serif;
    --font-secondary: 'DM Sans', sans-serif;

    /* Pastel Color Scheme with Brutalist Edge */
    --color-bg-light: #FAF7F0; /* Creamy White - Main background */
    --color-bg-medium: #E8F0F2; /* Light Pastel Blue-Gray - Alternate section background */
    --color-bg-dark-overlay: rgba(0, 0, 0, 0.5); /* For text on image backgrounds */

    --color-primary: #A0D2DB; /* Pastel Cyan-Blue - Main interactive elements */
    --color-primary-darker: #79BCC5; /* Darker shade for hover/active */
    --color-secondary: #F7CACA; /* Pastel Pink - Secondary accents */
    --color-accent: #F9E79F; /* Pastel Yellow - Highlights, special CTAs */
    --color-accent-darker: #E0CE8E;

    --color-text-dark: #2C3333; /* Very Dark Desaturated Cyan - Main text on light backgrounds */
    --color-text-light: #FFFFFF; /* White - Text on dark backgrounds / Hero */
    --color-text-medium: #555555; /* Medium Gray for less prominent text */
    --color-text-headings: #1E2A2D; /* Darker for main headings */

    --color-border-light: #D1D5DB; /* Light Gray for subtle borders */
    --color-brutalist-stroke: #1A1A1A; /* Near Black for strong outlines/brutalist elements */

    --shadow-soft: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 8px 15px rgba(0, 0, 0, 0.1);
    --shadow-brutalist: 4px 4px 0px var(--color-brutalist-stroke);

    --border-radius-small: 4px;
    --border-radius-medium: 8px;

    --transition-fast: 0.2s ease-in-out;
    --transition-medium: 0.3s ease-in-out;

    --header-height: 80px; /* For offsetting content on other pages */
}

/* 2. Global Styles & Typography */
*,
*::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.7;
    color: var(--color-text-dark);
    background-color: var(--color-bg-light);
    overflow-x: hidden; /* Prevent horizontal scroll */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: 0px !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--color-text-headings);
    line-height: 1.3;
    margin-bottom: 0.75em;
    font-weight: 700;
}

h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; text-align: center; margin-bottom: 1.5em; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.2rem; }

p {
    margin-bottom: 1.25rem;
    color: var(--color-text-medium);
}

a {
    color: var(--color-primary-darker);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

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

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

.section-padding {
    padding: 60px 0;
}

.alt-bg {
    background-color: var(--color-bg-medium);
}

.section-title {
    color: var(--color-text-headings);
    margin-bottom: 1.5rem; /* Reduced from 1.5em (relative to h2 font-size) */
    text-align: center;
    position: relative;
    padding-bottom: 0.5rem;
}

.section-title::after { /* Brutalist underline */
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--color-primary);
    margin: 0.5rem auto 0;
}

.section-intro {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 3rem;
    font-size: 1.1rem;
    color: var(--color-text-medium);
}

/* 3. Layout & Container */
.main-container {
    overflow-x: hidden; /* Ensures no horizontal scroll from animations */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.grid-layout {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* 4. UI Components */

/* Buttons */
.btn, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: var(--color-primary);
    color: var(--color-text-dark);
    border: 2px solid var(--color-brutalist-stroke);
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: var(--border-radius-small);
    text-decoration: none;
    transition: all var(--transition-medium);
    box-shadow: var(--shadow-brutalist);
    transform: translate(-2px, -2px); /* Initial position for shadow effect */
}

.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    background-color: var(--color-primary-darker);
    color: var(--color-brutalist-stroke);
    box-shadow: 2px 2px 0px var(--color-brutalist-stroke);
    transform: translate(0, 0);
}

.btn:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    box-shadow: none;
    transform: translate(2px, 2px);
}

.btn-primary { /* Already default */ }

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-text-dark);
}
.btn-secondary:hover {
    background-color: #F4B8B8; /* Darker pastel pink */
}

.btn-hero {
    font-size: 1.15rem;
    padding: 0.9rem 2.2rem;
}

/* Forms */
.contact-form .form-group {
    margin-bottom: 1.5rem;
}

.contact-form label {
    display: block;
    font-family: var(--font-primary);
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--color-text-dark);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    font-family: var(--font-secondary);
    font-size: 1rem;
    border: 2px solid var(--color-brutalist-stroke);
    border-radius: var(--border-radius-small);
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-primary-darker);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 160, 210, 219), 0.5); /* Define --color-primary-rgb if needed */
}

.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

/* Cards */
.card {
    background-color: var(--color-bg-light);
    border: 2px solid var(--color-brutalist-stroke);
    border-radius: var(--border-radius-medium);
    padding: 20px;
    box-shadow: var(--shadow-brutalist);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content like images */
    text-align: center;
    overflow: hidden; /* Ensure content stays within borders */
}

.card:hover {
    transform: translateY(-5px) translateX(-5px);
    box-shadow: 8px 8px 0px var(--color-brutalist-stroke);
}

.card .card-image { /* Wrapper for image */
    margin-bottom: 15px;
    width: 100%; /* Ensure it takes width for centering img */
    display: flex; /* For centering the image if it's smaller */
    justify-content: center;
    align-items: center;
}

.card .card-image.image-container { /* Specific for images that need object-fit */
    height: 200px; /* Example fixed height, adjust per card type */
    overflow: hidden;
    border-radius: var(--border-radius-small); /* Optional: if images should have rounded corners */
}

.card .card-image.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card .card-image img { /* General images in cards */
   max-width: 100%; /* Default responsive behavior */
   height: auto;
   border-radius: var(--border-radius-small);
}

.feature-card .card-image img {
    width: 80px; /* Specific size for feature icons */
    height: 80px;
    object-fit: contain;
}

.card .card-content {
    width: 100%; /* Ensure content area takes full width */
}

.card .card-content h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--color-text-headings);
}

.card .card-content p {
    font-size: 0.95rem;
    color: var(--color-text-medium);
    margin-bottom: 1rem;
}

.card .btn {
    margin-top: auto; /* Pushes button to bottom if card height varies in a row */
}

/* Toggles */
.toggle-container {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center; /* Center toggle if it's standalone */
    flex-wrap: wrap;
}

.toggle-label {
    font-family: var(--font-primary);
    margin-right: 10px;
    color: var(--color-text-dark);
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border: 2px solid var(--color-brutalist-stroke);
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    border: 1px solid var(--color-brutalist-stroke);
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--color-primary);
}

input:checked + .slider:before {
    transform: translateX(26px);
    background-color: var(--color-accent);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.hidden-content {
    display: none;
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--color-bg-medium);
    border: 1px dashed var(--color-primary);
    border-radius: var(--border-radius-small);
    width: 100%; /* Make it full width of its container if needed */
    text-align: left;
}

#advanced-details-content.is-visible {
    display: block;
}


/* Read More Links */
.read-more {
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: 500;
    color: var(--color-primary-darker);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent; /* Placeholder for hover effect */
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.read-more:hover, .read-more:focus {
    color: var(--color-accent-darker);
    border-bottom-color: var(--color-accent);
    text-decoration: none;
}


/* 5. Header & Navigation */
.site-header {
    background-color: var(--color-bg-light);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-bottom: 2px solid var(--color-brutalist-stroke);
}

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

.logo {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text-headings);
    text-decoration: none;
}

.logo .logo-accent {
    color: var(--color-primary);
}

.main-nav .nav-list {
    display: flex;
    list-style: none;
}

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

.main-nav .nav-list a {
    font-family: var(--font-primary);
    color: var(--color-text-dark);
    text-decoration: none;
    font-weight: 500;
    padding: 5px 0;
    position: relative;
    transition: color var(--transition-fast);
}

.main-nav .nav-list a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-primary);
    transition: width var(--transition-medium);
}

.main-nav .nav-list a:hover,
.main-nav .nav-list a.active { /* Add .active class via JS for current page/section */
    color: var(--color-primary-darker);
}
.main-nav .nav-list a:hover::after,
.main-nav .nav-list a.active::after {
    width: 100%;
}


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

.nav-toggle .hamburger,
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
    content: '';
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--color-text-headings);
    border-radius: 3px;
    transition: all var(--transition-medium);
}

.nav-toggle .hamburger::before {
    transform: translateY(-8px);
}
.nav-toggle .hamburger::after {
    transform: translateY(5px); /* Adjusted from 8px to be closer to middle bar */
}

.nav-open .nav-toggle .hamburger {
    background-color: transparent; /* Middle bar disappears */
}
.nav-open .nav-toggle .hamburger::before {
    transform: translateY(0) rotate(45deg);
}
.nav-open .nav-toggle .hamburger::after {
    transform: translateY(-3px) rotate(-45deg); /* Adjusted to align with top bar */
}


/* 6. Hero Section */
.hero-section {
    position: relative;
    color: var(--color-text-light);
    padding: 100px 0; /* Adjust padding as needed */
    text-align: center;
    min-height: 70vh; /* Ensure it's substantial but not overly large */
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-dark-overlay); /* Ensures text readability */
    z-index: 1;
}

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

.hero-title {
    font-size: 3.5rem;
    color: var(--color-text-light); /* Explicitly white as requested */
    margin-bottom: 0.5em;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Enhance readability */
}

.hero-subtitle {
    font-size: 1.3rem;
    color: var(--color-text-light); /* Explicitly white as requested */
    margin-bottom: 2em;
    line-height: 1.6;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Enhance readability */
}

/* 7. Features Section */
.features-section .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 2rem;
}

.feature-card .feature-title {
    color: var(--color-text-headings);
    margin-bottom: 0.75rem;
}

/* 8. Methodology Section */
.methodology-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 3rem;
    counter-reset: step-counter; /* For step numbers */
}

.methodology-steps .step {
    padding: 20px;
    background-color: var(--color-bg-light);
    border: 2px solid var(--color-brutalist-stroke);
    border-radius: var(--border-radius-medium);
    text-align: left; /* Steps might look better left-aligned */
    position: relative;
    padding-left: 60px; /* Space for number */
}

.methodology-steps .step .step-number {
    position: absolute;
    left: 15px;
    top: 20px;
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary);
    background-color: var(--color-bg-light);
    border: 2px solid var(--color-brutalist-stroke);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.methodology-steps .step h3 {
    margin-bottom: 0.5rem;
}

.gallery-container {
    margin-top: 3rem;
}
.gallery-title {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--color-text-headings);
}
.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.image-gallery .card-image {
    border: 2px solid var(--color-brutalist-stroke);
    border-radius: var(--border-radius-medium);
    overflow: hidden; /* To ensure image fits if using object-fit */
}
.image-gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}


/* 9. Workshops Section & 10. Webinars Section */
/* Uses .grid-layout and .card styles primarily */
.workshop-card .btn, .webinar-card .btn {
    margin-top: 1rem;
}
.webinar-card p small {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-medium);
}


/* 11. Statistics Section */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    text-align: center;
}

.stat-item {
    padding: 20px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: var(--color-text-light);
    border-radius: var(--border-radius-medium);
    border: 2px solid var(--color-brutalist-stroke);
    box-shadow: var(--shadow-brutalist);
}

.stat-item .stat-number {
    font-family: var(--font-primary);
    font-size: 3rem;
    font-weight: 700;
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-text-light); /* Ensure high contrast */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.stat-item .stat-description {
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-text-light); /* Ensure high contrast */
}

/* 12. Clientele Section */
.clientele-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.clientele-logos img {
    max-height: 60px; /* Control logo height */
    width: auto;
    filter: grayscale(80%) opacity(0.7);
    transition: filter var(--transition-medium);
}

.clientele-logos img:hover {
    filter: grayscale(0%) opacity(1);
}

/* 13. News Section */
/* Uses .grid-layout and .card styles */
.news-article .card-image {
    height: 230px; /* Fixed height for consistent look */
}

/* 14. Media Section */
.media-mentions {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.media-item {
    text-align: center;
    padding: 20px;
    border: 2px solid var(--color-border-light);
    border-radius: var(--border-radius-medium);
}
.media-item img { /* Media logos */
    max-height: 40px;
    margin: 0 auto 15px auto;
    filter: grayscale(100%);
    opacity: 0.6;
}
.media-item p {
    font-style: italic;
    color: var(--color-text-medium);
}
.media-item cite {
    display: block;
    margin-top: 0.5rem;
    font-style: normal;
    font-weight: 500;
    color: var(--color-text-dark);
}

/* 15. External Resources Section */
.external-links-list li {
    background-color: var(--color-bg-medium);
    padding: 15px 20px;
    margin-bottom: 15px;
    border-radius: var(--border-radius-small);
    border-left: 4px solid var(--color-primary);
}
.external-links-list li a strong {
    font-family: var(--font-primary);
    color: var(--color-text-headings);
    font-size: 1.1rem;
    display: block;
    margin-bottom: 0.25rem;
}
.external-links-list li a:hover strong {
    color: var(--color-accent-darker);
}
.external-links-list li p {
    font-size: 0.9rem;
    color: var(--color-text-medium);
    margin-bottom: 0;
}


/* 16. Contact Section */
/* Uses global form styles */
.contact-form {
    max-width: 700px;
    margin: 0 auto;
    background-color: var(--color-bg-light); /* Ensure form stands out on alt-bg */
    padding: 30px;
    border-radius: var(--border-radius-medium);
    border: 2px solid var(--color-brutalist-stroke);
    box-shadow: var(--shadow-brutalist);
}

/* 17. Footer */
.site-footer {
    background-color: var(--color-text-headings); /* Dark footer */
    color: var(--color-bg-light); /* Light text on dark footer */
    padding-top: 40px;
    padding-bottom: 20px;
    border-top: 4px solid var(--color-primary);
}

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

.site-footer h4 {
    font-family: var(--font-primary);
    color: var(--color-primary); /* Accent color for footer headings */
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

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

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

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

.footer-social ul li a { /* Text-based social links */
    display: inline-block; /* Allows padding */
}

.footer-contact-info p {
    margin-bottom: 0.5rem;
    color: var(--color-bg-medium);
}

.copyright-container {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid var(--color-text-medium); /* Subtle separator */
}

.copyright-container p {
    font-size: 0.9rem;
    color: var(--color-bg-medium);
    margin-bottom: 0;
}

/* 18. Specific Page Styles */

/* success.html */
body.success-page {
    display: flex;
    flex-direction: column; /* Allows header/footer if they were on this page */
    min-height: 100vh;
    background-color: var(--color-bg-light);
}
.success-page .main-container { /* If using main-container on success page */
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.success-content {
    text-align: center;
    padding: 40px;
    background-color: var(--color-bg-light);
    border: 3px solid var(--color-primary);
    box-shadow: var(--shadow-brutalist);
    border-radius: var(--border-radius-medium);
    max-width: 500px;
}
.success-content h1 {
    color: var(--color-primary-darker);
    font-size: 2.5rem;
}
.success-content p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}
.success-content .btn {
    margin-top: 1rem;
}

/* privacy.html, terms.html */
body.privacy-page main,
body.terms-page main {
    padding-top: var(--header-height); /* Ensure content isn't hidden by sticky header */
}

.legal-content-container { /* Wrapper for privacy/terms text */
    padding: 40px 0;
}
.legal-content-container h1 {
    margin-bottom: 2rem;
    text-align: center;
}
.legal-content-container h2 {
    text-align: left; /* Subheadings in legal docs are usually left */
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.8rem;
    color: var(--color-text-headings);
}
.legal-content-container p,
.legal-content-container ul li {
    text-align: left;
    color: var(--color-text-dark);
}
.legal-content-container ul {
    list-style: disc;
    padding-left: 20px;
    margin-bottom: 1rem;
}


/* 19. Animations & Transitions (Initial states for JS scroll reveal) */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--transition-medium), transform 0.8s var(--transition-medium);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 20. Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.margin-top-md { margin-top: 2rem; }
.margin-bottom-md { margin-bottom: 2rem; }
.hidden { display: none; }


/* 21. Media Queries (Responsiveness) */

@media (max-width: 992px) {
    h1 { font-size: 2.5rem; }
    .hero-title { font-size: 3rem; }
    h2, .section-title { font-size: 1.9rem; }
}

@media (max-width: 768px) {
    .main-nav .nav-list {
        display: none; /* Hide on mobile by default */
        flex-direction: column;
        position: absolute;
        top: calc(var(--header-height) - 2px); /* Align below header border */
        left: 0;
        width: 100%;
        background-color: var(--color-bg-light);
        border-bottom: 2px solid var(--color-brutalist-stroke);
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        padding: 10px 0;
    }

    .main-nav.nav-open .nav-list { /* Show when nav-open class is added to main-nav */
        display: flex;
    }

    .main-nav .nav-list li {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }

    .main-nav .nav-list a {
        display: block;
        padding: 12px 20px;
        border-bottom: 1px solid var(--color-border-light);
    }
    .main-nav .nav-list li:last-child a {
        border-bottom: none;
    }
    .main-nav .nav-list a::after { /* Mobile nav underline disabled for simplicity or different style */
        display: none;
    }
    .main-nav .nav-list a:hover,
    .main-nav .nav-list a.active {
        background-color: var(--color-bg-medium);
        color: var(--color-primary-darker);
    }

    .nav-toggle {
        display: block; /* Show hamburger on mobile */
    }

    .hero-section {
        padding: 80px 0;
        min-height: 60vh;
    }
    .hero-title { font-size: 2.5rem; }
    .hero-subtitle { font-size: 1.1rem; }

    .section-padding { padding: 40px 0; }
    .section-intro { margin-bottom: 2rem; font-size: 1rem; }

    .footer-container {
        grid-template-columns: 1fr; /* Stack footer columns */
        text-align: center;
    }
    .footer-container > div {
        margin-bottom: 20px;
    }
    .site-footer h4 {
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 576px) {
    body { font-size: 15px; }
    h1 { font-size: 2rem; }
    .hero-title { font-size: 2.2rem; }
    h2, .section-title { font-size: 1.6rem; }
    h3 { font-size: 1.3rem; }

    .btn, button, input[type="submit"] {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
    .btn-hero {
        font-size: 1rem;
        padding: 0.8rem 1.8rem;
    }

    .contact-form {
        padding: 20px;
    }

    .methodology-steps .step {
        padding-left: 20px; /* Adjust for smaller screens */
        text-align: center; /* Center content on small screens */
    }
    .methodology-steps .step .step-number {
        position: static; /* Stack number above content */
        margin: 0 auto 10px auto;
    }
}