/* Локальні правки копії сайту. Оригінальні файли Webflow не змінені. */

/* Бейдж "Made in Webflow" вставляється скриптом під час виконання,
   тому ховаємо його стилем — !important перебиває інлайнові стилі. */
.w-webflow-badge {
  display: none !important;
}


/* ── Твердий пензель над PRODUCT DESIGNER ──────────────────────────── */

.ua-host { position: relative; }

@media (hover: hover) and (pointer: fine) {
  .ua-host > h1 {
    cursor: pointer;
  }
}

@media (hover: none) and (pointer: coarse) {
  .ua-host > h1 {
    touch-action: none;
  }
}

.ua-patch-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.ua-patch {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}

.ua-patch.is-ready { opacity: 1; }

.ua-patch__inner {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ua-patch__inner .ua-clone {
  position: absolute;
  inset: 0;
  margin: 0;
  color: #f4cd00;
  pointer-events: none;
}

.ua-patch__inner .ua-clone .span-title {
  color: #f4cd00 !important;
  opacity: 1 !important;
  transform: none !important;
}

.paint-mask-svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* ── Колір тексту, який користувач вводить у формі ──────────────── */
/* Webflow не задає color для .text-field-default / .textarea-default,
   тож спрацьовував дефолт .w-input { color: #333 } — темний текст на
   темному тлі був майже невидимий. Плейсхолдер і рамки не чіпаємо. */

.text-field-default,
.textarea-default {
  color: #ffffff;
  caret-color: #ffffff;
}

/* :hover у Webflow перефарбовував текст у light-grey — тримаємо білий */
.text-field-default:hover,
.text-field-default:focus,
.textarea-default:hover,
.textarea-default:focus {
  color: #ffffff;
}

/* Автозаповнення Chrome підставляє власний білий фон і чорний текст */
.text-field-default:-webkit-autofill,
.text-field-default:-webkit-autofill:hover,
.text-field-default:-webkit-autofill:focus,
.textarea-default:-webkit-autofill,
.textarea-default:-webkit-autofill:hover,
.textarea-default:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1000px var(--black, #151413) inset;
  caret-color: #ffffff;
  transition: background-color 9999s ease-in-out 0s;
}


/* ── Інверсія шапки під фон (див. custom/nav-invert.js) ─────────────── */
/* Темну копію лого додає скрипт. Якщо JS не виконався — усе лишається
   рівно таким, як було: світле лого і світлий бургер. */

.nav-logo-wrapper--invertible {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.nav--invertible .nav-logo {
  transition: opacity .2s linear;
}

.nav-logo--dark {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

/* Темне лого поверх світлого, коли під шапкою світлий фон */
#nav.nav--on-light .nav-logo:not(.nav-logo--dark) { opacity: 0; }
#nav.nav--on-light .nav-logo--dark { opacity: 1; }

/* Бургер стоїть у тій самій шапці — інвертуємо разом із лого */
.nav--invertible .nav-burger-line-1,
.nav--invertible .nav-burger-line-2 {
  transition: background-color .2s linear;
}

#nav.nav--on-light .nav-burger-line-1,
#nav.nav--on-light .nav-burger-line-2 {
  background-color: var(--dark-grey, #212224);
}


/* ── Кнопки: початковий стан «ripple» ───────────────────────────────── */
/* .button-ripple у Webflow лежить inset:0 і ховається лише інлайновим
   стилем, який IX2 виставляє під hover-взаємодію. На тач-пристроях
   hover-взаємодії не ініціалізуються — і підсвітка лишалася розгорнутою
   (сірий овал усередині кнопки). Задаємо той самий стан спокою, що й на
   десктопі: зсув під кнопку. Інлайновий стиль IX2 це перебиває, тож
   анімація на десктопі працює як раніше. */

.button-ripple {
  transform: translate3d(0, 100%, 0);
}


/* ── Кейси: зображення на всю ширину свого контейнера ───────────────── */
/* .project-gallery-2-img-grid._2 має display:block, тож картинка не бере
   ширину від сітки — браузер рахує її з атрибута sizes, де від експорту
   Webflow лишилося "(max-width: 479px) 48vw ... 50vw". Через це частина
   зображень у кейсі OnTrack стояла вужчою за контейнер на всіх ширинах.
   Решта картинок у цих блоках і так рендерилася на 100%, тож правило
   лише підтягує відсталих і більше нічого не змінює. */

.project-gallery-2-img-grid._2 > img {
  width: 100%;
}


/* ── About, перший екран: композиція за макетом 390×740 ─────────────── */
/* Було: фото центрувалося у блоці висотою 60% секції, тож із висотою
   екрана «плавало» відносно заголовка, а сам заголовок стояв у верхній
   третині фото. Стало: фото зафіксоване зверху, заголовок опущено на
   нижню частину фото, другий рядок звисає під його нижній край.
   Числа взяті з макета (у ньому 1pt = 1px). */

@media screen and (max-width: 479px) {
  /* Пропорція самого знімка (0.73) замість 15em×20em (0.75) —
     кадрування object-fit більше нічого не зрізає. */
  .about-hero-img-wrapper {
    top: 85px;
    bottom: auto;
    height: auto;
    align-items: flex-start;
  }

  .img-container {
    width: 247px;
    height: 339px;
  }

  /* 160px падінгу секції + 150 = верх заголовка на 310 */
  .about-hero-section h1 {
    margin-top: 150px;
  }

  .about-hero-section .about-hero-text-wrapper {
    margin-top: 33px;
  }

  .about-hero-text-wrapper .text-block-max-width._6 {
    margin-top: 10px;
  }
}


/* ── About: затемнення портрета під заголовком ──────────────────────── */
/* Заголовок лежить поверх знімка, а той місцями світлий (небо, скло) —
   світло-сірий текст на ньому губився. Кладемо рівну маску #000 20%.
   Окремий ::after, а не наявний .img-overlay: той бере участь в
   анімації появи Webflow (scaleY 1→0), і його чіпати не можна. */

.about-hero-img-wrapper .img-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .2);
  pointer-events: none;
  z-index: 1;   /* вище знімка, але нижче .default-wrapper із z-index: 2 —
                   інакше маска лягає ще й на самі літери заголовка */
}


/* ── Silpo OPD case study (silpo-opd.html) ────────────────────────── */
/* Сітка — та сама, що на сайті: .default-wrapper з полями 10vw,
   права колонка тексту починається з середини обгортки.            */

.silpo-case { background-color: var(--black); }

.silpo-hero {
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 8em;
  padding-bottom: 5.5em;
  background-color: var(--black);
}

.silpo-kicker { gap: 0; }
.silpo-kicker .title-xsmall { padding-right: 1em; }
.silpo-title h1 { white-space: nowrap; }

.silpo-cover { width: 100%; overflow: hidden; }
.silpo-cover-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 1123;
  object-fit: cover;
}

