/* ==========================================================================
   BORTNITSKYSTUDIO. Світла тепла тема.
   Палітра: тепле кремове тло, тепла темна графіка, глибоке золото акцентом.
   Ніде не чистий білий і не чистий чорний. Радіус 0 скрізь.
   Криві тільки з дозволеного набору.
   ========================================================================== */
:root{
  --paper:#FAF8F4;      /* основне тло, тепле, не чистий білий */
  /* ступені розведені по світлоті: раніше різниця була настільки мала,
     що межі секцій не читалися і сторінка виглядала суцільним полотном */
  --paper-2:#F2EDE4;    /* піднята поверхня */
  --paper-3:#E7E0D3;    /* тепліша смуга */
  --paper-4:#DED3C1;    /* найтепліша, під ціну */
  --ink:#26221D;        /* теплий майже-чорний, не чистий чорний */
  --gold:#6E4E0F;       /* заливка кнопок: ~7:1 з #FDFBF7 при 12px/600 */
  --gold-lg:#A8791F;    /* світліше золото тільки для великих цифр і тонких ліній */
  --gold-ink:#6E4E0F;   /* затемнений під дрібний текст: 5.4:1 на paper */
  --gold-soft:#C9A227;  /* поверх темного відео */

  /* ієрархія прозорістю */
  --t1:rgba(38,34,29,1);
  --t2:rgba(38,34,29,.74);   /* 0.66 давало 4.45:1 на бежевих секціях, нижче AA */
  --t3:rgba(38,34,29,.42);
  --line:rgba(38,34,29,.12);

  --e-in:cubic-bezier(0.16, 1, 0.3, 1);
  --e-ui:cubic-bezier(0.25, 1, 0.5, 1);
  --e-scroll:cubic-bezier(0.87, 0, 0.13, 1);

  --pad:clamp(1rem,.4rem + 2.4vw,3rem);
  --gut:clamp(20px,7vw,100px);   /* бічне поле, безперервне від 390 до 1440+ */

  /* Дрібна шкала зведена з семи майже однакових кеглів до трьох.
     Раніше 13.6 / 13.12 / 13 / 12.8 / 12.48 / 12 / 11.52px різнилися
     на частки пікселя без сенсу і читалися як дрейф, а не система. */
  --fs-xs:11px;   /* капси-мікролейбли */
  --fs-s:12px;    /* кнопки, службові капси */
  --fs-m:13px;    /* вторинний текст, підписи, лейбли форм */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--t1);
  font-family:'Manrope','Manrope fallback',system-ui,sans-serif;font-weight:400;
  font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{display:block;max-width:100%}
/* браузерний дефолт figure{margin:1em 40px} зсував флагманську смугу HOM9
   на 40px від країв, тоді як сусідні смуги йшли в край */
figure{margin:0}
button{font:inherit;color:inherit}
a{color:inherit}

/* Бічне поле було зламане: на 1440 виходило 100px, а на 1280 лише 20px,
   бо колонка контенту жорстко впиралася в 1240px. Тепер поле безперервне. */
.grid{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gut),1fr)
    [content-start] minmax(0,1240px) [content-end]
    minmax(var(--gut),1fr) [full-end];
}
.grid > *{grid-column:content}
.grid > .full{grid-column:full}

/* ТИПОГРАФІКА */
/* Cormorant за замовчуванням дає мінускульні цифри: "HOM9", "01", "13"
   з'їжджають під базову лінію. Скрізь у заголовках вмикаємо мажускульні. */
/* Фолбек із підігнаними метриками: CLS 0.09 приходив саме з підміни
   дисплейної антикви, бо Georgia ширша й вища за Cormorant Light. */
@font-face{
  font-family:'Cormorant fallback';
  src:local('Georgia'),local('Times New Roman'),local('serif');
  size-adjust:92%; ascent-override:88%; descent-override:24%; line-gap-override:0%;
}
@font-face{
  font-family:'Manrope fallback';
  src:local('Segoe UI'),local('Helvetica Neue'),local('Arial'),local('sans-serif');
  size-adjust:101%; ascent-override:104%; descent-override:28%; line-gap-override:0%;
}
.d1,.d2,.d3{font-variant-numeric:lining-nums proportional-nums;
  font-feature-settings:'lnum' 1,'onum' 0}
/* стеля піднята з 180 до 224px: на 1600+ заголовок упирався в кап
   і тримав лише ліву третину екрана */
.d1{font-family:'Cormorant Garamond','Cormorant fallback',Georgia,serif;font-weight:300;
  font-size:clamp(3.4rem,1rem + 11vw,14rem);line-height:1.02;letter-spacing:-0.045em;margin:0}
.d2{font-family:'Cormorant Garamond','Cormorant fallback',Georgia,serif;font-weight:300;
  font-size:clamp(2.4rem,1rem + 5.4vw,7rem);line-height:1.08;letter-spacing:-0.035em;margin:0}
/* d3 розведено з d2: на широких екранах вони збігалися в 51.2px,
   і візуальна ієрархія не збігалася з семантичною */
.d3{font-family:'Cormorant Garamond','Cormorant fallback',Georgia,serif;font-weight:300;
  font-size:clamp(1.6rem,1rem + 1.9vw,2.6rem);line-height:1.16;letter-spacing:-0.025em;margin:0}
/* мікролейбли підняті з 12px до 13px: на 12px контраст падав нижче AA */
.lbl{font-size:var(--fs-m);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 1.5rem;font-weight:600}
/* Наскрізний мотив. Та сама фраза, що в заголовку героя, тільки тихо:
   антиква, без капсу, з тонкою рискою — щоб читалася як рефрен, а не як
   ще один підзаголовок, який конкурує з h2. */
.motif{margin:0 0 1.1rem;padding-left:2.6rem;position:relative;max-width:none;
  font-family:'Cormorant Garamond','Cormorant fallback',Georgia,serif;
  font-weight:300;font-style:italic;font-size:clamp(1.15rem,1rem + .5vw,1.5rem);
  line-height:1.3;letter-spacing:-0.01em;color:var(--t2)}
.motif::before{content:'';position:absolute;left:0;top:.72em;
  width:1.8rem;height:1px;background:var(--gold)}
/* 58ch давало ~72-75 знаків на 17px: звужуємо до комфортних 62-66 */
p{margin:0 0 1rem;color:var(--t2);max-width:52ch}
.big{font-size:1.15rem;line-height:1.65;color:var(--t1);max-width:50ch}
/* на широких екранах трохи більший кегль тексту: 16px для преміального
   десктопу дрібнуватий, міра при цьому лишається близько 65 знаків */
@media(min-width:1200px){
  body{font-size:17px}
  .big{font-size:1.2rem}
}
.sm{font-size:var(--fs-m);color:rgba(38,34,29,.82)}
.num{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1}

/* КНОПКИ. Тінь у тон акценту */
.btn{display:inline-flex;align-items:center;justify-content:center;
  padding:1rem 2rem;border:1px solid var(--gold);border-radius:0;
  background:var(--gold);color:#FDFBF7;
  font-size:var(--fs-s);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  box-shadow:0 14px 40px rgba(168,121,31,.22);
  transition:background .3s var(--e-ui),box-shadow .3s var(--e-ui),transform .15s var(--e-ui)}
