/* ——— Fotografia kobieca · makieta „drugiego świata” ———
   Scena: klientka ogląda stronę wieczorem, sama, na telefonie — pokój ciemny,
   jedyne światło to zdjęcie. Stąd ciepła, prawie czarna kawa jako tło,
   kość słoniowa jako tekst i jeden miedziano-różany akcent (kolor skóry w cieniu). */
:root{
  --r:10px;                                   /* zaokrąglenie kadrów w galeriach */
  --bg:#151110; --bg-2:#1d1614; --bg-3:#2a1f1b;
  --ink:#efe6dc; --ink-soft:#b9aa9c; --accent:#cf977c; --accent-ink:#1a1210;
  --line:rgba(239,230,220,.14); --line-strong:rgba(239,230,220,.3);
  --err:#e08a78;

  --font-title:"Libre Bodoni","Libre Bodoni zastępcza","Bodoni Moda",Didot,"Times New Roman",serif;
  --font-body:"Hanken Grotesk","Hanken Grotesk zastępcza",system-ui,-apple-system,sans-serif;

  --s1:.5rem; --s2:1rem; --s3:1.75rem; --s4:2.5rem;
  --s5:clamp(2.4rem,4.5vw,3.8rem); --s6:clamp(4rem,9vw,7.5rem);
  --gutter:clamp(20px,5vw,72px); --maxw:1240px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; color-scheme:dark}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-weight:400; font-size:18px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{display:block; max-width:100%}
h1,h2,h3{font-family:var(--font-title); font-weight:400; margin:0; line-height:1.08; letter-spacing:-.005em; text-wrap:balance}
h1{font-size:clamp(2.5rem,5.6vw,4.9rem)}
h2{font-size:clamp(1.95rem,3.8vw,3.1rem)}
h3{font-size:1.4rem; line-height:1.2}
h1 em,h2 em,h3 em{font-style:italic; color:var(--accent)}
p{margin:0}
a{color:inherit}
::selection{background:var(--accent); color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:4px}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)}
section{padding-block:var(--s6)}
.label{font-size:.68rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft)}
.lead{font-size:clamp(1.15rem,1.6vw,1.35rem); font-weight:300; line-height:1.55; max-width:58ch; color:var(--ink)}
.prose{max-width:62ch}
.prose p{color:var(--ink-soft); margin-bottom:var(--s2)}
.prose p b{color:var(--ink); font-weight:500}
.soft{color:var(--ink-soft)}
.sec-head{display:flex; justify-content:space-between; align-items:end; gap:var(--s3); margin-bottom:var(--s5)}
.sec-head p{max-width:46ch; color:var(--ink-soft)}
hr.rule{border:0; border-top:1px solid var(--line); margin:0}

/* ——— NAV ——— */
.nav{
  position:fixed; inset:0 0 auto; z-index:30; display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); padding:1.5rem var(--gutter);
  transition:background .5s ease, box-shadow .5s ease;
}
.nav.is-stuck{background:rgba(21,17,16,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); padding-block:.95rem; box-shadow:0 1px 0 var(--line)}
.nav__mark{text-decoration:none; color:var(--ink); display:flex; flex-direction:column; line-height:1; white-space:nowrap}
.nav__mark b{font-family:var(--font-title); font-weight:400; font-size:1.15rem; letter-spacing:.02em}
.nav__mark small{font-size:.58rem; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-soft); margin-top:.4rem; font-weight:500}
.nav__links{display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.2rem)}
.nav__links a{
  font-size:.7rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); text-decoration:none;
  padding-bottom:4px; border-bottom:1px solid transparent; transition:border-color .4s ease, color .4s ease;
}
.nav__links a:hover{border-color:var(--ink)}
.nav__links a[aria-current="page"]{border-color:var(--accent)}
.nav__links a.is-minor{color:var(--ink-soft)}
.nav__links a.is-minor:hover{color:var(--ink)}
.burger{display:none; width:44px; height:44px; margin-right:-10px; background:none; border:0; padding:0; cursor:pointer; position:relative; z-index:41}
.burger span{position:absolute; left:11px; width:22px; height:1.5px; background:var(--ink); display:block;
  transition:transform .45s var(--ease), opacity .3s ease}
