/* ECKOmedia staggered enquiry form — shared by /enquire/ (inline) and the site-wide modal.
   Uses the :root tokens every page already defines. */

.ef-root{font-family:var(--font-sans);}
.ef-head h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:22px;letter-spacing:-.01em;color:var(--text-heading);margin:0 0 6px;}
.ef-head .hint{font-size:14px;color:var(--text-muted);margin:0 0 18px;}
.ef-progress{height:4px;background:var(--light-grey);border-radius:999px;overflow:hidden;}
.ef-bar{display:block;height:100%;width:40%;background:var(--orange);border-radius:999px;transition:width .4s ease;}
.ef-on2 .ef-bar{width:75%;}
.ef-done .ef-bar{width:100%;}
.ef-stepline{display:flex;justify-content:flex-end;margin:8px 0 22px;}
.ef-stepnum{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);}

.ef-hp{display:none;}
.ef-field{display:block;margin-bottom:16px;}
.ef-lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-heading);margin-bottom:7px;}
.ef-field input,.ef-field textarea{width:100%;box-sizing:border-box;font-family:var(--font-sans);font-size:15px;color:var(--text-heading);background:var(--off-white);border:1px solid var(--border);border-radius:10px;padding:13px 14px;outline:none;}
.ef-field input:focus,.ef-field textarea:focus{border-color:var(--orange);}
.ef-field textarea{min-height:96px;resize:vertical;}
.ef-assure{font-size:13px;color:var(--text-muted);margin:2px 0 16px;}

.ef-q{margin:0 0 22px;}
.ef-qlbl{display:block;font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--text-heading);margin-bottom:4px;}
.ef-qhint{display:block;font-size:12.5px;color:var(--text-muted);margin-bottom:10px;}
.ef-grp{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#bb3800;margin:12px 0 8px;}
.ef-grp:first-of-type{margin-top:2px;}
.ef-chips{display:flex;flex-wrap:wrap;gap:8px;}
.ef-chip{position:relative;cursor:pointer;}
.ef-chip input{position:absolute;opacity:0;pointer-events:none;}
.ef-chip span{display:inline-block;font-size:13.5px;font-weight:600;color:var(--text-heading);background:var(--off-white);border:1px solid var(--border);border-radius:999px;padding:9px 15px;transition:all .15s ease;}
.ef-chip:hover span{border-color:var(--silver);}
.ef-chip input:checked + span{background:var(--orange);border-color:var(--orange);color:var(--white);}
.ef-chip input:focus-visible + span{outline:2px solid var(--orange);outline-offset:2px;}

.ef-actions{margin-top:20px;}
.ef-actions .btn{width:100%;}
.ef-back{display:inline-block;margin-top:14px;font-size:13px;font-weight:600;color:var(--text-muted);text-decoration:none;cursor:pointer;background:none;border:none;padding:0;font-family:var(--font-sans);}
.ef-back:hover{color:var(--orange);}
.ef-alt{font-size:13px;color:var(--text-muted);text-align:center;margin:18px 0 0;}
.ef-alt a{color:var(--orange);text-decoration:none;font-weight:600;}

/* Step visibility — ONLY when JS has initialised (.ef-js). Without JS both steps
   show stacked and the native submit posts to Netlify, so nothing is ever lost. */
.ef-next{display:none;}
.ef-js .ef-next{display:inline-flex;}
.ef-js .ef-step2{display:none;}
.ef-js.ef-on2 .ef-step2{display:block;}
.ef-js.ef-on2 .ef-step1{display:none;}
.ef-js .ef-step2 .ef-actions{margin-top:6px;}
.ef-js:not(.ef-on2) .ef-submit{display:none;}

.ef-success{display:none;text-align:center;padding:26px 0;}
.ef-done .ef-form{display:none;}
.ef-done .ef-success{display:block;}
.ef-success h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:22px;color:var(--text-heading);margin:0 0 10px;}
.ef-success p{font-size:15px;color:var(--text-body);margin:0;}
.ef-success a{color:var(--orange);text-decoration:none;font-weight:600;}

/* Modal shell */
.ef-modal{display:none;position:fixed;inset:0;z-index:300;background:rgba(20,18,18,.9);align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto;}
.ef-modal.open{display:flex;}
.ef-modal .ef-box{position:relative;width:100%;max-width:560px;background:var(--white);border-radius:16px;padding:38px 36px;margin:4vh auto;}
.ef-modal .ef-close{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text-heading);font-size:18px;cursor:pointer;}
.ef-modal .ef-close:hover{border-color:var(--silver);}
@media (max-width:560px){
  .ef-modal{padding:12px;}
  .ef-modal .ef-box{padding:28px 20px;margin:8px auto;}
}