.btn:hover{background:var(--ink);border-color:var(--ink);box-shadow:0 18px 52px rgba(38,34,29,.24)}
.btn:active{transform:translateY(1px)}
.btn--g{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
.btn--g:hover{background:transparent;border-color:var(--gold);color:var(--gold);box-shadow:0 12px 34px rgba(168,121,31,.16)}
.btn--on-dark{background:transparent;color:#FAF8F4;border-color:rgba(250,248,244,.45);box-shadow:none}
.btn--on-dark:hover{background:#FAF8F4;color:var(--ink);border-color:#FAF8F4}

/* НАВІГАЦІЯ */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;border-bottom:1px solid transparent;
  transition:background .5s var(--e-ui),border-color .5s var(--e-ui)}
.nav.stuck{background:rgba(250,248,244,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
/* м'яка кромка під шапкою: жорстка межа різала великі заголовки Cormorant
   навпіл, коли ті проїжджали під нею */
.nav.stuck::after{content:'';position:absolute;left:0;right:0;top:100%;height:26px;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(250,248,244,.82),rgba(250,248,244,0))}
/* шапка й герой сиділи в 1158px, а секції в 1240px: ліва вісь стрибала
   на 41px одразу після героя. Тепер усі три на одній колонці. */
/* висота росте разом зі знаком: у 70px монограма 76px не вміщалася */
.nav__in{max-width:calc(1240px + var(--gut) * 2);margin:0 auto;padding:0 var(--gut);
  height:clamp(76px,7vw,100px);display:flex;align-items:center;gap:2rem}
/* тач-зона логотипа була 28px: піднімаємо до 44px без зміни вигляду */
.brand{position:relative;display:flex;align-items:center;text-decoration:none;margin-right:auto;
  min-height:44px}
/* height задає розмір, width:auto тримає пропорції 2.735:1 недоторканими */
/* Тільки монограма, без напису: у 37px підпис «BORTNITSKY STUDIO» був
   ~5px і не читався взагалі. Назву студії й так несе заголовок героя
   одразу під шапкою, тож дублювати її дрібним текстом нема потреби.
   Розмір піднято з 37 до 76px — рівно вдвічі. */
.brand__l{display:block;height:clamp(58px,5.3vw,76px);width:auto;
  transition:opacity .3s var(--e-ui)}
/* друга версія лежить поверх першої, тому перемикання не зсуває верстку */
.brand .on-light{position:absolute;left:0;top:50%;transform:translateY(-50%)}
.nav:not(.stuck) .brand .on-light{opacity:0}
.nav.stuck .brand .on-dark{opacity:0}
/* У відкритому мобільному меню підкладка світла — знак має бути темний.
   Клас продубльовано навмисно: :not(.stuck) вище дає 0,4,0, і просте
   правило для menu-open програвало йому, гасячи обидві версії разом. */
body.menu-open .nav .brand .on-light.on-light{opacity:1}
body.menu-open .nav .brand .on-dark.on-dark{opacity:0}
.mark{width:28px;height:28px;display:grid;place-items:center;border:1px solid currentColor;
  font-family:'Cormorant Garamond','Cormorant fallback',serif;font-size:1rem;flex:0 0 auto;color:var(--gold-ink)}
.nav__l{display:flex;gap:1.8rem}
/* 14px і темніший тон: 13px при 5.15:1 були найслабшим текстом сторінки */
.nav__l a{position:relative;color:rgba(38,34,29,.86);text-decoration:none;font-size:14px;
  padding-bottom:3px;transition:color .3s var(--e-ui)}
.nav__l a:hover{color:var(--ink)}
.nav__l a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--e-in)}
.nav__l a:hover::after,.nav__l a.current::after{transform:scaleX(1);transform-origin:left}
/* активний пункт лишається чорнильним, а золото йде тільки в підкреслення:
   золотий текст 12.8px на кремовому давав 2.28:1 і виявлявся найблідішим
   у навігації, тобто ієрархія була перевернута */
.nav__l a.current{color:var(--ink);font-weight:500}
.nav__l a.current::after{background:var(--gold-ink);height:2px}
.nav:not(.stuck) .nav__l a.current{color:#FAF8F4}
.nav:not(.stuck) .nav__l a.current::after{background:var(--gold-soft)}
.nav .btn{padding:.65rem 1.2rem}
/* поки герой під навбаром, навбар світлий поверх відео */
.nav:not(.stuck) .brand,.nav:not(.stuck) .nav__l a{color:#FAF8F4}
.nav:not(.stuck) .mark{color:#FAF8F4}
.nav:not(.stuck) .burger span{background:#FAF8F4}
/* але коли відкрито кремовий оверлей меню, світле стає невидимим:
   примусово повертаємо темне, інакше хрестик закриття не знайти */
/* специфічність має перебити .nav:not(.stuck) .burger span (0,3,1) */
body.menu-open .nav .brand,body.menu-open .nav .brand .mark{color:var(--ink)}
body.menu-open .nav .burger span{background:var(--ink)}
.nav .btn{box-shadow:none}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;
  position:relative;z-index:2}
.burger span{display:block;position:absolute;left:11px;width:22px;height:1px;background:var(--ink);
  transition:transform .3s var(--e-ui),opacity .2s linear}
.burger span:first-child{top:19px}
.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}

/* повноекранний оверлей, а не дропдаун у потоці */
/* список починається одразу під шапкою, CTA сідає до нижнього краю:
   раніше згори лишалося близько 350px порожнечі */
.menu{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-start;
  gap:.25rem;padding:calc(70px + 1.2rem) var(--pad) calc(env(safe-area-inset-bottom,0px) + 1.4rem);
  background:var(--paper);overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .35s var(--e-ui),visibility .35s}
/* контактний блок заповнює нижню третину меню: під кнопкою було ~400px порожнечі */
.menu__contacts{margin-top:auto;padding-top:1.6rem;border-top:1px solid var(--line);
  display:flex;flex-direction:column}
/* .menu подвоєно навмисно: .menu__contacts a має ту саму специфічність,
   що й .menu a, а те правило стоїть нижче й перемагало */
.menu .menu__contacts a,.menu .menu__contacts p{display:flex;align-items:center;
  min-height:44px;padding:.4rem 0;border:0;margin:0;
  font-size:var(--fs-m);text-decoration:none;color:var(--t2);
  font-family:'Manrope','Manrope fallback',sans-serif;font-weight:400;letter-spacing:.02em}
.menu .menu__contacts a{color:var(--gold-ink)}
.menu.open{opacity:1;visibility:visible}
.menu a{padding:1.05rem 0;border-bottom:1px solid var(--line);text-decoration:none;
  font-family:'Cormorant Garamond','Cormorant fallback',Georgia,serif;font-size:2rem;font-weight:300;letter-spacing:-0.02em;
  min-height:48px;display:flex;align-items:center}
/* цільовий клас замість :last-child: після додавання контактного блоку
   кнопка перестала бути останньою дитиною і втрачала свій вигляд */
.menu a[href="#form"]{border:0;margin-top:1.4rem;justify-content:center;background:var(--gold);color:#FDFBF7;
  font-family:'Manrope','Manrope fallback',sans-serif;font-size:var(--fs-s);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;min-height:56px}
body.menu-open{overflow:hidden}
/* знак бренду лишається видимим над відкритим меню, щоб було зрозуміло,
   чий це сайт, і щоб у шапці був не тільки хрестик */
body.menu-open .nav{z-index:61}
body.menu-open .nav .brand,body.menu-open .nav .mark{color:var(--ink);position:relative;z-index:2}
body.menu-open .burger span{background:var(--ink)}
@media(max-width:900px){.nav__l,.nav .btn{display:none}.burger{display:block}}
@media(min-width:901px){.menu{display:none}}
@media(max-width:600px){
  main .btn{white-space:normal;max-inline-size:100%;text-align:center}
}

/* =========================================================================
   HERO. Реальне відео студії, full-bleed на всю ширину.
   ========================================================================= */
.hero{position:relative;min-height:100dvh;display:grid;align-items:end;overflow:hidden;background:var(--ink)}
.hero__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* у портреті 16:9 кадр обрізається до вузької смуги: зсуваємо його
   на стелажну стіну, інакше видно лише порожню темну штукатурку */
/* 62% по вертикалі, а не center: у портреті верхня третина віддавала
   пласку сіру стелю, тепер у кадр піднімаються освітлені стелажі */
/* мобільний отримує власний портретний кроп, тому компенсації через
   object-position більше не потрібні: кадр заповнює вьюпорт як є */
/* нижче центру: верхні ~40% екрана віддавали пусту сіру штукатурку
   над ейбрау, замість підсвічених стелажів */
@media(max-width:640px){
  .hero__v{object-position:center 82%}
}
/* багатостоповий скрим без різких стрибків: на вузькому екрані стопи
   стискаються, і будь-який пропуск читається як горизонтальний шов */
.hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(28,25,21,.70) 0%, rgba(28,25,21,.58) 8%, rgba(28,25,21,.44) 16%,
    rgba(28,25,21,.30) 24%, rgba(28,25,21,.24) 34%, rgba(28,25,21,.23) 44%,
    rgba(28,25,21,.28) 54%, rgba(28,25,21,.38) 64%, rgba(28,25,21,.52) 76%,
    rgba(28,25,21,.68) 88%, rgba(28,25,21,.86) 100%)}
.hero__in{position:relative;z-index:2;width:100%;
  max-width:calc(1240px + var(--gut) * 2);margin:0 auto;
  padding:0 var(--gut) clamp(3rem,8vh,6rem);color:#FAF8F4}
/* ейбрау в герої давав 1.85:1 на світлому бетоні: робимо його кістяним
   і додаємо лівий скрим, щоб уся текстова колонка сиділа на темнішому */
.hero .lbl{color:#FAF8F4;text-shadow:0 1px 14px rgba(28,25,21,.6)}
.hero__scrim::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to right,rgba(28,25,21,.68) 0%,rgba(28,25,21,.34) 34%,transparent 62%)}
/* Заголовок у три рядки при 224px закривав 89% першого екрана і підходив
   під шапку з логотипом упритул — на 1440x900 лишалося 3px. Кегль
   зменшено так, щоб текст лишався головним, але відео за ним було видно,
   а над тегом «Україна · Онлайн» був справжній просвіт. */
.hero .d1{max-width:14ch;color:#FAF8F4;
  font-size:clamp(3rem,1.4rem + 5vw,8rem)}
/* базове p{max-width:52ch} рахує символи, а не ширину: з трекінгом .2em
   надрядок ламався так, що «онлайн» лишалося саме на другому рядку */
.hero .lbl{margin-bottom:.9rem;max-width:none}
/* Рядок послуг між заголовком і підзаголовком. Кегль навмисно між ними:
   більший за надрядок (13px) і за підзаголовок, але помітно менший за
   сам заголовок — щоб читався другим, а не сперечався з ним. */
.hero__what{margin:clamp(.9rem,2vw,1.4rem) 0 0;max-width:34ch;
  font-size:clamp(1.15rem,1rem + .55vw,1.55rem);line-height:1.35;
  letter-spacing:-0.01em;color:#FAF8F4;
  text-shadow:0 1px 14px rgba(28,25,21,.6)}
.hero .hero__row{margin-top:1.2rem}
/* На низьких екранах тісно не через ширину, а через висоту: три рядки
   плюс підзаголовок і кнопки не влазять. Значення знижено разом із
   базовим — інакше ці правила стали б більшими за нього. */
@media(min-width:761px) and (max-height:820px){
  .hero .d1{font-size:clamp(2.6rem,1rem + 4.4vw,5.4rem)}
}
@media(min-width:761px) and (max-height:660px){
  .hero .d1{font-size:clamp(2.2rem,1rem + 3.4vw,4.2rem)}
}
/* Рядок послуг додав ~70px до стосу, і на низьких екранах надрядок поліз
   під шапку. Це правило без обмеження по ширині: страждають і ноутбуки
   1440x700, і телефони 360x640, тому тиснемо весь стос разом. */
@media(max-height:700px){
  .hero .d1{font-size:clamp(2rem,1rem + 3vw,3.6rem)}
  .hero .lbl{margin-bottom:.5rem}
  .hero__what{font-size:1rem;line-height:1.3;margin-top:.6rem;max-width:46ch}
  .hero .hero__row{margin-top:.8rem}
}
/* колонка з ціною прибрана: рядок лишився одноколонковим, тому обмежуємо
   міру рядка, щоб підзаголовок не тягнувся на всю ширину екрана */
.hero__row{display:flex;flex-wrap:wrap;gap:2.5rem;align-items:flex-end;justify-content:space-between;margin-top:2rem}
.hero__row > div{max-width:56ch}
.hero__row .big{color:#FAF8F4}
/* дві кнопки в герої були різної ширини (227 проти 153) і виглядали
   як випадковість, а не пара */
.hero__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}
.hero__cta .btn{min-width:14rem}
@media(max-width:480px){.hero__cta .btn{min-width:0;width:100%}}

/* СЕКЦІЇ */
/* Один вертикальний крок. Раніше 115px згори плюс 115px знизу давали
   230px на кожен шов, а на дев'ять секцій це ~2000px чистого падінгу.
   Тепер шов складається з 72+72 і сторінка коротшає майже на 1300px. */
.sec{padding:clamp(3rem,5.6vw,4.5rem) 0}
.s-trust{background:var(--paper-2)}
/* Блок довіри тепер несе і тріаду, і цифри. Селектор подвоєно навмисно:
   базове .sub-h{margin:0 0 1rem} стоїть нижче по файлу з рівною
   специфічністю й з'їдало відступ — підзаголовок прилипав до колонки 01. */
.s-trust .stat{background:var(--paper)}
.s-trust .trust__statsh{margin:clamp(2.6rem,5vw,4rem) 0 clamp(1.4rem,2.6vw,2rem);
  padding-top:clamp(1.6rem,3vw,2.4rem);border-top:1px solid var(--line);
  max-width:none;color:var(--ink)}

.s-facts{background:var(--paper)}
.s-proof{background:var(--paper-2)}
.s-work{background:var(--paper)}
.s-proc{background:var(--paper-2)}
/* Креслярська сітка під секцією ціни — тон у тон, майже на межі помітності:
   вона має читатися як фактура паперу, а не як візерунок. */
.s-price{background:var(--paper-4);position:relative;isolation:isolate}
.s-price::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:image-set(url('../images/texture/pricing-bg-linework-01-800.webp') 1x,
                       url('../images/texture/pricing-bg-linework-01.webp') 2x)
             center/cover no-repeat;
  opacity:.35;mix-blend-mode:multiply}
