/*
Theme Name:  TaxiTheme
Description: Kant-en-klaar thema voor taxibedrijven, inclusief boekingsformulier via CDN.
Version:     0.2.6
Requires at least: 5.8
Requires PHP: 7.4
Author:      Forward Tech Solutions
Author URI:  https://forwardtechsolutions.nl
Text Domain: taxitheme
License:     Proprietary — commercial license required. Reselling, sublicensing,
             or redistribution in any form is prohibited without written permission.
             See LICENSE.txt for full terms.

Copyright (c) 2026 Forward Tech Solutions. All rights reserved.
*/

:root {
    --tt-bg:         #fdfcf7;   /* warme crème achtergrond */
    --tt-surface:    #ffffff;   /* wit voor cards / boxes */
    --tt-fg:         #14161f;   /* diep navy-zwart */
    --tt-muted:      #6c6f7a;
    --tt-line:       #e6e2d5;
    --tt-nav:        #111827;   /* donker navy voor header */
    --tt-nav-fg:     #ffffff;
    --tt-accent:     #f5b800;   /* taxi-geel */
    --tt-accent-rgb: 245, 184, 0;
    --tt-accent-fg:  #14161f;
    --tt-link:       #1e3a8a;   /* diep blauw voor links */
    --tt-radius:     12px;
    --tt-radius-sm:  8px;
    --tt-container:  1180px;
    --tt-shadow:     0 1px 3px rgba(20, 22, 31, 0.06), 0 1px 2px rgba(20, 22, 31, 0.04);
    --tt-shadow-lg:  0 10px 30px -8px rgba(20, 22, 31, 0.15);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--tt-bg);
    color: var(--tt-fg);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--tt-link); text-decoration: none; }
a:hover { opacity: 0.75; }

h1, h2, h3, h4 {
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 0.6em;
    color: var(--tt-fg);
}
h1 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1em; }
.tt-muted { color: var(--tt-muted); }

.tt-container {
    max-width: var(--tt-container);
    margin: 0 auto;
    padding: 0 24px;
}

/*
 * Safe-area support voor iPhone notch / Dynamic Island / home indicator.
 * viewport-fit=cover in <meta> laat de page-bg edge-to-edge doorlopen; hier
 * zorgen we dat de INHOUD (nav, container padding, footer) niet onder de
 * notch of home-indicator verdwijnt. Backgrounds blijven full-bleed.
 */
.tt-header {
    background: var(--tt-nav);
    color: var(--tt-nav-fg);
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: var(--tt-shadow);
    padding-top: env(safe-area-inset-top);
}
.tt-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    gap: 40px;
}
.tt-header__desktop-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
@media (min-width: 901px) and (max-width: 1100px) {
    body .tt-header .tt-header__inner { gap: 20px; }
    body .tt-header .tt-nav > ul { gap: 16px; }
}
/* Footer krijgt extra bottom-padding voor iPhone home indicator */
.tt-footer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
/* Container krijgt safe-area padding op zijkanten (voor landscape mode
   waar de notch links of rechts zit) — additief met de 24px die er al staat. */
.tt-container {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
}
.tt-brand {
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.025em;
    color: var(--tt-nav-fg);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.tt-brand::before {
    content: "";
    width: 32px;
    height: 32px;
    background: var(--tt-accent);
    border-radius: 8px;
    display: inline-block;
}
/* Als er een geüpload logo is: verberg de gele placeholder en toon <img> */
.tt-brand--logo::before { display: none; }
.tt-brand__logo {
    display: block;
    max-height: 48px;
    max-width: 200px;
    width: auto;
    height: auto;
}
@media (max-width: 640px) {
    .tt-brand__logo { max-height: 40px; max-width: 160px; }
}
.tt-nav ul {
    list-style: none;
    display: flex;
    gap: 32px;
    margin: 0;
    padding: 0;
}
.tt-nav > ul { align-items: center; }
.tt-nav li { position: relative; }
.tt-nav a {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    transition: color 0.15s;
    white-space: nowrap;
}
.tt-nav a:hover,
.tt-nav .current-menu-item a {
    color: var(--tt-nav-fg);
    opacity: 1;
}
.tt-nav__more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.tt-nav__more-chevron {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.18s ease;
}
.tt-header .tt-nav .tt-nav__dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 220px;
    padding: 9px;
    background: var(--tt-nav);
    border: 1px solid color-mix(in srgb, var(--tt-nav-fg) 16%, transparent);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-5px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.tt-header .tt-nav .tt-nav__dropdown::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    width: 100%;
    height: 10px;
}
.tt-header .tt-nav .tt-nav__dropdown a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
}
.tt-header .tt-nav .tt-nav__dropdown a:hover {
    background: color-mix(in srgb, var(--tt-nav-fg) 9%, transparent);
}
.tt-nav__more:hover > .tt-nav__dropdown,
.tt-nav__more:focus-within > .tt-nav__dropdown,
.tt-nav__more.is-open > .tt-nav__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.tt-nav__more:hover > .tt-nav__more-toggle .tt-nav__more-chevron,
.tt-nav__more:focus-within > .tt-nav__more-toggle .tt-nav__more-chevron,
.tt-nav__more.is-open > .tt-nav__more-toggle .tt-nav__more-chevron {
    transform: rotate(225deg) translate(-1px, -1px);
}
.tt-nav__more--current > .tt-nav__more-toggle {
    color: var(--tt-nav-fg);
    opacity: 1;
}

.tt-language-switch {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 32px;
    padding: 0 9px;
    gap: 6px;
    border: 0;
    border-radius: 999px;
    color: inherit;
    background: rgba(127, 127, 127, 0.12);
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    opacity: 1;
    transition: background-color 0.18s ease;
}
.tt-language-switch__flag {
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0;
}
.tt-language-switch:hover,
.tt-language-switch:focus-visible {
    color: inherit;
    opacity: 1;
    background: rgba(127, 127, 127, 0.2);
    background: color-mix(in srgb, currentColor 18%, transparent);
}
.tt-language-switch:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.tt-language-switch--mobile { display: none; }
.tt-header__mobile-actions { display: none; }

@media (min-width: 901px) {
    .tt-header__desktop-actions { align-items: stretch; }
    .tt-header__desktop-actions .tt-language-switch--desktop {
        height: auto;
        min-height: 44px;
        padding: 0 16px;
        font-size: 0.88rem;
        font-weight: 600;
        letter-spacing: 0;
        border-radius: var(--tt-radius-sm);
    }
    .tt-header__desktop-actions .tt-header__cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }
    :is(.tt-preset-bold, .tt-preset-premium, .tt-preset-onepage, .tt-preset-simpel)
    .tt-header__desktop-actions .tt-language-switch--desktop {
        border-radius: 999px;
    }
}

/* CTA button */
.tt-cta {
    display: inline-block;
    padding: 12px 22px;
    background: var(--tt-accent);
    color: var(--tt-accent-fg) !important;
    border-radius: var(--tt-radius-sm);
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 4px 14px -4px rgba(245, 184, 0, 0.5);
    transition: transform 0.15s, box-shadow 0.15s;
}
.tt-cta:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px -4px rgba(245, 184, 0, 0.65);
}

/* Hamburger — verborgen op desktop, zichtbaar op mobile */
.tt-hamburger {
    display: none;
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
}
.tt-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--tt-nav-fg);
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
}

/* Mobile menu overlay — verborgen tot .is-open */
.tt-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    display: flex;
    justify-content: flex-end;
}
.tt-mobile-menu.is-open {
    opacity: 1;
    pointer-events: auto;
}
.tt-mobile-menu__inner {
    background: var(--tt-nav);
    color: var(--tt-nav-fg);
    width: min(320px, 85vw);
    height: 100%;
    padding: 24px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
}
.tt-mobile-menu.is-open .tt-mobile-menu__inner {
    transform: translateX(0);
}
.tt-mobile-menu__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    color: var(--tt-nav-fg);
    font-size: 2rem;
    line-height: 1;
    padding: 4px 10px;
    cursor: pointer;
    opacity: 0.7;
}
.tt-mobile-menu__close:hover { opacity: 1; }

.tt-mobile-menu__nav {
    margin-top: 40px;
}
.tt-mobile-menu__nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.tt-mobile-menu__nav li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tt-mobile-menu__nav a {
    display: block;
    padding: 16px 0;
    color: var(--tt-nav-fg);
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    opacity: 0.85;
}
.tt-mobile-menu__nav a:hover,
.tt-mobile-menu__nav .current-menu-item a {
    opacity: 1;
    color: var(--tt-accent);
}

.tt-mobile-menu__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
}
.tt-mobile-menu__cta {
    text-align: center;
    padding: 14px 22px;
}
.tt-mobile-menu__phone {
    display: block;
    text-align: center;
    padding: 12px 22px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--tt-nav-fg);
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: var(--tt-radius-sm);
    text-decoration: none;
}
.tt-mobile-menu__phone:hover {
    background: rgba(255, 255, 255, 0.14);
    opacity: 1;
}

@media (max-width: 900px) {
    /* Toon hamburger, verberg desktop nav + CTA */
    .tt-header__mobile-actions {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: auto;
    }
    .tt-hamburger { display: inline-flex; }
    .tt-nav,
    .tt-header__desktop-actions,
    .tt-header__cta,
    .tt-language-switch--desktop { display: none; }
    .tt-language-switch--mobile {
        display: inline-flex;
    }
    .tt-header__inner { justify-content: space-between; gap: 16px; }
}

/* Main */
.tt-main {
    padding: 72px 0 96px;
    min-height: 60vh;
}

