/* ==========================================================================
   LP "Dolacz do nas" v3
   Zalozenia: naprzemienne bloki koloru, duze wypelnione CTA, zdjecia lamiace
   siatke, numerowane kroki, koncept "w dzien medycyna / wieczorem muzyka".
   Zawezone do body.lp3 - nie rusza reszty witryny.
   ========================================================================== */

body.lp3{
  --d-bg:   #100e0c;      /* blok ciemny */
  --d-bg-2: #191612;
  --d-fg:   #f4f0e8;
  --d-mut:  #9a9286;
  --d-hair: rgba(244,240,232,.14);
  --l-bg:   #f5f2ec;      /* blok jasny */
  --l-bg-2: #ebe5da;
  --l-fg:   #12110f;
  --l-mut:  #6f6a61;
  --l-hair: rgba(18,17,15,.14);
  --acc-d:  #d09256;      /* akcent na ciemnym */
  --acc-l:  #a8663a;      /* akcent na jasnym */

  background:var(--d-bg);color:var(--d-fg);
}
body.lp3 .grain{opacity:.3;mix-blend-mode:overlay}

/* --- bloki --- */
.blk{position:relative}
.blk--d{background:var(--d-bg);color:var(--d-fg)}
.blk--l{background:var(--l-bg);color:var(--l-fg)}
.blk--in{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.blk--pad{padding-block:clamp(4.5rem,10vw,9rem)}

/* --- etykieta sekcji --- */
.lbl{
  display:inline-flex;align-items:center;gap:.75rem;
  font-family:var(--ui);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
}
.lbl::before{content:'';width:2rem;height:1px;background:currentColor;opacity:.5}
.blk--d .lbl{color:var(--acc-d)}
.blk--l .lbl{color:var(--acc-l)}

/* --- naglowki: prosty krój + jedno slowo kursywa --- */
.hd{font-family:var(--disp);font-weight:300;line-height:.9;letter-spacing:-.025em}
.hd em{font-style:italic}
.blk--d .hd em{color:var(--acc-d)}
.blk--l .hd em{color:var(--acc-l)}
.hd--xl{font-size:clamp(3rem,8.5vw,7.4rem)}
.hd--l{font-size:clamp(2.2rem,5.4vw,4.6rem)}

/* ======================= DUZE, WYPELNIONE CTA ======================= */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.85rem;
  font-family:var(--ui);font-weight:400;
  font-size:clamp(.7rem,.95vw,.79rem);letter-spacing:.2em;text-transform:uppercase;
  padding:clamp(1rem,1.7vw,1.25rem) clamp(1.8rem,3vw,2.6rem);
  min-width:min(16rem,100%);
  transition:background .38s ease,color .38s ease,transform .38s ease,box-shadow .38s ease;
}
.cta i{font-style:normal;transition:transform .38s ease}
.cta:hover i{transform:translateX(5px)}
.cta:hover{transform:translateY(-2px)}
/* wypelniony - na ciemnym bloku */
.cta--fill-d{background:var(--d-fg);color:var(--d-bg);box-shadow:0 1px 0 rgba(0,0,0,.2)}
.cta--fill-d:hover{background:var(--acc-d);color:#100e0c}
/* wypelniony - na jasnym bloku */
.cta--fill-l{background:var(--l-fg);color:var(--l-bg)}
.cta--fill-l:hover{background:var(--acc-l);color:#fff}
/* drugorzedny, bez wypelnienia */
.cta--gh{min-width:0;border:1px solid currentColor;padding-inline:clamp(1.5rem,3vw,2.4rem)}
.blk--d .cta--gh:hover{background:rgba(244,240,232,.08)}
.blk--l .cta--gh:hover{background:rgba(18,17,15,.06)}
.cta-row{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center}

/* ledwo widoczna strzalka na dole hero - jedyny sygnal „mozna przewijac".
   Wysrodkowana wzgledem calego hero: na telefonie wypada na zdjeciu,
   na desktopie pod zdjeciem i pod tekstem.                                */
.h3__scroll{
  position:absolute;left:0;right:0;bottom:clamp(1rem,2.5vw,2rem);
  display:flex;justify-content:center;pointer-events:none;z-index:2;
}
.h3__scroll svg{
  width:24px;height:26px;fill:none;stroke:var(--d-fg);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.58;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
  animation:hintDown 2.8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes hintDown{0%,62%,100%{transform:translateY(0)}31%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.h3__scroll svg{animation:none}}

/* pasek gorny nad ciemnym hero */
body.lp3.on-dark:not(.past-hero) .hdr.stuck,
body.lp3.on-dark .hdr.stuck{
  background:rgba(16,14,12,.8);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--d-hair);
}

/* =========================== 1. HERO =========================== */
/* typografia po lewej, zdjecie po prawej wychodzi za krawedz okna */
.h3{position:relative;background:var(--d-bg);min-height:100svh;display:flex;align-items:center;overflow:hidden}
/* siatka na pelna szerokosc okna: wciecie tylko z lewej, liczone tak, zeby
   tekst stanal w tej samej linii co tresc pozostalych sekcji (.blk--in).
   Dzieki temu kolumna ze zdjeciem dochodzi do prawej krawedzi ekranu. */
.h3__grid{
  width:100%;max-width:none;margin:0;
  padding:7.2rem 0 clamp(2rem,5vw,4rem) max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.h3__txt{max-width:38.5rem}   /* 36rem lamalo przyciski hero na dwie linie o 5px */
.h3 .cta--fill-d{min-width:14.5rem}
/* hero nie jest blokiem .blk--d, wiec potrzebuje wlasnej reguly na akcent */
.h3 h1 em{color:var(--acc-d)}
.h3 h1{font-size:clamp(3.3rem,8.4vw,7.4rem);margin-top:clamp(.6rem,1.3vw,.9rem)}
.h3__lead{
  font-family:var(--disp);font-size:clamp(1.1rem,1.9vw,1.6rem);line-height:1.42;
  max-width:32ch;margin-top:clamp(1.1rem,2.4vw,1.7rem);color:rgba(244,240,232,.86);
}
.h3 .cta-row{margin-top:clamp(1rem,2vw,1.4rem)}

/* zdjecie: wychodzi poza kolumne az do prawej krawedzi okna */
.h3__art{position:relative;align-self:stretch;display:flex;align-items:center}
/* flex-shrink:0 - bez tego element flex kurczy sie z powrotem do szerokosci kolumny */
.h3__art figure{
  position:relative;margin:0;flex:0 0 auto;width:100%;height:min(78svh,44rem);
  overflow:hidden;
}
.h3__art img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.h3__art figure::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right, rgba(16,14,12,.85) 0%, rgba(16,14,12,.1) 42%, rgba(16,14,12,0) 100%);
}
/* podpis na zdjeciu - drobny, jak w wydawnictwach */
.h3__cap{
  position:absolute;left:clamp(1rem,2vw,1.75rem);bottom:clamp(1rem,2vw,1.75rem);z-index:2;
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(244,240,232,.82);
}

/* koncept: w dzien / wieczorem */
.duality{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(1.75rem,4vw,2.75rem);border-top:1px solid var(--d-hair)}
.duality div{padding:1.1rem clamp(.9rem,2vw,1.6rem) 0 0}
.duality div + div{padding-left:clamp(.9rem,2vw,1.6rem);border-left:1px solid var(--d-hair)}
.duality dt{font-size:.67rem;letter-spacing:.3em;text-transform:uppercase;color:var(--d-mut)}
.duality dd{margin:.55rem 0 0;font-family:var(--disp);font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.25}
.duality dd em{font-style:italic;color:var(--acc-d)}

/* ======================= 2. KROKI (jasny blok) ======================= */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.75rem,4vw,3.5rem);margin-top:clamp(2.5rem,6vw,4rem)}
.steps > div{border-top:1px solid var(--l-hair);padding-top:clamp(1.1rem,2.4vw,1.6rem)}
.steps b{
  display:block;font-family:var(--disp);font-weight:300;
  font-size:clamp(2.4rem,5vw,3.8rem);line-height:1;letter-spacing:-.03em;color:var(--acc-l);
}
.steps h3{font-family:var(--disp);font-weight:400;font-size:clamp(1.2rem,2.2vw,1.75rem);line-height:1.15;margin-top:.75rem}
.steps p{margin-top:.65rem;font-size:.94rem;color:var(--l-mut);max-width:30ch}
.steps-cta{display:flex;justify-content:center;margin-top:clamp(2.5rem,6vw,4rem)}