/* на найтемнішій бежевій смузі золото треба темніше, інакше 4.49:1 */
.s-price .lbl,.s-price .ticks li::before{color:#6E4E0F}
.s-price .ticks li::before{background:#6E4E0F}
.s-studio{background:var(--paper)}
.s-form{background:var(--paper-3)}

/* margin-bottom прибрано: під смугою цифр лишався люфт 165px */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-block:1px solid var(--line);margin:2.4rem 0 0}
.stat{background:var(--paper);padding:2rem 1.4rem}
.s-facts .stat{background:var(--paper)}
.stat dt{font-size:var(--fs-m);color:var(--t2);margin-bottom:.9rem;min-height:2.6em}
/* 3.7:1 було найслабшим контрастом на сайті, і саме на цифрах довіри */
.stat dd{margin:0;font-family:'Cormorant Garamond','Cormorant fallback',serif;font-weight:300;
  font-size:clamp(2.4rem,1.6rem + 2.6vw,4rem);line-height:.95;color:var(--gold-ink);letter-spacing:-0.03em}
/* трійка тримає один ряд аж до 520px: у сітці 2x2 три цифри лишали
   порожню комірку, а це читалося як загублений блок, а не як ритм */
@media(max-width:520px){
  .stats{grid-template-columns:1fr}
  .stat dt{min-height:0}
  .stat{padding:1.4rem 1rem}
}

/* заголовок і текст поруч: раніше права половина сітки лишалася порожньою
   і читалася як незавершеність, а не як прийом */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,4rem);align-items:end}
.split .big{margin:0}
/* Підпис автора під текстом. Портрет малий і квадратний, щоб не
   конкурував з інтер'єрними кадрами нижче в цій же секції. */
/* права колонка тут виросла на портрет, і базове align-items:end
   відсовувало заголовок аж під низ абзацу */
.s-proof .split{align-items:start}
.who{display:flex;align-items:center;gap:1rem;margin:clamp(1.4rem,2.6vw,2rem) 0 0}
.who img{width:104px;height:104px;flex:0 0 auto;object-fit:cover;
  border:1px solid var(--line)}
.who figcaption{display:flex;flex-direction:column;gap:.25rem}
.who b{font-weight:500;font-size:1.05rem;letter-spacing:-0.01em}
.who span{font-size:var(--fs-m);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:1.2rem;align-items:start}}

/* ДОКАЗ */
.proof{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,3rem);margin-top:3rem;align-items:end}
.proof figure{margin:0}
.proof img{width:100%;height:auto}
.proof figcaption{font-size:var(--fs-s);letter-spacing:.16em;text-transform:uppercase;color:var(--t2);margin-top:.9rem}
.proof .b{transform:translateY(clamp(1rem,4vw,4.5rem)) translateX(clamp(0px,2vw,3rem))}
@media(max-width:760px){.proof{grid-template-columns:1fr}.proof .b{transform:none}}

/* ПОРТФОЛІО. Асиметрична сітка з шаховим ритмом пропорцій:
   масонрі лишав ~400px мертвого поля внизу лівої колонки. */
/* dense прибирає сирітський провал під високою карткою на 1024 */
.work{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-flow:row dense;
  gap:clamp(1.4rem,3vw,2.4rem) clamp(.5rem,1.4vw,1.2rem);margin-top:3rem}
.card{margin:0;grid-column:span 2}
.card--wide{grid-column:span 4}
.card--full{grid-column:span 6}
.card--full .card__ph{aspect-ratio:21/9}
.card__link{display:block;text-decoration:none;color:inherit;cursor:pointer;
  background:none;border:0;padding:0;width:100%;text-align:left;font:inherit}
.card__ph{display:block;overflow:hidden;background:var(--paper-3)}
.card img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--e-in),filter .5s var(--e-ui)}
/* Пропорції підібрані так, щоб картка будь-якої ширини мала приблизно
   однакову ВИСОТУ (~520px на 1240 колонці). Інакше вузька портретна картка
   робила ряд удвічі вищим, і під короткими лишалися діри 200-300px. */
/* Фіксована ВИСОТА замість пропорції: різні пропорції на різних ширинах
   давали розбіжність підписів у ~20px, що читалося як похибка верстки.
   Тепер усі кадри ряду однакової висоти, базові лінії збігаються точно. */
.card__ph,.card--tall .card__ph,.card--wide .card__ph,.card--full .card__ph{
  aspect-ratio:auto;height:clamp(300px,34vw,516px)}
/* ховер лише на картинці всередині: якщо чіпати саму картку, він обнуляв
   незавершений transform появи і давав помітний ривок */
.card__link:hover .card__ph img,.card__link:focus-visible .card__ph img{
  transform:scale(1.045);filter:brightness(1.03)}