.burger span:nth-child(1){top:16px} .burger span:nth-child(2){top:22px} .burger span:nth-child(3){top:28px}
.nav.is-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.is-open .burger span:nth-child(2){opacity:0}
.nav.is-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ——— HERO ——— */
.hero{position:relative; height:100svh; min-height:600px; overflow:hidden; display:grid; isolation:isolate}
.hero__grid{position:relative; height:100%; display:grid; padding-top:calc(var(--s6) + 40px)}
.hero__grid[data-pos^="top-"]{align-items:start} .hero__grid[data-pos^="middle-"]{align-items:center} .hero__grid[data-pos^="bottom-"]{align-items:end}
.hero__grid[data-pos$="-left"]{justify-items:start} .hero__grid[data-pos$="-center"]{justify-items:center; text-align:center} .hero__grid[data-pos$="-right"]{justify-items:end; text-align:right}
.hero__grid[data-pos$="-center"] .hero__sub,.hero__grid[data-pos$="-center"] .hero__ctas{margin-inline:auto; justify-content:center}
.hero__grid[data-pos$="-right"] .hero__sub{margin-left:auto} .hero__grid[data-pos$="-right"] .hero__ctas{justify-content:flex-end}
.hero__slides{position:absolute; inset:0; z-index:-2}
.hero__slide{position:absolute; inset:0; opacity:0; transition:opacity 1.6s ease-in-out}
.hero__slide.is-on{opacity:1}
.hero__slide picture{display:contents}
.hero__slide img{--pos:50% 34%; width:100%; height:100%; object-fit:cover; object-position:var(--pos);
  transform:scale(1.06); transition:opacity 1.2s ease, filter 2.4s var(--ease), transform 9s ease-out}
.hero__slide.is-on img{transform:scale(1)}   /* każdy kadr powoli „odjeżdża” (zoom out) */
.dots{position:absolute; z-index:4; bottom:1.1rem; left:50%; transform:translateX(-50%); display:flex; gap:.6rem}
.dots button{width:26px; height:2px; border:0; padding:0; cursor:pointer; background:rgba(239,230,220,.35); transition:background .4s ease}
.dots button[aria-current="true"]{background:var(--accent)}
.hero__scrim{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(21,17,16,.8) 0%,rgba(21,17,16,.5) 34%,rgba(21,17,16,0) 56%),
    linear-gradient(180deg,rgba(21,17,16,.55) 0%,rgba(21,17,16,.05) 32%,rgba(21,17,16,.35) 62%,rgba(21,17,16,.92) 100%)}
.hero__body{position:relative; padding:0 var(--gutter) clamp(2.5rem,7vh,5rem); max-width:min(900px,100%);
  transition:opacity 1s ease .55s, transform 1.4s var(--ease) .55s}
.hero__body.is-swap{opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s ease}
.hero__body h1{margin-bottom:var(--s3); font-family:var(--font-title)}
.hero__body[style*="--title-size"] h1{font-size:var(--title-size)}
.hero__sub{font-family:var(--font-sub,inherit)}
.hero__sub{font-size:clamp(1.02rem,1.4vw,1.2rem); font-weight:300; color:rgba(239,230,220,.9); max-width:44ch; margin-bottom:var(--s4)}
.hero__ctas{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s4); align-items:center}
/* „zapalanie światła”: skrypt dodaje .is-dark przed pierwszym malowaniem i zdejmuje po załadowaniu zdjęcia */
.hero.is-dark .hero__slide.is-on img{opacity:0; filter:brightness(.15) blur(8px); transform:scale(1.06)}
.hero.is-dark .hero__body{opacity:0; transform:translateY(16px)}

/* ——— CTA ——— */
.cta{display:inline-block; font-family:var(--font-body); font-size:.74rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; text-decoration:none; cursor:pointer; transition:.45s var(--ease)}
.cta[data-style="underline"]{color:var(--ink); padding-bottom:7px; border-bottom:1px solid var(--accent)}
.cta[data-style="underline"]:hover{color:var(--accent); letter-spacing:.28em}
.cta[data-style="outline"]{color:var(--ink); border:1px solid var(--line-strong); padding:1em 2.2em}
.cta[data-style="outline"]:hover{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.cta[data-style="solid"]{color:var(--accent-ink); background:var(--accent); border:1px solid var(--accent); padding:1.05em 2.4em}
.cta[data-style="solid"]:hover{background:var(--ink); border-color:var(--ink); transform:translateY(-2px)}
.cta--quiet[data-style="underline"]{color:var(--ink-soft); border-color:var(--line-strong)}
.cta--quiet[data-style="underline"]:hover{color:var(--ink)}
button.cta{font-family:var(--font-body)}

/* ——— DWIE KOLUMNY ——— */
.split{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(280px,.85fr); gap:clamp(2rem,6vw,7rem); align-items:center}
.split--rev{grid-template-columns:minmax(280px,.85fr) minmax(0,1.05fr)}
.split h2{margin-bottom:var(--s3)}
.split .prose p{font-size:1.02rem}
.split .cta{margin-top:var(--s2)}
.fig{margin:0; position:relative}
.fig img{width:100%; aspect-ratio:var(--ar,4/5); object-fit:cover; border-radius:var(--r)}
.fig figcaption{margin-top:.8rem; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft)}

