/* ==========================================================================
   Шрифти
   --------------------------------------------------------------------------
   У макеті всі текстові шари підписані «DM Sans». Але DM Sans не має
   кириличного набору — тому Figma сама підставляє для української мови
   гротеск Helvetica-типу. Це видно в PDF: кругла геометрична «C» у
   «Medical Car» і вужчі, неогротескні літери в «Медичне перевезення».

   Відтворюємо ту саму пару явно, через unicode-range:
     латиниця  → DM Sans   (як у макеті)
     кирилиця  → Inter     (метрично й стилістично близький до Helvetica)

   Обидва — OFL, лежать локально в assets/fonts, зовнішніх запитів немає.
   ========================================================================== */

@font-face {
    font-family: "MC Sans";
    src: url("../fonts/font-7c87a64829.woff2") format("woff2");
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "MC Sans";
    src: url("../fonts/font-49935c4b62.woff2") format("woff2");
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                   U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "MC Sans";
    src: url("../fonts/font-de93fdc85e.woff2") format("woff2");
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "MC Sans";
    src: url("../fonts/font-251d36f2b5.woff2") format("woff2");
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF,
                   U+A640-A69F, U+FE2E-FE2F;
}

/* ==========================================================================
   Medical Car — токени та база
   Значення взяті напряму з Figma (файл l6FuVoNKM8qYs3DRn6dKMn, Home Page 195:6327)
   ========================================================================== */

:root {
    /* Кольори */
    --white: #ffffff;
    --black: #000000;
    --blue-100: #f2f5f7;          /* Blue 100 */
    --hero-bg: #1b4775;           /* фон hero під фото */
    --muted: #9ca2a6;             /* дати, номери кроків */
    --footer-muted: #9db3c1;      /* підписи у футері */
    --input-placeholder: #ced7dd;
    --step-line: #ccd2d6;
    --card-img-bg: #e2e2e2;
    --photo-bg: #f1f1f1;

    --overlay-12: rgba(255, 255, 255, 0.12);
    --overlay-16: rgba(255, 255, 255, 0.16);
    --overlay-60: rgba(255, 255, 255, 0.6);

    /* Градієнти (кути й стопи — точно з Figma) */
    --grad-card: linear-gradient(144.371deg, #13294c 28.513%, #117cc1 98.878%);
    --grad-badge: linear-gradient(117.38deg, #212e5e 18.843%, #107abf 105.8%);
    --grad-badge-card: linear-gradient(115.684deg, #212e5e 18.843%, #107abf 105.8%);
    --grad-icon: linear-gradient(98.417deg, #212e5e 18.843%, #107abf 105.8%);
    --grad-form: linear-gradient(242.881deg, #13294c 38.098%, #117cc1 106.29%);
    --grad-faq: linear-gradient(116.032deg, #13294c 28.513%, #117cc1 98.878%);
    --grad-footer: linear-gradient(161.884deg, #13294c 28.76%, #117cc1 111.2%);
    --grad-tab: linear-gradient(160.793deg, #13294c 28.76%, #117cc1 111.2%);

    /* Радіуси */
    --r-card: 32px;
    --r-media: 40px;
    --r-pill: 50px;
    --r-chip: 100px;
    --r-menu: 25px;
    --r-textarea: 24px;

    /* Сітка */
    --page: 1440px;
    --gutter: 56px;
    --container: 1328px;
    --gap: 24px;
}

/* --------------------------------------------------------------- reset --- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-width: 320px;
    font-family: "MC Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-optical-sizing: none;
    font-weight: 400;
    color: var(--black);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
figure,
dl,
dd {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

button {
    font: inherit;
    color: inherit;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

input,
textarea {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

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

/* H1 — 72/70, letter-spacing -5% */
.t-h1 {
    font-size: 72px;
    line-height: 70px;
    letter-spacing: -3.6px;
    font-weight: 400;
}

/* H2 — 52/60, -5% */
.t-h2 {
    font-size: 52px;
    line-height: 60px;
    letter-spacing: -2.6px;
    font-weight: 400;
}

/* H3 — 32/38, -3% */
.t-h3 {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.96px;
    font-weight: 400;
}

/* H4 — 24/28, -3% */
.t-h4 {
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -0.72px;
    font-weight: 400;
}

/* 20/32, -4% — маршрути, заголовки кроків, питання FAQ */
.t-lg {
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.8px;
    font-weight: 400;
}

/* Body/Description — 18/24, -2% */
.t-desc {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.36px;
    font-weight: 400;
}

/* Body/Button — 16/20, -2%, Medium */
.t-btn {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.32px;
    font-weight: 500;
}

/* Body/Small — 14/20, -2% */
.t-sm {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
    font-weight: 400;
}

/* 14/20, -4% — описи в картках */
.t-sm-tight {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.56px;
    font-weight: 400;
}

/* ------------------------------------------------------------- розкладка --- */

.container {
    width: 100%;
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Шапка секції: заголовок + стрілки слайдера */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
}

.slider-nav {
    display: flex;
    gap: 24px;
    flex-shrink: 0;
}

/* Стрілки на desktop показуються тільки якщо є що листати.
   На mobile навігація лишається завжди — там видно ~1.5 картки. */
.slider-nav.is-idle {
    display: none;
}

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

.slider-nav__btn:hover {
    background: var(--blue-100);
}

/* Стрілка листання — inline-SVG, тому завжди чорна й однакова
   в усіх слайдерах на desktop і mobile. */
.nav-arrow {
    width: 24px;
    height: 24px;
    color: var(--black);
}

.slider-nav__btn[disabled] {
    opacity: 0.4;
    cursor: default;
}

/* ---------------------------------------------------------------- кнопки --- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: var(--r-pill);
    overflow: hidden;
    white-space: nowrap;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.32px;
    font-weight: 500;
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.btn:hover {
    opacity: 0.85;
}

/* біла заливка, чорний текст */
.btn--white {
    background: var(--white);
    color: var(--black);
}

/* чорна заливка, білий текст */
.btn--black {
    background: var(--black);
    color: var(--white);
}

/* Обведені варіанти: padding на 1px менший, щоб разом із бордером
   висота лишалась 48px — як у Figma (241:624 = 272.5×48). */
.btn--outline-light {
    border: 1px solid var(--white);
    color: var(--white);
    padding: 13px 16px;
}

.btn--outline-dark {
    border: 1px solid var(--black);
    color: var(--black);
    padding: 13px 16px;
}

.btn--block {
    width: 100%;
}

/* --------------------------------------------------------- бейдж «від $» --- */

.price {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    border-radius: var(--r-pill);
    overflow: hidden;
}

.price--on-dark {
    background: var(--overlay-12);
}

.price--gradient {
    background: var(--grad-badge);
}

.price__from {
    width: 22px;
    flex-shrink: 0;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.28px;
    color: var(--overlay-60);
}

.price__value {
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -0.96px;
    color: var(--white);
    white-space: nowrap;
}

/* --------------------------------------------------- іконка в градієнті --- */

.icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--grad-icon);
}

.icon-badge img,
.icon-badge svg {
    width: 24px;
    height: 24px;
    color: var(--white);
}

/* Поля вводу описані одним компонентом у css/fields.css
   (дизайн-система Figma: Default / Focus / Filled / Disabled). */

/* --------------------------------------------------- контакти під формою --- */

.contact-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.contact-fallback__label {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
    color: var(--input-placeholder);
}

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

.socials {
    display: flex;
    gap: 12px;
}

.socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-chip);
    background: var(--white);
    overflow: hidden;
    transition: transform 0.2s ease;
}

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

.socials img {
    width: 24px;
    height: 24px;
}

/* ==========================================================================
   Medical Car — секції головної сторінки
   Вертикальні відступи виведені з координат фреймів у Figma.
   ========================================================================== */

/* ==========================================================================
   Шапка (241:425) — лежить поверх hero
   ========================================================================== */

.header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--page);
    margin-inline: auto;
    padding: 16px var(--gutter) 0;
}

.header__left {
    display: flex;
    align-items: center;
    gap: 56px;
}

.header__logo {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: var(--r-menu);
    overflow: hidden;
}

.header__logo img {
    width: 72px;
    height: 72px;
    object-fit: cover;
}

.header__nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 12px;
    border-radius: var(--r-menu);
    background: var(--overlay-16);
    color: var(--white);
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.32px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.28);
}

