/* ============================================================
   DA—GRAF — роспись стен, Майкоп
   Сигнатура: сетка переноса эскиза на стену.
   ============================================================ */

:root{
  --concrete:   #E8E6E1;
  --concrete-2: #DAD7D0;
  --ink:        #0B0B0B;
  --ink-2:      #4A4844;
  --chalk:      #F7F6F3;

  --display: 'Unbounded', system-ui, sans-serif;
  --body:    'Golos Text', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --cell: 1px;
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
  cursor:auto;
}

body{
  margin:0;
  background:var(--concrete);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.95rem + .25vw,1.0625rem);
  line-height:1.6;
  overflow-x:clip;
  cursor:auto;
}

/* системный курсор — кастомного валика больше нет */
a,button,.btn,[role="button"],.srf__row,.burger{ cursor:pointer; }
input,textarea,select{ cursor:text; }

img,svg{ display:block; max-width:100%; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }

.mono{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:500;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--chalk); padding:.75rem 1.25rem;
}
.skip:focus{ left:0; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* клякса по клику — чистый CSS, без PNG пользователя */
.blot{
  position:absolute; z-index:2;
  width:52px; height:48px;
  margin:-26px 0 0 -26px;
  background-color:var(--ink);
  border-radius:58% 42% 60% 40% / 48% 55% 45% 52%;
  pointer-events:none;
  opacity:.9;
  will-change:transform, opacity;
}
.blot--chalk{ background-color:var(--chalk); }
.blot--dot{
  width:10px; height:10px; margin:-5px 0 0 -5px;
  border-radius:50%;
  opacity:.75;
}

/* ---------- кнопки ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  padding:.9rem 1.5rem; border:1.5px solid var(--ink);
  background:transparent; color:var(--ink);
  transition:background-color .3s var(--ease), color .3s var(--ease);
  will-change:transform;
}
.btn--lg{ padding:1.15rem 2.25rem; }
.btn--ink{ background:var(--ink); color:var(--chalk); }
.btn--chalk{ background:var(--chalk); color:var(--ink); border-color:var(--chalk); }

/* Ховеры — только там, где есть мышь.
   На телефоне :hover залипает на последнем тронутом элементе, и кнопка
   «К пустой стене» становилась нечитаемой: `.hero__actions .btn:not(.btn--ink)`
   (специфичность 0,3,0) перебивал ФОН у `.btn--ghost:hover` (0,2,0), а ЦВЕТ
   текста нет — получался почти белый текст на светлом бетоне.
   Здесь же чиним и саму специфичность для десктопа. */
@media (hover: hover) and (pointer: fine){
  .btn--ink:hover{ background:#000; border-color:#000; }
  .btn--chalk:hover{ background:#000; border-color:#000; color:var(--chalk); }
  .btn--ghost:hover,
  .hero__actions .btn--ghost:hover{ background:var(--ink); color:var(--chalk); }
}

/* ---------- плейсхолдеры под фото ---------- */
.ph{
  position:relative; display:grid; place-items:center;
  background:var(--ink); color:var(--chalk);
  background-image:
    linear-gradient(to right, rgba(247,246,243,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247,246,243,.10) 1px, transparent 1px);
  background-size:14.28% 14.28%;
}
.ph .mono{ opacity:.5; }
.ph--tall{ aspect-ratio:3/4; }
.ph--wide{ aspect-ratio:16/10; }
.ph--sq{ aspect-ratio:1/1; }

/* ============================================================
   ШАПКА
   ============================================================ */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; gap:2rem;
  padding:1rem var(--gut);
  mix-blend-mode:normal;
  transition:background-color .4s var(--ease), border-color .4s var(--ease),
    opacity .5s var(--ease), transform .5s var(--ease);
  border-bottom:1px solid transparent;
}
.topbar.is-stuck{
  background:rgba(232,230,225,.9);
  backdrop-filter:blur(10px);
  border-bottom-color:rgba(11,11,11,.14);
}
.topbar--deferred{
  opacity:0;
  pointer-events:none;
  transform:translateY(-14px);
}
.topbar.is-shown{
  opacity:1;
  pointer-events:auto;
  transform:none;
}

/* Знак в шапке — монограммная плитка «DA» плюс слово. Без трафаретной
   перемычки: на 34 px она съедает половину букв. Перемычка живёт в подвале,
   где кегль позволяет её прочитать. */
.brand{ display:flex; align-items:center; gap:.45rem; text-decoration:none; }
.brand__tile{
  display:grid; place-items:center;
  width:2.3rem; height:2.3rem; flex:none;
  background:var(--ink); color:var(--chalk);
  font-family:var(--display); font-weight:900;
  font-size:.95rem; letter-spacing:-.06em; line-height:1;
  padding-right:.06em;
}
.brand__word{
  font-family:var(--display); font-weight:900; font-size:1.25rem;
  letter-spacing:-.055em;
}

.nav{ display:flex; gap:1.75rem; margin-left:auto; }
.nav a{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none; padding:.25rem 0;
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease);
}
.nav a:hover{ border-bottom-color:var(--ink); }

.topbar__cta{ padding:.7rem 1.1rem; }

.burger{
  position:relative;
  display:none; width:34px; height:34px; padding:0;
  background:none; border:1.5px solid var(--ink);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
/* рамка остаётся 34px, зона нажатия — 46px (минимум для пальца) */
.burger::after{ content:''; position:absolute; inset:-6px; }
.burger span{ display:block; width:16px; height:1.5px; background:var(--ink); }

.mobilemenu{
  position:fixed; inset:0; z-index:99;
  background:var(--concrete);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.25rem;
  padding:5.5rem 1.5rem 2rem;
  box-sizing:border-box;
  overflow-y:auto;
}
.mobilemenu[hidden]{ display:none; }
.mobilemenu a{
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.25rem, 6.5vw, 1.75rem);
  text-transform:uppercase; text-decoration:none; letter-spacing:-.03em;
  text-align:center;
  max-width:100%;
  line-height:1.15;
}
.mobilemenu a[href="#brief"]{
  margin-top:.75rem;
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; max-width:18rem;
  padding:.9rem 1rem;
  background:var(--ink); color:var(--chalk);
  font-size:clamp(1rem, 4.8vw, 1.2rem);
  letter-spacing:-.02em;
}

/* ============================================================
   HERO — чёрный уходит лентой/градиентом → сетка, текст снизу
   ============================================================ */
.hero{
  position:relative;
  height:auto;
  padding:0;
  margin:0;
  isolation:isolate;
}
/* Высота — по МАЛОМУ вьюпорту (svh), то есть по состоянию «адресная строка
   видна». ScrollTrigger меряет слот в распорке один раз, а `dvh` и подгонка
   min-height по visualViewport растут, когда мобильный браузер схлопывает
   адресную строку. Тогда зафиксированный блок вылезал за свой слот и наезжал
   на бегущую строку. С svh он не превышает слот НИКОГДА, а лишнюю полосу
   снизу закрывает бетонный фон распорки (#hero .pin-spacer ниже). */
.hero__sticky{
  position:relative;
  height:100vh;
  height:100svh;
  overflow:hidden;
  background:var(--concrete);
  z-index:5;
  isolation:isolate;
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
/* Распорку под пин ScrollTrigger создаёт сам и держит ровно на высоту пина.
   Красим её бетоном: если адресная строка схлопнулась и снизу открылась полоса
   выше sticky — там будет бетон, а не бегущая строка. Как только пин кончился,
   распорка уезжает вместе с секцией и ticker открывается сам.
   Ни z-index, ни классов по таймеру — только геометрия потока. */
#hero .pin-spacer{ background:var(--concrete); }

.hero__base{
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
  background:var(--concrete);
}
.hero__rules{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(11,11,11,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,11,11,.07) 1px, transparent 1px);
  background-size:clamp(60px,8vw,120px) clamp(60px,8vw,120px);
}

/* чёрная «лента»: сплошной верх + очень длинный мягкий хвост */
.hero__ink{
  position:absolute;
  left:0; right:0; top:0;
  height:calc(100% + 120vh);
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    var(--ink) 0%,
    var(--ink) calc(100% - 120vh),
    rgba(11,11,11,.82) calc(100% - 100vh),
    rgba(11,11,11,.64) calc(100% - 80vh),
    rgba(11,11,11,.46) calc(100% - 60vh),
    rgba(11,11,11,.3) calc(100% - 42vh),
    rgba(11,11,11,.16) calc(100% - 26vh),
    rgba(11,11,11,.07) calc(100% - 12vh),
    transparent 100%
  );
  will-change:transform;
  transform:translate3d(0,0,0);
}

