/* ══════════════════════════════════════════════════════════════════════════
   Сторінка проєкту — CPT proiekti (single-proiekti.php)

   01 · Оболонка сторінки, токени, локальні кнопки
   02 · Акцент у заголовках
   03 · Хіро + плашка параметрів
   04 · Каркас секції та шапка секції
   05 · Галерея + карта маршруту
   06 · Коротко про проєкт
   07 · Виклики координації
   08 · Інженерний контекст
   09 · Обсяг робіт і панель підходу
   10 · Результат
   11 · Послуги та галузь
   12 · Схожі проєкти
   13 · Фінальний CTA
   14 · Лайтбокс
   15 · Адаптив 1180 / 960 / 768 / 430 / 350

   Порт `gilon-industrial-facility/assets/css/gilon-project.css` з двома
   системними замінами:

   `.project-accent` → `.is-accent` — акцент у заголовку ставить
   Theme\rich_title() макросом {accent}, і клас у теми свій.

   `var(--gradient-heading)` → `var(--gradient-accent)` — у базі шаблону
   обидва токени сині й однакові, а в темі `--gradient-heading` інший, із
   бузковою серединою. Та сама пастка вже ловила нас на галузевих
   сторінках (див. css/blocks/public-industry.css).

   Підвал і шапка шаблону (`.case-footer`, `.skip-link`, правки
   `.site-header`) не переносяться — у теми свої.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 01 · Оболонка сторінки ─────────────────────────────────────────────── */