.menu-item img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.header__right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header__phone {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--white);
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.32px;
    font-weight: 500;
    white-space: nowrap;
}

.header__phone img {
    width: 24px;
    height: 24px;
}

.header__lang {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px;
    border-radius: var(--r-chip);
}

/* Тільки chevron: селектор img:last-child ловив і зображення прапорця,
   бо воно є останнім дочірнім елементом свого span. */
.header__lang > img:last-child {
    width: 16px;
    height: 16px;
}

.header__burger {
    display: none;
}

/* ==========================================================================
   Hero (205:785) — висота 820
   ========================================================================== */

.hero {
    position: relative;
    height: 820px;
    background: var(--hero-bg);
    overflow: hidden;
}

.hero__media {
    position: absolute;
    inset: -38px 0 auto 0;
    height: 938px;
}

/* Пропорції наданого фото (1440×821) майже збігаються з hero (1440×820),
   тому на десктопі показуємо його повністю, без обрізання по вертикалі. */
@media (min-width: 769px) {
    .hero__media {
        inset: 0;
        height: 100%;
    }
}

.hero__media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero__inner {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    max-width: var(--page);
    margin-inline: auto;
    padding: 0 var(--gutter) 64px;
}

.hero__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex: 1 0 0;
    min-width: 0;
}

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

.hero__title {
    white-space: pre-wrap;
}

.hero__aside {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: flex-start;
    width: 330px;
    flex-shrink: 0;
    color: var(--white);
}

.hero__aside .btn {
    height: 48px;
}

/* Плаваюча кнопка чату (205:836) */
.chat-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--r-chip);
    overflow: hidden;
    background: var(--grad-icon);
    box-shadow: 3px 8px 26.7px 0 #15171a;
    transition: transform 0.2s ease;
}

.chat-fab:hover {
    transform: translateY(-2px);
}

.chat-fab img {
    width: 24px;
    height: 24px;
}

/* ==========================================================================
   Напрямки перевезень (195:6380) — 828: 100 / 60 / 56 / 512 / 100
   ========================================================================== */

.directions {
    padding-block: 100px;
}

.directions__title {
    margin-bottom: 56px;
}

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

.dir-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    min-height: 244px;
    border-radius: var(--r-card);
    background: var(--blue-100);
    color: var(--black);
}

.dir-card--accent {
    background: var(--grad-card);
    color: var(--white);
}

.dir-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap);
    padding: 40px 40px 0;
}

/* Ширина заголовка задана в макеті окремо для кожної картки:
   195:6387 = 327, 386:16856 = 371, 195:6419 = 333, 386:16839 = 371 */
.dir-card__title {
    max-width: 371px;
}

.dir-card--accent .dir-card__title {
    max-width: 327px;
}

.directions__grid > .dir-card:nth-child(3) .dir-card__title {
    max-width: 333px;
}

.dir-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    padding: 0 40px 40px;
}

.dir-card__route {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.dir-card__route img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* ==========================================================================
   Калькулятор вартості (265:12079) — висота 889, padding 100/56
   ========================================================================== */

.calc {
    padding: 100px var(--gutter);
    background: var(--grad-form);
    color: var(--white);
}

.calc__inner {
    display: flex;
    align-items: stretch;
    gap: 48px;
    max-width: calc(var(--page) - var(--gutter) * 2);
    margin-inline: auto;
}

.calc__left {
    display: flex;
    flex-direction: column;
    gap: 44px;
    width: 640px;
    flex-shrink: 0;
}

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

.calc__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
}

.calc__fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.calc__row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.calc__row .mc-input {
    width: 300px;
    flex-shrink: 0;
}

.calc__swap {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.calc__media {
    flex: 1 0 0;
    min-width: 0;
    border-radius: var(--r-media);
    overflow: hidden;
    background: var(--white);
}

.calc__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   Послуги (195:7406) — 1143: 100 / 60 / 56 / 827 / 100
   ========================================================================== */

.services {
    padding-block: 100px;
}

.services__head {
    margin-bottom: 56px;
}

.tabs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: var(--r-chip);
    background: var(--blue-100);
    color: var(--black);
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

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

.services__viewport {
    overflow: hidden;
}

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

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

/* Картка послуги (379:25334) */
.service-card {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 426.667px;
    flex: 0 0 426.667px;
    padding: 8px 8px 32px;
    border-radius: var(--r-card);
    background: var(--blue-100);
}

.service-card__media {
    height: 263px;
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--card-img-bg);
    flex-shrink: 0;
}

.service-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-card__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 328px;
    padding-inline: 24px;
}

.service-card__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

/* Блок, а не flex: прямий дитина flex-контейнера втрачає display:-webkit-box
   (браузер блокіфікує його у flow-root), і обрізання рядків не працює. */
.service-card__text-group {
    display: block;
}

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

.service-card__title {
    max-width: 371px;
}

/* Опис обрізаний на двох рядках — у макеті висота фіксована 48px */
.service-card__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 48px;
}

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

/* ==========================================================================
   Чому нас обирають (195:6494) — 922: 100 / 60 / 56 / 606 / 100
   ========================================================================== */

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

.why__title {
    margin-bottom: 56px;
}

.why__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
}

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

/* Блок з тієї ж причини, що й .service-card__text-group */
.feature__text {
    display: block;
}

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

/* Опис обрізаний на трьох рядках — у макеті блок рівно 59px */
.feature__desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 59px;
}

/* ==========================================================================
   Як проходить транспортування (199:341) — 972: 100 / 60 / 56 / 706 / 50
   ========================================================================== */

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

.process__title {
    margin-bottom: 56px;
}

.process__grid {
    display: flex;
    align-items: stretch;
    gap: 40px;
}

.process__media {
    flex: 1 0 0;
    min-width: 0;
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--white);
}

.process__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.process__side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap);
    width: 605px;
    flex-shrink: 0;
}

.steps {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.step {
    padding-left: 24px;
    border-left: 1px solid var(--step-line);
    cursor: pointer;
    outline: none;
}

/* Опис показується тільки в активного кроку — висоти блоку це не змінює:
   активний завжди один. */
.step:not(.step--active) .step__desc {
    display: none;
}

.step:not(.step--active):hover .step__inner {
    background: rgba(242, 245, 247, 0.55);
}

.step:focus-visible .step__inner {
    box-shadow: inset 0 0 0 2px var(--step-line);
}

.step--active {
    border-left-color: var(--black);
}

.step__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 24px;
    border-radius: var(--r-card);
}

.step--active .step__inner {
    background: var(--blue-100);
}

.step__num {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.96px;
    color: var(--muted);
}

/* Блок, а не flex: інакше -webkit-box у описі блокіфікується
   і обрізання рядків перестає працювати. */
.step__body {
    display: block;
}

.step__body > * + * {
    margin-top: 4px;
}

/* Опис обрізається щонайбільше трьома рядками. Разом із вирівняною
   довжиною текстів це тримає висоту блоку однаковою для будь-якого
   активного кроку. */
.step__desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 533px;
}

.process__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-inline: 24px;
}

.process__actions .btn {
    flex: 1 0 0;
    min-width: 0;
}

