.quote-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    border-bottom: 0.0625rem solid var(--border);
    background: rgb(255 255 255 / 0.97);
    box-shadow: 0 0.8rem 2.4rem rgb(15 23 42 / 0.06);
    backdrop-filter: blur(0.75rem);
}

.quote-header__inner {
    display: flex;
    min-height: 7.6rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.quote-header__brand {
    display: block;
    flex: none;
    width: clamp(16rem, 13rem + 4vw, 21rem);
}

.quote-header__brand img {
    display: block;
    width: 100%;
    height: auto;
}

.quote-header__contact {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--ink-muted);
    font-size: var(--text-sm);
}

.quote-header__contact .btn {
    min-height: 4.8rem;
    padding: 0.65em 1.15em;
    white-space: nowrap;
}

body:has(.quote-page) .call-fab {
    opacity: 0;
    transform: translateY(120%);
    pointer-events: none;
}

.quote-page {
    min-height: calc(100dvh - 7.6rem);
    background:
        radial-gradient(circle at 82% 8%, rgb(0 112 243 / 0.07), transparent 34rem),
        var(--surface);
}

.quote-intro {
    position: relative;
    overflow: hidden;
    background: var(--surface-sunken);
}

.quote-intro::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgb(15 23 42 / 0.045) 0.0625rem, transparent 0.0625rem),
        linear-gradient(90deg, rgb(15 23 42 / 0.045) 0.0625rem, transparent 0.0625rem);
    background-size: 3.2rem 3.2rem;
    content: "";
    mask-image: linear-gradient(90deg, black, transparent 86%);
    pointer-events: none;
}

.quote-intro__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(26rem, 0.65fr);
    gap: clamp(var(--space-7), 6vw, var(--space-9));
    align-items: center;
    padding-block: clamp(var(--space-7), 5vw, var(--space-8)) calc(var(--space-8) + var(--space-5));
}

.quote-intro__copy {
    max-width: 78rem;
}

.quote-intro__eyebrow {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-3);
    color: var(--ink-muted);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
}

.quote-intro__eyebrow span {
    width: 0.8rem;
    height: 0.8rem;
    flex: none;
    background: var(--blue-fill);
    box-shadow: 0 0 0 0.4rem rgb(0 112 243 / 0.12);
}

.quote-intro h1 {
    max-width: 18ch;
    margin: 0;
    color: var(--ink);
    font-size: clamp(4rem, 3rem + 2.2vw, 6rem);
    line-height: 1.04;
    letter-spacing: var(--tracking-display);
    text-transform: none;
    text-wrap: balance;
}

.quote-intro__lede {
    max-width: 56ch;
    margin-top: var(--space-4);
    color: var(--ink-body);
    font-size: var(--text-lg);
    line-height: 1.5;
    text-wrap: pretty;
}

.quote-intro__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-3);
    color: var(--ink-muted);
    font-size: var(--text-sm);
    font-weight: 700;
}

.quote-intro__aside {
    display: grid;
    gap: var(--space-5);
    align-content: center;
    justify-items: start;
}

.quote-intro__note {
    max-width: 34rem;
    padding-left: var(--space-5);
    border-left: 0.3rem solid var(--blue-fill);
}

.quote-intro__note p {
    margin: 0;
}

.quote-intro__note-title {
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
}

