/* ============================================================
   PERMAR · общий CSS
   Кладётся один раз: Тильда → Редактор CSS проекта
   ============================================================ */

.pm{
  --pm-paper:#F3F2EE;
  --pm-paper-2:#E8E6E0;
  --pm-ink:#0E0E0E;
  --pm-red:#D62128;
  --pm-red-dk:#AB0707;
  --pm-hair:#D6D4CE;
  --pm-muted:#5E5C55;
  --pm-body:#3C3A35;

  --pm-glass:rgba(255,255,255,.74);
  --pm-glass-br:rgba(255,255,255,.92);

  /* Боевой набор: Druk Cyr / TT Norms Pro в дисплее.
     Пока их нет в проекте — тяжёлый системный гротеск. */
  --pm-display:"TT Norms Pro","Druk Cyr","Helvetica Neue",Helvetica,Arial,sans-serif;
  --pm-text:"Manrope","Helvetica Neue",Helvetica,Arial,sans-serif;
  --pm-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --pm-max:100%;
  --pm-pad:clamp(20px,3.6vw,72px);

  background:var(--pm-paper);
  color:var(--pm-ink);
  font-family:var(--pm-text);
  -webkit-font-smoothing:antialiased;
}

/* clip только в блоке героя: на .pm он бы сломал sticky шапки */
.pm-hero-root{overflow-x:hidden;overflow-x:clip}
.pm *{box-sizing:border-box}
.pm img{display:block;max-width:100%}

.pm-wrap{max-width:var(--pm-max);margin:0 auto;padding:0 var(--pm-pad)}

/* ---------- типографика ---------- */
.pm-h{
  font-family:var(--pm-display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.045em;
  line-height:.9;
  margin:0;
  text-wrap:balance;
}
.pm-h em{font-style:normal;color:var(--pm-red)}
.pm-h1{font-size:clamp(40px,6.6vw,92px);line-height:.98;letter-spacing:-.05em}
.pm-h2{font-size:clamp(26px,3.6vw,44px);line-height:.98;letter-spacing:-.04em}

.pm-label{
  font-family:var(--pm-mono);
  font-size:11.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--pm-muted);
  margin:0;
}
.pm-label--red{color:var(--pm-red)}
.pm-lead{font-size:18px;line-height:1.5;color:var(--pm-body);margin:0}
.pm-note{font-size:15px;line-height:1.5;color:var(--pm-body);margin:0}

/* ---------- шапка секции ---------- */
.pm-sec{padding:64px 0;border-bottom:1px solid var(--pm-hair);position:relative;overflow:hidden}
.pm-sec__head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:30px}
.pm-sec__head .pm-note{margin-left:auto;max-width:38ch}

/* ---------- стекло ---------- */
.pm-glass{
  background:var(--pm-glass);
  border:1px solid var(--pm-glass-br);
  border-radius:2px;
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 20px 46px -30px rgba(60,45,30,.55);
}

/* ---------- тёплое свечение ---------- */
.pm-warm{
  position:absolute;
  aspect-ratio:1;
  pointer-events:none;
  background:radial-gradient(circle at 45% 50%,
    rgba(255,150,105,.50) 0%,
    rgba(255,190,150,.22) 45%,
    rgba(255,200,170,0) 70%);
}

/* ---------- кнопки ---------- */
.pm-btn{
  display:inline-block;
  font-family:var(--pm-text);
  font-size:16px;
  font-weight:700;
  padding:16px 30px;
  text-decoration:none;
  border-radius:0;
  transition:background-color .25s ease,color .25s ease;
}
.pm-btn--main{background:var(--pm-red);color:#fff}
.pm-btn--main:hover{background:var(--pm-red-dk);color:#fff}
.pm-btn--ghost{border:1px solid var(--pm-ink);color:var(--pm-ink);padding:15px 28px}
.pm-btn--ghost:hover{background:var(--pm-ink);color:var(--pm-paper)}
.pm a:focus-visible,.pm button:focus-visible{outline:2px solid var(--pm-red);outline-offset:3px}

/* ---------- фото ---------- */
.pm-photo{position:relative;overflow:hidden;background:var(--pm-paper-2)}
.pm-photo img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1),filter .6s ease;
}
.pm-photo__cap{
  position:absolute;left:12px;bottom:10px;
  font-family:var(--pm-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.75);
}
a:hover > .pm-photo img,
.pm-hoverable:hover .pm-photo img{transform:scale(1.035);filter:saturate(1.08) contrast(1.04)}

