/* AFGELEID BESTAND - NIET MET DE HAND WIJZIGEN.
   De opmaak van het contactformulier, afgeleid uit madvance-liquid-glass.html door
   dev-test/contactkopie-test.cjs. Wijzig het formulier in het WERKBESTAND en
   draai daarna `node dev-test/contactkopie-test.cjs --zet`. */
/* De tokens lokaal, net als bij de cookiemelding en het betaalvenster: dit
   venster is op allebei de sites hetzelfde donkere blok. */
.cf-modal-overlay {
  --coral: #FF536C; --crimson: #F2135E; --navy: #1A2530; --dark3: #22303D;
  --teal: #9FD6DB; --ink: 255, 255, 255; --shade: 0, 0, 0;
  --ka: 1; --kb: 1; --ks: 1; --kt: 1;
  --sans: 'Barlow', system-ui, sans-serif;
  --serif: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-size: 16px; line-height: normal;
}
.cf-modal .btn-primary {
  display: inline-block; border: none; cursor: pointer; text-align: center;
  padding: 14px 20px; border-radius: 999px; background: var(--coral);
  color: var(--navy); font-family: var(--sans); font-size: 12px;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.cf-modal .btn-primary:hover { background: var(--crimson); }
.cf-modal-overlay{
      position: fixed;
      inset: 0;
      background: rgba(10, 16, 22, 0.75);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 9000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 280ms ease;
    }
.cf-modal-overlay.open{
      opacity: 1;
      pointer-events: all;
    }
.cf-modal{
      background: linear-gradient(160deg, #2F4050 0%, #22303D 100%);
      border: 1px solid rgba(var(--ink), calc(0.08 * var(--ka)));
      border-radius: 20px;
      padding: 48px 40px;
      max-width: 460px;
      width: 100%;
      text-align: center;
      box-shadow: 0 32px 80px rgba(var(--shade), calc(0.5 * var(--ks)));
      transform: translateY(20px) scale(0.97);
      transition: transform 300ms cubic-bezier(.23,1,.32,1);
    }
.cf-modal-overlay.open .cf-modal{
      transform: translateY(0) scale(1);
    }
.cf-modal-icon{
      width: 56px;
      height: 56px;
      background: rgba(159,214,219,0.12);
      border: 1px solid rgba(159,214,219,0.3);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 24px;
    }
.cf-modal-title{
      font-family: var(--serif);
      font-size: 28px;
      font-weight: 600;
      color: rgb(var(--zacht, 240, 239, 240));
      margin: 0 0 12px;
      line-height: 1.2;
    }
.cf-modal-sub{
      font-family: 'Barlow', sans-serif;
      font-size: 15px;
      font-weight: 300;
      color: rgba(var(--zacht, 240, 239, 240), calc(0.65 * var(--kt)));
      line-height: 1.6;
      margin: 0 0 32px;
    }