/* PR: the shared VAK shell with a rose-lilac accent taken from the lens
   object. The chain, cases and sector tags follow the annotated brief. */

/* Denser rhythm, as on the strategy page: no screen-high gaps between blocks. */
.sp[data-service="pr"] .sp-section{padding-block:clamp(60px,6.5vw,100px)}

/* Hero: a larger lens without the decorative trace; the photo edges dissolve
   into the page instead of showing a rectangle. */
.sp[data-service="pr"] .sp-hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px)}
.sp[data-service="pr"] .sp-hero__visual{min-height:clamp(420px,40vw,560px)}
.sp[data-service="pr"] .sp-hero__object{width:150%;right:-10%;opacity:.96;transform:translate3d(0,-50%,0);transform-origin:center;mask-image:linear-gradient(90deg,transparent,#000 26%,#000 84%,transparent),linear-gradient(0deg,transparent,#000 16%,#000 84%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 26%,#000 84%,transparent),linear-gradient(0deg,transparent,#000 16%,#000 84%,transparent);-webkit-mask-composite:source-in}
.sp[data-service="pr"] .sp-hero__visual:hover .sp-hero__object{transform:translate3d(0,-50%,0) scale(1.015);filter:brightness(1.05)}

/* 3.2: one horizontal sequence, numbered, with the business result below
   the final step. All copy is HTML; lines and arrows are decoration. */
.sp-pr-chain-section .sp-head{margin-bottom:clamp(40px,5vw,72px)}
.sp-pr-chain{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;margin:0;padding:0}
.sp-pr-chain li{position:relative;padding-right:clamp(40px,4.4vw,64px);color:#c9a6f5;opacity:0;transform:translateY(12px);transition:opacity .7s var(--e-out) calc(.08s + var(--sp-item-delay)),transform .8s var(--e-out) calc(.08s + var(--sp-item-delay))}
.sp-pr-chain li:nth-child(2){color:#d7a4ea}
.sp-pr-chain li:nth-child(3){color:#e4a3dc}
.sp-pr-chain li:nth-child(4){color:#eda2cc}
.sp-pr-chain li:nth-child(5){color:#efb0bd}
.sp-pr-chain-wrap.is-in .sp-pr-chain li{opacity:1;transform:none}
.sp-pr-chain__num{display:block;margin-bottom:12px;font-size:17px;font-weight:360;line-height:1;letter-spacing:.02em}
.sp-pr-chain h3{margin:0;color:var(--ink);font-size:clamp(21px,1.9vw,27px);font-weight:390;line-height:1.2;letter-spacing:-.03em}
.sp-pr-chain li:last-child h3{color:currentColor}
.sp-pr-chain p{margin:12px 0 0;color:var(--ink-2);font-size:14.5px;line-height:1.55;max-width:22ch}
.sp-pr-chain__arrow{position:absolute;right:clamp(10px,1.2vw,18px);top:calc(29px + .6em);width:clamp(22px,2.4vw,34px);height:1px;background:currentColor;opacity:.75}
.sp-pr-chain__arrow::after{content:'';position:absolute;right:0;top:-3.5px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);transform-origin:center}
/* The result sits under "trust": its connector starts from that column. */
.sp-pr-chain__result{position:relative;width:calc(20% + 96px);margin:62px 0 0 calc(80% - 96px);padding:16px 26px;border:1px solid rgba(var(--sp-accent-rgb),.55);border-radius:999px;background:linear-gradient(100deg,rgba(201,166,245,.09),rgba(239,161,196,.06));color:var(--ink);font-size:15px;font-weight:450;line-height:1.45;opacity:0;transition:opacity .7s var(--e-out) .5s}
.sp-pr-chain__result i{margin:0 .4em;font-style:normal;color:var(--sp-accent)}
.sp-pr-chain__result::before{content:'';position:absolute;left:96px;bottom:100%;width:1px;height:46px;background:linear-gradient(rgba(var(--sp-accent-rgb),.2),rgba(var(--sp-accent-rgb),.75))}
.sp-pr-chain-wrap.is-in .sp-pr-chain__result{opacity:1}

/* 3.3: the homepage case cards as a quiet, manually scrolled strip. The rail
   starts at the content edge and runs out to the viewport edge. */
.sp-pr-cases{--rail-inset:max(var(--gut),calc((100% - var(--wrap)) / 2 + var(--gut)))}
.sp-pr-cases__head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:clamp(28px,3.4vw,46px)}
.sp-pr-cases__head h2{margin:0;font-size:clamp(26px,2.6vw,38px);font-weight:340;line-height:1.08;letter-spacing:-.032em}
.sp-pr-cases__head p{max-width:36ch;margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.55}
.sp-pr-cases__rail{display:flex;gap:clamp(14px,1.5vw,20px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--rail-inset);padding:4px var(--rail-inset) 14px;scrollbar-width:thin;scrollbar-color:rgba(var(--sp-accent-rgb),.38) transparent}
.sp-pr-cases__rail:focus-visible{outline:1px solid rgba(var(--sp-accent-rgb),.6);outline-offset:-1px}
.sp-pr-case{flex:0 0 clamp(290px,25vw,360px);display:flex;flex-direction:column;padding:clamp(22px,2.1vw,30px);border:1px solid var(--line);border-radius:22px;scroll-snap-align:start;background:linear-gradient(158deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 52%,rgba(255,255,255,.024)),linear-gradient(180deg,rgba(11,8,22,.82),rgba(8,6,17,.88));opacity:0;transform:translateY(14px);transition:opacity .68s var(--e-out) calc(.1s + var(--sp-item-delay)),transform .78s var(--e-out) calc(.1s + var(--sp-item-delay)),border-color .35s var(--e)}
.sp-pr-cases__rail.is-in .sp-pr-case{opacity:1;transform:none}
.sp-pr-case:hover{border-color:rgba(var(--sp-accent-rgb),.42)}
.sp-pr-case header{display:flex;align-items:center;gap:14px;min-height:60px;margin-bottom:18px}
.sp-pr-case header img{flex:0 0 56px;width:56px;height:56px;object-fit:contain;border-radius:11px}
.sp-pr-case header img.is-wordmark{flex-basis:88px;width:88px;height:42px;border-radius:7px}
.sp-pr-case h3{margin:0;font-size:clamp(21px,1.7vw,26px);font-weight:370;line-height:1.15;letter-spacing:-.03em}
.sp-pr-case header span{display:block;margin-top:6px;color:var(--sp-accent);font-size:12.5px;line-height:1.35}
.sp-pr-case>p{margin:0 0 .75em;color:var(--ink-2);font-size:14px;line-height:1.58}
.sp-pr-case>p b{color:var(--ink);font-weight:500}
.sp-pr-case__res{display:grid;grid-template-columns:1fr 1fr;margin:auto 0 0;padding:16px 0 0;list-style:none}
.sp-pr-case__res li{padding:14px 0 2px;border-top:1px solid var(--line)}
.sp-pr-case__res li:nth-child(even){padding-left:14px;border-left:1px solid var(--line)}
.sp-pr-case__res b{display:block;color:#fff;font-size:clamp(20px,1.7vw,25px);font-weight:250;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sp-pr-case__res li:first-child b{color:var(--sp-accent)}
.sp-pr-case__res span{display:block;margin-top:5px;color:#c3bdd4;font-size:12.5px;line-height:1.4}

/* Working process: a 3 × 2 grid with a gradient rule above each step. */
.sp-pr-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,3.4vw,48px) clamp(24px,3vw,48px);list-style:none;margin:0;padding:0}
.sp-pr-steps li{position:relative;padding-top:22px;opacity:0;transform:translateY(12px);transition:opacity .7s var(--e-out) calc(.08s + var(--sp-item-delay)),transform .8s var(--e-out) calc(.08s + var(--sp-item-delay))}
.sp-pr-steps li::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(var(--sp-accent-rgb),.75),rgba(var(--sp-accent-rgb),.12) 70%,transparent)}
.sp-pr-steps.is-in li{opacity:1;transform:none}
.sp-pr-steps span{display:block;margin-bottom:14px;color:var(--sp-accent);font-size:15px;font-weight:380;letter-spacing:.02em;line-height:1}
.sp-pr-steps h3{margin:0;font-size:clamp(20px,1.75vw,25px);font-weight:390;line-height:1.2;letter-spacing:-.03em}
.sp-pr-steps p{margin:10px 0 0;max-width:34ch;color:var(--ink-2);font-size:14.5px;line-height:1.56}

/* 3.4: accent tags, slightly larger so they stay readable. */
.sp[data-service="pr"] .sp-sector__tags li{font-size:11px;color:rgba(var(--sp-accent-rgb),.95)}

@media(max-width:1100px){
  .sp-pr-chain li{padding-right:36px}
  .sp-pr-chain__arrow{right:14px;width:18px}
  .sp-pr-chain p{font-size:13.5px}
}
@media(max-width:900px){
  .sp-pr-chain{grid-template-columns:1fr;gap:0;border-left:1px solid rgba(var(--sp-accent-rgb),.4)}
  .sp-pr-chain li{padding:0 0 26px 24px}
  .sp-pr-chain li::before{content:'';position:absolute;left:-4px;top:10px;width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
  .sp-pr-chain__num{display:inline-block;margin:0 10px 0 0;font-size:14px}
  .sp-pr-chain h3{display:inline;font-size:22px}
  .sp-pr-chain p{max-width:44ch;margin-top:6px;font-size:14px}
  .sp-pr-chain__arrow{display:none}
  .sp-pr-chain__result{width:auto;margin:6px 0 0;padding:14px 22px;font-size:14.5px}
  .sp-pr-chain__result::before{display:none}
  .sp-pr-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-pr-cases__head{display:block}
  .sp-pr-cases__head p{margin-top:12px}
}
@media(max-width:700px){
  .sp[data-service="pr"] .sp-hero{min-height:auto;padding-top:calc(var(--nav-h) + 36px);padding-bottom:44px}
  .sp[data-service="pr"] .sp-hero__grid{grid-template-columns:1fr;gap:22px}
  .sp[data-service="pr"] .sp-hero__visual{min-height:60vw;max-height:none}
  .sp[data-service="pr"] .sp-hero__object{width:128%;right:-14%;max-width:none}
  .sp-pr-case{flex-basis:min(84vw,340px)}
  .sp-pr-steps{grid-template-columns:1fr;gap:26px}
  .sp[data-service="pr"] .sp-proof{gap:10px}
  .sp[data-service="pr"] .sp-proof__item{padding:16px 0 14px}
  .sp[data-service="pr"] .sp-section{padding-block:52px}
}
@media(prefers-reduced-motion:reduce){
  .sp-pr-chain li,.sp-pr-chain__result,.sp-pr-case,.sp-pr-steps li{opacity:1;transform:none;transition:none}
  .sp[data-service="pr"] .sp-hero__object,.sp[data-service="pr"] .sp-hero__visual:hover .sp-hero__object{transition:none;transform:translate3d(0,-50%,0)}
}

/* ---------- PR на компьютере: движение по прокрутке (просьба 20.10) ----------
   Общие эффекты (свет по ряду, барабан, подсветка по шагам) — в polish.css,
   здесь то, что есть только у PR. Значения ставит service-mobile.js. */
@media (min-width:901px){
  /* «Материал работает не сам по себе»: подсветка идёт по цепочке (общие правила
     d-walk в polish.css), здесь только стрелки. */
  .sp[data-service="pr"] .sp-pr-chain.d-walk .sp-pr-chain__arrow{opacity:.3;transition:opacity .45s,box-shadow .45s}
  .sp[data-service="pr"] .sp-pr-chain.d-walk li.is-on:not(.is-cur) .sp-pr-chain__arrow{opacity:1;box-shadow:0 0 10px currentColor}

  /* «От повода к опубликованному материалу»: горизонтальная линия этапов. */
  .sp[data-service="pr"] .sp-pr-steps.d-hline{position:relative;gap:clamp(30px,3.4vw,48px) clamp(20px,2.2vw,32px)}
  .sp[data-service="pr"] .sp-pr-steps.d-hline > li{padding-top:34px;opacity:1;transform:none}
  .sp[data-service="pr"] .sp-pr-steps.d-hline > li > span{display:none}
  .sp[data-service="pr"] .sp-pr-steps.d-hline > li::before{left:0;right:auto;top:0;width:12px;height:12px;border-radius:50%;
    background:#06050C;border:2px solid rgba(255,255,255,.2);box-sizing:border-box;z-index:1;transition:background .4s,border-color .4s,box-shadow .4s}
  .sp[data-service="pr"] .sp-pr-steps.d-hline > li.is-on::before{background:var(--sp-accent);border-color:var(--sp-accent);box-shadow:0 0 12px rgba(var(--sp-accent-rgb),.6)}
  .sp[data-service="pr"] .sp-pr-steps.d-hline h3{color:#8F88A6;transition:color .4s}
  .sp[data-service="pr"] .sp-pr-steps.d-hline p{color:#6F6886;transition:color .4s}
  .sp[data-service="pr"] .sp-pr-steps.d-hline > li.is-on h3{color:var(--ink)}
  .sp[data-service="pr"] .sp-pr-steps.d-hline > li.is-on p{color:var(--ink-2)}
  .sp[data-service="pr"] .sp-pr-steps.d-hline > li:last-child.is-on h3{color:var(--sp-accent)}

  /* «Когда рынку важны…»: метки отрасли выезжают по очереди. */
  .sp[data-service="pr"] .sp-sector.d-cascade .sp-sector__tags li{opacity:0;transform:translateX(16px);
    transition:opacity .5s var(--e-out) var(--t-d,0s),transform .6s var(--e-out) var(--t-d,0s)}
  .sp[data-service="pr"] .sp-sector.d-cascade.d-in .sp-sector__tags li{opacity:1;transform:none}
}
/* Широкий экран: все шесть этапов в один ряд, с дорожкой и растущей линией. */
@media (min-width:1100px){
  .sp[data-service="pr"] .sp-pr-steps.d-hline{grid-template-columns:repeat(6,minmax(0,1fr))}
  .sp[data-service="pr"] .sp-pr-steps.d-hline::before,.sp[data-service="pr"] .sp-pr-steps.d-hline::after{content:'';position:absolute;left:0;right:0;top:5px;height:2px;border-radius:2px}
  .sp[data-service="pr"] .sp-pr-steps.d-hline::before{background:rgba(255,255,255,.09)}
  .sp[data-service="pr"] .sp-pr-steps.d-hline::after{transform-origin:left;transform:scaleX(var(--p,0));
    background:linear-gradient(90deg,var(--sp-title-start,#C9BCFF),var(--sp-title-end,#FF8BCB));box-shadow:0 0 10px rgba(var(--sp-accent-rgb),.45)}
  .sp[data-service="pr"] .sp-pr-steps.d-hline p{font-size:14px;max-width:none}
}