/* ——— WIERSZE WYRÓWNANE: równa wysokość w wierszu, naturalne proporcje kadrów ———
   figure dostaje --ar (szer/wys) z zbuduj.py; flex-basis ∝ proporcji, więc wiersz wypełnia się równo */
.just{--rowh:280px; --gap:clamp(8px,1.2vw,16px); display:flex; flex-wrap:wrap; gap:var(--gap)}
.just figure{margin:0; flex:calc(var(--ar) * 1000) 1 calc(var(--ar) * var(--rowh)); aspect-ratio:var(--ar); overflow:hidden; cursor:zoom-in; position:relative; border-radius:var(--r)}
.just::after{content:""; flex:1000000 1 0}     /* ostatni wiersz nie rozciąga się na siłę */
.just img{width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease), opacity .5s ease}
.just figure:hover img{transform:scale(1.03)}
.just figure[hidden]{display:none}
.just--big{--rowh:280px}
.just--fill::after{display:none}       /* małe zestawy: ostatni wiersz też wypełnia szerokość */
.just--gal{--rowh:230px}

/* ——— SIATKA EDYTORSKA (nieużywana na stronie głównej; zostaje dla sesji) ——— */
.ed{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(10px,1.6vw,22px)}
.ed figure{margin:0; overflow:hidden; cursor:zoom-in; border-radius:var(--r)}
.ed img{width:100%; height:100%; object-fit:cover; aspect-ratio:var(--ar,4/5); transition:transform 1.6s var(--ease), filter .8s ease}
.ed figure:hover img{transform:scale(1.03)}
.ed figure:nth-child(1){grid-column:1/6; --ar:4/5}
.ed figure:nth-child(2){grid-column:6/13; --ar:3/2; align-self:end}
.ed figure:nth-child(3){grid-column:1/8; --ar:3/2}
.ed figure:nth-child(4){grid-column:8/13; --ar:4/5}
.ed figure:nth-child(5){grid-column:1/5; --ar:4/5}
.ed figure:nth-child(6){grid-column:5/13; --ar:16/10}
.ed figure:nth-child(7){grid-column:1/13; --ar:21/9}

/* ——— BLEED: zdjęcie wychodzi poza kolumnę tekstu do krawędzi ekranu ——— */
:root{--bleed:calc(max(0px,(100vw - var(--maxw)) / 2) + var(--gutter))}
body{overflow-x:clip}
@media (min-width:1000px){
  .bleed-r{margin-right:calc(-1 * var(--bleed))}
  .bleed-l{margin-left:calc(-1 * var(--bleed))}
  .ed .bleed-x{margin-inline:calc(-1 * var(--bleed))}
  .bleed-l figcaption{margin-left:var(--bleed)}   /* podpis wraca do krawędzi treści */
}

/* ——— PROCES ——— */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3vw,3rem)}
.step{border-top:1px solid var(--line); padding-top:1.4rem}
.step__n{font-family:var(--font-title); font-style:italic; font-size:1.7rem; color:var(--accent); display:block; line-height:1; margin-bottom:.9rem}
.step h3{margin-bottom:.7rem}
.step p{color:var(--ink-soft); font-size:.98rem}

/* ——— PRZERYWNIK (szerokie zdjęcie) ——— */
.interlude{padding:0; height:clamp(360px,68vh,720px); position:relative; overflow:hidden}
.interlude img{width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%)}
.interlude__cap{position:absolute; left:var(--gutter); bottom:var(--s3); font-family:var(--font-title); font-style:italic;
  font-size:clamp(1.3rem,2.4vw,2rem); color:var(--ink); text-shadow:0 2px 30px rgba(0,0,0,.6); max-width:24ch}

