/* style.css */

/*--------------------------------------------------------------
# CSS Variables
--------------------------------------------------------------*/
:root {
    /* Color Palette - Gradient & Biomorphic Inspired */
    --color-primary-start: #087E8B; /* Deep Teal - Adjusted for better harmony */
    --color-primary-end: #33A0A2;   /* Lighter Teal/Aqua - Adjusted */
    --color-primary-accent: #94D2BD; /* Pale Cyan/Aqua - Good for subtle highlights */
    --color-secondary-accent: #FFC43D; /* Vibrant Gold/Yellow - For CTAs & strong accents */
    --color-accent-darker: #E8A900; /* Darker shade for button hover */

    /* Neutral Colors */
    --color-text-dark: #212529;      /* Very Dark Gray - For main body text */
    --color-text-medium: #495057;   /* Medium Gray - For secondary text, subtitles */
    --color-text-light: #F8F9FA;    /* Off-White - For text on dark backgrounds */
    --color-heading-dark: #113537;  /* Darker Teal for headings, strong contrast */

    --color-background-light: #FFFFFF;
    --color-background-medium: #F4F7F7; /* Very Light, slightly cool gray */
    --color-background-gradient-light: linear-gradient(135deg, #E6F7F7, #F8FFFF); /* Subtle light gradient */
    --color-background-dark: #1A2E35;   /* Dark Blue/Teal - For footer/dark sections */

    --color-border: #DDE2E6;
    --color-border-light: #E9ECEF;

    /* Fonts */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Merriweather', serif;

    /* Spacing & UI Elements */
    --spacing-unit: 8px;
    --border-radius-small: 5px;
    --border-radius-medium: 10px; /* Slightly more rounded for biomorphic touch */
    --border-radius-large: 20px;
    --border-radius-biomorphic: 50px 15px 50px 15px; /* Example biomorphic radius */

    /* Shadows - Subtle for minimalism, depth for 3D */
    --shadow-light: 0 3px 6px rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 6px 15px rgba(0, 0, 0, 0.1);
    --shadow-strong: 0 10px 30px rgba(0, 0, 0, 0.12);

    /* Header */
    --header-height: 80px;
    --header-height-mobile: 60px;
    --header-background: rgba(255, 255, 255, 0.85); /* Glassmorphism base */
    --header-background-scrolled: rgba(255, 255, 255, 0.95);

    /* Transitions */
    --transition-fast: 0.2s ease-in-out;
    --transition-medium: 0.3s ease-in-out;
}

/*--------------------------------------------------------------
# Global Styles & Modern Normalize Complements
--------------------------------------------------------------*/
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-dark);
    background-color: var(--color-background-light);
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* For pages like privacy and terms, add padding for fixed header */
body.privacy-page main,
body.terms-page main {
    padding-top: calc(var(--header-height) + var(--spacing-unit) * 2);
}

/* For success page centering */
body.success-page {
    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 {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.success-content {
    background-color: var(--color-background-light);
    padding: calc(var(--spacing-unit) * 5) calc(var(--spacing-unit) * 3);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-medium);
    max-width: 600px;
    width: 90%;
}
.success-content h1 {
    color: var(--color-primary-start);
    margin-bottom: calc(var(--spacing-unit) * 2);
}
.success-content p {
    margin-bottom: calc(var(--spacing-unit) * 3);
    font-size: 1.1em;
}


/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-heading-dark);
    margin-top: 0;
    margin-bottom: calc(var(--spacing-unit) * 2);
    line-height: 1.3;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05); /* Subtle shadow for dark headings */
}

h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h4 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }

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

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

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

img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-small); /* Default subtle rounding */
}

ul, ol {
    margin-bottom: calc(var(--spacing-unit) * 2);
    padding-left: calc(var(--spacing-unit) * 2.5);
}

/* Main Container */
.main-container {
    width: 100%;
    overflow-x: hidden; /* Prevent horizontal scroll from parallax or animations */
}

/* Container for content centering */
.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-unit);
    padding-right: var(--spacing-unit);
}

/* Section Padding */
.section-padding {
    padding-top: calc(var(--spacing-unit) * 8);
    padding-bottom: calc(var(--spacing-unit) * 8);
}

@media (max-width: 768px) {
    .section-padding {
        padding-top: calc(var(--spacing-unit) * 6);
        padding-bottom: calc(var(--spacing-unit) * 6);
    }
}

/* Section Titles and Intros */
.section-title {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 2);
    color: var(--color-heading-dark); /* Ensure high contrast */
}

