/* Власні виправлення поверх стилів Webflow */

/* Типографіка: браузер сам уникає одного слова в останньому рядку абзацу (Chrome, Safari, Edge; інші — без змін).
   Висячі короткі слова в кінці рядків прибирає scripts/typograph.mjs (нерозривні пробіли) */
p, li, blockquote,
.services-hero-sub-headline-text, .faq-item-text, .review-text-slide,
.project-hero-text, .info-item-text { text-wrap: pretty; }

/* Сірий текст доступного контрасту (WCAG AA ≥ 4.5:1): #737373 дає 4.74 на білому і 4.51 на фоні футера #f9f9f9
   (Webflow: #808080 = 3.95 / 3.75). Діє на все, що використовує --black-500: футер, підписи, підказки у формі */
:root { --black-500: #737373; }
/* Підписи в кейсах (Challenge, Industry, Timeline…): у Webflow --black-400 = #999 (2.85:1) → той самий доступний сірий */
.project-hero-text-headline.text-xl-2.text-weight-medium.text-color-black-900 { color: var(--black-500); }

/* Стрілка в заголовках: SVG усередині заголовка, висота = висоті великої літери Inter (0.727em) */
.h-arrow {
  display: inline-block;
  height: .727em;
  width: .757em;
  margin-right: .3em;
  vertical-align: baseline;
  overflow: visible;
}
.h-arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.text-weight-bold .h-arrow path { stroke-width: 4; }
/* стрілка не відривається від першого слова заголовка (scripts/fix-arrows.mjs обгортає їх у .h-arrow-nw) */
.h-arrow-nw { white-space: nowrap; }

/* «Про нас»: заголовки секцій AGENCY / CEO / EVOLUTION — розміром як назви кейсів на головній
   (.project-headline-text, H3: 32 / 28 / 24px, трекінг −0.96px). Тег лишається H2 */
.about-sc h2.universal-section-headline-text,
.education-section h2.universal-section-headline-text { font-size: 32px; line-height: 36px; letter-spacing: -0.96px; }
@media (max-width: 991px) {
  .about-sc h2.universal-section-headline-text,
  .education-section h2.universal-section-headline-text { font-size: 28px; }
}
@media (max-width: 479px) {
  .about-sc h2.universal-section-headline-text,
  .education-section h2.universal-section-headline-text { font-size: 24px; }
}

/* «Про нас»: картинки в кінці блоків AGENCY / CEO — 40px від тексту над ними,
   а блок EVOLUTION після CEO відступає 80px (як CEO від AGENCY), інакше текст прилипав до фото */
.about-rich-wrap .about-image { margin-top: 28px; }
.about-sc + .education-section { padding-top: 80px; }

/* Картки з картинкою й підписом під нею (головна: WORKFLOW, «Процес»: послуги), коли стають в стовпчик */
@media (max-width: 991px) {
  .wroking-process-section .services-numbering-text,
  .services-section .services-numbering-text { margin-top: 20px; }
}
/* Головна картинка кейсів і послуг на телефоні: 48px до заголовка (у Webflow 30px) */
@media (max-width: 767px) { .project-hero-image-block { margin-bottom: 48px; } }
/* Портрет на головній на телефоні: 32px від заголовка й від тексту (у Webflow 20px) */
@media (max-width: 479px) {
  .home-hero-image-block-m { margin-top: 32px; }
  .home-hero-image-block-m + * , .home-hero-text-content-wrapper { margin-top: 32px; }
}

/* «Про нас»: верхній блок ABOUT US як на «Процесі», але без стрічки картинок — прибираємо відступ під картинки
   і зменшуємо нижній відступ блоку, щоб до AGENCY був звичайний ритм секцій */
.about-hero .services-hero-headline-block { margin-bottom: 0; }
/* блок AGENCY має власні 80px зверху: разом виходить 120 / 96 / 80px від тексту до AGENCY */
.about-hero.section-margin { margin-bottom: 40px; }
@media (max-width: 991px) { .about-hero.section-margin { margin-bottom: 16px; } }
@media (max-width: 479px) { .about-hero.section-margin { margin-bottom: 0; } }

/* Головні картинки кейсів і послуг: width/height у розмітці лише для пропорції (CLS), висота автоматична */
.project-hero-image { height: auto; }

/* Поява першого екрана через CSS замість анімації Webflow (та чекала на JS і затримувала LCP на 2–3 с) */
@keyframes u-fade-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
.u-fade-in { animation: u-fade-in .8s cubic-bezier(.22, .61, .36, 1) both; }
.u-fade-in.u-delay-1 { animation-delay: .12s; }
.u-fade-in.u-delay-2 { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .u-fade-in { animation: none; } }

/* Посилання у відповідях FAQ — як у текстах кейсів (.projects-rich-text a) */
.faq-item-text a {
  color: var(--main-blue, #5096ff);
  text-decoration: underline;
}

/* Цифри лічильника тепер <div> замість <h1> (один H1 на сторінку для SEO): розмір, що раніше давав тег h1.
   На телефоні (≤479px) розмір задає правило Webflow для .info-item-headline */
@media (min-width: 480px) { .info-item-headline { font-size: 48px; line-height: 60px; letter-spacing: -2.16px; } }

/* Блок цифр (лічильник) — 23.10 прибрано з усіх сторінок в архів _removed/counters-block.html (scripts/remove-counters.mjs). Якщо повернемо — показується лише з .is-visible.
   Зараз у резерві: на «Про нас» стоїть між AGENCY і CEO без is-visible, тобто прихований. */
/* наступний блок (CEO) має власні 80px зверху, тому знизу відступ на 80px менший — візуально порівну */
.information-section.is-visible { display: block; margin-top: 120px; margin-bottom: 40px; }
@media (max-width: 991px) { .information-section.is-visible { margin-top: 80px; margin-bottom: 0; } }

/* Кейси: картинки в тексті відокремлені від тексту однаково з обох боків (у Webflow було 20px над / 10px під),
   серія картинок поспіль — щільною групою */
/* .rich-images — пара картинок поруч (на телефоні одна під одною), її вставляє скрипт шаблону на місце [pair-img] */
.projects-rich-text figure,
.projects-rich-text .rich-images { margin-top: 48px; margin-bottom: 48px; }
.projects-rich-text .rich-images { gap: 16px; }
.projects-rich-text :is(figure, .rich-images) + :is(figure, .rich-images) { margin-top: 16px; }
.projects-rich-text :is(figure, .rich-images):has(+ :is(figure, .rich-images)) { margin-bottom: 16px; }
.projects-rich-text > :is(figure, .rich-images):first-child { margin-top: 0; }
@media (max-width: 767px) {
  .projects-rich-text figure,
  .projects-rich-text .rich-images { margin-top: 32px; margin-bottom: 32px; }
  .projects-rich-text .rich-images { gap: 12px; }
  .projects-rich-text :is(figure, .rich-images) + :is(figure, .rich-images) { margin-top: 12px; }
  .projects-rich-text :is(figure, .rich-images):has(+ :is(figure, .rich-images)) { margin-bottom: 12px; }
}

/* Слайдер відгуків: стрілки завжди праворуч. У Webflow на 768–991px вони стрибали ліворуч
   (на телефоні й комп'ютері — праворуч); вирівнюємо планшет як телефон */
@media (max-width: 991px) {
  .review-slider-left-arrow { left: auto; right: 60px; }
  .review-slider-right-arrow { left: auto; right: 0; }
}

/* Форма заявок (site/assets/contact-form.js): помилки — соковитий помаранч.
   Лінія #F25C00 (контраст 3.3:1, норма для елементів), текст #CC4A00 (4.6:1, норма для тексту) */
.form-input.is-invalid,
.form-input.is-invalid:focus { border-bottom-color: #F25C00; box-shadow: inset 0 -1px 0 #F25C00; }
.form-error { margin: -4px 0 0; font-size: 13px; line-height: 18px; color: #CC4A00; } /* + 12px проміжку блоку = 8px від лінії */
.form-error[hidden] { display: none; }
.form-required-note { margin: 12px 0 0; font-size: 13px; line-height: 18px; color: var(--black-500, #737373); }
.contact-form-wrapper.is-sending .custom-submit { opacity: .55; cursor: progress; }
.contact-form .w-form-done { padding: 40px; background: var(--black-50-2, #f9f9f9); text-align: left; outline: none; }
.contact-form .w-form-done .text-block { font-size: 18px; line-height: 28px; color: var(--black-900, #0c0407); }
.contact-form .w-form-fail { margin-top: 24px; padding: 14px 18px; background: #fff; border-left: 3px solid #F25C00; font-size: 15px; line-height: 24px; color: var(--black-800, #333); }
.contact-form .w-form-fail a { color: var(--main-blue, #5096ff); text-decoration: underline; }

/* Відгуки: ім'я веде на кейс клієнта, іконка — на LinkedIn (scripts/review-links.mjs) */
.reviewer-name-link { color: inherit; font-weight: inherit; text-decoration: none; }
.reviewer-name-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.reviewer-linkedin { display: inline-flex; vertical-align: -2px; margin-left: 8px; color: var(--black-500, #737373); transition: color .2s; }
.reviewer-linkedin svg { width: 15px; height: 15px; fill: currentColor; }
.reviewer-linkedin:hover { color: #0a66c2; }

/* Сторінка /privacy: компактний стриманий текст у колонці блоку .about-rich (як AGENCY на «Про нас») */
.privacy-sc { padding-bottom: 160px; }
.privacy-text { max-width: 620px; font-size: 15px; line-height: 24px; color: var(--black-700, #4c4c4c); }
.privacy-text p { margin: 0 0 12px; font-size: 15px; line-height: 24px; }
.privacy-text .privacy-title { margin: 0 0 6px; font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; color: var(--black-900, #0c0407); }
.privacy-text .privacy-edition { margin: 0 0 36px; font-size: 13px; color: var(--black-500, #737373); }
.privacy-text h2 { display: flex; align-items: baseline; gap: 12px; margin: 32px 0 8px; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: 0; color: var(--black-900, #0c0407); }
.privacy-text h2 span { font-size: 13px; font-weight: 500; color: var(--black-500, #737373); font-variant-numeric: tabular-nums; }
.privacy-text .privacy-note { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--border-color, #e4e4e4); font-size: 13px; color: var(--black-500, #737373); }
.privacy-text a { color: var(--main-blue, #5096ff); text-decoration: underline; }
@media (max-width: 767px) { .privacy-sc { padding-bottom: 96px; } }

/* Сторінка /partnership (scripts/build-partnership.mjs): блоки як AGENCY; посилання в тексті; відступ перед футером як на /privacy */
.partnership-sc .about-rich a { color: var(--main-blue, #5096ff); text-decoration: underline; }
.partnership-sc:last-child { padding-bottom: 160px; }
@media (max-width: 767px) { .partnership-sc:last-child { padding-bottom: 96px; } }

/* Портфоліо знаків на «Про нас»: width/height у розмітці лише для пропорції, висота — автоматична */
.about-image { height: auto; }

/* Кейси: підпис «Зверніть увагу…» (h6 у тексті кейсу) — 12 px, сірий як основний текст (чорний був надто різкий; погоджено 22.10) */
.projects-rich-text h6 { color: #666; }

/* «Процес» (scripts/process-hero.mjs): стрічка обкладинок кейсів — проміжок 2 px на всіх ширинах,
   рух рівно 60 px/с: тривалість = 6 × (ширина картинки + 2) / 60 (рішення 23.10).
   CSS-анімація перекриває анімацію Webflow «services-hero-loop». Проміжок — padding-right ряду, щоб коло було без стрибка. */
@keyframes u-hero-loop { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.services-hero-images-content-wrapper { gap: 2px; margin-right: 0; padding-right: 2px; animation: u-hero-loop 50.4s linear infinite; }
@media screen and (max-width: 991px) { .services-hero-images-content-wrapper { gap: 2px; padding-right: 2px; margin-right: 0; animation-duration: 40.2s; } }
@media screen and (max-width: 767px) { .services-hero-images-content-wrapper { animation-duration: 30.2s; } }
@media screen and (max-width: 479px) { .services-hero-images-content-wrapper { gap: 2px; padding-right: 2px; margin-right: 0; animation-duration: 27.2s; } }

/* «Процес»: блок «Як ми працюємо» на світло-сірому фоні, як SELECTED WORKS на головній (.recent-project-section) */
.services-section.u-section-gray { background-color: var(--black-50-2, #f9f9f9); padding-top: 120px; padding-bottom: 80px; margin-bottom: 100px; }
.u-section-gray .services-section-content-wrapper { padding-top: 0; } /* свій відступ 120 px блоку — інакше зверху подвоюється */
@media screen and (max-width: 991px) { .services-section.u-section-gray { margin-bottom: 40px; } }
@media screen and (max-width: 479px) { .services-section.u-section-gray { padding-top: 60px; padding-bottom: 60px; } }

/* «Процес» (scripts/process-how.mjs, затверджено 23.10): «Як ми працюємо» без фото, картки сіткою 3 колонки,
   тонка лінія під назвою (колір рамок сайту). Тексти, шрифти, кольори — як у робочому блоці. */
.services-cards-wrapper.u-how-v2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 64px; row-gap: 150px; } /* від кнопки до наступного ряду: 100 → 150 px (+50 %, 23.10) */
/* картка = 3 рядки спільної сітки (subgrid): назва+лінія, текст, кнопка «Замовити» — лінії в одному ряду на одній висоті, навіть якщо назва у 2 рядки */
.u-how-v2 .services-card-content-wrapper { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.u-how-v2 .services-headline-wrapper { justify-content: space-between; }
.u-how-v2 .services-headline-wrapper { max-width: none; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color, #e4e4e4); row-gap: 20px; }
.u-how-v2 .services-numbering-text { margin-top: 0; }
.u-how-v2 .services-numbering-text.text-sm.text-weight-semibold.text-color-black-900 { color: var(--black-500, #737373); } /* #999 на сірому фоні — контраст 2.7; токен сайту #737373 — 4.5 (23.10) */
.u-how-v2 .services-text-content-wrapper { max-width: none; margin-right: 0; row-gap: 16px; }
.u-how-v2 .servcies-tag-content-wrapper { flex-wrap: wrap; row-gap: 4px; }
.u-how-v2 .services-intro-text-block { max-width: 340px; }
.u-how-v2 .u-how-cta { align-self: end; padding-top: 24px; } /* кнопки ряду — на одній лінії по низу */
.u-how-v2 .u-how-cta .button-small { display: inline-flex; }
@media screen and (max-width: 991px) {
  .services-cards-wrapper.u-how-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 96px; }
  .u-how-v2 .services-headline-wrapper { row-gap: 8px; margin-bottom: 16px; }
  .u-how-v2 .services-text-content-wrapper { row-gap: 12px; }
}
@media screen and (max-width: 767px) {
  .services-cards-wrapper.u-how-v2 { grid-template-columns: minmax(0, 1fr); row-gap: 72px; }
  .u-how-v2 .services-intro-text-block { max-width: none; }
}

/* Форма /contact (scripts/contact-form-setup.mjs): рядок про політику під кнопкою (5.4) — як примітка «* обов'язкові поля»; пастка для ботів прихована */
.form-consent-note { margin: 4px 0 0; width: max-content; max-width: min(680px, calc(100vw - 32px)); font-size: 13px; line-height: 18px; color: var(--black-500, #737373); } /* блок кнопки в шаблоні 138 px — рядок виходить за нього */
.form-consent-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.form-consent-note a:hover { color: var(--black-900, #0c0407); }
.form-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Телефони (23.10, бета на iPhone 17 Pro Max): довгі слова у великих заголовках не вміщались у рядок («структурування», «корпоративного»).
   На вузьких екранах розмір пропорційний ширині (найдовше слово ≈ 8,4 em у H1 і ≈ 9,6 em у підзаголовку кейсу); міжрядковий і трекінг — у em, як були. */
@media screen and (max-width: 479px) {
  .section-hero-headline { font-size: min(52px, calc(11.9vw - 3px)); line-height: 1.154; letter-spacing: -0.0577em; }
  .projects-rich-text h2 { font-size: min(36px, 9.5vw); line-height: 1.2; letter-spacing: -0.05em; }
}

/* Кейси: єдиний ритм тексту й зображень (scripts/case-layout.mjs прибрав порожні абзаци-розпірки, 23.10).
   Між текстом, зображенням, новим розділом і завершальним блоком — 80 px (телефон — 56), між зображеннями поспіль — 16 (12).
   Відступи сусідніх блоків схлопуються, тож береться більший — ритм не залежить від того, що стоїть поруч. */
.projects-rich-text figure, .projects-rich-text .rich-images { margin-top: 80px; margin-bottom: 80px; }
.projects-rich-text figure:has(+ figure), .projects-rich-text figure:has(+ .rich-images),
.projects-rich-text .rich-images:has(+ figure), .projects-rich-text .rich-images:has(+ .rich-images) { margin-bottom: 16px; }
.projects-rich-text figure + figure, .projects-rich-text figure + .rich-images,
.projects-rich-text .rich-images + figure, .projects-rich-text .rich-images + .rich-images { margin-top: 16px; }
.projects-rich-text h4 { margin-top: 80px; }
.projects-rich-text blockquote { margin-top: 40px; margin-bottom: 40px; }
/* завершальний блок «Зверніть увагу…»: два абзаци дрібним сірим */
.projects-rich-text h6 { margin-top: 80px; margin-bottom: 0; }
.projects-rich-text h6 + h6 { margin-top: 12px; }
@media screen and (max-width: 767px) {
  .projects-rich-text figure, .projects-rich-text .rich-images { margin-top: 56px; margin-bottom: 56px; }
  .projects-rich-text figure:has(+ figure), .projects-rich-text figure:has(+ .rich-images),
  .projects-rich-text .rich-images:has(+ figure), .projects-rich-text .rich-images:has(+ .rich-images) { margin-bottom: 12px; }
  .projects-rich-text figure + figure, .projects-rich-text figure + .rich-images,
  .projects-rich-text .rich-images + figure, .projects-rich-text .rich-images + .rich-images { margin-top: 12px; }
  .projects-rich-text h4, .projects-rich-text h6 { margin-top: 56px; }
  .projects-rich-text h6 + h6 { margin-top: 12px; }
  .projects-rich-text blockquote { margin-top: 32px; margin-bottom: 32px; }
}