/* =========================================================================
   PROEKCIA · Брендбук — 04. SECTIONS
   Композиція кожної секції (s01…s12). Порядок збігається з порядком у
   index.html: одна секція — один блок правил — один майбутній WP-блок.
   Брейкпоінти: 1280 / 1024 / 860 / 560.
   ========================================================================= */

/* ===================== s01 · HERO ======================================
   Перенесено з Figma (фрейм 1920 → помаранчевий блок 1680×1004, відступ
   120px з боків = 6.25vw). Від 992px це пропорційний артборд: діти
   позиціоновані у % від нього, кеглі — у cqw, тому вся композиція
   масштабується разом із шириною екрана, як у макеті.
   До 992px — звичайний потік: заголовок, лід, фото, кнопки.          */

/* Помаранчеве полотно — на весь екран (без блакитних полів), а сама
   композиція лишається у своїх межах із макета: відступ 6.25vw з боків
   (120px при 1920) і притиснута до низу, щоб кіт стояв на нижньому краї. */
.hero{
  position:relative;            /* відео героя тримається низу блоку, а не
                                   вікна: на низьких екранах (MacBook Air)
                                   блок вищий за вікно і знизу лишалась смуга */
  margin:0;
  padding:0 var(--gutter);      /* той самий відступ, що й у шапки — щоб
                                   «Бренд» і кнопки стояли рівно під лого */
  min-height:100svh;
  display:flex;align-items:flex-end;
  background:var(--accent);
  color:var(--white);
  overflow:hidden;
}
/* до 768px екран рівно на висоту вьюпорта: низ помаранчевого блоку —
   це нижній край будь-якого екрана, а артборд масштабується так,
   щоб цілком уміститись під шапкою. */
@media only screen and (max-width:767px){
  .hero{
    height:100svh;min-height:0;padding:0;
    align-items:flex-end;justify-content:center;
  }
}

.hero__stage{
  position:relative;
  width:100%;
  container-type:inline-size;
  padding:calc(var(--header-h) + 6vw) var(--gutter) 4vw;
}
@media only screen and (min-width:768px){
  .hero__stage{
    aspect-ratio:1680 / 1004;
    padding:0;
  }
  /* позиціонуємо кожен елемент окремо: .hero__title і .hero__actions —
     display:contents, тому селектор "> *" їх дітей не дістає */
  .hero__word,
  .hero__cutout,
  .hero__lead,
  .hero__btn,
  .hero__letter{position:absolute;}
}

/* ---- гігантська типографіка ---- */
.hero__title{display:contents;}
.hero__word{
  display:block;
  font-family:var(--ff-display);   /* Stolzl Regular, як у макеті */
  font-weight:400;
  letter-spacing:-.05em;
  color:var(--white);
  font-size:20vw;
  line-height:1;
}
@media only screen and (min-width:768px){
  .hero__word{
    font-size:21.664cqw;      /* 363.965 / 1680 */
    line-height:26.012cqw;    /* 437 / 1680 */
  }
  .hero__word--brand{left:0;top:12.766%;width:68.69%;}
  .hero__word--buk{left:58.185%;top:51.975%;width:37.56%;text-align:right;}
}

/* ---- вирізане фото ---- */
.hero__cutout{
  display:block;width:78%;max-width:520px;height:auto;
  margin:4vw auto 0;
  pointer-events:none;        /* прозорий слот не має перехоплювати кліки */
}
@media only screen and (min-width:768px){
  .hero__cutout{
    left:26.25%;bottom:0;top:auto;
    width:46.31%;max-width:none;margin:0;
    object-fit:contain;object-position:bottom;
  }
}

/* ---- відео героя (тільки десктоп) ----------------------------------
   Кадр із готовим написом «Бренд бук» і котом. Коли воно готове, JS
   вішає .hero--video: власні заголовок, літери й статичний кіт ховаються,
   а лід і кнопки лишаються живим HTML поверх відео. */
.hero__video{display:none;}
@media only screen and (min-width:992px){
  /* на всю ширину героя і притиснуте донизу: по горизонталі ніколи
     не ріже, зайве йде вгору за межу екрана */
  .hero__video{
    display:block;position:absolute;left:0;bottom:0;z-index:0;
    width:100%;height:auto;pointer-events:none;
  }
  .hero--video .hero__word,
  .hero--video .hero__letter,
  .hero--video .hero__cutout{opacity:0;visibility:hidden;}
  .hero--video .hero__lead,
  .hero--video .hero__actions{position:absolute;z-index:3;}
}

/* ---- лід ---- */
.hero__lead{
  margin-top:6vw;
  font-size:4.1vw;line-height:1.1;
  letter-spacing:-.03em;
  color:var(--white);max-width:28ch;
}
@media only screen and (min-width:768px){ .hero__lead{font-size:2.2vw;} }
@media only screen and (min-width:768px){
  .hero__lead{
    left:72.56%;top:26.57%;width:23.214%;margin:0;   /* нижче, ніж у макеті, на ~40px */
    font-size:1.3095cqw;      /* 22 / 1680 */
  }
}

