/* ============================================================
   Baloniscianka - v0.2 "Podpis w papierze"
   Edytorski luksus (Cormorant Garamond + Jost, puder / atrament / mahoń)
   + papierowe rzemiosło: wycinanka, faktura papieru, podpis pisany piórem.
   ============================================================ */

:root{
  --bg:#F3DED6;
  --bg-soft:#FBF5F0;
  --bg-shell:#F7E8E1;
  --bg-deep:#EBCFC5;
  --ink:#1C1512;
  --ink-2:#2A201C;
  --mahon:#8E4A40;
  --mahon-deep:#6E3630;
  --muted:#5C4A42;
  --soft:#8A6F65;
  --faded:#9B7E73;
  --line:#E0C6BB;
  --line-soft:#E3CCC2;
  --gold:#C9A96B;
  --blush:#E7A79D;
  --blush-l:#EFC9BC;
  --sage:#C2CCB7;
  --butter:#F1DB8E;
  --cream:#FDF8F4;
  --serif:'Cormorant Garamond',Constantia,'Palatino Linotype',Georgia,serif;
  --sans:Jost,'Century Gothic',Candara,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-io:cubic-bezier(.65,0,.25,1);
  --paper:url('../assets/img/papier.webp?v=2');
  --head-h:78px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
html,body{margin:0}
body{
  background:var(--bg) var(--paper); background-blend-mode:multiply;
  color:var(--ink); font-family:var(--sans); font-weight:400;
  font-size:17px; line-height:1.65; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video,svg{max-width:100%; display:block}
a{color:inherit}
button{cursor:pointer; font-family:inherit; color:inherit}
:focus-visible{outline:2px solid var(--mahon); outline-offset:3px}
::selection{background:var(--mahon); color:var(--bg-soft)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.wrap{max-width:1200px; margin:0 auto; padding:0 28px}
@media (max-width:680px){ .wrap{padding:0 18px} }

/* ---------- przejścia między podstronami (View Transitions) ---------- */
@view-transition{navigation:auto}
.site-head{view-transition-name:site-head}
::view-transition-old(root){animation:vt-out .38s var(--ease-io) both}
::view-transition-new(root){animation:vt-in .55s var(--ease) both}
@keyframes vt-out{to{opacity:0; transform:translateY(-18px)}}
@keyframes vt-in{from{opacity:0; transform:translateY(26px)}}

/* ---------- typografia ---------- */
h1,h2,h3{font-family:var(--serif); font-weight:500; margin:0; text-wrap:balance; line-height:1.02; letter-spacing:-.015em}
h1{font-size:clamp(3rem,9.2vw,8.6rem)}
h2{font-size:clamp(2.4rem,5.6vw,5.1rem)}
h3{font-size:clamp(1.7rem,3vw,2.6rem)}
h1 em,h2 em,h3 em{font-style:italic; font-weight:400; color:var(--mahon)}
.lab{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--sans); font-weight:500; text-transform:uppercase;
  letter-spacing:.28em; font-size:.68rem; color:var(--soft);
}
.lab::before{content:""; width:26px; height:1px; background:currentColor; opacity:.7}
p{margin:0}
.lead{color:var(--muted); max-width:56ch; font-size:1.06rem}

/* słowa wjeżdżające spod maski (nagłówki z data-split) */
.split .w{display:inline-block; overflow:hidden; vertical-align:top; padding:0 .04em .12em; margin:0 -.04em -.12em}
.split .w>span{display:inline-block;}
.js .split .w>span{transform:translateY(105%); transition:transform 1.1s var(--ease)}
.split.in .w>span{transform:none}

/* ---------- przyciski ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:12px;
  padding:16px 30px; background:var(--ink); color:var(--bg-shell);
  border:1px solid var(--ink); border-radius:4px; letter-spacing:.16em; text-transform:uppercase;
  font-size:.72rem; font-weight:500; font-family:var(--sans); text-decoration:none; cursor:pointer;
  overflow:hidden; isolation:isolate;
  transition:color .35s ease, border-color .35s ease, transform .5s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--mahon);
  border-radius:inherit; transform:translateY(101%); transition:transform .5s var(--ease);
}
.btn:hover::before{transform:none}
.btn:hover{border-color:var(--mahon)}
.btn .arr{width:16px; height:16px; transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn.ghost{background:transparent; color:var(--ink); border-color:rgba(28,21,18,.3)}
.btn.ghost::before{background:var(--ink)}
.btn.ghost:hover{color:var(--bg-shell); border-color:var(--ink)}
.btn.light{background:var(--cream); color:var(--ink); border-color:var(--cream)}
.btn.light:hover{color:var(--cream)}
.btn.line-light{background:transparent; color:var(--cream); border-color:rgba(253,248,244,.5)}
.btn.line-light::before{background:var(--cream)}
.btn.line-light:hover{color:var(--ink); border-color:var(--cream)}
.btn:disabled{opacity:.6; cursor:wait}

/* ---------- nagłówek ---------- */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background .4s ease, box-shadow .4s ease, transform .5s var(--ease);
}
.site-head .bar{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px 28px; max-width:1200px; margin:0 auto;
}
.site-head.scrolled,.site-head.solid{
  background:rgba(251,245,240,.97); box-shadow:0 1px 0 var(--line);
}
.site-head.hide{transform:translateY(-100%)}
.brand{display:flex; align-items:center; text-decoration:none}
.brand img{height:46px; width:auto; transition:filter .4s ease}
.site-nav{display:flex; gap:10px; align-items:center}
.site-nav a{
  text-decoration:none; font-size:.76rem; letter-spacing:.15em; text-transform:uppercase;
  font-weight:500; color:var(--ink); padding:11px 20px; border-radius:999px;
  border:1px solid rgba(28,21,18,.22); background:transparent;
  transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.site-nav a:hover{border-color:var(--mahon); color:var(--mahon)}
.site-nav a.active{background:var(--ink); color:var(--bg-shell); border-color:var(--ink)}
.site-head.on-hero:not(.scrolled) .brand img{filter:invert(1) brightness(1.4)}
.site-head.on-hero:not(.scrolled) .site-nav a{
  color:#FDF8F4; border-color:rgba(253,248,244,.34); background:rgba(253,248,244,.12);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.site-head.on-hero:not(.scrolled) .site-nav a:hover{background:rgba(253,248,244,.24); border-color:rgba(253,248,244,.65); color:#fff}
@media (max-width:680px){
  :root{--head-h:92px}
  .site-head .bar{padding:12px 14px; gap:10px; flex-direction:column; align-items:flex-start}
  .brand img{height:30px}
  .site-nav{gap:6px; max-width:100%; overflow-x:auto; scrollbar-width:none}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{font-size:.63rem; letter-spacing:.07em; white-space:nowrap; padding:8px 11px; flex:none}
}

/* ---------- podpis (SVG pisany piórem) ---------- */
.podpis{display:block; color:var(--ink)}
.podpis svg{width:100%; height:auto; overflow:visible}
.podpis .stalowka{fill:var(--mahon); transition:opacity .3s ease}

/* ---------- intro: podpis pisze się sam ---------- */
.intro{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  background:var(--bg) var(--paper); background-blend-mode:multiply;
  clip-path:inset(0 0 0 0);
  transition:clip-path 1s var(--ease-io);
}
.intro .podpis{width:min(760px,84vw)}
.intro-skip{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  background:none; border:0; font-size:.64rem; letter-spacing:.3em; text-transform:uppercase; color:var(--soft);
  padding:10px 14px; opacity:0; animation:fadeIn .6s 1.2s forwards;
}
.intro.out{clip-path:inset(0 0 100% 0)}
.intro.gone{display:none}
@keyframes fadeIn{to{opacity:1}}
html:not(.intro-on) .intro{display:none}

/* ============================================================
   HERO: pełny ekran wideo -> łuk (scroll)
   ============================================================ */
.hero{position:relative; height:165vh; background:var(--ink)}
.hero-sticky{position:sticky; top:0; height:100svh; overflow:hidden}
.hero-media{
  position:absolute; inset:0; overflow:hidden; will-change:clip-path;
  clip-path:inset(0 0 0 0 round 0);
}
/* rozmiar i położenie wideo liczy skrypt (kadr łuku na środek słońca); to tylko stan wyjściowy */
.hero-media video{position:absolute; left:0; top:0; width:100%; height:100%; max-width:none; object-fit:cover; transform-origin:0 0; will-change:transform}
.hero-media::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:var(--scrim,1);
  background:
    linear-gradient(180deg, rgba(28,21,18,.34) 0%, rgba(28,21,18,0) 30%),
    linear-gradient(8deg, rgba(28,21,18,.62) 0%, rgba(28,21,18,.26) 38%, rgba(28,21,18,0) 70%);
}
.media-chip{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:2; white-space:nowrap;
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--cream);
  background:rgba(28,21,18,.55); padding:7px 14px; border-radius:4px;
  opacity:var(--chip,0); transition:opacity .3s ease;
}
.hero-copy{
  position:absolute; left:0; right:0; bottom:0; z-index:3; color:var(--bg-shell);
  max-width:1200px; margin:0 auto; padding:0 28px 12vh;
  transform:translateY(calc(var(--p,0) * -26vh)); opacity:calc(1 - var(--p,0) * 3.4);
}
.hero-copy .lab{color:rgba(253,248,244,.85)}
.hero h1{max-width:11ch; margin-top:18px; color:#FDF8F4; line-height:.95}
.hero h1 em{color:var(--blush-l)}
.hero-copy p{margin-top:24px; max-width:44ch; color:rgba(253,248,244,.88); font-size:1.05rem}
.hero-cta{margin-top:32px; display:flex; gap:14px; flex-wrap:wrap}
.hero-scroll{
  position:absolute; right:28px; bottom:28px; z-index:3; color:rgba(253,248,244,.75);
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; writing-mode:vertical-rl;
  display:flex; align-items:center; gap:12px; text-decoration:none; opacity:calc(1 - var(--p,0) * 5);
}
.hero-scroll::after{content:""; width:1px; height:54px; background:linear-gradient(rgba(253,248,244,.7),rgba(253,248,244,0)); animation:drip 2.2s var(--ease-io) infinite}
@keyframes drip{0%{transform:scaleY(0); transform-origin:top} 45%{transform:scaleY(1); transform-origin:top} 55%{transform:scaleY(1); transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom}}

/* treść, która pojawia się obok łuku */
.motion-copy{
  position:absolute; z-index:3; left:max(28px, calc((100vw - 1200px) / 2 + 28px)); top:50%;
  width:min(40vw, 480px); color:var(--bg-shell);
  opacity:var(--mc,0); transform:translateY(calc(-50% + (1 - var(--mc,0)) * 40px));
}
.motion-copy .lab{color:#C9A99B}
.motion-copy h2{color:#FDF8F4; margin-top:18px; font-size:clamp(2.4rem,4.6vw,4.4rem)}
.motion-copy h2 em{color:var(--blush-l)}
.motion-copy p{margin-top:22px; color:rgba(247,232,225,.78); max-width:40ch}
.motion-copy .btn{margin-top:30px}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:760px){
  .hero{height:150vh}
  .hero-media video{object-position:68% 40%}
  .hero-copy{padding:0 18px 11vh}
  .hero-scroll{display:none}
  .motion-copy{left:18px; right:18px; width:auto; top:auto; bottom:6vh; transform:translateY(calc((1 - var(--mc,0)) * 40px))}
  .motion-copy h2{font-size:clamp(2.1rem,9vw,3rem); margin-top:12px}
  .motion-copy p{margin-top:14px; font-size:.95rem}
  .motion-copy .btn{display:none}
}

/* wejście hero po intro */
.js .hero-copy .lab,.js .hero-copy p,.js .hero-cta{opacity:0; transform:translateY(18px)}
.loaded .hero-copy .lab{animation:rise .9s .1s var(--ease) forwards}
.loaded .hero-copy p{animation:rise .9s .55s var(--ease) forwards}
.loaded .hero-cta{animation:rise .9s .7s var(--ease) forwards}
@keyframes rise{to{opacity:1; transform:none}}

/* ============================================================
   MARQUEE
   ============================================================ */
.mq{
  overflow:hidden; white-space:nowrap; padding:30px 0; background:var(--bg-soft);
  border-bottom:1px solid var(--line); user-select:none;
}
.mq-track{display:inline-flex; align-items:center; will-change:transform}
.mq-item{
  font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ink);
  font-size:clamp(2rem,4.6vw,4rem); line-height:1; padding:0 .35em; letter-spacing:-.01em;
}
.mq-item:nth-child(4n+3){font-style:normal; font-family:var(--sans); font-weight:400; text-transform:uppercase; letter-spacing:.18em; font-size:clamp(.9rem,1.6vw,1.25rem); color:var(--muted)}
.mq-dot{width:.5em; height:.5em; flex:none; margin:0 .35em; color:var(--mahon); font-size:clamp(2rem,4.6vw,4rem)}
.mq-dot svg{width:100%; height:100%}

/* ============================================================
   SEKCJE WSPÓLNE
   ============================================================ */
.sec{padding:130px 0}
.sec.alt{background:var(--bg-soft) var(--paper); background-blend-mode:multiply}
.sec-head{max-width:760px; margin-bottom:64px}
.sec-head h2{margin-top:20px}
.sec-head p{color:var(--muted); margin-top:22px; max-width:54ch; font-size:1.06rem}
@media (max-width:680px){ .sec{padding:88px 0} .sec-head{margin-bottom:40px} }

.js .rv{opacity:0; transform:translateY(34px); transition:opacity 1s ease, transform 1.1s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv.d1{transition-delay:.1s}
.rv.d2{transition-delay:.2s}
.rv.d3{transition-delay:.3s}

/* zdjęcie odsłaniane od dołu */
.js .reveal-img{clip-path:inset(100% 0 0 0); transition:clip-path 1.3s .15s var(--ease-io)}
.in>.reveal-img,.in .reveal-img{clip-path:inset(0 0 0 0)}

/* ============================================================
   KATEGORIE: przyklejane karty
   ============================================================ */
.stack{position:relative}
.card{
  position:sticky; top:calc(var(--head-h) + 18px + var(--i) * 16px);
  margin-bottom:9vh; border-radius:28px; overflow:hidden;
  background:var(--bg-soft) var(--paper); background-blend-mode:multiply;
  box-shadow:0 -1px 0 rgba(28,21,18,.04), 0 30px 60px -30px rgba(58,38,20,.35);
  transform-origin:50% 0; transform:scale(var(--cs,1)); will-change:transform;
}
.card:last-child{margin-bottom:0}
.card-in{position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); min-height:min(74vh,640px); text-decoration:none; color:inherit}
.card-in::after{content:""; position:absolute; inset:0; background:var(--ink); opacity:var(--cd,0); pointer-events:none; transition:opacity .1s linear}
.card-media{position:relative; overflow:hidden; --pad:clamp(18px,3vw,40px)}
.card-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease)}
/* zdjęcia realizacji zawsze w całości (życzenie Patrycji): odbitka z cieniem, bez przycinania */
.card-media img{
  position:absolute; inset:var(--pad); width:calc(100% - 2 * var(--pad)); height:calc(100% - 2 * var(--pad));
  object-fit:contain; filter:drop-shadow(0 22px 26px rgba(58,38,20,.28)); transition:transform 1.4s var(--ease);
}
.card:hover .card-media>img:first-child,.card:hover .card-media video{transform:scale(1.04)}
.card-body{padding:clamp(28px,4.4vw,64px); display:flex; flex-direction:column; justify-content:space-between; gap:28px}
.card-no{font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--mahon)}
.card-body h3{margin-top:10px; font-size:clamp(2.1rem,3.8vw,3.6rem); line-height:1}
.card-body p{color:var(--muted); max-width:44ch; margin-top:20px}
.card-foot{display:flex; align-items:flex-end; justify-content:space-between; gap:18px}
.card-thumbs{display:flex; gap:10px}
.card-thumbs img{width:clamp(64px,7vw,96px); aspect-ratio:3/4; object-fit:cover; border-radius:10px}
.card-more{
  display:inline-flex; align-items:center; gap:10px; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:500; white-space:nowrap; padding-bottom:4px; border-bottom:1px solid currentColor;
}
.card-more svg{width:15px; height:15px; transition:transform .4s var(--ease)}
.card:hover .card-more svg{transform:translateX(5px)}
.card.shell{background-color:var(--bg-shell)}
.card.deep{background-color:var(--bg-deep)}
.card.dark{background:var(--ink); color:var(--bg-shell)}
.card.dark .card-body p{color:rgba(247,232,225,.72)}
.card.dark h3 em,.card.dark .card-no{color:var(--blush-l)}
.card.flip .card-in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.card.flip .card-media{order:2}
@media (max-width:760px){
  .card{border-radius:22px; margin-bottom:5vh; top:calc(var(--head-h) + 10px + var(--i) * 10px)}
  .card-in,.card.flip .card-in{grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; min-height:0}
  .card.flip .card-media{order:0}
  .card-media{aspect-ratio:4/4.4; --pad:16px}
  .card-body{gap:18px}
  .card-body p{margin-top:12px; font-size:.95rem}
  .card-thumbs{display:none}
}
.cats-note{margin-top:60px; display:flex; justify-content:space-between; gap:22px; align-items:center; flex-wrap:wrap}
.cats-note p{color:var(--soft); font-size:.98rem; max-width:52ch}
.cats-note p i{font-family:var(--serif); color:var(--mahon); font-size:1.12em}

