/* --- czcionki na własnym serwerze (Fontshare, licencja ITF FFL w fonty/) --- */
@font-face{font-family:'Gambetta';src:url('fonty/gambetta-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gambetta';src:url('fonty/gambetta-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Gambetta';src:url('fonty/gambetta-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gambetta';src:url('fonty/gambetta-500i.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonty/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonty/satoshi-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonty/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonty/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* --- kolory (02.10.2026): leśna zieleń i burgund, trend ślubny 2026 ---
     nazwy zmiennych zostały stare, żeby nie przepisywać całego arkusza:
     czern = tło (leśna zieleń), czern-2 = sekcje naprzemienne (burgund),
     zloto = akcent w tekście (róż), burgund = przyciski główne */
  --czern:#0F2A22;--czern-2:#3F0F1B;--grafit:#163A2F;--linia:#27493D;
  --krem:#F4EEE2;--krem-c:#DED7C8;--tekst:#A8B7AB;
  --zloto:#E3B7B4;--zloto-c:#C9918F;--burgund:#8A2236;
  --maxw:1240px;
  --serif:'Gambetta',Georgia,'Times New Roman',serif;
  --sans:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
/* scroll-behavior zostaje jako zapas dla przeglądarek bez JS; nasze płynne dojazdy
   robimy w JS (behavior:'auto'), żeby dwie animacje się nie biły */
html{scroll-padding-top:90px;scroll-behavior:smooth;background:var(--czern)}
/* gdy JS działa, płynność robi skrypt — natywna musi zejść z drogi,
   inaczej obie animacje kasują się nawzajem */
html.plynny{scroll-behavior:auto}
/* wymagane przez Lenisa (bez reguły wyłączającej klikanie w iframe —
   inaczej nie dałoby się sterować odtwarzaczem YouTube) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--sans);background:var(--czern);color:var(--krem-c);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.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}

/* ---------- ziarno filmowe na całej stronie ---------- */
/* ziarno bez mix-blend-mode — blendowanie całego ekranu było najdroższą rzeczą
   przy skrolowaniu (przeliczane w każdej klatce). Na ciemnym tle wygląda tak samo. */
.ziarno{position:fixed;inset:0;z-index:400;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- kursor: aparat -> ŁADOWANIE MOCY -> WYBUCH -> biała plama ----------
   Oś czasu po najechaniu na kadr (wszystko na opóźnieniach CSS, zero JS):
   0,00-1,20 s  kula światła TLI SIĘ przy aparacie — migocze i powoli rośnie,
                aparat drży i jaśnieje ze złotego do białego (ładowanie mocy)
   ~1,23 s      WYBUCH — kula strzela na boki, z niej wychodzi fala uderzeniowa,
                a kadr filmu na moment błyska
   1,30 s       z wybuchu zostaje miękka biała plama
   1,75 s       pojawia się napis ZOBACZ                                       */
.kursor{position:fixed;top:0;left:0;z-index:390;pointer-events:none;display:none;
  width:44px;height:44px;margin:-22px 0 0 -22px;
  transition:width .5s var(--ease),height .5s var(--ease),margin .5s var(--ease)}
.kursor.schowany{opacity:0;transition:opacity .25s ease}
.kursor-krazek{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.kursor-aparat{width:26px;height:26px;display:block;color:var(--zloto);
  transition:opacity .45s ease,transform .55s var(--ease),color .35s ease}
/* biała plama — miękka krawędź (rozmyty gradient), zostaje po wybuchu */
.kursor-plama{position:absolute;inset:-8px;border-radius:50%;opacity:0;transform:scale(.22);
  background:radial-gradient(circle,rgba(255,255,255,.96) 0%,rgba(255,255,255,.92) 46%,
    rgba(255,255,255,.55) 68%,rgba(255,255,255,.14) 84%,rgba(255,255,255,0) 96%);
  filter:blur(2px);
  transition:opacity .7s var(--ease),transform .8s var(--ease)}
.kursor-etykieta{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.6rem;letter-spacing:.2em;font-weight:600;color:#1B1B20;opacity:0;
  transition:opacity .5s ease}
/* ETAP 3 — dopiero PO wybuchu (stąd opóźnienia) */
.kursor.aktywny{width:98px;height:98px;margin:-49px 0 0 -49px;
  transition:width .7s var(--ease) 1.25s,height .7s var(--ease) 1.25s,margin .7s var(--ease) 1.25s}
.kursor.aktywny .kursor-aparat{opacity:0;transform:scale(.2);
  transition:opacity .3s ease 1.23s,transform .4s var(--ease) 1.23s}
.kursor.aktywny .kursor-plama{opacity:1;transform:scale(1);
  transition:opacity .7s var(--ease) 1.3s,transform .8s var(--ease) 1.3s}
.kursor.aktywny .kursor-etykieta{opacity:1;transition:opacity .6s ease 1.75s}

/* ETAP 1+2 — KULA MOCY: tli się, migocze, rośnie... i nagle wybucha */
.kursor-blysk{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;
  border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.92) 0%,rgba(255,244,224,.55) 34%,
    color-mix(in srgb,var(--zloto) 28%,transparent) 58%,rgba(255,255,255,0) 76%)}
.kursor.strzal .kursor-blysk{animation:ladowanie 1.9s cubic-bezier(.4,0,.25,1)}
@keyframes ladowanie{
  0%{opacity:0;transform:scale(.10)}
  7%{opacity:.30;transform:scale(.20)}
  15%{opacity:.16;transform:scale(.25)}   /* migotanie — moc się tli */
  24%{opacity:.42;transform:scale(.31)}
  33%{opacity:.24;transform:scale(.35)}
  42%{opacity:.55;transform:scale(.41)}
  50%{opacity:.34;transform:scale(.45)}
  58%{opacity:.72;transform:scale(.52)}
  63%{opacity:.50;transform:scale(.46)}   /* wciągnięcie tuż przed */
  65%{opacity:1;transform:scale(2.15)}    /* JEB */
  74%{opacity:.55;transform:scale(2.75)}
  100%{opacity:0;transform:scale(3.5)}}
/* fala uderzeniowa — pierścień wychodzący z wybuchu */
.kursor-fala{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;
  border-radius:50%;border:2px solid rgba(255,255,255,.9);opacity:0;pointer-events:none}
.kursor.strzal .kursor-fala{animation:fala .9s cubic-bezier(.16,1,.3,1) 1.22s}
@keyframes fala{
  0%{opacity:.95;transform:scale(.2);border-width:3px}
  55%{opacity:.4}
  100%{opacity:0;transform:scale(3.8);border-width:.5px}}
/* aparat: drży i rozgrzewa się w trakcie ładowania */
.kursor.strzal .kursor-aparat{animation:aparat-ladowanie 1.24s ease-in}
@keyframes aparat-ladowanie{
  0%{color:var(--zloto);transform:scale(1) translate(0,0)}
  22%{color:#EED9B6;transform:scale(1.04) translate(.6px,-.4px)}
  38%{transform:scale(1.01) translate(-.6px,.5px)}
  55%{color:#FFF6E6;transform:scale(1.08) translate(.5px,.5px)}
  70%{transform:scale(1.04) translate(-.5px,-.5px)}
  86%{color:#fff;transform:scale(1.14) translate(.4px,-.4px)}
  100%{color:#fff;transform:scale(1.34)}}
@media (hover:hover) and (pointer:fine){
  .kursor{display:block}
  body{cursor:none}
  /* w polach formularza zostaje normalny kursor — inaczej nie widać, gdzie się pisze */
  input,textarea,select{cursor:auto}
  /* demo kreatora: aparat gaśnie, wraca zwykła myszka (to narzędzie, nie wizytówka) */
  .demo-ramka,.demo-ramka *{cursor:auto}
  .demo-ramka button,.demo-ramka .p-chip,.demo-ramka .p-stol.cel,.demo-ramka summary,.demo-ramka a{cursor:pointer}
  .demo-ramka g[data-obiekt]{cursor:grab}
  body.bez-kursora .kursor{display:none}
}
@media(prefers-reduced-motion:reduce){.kursor{display:none}body{cursor:auto}}

/* ---------- intro: logo + aparacik, błysk flesza odsłania stronę ----------
   Sekwencja: czarna plansza z logo i aparacikiem pod spodem -> aparat ładuje
   się i drga (te same klatki co kursor) -> FLESZ: biel zalewa ekran, czerń
   pod spodem znika -> biel gaśnie i widać stronę. Raz na sesję. */
.intro{position:fixed;inset:0;z-index:300;background:var(--czern);
  display:flex;align-items:center;justify-content:center;transition:background .4s ease}
.intro.otwarta{background:transparent;pointer-events:none}
.intro-marka{position:relative;text-align:center;opacity:0;transform:translateY(12px);
  transition:opacity .9s ease,transform .9s ease}
.intro.start .intro-marka{opacity:1;transform:none}
.intro.otwarta .intro-marka{opacity:0;transition:opacity .3s ease}
.intro-marka img{width:clamp(64px,9vw,96px);filter:invert(1) brightness(1.6);margin:0 auto}
.intro-marka b{margin-top:20px;font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,4vw,2.6rem);
  color:var(--krem);letter-spacing:.06em;display:block}
.intro-marka span{margin-top:6px;font-size:.66rem;letter-spacing:.42em;color:var(--zloto);
  text-transform:uppercase;display:block}
/* aparacik POD logo — ten sam znak co kursor */
.intro-aparat{width:34px;height:34px;display:block;margin:30px auto 0;color:var(--zloto)}
.intro.strzal .intro-aparat{animation:aparat-ladowanie 1s ease-in}
/* kula światła wokół aparatu w trakcie ładowania */
.intro-kula{position:absolute;left:50%;bottom:-46px;width:120px;height:120px;margin-left:-60px;
  border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(255,244,224,.5) 36%,color-mix(in srgb,var(--zloto) 25%,transparent) 58%,rgba(255,255,255,0) 76%)}
.intro.strzal .intro-kula{animation:intro-kula 1s ease-in}
@keyframes intro-kula{
  0%{opacity:0;transform:scale(.15)}
  30%{opacity:.35;transform:scale(.35)}
  55%{opacity:.25;transform:scale(.45)}
  80%{opacity:.7;transform:scale(.6)}
  100%{opacity:1;transform:scale(.75)}}
/* FLESZ: biel zalewa ekran i gaśnie, odsłaniając stronę */
.intro-blysk{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.intro.strzal .intro-blysk{animation:intro-blysk 1.7s cubic-bezier(.22,1,.36,1) .98s}
@keyframes intro-blysk{
  0%{opacity:0}
  9%{opacity:1}
  30%{opacity:.55}
  100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.intro{display:none}}
body.intro-trwa #ck-baner{display:none !important}

/* ---------- nagłówek ---------- */
/* bez backdrop-filter: rozmycie tła było przeliczane przy każdym przesunięciu strony.
   Pełniejsze tło daje ten sam efekt czytelności za darmo. */
header{position:fixed;top:0;left:0;right:0;z-index:100;
  background:color-mix(in srgb,var(--czern) 94%,transparent);border-bottom:1px solid var(--linia);
  transition:background .4s ease,border-color .4s ease}
header.gora{background:transparent;border-bottom-color:transparent}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;
  max-width:var(--maxw);margin:0 auto;padding:14px 24px}
.marka{display:flex;align-items:center;gap:14px;text-decoration:none}
.marka img{width:auto;height:42px;filter:invert(1) brightness(1.6)}
.marka b{font-family:var(--serif);font-weight:400;font-size:1.18rem;color:var(--krem);letter-spacing:.08em}
.marka span{display:block;font-size:.58rem;letter-spacing:.3em;color:var(--zloto);text-transform:uppercase;margin-top:2px}
@media(max-width:520px){.marka b{font-size:1rem;letter-spacing:.1em}.marka img{height:34px}
  .marka span{font-size:.54rem;letter-spacing:.15em;white-space:nowrap}
  .hero-tresc .znak{letter-spacing:.14em;gap:10px}.hero-tresc .znak:before{width:22px}}
.nav-akcje{display:flex;align-items:center;gap:12px}
.btn{display:inline-block;text-align:center;
  letter-spacing:0;text-transform:none;padding:6px 2px;border:0;cursor:pointer;
  font-family:var(--sans);font-size:1.04rem;font-weight:400;background:none;color:var(--krem);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.4em;
  transition:background .3s,color .3s,text-decoration-thickness .2s}
.btn:after{content:'  →';white-space:pre}
.btn:hover{text-decoration-thickness:2px}
.btn.zloty{background:var(--burgund);color:var(--zloto);padding:7px 12px}
.btn.zloty:hover{background:#9C2A40}
.btn.pusty{color:var(--krem);background:none}
.btn.pusty:hover{color:#fff}
@media(max-width:700px){.nav-akcje .btn{display:none}}
.hamburger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:48px;height:48px;background:none;border:1px solid var(--linia);cursor:pointer}
.hamburger span{display:block;width:20px;height:1px;background:var(--krem)}
header.gora .hamburger{border-color:rgba(244,238,226,.4)}

/* ---------- menu pełnoekranowe ---------- */
.zaslona{position:fixed;inset:0;background:color-mix(in srgb,var(--czern) 60%,transparent);z-index:190;opacity:0;pointer-events:none;transition:opacity .5s ease}
.zaslona.otwarta{opacity:1;pointer-events:auto}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(880px,100%);background:var(--czern-2);z-index:195;
  transform:translateX(102%);transition:transform .6s var(--ease);display:flex;flex-direction:column;overflow:auto;
  border-left:1px solid var(--linia)}
.panel.otwarty{transform:none}
.panel-gora{display:flex;justify-content:flex-end;padding:22px 26px}
.zamknij{width:48px;height:48px;background:none;border:1px solid var(--linia);color:var(--krem);
  font-size:1.2rem;line-height:1;cursor:pointer}
.zamknij:hover{border-color:var(--zloto);color:var(--zloto)}
.panel-tresc{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;padding:10px 8% 64px;flex:1}
@media(max-width:820px){.panel-tresc{grid-template-columns:1fr;gap:36px}}
.panel nav{display:flex;flex-direction:column}
.panel nav a{font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.6rem);color:var(--krem);text-decoration:none;
  padding:10px 0;border-bottom:1px solid var(--linia);opacity:0;transform:translateY(14px);
  transition:color .25s,opacity .55s var(--ease),transform .55s var(--ease)}
.panel nav a:hover{color:var(--zloto)}
.panel.otwarty nav a{opacity:1;transform:none}
.panel-bok img{width:100%;margin-bottom:22px;filter:grayscale(.2)}
.panel-bok .etykieta{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--zloto);margin:16px 0 4px}
.panel-bok a{color:var(--krem);text-decoration:none;font-family:var(--serif);font-size:1.3rem}
.panel-bok a:hover{color:var(--zloto)}

/* ---------- hero w stylu ADA: tekst po lewej, film na prawej połowie;
     scroll dosuwa film na środek (pełny ekran), potem strona płynie dalej.
     Mechanika 1:1 z aventuradentalarts.com: tor 180svh + przyklejona scena
     + warstwa medialna na cały ekran przesunięta o 50% w prawo (transform,
     więc zero przemalowań). Postęp --hp (0..1) ustawia JS. ---------- */
.hero-tor{position:relative;height:300svh}  /* długi tor = wolne, satysfakcjonujące otwieranie */
.hero{position:sticky;top:0;height:100svh;min-height:540px;display:flex;align-items:center;
  overflow:hidden;background:var(--czern);color:var(--krem)}
/* DWIE WARSTWY:
   1. hero-tlo — zdjęcie młodych na CAŁYM ekranie (klasyczne hero, jak było),
   2. hero-media — FILM w oknie wycinanym od środka (clip-path): na starcie
      niewidoczny, scroll otwiera go kinowym pasem i rozciąga na całość NAD zdjęciem. */
.hero-tlo{position:absolute;inset:0;z-index:0}
.hero-tlo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-tlo:after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,color-mix(in srgb,var(--czern) 94%,transparent) 4%,color-mix(in srgb,var(--czern) 35%,transparent) 45%,color-mix(in srgb,var(--czern) 72%,transparent) 100%)}
.hero-media{position:absolute;inset:0;z-index:1;will-change:clip-path;
  clip-path:inset(calc(50% * (1 - var(--hp,0))) calc(25% * (1 - var(--hp,0))))}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s ease}
.hero-media video.gra{opacity:1}
.hero .wrap{position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:1fr 1fr;align-items:center}
.hero-tresc{grid-column:1;padding:120px 30px 40px 0;
  opacity:calc(1 - max(0, var(--hp,0)*2.4 - 0.38));  /* pełny do ~16% scrolla, znika zanim okno filmu dojedzie */
  transform:translate3d(calc(var(--hp,0)*-70px),0,0)}
.znak{display:flex;align-items:center;gap:14px;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--zloto)}
.znak:before{content:'';width:46px;height:1px;background:var(--zloto)}
.hero h1{font-family:var(--serif);font-weight:400;color:var(--krem);margin:26px 0 0;
  font-size:clamp(2.11rem,4.05vw,3.7rem);line-height:1.04;letter-spacing:-.03em;max-width:14ch}
.hero h1 em{font-style:italic;color:var(--zloto)}
.hero .pod{margin-top:24px;max-width:40ch;font-size:clamp(.98rem,1.2vw,1.08rem);color:rgba(242,237,228,.8)}
.hero-akcje{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-stopka{display:grid;gap:10px;margin-top:clamp(30px,5vh,54px);padding-top:20px;
  border-top:1px solid rgba(242,237,228,.16);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,237,228,.6)}
.hero-stopka b{color:var(--krem);font-weight:500}
/* podpowiedź nad filmem — znika razem z dosuwaniem */
.hero-wskazowka{position:absolute;right:26px;bottom:24px;z-index:2;max-width:46ch;text-align:right;
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(242,237,228,.75);
  opacity:calc(1 - var(--hp,0)*2.4)}
/* słowa nagłówka wjeżdżają po kolei */
@media(prefers-reduced-motion:no-preference){
  .hero h1 span{display:inline-block;opacity:0;transform:translateY(.34em);
    animation:slowo .95s var(--ease) forwards}
  .hero h1 span:nth-child(1){animation-delay:.15s}
  .hero h1 span:nth-child(2){animation-delay:.26s}
  .hero h1 span:nth-child(3){animation-delay:.37s}
  .hero h1 span:nth-child(4){animation-delay:.48s}
  .hero h1 span:nth-child(5){animation-delay:.59s}
  .hero h1 span:nth-child(6){animation-delay:.7s}
  .hero h1 span:nth-child(7){animation-delay:.81s}
  @keyframes slowo{to{opacity:1;transform:none}}
}
/* telefon: TA SAMA mechanika co na szerokim ekranie (okno filmu otwierane
   scrollem, pionowy plik wybiera skrypt) — zmienia się tylko układ tekstu */
@media(max-width:860px){
  .hero-tor{height:220svh}
  .hero .wrap{display:block}
  .hero-tresc{padding:120px 0 clamp(48px,8vh,90px)}
  /* mniej tekstu: zostaje znak, tytuł i przyciski — opis i pasek faktów znikają */
  .hero .pod,.hero-stopka{display:none}
  .hero-akcje{margin-top:26px}
  .hero-wskazowka{right:18px;bottom:14px;max-width:26ch;font-size:.6rem}
}
/* ograniczone animacje: statyczne hero na pełnym kadrze */
@media(prefers-reduced-motion:reduce){
  .hero-tor{height:auto}
  .hero{position:relative;align-items:flex-end}
  .hero-media{clip-path:none !important}
  .hero .wrap{display:block}
  .hero-tresc{opacity:1 !important;transform:none !important;padding:160px 0 clamp(64px,10vh,110px)}
  .hero-wskazowka{display:none}
}

/* ---------- pasek przewijany ---------- */
.tasma{border-top:1px solid var(--linia);border-bottom:1px solid var(--linia);background:var(--czern-2);
  overflow:hidden;padding:16px 0;white-space:nowrap}
.tasma div{display:inline-flex;gap:44px;padding-right:44px;animation:jedzie 34s linear infinite}
.tasma b{font-family:var(--serif);font-weight:400;font-size:1.35rem;letter-spacing:.08em;color:var(--krem-c)}
.tasma i{color:var(--zloto);font-style:normal}
@keyframes jedzie{to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.tasma div{animation:none}}

/* ---------- sekcje ---------- */
section{padding:clamp(72px,11vh,140px) 0;position:relative}
.eyebrow{display:flex;align-items:center;gap:14px;font-size:.66rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--zloto);margin-bottom:22px}
.eyebrow:before{content:'';width:34px;height:1px;background:var(--zloto)}
h2{font-family:var(--serif);font-weight:400;color:var(--krem);line-height:1.08;letter-spacing:-.03em;
  font-size:clamp(1.76rem,4.05vw,3.17rem)}
h3{font-family:var(--serif);font-weight:400;color:var(--krem);font-size:1.5rem;line-height:1.2}
.lead{max-width:58ch;margin-top:22px;font-size:1.05rem;color:var(--tekst)}
p+p{margin-top:16px}
@media(prefers-reduced-motion:no-preference){
  .odslon{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .odslon.widoczny{opacity:1;transform:none}
}

/* ---------- manifest w stylu ADA: portret + WIELKIE hasło zapalające się
     słowo po słowie w rytmie scrolla (sterowane klasą .jasne z JS) ---------- */
.manifest{background:var(--czern)}
.manifest-gora{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:clamp(30px,5vw,80px);
  align-items:center}
@media(max-width:860px){.manifest-gora{grid-template-columns:1fr}}
.manifest-gora .foto{position:relative;margin:0}
.manifest-gora .foto img{width:100%}  /* plik już czarno-biały (kuba-bw) */
.manifest-gora .foto figcaption{margin-top:12px;font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tekst)}
.manifest-gora .lead{margin-top:0;max-width:44ch}
/* hasło: ogromny serif, słowa przygaszone — scroll je "zapala" */
.manifest-haslo{margin-top:clamp(54px,9vh,110px);font-family:var(--serif);font-weight:400;
  font-size:clamp(1.85rem,5.1vw,4.22rem);line-height:1.1;letter-spacing:-.03em;max-width:22ch}
.manifest-haslo span{color:rgba(242,237,228,.13);transition:color .45s ease}
.manifest-haslo span.jasne{color:var(--krem)}
.manifest-haslo span.zloto{font-style:italic}
.manifest-haslo span.zloto.jasne{color:var(--zloto)}
@media(prefers-reduced-motion:reduce){.manifest-haslo span{color:var(--krem)}
  .manifest-haslo span.zloto{color:var(--zloto)}}

.liczby{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;
  border-top:1px solid var(--linia);padding-top:34px}
.liczby b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3rem);color:var(--zloto);line-height:1}
.liczby span{display:block;margin-top:8px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tekst)}
@media(max-width:640px){.liczby{grid-template-columns:1fr;gap:18px}}

