/* ---------------------------------------------------------------
   Планшет подбора. Земля это чёрный планшет, куски материала лежат
   встык, шов между ними 2px земли. Скруглений нет нигде, теней нет
   нигде. Четыре роли цвета и только они.
----------------------------------------------------------------*/
:root{
  --ground:#121214;
  --board:#f2f0ec;
  --accent:#e80058;
  --accent-down:#c4004a;   /* нажатое состояние акцента, не пятая роль */
  --muted:#86817a;
  --seam:2px;
  --display:"Unbounded","Trebuchet MS",system-ui,sans-serif;
  --text:"Onest",system-ui,-apple-system,"Segoe UI",Helvetica,sans-serif;
  --lay:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0}
html{background:var(--ground)}
body{
  background:var(--ground);color:var(--board);
  font:400 16px/1.55 var(--text);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.field :focus-visible,.final :focus-visible,.hero .say :focus-visible,
.picker button[aria-pressed="true"]:focus-visible{outline-color:#fff}
input{caret-color:var(--accent)}
*{scrollbar-color:var(--accent) var(--ground);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--ground)}
::-webkit-scrollbar-thumb{background:rgba(242,240,236,.2)}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.025em;margin:0}
h1{font-size:clamp(28px,3vw,44px);line-height:1.06}
h2{font-size:clamp(26px,3.1vw,42px);line-height:1.06}
h3{font-size:clamp(18px,1.5vw,22px);font-weight:500;letter-spacing:-.015em;line-height:1.2}
p{margin:0}

/* бирка образца: мелкая разрядка по нижней кромке куска */
.tag{
  font:500 11.5px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;
  display:flex;gap:10px;align-items:baseline;
}
.tag b{font-weight:600}
.tag i{font-style:normal;color:rgba(255,255,255,.78)}

/* ---------- навигация ---------- */
header{position:sticky;top:0;z-index:40;background:var(--ground)}
.nav{height:64px;display:flex;align-items:center;gap:28px;padding:0 20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand img{width:26px;height:26px;object-fit:contain}
.brand span{font:700 15px/1 var(--display);letter-spacing:.02em}
.nav nav{display:flex;gap:24px;margin-left:auto;font-size:15px}
.nav nav a{color:rgba(242,240,236,.72);text-decoration:none;transition:color .2s var(--lay)}
.nav nav a:hover{color:var(--board)}
.nav .act{
  background:var(--accent);color:#fff;padding:12px 20px;font:500 15px/1 var(--text);
  text-decoration:none;transition:background-color .2s var(--lay);
}
.nav .act:hover{background:var(--accent-down)}
@media (max-width:900px){.nav nav{display:none}.nav{gap:0;justify-content:space-between}}

/* ---------- планшет ---------- */
.board{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--seam);padding:0 var(--seam) var(--seam)}
.piece{position:relative;overflow:hidden;background:rgba(242,240,236,.055);min-height:0}
button.piece{display:block;width:100%;padding:0;border:0;cursor:pointer;font:inherit;color:inherit;text-align:left}
button.piece img{transition:transform .7s var(--lay)}
button.piece:hover img{transform:scale(1.035)}
button.piece:hover .tag,button.piece:focus-visible .tag{background:linear-gradient(0deg,rgba(232,0,88,.92),rgba(232,0,88,0))}
button.piece .tag b::after{content:' \2192';opacity:0;transition:opacity .25s}
button.piece:hover .tag b::after,button.piece:focus-visible .tag b::after{opacity:1}
figure.piece{cursor:default}
/* Подпись лежит поверх кадра. Без этого она уходила под низ плитки
   и обрезалась overflow:hidden — названия объектов не показывались вовсе. */
.piece .tag{
  position:absolute;left:0;right:0;bottom:0;padding:13px 16px;color:#fff;
  background:linear-gradient(0deg,rgba(18,18,20,.88),rgba(18,18,20,0));
  transition:background-color .25s var(--lay);
}
/* ссылка-плитка на страницах услуг ведёт себя как кнопка-плитка на планшете */
a.piece{display:block;text-decoration:none;color:inherit}
a.piece img{transition:transform .7s var(--lay)}
a.piece:hover img{transform:scale(1.035)}
a.piece:hover .tag,a.piece:focus-visible .tag{background:linear-gradient(0deg,rgba(232,0,88,.92),rgba(232,0,88,0))}
a.piece .tag b::after{content:' \2192';opacity:0;transition:opacity .25s}
a.piece:hover .tag b::after,a.piece:focus-visible .tag b::after{opacity:1}
.piece figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  background:linear-gradient(0deg,rgba(18,18,20,.9),rgba(18,18,20,0));
  color:#fff;
}