.silpo-block {
  padding-top: 5.2em;
  padding-bottom: 5.2em;
  background-color: var(--black);
}
.silpo-block--first { padding-top: 10.4em; }
.silpo-block--text { padding-bottom: 10em; }
.silpo-block--next { padding-top: 10.4em; padding-bottom: 10.4em; }

.silpo-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.silpo-head--center { align-items: center; }

.silpo-head h4,
.silpo-results-text h4 { max-width: 6.6em; }

.silpo-text p,
.silpo-results-text p { line-height: 1.4; }
.silpo-text p + p,
.silpo-text p + ul,
.silpo-text ul + p,
.silpo-results-text p + p { margin-top: 1.4em; }
.silpo-text p { margin-bottom: 0; }

.silpo-case strong { font-weight: 600; }

.silpo-list {
  margin: 0;
  padding-left: 1.3em;
  line-height: 1.4;
}
.silpo-list li + li { margin-top: 1.4em; }
.silpo-list li::marker { font-size: .8em; }

.silpo-media,
.silpo-grid { margin-top: 3.1em; }

.silpo-media img,
.silpo-grid img {
  display: block;
  width: 100%;
  height: auto;
}

.silpo-grid { display: grid; gap: 1.05em; }
.silpo-grid--2 { grid-template-columns: 1fr 1fr; }
.silpo-grid--3 { grid-template-columns: repeat(3, 1fr); }

.silpo-swipe-hint { display: none; }

/* Результат — світла секція, як results на інших кейсах */
.silpo-results {
  padding-top: 6em;
  padding-bottom: 8em;
  background-color: var(--light-grey);
  color: var(--black);
}
.silpo-results .text-size-large { color: var(--black); }
.silpo-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.silpo-results-text { padding-right: 4em; }
.silpo-results-text h4 { margin-bottom: .25em; }

.silpo-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: .4em;
  border-top: 1px solid rgba(21, 20, 19, .6);
  border-left: 1px solid rgba(21, 20, 19, .6);
}
.silpo-metric {
  padding: 2.8em 2.8em 2.6em;
  min-height: 16.7em;
  border-right: 1px solid rgba(21, 20, 19, .6);
  border-bottom: 1px solid rgba(21, 20, 19, .6);
}
.silpo-metric .title-small { letter-spacing: -.02em; white-space: nowrap; }
.silpo-metric p { margin-top: 1em; margin-bottom: 0; max-width: 11em; line-height: 1.4; }

