:root{
  --black:#0A0908;
  --coal:#14110F;
  --line:#242019;
  --ivory:#F4F1ED;
  --muted:#8A8177;      /* AA на чёрном (≥4.5:1) */
  --pink:#FF65C3;
  --pink-soft:#FF9BD6;
  --disp:'Unbounded', system-ui, sans-serif;
  --body:'Manrope', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --ease:cubic-bezier(.19,.7,.16,1);
  --pad:clamp(20px,4.4vw,64px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  font-family:var(--body);
  background:var(--black);
  color:var(--ivory);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--pink);color:var(--black)}
a{color:var(--ivory);text-decoration:none}
img,video{display:block;max-width:100%}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- киноплёночное зерно + виньетка ---------- */
.grain{
  position:fixed;inset:-60px;z-index:80;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 900ms steps(3) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}
  33%{transform:translate(-22px,14px)}
  66%{transform:translate(16px,-20px)}
  100%{transform:translate(0,0)}
}
.vignette{
  position:fixed;inset:0;z-index:79;pointer-events:none;
  background:radial-gradient(ellipse 130% 110% at 50% 45%, transparent 62%, rgba(0,0,0,.5) 100%);
}

/* ---------- прелоадер «зарядка плёнки» (без изменений) ---------- */
#loader{
  position:fixed;inset:0;z-index:200;background:var(--black);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:transform .9s var(--ease);
}
#loader.done{transform:translateY(-101%)}
#loader .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.34em;color:var(--muted);text-transform:uppercase}
#loader .num{font-family:var(--disp);font-weight:900;font-size:clamp(64px,14vw,160px);line-height:1;color:var(--ivory)}
#loader .num i{font-style:normal;color:var(--pink)}
#loader .bar{width:min(320px,60vw);height:1px;background:var(--line);overflow:hidden}
#loader .bar i{display:block;height:100%;width:0%;background:var(--pink)}

/* ---------- навигация ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);height:64px;
  background:linear-gradient(180deg, rgba(10,9,8,.82), rgba(10,9,8,0));
  transition:transform .5s var(--ease);
}
nav.hidden{transform:translateY(-100%)}
nav .brand{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:.05em;color:var(--pink)}
nav .links{display:flex;gap:28px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
nav .links a{color:var(--ivory);opacity:.8;transition:opacity .2s,color .2s}
nav .links a:hover{opacity:1;color:var(--pink)}
nav .cta{
  display:inline-flex;align-items:center;height:38px;padding:0 20px;
  background:var(--pink);color:var(--black);border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  transition:background .25s,transform .12s ease-out;
}
nav .cta:hover{background:#fff}
nav .cta:active{transform:scale(.96)}
@media(max-width:900px){nav .links{display:none}}

/* ---------- HERO: чистый кино-кадр (только вордмарк + слоган) ---------- */
#stage{position:relative;height:220vh;height:220dvh}
.frame-pin{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
.frame{
  position:absolute;inset:0;overflow:hidden;background:#000;
  transform-origin:50% 42%;
  border-radius:0;
}
.frame video,.frame .poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.frame .poster{
  z-index:1;transform:scale(1.06);
  animation:kenburns 16s ease-in-out infinite alternate;
  transition:opacity 1.2s ease;
}
@keyframes kenburns{from{transform:scale(1.02) translateY(0)}to{transform:scale(1.12) translateY(-1.6%)}}
.frame .wash{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse 74% 62% at 50% 44%, rgba(10,9,8,.66) 10%, rgba(10,9,8,.3) 58%, rgba(10,9,8,.1) 100%),
    linear-gradient(180deg, rgba(10,9,8,.4) 0%, transparent 26%, transparent 66%, rgba(10,9,8,.85) 100%);
}
.frame .sweep{
  position:absolute;inset:-20%;z-index:3;pointer-events:none;opacity:.5;
  background:linear-gradient(115deg, transparent 42%, rgba(255,155,214,.10) 50%, transparent 58%);
  animation:sweep 9s var(--ease) infinite;
}
@keyframes sweep{0%,18%{transform:translateX(-46%)}62%,100%{transform:translateX(46%)}}
.bar-top,.bar-bot{position:absolute;left:0;right:0;z-index:8;background:#000;height:7vh;height:7dvh}
.bar-top{top:0}
.bar-bot{bottom:0}
.hero-content{
  position:absolute;inset:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 var(--pad);
}
.hero-title{
  /* появление: клип-масштаб уходит от 100% (текст не виден) к 0% слева направо,
     плюс масштаб с 1.4 до 1 — будто текст отдаляется от нас вглубь экрана */
  clip-path:inset(0 100% 0 0);transform:scale(1.4);
  transition:clip-path 1.1s var(--ease),transform 1.1s var(--ease);
  font-family:var(--disp);font-weight:900;
  font-size:clamp(58px,15.5vw,240px);
  line-height:.94;letter-spacing:-.015em;color:var(--ivory);
  text-shadow:0 2px 10px rgba(0,0,0,.3);
}
.hero-title.in{clip-path:inset(0 0 0 0);transform:scale(1)}
.hero-title .a{color:var(--pink)}
.hero-sub{
  opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease);
  margin-top:30px;font-family:var(--body);font-weight:500;
  font-size:clamp(24px,7.7vw,80px);color:var(--ivory);
}
.hero-sub.in{opacity:.94;transform:none}
.hero-sub b{color:var(--pink);font-weight:800}

