/* quote-modal */
.qm-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  box-sizing:border-box;
  overflow:hidden;                 /* the card scrolls, not the backdrop */
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
  font-family:"Pretendard","Pretendard Variable",-apple-system,"SF Pro Text",sans-serif;
  color:#000;
}
.qm-overlay.is-open{opacity:1;visibility:visible;}
.qm-panel{
  position:relative;
  width:min(700px,92vw);
  max-height:86vh;
  overflow-y:auto;
  box-sizing:border-box;
  padding:38px 44px 44px;
  background:#fff;
  box-shadow:0 26px 70px rgba(0,0,0,.22);
  transform:translateY(14px) scale(.985);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
@media(max-width:640px){.qm-panel{padding:26px 22px 32px;max-height:90vh;}}
.qm-overlay.is-open .qm-panel{transform:none;}
.qm-head{display:flex;align-items:baseline;justify-content:space-between;gap:1em;
  border-bottom:1px solid #000;padding-bottom:.7em;margin-bottom:2.2em;}
.qm-title{font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1;margin:0;}
/* NOTE: this site sets html{font-size:10px}, so rem units here rendered at
   60% of their intended size — .95rem was 9.5px on screen. Everything in this
   modal is sized in px for that reason. */
/* the eyebrow is the two real marks. Heights are set per logo rather than
   shared: bkmgLab is 4.4:1 and FBD is 1.6:1, so one common height would leave
   the FBD ring towering over the wordmark. */
.qm-sub{display:flex;align-items:center;gap:.85em;margin:0 0 .35em;}
.qm-sub img{display:block;width:auto;}
.qm-sub .qm-logo-fbd{height:30px;}
/* The wordmark art is flat cream (#EFE9DF), which all but disappears on white.
   Painting it through a mask recolours it exactly rather than hoping a filter
   lands on the right gray. The span needs an explicit width: unlike an <img> it
   has no intrinsic size, and the mark is 4.38:1. */
.qm-sub .qm-logo-bkmg{
  display:block;
  height:20px;
  width:88px;
  background-color:#b3b3b3;
  -webkit-mask:url("/assets/brand/bkmglab-logo.png") no-repeat left center;
  -webkit-mask-size:contain;
  mask:url("/assets/brand/bkmglab-logo.png") no-repeat left center;
  mask-size:contain;
}
.qm-sub .qm-logo-fbd{height:30px;}
.qm-sub .qm-x{font-size:14px;opacity:.35;line-height:1;}
.qm-close{appearance:none;background:none;border:0;font-size:26px;line-height:1;
  cursor:pointer;padding:.1em .2em;color:#000;transition:color .2s ease;}
.qm-close:hover{color:#4DC9E9;}
.qm-field{margin-bottom:1.9em;}
.qm-label{display:block;font-size:15px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:.6em;opacity:.65;}
.qm-label .qm-req{color:#4DC9E9;margin-left:.3em;}
.qm-input,.qm-textarea{
  width:100%;box-sizing:border-box;appearance:none;
  background:none;border:0;border-bottom:1px solid #cfcfcf;border-radius:0;
  padding:.6em 0;font:inherit;font-size:19px;color:#000;
  transition:border-color .2s ease;
}
.qm-textarea{resize:vertical;min-height:5.2em;line-height:1.5;}
/* the model picker: same hairline treatment as the inputs, with our own
   chevron since appearance:none strips the native one */
.qm-selectwrap{position:relative;}
.qm-selectwrap:after{
  content:"";
  position:absolute;
  right:2px;
  top:50%;
  width:9px;height:9px;
  border-right:1.5px solid #000;
  border-bottom:1.5px solid #000;
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}
.qm-select{
  width:100%;box-sizing:border-box;appearance:none;-webkit-appearance:none;
  background:none;border:0;border-bottom:1px solid #cfcfcf;border-radius:0;
  padding:.6em 24px .6em 0;font:inherit;font-size:19px;color:#000;cursor:pointer;
  transition:border-color .2s ease;
}
.qm-select:focus{outline:none;border-bottom-color:#000;}
.qm-input:focus,.qm-textarea:focus{outline:none;border-bottom-color:#000;}
.qm-input::placeholder,.qm-textarea::placeholder{color:#b4b4b4;}
/* every field on its own line — no paired inputs */
.qm-row{display:block;}
.qm-slots{display:none;grid-template-columns:repeat(4,1fr);gap:.55em;margin-top:.9em;}
.qm-slots.is-shown{display:grid;}
.qm-slot{appearance:none;background:none;border:1px solid #000;border-radius:999px;
  padding:.7em .2em;font:inherit;font-size:15px;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease;}
.qm-slot:hover{background:#4DC9E9;border-color:#4DC9E9;color:#fff;}
.qm-slot.is-picked{background:#000;border-color:#000;color:#fff;}
.qm-slot[disabled]{opacity:.28;cursor:not-allowed;}
.qm-slot[disabled]:hover{background:none;border-color:#000;color:#000;}
.qm-note{font-size:14px;opacity:.6;margin:.7em 0 0;}
.qm-actions{display:flex;align-items:center;gap:1.2em;margin-top:2.4em;}
.qm-submit{appearance:none;background:none;border:1px solid #000;border-radius:999px;
  padding:.95em 2.6em;font:inherit;font-size:17px;font-weight:500;cursor:pointer;color:#000;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;}
.qm-submit:hover{background:#4DC9E9;border-color:#4DC9E9;color:#fff;}
.qm-error{font-size:14px;color:#E4322B;min-height:1.2em;}
/* SaleStory's spam trap: bots fill inputs by id, so this carries one and is
   pushed off-canvas rather than display:none, which some bots skip. */
.qm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.qm-done{display:none;padding:3em 0;text-align:center;}
.qm-done.is-shown{display:block;}
.qm-done h3{font-size:26px;font-weight:700;margin:0 0 .6em;}
.qm-done p{font-size:16px;opacity:.7;margin:0;line-height:1.6;}
@media(max-width:640px){
  .qm-slots{grid-template-columns:repeat(3,1fr);}
  .qm-title{font-size:30px;}
}