.component-service-area {
    container-type: inline-size;
    container-name: service-area;

    :where(.service-area-layout) {
        display: grid;
        grid-template-columns: 2fr 3fr;
        gap: var(--size-large);
        align-items: start;
    }

    /* Map. The box is the image's own bounding box -- the shipped asset has its transparent
       margin trimmed -- so clipping the zoom to it clips at the edge of the states. */
    :where(.service-area-map) {
        position: relative;
        overflow: hidden;
    }

    /* The base map is the only one in flow, so it alone sets the box's height and the detail
       circle swapping in cannot shift the layout. */
    :where(.service-area-map-image) {
        display: block;
        inline-size: 100%;
        block-size: auto;
    }

    /* The detail circle, stacked over the map and centered on it. Its artwork runs edge to edge
       of a square canvas, so at 100% width the circle touches both sides of the box. */
    :where(.service-area-map-detail) {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 0;
        translate: 0 -50%;
        inline-size: 100%;
        block-size: auto;
    }

    /* Crossfade, with each image also easing through a little scale so the swap reads as moving
       closer rather than as two pictures blinking: the map grows slightly as it fades out and
       the circle settles from slightly small as it fades in. */
    :where(.service-area-map-image),
    :where(.service-area-map-detail) {
        transition: opacity 350ms ease, scale 350ms ease;
    }

    :where(.service-area-map-detail) {
        opacity: 0;
        scale: .92;
        /* Nothing to click or read until it is faded in. */
        pointer-events: none;
    }

    :where(.service-area-map.is-zoomed .service-area-map-detail) {
        opacity: 1;
        scale: 1;
    }

    :where(.service-area-map.is-zoomed .service-area-map-image) {
        opacity: 0;
        scale: 1.08;
    }

    /* Honor a reduced-motion preference: still swap, just without the movement. */
    @media (prefers-reduced-motion: reduce) {
        :where(.service-area-map-image),
        :where(.service-area-map-detail) {
            transition: opacity 350ms ease;
            scale: 1;
        }

        :where(.service-area-map.is-zoomed .service-area-map-image) {
            scale: 1;
        }
    }

    /* Sits over the transparent lower-right of the map in the concept. */
    :where(.service-area-zoom) {
        position: absolute;
        inset-block-end: 12%;
        inset-inline-end: 8%;
        display: grid;
        place-items: center;
        inline-size: 3.2rem;
        block-size: 3.2rem;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background-color: var(--color-brand-light-grey);
        color: var(--color-primary-black);
        cursor: pointer;
        transition: transform .2s ease-in-out;

        &:hover {
            transform: scale(1.1);
        }

        &:focus-visible {
            outline: 2px solid var(--color-brand-blue);
            outline-offset: 2px;
        }
    }

    /* A + built from two bars, so the same element becomes a - by hiding the vertical one. */
    :where(.service-area-zoom-icon) {
        position: relative;
        display: block;
        inline-size: 1.2rem;
        block-size: 1.2rem;

        &::before,
        &::after {
            content: '';
            position: absolute;
            inset-block-start: 50%;
            inset-inline-start: 50%;
            background-color: currentColor;
            translate: -50% -50%;
        }

        &::before {
            inline-size: 1.2rem;
            block-size: 2px;
        }

        &::after {
            inline-size: 2px;
            block-size: 1.2rem;
            transition: opacity .2s ease;
        }
    }

    :where(.service-area-zoom[aria-pressed="true"] .service-area-zoom-icon)::after {
        opacity: 0;
    }

    /* Content. */

    /* The prose layer this component opts into via .sub-component-basic-copy puts 1.5em above
       any heading that follows a sibling -- 72px under a 48px h2. That spacing is for a heading
       that starts a new section part-way down a page of copy; the eyebrow is a label belonging
       to the heading below it, so the two sit tight together instead. Unlayered, so it wins over
       @layer basic-copy regardless of specificity. */
    :where(.service-area-eyebrow) + :where(.heading) {
        margin-block-start: 0;
    }

    :where(.service-area-eyebrow) {
        margin: 0;
        color: var(--color-primary-black);
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-h6);
        line-height: 1.2;
        text-transform: uppercase;
    }

    /* Accordion items. The markup is the accordion component's own item template, but its
       styling lives in accordion.css nested under
       .component-accordion > .component-wrapper > .region > .content-wrap -- a chain this
       component does not produce. Copied here rather than reaching into that file, so a change
       to the accordion cannot silently restyle this component. Keep the two in step by hand. */
    :where(.service-area-accordion) {
        display: grid;
        margin-block-start: var(--size-medium);

        /* The item template puts its <hr> inside the <details>, and a browser paints only the
           <summary> while an item is closed -- so the dividers appeared and vanished as items
           were toggled. Draw the rule on the item itself and hide that <hr>, and every row keeps
           its line open or closed. */
        :where(.single-accordion-item) {
            inline-size: 100%;
            padding-block-end: var(--size-small);
            border-block-end: 1px solid var(--color-black-20-percent);

            :where(.copy) {
                margin-block-start: var(--size-small);
            }

            & > hr {
                display: none;
            }
        }

        :where(.accordion-summary) {
            position: relative;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            cursor: pointer;
            user-select: none;
            transition: background 0.15s ease;
            font-size: var(--font-size-h5);
            font-weight: var(--font-weight-semi-bold);
        }

        :where(summary::-webkit-details-marker) {
            display: none;
        }

        :where(.accordion-icon) {
            display: inline-flex;
            flex-shrink: 0;
            align-items: center;
            justify-content: center;
            inline-size: 26px;
            block-size: 26px;
            border-radius: 50%;
            background-color: var(--color-brand-blue);
            position: relative;
            transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);

            &::before,
            &::after {
                content: '';
                position: absolute;
                background-color: var(--color-primary-white);
                border-radius: 2px;
            }

            &::before {
                inline-size: 12px;
                block-size: 2px;
            }

            &::after {
                inline-size: 2px;
                block-size: 12px;
            }

            [open] > .accordion-summary > & {
                background-color: var(--color-brand-blue-tertiary);
            }

            [open] > * & {
                transform: rotate(-45deg);
            }
        }
    }

    :where(.ctas) {
        margin-block-start: var(--size-medium);
        display: grid;
        grid-auto-flow: column;
        gap: var(--size-x-small);
        justify-content: left;
        align-items: start;

        :where(.component-button) {
            margin-block-start: 0;
        }
    }
}

/* Once the region stops having room to center inside its cap it pads by nothing, so the map
   would run to the screen edge. 112rem = content-width-large, 4rem = minimum-inline-padding. */
@container service-area (inline-size < calc(112rem + 4rem + 4rem)) {
    :where(.component-service-area > .component-wrapper > .region) {
        max-width: 100%;
        padding-inline: var(--minimum-inline-padding);
    }
}

/* Side by side stops working once the copy column is too narrow to hold a sentence; stack with
   the map on top, capped so it does not become the whole screen on a phone. */
@container service-area (inline-size < 70rem) {
    .component-service-area :where(.service-area-layout) {
        grid-template-columns: 1fr;
        gap: var(--size-medium);
    }

    .component-service-area :where(.service-area-map) {
        max-inline-size: 38rem;
        justify-self: center;
    }
}

@container service-area (inline-size < 48rem) {
    .component-service-area :where(.ctas) {
        grid-auto-flow: row;
        gap: var(--size-small);
    }
}