/* Посадочные страницы услуг.
   Переменные, кнопки, .sec-title, .index и .footer приходят из styles.css —
   здесь только то, чего там нет. Префикс .re- намеренно свой: главная
   собрана из уникальных секций, и переиспользовать её классы значило бы
   связать две страницы так, что правка одной ломает другую. */

.re-body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  margin:0;
}
.re-main{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ---------- шапка ---------- */
.re-nav{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px var(--pad);
  background:rgba(8,8,10,.72);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  border-bottom:1px solid var(--line);
}
.re-nav__brand img{height:26px;width:auto;display:block}
.re-nav__right{display:flex;align-items:center;gap:clamp(12px,2vw,28px)}
.re-nav__back{font-size:.86rem;color:var(--grey);transition:color .3s}
.re-nav__back:hover{color:var(--paper)}
.re-lang{display:flex;gap:2px}
.re-lang a{
  font-family:var(--sans);font-size:.7rem;letter-spacing:.12em;
  padding:6px 9px;border-radius:var(--radius-pill);color:var(--grey);transition:.3s var(--ease);
}
.re-lang a:hover{color:var(--paper)}
.re-lang a.is-active{color:var(--accent)}

/* ---------- герой ---------- */
.re-hero{padding:clamp(56px,10vw,120px) 0 clamp(40px,6vw,72px);border-bottom:1px solid var(--line)}
.re-hero h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.1rem,5.4vw,4.2rem);line-height:1.02;letter-spacing:-.03em;
  margin:18px 0 22px;max-width:19ch;text-wrap:balance;
}
.re-lead{color:var(--grey);font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.62;max-width:58ch;margin:0}
.re-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ---------- блоки ---------- */
.re-block{padding:clamp(48px,7vw,92px) 0;border-bottom:1px solid var(--line)}
.re-block .sec-title{font-size:clamp(1.8rem,3.6vw,2.9rem);margin:0 0 22px}
.re-p{color:var(--grey);font-size:1.02rem;line-height:1.68;max-width:66ch;margin:0 0 18px}

.re-ticks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px;max-width:62ch}
.re-ticks li{position:relative;padding-left:26px;color:var(--paper);line-height:1.55}
.re-ticks li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:9px;border-radius:50%;background:var(--accent);
}

/* два адресата рядом: агентства и частники равны по весу */
.re-who{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;
  background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.re-who__col{background:var(--ink);padding:clamp(30px,4vw,52px) clamp(24px,3vw,44px)}
.re-who__col h2{
  font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.75rem);
  letter-spacing:-.02em;margin:0 0 14px;
}
.re-who__col p{color:var(--grey);line-height:1.66;margin:0 0 22px;max-width:48ch}

.re-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.re-card{background:var(--ink);padding:26px 24px}
.re-card h3{
  font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:.01em;
  margin:0 0 9px;color:var(--paper);
}
.re-card p{color:var(--grey);font-size:.94rem;line-height:1.6;margin:0}

/* ---------- работы ---------- */
.re-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;margin-top:26px}
.re-shots figure{margin:0;overflow:hidden;border-radius:var(--radius);background:var(--ink-2)}
.re-shots img{
  display:block;width:100%;height:auto;
  transition:transform .6s var(--ease);
}
.re-shots figure:hover img{transform:scale(1.03)}

/* ---------- цена ---------- */
.re-price .re-note{
  font-size:.88rem;line-height:1.65;color:var(--grey);
  max-width:62ch;margin:0 0 28px;padding-left:16px;border-left:2px solid var(--line-2);
}

/* ---------- FAQ ---------- */
.re-faq{margin-top:22px;border-top:1px solid var(--line);max-width:78ch}
.re-faq details{border-bottom:1px solid var(--line)}
.re-faq summary{
  cursor:pointer;list-style:none;padding:20px 34px 20px 0;position:relative;
  font-weight:600;font-size:1.02rem;color:var(--paper);transition:color .3s;
}
.re-faq summary::-webkit-details-marker{display:none}
.re-faq summary::after{
  content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-size:1.3rem;color:var(--accent);transition:transform .3s var(--ease);
}
.re-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.re-faq summary:hover{color:var(--accent)}
.re-faq p{color:var(--grey);line-height:1.68;margin:0 0 22px;max-width:70ch}

