/* ============================================================
   Главная страница.

   Порядок по схеме заказчика: первый экран на стекле →
   коротко о студии → плитка разделов → отзывы → расчёт →
   подвал. Полный список работ раздела и ритм разного
   размера — на странице kind.html, не здесь: на главной
   не должно быть «мозаики» из полусотни кадров.
   ============================================================ */

/* ══ ПЕРВЫЙ ЭКРАН ════════════════════════════════════════
   Макет из папки «Оформление»: клеймо на стеклянной двери
   салона. Поверх — только имя, телефон, одна строка и одно
   действие. Кадр статичный: без бликов и прочего движения.   */
.hero{position:relative;min-height:100svh;
  display:flex;align-items:flex-end;overflow:hidden;background:#0A0A0C}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover}
/* на узком экране кадр обрезается так, чтобы клеймо
   оставалось целиком в кадре */
@media(max-width:760px){
  .hero__bg img{object-position:57% 50%}
}
/* Затемнение растёт до полностью непрозрачного var(--bg) —
   тон в тон с фоном страницы, поэтому кадр не обрывается
   жёстким краем, а тает в следующий блок.                    */
.hero__veil{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 26%,
             rgba(0,0,0,0) 48%,var(--bg) 100%)}
.hero__in{position:relative;z-index:4;width:100%;
  padding-block:clamp(30px,5vw,72px);
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,4vw,80px);flex-wrap:wrap}
.hero h1{font-family:var(--disp);font-size:clamp(1.5rem,2.6vw,2.5rem);
  line-height:1.24;max-width:16ch;
  text-shadow:0 2px 24px rgba(0,0,0,.6)}
.hero__note{margin-top:var(--s5);display:flex;gap:clamp(14px,2vw,36px);
  flex-wrap:wrap;color:#A6A6A6;font-size:.78rem;
  text-shadow:0 1px 10px rgba(0,0,0,.8)}
.hero__note b{color:#E4E4E4;font-weight:500}

/* Действие на первом экране. Была гравировка без фона — на
   пёстром снимке она терялась, заказчица попросила «чёрную
   с белым контуром». Тёмная плита держит буквы читаемыми на
   любом участке фотографии, контур очерчивает границы кнопки. */
.etch{position:relative;display:inline-flex;align-items:center;
  justify-content:center;flex:none;
  padding:clamp(14px,1.5vw,18px) clamp(22px,2.4vw,34px);
  font-family:var(--text);font-weight:500;font-size:.74rem;
  letter-spacing:var(--tr-mid);text-transform:uppercase;color:#fff;
  background:rgba(8,8,10,.72);
  border:1px solid rgba(255,255,255,.9);border-radius:var(--r);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:background-color var(--d2),color var(--d2)}
.etch:hover,.etch:focus-visible{background:#fff;color:var(--bg)}

@media(max-width:640px){
  .hero__in{flex-direction:column;align-items:flex-start;gap:var(--s5)}
}

/* ══ РИТМ СТРАНИЦЫ ═══════════════════════════════════════
   .sec — блок с воздухом; .divider — тонкая черта между
   блоками, вписанная в колонку контента (как в подвале),
   а не через весь экран: полей по бокам ровно как у .wrap.  */
.sec{padding-block:clamp(40px,6vw,96px)}
/* Шапка — фиксированный оверлей, поэтому переход по якорю
   (меню, ссылки в подвале) без запаса упирал бы заголовок
   секции ровно под неё.                                      */
.sec[id]{scroll-margin-top:calc(var(--hd) + 14px)}
.sec__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s5);flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,36px)}
.sec__head p.lead{max-width:40ch}

.divider{padding-inline:var(--pad);max-width:var(--maxw);margin:0 auto}
.divider i{display:block;height:1px;background:var(--rule)}

/* ══ РАЗДЕЛЫ ═════════════════════════════════════════════
   Плитка разделов — приём с референса заказчика: один кадр,
   название и число работ. Полный список работ каждого
   раздела открывается уже на своей странице (kind.html),
   здесь — только вход.                                      */
