/* Portfolio list, partners row and cookie consent — reusable visual modules.
   Same grammar as the rest of the page: one type family, hairline rules, one accent. */

/* ---------- портфолио ---------- */
.projects{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.project{display:grid;grid-template-columns:52px minmax(260px,1.3fr) minmax(200px,.8fr) minmax(120px,auto);
  gap:clamp(16px,2.6vw,44px);align-items:start;padding-block:clamp(22px,2.8vw,36px);border-bottom:1px solid var(--line)}
/* Decoration, not content: the numeral is painted from the data attribute so the ghost
   grey never lands in the accessibility tree as unreadable text. */
.project-index{color:var(--muted);padding-top:8px}
.project-index::before{content:attr(data-index)}
.project h3{font-size:clamp(23px,2.5vw,36px);font-weight:500;line-height:1.14;letter-spacing:-.035em;max-width:22ch;text-wrap:balance}
.project-scope{margin-top:12px;font-size:15px;line-height:1.55;color:var(--ink-soft);max-width:40ch}
.project-meta{display:grid;gap:14px;margin:0;align-content:start;padding-top:4px}
.project-meta div{display:block}
.project-meta dt{font-size:12px;line-height:1.4;color:var(--muted);margin-bottom:5px}
.project-meta dd{margin:0;font-size:16px;line-height:1.3}
.project-more{display:flex;align-items:center;gap:8px;padding-top:6px;font-size:13px;color:var(--muted);text-align:right}
.project-more[data-soon] span{border-bottom:1px dashed var(--line);padding-bottom:2px}
.projects-note{margin-top:clamp(16px,2vw,24px)}

/* ---------- партнёры ---------- */
.partners{margin-top:clamp(36px,5vw,72px);padding-top:clamp(18px,2.4vw,28px);border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(140px,auto) minmax(0,1fr);gap:clamp(14px,2.6vw,44px);align-items:baseline}
.partners-label{font-size:13px;color:var(--muted)}
.partners-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px clamp(22px,3vw,44px)}
.partners-list li{display:flex}
.partners-item{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:clamp(17px,1.7vw,23px);
  font-weight:500;letter-spacing:-.03em;text-decoration:none;color:var(--ink);
  border-bottom:1px solid transparent;padding-bottom:1px}
.partners-item i{font-style:normal;font-size:.62em;color:var(--muted);
  transition-property:transform,color;transition-duration:200ms;transition-timing-function:var(--ease-out-quint)}
.partners-item[data-plain]{color:var(--ink-soft)}
@media(hover:hover) and (pointer:fine){
  .partners-item:hover{border-bottom-color:var(--ink)}
  .partners-item:hover i{transform:translate3d(2px,-2px,0);color:var(--ink)}
}
@media(prefers-reduced-motion:reduce){.partners-item i{transition-duration:0s}.partners-item:hover i{transform:none}}

/* Partner lockups: official marks lead, names stay as a quiet text fallback. */
.partners-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:clamp(14px,2.5vw,34px)}
.partners-list li{min-width:0;width:100%}
.partners-item.partners-logo{position:relative;display:grid;box-sizing:border-box;width:100%;grid-template-columns:1fr auto;grid-template-rows:minmax(34px,1fr) auto;align-items:center;column-gap:12px;row-gap:4px;min-height:92px;min-width:100%;padding:14px 16px 12px;border:1px solid var(--line);border-radius:4px;background:color-mix(in srgb,var(--paper) 86%,var(--ink) 14%);transition:background 220ms var(--ease-out-quint),border-color 220ms var(--ease-out-quint),transform 220ms var(--ease-out-quint)}
.partner-mark{display:block;grid-column:1/-1;max-width:100%;max-height:42px;object-fit:contain;object-position:left center;color:var(--ink);font-size:clamp(19px,1.8vw,27px);font-weight:600;letter-spacing:-.055em;line-height:1;white-space:nowrap}
.partner-mark--neometria{font-weight:500;letter-spacing:-.08em;text-transform:lowercase}
.partner-mark--voshod{font-family:Arial,sans-serif;font-size:clamp(17px,1.55vw,23px);font-weight:800;letter-spacing:.075em}
/* Временный словесный знак, пока нет официального логотипа GRAVION. */
.partner-mark--gravion{font-family:Arial,sans-serif;font-size:clamp(16px,1.45vw,21px);font-weight:400;letter-spacing:.32em}
.partner-mark--five{width:auto;height:42px;object-position:left center}
.partner-mark--eurospar{width:clamp(105px,9vw,150px);height:32px}
/* The tile background is a tinted paper, so the quiet grey fell to 3.6:1 there.
   Ink-soft keeps the same hierarchy at ~6.8:1. */
