/* Morning Star quote form (msq). Brand: Outfit, charcoal #242020, Morning Star blue #059ef9. */
.msq, .msq-done {
  --c-ink: #242020; --c-panel: #2d2828; --c-field: #1d1919; --c-line: #463f3f; --c-line-2: #5a5252;
  --c-text: #fff; --c-mute: #b8afab; --c-blue: #059ef9; --c-blue-ink: #04121c; --c-blue-wash: rgba(5,158,249,.14);
  --c-err: #ff8a7a; --r-s: 4px; --r-m: 8px;
  font-family: Outfit, system-ui, sans-serif; color: var(--c-text); background: var(--c-panel);
  border: 1px solid var(--c-line); border-radius: var(--r-m); padding: 28px; max-width: 620px;
  box-shadow: 0 24px 48px -24px rgba(0,0,0,.6); box-sizing: border-box;
}
.msq *, .msq-done * { box-sizing: border-box; }
.msq-head { margin-bottom: 20px; }
.msq-title { font-size: 28px; line-height: 1.15; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.msq-sub { margin: 6px 0 0; color: var(--c-mute); font-size: 16px; line-height: 1.45; }

/* Tape-measure progress */
.msq-tape { margin: 0 0 26px; }
.msq-tape-track {
  position: relative; height: 18px; border-radius: 3px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, var(--c-line-2) 0 1px, transparent 1px 10px) bottom / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, var(--c-mute) 0 1px, transparent 1px 50px) bottom / 100% 11px no-repeat,
    var(--c-field);
  border: 1px solid var(--c-line);
}
.msq-tape-fill {
  position: absolute; inset: 0 auto 0 0; width: 33.34%;
  background:
    repeating-linear-gradient(90deg, rgba(4,18,28,.35) 0 1px, transparent 1px 10px) bottom / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(4,18,28,.6) 0 1px, transparent 1px 50px) bottom / 100% 11px no-repeat,
    var(--c-blue);
  transition: width .45s cubic-bezier(.3,.7,.2,1);
}
.msq-tape-marks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); font-size: 14px; color: var(--c-mute); }
.msq-tape-marks li { text-align: left; }
.msq-tape-marks li:nth-child(2) { text-align: center; }
.msq-tape-marks li:nth-child(3) { text-align: right; }
.msq-tape-marks li.is-on { color: var(--c-text); }
.msq-tape-marks li.is-now { color: var(--c-blue); font-weight: 600; }

/* Steps */
.msq-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.msq-step.is-in { animation: msq-in .3s ease-out; }
@keyframes msq-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.msq-q { font-size: 21px; font-weight: 600; padding: 0; margin: 0 0 4px; line-height: 1.25; }
.msq-step[data-step="2"] .msq-q, .msq-step[data-step="3"] .msq-q { margin-bottom: 18px; }
.msq-hint { margin: 0 0 16px; color: var(--c-mute); font-size: 15px; }

/* Project tiles */
.msq-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.msq-tile { position: relative; cursor: pointer; display: block; }
.msq-tile input, .msq-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.msq-tile-in {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px;
  min-height: 104px; height: 100%; padding: 14px; border: 1px solid var(--c-line); border-radius: var(--r-m);
  background: var(--c-field); font-size: 15px; line-height: 1.25; font-weight: 500;
  transition: border-color .15s, background-color .15s, transform .15s;
}
.msq-tile-in svg { width: 34px; height: 34px; fill: none; stroke: var(--c-mute); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s; }
.msq-tile:hover .msq-tile-in { border-color: var(--c-line-2); }
.msq-tile input:checked + .msq-tile-in { border-color: var(--c-blue); background: var(--c-blue-wash); }
.msq-tile input:checked + .msq-tile-in svg { stroke: var(--c-blue); }
.msq-tile input:checked + .msq-tile-in::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-7' fill='none' stroke='%2304121c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.msq-tile input:focus-visible + .msq-tile-in, .msq-chip input:focus-visible + span { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.msq-tile input:disabled + .msq-tile-in { opacity: .45; cursor: not-allowed; }

/* Chips */
.msq-group { margin: 0 0 20px; }
.msq-label { display: block; font-size: 16px; font-weight: 500; margin: 0 0 10px; }
.msq-opt { color: var(--c-mute); font-weight: 400; font-size: 14px; margin-left: 4px; }
.msq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.msq-chip { position: relative; cursor: pointer; }
.msq-chip span {
  display: inline-block; padding: 9px 15px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-field);
  font-size: 15px; transition: border-color .15s, background-color .15s, color .15s;
}
.msq-chip:hover span { border-color: var(--c-line-2); }
.msq-chip input:checked + span { background: var(--c-blue); border-color: var(--c-blue); color: var(--c-blue-ink); font-weight: 600; }
.msq-note { margin: 10px 0 0; font-size: 14px; color: var(--c-mute); }