/* ---- кнопки ---- */
.hero__actions{
  display:flex;flex-direction:column;gap:2.5vw;
  margin-top:7vw;
}
@media only screen and (min-width:768px){
  .hero__actions{display:contents;}
}
.hero__btn{
  display:flex;align-items:center;justify-content:center;gap:1em;
  font-family:var(--ff-display);
  min-height:56px;padding:1em 2em;
  border-radius:1570px;
  font-size:4.2vw;line-height:1;letter-spacing:-.005em;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
@media only screen and (min-width:768px){ .hero__btn{font-size:2.2vw;} }
@media only screen and (min-width:768px){
  .hero__btn{
    justify-content:space-between;
    left:0;width:23.214%;                      /* по лівому краю лого */
    height:4.762cqw;min-height:0;              /* 80 / 1680 */
    padding:0 2.134cqw;                        /* 35.85 / 1680 */
    font-size:1.4224cqw;                       /* 23.8964 / 1680 */
  }
  .hero__btn--primary{top:70.128%;}            /* 704.08 / 1004 */
  .hero__btn--ghost{top:78.07%;}               /* 783.83 / 1004 */
}
.hero__btn--primary{background:var(--paper);color:var(--ink);--fill:var(--ink);}
.hero__btn--primary svg{
  width:1.422cqw;min-width:18px;height:auto;flex:none;
  transition:transform var(--dur) var(--ease);
}
.hero__btn--primary:hover svg{transform:translateX(.28em);}   /* як у кнопці шапки */
.hero__btn--primary:hover{color:var(--white);}
.hero__btn--ghost{
  border:1.57px solid var(--paper);
  color:var(--paper);
  --fill:var(--ink);
}
.hero__btn--ghost:hover{color:var(--white);border-color:var(--ink);}

/* ---- зелені контури літер: лягають поверх «р» і «к» ---- */
.hero__letter{
  display:none;
  z-index:2;                 /* контури лягають поверх білих літер */
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.hero__letter--r{background-image:url("../images/hero/letter-r.svg");}
.hero__letter--k{background-image:url("../images/hero/letter-k.svg");}
@media only screen and (min-width:768px){
  .hero__letter{display:block;}
  /* низ контуру = низ білої літери, яку він накриває: у «р» це кінець
     виносного елемента (59.87% висоти сцени), у «к» — базова лінія (90.01%).
     Обидва числа зміряні canvas-метриками шрифту на живій сторінці. */
  .hero__letter--r{left:13.921%;top:auto;bottom:42.67%;width:13.770%;height:35.107%;}
  .hero__letter--k{left:83.91%;top:auto;bottom:11.90%;width:12.353%;height:29.414%;}
}


/* ---- мобільна версія: окремий артборд 390×693 з Figma ----
   Усі координати — відсотки від нього, кеглі — cqw, тому композиція
   масштабується від 360 до 767px так само, як намальована. */
@media only screen and (max-width:767px){
  .hero__stage{
    aspect-ratio:390 / 693;
    padding:0;
    /* На повну ширину екрана, щоб кнопки і лід стояли рівно по полях
       шапки (20px при 390). Висота обмежує лише на дуже низьких екранах:
       коефіцієнт 0.61847 замість 390/693 дозволяє артборду зайти під шапку
       рівно настільки, наскільки вгорі порожньо — слово «Бренд» лишається
       нижче за шапку на будь-якому екрані. */
    width:min(100%, calc((100svh - var(--header-h)) * 0.61847));
  }
  .hero__word,
  .hero__cutout,
  .hero__btn,
  .hero__lead,
  .hero__letter{position:absolute;}

  .hero__word{
    font-size:21.383cqw;      /* 83.3923 / 390 */
    line-height:25.641cqw;    /* 100 / 390 */
  }
  .hero__word--brand{left:2.446%;top:8.939%;width:67.95%;}
  .hero__word--buk{left:57.692%;top:21.953%;width:37.18%;text-align:right;}

  .hero__letter{display:block;}
  /* +18.8% до розміру від макета, низ на 2px нижче за макетний
     (тобто на 8px нижче за попередній варіант) */
  .hero__letter--r{left:14.774%;top:11.911%;bottom:auto;width:14.038%;height:12.039%;}
  .hero__letter--k{left:82.086%;top:23.937%;bottom:auto;width:12.595%;height:10.087%;}

  .hero__cutout{left:.946%;bottom:0;top:auto;width:98.108%;margin:0;max-width:none;}

  /* Абзац із мобільного макета: 206.54×52 @ 18.6,187.44, кегль 11.651/110%. */
  .hero__lead{
    display:block;
    left:4.769%;top:27.048%;right:auto;bottom:auto;
    width:52.959%;max-width:none;margin:0;
    font-size:2.98744cqw;      /* 11.651 / 390 */
    line-height:1.1;letter-spacing:-.05em;
    text-transform:none;
  }

  .hero__actions{display:contents;}
  .hero__btn{
    top:39.6%;height:5.181%;min-height:0;
    width:44.872%;
    font-size:2.7494cqw;      /* 10.7228 / 390 */
    border-radius:704px;
  }
  .hero__btn--primary{left:5.128%;justify-content:space-between;padding:0 4.126%;}
  .hero__btn--primary svg{width:2.749cqw;min-width:0;}
  .hero__btn--ghost{left:50%;justify-content:center;padding:0;border-width:.7px;}
}

/* ===================== s02 · ЩО ТАКЕ БРЕНД ==============================
   Макет Figma 1920: поля 192, висота секції 867, фон #D7E3F5. Текст
   ліворуч (підпис на 172 від верху, крок між блоками 26.27), заголовок
   64/64 у колонці 707, абзац 17.6/27 у колонці 684, знизу — «Бренд =
   асоціації.» тим самим кеглем, але Medium. Праворуч картинка 754.5×695.5
   з відступом 22.1 від верху секції. Розміри переведені у vw від 1680 —
   саме там ширина контенту дорівнює 1536 з макета. */
.brand{padding-block:clamp(2rem,4.762vw,80px) 0;background:var(--paper);}
.brand__wrap{position:relative;min-height:clamp(0px,51.607vw,867px);}
.brand__head .label{display:block;}
.brand__head{
  padding-top:clamp(2.5rem,10.238vw,172px);
  padding-bottom:clamp(2.5rem,8.893vw,149.4px);
  max-width:clamp(300px,42.084vw,707px);
}
.brand__title{
  margin-top:clamp(.75rem,1.564vw,26.3px);
  font-size:clamp(2rem,3.81vw,64px);
  font-weight:500;line-height:1;letter-spacing:-.0297em;color:var(--ink);
}
.brand__lead{
  margin-top:clamp(.7rem,1.385vw,23.3px);
  max-width:clamp(300px,40.711vw,684px);
  font-size:clamp(1rem,1.048vw,17.6px);
  line-height:1.534;letter-spacing:-.01em;color:var(--ink-70);
}
.brand__strong{
  margin-top:clamp(.6rem,1.223vw,20.5px);
  font-size:clamp(1rem,1.048vw,17.6px);
  font-weight:500;line-height:1.534;letter-spacing:-.01em;color:var(--ink-70);
}
.brand__media{
  position:absolute;right:var(--gutter);top:clamp(8px,1.317vw,22.1px);
  width:clamp(0px,44.911vw,754.5px);margin:0;
}
.brand__media img,
.brand__video{
  display:block;width:100%;height:auto;
  /* краї розмиті, як у ролику з клавішами: стиснення лишає різницю
     в 1–2 рівні з фоном сторінки, без розтяжки видно рамку */
  --fade:5%;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
  mask-composite:intersect;
}
.brand__video{display:none;}
.brand__media.has-video img{display:none;}
.brand__media.has-video .brand__video{display:block;}

@media (max-width:991px){
  .brand__wrap{min-height:0;}
  /* у ролику фон фірмовий, тож звисати на білий блок 02 пакет уже не може —
     він стоїть у межах секції */
  .brand__head{
    max-width:none;
    padding-top:clamp(2.5rem,12vw,64px);padding-bottom:0;
  }
  .brand__media{position:static;width:100%;margin-top:clamp(.5rem,3vw,18px);}
}

/* ===================== s03 · ЩО ТАКЕ БРЕНДБУК ============================
   Макет Figma 1920 (node 53:3205): секція 906.88 на білому, поля 192.
   Ліворуч колонка 748 — підпис на 44 від верху, заголовок 76/85 у два
   рядки, нижче список із трьох позицій (номер 13.1, назва 44.8/48.38,
   опис 15.2/23.56, лінійки #AABCD7). Праворуч фото стосу брендбуків
   705.35 на всю висоту секції, до самого краю екрана.
   Розміри переведені у vw від 1680 — там контент дорівнює 1536. */
.define{padding-block:clamp(1.25rem,2.619vw,44px) clamp(1.5rem,2.169vw,36.4px);}
.define__inner{position:relative;z-index:1;}
/* ліва колонка — 748 з макета (.wrap лишається на своїй ширині) */
.define__head,.define .bigrows{max-width:clamp(300px,44.524vw,748px);}
.define__head .label{display:block;}
.define__title{
  margin-top:clamp(.5rem,1.0875vw,18.3px);
  font-size:var(--fs-h2);
  font-weight:500;line-height:1.1184;letter-spacing:var(--ls-head);color:var(--ink);
}
.bigrows{
  margin-top:clamp(1.5rem,4.064vw,68.3px);
  border-top:1px solid var(--rule);
}
.bigrows__item{
  display:grid;grid-template-columns:clamp(34px,3.477vw,58.4px) minmax(0,1fr);
  padding-top:clamp(1rem,1.905vw,32px);
  padding-bottom:clamp(1rem,2.011vw,33.8px);
  border-bottom:1px solid var(--rule);
}
.bigrows__item:last-child{border-bottom:0;}

/* маркер по ключових словах (js/sections.js веде .is-on за скролом) */
.hl{
  padding:0 .12em;margin:0 -.04em;border-radius:.2em;
  background:linear-gradient(var(--accent),var(--accent)) 0 50% / 0% 100% no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .6s var(--ease),color .4s var(--ease);
}
.hl.is-on{background-size:100% 100%;color:var(--accent-ink);}
.bigrows .num{
  margin-top:clamp(.45rem,1.548vw,26px);
  font-size:clamp(11px,.78vw,13.1px);line-height:1.553;
  letter-spacing:.06em;color:var(--ink-38);
}
.bigrows__title{
  display:block;
  font-size:clamp(1.4rem,2.667vw,44.8px);
  font-weight:500;line-height:1.08;letter-spacing:-.025em;color:var(--ink);
}
.bigrows__desc{
  display:block;
  margin-top:clamp(.3rem,.4286vw,7.2px);
  max-width:clamp(280px,24.99vw,420px);
  font-size:clamp(.9rem,.905vw,15.2px);
  line-height:1.55;letter-spacing:-.0116em;color:var(--ink-55);
}
/* фото праворуч — на всю висоту секції, до краю екрана.
   Ширину рахуємо з висоти за пропорцією кадру (1792x2304), щоб фото
   ніколи не різалось: у макеті 906.88 висоти дають рівно 705.35 ширини. */
.define__media{
  position:absolute;top:0;bottom:0;right:0;margin:0;
  aspect-ratio:1792 / 2304;width:auto;
}
/* вужчі десктопи: колонка з фото стає вузькою, тож кадр трохи
   підрізаємо справа (як і в макеті), лишаючи корінці й логотип */
@media (max-width:1366px){
  .define__media{aspect-ratio:auto;width:38vw;}
  .define__media img{object-position:left center;}
}
.define__media img{display:block;width:100%;height:100%;object-fit:cover;}

@media (max-width:991px){
  /* фото притиснуте до низу секції; зверху — запас під пакет із блока 01 */
  .define{padding-top:calc(clamp(1.25rem,2.619vw,44px) + clamp(44px,16vw,80px));padding-bottom:0;}
  .define__head,.define .bigrows{max-width:none;}
  .define__media{
    position:static;width:100%;
    margin-top:clamp(1.5rem,6vw,2.5rem);
  }
  .define__media picture{display:block;}
  .define__media img{height:auto;}
  .bigrows__item{grid-template-columns:clamp(28px,9vw,40px) minmax(0,1fr);}
  .bigrows__title{font-size:clamp(20px,6.15vw,28px);}
  .bigrows__desc{max-width:none;}
}

/* ===================== s04 · БЕЗ СИСТЕМИ / З СИСТЕМОЮ ==================== */
/* Макет Figma 1920: поля 192, дві картки по 748 з проміжком 40, радіус 26.
   Усередині: підпис 12.5/15, H3 41.6/44, список із кроком 58.3 (рядок
   18.4/29, маркер за 11.64px), знизу — блакитне полотно 664×463 з
   картинкою і полем 42 до низу картки. Розміри переведені у vw від 1680 —
   ширина контенту (1536) фіксується саме там через --page-max. */
.contrast{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1rem,2.381vw,40px);
  align-items:stretch;
}
.panel{
  display:flex;flex-direction:column;
  padding:clamp(1.4rem,2.476vw,41.6px);
  padding-bottom:clamp(1.4rem,2.5vw,42px);
  border-radius:clamp(14px,1.548vw,26px);
}
.panel__label{display:flex;align-items:center;gap:.7rem;margin-bottom:clamp(1rem,1.488vw,25px);}
.panel__title{
  font-size:clamp(1.6rem,2.476vw,41.6px);
  font-weight:500;line-height:1.058;letter-spacing:var(--ls-head);
}
.panel__list{margin-top:clamp(1rem,1.528vw,25.7px);display:flex;flex-direction:column;}
.panel__list li{
  display:flex;align-items:flex-start;
  gap:clamp(.5rem,.693vw,11.64px);
  padding-block:clamp(.45rem,.872vw,14.65px);
  font-size:clamp(.98rem,1.095vw,18.4px);
  line-height:1.576;letter-spacing:-.0096em;
}
.panel__list li::before{flex:none;line-height:1.576;}

/* Картинка притиснута до низу картки. Блакитне полотно вже всередині
   PNG (вирізаний об'єкт виступає над ним), тому тут ні фону, ні обрізання:
   просто картинка на всю ширину, низом по нижньому краю контейнера. */
.panel__media{margin-top:auto;}
.panel__media img{display:block;width:100%;height:auto;}

.panel--without{background:var(--white);color:var(--ink-70);}
.panel--without .panel__title{color:var(--ink);}
.panel--without .panel__list li::before{content:"×";color:var(--ink-38);}

.panel--with{background:var(--ink);color:var(--night-fg);}
.panel--with .panel__list li::before{content:"✦";color:var(--accent);}
.panel--with .label{color:var(--night-fg-55);}

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

/* ===================== s05 · БРЕНДБУК У РЕАЛЬНІЙ РОБОТІ ==================
   Макет Figma 1920: ліва колонка 485 (кол. 1–4), права 879 (кол. 6–12) —
   сітка вже дає рівно ці ширини. Заголовок 96/79 у чотири рядки,
   лід 19.92/31, картинка 879×472 з готовою маскою в самому PNG. */
.flow__title{
  /* 5.6vw замість 5.714: «брендбук» має вміщатись у колонку цілком,
     при 96px слово на 4px ширше за неї і браузер рве його на «брендбу/к» */
  font-size:clamp(2.4rem,5.6vw,94px);
  font-weight:500;line-height:.823;letter-spacing:-.0198em;
  overflow-wrap:normal;word-break:keep-all;
}
.flow__lead{
  font-size:clamp(1rem,1.186vw,19.92px);
  line-height:1.556;letter-spacing:-.01em;color:var(--ink-70);
}
.flow__media img{display:block;width:100%;height:auto;}
@media (max-width:860px){ .flow__title{line-height:.95;} .flow__title br{display:none;} }

.flow__head{grid-column:1 / span 4;grid-row:1 / span 2;align-self:start;}
.flow__media{grid-column:6 / span 7;grid-row:1;}
.flow__rows{grid-column:6 / span 7;grid-row:2;margin-top:var(--sp-4);}
@media (min-width:1024px){
  .flow__head{position:sticky;top:calc(var(--header-h) + 3rem);}
}
@media (max-width:1280px){
  .flow__head{grid-column:1 / span 4;}
  .flow__media,.flow__rows{grid-column:5 / span 8;}
}

/* ===================== s06 · ДЛЯ КОГО ====================================
   Макет Figma 1920: поля секції 54 зверху і 126 знизу, три комірки по 512
   без проміжків, у кожної лінійка зверху і ліворуч rgba(0,0,0,.2).
   Усередині комірки помаранчева пігулка 345.67×153.38 (радіус 114.46),
   під нею підпис 20/31 з відступом 63.37 і шириною 384.58.
   Внизу твердження 45px в один інтерліньяж на всю ширину. */
.who{padding-block:clamp(2.5rem,3.214vw,54px) clamp(3.5rem,7.5vw,126px);}
.who__head{margin-bottom:clamp(2.5rem,4.881vw,82px);}
.who__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.who__card{
  display:flex;flex-direction:column;
  min-height:clamp(320px,28.067vw,471.52px);
  border-top:1.33px solid rgba(0,0,0,.2);
  border-left:1.33px solid rgba(0,0,0,.2);
}
/* Верхня частина комірки — ілюстрація; підпис починається на 362.51.
   Пропорції беремо з макета (512.3×362.51), тому і пігулка, і персонаж
   рахуються від однієї величини й тримаються разом на будь-якому екрані. */
.who__art{position:relative;aspect-ratio:512.3 / 362.51;flex:none;}
.who__pill{
  position:absolute;
  left:16.18%;bottom:24.61%;width:67.47%;
  aspect-ratio:345.67 / 153.38;
  background:var(--accent);border-radius:999px;
}
/* персонажі стоять рівно на нижньому краї пігулки (24.61% = низ пігулки) */
.who__art img{
  position:absolute;
  left:var(--x);bottom:var(--b);width:var(--w);
  height:auto;max-width:none;
}
.who__card p{
  margin-left:12.37%;width:75.07%;
  font-size:clamp(1rem,1.19vw,20px);
  line-height:1.55;letter-spacing:-.0088em;
  color:rgba(0,0,0,.6);
}
.who__statement{margin-top:clamp(3rem,5.238vw,88px);}
.who__statement .statement{
  font-size:clamp(1.5rem,2.679vw,45px);
  font-weight:400;line-height:1;letter-spacing:-.0347em;color:var(--ink);
}
@media (max-width:860px){
  .who__cards{grid-template-columns:minmax(0,1fr);}
  /* лінія ліворуч лишається і на мобільному — тільки з відступом під неї */
  .who__card{min-height:0;padding:0 0 var(--sp-4) clamp(14px,4vw,24px);}
  .who__card p{margin-left:0;width:100%;}
}

/* ===================== s07 · РІВНІ =======================================
   Макет Figma 1920: ліва колонка 879 (кол. 1–7), картинка 743.53×932.91
   притиснута до правого краю сторінки (виходить за поле контенту).
   Рядок рівня 129.66: номер 13.1/20, назва 38.4/40 капсом, підпис 15.2/24. */
.levels{position:relative;overflow:hidden;
  padding-block:clamp(.5rem,.476vw,8px) clamp(2rem,2.976vw,50px);}
.levels .grid{row-gap:0;}              /* вертикальні відступи задані вручну */
.levels__head{grid-column:1 / span 7;}
.levels__head .label{display:block;}   /* без базової лінії — підпис рівно на 8px */
.levels__head .h2{
  margin-top:clamp(1.2rem,3.69vw,62px);
  max-width:96%;                        /* 844.28 від колонки 879.33 */
}
.levels__list{grid-column:1 / span 7;margin-top:clamp(2rem,3.87vw,65px);}
.levels__cta{grid-column:1 / span 7;margin-top:clamp(2.5rem,4.702vw,79px);}

/* картинка йде до правого краю екрана, як у макеті */
.levels__media{
  position:absolute;top:clamp(12px,1.196vw,20px);right:0;
  width:clamp(240px,38.73vw,743.53px);
  margin:0;
}
.levels__media img{display:block;width:100%;height:auto;}

.level{
  display:grid;grid-template-columns:clamp(34px,3.19vw,53.6px) minmax(0,1fr);
  gap:0;align-items:start;
  padding-top:clamp(1rem,1.595vw,26.8px);
  padding-bottom:clamp(1rem,1.982vw,33.3px);
  border-top:1px solid var(--rule);
}
.level{position:relative;}
.level:last-of-type{border-bottom:1px solid var(--rule);}
/* рівень «вмикається», коли до нього догортали (js/sections.js):
   лінія і номер просто темнішають, без кольору */
.level::before{
  content:"";position:absolute;left:0;top:-1px;width:100%;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease);
}
.level.is-on::before{transform:scaleX(1);}
.level .num{transition:color .5s var(--ease);}
.level.is-on .num{color:var(--ink);}
.level .num{
  padding-top:3px;
  font-size:clamp(11px,.78vw,13.1px);line-height:1.527;
  letter-spacing:.06em;color:var(--ink-38);
}
.level__name{
  font-size:clamp(1.4rem,2.286vw,38.4px);
  font-weight:500;line-height:1.042;letter-spacing:-.025em;
  text-transform:uppercase;
}
.level__desc{
  margin-top:4.5px;
  font-size:clamp(.9rem,.905vw,15.2px);line-height:1.579;
  letter-spacing:-.0116em;color:var(--ink-55);
}