/* ==========================================================================
   Комфортні умови (201:525) — 581: 50 / 60 / 56 / 315 / 100
   ========================================================================== */

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

.comfort__title {
    margin-bottom: 56px;
}

.comfort__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
}

.comfort-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    min-height: 315px;
    padding: 32px;
    border-radius: var(--r-card);
    background: var(--blue-100);
}

.comfort-card__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}

/* ==========================================================================
   Галерея (202:662) — 739: 50 / 60 / 56 / 419 / 48 / 50
   ========================================================================== */

.gallery {
    padding-block: 50px;
}

.gallery__head {
    margin-bottom: 56px;
}

.gallery__viewport {
    overflow: hidden;
}

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

.gallery__item {
    width: 309px;
    height: 419px;
    flex: 0 0 309px;
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--white);
}

.gallery__item:last-child {
    width: 322px;
    flex-basis: 322px;
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

/* ==========================================================================
   Відгуки (207:863) — 592: 50 / 60 / 56 / 272 / 48 / 50
   ========================================================================== */

.reviews {
    padding-block: 50px;
}

.reviews__head {
    margin-bottom: 56px;
}

.reviews__viewport {
    overflow: hidden;
}

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

.review {
    display: flex;
    align-items: flex-start;
    gap: var(--gap);
    width: 652px;
    flex: 0 0 652px;
    min-height: 272px;
    padding: 24px;
    border-radius: var(--r-card);
    background: var(--blue-100);
}

.review__photo {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 300px;
    overflow: hidden;
    background: var(--photo-bg);
}

.review__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 0 0;
    min-width: 0;
}

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

.review__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.review__rate {
    display: flex;
    align-items: center;
    gap: 8px;
}

.review__rate > img:first-child {
    width: 24px;
    height: 24px;
}

.review__stars {
    display: flex;
    align-items: center;
    gap: 12px;
}

.review__stars img {
    width: 128px;
    height: 24px;
}

.review__score {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.32px;
    font-weight: 500;
}

.review__date {
    color: var(--muted);
    white-space: nowrap;
}

.review__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    flex: 1 0 0;
}

.review__place {
    display: flex;
    align-items: center;
    gap: 8px;
}

.review__place img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

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

/* ==========================================================================
   Поширені запитання (207:1079) — 897: 50 / 60 / 56 / 681 / 50
   ========================================================================== */

.faq {
    padding-block: 50px;
}

.faq__title {
    margin-bottom: 56px;
}

.faq__grid {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

/* Ліва колонка — форма на градієнті */
.faq__form {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 40px;
    flex: 1 0 0;
    min-width: 0;
    padding: 40px;
    border-radius: var(--r-card);
    background: var(--grad-faq);
    color: var(--white);
}

.faq__form-intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.faq__form-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    width: 100%;
}

.faq__fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.channels {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.channel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.channel input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.channel__mark {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 1px solid var(--white);
    border-radius: 50%;
}

.channel input:checked + .channel__mark {
    border-width: 5px;
}

.channel span:last-child {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
}

.faq__inputs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* Права колонка — акордеон */
.faq__list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap);
    width: 651px;
    flex-shrink: 0;
}

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

.faq-item__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    width: 100%;
    text-align: left;
}

.faq-item__trigger img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* У макеті кожне питання займає рівно один рядок (макс. ширина тексту 555px).
   flex-shrink: 0 обов'язковий: без нього Chromium стискає елемент до max-content,
   який рахується без letter-spacing останнього символу, і рядок переноситься. */
.faq-item__trigger > span {
    max-width: 555px;
    flex-shrink: 0;
}

.faq-item__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease, margin-top 0.3s ease;
}

.faq-item__panel > div {
    overflow: hidden;
}

.faq-item.is-open .faq-item__panel {
    grid-template-rows: 1fr;
    margin-top: 12px;
}

/* ==========================================================================
   SEO-блок / CTA (208:1564) — 413: 50 / 263 / 100
   ========================================================================== */

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

.cta__inner {
    display: flex;
    justify-content: center;
}

.cta__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    width: 890px;
    max-width: 100%;
    padding: 40px;
    border-radius: var(--r-card);
    background: var(--blue-100);
}

.cta__text {
    width: 100%;
    height: 99px;
    overflow: hidden;
    transition: height 0.35s ease;
}

.cta__text.is-open {
    height: auto;
}

.cta__text p + p {
    margin-top: 0;
}

.cta__card .btn {
    height: 52px;
}

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

/* «Читати більше» — поточна стрілка; «Приховати» — chevron вершиною вгору.
   Це два різні елементи, а не поворот: так напрямок гарантований. */
.cta__chev {
    display: none;
    color: currentColor;
}

.cta__card .btn[aria-expanded="true"] .cta__arrow {
    display: none;
}

.cta__card .btn[aria-expanded="true"] .cta__chev {
    display: block;
}

/* ==========================================================================
   Футер (241:1135) — 476, padding 56, gap 48
   ========================================================================== */

.footer {
    padding: 56px var(--gutter);
    background: var(--grad-footer);
    color: var(--white);
}

.footer__inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
    max-width: calc(var(--page) - var(--gutter) * 2);
    margin-inline: auto;
}

.footer__top {
    display: flex;
    align-items: flex-start;
    gap: 72px;
}

.footer__logo {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: var(--r-menu);
    overflow: hidden;
}

.footer__logo img {
    width: 72px;
    height: 72px;
    object-fit: cover;
}

.footer__col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 0 0;
    min-width: 0;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
    font-weight: 500;
}

.footer__col a:hover {
    text-decoration: underline;
}

.footer__contacts {
    display: flex;
    flex-direction: column;
    gap: 40px;
    flex-shrink: 0;
}

.footer__contacts-block {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.footer__contacts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
    white-space: nowrap;
}