.section-intro {
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(var(--spacing-unit) * 5);
    color: var(--color-text-medium);
    font-size: 1.1em;
}
.section-outro {
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-top: calc(var(--spacing-unit) * 4);
    color: var(--color-text-medium);
    font-size: 1.0em;
}

.subsection-title {
    text-align: center;
    margin-top: calc(var(--spacing-unit) * 4);
    margin-bottom: calc(var(--spacing-unit) * 3);
    color: var(--color-heading-dark);
}


/* Backgrounds */
.bg-light-gradient {
    background: var(--color-background-gradient-light);
}

/*--------------------------------------------------------------
# Buttons - GLOBAL STYLES
--------------------------------------------------------------*/
.btn, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1em;
    text-align: center;
    text-decoration: none;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3.5);
    border-radius: var(--border-radius-biomorphic); /* Biomorphic touch */
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-medium);
    box-shadow: var(--shadow-light);
    transform: translateY(0);
}

.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover,
.btn:focus, button:focus, input[type="submit"]:focus, input[type="button"]:focus {
    box-shadow: var(--shadow-medium);
    transform: translateY(-3px);
    text-decoration: none;
}

.btn-primary {
    background-color: var(--color-secondary-accent);
    color: var(--color-text-dark); /* Dark text on yellow for contrast */
    border-color: var(--color-secondary-accent);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--color-accent-darker);
    border-color: var(--color-accent-darker);
    color: var(--color-text-dark);
}

/* Other button types if needed */
.btn-secondary {
    background-color: var(--color-primary-start);
    color: var(--color-text-light);
    border-color: var(--color-primary-start);
}

.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--color-primary-end);
    border-color: var(--color-primary-end);
    color: var(--color-text-light);
}

.read-more-link {
    display: inline-block;
    margin-top: calc(var(--spacing-unit) * 1.5);
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary-end);
    text-decoration: none;
    padding: calc(var(--spacing-unit)*0.5) 0; /* Underline like effect padding */
    position: relative;
}

.read-more-link::after {
    content: '→';
    margin-left: var(--spacing-unit);
    transition: margin-left var(--transition-fast);
}
.read-more-link:hover::after, .read-more-link:focus::after {
    margin-left: calc(var(--spacing-unit) * 1.5);
}
.read-more-link:hover, .read-more-link:focus {
    color: var(--color-primary-start);
    text-decoration: none; /* Remove default underline to control custom */
}


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: var(--header-background);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari */
    box-shadow: var(--shadow-light);
    z-index: 1000;
    transition: background-color var(--transition-medium), height var(--transition-medium);
    display: flex;
    align-items: center;
}

.site-header.scrolled { /* Add this class with JS on scroll */
    background-color: var(--header-background-scrolled);
    height: calc(var(--header-height) - 10px);
}

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

.logo a {
    font-size: 1.8em; /* Ensure logo text size is readable */
    font-weight: 700;
    color: var(--color-primary-start);
    text-decoration: none;
}
.logo a:hover {
    color: var(--color-primary-end);
}

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

.main-navigation .nav-links li {
    margin-left: calc(var(--spacing-unit) * 3);
}

.main-navigation .nav-links a {
    font-family: var(--font-heading);
    font-weight: 600; /* Slightly less than 700 for distinction */
    color: var(--color-text-medium);
    text-decoration: none;
    padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit);
    border-radius: var(--border-radius-small);
    position: relative;
}
.main-navigation .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--color-secondary-accent);
    transition: width var(--transition-medium);
}

.main-navigation .nav-links a:hover,
.main-navigation .nav-links a:focus,
.main-navigation .nav-links a.active { /* Assuming an active class might be added via JS */
    color: var(--color-primary-start);
    text-decoration: none;
}
.main-navigation .nav-links a:hover::after,
.main-navigation .nav-links a:focus::after,
.main-navigation .nav-links a.active::after {
    width: 70%;
}


/* Hamburger Menu */
.menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-unit);
    z-index: 1001; /* Above nav links when open */
}

.menu-toggle .hamburger {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-primary-start);
    position: relative;
    transition: all var(--transition-fast);
}

.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-primary-start);
    transition: all var(--transition-fast);
}

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

.sr-only { /* Screen reader only text */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}


/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero-section {
    min-height: 85vh; /* Natural height based on content and viewport */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-text-light); /* White text for hero */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    padding: calc(var(--spacing-unit) * 5) 0;
    /* Parallax effect - simple CSS version */
    /* background-attachment: fixed; */ /* More complex parallax via JS (GSAP) is better for performance */
}

