/* Fonts are imported in HTML head for better performance */

/* Base font settings */
body {
    font-family: 'Poppins', sans-serif;
}

/* Navbar fonts */
.navbar-nav .nav-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Hero section fonts */
.hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-transform: none;
}

.hero-subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    letter-spacing: 0.5px;
}

/* Button text */
.btn {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Section headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

/* For better readability in paragraphs */
p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    line-height: 1.8;
}
       :root {
            --primary-color: #cb0d0d;
            --text-light: #f8f9fa;
            --text-dark: #212529;
        }

        main {
            position: relative;
            min-height: 100vh;
            overflow: hidden;
        }

        .container {
            max-width: 1440px !important; /* Increased from default 1320px */
            padding: 0 40px; /* Larger padding for better spacing */
        }

        .carousel {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .carousel-inner,
        .carousel-item {
            height: 100%;
        }

        .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .hero-section {
            position: relative;
            min-height: 100vh;
            z-index: 2;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hero-section .hero-content {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .hero-content {
            text-align: center;
            color: var(--text-light);
            padding: 2rem;
        }

        .hero-title {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: bold;
            margin-bottom: 1rem;
        }

        .hero-subtitle {
            font-size: clamp(1.1rem, 3vw, 1.5rem);
            margin: 1.5rem 0;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .btn-primary {
            padding: 0.75rem 1.5rem;
            font-size: 1.1rem;
            transition: transform 0.3s ease;
            --bs-btn-bg: #b70d0d !important;
            --bs-btn-border-color: #b70d0d !important;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            --bs-btn-hover-color: white !important;
            --bs-btn-hover-bg: #cb0d0d !important;
            --bs-btn-hover-border-color: #cb0d0d !important;
        }

        .text-primary{
            color: #b70d0d !important;
        }

        /* Previous navbar styles remain the same */
        .navbar {
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1030;
        }

        /* Previous footer styles remain the same */
        .footer {
            position: relative;
            z-index: 2;
            background-color: #121212;
            padding: 2rem 0;
            text-align: center;
            font-size: 0.9rem;
            color: #6c757d;
        }

        /****************second section******************/
        .fade-in-section {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        .fade-in-section.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        .service-card {
            transition: all 0.3s ease;
            cursor: pointer;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        }

        .service-icon {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            color: var(--primary-color);
            transition: transform 0.3s ease;
        }

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

        .stats-section {
            background-color: #b70d0d;
            color: white;
            padding: 4rem 0;
        }

        .counter {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }

        .counter-title {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        /* New section styles */
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            padding: 2rem 0;
        }

        .feature-item {
            background: linear-gradient(145deg, #ffffff, #f3f3f3);
            border-radius: 15px;
            padding: 2rem;
            box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

        .feature-item:hover {
            transform: scale(1.03);
            box-shadow: 8px 8px 20px rgba(0,0,0,0.15);
        }

        .testimonial-card {
            background: white;
            border-radius: 10px;
            padding: 2rem;
            margin: 1rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

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

        .testimonial-text {
            font-size: 1.1rem;
            font-style: italic;
            line-height: 1.8;
            color: #333;
            min-height: 100px;
        }

        .testimonial-author h5 {
            color: #333;
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .testimonial-author {
            border-top: 2px solid #cb0d0d;
            padding-top: 1rem;
        }

        .cta-section {
            background: linear-gradient(135deg, #cb0d0d, #18191a);
            color: white;
            padding: 5rem 0;
            position: relative;
            overflow: hidden;
        }

        .cta-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent 45%, rgba(255,255,255,0.1) 48%, transparent 51%);
            animation: shimmer 3s infinite linear;
        }

        @keyframes shimmer {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .contact-form {
            background: white;
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        }

        .contact-form .form-control {
            border-radius: 8px;
            padding: 0.8rem;
            border: 2px solid #e9ecef;
            transition: all 0.3s ease;
        }

        .contact-form .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        }


         /* Sliding box animations */
        .slide-box {
            opacity: 0;
            transform: translateX(-100px);
            transition: all 1s ease-out;
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
            margin-bottom: 30px;
        }

        .slide-box.from-right {
            transform: translateX(100px);
        }

        .slide-box.is-visible {
            opacity: 1;
            transform: translateX(0);
        }

        .image-box {
            position: relative;
            border-radius: 15px;
            overflow: hidden;
        }

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

        .image-box:hover img {
            transform: scale(1.05);
        }

        .image-box .content {
            padding: 1.5rem;
            background: white;
        }

        .image-box h3 {
            margin: 0 0 1rem 0;
            color: var(--text-dark);
            font-size: 1.5rem;
        }

        .image-box p {
            color: #666;
            margin: 0;
            line-height: 1.6;
        }

        /* Enhanced hover effects */
        .slide-box:hover {
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
            transform: translateY(-5px);
        }

        .slide-box .content {
            transform: translateY(0);
            transition: transform 0.3s ease;
        }

        .slide-box:hover .content {
            transform: translateY(-5px);
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .slide-box, .slide-box.from-right {
                transform: translateY(50px);
                opacity: 0;
            }
            
            .slide-box.is-visible {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* About and Contact Sections Styling */
.about-stats .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.about-stats .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.stats-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.contact-card {
    transition: all 0.3s ease;
    height: 100%;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.contact-icon {
    width: 80px;
    height: 80px;
    background: rgba(13, 110, 253, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
}

.contact-icon i {
    font-size: 2rem;
    color: var(--primary-color);
}

.contact-card:hover .contact-icon {
    background: var(--primary-color);
}

.contact-card:hover .contact-icon i {
    color: white;
}

/* List Styling */
.feature-list {
    list-style: none;
    padding-left: 0;
}

.feature-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
}

.feature-list li i {
    position: absolute;
    left: 0;
    top: 0.25rem;
    color: var(--primary-color);
}

/* Card Hover Effects */
.info-card {
    border: none;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Section Headers */
.section-header {
    position: relative;
    margin-bottom: 3rem;
}

.section-header:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: var(--primary-color);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .stats-number {
        font-size: 2rem;
    }
    
    .contact-icon {
        width: 60px;
        height: 60px;
    }
    
    .contact-icon i {
        font-size: 1.5rem;
    }
}

/* Animation Classes */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.fade-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Additional Utility Classes */
.text-gradient {
    background: linear-gradient(45deg, var(--primary-color), #0056b3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-light-primary {
    background-color: rgba(13, 110, 253, 0.1);
}

.border-hover {
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

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

/* Wider grid spacing */
.row {
    margin-right: -25px;
    margin-left: -25px;
}

.col, [class*="col-"] {
    padding-right: 25px;
    padding-left: 25px;
    padding-bottom: 10px;
}

/* Adjust feature grid for wider layout */
.feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    padding: 2rem 0;
}

/* Wider spacing for sections */
.py-5 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

/* Adjust card layouts */
.service-card, 
.testimonial-card, 
.feature-item {
    padding: 2.5rem;
    margin: 0.5rem 0;
}

/* Wider image boxes */
.image-box {
    margin: 1.5rem 0;
}

.image-box img {
    height: 400px; /* Increased height */
}

/* Adjust stats section spacing */
.stats-section .row {
    margin: 0 -30px;
}

.stats-section [class*="col-"] {
    padding: 0 30px;
}

/* Media queries for responsive design */
@media (min-width: 1600px) {
    .container {
        max-width: 1600px !important;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }
    
    .row {
        margin-right: -15px;
        margin-left: -15px;
    }
    
    [class*="col-"] {
        padding-right: 15px;
        padding-left: 15px;
    }
}

.site-footer {
    background-color: var(--text-light);
}

.footer-top {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.footer-logo img {
    max-height: 40px;
    width: auto;
}

.footer-socials ul {
    margin: 0;
    padding: 0;
}

.footer-socials a {
    color: var(--primary-color);
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.footer-socials a:hover {
    color: #000;
}

.footer-list-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}

.footer-list ul li {
    margin-bottom: 0.75rem;
}

.footer-list ul li a {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-list ul li a:hover {
    color: var(--primary-color);
}

.footer-bottom-bar {
    background-color: #f8f9fa;
}

.copyright-text {
    color: #6c757d;
    font-size: 0.9rem;
}

.footer-menu ul {
    margin: 0;
}

.footer-menu .list-inline-item:not(:last-child) {
    margin-right: 1.5rem;
}

.footer-menu a {
    color: #6c757d;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-menu a:hover {
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .footer-socials ul {
        justify-content: flex-start !important;
        margin-top: 1rem;
    }
    
    .footer-menu ul {
        text-align: left !important;
        margin-top: 1rem;
    }
}



.footer-heading {
    color: #333;
    font-weight: 600;
    margin-bottom: 1.5rem;
    position: relative;
}

.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 40px;
    height: 2px;
    background-color: var(--primary-color);
}

.social-links a {
    color: #666;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--primary-color);
}

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

.footer-links a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}

.footer-contact li {
    color: #666;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.footer-contact i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.footer-divider {
    margin: 2rem 0;
    opacity: 0.1;
}

.footer-bottom {
    padding-top: 1rem;
}

.footer-bottom a {
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bottom a:hover {
    color: var(--primary-color) !important;
}

@media (max-width: 768px) {
    .footer-bottom {
        text-align: center;
    }
    
    .footer-bottom .text-md-end {
        margin-top: 1rem;
    }
}

/* Hero Section Styles */
.carousel-item {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

/* Slice Animation Styles */
.slice-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.slice {
    position: absolute;
    width: 250px;
    height: 150px;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(0.9);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-item.active .slice {
    opacity: 0.3;
    transform: scale(1);
}

/* Overlay Styles */
.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3;
}

/* Caption Animation Styles */
.animated-caption {
    z-index: 4;
    opacity: 0;
    transform: scale(0.9);
    transition: all 1s ease-out;
}

.carousel-item.active .animated-caption {
    opacity: 1;
    transform: scale(1);
}

.main-title {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    /*background: linear-gradient(90deg, #cb0d0d 0%, #0056b3 100%);*/
    background: white;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sub-title {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}


.btn-slider {
    padding: 12px 20px;
    font-size: 16px;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 30px;
    background: linear-gradient(90deg, #ec1b23, #000); 
    transition: background 0.3s ease;
}

.btn-slider:hover {
    background: linear-gradient(90deg, #ec1b23, #000); 
}

/* Updated Navbar Styles */
.navbar {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1030;
    background: transparent !important; /* Make navbar transparent */
    transition: all 0.3s ease;
    padding: 1.5rem 0;
}

/* Style for navbar when scrolled */
.navbar.scrolled {
    /*background: rgba(255, 255, 255, 0.95) !important;*/
    padding: 1rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Style for navbar when hiding */
.navbar.nav-up {
    transform: translateY(-100%);
}


/* Adjust the navbar links to be visible on transparent background */
.navbar-light .navbar-nav .nav-link {
    color: #222 !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #555 !important; /* Change to any color you prefer */
    transform: scale(1.1); /* Slightly enlarges the text */
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
    color: #555 !important;
}

/* Style links when navbar is scrolled */
.navbar.scrolled .navbar-nav .nav-link {
    color: #212529 !important;
}

/* Adjust logo for better visibility */
.navbar-brand img {
    /*height: 40px;*/
    transition: all 0.3s ease;
}

/* Optional: adjust logo size when scrolled */
.navbar.scrolled .navbar-brand img {
    height: 35px;
}

/* Adjust hamburger menu color for mobile */
.navbar-toggler {
    border-color: rgba(255,255,255,0.5);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar.scrolled .navbar-toggler {
    border-color: rgba(0,0,0,0.1);
}

.navbar.scrolled .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Testimonial styling */
.quote-icon {
    text-align: center;
}

.text-muted{
    color: #6c757d !important;
}


.carousel-caption {
    bottom: 35%; /* Adjust this value as needed */
    text-align: center;
    width: 100%;
    left: 0;
    right: 0;
    padding: 0 15%;
}

.main-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
}

.sub-title {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.btn-slider {
    display: inline-block;
    margin-top: 1rem;
}

/***********************************/
.consulting-section {
    background-color: #f8f9fa;
    padding: 5rem 0;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    position: relative;
    margin-bottom: 3rem;
}

.title-underline {
    display: block;
    width: 80px;
    height: 4px;
    background-color: #cb0d0d;
    margin: 1rem auto 0;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #6c757d;
    max-width: 800px;
    margin: 0 auto;
}


/*************************************/



.service-item {
    position: relative;
    height: 200px;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.service-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    transition: transform 0.3s ease;
    background-color: #e3e3e3;
}

.icon-wrapper {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.service-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-item:hover {
    transform: translateY(-5px);
}

.service-item:hover .service-hover {
    opacity: 1;
}

.service-item:hover .service-content {
    transform: translateY(-10px);
}

/****************
/**************************/
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    /*max-width: 1200px;*/
    margin: 0 auto;
}

.service-item {
    opacity: 0;
    transform: translateX(-100px);
    animation: slideIn 0.6s forwards;
}

.service-item:nth-child(even) {
    transform: translateX(100px);
}

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Add different delays for each item */
.service-item:nth-child(1) { animation-delay: 1s; }
.service-item:nth-child(2) { animation-delay: 2s; }
.service-item:nth-child(3) { animation-delay: 2.5s; }
.service-item:nth-child(4) { animation-delay: 3s; }
.service-item:nth-child(5) { animation-delay: 3.5s; }

/* Add the rest of your existing styles */
.service-item {
    position: relative;
    height: 200px;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}







.service-item:hover {
    transform: translateY(-5px);
}

.service-item:hover .service-hover {
    opacity: 1;
}

.service-item:hover .service-content {
    transform: translateY(-10px);
}

.service-description {
    font-size: 0.9rem;
    color: #666;
    margin-top: 10px;
    line-height: 1.6;
    padding: 0 10px;
}

/****************************/
.title-section {
    /*background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);*/
    background: #777;
    color: white;
    padding: 4rem 0;
    border-radius: 15px;
}

.main-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 2rem;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.title-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.process-card {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.process-card:hover {
    background: rgba(255,255,255,0.2);
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    .main-title {
        font-size: 2rem;
    }
    
    .process-card {
        width: calc(50% - 1rem);
        text-align: center;
    }
}

/**************************************/
.mb-4{
    /*margin-bottom: 2.5rem !important;*/
}


/***************************************/
.partner-logos {
    overflow: hidden;
    padding: 20px 0;
    background: white;
    border-radius: 10px;
}

.logo-slider {
    display: flex;
    animation: slide 30s linear infinite;
}

.logo-slide {
    flex: 0 0 200px;
    margin: 0 30px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease forwards;
}

.logo-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.logo-slide img:hover {
    filter: grayscale(0%);
    transform: scale(1.1);
}

@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.logo-slide:nth-child(1) { animation-delay: 0.1s; }
.logo-slide:nth-child(2) { animation-delay: 0.2s; }
.logo-slide:nth-child(3) { animation-delay: 0.3s; }
.logo-slide:nth-child(4) { animation-delay: 0.4s; }
.logo-slide:nth-child(5) { animation-delay: 0.5s; }
.logo-slide:nth-child(6) { animation-delay: 0.6s; }
.logo-slide:nth-child(7) { animation-delay: 0.7s; }
.logo-slide:nth-child(8) { animation-delay: 0.8s; }

.partner-logos {
    overflow: hidden;
    padding: 20px 0;
    background: white;
    border-radius: 10px;
}

.logo-slider {
    display: flex;
    animation: slide 30s linear infinite;
}

.logo-slide {
    flex: 0 0 200px;
    height: 100px;
    margin: 0 30px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s ease forwards;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    transition: filter 0.3s ease, transform 0.3s ease;
}

.logo-slide img:hover {
    filter: grayscale(0%);
    transform: scale(1.1);
}

/***********************************/

.title-section {
    opacity: 0;
    transform: translateY(20px);
    animation: popUp 0.6s ease forwards;
}

.title-section:nth-child(1) { animation-delay: 0.2s; }
.title-section:nth-child(2) { animation-delay: 0.4s; }
.title-section:nth-child(3) { animation-delay: 0.6s; }
.title-section:nth-child(4) { animation-delay: 0.8s; }

.process-card {
    opacity: 0;
    transform: scale(0.8);
    animation: popCard 0.4s ease forwards;
}

@keyframes popUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes popCard {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Delay each card in a section */
.title-cards .process-card:nth-child(1) { animation-delay: 0.3s; }
.title-cards .process-card:nth-child(2) { animation-delay: 0.4s; }
.title-cards .process-card:nth-child(3) { animation-delay: 0.5s; }
.title-cards .process-card:nth-child(4) { animation-delay: 0.6s; }

.main-title {
    opacity: 0;
    transform: scale(0.9);
    animation: popTitle 0.5s ease forwards;
    animation-delay: 0.1s;
}

@keyframes popTitle {
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/*******************************/
.bg-light{
    background-color: white !important;
}

/* Cookie Consent Banner */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.95);
    color: white;
    padding: 20px;
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    display: none;
    animation: slideUp 0.5s ease-out;
}

.cookie-consent-banner.show {
    display: block;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.cookie-consent-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.cookie-consent-text {
    flex: 1;
    min-width: 250px;
}

.cookie-consent-text h4 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    color: #fff;
}

.cookie-consent-text p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #ddd;
}

.cookie-consent-text a {
    color: #cb0d0d;
    text-decoration: underline;
}

.cookie-consent-text a:hover {
    color: #ff3333;
}

.cookie-consent-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cookie-consent-buttons button {
    padding: 10px 24px;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    white-space: nowrap;
}

.cookie-accept-btn {
    background-color: #cb0d0d;
    color: white;
}

.cookie-accept-btn:hover {
    background-color: #a00a0a;
    transform: translateY(-2px);
}

.cookie-decline-btn {
    background-color: transparent;
    color: white;
    border: 2px solid white !important;
}

.cookie-decline-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
    .cookie-consent-content {
        flex-direction: column;
        text-align: center;
    }

    .cookie-consent-buttons {
        width: 100%;
        justify-content: center;
    }

    .cookie-consent-buttons button {
        flex: 1;
        min-width: 120px;
    }
}




/****************************/
/* Form honeypot (bot trap) */
/****************************/
/* Hidden from humans and from assistive tech, but still present in the DOM
   so automated submitters fill it in. Not display:none - some bots skip that. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================================================
   UX LAYER
   Loaded last on purpose: the rules above this point define several selectors
   more than once (.main-title x5, .container x3, .service-item x3), so the
   only safe way to correct them without unpicking the whole cascade is to
   override deliberately from the end of the file.
   Grouped by concern; each block says what it fixes and why.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   The palette, spacing and type scale were previously hard-coded per rule,
   which is why sizes drift between sections. Everything below references
   these, so the site can be re-tuned from one place.
   -------------------------------------------------------------------------- */
:root {
    --kld-red: #cb0d0d;
    --kld-red-dark: #a80a0a;
    --kld-red-soft: rgba(203, 13, 13, 0.08);
    --kld-ink: #16181b;          /* headings */
    --kld-body: #43474d;         /* body copy - 8.6:1 on white */
    --kld-muted: #6b7075;        /* secondary copy - 5.1:1 on white */
    --kld-line: #e6e8eb;
    --kld-surface: #ffffff;
    --kld-surface-alt: #f6f7f9;

    /* 4px-based spacing scale */
    --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
    --sp-6: 1.5rem;  --sp-8: 2rem;   --sp-12: 3rem;  --sp-16: 4rem;
    --sp-20: 5rem;

    --radius: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(16, 18, 20, .06), 0 2px 8px rgba(16, 18, 20, .04);
    --shadow-md: 0 4px 12px rgba(16, 18, 20, .08), 0 12px 28px rgba(16, 18, 20, .06);
    --shadow-lg: 0 12px 32px rgba(16, 18, 20, .12), 0 24px 56px rgba(16, 18, 20, .08);
    --ease: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   2. Accessibility
   The stylesheet had a single :focus rule in 1500 lines and no reduced-motion
   support, on a site that animates almost every section.
   -------------------------------------------------------------------------- */

/* Visible keyboard focus on everything interactive. :focus-visible keeps it
   off mouse clicks, so it costs nothing visually for pointer users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible,
.process-card:focus-visible,
.navbar-toggler:focus-visible {
    outline: 3px solid var(--kld-red);
    outline-offset: 3px;
    border-radius: 4px;
}

/* On dark backgrounds a red ring disappears - use white there. */
.navbar:not(.scrolled) .nav-link:focus-visible,
.footer a:focus-visible,
.title-section .process-card:focus-visible,
.carousel-caption a:focus-visible,
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible {
    outline-color: #fff;
}

/* Skip link: lets keyboard and screen-reader users jump the navbar. */
.skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: 10000;
    background: var(--kld-red);
    color: #fff;
    padding: var(--sp-3) var(--sp-6);
    border-radius: 0 0 var(--radius) var(--radius);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s var(--ease);
}
.skip-link:focus {
    transform: translate(-50%, 0);
    color: #fff;
}

/* Honour the OS "reduce motion" setting: keep the site usable, drop the
   movement. Everything still ends in its final, visible state. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .fade-in-section,
    .title-section,
    .process-card,
    .main-title,
    .service-item,
    .slide-box {
        opacity: 1 !important;
        transform: none !important;
    }
    .logo-slider {
        animation: none !important;
    }
}

/* --------------------------------------------------------------------------
   3. Bug fix: heading overflow in "Pourquoi nous choisir"
   .main-title resolves to 3rem from an earlier duplicate rule. Inside these
   ~230px cards that pushed 428px of text outside the box - the stray letters
   visible to the right of each card. Scope a card-sized heading here.
   -------------------------------------------------------------------------- */
.title-section .main-title {
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    line-height: 1.35;
    letter-spacing: .3px;
    margin-bottom: var(--sp-6);
    text-shadow: none;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Same class is the hero H1 - keep that one large. */
.carousel-caption .main-title {
    font-size: clamp(1.9rem, 5vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: -.5px;
}

/* --------------------------------------------------------------------------
   4. "Pourquoi nous choisir" cards
   Were flat #777 boxes: white-on-grey is 4.4:1, under the 4.5:1 minimum.
   -------------------------------------------------------------------------- */
.feature-grid {
    gap: var(--sp-6);
    align-items: stretch;
}

.title-section {
    background: linear-gradient(160deg, #24272b 0%, #16181b 100%);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: var(--radius-lg);
    padding: var(--sp-8) var(--sp-6) !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-md);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.title-section:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.title-section > .container {
    padding: 0 !important;
    max-width: 100% !important;
}

/* A short brand rule under each card heading, so the four cards read as a set */
.title-section .main-title::after {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    margin: var(--sp-3) auto 0;
    background: var(--kld-red);
    border-radius: 2px;
}

.title-cards {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: auto;
}

.process-card {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    padding: var(--sp-3) var(--sp-4);
    font-size: .95rem;
    line-height: 1.4;
    border-radius: 10px;
    cursor: default;              /* they aren't links - don't imply clickable */
    width: auto;
}
.process-card:hover {
    background: rgba(203, 13, 13, .22);
    border-color: rgba(203, 13, 13, .5);
    transform: none;
}

/* --------------------------------------------------------------------------
   5. Navbar
   Links were #555 sitting on a dark hero photo. Give the bar a scrim at the
   top of the page and switch to solid once scrolled.
   -------------------------------------------------------------------------- */
.navbar {
    background: linear-gradient(180deg, rgba(10, 11, 12, .78) 0%, rgba(10, 11, 12, 0) 100%);
    transition: background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.navbar .nav-link {
    color: rgba(255, 255, 255, .92) !important;
    padding: var(--sp-3) var(--sp-4) !important;   /* larger tap target */
    position: relative;
}
.navbar .nav-link:hover {
    color: #fff !important;
}
/* Underline marks the current page instead of relying on colour alone */
.navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: var(--sp-4);
    right: var(--sp-4);
    bottom: 6px;
    height: 2px;
    background: var(--kld-red);
    border-radius: 2px;
}
.navbar.scrolled {
    background: rgba(255, 255, 255, .97) !important;
    backdrop-filter: saturate(180%) blur(12px);
    box-shadow: var(--shadow-sm);
}
.navbar.scrolled .nav-link {
    color: var(--kld-ink) !important;
}
.navbar.scrolled .nav-link:hover,
.navbar.scrolled .nav-link.active {
    color: var(--kld-red) !important;
}
.navbar-toggler {
    border-color: rgba(255, 255, 255, .5);
}
.navbar.scrolled .navbar-toggler {
    border-color: var(--kld-line);
}

/* Inner pages have no hero photo, so the bar must be solid from the start. */
body:not(.has-hero) .navbar {
    background: rgba(255, 255, 255, .97);
    box-shadow: var(--shadow-sm);
}
body:not(.has-hero) .navbar .nav-link {
    color: var(--kld-ink) !important;
}
body:not(.has-hero) .navbar .nav-link:hover,
body:not(.has-hero) .navbar .nav-link.active {
    color: var(--kld-red) !important;
}

/* Mobile: the collapsed menu needs its own solid panel to stay readable. */
@media (max-width: 991px) {
    .navbar-collapse {
        background: rgba(255, 255, 255, .98);
        border-radius: var(--radius);
        padding: var(--sp-3);
        margin-top: var(--sp-3);
        box-shadow: var(--shadow-md);
    }
    .navbar .nav-link,
    .navbar.scrolled .nav-link {
        color: var(--kld-ink) !important;
    }
    .navbar .nav-link.active::after {
        display: none;
    }
    .navbar .nav-link.active {
        color: var(--kld-red) !important;
    }
}

/* --------------------------------------------------------------------------
   6. Hero
   A scrim keeps the caption legible whatever the photograph behind it, and
   the caption was colliding with the logo on small screens.
   -------------------------------------------------------------------------- */
.carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 11, 12, .55) 0%, rgba(10, 11, 12, .25) 45%, rgba(10, 11, 12, .7) 100%);
    pointer-events: none;
}
.carousel-caption {
    z-index: 3;
}
.carousel-caption .sub-title {
    font-size: clamp(.98rem, 1.6vw, 1.2rem);
    line-height: 1.6;
    max-width: 40rem;
    margin-inline: auto;
    color: rgba(255, 255, 255, .93);
}
.btn-slider {
    margin-top: var(--sp-6);
    padding: .85rem 2rem;
    border-radius: 999px;
    background: var(--kld-red);
    border: 2px solid var(--kld-red);
    color: #fff;
    box-shadow: 0 6px 20px rgba(203, 13, 13, .35);
}
.btn-slider:hover {
    background: var(--kld-red-dark);
    border-color: var(--kld-red-dark);
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .carousel-caption {
        top: auto;
        bottom: 12%;
        padding-inline: var(--sp-4);
    }
    .carousel-caption .main-title {
        font-size: 1.65rem;
    }
}

/* --------------------------------------------------------------------------
   7. Section rhythm and headings
   Section titles previously varied between centred/uppercase/underlined and
   left-aligned sentence case. One treatment, one size.
   -------------------------------------------------------------------------- */
.section-title {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.25;
    color: var(--kld-ink);
    letter-spacing: .4px;
    margin-bottom: var(--sp-8);
}
.title-underline {
    display: block;
    width: 56px;
    height: 3px;
    margin: var(--sp-4) auto 0;
    background: var(--kld-red);
    border-radius: 2px;
}
/* Left-aligned section headings keep their rule on the left. */
.col-lg-6 .section-title .title-underline,
.text-md-start .title-underline {
    margin-left: 0;
}

p, li {
    color: var(--kld-body);
}
.lead {
    color: var(--kld-muted);
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   8. Service cards
   Flat grey panels with 14px grey text. Give them a surface, a readable
   description size and a clear hover affordance.
   -------------------------------------------------------------------------- */
.services-grid {
    gap: var(--sp-6);
}
.service-item {
    height: 100%;
}
.service-content {
    background: var(--kld-surface);
    border: 1px solid var(--kld-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-8) var(--sp-6);
    height: 100%;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.service-content:hover {
    transform: translateY(-4px);
    border-color: rgba(203, 13, 13, .35);
    box-shadow: var(--shadow-md);
}
.service-content .icon-wrapper {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--sp-4);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--kld-red-soft);
    color: var(--kld-red);
}
.service-content h3 {
    font-size: 1.12rem;
    color: var(--kld-ink);
    margin-bottom: var(--sp-2);
}
.service-description {
    font-size: .95rem;
    line-height: 1.65;
    color: var(--kld-muted);
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   9. Stats
   -------------------------------------------------------------------------- */
.stats-section {
    padding-block: var(--sp-12);
}
.counter {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 700;
    line-height: 1;
}
.counter-title {
    font-size: .92rem;
    letter-spacing: .4px;
    opacity: .92;
    margin-top: var(--sp-2);
}

/* --------------------------------------------------------------------------
   10. Testimonials
   -------------------------------------------------------------------------- */
.testimonial-card {
    background: var(--kld-surface);
    border: 1px solid var(--kld-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-8) var(--sp-6);
    height: 100%;
    text-align: left;
    box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.testimonial-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--kld-body);
    font-style: italic;
}
.testimonial-author h5 {
    font-size: 1rem;
    margin-bottom: 0;
    color: var(--kld-ink);
}
.consulting-section .row > [class*="col-"] {
    margin-bottom: var(--sp-6);
}

/* --------------------------------------------------------------------------
   11. Buttons
   -------------------------------------------------------------------------- */
.btn {
    border-radius: 999px;
    padding: .75rem 1.75rem;
    font-size: .875rem;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.btn-lg {
    padding: .9rem 2.25rem;
    font-size: .95rem;
}
.btn-primary {
    background-color: var(--kld-red);
    border-color: var(--kld-red);
}
.btn-primary:hover {
    background-color: var(--kld-red-dark);
    border-color: var(--kld-red-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(203, 13, 13, .3);
}
.btn:disabled,
.btn[disabled] {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   12. Forms
   Clear resting/focus/invalid states, and room for the message the JS injects.
   -------------------------------------------------------------------------- */
.form-group,
.form-group.mb-3 {
    margin-bottom: var(--sp-4);
}
label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: .9rem;
    color: var(--kld-ink);
    margin-bottom: var(--sp-2);
}
label span[aria-label="obligatoire"] {
    color: var(--kld-red);
}
.form-control {
    border: 1.5px solid var(--kld-line);
    border-radius: 10px;
    padding: .75rem .9rem;
    font-size: 1rem;
    color: var(--kld-ink);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-control::placeholder {
    color: #9aa0a6;
}
.form-control:hover {
    border-color: #c9ced4;
}
.form-control:focus {
    border-color: var(--kld-red);
    box-shadow: 0 0 0 4px rgba(203, 13, 13, .14);
    outline: none;
}
/* Only flag a field after the visitor has actually interacted with it.
   :user-invalid does exactly that; plain :invalid would paint every empty
   required field red on page load. Older browsers simply skip this rule. */
.form-control:user-invalid {
    border-color: #d93025;
    box-shadow: 0 0 0 4px rgba(217, 48, 37, .12);
}
textarea.form-control {
    min-height: 8rem;
    resize: vertical;
}
.form-message {
    margin-top: var(--sp-4);
}

/* --------------------------------------------------------------------------
   13. Partner logo strip
   Logos were clipped at both edges of the marquee.
   -------------------------------------------------------------------------- */
.partner-logos {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-slide img {
    max-height: 46px;
    width: auto;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   14. Footer
   #6c757d on the dark footer is 3.86:1 - below the 4.5:1 minimum.
   -------------------------------------------------------------------------- */
.footer {
    padding-top: var(--sp-12);
}
.footer .text-muted,
.footer p,
.footer li {
    color: rgba(255, 255, 255, .78) !important;   /* ~9.5:1 */
}
.footer h5 {
    font-size: .95rem;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: var(--sp-4);
}
.footer a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    transition: color .2s var(--ease);
}
.footer a:hover {
    color: #fff;
    text-decoration: underline;
}
.footer .social-links a {
    display: inline-grid;
    place-items: center;
    width: 40px;                 /* 40px minimum touch target */
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    font-size: 1.05rem;
}
.footer .social-links a:hover {
    background: var(--kld-red);
}
.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   16. Cookie banner
   -------------------------------------------------------------------------- */
.cookie-consent-banner {
    background: rgba(18, 20, 22, .97);
    backdrop-filter: blur(10px);
    padding: var(--sp-6);
}
.cookie-consent-content {
    max-width: 1200px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    flex-wrap: wrap;
}
.cookie-consent-text h4 {
    font-size: 1rem;
    margin-bottom: var(--sp-1);
}
.cookie-consent-text p {
    font-size: .875rem;
    line-height: 1.6;
    margin-bottom: 0;
    color: rgba(255, 255, 255, .8);
}
.cookie-consent-buttons {
    display: flex;
    gap: var(--sp-3);
    margin-left: auto;
}
.cookie-accept-btn,
.cookie-decline-btn {
    border-radius: 999px;
    padding: .6rem 1.5rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: .875rem;
    min-height: 44px;
    cursor: pointer;
}
@media (max-width: 768px) {
    .cookie-consent-buttons {
        margin-left: 0;
        width: 100%;
    }
    .cookie-accept-btn,
    .cookie-decline-btn {
        flex: 1;
    }
}

/* --------------------------------------------------------------------------
   17. Page headers on inner pages
   These used a hard-coded margin-top: 110px, which breaks whenever the navbar
   height changes. Pad from the top instead.
   -------------------------------------------------------------------------- */
.contact-header,
.recruitment-header,
.privacy-header,
.about-header {
    margin-top: 0 !important;
    padding-top: calc(96px + var(--sp-12)) !important;
    padding-bottom: var(--sp-12) !important;
}

/* --------------------------------------------------------------------------
   18. Tablet
   The stylesheet only had 768px and 1600px breakpoints, so 769-1199px - most
   tablets - fell through to the desktop layout.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1199px) {
    .container {
        padding-inline: var(--sp-6) !important;
    }
    .feature-grid,
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .container {
        padding-inline: var(--sp-4) !important;
    }
    section {
        padding-block: var(--sp-12) !important;
    }
    .feature-grid,
    .services-grid {
        grid-template-columns: 1fr;
    }
    .stats-section .counter {
        font-size: 2rem;
    }
}

/* --------------------------------------------------------------------------
   19. Contact page details list
   Replaces the run of <p><strong>Label :</strong> value</p> lines. Phone and
   email are now links, so they dial/compose on a phone instead of having to
   be copied by hand.
   -------------------------------------------------------------------------- */
.contact-details {
    margin-top: var(--sp-6);
    display: grid;
    gap: var(--sp-4);
}
.contact-details li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4);
    background: var(--kld-surface);
    border: 1px solid var(--kld-line);
    border-radius: var(--radius);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.contact-details li:hover {
    border-color: rgba(203, 13, 13, .3);
    box-shadow: var(--shadow-sm);
}
.contact-details i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--kld-red-soft);
    color: var(--kld-red);
    font-size: 1.05rem;
}
.contact-details span {
    display: block;
    line-height: 1.55;
    color: var(--kld-body);
}
.contact-details strong {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--kld-muted);
    margin-bottom: 2px;
}
.contact-details a {
    color: var(--kld-red);
    text-decoration: none;
    font-weight: 500;
}
.contact-details a:hover {
    text-decoration: underline;
}

/* Map: match the height of the details column and round it to the same radius */
.map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 340px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--kld-line) !important;
}
.contact-info .row {
    align-items: stretch;
}
.contact-info .map {
    display: flex;
    flex-direction: column;
}
.contact-info .map h2 {
    flex: 0 0 auto;
}

/* Give the form some breathing room and a card of its own */
.contact-form {
    background: var(--kld-surface-alt) !important;
    padding-block: var(--sp-16) !important;
}
.contact-form form {
    background: var(--kld-surface);
    border: 1px solid var(--kld-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-8);
    box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   20. Cascade corrections
   Three fixes that need higher specificity than rules earlier in this file:

   a) .navbar carries `background: transparent !important` and
      `.navbar-light .navbar-nav .nav-link` carries `color:#222 !important`.
      When two declarations are both !important, specificity decides, so the
      selectors below are deliberately one level heavier.
   b) Section 7 sets a global `p { color: ... }` for readable body copy, which
      also hit paragraphs sitting on the dark/red panels. Restore those.
   c) The hamburger icon is drawn with a white stroke, which disappears on the
      inner pages now that their navbar is solid white.
   -------------------------------------------------------------------------- */

/* (a) Navbar over the homepage hero */
body.has-hero .navbar {
    background: linear-gradient(180deg, rgba(10, 11, 12, .8) 0%, rgba(10, 11, 12, 0) 100%) !important;
}
body.has-hero .navbar.navbar-light .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .92) !important;
}
body.has-hero .navbar.navbar-light .navbar-nav .nav-link:hover,
body.has-hero .navbar.navbar-light .navbar-nav .nav-link.active {
    color: #fff !important;
    transform: none;
}

/* Solid bar once scrolled, on every page */
.navbar.scrolled,
body.has-hero .navbar.scrolled {
    background: rgba(255, 255, 255, .97) !important;
    backdrop-filter: saturate(180%) blur(12px);
    box-shadow: var(--shadow-sm);
}
.navbar.scrolled.navbar-light .navbar-nav .nav-link,
body.has-hero .navbar.scrolled.navbar-light .navbar-nav .nav-link {
    color: var(--kld-ink) !important;
}
.navbar.scrolled.navbar-light .navbar-nav .nav-link:hover,
.navbar.scrolled.navbar-light .navbar-nav .nav-link.active,
body.has-hero .navbar.scrolled.navbar-light .navbar-nav .nav-link.active {
    color: var(--kld-red) !important;
}

/* Inner pages: no hero photo behind the bar, so it is solid from the start */
body:not(.has-hero) .navbar {
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: var(--shadow-sm);
}
body:not(.has-hero) .navbar.navbar-light .navbar-nav .nav-link {
    color: var(--kld-ink) !important;
}
body:not(.has-hero) .navbar.navbar-light .navbar-nav .nav-link:hover,
body:not(.has-hero) .navbar.navbar-light .navbar-nav .nav-link.active {
    color: var(--kld-red) !important;
    transform: none;
}

/* Collapsed mobile menu is a white panel on every page */
@media (max-width: 991px) {
    body .navbar.navbar-light .navbar-nav .nav-link,
    body.has-hero .navbar.navbar-light .navbar-nav .nav-link {
        color: var(--kld-ink) !important;
    }
    body .navbar.navbar-light .navbar-nav .nav-link.active,
    body.has-hero .navbar.navbar-light .navbar-nav .nav-link.active {
        color: var(--kld-red) !important;
    }
}

/* (b) Text sitting on dark or red panels */
.cta-section p,
.cta-section h2,
.stats-section .counter,
.stats-section .counter-title,
.carousel-caption p,
.carousel-caption .sub-title,
.title-section p,
.title-section .main-title,
.cookie-consent-banner p,
.cookie-consent-text h4 {
    color: #fff;
}
.cta-section p,
.carousel-caption .sub-title {
    color: rgba(255, 255, 255, .92);
}
.title-section .process-card {
    color: rgba(255, 255, 255, .95);
}

/* (c) Hamburger icon must be dark wherever the bar is white */
body:not(.has-hero) .navbar .navbar-toggler-icon,
.navbar.scrolled .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(22, 24, 27, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
body:not(.has-hero) .navbar .navbar-toggler {
    border-color: var(--kld-line);
}

/* --------------------------------------------------------------------------
   21. Tap targets
   Footer and legal links rendered ~22px tall. WCAG 2.5.8 asks for 24px, and
   24-44px is the practical range for thumbs. Padding gets them there without
   changing the visual rhythm much.
   -------------------------------------------------------------------------- */
.footer-links a,
.footer .footer-contact a,
.footer-bottom a,
.footer .text-muted[href],
.footer a[href*="privacy"] {
    display: inline-block;
    padding-block: var(--sp-2);
    min-height: 40px;
    line-height: 24px;
}
.footer-links li {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    /* Give the legal links their own row rather than a cramped pair */
    .footer-bottom .col-md-6,
    .footer .row.align-items-center .col-md-6 {
        text-align: center !important;
    }
    /* Needs to outrank `.footer .text-muted[href]` above (0,3,0), so the
       class is named explicitly rather than relying on `a`. */
    .footer a.text-muted[href*="privacy"] {
        display: block;
        margin-inline: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   22. Services section background
   Was an inline style pointing at a 5760x3840 / 3 MB JPEG with
   background-attachment: fixed. iOS ignores `fixed` and it causes repaint
   jank elsewhere, so it's gone. image-set() serves WebP to browsers that
   support it and falls back to JPEG otherwise; the small file is used on
   narrow screens where the large one would be wasted bytes.
   -------------------------------------------------------------------------- */
.services-bg {
    position: relative;
    background-image: image-set(url("../images/background1-960.webp") type("image/webp"),
                                url("../images/background1-960.jpg")  type("image/jpeg"));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media (min-width: 961px) {
    .services-bg {
        background-image: image-set(url("../images/background1-1920.webp") type("image/webp"),
                                    url("../images/background1-1920.jpg")  type("image/jpeg"));
    }
}
/* Safari needed the -webkit- prefix for a long time; harmless where it doesn't. */
@supports (background-image: -webkit-image-set(url("a") 1x)) {
    .services-bg {
        background-image: -webkit-image-set(url("../images/background1-960.jpg") 1x);
    }
    @media (min-width: 961px) {
        .services-bg {
            background-image: -webkit-image-set(url("../images/background1-1920.jpg") 1x);
        }
    }
}
.services-bg__scrim {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .92);
    z-index: 1;
}
.services-bg > .container {
    position: relative;
    z-index: 2;
}

/* <picture> in the carousel must fill the slide the way a bare <img> did */
.carousel-item picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* --------------------------------------------------------------------------
   23. About page sections
   The page previously held a single block and then stopped. These are the
   mission / values / approach / domains blocks.
   -------------------------------------------------------------------------- */
.bg-light-alt {
    background: var(--kld-surface-alt);
}

.mission-statement {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.6;
    color: var(--kld-ink);
    font-weight: 500;
    margin-bottom: var(--sp-6);
}

/* Values */
.value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-6);
}
.value-card {
    background: var(--kld-surface);
    border: 1px solid var(--kld-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-8) var(--sp-6);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.value-card:hover {
    transform: translateY(-4px);
    border-color: rgba(203, 13, 13, .35);
    box-shadow: var(--shadow-md);
}
.value-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--sp-4);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--kld-red-soft);
    color: var(--kld-red);
    font-size: 1.5rem;
}
.value-card h3 {
    font-size: 1.05rem;
    color: var(--kld-ink);
    margin-bottom: var(--sp-2);
}
.value-card p {
    font-size: .94rem;
    line-height: 1.6;
    color: var(--kld-muted);
    margin-bottom: 0;
}

/* Approach - a numbered sequence, so an <ol> is the right element */
.approach-steps {
    list-style: none;
    counter-reset: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-6);
}
.approach-step {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    padding: var(--sp-6);
    background: var(--kld-surface);
    border: 1px solid var(--kld-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.approach-num {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--kld-red);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
}
.approach-step h3 {
    font-size: 1.02rem;
    color: var(--kld-ink);
    margin-bottom: var(--sp-2);
}
.approach-step p {
    font-size: .94rem;
    line-height: 1.6;
    color: var(--kld-muted);
    margin-bottom: 0;
}

/* Domains */
.domain-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--sp-4);
}
.domain-list li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-6);
    background: var(--kld-surface);
    border: 1px solid var(--kld-line);
    border-radius: var(--radius);
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: var(--kld-ink);
}
.domain-list i {
    color: var(--kld-red);
    font-size: 1.15rem;
}

.btn-outline-dark {
    border-radius: 999px;
    border-width: 1.5px;
}

/* Refinements after reviewing the rendered about page */
.approach-steps {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: stretch;
}
.approach-step {
    flex-direction: column;
    gap: var(--sp-3);
    height: 100%;
}
.approach-step h3 {
    font-size: 1.05rem;
    margin-top: var(--sp-1);
}

/* 6 domains: 3 columns gives two full rows instead of an orphan on row two */
.domain-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
    .domain-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .domain-list { grid-template-columns: 1fr; }
}

/* The intro block sat in a tall row with the stats; align to the top instead */
.about-intro .row {
    align-items: start;
}

/* --------------------------------------------------------------------------
   24. Recruitment page
   -------------------------------------------------------------------------- */

/* The two job cards were top-aligned but unequal height, so their bottom
   edges (and their "Postuler" buttons) didn't line up. */
.position-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--kld-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.position-card .btn {
    margin-top: auto;
    align-self: flex-start;
}
.position-card ul {
    margin-bottom: var(--sp-6);
}
.position-card li {
    line-height: 1.7;
}
.position-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--kld-line);
}
.position-details span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 0 !important;
    font-size: .88rem;
    color: var(--kld-muted);
}

/* Benefit tiles */
.benefit-item {
    background: var(--kld-surface);
    border: 1px solid var(--kld-line);
    border-radius: var(--radius-lg);
    padding: var(--sp-8) var(--sp-6);
    height: 100%;
    box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.benefit-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.benefit-item h4 {
    font-size: 1.05rem;
    color: var(--kld-ink);
    margin-bottom: var(--sp-2);
}
.benefit-item p {
    font-size: .94rem;
    color: var(--kld-muted);
    margin-bottom: 0;
}

/* The application form is the point of the page - give it the same card
   treatment as the contact form. */
.application-form {
    border: 1px solid var(--kld-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* File input: the default control is a bare grey button that doesn't match
   anything else on the page. */
input[type="file"].form-control {
    padding: 0;
    border: 1.5px dashed var(--kld-line);
    background: var(--kld-surface-alt);
    cursor: pointer;
}
input[type="file"].form-control::file-selector-button {
    margin-right: var(--sp-4);
    padding: .75rem 1.25rem;
    border: 0;
    border-radius: 10px 0 0 10px;
    background: var(--kld-ink);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    transition: background .2s var(--ease);
}
input[type="file"].form-control:hover {
    border-color: var(--kld-red);
}
input[type="file"].form-control:hover::file-selector-button {
    background: var(--kld-red);
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2343474d'%3e%3cpath d='M8 11L3 6h10z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 14px;
    padding-right: 2.4rem;
}

/* Consent row */
.consent-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--kld-surface-alt);
    border-radius: var(--radius);
    margin-bottom: var(--sp-6);
}
.consent-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--kld-red);
    cursor: pointer;
}
.consent-row label {
    margin-bottom: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--kld-body);
    cursor: pointer;
}
.consent-row a {
    color: var(--kld-red);
}

/* --------------------------------------------------------------------------
   25. Two contrast fixes found by auditing every text node against its
       computed background.
   -------------------------------------------------------------------------- */

/* (a) .main-title paints its glyphs with `background: white` +
   `-webkit-background-clip: text` + `-webkit-text-fill-color: transparent`.
   That was for a gradient effect which is now commented out, so it is an
   elaborate way of writing `color: #fff` - and it breaks to INVISIBLE text in
   any engine that doesn't support background-clip:text. Back to a plain
   colour, which also makes the heading colour controllable again. */
.main-title {
    background: none !important;
    -webkit-background-clip: border-box;
            background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: #fff;
}

/* (b) The recruitment banner used to be a red-to-black gradient, which needed
   white text. It now uses the same light .page-header as the other inner
   pages, so the colour comes from .page-header p instead. */

/* --------------------------------------------------------------------------
   26. HOME PAGE
   -------------------------------------------------------------------------- */

/* Services: one grid of five. It used to be a 3-card grid plus a separate
   2-card grid, so the bottom row rendered wider than the top one. */
.services-section {
    position: relative;
}
.services-section .container {
    position: relative;
    z-index: 2;
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-6);
    margin: 0;
}
/* Five items in a three-column grid leaves two on the last row; centre them
   rather than stretching them to double width. */
