/* style.css */

/* -------------------------------------------------------------------------
   1. CSS Variables
   ------------------------------------------------------------------------- */
:root {
    /* Color Scheme: Neutral with Creative Accents */
    --color-background: #fdfdfd; /* Very light neutral */
    --color-background-alt: #f1f3f5; /* Slightly different neutral for alternate sections */
    --color-text-primary: #343a40; /* Dark grey for body text */
    --color-text-secondary: #6c757d; /* Lighter grey for subtitles, meta text */
    --color-headings: #2c3e50; /* Dark, slightly desaturated blue for headings */

    --color-primary: #3498db; /* Creative Blue */
    --color-primary-dark: #2980b9;
    --color-primary-light: #5dade2;

    --color-accent: #e74c3c; /* Creative Red/Orange Accent */
    --color-accent-dark: #c0392b;

    --color-success: #2ecc71;
    --color-warning: #f39c12;
    --color-error: #e74c3c;

    --color-white: #ffffff;
    --color-black: #000000;
    --color-border: #dee2e6; /* Light grey for borders */
    --color-border-darker: #ced4da;

    --gradient-subtle: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
    --hero-overlay-color: rgba(0, 0, 0, 0.55); /* Darker overlay for hero */

    /* Typography */
    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Merriweather', serif;
    --font-base-size: 16px;
    --line-height-base: 1.7;

    /* Spacing & Layout */
    --spacing-unit: 8px;
    --container-max-width: 1200px;
    --container-padding: calc(var(--spacing-unit) * 2); /* 16px */
    --section-padding-y: calc(var(--spacing-unit) * 10); /* 80px */
    --header-height: 80px; /* Adjust as needed */

    /* Borders & Shadows */
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --box-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);
    --box-shadow-medium: 0 5px 15px rgba(0, 0, 0, 0.12);

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

/* -------------------------------------------------------------------------
   2. Global Resets & Base Styles
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-base-size);
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height); /* For fixed header anchor links */
}

body {
    font-family: var(--font-secondary);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.main-container {
    overflow-x: hidden; /* Ensures no horizontal scroll from asymmetric elements */
}

/* -------------------------------------------------------------------------
   3. Typography
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--color-headings);
    margin-bottom: calc(var(--spacing-unit) * 2.5); /* 20px */
    line-height: 1.3;
    font-weight: 700;
}

h1, .hero-title {
    font-size: clamp(2.2rem, 5vw, 3.5rem); /* Responsive font size */
    margin-bottom: calc(var(--spacing-unit) * 3); /* 24px */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

h2, .section-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 6); /* 48px */
    position: relative;
    padding-bottom: calc(var(--spacing-unit) * 1.5);
}

/* "Drawn" underline effect for section titles */
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: var(--border-radius-small);
    /* For a more "drawn" feel, consider SVG or multiple ::after/::before elements */
    /* animation: draw-line 0.5s ease-out forwards; */
}

h3, .subsection-title {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.subsection-title-small {
    font-family: var(--font-primary);
    color: var(--color-headings);
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    margin-bottom: var(--spacing-unit);
    font-weight: 600;
}

p {
    margin-bottom: calc(var(--spacing-unit) * 2); /* 16px */
    color: var(--color-text-primary);
}

p.section-intro {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(var(--spacing-unit) * 5); /* 40px */
}

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

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

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

li {
    margin-bottom: var(--spacing-unit);
}

blockquote {
    font-style: italic;
    color: var(--color-text-secondary);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    margin: calc(var(--spacing-unit) * 2) 0;
    border-left: 4px solid var(--color-primary-light);
    background-color: var(--color-background-alt);
    border-radius: var(--border-radius-small);
}

blockquote footer {
    margin-top: var(--spacing-unit);
    font-style: normal;
    font-weight: bold;
    color: var(--color-text-primary);
    font-size: 0.9em;
}

strong {
    font-weight: 700;
}

.text-content { /* For privacy, terms pages */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.text-content h1.section-title {
    text-align: left;
    margin-bottom: calc(var(--spacing-unit) * 4);
}
.text-content h1.section-title::after {
    left: 0;
    transform: translateX(0);
}
.text-content h2.subsection-title {
    margin-top: calc(var(--spacing-unit) * 4);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

/* -------------------------------------------------------------------------
   4. Layout & Helpers
   ------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

.section-padding {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

.colored-section {
    background-color: var(--color-background-alt);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

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

.column {
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    padding: var(--spacing-unit);
}

.column.is-full { flex: none; width: 100%; }
.column.is-half { flex: none; width: 50%; }
.column.is-one-third { flex: none; width: 33.3333%; }
.column.is-two-thirds { flex: none; width: 66.6667%; }
.column.is-one-quarter { flex: none; width: 25%; }
.column.is-three-quarters { flex: none; width: 75%; }

/* Asymmetric balance helper for images */
.image-column.asymmetric-push-right {
    position: relative;
    right: -5%; /* Example push */
}
.image-column.asymmetric-pull-left {
    position: relative;
    left: -5%;
}

.content-block {
    padding: var(--spacing-unit) 0;
}

.image-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-light);
}
.image-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}
.image-container:hover img {
    transform: scale(1.05);
}