/* ---------- общие секции ---------- */
section{position:relative}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.kicker{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--pink);
}
.kicker::before{content:"";width:34px;height:1px;background:var(--pink)}
.scene{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--muted)}
.h2{font-family:var(--disp);font-weight:600;font-size:clamp(28px,4.4vw,64px);line-height:1.04;letter-spacing:-.01em}
.pill{
  display:inline-flex;align-items:center;height:52px;padding:0 30px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-family:var(--body);
  transition:background .25s,color .25s,border-color .25s,transform .12s ease-out;
}
.pill:active{transform:scale(.96)}
.pill.solid{background:var(--pink);color:var(--black)}
.pill.solid:hover{background:#fff}
.pill.ghost{border:1px solid rgba(244,241,237,.4);color:var(--ivory)}
.pill.ghost:hover{border-color:var(--pink);color:var(--pink)}

/* reveal-примитивы */
.rv{opacity:0;transform:translateY(34px)}
.rv.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv-card{opacity:0;transform:translateY(28px) scale(.96)}
.rv-card.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.line-mask{overflow:hidden;display:block}
.line-mask>span{display:block;transform:translateY(112%)}
.line-mask>span.in{transform:none;transition:transform 1.1s var(--ease)}

/* ---------- манифест ---------- */
#manifesto{padding:20vh 0 15vh;padding:20dvh 0 15dvh}
#manifesto h2{
  margin-top:34px;
  font-family:var(--disp);font-weight:600;
  font-size:clamp(24px,3.5vw,54px);line-height:1.18;letter-spacing:-.005em;
  max-width:1080px;
}
#manifesto h2 .pink{color:var(--pink)}
#manifesto .cols{display:flex;gap:56px;margin-top:52px;max-width:860px}
#manifesto .cols p{font-size:15px;line-height:1.8;color:var(--muted)}
@media(max-width:820px){#manifesto .cols{flex-direction:column;gap:22px}}

/* ---------- два направления ---------- */
#directions{padding:0 0 16vh;padding:0 0 16dvh}
.dir-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.dir{
  position:relative;display:block;aspect-ratio:4/5;overflow:hidden;color:#fff;
}
.dir img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.dir:hover img{transform:scale(1.05)}
.dir .shade{position:absolute;inset:0;background:linear-gradient(180deg, rgba(5,4,4,0) 38%, rgba(5,4,4,.8));pointer-events:none}
.dir .info{position:absolute;left:32px;right:32px;bottom:28px;pointer-events:none}
.dir .tag{display:block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--pink-soft)}
.dir .row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:10px}
.dir .name{font-family:var(--disp);font-weight:600;font-size:clamp(19px,2.4vw,34px);line-height:1.1}
.dir .arr{font-size:clamp(18px,2vw,26px);color:var(--pink);transition:transform .5s var(--ease)}
.dir:hover .arr{transform:translateX(10px)}
@media(max-width:820px){.dir-grid{grid-template-columns:1fr}}