.hero__logo{
  position:absolute;
  left:50%;
  top:42vh; /* в координатах sticky; едет вверх вместе с лентой */
  z-index:2;
  display:flex; align-items:center; gap:clamp(1rem, 2.4vw, 1.6rem);
  transform:translate(-50%,-50%);
  will-change:opacity;
}
.hero__logo-tile{
  display:grid; place-items:center;
  width:clamp(5.8rem, 14vw, 11rem);
  height:clamp(5.8rem, 14vw, 11rem);
  background:#fff;
  color:var(--ink);
  font-family:var(--display); font-weight:900;
  font-size:clamp(2.1rem, 5vw, 3.9rem);
  letter-spacing:-.04em;
  line-height:1;
}
.hero__logo-word{
  font-family:var(--display); font-weight:900;
  font-size:clamp(5.2rem, 18vw, 14rem);
  letter-spacing:-.05em;
  line-height:1;
  color:#fff;
  text-transform:uppercase;
}

.hero__scene{
  position:absolute; inset:0; z-index:4;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(5.5rem,12vh,8rem) var(--gut) clamp(2rem,5vh,3.5rem);
  pointer-events:none;
}
.hero__scene.is-live{ pointer-events:auto; }

/* билборд: нога столба на нижнем крае первого экрана (bottom:0).
   Интро: JS опускает блок, видна полоска; к первому экрану — y:0, без сдвига вверх.
   Текст сцены выше по z-index, если столб пересекает заголовок. */
.hero__billboard{
  position:absolute;
  left:50%;
  top:auto;
  bottom:0;
  right:auto;
  width:min(54vw, 47.5rem);
  z-index:1;
  pointer-events:none;
  opacity:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  transform:translate(-50%, 85vh);
  filter:drop-shadow(0 18px 28px rgba(11,11,11,.18));
  will-change:transform, opacity;
}
.hero__billboard picture,
.hero__billboard img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  max-height:none;
  object-fit:contain;
  object-position:center bottom;
}

/* Десктоп: столб подрезан кадром, щит опущен в экран.
   Картинка 635x1032 — щит занимает строки 85..377, остальное столб. При
   bottom:0 полная высота (w * 1032/635) выталкивала щит за верхний край:
   на 1920x1080 при ширине 760px срезало 53px, при 960px — 351px.
   Показываем только верхние 780 строк из 1032 (aspect-ratio 635/780) через
   object-fit:cover + object-position:center top. Щит целиком в кадре,
   ширину можно поднять до 60rem. Столб уходит за нижний край — низ кадра
   и так был плоским срезом столба, отдельной «ноги» на картинке нет.
   Только для min-width:901px — мобильные правила ниже по файлу не трогаем. */
