/*-- -------------------------- -->
<---         Service Area        -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
    #service-area {
        display: flex;
        flex-direction: column;
        background-color: #11150F;
        overflow: hidden;
        position: relative;
    }

    .sa-map-col {
        width: 100%;
        height: 18rem;
        flex-shrink: 0;
        filter: grayscale(1) brightness(0.5) sepia(0.3) hue-rotate(60deg);
    }

    .sa-map-col iframe {
        display: block;
        width: 100%;
        height: 100%;
    }

    .sa-content-col {
        background-color: #1A1F17;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
    }

    .sa-inner {
        padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem) 1.5rem;
    }

    .sa-eyebrow {
        font-size: 0.8125rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #22C55E;
        margin: 0 0 0.6rem;
    }

    .sa-heading {
        font-size: clamp(1.5rem, 4vw, 2.25rem);
        font-weight: 800;
        line-height: 1.15;
        color: #fff;
        margin: 0 0 1.5rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .sa-locations {
        list-style: none;
        margin: 0 0 1.25rem;
        padding: 0;
        columns: 2;
        column-gap: 1.5rem;
    }

    .sa-locations li {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.9rem;
        color: #c8d4c0;
        padding: 0.22rem 0;
        break-inside: avoid;
    }

    .sa-locations li::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #22C55E;
        flex-shrink: 0;
    }

    .sa-cta-note {
        font-size: 0.85rem;
        color: #7a9070;
        margin: 0;
        font-style: italic;
    }

    .sa-divider {
        display: none; /* hidden on mobile, shown on tablet+ */
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 100%;
        flex-direction: column;
        align-items: center;
        pointer-events: none;
        z-index: 10;
    }

    .sa-wire {
        display: block;
        width: 3px;
        flex: 1;
        background: #22C55E;
    }

    .sa-plug {
        width: 2rem;
        height: 2.25rem;
        flex-shrink: 0;
    }
}

@media only screen and (min-width: 48rem) {
    #service-area {
        flex-direction: row;
        min-height: 32rem;
    }

    .sa-map-col {
        width: 50%;
        height: auto;
    }

    .sa-content-col {
        width: 50%;
    }

    .sa-locations {
        columns: 2;
    }

    .sa-divider {
        display: flex;
    }
}

@media only screen and (min-width: 64rem) {
    #service-area {
        min-height: 36rem;
    }

    .sa-map-col {
        width: 55%;
    }

    .sa-content-col {
        width: 45%;
    }

    .sa-divider {
        left: 55%;
    }

    .sa-locations {
        columns: 2;
        column-gap: 2rem;
    }

    .sa-locations li {
        font-size: 0.9375rem;
    }
}