.kinds{display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.kinds a{aspect-ratio:4/3}
.kinds .shot__tag{opacity:1;transform:none;
  font-family:var(--disp);font-size:clamp(.98rem,1.2vw,1.2rem);
  letter-spacing:0;text-transform:none;right:auto;
  display:flex;flex-direction:column;gap:4px}
.kinds .shot::after{opacity:1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 34%,rgba(0,0,0,.82) 100%)}
.kinds .cnt{font-family:var(--text);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:#A9A9A9}
@media(max-width:760px){
  .kinds{grid-template-columns:repeat(2,1fr)}
  .kinds a{aspect-ratio:1}
}

/* ══ СТУДИЯ ══════════════════════════════════════════════
   Заголовок и клеймо — по центру, титулом. Ниже — два
   текстовых блока слева на приподнятых карточках (второй,
   более светлый тёмный оттенок — var(--bg-3) — именно то
   «чёрное с серым», о котором просила заказчица) и список
   с кнопкой справа.                                          */
.studio2__head{text-align:center;margin:0 auto var(--s6)}
.studio2__head h2{margin:0 auto var(--s5);max-width:34ch;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.28}
.studio2__seal{width:clamp(56px,6vw,76px);margin:0 auto;opacity:.95}

.studio2__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(16px,2.2vw,28px);align-items:stretch}
@media(max-width:820px){.studio2__grid{grid-template-columns:1fr}}

/* Обе колонки растянуты на одну высоту (align-items:stretch
   у грида), и последняя карточка слева дорастает до низа —
   поэтому нижние края у обеих колонок совпадают, как в сетке,
   а не «плавают» по высоте контента.                          */
.studio2__cards{display:flex;flex-direction:column;gap:var(--s3);height:100%}
.card2{background:var(--bg-3);border-radius:var(--r);
  padding:clamp(16px,2vw,24px);color:var(--fg-2);font-size:.94rem;line-height:1.6}
.card2--lead{font-family:var(--disp);font-size:1.05rem;
  line-height:1.5;color:var(--fg)}
.card2 b{color:var(--fg);font-weight:500}
.studio2__cards .card2:last-child{flex:1;display:flex;align-items:center}

.studio2__side{display:flex;flex-direction:column;gap:var(--s3);height:100%}
.perks{background:var(--bg-3);border-radius:var(--r);
  padding:clamp(16px,2vw,24px);display:flex;flex-direction:column;gap:12px}
.perks p{position:relative;padding-left:1.3em;color:var(--fg-2);
  font-size:.94rem;line-height:1.5;margin:0}
.perks p::before{content:"—";position:absolute;left:0;color:var(--fg-3)}
.studio2__side .act{width:100%;margin-top:auto}

/* ══ ОТЗЫВЫ ══════════════════════════════════════════════
   Карточки в один ряд, листаются вбок (как .gal__track и
   .kinds-row в каталоге) — их больше, чем помещается в экран,
   поэтому лента, а не сетка. Графитовый фон (--bg-3) и
   скругление — та же карточка, что у блоков студии.           */
/* Без scroll-snap: он тут спорит с padding-inline на самом
   же скролл-контейнере — снап тянет первую карточку строго
   к краю скролл-порта и «съедает» левый отступ целиком, из-за
   чего докрутить назад до самого начала физически нельзя.
   Без снапа лента листается свободно в обе стороны до конца. */
.says{display:flex;gap:var(--s4);overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:2px;margin:0 calc(var(--pad) * -1);
  padding-inline:var(--pad)}
.says::-webkit-scrollbar{display:none}
.says blockquote{flex:0 0 clamp(260px,32vw,360px);
  margin:0;background:var(--bg-3);border-radius:var(--r);
  padding:clamp(20px,2.2vw,28px)}
.says p{font-family:var(--disp);font-size:clamp(1rem,1.2vw,1.16rem);
  line-height:1.5}
.says cite{display:block;margin-top:var(--s4);font-style:normal;
  font-size:.68rem;letter-spacing:var(--tr-mid);text-transform:uppercase;
  color:var(--fg-3)}
.says cite a{color:var(--fg-3);text-decoration:underline;
  text-underline-offset:2px;transition:color var(--d1)}
.says cite a:hover{color:#fff}

/* Лента листается свайпом/колесом, но снаружи это не видно —
   под ней тонкий трек с бегунком: показывает, что отзывов
   больше, чем в кадре, и тянется мышью как обычный скролбар.  */
.says__bar{position:relative;height:6px;border-radius:3px;
  background:var(--rule-2);margin-top:var(--s6);cursor:pointer}
.says__thumb{position:absolute;top:0;left:0;height:100%;min-width:40px;
  border-radius:3px;background:#fff;cursor:grab}
.says__thumb:active{cursor:grabbing}

/* ══ РАСЧЁТ ══════════════════════════════════════════════ */
.ask{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,96px);align-items:start}
@media(max-width:900px){.ask{grid-template-columns:1fr}}

.ask__call{display:flex;align-items:center;flex-wrap:wrap;
  gap:var(--s4);margin-top:var(--s6)}
.ask__tel{font-family:var(--disp);font-size:1.05rem;color:var(--fg)}