:root {
  --ink: #132b32;
  --muted: #60737a;
  --line: #dce6e8;
  --soft: #f3f8f8;
  --brand: #087f8c;
  --brand-dark: #076570;
  --brand-soft: #e4f5f5;
  --accent: #f2a900;
  --danger: #c53d43;
  --white: #fff;
  --shadow: 0 20px 55px rgba(19, 43, 50, .09);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: #edf4f4; font: 15px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button { color: inherit; }
.site-header { height: 72px; padding: 0 max(24px, calc((100vw - 1240px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--white); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: var(--brand); border-radius: 13px 13px 13px 4px; font-size: 20px; font-weight: 800; }
.brand b, .brand small { display: block; }.brand b { font-size: 18px; }.brand small { color: var(--muted); font-size: 12px; }
.header-meta { display: flex; align-items: center; gap: 18px; }.header-meta a { color: var(--ink); font-weight: 700; text-decoration: none; }
.header-meta .admin-link { padding: 9px 13px; color: #1558c0; background: #e7f1ff; border: 1px solid #c5dcfb; border-radius: 11px; font-size: 13px; }
.demo-badge { padding: 6px 10px; color: #785300; background: #fff4ce; border: 1px solid #f2dda0; border-radius: 999px; font-size: 12px; font-weight: 700; }
.progress-wrap { padding: 22px 24px 18px; background: var(--white); border-bottom: 1px solid var(--line); }
.progress { max-width: 760px; margin: auto; padding: 0; list-style: none; display: flex; justify-content: space-between; position: relative; }
.progress:before { content: ""; position: absolute; z-index: 0; top: 15px; left: 8%; right: 8%; height: 2px; background: var(--line); }
.progress li { z-index: 1; min-width: 76px; display: grid; justify-items: center; gap: 6px; color: #8a9a9f; font-size: 12px; }
.progress span { width: 32px; height: 32px; display: grid; place-items: center; background: var(--white); border: 2px solid var(--line); border-radius: 50%; font-size: 12px; font-weight: 800; }
.progress li.active, .progress li.complete { color: var(--brand); }.progress li.active span, .progress li.complete span { color: #fff; background: var(--brand); border-color: var(--brand); }.progress li.complete span { font-size: 0; }.progress li.complete span:after { content: "✓"; font-size: 13px; }
.layout { width: min(1240px, calc(100% - 40px)); margin: 34px auto 70px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.wizard, .summary { background: var(--white); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.wizard { min-height: 650px; overflow: hidden; }.step { display: none; padding: 38px 42px 34px; }.step.active { display: block; animation: rise .25s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.eyebrow { margin-bottom: 8px; color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; letter-spacing: -.035em; } h2 { line-height: 1.2; }
.lead { max-width: 710px; margin: 12px 0 26px; color: var(--muted); font-size: 16px; }
.address-row, .form-grid { display: flex; gap: 14px; margin-bottom: 24px; }.field { display: grid; gap: 7px; }.field.grow { flex: 1; }.field span { font-size: 13px; font-weight: 700; }
input, select { width: 100%; min-height: 46px; padding: 10px 12px; color: var(--ink); background: #fff; border: 1px solid #bdcbcf; border-radius: 10px; outline: 0; } input:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(8,127,140,.12); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.service-card { min-height: 150px; padding: 18px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 15px; transition: .18s ease; cursor: pointer; }.service-card:hover { transform: translateY(-2px); border-color: #97bdc2; box-shadow: 0 10px 24px rgba(19,43,50,.08); }.service-card.selected { border: 2px solid var(--brand); background: var(--brand-soft); padding: 17px; }.service-card.consultation { background: #fffaf0; }
.service-icon { width: 40px; height: 40px; margin-bottom: 13px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 11px; font-size: 16px; font-weight: 800; }.service-card b { font-size: 15px; }.service-card small { margin: 4px 0 10px; color: var(--muted); }.service-card em { margin-top: auto; color: var(--brand-dark); font-style: normal; font-size: 13px; font-weight: 800; }
.step-actions { margin-top: 30px; padding-top: 24px; display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }.step-actions.end { justify-content: flex-end; }
.btn { min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: 10px; font-weight: 750; cursor: pointer; transition: .15s ease; }.btn:hover:not(:disabled) { transform: translateY(-1px); }.btn:disabled { opacity: .42; cursor: not-allowed; }.btn.primary { color: #fff; background: var(--brand); }.btn.primary:hover:not(:disabled) { background: var(--brand-dark); }.btn.secondary { color: var(--brand-dark); background: var(--brand-soft); border-color: #bee1e3; }.btn.ghost { background: #fff; border-color: #bdcbcf; }.btn.danger { color: #fff; background: var(--danger); }
.questions { display: grid; gap: 26px; }.question-group h3 { margin: 0 0 10px; font-size: 16px; }.question-group p { margin: -4px 0 10px; color: var(--muted); font-size: 13px; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.choice { min-height: 64px; padding: 12px; display: grid; align-content: center; gap: 2px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }.choice:hover { border-color: #97bdc2; }.choice.selected { color: var(--brand-dark); background: var(--brand-soft); border: 2px solid var(--brand); padding: 11px; }.choice small { color: var(--muted); }
.photo-box { margin-top: 26px; padding: 17px; display: flex; align-items: center; gap: 14px; background: var(--soft); border: 1px dashed #abc2c6; border-radius: 13px; }.photo-box div { flex: 1; }.photo-box b, .photo-box small { display: block; }.photo-box small { margin-top: 3px; color: var(--muted); }.photo-box #photo-state { color: var(--brand); font-weight: 700; }
.estimate-hero { padding: 24px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; background: var(--brand-soft); border-radius: 16px; }.estimate-hero.warning { background: #fff7df; }.estimate-hero h1 { font-size: 30px; }.estimate-hero p { margin: 8px 0 0; color: var(--muted); }.estimate-value { text-align: right; }.estimate-value strong { display: block; color: var(--brand-dark); font-size: 30px; line-height: 1.15; }.estimate-value span { color: var(--muted); }
.estimate-metrics { margin: 18px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.metric { padding: 17px; background: var(--soft); border-radius: 13px; }.metric span, .metric strong { display: block; }.metric span { color: var(--muted); font-size: 13px; }.metric strong { margin-top: 4px; font-size: 20px; }
.estimate-metrics.consultation-metrics{grid-template-columns:repeat(3,1fr)}.consultation-metric{background:#fff7df;border:1px solid #ead28c}.consultation-metric strong{color:#8a5a00}
.breakdown { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }.breakdown-head { padding: 14px 16px; background: var(--soft); font-weight: 800; }.breakdown-row { padding: 12px 16px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); }.breakdown-row span:last-child { white-space: nowrap; font-weight: 700; }
.estimate-note { margin-top: 16px; padding-left: 13px; color: var(--muted); border-left: 3px solid var(--accent); font-size: 13px; }
.month-navigation{margin:24px 0 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.month-navigation b{text-transform:capitalize;font-size:19px}.month-navigation button{width:42px;height:42px;color:var(--brand);background:#e8f3f3;border:0;border-radius:12px;font-size:20px;font-weight:850;cursor:pointer}.month-navigation button:disabled{opacity:.35;cursor:not-allowed}.date-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.date-weekday{text-align:center;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase}.date-blank{min-height:76px}.date-button{min-height:76px;padding:8px;display:grid;place-items:center;gap:1px;background:#fff;border:1px solid var(--line);border-radius:12px;cursor:pointer}.date-button span{color:var(--muted);font-size:10px;text-transform:capitalize}.date-button b{font-size:17px}.date-button small{color:#3b8b6c;font-size:9px;font-weight:750}.date-button.selected{color:#fff;background:var(--brand);border-color:var(--brand)}.date-button.selected span,.date-button.selected small{color:#d6f5f6}.date-button.unavailable{color:#a4b0ba;background:#f3f5f7;border-color:#e4e8ec;cursor:not-allowed}.date-button.unavailable span,.date-button.unavailable small{color:#adb7bf}.date-strip.delivery-dates{grid-template-columns:repeat(5,1fr)}.date-strip.delivery-dates .date-button{min-height:70px}.calendar-loading{grid-column:1/-1;padding:24px;text-align:center;color:var(--muted);background:#f5f9fb;border-radius:14px}
.slot-section { margin-top: 18px; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }.slot-heading { padding: 14px 16px; display: flex; justify-content: space-between; gap: 10px; background: var(--soft); }.slot-heading span { color: var(--muted); font-size: 12px; }.slot-heading i { width: 8px; height: 8px; display: inline-block; background: #6ab55d; border-radius: 50%; }
.slots { padding: 17px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.slot { min-height: 50px; background: #fff; border: 1px solid #aac3c7; border-radius: 10px; cursor: pointer; font-weight: 800; }.slot:hover { background: var(--brand-soft); border-color: var(--brand); }.slot.selected { color: #fff; background: var(--brand); border-color: var(--brand); }.slot:disabled { color: #99a8ac; background: #f3f5f5; border-color: #e2e8e9; text-decoration: line-through; cursor: not-allowed; }
.slots .no-slots { grid-column: 1 / -1; padding: 18px; color: var(--muted); text-align: center; background: var(--soft); border: 1px dashed var(--line); border-radius: 12px; }
.assignment-note { margin-top: 16px; padding: 15px; display: flex; align-items: center; gap: 12px; background: #f7fafb; border-radius: 13px; }.crew-avatar { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: var(--ink); border-radius: 50%; font-weight: 800; }.assignment-note b, .assignment-note small { display: block; }.assignment-note small { color: var(--muted); }
.form-grid .field { flex: 1; }.notice-check { margin-top: 14px; padding: 15px; display: flex; align-items: flex-start; gap: 11px; background: var(--soft); border-radius: 12px; cursor: pointer; }.notice-check input { width: 18px; min-height: 18px; margin-top: 2px; accent-color: var(--brand); }.notice-check b, .notice-check small { display: block; }.notice-check small { margin-top: 3px; color: var(--muted); }.notice-check.compact { padding: 12px 0; background: transparent; color: var(--muted); font-size: 13px; }.form-error { min-height: 22px; margin-top: 8px; color: var(--danger); font-weight: 700; }
.done-step { text-align: center; }.success-mark { width: 72px; height: 72px; margin: 4px auto 20px; display: grid; place-items: center; color: #fff; background: #42a66a; border-radius: 50%; font-size: 34px; }.done-step h1 { font-size: 34px; }.done-step .lead { margin-left: auto; margin-right: auto; }.confirmation-card { max-width: 620px; margin: 26px auto; padding: 20px; text-align: left; background: var(--soft); border-radius: 15px; }.confirmation-card dl { margin: 0; display: grid; gap: 11px; }.confirmation-card div { display: flex; justify-content: space-between; gap: 25px; }.confirmation-card dt { color: var(--muted); }.confirmation-card dd { margin: 0; text-align: right; font-weight: 750; }.message-preview { max-width: 520px; margin: 20px auto; padding: 16px; text-align: left; background: #e7f2ff; border-radius: 15px 15px 15px 4px; }.message-preview small { color: var(--muted); }.message-preview b { display: block; margin-bottom: 6px; }.done-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.consult-followup { max-width: 620px; margin: 28px auto 0; }.divider { margin: 26px 0; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }.divider:before, .divider:after { content: ""; height: 1px; flex: 1; background: var(--line); }
.summary { position: sticky; top: 20px; overflow: hidden; }.summary-head { padding: 17px 18px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); font-weight: 800; }.summary-head button { padding: 0; color: var(--muted); background: none; border: 0; cursor: pointer; font-size: 12px; }.summary-empty { min-height: 250px; padding: 28px; display: grid; place-items: center; align-content: center; text-align: center; color: var(--muted); }.summary-empty span { font-size: 36px; color: #a9bec2; }.summary-empty p { max-width: 210px; }
#summary-filled { padding: 18px; }.summary-service { padding-bottom: 16px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); }.summary-service > span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: 11px; font-weight: 800; }.summary-service b, .summary-service small { display: block; }.summary-service small { color: var(--muted); }.summary dl { margin: 8px 0; }.summary dl div { padding: 10px 0; display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }.summary dt { color: var(--muted); }.summary dd { margin: 0; text-align: right; font-weight: 750; }.summary-caption { color: var(--muted); font-size: 12px; }
dialog { width: min(520px, calc(100% - 28px)); padding: 0; color: var(--ink); background: #fff; border: 0; border-radius: 18px; box-shadow: 0 30px 100px rgba(0,0,0,.25); } dialog::backdrop { background: rgba(14,35,41,.58); }.dialog-card { padding: 30px; position: relative; }.dialog-close { position: absolute; right: 16px; top: 12px; background: none; border: 0; font-size: 28px; cursor: pointer; }.dialog-icon { width: 52px; height: 52px; display: grid; place-items: center; color: #8b5a00; background: #fff1ca; border-radius: 50%; font-size: 24px; font-weight: 800; }.dialog-card h2 { margin-bottom: 8px; }.dialog-card p { color: var(--muted); }.cancel-reasons { margin: 18px 0; display: grid; gap: 10px; }.cancel-reasons label { display: flex; align-items: center; gap: 9px; }.cancel-reasons input { width: 17px; min-height: 17px; accent-color: var(--brand); }.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; }
.toast { position: fixed; z-index: 10; left: 50%; bottom: 22px; padding: 11px 16px; color: #fff; background: var(--ink); border-radius: 10px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: .2s ease; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 960px) { .layout { grid-template-columns: 1fr; }.summary { position: static; order: -1; }.summary-empty { min-height: 100px; }.summary dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } }
@media (max-width: 680px) { .site-header { height: auto; padding: 12px 15px; }.header-meta a { display: none; }.demo-badge { font-size: 10px; }.progress-wrap { padding: 15px 8px 12px; }.progress li { min-width: 48px; }.progress li b { display: none; }.layout { width: calc(100% - 20px); margin-top: 16px; }.wizard { min-height: 0; border-radius: 15px; }.step { padding: 26px 18px; }.service-grid { grid-template-columns: 1fr 1fr; }.service-card { min-height: 145px; padding: 14px; }.service-card.selected { padding: 13px; }.address-row, .form-grid { flex-direction: column; }.choice-grid { grid-template-columns: 1fr; }.photo-box { align-items: flex-start; flex-wrap: wrap; }.estimate-hero { grid-template-columns: 1fr; }.estimate-value { text-align: left; }.estimate-metrics,.estimate-metrics.consultation-metrics { grid-template-columns: 1fr; }.date-strip { gap:4px }.date-button{min-height:54px;padding:5px}.date-button span,.date-button small{display:none}.date-button b{font-size:14px}.date-blank{min-height:54px}.date-strip.delivery-dates{grid-template-columns:1fr 1fr}.date-strip.delivery-dates .date-button span{display:block}.slots { grid-template-columns: repeat(3, 1fr); }.slot-heading { flex-direction: column; }.step-actions { flex-wrap: wrap; }.step-actions .btn { flex: 1; }.summary { border-radius: 15px; }.summary dl { grid-template-columns: 1fr; }.confirmation-card div { align-items: flex-start; flex-direction: column; gap: 2px; }.confirmation-card dd { text-align: left; }.dialog-actions { flex-direction: column; }.dialog-actions .btn { width: 100%; } }
@media (max-width: 420px) { .brand small { display: none; }.service-grid { grid-template-columns: 1fr; }.service-card { min-height: 125px; }.slots { grid-template-columns: 1fr 1fr; } }

/* Warm, trust-first concept */
:root {
  --ink: #302a25;
  --muted: #786d63;
  --line: #e5d9cb;
  --soft: #faf5ee;
  --brand: #df6b36;
  --brand-dark: #b94d20;
  --brand-soft: #fff0e5;
  --accent: #f2b84b;
  --danger: #b84242;
  --white: #fffdf9;
  --shadow: 0 22px 60px rgba(87, 62, 40, .10);
}
body { background: #f4eee6; }
.site-header { height: 78px; background: #fffaf4; border-color: #eadfd2; }
.brand-mark { background: var(--brand); border-radius: 15px 15px 15px 5px; box-shadow: 0 7px 18px rgba(223, 107, 54, .24); }
.header-meta a { padding: 10px 15px; background: #302a25; color: #fffdf9; border-radius: 12px; }
.demo-badge { padding: 8px 12px; color: #7f4c17; background: #fff1cf; border-color: #ecd39c; }
.progress-wrap { padding-top: 20px; background: #fffaf4; border-color: #eadfd2; }
.progress:before { background: #e9ded2; }
.progress span { background: #fffaf4; border-color: #dfd1c3; }
.progress li { color: #9b8e81; }
.progress li.active, .progress li.complete { color: var(--brand-dark); }
.progress li.active span, .progress li.complete span { background: var(--brand); border-color: var(--brand); }
.layout { margin-top: 30px; grid-template-columns: minmax(0, 1fr) 335px; gap: 26px; }
.wizard, .summary { background: var(--white); border-color: #e9ddd0; border-radius: 26px; }
.wizard { min-height: 690px; }
.step { padding: 44px 48px 38px; }
.eyebrow { color: var(--brand-dark); letter-spacing: .11em; }
h1 { max-width: 740px; font-size: clamp(32px, 4.5vw, 48px); color: #2c2722; }
.lead { max-width: 680px; color: var(--muted); font-size: 17px; }
.trust-points { margin: -6px 0 28px; display: flex; flex-wrap: wrap; gap: 10px 22px; color: #675c52; font-size: 13px; font-weight: 700; }
.trust-points span:before { content: "✓"; width: 20px; height: 20px; margin-right: 7px; display: inline-grid; place-items: center; color: #fff; background: #62a273; border-radius: 50%; font-size: 11px; }
.address-row { padding: 18px; background: #faf5ee; border: 1px solid #eee2d5; border-radius: 18px; }
input, select { min-height: 48px; background: #fffdfa; border-color: #d8c9ba; border-radius: 12px; }
input:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(223,107,54,.13); }
.service-grid { gap: 14px; }
.service-card { min-height: 158px; padding: 20px; background: #fffdfa; border-color: #e5d9cb; border-radius: 20px; }
.service-card:hover { border-color: #d59878; box-shadow: 0 12px 26px rgba(87,62,40,.09); }
.service-card.selected { padding: 19px; background: var(--brand-soft); border-color: var(--brand); box-shadow: 0 10px 25px rgba(223,107,54,.12); }
.service-card.consultation { background: #fff7e8; }
.service-icon { width: 44px; height: 44px; background: var(--brand-soft); color: var(--brand-dark); border-radius: 15px; }
.service-card b { font-size: 16px; }
.service-card em { color: var(--brand-dark); }
.btn { min-height: 48px; padding-inline: 21px; border-radius: 13px; }
.btn.primary { background: var(--brand); box-shadow: 0 8px 18px rgba(223,107,54,.18); }
.btn.primary:hover:not(:disabled) { background: var(--brand-dark); }
.btn.secondary { background: var(--brand-soft); border-color: #efcbb7; }
.btn.ghost { background: #fffdfa; border-color: #d8c9ba; }
.choice, .date-button, .slot { background: #fffdfa; border-color: #e1d5c8; border-radius: 14px; }
.choice.selected, .date-button.selected, .slot.selected { color: var(--brand-dark); background: var(--brand-soft); border-color: var(--brand); }
.photo-box, .metric, .breakdown-head { background: #faf5ee; }
.photo-box { border-color: #d8bba8; }
.estimate-hero { background: var(--brand-soft); border: 1px solid #f0d2bf; border-radius: 20px; }
.estimate-hero.warning { background: #fff4d9; border-color: #ecd79f; }
.breakdown, .confirmation-card { border-color: #e5d9cb; border-radius: 18px; }
.assignment-note { background: #f4f8ef; border-color: #d9e6ce; border-radius: 17px; }
.crew-avatar { background: #69a66f; color: #fff; }
.summary { position: sticky; top: 22px; overflow: hidden; }
.summary-head { padding: 22px 24px; background: #302a25; color: #fffdf9; }
.summary-head button { color: #f3cab7; }
.summary-empty { min-height: 305px; padding: 32px 26px; }
.summary-empty span { background: var(--brand-soft); color: var(--brand-dark); }
.summary-service { margin: 22px 24px 8px; padding-bottom: 18px; border-bottom-color: #eadfd3; }
.summary-service > span { background: var(--brand-soft); color: var(--brand-dark); border-radius: 15px; }
.summary dl { margin-inline: 24px; }
.summary-caption { margin: 16px 24px 24px; padding: 12px 14px; color: #6f5d4f; background: #fff5dc; border-radius: 12px; }
.success-mark { background: #69a66f; }
.message-preview { background: #f4f8ef; border-color: #d4e3cb; }
.dialog-card { background: #fffdf9; border-radius: 24px; }
.toast { background: #302a25; }

@media (max-width: 900px) {
  .layout { display: grid; grid-template-columns: 1fr; }
  .summary { position: static; order: 0; }
  .wizard { min-height: 0; }
}
@media (max-width: 680px) {
  .site-header { height: 68px; }
  .demo-badge { display: none; }
  .header-meta a { padding: 8px 10px; font-size: 12px; }
  .progress-wrap { padding: 14px 12px 12px; overflow: hidden; }
  .progress li { min-width: 54px; }
  .progress b { display: none; }
  .layout { width: min(100% - 20px, 1240px); margin-top: 14px; }
  .wizard, .summary { border-radius: 20px; }
  .step { padding: 30px 20px; }
  h1 { font-size: 34px; }
  .trust-points { display: grid; gap: 8px; }
  .address-row { padding: 14px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 118px; display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto auto; column-gap: 13px; }
  .service-icon { grid-row: 1 / 4; margin: 0; }
  .service-card em { margin-top: 5px; }
}

/* Modern blue concept based on the supplied reference */
:root {
  --ink: #102d49;
  --muted: #5d7184;
  --line: #dce8f4;
  --soft: #f3f8fe;
  --brand: #2b7aff;
  --brand-dark: #1558c0;
  --brand-soft: #e9f2ff;
  --accent: #f5a623;
  --danger: #d3424e;
  --white: #ffffff;
  --shadow: 0 24px 70px -18px rgba(19, 68, 119, .20), 0 8px 24px -10px rgba(13, 46, 78, .08);
}
body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 7%, rgba(67, 137, 255, .13), transparent 26rem),
    radial-gradient(circle at 92% 88%, rgba(49, 199, 122, .09), transparent 24rem),
    #f6f9fc;
}
.site-header {
  height: 80px;
  background: rgba(255,255,255,.88);
  border-color: rgba(25, 80, 135, .08);
  box-shadow: 0 8px 28px rgba(16, 62, 105, .05);
  backdrop-filter: blur(18px);
}
.brand-mark {
  width: 46px;
  height: 46px;
  background: linear-gradient(145deg, #1d61ca, #3b88ff);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(43,122,255,.25);
}
.brand b { color: #0b2b4a; }
.header-meta a {
  background: #0b2b4a;
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(11,43,74,.14);
}
.demo-badge {
  color: #1b5fbd;
  background: linear-gradient(145deg, #e0eeff, #f2f7ff);
  border: 1px solid #b9d4fc;
  box-shadow: 0 5px 15px rgba(43,122,255,.08);
}
.progress-wrap {
  padding-block: 18px 16px;
  background: rgba(255,255,255,.72);
  border-color: rgba(25,80,135,.07);
  backdrop-filter: blur(14px);
}
.progress:before { height: 3px; background: linear-gradient(90deg, #bcd5fa, #dfeaf7); }
.progress li { color: #7d91a5; }
.progress span { width: 34px; height: 34px; background: #fff; border-color: #cfdeec; box-shadow: 0 4px 12px rgba(13,65,115,.06); }
.progress li.active, .progress li.complete { color: #1558c0; }
.progress li.active span, .progress li.complete span { background: linear-gradient(145deg, #1f67d7, #3b86ff); border-color: transparent; box-shadow: 0 8px 18px rgba(43,122,255,.22); }
.layout { width: min(1280px, calc(100% - 40px)); margin-top: 34px; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; }
.wizard, .summary {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 32px;
  box-shadow: var(--shadow);
}
.wizard { min-height: 700px; }
.step { padding: 44px 50px 40px; }
.step[data-step="1"] {
  background: linear-gradient(145deg, rgba(231,241,255,.72) 0, rgba(255,255,255,0) 285px);
}
.eyebrow {
  width: fit-content;
  margin-bottom: 14px;
  padding: 7px 12px;
  color: #195ebf;
  background: #e7f1ff;
  border: 1px solid #c8ddfb;
  border-radius: 999px;
  letter-spacing: .055em;
}
h1 { color: #0b2b4a; font-size: clamp(34px, 4.5vw, 50px); }
.lead { color: #587087; font-size: 17px; }
.trust-points {
  margin: 4px 0 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 13px;
}
.trust-point {
  min-height: 108px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  border: 2px solid transparent;
  border-radius: 22px;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
}
.trust-point:after { content: ""; position: absolute; width: 64px; height: 64px; right: -18px; top: -18px; border-radius: 50%; opacity: .11; }
.trust-point:hover { transform: translateY(-3px); }
.trust-point:nth-child(1) { background: linear-gradient(145deg,#e3f0ff,#f4f8ff); border-color: #6aa3f8; box-shadow: 0 8px 20px rgba(59,130,246,.10); }
.trust-point:nth-child(1):after { background: #2b7aff; }
.trust-point:nth-child(2) { background: linear-gradient(145deg,#fff0d8,#fff9ef); border-color: #f2aa34; box-shadow: 0 8px 20px rgba(245,158,11,.10); }
.trust-point:nth-child(2):after { background: #f59e0b; }
.trust-point:nth-child(3) { background: linear-gradient(145deg,#e3f6e8,#f4fcf5); border-color: #52c778; box-shadow: 0 8px 20px rgba(34,197,94,.10); }
.trust-point:nth-child(3):after { background: #22c55e; }
.trust-point b { color: #0b2b4a; font-size: 15px; }
.trust-point small { color: #49657f; line-height: 1.4; }
.address-row {
  padding: 20px;
  background: linear-gradient(145deg,#f0f7ff,#fbfdff);
  border: 1px solid #d7e7f7;
  border-radius: 22px;
}
input, select {
  min-height: 50px;
  background: #fff;
  border-color: #c9d9e8;
  border-radius: 14px;
  box-shadow: inset 0 1px 2px rgba(15,56,95,.03);
}
input:focus, select:focus { border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,.12); }
.service-grid { gap: 15px; }
.service-card {
  min-height: 165px;
  padding: 20px;
  background: #fff;
  border-color: #dce8f4;
  border-radius: 24px;
  box-shadow: 0 5px 18px rgba(15,62,105,.045);
}
.service-card:hover { transform: translateY(-4px); border-color: #9fc3f5; box-shadow: 0 18px 34px -14px rgba(43,122,255,.24); }
.service-card.selected { padding: 19px; background: linear-gradient(145deg,#e6f1ff,#f7faff); border-color: #3b82f6; box-shadow: 0 14px 30px -12px rgba(43,122,255,.30); }
.service-card.consultation { background: linear-gradient(145deg,#fff6e8,#fffdf8); }
.service-icon {
  width: 46px;
  height: 46px;
  background: linear-gradient(145deg,#dfeeff,#f1f7ff);
  color: #1b62c7;
  border-radius: 15px;
  box-shadow: inset 0 0 0 1px rgba(43,122,255,.08);
}
.service-card em { color: #1558c0; }
.btn { min-height: 50px; border-radius: 14px; }
.btn.primary { background: linear-gradient(145deg,#1f67d7,#3b86ff); box-shadow: 0 10px 24px rgba(43,122,255,.23); }
.btn.primary:hover:not(:disabled) { background: linear-gradient(145deg,#185ac1,#2f78ed); box-shadow: 0 14px 30px rgba(43,122,255,.29); }
.btn.secondary { color: #1558c0; background: #e8f2ff; border-color: #c4dbfa; }
.btn.ghost { background: #fff; border-color: #c9d9e8; }
.questions { gap: 28px; }
.question-group { padding: 20px; background: #f8fbff; border: 1px solid #e1ebf5; border-radius: 22px; }
.choice, .date-button, .slot { background: #fff; border-color: #d6e3ef; border-radius: 15px; }
.choice:hover, .date-button:hover:not(:disabled), .slot:hover:not(:disabled) { border-color: #78aaf1; box-shadow: 0 7px 18px rgba(43,122,255,.08); }
.choice.selected, .date-button.selected, .slot.selected { color: #1558c0; background: #e9f2ff; border-color: #3b82f6; }
.photo-box, .metric, .breakdown-head { background: #f3f8fe; }
.photo-box { border-color: #9fc1e8; border-radius: 18px; }
.estimate-hero { background: linear-gradient(145deg,#e2efff,#f6faff); border-color: #bed7f7; border-radius: 24px; }
.estimate-hero.warning { background: linear-gradient(145deg,#fff0d3,#fffbf2); border-color: #f1cc7d; }
.breakdown, .confirmation-card { border-color: #dce8f4; border-radius: 20px; }
.assignment-note { background: linear-gradient(145deg,#e8f7ec,#f6fcf7); border-color: #b9dfc3; border-radius: 20px; }
.crew-avatar, .success-mark { background: linear-gradient(145deg,#22a85a,#52c778); color: #fff; box-shadow: 0 8px 18px rgba(34,168,90,.18); }
.summary { top: 22px; }
.summary-head { padding: 23px 25px; background: linear-gradient(145deg,#0d3154,#174f81); }
.summary-head button { color: #c7ddf3; }
.summary-empty { min-height: 310px; }
.summary-empty span, .summary-service > span { background: linear-gradient(145deg,#dfeeff,#f3f8ff); color: #195ebf; }
.summary-caption { color: #3d5e7d; background: #edf5ff; }
.message-preview { background: #eff9f2; border-color: #bfe1c8; }
.dialog-card { border-radius: 28px; }
.toast { background: #0b2b4a; }
.header-meta .admin-link { padding: 4px 7px; color: #6c7e8e; background: transparent; border: 0; border-radius: 7px; font-size: 11px; font-weight: 700; text-transform: lowercase; }
@media (max-width: 680px) { .header-meta .admin-link { display: inline-flex; } }
.comment-field{flex:1 0 100%}.comment-field textarea{width:100%;min-height:84px;padding:12px 14px;resize:vertical;background:#fff;border:1px solid #c9d9e8;border-radius:14px;font:inherit}.comment-field textarea:focus{outline:0;border-color:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.12)}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .summary { order: 0; }
}
@media (max-width: 720px) {
  .layout { width: min(100% - 20px, 1280px); }
  .wizard, .summary { border-radius: 24px; }
  .step { padding: 30px 20px; }
  .trust-points { grid-template-columns: 1fr; }
  .trust-point { min-height: 88px; }
  .question-group { padding: 15px; }
  .service-card { min-height: 122px; }
}