/* The online quote request on /free-quote (scripts/intake.mjs, /v6/intake.js). Same tokens as pages.css. No canvas, no 3D: pictures we rendered once,
   CSS and a few small transforms, so it opens and answers at once on the slowest computer we build for.
   Step 1 is a row of tall pictures of the pieces we lend on. From step 2 the page splits: the chosen piece large under the lamp on the left
   (the stage), with a pawn tag on a string that fills in as you answer; the questions on the right. With JS off every step shows, one under another. */
.iq{scroll-margin-top:var(--bar)}
.iq-head{max-width:820px}
.iq-head h2{margin-bottom:18px}
.iq-head .sub{margin-bottom:26px}
.iq-trust{list-style:none;margin:0 0 56px;padding:0;display:flex;flex-wrap:wrap;gap:10px 12px}
.iq-trust li{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:8px 16px;border:1px solid rgba(226,194,156,.2);border-radius:999px;font-size:15px;line-height:1.35;color:var(--on-ink-2);background:rgba(255,255,255,.02)}
.iq-trust li::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--cu-lt);box-shadow:0 0 10px rgba(234,205,166,.7)}
.iq-trust li.rv-wrap::before{display:none}
.iq-trust a{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.iq-trust a:hover{color:var(--gold-hi)}
.iq-trust .iq-stars{width:84px}

/* ---------- the body: one column on step 1, the stage beside the questions after ---------- */
.iq-body{position:relative}
.iq-stage{display:none}
.iq-top{display:flex;align-items:center;gap:18px;margin:0 0 26px}
.iq-count{margin:0;flex:none;font:500 12px/1 var(--text);letter-spacing:.24em;text-transform:uppercase;color:var(--cu-lt)}
.iq-bar{flex:1;height:2px;background:rgba(226,194,156,.16);border-radius:2px;overflow:hidden;max-width:420px}
.iq-bar i{display:block;height:100%;width:calc(var(--iq,.25) * 100%);background:linear-gradient(90deg,#C99A6E,#F6DDB0);box-shadow:0 0 12px rgba(246,221,176,.6);transition:width .45s var(--ease)}
.iq:not(.js) .iq-top{display:none}
.iq-resume{margin:-8px 0 22px;color:var(--on-ink-2);font-size:15px}
.iq-resume[hidden]{display:none}
.iq-edit,.iq-reset{background:none;border:0;padding:6px 0;font:500 15px/1 var(--text);color:var(--cu-lt);text-decoration:underline;text-underline-offset:4px;cursor:pointer}

.iq-form{margin:0}
.iq-step{border:0;margin:0 0 56px;padding:0;min-width:0}
.iq.js .iq-step{display:none;margin:0}
.iq.js .iq-step.on{display:block;animation:iqIn .32s var(--ease) both}
@keyframes iqIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.iq-h{font:300 clamp(34px,3.6vw,56px)/1.06 var(--display);letter-spacing:-.03em;margin:0 0 30px;padding:0;color:#fff}
.iq-h:focus{outline:none}
.iq-lbl{font:500 12px/1.3 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--cu-lt);margin:0 0 14px}

/* ---------- step 1: the pieces ---------- */
.iq-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.iq-tile{position:relative;display:block;aspect-ratio:3/4;border-radius:18px;overflow:hidden;cursor:pointer;background:#07080d;border:1px solid rgba(226,194,156,.16);
  transition:border-color .25s,transform .35s var(--ease),box-shadow .35s;isolation:isolate}
.iq-tile input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:3}
.iq-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.4s var(--ease),filter .4s;filter:saturate(.92) brightness(.9)}
.iq-tile::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,8,13,0) 48%,rgba(7,8,13,.88));pointer-events:none}
/* the lamp passing over: a soft band of light crosses the picture on hover */
.iq-tile::after{content:"";position:absolute;inset:-20% -60%;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,236,200,.16) 50%,transparent 60%);transform:translateX(-60%);transition:transform .9s var(--ease)}
.iq-tname{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;font:400 clamp(19px,1.5vw,24px)/1.15 var(--display);letter-spacing:-.01em;color:#fff}
.iq-tile:hover{border-color:rgba(234,205,166,.6);transform:translateY(-3px);box-shadow:0 22px 50px -24px rgba(0,0,0,.9)}
.iq-tile:hover img{transform:scale(1.07);filter:saturate(1) brightness(1)}
.iq-tile:hover::after{transform:translateX(60%)}
.iq-tile:has(input:focus-visible){outline:2px solid var(--cu-lt);outline-offset:3px}
.iq-tile:has(input:checked){border-color:var(--gold-hi);box-shadow:0 0 0 1px var(--gold-hi),0 18px 60px -20px rgba(234,205,166,.55)}
.iq-tile:has(input:checked) img{filter:none}
.iq-more{margin-top:30px}
.iq-pillrow{display:flex;flex-wrap:wrap;gap:10px}
.iq-pill{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 22px 0 16px;border:1px solid rgba(226,194,156,.25);border-radius:999px;cursor:pointer;font:500 16px/1.2 var(--text);color:var(--on-ink);transition:border-color .25s,background .25s}
.iq-pill input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.iq-pill:hover{border-color:var(--cu-lt);background:rgba(226,194,156,.06)}
.iq-pill:has(input:focus-visible){outline:2px solid var(--cu-lt);outline-offset:3px}
.iq-pill:has(input:checked){border-color:var(--gold-hi);background:rgba(234,205,166,.12)}
.iq-ico{width:30px;height:30px;fill:none;stroke:var(--cu-lt);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- step 2: pawn or sell ---------- */
.iq-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.iq-choice{position:relative;display:flex;flex-direction:column;gap:12px;padding:30px 28px;min-height:170px;border:1px solid rgba(226,194,156,.22);border-radius:20px;cursor:pointer;
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,0) 60%);transition:border-color .25s,transform .3s var(--ease),box-shadow .3s}
.iq-choice[hidden]{display:none}
.iq-choice input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.iq-cname{font:300 clamp(28px,2.6vw,40px)/1.05 var(--display);letter-spacing:-.02em;color:#fff}
.iq-csub{color:var(--on-ink-2);font-size:16px;line-height:1.5;max-width:26em}
.iq-choice:hover{border-color:var(--cu-lt);transform:translateY(-2px)}
.iq-choice:has(input:focus-visible){outline:2px solid var(--cu-lt);outline-offset:3px}
.iq-choice:has(input:checked){border-color:var(--gold-hi);box-shadow:0 0 0 1px var(--gold-hi) inset,0 16px 50px -24px rgba(234,205,166,.6)}
.iq-choice.quiet{grid-column:1/-1;min-height:0;padding:18px 28px;flex-direction:row;align-items:center;background:none}
.iq-choice.quiet .iq-cname{font:500 17px/1.2 var(--text);letter-spacing:0;color:var(--on-ink)}
.iq-note{margin:18px 0 0;color:var(--on-ink-2);font-size:16px}

/* ---------- fields: large type on a single gold line ---------- */
.iq-f{margin:0 0 30px;display:flex;flex-direction:column;gap:6px}
.iq-f label{font:500 12px/1.3 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--cu-lt);margin:0}
.iq-f input[type=text],.iq-f input[type=tel],.iq-f input[type=email],.iq-f textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(226,194,156,.32);border-radius:0;padding:12px 0 12px;
  font:300 clamp(22px,1.9vw,28px)/1.3 var(--display);letter-spacing:-.01em;color:#fff;transition:border-color .25s}
.iq-f textarea{font:400 18px/1.5 var(--text);resize:vertical;min-height:58px}
.iq-f input:focus,.iq-f textarea:focus{outline:none;border-bottom-color:var(--gold-hi);box-shadow:0 1px 0 var(--gold-hi)}
.iq-check{flex-direction:row;align-items:flex-start;gap:14px}
.iq-check input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--cu-lt)}
.iq-check label{text-transform:none;letter-spacing:0;font:400 16px/1.5 var(--text);color:var(--on-ink-2)}
.iq-two{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.iq-two>.iq-f:first-child,.iq-two>.iq-by{grid-column:1/-1}
.iq-seg{display:inline-flex;border:1px solid rgba(226,194,156,.3);border-radius:999px;padding:4px;gap:4px;width:max-content}
.iq-seg label{position:relative;display:block;cursor:pointer}
.iq-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.iq-seg span{display:block;padding:12px 22px;border-radius:999px;font:500 16px/1 var(--text);color:var(--on-ink);text-transform:none;letter-spacing:0;transition:background .25s,color .25s}
.iq-seg input:checked+span{background:linear-gradient(180deg,#EACDA6,#C99A6E);color:var(--ink)}
.iq-seg input:focus-visible+span{outline:2px solid var(--cu-lt);outline-offset:2px}

/* ---------- photos: the tray ---------- */
.iq-drop{position:relative;margin:0 0 30px;padding:24px;border:1px dashed rgba(226,194,156,.36);border-radius:20px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(57,62,92,.45),rgba(14,19,37,.2));transition:border-color .25s,background .25s}
.iq-drop:focus{outline:none}
.iq-drop.over{border-color:var(--gold-hi);background:radial-gradient(120% 90% at 50% 0%,rgba(234,205,166,.16),rgba(14,19,37,.2))}
.iq-hint{color:var(--on-ink-2);margin:0 0 18px;max-width:36em}
.iq-files{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.iq-files .iq-f{margin:0}
.iq-file{flex-direction:row}
.iq-file input{position:absolute;width:1px;height:1px;opacity:0}
.iq-file label.btn{font:500 16px/1 var(--text);letter-spacing:0;text-transform:none;color:#fff;cursor:pointer}
.iq-file label.btn.primary{color:var(--ink)}
.iq-file:has(input:focus-visible) label{outline:2px solid var(--cu-lt);outline-offset:3px}
.iq-cam{display:none}
.iq.js.touch .iq-cam{display:flex}
.iq-dropword{color:var(--on-ink-2);font-size:15px}
.iq.touch .iq-dropword,.iq:not(.js) .iq-dropword{display:none}
.iq:not(.js) .iq-file input{position:static;width:auto;height:auto;opacity:1}
.iq:not(.js) .iq-file label.btn{display:none}
.iq-thumbs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.iq-drop.has .iq-thumbs{margin:0 0 20px}
.iq-thumbs li{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:3px solid #f3ead8;box-shadow:0 10px 24px -10px rgba(0,0,0,.8)}
.iq-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.iq-x{position:absolute;top:3px;right:3px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(14,19,37,.85);color:#fff;font:400 20px/1 var(--text);cursor:pointer}
.iq-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.iq-msg{min-height:1.6em;margin:6px 0 0;color:var(--gold-hi);font-size:16px}
.iq-nav{display:flex;gap:14px;align-items:center;margin-top:8px}
.iq-nav .iq-next,.iq-nav .iq-send{margin-left:auto}
.iq-nav [hidden]{display:none}
.iq:not(.js) .iq-nav{justify-content:flex-start}
.iq-nav button.btn{font:500 16px/1 var(--text);cursor:pointer}
.iq-nav button.btn:not(.primary){background:none;color:#fff}
.iq-send{min-width:220px}
.iq-send[disabled]{opacity:.6;cursor:progress}

/* ---------- the stage and the tag (from step 2) ---------- */
.iq-pics{position:absolute;inset:0}
.iq-pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .5s ease,transform 1.6s var(--ease)}
.iq-pics img.on{opacity:1;transform:none}
.iq-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 60% at 50% 30%,rgba(255,232,196,.10),transparent 60%),linear-gradient(180deg,transparent 55%,rgba(7,8,13,.75))}
.iq.noimg .iq-stage{background:radial-gradient(90% 70% at 50% 20%,rgba(57,62,92,.6),#07080d 70%)}
.iq-tagwrap{position:absolute;top:0;right:15%;z-index:2;width:200px;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;will-change:transform}
.iq-string{width:10px;height:clamp(60px,9vh,96px);display:block;overflow:visible}
.iq-string path{stroke:#d9c9a8;stroke-width:1.4;fill:none;vector-effect:non-scaling-stroke}
.iq-tag{position:relative;width:100%;margin-top:-6px;padding:34px 20px 20px;color:#2a2118;border-radius:6px 6px 12px 12px;
  background:linear-gradient(170deg,#f6eedd,#e8dabd 70%,#dccba8);clip-path:polygon(18% 0,82% 0,100% 12%,100% 100%,0 100%,0 12%);
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.55))}
.iq-hole{position:absolute;top:10px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#14171f;box-shadow:0 0 0 3px #c8a46c,0 0 0 4px #8a6a3e}
.iq-tbrand{margin:0 0 12px;font:600 10px/1.2 var(--text);letter-spacing:.22em;text-transform:uppercase;color:#7E512D;text-align:center}
.iq-tlines{list-style:none;margin:0;padding:0;min-height:20px}
.iq-tlines li{font:400 15px/1.35 var(--text);padding:6px 0;border-bottom:1px solid rgba(126,81,45,.22);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iq-tlines li.new{animation:iqWrite .5s var(--ease) both}
@keyframes iqWrite{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.iq-tref{display:none;margin:14px auto 0;width:max-content;padding:6px 12px;border:2px solid #8a3b22;border-radius:6px;color:#8a3b22;font:700 15px/1 var(--text);letter-spacing:.08em;transform:rotate(-7deg)}
.iq.stamped .iq-tref{display:block;animation:iqStamp .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes iqStamp{from{opacity:0;transform:rotate(-7deg) scale(1.9)}to{opacity:1;transform:rotate(-7deg) scale(1)}}

/* ---------- sent ---------- */
.iq-done{padding:8px 0}
.iq-done:focus{outline:none}
.iq-done h3{font:300 clamp(36px,4vw,60px)/1.05 var(--display);letter-spacing:-.03em;margin:0 0 16px}
.iq-done p{color:var(--on-ink-2);margin:0 0 10px}
.iq-ref strong{font:400 26px/1.3 var(--display);color:var(--gold-hi);letter-spacing:.04em}
.iq-steps-next{max-width:520px;margin:30px 0 0;padding:24px 28px;border:1px solid rgba(226,194,156,.22);border-radius:18px}
.iq-steps-next h4{font:500 12px/1 var(--text);letter-spacing:.28em;text-transform:uppercase;color:var(--cu-lt);margin:0 0 16px}
.iq-steps-next ol{margin:0;padding:0;list-style:none;counter-reset:n}
.iq-steps-next li{counter-increment:n;display:flex;gap:14px;align-items:baseline;margin:0 0 12px;color:var(--on-ink-2)}
.iq-steps-next li::before{content:counter(n);flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--cu-lt);color:var(--cu-lt);font:500 13px/24px var(--text);text-align:center}

.iq-other{margin-top:80px;padding-top:36px;border-top:1px solid rgba(226,194,156,.16)}
.iq-other h3{font:500 12px/1 var(--text);letter-spacing:.28em;text-transform:uppercase;color:var(--cu-lt);margin:0 0 20px}
.iq-other ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.iq-other a{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:1px solid rgba(226,194,156,.3);border-radius:999px;text-decoration:none;font-size:16px}
.iq-other a:hover{border-color:var(--cu-lt);background:rgba(226,194,156,.1)}

/* computers: from step 2 the stage stands beside the questions and stays in view */
@media(min-width:960px){
  .iq.staged .iq-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
  .iq.staged .iq-stage{display:block;position:sticky;top:calc(var(--bar) + 24px);height:min(76vh,700px);border-radius:24px;overflow:hidden;background:#07080d;border:1px solid rgba(226,194,156,.14)}
}
/* phones and tablets: the stage is a band above the questions, the tag smaller at its side */
@media(max-width:959px){
  .iq.staged .iq-stage{display:block;position:relative;height:clamp(220px,34vh,320px);margin:0 0 28px;border-radius:18px;overflow:hidden;background:#07080d}
  .iq-tagwrap{right:7%;width:150px}
  .iq-string{height:40px}
  .iq-tag{padding:28px 14px 14px}
  .iq-tlines li{font-size:13px;padding:4px 0}
  .iq-tlines li:nth-child(n+4){display:none}
}
@media(max-width:767px){
  .iq-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .iq-tile{aspect-ratio:4/5}
  .iq-tile:last-child{grid-column:1/-1;aspect-ratio:2/1}
  .iq-tname{left:14px;bottom:12px;font-size:19px}
  .iq-pill{flex:1 1 calc(50% - 10px);min-height:52px}
  .iq-choices{grid-template-columns:1fr}
  .iq-choice{min-height:0;padding:22px}
  .iq-two{grid-template-columns:1fr}
  .iq-thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .iq-files .iq-f{flex:1}
  .iq-files label.btn{width:100%}
  .iq-nav .btn{flex:1}
  .iq-send{min-width:0}
}
@media(prefers-reduced-motion:reduce){.iq *{animation:none!important;transition:none!important}}
html.still .iq *{animation:none!important}
