.service-area-section {
    background: color-mix(in srgb, var(--col-site-accent) 7%, var(--col-body-bg, #fff));
}

.service-area-container {
    max-width: var(--content-max, 1120px);
    margin: 0 auto;
    text-align: center;
}

.service-area-intro {
    margin: -0.35rem auto 1.5rem;
    max-width: 34rem;
    color: var(--col-muted, var(--col-body-text));
    font-size: 1rem;
    line-height: 1.55;
}

.service-area-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
    max-width: 48rem;
}

.service-area-list li {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--col-site-accent) 35%, var(--col-border, #ccc));
    background: color-mix(in srgb, var(--col-site-accent) 8%, var(--col-surface, #fff));
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 550;
    font-size: 0.9rem;
    line-height: 1.25;
    color: var(--col-body-text, #1a2418);
}

.service-area-note {
    margin: 1.35rem auto 0;
    max-width: 32rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--col-muted, var(--col-body-text));
}

.service-area-note a {
    color: var(--col-site-accent);
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.service-area-note a:hover,
.service-area-note a:focus-visible {
    color: color-mix(in srgb, var(--col-site-accent) 80%, #000);
}