/* ---------- portfolio ---------- */
.portfolio{background:var(--czern-2);border-top:1px solid var(--linia)}
.portfolio-gora{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:46px}
.kafle{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1000px){.kafle{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.kafle{grid-template-columns:1fr}}
.kafel{position:relative;display:block;background:none;border:0;padding:0;text-align:left;cursor:pointer;
  font-family:inherit;color:inherit;overflow:hidden}
.kafel .obraz{overflow:hidden;position:relative;background:var(--grafit)}
.kafel img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s ease;
  filter:grayscale(.35) contrast(1.04)}
.kafel:hover img,.kafel:focus-visible img{transform:scale(1.05);filter:grayscale(0)}
.kafel .obraz:after{content:'';position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--czern) 75%,transparent),transparent 55%)}
.kafel .nr{position:absolute;top:14px;left:16px;z-index:2;font-size:.7rem;letter-spacing:.2em;color:var(--zloto)}
.kafel .opis{position:absolute;left:16px;right:16px;bottom:16px;z-index:2}
.kafel .opis b{display:block;font-family:var(--serif);font-weight:400;font-size:1.35rem;color:var(--krem);line-height:1.15}
.kafel .opis span{display:block;margin-top:4px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--zloto)}
.kafel:focus-visible{outline:1px solid var(--zloto);outline-offset:3px}

