/* =========================================================================
   FREE DESIGN CONSULTATION — booking launcher + 4-step wizard.
   Uses the design-system tokens (--u-*) with literal fallbacks so it still
   renders correctly if an older uptiles-ds.css is cached on the server.
   Mobile-first: the modal is a full-screen sheet below 768px.
   ========================================================================= */

/* ---------- launcher (bottom right) ----------
   The wrapper owns the fixed position so the dismiss "x" can be absolutely
   placed, centred on the prompt's top-right corner. */
.ub-launcher-wrap {
    position: fixed; right: 20px; bottom: 20px; z-index: 9998;
    max-width: min(320px, calc(100vw - 40px));
    opacity: 0; transform: translateY(14px);
    transition: opacity .3s ease, transform .3s ease;
}
.ub-launcher-wrap.is-in { opacity: 1; transform: none; }
.ub-launcher-wrap[hidden] { display: none; }

.ub-launcher {
    position: relative; width: 100%;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px 12px 14px; margin: 0;
    border: 1px solid var(--u-onyx, #121212) !important;
    background: var(--u-onyx, #121212) !important; color: #fff !important;
    border-radius: 0 !important; box-shadow: 0 10px 34px rgba(0,0,0,.24);
    cursor: pointer; text-align: left; -webkit-appearance: none; appearance: none;
    font-family: var(--u-font, "Helvetica Neue", Helvetica, Arial, sans-serif);
    transition: background .3s ease, color .3s ease;
}
.ub-launcher:hover { background: #fff !important; color: var(--u-onyx, #121212) !important; }
.ub-launcher__icon { flex: 0 0 auto; display: inline-flex; }
.ub-launcher__icon svg { width: 24px; height: 24px; display: block; }
.ub-launcher__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ub-launcher__title {
    font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.25;
    overflow-wrap: anywhere; /* never let the long label overflow its box */
}
.ub-launcher__sub { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .72; }

/* Dismiss "x" — centred exactly on the prompt's top-right corner. */
.ub-launcher__close {
    position: absolute; top: 0; right: 0; z-index: 2;
    transform: translate(50%, -50%);
    width: 26px; height: 26px; padding: 0; line-height: 24px; text-align: center;
    border: 1px solid rgba(0,0,0,.12) !important; background: #fff !important;
    color: var(--u-slate, #6E6E6E) !important; border-radius: 50% !important;
    cursor: pointer; font-size: 17px; box-shadow: 0 2px 10px rgba(0,0,0,.22);
    -webkit-appearance: none; appearance: none;
    display: flex; align-items: center; justify-content: center;
    transition: color .25s ease, background .25s ease;
}
.ub-launcher__close:hover { color: #fff !important; background: var(--u-onyx, #121212) !important; }

@media (max-width: 600px) {
    .ub-launcher-wrap { right: 12px; left: 12px; bottom: 12px; max-width: none; }
    .ub-launcher { justify-content: center; }
}

/* ---------- modal shell ---------- */
body.ub-lock { overflow: hidden; }

.ub-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; }
.ub-modal[hidden] { display: none; }
.ub-modal__backdrop { position: absolute; inset: 0; background: rgba(12,12,12,.55); backdrop-filter: blur(2px); }
.ub-modal__panel {
    position: relative; z-index: 1; width: min(680px, calc(100vw - 32px));
    max-height: min(90vh, 860px); display: flex; flex-direction: column;
    background: var(--u-white, #fff); box-shadow: 0 30px 80px rgba(0,0,0,.35);
    font-family: var(--u-font, "Helvetica Neue", Helvetica, Arial, sans-serif);
    animation: ub-in .28s ease both;
}
@keyframes ub-in { from { opacity: 0; transform: translateY(18px) scale(.99); } to { opacity: 1; transform: none; } }

.ub-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 22px 24px 14px; border-bottom: 1px solid var(--u-fog, #E6E6E4);
}
.ub-eyebrow {
    margin: 0 0 6px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--u-slate, #6E6E6E) !important;
}
.ub-title {
    margin: 0; font-size: clamp(19px, 2.4vw, 24px); font-weight: 700; line-height: 1.15;
    color: var(--u-onyx, #121212) !important; text-transform: none;
}
.ub-close {
    flex: 0 0 auto; width: 34px; height: 34px; padding: 0; line-height: 32px;
    border: 1px solid var(--u-fog, #E6E6E4) !important; background: transparent !important;
    color: var(--u-onyx, #121212) !important; font-size: 22px; cursor: pointer;
    border-radius: 0 !important; -webkit-appearance: none; appearance: none;
    transition: background .25s ease, color .25s ease;
}
.ub-close:hover { background: var(--u-onyx, #121212) !important; color: #fff !important; }

/* ---------- step rail ---------- */
.ub-steps { display: flex; gap: 6px; padding: 14px 24px 0; }
.ub-step { flex: 1 1 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ub-step i {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; font-style: normal;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; background: var(--u-fog, #E6E6E4); color: var(--u-slate, #6E6E6E);
    transition: background .25s ease, color .25s ease;
}
.ub-step b {
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
    color: var(--u-slate, #6E6E6E); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ub-step.is-on i { background: var(--u-onyx, #121212); color: #fff; }
.ub-step.is-on b { color: var(--u-onyx, #121212); }
.ub-step.is-done i { background: var(--u-silver, #CBCBCB); color: #fff; }
@media (max-width: 520px) { .ub-step b { display: none; } .ub-steps { gap: 10px; } .ub-step { flex: 0 0 auto; } }

/* ---------- body ---------- */
.ub-body { padding: 18px 24px 4px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; }
.ub-pane { display: block; }
.ub-lead { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--u-slate, #6E6E6E) !important; }

.ub-field { display: block; margin: 0 0 14px; }
.ub-field__label {
    display: block; margin: 0 0 7px; font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; font-weight: 700; color: var(--u-onyx, #121212) !important;
}
.ub-field__label i { color: #b23a2b; font-style: normal; }
.ub-field__label em { font-style: normal; font-weight: 400; letter-spacing: .06em; text-transform: none; color: var(--u-slate, #6E6E6E); }
.ub-mt { margin-top: 20px; }

.ub-field input, .ub-field textarea, .ub-input {
    width: 100%; padding: 11px 12px; font-size: 16px; /* 16px stops iOS zoom-on-focus */
    font-family: inherit; color: var(--u-onyx, #121212) !important;
    background: #fff !important; border: 1px solid var(--u-silver, #CBCBCB) !important;
    border-radius: 0 !important; -webkit-appearance: none; appearance: none;
    transition: border-color .25s ease;
}
.ub-field input:focus, .ub-field textarea:focus, .ub-input:focus {
    outline: none; border-color: var(--u-onyx, #121212) !important;
}
.ub-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .ub-row { grid-template-columns: 1fr; gap: 0; } }

/* ---------- tick box ----------
   Drawn from scratch rather than using the native control, so Chrome's
   auto-dark on mobile can't repaint it into an invisible box. */
.ub-checkline { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.ub-checkbox {
    flex: 0 0 auto; width: 22px; height: 22px; margin: 0; cursor: pointer;
    display: grid; place-content: center;
    background: #fff !important; border: 1px solid var(--u-silver, #CBCBCB) !important;
    border-radius: 0 !important; -webkit-appearance: none; appearance: none;
    transition: background .2s ease, border-color .2s ease;
}
.ub-checkbox::after {
    content: ''; width: 11px; height: 6px; margin-top: -3px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(-45deg) scale(0); transition: transform .15s ease;
}
.ub-checkbox:checked {
    background: var(--u-onyx, #121212) !important; border-color: var(--u-onyx, #121212) !important;
}
.ub-checkbox:checked::after { transform: rotate(-45deg) scale(1); }
.ub-checkbox:focus-visible { outline: 2px solid var(--u-onyx, #121212); outline-offset: 2px; }
.ub-checkline__text {
    font-size: 15px; line-height: 1.4; padding-top: 2px;
    color: var(--u-onyx, #121212) !important;
}

/* ---------- select ----------
   Native arrow removed and redrawn, so the control matches the square inputs
   and keeps true colours under Chrome's mobile auto-dark. .ub-input sets
   `background: #fff !important`, which resets every background longhand, so
   the arrow has to be !important too or it never paints. */
.ub-select {
    padding-right: 38px; cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--u-onyx, #121212) 50%),
        linear-gradient(135deg, var(--u-onyx, #121212) 50%, transparent 50%) !important;
    background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px) !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
    background-color: #fff !important;
}

/* ---------- house plan file ---------- */
.ub-plan { display: block; }
.ub-planadd {
    display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 14px 12px; cursor: pointer; font-size: 14px;
    border: 1px dashed var(--u-silver, #CBCBCB); color: var(--u-slate, #6E6E6E);
    transition: border-color .2s ease, color .2s ease;
}
.ub-planadd:hover { border-color: var(--u-onyx, #121212); color: var(--u-onyx, #121212); }
.ub-planfile {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 12px; border: 1px solid var(--u-silver, #CBCBCB);
    background: #fff;
}
.ub-planfile__name {
    flex: 1 1 auto; min-width: 0; font-size: 14px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--u-onyx, #121212) !important;
}
.ub-planfile__x {
    flex: 0 0 auto; width: 26px; height: 26px; padding: 0; line-height: 22px;
    font-size: 18px; cursor: pointer;
    border: 1px solid var(--u-fog, #E6E6E4) !important; background: #fff !important;
    color: var(--u-onyx, #121212) !important; border-radius: 0 !important;
    -webkit-appearance: none; appearance: none;
}
.ub-planfile__x:hover { background: var(--u-onyx, #121212) !important; color: #fff !important; }

/* ---------- calendar ---------- */
.ub-cal { border: 1px solid var(--u-fog, #E6E6E4); padding: 12px; }
.ub-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ub-cal__label { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--u-onyx, #121212); }
.ub-cal__nav {
    width: 34px; height: 34px; padding: 0; line-height: 30px; font-size: 20px; cursor: pointer;
    border: 1px solid var(--u-fog, #E6E6E4) !important; background: #fff !important;
    color: var(--u-onyx, #121212) !important; border-radius: 0 !important;
    -webkit-appearance: none; appearance: none; transition: background .2s ease, color .2s ease;
}
.ub-cal__nav:hover:not(:disabled) { background: var(--u-onyx, #121212) !important; color: #fff !important; }
.ub-cal__nav:disabled { opacity: .3; cursor: default; }
.ub-cal__dow, .ub-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ub-cal__dow span {
    text-align: center; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--u-slate, #6E6E6E); padding-bottom: 5px;
}
.ub-day {
    aspect-ratio: 1 / 1; min-height: 38px; padding: 0; cursor: pointer; font-size: 14px;
    border: 1px solid transparent !important; background: var(--u-porcelain, #F4F4F3) !important;
    color: var(--u-onyx, #121212) !important; border-radius: 0 !important;
    -webkit-appearance: none; appearance: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.ub-day:hover:not(:disabled) { background: var(--u-silver, #CBCBCB) !important; }
.ub-day.is-empty { background: transparent !important; cursor: default; pointer-events: none; }
.ub-day.is-off, .ub-day:disabled {
    background: transparent !important; color: var(--u-silver, #CBCBCB) !important;
    cursor: default; text-decoration: line-through;
}
.ub-day.is-today { border-color: var(--u-silver, #CBCBCB) !important; font-weight: 700; }
.ub-day.is-on { background: var(--u-onyx, #121212) !important; color: #fff !important; font-weight: 700; }

/* ---------- time slots ---------- */
.ub-times { margin-top: 18px; }
.ub-times__hint { margin: 0; font-size: 13px; color: var(--u-slate, #6E6E6E) !important; }
.ub-times__title {
    margin: 0 0 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    font-weight: 700; color: var(--u-onyx, #121212) !important;
}
.ub-times__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 7px; }
.ub-slot {
    padding: 10px 6px; font-size: 13px; cursor: pointer; font-family: inherit;
    border: 1px solid var(--u-silver, #CBCBCB) !important; background: #fff !important;
    color: var(--u-onyx, #121212) !important; border-radius: 0 !important;
    -webkit-appearance: none; appearance: none; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ub-slot:hover { border-color: var(--u-onyx, #121212) !important; }
.ub-slot.is-on { background: var(--u-onyx, #121212) !important; color: #fff !important; border-color: var(--u-onyx, #121212) !important; }

/* ---------- chips / radios ---------- */
.ub-chips, .ub-radios { display: flex; flex-wrap: wrap; gap: 7px; }
.ub-chip {
    padding: 9px 14px; font-size: 13px; cursor: pointer; font-family: inherit; line-height: 1.2;
    border: 1px solid var(--u-silver, #CBCBCB) !important; background: #fff !important;
    color: var(--u-onyx, #121212) !important; border-radius: 0 !important;
    -webkit-appearance: none; appearance: none; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ub-chip:hover { border-color: var(--u-onyx, #121212) !important; }
.ub-chip.is-on { background: var(--u-onyx, #121212) !important; color: #fff !important; border-color: var(--u-onyx, #121212) !important; }

/* ---------- palette ---------- */
.ub-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ub-swatch {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 5px;
    cursor: pointer; font-family: inherit;
    border: 1px solid var(--u-fog, #E6E6E4) !important; background: #fff !important;
    border-radius: 0 !important; -webkit-appearance: none; appearance: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
/* True colour under every rendering mode: opt this subtree out of auto/forced
   dark so the tones a customer picks are the tones we receive. The colour
   itself is painted as a gradient image (see the JS) for the same reason. */
.ub-swatch i {
    display: block; width: 100%; height: 34px; border: 1px solid rgba(0,0,0,.08);
    color-scheme: light only;
    forced-color-adjust: none;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ub-swatch span { font-size: 10px; letter-spacing: .04em; text-align: center; color: var(--u-slate, #6E6E6E) !important; line-height: 1.3; }
.ub-swatch:hover { border-color: var(--u-silver, #CBCBCB) !important; }
.ub-swatch.is-on { border-color: var(--u-onyx, #121212) !important; box-shadow: inset 0 0 0 1px var(--u-onyx, #121212); }
.ub-swatch.is-on span { color: var(--u-onyx, #121212) !important; font-weight: 700; }

/* ---------- photos ---------- */
.ub-photos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.ub-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.ub-photos__list { display: flex; flex-wrap: wrap; gap: 8px; }
.ub-photos__add {
    display: inline-flex; align-items: center; justify-content: center;
    width: 84px; height: 84px; cursor: pointer; font-size: 12px;
    border: 1px dashed var(--u-silver, #CBCBCB); color: var(--u-slate, #6E6E6E);
    transition: border-color .2s ease, color .2s ease;
}
.ub-photos__add:hover { border-color: var(--u-onyx, #121212); color: var(--u-onyx, #121212); }
.ub-thumb { position: relative; width: 84px; height: 84px; overflow: hidden; background: var(--u-porcelain, #F4F4F3); }
.ub-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ub-thumb__x {
    position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; padding: 0; line-height: 20px;
    border: 0 !important; background: rgba(0,0,0,.62) !important; color: #fff !important;
    border-radius: 50% !important; cursor: pointer; font-size: 15px;
    -webkit-appearance: none; appearance: none;
}

/* ---------- summary / done ---------- */
.ub-summary { margin-top: 22px; padding: 16px; background: var(--u-porcelain, #F4F4F3); }
.ub-summary h3 {
    margin: 0 0 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 700; color: var(--u-slate, #6E6E6E) !important;
}
.ub-summary__when { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--u-onyx, #121212) !important; }
.ub-summary__meta { margin: 0; font-size: 13px; line-height: 1.6; color: var(--u-slate, #6E6E6E) !important; }

.ub-done { text-align: center; padding: 22px 0 8px; }
.ub-done__tick {
    width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--u-onyx, #121212); color: #fff;
}
.ub-done__tick svg { width: 28px; height: 28px; }
.ub-done h3 { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: var(--u-onyx, #121212) !important; }
.ub-done p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--u-slate, #6E6E6E) !important; }
.ub-done__note { font-size: 13px !important; }

/* ---------- footer ---------- */
.ub-foot {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 24px 20px; border-top: 1px solid var(--u-fog, #E6E6E4);
}
.ub-msg { flex: 1 1 auto; margin: 0; font-size: 13px; min-height: 1em; color: var(--u-slate, #6E6E6E) !important; }
.ub-msg.is-err { color: #b23a2b !important; }
.ub-btn {
    padding: 13px 26px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
    cursor: pointer; font-family: inherit;
    border: 1px solid var(--u-onyx, #121212) !important; background: var(--u-onyx, #121212) !important;
    color: #fff !important; border-radius: 0 !important; -webkit-appearance: none; appearance: none;
    transition: background .25s ease, color .25s ease, transform .2s ease;
}
.ub-btn:hover:not(:disabled) { background: #fff !important; color: var(--u-onyx, #121212) !important; transform: translateY(-1px); }
.ub-btn:disabled { opacity: .55; cursor: default; }
.ub-btn--ghost { background: transparent !important; color: var(--u-onyx, #121212) !important; }
.ub-btn--ghost:hover:not(:disabled) { background: var(--u-onyx, #121212) !important; color: #fff !important; }

/* ---------- mobile: full-screen sheet ---------- */
@media (max-width: 767px) {
    /* 100vh first as a fallback — browsers without dvh support would otherwise
       ignore the height entirely, the panel would grow past the screen and the
       Continue button would sit below the fold, unreachable. */
    .ub-modal__panel { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; }
    .ub-head { padding: 16px 16px 12px; }
    .ub-steps { padding: 12px 16px 0; }
    .ub-body { padding: 16px 16px 4px; }
    .ub-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .ub-btn { flex: 1 1 auto; text-align: center; }
    .ub-msg { order: 3; flex-basis: 100%; }
}

/* The nav row must always be reachable — pin it to the bottom of the panel so
   a long step (e.g. lots of time slots) can never push Continue off-screen. */
.ub-modal__panel .ub-foot {
    position: sticky; bottom: 0; z-index: 2;
    background: var(--u-white, #fff);
    flex: 0 0 auto;
}

/* ---------- inline mode (embedded in a page, e.g. Contact Us) ---------- */
.ub-inline {
    border: 1px solid var(--u-fog, #E6E6E4);
    background: var(--u-white, #fff);
    max-width: 720px; margin: 0 auto;
    font-family: var(--u-font, "Helvetica Neue", Helvetica, Arial, sans-serif);
}
.ub-inline .ub-steps { padding: 18px 24px 0; }
.ub-inline .ub-body  { padding: 18px 24px 4px; overflow: visible; }
.ub-inline .ub-foot  { padding: 14px 24px 20px; position: static; }
@media (max-width: 767px) {
    .ub-inline .ub-steps { padding: 14px 16px 0; }
    .ub-inline .ub-body  { padding: 14px 16px 4px; }
    .ub-inline .ub-foot  { padding: 12px 16px 16px; }
}

/* The $199 value called out in red wherever it appears, so it can't be missed:
   the summary line on the final step, and the eyebrow above both the modal and
   the inline (Contact Us) headings. */
.ub-summary__value { color: #c0281c !important; font-weight: 700; }
.ub-head .ub-eyebrow { color: #c0281c !important; font-weight: 700; }
.u-ranges__head .u-eyebrow--value,
.u-heading .u-eyebrow--value { color: #c0281c !important; font-weight: 700; }

/* Honeypot fields. Positioned off-screen rather than display:none — many bots
   ignore hidden inputs but will fill a field that is merely moved away. */
.ub-hp {
    position: absolute !important; left: -9999px !important; top: auto !important;
    width: 1px !important; height: 1px !important; overflow: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
    .ub-launcher, .ub-modal__panel, .ub-btn { transition: none !important; animation: none !important; }
}