/* Utility for small grey text often used for placeholders */
p_text_small_grey {
    display: block;
    font-size: 0.85em;
    color: var(--color-text-secondary);
    margin-top: var(--spacing-unit);
    text-align: center;
}

/* -------------------------------------------------------------------------
   5. Buttons & Interactive Elements
   ------------------------------------------------------------------------- */
.button, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--border-radius-medium);
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3.5); /* 12px 28px */
    transition: all var(--transition-normal);
    white-space: nowrap;
    user-select: none;
    line-height: 1.5; /* Ensure text is vertically centered */
}

.button.primary-button {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.button.primary-button:hover, .button.primary-button:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.button.secondary-button {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.button.secondary-button:hover, .button.secondary-button:focus {
    background-color: var(--color-primary-light);
    color: var(--color-white);
    border-color: var(--color-primary-light);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.button.is-fullwidth {
    width: 100%;
    display: block;
}

/* "Read More" link style */
.read-more-link {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
    position: relative;
    padding-bottom: 3px;
    transition: color var(--transition-fast);
}
.read-more-link::after {
    content: '→';
    margin-left: 6px;
    transition: transform var(--transition-fast);
    display: inline-block;
}
.read-more-link:hover, .read-more-link:focus {
    color: var(--color-accent-dark);
    text-decoration: none;
}
.read-more-link:hover::after {
    transform: translateX(4px);
}


/* -------------------------------------------------------------------------
   6. Header & Navigation
   ------------------------------------------------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.9); /* Slight glassmorphism */
    backdrop-filter: blur(8px);
    box-shadow: var(--box-shadow-light);
    height: var(--header-height);
    transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

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

.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); /* 24px */
}
.main-navigation .nav-links a {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
    padding: calc(var(--spacing-unit) * 0.5) 0;
    position: relative;
    transition: color var(--transition-fast);
}
.main-navigation .nav-links a::after { /* Underline effect */
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width var(--transition-normal);
}
.main-navigation .nav-links a:hover,
.main-navigation .nav-links a.active,
.main-navigation .nav-links a:focus {
    color: var(--color-primary);
}
.main-navigation .nav-links a:hover::after,
.main-navigation .nav-links a.active::after,
.main-navigation .nav-links a:focus::after {
    width: 100%;
}

.menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-unit);
}
.hamburger-icon {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-headings);
    position: relative;
    transition: background-color 0s 0.2s; /* Delay disappearance of middle bar */
}
.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-headings);
    transition: transform var(--transition-normal), top var(--transition-normal) 0.2s;
}
.hamburger-icon::before {
    top: -7px;
}
.hamburger-icon::after {
    top: 7px;
}
.menu-toggle[aria-expanded="true"] .hamburger-icon {
    background-color: transparent; /* Middle bar disappears */
}
.menu-toggle[aria-expanded="true"] .hamburger-icon::before {
    top: 0;
    transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .hamburger-icon::after {
    top: 0;
    transform: rotate(-45deg);
}


/* -------------------------------------------------------------------------
   7. Hero Section
   ------------------------------------------------------------------------- */
.hero-section {
    position: relative;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(100vh - var(--header-height)); /* Full viewport height minus header */
    padding-top: var(--header-height); /* Offset for fixed header */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* background-attachment: fixed; /* Simple parallax - can be jerky, JS is better */
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--hero-overlay-color);
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}
.hero-title {
    color: var(--color-white); /* Ensured white text */
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5); /* Enhanced shadow for readability */
}
.hero-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    color: var(--color-white); /* Ensured white text */
    margin-bottom: calc(var(--spacing-unit) * 4); /* 32px */
    line-height: 1.8;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
