/* GLOBAL STYLES AND CSS VARIABLES */
:root {
    --primary-color: #2F4F4F; /* Dark Slate Gray - Corporate, stable */
    --secondary-color: #FFBF00; /* Amber/Gold - Complementary, vibrant accent */
    
    --primary-color-darker: #1E3535;
    --secondary-color-darker: #D8A000;

    --accent-color-light: #6DAEAD; /* Lighter teal for subtle highlights */
    --accent-color-medium: #4A7070;

    --text-color-dark: #222222; /* For light backgrounds */
    --text-color-medium: #555555;
    --text-color-light: #FFFFFF; /* For dark backgrounds */
    
    --background-color-page: #F8F9FA; /* Very light gray, almost white */
    --background-color-light-section: #FFFFFF;
    --background-color-dark-section: #2A3B3B; /* Darker than primary for contrast sections */

    --card-background: #FFFFFF;
    --card-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* Softer, more biomorphic shadow */
    --card-border-radius: 12px; /* Slightly organic feel */

    --border-color: #DDE2E1;
    --border-radius-sm: 6px;
    --border-radius-md: 12px;

    --font-family-headings: 'Roboto', sans-serif;
    --font-family-body: 'Lato', sans-serif;

    --container-width: 1140px;
    --spacing-unit: 1rem; /* approx 16px */

    --transition-speed: 0.3s;
    --transition-timing: cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth and responsive */

    --biomorphic-gradient: linear-gradient(135deg, var(--primary-color), var(--accent-color-light));
}

/* GENERAL RESETS AND BASE STYLES */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 100%; /* 16px base */
}

body {
    font-family: var(--font-family-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-color-dark);
    background-color: var(--background-color-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll */
    padding-top: 0px !important;
}

/* Page Transition Overlay */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    z-index: 10000;
    opacity: 1;
    pointer-events: none;
    transition: opacity var(--transition-speed) ease-in-out;
}

body.loaded .page-transition-overlay {
    opacity: 0;
}


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

h1 { font-size: 2.8rem; margin-bottom: var(--spacing-unit); }
h2 { font-size: 2.2rem; margin-bottom: calc(var(--spacing-unit) * 1.5); } /* Section titles */
h3 { font-size: 1.8rem; }
h4 { font-size: 1.4rem; }

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

a {
    color: var(--secondary-color-darker);
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-timing);
}

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

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

/* UTILITY CLASSES */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-unit);
    padding-right: var(--spacing-unit);
}

.section-padding {
    padding-top: calc(var(--spacing-unit) * 3.5);
    padding-bottom: calc(var(--spacing-unit) * 3.5);
}

.section-padding-large {
    padding-top: calc(var(--spacing-unit) * 5);
    padding-bottom: calc(var(--spacing-unit) * 5);
}

.bg-light {
    background-color: var(--background-color-light-section);
}

.bg-dark {
    background-color: var(--background-color-dark-section);
    color: var(--text-color-light);
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark p {
    color: var(--text-color-light);
}
.bg-dark a {
    color: var(--secondary-color);
}
.bg-dark a:hover {
    color: var(--text-color-light);
}

.section-title {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 2.5);
    color: var(--primary-color-darker);
    position: relative;
}
.section-title::after { /* Subtle biomorphic underline */
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--secondary-color);
    margin: calc(var(--spacing-unit) * 0.5) auto 0;
    border-radius: 2px;
}

.section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: var(--text-color-medium);
    margin-bottom: calc(var(--spacing-unit) * 2);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Columns System (Basic Flexbox) */
.columns {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(-1 * var(--spacing-unit));
    margin-right: calc(-1 * var(--spacing-unit));
}

.column {
    flex-basis: 100%; /* Default for mobile */
    padding-left: var(--spacing-unit);
    padding-right: var(--spacing-unit);
    margin-bottom: calc(var(--spacing-unit) * 1.5); /* Spacing between columns when they stack */
}

@media (min-width: 768px) {
    .column {
        flex: 1; /* Equal width columns by default */
        margin-bottom: 0;
    }
    .column.is-two-thirds {
        flex: 0 0 66.6666%;
        max-width: 66.6666%;
    }
    .column.is-one-third {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
    .column.is-half {
        flex: 0 0 50%;
        max-width: 50%;
    }
     .columns.is-multiline .column { /* Ensure multiline columns have bottom margin */
        margin-bottom: calc(var(--spacing-unit) * 1.5);
    }
}

/* GLOBAL BUTTON STYLES */
.cta-button, button[type="submit"], input[type="submit"] {
    display: inline-block;
    background-color: var(--secondary-color);
    color: var(--primary-color-darker);
    font-family: var(--font-family-headings);
    font-weight: 700;
    font-size: 1rem;
    padding: calc(var(--spacing-unit) * 0.8) calc(var(--spacing-unit) * 2);
    border: 2px solid var(--secondary-color);
    border-radius: var(--border-radius-sm); /* Slightly rounded */
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-timing);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transform: translateY(0); /* For hover effect */
}

