/* ==========================================================================
   Medical Car — стилі внутрішніх сторінок (Services / Service / Львів).
   Тільки НОВІ правила поверх assets/css/main.css. Витягнуто 1:1 з готових
   HTML-версій (medical-car-services / -service / -lviv).
   ========================================================================== */

/* ==========================================================================
   Сторінка «Послуги» — темно-синій стан пунктів навігації
   За референсом: default світлий, hover і відкритий dropdown — #242E5B,
   текст та іконки білі.
   ========================================================================== */

.mc-body--on-light .menu-item:hover,
.mc-body--on-light .menu-item[aria-expanded="true"],
.mc-body--on-light .menu-item[aria-expanded="true"]:hover,
.mc-body--on-light .header__lang:hover,
.mc-body--on-light .header__lang[aria-expanded="true"] {
    background: #242e5b;
    color: var(--white);
    box-shadow: none;
}

/* Вихідні SVG стрілок білі, тому в темному стані фільтр просто знімаємо */
.mc-body--on-light .menu-item:hover .menu-item__chevron,
.mc-body--on-light .menu-item[aria-expanded="true"] .menu-item__chevron,
.mc-body--on-light .header__lang:hover .menu-item__chevron,
.mc-body--on-light .header__lang[aria-expanded="true"] .menu-item__chevron {
    filter: none;
}

/* ==========================================================================
   SERVICE PAGE — «Оренда швидкої допомоги»
   Нових блоків лише три: Hero, Наші автомобілі, Що входить у вартість.
   Решта секцій живе на стилях головної без жодних змін.
   ========================================================================== */

/* --------------------------------------------------------- хлібні крихти --- */

.crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--white);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
}

.crumbs a {
    color: var(--white);
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.crumbs a:hover {
    opacity: 1;
}

.crumbs__sep {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--white);
    opacity: 0.7;
}

/* ------------------------------------------------------------ hero (NEW) ---
   Каркас той самий, що на головній: .hero + .header + .support,
   тому scroll-поведінка навігації працює без окремої логіки.
   Відрізняється лише вміст .hero__inner. */

.hero--svc .hero__inner {
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 128px var(--gutter) 64px;
}

/* .support лишається 56×56 плейсхолдером (сама кнопка — fixed),
   виносимо його з колонки, щоб не зсувати контент hero. */
.hero--svc .support {
    position: absolute;
    right: var(--gutter);
    bottom: 64px;
}

.svc-hero__body {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.svc-hero__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gap);
}

.svc-hero__lead {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 748px;
    flex-shrink: 0;
    color: var(--white);
}

.svc-hero__title {
    max-width: 620px;
}

/* Права колонка Hero: опис і кнопки мають однакову ширину,
   тому їхні ліві краї збігаються (Інше 3, завдання 2). */
.hero--svc {
    --svc-aside: 466px;
}

.svc-hero__note {
    width: var(--svc-aside);
    flex-shrink: 0;
    text-align: left;
    color: var(--white);
}

/* flex-end — нижній край кнопок лягає рівно на нижній край карток */
.svc-hero__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gap);
}

.svc-hero__stats {
    display: flex;
    align-items: stretch;
    gap: var(--gap);
}

.svc-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 20px 24px;
    border-radius: 16px;
    background: var(--overlay-12);
    color: var(--white);
}

.svc-stat__label {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
    opacity: 0.75;
}

.svc-hero__actions {
    display: flex;
    align-items: stretch;
    gap: 16px;
    width: var(--svc-aside);
    flex-shrink: 0;
}

/* Обидві кнопки однакової ширини й висоти */
.svc-hero__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    height: 48px;
    padding-inline: 12px;
    white-space: nowrap;
}

.svc-hero__actions .btn--outline-light {
    padding-inline: 11px;
}

/* ------------------------------------------------- наші автомобілі (NEW) ---
   Карусель на тому самому [data-slider], що й решта слайдерів сайту. */

.cars {
    padding-block: 50px 100px;
}

/* Наступна картка має тягнутися вправо до самого краю екрана.
   Раніше її різав overflow контейнера (.container має max-width 1440
   і padding 56px), тобто на широких моніторах обрізання відбувалось
   на ~60-80px раніше за реальний край viewport. Тепер межу тримає
   сама секція .cars — вона на всю ширину вікна, а .cars__viewport
   більше нічого не маскує. Ширина карток, стрілки, spacing і логіка
   слайдера не змінюються: viewport.clientWidth лишається тим самим. */
@media (min-width: 769px) {
    .cars {
        overflow: hidden;
        overflow: clip;
    }

    /* Селектор із двох класів — щоб перебити базове
       .cars__viewport { overflow: hidden }, яке оголошене нижче. */
    .cars .cars__viewport {
        overflow: visible;
    }
}

.cars__head {
    margin-bottom: 56px;
}

.cars__viewport {
    overflow: hidden;
}

