.ctc.v4 {

    /* -- Layout -------------------------------------------- */

    .ctc-v4-layout {
        gap: 4rem;
    }

    @media screen and (min-width: 1280px) {
        .ctc-v4-content {
            width: calc(43% - (var(--flx-gap) / 2));
        }

        .ctc-v4-form {
            width: calc(57% - (var(--flx-gap) / 2));
        }
    }

    /* -- Heading & body ------------------------------------ */

    .ctc-v4-heading {
        display: block;
        margin-bottom: 1rem;
    }

    .ctc-v4-body {
        max-width: 38rem;
    }

    /* -- Areas We Serve ------------------------------------ */

    .ctc-v4-areas-ttl {
        font-size: var(--fnt-t-k-sml-s);
        font-family: var(--fnt-t);
        font-weight: var(--fnt-t-1-w);
    }

    @media screen and (min-width: 1280px) {
        .ctc-v4-areas-ttl {
            /* Fixed 1.1rem at all widths; mobile token scales to 1.7rem above 1280 */
            font-size: 1.1rem;
        }
    }

    .ctc-v4-areas ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .tag {
        --tag-s: 1rem;
        --bdr-clr-o: 0.5;

        a {
            background-color: hsl(from var(--text-color) h s l / 0.2);
            color: var(--text-color);
            text-decoration: none;

            &:hover,
            &:focus-visible {
                background-color: hsl(from var(--text-color) h s l / 0.35);
            }
        }
    }
}