/* ------------------------------------------------------------------
   ZEVLANO — public Request a Quote wizard.
   Its own stylesheet: the portal's app.css dresses an admin tool, and
   this is the first thing a customer sees of the brand.
   ------------------------------------------------------------------ */

@font-face{font-family:Brockmann;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/brockmann-regular.ttf) format('truetype')}
@font-face{font-family:Brockmann;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/brockmann-medium.ttf) format('truetype')}
@font-face{font-family:Brockmann;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/brockmann-semibold.ttf) format('truetype')}
@font-face{font-family:Brockmann;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/brockmann-bold.ttf) format('truetype')}

:root{
  --ink:#231f20;          /* --zc-ink */
  --ink-2:#57514e;
  --ink-3:#8b837c;
  --stone:#f4f1ec;        /* --zc-stone */
  --paper:#ffffff;
  --line:#e3ded4;
  --line-2:#efeae1;
  --gold:#8c6a3e;         /* --zc-gold */
  --gold-soft:#f2ebdf;
  --black:#060606;        /* --zc-black */
  --err:#a3423c;
  --ok:#3f6b52;
  --sans:Brockmann,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--stone);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
}

/* ---------- chrome ---------- */
.q-top{background:var(--ink);padding:16px 24px;display:flex;align-items:center;gap:16px}
.q-top img{height:22px;filter:invert(1) brightness(2)}
.q-top .q-help{margin-left:auto;color:#c9c2b8;font-size:13.5px}
.q-top .q-help a{color:#e6e0d6}

.q-wrap{max-width:760px;margin:0 auto;padding:40px 24px 96px}

/* ---------- progress ---------- */
.q-progress{display:flex;align-items:center;gap:10px;margin-bottom:30px}
.q-progress .bar{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden}
.q-progress .bar span{position:absolute;inset:0 auto 0 0;background:var(--gold)}
.q-progress .num{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}

/* ---------- typography ---------- */
h1{font-size:clamp(26px,4.4vw,34px);line-height:1.15;letter-spacing:-.015em;font-weight:600;margin:0 0 10px;text-wrap:balance}
.q-lede{font-size:17px;color:var(--ink-2);margin:0 0 28px;max-width:56ch}
h2{font-size:19px;font-weight:600;margin:30px 0 12px}
.q-note{font-size:14.5px;color:var(--ink-3);line-height:1.5}

/* ---------- form ---------- */
label{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);background:var(--paper);
  border-radius:0;font:inherit;color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.q-field{margin-bottom:20px}
.q-hint{font-size:13.5px;color:var(--ink-3);margin-top:6px}
.q-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---------- choices ---------- */
.q-choices{display:grid;gap:12px;margin-bottom:8px}
.q-choices.two{grid-template-columns:1fr 1fr}
.q-choice{
  display:flex;gap:13px;align-items:flex-start;padding:18px;background:var(--paper);
  border:1px solid var(--line);cursor:pointer;
}
.q-choice:hover{border-color:var(--gold)}
.q-choice input{margin:2px 0 0;accent-color:var(--gold);width:18px;height:18px;flex:none}
.q-choice .t{font-weight:600;font-size:16px;display:block}
.q-choice .d{font-size:14px;color:var(--ink-2);margin-top:3px;display:block;line-height:1.45}
.q-choice:has(input:checked){border-color:var(--gold);background:var(--gold-soft)}

/* ---------- design grid ---------- */
.q-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:8px}
.q-card{background:var(--paper);border:1px solid var(--line);cursor:pointer;display:block}
.q-card:hover{border-color:var(--gold)}
.q-card:has(input:checked){border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.q-card .pic{aspect-ratio:3/4;background:var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:12px}
img.pic{width:100%;height:auto;object-fit:cover;display:block}
.q-card .meta{padding:11px 12px;display:flex;gap:9px;align-items:flex-start}
.q-card input{margin:2px 0 0;accent-color:var(--gold);flex:none}
.q-card .n{font-size:13.5px;font-weight:500;line-height:1.3}
.q-card .s{font-size:12px;color:var(--ink-3);margin-top:2px}

/* ---------- tables ---------- */
.q-table{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);margin-bottom:8px}
.q-table th{text-align:left;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding:12px 14px;border-bottom:1px solid var(--line);font-weight:600}
.q-table td{padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.q-table tr:last-child td{border-bottom:0}
.q-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.q-scroll{overflow-x:auto}


/* ---------- estimate lines ----------
   Two columns at any width: what it is on the left, what it costs on the
   right. A table put the amount off the side of a phone screen entirely. */
.q-items{background:var(--paper);border:1px solid var(--line);margin-bottom:16px}
.q-item{display:flex;gap:16px;align-items:baseline;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--line-2)}
.q-item:last-child{border-bottom:0}
.q-item.sub{padding-top:11px;padding-bottom:11px;color:var(--ink-2)}
.q-item-what{flex:1;min-width:0}
.q-item-what strong{display:block;font-size:16px;line-height:1.35}
.q-item-what .q-hint{display:block;margin-top:3px}
.q-item-amt{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:15.5px;text-align:right}
.q-item:not(.sub) .q-item-amt{font-weight:600;font-size:16.5px}
@media(max-width:420px){
  .q-item{padding:13px 14px;gap:12px}
  .q-total{padding:18px 16px}
  .q-total .row{gap:12px;font-size:15px}
  .q-total .row.grand{font-size:19px}
  .q-item-what strong{font-size:15px}
  .q-item-amt{font-size:15px}
}

/* ---------- estimate ---------- */
.q-total{background:var(--paper);border:1px solid var(--line);padding:22px 24px;margin-bottom:18px}
.q-total .row{display:flex;justify-content:space-between;gap:20px;padding:7px 0;font-size:15.5px}
.q-total .row.grand{border-top:1px solid var(--line);margin-top:9px;padding-top:14px;font-size:21px;font-weight:600}
.q-total .row .v{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.q-total .row.sub{color:var(--ink-2)}

/* ---------- buttons ---------- */
.q-actions{display:flex;align-items:center;gap:16px;margin-top:30px}
.q-btn{
  display:inline-block;background:var(--gold);color:#fff;border:0;padding:14px 30px;
  font:inherit;font-weight:600;cursor:pointer;text-decoration:none;
}
.q-btn:hover{background:#785a34}
.q-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.q-back{color:var(--ink-2);font-size:14.5px;text-decoration:none;border-bottom:1px solid var(--line)}
.q-back:hover{color:var(--ink);border-color:var(--ink-3)}

/* ---------- messages ---------- */
.q-err{background:#f8eae9;border-left:2px solid var(--err);color:#7d322e;padding:13px 16px;margin-bottom:22px;font-size:14.5px}
.q-err ul{margin:6px 0 0;padding-left:18px}
.q-callout{background:var(--paper);border-left:2px solid var(--gold);padding:16px 18px;margin:22px 0;font-size:14.5px;color:var(--ink-2)}

/* ---------- done ---------- */
.q-done{text-align:center;padding:30px 0}
.q-ref{
  display:inline-block;font-size:20px;font-weight:600;letter-spacing:.04em;
  background:var(--paper);border:1px solid var(--gold);padding:12px 22px;margin:6px 0 22px;
}
.q-summary{text-align:left;background:var(--paper);border:1px solid var(--line);padding:22px 24px;margin-top:26px}
.q-summary dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.q-summary dd{margin:0 0 14px;font-size:15.5px}
.q-summary dd:last-child{margin-bottom:0}





/* ---------- picture choices (handles) ----------
   A handle is chosen by eye, so the photograph leads and the name and price
   sit underneath it. */
.q-pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:12px}
.q-pic{background:var(--paper);border:1px solid var(--line);cursor:pointer;display:block}
.q-pic:hover{border-color:var(--gold)}
.q-pic:has(input:checked){border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.q-pic-img{display:block;aspect-ratio:1;background:var(--line-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.q-pic-img img{width:100%;height:100%;object-fit:contain;display:block;padding:10px}
.q-pic-none{font-size:11.5px;color:var(--ink-3)}
.q-pic-meta{display:flex;gap:9px;align-items:flex-start;padding:11px 12px}
.q-pic-meta input{margin:2px 0 0;accent-color:var(--gold);flex:none}
.q-pic-meta .n{display:block;font-size:14px;font-weight:500;line-height:1.3}
.q-pic-meta .p{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}
.q-choice-thumb{width:44px;height:44px;object-fit:contain;flex:none;background:var(--line-2);padding:4px}

/* ---------- design search ---------- */
.q-search{margin-bottom:20px}
.q-search-row{display:flex;gap:9px}
.q-search-row input{flex:1}
.q-btn.sm{padding:11px 20px;font-size:15px}
.q-card[hidden],h2[hidden]{display:none}

/* ---------- size lines ----------
   One card per door rather than a table. A table meant horizontal scrolling
   on a phone: the design name slid out of view and the number fields were too
   narrow to read what had been typed into them. */
.q-lines{display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
.q-line{background:var(--paper);border:1px solid var(--line);padding:16px 18px}
.q-line-head{display:flex;gap:13px;align-items:center;margin-bottom:14px}
.q-line-head img{object-fit:cover;border:1px solid var(--line);flex:none}
.q-line-head strong{display:block;font-size:15.5px;line-height:1.3}
.q-line-head .q-hint{margin-top:2px}
.q-line-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.q-line-fields label{font-size:12.5px;color:var(--ink-2);margin-bottom:5px}
.q-line-fields input{width:100%;padding:11px 12px;text-align:center;font-variant-numeric:tabular-nums}

/* ---------- pick lists (replacing native selects) ----------
   A native select's popup is drawn by the operating system and cannot be
   styled, so anything that has to look like the rest of the form is built
   from radios instead. Short lists only — a long one belongs in a select. */
.q-label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}
.q-pick{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:2px}
.q-pick-item{position:relative;display:inline-flex}
.q-pick-item input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.q-pick-item span{
  display:block;padding:11px 17px;background:var(--paper);border:1px solid var(--line);
  font-size:15px;cursor:pointer;transition:border-color .12s,background .12s;
}
.q-pick-item:hover span{border-color:var(--gold)}
.q-pick-item input:checked + span{
  border-color:var(--gold);background:var(--gold);color:#fff;font-weight:500;
}
.q-pick-item input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- progressive reveal ----------
   Fields that only matter once an earlier choice is made. Hidden ONLY when
   the script is running: with no JavaScript everything stays visible and the
   form still works, it just asks for a little more than it needs. */
.js .q-when{display:none}
.js .q-when.on{display:block}

/* ---------- step transitions ----------
   The wizard swaps steps in place rather than reloading. Keep it quiet. */
.q-swapping{opacity:.45;pointer-events:none;transition:opacity .12s}
@media (prefers-reduced-motion:no-preference){
  .q-enter{animation:qfade .22s ease-out}
  @keyframes qfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
.q-btn[aria-busy="true"]{opacity:.6;cursor:progress}

@media(max-width:600px){
  .q-wrap{padding:28px 18px 80px}
  .q-row,.q-choices.two{grid-template-columns:1fr}
  .q-grid{grid-template-columns:repeat(auto-fill,minmax(135px,1fr))}
  .q-pick-item span{padding:11px 14px;font-size:14.5px}
  /* Two per row on a phone, so every field is wide enough to read. */
  .q-line-fields{grid-template-columns:1fr 1fr;gap:11px}
  .q-line{padding:14px}
  .q-pics{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
  .q-search-row{flex-direction:column}
  .q-btn.sm{width:100%}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}