.hero-content {
    max-width: 800px;
    position: relative; /* For potential pseudo-elements or future additions */
    z-index: 2;
    animation: fadeInUp 1s ease-out;
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem); /* Responsive font size */
    color: var(--color-text-light); /* White text for hero */
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
    margin-bottom: calc(var(--spacing-unit) * 2.5);
}

.hero-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    color: var(--color-text-light); /* White text for hero */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: calc(var(--spacing-unit) * 4);
    line-height: 1.8;
}

.hero-section .btn-primary {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 5);
    font-size: 1.1em;
}


/*--------------------------------------------------------------
# Cards (Services, Insights, Awards items etc.)
--------------------------------------------------------------*/
.card {
    background-color: var(--color-background-light);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-medium);
    overflow: hidden;
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
    display: flex;
    flex-direction: column;
    /* align-items: center; /* For content inside card-content if it needs centering */
    text-align: left; /* Default text align for card content */
    height: 100%; /* For equal height cards in a grid */
}

.card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-strong);
}

.card-image {
    width: 100%;
    height: 220px; /* Fixed height for image containers */
    overflow: hidden;
    /* Removed display: flex for this specific container, img itself is centered */
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area, might crop */
    border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0; /* Round top corners */
    transition: transform 0.4s ease;
}
.card:hover .card-image img {
    transform: scale(1.05);
}


.card-content {
    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
    flex-grow: 1; /* Allows content to fill space if card height is constrained by grid */
    display: flex;
    flex-direction: column;
}
.card-content p {
    color: var(--color-text-medium);
    font-size: 0.95em;
    flex-grow: 1; /* Pushes "read more" to bottom if card content varies */
}
.card-content .card-title {
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    color: var(--color-primary-start);
}

/* Services Section */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: calc(var(--spacing-unit) * 3.5);
}

/* Insights Section */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: calc(var(--spacing-unit) * 3.5);
}

/* Awards Section */
.awards-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: calc(var(--spacing-unit) * 3);
    text-align: center; /* For award items to center their content */
}
.award-item {
    /* Inherits .card styles if .card is used, otherwise define here */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content vertically */
    padding: calc(var(--spacing-unit) * 2);
}
.award-item .card-image { /* If using card structure */
    width: 150px; /* Smaller images for awards */
    height: 150px;
    border-radius: 50%; /* Circular awards */
    margin-bottom: var(--spacing-unit);
}
.award-item .card-image img {
    border-radius: 50%;
}
.award-item .award-title {
    margin-top: var(--spacing-unit);
    font-size: 1.2em;
    color: var(--color-primary-start);
}
.award-item p {
    font-size: 0.9em;
    color: var(--color-text-medium);
}


/*--------------------------------------------------------------
# Our Process Section
--------------------------------------------------------------*/
.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: calc(var(--spacing-unit) * 4);
    margin-bottom: calc(var(--spacing-unit) * 5);
}

.process-step {
    text-align: center;
    padding: calc(var(--spacing-unit) * 2);
    border-radius: var(--border-radius-medium);
    transition: all var(--transition-medium);
}

.process-step:hover {
    background-color: rgba(148, 210, 189, 0.1); /* Light primary accent tint */
    transform: translateY(-5px);
}

.step-icon {
    width: 80px;
    height: 80px;
    border-radius: 35% 65% 60% 40% / 50% 45% 55% 50%; /* Biomorphic shape */
    background: linear-gradient(135deg, var(--color-primary-start), var(--color-primary-accent));
    margin: 0 auto calc(var(--spacing-unit) * 2.5) auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-light);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy effect */
}
.process-step:hover .step-icon {
    transform: scale(1.1) rotate(10deg);
}

.step-number {
    font-size: 2em;
    font-weight: 700;
    color: var(--color-text-light);
    font-family: var(--font-heading);
}

.step-title {
    margin-bottom: var(--spacing-unit);
    color: var(--color-heading-dark);
    font-size: 1.3em;
}
.process-step p {
    font-size: 0.95em;
    color: var(--color-text-medium);
}