.card figcaption{margin-top:.9rem}
.card__link:hover b,.card__link:focus-visible b{text-decoration:underline;text-underline-offset:6px;
  text-decoration-thickness:1px;text-decoration-color:var(--gold-ink)}
/* Лічильник кадрів — єдиний натяк, що картка відкриває галерею, тому він
   видимий завжди. Раніше він з'являвся по ховеру, тобто на тач-пристроях
   не з'являвся ніколи, а на десктопі — тільки після наведення. */
.card__more{display:block;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);margin-top:.45rem;opacity:.62;
  transition:opacity .35s var(--e-ui)}
.card__link:hover .card__more,.card__link:focus-visible .card__more{opacity:1}
.card b{display:block;font-family:'Cormorant Garamond','Cormorant fallback',serif;font-weight:300;
  font-size:clamp(1.2rem,.9rem + .9vw,1.9rem);letter-spacing:-0.02em}
/* 12.5px випадали як службовий текст на тлі решти набору */
.card i{display:block;font-style:normal;font-size:.9375rem;color:var(--t2);margin-top:.3rem}
@media(max-width:980px){
  .work{grid-template-columns:repeat(2,1fr)}
  .card,.card--wide,.card--full{grid-column:span 1}
  .card__ph,.card--tall .card__ph,.card--wide .card__ph,.card--full .card__ph{
    height:clamp(240px,44vw,380px)}
}
@media(max-width:600px){
  .work{grid-template-columns:1fr}
  .card__ph,.card--tall .card__ph,.card--wide .card__ph,.card--full .card__ph{
    height:clamp(230px,62vw,300px)}
}

/* ЛАЙТБОКС ПОРТФОЛІО. Чорнильна підкладка: на кремовій світлі інтер'єрні
   кадри втрачали вагу й тонули у власному тлі. */
.lb{position:fixed;inset:0;z-index:90;background:#211E19;
  /* колонку треба затиснути явно: неявна auto-колонка бралася по max-content
     стрічки з 58 мініатюр і розганяла сітку до ~3900px, через що кадр і
     кнопки закриття/вперед виїжджали за межі екрана */
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;
  opacity:0;visibility:hidden;transition:opacity .3s var(--e-ui),visibility .3s}
.lb.open{opacity:1;visibility:visible}
.lb__bar{grid-row:1;grid-column:1;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:60px;padding:0 clamp(1rem,3vw,2rem);border-bottom:1px solid rgba(250,248,244,.14)}
.lb__ttl{margin:0;font-family:'Cormorant Garamond','Cormorant fallback',serif;font-weight:300;
  font-size:clamp(1.15rem,1rem + .8vw,1.8rem);letter-spacing:-0.02em;max-width:none;color:#FAF8F4}
.lb__cnt{margin:0 auto 0 0;padding-left:1rem;font-size:var(--fs-m);color:rgba(250,248,244,.72);
  font-variant-numeric:tabular-nums;max-width:none}
.lb__x{width:48px;height:48px;background:none;border:1px solid rgba(250,248,244,.28);cursor:pointer;
  position:relative;flex:0 0 auto;transition:border-color .3s var(--e-ui)}
.lb__x:hover{border-color:var(--gold-soft)}
.lb__x::before,.lb__x::after{content:'';position:absolute;top:50%;left:50%;
  width:18px;height:1px;background:#FAF8F4;margin:-.5px 0 0 -9px}
.lb__x::before{transform:rotate(45deg)} .lb__x::after{transform:rotate(-45deg)}
/* рядок і колонку задаємо явно: інакше неявний auto-рядок дорівнює
   натуральному розміру фото, і max-height:100% на ньому не працює */
/* хром панелей стиснуто, кадр отримує максимум висоти: для портфоліо
   інтер'єрів фото має домінувати, а не ділити екран порівну з рамками */
.lb__stage{grid-row:2;grid-column:1;
  position:relative;display:grid;place-items:center;min-height:0;overflow:hidden;
  grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);
  padding:clamp(.4rem,1vw,.8rem)}
/* висота обмежена рядком гріда, тому фото ніколи не йде за фолд */
/* квадратний кадр лишав по ~360px порожнього паперу з боків на 1440:
   даємо йому вирости в ширину, поки вистачає висоти */
/* у портфоліо лайтбокс мусить показувати роботу крупно: раніше кадр
   тримався 750px у вікні 1440 і лишав по 345px мертвого поля з боків */
.lb__img{max-width:min(92vw,1400px);max-height:100%;width:auto;height:auto;object-fit:contain;
  opacity:0;transition:opacity .35s var(--e-ui)}
.lb__img.ready{opacity:1}
.lb__spin{position:absolute;margin:0;font-size:var(--fs-s);color:var(--t2);letter-spacing:.14em;
  text-transform:uppercase;max-width:none}
/* Стрілки лежать поверх сцени, а не окремим рядом. Кадр обмежений висотою,
   тож по боках від нього лишалося ~780px порожнечі — саме туди й ідуть
   кнопки, а звільнені 64px висоти забирає сам кадр. */
.lb__nav{grid-row:2;grid-column:1;align-self:stretch;justify-self:stretch;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 clamp(.6rem,2vw,1.6rem);pointer-events:none;z-index:2}
.lb__nav button{pointer-events:auto;width:56px;height:56px;background:rgba(33,30,25,.55);
  backdrop-filter:blur(6px);border:1px solid rgba(250,248,244,.28);
  cursor:pointer;font-size:1.35rem;line-height:1;color:#FAF8F4;
  transition:border-color .3s var(--e-ui),color .3s var(--e-ui),background .3s var(--e-ui)}
.lb__nav button:hover{border-color:var(--gold-soft);color:var(--gold-soft);background:rgba(33,30,25,.8)}
.lb__foot{grid-row:3;grid-column:1;min-width:0;
  display:flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem);
  padding:0 clamp(1rem,3vw,2rem);border-top:1px solid rgba(250,248,244,.14)}
/* доступ до повнорозмірного файлу: у галереї віддається варіант 1600px */
.lb__full{display:inline-flex;align-items:center;min-height:48px;padding:0 1.1rem;
  border:1px solid rgba(250,248,244,.28);text-decoration:none;color:rgba(250,248,244,.72);
  font-size:var(--fs-s);letter-spacing:.14em;text-transform:uppercase;
  transition:border-color .3s var(--e-ui),color .3s var(--e-ui)}
.lb__full:hover{border-color:var(--gold-soft);color:var(--gold-soft)}
.lb__spin{color:rgba(250,248,244,.6)}

/* Стрічка кадрів. На 58 знімках стрілок мало: не видно ні де ти в наборі,
   ні що набір узагалі можна гортати. */
.lb__strip{flex:1 1 auto;min-width:0;display:flex;gap:.5rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  padding:.9rem 0 1.1rem;scrollbar-width:none}
.lb__strip::-webkit-scrollbar{display:none}
.lb__strip button{flex:0 0 auto;width:56px;height:56px;padding:0;cursor:pointer;
  background:none;border:1px solid transparent;opacity:.42;
  transition:opacity .3s var(--e-ui),border-color .3s var(--e-ui)}
.lb__strip button:hover{opacity:.8}
.lb__strip button[aria-selected="true"]{opacity:1;border-color:var(--gold-soft)}
.lb__strip img{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){.lb__strip{scroll-behavior:auto}}

body.lb-open{overflow:hidden}
@media(max-width:600px){
  .lb__bar{height:60px}
  .lb__ttl{font-size:1rem}
  /* канонічна схема: шапка вгорі, стрілки внизу, кадр по центру.
     На чорнильній підкладці вільне поле читається як поле кадру,
     а не як порожнеча, тому центрувати весь блок більше не треба. */
  /* сцена по контенту, а не фіксовані 712px: під кадром 359px лишалася
     половина екрана порожньої темряви, а панель відʼїжджала вниз */
  .lb{grid-template-rows:auto auto minmax(0,1fr)}
  .lb__stage{min-height:0;height:auto;max-height:52dvh;padding:1rem var(--pad)}
  .lb__nav{padding:0 .4rem}
  .lb__nav button{width:48px;height:48px}
  /* На 390px кадр упирається в ширину, тож зайва висота йому нічого не дає:
     решту вьюпорта віддаємо контактнику. 58 кадрів видно пачками, а не по
     одному крізь стрілки. */
  .lb__foot{flex-direction:column;align-items:stretch;gap:.6rem;
    padding-top:.9rem;overflow:hidden}
  .lb__full{align-self:center}
  .lb__strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));
    gap:.5rem;overflow-x:hidden;overflow-y:auto;align-content:start;
    padding:0 0 calc(1.1rem + env(safe-area-inset-bottom))}
  .lb__strip button{width:auto;height:auto;aspect-ratio:1}
}