/* ——— DYSKRECJA (cicha wstęga) ——— */
.quiet{background:var(--bg-2); text-align:center}
.quiet h2{margin:0 auto var(--s4); max-width:18ch}
.quiet ul{list-style:none; padding:0; margin:0 auto; max-width:660px; text-align:left}
.quiet li{padding:1.15rem 0; border-top:1px solid var(--line); color:var(--ink-soft); display:grid; grid-template-columns:22px 1fr; gap:1rem; align-items:start}
.quiet li:last-child{border-bottom:1px solid var(--line)}
.quiet li svg{width:20px; height:20px; margin-top:.3rem; fill:none; stroke:var(--accent); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.quiet li b{color:var(--ink); font-weight:500}

/* ——— OFERTA (wiersze, nie karty) ——— */
.rows{border-top:1px solid var(--line)}
.row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.8fr) auto; gap:clamp(1rem,3vw,3rem); align-items:baseline;
  padding:1.7rem 0; border-bottom:1px solid var(--line)}
.row h3{font-size:1.55rem}
.row p{color:var(--ink-soft); font-size:1rem}
.row ul{margin:.6rem 0 0; padding:0; list-style:none; color:var(--ink-soft); font-size:.95rem}
.row ul li{padding:.25rem 0}
.row ul li::before{content:"— "; color:var(--accent)}
.price{font-family:var(--font-title); font-size:1.4rem; white-space:nowrap; text-align:right}
.price small{display:block; font-family:var(--font-body); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-top:.3rem}
/* wartość do uzupełnienia przez fotografa — widoczna jako taka */
/* wartości do potwierdzenia: widoczne jak zwykły tekst, oznaczenie zostaje tylko w panelu (pointer-events wyłącza dymek title) */
.ph{color:inherit; border-bottom:0; cursor:inherit; font-style:inherit; pointer-events:none}
.note-mock{font-size:.82rem; color:var(--ink-soft); border:1px dashed var(--line-strong); padding:.9rem 1.2rem; margin-bottom:var(--s4); max-width:70ch}
.note-mock b{color:var(--accent); font-weight:500}

/* ——— OPINIE ——— */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(2rem,4vw,4.5rem)}
.quote{border-top:1px solid var(--line); padding-top:1.6rem; margin:0}
.quote p{font-family:var(--font-title); font-style:italic; font-size:clamp(1.2rem,1.7vw,1.45rem); line-height:1.4; text-wrap:pretty}
.quote footer{font-size:.66rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); margin-top:1.1rem}

/* ——— FAQ ——— */
.faq{border-top:1px solid var(--line); max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:2rem;
  padding:1.3rem 0; font-family:var(--font-title); font-size:clamp(1.15rem,1.6vw,1.4rem); line-height:1.3; transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary svg{flex:none; width:18px; height:18px; fill:none; stroke:var(--accent); stroke-width:1.4; transition:transform .5s var(--ease)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq__a{padding:0 0 1.6rem; color:var(--ink-soft); max-width:62ch}
.faq__a p+p{margin-top:.7rem}
.faq-group{margin-bottom:var(--s5)}
.faq-group h2{font-size:1.5rem; margin-bottom:var(--s3); color:var(--ink-soft)}

/* ——— FINAŁ ——— */
.finale{position:relative; padding:0; min-height:clamp(480px,80vh,760px); display:grid; place-items:center; text-align:center; overflow:hidden; isolation:isolate}
.finale img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 40%); z-index:-2}
.finale::after{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at center,rgba(21,17,16,.32),rgba(21,17,16,.78))}
.finale__body{padding:var(--s6) var(--gutter); max-width:640px}
.finale h2{margin-bottom:var(--s3)}
.finale p{color:var(--ink-soft); margin-bottom:var(--s4)}
.finale__contact{margin-top:var(--s4); font-size:.9rem; color:var(--ink-soft)}
.finale__contact a{text-decoration:none; color:var(--ink)}

/* ——— STOPKA ——— */
footer.site{border-top:1px solid var(--line); padding:var(--s5) 0}
.foot{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:var(--s4); align-items:start; font-size:.9rem; color:var(--ink-soft)}
.foot b{font-family:var(--font-title); font-weight:400; font-size:1.15rem; color:var(--ink); display:block; margin-bottom:.4rem}
.foot a{text-decoration:none; color:var(--ink-soft); transition:color .3s}
.foot a:hover{color:var(--ink)}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{padding:.15rem 0}
.foot .ig{display:inline-flex; align-items:center; gap:.5rem}
.foot .ig svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5}
.foot__bottom{margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}

/* ——— NAGŁÓWEK PODSTRONY ——— */
.page-head{padding-block:calc(var(--s6) + 64px) var(--s5)}
.page-head h1{margin-bottom:var(--s3); font-size:clamp(2.3rem,5vw,4.2rem)}
.page-head .lead{max-width:56ch}