/* Accordion */
.accordion-section {
    max-width: 800px;
    margin: calc(var(--spacing-unit) * 5) auto 0 auto;
}
.accordion-item {
    background-color: var(--color-background-light);
    margin-bottom: var(--spacing-unit);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-small);
    overflow: hidden;
}
.accordion-header {
    background-color: transparent;
    color: var(--color-heading-dark);
    cursor: pointer;
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    font-family: var(--font-heading);
    font-size: 1.1em;
    font-weight: 600;
    transition: background-color var(--transition-fast);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.accordion-header:hover, .accordion-item.active .accordion-header {
    background-color: rgba(148, 210, 189, 0.08); /* Subtle primary accent */
}
.accordion-header::after { /* Plus/Minus icon */
    content: '+';
    font-size: 1.5em;
    color: var(--color-primary-end);
    transition: transform var(--transition-medium);
}
.accordion-item.active .accordion-header::after {
    content: '–';
    transform: rotate(180deg);
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-medium) ease-out, padding var(--transition-medium) ease-out;
    padding: 0 calc(var(--spacing-unit) * 2.5);
}
.accordion-item.active .accordion-content {
    /* max-height will be set by JS */
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2.5);
}
.accordion-content p {
    margin: 0;
    color: var(--color-text-medium);
}

/*--------------------------------------------------------------
# Sustainability Section
--------------------------------------------------------------*/
.sustainability-content-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 4);
    align-items: center;
}
.sustainability-text {
    flex: 1;
    min-width: 300px; /* Ensure text has enough space */
}
.sustainability-text p {
    margin-bottom: calc(var(--spacing-unit) * 2.5);
    font-size: 1.05em;
}
.sustainability-image-container {
    flex: 1;
    min-width: 300px;
    max-width: 500px; /* Control image size */
    margin: 0 auto;
}
.sustainability-image-container img {
    border-radius: var(--border-radius-large); /* More biomorphic curve */
    box-shadow: var(--shadow-medium);
}

/*--------------------------------------------------------------
# External Resources Section
--------------------------------------------------------------*/
.resources-list {
    display: grid;
    grid-template-columns: 1fr; /* Single column for now, could be 2 for wider screens */
    gap: calc(var(--spacing-unit) * 2.5);
}
.resource-item {
    background-color: var(--color-background-light);
    padding: calc(var(--spacing-unit) * 2.5);
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-light);
    transition: all var(--transition-medium);
}
.resource-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
    border-left: 4px solid var(--color-primary-accent);
}
.resource-title {
    margin-bottom: var(--spacing-unit);
    font-size: 1.2em;
}
.resource-title a {
    color: var(--color-primary-start);
}
.resource-title a:hover {
    color: var(--color-secondary-accent);
}
.resource-description {
    font-size: 0.9em;
    color: var(--color-text-medium);
    margin: 0;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 5);
    margin-top: calc(var(--spacing-unit) * 3);
}
.contact-form-container {
    flex: 1.5; /* Form takes more space */
    min-width: 300px;
}
.contact-details-container {
    flex: 1;
    min-width: 280px;
    background: var(--color-background-gradient-light); /* Subtle gradient for details */
    padding: calc(var(--spacing-unit) * 3);
    border-radius: var(--border-radius-large);
}
.contact-details-title {
    color: var(--color-heading-dark);
    margin-bottom: calc(var(--spacing-unit) * 2);
}
.contact-details-container p {
    color: var(--color-text-medium);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}
.contact-details-list {
    list-style: none;
    padding: 0;
}
.contact-details-list li {
    margin-bottom: var(--spacing-unit);
    color: var(--color-text-medium);
    font-size: 0.95em;
}
.contact-details-list li strong {
    color: var(--color-text-dark);
}
.contact-details-list a {
    color: var(--color-primary-end);
}
.contact-details-list a:hover {
    color: var(--color-secondary-accent);
}
.map-placeholder img {
    border-radius: var(--border-radius-medium);
    margin-top: calc(var(--spacing-unit) * 2);
    box-shadow: var(--shadow-light);
}

