/* ============================================================
   A52 — типография, Нижний Новгород
   Интерфейс молчит, говорит товар: чёрно-белая оболочка,
   весь цвет приходит с фотографий. Крупный светлый шрифт,
   много воздуха, одна мысль на экран.
   Целевое действие — звонок.
   ============================================================ */

@font-face{font-family:'Manrope';src:url(/assets/fonts/manrope-cyrillic.woff2) format('woff2');font-weight:300 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';src:url(/assets/fonts/manrope-latin.woff2) format('woff2');font-weight:300 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#0A0A0B;
  --ink-2:#5F5F66;
  --ink-3:#93939C;
  --bg:#FFFFFF;
  --bg-2:#F5F4F2;
  --bg-3:#EDEBE8;
  --line:#E6E4E0;
  --accent:#0A0A0B;          /* акцента-цвета нет: ссылка выделяется подчёркиванием */
  --r:22px;
  --r-s:14px;
  --wrap:1240px;
  --wrap-hdr:1420px;
  --f:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --shadow:0 1px 2px rgba(10,10,11,.04),0 18px 40px -24px rgba(10,10,11,.30);
  --shadow-lg:0 2px 6px rgba(10,10,11,.05),0 40px 80px -40px rgba(10,10,11,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:18px;line-height:1.6;letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding-left:1.15em}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink-3)}

/* ---------------- шапка ----------------
   Плавающая скруглённая панель: бренд слева, пилюли-ссылки,
   действие справа. По прокрутке появляется стекло. */
.hdr{position:sticky;top:0;z-index:70;padding:16px 20px 0}
.hdr-bar{display:flex;align-items:center;gap:8px;max-width:var(--wrap-hdr);margin:0 auto;
  padding:10px 10px 10px 20px;border-radius:20px;
  transition:background .25s ease,box-shadow .25s ease,backdrop-filter .25s ease}
.hdr.stuck .hdr-bar{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(28px) saturate(1.5);
  backdrop-filter:blur(28px) saturate(1.5);box-shadow:0 1px 0 rgba(10,10,11,.05),0 12px 34px -22px rgba(10,10,11,.5)}

.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand .mark{display:block;width:40px;height:40px;flex:0 0 auto}
.brand .bname{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0}
.brand b{font-size:19px;font-weight:800;line-height:1;letter-spacing:-.035em}
.brand em{font-style:normal;font-weight:500;font-size:12px;line-height:1;color:var(--ink-3);
  letter-spacing:-.005em;white-space:nowrap}
.brand em i{font-style:normal}
.brand:hover{opacity:.82}

.nav{display:flex;gap:4px;align-items:center;margin-left:24px}
.nav a{display:inline-flex;align-items:center;padding:9px 15px;border-radius:11px;font-size:15px;
  font-weight:500;color:var(--ink-2);white-space:nowrap;transition:color .15s,background .15s}
.nav a:hover{color:var(--ink);background:rgba(10,10,11,.05)}
.nav a[aria-current]{color:var(--ink);background:rgba(10,10,11,.08);font-weight:600}

.hdr-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto}
.hdr-call{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:13px;
  background:var(--ink);color:#fff;font-size:15.5px;font-weight:600;letter-spacing:-.015em;white-space:nowrap;
  transition:opacity .18s}
.hdr-call:hover{opacity:.88}
.hdr-call svg{width:16px;height:16px;flex:0 0 auto}

.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;
  border:0;border-radius:13px;background:rgba(10,10,11,.06);color:var(--ink);cursor:pointer;padding:0}
.burger:hover{background:rgba(10,10,11,.1)}

.menu{display:none;max-width:var(--wrap);margin:8px auto 0;padding:10px;border-radius:20px;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(28px) saturate(1.5);
  backdrop-filter:blur(28px) saturate(1.5);box-shadow:0 20px 50px -28px rgba(10,10,11,.6)}