/* ============ 3. MOZAIKA ZDJEC LAMIACA SIATKE (ciemny) ============ */
/* mozaika stoi POZA kontenerem .blk--in, wiec zaczyna sie na krawedzi okna
   i konczy zwyklym marginesem po prawej - bez ujemnych marginesow i 100vw */
.mos-bleed{padding-right:var(--pad)}
.mos{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.6rem,1.4vw,1.1rem);align-items:end}
.mos figure{margin:0;overflow:hidden;position:relative}
.mos img{width:100%;height:100%;object-fit:cover;display:block}
.mos__a{grid-column:1/6}
.mos__a img{aspect-ratio:5/6}
/* przesuniecie w gore lamie rowna linie dolna - to ten "nieposluszny" element */
.mos__b{grid-column:6/10;transform:translateY(clamp(-3.5rem,-5vw,-1.5rem))}
.mos__b img{aspect-ratio:4/5}
.mos__c{grid-column:10/13}
.mos__c img{aspect-ratio:3/4}
.mos-txt{max-width:38rem;margin-top:clamp(2.5rem,6vw,4rem)}
.mos-quote{
  font-family:var(--disp);font-size:clamp(1.15rem,2.1vw,1.65rem);line-height:1.44;
  border-left:1px solid var(--acc-d);padding-left:1.4rem;margin-top:clamp(1.5rem,3vw,2rem);
  color:rgba(244,240,232,.9);
}
.mos-note{margin-top:clamp(1.5rem,3vw,2rem);font-size:.96rem;color:var(--d-mut)}
.mos-note strong{color:var(--d-fg);font-weight:400}

