/* ══════════════════════════════════════════════════════════════════════════
   Контакти — /kontakty/ (templates/kontakty.php)

   Портовано з `contacts-page-template/contact-page.css` +
   `contacts-refinements.css` замовника: перенесено ФІНАЛЬНИЙ стан каскаду
   (другий файл перевизначає більшу частину першого), звірений числами в
   браузері.

   ЩО НЕ ПЕРЕНОСИЛОСЬ (уже є спільним):
     .contact-logo-strip / .logo-track — секція global/clients.
     .faq-list / .faq-item шаблону      — спільний акордеон .faq__list / .faq-item*.
     .prototype-note, .draft-link, .form-status — демо-режим форм шаблону
       (чернетка листа через mailto). Форми тут справжні — JetFormBuilder.

   ФОРМИ. Розмітку полів генерує JetFormBuilder (.jet-form-builder*), тому
   секція 05 стилізує саме її, в межах картки .contacts-form. Півширинні
   поля позначені в самій формі класом is-half на input — рядок-обгортку
   плагін класом не мітить, звідси :has().

   ПЕРЕЙМЕНУВАННЯ під конвенцію теми (префікс contacts-):
     offices-grid article → .contacts-office      channel-grid a → .contacts-channel
     trust-showcase / trust-grid → .contacts-trust__*
     contact-form → .contacts-form                team-person → .contacts-person
     services-grid article → .contacts-service

   01 · Оболонка, типографіка, кнопки
   02 · Хіро
   03 · Контактна інформація
   04 · Чому нам довіряють
   05 · Форми
   06 · Команда
   07 · Послуги
   08 · FAQ
   09 · Адаптив
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · Оболонка ──────────────────────────────────────────────────────── */
.contacts-page {
    overflow: clip;
    background:
        radial-gradient(circle at 12% 9%, rgba(0, 152, 240, .1), transparent 26%),
        radial-gradient(circle at 92% 48%, rgba(76, 141, 255, .07), transparent 30%),
        var(--color-bg);
}

.contacts-hero,
.contacts-channels,
.contacts-trust,
.contacts-forms,
.contacts-team,
.contacts-services { position: relative; }

.contacts-channels,
.contacts-trust,
.contacts-forms,
.contacts-team,
.contacts-services { padding: 104px 0; }

/* База — через :where(): на сторінці стоять спільні блоки (стрічка
   global/clients, FAQ, поля JetFormBuilder), і .contacts-page h2 (0,1,1)
   перебивав би їхні однокласові правила — та сама пастка, що на
   /partnery-ta-kliyenty/ зробила заголовок стрічки 48px. */
:where(.contacts-page) h1,
:where(.contacts-page) h2,
:where(.contacts-page) h3 {
    margin: 0;
    color:  var(--color-text);
}

:where(.contacts-page) h2 {
    max-width:      1050px;
    font-size:      clamp(28px, 4vw, 48px);
    font-weight:    300;
    line-height:    1.12;
    letter-spacing: -1.5px;
}

:where(.contacts-page) h3 {
    font-size:      20px;
    line-height:    1.4;
    letter-spacing: -.4px;
}

.contacts-page h2 .is-accent {
    display:                 inline-block;
    font-weight:             600;
    letter-spacing:          -1px;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                   transparent;
    -webkit-text-fill-color: transparent;
}

:where(.contacts-page) p {
    margin:      0;
    color:       var(--color-text-soft);
    font-size:   16px;
    line-height: 1.7;
}

.contacts-channels__head,
.contacts-trust__head,
.contacts-forms__head,
.contacts-team__head,
.contacts-services__head {
    max-width:     900px;
    margin-bottom: 50px;
}

.contacts-trust__head { margin-bottom: 32px; }

/* ── Кнопки (локально, як на решті сторінок) ────────────────────────────── */
.btn {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    box-sizing:      border-box;
    cursor:          pointer;
    text-decoration: none;
}

.btn--primary {
    font-size:      var(--fs-button);
    line-height:    var(--lh-button);
    letter-spacing: var(--ls-button);
}

.btn--lg { min-width: 270px; }

.btn--outline {
    min-width:        270px;
    border:           1px solid color-mix(in srgb, var(--color-sky) 50%, transparent);
    border-radius:    10px;
    background-color: color-mix(in srgb, var(--color-bg-alt) 55%, transparent);
    color:            var(--color-sky);
    font-size:        var(--fs-button);
    line-height:      var(--lh-button);
    transition:       border-color var(--transition),
                      background-color var(--transition),
                      color var(--transition);
}