@media (min-width: 1200px) {
    .services-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    .services-grid > .service-item {
        grid-column: span 2;
    }
    .services-grid > .service-item:nth-child(4) {
        grid-column: 2 / span 2;
    }
    .services-grid > .service-item:nth-child(5) {
        grid-column: 4 / span 2;
    }
}

/* Standard lead paragraph under a section title */
.section-intro {
    max-width: 46rem;
    margin: 0 auto var(--sp-12);
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--kld-body);
}
.section-intro strong {
    color: var(--kld-ink);
}

/* Stats */
.stat-item {
    padding-inline: var(--sp-2);
}

/* Carousel indicators: the hero holds two slides and nothing said so. */
.carousel-indicators {
    z-index: 4;
    margin-bottom: var(--sp-6);
}
.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background-color: rgba(255, 255, 255, .45);
    opacity: 1;
    transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.carousel-indicators .active {
    background-color: #fff;
    transform: scale(1.25);
}

/* Pause control - required so auto-advancing content can be stopped
   (WCAG 2.2.2). Sits opposite the chat badge so the two don't collide. */
.carousel-pause {
    position: absolute;
    left: var(--sp-6);
    bottom: var(--sp-6);
    z-index: 5;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    background: rgba(10, 11, 12, .45);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: background .2s var(--ease), border-color .2s var(--ease);
}
.carousel-pause:hover {
    background: rgba(10, 11, 12, .75);
    border-color: #fff;
}
/* Two bars = pause; swapped for a triangle when already paused */
.carousel-pause__icon {
    width: 12px;
    height: 13px;
    border-left: 3.5px solid #fff;
    border-right: 3.5px solid #fff;
    box-sizing: border-box;
}
.carousel-pause.is-paused .carousel-pause__icon {
    width: 0;
    height: 0;
    border-left: 12px solid #fff;
    border-right: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    margin-left: 3px;
}
@media (max-width: 768px) {
    .carousel-pause {
        left: var(--sp-4);
        bottom: var(--sp-4);
        width: 38px;
        height: 38px;
    }
}