.hero-content .button.primary-button {
    font-size: 1.1rem;
    padding: calc(var(--spacing-unit) * 1.8) calc(var(--spacing-unit) * 4.5); /* 14.4px 36px */
}

/* -------------------------------------------------------------------------
   8. Cards (General Styling)
   ------------------------------------------------------------------------- */
.card, .card-like {
    background-color: var(--color-white);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-medium);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    overflow: hidden; /* Important for child elements like images */
    display: flex;
    flex-direction: column;
    height: 100%; /* Make cards in a row equal height */
}
.card:hover, .card-like:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.card-image { /* Container for the image within a card */
    width: 100%;
    /* Fixed height for image containers in cards for consistency */
    /* Adjust height per card type if necessary, e.g., team vs. case study */
    height: 250px; /* Example fixed height, adjust as needed */
    overflow: hidden;
    position: relative; /* For potential overlays */
    display: flex; /* Centers the image if it's smaller, works with object-fit */
    align-items: center;
    justify-content: center;
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area without distortion */
    display: block; /* Removes extra space below image */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card:hover .card-image img {
    transform: scale(1.1);
}

.card-content {
    padding: calc(var(--spacing-unit) * 3); /* 24px */
    text-align: center; /* Center text content in cards */
    flex-grow: 1; /* Allows content to take remaining space if card has fixed height */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* If content needs to spread vertically */
}
.card-content h3 { /* Titles within cards */
    margin-top: 0;
    font-size: 1.3rem;
    color: var(--color-headings);
}
.card-content p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-unit) * 1.5;
}


/* -------------------------------------------------------------------------
   9. Specific Section Styling
   ------------------------------------------------------------------------- */