/* абзац і кнопка під списком */
.levels__cta .text{
  max-width:62.13%;                     /* 546.36 від колонки 879.33 */
  font-size:clamp(1rem,1.048vw,17.6px);line-height:1.534;
  letter-spacing:-.01em;color:var(--ink-70);
}
.levels__cta .btn{
  margin-top:clamp(1rem,1.385vw,23.3px);
  min-height:clamp(44px,3.095vw,52px);
  padding-inline:clamp(1rem,1.417vw,23.8px);
  gap:clamp(.5rem,.613vw,10.3px);
  font-size:clamp(.9rem,.905vw,15.2px);
}
.levels__cta .btn__arrow{width:clamp(12px,.904vw,15.19px);height:auto;}

@media (max-width:1280px){
  .levels__head,.levels__list,.levels__cta{grid-column:1 / span 8;}
}
@media (max-width:860px){
  /* на вузькому екрані порядок читання: заголовок → рівні → ілюстрація → CTA */
  .levels__head{order:1;}
  .levels__head .h2{max-width:none;}
  .levels__list{order:2;}
  /* картинка притиснута до правого краю екрана, як і на десктопі */
  .levels__media{position:static;order:3;width:min(460px,calc(100% + var(--gutter)));
    margin:var(--sp-4) calc(-1 * var(--gutter)) 0 auto;}
  .levels__cta{order:4;}
  .levels__cta .text{max-width:none;}
  /* кнопка на всю ширину, щоб не виглядала збоку */
  .levels__cta .btn{display:flex;width:100%;justify-content:center;}
}