/* Carousel arrows were very low contrast against a light photo */
.carousel-control-prev,
.carousel-control-next {
    width: 8%;
    opacity: 1;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 44px;
    height: 44px;
    padding: 12px;
    border-radius: 50%;
    background-color: rgba(10, 11, 12, .4);
    background-size: 45%;
    transition: background-color .2s var(--ease);
}
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    background-color: rgba(10, 11, 12, .8);
}

/* Partner logos: they were greyscale, small and lost in the whitespace */
.partners-section {
    padding-block: var(--sp-12);
}
.logo-slide {
    display: grid;
    place-items: center;
    padding-inline: var(--sp-6);
}
.logo-slide img {
    max-height: 54px;
    width: auto;
    filter: grayscale(100%);
    opacity: .62;
    transition: filter .3s var(--ease), opacity .3s var(--ease), transform .3s var(--ease);
}
.logo-slide img:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.06);
}

/* About block: its heading was left-aligned sentence case while every other
   section title was centred - now consistent, with the rule on the left. */
.about-section .section-title {
    text-align: left;
}
.about-feature-box {
    border: 1px solid var(--kld-line);
    height: 100%;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.about-feature-box:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.about-feature-box h5 {
    font-size: 1rem;
    color: var(--kld-ink);
}
.about-feature-box p {
    font-size: .92rem;
    color: var(--kld-muted);
}

/* Brand logo swap.
   Only the homepage has a photographic hero behind the navbar. The black
   wordmark is unreadable there (measured: backdrop luminance 31/255), so the
   white logo shows until the bar turns solid on scroll. */
.brand-logo {
    display: block;
    height: 70px;
    width: auto;
    transition: opacity .25s var(--ease);
}
.brand-logo--dark {
    display: none;
}
.navbar.scrolled .brand-logo--light {
    display: none;
}
.navbar.scrolled .brand-logo--dark {
    display: block;
}
.navbar.scrolled .brand-logo {
    height: 52px;
}

/* --------------------------------------------------------------------------
   27. SOCIÉTÉ (about) page
   -------------------------------------------------------------------------- */

/* Shared inner-page header. about.html was borrowing .contact-header, which
   is defined in contact.html's own inline <style> - so a change there silently
   moved this page. It now has its own. */
.page-header {
    background: var(--kld-surface-alt);
    text-align: center;
    margin-top: 0;
    padding-top: calc(96px + var(--sp-12));
    padding-bottom: var(--sp-12);
    border-bottom: 1px solid var(--kld-line);
}
.page-header h1 {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    color: var(--kld-ink);
    margin-bottom: var(--sp-3);
    margin-top: 35px;
}
.page-header p {
    font-size: 1.05rem;
    color: var(--kld-muted);
    margin-bottom: 0;
}

/* Intro photograph */
.about-photo {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.about-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Tick list - replaces four <li> each carrying utility classes */
.check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-6);
    display: grid;
    gap: var(--sp-3);
}
.check-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    line-height: 1.6;
}
.check-list i {
    color: var(--kld-red);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* A stat that doesn't count up needs to match the ones that do */
.stat-static {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

/* Full-width photo band with a line of copy over it */
.photo-band {
    position: relative;
    isolation: isolate;
}
.photo-band img {
    display: block;
    width: 100%;
    height: clamp(220px, 34vw, 380px);
    object-fit: cover;
}
.photo-band__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(90deg, rgba(16, 18, 20, .82) 0%, rgba(16, 18, 20, .55) 100%);
}
.photo-band__quote {
    max-width: 34rem;
    margin: 0;
    text-align: center;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.1rem, 2.2vw, 1.6rem);
    font-weight: 600;
    line-height: 1.45;
}

