/* ============================================================
   TWIZT — Contactpagina
   Bouwt voort op de variabelen uit css/twizt.css
   ============================================================ */

/* ---------- HERO ---------- */
.ct-hero{background:var(--yellow);position:relative;overflow:hidden;padding:56px 0 0;}
.ct-hero-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;min-height:280px;}
.ct-hero-text{padding-bottom:52px;}
.ct-hero-title{margin:0 0 18px;font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.05;}
.ct-hero-title .sticker{padding:.14em .5em;}
.ct-spark{color:var(--magenta);font-size:.6em;vertical-align:middle;}
.ct-hero-sub{font-family:'Fredoka',sans-serif;font-weight:600;color:#4a3a1a;font-size:clamp(1rem,1.6vw,1.25rem);margin:0;}
.ct-hero-img{flex:0 0 44%;max-width:44%;align-self:flex-end;line-height:0;}
.ct-hero-img img{width:100%;height:auto;display:block;border-radius:18px 18px 0 0;filter:drop-shadow(0 8px 16px rgba(0,0,0,.18));}

/* ---------- FORMULIER + GEGEVENS ---------- */
.ct-main{background:var(--cream);padding:60px 0 70px;}
.ct-card{background:#fff;border-radius:20px;padding:34px;box-shadow:0 14px 34px rgba(0,0,0,.08);}
.ct-h2{font-family:'Fredoka',sans-serif;font-weight:700;color:var(--magenta);text-transform:uppercase;
    letter-spacing:.5px;font-size:1.4rem;margin:0 0 12px;}
.ct-h2-side{margin-bottom:22px;}
.ct-intro{font-weight:500;color:#6a5a64;line-height:1.6;margin-bottom:26px;}

.ct-field{margin-bottom:16px;}
.ct-field input,.ct-field textarea{width:100%;border:2px solid #eee;border-radius:14px;padding:14px 20px;
    font-family:'Quicksand',sans-serif;font-weight:600;color:var(--ink);background:#fff;transition:.16s;}
.ct-field textarea{border-radius:16px;resize:vertical;min-height:150px;}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:#b9aeb5;font-weight:600;}
.ct-field input:focus,.ct-field textarea:focus{outline:none;border-color:var(--magenta);}
.ct-field input.is-fout,.ct-field textarea.is-fout{border-color:#e05555;background:#fff7f7;}
.ct-fout{display:block;color:#c33;font-weight:700;font-size:.8rem;margin:6px 4px 0;}

.ct-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.ct-ok,.ct-error{border-radius:14px;padding:14px 18px;font-weight:600;margin-bottom:22px;
    display:flex;align-items:center;gap:10px;line-height:1.45;}
.ct-ok{background:#e8f7ef;color:#1c7a4a;}
.ct-error{background:#fdecec;color:#b53434;}

/* ---------- ORGANISATIEBLOKKEN ---------- */
.ct-org{margin-bottom:30px;padding-bottom:26px;border-bottom:2px solid #ebe2d2;}
.ct-org:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0;}
.ct-org h3{font-family:'Fredoka',sans-serif;font-weight:700;color:var(--ink);text-transform:uppercase;
    letter-spacing:.5px;font-size:1rem;margin:0 0 4px;}
.ct-org-sub{font-weight:600;color:#8a7a84;font-size:.9rem;margin:0 0 14px;}
.ct-org-list{list-style:none;padding:0;margin:0;}
.ct-org-list li{display:flex;align-items:flex-start;gap:10px;margin-bottom:9px;font-weight:600;color:#4a3a44;font-size:.95rem;}
.ct-org-list i{color:var(--magenta);font-size:1rem;line-height:1.5;flex:0 0 18px;}
.ct-org-list a{color:var(--magenta);}
.ct-org-list a:hover{color:var(--teal);text-decoration:underline;}

.ct-social-icons{display:flex;gap:10px;margin-top:4px;}
.ct-social-icons a{width:42px;height:42px;border-radius:50%;background:var(--teal);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:1.15rem;transition:.2s;}
.ct-social-icons a:hover{background:var(--magenta);transform:translateY(-3px);color:#fff;}

/* ---------- TRAINING ---------- */
.ct-training{background:var(--magenta);padding:52px 0;color:#fff;}
.ct-training h2{font-family:'Fredoka',sans-serif;font-weight:700;text-transform:uppercase;
    letter-spacing:.5px;font-size:clamp(1.3rem,3vw,1.8rem);margin:0 0 16px;}
.ct-training p{color:rgba(255,255,255,.94);font-weight:500;line-height:1.7;margin-bottom:14px;max-width:720px;}
.ct-training-slot{font-family:'Fredoka',sans-serif;font-weight:600;color:var(--yellow) !important;margin-bottom:0;}
.ct-training-ico{font-size:5rem;color:rgba(255,255,255,.28);}

/* ---------- RESPONSIVE ---------- */
@media(max-width:991px){
    .ct-hero{padding:40px 0 0;}
    .ct-hero-inner{flex-direction:column;align-items:flex-start;}
    .ct-hero-text{padding-bottom:26px;}
    .ct-hero-img{flex:0 0 100%;max-width:100%;align-self:center;}
    .ct-card{padding:26px;}
    .ct-training-ico{display:none;}
}