/* ===================== s08 · ТРИ ШАРИ ====================================
   Шари буквально складаються стосом: кожна картка «липне» трохи нижче
   за попередню, тому під час прокрутки видно всі три краї одночасно. */
.layers__head{max-width:60%;}
.layers__title{
  margin-top:clamp(1rem,1.445vw,24.3px);
  font-size:clamp(1.9rem,3.81vw,64px);
  font-weight:500;line-height:1.06;letter-spacing:-.025em;
}
.layers__lead{
  margin-top:clamp(1rem,1.369vw,23px);
  max-width:66%;
  font-size:clamp(1rem,1.048vw,17.6px);
  line-height:1.534;letter-spacing:-.01em;color:var(--ink-70);
}

.layers__stack{
  display:flex;flex-direction:column;
  /* великий проміжок = довге «липке» вікно: попередня картка стоїть,
     наступна напливає на неї згори */
  gap:38svh;
  margin-top:clamp(2rem,3.57vw,60px);
}
/* порожній хвіст у самому стеку: дає останній картці доїхати до своєї
   позиції (padding контейнера для sticky не рахується) */
.layers__stack::after{content:"";display:block;height:4svh;}
.lyr{
  position:sticky;
  /* крок менший за верхнє поле картки (41.6) — з-під наступної картки
     видно лише смужку кольору, текст попередньої перекрито */
  top:calc(var(--header-h) + clamp(10px,1.19vw,20px) + var(--i) * clamp(18px,1.786vw,30px));
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);
  gap:clamp(1.25rem,2.4vw,40px);align-items:start;
  padding:clamp(1.4rem,2.476vw,41.6px);
  min-height:clamp(345px,26.5vw,445px);   /* усі картки однакової висоти */
  border-radius:clamp(16px,1.548vw,26px);
  box-shadow:0 -10px 30px rgba(13,13,13,.10);
}
.lyr--one{background:var(--white);color:var(--ink);}
.lyr--two{background:var(--ink);color:var(--night-fg);}
.lyr--three{background:var(--accent);color:var(--white);}

.lyr__kicker{display:flex;align-items:baseline;gap:.8rem;}
.lyr__kicker-num{font-size:clamp(11px,.78vw,13.1px);letter-spacing:.06em;opacity:.55;}
.lyr__name{
  margin-top:clamp(.5rem,.9vw,15px);
  font-size:clamp(1.5rem,2.286vw,38.4px);
  font-weight:500;line-height:1.042;letter-spacing:-.025em;text-transform:uppercase;
}
.lyr__lead{
  margin-top:clamp(.6rem,1vw,16px);
  font-size:clamp(.95rem,1.048vw,17.6px);
  line-height:1.5;letter-spacing:-.01em;opacity:.85;
}
.lyr__list-col .label{display:block;margin-bottom:clamp(.6rem,1vw,16px);color:inherit;opacity:.55;}
.lyr__list{display:flex;flex-direction:column;}
.lyr__list li{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(.6rem,1vw,16px);
  padding-block:clamp(.4rem,.7vw,11px);
  border-top:1px solid currentColor;
  font-size:clamp(.9rem,1vw,16.5px);
  line-height:1.4;letter-spacing:-.01em;opacity:.85;
}
.lyr__list li:first-child{border-top:0;padding-top:0;}
.lyr__i{font-size:clamp(11px,.78vw,13.1px);line-height:1.5;letter-spacing:.06em;opacity:.55;}
/* картинка заповнює картку по висоті */
.lyr__media{
  margin:0;align-self:stretch;
  border-radius:clamp(10px,1.19vw,20px);overflow:hidden;
}
.lyr__media img{display:block;width:100%;height:100%;object-fit:cover;}

/* на вузьких екранах той самий стос, лише в одну колонку: дрібніший
   текст звільняє місце, щоб картинка лишалась квадратною і не різалась */