/* Photo band refinements after reviewing the render */
.photo-band img {
    /* the source is a group high-five; bias the crop upward to keep faces */
    object-position: center 32%;
}
.photo-band__overlay {
    /* a straight left-to-right gradient left the right edge washed out */
    background: linear-gradient(180deg, rgba(16, 18, 20, .45) 0%, rgba(16, 18, 20, .75) 100%);
}
.photo-band__quote {
    margin-inline: auto;   /* .container is full width, so the quote needs centring itself */
}

/* --------------------------------------------------------------------------
   28. RECRUTEMENT page
   -------------------------------------------------------------------------- */

/* Job card subheadings, replacing <p><strong>Description:</strong></p> */
.position-subhead {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--kld-muted);
    margin: var(--sp-6) 0 var(--sp-2);
}
.position-card > .position-subhead:first-of-type {
    margin-top: var(--sp-4);
}
.position-card ul {
    padding-left: 1.15rem;
}

/* Custom file control.
   The native input prints Chrome's own "Choose File / No file chosen" in the
   browser UI language - English for most visitors here. The real input stays
   in the accessibility tree (opacity, not display:none) and is driven by its
   <label>, so keyboard and screen-reader behaviour is unchanged. */
.file-field {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding: var(--sp-3);
    border: 1.5px dashed var(--kld-line);
    border-radius: var(--radius);
    background: var(--kld-surface-alt);
    transition: border-color .2s var(--ease), background .2s var(--ease);
}
.file-field:hover {
    border-color: var(--kld-red);
}
.file-field__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.file-field__button {
    margin: 0;
    padding: .6rem 1.25rem;
    border-radius: 999px;
    background: var(--kld-ink);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .5px;
    cursor: pointer;
    transition: background .2s var(--ease);
}
.file-field__button:hover {
    background: var(--kld-red);
}
/* The input is off-screen, so its focus ring has to be drawn on the label */
.file-field__input:focus-visible + .file-field__button {
    outline: 3px solid var(--kld-red);
    outline-offset: 3px;
}
.file-field__name {
    font-size: .9rem;
    color: var(--kld-muted);
    word-break: break-all;
}
.file-field__name.has-file {
    color: var(--kld-ink);
    font-weight: 500;
}
.label-hint {
    font-weight: 400;
    color: var(--kld-muted);
}

