:root {
    /* Colors */
    --color-primary: #2B69A1;
    /* Official Logo Blue */
    --color-hero-blue: #2B69A1;
    /* Synced with primary */

    --color-accent: #2B69A1;
    /* Unify Accent with Brand Blue */
    --color-accent-hover: #20507a;
    /* Darker Blue for hover */

    --color-text-main: #2C3E50;
    /* Brand Dark Grey */
    --color-text-light: #64748B;
    --color-background-light: #F8FAFC;
    --color-white: #ffffff;
    --color-cta-orange: #F39C12;
    /* Brand CTA Orange - Used for all yellow/orange elements */

    /* Fonts */
    --font-heading: 'Montserrat',
        sans-serif;
    --font-serif: 'Playfair Display',
        serif;
    --font-body: 'Roboto',
        sans-serif;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);

    --color-success: #22c55e;
}

/* New Project Card Style */
.project-card-new {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.project-card-new:hover {
    box-shadow: var(--shadow-xl);
}

.project-image-wrapper {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.project-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.project-card-new:hover .project-image-wrapper img {
    transform: scale(1.05);
}

.project-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: var(--color-cta-orange);
    /* Brand Orange */
    color: #111827;
    /* Dark text */
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 2px;
}

.project-content-new {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.project-meta {
    font-size: 0.75rem;
    color: #9CA3AF;
    /* Gray 400 */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.project-title-new {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: #000000;
    /* User requested Black */
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.project-desc-new {
    color: #4B5563;
    /* Gray 600 */
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    flex-grow: 1;
    /* Pushes button down */
}

.project-link-new {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    /* Brand Blue */
    font-weight: 700;
    font-size: 0.9rem;
    gap: 0.5rem;
    transition: gap 0.3s ease;
}

.project-link-new:hover {
    gap: 0.75rem;
    color: var(--color-accent);
}

/* Reset key elements */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--color-text-main);
    line-height: 1.6;
    background-color: var(--color-white);
    padding-top: 80px;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    color: var(--color-text-main);
    /* Brand Dark Grey */
    font-weight: 700;
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
}

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

/* Utility Classes */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.section-padding {
    padding: var(--spacing-lg) 0;
}

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

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    /* Slightly rounded, solid feel */
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-primary {
    background-color: var(--color-cta-orange);
    /* Brand Orange */
    color: #1e293b;
    /* Dark text for contrast */
    font-weight: 700;
}

.btn-primary:hover {
    background-color: #d68910;
    /* Darker Orange on hover - derived from #F39C12 */
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.btn-outline-white {
    background-color: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-white);
}

.btn-outline-white:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--color-white);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.full-width {
    width: 100%;
}

/* Header */
header {
    background-color: var(--color-primary);
    /* box-shadow: var(--shadow-sm); Remove global, apply only to mobile if needed or managed by media query */
    box-shadow: none;
    /* User requested removal on desktop. Let's start with none globally as it's cleaner, or specific. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: none;
    transition: transform 0.3s ease-in-out;
}

/* Restore shadow for mobile if needed, or just leave it clean */
@media (max-width: 968px) {
    header {
        box-shadow: var(--shadow-sm);
    }
}

.header-hidden {
    transform: translateY(-100%);
}

.header-hidden .logo-tower {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
    /* Fast fade out so it doesn't look like it's dragging behind */
}

.nav-wrapper {
    display: flex;
    flex-direction: row;
    /* Horizontal layout */
    justify-content: space-between;
    align-items: center;
    height: 80px;
    /* Reduced height from 100px */
    padding: 0 2rem;
}

/* Intermediate Desktop Breakpoint to prevent overflow */
@media (min-width: 1051px) and (max-width: 1300px) {
    .nav-wrapper {
        padding: 0 1rem;
    }

    .logo-img {
        height: 50px;
        /* Smaller logo */
    }

    nav ul {
        gap: 1rem;
        /* Tighter spacing */
    }

    nav a {
        font-size: 0.95rem;
        /* Slightly smaller text */
    }

    .btn-primary {
        padding: 0.5rem 1rem;
        /* Compact button */
    }
}

/* Split Logo Styles */
.logo-container {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.logo-link {
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
    text-decoration: none;
}

.logo-tower {
    position: absolute;
    top: 0;
    /* Align with top of header */
    left: 0;
    height: 100px;
    /* 100px height with 80px header = 20px overlap (less than before) */
    width: auto;
    z-index: 1001;
    /* Ensure it overlaps */
}

.logo-text {
    height: 55px;
    /* Increased from 40px */
    width: auto;
    position: relative;
    z-index: 1002;
    margin-left: 55px;
    /* Adjusted cushion for tower (tower is narrower now with less height?) 
       Actually with 100px height, width will be consistently smaller. 
       Let's try 55px margin.
    */
}

.logo-img {
    height: 90px;
    /* Balanced Logo Size */
    width: auto;
}

.accent-text {
    color: var(--color-cta-orange);
}

nav ul {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

nav a {
    font-weight: 500;
    color: var(--color-white);
}

nav a:hover:not(.btn) {
    color: rgba(255, 255, 255, 0.8);
    /* Slight opacity for hover effect on blue bg */
    text-decoration: underline;
}

/* Hide Mobile Elements on Desktop by Default */
.mobile-nav-header,
.mobile-toggle,
.mobile-call-btn {
    display: none;
}

/* Hero Section */


/* Ensure headings in hero are white too */
.hero .hero-content h1 {
    color: white;
}

.hero .hero-content p {
    color: #e2e8f0;
    /* Slightly off-white for body text */
}

@media (max-width: 768px) {
    .nav-wrapper {
        flex-direction: column;
        height: auto;
        padding: 1rem 0;
        gap: 1rem;
    }

    .logo-img {
        height: 70px;
    }

    nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }



    .form-footer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .quote-form-card .btn-primary {
        width: auto !important;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .team-content .btn {
        width: fit-content !important;
    }
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
}

.hero-content p {
    font-size: 1.125rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
    max-width: 500px;
}

.trust-badges span {
    display: inline-block;
    background: #e2e8f0;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-right: 0.5rem;
    color: var(--color-primary);
}

/* Hero Form & Blob */
.hero-form-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
}

.hero-blob-bg {
    position: absolute;
    width: 140%;
    height: 140%;
    background-color: rgba(219, 234, 254, 0.2);
    /* Semi-transparent light blue */
    top: -20%;
    right: -20%;
    z-index: -1;
    border-radius: 46% 54% 39% 61% / 55% 42% 58% 45%;
    animation: blob-float 10s ease-in-out infinite;
}

@keyframes blob-float {

    0%,
    100% {
        border-radius: 46% 54% 39% 61% / 55% 42% 58% 45%;
    }

    50% {
        border-radius: 56% 44% 49% 51% / 45% 52% 48% 55%;
    }
}

.quote-form-card {
    background: var(--color-white);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 400px;
}

.quote-form-card h3 {
    margin-bottom: 1.5rem;
    text-align: center;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-cta-orange);
    box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.1);
}

/* Services */
.section-title {
    text-align: center;
    font-size: 3rem;
    margin-bottom: var(--spacing-lg);
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.services-grid-large {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .services-grid-large {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .services-grid-large {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Service Card */
.service-card-large {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    /* Align content to bottom */
    text-align: center;
    min-height: 250px;
    padding: 0;
    /* Remove padding so strip touches edges */
    overflow: hidden;
    border-radius: 8px;
    border: none;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}

.service-card-large:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

@media (max-width: 600px) {
    .service-card-large {
        min-height: 200px;
    }
}

/* Image Background Wrapper */
.service-icon-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    z-index: 0;
}

.service-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.service-card-large:hover .service-icon-img {
    transform: scale(1.1);
}

/* Light Grey Overlay - "Gloed" Full Cover */
.service-icon-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Darker, transparent overlay (veil) - slightly less transparent per user request */
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    transition: background 0.3s ease;
}

/* Slightly less opaque on hover to reveal more image, or keep consistent */
.service-card-large:hover .service-icon-wrapper::after {
    background: rgba(0, 0, 0, 0.2);
}

.about-image img {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* Homepage USPs */
.homepage-usps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    width: fit-content;
}

.usp-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--color-text-main);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    color: #fff;
    width: 100%;
}

.usp-item .icon-box {
    color: var(--color-success);
    font-size: 1.5rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.usp-item h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

/* Content Strip at Bottom */
.service-content-strip {
    width: 100%;
    background-color: #D3E4F5;
    /* Light Blue Corporate Color */
    padding: 0.75rem 1rem;
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Content on top */
.service-card-large h3 {
    color: var(--color-text-main);
    /* Dark Text */
    margin-bottom: 0.5rem;
    /* Reduced margin */
    font-size: 1.1rem;
    /* Smaller font size (was 1.25rem) */
    font-weight: 700;
    text-shadow: none;
    /* Removed shadow */
}

.service-card-large p {
    color: var(--color-text-main);
    margin-bottom: 1rem;
    text-shadow: none;
}

/* Read More - Project Style Link */
.service-card-large .read-more {
    color: var(--color-primary);
    /* Blue Brand Color */
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-weight: 700;
    font-size: 0.9rem;
    /* Smaller */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.3s ease;
}

.service-card-large .read-more:hover {
    background: transparent;
    color: var(--color-accent);
    gap: 0.75rem;
    transform: none;
}


/* Values Section */
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}

.values-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 3rem;
}

.value-card-horizontal {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    text-align: left;
    color: var(--color-text-main);
    width: 100%;
    margin-bottom: 1.5rem;
}

.value-card-horizontal h3 {
    margin-bottom: 0.25rem;
    font-size: 1.1rem;
    margin-top: 0;
    color: var(--color-text-main);
    font-weight: 600;
}

.value-card-horizontal p {
    margin-bottom: 0;
    color: var(--color-text-light);
    line-height: 1.6;
}

.value-card-horizontal .icon-box {
    margin-top: 0.25rem;
    /* Align with text top */
    font-size: 1.75rem;
    color: var(--color-primary);
    flex-shrink: 0;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    background: transparent;
    box-shadow: none;
}



.value-card {
    background: var(--color-white);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.icon-box {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.team-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: flex-start;
}

.team-content h2 {
    margin-bottom: 1.5rem;
}

.team-content h3 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.team-content p {
    margin-bottom: 1.5rem;
}

.team-image-wrapper {
    display: flex;
    justify-content: center;
}

.blob-image-placeholder {
    width: 300px;
    height: 300px;
    background-color: #cbd5e1;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;

    /* Blob shape */
    border-radius: 64% 36% 27% 73% / 55% 58% 42% 45%;
    overflow: hidden;
    position: relative;
}

/* If using a real image, the img tag inside would take this shape via overflow:hidden or clip-path */

/* CTA Section */
.cta-section {
    background-color: #D3E4F5;
    /* Solid Light Blue */
    color: var(--color-text-main);
    padding: 4rem 0 0 0;
    /* Removed bottom padding so image touches edge */
    position: relative;
    overflow: hidden;
    /* Clean bounds */
}

/* Flex Container */
.cta-content {
    display: flex;
    align-items: flex-end;
    /* Align items to bottom */
    justify-content: space-between;
    gap: 2rem;
    position: relative;
    z-index: 2;
}

/* Image Wrapper */
.cta-image-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.cta-person-img {
    position: static;
    /* Remove absolute */
    max-width: 100%;
    height: auto;
    max-height: 400px;
    /* Reasonable limit */
    object-fit: contain;
}

/* Text Wrapper */
.cta-text-wrapper {
    flex: 1;
    text-align: center;
    /* Center text */
    padding-left: 0;
    /* Removed padding-left since it's centered (or maybe keep it if it overlaps?) -> Let's check responsiveness. Better to remove or reduce if centralized */
    /* Actually, keep padding if it was for spacing from image. But center text. */
    padding-left: 2rem;
    padding-bottom: 4rem;
    align-self: center;
}

.cta-text-wrapper h2 {
    color: var(--color-text-main);
    margin-bottom: 1rem;
    font-size: 2rem;
}

.cta-text-wrapper p {
    margin-bottom: 2rem;
    color: var(--color-text-main);
    font-size: 1.1rem;
    max-width: 600px;
    /* Limit width for readability when centered */
    margin-left: auto;
    margin-right: auto;
}

.location-badge {
    margin-top: 2rem;
    display: inline-flex;
    /* Back to inline-flex for side-by-side */
    align-items: center;
    gap: 0.8rem;
    color: var(--color-text-light);
    font-size: 1rem;
    font-weight: 500;
    margin-left: 1.5rem;
    /* Add spacing between button and badge */
}


/* Responsive adjustments */
@media (max-width: 1200px) {
    .cta-content {
        flex-direction: column-reverse;
        /* Image on bottom */
        text-align: center;
        gap: 0;
        /* Remove gap so image sits right below text area (padding handles spacing) */
        align-items: center;
    }

    .cta-text-wrapper {
        padding-left: 0;
        padding-bottom: 2rem;
        text-align: center;
    }

    .cta-person-img {
        max-height: 300px;
        display: block;
    }

    .location-badge {
        justify-content: center;
        width: 100%;
        margin-left: 0;
    }
}

/* Footer */
footer {
    background-color: #2C3E50;
    /* Brand Dark Grey */
    color: #94a3b8;
    padding: 3rem 0;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.footer-col h4 {
    color: var(--color-white);
    margin-bottom: 1rem;
}

.footer-logo {
    max-width: 200px;
    height: auto;
    margin-bottom: 1rem;
    display: block;
}

/* Slider Styles */
/* Slider Styles */
.hero-slider-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 800px;
    /* Constrain width again to show a card */
    margin: 0 auto;
}

.hero-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.hero-slide {
    display: block;
    min-width: 100%;
    padding: 1rem;
    /* Restore padding so shadows are visible */
}

/* Carousel Grid (2 items per slide) */
.carousel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    width: 100%;
    height: 100%;
}

.review-text {
    font-style: italic;
    color: var(--color-text-main);
    margin-bottom: 0.5rem;
}

.review-author {
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .carousel-grid {
        grid-template-columns: 1fr;
        /* Stack on mobile */
    }
}

.h-100 {
    height: 100%;
}

/* Lightbox Styles */
.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    /* Increased to ensure it's on top of header (1000) */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    /* Removed opacity transition to prevent sticking */
}