/* ---------- 2 w 1: klatki z filmu ---------- */
.klatki{background:var(--czern);overflow:hidden}
.klatki .uklad{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(30px,5vw,70px);align-items:center}
@media(max-width:900px){.klatki .uklad{grid-template-columns:1fr}}
.pasek-klatek{display:flex;flex-direction:column;gap:14px}
@media(max-width:860px){.pasek-klatek figure:nth-child(n+2){display:none}}
.pasek-klatek figure{position:relative;border:1px solid var(--linia)}
.pasek-klatek img{width:100%}
.pasek-klatek figcaption{position:absolute;left:14px;bottom:12px;font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(242,237,228,.75)}
.perforacja{display:flex;gap:6px;margin-bottom:18px}
.perforacja i{width:26px;height:12px;border:1px solid var(--linia);background:var(--grafit);display:block}

/* ---------- mozaika kadrów ---------- */
.mozaika{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:56px}
@media(max-width:760px){.mozaika{grid-template-columns:repeat(2,1fr)}}
.mozaika img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:grayscale(.25);transition:filter .5s ease,transform .9s var(--ease)}
.mozaika button{padding:0;border:0;background:none;cursor:pointer;overflow:hidden;display:block}
.mozaika button:hover img{filter:none;transform:scale(1.04)}

/* ---------- proces: pasy nakrywające się przy skrolu ---------- */
.proces{padding:0;background:var(--czern)}
/* z-index WYŻSZY niż nagłówek strony (100) — w tej sekcji to głowa jest paskiem okna */
.proces-glowa{position:sticky;top:0;z-index:130;background:var(--grafit);padding:14px 24px 12px;
  border-bottom:1px solid var(--linia);transform:translateZ(0)}
.proces-glowa b{display:block;text-align:center;font-family:var(--serif);font-weight:400;color:var(--krem);
  font-size:calc(1.6rem*(1 - var(--pp,0)) + 8.4vw*var(--pp,0));line-height:1.05;white-space:nowrap;letter-spacing:-.01em}
.proces-glowa .pod{display:flex;justify-content:space-between;max-width:1600px;margin:6px auto 0;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tekst)}
.proces-rzedy{position:relative}
.proces-rzad{position:sticky;height:100svh;display:flex;flex-direction:column;background:var(--czern);transform:translateZ(0)}
.proces-pasek{height:54px;flex:none;display:flex;align-items:center;gap:22px;padding:0 24px;
  background:var(--czern);border-top:1px solid var(--linia)}
.proces-pasek .nr{font-size:.72rem;letter-spacing:.18em;color:var(--zloto)}
.proces-pasek h3{font-size:1.25rem;white-space:nowrap}
.proces-pasek .tagi{font-size:.86rem;color:var(--tekst);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proces-pasek .licz{margin-left:auto;font-size:.78rem;color:var(--tekst);white-space:nowrap}
.proces-foto{position:relative;flex:1;overflow:hidden;margin:0}
.proces-foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2)}
.proces-rzad:nth-child(1) .proces-foto img{object-position:center bottom} /* głowa zawsze w kadrze */
.proces-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:140px 24px 54px;
  background:linear-gradient(to top,color-mix(in srgb,var(--czern) 94%,transparent) 18%,transparent)}
