@media (max-width: 68rem) {
    .area-directory__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-header {
        overflow: visible;
    }

    .site-header__inner {
        grid-template-columns: minmax(0, 1fr) auto auto;
        justify-content: space-between;
        gap: var(--space-sm);
    }

    .site-header .brand,
    .site-header .brand__text {
        min-width: 0;
    }

    .site-header .brand__name {
        white-space: nowrap;
    }

    .site-header__mobile-phone {
        display: inline-flex;
    }

    .mobile-drawer__messengers .messenger-link + .messenger-link {
        margin-left: 0;
    }

    html.has-mobile-menu {
        overflow: hidden;
    }

    html.has-mobile-menu body::before {
        position: fixed;
        z-index: 60;
        inset: 0;
        background: var(--color-overlay-menu);
        backdrop-filter: blur(0.2rem);
        content: "";
    }

    .mobile-drawer {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 70;
        display: grid;
        align-content: start;
        width: min(24rem, calc(100vw - var(--space-lg)));
        height: 100dvh;
        padding: var(--space-md);
        overflow-y: auto;
        border-left: 0.0625rem solid var(--color-white-alpha-14);
        border-radius: var(--radius-lg) 0 0 var(--radius-lg);
        background:
            radial-gradient(circle at 100% 0, var(--color-white-alpha-14), transparent 18rem),
            linear-gradient(135deg, var(--color-surface-strong), var(--color-hero-end));
        color: var(--color-text-inverse);
        gap: var(--space-md);
        box-shadow: var(--shadow-md);
        opacity: 0;
        pointer-events: none;
        transform: translateX(100%);
        visibility: hidden;
        transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
    }

    html.has-mobile-menu .mobile-drawer {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
        visibility: visible;
        transition-delay: 0s;
    }

    .mobile-drawer__top {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-sm);
        min-height: 3rem;
    }

    .mobile-drawer__close {
        display: grid;
        width: var(--tap-target);
        height: var(--tap-target);
        place-items: center;
        border: 0.0625rem solid var(--color-white-alpha-14);
        border-radius: var(--radius-md);
        background: var(--color-footer-surface);
        color: var(--color-text-inverse);
        cursor: pointer;
        transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
    }

    .mobile-drawer__close::before {
        width: 1.375rem;
        height: 1.375rem;
        background: currentColor;
        content: "";
        -webkit-mask: url("../../icons/x.svg") center / contain no-repeat;
        mask: url("../../icons/x.svg") center / contain no-repeat;
    }

    .mobile-drawer__close:hover {
        border-color: var(--color-accent-ink);
        background: var(--color-brand);
        color: var(--color-text-inverse);
        transform: translateY(-0.0625rem);
    }

    .nav-toggle {
        display: grid;
        place-items: center;
    }

    .cookie-banner {
        left: 50%;
        right: auto;
        bottom: calc(5rem + env(safe-area-inset-bottom));
        grid-template-columns: minmax(0, 1fr) auto;
        width: calc(100vw - calc(var(--space-sm) * 2));
        gap: var(--space-sm);
        padding: var(--space-sm);
    }

    .cookie-banner__actions {
        justify-content: flex-end;
    }

    .primary-nav,
    .header-actions {
        display: none;
    }

    .mobile-drawer__nav-list {
        display: grid;
        justify-content: stretch;
        gap: var(--space-xs);
        grid-template-columns: 1fr;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .mobile-drawer__nav-list a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        min-height: 3.15rem;
        padding: var(--space-sm);
        border: 0.0625rem solid var(--color-white-alpha-14);
        border-radius: var(--radius-md);
        background: var(--color-footer-surface);
        color: var(--color-text-inverse);
        text-align: center;
        font-weight: 800;
    }

    .mobile-drawer__nav-list a:hover {
        border-color: var(--color-accent-border);
        background: var(--color-footer-surface-hover);
        color: var(--color-text-inverse);
    }

    .mobile-drawer__nav-list :is(
        a[aria-current="page"],
        .current-menu-ancestor > a,
        .current_page_parent > a
    ) {
        border-color: var(--color-brand-alpha-34);
        background: var(--color-brand-alpha-08);
        color: var(--color-text-inverse);
    }

    .mobile-drawer__actions {
        display: grid;
        justify-content: stretch;
        gap: var(--space-sm);
        padding-top: var(--space-md);
        border-top: 0.0625rem solid var(--color-white-alpha-14);
    }

    .mobile-drawer__phone {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-xs);
        min-height: 2.75rem;
        padding: var(--space-sm);
        border: 0.0625rem solid var(--color-white-alpha-14);
        border-radius: var(--radius-md);
        background: var(--color-footer-surface);
        color: var(--color-text-inverse);
        font-weight: 800;
    }

    .mobile-drawer__phone::before {
        width: 1rem;
        height: 1rem;
        background: currentColor;
        content: "";
        flex: 0 0 auto;
        -webkit-mask: url("../../icons/phone-call.svg") center / contain no-repeat;
        mask: url("../../icons/phone-call.svg") center / contain no-repeat;
    }

    .mobile-drawer__messengers {
        display: flex;
        justify-content: flex-start;
        gap: var(--space-sm);
    }

    .hero__grid,
    .model-brands,
    .price-layout,
    .problems-board,
    .section-head-row,
    .coverage-grid,
    .final-cta__board,
    .not-found__board,
    .contacts-hero,
    .contacts-map-board,
    .vacancies-hero,
    .vacancies-contact,
    .blog-hero,
    .blog-layout,
    .reviews-widget-layout {
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        position: static;
    }

    .hero-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .price-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .prices-note {
        align-items: flex-start;
        flex-direction: column;
    }

    .problem-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .error-code-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .error-codes-note {
        align-items: flex-start;
        flex-direction: column;
    }

    .problem-card--cta {
        grid-column: span 2;
    }

    .section-head-row,
    .final-cta__board {
        align-items: flex-start;
    }

    .section-head-row > .button {
        justify-self: start;
    }

    .reviews-platforms {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .work-gallery {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .process-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .faq-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .faq-board__top {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .faq-tools,
    .faq-actions {
        justify-content: flex-start;
    }

    .coverage-card--districts {
        min-height: 0;
    }

    .coverage-card--metro .coverage-links {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .final-cta__actions {
        justify-content: flex-start;
    }

    .not-found__content {
        min-height: 0;
    }

    .footer-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-board__bottom {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .footer-legal {
        justify-self: start;
        justify-content: flex-start;
        justify-items: start;
        text-align: left;
    }

    .contacts-method-grid,
    .contacts-step-grid,
    .vacancies-status,
    .vacancies-grid,
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vacancies-contact__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 42rem) {
    .area-directory__grid {
        grid-template-columns: 1fr;
    }

    .area-archive__hero,
    .area-directory__board {
        padding: var(--space-md);
    }

    .area-switcher {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .area-switcher a {
        min-height: 3rem;
        padding: var(--space-xs) var(--space-sm);
    }

    body {
        padding-bottom: calc(5.25rem + env(safe-area-inset-bottom));
    }

    .request-modal {
        --request-modal-pad-top: max(var(--space-sm), env(safe-area-inset-top));
        --request-modal-pad-right: max(var(--space-sm), env(safe-area-inset-right));
        --request-modal-pad-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
        --request-modal-pad-left: max(var(--space-sm), env(safe-area-inset-left));
    }

    .request-modal__dialog {
        max-height: calc(100vh - var(--request-modal-pad-top) - var(--request-modal-pad-bottom));
        max-height: calc(100dvh - var(--request-modal-pad-top) - var(--request-modal-pad-bottom));
        padding: var(--space-md);
    }

    .request-modal.is-sent .request-modal__dialog {
        max-height: calc(100vh - var(--request-modal-pad-top) - var(--request-modal-pad-bottom));
        max-height: calc(100dvh - var(--request-modal-pad-top) - var(--request-modal-pad-bottom));
        padding: 0;
    }

    .request-modal__head {
        padding-right: calc(2.75rem + var(--space-xs));
    }

    .request-modal__head h2 {
        font-size: var(--text-2xl);
    }

    .request-form__grid {
        grid-template-columns: 1fr;
    }

    .request-select__panel {
        max-height: min(13rem, 45dvh);
    }

    .request-form__submit > .button {
        width: 100%;
    }

    .request-form__contact-row {
        justify-content: flex-start;
    }

    .request-success__head {
        align-items: flex-start;
    }

    .request-success {
        padding: var(--space-md);
    }

    .request-success__summary {
        grid-template-columns: 1fr;
    }

    :root {
        --text-4xl: 2.35rem;
        --text-3xl: 1.9rem;
        --text-5xl: 3.1rem;
        --text-hero: 2.55rem;
        --space-xl: calc(var(--space-lg) + var(--space-md) - var(--space-unit));
    }

    .container {
        width: min(100% - calc(var(--space-sm) * 2), var(--container));
    }

    .site-header {
        width: min(100% - calc(var(--space-sm) * 2), var(--container));
    }

    .full-price-board,
    .reviews-widget-board,
    .contacts-hero,
    .contacts-map-board,
    .contacts-steps,
    .vacancies-hero,
    .vacancies-board,
    .vacancies-contact,
    .blog-hero,
    .blog-archive__hero,
    .blog-list-board,
    .single-post__board,
    .single-post-nav,
    .related-posts,
    .blog-empty,
    .generic-page__board {
        padding: var(--space-md);
    }

    .reviews-widget-board h1,
    .contacts-hero h1,
    .contacts-map-board h2,
    .contacts-steps h2,
    .vacancies-hero h1,
    .vacancies-board h2,
    .vacancies-contact h2,
    .blog-hero h1,
    .blog-archive h1,
    .blog-list-board h2,
    .single-post h1,
    .related-posts h2,
    .blog-empty h2,
    .generic-page h1 {
        font-size: var(--text-3xl);
    }

    .full-price-board__head p,
    .reviews-widget-board__head p,
    .contacts-hero p,
    .contacts-map-board__info > p,
    .contacts-steps__head p,
    .vacancies-hero p,
    .vacancies-board__head p,
    .vacancies-contact p,
    .blog-hero p,
    .blog-archive p,
    .blog-empty p,
    .generic-page__content {
        font-size: var(--text-md);
    }

    .contacts-method-grid,
    .contacts-address-note,
    .contacts-step-grid,
    .vacancies-status,
    .vacancies-grid,
    .blog-grid,
    .blog-layout,
    .single-post-nav,
    .reviews-widget-layout,
    .reviews-source-grid,
    .price-row,
    .price-list,
    .problem-grid,
    .error-code-grid,
    .reviews-platforms,
    .process-steps,
    .faq-grid {
        grid-template-columns: 1fr;
    }

    .contacts-hero__actions,
    .contacts-hero__actions .button,
    .vacancies-hero__actions,
    .vacancies-hero__actions .button,
    .vacancies-contact__actions,
    .vacancies-contact__actions .button,
    .prices-note__actions,
    .prices-note__actions .button,
    .final-cta__actions,
    .final-cta__actions .button,
    .not-found__actions .button,
    .hero__actions .button,
    .single-post-nav a {
        width: 100%;
    }

    .single-post-nav,
    .single-post-nav > div:last-child {
        display: grid;
        justify-items: stretch;
    }

    .single-post-nav > div,
    .single-post-nav a {
        width: 100%;
        justify-self: stretch;
    }

    .related-posts .blog-grid {
        grid-template-columns: 1fr;
    }

    .mobile-cta-bar {
        position: fixed;
        right: var(--space-sm);
        bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
        left: var(--space-sm);
        z-index: 45;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xs);
        padding: var(--space-xs);
        border: 0.0625rem solid var(--color-white-alpha-14);
        border-radius: var(--radius-lg);
        background:
            radial-gradient(circle at 0 0, var(--color-white-alpha-14), transparent 14rem),
            linear-gradient(135deg, var(--color-surface-strong), var(--color-hero-end));
        box-shadow: var(--shadow-md);
        transition: opacity 160ms ease, transform 160ms ease;
    }

    .mobile-cta-bar .button {
        min-height: 2.875rem;
        padding: 0.75rem var(--space-sm);
        font-size: var(--text-sm);
    }

    .mobile-cta-bar__phone {
        border-color: var(--color-call-action);
        background: var(--color-call-action);
        color: var(--color-text-inverse);
    }

    .mobile-cta-bar__phone:hover {
        border-color: var(--color-call-action-hover);
        background: var(--color-call-action-hover);
    }

    html.has-mobile-menu .mobile-cta-bar,
    html.request-modal-open .mobile-cta-bar {
        opacity: 0;
        pointer-events: none;
        transform: translateY(calc(100% + var(--space-md)));
    }

    .contacts-map {
        min-height: 20rem;
    }

    .work-gallery,
    .hero-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-board__top {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-board__actions {
        justify-content: flex-start;
    }

    .yandex-reviews-widget {
        max-width: 100%;
        height: 42rem;
    }

    .full-price-row {
        grid-template-columns: 1fr;
        align-items: start;
        gap: var(--space-xs);
        padding: var(--space-md);
    }

    .full-price-row strong {
        white-space: normal;
    }

    .full-price-group__head {
        grid-template-columns: 1fr;
    }

    .brand__caption {
        display: none;
    }

    .site-header .brand__caption,
    .brand--mobile .brand__caption {
        display: block;
        overflow: hidden;
        font-size: 0.6875rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .site-header {
        width: calc(100% - calc(var(--space-sm) * 2));
    }

    .site-header__inner {
        min-height: 3.75rem;
        padding: var(--space-xs);
    }

    .mobile-drawer {
        width: min(22rem, calc(100vw - var(--space-md)));
        padding: var(--space-sm);
    }

    .mobile-drawer__close {
        display: grid;
    }

    .brand {
        min-height: 2.75rem;
    }

    .brand__name {
        font-size: var(--text-md);
    }

    .mobile-drawer__actions {
        gap: var(--space-sm);
    }

    .mobile-drawer__phone,
    .mobile-drawer__request {
        width: 100%;
    }

    .messenger-link,
    .mobile-drawer__close,
    .request-modal__close {
        width: var(--tap-target);
        height: var(--tap-target);
    }

    .button--small,
    .coverage-more,
    .coverage-card__all,
    .footer-nav a,
    .footer-legal a {
        min-height: var(--tap-target);
    }

    .section-head-row > .button {
        width: 100%;
        justify-self: stretch;
    }

    .coverage-card__all,
    .footer-legal a {
        display: inline-flex;
        align-items: center;
    }

    .coverage-card .coverage-links a {
        padding-block: var(--space-2xs);
    }

    .footer-legal a {
        padding-block: var(--space-xs);
    }

    .hero__grid {
        padding: var(--space-md);
    }

    .hero__content {
        padding: 0;
    }

    .hero-title__brand {
        max-width: 100%;
        white-space: nowrap;
    }

    .hero--compact .hero-title__brand {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .works-board h1 span,
    .works-board h2 span {
        white-space: normal;
    }

    .hero__lead {
        font-size: var(--text-md);
    }

    .hero--compact h1 {
        font-size: var(--text-3xl);
    }

    .section-lead {
        font-size: var(--text-md);
    }

    .problem-card,
    .error-code-card,
    .error-codes-note,
    .review-platform,
    .process-step,
    .faq-card,
    .footer-tile,
    .footer-tile--wide {
        min-height: 0;
        padding: var(--space-md);
    }

    a.problem-card {
        padding-right: calc(var(--space-md) + 1.5rem);
    }

    a.problem-card::after {
        right: var(--space-md);
        bottom: var(--space-md);
    }

    .price-row {
        gap: var(--space-xs);
        align-items: start;
        min-height: 0;
    }

    .price-summary,
    .price-row {
        padding: var(--space-md);
    }

    .price-row strong {
        white-space: normal;
    }

    .problem-card--cta {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .problem-card__tools {
        width: 100%;
        justify-self: stretch;
    }

    .problem-card__search {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .problem-card__search input[type="search"] {
        grid-column: 1 / -1;
    }

    .problem-card__search .button {
        width: 100%;
    }

    .problem-card__blog-link {
        justify-self: stretch;
    }

    .review-platform {
        grid-template-columns: 1fr;
    }

    .review-platform__media {
        width: 100%;
        justify-content: start;
    }

    .review-platform > a:not(.review-platform__media) {
        grid-column: auto;
    }

    .coverage-card {
        padding: var(--space-md);
    }

    .coverage-card--map {
        padding: 0;
    }

    .coverage-card__head {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-sm);
    }

    .coverage-card--districts .coverage-links a {
        width: auto;
    }

    .coverage-card--districts .coverage-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2xs) var(--space-xs);
    }

    .coverage-card--districts .coverage-links a {
        font-size: var(--text-sm);
    }

    .coverage-card--metro .coverage-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2xs) var(--space-sm);
    }

    .coverage-card--metro:not(.is-expanded) .coverage-links a:nth-child(n+17) {
        display: none;
    }

    .final-cta__actions,
    .hero__actions {
        flex-direction: column;
    }

    .not-found__board {
        padding: var(--space-md);
    }

    .not-found h1 {
        font-size: var(--text-4xl);
    }

    .not-found__content p,
    .not-found__contacts p {
        font-size: var(--text-md);
    }

    .footer-board {
        padding: var(--space-md);
    }

    .footer-tiles {
        grid-template-columns: 1fr;
    }

    .footer-tile--wide {
        grid-column: auto;
    }

    .footer-tile h2 {
        font-size: var(--text-2xl);
    }

    .fact-card {
        min-height: 4.5rem;
        padding: var(--space-sm);
    }

    .fact-card strong {
        font-size: var(--text-lg);
    }

}

@media (max-width: 24.25rem) {
    .site-header__inner {
        gap: var(--space-xs);
    }

    .site-header .brand {
        padding-left: var(--space-xs);
    }

}

@media (max-width: 23rem) {
    .site-header__inner {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .site-header__mobile-phone {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }

    .nav-toggle {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 22rem) {

    .problem-card__search {
        grid-template-columns: 1fr;
    }

    .problem-card__search input[type="search"] {
        grid-column: auto;
    }
}