/* main.css — раскладка, компоненты, motion. Стиль только через токены (tokens.css). */

/* ─── База ─── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text);
  font-family:var(--body);font-size:16px;font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--live);color:#fff}
:focus-visible{outline:2px solid var(--live);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}

/* Skip-link */
.skip{position:fixed;left:-999px;top:8px;z-index:100;background:var(--panel);
  color:var(--text-strong);padding:10px 16px;border-radius:999px;border:1px solid var(--line-strong)}
.skip:focus{left:var(--gutter)}

/* ─── Контейнер ─── */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}

/* Лейбл секции + счётчик + правая ссылка */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-md);
  flex-wrap:wrap;margin-bottom:var(--sp-xl);border-top:1px solid var(--line);padding-top:var(--sp-md)}
.label{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute)}
.label .count{color:var(--graphite);margin-left:.4em}
.sec-head .more{font-size:14px;color:var(--soft);transition:color .25s var(--ease)}
.sec-head .more:hover{color:var(--live)}

/* ─── Кнопки ─── */
.btn{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--line-strong);
  border-radius:999px;padding:11px 20px;font-size:14px;font-weight:500;color:var(--text-strong);
  white-space:nowrap;transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.btn:hover{border-color:var(--live);color:var(--live)}
.btn--solid{border-color:var(--live);background:var(--live);color:#fff}
.btn--solid:hover{background:var(--live-dim);border-color:var(--live-dim);color:#fff}

/* ─── Навигация ─── */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:var(--sp-md)}
.nav.scrolled{background:rgba(15,15,16,.72);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:.55em;font-weight:600;letter-spacing:.02em;
  color:var(--text-strong);font-size:15px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--live);flex:none;
  animation:pulse 2s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.nav-menu{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);margin-left:auto;margin-right:var(--sp-lg)}
.nav-menu a{font-size:14px;color:var(--soft);position:relative;padding-block:6px;transition:color .25s var(--ease)}
.nav-menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--live);transition:right .3s var(--ease)}
.nav-menu a:hover{color:var(--text-strong)}
.nav-menu a:hover::after{right:0}

/* Бургер + мобильное меню */
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;
  align-items:center;gap:5px}
.burger span{width:22px;height:2px;background:var(--text-strong);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:64px 0 0;z-index:45;background:var(--canvas);
  display:flex;flex-direction:column;justify-content:space-between;padding:var(--sp-xl) var(--gutter) var(--section)}
.mobile-menu[hidden]{display:none}
.mobile-menu nav{display:flex;flex-direction:column;gap:var(--sp-md)}
.mobile-menu nav a{font-family:var(--display);font-weight:800;font-size:clamp(26px,7vw,40px);
  letter-spacing:-.03em;color:var(--text-strong);line-height:1.05}
.mobile-menu__cta{display:flex;flex-direction:column;gap:var(--sp-md)}
.mobile-menu__cta .btn{justify-content:center;padding-block:14px}

/* ─── Hero ─── */
.hero{padding-top:clamp(92px,15vh,176px);padding-bottom:clamp(32px,5vw,64px)}

.wordmark{font-family:var(--display);font-weight:800;color:var(--text-strong);
  font-size:clamp(64px,18vw,300px);line-height:.86;letter-spacing:-.045em;margin:0;
  margin-left:-.04em;word-break:keep-all}
.wordmark span{display:block}
.hero-wave{margin:clamp(18px,3vw,40px) 0 clamp(20px,3vw,36px)}
.wave-canvas{display:block;width:100%;height:clamp(64px,12vw,160px)}
.wave-hint{display:inline-flex;align-items:center;gap:.5em;margin-top:var(--sp-sm);
  font-size:13px;letter-spacing:.04em;color:var(--mute)}
.wave-hint .key{width:7px;height:7px;border-radius:50%;background:var(--live)}
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-lg);
  flex-wrap:wrap;margin-top:clamp(16px,2vw,28px)}
.tagline{font-family:var(--display);font-weight:400;color:var(--text-strong);
  font-size:clamp(24px,4vw,56px);line-height:1.12;letter-spacing:-.025em;margin:0;max-width:20ch}
.hero-sub{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);margin-top:var(--sp-md)}
.hero-actions{display:flex;align-items:center;gap:var(--sp-lg);flex-wrap:wrap}
.hero-mail{font-size:clamp(15px,1.4vw,18px);color:var(--soft);transition:color .25s var(--ease)}
.hero-mail:hover{color:var(--live)}