.footer__schedule {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer__schedule span:first-child {
    color: var(--footer-muted);
}

.footer__cities {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
    flex-wrap: wrap;
}

.footer__cities > img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.footer__cities-list {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.footer__cities-sep {
    width: 1px;
    height: 18px;
    background: currentColor;
    opacity: 0.4;
}

/* У Figma (208:1782) роздільник — вузол висотою 0 з лінією поверх,
   тому він не додає жодного пікселя до висоти футера. */
.footer__divider {
    position: relative;
    height: 0;
    border: 0;
    margin: 0;
    overflow: visible;
}

.footer__divider::before {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer__bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
    color: var(--footer-muted);
}

.footer__legal {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer__author {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 270px;
    flex-shrink: 0;
}

.footer__author img {
    width: 73.763px;
    height: 13.2px;
}

/* ==========================================================================
   Medical Car — адаптив
   Desktop (1440) залишається без змін: усі правила нижче — тільки max-width.
   ========================================================================== */

/* ------------------------------------------------- 1440 → 1200: стискання --- */

@media (max-width: 1400px) {
    :root {
        --gutter: 40px;
    }

    .hero__lead {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        padding-right: 40px;
    }

    .calc__left {
        width: 560px;
    }

    .faq__list {
        width: 560px;
    }

    .process__side {
        width: 520px;
    }

    /* Колонка FAQ вужча за 651px — питанням треба дозволити перенос,
       інакше flex-shrink: 0 виштовхує їх за межі екрана. */
    .faq-item__trigger > span {
        max-width: none;
        flex-shrink: 1;
    }
}

@media (max-width: 1200px) {
    .t-h1 {
        font-size: 56px;
        line-height: 58px;
        letter-spacing: -2.8px;
    }

    .t-h2 {
        font-size: 42px;
        line-height: 50px;
        letter-spacing: -2.1px;
    }

    .header__left {
        gap: 24px;
    }

    .header__nav {
        gap: 6px;
    }

    .menu-item {
        padding: 10px;
        font-size: 15px;
    }

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

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

/* --------------------------------------------------- 1024: планшет --------- */

@media (max-width: 1024px) {
    .header__nav,
    .header__lang {
        display: none;
    }

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

    .header__burger span {
        position: relative;
        display: block;
        width: 18px;
        height: 2px;
        background: var(--white);
    }

    .header__burger span::before,
    .header__burger span::after {
        content: "";
        position: absolute;
        left: 0;
        width: 18px;
        height: 2px;
        background: var(--white);
    }

    .header__burger span::before {
        top: -6px;
    }

    .header__burger span::after {
        top: 6px;
    }

    .hero {
        height: 700px;
    }

    .hero__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

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

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

    .dir-card__title,
    .dir-card--accent .dir-card__title {
        max-width: none;
    }

    .calc__inner {
        flex-direction: column;
    }

    .calc__left {
        width: 100%;
    }

    .calc__media {
        width: 100%;
        aspect-ratio: 16 / 10;
        flex: 0 0 auto;
    }

    .calc__row .mc-input {
        width: auto;
        flex: 1 0 0;
        min-width: 0;
    }

    .process__grid {
        flex-direction: column;
    }

    .process__media {
        width: 100%;
        aspect-ratio: 4 / 3;
        flex: 0 0 auto;
    }

    .process__side {
        width: 100%;
    }

    .step__desc {
        max-width: none;
    }

    .faq__grid {
        flex-direction: column;
    }

    .faq__form,
    .faq__list {
        width: 100%;
        flex: 0 0 auto;
    }

    .faq-item__trigger .t-lg {
        line-height: 28px;
    }
}

/* Діапазон ≤768px повністю описаний у css/mobile.css за макетом
   «Home Page_Mobile» (294:5270) — тут дублювати нічого не потрібно. */

/* --------------------------------------------------------- друк / рух ----- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   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)
       ========================================================================= */

    .gallery {
        padding-block: 64px;
    }

    .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;
    }
}

/* Мобільна навігація каруселі не існує на планшеті й десктопі */
@media (min-width: 769px) {
    .mslider-nav {
        display: none;
    }
}

/* ==========================================================================
   Medical Car — інтерактивні стани
   Джерела: Figma «Home Page . супорт» 296:12040 (dropdown «Про нас»
   296:14123, панель Support 301:12443), «Home Page . Послуги» 296:14913,
   «Home Page . Напрямки перевезень» 296:14141.

   Файл тільки додає стани — базова геометрія шапки та hero не змінюється.
   ========================================================================== */

/* --------------------------------------------------------- обгортка пункту --- */

.menu-item-wrap,
.header__lang-wrap {
    position: relative;
    display: flex;
}

/* Кнопка-пункт меню має бути візуально ідентична посиланню .menu-item */
button.menu-item {
    cursor: pointer;
}

/* Відкритий пункт стає білим із темним текстом (Figma: стан Open) */
.menu-item[aria-expanded="true"] {
    background: var(--white);
    color: var(--black);
}

.menu-item[aria-expanded="true"]:hover {
    background: var(--white);
}

.header__lang[aria-expanded="true"] {
    background: var(--white);
}

/* Chevron: розвертається і темніє разом із кнопкою */
.menu-item__chevron {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.menu-item[aria-expanded="true"] .menu-item__chevron,
.header__lang[aria-expanded="true"] .menu-item__chevron {
    transform: rotate(180deg);
    filter: brightness(0);
}

/* ------------------------------------------------------------- випадайка --- */

/* Figma 296:14123: білий фон, radius 16, padding 8, gap 8,
   тінь drop-shadow(0 4px 4px rgba(198,198,198,0.5)). */
.dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border-radius: 16px;
    background: var(--white);
    filter: drop-shadow(0 4px 4px rgba(198, 198, 198, 0.5));
}

.dropdown[hidden] {
    display: none;
}

/* Ширини взяті з макета — від них залежать переноси у пунктах */
.dropdown--about      { width: 259px; }
.dropdown--directions { width: 306px; }
.dropdown--services   { width: 240px; }
.dropdown--lang       { width: 169px; }

.dropdown__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    color: #1e1e1e;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
    transition: background 0.15s ease;
}

.dropdown__item:hover,
.dropdown__item:focus-visible {
    background: var(--blue-100);
}

.dropdown__item--lang.is-active {
    background: var(--blue-100);
    font-weight: 500;
}

/* У макеті перші три пункти займають по два рядки (бокс 56px).
   Inter вужчий за шрифт, який підставила Figma, і вкладає третій пункт
   в один рядок — тримаємо висоту боксу з макета. */
.dropdown--directions .dropdown__item:nth-child(-n + 3) {
    min-height: 56px;
}

/* overflow: hidden обов'язковий — без нього зображення не обрізається
   по радіусу і прапорець виглядає квадратним. */
.dropdown__item--lang .flag {
    width: 24px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
}

.dropdown__item--lang .flag img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

/* ============================================================== Support ====
   Figma 301:12443: панель 296×372, фон #F2F5F7, radius 16, padding 12,
   gap 8, тінь 0 6px 12px rgba(23,23,23,0.08).
   Позиція: правий край збігається з кнопкою (56px від краю сторінки),
   низ панелі на 9px вище за кнопку (319..691 при кнопці 700..756).
   ========================================================================== */

/* Обгортка займає рівно місце кнопки (56×56), тому додавання панелі
   ніяк не впливає на розкладку hero. */
.support {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

/* Праві краї панелі та кнопки збігаються (Figma: обидва 1384),
   низ панелі на 9px вище за кнопку (691 проти 700). */
.support__panel {
    z-index: 94;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 296px;
    padding: 12px;
    border-radius: 16px;
    background: var(--blue-100);
    box-shadow: 0 6px 12px 0 rgba(23, 23, 23, 0.08);
}

.support__panel[hidden] {
    display: none;
}

.support__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--white);
    color: var(--black);
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.32px;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.support__item img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.support__item:hover {
    background: #e7ebef;
}

.support__item--cta {
    padding: 14px 24px;
    background: var(--black);
    color: var(--white);
}

.support__item--cta:hover {
    background: var(--navy, #13294c);
    opacity: 0.9;
}

/* Кнопка Support: іконка чату ↔ хрестик.
   Пришпилена до обгортки, щоб зміна іконки (24px → 32px) не могла
   зсунути кнопку у flex-розкладці hero. */
/* Кнопка зафіксована відносно viewport — не рухається під час скролу.
   .support лишається в потоці як 56×56 плейсхолдер, тому геометрія hero
   не змінюється. */
/* Зсув від початкового положення: 20px вправо, 32px вниз
   (було right 56 / bottom 64). */
.support > .chat-fab {
    position: fixed;
    right: 36px;
    bottom: 32px;
    z-index: 95;
    width: 56px;
    height: 56px;
    border: 0;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(19, 41, 76, 0.24);
}

.support > .chat-fab:hover {
    box-shadow: 0 10px 26px rgba(19, 41, 76, 0.3);
}

.support__panel {
    position: fixed;
    right: 36px;
    bottom: 97px;
}

.chat-fab .chat-fab__icon--close {
    display: none;
    width: 32px;
    height: 32px;
}

.chat-fab[aria-expanded="true"] .chat-fab__icon--chat {
    display: none;
}

.chat-fab[aria-expanded="true"] .chat-fab__icon--close {
    display: block;
}

.chat-fab[aria-expanded="true"] .chat-fab__icon--chat {
    display: none;
}

/* ----------------------------------------------------------------- адаптив --- */

@media (max-width: 1024px) {
    /* Меню на планшеті приховане — випадайки разом із ним */
    .menu-item-wrap .dropdown {
        display: none;
    }
}

@media (max-width: 768px) {
    /* Мобільних станів цих елементів у макеті немає: панель просто
       не повинна виходити за екран і не ламати мобільний hero.
       Позиціонування кнопки переносимо на обгортку, щоб панель
       прив'язувалась саме до неї. */
    .support {
        position: absolute;
        right: 20px;
        bottom: 48px;
        width: 48px;
        height: 48px;
    }


    .support__panel {
        right: 16px;
        bottom: 73px;
        width: min(296px, calc(100vw - 40px));
    }

    .support > .chat-fab {
        right: 16px;
        bottom: 16px;
        width: 48px;
        height: 48px;
    }

    .support__item {
        white-space: normal;
        text-align: center;
    }

    .dropdown--lang {
        right: 0;
        left: auto;
    }
}


/* ==========================================================================
   Липка навігація на головній
   У межах hero — поточний стан поверх фото. Після hero — світла панель,
   зафіксована зверху: ховається при скролі вниз, повертається при русі вгору.
   ========================================================================== */

.header--stuck {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 90;
    padding-block: 12px;
    background: var(--white);
    box-shadow: 0 2px 12px rgba(19, 41, 76, 0.08);
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

.header--stuck.is-hidden {
    transform: translateY(-100%);
}

/* Поки триває перше перемикання в липкий стан — без анімації,
   щоб панель не «блимала». */
.header--stuck.no-transition {
    transition: none;
}

/* Світлий вигляд: сірі пігулки, темний текст та іконки.
   Ті самі правила, що й для внутрішніх сторінок. */
.header--stuck .menu-item,
.mc-body--on-light .menu-item {
    background: var(--blue-100);
    color: var(--black);
}

.header--stuck .menu-item:hover,
.mc-body--on-light .menu-item:hover {
    background: #e7ebef;
}

.header--stuck .menu-item[aria-expanded="true"] {
    background: var(--white);
    box-shadow: inset 0 0 0 1px var(--step-line);
}

.header--stuck .menu-item__chevron,
.header--stuck .header__phone img {
    filter: brightness(0);
}

.header--stuck .header__phone {
    color: var(--black);
}

.header--stuck .header__right .btn--outline-light {
    border-color: var(--black);
    color: var(--black);
}

.header--stuck .header__burger {
    background: rgba(33, 46, 94, 0.16);
}

.header--stuck .header__burger span,
.header--stuck .header__burger span::before,
.header--stuck .header__burger span::after {
    background: var(--black);
}

@media (max-width: 768px) {
    .header--stuck {
        padding: 6px 20px;
    }
}

/* ==========================================================================
   Medical Car — поля вводу (дизайн-система)

   Один компонент із двома варіантами і чотирма станами.
   Значення зчитані з еталонного рендера дизайн-системи:

     тло фрейму системи ......... #C9C9C9
     dark  default fill ......... rgba(255,255,255,.12)   (201 → 207)
     dark  disabled fill ........ rgba(255,255,255,.08)   (201 → 205)
     dark  focus border ......... rgba(255,255,255,.32)   (201 → 218)
     light default fill ......... #FFFFFF
     light disabled fill ........ #E3E3E3
     light focus border ......... #CED7DD
     light placeholder .......... #9CA2A6

   Розміри (44px, radius 50, padding 10/16) взяті з реальних екранів —
   у фреймі дизайн-системи інший масштаб.
   ========================================================================== */

:root {
    --field-h: 44px;
    --field-radius: var(--r-pill);
    --field-pad-y: 10px;
    --field-pad-x: 16px;
    --field-font: 14px;
    --field-lh: 20px;

    --field-dark-bg: rgba(255, 255, 255, 0.12);
    --field-dark-bg-hover: rgba(255, 255, 255, 0.16);
    --field-dark-bg-disabled: rgba(255, 255, 255, 0.08);
    --field-dark-border: rgba(255, 255, 255, 0.32);
    --field-dark-text: var(--white);
    --field-dark-placeholder: var(--input-placeholder);
    --field-dark-disabled-text: rgba(255, 255, 255, 0.35);

    --field-light-bg: var(--white);
    --field-light-bg-hover: #fafbfc;
    --field-light-bg-disabled: #e3e3e3;
    --field-light-border: var(--input-placeholder);
    --field-light-text: var(--black);
    --field-light-placeholder: var(--muted);
    --field-light-disabled-text: var(--muted);
}

/* --------------------------------------------------------------- база --- */

.mc-input,
.mc-phone__code {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--field-h);
    padding: var(--field-pad-y) var(--field-pad-x);
    /* Прозора рамка тримає розмір незмінним між станами */
    border: 1px solid transparent;
    border-radius: var(--field-radius);
    font-size: var(--field-font);
    line-height: var(--field-lh);
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Текстове поле: у світлій модалці 105px, на темних секціях 97px —
   так задано в макетах відповідних екранів. */
.mc-input--area {
    height: 105px;
    align-items: flex-start;
    border-radius: var(--r-textarea);
    resize: none;
}

.mc-input--dark.mc-input--area {
    height: 97px;
    padding: 12px var(--field-pad-x);
}

.mc-input[hidden],
.mc-phone[hidden] {
    display: none;
}

/* ------------------------------------------------- варіант: світлий --- */

.mc-input,
.mc-phone__code {
    background: var(--field-light-bg);
    color: var(--field-light-text);
}

.mc-input::placeholder {
    color: var(--field-light-placeholder);
    opacity: 1;
}

.mc-input:hover:not(:disabled):not(:focus) {
    background: var(--field-light-bg-hover);
}

.mc-input:focus,
.mc-input:focus-visible {
    outline: none;
    border-color: var(--field-light-border);
}

.mc-input:disabled {
    background: var(--field-light-bg-disabled);
    color: var(--field-light-disabled-text);
    cursor: not-allowed;
}

.mc-input:disabled::placeholder {
    color: var(--field-light-disabled-text);
}

/* --------------------------------------------------- варіант: темний --- */

.mc-input--dark {
    background: var(--field-dark-bg);
    color: var(--field-dark-text);
}

.mc-input--dark::placeholder {
    color: var(--field-dark-placeholder);
    opacity: 1;
}

.mc-input--dark:hover:not(:disabled):not(:focus) {
    background: var(--field-dark-bg-hover);
}

.mc-input--dark:focus,
.mc-input--dark:focus-visible {
    border-color: var(--field-dark-border);
}

.mc-input--dark:disabled {
    background: var(--field-dark-bg-disabled);
    color: var(--field-dark-disabled-text);
}

.mc-input--dark:disabled::placeholder {
    color: var(--field-dark-disabled-text);
}

/* ------------------------------------------------ телефон + код країни --- */

.mc-phone {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

/* Ширина фіксована: при зміні країни (+380 → +44) сусідні поля
   не рухаються і поле номера не перебудовується. */
.mc-phone__code {
    width: 129px;
    flex-shrink: 0;
    gap: 10px;
    justify-content: flex-start;
    cursor: pointer;
    white-space: nowrap;
}

.mc-phone__chev {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-left: auto;
    transition: transform 0.2s ease;
}

/* На темних блоках chevron має бути білим */
.mc-phone:has(.mc-input--dark) .mc-phone__chev {
    filter: brightness(0) invert(1);
}

.mc-phone__code[aria-expanded="true"] .mc-phone__chev {
    transform: rotate(180deg);
}

/* Фокус на будь-якій частині підсвічує обидві — як у дизайн-системі */
.mc-phone:focus-within .mc-phone__code,
.mc-phone:focus-within .mc-input {
    border-color: var(--field-light-border);
}

.mc-phone:has(.mc-input--dark) .mc-phone__code {
    background: var(--field-dark-bg);
    color: var(--field-dark-text);
}

.mc-phone:has(.mc-input--dark):focus-within .mc-phone__code,
.mc-phone:has(.mc-input--dark):focus-within .mc-input {
    border-color: var(--field-dark-border);
}

.mc-phone:has(.mc-input--dark) .mc-phone__code:hover {
    background: var(--field-dark-bg-hover);
}

.mc-phone__code:disabled,
.mc-phone:has(.mc-input:disabled) .mc-phone__code {
    background: var(--field-light-bg-disabled);
    color: var(--field-light-disabled-text);
    pointer-events: none;
}

.mc-phone:has(.mc-input--dark:disabled) .mc-phone__code {
    background: var(--field-dark-bg-disabled);
    color: var(--field-dark-disabled-text);
}

/* Базовий прапорець — один вигляд усюди: 24×18, радіус 4, обрізання.
   overflow: hidden обов'язковий, інакше зображення не скруглюється. */
.flag {
    width: 24px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background: var(--white);
}

.flag img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    max-width: none;
    object-fit: cover;
}

/* Прапор України: заливка фоном, щоб усередині не було світлих зон */
.flag--ua {
    background: linear-gradient(to bottom, #0057b7 0 50%, #ffd700 50% 100%);
}

/* --------------------------------------------- випадайка коду країни --- */

.dropdown--cc {
    top: calc(100% + 8px);
    left: 0;
    width: 232px;
}

.dropdown--cc .dropdown__item {
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.dropdown--cc .dropdown__item.is-active {
    background: var(--blue-100);
}

/* -------------------------------------------------------------- адаптив --- */

@media (max-width: 768px) {
    .mc-phone {
        flex-wrap: nowrap;
    }

    .dropdown--cc {
        width: min(232px, calc(100vw - 80px));
    }
}

/* ==========================================================================
   Medical Car — модалки, bottom sheets і мобільне меню
   Джерела: Figma 301:18455, 377:14451, 296:10722, 377:20061, 301:20240,
   377:20954, 301:21052, 377:21819, 377:15417, 377:22640, 404:20454.
   Файл лише додає нові шари — існуючі секції не зачіпає.
   ========================================================================== */

/* ------------------------------------------------------------- оверлей --- */

.mc-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(5, 5, 5, 0.8);
}

.mc-overlay[hidden] {
    display: none;
}

/* Блокування скролу фонової сторінки */
body.mc-locked {
    overflow: hidden;
}

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

.mc-modal {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mc-modal[hidden] {
    display: none;
}

/* Діалог отримує фокус програмно — власної обводки йому не треба */
.mc-modal:focus,
.mc-modal:focus-visible {
    outline: none;
}

/* Хрестик: без системної обводки, але з видимим станом при наведенні
   та при навігації з клавіатури */
.mc-modal__close,
.mc-card__close {
    outline: none;
    border: 0;
    background: none;
    -webkit-tap-highlight-color: transparent;
}

.mc-modal__close:focus-visible,
.mc-card__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 4px;
}

/* Картка модалки — Figma: bg #F2F5F7, radius 32, padding 32 */
.mc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 622px;
    max-width: 100%;
    padding: 32px;
    border-radius: 32px;
    background: var(--blue-100);
}

.mc-card--center {
    align-items: center;
    gap: 24px;
    width: 598px;
}

.mc-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 28px;
}

.mc-card__title {
    margin: 0;
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.96px;
    font-weight: 400;
}

.mc-card--center .mc-card__title {
    text-align: center;
}

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

.mc-card--center .mc-card__desc {
    text-align: center;
}

.mc-card__close {
    display: flex;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.mc-card__close:hover {
    opacity: 0.65;
}

.mc-card__close img {
    width: 32px;
    height: 32px;
}

/* У станів «успіх/помилка» хрестик стоїть у куті картки (Figma 301:21044) */
.mc-card--center .mc-card__close {
    position: absolute;
    top: 24px;
    right: 32px;
}

/* -------------------------------------------------- форма консультації --- */

.mc-radios {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.mc-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
}

.mc-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mc-radio img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.mc-radio__on {
    display: none;
}

.mc-radio input:checked ~ .mc-radio__on {
    display: block;
}

.mc-radio input:checked ~ .mc-radio__off {
    display: none;
}

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

.mc-cform__inputs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}









.mc-cform__submit {
    width: 100%;
    height: 48px;
}

/* Поки обов'язкові поля не заповнені — дія недоступна */
.btn:disabled,
.btn[disabled] {
    background: #e3e3e3;
    color: var(--muted);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 1;
}

.mc-card__contacts {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.mc-card__contacts-label,
.mc-card__phone {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
}

.mc-socials {
    display: flex;
    gap: 12px;
}

.mc-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 100px;
    overflow: hidden;
    background: var(--white);
    transition: transform 0.15s ease;
}

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

.mc-socials img {
    width: 24px;
    height: 24px;
}

/* ---------------------------------------------------- успіх / помилка --- */

.mc-status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--grad-icon);
}