@media (max-width:991px){
  .layers__head,.layers__lead{max-width:none;}
  .layers__stack{gap:32svh;padding-bottom:0;}
  .layers__stack::after{height:6svh;}
  .lyr{
    /* однакова висота: нижні краї карток збігаються,
       залишок місця під заголовком і списком віддано картинці */
    min-height:0;height:clamp(500px,calc(100svh - 150px),630px);
    top:calc(var(--header-h) + 8px + var(--i) * 14px);
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr);
    gap:clamp(.7rem,2.8vw,1rem);
    padding:clamp(1rem,4.2vw,1.3rem);
  }
  .lyr__kicker-num,.lyr__i,.lyr__list-col .label{font-size:clamp(9.5px,2.7vw,11px);}
  .lyr__name{font-size:clamp(19px,5.4vw,23px);}
  .lyr__lead{
    margin-top:clamp(.3rem,1.4vw,.5rem);
    font-size:clamp(12.5px,3.46vw,14px);line-height:1.42;
  }
  .lyr__list li{
    padding-block:clamp(.25rem,1.1vw,.45rem);
    gap:clamp(.5rem,2.4vw,.75rem);
    font-size:clamp(12px,3.33vw,13.5px);line-height:1.34;
  }
  .lyr__list-col .label{margin-bottom:clamp(.35rem,1.5vw,.6rem);}
  /* окрема горизонтальна версія 16:9 на всю ширину картки */
  .lyr__media{
    align-self:end;width:100%;aspect-ratio:16/9;
    height:auto;min-height:0;max-height:100%;
  }
  .lyr__media picture{display:block;height:100%;}
  .lyr__media img{width:100%;height:100%;object-fit:cover;}
}
@media (prefers-reduced-motion:reduce){
  .lyr{position:static;}
}

/* ===================== s09 · МАНІФЕСТ ====================================
   Макет Figma 1920×1058.69: синє полотно на всю секцію, зверху
   заголовок 48/64, текст 17.6/26, цитата 20/31 у тонких дужках
   і помаранчева кнопка 623×72. Вертикалі переведені у vw від 1680. */
.manifesto{
  position:relative;
  padding-block:clamp(2.5rem,4.881vw,82px) clamp(2.5rem,5.1vw,85.7px);
  background:var(--night) url(../images/manifesto/bg.webp) center / cover no-repeat;
  color:var(--white);
  overflow:hidden;
}
.manifesto .label{color:rgba(255,255,255,.75);}
.manifesto__title{
  margin-top:clamp(.75rem,1.19vw,20px);
  max-width:78.1%;                       /* 1199 від 1536 */
  font-size:clamp(1.5rem,2.857vw,48px);
  font-weight:500;line-height:1.333;letter-spacing:-.02em;
  color:var(--white);
}
.manifesto__text{
  margin-top:clamp(1.5rem,5.417vw,91px);
  max-width:46.9%;                       /* 720.43 від 1536 */
  font-size:clamp(1rem,1.048vw,17.6px);
  line-height:1.477;letter-spacing:-.01em;
  color:rgba(255,255,255,.92);
}

/* ---- цитата в тонких дужках ---- */
.manifesto__quote{
  position:relative;
  margin:clamp(2rem,5.417vw,91px) 0 0;
  max-width:40.9%;                       /* 628 від 1536 */
  min-height:clamp(88px,8.333vw,140px);
  display:flex;align-items:center;justify-content:center;
  padding-inline:clamp(1.6rem,3.4vw,57px);
}
/* дужки — справжні гліфи шрифта, як у макеті (52×140 при 1920) */
.manifesto__brace{
  position:absolute;left:0;top:50%;
  /* Light — найтонше накреслення Stolzl; стиснення по горизонталі
     робить штрих ще тоншим, не змінюючи висоту дужки */
  /* --brace-x веде js/sections.js: дужки повільно дихають, поки блок у кадрі */
  transform:translate(var(--brace-x,0px),-50%) scaleX(.72);
  transform-origin:left center;
  font-family:"Stolzl",var(--ff);font-weight:300;
  font-size:clamp(84px,7.98vw,134px);   /* гліф «(» = 1.044 кегля */
  line-height:1;
  color:rgba(255,255,255,.85);
  pointer-events:none;
}
.manifesto__brace--right{left:auto;right:0;transform-origin:right center;}
/* між 992 і 1280 колонка цитати з макета завузька — розширюємо, щоб
   перенос лишався після «звучить» */
@media (min-width:992px) and (max-width:1280px){
  .manifesto__quote{max-width:56%;}
}
.manifesto__quote-text{
  font-weight:300;                       /* Light — тонше накреслення */
  font-size:clamp(1rem,1.4286vw,24px);   /* 20 -> 24, перенос після «звучить» */
  line-height:1.38;letter-spacing:-.01em;text-align:center;color:var(--white);
}

/* ---- помаранчева кнопка ---- */
.manifesto__btn{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(.6rem,.833vw,14px);
  margin-top:clamp(2rem,6.786vw,114px);
  width:40.6%;min-width:min(100%,260px);  /* 623 від 1536 */
  min-height:clamp(52px,4.286vw,72px);
  border-radius:999px;
  background:var(--accent);color:var(--white);--fill:var(--paper);
  font-family:var(--ff-display);
  font-size:clamp(.95rem,1.19vw,20px);letter-spacing:-.005em;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.manifesto__btn svg{width:clamp(14px,1.254vw,21px);height:auto;flex:none;}
.manifesto__btn:hover .btn__arrow{transform:translateX(.28em);}   /* як в інших кнопках */
.manifesto__btn:hover{color:var(--ink);}   /* фірмовий синьо-сірий */

/* ---- мобільний макет Figma 390×693: текст угорі, танцюристи знизу ---- */
@media (max-width:991px){
  .manifesto{
    padding-block:14.75vw 75.6vw;       /* 57.5 зверху, 295 під кнопкою */
    background-image:url(../images/manifesto/bg-mobile.webp);
    background-position:center bottom;
  }
  .manifesto .label{display:none;}      /* у мобільному макеті підпису немає */
  .manifesto__title,.manifesto__text,.manifesto__quote{max-width:none;}
  .manifesto__title{
    margin-top:0;
    font-size:min(3.718vw,17px);line-height:1.241;   /* 14.5/18 при 390 */
  }
  .manifesto__text{
    margin-top:5.836vw;
    font-size:min(2.949vw,13.5px);line-height:1.13;  /* 11.5/13 при 390 */
  }
  .manifesto__quote{
    margin-top:8.385vw;
    min-height:18.95vw;
    padding-inline:9.5vw;
  }
  .manifesto__brace{font-size:18.15vw;}   /* 74px при 390 */
  .manifesto__quote-text{
    font-size:min(3.205vw,15px);line-height:1.28;    /* 12.5/16 при 390 */
  }
  .manifesto__btn{
    margin-top:10.03vw;width:100%;
    min-height:10.2vw;
    font-size:min(2.949vw,13.5px);
  }
  .manifesto__btn svg{width:2.98vw;}
}

/* ===================== s10 · ЩО ДАЛІ =====================================
   Макет Figma 1920 (контент 1536): заголовок 76/79 у два рядки, другий —
   курсивом з відступом; підзаголовок 30.55/34; пігулки 22.14 капітеллю
   з рамкою 2px і радіусом 2000; знизу помаранчева картка 1536×441. */
.next{position:relative;overflow:hidden;
  /* щільніше до сусідніх блоків 08 і 10 */
  padding-block:clamp(2rem,3.57vw,60px) clamp(2.5rem,5.36vw,90px);}
.next .wrap{position:relative;}
.next__block{max-width:52%;}            /* блок під заголовок і текст */
.next__title{max-width:85%;}             /* ~44% контенту — переноси як у макеті */
.next__title{
  margin-top:clamp(1rem,1.445vw,24.3px);
  font-size:clamp(2.1rem,4.524vw,76px);
  font-weight:500;line-height:1.039;letter-spacing:-.025em;color:var(--ink);
}
.next__title .em{letter-spacing:-.01em;}
.next__lead{
  margin-top:clamp(1rem,1.369vw,23px);
  max-width:68.4%;                      /* 511.77 від 748 */
  font-size:clamp(1rem,1.048vw,17.6px);
  line-height:1.534;letter-spacing:-.01em;color:var(--ink-70);
}
.next__sub{
  margin-top:clamp(2rem,5.643vw,94.8px);
  font-size:clamp(1.3rem,1.818vw,30.55px);
  font-weight:500;line-height:1.113;letter-spacing:-.025em;color:var(--ink);
}

/* ---- пігулки ---- */
.pillset{
  display:flex;flex-wrap:wrap;gap:0;
  margin-top:clamp(1.25rem,3.78vw,63.5px);
}
.pillset li{display:flex;margin:0 -1px -1px 0;}  /* сусідні рамки зливаються в одну лінію */
/* примусовий перенос рядка — щоб пігулки групувались саме як у макеті */
.pillset__break{flex:0 0 100%;height:0;margin:0;}
.next .pill{
  display:inline-flex;align-items:center;justify-content:center;
  text-align:center;
  min-height:clamp(58px,6.222vw,104.52px);
  padding:0 clamp(.9rem,2.1vw,40.26px);
  border:1px solid var(--ink);border-radius:2000px;
  font-size:clamp(.95rem,1.318vw,22.14px);
  line-height:1.1;letter-spacing:-.05em;
  color:rgba(13,13,13,.6);background:transparent;
}
.next .pill--solid{background:var(--ink);border-color:var(--ink);color:var(--white);}
.pillset__arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(58px,6.231vw,104.68px);aspect-ratio:1;
  border-radius:50%;background:var(--ink);color:var(--white);
}
.pillset__arrow svg{width:58.7%;height:auto;}   /* 61.46 від 104.68, як у макеті */
/* друге коло — контур, зігнута стрілка (як у макеті) */
.pillset__arrow--ghost{
  background:transparent;color:var(--ink);
  border:1px solid var(--ink);
}
.pillset__arrow--ghost svg{width:41.9%;}   /* 43.17 від 103, як у макеті */
.pillset--one{max-width:68%;}
/* другий рядок — дві пігулки в пропорціях макета (287.52 / 231.52),
   тому вони ніколи не розповзаються на два рядки */
