.booking-page { min-height: 100vh; background: var(--color-surface-soft); }
.booking-hero { padding: clamp(56px, 7vw, 96px) 0; color: var(--color-ivory); background: var(--color-navy); }
.booking-hero__inner { display: grid; align-items: end; grid-template-columns: minmax(0, 1fr) auto; gap: 50px; }
.booking-hero h1 { color: var(--color-ivory); font-size: clamp(2.8rem, 6vw, 5.4rem); font-weight: 650; }
.booking-hero h1 span { color: var(--color-ai-signal); }
.booking-hero p:not(.eyebrow) { max-width: 720px; margin: 0; color: rgb(238 241 236 / 68%); font-size: 1.08rem; }
.booking-hero .eyebrow { color: var(--color-ai-signal); }
.booking-progress { display: flex; gap: 28px; padding: 0; margin: 0; list-style: none; }
.booking-progress li { display: grid; justify-items: center; gap: 8px; color: rgb(238 241 236 / 42%); font-size: .72rem; text-transform: uppercase; }
.booking-progress span { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgb(238 241 236 / 20%); border-radius: 50%; }
.booking-progress .is-active { color: var(--color-ivory); }
.booking-progress .is-active span { color: var(--color-navy); border-color: var(--color-accent); background: var(--color-accent); }
.booking-workspace { padding: 28px 0 clamp(80px, 9vw, 130px); }
.booking-notice { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; margin-bottom: 22px; color: var(--color-muted); font-size: .82rem; }
.booking-notice__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 5px rgb(118 216 210 / 15%); }
.booking-notice.is-ready .booking-notice__dot { background: var(--color-success); box-shadow-color: rgb(15 110 86 / 14%); }
.booking-notice.is-error .booking-notice__dot { background: #b64238; }
.booking-layout { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 26px; }
.booking-form { display: grid; gap: 18px; }
.booking-block { padding: clamp(24px, 4vw, 42px); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
.booking-block[hidden] { display: none; }
.booking-block legend { display: flex; align-items: center; gap: 12px; padding: 0 10px 0 0; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 700; letter-spacing: -.025em; }
.booking-block legend > span { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 50%; color: var(--color-brand-dark); background: var(--color-brand-soft); font-size: .72rem; }
.mode-picker__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px; }
.mode-choice { position: relative; cursor: pointer; }
.mode-choice input { position: absolute; opacity: 0; pointer-events: none; }
.mode-choice__body { display: grid; min-height: 160px; align-content: center; padding: 24px; border: 1px solid var(--color-line); border-radius: 18px; background: var(--color-surface-soft); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.mode-choice__body small { color: var(--color-brand-dark); font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.mode-choice__body strong { margin: 5px 0; color: var(--color-ink); font-family: var(--font-display); font-size: 1.45rem; }
.mode-choice__body em { color: var(--color-muted); font-size: .86rem; font-style: normal; }
.mode-choice input:checked + .mode-choice__body { border-color: var(--color-brand); background: #fff; box-shadow: 0 0 0 3px rgb(13 98 106 / 12%); transform: translateY(-2px); }
.mode-choice input:focus-visible + .mode-choice__body { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.field-grid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field--wide { grid-column: 1 / -1; }
.field { display: grid; gap: 7px; }
.field > span:first-child { color: var(--color-ink); font-size: .78rem; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 11px 13px; border: 1px solid #cbd9d8; border-radius: 12px; color: var(--color-ink); background: #fff; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-brand); outline: 3px solid rgb(13 98 106 / 12%); }
.field small { min-height: 1em; color: #a83b35; font-size: .7rem; }
.field .field__hint { color: var(--color-muted); }
.field__unit { position: relative; display: block; }
.field__unit input { padding-right: 42px; }
.field__unit i { position: absolute; top: 50%; right: 14px; color: var(--color-muted); font-size: .78rem; font-style: normal; transform: translateY(-50%); }
.address-field { position: relative; }
.address-suggestions { position: absolute; z-index: 20; top: 78px; right: 0; left: 0; overflow: hidden; max-height: 310px; border: 1px solid #b9ccca; border-radius: 14px; background: #fff; box-shadow: 0 18px 42px rgb(8 27 44 / 16%); }
.address-suggestions[hidden] { display: none; }
.address-option { display: grid; width: 100%; gap: 2px; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--color-line); color: var(--color-ink); background: #fff; cursor: pointer; text-align: left; }
.address-option:last-child { border-bottom: 0; }
.address-option:hover, .address-option.is-active { background: var(--color-brand-soft); }
.address-option strong { font-size: .82rem; }
.address-option small { min-height: 0; color: var(--color-muted); font-size: .68rem; }
.field [data-address-status] { color: var(--color-muted); }
.address-attribution { margin: 14px 0 0; color: var(--color-muted); font-size: .67rem; }
.address-attribution a { color: var(--color-brand-dark); text-decoration: underline; text-underline-offset: 2px; }
.check-card { display: flex; align-items: flex-start; gap: 12px; padding: 15px; margin-top: 18px; border: 1px solid var(--color-line); border-radius: 14px; background: var(--color-surface-soft); cursor: pointer; }
.check-card > input { width: 19px; height: 19px; flex: 0 0 19px; margin-top: 2px; accent-color: var(--color-brand); }
.check-card span, .check-card strong, .check-card small { display: block; }
.check-card strong { color: var(--color-ink); font-size: .86rem; }
.check-card small { margin-top: 3px; color: var(--color-muted); font-size: .72rem; }
.check-card a { color: var(--color-brand-dark); text-decoration: underline; text-underline-offset: 2px; }
.priority-picker { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.priority-picker p { width: 100%; margin: 0 0 2px; color: var(--color-muted); font-size: .78rem; }
.priority-picker label { cursor: pointer; }
.priority-picker input { position: absolute; opacity: 0; }
.priority-picker span { display: inline-flex; padding: 9px 13px; border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-muted); background: #fff; font-size: .78rem; }
.priority-picker input:checked + span { color: var(--color-navy); border-color: var(--color-ai-signal); background: var(--color-ai-signal); }
.preset-picker { margin-top: 28px; }
.preset-picker > p { margin-bottom: 10px; font-weight: 700; }
.preset-picker > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.preset-button { min-height: 74px; padding: 12px; border: 1px solid var(--color-line); border-radius: 14px; color: var(--color-ink); background: #fff; cursor: pointer; text-align: left; }
.preset-button strong, .preset-button small { display: block; }
.preset-button small { margin-top: 3px; color: var(--color-muted); }
.preset-button.is-active { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgb(118 216 210 / 18%); }
.preset-picker > small { display: block; margin-top: 10px; color: var(--color-muted); }
.service-picker { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--color-line); }
.service-picker__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.service-picker h2 { margin: 0; font-size: 1.25rem; }
.service-picker__heading span { color: var(--color-muted); font-size: .75rem; }
.service-picker > div:last-child { display: grid; gap: 9px; margin-top: 14px; }
.service-row { display: grid; grid-template-columns: auto 1fr 94px; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--color-line); border-radius: 14px; }
.service-row > input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--color-brand); }
.service-row__copy { min-width: 0; }
.service-row__copy strong, .service-row__copy small { display: block; }
.service-row__copy strong { font-size: .88rem; }
.service-row__copy small { overflow: hidden; color: var(--color-muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.service-row input[type="number"] { min-width: 0; width: 100%; min-height: 40px; padding: 7px; border: 1px solid #cbd9d8; border-radius: 9px; }
.quote-panel { position: sticky; top: calc(var(--header-height) + 22px); padding: 30px; border-radius: var(--radius-md); color: var(--color-ivory); background: var(--color-navy); box-shadow: var(--shadow-lg); }
.quote-panel .eyebrow { color: var(--color-ai-signal); }
.quote-panel h2 { color: var(--color-ivory); font-size: 2rem; }
.quote-panel > p:not(.eyebrow):not(.quote-panel__note) { color: rgb(238 241 236 / 66%); }
.quote-panel__facts { display: grid; gap: 0; margin: 26px 0; }
.quote-panel__facts div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgb(238 241 236 / 11%); }
.quote-panel__facts dt { color: rgb(238 241 236 / 48%); font-size: .75rem; }
.quote-panel__facts dd { margin: 0; font-size: .8rem; text-align: right; }
.quote-result { padding: 18px; margin: 18px 0; border: 1px solid rgb(122 215 209 / 20%); border-radius: 16px; background: rgb(13 98 106 / 24%); }
.quote-result small, .quote-result strong, .quote-result span { display: block; }
.quote-result small { color: var(--color-ai-signal); text-transform: uppercase; }
.quote-result strong { margin: 4px 0; color: var(--color-ivory); font-family: var(--font-display); font-size: 2.25rem; }
.quote-result span, .quote-result p { color: rgb(238 241 236 / 66%); font-size: .78rem; }
.quote-result [data-quote-expiry] { margin-top: 3px; color: var(--color-accent); }
.quote-result p { margin: 10px 0 0; }
.quote-panel__message { padding: 12px; margin-bottom: 14px; border-radius: 12px; color: #ffd9d5; background: rgb(182 66 56 / 24%); font-size: .78rem; }
.quote-panel__submit { width: 100%; border: 0; cursor: pointer; }
.quote-panel__submit + .quote-panel__submit { margin-top: 10px; }
.quote-panel__submit:disabled { cursor: wait; opacity: .55; transform: none; }
.quote-panel__note { margin: 14px 0 0; color: rgb(238 241 236 / 46%); font-size: .7rem; text-align: center; }
.slots-step[hidden] { display: none; }
.slots-step { padding: 28px 0 20px; }
.slots-step__heading { max-width: 760px; margin-bottom: 34px; }
.slots-step__heading h2 { margin-bottom: 12px; }
.slots-step__heading > p:last-child { color: var(--color-muted); }
.back-button { display: inline-flex; align-items: center; gap: 9px; padding: 0; margin-bottom: 30px; border: 0; color: var(--color-brand-dark); background: transparent; cursor: pointer; font-weight: 700; }
.back-button span { font-size: 1.25rem; }
.slots-layout { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; }
.slots-status { min-height: 46px; padding: 12px 15px; margin-bottom: 14px; border-radius: 12px; color: var(--color-muted); background: #fff; }
.slots-status.is-error { color: #96352f; background: #fff0ef; }
.slots-calendar { display: grid; gap: 12px; }
.slot-day { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 20px; border: 1px solid var(--color-line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }
.slot-day__heading { min-width: 0; }
.slot-day h3 { margin: 0; font-size: 1.05rem; }
.slot-day h3 small { display: block; margin-top: 4px; color: var(--color-muted); font-family: var(--font-body); font-size: .7rem; font-weight: 500; letter-spacing: 0; }
.slot-capacity { display: grid; gap: 5px; margin-top: 12px; }
.slot-capacity__meter { display: flex; width: 100%; height: 7px; gap: 2px; overflow: hidden; border-radius: 99px; background: var(--color-surface-soft); }
.slot-capacity__segment { min-width: 5px; }
.slot-capacity__segment.is-available { background: var(--color-brand); }
.slot-capacity__segment.is-limited { background: var(--color-accent); }
.slot-capacity__segment.is-full { background: #c76b64; }
.slot-capacity__legend { color: var(--color-muted); font-size: .6rem; }
.slot-day__times { display: grid; grid-template-columns: repeat(5, minmax(64px, 1fr)); gap: 8px; }
.slot-button { min-height: 42px; padding: 8px; border: 1px solid var(--color-line); border-radius: 10px; color: var(--color-ink); background: var(--color-surface-soft); cursor: pointer; font-weight: 700; }
.slot-button:hover:not(:disabled) { border-color: var(--color-brand); background: var(--color-brand-soft); }
.slot-button.is-selected { color: var(--color-navy); border-color: var(--color-accent); background: var(--color-accent); box-shadow: 0 0 0 3px rgb(118 216 210 / 18%); }
.slot-button:disabled { cursor: not-allowed; opacity: .38; text-decoration: line-through; }
.slot-button.is-limited:disabled { opacity: .58; text-decoration: none; background: rgb(118 216 210 / 22%); }
.slot-summary { position: sticky; top: calc(var(--header-height) + 22px); display: grid; padding: 28px; border-radius: var(--radius-md); color: var(--color-ivory); background: var(--color-navy); box-shadow: var(--shadow-lg); }
.slot-summary .eyebrow { color: var(--color-ai-signal); }
.slot-summary > strong { color: var(--color-ivory); font-family: var(--font-display); font-size: 2.2rem; }
.slot-summary > span, .slot-summary > p { color: rgb(238 241 236 / 60%); font-size: .78rem; }
.slot-summary > [data-quote-expiry] { margin-top: 4px; color: var(--color-accent); }
.slot-summary__selected { display: grid; gap: 3px; padding: 16px; margin: 22px 0; border: 1px solid rgb(238 241 236 / 12%); border-radius: 14px; background: rgb(13 98 106 / 20%); }
.slot-summary__selected small { color: var(--color-ai-signal); text-transform: uppercase; }
.slot-summary__selected b { font-size: .95rem; }
.slot-summary > .button { width: 100%; border: 0; }
.slot-summary > .button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.confirmation-step[hidden], .booking-success[hidden] { display: none; }
.confirmation-step { padding: 28px 0 20px; }
.confirmation-layout { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) 350px; gap: 24px; }
.consent-block .check-card { margin-top: 12px; }
.confirmation-summary dl { display: grid; margin: 22px 0; }
.confirmation-summary dl div { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgb(238 241 236 / 11%); }
.confirmation-summary dt { color: rgb(238 241 236 / 46%); font-size: .72rem; }
.confirmation-summary dd { margin: 0; color: var(--color-ivory); font-size: .78rem; text-align: right; }
.confirmation-summary .quote-panel__message { color: #ffd9d5; }
.booking-success { max-width: 760px; padding: clamp(38px, 7vw, 76px); margin: 30px auto; border: 1px solid var(--color-line); border-radius: 28px; background: #fff; box-shadow: var(--shadow-lg); text-align: center; }
.booking-success__mark { display: grid; width: 64px; height: 64px; place-items: center; margin: 0 auto 22px; border-radius: 50%; color: var(--color-navy); background: var(--color-accent); font-size: 1.7rem; font-weight: 800; }
.booking-success .eyebrow { color: var(--color-brand-dark); }
.booking-success h2 { margin-bottom: 12px; }
.booking-success > p:not(.eyebrow) { color: var(--color-muted); }
.booking-success dl { display: grid; gap: 0; max-width: 520px; margin: 28px auto; text-align: left; }
.booking-success dl div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--color-line); }
.booking-success dt { color: var(--color-muted); }
.booking-success dd { margin: 0; font-weight: 750; text-align: right; }
@media (max-width: 980px) { .booking-hero__inner, .booking-layout, .slots-layout { grid-template-columns: 1fr; } .booking-progress { justify-content: flex-start; } .quote-panel, .slot-summary { position: static; } .field-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .confirmation-layout { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .booking-hero__inner { gap: 34px; } .booking-progress { gap: 16px; } .booking-progress strong { display: none; } .mode-picker__grid, .field-grid, .preset-picker > div { grid-template-columns: 1fr; } .mode-choice__body { min-height: 128px; } .booking-block { padding: 22px 18px; } .service-row { grid-template-columns: auto 1fr; } .service-row input[type="number"] { grid-column: 2; } .slot-day { grid-template-columns: 1fr; } .slot-day__times { grid-template-columns: repeat(3, 1fr); } .booking-success dl div { display: grid; gap: 3px; } .booking-success dd { text-align: left; } }

/* Direct booking experience — compact, human and consistent with homepage v3. */
.booking-page { background: #f6f8f7; }
.booking-hero { padding: 38px 0 34px; }
.booking-hero__inner { align-items: center; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
.booking-hero .eyebrow { margin-bottom: 9px; }
.booking-hero h1 { margin: 0 0 10px; font-size: clamp(2.25rem, 4.4vw, 3.75rem); font-weight: 600; letter-spacing: -.045em; }
.booking-hero p:not(.eyebrow) { max-width: 650px; color: rgb(255 255 255 / 72%); font-size: 1rem; }
.booking-progress { gap: 10px; }
.booking-progress li { min-width: 84px; grid-template-columns: 30px 1fr; align-items: center; justify-items: start; gap: 8px; color: rgb(255 255 255 / 48%); font-size: .68rem; letter-spacing: .04em; }
.booking-progress span { width: 30px; height: 30px; grid-row: 1; }
.booking-progress strong { grid-column: 2; grid-row: 1; }
.booking-progress .is-active span { color: #fff; border-color: var(--color-brand); background: var(--color-brand); }
.booking-workspace { padding: 18px 0 clamp(76px, 8vw, 116px); }
.booking-notice { min-height: 36px; justify-content: flex-start; margin: 0 0 16px; color: #63737d; font-size: .76rem; }
.booking-notice__dot { width: 7px; height: 7px; background: var(--color-brand); box-shadow: none; }
.booking-layout { grid-template-columns: minmax(0, 1fr) 344px; gap: 30px; }
.booking-form { gap: 16px; min-width: 0; }
.booking-block { min-width: 0; padding: clamp(24px, 3.2vw, 34px); border-color: #dce4e2; border-radius: 20px; box-shadow: none; }
.booking-block legend { gap: 10px; font-size: clamp(1.15rem, 2vw, 1.38rem); font-weight: 600; letter-spacing: -.02em; }
.booking-block legend > span { width: 30px; height: 30px; flex-basis: 30px; color: #fff; background: var(--color-brand); font-size: .72rem; }
.mode-picker__grid { gap: 12px; margin-top: 20px; }
.mode-choice__body { position: relative; min-height: 134px; align-content: start; padding: 20px 48px 20px 20px; border-color: #dce4e2; border-radius: 16px; background: #fff; }
.mode-choice__body::after { position: absolute; top: 20px; right: 18px; display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #cbd7d5; border-radius: 50%; color: transparent; content: "✓"; font-size: .72rem; font-weight: 700; }
.mode-choice__body small { color: var(--color-brand-dark); font-size: .68rem; font-weight: 600; }
.mode-choice__body strong { margin: 7px 0 5px; font-size: 1.18rem; font-weight: 600; }
.mode-choice__body em { max-width: 330px; font-size: .8rem; line-height: 1.45; }
.mode-choice input:checked + .mode-choice__body { border-color: var(--color-brand); background: var(--color-brand-soft); box-shadow: inset 0 0 0 1px var(--color-brand); transform: none; }
.mode-choice input:checked + .mode-choice__body::after { color: #fff; border-color: var(--color-brand); background: var(--color-brand); }
.mode-choice input:focus-visible + .mode-choice__body { outline-color: var(--color-brand); }
.field-grid { gap: 15px; margin-top: 20px; }
.field-grid--compact { grid-template-columns: repeat(4, minmax(110px, 1fr)); }
.field > span:first-child { font-size: .75rem; font-weight: 600; }
.field input, .field select, .field textarea { min-height: 48px; border-color: #cbd7d5; border-radius: 11px; background: #fff; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #9fb4b1; }
.field input:focus, .field select:focus, .field textarea:focus { outline-color: rgb(10 143 157 / 14%); }
.quick-field { display: grid; gap: 10px; margin-top: 24px; }
.quick-field__label, .range-field > div:first-child > span, .stepper > span { color: var(--color-ink); font-size: .78rem; font-weight: 600; }
.choice-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.choice-chips label { position: relative; cursor: pointer; }
.choice-chips input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.choice-chips label > span { display: grid; min-height: 52px; place-items: center; padding: 10px 13px; border: 1px solid #d5dfdd; border-radius: 13px; color: var(--color-ink); background: #fff; font-size: .8rem; font-style: normal; font-weight: 600; text-align: center; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.choice-chips input:checked + span { border-color: var(--color-brand); background: var(--color-brand-soft); box-shadow: inset 0 0 0 1px var(--color-brand); }
.choice-chips input:focus-visible + span { outline: 3px solid rgb(10 143 157 / 18%); outline-offset: 2px; }
.choice-chips--short { max-width: 520px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-chips--condition { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-chips--condition label > span { align-content: center; justify-items: start; min-height: 72px; text-align: left; }
.choice-chips--condition strong, .choice-chips--condition small { display: block; }
.choice-chips--condition small { margin-top: 2px; color: var(--color-muted); font-size: .66rem; font-weight: 400; }
.range-field { display: grid; gap: 10px; margin-top: 24px; padding: 17px 18px 13px; border: 1px solid #dce4e2; border-radius: 15px; background: #f8faf9; }
.range-field > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.range-field output { color: var(--color-brand-dark); font-size: 1.08rem; font-weight: 700; }
.range-field input[type="range"] { width: 100%; height: 30px; padding: 0; border: 0; border-radius: 0; outline: none; background: transparent; accent-color: var(--color-brand); cursor: pointer; }
.range-field input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: #d8e6e4; }
.range-field input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -9px; border: 4px solid #fff; border-radius: 50%; background: var(--color-brand); box-shadow: 0 2px 8px rgb(8 24 39 / 22%); -webkit-appearance: none; }
.range-field input[type="range"]:focus-visible { outline: 3px solid rgb(10 143 157 / 18%); outline-offset: 4px; }
.range-field__limits { display: flex; justify-content: space-between; color: #849399; font-size: .64rem; }
.postal-field { max-width: 250px; margin-top: 24px; }
.postal-field > small:not([data-error-for]) { color: var(--color-muted); font-size: .66rem; }
.optional-note { margin-top: 18px; }
.optional-note summary { color: var(--color-brand-dark); cursor: pointer; font-size: .76rem; font-weight: 600; }
.optional-note .field { margin-top: 12px; }
.stepper-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.stepper { display: grid; gap: 9px; padding: 14px; border: 1px solid #dce4e2; border-radius: 14px; background: #f8faf9; }
.stepper > div, .mini-stepper { display: grid; grid-template-columns: 40px minmax(36px, 1fr) 40px; align-items: center; gap: 4px; }
.stepper button, .mini-stepper button { display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid #cbd7d5; border-radius: 11px; color: var(--color-brand-dark); background: #fff; cursor: pointer; font: 600 1.18rem/1 var(--font-body); }
.stepper button:disabled, .mini-stepper button:disabled { cursor: not-allowed; opacity: .35; }
.stepper input[type="number"], .mini-stepper input[type="number"] { width: 100%; min-height: 40px; padding: 4px; border: 0; background: transparent; color: var(--color-ink); font-size: 1rem; font-weight: 650; text-align: center; appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .mini-stepper input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.quick-field--kitchen { margin-top: 18px; }
.range-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.range-pair .range-field { margin-top: 18px; }
.check-card { border-color: #dce4e2; background: #f7f9f8; }
.priority-picker span { min-height: 42px; align-items: center; padding: 9px 15px; color: var(--color-ink); background: #f7f9f8; }
.priority-picker input:checked + span { color: #fff; border-color: var(--color-brand); background: var(--color-brand); }
.preset-picker { margin-top: 26px; }
.preset-picker > p { font-size: .9rem; font-weight: 600; }
.preset-picker > div { gap: 12px; }
.preset-button { position: relative; min-height: 94px; padding: 16px 40px 14px 16px; border-color: #dce4e2; border-radius: 15px; }
.preset-button::after { position: absolute; top: 16px; right: 15px; width: 18px; height: 18px; border: 1px solid #cbd7d5; border-radius: 50%; content: ""; }
.preset-button strong { font-weight: 600; }
.preset-button small { font-size: .72rem; line-height: 1.4; }
.preset-button.is-active { border-color: var(--color-brand); background: var(--color-brand-soft); box-shadow: inset 0 0 0 1px var(--color-brand); }
.preset-button.is-active::after { border: 5px solid var(--color-brand); background: #fff; }
.service-picker { margin-top: 28px; padding-top: 24px; }
.service-picker h2 { font-size: 1.18rem; font-weight: 600; }
.service-picker > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.service-row { min-width: 0; grid-template-columns: 22px minmax(0, 1fr) 86px; gap: 11px; padding: 14px; border-color: #dce4e2; border-radius: 14px; background: #fff; }
.service-row:has(> input[type="checkbox"]:checked) { border-color: rgb(10 143 157 / 48%); background: rgb(223 245 243 / 42%); }
.service-row > input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-brand); }
.service-row__copy strong { overflow: visible; font-size: .82rem; font-weight: 600; line-height: 1.3; white-space: normal; }
.service-row__copy small { margin-top: 4px; overflow: visible; color: #788991; font-size: .65rem; text-overflow: clip; white-space: normal; }
.service-row__quantity { display: grid; gap: 5px; justify-items: stretch; }
.service-row__quantity small { overflow: hidden; color: #788991; font-size: .6rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.service-row .service-row__quantity input[type="number"] { width: 100%; min-height: 34px; padding: 4px; border: 0; background: transparent; text-align: center; }
.service-row__quantity { min-width: 120px; }
.service-row { grid-template-columns: 22px minmax(0, 1fr) 132px; }
.mini-stepper { grid-template-columns: 34px minmax(32px, 1fr) 34px; }
.mini-stepper button { width: 34px; height: 34px; border-radius: 9px; font-size: 1rem; }
.quote-panel { top: calc(var(--header-height) + 18px); padding: 26px; border: 1px solid #dce4e2; border-radius: 20px; color: var(--color-ink); background: #fff; box-shadow: 0 16px 42px rgb(8 24 39 / 9%); }
.quote-panel .eyebrow { margin-bottom: 10px; color: var(--color-brand-dark); }
.quote-panel h2 { margin-bottom: 8px; color: var(--color-ink); font-size: 1.55rem; font-weight: 600; }
.quote-panel > p:not(.eyebrow):not(.quote-panel__note) { color: var(--color-muted); font-size: .82rem; }
.quote-panel__facts { margin: 20px 0; }
.quote-panel__facts div { border-color: #e3e9e7; }
.quote-panel__facts dt { color: var(--color-muted); }
.quote-panel__facts dd { color: var(--color-ink); font-weight: 600; }
.quote-result { border-color: rgb(10 143 157 / 25%); background: var(--color-brand-soft); }
.quote-result small { color: var(--color-brand-dark); }
.quote-result strong { color: var(--color-ink); font-size: 2rem; font-weight: 600; }
.quote-result span, .quote-result p { color: var(--color-muted); }
.quote-result [data-quote-expiry] { color: var(--color-brand-dark); }
.quote-panel__submit { min-height: 52px; }
.quote-panel__submit + .quote-panel__submit { margin-top: 0; }
.quote-panel__submit[hidden] { display: none !important; }
.quote-panel__live-status { min-height: 34px; margin: 0 0 10px; color: var(--color-brand-dark); font-size: .7rem; line-height: 1.45; }
.quote-panel__note { color: #7a898f; line-height: 1.45; }

@media (max-width: 1080px) {
    .booking-layout { grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; }
    .field-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .service-picker > div:last-child { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .booking-hero__inner, .booking-layout { grid-template-columns: 1fr; }
    .booking-hero__inner { gap: 24px; }
    .booking-progress { justify-content: flex-start; }
    .quote-panel { position: static; }
    .service-picker > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .booking-hero { padding: 28px 0 24px; }
    .booking-hero h1 { font-size: clamp(2rem, 10vw, 2.7rem); }
    .booking-hero p:not(.eyebrow) { font-size: .88rem; }
    .booking-progress { width: 100%; justify-content: space-between; }
    .booking-progress li { min-width: auto; grid-template-columns: 30px; }
    .booking-progress strong { display: none; }
    .booking-block { padding: 22px 17px; }
    .field-grid--compact, .service-picker > div:last-child { grid-template-columns: 1fr; }
    .choice-chips--layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .choice-chips--condition, .stepper-grid, .range-pair { grid-template-columns: 1fr; }
    .choice-chips label > span { min-height: 56px; }
    .postal-field { max-width: none; }
    .mode-choice__body { min-height: 122px; }
    .service-row { grid-template-columns: 22px minmax(0, 1fr); }
    .service-row__quantity { grid-column: 2; min-width: 0; }
    .service-row .service-row__quantity input[type="number"] { grid-column: auto; }
    .quote-panel { padding: 22px 18px; }
}