.lightbox-modal.show {
    display: flex !important;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
    transition: color 0.3s;
}

.lightbox-close:hover {
    color: var(--color-accent);
}

.lightbox-prev,
.lightbox-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 30px;
    transition: 0.3s;
    border-radius: 0 3px 3px 0;
    user-select: none;
    z-index: 1001;
}

.lightbox-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.lightbox-prev {
    left: 0;
    border-radius: 3px 0 0 3px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.review-card {
    background: white;
    padding: 0;
    /* Remove padding here, use inside */
    border-radius: 0;
    /* Flatten corners */
    box-shadow: none;
    /* Remove shadow for section feel */
    display: flex;
    overflow: hidden;
    text-align: left;
    /* Reset text align */
    height: 50vh;
    /* Set a fixed height or min-height */
    min-height: 400px;
}

.review-image {
    flex: 1;
    min-height: 300px;
    background-color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-weight: 600;
}

.review-content {
    flex: 1;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.review-card h3 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.review-card p {
    margin-bottom: 2rem;
    font-size: 1.1rem;
    color: var(--color-text-main);
    font-style: italic;
}

@media (max-width: 768px) {
    .review-card {
        flex-direction: column;
    }

    .review-image {
        min-height: 200px;
    }
}

.hero-slide.active {
    display: block;
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.slider-controls {
    margin-top: 2rem;
    display: flex;
    gap: 0.5rem;
}

.slider-dot {
    width: 12px;
    height: 12px;
    background-color: #cbd5e1;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.slider-dot.active {
    background-color: var(--color-accent);
}

/* Page Headers */
.page-header {
    background-color: #D3E4F5;
    /* Light Blue Request */
    color: var(--color-primary);
    /* Dark text for light bg */
    padding: 1.5rem 0;
    /* Reduced from 4rem to make it shorter */
    text-align: center;
}

.page-header h1 {
    font-size: 3rem;
    /* Larger like the reference/about-title */
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.2;
    margin-bottom: 1rem;
    font-family: var(--font-heading);
}

/* Eyebrow Title Style */
.section-eyebrow {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
    /* Blue - matches reference style */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
    /* Matches reference */
    font-family: var(--font-heading);
    text-align: center;
}

.page-eyebrow {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    /* Matches reference */
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    /* Matches reference */
    margin-bottom: 0.75rem;
    /* Matches reference */
    font-family: var(--font-heading);
}

.page-header p {
    color: var(--color-text-main);
    /* Dark Grey text */
    max-width: 600px;
    margin: 0 auto;

}

/* Response Media Queries */
@media (max-width: 768px) {
    .nav-wrapper {
        flex-direction: column;
        height: auto;
        padding: 1rem 0;
    }

    nav ul {
        margin-top: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .team-section {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .slider-controls {
        justify-content: center;
    }
}

/* Marquee / Infinite Slider */
.marquee-wrapper {
    overflow: hidden;
    width: 100%;
    padding: 2rem 0;
    position: relative;
    background: var(--color-background-light);
}

.marquee-content {
    display: flex;
    gap: 2rem;
    width: max-content;
    /* Allows content to dictate width */
    animation: marquee-scroll 40s linear infinite;
    /* Adjust speed here */
}

/* Pause animation on hover for better UX */
.marquee-content:hover {
    animation-play-state: paused;
}

.marquee-item {
    flex: 0 0 350px;
    /* Fixed width for cards in slider */
    width: 350px;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* Moves half the total width (original set) */
    }
}

/* Ensure project cards look good inside marquee */
.marquee-item .project-card-new {
    height: 100%;
}

/* Remove slider controls if present */
.slider-controls {
    display: none !important;
}

/* Form Updates */
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
    min-height: 100px;
    background-color: #f8fafc;
    /* Slight grey background as per image */
}

.form-group input,
.form-group select {
    background-color: #f8fafc;
}

.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.required-note {
    font-size: 0.8rem;
    color: #64748b;
}

.required-star {
    color: var(--color-accent);
    /* or blue if requested, but let's stick to brand color or image blue */
}

/* Step-Based Slider Styles */
.project-slider-container {
    padding: 0;
    overflow: visible;
    /* Allow shadows to spill if needed, or controlled by wrapper */
    position: relative;
    width: 100%;
}

.project-slider-track-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 3rem 1rem;
    /* Add padding INSIDE the overflow-hidden area so shadows are visible */
    margin: -3rem -1rem;
    /* Negative margin to counteract padding layout shift if needed, or verify alignment */
    width: calc(100% + 2rem);
    left: -1rem;
}

.project-slider-track {
    display: flex;
    gap: 2rem;
    /* Fixed gap */
    width: max-content;
    will-change: transform;
    /* Optimize for animations */
}

.project-slider-item {
    flex-shrink: 0;
    /* Prevent shrinking */
}

/* Navigation Arrows */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    color: var(--color-primary);
}

.slider-nav:hover {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.slider-nav svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2.5;
}

.slider-nav.prev {
    left: 1rem;
}

.slider-nav.next {
    right: 1rem;
}

/* Responsive Logic with CSS Variable set by JS */
/* Default / Mobile */
.project-slider-item {
    width: var(--slider-width, 100vw);
    /* Fallback to full width */
}

@media (min-width: 768px) {

    /* Tablet: 2 items */
    .project-slider-item {
        width: calc((var(--slider-width) - 2rem) / 2);
    }
}

@media (min-width: 1024px) {

    /* Desktop: 3 items */
    .project-slider-item {
        width: calc((var(--slider-width) - 4rem) / 3);
    }
}

/* Responsive Logic for exactly 1 item (Mobile) */
@media (max-width: 767px) {
    .slider-nav {
        width: 2.5rem;
        height: 2.5rem;
        background-color: rgba(255, 255, 255, 0.9);
    }

    .slider-nav.prev {
        left: 0.5rem;
    }

    .slider-nav.next {
        right: 0.5rem;
    }
}

/* --- 50/50 Hero Split Design --- */

/* Reset Header for Split Design */
header {
    background-color: transparent !important;
    position: absolute;
    width: 50%;
    /* Only span the left side on desktop initially? No, header spans all. */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Ensure Logo/Nav are visible on both backgrounds */
/* We might need a dark header if the right side is white? 
   Actually, usually in these splits, the header overlays the image (left) and the white part (right).
   If the right part is white, white text menu items won't be visible.
   
   Solution: Make the header background dark OR Ensure the nav links are visible.
   Let's keep the header transparent but make it compatible.
   
   If the header spans the full width, the right side links will be white-on-white.
   We should probably make the header background solid dark blue for consistency OR 
   adjust the link colors. 
   
   Let's check the current header vars. --color-primary is blue.
*/

/* Hero Container */
.hero {
    display: flex;
    flex-wrap: wrap;
    min-height: 90vh;
    /* Increased height again per user request */
    padding: 0;
    position: relative;
    /* Apply background here for full width */
    background-image:
        linear-gradient(90deg,
            rgba(43, 105, 161, 0.95) 0%,
            rgba(43, 105, 161, 0.8) 30%,
            rgba(43, 105, 161, 0) 60%),
        url('./assets/hero-bg-v2.jpg');
    background-size: cover;
    background-position: center;
    background-color: var(--color-primary);
    /* Fallback */
}

/* Left Side: Visuals */
.hero-split-left {
    width: 50%;
    /* Remove background from here */
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center the container inside */
    padding: 6rem 2rem 3rem 2rem;
    /* Reduced padding */
    position: relative;
}

.hero-content-container {
    max-width: 600px;
    margin-left: auto;
    margin-right: 2rem;
    /* Push slightly left of center line */
}

.hero-content h1 {
    font-size: 3rem;
    color: white;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-content p {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    border-left: 4px solid var(--color-white);
    padding-left: 1rem;
    max-width: 500px;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    width: 100%;
    max-width: 500px;
    /* Match paragraph width */
}

.hero-buttons .btn {
    flex: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Right Side: Form */
.hero-split-right {
    width: 50%;
    /* Remove background from here */
    background: transparent;
    display: flex;
    align-items: flex-end;
    /* Align to bottom */
    justify-content: center;
    padding: 8rem 2rem 0 2rem;
    /* Remove bottom padding so it can hang out */
    position: relative;
    z-index: 10;
    /* Ensure it stays on top of next section */
}

.hero-form-wrapper {
    width: 100%;
    max-width: 450px;
    margin-bottom: -150px;
    /* Pull it down to overlap next section */
}

/* Form Card Styling - simplified for the clean right side */
.quote-form-card {
    background: white;
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow-xl);
    /* Strong shadow to pop against white? Or flat? */
    /* Since the bg is white, maybe just a border or subtle shadow, or the card IS the bg?
       The user said "offerteaanvraag in het midden positioneren van de rechter 50%".
       If the background is white, a white card needs a border/shadow.
       Let's stick to the shadow.
    */
    border: 1px solid #e2e8f0;
}

/* Fix Header Text Color Issue on Right Side */
/* Since header overlaps, we have a problem: White text on White Right Side.
   QUICK FIX: Make the header solid blue? 
   OR: Use `mix-blend-mode: difference` (risky).
   BETTER: Force the header to be solid blue for this layout.
*/
header {
    background-color: var(--color-primary) !important;
    position: fixed;
    /* Stick to top */
    border-bottom: none;
}

/* Adjust main content padding because header is now fixed and solid? 
   The hero has padding-top so it slides under? No, we want it under.
*/


/* --- Responsive (Tablet/Mobile) < 1024px --- */
@media (max-width: 1050px) {
    .hero {
        flex-direction: column;
        min-height: auto;
    }

    .hero-split-left {
        width: 100%;
        padding: 6rem 1.5rem 3rem 1.5rem;
        /* Reduced padding */
        text-align: center;
        /* Center text on mobile */
        justify-content: center;
    }

    .hero-content-container {
        margin: 0 auto;
        text-align: center;
        max-width: 100%;
        /* Prevent overflow */
        padding: 0 1rem;
    }

    .hero-content p {
        margin-left: auto;
        margin-right: auto;
        border-left: none;
        /* Remove border on centered mobile */
        border-bottom: 4px solid var(--color-white);
        /* Maybe bottom instead? */
        padding-left: 0;
        padding-bottom: 1rem;
    }

    .hero-split-right {
        width: 100%;
        padding: 1.5rem 0.5rem;
        /* Very compact */
        background-color: #f8fafc;
    }

    .hero-form-wrapper {
        margin-bottom: 0;
        /* Reset overlap on mobile */
        width: 100%;
        max-width: 450px;
        /* Keep constrained width */
        margin-left: auto;
        margin-right: auto;
    }

    .quote-form-card {
        padding: 1rem;
        /* Minimal padding */
        width: 100%;
    }

    .quote-form-card h3 {
        font-size: 1.25rem;
        /* Smaller header */
        margin-bottom: 1rem;
    }

    .form-group input,
    .form-group select {
        padding: 0.5rem 0.75rem;
        /* Compact inputs */
        font-size: 0.95rem;
    }
}

/* Page Headers (for other pages) */
.page-header {
    padding-top: 60px;
    /* Reduced from 110px (was 140px) */
}

/* Adjust next section padding */
/* Adjust next section padding ONLY for the one after hero */
@media (min-width: 1051px) {
    .hero+.bg-light {
        padding-top: 14rem;
        /* Increase to fit the overlapping form */
    }
}

/* Contact Page Styles */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.contact-info {
    padding-top: 1rem;
}

.contact-info h2 {
    color: var(--color-text-main);
    margin-bottom: 1rem;
}

.contact-info p {
    color: var(--color-text-main);
    margin-bottom: 2rem;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.icon-box-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #D3E4F5;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-item strong {
    color: #000000;
}

.btn-whatsapp {
    display: inline-block;
    background-color: #25D366;
    /* WhatsApp Green */
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 0.25rem;
    transition: background-color 0.3s;
}

.btn-whatsapp:hover {
    background-color: #128C7E;
}



@media (max-width: 1050px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contact-form-wrapper {
        width: 100%;
        max-width: 450px;
        margin: 0 auto;
    }

    .contact-info {
        order: 2;
        /* Put info below form on mobile? Or above? Usually Info above or Customer choice. Let's keep info top/first in code, so default stack is Info then Form. */
        order: 0;
    }
}

/* New Footer Styles */
footer {
    background-color: var(--color-text-main);
    color: #fff;
    padding: 4rem 0 2rem 0;
    font-size: 0.95rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-col h4 {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.footer-col p {
    color: #cbd5e1;
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

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

.footer-col ul li {
    margin-bottom: 0.8rem;
}

.footer-col ul li a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-col ul li a:hover {
    color: var(--color-cta);
}

.footer-brand-text {
    margin-bottom: 1.5rem;
    color: #cbd5e1;
    max-width: 300px;
}

.footer-btn {
    display: inline-block;
    background-color: var(--color-cta-orange);
    color: #1e293b;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s;
    margin-top: 1rem;
}

.footer-btn:hover {
    transform: translateY(-2px);
    background-color: #d68910;
    color: #1e293b;
}

.social-icons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-link {
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background-color 0.3s;
}

.social-link:hover {
    background-color: var(--color-primary);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    color: #94a3b8;
    font-size: 0.9rem;
}

.footer-status {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #cbd5e1;
}

.blink-dot {
    width: 12px;
    height: 12px;
    background-color: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.footer-location {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-status {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* ========================================= */
/* Diensten Page Specific Styles */
/* ========================================= */

.services-list {
    padding: var(--spacing-lg) 0;
}

.service-row {
    display: flex;
    align-items: center;
    gap: 6rem;
    /* Good spacing between image and text */
    margin-bottom: 6rem;
}

/* Alternate Layout: Even rows reverse direction */
.service-row:nth-child(even) {
    flex-direction: row-reverse;
}

/* If last item, remove margin */
.service-row:last-child {
    margin-bottom: 0;
}

.service-img {
    flex: 1;
    max-width: 500px;
    width: 100%;
    height: 300px;
    /* Fixed height ~4cm shorter than typical auto width */
    position: relative;
    border-radius: 12px;
    /* Changed from 20px to match homepage 12px/8px style */
    overflow: hidden;
    box-shadow: var(--shadow-md);
    /* Lighter shadow to match homepage */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-img img {
    width: 100%;
    height: 100%;
    /* Fill container */
    object-fit: cover;
    /* Crop to fit */
    display: block;
    transition: transform 0.5s ease;
}

.service-row:hover .service-img {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.service-row:hover .service-img img {
    transform: scale(1.05);
}

.service-content {
    flex: 1;
    padding: 1rem;
}

/* Typography matching reference but using brand fonts */
.service-content h3 {
    font-size: 1.75rem;
    color: var(--color-text-main);
    /* Unified color */
    margin-bottom: 1rem;
    font-weight: 700;
}

.service-content p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-light);
    /* Unified color */
    margin-bottom: 1.5rem;
}

/* Button override removed (deleted) or reset to standard */
.service-content .btn-primary {
    /* Inherit global button styles (4px radius) */
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    border-radius: 4px;
}

/* Responsive */
@media (max-width: 1050px) {
    .service-row {
        gap: 3rem;
    }
}

@media (max-width: 768px) {

    .service-row,
    .service-row:nth-child(even) {
        flex-direction: column;
        /* Stack on mobile */
        gap: 2rem;
        margin-bottom: 4rem;
        text-align: center;
        /* Center aligning on mobile usually looks best */
    }

    .service-img {
        max-width: 100%;
        margin: 0 auto;
    }

    .service-content h3 {
        font-size: 2rem;
    }
}

/* Personal CTA Section */
.personal-cta-section {
    background-color: var(--color-primary);
    /* Brand Dark Blue */
    color: var(--color-white);
    padding: 3rem 0;
    /* Reduced padding as image might overlap */
    position: relative;
    overflow: hidden;
    margin-top: 4rem;
    /* Ensure space for negative margins if any */
}

/* Container flex layout */
.personal-cta-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    position: relative;
}

/* Image styling */
.personal-cta-image-wrapper {
    flex: 0 0 35%;
    /* Takes up roughly 35% of width */
    max-width: 350px;
    position: relative;
    /* Optional: Negative margin to pop out of section? Use gently. */
    margin-bottom: -3rem;
    /* Let it sit on bottom */
    z-index: 10;
}

.personal-cta-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    /* Blend mode experiment - try if white background is annoying */
    /* mix-blend-mode: multiply; */
    display: block;
}

/* Content styling */
.personal-cta-content {
    flex: 1;
    /* Takes remaining space */
    text-align: left;
    padding: 1rem 0;
}

.personal-cta-content h2 {
    color: var(--color-white);
    font-size: 2rem;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.personal-cta-content p {
    color: #e2e8f0;
    /* Off-white */
    font-size: 1.1rem;
    margin-bottom: 2rem;
    max-width: 600px;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Responsive */
@media (max-width: 768px) {
    .personal-cta-container {
        flex-direction: column;
        text-align: center;
        padding-top: 2rem;
    }

    .personal-cta-image-wrapper {
        flex: 0 0 auto;
        order: -1;
        /* Image first? Or last? */
        width: 200px;
        margin-bottom: 1rem;
    }

    .personal-cta-content {
        text-align: center;
    }

    .cta-buttons {
        justify-content: center;
    }
}

/* Mobile Nav State */
@media (max-width: 1050px) {
    .nav-wrapper {
        display: flex;
        /* Ensure flex is active */
        flex-direction: row !important;
        /* Force row to override @media 768px */
        justify-content: space-between;
        align-items: center;
        /* Ensure logo left, controls right */
        padding: 0 1rem;
        position: relative;
        height: 70px;
        /* Force a height for consistency */
    }

    /* Fixed logo size for hamburger state */
    .logo-img {
        height: 50px !important;
        width: auto;
    }

    .mobile-controls {
        display: flex;
        align-items: center;
        z-index: 1002;
        /* Ensure clickable */
        position: relative;
    }

    .mobile-call-btn {
        display: none;
        /* Hide call button on mobile */
    }

    .mobile-toggle {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0.5rem;
        display: flex;
        flex-direction: column;
        gap: 6px;
        /* Slightly more gap */
        z-index: 1003;
    }

    .hamburger-line {
        width: 30px;
        height: 3px;
        background-color: white;
        /* White lines */
        display: block;
        border-radius: 2px;
        transition: all 0.3s ease;
    }


    /* Override header for mobile */
    header {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
    }

    body {
        padding-top: 70px;
    }

    nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        width: 75%;
        max-width: 400px;
        height: 100vh;
        background-color: #2C3E50;
        /* Same as footer */
        padding: 2rem 1.5rem;
        z-index: 9999;
        overflow-y: auto;
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.3);
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Mobile Nav Header (Title + Close) */
    .mobile-nav-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        /* Subtle white border */
        padding-bottom: 1.25rem;
    }

    .mobile-nav-logo {
        display: none;
        /* Hide logo completely */
    }

    .nav-close-btn {
        background: rgba(255, 255, 255, 0.1);
        border: none;
        font-size: 1.75rem;
        color: white;
        cursor: pointer;
        line-height: 1;
        padding: 0.5rem;
        border-radius: 8px;
        transition: background 0.3s ease;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-close-btn:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    nav.nav-open {
        transform: translateX(0);
        /* Slide in */
        pointer-events: auto;
        /* Enable clicks when visible */
    }

    nav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        width: 100%;
    }

    nav a {
        color: white;
        font-size: 1.125rem;
        font-weight: 500;
        display: block;
        width: 100%;
        padding: 1rem 1.25rem;
        border-bottom: none;
        text-decoration: none;
        transition: all 0.3s ease;
        border-radius: 10px;
        margin-bottom: 0.5rem;
        position: relative;
    }

    nav a:hover,
    nav a:active,
    nav a:focus {
        background-color: rgba(255, 255, 255, 0.15);
        color: white !important;
        padding-left: 1.5rem;
        text-decoration: none !important;
        border-bottom: none !important;
        transform: translateX(4px);
    }

    /* Ensure no pseudo-element lines appear */
    nav a::after,
    nav a::before {
        display: none !important;
        content: none !important;
    }

    /* Offerte button in nav */
    nav .btn-primary {
        margin-top: 2rem;
        width: 100%;
        text-align: center;
        background-color: var(--color-cta-orange);
        color: #1e293b;
        /* Dark text for contrast - matches standard btn-primary */
        border: none;
        font-weight: 600;
        padding: 1rem;
        border-radius: 10px;
        transition: all 0.3s ease;
        font-weight: 700;
        padding: 0.875rem 1.5rem;
        border-radius: 4px;
    }

    nav .btn-primary:hover {
        background-color: #d68910;
        /* Darker orange on hover - derived from #F39C12 */
        color: #1e293b;
        text-decoration: none;
        transform: translateY(-1px);
    }
}

/* Menu backdrop overlay - separate element to avoid blur on menu */
@media (max-width: 1200px) {
    .menu-backdrop {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        /* Dark overlay */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
        z-index: 9998;
        /* Below menu (9999) */
    }

    .menu-backdrop.active {
        opacity: 1;
        pointer-events: auto;
        /* Catch clicks to close menu */
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Stats Bar Section */
/* Stats Bar Section */
.stats-bar-section {
    background-color: #eff1f3;
    padding: 4rem 0;
    margin-top: 0;
}

.stats-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    gap: 4rem;
    max-width: 900px;
    margin: 0 auto;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 150px;
}

.stat-number-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    font-family: var(--font-body);
}

.stat-plus {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    font-family: var(--font-body);
    margin-left: 0.25rem;
}

.stat-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-light);
    white-space: nowrap;
}

.stat-divider {
    width: 1px;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.1);
}


@media (max-width: 768px) {
    .stats-bar-section {
        padding: 2.5rem 0;
    }

    .stats-grid {
        flex-direction: row;
        /* Keep horizontal */
        gap: 1.5rem;
        /* Reduce gap */
        flex-wrap: nowrap;
        /* Prevent wrapping */
    }

    .stat-item {
        flex: 1;
        min-width: 0;
        /* Allow shrinking */
    }

    .stat-number {
        font-size: 2rem;
        /* Smaller on mobile */
    }

    .stat-plus {
        font-size: 1.75rem;
    }

    .stat-label {
        font-size: 0.75rem;
        /* Smaller label */
    }

    .stat-divider {
        display: block;
        height: 40px;
        /* Shorter divider */
    }
}

/* Collaboration Process Section */
.collaboration-section {
    background-color: var(--color-background-light);
    padding-top: 8rem;
    /* Increased whitespace as requested */
    padding-bottom: 5rem;
}

.process-steps {
    display: flex;
    flex-direction: column;
    max-width: 1000px;
    margin: 0 auto;
}

.process-step {
    display: grid;
    grid-template-columns: 50px 1fr 1fr;
    gap: 3rem;
    padding-bottom: 4rem;
    position: relative;
    /* align-items: center; Remove to allow top alignment of text */
}

.process-step:last-child {
    padding-bottom: 0;
}

.step-marker-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.step-dot {
    width: 24px;
    height: 24px;
    background-color: var(--color-text-main);
    border-radius: 50%;
    z-index: 2;
    margin-top: 0.25rem;
    /* Align with h3 roughly */
    position: relative;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.step-dot.active {
    background-color: var(--color-success);
    /* Green */
    transform: scale(1.2);
    /* Slight pop */
}

.step-line {
    width: 2px;
    background-color: #cbd5e1;
    flex-grow: 1;
    margin-top: 0.5rem;
    min-height: 100px;
}

.process-step:last-child .step-line {
    display: none;
}

.step-content {
    padding-top: 0;
}

.step-eyebrow {
    display: block;
    font-size: 0.9rem;
    /* Matches reference */
    font-weight: 600;
    /* Matches reference */
    text-transform: uppercase;
    letter-spacing: 1px;
    /* Matches reference */
    color: var(--color-primary);
    /* Blue - matches reference style */
    margin-bottom: 0.75rem;
    /* Matches reference */
}

.step-content h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--color-text-main);
}

.step-content p {
    color: var(--color-text-light);
    margin-bottom: 1rem;
    line-height: 1.7;
}

.step-image-col {
    padding-top: 0;
}

.step-image {
    width: 100%;
    height: 100%;
    min-height: 300px;
    max-height: 400px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-image:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

@media (max-width: 968px) {
    .process-step {
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .process-step {
        display: grid;
        grid-template-columns: 40px 1fr;
        /* Marker | Content/Image */
        gap: 1rem;
        padding-bottom: 3rem;
    }

    /* Restore marker */
    .step-marker-col {
        display: flex !important;
        grid-row: 1 / span 2;
        /* Span across content and image */
        height: 100%;
    }

    .step-content {
        grid-column: 2;
        padding-top: 0;
        /* Align with dot */
    }

    .step-image-col {
        grid-column: 2;
    }

    .step-content h3 {
        font-size: 1.75rem;
    }

    .step-eyebrow {
        color: var(--color-primary);
        /* Blue - matches reference style */
    }

    .step-image {
        min-height: 250px;
        max-height: 300px;
    }
}

/* About Section Styles (Migrated from index.html) */
.about-new {
    background: #eff1f3;
}

.about-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-content-side {
    max-width: 600px;
}

.about-header {
    margin-bottom: 2.5rem;
}

.about-eyebrow {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
    /* Use variable for consistency */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
}

.about-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.2;
}

.accordion-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.accordion-item {
    border-bottom: 1px solid #e5e7eb;
}

.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
}

.accordion-header:hover {
    color: var(--color-primary);
}

.accordion-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-main);
    transition: color 0.3s ease;
}

.accordion-header:hover .accordion-title {
    color: var(--color-primary);
}

.accordion-icon {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--color-text-main);
    transition: transform 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}

.accordion-item.active .accordion-icon {
    transform: rotate(45deg);
    color: var(--color-primary);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0;
}

.accordion-item.active .accordion-content {
    max-height: 300px;
    padding-bottom: 1.5rem;
}

.accordion-content p {
    color: var(--color-text-light);
    line-height: 1.7;
    font-size: 1rem;
}

.about-image-side {
    position: relative;
}

.about-team-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    object-fit: cover;
}

@media (max-width: 968px) {
    .about-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-title,
    .section-title {
        font-size: 2rem;
    }

    .about-image-side {
        order: -1;
    }
}

@media (max-width: 640px) {
    .accordion-title {
        font-size: 1.1rem;
    }

    .about-title,
    .section-title {
        font-size: 1.75rem;
    }
}

/* Testimonials Section */
.testimonials-section {
    background-color: #ffffff;
    /* White background for section */
}

/* Container to hold track + buttons */
.testimonials-slider-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5rem;
    /* Increased space for arrows */
}

.testimonials-track {
    display: flex;
    overflow-x: auto;
    gap: 2rem;
    padding: 2rem 0.5rem;
    /* Padding for shadow clipping */
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Firefox */
    justify-content: center;
    /* Center cards if they fit */
}

.testimonials-track::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.testimonial-card {
    background-color: #e2e8f0;
    /* Slightly darker grey than section #eff1f3 */
    border-radius: 12px;
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease;
    flex: 0 0 320px;
    /* Slightly narrower to fit 3 comfortably */
    scroll-snap-align: center;
}