.menu a{display:block;padding:13px 16px;border-radius:12px;font-size:16.5px;font-weight:500;color:var(--ink-2)}
.menu a:hover{background:rgba(10,10,11,.05);color:var(--ink)}
.hdr.open .menu{display:block}

@media (max-width:1319px){
  /* На узком десктопе меню не помещается рядом с брендом и телефоном:
     поджимаем пилюли, чтобы строка сходилась без переноса. */
  .nav{margin-left:16px}
  .nav a{padding:9px 10px;font-size:14.5px}
}
@media (max-width:1259px){
  /* Бренд и кнопку телефона поджимаем раньше, чем прячем меню:
     так меню доживает до 1200px с настоящим запасом, а не впритык. */
  .hdr-call{height:40px;padding:0 15px;font-size:14.5px;gap:7px}
  .hdr-call svg{width:15px;height:15px}
  .brand{gap:9px}
  .brand .mark{width:36px;height:36px}
  .brand b{font-size:17.5px}
  .brand em{font-size:11.5px}
}
@media (max-width:1199px){
  .hdr{padding:10px 14px 0}
  .hdr-bar{padding:8px 8px 8px 14px;border-radius:18px;background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5)}
  .nav{display:none}
  .burger{display:flex}
}
@media (max-width:760px){
  .brand em i{display:none}
}
@media (max-width:400px){
  .hdr-call{padding:0 11px;font-size:13px;gap:5px;letter-spacing:-.03em}
  .hdr-call svg{display:none}
  .brand{gap:7px}
  .brand .mark{width:32px;height:32px}
  .brand b{font-size:15.5px}
  .brand em{font-size:10.5px}
}
@media (max-width:349px){
  /* На совсем узком экране город уже не помещается рядом с телефоном */
  .brand em{display:none}
  .brand b{font-size:16.5px}
}

/* ---------------- герой ---------------- */
.hero{padding:56px 0 0}
.hero h1{font-size:clamp(40px,7.2vw,86px);font-weight:800;line-height:.98;letter-spacing:-.045em;max-width:15ch}
.hero .lede{margin-top:26px;font-size:clamp(18px,2vw,23px);color:var(--ink-2);max-width:44ch;font-weight:400;letter-spacing:-.015em;line-height:1.45}
.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:36px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--ink);color:#fff;font-size:17px;font-weight:600;padding:15px 28px;border-radius:999px;letter-spacing:-.015em;white-space:nowrap;transition:transform .18s,opacity .18s}
.btn,.btn:link,.btn:visited{color:#fff}
.btn-ghost,.btn-ghost:link,.btn-ghost:visited{color:var(--ink)}
.btn:hover{transform:translateY(-1px);opacity:.9}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--bg-2)}
.hero-note{font-size:15px;color:var(--ink-3)}

.showcase{margin-top:56px;border-radius:var(--r);overflow:hidden;background:var(--bg-2);aspect-ratio:21/9;position:relative}
.showcase img{width:100%;height:100%;object-fit:cover}
/* автослайдер первого экрана: кадры лежат друг на друге и перетекают */
.showcase .slides{position:absolute;inset:0}
.showcase .slides img{position:absolute;inset:0;opacity:0;transform:scale(1.07);
  transition:opacity .55s ease,transform 5s cubic-bezier(.22,.61,.36,1)}