/* ==================== 4. DLA KOGO (jasny blok) ==================== */
.forlist{list-style:none;margin-top:clamp(2.5rem,6vw,3.75rem);display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,5vw,4.5rem)}
.forlist li{display:flex;gap:1.35rem;align-items:baseline;padding:1.4rem 0;border-top:1px solid var(--l-hair);font-size:1.03rem}
.forlist span{flex:0 0 auto;font-family:var(--ui);font-size:.68rem;letter-spacing:.2em;color:var(--acc-l);padding-top:.4rem}

/* ===================== 5. KONTAKT (ciemny) ===================== */
.ct{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:start;margin-top:clamp(2.5rem,5vw,3.5rem)}
.ct-map{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--d-bg-2);border:1px solid var(--d-hair)}
.ct-map iframe{width:100%;height:100%;border:0;display:block}
.ct-maplink{display:inline-flex;gap:.5rem;margin-top:.9rem;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--d-mut);transition:color .35s ease}
.ct-maplink:hover{color:var(--acc-d)}
.ct-when{margin-top:clamp(1.5rem,3vw,2rem)}
.ct-when__t{font-family:var(--disp);font-weight:300;font-size:clamp(1.75rem,3.1vw,2.7rem);line-height:1;letter-spacing:-.02em;margin-top:.7rem}
.ct-when__t em{font-style:italic;color:var(--acc-d)}
.ct-when__p{margin-top:.9rem;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--acc-d)}
.ct-when__b{margin-top:1.1rem;font-size:.95rem;color:var(--d-mut)}
.ct-when__b strong{color:var(--d-fg);font-weight:400}
.ct-form{background:var(--d-bg-2);border:1px solid var(--d-hair);padding:clamp(1.6rem,3.2vw,2.5rem)}