/* Footer — 3+ kolommen */
.tt-footer {
    background: var(--tt-nav);
    color: rgba(255, 255, 255, 0.65);
    padding: 60px 0 24px;
    font-size: 0.92rem;
}
.tt-footer a {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    transition: color 0.15s;
}
.tt-footer a:hover { color: #fff; opacity: 1; }

.tt-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 40px;
}

.tt-footer__col--brand { max-width: 320px; }
.tt-footer__brand {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}
.tt-footer__logo {
    display: block;
    max-height: 56px;
    max-width: 240px;
    width: auto;
    height: auto;
    margin-bottom: 14px;
}
.tt-footer__tagline {
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
    margin: 0;
}

.tt-footer__heading {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 16px;
}
.tt-footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tt-footer__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    line-height: 1.5;
}
.tt-footer__list li svg {
    color: var(--tt-accent);
    flex-shrink: 0;
    margin-top: 4px;
}
.tt-footer__list-addr { align-items: flex-start; }
.tt-footer__list-addr span { color: rgba(255, 255, 255, 0.75); }

.tt-footer__bottom {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}
.tt-footer__legal { display: inline-flex; gap: 6px; align-items: center; }
.tt-footer__legal a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.tt-footer__legal a:hover { color: #fff; opacity: 1; }
.tt-footer__legal-sep { color: rgba(255, 255, 255, 0.3); }

/* Breadcrumbs — auto-gegenereerd op sub-pages, boven de page-header title.
   Neutrale basis-styling; presets kunnen overschrijven voor bg-contrast. */
.tt-breadcrumbs {
    margin-bottom: 16px;
    font-size: 0.85rem;
    line-height: 1.4;
}
.tt-breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    align-items: center;
}
.tt-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tt-breadcrumbs__link {
    color: var(--tt-muted);
    text-decoration: none;
    transition: color 0.15s;
}
.tt-breadcrumbs__link:hover {
    color: var(--tt-fg);
    text-decoration: underline;
}
.tt-breadcrumbs__sep {
    color: var(--tt-muted);
    opacity: 0.6;
    font-size: 0.9em;
}
.tt-breadcrumbs__current {
    color: var(--tt-fg);
    font-weight: 600;
}

/* Legal-content: leesbare prose voor privacy/voorwaarden */
.tt-legal-content {
    max-width: 780px;
    margin: 0 auto;
    color: var(--tt-fg);
    font-size: 1rem;
    line-height: 1.75;
}
.tt-legal-content h2 {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 40px 0 12px;
    color: var(--tt-fg);
}
.tt-legal-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 24px 0 8px;
    color: var(--tt-fg);
}
.tt-legal-content p { margin: 0 0 16px; color: var(--tt-muted); }
.tt-legal-content p:last-child { margin-bottom: 0; }
.tt-legal-content ul, .tt-legal-content ol { margin: 0 0 16px; padding-left: 22px; color: var(--tt-muted); }
.tt-legal-content li { margin-bottom: 6px; }
.tt-legal-content a { color: var(--tt-link); text-decoration: underline; }
.tt-legal-content a:hover { opacity: 0.75; }
.tt-legal-content strong { color: var(--tt-fg); font-weight: 700; }

@media (max-width: 900px) {
    .tt-footer { padding: 48px 0 20px; }
    .tt-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        padding-bottom: 32px;
    }
    .tt-footer__col--brand { grid-column: 1 / -1; max-width: none; }
    .tt-footer__bottom { flex-direction: column; align-items: flex-start; text-align: left; gap: 6px; }
}
@media (max-width: 480px) {
    .tt-footer__grid { grid-template-columns: 1fr; }
}

/* Booking form container */
.taxibookingform {
    background: var(--tt-surface);
    border: 1px solid var(--tt-line);
    border-radius: 24px;
    padding: 28px;
    box-shadow: var(--tt-shadow-lg);
    overflow: hidden; /* zorgt dat interne widget-elementen ook binnen de radius blijven */
}

/* Content prose polish */
.tt-main article > div > *:first-child { margin-top: 0; }
.tt-main ul, .tt-main ol { padding-left: 1.25em; }
.tt-main li { margin-bottom: 0.4em; }

/* ============ Homepage sections ============ */

/* Hero */
.tt-hero {
    background: var(--tt-nav);
    color: #fff;
    padding: 80px 0 100px;
    position: relative;
    overflow: hidden;
}
.tt-hero::after {
    content: "";
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(245, 184, 0, 0.15) 0%, transparent 70%);
    pointer-events: none;
}
.tt-hero__inner {
    position: relative;
    z-index: 1;
}

/* Style: split (default) — text left, form right */
.tt-hero--split .tt-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.tt-hero__form--wide { width: 100%; max-width: 900px; }

/* Style: centered — just text with CTAs, no form in hero */
.tt-hero--centered .tt-hero__inner {
    display: flex;
    justify-content: center;
    text-align: center;
}
.tt-hero--centered .tt-hero__text { max-width: 720px; }

/* Accent optie voor split — gele angulaire shapes achter het form */
.tt-hero__form-wrap { position: relative; }
.tt-hero__form-wrap--accent { z-index: 1; }
.tt-hero__form-wrap--accent .tt-hero__form { position: relative; z-index: 2; }
.tt-hero__image-shape--1 {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80%;
    height: 90%;
    background: var(--tt-accent);
    transform: skewY(-6deg);
    border-radius: 10px;
    z-index: 0;
}
.tt-hero__image-shape--2 {
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 55%;
    height: 55%;
    background: rgba(245, 184, 0, 0.35);
    transform: skewY(-6deg);
    border-radius: 10px;
    z-index: 0;
}

/* Shared modifiers */
.tt-hero__text--center { text-align: center; }
.tt-hero__actions--center { justify-content: center; }
.tt-hero__tagline--center { margin-left: auto; margin-right: auto; }
.tt-hero--centered .tt-hero__tagline,
.tt-hero--minimal .tt-hero__tagline { margin-left: auto; margin-right: auto; }
.tt-hero__form {
    background: transparent;
    padding: 0;
    box-shadow: none;
}
/* Kop boven het formulier — default verborgen op desktop (form is dan rechts
   naast de tekst, dus extra label is overbodig). Op mobile toont 'ie via de
   .tt-hero--split .tt-hero__form-heading rule in de mobile breakpoint. */
.tt-hero__form-heading {
    display: none;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 16px;
    opacity: 0.85;
}
.tt-hero__form .taxibookingform {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}
.tt-hero__text h1 { color: #fff; margin-bottom: 20px; }
.tt-eyebrow {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(245, 184, 0, 0.15);
    color: var(--tt-accent);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 20px;
}
.tt-hero__tagline {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.75);
    max-width: 520px;
    margin-bottom: 32px;
}
.tt-hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 500px; /* voorkomt dat 1 knop absurd breed wordt in centered/stacked text */
    margin-left: auto;
    margin-right: auto;
}
/* Houd de CTA's in de desktop split-layout op dezelfde linkerlijn als de hero-tekst. */
@media (min-width: 901px) {
    .tt-hero--split .tt-hero__actions {
        margin-left: 0;
        margin-right: 0;
    }
}
.tt-hero__actions .tt-cta {
    flex: 1;
    min-width: 140px;
    padding: 14px 24px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.tt-cta--whatsapp {
    background: #25d366 !important;
    color: #fff !important;
    box-shadow: 0 4px 14px -4px rgba(37, 211, 102, 0.5);
}
.tt-cta--whatsapp:hover { box-shadow: 0 6px 20px -4px rgba(37, 211, 102, 0.65); }

.tt-hero__bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
}

/* Style: list — verticale lijst met check-cirkels */
.tt-hero__bullets--list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tt-hero__bullets--list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-size: 1rem;
}
.tt-hero__bullets--list li::before {
    content: "";
    display: inline-block;
    width: 20px; height: 20px;
    background: var(--tt-accent);
    border-radius: 50%;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314161f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
}
.tt-hero__text--center .tt-hero__bullets--list { align-items: center; }

/* Tags — horizontale pill badges (losse hero-sectie) */
.tt-hero__tags {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tt-hero__tags li {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 0.88rem;
    backdrop-filter: blur(4px);
}
.tt-hero__text--center .tt-hero__tags { justify-content: center; }

/* Trust bar — full-width bar onder hero */
.tt-trust {
    background: var(--tt-surface);
    border-bottom: 1px solid var(--tt-line);
    padding: 20px 0;
}
.tt-trust__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.tt-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--tt-muted);
    font-size: 0.9rem;
    font-weight: 500;
}
.tt-trust__item svg {
    color: var(--tt-accent);
    flex-shrink: 0;
}
@media (max-width: 900px) {
    .tt-trust__inner { justify-content: flex-start; gap: 14px 20px; }
}
.tt-cta--ghost {
    background: transparent !important;
    color: #fff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    box-shadow: none;
}
.tt-cta--ghost:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05) !important;
    transform: translateY(-1px);
}

/* Section base */
.tt-section {
    padding: 80px 0;
}
.tt-section__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}
.tt-section__header h2 { margin-bottom: 12px; }

/* USPs */
.tt-usps { background: var(--tt-bg); }
.tt-usps__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.tt-usp {
    background: var(--tt-surface);
    padding: 32px 28px;
    border-radius: var(--tt-radius);
    border: 1px solid var(--tt-line);
    transition: transform 0.2s, box-shadow 0.2s;
}
.tt-usp:hover {
    transform: translateY(-4px);
    box-shadow: var(--tt-shadow-lg);
}
.tt-usp__icon {
    width: 56px;
    height: 56px;
    background: var(--tt-accent);
    color: var(--tt-accent-fg);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 20px;
}
.tt-usp h3 { margin-bottom: 8px; }
.tt-usp p { color: var(--tt-muted); margin-bottom: 0; }