/* ---------- финал ---------- */
.re-final{padding:clamp(56px,8vw,110px) 0 clamp(48px,7vw,90px);text-align:left}
.re-footer{margin-top:0}

@media (max-width:640px){
  .re-nav__back{display:none}
  .re-hero h1{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .re-shots img,.re-faq summary::after{transition:none}
  .re-shots figure:hover img{transform:none}
}

/* ══════════════════════════════════════════════════════════════════
   Галерея как главный экран.
   Посетитель приходит смотреть работы, поэтому фотографии стоят выше
   любого текста, а описания свёрнуты. Классы .rg- отделены от .re-:
   .re- — обычные текстовые блоки, .rg- — то, что относится к галерее.
   ══════════════════════════════════════════════════════════════════ */

.rg-head{padding:clamp(40px,6vw,72px) 0 clamp(24px,3vw,36px)}
.rg-head h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.04;letter-spacing:-.03em;
  margin:16px 0 16px;text-wrap:balance;
}
.rg-sub{color:var(--grey);font-size:clamp(.98rem,1.3vw,1.1rem);line-height:1.6;margin:0}
.rg-head__cta{margin-top:26px}

/* свёрнутые тексты: ряд кнопок неподвижен, панель раскрывается под ним */
.rg-teasers{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.rg-tease{
  border:1px solid var(--glass-brd);border-radius:var(--radius-pill);
  background:var(--glass);color:var(--paper);cursor:pointer;
  padding:11px 20px;font-family:var(--sans);font-size:.86rem;font-weight:600;
  white-space:nowrap;transition:.3s var(--ease);
}
.rg-tease::after{content:" +";color:var(--accent)}
.rg-tease:hover{color:var(--accent);border-color:var(--glass-brd-hi)}
.rg-tease[aria-expanded="true"]{
  background:var(--glass-2);border-color:var(--glass-brd-hi);color:var(--accent);
}
.rg-tease[aria-expanded="true"]::after{content:""}

.rg-tease__panels{margin-top:10px}
.rg-tease__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .34s var(--ease);
  border:1px solid var(--glass-brd);border-radius:var(--radius);
  background:var(--glass);cursor:pointer;
}
.rg-tease__panel[hidden]{display:none}
.rg-tease__panel.is-open{grid-template-rows:1fr;border-color:var(--glass-brd-hi)}
.rg-tease__body{overflow:hidden;padding:0 20px}
.rg-tease__panel.is-open .rg-tease__body{padding-top:18px;padding-bottom:20px}
.rg-tease__body > p{max-width:70ch}
.rg-tease__body p{color:var(--grey);line-height:1.66;margin:0 0 14px}
.rg-tease__body p:last-child{margin-bottom:0}
.rg-tease__body .re-ticks{margin-top:0}
.rg-tease__body .re-panel{margin-top:6px}

/* сетка работ: пять в ряд, как в лайтбоксе на главной */
.rg-gallery{padding:0 0 clamp(32px,4vw,56px)}
.rg-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
}
.rg-grid figure{
  margin:0;overflow:hidden;border-radius:var(--radius);background:var(--ink-2);
  aspect-ratio:4/3;cursor:pointer;position:relative;
}
.rg-grid img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease),opacity .3s;
}
.rg-grid figure:hover img{transform:scale(1.04)}
.rg-grid figure:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rg-grid.is-static figure{cursor:default}

/* Ролики и веб-проекты в той же сетке. У кадра пропорция 4:3, а у экрана
   монитора и у кадра из ролика — 16:9; в 4:3 они обрезались бы по краям.
   Проектов всего пара, поэтому им ряд пошире, иначе карточка размером
   с почтовую марку. */