.mc-status-icon img {
    width: 40px;
    height: 40px;
}

.mc-status-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.mc-status-text .mc-card__title {
    width: 478px;
    max-width: 100%;
}

.mc-status-text .mc-card__desc {
    width: 497px;
    max-width: 100%;
}

.mc-status-actions {
    display: flex;
    gap: 12px;
}

.mc-status-actions .btn {
    height: 48px;
}

.mc-status-actions__call {
    width: 218px;
}

/* ---------------------------------------------------------- Оберіть місто --- */

.mc-modal--city .mc-modal__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    width: 977px;
    max-width: 100%;
}

.mc-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}

.mc-modal__title {
    margin: 0;
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.96px;
    font-weight: 400;
    color: var(--white);
}

.mc-modal__close {
    display: flex;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.mc-modal__close:hover {
    opacity: 0.7;
}

.mc-modal__close img {
    width: 32px;
    height: 32px;
}

.city-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 100px;
    gap: 16px;
    width: 100%;
}

.city-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px;
    border-radius: 24px;
    overflow: hidden;
    background: var(--blue-100);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.city-card:hover {
    background: #e7ebef;
}

.city-card__name {
    flex: 1 0 0;
    min-width: 0;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -0.72px;
}

.city-card__go {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: var(--r-pill);
    overflow: hidden;
    background: linear-gradient(135.296deg, #13294c 28.76%, #117cc1 111.2%);
}

.city-card__go img {
    width: 24px;
    height: 24px;
}

/* ------------------------------------------- Оберіть спосіб зв'язку --- */

.mc-contact-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mc-card__title--sm {
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -0.8px;
    color: #1e1e1e;
}

/* Панель Support на десктопі вже покриває цей сценарій */
.mc-modal--contact {
    display: none;
}

/* ==========================================================================
   Мобільне меню — Figma 377:22640 (закрите) / 404:20454 (розкрите)
   ========================================================================== */

.mmenu {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--blue-100);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mmenu[hidden] {
    display: none;
}

.mmenu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 4px 20px 0;
    flex-shrink: 0;
}

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