/* Плавна поява блоків (працює лише з JS; без JS усе видно одразу) */
.silpo-js .silpo-reveal {
  opacity: 0;
  transform: translate3d(0, 3rem, 0);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.silpo-js .silpo-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .silpo-js .silpo-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Планшет ── */
@media screen and (max-width: 991px) {
  .silpo-head { grid-template-columns: 1fr; row-gap: 1.5em; }
  .silpo-head h4 { max-width: none; }
  .silpo-results-grid { grid-template-columns: 1fr; row-gap: 3em; }
  .silpo-results-text { padding-right: 0; }
  .silpo-results-text h4 { max-width: none; }
  .silpo-metric { padding: 2em; min-height: 0; }
}

/* ── Мобільна ── */
@media screen and (max-width: 767px) {
  .silpo-hero { min-height: 88vh; min-height: 88svh; padding-top: 7rem; padding-bottom: 3rem; }
  .silpo-case .silpo-kicker { flex-direction: row !important; flex-wrap: wrap; row-gap: .25rem; }
  .silpo-kicker .title-xsmall { font-size: 1.5rem; padding-right: .75rem; }
  .silpo-case .silpo-title h1 { white-space: nowrap; font-size: 22vw; letter-spacing: -.02em; margin-top: .75rem; margin-bottom: .5rem; }
  .silpo-title .project-year-wrapper { margin: 0; }
  .silpo-title .project-year-wrapper h4 { margin-top: 0; font-size: 2.5rem; }

  .silpo-cover-img { aspect-ratio: 4 / 3; }

  .silpo-block { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .silpo-block--first { padding-top: 4.5rem; }
  .silpo-block--text,
  .silpo-block--next { padding-top: 3.5rem; padding-bottom: 4.5rem; }

  .silpo-head { row-gap: 1rem; }
  .silpo-head h4 { margin-top: 0; margin-bottom: 0; }
  .silpo-text p + p,
  .silpo-text p + ul,
  .silpo-text ul + p,
  .silpo-results-text p + p { margin-top: 1rem; }
  .silpo-list li + li { margin-top: 1rem; }

  .silpo-media,
  .silpo-grid { margin-top: 2rem; }
  .silpo-grid { gap: .5rem; }
  .silpo-grid--2,
  .silpo-grid--3 { grid-template-columns: 1fr; }
  .silpo-grid--3 { gap: .5rem; }

  /* Широкі панелі з кількома екранами — горизонтальний свайп
     замість дрібного масштабу; виходять під край екрана.          */
  .silpo-media--scroll {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .silpo-media--scroll::-webkit-scrollbar { display: none; }
  .silpo-media--scroll img {
    width: auto;
    max-width: none;
    height: 28rem;
  }
  .silpo-swipe-hint {
    display: block;
    margin: .75rem 0 0;
    font-size: .875rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    opacity: .6;
  }

  .silpo-results { padding-top: 3.5rem; padding-bottom: 4.5rem; }
  .silpo-results-grid { row-gap: 2rem; }
  .silpo-results-text h4 { margin-top: 0; margin-bottom: 1rem; }
  .silpo-metric { padding: 1.5rem 1.25rem; }
  .silpo-metric .title-small { font-size: 3rem; }
  .silpo-metric p { font-size: 1rem; margin-top: .75rem; }
}

@media screen and (max-width: 479px) {
  .silpo-metric .title-small { font-size: 2.6rem; }
}

/* Обкладинка Silpo OPD у списках проєктів */
.project-bg-img.silpo-opd-cover,
.img-fill.silpo-opd-cover { object-fit: cover; }

/* ── Silpo OPD v2 (редизайн 2026-09-28) ───────────────────────────── */
.silpo-lead {
  font-size: 1.5em;
  font-weight: 500;
  line-height: 1.3;
  color: var(--light-grey);
  margin-bottom: 0;
}
.silpo-text .silpo-lead + p,
.silpo-text .silpo-lead + ul { margin-top: .7em; }
.silpo-list--tight li + li { margin-top: .15em; }

.silpo-rounded img { border-radius: 1.6em; }
.silpo-media--center { display: flex; justify-content: center; }
.silpo-media--center img { width: 56.7%; }
.silpo-grid--tight,
.silpo-media--tight { margin-top: 1.05em; }

@media screen and (max-width: 767px) {
  .silpo-lead { font-size: 1.25rem; }
  .silpo-rounded img { border-radius: 1rem; }
  .silpo-media--center img { width: 100%; }
  .silpo-grid--tight,
  .silpo-media--tight { margin-top: .5rem; }
  .silpo-media--scroll.silpo-rounded img { border-radius: 0; }
}

.project-bg-img.ontrack-app-cover,
.img-fill.ontrack-app-cover { object-fit: cover; }
@media screen and (max-width: 767px) {
  .project-bg-img.ontrack-app-cover, .img-fill.ontrack-app-cover { object-position: 54% 50%; }
}