.pillset--one li:nth-child(4){flex:0 0 55.4%;}
.pillset--one li:nth-child(5){flex:0 0 44.6%;}
.pillset--one li:nth-child(4) .pill,
.pillset--one li:nth-child(5) .pill{width:100%;}
.pillset--one li:last-child{flex:1 0 100%;}
.pillset--one li:last-child .pill{width:100%;}

/* ---- другий блок: праворуч, із відступом зверху ---- */
/* ---- ілюстрації з макета (виходять за поле сторінки) ----
   .next__arts збігається з колонкою контенту, тож відсотки всередині —
   це відсотки від 1536, як у макеті. */
.next__arts{position:absolute;inset:0 var(--gutter);pointer-events:none;}
.next__art{position:absolute;margin:0;}
.next__art img{display:block;width:100%;height:auto;}
/* відео з клавішами вмикається тільки там, де браузер тягне прозорість у WebM */
.next__art-video,
.next__art--socials img{
  display:block;width:100%;height:auto;
  /* краї розмиті: фон у кадрі той самий, що й на сторінці, але стиснення
     лишає різницю в 1–2 рівні — без розтяжки по периметру видно рамку */
  --fade:6%;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 var(--fade),#000 calc(100% - var(--fade)),transparent 100%);
  mask-composite:intersect;
}
.next__art-video{display:none;}
.next__art.has-video img{display:none;}
.next__art.has-video .next__art-video{display:block;}
.next__art--cursor{left:47.46%;width:65.04%;top:clamp(170px,21.43vw,360px);}
.next__art--socials{left:-7.11%;width:53.93%;top:clamp(500px,61.49vw,1033px);}

.next__block--two{
  position:relative;                     /* над ілюстрацією */
  margin-left:48%;                       /* другий блок — праворуч */
  margin-top:clamp(3rem,12.386vw,208px);
}
.next__lead--two{margin-top:clamp(1.25rem,3.1vw,52px);max-width:none;}
.pillset--two{max-width:97%;margin-top:clamp(1rem,2.417vw,40.6px);}
/* пропорції з макета: 410 / 364 у першому рядку, 774 у другому,
   у третьому — коло 103 і чорна пігулка на решту ширини */
.pillset--two li:nth-child(1){flex:0 0 52.97%;}
.pillset--two li:nth-child(2){flex:0 0 47.03%;}
.pillset--two li:nth-child(4){flex:1 0 100%;}
.pillset--two li:last-child{flex:1 1 auto;}
.pillset--two li:nth-child(1) .pill,
.pillset--two li:nth-child(2) .pill,
.pillset--two li:nth-child(4) .pill,
.pillset--two li:last-child .pill{width:100%;}