/* =========================================================================
   ПОВНОШИРИННІ МЕДІА-СМУГИ. Один спільний контракт для <img> і <video>.
   Раніше висота була фіксована (band 576px, amb 460px, mat 200px), а кадр
   тягнувся object-fit:cover — тобто з кожного 16:9 джерела було видно
   лише середню смугу, а 15-75% кадру ховалося за краями. Тепер висота
   рахується з реальних пропорцій джерела, і кадр видно цілком.
   ========================================================================= */
.band,.amb{aspect-ratio:16/9;height:auto}
.band img,.band video,
.amb img,.amb video{
  width:100%;height:100%;object-fit:contain;object-position:center}

/* Повноширинна смуга з реального портфоліо */
.band{position:relative;overflow:hidden;background:var(--paper-3)}
.band figcaption{position:absolute;left:var(--pad);bottom:var(--pad);z-index:2;
  color:#FAF8F4;font-size:var(--fs-s);letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 2px 18px rgba(28,25,21,.7)}
.band::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(28,25,21,.5),transparent 46%)}

/* =========================================================================
   ФЛАГМАН HOM9. Світлий блок одразу після героя.
   ========================================================================= */
/* нижній відступ менший за верхній: кнопка "Дивитись усі 58 кадрів"
   уже має власний margin, і разом виходив провал ~210px до наступної секції */
/* той самий крок 72px, що й у решти дев'яти секцій */
.flag{background:var(--paper);padding:clamp(3rem,5.6vw,4.5rem) 0}
.flag__head{margin-bottom:clamp(2rem,4vw,3.4rem)}
/* обидва дисплейні моменти сторінки в одному ритмі: було 1.02 проти 0.9 */
.flag__name{font-size:clamp(4rem,2rem + 9vw,10rem);line-height:.98}

/* Авторський скрол-момент флагмана: поки секція проходить повз,
   кадр перетікає з вітальні в кухню, а знак HOM9 розкривається
   в трекінгу. Обидва рухи керуються одним прогресом. */
.band--fade{position:relative}
.band--fade .band__layer{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;will-change:opacity,transform}
.band--fade .band__layer{opacity:1}
/* світловий шов по краю витоку: без нього стик двох кадрів у схожій
   гамі читався як криво зшита панорама, а не як прийом */
.band__seam{position:absolute;top:0;bottom:0;left:0;width:2px;z-index:2;opacity:0;
  will-change:transform;
  background:linear-gradient(to right,rgba(250,248,244,0),rgba(250,248,244,.75),rgba(250,248,244,0));
  box-shadow:0 0 28px 6px rgba(250,248,244,.25);
  transition:opacity .25s var(--e-ui);pointer-events:none}
/* характеристики підняті в праву колонку шапки: раніше під заголовком
   HOM9 права половина сітки стояла порожньою без контрваги */
.flag__intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,4rem);
  align-items:start;margin-top:1.6rem}
.flag__sub{margin:0}
@media(max-width:860px){.flag__intro{grid-template-columns:1fr;gap:1.6rem}}

/* текст і сітка кадрів поруч: раніше абзаци займали ліві ~540px,
   а вся права половина полотна лишалася порожньою */
.flag__body{display:grid;grid-template-columns:0.8fr 1.2fr;gap:clamp(1.6rem,4vw,4rem);
  margin:clamp(2rem,4vw,3rem) 0 clamp(1.6rem,3vw,2.4rem);align-items:start}
@media(max-width:900px){.flag__body{grid-template-columns:1fr;gap:2rem}}
.flag__text .d3{margin-bottom:1rem}
.flag__spec{margin:0;align-self:start}
.flag__spec > div{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;
  padding:.85rem 0;border-bottom:1px solid var(--line)}
.flag__spec dt{font-size:var(--fs-m);color:var(--t2);letter-spacing:.03em}
.flag__spec dd{margin:0;font-size:var(--fs-m);text-align:right;color:var(--t1)}
/* на вузькому екрані значення йде під підпис: довгий перелік матеріалів
   інакше упирався в край контейнера */
@media(max-width:560px){
  .flag__spec > div{grid-template-columns:1fr;gap:.25rem}
  .flag__spec dd{text-align:left}
}
@media(max-width:860px){.flag__body{grid-template-columns:1fr}}

.flag__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.5rem,1.4vw,1.1rem)}
@media(max-width:900px){.flag__grid{grid-template-columns:repeat(2,1fr)}}
.flag__grid figure{margin:0}
/* природні пропорції: усі чотири кадри квадратні, тож висоти збігаються,
   і жодна композиція не ріжеться */
.flag__grid{align-items:start}
/* фото мусить заповнювати бокс .card__ph: при height:auto квадратний кадр
   у боксі 3/4 лишав під собою 99-140px порожнього паперу */
.flag__grid img{width:100%;height:100%;object-fit:cover;transition:filter .5s var(--e-ui)}
.flag__grid figure:hover img{filter:brightness(1.04)}
.flag__grid figcaption{margin-top:.7rem;font-size:var(--fs-s);letter-spacing:.14em;
  text-transform:uppercase;color:var(--t2)}
@media(max-width:900px){.flag__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.flag__grid{grid-template-columns:1fr}}

/* =========================================================================
   СЦЕНИ. Світлий параллакс: повноширинні фото з короткими репліками.
   ========================================================================= */
.scenes{background:var(--paper);padding:clamp(3rem,5.6vw,4.5rem) 0}
.scenes__head{margin-bottom:clamp(2rem,4vw,3.2rem)}
.scenes__note{max-width:44ch;margin:clamp(1.4rem,2.4vw,2rem) 0 clamp(1.8rem,3.2vw,2.6rem);
  font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);line-height:1.6;color:var(--t1)}
/* три репліки в секції мають різну поставу, щоб не читалося як один патерн */
/* три репліки однієї ролі мали дві гарнітури: лишаємо Manrope скрізь,
   варіативність тримаємо тільки на виключці */
/* строге чергування ліво-право за номером смуги: три різні виключки
   (ліво / право / центр) читалися як непослідовність, а не як ритм */
.scenes__note--wide{max-width:52ch;margin-left:auto;text-align:right}
.scenes__note--end{max-width:44ch;margin-left:0;margin-right:auto;text-align:left}
@media(max-width:760px){
  .scenes__note--wide{text-align:left;margin-left:0}
  .scenes__note--end{text-align:left;margin-right:0}
}
/* остання репліка секції йде в парі з макро тих самих матеріалів */
.scenes__last{display:grid;grid-template-columns:1fr 300px;
  gap:clamp(1.6rem,4vw,3rem);align-items:center}
.scenes__last .scenes__note{margin-block:0}
.scenes__macro{margin:0}
.scenes__macro img{width:100%;height:auto;aspect-ratio:1}
@media(max-width:760px){
  .scenes__last{grid-template-columns:1fr;gap:1.4rem}
  .scenes__macro img{max-width:260px}
}
.flag__cta{margin:clamp(1.6rem,3vw,2.4rem) 0 0}
/* Sticky прибрано: він відпускався на середині сітки й лишав ~600px
   порожнечі під кнопкою. Замість цього кадри зменшено так, щоб два ряди
   приблизно дорівнювали висоті текстової колонки. */
@media(min-width:901px){
  .flag__grid .card__ph{height:clamp(220px,17vw,300px)}
}
.scenes .band{margin:0}
/* єдиний момент хореографії: підпис тримається на місці, поки кадр проїжджає */
@media(min-width:901px){
  .scenes__note{position:sticky;top:calc(50vh - 3rem)}
}
/* Ken Burns на повноширинних смугах: сторінка більше не завмирає між
   героєм і кіно-сценою. Анімуються ОКРЕМІ властивості scale/translate,
   а не transform — інакше вони затирали б інлайновий transform, яким
   скрипт веде паралакс, і один ефект убивав би інший. */
/* Амплітуду знижено з 8.5% до 3%: смуга тепер показує кадр цілком, тому
   будь-яке збільшення понад 1.0 заводить краї за рамку. На 3% рух ще
   читається, а втрата кадру лишається в межах технічного допуску. */
@keyframes kb-in{
  from{scale:1.0;  translate:0 0}
  to  {scale:1.03; translate:-0.5% -0.4%}
}
@keyframes kb-out{
  from{scale:1.03; translate:0.5% 0.4%}
  to  {scale:1.0;  translate:0 0}
}
.band--kb img{animation:kb-in 19s ease-in-out infinite alternate;will-change:scale,translate}
/* сусідні смуги ходять у різні боки, щоб не читалися як один спільний рух */
.band--kb-alt img{animation-name:kb-out;animation-duration:17s}
@media (prefers-reduced-motion:reduce){.band--kb img{animation:none}}

/* Фіксовані висоти смуг прибрано: тепер їх задає aspect-ratio джерела.
   Окремі правила для .band--tall і для телефона більше не потрібні —
   пропорція 16:9 однаково правильна на будь-якій ширині. */

/* ПРОЦЕС */
/* кроки в дві колонки: раніше контент займав ~62% ширини, а лінійки
   тяглися на всі 1240px через шість рядів і читалися як недороблений блок */