.quote-intro__note-title + p {
    margin-top: var(--space-1);
    color: var(--ink-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.quote-intro a {
    color: var(--blue-text);
    font-weight: 700;
    text-underline-offset: 0.2em;
}

.quote-page .diagnostic-section {
    position: relative;
    padding-block: 0 var(--space-9);
    background: transparent;
}

.quote-page .diagnostic-shell {
    position: relative;
    z-index: var(--z-raised);
    margin-top: calc(-1 * var(--space-7));
    overflow: hidden;
    border: 0.0625rem solid rgb(126 144 170 / 0.46);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow:
        0 2.4rem 6rem rgb(15 23 42 / 0.11),
        inset 0 0.0625rem 0 rgb(255 255 255 / 0.9);
}

.quote-page .diagnostic-quote-toolbar {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) clamp(var(--space-5), 4vw, var(--space-6));
    border-bottom: 0.0625rem solid var(--border);
    background: var(--surface-raised);
}

.quote-page .diagnostic-quote-toolbar h2 {
    margin: 0;
    color: var(--ink);
    font-size: var(--text-lg);
    line-height: 1.2;
}

.quote-page .diagnostic-quote-toolbar p {
    margin-top: var(--space-1);
    color: var(--ink-muted);
    font-size: var(--text-sm);
}

.quote-page .diagnostic-progress {
    padding: var(--space-4) clamp(var(--space-5), 4vw, var(--space-6));
    border-bottom: 0.0625rem solid var(--border);
    background: var(--base-100);
}

.quote-page .diagnostic-layout,
.quote-page .diagnostic-conversion {
    padding: var(--space-7) clamp(var(--space-5), 4vw, var(--space-6)) var(--space-8);
}

.quote-page .diagnostic-step {
    grid-template-columns: minmax(0, 1.12fr) minmax(30rem, 0.88fr);
    grid-template-areas:
        "header visual"
        "choices visual"
        "continue visual";
    column-gap: clamp(var(--space-6), 4vw, var(--space-8));
}

.quote-page .diagnostic-step__header h3,
.quote-page .diagnostic-contact__header h3 {
    font-size: var(--fs-3);
    text-wrap: balance;
}

.quote-page .diagnostic-visual {
    top: calc(var(--space-5) + 7.6rem);
    border-radius: var(--radius);
    box-shadow: 0 1.6rem 3.6rem rgb(15 23 42 / 0.18);
}

.quote-page .diagnostic-choice {
    border-radius: var(--radius-sm);
    box-shadow: 0 0.1rem 0.2rem rgb(15 23 42 / 0.04);
}

.quote-page .diagnostic-choice:focus-visible {
    box-shadow:
        0 0 0 0.0625rem var(--blue-fill),
        0 0.8rem 2rem rgb(0 87 194 / 0.1);
    translate: 0 -0.0625rem;
}

@media (hover: hover) and (pointer: fine) {
    .quote-page .diagnostic-choice:hover {
        box-shadow:
            0 0 0 0.0625rem var(--blue-fill),
            0 0.8rem 2rem rgb(0 87 194 / 0.1);
        translate: 0 -0.0625rem;
    }
}

.quote-page .diagnostic-step__continue {
    justify-self: end;
    min-width: 18rem;
}

.quote-page .diagnostic-result__actions .btn--emergency {
    max-width: 100%;
    padding-inline: var(--space-3);
    font-size: var(--text-base);
}

.quote-page .diagnostic-conversion[data-mode="direct"] {
    grid-template-columns: minmax(0, 72rem);
    justify-content: center;
}

.quote-page .diagnostic-conversion[data-mode="direct"] .diagnostic-conversion__media {
    display: none;
}

@media (max-width: 56.25em) {
    .quote-page .diagnostic-step {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "header"
            "visual"
            "choices"
            "continue";
    }

    .quote-page .diagnostic-layout,
    .quote-page .diagnostic-conversion {
        padding-top: var(--space-6);
    }
}

@media (max-width: 38.75em) {
    .quote-header__inner {
        min-height: 6.8rem;
    }

    .quote-header__brand {
        width: 14.8rem;
    }

    .quote-header__contact > span {
        display: none;
    }

    .quote-header__contact .btn {
        min-height: 4.4rem;
        padding-inline: var(--space-3);
        font-size: 1.3rem;
    }

    .quote-intro__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding-block: var(--space-5) calc(var(--space-7) + var(--space-3));
    }

    .quote-intro h1 {
        max-width: 18ch;
        font-size: 3.4rem;
    }

    .quote-intro__lede {
        margin-top: var(--space-3);
        font-size: var(--text-base);
        line-height: 1.45;
    }

    .quote-intro__eyebrow {
        margin-bottom: var(--space-2);
        font-size: 1.25rem;
    }

    .quote-intro__aside {
        display: block;
        margin-top: var(--space-3);
    }

    .quote-intro__note {
        display: none;
    }

    .quote-page .diagnostic-shell {
        margin-top: calc(-1 * var(--space-5));
        border-radius: var(--radius);
    }

    .quote-page .diagnostic-quote-toolbar {
        align-items: flex-start;
        padding: var(--space-4);
    }

    .quote-page .diagnostic-quote-toolbar p {
        display: none;
    }

    .quote-page .diagnostic-quote-toolbar h2 {
        font-size: 1.8rem;
    }

    .quote-page .diagnostic-quote-toolbar .diagnostic-direct {
        min-height: 2.75rem;
        padding: var(--space-2) 0;
        text-align: right;
    }

    .quote-page .diagnostic-progress {
        padding: var(--space-3) var(--space-3);
    }

    .quote-page .diagnostic-layout,
    .quote-page .diagnostic-conversion {
        padding: var(--space-5) var(--space-4) var(--space-6);
    }

    .quote-page .diagnostic-step__header {
        min-height: auto;
    }

    .quote-page .diagnostic-step__continue {
        justify-self: stretch;
        width: 100%;
    }

}

@media (max-width: 22.5em) {
    .quote-header__inner {
        gap: var(--space-2);
    }

    .quote-header__brand {
        width: 11.6rem;
    }

    .quote-header__contact .btn {
        padding-inline: var(--space-2);
        font-size: 1.2rem;
    }

    .quote-header__contact .vbp-button__icon {
        display: none;
    }

    .quote-intro__inner {
        padding-block: var(--space-4) calc(var(--space-6) + var(--space-4));
    }

    .quote-intro__eyebrow {
        display: none;
    }

    .quote-intro h1 {
        font-size: 3.2rem;
    }

    .quote-intro__lede {
        margin-top: var(--space-2);
        font-size: 1.6rem;
        line-height: 1.4;
    }

    .quote-page .diagnostic-quote-toolbar {
        padding-block: var(--space-3);
    }

    .quote-page .diagnostic-quote-toolbar h2 {
        font-size: 1.65rem;
        white-space: nowrap;
    }

    .quote-page .diagnostic-quote-toolbar .diagnostic-direct {
        max-width: 11rem;
        font-size: 1.25rem;
    }
}