/* About / Over ons — verhaal-blok */
.tt-about {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 12%, rgba(var(--tt-accent-rgb), 0.12), transparent 25rem),
        linear-gradient(180deg, var(--tt-surface) 0%, var(--tt-bg) 100%);
}
.tt-about::before {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    left: -95px;
    bottom: -95px;
    border: 1px solid rgba(var(--tt-accent-rgb), 0.22);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(var(--tt-accent-rgb), 0.05);
    pointer-events: none;
}
.tt-about__inner {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 0 auto;
}
.tt-about.has-image .tt-about__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: clamp(48px, 7vw, 88px);
    align-items: center;
    max-width: var(--tt-container);
}
.tt-about__body { min-width: 0; }
.tt-about.no-image .tt-about__inner {
    padding: clamp(36px, 5vw, 64px);
    background: var(--tt-surface);
    border: 1px solid var(--tt-line);
    border-radius: calc(var(--tt-radius) * 1.5);
    box-shadow: var(--tt-shadow-lg);
}
.tt-about.no-image .tt-about__body {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(40px, 7vw, 88px);
    align-items: start;
}
.tt-about__heading { position: relative; }
.tt-about__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--tt-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.tt-about__eyebrow::before {
    content: "";
    width: 28px;
    height: 3px;
    background: currentColor;
    border-radius: 999px;
}
.tt-about__title {
    max-width: 14ch;
    font-size: clamp(2.15rem, 4vw, 3.35rem);
    line-height: 1.06;
    letter-spacing: -0.045em;
    margin: 0 0 28px;
}
.tt-about.no-image .tt-about__title { margin-bottom: 0; }
.tt-about__copy { max-width: 640px; }
.tt-about__text {
    color: var(--tt-muted);
    font-size: 1.02rem;
    line-height: 1.8;
    margin: 0 0 16px;
}
.tt-about__text:first-child {
    color: var(--tt-fg);
    font-size: 1.1rem;
    font-weight: 600;
}
.tt-about__text:last-of-type { margin-bottom: 30px; }
.tt-about__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 4px;
}
.tt-about__cta-arrow {
    font-size: 1.15em;
    line-height: 1;
    transition: transform 0.2s ease;
}
.tt-about__cta:hover .tt-about__cta-arrow { transform: translateX(4px); }
.tt-about__image {
    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: calc(var(--tt-radius) * 1.5);
    background: var(--tt-line);
    box-shadow: var(--tt-shadow-lg);
}
.tt-about__image::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 22px -22px -22px 22px;
    border-radius: inherit;
    background: var(--tt-accent);
    opacity: 0.85;
}
.tt-about__image::after {
    content: "";
    position: absolute;
    z-index: 2;
    width: 74px;
    height: 74px;
    top: -18px;
    right: -18px;
    border-radius: 50%;
    background: rgba(var(--tt-accent-rgb), 0.2);
    border: 1px solid rgba(var(--tt-accent-rgb), 0.38);
    backdrop-filter: blur(5px);
    pointer-events: none;
}
.tt-about__image img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}
@media (max-width: 800px) {
    .tt-about::before { display: none; }
    .tt-about.has-image .tt-about__inner,
    .tt-about.no-image .tt-about__body {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .tt-about.no-image .tt-about__inner {
        padding: 30px 24px;
        border-radius: var(--tt-radius);
    }
    .tt-about__title {
        max-width: 18ch;
        font-size: clamp(2rem, 9vw, 2.65rem);
        margin-bottom: 20px;
    }
    .tt-about.no-image .tt-about__title { margin-bottom: 0; }
    .tt-about__text,
    .tt-about__text:first-child {
        font-size: 1rem;
        line-height: 1.7;
    }
    .tt-about__text:last-of-type { margin-bottom: 24px; }
    .tt-about__cta { width: 100%; }
    .tt-about__image {
        aspect-ratio: 4 / 3;
        width: calc(100% - 14px);
    }
    .tt-about__image::before { inset: 14px -14px -14px 14px; }
    .tt-about__image::after {
        width: 52px;
        height: 52px;
        top: -12px;
        right: -12px;
    }
}

/* FAQ — accordion met native <details>/<summary> */
.tt-faq { background: var(--tt-bg); }
.tt-faq__list {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tt-faq__item {
    background: var(--tt-surface);
    border: 1px solid var(--tt-line);
    border-radius: var(--tt-radius);
    overflow: hidden;
    transition: border-color 0.15s;
}
.tt-faq__item:hover { border-color: var(--tt-muted); }
.tt-faq__item[open] { border-color: var(--tt-accent); }
.tt-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--tt-fg);
    list-style: none;
}
.tt-faq__question::-webkit-details-marker { display: none; }
.tt-faq__q-text { flex: 1; }
.tt-faq__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    transition: transform 0.2s;
}
.tt-faq__icon::before,
.tt-faq__icon::after {
    content: "";
    position: absolute;
    background: var(--tt-accent);
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.tt-faq__icon::before { width: 14px; height: 2px; }
.tt-faq__icon::after  { width: 2px;  height: 14px; transition: transform 0.2s; }
.tt-faq__item[open] .tt-faq__icon::after { transform: translate(-50%, -50%) scaleY(0); }
.tt-faq__answer {
    padding: 0 24px 22px;
    color: var(--tt-muted);
    line-height: 1.7;
}
.tt-faq__more {
    text-align: center;
    margin-top: 32px;
}
.tt-faq__more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--tt-accent);
    font-weight: 700;
    font-size: 0.95rem;
    transition: gap 0.15s;
}
.tt-faq__more-link:hover { gap: 12px; opacity: 1; }

/* Fleet — "Ons wagenpark" mozaïek-grid */
.tt-fleet { background: var(--tt-bg); }
.tt-fleet__grid {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr;
    grid-template-rows: var(--tt-fleet-row-height, 220px) var(--tt-fleet-row-height, 220px) var(--tt-fleet-feature-height, 260px);
    grid-template-areas:
        "a a b b"
        "a a c d"
        "e e e e";
    gap: 16px;
}
.tt-fleet__grid--count-1 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: clamp(240px, 34vw, 480px);
    grid-template-areas: "a";
}
.tt-fleet__grid--count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: clamp(220px, 27vw, 380px);
    grid-template-areas: "a b";
}
.tt-fleet__grid--count-3 {
    grid-template-rows: repeat(2, var(--tt-fleet-row-height, 220px));
    grid-template-areas: "a a b b" "a a c c";
}
.tt-fleet__grid--count-4 {
    grid-template-rows: repeat(2, var(--tt-fleet-row-height, 220px));
    grid-template-areas: "a a b b" "a a c d";
}
.tt-fleet__card {
    position: relative;
    margin: 0;
    border-radius: var(--tt-radius);
    overflow: hidden;
    background: var(--tt-line);
    min-height: 0;
}
.tt-fleet__card--a { grid-area: a; }
.tt-fleet__card--b { grid-area: b; }
.tt-fleet__card--c { grid-area: c; }
.tt-fleet__card--d { grid-area: d; }
.tt-fleet__card--e { grid-area: e; }
.tt-fleet__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.tt-fleet__card:hover img { transform: scale(1.05); }
.tt-fleet__overlay {
    position: absolute;
    inset: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}
.tt-fleet__tag {
    display: inline-block;
    align-self: flex-start;
    padding: 6px 12px;
    background: var(--tt-nav);
    color: var(--tt-nav-fg);
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 999px;
    letter-spacing: 0.01em;
}
.tt-fleet__card--feature .tt-fleet__overlay {
    background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.6) 100%);
    padding: 28px 32px;
}
.tt-fleet__title {
    color: #ffffff;
    font-size: clamp(1.25rem, 2.2vw, 1.8rem);
    font-weight: 800;
    margin: 0 0 6px;
    letter-spacing: -0.015em;
}
.tt-fleet__subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    margin: 0;
}
@media (max-width: 800px) {
    .tt-fleet__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: none;
        gap: 12px;
    }
    .tt-fleet__card {
        grid-area: auto;
        aspect-ratio: 16 / 10;
    }
    .tt-fleet__card--e { aspect-ratio: 21 / 9; }
}

/* Reviews — klantreviews grid met sterren + Google CTA */
.tt-reviews { background: var(--tt-bg); }
.tt-reviews__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.tt-reviews__card {
    background: var(--tt-surface);
    border: 1px solid var(--tt-line);
    border-radius: var(--tt-radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tt-reviews__stars {
    --tt-review-star: #f5b800;
    display: inline-flex;
    gap: 2px;
}
.tt-reviews__star svg {
    fill: none;
    stroke: var(--tt-line);
    stroke-width: 2;
    display: block;
}
.tt-reviews__star.is-filled svg {
    fill: var(--tt-review-star);
    stroke: var(--tt-review-star);
}
.tt-reviews__text {
    color: var(--tt-fg);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}
.tt-reviews__meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--tt-line);
}
.tt-reviews__name {
    color: var(--tt-fg);
    font-weight: 700;
    font-size: 0.95rem;
}
.tt-reviews__date {
    color: var(--tt-muted);
    font-size: 0.85rem;
}
.tt-reviews__cta-wrap {
    text-align: center;
    margin-top: 32px;
}
.tt-reviews__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--tt-accent);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: gap 0.15s;
}
.tt-reviews__cta:hover { gap: 12px; opacity: 1; }