.partner-name{grid-column:1;color:var(--ink-soft);font-size:11px;letter-spacing:.02em}
.partners-item.partners-logo i{grid-column:2;grid-row:2;color:var(--muted);align-self:end}
.partners-item.partners-logo[data-plain]{cursor:default;color:var(--ink)}
@media(hover:hover) and (pointer:fine){
  .partners-item.partners-logo:hover{border-color:var(--ink);background:var(--paper);transform:translateY(-2px)}
  .partners-item.partners-logo:hover i{transform:translate3d(2px,-2px,0)}
}
@media(max-width:760px){
  .partners-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .partners-list li{min-width:0}
  .partners-item.partners-logo{min-height:84px;padding:12px}
  .partner-mark{font-size:20px}
  .partner-mark--five{height:36px}
  .partner-mark--eurospar{height:28px}
}
@media(prefers-reduced-motion:reduce){.partners-item.partners-logo{transition:none}.partners-item.partners-logo:hover{transform:none}}

/* ---------- cookie ---------- */
.consent{position:fixed;z-index:60;left:var(--pad);right:var(--pad);bottom:0;max-width:760px;margin-inline:auto;
  padding:clamp(16px,2vw,22px) clamp(16px,2vw,24px);background:var(--dark);color:#f2f3f2;border:1px solid var(--dark-line);
  border-bottom:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px clamp(18px,2.4vw,32px);align-items:center;
  margin-bottom:env(safe-area-inset-bottom);
  opacity:0;transform:translate3d(0,16px,0);visibility:hidden;pointer-events:none;
  transition-property:opacity,transform,visibility;transition-duration:200ms,200ms,0s;transition-delay:0s,0s,200ms;
  transition-timing-function:var(--ease-in-strong)}
.consent[data-state="shown"]{opacity:1;transform:none;visibility:visible;pointer-events:auto;
  transition-duration:420ms,420ms,0s;transition-delay:0s;transition-timing-function:var(--expo-out)}
