/* US coverage tile map - /industries/home-services/ */

.usm {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    width: 100%;
    gap: 3.2rem;
}

.usm-readout {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-height: 7.2rem;
}

.usm-readout-value {
    font-size: 4.8rem;
    line-height: 100%;
    letter-spacing: -.02em;
    background: var(--gradient-orange);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: opacity var(--transition-fast);
}

.usm-readout-label {
    font-size: 1.6rem;
    line-height: 145%;
    color: var(--grey);
}

.usm-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: .6rem;
    width: 100%;
    max-width: 78rem;
}

.usm-grid::before {
    content: "";
    grid-area: 1 / 1;
    aspect-ratio: 1;
}

.usm-state {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 0;
    border-radius: .8rem;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-default);
    font-size: 1.4rem;
    line-height: 100%;
    color: #181818;
    background: #FFE4D6;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.usm-state[data-bin="2"] { background: #FFC2A1; }
.usm-state[data-bin="3"] { background: #FF9A66; }
.usm-state[data-bin="4"] { background: #FF6E30; color: var(--white); }
.usm-state[data-bin="5"] { background: #E9402B; color: var(--white); }

.usm-state:hover,
.usm-state:focus-visible,
.usm-state.is-active {
    transform: translateY(-.3rem);
    box-shadow: 0 .6rem 1.6rem rgba(233, 64, 43, .32);
    outline: none;
}

.usm-state:focus-visible {
    box-shadow: 0 0 0 .3rem var(--black);
}

/* tooltip, anchored above the hovered tile */
.usm-tip {
    position: absolute;
    z-index: 3;
    display: none;
    flex-direction: column;
    gap: .3rem;
    padding: 1rem 1.4rem;
    border-radius: .8rem;
    background: var(--black);
    color: var(--white);
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, -100%);
}

.usm-tip.is-visible { display: flex; }
.usm-tip strong { font-size: 1.5rem; line-height: 120%; }
.usm-tip span { font-size: 1.3rem; line-height: 120%; color: #B9B9B9; }

.usm-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem 2.4rem;
    font-size: 1.3rem;
    line-height: 100%;
    color: var(--grey);
}

.usm-key { display: inline-flex; align-items: center; gap: .8rem; }

.usm-key i {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: .3rem;
    background: #FFE4D6;
}

.usm-key i[data-bin="2"] { background: #FFC2A1; }
.usm-key i[data-bin="3"] { background: #FF9A66; }
.usm-key i[data-bin="4"] { background: #FF6E30; }
.usm-key i[data-bin="5"] { background: #E9402B; }

.usm-source { margin-left: auto; }

@media screen and (max-width: 967px) {
    .usm-readout-value { font-size: 3.6rem; }
    .usm-grid { max-width: 100%; gap: .4rem; }
    .usm-state { font-size: 1.2rem; border-radius: .6rem; }
    .usm-source { margin-left: 0; flex-basis: 100%; }
}

@media screen and (max-width: 650px) {
    .usm-state { font-size: 1rem; }
    .usm-tip { padding: .8rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .usm-state { transition: none; }
    .usm-state:hover, .usm-state:focus-visible, .usm-state.is-active { transform: none; }
}

/* ---- State-data qualification form ------------------------------------- */

.cvf {
    align-self: stretch;
    width: 100%;
    max-width: 78rem;
    margin-top: 4.8rem;
    padding: 4rem;
    border-radius: 1.6rem;
    background: var(--grey-light);
}

.cvf-intro { margin-bottom: 3.2rem; }

.cvf-title {
    font-size: 2.8rem;
    line-height: 120%;
    letter-spacing: -.01em;
    margin: 0 0 1.2rem;
    color: var(--black);
}

.cvf-sub {
    font-size: 1.6rem;
    line-height: 150%;
    color: var(--grey);
    margin: 0;
}

.cvf-q { margin-bottom: 2.8rem; }

.cvf-label {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    font-size: 1.6rem;
    line-height: 130%;
    color: var(--black);
    margin-bottom: 1.4rem;
}

.cvf-num { font-size: 1.2rem; color: var(--orange); letter-spacing: .04em; }

.cvf-help { font-size: 1.3rem; line-height: 140%; color: var(--grey); margin: 1rem 0 0; }

.cvf-chips { display: flex; flex-wrap: wrap; gap: .8rem; }

.cvf-chips input { position: absolute; opacity: 0; width: 0; height: 0; }

.cvf-chips label {
    display: inline-flex;
    align-items: center;
    padding: 1.1rem 1.8rem;
    border: 1px solid #E2E2E5;
    border-radius: 10rem;
    background: var(--white);
    font-size: 1.4rem;
    line-height: 100%;
    color: var(--black);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.cvf-chips label:hover { border-color: var(--orange); }

.cvf-chips input:checked + label {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--white);
}

.cvf-chips input:focus-visible + label { outline: 2px solid var(--black); outline-offset: 2px; }

.cvf-select select,
.cvf-field input {
    width: 100%;
    padding: 1.4rem 1.6rem;
    border: 1px solid #E2E2E5;
    border-radius: .8rem;
    background: var(--white);
    font-family: var(--font-default);
    font-size: 1.5rem;
    line-height: 120%;
    color: var(--black);
    -webkit-appearance: none;
    appearance: none;
}

.cvf-select { position: relative; }

.cvf-select::after {
    content: "";
    position: absolute;
    right: 1.8rem;
    top: 50%;
    width: .8rem;
    height: .8rem;
    border-right: 1.5px solid var(--black);
    border-bottom: 1.5px solid var(--black);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.cvf-select select:focus,
.cvf-field input:focus { outline: none; border-color: var(--orange); }

.cvf-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; margin-bottom: 2.4rem; }

.cvf-field {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    font-size: 1.4rem;
    line-height: 100%;
    color: var(--grey);
}

.cvf-submit {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.6rem 2.8rem;
    border: 0;
    border-radius: 10rem;
    background: var(--gradient-orange);
    color: var(--white);
    font-family: var(--font-default);
    font-size: 1.5rem;
    line-height: 100%;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.cvf-submit:hover { opacity: .88; }
.cvf-submit[disabled] { opacity: .5; cursor: default; }
.cvf-submit .arrow { width: 1.6rem; height: 1.6rem; flex: none; }

.cvf-privacy { font-size: 1.3rem; line-height: 140%; color: var(--grey); margin: 1.6rem 0 0; }

.cvf-error {
    margin-top: 1.6rem;
    font-size: 1.4rem;
    line-height: 145%;
    color: var(--red);
}

.cvf-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cvf-done { display: flex; flex-direction: column; gap: .8rem; }
.cvf-done strong { font-size: 2rem; line-height: 120%; color: var(--black); }
.cvf-done span { font-size: 1.6rem; line-height: 150%; color: var(--grey); }

@media screen and (max-width: 967px) {
    .cvf { padding: 2.8rem 2.4rem; margin-top: 3.6rem; }
    .cvf-title { font-size: 2.2rem; }
    .cvf-fields { grid-template-columns: 1fr; }
    .cvf-submit { width: 100%; justify-content: center; }
}