.cars__track {
    display: flex;
    gap: var(--gap);
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Наступна картка визирає на ~37px — як у макеті (1267 із 1328). */
.car {
    flex: 0 0 calc(100% - 61px);
    width: calc(100% - 61px);
    display: grid;
    grid-template-columns: minmax(0, 585px) minmax(0, 1fr);
    gap: 40px;
    padding: 32px;
    border-radius: var(--r-card);
    background: var(--blue-100);
}

.car__media {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.car__stage {
    height: 440px;
    border-radius: 20px;
    overflow: hidden;
    background: var(--photo-bg);
}

.car__stage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.car__thumbs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Стрілки стоять по краях ряду й ніколи не наїжджають на мініатюри.
   Фіксована ширина + висота + 50% радіуса = завжди ідеальне коло. */
.car__thumbs-row .slider-nav__btn {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    padding: 0;
    border-radius: 50%;
}

/* Desktop: три мініатюри рівномірно ділять вільну ширину між стрілками,
   тому жодна не обрізається (Інше 3, завдання 3). */
.car__thumbs {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: hidden;
    scroll-behavior: smooth;
}

.car__thumb {
    width: auto;
    height: auto;
    aspect-ratio: 144 / 116;
    flex-shrink: 0;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    background: var(--photo-bg);
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.car__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.car__thumb:hover {
    opacity: 1;
}

/* Рамку має тільки активне фото — як у повноекранній галереї головної. */
.car__thumb.is-active {
    opacity: 1;
    border-color: #13294c;
}

.car__info {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.car__specs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.car__spec {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.car__spec dt {
    color: var(--muted);
}

.car__spec dd {
    margin: 0;
}

/* ------------------------------------------- що входить у вартість (NEW) --- */

.included {
    padding-block: 50px 100px;
}

.included__title {
    margin-bottom: 56px;
}

.included__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: stretch;
}

.included__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.included-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 24px;
    border-radius: var(--r-card);
    background: var(--blue-100);
}

.included-item__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Висота фото дорівнює висоті колонки з картками (Інше 3, завдання 4) */
.included__media {
    height: 100%;
    min-height: 0;
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--photo-bg);
}

.included__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   SERVICE PAGE — мобільна версія (за окремим mobile-макетом)
   ========================================================================== */

@media (max-width: 768px) {

    /* ------------------------------------------------------------- hero --- */

    /* Мобільний Hero-asset уже містить градієнт, тому фото — фон на всю
       секцію, а не смуга, як на головній. */
    .hero--svc {
        height: auto;
        min-height: 760px;
    }

    .hero--svc .hero__media {
        inset: 0;
        height: 100%;
    }

    .hero--svc .hero__media::before,
    .hero--svc .hero__media::after {
        content: none;
    }

    .hero--svc .hero__inner {
        display: flex;
        padding: 76px 20px 32px;
    }

    .hero--svc .support {
        right: 20px;
        bottom: 48px;
        width: 48px;
        height: 48px;
    }

    .svc-hero__body {
        gap: 32px;
    }

    .svc-hero__row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .svc-hero__lead {
        width: auto;
    }

    .svc-hero__title {
        max-width: none;
    }

    /* Розгорнутого опису в мобільному макеті немає */
    .svc-hero__note {
        display: none;
    }

    .svc-hero__bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }

    .svc-hero__stats {
        flex-direction: column;
        gap: 12px;
    }

    .svc-stat {
        align-items: center;
        gap: 4px;
        padding: 16px;
        border-radius: 20px;
        text-align: center;
    }

    .svc-hero__actions {
        flex-direction: column;
        align-items: stretch;
        width: auto;
        gap: 12px;
    }

    .svc-hero__actions .btn {
        flex: 0 0 auto;
        padding-inline: 24px;
    }

    .svc-hero__actions .btn {
        width: 100%;
    }

    /* -------------------------------------------------- наші автомобілі --- */

    .cars {
        padding-block: 50px;
    }

    .cars__head {
        margin-bottom: 24px;
    }

    .cars__viewport {
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
    }

    .cars__track {
        gap: 12px;
    }

    .car {
        flex: 0 0 calc(100vw - 65px);
        width: calc(100vw - 65px);
        max-width: 380px;
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 20px;
    }

    /* У мобільному макеті спершу назва й характеристики, потім фото */
    .car__info {
        order: 1;
        gap: 16px;
    }

    .car__media {
        order: 2;
        gap: 16px;
    }

    .car__stage {
        height: 240px;
    }

    .car__specs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .car__spec {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    /* «Тип» і «Категорія» стоять поруч, решта — на всю ширину */
    .car__spec:nth-child(n+3) {
        grid-column: 1 / -1;
    }

    /* Mobile: ряд притиснутий ліворуч, ліва картка завжди ціла,
       за межі виходить лише крайня права (Інше 3, завдання 3). */
    .car__thumbs {
        display: flex;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .car__thumbs::-webkit-scrollbar {
        display: none;
    }

    .car__thumbs-row {
        gap: 8px;
    }

    /* Коло не деформується при стисканні контейнера */
    .car__thumbs-row .slider-nav__btn {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-radius: 50%;
    }

    .car__thumbs-row .slider-nav__btn .nav-arrow {
        width: 20px;
        height: 20px;
    }

    .car__thumb {
        width: 120px;
        height: 96px;
        aspect-ratio: auto;
        flex: 0 0 120px;
    }

    /* --------------------------------------------- що входить у вартість --- */

    .included {
        padding-block: 50px;
    }

    .included__title {
        margin-bottom: 24px;
    }

    .included__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .included__list {
        gap: 12px;
    }

    .included-item {
        gap: 16px;
        padding: 16px;
    }

    .included__media {
        min-height: 0;
        height: 380px;
    }
}

/* ==========================================================================
   КОНТАКТИ ОФІСУ — єдиний новий блок сторінки «по місту Львів»
   ========================================================================== */

.contacts {
    padding-block: 100px 50px;
}

.contacts__title {
    margin-bottom: 56px;
}

.contacts__grid {
    display: grid;
    grid-template-columns: minmax(0, 841px) minmax(0, 1fr);
    gap: 42px;
    align-items: start;
}

/* --- карта --- */

.contacts__map {
    position: relative;
    height: 430px;
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--photo-bg);
}

.contacts__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    filter: saturate(0.9);
}

/* Картка поверх карти: сама вона кліки не перехоплює,
   клікабельна тільки кнопка «Відкрити карту». */
.contacts__card {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 288px;
    padding: 24px;
    border-radius: 24px;
    background: var(--white);
    box-shadow: 0 6px 24px rgba(19, 41, 76, 0.16);
    text-align: center;
    pointer-events: none;
}

.contacts__card .btn {
    pointer-events: auto;
}

.contacts__card-title {
    margin: 0;
}

.contacts__card-address {
    color: var(--muted);
}

/* --- список контактів --- */

.contacts__list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.contacts__item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    column-gap: 12px;
    row-gap: 4px;
}

.contacts__icon {
    grid-row: span 2;
    width: 24px;
    height: 24px;
    color: var(--muted);
}

.contacts__label {
    color: var(--muted);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
}

.contacts__value {
    color: var(--black);
    word-break: break-word;
}

a.contacts__value:hover {
    opacity: 0.7;
}

.contacts__socials {
    padding-left: 36px;
}

/* На світлому фоні кружечки роблимо блакитними, а не білими */
.contacts__socials a {
    background: var(--blue-100);
}

.contacts__socials a:hover {
    transform: translateY(-2px);
}

/* ==========================================================================
   SERVICE PAGE — мобільна версія (за окремим mobile-макетом)
   ========================================================================== */