/* ---------- услуги и прайс (hover-превью) ---------- */
#services{padding:0 0 14vh;padding:0 0 14dvh}
.srv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.srv-head p{font-size:14px;line-height:1.7;color:var(--muted);max-width:380px}
.price-list{margin-top:44px;border-top:1px solid var(--line)}
.p-row{
  display:grid;grid-template-columns:56px 1.2fr 1fr auto;align-items:baseline;gap:22px;
  padding:24px 8px;border-bottom:1px solid var(--line);cursor:pointer;
  transition:padding-left .35s var(--ease),background .35s;
}
.p-row:hover{padding-left:24px;background:var(--coal)}
.p-row .n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted)}
.p-row .t{font-family:var(--disp);font-weight:600;font-size:clamp(17px,1.9vw,27px)}
.p-row .d{font-size:13px;color:var(--muted)}
.p-row .p{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--pink);white-space:nowrap}
@media(max-width:820px){.p-row{grid-template-columns:34px 1fr auto}.p-row .d{display:none}}
/* тарифные строки прайса (фото на документы) — раскрываются как FAQ */
.tariff-item{border:none}
.tariff-item>summary.p-row{grid-template-columns:56px 1.2fr 1fr auto 20px;list-style:none}
.tariff-item>summary.p-row::-webkit-details-marker{display:none}
.tariff-item .x{color:var(--pink);font-size:20px;line-height:1;justify-self:end;transition:transform .3s var(--ease)}
.tariff-item[open]>summary.p-row .x{transform:rotate(45deg)}
@media(max-width:820px){.tariff-item>summary.p-row{grid-template-columns:34px 1fr auto 20px}}
.tariff-body{padding:2px 8px 28px;max-width:640px}
.tariff-body ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.tariff-body li{font-size:13.5px;line-height:1.5;color:var(--muted);padding-left:17px;position:relative}
.tariff-body li::before{content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--pink)}
/* зарезервированная полоса под плавающее превью — текст/цена сюда не заходят */
@media(hover:hover) and (min-width:1024px){.price-list{padding-right:290px}}
.srv-cta{display:flex;justify-content:center;margin-top:44px}
/* плавающее фото-превью строки прайса — позиция считается в JS от края .wrap,
   а не от края вьюпорта, поэтому не может наехать на текст/цену */
#preview{
  position:fixed;top:50%;z-index:60;width:230px;aspect-ratio:3/4;
  transform:translateY(-50%) rotate(2deg);overflow:hidden;pointer-events:none;
  box-shadow:0 30px 70px rgba(0,0,0,.6);opacity:0;transition:opacity .3s ease, top .35s var(--ease);
}
#preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#preview img.before{opacity:0;transition:opacity .7s ease}
#preview.ba-before img.before{opacity:1}
#preview.on{opacity:1}
/* до/после: подпись переключается вместе с фото, только когда у строки есть data-img-before */
#preview .ba-tag{
  position:absolute;left:12px;bottom:12px;z-index:2;pointer-events:none;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ivory);background:rgba(10,9,8,.6);padding:5px 10px;border-radius:20px;
  opacity:0;transition:opacity .3s ease;
}
#preview.has-ba .ba-tag-after{opacity:1}
#preview.has-ba.ba-before .ba-tag-after{opacity:0}
#preview.has-ba.ba-before .ba-tag-before{opacity:1}
@media(hover:none), (max-width:1023px){#preview{display:none}}

/* ---------- прайс на мобильном: карточная карусель вместо hover-превью ----------
   Наводить нечем на тачскрине, поэтому вместо строк с превью на курсор —
   карточки со свайпом (формат взят из мобильного экспорта клиента). Рендерится
   в JS из тех же .p-row (один источник данных); строки прячутся только когда
   карусель реально собралась — если JS не отработает, список останется виден. */
.price-carousel{display:none}
@media(max-width:1023px){
  #priceList.pc-ready{display:none}
  .price-carousel.pc-ready{display:block}
}
/* overflow:hidden обязателен: карточки за пределами ±2 позиций невидимы (opacity 0),
   но продолжают занимать место и уезжают на ±1000px — это распирало документ до ~1378px
   при экране 390px. На iOS это давало возможность отдалить страницу и увидеть пустоту
   справа (вёрстка «слетала» в десктопную). */
.pc-track{position:relative;height:60vh;height:60dvh;max-height:440px;min-height:320px;perspective:1100px;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.pc-card{
  position:absolute;top:50%;left:50%;width:66vw;max-width:270px;aspect-ratio:4/5;
  border-radius:14px;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.5);cursor:pointer;
  will-change:transform,opacity;
}
.pc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.pc-card img.before{opacity:0;transition:opacity .7s ease}
.pc-card.ba-before img.before{opacity:1}
.pc-card .ba-tag{
  position:absolute;left:14px;top:14px;z-index:2;
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ivory);background:rgba(10,9,8,.6);padding:4px 9px;border-radius:20px;
  opacity:0;transition:opacity .3s ease;
}
.pc-card.has-ba .ba-tag-after{opacity:1}
.pc-card.has-ba.ba-before .ba-tag-after{opacity:0}
.pc-card.has-ba.ba-before .ba-tag-before{opacity:1}
.pc-card .shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(5,4,4,0) 42%, rgba(5,4,4,.88))}
.pc-card .info{position:absolute;left:18px;right:18px;bottom:16px;z-index:2}
.pc-card .row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pc-card .name{font-family:var(--disp);font-weight:600;font-size:20px;color:var(--ivory)}
.pc-card .price{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--pink);white-space:nowrap}
.pc-card .meta{display:block;margin-top:8px;font-size:13px;font-weight:500;line-height:1.4;color:rgba(244,241,237,.82)}
.pc-more{display:block;margin-top:10px;padding:0;border:0;background:none;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--pink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pc-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:18px}
.pc-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ivory);font-size:18px;line-height:1;cursor:pointer}
.pc-arrow:active{transform:scale(.94)}
.pc-dots{display:flex;align-items:center;gap:6px}
.pc-dots span{display:block;height:6px;border-radius:3px;width:6px;background:var(--line);transition:width .3s ease,background .3s ease}
.pc-dots span.on{width:16px;background:var(--pink)}
.pc-sheet{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease}
.pc-sheet.on{opacity:1;pointer-events:auto}
.pc-sheet-backdrop{position:absolute;inset:0;background:rgba(5,4,4,.72)}
.pc-sheet-panel{position:relative;z-index:1;width:100%;max-width:520px;max-height:78vh;max-height:78dvh;overflow-y:auto;background:var(--coal);border:1px solid var(--line);border-radius:20px 20px 0 0;padding:28px 24px 32px;transform:translateY(24px);transition:transform .35s var(--ease)}
.pc-sheet.on .pc-sheet-panel{transform:translateY(0)}
.pc-sheet-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ivory);font-size:18px;cursor:pointer}
.pc-sheet-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-right:40px;margin-bottom:16px}
.pc-sheet-name{font-family:var(--disp);font-weight:600;font-size:24px;color:var(--ivory)}
.pc-sheet-price{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--pink);white-space:nowrap}
.pc-sheet-body{margin:0;padding:0;list-style:none}
.pc-sheet-body li{position:relative;padding:10px 0 10px 20px;border-top:1px solid var(--line);font-size:15px;line-height:1.4;color:rgba(244,241,237,.9)}
.pc-sheet-body li:first-child{border-top:0}
.pc-sheet-body li::before{content:'';position:absolute;left:0;top:19px;width:6px;height:6px;border-radius:50%;background:var(--pink)}
@media(prefers-reduced-motion:reduce){.pc-card{transition:none!important}}