.mmenu__logo {
    border-radius: 16.667px;
    overflow: hidden;
    flex-shrink: 0;
}

.mmenu__logo img {
    object-fit: cover;
}

.mmenu__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mmenu__chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 0;
    border-radius: 20px;
    background: rgba(33, 46, 94, 0.16);
    cursor: pointer;
}

.mmenu__chip img {
    width: 24px;
    height: 24px;
}

.mmenu__cta {
    height: 40px;
}

.mmenu__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 20px 24px;
}

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

/* Пункт меню: біла пігулка 40px, radius 25, текст 16/20 medium */
.mmenu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 12px;
    border: 0;
    border-radius: 25px;
    background: var(--white);
    color: var(--black);
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.32px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.mmenu__item img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.mmenu__item[aria-expanded="true"] img {
    transform: rotate(180deg);
}

/* Розкрита група — біла картка, що займає реальну висоту в потоці
   (Figma 404:20936: 335×548, padding 12, radius 16) */
.mmenu__group {
    display: flex;
    flex-direction: column;
    border-radius: 25px;
    background: var(--white);
    transition: border-radius 0.2s ease;
}

.mmenu__group:has(.mmenu__item[aria-expanded="true"]) {
    border-radius: 16px;
    padding: 12px;
}

.mmenu__group .mmenu__item {
    background: transparent;
}