/* Contact Form Styles */
.contact-form .form-group {
    margin-bottom: calc(var(--spacing-unit) * 2.5);
}
.form-label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    margin-bottom: var(--spacing-unit);
    color: var(--color-text-dark);
}
.form-input, .form-textarea {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-small);
    font-family: var(--font-body);
    font-size: 1em;
    color: var(--color-text-dark);
    background-color: var(--color-background-light);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-input:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--color-primary-end);
    box-shadow: 0 0 0 3px rgba(148, 210, 189, 0.3); /* Primary accent glow */
}
.form-textarea {
    min-height: 120px;
    resize: vertical;
}
.contact-form .btn-submit {
    width: auto; /* Or 100% if preferred */
    padding: calc(var(--spacing-unit) * 1.8) calc(var(--spacing-unit) * 4);
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer {
    background-color: var(--color-background-dark);
    color: var(--color-text-light);
    padding: calc(var(--spacing-unit) * 6) 0 calc(var(--spacing-unit) * 2) 0;
    font-size: 0.95em;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: calc(var(--spacing-unit) * 4);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.footer-column h4 {
    font-family: var(--font-heading);
    font-size: 1.2em;
    color: var(--color-primary-accent); /* Lighter accent for dark bg */
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.footer-column p {
    margin-bottom: var(--spacing-unit);
    line-height: 1.6;
    color: #adb5bd; /* Lighter gray */
}
.footer-logo-area a {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--color-text-light);
    text-decoration: none;
    display: block;
    margin-bottom: var(--spacing-unit);
}
.footer-logo-area p {
    font-style: italic;
}

.footer-nav ul, .footer-social ul {
    list-style: none;
    padding: 0;
}

.footer-nav li, .footer-social li {
    margin-bottom: calc(var(--spacing-unit) * 1.2);
}

.footer-nav a, .footer-social a, .footer-contact-info a {
    color: #ced4da; /* Even lighter gray for links */
    text-decoration: none;
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.footer-nav a:hover, .footer-social a:hover, .footer-contact-info a:hover {
    color: var(--color-secondary-accent);
    padding-left: var(--spacing-unit);
    text-decoration: none;
}

.footer-bottom {
    text-align: center;
    padding-top: calc(var(--spacing-unit) * 3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9em;
    color: #adb5bd;
}
.footer-bottom p { margin: 0; }

/*--------------------------------------------------------------
# Responsive Styles
--------------------------------------------------------------*/
@media (max-width: 992px) {
    .contact-wrapper {
        flex-direction: column;
    }
    .sustainability-content-wrapper {
        flex-direction: column;
    }
    .sustainability-image-container {
        order: -1; /* Image on top on mobile */
        max-width: 100%;
        margin-bottom: calc(var(--spacing-unit) * 3);
    }
}

@media (max-width: 768px) {
    .site-header {
        height: var(--header-height-mobile);
    }
    .site-header.scrolled {
        height: calc(var(--header-height-mobile) - 5px);
    }
    .main-navigation .nav-links {
        display: none; /* Hidden by default on mobile */
        flex-direction: column;
        position: absolute;
        top: var(--header-height-mobile);
        left: 0;
        width: 100%;
        background-color: var(--header-background-scrolled); /* Solid background when open */
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        padding: var(--spacing-unit) 0;
    }
    .main-navigation .nav-links.active { /* JS adds this class */
        display: flex;
    }
    .main-navigation .nav-links li {
        margin: 0;
        width: 100%;
        text-align: center;
    }
    .main-navigation .nav-links a {
        display: block;
        padding: calc(var(--spacing-unit) * 1.5) var(--spacing-unit);
        border-bottom: 1px solid var(--color-border-light);
    }
    .main-navigation .nav-links li:last-child a {
        border-bottom: none;
    }
    .menu-toggle {
        display: block; /* Show hamburger on mobile */
    }
    .menu-toggle[aria-expanded="true"] .hamburger {
        background-color: transparent; /* Hide middle line */
    }
    .menu-toggle[aria-expanded="true"] .hamburger::before {
        transform: translateY(8px) rotate(45deg);
    }
    .menu-toggle[aria-expanded="true"] .hamburger::after {
        transform: translateY(-8px) rotate(-45deg);
    }

    .hero-section {
        min-height: 70vh;
    }

    .footer-container {
        grid-template-columns: 1fr; /* Stack columns on mobile */
        text-align: center;
    }
    .footer-column h4 {
        margin-top: calc(var(--spacing-unit) * 2);
    }
    .footer-column:first-child h4 {
        margin-top: 0;
    }
    .footer-logo-area a {
        margin-left: auto;
        margin-right: auto;
    }
    body.privacy-page main,
    body.terms-page main {
        padding-top: calc(var(--header-height-mobile) + var(--spacing-unit) * 2);
    }
}

/*--------------------------------------------------------------
# Animations (Example - more complex via GSAP in script.js)
--------------------------------------------------------------*/
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Add .fade-in-up to elements you want to animate on scroll (use JS for triggering) */
.fade-in-up {
    opacity: 0; /* Start hidden, JS will make it visible and animation will run */
    animation: fadeInUp 0.8s ease-out forwards;
}

/*
  Parallax scrolling effect for background images (if not handled by JS)
  Example:
  .parallax-section {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
*/

/* Ensure high contrast for all text elements */
/* This is a general reminder. Specific contrast is handled per element. */
/* Example: body text is #212529 on #FFFFFF which is very high contrast. */
/* Hero text #F8F9FA on dark overlay is also high contrast. */