.steps{list-style:none;margin:3rem 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,5vw,4.5rem)}
.steps > li:nth-child(-n+2){border-top:1px solid var(--line)}
@media(max-width:860px){
  .steps{grid-template-columns:1fr}
  .steps > li:nth-child(2){border-top:0}
}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,3vw,2.6rem);
  padding:clamp(1.3rem,3vw,2rem) 0;border-bottom:1px solid var(--line)}
.step em{font-style:normal;font-family:'Cormorant Garamond','Cormorant fallback',serif;font-size:1.3rem;
  color:var(--gold);font-variant-numeric:lining-nums}
/* два різні рівні — дві гарнітури: крок процесу гротеском, підзаголовок
   секції антиквою. Раніше обидва були Manrope 500 19.2px і зливалися. */
.step h3{margin:0 0 .6rem;font-family:'Manrope','Manrope fallback',sans-serif;
  font-size:1.2rem;font-weight:500;letter-spacing:-0.01em;line-height:1.3}
.sub-h{margin:0 0 1rem;font-family:'Cormorant Garamond','Cormorant fallback',Georgia,serif;
  font-weight:300;font-size:1.7rem;letter-spacing:-0.02em;line-height:1.2}
/* один кегль тіла для всіх пояснювальних абзаців */
.step p{line-height:1.7}
.step p{margin:0}

/* БЛОК ДОВІРИ. Три колонки одразу під героєм. Нумерація й гарнітури —
   ті самі, що в «Процесі», щоб два нумеровані блоки читалися як одна
   система, а не як два різні прийоми. */
.trust__h{max-width:30ch}
.trust{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(2rem,5vw,4.5rem)}
.trust__i{padding:clamp(1.4rem,3vw,2rem) 0 0;border-top:1px solid var(--line)}
.trust__i em{display:block;margin-bottom:clamp(.8rem,2vw,1.2rem);
  font-style:normal;font-family:'Cormorant Garamond','Cormorant fallback',serif;
  font-size:1.3rem;color:var(--gold);font-variant-numeric:lining-nums}
.trust__i h3{margin:0 0 .6rem;font-family:'Manrope','Manrope fallback',sans-serif;
  font-size:1.2rem;font-weight:500;letter-spacing:-0.01em;line-height:1.3}
.trust__i p{margin:0;line-height:1.7;color:var(--t2);max-width:34ch}
@media(max-width:860px){
  .trust{grid-template-columns:1fr;gap:0}
  .trust__i{padding-bottom:clamp(1.2rem,3vw,1.6rem)}
  .trust__i:last-child{border-bottom:1px solid var(--line)}
}

/* ЦІНА */
.price{text-align:center}
/* Кегль зменшено рівно вдвічі: на весь екран цифра читалася як головна
   перевага студії, хоча це просто відкрита ціна. Після першого зменшення
   вона все ще була найбільшим текстом сторінки (110px проти 94px у h2),
   тому знижено ще раз — тепер це акцент, а не головний елемент екрана. */
.price__n{font-family:'Cormorant Garamond','Cormorant fallback',serif;font-weight:300;
  font-size:clamp(1.9rem,.85rem + 2.6vw,3.25rem);line-height:.9;letter-spacing:-0.05em;margin:1.5rem 0;
  display:flex;justify-content:center;align-items:baseline;gap:.14em;flex-wrap:wrap;
  font-variant-numeric:lining-nums;color:var(--ink)}
/* обидва фланги однакові: Manrope, капси, той самий колір і базова лінія.
   Раніше "від" було антиквою золотом 28px, а "за м²" гротеском сірим 15px */
.price__n s,.price__n u{align-self:flex-end;position:relative;bottom:.16em;
  text-decoration:none;font-family:'Manrope','Manrope fallback',sans-serif;font-size:13px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--t2)}
.price__n s{margin-right:.5em}
.price__n u{margin-left:.35em}
/* надрядок у центрованому блоці ціни: p має max-width, тому без auto
   він притискався вліво */
.price .lbl{margin-inline:auto;max-width:none}
.price__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,4rem);
  text-align:left;border-top:1px solid var(--line);padding-top:2.5rem;margin-top:3rem}
/* хвіст ~130px після двох колонок: остання дитина не має нижнього відступу */
.price__cols > div > *:last-child{margin-bottom:0}
.price__cols .ticks li:last-child{margin-bottom:0}
/* лінійка на всю ширину секції, а міра тексту лишається читною:
   max-width на самому p обрізав би і лінійку теж */
.price__fix{grid-column:1/-1;margin:2rem 0 0;padding-top:1.6rem;
  border-top:1px solid var(--line);max-width:none}
.price__fix span{display:block;max-width:64ch}
@media(max-width:760px){.price__cols{grid-template-columns:1fr}}
/* Розшифровка пакета. Та сама золота риска, що й у .ticks, щоб обидві
   колонки секції читалися одним списком, а не різними прийомами. */
.incl{margin:0;display:grid;gap:clamp(1.2rem,2.4vw,1.7rem)}
.incl__i{position:relative;padding-left:1.5rem}
.incl__i::before{content:'';position:absolute;left:0;top:.62em;
  width:.6rem;height:1px;background:var(--gold)}
.incl dt{font-weight:500;font-size:var(--fs-body,1rem);line-height:1.45;
  letter-spacing:-0.01em;color:var(--ink)}
.incl dd{margin:.4rem 0 0;font-size:var(--fs-m);line-height:1.65;color:var(--t2)}

.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding-left:1.4rem;margin-bottom:.65rem;color:var(--t2)}
.ticks li::before{content:'';position:absolute;left:0;top:.8em;width:.6rem;height:1px;background:var(--gold)}

/* СТУДІЯ */
/* margin-top прибрано: над блоком лишався люфт 163px */
.studio{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,4rem);align-items:center}
/* height:auto обов'язковий: без нього HTML-атрибут height перемагає
   aspect-ratio і фото розтягується у вертикальну смугу */
.studio img{width:100%;height:auto}
@media(max-width:860px){.studio{grid-template-columns:1fr}}

/* МЕСЕНДЖЕРИ. Головний канал звʼязку: один тап замість пʼяти полів. */
.reach{margin:clamp(1.6rem,3vw,2.4rem) 0 0}
/* великий номер прибрано: телефон лишається у футері, а тут головним
   каналом працюють месенджери в один тап */
.msgr{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.7rem}
.msgr__b{display:inline-flex;align-items:center;gap:.55rem;min-height:48px;padding:0 1.15rem;
  border:1px solid var(--line);text-decoration:none;color:var(--ink);background:var(--paper);
  font-size:var(--fs-s);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .3s var(--e-ui),color .3s var(--e-ui)}
.msgr__b:hover{border-color:var(--gold);color:var(--gold)}
.msgr__b svg{flex:0 0 auto;color:var(--gold-ink)}
.msgr__b:hover svg{color:var(--gold)}
.reach__or{margin:1.4rem 0 0;max-width:44ch}

/* соцмережі у футері — іконками, поруч з рештою контактів.
   Селектор подвоєно навмисно: .foot a стоїть нижче по файлу
   з рівною специфічністю й перебивав би розміри іконок. */
.foot .soc{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;gap:.5rem}
.foot .soc a{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;min-height:44px;padding:0;
  border:1px solid rgba(250,248,244,.24);color:rgba(250,248,244,.72);
  transition:border-color .3s var(--e-ui),color .3s var(--e-ui)}
.foot .soc a:hover{border-color:var(--gold-soft);color:var(--gold-soft)}

/* =========================================================================
   ПРОБЛЕМА. Розрив між болем і містком тримає золота лінійка: без неї
   останній абзац читався б як четверта скарга, а не як поворот.
   ========================================================================= */
.s-prob{background:var(--paper-2)}
.prob__h{max-width:18ch}
.prob{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:start;margin-top:clamp(2rem,4vw,3rem)}
.prob__pain > p{margin:0 0 1.1rem;line-height:1.7;color:var(--t2)}
.prob__pain > p:last-child{margin-bottom:0}
.prob__pain .big{color:var(--ink);margin-bottom:1.4rem}
.prob__bridge{margin:0;padding-left:clamp(1.4rem,3vw,2.2rem);
  border-left:2px solid var(--gold);
  font-family:'Cormorant Garamond','Cormorant fallback',Georgia,serif;
  font-weight:300;font-size:clamp(1.35rem,1.1rem + .9vw,1.9rem);
  line-height:1.35;letter-spacing:-0.02em;color:var(--ink);max-width:30ch}
@media(max-width:860px){
  .prob{grid-template-columns:1fr;gap:1.8rem}
  .prob__bridge{max-width:none}
}

/* =========================================================================
   ДО / ПІСЛЯ. Два кадри лежать один на одному, верхній ріжеться
   clip-path. Керує справжній <input type="range">: він прозорий і
   розтягнутий на всю сцену, тож тягнеться мишею й пальцем, але при
   цьому лишається звичайним повзунком для клавіатури та зчитувача.
   ========================================================================= */