@media (min-width:901px){
  .hero__billboard{
    width:min(54vw, 60rem);
    aspect-ratio:635 / 780;
  }
  .hero__billboard picture,
  .hero__billboard img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
  }
}

.hero__eyebrow{
  position:relative; z-index:5;
  margin:0 0 1rem;
  color:var(--ink);
  width:max-content;
  max-width:min(100%, 38rem);
  flex:none;
  opacity:0;
  font-weight:600;
  text-shadow:
    0 0 8px var(--concrete),
    0 0 16px var(--concrete),
    1px 0 0 var(--concrete),
    -1px 0 0 var(--concrete),
    0 1px 0 var(--concrete),
    0 -1px 0 var(--concrete);
}
.hero__eyebrow::before{
  content:'';
  position:absolute;
  inset:-.35rem -.7rem;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse 130% 160% at 50% 50%,
    rgba(232,230,225,.95) 0%,
    rgba(232,230,225,.78) 48%,
    rgba(232,230,225,.4) 72%,
    transparent 86%);
}
.hero__side{
  position:absolute; right:var(--gut); top:50%; z-index:4;
  transform:translate(50%,-50%) rotate(90deg);
  transform-origin:center; color:var(--ink-2); margin:0;
  white-space:nowrap;
  opacity:0;
}

.hero__stage{
  position:relative; z-index:2;
  display:block;
  width:100%;
  overflow:visible;
  flex:none;
  margin-bottom:clamp(1rem,3vh,2rem);
  opacity:0;
}
/* Заголовок чёрный, а билборд под ним несёт собственную чёрную графику
   («DA GRAF» на щите) — буквы сливались в кашу. Тот же приём, что у лида:
   мягкое бетонное пятно под текстом, края растворяются. */
.hero__stage::before{
  content:'';
  position:absolute;
  inset:-.6rem -1.1rem -.5rem -1.1rem;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse 118% 128% at 42% 50%,
    rgba(232,230,225,.97) 0%,
    rgba(232,230,225,.9) 46%,
    rgba(232,230,225,.62) 70%,
    rgba(232,230,225,.24) 85%,
    transparent 95%);
}

.hero__transfer{
  position:absolute;
  left:0; top:-8%;
  width:min(100%, 52rem);
  height:116%;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-template-rows:repeat(6, 1fr);
  gap:0;
  pointer-events:none;
  z-index:3;
}
.hero__transfer span{
  background:rgba(232,230,225,.92);
  border:1px solid rgba(11,11,11,.08);
  opacity:1;
}

.hero__title{
  position:relative; z-index:2; margin:0;
  font-family:var(--display); font-weight:900;
  /* Самая длинная строка H1 «РОСПИСЬ СТЕН» — 9.74em; делитель 10.2 с запасом.
     Формула общая для всех ширин, поэтому на планшете заголовок больше
     не проваливается до мобильного кегля. */
  font-size:clamp(1.5rem, min(10vw, 16vh, calc((100vw - 2 * var(--gut)) / 10.5)), 9.5rem);
  line-height:.92; letter-spacing:-.045em;
  text-transform:uppercase;
  text-align:left;
  /* без потолка в 58 %: строка «РОСПИСЬ СТЕН» при нём переносилась и H1
     разваливался на четыре визуальные строки на 900–1400px. Кегль считается
     от ширины контента (см. font-size), поэтому строка всегда влезает целиком. */
  max-width:100%;
  color:var(--ink);
  overflow:visible;
}
.hero__line{
  display:block;
  position:relative;
  overflow:visible;
  white-space:nowrap;
}
.hero__ghost{
  position:absolute; inset:0;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(11,11,11,.38);
  user-select:none;
  pointer-events:none;
}
/* текст контура — из атрибута, чтобы не дублировать фразу H1 в разметке */
.hero__ghost::before{ content:attr(data-text); }
.hero__fill{
  position:relative;
  color:var(--ink);
  -webkit-clip-path:inset(115% -14% -42% -14%);
  clip-path:inset(115% -14% -42% -14%);
  will-change:clip-path;
}
.hero__title.is-painted .hero__fill{
  -webkit-clip-path:none;
  clip-path:none;
  color:var(--ink);
}
.hero__title.is-painted .hero__ghost{
  opacity:0;
  visibility:hidden;
}
.hero__stage.is-painted .hero__transfer{
  display:none;
  opacity:0;
  visibility:hidden;
}

.hero__foot{
  position:relative; z-index:4;
  display:grid; gap:1.25rem;
  grid-template-columns:minmax(0,26rem) auto;
  align-items:end;
  flex:none;
  opacity:0;
}
.hero__lead{
  position:relative;
  z-index:5;
  margin:0;
  max-width:26rem;
  color:var(--ink);
  text-shadow:
    0 0 10px var(--concrete),
    0 0 18px var(--concrete),
    1px 0 0 var(--concrete),
    -1px 0 0 var(--concrete),
    0 1px 0 var(--concrete),
    0 -1px 0 var(--concrete);
}
.hero__lead::before{
  content:'';
  position:absolute;
  inset:-.55rem -.9rem;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse 125% 110% at 50% 50%,
    rgba(232,230,225,.94) 0%,
    rgba(232,230,225,.82) 40%,
    rgba(232,230,225,.5) 68%,
    transparent 84%);
}
.hero__actions{ display:flex; gap:.75rem; flex-wrap:wrap; }
.hero__actions .btn:not(.btn--ink){
  background:var(--concrete);
}

