/* О компании + Контакты + тендер-плитки */

/* ---------- О компании ---------- */
.about-stats{
  list-style:none;margin:clamp(20px,3.4vh,40px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,40px)
}
.about-stat{border-top:2px solid var(--ink);padding-top:clamp(12px,1.6vh,18px)}
.about-stat strong{
  display:block;font-weight:600;letter-spacing:-.045em;line-height:1;
  font-size:clamp(44px,5.6vw,88px);font-variant-numeric:tabular-nums
}
.about-stat strong>span{display:inline}
.about-stat strong small{font-size:.42em;letter-spacing:-.02em;margin-left:.14em;font-weight:600;white-space:nowrap}
.about-stat>span{display:block;margin-top:10px;color:var(--muted);font-size:clamp(13px,1.05vw,15px);line-height:1.4;max-width:22ch}

.about-points{
  list-style:none;margin:clamp(24px,4.4vh,52px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,40px)
}
.about-point{border-top:1px solid var(--line);padding-top:clamp(12px,1.6vh,18px)}
.about-point .mono{display:block;color:var(--muted);margin-bottom:10px}
.about-point h3{margin:0 0 8px;font-size:clamp(17px,1.35vw,20px);line-height:1.2;letter-spacing:-.02em;font-weight:600}
.about-point p{margin:0;color:var(--ink-soft);font-size:clamp(13px,1vw,15px);line-height:1.5}

/* ---------- Контакты (тёмный блок на всю ширину) ---------- */
.contacts{
  background:var(--dark);color:#eef0ee;
  border-top:0
}
.contacts-inner{
  width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,5vw,88px);align-items:stretch
}
.contacts-main{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(24px,4vh,48px)}
.contacts .mono{color:#9aa1a5}
.contacts h2{
  margin:12px 0 0;color:#fff;font-weight:600;letter-spacing:-.04em;line-height:1;
  font-size:clamp(36px,4.8vw,72px);max-width:11ch
}
.contacts-lead{margin:clamp(14px,2vh,22px) 0 0;color:#c4c9cc;font-size:clamp(15px,1.25vw,18px);line-height:1.55;max-width:44ch}

.contacts-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--dark-line)}
.contacts-list li{
  display:grid;grid-template-columns:minmax(96px,140px) 1fr;gap:16px;
  padding:clamp(10px,1.4vh,14px) 0;border-bottom:1px solid var(--dark-line);font-size:clamp(14px,1.1vw,16px);line-height:1.45
}
.contacts-list li[hidden]{display:none}
.contacts-list .mono{padding-top:3px;font-size:11px}
.contacts-list a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);transition:border-color .25s ease}
.contacts-list a:hover{border-color:var(--accent)}