/* Closing note under the recruitment process */
.process-note {
    margin: var(--sp-8) 0 0;
    text-align: center;
    color: var(--kld-muted);
}
.process-note a {
    color: var(--kld-red);
    font-weight: 500;
}

/* The recruitment banner is its own treatment, but should share the inner-page
   spacing so it lines up with the other pages. */
.recruitment-header {
    margin-top: 0 !important;
    padding-top: calc(96px + var(--sp-12)) !important;
    padding-bottom: var(--sp-12) !important;
}
.recruitment-header h1 {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    margin-bottom: var(--sp-3);
}

/* A shorter band where the page already has plenty of vertical rhythm */
.photo-band--slim img {
    height: clamp(180px, 24vw, 260px);
    object-position: center 40%;
}

/* --------------------------------------------------------------------------
   29. Recruitment page - rules moved out of the page's inline <style>
   That block sat after the stylesheet link, so it silently won on
   border-radius (15px vs the shared 18px), padding (30/40px vs the spacing
   scale) and added a margin-bottom that fought the equal-height cards.
   Re-expressed here with the design tokens so this page matches the others.
   -------------------------------------------------------------------------- */
/* The banner now shares the light .page-header treatment used on Société and
   Contact, so nothing page-specific is needed here. */

.position-card {
    background: var(--kld-surface);
    padding: var(--sp-8);
    margin-bottom: var(--sp-6);
}
.position-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.position-title {
    color: var(--kld-red);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--sp-4);
}
.position-details i {
    color: var(--kld-red);
}