/* Fields */
.msq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 14px; margin-bottom: 20px; }
.msq-wide { grid-column: 1 / -1; }
.msq-field label { display: block; font-size: 15px; font-weight: 500; margin: 0 0 6px; }
.msq input:not([type=checkbox]):not([type=radio]), .msq textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--c-text); background: var(--c-field);
  border: 1px solid var(--c-line); border-radius: var(--r-s); padding: 12px 13px; transition: border-color .15s, box-shadow .15s;
}
.msq textarea { resize: vertical; min-height: 110px; line-height: 1.45; }
.msq input::placeholder, .msq textarea::placeholder { color: #8a817e; }
.msq input:focus, .msq textarea:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(5,158,249,.25); }
.msq [aria-invalid=true] { border-color: var(--c-err) !important; }
.msq-count { margin: 6px 0 0; text-align: right; font-size: 13px; color: var(--c-mute); }
.msq-err { margin: 6px 0 0; min-height: 0; font-size: 14px; color: var(--c-err); }
.msq-err:empty { display: none; }
.msq-err-form { margin-top: 12px; }
.msq-fine { font-size: 13px; line-height: 1.45; color: var(--c-mute); margin: 4px 0 0; }
.msq-turnstile:not(:empty) { margin: 0 0 14px; }

/* Honeypot: off-screen, not display:none (some bots skip hidden inputs) */
.msq-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Navigation */
.msq-nav { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--c-line); }
.msq-back { margin-right: auto; }
.msq-nav button {
  font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; border-radius: var(--r-s); padding: 13px 24px;
  border: 1px solid var(--c-blue); background: var(--c-blue); color: var(--c-blue-ink); transition: filter .15s, transform .1s;
}
.msq-nav button:hover { filter: brightness(1.08); }
.msq-nav button:active { transform: translateY(1px); }
.msq-nav button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.msq-nav .msq-back { background: transparent; color: var(--c-text); border-color: var(--c-line-2); font-weight: 500; }
.msq-send[aria-busy=true] { pointer-events: none; opacity: .75; }
.msq-send[aria-busy=true] .msq-send-label::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; vertical-align: -1px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: msq-spin .7s linear infinite; }
@keyframes msq-spin { to { transform: rotate(360deg); } }
.msq-alt { margin: 14px 0 0; font-size: 14px; color: var(--c-mute); text-align: right; }
.msq-alt a, .msq-done a { color: var(--c-blue); text-decoration: none; font-weight: 500; }
.msq-alt a:hover { text-decoration: underline; }
.msq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Done */
.msq-done { text-align: left; outline: none; }
.msq-done-mark { width: 64px; height: 64px; fill: none; stroke: var(--c-blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.msq-done-check { stroke-dasharray: 30; stroke-dashoffset: 30; animation: msq-draw .5s .15s ease-out forwards; }
@keyframes msq-draw { to { stroke-dashoffset: 0; } }

@media (max-width: 560px) {
  .msq, .msq-done { padding: 20px 16px; }
  .msq-title { font-size: 24px; }
  .msq-tiles { grid-template-columns: repeat(2, 1fr); }
  .msq-tile-in { min-height: 88px; }
  .msq-grid { grid-template-columns: 1fr; }
  .msq-nav button { flex: 1; padding: 13px 16px; }
  .msq-back { flex: 0 0 auto !important; }
  .msq-alt { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .msq *, .msq-done * { animation: none !important; transition: none !important; }
  .msq-done-check { stroke-dashoffset: 0; }
}
