/* ==========================================================================
   Magnum Cars — stylesheet
   Showroom/garage hero · section-by-section
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Custom properties
   -------------------------------------------------------------------------- */
:root {
    --bg:            #1E2326;
    --accent:        #4a5560;
    --accent-light:  #6b6e70;
    --accent-hover:  #5a6573;
    --text:          #FAFAFA;
    --text-muted:    #888888;
    --border:        rgba(255, 255, 255, 0.12);
    --border-soft:   rgba(255, 255, 255, 0.18);

    --font-header:   'Inter Tight', system-ui, -apple-system, sans-serif;
    --font-body:     'Inter Tight', system-ui, -apple-system, sans-serif;
    --font:          var(--font-body);

    --container:     1280px;
    --gutter:        1.5rem;

    --ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --t:             0.3s var(--ease);

    /* Premium motion easing — voor scroll reveals + entrance animations */
    --ease-out-smooth:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-snappy:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-fast:  0.25s var(--ease-out-smooth);
    --transition-base:  0.4s var(--ease-out-smooth);
    --transition-slow:  0.6s var(--ease-out-smooth);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text);
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
ul { list-style: none; padding: 0; margin: 0; }
a { color: inherit; text-decoration: none; transition: color var(--t), opacity var(--t), border-color var(--t), background-color var(--t), transform var(--t); }
button { font: inherit; cursor: pointer; background: transparent; border: 0; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.15; }
p { margin: 0; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* --------------------------------------------------------------------------
   3. Header — logo links, nav midden, CTA + lang-dropdown rechts
   -------------------------------------------------------------------------- */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 32px 0 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    transition: background-color 0.3s ease,
                backdrop-filter 0.3s ease,
                -webkit-backdrop-filter 0.3s ease,
                padding 0.3s ease,
                border-color 0.3s ease;
}
/* Subpages — header krijgt eigen donkere achtergrond (geen hero eronder) */
.site-header.nav-dark {
    background: linear-gradient(
        135deg,
        #0a0c0f 0%,
        #1E2326 25%,
        #343a44 50%,
        #1E2326 75%,
        #0a0c0f 100%
    );
}
/* Scroll-state — homepage (en subpage) krijgen blurred dark glass na 50px */
.site-header.is-scrolled {
    background: linear-gradient(
        135deg,
        rgba(10, 12, 15, 0.92) 0%,
        rgba(30, 35, 38, 0.92) 25%,
        rgba(52, 58, 68, 0.92) 50%,
        rgba(30, 35, 38, 0.92) 75%,
        rgba(10, 12, 15, 0.92) 100%
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 12px 0 8px 0;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.header-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}
.header-logo:hover { transform: scale(1.05); }
.header-logo img {
    height: 60px !important;
    width: auto !important;
    display: block;
}

.header-nav {
    display: flex;
    gap: 44px !important;
    flex: 1;
    justify-content: center;
}
.nav-link {
    font-family: 'Inter Tight', system-ui, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    transition: color 0.3s ease;
}
.nav-link:hover,
.nav-link.is-active { color: #ffffff !important; }

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-cta {
    display: inline-flex;
    align-items: center;
    padding: 12px 26px !important;
    background: #1E2326;
    color: #ffffff;
    font-family: 'Inter Tight', system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    text-decoration: none;
    border-radius: 999px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.header-cta:hover {
    background: #4a5560;
    color: #ffffff;
    transform: translateY(-1px);
}

.language-dropdown { position: relative; }
.language-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px !important;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Inter Tight', system-ui, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.language-dropdown-toggle:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
}
.language-dropdown-toggle svg { transition: transform 0.3s ease; }
.language-dropdown:hover .language-dropdown-toggle svg,
.language-dropdown:focus-within .language-dropdown-toggle svg {
    transform: rotate(180deg);
}

.language-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: rgba(30, 35, 38, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 200;
}
.language-dropdown:hover .language-dropdown-menu,
.language-dropdown:focus-within .language-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.language-dropdown-menu a {
    display: block;
    padding: 10px 14px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-family: 'Inter Tight', system-ui, sans-serif !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 6px;
}
.language-dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
.language-dropdown-menu a.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

/* Hamburger toggle — verborgen op desktop, zichtbaar onder 968px */
.nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}
.nav-toggle:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
}
.nav-toggle span {
    display: block;
    width: 16px;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu — fullscreen slide-in van rechts, blurred dark glass */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: rgba(30, 35, 38, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 110;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.4s;
}
.mobile-menu.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0s;
}
.mobile-menu-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    padding: 100px 32px 60px 32px;
    max-width: 480px;
}
.mobile-menu-link {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 1.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
}
.mobile-menu-link:hover,
.mobile-menu-link.is-active {
    color: #ffffff;
}
.mobile-menu-cta {
    display: inline-flex;
    align-items: center;
    margin-top: 24px;
    padding: 14px 28px;
    background: #ffffff;
    color: #0A0A0A;
    border-radius: 999px;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.mobile-menu-cta:hover {
    background: #f0f0f0;
    color: #0A0A0A;
    transform: translateY(-2px);
}

@media (max-width: 968px) {
    .header-nav { display: none; }
    .header-inner { padding: 0 20px; }
    .header-cta { display: none; }
    .nav-toggle { display: inline-flex; }
}
@media (min-width: 969px) {
    .mobile-menu { display: none; }
}
/* Op brede schermen extra ademruimte aan de zijkanten */
@media (min-width: 1200px) {
    .header-inner {
        padding: 0 60px !important;
    }
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2.25rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    border-radius: 2px;
    border: 1px solid transparent;
    transition: background-color var(--t), border-color var(--t), color var(--t), transform var(--t);
    white-space: nowrap;
}
.btn .arrow { display: inline-block; transition: transform var(--t); }
.btn:hover .arrow { transform: translateX(3px); }

.btn-primary {
    background: var(--accent);
    color: var(--text);
    border-color: var(--accent);
}
.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--text);
    transform: translateY(-1px);
}

.btn-ghost {
    background: var(--accent-light);
    color: var(--text);
    border-color: var(--accent-light);
}
.btn-ghost:hover {
    background: #7a7d7f;
    border-color: #7a7d7f;
    color: var(--text);
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   5. Hero Vista — left-aligned heading, bottom-right stats, pill buttons
   -------------------------------------------------------------------------- */
.hero-vista {
    position: relative;
    min-height: 100vh;
    background-image: 
        linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.55) 0%,
            rgba(0, 0, 0, 0.35) 50%,
            rgba(0, 0, 0, 0.15) 100%
        ),
        url('../images/hero/showroom.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}
/* Subtiele top-gradient over hero zodat header altijd leesbaar is
   over lichte foto-delen — site blijft light & airy, geen zware bar. */
.hero-vista::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 280px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.25) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 1;
    pointer-events: none;
    display: block;
}
.hero-vista::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 320px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.2) 60%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 1;
    pointer-events: none;
}
.hero-vista-content {
    position: relative;
    z-index: 10;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 220px 60px 0 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.hero-vista-left { max-width: 720px; }
.hero-eyebrow {
    display: none;
}
.eyebrow-line { display: none; }
.scroll-indicator {
    display: none;
}
.hero-vista-subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
    max-width: 700px;
    margin: 0 0 40px 0;
}
.hero-vista-cta { display: flex; gap: 12px; margin-bottom: 0; }

/* Utility — voorkomt afbreken midden in een woord/woordgroep (bv. "Nieuwerkerk a/d IJssel") */
.nowrap { white-space: nowrap; }
.hero-vista-cta .btn-primary,
.hero-vista-cta .btn-secondary,
.btn-pill-filled,
.btn-pill-outline,
.hero-vista-cta a {
    border-radius: 999px !important;
    padding: 14px 28px !important;
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.25s ease;
}

.hero-vista-cta .btn-primary,
.btn-pill-filled {
    background: #ffffff !important;
    color: #1E2326 !important;
    border: none !important;
}

.hero-vista-cta .btn-secondary,
.btn-pill-outline {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.hero-vista-cta .btn-primary:hover,
.btn-pill-filled:hover {
    background: #f0f0f0 !important;
    transform: translateY(-1px);
}

.hero-vista-cta .btn-secondary:hover,
.btn-pill-outline:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}
.hero-vista-bottom {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 60px;
    max-width: 1400px;
    margin: 0 auto;
    z-index: 10;
}
.hero-vista-tagline {
    font-family: var(--font-body) !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    max-width: 420px !important;
    margin: 0 !important;
}
.hero-vista-stats {
    display: flex !important;
    gap: 64px !important;
}
.hero-vista-stat-number {
    font-family: var(--font-body) !important;
    font-size: 2.5rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 14px !important;
}
.hero-vista-stat-label {
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    letter-spacing: 0 !important;
}

.scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 2.5rem;
    z-index: 10;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    pointer-events: none;
}
.scroll-indicator span {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}

@media (max-width: 968px) {
    .hero-vista-content { padding: 140px 24px 40px 24px; }
    .hero-vista-title { font-size: clamp(2.2rem, 8vw, 3.5rem); }
    .hero-vista-bottom { flex-direction: column; align-items: start; gap: 32px; }
    .hero-vista-stats { gap: 32px; }
    .stat-number { font-size: 2rem; }
}

/* --------------------------------------------------------------------------
   6. Responsive — tablet (768px+)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .nav-inner { padding: 1.5rem 2.25rem; }

}

/* --------------------------------------------------------------------------
   7. Responsive — desktop (1024px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .nav-toggle { display: none; }
    .primary-nav {
        display: block;
        position: static;
        background: transparent;
        backdrop-filter: none;
        padding: 0;
        animation: none;
    }
    .primary-nav .nav-list {
        flex-direction: row;
        gap: 2.75rem;
    }
    .primary-nav .nav-item a {
        font-size: 0.95rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.6);
    }
    .primary-nav .nav-item a:hover,
    .primary-nav .nav-item.is-active a { color: #FFFFFF; }

    .nav-inner { padding: 1.5rem 3rem; }
}

/* --------------------------------------------------------------------------
   8. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .btn:hover, .btn-primary:hover, .btn-ghost:hover { transform: none; }
    .fade-up {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   9. Floating contact buttons (rechts, op elke pagina)
   -------------------------------------------------------------------------- */
.floating-contact {
    position: fixed;
    right: 0;
    top: 35%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 90;
}
.floating-btn {
    width: 52px;
    height: 52px;
    border-radius: 0;
    background: var(--accent);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.75);
    transition: all 0.3s;
    text-decoration: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.floating-btn:hover {
    background: var(--accent-hover);
    color: #fff;
}

