.official-services {
    color: var(--ds-color-text);
    background: var(--ds-color-surface-soft);
}

.official-services.section { padding-block: 68px; }
.official-services__heading { margin-bottom: 30px; }
.official-services__heading > div { max-width: 680px; }
.official-services__heading h2 { margin-bottom: 22px; color: var(--ds-color-text); }
.official-services__heading > p { max-width: 470px; margin: 0; color: var(--ds-color-text-muted); font-size: 17px; line-height: 1.55; }
.official-services__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.official-services__grid a { display: grid; min-height: 74px; align-items: center; padding-block: 8px; background: transparent; text-decoration: none; transition: transform 160ms var(--ds-ease-out); }
.official-services__grid img { display: block; width: auto; max-width: 100%; height: 46px; object-fit: contain; object-position: left center; mix-blend-mode: multiply; transition: filter 180ms ease, transform 180ms var(--ds-ease-out); }
.official-services__grid a:active { transform: scale(.98); }

@media (hover: hover) and (pointer: fine) {
    .official-services__grid a:hover img { filter: saturate(1.08) contrast(1.04); transform: translateY(-2px); }
}

@media (min-width: 700px) {
    .official-services.section { padding-block: var(--ds-section-standard); }
    .official-services__heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; }
    .official-services__heading h2 { margin-bottom: 0; }
    .official-services__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .official-services__grid a,
    .official-services__grid img { transition: none; }
}