.benefits-section {
    background-color: var(--kld-surface-alt);
    padding-block: var(--sp-16);
}
.benefit-item {
    margin-bottom: 0;          /* the grid gap handles spacing now */
}
.benefit-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--kld-red), #ff4d4d);
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto var(--sp-4);
    color: #fff;
    font-size: 1.6rem;
}

.application-form {
    background: var(--kld-surface);
    padding: var(--sp-8);
}
@media (min-width: 769px) {
    .application-form {
        padding: var(--sp-12);
    }
}

/* --------------------------------------------------------------------------
   30. CONTACT page - rules moved out of the page's inline <style>
   That block loaded after the stylesheet and won on field corners (8px vs the
   shared 10px), border weight (2px vs 1.5px) and the submit button size
   (1.1rem vs .875rem), so this form did not match the application form.
   -------------------------------------------------------------------------- */
.contact-info {
    padding-block: var(--sp-16);
}
.contact-form {
    background: var(--kld-surface-alt);
    margin-top: 0;
}

/* The two columns are a details list and a map; keep their headings aligned */
.contact-info .section-title {
    text-align: left;
    margin-bottom: var(--sp-6);
}
.contact-info .section-title .title-underline {
    margin-left: 0;
}

.form-lead {
    max-width: 34rem;
    margin: 0 auto var(--sp-8);
    color: var(--kld-muted);
    font-size: .98rem;
    line-height: 1.7;
}
.form-lead a {
    color: var(--kld-red);
    font-weight: 500;
}