/* Uitschuif-label op hover (alle has-label buttons) */
.has-label {
    position: relative;
    overflow: visible;
}
.floating-label {
    position: absolute;
    right: 100%;
    top: 0;
    height: 100%;
    background: var(--accent-light);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s;
    pointer-events: none;
}
.has-label:hover .floating-label {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   10. Ons huidige aanbod (homepage sectie onder hero)
   -------------------------------------------------------------------------- */
.aanbod-section {
    padding: 100px 60px 60px 60px;
    background: #F5F5F5;
    color: #0A0A0A;
}
.aanbod-section .aanbod-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}

/* Russian-style header — subtiele titel links, view-all pill rechts */
.aanbod-section .aanbod-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 56px;
    gap: 24px;
    text-align: left;
}
.aanbod-section .aanbod-title {
    font-family: 'Inter Tight', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(2.25rem, 4vw, 3rem) !important;
    color: #0A0A0A !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    line-height: 1.05;
}
.aanbod-view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 22px;
    border: 1px solid rgba(10, 10, 10, 0.2);
    border-radius: 999px;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #0A0A0A;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    white-space: nowrap;
    background: transparent;
}
.aanbod-view-all:hover {
    background: #0A0A0A;
    color: #ffffff;
    border-color: #0A0A0A;
}

/* Grid */
.aanbod-section .aanbod-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

/* Russian-luxe card — soft grey backdrop, contained image, 4-koloms specs */
.aanbod-section .aanbod-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #F0F0F0;
    border-radius: 20px;
    padding: 32px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s ease, background-color 0.4s ease;
    min-height: 480px;
}
.aanbod-section .aanbod-card:hover {
    transform: translateY(-6px);
    background: #EAEAEA;
}

.aanbod-card-favorite {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(10, 10, 10, 0.6);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    z-index: 2;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0;
}
.aanbod-card-favorite:hover {
    background: #ffffff;
    color: #c41e3a;
    transform: scale(1.05);
}

.aanbod-card-image {
    width: 100%;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: auto;
}
.aanbod-card-image img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    transition: transform 0.6s ease;
}
.aanbod-section .aanbod-card:hover .aanbod-card-image img {
    transform: scale(1.04);
}
/* Background-removed PNGs renderen kleiner door de transparante crop —
   scale up zodat ze even prominent ogen als de JPG covers. */
.aanbod-card-image img[src*=".png"] {
    transform: scale(1.35) !important;
    transform-origin: center !important;
}
.aanbod-section .aanbod-card:hover .aanbod-card-image img[src*=".png"] {
    transform: scale(1.4) !important;
}

.aanbod-card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.aanbod-card-title {
    font-family: 'Inter Tight', system-ui, sans-serif !important;
    font-weight: 600;
    font-size: 1.35rem;
    color: #0A0A0A;
    margin: 0 0 24px 0;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.aanbod-card-specs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.3fr;
    gap: 14px;
    margin: 0 0 28px 0;
    padding-bottom: 0;
    flex: 1;
}
.spec {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.spec-value {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #0A0A0A;
    letter-spacing: -0.01em;
    line-height: 1.2;
    white-space: nowrap;
}
.spec-label {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 0.75rem;
    color: rgba(10, 10, 10, 0.5);
    font-weight: 400;
    letter-spacing: 0.02em;
}

.aanbod-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}
.aanbod-card-price {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    color: #0A0A0A;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.aanbod-card-cta {
    display: inline-flex;
    align-items: center;
    padding: 12px 22px;
    background: #1E2326;
    color: #ffffff;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 999px;
    letter-spacing: 0.02em;
    transition: background-color 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
}
.aanbod-section .aanbod-card:hover .aanbod-card-cta {
    background: #4a5560;
    transform: translateX(2px);
}

@media (max-width: 1200px) {
    .aanbod-card-specs {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .aanbod-card-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 968px) {
    .aanbod-section {
        padding: 60px 20px;
    }
    .aanbod-section .aanbod-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .aanbod-section .aanbod-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .aanbod-section .aanbod-card {
        padding: 24px;
        min-height: auto;
    }
    .aanbod-card-image {
        height: 240px;
    }
    .aanbod-card-title {
        font-size: 1.2rem;
    }
    .aanbod-card-price {
        font-size: 1.4rem;
    }
}

/* Auto card */
.car-card {
    display: block;
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 0;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.car-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    color: inherit;
}

.car-card-media {
    position: relative;
    overflow: hidden;
    background: #EEE;
}
.car-card-media img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Subtiele "Actie" badge linksonder de foto */
.car-card-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 2;
    padding: 5px 12px;
    background: #4a5560;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.car-card:hover .car-card-media img {
    transform: scale(1.05);
}

.car-card-content {
    padding: 24px;
}
.car-card-title {
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 600;
    color: #0A0A0A;
    line-height: 1.2;
    margin: 0 0 6px;
}
.car-card-meta {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 400;
    color: #888;
    margin: 0 0 16px;
}

/* Specs-strip — Mercedes-style ingelijst tussen meta en prijs */
.car-card-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 12px 0;
    border-top: 1px solid #EEE;
    border-bottom: 1px solid #EEE;
    margin: 0 0 16px;
}
.car-card-spec {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 400;
    color: #555;
}
.spec-icon {
    flex-shrink: 0;
    color: #666;
}

.car-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.car-card-price {
    font-family: var(--font-body);
    font-size: 1.6rem;
    font-weight: 700;
    color: #4a5560;
}
.car-card-arrow {
    font-size: 1.3rem;
    color: #4a5560;
    transition: transform 0.3s ease;
    line-height: 1;
}
.car-card:hover .car-card-arrow {
    transform: translateX(4px);
}

/* Responsive — tablet */
@media (max-width: 968px) {
    .aanbod-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Responsive — mobile */
@media (max-width: 640px) {
    .aanbod-grid { grid-template-columns: 1fr; }
    .aanbod-container { padding: 0 24px; }
}

/* --------------------------------------------------------------------------
   11. Services sectie — geen eigen bg, body-zwart schijnt door
   -------------------------------------------------------------------------- */
/* Service & voordelen — 5 light-grey cards op witte bg */
.services-section {
    padding: 80px 60px;
    background: #ffffff;
}
.services-container {
    max-width: 1400px;
    margin: 0 auto;
}
.services-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    margin: 0 auto 64px auto;
    max-width: 800px;
}
.services-eyebrow {
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    color: rgba(10, 10, 10, 0.5) !important;
    display: block !important;
}
.services-title {
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(2.25rem, 4.5vw, 3.5rem) !important;
    text-transform: uppercase !important;
    color: #0A0A0A !important;
    letter-spacing: -0.025em !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #0A0A0A !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
}
.services-subtitle {
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: rgba(10, 10, 10, 0.6) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    max-width: 540px;
    text-transform: none !important;
    letter-spacing: -0.005em !important;
}

@media (max-width: 768px) {
    .services-header {
        margin-bottom: 40px;
    }
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}
.service-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 28px;
    background: #F5F5F5;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.3s ease, transform 0.3s ease;
    min-height: 280px;
}
.service-card:hover {
    background: #EAEAEA;
    transform: translateY(-4px);
}
.service-icon {
    color: #1E2326;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.service-icon svg {
    width: 32px;
    height: 32px;
    display: block;
}
.service-card-title {
    margin: 0 !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: #0A0A0A !important;
    letter-spacing: 0.01em !important;
}
.service-card-text {
    margin: 0 !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    color: rgba(10, 10, 10, 0.6) !important;
    line-height: 1.5 !important;
    letter-spacing: -0.005em !important;
}