/* ---- помаранчева картка ---- */
.garage{
  position:relative;
  margin-top:clamp(3rem,14.94vw,251px);
  border-radius:clamp(16px,1.905vw,32px);
  background:var(--accent);color:var(--white);
  aspect-ratio:1536 / 441;
}
.garage__text{position:absolute;left:3.125%;top:0;right:45%;height:100%;}
.br-mob{display:none;}
.garage__title{
  position:absolute;top:13.17%;
  font-size:clamp(1.4rem,2.857vw,48px);
  font-weight:500;line-height:1.021;letter-spacing:-.025em;
  text-transform:uppercase;color:var(--white);
}
.garage__note{
  position:absolute;top:41.72%;max-width:60%;
  font-size:clamp(.9rem,1.048vw,17.6px);
  line-height:1.534;letter-spacing:-.01em;color:rgba(255,255,255,.85);
}
.garage__btn{
  position:absolute;top:64.63%;
  display:inline-flex;align-items:center;gap:clamp(.6rem,1vw,17px);
  min-height:clamp(46px,4.762vw,80px);
  padding:0 clamp(1rem,2.134vw,35.85px);
  border-radius:1570px;background:var(--paper);color:var(--ink);--fill:var(--ink);
  font-family:var(--ff-display);
  font-size:clamp(1rem,1.422vw,23.9px);letter-spacing:-.005em;
  white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.garage__btn svg{width:clamp(14px,1.422vw,23.88px);height:auto;flex:none;}
.garage__btn svg{transition:transform var(--dur) var(--ease);}
.garage__btn:hover svg{transform:translateX(.28em);}   /* стрілка, як в інших кнопках */
.garage__btn:hover{color:var(--white);}
.garage__media{
  position:absolute;left:48.76%;width:45.66%;
  top:50%;transform:translateY(-50%);margin:0;
}
.garage__media img{display:block;width:100%;height:auto;}

@media (max-width:991px){
  .next{padding-block:clamp(2rem,6vw,48px) clamp(2.5rem,7vw,56px);}
  .next__block,.next__title,.pillset--one,.pillset--two{max-width:none;}
  .next__arts{position:static;inset:auto;}
  .next__art{position:static;left:auto;top:auto;width:100%;margin:clamp(1.5rem,5vw,2.5rem) 0 0;}
  /* пігулки на всю ширину, однакові; рамки сусідів накладаються рівно
     на товщину лінії, тому між ними одна лінія, а не дві */
  .pillset li{flex:1 0 100%;margin:0 0 -1px;}
  .pillset--one li:nth-child(4),
  .pillset--one li:nth-child(5),
  .pillset--two li:nth-child(1),
  .pillset--two li:nth-child(2),
  .pillset--two li:last-child{flex:1 0 100%;}     /* на мобільному всі на всю ширину */
  .next .pill{width:100%;}
  .pillset li:has(.pillset__arrow){display:none;}
  /* картинка з руками — на всю ширину екрана */
  .next__art--cursor{
    width:calc(100% + var(--gutter) * 2);
    margin-inline:calc(var(--gutter) * -1);
  }
  .next__block--two{margin-left:0;margin-top:clamp(2.5rem,7vw,4rem);}
  .next__title .em{margin-left:0;}
  .next__lead{max-width:none;}
  .garage{aspect-ratio:auto;padding:clamp(1.5rem,5vw,2.5rem);}
  .garage__text{position:static;height:auto;}
  .garage__title,.garage__note,.garage__btn{position:static;}
  /* на мобільному заголовок у три рядки і дрібніший */
  .garage__title{font-size:clamp(17px,5vw,26px);}
  .br-desk{display:none;}
  .br-mob{display:inline;}
  .garage__note{margin-top:var(--sp-3);max-width:none;}
  .garage__btn{
    margin-top:var(--sp-4);
    width:100%;                           /* по ширині текстового блоку */
    justify-content:center;
    min-height:44px;gap:.4rem;
    padding-inline:1rem;
    font-size:clamp(12px,3.85vw,15px);
  }
  .garage__btn svg{width:clamp(11px,3.1vw,14px);}
  .garage__media{position:static;width:100%;transform:none;margin-top:var(--sp-4);}
}

/* ===================== s11 · ПОРТФОЛІО ==================================
   Портовано з #blog («Наші роботи») на proekcia.com. Числа зняті
   getComputedStyle() на живому сайті при 280 / 480 / 768 / 1440px.
   Брейкпоінти сайтові (480 / 768 / 992). Карусель — нативний scroll-snap. */

.section-blog-posts{overflow:hidden;}
/* 08 -> 09: менший проміжок між портфоліо і «Що далі» */
#work{padding-bottom:clamp(2.5rem,4.76vw,80px);}

/* спільний лейбл-нумерація для секцій із заголовком .section-title */
.section-eyebrow{display:block;margin-bottom:var(--sp-3);}

.loop-posts{
  display:flex;align-items:stretch;
  gap:20px;
  margin-top:clamp(1.25rem,2.6vw,2.1rem);
  margin-right:calc(var(--gutter) * -1);
  padding-right:var(--gutter);
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;  /* тільки вбік */
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;   /* повзунка не видно — як на сайті */
}
.loop-posts::-webkit-scrollbar{display:none;}
@media only screen and (min-width:992px){ .loop-posts{gap:2.57vw;} }

/* ---- картка кейсу ---- */
.loop-item{
  flex:0 0 82.917vw;
  min-width:0;                 /* не даємо ряду тегів розтягувати картку */
  scroll-snap-align:start;
  display:flex;flex-direction:column;
  border-top:1px solid rgba(13,13,13,.2);
  border-left:1px solid rgba(13,13,13,.2);
  padding:1em 1em 0;
  font-size:4.1vw;
  color:var(--ink);
}
@media only screen and (min-width:480px){ .loop-item{font-size:3.333vw;} }
@media only screen and (min-width:768px){
  .loop-item{flex-basis:42.057vw;font-size:2.08vw;padding:1.25em 1.25em 0;}
}
@media only screen and (min-width:992px){
  .loop-item{flex-basis:21.597vw;font-size:1.05vw;padding:2.4em 0 0 2.4em;}
}

/* ---- теги: один ряд, пігулки наїжджають одна на одну, зайві ховаються
       і стрічка сама прокручується (на сайті це Swiper loop+autoplay 1s,
       тут — той самий крок на нативному JS, див. initTagTickers) ---- */
.list-tags{width:100%;overflow:hidden;margin-bottom:1.05em;}
.list-tags__track{display:flex;flex-wrap:nowrap;width:max-content;will-change:transform;}
.list-tags .tag{
  flex:none;
  border:1px solid rgba(13,13,13,.2);
  background:var(--paper);color:var(--ink);
  border-radius:10em;white-space:nowrap;
  font-size:3.08vw;line-height:1.2;padding:.44em 1.5em;
}
.list-tags .tag + .tag{margin-left:-.75em;}   /* перекриття, як на проді */
@media only screen and (min-width:768px){ .list-tags .tag{font-size:1.82vw;} }
@media only screen and (min-width:992px){
  .list-tags .tag{font-size:.84vw;padding:.35em 1.2em;}
  .list-tags .tag + .tag{margin-left:-.6em;}
}

.loop-item-link{display:flex;flex-direction:column;}
.loop-item-thumb{
  position:relative;overflow:hidden;
  aspect-ratio:.8;margin-bottom:1.33em;
  border-radius:1.25em;background:var(--paper-3);
}
@media only screen and (min-width:992px){ .loop-item-thumb{border-radius:1em;} }
.loop-item-thumb img,
.loop-item-thumb video{width:100%;height:100%;object-fit:cover;display:block;}
.loop-item-thumb img{transition:transform var(--dur-slow) var(--ease);}
.loop-item-thumb video{position:absolute;inset:0;opacity:0;transition:opacity var(--dur) var(--ease);}
.loop-item.is-video .loop-item-thumb video{opacity:1;}
.loop-item-thumb{transition:transform var(--dur) var(--ease);}
@media (hover:hover){
  /* плитка лишається в сітці — піднімається лише обкладинка */
  .loop-item:hover .loop-item-thumb{transform:translateY(-6px);}
  .loop-item:hover .loop-item-thumb img{transform:scale(1.04);}
}

.loop-item-name{
  font-weight:400;text-transform:uppercase;
  line-height:1.19;letter-spacing:-.0144em;
  font-size:5.13vw;
}
@media only screen and (min-width:768px){ .loop-item-name{font-size:2.86vw;} }
@media only screen and (min-width:992px){ .loop-item-name{font-size:1.25vw;} }
.loop-item-link:hover .loop-item-name{color:var(--accent);}

.loop-item-subtitle{margin-top:.45em;color:var(--ink-70);font-size:3.333vw;line-height:1.2;}
@media only screen and (min-width:768px){ .loop-item-subtitle{font-size:2.344vw;} }
@media only screen and (min-width:992px){ .loop-item-subtitle{font-size:1.042vw;} }

/* ---- «Переглянути всі роботи» — кнопка з сайту, по центру ---- */
.works__foot{margin-top:4.16vw;text-align:center;}
@media only screen and (min-width:992px){ .works__foot{margin-top:3.36vw;} }
.btn-bordered{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);
  border:1px solid var(--ink);border-radius:10em;
  background:transparent;color:var(--ink);--fill:var(--ink);
  font-size:3.59vw;line-height:1;padding:1.5em 3em;
  transition:background .3s,color .3s;
}
@media only screen and (min-width:768px){ .btn-bordered{font-size:2.08vw;} }
@media only screen and (min-width:992px){ .btn-bordered{font-size:.84vw;} }
.btn-bordered:hover{color:var(--white);}

/* ===================== s12 · ВІДГУКИ ====================================
   Портовано з #reviews на proekcia.com. Усі числа — не на око: зняті
   getComputedStyle() на живому сайті при 280 / 480 / 768 / 1440px і
   перераховані у ті самі vw/em, якими їх задає сам сайт. Брейкпоінти
   тут сайтові (480 / 768 / 992), щоб збіг був точний.
   Карусель — нативний scroll-snap замість Swiper: ті самі ширини
   слайдів (74vw / 300px / 18.75vw) і ті самі проміжки (20 / 32 / 48px). */

.section-reviews{overflow:hidden;}
/* 09 -> 10: менший проміжок між «Що далі» і відгуками */
#reviews{padding-top:clamp(2.5rem,4.76vw,80px);}

/* ---- шапка блоку: заголовок + стрілки в одному рядку, стрілки
   праворуч на будь-якій ширині — як на головній proekcia.com ---- */
.reviews__layout{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;column-gap:16px;
}
.reviews__eyebrow{grid-column:1 / -1;margin-bottom:var(--sp-3);}
.reviews__nav{grid-column:2;}
.reviews-slider{grid-column:1 / -1;}

/* ---- стрічка ----
   Слайди виходять за праву межу контейнера — як на проді, де .swiper має
   overflow:visible під секцією з overflow:hidden. */
.reviews-slider{
  display:flex;align-items:stretch;
  gap:20px;
  margin-top:clamp(1.5rem,3vw,2.5rem);
  margin-right:calc(var(--gutter) * -1);
  padding-right:var(--gutter);
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;  /* тільки вбік */
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;   /* повзунка не видно — як на сайті */
}
.reviews-slider::-webkit-scrollbar{display:none;}
@media only screen and (min-width:768px){ .reviews-slider{gap:32px;} }
@media only screen and (min-width:992px){ .reviews-slider{gap:48px;} }

/* заголовок секції — .section-title з proekcia.com */
.section-title{
  font-weight:500;line-height:1.1;letter-spacing:-.0144em;
  text-transform:uppercase;
  font-size:8.21vw;
}
@media only screen and (min-width:768px){ .section-title{font-size:5.73vw;} }
@media only screen and (min-width:992px){ .section-title{font-size:2.92vw;} }

/* кружечки-стрілки — як на головній proekcia.com: праворуч у рядку
   із заголовком, тонкий контур, 35px на телефоні і 4.583vw від 992 */