.cta-button:hover, button[type="submit"]:hover, input[type="submit"]:hover,
.cta-button:focus, button[type="submit"]:focus, input[type="submit"]:focus {
    background-color: var(--secondary-color-darker);
    border-color: var(--secondary-color-darker);
    color: var(--primary-color-darker);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    transform: translateY(-2px); /* Subtle lift */
    outline: none;
}

/* Read More Link Style */
.read-more {
    display: inline-block;
    margin-top: var(--spacing-unit);
    color: var(--secondary-color-darker);
    font-weight: 700;
    text-decoration: none;
    position: relative;
    padding-bottom: 3px;
}
.read-more::after {
    content: ' →';
}
.read-more:hover {
    color: var(--secondary-color);
    text-decoration: none;
}
.read-more::before { /* Underline effect */
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--secondary-color);
    transition: width var(--transition-speed) var(--transition-timing);
}
.read-more:hover::before {
    width: 100%;
}


/* HEADER */
.site-header {
    background-color: rgba(255, 255, 255, 0.95); /* Slightly transparent white */
    backdrop-filter: blur(8px); /* Glassmorphism touch */
    padding: var(--spacing-unit) 0;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: padding var(--transition-speed) ease;
}

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

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

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

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

.main-nav a {
    font-family: var(--font-family-body);
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    padding: 0.5rem 0.2rem;
    position: relative;
    transition: color var(--transition-speed) var(--transition-timing);
}

.main-nav a::after { /* Underline animation */
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 5px;
    right: 0;
    background: var(--secondary-color);
    transition: width var(--transition-speed) ease;
}

.main-nav a:hover::after, .main-nav a.active::after {
    width: 100%;
    left: 0;
    background: var(--secondary-color);
}
.main-nav a:hover, .main-nav a.active {
    color: var(--secondary-color-darker);
    text-decoration: none;
}

.burger-menu {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001; /* Above nav on mobile */
}

.burger-menu span {
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--primary-color);
    margin: 5px 0;
    border-radius: 3px;
    transition: all var(--transition-speed) ease-in-out;
}


/* HERO SECTION */
#hero {
    color: var(--text-color-light);
    text-align: center;
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh; /* Adjust as needed, avoid fixed large heights if content is short */
}

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

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

.hero-content h1 {
    font-size: 3.5rem; /* Larger for hero */
    color: var(--text-color-light); /* Enforce white text */
    margin-bottom: var(--spacing-unit);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5); /* Enhanced readability */
}

.hero-content p {
    font-size: 1.25rem;
    color: var(--text-color-light); /* Enforce white text */
    margin-bottom: calc(var(--spacing-unit) * 2);
    text-shadow: 1px 1px 4px rgba(0,0,0,0.3); /* Enhanced readability */
}

.hero-content .cta-button {
    font-size: 1.1rem;
    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2.5);
}

/* CARD STYLES */
.card {
    background-color: var(--card-background);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: transform var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure cards in a row have same height if content varies */
}

.card:hover {
    transform: translateY(-5px) scale(1.02); /* Slight lift and zoom */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.card-image { /* Container for the image */
    width: 100%;
    height: 200px; /* Fixed height for consistency */
    overflow: hidden;
    display: flex; /* For centering content (img) if it's smaller */
    align-items: center;
    justify-content: center;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, crop if necessary */
    transition: transform var(--transition-speed) ease;
}

.card:hover .card-image img {
    transform: scale(1.05); /* Slight zoom on image hover */
}

.card-content {
    padding: calc(var(--spacing-unit) * 1.5);
    text-align: center; /* Center text content in cards */
    flex-grow: 1; /* Allows content to push footer of card down */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* For cards with a read-more link at bottom */
}

.card-content h3, .card-content h4 {
    margin-top: 0;
    color: var(--primary-color-darker);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}
.card-content p {
    font-size: 0.95rem;
    color: var(--text-color-medium);
    margin-bottom: var(--spacing-unit);
}

/* MISSION SECTION */
#mission .image-container img {
    border-radius: var(--border-radius-md);
    box-shadow: var(--card-shadow);
}
#mission .column.is-two-thirds { /* Align text more to the left */
    text-align: left;
}
#mission .column.is-two-thirds p {
    font-size: 1.05rem;
    line-height: 1.7;
}