.showcase .slides img.on{opacity:1;transform:scale(1)}
.showcase .dots{position:absolute;left:0;right:0;bottom:16px;z-index:2;display:flex;justify-content:center;gap:9px}
.showcase .dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.5);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:background .25s,transform .25s}
.showcase .dots button:hover{background:rgba(255,255,255,.8)}
.showcase .dots button.on{background:#fff;transform:scale(1.3)}
@media (prefers-reduced-motion:reduce){.showcase .slides img{transition:none;transform:none}}
.showcase.empty{display:none}
@media (max-width:700px){.showcase{aspect-ratio:4/3;border-radius:var(--r-s)}}

.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:56px}
.strip img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-s);background:var(--bg-2)}
@media (min-width:900px){.strip img{aspect-ratio:4/3}}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 24px;padding:60px 0 0}
@media (min-width:860px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats b{display:block;font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.045em;line-height:1}
.stats>div{display:flex;flex-direction:column;height:100%}
.stats span{display:block;margin-top:auto;padding-top:8px;font-size:15px;color:var(--ink-2);line-height:1.4}

/* ---------------- секции ---------------- */
.sec{padding:100px 0}
.sec.tight{padding:64px 0}
.sec.grey{background:var(--bg-2)}
.sec.faq-sec{padding-bottom:110px;background:var(--bg)}
.sec.dark{background:var(--ink);color:#fff}
.sec.dark .lede,.sec.dark .sec-h p{color:#A5A5AD}
.sec-h{margin-bottom:44px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sec-h h2{font-size:clamp(28px,4.2vw,50px);font-weight:800;letter-spacing:-.04em;max-width:18ch}
.sec-h p{font-size:17px;color:var(--ink-2);max-width:36ch}
.sec-h a{font-size:16px;font-weight:600;color:var(--ink-2)}
.sec-h a:hover{color:var(--ink)}

/* ---------------- витрина разделов ---------------- */
.tiles{display:grid;gap:20px}
@media (min-width:720px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){
  .tiles{grid-template-columns:repeat(3,1fr)}
  .tiles>*:nth-child(1),.tiles>*:nth-child(2){grid-column:span 3}
  .tiles>*:nth-child(1) .pic,.tiles>*:nth-child(2) .pic{aspect-ratio:21/8}
}
.tile{display:block;border-radius:var(--r);overflow:hidden;background:var(--bg-2);position:relative;transition:transform .3s}
.tile:hover{transform:translateY(-3px)}
.tile .pic{aspect-ratio:4/3;overflow:hidden;background:var(--bg-3)}
.tile .pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tile:hover .pic img{transform:scale(1.035)}
.tile .in{padding:24px 26px 28px}
.tile h3{font-size:26px;font-weight:700;letter-spacing:-.035em}
.tile p{margin-top:9px;font-size:15.5px;color:var(--ink-2);line-height:1.5}
.tile .more{margin-top:16px;display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:600}
.tile .more::after{content:"→";transition:transform .25s}
.tile:hover .more::after{transform:translateX(4px)}

/* ---------------- список позиций ---------------- */
.list{border-top:1px solid var(--line)}
.li{display:grid;grid-template-columns:1fr auto;gap:6px 28px;align-items:center;padding:22px 4px;border-bottom:1px solid var(--line);transition:padding-left .2s}
.li:hover{padding-left:12px}
.li .n b{display:block;font-size:20px;font-weight:600;letter-spacing:-.025em}
.li .n span{display:block;font-size:15px;color:var(--ink-2);margin-top:3px}
.li .p{text-align:right;white-space:nowrap}
.li .p b{font-size:17px;font-weight:700;color:var(--accent);letter-spacing:-.02em}
.li .p span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:3px}

/* ---------------- преимущества ---------------- */
.cols{display:grid;gap:44px 40px}
@media (min-width:760px){.cols{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.cols{grid-template-columns:repeat(4,1fr)}}
.col b{display:block;font-size:21px;font-weight:700;letter-spacing:-.03em;margin-bottom:10px}
.col p{font-size:16px;color:var(--ink-2);line-height:1.55}
.sec.dark .col p{color:#A5A5AD}

/* ---------------- галерея ---------------- */
.gal{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media (min-width:720px){.gal{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1080px){.gal{grid-template-columns:repeat(4,1fr)}}
.gal img{aspect-ratio:1/1;object-fit:cover;width:100%;border-radius:var(--r-s);background:var(--bg-2)}
.gal.wide img{aspect-ratio:4/3}

/* перечень работ под галереей: слова для поиска, а не подписи под каждым снимком */
.worklist{margin-top:64px;padding-top:34px;border-top:1px solid var(--line)}
.worklist h2{font-size:22px;font-weight:700;letter-spacing:-.03em;margin-bottom:18px}
.worklist ul{list-style:none;padding:0;margin:0;columns:2;column-gap:36px}
@media (min-width:760px){.worklist ul{columns:3}}
@media (min-width:1080px){.worklist ul{columns:4}}
.worklist li{break-inside:avoid;font-size:15.5px;line-height:1.5;color:var(--ink-2);padding:5px 0}

/* ---------------- страница ---------------- */
.crumbs{padding:26px 0 0;font-size:14px;color:var(--ink-3);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:var(--ink)}
.page{display:grid;gap:56px;padding:0 0 100px}
@media (min-width:1040px){
  .page{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
  /* прилипает вся правая колонка целиком — и телефон, и «Ещё в разделе»,
     иначе список наезжает на карточку при прокрутке. Если колонка выше окна,
     она прокручивается внутри себя, а не уползает за верхний край */
  .aside{position:sticky;top:92px;max-height:calc(100vh - 112px);overflow-y:auto;
    overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(10,10,11,.2) transparent}
  .aside::-webkit-scrollbar{width:6px}
  .aside::-webkit-scrollbar-thumb{background:rgba(10,10,11,.18);border-radius:3px}
  .aside::-webkit-scrollbar-track{background:transparent}
}
.ptitle{font-size:clamp(32px,5.2vw,62px);font-weight:800;letter-spacing:-.045em;margin:26px 0 24px;max-width:16ch}
.chips{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px}
.chip{display:flex;flex-direction:column;gap:2px;padding:14px 20px;background:var(--bg-2);border-radius:var(--r-s);min-width:130px}
.chip b{font-size:19px;font-weight:700;letter-spacing:-.025em}
.chip span{font-size:13px;color:var(--ink-3)}

.prose{font-size:18px;max-width:68ch;color:#25252A}
.prose>*+*{margin-top:20px}
.prose h2{font-size:30px;font-weight:700;letter-spacing:-.035em;margin-top:52px;color:var(--ink)}
.prose h3{font-size:23px;font-weight:700;letter-spacing:-.03em;margin-top:38px;color:var(--ink)}
.prose ul,.prose ol{padding-left:1.2em}
.prose li+li{margin-top:9px}
.prose img{border-radius:var(--r-s);margin:32px 0}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--ink-3)}
.prose a:hover{text-decoration-color:var(--ink)}
.prose strong{font-weight:700;color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;font-size:16px;display:block;overflow-x:auto}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top}
.prose th{font-weight:600;color:var(--ink)}

.aside{display:flex;flex-direction:column;gap:16px}
.callcard{background:var(--bg-2);border-radius:var(--r);padding:30px 28px}
.callcard b{display:block;font-size:23px;font-weight:700;letter-spacing:-.035em;margin-bottom:10px}
.callcard p{font-size:16px;color:var(--ink-2);margin-bottom:22px;line-height:1.5}
.callcard .btn{width:100%}
.callcard .meta{margin-top:20px;font-size:14.5px;color:var(--ink-2);line-height:1.65}
.callcard .meta a{text-decoration:underline;text-underline-offset:2px}
.sidelinks{border:1px solid var(--line);border-radius:var(--r);padding:24px 26px}
.sidelinks b{display:block;font-size:14px;font-weight:600;color:var(--ink-3);margin-bottom:14px}
.sidelinks ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px;font-size:16.5px}
.sidelinks a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------------- вопросы и ответы ----------------
   Нативный details: ответ лежит в HTML всегда, просто скрыт стилем,
   поэтому его видят и поисковик, и нейросети. */
.faq{max-width:840px;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa>summary{display:flex;align-items:flex-start;gap:20px;justify-content:space-between;
  padding:22px 2px;cursor:pointer;list-style:none;font-size:19px;font-weight:600;letter-spacing:-.025em;
  line-height:1.35;transition:color .15s}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary:hover{color:var(--ink-2)}
.qa .sign{position:relative;flex:0 0 auto;width:22px;height:22px;margin-top:2px}
.qa .sign::before,.qa .sign::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);
  border-radius:2px;transform:translate(-50%,-50%);transition:transform .25s ease,opacity .25s ease}
.qa .sign::before{width:16px;height:2px}
.qa .sign::after{width:2px;height:16px}
.qa[open] .sign::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.qa .ans{padding:0 44px 24px 2px;font-size:17px;color:var(--ink-2);line-height:1.6;max-width:64ch}
@media (prefers-reduced-motion:reduce){.qa .sign::before,.qa .sign::after{transition:none}}

/* ---------------- адрес ----------------
   Каждый факт — отдельной строкой. Внутри address лежат span и a,
   то есть строчные элементы: без раскладки они склеиваются в одну строку. */
.addr{font-style:normal;display:flex;flex-direction:column;align-items:flex-start;gap:6px;line-height:1.5}
.addr>*{display:block}
.addr a{text-decoration:underline;text-underline-offset:2px}
.addr a:hover{color:var(--ink)}
.callcard .addr{gap:7px}
.ftr .addr{gap:8px}

/* ---------------- контакты ---------------- */
.contact{display:grid;gap:48px}
@media (min-width:900px){.contact{grid-template-columns:1.1fr .9fr}}
.dl{display:grid;gap:26px}
.dl dt{font-size:14px;color:var(--ink-3);margin-bottom:4px}
.dl dd{margin:0;font-size:20px;font-weight:500;letter-spacing:-.02em}
.dl dd a{text-decoration:underline;text-underline-offset:3px}

/* ---------------- подвал ---------------- */
.ftr{background:var(--bg-2);color:var(--ink-2);font-size:14.5px;padding:44px 0 26px}
.ftr-top{display:grid;gap:26px 40px;grid-template-columns:1fr;padding-bottom:26px}
@media (min-width:760px){.ftr-top{grid-template-columns:1.2fr 1fr 1fr}}
.ftr b{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:10px}
.ftr ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.ftr a:hover{color:var(--ink)}
.ftr .telbig{display:inline-block;font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.035em;margin-bottom:8px}
.ftr-bot{padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px 28px;flex-wrap:wrap;font-size:13.5px;line-height:1.55;color:var(--ink-3)}
.ftr-bot a{text-decoration:underline}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:#fff;padding:12px 16px;border-radius:8px;z-index:100}

/* появление при прокрутке — тихое, без прыжков */
.rv{opacity:0;transform:translateY(14px)}
.rv.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ---------------- лента клиентов ---------------- */
.clients{padding:70px 0 0;overflow:hidden}
.clients-h{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);text-align:center}
.marquee{margin-top:30px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-track{display:flex;width:max-content;gap:64px;animation:mq 42s linear infinite}
.mq-row{display:flex;align-items:center;gap:64px}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-row img{height:38px;width:auto;max-width:180px;object-fit:contain;
  filter:grayscale(1);opacity:.5;transition:filter .3s,opacity .3s}
.mq-row img:hover{filter:none;opacity:1}
.mq-row span{font-size:21px;font-weight:700;letter-spacing:-.035em;color:var(--ink-3);
  white-space:nowrap;opacity:.75;transition:color .3s,opacity .3s}
.mq-row span:hover{color:var(--ink);opacity:1}
/* сдвиг ровно на одну копию: половина дорожки плюс половина зазора между копиями */
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 32px))}}
@media (max-width:700px){
  .clients{padding:52px 0 0}
  .mq-track,.mq-row{gap:44px}
  @keyframes mq{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 22px))}}
  .mq-row img{height:32px;max-width:140px}
  .mq-row span{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .mq-row[aria-hidden]{display:none}
}