.hero__price{
  grid-column:1/-1;
  margin:0;
  border-top:1px solid rgba(11,11,11,.2);
  padding-top:1rem;
}
/* Подложка ровно под текстом. Клякса — PNG фиксированной формы, и если строка
   оказывается шире неё (запасной моноширинный шрифт на телефоне шире
   JetBrains Mono), хвост белого текста уезжает на светлый бетон и пропадает.
   Чёрный фон (клякса тоже чистый #000, шва не видно) гарантирует подложку. */
.hero__price-wrap{
  position:relative;
  display:inline-block;
  max-width:100%;
  padding:.55em 1.1em .65em;
  background:#000;
}
.hero__price-blot{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:118%;
  min-width:100%;
  height:160%;
  min-height:100%;
  z-index:0;
  pointer-events:none;
}
.hero__price-blot picture,
.hero__price-blot img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.hero__price-text{
  position:relative;
  z-index:1;
  color:#fff;
  -webkit-text-fill-color:#fff;
  white-space:nowrap;
}
.hero__price-num{
  color:#fff;
  -webkit-text-fill-color:#fff;
  font-size:1.1rem;
}

/* ============================================================
   БЕГУЩАЯ СТРОКА
   ============================================================ */
.ticker{
  position:relative;
  z-index:0;
  background:var(--ink); color:var(--chalk);
  overflow:hidden; padding:.9rem 0;
  /* isolация: иначе transform у pin-соседей иногда «глушит» анимацию на iOS */
  transform:translateZ(0);
  /* ниже pinned hero — иначе бегущая строка «проступает» в щели под sticky */
  contain:paint;
}
.ticker__track{
  display:flex; align-items:center; gap:1.5rem; width:max-content;
  will-change:transform;
  backface-visibility:hidden;
  animation:ticker 18s linear infinite;
  -webkit-animation:ticker 18s linear infinite;
}
.ticker__track span{
  font-family:var(--display); font-weight:700; font-size:clamp(1rem,2.8vw,1.6rem);
  text-transform:uppercase; letter-spacing:-.02em; white-space:nowrap;
  flex:none;
}
.ticker__track i{ width:9px; height:9px; background:var(--chalk); flex:none; }
@keyframes ticker{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}
@-webkit-keyframes ticker{
  from{ -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); }
  to{ -webkit-transform:translate3d(-50%,0,0); transform:translate3d(-50%,0,0); }
}

/* ============================================================
   ОБЩЕЕ ДЛЯ СЕКЦИЙ
   ============================================================ */
.sec{ padding:clamp(4.5rem,12vh,9rem) var(--gut); }

/* Заголовок занимает всю ширину — на таком кегле любая вторая колонка
   гарантированно окажется под буквами. Пояснение уходит строкой ниже. */
.sec__head{
  display:grid; gap:1.5rem;
  margin-bottom:clamp(2.5rem,6vh,4.5rem);
  min-width:0;
}
.sec__head > *{ min-width:0; max-width:100%; }
/* Кегль заголовка считаем от ширины КОНТЕНТА, а не от 100vw: самое длинное
   слово «РАСПИСЫВАЕМ» в Unbounded 900 занимает ~10.26em, маска ревила режет
   всё, что шире (overflow:hidden). Делитель 10.6 — запас ~3 %.
   Одна формула на все ширины: пропадает разрыв на границе 900px, где раньше
   заголовок падал с 83px до 34px. */
.sec__title{
  margin:0;
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.6rem, min(9.2vw, calc((100vw - 2 * var(--gut)) / 10.6)), 7.5rem);
  line-height:.86; letter-spacing:-.04em; text-transform:uppercase;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.sec__title--chalk{ color:var(--chalk); }
.sec__kicker{
  position:relative; display:inline-block; margin:0; color:var(--ink);
  padding:.12em 0; z-index:0; max-width:100%;
}
.wall .sec__kicker,
.brief .sec__kicker{ color:var(--chalk); }
.sec__note{
  margin:0; color:var(--ink-2);
  max-width:min(24rem, 100%);
  justify-self:start; text-align:left;
}
.sec__note--chalk{ color:var(--chalk); }

/* сплит-ревил заголовков */
.reveal__mask{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  padding-bottom:.08em;
  margin-bottom:-.08em;
  white-space:nowrap; /* слово целиком — не режем «РАСПИСЫВАЕМ» */
  max-width:100%;
}
.reveal__char{
  display:inline-block;
  will-change:transform, opacity;
  white-space:nowrap;
}

/* ============================================================
   ПОВЕРХНОСТИ
   ============================================================ */
.surfaces{ position:relative; }

.srf__row{
  position:relative;
  display:grid; align-items:baseline; gap:1rem;
  grid-template-columns:minmax(0,14rem) minmax(0,1fr) auto;
  padding:clamp(1.25rem,2.5vw,2rem) clamp(.75rem,2vw,1.5rem);
  border-top:1px solid rgba(11,11,11,.2);
  isolation:isolate;
  text-decoration:none; color:inherit;
}
/* строки — ссылки на страницы услуг, поэтому :last-child берём у <li> */
.srf > li:last-child .srf__row{ border-bottom:1px solid rgba(11,11,11,.2); }
.srf__row::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--ink);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.srf__row:hover::before{ transform:scaleX(1); }
.srf__row > *{ transition:color .3s var(--ease); }
.srf__row:hover > *{ color:var(--chalk); }