/* Steps — "Hoe werkt het" (genummerde stappen in card) */
.tt-steps { background: var(--tt-surface); }
.tt-steps__card {
    background: var(--tt-bg);
    border: 1px solid var(--tt-line);
    border-radius: var(--tt-radius);
    padding: 48px;
}
.tt-steps__title {
    font-size: clamp(1.6rem, 2.8vw, 2rem);
    margin: 0 0 10px;
}
.tt-steps__subtitle {
    color: var(--tt-muted);
    margin: 0 0 40px;
    font-size: 1.02rem;
}
.tt-steps__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px 40px;
}
.tt-steps__item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 20px;
    border-left: 1px solid var(--tt-line);
}
.tt-steps__item:first-child { border-left: none; padding-left: 0; }
.tt-steps__num {
    color: var(--tt-accent);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}
.tt-steps__item-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}
.tt-steps__item-text {
    color: var(--tt-muted);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}
@media (max-width: 700px) {
    .tt-steps__card { padding: 28px 24px; }
    .tt-steps__grid { grid-template-columns: 1fr; gap: 24px; }
    .tt-steps__item { padding-left: 0; border-left: none; padding-top: 24px; border-top: 1px solid var(--tt-line); }
    .tt-steps__item:first-child { padding-top: 0; border-top: none; }
}

/* Breadcrumb (Over ons + andere sub-pages) */
.tt-crumbs {
    background: var(--tt-surface);
    padding: 20px 0 12px;
    font-size: 0.88rem;
    color: var(--tt-muted);
}
.tt-crumbs a { color: var(--tt-muted); text-decoration: none; }
.tt-crumbs a:hover { color: var(--tt-fg); }
.tt-crumbs__sep { margin: 0 8px; color: var(--tt-line); }
.tt-crumbs__current { color: var(--tt-fg); font-weight: 600; }

/* Dark ghost CTA variant — voor gebruik op donkere achtergrond */
.tt-cta--dark {
    background: #14161f !important;
    color: #fff !important;
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.5);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
}
.tt-cta--dark:hover {
    background: #1e2131 !important;
    color: #fff !important;
    box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.7);
}

/* Zelfstandige USP-sectie onder de Over ons-paginakop. */
.tt-over-usps-wrap {
    background: var(--tt-bg);
    padding: 48px 0;
    text-align: center;
}
.tt-over-usps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--tt-surface);
    border-radius: var(--tt-radius);
    box-shadow: var(--tt-shadow-lg);
    padding: 32px 8px;
    position: relative;
    z-index: 2;
}
.tt-over-usp {
    padding: 8px 24px;
    border-right: 1px solid var(--tt-line);
}
.tt-over-usp:last-child { border-right: none; }
.tt-over-usp__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(var(--tt-accent-rgb), 0.18);
    color: var(--tt-accent);
    border-radius: 50%;
    margin-bottom: 14px;
}
.tt-over-usp__title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--tt-fg);
    margin: 0 0 8px;
}
.tt-over-usp__text {
    font-size: 0.9rem;
    color: var(--tt-muted);
    line-height: 1.55;
    margin: 0;
}
@media (max-width: 900px) {
    .tt-over-usps {
        grid-template-columns: repeat(2, 1fr);
        padding: 20px 8px;
    }
    .tt-over-usp {
        padding: 16px 20px;
        border-right: none;
        border-bottom: 1px solid var(--tt-line);
    }
    .tt-over-usp:nth-child(odd) { border-right: 1px solid var(--tt-line); }
    .tt-over-usp:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 560px) {
    .tt-over-usps {
        grid-template-columns: 1fr;
    }
    .tt-over-usp { border-right: none !important; }
    .tt-over-usp:not(:last-child) { border-bottom: 1px solid var(--tt-line); }
}

/* Page header — voor sub-pages (diensten, tarieven, over-ons, contact, faq) */
.tt-page-header {
    background: var(--tt-surface);
    padding: 70px 0 40px;
    text-align: center;
}
.tt-page-header__eyebrow {
    display: inline-block;
    color: var(--tt-accent);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.tt-page-header__title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0 0 20px;
}
.tt-page-header__intro {
    color: var(--tt-muted);
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto;
}
.tt-page-header__intro p:last-child { margin-bottom: 0; }
.tt-page-header__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}
.tt-page-header__actions .tt-cta {
    padding: 12px 26px;
}
@media (max-width: 900px) {
    .tt-page-header__actions { flex-direction: column; align-items: stretch; }
    .tt-page-header__actions .tt-cta { text-align: center; justify-content: center; }
    body.tt-role-over-ons .tt-page-header { padding-bottom: 32px; }
    .tt-over-usps-wrap { padding: 32px 0; }
}

/* Diensten-pagina — grotere services grid met wat meer ademruimte */
.tt-services--page {
    background: var(--tt-bg);
    padding: 60px 0 80px;
}
.tt-services--page .tt-services__grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
}

/* Services-detail — ruime verticale lijst voor lange dienstbeschrijvingen. */
.tt-services-detail {
    background: var(--tt-bg);
    padding: 24px 0 96px;
}
.tt-services-detail__container {
    max-width: 1180px;
    margin: 0 auto;
}
.tt-services-detail__list {
    display: flex;
    flex-direction: column;
}
.tt-services-detail__row {
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(44px, 6vw, 76px);
    align-items: start;
    padding: 64px 0;
    border-bottom: 1px solid var(--tt-line);
}
.tt-services-detail__row:first-child { padding-top: 28px; }
.tt-services-detail__row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.tt-services-detail__row.no-image {
    grid-template-columns: 1fr;
}
.tt-services-detail__row.no-image .tt-services-detail__body {
    max-width: 900px;
    padding-left: 30px;
    border-left: 4px solid var(--tt-accent);
}

/* Optionele afbeelding */
.tt-services-detail__media {
    margin: 0;
    aspect-ratio: 4 / 3;
    background: var(--tt-surface);
    overflow: hidden;
    border: 1px solid var(--tt-line);
    border-radius: calc(var(--tt-radius) * 1.25);
    box-shadow: var(--tt-shadow);
}
.tt-services-detail__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}
.tt-services-detail__row:hover .tt-services-detail__media img { transform: scale(1.025); }

/* Body */
.tt-services-detail__body {
    min-width: 0;
    padding: 8px 0;
}
.tt-services-detail__head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
}
.tt-services-detail__heading {
    min-width: 0;
}
.tt-services-detail__icon-small {
    display: inline-flex;
    width: 44px;
    height: 44px;
    background: var(--tt-accent);
    color: var(--tt-accent-fg);
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-top: 2px;
}
.tt-services-detail__title {
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    margin: 0;
    letter-spacing: -0.035em;
    line-height: 1.12;
}
.tt-services-detail__price {
    display: inline-block;
    color: var(--tt-accent);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    margin-top: 10px;
    padding: 4px 12px;
    background: rgba(var(--tt-accent-rgb), 0.1);
    border-radius: 999px;
}
.tt-services-detail__content {
    max-width: 72ch;
}
.tt-services-detail__text {
    color: var(--tt-fg);
    line-height: 1.82;
    margin: 0 0 18px;
    font-size: 1.04rem;
}
.tt-services-detail__blocks {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 0;
}
.tt-services-detail__block-title {
    color: var(--tt-fg);
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 0 0 10px;
}
.tt-services-detail__block .tt-services-detail__text:last-child {
    margin-bottom: 0;
}
.tt-services-detail__features {
    list-style: none;
    padding: 0;
    margin: 28px 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
}
.tt-services-detail__features li {
    padding-left: 28px;
    position: relative;
    color: var(--tt-fg);
    font-weight: 500;
    font-size: 0.98rem;
}
.tt-services-detail__features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    background: var(--tt-accent);
    color: var(--tt-accent-fg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
}
.tt-services-detail__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    transition: gap 0.15s, transform 0.15s, box-shadow 0.15s;
}
.tt-services-detail__button:hover { gap: 10px; opacity: 1; }

@media (max-width: 900px) {
    .tt-services-detail {
        padding: 16px 0 64px;
    }
    .tt-services-detail__row {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 44px 0;
    }
    .tt-services-detail__row:first-child { padding-top: 24px; }
    .tt-services-detail__row.no-image .tt-services-detail__body {
        padding: 0 0 0 18px;
    }
    .tt-services-detail__media {
        aspect-ratio: 16 / 10;
    }
    .tt-services-detail__body { padding: 0; }
    .tt-services-detail__head {
        gap: 14px;
        margin-bottom: 18px;
    }
    .tt-services-detail__title {
        font-size: clamp(1.55rem, 7vw, 2rem);
    }
    .tt-services-detail__text {
        font-size: 1rem;
        line-height: 1.75;
    }
    .tt-services-detail__features {
        grid-template-columns: 1fr;
        margin: 24px 0;
    }
}

/* Page-sections — per-page vrije info-blokken (tarieven, diensten, over-ons).
 * Modern editorial split: titel-kolom links, tekst-kolom rechts. Stackt op mobile.
 * Transparant zodat het naadloos aansluit op de body-kleur (crème in Klassiek,
 * dark in Onepage). Preset-specifieke overrides zoals Bold zetten dit alsnog op dark. */