/* ---------- аренда студии ---------- */
#rent{background:var(--coal)}
.rent-hero{position:relative;height:92vh;height:92dvh;overflow:hidden}
.rent-hero video,.rent-hero .rp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rent-hero .rp{z-index:1;animation:kenburns 18s ease-in-out infinite alternate;transition:opacity 1.2s ease}
.rent-hero .shade{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg, rgba(10,9,8,.24) 0%, rgba(20,17,15,.32) 45%, #14110F 100%)}
.rent-hero .cap{position:absolute;left:0;right:0;bottom:8vh;bottom:8dvh;z-index:3}
.rent-hero .cap h2{font-family:var(--disp);font-weight:600;font-size:clamp(38px,7vw,110px);line-height:.98}
.rent-hero .cap h2 em{font-style:normal;color:var(--pink)}
.rent-hero .cap p{margin-top:14px;font-size:clamp(15px,1.8vw,21px);font-weight:600;color:#D8D1C8}
#rent .lead{padding:80px 0 0}
#rent .lead p{font-size:15px;line-height:1.75;color:var(--muted);max-width:700px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #2C2823;margin-top:48px}
.fact{padding:26px 24px 30px 0;border-right:1px solid #2C2823}
.fact:last-child{border-right:0}
.fact+.fact{padding-left:26px}
.fact .t{font-family:var(--disp);font-weight:600;font-size:clamp(16px,1.7vw,24px)}
.fact .d{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.6}
@media(max-width:820px){
  /* minmax(0,1fr) вместо 1fr: у grid-элементов min-width:auto, и длинное слово
     («Гримёрная») + отступ не давали колонке ужаться — грид распирало шире экрана
     (на 320px вылезало 9px вправо, чего хватало, чтобы страницу можно было отдалить). */
  .facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fact{border-right:0;padding-left:0;min-width:0}
  /* .fact+.fact{padding-left:26px} специфичнее плоского .fact и перебивал сброс —
     из-за этого 3-й блок (начало 2-й строки) съезжал вправо относительно 1-го.
     Возвращаем отступ только чётным (2-я колонка), нечётные — всегда с нуля. */
  .fact+.fact{padding-left:0}
  .fact:nth-child(2n){padding-left:26px}
}
@media(max-width:400px){
  /* на самых узких экранах отступ второй колонки съедает слишком много — уменьшаем */
  .fact{padding-right:14px}
  .fact:nth-child(2n){padding-left:14px}
}
.rent-cta{
  display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;
  border-top:1px solid #2C2823;margin-top:48px;padding-top:30px;
}
.rent-cta .eq .lbl{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.rent-cta .eq .items{display:flex;gap:26px;margin-top:16px;flex-wrap:wrap;font-size:16px;font-weight:600;color:var(--ivory)}
/* margin-left:auto держит цену справа даже если слева нет блока «Доп. оборудование»
   (на странице /arenda-fotostudii/ он убран — там оборудование вынесено в свою секцию) */
.rent-cta .pr{text-align:right;margin-left:auto}
.rent-cta .pr .v{font-family:var(--disp);font-weight:800;font-size:clamp(30px,3.4vw,46px);line-height:1}
.rent-cta .pr .v i{font-style:normal;color:var(--muted);font-size:.5em;font-weight:600}
.rent-price-table{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.rent-price-table .rpt-row{display:flex;justify-content:flex-end;align-items:baseline;gap:12px;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.rent-price-table .rpt-row span:last-child{min-width:52px;text-align:right;font-weight:700;color:var(--ivory)}
.rent-cta .pr .pill{margin-top:18px}
.rent-strip{position:relative;overflow:hidden;margin-top:66px;padding-bottom:86px}
.rent-strip .in{display:flex;gap:18px;width:max-content;animation:mq 44s linear infinite}
.rent-strip img{height:280px;width:auto}
.rent-strip .fade{position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(to bottom, rgba(20,17,15,0), var(--black) 85%);pointer-events:none}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- как проходит съёмка ---------- */
#process{padding:16vh 0;padding:16dvh 0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:56px}
.step{border-top:1px solid var(--ivory);padding-top:20px}
.step .n{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--pink);letter-spacing:.1em}
.step .t{font-size:16px;font-weight:800;margin-top:12px}
.step p{margin-top:10px;font-size:13.5px;line-height:1.7;color:var(--muted)}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- отзывы ---------- */
#reviews{padding:0 0 15vh;padding:0 0 15dvh}
#reviews .head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-top:30px}
#reviews .note{max-width:340px;font-size:14px;line-height:1.7;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px}
.card{background:var(--coal);border:1px solid var(--line);padding:30px;display:flex;flex-direction:column;gap:18px}
.card .src{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.card .src .d{display:inline-flex;align-items:center;gap:8px}
.card .src .d::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pink)}
.card .stars{color:var(--pink);letter-spacing:.14em}
.card p{font-size:17px;font-weight:600;line-height:1.55;transition:opacity .35s ease}
.card .who{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);transition:opacity .35s ease}
.card .src{transition:opacity .35s ease}
/* карусель отзывов: те же 3 карточки, JS каждые несколько секунд подменяет
   в них текст (кроссфейдом) и едет дальше по массиву — без дублирования DOM */
.rv-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:36px}
.rv-nav .pc-arrow:active{transform:scale(.94)}
.rv-count{font-family:var(--mono);font-size:12px;color:var(--muted);min-width:52px;text-align:center}
.rv-more{margin-top:30px;text-align:center}
.rv-more a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--pink);border-bottom:1px solid rgba(255,101,195,.4);padding-bottom:2px;transition:border-color .3s var(--ease)}
.rv-more a:hover{border-color:var(--pink)}
@media(max-width:820px){
  .cards{grid-template-columns:1fr}
  .cards .card:not(:first-child){display:none}
  #reviews .head{flex-direction:column;align-items:flex-start}
}