.srf__mat{ color:var(--ink-2); }
.srf__name{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.15rem,2.6vw,2.1rem);
  letter-spacing:-.025em; line-height:1.1;
}
.srf__price{ font-size:.85rem; white-space:nowrap; }

.srf__preview{
  position:fixed; top:0; left:0; z-index:5;
  width:min(20vw,230px); aspect-ratio:4/5;
  background:var(--ink); color:var(--chalk);
  background-image:
    linear-gradient(to right, rgba(247,246,243,.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247,246,243,.1) 1px, transparent 1px);
  background-size:20% 20%;
  display:grid; place-items:center;
  pointer-events:none; opacity:0;
  will-change:transform;
}
.srf__preview .mono{ opacity:.6; }

/* ============================================================
   РАБОТЫ — фото объекта + пустой слот под следующую стену
   ============================================================ */
.wall{ background:var(--ink); color:var(--chalk); position:relative; overflow:hidden; }

/* 64rem = 1024px — натуральная ширина office-wall.jpg. Без потолка на
   1920/2560 кадр растягивался в 1.7–2.4× и заметно мылил. */
.work{
  margin:0 0 clamp(1.75rem,4vh,2.75rem);
  min-width:0;
  max-width:min(100%, 64rem);
}
.work__frame{
  border:1px solid rgba(247,246,243,.22);
  overflow:hidden;
  background:#1a1a1a;
}
.work__frame picture,
.work__frame img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
}
.work__cap{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.45rem 1.5rem;
  justify-content:space-between;
  padding:1rem 0 0;
  min-width:0;
}
.work__name{
  margin:0;
  font-family:var(--display); font-weight:700;
  font-size:clamp(.95rem, 2.4vw, 1.35rem);
  letter-spacing:-.02em; line-height:1.2;
  text-transform:uppercase;
  max-width:100%;
}
.work__meta{
  margin:0;
  color:rgba(247,246,243,.5);
}

.wall__stage{
  position:relative;
  min-height:clamp(10rem,26vh,16rem);
  border:1px solid rgba(247,246,243,.22);
  display:grid; place-items:center;
  overflow:hidden;
  margin-bottom:clamp(1.75rem,4vh,2.75rem);
}
.wall__grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(247,246,243,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247,246,243,.08) 1px, transparent 1px);
  background-size:clamp(48px,7vw,96px) clamp(48px,7vw,96px);
}
.wall__ghost{
  position:relative; z-index:1; margin:0; text-align:center;
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.75rem,6vw,4.5rem);
  line-height:.92; letter-spacing:-.04em; text-transform:uppercase;
  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.5px rgba(247,246,243,.35);
}
.wall__mark{
  position:absolute; left:1.25rem; bottom:1.1rem; z-index:1;
  color:rgba(247,246,243,.45);
}
.wall__cta{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:1.25rem 2rem; justify-content:space-between;
}
.wall__lead{
  margin:0; max-width:28rem;
  color:var(--chalk);
}

/* ============================================================
   КАК РАБОТАЕМ
   ============================================================ */
.steps{
  display:grid; gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.step{ border-top:2px solid var(--ink); padding-top:1.25rem; }
.step__num{ display:block; color:var(--ink); font-size:.9rem; margin-bottom:.75rem; }
.step__name{
  margin:0 0 .6rem;
  font-family:var(--display); font-weight:700; font-size:1.5rem;
  letter-spacing:-.025em;
}
.step__text{ margin:0 0 1.25rem; color:var(--ink-2); font-size:.95rem; }
.step__time{ color:var(--ink-2); }

/* ============================================================
   ДВОЕ
   ============================================================ */
.about__grid{
  display:grid; gap:clamp(1.5rem,3vw,2.5rem);
  /* max 22.5rem на колонку — на широких мониторах кадры не раздуваются до 1fr */
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),22.5rem));
}
.person__name{
  margin:1.25rem 0 .3rem;
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.75rem,4vw,3rem); letter-spacing:-.035em; text-transform:uppercase;
}
.person__photo{
  position:relative;
  aspect-ratio:2/3; /* общий портретный кадр для Дарьи и Арины */
  width:100%;
  overflow:hidden;
  background:var(--ink);
}
.person__photo picture{
  display:block;
  width:100%;
  height:100%;
}
.person__photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;   /* иначе global img{max-width:100%} + height:100% растягивает */
  max-height:none;
  object-fit:cover;
  object-position:center top;
}
.person__role{ margin:0 0 .9rem; color:var(--ink); }
.person__text{ margin:0; color:var(--ink-2); font-size:.95rem; max-width:22rem; }

/* ============================================================
   СТРАНИЦА УСЛУГИ (rospis-fasadov, rospis-interyera, …)
   Без pin и scroll-story: шапка сразу видна, первый экран — обычный блок.
   ============================================================ */
/* Первый экран страницы услуги — чёрный, поэтому шапка со старта на подложке:
   иначе чёрная плитка «DA» и чёрный текст навигации сливаются с фоном. */
.page .topbar{
  opacity:1; pointer-events:auto; transform:none;
  background:rgba(232,230,225,.94);
  backdrop-filter:blur(10px);
  border-bottom-color:rgba(11,11,11,.14);
}

.phero{
  background:var(--ink); color:var(--chalk);
  padding:calc(clamp(4.5rem,11vh,7rem) + 3.25rem) var(--gut) clamp(3rem,8vh,5rem);
}
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .55rem;
  margin:0 0 1.75rem; color:rgba(247,246,243,.6);
}
.crumbs a{ text-decoration:none; border-bottom:1px solid rgba(247,246,243,.3); }
.crumbs a:hover{ border-bottom-color:var(--chalk); color:var(--chalk); }
.crumbs span[aria-current]{ color:var(--chalk); }