body.lp3 .kicker{color:var(--d-mut)}
body.lp3 .field label{color:var(--d-mut)}
body.lp3 .field input,body.lp3 .field select,body.lp3 .field textarea{
  background:#221e19;border:1px solid var(--d-hair);color:var(--d-fg);padding:.85rem 1rem;font-size:1.05rem;
}
body.lp3 .field input::placeholder,body.lp3 .field textarea::placeholder{color:rgba(244,240,232,.32)}
body.lp3 .field input:focus,body.lp3 .field select:focus,body.lp3 .field textarea:focus{border-color:var(--acc-d)}
body.lp3 .form-note{color:var(--d-mut)}
body.lp3 .form-note a{color:var(--acc-d)}
body.lp3 .form-ok strong{color:var(--d-fg)}
body.lp3 .form-ok span{color:var(--d-mut)}
/* przycisk wysylki: wypelniony, nie obwodka */
body.lp3 .btn--ink{
  background:var(--d-fg);color:var(--d-bg);border-color:var(--d-fg);
  padding:1.15rem 2.4rem;letter-spacing:.2em;
}
body.lp3 .btn--ink:hover{background:var(--acc-d);border-color:var(--acc-d);color:#100e0c}

/* ========================== STOPKA ========================== */
body.lp3 .foot{background:var(--d-bg);border-top:1px solid var(--d-hair)}
body.lp3 .foot__top{border-bottom-color:var(--d-hair)}
body.lp3 .foot h4,body.lp3 .foot__mark span,body.lp3 .foot__base span{color:var(--d-mut)}
body.lp3 .foot ul a:hover,body.lp3 .foot__base a:hover{color:var(--acc-d)}

/* ==================== PASEK CTA NA TELEFONIE ==================== */
.bar3{
  position:fixed;inset:auto 0 0 0;z-index:66;display:none;
  padding:.65rem var(--pad) calc(.65rem + env(safe-area-inset-bottom));
  background:rgba(16,14,12,.92);backdrop-filter:blur(14px);border-top:1px solid var(--d-hair);
  transform:translateY(115%);transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.bar3.on{transform:none}
.bar3 .cta{width:100%;min-width:0}
body.menu-open .bar3{transform:translateY(115%)}
@media(prefers-reduced-motion:reduce){.bar3{transition:none}}

/* ========================== RESPONSYWNIE ========================== */
@media(max-width:1040px){
  /* padding-bottom:0 - na telefonie zdjecie jest ostatnim elementem siatki,
     wiec dolny odstep sekcji zostawial pod nim czarny pasek (32px).      */
  .h3__grid{grid-template-columns:1fr;padding-left:var(--pad);padding-right:var(--pad);padding-top:7.5rem;padding-bottom:0}
  /* Na telefonie hero jest wyzsze niz ekran, wiec strzalka „na dole sekcji"
     wypadalaby pod zgieciem. Przypinamy ja do linii zgiecia - lezy wtedy
     na zdjeciu i widac ja od razu.                                        */
  .h3__scroll{top:calc(100svh - 3.4rem);bottom:auto}
  .h3{min-height:0}
  .h3__art{order:2}
  .h3__art figure{width:calc(100% + var(--pad) * 2);margin-left:calc(-1 * var(--pad));height:min(52svh,26rem)}
  .h3__art figure::after{background:linear-gradient(to top, rgba(16,14,12,.75) 0%, rgba(16,14,12,0) 60%)}
  .h3__txt{order:1;max-width:none}
  .steps{grid-template-columns:1fr;gap:0}
  .steps > div{padding-block:1.5rem}
  .mos-bleed{padding-right:0}
  .mos{grid-template-columns:1fr 1fr;align-items:start}
  .mos__a{grid-column:1/3}
  .mos__a img{aspect-ratio:4/3}
  .mos__b{grid-column:1/2;transform:none}
  .mos__c{grid-column:2/3}
  .forlist{grid-template-columns:1fr;gap:0}
  .ct{grid-template-columns:1fr}
}
@media(max-width:700px){
  .duality{grid-template-columns:1fr}
  .duality div + div{padding-left:0;border-left:0;border-top:1px solid var(--d-hair);margin-top:1rem}
  .cta{min-width:100%}
  .cta--gh{min-width:100%}
  .bar3{display:block}
  body.lp3 .foot{padding-bottom:5.5rem}
}

/* ==========================================================================
   v4 — szwy między blokami, animacje przy przewijaniu, galeria, „dlaczego warto"
   ========================================================================== */

/* Bloki stykaja sie ostra krawedzia — gradientowy szew wygladal jak smuga.
   Przejscie miedzy sekcjami niosa animacje tresci, nie rozmycie tla.       */
.blk{isolation:isolate}
.blk--in,.mos-bleed,.gal-bleed{position:relative;z-index:1}

/* ---------- HERO: haslo + prosta informacja o probach ---------- */
.hnote__hook{
  font-family:var(--disp);font-weight:300;
  font-size:clamp(1.15rem,2.05vw,1.6rem);line-height:1.3;
  color:var(--d-fg);margin-bottom:clamp(.5rem,1.1vw,.7rem);
}
.hnote__hook{text-wrap:balance}
/* godzina proby ma nie lamac sie w polowie - albo cala mieści sie
   w linijce, albo cala schodzi do nastepnej.                        */
.hnote__hook b{font-weight:300;font-style:italic;color:var(--acc-d);white-space:nowrap}

.hnote{
  margin-top:clamp(1rem,2.2vw,1.5rem);padding-top:clamp(.85rem,1.8vw,1.2rem);
  border-top:1px solid var(--d-hair);max-width:34rem;
}
.hnote__where{margin-top:.55rem;font-size:.74rem;letter-spacing:.19em;text-transform:uppercase;color:var(--acc-d)}
.hnote__body{margin-top:.8rem;font-size:1.02rem;line-height:1.6;color:var(--d-mut)}
.hnote__body b{color:var(--d-fg);font-weight:400}

/* =========================== ANIMACJE PRZY SCROLLU ===========================
   Elementy [data-rv] animuje lp.js, wiazac postep z pozycja przewijania -
   zatrzymasz scroll w polowie, animacja stoi w polowie.
   Stan ukryty wlacza sie DOPIERO gdy JS wystartuje (klasa .js-rv na <html>),
   wiec bez JavaScriptu i przy prefers-reduced-motion wszystko jest widoczne. */
.js-rv [data-rv]{opacity:0;will-change:opacity,transform}
.js-rv [data-rv-img] img{transform:scale(1.05)}

/* --------- hero: animuje sie po wczytaniu, nie przy scrollu --------- */
.js-rv .h3__txt > *{opacity:0;transform:translate3d(0,26px,0)}
.h3.ready .h3__txt > *{
  opacity:1;transform:none;
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 110ms);
}
.js-rv .h3__art figure{opacity:0;transform:translate3d(28px,0,0)}
.h3.ready .h3__art figure{
  opacity:1;transform:none;
  transition:opacity 1.2s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1);
  transition-delay:.15s;
}