/* ——— GALERIA ——— */
.filters{display:flex; flex-wrap:wrap; gap:1.2rem 2rem; margin-bottom:var(--s4); border-bottom:1px solid var(--line); padding-bottom:1.2rem}
.filters button{background:none; border:0; padding:0 0 4px; cursor:pointer; color:var(--ink-soft); font-family:var(--font-body);
  font-size:.72rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; border-bottom:1px solid transparent; transition:.35s}
.filters button:hover{color:var(--ink)}
.filters button[aria-pressed="true"]{color:var(--ink); border-color:var(--accent)}
.masonry{columns:3; column-gap:clamp(10px,1.6vw,22px)}
.masonry figure{margin:0 0 clamp(10px,1.6vw,22px); break-inside:avoid; cursor:zoom-in; overflow:hidden}
.masonry figure[hidden]{display:none}
.masonry img{width:100%; transition:transform 1.6s var(--ease)}
.masonry figure:hover img{transform:scale(1.025)}
.gal-count{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-top:var(--s3)}

/* ——— SESJE: rozkładówki edytorskie ———
   Każda sesja = okładka + dwa kadry towarzyszące + tytuł; naprzemiennie lewo/prawo.
   Ruch: wejście na scroll (.reveal), paralaksa okładki (--py z JS), hover rozsuwa kadry. */
.spreads{display:grid; gap:clamp(5rem,10vw,9rem)}
/* okładka (pion 4:5) wyznacza wysokość wiersza; tekst siedzi przy jej górnej krawędzi,
   a mozaika 2×2 rozciąga się do jej dolnej krawędzi (wiersz 1fr) — krawędzie zawsze się równają */
.spread{display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:auto 1fr; gap:clamp(12px,2vw,28px); align-items:start; text-decoration:none; color:inherit}
.spread__cover{grid-column:1/8; grid-row:1/3; margin:0; overflow:hidden; border-radius:var(--r); aspect-ratio:var(--car,4/5); justify-self:stretch; width:100%}
.spread__cover img{width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 30%);
  transform:translateY(var(--py,0px)) scale(1.06); transition:transform 1.8s var(--ease)}
.spread__text{grid-column:8/13; grid-row:1; padding-left:clamp(0px,1.5vw,20px); margin-top:-.35em}
.spread__text h2{font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:1.05; margin-bottom:.7rem; transition:color .5s ease}
.spread__text h2 em{font-style:italic; color:var(--accent)}
.spread__text .meta{font-size:.66rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:1rem}
.spread__text p{color:var(--ink-soft); font-size:1rem; max-width:34ch; margin-bottom:1.2rem}
.spread__text .cta{margin-top:.2rem}
.spread__side{grid-column:8/13; grid-row:2; align-self:end; display:grid; gap:var(--mgap,clamp(8px,1.2vw,14px)); padding-left:clamp(0px,1.5vw,20px)}
/* rząd mozaiki: dwa kadry o wspólnej wysokości, szerokości z proporcji (--ar) — bez cięcia na szerokość;
   skrypt dopasowuje wysokość rzędów i okładki tak, by dolne krawędzie się równały */
.spread__row{display:flex; gap:var(--mgap,clamp(8px,1.2vw,14px)); min-height:0}
.spread__row figure{margin:0; overflow:hidden; border-radius:var(--r); flex:calc(var(--ar) * 1000) 1 0; aspect-ratio:var(--ar); min-width:0}
.spread__row.is-fit figure{aspect-ratio:auto; height:100%}
.spread__row img{width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 25%); transform:scale(1.04); transition:transform 1.6s var(--ease)}
.spread--rev .spread__cover{grid-column:6/13}
.spread--rev .spread__text,.spread--rev .spread__side{grid-column:1/6; padding-left:0; padding-right:clamp(0px,1.5vw,20px)}
/* hover: okładka domyka zoom, kadry rozsuwają się, tytuł nabiera akcentu */
.spread:hover .spread__cover img{transform:translateY(var(--py,0px)) scale(1.0)}
.spread:hover .spread__row img{transform:scale(1)}
.spread:hover h2{color:var(--accent)}
.spread:focus-visible{outline:2px solid var(--accent); outline-offset:8px}
/* wejście na scroll: elementy z .reveal pojawiają się raz, z opóźnieniem --d */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease) var(--d,0s), transform 1.2s var(--ease) var(--d,0s)}
.reveal.is-in{opacity:1; transform:none}
.spread__row:nth-child(1) figure:nth-child(1){--d:.15s} .spread__row:nth-child(1) figure:nth-child(2){--d:.25s} .spread__row:nth-child(2) figure:nth-child(1){--d:.35s} .spread__row:nth-child(2) figure:nth-child(2){--d:.45s} .spread .spread__text{--d:.1s}