/* ─── Медиа (общий) ─── */
.media{position:relative;border-radius:14px;overflow:hidden;background:var(--panel);aspect-ratio:16/9;cursor:pointer}
.signature .media{aspect-ratio:16/8}
.media img,.media iframe{width:100%;height:100%;object-fit:cover;border:0}
.media .thumb{transition:transform 1.2s var(--ease)}
.media:hover .thumb{transform:scale(1.04)}
.media--tinted .thumb{filter:brightness(.82) contrast(1.06) saturate(1.04)}
.media__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.66),transparent 55%)}
.media__cap{position:absolute;left:clamp(18px,3vw,40px);bottom:clamp(16px,2.5vw,32px);right:18px}
.media__cap .over{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--live);display:inline-flex;align-items:center;gap:.5em}
.media__cap .over .key{width:8px;height:8px;border-radius:50%;background:var(--live);display:inline-block}
.media__cap h2{font-family:var(--display);font-weight:600;letter-spacing:-.025em;
  font-size:clamp(24px,3.2vw,40px);line-height:1;color:var(--text-strong);margin:.35em 0 0}
.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(52px,6vw,84px);height:clamp(52px,6vw,84px);border-radius:50%;
  border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;
  background:rgba(15,15,16,.35);backdrop-filter:blur(4px);
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.media:hover .play{border-color:var(--live);background:rgba(255,77,46,.2)}
.play::before{content:"";border-left:14px solid #fff;border-block:9px solid transparent;margin-left:4px}

/* ─── Манифест ─── */
.manifest p{font-family:var(--display);font-weight:400;letter-spacing:-.025em;
  font-size:clamp(26px,4vw,56px);line-height:1.12;color:var(--soft);max-width:22ch;margin:0}
.manifest b{color:var(--live);font-weight:400}

/* ─── Проекты ─── */
.projects{display:flex;flex-direction:column}
.proj{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(280px,40%);
  gap:clamp(16px,3vw,48px);align-items:start;padding-block:clamp(24px,3vw,40px);
  border-top:1px solid var(--line);position:relative;transition:transform .35s var(--ease)}
.proj::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,77,46,.06),transparent 55%);
  opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.proj:hover{transform:translateX(8px)}
.proj:hover::before{opacity:1}
.proj__num{font-family:var(--display);font-weight:800;font-size:clamp(18px,1.5vw,22px);
  color:var(--graphite);transition:color .3s var(--ease)}
.proj:hover .proj__num{color:var(--live)}
.proj__title{font-family:var(--display);font-weight:600;letter-spacing:-.025em;
  font-size:clamp(26px,3.4vw,44px);line-height:1;color:var(--text-strong);margin:0}
.proj__cat{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);margin:.7em 0 var(--sp-md)}
.proj__case{display:grid;gap:.6em;margin:0;max-width:54ch}
.proj__case .row{display:grid;grid-template-columns:7.5em 1fr;gap:.6em;align-items:baseline}
.proj__case dt{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.proj__case dd{margin:0;font-size:15px;color:var(--text)}
.proj__story{margin:0;max-width:54ch;font-size:15px;line-height:1.55;color:var(--text)}
.proj__media{align-self:start}

/* ─── Возможности ─── */
.caps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cap{border-top:1px solid var(--line);padding-block:clamp(16px,2vw,26px)}
.cap__head{display:flex;align-items:baseline;gap:clamp(12px,2vw,28px);
  width:100%;text-align:left;background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer}
.cap__idx{font-family:var(--display);font-weight:800;font-size:clamp(13px,1vw,16px);
  color:var(--graphite);flex:none;transition:color .3s var(--ease)}
.cap__name{font-family:var(--display);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(26px,6vw,84px);line-height:1.04;color:var(--soft);min-width:0;overflow-wrap:break-word;
  transition:color .3s var(--ease),transform .3s var(--ease)}
.cap__arrow{font-family:var(--display);font-size:clamp(20px,2.6vw,36px);color:var(--graphite);
  margin-left:auto;opacity:0;transform:translateX(-10px);transition:.3s var(--ease)}
.cap:hover .cap__name{color:var(--text-strong);transform:translateX(8px)}
.cap:hover .cap__idx{color:var(--live)}
.cap:hover .cap__arrow{color:var(--live);opacity:1;transform:translateX(0)}
.cap__desc{font-size:16px;color:var(--soft);max-width:60ch;margin:var(--sp-sm) 0 0;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .4s var(--ease),opacity .3s var(--ease)}
.cap:hover .cap__desc,.cap.is-open .cap__desc{max-height:14em;opacity:1}

/* ─── Партнёры ─── */
.partners{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,28px) clamp(20px,3vw,44px)}
.partners span{font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(20px,2.6vw,34px);color:var(--mute);transition:color .25s var(--ease)}
.partners span:hover{color:var(--text-strong)}