/* ==================== SEKCJE PRZYPIETE (pin) ====================
   Kontener jest wysoki (--pin-h), a widok w srodku stoi nieruchomo
   (position:sticky). Postep przewijania przez kontener steruje animacja
   w srodku. Zadnego przechwytywania zdarzen scrolla - gladkosc trackpada
   i dostepnosc zostaja nietkniete.
   Bez JS (brak .js-rv) sekcje sa zwyklymi blokami z cala trescia widoczna. */
.js-rv .pin{height:var(--pin-h,250vh);position:relative}
.js-rv .pin__stage{
  position:sticky;top:0;height:100svh;
  display:flex;align-items:center;overflow:hidden;
}
.pin__stage{padding-block:clamp(4rem,9vw,7rem)}
.js-rv .pin__stage{padding-block:0}
.pin__in{width:100%}

/* ---------- karty „dlaczego warto" ---------- */
/* Karty NIE podmieniaja sie - kumuluja. Kolumna plynie w gore, wiec czytanie
   przesuwa sie w dol listy, a na koncu widac wszystkie trzy naraz.          */
.pin--karty .pin__in{text-align:center}
.cards{position:relative;margin-top:clamp(1.5rem,3.5vw,2.5rem);display:grid;gap:clamp(1.5rem,3.5vw,2.75rem)}
.js-rv .cards{will-change:transform;perspective:1100px}
.card{max-width:40rem;margin-inline:auto}
.js-rv .card{will-change:opacity,transform;transform-origin:50% 50%}
.card b{
  display:block;font-family:var(--disp);font-weight:300;
  font-size:clamp(1.9rem,4vw,2.9rem);line-height:1;letter-spacing:-.03em;color:var(--acc-l);
}
.card h3{font-family:var(--disp);font-weight:400;font-size:clamp(1.25rem,2.5vw,1.95rem);line-height:1.15;margin-top:.4rem}
.card p{margin-top:.6rem;font-size:clamp(.9rem,1.15vw,1rem);line-height:1.6;color:var(--l-mut);max-width:34rem;margin-inline:auto}
.card em{font-style:normal;color:var(--l-fg)}

/* ---------- babelki „dla kogo" ---------- */
.bubs{position:relative;margin-top:clamp(1.75rem,4vw,2.5rem);display:grid;gap:.7rem}
.js-rv .bubs{display:block;height:clamp(19rem,52svh,29rem)}
/* Punkty „dla kogo" powtarzaja hierarchie kart z „dlaczego warto":
   ikona -> numer -> tekst. Tyle ze rozrzucone po planszy.               */