/* ——— SESJE (lista) ——— */
.sessions{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(2.2rem,4vw,3.6rem) clamp(1rem,2vw,1.6rem)}
.session{margin:0; text-decoration:none; color:inherit; display:block}
.session img{width:100%; aspect-ratio:4/5; border-radius:var(--r); object-fit:cover; object-position:var(--pos,50% 30%); transition:transform 1.6s var(--ease)}
.session:hover img{transform:scale(1.025)}
.session figure{margin:0; overflow:hidden}
.session h3{font-size:1.35rem; margin-top:1rem; transition:color .3s}
.session:hover h3{color:var(--accent)}
.session .meta{font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); margin-top:.5rem}
.session-nav{display:grid; grid-template-columns:1fr auto 1fr; gap:2rem; border-top:1px solid var(--line); padding-top:var(--s3); margin-top:var(--s5)}
.session-nav a{text-decoration:none; color:var(--ink-soft); font-size:.9rem}
.session-nav a b{display:block; font-family:var(--font-title); font-weight:400; font-size:1.3rem; color:var(--ink); margin-top:.3rem}
.session-nav a:hover b{color:var(--accent)}
.session-cover{padding-top:calc(var(--s6) + 64px); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,6rem); align-items:center}
.session-cover .fig img{border-radius:var(--r); aspect-ratio:3/4; object-fit:cover; object-position:var(--pos,50% 20%)}
.session-cover h1{font-size:clamp(2.4rem,5vw,4.4rem); margin-bottom:var(--s2)}
.session-cover .meta{font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:var(--s4)}
.session-cover .prose p{font-size:1.02rem}

/* ——— FORMULARZ ——— */
.contact{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr); gap:clamp(2.5rem,6vw,7rem); align-items:start}
.aside p{color:var(--ink-soft); font-size:.98rem; margin-bottom:var(--s3)}
.aside b{display:block; font-family:var(--font-title); font-weight:400; font-size:1.25rem; color:var(--ink); margin-bottom:.4rem}
.aside a{text-decoration:none; color:var(--ink)}
.aside ul{list-style:none; padding:0; margin:0 0 var(--s3)}
.aside li{padding:.35rem 0; border-top:1px solid var(--line); color:var(--ink-soft); font-size:.95rem}
.aside li:last-child{border-bottom:1px solid var(--line)}
.field{display:grid; gap:.45rem; margin-bottom:1.7rem; position:relative}
.field label{font-size:.66rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft)}
.field input,.field select,.field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line-strong); border-radius:0; color:var(--ink);
  font-family:var(--font-body); font-size:1.05rem; padding:.65rem 0; transition:border-color .3s, box-shadow .3s}
.field textarea{min-height:140px; resize:vertical; line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-bottom-color:var(--accent); box-shadow:0 1px 0 var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:rgba(185,170,156,.55)}
.field select{appearance:none; -webkit-appearance:none; padding-right:2rem; cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23cf977c' stroke-width='1.4'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") no-repeat right center}
.field select option{background:var(--bg-2); color:var(--ink)}
.field .err{display:none; font-size:.8rem; color:var(--err)}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-bottom-color:var(--err)}
.field.has-error .err{display:block}
.field--check{grid-template-columns:auto 1fr; align-items:start; gap:.8rem}
.field--check input{width:18px; height:18px; margin-top:.25rem; accent-color:var(--accent)}
.field--check label{font-size:.85rem; letter-spacing:0; text-transform:none; color:var(--ink-soft); line-height:1.5}
.field--check label a{color:var(--ink)}
.two-up{display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s3)}
.hp{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden}
.form__foot{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s2)}
.form__foot .soft{font-size:.85rem}
.sent{display:none; border-top:1px solid var(--accent); padding-top:var(--s3)}
.sent h3{margin-bottom:.6rem}
form.is-sent .form__body{display:none}
form.is-sent .sent{display:block}
button.cta:disabled{opacity:.5; cursor:wait; transform:none}

/* ——— STREFA KLIENTKI ——— */
.gate{max-width:440px; margin:0 auto; text-align:center; padding-block:var(--s5)}
.gate h1{font-size:clamp(2rem,4vw,3rem); margin-bottom:var(--s2)}
.gate p{color:var(--ink-soft); margin-bottom:var(--s4)}
.gate .field{text-align:left}
.gate__hint{margin-top:var(--s4); font-size:.85rem; color:var(--ink-soft)}
.gate__hint a{color:var(--ink)}

