/* ============================================================================
   AMIR & D — оформление сайта.
   Ниже — все цвета, радиусы и отступы в одном месте: правка токена меняет
   их по всему сайту сразу.
   ========================================================================== */

:root{
  /* Поверхности */
  --paper:  #ffffff;
  --mist:   #f5f7fa;   /* светлые секции */
  --navy:   #04183a;   /* hero и секция «Качество» */
  --night:  #051026;   /* подвал */
  --grad-1: #031c4a;   /* панель каталогов, слева */
  --grad-2: #073873;   /* панель каталогов, справа */

  /* Текст */
  --ink:    #1a1d21;
  --muted:  #686868;
  --line:   #e5e8ec;

  /* Акценты */
  --blue:   #004090;
  --green:  #58b818;   /* точка-маркер на светлом */
  --green-2:#67cc29;   /* точка-маркер и галочки на тёмном */

  /* Плашки статуса продукта */
  --chip-a-bg: #e2f4cf; --chip-a-ink: #3a7d10;  /* рассасывающийся */
  --chip-n-bg: #e2edfb; --chip-n-ink: #004090;  /* нерассасывающийся */
  --tint:      #e6effc;                          /* подложка номерных иконок */

  /* Радиусы из макета */
  --r-btn:10px; --r-tile:12px; --r-card:14px; --r-lg:16px; --r-panel:24px;

  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --maxw:1440px;
  --pad:clamp(20px, 5.5vw, 80px);
  --hdr-h:102px;

  --ease:cubic-bezier(.22,1,.36,1);
  --t:.2s;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* Колонка на всю высоту окна: на коротких страницах (404, новости, одна
   карточка товара) подвал прижат к низу, а не висит посреди белого поля. */
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
}
body > main{ flex:1 0 auto; }

/* Заставка до первой отрисовки. Шапка сайта прозрачная с белым текстом —
   на белом фоне её просто не видно, и первые доли секунды (на медленной
   сети — секунды) верх страницы выглядит пустой белой полосой. Тёмный фон
   того же цвета, что и первый экран, убирает и это, и скачок цвета, когда
   разметка появится. Класс снимает сам скрипт при первой отрисовке. */
main.is-booting{ min-height:100vh; min-height:100svh; background:var(--navy); }