.phero__title{
  margin:0 0 1.25rem;
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.6rem, min(8vw, calc((100vw - 2 * var(--gut)) / 10.6)), 5.5rem);
  line-height:.9; letter-spacing:-.04em; text-transform:uppercase;
  max-width:20ch;
}
.phero__lead{
  margin:0; max-width:42rem;
  color:rgba(247,246,243,.72);
  font-size:clamp(1rem,1.6vw,1.12rem);
}
.phero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem; }
.phero__ghost{
  border-color:rgba(247,246,243,.5);
  color:var(--chalk);
}
.phero__ghost:hover{
  background:var(--chalk); color:var(--ink); border-color:var(--chalk);
}
.phero__facts{
  display:grid; gap:1.25rem clamp(1.5rem,3vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  margin-top:2.75rem; padding-top:1.75rem;
  border-top:1px solid rgba(247,246,243,.2);
}
.phero__fact b{
  display:block; margin-bottom:.2rem;
  font-family:var(--display); font-weight:700; font-size:clamp(1.2rem,2.4vw,1.6rem);
  letter-spacing:-.025em;
}
.phero__fact span{ color:rgba(247,246,243,.55); }

/* На странице услуги H1 в первом экране — главный кегль. Заголовки секций
   должны быть заметно мельче, иначе H2 «перекрикивает» H1. */
.page .sec__title{
  font-size:clamp(1.35rem, min(7vw, calc((100vw - 2 * var(--gut)) / 10.6)), 3.5rem);
}
.page .brief__title{
  font-size:clamp(1.35rem, min(7vw, calc((100vw - 2 * var(--gut)) / 8.9)), 3.5rem);
}

.prose{ max-width:46rem; }
.prose p{ margin:0 0 1.1rem; color:var(--ink-2); }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--ink); font-weight:600; }

.checks{
  display:grid; gap:.9rem clamp(1.5rem,3vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
}
.checks li{ position:relative; padding-left:1.5rem; color:var(--ink-2); }
.checks li::before{
  content:''; position:absolute; left:0; top:.5em;
  width:.65rem; height:.65rem; background:var(--ink);
}
.checks b{ color:var(--ink); font-weight:600; }

.ptable{ width:100%; border-collapse:collapse; }
.ptable caption{
  text-align:left; margin-bottom:1rem; color:var(--ink-2);
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
}
.ptable th,
.ptable td{
  text-align:left; vertical-align:top;
  padding:clamp(.85rem,1.6vw,1.15rem) .5rem;
  border-top:1px solid rgba(11,11,11,.2);
}
.ptable thead th{
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
  border-top:0;
}
.ptable tbody th{
  font-family:var(--display); font-weight:700; font-size:clamp(1.05rem,2.2vw,1.2rem);
  letter-spacing:-.02em;
}
.ptable td{ color:var(--ink-2); }
.ptable .ptable__price{
  font-family:var(--mono); font-size:.85rem; color:var(--ink); white-space:nowrap;
}

.more{
  display:grid; gap:.75rem clamp(1.5rem,3vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
}
.more a{
  display:flex; align-items:baseline; gap:.6rem;
  padding:1rem .25rem;
  border-top:1px solid rgba(11,11,11,.2);
  text-decoration:none;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1rem,2vw,1.2rem); letter-spacing:-.02em;
  transition:color .25s var(--ease);
}
.more a::before{ content:'→'; color:var(--ink-2); }
.more a:hover{ color:var(--ink-2); }

/* ============================================================
   ГЕОГРАФИЯ
   ============================================================ */
.geo__grid{
  display:grid; gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.geo__col{ border-top:2px solid var(--ink); padding-top:1.25rem; min-width:0; }
.geo__name{
  margin:0 0 .6rem;
  font-family:var(--display); font-weight:700; font-size:clamp(1.15rem,2.4vw,1.6rem);
  letter-spacing:-.025em;
}
.geo__text{ margin:0; color:var(--ink-2); font-size:.95rem; }

/* ============================================================
   ВОПРОСЫ
   ============================================================ */
.faq__list{
  display:grid; gap:0; margin:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));
  column-gap:clamp(1.5rem,4vw,4rem);
}
.faq__item{
  border-top:1px solid rgba(11,11,11,.2);
  padding:clamp(1.1rem,2.2vw,1.6rem) 0;
  min-width:0;
}
.faq__q{
  margin:0 0 .55rem;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.02rem,2.1vw,1.3rem);
  letter-spacing:-.02em; line-height:1.2;
}
.faq__a{ margin:0; color:var(--ink-2); font-size:.95rem; }

/* ============================================================
   КОНТАКТЫ
   ============================================================ */
.brief{
  background:var(--ink); color:var(--chalk);
  padding:clamp(4.5rem,12vh,9rem) var(--gut);
}
/* Ограничение по ширине висит на тексте и контактах, а не на всей колонке:
   при max-width:36rem заголовок «СВЯЖИТЕСЬ» (8.23em ≈ 790px при 96px) не влезал
   в 576px и обрезался маской ревила на всех десктопах. */