.proces-foto figcaption span{display:block;max-width:var(--maxw);margin:0 auto;font-family:var(--serif);
  font-weight:400;font-size:clamp(1.6rem,3.6vw,3rem);line-height:1.16;color:var(--krem)}
.proces-foto figcaption span i{font-style:italic;color:var(--zloto)}
.proces-zapas{height:60vh}
@media(max-width:860px){.proces-zapas{height:18vh}}
@media(max-width:640px){
  .proces-glowa b{font-size:calc(1.3rem*(1 - var(--pp,0)) + 9.4vw*var(--pp,0))}
  .proces-pasek{height:46px;gap:12px}
  .proces-pasek .tagi{display:none}
  .proces-foto figcaption{padding:90px 20px 28px}
}

/* ---------- oferta ---------- */
.oferta{background:var(--czern-2);border-top:1px solid var(--linia)}
.pakiet{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(30px,5vw,72px);margin-top:44px;
  border:1px solid var(--linia);background:var(--czern);padding:clamp(28px,4vw,54px)}
@media(max-width:900px){.pakiet{grid-template-columns:1fr}}
.pakiet h3{font-size:clamp(1.7rem,3vw,2.4rem)}
.pakiet .cena{font-family:var(--serif);font-size:clamp(3rem,7vw,5rem);color:var(--zloto);line-height:1;margin-top:18px}
.pakiet .cena small{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tekst);margin-top:12px}
.pakiet ul{list-style:none;display:grid;gap:2px}
.pakiet li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:13px 0;border-top:1px solid var(--linia);
  font-size:.98rem;color:var(--krem-c)}
.pakiet li:first-child{border-top:0}
.pakiet li i{color:var(--zloto);font-style:normal;font-size:.8rem;padding-top:3px}
.pakiet li b{color:var(--krem);font-weight:500}
.dodatki{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
@media(max-width:860px){.dodatki{grid-template-columns:1fr}}
.dodatek{border:1px solid var(--linia);padding:30px 26px;background:var(--czern);
  display:flex;flex-direction:column;transition:border-color .4s ease,transform .5s var(--ease)}
.dodatek:hover{border-color:var(--zloto);transform:translateY(-4px)}
.dodatek .plus{font-family:var(--serif);font-size:2rem;color:var(--zloto);line-height:1}
.dodatek h3{font-size:1.3rem;margin:14px 0 10px}
.dodatek p{font-size:.94rem;color:var(--tekst);flex:1}
.dodatek .kwota{margin-top:20px;padding-top:16px;border-top:1px solid var(--linia);
  font-family:var(--serif);font-size:1.6rem;color:var(--krem)}
.uwaga{margin-top:26px;font-size:.92rem;color:var(--tekst)}
.uwaga a{color:var(--zloto)}

/* ---------- opinie ---------- */
.opinie{background:var(--czern)}
.cytaty{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
@media(max-width:900px){.cytaty{grid-template-columns:1fr}}
.cytat{border-top:1px solid var(--zloto);padding:28px 0 0}
.cytat p{font-family:var(--serif);font-size:1.32rem;line-height:1.4;color:var(--krem)}
.cytat span{display:block;margin-top:16px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tekst)}
.zrzuty{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:44px}
@media(max-width:900px){.zrzuty{grid-template-columns:repeat(3,1fr)}}
.zrzuty button{padding:0;border:1px solid var(--linia);background:none;cursor:pointer;overflow:hidden;display:block}
.zrzuty img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;opacity:.72;transition:opacity .4s}
.zrzuty button:hover img{opacity:1}

/* ---------- o mnie ---------- */
.o-mnie{background:var(--czern-2);border-top:1px solid var(--linia)}
.o-mnie .uklad{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,80px);align-items:center}
@media(max-width:860px){.o-mnie .uklad{grid-template-columns:1fr}}
.o-mnie .foto{position:relative}
.o-mnie .foto img{width:100%;filter:grayscale(.3)}
.o-mnie .foto:before{content:'';position:absolute;left:-14px;top:14px;right:14px;bottom:-14px;border:1px solid var(--zloto);z-index:0}
.o-mnie .foto img{position:relative;z-index:1}
.podpis{margin-top:28px;font-family:var(--serif);font-size:1.5rem;color:var(--zloto)}

/* ---------- FAQ ---------- */
.faq{background:var(--czern)}
.faq-lista{margin-top:40px;border-top:1px solid var(--linia)}
.faq details{border-bottom:1px solid var(--linia)}
.faq summary{cursor:pointer;list-style:none;padding:24px 40px 24px 0;position:relative;
  font-family:var(--serif);font-size:clamp(1.15rem,2.2vw,1.5rem);color:var(--krem)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);
  color:var(--zloto);font-size:1.4rem;transition:transform .3s}
.faq details[open] summary:after{content:'–'}
.faq details p{padding:0 60px 26px 0;color:var(--tekst);max-width:78ch}

/* ---------- kontakt ---------- */
.kontakt{background:var(--czern-2);border-top:1px solid var(--linia)}
.kontakt .uklad{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(34px,5vw,80px)}
@media(max-width:900px){.kontakt .uklad{grid-template-columns:1fr}}
.kontakt-dane{display:grid;gap:26px;margin-top:36px}
.kontakt-dane .poz .etykieta{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--zloto);margin-bottom:6px}
.kontakt-dane .poz a,.kontakt-dane .poz b{font-family:var(--serif);font-weight:400;font-size:1.6rem;color:var(--krem);text-decoration:none}
.kontakt-dane .poz a:hover{color:var(--zloto)}
form{display:grid;gap:16px}
.pola-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.pola-2{grid-template-columns:1fr}}
label{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tekst);margin-bottom:8px}
input,textarea{width:100%;background:var(--czern);border:1px solid var(--linia);color:var(--krem);
  font-family:inherit;font-size:1rem;padding:14px 16px;transition:border-color .3s}
input:focus,textarea:focus{outline:none;border-color:var(--zloto)}
textarea{min-height:130px;resize:vertical}
.pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.zgoda{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:.84rem;color:var(--tekst)}
.zgoda input{width:18px;height:18px;accent-color:var(--zloto);padding:0;margin-top:3px}
.komunikat{font-size:.92rem;color:var(--zloto);min-height:1.2em}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:350;background:color-mix(in srgb,var(--czern) 97%,transparent);display:none;
  align-items:center;justify-content:center;padding:70px 20px 90px}
.lb.otwarty{display:flex}
.lb img{max-width:min(1400px,94vw);max-height:82vh;width:auto;object-fit:contain}
.lb-zamknij{position:absolute;top:20px;right:22px;width:48px;height:48px;background:none;
  border:1px solid var(--linia);color:var(--krem);font-size:1.2rem;cursor:pointer}
.lb-nav{position:absolute;bottom:26px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:26px}
.lb-nav button{width:52px;height:52px;background:none;border:1px solid var(--linia);color:var(--krem);
  font-size:1.1rem;cursor:pointer}
.lb-nav button:hover{border-color:var(--zloto);color:var(--zloto)}
.lb-info{position:absolute;top:26px;left:24px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tekst)}
.lb-info b{color:var(--krem);font-weight:500}

/* ---------- stopka ---------- */
footer{background:var(--czern);border-top:1px solid var(--linia);padding:60px 0 34px}
.stopka-gora{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.stopka-gora img{height:56px;width:auto;filter:invert(1) brightness(1.6)}
.stopka-menu{display:flex;gap:26px;flex-wrap:wrap}
.stopka-menu a{color:var(--tekst);text-decoration:none;font-size:.86rem}
.stopka-menu a:hover{color:var(--zloto)}
.stopka-dol{margin-top:40px;padding-top:22px;border-top:1px solid var(--linia);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.78rem;color:var(--tekst)}
.do-gory{position:fixed;right:24px;bottom:24px;z-index:120;width:50px;height:50px;border:1px solid var(--linia);
  background:color-mix(in srgb,var(--czern) 80%,transparent);color:var(--krem);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s}
.do-gory.widoczny{opacity:1;pointer-events:auto}
.do-gory:hover{border-color:var(--zloto);color:var(--zloto)}

/* =====================================================================
   PODSTRONY — wspólne elementy (realizacje, oferta, opinie, o mnie, faq, kontakt)
   ===================================================================== */
.kafel{text-decoration:none}

/* nagłówek podstrony: pas ze zdjęciem + tytuł */
.strona-hero{position:relative;min-height:clamp(360px,58svh,620px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--czern-2);padding:0}
.strona-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:grayscale(.15)}
/* dwie warstwy: od dołu (pod tekst) i od lewej (pod okruszki na jasnym zdjęciu) */
.strona-hero:after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,color-mix(in srgb,var(--czern) 95%,transparent) 6%,color-mix(in srgb,var(--czern) 35%,transparent) 60%,color-mix(in srgb,var(--czern) 70%,transparent) 100%),
             linear-gradient(100deg,color-mix(in srgb,var(--czern) 82%,transparent) 0%,color-mix(in srgb,var(--czern) 30%,transparent) 52%,transparent 100%)}