/* У розкритому стані рядок стає просто заголовком висотою 20px */
.mmenu__group:has(.mmenu__item[aria-expanded="true"]) .mmenu__item {
    height: 20px;
    padding: 0;
    border-radius: 0;
}

.mmenu__panel {
    padding: 0 12px;
}

.mmenu__panel[hidden] {
    display: none;
}

.mmenu__group .mmenu__panel {
    padding: 12px 0 0;
}

/* Поза групою (перший пункт «Про нас») панель — окрема біла картка */
.mmenu__list > .mmenu__panel {
    padding: 12px;
    border-radius: 16px;
    background: var(--white);
}

.mmenu__sub-item {
    position: relative;
    display: block;
    padding: 16px 0;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.32px;
    color: var(--black);
}

/* Лінія-роздільник псевдоелементом, щоб не збільшувати висоту пункту */
.mmenu__sub-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid #eaecef;
}

.mmenu__sub-item:last-child {
    padding-bottom: 0;
}

/* Перемикач мов — Figma 404:21336 */
.mmenu__lang {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 16px;
    background: var(--white);
}

/* Обидва сегменти рівно по 50% — активний стан змінює лише фон */
.mmenu__lang-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    padding: 8px;
    border-radius: 8px;
    color: #1e1e1e;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
}

.mmenu__lang-item.is-active {
    background: var(--blue-100);
}

.mmenu__lang-item .flag {
    width: 24px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background: var(--white);
}

.mmenu__lang-item .flag img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    max-width: none;
}

/* ==========================================================================
   Мобільні версії модалок — bottom sheets, притиснуті до низу viewport
   ========================================================================== */

@media (max-width: 768px) {

    /* Sheet-модалки притискаються до низу без жодного зазору */
    .mc-modal--sheet {
        align-items: flex-end;
        padding: 0;
    }

    .mc-modal--sheet .mc-card {
        width: 100%;
        max-height: 100dvh;
        gap: 16px;
        padding: 20px;
        border-radius: 16px 16px 0 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Заголовок модалки на мобільному — 20/26 (Figma 377:20536) */
    .mc-card__title {
        font-size: 20px;
        line-height: 26px;
        letter-spacing: -0.8px;
    }

    .mc-card__desc {
        font-size: 16px;
        line-height: 20px;
        letter-spacing: -0.32px;
    }

    .mc-card__head {
        align-items: flex-start;
        height: 32px;
    }

    .mc-radios {
        gap: 12px;
        flex-wrap: nowrap;
    }

    .mc-card--center {
        gap: 24px;
        padding-block: 20px;
    }

    .mc-card--center .mc-card__close {
        top: 20px;
        right: 20px;
    }

    .mc-status-text {
        gap: 12px;
    }

    .mc-status-text .mc-card__title {
        width: auto;
        font-size: 24px;
        line-height: 28px;
        letter-spacing: -0.72px;
    }

    .mc-status-text .mc-card__desc {
        width: auto;
    }

    .mc-status-actions {
        width: 100%;
        gap: 12px;
    }

    .mc-status-actions .btn {
        flex: 1 0 0;
        min-width: 0;
    }

    .mc-status-actions__call {
        width: auto;
    }

    /* Оберіть місто на мобільному — вертикальний список (Figma 377:15338) */
    .mc-modal--city {
        padding: 20px;
    }

    .mc-modal--city .mc-modal__inner {
        gap: 24px;
        width: 100%;
    }

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

    .city-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        gap: 8px;
    }

    .city-card {
        padding: 12px;
    }

    /* На мобільному замість десктопної панелі Support — bottom sheet */
    .mc-modal--contact {
        display: flex;
    }

    .support__panel {
        display: none !important;
    }
}

/* Дуже низькі екрани — вміст модалки скролиться всередині, не сторінка */
@media (max-height: 620px) {
    .mc-modal {
        align-items: flex-start;
    }

    .mc-modal--sheet {
        align-items: flex-end;
    }

    .mc-card {
        max-height: calc(100dvh - 48px);
        overflow-y: auto;
    }
}

/* ==========================================================================
   Галерея на весь екран — Figma 301:13501 (desktop) / 384:20257 (mobile)
   Використовує той самий overlay, що й решта модалок.
   ========================================================================== */

/* Вертикальний відступ 40px зверху й знизу — контент ніколи не впирається
   у межі екрана (Figma лишає ~56px, мінімум за вимогою — 40px). */
.mc-modal--gallery {
    padding: 40px 0;
    overflow: hidden;
}

.gal {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    max-width: var(--page);
    height: min(790px, 100%);
    padding-inline: var(--gutter);
}

.gal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-shrink: 0;
}

/* На невисоких екранах зменшуємо проміжок, щоб фото лишалось якомога більшим */
@media (max-height: 760px) {
    .gal {
        gap: 24px;
    }
}

.gal__body {
    display: flex;
    align-items: stretch;
    gap: 16px;
    flex: 1 0 0;
    min-height: 0;
}

/* Велике фото зафіксоване: скролиться лише колонка мініатюр */
.gal__stage {
    flex: 1 0 0;
    min-width: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--photo-bg);
}

.gal__stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gal__thumbs {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 249px;
    flex-shrink: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--footer-muted) transparent;
}

.gal__thumbs::-webkit-scrollbar {
    width: 8px;
}

.gal__thumbs::-webkit-scrollbar-track {
    border-radius: 100px;
    background: transparent;
}

.gal__thumbs::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background: var(--footer-muted);
}

.gal__thumb {
    display: block;
    width: 100%;
    height: 164px;
    flex: 0 0 164px;
    padding: 0;
    border: 4px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: var(--photo-bg);
    /* Фон не заходить під рамку — інакше він просвічує крізь прозору
       рамку неактивних мініатюр і виглядає як біла обводка. */
    background-clip: padding-box;
    cursor: pointer;
}

/* Активна мініатюра — біла обводка; неактивні лишаються без обводки
   (рамка прозора, щоб розміри й сітка не стрибали при перемиканні). */
.gal__thumb.is-active {
    border-color: var(--white);
}

.gal__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Стрілки і крапки — тільки в мобільному макеті */
.gal__nav {
    display: none;
}

@media (max-width: 768px) {
    .gal {
        gap: 24px;
        height: 100%;
        padding-inline: 20px;
    }

    .gal__body {
        flex-direction: column;
        gap: 16px;
        flex: 1 1 auto;
        min-height: 0;
    }

    /* У макеті фото 482px; на нижчих екранах стискається, щоб зберегти
       відступи зверху та знизу. */
    .gal__stage {
        flex: 1 1 auto;
        min-height: 0;
        max-height: 482px;
    }

    .gal__thumbs,
    .gal__nav {
        flex-shrink: 0;
    }

    /* На мобільному мініатюри — горизонтальний ряд 93px */
    .gal__thumbs {
        flex-direction: row;
        gap: 8px;
        width: 100%;
        height: 93px;
        overflow-x: auto;
        overflow-y: hidden;
    }

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

    .gal__thumb {
        flex: 1 0 0;
        min-width: 0;
        width: auto;
        height: 93px;
        border-width: 2px;
    }

    .gal__nav {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .gal__arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        border: 1px solid var(--step-line);
        border-radius: var(--r-pill);
        background: var(--white);
        cursor: pointer;
    }

    .gal__arrow img {
        width: 24px;
        height: 24px;
    }

    .gal__dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        flex: 1 0 0;
        min-width: 0;
    }

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

    .gal__dots span.is-active {
        width: 22px;
        background: var(--white);
    }
}

