/* ============================================================================
   Get a Quote page.
   ========================================================================== */

.quote {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--s-9);
    align-items: start;
}

.quote__form { margin-top: var(--s-7); }

.quote .form__message { margin-top: var(--s-6); }

/* ---------------------------------------------------------------- success */
.quote__success {
    padding: clamp(2rem, 5vw, 3.5rem);
    text-align: center;
    border: 1px solid var(--gold-200);
    border-radius: var(--radius);
    background: var(--gold-50);
}

.quote__success-icon {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 0 auto var(--s-5);
    color: var(--c-white);
    background: var(--c-gold);
    border-radius: 50%;
}

.quote__success h2 { font-size: var(--fs-2xl); }

.quote__success p {
    max-width: 52ch;
    margin: var(--s-4) auto 0;
    color: var(--text-muted);
}

.quote__success-actions { justify-content: center; margin-top: var(--s-7); }

/* ---------------------------------------------------------------- aside */
.quote__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
}

.quote__card {
    padding: var(--s-6);
    background: var(--ink-900);
    color: var(--c-white);
    border-radius: var(--radius);
}

.quote__card-title {
    padding-bottom: var(--s-4);
    margin-bottom: var(--s-5);
    font-size: var(--fs-xs);
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--c-gold);
    border-bottom: 1px solid var(--border-dark);
}

.quote__steps { display: grid; gap: var(--s-4); }
.quote__steps li {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--s-4);
    font-size: var(--fs-sm);
    color: var(--ink-300);
}
.quote__steps span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--c-gold);
    border: 1px solid var(--gold-700);
    border-radius: 50%;
}

.quote__call {
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--border-dark);
}
.quote__call p {
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--ink-400);
}
.quote__call a {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-2);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--c-white);
    transition: color var(--dur) var(--ease);
}
.quote__call .icon { color: var(--c-gold); }
.quote__call a:hover { color: var(--c-gold); }

@media (max-width: 1023px) {
    .quote { grid-template-columns: 1fr; gap: var(--s-8); }
    .quote__aside { position: static; }
}

@media (max-width: 767px) {
    .quote__call a { min-height: 48px; }
}