/* Единственное, что видит человек с выключенным JS. */
.nojs{ padding-block:calc(var(--hdr-h) + 40px) 64px; color:#fff; }
.nojs .lead{ color:rgba(255,255,255,.78); margin-top:16px; max-width:62ch; }
.nojs ul{ list-style:disc; padding-left:22px; }
.nojs li{ margin-top:8px; }
.nojs a{ color:var(--green-2); text-decoration:underline; }
body.is-locked{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3,h4,p,figure,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
table{ border-collapse:collapse; width:100%; }
::selection{ background:var(--blue); color:#fff; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
/* Контрастная обводка фокуса везде, где фон тёмный. */
.hero :focus-visible,.drawer :focus-visible,.ftr :focus-visible,
.panel :focus-visible,.sec--dark :focus-visible,
.hdr:not(.is-stuck) :focus-visible{ outline-color:var(--green-2); }
[tabindex="-1"]:focus{ outline:none; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:16px; top:16px; z-index:200; background:var(--ink); color:#fff; padding:10px 16px; border-radius:var(--r-btn); }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- Типографика макета ---------- */
.d1{ font-size:clamp(34px,4.6vw,54px); line-height:1.06; letter-spacing:-.015em; font-weight:700; text-wrap:balance; }
.d2{ font-size:clamp(28px,3.4vw,40px); line-height:1.12; letter-spacing:-.015em; font-weight:700; text-wrap:balance; }
.d3{ font-size:clamp(25px,3vw,36px); line-height:1.12; letter-spacing:-.015em; font-weight:700; text-wrap:balance; }
.h4{ font-size:22px; line-height:1.25; letter-spacing:-.01em; font-weight:700; }
.lead{ font-size:clamp(16.5px,1.3vw,18px); line-height:1.5; color:var(--muted); }
.body{ font-size:17px; line-height:1.62; color:var(--muted); }
.small{ font-size:15px; line-height:1.52; color:var(--muted); }
.note{ font-size:13px; line-height:1.5; color:var(--muted); }

/* Надзаголовок с точкой — повторяется во всех секциях макета */
.eyebrow{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; letter-spacing:.05em; color:var(--blue); }
.eyebrow svg{ flex:none; display:block; }
.on-dark .eyebrow{ color:var(--green-2); }

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:var(--r-btn);
  font-size:16px; font-weight:600; border:1.5px solid transparent;
  transition:background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.btn--fill{ background:var(--blue); color:#fff; }
.btn--fill:hover{ background:#00306d; }
.btn--white{ background:#fff; color:var(--blue); }
.btn--white:hover{ background:#eaf1fb; }
.btn--ghost{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn--ghost:hover{ background:rgba(255,255,255,.12); }
.btn--sm{ padding:10px 18px; font-size:15px; }

.alink{ display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:600; color:var(--blue); }
.alink:hover{ color:#00306d; }
.alink span{ transition:transform var(--t) var(--ease); }
.alink:hover span{ transform:translateX(4px); }

/* ---------- Логотип и название ---------- */
.brand{ display:inline-flex; align-items:center; gap:10px; }
.brand__mark{ width:30px; height:30px; display:block; perspective:600px; }
.brand__mark svg{ width:100%; height:100%; display:block; transform-style:preserve-3d; animation:mark-spin 9s var(--ease) infinite; }
.brand__name{ font-size:20px; font-weight:700; letter-spacing:.01em; white-space:nowrap; }
.hdr .brand__name,.ftr .brand__name{ color:#fff; }
.hdr.is-stuck .brand__name{ color:var(--ink); }
.brand:hover .brand__mark svg{ animation-play-state:paused; }

/* Знак поворачивается вокруг вертикальной оси */
@keyframes mark-spin{
  0%,72%   { transform:rotateY(0deg); }
  86%,100% { transform:rotateY(360deg); }
}

/* ---------- Шапка ---------- */
.hdr{ position:fixed; top:0; left:0; right:0; z-index:100; transition:background var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.hdr__in{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); height:var(--hdr-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px; }
.hdr.is-stuck{ background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(12px); box-shadow:0 1px 0 var(--line); }
.hdr.is-stuck .nav a,.hdr.is-stuck .lang__b{ color:var(--ink); }
.hdr.is-stuck .btn--ghost{ border-color:var(--line); color:var(--ink); }
.hdr.is-stuck .btn--ghost:hover{ background:var(--mist); }
.hdr.is-stuck .burger span{ background:var(--ink); }

.nav{ display:none; gap:30px; margin-left:auto; }
@media (min-width:1080px){ .nav{ display:flex; } }
.nav a{ font-size:15px; font-weight:500; color:rgba(255,255,255,.88); padding-block:6px; border-bottom:2px solid transparent; transition:color var(--t) var(--ease), border-color var(--t) var(--ease); }
.nav a:hover{ color:#fff; }
.hdr.is-stuck .nav a:hover{ color:var(--blue); }
.nav a.is-on{ border-bottom-color:var(--green-2); }
.hdr.is-stuck .nav a.is-on{ border-bottom-color:var(--blue); color:var(--blue); }

.hdr__right{ display:flex; align-items:center; gap:18px; margin-left:auto; }
@media (min-width:1080px){ .hdr__right{ margin-left:30px; } }
.lang{ display:none; gap:10px; }
@media (min-width:640px){ .lang{ display:flex; } }
.lang__b{ font-size:14px; font-weight:500; color:rgba(255,255,255,.5); transition:color var(--t) var(--ease); }
.lang__b:hover{ color:rgba(255,255,255,.8); }
.lang__b.is-on{ color:#fff; font-weight:600; }
.hdr.is-stuck .lang__b{ color:var(--muted); }
.hdr.is-stuck .lang__b.is-on{ color:var(--blue); }
.hdr__cta{ display:none; }
@media (min-width:1080px){ .hdr__cta{ display:inline-flex; padding:10px 18px; font-size:15px; } }

.burger{ width:40px; height:40px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
@media (min-width:1080px){ .burger{ display:none; } }
.burger span{ width:20px; height:2px; border-radius:2px; background:#fff; display:block; transition:background var(--t) var(--ease); }

.drawer{ position:fixed; inset:0; z-index:99; background:var(--navy); color:#fff;
  padding:calc(var(--hdr-h) + 16px) var(--pad) 40px; display:flex; flex-direction:column; gap:32px; overflow-y:auto; }
.drawer[hidden]{ display:none; }
.drawer__nav{ display:flex; flex-direction:column; }
.drawer__nav a{ font-size:26px; font-weight:600; padding-block:14px; border-bottom:1px solid rgba(255,255,255,.12); }
.drawer .btn--fill{ background:#fff; color:var(--blue); align-self:flex-start; }

/* ---------- Первый экран ---------- */
.hero{ position:relative; min-height:min(880px, 100svh); display:flex; align-items:center;
  padding-block:calc(var(--hdr-h) + 40px) 80px; background:var(--navy); overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img,.hero__media video{ width:100%; height:100%; object-fit:cover; }
.hero__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(3,16,40,.85) 0%, rgba(3,16,40,.18) 100%); }
/* На узком экране текст занимает всю ширину и попадает на светлую часть
   фотографии — добавляем ровный вертикальный слой поверх наклонного. */
@media (max-width:1080px){
  .hero__scrim{ background:
    linear-gradient(180deg, rgba(3,16,40,.55) 0%, rgba(3,16,40,.75) 100%),
    linear-gradient(90deg, rgba(3,16,40,.85) 0%, rgba(3,16,40,.45) 100%); }
}
/* Контент первого экрана прижат к левому полю, как в макете: ширину ограничиваем
   у самих блоков, а не у обёртки — иначе .wrap центрирует всю колонку. */
.hero__in{ position:relative; z-index:2; width:100%; display:flex; flex-direction:column; gap:24px; align-items:flex-start; }
.hero__in > *{ max-width:720px; }
.hero .eyebrow{ color:rgba(255,255,255,.82); }
.hero__t{ color:#fff; }
.hero__lead{ color:rgba(255,255,255,.86); font-size:18px; line-height:1.52; max-width:600px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:8px; }
/* Без точек-разделителей: при переносе строки точка осиротела бы в начале строки. */
.hero__std{ display:flex; flex-wrap:wrap; gap:10px 28px; color:rgba(255,255,255,.72); font-size:14px; font-weight:500; letter-spacing:.01em; margin-top:8px; }
.hero__pause{ position:absolute; left:var(--pad); bottom:44px; z-index:2; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.7); font-size:13px; font-weight:500; }
.hero__pause b{ width:40px; height:40px; border-radius:20px; display:grid; place-items:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); }
.hero__pause b i{ width:3.5px; height:13px; background:#fff; border-radius:2px; display:block; }
.hero__pause b i + i{ margin-left:2px; }

/* ---------- Секции ---------- */
.sec{ padding-block:100px; }
.sec--tight{ padding-block:80px; }
.sec--mist{ background:var(--mist); }
.sec--dark{ background:var(--navy); color:#fff; }
.sec__head{ display:flex; flex-direction:column; gap:14px; margin-bottom:48px; }
.sec__head--row{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.sec--dark .lead,.sec--dark .small,.sec--dark .body{ color:rgba(255,255,255,.72); }
.sec--dark .d2,.sec--dark .d3{ color:#fff; }

/* ---------- Карточки направлений ---------- */
.cards{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px 30px; display:flex; flex-direction:column; gap:18px; align-items:flex-start;
  transition:border-color var(--t) var(--ease), transform var(--t) var(--ease); }
a.card:hover{ border-color:var(--blue); transform:translateY(-2px); }
.card__num{ width:52px; height:52px; border-radius:var(--r-card); background:var(--tint);
  display:grid; place-items:center; color:var(--blue); font-weight:700; font-size:18px; }
.card__more{ margin-top:auto; color:var(--blue); font-weight:600; font-size:15px; }

/* ---------- Блок «О производстве» ---------- */
.split{ display:grid; gap:40px; align-items:center; }
@media (min-width:960px){ .split{ grid-template-columns:minmax(0,1fr) minmax(0,600px); gap:64px; } }
.split__text{ display:flex; flex-direction:column; gap:22px; align-items:flex-start; }
.split__img{ width:100%; aspect-ratio:600/380; object-fit:cover; border-radius:var(--r-lg); }

.stats{ margin-top:56px; padding-top:36px; border-top:1px solid var(--line); display:grid; gap:32px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.sec--dark .stats{ border-top-color:rgba(255,255,255,.16); }
.stat b{ display:block; font-size:clamp(34px,3.4vw,46px); line-height:1.05; letter-spacing:-.02em; color:var(--blue); font-weight:700; }
.sec--dark .stat b{ color:var(--green-2); }
.stat span{ display:block; margin-top:8px; font-size:15px; line-height:1.4; color:var(--muted); }

/* ---------- Витрина продукции ---------- */
.products{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.product{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; transition:border-color var(--t) var(--ease), transform var(--t) var(--ease); }
.product:hover{ border-color:var(--blue); transform:translateY(-2px); }
.product__img{ aspect-ratio:302/168; background:var(--mist); }
.product__img img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.product__body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.chip{ display:inline-flex; padding:5px 10px; border-radius:999px; font-size:11.5px; font-weight:600; letter-spacing:.02em; }
.chip--a{ background:var(--chip-a-bg); color:var(--chip-a-ink); }
.chip--n{ background:var(--chip-n-bg); color:var(--chip-n-ink); }
.product__n{ font-size:21px; font-weight:700; letter-spacing:.01em; }
.product__m{ font-size:14px; color:var(--muted); }

/* ---------- Сертификаты ---------- */
.certs{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.cert{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-card);
  padding:28px 24px; display:flex; flex-direction:column; gap:12px; }
.cert__ok{ color:var(--green-2); font-size:20px; font-weight:700; line-height:1; }
.cert__n{ font-size:19px; font-weight:700; color:#fff; }
.cert__d{ font-size:14px; line-height:1.48; color:rgba(255,255,255,.62); }

/* ---------- Панель каталогов ---------- */
.panel{ background:linear-gradient(90deg,var(--grad-1),var(--grad-2)); border-radius:var(--r-panel);
  padding:clamp(32px,4vw,60px); display:grid; gap:40px; align-items:center; color:#fff; }
@media (min-width:980px){ .panel{ grid-template-columns:minmax(0,1fr) 460px; gap:56px; } }
.panel .eyebrow{ color:var(--green-2); }
.panel__text{ display:flex; flex-direction:column; gap:14px; }
.panel__text p.lead{ color:rgba(255,255,255,.78); }
.tiles{ display:flex; flex-direction:column; gap:14px; }
/* На светлой странице белой плитке нужна граница, иначе она сливается с фоном;
   внутри тёмной панели каталогов граница не нужна. */
.tile{ background:#fff; border:1px solid var(--line); border-radius:var(--r-tile); padding:16px 20px 16px 18px;
  display:flex; align-items:center; gap:16px; transition:transform var(--t) var(--ease), border-color var(--t) var(--ease); }
.tile:hover{ border-color:var(--blue); }
.panel .tile{ border-color:transparent; }
.tile:hover{ transform:translateY(-2px); }
.tile__pdf{ width:44px; height:44px; flex:none; border-radius:var(--r-btn); background:var(--chip-n-bg);
  display:grid; place-items:center; color:var(--blue); font-size:12px; font-weight:700; letter-spacing:.02em; }
.tile__txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.tile__txt b{ font-size:16px; font-weight:700; color:var(--ink); }
.tile__txt span{ font-size:13px; color:var(--muted); }
.tile__go{ color:var(--blue); font-size:22px; font-weight:700; flex:none; }
.tile[aria-disabled="true"]{ opacity:.55; pointer-events:none; }

/* ---------- Новости ---------- */
.news{ display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.newsc{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; transition:border-color var(--t) var(--ease), transform var(--t) var(--ease); }
.newsc:hover{ border-color:var(--blue); transform:translateY(-2px); }
.newsc__img{ aspect-ratio:411/180; object-fit:cover; width:100%; }
.newsc__body{ padding:24px 24px 26px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.newsc__meta{ font-size:12.5px; font-weight:600; letter-spacing:.01em; color:var(--blue); }
.newsc__t{ font-size:19px; line-height:1.26; font-weight:700; letter-spacing:-.005em; }
.newsc__go{ margin-top:auto; color:var(--blue); font-weight:600; font-size:15px; }

/* ---------- Партнёры (добавлено по правкам клиента) ---------- */
.partners{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.partner{ border:1px solid var(--line); border-radius:var(--r-card); background:var(--paper);
  min-height:104px; display:grid; place-items:center; padding:20px; text-align:center;
  color:var(--muted); font-size:14px; line-height:1.4; }
.partner--empty{ border-style:dashed; }

/* ---------- Внутренние страницы ---------- */
.page{ padding-block:calc(var(--hdr-h) + 48px) 96px; }
.page__head{ display:flex; flex-direction:column; gap:16px; margin-bottom:48px; max-width:820px; }
.crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:14px; color:var(--muted); margin-bottom:20px; }
.crumbs li + li::before{ content:'/'; margin-right:8px; color:var(--line); }
.crumbs a:hover{ color:var(--blue); }

.rows{ display:grid; gap:0; }
.row{ display:grid; gap:16px; grid-template-columns:minmax(120px,200px) minmax(0,1fr) auto;
  align-items:center; padding-block:18px; border-bottom:1px solid var(--line); }
.row:first-child{ border-top:1px solid var(--line); }
.row__k{ font-size:15px; font-weight:600; }
.row__v{ font-size:15px; color:var(--muted); }

.tbl{ font-size:14px; line-height:1.55; color:var(--muted); text-align:left; }
.tbl th{ font-weight:600; color:var(--ink); vertical-align:top; }
.tbl thead th{ padding:10px 16px 10px 0; border-bottom:1px solid var(--line); color:var(--muted); font-weight:600; white-space:nowrap; }
.tbl td,.tbl tbody th{ padding:12px 16px 12px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl tr > *:last-child{ padding-right:0; }
.tbl--spec tbody th{ width:34%; min-width:180px; }
.scroll-x{ overflow-x:auto; }

.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.filters a{ padding:8px 16px; border-radius:999px; border:1px solid var(--line); font-size:14px; font-weight:500; color:var(--muted); }
.filters a:hover{ border-color:var(--blue); color:var(--blue); }
.filters a.is-on{ background:var(--blue); border-color:var(--blue); color:#fff; }

.form{ display:grid; gap:16px; max-width:520px; }
.form label{ display:grid; gap:6px; font-size:14px; font-weight:500; }
.form input,.form textarea{ padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-btn);
  background:var(--paper); font-size:16px; }
.form input:focus-visible,.form textarea:focus-visible{ border-color:var(--blue); }
.form .row-check{ display:flex; gap:10px; align-items:flex-start; font-weight:400; }
.form input[type=checkbox]{ margin-top:3px; accent-color:var(--blue); width:16px; height:16px; padding:0; }

/* ---------- Подвал ---------- */
.ftr{ background:var(--night); color:#fff; padding-block:80px 36px; }
.ftr__top{ display:grid; gap:40px; }
@media (min-width:900px){ .ftr__top{ grid-template-columns:minmax(0,1.6fr) auto auto minmax(220px,auto); gap:64px; } }
.ftr__brand{ display:flex; flex-direction:column; gap:18px; align-items:flex-start; }
.ftr__desc{ font-size:15px; line-height:1.5; color:rgba(255,255,255,.6); max-width:300px; }
.ftr__std{ font-size:13px; font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.55); }
.ftr__col{ display:flex; flex-direction:column; gap:14px; }
.ftr__col h2{ font-size:13px; font-weight:600; letter-spacing:.04em; color:rgba(255,255,255,.5); }
.ftr__col a,.ftr__col span{ font-size:15px; color:rgba(255,255,255,.72); transition:color var(--t) var(--ease); }
.ftr__col a:hover{ color:#fff; }
.ftr__divider{ height:1px; background:rgba(255,255,255,.1); margin-block:44px; }
.ftr__bot{ display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; font-size:14px; color:rgba(255,255,255,.5); }
.ftr__note{ color:rgba(255,255,255,.6); }

/* ---------- Появление секций ---------- */
/* ---------------------------------------------------------------------------
   Узкий экран: строки таблиц в одну колонку.

   .row рисуется в семи местах со своим инлайновым grid-template-columns, и на
   телефоне средняя колонка схлопывалась до 40 px при содержимом в 222 px —
   текст обрезался, а прокрутить его нельзя: на body стоит overflow-x:hidden.
   Бьёт по странице «О компании», а именно на неё ведёт QR с упаковки.
   !important здесь не лень, а единственный способ перебить инлайновый стиль;
   вынести семь инлайнов в классы можно потом, поведение от этого не изменится.
   --------------------------------------------------------------------------- */
@media (max-width:760px){
  .row{ grid-template-columns:1fr !important; gap:4px; align-items:start; }
  .row [style*="nowrap"]{ white-space:normal !important; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .brand__mark svg{ animation:none; }
}