@media (max-width: 768px) {

    /* ------------------------------------------------------------- hero --- */

    /* Мобільний Hero-asset уже містить градієнт, тому фото — фон на всю
       секцію, а не смуга, як на головній. */
    .hero--svc {
        height: auto;
        min-height: 760px;
    }

    .hero--svc .hero__media {
        inset: 0;
        height: 100%;
    }

    .hero--svc .hero__media::before,
    .hero--svc .hero__media::after {
        content: none;
    }

    .hero--svc .hero__inner {
        display: flex;
        padding: 76px 20px 32px;
    }

    .hero--svc .support {
        right: 20px;
        bottom: 48px;
        width: 48px;
        height: 48px;
    }

    .svc-hero__body {
        gap: 32px;
    }

    .svc-hero__row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .svc-hero__lead {
        width: auto;
    }

    .svc-hero__title {
        max-width: none;
    }

    /* Розгорнутого опису в мобільному макеті немає */
    .svc-hero__note {
        display: none;
    }

    .svc-hero__bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }

    .svc-hero__stats {
        flex-direction: column;
        gap: 12px;
    }

    .svc-stat {
        align-items: center;
        gap: 4px;
        padding: 16px;
        border-radius: 20px;
        text-align: center;
    }

    .svc-hero__actions {
        flex-direction: column;
        align-items: stretch;
        width: auto;
        gap: 12px;
    }

    .svc-hero__actions .btn {
        flex: 0 0 auto;
        padding-inline: 24px;
    }

    .svc-hero__actions .btn {
        width: 100%;
    }

    /* -------------------------------------------------- наші автомобілі --- */

    .cars {
        padding-block: 50px;
    }

    .cars__head {
        margin-bottom: 24px;
    }

    .cars__viewport {
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
    }

    .cars__track {
        gap: 12px;
    }

    .car {
        flex: 0 0 calc(100vw - 65px);
        width: calc(100vw - 65px);
        max-width: 380px;
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 20px;
    }

    /* У мобільному макеті спершу назва й характеристики, потім фото */
    .car__info {
        order: 1;
        gap: 16px;
    }

    .car__media {
        order: 2;
        gap: 16px;
    }

    .car__stage {
        height: 240px;
    }

    .car__specs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .car__spec {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    /* «Тип» і «Категорія» стоять поруч, решта — на всю ширину */
    .car__spec:nth-child(n+3) {
        grid-column: 1 / -1;
    }

    /* Mobile: ряд притиснутий ліворуч, ліва картка завжди ціла,
       за межі виходить лише крайня права (Інше 3, завдання 3). */
    .car__thumbs {
        display: flex;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .car__thumbs::-webkit-scrollbar {
        display: none;
    }

    .car__thumbs-row {
        gap: 8px;
    }

    /* Коло не деформується при стисканні контейнера */
    .car__thumbs-row .slider-nav__btn {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-radius: 50%;
    }

    .car__thumbs-row .slider-nav__btn .nav-arrow {
        width: 20px;
        height: 20px;
    }

    .car__thumb {
        width: 120px;
        height: 96px;
        aspect-ratio: auto;
        flex: 0 0 120px;
    }

    /* --------------------------------------------- що входить у вартість --- */

    .included {
        padding-block: 50px;
    }

    .included__title {
        margin-bottom: 24px;
    }

    .included__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .included__list {
        gap: 12px;
    }

    .included-item {
        gap: 16px;
        padding: 16px;
    }

    .included__media {
        min-height: 0;
        height: 380px;
    }

    /* ------------------------------------------------- контакти офісу --- */

    .contacts {
        padding-block: 50px;
    }

    .contacts__title {
        margin-bottom: 24px;
    }

    .contacts__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .contacts__map {
        height: 352px;
    }

    .contacts__card {
        width: min(288px, calc(100% - 40px));
        padding: 20px;
        gap: 8px;
    }

    .contacts__list {
        gap: 24px;
    }
}


/* ==========================================================================
   Сторінки About / Cars / Gallery / Licenses / Reviews — нові правила.
   ========================================================================== */

/* ---- cars ---- */

/* ==========================================================================
   OUR CARS — «Автомобілі Medical Car»
   Компонент .car повністю успадкований з блоку «Наші автомобілі»
   Service Page. Тут лише знімається каруселька: картки стають на всю
   ширину контейнера й вишиковуються одна під одною.
   ========================================================================== */

.page-head__intro {
    max-width: 700px;
    margin-top: 16px;
}

.cars-page {
    /* 90px + власні 50px у .faq = 140px до «Поширених запитань» */
    padding-block: 49px 90px;
}

.cars-page__list {
    display: flex;
    flex-direction: column;
    gap: 56px;
}

/* Картка вже не слайд каруселі — вона займає весь контейнер */
.cars-page .car {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
}

/* Двоколонкова розкладка й ширші поля — тільки desktop.
   Раніше ці правила стояли поза media і перебивали мобільне
   .car { grid-template-columns: minmax(0, 1fr) }

: картка лишалася
   у дві колонки, .car__media з order: 2 потрапляв у колонку 1fr,
   яка на 335px стискалася до нуля — фото й мініатюри зникали. */
@media (min-width: 769px) {
    .cars-page .car {
        grid-template-columns: minmax(0, 595px) minmax(0, 1fr);
        padding: 40px;
    }
}

@media (max-width: 768px) {

    /* ------------------------------------------------------- our cars --- */

    .page-head__intro {
        max-width: none;
        margin-top: 12px;
    }

    /* Знизу відступу немає — міжсекційний проміжок задає власний
       padding-top блоку «Поширені запитання» (64px), як і на решті
       мобільних сторінок. */
    .cars-page {
        padding-block: 30px 0;
    }

    .cars-page__list {
        gap: 24px;
    }

    .cars-page .car {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ---- gallery ---- */

/* ==========================================================================
   Сторінка «Послуги» — темно-синій стан пунктів навігації
   За референсом: default світлий, hover і відкритий dropdown — #242E5B,
   текст та іконки білі.
   ========================================================================== */

.mc-body--on-light .menu-item:hover,
.mc-body--on-light .menu-item[aria-expanded="true"],
.mc-body--on-light .menu-item[aria-expanded="true"]:hover,
.mc-body--on-light .header__lang:hover,
.mc-body--on-light .header__lang[aria-expanded="true"] {
    background: #242e5b;
    color: var(--white);
    box-shadow: none;
}

/* ==========================================================================
   GALLERY PAGE — три блоки «Галерея» з Home Page один під одним.
   Компонент .gallery успадкований повністю; тут лише вертикальний ритм.
   ========================================================================== */

.gal-page {
    /* 90px + власні 50px у .faq = 140px до «Поширених запитань» */
    padding-block: 40px 90px;
}

.gal-page .gallery {
    padding-block: 0;
}

.gal-page .gallery + .gallery {
    margin-top: 104px;   /* було 64px */
}

.gal-page .gallery__head {
    margin-bottom: 32px;
}

/* Заголовки напрямків на 10px менші за .t-h2, щоб не сперечатися
   з головним «Галерея». Інтерліньяж і трекінг перераховані за тією
   самою пропорцією, що й у токенах типографіки. */
.gal-page .gallery__head .t-h2 {
    font-size: 42px;
    line-height: 48px;
    letter-spacing: -2.1px;
}

@media (max-width: 768px) {

    /* ---------------------------------------------------- gallery page --- */

    /* Знизу відступу немає — проміжок до FAQ задає його власний
       padding-top (64px), як і на решті мобільних сторінок. */
    .gal-page {
        padding-block: 24px 0;
    }

    .gal-page .gallery + .gallery {
        margin-top: 80px;   /* було 48px */
    }

    .gal-page .gallery__head {
        margin-bottom: 20px;
    }

    .gal-page .gallery__head .t-h2 {
        font-size: 22px;
        line-height: 28px;
        letter-spacing: -1.1px;
    }
}


/* ---- licenses ---- */

/* ==========================================================================
   Картка сертифіката — зображення + заголовок + «Завантажити».
   Каруселлю лишається той самий .gallery__viewport / [data-slider].
   ========================================================================== */

.cert-card {
    flex: 0 0 307px;
    width: 307px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cert-card__media {
    height: 432px;
    border-radius: var(--r-media);
    overflow: hidden;
    background: var(--white);
    cursor: zoom-in;
}

/* Сертифікати вертикальні — вписуємо цілком, без обрізання */
.cert-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Два рядки під заголовок, щоб кнопки в ряду стояли на одній лінії */
.cert-card__title {
    min-height: 48px;
    margin: 0;
}

.cert-card__btn {
    width: 100%;
    gap: 8px;
    margin-top: auto;
}

.cert-card__btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Сертифікати вертикальні: у великому кадрі вписуємо їх повністю,
   а не обрізаємо по ширині — та сама поведінка, що й на About Us.
   Мініатюри праворуч не чіпаємо. */
.mc-modal--gallery-tall .gal__stage {
    background: var(--white);
}

.mc-modal--gallery-tall .gal__stage img {
    object-fit: contain;
}

/* ==========================================================================
   LICENSES PAGE — та сама карусель, що й на About Us
   ========================================================================== */

.certs-page {
    /* 90px + власні 50px у .faq = 140px до «Поширених запитань» */
    padding-block: 33px 90px;
}

.certs-page__head {
    margin-top: 15px;
    margin-bottom: 40px;
}

/* Наступна картка має тягнутися до самого краю екрана.
   Раніше її різав overflow: hidden на .gallery__viewport, а той лежить
   у .container з max-width 1440 і padding 56px — звідси біла колонка
   праворуч. Тепер межу тримає сама секція, вона на всю ширину вікна.
   Ширина карток, gap і логіка слайдера не змінюються: viewport.clientWidth
   лишається тим самим. Селектор із двох класів — щоб перебити базове
   .gallery__viewport { overflow: hidden }

, оголошене вище. */
@media (min-width: 769px) {
    .certs-page {
        overflow: hidden;
        overflow: clip;
    }

    .certs-page .gallery__viewport {
        overflow: visible;
    }
}

@media (max-width: 768px) {

    /* -------------------------------------------------- licenses page --- */

    .certs-page {
        padding-block: 17px 0;
    }

    .certs-page__head {
        margin-top: 10px;
        margin-bottom: 24px;
    }

    /* Обрізання по краю екрана, як у решті мобільних каруселей */
    .certs-page .gallery__viewport {
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
    }

    .certs-page .gallery__track {
        gap: 12px;
    }
}

[data-slider-track] {
    -webkit-user-select: none;
    user-select: none;
}

[data-slider-track] img {
    -webkit-user-drag: none;
}


/* ---- reviews ---- */

/* --------------------------------------------------- поле рейтингу --- */

.mc-card--review {
    width: 598px;
}

.mc-rating {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mc-rating__label {
    color: var(--muted);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
}

.mc-rating__stars {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mc-star {
    display: flex;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--white);
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}

.mc-star svg {
    width: 100%;
    height: 100%;
}

.mc-star:hover {
    transform: scale(1.08);
}

/* Активні зірки повторюють градієнт дизайн-системи зліва направо */
.mc-star.is-active:nth-child(1) { color: #13294c; }

.mc-star.is-active:nth-child(2) { color: #1a3a68; }

.mc-star.is-active:nth-child(3) { color: #1b4f8d; }

.mc-star.is-active:nth-child(4) { color: #1e63a8; }

.mc-star.is-active:nth-child(5) { color: #117cc1; }

/* ==========================================================================
   REVIEWS — сторінка «Відгуки»
   Картка .review успадкована з Home Page без змін; тут лише інший
   контейнер (сітка замість треку каруселі), intro-блок і банер.
   ========================================================================== */

.rv-head {
    padding-block: 33px 0;
}

/* Обидві колонки дробові, тому банер тягнеться разом із контейнером
   і не може вилізти за його межі. Раніше права колонка була фіксовані
   638px — на вузькому desktop уся різниця з'їдалася лівим текстом. */
.rv-head__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gap);
    align-items: start;
    margin-top: 15px;
}

.rv-head__intro {
    max-width: 560px;
    margin-top: 16px;
}

/* --- банер «Ми вдячні за вашу довіру» --- */

/* Нижче ~1100px дві колонки стають надто вузькими для тексту й кнопок,
   тому банер переїжджає під заголовок ще до мобільного брейкпойнта. */
@media (max-width: 1100px) {
    .rv-head__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .rv-head__intro {
        max-width: none;
    }
}

.rv-banner {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: 32px;
    border-radius: var(--r-card);
    background: var(--grad-card);
    color: var(--white);
}

.rv-banner__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rv-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.rv-banner__actions .btn {
    height: 48px;
    gap: 8px;
}

.rv-banner__actions .btn img,
.rv-banner__actions .btn svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* --- сітка відгуків --- */

.rv-list {
    padding-block: 40px 90px;   /* 90 + 50 у .faq = 140px до FAQ */
}

.rv-list__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
    align-items: stretch;
}

/* Картка більше не слайд каруселі */
.rv-list__grid .review {
    width: auto;
    flex: 0 0 auto;
    max-width: none;
}

.rv-list__grid .review[hidden] {
    display: none;
}

.rv-list__actions {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}

@media (max-width: 768px) {

    .mc-star {
        width: 36px;
        height: 36px;
    }

    .mc-rating__stars {
        gap: 8px;
    }

    /* --------------------------------------------------------- reviews --- */

    .rv-head {
        padding-block: 17px 0;
    }

    .rv-head__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        margin-top: 10px;
    }

    .rv-head__intro {
        max-width: none;
        margin-top: 12px;
    }

    .rv-banner {
        gap: 20px;
        padding: 24px;
    }

    .rv-banner__actions {
        flex-direction: column;
        gap: 12px;
    }

    .rv-banner__actions .btn {
        width: 100%;
    }

    /* Знизу відступу немає — проміжок до FAQ задає його власний
       padding-top (64px), як і на решті мобільних сторінок. */
    .rv-list {
        padding-block: 32px 0;
    }

    .rv-list__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    /* Мобільна розкладка самої картки лишається з Home Page */
    .rv-list__grid .review {
        width: auto;
    }

    .rv-list__actions {
        margin-top: 32px;
    }

    .rv-list__actions .btn {
        width: 100%;
        height: 48px;
    }
}


/* ---- about ---- */

/* ==========================================================================
   Medical Car — мобільний макет
   Джерело: Figma «Home Page_Mobile» 294:5270, фрейм 375 × 9898.

   Усе в цьому файлі живе всередині @media (max-width: 767px) —
   десктоп не змінюється жодним правилом звідси.

   Примітка про висоту: у фреймі Figma перші 59px — це мокап статус-бару
   телефона (9:41, батарея). Це чрома пристрою, а не сторінка, тому в
   HTML її немає і документ на 59px нижчий за PDF: 9839px замість 9898px.
   ========================================================================== */

@media (max-width: 768px) {

    :root {
        --gutter: 20px;
        --gap: 12px;
        --r-card: 24px;
    }

    /* ---------------------------------------------------------- типографіка --- */

    /* H1 і заголовки секцій на мобільному однакові: 32/38, -5% */
    .t-h1,
    .t-h2 {
        font-size: 32px;
        line-height: 38px;
        letter-spacing: -1.6px;
    }

    /* Заголовки карток: 24/28, -3% */
    .t-h3 {
        font-size: 24px;
        line-height: 28px;
        letter-spacing: -0.72px;
    }

    .t-h4 {
        font-size: 18px;
        line-height: 24px;
        letter-spacing: -0.36px;
    }

    /* ------------------------------------------------------------- контейнер --- */

    .container {
        padding-inline: 20px;
    }

    /* =========================================================================
       Каруселі: спільний каркас
       У Figma картка 310px при контейнері 335px — наступна визирає на 25px.
       Зберігаємо цю пропорцію на будь-якій ширині.
       ========================================================================= */

    /* Карусель обрізається рівно на краю viewport: від'ємні поля виводять
       обгортку за padding контейнера, а padding повертає стартову позицію. */
    .why__viewport {
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
    }

    .directions__viewport,
    .why__viewport,
    .comfort__viewport,
    .services__viewport,
    .gallery__viewport,
    .reviews__viewport {
        overflow: hidden;
    }

    .directions__grid,
    .why__grid,
    .comfort__grid {
        display: flex;
        gap: 12px;
        transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .directions__grid > *,
    .why__grid > *,
    .comfort__grid > *,
    .services__track > .service-card,
    .reviews__track > .review {
        flex: 0 0 calc(100vw - 65px);
        width: calc(100vw - 65px);
        max-width: 310px;
    }

    .services__track,
    .gallery__track,
    .reviews__track {
        gap: 12px;
    }

    /* Стрілки в шапці секції — на мобільному навігація переїжджає під трек */
    .section-head .slider-nav {
        display: none;
    }

    /* Навігація каруселі (Figma 356:15484): стрілка — точки — стрілка */
    .mslider-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        height: 48px;
        margin-top: 32px;
    }

    .mslider-nav__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        border-radius: 100px;
        background: var(--white);
        border: 1px solid var(--step-line);
        color: var(--black);
        transition: background 0.2s ease, opacity 0.2s ease;
    }

    .mslider-nav__btn img {
        width: 24px;
        height: 24px;
    }

    .mslider-nav__btn[disabled] {
        opacity: 0.35;
        cursor: default;
    }

    .mslider-dots {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .mslider-dots span {
        width: 8px;
        height: 4px;
        border-radius: 2px;
        background: var(--input-placeholder);
        transition: width 0.3s ease, background 0.3s ease;
    }

    .mslider-dots span.is-active {
        width: 22px;
        background: #13294c;
    }

    /* =========================================================================
       Шапка — Figma 377:23490 (h 52, pt 4, px 20)
       Логотип ліворуч, група «телефон / Консультація / бургер» праворуч.
       ========================================================================= */

    .header {
        height: 52px;
        padding: 4px 20px 0;
        justify-content: space-between;
    }

    .header__left {
        gap: 0;
        order: 1;
    }

    .header__logo,
    .header__logo img {
        width: 48px;
        height: 48px;
    }

    .header__logo {
        border-radius: 16.667px;
    }

    .header__right {
        order: 2;
        gap: 12px;
    }

    /* Телефон стає круглою кнопкою 40×40 */
    .header__phone {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background: var(--overlay-16);
    }

    .header__phone span {
        display: none;
    }

    .header__right .btn--outline-light {
        display: inline-flex;
        height: 40px;
        padding: 13px 16px;
    }

    .header__burger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background: var(--overlay-16);
    }

    /* =========================================================================
       Hero — Figma 294:5144 (bg 375 × 734, без 59px статус-бару = 675)
       ========================================================================= */

    .hero {
        height: 675px;
        background: var(--hero-bg);
    }

    /* Фото — смуга, а не фон на всю секцію: Figma 294:5149 (y 75, h 376,
       по горизонталі виходить за кадр на 21px з кожного боку). */
    .hero__media {
        top: 16px;
        left: -21px;
        right: -21px;
        height: 376px;
        inset-block-end: auto;
    }

    .hero__media::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 160px;
        background: linear-gradient(to top, var(--hero-bg) 12%, rgba(27, 71, 117, 0) 100%);
    }

    /* Верхній край фото так само розчиняється у синьому фоні —
       без жорсткої горизонтальної межі під навігацією. */
    .hero__media::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 140px;
        z-index: 1;
        background: linear-gradient(
            to bottom,
            var(--hero-bg) 0%,
            rgba(27, 71, 117, 0.92) 22%,
            rgba(27, 71, 117, 0.55) 55%,
            rgba(27, 71, 117, 0) 100%
        );
    }

    /* Вкладеність відступів з Figma 294:5193:
       заголовок→підзаголовок 12, лід→опис 20, опис→кнопка 32, низ 48. */
    .hero__inner {
        display: block;
        padding: 0 20px 48px;
    }

    .hero__row {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .hero__lead {
        width: auto;
        gap: 12px;
        padding-right: 0;
    }

    .hero__aside {
        width: auto;
        gap: 32px;
    }

    .hero__note {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -0.28px;
    }

    /* Кнопка і чат стоять в один ряд (Figma 297:7021): 275 + 12 + 48 = 335.
       Чат позиціонуємо абсолютно, щоб не міняти DOM заради мобільного. */
    .hero__aside .btn {
        width: calc(100% - 60px);
        height: 48px;
    }

    .chat-fab {
        position: absolute;
        right: 20px;
        bottom: 48px;
        width: 48px;
        height: 48px;
    }

    /* =========================================================================
       Напрямки перевезень — Figma 356:15422 (h 542)
       Картка вертикальна: ціна → заголовок → маршрут → кнопка на всю ширину.
       ========================================================================= */

    .directions {
        padding-block: 64px;
    }

    .directions__title {
        margin-bottom: 32px;
    }

    .dir-card {
        min-height: 264px;
        gap: 0;
        border-radius: var(--r-card);
    }

    .dir-card__top {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px 24px 0;
    }

    /* Бейдж ціни у макеті стоїть НАД заголовком */
    .dir-card__top .price {
        order: -1;
        padding: 6px 12px;
    }

    .dir-card__top .price__value {
        font-size: 16px;
        line-height: 20px;
        letter-spacing: -0.32px;
    }

    .dir-card__top .price__from {
        line-height: 20px;
    }

    .dir-card__title,
    .dir-card--accent .dir-card__title,
    .directions__grid > .dir-card:nth-child(3) .dir-card__title {
        max-width: none;
    }

    .dir-card__bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 16px 24px 24px;
    }

    .dir-card__route {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: -0.64px;
    }

    .dir-card__bottom .btn {
        width: 100%;
        height: 48px;
    }

    /* =========================================================================
       Розрахунок вартості — Figma 377:9632 (h 705)
       На мобільному немає ні опису, ні фото: тільки заголовок і форма.
       ========================================================================= */

    .calc {
        padding: 64px 20px;
    }

    .calc__inner {
        flex-direction: column;
        gap: 32px;
    }

    .calc__left {
        width: 100%;
        gap: 32px;
    }

    .calc__intro .t-desc {
        display: none;
    }

    .calc__media {
        display: none;
    }

    .calc__form {
        gap: 24px;
    }

    .calc__fields {
        gap: 12px;
    }

    .calc__row {
        flex-direction: column;
        gap: 12px;
    }

    .calc__row .mc-input {
        width: 100%;
        flex: 0 0 auto;
    }

    /* Іконка обміну напрямків на мобільному не використовується */
    .calc__swap {
        display: none;
    }

    .contact-fallback {
        gap: 12px;
    }

    /* =========================================================================
       Послуги — Figma 297:7566 (h 966)
       ========================================================================= */

    .services {
        padding-block: 64px;
    }

    .services__head {
        margin-bottom: 32px;
    }

    .tabs {
        gap: 12px;
        margin-bottom: 16px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: -20px;
        padding-inline: 20px;
    }

    .tabs::-webkit-scrollbar {
        display: none;
    }

    /* У мобільному макеті таба «Всі послуги» немає */
    .tabs .tab:first-child {
        display: none;
    }

    .tab {
        height: 44px;
        padding: 10px 18px;
    }

    /* Картка послуги — Figma 402:16827 (310 × 548) */
    .service-card {
        padding: 8px 8px 16px;
        gap: 12px;
    }

    .service-card__media {
        height: 208px;
    }

    .service-card__body {
        height: auto;
        gap: 20px;
        padding-inline: 12px;
    }

    .service-card__head {
        gap: 16px;
    }

    /* Опис — рівно два рядки в боксі 48px (Figma I402:16827;379:25781) */
    .service-card__text {
        line-height: 24px;
        max-height: 48px;
    }

    .service-card__text-group > * + * {
        margin-top: 12px;
    }

    .service-card__title {
        max-width: none;
    }

    .service-card__actions {
        gap: 16px;
    }

    .services__actions {
        margin-top: 32px;
    }

    .services__actions .btn {
        height: 48px;
    }

    /* =========================================================================
       Чому нас обирають — Figma 297:7752 (h 533)
       На мобільному перші дві картки міняються місцями.
       ========================================================================= */

    .why {
        padding-block: 64px;
    }

    .why__title {
        margin-bottom: 32px;
    }

    .why__grid > .feature:nth-child(1) {
        order: 2;
    }

    .why__grid > .feature:nth-child(2) {
        order: 1;
    }

    .feature {
        min-height: 255px;
        gap: 24px;
        padding: 24px;
    }

    .feature__text > * + * {
        margin-top: 12px;
    }

    .feature__desc {
        height: 59px;
    }

    /* =========================================================================
       Як проходить транспортування — Figma 299:6403 (h 1335)
       ========================================================================= */

    .process {
        padding-block: 64px;
    }

    .process__title {
        margin-bottom: 32px;
    }

    .process__grid {
        flex-direction: column;
        gap: 20px;
    }

    .process__media {
        width: 100%;
        height: 343px;
        flex: 0 0 343px;
        aspect-ratio: auto;
    }

    .process__side {
        width: 100%;
        gap: 24px;
    }

    .step {
        padding-left: 12px;
    }

    .step__inner {
        gap: 8px;
        padding: 20px 24px;
    }

    .step__num {
        font-size: 24px;
        line-height: 28px;
        letter-spacing: -0.72px;
    }

    .step__body {
        gap: 4px;
    }

    .step__desc {
        max-width: none;
    }

    .process__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding-inline: 0;
    }

    .process__actions .btn {
        flex: 0 0 48px;
        height: 48px;
    }

    /* =========================================================================
       Комфортні умови — Figma 299:6494 (h 477)
       ========================================================================= */

    .comfort {
        padding-block: 0 0;
    }

    /* У Figma це текстовий бокс 335×114 (три рядки). Inter трохи вужчий за
       шрифт, який підставила Figma, і вкладається у два — тримаємо висоту боксу. */
    .comfort__title {
        min-height: 114px;
        margin-bottom: 32px;
    }

    .comfort-card {
        min-height: 251px;
        gap: 51px;
        padding: 32px;
    }

    .comfort-card__text {
        display: block;
    }

    .comfort-card__text > * + * {
        margin-top: 12px;
    }

    .comfort-card__text p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-height: 40px;
    }

    .comfort-card .t-h3 {
        font-size: 24px;
        line-height: 28px;
    }

    /* =========================================================================
       Галерея — Figma 299:6679 (h 721)
       ========================================================================= */

    /* Відступ до «Відгуків» +20px (64 → 84) */
    .gallery {
        padding-block: 64px 84px;
    }

    .gallery__head {
        margin-bottom: 32px;
    }

    .gallery__item,
    .gallery__item:last-child {
        flex: 0 0 calc(100vw - 107px);
        width: calc(100vw - 107px);
        max-width: 268px;
        height: 363px;
    }

    .gallery__actions {
        margin-top: 32px;
    }

    .gallery__actions .btn {
        height: 48px;
    }

    /* =========================================================================
       Відгуки — Figma 299:6802 (h 525), картка 404:18538 (310 × 295)
       На мобільному дата переїжджає під текст, у самий низ картки.
       ========================================================================= */

    .reviews {
        padding-block: 0 0;
    }

    .reviews__head {
        margin-bottom: 32px;
    }

    /* Сітка: фото ліворуч на два рядки (рейтинг / автор), далі текст, унизу дата. */
    .review {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 8px;
        align-content: start;
        min-height: 295px;
        padding: 24px;
    }

    .review__body,
    .review__meta,
    .review__top {
        display: contents;
    }

    /* Рядки задані явно: у DOM дата йде перед іменем автора,
       і без цього автопозиціонування ставило її не в той рядок. */
    .review__photo {
        grid-area: 1 / 1 / span 2 / 2;
        width: 56px;
        height: 56px;
    }

    .review__rate {
        grid-area: 1 / 2 / 2 / 3;
        align-self: end;
        gap: 8px;
    }

    /* Google-іконка квадратна: ширина = висота, без width: 100% */
    .review__rate > img:first-child {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        object-fit: contain;
    }

    .review__stars {
        gap: 8px;
    }

    .review__stars img {
        width: 98px;
        height: 18px;
    }

    .review__meta > p {
        grid-area: 2 / 2 / 3 / 3;
        align-self: start;
    }

    .review__content {
        display: block;
        grid-area: 3 / 1 / 4 / -1;
        margin-top: 12px;
    }

    /* Текст обрізається на п'яти рядках — бокс 262×99 у макеті */
    .review__content .t-desc {
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-height: 99px;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -0.28px;
    }

    /* Маршрут — один рядок 262×20, як у макеті (довші назви обрізаються) */
    .review__place {
        height: 20px;
        margin-top: 12px;
    }

    .review__place span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .review__date {
        grid-area: 4 / 1 / 5 / -1;
        margin-top: 12px;
    }

    .reviews__actions {
        margin-top: 32px;
    }

    .reviews__actions .btn {
        height: 48px;
    }

    /* =========================================================================
       Поширені запитання — Figma 299:8208 (h 1765)
       ========================================================================= */

    .faq {
        padding-block: 64px;
    }

    .faq__title {
        margin-bottom: 32px;
    }

    .faq__grid {
        flex-direction: column;
        gap: 32px;
    }

    .faq__form {
        width: 100%;
        flex: 0 0 auto;
        align-items: stretch;
        gap: 24px;
        padding: 24px;
        border-radius: var(--r-card);
    }

    .faq__form-intro {
        gap: 12px;
    }

    .faq__form-intro .t-h3 {
        font-size: 24px;
        line-height: 28px;
        letter-spacing: -0.72px;
    }

    .faq__form-body {
        gap: 20px;
    }

    .faq__fields {
        gap: 20px;
    }

    /* Чотири канали у два ряди: три + один (Figma 299:8218) */
    .channels {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .channel:nth-child(4) {
        flex-basis: 100%;
    }

    .faq__inputs {
        gap: 12px;
    }

    .faq__form .btn {
        height: 48px;
    }

    .faq__list {
        width: 100%;
        flex: 0 0 auto;
        gap: 12px;
    }

    .faq-item {
        padding: 24px;
        border-radius: var(--r-card);
    }

    .faq-item__trigger {
        align-items: flex-start;
        gap: 24px;
    }

    /* Питання переносяться на 2–3 рядки: 20/26 (H5) */
    .faq-item__trigger > span.t-lg {
        max-width: none;
        flex-shrink: 1;
        font-size: 20px;
        line-height: 26px;
        letter-spacing: -0.8px;
    }

    .faq-item.is-open .faq-item__panel {
        margin-top: 12px;
    }

    /* =========================================================================
       SEO-блок — Figma 299:7195 (h 383), картка 335 × 319
       ========================================================================= */

    .cta {
        padding-block: 0 64px;
    }

    .cta__card {
        width: 100%;
        gap: 20px;
        padding: 24px;
        border-radius: var(--r-card);
    }

    /* Згорнутий стан показує чотири рядки — стільки ж, скільки й desktop
       (там 99px при line-height 24). Фіксовані 199px не працювали: на
       ширших мобільних екранах у них уміщався весь текст, і кнопка
       нічого не розгортала. */
    .cta__text {
        height: 80px;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: -0.28px;
    }

    .cta__card .btn {
        height: 52px;
    }

    /* =========================================================================
       Футер — Figma 299:10662 (h 1212), одна колонка
       ========================================================================= */

    .footer {
        padding: 24px;
    }

    .footer__inner {
        gap: 20px;
    }

    .footer__top {
        flex-direction: column;
        gap: 40px;
    }

    .footer__logo {
        margin-bottom: -20px;
    }

    .footer__logo,
    .footer__logo img {
        width: 72px;
        height: 72px;
    }

    .footer__col {
        flex: 0 0 auto;
        width: 100%;
        gap: 16px;
    }

    .footer__contacts {
        width: 100%;
        gap: 24px;
    }

    .footer__contacts-block {
        gap: 12px;
    }

    .footer__contacts-list {
        gap: 8px;
        white-space: normal;
    }

    .footer__cities {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .footer__cities-list {
        flex-wrap: nowrap;
        gap: 5px;
    }

    /* На екранах вужчих за макет список міст переносимо, щоб не було
       горизонтального скролу (у Figma-фреймі 375px він в один рядок). */
    @media (max-width: 359px) {
        .footer__cities-list {
            flex-wrap: wrap;
            row-gap: 8px;
        }
    }

    /* Перші два пункти у макеті — двострокові бокси по 40px */
    .footer__col:first-of-type a:nth-child(-n + 2) {
        min-height: 40px;
    }

    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .footer__legal {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .footer__author {
        width: auto;
        justify-content: flex-start;
        margin-top: 20px;
    }
}

/* ==========================================================================
   Каруселі: жест перетягування
   Виділення тексту й нативний drag зображень перехоплювали свайп,
   тому в межах треків їх вимикаємо.
   ========================================================================== */

[data-slider-track],
.history__panels {
    -webkit-user-select: none;
    user-select: none;
}

[data-slider-track] img,
.history__panels img {
    -webkit-user-drag: none;
}

/* ==========================================================================
   ABOUT US — хлібні крихти на темному hero
   ========================================================================== */

.crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--white);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
}

.crumbs__sep {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
}

/* ==========================================================================
   ABOUT US — Hero
   Каркас .hero / .header / .support успадкований з головної, тому липка
   навігація та кнопка чату працюють тим самим кодом.
   ========================================================================== */

.hero--about .hero__inner {
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 128px var(--gutter) 64px;
}

.hero--about .support {
    position: absolute;
    right: var(--gutter);
    bottom: 64px;
}

.about-hero__body {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.about-hero__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gap);
}

.about-hero__lead {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 620px;
    flex-shrink: 0;
    color: var(--white);
}

.about-hero__lead .t-h1 {
    margin-bottom: 8px;
}

.about-hero__stats {
    display: grid;
    grid-template-columns: repeat(2, 303px);
    gap: var(--gap);
    flex-shrink: 0;
}

.about-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 20px 24px;
    border-radius: 16px;
    background: var(--overlay-12);
    color: var(--white);
}

