/* V6.3 PHOTO MOMENTS (warstwa na V6.2; ładowana tylko przy budowie z --v63). Dwa momenty ze zdjęciem (po „Jak zacząć”, po galerii) i jeden redakcyjny (przewodnik przed kontaktem).
   Zdjęcie + hasło + korzyść + wezwanie to jedna kompozycja; każdy moment skomponowany osobno. Bez dużych nakładek, pigułek, zaokrąglonych kart i białych bloków pod zdjęciem.
   Ciemny panel albo przyciemnienie tylko tam, gdzie jest tekst. Pomarańcz: linia, strzałka, podkreślenie. Ruch: linia się rysuje, tekst +9 px, zdjęcie tylko opacity; reduced motion wyłącza. */

/* ---------- wspólne ---------- */
.v63 .ca-pm{margin-top:clamp(28px,3.4vw,48px);position:relative}
.v63 .ca-pm__foto{margin:0;background:var(--tint);overflow:hidden}
.v63 .ca-pm__foto img{display:block;width:100%;height:100%;object-fit:cover}
.v63 .ca-pm__l{display:block;position:relative;width:56px;height:4px}
.v63 .ca-pm__l::before,.v63 .ca-przew__k .ca-pm__l::before{content:"";position:absolute;inset:0;background:var(--orange);transform-origin:left center}
.v63 .ca-pm__k{margin:12px 0 0;font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.3}
.v63 .ca-pm__h{margin:8px 0 0;font-weight:600;line-height:1.03;letter-spacing:-.035em;text-wrap:balance}
.v63 .ca-pm__b{margin:10px 0 0;font-size:1.125rem;line-height:1.35;font-weight:500}
.v63 .ca-pm .ca-cta,.v63 .ca-przew .ca-cta{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;margin:8px 0 0;padding:0;border:0;max-width:none}
.v63 .ca-pm .ca-cta::before,.v63 .ca-przew .ca-cta::before{display:none}
.v63 .ca-pm__zr{margin:10px 0 0}
/* na ciemnym tle: tekst, znaki źródła i fokus */
.v63 .ca-pm--krok .ca-pm__t,.v63 .ca-pm--otocz .ca-pm__over,.v63 .ca-pm--otocz .ca-pm__d{color:#fff}
.v63 .ca-pm .ca-pm__k{color:var(--on-navy)}
.v63 .ca-pm--otocz .ca-pm__k{color:#fff}
.v63 .ca-pm .ca-pm__h,.v63 .ca-pm .ca-pm__b{color:#fff}
.v63 .ca-pm .ca-go{color:#fff;white-space:normal;text-wrap:balance}
@media (max-width:759px){.v63 .ca-pm .ca-go{font-size:clamp(1.125rem,5.4vw,1.375rem)}}
.v63 .ca-pm .ca-go:hover,.v63 .ca-pm .ca-go:focus-visible{color:#fff}
.v63 .ca-pm .ca-go i{color:var(--orange)}
.v63 .ca-pm .ca-go2{color:var(--on-navy)}
.v63 .ca-pm .ca-go2:hover,.v63 .ca-pm .ca-go2:focus-visible{color:#fff}
.v63 .ca-pm__tel{color:var(--on-navy);font-size:1.0625rem;font-weight:500;text-decoration:none;letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.v63 .ca-pm .sig,.v63 .ca-pm .ca-pm__wg{color:var(--on-navy-m)}
.v63 .ca-pm .sig b{color:#fff}
.v63 .ca-pm .sig::before{border-color:#fff}
.v63 .ca-pm .sig:hover{color:#fff}
.v63 .ca-pm :focus-visible{outline-color:#fff}

/* ---------- MOMENT 1: „Pierwszy krok” (po „Jak zacząć”): zdjęcie wejścia, panel wchodzi w kadr z lewej i wystaje pod nim ---------- */
.v63 .ca-pm--krok .ca-pm__foto{height:clamp(210px,56vw,400px)}
.v63 .ca-pm--krok .ca-pm__foto img{object-position:50% 24%}
.v63 .ca-pm--krok .ca-pm__t{background:var(--navy);padding:22px 20px 20px 20px}
.v63 .ca-pm--krok .ca-pm__h{font-size:clamp(1.75rem,1.3rem + 1.9vw,2.875rem)}
@media (max-width:959px){
  .v63 .ca-pm--krok .wrap{padding-inline:0}
  .v63 .ca-pm--krok .ca-pm__t{position:relative;margin:-30px 0 0 0;padding:16px var(--m) 14px}
  .v63 .ca-pm--krok .ca-pm__tel{display:none}
}
@media (min-width:960px){
  .v63 .ca-pm--krok .wrap{position:relative;padding-bottom:44px}
  .v63 .ca-pm--krok .ca-pm__foto{margin-left:34%;height:clamp(360px,30vw,420px)}
  .v63 .ca-pm--krok .ca-pm__t{position:absolute;left:clamp(16px,4vw,32px);bottom:0;width:calc(34% + 80px);padding:32px 40px 28px 40px}
}

/* ---------- MOMENT 2: „Otoczenie” (po galerii): zdjęcie z hasłem na lokalnie przyciemnionym dole kadru; korzyść i wezwanie w tym samym kadrze ---------- */
.v63 .ca-pm__st{display:grid;min-width:0}
.v63 .ca-gal{grid-template-columns:minmax(0,1fr)}
.v63 .ca-pm{min-width:0}
.v63 .ca-pm--otocz .ca-pm__foto{grid-area:1/1;height:clamp(250px,62vw,400px)}
.v63 .ca-pm--otocz .ca-pm__foto img{object-position:50% 60%}
.v63 .ca-pm__over{display:contents}
.v63 .ca-pm--otocz .ca-pm__h{font-size:clamp(1.875rem,1.3rem + 2.4vw,2.625rem)}
.v63 .ca-pm__wg{display:block;margin-bottom:2px;font-size:.9375rem}
@media (max-width:959px){
  .v63 .ca-pm--otocz{margin-inline:calc(var(--m) * -1)}
  .v63 .ca-pm--otocz .ca-pm__t{grid-area:1/1;align-self:end;position:relative;z-index:1;padding:64px var(--m) 14px;background:linear-gradient(to top,rgba(1,22,39,.84) 0%,rgba(1,22,39,.68) 62%,rgba(1,22,39,0) 100%)}
  .v63 .ca-pm--otocz .ca-pm__d{grid-area:2/1;background:var(--navy);padding:4px var(--m) 16px}
  .v63 .ca-pm--otocz .ca-pm__b{margin-top:6px;font-size:1.0625rem}
  .v63 .ca-pm--otocz .ca-pm__wg{display:block;margin-bottom:2px;font-size:.9375rem}
}
@media (min-width:960px){
  .v63 .ca-pm--otocz .ca-pm__foto{height:clamp(400px,35vw,470px)}
  .v63 .ca-pm--otocz .ca-pm__h{font-size:clamp(2.75rem,1.4rem + 3.4vw,3.75rem)}
  .v63 .ca-pm--otocz .ca-pm__over{display:block;grid-area:1/1;align-self:end;justify-self:start;position:relative;z-index:1;isolation:isolate;width:min(64%,740px);padding:112px 40px 28px 40px}
  .v63 .ca-pm--otocz .ca-pm__over::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(1,22,39,.86) 0%,rgba(1,22,39,.74) 58%,rgba(1,22,39,0) 100%);-webkit-mask-image:linear-gradient(to right,#000 66%,transparent 100%);mask-image:linear-gradient(to right,#000 66%,transparent 100%)}
  .v63 .ca-pm--otocz .ca-pm__t,.v63 .ca-pm--otocz .ca-pm__d{max-width:560px}
}

/* ---------- MOMENT 3: przewodnik (przed kontaktem): kicker z linią, mocny nagłówek, trzy fakty z dużymi numerami, trzy pytania, wezwanie ---------- */
.v63 .ca-przew__k{display:flex;flex-direction:column;gap:10px;margin:0;font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.v63 .ca-przew h2{margin:12px 0 0;font-size:clamp(1.75rem,1.2rem + 2vw,2.5rem);line-height:1.06;letter-spacing:-.032em;max-width:14em}
.v63 .ca-przew__f{counter-reset:f}
.v63 .ca-przew__f li{counter-increment:f;display:grid;grid-template-columns:clamp(50px,7vw,92px) minmax(0,1fr);column-gap:clamp(10px,2vw,24px);padding:10px 0 12px;border-top:1px solid var(--navy)}
.v63 .ca-przew__f li:first-child{border-top:4px solid var(--orange);padding-top:9px}
.v63 .ca-przew__f li::before{content:counter(f,decimal-leading-zero);grid-row:1/span 2;font-size:clamp(2.25rem,1.2rem + 3.4vw,3.5rem);line-height:.9;font-weight:500;letter-spacing:-.05em;font-variant-numeric:lining-nums tabular-nums}
.v63 .ca-przew__t{display:block;font-size:clamp(1.1875rem,1rem + .8vw,1.5rem);line-height:1.2;letter-spacing:-.02em;font-weight:600}
.v63 .ca-przew__o{display:block;margin-top:3px;font-size:1.0625rem;line-height:1.4;color:var(--mut);max-width:34em}
.v63 .ca-przew__zr{margin:8px 0 0}
.v63 .ca-przew__zr a{color:var(--navy);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.v63 .ca-przew__q{margin:20px 0 0;padding-top:12px;border-top:1px solid var(--navy);font-size:clamp(1.25rem,1.05rem + .9vw,1.625rem);line-height:1.15;letter-spacing:-.025em;font-weight:600}
.v63 .ca-przew__l{counter-reset:p;margin-top:6px}
.v63 .ca-przew__l li{counter-increment:p;display:grid;grid-template-columns:30px minmax(0,1fr);padding:5px 0;font-size:1.0625rem;line-height:1.3}
.v63 .ca-przew__l li::before{content:counter(p);font-weight:600;color:var(--orange-d);font-variant-numeric:tabular-nums}
.v63 .ca-przew .ca-go{color:var(--navy)}
.v63 .ca-przew__cta{margin-top:10px}
.v63 .ca-przew .ca-go{white-space:normal;text-wrap:balance;align-items:center;text-align:left;font-size:clamp(1.1875rem,1rem + .8vw,1.5rem)}
@media (min-width:960px){
  .v63 .ca-przew .ca-sekcja__w>.ca-przew__g{grid-column:1}
  .v63 .ca-przew__l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px}
  .v63 .ca-przew__l li{display:block;padding:6px 0}
  .v63 .ca-przew__l li::before{display:block;margin-bottom:2px}
}

/* ---------- RUCH ---------- */
@media (prefers-reduced-motion:no-preference){
  html.mo body.v63 .ca-pm__foto.mo-r{transform:none}
}

/* ---------- TELEFON: zagęszczenie przewodnika ---------- */
@media (max-width:759px){
  .v63 .ca-przew .ca-sekcja__w{gap:6px}
  .v63 .ca-przew h2{margin-top:10px;font-size:1.625rem}
  .v63 .ca-przew__f li{padding:9px 0 11px}
  .v63 .ca-przew__o{margin-top:2px;font-size:1rem;line-height:1.35}
  .v63 .ca-przew__q{margin-top:14px;padding-top:10px;font-size:1.1875rem}
  .v63 .ca-przew__l li{padding:4px 0;font-size:1.0625rem}
  .v63 .ca-przew__cta{margin-top:6px}
  .v63 .ca-przew .ca-go{min-height:52px}
}