.strona-hero .wrap{position:relative;z-index:2;width:100%;padding-top:150px;padding-bottom:clamp(34px,6vh,64px)}
.strona-hero h1{font-family:var(--serif);font-weight:400;color:var(--krem);letter-spacing:-.03em;
  font-size:clamp(1.94rem,5.28vw,4.05rem);line-height:1.04;margin-top:18px;max-width:18ch}
.strona-hero h1 i{font-style:italic;color:var(--zloto)}
.strona-hero .pod{margin-top:20px;max-width:52ch;color:rgba(242,237,228,.82)}
.strona-hero.bez-zdjecia{min-height:auto;background:var(--czern-2);border-bottom:1px solid var(--linia)}
.strona-hero.bez-zdjecia:after{display:none}

/* okruszki */
.okruszki{display:flex;gap:10px;flex-wrap:wrap;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tekst)}
.okruszki a{color:var(--tekst);text-decoration:none}
.okruszki a:hover{color:var(--zloto)}
.okruszki span{color:var(--zloto)}

/* metryczka realizacji */
.metryczka{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linia);
  border:1px solid var(--linia);margin-top:44px}
.metryczka div{background:var(--czern);padding:26px 24px}
.metryczka .etykieta{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--zloto);margin-bottom:8px}
.metryczka b{font-family:var(--serif);font-weight:400;font-size:1.3rem;color:var(--krem);display:block;line-height:1.25}
@media(max-width:760px){.metryczka{grid-template-columns:1fr}}

/* siatka galerii (masonry-lite: co trzeci kadr szerszy) */
.galeria{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:20px}
.galeria button{grid-column:span 2;padding:0;border:0;background:none;cursor:pointer;overflow:hidden;display:block}
.galeria button:nth-child(7n+1){grid-column:span 3}
.galeria button:nth-child(7n+2){grid-column:span 3}
.galeria img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:grayscale(.2);
  transition:filter .5s ease,transform .9s var(--ease)}
.galeria button:hover img,.galeria button:focus-visible img{filter:none;transform:scale(1.04)}
@media(max-width:900px){
  .galeria{grid-template-columns:repeat(2,1fr);gap:10px}
  .galeria button,.galeria button:nth-child(7n+1),.galeria button:nth-child(7n+2){grid-column:span 1}
}

/* lista realizacji (duże karty poziome) */
.lista-realizacji{display:grid;gap:20px;margin-top:44px}
.karta-realizacji{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:0;
  border:1px solid var(--linia);background:var(--czern);text-decoration:none;overflow:hidden;
  transition:border-color .4s ease,transform .5s var(--ease)}
.karta-realizacji:hover{border-color:var(--zloto);transform:translateY(-4px)}
.karta-realizacji .foto{overflow:hidden;background:var(--grafit)}
.karta-realizacji img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(.28);
  transition:transform 1.1s var(--ease),filter .6s ease}
.karta-realizacji:hover img{transform:scale(1.04);filter:none}
.karta-realizacji .tresc{padding:clamp(26px,3vw,44px);display:flex;flex-direction:column;justify-content:center}
.karta-realizacji .nr{font-size:.7rem;letter-spacing:.24em;color:var(--zloto)}
.karta-realizacji h2{font-size:clamp(1.6rem,3vw,2.4rem);margin:12px 0 10px}
.karta-realizacji p{color:var(--tekst);font-size:.96rem}
.karta-realizacji .wiecej{margin-top:20px;font-family:var(--serif);font-size:1.1rem;color:var(--krem)}
.karta-realizacji .wiecej i{font-style:normal;border-bottom:1px solid var(--zloto);padding-bottom:3px}
@media(max-width:860px){.karta-realizacji{grid-template-columns:1fr}}

/* nawigacja: następna realizacja */
.dalej{border-top:1px solid var(--linia);margin-top:20px}
.dalej a{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:38px 0;text-decoration:none;color:var(--krem)}
.dalej .etykieta{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--zloto)}
.dalej b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3.4vw,2.6rem);margin-top:8px}
.dalej a:hover b{color:var(--zloto)}

/* dwie kolumny tekstu na podstronach */
.dwie-kolumny{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);margin-top:34px}
@media(max-width:820px){.dwie-kolumny{grid-template-columns:1fr}}

/* kroki rezerwacji */
.kroki{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
@media(max-width:860px){.kroki{grid-template-columns:1fr}}
.krok{border-top:1px solid var(--zloto);padding:26px 26px 28px;text-align:center;background:rgba(255,255,255,.025);display:flex;flex-direction:column;align-items:center}
.krok .nr{font-family:var(--serif);font-size:2.2rem;color:var(--zloto);line-height:1}
.krok h3{font-size:1.25rem;margin:10px 0 8px}
.krok p{color:var(--tekst);font-size:.95rem;max-width:36ch}
.krok p:last-child{margin-bottom:0}
@media(max-width:600px){.krok{padding:22px 18px 24px}}

/* pełne opinie (duże zrzuty) */
.opinie-pelne{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
@media(max-width:900px){.opinie-pelne{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.opinie-pelne{grid-template-columns:1fr}}
.opinie-pelne button{padding:0;border:1px solid var(--linia);background:var(--czern-2);cursor:pointer;
  display:block;overflow:hidden;transition:border-color .4s ease}
.opinie-pelne button:hover{border-color:var(--zloto)}
.opinie-pelne img{width:100%;display:block;opacity:.9;transition:opacity .4s}
.opinie-pelne button:hover img{opacity:1}

/* pas CTA na dole podstron */
.cta-pas{background:var(--czern-2);border-top:1px solid var(--linia);text-align:center}
.cta-pas h2{max-width:20ch;margin:0 auto}
.cta-pas .lead{margin:22px auto 32px;text-align:center}
.cta-pas .eyebrow{justify-content:center}
.cta-pas .eyebrow:before{display:none}
.przyciski-srodek{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* karta realizacji: klikalny jest cały kafelek, ale link siedzi w nagłówku (poprawny HTML) */
.karta-realizacji h2 a{text-decoration:none;color:inherit}
.karta-realizacji h2 a:hover{color:var(--zloto)}
.link-caly:after{content:'';position:absolute;inset:0;z-index:3}

/* =====================================================================
   FILMY — „fasada" YouTube: najpierw lekka miniatura, iframe dopiero po kliknięciu
   (strona ładuje się szybko, YouTube nie stawia ciasteczek zanim ktoś nie zechce oglądać)
   ===================================================================== */
.film{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:var(--grafit);border:1px solid var(--linia);padding:0;cursor:pointer;
  transition:border-color .4s ease}
.film:hover,.film:focus-visible{border-color:var(--zloto)}
.film img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) brightness(.82);
  transition:transform 1.2s var(--ease),filter .6s ease}
.film:hover img{transform:scale(1.04);filter:grayscale(0) brightness(.9)}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:clamp(64px,7vw,88px);height:clamp(64px,7vw,88px);border-radius:50%;
  background:color-mix(in srgb,var(--czern) 55%,transparent);border:1px solid rgba(242,237,228,.75);
  display:flex;align-items:center;justify-content:center;
  transition:background .35s ease,border-color .35s ease,transform .35s var(--ease)}
.film .play:after{content:'';margin-left:5px;border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--krem)}
.film:hover .play{background:var(--zloto);border-color:var(--zloto);transform:translate(-50%,-50%) scale(1.06)}
.film:hover .play:after{border-left-color:var(--czern)}
.film .naglowek{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:70px 22px 20px;text-align:left;
  background:linear-gradient(to top,color-mix(in srgb,var(--czern) 90%,transparent),transparent)}
.film .naglowek b{display:block;font-family:var(--serif);font-weight:400;color:var(--krem);
  font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1.2}
.film .naglowek span{display:block;margin-top:5px;font-size:.64rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--zloto)}
.film.gra .play,.film.gra .naglowek{display:none}

/* duży film + siatka mniejszych */
.film-glowny{margin-top:40px}
.filmy-siatka{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:20px}
@media(max-width:760px){.filmy-siatka{grid-template-columns:1fr}}
.filmy-siatka.trzy{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.filmy-siatka.trzy{grid-template-columns:1fr}}
.film-opis{margin-top:14px;color:var(--tekst);font-size:.94rem}
.sekcja-filmy{background:var(--czern-2);border-top:1px solid var(--linia)}
.film-info{display:flex;gap:20px;flex-wrap:wrap;align-items:baseline;justify-content:space-between;margin-top:16px}
.film-info a{color:var(--zloto);font-size:.9rem}

/* nad grającym filmem wraca zwykła strzałka — sterowanie YouTube trzeba widzieć */
.film.gra,.film.gra iframe{cursor:auto}