/* ============================================================
   PANEL SHINE (interaktywny)
   ============================================================ */
.shine-sec{background:var(--ink); color:var(--bg-shell); padding:120px 0 0; overflow:hidden}
.shine-head{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px; align-items:end}
.shine-head .lab{color:#C9A99B}
.shine-head h2{color:#FDF8F4; margin-top:18px}
.shine-head h2 em{color:var(--blush-l)}
.shine-head p{color:rgba(247,232,225,.76); max-width:46ch}
.shine-head small{display:block; margin-top:14px; font-size:.78rem; color:rgba(247,232,225,.5); letter-spacing:.02em}
.shine-stage{
  position:relative; margin-top:70px; height:clamp(340px,52vh,560px); touch-action:pan-y; cursor:crosshair;
}
.shine-stage canvas{position:absolute; inset:0; width:100%; height:100%}
.shine-hint{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; white-space:nowrap;
  font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,2.4vw,2rem); color:var(--cream);
  background:rgba(28,21,18,.55); padding:10px 26px; border-radius:4px;
  transition:opacity .6s ease, transform .6s var(--ease);
}
.shine-stage.touched .shine-hint{opacity:0; transform:translate(-50%,-40%)}
.shine-kolory{
  position:absolute; left:18px; bottom:18px; z-index:2; display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  max-width:calc(100% - 36px); cursor:default;
}
.shine-kolory button{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font:500 .68rem/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream); background:rgba(28,21,18,.62); border:1px solid rgba(253,248,244,.28);
  padding:9px 13px; border-radius:4px; transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.shine-kolory button:hover{border-color:rgba(253,248,244,.7)}
.shine-kolory button:focus-visible{outline:2px solid var(--cream); outline-offset:2px}
.shine-kolory button[aria-pressed="true"]{background:var(--cream); color:var(--ink); border-color:var(--cream)}
.shine-kolory i{width:11px; height:11px; border-radius:2px; box-shadow:inset 0 0 0 1px rgba(28,21,18,.25)}
.shine-kolory .sk-roz{background:linear-gradient(135deg,#FBE0E6,#E2A0B2 55%,#9E6072)}
.shine-kolory .sk-zlo{background:linear-gradient(135deg,#FFF0C8,#D9B56E 55%,#8A6832)}
.shine-kolory .sk-inne{
  font-family:var(--serif); font-style:italic; font-size:.98rem; color:var(--cream);
  background:rgba(28,21,18,.5); padding:5px 10px; border-radius:4px;
}
@media (max-width:520px){ .shine-kolory{left:12px; bottom:12px; gap:6px} .shine-kolory button{padding:8px 11px} }
@media (max-width:760px){ .shine-head{grid-template-columns:minmax(0,1fr); gap:18px} .shine-sec{padding-top:88px} .shine-stage{margin-top:44px} }

/* ============================================================
   JAK PRACUJĘ: film + kroki
   ============================================================ */
.proces-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(40px,6vw,90px); align-items:center}
.kroki{list-style:none; margin:44px 0 0; padding:0; counter-reset:k}
.krok button{
  display:grid; grid-template-columns:minmax(0,1fr); gap:4px; width:100%; text-align:left;
  background:none; border:0; padding:22px 0; border-top:1px solid var(--line); color:var(--ink);
  opacity:.45; transition:opacity .5s ease;
}
.krok:last-child button{border-bottom:1px solid var(--line)}
.krok.on button,.krok button:hover{opacity:1}
.krok-no{font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--mahon); line-height:1.2}
.krok-t{font-family:var(--serif); font-size:clamp(1.45rem,2.3vw,1.9rem); line-height:1.15}
.krok-p{color:var(--muted); font-size:.95rem; max-height:0; overflow:hidden; transition:max-height .7s var(--ease), margin .7s var(--ease)}
.krok.on .krok-p{max-height:120px; margin-top:6px}
.krok-bar{height:2px; background:var(--line); margin-top:14px; border-radius:2px; overflow:hidden}
.krok-bar i{display:block; height:100%; width:100%; background:var(--mahon); transform-origin:left; transform:scaleX(var(--kp,0))}
.proces-film{position:relative}
.film-ramka{
  position:relative; border-radius:30px; overflow:hidden; aspect-ratio:1;
  box-shadow:0 40px 80px -40px rgba(58,38,20,.45), 0 0 0 10px var(--bg-soft), 0 0 0 11px var(--line);
  background:var(--bg);
}
.film-ramka video{width:100%; height:100%; object-fit:cover}
.film-podpis{
  position:absolute; right:-10px; bottom:-26px; background:var(--ink); color:var(--cream);
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; padding:10px 18px; border-radius:4px;
  transform:rotate(-3deg);
}
@media (max-width:860px){
  .proces-grid{grid-template-columns:minmax(0,1fr)}
  .proces-film{order:-1; max-width:520px; margin:0 auto; width:100%}
  .kroki{margin-top:30px}
}

/* ============================================================
   KREATOR DEKORACJI
   ============================================================ */
.kreator{padding:130px 0; background:var(--bg-shell) var(--paper); background-blend-mode:multiply; border-top:1px solid var(--line)}
.kreator-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(28px,4vw,60px); align-items:start}
.kreator-scena{
  position:sticky; top:calc(var(--head-h) + 20px); border-radius:30px; overflow:hidden; aspect-ratio:1;
  background:#EBCFC5; box-shadow:0 40px 80px -40px rgba(58,38,20,.4);
}
.kreator-scena svg{width:100%; height:100%}
.kreator-scena .ks-tag{
  position:absolute; left:18px; top:18px; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  background:rgba(253,248,244,.85); padding:7px 14px; border-radius:4px; color:var(--muted);
}
.kreator-losuj{
  position:absolute; right:16px; top:14px; display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:var(--cream); border:0; border-radius:4px; padding:9px 16px 9px 12px;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; transition:background .3s ease;
}
.kreator-losuj:hover{background:var(--mahon)}
.kreator-losuj svg{width:18px; height:18px; transition:transform .6s var(--ease)}
.kreator-losuj:hover svg{transform:rotate(180deg)}
.kreator-panel{display:grid; gap:30px}
.kp-grupa{border:0; margin:0; padding:0; min-width:0}
.kp-grupa legend,.kp-label{
  padding:0; margin-bottom:14px; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; font-weight:500; color:var(--soft);
  display:flex; justify-content:space-between; width:100%;
}
.kp-grupa legend b{font-weight:500; color:var(--mahon); letter-spacing:.06em; text-transform:none; font-family:var(--serif); font-style:italic; font-size:1.05rem; margin-top:-4px}
.opcje{display:flex; flex-wrap:wrap; gap:9px}
.opcja{position:relative}
.opcja input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.opcja span{
  display:inline-flex; align-items:center; gap:10px; padding:11px 18px; border-radius:6px;
  border:1px solid #CDB0A4; background:var(--bg-soft); font-size:.9rem; transition:all .3s ease; user-select:none;
}
.opcja input:checked+span{background:var(--ink); color:var(--cream); border-color:var(--ink)}
.opcja input:focus-visible+span{outline:2px solid var(--mahon); outline-offset:2px}
.opcja:hover span{border-color:var(--mahon)}
.opcja .kropki{display:inline-flex}
.opcja .kropki i{width:14px; height:14px; border-radius:50%; margin-left:-4px; box-shadow:0 0 0 1.5px var(--bg-soft)}
.opcja .kropki i:first-child{margin-left:0}
.opcja input:checked+span .kropki i{box-shadow:0 0 0 1.5px var(--ink)}
.opcja .ico{width:18px; height:18px; flex:none}
.kp-pole input{
  width:100%; border:0; border-bottom:1.5px solid #CDB0A4; background:transparent; padding:8px 2px 10px;
  font-family:var(--serif); font-style:italic; font-size:2rem; color:var(--ink); transition:border-color .3s ease;
}
.kp-pole input:focus{outline:none; border-color:var(--mahon)}
.kp-cta{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.kreator-note{font-size:.84rem; color:var(--faded); font-style:italic}
@media (max-width:860px){
  .kreator{padding:88px 0}
  .kreator-grid{grid-template-columns:minmax(0,1fr)}
  .kreator-scena{position:relative; top:0; max-width:560px; width:100%; margin:0 auto}
}
/* animacje elementów kreatora (SVG) */
.k-pop{transform-box:fill-box; transform-origin:center; animation:kpop .7s var(--d,0s) cubic-bezier(.3,1.7,.5,1) both}
@keyframes kpop{from{transform:scale(0)}}
.k-wjazd{transform-box:fill-box; animation:kwjazd .9s var(--d,0s) var(--ease) both}
@keyframes kwjazd{from{transform:translateY(120%)}}
.k-slonce{transform-box:fill-box; transform-origin:center; animation:spin 16s linear infinite}
.k-blysk{animation:blysk 2.6s var(--d,0s) ease-in-out infinite}
@keyframes blysk{0%,100%{opacity:0} 50%{opacity:1}}
.k-neon{animation:neon 3.2s ease-in-out infinite}
@keyframes neon{0%,100%{opacity:.9} 48%{opacity:1} 50%{opacity:.7} 52%{opacity:1}}

/* ============================================================
   OPINIE
   ============================================================ */
.reviews{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:70px 64px; align-items:start}
.bw{margin:0; position:relative}
.bw:nth-child(even){margin-top:110px}
.bw .ph{
  border-radius:18px; overflow:hidden; aspect-ratio:9/16; max-width:340px; background:var(--bg-shell);
  transform:translateY(var(--py,0));
}
.bw .ph img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(var(--gs,1)) contrast(1.04);
}
.bw blockquote{
  position:relative; margin:28px 6px 0; font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(1.25rem,2.1vw,1.6rem); line-height:1.35; color:var(--ink); max-width:34ch;
}
.bw blockquote::before{
  content:"\201E"; position:absolute; left:-.1em; top:-.95em; font-size:4.4em; line-height:1; color:var(--mahon); opacity:.22; font-style:normal;
}
.bw figcaption{margin:16px 6px 0; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mahon); font-weight:500}
@media (max-width:700px){ .reviews{grid-template-columns:minmax(0,1fr); gap:60px} .bw:nth-child(even){margin-top:0} }
.reviews-more{margin-top:64px; color:var(--soft); font-size:.95rem}
.reviews-more a{color:var(--mahon)}
.offer-ig{margin-top:18px; color:var(--soft); font-size:.95rem}
.offer-ig a{color:var(--mahon)}

/* ============================================================
   O MNIE
   ============================================================ */
.about{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(40px,7vw,110px); align-items:center}
.about-photo{position:relative}
.about-photo>img{border-radius:999px 999px 18px 18px; aspect-ratio:3/4; object-fit:cover; width:100%}
.about-photo .cert{
  position:absolute; right:-34px; bottom:-14px; width:min(200px,50%);
  border-radius:12px; border:5px solid var(--bg-soft); box-shadow:0 22px 44px rgba(28,21,18,.22);
  transform:translateY(var(--cy,0)) rotate(3deg);
}
.about-txt h2{margin-top:20px}
.about-txt p{color:var(--muted); margin-top:18px; max-width:52ch}
.about-sig{margin-top:34px; width:min(330px,76%); color:var(--ink)}
@media (max-width:760px){
  .about{grid-template-columns:minmax(0,1fr); gap:48px}
  .about-photo{max-width:340px}
  .about-photo .cert{right:-8px; bottom:-16px}
}

/* ============================================================
   KONTAKT (pasek) + balony
   ============================================================ */
.contact-band{position:relative; overflow:hidden; background:var(--ink); color:var(--bg-shell); padding:140px 0}
.contact-band .inner{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:50px; align-items:end}
.contact-band .lab{color:#C9A99B}
.contact-band h2{color:#FDF8F4; margin-top:18px; max-width:13ch}
.contact-band h2 em{color:var(--blush-l)}
.c-links{display:flex; flex-direction:column; gap:16px}
.c-link{
  display:inline-flex; align-items:center; gap:16px; text-decoration:none; color:inherit;
  padding:6px 2px; min-height:44px; transition:color .25s ease, transform .35s var(--ease);
}
.c-link:hover{transform:translateX(6px)}
.c-link .ic{
  width:48px; height:48px; border-radius:50%; border:1px solid currentColor; display:flex;
  align-items:center; justify-content:center; flex:none; opacity:.9;
}
.c-link svg{width:19px; height:19px}
.c-link small{display:block; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; opacity:.62; font-weight:500}
.c-link b{font-weight:400; font-size:1.08rem; font-family:var(--sans)}
.contact-band .btn{margin-top:26px}
.balony{position:absolute; inset:0; z-index:1; pointer-events:none}
.balon{position:absolute; width:var(--w); left:var(--x); top:var(--y); transform:translate(var(--mx,0),var(--my,0))}
.balon svg{width:100%; height:auto; animation:unos var(--t,7s) ease-in-out infinite alternate; transform-origin:50% 100%}
@keyframes unos{from{transform:translateY(0) rotate(-3deg)} to{transform:translateY(-22px) rotate(3deg)}}
@media (max-width:760px){
  .contact-band{padding:100px 0}
  .contact-band .inner{grid-template-columns:minmax(0,1fr)}
  .balon:nth-child(-n+2){display:none}
  .balon{--w:48px !important}
}
/* jasny wariant (podstrony) */
.contact-band.light{background:var(--bg-shell); color:var(--ink); border-top:1px solid var(--line)}
.contact-band.light h2{color:var(--ink)}
.contact-band.light h2 em{color:var(--mahon)}
.contact-band.light .lab{color:var(--soft)}

/* ============================================================
   STOPKA
   ============================================================ */
.site-foot{background:#140F0D; color:#C9B6AC; padding:90px 0 40px; overflow:hidden}
.foot-sig{width:min(900px,92%); color:#EFDCD1; margin:0 auto 70px}
.site-foot .cols{display:flex; flex-wrap:wrap; gap:34px; justify-content:space-between; align-items:flex-start}
.site-foot p{font-size:.9rem; max-width:34ch}
.site-foot a{color:#EFDCD1; text-decoration:none}
.site-foot a:hover{color:var(--blush-l)}
.site-foot .links{display:flex; flex-direction:column; gap:10px; font-size:.9rem; align-items:flex-start}
.site-foot .links a{display:inline-flex; align-items:center; gap:10px}
.site-foot .links svg{width:16px; height:16px; flex:none; opacity:.85}
.site-foot .legal{
  margin-top:56px; padding-top:22px; border-top:1px solid rgba(247,232,225,.12);
  font-size:.74rem; color:#8E7A6F; display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between;
}
.site-foot .credit a{color:#EFDCD1; border-bottom:1px solid rgba(239,220,209,.3); padding-bottom:1px; transition:color .25s ease, border-color .25s ease}
.site-foot .credit a:hover{color:var(--blush-l); border-color:currentColor}
.to-top{background:none; border:0; color:#C9B6AC; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; padding:0}
.to-top:hover{color:var(--blush-l)}

/* ============================================================
   PODSTRONY - nagłówek
   ============================================================ */
.subpage-head{padding:calc(var(--head-h) + 90px) 0 50px; position:relative}
.subpage-head h1{max-width:12ch; font-size:clamp(3rem,8vw,7.4rem); margin-top:22px}
.subpage-head p{margin-top:26px}
.sub-sun{position:absolute; right:max(28px, calc((100vw - 1200px)/2 + 40px)); top:calc(var(--head-h) + 70px); width:clamp(90px,12vw,170px)}
.sub-sun svg{animation:spin 26s linear infinite}
@media (max-width:680px){ .subpage-head{padding-top:calc(var(--head-h) + 50px)} .sub-sun{top:calc(var(--head-h) + 24px); width:78px} }
/* strona 404: balonik zamiast słońca, lekko się unosi */
.sub-balon{position:absolute; right:max(28px, calc((100vw - 1200px)/2 + 60px)); top:calc(var(--head-h) + 50px); width:clamp(70px,9vw,120px)}
.sub-balon svg{animation:balonUnosi 4.5s ease-in-out infinite; filter:drop-shadow(0 14px 16px rgba(58,38,20,.22))}
@keyframes balonUnosi{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(3deg)}}
@media (max-width:680px){ .sub-balon{top:calc(var(--head-h) + 14px); width:56px} }
.err-cta{margin-top:34px; display:flex; flex-wrap:wrap; gap:14px}
/* drobna informacja pod formularzem */
.form-note{margin-top:14px; font-size:.74rem; line-height:1.5; color:var(--soft)}
.form-note a{color:inherit; border-bottom:1px solid var(--line)}
.form-note a:hover{color:var(--mahon); border-color:currentColor}
/* polityka prywatności: czytelny tekst ciągły */
.prose{max-width:68ch; color:var(--muted)}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem); color:var(--ink); margin:2.4em 0 .6em}
.prose h2:first-child{margin-top:0}
.prose p,.prose ul{margin-top:1em}
.prose ul{padding-left:1.2em}
.prose li{margin-top:.5em}
.prose b{color:var(--ink); font-weight:500}
.prose a{color:var(--mahon); border-bottom:1px solid var(--line)}
.prose a:hover{border-color:currentColor}
.prose .prose-date{margin-top:3em; font-size:.85rem; color:var(--soft)}

/* ============================================================
   OFERTA
   ============================================================ */
.cat-nav{
  position:sticky; top:var(--head-h); z-index:30; background:var(--bg); padding:14px 0;
  border-bottom:1px solid var(--line);
}
.chips{position:relative; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  position:relative; z-index:1; flex:none; border-radius:999px; padding:10px 18px;
  font-size:.86rem; text-decoration:none; color:var(--ink); transition:color .35s ease;
}
.chip.on{color:var(--cream)}
.chip-pill{position:absolute; z-index:0; top:0; height:100%; border-radius:999px; background:var(--ink); transition:left .5s var(--ease), width .5s var(--ease)}

.offer{padding:110px 0; scroll-margin-top:calc(var(--head-h) + 70px)}
.offer+.offer{border-top:1px solid var(--line)}
.offer-head{display:flex; align-items:flex-end; justify-content:space-between; gap:14px 26px; flex-wrap:wrap; margin-bottom:10px}
.offer-head .no{font-family:var(--serif); font-style:italic; color:var(--mahon); font-size:1.3rem; display:block}
.offer-head h2{font-size:clamp(2.4rem,5vw,4.4rem)}
.price{
  font-family:var(--sans); font-weight:500; letter-spacing:.14em; font-size:.78rem;
  color:var(--mahon); text-transform:uppercase; white-space:nowrap; padding:10px 16px; border-radius:4px;
  background:color-mix(in srgb, var(--mahon) 9%, transparent);
}
.offer-grid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(30px,5vw,70px); align-items:start; margin-top:36px}
@media (max-width:860px){ .offer-grid{grid-template-columns:minmax(0,1fr)} .offer{padding:80px 0} }

.slider{position:relative; border-radius:22px; overflow:hidden; background:var(--bg-soft) var(--paper); background-blend-mode:multiply; aspect-ratio:4/5; max-height:84vh; touch-action:pan-y; user-select:none; --pad:clamp(14px,2.2vw,28px)}
.slide{position:absolute; inset:0; cursor:zoom-in; clip-path:inset(0 0 0 100%); transition:clip-path 1s var(--ease-io); background:var(--bg-soft) var(--paper); background-blend-mode:multiply}
.slide.on{clip-path:inset(0 0 0 0); z-index:2}
.slide.was{clip-path:inset(0 0 0 0); z-index:1}
.slide.rev{clip-path:inset(0 100% 0 0)}
.slide.rev.on{clip-path:inset(0 0 0 0)}
.slide img{
  position:absolute; top:var(--pad); left:var(--pad); width:calc(100% - 2 * var(--pad)); height:calc(100% - var(--pad) - 68px);
  object-fit:contain; filter:drop-shadow(0 18px 24px rgba(58,38,20,.26)); transform:scale(1.03); transition:transform 1.6s var(--ease);
}
.slide.on img{transform:scale(1)}
.s-ui{position:absolute; left:16px; right:16px; bottom:16px; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:12px; pointer-events:none}
.s-count{
  font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--cream);
  background:rgba(28,21,18,.62); padding:4px 14px; border-radius:4px;
}
.s-count b{font-weight:500}
.s-arrs{display:flex; gap:8px; pointer-events:auto}
.s-arr{
  width:48px; height:48px; border-radius:50%; border:0; background:rgba(253,248,244,.92); color:var(--ink); box-shadow:0 6px 16px -8px rgba(58,38,20,.45);
  display:flex; align-items:center; justify-content:center; transition:background .3s ease, color .3s ease, transform .3s var(--ease);
}
.s-arr:hover{background:var(--ink); color:var(--cream)}
.s-arr:active{transform:scale(.94)}
.s-arr svg{width:18px; height:18px}
.s-prog{position:absolute; left:0; right:0; top:0; height:3px; z-index:3; background:rgba(28,21,18,.1)}
.s-prog i{display:block; height:100%; background:var(--mahon); width:var(--sp,0%); transition:width .8s var(--ease)}
.thumbs{display:flex; gap:8px; margin-top:12px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin}
.thumbs button{
  border:0; border-radius:10px; overflow:hidden; padding:0; background:none;
  flex:0 0 74px; aspect-ratio:1; opacity:.5; transition:opacity .3s, transform .3s var(--ease);
}
.thumbs button img{width:100%; height:100%; object-fit:cover}
.thumbs button.on{opacity:1; transform:translateY(-3px)}
.thumbs button:hover{opacity:1}

.offer-info h3{font-size:.7rem; font-family:var(--sans); font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--soft)}
.offer-info>p{color:var(--muted); margin-top:16px}
.offer-info ul{margin:22px 0 0; padding:0; list-style:none; color:var(--ink)}
.offer-info li{padding:12px 0 12px 28px; border-top:1px solid var(--line); position:relative}
.offer-info li:last-child{border-bottom:1px solid var(--line)}
.offer-info li::before{content:""; position:absolute; left:4px; top:21px; width:9px; height:9px; border-radius:50%; background:var(--blush)}
.offer-note{font-size:.9rem; color:var(--faded); font-style:italic; margin-top:20px; font-family:var(--serif); font-size:1.12rem}
.offer-info .btn{margin-top:28px}

/* panele shine na podstronie: slider jak w innych kategoriach (film + zdjęcia), mały panel z cekinami obok opisu */
.slide-wideo{cursor:default; display:flex; align-items:center; justify-content:center; padding:var(--pad) var(--pad) 68px}
.wideo-box{position:relative; height:100%; max-width:100%; aspect-ratio:4/5; border-radius:8px; overflow:hidden; filter:drop-shadow(0 18px 24px rgba(58,38,20,.26))}
.wideo-box video{width:100%; height:100%; object-fit:cover; display:block}
.slide-etykieta{position:absolute; left:10px; bottom:10px; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cream); background:rgba(28,21,18,.55); padding:5px 12px; border-radius:4px}
.thumbs button.wideo{position:relative}
.thumbs button.wideo::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-35%,-50%);
  border-style:solid; border-width:9px 0 9px 14px; border-color:transparent transparent transparent #fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