/* ---------- сброс отступов T123 ---------- */
.t-rec .pm{margin:0}

/* ---------- доступность ---------- */
@media (prefers-reduced-motion:reduce){
  .pm *{animation:none !important;transition:none !important}
}

/* ---------- мобильные ---------- */
@media screen and (max-width:640px){
  .pm{--pm-pad:18px}
  .pm-sec{padding:44px 0}
  .pm-sec__head{margin-bottom:22px}
  .pm-sec__head .pm-note{margin-left:0;max-width:none}
}


/* ============================================================
   PM · форма Тильды в Zero Block
   Приёмники и маска телефона остаются родными — меняем только вид.
   ============================================================ */

.t396 .t-input,
.t396 .t-input-phonemask{
  background:transparent !important;
  border:1px solid #C9C6BE !important;
  border-radius:0 !important;
  color:#0E0E0E !important;
  font-family:"Manrope","Helvetica Neue",Helvetica,Arial,sans-serif !important;
  font-size:16px !important;
  line-height:1.4 !important;
  padding:14px 16px !important;
  height:auto !important;
  box-shadow:none !important;
  transition:border-color .2s ease;
}
.t396 .t-input::placeholder{color:#8A8780 !important;opacity:1}
.t396 .t-input:focus,
.t396 .t-input:focus-visible{border-color:#D62128 !important;outline:none !important}

.t396 .t-input-title{
  font-family:"Manrope","Helvetica Neue",Helvetica,Arial,sans-serif !important;
  font-size:14px !important;
  font-weight:400 !important;
  color:#5E5C55 !important;
  margin-bottom:8px !important;
}
.t396 .t-input-group{margin-bottom:12px !important}

.t396 .t-submit{
  background:#D62128 !important;
  border:0 !important;
  border-radius:0 !important;
  color:#fff !important;
  font-family:"Manrope","Helvetica Neue",Helvetica,Arial,sans-serif !important;
  font-size:16px !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
  padding:15px 30px !important;
  height:auto !important;
  box-shadow:none !important;
  transition:background-color .25s ease;
}
.t396 .t-submit:hover{background:#AB0707 !important}
.t396 .t-submit:focus-visible{outline:2px solid #0E0E0E !important;outline-offset:3px}

/* код страны в маске телефона */
.t396 .t-inputphone__dropdown{border-radius:0 !important}


/* воздух перед подвалом и запас под выросшую кнопку */
div[id^="rec"]:has(.t396 .t-form){padding-bottom:46px !important}
div[id^="rec"]:has(.t396 .t-form) .t396__artboard{overflow:visible !important}


/* ============================================================
   PM · СТРАНИЦА КЕЙСА — общие стили
   Вынесены из блоков, чтобы каждый кейс был только разметкой.
   ============================================================ */

.pm-crumbs{font-family:var(--pm-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--pm-muted);margin-bottom:26px}
.pm-crumbs a{color:var(--pm-muted);text-decoration:none}
.pm-crumbs a:hover{color:var(--pm-red)}
.pm-crumbs span{margin:0 8px}
.pm-crumbs b{color:var(--pm-ink);font-weight:700}

/* первый экран кейса: текст слева, кадр справа, плашка с цифрами внахлёст */
.pm-cp__top{padding-top:44px;overflow:hidden}
.pm-cp__warm{right:4%;top:-24%;width:38%}
.pm-cp__h1{margin-top:14px}
.pm-cp__lead{margin-top:24px;max-width:52ch}
.pm-cp__hero{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:end;position:relative}
.pm-cp__hero-txt{padding-bottom:78px}
.pm-cp__shot{aspect-ratio:4/3}
.pm-cp__shot--portrait{aspect-ratio:3/4}
.pm-cp__facts{display:flex;gap:26px;padding:24px 26px;position:relative;z-index:2;margin-top:-58px;margin-right:14%}
.pm-cp__facts > div{display:flex;flex-direction:column;gap:8px}
.pm-cp__n{font-family:var(--pm-display);font-size:40px;font-weight:900;letter-spacing:-.05em;line-height:.9}
.pm-cp__l{font-size:14px;line-height:1.3;color:var(--pm-body)}

/* блок «что это даёт» + кнопка */
.pm-cp__why{border-bottom:0}
.pm-cp__why-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start}
.pm-cp__why-text .pm-note{margin-top:16px}
.pm-cp__cta{margin-top:26px}

/* акцентная полоса на цветном фоне */
.pm-cp__hl{background:var(--pm-paper-2)}
.pm-cp__hl-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}
.pm-cp__hl-in .pm-note{margin-top:16px}

/* шаги «как делали» */
.pm-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pm-step{display:flex;flex-direction:column;gap:10px;padding:26px}
.pm-step__t{font-family:var(--pm-display);font-size:20px;font-weight:800;letter-spacing:-.025em;margin:0}

/* карточки-направления внутри кейса */
.pm-parts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pm-part{display:flex;flex-direction:column;gap:10px;padding:28px;min-height:240px}
.pm-part__t{font-family:var(--pm-display);font-size:24px;font-weight:800;letter-spacing:-.03em;margin:0}

/* галерея */
.pm-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pm-gal--2{grid-template-columns:1fr 1fr}
.pm-gal--4{grid-template-columns:repeat(4,1fr)}
.pm-gal .pm-photo{aspect-ratio:3/2}
.pm-gal--portrait .pm-photo{aspect-ratio:3/4}
.pm-gal--tall .pm-photo{aspect-ratio:9/16}
.pm-gal__wide{grid-column:span 2}
.pm-gal__note{margin-top:18px;max-width:78ch}

/* видео */
.pm-films{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.pm-film{background:var(--pm-paper);padding-bottom:24px;box-shadow:0 0 0 1px var(--pm-hair)}
.pm-film__frame{position:relative;aspect-ratio:16/9;background:#111}
.pm-film__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pm-film__meta{display:flex;gap:12px;margin:16px 20px 0;font-family:var(--pm-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--pm-muted)}
.pm-film__meta i{font-style:normal;color:var(--pm-red)}
.pm-film__t{font-family:var(--pm-display);font-size:23px;font-weight:800;letter-spacing:-.025em;margin:9px 20px 7px}
.pm-film .pm-note{margin:0 20px}
.pm-solo{max-width:1100px}
.pm-solo__cap{margin:16px 0 0;font-size:15px;line-height:1.5;color:var(--pm-body);max-width:70ch}

/* наружка: крупный визуал + сетка размещений */
.pm-out{display:grid;grid-template-columns:.62fr 1fr;gap:14px;align-items:stretch}
.pm-out__main{aspect-ratio:4/7}
.pm-out__grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:14px}
.pm-out__where{display:flex;flex-direction:column;gap:10px;padding:24px;justify-content:center}
.pm-vitrines{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pm-vitrines .pm-photo{aspect-ratio:9/16}

/* подписи на светлых кадрах без затемнения не читаются */
.pm-photo__cap{z-index:2}
.pm-out .pm-photo::after,
.pm-gal .pm-photo::after,
.pm-cp__shot::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0));
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.pm-photo:has(.pm-photo__cap)::after{opacity:1}
.pm-out__where::after{display:none}

@media screen and (max-width:1100px){ .pm-steps{grid-template-columns:1fr 1fr} }
@media screen and (max-width:900px){
  .pm-cp__hero{grid-template-columns:1fr;gap:26px}
  .pm-cp__hero-txt{padding-bottom:0}
  .pm-cp__facts{margin-top:14px;margin-right:0}
  .pm-cp__warm{width:78%;right:-18%;top:-6%}
  .pm-cp__hl-in,.pm-cp__why-in{grid-template-columns:1fr;gap:20px}
  .pm-parts,.pm-films{grid-template-columns:1fr}
  .pm-part{min-height:0}
  .pm-gal,.pm-gal--4{grid-template-columns:1fr 1fr}
  .pm-out{grid-template-columns:1fr}
  .pm-out__main{aspect-ratio:4/5}
}
@media screen and (max-width:640px){
  .pm-steps{grid-template-columns:1fr}
  .pm-cp__facts{flex-direction:column;gap:18px}
  .pm-cp__n{font-size:34px}
  .pm-gal,.pm-gal--2,.pm-gal--4{grid-template-columns:1fr}
  .pm-gal__wide{grid-column:auto}
  .pm-vitrines{grid-template-columns:1fr}
}