/* Шапка главной: два предмета в противоположных углах вместо строки.
   Слева светлая плита с лок-апом, справа тёмная с меню. Обе с фаской по верхней кромке. */

/* Обёртка повторяет меру контента, поэтому предметы садятся на ту же колонку,
   что и весь макет, и не разъезжаются из-за полосы прокрутки. */
.top{position:fixed;left:0;right:0;top:32px;z-index:30;pointer-events:none}
.top__in{width:min(1248px,100% - 48px);margin-inline:auto;
  display:flex;align-items:flex-start;justify-content:flex-end}
.drawer{position:relative;pointer-events:auto;width:700px;height:396px;flex:none;
  background:#1A1A1C;border:1px solid #3A3A42;border-radius:var(--r,12px);
  box-shadow:inset 0 1px 0 rgba(243,242,238,.12),0 24px 64px -24px rgba(0,0,0,.6);
  clip-path:inset(0 0 calc(100% - 64px) calc(100% - 119px) round 12px);
  transition:clip-path .44s cubic-bezier(.23,1,.32,1)}
.drawer.is-open{clip-path:inset(0 round 12px)}
.drawer__head{position:absolute;right:8px;top:8px;z-index:2}
.drawer__body{position:absolute;inset:0;padding:80px 24px 20px;display:flex;flex-direction:column;gap:16px}

.drawer__btn{display:flex;align-items:center;gap:12px;height:48px;padding:0 16px;cursor:pointer;
  background:none;border:0;border-radius:var(--r2,8px);
  font:600 15px/1 'Mulish',sans-serif;color:#F3F2EE;
  transition:background .16s cubic-bezier(.23,1,.32,1)}
.drawer__btn em{display:block;width:16px;height:8px;position:relative;flex:none}
.drawer__btn em::before,.drawer__btn em::after{content:'';position:absolute;left:0;right:0;height:1px;
  background:currentColor;transition:transform .28s cubic-bezier(.23,1,.32,1)}
.drawer__btn em::before{top:0}
.drawer__btn em::after{bottom:0}
.drawer.is-open .drawer__btn em::before{transform:translateY(3.5px) rotate(12deg)}
.drawer.is-open .drawer__btn em::after{transform:translateY(-3.5px) rotate(-12deg)}
@media (hover:hover) and (pointer:fine){ .drawer__btn:hover{background:#26262A} }
.drawer__btn:focus-visible{outline:2px solid #5BAAB0;outline-offset:-2px}

.cards{flex:1;display:flex;gap:2px;min-height:0}
.card{position:relative;flex:1 1 0;min-width:0;overflow:hidden;text-decoration:none;
  background:#26262A;border-radius:6px}
.card::before{content:'';position:absolute;inset:0;background-image:var(--img);
  background-size:cover;background-position:center;opacity:.16;
  transition:opacity .34s cubic-bezier(.23,1,.32,1)}
/* Скрим: без него Snow на светлом кадре давал около 3:1. */
.card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:62%;
  background:linear-gradient(to bottom,rgba(26,26,28,0),#1A1A1C 78%);
  opacity:0;transition:opacity .3s cubic-bezier(.23,1,.32,1);pointer-events:none}
.card__edge{position:absolute;left:50%;bottom:18px;margin-left:-8px;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font:600 12px/1 'Mulish',sans-serif;color:#B8AFA3;white-space:nowrap;transition:opacity .18s}
.card__face{position:absolute;z-index:2;left:20px;right:20px;bottom:20px;width:258px;opacity:0;
  transition:opacity .26s cubic-bezier(.23,1,.32,1) .1s}
.card__face b{display:block;font:600 20px/1.2 'Mulish',sans-serif;color:#F3F2EE;letter-spacing:-.01em}
.card__face i{display:block;margin-top:5px;font-style:normal;font-size:12px;color:#B8AFA3}
.card__face em{position:absolute;right:0;top:2px;font-style:normal;
  font:600 12px/1 'Mulish',sans-serif;color:#5BAAB0;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  .card{transition:flex-grow .38s cubic-bezier(.23,1,.32,1)}
  .card:hover{flex-grow:4}
  .card:hover::before{opacity:.44}
  .card:hover::after{opacity:1}
  .card:hover .card__edge{opacity:0}
  .card:hover .card__face{opacity:1}
}
.card:focus-visible{outline:2px solid #5BAAB0;outline-offset:-2px}

.lk{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:12px;
  flex:none;padding:14px 16px;text-decoration:none;border-radius:var(--r2,8px);
  background:#26262A;border:1px solid #3A3A42;
  transition:border-color .16s cubic-bezier(.23,1,.32,1),background .16s}
.lk__t{font:600 15px/1 'Mulish',sans-serif;color:#F3F2EE}
.lk__d{font-size:12px;color:#857D74}
.lk__a{font-size:15px;color:#5BAAB0;transition:transform .2s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){
  .lk:hover{background:#2E2E34;border-color:#5BAAB0}
  .lk:hover .lk__a{transform:translateX(3px)}
}
.lk:focus-visible{outline:2px solid #5BAAB0;outline-offset:2px}

/* Затемнение страницы под раскрытым ящиком: иначе карты спорят с макетом. */
.scrim{position:fixed;inset:0;z-index:25;background:rgba(26,26,28,.45);
  opacity:0;visibility:hidden;transition:opacity .3s cubic-bezier(.23,1,.32,1),visibility .3s}
.scrim.is-on{opacity:1;visibility:visible}

@media (prefers-reduced-motion:reduce){
  .drawer,.card,.card__face,.card::before,.card::after,.lk,.lk__a,.scrim{transition:none}
}
@media (max-width:1180px){ .drawer{width:min(700px,calc(100vw - 96px))} }
@media (max-width:900px){
  .top{top:16px}
  .top__in{width:calc(100% - 32px)}
  .drawer{width:100%;height:auto;align-self:stretch;
    clip-path:inset(0 0 calc(100% - 64px) calc(100% - 119px) round 12px)}
  .drawer.is-open{height:auto;clip-path:inset(0 round 12px)}
  .drawer__body{position:static;padding:0 12px 12px}
  .drawer.is-open .drawer__body{padding-top:72px}
  .cards{flex-direction:column;gap:4px}
  .card{height:56px;flex:none}
  .card__edge{writing-mode:horizontal-tb;transform:none;left:16px;margin:0;bottom:auto;top:20px}
}

/* Картинки карточек меню. Были инлайновым style="--img:url(…)" в разметке, но CSP
   лендинга запрещает style-src 'unsafe-inline': инлайновый атрибут блокируется, и
   карточки остаются без изображения. Оформление живёт здесь. */
.card--competencies{--img:url(assets/route-louvers.jpg)}
.card--products{--img:url(assets/route-glass.jpg)}
.card--cases{--img:url(assets/hero.png)}
.card--about{--img:url(assets/rule-2.png)}
.card--contact{--img:url(assets/rule-4.png)}