.tt-tarieven-text {
    padding: 72px 0;
    background: var(--tt-surface);
}
.tt-tarieven-text__inner {
    max-width: 820px;
    margin: 0 auto;
}
.tt-tarieven-text--wide .tt-tarieven-text__inner {
    max-width: 1160px;
}
.tt-tarieven-text__title {
    margin: 0 0 20px;
    color: var(--tt-fg);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
}
.tt-tarieven-text__subtitle {
    color: var(--tt-fg);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 750;
    letter-spacing: -0.015em;
}
.tt-tarieven-text__content {
    min-width: 0;
}
.tt-tarieven-text--columns .tt-tarieven-text__content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}
.tt-tarieven-text--image-left .tt-tarieven-text__content,
.tt-tarieven-text--image-right .tt-tarieven-text__content {
    display: flow-root;
}
.tt-tarieven-text--image-left .tt-tarieven-text__media,
.tt-tarieven-text--image-right .tt-tarieven-text__media {
    width: min(48%, 560px);
    height: clamp(440px, 48vw, 620px);
    aspect-ratio: auto;
}
.tt-tarieven-text--image-left .tt-tarieven-text__media {
    float: left;
    margin: 0 clamp(28px, 4vw, 56px) 28px 0;
}
.tt-tarieven-text--image-right .tt-tarieven-text__media {
    float: right;
    margin: 0 0 28px clamp(28px, 4vw, 56px);
}
.tt-tarieven-text__media {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--tt-bg);
    border: 1px solid var(--tt-line);
    border-radius: calc(var(--tt-radius) * 1.2);
    box-shadow: var(--tt-shadow);
}
.tt-tarieven-text__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tt-tarieven-text__body {
    color: var(--tt-fg);
    font-size: 1.05rem;
    line-height: 1.8;
}
.tt-tarieven-text__body p {
    margin: 0 0 18px;
}
.tt-tarieven-text__body p:last-child {
    margin-bottom: 0;
}
.tt-tarieven-text__block + .tt-tarieven-text__block {
    margin-top: 28px;
}
.tt-tarieven-text__body > p + .tt-tarieven-text__block {
    margin-top: 30px;
}
.tt-tarieven-text__body :is(h2, h3, h4) {
    color: var(--tt-fg);
    margin: 1.25em 0 0.55em;
    line-height: 1.25;
}
.tt-tarieven-text__body :is(h2, h3, h4):first-child { margin-top: 0; }
.tt-tarieven-text__body :is(ul, ol) {
    margin: 0 0 18px;
    padding-left: 1.3em;
}
.tt-tarieven-text__body li + li { margin-top: 6px; }
.tt-tarieven-text__body a {
    color: var(--tt-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tt-preset-bold .tt-tarieven-text {
    background: var(--tt-bold-bg-alt, #14161f);
}
.tt-preset-bold .tt-tarieven-text__title,
.tt-preset-bold .tt-tarieven-text__subtitle { color: var(--tt-bold-fg); }
.tt-preset-onepage .tt-tarieven-text__title,
.tt-preset-onepage .tt-tarieven-text__subtitle { color: #ffffff; }
.tt-preset-bold .tt-tarieven-text__body { color: var(--tt-bold-fg); }
.tt-preset-onepage .tt-tarieven-text__body { color: #ffffff; }
.tt-preset-onepage .tt-tarieven-text {
    background: rgba(255, 255, 255, 0.035);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.tt-preset-premium .tt-tarieven-text {
    background: #f8fafc;
}
@media (max-width: 700px) {
    .tt-tarieven-text { padding: 52px 0; }
    .tt-tarieven-text--columns .tt-tarieven-text__content {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .tt-tarieven-text--image-left .tt-tarieven-text__media,
    .tt-tarieven-text--image-right .tt-tarieven-text__media {
        float: none;
        width: 100%;
        height: clamp(280px, 78vw, 420px);
        margin: 0 0 28px;
    }
}

/* Flexibele inhoudsblokken voor subpagina's en de homepage. */
.tt-extra-content__block {
    padding: clamp(56px, 7vw, 88px) 0;
    background: var(--tt-surface);
    color: var(--tt-fg);
}
.tt-extra-content__inner {
    max-width: 860px;
    margin: 0 auto;
}
.tt-extra-content__block--image-left.tt-extra-content__block--has-image .tt-extra-content__inner,
.tt-extra-content__block--image-right.tt-extra-content__block--has-image .tt-extra-content__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 76px);
    align-items: start;
    max-width: 1160px;
}
.tt-extra-content__block--image-right .tt-extra-content__media { order: 2; }
.tt-extra-content__block--columns .tt-extra-content__inner { max-width: 1100px; }
.tt-extra-content__block--title-left .tt-extra-content__inner {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 60px;
    align-items: start;
    max-width: 1200px;
}
.tt-extra-content__editorial-head {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.tt-extra-content__block--title-left .tt-extra-content__media { aspect-ratio: 4 / 3; }
.tt-extra-content__block--title-left .tt-extra-content__content { padding-top: 8px; }
.tt-extra-content__block--title-left .tt-extra-content__title {
    margin: 0;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
}
.tt-extra-content__block--title-left .tt-extra-content__title-row { margin-bottom: 0; }
.tt-extra-content__block--highlight .tt-extra-content__inner {
    max-width: 1000px;
    padding: clamp(30px, 5vw, 56px);
    background: color-mix(in srgb, var(--tt-accent) 9%, var(--tt-surface));
    border: 1px solid color-mix(in srgb, var(--tt-accent) 26%, var(--tt-line));
    border-left: 5px solid var(--tt-accent);
    border-radius: calc(var(--tt-radius) * 1.25);
    box-shadow: var(--tt-shadow);
}
.tt-extra-content__media {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--tt-bg);
    border: 1px solid var(--tt-line);
    border-radius: calc(var(--tt-radius) * 1.2);
    box-shadow: var(--tt-shadow);
}
.tt-extra-content__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tt-extra-content__content { min-width: 0; }
.tt-extra-content__title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
}
.tt-extra-content__title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    background: var(--tt-accent);
    color: var(--tt-accent-fg);
    border-radius: 12px;
}
.tt-extra-content__title {
    margin: 0;
    color: var(--tt-fg);
    font-size: clamp(1.65rem, 3vw, 2.45rem);
    line-height: 1.16;
    letter-spacing: -0.025em;
}
.tt-extra-content__body {
    color: var(--tt-muted);
    font-size: 1.05rem;
    line-height: 1.8;
}
.tt-extra-content__body--columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(30px, 5vw, 70px);
}
.tt-extra-content__subtitle {
    margin: 0 0 10px;
    color: var(--tt-fg);
    font-size: clamp(1.08rem, 2vw, 1.3rem);
    line-height: 1.3;
}
.tt-extra-content__text-block + .tt-extra-content__text-block { margin-top: 28px; }
.tt-extra-content__body--columns .tt-extra-content__text-block + .tt-extra-content__text-block { margin-top: 0; }
.tt-extra-content__text p { margin: 0 0 18px; }
.tt-extra-content__text p:last-child { margin-bottom: 0; }
.tt-extra-content__button { margin-top: 28px; }

@media (max-width: 760px) {
    /* Een gestapelde tekstsectie heeft minder ruimte nodig dan de desktop-split. */
    body .tt-section.tt-extra-content__block { padding: 36px 0; }
    .tt-extra-content__block--image-left.tt-extra-content__block--has-image .tt-extra-content__inner,
    .tt-extra-content__block--image-right.tt-extra-content__block--has-image .tt-extra-content__inner,
    .tt-extra-content__block--title-left .tt-extra-content__inner,
    .tt-extra-content__body--columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .tt-extra-content__block--title-left .tt-extra-content__title {
        font-size: clamp(1.75rem, 6vw, 2rem);
    }
    .tt-extra-content__body { line-height: 1.7; }
    .tt-extra-content__block--image-right .tt-extra-content__media { order: 0; }
    .tt-extra-content__media { aspect-ratio: 16 / 11; }
    .tt-extra-content__block--title-left .tt-extra-content__media { aspect-ratio: 16 / 10; }
    .tt-extra-content__block--title-left .tt-extra-content__content { padding-top: 0; }
    .tt-extra-content__block--highlight .tt-extra-content__inner { border-left-width: 4px; }
}

.tt-page-sections-wrap {
    background: transparent;
    padding: 60px 0 80px;
}
.tt-page-sections {
    display: flex;
    flex-direction: column;
    gap: 64px;
    max-width: 1200px;
    margin: 0 auto;
}
.tt-page-section {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 60px;
    align-items: start;
}
.tt-page-section__head {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.tt-page-section__image {
    aspect-ratio: 4 / 5;
    border-radius: var(--tt-radius);
    overflow: hidden;
    background: var(--tt-surface);
    border: 1px solid var(--tt-line);
    width: 100%;
}
.tt-page-section__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tt-page-section__body {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
}
.tt-page-section__title {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--tt-fg);
}
.tt-page-section__text {
    color: var(--tt-muted);
    line-height: 1.75;
    margin: 0 0 18px;
    font-size: 1.02rem;
}
.tt-page-section__text:last-child { margin-bottom: 0; }
@media (max-width: 800px) {
    .tt-page-sections { gap: 48px; }
    .tt-page-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .tt-page-section__image {
        aspect-ratio: 16 / 10;
    }
}

/* Contact-info kaarten — voor de Contact-pagina */
.tt-contact-info-wrap { padding: 60px 0 20px; }
.tt-contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.tt-contact-info__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px 22px;
    background: var(--tt-surface);
    border: 1px solid var(--tt-line);
    border-radius: var(--tt-radius);
    color: var(--tt-fg) !important;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
a.tt-contact-info__card:hover {
    transform: translateY(-2px);
    border-color: var(--tt-accent);
    box-shadow: var(--tt-shadow);
}
.tt-contact-info__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(var(--tt-accent-rgb), 0.15);
    color: var(--tt-accent);
    border-radius: var(--tt-radius-sm);
    margin-bottom: 6px;
}
.tt-contact-info__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tt-muted);
}
.tt-contact-info__value {
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--tt-fg);
}

