/* =========================================================
   QUICK QUOTE — MODERN VISUAL QUOTE BUILDER
========================================================= */

.quote-page {
    background: #eef2f4;
    color: #17242b;
}

.quote-main {
    overflow: hidden;
}

.quote-hero {
    position: relative;
    min-height: 440px;
    display: flex;
    align-items: center;
    padding: 88px clamp(28px, 7vw, 120px);
    background:
        radial-gradient(circle at 78% 24%, rgba(159, 188, 201, .18), transparent 34%),
        linear-gradient(135deg, #0c171d 0%, #13252e 55%, #0b1419 100%);
    color: #fff;
}

.quote-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: rgba(255,255,255,.12);
}

.quote-hero-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    right: -120px;
    top: -180px;
    border-radius: 50%;
    background: rgba(116, 154, 171, .12);
    filter: blur(30px);
    pointer-events: none;
}

.quote-hero-inner {
    position: relative;
    z-index: 1;
    width: min(860px, 100%);
}

.quote-kicker,
.quote-eyebrow {
    display: inline-block;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .19em;
    font-weight: 700;
    text-transform: uppercase;
}

.quote-kicker {
    color: #b9cbd3;
    margin-bottom: 22px;
}

.quote-hero h1 {
    margin: 0;
    font-size: clamp(52px, 7.2vw, 94px);
    line-height: .94;
    letter-spacing: -.055em;
    font-weight: 500;
}

.quote-hero h1 span {
    display: block;
    color: #9fb2bc;
    font-weight: 400;
}

.quote-hero > *,
.quote-hero-inner > * {
    position: relative;
}

.quote-hero p {
    width: min(650px, 100%);
    margin: 28px 0 0;
    color: rgba(255,255,255,.72);
    font-size: 17px;
    line-height: 1.75;
}

.quote-hero-note {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-top: 28px;
    color: rgba(255,255,255,.82);
    font-size: 13px;
}

.quote-hero-note-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
    color: #dfe9ed;
}