.about-stat__label {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
    opacity: 0.75;
}

/* Кнопки є тільки в мобільному макеті */
.about-hero__actions {
    display: none;
}

/* ==========================================================================
   ІСТОРІЯ РОЗВИТКУ — новий блок
   ========================================================================== */

.history {
    padding-block: 100px;
}

.history__title {
    margin-bottom: 56px;
}

.history__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    margin-bottom: 40px;
}

/* Пігулки років з'єднані суцільною лінією, що проходить за ними.
   Лінія одна на всю стрічку, тому не може обірватися між парами років —
   у проміжках її видно, під непрозорими пігулками сховано. */
.history__years {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    min-width: 0;
    gap: 36px;
}

.history__years::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    margin-top: -0.5px;
    background: #c8cfd4;
}

.history__year {
    position: relative;
    padding: 16px 28px;
    border-radius: 16px;
    background: var(--blue-100);
    color: var(--muted);
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -0.72px;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.history__year:hover {
    color: var(--black);
}

.history__year.is-active {
    background: var(--grad-tab);
    color: var(--white);
}

.history__panel {
    display: grid;
    grid-template-columns: minmax(0, 639px) minmax(0, 1fr);
    gap: 44px;
    align-items: center;
}

.history__panel[hidden] {
    display: none;
}

.history__media {
    height: 618px;
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--photo-bg);
}