/* Tarieven-pagina — routes als hoofdcontent */
.tt-routes--page {
    background: var(--tt-bg);
    padding: 60px 0 40px;
}
.tt-routes__note {
    max-width: 640px;
    margin: 40px auto 0;
    text-align: center;
    color: var(--tt-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Spotlight — één prominente highlight-kaart */
.tt-spotlight { background: var(--tt-bg); }
.tt-spotlight__card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    background: var(--tt-surface);
    border: 1px solid var(--tt-line);
    border-radius: var(--tt-radius);
    padding: 40px;
    overflow: hidden;
}
.tt-spotlight__icon {
    background: var(--tt-accent);
    color: var(--tt-accent-fg);
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.tt-spotlight__body {
    position: relative;
    z-index: 1;
    max-width: 640px;
}
.tt-spotlight__eyebrow {
    display: inline-block;
    color: var(--tt-accent);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}
.tt-spotlight__title {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    margin: 0 0 14px;
}
.tt-spotlight__text {
    color: var(--tt-muted);
    line-height: 1.65;
    margin: 0 0 18px;
    font-size: 1rem;
}
.tt-spotlight__link {
    color: var(--tt-accent);
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.15s;
}
.tt-spotlight__link:hover { gap: 10px; opacity: 1; }
/* Faded decoratie-icon rechts — grote versie van dezelfde icon */
.tt-spotlight__decoration {
    position: absolute;
    top: 50%;
    right: -30px;
    transform: translateY(-50%);
    color: var(--tt-accent);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}
.tt-spotlight__decoration svg {
    width: 220px;
    height: 220px;
    stroke-width: 1;
}

/* Promo variant — accent-band met grote discount display rechts */
.tt-spotlight--promo .tt-spotlight__card {
    background: var(--tt-accent);
    border-color: transparent;
    color: var(--tt-accent-fg);
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 32px 40px;
}
.tt-spotlight--promo .tt-spotlight__icon {
    background: rgba(0, 0, 0, 0.15);
    color: var(--tt-accent-fg);
}
.tt-spotlight--promo .tt-spotlight__eyebrow { color: var(--tt-accent-fg); opacity: 0.85; }
.tt-spotlight--promo .tt-spotlight__title   { color: var(--tt-accent-fg); }
.tt-spotlight--promo .tt-spotlight__text    { color: var(--tt-accent-fg); opacity: 0.85; }
.tt-spotlight--promo .tt-spotlight__link {
    color: var(--tt-accent-fg);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tt-spotlight__discount {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 12px;
    line-height: 1;
    color: var(--tt-accent-fg);
    flex-shrink: 0;
    z-index: 1;
    position: relative;
}
.tt-spotlight__discount-value {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.9;
}
.tt-spotlight__discount-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 6px;
    opacity: 0.85;
}

@media (max-width: 700px) {
    .tt-spotlight__card {
        padding: 28px;
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .tt-spotlight--promo .tt-spotlight__card {
        grid-template-columns: 1fr;
    }
    .tt-spotlight__decoration svg { width: 140px; height: 140px; }
    .tt-spotlight__discount { padding: 0; }
    .tt-spotlight__discount-value { font-size: 3.5rem; }
}

/* Services / diensten */
.tt-services { background: var(--tt-surface); }
.tt-services__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.tt-services__card {
    background: var(--tt-bg);
    border: 1px solid var(--tt-line);
    border-radius: var(--tt-radius);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.tt-services__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tt-shadow-lg);
    border-color: var(--tt-accent);
}
.tt-services__icon {
    width: 44px;
    height: 44px;
    background: var(--tt-accent);
    color: var(--tt-accent-fg);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.tt-services__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 10px;
}
.tt-services__text {
    color: var(--tt-muted);
    margin: 0 0 20px;
    flex: 1;
}
.tt-services__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tt-accent);
    font-weight: 700;
    font-size: 0.92rem;
    margin-top: auto;
    transition: gap 0.15s;
}
.tt-services__link:hover {
    gap: 10px;
    opacity: 1;
}

@media (max-width: 900px) {
    .tt-services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .tt-services__grid {
        grid-template-columns: 1fr;
    }
}

/* Waarom ons */
.tt-waarom { background: var(--tt-bg); }
.tt-waarom__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}
.tt-waarom.has-image .tt-waarom__inner {
    grid-template-columns: 1fr 1.4fr;
    gap: 60px;
}
.tt-waarom__image {
    border-radius: var(--tt-radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--tt-line);
}
.tt-waarom__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tt-waarom__body h2 { margin-bottom: 12px; }
.tt-waarom__body .tt-muted { margin-bottom: 24px; }
.tt-check {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
}
.tt-check li {
    padding-left: 34px;
    position: relative;
    font-weight: 500;
    font-size: 1.02rem;
}
.tt-check li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: -2px;
    width: 24px;
    height: 24px;
    background: var(--tt-accent);
    color: var(--tt-accent-fg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
}

/* Service gebied — grid van plaats-chips */
.tt-service-area { background: var(--tt-surface); }
.tt-service-area__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}
.tt-service-area__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--tt-bg);
    border: 1px solid var(--tt-line);
    border-radius: var(--tt-radius-sm);
    font-weight: 600;
    transition: transform 0.15s, border-color 0.15s;
}
.tt-service-area__item:hover {
    transform: translateY(-2px);
    border-color: var(--tt-accent);
}
.tt-service-area__item svg {
    color: var(--tt-accent);
    flex-shrink: 0;
}

/* Vaste route prijzen — grid van route cards met prijs */
.tt-routes { background: var(--tt-bg); }
.tt-routes__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
}
/* 6+ routes: expliciet 2-koloms zodat de lange lijst netjes in kolommen valt */
.tt-routes__grid--two-col {
    grid-template-columns: 1fr 1fr;
    max-width: none;
    gap: 20px;
}
@media (max-width: 800px) {
    .tt-routes__grid--two-col { grid-template-columns: 1fr; }
}
.tt-routes__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    background: var(--tt-surface);
    border: 1px solid var(--tt-line);
    border-radius: var(--tt-radius);
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.tt-routes__card:hover {
    transform: translateY(-2px);
    border-color: var(--tt-accent);
    box-shadow: var(--tt-shadow-lg);
}
.tt-routes__route {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-weight: 600;
    color: var(--tt-fg);
    flex: 1;
    line-height: 1.35;
}
.tt-routes__route svg { color: var(--tt-muted); flex-shrink: 0; }
.tt-routes__price {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--tt-fg);
    background: var(--tt-accent);
    padding: 6px 14px;
    border-radius: 8px;
    white-space: nowrap;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

/*
 * Tarieven-pagina — rijke prijs-blokken
 * Drie types: vervoerstypes (car cards), bestemmingen (list), regionale zones (grouped).
 * Neutrale basis-styling; presets kunnen overschrijven in eigen tarieven-CSS.
 */

/* Vervoerstypes: 2-koloms grid, elke kaart intern verticaal gestackt
   (foto top → titel + omschrijving → tarieven onderaan als 3-koloms rij). */
.tt-tv-vehicles {
    padding: clamp(72px, 8vw, 112px) 0;
    background: var(--tt-bg);
}
.tt-tv-vehicles__head {
    max-width: 760px;
    margin: 0 auto 44px;
    text-align: center;
}
.tt-tv-vehicles__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--tt-accent);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.tt-tv-vehicles__eyebrow::before {
    content: "";
    width: 24px;
    height: 2px;
    background: currentColor;
}
.tt-tv-vehicles__head h2 {
    margin: 0 0 14px;
    color: var(--tt-fg);
    font-size: clamp(2rem, 4vw, 3.15rem);
    letter-spacing: -0.045em;
}
.tt-tv-vehicles__head p {
    max-width: 660px;
    margin: 0 auto;
    color: var(--tt-muted);
    font-size: 1.05rem;
    line-height: 1.7;
}
.tt-tv-vehicles__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 1160px;
    margin: 0 auto;
}
.tt-tv-vehicle {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 28px;
    background: var(--tt-surface);
    border: 1px solid var(--tt-line);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 22px 55px -42px rgba(15, 23, 42, 0.48);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tt-tv-vehicle:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--tt-accent) 45%, var(--tt-line));
    box-shadow: 0 30px 65px -42px rgba(15, 23, 42, 0.58);
}
.tt-tv-vehicle:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 14px);
    justify-self: center;
}
.tt-tv-vehicle:last-child:nth-child(odd):only-child {
    width: min(100%, 760px);
}
.tt-tv-vehicle__image {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 8.5;
    overflow: hidden;
    background:
        radial-gradient(circle at 75% 20%, color-mix(in srgb, var(--tt-accent) 18%, transparent), transparent 42%),
        color-mix(in srgb, var(--tt-surface) 76%, var(--tt-line));
    margin: -28px -28px 24px;
    border-radius: 22px 22px 0 0;
}
.tt-tv-vehicle__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tt-tv-vehicle__placeholder {
    display: inline-flex;
    color: var(--tt-accent);
    opacity: 0.8;
}
.tt-tv-vehicle__placeholder svg {
    width: 64px;
    height: 64px;
    stroke-width: 1.35;
}
.tt-tv-vehicle__number {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--tt-accent);
    color: var(--tt-accent-fg);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    box-shadow: 0 8px 20px -10px rgba(var(--tt-accent-rgb), 0.85);
}
.tt-tv-vehicle__body {
    min-width: 0;
    margin-bottom: 24px;
}
.tt-tv-vehicle__title {
    font-size: clamp(1.35rem, 2.4vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    color: var(--tt-fg);
}
.tt-tv-vehicle__desc {
    color: var(--tt-muted);
    line-height: 1.55;
    margin: 0;
    font-size: 0.96rem;
}
.tt-tv-vehicle__rates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    padding-top: 22px;
    border-top: 1px solid var(--tt-line);
    margin-top: auto;
}
.tt-tv-rate {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    min-width: 0;
    padding: 11px 10px;
    background: color-mix(in srgb, var(--tt-bg) 52%, var(--tt-surface));
    border: 1px solid color-mix(in srgb, var(--tt-line) 82%, transparent);
    border-radius: 12px;
    text-align: left;
}
.tt-tv-rate__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    align-self: start;
    border-radius: 50%;
    background: rgba(var(--tt-accent-rgb, 15, 23, 42), 0.08);
    color: var(--tt-accent);
    flex-shrink: 0;
}
.tt-tv-rate__icon svg {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}
.tt-tv-rate__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}
.tt-tv-rate__label {
    font-size: 0.64rem;
    color: var(--tt-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}
.tt-tv-rate__value {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--tt-fg);
    margin-top: 3px;
    line-height: 1.25;
    white-space: nowrap;
}