/* The map fills its column and matches the card radius used elsewhere */
.map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    border: 1px solid var(--kld-line) !important;
    border-radius: var(--radius-lg);
}

@media (max-width: 991px) {
    .contact-info .map {
        margin-top: var(--sp-8);
    }
    .map iframe {
        min-height: 300px;
    }
}

/* The original stylesheet also carries `.contact-form .form-control` (0,2,0)
   near the top of this file, which outranks the generic `.form-control` token
   rule. Restated here so the contact fields match the application form. */
.contact-form .form-control {
    border-radius: 10px;
    border: 1.5px solid var(--kld-line);
    padding: .75rem .9rem;
    margin-bottom: 0;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.contact-form .form-control:hover {
    border-color: #c9ced4;
}
.contact-form .form-control:focus {
    border-color: var(--kld-red);
    box-shadow: 0 0 0 4px rgba(203, 13, 13, .14);
}
.contact-form .form-control:user-invalid {
    border-color: #d93025;
    box-shadow: 0 0 0 4px rgba(217, 48, 37, .12);
}
.contact-form .form-group {
    margin-bottom: var(--sp-4);
}

/* --------------------------------------------------------------------------
   31. Partner logo marquee - seamless loop
   The earlier rules animated ONE copy of the track to translateX(-100%).
   That 100% is the track's own width, which the container clamps, so the strip
   ran out of logos and jumped back to the start. script.js now appends a
   duplicate set and this animation travels exactly -50%, which lands the copy
   where the original began - no visible reset.
   -------------------------------------------------------------------------- */
.logo-slider {
    display: flex;
    align-items: center;
    animation: none;                  /* cancel the old `slide` animation */
    will-change: auto;
}

.logo-slider.is-marquee {
    width: max-content;
    flex-wrap: nowrap;
    animation: kld-marquee var(--marquee-duration, 40s) linear infinite;
    will-change: transform;
}

@keyframes kld-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Let people stop it to read a logo */
.partner-logos:hover .logo-slider.is-marquee,
.logo-slider.is-marquee:focus-within {
    animation-play-state: paused;
}

/* The slides had a staggered fade-in that only covered the first eight
   children, so the duplicated set would have behaved differently. The marquee
   is the motion now. */
.logo-slide {
    flex: 0 0 auto;
    width: 170px;
    height: 72px;
    margin: 0 var(--sp-8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transform: none;
    animation: none;
}
.logo-slide img {
    max-width: 100%;
    max-height: 52px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    .logo-slide {
        width: 130px;
        height: 60px;
        margin: 0 var(--sp-6);
    }
    .logo-slide img {
        max-height: 40px;
    }
}

/* With reduced motion the strip doesn't scroll, so a single nowrap row would
   clip the last logos with no way to reach them. Let it wrap instead. */
@media (prefers-reduced-motion: reduce) {
    .logo-slider {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: var(--sp-4);
        width: auto;
    }
    .partner-logos {
        -webkit-mask-image: none;
                mask-image: none;
    }
}