.history__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
    border-radius: var(--r-card);
    background: var(--blue-100);
}

.history__card-year {
    color: var(--muted);
}

.history__mnav {
    margin-top: 32px;
}

/* ==========================================================================
   НАША МІСІЯ ТА ЦІННОСТІ
   Картки цінностей — той самий .feature, що й у «Чому нас обирають».
   Нова тільки велика картка «Наша мета».
   ========================================================================== */

.mission {
    padding-block: 100px;
    background: var(--blue-100);
}

.mission__title {
    margin-bottom: 56px;
}

.mission__grid {
    display: grid;
    grid-template-columns: minmax(0, 539px) minmax(0, 1fr);
    gap: var(--gap);
    align-items: stretch;
}

.mission__goal {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: 32px;
    border-radius: var(--r-card);
    background: var(--white);
}

.mission__goal-logo {
    width: 100px;
    height: 100px;
}

.mission__goal-body {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mission__quote {
    display: block;
    width: 20px;
    height: 14px;
    color: var(--step-line);
}

/* Сітка цінностей повторює .why__grid, лише у дві колонки */
.mission__cards .why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ==========================================================================
   НАША КОМАНДА — новий блок на спільному [data-slider]
   ========================================================================== */

.team {
    padding-block: 50px;
}

.team__head {
    margin-bottom: 56px;
}

.team__viewport {
    overflow: hidden;
}

.team__track {
    display: flex;
    gap: var(--gap);
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.team-card {
    flex: 0 0 423px;
    width: 423px;
    display: flex;
    flex-direction: column;
    padding: 8px 8px 24px;
    border-radius: var(--r-card);
    background: var(--blue-100);
}

.team-card__media {
    height: 260px;
    border-radius: 24px;
    overflow: hidden;
    background: var(--card-img-bg);
}

.team-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 16px 0;
}

.team-card__role {
    color: var(--muted);
}

/* ==========================================================================
   ЛІЦЕНЗІЇ ТА СЕРТИФІКАТИ
   Розмітка й класи — від блоку «Галерея», інші зображення.
   ========================================================================== */

.certs {
    padding-block: 50px 100px;
}

.certs__head {
    margin-bottom: 56px;
}

/* Той самий режим у модалці, коли відкрита група сертифікатів */
.mc-modal--gallery-tall .gal__stage,
.mc-modal--gallery-tall .gal__thumb {
    background: var(--white);
}

.mc-modal--gallery-tall .gal__stage img,
.mc-modal--gallery-tall .gal__thumb img {
    object-fit: contain;
}

@media (max-width: 768px) {

    /* ------------------------------------------------------ about hero --- */

    .hero--about {
        height: auto;
        min-height: 760px;
    }

    .hero--about .hero__media {
        inset: 0;
        height: 100%;
    }

    .hero--about .hero__media::before,
    .hero--about .hero__media::after {
        content: none;
    }

    .hero--about .hero__inner {
        display: flex;
        padding: 76px 20px 32px;
    }

    .hero--about .support {
        right: 20px;
        bottom: 48px;
        width: 48px;
        height: 48px;
    }

    .about-hero__row {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .about-hero__lead {
        width: auto;
        gap: 12px;
    }

    .about-hero__lead .t-h1 {
        margin-bottom: 0;
    }

    /* Другого абзацу в мобільному макеті немає */
    .about-hero__note {
        display: none;
    }

    .about-hero__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .about-stat {
        padding: 16px;
        border-radius: 20px;
    }

    /* CTA-кнопок у мобільному Hero немає. Блок .about-hero__body
       притиснутий до низу через margin-top: auto, тому після їх зняття
       заголовок, опис і картки самі опускаються на їхнє місце, а між
       фотографією та текстом лишається більше повітря. */

    /* --------------------------------------------------------- історія --- */

    .history {
        padding-block: 64px;
    }

    .history__title {
        margin-bottom: 32px;
    }

    .history__bar {
        margin-bottom: 24px;
    }

    /* Стрілки переїжджають під контент, як в інших каруселях */
    .history__bar .slider-nav {
        display: none;
    }

    .history__years {
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        justify-content: flex-start;
        gap: 36px;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-behavior: smooth;
    }

    .history__years::-webkit-scrollbar {
        display: none;
    }

    /* Спільна лінія на мобільному не працює: .history__years тут — контейнер
       з overflow-x, тому absolute-псевдоелемент із left/right розтягується
       лише на видиму ширину, а не на всю прокручувану стрічку. Далі за першим
       екраном лінія просто закінчувалася — звідси розриви 2022—2024 і 2024—2026.
       Тому вимикаємо її й даємо кожній пігулці власний з'єднувач у проміжок. */
    .history__years::before {
        content: none;
    }

    .history__year::after {
        content: "";
        position: absolute;
        left: 100%;
        top: 50%;
        width: 36px;
        height: 1px;
        margin-top: -0.5px;
        background: #c8cfd4;
    }

    .history__year:last-child::after {
        content: none;
    }

    .history__year {
        flex: 0 0 auto;
        padding: 14px 32px;
    }

    .history__panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .history__media {
        height: 300px;
    }

    .history__card {
        padding: 24px;
        gap: 12px;
    }

    /* На мобільному рік читається як окремий заголовок картки:
       .t-h4 тут дає 18px, подвоюємо до 36px. Трекінг узятий за тією ж
       пропорцією 0.03em, що й у решти великих заголовків системи.
       Селектор із двох класів — щоб перебити мобільне правило .t-h4. */
    .history__card .history__card-year {
        font-size: 36px;
        line-height: 42px;
        letter-spacing: -1.08px;
    }

    /* ---------------------------------------------------------- місія --- */

    .mission {
        padding-block: 64px;
    }

    .mission__title {
        margin-bottom: 32px;
    }

    .mission__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .mission__goal {
        gap: 32px;
        padding: 24px;
    }

    /* Картки цінностей гортаються так само, як «Чому нас обирають» */
    .mission__cards .why__grid {
        display: flex;
    }

    /* --------------------------------------------------------- команда --- */

    .team {
        padding-block: 32px;
    }

    .team__head {
        margin-bottom: 24px;
    }

    .team__viewport {
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
    }

    .team__track {
        gap: 12px;
    }

    .team-card {
        flex: 0 0 calc(100vw - 65px);
        width: calc(100vw - 65px);
        max-width: 380px;
    }

    /* ----------------------------------------------------- сертифікати --- */

    /* Відгуки → Ліцензії: така сама відстань, як Галерея → Відгуки.
       .reviews має padding-block: 0 0, тож весь проміжок задає .certs. */
    .certs {
        padding-block: 84px 64px;
    }

    /* Заголовок → картки.
       У CSS тут уже стояли ті самі 32px, що й у .reviews__head, але
       візуально проміжок читався вдвічі більшим: плитка сертифіката біла
       на білому тлі (на відміну від сірої картки відгуку), а object-fit:
       contain додає зверху ~8px леттербоксу. Тому margin зменшено вдвічі —
       щоб оптично збігтися з «Відгуками». */
    .certs__head {
        margin-bottom: 16px;
    }

    .certs .gallery__track {
        gap: 12px;
    }

    /* Каруселі «Галерея», «Відгуки» та «Ліцензії» лежать у .container з
       padding-inline, тому overflow обрізав картку на гутер раніше за край
       екрана. Від'ємне поле виводить в'юпорт до межі viewport, а padding
       повертає стартову позицію — так само, як уже зроблено в «Наша команда».
       .gallery__viewport без уточнення покриває і «Галерею», і «Ліцензії»,
       бо секція сертифікатів перевикористовує ті самі класи. */
    .reviews__viewport,
    .gallery__viewport {
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
    }

    .team__viewport,
    .certs .gallery__viewport {
        overflow: hidden;
    }
}