/* Bestemmingen: visuele routekaart met foto en compacte prijslijst */
.tt-tv-destinations {
    padding: clamp(64px, 8vw, 104px) 0;
    background:
        radial-gradient(circle at 8% 15%, rgba(var(--tt-accent-rgb, 245, 184, 0), 0.09), transparent 30%),
        var(--tt-bg);
}
.tt-tv-destinations__head {
    max-width: 760px;
    margin: 0 auto 32px;
    text-align: center;
}
.tt-tv-destinations__card {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.25fr);
    gap: 0;
    align-items: stretch;
    overflow: hidden;
    background: var(--tt-surface);
    border: 1px solid var(--tt-line);
    border-radius: 22px;
    max-width: 1160px;
    margin: 0 auto;
    box-shadow: 0 24px 60px -38px rgba(15, 23, 42, 0.35);
}
.tt-tv-destinations__card.no-image {
    grid-template-columns: 1fr;
    max-width: 920px;
}
.tt-tv-destinations__image {
    min-height: 100%;
    overflow: hidden;
    background: #f1f5f9;
}
.tt-tv-destinations__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.tt-tv-destinations__card:hover .tt-tv-destinations__image img { transform: scale(1.035); }
.tt-tv-destinations__list {
    list-style: none;
    padding: 30px;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-content: center;
}
.tt-tv-destinations__list.has-many-items {
    grid-template-columns: none;
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}
.tt-tv-dest-item {
    display: block;
    min-width: 0;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--tt-line) 78%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--tt-bg) 70%, var(--tt-surface));
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.tt-tv-dest-item:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--tt-accent) 55%, var(--tt-line));
    background: var(--tt-surface);
}
.tt-tv-dest-item__body { display: flex; flex-direction: column; min-width: 0; }
.tt-tv-dest-item__label {
    font-weight: 600;
    color: var(--tt-fg);
    font-size: 0.98rem;
}
.tt-tv-dest-item__price {
    align-self: flex-start;
    color: var(--tt-fg);
    font-size: 0.78rem;
    font-weight: 750;
    margin-top: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tt-accent) 17%, transparent);
}

/* Regionale zones: duidelijke gebiedskaarten met scanbare prijsregels */
.tt-tv-zones {
    padding: clamp(64px, 8vw, 104px) 0;
    background: var(--tt-surface);
}
.tt-tv-zones .tt-section__header {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.tt-tv-zones__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 18px;
    max-width: 1200px;
    margin: 0 auto;
}
.tt-tv-zone {
    position: relative;
    overflow: hidden;
    padding: 26px;
    background: var(--tt-bg);
    border: 1px solid var(--tt-line);
    border-radius: 18px;
    box-shadow: 0 18px 45px -38px rgba(15, 23, 42, 0.5);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tt-tv-zone::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--tt-accent);
}
.tt-tv-zone:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--tt-accent) 45%, var(--tt-line));
    box-shadow: 0 26px 55px -38px rgba(15, 23, 42, 0.55);
}
.tt-tv-zone__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.tt-tv-zone__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--tt-accent) 13%, transparent);
    color: var(--tt-accent);
    flex-shrink: 0;
}
.tt-tv-zone__heading { min-width: 0; }
.tt-tv-zone__title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--tt-fg);
    margin: 0;
    letter-spacing: -0.01em;
}
.tt-tv-zone__count {
    display: block;
    margin-top: 3px;
    color: var(--tt-muted);
    font-size: 0.72rem;
    font-weight: 650;
}
.tt-tv-zone__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.tt-tv-zone__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--tt-line) 75%, transparent);
    font-size: 0.92rem;
}
.tt-tv-zone__row:last-child { border-bottom: none; }
.tt-tv-zone__label { color: var(--tt-fg); }
.tt-tv-zone__price {
    color: var(--tt-fg);
    font-weight: 750;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .tt-tv-vehicles__grid {
        grid-template-columns: 1fr;
        max-width: 680px;
    }
    .tt-tv-vehicle:last-child:nth-child(odd) { width: 100%; }
}

/* Mobile: alle blokken stacken naar 1-kolom */
@media (max-width: 780px) {
    .tt-tv-vehicles { padding: 64px 0; }
    .tt-tv-vehicles__head {
        margin-bottom: 30px;
        text-align: left;
    }
    .tt-tv-vehicles__head p { font-size: 0.98rem; }
    .tt-tv-vehicle {
        grid-template-columns: 1fr;
        padding: 20px;
        border-radius: 16px;
    }
    .tt-tv-vehicle__image {
        margin: -20px -20px 20px;
        border-radius: 16px 16px 0 0;
    }
    .tt-tv-destinations__card {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 20px;
    }
    .tt-tv-destinations__card.has-image { padding: 0; }
    .tt-tv-destinations__image { min-height: 0; aspect-ratio: 16 / 10; }
    .tt-tv-destinations__card.has-image .tt-tv-destinations__list { padding: 20px; }
    .tt-tv-destinations__list,
    .tt-tv-destinations__list.has-many-items {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
        grid-auto-columns: auto;
    }
    .tt-tv-zones__grid { grid-template-columns: 1fr; }
    .tt-tv-zone { padding: 22px; }
}
@media (max-width: 560px) {
    .tt-tv-vehicle__rates { grid-template-columns: 1fr; }
    .tt-tv-rate { padding: 12px 14px; }
}

/* Extra content */
.tt-extra { background: var(--tt-bg); padding: 40px 0; }
.tt-prose { max-width: 720px; margin: 0 auto; }

/* Contact CTA — geel voor maximale attentie */
.tt-contact-cta { background: var(--tt-accent); color: var(--tt-accent-fg); }
.tt-contact-cta h2 { color: var(--tt-accent-fg); margin-bottom: 8px; }
.tt-contact-cta p { color: rgba(20, 22, 31, 0.72); margin-bottom: 0; }
.tt-contact-cta .tt-cta {
    background: var(--tt-fg) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px -4px rgba(20, 22, 31, 0.35);
}
.tt-contact-cta .tt-cta:hover {
    background: var(--tt-fg) !important;
    box-shadow: 0 6px 20px -4px rgba(20, 22, 31, 0.5);
}
.tt-contact-cta .tt-cta--ghost {
    background: transparent !important;
    color: var(--tt-fg) !important;
    border: 1.5px solid rgba(20, 22, 31, 0.3);
    box-shadow: none;
}
.tt-contact-cta .tt-cta--ghost:hover {
    background: rgba(20, 22, 31, 0.05) !important;
    border-color: var(--tt-fg);
}
.tt-contact-cta__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}
.tt-contact-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Expliciete hero-kleuren volgen de preset; automatisch behoudt de originele hero. */
.tt-home-component.tt-home-component--hero[class*="tt-section-scheme--"] {
    background: var(--tt-bg);
    color: var(--tt-fg);
}
.tt-home-component.tt-home-component--hero[class*="tt-section-scheme--"] > :is(
    .tt-hero, .tt-hero-fs, .tt-onepage-hero, .tt-premium-hero, .tt-simpel-hero
) {
    background: var(--tt-bg);
    color: var(--tt-fg);
}
.tt-home-component.tt-home-component--hero[class*="tt-section-scheme--"] .tt-hero::after {
    display: none;
}
.tt-home-component.tt-home-component--hero[class*="tt-section-scheme--"] .tt-hero-fs__bg {
    background: var(--tt-bg);
}
/* Een bestaande premium-foto blijft zichtbaar onder een tint van de gekozen kleur. */
.tt-home-component.tt-home-component--hero[class*="tt-section-scheme--"] .tt-premium-hero__overlay {
    background: color-mix(in srgb, var(--tt-bg) 92%, transparent);
}
.tt-home-component.tt-home-component--hero[class*="tt-section-scheme--"] :is(
    .tt-hero__title, .tt-hero__form-heading, .tt-hero-fs__title,
    .tt-onepage-hero__title, .tt-premium-hero__title, .tt-simpel-hero__title
) { color: var(--tt-fg); }
.tt-home-component.tt-home-component--hero[class*="tt-section-scheme--"] :is(
    .tt-hero__tagline, .tt-hero-fs__sub, .tt-onepage-hero__sub,
    .tt-premium-hero__sub, .tt-simpel-hero__sub,
    .tt-hero__bullets li, .tt-hero-fs__bullets li, .tt-onepage-hero__bullets,
    .tt-premium-hero__bullets li, .tt-simpel-hero__bullets li
) { color: var(--tt-muted); }
.tt-home-component.tt-home-component--hero[class*="tt-section-scheme--"] .tt-simpel-hero__sub {
    opacity: 1;
}
.tt-home-component.tt-home-component--hero[class*="tt-section-scheme--"] :is(
    .tt-eyebrow, .tt-hero-fs__eyebrow, .tt-onepage-hero__eyebrow,
    .tt-premium-hero__eyebrow, .tt-simpel-hero__eyebrow
) { color: var(--tt-fg); }
.tt-home-component.tt-home-component--hero[class*="tt-section-scheme--"] :is(
    .tt-hero__tags li, .tt-hero-fs__tags li, .tt-onepage-hero__tag,
    .tt-premium-hero__tags li, .tt-simpel-hero__tags li,
    .tt-premium-hero__meta
) {
    background: var(--tt-surface);
    color: var(--tt-fg);
    border-color: var(--tt-line);
}
.tt-home-component.tt-home-component--hero[class*="tt-section-scheme--"] :is(
    .tt-premium-hero__meta a, .tt-premium-hero__meta svg
) {
    color: var(--tt-fg);
}
.tt-home-component.tt-home-component--hero[class*="tt-section-scheme--"] .tt-premium-hero__bullets li::before {
    background: var(--tt-surface);
    color: var(--tt-fg);
    border-color: var(--tt-line);
}
.tt-home-component.tt-home-component--hero[class*="tt-section-scheme--"] :is(
    .tt-premium-hero__cta--primary, .tt-simpel-cta--primary
) {
    background: var(--tt-fg);
    color: var(--tt-bg) !important;
    border-color: var(--tt-fg);
}
.tt-home-component.tt-home-component--hero[class*="tt-section-scheme--"] :is(
    .tt-cta--ghost, .tt-hero-fs__cta--ghost,
    .tt-premium-hero__cta--ghost, .tt-simpel-cta--ghost
) {
    background: transparent;
    color: var(--tt-fg) !important;
    border-color: var(--tt-fg);
}
.tt-home-component.tt-home-component--hero[class*="tt-section-scheme--"] :is(
    .tt-premium-hero__cta--primary, .tt-simpel-cta--primary,
    .tt-cta--ghost, .tt-hero-fs__cta--ghost,
    .tt-premium-hero__cta--ghost, .tt-simpel-cta--ghost
):hover { filter: brightness(0.95); }