/* Плитки — по мотивам блока «Стать поставщиком / Пригласить в тендер» на facadesolutions.ru */
.contacts-actions{display:grid;grid-template-rows:1.25fr 1fr;gap:clamp(12px,1.6vw,20px)}
.tile{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;text-align:left;
  min-height:clamp(150px,22vh,240px);padding:clamp(20px,2.2vw,32px);border-radius:14px;border:1px solid var(--dark-line);
  background:var(--dark-soft);color:#fff;font:inherit;cursor:pointer;overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),background-color .35s ease,border-color .35s ease,color .35s ease
}
.tile .mono{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9aa1a5;transition:color .35s ease}
.tile-title{display:block;margin-top:auto;padding-right:64px;font-size:clamp(24px,2.5vw,38px);line-height:1.05;letter-spacing:-.035em;font-weight:600}
.tile-text{display:block;margin-top:10px;padding-right:64px;color:#b5bbbe;font-size:clamp(13px,1vw,15px);line-height:1.45;max-width:38ch;transition:color .35s ease}
.tile-arrow{
  position:absolute;right:clamp(18px,2vw,28px);bottom:clamp(18px,2vw,28px);
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  border:1px solid currentColor;transition:transform .45s cubic-bezier(.22,1,.36,1),background-color .35s ease,color .35s ease
}
.tile-arrow svg{width:18px;height:18px;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.tile:hover,.tile:focus-visible{transform:translateY(-3px);border-color:#4a5157}
.tile:hover .tile-arrow svg,.tile:focus-visible .tile-arrow svg{transform:rotate(45deg)}
.tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tile:active{transform:translateY(0)}

.tile--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tile--primary .mono{color:rgba(22,22,22,.66)}
.tile--primary .tile-text{color:rgba(22,22,22,.78)}
.tile--primary:hover,.tile--primary:focus-visible{border-color:#fff;background:#f5cc35}
.tile--primary .tile-arrow{background:var(--accent-ink);color:var(--accent);border-color:var(--accent-ink)}
/* Тач-экраны: визуальный размер ссылок прежний, зона нажатия ≥44px через невидимый ::before. */
@media(pointer:coarse){
  .contacts-list a,.site-footer a.note,.brand{position:relative}
  .contacts-list a::before,.site-footer a.note::before,.brand::before{content:"";position:absolute;inset:-14px -6px}
  .objmap-card-nav button,.objmap.is-narrow .objmap-card-nav button{width:40px;height:40px;font-size:18px}
}

/* Стрелка «Пригласить в тендер»: раз в 5 с уходит вверх-вправо, следом входит новая,
   кружок коротко «кивает». Спокойный зовущий ритм вместо пульсаций и свечения.
   Конец цикла выглядит как начало (стрелка в центре), поэтому повтор без скачка. */
.tile-arrow--beckon svg{overflow:hidden}
.tile-arrow--beckon .ta-b{transform:translate(-15px,15px)}
.tile:hover .tile-arrow--beckon svg,.tile:focus-visible .tile-arrow--beckon svg{transform:none}
.tile--primary:hover .tile-arrow--beckon,.tile--primary:focus-visible .tile-arrow--beckon{transform:scale(1.1)}
@media (prefers-reduced-motion:no-preference){
  .tile-arrow--beckon{animation:taNod 5s cubic-bezier(.6,0,.2,1) 1.2s infinite}
  .tile-arrow--beckon .ta-a{animation:taOut 5s cubic-bezier(.7,0,.2,1) 1.2s infinite}
  .tile-arrow--beckon .ta-b{animation:taIn 5s cubic-bezier(.2,.7,.2,1) 1.2s infinite}
}
@keyframes taOut{0%,72%{transform:translate(0,0)}86%,100%{transform:translate(15px,-15px)}}
@keyframes taIn{0%,78%{transform:translate(-15px,15px)}94%,100%{transform:translate(0,0)}}
@keyframes taNod{0%,74%,100%{scale:1}84%{scale:1.08}}

/* Рамка плитки тендера: тонкий внутренний контур (как рамка на чертеже) и по нему
   медленно идёт тёмный отрезок, один круг за 7 с. Без свечения, только линия 1.5px.
   На hover контур целиком становится тёмным. */
@property --tf-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.tile--primary::before,.tile--primary::after{content:"";position:absolute;inset:9px;border-radius:9px;padding:1.5px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.tile--primary::before{background:conic-gradient(from var(--tf-a),rgba(22,22,22,.16) 0 72%,rgba(22,22,22,.9) 90%,rgba(22,22,22,.16) 100%)}
.tile--primary::after{background:var(--accent-ink);opacity:0;transition:opacity .4s ease}
.tile--primary:hover::after,.tile--primary:focus-visible::after{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .tile--primary::before{animation:tfTrace 7s linear infinite}
}
@keyframes tfTrace{to{--tf-a:360deg}}

/* ---------- Модалка брифа: шапка с крестиком и кнопки всегда на экране ---------- */
#brief{max-height:calc(100dvh - 32px);overflow:hidden;display:none}
#brief[open]{display:flex;flex-direction:column}
#brief .dialog-inner{overflow:auto;overscroll-behavior:contain;padding-top:0;padding-bottom:0;max-height:calc(100dvh - 34px)}
.brief-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 calc(-1*clamp(20px,3vw,32px));padding:16px clamp(20px,3vw,32px) 14px;background:var(--paper);border-bottom:1px solid var(--line)}
.brief-bar h2{font-size:clamp(20px,2.4vw,26px);margin:0}
.brief-x{flex:none;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:background .2s ease,border-color .2s ease}
.brief-x:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.brief-x:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
#brief .dialog-actions{position:sticky;bottom:0;z-index:2;margin:0 calc(-1*clamp(20px,3vw,32px));padding:14px clamp(20px,3vw,32px) max(16px,env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line)}
/* Короткие поля попарно: тендерная форма помещается в 800px высоты без прокрутки. */
@media(min-width:601px){
  #brief{max-width:720px}
  #brief .dialog-inner{grid-template-columns:1fr 1fr;column-gap:16px;row-gap:10px}
  #brief .dialog-inner>.note{margin:0}
  #brief .dialog-inner>:is(.brief-bar,.note,.dialog-actions),#brief .dialog-inner>label:has(textarea,select){grid-column:1/-1}
  #brief textarea{min-height:64px;height:64px}
  #brief .dialog-inner:has(.brief-tender[hidden])>label:has([name=contact]){grid-column:1/-1}
}
@media(max-width:600px){
  #brief{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0}
  #brief .dialog-inner{max-height:100dvh;height:100%}
  .brief-bar{padding-top:max(14px,env(safe-area-inset-top))}
  #brief .dialog-actions .btn{flex:1}
}

/* ---------- Поля тендера в диалоге ---------- */
.brief-tender{display:contents}
.brief-tender[hidden]{display:none}

/* ---------- Планшет и мобильные ---------- */
@media (max-width:1100px){
  .about-stats{grid-template-columns:repeat(2,1fr);row-gap:28px}
  .about-points{grid-template-columns:repeat(2,1fr);row-gap:24px}
  .contacts-inner{grid-template-columns:1fr}
  .contacts h2{max-width:none}
  .contacts-actions{grid-template-rows:none;grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .about-stat strong{font-size:clamp(40px,13vw,56px)}
  .about-points{grid-template-columns:1fr}
  .contacts-actions{grid-template-columns:1fr}
  .tile{min-height:150px}
  .contacts-list li{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:reduce){
  .tile,.tile-arrow,.tile-arrow svg{transition:none}
  .tile:hover{transform:none}
}

/* Секция растёт с содержимым: фиксированная высота обрежет факты на низком экране. */
main>section#o-kompanii{height:auto;overflow:visible}
.company-resources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px);margin:0;padding:0}
.company-resources>div{min-width:0;border-top:2px solid var(--ink);padding-top:16px}
.company-resources dt{font-size:clamp(36px,4.2vw,64px);font-weight:600;letter-spacing:-.045em;line-height:1.1;font-variant-numeric:tabular-nums}
.company-resources dt small{font-size:.42em;letter-spacing:0;white-space:nowrap}
.company-resources dd{margin:10px 0 0;color:var(--muted);font-size:14px;line-height:1.45}
#o-kompanii .company-principles{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 32px;margin-top:32px}
.company-principles .about-point{min-width:0}
.company-principles .mono{font-size:10px;letter-spacing:.06em}
.company-principles .company-register{margin-top:12px;font-size:12px;overflow-wrap:anywhere}
@media(max-width:1100px){#o-kompanii .company-principles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){#o-kompanii .company-principles{grid-template-columns:1fr}.company-resources{grid-template-columns:1fr;gap:18px}.company-resources>div{display:grid;grid-template-columns:minmax(110px,.8fr) minmax(0,1fr);align-items:center;gap:12px}.company-resources dd{margin:0}}