/* INSIGHTS SECTION & TIMELINE */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto calc(var(--spacing-unit) * 3) auto;
    padding: calc(var(--spacing-unit) * 2) 0;
}

.timeline::before { /* The central line */
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--border-color);
    transform: translateX(-50%);
    border-radius: 2px;
}

.timeline-item {
    position: relative;
    margin-bottom: calc(var(--spacing-unit) * 2.5);
    width: 50%;
}

.timeline-item:nth-child(odd) {
    left: 0;
    padding-right: calc(var(--spacing-unit) * 2.5); /* Space from center line */
}

.timeline-item:nth-child(even) {
    left: 50%;
    padding-left: calc(var(--spacing-unit) * 2.5); /* Space from center line */
}

.timeline-icon {
    position: absolute;
    top: 15px; /* Adjust to align with content */
    width: 20px;
    height: 20px;
    background-color: var(--secondary-color);
    border: 3px solid var(--background-color-light-section);
    border-radius: 50%;
    z-index: 1;
}

.timeline-item:nth-child(odd) .timeline-icon {
    right: -10px; /* Half of icon width to sit on the line */
    transform: translateX(0%);
}
.timeline-item:nth-child(even) .timeline-icon {
    left: -10px; /* Half of icon width */
    transform: translateX(0%);
}

.timeline-content {
    position: relative;
    /* Uses .card styles from above */
}
.timeline-content.card {
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
}

.timeline-content h3 {
    margin-top: 0;
    font-size: 1.5rem;
}
.insights-cards .card {
    text-align: left; /* Override general card centering for these specific cards */
}
.insights-cards .card-content {
    text-align: left;
}

/* CUSTOMER STORIES SECTION - CAROUSEL */
.content-carousel { /* Basic styling, JS will handle functionality */
    display: flex; /* Simplistic representation */
    overflow-x: auto; /* For basic scrolling if JS fails or for touch */
    gap: var(--spacing-unit);
    padding-bottom: var(--spacing-unit); /* For scrollbar */
}
.carousel-item {
    min-width: 300px; /* Example width */
    flex-shrink: 0;
}
.carousel-item .card-image {
    height: 250px; /* Specific height for testimonials */
}
.carousel-item .card-image img {
    border-radius: 50%; /* Circular images for testimonials */
    width: 150px;
    height: 150px;
    object-fit: cover;
    margin: var(--spacing-unit) auto; /* Center profile pic */
    border: 4px solid var(--secondary-color);
}
.carousel-item .card-content {
    flex-grow: 1;
}
.carousel-item .card-content h4 {
    color: var(--primary-color);
    margin-top: calc(var(--spacing-unit) * 0.5);
    margin-bottom: 0;
}
.carousel-item .card-content span {
    font-size: 0.9rem;
    color: var(--text-color-medium);
    display: block;
}


/* NEWS SECTION */
.news-card .card-image {
    height: 220px;
}

/* EXTERNAL RESOURCES SECTION */
.resource-card {
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-left: 5px solid var(--secondary-color);
    padding: var(--spacing-unit);
    border-radius: var(--border-radius-sm);
    transition: var(--card-shadow) var(--transition-speed) var(--transition-timing);
    height: 100%;
}
.resource-card:hover {
    box-shadow: var(--card-shadow);
}
.resource-card h4 a {
    color: var(--primary-color-darker);
    font-weight: 700;
}
.resource-card h4 a:hover {
    color: var(--secondary-color-darker);
}
.resource-card p {
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* FAQ SECTION */
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background-color: var(--card-background);
    margin-bottom: var(--spacing-unit);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    overflow: hidden;
}

.faq-question {
    background-color: transparent;
    border: none;
    width: 100%;
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
    text-align: left;
    font-family: var(--font-family-headings);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color-darker);
    cursor: pointer;
    position: relative;
    transition: background-color var(--transition-speed) ease;
}
.faq-question:hover {
    background-color: #f0f0f0;
}

.faq-question::after { /* Toggle icon */
    content: '+';
    font-size: 1.5rem;
    position: absolute;
    right: calc(var(--spacing-unit) * 1.5);
    top: 50%;
    transform: translateY(-50%);
    transition: transform var(--transition-speed) ease;
    color: var(--secondary-color);
}