.quote-builder-shell {
    width: min(1440px, calc(100% - 42px));
    margin: 64px auto 90px;
    display: grid;
    grid-template-columns: 255px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.quote-progress-panel {
    position: sticky;
    top: 24px;
    padding: 28px 24px;
    border: 1px solid #d8e0e4;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(15px);
    box-shadow: 0 18px 50px rgba(26, 43, 53, .08);
}

.quote-progress-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.quote-progress-top span {
    font-size: 10px;
    letter-spacing: .17em;
    font-weight: 700;
    color: #70818a;
}

.quote-progress-top strong {
    font-size: 13px;
}

.quote-progress-track {
    height: 2px;
    margin: 16px 0 26px;
    background: #dde4e7;
    overflow: hidden;
}

.quote-progress-track span {
    display: block;
    width: 14.285%;
    height: 100%;
    background: #1e313b;
    transition: width .4s ease;
}

.quote-progress-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.quote-progress-list li {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    color: #98a5ab;
    border-bottom: 1px solid #edf0f2;
    transition: color .3s ease;
}

.quote-progress-list li b {
    font-size: 10px;
    letter-spacing: .1em;
}

.quote-progress-list li span {
    font-size: 13px;
}

.quote-progress-list li.active,
.quote-progress-list li.done {
    color: #15242c;
}

.quote-progress-list li.active span {
    font-weight: 700;
}

.quote-progress-list li.done b::after {
    content: " ✓";
}

.quote-progress-help {
    margin-top: 24px;
    padding-top: 20px;
}

.quote-progress-help span {
    font-size: 11px;
    letter-spacing: .12em;
    font-weight: 700;
    color: #63757e;
}

.quote-progress-help p {
    margin: 8px 0 0;
    color: #87959b;
    font-size: 12px;
    line-height: 1.6;
}

.quote-builder {
    min-width: 0;
    padding: clamp(28px, 4vw, 58px);
    background: rgba(255,255,255,.9);
    border: 1px solid #d9e1e5;
    box-shadow: 0 25px 70px rgba(27, 44, 54, .10);
}

.quote-step {
    display: none;
    animation: quoteStepIn .45s ease both;
}

.quote-step.active {
    display: block;
}

@keyframes quoteStepIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quote-step-head {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 22px;
    align-items: start;
    margin-bottom: 38px;
}

.quote-step-number {
    font-size: 11px;
    letter-spacing: .12em;
    color: #819099;
    padding-top: 5px;
}

.quote-eyebrow {
    margin-bottom: 12px;
    color: #6e7f88;
}

.quote-step-head h2 {
    margin: 0;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.02;
    letter-spacing: -.04em;
    font-weight: 500;
}

.quote-step-head p {
    margin: 13px 0 0;
    max-width: 670px;
    color: #74838a;
    font-size: 15px;
    line-height: 1.7;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.choice-card {
    position: relative;
    min-height: 170px;
    padding: 25px 22px;
    border: 1px solid #dbe2e5;
    background: #f8fafb;
    cursor: pointer;
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.choice-card:hover {
    transform: translateY(-4px);
    border-color: #b8c6cc;
    box-shadow: 0 16px 34px rgba(32, 50, 60, .08);
}

.choice-card input,
.surface-card input,
.layout-choice input,
.pill-options input,
.yes-no-row input,
.check-card input,
.service-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-card:has(input:checked) {
    background: #17272f;
    border-color: #17272f;
    color: #fff;
    box-shadow: 0 20px 44px rgba(20, 38, 47, .20);
}

.choice-card:has(input:checked) small {
    color: rgba(255,255,255,.62);
}

.choice-icon {
    display: block;
    margin-bottom: 24px;
    font-size: 28px;
    color: #79909b;
}

.choice-card strong {
    display: block;
    margin-bottom: 7px;
    font-size: 16px;
}

.choice-card small {
    display: block;
    color: #859399;
    font-size: 12px;
    line-height: 1.55;
}

.quote-inline-option {
    margin-top: 24px;
    padding: 18px 20px;
    background: #f1f5f6;
    border: 1px solid #dce5e8;
}

.toggle-row {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
}

.toggle-row input {
    position: absolute;
    opacity: 0;
}

.toggle-ui {
    position: relative;
    flex: 0 0 auto;
    width: 43px;
    height: 24px;
    border-radius: 999px;
    background: #cbd5d9;
    transition: background .25s ease;
}

.toggle-ui::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,.16);
    transition: transform .25s ease;
}

.toggle-row input:checked + .toggle-ui {
    background: #243b46;
}

.toggle-row input:checked + .toggle-ui::after {
    transform: translateX(19px);
}

.toggle-row strong {
    display: block;
    font-size: 13px;
}

.toggle-row small {
    display: block;
    margin-top: 3px;
    color: #849198;
    font-size: 11px;
}

.toggle-row.compact {
    margin-top: 18px;
}

.surface-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.surface-card {
    position: relative;
    min-height: 250px;
    display: flex;
    align-items: end;
    padding: 26px;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    color: #fff;
    border: 1px solid transparent;
    background-color: #22343d;
    box-shadow: 0 18px 40px rgba(20, 36, 45, .13);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.surface-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(to top, rgba(9,18,23,.92), rgba(9,18,23,.12)),
        radial-gradient(circle at 25% 20%, rgba(255,255,255,.28), transparent 28%),
        linear-gradient(135deg, #77858d, #d6dbdd 52%, #5d6a71);
    transition: transform .6s ease;
}

.surface-quartz::before {
    background:
        linear-gradient(to top, rgba(9,18,23,.90), rgba(9,18,23,.08)),
        linear-gradient(120deg, #e5e9ea 0%, #a8b3b8 32%, #f5f6f6 58%, #7c898f 100%);
}

.surface-marble::before {
    background:
        linear-gradient(to top, rgba(9,18,23,.90), rgba(9,18,23,.10)),
        linear-gradient(145deg, #dbd9d4, #82807c 30%, #ece8e1 48%, #5b5b5c 61%, #d9d5ce);
}

.surface-granite::before {
    background:
        linear-gradient(to top, rgba(9,18,23,.90), rgba(9,18,23,.08)),
        radial-gradient(circle at 30% 25%, #6b7174 0 2px, transparent 3px),
        radial-gradient(circle at 65% 45%, #b4b8b9 0 2px, transparent 3px),
        linear-gradient(135deg, #30383c, #7d8588 45%, #252d31);
    background-size: auto, 24px 24px, 30px 30px, auto;
}

.surface-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 52px rgba(20, 36, 45, .20);
}

.surface-card:hover::before {
    transform: scale(1.035);
}

.surface-card:has(input:checked) {
    border-color: #fff;
    outline: 3px solid #20343e;
    outline-offset: 3px;
}

.surface-text {
    position: relative;
    z-index: 1;
}

.surface-text small {
    display: block;
    margin-bottom: 8px;
    font-size: 9px;
    letter-spacing: .16em;
}

.surface-text strong {
    display: block;
    font-size: 29px;
    font-weight: 500;
    letter-spacing: -.03em;
}

.surface-text em {
    display: block;
    margin-top: 7px;
    color: rgba(255,255,255,.68);
    font-size: 11px;
    font-style: normal;
}

.surface-preference-card,
.contact-panel {
    margin-top: 28px;
    padding: 27px;
    border: 1px solid #dde4e7;
    background: #f8fafb;
}

.surface-preference-card h3 {
    margin: 4px 0 22px;
    font-size: 23px;
    font-weight: 500;
    letter-spacing: -.02em;
}

.field-grid {
    display: grid;
    gap: 16px;
}

.field-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field {
    display: block;
}

.field > span {
    display: block;
    margin-bottom: 8px;
    color: #4d5f68;
    font-size: 12px;
    font-weight: 600;
}

.field > span small {
    color: #9aa6ab;
    font-weight: 400;
}

.field input,
.field select,
.field textarea,
.unit-field {
    width: 100%;
    border: 1px solid #d5dee2;
    background: #fff;
    color: #1d2c34;
    border-radius: 0;
    outline: 0;
    font: inherit;
}

.field input,
.field select {
    height: 48px;
    padding: 0 14px;
}

.field textarea {
    resize: vertical;
    padding: 14px;
    line-height: 1.6;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.unit-field:focus-within {
    border-color: #738b96;
    box-shadow: 0 0 0 3px rgba(102, 132, 146, .10);
}

.field-medium {
    max-width: 340px;
}

.unit-field {
    display: flex;
    align-items: center;
}

.unit-field input {
    min-width: 0;
    border: 0;
    box-shadow: none !important;
}

.unit-field span {
    padding: 0 13px;
    color: #849198;
    font-size: 11px;
}

.top-gap {
    margin-top: 20px;
}

.planner-mode-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 25px;
}

.planner-mode {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 17px 18px;
    border: 1px solid #d8e0e4;
    background: #f8fafb;
    color: #596b74;
    cursor: pointer;
    text-align: left;
    transition: .3s ease;
}

.planner-mode span {
    font-size: 13px;
    font-weight: 700;
}

.planner-mode small {
    color: #98a4a9;
    font-size: 11px;
}

.planner-mode.active {
    background: #17272f;
    border-color: #17272f;
    color: #fff;
}

.planner-mode.active small {
    color: rgba(255,255,255,.55);
}

.layout-picker {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}

.layout-choice {
    min-width: 0;
    padding: 13px 8px 12px;
    border: 1px solid #dce3e6;
    background: #fff;
    color: #61737c;
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease, color .25s ease;
}

.layout-choice svg {
    display: block;
    width: 100%;
    max-width: 92px;
    height: 56px;
    margin: 0 auto 5px;
    fill: none;
    stroke: currentColor;
    stroke-width: 6;
    stroke-linejoin: round;
}

.layout-choice svg path {
    fill: currentColor;
    stroke: none;
}

.layout-choice span {
    font-size: 11px;
    font-weight: 700;
}

.layout-choice:hover,
.layout-choice.active {
    border-color: #233842;
    color: #1b303a;
    background: #eef3f5;
}

.worktop-pieces {
    display: grid;
    gap: 20px;
}

.worktop-piece {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 1.2fr) minmax(230px, .8fr);
    gap: 25px;
    padding: 24px;
    border: 1px solid #dbe3e6;
    background: linear-gradient(135deg, #f8fafb, #eef3f5);
}

.worktop-piece-head {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.worktop-piece-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.worktop-piece-title span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #1c303a;
    color: #fff;
    font-size: 10px;
}

.worktop-piece-title strong {
    font-size: 14px;
}

.remove-piece {
    border: 0;
    background: transparent;
    color: #9b6b6b;
    cursor: pointer;
    font-size: 11px;
}

.measurement-canvas {
    position: relative;
    min-height: 330px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(rgba(61, 83, 94, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(61, 83, 94, .055) 1px, transparent 1px),
        #f9fbfc;
    background-size: 20px 20px;
    border: 1px solid #d8e1e4;
}

.measurement-svg {
    width: 92%;
    height: 300px;
}

.measurement-svg .top {
    fill: #dfe7ea;
    stroke: #304955;
    stroke-width: 2;
}

.measurement-svg .dimension-line {
    stroke: #718892;
    stroke-width: 1.4;
}

.measurement-svg .dimension-guide {
    stroke: #a7b6bc;
    stroke-width: 1;
    stroke-dasharray: 3 4;
}

.measurement-svg .dimension-text {
    fill: #3a525e;
    font-size: 11px;
    font-family: Arial, sans-serif;
    font-weight: 700;
}

.measurement-svg .zone-label {
    fill: #87989f;
    font-size: 9px;
    font-family: Arial, sans-serif;
    letter-spacing: 1px;
}

.measurement-fields {
    display: grid;
    gap: 11px;
    align-content: start;
}

.measurement-fields-head {
    margin-bottom: 4px;
}

.measurement-fields-head span {
    display: block;
    margin-bottom: 5px;
    color: #89989e;
    font-size: 10px;
    letter-spacing: .13em;
    font-weight: 700;
}

.measurement-fields-head strong {
    font-size: 17px;
    font-weight: 500;
}

.measurement-row {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 9px;
    align-items: center;
}

.measurement-letter {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #bfcdd3;
    background: #fff;
    color: #425b66;
    font-size: 11px;
    font-weight: 800;
}

.measurement-input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #cfdadd;
    background: #fff;
}

.measurement-input-wrap input {
    min-width: 0;
    width: 100%;
    height: 42px;
    padding: 0 11px;
    border: 0;
    outline: 0;
    background: transparent;
}

.measurement-input-wrap span {
    padding: 0 11px;
    color: #89969c;
    font-size: 10px;
}

.measurement-help {
    margin: 5px 0 0;
    color: #8b989d;
    font-size: 10px;
    line-height: 1.5;
}

.add-piece-btn {
    width: 100%;
    margin-top: 16px;
    padding: 15px;
    border: 1px dashed #aebdc3;
    background: transparent;
    color: #4f6570;
    cursor: pointer;
    transition: .25s ease;
}

.add-piece-btn:hover {
    border-color: #415c68;
    background: #f4f7f8;
}

.plan-skip-panel {
    padding: 50px 25px;
    text-align: center;
    border: 1px dashed #b8c6cc;
    background: #f5f8f9;
}

.plan-skip-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #203640;
    color: #fff;
    font-size: 24px;
}

.plan-skip-panel h3 {
    margin: 0;
    font-size: 25px;
    font-weight: 500;
}

.plan-skip-panel p {
    max-width: 520px;
    margin: 10px auto 0;
    color: #7d8c93;
    font-size: 13px;
    line-height: 1.65;
}

.details-block {
    padding: 25px 0;
    border-top: 1px solid #e2e7e9;
}

.details-block:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.details-block-head {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    margin-bottom: 19px;
}

.details-block-head > span {
    color: #96a3a8;
    font-size: 10px;
    letter-spacing: .1em;
}

.details-block-head h3 {
    margin: 0;
    font-size: 21px;
    font-weight: 500;
}

.details-block-head p {
    margin: 4px 0 0;
    color: #87959b;
    font-size: 12px;
}

.pill-options,
.yes-no-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pill-options label,
.yes-no-row label {
    position: relative;
    cursor: pointer;
}

.pill-options span,
.yes-no-row span {
    display: block;
    padding: 12px 17px;
    border: 1px solid #d5dee2;
    background: #f8fafb;
    color: #596b74;
    font-size: 12px;
    transition: .25s ease;
}

.pill-options label:has(input:checked) span,
.yes-no-row label:has(input:checked) span {
    border-color: #203640;
    background: #203640;
    color: #fff;
}

.conditional-panel {
    margin-top: 17px;
    padding: 18px;
    background: #f4f7f8;
    border-left: 2px solid #6f8995;
}

.extras-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.check-card {
    position: relative;
    cursor: pointer;
}

.check-card span {
    display: block;
    padding: 14px 12px;
    border: 1px solid #d8e0e4;
    background: #f8fafb;
    font-size: 12px;
    text-align: center;
    transition: .25s ease;
}

.check-card:has(input:checked) span {
    border-color: #243943;
    background: #243943;
    color: #fff;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 11px;
}

.service-card {
    position: relative;
    min-height: 125px;
    padding: 18px;
    border: 1px solid #d7e0e3;
    background: #f8fafb;
    cursor: pointer;
    transition: .25s ease;
}

.service-card strong {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
}

.service-card small {
    color: #88979d;
    font-size: 11px;
    line-height: 1.55;
}

.service-card:has(input:checked) {
    background: #1b303a;
    border-color: #1b303a;
    color: #fff;
}

.service-card:has(input:checked) small {
    color: rgba(255,255,255,.60);
}

.upload-zone {
    min-height: 280px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 30px;
    border: 1px dashed #aebdc4;
    background:
        linear-gradient(rgba(69, 95, 107, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(69, 95, 107, .04) 1px, transparent 1px),
        #f7fafb;
    background-size: 20px 20px;
    cursor: pointer;
    text-align: center;
    transition: border-color .25s ease, background .25s ease;
}

.upload-zone:hover,
.upload-zone.dragover {
    border-color: #46626e;
    background-color: #eef4f6;
}

.upload-zone input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.upload-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: #1d323c;
    color: #fff;
    font-size: 26px;
}

.upload-zone strong {
    font-size: 16px;
}

.upload-zone small {
    color: #7c8c93;
    font-size: 11px;
    letter-spacing: .07em;
}

.upload-zone em {
    max-width: 520px;
    color: #a0aaae;
    font-size: 10px;
    line-height: 1.5;
    font-style: normal;
}

.file-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.file-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid #dbe2e5;
    background: #fff;
    color: #53666f;
    font-size: 11px;
}

.file-pill b {
    color: #88979d;
    font-weight: 500;
}

.consent-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #74848b;
    font-size: 11px;
    line-height: 1.55;
}

.quote-summary {
    display: grid;
    gap: 12px;
}

.summary-section {
    padding: 22px;
    border: 1px solid #dce3e6;
    background: #f8fafb;
}

.summary-section-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.summary-section-head span {
    color: #8b999f;
    font-size: 9px;
    letter-spacing: .13em;
    font-weight: 700;
}

.summary-section h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px 18px;
}

.summary-item {
    padding-top: 9px;
    border-top: 1px solid #e4e9eb;
}

.summary-item small {
    display: block;
    margin-bottom: 3px;
    color: #96a2a7;
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.summary-item strong {
    color: #364c57;
    font-size: 12px;
    font-weight: 600;
}

.submit-note {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 16px;
    background: #eef4f6;
    color: #6d7d84;
    font-size: 11px;
    line-height: 1.55;
}

.submit-note p {
    margin: 0;
}

.send-quote-btn {
    width: 100%;
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 16px;
    padding: 0 24px;
    border: 0;
    background: #152832;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.send-quote-btn:hover {
    transform: translateY(-2px);
    background: #203a46;
    box-shadow: 0 16px 34px rgba(19, 39, 49, .20);
}

.send-quote-btn b {
    font-size: 18px;
}

.demo-message {
    margin-top: 15px;
    padding: 16px;
    border: 1px solid #b7ccc2;
    background: #f1f8f4;
    color: #48685a;
}

.demo-message strong,
.demo-message span {
    display: block;
}

.demo-message span {
    margin-top: 4px;
    font-size: 11px;
}

.quote-navigation {
    position: sticky;
    bottom: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 42px calc(clamp(28px, 4vw, 58px) * -1) calc(clamp(28px, 4vw, 58px) * -1);
    padding: 16px clamp(28px, 4vw, 58px);
    border-top: 1px solid #dde4e7;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
}

.quote-nav-back,
.quote-nav-next {
    min-height: 46px;
    border: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.quote-nav-back {
    padding: 0 8px;
    background: transparent;
    color: #687a83;
}

.quote-nav-back:disabled {
    opacity: .35;
    cursor: default;
}

.quote-nav-next {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 19px;
    background: #1a2f39;
    color: #fff;
}

.quote-nav-next:hover {
    background: #284653;
}

.quote-mobile-progress {
    display: none;
    color: #85939a;
    font-size: 10px;
}

@media (max-width: 1100px) {
    .quote-builder-shell {
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 20px;
    }

    .choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .surface-grid {
        grid-template-columns: 1fr;
    }

    .surface-card {
        min-height: 190px;
    }

    .worktop-piece {
        grid-template-columns: 1fr;
    }

    .measurement-canvas {
        min-height: 300px;
    }

    .service-grid,
    .extras-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 820px) {
    .quote-hero {
        min-height: 390px;
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .quote-builder-shell {
        width: min(100% - 24px, 760px);
        display: block;
        margin-top: 30px;
    }

    .quote-progress-panel {
        position: static;
        padding: 16px;
        margin-bottom: 12px;
    }

    .quote-progress-list,
    .quote-progress-help {
        display: none;
    }

    .quote-progress-track {
        margin-bottom: 0;
    }

    .quote-builder {
        padding: 28px 20px;
    }

    .quote-step-head {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .quote-step-number {
        padding: 0;
    }

    .layout-picker {
        grid-template-columns: repeat(3, 1fr);
    }

    .quote-navigation {
        margin-left: -20px;
        margin-right: -20px;
        margin-bottom: -28px;
        padding: 13px 16px;
    }

    .quote-mobile-progress {
        display: block;
    }
}

@media (max-width: 620px) {
    .quote-hero h1 {
        font-size: clamp(44px, 14vw, 66px);
    }

    .quote-hero p {
        font-size: 14px;
    }

    .choice-grid,
    .field-grid.two,
    .field-grid.three,
    .service-grid,
    .extras-grid,
    .planner-mode-row,
    .summary-grid {
        grid-template-columns: 1fr;
    }

    .choice-card {
        min-height: 138px;
    }

    .layout-picker {
        grid-template-columns: repeat(2, 1fr);
    }

    .worktop-piece {
        padding: 17px;
    }

    .measurement-canvas {
        min-height: 250px;
    }

    .measurement-svg {
        height: 240px;
    }

    .quote-nav-next {
        min-width: 130px;
        justify-content: center;
    }

    .quote-nav-back {
        min-width: 60px;
    }
}


/* =========================================================
   QUICK QUOTE V2 — COMPACT + VISUAL UPGRADES
========================================================= */
.quote-hero{min-height:280px;padding:48px clamp(28px,7vw,120px)}
.quote-hero h1{font-size:clamp(42px,5.3vw,70px)}
.quote-hero p{margin-top:18px;font-size:15px;line-height:1.6}.quote-hero-note{margin-top:18px}
.quote-builder-shell{margin-top:28px;margin-bottom:60px}.quote-step{padding-top:34px;padding-bottom:34px}.quote-step-head{margin-bottom:26px}
.visual-choice-card{min-height:150px;padding:0;overflow:hidden;background:#22333c;color:#fff;isolation:isolate}
.visual-choice-card::before{content:"";position:absolute;inset:0;background:var(--card-image),linear-gradient(135deg,#71818a,#273941);background-size:cover;background-position:center;transition:transform .55s ease;z-index:-2}
.visual-choice-card::after,.visual-extra-card::after{content:"";position:absolute;inset:-30% auto -30% -55%;width:30%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transition:left .6s ease;z-index:3;pointer-events:none}
.visual-choice-card:hover::before{transform:scale(1.07)}.visual-choice-card:hover::after,.visual-extra-card:hover::after{left:125%}
.choice-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,17,22,.92),rgba(8,17,22,.05) 70%)}
.choice-card-copy{position:absolute;left:18px;right:18px;bottom:17px;z-index:2}.visual-choice-card small{color:rgba(255,255,255,.72)}
.surface-card::before{background:linear-gradient(to top,rgba(9,18,23,.92),rgba(9,18,23,.08)),var(--surface-image),linear-gradient(135deg,#76858d,#d5dcdf);background-size:cover;background-position:center}
.surface-quartz::before,.surface-marble::before,.surface-granite::before{background:linear-gradient(to top,rgba(9,18,23,.90),rgba(9,18,23,.08)),var(--surface-image),linear-gradient(135deg,#76858d,#d5dcdf);background-size:cover;background-position:center}
.smart-surface-grid{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:18px;align-items:stretch}.smart-surface-fields{display:grid;gap:14px}.surface-picker-note{color:#71828a;font-size:12px}.surface-product-preview{min-height:170px;position:relative;overflow:hidden;background:#e7edef;border:1px solid #d8e1e4}.surface-product-preview img{width:100%;height:125px;object-fit:cover;display:block}.surface-product-preview div{padding:10px 12px}.surface-product-preview small,.surface-product-preview strong{display:block}.surface-product-preview small{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#71828a}.surface-product-preview strong{font-size:13px;margin-top:3px}
.new-piece-chooser{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:15px;background:#edf2f4;border:1px solid #d7e1e5}.new-piece-chooser span{width:100%;text-align:center;font-size:11px;color:#65777f}.new-piece-chooser button{border:1px solid #cbd7dc;background:#fff;padding:10px 15px;cursor:pointer}.new-piece-chooser button:hover{background:#213640;color:#fff}
.visual-extras-grid{grid-template-columns:repeat(3,1fr);gap:12px}.visual-extra-card{min-height:135px;overflow:hidden;background:#263942;position:relative}.visual-extra-card span{height:100%;min-height:135px;display:flex;align-items:flex-end;justify-content:flex-start;padding:16px;color:#fff;text-align:left;background:linear-gradient(to top,rgba(8,17,22,.92),rgba(8,17,22,.10)),var(--extra-image),linear-gradient(135deg,#829097,#293b43);background-size:cover;background-position:center;transition:transform .4s ease}.visual-extra-card:hover span{transform:scale(1.035)}.visual-extra-card:has(input:checked){outline:3px solid #2a4551;outline-offset:2px}.visual-extra-card:has(input:checked) span{background:linear-gradient(to top,rgba(15,43,55,.94),rgba(15,43,55,.18)),var(--extra-image),linear-gradient(135deg,#829097,#293b43);background-size:cover;background-position:center}
.edge-profile-section{padding-top:6px}.edge-profile-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:12px}.edge-profile-card{position:relative;cursor:pointer;border:1px solid #d7e0e3;background:#f8fafb;padding:12px;text-align:center}.edge-profile-card input{position:absolute;opacity:0}.edge-profile-card:has(input:checked){border-color:#223a45;box-shadow:inset 0 0 0 2px #223a45}.edge-profile-card b{display:block;font-size:10px;margin-top:8px}.edge-sketch{display:block;height:45px;margin:auto;position:relative;border-bottom:12px solid #71858e}.edge-bevel{clip-path:polygon(0 0,88% 0,100% 35%,100% 100%,0 100%)}.edge-pencil{border-radius:0 0 14px 0}.edge-mitred{border-bottom-width:20px}.edge-unsure{border:0;display:grid;place-items:center;font-size:28px;color:#71858e}
.quote-success{padding:70px 24px 90px;background:#eef2f4}.quote-success-inner{max-width:860px;margin:auto;background:#fff;padding:60px;box-shadow:0 24px 70px rgba(24,43,52,.12)}.quote-success-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#203640;color:#fff;margin-bottom:25px}.quote-success h2{font-size:clamp(40px,5vw,66px);line-height:1;letter-spacing:-.04em;margin:14px 0 20px;font-weight:500}.quote-success p{color:#6d7d84;line-height:1.7}.quote-success-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}.quote-success-actions button{padding:14px 18px;border:1px solid #203640;cursor:pointer}.success-primary{background:#203640;color:#fff}.success-secondary{background:#fff;color:#203640}.success-link{background:transparent;border-color:transparent!important;text-decoration:underline}.success-status{margin-top:18px;font-size:12px}
@media(max-width:760px){.quote-hero{min-height:245px;padding-top:38px;padding-bottom:38px}.choice-grid-project,.visual-extras-grid{grid-template-columns:1fr 1fr}.smart-surface-grid{grid-template-columns:1fr}.edge-profile-grid{grid-template-columns:repeat(2,1fr)}.quote-success-inner{padding:34px 22px}}


/* =========================================================
   QUICK QUOTE V3 — REQUESTED FIXES
========================================================= */
[hidden]{display:none!important}

/* Four layout options — equal width and spacing */
.layout-picker{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:12px!important;
}
.layout-choice{width:100%;min-height:112px}

/* Extras: keep the name permanently visible above the image */
.visual-extra-card{
    min-height:160px;
    display:block;
}
.visual-extra-card > span{
    position:relative;
    min-height:160px;
    padding:0!important;
    display:block!important;
    overflow:hidden;
    background:linear-gradient(to top,rgba(8,17,22,.78),rgba(8,17,22,.06)),var(--extra-image),linear-gradient(135deg,#829097,#293b43)!important;
    background-size:cover!important;
    background-position:center!important;
}
.visual-extra-card > span::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(7,15,19,.88) 0%,rgba(7,15,19,.18) 55%,rgba(7,15,19,.05) 100%);
    z-index:1;
}
.visual-extra-card > span b{
    position:absolute;
    z-index:4;
    left:16px;
    right:16px;
    bottom:15px;
    display:block;
    color:#fff!important;
    font-size:14px!important;
    line-height:1.25;
    font-weight:700;
    text-align:left;
    text-shadow:0 2px 10px rgba(0,0,0,.45);
}
.visual-extra-card:hover > span{transform:scale(1.025)}

/* Edge profile: real image slot + name below it, with CSS sketch fallback until images are generated */
.edge-profile-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.edge-profile-card{padding:0 0 12px;overflow:hidden;background:#fff;min-height:132px}
.edge-image{
    height:90px;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    background:var(--edge-image),linear-gradient(135deg,#eef2f3,#dfe6e9);
    background-size:cover;
    background-position:center;
    border-bottom:1px solid #dce4e7;
}
.edge-image::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(23,42,50,.10),transparent 60%);pointer-events:none}
.edge-profile-card b{display:block!important;padding:10px 7px 0;font-size:11px!important;color:#253a44!important;line-height:1.25}
.edge-fallback{display:block;width:74%;height:34px;border-bottom:12px solid #71858e;opacity:.85}
.edge-bevel{clip-path:polygon(0 0,88% 0,100% 35%,100% 100%,0 100%)}
.edge-pencil{border-radius:0 0 15px 0}
.edge-mitred{border-bottom-width:20px}
.edge-question{font-size:32px;font-weight:500;color:#71858e}

/* Continue is visible on steps 1–6 and hidden only on Review (step 7).
   JS controls the hidden attribute in setStep(). */
.quote-nav-next[hidden]{display:none!important}

@media(max-width:760px){
    .layout-picker{grid-template-columns:repeat(2,minmax(0,1fr))!important}
    .edge-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* =========================================================
   QUICK QUOTE V4 — LIGHT STONE BACKGROUND + GOLD SELECTION
========================================================= */
:root{
    --qq-accent:#b98a36;
    --qq-accent-dark:#8e6522;
    --qq-accent-soft:rgba(185,138,54,.14);
}

/* One elegant light-stone image across the complete quote experience */
.quote-page{
    background-color:#f7f4ed!important;
    background-image:url('../images/quote/quote-background.svg')!important;
    background-size:cover!important;
    background-position:center top!important;
    background-repeat:no-repeat!important;
    background-attachment:fixed!important;
}
.quote-main{background:transparent!important}
.quote-builder-shell{position:relative}
.quote-progress-panel,
.quote-builder,
.quote-success-inner{
    background:rgba(255,255,255,.88)!important;
    border-color:rgba(205,198,184,.72)!important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.quote-builder{
    box-shadow:0 24px 70px rgba(52,46,36,.08)!important;
}
.quote-step,
.surface-preference-card,
.details-card,
.contact-panel,
.review-section{
    background:transparent!important;
}
.quote-success{
    background-color:#f7f4ed!important;
    background-image:url('../images/quote/quote-background.svg')!important;
    background-size:cover!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
}

/* Progress uses the same warm accent */
.quote-progress-track span{background:var(--qq-accent)!important}
.quote-progress-list li.active,
.quote-progress-list li.complete{color:#27353b!important}
.quote-progress-list li.active .progress-number,
.quote-progress-list li.complete .progress-number{
    background:var(--qq-accent)!important;
    border-color:var(--qq-accent)!important;
    color:#fff!important;
}

/* Project cards: selection stays photographic; only the gold frame/check appears */
.choice-card:has(input:checked){
    background:transparent!important;
    border-color:var(--qq-accent)!important;
    color:#fff!important;
    outline:2px solid var(--qq-accent)!important;
    outline-offset:2px!important;
    box-shadow:0 18px 42px rgba(126,93,35,.20)!important;
}
.choice-card:has(input:checked) small{color:rgba(255,255,255,.78)!important}
.choice-card:has(input:checked) .choice-card-overlay{
    background:linear-gradient(to top,rgba(8,17,22,.82),rgba(8,17,22,.03) 72%)!important;
}
.choice-card:has(input:checked) .choice-card-overlay::after{
    content:"✓";
    position:absolute;
    top:12px;
    right:12px;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--qq-accent);
    color:#fff;
    font-size:18px;
    font-weight:700;
    box-shadow:0 6px 16px rgba(79,55,19,.28);
}

/* Surface cards: make the actual material image clearly visible */
.surface-card{
    background:#fff!important;
    border-color:rgba(211,204,191,.78)!important;
}
.surface-card::before,
.surface-quartz::before,
.surface-marble::before,
.surface-granite::before{
    background-image:
        linear-gradient(to top,rgba(10,16,19,.72) 0%,rgba(10,16,19,.05) 60%),
        var(--surface-image),
        linear-gradient(135deg,#ece8df,#c9d0d1)!important;
    background-size:cover,cover,cover!important;
    background-position:center,center,center!important;
    background-repeat:no-repeat!important;
}
.surface-card:has(input:checked){
    border-color:var(--qq-accent)!important;
    outline:2px solid var(--qq-accent)!important;
    outline-offset:2px!important;
    box-shadow:0 20px 46px rgba(126,93,35,.20)!important;
}
.surface-card:has(input:checked)::after{
    content:"✓";
    position:absolute;
    top:13px;
    right:13px;
    z-index:5;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--qq-accent);
    color:#fff;
    font-size:19px;
    font-weight:700;
    box-shadow:0 6px 16px rgba(79,55,19,.28);
}

/* Every later selectable card uses the same non-black selection language */
.planner-mode.active,
.layout-choice.active,
.layout-choice:has(input:checked),
.service-card:has(input:checked),
.edge-profile-card:has(input:checked),
.visual-extra-card:has(input:checked){
    border-color:var(--qq-accent)!important;
    outline:2px solid var(--qq-accent)!important;
    outline-offset:2px!important;
    box-shadow:0 10px 28px rgba(126,93,35,.14)!important;
}
.planner-mode.active,
.layout-choice.active,
.layout-choice:has(input:checked),
.service-card:has(input:checked){
    background:#fffaf0!important;
    color:#2d3437!important;
}
.planner-mode.active small,
.service-card:has(input:checked) small{color:#7f7666!important}
.layout-choice.active,
.layout-choice:has(input:checked){color:var(--qq-accent-dark)!important}
.visual-extra-card:has(input:checked) span{
    background:
        linear-gradient(to top,rgba(38,28,13,.70),rgba(38,28,13,.05)),
        var(--extra-image),
        linear-gradient(135deg,#e6ded0,#777)!important;
    background-size:cover!important;
    background-position:center!important;
}
.edge-profile-card:has(input:checked){box-shadow:inset 0 0 0 1px var(--qq-accent),0 10px 28px rgba(126,93,35,.14)!important}

.pill-options label:has(input:checked) span,
.yes-no-row label:has(input:checked) span,
.check-card:not(.visual-extra-card):has(input:checked) span{
    border-color:var(--qq-accent)!important;
    background:#fff8e9!important;
    color:#5e461e!important;
    box-shadow:inset 0 0 0 1px var(--qq-accent)!important;
}
.toggle-row input:checked + .toggle-ui{background:var(--qq-accent)!important}

/* Main action buttons harmonise with the new selection accent */
.quote-next,
.quote-submit,
.success-primary{
    background:#22343d!important;
}
.quote-next:hover,
.quote-submit:hover,
.success-primary:hover{
    background:#17262d!important;
}

/* Keep cards crisp and light on top of the image background */
.quote-inline-option,
.new-piece-chooser,
.worktop-piece,
.conditional-panel,
.upload-zone,
.review-card,
.surface-product-preview{
    background-color:rgba(255,255,255,.88)!important;
}

@media(max-width:760px){
    .quote-page{background-attachment:scroll!important;background-size:auto 1500px!important}
}

/* =========================================================
   QUICK QUOTE V5 — RELIABLE IMAGES + SITE-TONE SELECTION
   No external background file required.
========================================================= */
:root{
    --qq-select:#607784;
    --qq-select-dark:#455d69;
    --qq-select-soft:rgba(96,119,132,.13);
}

/* Beautiful light stone atmosphere across every step — pure CSS, so it cannot fail to load */
.quote-page,
.quote-success{
    background-color:#f3f2ee!important;
    background-image:
        radial-gradient(circle at 10% 8%, rgba(255,255,255,.95) 0 13%, transparent 32%),
        radial-gradient(circle at 88% 16%, rgba(203,213,216,.28) 0 9%, transparent 29%),
        radial-gradient(circle at 80% 82%, rgba(214,205,192,.24) 0 10%, transparent 30%),
        linear-gradient(112deg, transparent 0 36%, rgba(135,145,149,.08) 36.3%, transparent 36.8% 58%, rgba(118,129,135,.07) 58.3%, transparent 58.8%),
        linear-gradient(154deg, transparent 0 49%, rgba(144,132,116,.06) 49.2%, transparent 49.7%),
        linear-gradient(180deg,#f7f7f4 0%,#efefeb 100%)!important;
    background-size:cover!important;
    background-attachment:fixed!important;
}
.quote-main{background:transparent!important}
.quote-progress-panel,
.quote-builder,
.quote-success-inner{
    background:rgba(255,255,255,.91)!important;
    border-color:rgba(194,202,204,.70)!important;
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}

/* Real <img> elements for project cards — avoids CSS url resolution problems */
.visual-choice-card{
    position:relative!important;
    isolation:isolate;
    background:#263842!important;
}
.visual-choice-card::before{display:none!important}
.choice-card-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    z-index:-2;
    transition:transform .55s ease;
}
.visual-choice-card:hover .choice-card-image{transform:scale(1.06)}

/* Real <img> elements for Quartz / Marble / Granite */
.surface-card{
    position:relative!important;
    isolation:isolate;
    background:#263842!important;
}
.surface-card::before,
.surface-quartz::before,
.surface-marble::before,
.surface-granite::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:-1!important;
    background:linear-gradient(to top,rgba(12,22,27,.88) 0%,rgba(12,22,27,.10) 68%)!important;
}
.surface-card-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    z-index:-2;
    transition:transform .55s ease;
}
.surface-card:hover .surface-card-image{transform:scale(1.045)}

/* Selection language: muted blue-grey from the site's visual identity */
.choice-card:has(input:checked),
.surface-card:has(input:checked),
.layout-choice:has(input:checked),
.service-card:has(input:checked),
.edge-profile-card:has(input:checked),
.visual-extra-card:has(input:checked),
.planner-mode.active,
.layout-choice.active{
    border-color:var(--qq-select)!important;
    outline:2px solid var(--qq-select)!important;
    outline-offset:2px!important;
    box-shadow:0 14px 34px rgba(56,77,88,.18)!important;
}
.choice-card:has(input:checked) .choice-card-overlay::after,
.surface-card:has(input:checked)::after{
    background:var(--qq-select)!important;
    color:#fff!important;
    box-shadow:0 6px 16px rgba(48,67,77,.24)!important;
}

/* Keep photographic selections natural, no gold/brown wash */
.choice-card:has(input:checked) .choice-card-overlay{
    background:linear-gradient(to top,rgba(8,17,22,.82),rgba(8,17,22,.03) 72%)!important;
}
.visual-extra-card:has(input:checked) span{
    background:
        linear-gradient(to top,rgba(21,40,49,.78),rgba(21,40,49,.08)),
        var(--extra-image),
        linear-gradient(135deg,#829097,#293b43)!important;
    background-size:cover!important;
    background-position:center!important;
}
.layout-choice:has(input:checked),
.service-card:has(input:checked),
.planner-mode.active,
.layout-choice.active{
    background:#f5f8f9!important;
    color:#263b45!important;
}
.layout-choice:has(input:checked){color:var(--qq-select-dark)!important}
.service-card:has(input:checked) small,
.planner-mode.active small{color:#68777e!important}
.edge-profile-card:has(input:checked){box-shadow:inset 0 0 0 1px var(--qq-select),0 10px 28px rgba(56,77,88,.13)!important}
.pill-options label:has(input:checked) span,
.yes-no-row label:has(input:checked) span,
.check-card:not(.visual-extra-card):has(input:checked) span{
    border-color:var(--qq-select)!important;
    background:#eef3f5!important;
    color:#324b56!important;
    box-shadow:inset 0 0 0 1px var(--qq-select)!important;
}
.toggle-row input:checked + .toggle-ui{background:var(--qq-select)!important}
.quote-progress-track span{background:var(--qq-select)!important}
.quote-progress-list li.active .progress-number,
.quote-progress-list li.complete .progress-number{
    background:var(--qq-select)!important;
    border-color:var(--qq-select)!important;
}


/* =========================================================
   V6 — NO DEFAULT CHOICES + CLEAR IMAGE CARD SELECTION
========================================================= */

/* Extras: photographic cards with an unmistakable check mark */
.visual-extra-card{
    position:relative!important;
    border:1px solid rgba(76,96,105,.22)!important;
    outline:none!important;
    border-radius:2px;
}
.visual-extra-card::after{
    content:"✓";
    position:absolute;
    top:11px;
    right:11px;
    width:28px;
    height:28px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--qq-select,#4f6874);
    color:#fff;
    font-size:15px;
    font-weight:700;
    line-height:1;
    box-shadow:0 7px 18px rgba(42,61,70,.24);
    opacity:0;
    transform:scale(.72);
    transition:opacity .18s ease,transform .18s ease;
    z-index:5;
}
.visual-extra-card:has(input:checked)::after{
    opacity:1;
    transform:scale(1);
}
.visual-extra-card:has(input:checked){
    border-color:var(--qq-select,#4f6874)!important;
    outline:2px solid var(--qq-select,#4f6874)!important;
    outline-offset:2px!important;
}

/* Edge profiles: true image-led cards; name below image; check when chosen */
.edge-profile-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:12px!important;
}
.edge-profile-card{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    min-height:154px!important;
    padding:0 0 12px!important;
    overflow:hidden!important;
    border:1px solid #d6dfe2!important;
    background:#fff!important;
    cursor:pointer!important;
    outline:none!important;
    transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease!important;
}
.edge-profile-card:hover{transform:translateY(-2px)}
.edge-profile-card .edge-image{
    width:100%!important;
    height:105px!important;
    min-height:105px!important;
    display:grid!important;
    place-items:center!important;
    position:relative!important;
    overflow:hidden!important;
    background-image:var(--edge-image),linear-gradient(135deg,#edf1f2,#dce4e7)!important;
    background-size:cover!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
}
.edge-profile-card b{
    display:block!important;
    padding:11px 8px 0!important;
    margin:0!important;
    font-size:11px!important;
    color:#2d424c!important;
    line-height:1.25!important;
}
.edge-profile-card::after{
    content:"✓";
    position:absolute;
    top:10px;
    right:10px;
    width:28px;
    height:28px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--qq-select,#4f6874);
    color:#fff;
    font-size:15px;
    font-weight:700;
    line-height:1;
    box-shadow:0 7px 18px rgba(42,61,70,.24);
    opacity:0;
    transform:scale(.72);
    transition:opacity .18s ease,transform .18s ease;
    z-index:6;
}
.edge-profile-card:has(input:checked)::after{
    opacity:1;
    transform:scale(1);
}
.edge-profile-card:has(input:checked){
    border-color:var(--qq-select,#4f6874)!important;
    outline:2px solid var(--qq-select,#4f6874)!important;
    outline-offset:2px!important;
    box-shadow:0 12px 28px rgba(56,77,88,.15)!important;
}
.edge-not-sure .edge-image{background:#f3f6f7!important}

/* Nothing should visually look selected before the customer clicks it. */
.planner-mode:not(.active),
.layout-choice:not(.active){
    outline:none!important;
}

@media(max-width:760px){
    .edge-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* V7 — use real IMG elements for Extras and Edge Profile cards */
.visual-extra-card{position:relative!important;isolation:isolate;}
.visual-extra-card .extra-card-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;transition:transform .4s ease;}
.visual-extra-card > span{position:relative!important;z-index:2!important;background:linear-gradient(to top,rgba(8,17,22,.88),rgba(8,17,22,.06))!important;}
.visual-extra-card:hover .extra-card-image{transform:scale(1.035);}
.visual-extra-card:has(input:checked) > span{background:linear-gradient(to top,rgba(15,43,55,.90),rgba(15,43,55,.10))!important;}
.edge-profile-card .edge-image{background:linear-gradient(135deg,#edf1f2,#dce4e7)!important;}
.edge-profile-card .edge-image img{width:100%;height:100%;object-fit:cover;display:block;}
/* QUICK QUOTE HERO IMAGE */
.quote-hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(7,16,21,.82) 0%,
            rgba(7,16,21,.58) 48%,
            rgba(7,16,21,.28) 100%
        ),
        url("../images/quote/quick-quote-hero.jpg") !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}


/* =========================================================
   MOBILE HERO LEFT ALIGN FIX — 2026-09-09
   ========================================================= */
@media (max-width: 620px) {
    .quote-hero {
        position: relative !important;
        min-height: 620px !important;
        padding: 0 !important;
        display: block !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .quote-hero-inner {
        position: relative !important;
        z-index: 2 !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;

        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 62px 22px 48px 22px !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    .quote-kicker {
        display: block !important;
        margin: 0 0 18px 0 !important;
    }

    .quote-hero h1 {
        width: auto !important;
        max-width: 560px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 48px !important;
        line-height: .98 !important;
        letter-spacing: -2.2px !important;
        text-align: left !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .quote-hero h1 span {
        display: block !important;
        margin-top: 6px !important;
    }

    .quote-hero p {
        width: auto !important;
        max-width: 560px !important;
        margin: 24px 0 0 0 !important;
        padding: 0 !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
        text-align: left !important;
    }

    .quote-hero-note {
        width: auto !important;
        max-width: 560px !important;
        margin: 22px 0 0 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left !important;
        line-height: 1.45 !important;
    }

    .quote-hero-note-icon {
        flex: 0 0 26px !important;
    }
}

@media (max-width: 420px) {
    .quote-hero-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .quote-hero h1 {
        font-size: 44px !important;
        letter-spacing: -1.8px !important;
    }
}