.offer-info .shine-mini{margin:24px 0 0; height:auto; aspect-ratio:4/3; border-radius:18px; overflow:hidden; background:var(--ink)}

/* ---------- lightbox ---------- */
.lb{
  position:fixed; inset:0; z-index:90; background:rgba(20,15,13,.95);
  display:flex; align-items:center; justify-content:center; padding:30px;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.lb.open{opacity:1; pointer-events:auto}
.lb img{max-width:min(1200px,92vw); max-height:86vh; object-fit:contain; border-radius:10px; transform:scale(.94); transition:transform .5s var(--ease)}
.lb.open img{transform:none}
.lb .lb-close{
  position:absolute; top:18px; right:18px; width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(247,232,225,.4); background:transparent; color:var(--bg-shell);
  display:flex; align-items:center; justify-content:center;
}
.lb .lb-close:hover{border-color:var(--bg-shell)}
.lb .s-arr{position:absolute; top:50%; transform:translateY(-50%); background:rgba(253,248,244,.1); color:var(--bg-shell)}
.lb .s-arr:hover{background:var(--cream); color:var(--ink)}
.lb .s-arr.prev{left:18px}
.lb .s-arr.next{right:18px}
.lb figcaption{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:#C9B6AC; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap}

/* ============================================================
   KONTAKT (podstrona)
   ============================================================ */
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(40px,6vw,90px); align-items:start}
@media (max-width:860px){ .contact-grid{grid-template-columns:minmax(0,1fr)} }
.contact-grid .c-links .c-link .ic{border-color:#C9A99B}
.contact-grid .c-links .c-link:hover{color:var(--mahon)}

.form{display:grid; gap:26px 22px; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.form .full{grid-column:1/-1}
.field{position:relative}
.field input,.field textarea{
  width:100%; border:0; border-bottom:1.5px solid #CDB0A4; border-radius:0; background:transparent;
  padding:26px 2px 10px; font:inherit; font-size:1.05rem; color:var(--ink); transition:border-color .3s ease;
}
.field textarea{min-height:130px; resize:vertical; line-height:1.5}
.field label{
  position:absolute; left:2px; top:26px; font-size:1.02rem; color:var(--soft); pointer-events:none;
  transform-origin:left top; transition:transform .35s var(--ease), color .35s ease;
}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--mahon)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{transform:translateY(-24px) scale(.72); color:var(--mahon); letter-spacing:.04em}
.field::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--mahon); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease)}
.field:focus-within::after{transform:scaleX(1)}
.okazje{grid-column:1/-1}
.okazje .kp-label{margin-bottom:12px}
.form-note{grid-column:1/-1; font-size:.8rem; color:var(--faded)}
.zdjecia{grid-column:1/-1}
.zdj-dodaj{
  display:flex; align-items:center; gap:14px; cursor:pointer; padding:18px 20px; border-radius:4px;
  border:1px dashed color-mix(in srgb, var(--mahon) 45%, transparent); color:var(--mahon);
  background:color-mix(in srgb, var(--mahon) 4%, transparent); transition:background .25s ease, border-color .25s ease;
}
.zdj-dodaj[hidden]{display:none}
.zdj-dodaj:hover{background:color-mix(in srgb, var(--mahon) 9%, transparent); border-color:var(--mahon)}
.zdj-dodaj:focus-within{outline:2px solid var(--mahon); outline-offset:2px}
.zdj-dodaj input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.zdj-dodaj svg{width:26px; height:26px; flex:none}
.zdj-dodaj span{font-size:.95rem; color:var(--ink)}
.zdj-lista{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.zdj-lista:not(:empty){margin-top:12px}
.zdj-lista li{position:relative; width:84px; height:84px; border-radius:6px; overflow:hidden; box-shadow:0 8px 18px -12px rgba(58,38,20,.5)}
.zdj-lista img{width:100%; height:100%; object-fit:cover; display:block}
.zdj-usun{
  position:absolute; top:4px; right:4px; width:26px; height:26px; border:0; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; background:rgba(28,21,18,.72); color:var(--cream);
}
.zdj-usun:hover{background:var(--mahon)}
.zdj-usun:focus-visible{outline:2px solid var(--cream); outline-offset:1px}
.zdj-usun svg{width:14px; height:14px}
.zdj-info{margin-top:8px; font-size:.85rem; color:var(--mahon)}
.zdj-info:empty{display:none}
.form-status{grid-column:1/-1; font-size:1.15rem; color:var(--mahon); min-height:1.4em; font-family:var(--serif); font-style:italic}
.hp{position:absolute; left:-9999px; opacity:0; pointer-events:none}
@media (max-width:560px){ .form{grid-template-columns:minmax(0,1fr)} }

.projekt-karta{
  grid-column:1/-1; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px; align-items:center;
  background:var(--bg-soft); border-radius:18px; padding:14px; box-shadow:0 18px 40px -26px rgba(58,38,20,.4);
}
.projekt-karta[hidden]{display:none}
.projekt-karta svg{width:120px; height:120px; border-radius:12px; background:#EBCFC5}
.projekt-karta svg.szeroki{width:176px; height:110px}
.projekt-karta a{display:inline-block; margin-top:6px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mahon)}
.projekt-karta small{display:block; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--soft); font-weight:500}
.projekt-karta b{display:block; font-family:var(--serif); font-size:1.35rem; font-weight:500; line-height:1.2; margin-top:4px}
.projekt-karta span{display:block; color:var(--muted); font-size:.88rem; margin-top:4px}
.projekt-karta button{background:none; border:0; color:var(--soft); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; padding:8px}
.projekt-karta button:hover{color:var(--mahon)}
@media (max-width:560px){ .projekt-karta{grid-template-columns:auto minmax(0,1fr)} .projekt-karta svg{width:84px; height:84px} .projekt-karta svg.szeroki{width:112px; height:70px} .projekt-karta button{grid-column:1/-1; justify-self:start} }

