/* ==========================================================================
   CIZELE — Consultation page + form. Editorial dark aside beside an ivory
   "fine stationery" form card. Mobile-first, scoped .czq. Consumes base tokens.
   ========================================================================== */
.czq{background:var(--bg);color:var(--txt);overflow:clip}
.czq img{display:block;max-width:100%}
.czq [hidden]{display:none!important}
.czq-wrap{display:grid;grid-template-columns:1fr;min-height:100svh}

/* ── editorial aside ── */
.czq-aside{position:relative;display:flex;align-items:flex-end;min-height:52vh;
  padding:clamp(2rem,6vw,4rem) max(var(--gut),6vw) clamp(2.2rem,6vw,4rem);overflow:hidden}
.czq-aside__media{position:absolute;inset:0;z-index:0}
.czq-aside__media img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.czq-aside__scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(16,12,16,.5) 0%,rgba(16,12,16,.35) 30%,rgba(16,12,16,.82) 82%,rgba(16,12,16,.95) 100%),
  radial-gradient(120% 90% at 15% 90%,rgba(46,23,38,.7),transparent 60%)}
.czq-aside__copy{position:relative;z-index:1;max-width:34rem}
.czq-eyebrow--light{color:#fff!important}
.czq-title{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;color:#fff;
  font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.06;margin:.5rem 0 .8rem;text-shadow:0 2px 34px rgba(0,0,0,.35)}
.czq-title em{font-style:italic;color:var(--champ)}
.czq-lede{color:#e5dce4;font-size:clamp(1rem,2.2vw,1.12rem);line-height:1.62;max-width:40ch;margin:0 0 1.8rem}
.czq-steps{list-style:none;margin:0;padding:0;display:grid;gap:1rem;max-width:34rem}
.czq-step{display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;align-items:start}
.czq-step__n{grid-row:1/3;font-family:var(--serif);font-size:1.2rem;color:var(--gold);
  width:2.2rem;height:2.2rem;border:1px solid rgba(201,168,106,.4);border-radius:50%;display:flex;align-items:center;justify-content:center}
.czq-step__t{display:block;font-family:var(--serif);font-size:1.15rem;color:#fff;line-height:1.2}
.czq-step__m{display:block;color:#c9bfca;font-size:.86rem;line-height:1.45;margin-top:.15rem}

/* ── form panel (ivory stationery) ── */
.czq-panel{background:var(--ivory);color:#241a22;
  padding:clamp(2rem,5vw,3.4rem) max(var(--gut),clamp(1.4rem,4vw,3rem)) clamp(2.6rem,6vw,4rem)}
.czq-panel__head{margin-bottom:1.6rem}
.czq-panel__h{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,3.6vw,2.3rem);line-height:1.05;margin:0 0 .3rem;color:#241a22}
.czq-panel__m{color:#6a5d68;font-size:.98rem;margin:0}

/* fields */
.czq-form{display:block}
.czq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.czq-row{margin-bottom:1.1rem}
.czq-row--2{display:grid;grid-template-columns:1fr;gap:1.1rem}
@media(min-width:560px){.czq-row--2{grid-template-columns:1fr 1fr}}
.czq-field{display:flex;flex-direction:column;min-width:0}
.czq-field label{font:600 .72rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#5a4d58;margin-bottom:.5rem}
.czq-req{color:var(--plum)}
.czq-opt{font-weight:500;text-transform:none;letter-spacing:.02em;color:#9a8e98;font-size:.68rem;font-style:italic}
.czq-field input,.czq-field textarea,.czq-select select{
  width:100%;font:400 1rem/1.4 var(--sans);color:#241a22;background:#fff;
  border:1px solid #e2dad0;border-radius:12px;padding:.85rem 1rem;transition:border-color .25s,box-shadow .25s}
.czq-field textarea{resize:vertical;min-height:120px}
.czq-field input::placeholder,.czq-field textarea::placeholder{color:#b3a9b0}
.czq-field input:focus,.czq-field textarea:focus,.czq-select select:focus{
  outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(94,52,80,.12)}
.czq-hint{color:#8a7e88;font-size:.78rem;line-height:1.4;margin:.5rem 0 0}
.czq-select{position:relative}
.czq-select select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;cursor:pointer}
.czq-select::after{content:"";position:absolute;right:1.1rem;top:50%;width:.5rem;height:.5rem;
  border-right:1.5px solid #7a6d78;border-bottom:1.5px solid #7a6d78;transform:translateY(-70%) rotate(45deg);pointer-events:none}

/* dropzone */
.czq-drop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;cursor:pointer;
  padding:1.6rem 1.2rem;border:1.5px dashed #d4c8bc;border-radius:14px;background:#fbf8f3;transition:border-color .25s,background .25s}
.czq-drop:hover,.czq-drop.is-over{border-color:var(--plum);background:#f7f1ea}
.czq-drop.is-over{box-shadow:0 0 0 3px rgba(94,52,80,.1)}
.czq-drop__ic{width:34px;height:34px;color:var(--plum);display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.czq-drop__t{font-family:var(--serif);font-size:1.2rem;color:#241a22}
.czq-drop__m{color:#8a7e88;font-size:.82rem;max-width:34ch}
.czq-previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:.6rem;margin-top:.8rem}
.czq-previews:empty{margin-top:0}
.czq-thumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid #e2dad0;background:#fff}
.czq-thumb img{width:100%;height:100%;object-fit:cover}
.czq-thumb__x{position:absolute;top:4px;right:4px;width:22px;height:22px;border:none;border-radius:50%;
  background:rgba(16,12,16,.72);color:#fff;font-size:.7rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.czq-thumb__x:hover{background:var(--plum)}

/* actions */
.czq-actions{margin-top:1.6rem}
.czq-submit{width:100%;justify-content:center}
.czq-submit[disabled]{opacity:.6;pointer-events:none}
.czq-submit.is-loading .czq-submit__label{opacity:.5}
.czq-reassure{color:#8a7e88;font-size:.8rem;text-align:center;line-height:1.5;margin:.9rem 0 0}

/* result */
.czq-result{margin-top:1.4rem;padding:1.1rem 1.2rem;border-radius:12px;font-size:.95rem;line-height:1.5}
.czq-result.is-ok{background:#eef6ef;border:1px solid #cfe6d3;color:#1f5c34}
.czq-result.is-err{background:#fbeeee;border:1px solid #efc9c9;color:#8a2020}
.czq-result a{color:inherit;font-weight:600;text-decoration:underline}

/* ── desktop split ── */
@media(min-width:900px){
  .czq-wrap{grid-template-columns:1fr 1fr}
  .czq-aside{min-height:100svh;position:sticky;top:0}
  .czq-panel{padding-top:clamp(4.5rem,8vw,7rem)}
}
@media(min-width:1200px){
  .czq-wrap{grid-template-columns:1.05fr .95fr}
}