.faq-question[aria-expanded="true"]::after {
    content: '−'; /* Minus sign when expanded */
    transform: translateY(-50%) rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-speed) ease-out, padding var(--transition-speed) ease-out;
    background-color: var(--card-background);
}
.faq-answer p {
    padding: 0 calc(var(--spacing-unit) * 1.5) var(--spacing-unit) calc(var(--spacing-unit) * 1.5);
    margin-bottom: 0;
    font-size: 0.95rem;
    line-height: 1.7;
}
.faq-question[aria-expanded="true"] + .faq-answer {
    /* max-height will be set by JS, but give it a large potential value */
    /* padding is handled within the p tag for smoother transition */
}


/* CONTACT SECTION & FORM */
.contact-form {
    max-width: 700px;
    margin: 0 auto calc(var(--spacing-unit) * 2) auto;
    background-color: var(--card-background);
    padding: calc(var(--spacing-unit) * 2);
    border-radius: var(--border-radius-md);
    box-shadow: var(--card-shadow);
}

.form-group {
    margin-bottom: calc(var(--spacing-unit) * 1.25);
}

.form-group label {
    display: block;
    font-family: var(--font-family-body);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: calc(var(--spacing-unit) * 0.4);
    font-size: 0.9rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: calc(var(--spacing-unit) * 0.75);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family-body);
    font-size: 1rem;
    color: var(--text-color-dark);
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(var(--secondary-color-rgb, 255, 191, 0), 0.3); /* Ensure --secondary-color-rgb is defined or use direct rgba */
}
/* Fallback if --secondary-color-rgb is not set (replace with actual RGB of #FFBF00) */
:root { --secondary-color-rgb: 255, 191, 0; }


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

.contact-form button[type="submit"] {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1);
    font-size: 1.1rem;
}

.contact-details {
    text-align: center;
    margin-top: calc(var(--spacing-unit) * 2);
}
.contact-details p {
    font-size: 1rem;
    color: var(--text-color-medium);
}
.contact-details a {
    color: var(--primary-color);
}
.contact-details a:hover {
    color: var(--secondary-color-darker);
}


/* FOOTER */
.site-footer {
    background-color: var(--primary-color-darker);
    color: var(--text-color-light);
    padding: calc(var(--spacing-unit) * 3) 0;
    font-size: 0.9rem;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: calc(var(--spacing-unit) * 2);
}

.footer-nav, .footer-social, .footer-copyright {
    flex: 1;
    min-width: 200px; /* Ensure they don't get too squished */
    margin-bottom: var(--spacing-unit);
}

.site-footer h4 {
    color: var(--secondary-color);
    font-size: 1.2rem;
    margin-bottom: var(--spacing-unit);
}

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

.site-footer ul li {
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.site-footer a {
    color: #B0C4DE; /* LightSteelBlue - good contrast on dark blue/gray */
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

.site-footer a:hover {
    color: var(--text-color-light);
    text-decoration: underline;
}

.footer-copyright {
    text-align: left; /* Default alignment */
    width: 100%; /* Take full width on small screens */
    margin-top: calc(var(--spacing-unit) * 1.5);
}
.footer-copyright p {
    margin-bottom: calc(var(--spacing-unit) * 0.3);
    color: #A9A9A9; /* DarkGray - softer than white */
}

@media (min-width: 768px) {
    .footer-copyright {
        text-align: right; /* Align to right on larger screens */
        flex-basis: 100%; /* Span full width to align text right */
    }
}


/* PAGE-SPECIFIC STYLES */

/* Success Page */
.success-page-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 160px); /* Adjust 160px if header/footer height changes */
    text-align: center;
    padding: calc(var(--spacing-unit) * 2);
}
.success-page-content h1 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-unit);
}
.success-page-content p {
    font-size: 1.1rem;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}
.success-page-content .icon-success {
    font-size: 4rem; /* Example, if using an icon font */
    color: var(--secondary-color);
    margin-bottom: var(--spacing-unit);
}

/* Privacy & Terms Pages */
.static-page-content {
    padding-top: 100px; /* Header height + buffer */
    padding-bottom: calc(var(--spacing-unit) * 3);
}
.static-page-content .container {
    max-width: 800px; /* Narrower content for readability */
    background-color: var(--card-background);
    padding: calc(var(--spacing-unit) * 2.5);
    border-radius: var(--border-radius-md);
    box-shadow: var(--card-shadow);
}
.static-page-content h1 {
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    text-align: center;
}
.static-page-content h2 {
    margin-top: calc(var(--spacing-unit) * 2);
    margin-bottom: var(--spacing-unit);
    font-size: 1.6rem;
}
.static-page-content p, .static-page-content ul li {
    line-height: 1.7;
    margin-bottom: var(--spacing-unit);
}
.static-page-content ul {
    list-style-position: outside;
    padding-left: calc(var(--spacing-unit) * 1.5);
}