.project-page {
    --case-panel-border: rgba(119, 198, 255, .22);
    --case-muted:        #aebbd5;
    --case-sky:          #77c6ff;
    --case-shadow:       0 28px 78px rgba(0, 8, 32, .34);

    position:   relative;
    isolation:  isolate;
    overflow-x: clip;
    color:      #edf3ff;
    background:
        radial-gradient(circle at 88% 7%, rgba(54, 113, 235, .14), transparent 29rem),
        linear-gradient(180deg, #031c45 0%, #07143a 52%, #03142f 100%);
}

/* Сітка-підкладка на всю сторінку. У шаблоні вона на body::before і
   position: fixed; тут — на самому <main>, бо шапка й підвал теми свої
   і накривати їх сіткою не треба. */
.project-page::before {
    content:        '';
    position:       absolute;
    z-index:        -1;
    inset:          0;
    pointer-events: none;
    opacity:        .18;
    background-image:
        linear-gradient(rgba(119, 198, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(119, 198, 255, .08) 1px, transparent 1px);
    background-size:    88px 88px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 72%);
    mask-image:         linear-gradient(to bottom, #000, transparent 72%);
}

/* Стрілка теми намальована суцільним білим (img/arrow.svg), а в цьому
   шаблоні вона всюди успадковує колір тексту — інакше блакитні
   текстові посилання мали б білу стрілку. */
.project-page .icon-arrow path { stroke: currentColor; }

/* ── Кнопки ────────────────────────────────────────────────────────────────
   Глобально в темі є тільки .btn--primary (css/header.css). .btn,
   .btn--lg і .btn--outline живуть у css/pages/*.css кожної сторінки —
   дублюємо, як на /proiekti/ і /poslugy/. Розміри — з base.css шаблону
   (270×56), вони більші за ті, що на архіві проєктів. */
.project-page .btn {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    box-sizing:      border-box;
    cursor:          pointer;
    text-decoration: none;
}

.project-page .btn--lg {
    width:      270px;
    min-width:  270px;
    height:     56px;
    min-height: 56px;
    padding:    17px 28px;
}

.project-page .btn--outline {
    min-width:        270px;
    min-height:       56px;
    padding:          14px 34px;
    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:      20px;
    transition:       border-color var(--transition),
                      background-color var(--transition),
                      color var(--transition);
}

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

.project-page .btn--outline:focus-visible {
    outline:        2px solid var(--color-text);
    outline-offset: 3px;
}

/* ── 02 · Акцент у заголовках ───────────────────────────────────────────── */
.project-page .is-accent {
    color:                   transparent;
    font-weight:             600;
    letter-spacing:          -1px;
    background:              var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
}

/* ── 03 · Хіро ──────────────────────────────────────────────────────────── */
.project-hero {
    position:       relative;
    isolation:      isolate;
    min-height:     790px;
    padding-bottom: 52px;
    overflow:       hidden;
    background:
        radial-gradient(circle at 63% 31%, rgba(58, 121, 245, .22), transparent 26%),
        linear-gradient(112deg, #061944 0%, #071a45 45%, #020d25 100%);
}

.project-hero::after {
    content:        '';
    position:       absolute;
    z-index:        -1;
    inset:          auto 0 0;
    height:         30%;
    background:     linear-gradient(to top, #031c45 0%, rgba(3, 28, 69, .78) 40%, transparent 100%);
    pointer-events: none;
}

.project-hero__grid {
    position: absolute;
    z-index:  -1;
    inset:    0;
    opacity:  .27;
    background-image:
        linear-gradient(rgba(119, 198, 255, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(119, 198, 255, .12) 1px, transparent 1px);
    background-size:    96px 96px;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 62%);
    mask-image:         linear-gradient(90deg, #000, transparent 62%);
}

/* Фото хіро — фон, а не <img>: поверх нього лежать два градієнти, які
   розчиняють знімок у лівий край. Саме зображення приходить з поля в
   змінній --project-hero-photo. */
.project-hero__media {
    position:            absolute;
    z-index:             -2;
    inset:               0 0 0 39%;
    background-color:    #031c45;
    background-image:    var(--project-hero-photo);
    background-repeat:   no-repeat;
    background-size:     cover;
    background-position: 56% center;
}

.project-hero__media::before {
    content:  '';
    position: absolute;
    z-index:  2;
    inset:    0;
    background:
        linear-gradient(90deg, #061944 0%, rgba(6, 25, 68, .88) 9%, rgba(6, 25, 68, .18) 47%, transparent 72%),
        linear-gradient(180deg, rgba(4, 13, 37, .1), transparent 58%, #031c45 100%);
}

.project-hero__container {
    position:              relative;
    display:               grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .48fr);
    min-height:            680px;
    gap:                   48px;
    /* По верху, а не по низу: інакше відстань від крихт до надзаголовка
       залежала б від кількості тексту в хіро й стрибала б. */
    align-items:           start;
    /* Вміст хіро притиснутий до низу коробки з min-height, тож власного
       верхнього падінга контейнер не має — простір угорі тримає спільна
       смуга під крихти (css/main.css). */
    padding-top:           0;
    padding-bottom:        106px;
}

.project-hero__content {
    max-width:  820px;
    align-self: start;
}

.project-hero .breadcrumbs { color: #91baff; }

/* Надзаголовок — спільний компонент теми (13px / 600 / 1.82px / 18px).
   Тут лишаємо тільки колір і розкладку, типографіку не чіпаємо: інакше
   на кожній сторінці він був би свого розміру. */
.project-hero__eyebrow {
    margin-bottom:  22px;
}

.project-hero h1 {
    max-width:      760px;
    margin:         0;
    font-size:      clamp(42px, 4vw, 58px);
    font-weight:    300;
    line-height:    1.05;
    letter-spacing: -1.9px;
    text-wrap:      balance;
}

.project-hero h1 .is-white { color: #edf2ff; }
.project-hero h1 .is-accent { display: inline-block; }

.project-hero__lead {
    max-width:   720px;
    /* Відступ від H1 тримає спільний ритм (css/main.css). */
    margin:      0;
    color:       #dce6f7;
    font-size:   clamp(17px, 1.45vw, 21px);
    line-height: 1.68;
}

.project-hero__support {
    max-width:   690px;
    margin:      14px 0 0;
    color:       var(--case-muted);
    font-size:   16px;
    line-height: 1.7;
}

.project-hero__actions {
    display:     flex;
    flex-wrap:   wrap;
    gap:         18px 26px;
    align-items: center;
    margin-top:  34px;
}

.project-hero__text-link,
.case-inline-link {
    display:         inline-flex;
    min-height:      44px;
    gap:             10px;
    align-items:     center;
    color:           var(--case-sky);
    font-size:       15px;
    font-weight:     600;
    text-decoration: none;
    transition:      color .2s ease, transform .2s ease;
}

.project-hero__text-link .icon,
.case-inline-link .icon { width: 17px; height: 17px; }

.project-hero__text-link:hover,
.project-hero__text-link:focus-visible,
.case-inline-link:hover,
.case-inline-link:focus-visible { color: #fff; transform: translateX(3px); }

/* ── Плашка параметрів ─────────────────────────────────────────────────── */
.project-proof {
    position:              relative;
    z-index:               4;
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top:            -78px;
    overflow:              hidden;
    border:                1px solid rgba(146, 193, 255, .27);
    border-radius:         18px;
    background:            linear-gradient(125deg, rgba(30, 64, 127, .86), rgba(8, 26, 66, .88));
    box-shadow:            var(--case-shadow), inset 0 1px 0 rgba(255, 255, 255, .08);
    backdrop-filter:       blur(18px);
}

.project-proof > div {
    position:              relative;
    display:               grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows:    auto auto;
    gap:                   4px 13px;
    align-items:           center;
    min-height:            112px;
    padding:               24px 26px;
}

.project-proof > div + div::before {
    content:    '';
    position:   absolute;
    inset:      20px auto 20px 0;
    width:      1px;
    background: linear-gradient(transparent, rgba(141, 190, 255, .32), transparent);
}

.project-proof .icon {
    grid-row: 1 / 3;
    width:    27px;
    height:   27px;
    color:    var(--case-sky);
}

.project-proof span {
    color:          #8fa6cb;
    font-size:      12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.project-proof strong {
    font-size:   15px;
    font-weight: 600;
    line-height: 1.35;
}

/* ── 04 · Каркас секції ─────────────────────────────────────────────────── */
.case-section {
    position: relative;
    padding:  clamp(82px, 8.5vw, 124px) 0;
}

.case-section::before {
    content:    '';
    position:   absolute;
    inset:      0 0 auto;
    height:     1px;
    background: var(--gradient-line);
}

.case-heading {
    max-width:     900px;
    margin-bottom: clamp(38px, 5vw, 62px);
}

.case-heading--split {
    display:               grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .72fr);
    max-width:             none;
    gap:                   clamp(40px, 7vw, 100px);
    align-items:           end;
}

.case-heading--split > p {
    margin:      0 0 6px;
    color:       var(--case-muted);
    font-size:   16px;
    line-height: 1.75;
}

.case-heading--center {
    max-width:    880px;
    margin-right: auto;
    margin-left:  auto;
    text-align:   center;
}

.case-heading--center .section-eyebrow { justify-content: center; }

.case-heading h2,
.challenge-card h2,
.approach-panel h2,
.outcome-content h2,
.project-cta h2 {
    margin:         15px 0 0;
    font-size:      clamp(28px, 4vw, 48px);
    font-weight:    300;
    line-height:    1.12;
    letter-spacing: -1.5px;
    text-wrap:      balance;
}

/* ── 05 · Галерея ───────────────────────────────────────────────────────── */
.gallery-layout {
    display:               grid;
    grid-template-columns: minmax(0, 1.44fr) minmax(360px, .72fr);
    min-height:            620px;
    gap:                   18px;
}

.gallery-main,
.gallery-thumb {
    position:      relative;
    overflow:      hidden;
    margin:        0;
    padding:       0;
    border:        1px solid var(--case-panel-border);
    color:         inherit;
    background:    #071632;
    cursor:        zoom-in;
}

.gallery-main {
    min-height:    620px;
    border-radius: 24px;
    background:    #f6f8fc;
    box-shadow:    var(--case-shadow);
}

.gallery-main::after,
.gallery-thumb::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     linear-gradient(180deg, transparent 55%, rgba(2, 10, 30, .88) 100%);
    pointer-events: none;
}

.gallery-main img,
.gallery-thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .65s cubic-bezier(.2, .8, .2, 1), filter .3s ease;
}

/* Головний кадр — креслення й схеми: обрізати їх не можна, тому contain
   на світлій підкладці, як у шаблоні. */
.gallery-main img { object-fit: contain; }

.gallery-main:hover img,
.gallery-main:focus-visible img,
.gallery-thumb:hover img,
.gallery-thumb:focus-visible img { transform: scale(1.025); filter: brightness(1.06); }

.gallery-main:focus-visible,
.gallery-thumb:focus-visible { outline: 2px solid var(--case-sky); outline-offset: 4px; }

.gallery-main__label {
    position:   absolute;
    z-index:    2;
    right:      34px;
    bottom:     30px;
    left:       34px;
    text-align: left;
}

.gallery-main__label small {
    display:        block;
    margin-bottom:  8px;
    color:          var(--case-sky);
    font-size:      12px;
    font-weight:    600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.gallery-main__label strong { font-size: 25px; font-weight: 500; }

.gallery-expand {
    position:        absolute;
    z-index:         3;
    top:             24px;
    right:           24px;
    display:         grid;
    width:           48px;
    height:          48px;
    place-items:     center;
    border:          1px solid rgba(190, 220, 255, .28);
    border-radius:   14px;
    background:      rgba(5, 20, 52, .62);
    backdrop-filter: blur(14px);
}

.gallery-expand .icon { width: 21px; height: 21px; }

.gallery-thumbs {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows:    repeat(3, minmax(0, 1fr));
    gap:                   18px;
}

.gallery-thumb {
    min-height:    188px;
    border-radius: 18px;
}

.gallery-thumb:last-child { grid-column: 1 / -1; }

.gallery-thumb span {
    position:    absolute;
    z-index:     2;
    right:       15px;
    bottom:      13px;
    left:        15px;
    color:       #eaf3ff;
    font-size:   12px;
    font-weight: 600;
    text-align:  left;
}

.project-route-map {
    display:               grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(250px, .6fr);
    gap:                   28px;
    align-items:           center;
    margin:                28px 0 0;
    padding:               20px;
    border:                1px solid var(--case-panel-border);
    border-radius:         22px;
    background:            rgba(9, 33, 75, .72);
}

/* Висота плашки з картою — 420px на всіх ширинах, як у шаблоні. Там вона
   виходила з presentational-хінта height="600" у самому <img>, обрізаного
   max-height. У темі `img { height: auto }` (css/reset.css) цей хінт
   перебиває, і на вузькому екрані плашка складалась удвічі — тому
   задаємо висоту явно, а не покладаємось на атрибут. */
.project-route-map img {
    width:         100%;
    height:        420px;
    object-fit:    contain;
    border-radius: 14px;
    background:    #f5f7fa;
}

.project-route-map figcaption {
    color:       var(--case-muted);
    font-size:   15px;
    line-height: 1.65;
}

.project-route-map figcaption strong {
    display:       block;
    margin-bottom: 12px;
    color:         #eef4ff;
    font-size:     20px;
    font-weight:   600;
}

/* ── 06 · Коротко про проєкт ────────────────────────────────────────────── */
.snapshot-layout {
    display:               grid;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    gap:                   clamp(36px, 5vw, 72px);
    align-items:           start;
}

.snapshot-intro {
    position:      sticky;
    top:           32px;
    margin:        0;
    padding-right: clamp(0px, 2vw, 24px);
}

.snapshot-intro > p:not(.section-eyebrow) {
    margin:      20px 0 19px;
    color:       var(--case-muted);
    font-size:   16px;
    line-height: 1.65;
}

.snapshot-metrics {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   10px;
    margin:                0 0 14px;
    padding:               14px 0;
    border-top:            1px solid var(--case-panel-border);
    border-bottom:         1px solid var(--case-panel-border);
}

.snapshot-metrics > div {
    display:       grid;
    align-content: start;
    gap:           5px;
    padding:       13px 14px;
    border:        1px solid rgba(117, 200, 255, .2);
    border-radius: 12px;
    background:    linear-gradient(145deg, rgba(24, 64, 125, .32), rgba(7, 26, 62, .34));
}

.snapshot-metrics strong {
    color:          #eaf4ff;
    font-size:      clamp(30px, 3vw, 40px);
    font-weight:    400;
    line-height:    1;
    letter-spacing: -.04em;
}

.snapshot-metrics span {
    color:          var(--case-sky);
    font-size:      10px;
    font-weight:    600;
    line-height:    1.35;
    letter-spacing: .08em;
    text-transform: uppercase;
}

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

.snapshot-grid > div {
    position:              relative;
    display:               grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap:                   12px;
    align-items:           start;
    min-height:            0;
    padding:               17px 18px;
    overflow:              hidden;
    border:                1px solid var(--case-panel-border);
    border-radius:         14px;
    background:            linear-gradient(145deg, rgba(26, 66, 129, .43), rgba(6, 27, 63, .73));
    box-shadow:            inset 0 1px 0 rgba(255, 255, 255, .05);
}

.snapshot-grid > div::before {
    content:    '';
    position:   absolute;
    inset:      0 15px auto;
    height:     1px;
    background: linear-gradient(90deg, transparent, rgba(117, 200, 255, .58), transparent);
}

.snapshot-grid__wide { grid-column: 1 / -1; }

.snapshot-card__icon {
    position:      relative;
    z-index:       1;
    display:       grid;
    width:         28px;
    height:        28px;
    place-items:   center;
    color:         var(--case-sky);
    border:        1px solid rgba(117, 200, 255, .35);
    border-radius: 8px;
    background:    rgba(24, 67, 133, .28);
}

.snapshot-card__icon .icon { width: 15px; height: 15px; }

.snapshot-card__index {
    position:       relative;
    z-index:        1;
    width:          28px;
    padding-top:    5px;
    color:          rgba(155, 207, 255, .62);
    font-size:      11px;
    font-weight:    600;
    line-height:    1;
    letter-spacing: .12em;
}

.snapshot-grid dt {
    color:          var(--case-sky);
    font-size:      10px;
    font-weight:    600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.snapshot-grid dd {
    margin:         6px 0 0;
    color:          #eef4ff;
    font-size:      1rem;
    font-weight:    400;
    line-height:    1.5;
    letter-spacing: 0;
}

/* Назва об'єкта в широкій картці — той самий градієнт, але більший кегль
   і напівжирний. У шаблоні це окремий клас .snapshot-project-name; тут
   його роль грає макрос {accent} у значенні поля. */
.project-page .snapshot-grid dd .is-accent {
    font-size:      1.16em;
    font-weight:    500;
    letter-spacing: 0;
}

/* ── 07 · Виклики координації ───────────────────────────────────────────── */
.coordination-challenge {
    overflow:   hidden;
    background: linear-gradient(180deg, rgba(3, 15, 43, .22), rgba(7, 21, 56, .66));
}

.challenge-card {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .82fr);
    overflow:              hidden;
    border:                1px solid var(--case-panel-border);
    border-radius:         28px;
    background:            linear-gradient(135deg, rgba(18, 56, 115, .74), rgba(4, 23, 59, .92));
    box-shadow:            var(--case-shadow), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.challenge-card__visual {
    position:   relative;
    min-height: 690px;
    margin:     0;
    overflow:   hidden;
}

.challenge-card__visual::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(90deg, transparent 60%, rgba(5, 24, 61, .86) 100%),
                linear-gradient(180deg, transparent 60%, rgba(2, 12, 35, .8) 100%);
}

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

.challenge-card__visual figcaption {
    position:        absolute;
    z-index:         2;
    right:           32px;
    bottom:          30px;
    left:            32px;
    display:         flex;
    justify-content: space-between;
    gap:             18px;
    align-items:     end;
}

.challenge-card__visual figcaption span {
    color:          var(--case-sky);
    font-size:      12px;
    font-weight:    600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.challenge-card__visual figcaption strong {
    max-width:   240px;
    font-size:   20px;
    font-weight: 500;
    text-align:  right;
}

.challenge-card__content { padding: clamp(38px, 5vw, 72px); }

.challenge-card__content > p:not(.section-eyebrow) {
    margin:      26px 0 0;
    color:       var(--case-muted);
    font-size:   16px;
    line-height: 1.75;
}

.challenge-list {
    display:    grid;
    gap:        0;
    margin:     34px 0 0;
    padding:    0;
    list-style: none;
}

.challenge-list li {
    display:               grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap:                   14px;
    align-items:           center;
    min-height:            63px;
    border-top:            1px solid rgba(119, 198, 255, .13);
}

.challenge-list li:last-child { border-bottom: 1px solid rgba(119, 198, 255, .13); }
.challenge-list span   { color: var(--case-sky); font-size: 12px; font-weight: 600; }
.challenge-list strong { font-size: 15px; font-weight: 500; line-height: 1.45; }

/* ── 08 · Інженерний контекст ───────────────────────────────────────────── */
.project-engineering { background: radial-gradient(circle at 82% 16%, rgba(64, 120, 223, .14), transparent 35rem); }

.engineering-facts {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   14px;
    margin-bottom:         24px;
}

.engineering-facts > div {
    display:       grid;
    align-content: center;
    gap:           12px;
    min-height:    160px;
    padding:       25px;
    border:        1px solid rgba(119, 198, 255, .25);
    border-radius: 18px;
    background:    linear-gradient(145deg, rgba(33, 77, 151, .4), rgba(6, 26, 63, .76));
}

.engineering-facts strong {
    color:          #e7f2ff;
    font-size:      clamp(27px, 3vw, 39px);
    font-weight:    400;
    line-height:    1.12;
    letter-spacing: -.04em;
}

.engineering-facts span { color: #a9c9ec; font-size: 13px; line-height: 1.45; }

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

.engineering-grid article {
    min-height:    215px;
    padding:       clamp(26px, 3vw, 36px);
    border:        1px solid var(--case-panel-border);
    border-radius: 19px;
    background:    rgba(7, 27, 66, .65);
}

.engineering-grid article > span {
    color:          var(--case-sky);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* У шаблоні цей h3 не має власного line-height і успадковує базові 1.6.
   Тема ж задає заголовкам тегом тісніший інтерліньяж, тому повертаємо
   базове значення явно — інакше картка нижча за еталон на 11px. */
.engineering-grid h3 {
    margin:      23px 0 12px;
    font-size:   clamp(21px, 2vw, 26px);
    font-weight: 500;
    line-height: var(--line-height);
}

.engineering-grid p {
    max-width:   58ch;
    margin:      0;
    color:       var(--case-muted);
    font-size:   15px;
    line-height: 1.65;
}

/* ── 09 · Обсяг робіт ───────────────────────────────────────────────────── */
.project-coordination { background: radial-gradient(circle at 16% 27%, rgba(50, 104, 217, .13), transparent 26rem); }

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

.scope-grid article {
    position:      relative;
    min-height:    272px;
    padding:       30px;
    overflow:      hidden;
    border:        1px solid var(--case-panel-border);
    border-radius: 20px;
    background:    linear-gradient(145deg, rgba(25, 64, 127, .4), rgba(5, 25, 60, .72));
    box-shadow:    inset 0 1px 0 rgba(255, 255, 255, .05);
    transition:    transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.scope-grid article:hover {
    transform:    translateY(-5px);
    border-color: rgba(119, 198, 255, .48);
    box-shadow:   0 22px 50px rgba(0, 8, 30, .24), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.scope-grid article > span {
    position:    absolute;
    top:         30px;
    right:       30px;
    color:       #79bfff;
    font-size:   12px;
    font-weight: 600;
}

.scope-grid article > .icon {
    width:         44px;
    height:        44px;
    padding:       10px;
    border:        1px solid rgba(119, 198, 255, .28);
    border-radius: 13px;
    color:         var(--case-sky);
    background:    rgba(37, 81, 151, .22);
}

.scope-grid h3 { margin: 34px 0 13px; font-size: 21px; font-weight: 600; line-height: var(--line-height); }
.scope-grid p  { margin: 0; color: var(--case-muted); font-size: 14px; line-height: 1.65; }

.approach-panel {
    display:               grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap:                   clamp(48px, 8vw, 110px);
    margin-top:            clamp(70px, 8vw, 110px);
    padding:               clamp(40px, 5vw, 70px);
    border:                1px solid rgba(146, 193, 255, .27);
    border-radius:         26px;
    background:
        radial-gradient(circle at 0 0, rgba(64, 119, 234, .29), transparent 38%),
        linear-gradient(135deg, rgba(22, 56, 118, .68), rgba(5, 24, 60, .9));
    box-shadow:            var(--case-shadow), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.approach-panel__intro > p:not(.section-eyebrow) {
    margin:      27px 0 0;
    color:       var(--case-muted);
    font-size:   16px;
    line-height: 1.75;
}

.approach-steps {
    position:   relative;
    display:    grid;
    gap:        10px;
    margin:     0;
    padding:    0;
    list-style: none;
}

.approach-steps::before {
    content:    '';
    position:   absolute;
    top:        36px;
    bottom:     36px;
    left:       22px;
    width:      1px;
    background: linear-gradient(var(--case-sky), rgba(119, 198, 255, .09));
}

.approach-steps li {
    position:              relative;
    z-index:               1;
    display:               grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap:                   19px;
    align-items:           center;
    min-height:            92px;
    padding:               15px 20px 15px 0;
    border-bottom:         1px solid rgba(119, 198, 255, .12);
}

.approach-steps li > span {
    display:       grid;
    width:         46px;
    height:        46px;
    place-items:   center;
    border:        1px solid rgba(119, 198, 255, .36);
    border-radius: 50%;
    color:         var(--case-sky);
    background:    #0b2b63;
    font-size:     11px;
    font-weight:   600;
}

.approach-steps strong,
.approach-steps small { display: block; }
.approach-steps strong { font-size: 18px; font-weight: 500; }
.approach-steps small  { margin-top: 6px; color: #9eadc9; font-size: 13px; line-height: 1.5; }

/* ── 10 · Результат ─────────────────────────────────────────────────────── */
.project-outcome { background: linear-gradient(180deg, rgba(4, 17, 48, .36), rgba(7, 25, 62, .56)); }

.outcome-layout {
    display:               grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr);
    gap:                   clamp(52px, 8vw, 112px);
    align-items:           center;
}

.outcome-visual {
    position:      relative;
    min-height:    590px;
    margin:        0;
    overflow:      hidden;
    border:        1px solid var(--case-panel-border);
    border-radius: 26px;
    box-shadow:    var(--case-shadow);
}

.outcome-visual::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(180deg, transparent 60%, rgba(2, 11, 32, .85));
}

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

.outcome-visual figcaption {
    position:    absolute;
    z-index:     2;
    right:       30px;
    bottom:      28px;
    left:        30px;
    color:       #dbe8fb;
    font-size:   14px;
    line-height: 1.5;
}

.outcome-content > p:not(.section-eyebrow) {
    margin:      27px 0 0;
    color:       var(--case-muted);
    font-size:   17px;
    line-height: 1.75;
}

.outcome-points {
    display:    grid;
    gap:        13px;
    margin:     30px 0 36px;
    padding:    0;
    list-style: none;
}

.outcome-points li {
    display:               grid;
    grid-template-columns: 29px minmax(0, 1fr);
    gap:                   13px;
    align-items:           start;
    color:                 #d6e2f5;
    font-size:             15px;
    line-height:           1.55;
}

.outcome-points .icon {
    width:         24px;
    height:        24px;
    padding:       5px;
    border:        1px solid rgba(119, 198, 255, .35);
    border-radius: 8px;
    color:         var(--case-sky);
    background:    rgba(34, 75, 142, .28);
}

/* ── 11 · Послуги та галузь ─────────────────────────────────────────────── */
.project-link-grid {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   18px;
}

.project-link-card {
    position:        relative;
    display:         flex;
    min-height:      390px;
    flex-direction:  column;
    padding:         clamp(28px, 3vw, 42px);
    overflow:        hidden;
    border:          1px solid var(--case-panel-border);
    border-radius:   22px;
    color:           inherit;
    text-decoration: none;
    background:      linear-gradient(145deg, rgba(24, 62, 126, .43), rgba(5, 24, 59, .8));
    box-shadow:      inset 0 1px 0 rgba(255, 255, 255, .05);
    transition:      transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.project-link-card::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(112deg, transparent 25%, rgba(117, 199, 255, .11) 48%, transparent 71%);
    transform:  translateX(-120%);
    transition: transform .75s ease;
}

.project-link-card:hover,
.project-link-card:focus-visible {
    transform:    translateY(-6px);
    border-color: rgba(119, 198, 255, .5);
    box-shadow:   0 25px 60px rgba(0, 7, 30, .27);
}

.project-link-card:hover::before,
.project-link-card:focus-visible::before { transform: translateX(120%); }

.project-link-card--accent {
    background: radial-gradient(circle at 90% 0, rgba(255, 175, 49, .17), transparent 38%),
                linear-gradient(145deg, rgba(31, 66, 130, .5), rgba(6, 25, 60, .82));
}

.project-link-card__number {
    color:          #8aaee5;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.project-link-card > .icon {
    width:         49px;
    height:        49px;
    margin-top:    44px;
    padding:       11px;
    border:        1px solid rgba(119, 198, 255, .3);
    border-radius: 14px;
    color:         var(--case-sky);
    background:    rgba(38, 81, 153, .24);
}

.project-link-card h3 { margin: 27px 0 15px; font-size: 26px; font-weight: 600; line-height: 1.18; }
.project-link-card p  { margin: 0 0 28px; color: var(--case-muted); font-size: 14px; line-height: 1.65; }

.project-link-card > strong {
    display:     inline-flex;
    gap:         10px;
    align-items: center;
    margin-top:  auto;
    color:       var(--case-sky);
    font-size:   14px;
    font-weight: 600;
}

.project-link-card > strong .icon { width: 17px; height: 17px; transition: transform .2s ease; }
.project-link-card:hover > strong .icon { transform: translateX(4px); }

/* ── 12 · Схожі проєкти ─────────────────────────────────────────────────── */
.related-projects { background: linear-gradient(180deg, rgba(3, 14, 41, .18), rgba(6, 22, 55, .54)); }

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

.related-card {
    overflow:      hidden;
    border:        1px solid var(--case-panel-border);
    border-radius: 22px;
    background:    rgba(7, 28, 67, .72);
    box-shadow:    inset 0 1px 0 rgba(255, 255, 255, .05);
    transition:    transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.related-card:hover {
    transform:    translateY(-6px);
    border-color: rgba(119, 198, 255, .48);
    box-shadow:   0 25px 58px rgba(0, 8, 30, .27);
}

.related-card > a {
    display:        flex;
    min-height:     100%;
    flex-direction: column;
    color:          inherit;
}

.related-card__media {
    position:     relative;
    aspect-ratio: 16 / 10;
    overflow:     hidden;
    background:   #07152e;
}

.related-card__media::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(180deg, transparent 58%, rgba(4, 17, 45, .75));
}

.related-card__media img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.related-card:hover img { transform: scale(1.035); }

.related-card__media > span {
    position:       absolute;
    z-index:        1;
    right:          18px;
    bottom:         16px;
    left:           18px;
    color:          #b8dfff;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.related-card__body {
    display:        flex;
    flex:           1;
    flex-direction: column;
    padding:        25px 27px 29px;
}

.related-card__body small  { color: #83acd9; font-size: 12px; }
.related-card__body h3     { margin: 11px 0 14px; font-size: 23px; font-weight: 600; line-height: 1.2; }
.related-card__body p      { margin: 0 0 28px; color: var(--case-muted); font-size: 14px; line-height: 1.62; }

.related-card__body strong {
    display:     inline-flex;
    gap:         9px;
    align-items: center;
    margin-top:  auto;
    color:       var(--case-sky);
    font-size:   14px;
    font-weight: 600;
}

.related-card__body strong .icon { width: 16px; height: 16px; }

/* ── 13 · Фінальний CTA ─────────────────────────────────────────────────── */
.project-cta {
    padding-top:    clamp(72px, 8vw, 108px);
    padding-bottom: clamp(72px, 8vw, 108px);
}

.project-cta__panel {
    position:              relative;
    display:               grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .45fr);
    gap:                   clamp(46px, 7vw, 104px);
    align-items:           end;
    padding:               clamp(42px, 6vw, 82px);
    overflow:              hidden;
    border:                1px solid rgba(146, 193, 255, .3);
    border-radius:         28px;
    background:
        radial-gradient(circle at 92% 0, rgba(78, 137, 255, .35), transparent 34%),
        radial-gradient(circle at 0 100%, rgba(255, 166, 54, .13), transparent 28%),
        linear-gradient(125deg, rgba(25, 68, 139, .83), rgba(5, 23, 59, .94));
    box-shadow:            var(--case-shadow), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.project-cta__panel::after {
    content:        '';
    position:       absolute;
    inset:          0;
    opacity:        .18;
    background-image:
        linear-gradient(rgba(119, 198, 255, .1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(119, 198, 255, .1) 1px, transparent 1px);
    background-size:    50px 50px;
    -webkit-mask-image: radial-gradient(circle at 85% 20%, #000, transparent 58%);
    mask-image:         radial-gradient(circle at 85% 20%, #000, transparent 58%);
    pointer-events:     none;
}

.project-cta__panel > * { position: relative; z-index: 1; }

.project-cta__panel > div:first-child > p:not(.section-eyebrow) {
    max-width:   790px;
    margin:      26px 0 0;
    color:       #bdcae0;
    font-size:   16px;
    line-height: 1.72;
}

.project-cta__actions { display: grid; gap: 13px; }
.project-page .project-cta__actions .btn { width: 100%; min-width: 0; justify-content: center; }

/* ── 14 · Лайтбокс ──────────────────────────────────────────────────────── */
.has-open-lightbox { overflow: hidden; }

.project-lightbox {
    width:      100vw;
    max-width:  none;
    height:     100dvh;
    max-height: none;
    margin:     0;
    padding:    0;
    overflow:   hidden;
    border:     0;
    color:      #fff;
    background: transparent;
}

.project-lightbox::backdrop { background: rgba(0, 8, 25, .92); backdrop-filter: blur(10px); }
.project-lightbox[open]     { display: grid; place-items: center; }
.project-lightbox__backdrop { position: fixed; inset: 0; }

.project-lightbox__dialog {
    position:    relative;
    z-index:     1;
    display:     grid;
    width:       min(92vw, 1420px);
    height:      min(88dvh, 920px);
    place-items: center;
}

.project-lightbox figure {
    display:            grid;
    width:              100%;
    height:             100%;
    min-height:         0;
    grid-template-rows: minmax(0, 1fr) auto;
    margin:             0;
    place-items:        center;
}

.project-lightbox figure img {
    display:       block;
    width:         auto;
    height:        auto;
    max-width:     100%;
    max-height:    calc(88dvh - 82px);
    object-fit:    contain;
    border:        1px solid rgba(157, 208, 255, .2);
    border-radius: 18px;
    box-shadow:    0 36px 100px rgba(0, 0, 0, .45);
}

.project-lightbox figcaption {
    display:         flex;
    width:           min(100%, 900px);
    justify-content: center;
    gap:             18px;
    align-items:     center;
    margin-top:      18px;
    color:           #d6e4f8;
    text-align:      center;
}

.project-lightbox figcaption span   { color: var(--case-sky); font-size: 12px; font-weight: 600; letter-spacing: .1em; }
.project-lightbox figcaption strong { font-size: 14px; font-weight: 500; }

.project-lightbox__close,
.project-lightbox__nav {
    position:        absolute;
    z-index:         3;
    display:         grid;
    width:           50px;
    height:          50px;
    place-items:     center;
    border:          1px solid rgba(163, 211, 255, .26);
    border-radius:   15px;
    color:           #fff;
    background:      rgba(9, 31, 70, .76);
    cursor:          pointer;
    backdrop-filter: blur(12px);
    transition:      background .2s ease, transform .2s ease;
}

.project-lightbox__close:hover,
.project-lightbox__nav:hover { background: rgba(48, 103, 203, .78); }
.project-lightbox__close     { top: 0; right: 0; }

.project-lightbox__full-image {
    position:        absolute;
    z-index:         3;
    top:             0;
    left:            0;
    display:         inline-flex;
    min-height:      44px;
    align-items:     center;
    padding:         0 15px;
    border:          1px solid rgba(163, 211, 255, .26);
    border-radius:   12px;
    color:           #e6efff;
    background:      rgba(9, 31, 70, .82);
    font-size:       13px;
    font-weight:     600;
    text-decoration: none;
    backdrop-filter: blur(12px);
}

.project-lightbox__full-image:hover,
.project-lightbox__full-image:focus-visible {
    border-color: rgba(163, 211, 255, .62);
    background:   rgba(48, 103, 203, .9);
}

.project-lightbox__close .icon   { width: 22px; height: 22px; }
.project-lightbox__nav           { top: 50%; transform: translateY(-50%); }
.project-lightbox__nav:hover     { transform: translateY(-50%) scale(1.05); }
.project-lightbox__nav .icon     { width: 20px; height: 20px; }
.project-lightbox__nav--prev     { left: 0; }
.project-lightbox__nav--prev .icon { transform: rotate(180deg); }
.project-lightbox__nav--next     { right: 0; }

/* Стрілки лайтбокса лежать поза .project-page (dialog спливає у top-layer),
   тому колір стрілки задаємо тут окремо. */
.project-lightbox .icon-arrow path { stroke: currentColor; }

/* ── 15 · Адаптив ───────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .project-hero { min-height: 760px; }
    .project-hero__media { left: 32%; }
    .project-hero__container { grid-template-columns: minmax(0, 1fr) 240px; }
    .project-proof > div { padding: 22px 18px; }
    .gallery-layout { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); min-height: 560px; }
    .gallery-main { min-height: 560px; }
    .challenge-card { grid-template-columns: minmax(0, 1fr) minmax(380px, .88fr); }
    .scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-link-grid,
    .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    .project-hero { padding-bottom: 52px; }
    .project-hero__media { inset: 0; opacity: .74; }
    .project-hero__media::before {
        background:
            linear-gradient(90deg, rgba(4, 19, 53, .98) 0%, rgba(4, 19, 53, .9) 42%, rgba(4, 19, 53, .34) 74%, rgba(4, 19, 53, .2)),
            linear-gradient(180deg, rgba(3, 13, 39, .3), transparent 52%, #031c45 100%);
    }
    .project-hero h1 { font-size: clamp(42px, 6vw, 52px); line-height: 1.03; }
    .project-hero__container { grid-template-columns: 1fr; min-height: 650px; padding-bottom: 72px; }
    .project-hero__content { max-width: 760px; }
    .project-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -52px; }
    .project-proof > div:nth-child(3)::before { display: none; }
    .project-proof > div:nth-child(n+3) { border-top: 1px solid rgba(119, 198, 255, .13); }
    .case-heading--split { grid-template-columns: 1fr; gap: 24px; }
    .case-heading--split > p { max-width: 720px; }
    .gallery-layout { grid-template-columns: 1fr; min-height: auto; }
    .gallery-main { min-height: auto; aspect-ratio: 16 / 10; }
    .gallery-thumbs { grid-template-rows: repeat(2, 170px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gallery-thumb:last-child { grid-column: auto; }
    .project-route-map { grid-template-columns: 1fr; }
    .engineering-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .snapshot-layout { grid-template-columns: 1fr; gap: 44px; }
    .snapshot-intro { position: static; max-width: 780px; }
    .challenge-card { grid-template-columns: 1fr; }
    .challenge-card__visual { min-height: auto; aspect-ratio: 16 / 9; }
    .challenge-card__visual::after { background: linear-gradient(180deg, transparent 56%, rgba(2, 12, 35, .88)); }
    .approach-panel { grid-template-columns: 1fr; gap: 42px; }
    .outcome-layout { grid-template-columns: 1fr; }
    .outcome-visual { min-height: auto; aspect-ratio: 16 / 9; }
    .project-link-grid,
    .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-link-card--accent { grid-column: 1 / -1; min-height: 300px; }
    .project-cta__panel { grid-template-columns: 1fr; align-items: start; }
    .project-cta__actions { max-width: 420px; }
}

@media (max-width: 768px) {
    .project-hero { min-height: 0; padding-bottom: 34px; background: #07143a; }
    .project-hero::after { display: none; }
    .project-hero__grid { opacity: .09; }
    .project-hero__media {
        z-index:             0;
        inset:               0 0 auto;
        height:              clamp(220px, 33vw, 260px);
        opacity:             1;
        background-size:     cover;
        background-position: 68% 40%;
    }
    .project-hero__media::before {
        background:
            linear-gradient(180deg, rgba(7, 20, 58, .52) 0%, rgba(7, 20, 58, .24) 28%, rgba(10, 27, 77, .5) 54%, rgba(7, 20, 58, .94) 87%, #07143a 100%),
            linear-gradient(90deg, rgba(7, 20, 58, .62), transparent 78%);
    }
    /* На мобільному верх хіро — фотосмуга, і відступ під неї рахує сам
       контейнер, тож спільну смугу під крихти тут вимикаємо: крихти й так
       лежать поверх фото. */
    /* Специфічність навмисно дорівнює спільному правилу смуги
       (.site-main > section:first-of-type), інакше воно перебивало б. */
    .site-main > section.project-hero { padding-top: 0; }

    .project-hero__container {
        z-index:        2;
        min-height:     0;
        padding-top:    calc(clamp(220px, 33vw, 260px) - 30px);
        padding-bottom: 17px;
    }
    .project-hero__content { position: static; width: 100%; min-width: 0; max-width: 650px; }

    /* Крихти переїжджають на фото й лишають два пункти — «Проєкти» та
       назву. У шаблоні зайві ховались по nth-child, але там розділювач
       був окремим <li>; у нас він усередині пункту й кількість пунктів
       залежить від того, чи є в запису галузь. Тому ховаємо все, крім
       другого й останнього, — правило не залежить від довжини ланцюжка. */
    .project-hero .breadcrumbs { overflow: hidden; color: #d5e3fa; }
    .project-hero .breadcrumbs__list { flex-wrap: nowrap; width: max-content; max-width: none; gap: 3px; }
    .project-hero .breadcrumbs__item { display: none; flex: 0 0 auto; white-space: nowrap; }
    .project-hero .breadcrumbs__item:nth-child(2),
    .project-hero .breadcrumbs__item:last-child { display: flex; }
    .project-hero .breadcrumbs__link { padding: 3px 2px; color: #d5e3fa; font-size: 12px; }

    .project-hero__eyebrow { margin-bottom: 12px; }
    .project-hero h1 {
        max-width:      100%;
        font-size:      clamp(30px, 8.2vw, 38px);
        font-weight:    300;
        line-height:    1.04;
        letter-spacing: -1.15px;
        text-wrap:      normal;
        overflow-wrap:  normal;
    }
    .project-hero h1 .is-white,
    .project-hero h1 .is-accent { display: block; }
    .project-hero__lead { max-width: 100%; margin-top: 21px; color: #e6ecfa; font-size: 16px; font-weight: 400; line-height: 1.58; }
    .project-hero__support { max-width: 100%; margin-top: 11px; color: #aebbd7; font-size: 14px; line-height: 1.58; }
    .project-hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; width: 100%; margin-top: 21px; }
    .project-page .project-hero__actions .btn { width: 100%; min-width: 0; max-width: 100%; height: 52px; min-height: 52px; padding: 12px 18px; }
    .project-hero__text-link { min-height: 40px; justify-self: start; justify-content: flex-start; padding: 5px 0; text-decoration: none; }

    .project-proof { position: relative; z-index: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 8px; border-radius: 16px; }
    .project-proof > div { min-height: 94px; grid-template-columns: 21px minmax(0, 1fr); gap: 3px 8px; padding: 14px; }
    .project-proof .icon { grid-row: 1; width: 20px; height: 20px; }
    .project-proof strong { grid-column: 1 / -1; margin-top: 5px; font-size: 14px; }
    .project-proof > div + div::before { display: none; }
    .project-proof > div:nth-child(odd) { border-right: 1px solid rgba(119, 198, 255, .16); }
    .project-proof > div:nth-child(n+3) { border-top: 1px solid rgba(119, 198, 255, .16); }

    .case-section { padding: 72px 0; }
    .case-heading h2,
    .challenge-card h2,
    .approach-panel h2,
    .outcome-content h2,
    .project-cta h2 { font-size: clamp(31px, 8.5vw, 42px); }

    .gallery-main { border-radius: 19px; }
    .gallery-main__label { right: 20px; bottom: 18px; left: 20px; }
    .gallery-main__label strong { font-size: 19px; }
    .gallery-expand { top: 15px; right: 15px; width: 44px; height: 44px; }
    .gallery-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, 145px); gap: 12px; }
    .gallery-thumb:last-child { grid-column: 1 / -1; }
    .gallery-thumb { min-height: 0; border-radius: 15px; }
    .project-route-map { gap: 18px; padding: 14px; }
    .project-route-map figcaption { padding: 0 5px 5px; font-size: 14px; }

    .engineering-facts,
    .engineering-grid { grid-template-columns: 1fr; }
    .engineering-facts > div { min-height: 122px; }
    .engineering-grid article { min-height: 0; padding: 26px; }

    .snapshot-grid { grid-template-columns: 1fr; }
    .snapshot-grid__wide { grid-column: auto; }
    .snapshot-grid > div { min-height: 0; padding: 16px; gap: 10px; }
    .snapshot-card__icon { width: 26px; height: 26px; }
    .snapshot-grid dd { font-size: 16px; }

    .challenge-card { border-radius: 20px; }
    .challenge-card__visual { aspect-ratio: 4 / 3; }
    .challenge-card__visual figcaption { right: 20px; bottom: 18px; left: 20px; }
    .challenge-card__visual figcaption strong { display: none; }
    .challenge-card__content { padding: 32px 22px 35px; }

    .scope-grid { grid-template-columns: 1fr; }
    .scope-grid article { min-height: 235px; padding: 26px; }
    .approach-panel { margin-top: 60px; padding: 31px 22px; border-radius: 20px; }
    .approach-steps li { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; }
    .approach-steps li > span { width: 42px; height: 42px; }
    .approach-steps::before { left: 20px; }

    .outcome-visual { aspect-ratio: 4 / 3; border-radius: 20px; }
    .outcome-visual figcaption { right: 20px; bottom: 18px; left: 20px; font-size: 12px; }

    .project-link-grid,
    .related-grid { grid-template-columns: 1fr; }
    .project-link-card--accent { grid-column: auto; }
    .project-link-card { min-height: 340px; padding: 29px 25px; }

    .project-cta__panel { padding: 34px 22px; border-radius: 20px; }
    .project-cta__actions { max-width: none; }

    .project-lightbox__dialog { width: 94vw; height: 92dvh; }
    .project-lightbox__close { top: 10px; right: 10px; }
    .project-lightbox__full-image { top: 10px; left: 10px; }
    .project-lightbox__nav { top: auto; bottom: 4px; transform: none; }
    .project-lightbox__nav:hover { transform: scale(1.05); }
    .project-lightbox__nav--prev { left: calc(50% - 62px); }
    .project-lightbox__nav--next { right: calc(50% - 62px); }
    .project-lightbox figure img { max-height: calc(92dvh - 170px); border-radius: 12px; }
    .project-lightbox figcaption { flex-direction: column; gap: 5px; margin: 12px 0 68px; padding: 0 12px; }
}

/* Порядок 350 → 430 такий самий, як у шаблоні: правила не перетинаються,
   тому переставляти їх «по спаданню» тут не треба. */
@media (max-width: 350px) {
    .outcome-layout { grid-template-columns: minmax(0, 1fr); }
    .outcome-content { min-width: 0; }
    .project-page .outcome-content .btn {
        width:       100%;
        max-width:   100%;
        min-width:   0;
        height:      auto;
        min-height:  56px;
        padding:     12px;
        font-size:   14px;
        line-height: 1.35;
        white-space: normal;
        text-align:  center;
    }
    .project-proof { grid-template-columns: 1fr; }
    .project-proof > div { min-height: 73px; grid-template-columns: 25px minmax(0, 1fr); gap: 2px 12px; padding: 12px 16px; }
    .project-proof > div:nth-child(odd) { border-right: 0; }
    .project-proof > div:nth-child(n+2) { border-top: 1px solid rgba(119, 198, 255, .16); }
    .project-proof .icon { grid-row: 1 / 3; width: 22px; height: 22px; }
    .project-proof strong { grid-column: 2; margin-top: 0; font-size: 14px; }
}

@media (max-width: 430px) {
    .project-hero h1 { font-size: clamp(30px, 8.2vw, 34px); }
    .gallery-thumbs { grid-template-columns: 1fr; grid-template-rows: repeat(5, 170px); }
    .gallery-thumb:last-child { grid-column: auto; }
    .gallery-thumb span { font-size: 13px; }
    .project-link-card h3 { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
    .project-page *,
    .project-page *::before,
    .project-page *::after {
        animation-duration:      .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:     .01ms !important;
    }
}

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