.s-ba{background:var(--paper)}
.ba__h{max-width:20ch}
.ba__sub{margin:1rem 0 0;font-size:var(--fs-m);color:var(--t2);max-width:44ch}
.ba{margin:clamp(2rem,4vw,3rem) 0 0}
.ba__stage{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--paper-3);touch-action:pan-y}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* --p веде і кроп верхнього кадру, і позицію лінії — одне джерело правди */
.ba__img--top{clip-path:inset(0 calc(100% - var(--p,50%)) 0 0)}
.ba__line{position:absolute;top:0;bottom:0;left:var(--p,50%);width:2px;
  margin-left:-1px;background:#FAF8F4;box-shadow:0 0 0 1px rgba(28,25,21,.28);
  pointer-events:none;z-index:3}
.ba__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:#FAF8F4;
  box-shadow:0 6px 24px rgba(28,25,21,.35);
  display:grid;place-items:center}
/* дві стрілки з рамок: без іконкового шрифту й без зайвого запиту */
.ba__grip::before,.ba__grip::after{content:'';position:absolute;
  width:7px;height:7px;border-top:1.5px solid var(--ink);border-right:1.5px solid var(--ink)}
.ba__grip::before{transform:rotate(-135deg);left:13px}
.ba__grip::after{transform:rotate(45deg);right:13px}
.ba__tag{position:absolute;top:clamp(.8rem,2vw,1.2rem);z-index:3;pointer-events:none;
  padding:.5rem .9rem;font-size:var(--fs-s);letter-spacing:.16em;text-transform:uppercase;
  color:#FAF8F4;background:rgba(28,25,21,.55);backdrop-filter:blur(6px)}
.ba__tag--l{left:clamp(.8rem,2vw,1.2rem)}
.ba__tag--r{right:clamp(.8rem,2vw,1.2rem)}
/* сам повзунок невидимий, але лишається повноцінним елементом керування */
.ba__range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;
  appearance:none;-webkit-appearance:none;background:none;cursor:ew-resize}
.ba__range:focus{outline:none}
.ba__range:focus-visible ~ .ba__line .ba__grip{box-shadow:0 0 0 3px var(--gold-ink),0 6px 24px rgba(28,25,21,.35)}
.ba__range::-webkit-slider-thumb{-webkit-appearance:none;width:56px;height:56px;
  background:none;border:0;cursor:ew-resize}
.ba__range::-moz-range-thumb{width:56px;height:56px;background:none;border:0;cursor:ew-resize}
.ba__range::-moz-range-track{background:none;border:0}
@media(max-width:600px){
  .ba__grip{width:44px;height:44px}
  .ba__grip::before{left:10px} .ba__grip::after{right:10px}
}

/* =========================================================================
   ЧАСТІ ЗАПИТАННЯ. Акордеон на нативних <details>: жодного JS, повна
   робота з клавіатури, і без скриптів усі відповіді просто розгорнуті.
   ========================================================================= */