.range-note{
  margin-top:40px; padding:20px 24px; border-radius:16px;
  background:color-mix(in srgb, var(--mahon) 8%, transparent);
  color:var(--muted); font-family:var(--serif); font-style:italic; font-size:1.2rem; line-height:1.4;
}

/* wysłany balon */
.lot{position:fixed; z-index:95; width:90px; pointer-events:none; animation:lot 2.4s cubic-bezier(.45,0,.3,1) forwards}
@keyframes lot{0%{transform:translate(0,0) rotate(0) scale(.6); opacity:0} 12%{opacity:1; transform:translate(0,-20px) rotate(-4deg) scale(1)} 100%{transform:translate(60px,-110vh) rotate(8deg) scale(1)}}

/* FAQ */
.faq{margin-top:12px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;
  gap:18px; padding:20px 2px; font-family:var(--serif); font-weight:500; font-size:1.3rem; line-height:1.25;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .x{flex:none; width:30px; height:30px; border-radius:50%; position:relative; transition:transform .4s var(--ease), background .3s ease; background:var(--bg-soft)}
.faq summary .x::before,.faq summary .x::after{content:""; position:absolute; inset:50% auto auto 50%; translate:-50% -50%; background:var(--mahon)}
.faq summary .x::before{width:12px; height:1.5px}
.faq summary .x::after{width:1.5px; height:12px; transition:opacity .25s}
.faq details[open] summary .x{transform:rotate(90deg); background:var(--ink)}
.faq details[open] summary .x::before{background:var(--cream)}
.faq details[open] summary .x::after{opacity:0}
.faq .a{padding:0 44px 22px 2px; color:var(--muted); max-width:62ch}
.faq .a a{color:var(--mahon)}

/* ---------- dostępność / ruch ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important}
  .rv,.hero-copy .lab,.hero-copy p,.hero-cta{opacity:1 !important; transform:none !important}
  .split .w>span{transform:none !important}
  .reveal-img{clip-path:none !important}
  .hero{height:auto}
  .hero-sticky{position:relative; height:auto}
  .hero-media{position:relative; height:100svh}
  .hero-copy{opacity:1; transform:none; top:0; bottom:auto; height:100svh; display:flex; flex-direction:column; justify-content:flex-end}
  .motion-copy{position:relative; left:auto; top:auto; bottom:auto; width:auto; max-width:1200px; margin:0 auto; padding:90px 28px; opacity:1; transform:none}
  .hero-scroll{display:none}
  .card{position:relative; top:0; transform:none}
  .bw .ph img{filter:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* bez JavaScriptu: hero bez przypinania, treść o ruchu pod filmem */
html:not(.js) .hero{height:auto}
html:not(.js) .hero-sticky{position:relative; height:auto}
html:not(.js) .hero-media{position:relative; height:100svh}
html:not(.js) .hero-copy{top:0; bottom:auto; height:100svh; display:flex; flex-direction:column; justify-content:flex-end}
html:not(.js) .motion-copy{position:relative; left:auto; top:auto; bottom:auto; width:auto; max-width:1200px; margin:0 auto; padding:90px 28px; opacity:1; transform:none}
html:not(.js) .card{position:relative; top:0}
html:not(.js) .hero-scroll{display:none}

/* ============================================================
   PEŁNY KREATOR (/kreator)
   ============================================================ */
.kp-head{padding:calc(var(--head-h) + 64px) 0 36px}
.kp-head h1{font-size:clamp(2.6rem,6vw,5.4rem); max-width:13ch; margin-top:18px}
.kp-head p{margin-top:18px}
.kp{padding:0 0 120px}
.kp-grid{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:clamp(24px,3.4vw,50px); align-items:start}
.kp-scena{position:sticky; top:calc(var(--head-h) + 16px)}
.kp-scena-ramka{position:relative; border-radius:24px; overflow:hidden; aspect-ratio:16/10; background:#EBCFC5; box-shadow:0 40px 80px -40px rgba(58,38,20,.45)}
.kp-scena-ramka #kpSvg{width:100%; height:100%; display:block}
.kp-scena-ui{position:absolute; right:14px; top:12px; display:flex; gap:8px; align-items:center}
.kp-scena-ui .kreator-losuj{position:static}
.kp-reset{background:rgba(253,248,244,.9); border:0; border-radius:4px; padding:9px 12px; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.kp-reset:hover{color:var(--mahon)}
.kp-uwaga{margin-top:12px; font-size:.82rem; color:var(--faded); font-style:italic}
.kp-panel{background:var(--bg-soft) var(--paper); background-blend-mode:multiply; border-radius:24px; padding:6px 26px 30px; box-shadow:0 30px 60px -40px rgba(58,38,20,.35)}
.kp-kroki{display:flex; border-bottom:1px solid var(--line); margin:0 -12px 26px; overflow-x:auto; scrollbar-width:none}
.kp-kroki::-webkit-scrollbar{display:none}
.kp-kroki button{flex:1 0 auto; background:none; border:0; padding:17px 6px 15px; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500; color:var(--soft); position:relative}
.kp-kroki button::after{content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; background:var(--mahon); transform:scaleX(0); transition:transform .4s var(--ease)}
.kp-kroki button:hover{color:var(--ink)}
.kp-kroki button.on{color:var(--ink)}
.kp-kroki button.on::after{transform:none}
.kp-krok{display:grid; gap:28px; animation:kpIn .45s var(--ease)}
.kp-krok[hidden]{display:none}
@keyframes kpIn{from{opacity:0; transform:translateY(8px)}}
.kp-grupa{min-width:0}
.kp-label{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; margin-bottom:12px; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; font-weight:500; color:var(--soft)}
.kp-label small{letter-spacing:.01em; text-transform:none; font-size:.82rem; color:var(--faded); font-weight:400}
.kp-sciana{background:var(--bg-shell); border-radius:14px; padding:14px 16px 16px; margin-bottom:12px}
.kp-sciana-top{display:flex; justify-content:space-between; align-items:center}
.kp-sciana-top b{font-family:var(--serif); font-weight:500; font-size:1.3rem}
.kp-usun{background:none; border:0; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--soft)}
.kp-usun:hover{color:var(--mahon)}
.kp-mini{display:block; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faded); margin:12px 0 8px}
.kp-ksztalty,.kp-seg{gap:6px}
.kp-ksztalty .opcja span,.kp-seg .opcja span{padding:8px 12px; font-size:.84rem}
.kp-swatche{display:flex; flex-wrap:wrap; gap:9px}
.kp-sw{width:34px; height:34px; border-radius:50%; border:0; background:var(--k); box-shadow:inset 0 0 0 1px rgba(28,21,18,.16); transition:transform .25s var(--ease), box-shadow .25s}
.kp-sw.deski{background:repeating-linear-gradient(90deg,#5A4636 0 8px,#4A392C 8px 10px)}
.kp-sw:hover{transform:scale(1.08)}
.kp-sw.on{box-shadow:inset 0 0 0 1px rgba(28,21,18,.16), 0 0 0 3px var(--bg-shell), 0 0 0 5px var(--ink)}
.kp-dodaj{width:100%; border:1.5px dashed #CDB0A4; background:none; border-radius:12px; padding:14px; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); transition:border-color .3s, color .3s}
.kp-dodaj:hover{border-color:var(--mahon); color:var(--mahon)}
.kp-dodaj[hidden]{display:none}
.kp-palety{display:flex; flex-wrap:wrap; gap:8px}
.kp-paleta{display:inline-flex; align-items:center; gap:10px; border:1px solid #CDB0A4; background:var(--bg-soft); border-radius:6px; padding:9px 13px; font-size:.84rem; transition:border-color .3s}
.kp-paleta:hover{border-color:var(--mahon)}
.kp-paleta .kropki{display:inline-flex}
.kp-paleta .kropki i{width:13px; height:13px; border-radius:50%; margin-left:-4px; box-shadow:0 0 0 1.5px var(--bg-soft)}
.kp-paleta .kropki i:first-child{margin-left:0}
.kp-balony{display:grid; grid-template-columns:repeat(auto-fill,minmax(40px,1fr)); gap:12px 10px}
.kp-balon{position:relative; aspect-ratio:1/1.14; border:0; border-radius:50% 50% 50% 50% / 46% 46% 54% 54%; background:var(--k); box-shadow:inset -4px -6px 0 rgba(58,32,20,.12), inset 0 0 0 1px rgba(28,21,18,.12); transition:transform .25s var(--ease), box-shadow .25s}
.kp-balon::after{content:""; position:absolute; left:50%; bottom:-5px; width:8px; height:8px; margin-left:-4px; background:var(--k); clip-path:polygon(50% 0,100% 100%,0 100%)}
.kp-balon:hover{transform:translateY(-3px)}
.kp-balon.on{box-shadow:inset -4px -6px 0 rgba(58,32,20,.12), 0 0 0 3px var(--bg-soft), 0 0 0 5px var(--ink)}
.kp-balon b{position:absolute; inset:0; display:grid; place-items:center; font-size:.8rem; font-weight:500; color:#1C1512; text-shadow:0 0 6px #fff, 0 0 2px #fff}
#kpLicznik.pelny{color:var(--mahon); font-weight:500}
.kp-pole input{width:100%; border:0; border-bottom:1.5px solid #CDB0A4; background:transparent; padding:6px 2px 10px; font-family:var(--serif); font-style:italic; font-size:1.9rem; color:var(--ink); border-radius:0}
.kp-pole input.maly{font-family:var(--sans); font-style:normal; font-size:1rem; letter-spacing:.12em; text-transform:uppercase}
.kp-pole input.cyfra{font-family:var(--sans); font-style:normal; font-size:2rem; width:110px}
.kp-pole input:focus{outline:none; border-color:var(--mahon)}
.kp-podpowiedzi{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.kp-podpowiedz{background:color-mix(in srgb, var(--mahon) 8%, transparent); border:0; border-radius:4px; padding:6px 10px; font-size:.8rem; color:var(--mahon-deep)}
.kp-podpowiedz:hover{background:color-mix(in srgb, var(--mahon) 16%, transparent)}
.kp-przelaczniki{display:grid}
.kp-przelacznik{display:grid; grid-template-columns:46px minmax(0,1fr); gap:14px; align-items:center; padding:13px 2px; border-bottom:1px solid var(--line); cursor:pointer; position:relative}
.kp-przelacznik input{position:absolute; opacity:0; width:1px; height:1px}
.kp-suwak{width:46px; height:26px; border-radius:13px; background:#D8C2B8; position:relative; transition:background .3s}
.kp-suwak::after{content:""; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .35s var(--ease); box-shadow:0 2px 4px rgba(0,0,0,.15)}
.kp-przelacznik input:checked+.kp-suwak{background:var(--mahon)}
.kp-przelacznik input:checked+.kp-suwak::after{transform:translateX(20px)}
.kp-przelacznik input:focus-visible+.kp-suwak{outline:2px solid var(--mahon); outline-offset:2px}
.kp-przelacznik b{display:block; font-weight:500}
.kp-przelacznik small{display:block; color:var(--faded); font-size:.86rem}
.kp-nav{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.kp-podsumowanie{list-style:none; margin:0; padding:0}
.kp-podsumowanie li{padding:12px 0; border-bottom:1px solid var(--line)}
.kp-podsumowanie li span{display:block; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); margin-bottom:3px}
.kp-akcje{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.kp-link{background:none; border:0; border-bottom:1px solid currentColor; padding:4px 0; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.kp-link:hover{color:var(--mahon)}
.kreator .kreator-pelny{margin-top:4px}
/* kreator v2: własne kolory, kolejność ścianek, warianty dodatków */
.kp-sciana-top b small{font-family:var(--sans); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faded); margin-left:6px}
.kp-sciana-akcje{display:flex; gap:4px; align-items:center}
.kp-mini-btn{width:32px; height:32px; border-radius:6px; border:1px solid #CDB0A4; background:var(--bg-soft); font-size:1rem; line-height:1; color:var(--muted)}
.kp-mini-btn:hover{border-color:var(--mahon); color:var(--mahon)}
.kp-mini small{letter-spacing:.02em; text-transform:none; font-size:.78rem; margin-left:4px}
.kp-sw-wlasny{position:relative; width:34px; height:34px; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  background:var(--k, conic-gradient(#E7A79D,#F1DB8E,#A7BC9C,#BCD6E5,#D9C8EA,#E7A79D)); box-shadow:inset 0 0 0 1px rgba(28,21,18,.16); transition:transform .25s var(--ease), box-shadow .25s}
.kp-sw-wlasny:hover{transform:scale(1.08)}
.kp-sw-wlasny.on{box-shadow:inset 0 0 0 1px rgba(28,21,18,.16), 0 0 0 3px var(--bg-shell), 0 0 0 5px var(--ink)}
.kp-sw-wlasny input,.kp-balon-wlasny input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer}
.kp-sw-wlasny span,.kp-balon-wlasny span{font-size:1.1rem; font-weight:500; color:#1C1512; text-shadow:0 0 4px #fff; pointer-events:none}
.kp-balon-wlasny{display:grid; place-items:center; cursor:pointer; background:conic-gradient(#E7A79D,#F1DB8E,#A7BC9C,#BCD6E5,#D9C8EA,#E7A79D)}
.kp-balon-wlasny::after{background:#D9C8EA}
.kp-info{margin-top:10px; font-size:.84rem; color:var(--faded); line-height:1.5}
.kp-dodatek{border-bottom:1px solid var(--line)}
.kp-dodatek .kp-przelacznik{border-bottom:0}
.kp-warianty{display:grid; gap:10px; padding:0 0 16px 60px}
.kp-warianty[hidden]{display:none}
.kp-warianty .opcja span{padding:7px 12px; font-size:.82rem}
.kp-maly-input{display:grid; gap:4px}
.kp-maly-input[hidden]{display:none}
.kp-maly-input span{font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faded)}
.kp-maly-input input{border:0; border-bottom:1.5px solid #CDB0A4; background:transparent; padding:6px 2px; font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--ink); border-radius:0}
.kp-maly-input input:focus{outline:none; border-color:var(--mahon)}
.kp-pole input.maly-tekst{font-family:var(--sans); font-style:normal; font-size:1rem}
.kp-motywy .opcja span{padding:8px 12px; font-size:.84rem}
@media (max-width:560px){ .kp-warianty{padding-left:0} }
@media (max-width:860px){
  .kp-head{padding:calc(var(--head-h) + 34px) 0 22px}
  .kp-grid{grid-template-columns:minmax(0,1fr); gap:12px}
  .kp-scena{top:var(--head-h); z-index:20; margin:0 -18px; padding:8px 18px 8px; background:var(--bg) var(--paper); background-blend-mode:multiply; box-shadow:0 10px 16px -14px rgba(58,38,20,.35)}
  .kp-scena-ramka{border-radius:14px}
  .kp-scena-ui{right:8px; top:8px}
  .kp-uwaga{display:none}
  .kp-panel{padding:2px 16px 24px; border-radius:18px}
  .kp-kroki{margin:0 -6px 20px}
  .kp-kroki button{padding:15px 8px 13px; font-size:.6rem; letter-spacing:.12em}
}