.btn--outline:hover,
.btn--outline:focus-visible {
    border-color:     var(--color-sky);
    background-color: var(--surface-soft);
    color:            var(--color-text);
}

.contacts-page .btn {
    max-width:   100%;
    height:      auto;
    min-height:  50px;
    padding:     14px 22px;
    white-space: normal;
    text-align:  center;
}

.contacts-page .btn__label {
    min-width:   0;
    line-height: 1.4;
}

.contacts-page .btn .icon { flex-shrink: 0; }

.contacts-page a:focus-visible {
    outline:        2px solid #9edaff;
    outline-offset: 4px;
}

/* ── 02 · Хіро ──────────────────────────────────────────────────────────── */
.contacts-hero {
    display:     flex;
    align-items: flex-start;
    min-height:  630px;
    padding:     72px 0 104px;
    background:  linear-gradient(120deg, #031c45 10%, #041a3e 55%, #020e25 100%);
}

/* Фото команди — праворуч, не ширше 1280px, пропорції кадру 1774×887.
   Маска гасить лівий край і верх/низ, радіальне затемнення (::before) —
   ліву частину під текстом. */
.contacts-hero__image {
    position:     absolute;
    top:          50%;
    right:        0;
    width:        min(100%, 1280px);
    aspect-ratio: 1774 / 887;
    transform:    translateY(-50%);
    background:   center / contain no-repeat;
    -webkit-mask-image:
        linear-gradient(90deg, transparent, #000 22%, #000 94%, transparent),
        linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
    mask-image:
        linear-gradient(90deg, transparent, #000 22%, #000 94%, transparent),
        linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-composite: source-in;
    mask-composite:         intersect;
}

.contacts-hero__image::before {
    content:        "";
    position:       absolute;
    inset:          0;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 115% at 0% 50%, #031c45 0%, rgba(3, 28, 69, .98) 38%, rgba(3, 28, 69, .78) 60%, rgba(3, 28, 69, .3) 80%, transparent 100%);
}

.contacts-hero__layout {
    position: relative;
    z-index:  1;
    width:    100%;
}

.contacts-hero__content {
    max-width: 820px;
    /* Верхній відступ тепер тримає смуга під крихти (css/main.css). */
    padding:   0 0 45px;
}


.contacts-hero__title {
    max-width:      760px;
    margin-bottom:  25px;
    font-size:      clamp(40px, 3vw, var(--fs-h1));
    font-weight:    300;
    line-height:    1.05;
    letter-spacing: var(--ls-h1);
    text-wrap:      balance;
    color:          var(--color-text-light);
}

/* Акцент тут — окремий рядок, що не переноситься (inline-block), тож
   градієнт на самому фрагменті безпечний. Нижній падінг з від'ємним
   маржином — щоб background-clip не зрізав хвіст «у». */
.contacts-hero__title .is-accent {
    display:                 inline-block;
    padding-bottom:          .14em;
    margin-bottom:           -.14em;
    font-weight:             600;
    line-height:             1.18;
    letter-spacing:          -1px;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                   transparent;
    -webkit-text-fill-color: transparent;
}

.contacts-hero__lead {
    max-width:      690px;
    margin-bottom:  31px;
    font-size:      18.5px;
    line-height:    31px;
    letter-spacing: var(--ls-lead);
}

.contacts-hero__proof {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   10px;
    max-width:             890px;
    margin:                48px 0 0;
    padding:               16px 20px;
    list-style:            none;
    border:                .5px solid rgba(190, 218, 255, .2);
    border-radius:         14px;
    background:            linear-gradient(135deg, rgba(55, 104, 164, .25), rgba(12, 45, 87, .34), rgba(3, 20, 50, .24));
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter:         blur(14px);
}

.contacts-hero__proof-item {
    display:      flex;
    align-items:  center;
    gap:          8px;
    min-width:    0;
    padding:      4px 14px;
    border-right: .5px solid rgba(120, 181, 255, .18);
    color:        #dbe8ff;
    font-size:    14px;
    line-height:  1.5;
}

.contacts-hero__proof-item:last-child { border-right: 0; }

.contacts-hero__proof-icon {
    flex:  none;
    color: #74baff;
}

/* ── 03 · Контактна інформація ──────────────────────────────────────────── */
.contacts-channels__hours {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         10px;
    color:       #e7f1ff;
    font-weight: 500;
}

.contacts-channels__hours-value {
    padding:       7px 13px;
    border:        1px solid #6599e1;
    border-radius: 8px;
    background:    #204574;
    box-shadow:    0 3px 16px rgba(49, 123, 243, .18);
    color:         #fff;
    font-weight:   700;
    white-space:   nowrap;
}

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

.contacts-office,
.contacts-service {
    min-width:     0;
    padding:       38px;
    border:        .5px solid rgba(79, 185, 255, .42);
    border-radius: 20px;
    background:    linear-gradient(145deg, #17365f, #081d40);
    box-shadow:    inset 0 1px rgba(194, 221, 255, .08);
}

.contacts-office__num,
.contacts-service__num {
    display:        block;
    margin-bottom:  28px;
    color:          #74baff;
    font-size:      13px;
    letter-spacing: .18em;
}

.contacts-office__title { font-size: 25px; }

.contacts-office__address {
    font-style: normal;
    color:      #c4d3ea;
}

.contacts-office__line,
.contacts-office__fax {
    display:     block;
    margin:      8px 0;
    line-height: 1.7;
}

.contacts-office__fax {
    margin:      12px 0;
    font-size:   13px;
    line-height: 1.6;
}

.contacts-office__phone {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           fit-content;
    max-width:       100%;
    min-height:      48px;
    margin:          20px 0 14px;
    padding:         12px 20px;
    border:          1px solid #699eec;
    border-radius:   10px;
    background:      linear-gradient(135deg, #27549a, #17396d);
    box-shadow:      0 4px 18px rgba(37, 109, 237, .18), inset 0 1px rgba(255, 255, 255, .12);
    color:           #f2f7ff;
    font-size:       17px;
    font-weight:     600;
    line-height:     1.4;
    text-decoration: none;
    transition:      box-shadow var(--transition), border-color var(--transition), background var(--transition);
}

.contacts-office__phone:hover {
    border-color: #9cccff;
    background:   linear-gradient(135deg, #326bc1, #204987);
    box-shadow:   0 6px 28px rgba(56, 132, 255, .42);
}

.contacts-office__email {
    display:               block;
    width:                 fit-content;
    max-width:             100%;
    margin-top:            8px;
    padding:               10px 0;
    color:                 #a6d7ff;
    text-decoration:       underline;
    text-underline-offset: 4px;
    overflow-wrap:         anywhere;
}

.contacts-channels__list {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   10px;
    margin-top:            18px;
    list-style:            none;
}

.contacts-channel {
    display:         block;
    height:          100%;
    padding:         20px;
    border:          .5px solid rgba(79, 185, 255, .3);
    border-radius:   12px;
    background:      #061d48;
    text-decoration: none;
    transition:      background var(--transition);
}

.contacts-channel:hover { background: #153b67; }

.contacts-channel__label {
    display:        block;
    margin-bottom:  8px;
    color:          #74baff;
    font-size:      11px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.contacts-channel__value {
    color:     #edf3ff;
    font-size: 14px;
}

.contacts-channels__messengers {
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px 18px;
    margin-top:  22px;
    color:       #bcd0ed;
    font-size:   14px;
}

.contacts-channels__messenger { color: #91c8ff; }

/* Відступ зверху — на телефоні рядок месенджерів переноситься, і
   останнє посилання впиралося впритул у примітку. */
.contacts-page .contacts-channels__note {
    max-width:  740px;
    margin-top: 12px;
    font-size:  12px;
}

/* ── 04 · Чому нам довіряють ────────────────────────────────────────────── */
.contacts-trust {
    background: radial-gradient(ellipse at 80% 35%, rgba(34, 91, 155, .13), transparent 65%);
}

/* Картки показників лежать ПОВЕРХ колажу: обидва — в одній клітинці гріда. */
.contacts-trust__showcase {
    display:   grid;
    isolation: isolate;
}

.contacts-trust__projects {
    grid-area:     1 / 1;
    align-self:    stretch;
    margin:        0;
    overflow:      hidden;
    border:        1px solid rgba(118, 173, 237, .24);
    border-radius: 20px;
    background:    #041a37;
}

.contacts-trust__img {
    display:         block;
    width:           100%;
    height:          auto;
    min-height:      540px;
    aspect-ratio:    1832 / 859;
    object-fit:      cover;
    object-position: right center;
}

.contacts-trust__caption {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: space-between;
    gap:             10px;
    padding:         18px 24px;
    border-top:      1px solid rgba(118, 173, 237, .18);
    color:           #acc7e9;
    font-size:       12px;
    letter-spacing:  .04em;
}

.contacts-trust__caption-label { color: #8fc7ff; }

.contacts-trust__stats {
    z-index:               1;
    grid-area:             1 / 1;
    align-self:            center;
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   12px;
    width:                 48%;
    margin-bottom:         52px;
    padding:               24px;
}

.contacts-trust__stat {
    position:      relative;
    min-width:     0;
    padding:       20px 18px;
    border:        1px solid rgba(118, 173, 237, .23);
    border-radius: 16px;
    background:    linear-gradient(135deg, rgba(16, 44, 81, .97), rgba(8, 28, 56, .94));
    box-shadow:    inset 0 1px rgba(211, 232, 255, .05);
}

.contacts-trust__stat::after {
    content:    "";
    position:   absolute;
    top:        0;
    left:       22px;
    width:      42px;
    height:     1px;
    background: #78baff;
}

.contacts-trust__value {
    display:                 block;
    margin-bottom:           14px;
    font-size:               30px;
    font-weight:             500;
    line-height:             1.1;
    letter-spacing:          -.03em;
    background-image:        var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    color:                   transparent;
    -webkit-text-fill-color: transparent;
}

.contacts-trust__stat-title {
    margin-bottom: 10px;
    font-size:     17px;
    line-height:   1.35;
}

.contacts-page .contacts-trust__stat-text {
    font-size:   13px;
    line-height: 1.6;
}

/* ── 05 · Форми (JetFormBuilder) ────────────────────────────────────────── */
.contacts-forms {
    background: linear-gradient(180deg, rgba(5, 25, 61, .08), rgba(5, 25, 61, .5));
}

.contacts-forms__grid {
    display:               grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap:                   18px;
    align-items:           start;
}

.contacts-form {
    display:       grid;
    gap:           20px;
    min-width:     0;
    padding:       32px;
    border:        .5px solid rgba(79, 185, 255, .42);
    border-radius: 20px;
    background:    linear-gradient(145deg, #17365f, #081d40);
    box-shadow:    inset 0 1px rgba(194, 221, 255, .08);
}

.contacts-form__head {
    display:       flex;
    align-items:   baseline;
    gap:           18px;
    margin-bottom: 10px;
}

.contacts-form__num {
    color:          #74baff;
    font-size:      12px;
    letter-spacing: .16em;
}

.contacts-form__title {
    font-size:   26px;
    font-weight: 500;
}

/* Сама форма: поля стовпцем з кроком 20px, як у шаблоні. */
.contacts-form .jet-form-builder {
    display:        grid;
    row-gap:        20px;
    column-gap:     16px;
    margin:         0;
}

.contacts-form--estimate .jet-form-builder { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.contacts-form .jet-form-builder > * { grid-column: 1 / -1; }

.contacts-form--estimate .jet-form-builder-row:has(.is-half) { grid-column: auto; }

.contacts-form .jet-form-builder-row {
    display:   grid;
    gap:       8px;
    min-width: 0;
    margin:    0;
    padding:   0;
}

.contacts-form .jet-form-builder__label { margin: 0; }

.contacts-form .jet-form-builder__label-text {
    color:     #bcd0ed;
    font-size: 13px;
}

.contacts-form .jet-form-builder__required { color: #74baff; }

.contacts-form .jet-form-builder__field-wrap { min-width: 0; }

.contacts-form input.jet-form-builder__field:not([type="file"]),
.contacts-form select.jet-form-builder__field,
.contacts-form textarea.jet-form-builder__field {
    box-sizing:    border-box;
    width:         100%;
    max-width:     100%;
    border:        .5px solid rgba(111, 174, 255, .38);
    border-radius: 8px;
    outline:       0;
    background:    rgba(2, 20, 51, .76);
    color:         #edf3ff;
    font:          inherit;
    font-size:     16px;
    transition:    border-color var(--transition), box-shadow var(--transition);
}

.contacts-form input.jet-form-builder__field:not([type="file"]),
.contacts-form select.jet-form-builder__field {
    height:  48px;
    padding: 0 14px;
}

.contacts-form select.jet-form-builder__field {
    padding-right:      42px;
    appearance:         none;
    background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2374baff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7' d='m5.5 7.5 4.5 4.5 4.5-4.5'/%3E%3C/svg%3E");
    background-repeat:  no-repeat;
    background-position: right 14px center;
}

.contacts-form select.jet-form-builder__field option {
    background: #081d40;
    color:      #edf3ff;
}

/* Висоти — як rows="5" / rows="4" у шаблоні замовника (157 / 131px). */
.contacts-form textarea.jet-form-builder__field {
    min-height: 157px;
    padding:    14px;
    resize:     vertical;
}

.contacts-form--estimate textarea.jet-form-builder__field { min-height: 131px; }

.contacts-form .jet-form-builder__field:focus {
    border-color: #65bdff;
    box-shadow:   0 0 0 3px rgba(62, 164, 255, .1);
}

.contacts-form .jet-form-builder__field:focus-visible {
    outline:        2px solid #9edaff;
    outline-offset: 2px;
}

/* Помилки валідації. Форма на нативній валідації браузера (підказка біля
   поля), тому підсвічуємо :user-invalid — лише після взаємодії з полем, а
   не одразу на порожній формі. field-has-error — клас серверної валідації. */
.contacts-form .jet-form-builder__field:user-invalid,
.contacts-form .jet-form-builder-row.field-has-error .jet-form-builder__field { border-color: #ff8a8a; }

.contacts-form .error-message,
.contacts-form .jet-form-builder-file-upload__errors {
    color:     #ffb4b4;
    font-size: 12px;
}

.contacts-form .jet-form-builder__desc small,
.contacts-form .jet-form-builder-file-upload__message small {
    color:     #92a9c9;
    font-size: 12px;
}

/* Зона файлів. Нативний input розтягнутий прозорим шаром на всю зону —
   тому і клік, і перетягування файлів працюють без власного JS. */
.contacts-form .jet-form-builder-file-upload {
    position:        relative;
    display:         grid;
    justify-items:   center;
    align-content:   center;
    gap:             6px;
    min-height:      145px;
    padding:         54px 24px 20px;
    border:          1px dashed rgba(105, 190, 255, .58);
    border-radius:   12px;
    background:      rgba(10, 65, 127, .14);
    text-align:      center;
    transition:      background var(--transition), box-shadow var(--transition);
}

.contacts-form .jet-form-builder-file-upload::before {
    content:   "＋";
    position:  absolute;
    top:       18px;
    left:      50%;
    transform: translateX(-50%);
    color:     #74baff;
    font-size: 30px;
    line-height: 1;
}

.contacts-form .jet-form-builder-file-upload:hover,
.contacts-form .jet-form-builder-file-upload:focus-within {
    background: rgba(24, 126, 219, .22);
    box-shadow: inset 0 0 30px rgba(52, 170, 255, .12);
}

.contacts-form .jet-form-builder-file-upload:focus-within {
    outline:        2px solid #80bdff;
    outline-offset: 4px;
}

.contacts-form .jet-form-builder-file-upload__fields {
    position: absolute;
    inset:    0;
}

/* width: auto !important у CSS плагіна — тому розтягуємо через inset, а
   не width/height: абсолютний елемент із left+right займає всю ширину. */
.contacts-form .jet-form-builder-file-upload__input {
    position: absolute;
    inset:    0;
    height:   100%;
    opacity:  0;
    cursor:   pointer;
}

.contacts-form__drop-hint {
    display:        grid;
    gap:            4px;
    pointer-events: none;
}

.contacts-form__drop-hint strong {
    color:     #e5f0ff;
    font-size: 14px;
}

.contacts-form__drop-hint small {
    color:     #92a9c9;
    font-size: 12px;
}

/* Контейнер прев'ю: у плагіна min-height 100px навіть без файлів. Над
   прозорим input (z-index), щоб кнопка «видалити» файл клікалась. */
.contacts-form .jet-form-builder-file-upload__content {
    position:   relative;
    z-index:    1;
    display:    block;
    width:      100%;
    min-width:  0;
    min-height: 0;
}

.contacts-form .jet-form-builder-file-upload__files {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             8px;
}

.contacts-form .jet-form-builder-file-upload__files:not(:empty) { margin-top: 10px; }

/* Прев'ю файлу: у плагіна — плитка 100×100 під зображення. Для креслень
   і моделей — рядок на всю ширину зони з назвою й кнопкою «видалити». */
.contacts-form .jet-form-builder-file-upload__files { flex-direction: column; }

.contacts-form .jet-form-builder-file-upload__file {
    display:          flex;
    align-items:      center;
    justify-content:  flex-end;
    width:            100%;
    height:           36px;
    margin:           0;
    padding:          0 8px;
    border:           1px solid rgba(105, 190, 255, .4);
    border-radius:    8px;
    background-color: rgba(2, 20, 51, .76);
    background-image: none;
}

.contacts-form .jet-form-builder-file-upload__file img { display: none; }

.contacts-form .jet-form-builder-file-upload__file-remove {
    position:        static;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           24px;
    height:          24px;
    color:           #9fc6ee;
    opacity:         1;
    background:      none;
}

.contacts-form .jet-form-builder-file-upload__file-remove:hover { color: #fff; }

.contacts-form .jet-form-builder-file-upload__file-remove svg {
    width:  14px;
    height: 14px;
}

.contacts-form .jet-form-builder-file-upload__file-remove svg path { fill: currentColor; }

/* Назва файлу. У прев'ю плагін кладе лише blob-посилання, а ім'я — в
   data-file-name кнопки «видалити». Кнопка стоїть у потоці (static), тож
   псевдоелемент позиціюється від усього рядка; pointer-events: none —
   клік по назві не видаляє файл. */
.contacts-form .jet-form-builder-file-upload__file-remove::before {
    content:        attr(data-file-name);
    position:       absolute;
    top:            50%;
    right:          40px;
    left:           12px;
    overflow:       hidden;
    color:          #e5f0ff;
    font-size:      12px;
    line-height:    1.3;
    text-align:     left;
    white-space:    nowrap;
    text-overflow:  ellipsis;
    transform:      translateY(-50%);
    pointer-events: none;
}

.contacts-form .jet-form-builder-file-upload__loader { display: none; }

.contacts-form .jet-form-builder-file-upload__errors.is-hidden { display: none; }

/* Кнопка відправки — .btn .btn--primary сайту (класи й відблиск додає
   Theme\Forms\render()). */
.contacts-form .jet-form-builder__submit-wrap { margin-top: 4px; }

/* button.jet-form-builder__submit у плагіна — justify-content: flex-start. */
.contacts-page .contacts-form .jet-form-builder__submit {
    display:         inline-flex;
    justify-content: center;
    width:           100%;
    min-height:      52px;
    height:          auto;
    border:          1px solid rgba(255, 255, 255, .2);
    font-family:     inherit;
}

.contacts-form .jet-form-builder__submit[disabled],
.contacts-form .jet-form-builder__submit.is-loading {
    cursor:  progress;
    opacity: .7;
}

/* Повідомлення після відправки. */
.contacts-form .jet-form-builder-messages-wrap:empty { display: none; }

.contacts-form .jet-form-builder-message {
    margin:        0;
    padding:       14px 18px;
    border:        0;
    border-left:   2px solid #71afff;
    text-align:    left;
    border-radius: 0 8px 8px 0;
    background:    #11284b;
    color:         #d7e7ff;
    font-size:     14px;
    line-height:   1.6;
}

.contacts-form .jet-form-builder-message--success { border-left-color: #58d69b; }

.contacts-form .jet-form-builder-message--error { border-left-color: #ff8a8a; }

/* ── 06 · Команда ───────────────────────────────────────────────────────── */
.contacts-team__people {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   22px;
    margin-bottom:         30px;
}

.contacts-person {
    min-width:     0;
    padding:       30px;
    border:        1px solid rgba(125, 176, 238, .28);
    border-radius: 18px;
    background:    linear-gradient(145deg, #15335a, #081c3c);
}

.contacts-person__identity {
    display:        flex;
    align-items:    center;
    gap:            18px;
    padding-bottom: 24px;
    border-bottom:  1px solid rgba(125, 176, 238, .18);
}

.contacts-person__portrait {
    display:       grid;
    flex:          0 0 76px;
    place-items:   center;
    width:         76px;
    height:        88px;
    border:        1px solid rgba(129, 195, 255, .3);
    border-radius: 12px;
    background:    linear-gradient(135deg, #214b79, #12294b);
    color:         #a9d8ff;
    font-size:     24px;
    font-weight:   300;
}

.contacts-person__portrait--photo { object-fit: cover; }

.contacts-person__name {
    margin-bottom: 8px;
    font-size:     25px;
    line-height:   1.2;
}

.contacts-page .contacts-person__role {
    color:       #93c5fc;
    font-size:   12px;
    line-height: 1.5;
}

/* Без біографії розділювач під іменем висів би над порожнечею. */
.contacts-person__identity:last-child {
    padding-bottom: 0;
    border-bottom:  0;
}

.contacts-person__bio { padding-top: 20px; }

.contacts-page .contacts-person__bio p {
    margin-bottom: 14px;
    font-size:     15px;
    line-height:   1.75;
}

.contacts-page .contacts-person__bio p:last-child { margin-bottom: 0; }

/* ── 07 · Послуги ───────────────────────────────────────────────────────── */
.contacts-services { isolation: isolate; }

.contacts-services__bg {
    position:       absolute;
    z-index:        -1;
    inset:          0;
    pointer-events: none;
    background:     url('../../img/contacts-services-bg.webp') center right / cover no-repeat;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 8%, #000 22%, #000 78%, rgba(0, 0, 0, .35) 92%, transparent 100%),
        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .35) 8%, #000 24%, #000 76%, rgba(0, 0, 0, .35) 92%, transparent 100%);
    mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 8%, #000 22%, #000 78%, rgba(0, 0, 0, .35) 92%, transparent 100%),
        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .35) 8%, #000 24%, #000 76%, rgba(0, 0, 0, .35) 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite:         intersect;
}

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

/* Колонка з текстом, що розтягується: кнопки двох карток стоять на одній
   лінії, навіть коли описи різної довжини (помітно на планшеті). */
.contacts-service {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    background:     linear-gradient(145deg, rgba(23, 54, 95, .95), rgba(8, 29, 64, .9));
}

.contacts-service__title {
    margin-bottom: 10px;
    font-size:     25px;
    font-weight:   500;
}

.contacts-service__text {
    flex:       1 0 auto;
    min-height: 84px;
}

.contacts-service__btn { margin-top: 15px; }

/* ── 08 · FAQ ───────────────────────────────────────────────────────────── */
/* Акордеон — спільний блок main.css; тут хром секції, як на /blog/, /partnery-ta-kliyenty/. */
.contacts-faq {
    position:   relative;
    isolation:  isolate;
    overflow:   hidden;
    padding:    92px 0 clamp(190px, 23vw, 340px);
    background: radial-gradient(ellipse at 50% 100%, rgba(0, 118, 225, .19), transparent 46%),
                linear-gradient(180deg, rgba(0, 9, 29, .45), rgba(0, 13, 37, .76));
}

.contacts-faq__art {
    position:           absolute;
    z-index:            -1;
    bottom:             0;
    left:               50%;
    width:              min(1450px, 100%);
    transform:          translateX(-50%);
    pointer-events:     none;
    opacity:            .32;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 78%, transparent);
    mask-image:         linear-gradient(to bottom, transparent, #000 28%, #000 78%, transparent);
}

.contacts-faq__art img {
    display:            block;
    width:              100%;
    height:             auto;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image:         linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.contacts-faq > .container {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            40px;
}

.faq__head {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            14px;
    width:          100%;
    text-align:     center;
}

.faq__title {
    max-width:      820px;
    font-size:      clamp(31px, 3.25vw, 46px);
    letter-spacing: -1.35px;
}

/* ── 09 · Адаптив ───────────────────────────────────────────────────────── */
/* Проміжний крок 1100 — з рефу: чотири канали й дві форми поруч на 1024 уже
   тіснішають до переносу підписів у полях. */
@media (max-width: 1100px) {
    .contacts-hero__proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .contacts-hero__proof-item { border-right: 0; }

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

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

    /* Колаж і картки показників — одне під одним. */
    .contacts-trust__showcase { display: block; }

    .contacts-trust__projects { margin-bottom: 20px; }

    .contacts-trust__img {
        min-height: 0;
        object-fit: contain;
    }

    .contacts-trust__stats {
        width:   100%;
        margin:  0;
        padding: 0;
    }
}

@media (max-width: 768px) {
    .contacts-channels,
    .contacts-trust,
    .contacts-forms,
    .contacts-team,
    .contacts-services { padding: 56px 0; }

    .contacts-page .container { padding-inline: 24px; }

    :where(.contacts-page) h2 {
        font-size:   clamp(27px, 7vw, 36px);
        line-height: 1.18;
    }

    .contacts-channels__head,
    .contacts-trust__head,
    .contacts-forms__head,
    .contacts-team__head,
    .contacts-services__head { margin-bottom: 28px; }

    /* Хіро: фото — приглушеним фоном на всю секцію. */
    .contacts-hero {
        display:    block;
        min-height: 0;
        padding:    36px 0 40px;
    }

    .contacts-hero__image {
        inset:        0;
        width:        100%;
        height:       100%;
        aspect-ratio: auto;
        transform:    none;
        opacity:      .16;
        background-size:     cover;
        background-position: 65% center;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 85%), linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
        mask-image:         linear-gradient(90deg, transparent, #000 85%), linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
    }

    .contacts-hero__image::before { display: none; }

    .contacts-hero__content {
        max-width: 560px;
        margin:    0 auto;
        padding:   0;
    }


    .contacts-hero .section-eyebrow {
        margin-bottom:  14px;
        font-size:      10px;
        line-height:    1.5;
        letter-spacing: .13em;
    }

    .contacts-hero__title {
        margin-bottom:  24px;
        font-size:      clamp(28px, 7.5vw, 40px);
        line-height:    1.16;
        letter-spacing: -.035em;
    }

    .contacts-hero__title .is-accent { letter-spacing: inherit; }

    .contacts-hero__lead {
        margin-bottom: 24px;
        font-size:     15px;
        line-height:   1.7;
    }

    .contacts-page .btn {
        min-height: 50px;
        padding:    13px 18px;
        font-size:  14px;
    }

    .contacts-hero__btn,
    .contacts-team__btn,
    .contacts-service__btn {
        width:     100%;
        min-width: 0;
    }

    .contacts-hero__proof {
        gap:        14px 12px;
        margin-top: 24px;
        padding:    14px;
        background: #102a4b;
        -webkit-backdrop-filter: none;
        backdrop-filter:         none;
    }

    .contacts-hero__proof-item {
        align-items: flex-start;
        padding:     0;
        font-size:   11px;
    }

    .contacts-hero__proof-icon {
        width:  15px;
        height: 15px;
    }

    .contacts-office,
    .contacts-service,
    .contacts-form {
        padding:       22px;
        border-radius: 16px;
    }

    .contacts-office__title {
        font-size:   22px;
        line-height: 1.3;
    }

    .contacts-office__address { font-size: 15px; }

    .contacts-office__num { margin-bottom: 18px; }

    .contacts-channel { padding: 16px; }

    .contacts-channel__value {
        font-size:     12px;
        overflow-wrap: anywhere;
    }

    .contacts-trust__projects { border-radius: 14px; }

    .contacts-trust__caption {
        padding:   14px 16px;
        font-size: 11px;
    }

    .contacts-form .jet-form-builder-file-upload {
        min-height: 132px;
        padding:    52px 18px 18px;
    }

    .contacts-form__head { gap: 12px; }

    .contacts-form__title {
        font-size:   23px;
        line-height: 1.3;
    }

    .contacts-person { padding: 24px; }

    .contacts-person__identity { gap: 14px; }

    .contacts-person__name { font-size: 22px; }

    .contacts-person__portrait {
        flex-basis: 64px;
        width:      64px;
        height:     76px;
    }

    .contacts-service__title { font-size: 23px; }

    .contacts-service__text { min-height: 0; }

    .contacts-services__bg {
        background-position: 65% center;
        opacity:             .65;
    }

    .contacts-faq { padding: 56px 0 165px; }

    .contacts-faq__art { width: 135%; max-width: none; opacity: .25; }
}

/* Сітки карток 2 → 1 — рівно на брейкпоінті рефу (760), а не на 768: на
   планшеті 768 офіси, люди, послуги й півширинні поля прорахунку ще
   вміщаються по двоє (359px), а в один стовпчик картки розтягувались на
   720px і сторінка ставала вдвічі довшою. */
@media (max-width: 760px) {
    .contacts-channels__offices,
    .contacts-services__grid,
    .contacts-team__people { grid-template-columns: minmax(0, 1fr); }

    .contacts-form--estimate .jet-form-builder { grid-template-columns: minmax(0, 1fr); }

    .contacts-form--estimate .jet-form-builder-row:has(.is-half) { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
    .contacts-office__phone {
        width:     100%;
        font-size: 16px;
    }

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

@media (max-width: 370px) {
    .contacts-page .container { padding-inline: 18px; }

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

@media (prefers-reduced-motion: reduce) {
    .contacts-office__phone,
    .contacts-channel,
    .contacts-form .jet-form-builder-file-upload,
    .btn--outline { transition: none; }
}

@media (max-width: 768px) {
}