@media (max-width: 1200px) {
    .services-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .services-section { padding: 80px 24px; }
    .services-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .service-card { padding: 24px 20px; min-height: auto; }
}
@media (max-width: 480px) {
    .services-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   12. Site footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: linear-gradient(
        135deg,
        #0a0c0f 0%,
        #1E2326 25%,
        #343a44 50%,
        #1E2326 75%,
        #0a0c0f 100%
    );
    color: #FFFFFF;
    padding: 80px 0 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

/* Kolom 1 — brand */
.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.footer-brand-shield {
    height: 50px;
    width: auto;
}
.footer-brand-text {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #FFFFFF;
}
.footer-tagline {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    max-width: 280px;
    margin: 0 0 24px;
}
.footer-address {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 400;
    font-style: normal;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
}

/* Subtiele brand-mark onder logo + tekst */
.footer-accent-line {
    width: 32px;
    height: 2px;
    background: #4a5560;
    margin-top: 16px;
    margin-bottom: 24px;
}

/* Kolommen 2-4 — headings + listing */
.footer-heading {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0 0 20px;
}
.footer-list,
.footer-contact-list,
.footer-hours-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-list a,
.footer-contact-list a {
    display: block;
    padding: 6px 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-list a:hover,
.footer-contact-list a:hover {
    color: #FFFFFF;
}
.footer-hours-list li {
    padding: 6px 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
}

/* Bottom bar */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.footer-copyright {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
}
.footer-legal {
    display: flex;
    gap: 24px;
}
.footer-legal a {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-legal a:hover { color: #FFFFFF; }

/* Tablet */
@media (max-width: 968px) {
    .footer-main { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* Mobile */
@media (max-width: 640px) {
    .site-footer { padding: 60px 0 24px; }
    .footer-inner { padding: 0 24px; }
    .footer-main {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-bottom: 40px;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* --------------------------------------------------------------------------
   14. Aanbod-pagina (subpage aanbod.php)
   -------------------------------------------------------------------------- */
.page-aanbod {
    background: #F5F5F5;
    color: #0A0A0A;
    padding-bottom: 80px;
}

.aanbod-layout {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: start;
}

/* Sidebar */
.aanbod-sidebar {
    background: #FFFFFF;
    padding: 32px 24px;
    position: sticky;
    top: 100px;
    align-self: start;
}
.filters-title {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888;
    border-bottom: 1px solid #E8E8E8;
    padding-bottom: 16px;
    margin: 0 0 24px;
}

.filter-block { margin-bottom: 24px; }
.filter-label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: #0A0A0A;
    margin-bottom: 8px;
}
.filter-row {
    display: flex;
    gap: 8px;
}
.filter-input,
.filter-row .filter-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    background: #F8F8F8;
    border: 1px solid #E0E0E0;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 400;
    color: #0A0A0A;
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.filter-input:focus {
    border-color: #4a5560;
    outline: none;
}

/* Custom checkboxes */
.filter-checks {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.filter-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #0A0A0A;
    cursor: pointer;
    padding: 4px 0;
}
.filter-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid #C0C0C0;
    background: #FFFFFF;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.filter-check input[type="checkbox"]:checked {
    background: #4a5560;
    border-color: #4a5560;
}
.filter-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 0px;
    width: 4px;
    height: 9px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Filter actie-knoppen */
.filters-apply,
.filters-reset {
    width: 100%;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.95rem;
    border-radius: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.filters-apply {
    background: #4a5560;
    color: #FFFFFF;
    padding: 12px 24px;
    font-weight: 500;
    border: none;
}
.filters-apply:hover { background: #5a6573; }
.filters-reset {
    margin-top: 8px;
    background: transparent;
    color: #666;
    padding: 10px;
    font-weight: 400;
    border: 0;
}
.filters-reset:hover { color: #4a5560; }

/* Cards grid op aanbod-pagina */
.aanbod-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Card fade-transitie bij filteren */
.aanbod-card {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.aanbod-card.hidden {
    opacity: 0;
    pointer-events: none;
}


/* Empty state — getoond wanneer 0 cards matchen */
#empty-state {
    text-align: center;
    padding: 80px 40px;
    font-family: var(--font-body);
    color: #888;
}
#empty-state p:first-child {
    font-size: 1.4rem;
    margin: 0 0 8px;
    color: #555;
}
#empty-state p:last-child {
    font-size: 1rem;
    margin: 0;
    color: #888;
}

/* Responsive */
@media (max-width: 1100px) {
    .aanbod-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 968px) {
    .aanbod-layout {
        grid-template-columns: 1fr;
        padding: 0 24px;
    }
    .aanbod-sidebar {
        position: static;
        top: auto;
    }
}
@media (max-width: 640px) {
    .aanbod-cards-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   15. Auto-detailpagina (auto.php)
   -------------------------------------------------------------------------- */
.page-auto {
    background: #F5F5F5;
    color: #0A0A0A;
    padding-top: 105px;      /* + .auto-breadcrumb 16px internal = 121px tot text, header ~117px → 4px gap (strak, minimal) */
    padding-bottom: 80px;
}
.auto-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Breadcrumb */
.auto-breadcrumb,
.breadcrumb {
    padding: 16px 0;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #888;
}
.auto-breadcrumb a,
.breadcrumb a {
    color: #888;
    text-decoration: none;
    transition: color 0.2s ease;
}
.auto-breadcrumb a:hover,
.breadcrumb a:hover { color: #4a5560; }
.auto-breadcrumb-sep,
.breadcrumb-separator { margin: 0 8px; opacity: 0.6; }
.auto-breadcrumb-current,
.breadcrumb-current { color: #4a5560; font-weight: 500; }

/* Page header */
.auto-header {
    margin: 40px auto 32px;
}
.auto-eyebrow {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #1E2326;
    margin: 0 0 8px;
}
.auto-title {
    font-family: var(--font-body);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1;
    color: #0A0A0A;
    margin: 0;
}
.auto-quick {
    margin: 12px 0 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    color: #1E2326;
}

/* Top grid: gallery + info-blok */
.auto-top-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 32px;
    align-items: start;
}

/* Gallery */
.auto-main-photo {
    width: 100%;
    height: 480px;
    background: #E0E0E0;
    overflow: hidden;
    position: relative;
}
.auto-main-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}
.auto-main-photo img.is-loading { opacity: 0; }
.auto-main-photo.mirrored img,
.auto-thumb.mirrored img       { transform: scaleX(-1); }

.auto-thumb-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-top: 12px;
}
.auto-thumb {
    padding: 0;
    border: 2px solid transparent;
    background: #E0E0E0;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4 / 3;
    transition: border-color 0.2s ease, opacity 0.2s ease;
}
.auto-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.auto-thumb:hover { opacity: 0.8; }
.auto-thumb.is-active { border-color: #4a5560; }

/* Info-blok (sticky) */
.auto-info {
    background: #FFFFFF;
    padding: 32px;
    position: sticky;
    top: 100px;
    align-self: start;
}
.auto-info-eyebrow {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 8px;
}
.auto-info-price {
    font-family: var(--font-body);
    font-size: 2.5rem;
    font-weight: 700;
    color: #0A0A0A;
    line-height: 1;
}
.auto-divider {
    height: 1px;
    background: #EEE;
    border: 0;
    margin: 24px 0;
}
.auto-specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.auto-spec-label {
    margin: 0 0 4px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #888;
}
.auto-spec-value {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 700;
    color: #0A0A0A;
}

/* CTA-knoppen in info-blok */
.auto-cta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 24px;
    text-align: center;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.auto-cta-primary {
    background: linear-gradient(
        135deg,
        #0a0c0f 0%,
        #1E2326 25%,
        #343a44 50%,
        #1E2326 75%,
        #0a0c0f 100%
    );
    color: #FFFFFF;
    border: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.auto-cta-primary:hover {
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.auto-cta-secondary {
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #e8e8e8 20%,
        #c4c4c4 40%,
        #f5f5f5 55%,
        #d8d8d8 75%,
        #b8b8b8 100%
    );
    color: #1E2326;
    border: none;
    margin-top: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.auto-cta-secondary:hover {
    color: #1E2326;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.auto-info-phone {
    margin: 16px 0 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #666;
}
.auto-info-phone a {
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease;
}
.auto-info-phone a:hover { color: #4a5560; }

/* Uitgebreide secties onder gallery */
.auto-section {
    margin-top: 80px;
}
.auto-section-head {
    text-align: center;
    margin-bottom: 40px;
}
.auto-section-eyebrow {
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888;
}
.auto-section-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    color: #0A0A0A;
    line-height: 1.2;
}

.auto-block {
    background: #FFFFFF;
    padding: 48px;
    margin-bottom: 24px;
}
.auto-block-title {
    margin: 0 0 24px;
    font-family: var(--font-body);
    font-size: 1.75rem;
    font-weight: 700;
    color: #0A0A0A;
    line-height: 1.2;
}

/* Tech-grid 2 kolommen */
.auto-tech-grid {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 48px;
}
.auto-tech-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #EEE;
}
.auto-tech-label {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #666;
}
.auto-tech-value {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    color: #0A0A0A;
    text-align: right;
}

/* Opties */
.auto-options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 24px;
}
.auto-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: #555;
}

/* Verbruik & milieu */
.auto-eco-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}
.auto-eco-label {
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #888;
}
.auto-eco-value {
    margin: 0 0 4px;
    font-family: var(--font-body);
    font-size: 2rem;
    font-weight: 700;
    color: #0A0A0A;
    line-height: 1;
}
.auto-eco-unit {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #888;
}
.auto-eco-badge {
    display: inline-block;
    padding: 4px 14px;
    color: #FFFFFF;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 1.75rem;
    line-height: 1.2;
}
.auto-eco-badge-a { background: #2E9F4B; }
.auto-eco-badge-b { background: #6FAE3B; }
.auto-eco-badge-c { background: #C5B636; }
.auto-eco-badge-d { background: #E8943B; }
.auto-eco-badge-e { background: #DE6A3A; }
.auto-eco-badge-f { background: #C24238; }
.auto-eco-badge-g { background: #A52624; }

/* Garantie */
.auto-garantie-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}
.auto-garantie-text {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
}
.auto-garantie-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}
.auto-garantie-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #0A0A0A;
}

/* Financiering — donker blok */
.auto-finance {
    background: linear-gradient(
        135deg,
        #0a0c0f 0%,
        #1E2326 25%,
        #343a44 50%,
        #1E2326 75%,
        #0a0c0f 100%
    );
    padding: 64px;
    color: #FFFFFF;
}
.auto-finance-title {
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
}
.auto-finance-sub {
    margin: 0 0 32px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
}
.auto-finance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}
.auto-finance-inputs {
    display: grid;
    gap: 16px;
}
.auto-finance-field { display: flex; flex-direction: column; gap: 6px; }
.auto-finance-field label {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.auto-finance-field input,
.auto-finance-field select {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 1rem;
    border-radius: 0;
}
.auto-finance-field input:disabled {
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
}
.auto-finance-field input:focus,
.auto-finance-field select:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.4);
}

.auto-finance-result { padding-left: 16px; }
.auto-finance-eyebrow {
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.auto-finance-amount {
    margin: 0 0 16px;
    font-family: var(--font-body);
    font-size: 3.5rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
}
.auto-finance-recap {
    margin: 0 0 16px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}
.auto-finance-disclaimer {
    margin: 0 0 24px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.5;
}
.auto-finance-cta {
    display: inline-block;
    padding: 14px 32px;
    background: transparent;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.auto-finance-cta:hover {
    background: #FFFFFF;
    color: #0A0A0A;
}

/* 404 fallback */
.page-auto-404 {
    background: #F5F5F5;
    padding-top: 90px;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auto-404-inner {
    text-align: center;
    max-width: 520px;
    padding: 40px 24px;
}
.auto-404-eyebrow {
    margin: 0 0 16px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #888;
}
.auto-404-title {
    margin: 0 0 16px;
    font-family: var(--font-body);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: #0A0A0A;
}
.auto-404-sub {
    margin: 0 0 32px;
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: #666;
    line-height: 1.6;
}
.auto-404-cta {
    display: inline-block;
    padding: 14px 32px;
    background: #4a5560;
    color: #FFFFFF;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease;
}
.auto-404-cta:hover { background: #5a6573; color: #FFFFFF; }

/* Responsive */
@media (max-width: 1100px) {
    .auto-finance-grid,
    .auto-garantie-grid { grid-template-columns: 1fr; gap: 32px; }
    .auto-finance-result { padding-left: 0; }
    .auto-eco-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .auto-options-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 968px) {
    .auto-top-grid { grid-template-columns: 1fr; gap: 24px; }
    .auto-info { position: static; top: auto; }
    .auto-main-photo { height: 360px; }
    .auto-tech-grid { grid-template-columns: 1fr; }
    .auto-block { padding: 32px 24px; }
    .auto-finance { padding: 40px 24px; }
}
/* Mobile match aan service-pages: 95 + 16 internal = 111px, identiek aan
   .page-service-detail > .breadcrumb 768px mobile padding-top. */
@media (max-width: 768px) {
    .page-auto { padding-top: 95px; }
}
@media (max-width: 640px) {
    .page-auto { padding-top: 95px; }
    .auto-container { padding: 0 24px; }
    .auto-main-photo { height: 280px; }
    .auto-thumb-grid { grid-template-columns: repeat(4, 1fr); }
    .auto-specs-grid { grid-template-columns: 1fr; }
    .auto-eco-grid,
    .auto-options-grid { grid-template-columns: 1fr; }
    .auto-finance-amount { font-size: 2.5rem; }
}

/* ==========================================================================
   16. OVER ONS PAGE (over-ons.php)
   ========================================================================== */
.page-over-ons {
    background: #F5F5F5;
    color: #0A0A0A;
}

/* --- Drie pijlers --- */
.over-pillars {
    background: #F5F5F5;
    padding: 60px 24px 100px;
}
.over-pillars-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}
.over-pillars-head {
    text-align: center;
    margin-bottom: 60px;
}
.over-pillars-eyebrow {
    margin: 0 0 16px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888;
}
.over-pillars-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: #0A0A0A;
    line-height: 1.2;
}
.over-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.over-pillar {
    text-align: center;
    padding: 24px;
}
.over-pillar-num {
    display: block;
    margin-bottom: 16px;
    font-family: var(--font-body);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: #4a5560;
}
.over-pillar-title {
    margin: 0 0 12px;
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 700;
    color: #0A0A0A;
    line-height: 1.2;
}
.over-pillar-text {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.6;
    color: #666;
}

/* --- Eigenaar spotlight (rounded contained card op lichte bg) --- */
.over-spotlight {
    background: #ffffff;
    padding: 60px 24px 100px 24px;
}
.over-spotlight-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 64px;
    background: #F5F5F5;
    border-radius: 24px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

.over-spotlight-photo {
    aspect-ratio: 4 / 5;
    background: #e8e8e8;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.over-spotlight-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.over-spotlight-photo-fallback {
    margin: 0;
    padding: 80px 24px;
    font-family: 'Inter Tight', sans-serif;
    font-style: italic;
    text-align: center;
    color: rgba(10, 10, 10, 0.4);
}

.over-spotlight-text { color: #0A0A0A; }

.over-spotlight-name {
    margin: 0 0 8px;
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1;
    color: #0A0A0A;
}
.over-spotlight-role {
    margin: 0 0 32px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: rgba(10, 10, 10, 0.6);
}
.over-spotlight-quote {
    position: relative;
    margin: 0 0 32px;
    padding-top: 20px;
    font-family: 'Inter Tight', sans-serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.5;
    color: rgba(10, 10, 10, 0.85);
    border: 0;
}
.over-spotlight-quote::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 1px;
    background: #4a5560;
}
.over-spotlight-bio {
    margin: 0 0 16px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: rgba(10, 10, 10, 0.7);
}
.over-spotlight-bio:last-of-type { margin-bottom: 32px; }

.over-spotlight-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.over-spotlight-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 999px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* Primary — light chrome silver pill (identiek aan header PLAN AFSPRAAK) */
.over-spotlight-cta-primary {
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #e8e8e8 20%,
        #c4c4c4 40%,
        #f5f5f5 55%,
        #d8d8d8 75%,
        #b8b8b8 100%
    );
    color: #1E2326;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.over-spotlight-cta-primary:hover {
    color: #1E2326;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
/* Ghost — light outline pill, zelfde text-styling als primary */
.over-spotlight-cta-ghost {
    background: transparent;
    color: #1E2326;
    border: 1.5px solid rgba(30, 35, 38, 0.3);
}
.over-spotlight-cta-ghost:hover {
    background: rgba(30, 35, 38, 0.04);
    border-color: rgba(30, 35, 38, 0.6);
    color: #1E2326;
}

@media (max-width: 968px) {
    .over-spotlight-inner {
        grid-template-columns: 1fr;
        padding: 40px 28px;
        gap: 40px;
    }
}

/* --- Collage sectie (VDM-style) --- */
.over-collage {
    background: #FFFFFF;
    padding: 140px 40px 100px;
}
.over-collage-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 80px;
    align-items: center;
}

/* Kolom 1 — tekst */
.over-collage-eyebrow {
    margin: 0 0 32px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #4a5560;
}
.over-collage-title {
    margin: 0 0 40px;
    font-family: var(--font-body);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    color: #0A0A0A;
}
.over-collage-line {
    display: block;
    width: 32px;
    height: 1px;
    background: #4a5560;
    margin: 0 0 32px;
}
.over-collage-body {
    margin: 0 0 16px;
    max-width: 480px;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.75;
    color: #555;
}
.over-collage-body:last-child { margin-bottom: 0; }

/* Kolom 2 — overlappende foto's */
.over-collage-photos {
    position: relative;
    min-height: 700px;
}
.over-collage-photo {
    position: absolute;
    object-fit: cover;
    display: block;
}
.over-collage-photo-top-left {
    top: 0;
    left: 0;
    width: 45%;
    height: 280px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 2;
    transform: rotate(-1deg);
}
.over-collage-photo-top-right {
    top: 60px;
    right: 0;
    width: 50%;
    height: 240px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 2;
    transform: rotate(1deg);
}
.over-collage-photo-bottom {
    top: 320px;
    left: 8%;
    width: 92%;
    height: 360px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

/* --- Responsive --- */
@media (max-width: 968px) {
    .over-pillars-grid { grid-template-columns: 1fr; gap: 16px; }
    .over-pillar { padding: 16px; }

    .over-spotlight-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .over-spotlight-photo { max-width: 480px; margin: 0 auto; }

    /* Collage: stack alles verticaal, geen overlap, geen rotatie */
    .over-collage-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .over-collage-body { max-width: none; }
    .over-collage-photos {
        position: static;
        min-height: 0;
        display: grid;
        gap: 16px;
    }
    .over-collage-photo {
        position: static;
        width: 100%;
        height: auto;
        max-height: 360px;
        transform: none;
    }
    .over-collage-photo-bottom { max-height: 280px; }
}

@media (max-width: 640px) {
    .over-collage  { padding: 120px 20px 60px; }
    .over-pillars  { padding: 40px 20px 80px; }
    .over-spotlight { padding: 80px 20px; }
    .over-spotlight-quote { font-size: 1.2rem; }
}

/* ==========================================================================
   17. SERVICES PAGE (services.php overview accordion + detail-pages)
   ========================================================================== */

/* --- Overview page (services.php) --- */
.page-services {
    background: #F5F5F5;
    color: #0A0A0A;
}

/* --- Accordion container --- */
.services-accordion {
    max-width: 1400px;
    margin: 0 auto 120px;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- Service panel — default (collapsed) --- */
.service-panel {
    position: relative;
    height: 240px;
    overflow: hidden;
    border-radius: 14px;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-decoration: none;
    color: inherit;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Per-service achtergronden — multi-background trick:
   eerste laag is de echte JPG, bij 404 valt de browser terug op het
   gradient eronder. Zodra Aleksandra de foto's upload werkt het automatisch. */
.service-panel[data-service="financiering"] {
    background-image: url('../images/services/financiering.jpg'),
                      linear-gradient(135deg, #3d4a55 0%, #5a6873 100%);
}
.service-panel[data-service="verzekering"] {
    background-image: url('../images/services/verzekering.jpg'),
                      linear-gradient(135deg, #2d3a45 0%, #4a5560 50%, #3d4a55 100%);
}
.service-panel[data-service="garantie"] {
    background-image: url('../images/services/garantie.jpg'),
                      linear-gradient(135deg, #4a5560 0%, #6b6e70 100%);
}
.service-panel[data-service="lease"] {
    background-image: url('../images/services/lease.jpg'),
                      linear-gradient(135deg, #3d4a55 0%, #6b6e70 100%);
}
.service-panel[data-service="onderhoud"] {
    background-image: url('../images/services/onderhoud.jpg'),
                      linear-gradient(135deg, #2a2f33 0%, #4a5560 60%, #3d4a55 100%);
}

/* Overlay — pseudo-element boven de foto, onder de tekst */
.service-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to right,
        rgba(20, 25, 28, 0.70) 0%,
        rgba(20, 25, 28, 0.40) 30%,
        rgba(20, 25, 28, 0.15) 65%,
        rgba(20, 25, 28, 0.05) 100%);
    transition: background 0.5s ease;
}
.service-panel:hover::before {
    background: linear-gradient(to top,
        rgba(20, 25, 28, 0.80) 0%,
        rgba(20, 25, 28, 0.35) 45%,
        rgba(20, 25, 28, 0.10) 85%,
        rgba(20, 25, 28, 0.05) 100%);
}

/* Collapsed content (default visible) */
.panel-collapsed-content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: opacity 0.3s ease;
}
.panel-collapsed-left {
    display: flex;
    align-items: center;
    gap: 24px;
}
.panel-number {
    font-family: var(--font-body);
    font-size: 1.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
}
.panel-title {
    font-family: var(--font-body);
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
}
.panel-arrow {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    transition: transform 0.3s ease;
}

/* Expanded content (verborgen tot hover) */
.panel-expanded-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 32px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease 0.2s;   /* delay zodat panel eerst groeit */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.panel-watermark {
    position: absolute;
    top: 16px;
    right: 32px;
    font-family: var(--font-body);
    font-size: 6rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.12);
    line-height: 1;
    pointer-events: none;
}
.panel-eyebrow {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.panel-expanded-bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.panel-expanded-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 3rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.1;
}
.panel-expanded-desc {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 480px;
}
.panel-cta {
    align-self: flex-start;
    margin-top: 8px;
    padding: 10px 20px;
    background: #FFFFFF;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #1E2326;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* --- Hover state — expansion --- */
.service-panel:hover {
    height: 420px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    transform: scale(1.005);
}
.service-panel:hover .panel-collapsed-content {
    opacity: 0;
}
.service-panel:hover .panel-expanded-content {
    opacity: 1;
    pointer-events: auto;
}

/* --- Mobile: alle panels permanent expanded (geen hover) --- */
@media (max-width: 768px) {
    .service-panel { height: 320px; }
    .service-panel:hover {
        height: 320px;
        transform: none;
        box-shadow: none;
    }
    .panel-collapsed-content { display: none; }
    .panel-expanded-content {
        opacity: 1;
        pointer-events: auto;
        transition: none;
    }
    .panel-watermark { font-size: 4rem; }
    .panel-expanded-title { font-size: 2rem; }
    .services-accordion { padding: 0 20px; gap: 12px; }
}

/* ==========================================================================
   Service detail-pagina template (financiering / verzekering / etc.)
   ========================================================================== */

/* Light page (was dark) — service detail-pagina's */
.page-service-detail {
    background: #F5F5F5;
    color: #0A0A0A;
}

/* Page header (was dark hero banner — nu left-aligned light) */
.service-hero {
    height: auto;
    display: block;
    background: transparent !important;
    padding: 140px 60px 56px 60px !important;
    text-align: left;
}
.service-hero-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0;
    text-align: left;
}
.service-hero-title {
    margin: 0 0 12px 0;
    font-family: 'Inter Tight', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    text-transform: uppercase;
    text-align: left;
    /* chrome gradient via toevoeging aan dark-chrome selector lijst */
}
.service-hero-sub {
    margin: 0;
    font-family: 'Inter Tight', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: #6b6e70;
    text-align: left;
}

/* Combined content blok — intro + USPs in één wit rounded card */
.service-content {
    padding: 0 60px 60px 60px;
}
.service-content-block {
    max-width: 1300px;
    margin: 0 auto;
    background: #FFFFFF;
    border-radius: 24px;
    padding: 60px;
}

/* Intro binnen het blok */
.service-intro-inner {
    max-width: 760px;
    margin: 0 0 56px 0;
    text-align: left;
}
.service-intro-lead {
    margin: 0 0 16px 0;
    font-family: 'Inter Tight', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: #1E2326;
}
.service-intro-body {
    margin: 0;
    font-family: 'Inter Tight', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    color: #6b6e70;
}

/* Divider tussen intro en USP-grid */
.service-content-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 0 0 48px 0;
}

/* USP grid binnen het content-block */
.service-usps-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.service-usp {
    background: #F5F5F5;
    padding: 28px;
    border-radius: 16px;
}
.service-usp-num {
    display: block;
    margin-bottom: 12px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    /* chrome gradient via toevoeging aan dark-chrome selector lijst */
}
.service-usp-title {
    margin: 0 0 8px 0;
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #1E2326;
    line-height: 1.3;
}
.service-usp-text {
    margin: 0;
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #6b6e70;
    line-height: 1.6;
}

/* Mobile responsive — matched aan aanbod page header breakpoints */
@media (max-width: 968px) {
    .service-hero-title { font-size: 3rem; }
}
@media (max-width: 768px) {
    .service-hero { padding: 100px 24px 40px 24px !important; }
    .service-hero-title { font-size: 2.5rem; }
    .service-content { padding: 0 24px 60px 24px; }
    .service-content-block { padding: 32px 24px; }
    .service-usps-inner { grid-template-columns: 1fr; }
}

/* CTA */
/* CTA-sectie — buitenste wrapper expliciet wit zodat .service-cta-inner
   als gecontainerde rounded gradient-card op witte bg "drijft" (geen
   blok-in-blok met de donkere .page-service-detail page-bg). */
.service-cta {
    background: #ffffff;
    padding: 60px 24px;
    text-align: center;
}
.service-cta-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 80px 60px;
    background: linear-gradient(
        135deg,
        #0a0c0f 0%,
        #1E2326 25%,
        #343a44 50%,
        #1E2326 75%,
        #0a0c0f 100%
    );
    border-radius: 24px;
}
.service-cta-title {
    margin: 0 0 12px;
    font-family: var(--font-body);
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
}
.service-cta-sub {
    margin: 0 0 32px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}
/* Chrome silver pill — identiek aan header PLAN AFSPRAAK */
.service-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #e8e8e8 20%,
        #c4c4c4 40%,
        #f5f5f5 55%,
        #d8d8d8 75%,
        #b8b8b8 100%
    );
    color: #1E2326;
    text-decoration: none;
    font-family: 'Inter Tight', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-cta-btn:hover {
    color: #1E2326;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.service-cta-phone {
    margin: 24px 0 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
}
.service-cta-phone a {
    color: #FFFFFF;
    text-decoration: none;
    transition: color 0.2s ease;
}
.service-cta-phone a:hover { color: rgba(255, 255, 255, 0.85); }

@media (max-width: 768px) {
    .service-cta { padding: 40px 16px; }
    .service-cta-inner { padding: 56px 28px; }
}

/* Detail responsive */
@media (max-width: 768px) {
    .service-hero { height: auto; padding: 120px 24px 60px; }
    .service-intro,
    .service-cta { padding: 60px 24px; }
    .service-usps { padding: 0 24px 60px; }
    .service-usps-inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   18. CONTACT PAGE (contact.php)
   ========================================================================== */

.page-contact {
    background: #F5F5F5;
    color: #0A0A0A;
}


/* --- 2-koloms grid: info + form --- */
.contact-grid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 40px 80px;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 100px;
    align-items: start;
}

/* Kolom 1 — Contact info */
.contact-info-item {
    padding: 24px 0;
    border-bottom: 1px solid #ddd;
}
.contact-info-item:first-child { padding-top: 0; }
.contact-info-item.contact-info-item-last { border-bottom: none; }

.contact-info-eyebrow {
    margin: 0 0 6px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #4a5560;
}
.contact-info-value {
    display: block;
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0A0A0A;
}
.contact-info-link {
    text-decoration: none;
    color: #0A0A0A;
    transition: color 0.2s ease;
}
.contact-info-link:hover { color: #4a5560; }
.contact-info-meta {
    margin: 4px 0 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #666;
}
.contact-info-hours {
    list-style: none;
    padding: 0;
    margin: 0;
}
.contact-info-hours li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
}
.contact-info-hours li span:first-child  { color: #0A0A0A; }
.contact-info-hours li span:last-child   { color: #555; }

/* Verzekering — email is langer dan tel, iets kleinere font-size */
.contact-info-item a[href^="mailto"].contact-info-value {
    font-size: 1.4rem;
}

/* Kolom 2 — Donker formulier */
.contact-form-card {
    background: linear-gradient(
        135deg,
        #0a0c0f 0%,
        #1E2326 25%,
        #343a44 50%,
        #1E2326 75%,
        #0a0c0f 100%
    );
    padding: 40px 36px;
    color: #FFFFFF;
}
.contact-form-eyebrow {
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.contact-form-title {
    margin: 0 0 28px;
    font-family: var(--font-body);
    font-size: 1.8rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
}

/* Success/error melding */
.contact-form-alert {
    margin: 0 0 24px;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    border: 1px solid;
}
.contact-form-alert-success {
    color: #BFE5C6;
    background: rgba(76, 175, 80, 0.1);
    border-color: rgba(76, 175, 80, 0.4);
}
.contact-form-alert-error {
    color: #F2C2C0;
    background: rgba(230, 57, 70, 0.1);
    border-color: rgba(230, 57, 70, 0.5);
}

/* Form-velden grid */
.contact-form-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 20px;
}
.contact-form-fields .field-full { grid-column: 1 / -1; }

.contact-form input,
.contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 14px 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 400;
    color: #FFFFFF;
    border-radius: 0;
    transition: border-color 0.3s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-bottom-color: #FFFFFF;
}
.contact-form textarea {
    resize: vertical;
    min-height: 100px;
    padding-top: 14px;
}

/* Submit button */
.contact-form-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding: 14px 32px;
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #e8e8e8 20%,
        #c4c4c4 40%,
        #f5f5f5 55%,
        #d8d8d8 75%,
        #b8b8b8 100%
    );
    color: #1E2326;
    font-family: 'Inter Tight', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.contact-form-submit {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-form-submit:hover {
    color: #1E2326;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* --- Google Maps embed --- */
.contact-map {
    width: 100%;
    line-height: 0;       /* iframe gap weghalen */
}
.contact-map iframe {
    display: block;
    width: 100%;
    height: 480px;
    border: 0;
    filter: grayscale(20%) saturate(0.9);
}

/* --- Donkere alt-contact banner --- */
.contact-alt-banner {
    background: #1E2326;
    padding: 40px;
    text-align: center;
}
.contact-alt-inner {
    max-width: 1400px;
    margin: 0 auto;
}
.contact-alt-eyebrow {
    margin: 0 0 20px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.contact-alt-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}
.contact-alt-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #FFFFFF;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.contact-alt-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
}
.contact-alt-btn svg {
    flex-shrink: 0;
    display: block;
}

/* --- Responsive --- */
@media (max-width: 968px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 40px 24px 60px;
    }
    .contact-form-card { padding: 32px 24px; }
}

@media (max-width: 768px) {
    .contact-map iframe { height: 320px; }
}

@media (max-width: 640px) {
    .contact-alt-banner { padding: 32px 20px; }
    .contact-alt-buttons { flex-direction: column; align-items: stretch; }
    .contact-alt-btn { justify-content: center; }
    .contact-form-fields { grid-template-columns: 1fr; }
}

/* ==========================================================================
   19. PAGE HEADER — herbruikbaar editorial (left-aligned)
   Toegepast op aanbod.php / services.php / contact.php
   ========================================================================== */
.page-header {
    max-width: 1400px;
    margin: 0 auto;
    padding: 180px 40px 60px;
    text-align: left;
}
.page-header-eyebrow {
    margin: 0 0 20px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888;
}
.page-header .page-header-title,
h1.page-header-title {
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    font-size: 4rem !important;
    color: #0A0A0A !important;
    line-height: 1 !important;
    margin: 0 0 24px !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
}
.page-header-accent {
    width: 40px;
    height: 1px;
    background: #4a5560;
    margin: 0 0 24px;
}
.page-header-subtitle {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.7;
    color: #555;
    max-width: 540px;
}
.page-header-meta {
    margin: 24px 0 0;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #4a5560;
}

@media (max-width: 968px) {
    .page-header .page-header-title,
    h1.page-header-title { font-size: 3rem !important; }
}
@media (max-width: 768px) {
    .page-header { padding: 120px 24px 40px; }
    .page-header .page-header-title,
    h1.page-header-title { font-size: 2.5rem !important; }
}

/* ==========================================================================
   20. BACK-TO-TOP
   ========================================================================== */

/* --- Back-to-top knop --- */
.back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 48px;
    height: 48px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1E2326;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #FFFFFF;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}
.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.back-to-top:hover {
    background: #4a5560;
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
    }
}

/* ═══════════════════════════════════════════════
   VISTA TWEAKS — floating buttons
   subtieler maken (manual paste 22-05-2026)
   ═══════════════════════════════════════════════ */

.floating-buttons a,
.side-contact-buttons a,
.floating-contact a,
.contact-floating a {
  width: 42px !important;
  height: 42px !important;
  background: rgba(30, 35, 38, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: all 0.3s ease !important;
}

.floating-buttons a:hover,
.side-contact-buttons a:hover,
.floating-contact a:hover,
.contact-floating a:hover {
  background: #1E2326 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateX(-2px) !important;
}

.floating-buttons a svg,
.side-contact-buttons a svg,
.floating-contact a svg,
.contact-floating a svg {
  width: 16px !important;
  height: 16px !important;
}

.floating-buttons,
.side-contact-buttons,
.floating-contact,
.contact-floating {
  gap: 10px !important;
}

/* ==========================================================================
   Editorial typography — Inter Tight (site-wide, case-distinction)
   ========================================================================== */
body {
    font-family: 'Inter Tight', system-ui, sans-serif !important;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-header) !important;
    letter-spacing: -0.015em;
}

/* Hero "Magnum Cars" heading */
.hero-vista-title {
    font-family: var(--font-header) !important;
    font-weight: 500 !important;
    font-size: clamp(4rem, 9vw, 8rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.01em !important;
    font-style: normal !important;
    color: #ffffff !important;
    margin-bottom: 32px !important;
}

/* Page / section headers */
.page-header-title,
.page-title,
.section-title,
.section-heading {
    font-family: var(--font-header) !important;
    font-weight: 500 !important;
    letter-spacing: -0.015em !important;
}

/* Body text, hero copy, form controls */
.hero-vista-subtitle,
.hero-vista-tagline,
.hero-vista-stat-label,
p, span, a, label,
input, textarea, select {
    font-family: var(--font-body) !important;
}

/* Navigation */
nav a, .nav-menu a, .main-nav a {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
}

/* Buttons */
.btn-pill-filled,
.btn-pill-outline,
.hero-vista-cta a,
button {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
}

/* Stat numbers — Inter Tight bold (UI/data, niet body copy) */
.hero-vista-stat-number {
    font-family: var(--font-header) !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   Site-wide typography enforcement
   --------------------------------------------------------------------------
   Regel: Inter Tight overal, UPPERCASE op UI/headings, normal-case op body
          Long-form copy (subtitle, tagline, description) → Inter Tight (normal case)
   --------------------------------------------------------------------------
   Komt NA het editorial typography block en overrult via source-order de
   bredere font !important regels die per ongeluk UI-elementen
   raakten (p, span, a, label, button, nav a, etc).
   ========================================================================== */

/* UPPERCASE op alle UI/data klassen via class-name-pattern.
   :not()-uitzondering op -tag voorkomt dat -tagline mee wordt gepakt. */
[class*="-title"],
[class*="-heading"],
[class*="-eyebrow"],
[class*="-label"],
[class*="-value"],
[class*="-price"],
[class*="-meta"],
[class*="-spec"],
[class*="-badge"],
[class*="-tag"]:not([class*="-tagline"]),
[class*="-number"],
[class*="-stat"],
[class*="-btn"],
[class*="btn-"],
[class*="-cta"],
[class*="-pill"],
[class*="-name"],
[class*="-hint"],
[class*="-arrow"] {
    font-family: 'Inter Tight', system-ui, sans-serif !important;
}

/* UPPERCASE op elementen/classes zonder match in het patroon hierboven */
button,
input, textarea, select, label,
.spec,
.nav-link,
.mobile-menu-link,
.mobile-menu-cta,
.aanbod-view-all,
.header-cta,
.language-dropdown-toggle,
.language-dropdown-menu a,
.current-lang,
.auto-quick,
.auto-breadcrumb,
.auto-breadcrumb a,
.auto-breadcrumb-current,
.footer-heading,
.footer-list,
.footer-list a,
.footer-contact-list,
.footer-contact-list a,
.footer-hours-list,
.footer-address,
.footer-legal,
.footer-legal a,
.footer-copyright {
    font-family: 'Inter Tight', system-ui, sans-serif !important;
}

/* Long-form / descriptive copy expliciet normal-case.
   :not()-clauses op -title voorkomen dat title-classes per ongeluk mee
   genomen worden via subtitle/description-pattern. */
.hero-vista-subtitle,
.hero-vista-tagline,
.footer-tagline,
[class*="-subtitle"],
[class*="-tagline"],
[class*="-description"] {
    font-family: 'Inter Tight', system-ui, sans-serif !important;
}


/* ==========================================================================
   Inter Tight — CASE ENFORCEMENT + header-visibility
   --------------------------------------------------------------------------
   Regel:
   - Headings + UI/data/buttons → UPPERCASE, weight 500-700, ls 0.02em
   - Body / subtitle / tagline / description / dropdown items → normal-case,
     weight 400, ls -0.005em
   - Header krijgt subtle text-shadow voor contrast over hero foto
   ========================================================================== */

/* Headings + UI → UPPERCASE */
h1, h2, h3, h4, h5, h6,
.hero-vista-title,
.page-header-title,
.page-title,
.section-title,
.section-heading,
.aanbod-title,
.aanbod-card-title,
.nav-link,
.mobile-menu-link,
.mobile-menu-cta,
.header-cta,
.language-dropdown-toggle,
.aanbod-view-all,
.aanbod-card-cta,
.aanbod-card-price,
.btn-pill-filled,
.btn-pill-outline,
.btn-pill-filled-dark,
.hero-vista-cta a,
.spec-value,
.hero-vista-stat-number,
[class*="-eyebrow"],
[class*="-badge"] {
    font-family: 'Inter Tight', system-ui, sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

/* Hero "MAGNUM CARS" — display weight, tighter spacing */
.hero-vista-title {
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
}

.aanbod-title,
.aanbod-section .aanbod-title {
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

.aanbod-card-title {
    font-weight: 600 !important;
}

.spec-value {
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

.aanbod-card-price {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

/* Body / descriptive → normal case, weight 400 */
p,
.hero-vista-subtitle,
.hero-vista-tagline,
.hero-vista-stat-label,
.spec-label,
.aanbod-description,
.language-dropdown-menu a,
.footer-tagline,
[class*="-subtitle"],
[class*="-tagline"],
[class*="-description"] {
    font-family: 'Inter Tight', system-ui, sans-serif !important;
    text-transform: none !important;
    letter-spacing: -0.005em !important;
    font-weight: 400;
}

.spec-label {
    font-weight: 400 !important;
    font-size: 0.75rem !important;
    color: rgba(10, 10, 10, 0.5) !important;
}

/* Header — text-shadow voor contrast over lichte hero foto delen */
.nav-link,
.header-cta,
.language-dropdown-toggle {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Chrome gradient — hero "MAGNUM CARS" metallic automotive badge look
   --------------------------------------------------------------------------
   Light silver → mid grey → light silver gradient via background-clip:text.
   Fallback voor browsers zonder background-clip support: solid wit.
   ========================================================================== */
.hero-vista-title {
    font-size: clamp(3rem, 7.5vw, 6.5rem) !important;
    opacity: 0.85 !important;
    background: linear-gradient(
        180deg,
        #f5f5f7 0%,
        #d4d4d8 30%,
        #a8a8ae 50%,
        #8a8a90 60%,
        #c0c0c5 80%,
        #e8e8eb 100%
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5))
            drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4))
            drop-shadow(1px 0 0 rgba(0, 0, 0, 0.25))
            drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.25))
            drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25))
            drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.25)) !important;
}

@supports not (-webkit-background-clip: text) {
    .hero-vista-title {
        color: #ffffff !important;
        background: none !important;
        -webkit-text-fill-color: #ffffff !important;
    }
}

/* ==========================================================================
   Chrome gradient — primary CTA button ("Bekijk ons aanbod")
   matching de hero "MAGNUM CARS" heading gradient
   ========================================================================== */
.hero-vista-cta .btn-primary,
.btn-pill-filled {
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #e8e8e8 20%,
        #c4c4c4 40%,
        #f5f5f5 55%,
        #d8d8d8 75%,
        #b8b8b8 100%
    ) !important;
    color: #1E2326 !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 24px !important;
    text-shadow: none !important;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.hero-vista-cta .btn-primary:hover,
.btn-pill-filled:hover {
    color: #1E2326 !important;
    transform: translateY(-1px) !important;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================================================
   Hero contrast — text-shadow + button-shadow voor extra leesbaarheid
   over lichte foto delen. Combineert met de versterkte ::before/::after
   gradients en de drop-shadow op de chrome heading.
   ========================================================================== */

/* Witte hero tekst (subtitle, tagline, stats) — stevige text-shadow */
.hero-vista-subtitle,
.hero-vista-tagline,
.hero-vista-stat-number,
.hero-vista-stat-label {
    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.6),
        0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* Header nav / CTA / lang-dropdown — extra contrast */
.nav-link,
.header-cta,
.language-dropdown-toggle {
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

/* Chrome primary CTA — stronger floating shadow */
.hero-vista-cta .btn-primary,
.btn-pill-filled {
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

/* Outline "Plan een afspraak" — subtle dark glass background */
.hero-vista-cta .btn-secondary,
.btn-pill-outline {
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}
.hero-vista-cta .btn-secondary:hover,
.btn-pill-outline:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
}

/* ==========================================================================
   Chrome treatment — hero stats numbers (26+ / 13 / 10+)
   Matched aan de hero "MAGNUM CARS" silver gradient, iets diagonaler
   voor het diamond-cut effect op kleinere display-text.
   ========================================================================== */
.hero-vista-stat-number {
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #d4d4d4 15%,
        #9a9a9a 30%,
        #f8f8f8 45%,
        #b0b0b0 60%,
        #7a7a7a 75%,
        #e8e8e8 90%,
        #a0a0a0 100%
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    opacity: 0.95 !important;
    filter:
        drop-shadow(0 2px 12px rgba(0, 0, 0, 0.5))
        drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7)) !important;
    text-shadow: none !important;
}

/* ==========================================================================
   Over Ons — homepage intro sectie (text + stats + portretfoto)
   ========================================================================== */
.over-ons-home {
    padding: 80px 60px 80px 60px;
    background: #ffffff;
}
.over-ons-home-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
}
.over-ons-home-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.over-ons-home-title {
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(2.25rem, 4vw, 3rem) !important;
    text-transform: uppercase !important;
    color: #0A0A0A !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    line-height: 1.1 !important;
}
.over-ons-home-text {
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: rgba(10, 10, 10, 0.7) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    max-width: 480px;
    text-transform: none !important;
    letter-spacing: -0.005em !important;
}
.over-ons-home-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 8px 0;
}
.over-ons-home-stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.over-ons-home-stat-number {
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(1.75rem, 2.5vw, 2.25rem) !important;
    color: #0A0A0A !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
}
.over-ons-home-stat-label {
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    color: rgba(10, 10, 10, 0.55) !important;
    letter-spacing: -0.005em !important;
    line-height: 1.3 !important;
    text-transform: none !important;
}
.over-ons-home-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: transparent;
    border: 1px solid rgba(10, 10, 10, 0.25);
    border-radius: 999px;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #0A0A0A;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    width: fit-content;
    margin-top: 8px;
}
.over-ons-home-cta:hover {
    background: #0A0A0A;
    color: #ffffff;
    border-color: #0A0A0A;
}
.over-ons-home-cta svg {
    transition: transform 0.3s ease;
}
.over-ons-home-cta:hover svg {
    transform: translateX(4px);
}
.over-ons-home-image {
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    width: 100%;
}
.over-ons-home-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 968px) {
    .over-ons-home {
        padding: 60px 24px 80px 24px;
    }
    .over-ons-home-container {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .over-ons-home-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* ==========================================================================
   Dark chrome gradient — aanbod sectie title "ONS HUIDIGE AANBOD"
   Bijna-zwart → mid-silver → bijna-zwart op 135deg. Leesbaar op witte/grijze
   bg, metallic shimmer matching de hero chrome treatment.
   --------------------------------------------------------------------------
   Targets de echte class .aanbod-title én de prompt's fallback-selectors.
   ========================================================================== */
.aanbod-section .aanbod-title,
.aanbod-section-title,
.aanbod-section .section-title,
.aanbod-section h2 {
    background: linear-gradient(
        135deg,
        #1a1a1a 0%,
        #4a4a4a 20%,
        #2a2a2a 40%,
        #5a5a5a 60%,
        #2a2a2a 80%,
        #1a1a1a 100%
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15)) !important;
}

/* ==========================================================================
   Dark chrome gradient — alle grote bold black section/page titles
   --------------------------------------------------------------------------
   Matched aan de aanbod-title chrome treatment. NIET op kleine card-titles
   (service-card-title / aanbod-card-title blijven solid black per design).
   --------------------------------------------------------------------------
   .page-header .page-header-title + h1.page-header-title in de selector
   nodig om de hogere specificiteit (0,1,1) van de bestaande rule met
   color: #0A0A0A !important te overrulen.
   ========================================================================== */
.services-title,
.over-ons-home-title,
.over-ons-home-stat-number,
.over-collage-title,
.over-pillars-title,
.over-spotlight-name,
.auto-title,
.auto-section-title,
.service-usp-num,
.service-hero-title,
.page-header-title,
.page-header .page-header-title,
h1.page-header-title {
    background: linear-gradient(
        135deg,
        #1a1a1a 0%,
        #4a4a4a 20%,
        #2a2a2a 40%,
        #5a5a5a 60%,
        #2a2a2a 80%,
        #1a1a1a 100%
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15)) !important;
}

/* ==========================================================================
   Rounded-corners pass — site-wide consistency
   --------------------------------------------------------------------------
   Actual selectors die in deze codebase bestaan staan eerst; de prompt's
   speculatieve fallback-selectors zijn meegenomen voor defensie (no-op
   als de class niet bestaat).
   ========================================================================== */

/* ELEMENT 1 — Contact form (contact.php) */
.contact-form-card,
.contact-form,
.contact-form-block,
.bericht-form,
.contact-section .form-wrapper,
form.contact {
    border-radius: 24px !important;
    overflow: hidden;
}
.contact-form-submit,
.contact-form button[type="submit"],
.contact-form .submit-btn,
.contact-form .btn-submit,
.contact-form .btn-primary,
.bericht-form button[type="submit"] {
    border-radius: 999px !important;
    padding: 14px 32px !important;
}

/* ELEMENT 2 — Over-ons collage photos (over-ons.php) */
.over-collage-photo,
.over-ons-collage img,
.collage-image,
.collage-photo,
.gallery-collage img,
.over-ons-gallery img,
.over-ons-collage .image {
    border-radius: 16px !important;
}

/* ELEMENT 3 — Aanbod.php grid cards */
.car-card,
.aanbod-grid .car-card,
.aanbod-grid-card,
.aanbod-list-card,
.car-listing-card,
.aanbod-page .car-card,
.aanbod-results .car-card {
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* ELEMENT 4 — Filters sidebar (aanbod.php) */
.aanbod-sidebar,
.aanbod-filters,
.filter-sidebar,
.filters-sidebar,
.aanbod-page aside,
.aanbod-filters-wrapper {
    border-radius: 16px !important;
}
.filter-input,
.aanbod-sidebar select,
.aanbod-sidebar input[type="text"],
.aanbod-sidebar input[type="number"],
.aanbod-filters select,
.aanbod-filters input[type="text"],
.aanbod-filters input[type="number"],
.filter-sidebar select,
.filter-sidebar input[type="text"],
.filter-sidebar input[type="number"],
.filters-sidebar select,
.filters-sidebar input {
    border-radius: 10px !important;
}
.filter-check input[type="checkbox"],
.aanbod-sidebar input[type="checkbox"],
.aanbod-filters input[type="checkbox"],
.filter-sidebar input[type="checkbox"],
.filters-sidebar input[type="checkbox"] {
    border-radius: 4px !important;
}

/* ==========================================================================
   Proces ("Hoe wij werken") + FAQ ("Veelgestelde vragen")
   --------------------------------------------------------------------------
   Twee-koloms homepage sectie tussen Over Ons en footer. Links: 4-step
   process met genummerde cirkels en arrows ertussen. Rechts: native
   <details>/<summary> accordion. Geen JS nodig — browser native.
   ========================================================================== */
.proces-faq-section {
    padding: 80px 60px 120px 60px;
    background: #ffffff;
}
.proces-faq-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 80px;
}

/* Titles — chrome treatment matching aanbod/services */
.proces-title,
.faq-title {
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(1.75rem, 2.6vw, 2.25rem) !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 48px 0 !important;
    background: linear-gradient(
        135deg,
        #1a1a1a 0%,
        #4a4a4a 20%,
        #2a2a2a 40%,
        #5a5a5a 60%,
        #2a2a2a 80%,
        #1a1a1a 100%
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15)) !important;
}

/* LEFT — Process steps */
.proces-steps {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: 12px;
    align-items: start;
}
.proces-step {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.proces-step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(10, 10, 10, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: rgba(10, 10, 10, 0.6) !important;
    letter-spacing: 0.05em !important;
}
.proces-step-title {
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    color: #0A0A0A !important;
    letter-spacing: 0.01em !important;
    line-height: 1.3 !important;
    margin: 12px 0 0 0 !important;
}
.proces-step-text {
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    color: rgba(10, 10, 10, 0.6) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: -0.005em !important;
}
.proces-step-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    color: rgba(10, 10, 10, 0.3);
}

/* RIGHT — FAQ accordion (native details/summary) */
.faq-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.faq-item {
    border: 1px solid rgba(10, 10, 10, 0.12);
    border-radius: 14px;
    background: #ffffff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}
.faq-item[open] {
    background: #FAFAFA;
    border-color: rgba(10, 10, 10, 0.2);
}
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    color: #0A0A0A !important;
    gap: 16px;
    letter-spacing: -0.005em !important;
}
.faq-question::-webkit-details-marker,
.faq-question::marker {
    display: none;
    content: '';
}
.faq-icon {
    font-size: 1.5rem;
    font-weight: 300;
    color: rgba(10, 10, 10, 0.5);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    line-height: 1;
    font-family: 'Inter Tight', sans-serif;
}
.faq-item[open] .faq-icon {
    transform: rotate(45deg);
}
.faq-answer {
    padding: 0 24px 20px 24px;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 0.9rem !important;
    color: rgba(10, 10, 10, 0.65) !important;
    line-height: 1.6 !important;
    text-transform: none !important;
    letter-spacing: -0.005em !important;
}

@media (max-width: 1100px) {
    .proces-faq-container {
        grid-template-columns: 1fr;
        gap: 64px;
    }
    .proces-steps {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .proces-step-arrow {
        display: none;
    }
}
@media (max-width: 600px) {
    .proces-faq-section {
        padding: 80px 24px;
    }
    .proces-steps {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .proces-title,
    .faq-title {
        margin-bottom: 32px !important;
    }
}

/* ==========================================================================
   Chrome PLAN AFSPRAAK button — header CTA
   Matched aan de hero "BEKIJK ONS AANBOD" pill: zelfde 135deg silver
   gradient + dark text + floating shadow + arrow icon.
   ========================================================================== */
.header-cta,
.plan-afspraak-btn,
.site-header .btn-plan-afspraak,
.site-header a[href*="afspraak"],
.site-header a[href*="contact"].cta,
.header-button {
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #e8e8e8 20%,
        #c4c4c4 40%,
        #f5f5f5 55%,
        #d8d8d8 75%,
        #b8b8b8 100%
    ) !important;
    color: #1E2326 !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 24px !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-shadow: none !important;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.25),
        0 2px 4px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.header-cta:hover,
.plan-afspraak-btn:hover,
.site-header .btn-plan-afspraak:hover,
.header-button:hover {
    color: #1E2326 !important;
    transform: translateY(-1px) !important;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================================================
   Rounded corners — drie button-groepen die nog scherp waren
   --------------------------------------------------------------------------
   Echte selectors uit deze codebase staan eerst; de prompt's speculatieve
   fallback-selectors zijn meegenomen (no-op als de class niet bestaat).
   ========================================================================== */

/* BUTTON 1 — "Filters toepassen" pill op aanbod.php */
.filters-apply,
.filter-submit,
.apply-filters,
.aanbod-filters button[type="submit"],
.filter-sidebar button[type="submit"],
.filters-toepassen {
    border-radius: 999px !important;
    padding: 14px 28px !important;
}

/* BUTTON 2 — WhatsApp / Instagram / Direct bellen op contact.php */
.contact-alt-btn,
.contact-channels a,
.contact-channels .channel-btn,
.contact-methods a,
.contact-methods .btn,
.contact-cta-buttons a,
a.whatsapp-btn,
a.instagram-btn,
a.bellen-btn {
    border-radius: 14px !important;
    padding: 16px 28px !important;
}

/* BUTTON 3 — Floating sidebar buttons rechts (alle paginas) */
.floating-btn,
.floating-contact a,
.floating-contact button,
.floating-buttons a,
.side-floating-buttons a,
.contact-floating a,
.side-cta-button,
.side-icon-btn {
    border-radius: 12px !important;
}

/* ==========================================================================
   Unified text styling — header + hero primary + hero secondary buttons
   --------------------------------------------------------------------------
   Alleen typografie wordt geunified (weight/size/letter-spacing/uppercase).
   Background gradients, kleuren, borders, padding, box-shadows, hover-states
   per button blijven uniek (chrome silver vs outline glass).
   --------------------------------------------------------------------------
   Append aan einde van CSS zodat source-order de eerdere font properties
   uit het case-enforcement block en het chrome-cta block overrult.
   ========================================================================== */
.header-cta,
.hero-vista-cta .btn-primary,
.hero-vista-cta .btn-secondary,
.btn-pill-filled,
.btn-pill-outline {
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* ==========================================================================
   Hero secondary (glass) — sizing match aan header CTA + hero primary
   Background/border/text-color intact (dark glass blijft transparent),
   alleen padding + radius geunified zodat de drie buttons identieke
   geometrie hebben.
   ========================================================================== */
.hero-vista-cta .btn-secondary,
.btn-pill-outline {
    padding: 12px 24px !important;
    border-radius: 999px !important;
}


/* ==========================================================================
   auto.php — rounded corners pass (visual consolidation)
   --------------------------------------------------------------------------
   Echte selectors uit auto.php:
   - Gallery main photo: .auto-main-photo  (line 74)
   - Thumbnails: .auto-thumb  (line 91)
   - Sticky info panel: .auto-info  (line 105)
   - CTA buttons: .auto-cta-primary / .auto-cta-secondary  (line 144-147)
   - Calculator container: .auto-finance  (line 257)
   - Calculator fields: .auto-finance-field input / select  (line 264-285)
   - Offerte CTA: .auto-finance-cta  (line 293)
   ========================================================================== */

/* Specs + garantie samengevoegd in één rounded card.
   Conditional opties / eco blokken vallen automatisch mee binnen het
   wrapper via .auto-block siblings. */
.auto-info-combined {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 60px !important;
    margin-bottom: 40px !important;
}
.auto-info-combined .auto-block {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.auto-info-combined .auto-block + .auto-block {
    margin-top: 40px !important;
    padding-top: 40px !important;
}

/* Gallery main photo */
.auto-main-photo {
    border-radius: 20px !important;
    overflow: hidden !important;
}

/* Thumbnails */
.auto-thumb {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Sticky info panel (price + specs + CTAs) */
.auto-info {
    border-radius: 20px !important;
    overflow: hidden !important;
}

/* Plan bezichtiging + WhatsApp buttons */
.auto-cta-primary,
.auto-cta-secondary {
    border-radius: 14px !important;
}

/* Financiering calculator container */
.auto-finance {
    border-radius: 24px !important;
}

/* Alle 4 inputs/select binnen de calculator */
.auto-finance-field input,
.auto-finance-field select {
    border-radius: 10px !important;
}

/* Offerte CTA onderin calculator */
.auto-finance-cta {
    border-radius: 14px !important;
}

@media (max-width: 968px) {
    .auto-info-combined {
        padding: 32px 24px !important;
    }
    .auto-info-combined .auto-block + .auto-block {
        margin-top: 28px !important;
        padding-top: 28px !important;
    }
}

/* ==========================================================================
   Breadcrumb op service detail-pages — positionering binnen .page-service-detail
   --------------------------------------------------------------------------
   De .service-hero heeft padding-top 140px (om onder de fixed header te
   passen). Breadcrumb komt erbóven en moet zelf onder de header passen.
   Lager padding-top op .service-hero compenseert.
   ========================================================================== */
/* Matched aan auto.php spacing chain — zowel verticaal (146/16/40) als
   horizontaal (max-width 1400 + padding 40, identiek aan .auto-container). */
.page-service-detail > .breadcrumb {
    max-width: 1400px;
    margin: 0 auto;
    padding: 130px 40px 16px 40px;
}
.page-service-detail > .breadcrumb .service-hero-inner {
    max-width: none;
    padding: 0;
    margin: 0;
}
.page-service-detail > .breadcrumb + .service-hero {
    padding-top: 40px !important;
}

@media (max-width: 768px) {
    .page-service-detail > .breadcrumb {
        padding: 111px 24px 16px 24px;
        /* auto.php uses .auto-container padding 0 40 desktop, no mobile
           override on the container, but page-auto reduces to 80px top
           padding at 640px. Service mobile matches that 24px side padding
           that the service-hero already uses voor consistency op smal scherm. */
    }
    .page-service-detail > .breadcrumb + .service-hero {
        padding-top: 40px !important;
    }
}

/* ==========================================================================
   Custom car cursor — ALLEEN binnen .hero-vista (homepage hero)
   --------------------------------------------------------------------------
   Inline SVG via data-URI (geen extra HTTP request). Hotspot `20 12` =
   midden van het autootje. Fallback voor browsers zonder SVG-cursor:
   `auto` op de wrapper, `pointer` op buttons/links.
   ========================================================================== */
/* Scoped onder body.home: cursor ALLEEN op homepage header + homepage hero.
   Subpages (body.page-aanbod, body.page-auto, etc) krijgen normale cursor.
   File is een 40x40 PNG (extension .png), hotspot midden op 20 20. */
body.home header,
body.home header *,
body.home .site-header,
body.home .site-header *,
body.home .hero-vista,
body.home .hero-vista * {
    cursor: url("/magnumcars/assets/images/cursor/sportscar.png") 20 20, auto;
}
body.home header a,
body.home header button,
body.home .site-header a,
body.home .site-header button,
body.home .hero-vista a,
body.home .hero-vista button,
body.home .hero-vista .btn,
body.home .hero-vista [class*="btn"] {
    cursor: url("/magnumcars/assets/images/cursor/sportscar.png") 20 20, pointer !important;
}

/* ==========================================================================
   FORCE FIX — auto.php breadcrumb net onder header (user-requested)
   ========================================================================== */
.page-auto,
.auto-detail-page,
body.auto,
body.page-auto {
    padding-top: 60px !important;
    margin-top: 0 !important;
}
.page-auto > .breadcrumb,
.page-auto .breadcrumb,
.page-auto .auto-breadcrumb,
.auto-detail-page > .breadcrumb,
.auto-detail-page .breadcrumb,
body.auto .breadcrumb,
body.page-auto .breadcrumb,
body.page-auto .auto-breadcrumb {
    padding-top: 0 !important;
    margin-top: 0 !important;
    display: block !important;
    visibility: visible !important;
}

@media (max-width: 768px) {
    .page-auto,
    .auto-detail-page,
    body.auto,
    body.page-auto {
        padding-top: 40px !important;
    }
}

/* ==========================================================================
   PREMIUM MOTION — site-wide subtle animations
   --------------------------------------------------------------------------
   1. .fade-up — scroll-reveal class (toggled door IntersectionObserver in main.js)
   2. Hover-lift voor cards + buttons
   3. Hero entrance animations (alleen body.home)
   4. Header slide-in on page load
   --------------------------------------------------------------------------
   Reduced-motion gerespecteerd via @media (prefers-reduced-motion: reduce)
   block hierboven — alle animaties krimpen naar 0.01ms en fade-up forceert
   visible state direct.
   ========================================================================== */

/* --- 1. Scroll-reveal --- */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease-out-smooth),
                transform 0.8s var(--ease-out-smooth);
}
.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.fade-up.delay-1 { transition-delay: 0.1s; }
.fade-up.delay-2 { transition-delay: 0.2s; }
.fade-up.delay-3 { transition-delay: 0.3s; }
.fade-up.delay-4 { transition-delay: 0.4s; }

/* --- 2. Hover-lift cards --- */
.aanbod-card,
.service-card,
.service-usp,
.car-card {
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                background-color var(--transition-fast);
}
.aanbod-section .aanbod-card:hover,
.service-card:hover,
.service-usp:hover,
.car-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.aanbod-section .aanbod-card:hover .aanbod-card-image img,
.car-card:hover .car-card-media img {
    transform: scale(1.05);
}

/* --- 3. Hero entrance — alleen op homepage --- */
@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}
body.home .hero-vista-title {
    animation: heroFadeIn 1.2s var(--ease-out-smooth) 0.2s both;
}
body.home .hero-vista-subtitle {
    animation: heroFadeIn 1.2s var(--ease-out-smooth) 0.5s both;
}
body.home .hero-vista-cta {
    animation: heroFadeIn 1.2s var(--ease-out-smooth) 0.7s both;
}
body.home .hero-vista-bottom {
    animation: heroFadeIn 1.2s var(--ease-out-smooth) 0.9s both;
}

/* --- 4. Header slide-in op page load (alle pagina's) --- */
@keyframes headerSlideIn {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.site-header {
    animation: headerSlideIn 0.8s var(--ease-out-smooth) both;
}

/* ==========================================================================
   DYNAMIC SCROLL EFFECTS — built bovenop bestaande .fade-up + .is-scrolled
   ========================================================================== */

/* --- Scroll progress bar (top, 2px chrome gradient) --- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    z-index: 9999;
    pointer-events: none;
}
.scroll-progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(
        90deg,
        #b8b8b8 0%,
        #ffffff 50%,
        #b8b8b8 100%
    );
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    transition: width 0.1s linear;
    will-change: width;
}

/* --- Slide-in from left/right (alternating reveal) --- */
.slide-in-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 1s var(--ease-out-smooth),
                transform 1s var(--ease-out-smooth);
}
.slide-in-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 1s var(--ease-out-smooth),
                transform 1s var(--ease-out-smooth);
}
.slide-in-left.is-visible,
.slide-in-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* --- Chrome-title underline draw-in (gescopt op echte selectors) --- */
.aanbod-section .aanbod-title,
.services-title,
.over-ons-home-title,
.over-collage-title,
.over-pillars-title,
.service-hero-title,
.auto-section-title {
    position: relative;
    display: inline-block;
}
.aanbod-section .aanbod-title::after,
.services-title::after,
.over-ons-home-title::after,
.over-collage-title::after,
.over-pillars-title::after,
.service-hero-title::after,
.auto-section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #1a1a1a, #5a5a5a, #1a1a1a);
    transition: width 1.2s var(--ease-out-smooth);
}
.aanbod-section .aanbod-title.is-visible::after,
.services-title.is-visible::after,
.over-ons-home-title.is-visible::after,
.over-collage-title.is-visible::after,
.over-pillars-title.is-visible::after,
.service-hero-title.is-visible::after,
.auto-section-title.is-visible::after {
    width: 60px;
}

/* --- will-change strategisch voor GPU acceleration --- */
.hero-vista,
.aanbod-card,
.service-card,
.car-card {
    will-change: transform;
}

/* --- Reduced-motion uitbreidingen (bovenop bestaande regel) --- */
@media (prefers-reduced-motion: reduce) {
    .slide-in-left,
    .slide-in-right {
        opacity: 1 !important;
        transform: none !important;
    }
    .scroll-progress-bar {
        transition: none !important;
    }
    .aanbod-card,
    .service-card,
    .car-card {
        transform: none !important;
    }
    .aanbod-section .aanbod-title::after,
    .services-title::after,
    .over-ons-home-title::after,
    .over-collage-title::after,
    .over-pillars-title::after,
    .service-hero-title::after,
    .auto-section-title::after {
        width: 60px !important;
        transition: none !important;
    }
}

/* ==========================================================================
   SCROLL REVEAL — auto-detect via data-reveal / data-reveal-stagger
   ========================================================================== */
[data-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s var(--ease-out-smooth),
                transform 0.9s var(--ease-out-smooth);
    will-change: opacity, transform;
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}
[data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s var(--ease-out-smooth),
                transform 0.9s var(--ease-out-smooth);
    will-change: opacity, transform;
}
[data-reveal-stagger].is-revealed > * {
    opacity: 1;
    transform: translateY(0);
}
[data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0s; }
[data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 0.24s; }
[data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 0.32s; }
[data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: 0.40s; }
[data-reveal-stagger].is-revealed > *:nth-child(7) { transition-delay: 0.48s; }
[data-reveal-stagger].is-revealed > *:nth-child(8) { transition-delay: 0.56s; }
[data-reveal-stagger].is-revealed > *:nth-child(n+9) { transition-delay: 0.64s; }

/* Hero immuun — heeft eigen heroFadeIn entrance animation */
.hero-vista [data-reveal],
.hero-vista [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal-stagger] > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   Waix.nl attribution bar — losse full-width strook ONDER de footer
   --------------------------------------------------------------------------
   Live als sibling van <footer>, niet erin — zo overlapt 'ie niet met de
   footer gradient/box-shadow. Solid #0a0c0f, edge-to-edge, hele balk klikbaar.
   ========================================================================== */
.footer-waix {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 18px 0;
    background: #0a0c0f;
    color: #ffffff;
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    text-transform: lowercase;
    letter-spacing: 0;
    box-shadow: none;
    border: none;
    transition: opacity 0.3s ease;
}
.footer-waix .waix-dot {
    color: #3a5bff;
    font-weight: 700;
}
.footer-waix:hover {
    opacity: 0.85;
}