.brief--contacts .brief__left{
  max-width:none;
}
.brief__title{
  margin:0 0 1.5rem;
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.6rem, min(8.5vw, calc((100vw - 2 * var(--gut)) / 8.9)), 6rem);
  line-height:.86;
  letter-spacing:-.04em; text-transform:uppercase;
}
.brief__text{ margin:0 0 1rem; color:rgba(247,246,243,.65); max-width:min(24rem,100%); }
.brief__note{ margin:0 0 2rem; color:var(--chalk); }
.brief__note:empty{ display:none; }
.brief__contacts{ display:grid; gap:.35rem; max-width:24rem; }
.brief__contacts a{
  display:inline-flex; align-items:center; min-height:44px;
  text-decoration:none; border-bottom:1px solid rgba(247,246,243,.3);
  padding-bottom:.25rem; transition:color .25s var(--ease), border-color .25s var(--ease);
}
.brief__contacts a:hover{ color:var(--chalk); border-bottom-color:var(--chalk); }

/* ============================================================
   ПОДВАЛ
   ============================================================ */
.foot{
  display:grid; gap:clamp(1.5rem,4vh,2.5rem);
  padding:clamp(3rem,7vh,5rem) var(--gut) 2rem;
  border-top:1px solid rgba(11,11,11,.2);
}

/* Здесь знак наконец крупный — и перемычка читается как трафарет. */
.foot__mark{
  position:relative;
  font-family:var(--display); font-weight:900;
  font-size:clamp(2.5rem,12.5vw,10rem);
  line-height:.8; letter-spacing:-.055em;
  text-align:center; white-space:nowrap;
}
.foot__mark::after{
  content:''; position:absolute; left:0; right:0; top:47%;
  height:.085em; background:var(--concrete);
}
.foot__dash{ color:var(--ink); }

.foot__nav{ min-width:0; }
.foot__nav-label{ margin:0 0 .85rem; color:var(--ink-2); }
.foot__links{
  display:grid; gap:.55rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),auto));
  justify-content:start;
}
.foot__links a{
  display:inline-flex; align-items:center; min-height:32px;
  text-decoration:none;
  border-bottom:1px solid rgba(11,11,11,.22);
  transition:border-color .25s var(--ease);
  font-size:.95rem;
}
.foot__links a:hover{ border-bottom-color:var(--ink); }

.foot__meta{
  display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between;
  color:var(--ink-2);
}

.foot__req{
  margin-top:1.25rem; padding-top:1rem;
  border-top:1px solid rgba(11,11,11,.12);
  font-family:var(--mono);
  font-size:.72rem; line-height:1.75; letter-spacing:.01em;
  color:var(--ink-2);
  max-width:74ch;
}
.foot__req p{margin:0}
.foot__req p + p{margin-top:.35rem}
.foot__req a{color:var(--ink-2)}