/* ==========================================================================
   Сторінка «Послуги» — Figma 261:7344 (desktop) / 379:23816 (mobile)
   Верхній блок сторінки: крихти + заголовок + фільтри.
   Решта (картки, FAQ, футер) — існуючі компоненти головної.
   ========================================================================== */

/* Відступи виведені з Figma 261:7344: крихти на y=121, заголовок на 156,
   таби на 265, картки на 333, футер на 2743 (сторінка 3219). */
.page-head {
    padding-block: 33px 0;
}

.page-head__crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.28px;
}

.page-head__crumbs a {
    color: rgba(0, 0, 0, 0.6);
}

.page-head__crumbs a:hover {
    color: var(--black);
}

.page-head__sep {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--muted);
}

.page-head__title {
    margin-top: 15px;
}

/* На сторінці «Послуги» блок карток іде одразу під фільтрами */
.page-services {
    padding-block: 49px 121px;
}

.page-services .tabs {
    margin-bottom: 24px;
}

/* Сітка карток на сторінці «Послуги» — 3 колонки, як на головній */
.mc-grid--3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
    align-items: start;
}

.mc-grid--3 > .service-card {
    width: auto;
    flex: 0 0 auto;
    max-width: none;
}

/* Приховані фільтром картки */
.service-card[hidden] {
    display: none;
}

/* --------------------------------------------------------- світла шапка ---
   На внутрішніх сторінках шапка стоїть у потоці на білому тлі
   (Figma 261:7344), а не поверх hero. */
.mc-body--on-light .header {
    position: static;
    margin-inline: auto;
    padding-bottom: 0;
}

.mc-body--on-light .menu-item {
    background: var(--blue-100);
    color: var(--black);
}

.mc-body--on-light .menu-item:hover {
    background: #e7ebef;
}

.mc-body--on-light .menu-item__chevron,
.mc-body--on-light .header__phone img,
.mc-body--on-light .header__lang .menu-item__chevron {
    filter: brightness(0);
}

.mc-body--on-light .header__phone {
    color: var(--black);
}

.mc-body--on-light .header__right .btn--outline-light {
    border-color: var(--black);
    color: var(--black);
}

.mc-body--on-light .header__burger {
    background: rgba(33, 46, 94, 0.16);
}

.mc-body--on-light .faq {
    padding-bottom: 108px;
}

.mc-body--on-light .header__burger span,
.mc-body--on-light .header__burger span::before,
.mc-body--on-light .header__burger span::after {
    background: var(--black);
}

@media (max-width: 1200px) {
    .mc-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .mc-grid--3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .mc-grid--3 > .service-card {
        width: auto;
    }
}

@media (max-width: 768px) {
    /* Мобільні відступи з Figma 379:23816 (без 59px мокапу статус-бару):
       крихти на 69, заголовок на 99, таби на 167. */
    .page-head {
        padding-block: 17px 0;
    }

    .page-head__title {
        margin-top: 10px;
    }

    .page-services {
        padding-block: 30px 56px;
    }

    .mc-body--on-light .faq {
        padding-bottom: 56px;
    }
}

/* ==========================================================================
   Success-стан форми «Поширені запитання»
   Показується всередині синього блоку замість полів — окремої модалки немає.
   ========================================================================== */

/* Іконка, заголовок і підзаголовок — один контейнер із тим самим фоном,
   який раніше мало коло під галочкою. */
.faq__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 32px 24px;
    border-radius: var(--r-card);
    background: var(--overlay-16);
    color: var(--white);
    text-align: center;
}

.faq__success[hidden] {
    display: none;
}

/* Атрибут hidden сам по собі не перебиває заданий display —
   явно вимикаємо поля й кнопку, коли показуємо success. */
.faq__inputs[hidden],
.btn[hidden] {
    display: none;
}

/* Коло біле, галочка чорна (той самий asset, перефарбований фільтром) */
.faq__success-icon {
    background: var(--white);
}

.faq__success-icon img {
    filter: brightness(0);
}

.faq__success-title {
    margin: 0;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -0.72px;
    font-weight: 400;
}

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

@media (max-width: 768px) {
    .faq__success {
        gap: 16px;
        padding: 24px 16px;
    }

    .faq__success-title {
        font-size: 20px;
        line-height: 26px;
        letter-spacing: -0.8px;
    }
}



/* ==========================================================================
   Autofill — браузер не має підміняти фон наших полів
   WebKit малює для :-webkit-autofill власну блакитну заливку і ігнорує
   звичайний background. Тому фон повертаємо внутрішньою тінню, колір
   тексту — через -webkit-text-fill-color, а сам системний фон обрізаємо
   до гліфів (background-clip: text), щоб він не просвічував крізь
   напівпрозорі темні поля. Величезна затримка transition не дає WebKit
   повернути системний колір анімацією.
   ========================================================================== */

.mc-input:-webkit-autofill,
.mc-input:-webkit-autofill:hover,
.mc-input:-webkit-autofill:focus,
.mc-input:-webkit-autofill:active {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-box-shadow: inset 0 0 0 1000px var(--field-light-bg);
    box-shadow: inset 0 0 0 1000px var(--field-light-bg);
    -webkit-text-fill-color: var(--field-light-text);
    caret-color: var(--field-light-text);
    transition: background-color 100000s ease-in-out 0s;
}

.mc-input:-webkit-autofill:hover:not(:disabled):not(:focus) {
    -webkit-box-shadow: inset 0 0 0 1000px var(--field-light-bg-hover);
    box-shadow: inset 0 0 0 1000px var(--field-light-bg-hover);
}

.mc-input--dark:-webkit-autofill,
.mc-input--dark:-webkit-autofill:hover,
.mc-input--dark:-webkit-autofill:focus,
.mc-input--dark:-webkit-autofill:active {
    -webkit-box-shadow: inset 0 0 0 1000px var(--field-dark-bg);
    box-shadow: inset 0 0 0 1000px var(--field-dark-bg);
    -webkit-text-fill-color: var(--field-dark-text);
    caret-color: var(--field-dark-text);
}

.mc-input--dark:-webkit-autofill:hover:not(:disabled):not(:focus) {
    -webkit-box-shadow: inset 0 0 0 1000px var(--field-dark-bg-hover);
    box-shadow: inset 0 0 0 1000px var(--field-dark-bg-hover);
}

/* Firefox та інші рушії: стандартний селектор, окремим правилом —
   інакше невідомий :-webkit-autofill знеціннить увесь список. */
.mc-input:autofill,
.mc-input:autofill:hover,
.mc-input:autofill:focus {
    background: var(--field-light-bg);
    color: var(--field-light-text);
    filter: none;
}

.mc-input--dark:autofill,
.mc-input--dark:autofill:hover,
.mc-input--dark:autofill:focus {
    background: var(--field-dark-bg);
    color: var(--field-dark-text);
    filter: none;
}

/* Medical Car — дрібні правки під ACF-рефакторинг (2.0) */
.comfort__grid .comfort-card:nth-child(2) .t-h3 { max-width: 217px; }

/* Відгуки: Google-іконка може бути посиланням (клік → відгук у Google).
   Обгортка <a> успадковує розміри/поведінку від <img>, дизайн не змінюється. */
.review__rate > a:first-child { display: inline-flex; flex-shrink: 0; line-height: 0; }
.review__rate > a:first-child img { width: 24px; height: 24px; object-fit: contain; }
@media (max-width: 768px) {
    .review__rate > a:first-child img { width: 24px; height: 24px; }
}