/* Quote page only (loaded by /quote/). Uses the tokens from main.css. */
.quote-section { background: var(--paper); }
.quote-layout { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 980px) { .quote-layout { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 52px; } }

.quote-card {
  background: var(--paper-raised);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  border-radius: var(--radius);
  padding: clamp(20px, 4.5vw, 40px);
}
.quote-card h2.q-title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(30px, 4.4vw, 42px); line-height: 0.98; letter-spacing: 0.01em; text-wrap: balance;
}
.q-intro { margin-top: 10px; color: var(--ink-faint); font-size: 16.5px; max-width: 52ch; }

.q-field { margin-top: 22px; }
.q-field > label, .q-label {
  display: block; margin-bottom: 8px;
  font-weight: 700; font-size: 14px; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase;
}
.q-row { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; }
@media (min-width: 560px) { .q-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }

.quote-form input[type="text"], .quote-form input[type="tel"], .quote-form textarea {
  display: block; width: 100%; min-height: 54px; padding: 12px 14px;
  font: 400 17px/1.4 var(--font-body); color: var(--ink);
  background: #fff; border: 2px solid var(--ink); border-radius: var(--radius);
  -webkit-appearance: none; appearance: none;
}
.quote-form textarea { min-height: 132px; resize: vertical; }
.quote-form input::placeholder, .quote-form textarea::placeholder { color: #8a837a; }
.quote-form input:focus-visible, .quote-form textarea:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 0; box-shadow: 3px 3px 0 var(--ink); border-radius: var(--radius);
}
.quote-form [aria-invalid="true"] { border-color: #b3261e; }
.q-err { margin-top: 6px; color: #b3261e; font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.q-err[hidden] { display: none; }
.q-hint { margin-top: 8px; color: var(--ink-faint); font-size: 14.5px; line-height: 1.45; }

/* photo picker */
.q-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.q-field > label.q-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  margin-bottom: 0; padding: 26px 16px; cursor: pointer;
  font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.3;
  background: #fff7dc; border: 2px dashed var(--ink); border-radius: var(--radius);
  transition: background-color 0.12s ease;
}
.q-drop:hover, .q-drop.is-over { background: #ffefb3; }
.q-file-input:focus-visible ~ .q-drop { outline: 3px solid var(--gold-dark); outline-offset: 3px; }
.q-drop svg { width: 38px; height: 38px; margin-bottom: 4px; }
.q-drop-title { font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; }
.q-drop-sub { color: var(--ink-soft); font-size: 15.5px; }
.q-field.has-error .q-drop { border-color: #b3261e; }

.q-thumbs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; }
.q-thumbs:empty { display: none; }
.q-thumb { position: relative; aspect-ratio: 1 / 1; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--line-soft); overflow: visible; }
.q-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 1px; }
.q-thumb .q-ph { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; color: var(--ink-faint); text-transform: uppercase; }
.q-thumb.is-loading::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 8px, rgba(0,0,0,.09) 8px 16px); }
.q-remove {
  position: absolute; top: -10px; right: -10px; z-index: 2; width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--ink); color: var(--on-dark); border: 2px solid var(--paper-raised); border-radius: 50%;
}
.q-remove:hover { background: #b3261e; }
.q-remove svg { width: 14px; height: 14px; }

.q-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.quote-form .q-submit { margin-top: 28px; }
.quote-form .q-submit[disabled] { opacity: 0.65; cursor: progress; transform: none; box-shadow: 4px 4px 0 var(--ink); }
.q-status { margin-top: 14px; font-size: 15.5px; font-weight: 600; min-height: 1.4em; }
.q-fine { margin-top: 12px; color: var(--ink-faint); font-size: 14px; line-height: 1.5; }
.q-fine a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-dark); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.q-alert { margin-top: 18px; padding: 14px 16px; background: #fdecea; border: 2px solid #b3261e; border-radius: var(--radius-sm); font-size: 15.5px; line-height: 1.45; }
.q-alert[hidden] { display: none; }
.q-alert strong { display: block; font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 2px; }
.q-alert a { color: var(--ink); font-weight: 700; }

.q-success[hidden] { display: none; }
.q-success { padding-block: 6px; }
.q-success:focus { outline: none; }
.q-success .q-check { width: 64px; height: 64px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); display: grid; place-items: center; }
.q-success .q-check svg { width: 32px; height: 32px; }
.q-success h2 { margin-top: 20px; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(40px, 7vw, 68px); line-height: 0.92; letter-spacing: 0.01em; }
.q-success p { margin-top: 14px; font-size: 18px; max-width: 44ch; }
.q-success .q-success-call { margin-top: 20px; color: var(--ink-faint); font-size: 16px; }
.q-success a { color: var(--ink); font-weight: 700; }