.slider-head{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.slider-nav{display:flex;align-items:center;gap:5px;flex:none;}
.slider-nav .rnav{width:35px;height:35px;}
.slider-nav .rnav svg{width:33%;}
@media only screen and (min-width:992px){
  .slider-nav{gap:.42vw;}
  .slider-nav .rnav{width:4.583vw;height:4.583vw;}
  .slider-nav .rnav svg{width:25.8%;}
}

/* ---- картка ---- */
blockquote[class^="review-type-"]{
  flex:0 0 74vw;
  scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:stretch;
  margin:0;
  border-top:1px solid rgba(13,13,13,.2);
  border-left:1px solid rgba(13,13,13,.2);
  padding:1em 0 0 1em;
  color:var(--ink);
  font-size:4.1vw;              /* базовий em картки = body на проді */
}
@media only screen and (min-width:480px){ blockquote[class^="review-type-"]{font-size:3.333vw;} }
@media only screen and (min-width:768px){
  blockquote[class^="review-type-"]{flex-basis:300px;font-size:2.08vw;padding:1.5em 0 0 1.5em;}
}
@media only screen and (min-width:992px){ blockquote[class^="review-type-"]{flex-basis:18.75vw;font-size:1.05vw;padding:1.2em 0 0 1.2em;} }

/* ---- скріншот-відгук ---- */
.review-type-img{padding:0;border:none;}
.review-type-img > a{display:block;aspect-ratio:.556;border-radius:1.25em;overflow:hidden;}
@media only screen and (min-width:992px){ .review-type-img > a{border-radius:1em;} }
.review-type-img img{width:100%;height:100%;object-fit:cover;object-position:top;}
.review-type-img .review-project-link{margin-top:auto;padding-right:0;}

/* ---- фото автора: 4:5 ---- */
.review-author-photo{
  position:relative;width:100%;aspect-ratio:.8;
  border-radius:1.25em;overflow:hidden;background:var(--paper-2);
}
@media only screen and (min-width:992px){ .review-author-photo{border-radius:1em;} }
.review-author-photo img{width:100%;height:100%;object-fit:cover;}
.review-author-photo .review-audio{
  position:absolute;left:1em;bottom:1em;width:calc(100% - 2em);height:2.6em;
}
.review-author-photo .video-play-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  width:3.5em;height:3.5em;border-radius:50%;
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  color:var(--ink);
  transition:background .3s,color .3s;
}
.review-author-photo .video-play-btn svg{width:50%;height:auto;}
.review-author-photo.video:hover .video-play-btn{background:var(--accent);color:var(--white);}

/* ---- автор ---- */
.review-author{display:block;margin-top:.5em;font-style:normal;line-height:1.2;}
.author-name{display:block;color:var(--ink);font-weight:400;font-size:4.61vw;}
@media only screen and (min-width:768px){ .author-name{font-size:2.34vw;} }
@media only screen and (min-width:992px){ .author-name{font-size:1.042vw;} }
.author-company{display:block;margin-top:.3em;color:var(--accent);font-size:4.1vw;}
@media only screen and (min-width:480px){ .author-company{font-size:3.333vw;} }
@media only screen and (min-width:768px){ .author-company{font-size:2.083vw;} }
@media only screen and (min-width:992px){ .author-company{font-size:.833vw;} }

/* ---- текст ---- */
.review-text{
  display:flex;flex-direction:column;margin-top:2em;
  color:var(--ink);font-weight:400;line-height:1.2;font-size:4.1vw;
}
@media only screen and (min-width:480px){ .review-text{font-size:3.333vw;} }
@media only screen and (min-width:768px){ .review-text{font-size:2.34vw;} }
@media only screen and (min-width:992px){ .review-text{font-size:.833vw;} }
.review-text .svg-icon-quote{margin-bottom:1em;color:var(--ink);flex:none;width:1.688em;height:auto;}
@media only screen and (min-width:768px){ .review-text .svg-icon-quote{width:1.5em;} }
.review-text p{max-width:48ch;}
.review-more{
  align-self:flex-start;margin-top:1em;
  color:var(--ink);font-size:1em;line-height:1.2;
  text-decoration:underline;text-underline-offset:.25em;
}
.review-more:hover{color:var(--accent);}

/* ---- «Переглянути кейс» — кнопка з сайту ---- */
.review-project-link{margin-top:auto;padding-top:1.5em;}
.review-project-link a{
  display:flex;flex-wrap:nowrap;align-items:center;gap:.86em;
  font-family:var(--ff-display);
  border-radius:10em;color:var(--ink);
  font-size:3.59vw;line-height:1;text-transform:uppercase;white-space:nowrap;
  transition:background .3s,color .3s;
}
@media only screen and (min-width:768px){ .review-project-link a{font-size:2.083vw;} }
@media only screen and (min-width:992px){ .review-project-link a{font-size:.83vw;} }
.review-project-link .icon{
  border-radius:10em;border:1px solid var(--ink);
  padding:.21em 1.3em;pointer-events:none;
  transition:transform .3s,border-color .3s;
}
@media only screen and (min-width:768px){ .review-project-link .icon{padding:.22em 1.2em;} }
@media only screen and (min-width:992px){
  /* висота виходила дробовою (34.98 px) — нижня риска кола малювалась
     блідішою за верхню; округлюємо висоту до цілого пікселя */
  .review-project-link .icon{
    display:inline-flex;align-items:center;justify-content:center;
    height:round(nearest,2.93em,1px);
    padding:0 1.87em;
  }
}
.review-project-link .icon svg{width:1.72em;height:auto;flex:none;}
.review-project-link a:hover{background:var(--ink);color:var(--white);}
.review-project-link a:hover .icon{transform:translateX(1.5em);border-color:transparent;}

/* ---- повний текст ---- */
.review-full.hide{display:none;}
.review-dialog{
  width:min(640px,92vw);
  padding:clamp(1.5rem,3vw,2.5rem);
  border:0;border-radius:clamp(14px,1.6vw,22px);
  background:var(--white);color:var(--ink);
}
.review-dialog::backdrop{background:rgba(13,13,13,.6);}
.review-dialog__close{
  position:absolute;top:.75rem;right:.75rem;
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;color:var(--ink-55);
}
.review-dialog__close:hover{background:var(--paper);color:var(--ink);}
.review-dialog__name{font-size:var(--fs-h4);font-weight:500;}
.review-dialog__company{margin-top:.2rem;color:var(--accent);font-size:var(--fs-small);}
.review-dialog__body p{margin-top:1em;color:var(--ink-70);}
.review-dialog__body p:first-of-type{margin-top:1.25rem;}

/* ===================== s13 · ФІНАЛЬНИЙ CTA =============================== */
.final__head{grid-column:1 / span 7;}
.final__title{
  font-size:clamp(2.4rem,7.4vw,6.4rem);
  font-weight:500;line-height:.98;letter-spacing:var(--ls-display);
  text-transform:uppercase;
}
.final__title .em{text-transform:none;}
.final__actions{margin-top:clamp(1.75rem,3.5vw,2.75rem);display:flex;flex-wrap:wrap;gap:.75rem;}
.final__contacts{grid-column:9 / span 4;align-self:end;}
.final__person{
  display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  margin-top:var(--sp-4);color:var(--night-fg-55);font-size:var(--fs-small);
}
@media (max-width:1023.98px){
  .final__head,.final__contacts{grid-column:1 / span 12;}
  .final__contacts{margin-top:var(--sp-5);}
}

/* ---- текст кнопки перефарбовується разом із заливкою ---------------------
   Заливка з-під курсора росте 0.38 s і накриває кнопку аж під кінець
   (крива повільно стартує). Колір тексту мінявся за 0.18 s — виходив
   білий текст на ще світлому фоні. Тепер при наведенні колір чекає, поки
   заливка майже накриє кнопку, а при відведенні повертається одразу:
   правило в :hover діє на вхід, базове — на вихід. */
.btn,.hero__btn,.manifesto__btn,.garage__btn,.btn-bordered{
  transition:color .16s var(--ease),
             background var(--dur-fast) var(--ease),
             border-color .16s var(--ease),
             transform var(--dur-fast) var(--ease);
}
@media (hover:hover){
  .btn:hover,.hero__btn:hover,.manifesto__btn:hover,
  .garage__btn:hover,.btn-bordered:hover{
    transition:color .13s var(--ease) .17s,
               background var(--dur-fast) var(--ease),
               border-color .13s var(--ease) .17s,
               transform var(--dur-fast) var(--ease);
  }
}