.testimonial-card:hover {
    transform: translateY(-5px);
}

.testimonial-avatar-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    margin-top: -4rem;
    /* Floating effect */
}

.testimonial-avatar {
    width: 80px;
    height: 80px;
    background-color: #cbd5e1;
    border-radius: 50%;
    margin: 0 auto;
    background-size: cover;
    background-position: center;
    border: 3px solid white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.testimonial-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-main);
    /* House style dark */
    margin-bottom: 1rem;
}

.testimonial-text {
    font-size: 0.95rem;
    color: var(--color-text-main);
    /* House style text (darker than slate) */
    line-height: 1.6;
}

.section-title.text-center {
    text-align: center;
    margin-bottom: 4rem;
    /* More space for floating avatars via margin-top negative */
    color: #0F172A;
    /* Dark blue/black title */
}

/* Nav Buttons */
.testimonial-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
    /* Or transparent if preferred */
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    color: #0F172A;
    z-index: 10;
    transition: background-color 0.2s;
}

.testimonial-nav:hover {
    background-color: #f8fafc;
}

.testimonial-nav.prev {
    left: 0;
}

.testimonial-nav.next {
    right: 0;
}

@media (max-width: 1024px) {
    .testimonials-track {
        justify-content: flex-start;
        /* Align left on smaller screens (scrollable) */
    }

    .testimonial-card {
        flex: 0 0 300px;
    }
}