/* COOKIE POPUP */
/* Styles for #cookie-popup are inline in HTML for simplicity as requested,
   but if more complex, they would go here.
   Example:
#cookie-popup {
    font-size: 0.9rem;
}
#cookie-popup p {
    font-size: inherit;
    color: white;
}
#accept-cookies {
    font-size: 0.9rem;
}
*/


/* RESPONSIVE STYLES */
@media (max-width: 992px) {
    .hero-content h1 { font-size: 2.8rem; }
    .hero-content p { font-size: 1.1rem; }
    h1 { font-size: 2.5rem; }
    h2 { font-size: 1.9rem; }
}

@media (max-width: 767px) {
    /* Mobile Navigation */
    .main-nav {
        display: none; /* Hide for burger */
        position: absolute;
        top: 100%; /* Position below header */
        left: 0;
        width: 100%;
        background-color: var(--card-background);
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        padding: var(--spacing-unit) 0;
    }
    .main-nav.active {
        display: block;
    }
    .main-nav ul {
        flex-direction: column;
        align-items: center;
    }
    .main-nav li {
        margin: 0;
        width: 100%;
        text-align: center;
    }
    .main-nav a {
        display: block;
        padding: calc(var(--spacing-unit) * 0.8) var(--spacing-unit);
        border-bottom: 1px solid var(--border-color);
        width: 100%;
    }
    .main-nav li:last-child a {
        border-bottom: none;
    }
    .main-nav a::after { display: none; } /* Remove underline effect on mobile nav items */

    .burger-menu {
        display: block; /* Show burger icon */
    }
    /* Burger icon animation when active */
    .burger-menu.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .burger-menu.active span:nth-child(2) {
        opacity: 0;
    }
    .burger-menu.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }


    /* Hero section adjustments */
    #hero { min-height: 60vh; }
    .hero-content h1 { font-size: 2.2rem; }
    .hero-content p { font-size: 1rem; }

    /* Timeline adjustments for mobile */
    .timeline::before {
        left: 10px; /* Move line to the left */
        transform: translateX(0);
    }
    .timeline-item,
    .timeline-item:nth-child(even) { /* Stack all items to the right of the line */
        width: 100%;
        left: 0;
        padding-left: calc(var(--spacing-unit) * 2.5 + 10px); /* Space from new line position */
        padding-right: 0;
    }
    .timeline-icon,
    .timeline-item:nth-child(even) .timeline-icon {
        left: 0px; /* Align icon with the line */
    }

    .columns {
        margin-left: 0;
        margin-right: 0;
    }
    .column { /* Ensure columns stack properly and take full width */
        flex-basis: 100% !important;
        max-width: 100% !important;
        padding-left: 0;
        padding-right: 0;
    }
     .columns.is-multiline .column {
        margin-bottom: calc(var(--spacing-unit) * 1.5);
    }

    .footer-container {
        flex-direction: column;
        text-align: center;
    }
    .footer-nav, .footer-social, .footer-copyright {
        min-width: 100%;
        text-align: center;
    }
    .footer-copyright {
        text-align: center;
    }
}

@media (max-width: 480px) {
    body { font-size: 0.95rem; }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
    .hero-content h1 { font-size: 1.8rem; }
    .hero-content p { font-size: 0.9rem; }
    .cta-button, button[type="submit"] { font-size: 0.9rem; padding: calc(var(--spacing-unit) * 0.7) calc(var(--spacing-unit) * 1.5); }
    .container {
        padding-left: calc(var(--spacing-unit) * 0.75);
        padding-right: calc(var(--spacing-unit) * 0.75);
    }
}

/* SCROLLREVEAL & ANIMATE.CSS SUPPORT */
/* Initial state for ScrollReveal items (optional, ScrollReveal handles most) */
.sr-item {
    visibility: hidden; /* ScrollReveal will change this */
}

/* Add any custom drawn-like animations here if needed */
/* Example: a subtle wobble on hover for a hand-drawn feel */
.cta-button:hover, .card:hover {
    /* animation: slightWobble 0.5s ease-in-out; */
}

@keyframes slightWobble {
    0%, 100% { transform: translateY(-2px) rotate(0deg); }
    25% { transform: translateY(-2px) rotate(-0.5deg); }
    75% { transform: translateY(-2px) rotate(0.5deg); }
}