/* flesz na kadrze filmu — przez całe ładowanie ledwie tli, przy wybuchu HUK */
.film .flesz{position:absolute;inset:0;z-index:3;background:#fff;opacity:0;pointer-events:none}
.film.strzal .flesz{animation:flesz 1.9s cubic-bezier(.4,0,.25,1)}
@keyframes flesz{
  0%{opacity:0}
  30%{opacity:.04}
  55%{opacity:.09}
  62%{opacity:.03}
  65%{opacity:.5}
  76%{opacity:.16}
  100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.film.strzal .flesz{animation:none}}

/* ---------- delikatny parallaks tła (tylko transform — nie powoduje przemalowań) ---------- */
.hero .poster,.hero video,.strona-hero>img{will-change:transform}
@media(prefers-reduced-motion:reduce){.hero .poster,.hero video,.strona-hero>img{transform:none!important}}

/* =====================================================================
   POZIOMA GALERIA — skrolujesz w dół, karty jadą w prawo (styl ERA)
   Mechanika: wysoki tor + przyklejona scena; przesunięcie w bok liczone
   z postępu scrolla w torze. Tylko transform — zero przemalowań.
   ===================================================================== */
.poziom{padding:0;background:var(--czern-2);border-top:1px solid var(--linia)}
.poziom-tor{position:relative}   /* wysokość ustawia JS: tyle, ile trzeba przejechać */
.poziom-scena{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center}
.poziom-glowa{padding:0 24px;max-width:var(--maxw);margin:0 auto 40px;width:100%}
.poziom-pasek{display:flex;gap:24px;align-items:stretch;padding:0 max(24px,calc((100vw - var(--maxw))/2));
  width:max-content;will-change:transform}
.poziom-karta{position:relative;flex:none;width:min(560px,72vw);overflow:hidden;
  background:var(--grafit);border:1px solid var(--linia);text-decoration:none;
  transition:border-color .4s ease}
.poziom-karta:hover{border-color:var(--zloto)}
.poziom-karta img{width:100%;height:min(58vh,520px);object-fit:cover;
  filter:grayscale(.3) contrast(1.03);transition:filter .6s ease,transform 1.1s var(--ease)}
.poziom-karta:hover img{filter:none;transform:scale(1.04)}
.poziom-karta .dol{position:absolute;left:0;right:0;bottom:0;padding:80px 24px 22px;
  background:linear-gradient(to top,color-mix(in srgb,var(--czern) 92%,transparent),transparent)}
.poziom-karta .dol b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.4rem,2.4vw,2rem);color:var(--krem);line-height:1.15}
.poziom-karta .dol span{display:block;margin-top:6px;font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--zloto)}
.poziom-karta .nr{position:absolute;top:16px;left:18px;font-size:.72rem;letter-spacing:.2em;color:var(--zloto)}
/* ostatnia karta: zaproszenie do wszystkich realizacji */
.poziom-karta.cta-karta{display:flex;align-items:center;justify-content:center;background:var(--czern)}
.poziom-karta.cta-karta div{text-align:center;padding:30px}
.poziom-karta.cta-karta b{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.2rem);
  color:var(--krem);display:block;line-height:1.2}
.poziom-karta.cta-karta span{display:inline-block;margin-top:18px;color:var(--zloto);
  font-family:var(--serif);font-size:1.15rem;border-bottom:1px solid var(--zloto);padding-bottom:3px}
.poziom-postep{display:flex;align-items:center;gap:16px;max-width:var(--maxw);
  margin:36px auto 0;padding:0 24px;width:100%}
.poziom-postep .linia{flex:1;height:1px;background:var(--linia);position:relative}
.poziom-postep .linia i{position:absolute;left:0;top:-0.5px;height:2px;width:0;background:var(--zloto);display:block}
.poziom-postep span{font-size:.72rem;letter-spacing:.18em;color:var(--tekst);white-space:nowrap}
/* telefon i ograniczone animacje: zwykła pozioma karuzela przesuwana palcem */
@media(max-width:860px){
  .poziom-karta{width:78vw}
  .poziom-karta img{height:52vh}
  .poziom-glowa{margin-bottom:26px}
}
@media(prefers-reduced-motion:reduce){
  .poziom-tor{height:auto !important}
  .poziom-scena{position:static;height:auto;padding:64px 0}
  .poziom-pasek{width:auto;overflow-x:auto;transform:none !important;padding-bottom:14px}
  .poziom-postep{display:none}
}

/* =====================================================================
   NAJAZD NA ZDJĘCIE (motyw ADA): portret z manifestu wraca jako mała karta,
   scroll powiększa go do pełnego ekranu i "wjeżdżamy" nim w sekcję filmów.
   Okno wycinane clip-pathem (kompozytor, zero przemalowań); --zp 0..1 z JS.
   ===================================================================== */
.zoom-tor{position:relative;height:230svh}
.zoom-scena{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--czern)}
/* karta = pomniejszona KOPIA finałowego kadru (transform:scale) — na starcie
   widać całą kompozycję w miniaturze, najazd powiększa ją do pełnego ekranu.
   Czysty transform, w środku lekka kontra na obrazie (efekt dojazdu kamery). */
.zoom-kadr{position:absolute;inset:0;overflow:hidden;
  transform:scale(calc(.30 + .70 * var(--zp,0)))}
.zoom-kadr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:63% 22%;filter:grayscale(.3) contrast(1.04);
  transform:scale(calc(1.16 - .16 * var(--zp,0)))}
/* przyciemnienie wchodzi razem z powiększeniem — pod tekst */
.zoom-kadr:after{content:'';position:absolute;inset:0;opacity:var(--zp,0);
  background:linear-gradient(100deg,color-mix(in srgb,var(--czern) 88%,transparent) 0%,color-mix(in srgb,var(--czern) 50%,transparent) 50%,color-mix(in srgb,var(--czern) 25%,transparent) 100%)}
/* podpis pod małą kartą — znika przy najeździe */
.zoom-podpis{position:absolute;left:50%;top:calc(50% + 50svh*(.30 + .70*var(--zp,0)) + 18px);transform:translateX(-50%);
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--tekst);
  opacity:calc(1 - var(--zp,0)*2.6);white-space:nowrap}
/* treść następnego poziomu — wyłania się pod koniec najazdu */
.zoom-tresc{position:absolute;inset:0;display:flex;align-items:center;z-index:2;
  opacity:calc((var(--zp,0) - .68) * 3.2);
  transform:translate3d(0,calc((1 - var(--zp,0))*40px),0)}
.zoom-tresc .wrap{width:100%}
.zoom-tresc h2{font-size:clamp(2rem,4.6vw,3.6rem);max-width:16ch}
.zoom-strzalka{margin-top:30px;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--zloto)}
/* telefon i ograniczone animacje: statyczny pełny kadr z treścią */
@media(max-width:860px),(prefers-reduced-motion:reduce){
  .zoom-tor{height:auto}
  .zoom-scena{position:relative}
  .zoom-kadr{transform:none !important}
  .zoom-kadr img{transform:none !important}
  .zoom-kadr:after{opacity:1}
  .zoom-podpis{display:none}
  .zoom-tresc{opacity:1 !important;transform:none !important}
}

/* =====================================================================
   POKAZ OFERTY (motyw ADA "Esthetic/Restorative Dentistry"):
   przypięta scena — zdjęcie na lewej połowie, wielki kursywny tytuł
   w poprzek, opis+lista po prawej; scroll przełącza usługi, a zdjęcie
   zmienia się PRZETARCIEM od dołu (clip-path). Menu na dole podświetla
   aktywną pozycję.
   ===================================================================== */
.uslugi-tor{position:relative;height:840svh}  /* długi tor = luksusowe, powolne tempo */
.uslugi-scena{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--czern-2)}
/* zdjęcia: lewa połowa, kolejne odsłaniają się od dołu */
.uslugi-foto{position:absolute;left:0;top:0;bottom:0;width:min(56vw,980px)}
.u-foto{position:absolute;inset:0;overflow:hidden;clip-path:inset(100% 0 0 0);
  transition:clip-path 1.7s cubic-bezier(.16,1,.3,1)}
.u-foto.aktywny,.u-foto.za-nami{clip-path:inset(0 0 0 0)}
.u-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  /* bez filtrów — kolorystyka z gradingu Jakuba ma się bronić sama */
.u-foto:after{content:'';position:absolute;inset:0;
  background:linear-gradient(to right,transparent 55%,var(--czern-2) 100%),
             linear-gradient(to top,color-mix(in srgb,var(--czern) 55%,transparent) 0%,transparent 30%)}
/* wielki kursywny tytuł w poprzek krawędzi zdjęcia */
.uslugi-tytul{position:absolute;left:min(34vw,600px);bottom:6svh;z-index:3;margin:0;
  font-family:var(--serif);font-style:italic;font-weight:400;line-height:.95;
  font-size:clamp(3rem,8.4vw,7.2rem);color:var(--krem);letter-spacing:-.01em}
.u-tytul{position:absolute;left:0;bottom:0;white-space:nowrap;opacity:0;
  transform:translateY(40px);transition:opacity 1s ease .25s,transform 1.15s var(--ease) .25s}
.u-tytul.aktywny{opacity:1;transform:none}
/* panel po prawej: opis + lista */
.uslugi-panel{position:absolute;right:0;top:0;bottom:0;width:min(40vw,560px);
  padding:0 clamp(24px,4vw,64px);display:flex;flex-direction:column;justify-content:center}