@media (max-width: 768px) {
    .testimonials-slider-container {
        padding: 0;
    }

    .testimonial-nav {
        /* display: flex; explicitly or just remove none if default is flex */
        display: flex;
        width: 32px;
        height: 32px;
    }

    .testimonials-track {
        gap: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .testimonial-card {
        flex: 0 0 85vw;
        /* Wider on mobile */
    }

    /* Override full width buttons for specific sections */
    .about-content-side .btn-primary,
    .services-header .btn-primary {
        width: auto;
        display: inline-block;
    }
}

/* FAQ Section */
.faq-section {
    background-color: white;
}

.faq-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    border-radius: 8px;
    overflow: hidden;
}

.faq-question {
    width: 100%;
    text-align: left;
    background-color: #e2e8f0;
    /* Slightly darker grey than section */
    padding: 1.25rem;
    border: none;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-main);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.faq-question:hover {
    background-color: #cbd5e1;
    /* Darker grey on hover */
}

.faq-question.active {
    background-color: #cbd5e1;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    color: var(--color-text-light);
}

.faq-question.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #e2e8f0;
    border-radius: 0 0 8px 8px;
}

.faq-answer-content {
    padding: 0 1.25rem 1.25rem 1.25rem;
    color: var(--color-text-light);
    line-height: 1.6;
}