.s-faq{background:var(--paper)}
.faq__h{max-width:24ch}
.faq{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i summary{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:start;
  padding:clamp(1.1rem,2.4vw,1.6rem) 0;cursor:pointer;list-style:none;
  font-family:'Manrope','Manrope fallback',sans-serif;
  font-size:clamp(1.02rem,.95rem + .3vw,1.2rem);font-weight:500;
  letter-spacing:-0.01em;line-height:1.4;min-height:44px;
  transition:color .25s var(--e-ui)}
/* стрілку браузера прибираємо в обох рушіях і малюємо власний знак */
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::marker{content:''}
.faq__i summary:hover{color:var(--gold-ink)}
.faq__i summary:focus-visible{outline:2px solid var(--gold-ink);outline-offset:4px}
/* плюс, що стає мінусом: дві риски, вертикальна ховається при відкритті */
.faq__i summary::after{content:'';grid-column:2;align-self:center;
  width:14px;height:14px;flex:0 0 auto;
  background:
    linear-gradient(var(--gold-ink),var(--gold-ink)) center/14px 1px no-repeat,
    linear-gradient(var(--gold-ink),var(--gold-ink)) center/1px 14px no-repeat;
  transition:transform .3s var(--e-ui),background-size .3s var(--e-ui)}
.faq__i[open] summary::after{transform:rotate(90deg);
  background-size:14px 1px,1px 0}
.faq__a{padding:0 0 clamp(1.1rem,2.4vw,1.6rem);max-width:68ch}
.faq__a p{margin:0;line-height:1.7;color:var(--t2)}
@media(prefers-reduced-motion:reduce){
  .faq__i summary::after{transition:none}
}

/* ФОРМА */
/* Блок «Або напряму» прибрано разом з усіма його стилями: він дублював
   телефон і пошту, які вже стоять вище великим номером і кнопками
   месенджерів. Контакти лишаються у футері. */

/* Заголовок з контактами ліворуч, форма праворуч. */
.contact{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(2rem,5vw,5rem);
  align-items:start}
@media(max-width:900px){.contact{grid-template-columns:1fr;gap:2rem}}

.form{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem 1.1rem;margin-top:0}
.f{display:grid;gap:.45rem;align-content:start}
.f.full{grid-column:1/-1}
.f label{font-size:var(--fs-m);letter-spacing:.04em}
/* нативний select випадав зі стилістики форми: свій шеврон і ті самі межі */
/* padding-left вирівняно з текстовими інпутами: браузер додавав свій відступ */
.f select{appearance:none;-webkit-appearance:none;padding-left:1rem;padding-right:2.8rem;text-indent:0;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237F5A11' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px 8px}
/* 16px обов'язково: на меншому iOS Safari зумить сторінку при фокусі */
.f input,.f select,.f textarea{width:100%;padding:.9rem 1rem;background:var(--paper);
  color:var(--ink);border:1px solid rgba(38,34,29,.22);border-radius:0;font:inherit;font-size:16px;
  transition:border-color .3s var(--e-ui),background-color .3s var(--e-ui),box-shadow .3s var(--e-ui)}
/* Шеврон селекта оголошуємо ПІСЛЯ спільного правила: там стоїть
   скорочення background, яке скидало background-image і робило select
   візуально невідрізним від текстового поля. */
.f select{appearance:none;-webkit-appearance:none;padding-right:2.8rem;
  background-color:var(--paper);
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237F5A11' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1rem center;background-size:12px 8px}
.f select:focus{background-color:#FFFDF9}
/* textarea розтягувалася на всі 1240px, коли інпути 611px:
   тримаємо її в ширині колонки форми */
.f textarea{min-height:118px;resize:vertical}
/* textarea і футер форми стають поруч: інакше два останні ряди
   лишали праву половину порожньою */
@media(min-width:641px){
  /* textarea і рядок кнопки на всю ширину: кнопка в правій колонці
     закінчувалася на ~140px вище за textarea і не читалася як фінал форми */
  /* форма скорочена до трьох полів: рядів «тип обʼєкта / площа» більше
     немає, і без цієї правки textarea лягала в область знятого поля */
  /* рядки пакуємо вгору: після скорочення форми до трьох полів вони
     розповзалися по висоті сусідньої колонки. Розтягувати замість цього
     поле задачі теж не годиться — воно просило б трактат замість двох слів. */
  .form{grid-template-areas:'n p' 'service service' 'm m' 'foot foot';align-content:start}
  .form .f:has(#n){grid-area:n}
  .form .f:has(#p){grid-area:p}
  .form .f:has(#lead-service){grid-area:service}
  .form .f:has(#m){grid-area:m}
  /* .form подвоєно навмисно: базове .form__foot{grid-column:1/-1} стоїть
     нижче по файлу й з рівною специфічністю перебивало grid-area,
     через що футер лягав поверх textarea */
  .form .form__foot{grid-area:foot;align-items:center;flex-direction:row;gap:1.2rem}
  .form .form__foot .state{flex:1 1 100%}
}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--gold-ink);
  background:#FFFDF9;box-shadow:0 0 0 3px rgba(127,90,17,.18)}
.f .hint{font-size:var(--fs-m);color:rgba(38,34,29,.78);margin:0}
.f .err{font-size:var(--fs-m);color:#9A3B12;margin:0}
.f.bad input,.f.bad select,.f.bad textarea{border-color:#9A3B12}
.form__foot{grid-column:1/-1;display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
/* підпис змінюється на «НАДСИЛАЄМО…» — без цього кнопка стрибала в ширині
   рівно в момент, коли на неї дивляться */
.form__foot .btn{min-width:16rem}
/* кнопка на всю ширину під повношириними полями: 57% і вирівнювання
   ліворуч робили її схожою на випадковий елемент */
@media(max-width:760px){
  .form__foot{align-items:stretch}
  .form__foot .btn{width:100%}
}
/* статус живе всередині .form__foot, одразу під кнопкою: раніше він
   виводився внизу лівої колонки за ~700px від того, хто натиснув */
.state{width:100%;margin:0;padding:.95rem 1.1rem;border:1px solid var(--line);
  font-size:var(--fs-m);background:var(--paper)}
.state[data-k="ok"]{border-color:var(--gold);color:var(--gold)}
.state[data-k="bad"]{border-color:#9A3B12;color:#9A3B12}
@media(max-width:640px){.form{grid-template-columns:1fr}}

/* Обіцянка під кнопкою. Кругле фото 56px поруч зі словом «особисто» —
   саме той випадок, де мініатюра переконує краще за великий портрет. */
.promise{display:flex;align-items:center;gap:.9rem;max-width:58ch}
.promise__ava{flex:0 0 auto;width:56px;height:56px;border-radius:50%;
  object-fit:cover;border:1px solid var(--line)}
.promise__t{margin:0;display:flex;flex-direction:column;gap:.25rem}
.promise__t b{font-weight:500;color:var(--ink)}
.promise__t span{color:var(--t2)}

/* Ілюстрацію процесу замінено на відео-смугу .amb.full — окремі правила
   для статичної картинки більше не потрібні. */

/* АМБІЄНТНА СМУГА. Спокійний 8-секундний цикл між секціями.
   Відео вантажиться лише коли смуга входить у вьюпорт (src ставить скрипт),
   тож на початковий шлях сторінки воно не впливає взагалі. */
.amb{position:relative;margin:0;overflow:hidden;background:var(--paper-3)}
.amb img,.amb video{position:absolute;inset:0}
.amb video{opacity:0;transition:opacity .8s var(--e-ui)}
.amb video.on{opacity:1}
.amb figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:clamp(.8rem,2vw,1.2rem) clamp(1rem,3vw,1.6rem);
  font-size:var(--fs-m);letter-spacing:.14em;text-transform:uppercase;color:#FAF8F4;
  background:linear-gradient(to top,rgba(28,25,21,.55),transparent)}
/* повноширинна смуга дихає полем сітки, вкладена в колонку — своїм */
.amb.full{margin-top:clamp(2rem,4vw,3.2rem)}
.amb.full figcaption{padding-inline:var(--gut)}
/* Смуга-заставка між героєм і флагманом: прямий нащадок <main>, а не
   комірка сітки, тому поле під підпис задаємо самі. Правило стоїть саме
   тут, після .amb figcaption — вище по файлу воно програвало б йому
   з рівною специфічністю, і підпис прилипав до краю екрана. */
.amb--band{margin:0}
.amb--band figcaption{padding-inline:var(--gut)}
.flag__text .amb{margin-top:clamp(1.4rem,3vw,2rem)}
/* без анімації лишається стоп-кадр: відео не підвантажується взагалі */
@media (prefers-reduced-motion:reduce){.amb video{display:none}}

/* Рядок дії в кінці секції. Кнопка з короткою реплікою поруч, а не
   самотня кнопка посеред поля — так вона читається як продовження думки. */
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;max-width:none;
  margin:clamp(2rem,4vw,3rem) 0 0}
.cta-row--center{justify-content:center;text-align:center}
.cta-row__note{font-size:var(--fs-m);color:var(--t2)}
@media(max-width:520px){
  .cta-row{flex-direction:column;align-items:stretch;text-align:left}
  .cta-row .btn{width:100%}
  .cta-row--center{text-align:center}
}

/* ФУТЕР */
.foot{background:var(--ink);color:#FAF8F4;padding:4rem 0 1.6rem}
.foot .mark{color:var(--gold-soft)}
/* пропорції ті самі, що в шапці: висота задана, ширина рахується сама */
.foot__logo{display:block;height:clamp(42px,4.2vw,56px);width:auto;margin-bottom:1.4rem}
/* остання колонка притиснута до правого краю: раніше вона обривалася
   на x=1010 при краї контейнера 1340 і лишала ~330px порожнечі */
.foot__in > div:last-child{justify-self:end;text-align:right}
.foot__in{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;gap:2rem;padding-bottom:1.6rem}
/* h4 у футері йшли одразу після h2 і ламали порядок заголовків: тепер це
   h2 з тим самим виглядом, який був у h4 */
.foot .foot__h{font-size:var(--fs-s);letter-spacing:.14em;text-transform:uppercase;
  font-family:'Manrope','Manrope fallback',sans-serif;
  color:rgba(250,248,244,.6);margin:0 0 .9rem;font-weight:600}
/* однаковий крок рядків: посилання давали 44px, а текст 33px,
   і колонка «Контакти» йшла нерівним ритмом */
.foot p{display:flex;align-items:center;min-height:44px;font-size:var(--fs-m);
  margin:0;color:rgba(250,248,244,.82)}
/* географія у футері — абзац на кілька рядків, а не рядок таблиці:
   flex + min-height:44px тут дали б вертикальне центрування й зайвий люфт */
.foot .foot__geo{display:block;min-height:0;line-height:1.6;
  margin:.6rem 0 .2rem;max-width:34ch;color:rgba(250,248,244,.66)}
/* тач-зона не менше 44px */
.foot a{display:flex;align-items:center;min-height:44px;font-size:var(--fs-m);
  text-decoration:none;color:rgba(250,248,244,.82);transition:color .3s var(--e-ui)}
.foot a:hover{color:var(--gold-soft)}
.contact-direct a{display:inline-flex;align-items:center;min-height:44px}
/* «©» був inline-боксом 18px, «Нагору» flex-боксом 44px: центри
   розходилися на 11px. Тепер обидва на одній осі. */
.foot__b{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding-top:1.4rem;border-top:1px solid rgba(250,248,244,.16);
  font-size:var(--fs-s);color:rgba(250,248,244,.6)}
/* gap обов'язковий: flex робить кожен вузол окремим елементом
   і пробіли між ними зникають, виходило "©2026BORTNITSKYSTUDIO" */
.foot__b p{margin:0;display:flex;align-items:center;gap:.35em;min-height:44px}
/* скидання правого вирівнювання: на вузькому екрані колонка «Розділи»
   висіла біля правого краю з порожньою лівою половиною */
@media(max-width:760px){
  .foot__in{grid-template-columns:1fr 1fr}
  /* stretch, а не start: при start колонка стискалася до ширини змісту (66px) */
  .foot__in > div:last-child{justify-self:stretch;text-align:left}
}
@media(max-width:480px){.foot__in{grid-template-columns:1fr}}

/* ЗЕРНО */
/* без mix-blend-mode: він змушував перемальовувати весь вьюпорт щокадру */
.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Хореографія заголовкових блоків: ейбрау -> заголовок -> текст -> кнопка
   входять послідовно, а не всі разом одним куском. */
.rv:has(> .lbl){transform:none}
.rv:has(> .lbl) > *{opacity:0;transform:translateY(26px);
  transition:opacity .75s var(--e-in),transform .75s var(--e-in)}
.rv.in:has(> .lbl) > *{opacity:1;transform:none}
.rv.in:has(> .lbl) > *:nth-child(1){transition-delay:0s}
.rv.in:has(> .lbl) > *:nth-child(2){transition-delay:.1s}
.rv.in:has(> .lbl) > *:nth-child(3){transition-delay:.2s}
.rv.in:has(> .lbl) > *:nth-child(4){transition-delay:.3s}
.rv.in:has(> .lbl) > *:nth-child(5){transition-delay:.4s}

/* поява: три різні дистанції й тривалості, щоб читалася хореографія,
   а не один і той самий ефект на всіх блоках */
/* тривалості скорочені: найгірший випадок був 1.55s зі стагером,
   і на швидкому скролі секція встигала побути порожньою */
.rv{opacity:0;transform:translateY(46px);transition:opacity .6s var(--e-in),transform .6s var(--e-in)}
.rv.in{opacity:1;transform:none}
.rv--near{transform:translateY(20px);transition-duration:.45s}
.rv--far{transform:translateY(72px);transition-duration:.75s}
.rv--left{transform:translate(-34px,18px);transition-duration:1s}
.rv--right{transform:translate(34px,18px);transition-duration:1s}
/* на вузькому екрані горизонтальний зсув розширював документ до 408px
   і був недоречним: лишаємо тільки вертикальний */
@media(max-width:900px){
  .rv--left,.rv--right{transform:translateY(24px)}
}
/* сітка флагмана і портфоліо: каскад по картках */
.flag__grid .rv.in{transition-delay:calc(var(--i,0) * 90ms)}
.work .rv.in{transition-delay:calc(var(--i,0) * 70ms)}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gold);color:#FDFBF7;padding:.7rem 1rem}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* тач-зона 44px і контраст 5.4:1 на теплій бумазі */
.lnk{display:inline-flex;align-items:center;min-height:44px;
  color:var(--gold-ink);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .3s var(--e-ui)}
.lnk:hover{border-bottom-color:var(--gold-ink)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .band img{height:100%;transform:none!important}
}