.rg-grid--videos figure,
.rg-grid--projects figure{aspect-ratio:16/9}
/* Обложка проекта — экран целиком, а не его кусок: по обрезанной полосе
   сайт не узнать. Карточка держит общую пропорцию ряда, скриншот вписан
   внутрь, поля по краям берут цвет подложки. */
.rg-grid--projects figure img{object-fit:contain}
/* auto-fit, а не жёсткие три колонки: проектов пока два, и в сетке на три
   треть ряда оставалась пустой. Так две карточки растягиваются на всю
   ширину, а когда проектов станет больше — сами встанут по три. */
.rg-grid--projects{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.rg-grid figure > .rg-vid__play{font-size:1.5rem}
/* панель веб-проекта: описание, живая ссылка и экраны */
.rg-box.is-project .rg-box__nav{display:none}
.rg-proj{
  max-width:min(92vw,900px);max-height:88vh;overflow:auto;
  background:var(--ink);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3vw,38px);text-align:left;
}
.rg-proj__title{
  font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.6vw,2rem);
  letter-spacing:-.02em;margin:0 0 14px;color:var(--paper);
}
.rg-proj__desc{color:var(--grey);line-height:1.66;margin:0 0 18px;max-width:70ch}
.rg-proj__link{
  display:inline-block;margin:0 0 24px;color:var(--accent);
  font-size:.92rem;border-bottom:1px solid transparent;transition:border-color .3s;
}
.rg-proj__link:hover{border-color:var(--accent)}
/* У миниатюры нет своей пропорции: она принимает пропорцию экрана. Скриншоты
   бывают и 16:9, и почти квадратные, и в общей рамке одни обрезались бы, а
   другие висели в пустых полях. Ряды выходят разной высоты — зато каждый
   экран виден целиком. */
.rg-proj__shots{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;align-items:start;
}
.rg-proj__shot{
  padding:0;border:0;cursor:pointer;overflow:hidden;background:var(--ink-2);
  border-radius:var(--radius);line-height:0;
}
.rg-proj__shot img{width:100%;height:auto;display:block;transition:transform .6s var(--ease)}
.rg-proj__shot:hover img{transform:scale(1.04)}

.rg-fig__n{display:block;font-size:.72rem;opacity:.7;margin-top:2px}

.rg-fig__cap{
  position:absolute;left:0;right:0;bottom:0;padding:10px 12px;
  font-size:.8rem;line-height:1.35;color:var(--paper);
  background:linear-gradient(transparent,rgba(0,0,0,.75));
}

.rg-more{margin:22px auto 0;display:flex}

/* видеообзоры */
.rg-videos{padding:clamp(32px,5vw,64px) 0;border-top:1px solid var(--line)}
.rg-videos .sec-title{font-size:clamp(1.6rem,3vw,2.4rem);margin:0 0 22px}
.rg-vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.rg-vid{
  position:relative;display:block;padding:0;border:0;cursor:pointer;
  border-radius:var(--radius);overflow:hidden;background:var(--ink-2);
  aspect-ratio:16/9;width:100%;
}
.rg-vid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.rg-vid:hover img{transform:scale(1.04)}
.rg-vid__play{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:2rem;color:var(--paper);text-shadow:0 2px 20px rgba(0,0,0,.6);
  background:linear-gradient(transparent 40%,rgba(0,0,0,.45));
}
.rg-vid__cap{
  position:absolute;left:0;right:0;bottom:0;padding:12px 14px;
  font-size:.8rem;line-height:1.4;color:var(--paper);text-align:left;
  background:linear-gradient(transparent,rgba(0,0,0,.75));
}