.u-panel .etykieta{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--tekst);margin-bottom:20px}
.u-panel{position:absolute;left:clamp(24px,4vw,64px);right:clamp(24px,4vw,64px);top:50%;
  transform:translateY(calc(-50% + 34px));opacity:0;pointer-events:none;
  transition:opacity .9s ease .45s,transform 1.05s var(--ease) .45s}
.u-panel.aktywny{opacity:1;transform:translateY(-50%);pointer-events:auto}
.u-panel p{color:var(--krem);font-size:clamp(1rem,1.3vw,1.15rem);max-width:38ch}
.u-panel ul{list-style:none;margin-top:26px}
.u-panel li{border-top:1px solid var(--linia);padding:13px 0;display:flex;
  justify-content:space-between;gap:14px;font-size:.95rem;color:var(--krem-c)}
.u-panel li i{color:var(--zloto);font-style:normal}
/* menu usług na dole po lewej */
.uslugi-menu{position:absolute;left:24px;bottom:26px;z-index:4;display:flex;flex-direction:column;gap:6px}
.uslugi-menu .etykieta{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(242,237,228,.6);margin-bottom:8px}
.uslugi-menu button{background:none;border:0;padding:0;text-align:left;cursor:pointer;
  font-family:inherit;font-size:.98rem;color:rgba(242,237,228,.42);transition:color .6s ease}
.uslugi-menu button:hover{color:var(--krem-c)}
.uslugi-menu button.aktywny{color:var(--krem);font-weight:500}
.uslugi-cta{position:absolute;right:clamp(24px,4vw,64px);bottom:26px;z-index:4}
/* licznik postępu */
.uslugi-licznik{position:absolute;right:clamp(24px,4vw,64px);top:22px;z-index:4;
  font-family:var(--serif);font-size:.95rem;letter-spacing:.14em;color:rgba(242,237,228,.7)}
/* telefon i ograniczone animacje: karty jedna pod drugą */
@media(max-width:900px),(prefers-reduced-motion:reduce){
  .uslugi-tor{height:auto}
  .uslugi-scena{position:relative;height:auto;overflow:visible;padding:64px 0 40px}
  .uslugi-foto,.uslugi-tytul,.uslugi-menu,.uslugi-licznik{display:none}
  .uslugi-panel{position:static;width:auto;padding:0 24px;display:block}
  .u-panel,.u-panel.aktywny{position:static;opacity:1 !important;transform:none !important;
    pointer-events:auto;margin-bottom:44px;transition:none}
  .u-panel:before{content:attr(data-tytul);display:block;font-family:var(--serif);
    font-style:italic;font-size:2rem;color:var(--krem);margin-bottom:14px}
  .u-panel .u-mini{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
    margin-bottom:18px}
  .uslugi-cta{position:static;display:inline-block;margin:6px 24px 0}
}
@media(min-width:901px){.u-panel .u-mini{display:none}}

/* =====================================================================
   BLOG — lista wpisów i widok artykułu (czytelna typografia, wąska kolumna)
   ===================================================================== */
.blog-lista{display:grid;gap:18px;margin-top:44px}
.blog-karta{position:relative;display:grid;grid-template-columns:minmax(180px,300px) 1fr;gap:0;
  border:1px solid var(--linia);background:var(--czern);overflow:hidden;
  transition:border-color .4s ease,transform .5s var(--ease)}
.blog-karta:hover{border-color:var(--zloto);transform:translateY(-4px)}
.blog-karta .foto{overflow:hidden;background:var(--grafit)}
.blog-karta img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.25);
  transition:transform 1.1s var(--ease),filter .6s ease}
.blog-karta:hover img{transform:scale(1.04);filter:none}
.blog-karta .tresc{padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;justify-content:center}
.blog-karta h2{font-size:clamp(1.3rem,2.4vw,1.9rem);margin:10px 0}
.blog-karta h2 a{color:inherit;text-decoration:none}
.blog-karta h2 a:hover{color:var(--zloto)}
.blog-karta p{color:var(--tekst);font-size:.96rem}
@media(max-width:760px){.blog-karta{grid-template-columns:1fr}}
.wpis-meta{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--zloto)}

/* widok artykułu */
.artykul{max-width:760px;margin:0 auto}
.artykul p{color:var(--krem-c);font-size:1.06rem;line-height:1.75;margin-bottom:20px}
.artykul h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:48px 0 16px}
.artykul h3{font-size:1.25rem;margin:32px 0 12px;color:var(--krem)}
.artykul ul,.artykul ol{margin:0 0 22px 22px;color:var(--krem-c);font-size:1.04rem;line-height:1.7}
.artykul li{margin-bottom:9px}
.artykul strong{color:var(--krem);font-weight:600}
.artykul a{color:var(--zloto)}
.artykul .wyroznik{border-left:2px solid var(--zloto);padding:4px 0 4px 22px;margin:30px 0;
  font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.4;color:var(--krem)}
.artykul .ramka{border:1px solid var(--linia);background:var(--czern-2);padding:26px 28px;margin:34px 0}
.artykul .ramka p:last-child{margin-bottom:0}
.artykul .ramka b{color:var(--zloto)}
.artykul-faq{margin-top:50px;border-top:1px solid var(--linia)}
.artykul-faq details{border-bottom:1px solid var(--linia)}
.artykul-faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-family:var(--serif);font-size:1.2rem;color:var(--krem)}
.artykul-faq summary::-webkit-details-marker{display:none}
.artykul-faq summary:after{content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);
  color:var(--zloto);font-size:1.3rem}
.artykul-faq details[open] summary:after{content:'–'}
.artykul-faq p{padding:0 40px 22px 0;color:var(--tekst);font-size:1rem}
.dalsze-wpisy{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:20px}
@media(max-width:760px){.dalsze-wpisy{grid-template-columns:1fr}}
.dalszy{border:1px solid var(--linia);padding:24px;text-decoration:none;display:block;
  transition:border-color .35s ease}
.dalszy:hover{border-color:var(--zloto)}
.dalszy span{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--zloto)}
.dalszy b{display:block;margin-top:8px;font-family:var(--serif);font-weight:400;font-size:1.2rem;color:var(--krem)}

/* =====================================================================
   KONFIGURATOR PAKIETU — wybór wariantu, cena liczy się na żywo
   (wzorzec: kalkulator z szeregówek — dane w JS, zero zapytań do serwera)
   ===================================================================== */
.konfig{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,64px);margin-top:48px;align-items:start}
.konfig .etykieta{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--zloto);margin:0 0 14px}
.warianty{display:grid;gap:12px;margin-bottom:34px}
.wariant,.przelacznik{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  padding:22px 24px;border:1px solid var(--linia);background:var(--czern);cursor:pointer;
  font-size:1rem;letter-spacing:0;text-transform:none;color:var(--krem);margin:0;
  transition:border-color .35s ease,background .35s ease}
.wariant:hover,.przelacznik:hover{border-color:color-mix(in srgb,var(--zloto) 55%,transparent)}
.wariant input,.przelacznik input{position:absolute;opacity:0;pointer-events:none}
.wariant:focus-within,.przelacznik:focus-within{outline:1px solid var(--zloto);outline-offset:3px}
.wariant.aktywny,.przelacznik.aktywny{border-color:var(--zloto);background:var(--czern-2)}
.wariant b,.przelacznik b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,2vw,1.5rem);color:var(--krem);line-height:1.2}
.wariant .opis,.przelacznik .opis{display:block;font-size:.9rem;color:var(--tekst);margin-top:5px;line-height:1.5}
.wariant .kwota,.przelacznik .kwota{font-family:var(--serif);font-size:clamp(1.3rem,2.3vw,1.8rem);color:var(--zloto);white-space:nowrap}
.wariant .kolko{width:20px;height:20px;border-radius:50%;border:1px solid var(--zloto);position:relative;transition:background .3s}
.wariant .kolko:after{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--czern);transform:scale(0);transition:transform .35s var(--ease)}
.wariant.aktywny .kolko{background:var(--zloto)}
.wariant.aktywny .kolko:after{transform:scale(1)}
.wariant .hit{position:absolute;top:-10px;right:18px;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  background:var(--zloto);color:var(--czern);padding:4px 10px;font-weight:500}
.przelacznik .suwak{width:46px;height:26px;border-radius:13px;border:1px solid var(--zloto);position:relative;transition:background .3s}
.przelacznik .suwak:after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--zloto);
  transition:transform .35s var(--ease),background .3s}
.przelacznik.aktywny .suwak{background:var(--zloto)}
.przelacznik.aktywny .suwak:after{transform:translateX(20px);background:var(--czern)}