/* ---------- сертификаты ---------- */
#certs{padding:0 0 16vh;padding:0 0 16dvh}
.cert-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.cert-grid p{margin-top:22px;font-size:15px;line-height:1.75;color:var(--muted);max-width:420px}
/* портретный кадр (4:5) — источник вертикальный, альбомная рамка резала лицо крупным планом */
.cert-grid .ph{aspect-ratio:3/2;overflow:hidden;max-width:480px;margin-left:auto}
.cert-grid .ph img{width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:820px){.cert-grid .ph{max-width:100%;margin-left:0}}
@media(max-width:820px){.cert-grid{grid-template-columns:1fr;gap:30px}}

/* ---------- FAQ ---------- */
#faq{background:linear-gradient(to bottom, var(--black) 0, var(--coal) 160px, var(--coal) calc(100% - 160px), var(--black) 100%);padding:15vh 0;padding:15dvh 0}
#faq .inner{max-width:900px;margin:0 auto;padding:0 var(--pad)}
#faq details{border-top:1px solid #2C2823;padding:4px 0}
#faq details:last-of-type{border-bottom:1px solid #2C2823}
#faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:20px 0;font-family:var(--disp);font-weight:600;font-size:clamp(15px,1.8vw,23px);line-height:1.3;
}
#faq summary::-webkit-details-marker{display:none}
#faq summary .x{color:var(--pink);font-size:1.1em;display:inline-block;transition:transform .3s var(--ease);flex-shrink:0}
#faq details[open] summary .x{transform:rotate(45deg)}
#faq details p{margin:0 0 24px;font-size:14.5px;line-height:1.75;color:var(--muted);max-width:640px}