.bub{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.35rem;
  /* ledwo widoczna tafla w kolorze tla, uniesiona cieniem */
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.22);
  border-radius:1.15rem;
  padding:clamp(1rem,1.8vw,1.35rem) clamp(.9rem,1.5vw,1.2rem);
  box-shadow:0 18px 38px -26px rgba(18,17,15,.18),
             0 2px 6px -4px rgba(18,17,15,.06);
  font-size:clamp(.86rem,1.05vw,.97rem);line-height:1.45;color:var(--l-mut);
}
.bub b{
  font-family:var(--disp);font-weight:300;
  font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1;letter-spacing:-.02em;
  color:var(--acc-l);
}
.bub__t{max-width:24ch;color:var(--l-fg)}
.js-rv .bub{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);
  transform:translate3d(0,16px,0) scale(.94);
  opacity:0;will-change:opacity,transform;
}

/* CTA pod przypieta sekcja */
.why-cta{display:flex;justify-content:center}

/* ===================== 3. GALERIA (blok ciemny) ===================== */
.gal-bleed{padding-inline:var(--pad)}
.gal{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.6rem,1.4vw,1.15rem);align-items:start;
  max-width:1500px;margin:clamp(2rem,5vw,3rem) auto 0;
}
.gal__col{display:grid;gap:clamp(.6rem,1.4vw,1.15rem);will-change:transform}
/* kolumny startuja na roznych wysokosciach — mozaika przestaje byc rzedem */
.gal__col:nth-child(2){margin-top:clamp(1.5rem,5vw,4.5rem)}
.gal__col:nth-child(3){margin-top:clamp(.75rem,2.5vw,2.25rem)}
.gal figure{margin:0;overflow:hidden;position:relative;background:var(--d-bg-2)}
.gal img{width:100%;height:auto;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.gal figure:hover img{transform:scale(1.035)}

/* ======================= 6. KONTAKT: kolejnosc ======================= */
/* formularz pierwszy w kodzie — na telefonie od razu pod naglowkiem,
   na desktopie po lewej, mapa po prawej                                 */
.ct--form-first{grid-template-columns:.98fr 1.02fr}

@media(max-width:1040px){
  /* Trzy kolumny w siatce dwukolumnowej dawaly zlamany uklad: trzecia
     kolumna spadala pod spod i jej zdjecia szly pojedynczo po lewej.
     display:contents wypuszcza wszystkie zdjecia do jednej siatki.       */
  .gal{grid-template-columns:1fr 1fr}
  .gal__col{display:contents}
  .gal__col:nth-child(2),.gal__col:nth-child(3){margin-top:0}
  .ct--form-first{grid-template-columns:1fr}
}
@media(max-width:700px){
  .gal__col:nth-child(2){margin-top:clamp(1rem,4vw,2rem)}
  /* Punkty „dla kogo": dwie kolumny, wszystko wysrodkowane. Osiem punktow
     w jednej kolumnie nie miescilo sie w wysokosci ekranu (825px przy
     scenie 667px na iPhone SE).                                          */
  .js-rv .bubs{display:grid;grid-template-columns:1fr 1fr;height:auto;gap:.5rem}
  .js-rv .bub{position:static;width:100%}
  .bub{gap:.15rem;padding:.85rem .65rem;font-size:.8rem;line-height:1.38}
  .bub b{font-size:1.15rem}
  .bub__t{max-width:none}
}

@media(prefers-reduced-motion:reduce){
  /* bez przypiec: sekcje wracaja do zwyklego przeplywu, cala tresc widoczna */
  .js-rv .pin{height:auto}
  .js-rv .pin__stage{position:static;height:auto;padding-block:clamp(4rem,9vw,7rem)}
  .js-rv .cards{transform:none!important}
  .js-rv .card{opacity:1!important;transform:none!important}
  .js-rv .rail{display:none}
  .js-rv .bubs{display:grid;height:auto}
  .js-rv .bub{position:static;width:100%;opacity:1!important;transform:none!important}
  .gal__col{transform:none!important}
  .js-rv [data-rv]{opacity:1!important;transform:none!important}
  .js-rv [data-rv-img] img{transform:none!important}
  .js-rv .h3__txt > *,.js-rv .h3__art figure{opacity:1!important;transform:none!important;transition:none!important}
}