/* --- About Us Section --- */
.about-us-section .features-columns {
    align-items: center; /* Vertically align columns if heights differ */
}
.about-us-section .image-column {
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-us-section .creative-image-wrapper img {
    border-radius: var(--border-radius-medium);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* --- Methodology Section --- */
.methodology-step.card-like {
    padding: calc(var(--spacing-unit) * 3);
    text-align: left; /* Override general card text-align if needed */
}
.methodology-step.card-like h3 {
    color: var(--color-primary);
    text-align: center; /* Center title of step */
}
.methodology-step.card-like p {
    text-align: justify;
}

/* --- Portfolio/Cases Section --- */
.case-study-card .case-title {
    color: var(--color-accent);
}
.benefit-graph-placeholder {
    width: 100%;
    height: 100px; /* Adjust as needed */
    background-color: var(--color-background-alt);
    border: 1px dashed var(--color-border-darker);
    border-radius: var(--border-radius-small);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto; /* Pushes to bottom */
    padding-top: calc(var(--spacing-unit) * 1.5);
}

/* --- Team Section --- */
.team-member-card .card-image {
    height: 300px; /* Specific height for team member photos */
}
.team-member-card .card-image img {
    border-radius: 50%; /* Circular images for team members */
    width: 180px; /* Adjust for desired size */
    height: 180px;
    object-fit: cover;
    margin: var(--spacing-unit) * 2 auto; /* Spacing around image */
    border: 4px solid var(--color-white);
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
.team-member-card .member-name {
    margin-top: var(--spacing-unit);
    font-size: 1.4rem;
}
.team-member-card .member-role {
    font-family: var(--font-primary);
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: var(--spacing-unit);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.team-member-card .member-bio {
    font-size: 0.9rem;
}

/* --- Customer Stories/Testimonials --- */
.testimonial-card {
    background-color: var(--color-background-alt); /* Different background for testimonials */
    padding: calc(var(--spacing-unit) * 2.5);
    box-shadow: var(--box-shadow-light);
}
.testimonial-card blockquote {
    border-left-color: var(--color-accent);
    background-color: var(--color-white); /* Inner white background */
    margin: 0;
}
.testimonial-card blockquote footer {
    color: var(--color-accent);
}

/* --- External Resources Section --- */
.resource-card {
    background-color: var(--color-white);
}
.resource-card .resource-title a {
    font-size: 1.2rem;
    color: var(--color-headings);
    font-weight: 600;
}
.resource-card .resource-title a:hover {
    color: var(--color-primary);
}
.resource-card .resource-description {
    font-size: 0.9rem;
    line-height: 1.6;
}

/* --- Contact Section --- */
.contact-form .field {
    margin-bottom: calc(var(--spacing-unit) * 2.5); /* 20px */
}
.contact-form .label {
    display: block;
    font-family: var(--font-primary);
    font-weight: 600;
    margin-bottom: var(--spacing-unit);
    color: var(--color-headings);
}
.contact-form .input,
.contact-form .textarea {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5); /* 12px */
    border: 1px solid var(--color-border-darker);
    border-radius: var(--border-radius-small);
    font-family: var(--font-secondary);
    font-size: 1rem;
    color: var(--color-text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.contact-form .input:focus,
.contact-form .textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.2); /* Use RGB values for primary color if it's hex */
}
.contact-form .textarea {
    min-height: 150px;
    resize: vertical;
}
.contact-form .checkbox-label {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}
.contact-form .checkbox-label input[type="checkbox"] {
    margin-right: var(--spacing-unit);
    accent-color: var(--color-primary); /* Modern checkbox color */
}
.contact-details.card-like {
    padding: calc(var(--spacing-unit) * 3);
    text-align: left;
}
.contact-details p {
    margin-bottom: var(--spacing-unit) * 1.5;
}
.map-placeholder img {
    border-radius: var(--border-radius-small);
    border: 1px solid var(--color-border);
}

/* Carousel Controls (General) */
.carousel-controls {
    text-align: center;
    margin-top: calc(var(--spacing-unit) * 3);
}
.carousel-controls button {
    background-color: var(--color-primary-light);
    color: var(--color-white);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    margin: 0 var(--spacing-unit);
    transition: background-color var(--transition-fast);
}
.carousel-controls button:hover {
    background-color: var(--color-primary);
}


/* -------------------------------------------------------------------------
   10. Footer
   ------------------------------------------------------------------------- */
.site-footer {
    background-color: var(--color-headings); /* Dark background for footer */
    color: var(--color-background-alt); /* Light text on dark background */
    padding-top: calc(var(--spacing-unit) * 6);
    padding-bottom: calc(var(--spacing-unit) * 6);
}
.site-footer .footer-title {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    color: var(--color-white);
    margin-bottom: calc(var(--spacing-unit) * 2);
    font-weight: 600;
}
.site-footer p {
    color: #bdc3c7; /* Lighter grey for footer text */
    font-size: 0.95rem;
    margin-bottom: var(--spacing-unit);
}
.site-footer .footer-links {
    list-style: none;
    padding-left: 0;
}
.site-footer .footer-links li {
    margin-bottom: calc(var(--spacing-unit) * 0.75);
}
.site-footer .footer-links a {
    color: #ecf0f1; /* Even lighter for links */
    text-decoration: none;
    transition: color var(--transition-fast);
}
.site-footer .footer-links a:hover {
    color: var(--color-primary-light);
    text-decoration: underline;
}
.site-footer .social-title {
    margin-top: calc(var(--spacing-unit) * 3);
}
.site-footer .footer-social-links { /* Text-based social links */
    list-style: none;
    padding-left: 0;
    display: flex; /* Can arrange horizontally if desired */
    flex-wrap: wrap; /* Allow wrapping */
}
.site-footer .footer-social-links li {
    margin-right: calc(var(--spacing-unit) * 2); /* Space between links */
    margin-bottom: var(--spacing-unit);
}
.site-footer .footer-social-links a {
    color: #ecf0f1;
    font-weight: 500;
}
.site-footer .footer-social-links a:hover {
    color: var(--color-primary-light);
}

.footer-contact-info {
    border-top: 1px solid #7f8c8d; /* Separator line */
    margin-top: calc(var(--spacing-unit) * 4);
    padding-top: calc(var(--spacing-unit) * 3);
    text-align: center;
    font-size: 0.9rem;
}
.footer-contact-info p {
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

/* -------------------------------------------------------------------------
   11. Specific Page Styles
   ------------------------------------------------------------------------- */

/* Privacy & Terms pages content padding */
.page-content {
    padding-top: calc(var(--header-height) + var(--section-padding-y) / 2); /* Add header height to top padding */
}

/* Success Page Styling */
.success-page {
    min-height: calc(100vh - var(--header-height) - var(--footer-height, 200px)); /* Adjust footer-height approx. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: var(--header-height);
}
.success-page .success-icon img {
    margin-bottom: calc(var(--spacing-unit) * 3);
    width: 100px; /* Adjust as needed */
    height: 100px;
}
.success-page .section-title {
    color: var(--color-success);
}
.success-page .section-title::after {
    background-color: var(--color-success);
}

/* Cookie Popup (minimal styling as per prompt) */
/* HTML already has inline styles, this is just in case */
#cookie-popup {
    font-family: var(--font-secondary); /* Ensure consistent font */
}
#cookie-popup a {
    text-decoration: underline;
}
#accept-cookie-button {
    font-family: var(--font-primary);
}


/* -------------------------------------------------------------------------
   12. Responsiveness (Media Queries)
   ------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .column.is-half,
    .column.is-one-third,
    .column.is-two-thirds {
        width: 50%; /* Two columns on tablets for some layouts */
    }
    .contact-form-column { width: 100%; margin-bottom: var(--spacing-unit) * 4; }
    .contact-info-column { width: 100%; }
}