/* ---------- контакты ---------- */
#contacts{padding:15vh 0;padding:15dvh 0}
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.ct-grid .lead p{margin-top:22px;font-size:15px;line-height:1.75;color:var(--muted);max-width:420px}
.ct-grid .btns{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
.map{
  position:relative;height:340px;border:1px solid var(--line);overflow:hidden;
  background:var(--coal);
}
/* карта Яндекса светлая по умолчанию. Полная инверсия убивала читаемость (карта
   становилась однотонно-серой) — оставили только лёгкое приглушение тона. */
.map iframe{display:block;filter:saturate(75%) brightness(.97)}
.ct-meta{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
.ct-meta .lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ct-meta .v{font-size:14.5px;margin-top:8px;line-height:1.6}
@media(max-width:900px){.ct-grid{grid-template-columns:1fr;gap:40px}}

/* ---------- футер ---------- */
footer{padding:14vh 0 40px;padding:14dvh 0 40px;overflow:hidden}
footer .slogan{
  text-align:center;font-family:var(--disp);font-weight:600;
  font-size:clamp(30px,5.6vw,88px);line-height:1.06;letter-spacing:-.01em;
}
footer .slogan em{font-style:normal;color:var(--pink)}
footer .menu{display:flex;justify-content:center;gap:30px;margin-top:48px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
footer .menu a{color:var(--muted);transition:color .2s}
footer .menu a:hover{color:var(--pink)}
footer .base{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:64px;padding-top:26px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);
}
footer .base .b{font-family:var(--disp);font-weight:800;letter-spacing:.05em;color:var(--pink);font-size:14px}
footer .base .credit{color:var(--muted);transition:color .2s}
footer .base .credit:hover{color:var(--pink)}

/* ---------- уведомление о cookie ---------- */
#cookieNotice{
  position:fixed;left:0;right:0;bottom:0;z-index:500;
  display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;
  padding:18px 24px;background:var(--coal);border-top:1px solid var(--line);
  transform:translateY(120%);transition:transform .5s var(--ease);
}
#cookieNotice.on{transform:translateY(0)}
#cookieNotice p{margin:0;font-size:13px;line-height:1.5;color:var(--muted);max-width:640px}
#cookieNotice a{color:var(--ivory);text-decoration:underline;text-underline-offset:3px}
#cookieNotice .pill{flex-shrink:0;padding:12px 26px;font-size:12px}
@media(max-width:640px){#cookieNotice{padding:16px 18px;justify-content:flex-start}#cookieNotice p{font-size:12.5px}}

/* ---------- кастомный курсор ---------- */
.cursor{display:none}
@media(hover:hover) and (pointer:fine){
  .cursor{
    display:block;position:fixed;top:0;left:0;z-index:150;pointer-events:none;
    width:10px;height:10px;border-radius:50%;background:var(--pink);
    transform:translate(-50%,-50%);
    transition:width .25s,height .25s,opacity .25s;
    mix-blend-mode:difference;
  }
  .cursor.grow{width:52px;height:52px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .grain,.frame .sweep{animation:none!important}
  .frame .poster,.rent-hero .rp{animation:none!important;transform:none!important}
  .rent-strip .in{animation:none!important}
  .rv,.rv-card,.line-mask>span,.hero-title,.hero-sub{opacity:1!important;transform:none!important}
  .hero-title{clip-path:inset(0 0 0 0)!important}
  #loader{display:none!important}
  .cursor{display:none!important}
  #preview{display:none!important}
}

/* ============================================================
   ВНУТРЕННИЕ СТРАНИЦЫ (/foto-na-dokumenty/, /arenda-fotostudii/)
   Отдельные посадочные под свой поисковый запрос. Стили простые
   и без JS-зависимостей: контент виден, даже если скрипты не
   отработали (важно и для SEO, и для отказоустойчивости).
   ============================================================ */
.sub-hero{position:relative;padding:150px 0 96px;overflow:hidden}
.sub-hero .wrap{position:relative;z-index:2}
.sub-hero .crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sub-hero .crumbs a{color:var(--muted);transition:color .2s}
.sub-hero .crumbs a:hover{color:var(--pink)}
.sub-hero .crumbs span{margin:0 8px;opacity:.5}
.sub-hero h1{
  font-family:var(--disp);font-weight:600;margin-top:22px;
  font-size:clamp(32px,5.6vw,76px);line-height:1.03;letter-spacing:-.015em;max-width:15ch;
}
.sub-hero h1 em{font-style:normal;color:var(--pink)}
.sub-hero .lead{margin-top:26px;max-width:62ch;font-size:clamp(15px,1.5vw,19px);line-height:1.65;color:var(--muted)}
.sub-hero .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.sub-hero .shot{position:relative;margin-top:64px;aspect-ratio:16/7;overflow:hidden;background:var(--coal)}
.sub-hero .shot img{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.sub-hero{padding-top:112px;padding-bottom:64px}.sub-hero .shot{aspect-ratio:4/3;margin-top:44px}}

.sec{padding:13vh 0;padding:13dvh 0}
.sec-head{max-width:72ch}
.sec-head p{margin-top:20px;font-size:15px;line-height:1.75;color:var(--muted)}

/* три тарифа */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;align-items:start}
.tier{background:var(--coal);border:1px solid var(--line);padding:32px 28px 34px;display:flex;flex-direction:column;height:100%}
.tier.is-top{border-color:var(--pink)}
.tier .tag{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--pink);min-height:14px}
.tier h3{font-family:var(--disp);font-weight:600;font-size:26px;margin-top:14px}
.tier .price{font-family:var(--mono);font-weight:700;font-size:30px;color:var(--pink);margin-top:12px}
.tier .price i{font-style:normal;font-size:13px;color:var(--muted);margin-left:4px}
.tier .cnt{font-size:13px;color:var(--muted);margin-top:8px}
.tier ul{list-style:none;margin:24px 0 0;padding:0;flex:1}
.tier li{position:relative;padding:9px 0 9px 20px;border-top:1px solid var(--line);font-size:14px;line-height:1.5;color:rgba(244,241,237,.9)}
.tier li:first-child{border-top:0}
.tier li::before{content:'';position:absolute;left:0;top:17px;width:5px;height:5px;border-radius:50%;background:var(--pink)}
.tier .pill{margin-top:26px;justify-content:center}
@media(max-width:900px){.tiers{grid-template-columns:1fr;gap:16px}}

/* прайс-строки без интерактива */
.plist{margin-top:48px;border-top:1px solid var(--line)}
.plist .row{display:grid;grid-template-columns:1.1fr 1.6fr auto;gap:18px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.plist .row .n{font-family:var(--disp);font-weight:600;font-size:19px}
.plist .row .d{font-size:14px;color:var(--muted);line-height:1.5}
.plist .row .p{font-family:var(--mono);font-weight:700;font-size:17px;color:var(--pink);white-space:nowrap}
@media(max-width:700px){
  .plist .row{grid-template-columns:1fr auto;gap:6px 14px}
  .plist .row .d{grid-column:1/-1;order:3}
}

/* список характеристик/оборудования */
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin-top:44px}
.specs div{padding:16px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5;display:flex;gap:12px}
.specs div::before{content:'—';color:var(--pink);flex-shrink:0}
@media(max-width:700px){.specs{grid-template-columns:minmax(0,1fr)}}

/* шаги */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin-top:52px}
.step .n{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--pink)}
.step h3{font-family:var(--disp);font-weight:600;font-size:19px;margin-top:14px}
.step p{margin-top:10px;font-size:14px;line-height:1.6;color:var(--muted)}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 22px}}
@media(max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}