.konfig-suma{position:sticky;top:96px;border:1px solid var(--zloto);padding:clamp(26px,3vw,40px);background:var(--czern-2)}
.konfig-suma .cena{font-family:var(--serif);font-size:clamp(3.2rem,6vw,4.8rem);color:var(--zloto);line-height:1;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.konfig-suma .cena small{font-size:.4em;margin-left:6px}
.konfig-suma .nazwa{font-family:var(--serif);font-size:1.25rem;color:var(--krem);margin-bottom:18px;min-height:1.5em}
.konfig-suma ul{list-style:none;margin:0 0 24px;border-top:1px solid var(--linia)}
.konfig-suma li{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--linia);font-size:.93rem;color:var(--krem-c)}
.konfig-suma li i{color:var(--zloto);font-style:normal;font-size:.75rem;padding-top:3px}
.konfig-suma li.nowy{animation:wjazd .5s var(--ease)}
@keyframes wjazd{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.konfig-suma .btn{width:100%;text-align:center;box-sizing:border-box;padding:12px 14px}
.konfig-suma .dopisek{font-size:.78rem;color:var(--tekst);margin-top:14px;text-align:center;line-height:1.5}
@media(max-width:900px){.konfig{grid-template-columns:1fr}.konfig-suma{position:static}}
@media(max-width:520px){.wariant,.przelacznik{grid-template-columns:auto 1fr;padding:18px}
  .wariant .kwota,.przelacznik .kwota{grid-column:2;margin-top:2px}}

/* czego NIE ma w cenniku — przekreślone dopłaty */
.bez-doplat{margin-top:60px;padding:28px 0;border-top:1px solid var(--linia);border-bottom:1px solid var(--linia);
  display:flex;flex-wrap:wrap;gap:12px 36px;align-items:center}
.bez-doplat .etykieta{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--zloto);margin:0;flex-basis:100%}
.bez-doplat s{color:var(--tekst);text-decoration-color:var(--zloto);text-decoration-thickness:1px;font-family:var(--serif);font-size:1.2rem}
@media(min-width:900px){.bez-doplat .etykieta{flex-basis:auto;margin-right:12px}}

/* w każdym wariancie — siatka ✦ */
.w-kazdym{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;margin-top:20px}
.w-kazdym li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:13px 0;border-top:1px solid var(--linia);font-size:.95rem;color:var(--tekst);line-height:1.5}
.w-kazdym li i{color:var(--zloto);font-style:normal;font-size:.8rem;padding-top:3px}
.w-kazdym li b{color:var(--krem);font-weight:500}
@media(max-width:760px){.w-kazdym{grid-template-columns:1fr}}

/* O NAS — dwa portrety duetu */
.duet{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.duet figure{margin:0;position:relative;overflow:hidden;background:var(--grafit)}
.duet img{width:100%;display:block;filter:grayscale(.3);transition:filter .7s ease,transform 1.2s var(--ease)}
.duet figure:hover img{filter:none;transform:scale(1.03)}
.duet figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(transparent,color-mix(in srgb,var(--czern) 90%,transparent));
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--krem)}
.duet figcaption b{display:block;font-family:var(--serif);font-weight:400;font-size:1.3rem;letter-spacing:0;text-transform:none;margin-bottom:2px}
.duet figure:nth-child(2){margin-top:40px}
@media(max-width:760px){.duet figure:nth-child(2){margin-top:22px}}

/* strona główna: sekcja O nas z duetem — równe kolumny, żeby portrety nie były ciasne */
.o-mnie .uklad:has(.duet){grid-template-columns:1fr 1fr}
.o-nas-uklad{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
/* telefon: portrety duetu pełną szerokością nad tekstem, nie dwie wąskie kolumny */
@media(max-width:860px){
  .o-mnie .uklad:has(.duet),.o-nas-uklad{grid-template-columns:1fr!important}
  .duet{gap:10px}
  .duet figcaption{padding:10px 12px;font-size:.56rem;letter-spacing:.14em}
  .duet figcaption b{font-size:1.05rem}
  .o-mnie .btn,.o-nas-uklad .btn{font-size:.98rem}
}

/* nagłówek: Kreator weselny obok "Sprawdź termin" (na telefonie tylko w menu) */
.nav-kreator{border-color:rgba(242,237,228,.3)}
@media(max-width:900px){.nav-kreator{display:none}}
/* strona kreatora: demo w ramce */
.demo-ramka{border:1px solid var(--linia);background:var(--czern-2);padding:clamp(18px,3vw,36px);margin-top:36px}
.demo-ramka .s-zakladki{position:static;background:transparent;display:flex;align-items:center}
.demo-ramka .s-tab h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;color:var(--krem);margin:0}
.demo-pod{color:var(--tekst);font-size:.95rem;margin:10px 0 0;line-height:1.6}
.demo-pod a{color:var(--zloto)}
.demo-reset{margin-left:auto;background:none;border:1px solid var(--linia);color:var(--tekst);font:inherit;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;padding:9px 12px}
.demo-reset:hover{border-color:var(--zloto);color:var(--krem)}
.demo-ramka .p-bez{top:100px}
.kroki-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.kroki-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.kroki-4{grid-template-columns:1fr}}
.demo-ramka .s-tab{padding:22px 0 0;border:0}
.demo-ramka .s-tab-gora{margin-bottom:6px}
/* strona kreatora: pasek logowania pod hero */
.kreator-pasek{padding:22px 0;border-top:1px solid var(--linia);border-bottom:1px solid var(--linia);background:var(--czern-2)}
.kreator-pasek-w{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.kreator-pasek p{margin:0;color:var(--tekst);font-size:1rem}
.kreator-pasek p b{color:var(--krem);font-weight:500}
.kreator-pasek-btn{display:flex;gap:10px;flex-wrap:wrap}
.kreator-pasek:has(.kroki){padding:clamp(36px,6vw,56px) 0}
.kreator-pasek .kroki{margin-top:0}
.w-budowie{display:block;margin-top:6px;font-size:.82rem;color:var(--tekst)}
.w-budowie a{color:var(--zloto)}
@media(max-width:1000px){.nav-kreator{display:none}}
.kreator-cta{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 34px}

/* --- szlif wizualny: głębia zamiast płaskiej szarości --- */
body{background:
  radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb,var(--zloto) 7%,transparent), transparent 60%),
  radial-gradient(900px 500px at 100% 100%, color-mix(in srgb,var(--zloto) 4%,transparent), transparent 65%),
  var(--czern);
  background-attachment:fixed}
section{position:relative}
/* sekcje na czerni-2 dostają subtelny gradient, nie płaski szary prostokąt */
.o-mnie,.faq,.oferta{background:linear-gradient(180deg,var(--czern-2),var(--czern))}
.opinie{background:linear-gradient(180deg,var(--czern),var(--czern-2))}
/* nagłówki: cieplejszy biel i mocniejszy kontrast */
h1,h2{color:var(--krem)}
h2 i,h1 i,h1 em{color:var(--zloto)}
/* złote linie i akcenty bardziej obecne */
.eyebrow:before,.znak:before{background:var(--zloto)}
/* karty i kadry: delikatna głębia */
.kafel,.dodatek,.krok,.wariant,.przelacznik,.blog-karta,.dalszy{box-shadow:0 12px 34px rgba(0,0,0,.35)}
.kafel img,.mozaika img,.pasek-klatek img{box-shadow:0 18px 50px rgba(0,0,0,.5)}
/* cytaty i opinie: cieplejsze tło */
.cytat{background:linear-gradient(180deg,color-mix(in srgb,var(--zloto) 5%,transparent),transparent)}

/* przełączniki: stan widoczny od razu (bez dopisywania klasy z JS) */
.przelacznik:has(input:checked){border-color:var(--zloto);background:var(--czern-2)}
.przelacznik:has(input:checked) .suwak{background:var(--zloto)}
.przelacznik:has(input:checked) .suwak:after{transform:translateX(20px);background:var(--czern)}
.przelacznik input:focus-visible ~ .suwak{outline:2px solid var(--zloto);outline-offset:2px}
/* obowiązek informacyjny przy formularzu — zwinięty, żeby nie zasłaniał formularza */
.f-rodo-info{margin-top:12px;max-width:66ch;border-top:1px solid var(--linia);padding-top:12px}
.f-rodo-info summary{cursor:pointer;list-style:none;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--zloto)}
.f-rodo-info summary::-webkit-details-marker{display:none}
.f-rodo-info summary:after{content:' +';font-size:.8rem}
.f-rodo-info[open] summary:after{content:' –'}
.f-rodo-info p{font-size:.78rem;line-height:1.7;color:var(--tekst);margin:12px 0 0}
.f-rodo-info ul{margin:8px 0 0 20px;font-size:.78rem;line-height:1.7;color:var(--tekst)}
.f-rodo-info a{color:var(--zloto)}

/* ---------- opinie: dymki z wiadomości na burgundzie ---------- */
.czat{columns:2;column-gap:clamp(24px,3.4vw,52px);margin-top:44px;padding:clamp(26px,4.4vw,64px);border:1px solid var(--linia);
  background:radial-gradient(120% 90% at 50% 38%,#531527 0%,var(--czern-2) 58%,#320b15 100%)}
.dymek{break-inside:avoid;display:flex;margin:0 0 clamp(18px,2.4vw,32px)}
.dymek:nth-child(even){justify-content:flex-end}
.dymek img{width:min(100%,calc(var(--l) * 29px));height:auto;filter:drop-shadow(0 14px 22px rgba(18,3,8,.5))}
.czat-dalej{margin-top:28px;text-align:center}
@media(max-width:900px){
  .czat{columns:1;margin-left:-24px;margin-right:-24px;padding:24px 10px;border-left:0;border-right:0}
  .dymek img{width:min(96%,calc(var(--l) * 24px))}
}