/* герой */
.hero{min-height:min(calc(100dvh - 66px),880px);grid-template-rows:1.18fr .82fr}
.hero .lead{grid-column:span 7;grid-row:span 2}
.hero .say{
  grid-column:span 5;background:var(--accent);color:#fff;
  padding:30px;display:flex;flex-direction:column;justify-content:center;gap:20px;
}
.hero .say p{font-size:clamp(16px,1.25vw,18px);max-width:34ch;color:#fff}
.hero .say a{
  align-self:flex-start;background:#fff;color:var(--accent);
  padding:16px 24px;font:600 16px/1 var(--text);text-decoration:none;
  transition:transform .2s var(--lay);
}
.hero .say a:hover{transform:translateX(5px)}
.hero .sm-a{grid-column:span 2}
.hero .sm-b{grid-column:span 3}
@media (max-width:900px){
  .hero{min-height:0}
  .hero .lead{grid-column:1/-1;aspect-ratio:4/3}
  .hero .say{grid-column:1/-1}
  .hero .sm-a,.hero .sm-b{grid-column:span 6;aspect-ratio:1}
}

/* ---------- объекты ---------- */
.band{padding:58px 24px 26px;max-width:1680px}
.band p{color:rgba(242,240,236,.72);max-width:62ch;margin-top:16px;font-size:17px}
.picker{
  display:flex;gap:var(--seam);padding:0 var(--seam);margin-bottom:var(--seam);
  overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;
}
.picker button{
  flex:0 0 auto;background:rgba(242,240,236,.055);color:rgba(242,240,236,.72);border:0;cursor:pointer;
  padding:18px 20px;text-align:left;font:500 12px/1 var(--text);white-space:nowrap;
  letter-spacing:.14em;text-transform:uppercase;scroll-snap-align:start;
  transition:background-color .25s var(--lay),color .25s var(--lay);
}
.picker button em{font-style:normal;font-weight:700;margin-right:10px}
.picker button:hover{background:rgba(242,240,236,.12);color:var(--board)}
.picker button[aria-pressed="true"]{background:var(--accent);color:#fff}

/* планшет кладётся рядами, каждый ряд набирается ровно на 12 колонок,
   высота ряда общая, поэтому куски стыкуются без прорех */
#objects .board{grid-auto-rows:min(15.4vw,226px)}
#objects .piece{grid-column:span var(--cs,4);grid-row:span var(--rs,2)}
/* разрыв между «как задумано» и «как вышло»: во всю ширину планшета */
#objects .split{grid-column:1/-1;grid-row:span 1;background:var(--accent);color:#fff;
  display:flex;align-items:center;gap:16px;padding:18px 20px;min-height:0}
#objects .split b{font:600 12px/1 var(--text);letter-spacing:.16em;text-transform:uppercase}
#objects .split span{font-size:15px;color:#fff;opacity:.92}
@media (max-width:900px){
  #objects .board{grid-auto-rows:19vw}
  #objects .piece{grid-column:span 6;grid-row:span 2}
}
@media (max-width:560px){
  #objects .board{grid-auto-rows:22vw}
  #objects .piece{grid-column:1/-1;grid-row:span 3}
}

/* ---------- что делаем: розовое поле ---------- */
.field{background:var(--accent);color:#fff;margin:var(--seam) var(--seam) 0;padding:48px 24px}
.field h2{max-width:20ch}
.svc{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr)}
.svc div{padding:28px 30px;border-top:1px solid rgba(255,255,255,.55)}
.svc div + div{border-left:1px solid rgba(255,255,255,.55)}
.svc h3{margin-bottom:10px}
.svc p{color:#fff;font-size:16px}
.styles{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.styles button{border:1px solid rgba(255,255,255,.6);background:transparent;color:inherit;padding:9px 15px;font:400 14px/1 var(--text);cursor:pointer;transition:background-color .2s var(--lay),color .2s var(--lay),border-color .2s var(--lay)}
.styles button:hover,.styles button:focus-visible{background:#fff;color:var(--ground);border-color:#fff}
@media (max-width:860px){
  .svc{grid-template-columns:1fr}
  .svc div + div{border-left:0}
}

/* ---------- ход работы ---------- */
.steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--seam);padding:0 var(--seam)}
.steps li{list-style:none;background:rgba(242,240,236,.055);padding:26px 22px 30px;display:flex;flex-direction:column;gap:14px;min-height:210px}
.steps b{font:700 34px/1 var(--display);color:var(--accent);letter-spacing:-.03em}
.steps h3{color:var(--board);overflow-wrap:anywhere}
.steps p{color:rgba(242,240,236,.62);font-size:15px;overflow-wrap:anywhere}
@media (max-width:1100px){.steps{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.steps li{min-height:0}}

/* ---------- переписка ---------- */
.talk{background:var(--board);color:var(--ground);margin:var(--seam);padding:30px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:30px}
.talk h2{color:#121214}
.talk .intro{display:flex;flex-direction:column;min-height:0}
.talk .intro p{margin-top:16px;color:rgba(18,18,20,.68);font-size:16.5px;max-width:34ch}
/* окно переписки: рамка и своя земля, чтобы читалось как чат, а не как текст на странице */
.win{border:1px solid rgba(18,18,20,.18);background:#fff;display:flex;flex-direction:column;min-height:0;min-width:0}
.win-top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(18,18,20,.12);background:rgba(18,18,20,.04)}
.win-top img{width:20px;height:20px;object-fit:contain}
.win-top b{font:600 13px/1 var(--text);letter-spacing:.08em;text-transform:uppercase}
.win-top span{margin-left:auto;font-size:12.5px;color:rgba(18,18,20,.66)}
.chat{flex:1 1 auto;min-height:380px;max-height:460px;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:10px;align-items:flex-start;max-width:86%}
.row.me{align-self:flex-end;flex-direction:row-reverse;max-width:78%}
.row.her{align-self:flex-start}
.row .who{flex:none;width:26px;height:26px;background:rgba(18,18,20,.075);display:grid;place-items:center;margin-top:2px}
.row .who img{width:17px;height:17px;object-fit:contain}
.msg{padding:13px 16px;font-size:15.5px;line-height:1.5;min-width:0;overflow-wrap:anywhere}
.msg.me{background:var(--accent);color:#fff}
.msg.her{background:rgba(18,18,20,.075);color:var(--ground)}
.msg.sys{align-self:center;background:transparent;color:rgba(18,18,20,.62);font-size:14px;padding:4px 0;text-align:center;max-width:100%}
.msg.sys a{color:var(--accent-down)}
.wait-note{font-size:13px;color:rgba(18,18,20,.62);margin-top:6px}

.dots{display:inline-flex;gap:5px;align-items:center;height:14px}
.dots i{width:6px;height:6px;background:rgba(18,18,20,.5);display:block}
.dots i:nth-child(2){animation-delay:.18s}
.dots i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
/* --- Образец. Человечек студии собран из тех же кусков материала,
   что и весь планшет: прямоугольники, нулевой радиус, четыре цвета.
   Сначала проступает контур, потом в него ложится материал. --- */
.pal{margin-top:auto;padding-top:34px;align-self:end}
.pal figcaption{margin-top:14px;font-size:13.5px;color:rgba(18,18,20,.6);max-width:30ch}
.pal svg{width:min(232px,62%);height:auto;display:block;overflow:visible}
.pal .ink{fill:none;stroke:#121214;stroke-width:2;
  stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);
  animation:ink 1.1s var(--lay) forwards}
.pal .fill{opacity:0;animation:fill .5s var(--lay) .85s forwards}

/* Человечек не стоит столбом: он подпрыгивает, разворачивается к окну
   переписки и тычет в него рукой, потом успокаивается до следующего круга. */
.pal .guy{transform-box:fill-box;transform-origin:50% 100%;animation:hop 4.6s var(--lay) 1s infinite}
.pal .arm{transform-box:fill-box;transform-origin:0% 50%;animation:point 4.6s var(--lay) 1s infinite}
.pal .head{transform-box:fill-box;transform-origin:50% 100%;animation:nod 4.6s var(--lay) 1s infinite}
.pal .sw{transform-box:fill-box;animation:fan 4.6s var(--lay) 1s infinite}
.pal .eye{animation:wink 4.6s steps(1,end) 1s infinite}

@keyframes ink{to{stroke-dashoffset:0}}
@keyframes fill{to{opacity:1}}
/* два прыжка подряд, потом поворот корпуса вправо и возврат */
@keyframes hop{
  0%{transform:translateY(0) rotate(0)}
  8%{transform:translateY(-13px) rotate(0)}
  16%{transform:translateY(0) rotate(0)}
  23%{transform:translateY(-8px) rotate(0)}
  30%{transform:translateY(0) rotate(0)}
  42%,72%{transform:translateY(0) rotate(5deg)}
  82%{transform:translateY(-5px) rotate(0)}
  90%,100%{transform:translateY(0) rotate(0)}
}
/* рука выстреливает в сторону окна на том же такте, что и поворот */
@keyframes point{
  0%,32%{transform:scaleX(.3)}
  42%,72%{transform:scaleX(1)}
  82%,100%{transform:scaleX(.3)}
}
@keyframes nod{
  0%,6%{transform:rotate(0)}
  12%{transform:rotate(-7deg)}
  20%,36%{transform:rotate(0)}
  46%,70%{transform:rotate(6deg)}
  80%,100%{transform:rotate(0)}
}
@keyframes fan{0%,22%,100%{transform:translate(0,0)}30%,70%{transform:translate(var(--dx,0),var(--dy,0))}}
@keyframes wink{0%,40%,44%,100%{opacity:1}41%,43%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .pal .ink{stroke-dashoffset:0;animation:none}
  .pal .fill{opacity:1;animation:none}
  .pal .sw,.pal .head,.pal .eye,.pal .guy{animation:none}
  .pal .arm{animation:none;transform:scaleX(1)}
}
@media (max-width:900px){.pal{display:none}}
.chips{display:flex;flex-wrap:wrap;gap:var(--seam);padding:12px 16px 0}
.chips button{background:rgba(18,18,20,.075);color:rgba(18,18,20,.76);border:0;cursor:pointer;padding:10px 13px;font:400 14px/1 var(--text);transition:background-color .2s var(--lay),color .2s var(--lay)}
.chips button:hover{background:var(--accent);color:#fff}
@media (max-width:900px){
  .chips{flex-wrap:nowrap;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .chips::-webkit-scrollbar{display:none}
  .chips button{white-space:nowrap;flex:none}
  .chat{min-height:46vh;max-height:58vh}
}
.ask{display:flex;align-items:stretch;gap:var(--seam);padding:12px 16px 16px;border-top:1px solid rgba(18,18,20,.12);margin-top:12px}
.ask label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ask textarea{flex:1;min-width:0;box-sizing:border-box;background:#fff;border:1px solid rgba(18,18,20,.22);color:var(--ground);padding:15px 18px;font:400 16px/1.35 var(--text);resize:none;overflow:hidden;max-height:7.2em;display:block}
.ask textarea::placeholder{color:rgba(18,18,20,.55)}
.ask textarea:disabled{background:rgba(18,18,20,.06);color:rgba(18,18,20,.62)}
.ask button{flex:none;background:var(--accent);color:#fff;border:0;cursor:pointer;width:54px;display:grid;place-items:center;transition:background-color .2s var(--lay)}
.ask button svg{width:20px;height:20px;display:block}
.ask button:hover:not(:disabled){background:var(--accent-down)}
.ask button:disabled{background:rgba(18,18,20,.3);cursor:default}
.note{margin-top:16px;color:rgba(18,18,20,.62);font-size:13.5px}
@media (max-width:900px){.talk{grid-template-columns:minmax(0,1fr)}}

/* ---------- финал ---------- */
.final{background:var(--accent);color:#fff;margin:var(--seam);padding:52px 24px;display:flex;flex-wrap:wrap;gap:34px;align-items:flex-end;justify-content:space-between}
.final h2{max-width:15ch}
.final .mail{font:700 clamp(22px,3vw,46px)/1 var(--display);letter-spacing:-.03em;color:#fff;text-decoration:none;border-bottom:3px solid #fff;padding-bottom:6px;display:inline-block}
.final .mail:hover{border-bottom-color:rgba(255,255,255,.5)}
.final .side p{color:#fff;margin-bottom:18px;max-width:34ch;font-size:16.5px}
footer{padding:26px 24px 44px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;color:var(--muted);font-size:14px}
footer a{color:var(--muted)}
footer a:hover{color:var(--accent)}

/* просторнее на широких экранах, значениями, а не вычислением */
@media (min-width:1000px){
  .band{padding:88px 44px 34px}
  .field{padding:84px 52px}
  .svc{margin-top:50px}
  .svc div{padding:30px 34px}
  .styles{margin-top:42px}
  .talk{padding:56px;gap:52px}
  .final{padding:96px 52px;gap:72px}
  .hero .say{padding:44px}
  footer{padding:26px 44px 44px}
}



/* ---------- когда горит срок: кейсы ---------- */
.urgent{margin:var(--seam) var(--seam) 0;background:rgba(242,240,236,.055);padding:40px 24px}
.urgent .intro{max-width:66ch}
.urgent .intro p{color:rgba(242,240,236,.72);margin-top:16px;font-size:17px}
.urgent .intro p b{color:var(--board);font-weight:600}
.cases{margin-top:34px;display:grid;gap:var(--seam);grid-template-columns:repeat(3,1fr)}
.case{background:var(--ground);display:flex;flex-direction:column}
.case .shots{display:grid;grid-template-columns:1fr 1fr;gap:var(--seam)}
.case .shots figure{position:relative;aspect-ratio:3/4;overflow:hidden;background:rgba(242,240,236,.055)}
.case .shots .tag{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;
  background:linear-gradient(0deg,rgba(18,18,20,.9),rgba(18,18,20,0));color:#fff}
.case .txt{padding:22px 22px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.case h3{color:var(--board)}
.case p{color:rgba(242,240,236,.68);font-size:15px}
.case .when{font:600 12px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--board)}
.case a{margin-top:auto;color:var(--board);font-size:14.5px;text-decoration-color:var(--accent)}
.urgent .foot{margin-top:28px;color:rgba(242,240,236,.72);font-size:16px}
@media (max-width:1000px){.cases{grid-template-columns:1fr}}

/* ---------- узкое окно: как идёт проект ---------- */
.reel{margin:var(--seam);border:1px solid rgba(242,240,236,.14);background:rgba(242,240,236,.04);overflow:hidden}
.reel-top{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid rgba(242,240,236,.14)}
.reel-top b{font:600 12px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--board)}
.reel-top span{font-size:13px;color:rgba(242,240,236,.62)}
.reel-top u{margin-left:auto;text-decoration:none;font:600 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:rgba(242,240,236,.72)}
.reel svg{display:block;width:100%;height:auto}
.reel svg text{font-family:var(--text);fill:rgba(242,240,236,.72)}
.reel .cap{font:600 13px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;fill:var(--board)}
.ph{opacity:0}
.sweep{fill:var(--accent);opacity:0}

/* ---------- процесс: лента кадров со стройки ---------- */
.proc{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:var(--seam);
      padding:0 var(--seam) var(--seam);overflow-x:auto;scroll-snap-type:x proximity}
.proc figure{position:relative;aspect-ratio:3/4;overflow:hidden;background:rgba(242,240,236,.055);scroll-snap-align:start}
.proc img{transition:transform .7s var(--lay)}
.proc figure:hover img{transform:scale(1.04)}

@keyframes draw{0%{stroke-dashoffset:1400}12%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes ph1{0%,1%{opacity:0}3%,23%{opacity:1}24%,100%{opacity:0}}
@keyframes ph2{0%,25%{opacity:0}27%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes ph3{0%,50%{opacity:0}52%,73%{opacity:1}74%,100%{opacity:0}}
@keyframes ph4{0%,75%{opacity:0}77%,98%{opacity:1}99%,100%{opacity:0}}
@keyframes sweep{0%,53%{opacity:0;transform:translateX(-110%)}56%{opacity:.85}66%{opacity:.85}70%,100%{opacity:0;transform:translateX(110%)}}

/* Фазы сменяют друг друга без наложения: подписи стоят в одной точке,
   и две видимые сразу читались бы как каша. */
@media (prefers-reduced-motion:no-preference){
  .draw{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 10s linear infinite}
  .ph1{animation:ph1 10s linear infinite}
  .ph2{animation:ph2 10s linear infinite}
  .ph3{animation:ph3 10s linear infinite}
  .ph4{animation:ph4 10s linear infinite}
  .sweep{animation:sweep 10s linear infinite}
  .still{opacity:0}
}
/* Без движения показываем один кадр, а не все четыре разом. */
@media (prefers-reduced-motion:reduce){
  .draw{stroke-dashoffset:0}
  .furn{opacity:1}
  .still{opacity:1}
}

/* ---------- куски кладутся на планшет ---------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .dots i{animation:blink 1.1s infinite}
  .lay{clip-path:inset(0 0 100% 0);transform:translateY(16px);opacity:.001}
  .lay.down{clip-path:inset(0 0 0 0);transform:none;opacity:1;
    transition:clip-path .42s var(--lay),transform .42s var(--lay),opacity .28s linear;
    transition-delay:calc(var(--i,0) * 55ms)}
}

/* плитки на страницах услуг: две в ряд, на телефоне одна */
.board .piece[style*="--cs"]{grid-column:span var(--cs,6);grid-row:span var(--rs,2)}
@media (max-width:620px){.board a.piece{grid-column:1/-1;grid-row:span 2}}

/* ---------- цены: те же карточки, что у хода работы ---------- */
.price{grid-template-columns:repeat(3,minmax(0,1fr))}
.price b{font-size:clamp(28px,3.4vw,44px);white-space:nowrap}
.price b s{text-decoration:none;font-size:.62em;margin-left:2px}
.price li{min-height:0}
@media (max-width:900px){.price{grid-template-columns:minmax(0,1fr)}}

/* переход из цен в переписку */
.ask-price{margin-top:24px}
.ask-price button{
  background:var(--accent);color:#fff;border:0;cursor:pointer;
  padding:15px 22px;font:500 13px/1 var(--text);letter-spacing:.12em;text-transform:uppercase;
  transition:background-color .2s var(--lay);
}
.ask-price button:hover{background:var(--accent-down)}

/* разделитель в ленте объектов */
.picker-sep{
  flex:0 0 auto;display:flex;align-items:center;padding:0 18px;
  font:600 11px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(242,240,236,.42);
}

/* шапка выбранного объекта: имя, подпись, статус */
.obj-head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;
  margin:0 var(--seam) var(--seam);padding:20px 22px;background:rgba(242,240,236,.055);
}
.obj-head b{font:700 clamp(20px,2.2vw,30px)/1 var(--display);letter-spacing:-.02em;color:var(--board)}
.obj-head span{font-size:15.5px;color:rgba(242,240,236,.66)}
.obj-head u{
  margin-left:auto;text-decoration:none;font:600 11px/1 var(--text);
  letter-spacing:.16em;text-transform:uppercase;padding:8px 12px;
}
.obj-head u.done{background:rgba(242,240,236,.12);color:var(--board)}
.obj-head u.wip{background:var(--accent);color:#fff}
@media (max-width:620px){.obj-head u{margin-left:0}}

/* листы документации: белая подложка, чертёж не должен тонуть в тёмном */
.docs{grid-auto-rows:min(8.2vw,112px)}
.docs .piece{background:#fff}
.docs .piece img{object-fit:contain;background:#fff;padding:10px}
@media (max-width:900px){.docs{grid-auto-rows:min(17vw,130px)}
.docs a.piece,.docs .piece{grid-column:span 12}}
.docs-note{padding-top:22px}
.docs-note p{color:rgba(242,240,236,.72);max-width:62ch;font-size:16px}

/* Блок цен: заголовок слева, кнопка справа — иначе правая половина
   полосы остаётся пустой чернотой. */
@media (min-width:900px){
  #price .band{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
  #price .band > :first-child{flex:0 1 auto}
  #price .band h2{margin:0}
  #price .band p{max-width:52ch;margin-top:14px}
  .ask-price{margin-top:0;flex:none}
}
.docs-note{padding-top:16px;padding-bottom:10px}
.docs-note p{max-width:70ch}