/* OPAH quote builder — a focused creative-production workspace. */
.qb-root {
  --qb-bg: var(--bg-base, #09090b);
  --qb-bg-deep: var(--bg-elevated, #050505);
  --qb-surface: var(--bg-surface, #111113);
  --qb-surface-2: var(--color-surface-3, #18181b);
  --qb-border: var(--border-default, #27272a);
  --qb-border-lift: var(--border-strong, #3f3f46);
  --qb-text: var(--text-primary, #fafafa);
  --qb-text-2: var(--text-secondary, #a1a1aa);
  --qb-text-3: var(--text-secondary, #a1a1aa);
  --qb-text-4: var(--text-tertiary, #71717a);
  --qb-accent: var(--accent, #19e332);
  --qb-accent-2: var(--color-green-light, #4ade80);
  --qb-accent-text: var(--accent, #19e332);
  --qb-accent-ink: var(--accent-text, #04210a);
  --qb-accent-soft: var(--accent-muted, rgba(25, 227, 50, .1));
  --qb-danger: var(--destructive, #ef4444);
  --qb-warn: var(--text-warning, #eab308);
  --qb-font: var(--font-body, 'Aileron', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  --qb-font-mono: var(--font-mono, 'Courier New', monospace);
  --qb-ease: cubic-bezier(.16, 1, .3, 1);
  --qb-speed: 180ms;
  width: 100vw; height: 100dvh; display: flex; flex-direction: column;
  background: var(--qb-bg); color: var(--qb-text); font-family: var(--qb-font);
}

.qb-overlay { position: fixed; inset: 0; z-index: 2147483000; display: block; background: var(--qb-bg); }
.qb-overlay[hidden] { display: none; }

/* Header */
.qb-head { height: 78px; min-height: 78px; padding: 0 30px; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "copy progress brand"; align-items: center; border-bottom: 1px solid var(--qb-border); background: var(--qb-bg-deep); }
.qb-brand-copy { grid-area: copy; justify-self: start; }
.qb-brand { grid-area: brand; justify-self: end; padding-right: 90px; }
.qb-brand-lockup { display: flex; align-items: center; gap: 8px; }
.qb-brand-logo { width: 33px; height: 33px; object-fit: contain; flex: 0 0 auto; }
.qb-brand-name { display: block; margin: 0 !important; color: var(--qb-text) !important; font-size: 19.5px !important; font-weight: 900; letter-spacing: .08em; line-height: 1; }
.qb-brand-copy strong { display: block; font-size: 15px; font-weight: 900; letter-spacing: -.03em; line-height: 1.05; }
.qb-brand-copy > span { display: block; margin-top: 3px; color: var(--qb-text-2); font-size: 10px; font-weight: 700; }
.qb-head-progress, .qb-head-actions { display: flex; align-items: center; }
.qb-head-progress { grid-area: progress; gap: 25px; }
.qb-head-actions { position: absolute; right: 30px; justify-content: flex-end; gap: 10px; }
.qb-step-label { color: var(--qb-text-2); font-size: 11px; font-weight: 800; white-space: nowrap; }
.qb-shortcuts { display: none; color: var(--qb-text-4); font: 10px var(--qb-font-mono); }
.qb-close, .qb-theme { width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; padding: 0 !important; border: 1px solid var(--qb-border) !important; border-radius: 8px !important; color: var(--qb-text-2) !important; }
.qb-close { font-size: 18px !important; }
.qb-theme { font-size: 0 !important; }
.qb-theme::before { content: ""; width: 13px; height: 13px; display: block; border: 1.5px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, transparent 50%, currentColor 50%); }

.qb-progress { display: flex; padding: 0; background: none; }
.qb-progress button { position: relative; width: 35px; height: 10px; padding: 0 !important; border: 0; background: transparent; cursor: default; }
.qb-progress button::before { content: ""; position: absolute; top: 3px; left: 0; width: 100%; height: 1px; background: var(--qb-border-lift); }
.qb-progress button::after { content: ""; position: absolute; z-index: 1; top: 0; left: 50%; width: 7px; height: 7px; border: 1px solid var(--qb-border-lift); border-radius: 50%; background: var(--qb-bg-deep); transform: translateX(-50%); }
.qb-progress button.done { cursor: pointer; }
.qb-progress button.done::before, .qb-progress button.done::after, .qb-progress button.active::before { border-color: var(--qb-accent); background: var(--qb-accent); }
.qb-progress button.active::after { border: 2px solid var(--qb-accent); background: var(--qb-bg-deep); box-shadow: 0 0 0 3px var(--qb-accent-soft); }

/* Workspace */
.qb-body { flex: 1; min-height: 0; overflow: auto; }
.qb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; max-width: 1500px; min-height: 100%; margin: 0 auto; padding: 34px 42px 58px; }
.qb-form-wrap { min-width: 0; }
.qb-art { position: relative; isolation: isolate; display: flex; align-items: center; height: 178px; padding: 28px; overflow: hidden; border: 1px solid var(--qb-border); border-radius: 12px; background: var(--qb-bg-deep); }
.qb-art::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--qb-bg-deep) 94%, transparent), color-mix(in srgb, var(--qb-bg-deep) 44%, transparent) 62%, color-mix(in srgb, var(--qb-bg-deep) 84%, transparent)); }
.qb-art img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.08); animation: qb-art-in 420ms var(--qb-ease); }
.qb-art-content { position: relative; max-width: 570px; }
.qb-art-eyebrow { margin: 0 0 7px; color: var(--qb-accent-text); font: 700 10px var(--qb-font-mono); letter-spacing: .1em; }
.qb-art h2 { margin: 0; font-size: clamp(32px, 3vw, 42px); line-height: .98; letter-spacing: -.05em; }
.qb-art-copy { margin: 10px 0 0; color: var(--qb-text); font-size: 14px; line-height: 1.4; }
.qb-art h2:focus { outline: none; }
@keyframes qb-art-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }

#qbForm { padding: 28px 0 0; }
.qb-pane { max-width: 860px; animation: qb-pane-in 420ms var(--qb-ease) both; }
.qb-pane h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.1; letter-spacing: -.045em; }
.qb-pane > p { margin: 0 0 24px; color: var(--qb-text-2); font-size: 14px; line-height: 1.5; }
@keyframes qb-pane-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Choices and fields */
.qb-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.qb-options.two { grid-template-columns: repeat(2, 1fr); }
.qb-options.one { grid-template-columns: 1fr; }
.qb-duration-options { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.qb-duration-options .qb-card { min-height: 88px; padding: 12px; }
.qb-duration-options .qb-card strong { font-size: 13px; line-height: 1.1; word-break: normal; overflow-wrap: normal; }
.qb-duration-options .qb-card small { margin-top: 4px; font-size: 11px; line-height: 1.25; }
.qb-card, .qb-chip, .qb-choice { color: var(--qb-text); font: inherit; text-align: left; cursor: pointer; border: 1px solid var(--qb-border); background: var(--qb-surface); transition: border-color var(--qb-speed), background var(--qb-speed), transform var(--qb-speed), box-shadow var(--qb-speed); }
.qb-card { position: relative; min-height: 104px; padding: 16px; overflow: hidden; border-radius: 12px; }
.qb-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: transparent; }
.qb-card strong, .qb-choice strong { display: block; font-size: 15px; line-height: 1.18; }
.qb-card small, .qb-choice small { display: block; margin-top: 6px; color: var(--qb-text-3); font-size: 12px; line-height: 1.35; }
.qb-card:hover, .qb-choice:hover, .qb-chip:hover { border-color: var(--qb-border-lift); transform: translateY(-1px); }
.qb-card[aria-pressed=true], .qb-choice[aria-pressed=true], .qb-chip[aria-pressed=true] { border-color: var(--qb-accent); background: var(--qb-accent-soft); box-shadow: 0 0 18px rgba(25, 227, 50, .06); }
.qb-card[aria-pressed=true]::before { background: var(--qb-accent); }
.qb-card[aria-pressed=true]::after { content: "✓"; position: absolute; right: 11px; bottom: 10px; color: var(--qb-accent-text); font-weight: 800; }
.qb-card-visual { display: grid; grid-template-rows: 96px 1fr; min-height: 178px; padding: 0; }
.qb-card-image { position: relative; display: block; overflow: hidden; background: center / cover no-repeat; filter: saturate(.65); transition: filter var(--qb-speed), transform 420ms var(--qb-ease); }
.qb-card-image img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.qb-card-image-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--qb-text-3); background: var(--qb-surface-2); font-size: 32px; }
.qb-card-image.qb-image-failed img { display: none; }
.qb-card:hover .qb-card-image { transform: scale(1.03); }
.qb-card[aria-pressed=true] .qb-card-image { filter: saturate(1); }
.qb-card-copy { display: block; padding: 13px 15px; }
.qb-photo { background-image: url('/static/images/quote-builder/step-3.jpg?v=drive-gallery-20260914'); }
.qb-video { background-image: url('/static/images/quote-builder/step-2.jpg?v=drive-gallery-20260914'); }
.qb-both { background-image: url('/static/images/quote-builder/step-4.jpg?v=drive-gallery-20260914'); }
.qb-section { margin: 28px 0 12px; color: var(--qb-text-2); font: 700 11px var(--qb-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.qb-chip-wrap { display: flex; flex-wrap: wrap; gap: 9px; }
.qb-chip { padding: 10px 14px; border-radius: 999px; font-size: 12px; }
.qb-chip[aria-pressed=true]::before { content: "✓ "; color: var(--qb-accent-text); }
.qb-field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.qb-field { display: grid; gap: 5px; }
.qb-field.full { grid-column: 1 / -1; }
.qb-field label { color: var(--qb-text-2); font-size: 11px; font-weight: 700; }
.qb-field input, .qb-field textarea { width: 100%; min-height: 43px; padding: 11px; border: 1px solid var(--qb-border); border-radius: 8px; background: var(--qb-surface); color: var(--qb-text); font: 13px var(--qb-font); }
.qb-field textarea { min-height: 92px; resize: vertical; }
.qb-field input:focus, .qb-field textarea:focus { outline: 2px solid rgba(25, 227, 50, .28); outline-offset: 1px; border-color: var(--qb-accent); }
.qb-phone-disclosure { margin: 2px 0 0; color: var(--qb-text-2); font-size: 12px; line-height: 1.5; }
.qb-phone-disclosure a { color: var(--qb-text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.qb-phone-disclosure a:hover, .qb-phone-disclosure a:focus-visible { color: var(--qb-accent-text); }
.qb-sms-opt-in { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; color: var(--qb-text); font-size: 12px !important; font-weight: 600 !important; line-height: 1.4; cursor: pointer; }
.qb-sms-opt-in input { width: 16px; min-width: 16px; min-height: 16px; margin: 0; padding: 0; accent-color: var(--qb-accent); }

/* Priced rows */
.qb-rows { overflow: hidden; border: 1px solid var(--qb-border); border-radius: 10px; background: var(--qb-surface); }
.qb-row { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px; border-bottom: 1px solid var(--qb-border); }
.qb-row:last-child { border-bottom: 0; }
.qb-row-copy { flex: 1; }.qb-row-copy strong { display: block; font-size: 12px; }.qb-row-copy span { color: var(--qb-text-3); font-size: 10px; }
.qb-delta { color: var(--qb-text-2); font: 11px var(--qb-font-mono); white-space: nowrap; }
.qb-stepper { display: flex; align-items: center; gap: 5px; padding: 3px; border-radius: 8px; background: var(--qb-bg-deep); }
.qb-stepper button { width: 26px; height: 26px; padding: 0 !important; border: 0; border-radius: 5px; background: transparent; color: var(--qb-text); cursor: pointer; font-size: 15px; }
.qb-stepper button:hover { background: var(--qb-surface-2); }.qb-stepper output { min-width: 19px; text-align: center; font: 11px var(--qb-font-mono); }
.qb-toggle { width: 38px; height: 23px; padding: 2px !important; border: 1px solid var(--qb-border); border-radius: 999px; background: var(--qb-bg-deep); cursor: pointer; }
.qb-toggle span { display: block; width: 17px; height: 17px; border-radius: 50%; background: var(--qb-text-3); transition: transform var(--qb-speed), background var(--qb-speed); }
.qb-toggle[aria-pressed=true] { border-color: var(--qb-accent); background: var(--qb-accent); }.qb-toggle[aria-pressed=true] span { background: var(--qb-accent-ink); transform: translateX(15px); }
.qb-note { margin-top: 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--qb-accent) 25%, transparent); border-radius: 8px; background: var(--qb-accent-soft); color: var(--qb-text-2); font-size: 11px; line-height: 1.45; }
.qb-note.warn { border-color: color-mix(in srgb, var(--qb-warn) 30%, transparent); background: color-mix(in srgb, var(--qb-warn) 10%, transparent); }
.qb-error { margin-top: 11px; color: var(--qb-danger); font-size: 12px; }
.qb-error:empty { display: none; }
.qb-error:focus, .qb-price-status h3:focus { outline: 2px solid color-mix(in srgb, var(--qb-danger) 55%, transparent); outline-offset: 4px; }
.qb-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--qb-border); }
.qb-actions .btn { min-height: 40px; font-size: 12px; }.qb-actions .btn:last-child { margin-left: auto; }

/* Estimate rail */
.qb-rail { position: sticky; top: 0; align-self: start; padding: 20px 18px; overflow: hidden; border: 1px solid var(--qb-border); border-left: 2px solid var(--qb-accent); border-radius: 12px; background: var(--qb-surface); }
.qb-rail h3 { margin: 0 0 9px; color: var(--qb-text-2); font: 700 11px var(--qb-font-mono); letter-spacing: .07em; text-transform: uppercase; }
.qb-estimate { font: 700 30px/1 var(--qb-font); letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.qb-fee { margin: 9px 0 18px; color: var(--qb-text-2); font-size: 11px; }
.qb-line { display: flex; justify-content: space-between; gap: 8px; padding: 9px 0; border-top: 1px solid var(--qb-border); color: var(--qb-text-2); font-size: 12px; }
.qb-line span:last-child { color: var(--qb-text); font-family: var(--qb-font-mono); font-variant-numeric: tabular-nums; }
.qb-strength { margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--qb-border); }
.qb-strength-head { display: flex; justify-content: space-between; color: var(--qb-text-2); font: 700 10px var(--qb-font-mono); letter-spacing: .05em; text-transform: uppercase; }
.qb-meter { height: 4px; margin: 7px 0; overflow: hidden; border-radius: 10px; background: var(--qb-bg-deep); }.qb-meter i { display: block; height: 100%; background: var(--qb-accent); transition: width .3s var(--qb-ease); }
.qb-help { color: var(--qb-text-2); font-size: 10px; }.qb-empty { color: var(--qb-text-2); font-size: 12px; line-height: 1.45; }
.qb-price-status .btn { margin-top: 10px; }
.qb-draft-note { margin: 15px 0 0; padding-top: 10px; border-top: 1px solid var(--qb-border); color: var(--qb-text-4); font-size: 10px; line-height: 1.4; }
.qb-mobile-total, .qb-mobile-sheet { display: none; }.qb-result { padding: 25px 0; text-align: center; }.qb-result .qb-estimate { margin: 15px 0; font-size: 34px; }.qb-result h1 { font-size: 31px; }

body.light-mode .qb-root { --qb-bg: var(--bg-base, #fff); --qb-bg-deep: var(--bg-elevated, #fff); --qb-surface: var(--bg-surface, #f4f4f5); --qb-surface-2: var(--color-surface-3, #f8f8f8); --qb-border: var(--border-default, #e4e4e7); --qb-border-lift: var(--border-strong, #d4d4d8); --qb-text: var(--text-primary, #09090b); --qb-text-2: var(--text-secondary, #52525b); --qb-text-3: var(--text-secondary, #52525b); --qb-text-4: var(--text-tertiary, #a1a1aa); --qb-accent-text: #087a1c; }
body.light-mode .qb-art::after { background: linear-gradient(90deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .35) 62%, rgba(255, 255, 255, .75)); }

/* Desktop workspace: current enlarged scale reduced by 25%. Tablet and mobile retain the compact base system. */
@media (min-width: 1200px) {
  .qb-grid { grid-template-columns: minmax(0, 1fr) 405px; gap: 41px; max-width: 1688px; padding: 38px 47px 65px; }
  .qb-art { height: 200px; padding: 32px; border-radius: 14px; }
  .qb-art-content { max-width: 641px; }
  .qb-art-eyebrow { margin-bottom: 8px; font-size: 11px; }
  .qb-art h2 { font-size: clamp(36px, 3.375vw, 47px); }
  .qb-art-copy { margin-top: 11px; font-size: 16px; }
  #qbForm { padding-top: 32px; }
  .qb-pane { max-width: 968px; }
  .qb-pane h1 { margin-bottom: 9px; font-size: 34px; }
  .qb-pane > p { margin-bottom: 27px; font-size: 16px; }
  .qb-options { gap: 14px; }
  .qb-duration-options .qb-card, .qb-card { min-height: 117px; padding: 18px; border-radius: 14px; }
  .qb-duration-options .qb-card { min-height: 90px; padding: 12px; }
  .qb-duration-options .qb-card strong { font-size: 14px; }
  .qb-duration-options .qb-card small { margin-top: 5px; font-size: 11px; }
  .qb-card strong, .qb-choice strong { font-size: 17px; }
  .qb-card small, .qb-choice small { margin-top: 7px; font-size: 14px; }
  .qb-card[aria-pressed=true]::after { right: 13px; bottom: 11px; font-size: 16px; }
  .qb-card-visual { grid-template-rows: 108px 1fr; min-height: 200px; padding: 0; }
  .qb-card-copy { padding: 15px 17px; }
  .qb-section { margin: 32px 0 14px; font-size: 12px; }
  .qb-chip-wrap { gap: 10px; }
  .qb-chip { padding: 11px 16px; font-size: 14px; }
  .qb-rail { padding: 23px 20px; border-left-width: 2px; border-radius: 14px; }
  .qb-rail h3 { margin-bottom: 11px; font-size: 12px; }
  .qb-estimate { font-size: 34px; }
  .qb-fee { margin: 11px 0 20px; font-size: 12px; }
  .qb-line { gap: 9px; padding: 11px 0; font-size: 14px; }
  .qb-strength { margin-top: 16px; padding-top: 13px; }
  .qb-strength-head { font-size: 11px; }
  .qb-meter { height: 5px; margin: 8px 0; }
  .qb-help, .qb-empty { font-size: 11px; }
}

@media (max-width: 1023px) {
  .qb-grid { grid-template-columns: minmax(0, 1fr) 286px; gap: 18px; padding: 22px 18px 42px; }
  .qb-duration-options { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .qb-head { height: 86px; min-height: 86px; padding: 0 14px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy brand"; }.qb-brand { padding-right: 54px; }.qb-brand-logo { width: 28.5px; height: 28.5px; }.qb-brand-name { font-size: 16.5px !important; }.qb-brand-lockup { gap: 6px; }.qb-brand-copy { margin-left: 0; }.qb-brand-copy strong { font-size: 13px; }.qb-brand-copy > span { font-size: 9px; }.qb-head-progress, .qb-shortcuts, .qb-theme { display: none; }.qb-head-actions { position: absolute; right: 14px; }.qb-close { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; }
  .qb-grid { grid-template-columns: 1fr; padding: 14px 14px 125px; }.qb-art { height: 116px; padding: 16px; }.qb-art h2 { font-size: 27px; }.qb-art-copy { font-size: 11px; } #qbForm { padding-top: 17px; }
  .qb-options, .qb-options.two, .qb-duration-options, .qb-field-grid { grid-template-columns: 1fr; }.qb-card-visual { grid-template-columns: 112px 1fr; grid-template-rows: 1fr; min-height: 112px; }.qb-card-copy { align-self: center; }
  .qb-rail { display: none; }.qb-mobile-total { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 72px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--qb-border); background: var(--qb-bg-deep); }.qb-mobile-total strong { display: block; font: 700 18px var(--qb-font-mono); }.qb-mobile-total small { color: var(--qb-text-2); font-size: 10px; }.qb-mobile-total .btn { min-height: 38px; font-size: 11px; }
  .qb-mobile-sheet { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; display: block; max-height: 58vh; padding: 16px 14px 86px; overflow: auto; transform: translateY(105%); border-top: 1px solid var(--qb-border); border-radius: 16px 16px 0 0; background: var(--qb-bg-deep); box-shadow: 0 -16px 45px rgba(0, 0, 0, .22); transition: transform var(--qb-speed) var(--qb-ease); }.qb-mobile-sheet.open { transform: translateY(0); }
  .qb-row { align-items: flex-start; flex-wrap: wrap; min-height: 63px; }.qb-row-copy { min-width: calc(100% - 55px); }.qb-stepper, .qb-toggle { margin-left: auto; }.qb-stepper button { width: 44px; height: 44px; }.qb-toggle { width: 44px; min-width: 44px; height: 32px; }.qb-toggle span { width: 24px; height: 24px; }.qb-toggle[aria-pressed=true] span { transform: translateX(12px); }
  .qb-actions .btn { min-height: 46px; }.qb-chip { min-height: 44px; }.qb-result { padding-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { .qb-root *, .qb-root *::before, .qb-root *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }