/* Jompom Contact: CTA box, 3D 7 that follows the mouse, playful form panel (design mock in the editor, FillKite live). */
.jp-contact{background:var(--light);padding:0 0 100px}
.jp-contact .cta-box{position:relative;border-radius:40px;padding:80px 60px;background:var(--grad);border:3px solid var(--ink);box-shadow:10px 10px 0 var(--ink);display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:30px;overflow:hidden}
.jp-contact .cta-box.no-form{grid-template-columns:minmax(0,1fr)}
.jp-contact .cta-box h2{color:#fff;font-size:clamp(46px,7vw,100px);-webkit-text-stroke:3px var(--ink);paint-order:stroke;text-shadow:5px 5px 0 var(--ink)}
.jp-contact .ct-text{color:var(--ink);font-size:18px;margin:20px 0 30px;max-width:26em;font-weight:500}
.jp-contact .scene.mini{width:min(220px,60%);margin-top:30px}
.jp-contact .ticket{position:relative;background:#fff;border:3px solid var(--ink);border-radius:28px;padding:28px;box-shadow:8px 8px 0 var(--ink);color:var(--ink)}

/* design mock (editor only) */
.jp-contact .ct-notice{margin:0 0 16px;padding:8px 12px;border:2px dashed var(--ink);border-radius:12px;background:var(--sky);font-weight:600;font-size:14px}
.jp-contact .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.jp-contact .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.jp-contact .field label{font-weight:600;font-size:14px}
.jp-contact .field input,.jp-contact .field textarea{font:500 16px Poppins,sans-serif;color:var(--ink);background:var(--light);border:3px solid var(--ink);border-radius:14px;padding:12px 14px;width:100%;transition:box-shadow .45s var(--spring),transform .45s var(--spring),background .2s}
.jp-contact .field textarea{min-height:120px;resize:vertical}
.jp-contact .field input:focus,.jp-contact .field textarea:focus{outline:none;background:#fff;box-shadow:4px 4px 0 var(--blue);transform:translate(-2px,-2px)}
.jp-contact .ct-mock .btn{width:100%;justify-content:center;margin-top:4px}

/* FillKite form restyled to the design (beats FillKite's own .fk-form:not(#fk) rules) */
.jp-contact .fk-form:not(#fk):not(#jp){--fk-gap:14px;--fk-radius:14px;--fk-accent:var(--blue);--fk-focus:var(--sun);--fk-error:#c4302b;--fk-button-text:var(--ink);--fk-line:var(--ink);--fk-border:var(--ink);--fk-field-bg:var(--light);color:var(--ink);font:500 16px/1.6 Poppins,sans-serif}
.jp-contact .fk-form:not(#fk):not(#jp) .fk-label{font-weight:600;font-size:14px;margin:0 0 6px}
.jp-contact .fk-form:not(#fk):not(#jp) .fk-input{font:500 16px Poppins,sans-serif;color:var(--ink);background:var(--light);border:3px solid var(--ink);border-radius:14px;padding:12px 14px;box-shadow:none;transition:box-shadow .45s var(--spring),transform .45s var(--spring),background .2s}
.jp-contact .fk-form:not(#fk):not(#jp) .fk-input:hover{border-color:var(--ink)}
.jp-contact .fk-form:not(#fk):not(#jp) .fk-input:focus,.jp-contact .fk-form:not(#fk):not(#jp) .fk-input:focus-visible{outline:none;border-color:var(--ink);background:#fff;box-shadow:4px 4px 0 var(--blue);transform:translate(-2px,-2px)}
.jp-contact .fk-form:not(#fk):not(#jp) .fk-input[aria-invalid=true]{border-color:#c4302b}
.jp-contact .fk-form:not(#fk):not(#jp) textarea.fk-input{min-height:120px;resize:vertical}
.jp-contact .fk-form:not(#fk):not(#jp) .fk-choice input[type=checkbox],.jp-contact .fk-form:not(#fk):not(#jp) .fk-choice input[type=radio]{border:2px solid var(--ink)}
.jp-contact .fk-form:not(#fk):not(#jp) .fk-help{color:#3f4a52}
.jp-contact .fk-form:not(#fk):not(#jp) .fk-actions{margin-top:18px}
.jp-contact .fk-form:not(#fk):not(#jp) .fk-submit,.jp-contact .fk-form:not(#fk):not(#jp) .fk-submit:focus{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:0;padding:15px 26px;border-radius:16px;font:600 16px/1 Poppins,sans-serif;letter-spacing:normal;text-transform:none;border:3px solid var(--ink);background:var(--sun);color:var(--ink);box-shadow:var(--hard);filter:none;text-shadow:none;cursor:pointer;transition:transform .45s var(--spring),box-shadow .45s var(--spring),background .2s}
.jp-contact .fk-form:not(#fk):not(#jp) .fk-submit:hover:not(:disabled){transform:translate(-3px,-3px) rotate(-1.5deg);box-shadow:7px 7px 0 var(--ink);background:var(--sun);color:var(--ink);filter:none}
.jp-contact .fk-form:not(#fk):not(#jp) .fk-submit:active:not(:disabled){transform:translate(4px,4px);box-shadow:0 0 0 var(--ink);transition-duration:.08s}
.jp-contact .fk-form:not(#fk):not(#jp) .fk-submit:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.jp-contact .fk-form:not(#fk):not(#jp) .fk-status--success{border:3px solid var(--ink);border-radius:18px;background:var(--sky);box-shadow:4px 4px 0 var(--ink);font-weight:600;text-align:center;padding:20px}

@media (max-width:980px){
  .jp-contact .cta-box{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .jp-contact .cta-box{padding:50px 22px}
  .jp-contact .row{grid-template-columns:minmax(0,1fr)}
  .jp-contact .ticket{padding:20px}
}
@media (prefers-reduced-motion:reduce){
  .jp-contact .fk-form:not(#fk):not(#jp) .fk-input,.jp-contact .fk-form:not(#fk):not(#jp) .fk-submit{transition:none}
}

/* Breathing room above the box: it can follow a dark section (home blog) or the FAQ. */
.jp-contact{padding-top:100px}
@media (max-width:760px){.jp-contact{padding-top:64px}}