.foot__bar{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:flex-start; gap:.75rem 1.5rem;
  padding-top:1rem;
  border-top:1px solid rgba(11,11,11,.12);
}
.foot__partners{
  display:flex; flex-wrap:wrap; align-items:center; gap:.65rem 1rem;
}
.foot__partners-label{
  margin:0;
  font-size:.75rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.foot__partner{
  display:inline-flex; align-items:center;
  line-height:0;
  text-decoration:none;
  background:transparent;
}
.foot__partner img{
  display:block;
  height:36px;
  width:auto;
  max-width:min(220px, 70vw);
  max-height:36px;
  object-fit:contain;
}

/* плавающий бейдж made by — varganov-web catalog c01 */
.madeby{
  position:fixed;
  right:max(16px, env(safe-area-inset-right));
  bottom:max(16px, env(safe-area-inset-bottom));
  z-index:9999;
  display:inline-flex; align-items:center;
  padding:8px 12px;
  background:#282C33;
  color:#FFFFFF;
  font-family:"Fira Code", Consolas, "Courier New", monospace;
  font-size:12px;
  line-height:1.2;
  letter-spacing:0;
  text-transform:none;
  text-decoration:none;
  border:1.5px solid #C778DD;
  border-radius:6px;
  box-shadow:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.madeby span{ color:#C778DD; margin-right:2px; }
.madeby:hover{ transform:translateY(-2px); background:#282C33; }
@media (prefers-reduced-motion: reduce){
  .madeby:hover{ transform:none; }
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:900px){
  .nav,.topbar__cta{ display:none; }
  .burger{ display:flex; margin-left:auto; }
  .hero__side{ display:none; }
  .hero__foot{ grid-template-columns:1fr; }
  .sec__head{ grid-template-columns:minmax(0,1fr); align-items:start; gap:1rem; margin-bottom:2rem; }
  .sec__note{ justify-self:start; font-size:.95rem; }

  /* компактнее вертикальные поля секций */
  .sec,
  .brief{
    padding:clamp(2.75rem, 8vh, 4.5rem) clamp(1.25rem, 5vw, 1.75rem);
  }
  .phero{
    padding:calc(clamp(2.75rem, 8vh, 4.5rem) + 3.25rem) clamp(1.25rem, 5vw, 1.75rem) clamp(2.5rem, 7vh, 3.5rem);
  }
  .phero__facts{ margin-top:2rem; padding-top:1.25rem; }
  /* нижний отступ с запасом под плавающий бейдж made by (fixed, 16px + ~29px):
     иначе он ложится ровно на строку с ценой на первом экране */
  .hero__scene{
    padding:clamp(4.25rem, 10vh, 6rem) clamp(1.25rem, 5vw, 1.75rem) clamp(3.5rem, 6vh, 4.5rem);
  }
  .hero__billboard{
    top:auto;
    right:auto;
    bottom:0;
    width:min(82vw, 26.5rem);
    height:auto;
    transform:translate(-50%, 90vh);
    filter:drop-shadow(0 10px 16px rgba(11,11,11,.16));
  }
  .topbar{
    padding-left:clamp(1.1rem, 4.5vw, 1.5rem);
    padding-right:clamp(1.1rem, 4.5vw, 1.5rem);
  }
  .wall .sec__title{ max-width:100%; }
  .work__name{ font-size:clamp(.9rem, 4vw, 1.15rem); }
  .wall__ghost{
    font-size:clamp(1.5rem, min(8vw, calc((100vw - 2 * var(--gut)) / 9.2)), 3rem);
  }

  /* intro-логотип: гарантированно влезает в ширину экрана */
  .hero__logo{
    gap:.5rem;
    top:40vh;
    max-width:calc(100vw - 2.5rem);
  }
  .hero__logo-tile{
    flex:none;
    width:2.6rem;
    height:2.6rem;
    font-size:1.1rem;
  }
  .hero__logo-word{
    font-size:clamp(1.85rem, 10vw, 2.55rem);
    max-width:100%;
  }

  /* Кегли заголовков больше не режем вручную — общий clamp выше уже считает
     их от ширины контента и гарантирует одну строку на самом длинном слове. */
  .hero__title{ line-height:.95; }
  .hero__lead{ font-size:.95rem; line-height:1.45; }
  .hero__actions{ gap:.55rem; }
  .hero__actions .btn--lg{
    padding:.85rem 1.15rem;
    font-size:.85rem;
  }

  .srf__row{
    grid-template-columns:minmax(0,1fr) auto;
    gap:.55rem .75rem;
    padding:1rem .15rem;
  }
  .srf__mat{ grid-column:1/-1; font-size:.75rem; }
  .srf__name{
    font-size:clamp(1.05rem, 5vw, 1.5rem);
  }
  .srf__price{ font-size:.75rem; }
  .srf__preview{ display:none; }

  .person__name{
    font-size:clamp(1.75rem, 8vw, 3rem);
    margin:1rem 0 .25rem;
  }
  .person__text{ font-size:.9rem; }

  .foot__mark{ font-size:clamp(2rem, 11vw, 3.5rem); }
  /* тот же запас под бейдж made by, что и на первом экране */
  .foot{ padding-bottom:4.25rem; }
  .foot__bar{ gap:.55rem; }
  .foot__partner img{ height:30px; max-height:30px; }
  .madeby{ font-size:11px; padding:7px 10px; }

  .hero__price{ overflow:hidden; }
  .hero__price-text{ white-space:normal; font-size:.9rem; }
  .hero__price-num{ font-size:1rem; }
  .hero__price-blot{ width:130%; height:180%; }
  .ticker{ padding:.7rem 0; }
  .ticker__track{
    animation-duration:16s;
    -webkit-animation-duration:16s;
    gap:1.1rem;
  }
  .ticker__track span{ font-size:clamp(.9rem, 3.4vw, 1.15rem); }
}

/* таблица цен на узком экране: строки вместо колонок */
@media (max-width:600px){
  .ptable,
  .ptable tbody,
  .ptable tr,
  .ptable th,
  .ptable td{ display:block; width:100%; }
  .ptable thead{ display:none; }
  .ptable tbody tr{
    border-top:1px solid rgba(11,11,11,.2);
    padding:1.1rem 0;
  }
  .ptable tbody th,
  .ptable tbody td{ border-top:0; padding:.15rem 0; }
  .ptable tbody th{ margin-bottom:.35rem; }
  .ptable .ptable__price{ margin-top:.5rem; }
}

@media (max-width:480px){
  .hero__billboard{
    top:auto;
    right:auto;
    bottom:0;
    width:min(96vw, 24.5rem);
    height:auto;
    transform:translate(-50%, 92vh);
  }
  .hero__stage{ overflow:visible; width:100%; }
  .hero__price-wrap{ padding:.45em .7em .5em; }
  .hero__price-blot{ width:140%; height:200%; }
  .hero__title{ line-height:.96; }
  .hero__logo-tile{
    width:2.35rem; height:2.35rem; font-size:1rem;
  }
  .hero__logo-word{ font-size:clamp(1.7rem, 9.5vw, 2.25rem); }
  .btn--lg{ width:100%; justify-content:center; }
}

/* ============================================================
   ТЕЛЕФОН ГОРИЗОНТАЛЬНО (и любой низкий экран)
   Первый экран — 100dvh, а контента в нём на ~435px. При 390–430px высоты
   сцена (justify-content:flex-end) выдавливала «Майкоп · Республика Адыгея»
   вверх под фиксированную шапку и обрезала её overflow:hidden у sticky.
   ============================================================ */
@media (max-height:560px) and (orientation:landscape){
  .hero__scene{
    padding:3.25rem clamp(1.25rem, 5vw, 1.75rem) 1rem;
  }
  .hero__title{
    font-size:clamp(1.4rem, min(9.5vh, calc((100vw - 2 * var(--gut)) / 10.5)), 2.75rem);
    line-height:.98;
  }
  .hero__eyebrow{ margin-bottom:.5rem; }
  .hero__stage{ margin-bottom:.5rem; }
  .hero__foot{
    grid-template-columns:minmax(0,22rem) auto;
    gap:.6rem 1rem;
    align-items:center;
  }
  .hero__lead{ font-size:.85rem; line-height:1.35; max-width:22rem; }
  .hero__actions .btn--lg{ padding:.7rem 1rem; font-size:.72rem; }
  .hero__price{ padding-top:.5rem; }
  .hero__price-text{ font-size:.8rem; }
  .hero__logo{ top:44vh; }
  /* бейдж made by в альбомной ориентации стоит правее текста цены */
  .madeby{ padding:5px 9px; font-size:10px; }
}

@media (prefers-reduced-motion:reduce){
  .ticker__track{ animation:none; }
  .hero__transfer{ display:none; }
}