.consent-text{font-size:14px;line-height:1.55;color:#c8cdcf;max-width:56ch}
.consent-text a{color:#f2f3f2;text-underline-offset:3px}
.consent-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.consent .btn{min-height:44px;padding-inline:20px;font-size:14px}
.consent .btn--ghost{color:#fff;border-color:#4a5054;background:none}
.consent :focus-visible{outline-color:var(--accent)}
@media(hover:hover) and (pointer:fine){.consent .btn--ghost:hover{border-color:#fff}}
@media(prefers-reduced-motion:reduce){
  .consent{transform:none;transition-property:opacity,visibility;transition-duration:180ms,0s}
  .consent[data-state="shown"]{transition-duration:200ms,0s}
}

/* ---------- адаптив ---------- */
@media(max-width:1100px){
  .project{grid-template-columns:44px minmax(0,1.2fr) minmax(0,.9fr);gap:16px clamp(16px,3vw,32px)}
  .project-more{grid-column:2/-1;padding-top:0;justify-content:flex-start;text-align:left}
}
@media(max-width:760px){
  .project{grid-template-columns:34px minmax(0,1fr);gap:10px 16px;padding-block:24px}
  .project-index{padding-top:4px}
  .project h3{font-size:23px;max-width:none}
  .project-scope{font-size:15px;max-width:none}
  .project-meta{grid-column:2;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;padding-top:2px}
  .project-meta dd{font-size:15px}
  .project-more{grid-column:2}
  .partners{grid-template-columns:1fr;gap:6px}
  .partners-list{gap:0 24px}
  .partners-item{font-size:18px}
  /* The card is a bottom sheet here, and the scene reserves exactly its height for the
     transport row above it. A tall three-line card would eat a third of the screen, so
     it stays two lines with the buttons side by side. */
  .consent{grid-template-columns:1fr;left:0;right:0;border-inline:0;gap:10px;padding:14px var(--pad) calc(14px + env(safe-area-inset-bottom))}
  /* Consent copy is never clipped: a cut-off «by pressing Accept you agree…» is not consent. */
  .consent-text{font-size:13px;line-height:1.5}
  .consent-actions{display:flex;gap:8px}
  .consent .btn{flex:1 1 auto;min-height:44px;padding-inline:14px;font-size:13px;white-space:nowrap}
  body[data-mobile-nav-open] .consent{opacity:0;visibility:hidden;pointer-events:none}
}

/* On a short screen a three-line card plus two stacked buttons eats half the viewport,
   and it sits exactly where the scene keeps its controls. Trim it to two lines and put
   the buttons back on one row — landscape phones need this as much as small ones. */
@media(max-height:620px){
  .consent{gap:8px;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom))}
  .consent-text{font-size:12px;line-height:1.4}
  .consent-actions{display:flex;gap:8px}
  .consent .btn{flex:1 1 auto;min-height:40px;padding-inline:12px;font-size:13px;white-space:nowrap}
}

/* ---------- Works: two company directions on one page ---------- */
/* Each direction keeps its own heading block, so «Фасады» and «Отделка» never read as one list. */
/* На широком экране направления стоят рядом: секция обязана помещаться в один экран. */
.works-columns{display:grid;gap:clamp(36px,5vw,64px)}
@media(min-width:1000px){.works-columns{grid-template-columns:1fr 1fr;align-items:start}}
@media(max-width:999px){.works-group + .works-group{margin-top:0}}
.works-group-head{display:grid;gap:10px;margin-bottom:20px;max-width:66ch}
.works-group-head .mono{margin:0;color:var(--muted);font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.works-group-head h3{margin:0;font-size:clamp(25px,3.2vw,36px);letter-spacing:-.03em;line-height:1.12}
.works-group-lead{margin:0;color:var(--ink-soft);font-size:clamp(15px,1.4vw,17px);line-height:1.55}
.works-group-lead strong,.work-body strong{color:var(--ink);font-weight:600}
.works-proof{margin:2px 0 0;padding:10px 14px;border-left:2px solid var(--accent);background:var(--paper-soft);color:var(--ink-soft);font-size:14px;line-height:1.45}
@media(max-width:599px){.works-group-head{margin-bottom:16px}.works-proof{font-size:13px}}

/* Hero: бренд DFG + дескриптор. Специфичность выше старых .hero h1 из polish.css. */
.hero h1.hero-brand{display:grid;gap:clamp(12px,1.6vw,20px);max-width:none;font-size:inherit;line-height:1;letter-spacing:0;margin-block:20px 28px;font-weight:600}
.hero-brand-mark{font-size:clamp(88px,11vw,168px);line-height:.86;letter-spacing:-.06em}
.hero-brand-line{font-size:clamp(24px,2.4vw,36px);line-height:1.15;letter-spacing:-.025em;max-width:24ch}
.hero-brand-sub{font-size:clamp(15px,1.2vw,18px);font-weight:400;line-height:1.4;letter-spacing:.01em;color:currentColor;opacity:.72}
@media(max-width:600px){.hero h1.hero-brand{margin-block:16px 22px}.hero-brand-mark{font-size:clamp(76px,24vw,112px)}.hero-brand-line{font-size:clamp(24px,7vw,30px)}}

/* Специализация: меньше текста, больше структуры */
.works-group-lead{font-size:clamp(16px,1.5vw,19px);color:var(--ink);max-width:40ch}
.works-chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0;padding:0;list-style:none}
.works-chips li{padding:7px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;line-height:1.2;color:var(--ink-soft);white-space:nowrap}
@media(max-width:480px){.works-chips{gap:6px}.works-chips li{padding:5px 9px;font-size:12px}}
.works-facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:clamp(18px,3vw,40px);margin:8px 0 0}
.works-facts div{display:grid;gap:4px}
.works-facts dt{font-size:clamp(26px,2.6vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.works-facts dd{margin:0;font-size:13px;color:var(--muted);max-width:14ch;line-height:1.3}
@media(max-width:420px){.works-facts{grid-template-columns:repeat(3,1fr);gap:14px}.works-facts dt{font-size:24px}}

/* ---------- Hero: логотип DFG собирается из граней куба ---------- */
/* Один растр lockup как маска; каждая грань вырезана clip-path по своему контуру,
   поэтому цвет задаётся CSS, а геометрия логотипа не перерисована на глаз. */
/* Только знак (без надписи): окно 610×670 из lockup, слои шире окна в 2.2523 раза,
   clip-path отрезает всё правее знака. */
/* Знак — цельный объект: три лицевые грани, 12 слоёв толщины по 1px (сплошной торец)
   и тыльная плита. Ритм «как вывеска в лобби»: знак стоит 4.8 с, затем один полный
   оборот 360° за 2.4 с (ease-in-out quart, без перелёта) и мягко встаёт на место.
   Грани темнеют, когда отворачиваются от зрителя, после оборота по ним проходит блик. */
@property --sh{syntax:"<percentage>";inherits:true;initial-value:0%}
.hero-logo{position:relative;display:block;width:clamp(120px,11vw,176px);aspect-ratio:610/670;perspective:900px}
.hl-tilt,.hl-rot{position:absolute;inset:0;transform-style:preserve-3d}
.hl-tilt{transform:rotateX(8deg)}
.hl,.hl-depth,.hl-back,.hl-bdepth{position:absolute;top:0;left:0;width:225.23%;height:100%;transform-origin:22.2% 50%;
  -webkit-mask:url(../public/assets/logo-lockup.png) 0 0/100% 100% no-repeat;mask:url(../public/assets/logo-lockup.png) 0 0/100% 100% no-repeat}
.hl{transform:translateZ(.5px);backface-visibility:hidden;overflow:hidden;
  background:color-mix(in srgb,var(--c) calc(100% - var(--sh)),#262c29)}
.hl::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.6) 50%,transparent 58%) 100% 0/320% 100% no-repeat;opacity:0}
/* Все грани и надпись белые (требование заказчика): знак читается на видео за счёт двойной тени .hero-logo. */
.hl-top{--c:#ffffff;clip-path:polygon(0 0,43.67% 0,43.67% 24.63%,20.02% 51.49%,0 29.1%)}
.hl-left{--c:#ffffff;clip-path:polygon(0 28.36%,20.09% 50.75%,20.09% 100%,0 100%)}
.hl-right{--c:#ffffff;clip-path:polygon(20.09% 51.49%,44.4% 23.88%,44.4% 100%,20.09% 100%)}
/* Торец — две оболочки. Передняя (.hl-depth) видна только спереди, тыльная (.hl-bdepth) — только сзади,
   каждая с тем же контуром, что и её плита. Раньше передний торец был виден и сзади в зеркальном
   виде и торчал тёмными призраками за буквами тыла. */
.hl-depth,.hl-bdepth{clip-path:polygon(0 0,44.4% 0,44.4% 100%,0 100%);backface-visibility:hidden;
  background:color-mix(in srgb,#2f3834,#7d8782 calc(var(--sh)*2))}
.hl-depth{transform:translateZ(calc(var(--z)*-1px))}
.hl-bdepth{transform:translateZ(calc(var(--z)*-1px)) rotateY(180deg)}
/* Тыл — те же три грани куба, что и спереди: тот же контур и та же маска, развёрнутые на 180°.
   Яркость на ~15% ниже лицевой (свет падает спереди), иерархия верх/лево/право сохранена,
   затемнение при развороте идёт через тот же --sh, поэтому с боков знак не «плывёт» по тону. */
.hl-back{transform:translateZ(-12.5px) rotateY(180deg);backface-visibility:hidden;overflow:hidden;
  background:color-mix(in srgb,var(--c) calc(100% - var(--sh)),#1f2623)}
.hl-b-top{--c:#d9dedb;clip-path:polygon(0 0,43.67% 0,43.67% 24.63%,20.02% 51.49%,0 29.1%)}
.hl-b-left{--c:#aeb7b2;clip-path:polygon(0 28.36%,20.09% 50.75%,20.09% 100%,0 100%)}
.hl-b-right{--c:#79827d;clip-path:polygon(20.09% 51.49%,44.4% 23.88%,44.4% 100%,20.09% 100%)}
.hero-logo{filter:drop-shadow(0 3px 14px rgba(8,10,9,.5))}
/* Логотип статичный: лицевой вид без вращения, наклона и тени. Тыл и торец скрыты (остаются в разметке). */
.hl-tilt{transform:none}
/* Полный lockup заказчика 1374×670: знак (0–588) | черта (716–729) | DYNAMIC FACADE GROUP (835–1373).
   Контейнер = весь lockup, слои 100% ширины; clip-path граней в % слоя, поэтому не меняются. */
/* Ширина подобрана так, чтобы высота lockup была ≈4 строки заголовка: знак ведёт, но не перебивает H1.
   Отступ до заголовка = gap сетки h1 (20px) + небольшой margin. Двойная тень — плотная у кромки букв
   и мягкая широкая: надпись читается и на светлой каске, и на небе. */
.hero-logo{width:clamp(240px,21vw,320px);aspect-ratio:1374/670;perspective:none;margin-bottom:clamp(8px,.8vw,12px);
  filter:drop-shadow(0 1px 2px rgba(8,10,9,.45)) drop-shadow(0 4px 18px rgba(8,10,9,.4))}
.hero-logo .hl{width:100%}
.hl-word{--c:#ffffff;clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%)}
.hl-back,.hl-bdepth,.hl-depth,.hero-logo::after{display:none}
@media(prefers-reduced-motion:no-preference){
  .hero-logo,.hl-rot,.hl-tilt,.hl::after{animation:none!important}
}
@media(prefers-reduced-motion:no-preference){
  .hero-logo{animation:hlEnter .9s cubic-bezier(.16,1,.3,1) both}
  /* Луп 3 с: старт каждого оборота — ровно через 3 с после предыдущего. Оборот занимает 2 с из 3 и идёт по синусоидальной кривой (пик скорости ≈280°/с вместо ≈1000°/с),
     подъём и тень — отдельными слоями на тех же 3 с. */
  .hl-rot{animation:hlTurn 3s cubic-bezier(.37,0,.63,1) 1.1s infinite,hlShade 3s linear 1.1s infinite}
  .hl-tilt{animation:hlLift 3s cubic-bezier(.37,0,.63,1) 1.1s infinite}
  .hl::after{animation:hlSheen 3s linear 1.1s infinite}
  .hero-logo::after{animation:hlShadow 3s linear 1.1s infinite}
}
/* Контактная тень под знаком: сужается, когда знак встаёт ребром, — объём читается без свечения. */
.hero-logo::after{content:"";position:absolute;left:8%;right:8%;bottom:-14%;height:10%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.42),rgba(0,0,0,0));transform-origin:50% 50%;pointer-events:none}
@keyframes hlEnter{from{opacity:0;transform:translateY(14px)}}
/* Угол посчитан по easeInOutQuart в 14 точках: так тень граней (--sh = |sin угла|)
   идёт строго синхронно с поворотом. */
/* Оборот 0–67% цикла (2 с): один интервал, кривая задана в animation-timing-function — никаких ступенек между ключами. */
@keyframes hlTurn{
  0%{transform:rotateY(0)}
  67%,100%{transform:rotateY(360deg)}
}
/* Подъём знака: плавно вверх к 180° и обратно, на землю ровно к концу оборота. */
@keyframes hlLift{
  0%,67%,100%{transform:rotateX(8deg) translateY(0)}
  33.5%{transform:rotateX(8deg) translateY(-9px)}
}
/* Затемнение граней = |sin угла|, точки посчитаны по той же синусоидальной кривой — свет идёт строго за поворотом. */
@keyframes hlShade{
  0%{--sh:0%}3.35%{--sh:1%}6.7%{--sh:5%}10.05%{--sh:10%}13.4%{--sh:17%}16.75%{--sh:24%}20.1%{--sh:29%}
  23.45%{--sh:30%}26.8%{--sh:25%}30.15%{--sh:14%}33.5%{--sh:0%}36.85%{--sh:14%}40.2%{--sh:25%}43.55%{--sh:30%}
  46.9%{--sh:29%}50.25%{--sh:24%}53.6%{--sh:17%}56.95%{--sh:10%}60.3%{--sh:5%}63.65%{--sh:1%}67%,100%{--sh:0%}
}
/* Блик проходит по граням после посадки (70–93% цикла). */
@keyframes hlSheen{0%,69%{opacity:0;background-position:100% 0}72%{opacity:1}90%{opacity:1;background-position:0 0}94%,100%{opacity:0;background-position:0 0}}
/* Тень: на ребре (≈90° и 270°) узкая, в верхней точке подъёма бледнее. */
@keyframes hlShadow{
  0%{transform:scaleX(1);opacity:1}
  10%{transform:scaleX(.9);opacity:.9}
  21.5%{transform:scaleX(.42);opacity:.62}
  33.5%{transform:scaleX(.9);opacity:.55}
  45.5%{transform:scaleX(.42);opacity:.62}
  57%{transform:scaleX(.9);opacity:.9}
  67%,100%{transform:scaleX(1);opacity:1}
}
@media(max-width:600px){.hero-logo{width:clamp(210px,60vw,260px);margin-bottom:12px}}

/* ---------- Hero: видео с монтажником ---------- */
/* Видео растянуто на весь блок (cover), без маски и без тёмного поля: любая маска слева
   читалась как чёрное пятно. Текст держит ровная лёгкая вуаль + низ под цифрами. */
@media(min-width:900px){
  .hero .hero-figure{background:#181c1a}
  .hero .hero-figure img,.hero .hero-figure .hero-video{position:absolute;inset:0;left:0;width:100%;height:100%;
    object-fit:cover;object-position:center center;-webkit-mask-image:none;mask-image:none}
  .hero .hero-figure::after{background:linear-gradient(0deg,rgba(14,17,16,.62) 0,rgba(14,17,16,0) 38%),rgba(14,17,16,.32)}
}
@media(max-width:899px){
  .hero .hero-figure::after{background:linear-gradient(0deg,rgba(14,17,16,.92) 0,rgba(14,17,16,.62) 55%,rgba(14,17,16,.35) 100%)}
}

/* Специализация: меньше «простыни». Лид — одна короткая колонка, пункты — сетка плашек
   с номером, чтобы раскрытие читалось сканированием, а не чтением абзацев. */
#raboty .work-body{display:block;padding:4px 0 28px 60px;counter-reset:wi}
#raboty .work-body>p{max-width:58ch;margin:0 0 18px;font-size:15px;line-height:1.55;color:var(--ink-soft)}
#raboty .work-body ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-size:14px}
#raboty .work-body li{counter-increment:wi;position:relative;padding:14px 14px 14px 46px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);line-height:1.4}
#raboty .work-body li::before{content:counter(wi,decimal-leading-zero);position:absolute;left:14px;top:15px;font:500 11px/1 var(--mono);color:var(--ink-soft);letter-spacing:.04em}
#raboty .work[open] summary .num{color:var(--ink)}
@media(max-width:900px){#raboty .work-body{padding-left:0}}
@media(max-width:600px){#raboty .work-body ul{grid-template-columns:1fr}#raboty .work-body>p{font-size:14px}}