/* просмотрщик */
.rg-box{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  background:rgba(8,8,10,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.rg-box[hidden]{display:none}
.rg-box__stage{max-width:92vw;max-height:88vh;display:grid;place-items:center}
/* Только прямой потомок: раньше это правило доставало и до миниатюр
   внутри панели проекта — width:auto перебивал их размер, и картинки
   рисовались в натуральную величину, вылезая за рамки. */
.rg-box__stage > img{max-width:92vw;max-height:88vh;width:auto;height:auto;display:block;border-radius:var(--radius)}
.rg-box__stage iframe{width:min(92vw,1200px);aspect-ratio:16/9;height:auto;border:0;border-radius:var(--radius)}
.rg-box__close{
  position:absolute;top:18px;right:20px;z-index:2;
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  border:1px solid var(--glass-brd);background:var(--glass);color:var(--paper);
  font-size:1.5rem;line-height:1;
  display:grid;place-items:center;padding:0;
}
.rg-box__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1px solid var(--glass-brd);background:var(--glass);color:var(--paper);
  display:grid;place-items:center;padding:0;line-height:1;
}
.rg-box__prev{left:16px}
.rg-box__next{right:16px}
.rg-box:not(.is-photo) .rg-box__nav{display:none}
.rg-box__close:hover,.rg-box__nav:hover{background:var(--paper);color:var(--ink)}

@media (max-width:1100px){ .rg-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:860px){  .rg-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:860px){  .rg-grid--projects{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){
  .rg-grid{grid-template-columns:repeat(2,1fr);gap:7px}
  /* До JS в разметке лежат все пятнадцать кадров: на телефоне это четыре
     лишних ряда прокрутки до первого текста. Показываем восемь — два
     столбца на четыре ряда, — дальше список ведёт скрипт. */
  .rg-grid.is-static figure:nth-child(n+9){display:none}
  /* Проекты и на телефоне идут в один столбец: в двух название на
     карточке в половину экрана не читается. */
  .rg-grid--projects{grid-template-columns:1fr}
  /* Кнопки в столбик и одной ширины: вразнобой по ширине и с текстом
     от левого края они читались как список ссылок, а не как переключатели. */
  .rg-teasers{flex-direction:column;align-items:stretch}
  .rg-tease{width:100%;text-align:center;white-space:normal}
  .rg-box__nav{width:38px;height:38px}
}

@media (prefers-reduced-motion:reduce){
  .rg-grid img,.rg-vid img,.rg-tease{transition:none}
  .rg-grid figure:hover img,.rg-vid:hover img{transform:none}
}

/* Блок «что входит»: тот же язык, что у панели статистики на главной —
   одна скруглённая пластина, ячейки разделены волосяной линией в 1px,
   слева иконка в квадрате. Раньше здесь была колонка карточек, зажатая
   шириной текста, и шесть пунктов вытягивались в длинный список. */
.re-panel{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:6px;
  background:var(--glass);border:1px solid var(--glass-brd);
  border-radius:var(--radius-lg);overflow:hidden;
  backdrop-filter:blur(var(--blur)) saturate(1.3);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.3);
}
.re-panel__item{
  display:flex;align-items:flex-start;gap:14px;
  padding:clamp(18px,2vw,24px);background:rgba(8,8,10,.28);
  transition:background .4s var(--ease);
}
.re-panel__item:hover{background:rgba(240,83,30,.06)}
.re-panel__ico{
  width:38px;height:38px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--glass-brd);background:var(--glass);color:var(--accent);
}
.re-panel__ico svg{width:18px;height:18px}
.re-panel__item b{
  display:block;font-family:var(--sans);font-weight:600;font-size:.95rem;
  color:var(--paper);letter-spacing:.01em;
}
.re-panel__item span{
  display:block;font-size:.85rem;line-height:1.5;color:var(--grey);margin-top:5px;
}

@media (max-width:900px){ .re-panel{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .re-panel{grid-template-columns:1fr} }

/* Кнопка «пример одного объекта» — между сеткой работ и видеообзорами.
   Скрыта, пока в панели нет ссылки. */
.rg-sample{display:flex;justify-content:center;padding:0 0 clamp(32px,4vw,52px)}
.rg-sample[hidden]{display:none}

/* Заголовок над сеткой работ. Намеренно негромкий: галерея и так первое,
   что видно, подпись только объясняет порядок — сначала свежее. */
.rg-gallery__h{
  font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);margin:0 0 14px;
}