/* Regent Quotes — builds on Regent Flow's app.css (fonts, colours, buttons, fields, cards).
   qt-… = staff app, qc-… = the client's quote page. */

/* ---------- setup page ---------- */
.install .check-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; }
.install .check-row:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.install .check-row input[type=radio] { width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; flex: none; accent-color: var(--gold); }
.install .check-row strong { color: var(--text); }

/* ---------- staff: shared ---------- */
.qt-user { font-size: 13px; color: rgba(243, 241, 236, .6); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-ref { font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; color: var(--accent-text); }
.qt-inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.qt-inline > input { flex: 1 1 200px; }
.qt-ok { color: var(--ok); }
.qt-soon { color: #e4a54f; }
.qt-expired { color: var(--danger); }
.chip.qt-status { border-radius: 99px; padding: 3px 10px; }
.chip.qt-draft { color: var(--muted); }
.chip.qt-sent { color: var(--info); border-color: rgba(122, 167, 217, .45); }
.chip.qt-approved { color: #101010; background: var(--ok); border-color: var(--ok); }
.chip.qt-archived { color: var(--muted); border-style: dashed; }
.chip.qt-q { color: #101010; background: var(--gold); border-color: var(--gold); margin-left: 8px; }
.qt-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.qt-card-head .eyebrow, .qt-card-head .h3 { margin: 0; }
.qt-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 0; margin-bottom: 20px; background: linear-gradient(transparent, var(--bg) 35%); }
.qt-total { display: flex; align-items: baseline; gap: 12px; justify-content: flex-end; }
.qt-total .label { margin: 0; }
.qt-total-n { font: 300 26px/1 var(--font); color: var(--accent-text); }
.qt-total-row { border-top: 1px solid var(--line); padding-top: 16px; margin: 6px 0 18px; }
.num { text-align: right !important; white-space: nowrap; }
.data-table tfoot td { font-weight: 600; border-bottom: 0; border-top: 1px solid var(--line-strong); }

/* ---------- staff: quotes list ---------- */
.qt-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.qt-sort { width: auto; min-width: 170px; }
.qt-tools + .chip-row { margin-bottom: 18px; }
.qt-count { margin: 4px 0 0; }
.qt-list { display: flex; flex-direction: column; gap: 8px; }
.qt-row { display: grid; grid-template-columns: minmax(170px, 1.1fr) minmax(0, 1.5fr) 110px 100px 150px 80px; gap: 16px; align-items: center;
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color .15s; }
.qt-row:hover { border-color: var(--line-strong); }
.qt-row-who { display: flex; flex-direction: column; min-width: 0; }
.qt-row-who strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-row-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.qt-row-total { font-weight: 600; text-align: right; }
.qt-row-when { display: flex; flex-direction: column; line-height: 1.4; }
.qt-row-actions { display: flex; justify-content: flex-end; }

/* ---------- staff: one quote ---------- */
.qt-head-ref { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.qt-head .h2 { margin-bottom: 4px; }
.qt-head p { margin: 0; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.qt-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.qt-pw { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.qt-pw p { margin: 0; }
.qt-pw-value { display: flex; align-items: center; gap: 6px; }
.qt-pw-value code { font-size: 16px; color: var(--accent-text); }
.qt-pw-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.qt-stats { grid-template-columns: repeat(4, 1fr); }
.qt-stats-2 { grid-template-columns: 1fr 1fr; margin: 18px 0 0; }
.stat-v { font: 300 20px/1.25 var(--font); }
.qt-stats .stat { cursor: default; }
.qt-detail-logo { display: inline-flex; padding: 10px 16px; background: #fff; margin-bottom: 16px; border-radius: var(--radius); }
.qt-detail-logo img { max-height: 60px; max-width: 200px; }
.qt-detail-logo.on-dark { background: #1b1b1b; }
.qt-rich { margin-bottom: 18px; }
.qt-rich p { margin: 0 0 .5em; }
.qt-items { margin-top: 10px; }
.qt-status-btns { display: flex; flex-direction: column; gap: 8px; }
.qt-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 12px; font-size: 14px; }
.qt-dl dt { color: var(--muted); }
.qt-dl dd { margin: 0; text-align: right; }
.qt-visits summary { cursor: pointer; color: var(--accent-text); font-size: 13px; margin-bottom: 6px; }
.qt-visits ul { list-style: none; padding: 0; margin: 0 0 10px; font-size: 13px; }
.qt-visits li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.qt-questions { display: flex; flex-direction: column; gap: 12px; }
.qt-question { border-left: 2px solid var(--gold); padding: 4px 0 4px 12px; }
.qt-question.done { border-color: var(--line-strong); opacity: .7; }
.qt-question p { margin: 4px 0 8px; white-space: pre-wrap; }
.qt-question-top { display: flex; justify-content: space-between; gap: 8px; }
.qt-approved .qt-note { margin-top: 6px; font-style: italic; white-space: pre-wrap; }

/* ---------- staff: edit quote ---------- */
.qt-edit .card .eyebrow { margin-bottom: 14px; }
.qt-toggle { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; cursor: pointer; }
.qt-toggle + .qt-toggle { border-top: 1px solid var(--line); }
.qt-toggle > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.qt-toggle strong { font-weight: 600; }
.qt-toggle .switch { margin-top: 2px; }
.qt-terms input { max-width: 120px; }
.qt-logo-edit { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.qt-logo-preview { display: inline-flex; align-items: center; justify-content: center; width: 200px; height: 90px; padding: 10px; background: #fff; border-radius: var(--radius); }
.qt-logo-preview.on-dark { background: #1b1b1b; }
.qt-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.qt-logo-empty { width: 200px; height: 90px; display: grid; place-items: center; border: 1px dashed var(--line-strong); color: var(--muted); border-radius: var(--radius); }
.qt-logo-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.qt-logo-btns label { cursor: pointer; }
.qt-items-wrap { margin-bottom: 14px; }
.qt-edit-items td { padding: 6px 4px; }
.qt-edit-items input { min-height: 38px; padding: 6px 8px; font-size: 14px; }
.qt-edit-items tr.zero input { color: var(--muted); }
.qt-edit-items tr.zero .qt-line-total { color: var(--muted); }
.qt-move { white-space: nowrap; width: 1%; }
.qt-move .icon-btn { width: 24px; height: 24px; }
.qt-unit { width: 110px; }
.qt-price, .qt-qty { width: 100px; }
.qt-price input, .qt-qty input { text-align: right; }
.qt-line-total { width: 100px; font-weight: 600; }
.qt-row-btns { white-space: nowrap; width: 1%; }
.qt-items-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.qt-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.qt-gallery-item { position: relative; }
.qt-gallery-item .logo-tile { display: grid; place-items: center; width: 100%; height: 100px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.qt-gallery-item .logo-tile:hover { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.qt-gallery-item .logo-tile img { max-width: 100%; max-height: 80px; object-fit: contain; }
.qt-gallery-item .logo-tile.on-dark { background: #1b1b1b; }
.qt-gallery-item .icon-btn { position: absolute; top: 4px; right: 4px; background: var(--surface); }
.qt-library { display: flex; flex-direction: column; gap: 8px; }
.qt-lib-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 110px 100px auto auto; gap: 8px; align-items: center; }
.qt-lib-row input { min-height: 38px; padding: 6px 8px; font-size: 14px; }
.qt-lib-price { text-align: right; }

@media (max-width: 1080px) {
  .qt-detail { grid-template-columns: 1fr; }
  .qt-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'who total actions' 'title status when'; gap: 6px 14px; }
  .qt-row-who { grid-area: who; } .qt-row-title { grid-area: title; } .qt-row-total { grid-area: total; }
  .qt-row-status { grid-area: status; } .qt-row-when { grid-area: when; text-align: right; } .qt-row-actions { grid-area: actions; }
}
@media (max-width: 760px) {
  .qt-stats { grid-template-columns: 1fr 1fr; }
  .qt-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'who total' 'title title' 'status when'; }
  .qt-row-actions { display: none; }
  .qt-lib-row { grid-template-columns: minmax(0, 1fr) 90px 80px auto; }
  .qt-lib-row .qt-move { display: none; }
  .qt-lib-row .btn { grid-column: 3; }
  .qt-edit-items .qt-move { display: none; }
  .qt-savebar { bottom: 64px; }
  .form-grid2 { grid-template-columns: 1fr; }
}

/* ================================================================== client page
   Styled like regentproductions.com: black header with a 20px gold band, black and warm off-white sections,
   Mulish extra-light headings (section titles in capitals), Barlow text, square tracked buttons, gold rules. */
body.qc {
  --site-black: #000; --site-ink: #101010; --site-paper: #f3f1ec; --site-white: #fff; --site-body: #333; --site-band: 20px;
  background: var(--site-black); color: #fff; font: 400 16px/1.65 var(--font-label);
}
.qc .boot { background: var(--site-black); }
.qc-wrap { max-width: 1140px; margin: 0 auto; padding-left: max(16px, var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(16px, var(--gutter), env(safe-area-inset-right, 0px)); }
.qc-wrap.narrow { max-width: 760px; }

/* section tones */
.qc-section { padding-block: clamp(56px, 8vw, 100px); }
.qc-dark { background: var(--site-black); color: #fff; --text: #fff; --muted: #d6d6d6; --line: rgba(255,255,255,.12); --line-strong: rgba(255,255,255,.22); --accent-text: var(--gold); }
.qc-dark + .qc-dark { border-top: 1px solid rgba(255,255,255,.08); }
.qc-paper, .qc-white { color: var(--site-ink); --text: var(--site-ink); --muted: #55524b; --line: rgba(16,16,16,.12); --line-strong: rgba(16,16,16,.28); --accent-text: #8c6f1d; --surface: #fff; --surface-2: #f3f1ec; --input-bg: #fff; color-scheme: light; }
.qc-paper { background: var(--site-paper); }
.qc-white { background: var(--site-white); }
.qc-paper .muted, .qc-white .muted { color: var(--muted); }

/* type */
.qc .eyebrow { font: 600 12px/1.4 var(--font-label); letter-spacing: .24em; text-transform: uppercase; color: var(--accent-text, var(--gold)); margin: 0 0 14px; }
.qc-h2 { font: 200 clamp(28px, 3.6vw, 39px)/1.15 var(--font); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 22px; color: var(--text); text-wrap: balance; }
.qc-h3 { font: 200 23px/1.3 var(--font); letter-spacing: .5px; margin: 0 0 8px; color: var(--text); }
.qc-lede { font: 200 clamp(18px, 2vw, 20px)/1.6 var(--font); color: var(--text); max-width: 760px; margin: 0 0 30px; }
.qc-section p.muted { font: 400 16px/1.65 var(--font-label); color: var(--muted); }
.qc-gold { color: var(--gold); }
.qc-strong { font-weight: 600; }
.qc .btn { border-radius: 0; font: 600 14px/1 var(--font-label); letter-spacing: 2px; text-transform: uppercase; min-height: 52px; padding: 0 28px; }
.qc .btn-gold { background: var(--gold); color: var(--site-ink); }
.qc .btn-gold:hover { background: #e6c968; }
.qc .btn-outline { background: transparent; border: 2px solid currentColor; color: var(--text); }
.qc-paper .btn-outline, .qc-white .btn-outline { border-width: 1px; border-color: var(--site-ink); }
.qc .btn-outline:hover { border-color: var(--gold); color: var(--accent-text); }

/* validity strip + header + band */
.qc-preview { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; background: var(--info); color: var(--site-ink); font: 600 13px var(--font-label); text-align: center; }
.qc-banner { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; background: var(--site-ink); color: var(--gold); border-bottom: 1px solid rgba(217,184,79,.35); font: 600 12px/1.3 var(--font-label); letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.qc-banner.expired { color: #f0a493; }
.qc-banner.ok { background: var(--gold); color: var(--site-ink); }
.qc-bar { background: var(--site-black); border-bottom: var(--site-band) solid var(--gold); }
.qc-bar-in { display: flex; align-items: center; gap: 20px; max-width: 1140px; margin: 0 auto; padding-block: 26px; padding-left: max(16px, var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(16px, var(--gutter), env(safe-area-inset-right, 0px)); }
.qc-brand img { width: clamp(150px, 20vw, 230px); display: block; }
.qc-back { display: inline-flex; align-items: center; gap: 6px; color: #d6d6d6; font: 600 12px var(--font-label); letter-spacing: .18em; text-transform: uppercase; margin-left: auto; }
.qc-back:hover { color: var(--gold); text-decoration: none; }
.qc-client-logo { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; background: #fff; max-width: min(300px, 45%); width: auto; height: auto; }
.qc-client-logo.on-dark { background: var(--site-ink); border: 1px solid rgba(255,255,255,.15); }
.qc-client-logo img { max-height: 64px; max-width: 100%; object-fit: contain; }

/* hero */
.qc-hero { background: var(--site-black) radial-gradient(ellipse at 85% 0%, rgba(217,184,79,.13), transparent 55%); padding-block: clamp(56px, 9vw, 110px) clamp(48px, 7vw, 80px); border-bottom: var(--site-band) solid var(--gold); --text: #fff; --muted: #d6d6d6; }
.qc-hero .eyebrow { color: var(--gold); }
.qc-display { font: 200 clamp(38px, 6vw, 56px)/1.12 var(--font); letter-spacing: 0; margin: 0; color: #fff; text-wrap: balance; }
.qc-display-sm { font-size: clamp(32px, 4.6vw, 48px); margin-bottom: 20px; }
.qc-hero-sm .qc-lede { color: #fff; margin: 0; }
.qc-rule { width: 64px; height: 2px; background: var(--gold); margin: 34px 0 26px; }
.qc-meta { display: flex; flex-wrap: wrap; gap: 16px 44px; margin: 0; }
.qc-meta dt { font: 600 11px var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.qc-meta dd { margin: 0; font: 300 17px/1.4 var(--font); color: #fff; }

/* brief + notes */
.qc-rich { font: 300 18px/1.7 var(--font); max-width: 820px; overflow-wrap: anywhere; color: var(--text); }
.qc-rich p { margin: 0 0 .4em; }
.qc-rich ul, .qc-rich ol { margin: .2em 0 .7em; padding-left: 1.3em; }
.qc-rich li { margin-bottom: .3em; font: 400 16px/1.6 var(--font-label); color: var(--site-body); }
.qc-dark .qc-rich li { color: #d6d6d6; }
.qc-rich li::marker { color: var(--gold); }
.qc-rich strong { font-weight: 600; color: var(--text); }
.qc-jump { display: inline-flex; align-items: center; gap: 8px; margin-top: 36px; font: 600 12px var(--font-label); letter-spacing: .24em; text-transform: uppercase; color: var(--accent-text); }

/* numbered blocks (gold top rule, large thin number) */
.qc-n { display: block; font: 200 40px/1 var(--font); color: var(--gold); margin-bottom: 10px; }
.qc-cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
.qc-cols3 > div { border-top: 2px solid var(--gold); padding-top: 22px; min-width: 0; }
.qc-cols3 p { margin: 0; }

/* services: gold marker, capital titles */
.qc-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 32px; }
.qc-service { min-width: 0; }
.qc-service-img { aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: var(--site-ink); margin-bottom: 22px; }
.qc-service-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.qc-service:hover .qc-service-img img { transform: scale(1.03); }
.qc-service .qc-h3 { font-size: 21px; text-transform: uppercase; }
.qc-service .qc-h3::before { content: ''; display: block; width: 36px; height: 14px; background: var(--gold); margin-bottom: 14px; }
.qc-service p { margin: 0; font-size: 15px; color: #f0f0f0; }

/* the quote */
.qc-table-card { background: #fff; border-top: 2px solid var(--gold); padding: clamp(16px, 3vw, 30px); overflow-x: auto; color: var(--site-ink); }
.qc-table { width: 100%; border-collapse: collapse; font: 400 16px/1.5 var(--font-label); font-variant-numeric: tabular-nums; }
.qc-table th { text-align: left; font: 600 11px var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: #8c6f1d; padding: 0 12px 14px; border-bottom: 1px solid var(--site-ink); }
.qc-table td { padding: 18px 12px; border-bottom: 1px solid rgba(16,16,16,.1); vertical-align: top; color: var(--site-body); }
.qc-table tbody tr:last-child td { border-bottom: 0; }
.qc-table tfoot td { border-top: 2px solid var(--gold); border-bottom: 0; padding-top: 20px; font: 600 12px var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--site-ink); vertical-align: baseline; }
.qc-item { display: block; font: 300 18px/1.35 var(--font); color: var(--site-ink); }
.qc-unit { display: block; font-size: 13px; color: #6b665c; font-weight: 400; letter-spacing: 0; text-transform: none; }
.qc-table tfoot .qc-unit { display: inline; margin-left: 8px; }
.qc-table .qc-strong { color: var(--site-ink); }
.qc-total { font: 200 34px/1 var(--font) !important; letter-spacing: 0 !important; color: var(--site-ink) !important; }
.qc-terms { margin: 20px 0 0; }
.qc-terms p { margin: 0 0 8px; font-size: 15px; }
.qc-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.qc-notes { margin-top: 44px; padding: clamp(20px, 3vw, 30px); background: #fff; border-left: 4px solid var(--gold); }
.qc-notes .qc-rich { font-size: 16px; }

/* Service Agreement teaser: the site's black call-to-action box with a gold edge */
.qc-sa > .qc-wrap { max-width: 1060px; background: var(--site-ink); color: #fff; border-left: 6px solid var(--gold); padding-block: clamp(32px, 5vw, 52px); --text: #fff; --muted: #d6d6d6; --accent-text: var(--gold); }
.qc-sa .qc-lede { color: #fff; }

/* processes */
.qc-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 34px 32px; }
.qc-steps li { border-top: 2px solid var(--gold); padding-top: 20px; min-width: 0; }
.qc-steps .h4 { font: 200 21px/1.3 var(--font); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 8px; color: var(--text); }
.qc-steps p { margin: 0; font-size: 15px; }
.qc-callout { background: var(--site-ink); color: #fff; border-left: 6px solid var(--gold); padding: 24px 28px; margin-bottom: 40px; --text: #fff; --muted: #d6d6d6; }
.qc-callout .h4, .qc-callout .qc-h3 { font: 200 22px/1.3 var(--font); color: #fff; margin: 0 0 6px; }
.qc-callout p { margin: 0; }

/* approve / ask */
.qc-proceed { text-align: center; background: var(--site-black) radial-gradient(ellipse at center, rgba(217,184,79,.14), transparent 65%); border-top: var(--site-band) solid var(--gold); }
.qc-proceed .qc-lede { margin-left: auto; margin-right: auto; color: #d6d6d6; }
.qc-approve { min-height: 58px; padding: 0 38px; }
.qc-ask-btn { display: block; margin: 24px auto 0; color: #d6d6d6; background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; font: 400 16px var(--font-label); }
.qc-ask-btn:hover { color: var(--gold); }
.qc-ask { text-align: left; max-width: 560px; margin: 38px auto 0; padding: 26px; background: var(--site-ink); border-top: 2px solid var(--gold); }
.qc-ask .qc-h3 { color: #fff; }
.qc-ask input, .qc-ask textarea { background: #000; color: #fff; border-color: rgba(255,255,255,.22); border-radius: 0; }
.qc-ask-btns { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.qc-done { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--gold); color: var(--site-ink); margin-bottom: 18px; }
.qc-check { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.qc-check input { width: 18px; height: 18px; min-height: 0; accent-color: var(--gold); flex: none; }

/* selected work: titled rows with a gold underline, like the site's portfolio */
.qc-work-h { display: block; font: 200 25px/1.2 var(--font); text-transform: uppercase; color: var(--text); padding-bottom: 12px; border-bottom: 2px solid var(--gold); margin: 10px 0 22px; }
.qc-work-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 44px; }
.qc-work { color: var(--site-ink); text-decoration: none !important; font: 300 16px/1.4 var(--font); min-width: 0; }
.qc-work-img { aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; background: var(--site-paper); margin-bottom: 12px; }
.qc-work-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.qc-work:hover .qc-work-img img { transform: scale(1.05); }
.qc-work:hover span { color: #8c6f1d; }
.qc-sectors { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px 36px; font: 200 20px var(--font); letter-spacing: .14em; text-transform: uppercase; color: #fff; }

/* footer */
.qc-foot { background: var(--site-black); border-top: var(--site-band) solid var(--gold); color: #d6d6d6; font: 400 14px var(--font-label); }
.qc-foot-in { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 1140px; margin: 0 auto; padding-left: max(16px, var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(16px, var(--gutter), env(safe-area-inset-right, 0px)); }
.qc-foot-in:first-child { padding-block: 36px 16px; }
.qc-foot-in:first-child img { width: 170px; }
.qc-foot-in:last-child { padding-block: 0 40px; }
.qc-foot a { color: var(--gold); }

/* messages, password */
.qc-message { max-width: 480px; margin: 12vh auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); text-align: center; }
.qc-message .h2 { font: 200 32px/1.2 var(--font); text-transform: uppercase; }
.qc-message-logo { width: 200px; margin-bottom: 40px; }
.qc-gate { text-align: left; border-top: var(--site-band) solid var(--gold); background: var(--site-ink); padding-block: 32px; }
.qc-gate .eyebrow { display: flex; align-items: center; gap: 6px; }
.qc-gate input { background: #000; color: #fff; border-radius: 0; }
.qc-gate-logos { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 36px; }
.qc-gate-logos > img { width: 160px; }
.qc-gate-logos .client-logo { display: inline-flex; padding: 8px 14px; background: #fff; width: auto; height: auto; }
.qc-gate-logos .client-logo img { max-height: 44px; max-width: 140px; }

/* Service Agreement page */
.qc-sa-page .qc-wrap { display: grid; gap: 44px; }
.qc-sa-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.qc-sa-card { background: #fff; border-top: 2px solid var(--gold); padding: 30px; min-width: 0; }
.qc-sa-price { font: 200 48px/1 var(--font); color: var(--site-ink); margin: 16px 0 6px; font-variant-numeric: tabular-nums; }
.qc-sa-price span { font: 400 15px var(--font-label); color: #6b665c; }
.qc-ticks { list-style: none; padding: 0; margin: 20px 0 0; }
.qc-ticks li { display: flex; align-items: center; gap: 10px; padding: 5px 0; color: var(--site-body); }
.qc-ticks .icon { color: #8c6f1d; }
.qc-sa-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
.qc-sa-detail { border-top: 2px solid var(--gold); padding-top: 18px; min-width: 0; }
.qc-sa-detail h3 { display: flex; align-items: center; gap: 10px; }
.qc-sa-detail h3 .icon { color: #8c6f1d; flex: none; }
.qc-sa-detail ul { margin: 0; padding-left: 1.2em; }
.qc-sa-detail li { margin-bottom: 4px; }
.qc-sa-cta .btn { margin-top: 20px; }
.qc-table-card .eyebrow { margin-bottom: 4px; color: #8c6f1d; }

.qc-modal .modal-body { color: var(--text); }
.qc .modal { border-radius: 0; border-top: 3px solid var(--gold); }

@media (max-width: 860px) {
  .qc-cols3 { grid-template-columns: 1fr; }
  .qc-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qc-sa-cards, .qc-sa-details { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  :root { --site-band: 12px; }
  body.qc { --site-band: 12px; }
  .qc-service-grid { grid-template-columns: 1fr; }
  .qc-bar-in { padding-block: 18px; }
  .qc-client-logo img { max-height: 44px; }
  .qc-table { font-size: 14px; }
  .qc-table th, .qc-table td { padding-left: 6px; padding-right: 6px; }
  .qc-item { font-size: 16px; }
  .qc-sa > .qc-wrap { border-left-width: 4px; }
}
@media (prefers-reduced-motion: reduce) { .qc-service-img img, .qc-work-img img { transition: none; } }
@media print {
  .qc-banner, .qc-preview, .qc-proceed, .qc-work, .qc-sa { display: none; }
}

/* editor: room for long item descriptions */
.page.narrow.qt-edit-page { max-width: 1000px; }
.qt-edit-items td:nth-child(2) { min-width: 240px; }

/* ================================================================== staff app: regentproductions.com look
   Light warm off-white workspace with white panels (the site's light sections), black header over a gold band,
   Barlow for text, Mulish extra-light for headings, square tracked buttons. */
:root {
  --bg: #f3f1ec; --surface: #ffffff; --surface-2: #f7f5f0; --surface-3: #e7e3d8;
  --line: rgba(16, 16, 16, .1); --line-strong: rgba(16, 16, 16, .24);
  --text: #101010; --muted: #66625a; --accent-text: #8c6f1d; --gold-soft: rgba(217, 184, 79, .2);
  --input-bg: #fff; --radius: 0px; --header-h: 72px;
}
body:not(.qc) { font: 400 16px/1.6 var(--font-label); color: var(--text); background: var(--bg); }
body:not(.qc) .h2, body:not(.qc) .display { font-family: var(--font); font-weight: 200; }
.page-head .h2, .qt-edit-page .page-head .h2 { font-size: clamp(28px, 3.4vw, 39px); text-transform: uppercase; letter-spacing: .01em; }
.qt-head .h2 { text-transform: none; }
body:not(.qc) .h3 { font: 200 23px/1.3 var(--font); letter-spacing: .5px; }
body:not(.qc) .h4, .qt-row-who strong { font-family: var(--font); font-weight: 400; }
body:not(.qc) .eyebrow { color: var(--accent-text); }
body:not(.qc) .btn { font: 600 13px/1 var(--font-label); letter-spacing: 2px; border-radius: 0; }
body:not(.qc) .btn-sm { font-size: 11px; letter-spacing: 1.5px; }
body:not(.qc) .btn-outline { border-color: var(--text); }
body:not(.qc) .btn-gold { color: #101010; }
body:not(.qc) .card { border: 0; border-top: 2px solid var(--gold); box-shadow: 0 1px 0 var(--line); }
body:not(.qc) input, body:not(.qc) select, body:not(.qc) textarea { font-family: var(--font-label); border-radius: 0; }
.app-header { height: var(--header-h); border-bottom: 10px solid var(--gold); background: #000; top: env(safe-area-inset-top, 0px); }
.app-header .brand img { height: 30px; }
.brand-sub { color: var(--gold); }
.top-nav a { color: rgba(255, 255, 255, .75); font: 600 12px var(--font-label); letter-spacing: .2em; }
.top-nav a:hover, .top-nav a.active { color: var(--gold); }
.qt-user { color: rgba(255, 255, 255, .7); font-family: var(--font-label); }
.qt-row { border: 0; border-left: 3px solid transparent; box-shadow: 0 1px 0 var(--line); }
.qt-row:hover { border-left-color: var(--gold); }
.qt-ref { color: var(--accent-text); }
.qt-row-total, .qt-total-n, .stat-v { font-variant-numeric: tabular-nums; }
.qt-total-n { font: 200 30px/1 var(--font); color: var(--text); }
body:not(.qc) .stats { border: 0; background: transparent; gap: 16px; }
body:not(.qc) .stat { border-top: 2px solid var(--gold); background: var(--surface); }
body:not(.qc) .stat::before { display: none; }
.stat-v { font: 200 24px/1.25 var(--font); }
.data-table th { color: var(--accent-text); border-bottom: 1px solid var(--text); font-family: var(--font-label); letter-spacing: .2em; }
.data-table tfoot td { border-top: 2px solid var(--gold); }
.chip.qt-status { border-radius: 0; font-family: var(--font-label); }
.chip.qt-approved { color: #101010; background: var(--gold); border-color: var(--gold); }
.chip.qt-q { border-radius: 0; }
.chip-btn { border-radius: 0; color: var(--text); }
.chip-btn.on { background: #101010; color: var(--gold); border-color: #101010; }
.qt-ok { color: #3c7a48; }
.qt-soon { color: #a8681b; }
.qt-expired { color: #b2402c; }
.notice.ok { background: rgba(217, 184, 79, .16); border-color: var(--gold); }
.qt-savebar { background: linear-gradient(transparent, var(--bg) 35%); }
.switch .track { background: var(--surface-3); }
.switch .track::after { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.seg button.on { background: #101010; color: var(--gold); }
.toast { background: #101010; color: #fff; }
.modal { border-radius: 0; border: 0; border-top: 3px solid var(--gold); }
.rich-wrap, .rich-bar button { border-radius: 0; }
.qt-detail-logo, .qt-logo-preview { box-shadow: inset 0 0 0 1px var(--line); }
.tab-bar { border-top: 3px solid var(--gold); }
/* sign-in and setup: the site's black hero with the gold band */
.login, body.install { background: #000 radial-gradient(ellipse at 85% 0%, rgba(217,184,79,.16), transparent 55%); border-top: 20px solid var(--gold); }
.login .display, body.install .display { font-weight: 200; color: #fff; }
.login .lede { color: #d6d6d6; font-family: var(--font); font-weight: 200; }
.login .eyebrow, body.install .eyebrow { color: var(--gold); }
.login .label, body.install .label { color: #d6d6d6; }
.login .btn, body.install .btn { border-radius: 0; font: 600 14px/1 var(--font-label); letter-spacing: 2px; min-height: 52px; }
.login .field input, .install input { background: #101010; color: #fff; border-radius: 0; border-color: rgba(255,255,255,.25); }
@media (max-width: 760px) { :root { --header-h: 60px; } .app-header { border-bottom-width: 6px; } }
.boot { background: #000; }