/* ============================================================
   /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: het inkt-paneel met het zwevende
   lavendel-formulier, de drie voordeelkaarten en de doorlopende
   locatiewand onderaan.

   De klantlogo's houden exact hun oude maat: 111,6px op desktop en
   72px op mobiel (gemeten op de oude pagina vóór de herbouw), en de
   kaarten in de wand blijven 194px breed.
   ============================================================ */

/* ---------- 1. Boek een demo: inkt-paneel + zwevend formulier ---------- */

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

.ct-demo {
    position: relative;
    background: var(--c-dark);
    color: var(--c-on-dark);
    border-radius: var(--r-showcase);
    --focus-ring: var(--c-on-dark);
}

/* `text-align: center` van .ct-hero mag niet doorlekken in het paneel: daar
   staat de tekst links, zoals in het oude ontwerp. */
.ct-demo-tekst {
    padding: clamp(2rem, 5vw, var(--sp-9));
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    text-align: left;
}
.ct-demo-tekst h2 {
    margin: 0;
    font-size: var(--fs-h3);
}
.ct-demo-tekst .lead {
    margin: 0;
    opacity: 0.8;
}
.ct-demo-tekst .btn {
    align-self: start;
}
.ct-demo-quote {
    margin: 0;
    opacity: 0.6;
}

/* De twaalf klantlogo's, op hun oude maat. */
/* De tussenruimte is op mobiel krapper, anders knijpt het raster de logo's
   naar 46px terwijl ze op de oude pagina 61px waren. */
.ct-logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
    align-items: center;
    margin-top: var(--sp-4);
}
@media (min-width: 768px) {
    .ct-logos {
        gap: var(--sp-6);
    }
}
.ct-logos img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 72px;
    margin-inline: auto;
    object-fit: contain;
    opacity: 0.7;
    transition: opacity var(--t-fast) var(--ease);
}
.ct-logos img:hover {
    opacity: 1;
}
@media (min-width: 768px) {
    .ct-logos img {
        max-width: 111.6px;
    }
}

/* Het formulier zweeft vanaf 1024px over de rechterrand van het paneel,
   precies zoals in het oude ontwerp. Daaronder staat het er gewoon onder. */
.ct-form {
    background: var(--c-lavender);
    color: var(--c-ink);
    border-radius: var(--r-showcase);
    box-shadow: var(--shadow-pop);
    padding: clamp(1.75rem, 4vw, var(--sp-8));
    margin: 0 clamp(1rem, 4vw, var(--sp-7)) clamp(1.75rem, 4vw, var(--sp-7));
}
@media (min-width: 1024px) {
    .ct-demo {
        min-height: 34rem;
    }
    .ct-demo-tekst {
        max-width: 60%;
    }
    .ct-form {
        position: absolute;
        top: 50%;
        right: 0;
        width: 45%;
        margin: 0;
        transform: translate(0, -50%);
    }
}
@media (min-width: 1280px) {
    .ct-form {
        transform: translate(4.8rem, -50%);
    }
}

.ct-form form {
    display: grid;
    gap: var(--sp-4);
}
.ct-form-rij {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}
@media (max-width: 560px) {
    .ct-form-rij {
        grid-template-columns: 1fr;
    }
}

/* Eén veldstijl voor input, select en textarea. Wit vlak op lavendel,
   zodat de invoer zelf de rustigste plek van het blok is. */
.ct-veld {
    width: 100%;
    font: inherit;
    font-size: var(--fs-body);
    color: var(--c-ink);
    background: var(--c-surface);
    border: 1px solid transparent;
    border-radius: var(--r-btn);
    padding: 0.85rem 1rem;
    transition: border-color var(--t-fast) var(--ease);
}
.ct-veld::placeholder {
    color: var(--c-ink-soft);
}
.ct-veld:hover {
    border-color: var(--c-line-strong);
}
.ct-veld:focus-visible {
    border-color: var(--c-ink);
}
textarea.ct-veld {
    resize: none;
    min-height: 7rem;
}
select.ct-veld {
    appearance: none;
    cursor: pointer;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1L6 6L11 1' stroke='%2317171D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}
.ct-form .btn {
    justify-self: start;
    margin-top: var(--sp-2);
}
.ct-form .btn[disabled] {
    opacity: 0.6;
    cursor: progress;
}
@media (max-width: 560px) {
    .ct-form .btn {
        justify-self: stretch;
        text-align: center;
    }
}

/* ---------- 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));
}