/* галерея */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px}
.gal figure{margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--coal)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gal figure:hover img{transform:scale(1.04)}
@media(max-width:820px){.gal{grid-template-columns:repeat(2,1fr);gap:10px}}

/* FAQ на внутренних */
.qa{margin-top:48px;border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;gap:18px;align-items:baseline;justify-content:space-between;font-family:var(--disp);font-weight:600;font-size:clamp(16px,1.7vw,21px)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .x{color:var(--pink);font-size:20px;line-height:1;transition:transform .3s var(--ease)}
.qa details[open] summary .x{transform:rotate(45deg)}
.qa p{margin:0 0 24px;max-width:74ch;font-size:15px;line-height:1.7;color:var(--muted)}

/* финальный призыв */
.cta-band{border-top:1px solid var(--line);padding:12vh 0;padding:12dvh 0;text-align:center}
.cta-band h2{font-family:var(--disp);font-weight:600;font-size:clamp(26px,4vw,54px);line-height:1.06}
.cta-band p{margin:22px auto 0;max-width:56ch;font-size:15px;line-height:1.7;color:var(--muted)}
.cta-band .acts{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:34px}

/* подпись над почасовым прайсом аренды */
.rent-cta .pr .pr-lbl{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px;
}

/* ============================================================
   ЛАЙТБОКС — просмотр фотографий студии
   Открывается по клику на снимок в ленте аренды. Работает и мышью,
   и пальцем (свайп), листается стрелками клавиатуры.
   ============================================================ */
.lb-open{cursor:zoom-in}
#lightbox{
  position:fixed;inset:0;z-index:300;display:none;
  background:rgba(6,5,5,.94);
  align-items:center;justify-content:center;
  opacity:0;transition:opacity .28s ease;
}
#lightbox.on{display:flex;opacity:1}
#lightbox .lb-stage{
  position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  padding:72px 84px;
}
#lightbox img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;user-select:none;-webkit-user-drag:none;
  opacity:0;transition:opacity .25s ease;
}
#lightbox img.ready{opacity:1}
#lightbox button{
  position:absolute;z-index:2;border:1px solid rgba(244,241,237,.28);
  background:rgba(20,17,15,.7);color:var(--ivory);
  width:52px;height:52px;border-radius:50%;
  font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s,transform .12s ease-out;
}
#lightbox button:hover{background:var(--pink);border-color:var(--pink);color:var(--black)}
#lightbox button:active{transform:scale(.94)}
#lightbox .lb-prev{left:20px;top:50%;margin-top:-26px}
#lightbox .lb-next{right:20px;top:50%;margin-top:-26px}
#lightbox .lb-close{right:20px;top:20px}
#lightbox .lb-count{
  position:absolute;left:0;right:0;bottom:24px;text-align:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--muted);
}
@media(max-width:820px){
  #lightbox .lb-stage{padding:64px 12px 84px}
  #lightbox button{width:46px;height:46px;font-size:20px}
  #lightbox .lb-prev{left:10px}
  #lightbox .lb-next{right:10px}
  #lightbox .lb-close{right:10px;top:12px}
}
@media(prefers-reduced-motion:reduce){
  #lightbox,#lightbox img{transition:none}
}

