/* ============================================================
   /contact — pagina-eigen CSS (prefix `ct-`)

   Herbouw 06-08-2026: dezelfde pagina, dezelfde volgorde, dezelfde
   teksten en dezelfde beelden als de Tailwind-versie, maar op het
   designsysteem. Banden, koppen, .lead, .btn, .card en de kruimel
   komen uit tokens/base/components + ems-gedeeld.

   Hier staat alleen wat uniek is: de drie voordeelkaarten en de
   doorlopende locatiewand onderaan. Het formulierblok zelf is sinds
   17-08-2026 sitebreed en woont in /ds/css/demo-formulier.css.

   De kaarten in de locatiewand blijven 194px breed.
   ============================================================ */

/* ---------- 1. Boek een demo: alleen de koptekst ---------- */

.ct-hero {
    text-align: center;
}
.ct-hero h1 {
    margin-bottom: clamp(2.5rem, 6vw, var(--sp-9));
}

/* Het demo-blok zelf (inkt-paneel, klantlogos, lavendel formulier) staat
   niet meer hier: het is nu het gedeelde blok van de hele site, in
   partials/v2/ds_demo_formulier.hbs + /ds/css/demo-formulier.css (prefix
   `df-`). Die stylesheet laadt het blok zelf in. Reden: hetzelfde
   formulier staat sinds 17-08-2026 ook op /demo en vijf v1-paginas, en
   die laden pages/contact.css niet. */

/* ---------- 2. Drie redenen ---------- */

.ct-redenen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
}
@media (max-width: 900px) {
    .ct-redenen {
        grid-template-columns: 1fr;
    }
}
.ct-reden {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    background: var(--c-surface);
    border-radius: var(--r-card);
    padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-7);
    box-shadow: var(--shadow-card);
}
.ct-reden svg {
    flex-shrink: 0;
}
.ct-reden h3 {
    margin: 0 0 var(--sp-1);
    font-size: var(--fs-kaartkop);
}
.ct-reden p {
    margin: 0;
    font-size: var(--fs-small);
    color: var(--c-ink-soft);
}

/* ---------- 3. Locatiewand ---------- */

/* Doorlopende band met de locatiekaarten. Verving de Owl-carrousel: die
   hing aan jQuery en aan de Tailwind-bundel die deze pagina niet meer
   laadt. Puur CSS, zelfde kaartmaat (194px) en zelfde richting.
   Het spoor staat twee keer in de HTML, daarom -50%. */
.ct-wand {
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    overflow: hidden;
}
.ct-spoor {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-5);
    width: max-content;
    animation: ct-loop 90s linear infinite;
}
.ct-spoor img {
    display: block;
    width: 151px;
    height: auto;
    border-radius: var(--r-tile);
}
@media (min-width: 768px) {
    .ct-spoor img {
        width: 194px;
    }
}
@keyframes ct-loop {
    from {
        transform: none;
    }
    to {
        transform: translateX(-50%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .ct-spoor {
        animation: none;
    }
    .ct-wand {
        overflow-x: auto;
    }
}

.ct-wand-actie {
    display: flex;
    justify-content: center;
    margin-top: clamp(2rem, 5vw, var(--sp-8));
}