.q-aside { display: grid; gap: 20px; }
.q-panel { background: var(--ink); color: var(--on-dark); border-radius: var(--radius); padding: 26px 24px; }
.q-panel h2 { color: var(--on-dark); font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 30px; line-height: 1; letter-spacing: 0.02em; }
.q-panel ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.q-panel li { position: relative; padding-left: 28px; color: var(--on-dark-soft); font-size: 16px; line-height: 1.45; }
.q-panel li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 14px; height: 8px; border-left: 3px solid var(--gold); border-bottom: 3px solid var(--gold); transform: rotate(-45deg); }
.q-call { border: 2px solid var(--ink); border-radius: var(--radius); background: var(--paper-raised); padding: 22px 24px; }
.q-call p { color: var(--ink-faint); font-size: 16px; }
.q-call a.q-call-num { display: inline-block; margin-top: 4px; font-family: var(--font-display); font-weight: 900; font-size: 34px; letter-spacing: 0.03em; color: var(--ink); text-decoration: none; }
.q-call a.q-call-num:hover { text-decoration: underline; text-decoration-color: var(--gold-dark); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.q-noscript { margin-top: 18px; padding: 14px 16px; border: 2px solid var(--ink); background: #fff7dc; }

/* ---- v2 intake: sections, selects, segmented choices ---- */
.quote-form [hidden] { display: none !important; }
.quote-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; color: var(--ink); }
.quote-form fieldset.q-field { margin-top: 22px; }
.q-sec { margin-top: 34px !important; }
.q-intro + .q-sec { margin-top: 26px !important; }
.q-sec-title {
  display: block; width: 100%; padding: 0 0 8px; margin: 0;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-display); font-weight: 900; font-size: 26px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase;
}
.q-sec > .q-field:first-of-type, .q-sec > .q-row:first-of-type .q-field { margin-top: 18px; }
.q-row--even { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .q-row--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.quote-form input[type="email"], .quote-form input[type="date"], .quote-form select {
  display: block; width: 100%; min-height: 54px; padding: 12px 14px;
  font: 400 17px/1.4 var(--font-body); color: var(--ink);
  background: #fff; border: 2px solid var(--ink); border-radius: var(--radius);
  -webkit-appearance: none; appearance: none;
}
.quote-form select {
  padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.quote-form input[type="email"]:focus-visible, .quote-form input[type="date"]:focus-visible, .quote-form select:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 0; box-shadow: 3px 3px 0 var(--ink); border-radius: var(--radius);
}
.quote-form input[type="date"] { min-width: 0; }

.q-group > legend.q-label { padding: 0; }
.q-seg { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.q-seg--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.q-seg label { position: relative; display: block; margin: 0; }
.q-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.q-seg span {
  display: grid; place-items: center; min-height: 52px; padding: 10px 12px; text-align: center;
  font-weight: 700; font-size: 16px; line-height: 1.2;
  background: #fff; border: 2px solid var(--ink); border-radius: var(--radius);
  transition: background-color 0.1s ease, box-shadow 0.1s ease;
}
.q-seg label:hover span { background: #fff7dc; }
.q-seg input:checked + span { background: var(--gold); box-shadow: 3px 3px 0 var(--ink); }
.q-seg input:focus-visible + span { outline: 3px solid var(--gold-dark); outline-offset: 3px; }
.q-field.has-error input[type="date"] { border-color: #b3261e; }
.q-hint a { color: var(--ink); font-weight: 700; }