/* De vaste Contact CTA op de homepage gebruikt dezelfde achtergrondtokens als
 * de verplaatsbare onderdelen, maar draagt de scheme-klasse zelf. */
.tt-home-component.tt-home-component--contact-cta[class*="tt-section-scheme--"] {
    background: var(--tt-bg) !important;
    color: var(--tt-fg) !important;
}
.tt-home-component.tt-home-component--contact-cta[class*="tt-section-scheme--"] h2 {
    color: var(--tt-fg) !important;
}
.tt-home-component.tt-home-component--contact-cta[class*="tt-section-scheme--"] p {
    color: var(--tt-muted) !important;
}
.tt-home-component.tt-home-component--contact-cta[class*="tt-section-scheme--"] .tt-cta {
    background: var(--tt-fg) !important;
    color: var(--tt-bg) !important;
    border-color: var(--tt-fg) !important;
}
.tt-home-component.tt-home-component--contact-cta[class*="tt-section-scheme--"] .tt-cta--ghost {
    background: transparent !important;
    color: var(--tt-fg) !important;
    border-color: var(--tt-line) !important;
}

/* Handmatig gekozen achtergrond voor subpagina-componenten. De scheme-klasse
 * levert per preset de juiste --tt-* tokens; deze regels laten ook oudere,
 * preset-specifieke componentstijlen die tokens consequent gebruiken. */
.tt-subpage-component[class*="tt-section-scheme--"] {
    background: var(--tt-bg) !important;
    color: var(--tt-fg) !important;
}
.tt-subpage-component[class*="tt-section-scheme--"] :is(
    .tt-page-header__title,
    .tt-section__header h2,
    .tt-tarieven-text__title,
    .tt-tarieven-text__body h2,
    .tt-tarieven-text__body h3,
    .tt-tarieven-text__body h4,
    .tt-services-detail__title,
    .tt-services-detail__block-title,
    .tt-services-detail__text,
    .tt-tarieven-text__body,
    .tt-services-detail__features li,
    .tt-tv-vehicles__head h2,
    .tt-tv-vehicle__title,
    .tt-tv-rate__value,
    .tt-tv-dest-item__label,
    .tt-tv-dest-item__price,
    .tt-tv-zone__title,
    .tt-tv-zone__label,
    .tt-tv-zone__price,
    .tt-over-usp__title,
    .tt-faq__question,
    .tt-legal-content h1,
    .tt-legal-content h2,
    .tt-legal-content h3,
    .tt-legal-content h4,
    .tt-legal-content strong,
    .tt-contact-cta h2
) { color: var(--tt-fg) !important; }
.tt-subpage-component[class*="tt-section-scheme--"] :is(
    .tt-page-header__eyebrow,
    .tt-tv-vehicles__eyebrow,
    .tt-services-detail__price,
    .tt-tarieven-text__body a,
    .tt-legal-content a
) { color: var(--tt-accent) !important; }
.tt-subpage-component[class*="tt-section-scheme--"] :is(
    .tt-page-header__intro,
    .tt-section__header p,
    .tt-tv-vehicles__head p,
    .tt-tv-vehicle__desc,
    .tt-tv-rate__label,
    .tt-tv-zone__count,
    .tt-over-usp__text,
    .tt-faq__answer,
    .tt-legal-content p,
    .tt-legal-content ul,
    .tt-legal-content ol,
    .tt-contact-cta p,
    .tt-breadcrumbs__link,
    .tt-breadcrumbs__sep,
    .tt-breadcrumbs__current
) { color: var(--tt-muted) !important; }
.tt-subpage-component[class*="tt-section-scheme--"] :is(
    .tt-over-usps,
    .tt-faq__item,
    .tt-services-detail__media,
    .tt-tv-vehicle,
    .tt-tv-destinations__card,
    .tt-tv-zone
) {
    background: var(--tt-surface) !important;
    border-color: var(--tt-line) !important;
}
.tt-subpage-component[class*="tt-section-scheme--"] :is(
    .tt-services-detail__row,
    .tt-services-detail__media,
    .tt-tv-vehicle__rates,
    .tt-tv-rate,
    .tt-tv-dest-item,
    .tt-tv-zone__row,
    .tt-over-usp
) { border-color: var(--tt-line) !important; }
.tt-subpage-component[class*="tt-section-scheme--"] :is(
    .tt-tv-rate,
    .tt-tv-dest-item
) { background: color-mix(in srgb, var(--tt-bg) 58%, var(--tt-surface)) !important; }

/* Mobile responsive */
@media (max-width: 900px) {
    .tt-hero { padding: 48px 0 0; }
    .tt-hero--split .tt-hero__inner { grid-template-columns: 1fr; gap: 32px; }
    .tt-hero__text { padding-bottom: 8px; }
    .tt-hero__image-shape--1,
    .tt-hero__image-shape--2 { display: none; }

    /* Full-width CTAs op mobile */
    .tt-hero__actions { flex-direction: column; align-items: stretch; }
    .tt-hero__actions .tt-cta {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Op mobile stackt de split-hero → toon dan de "Boek uw taxi hieronder" kop */
    .tt-hero--split .tt-hero__form-heading {
        display: block;
    }

    /* Booking form full-width op mobile — negatieve margins compenseren de
       container-padding voor edge-to-edge look. */
    .tt-container { padding: 0 24px; }
    .tt-hero__form,
    .tt-hero__form--wide,
    .tt-hero__form--large {
        margin: 0 -24px;
        width: auto;
        max-width: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        background: transparent;
    }
    .tt-hero__form .taxibookingform {
        border-radius: 0 !important;
    }

    .tt-section { padding: 60px 0; }
    .tt-usps__grid { grid-template-columns: 1fr; }
    .tt-waarom__inner,
    .tt-waarom.has-image .tt-waarom__inner { grid-template-columns: 1fr; gap: 32px; }
    .tt-check { grid-template-columns: 1fr; }
    .tt-contact-cta__inner { flex-direction: column; align-items: flex-start; text-align: left; }
    .tt-nav { display: none; }
    .tt-header__inner { gap: 16px; }
}

/* 404 page */
.tt-404 {
    padding: 80px 0 120px;
}
.tt-404__inner {
    text-align: center;
    max-width: 720px;
}
.tt-404__code {
    font-size: clamp(7rem, 22vw, 14rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--tt-accent);
    opacity: 0.9;
    margin: 0 0 8px;
}
.tt-404__title {
    font-size: clamp(1.6rem, 3.6vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    color: var(--tt-fg);
}
.tt-404__lead {
    font-size: 1.05rem;
    color: var(--tt-muted);
    line-height: 1.6;
    margin: 0 auto 32px;
    max-width: 540px;
}
.tt-404__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
}
/* Ghost-CTA styling voor de 404 page (lichte bg) — mag NIET globaal
   zijn want dat overschrijft de dark-hero ghost hierboven. */
.tt-404 .tt-cta--ghost {
    background: transparent;
    color: var(--tt-fg) !important;
    border: 1.5px solid var(--tt-line);
    box-shadow: none;
}
.tt-404 .tt-cta--ghost:hover {
    background: var(--tt-surface);
    border-color: var(--tt-fg);
    box-shadow: 0 4px 14px -4px rgba(20, 22, 31, 0.15);
}
.tt-404__links {
    padding-top: 32px;
    border-top: 1px solid var(--tt-line);
}
.tt-404__links-label {
    display: block;
    font-size: 0.85rem;
    color: var(--tt-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-bottom: 14px;
}
.tt-404__links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 20px;
}
.tt-404__links-list a {
    color: var(--tt-fg);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: border-color 0.15s;
}
.tt-404__links-list a:hover {
    border-color: var(--tt-accent);
}

@media (max-width: 640px) {
    .tt-404 { padding: 48px 0 80px; }
    .tt-404__actions { flex-direction: column; }
    .tt-404__actions .tt-cta { width: 100%; text-align: center; }
}