/* ——— O MNIE ——— */
.portrait-ph{aspect-ratio:4/5; border:1px dashed var(--line-strong); display:grid; place-items:center; text-align:center; padding:2rem; color:var(--ink-soft); font-size:.85rem}
.portrait-ph b{display:block; font-family:var(--font-title); font-weight:400; font-size:1.3rem; color:var(--ink); margin-bottom:.5rem}

/* ——— LIGHTBOX ——— */
.lb{position:fixed; inset:0; z-index:200; display:none; background:rgba(21,17,16,.985); opacity:1}
.lb.is-open{display:block}
.lb.is-closing{opacity:0; transition:opacity .28s ease}
.lb__stage{position:absolute; inset:0 0 156px; display:flex; align-items:center; justify-content:center; padding:64px clamp(12px,5vw,96px) 12px}
.lb__img{border-radius:6px; width:auto; height:auto; max-width:100%; max-height:calc(100svh - 156px - 76px); object-fit:contain; display:block; box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.lb__top{position:absolute; inset:0 0 auto; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:16px clamp(12px,3vw,26px); background:linear-gradient(rgba(21,17,16,.8),transparent)}
.lb__meta{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft)}
.lb__meta b{color:var(--ink); font-weight:500}
.lb__tools,.lb-actions{display:flex; gap:.4rem; align-items:center}
.lb__btn{width:42px; height:42px; display:grid; place-items:center; background:rgba(239,230,220,.06); border:1px solid var(--line);
  color:var(--ink); cursor:pointer; padding:0; transition:.3s var(--ease)}
.lb__btn:hover{background:rgba(239,230,220,.16); border-color:var(--line-strong)}
.lb__btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5}
.lb__nav{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:54px; height:54px; display:grid; place-items:center;
  background:rgba(21,17,16,.4); border:1px solid var(--line); color:var(--ink); cursor:pointer; transition:.3s; padding:0}
.lb__nav:hover{background:rgba(239,230,220,.14)}
.lb__nav:disabled{opacity:.25; cursor:default}
.lb__nav svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.3}
.lb__nav--prev{left:clamp(8px,2vw,22px)} .lb__nav--next{right:clamp(8px,2vw,22px)}
.lb__strip{position:absolute; inset:auto 0 0; height:118px; display:flex; gap:8px; align-items:center; overflow-x:auto;
  padding:0 clamp(12px,3vw,26px); background:linear-gradient(transparent,rgba(21,17,16,.9)); scrollbar-width:none}
.lb__strip::-webkit-scrollbar{display:none}
.lb__strip button{flex:none; width:104px; height:74px; padding:0; border:0; cursor:pointer; background:none; opacity:.4;
  transition:opacity .3s, outline-color .3s; outline:1px solid transparent; outline-offset:-1px; overflow:hidden; border-radius:4px}
.lb__strip button:hover{opacity:.8}
.lb__strip button[aria-current="true"]{opacity:1; outline-color:var(--accent)}
.lb__strip img{width:100%; height:100%; object-fit:cover; display:block}
.lb__cap{position:absolute; left:0; right:0; bottom:124px; text-align:center; z-index:3; font-size:.68rem; letter-spacing:.16em;
  color:var(--ink-soft); text-shadow:0 1px 10px rgba(0,0,0,.85); pointer-events:none; padding:0 1rem}
body.lb-open{overflow:hidden}