/* ─── Команда ─── */
.team-lead{font-size:clamp(18px,2.2vw,26px);line-height:1.4;color:var(--text);
  max-width:40ch;margin:0 0 clamp(40px,6vw,80px)}
.team{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
.member{margin:0}
.member__photo{border-radius:14px;overflow:hidden;background:var(--panel);aspect-ratio:4/5;margin-bottom:var(--sp-lg)}
.member__photo img{width:100%;height:100%;object-fit:cover;object-position:center top;
  filter:grayscale(1) contrast(1.04) brightness(.95);transition:filter .5s var(--ease)}
.member:hover .member__photo img{filter:grayscale(.15) contrast(1.04)}
.member__name{font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(26px,3vw,40px);color:var(--text-strong);margin:0}
.member__role{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--live);margin:.6em 0 var(--sp-md)}
.member__bio{font-size:16px;color:var(--soft);max-width:40ch;margin:0}

/* ─── Футер ─── */
.footer{border-top:1px solid var(--line);padding-top:var(--section);padding-bottom:var(--sp-xl)}
.footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--sp-xl);margin-bottom:clamp(40px,7vw,90px)}
.footer__col h3{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);margin:0 0 var(--sp-md)}
.footer__col a,.footer__col p{display:block;font-size:15px;color:var(--soft);margin:0 0 .5em;
  transition:color .25s var(--ease)}
.footer__col a:hover{color:var(--live)}
.footer__col--cta .btn{margin-top:var(--sp-sm)}
.footer__mark{font-family:var(--display);font-weight:800;color:var(--text-strong);
  font-size:clamp(64px,18vw,300px);line-height:.86;letter-spacing:-.045em;margin:0 0 var(--sp-lg);margin-left:-.04em}
.footer__mark span{display:block}
.footer__slogan{font-family:var(--display);font-weight:400;color:var(--mute);
  font-size:clamp(15px,1.6vw,20px);letter-spacing:-.01em;margin-bottom:var(--sp-xl)}
.footer__legal{display:flex;gap:var(--sp-md) var(--sp-lg);flex-wrap:wrap;align-items:center;
  border-top:1px solid var(--line);padding-top:var(--sp-md);font-size:12px;letter-spacing:.03em;color:var(--mute)}
.footer__legal a:hover{color:var(--soft)}
.footer__legal .sep{color:var(--graphite)}

/* ─── Подстраницы ─── */
.page-hero{padding-top:clamp(120px,18vh,200px);padding-bottom:var(--section)}
.page-hero h1{font-family:var(--display);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(40px,11vw,140px);line-height:.96;color:var(--text-strong);margin:0;overflow-wrap:break-word;hyphens:auto}
.page-hero h1.page-hero__title--sm{font-size:clamp(22px,6vw,56px);line-height:1.04}
.page-hero .lead{font-size:clamp(17px,2.1vw,24px);line-height:1.4;color:var(--soft);
  max-width:46ch;margin:var(--sp-lg) 0 0}

/* Галерея проектов (/projects) */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,40px)}
.gcard{display:flex;flex-direction:column;gap:var(--sp-md)}
.gcard .media{aspect-ratio:16/9}
.gcard__meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-md)}
.gcard__title{font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(20px,2vw,28px);color:var(--text-strong);margin:0}
.gcard__cat{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);text-align:right;flex:none}

/* Команда — расширенная (/about) */
.about-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--sp-xl);border-top:1px solid var(--line);padding-top:var(--sp-xl)}
.value h3{font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,26px);
  color:var(--text-strong);margin:0 0 var(--sp-sm)}
.value p{font-size:15px;color:var(--soft);margin:0;max-width:32ch}

/* Юр. текст (/politics) */
.legal-doc{max-width:74ch}
.legal-doc h2{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.4vw,30px);
  color:var(--text-strong);letter-spacing:-.02em;margin:var(--sp-xl) 0 var(--sp-md)}