/* ============================================================
   ПРОИЗВОДИТЕЛЬНОСТЬ НА МОБИЛЬНОМ
   ============================================================
   На телефоне рывки при скролле давали постоянно работающие
   декоративные анимации: зерно плёнки (полноэкранный слой,
   перерисовывался ~3 раза в секунду), Ken Burns на постерах и
   световой блик. Все три — чистое украшение, на узких экранах
   их выключаем: картинка остаётся та же, но GPU освобождается.
   ============================================================ */
@media(max-width:900px){
  .grain{animation:none}
  .frame .sweep{display:none}
  .frame .poster,.rent-hero .rp{animation:none;transform:none}

  /* карточки прайса дальше соседних всё равно не видны (opacity 0),
     но 3D-трансформация держала их отдельными слоями в памяти GPU */
  .pc-card{will-change:auto}
}

/* Тач-устройства: тот же набор, но по типу ввода, а не по ширине —
   ловит планшеты в горизонтальной ориентации. */
@media(hover:none) and (pointer:coarse){
  .grain{animation:none}
  .frame .sweep{display:none}
}

/* Lenis на телефоне выключен, поэтому плавность якорей отдаём браузеру.
   Только для тач-устройств — на десктопе этим занимается Lenis, и глобальный
   smooth конфликтовал бы с GSAP ScrollTrigger. */
@media(hover:none) and (pointer:coarse){
  html{scroll-behavior:smooth}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}