@media (max-width: 768px) {
    html {
        font-size: calc(var(--font-base-size) * 0.95); /* Slightly smaller base font */
    }
    .section-padding {
        padding-top: calc(var(--section-padding-y) * 0.8);
        padding-bottom: calc(var(--section-padding-y) * 0.8);
    }
    .container {
        padding-left: calc(var(--container-padding) * 0.75);
        padding-right: calc(var(--container-padding) * 0.75);
    }

    /* Columns stack on mobile */
    .column,
    .column.is-half,
    .column.is-one-third,
    .column.is-two-thirds,
    .column.is-one-quarter,
    .column.is-three-quarters {
        width: 100%;
        flex: none;
    }
    .features-columns { /* Reverse order for image first on mobile if desired */
        /* flex-direction: column-reverse; */
    }
    .about-us-section .image-column {
        margin-top: calc(var(--spacing-unit) * 3);
    }

    /* Mobile Navigation */
    .menu-toggle {
        display: block; /* Show burger menu */
        z-index: 1001; /* Above nav links */
    }
    .main-navigation .nav-links {
        display: none; /* Hide by default */
        position: absolute;
        top: var(--header-height);
        left: 0;
        width: 100%;
        flex-direction: column;
        background-color: var(--color-white);
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        padding: var(--spacing-unit) 0;
        border-top: 1px solid var(--color-border);
    }
    .main-navigation .nav-links.is-active { /* JS will toggle this class */
        display: flex;
    }
    .main-navigation .nav-links li {
        margin-left: 0;
        width: 100%;
    }
    .main-navigation .nav-links a {
        display: block;
        padding: calc(var(--spacing-unit) * 1.5) var(--container-padding);
        width: 100%;
        border-bottom: 1px solid var(--color-border-light);
    }
    .main-navigation .nav-links a::after {
        display: none; /* No underline effect on mobile nav items */
    }
    .main-navigation .nav-links li:last-child a {
        border-bottom: none;
    }

    .hero-section {
        min-height: 80vh; /* Adjust for mobile */
    }
    .hero-title { font-size: 2rem; }
    .hero-subtitle { font-size: 1rem; }

    .site-footer .columns > .column {
        text-align: center;
        margin-bottom: calc(var(--spacing-unit) * 3);
    }
    .site-footer .footer-social-links {
        justify-content: center;
    }
    .site-footer .footer-social-links li {
        margin-right: var(--spacing-unit);
        margin-left: var(--spacing-unit);
    }
}

/* -------------------------------------------------------------------------
   13. Animations (Placeholders for Motion One enhancements or simple CSS anims)
   ------------------------------------------------------------------------- */

/* Example of a simple fade-in, could be triggered by JS with Motion One */
.fade-in-element {
    opacity: 0;
    transform: translateY(20px);
    /* transition: opacity 0.6s ease-out, transform 0.6s ease-out; */
}
/* .fade-in-element.is-visible {
    opacity: 1;
    transform: translateY(0);
} */

/* "Drawn" line animation for section titles - example */
/* @keyframes draw-line {
    from { width: 0; }
    to { width: 80px; }
} */

/* Parallax effect placeholders - JS will handle these attributes */
[data-parallax-bg], [data-parallax-item] {
    /* Base styles, JS will manipulate transform or background-position */
}