.legal-doc p{color:var(--text);margin:0 0 var(--sp-md)}
.legal-doc ul{color:var(--text);padding-left:1.2em;margin:0 0 var(--sp-md)}
.legal-doc li{margin-bottom:.4em}
.legal-doc .muted{color:var(--mute);font-size:14px}

@media (max-width:600px){
  .gallery{grid-template-columns:1fr}
  .gcard__meta{flex-direction:column;align-items:flex-start;gap:4px}
  .gcard__cat{text-align:left}
}

/* ─── Видео-лайтбокс ─── */
.lightbox{position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:rgba(8,8,9,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:clamp(16px,4vw,64px)}
.lightbox.open{display:grid;animation:lbfade .25s var(--ease)}
@keyframes lbfade{from{opacity:0}to{opacity:1}}
.lightbox__inner{position:relative;width:min(94vw,calc(92vh*16/9));aspect-ratio:16/9;
  background:#000;border-radius:14px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.lightbox__inner iframe{width:100%;height:100%;border:0;display:block}
.lightbox__close{position:absolute;top:clamp(14px,3vw,30px);right:clamp(14px,3vw,30px);
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line-strong);
  display:grid;place-items:center;font-size:20px;line-height:1;color:#fff;background:rgba(0,0,0,.45);
  transition:border-color .25s var(--ease),color .25s var(--ease),transform .3s var(--ease);z-index:1}
.lightbox__close:hover{border-color:var(--live);color:var(--live);transform:rotate(90deg)}

/* ─── Reveal ─── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ─── Адаптив ─── */
@media (max-width:860px){
  .nav-menu{display:none}
  .nav .btn--solid{display:none}
  .burger{display:flex}
  .proj{grid-template-columns:40px 1fr;gap:var(--sp-sm) var(--sp-md)}
  .proj__media{grid-column:1/-1;margin-top:var(--sp-md)}
  .proj__story{display:none}                          /* на мобиле прячем длинное описание */
  .team{grid-template-columns:1fr 1fr;gap:var(--sp-lg)}
  .hero-foot{display:block}
  .hero-actions{margin-top:var(--sp-lg);justify-content:flex-start}
  .cap__desc{max-height:none;opacity:1}              /* без JS описания видны (fallback) */
  .cap__arrow{display:none}
  /* мобильный аккордеон — включается JS-классом .is-enhanced; без JS текст остаётся видимым */
  .caps.is-enhanced .cap__desc{max-height:0;opacity:0}
  .caps.is-enhanced .cap.is-open .cap__desc{max-height:16em;opacity:1}
  .caps.is-enhanced .cap__head{position:relative;padding-right:34px}
  .caps.is-enhanced .cap__head::after{content:"";position:absolute;right:6px;top:.4em;
    width:9px;height:9px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);
    transform:rotate(45deg);transition:transform .3s var(--ease)}
  .caps.is-enhanced .cap.is-open .cap__head::after{transform:rotate(-135deg);border-color:var(--live)}
  .caps.is-enhanced .cap.is-open .cap__idx{color:var(--live)}
  /* тач-таргеты ≥44px: расширяем зону нажатия ссылок, не сдвигая видимый текст */
  .caps.is-enhanced .cap__head{min-height:44px}
  .brand{min-height:44px}
  #waveHint,.hero-mail{display:inline-flex;align-items:center;min-height:44px}
  .footer__legal a,.more{display:inline-flex;align-items:center;min-height:44px}
  .footer__col a{display:flex;align-items:center;min-height:44px;margin-bottom:.15em}
}
@media (max-width:600px){
  .team{grid-template-columns:1fr;gap:var(--sp-xl)}
  .member__photo{aspect-ratio:1/1}
  .proj__case .row{grid-template-columns:6.5em 1fr}
  .tagline{font-size:clamp(21px,6vw,32px);max-width:16ch}
  .hero-sub{font-size:12px;letter-spacing:.07em}
  .hero-actions{gap:var(--sp-md)}
  .cap__name{font-size:clamp(22px,6.2vw,40px)}
}
@media (max-width:400px){
  :root{--gutter:18px}
}

/* ─── prefers-reduced-motion ─── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .brand .dot{animation:none}
  .reveal{opacity:1;transform:none}
  .media:hover .thumb{transform:none}
  .cap__desc{max-height:none;opacity:1}
  .lightbox.open{animation:none}
  .lightbox__close:hover{transform:none}
}