/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    background-color: var(--color-cta-orange);
    color: #1e293b;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 1000;
    pointer-events: none;
    /* Clickable only when visible */
}

.scroll-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll-to-top:hover {
    background-color: #d68910;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.25);
}

.scroll-to-top svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
}

/* ------------------------------------- */
/* SKELETON LOADERS (Performance)        */
/* ------------------------------------- */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.skeleton-box {
    display: inline-block;
    height: 100%;
    width: 100%;
    background: #e2e8f0;
    background-image: linear-gradient(90deg, #e2e8f0 0%, #cbd5e1 20%, #e2e8f0 40%, #e2e8f0 100%);
    background-repeat: no-repeat;
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear forwards;
    border-radius: 4px;
}

.skeleton-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.skeleton-image {
    height: 250px;
    width: 100%;
    border-radius: 8px 8px 0 0;
}

.skeleton-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.skeleton-text {
    height: 20px;
    width: 80%;
}
.skeleton-text.short {
    width: 40%;
    height: 14px;
}
.skeleton-text.long {
    width: 100%;
    height: 60px;
}

/* ------------------------------------- */
/* ADMIN BAR (Management)                */
/* ------------------------------------- */
.admin-bar {
    background: #1f2937;
    color: white;
    padding: 0.75rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
}

.admin-bar-logo {
    font-weight: 700;
    font-size: 1.1rem;
    color: #f97316;
}

.admin-bar-nav {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.admin-bar-link {
    color: #e5e7eb;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.3s;
}

.admin-bar-link:hover {
    color: white;
}

.admin-bar-logout {
    background: #ef4444;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.3s;
}

.admin-bar-logout:hover {
    background: #dc2626;
}

.dashboard-with-bar {
    padding-top: 4rem !important;
}