/* ——— RESPONSYWNOŚĆ ——— */
@media (max-width:1000px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .just{--rowh:220px}
  .quotes{grid-template-columns:1fr; gap:var(--s3)}
  .foot{grid-template-columns:1fr 1fr}
  .masonry{columns:2}
}
@media (max-width:820px){
  body{font-size:17px}
  .spread,.spread--rev{grid-template-columns:1fr; grid-template-rows:auto auto auto; gap:1.2rem}
  .spread__cover,.spread--rev .spread__cover{grid-column:1; grid-row:1; --car:4/5}
  .spread__text,.spread--rev .spread__text{grid-column:1; grid-row:2; padding:0}
  .spread__side,.spread--rev .spread__side{grid-column:1; grid-row:3; padding:0}
  .spread__text{margin-top:0}
  .spread__cover{height:auto !important; aspect-ratio:var(--car,4/5) !important} .spread__row{height:auto !important} .spread__row.is-fit figure{aspect-ratio:var(--ar); height:auto}
  .spreads{gap:clamp(4rem,12vw,6rem)}
  .nav__links{display:none}
  .burger{display:block}
  .nav.is-open{background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none; z-index:60}
  .nav.is-open .nav__links{display:flex; position:fixed; inset:0; height:100dvh; z-index:40; flex-direction:column; justify-content:center; align-items:center;
    gap:1.8rem; background:var(--bg); padding:var(--s6) var(--gutter)}
  .nav.is-open .nav__links a{font-family:var(--font-title); font-size:1.7rem; letter-spacing:.01em; text-transform:none; font-weight:400}
  .nav.is-open .nav__links a.is-minor{font-family:var(--font-body); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; margin-top:1rem}
  .split,.split--rev{grid-template-columns:1fr; gap:var(--s4)}
  .split--rev .fig{order:-1}
  .sec-head{flex-direction:column; align-items:start; gap:var(--s2)}
  .ed figure{grid-column:span 6 !important; --ar:4/5 !important}
  .ed figure:nth-child(3),.ed figure:nth-child(6),.ed figure:nth-child(7){grid-column:1/-1 !important; --ar:3/2 !important}
  .row{grid-template-columns:1fr; gap:.6rem}
  .price{text-align:left; margin-top:.4rem}
  .contact{grid-template-columns:1fr}
  .sessions{grid-template-columns:1fr}
  .session-cover{grid-template-columns:1fr; gap:var(--s4)}
  .sessions .session{--ar:3/2 !important}
  .hero{min-height:560px}
  .hero__slide img{--pos:50% 18%}
  .hero__grid[data-pos]{align-items:end; justify-items:start; text-align:left}
  .hero__grid[data-pos] .hero__sub,.hero__grid[data-pos] .hero__ctas{margin-inline:0; justify-content:flex-start}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .masonry{columns:1}
  .sessions{grid-template-columns:1fr}
  .just{--rowh:130px}
  .two-up{grid-template-columns:1fr}
  .lb__stage{inset:0 0 132px; padding:58px 8px 8px} .lb__img{max-height:calc(100svh - 132px - 66px)}
  .lb__strip{height:96px} .lb__strip button{width:82px; height:58px}
  .lb__nav{width:44px; height:44px}
  .lb__cap{bottom:102px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
  .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* Strefa klientki: pełnoekranowa brama jak w świecie ślubnym */
.lock{min-height:100svh; display:grid; place-items:center; padding:120px var(--gutter) var(--s6); position:relative}
.lock__bg{position:absolute; inset:0; z-index:0}
.lock__bg img{width:100%; height:100%; object-fit:cover; object-position:50% 35%}
.lock__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(rgba(21,17,16,.3),rgba(21,17,16,.7))}
.lock__card{position:relative; z-index:2; background:var(--bg-2); border:1px solid var(--line); padding:clamp(30px,4vw,52px); width:min(440px,100%); text-align:center; border-radius:var(--r); box-shadow:0 40px 100px -30px rgba(0,0,0,.7)}
.lock__card .label{display:block; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent)}
.lock__card h1{font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:.5rem}
.lock__card p{color:var(--ink-soft); font-size:.96rem; margin-bottom:var(--s3)}
.lock__card .field{text-align:left; margin-bottom:var(--s2)}
.lock__card .field__err{display:none; font-size:.8rem; color:var(--err)}
.lock__card .field.has-error .field__err{display:block}
.lock__hint{font-size:.8rem; color:var(--ink-soft); margin-top:var(--s2)}
.lock__hint a{color:var(--ink)}
.sk .sec-head{margin-bottom:var(--s4)}

/* FAQ: grupy pytań ze zdjęciem obok, naprzemiennie */
.faq-split{display:grid; grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr); gap:clamp(2rem,5vw,6rem); align-items:start; margin-bottom:var(--s6)}
.faq-split--rev{grid-template-columns:minmax(0,1.3fr) minmax(240px,.7fr)}
.faq-split--rev .faq-split__fig{order:2}
.faq-split__fig{position:sticky; top:calc(var(--nav-h,72px) + 24px)}
.faq-split__body h2{margin-bottom:var(--s3)}
.faq-split .faq{max-width:none}
@media (max-width:820px){.faq-split,.faq-split--rev{grid-template-columns:1fr} .faq-split__fig{position:static; order:0; max-width:420px}}

.lock--kobieca .lock__kroki{background:rgba(255,255,255,.07); border-top-color:rgba(255,255,255,.12)}
.lock--kobieca .lock__krok-n{color:var(--accent)}

/* telefon: więcej oddechu między kadrami */
@media (max-width:700px){.just{--gap:14px} .masonry{column-gap:14px} .masonry figure{margin-bottom:14px}}