/* Arkusz wersji E, wzięty ze zbudowanej strony z paczki.

   Uwaga na przyszłość: `ZRODLA/.../site.css` NIE jest pełnym arkuszem.
   Skrypt budujący dokłada do niego style i dopiero strona w
   `NABAKOWSKA_DO_WGRANIA_NA_ZENBOX` ma komplet. Wzięcie pliku ze źródeł
   kosztowało cały układ ekranu powitalnego: bez reguł `.hero__tex` tło
   rozpychało sekcję zamiast ją wypełniać, a treść spadała pod obraz.

   Plik jest kopią i nie wolno go poprawiać ręcznie — następna paczka podmieni
   go w całości. Nasze dodatki stoją w `wersja-e-dodatki.css`. */

/* =====================================================================
   nabakowska.pl · wersja E „Kino × Showroom" + podstrony (site.css)
   Część 1 = CSS strony głównej 1:1 z ../template.html. Część 2 (na dole) = komponenty podstron.
   Hero i ruch z Kina B (pełnoekranowy kadr cofający się do ramy, preloader, maski, Lenis),
   układ i pasma materiałów z Showroomu (gabloty, próbnik, tabliczki procesu na czarnym marmurze).
   Ciemne pasma w gorzkiej czekoladzie, akcent mosiężny. Marcellus + Jost (Marcellus od 2026-09-16, decyzja Agnieszki:
   Playfair z zawijasami kojarzyl sie ze strona z AI; Marcellus nie ma kursywy, wiec pochylenia w tytulach ida w mosiadz). Treść 1:1 ze stagingu.
   ===================================================================== */
:root {
  color-scheme: light;
  --stone: #F6F3EE; --stone-2: #EDE8E0; --ink: #1F1B18; --ink-2: #6B645C; --line: rgba(31,27,24,.12);
  --brass: #9C7A52; --brass-2: rgba(156,122,82,.55); --brass-light: #C9A97F; --brass-ink: #836240; --google: #FBBC04;
  --night: #2E1D19; --night-2: #432C26; --snow: #F1ECE4; --snow-2: rgba(241,236,228,.78); --hair: rgba(241,236,228,.18);
  --display: "Marcellus", "Times New Roman", Georgia, serif;
  --sans: "Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 4.5vw, 72px);
  --sh-md: 0 0 0 1px rgba(31,27,24,.05), 0 1px 1px -.5px rgba(31,27,24,.05), 0 3px 3px -1.5px rgba(31,27,24,.05), 0 6px 6px -3px rgba(31,27,24,.05), 0 12px 12px -6px rgba(31,27,24,.05), 0 24px 24px -12px rgba(31,27,24,.05);
  --ease: cubic-bezier(.22,.61,.36,1);
}
html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--stone); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, blockquote, ul, ol, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }
.caps { font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--brass-ink); }  /* ciemniejszy mosiadz: maly tekst musi miec 4,5:1 */
.dark .caps { color: var(--brass-light); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; line-height: 1.06; text-wrap: balance; }
h2 { font-size: clamp(32px, 4vw, 60px); }
h3 { font-size: clamp(22px, 1.9vw, 28px); }
p { max-width: 62ch; }
.muted { color: var(--ink-2); }
.dark .muted { color: var(--snow-2); }
.logo { display: block; height: 38px; width: auto; color: currentColor; }
.logo--pre { height: 46px; } .logo--foot { height: 36px; }
html.has-motion [data-reveal], html.has-motion [data-mask], html.has-motion [data-phead-title], html.has-motion [data-phead-line] { visibility: hidden; }
/* Gablota bez pustej ramki przed zdjeciem: `site.js` (wireZdjecia) chowa ramke, dopoki plik sie nie wczyta,
   i zdejmuje klase po wczytaniu. Animacja zamiast transition, bo ramki maja juz transition na transform. */
.czeka-na-zdjecie { opacity: 0 !important; }
.ze-zdjeciem { animation: zdjecie-wchodzi 240ms var(--ease) backwards; }  /* krotko: dluzsze wejscie odbieralo sie jako wolne ladowanie */
@keyframes zdjecie-wchodzi { from { opacity: 0; } to { opacity: 1; } }
[hidden] { display: none !important; }
.band__tex img { will-change: transform; }
.mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.mask > span { display: inline-block; will-change: transform; }

/* przyciski */
.btn { display: inline-flex; align-items: center; gap: 14px; height: 54px; padding: 0 26px; font-size: 12.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; border: 1px solid var(--ink); transition: background 240ms var(--ease), color 240ms var(--ease), border-color 240ms; }
/* Najazd: gorzka czekolada zamiast mosiadzu (Sylwia, 2026-09-15) */
.btn:hover { background: var(--night-2); border-color: var(--night-2); color: var(--stone); }
.btn--fill { background: var(--ink); color: var(--stone); }
.btn--fill:hover { background: var(--night-2); border-color: var(--night-2); color: var(--stone); }
.dark .btn, .hero .btn, .phead .btn { border-color: rgba(241,236,228,.5); color: var(--snow); }
.dark .btn:hover, .hero .btn:hover, .phead .btn:hover { background: var(--snow); color: var(--ink); border-color: var(--snow); }
.dark .btn--fill, .hero .btn--fill, .phead .btn--fill { background: var(--snow); color: var(--ink); border-color: var(--snow); }
.dark .btn--fill:hover, .hero .btn--fill:hover, .phead .btn--fill:hover { background: #fff; }
.act { display: inline-flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--brass-2); transition: border-color 200ms, color 200ms; }
.act span { transition: transform 260ms var(--ease); }
.act:hover { border-color: var(--brass); color: var(--brass-ink); }
.act:hover span { transform: translateX(5px); }
.dark .act { color: var(--snow); }
/* „Czytaj dalej" w „Kto za tym stoi" ma wygladac jak kazdy odnosnik (Sylwia, 2026-09-15): te same kapitaliki
   i mosiezna linia; strzalka w dol obraca sie po rozwinieciu. */
.act i { font-style: normal; display: inline-block; transition: transform 260ms var(--ease); }
.act:hover i { transform: translateY(3px); }
.act[aria-expanded="true"] i { transform: rotate(180deg); }
.act[aria-expanded="true"]:hover i { transform: rotate(180deg) translateY(3px); }

/* gablota */
.vitrine { position: relative; background: #fff; padding: 10px; box-shadow: var(--sh-md); }
.vitrine { display: grid; }
.vitrine > img { grid-area: 1 / 1; }
.vitrine figcaption { grid-area: 2 / 1; }
.vitrine::after { content: ""; grid-area: 1 / 1; margin: 12px; z-index: 1; border: 1px solid rgba(156,122,82,.6); pointer-events: none; }
.vitrine img { width: 100%; height: 100%; object-fit: cover; }
.vitrine figcaption { padding: 12px 4px 2px; font-size: 12.5px; color: var(--ink-2); display: flex; justify-content: space-between; gap: 12px; }

/* pasma materiałów */
.band { position: relative; isolation: isolate; overflow: hidden; }
.band__tex { position: absolute; inset: -10% 0; z-index: -2; }
.band__tex img { width: 100%; height: 100%; object-fit: cover; }
.band__scrim { position: absolute; inset: 0; z-index: -1; }
.band--soft .band__scrim { background: var(--stone); }  /* bez przebijajacej faktury: sam brandowy jasny */
.band--soft .band__tex { display: none; }
.band--dark { color: var(--snow); }
.band-tlo { display: block; }  /* owijka z kolorem poprzedniej sekcji pod kurtyna pasma, zaklada ja site.js */
/* Ciemne pasma maja wygladac jak hero: faktura przygaszona do polowy i ten sam gradient pod katem. */
.band--dark .band__tex img { opacity: .5; }
.band--dark .band__scrim { background: linear-gradient(165deg, rgba(46,29,25,.82), rgba(46,29,25,.94) 60%, rgba(67,44,38,.96)); }

/* preloader (Kino) */
.pre { position: fixed; inset: 0; z-index: 90; background: var(--night); color: var(--snow); display: grid; place-items: center; }
.pre__in { display: grid; gap: 18px; justify-items: center; }
.pre__bar { width: 160px; height: 1px; background: var(--hair); overflow: hidden; }
.pre__bar i { display: block; height: 100%; background: var(--snow); transform-origin: left; transform: scaleX(0); }
html:not(.has-motion) .pre { display: none; }

/* nagłówek (Kino: przezroczysty na zdjęciu, jasny na kamieniu, szklany na ciemnym) */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 74px; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--snow); background: rgba(246,243,238,0); transition: background 320ms var(--ease), color 320ms var(--ease), box-shadow 320ms; }
.nav.is-solid { color: var(--ink); background: rgba(246,243,238,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.nav.on-dark { color: var(--snow); background: rgba(46,29,25,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--hair); }
.nav ul { display: flex; gap: 26px; }
.nav ul a { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .72; transition: opacity 200ms; }
.nav ul a:hover, .nav ul a[aria-current] { opacity: 1; }
.nav ul a[aria-current] { border-bottom: 1px solid var(--brass-light); padding-bottom: 3px; }
.nav.is-solid ul a[aria-current] { border-bottom-color: var(--brass); }
.nav__right { display: flex; align-items: center; justify-content: end; gap: 22px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
/* Instagram w oryginalnych barwach — ma byc widoczny, a nie zlewac sie z paskiem.
   Bez przyklejonego paska z boku, ktory zawadza przy przewijaniu (decyzja Sylwii). */
.nav__ig { display: inline-grid; place-items: center; width: 36px; height: 36px; opacity: .92; transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.nav__ig svg { width: 22px; height: 22px; display: block; }
.nav__ig:hover { opacity: 1; transform: translateY(-1px); }
.nav__right .cart { display: inline-grid; place-items: center; width: 36px; height: 36px; }
.nav__right .cart svg { width: 21px; height: 21px; }
.nav__book { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid currentColor; white-space: nowrap; transition: background 220ms, color 220ms; }
.nav__book:hover { background: var(--snow); color: var(--ink); }
.nav.is-solid .nav__book:hover { background: var(--ink); color: var(--stone); }
/* Menu zwija sie do burgera od 1200 px, nie od 1100: miedzy 1100 a 1280 siedem pozycji plus
   „Zaloguj sie” i „Wycen projekt” lamalo sie na dwie linie. Wyzej pasek jest ciasniejszy. */
/* Pasek jest ciasny: siedem pozycji, konto, Instagram, koszyk i przycisk. Nic nie moze sie lamac. */
.nav__right .account { white-space: nowrap; }
.nav ul a { white-space: nowrap; }
@media (max-width: 1560px) { .nav ul { gap: 20px; } .nav ul a { letter-spacing: .13em; } .nav__right { gap: 16px; } }
@media (max-width: 1400px) { .nav ul { gap: 15px; } .nav ul a { letter-spacing: .1em; font-size: 11.5px; } .nav__right { gap: 12px; } .nav__book { padding: 0 12px; font-size: 11.5px; letter-spacing: .12em; } .nav__ig { width: 32px; } .nav__right .cart { width: 32px; } }
@media (max-width: 1200px) { .nav { grid-template-columns: 1fr auto; } .nav nav, .nav__right .account { display: none; } }

/* menu mobilne (<=1100): czekoladowa kurtyna spod nagłówka, nagłówek zostaje na wierzchu */
.burger { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; color: inherit; }
.burger i { position: absolute; left: 11px; right: 11px; height: 1px; background: currentColor; transition: transform 380ms var(--ease); }
.burger i:nth-of-type(1) { top: 19px; }
.burger i:nth-of-type(2) { top: 25px; }
.nav.is-menu .burger i:nth-of-type(1) { transform: translateY(3px) rotate(45deg); }
.nav.is-menu .burger i:nth-of-type(2) { transform: translateY(-3px) rotate(-45deg); }
.nav.is-menu, .nav.is-menu.is-solid, .nav.is-menu.on-dark { color: var(--snow); background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

.menu { position: fixed; inset: 0; z-index: 45; color: var(--snow); background: var(--night); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 560ms var(--ease), visibility 0s linear 560ms; }
.menu::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 70% at 50% 0%, rgba(156,122,82,.28), transparent 62%), linear-gradient(180deg, rgba(67,44,38,.9), rgba(46,29,25,1) 58%); }
.menu.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 620ms var(--ease), visibility 0s; }
.menu__in { position: relative; min-height: 100%; max-width: 1360px; margin: 0 auto; padding: clamp(100px, 13vh, 124px) var(--gutter) clamp(28px, 5vh, 48px); display: grid; align-content: space-between; gap: clamp(28px, 5vh, 54px); }
.menu__nav { display: grid; }
.menu__nav a { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 16px; padding: clamp(10px, 1.7vh, 17px) 0; border-bottom: 1px solid var(--hair); transition: color 220ms var(--ease); }
.menu__nav a:first-child { border-top: 1px solid var(--hair); }
.menu__n { font-size: 11px; font-weight: 500; letter-spacing: .22em; color: var(--brass-light); opacity: .8; }
.menu__t { font-family: var(--display); font-size: clamp(28px, 7.4vw, 46px); line-height: 1.08; }
.menu__nav a[aria-current] { color: var(--brass-light); }
.menu__nav a[aria-current] .menu__n { opacity: 1; }
.menu__foot { display: grid; gap: 22px; justify-items: start; }
.menu__foot .btn { justify-content: space-between; width: 100%; max-width: 380px; }
.menu__links { display: flex; gap: 26px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--snow-2); }
.menu__links a:hover { color: var(--snow); }
.menu__contact { display: grid; gap: 5px; font-style: normal; font-size: 14px; color: var(--snow-2); }
.menu__contact a:hover { color: var(--brass-light); }
.menu__nav a, .menu__foot > * { opacity: 0; transform: translateY(16px); transition: opacity 420ms var(--ease), transform 520ms var(--ease); }
.menu.is-open .menu__nav a, .menu.is-open .menu__foot > * { opacity: 1; transform: none; transition-delay: calc(180ms + var(--i, 0) * 52ms); }
html.menu-open, html.menu-open body, html.gal-open, html.gal-open body { overflow: hidden; }
@media (max-width: 1200px) { .burger { display: block; } }
@media (min-width: 1201px) { .menu { display: none; } }
@media (max-width: 640px) { .nav__book { display: none; } }
@media (min-width: 641px) and (max-width: 1200px) { .menu__t { font-size: 34px; } .menu__nav a { padding: 12px 0; } .menu__in { padding-top: 112px; } }
@media (min-width: 641px) and (max-width: 1200px) and (max-height: 820px) { .menu__t { font-size: 28px; } .menu__nav a { padding: 9px 0; } .menu__in { padding-top: 96px; gap: 24px; } }
@media (max-width: 1200px) and (max-height: 760px) {
  .menu__in { padding-top: 88px; gap: 20px; }
  .menu__nav a { padding: 7px 0; gap: 14px; }
  .menu__t { font-size: 25px; }
  .menu__foot { gap: 15px; }
  .menu__foot .btn { height: 48px; }
  .menu__contact { font-size: 13px; gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu, .menu.is-open { transition: none; }
  .menu__nav a, .menu__foot > *, .menu.is-open .menu__nav a, .menu.is-open .menu__foot > * { transition: none; transform: none; opacity: 1; }
  .burger i { transition: none; }
}

/* hero (Kino B): kadr na cały ekran, przy scrollu cofa się do ramy */
.hero { position: relative; height: 100svh; min-height: 620px; background: var(--night); overflow: hidden; }
.hero__img { position: absolute; inset: 0; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.08); }
.hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(46,29,25,.82) 0%, rgba(46,29,25,.3) 45%, rgba(46,29,25,.14) 100%); }
.hero__content { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(36px, 6vh, 80px); color: var(--snow); display: grid; gap: 24px; }
.hero__content .caps { color: var(--brass-light); }
.hero h1 { font-size: clamp(40px, 6.6vw, 104px); max-width: 12ch; }
.hero h1 em { font-style: normal; color: var(--brass-light); }   /* Marcellus bez kursywy: akcent mosiadzem */
.hero__lead { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: rgba(241,236,228,.86); max-width: 46ch; }
.hero__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__cue { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(241,236,228,.6); }
.hero__cue i { width: 56px; height: 1px; background: rgba(241,236,228,.5); overflow: hidden; position: relative; }
.hero__cue i::after { content: ""; position: absolute; inset: 0; background: var(--snow); transform: translateX(-100%); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateX(-100%); } 60% { transform: translateX(0); } 100% { transform: translateX(100%); } }
.hero__cap { position: absolute; left: 7%; right: 7%; bottom: 4.5%; display: flex; justify-content: space-between; color: var(--snow-2); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: 0; visibility: hidden; }
html:not(.has-motion) .hero__cap { display: none; }
@media (max-width: 899px) { .hero__cta { display: grid; width: 100%; } .hero__cta .btn { justify-content: space-between; } .hero__cue { display: none; } }

/* fakty + próbnik (Showroom) */
.facts { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Zejscie brazu spod paska liczb w jasna sekcje. Gradient, nie cien: dziesiec przystankow, zeby nie
   bylo widac krawedzi. Warstwa nie kurczy sie przy przewijaniu, tylko odjezdza w gore i gasnie
   (site.js), wiec gradient zachowuje ksztalt. Gorny odstep sekcji rowna sie wysokosci warstwy,
   dzieki czemu braz nigdy nie wchodzi na naglowek. */
.about { position: relative; }
.about > .wrap { position: relative; z-index: 1; }
.zejscie { position: absolute; left: 0; right: 0; top: 0; height: clamp(220px, 30vh, 380px); z-index: 0;
  pointer-events: none; will-change: transform, opacity;
  background: linear-gradient(180deg,
    rgba(46,29,25,.96) 0%, rgba(46,29,25,.92) 12%, rgba(46,29,25,.82) 24%, rgba(46,29,25,.67) 36%,
    rgba(46,29,25,.50) 48%, rgba(46,29,25,.34) 60%, rgba(46,29,25,.20) 72%, rgba(46,29,25,.09) 84%,
    rgba(46,29,25,.03) 93%, rgba(46,29,25,0) 100%); }
.facts .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts .wrap > div { padding: 18px 20px; display: grid; gap: 4px; justify-items: center; text-align: center; border-left: 1px solid var(--line); }
.facts .wrap > div:first-child { border-left: 0; }
.facts strong { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.1vw, 31px); line-height: 1; }
/* Ocena 4,9: pięć gwiazdek, z czego ostatnia wypełniona w 90 procentach (Sylwia, 22.09). Warstwa
   spodnia to gwiazdki wygaszone, wierzchnia w kolorze Google jest przycięta do szerokości oceny. */
.facts .oceny { display: inline-block; white-space: nowrap; vertical-align: .06em;
  font-size: .58em; letter-spacing: .06em; color: var(--google); }
.facts .oceny i { font-style: normal; }
/* Ostatnia gwiazdka wypelniona w 88 procentach: gradient przyciety do ksztaltu znaku, wiec widac
   wygaszony czubek po prawej. Przy zwyklym przycieciu szerokosci calego paska roznica ginela. */
.facts .oceny__czesc { background: linear-gradient(90deg, var(--google) 68%, rgba(31,27,24,.3) 68%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.facts span { font-size: 13px; color: var(--ink-2); }
/* Na telefonie pasek zostaje jedna linia — cztery pozycje obok siebie, ale bez przewijania w poziomie:
   przewijanie w poziomie w srodku strony lapalo ruch palca i ucinalo skrajne pozycje. Zamiast tego
   ciasniejsza typografia; podpisy te same co na desktopie (Sylwia, 2026-09-08). */
@media (max-width: 899px) {
  .facts .wrap > div { padding: 14px 6px; gap: 3px; min-width: 0; }
  .facts strong, .facts span { overflow-wrap: anywhere; }
  .facts strong { font-size: clamp(15px, 4.4vw, 22px); line-height: 1.1; }
  .facts span { font-size: clamp(9.5px, 2.6vw, 13px); line-height: 1.3; }
}
.materials { padding: clamp(40px, 5.4vh, 64px) 0 0; }
.materials .wrap { display: grid; gap: 22px; }
.materials__head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.materials__head p { font-size: 14px; color: var(--ink-2); }
.materials__title { font-size: clamp(24px, 2.4vw, 36px); }
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.swatch { display: grid; gap: 10px; }
.swatch figure { aspect-ratio: 1; overflow: hidden; background: var(--stone-2); box-shadow: var(--sh-md); }
.swatch img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }

.swatch figcaption { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-2); }
.swatch figcaption b { font-weight: 500; color: var(--ink); }
@media (max-width: 899px) { .swatches { grid-template-columns: repeat(3, 1fr); } .swatch:nth-child(n+4) { display: none; } }

/* kto za tym stoi: zielony tynk, słowa zapalane scrollem (Kino) */
.about { padding: clamp(84px, 11vh, 124px) 0 clamp(48px, 6.2vh, 84px); }
/* Wiersz 2 na 1fr: portret siega przez oba wiersze, a nadmiar jego wysokosci idzie w dol, nie rozpycha
   odstepu miedzy srodtytulem a leadem. */
.about .wrap { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto 1fr; column-gap: 24px; row-gap: 40px; align-items: start; }
/* Uklad sekcji: tytul i portret u gory, pod nimi tekst w dwoch szpaltach,
   nizej „Pracownia” ze zdjeciem po lewej i tekstem po prawej. */
.about__intro { grid-column: 1 / span 7; grid-row: 1; display: grid; gap: 18px; align-content: start; }
/* Portret trzyma sie gory sekcji i siega przez oba wiersze, zeby lead mogl wrocic pod srodtytul (prosba Sylwii). */
.about__media { grid-column: 9 / span 4; grid-row: 1 / span 2; align-self: start; margin-top: clamp(18px, 3vh, 42px); }
/* -22px kasuje row-gap siatki (40px), zeby lead siedzial tuz pod srodtytulem, a nie w osobnym wierszu. */
.about__lead { grid-column: 1 / span 7; grid-row: 2; align-self: start; margin-top: -22px; }
.about__media img, .about__media2 img { height: auto; }
/* Dwie szpalty robi tu podzial tekstu, a nie siatka (Sylwia, 22.09). Przy siatce kazdy akapit zajmowal
   cala komorke i przy roznych dlugosciach robily sie puste pola; teraz tekst plynie i obie szpalty konczy
   na tej samej wysokosci. Cytat, rozwiniecie i przycisk stoja poza szpaltami, na calej szerokosci. */
.about__tekst { grid-column: 1 / -1; margin-top: clamp(8px, 2vh, 24px); }
/* Szpalty robi owijka `.about__kolumny`, a cytat, rozwiniecie i przycisk sa poza nia i ida przez cala
   szerokosc. Wczesniej wszystko siedzialo w jednej kolumnie z `column-span`, przez co cytat nachodzil
   na tekst i szpalty konczyly sie na roznych wysokosciach (Sylwia, 22.09). */
.about__kolumny, .about__tekst > .fold { columns: 2; column-gap: clamp(32px, 5vw, 88px); }
.about__kolumny p, .about__tekst > .fold p { margin: 0 0 18px; break-inside: avoid; }  /* akapit nie dzieli sie miedzy szpalty: pojedyncze slowo na gorze drugiej szpalty wygladalo jak wdowa (Sylwia, 22.09) */
.about__kolumny p:last-child, .about__tekst > .fold p:last-child { margin-bottom: 0; }
.about__tekst > .about__cytat { margin: clamp(18px, 2.6vh, 28px) 0; }
.about__tekst > .about__wiecej { margin-top: clamp(14px, 2vh, 22px); }
.about__tekst p { max-width: none; }
/* Blok „Pracownia" ma wlasna siatke, zeby na telefonie kolejnosc byla srodtytul -> zdjecie -> tekst,
   tak samo jak na gorze sekcji. Wiersz 1fr z tego samego powodu co w `.about .wrap`. */
.about__blok { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto 1fr;
  column-gap: 24px; row-gap: 40px; align-items: start; }
.about__intro2 { grid-column: 7 / span 6; grid-row: 1; }
.about__media2 { grid-column: 1 / span 5; grid-row: 1 / span 2; align-self: start; }
.about__pracownia { grid-column: 7 / span 6; grid-row: 2; margin-top: -22px; display: grid; gap: 20px; align-content: start; }
.about__text { display: grid; gap: 22px; }
/* Lead i akapit „Pracowni" w kroju displayowym — te same wartosci co w `template.html`. */
/* Drugi wiersz srodtytulu: tak Agnieszka przedstawia sie w bio, mniejszym pismem pod nazwiskiem. */
.about__intro .rola { margin-top: -8px; font-size: clamp(17px, 1.5vw, 22px); color: var(--ink-2); }
/* Cytat z opinii: wyciagniety z rozwiniecia, bo to najmocniejszy dowod w tej sekcji. */
.about__cytat { grid-column: 1 / -1; padding-left: 18px; border-left: 1px solid var(--brass-2, rgba(156,122,82,.45)); font-family: var(--display); color: var(--ink); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.35; }
.about__zasada { font-family: var(--display); color: var(--ink); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.35; padding-top: 6px; }
.about__lead p.big, .about__pracownia p.big { font-family: var(--display); color: var(--ink); font-size: clamp(21px, 2vw, 30px); line-height: 1.3; max-width: 34ch; }
.about__lead p.big .w, .about__pracownia p.big .w { display: inline-block; }
.about__tekst p, .about__pracownia p:not(.big) { color: var(--ink-2); }
@media (max-width: 899px) { .about__intro, .about__text, .about__media, .about__lead, .about__blok, .about__intro2, .about__media2,
  .about__tekst, .about__pracownia { grid-column: 1 / -1; grid-row: auto; }
  .about__blok { grid-template-columns: 1fr; grid-template-rows: none; }
  .about__pracownia { margin-top: -18px; }
  .about__media, .about__media2 { max-width: 420px; margin-top: 0; }
  .about__lead { margin-top: -18px; }
  .about__kolumny, .about__tekst > .fold { columns: 1; } }

/* proces: czarny marmur, tabliczki z detalami (Showroom) */
/* oferta na stronie glownej: trzy warianty w skrocie, zeby bylo wiadomo, co w ogole mozna zamowic.
   Wczesniej strona glowna nie linkowala do `/oferta` ani razu (uwaga Sylwii 2026-09-08). */
.oferta { padding: clamp(48px, 6.2vh, 84px) 0; background: var(--stone-2); }
.oferta .wrap { display: grid; gap: clamp(28px, 4vh, 44px); }
/* Wprowadzenie oferty w dwoch kolumnach na komputerze (Sylwia, 22.09): dwa akapity Agnieszki jeden pod
   drugim ciagnely sie przez pol ekranu, a prawa polowa zostawala pusta. Na telefonie zostaje jedna kolumna. */
.oferta__head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; row-gap: 14px; }
.oferta__head .caps, .oferta__head h2 { grid-column: 1 / -1; }
.oferta__head p { grid-column: span 6; color: var(--ink-2); max-width: 48ch; }
@media (max-width: 899px) { .oferta__head p { grid-column: 1 / -1; max-width: 62ch; } }
.oferta__karty { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.okarta { position: relative; display: grid; gap: 10px; align-content: start; padding: 26px 24px;
  background: var(--stone); border: 1px solid var(--hair); transition: border-color 300ms, transform 300ms var(--ease); }
.okarta:hover { border-color: var(--brass-2, rgba(156,122,82,.45)); }
.okarta__n { font-family: var(--display); font-size: 15px; letter-spacing: .2em; color: var(--brass-ink); }
.okarta h3 { font-size: clamp(20px, 1.7vw, 25px); }
.okarta p { font-size: 14.5px; color: var(--ink-2); }
.okarta--wybor { border-color: rgba(156,122,82,.5); }
/* Zdanie zamykajace kazda karte: ten sam rozmiar, mocniejszy kolor i lekki odstep, zeby czytalo sie
   jak podsumowanie wariantu (teksty Agnieszki, 22.09). */
.okarta__mocne { color: var(--ink); font-weight: 500; margin-top: 2px; }
.okarta__tag { justify-self: start; margin-top: 4px; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brass-ink); }
/* Karty sa linkami do wlasciwego wariantu na /oferta (Sylwia, 2026-09-15: „intuicyjnie ktos bedzie
   chcial kliknac"). Link obejmuje cala karte, a padding schodzi z <li> na <a>, zeby klikalne bylo wszystko. */
.okarta:has(.okarta__a) { padding: 0; }
.okarta__a { display: grid; gap: 10px; align-content: start; padding: 26px 24px; height: 100%; transition: transform 320ms var(--ease); }
.okarta:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.okarta { transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 300ms; }
.okarta__dalej { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); }
.okarta__dalej span { transition: transform 260ms var(--ease); }
.okarta:hover .okarta__dalej span { transform: translateX(5px); }
.okarta:hover h3 { color: var(--brass-ink); }
.okarta h3 { transition: color 200ms; }
.variant { scroll-margin-top: 90px; }
@media (max-width: 899px) { .oferta__karty { grid-template-columns: 1fr; gap: 14px; } .okarta { padding: 20px 18px; } .okarta:has(.okarta__a) { padding: 0; } .okarta__a { padding: 20px 18px; } }

/* Sekcja na podstronie oferty dzieli z tą na stronie glownej tylko liczby (`.budzet__liczby`). */
.budzet-pelny .wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: clamp(26px, 3.6vh, 40px); align-items: start; }
/* Przypiecie musi siedziec w osobnej owijce: dla elementu siatki przegladarka liczy przypiecie wzgledem
   calej siatki, wiec tytul wjezdzal na pasek z liczbami pod spodem (Sylwia, 22.09). Owijka jest elementem
   siatki i konczy sie razem z kolumna tekstu, a przypiety naglowek zatrzymuje sie na jej dole. */
.budzet-pelny__kolumna { grid-column: 1 / span 4; align-self: stretch; }  /* owijka siega do dolu kolumny tekstu, wiec przypiety naglowek ma po czym jechac */
.budzet-pelny__head { display: grid; gap: 14px; position: sticky; top: 96px; }
.budzet-pelny__head .claim { font-family: var(--display); color: var(--ink); font-size: clamp(19px, 1.7vw, 26px); line-height: 1.32; }
.budzet-pelny__tekst { grid-column: 6 / span 7; display: grid; gap: 14px; }
.budzet-pelny__tekst p { color: var(--ink-2); }
.budzet-pelny__tekst h3 { font-size: clamp(19px, 1.7vw, 25px); margin-top: 10px; }
.budzet-pelny .budzet__liczby { grid-column: 1 / -1; }
@media (max-width: 899px) { .budzet-pelny__kolumna, .budzet-pelny__tekst { grid-column: 1 / -1; } .budzet-pelny__head { position: static; } }

/* „Oferta przekracza mój budżet" (Agnieszka, 22.09): dalsza część oferty, nie osobna pozycja w menu.
   Tło strony zamiast `--stone-2` z sekcji oferty, więc różnica jest delikatna, a włosowa linia u góry
   pokazuje, że to nowy wątek. Liczby jak w pasku faktów, ale w kolumnach po dwie na telefonie. */
.budzet { padding: clamp(44px, 5.6vh, 76px) 0; background: var(--stone); border-top: 1px solid var(--line); }
.budzet .wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: clamp(26px, 3.6vh, 40px); align-items: start; }
.budzet__head { grid-column: 1 / span 5; display: grid; gap: 14px; }
.budzet__head h2 { max-width: 16ch; }
.budzet__head .claim { font-family: var(--display); color: var(--ink); font-size: clamp(19px, 1.7vw, 26px); line-height: 1.32; }
.budzet__tekst { grid-column: 7 / span 6; display: grid; gap: 14px; }
.budzet__tekst p { color: var(--ink-2); }
.budzet__dalej { margin-top: 2px; }
/* Dwa zdania Agnieszki, ktore maja wybrzmiec: srodkowe w kroju tytulowym miedzy kreskami, koncowe
   mocniejszym pismem pod calym wywodem (Sylwia, 22.09). */
.budzet__mocne { font-family: var(--display); color: var(--ink); font-size: clamp(20px, 1.9vw, 28px); line-height: 1.32;
  margin: clamp(10px, 1.6vh, 18px) 0; padding: clamp(16px, 2.2vh, 24px) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.budzet__koniec { color: var(--ink); font-weight: 500; }
.budzet__liczby { grid-column: 1 / -1; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); }
.budzet__liczby li { padding: 18px 20px; display: grid; gap: 4px; border-left: 1px solid var(--line); }
.budzet__liczby li:first-child { border-left: 0; }
.budzet__liczby strong { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.1; }
.budzet__liczby span { font-size: 13px; color: var(--ink-2); }
@media (max-width: 899px) {
  .budzet__head, .budzet__tekst { grid-column: 1 / -1; }
  .budzet__liczby { grid-template-columns: 1fr 1fr; }
  .budzet__liczby li:nth-child(odd) { border-left: 0; }
  .budzet__liczby li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

.process { padding: clamp(48px, 6.2vh, 84px) 0; }
.process .wrap { display: grid; gap: clamp(40px, 5vh, 64px); }
.process__head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(24px, 3vw, 44px); row-gap: 16px; align-items: start; }
/* Uklad jak w sekcji budzetowej (Sylwia, 22.09): po lewej sam tytul, po prawej oba akapity jeden pod drugim. */
.process__head > div { grid-column: 1 / -1; }
.process__head h2 { grid-column: 1 / span 5; grid-row: 2 / span 2; max-width: 14ch; }
.process__head p { grid-column: 7 / span 6; max-width: none; }
.process__head p:first-of-type { grid-row: 2; }
.process__head p:nth-of-type(2) { grid-row: 3; }
.plaques { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.plaque { display: grid; grid-template-columns: minmax(0, 1fr) clamp(112px, 13vw, 176px); gap: 24px; padding: 26px; border: 1px solid var(--hair); background: rgba(241,236,228,.04); transition: border-color 300ms, background 300ms; }
.plaque:hover { border-color: rgba(201,169,127,.55); background: rgba(241,236,228,.07); }
.plaque .t { display: grid; gap: 12px; align-content: start; }
.plaque .n { font-family: var(--display); font-size: 15px; letter-spacing: .2em; color: var(--brass-light); }
.plaque p { font-size: 14.5px; color: var(--snow-2); }
/* „Nie musisz": jedyne zdanie w etapie, ktore mowi wprost, czego klient dzieki temu unika. */
.plaque .niemusisz { margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(201,169,127,.28);
  color: var(--brass-light); font-size: 13.5px; }
/* Najmocniejszy konkret w sekcji: liczba stron dokumentacji. */
.plaque .ile { font-family: var(--display); font-weight: 400; font-size: 21px; color: var(--snow); }
.plaque figure { aspect-ratio: 3 / 4; overflow: hidden; align-self: start; border: 1px solid var(--hair); padding: 6px; }  /* kadr pionowy, skaluje sie z szerokoscia kolumny */
.plaque img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }

.process__bar { height: 1px; background: var(--hair); position: relative; overflow: hidden; }
.process__bar i { position: absolute; inset: 0; background: var(--brass-light); transform-origin: left; transform: scaleX(0); }
.process__bridge { font-family: var(--display); font-style: normal; font-size: clamp(20px, 2vw, 30px); color: var(--snow); padding-top: 8px; }
@media (max-width: 899px) {
  .process__head h2, .process__head p { grid-column: 1 / -1; grid-row: auto; }
  .plaques { grid-template-columns: 1fr; }
  .plaque { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .plaque figure { order: -1; aspect-ratio: 5 / 4; }
  /* Krok 01: zdjecie pionowe w kadrze poziomym ucinalo glowy (Sylwia, 16.09). Kadr trzyma sie gory,
     ucina nogi. Pozostale trzy zdjecia maja temat w srodku, wiec zostaja wysrodkowane. */
  .plaque:first-child img { object-position: 50% 4%; }
}

/* portfolio: gabloty */
.works { padding: clamp(48px, 6.2vh, 84px) 0; background: var(--stone-2); }
.works .wrap { display: grid; gap: clamp(36px, 5vh, 56px); }
.works__head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 16px; align-items: end; }
.works__head .t { grid-column: 1 / span 7; display: grid; gap: 16px; }
.works__head .t p { color: var(--ink-2); }
.works__head .act { grid-column: 10 / span 3; justify-self: end; }
.works__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Karta bywa odnosnikiem, a <a> jest domyslnie liniowe — wtedy siatka liczy wysokosc bez podpisu
   pod zdjeciem i tekst wychodzi poza sekcje. Wczesniej maskowal to duzy odstep miedzy sekcjami. */
.card { display: block; }
.card .vitrine { overflow: hidden; }
.card .vitrine img { height: auto; aspect-ratio: 5 / 4; transition: transform 1s var(--ease); }  /* height:auto — z height:100% siatka liczyla wiersz od samego zdjecia i podpis wychodzil poza sekcje */

.card .vitrine .tag { position: absolute; left: 24px; bottom: 24px; padding: 8px 12px; background: rgba(46,29,25,.72); color: var(--snow); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity 260ms var(--ease), transform 260ms var(--ease); }
.card:hover .tag { opacity: 1; transform: none; }
.card .txt { display: grid; gap: 4px; padding: 16px 4px 0; }
.card .txt span { font-size: 12.5px; color: var(--ink-2); letter-spacing: .06em; }
/* Podpis pod kaflem w jednej linii (Sylwia, 2026-09-16, po zmianie kroju na Marcellus). Rozmiar liczony
   z szerokosci kafla: 6,4% tej szerokosci, bo najdluzszy podpis („Sypialnia z ciemnym wezgłowiem") potrzebuje
   14,66 px na kazdy piksel pisma, a kafel oddaje szerokosc minus 8 px odstepu. Proporcja jest wtedy stala na kazdym
   ekranie: przy 1920 wychodzi 25 px (bylo 28 i sie lamalo), przy 900 na stronie glownej 15,7 px (bylo 22).
   Pierwsza linia font-size to zapas dla przegladarek bez jednostek cqw. Bez `white-space: nowrap`, zeby dluzszy
   podpis w przyszlosci zlamal sie, a nie zostal uciety. */
.card { container-type: inline-size; }
/* Podpis pod kaflem zawsze w jednej linii (Sylwia, 16.09: przy dwoch liniach kafelki ida nierowno).
   Rozmiar z szerokosci kafla, a nowrap to bezpiecznik: tytuly w pokoje.py trzymamy do 27 znakow. */
.card .txt h3 { font-size: clamp(16px, 1.7vw, 25px); font-size: clamp(14px, 6.4cqw, 25px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 899px) { .works__head .t, .works__head .act { grid-column: 1 / -1; } .works__head .act { justify-self: start; } .works__grid { grid-template-columns: 1fr; } }

/* opinie: dąb */
.voices { padding: clamp(48px, 6.2vh, 84px) 0; }
.voices .wrap { display: grid; gap: clamp(36px, 5vh, 56px); }
.voices__head { display: grid; gap: 14px; }
.voices__head p { color: var(--ink-2); }
.dark .voices__head p, .dark .works__head .t p, .dark .journal__head p, .dark .academy__text p, .dark .process__head p { color: var(--snow-2); }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Karta opinii dostaje mosiezna ramke od srodka — ten sam gest co w gablotach ze zdjeciami,
   dzieki czemu cytat nalezy do tej samej rodziny co kadry z realizacji. */
.quote { position: relative; background: rgba(255,255,255,.92); color: var(--ink); padding: 32px 30px 30px; box-shadow: var(--sh-md); display: grid; gap: 18px; align-content: start; }
.quote::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(156,122,82,.38); pointer-events: none; }
.quote .stars { font-size: 11px; letter-spacing: .3em; color: var(--google); }  /* gwiazdki z Google, nie mosiadz */
.quote p { font-family: var(--display); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; }
.quote footer { display: grid; gap: 2px; font-size: 13px; color: var(--ink-2); }
.quote footer strong { color: var(--ink); font-weight: 500; }
@media (max-width: 899px) { .quotes { grid-template-columns: 1fr; } }

/* akademia */
.academy { padding: clamp(48px, 6.2vh, 84px) 0; }
.academy .wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: clamp(32px, 5vh, 56px); align-items: start; }
/* Tytul sekcji na samej gorze, pod nim polecany produkt: okladka i opis obok siebie. */
.academy__head { grid-column: 1 / -1; display: grid; gap: 16px; }
.academy__head .claim { font-family: var(--display); color: var(--ink); font-size: clamp(21px, 2vw, 30px); line-height: 1.3; }
.academy__media { grid-column: 1 / span 4; }
.academy__media img { height: auto; }  /* okladka w proporcjach pliku */
.academy__text { grid-column: 6 / span 7; display: grid; gap: 16px; }
.academy__text h3 { font-size: clamp(22px, 2.1vw, 30px); text-wrap: initial; }
.academy__text .price { display: flex; align-items: baseline; gap: 14px; }
.academy__text .price__dop { margin-left: -4px; }
.academy__text .price s { color: var(--ink-2); font-size: 15px; }
.academy__text .price b { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); }
.academy__text .omnibus { font-size: 12.5px; color: var(--ink-2); margin-top: -8px; }
.academy__akcje { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 6px; }
.academy__text p { color: var(--ink-2); font-size: 15.5px; }
.academy__text p.claim { font-family: var(--display); color: var(--ink); font-size: clamp(21px, 2vw, 30px); line-height: 1.3; }
@media (max-width: 899px) { .academy__head, .academy__media, .academy__text { grid-column: 1 / -1; } .academy__media { max-width: 320px; } }

/* blog */
.journal { padding: clamp(48px, 6.2vh, 84px) 0; background: var(--stone-2); }
.journal .wrap { display: grid; gap: clamp(36px, 5vh, 56px); }
.journal__head { display: grid; gap: 14px; }
.journal__head p { color: var(--ink-2); }
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post { display: grid; gap: 14px; align-content: start; }
.post .vitrine img { height: auto; aspect-ratio: 5 / 4; }  /* jak kafelki w portfolio; height:auto, bo .vitrine img ma height:100% */
.post .caps { padding-top: 4px; }
.post h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.25; }
.post p { font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 899px) { .posts { grid-template-columns: 1fr; } }

/* wycena: ciemny kamień */
.cta { padding: clamp(60px, 7.6vh, 100px) 0; }
/* Na telefonie jeszcze ciasniej: tam kazde 40 px to realne przewijanie (Sylwia, 2026-09-08). */
@media (max-width: 899px) {
  .process, .works, .voices, .academy, .journal, .sec { padding: clamp(38px, 5vh, 56px) 0; }
  .about { padding: clamp(64px, 8vh, 92px) 0 clamp(38px, 5vh, 56px); }
  .cta { padding: clamp(46px, 6vh, 68px) 0; }
}
.cta .wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 28px; }
.cta__in { grid-column: 2 / span 8; display: grid; gap: 22px; }
.cta__in h2 { max-width: 12ch; font-size: clamp(36px, 4.6vw, 72px); }
.cta__in .btn { justify-self: start; margin-top: 8px; }
/* Pasmo wyceny z formularzem: tekst po lewej, formularz po prawej. Klient pisze na miejscu,
   bez przechodzenia na osobna podstrone. */
/* Pasmo wyceny: naglowek w jednej linii, tekst w jednej kolumnie, pod spodem dane kontaktowe
   i formularz obok siebie — uklad jak na /kontakt, tylko w odwroconych barwach. */
.cta--form .cta__in { grid-column: 1 / -1; }
.cta--form .cta__in h2 { max-width: none; font-size: clamp(30px, 3.4vw, 52px); }
.cta--form .cta__in p { max-width: none; }
.wycena__blok { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  column-gap: clamp(32px, 5vw, 88px); row-gap: 32px; align-items: start;
  margin-top: clamp(18px, 3vh, 34px); padding-top: clamp(26px, 4vh, 48px); border-top: 1px solid var(--hair); }
.wycena__info { display: grid; gap: 26px; }
.wycena__info .contact__item { border-top-color: var(--hair); }
.wycena__prawa { grid-column: 2; display: grid; gap: 20px; align-content: start; }
.wycena__tytul { font-size: clamp(24px, 2.4vw, 34px); }
.wycena__form { display: grid; gap: 22px; align-content: start; }
/* opis pod adresem dziedziczyl kolor z jasnego ukladu i ginal na czekoladzie */
.dark .contact__item p { color: var(--snow-2); }
.dark .contact__item a:hover { color: var(--brass-light); }
.wycena__form .fields { gap: 22px 24px; }
.wycena__form .btn { justify-self: start; }
/* Co sie stanie po wyslaniu: zdejmuje wahanie „a co teraz". */
.wycena__potem { margin-top: 14px; font-size: 13.5px; color: var(--snow-2); }
.zgoda { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 13px; color: var(--ink-2); max-width: 52ch; cursor: pointer; }
.dark .zgoda { color: var(--snow-2); }
.zgoda input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--brass-light); }
.zgoda a { border-bottom: 1px solid var(--brass-2); }
/* pola na ciemnym tle */
.dark .field label { color: var(--snow-2); }
.dark .field input, .dark .field textarea, .dark .field select { color: var(--snow); border-bottom-color: rgba(241,236,228,.34); }
.dark .field input:focus, .dark .field textarea:focus { border-bottom-color: var(--brass-light); }
.dark .field input::placeholder, .dark .field textarea::placeholder { color: rgba(241,236,228,.55); }
@media (max-width: 899px) { .cta__in { grid-column: 1 / -1; } .wycena__blok { grid-template-columns: 1fr; } .wycena__prawa { grid-column: 1; } .wycena__form .fields { grid-template-columns: 1fr; } }

/* stopka */
.footer { padding: clamp(56px, 8vh, 88px) 0 40px; }
.footer .wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 40px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.footer__brand { grid-column: 1 / span 4; display: grid; gap: 18px; align-content: start; color: var(--ink); }
.footer__brand p { color: var(--ink-2); max-width: 34ch; font-size: 14px; line-height: 1.45; }
.footer__col { display: grid; gap: 0; align-content: start; }
.footer__col a { line-height: 1.38; }
.footer__col:nth-child(2) { grid-column: 6 / span 2; } .footer__col:nth-child(3) { grid-column: 8 / span 2; } .footer__col:nth-child(4) { grid-column: 10 / span 3; }
.footer__col h3 { font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); font-weight: 500; margin-bottom: 10px; }
.footer a:hover { color: var(--brass); }
.footer__contact { grid-column: 1 / span 4; display: grid; gap: 0; align-content: start; font-style: normal; }
.footer__contact .caps { display: block; line-height: 1.06; margin-bottom: 10px; }
.footer__contact a { color: var(--ink); line-height: 1.5; }
.footer__ig { margin-top: 10px; }
.footer__ig a { display: inline-block; opacity: .9; transition: opacity .3s var(--ease); }
.footer__ig a:hover { opacity: 1; }
.footer__ig svg { display: block; width: 26px; height: 26px; }
.footer__autor { display: inline-flex; align-items: center; gap: 9px; }
.footer__autor img { height: 15px; width: auto; opacity: .75; transition: opacity .3s var(--ease); }
.footer__autor:hover img { opacity: 1; }
.footer__bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12.5px; letter-spacing: .06em; }
/* Kontakt jako czwarta kolumna w wierszu z menu (Sylwia, 2026-09-16). Dopiero od 1200 px:
   przy 900 px kolumna na dwie jednostki ma ~117 px, a `biuro@nabak.pl` potrzebuje ~140 px
   i nie ma w nim gdzie zlamac linii. Nizej zostaje uklad z kontaktem pod marka. */
@media (min-width: 1200px) {
  /* Swiatlo miedzy kolumnami ustawia sie samo: kazda kolumna jest szeroka na tyle, ile zajmuje jej
     najdluzsza pozycja (max-content), a wolne miejsce w wierszu rozklada sie po rowno miedzy kolumny
     (space-between). Bez recznych przedzialow w 12-jednostkowej siatce, wiec dolozenie pozycji do menu
     albo dluzsza nazwa dokumentu nie rozjezdza odstepow. */
  .footer .wrap { grid-template-columns: repeat(5, max-content); justify-content: space-between; column-gap: 32px; }
  .footer__brand { grid-column: auto; }
  .footer__col:nth-child(n) { grid-column: auto; }
  /* Bez `grid-row`: element z ustawionym wierszem, a bez kolumny, jest ukladany przed elementami
     automatycznymi i zajmowal pierwsza kolumne, wypychajac reszte poza piec zadeklarowanych. */
  .footer__contact { grid-column: auto; }
}
/* Telefon: stopka szla przez dwa ekrany (~1240 px), bo kazda lista stala w pionie jedna pod druga.
   Menu i miasta ida obok siebie, kontakt i dokumenty lamia sie w poziomie. */
@media (max-width: 899px) {
  .footer { padding: clamp(32px, 4.5vh, 48px) 0 20px; }
  .footer .wrap { row-gap: 16px; font-size: 13px; line-height: 1.35; }
  .footer__brand { grid-column: 1 / -1 !important; grid-row: 1; gap: 12px; }
  .footer__brand p { max-width: none; font-size: 12.5px; line-height: 1.45; }
  .footer .logo--foot { height: 30px; }
  .footer__col h3 { font-size: 10px; letter-spacing: .18em; margin-bottom: 3px; }
  /* Listy z ciasna interlinia: menu i miasta jedno pod drugim po lewej, dokumenty po prawej przez oba wiersze. */
  .footer__col { gap: 0; }
  .footer__col a { line-height: 1.38; }
  .footer__col:nth-child(2) { grid-column: 1 / span 6 !important; grid-row: 2; }
  .footer__col:nth-child(3) { grid-column: 1 / span 6 !important; grid-row: 3; }
  .footer__col:nth-child(4) { grid-column: 7 / span 6 !important; grid-row: 2; }
  /* Prawa kolumna: dokumenty, pod nimi kontakt (tylko telefon i mail), pod nim znak Instagrama.
     Adres zostaje w kodzie — jest na desktopie i dla wyszukiwarek. */
  .footer__contact { grid-column: 7 / span 6 !important; grid-row: 3; display: grid; gap: 0; justify-items: start; }
  .footer__contact a { font-size: 13px; line-height: 1.5; }
  .footer__contact .caps { margin-bottom: 3px; }
  .footer__contact span:not(.caps) { display: none; }
  .footer__bottom { grid-row: 4; padding-top: 14px; gap: 8px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .hero__cue i::after { animation: none; } .hero__img img { transform: none; } }

/* =====================================================================
   Część 2 · komponenty podstron (system E)
   ===================================================================== */

/* nagłówek podstrony: kadr (zdjęcie) albo materiał (faktura pod czekoladą). Nawigacja przezroczysta jak na hero. */
/* nagłówek podstrony: jeden materiał (czarny marmur pod czekoladą) i jeden rytm co hero T1.
   Zdjęcie strony nie jest tłem, tylko gablotą obok tytułu (.phead--shot) — jak kafle w pasku hero. */
.phead { position: relative; isolation: isolate; min-height: 42svh; display: grid; align-items: end; background: var(--night); color: var(--snow); overflow: hidden; padding: clamp(104px, 12vh, 128px) 0 clamp(30px, 4.6vh, 54px); }

.phead--slim { min-height: 34svh; }
.phead--full { min-height: 100svh; align-items: center; padding-bottom: 120px; }
.phead .band__tex img { opacity: .5; }
.phead--tex .band__scrim { background: linear-gradient(165deg, rgba(46,29,25,.82), rgba(46,29,25,.94) 60%, rgba(67,44,38,.96)); }
.phead .wrap { position: relative; width: 100%; display: grid; align-items: end; gap: 20px; }
.phead--shot .wrap { grid-template-columns: minmax(0, 1fr) clamp(196px, 21vw, 292px); gap: 20px clamp(30px, 4.5vw, 72px); }
.phead__text { display: grid; gap: 20px; }
.phead .caps { color: var(--brass-light); }
.phead h1 { font-size: clamp(36px, 5.2vw, 76px); max-width: 26ch; }
.phead h1 em { font-style: normal; color: var(--brass-light); }
.phead__rule { width: 74px; height: 1px; background: var(--brass-light); }
/* Wróć do strony głównej na górze każdej podstrony: wraca w to samo miejsce strony głównej (site.js / router.js) */
.wroc { margin-bottom: -6px; }
.wroc a { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--snow-2); transition: color 200ms; }
.wroc a:hover { color: var(--snow); }
.phero .wroc a { color: var(--ink-2); } .phero .wroc a:hover { color: var(--ink); }
.phead__lead { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; color: rgba(241,236,228,.86); max-width: 52ch; }
.phead__meta { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(241,236,228,.7); }
.phead__meta b { font-weight: 500; color: var(--snow); }
.phead__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.phead__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.phead .num { font-family: var(--display); font-size: clamp(96px, 18vw, 240px); line-height: .9; color: rgba(241,236,228,.14); letter-spacing: -.02em; }
/* gablota nagłówka: ta sama rama co kafle w pasku hero */
.phead__shot { position: relative; margin: 0; align-self: end; background: rgba(241,236,228,.06); padding: 8px; }
.phead__shot img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; outline: 1px solid rgba(201,169,127,.5); outline-offset: -9px; }
.phead__shot figcaption { display: flex; justify-content: space-between; gap: 10px; padding: 10px 2px 2px; font-size: 11px; letter-spacing: .04em; color: var(--snow-2); }
/* zostaje na wypadek powrotu do nagłówków zdjęciowych, gdy będą zdjęcia w pełnej rozdzielczości */
.phead__img { position: absolute; inset: 0; z-index: -2; }
.phead__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.06); }
.phead--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(46,29,25,.86) 0%, rgba(46,29,25,.36) 50%, rgba(46,29,25,.18) 100%); }
/* Na telefonie bez wysokosci od ekranu: chowajacy sie pasek Safari zmienial svh i naglowek rosl w trakcie przewijania (skok strony, nagrania Sylwii 18.09). */
@media (max-width: 899px) { .phead { padding-top: 96px; min-height: 0; padding-bottom: 34px; } .phead--slim { min-height: 0; } .phead--full { min-height: 0; padding-bottom: 60px; } .phead__cta { display: grid; width: 100%; } .phead__cta .btn { justify-content: space-between; } .phead--shot .wrap { grid-template-columns: 1fr; gap: 26px; } .phead__shot img { aspect-ratio: 3 / 2; } }

/* wspólne */
.sec { padding: clamp(48px, 6.2vh, 84px) 0; }
.sec--tight { padding: clamp(64px, 9vh, 110px) 0; }
.sec--alt { background: var(--stone-2); }
.sec__head { display: grid; gap: 14px; margin-bottom: clamp(36px, 5vh, 56px); }
.sec__head p { color: var(--ink-2); }
.dark .sec__head p { color: var(--snow-2); }
.sec__head--row { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 16px; align-items: end; }
.sec__head--row .t { grid-column: 1 / span 7; display: grid; gap: 14px; }
.sec__head--row .act { grid-column: 10 / span 3; justify-self: end; }
@media (max-width: 899px) { .sec__head--row .t, .sec__head--row .act { grid-column: 1 / -1; } .sec__head--row .act { justify-self: start; } }
.list { display: grid; gap: 10px; }
/* Punkt listy jako blok z kropka na absolucie, nie siatka: w siatce goly tekst po <b> stawal sie osobna komorka
   w kolumnie 22 px i lamal sie slowo po slowie (blog, 15.09). Kropka zamiast kreski (Sylwia, 15.09). */
.list li { position: relative; display: block; padding-left: 26px; font-size: 15px; line-height: 1.55; }
.list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); }
.dark .list li::before { background: var(--brass-light); }
.note { display: grid; grid-template-columns: 1px 1fr; gap: 18px; font-size: 13.5px; color: var(--ink-2); max-width: 70ch; }
.note::before { content: ""; background: var(--brass); }
.dark .note { color: var(--snow-2); }
a.vitrine { display: block; }
.band--photo .band__scrim { background: linear-gradient(180deg, rgba(46,29,25,.78), rgba(46,29,25,.88)); }
.band--photo .band__tex img { object-position: 50% 40%; }

/* filtry (portfolio, opinie, sklep): kapitaliki na linii, aktywny z mosiężną kreską */
.filters { display: flex; gap: 6px 30px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: clamp(36px, 5vh, 56px); }
.filters button { font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); padding: 0 0 16px; border-bottom: 1px solid transparent; margin-bottom: -1px; transition: color 200ms, border-color 200ms; }
.filters button:hover { color: var(--ink); }
.filters button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--brass); }
.filters button span { margin-left: 8px; color: var(--brass); font-variant-numeric: tabular-nums; }

/* oferta: warianty jako para gablota + tekst */
.offer .wrap { display: grid; gap: clamp(72px, 10vh, 130px); }
.variant { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 32px; align-items: center; }
.variant__media { grid-column: 1 / span 6; }
.variant__media img { height: auto; aspect-ratio: 5 / 4; }
.variant__text { grid-column: 8 / span 5; display: grid; gap: 20px; }
.variant--flip .variant__media { grid-column: 7 / span 6; order: 2; }
.variant--flip .variant__text { grid-column: 1 / span 5; }
.variant h2 { font-size: clamp(30px, 3.2vw, 50px); }
.variant__text > p { color: var(--ink-2); }
.variant .list { margin-top: 6px; }
.variant .act { justify-self: start; margin-top: 8px; }
/* Oferta po zmianie z 15.09: trzy warianty (koncepcyjny, kompleksowy, pod klucz), cennik z PDF Agnieszki
   i linijka „nie musisz" jak w tabliczkach procesu. */
.variant__co { margin-top: 6px; }
.variant__nie { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--brass-2); color: var(--brass-ink); font-size: 14.5px; max-width: 48ch; }
.variant__cena { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin-top: 8px; padding: 18px 0 0; border-top: 1px solid var(--line); }
.variant__cena > div { display: grid; gap: 6px; }
.variant__cena b { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; }
.variant__cena p { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-2); max-width: none; }
.variant__cena--jedna { grid-template-columns: 1fr; }
.variant .act { margin-top: 4px; }
@media (max-width: 899px) { .variant__media, .variant__text, .variant--flip .variant__media, .variant--flip .variant__text { grid-column: 1 / -1; order: 0; } }
/* Komputer: zdjecie w ofercie rosnie do wysokosci tekstu obok (Sylwia, 2026-09-16: przy 5/4 zostawaly dziury
   370-560 px, bo teksty trzech wariantow maja 810-1000 px wysokosci). Gorna granica 1,7 szerokosci figury, zeby przy
   waskim oknie (900-1100 px) nie zrobil sie z niego slupek. Ponizej 900 px zostaje 5/4 jak dotad. */
@media (min-width: 900px) {
  /* Sufit siedzi na figurze, nie na obrazku: gdyby ograniczyc sam obrazek, figura dalej rozciagalaby sie
     do tekstu i miedzy zdjeciem a podpisem zostawala dziura wewnatrz bialej ramki (przy 900-1024 px do 480 px).
     Kontener to caly wiersz, figura ma ok. polowe jego szerokosci, wiec 85cqw - 20px to ok. 1,7 szerokosci figury. */
  .variant { align-items: stretch; container-type: inline-size; }
  .variant__media { display: grid; grid-template-rows: minmax(0, 1fr) auto; max-height: calc(85cqw - 20px); }
  .variant__media img { height: 100%; min-height: 0; aspect-ratio: auto; }
}

/* proces na podstronach: tabliczki bez przypinania (patrz .plaques w części 1) */
.plaque--text { grid-template-columns: 1fr; }
.plaque--text .n { font-size: 14px; }

/* FAQ: pytania w kroju tytulowym na liniach, bez ramek */
.faq .wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 32px; align-items: start; }
.faq__head { grid-column: 1 / span 4; display: grid; gap: 14px; position: sticky; top: 100px; }
.faq__head p { color: var(--ink-2); }
.faq__list { grid-column: 6 / span 7; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; align-items: center; gap: 20px; padding: 22px 0; font-family: var(--display); font-size: clamp(19px, 1.5vw, 24px); line-height: 1.3; transition: color 200ms; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brass); }
.faq summary i { position: relative; width: 28px; height: 28px; display: block; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 1px; background: var(--brass); transition: transform 300ms var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq details p { padding: 0 60px 26px 0; color: var(--ink-2); font-size: 15.5px; }
.dark .faq__head p, .dark .faq details p { color: var(--snow-2); }
.dark .faq__list, .dark .faq details { border-color: var(--hair); }
.dark .faq summary i::before, .dark .faq summary i::after { background: var(--brass-light); }
@media (max-width: 899px) { .faq__head, .faq__list { grid-column: 1 / -1; } .faq__head { position: static; } .faq details p { padding-right: 0; } }

/* portfolio: siatka gablot (klasy .card z części 1) */
.gallery .card { display: block; width: 100%; text-align: left; padding: 0; }
.hero--typo .rail__tile { display: block; padding: 0; text-align: left; }
.card__gal { display: none; }

/* Lightbox realizacji: okno nad stroną, nie osobny ekran — tło strony zostaje widoczne pod spodem.
   Okno owija zdjęcie: obraz skaluje się do limitów, które JS podaje w `--pgal-maxw` i `--pgal-maxh`
   (ile miejsca zostaje po pasku, miniaturach, marginesie okna i pasach ze strzałkami), a kadr,
   pasek tytułu i miniatury dopasowują się do jego szerokości. Bez powiększania: Sylwia wycofała
   zoom 16 września 2026, bo zdjęcia są za małe, żeby powiększanie coś pokazało. */
.pgal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: clamp(10px, 2.5vw, 40px);
  background: rgba(31,27,24,.74); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity 260ms var(--ease), visibility 0s linear 260ms; }
.pgal.is-open { opacity: 1; visibility: visible; transition: opacity 260ms var(--ease), visibility 0s; }
.pgal__box { display: flex; flex-direction: column; gap: 10px; width: auto; max-width: 100%; max-height: 100%;
  padding: 12px 14px 14px; color: var(--snow); background: var(--night); outline: 1px solid rgba(201,169,127,.38);
  box-shadow: 0 40px 90px -34px rgba(0,0,0,.75); transform: scale(.965); transition: transform 300ms var(--ease); }
.pgal.is-open .pgal__box { transform: none; }
.pgal__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
  padding-bottom: 9px; border-bottom: 1px solid var(--hair); }
.pgal__title { font-family: var(--display); font-size: clamp(17px, 1.7vw, 23px); line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pgal__count { font-size: 11px; font-weight: 500; letter-spacing: .2em; color: var(--brass-light); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.pgal__close { width: 38px; height: 38px; margin-right: -8px; display: grid; place-items: center; font-size: 24px; line-height: 1; transition: color 200ms; }
.pgal__close:hover { color: var(--brass-light); }
.pgal__close:focus-visible { color: var(--brass-light); outline: 1px solid var(--brass-light); outline-offset: 2px; }
/* Strzalki stoja w brazowych pasach obok kadru, nie na zdjeciu (Sylwia, 2026-09-16: zaslanialy widok).
   Kolumny sa `auto`, wiec kadr ma dokladnie szerokosc zdjecia i okno nie ma pustego pola po bokach. */
.pgal__stage { position: relative; display: grid; grid-template-columns: auto auto auto;
  justify-content: center; align-items: stretch; min-height: 0; }
.pgal__kadr { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; }
.pgal__img { display: block; width: auto; height: auto;
  max-width: var(--pgal-maxw, 86vw); max-height: var(--pgal-maxh, 68vh); }
.pgal__nav { position: static; transform: none; width: clamp(46px, 4.6vw, 74px); height: auto; align-self: stretch;
  display: grid; place-items: center; font-size: clamp(20px, 1.9vw, 27px); line-height: 1; border: 0;
  background: transparent; color: rgba(241,236,228,.85); transition: background 200ms var(--ease), color 200ms; }
.pgal__nav:hover { background: rgba(201,169,127,.18); color: var(--snow); }
.pgal__nav:focus-visible { background: rgba(201,169,127,.22); color: var(--snow); outline: 1px solid var(--brass-light); outline-offset: -3px; }
.pgal__thumbs { display: flex; gap: 7px; justify-content: center; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 2px; }
.pgal__thumb { flex: 0 0 auto; padding: 0; opacity: .42; transition: opacity 200ms var(--ease); }
.pgal__thumb:hover { opacity: .8; }
.pgal__thumb img { display: block; height: 48px; width: auto; }
.pgal__thumb[aria-current="true"] { opacity: 1; outline: 1px solid var(--brass-light); outline-offset: 2px; }
/* Na telefonie pasy zjadaly prawie piata czesc szerokosci (kadr spadal do 250 px przy ekranie 375 px),
   wiec strzalki chowamy: zdjecie dostaje cala szerokosc, a na kolejne przechodzi sie palcem albo miniaturami. */
@media (max-width: 640px) { .pgal__stage { grid-template-columns: minmax(0, 1fr); } .pgal__nav { display: none; }
  .pgal__thumbs { justify-content: flex-start; } .pgal__thumb img { height: 40px; } }
@media (prefers-reduced-motion: reduce) { .pgal, .pgal.is-open, .pgal__box { transition: none; } .pgal__box { transform: none; } }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.gallery .card .vitrine img { height: auto; aspect-ratio: 5 / 4; transition: none; }
/* Kafelki pojawiaja sie normalnie, bez kurtyny i wjazdu. Reaguja dopiero na wskaznik,
   a na ekranie dotykowym — plynnie, im blizej srodka okna (transform z site.js, wireSrodek). */
.gallery .card .vitrine { transition: transform 420ms var(--ease), box-shadow 420ms var(--ease); }
.card .vitrine, .post .vitrine, .product .vitrine, .about__media.vitrine, .phead__shot, .swatch div, .plaque figure {
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease); }
.card:hover .vitrine, .post:hover .vitrine, .product:hover .vitrine, .about__media.vitrine:hover, .phead__shot:hover, .swatch:hover div, .plaque:hover figure {
  transform: scale(1.02); }
.gallery .card:hover .vitrine { box-shadow: 0 0 0 1px rgba(31,27,24,.05), 0 18px 40px -22px rgba(31,27,24,.5); }
@media (hover: none) {
  .card:hover .vitrine, .post:hover .vitrine, .product:hover .vitrine, .plaque:hover figure { transform: none; }
  .gallery .card:hover .vitrine { box-shadow: var(--sh-md); }
  /* Powiekszenie kafla na srodku okna ustawia site.js (wireSrodek) co klatke wprost w transform,
     plynnie z odleglosci od srodka, wiec bez transition na transform: z nim skala goni scroll i pulsuje. */
  .gallery .card .vitrine { transition: box-shadow 420ms var(--ease); }
}
@media (prefers-reduced-motion: reduce) { .gallery .card .vitrine { transition: none; } }  /* height:auto, bo .vitrine img ma height:100% i zjadloby proporcje */
.gallery + .note { margin-top: clamp(36px, 5vh, 56px); }
@media (max-width: 899px) { .gallery { grid-template-columns: 1fr; } }

/* projekt (case study) */
.story .wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 40px; align-items: start; }
.story__facts { grid-column: 1 / span 3; position: sticky; top: 100px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.story__facts div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.story__facts span { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); font-weight: 500; }
.story__facts b { font-weight: 400; font-size: 15px; }
.story__text { grid-column: 5 / span 7; display: grid; gap: 22px; }
.story__text h2 { font-size: clamp(26px, 2.6vw, 38px); margin-top: 18px; }
.story__text h2:first-child { margin-top: 0; }
.story__text p { color: var(--ink-2); }
.story__text p.big { font-family: var(--display); color: var(--ink); font-size: clamp(21px, 2vw, 30px); line-height: 1.3; max-width: 30ch; }
.gallery--two { grid-template-columns: 1fr 1fr; }
@media (max-width: 899px) { .story__facts, .story__text { grid-column: 1 / -1; } .story__facts { position: static; } .gallery--two { grid-template-columns: 1fr; } }
.next { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.next a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: clamp(32px, 5vh, 56px) 0; transition: color 200ms; }
.next a:hover { color: var(--brass); }
.next .t { display: grid; gap: 8px; }
.next h3 { font-size: clamp(26px, 3vw, 44px); }
.next .arr { font-family: var(--display); font-size: clamp(32px, 4vw, 56px); transition: transform 300ms var(--ease); }
.next a:hover .arr { transform: translateX(10px); }

/* opinie: siatka cytatów (klasy .quote z części 1) */
.quotes--grid { grid-template-columns: repeat(3, 1fr); }
.quotes--grid .quote { background: #fff; }
.quotes--grid .quote footer { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 12px; }
.quotes--grid .quote footer .av { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--brass-2); font-family: var(--display); font-size: 16px; color: var(--brass); grid-row: span 2; }
@media (max-width: 899px) { .quotes--grid { grid-template-columns: 1fr; } }
.bigquote { text-align: center; display: grid; justify-items: center; gap: 22px; }
.bigquote p { font-family: var(--display); font-size: clamp(22px, 2.6vw, 38px); line-height: 1.3; max-width: 26ch; }
.bigquote footer { font-size: 13px; color: var(--ink-2); letter-spacing: .06em; }

/* sklep: produkty w gablotach */
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
.product { display: grid; gap: 12px; align-content: start; }
.product .vitrine { overflow: hidden; }
.product .vitrine img { height: auto; aspect-ratio: 724 / 1024; transition: transform 1s var(--ease); }  /* okladka „Warsztatu projektanta" */

.product .caps { padding-top: 6px; }
.product h3 { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.25; }
.product h3 a:hover { color: var(--brass); }
.product p { font-size: 14px; color: var(--ink-2); }
.product__foot { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 6px; }
.price { display: grid; gap: 2px; }
.price s { font-size: 12.5px; color: var(--ink-2); }
.price b { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1; }
.dark .price s { color: var(--snow-2); }
@media (max-width: 899px) { .products { grid-template-columns: 1fr 1fr; gap: 32px 16px; } }
@media (max-width: 560px) { .products { grid-template-columns: 1fr; } }

/* strona produktu */
.phero { padding: 130px 0 clamp(64px, 9vh, 110px); }
.phero .wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 40px; align-items: center; }
.phero__text { grid-column: 1 / span 6; display: grid; gap: 22px; }
.phero__text h1 { font-size: clamp(34px, 3.8vw, 58px); }
.phero__text .lead { font-size: clamp(16px, 1.2vw, 19px); color: var(--ink-2); max-width: 46ch; }
.phero__text .stars { font-size: 13px; color: var(--ink-2); }
.phero__text .stars b { color: var(--google); letter-spacing: .3em; font-weight: 400; margin-right: 8px; }
.phero__buy { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding-top: 8px; }
.phero__buy .price b { font-size: 34px; }
.phero__media { grid-column: 8 / span 5; }
.phero__media .vitrine img { height: auto; aspect-ratio: 724 / 1024; }
@media (max-width: 899px) { .phero { padding-top: 110px; } .phero__text, .phero__media { grid-column: 1 / -1; } .phero__media { max-width: 420px; order: -1; } }
.pain .wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 28px; align-items: start; }
.pain__text { grid-column: 1 / span 6; display: grid; gap: 18px; }
.pain__text p { color: var(--ink-2); }
.pain__pull { grid-column: 8 / span 5; font-family: var(--display); font-style: normal; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.3; padding-left: 28px; border-left: 1px solid var(--brass); }
@media (max-width: 899px) { .pain__text, .pain__pull { grid-column: 1 / -1; } }
.plaques--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 899px) { .plaques--three { grid-template-columns: 1fr; } }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.compare div { padding: 30px 28px; background: #fff; box-shadow: var(--sh-md); display: grid; gap: 16px; align-content: start; }
.compare div.is-with { border-top: 2px solid var(--brass); }
.compare h3 { font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: var(--ink-2); }
.compare .is-with h3 { color: var(--brass); }
.compare .list li::before { background: var(--line); }
.compare .is-with .list li::before { background: var(--brass); }
@media (max-width: 899px) { .compare { grid-template-columns: 1fr; } }
.who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.who div { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--brass-2); }
.who p { font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 899px) { .who { grid-template-columns: 1fr; } }
.buybar { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 24px; align-items: center; }
.buybar__in { grid-column: 2 / span 10; display: grid; grid-template-columns: 120px 1fr auto; gap: 32px; align-items: center; }
.buybar__in .vitrine { padding: 6px; } .buybar__in .vitrine::after { inset: 12px; }
.buybar__in .vitrine img { aspect-ratio: 4 / 5; }
.buybar__t { display: grid; gap: 8px; }
.buybar__t h2 { font-size: clamp(22px, 2vw, 30px); }
.buybar__t p { color: var(--snow-2); font-size: 14.5px; }
@media (max-width: 899px) { .buybar__in { grid-column: 1 / -1; grid-template-columns: 1fr; } .buybar__in .vitrine { max-width: 160px; } }

/* blog: siatka wpisów (klasy .posts/.post z części 1) i artykuł */
.posts--grid { grid-template-columns: repeat(3, 1fr); gap: 40px 24px; }
@media (max-width: 899px) { .posts--grid { grid-template-columns: 1fr; } }
.article .wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 40px; align-items: start; }
.article__aside { grid-column: 1 / span 3; position: sticky; top: 100px; display: grid; gap: 14px; }
.article__aside ol { display: grid; gap: 10px; counter-reset: toc; }
.article__aside li { counter-increment: toc; display: grid; grid-template-columns: 26px 1fr; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.article__aside li::before { content: counter(toc, decimal-leading-zero); font-family: var(--display); font-size: 12px; letter-spacing: .1em; color: var(--brass); padding-top: 2px; }
.article__aside a:hover { color: var(--brass); }
.article__body { grid-column: 5 / span 7; display: grid; gap: 22px; }
.article__body > p:first-child { font-family: var(--display); font-size: clamp(19px, 1.6vw, 24px); line-height: 1.4; max-width: 40ch; }
.article__body h2 { font-size: clamp(26px, 2.6vw, 38px); margin-top: 22px; }
.article__body p { color: var(--ink-2); font-size: 16.5px; }
.article__body p a { color: var(--ink); border-bottom: 1px solid var(--brass-2); }
.article__body p a:hover { color: var(--brass); border-color: var(--brass); }
.article__body .list { margin: 6px 0; }
.article__body .list li { font-size: 16px; color: var(--ink-2); }
.article__body .list b { font-weight: 500; color: var(--ink); }
@media (max-width: 899px) { .article__aside, .article__body { grid-column: 1 / -1; } .article__aside { position: static; } }

/* kontakt: dane po lewej, formularz na liniach po prawej */
.contact .wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 48px; align-items: start; }
.contact__info { grid-column: 1 / span 4; display: grid; gap: 28px; position: sticky; top: 100px; }
.contact__item { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.contact__item a, .contact__item b { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.25; }
.contact__item a:hover { color: var(--brass); }
.contact__item p { font-size: 14px; color: var(--ink-2); }
.contact__form { grid-column: 6 / span 7; display: grid; gap: 22px; }
.contact__form h2 { font-size: clamp(26px, 2.6vw, 38px); margin-bottom: 8px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.field input, .field textarea, .field select { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid rgba(31,27,24,.28); padding: 8px 0 10px; border-radius: 0; transition: border-color 200ms; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--brass); }
.field input::placeholder, .field textarea::placeholder { color: rgba(31,27,24,.55); }
.contact__form .btn { justify-self: start; }
.consent { font-size: 13px; color: var(--ink-2); max-width: 52ch; }
.consent a { border-bottom: 1px solid var(--brass-2); }
.check { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-2); }
.check input { width: 16px; height: 16px; accent-color: var(--brass); margin: 0; }
@media (max-width: 899px) { .contact__info, .contact__form { grid-column: 1 / -1; } .contact__info { position: static; } .fields { grid-template-columns: 1fr; } }

/* konto i koszyk */
.auth { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.auth__in { grid-column: 4 / span 6; display: grid; gap: 22px; }
.auth__in .fields { grid-template-columns: 1fr; }
.auth__links { display: flex; gap: 28px; flex-wrap: wrap; }
@media (max-width: 899px) { .auth__in { grid-column: 1 / -1; } }
.empty { display: grid; justify-items: start; gap: 22px; max-width: 52ch; }
.empty h2 { font-size: clamp(28px, 3vw, 44px); }
.empty p { color: var(--ink-2); }

/* =====================================================================
   Naglowki na telefonie: pelna szerokosc kolumny
   Miara w `ch` przy naglowkach nie sluzy czytelnosci, tylko wymusza lamanie pod jeden ekran.
   Ponizej 900 px kolumna sama jest miara. Akapity zachowuja swoje miary, bo tam dlugosc linijki
   naprawde decyduje o czytaniu. Blok stoi na koncu pliku, zeby przebic zapisy szczegolowe
   (`.cta__in h2`, `.process__head h2`), ktore inaczej wygrywaja specyficznoscia.
   ===================================================================== */
@media (max-width: 899px) {
  h1, h2, h3,
  .hero h1, .phead h1, .cta__in h2, .process__head h2, .academy__text h3, .story__text h2 { max-width: none; }
}

/* =====================================================================
   Formularze: stany (2026-09-15)
   Jeden zestaw dla kontaktu, wyceny i konta. Kolory: błąd = ciemny mosiądz na jasnym, jasny mosiądz
   na czekoladzie (bez czerwieni, której nie ma w palecie; błąd jest w tekście i kresce, nie w barwie).
   Stany na podgląd przełącza parametr ?stan=... ([data-stan] widoczne tylko w tym stanie,
   [data-stan-ukryj] chowane w tym stanie). W Laravelu te same bloki renderuje serwer.
   ===================================================================== */
/* !important, bo pozniejsze reguly o tej samej specyficznosci (.alert, .rows) wygrywaly i blok z data-stan
   byl widoczny na stale (blad z 15.09: alert „nie udalo sie wyslac" wisial pod tytulem formularza wyceny). */
[data-stan]:not(.is-on) { display: none !important; }
[data-stan].is-on { display: block; }
.rows[data-stan].is-on, .auth__in[data-stan].is-on, .adres[data-stan].is-on { display: grid; }
.adres[data-stan].is-on { display: block; }
.alert { position: relative; display: block; padding: 16px 20px 16px 40px; font-size: 14.5px; line-height: 1.5; background: #fff; box-shadow: var(--sh-md); color: var(--ink-2); max-width: none; }
.alert::before { content: ""; position: absolute; left: 20px; top: 16px; bottom: 16px; width: 2px; background: var(--brass); }
.alert a { color: var(--ink); border-bottom: 1px solid var(--brass-2); }
.dark .alert a { color: var(--snow); }
.alert b { color: var(--ink); font-weight: 500; }
.alert--err::before { background: var(--ink); }
.alert--czeka::before { background: var(--brass-light); }
.alert.is-on { display: block; }
.dark .alert { background: rgba(241,236,228,.06); color: var(--snow-2); box-shadow: none; border: 1px solid var(--hair); }
.dark .alert b { color: var(--snow); }
.dark .alert--err::before { background: var(--snow); }
.field__help { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.dark .field__help { color: var(--snow-2); }
.field__err { font-size: 12.5px; color: var(--brass-ink); line-height: 1.45; }
.field__err a { border-bottom: 1px solid var(--brass-2); }
.field__err.is-on { display: block; }
.dark .field__err { color: var(--brass-light); }
.field.is-error input, .field.is-error textarea, .field.is-error select { border-bottom-color: var(--brass-ink); border-bottom-width: 2px; padding-bottom: 9px; }
.dark .field.is-error input, .dark .field.is-error textarea { border-bottom-color: var(--brass-light); }
.field input:disabled { color: var(--ink-2); border-bottom-style: dashed; }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239C7A52' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 2px center; padding-right: 22px; }
.form__status:not(.sr) { font-size: 14px; color: var(--ink-2); }
.zgoda.is-error > span:first-of-type { color: var(--brass-ink); }
.zgoda .field__err { grid-column: 1 / -1; }
.check { flex-wrap: wrap; } .check .field__err { flex-basis: 100%; }
.dark .zgoda.is-error > span:first-of-type { color: var(--brass-light); }
/* przycisk w trakcie wysyłania: tekst blednie, mosiężna kreska biegnie po dolnej krawędzi */
.btn { position: relative; overflow: hidden; }
.btn.is-busy { pointer-events: none; color: transparent; }
.btn.is-busy::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brass-light); transform-origin: left; animation: busy 1.1s var(--ease) infinite; }
.btn.is-busy .btn__t { color: transparent; }
.btn.is-busy::before { content: attr(data-busy); position: absolute; inset: 0; display: grid; place-items: center; color: var(--stone); font-size: 12.5px; letter-spacing: .18em; }
.btn:not(.btn--fill).is-busy::before { color: var(--ink); }
.dark .btn:not(.btn--fill).is-busy::before { color: var(--snow); }
@keyframes busy { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); transform-origin: left; } 61% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
@media (prefers-reduced-motion: reduce) { .btn.is-busy::after { animation: none; transform: none; } }
.btn--sm { height: 42px; padding: 0 18px; font-size: 11.5px; }
.btn--snow { border-color: var(--snow-2); color: var(--snow); }
.btn--snow:hover { background: var(--snow); color: var(--night); border-color: var(--snow); }
.form__ok { display: grid; gap: 18px; justify-items: start; padding: 28px 0 0; border-top: 1px solid var(--line); }
.form__ok h3 { font-size: clamp(24px, 2.2vw, 32px); }
.form__ok p { color: var(--ink-2); }
.dark .form__ok { border-top-color: var(--hair); }
.dark .form__ok p { color: var(--snow-2); }
.form__ok.is-on { display: grid; }

/* konto: ekrany logowania i pokrewne */
.auth--wide .auth__in { grid-column: 3 / span 8; }
.auth--wide .auth__in .fields { grid-template-columns: 1fr 1fr; }
.auth__in .zgoda { max-width: none; }
.auth__uwaga { font-size: 13.5px; color: var(--ink-2); max-width: 52ch; }
.auth__row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.auth__row .auth__uwaga { flex: 1 1 260px; }
.act--usun { border-bottom-color: var(--line); color: var(--ink-2); }
.act--usun:hover { color: var(--ink); border-bottom-color: var(--ink); }
.kroki { display: grid; gap: 0; counter-reset: krok; border-top: 1px solid var(--line); }
.kroki li { counter-increment: krok; display: grid; grid-template-columns: 44px 1fr; gap: 6px 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.kroki li::before { content: counter(krok, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--display); font-size: 15px; letter-spacing: .2em; color: var(--brass); padding-top: 4px; }
.kroki b { font-family: var(--display); font-weight: 400; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.25; }
.kroki span { font-size: 14.5px; color: var(--ink-2); }
.zgody { display: grid; gap: 18px; }
.zgody__item { display: grid; gap: 10px; padding: 22px 24px; background: #fff; box-shadow: var(--sh-md); }
.zgody__item p { font-size: 15px; color: var(--ink-2); max-width: none; }
.zgody__item p a { color: var(--ink); border-bottom: 1px solid var(--brass-2); }
.zgody__zmiana { display: grid; grid-template-columns: 1px 1fr; gap: 14px; font-size: 13.5px !important; padding-top: 4px; }
.zgody__zmiana::before { content: ""; background: var(--brass); }
@media (max-width: 899px) { .auth--wide .auth__in { grid-column: 1 / -1; } .auth--wide .auth__in .fields { grid-template-columns: 1fr; } }

/* konto: pulpit i zamówienie */
.phead__row .phead__lead { flex: 1 1 320px; }
.konto .wrap { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 40px; align-items: start; }
.konto__aside { grid-column: 1 / span 3; position: sticky; top: 100px; display: grid; gap: 22px; }
.konto__skok { display: grid; border-top: 1px solid var(--line); }
.konto__skok a { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 18px; line-height: 1.2; transition: color 200ms; }
.konto__skok a::after { content: "→"; color: var(--brass); font-size: 14px; opacity: 0; transform: translateX(-4px); transition: opacity 200ms, transform 200ms var(--ease); }
.konto__skok a:hover { color: var(--brass); } .konto__skok a:hover::after { opacity: 1; transform: none; }
.konto__pomoc { font-size: 13.5px; color: var(--ink-2); }
.konto__pomoc a { color: var(--ink); border-bottom: 1px solid var(--brass-2); }
.konto__statusy { display: grid; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; }
.konto__statusy div { display: grid; gap: 4px; }
.konto__statusy b { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.25; display: flex; align-items: center; gap: 10px; }
.konto__body { grid-column: 5 / span 8; display: grid; gap: clamp(44px, 6vh, 72px); }
.panel { display: grid; gap: 22px; scroll-margin-top: 90px; }
.panel__head { display: grid; gap: 10px; }
.panel__head h2 { font-size: clamp(26px, 2.6vw, 38px); }
.panel__pusto { color: var(--ink-2); max-width: 52ch; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.panel__pusto a, .panel__uwaga a { color: var(--ink); border-bottom: 1px solid var(--brass-2); }
.panel__uwaga { font-size: 13.5px; color: var(--ink-2); max-width: 60ch; }
.panel form { display: grid; gap: 22px; }
.panel form .btn { justify-self: start; }
.rows { display: grid; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, .9fr) minmax(0, 1fr) auto; gap: 8px 22px;
  grid-auto-flow: column; grid-auto-columns: max-content; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); transition: color 200ms; }
a.row:hover { color: var(--ink); } a.row:hover .row__arr { transform: translateX(5px); color: var(--brass); }
a.row:hover .row__main b { color: var(--brass); }
.row__main { display: grid; gap: 3px; min-width: 0; }
.row__main b { font-family: var(--display); font-weight: 400; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.25; color: var(--ink); transition: color 200ms; }
.row__main small { font-size: 12.5px; }
.row__cell { display: flex; align-items: center; gap: 9px; }
.row__cell--stan { font-size: 12.5px; }
.row__kwota { font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--ink); white-space: nowrap; justify-self: end; }
.row__arr { font-size: 18px; transition: transform 260ms var(--ease), color 200ms; }
.row .btn { justify-self: end; }
.row--off { color: rgba(107,100,92,.72); }
.row--off .row__main b { color: var(--ink-2); }
.row--poz { grid-template-columns: 72px minmax(0, 2fr) auto auto; }
.row__okladka { padding: 4px; margin: 0; box-shadow: none; } .row__okladka::after { inset: 0; margin: 6px; }
.row__okladka img { aspect-ratio: 4 / 5; height: auto; }
.stan { width: 8px; height: 8px; border-radius: 50%; background: var(--brass); flex: none; }
.stan--czeka { background: transparent; box-shadow: inset 0 0 0 1.5px var(--brass); }
.stan--off { background: var(--line); }
.suma { display: grid; gap: 0; justify-self: end; width: min(100%, 380px); margin-left: auto; border-top: 1px solid var(--line); }
.suma div { display: flex; justify-content: space-between; gap: 24px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.suma dd { margin: 0; color: var(--ink); }
.suma__razem dt, .suma__razem dd { font-family: var(--display); font-size: 22px; color: var(--ink); }
.suma__vat { border-bottom: 0 !important; font-size: 12.5px !important; }
.dane { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dane div { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.dane p { font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.adresy { display: grid; border-top: 1px solid var(--line); }
.adres { border-bottom: 1px solid var(--line); }
.adres summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 28px; gap: 20px; align-items: center; padding: 18px 0; }
.adres summary::-webkit-details-marker { display: none; }
.adres__t { display: grid; gap: 3px; }
.adres__t b { font-family: var(--display); font-weight: 400; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.25; }
.adres__t span, .adres__s { font-size: 13.5px; color: var(--ink-2); }
.adres summary i { position: relative; width: 28px; height: 28px; display: block; }
.adres summary i::before, .adres summary i::after { content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 1px; background: var(--brass); transition: transform 300ms var(--ease); }
.adres summary i::after { transform: rotate(90deg); }
.adres[open] summary i::after { transform: rotate(0); }
.adres summary:hover .adres__t b { color: var(--brass); }
.adres form { display: grid; gap: 22px; padding: 6px 0 28px; }
.adres--nowy .adres__s { display: none; }
@media (max-width: 899px) {
  .konto__aside, .konto__body { grid-column: 1 / -1; } .konto__aside { position: static; }
  .row { grid-template-columns: 1fr auto auto; grid-auto-flow: row; } .row__cell { grid-column: 1 / -1; } .row .btn, .row__kwota { grid-column: 2; grid-row: 1; }
  .row__arr { grid-column: 3; grid-row: 1; } .row--poz { grid-template-columns: 64px 1fr auto; } .row--poz .row__cell { grid-column: 2; } .row--poz .row__kwota { grid-column: 3; }
  .dane { grid-template-columns: 1fr; } .adres summary { grid-template-columns: 1fr 28px; } .adres__s { grid-column: 1; }
  .suma { width: 100%; }
}

/* Zdjecia bez wymiarow w HTML dostaja proporcje w CSS, zeby strona nie przesuwala sie w dol, gdy sie doladuja.
   Bez tego „wstecz" wracalo o kilkaset pikseli za nisko (portret i zdjecie pracowni wchodzily po przywroceniu pozycji). */
.about__media img { aspect-ratio: 1179 / 1174; object-fit: cover; }
.about__media2 img { aspect-ratio: 1200 / 1200; object-fit: cover; }
.academy__media img { aspect-ratio: 1054 / 1492; object-fit: cover; }  /* okladka polecanego produktu */

/* dokumenty prawne */
.article--dok .article__body h2 { font-size: clamp(22px, 2vw, 30px); margin-top: 14px; counter-increment: dok; }
.article--dok .article__body h2::before { content: "§ " counter(dok) ". "; color: var(--brass); font-size: .8em; }
.article--dok .article__body { counter-reset: dok; }
.article--dok .article__body > p:first-child { font-family: var(--sans); font-size: 16.5px; max-width: 62ch; }
.article--dok .article__body p { max-width: 68ch; }
.dok__inne { margin-top: 18px; }
.dok__lista { display: grid; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.dok__lista a:hover { color: var(--brass); }
.dok__lista [aria-current] a { color: var(--ink); border-bottom: 1px solid var(--brass-2); }
.do-uzup { color: var(--brass-ink); font-style: italic; }
.wzor { display: block; max-width: 100%; padding: 22px 26px; background: #fff; box-shadow: var(--sh-md); font-size: 15px; line-height: 1.75; color: var(--ink);
  overflow-wrap: anywhere; }   /* linie z wielokropkow to jeden ciag znakow: bez lamania blok rozpychal telefon o 43 px (2026-09-16) */
@media (max-width: 899px) { .wzor { padding: 16px 16px; font-size: 14px; } }
.dok__stopka { margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px !important; }
/* Listy w dokumentach: globalny reset zdejmuje punktory, a tekst prawny bez numeracji jest nieczytelny (2026-09-16). */
.dok__body ol, .dok__body ul { display: grid; gap: 10px; padding-left: 1.5em; max-width: 68ch; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.dok__body ol { list-style: decimal; }
.dok__body ul { list-style: disc; }
.dok__body li { padding-left: 4px; }
.dok__body li::marker { color: var(--brass-ink); font-variant-numeric: tabular-nums; }
.dok__body li b { font-weight: 500; color: var(--ink); }
.dok__body ol ol { list-style: lower-alpha; margin-top: 8px; }

/* spis stanów (tylko podgląd) */
.stany { display: grid; gap: 40px; }
.stany h2 { font-size: clamp(24px, 2.2vw, 32px); }
.stany ul { display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: 16px; }
.stany li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
.stany li a { font-family: var(--display); font-size: 18px; color: var(--ink); }
.stany li a:hover { color: var(--brass); }
.stany code { font-size: 12.5px; color: var(--brass-ink); }


/* =====================================================================
   Strona produktu z JSON (produkty.py, 2026-09-15): szablon pod reklame
   ===================================================================== */
.phero--prod .phero__text { gap: 18px; }
.phero--prod .phero__media img, .phero--prod .phero__media.vitrine > img { width: 100%; height: auto; aspect-ratio: 724 / 1024; object-fit: cover; }  /* okladki jak w sklepie */
.phero--prod .phero__media { grid-column: 9 / span 4; }
.phero--prod .phero__text { grid-column: 1 / span 7; }
.phero__fakty { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 0; padding: 6px 0 2px; }
.phero__fakty div { display: grid; gap: 4px; }
.phero__fakty dd { margin: 0; font-family: var(--display); font-size: clamp(20px, 1.7vw, 26px); line-height: 1.15; }
@media (max-width: 899px) { .phero__fakty { gap: 12px 26px; } .phero__fakty dd { font-size: 19px; } }
.price__dop { font-size: 12.5px; color: var(--ink-2); align-self: end; margin-left: -18px; padding-bottom: 4px; }
.phero__buy .price { display: flex; align-items: baseline; gap: 12px; }
.phero__buy .price s { font-size: 14px; }
.sygnaly { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 6px; font-size: 13px; color: var(--ink-2); }
.sygnaly li { position: relative; padding-left: 14px; }
.sygnaly li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%%; background: var(--brass); }
/* Wstep w dwoch kolumnach: duzy akapit po lewej, reszta po prawej. Jedna kolumna zostawiala pusta prawa polowe (Sylwia, 15.09). */
.wstep__in { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 22px; align-items: start; }
.wstep__in p { color: var(--ink-2); max-width: none; grid-column: 8 / span 5; }
.wstep__in p.big { grid-column: 1 / span 6; grid-row: 1 / span 4; font-family: var(--display); color: var(--ink); font-size: clamp(22px, 2vw, 30px); line-height: 1.32; }
@media (max-width: 899px) { .wstep__in p, .wstep__in p.big { grid-column: 1 / -1; grid-row: auto; } }
.program__lista { display: grid; border-top: 1px solid var(--line); counter-reset: none; }
.program__poz { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.program__n { font-family: var(--display); font-size: 15px; letter-spacing: .2em; color: var(--brass-ink); padding-top: 6px; }
.program__poz h3 { font-size: clamp(20px, 1.7vw, 26px); margin-bottom: 10px; }
.program__poz p { color: var(--ink-2); max-width: 70ch; }
.program__czas { display: inline-block; margin-top: 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-ink); }
.probka { display: grid; gap: 12px; justify-items: start; margin-top: 28px; padding: 24px 26px; background: #fff; box-shadow: var(--sh-md); }
.masz { padding: clamp(56px, 7vh, 96px) 0; }
.masz__in { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 40px; align-items: start; }
.masz__lewa { grid-column: 1 / span 6; display: grid; gap: 20px; }
.masz__lewa h2 { font-size: clamp(28px, 3vw, 44px); }
.masz__lista { display: grid; gap: 14px; }
.masz__lista li { position: relative; padding-left: 26px; font-size: 16px; color: var(--snow-2); }
.masz__lista li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%%; background: var(--brass-light); }
/* „Dla kogo" i „Nie zapisuj się" jako tabliczki jak w procesie, z tytułem w kroju tytułowym: kapitaliki i sam tekst ginęły na czekoladzie (Sylwia, 15.09). */
.dwa { grid-column: 8 / span 5; display: grid; gap: 16px; align-self: start; }
.dwa__karta { display: grid; gap: 12px; padding: 26px 28px; border: 1px solid var(--hair); background: rgba(241,236,228,.05); }
.dwa__karta h3 { font-size: clamp(22px, 1.9vw, 28px); color: var(--snow); }
.dwa__karta--nie { border-color: rgba(201,169,127,.45); }
.dwa__karta--nie h3 { color: var(--brass-light); }
.dwa p { font-size: 15.5px; color: var(--snow-2); max-width: none; }
.dzien__in { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 32px; align-items: start; }
.dzien__tekst { grid-column: 1 / span 7; display: grid; gap: 18px; }
.dzien__tekst h2 { font-size: clamp(28px, 3vw, 44px); }
.dzien__tekst p { color: var(--ink-2); }
.dane--pion { grid-column: 9 / span 4; grid-template-columns: 1fr; gap: 18px; }
.glosy__in { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 40px; align-items: start; }
.quotes--dwa { grid-column: 1 / span 7; grid-template-columns: 1fr; gap: 18px; }
.quotes--dwa .quote { background: #fff; }
.autorka { grid-column: 9 / span 4; display: grid; gap: 18px; align-content: start; }
.autorka .vitrine { max-width: 200px; }
.autorka--sama { grid-column: 1 / span 8; grid-template-columns: 200px 1fr; gap: 28px; align-items: center; }
@media (max-width: 899px) { .autorka--sama { grid-template-columns: 1fr; } }
.autorka .vitrine img { aspect-ratio: 1; height: auto; object-fit: cover; }
.autorka h3 { font-size: clamp(22px, 1.9vw, 28px); margin: 6px 0 10px; }
.autorka p { font-size: 15px; color: var(--ink-2); }
.autorka p.big { font-size: 15px; color: var(--ink-2); font-family: var(--sans); }
.buybar__cta { display: grid; gap: 12px; justify-items: end; }
.buybar__cta .price b { font-size: 26px; }
.dark .price s, .dark .price__dop { color: var(--snow-2); }
.products--pow { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
/* przyklejony pasek kupna na telefonie: pokazuje sie po przewinieciu pierwszego ekranu (site.js) */
.kup { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; align-items: center; justify-content: space-between; gap: 16px; padding: 10px var(--gutter); background: rgba(246,243,238,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 -1px 0 var(--line); transform: translateY(100%%); transition: transform 320ms var(--ease); }
.kup__c { font-family: var(--display); font-size: 22px; }
.kup.is-on { transform: none; }
@media (max-width: 899px) {
  .kup:not([hidden]) { display: flex; }
  .masz__lewa, .dwa, .dzien__tekst, .dane--pion, .quotes--dwa, .autorka { grid-column: 1 / -1; }
  .program__poz { grid-template-columns: 40px minmax(0, 1fr); gap: 6px 14px; padding: 20px 0; }
  .products--pow { grid-template-columns: 1fr; }
  .buybar__cta { justify-items: start; }
  .phero--prod .phero__text, .phero--prod .phero__media { grid-column: 1 / -1; }
  .phero--prod .phero__media { max-width: 260px; order: -1; }
}

/* hero „manifest na czekoladzie": faktura zamiast zdjęcia, tytuł i pasek dowodów */
.hero--typo{position:relative;isolation:isolate;height:auto;display:flex;flex-direction:column;background:var(--night);color:var(--snow);overflow:hidden}
.hero--typo .hero__tex{position:absolute;inset:-8% 0;z-index:-2}
.hero--typo .hero__tex img{width:100%;height:100%;object-fit:cover;opacity:.5}
.hero--typo .hero__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(165deg,rgba(46,29,25,.82),rgba(46,29,25,.94) 60%,rgba(67,44,38,.96))}
.hero--typo .hero__body{flex:1;display:grid;align-content:center;gap:clamp(16px,2.8vw,22px);padding:clamp(92px,10vh,122px) var(--gutter) clamp(16px,2.6vw,26px)}
.hero--typo .hero__body>.caps{max-width:none}
.hero--typo h1{font-size:clamp(46px,11vw,116px);max-width:11ch;min-width:0;overflow-wrap:break-word}
.hero--typo h1 em{font-style:normal;color:var(--brass-light)}
.hero--typo .hero__rule{width:74px;height:1px;background:var(--brass-light)}
.hero--typo .hero__lead{font-size:clamp(15px,1.3vw,20px);line-height:1.5;color:var(--snow-2);max-width:46ch}
.hero--typo .hero__cta{display:flex;gap:12px;flex-wrap:wrap}
.hero--typo .proof{padding:0 var(--gutter) clamp(20px,3.4vw,36px);display:grid;gap:10px}
.hero--typo .proof__lbl{display:flex;justify-content:space-between;gap:14px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--snow-2)}
.hero--typo .rail{display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:thin}
.hero--typo .rail__tile figure,.hero--typo .rail figure{flex:0 0 auto;width:clamp(118px,15vw,200px);background:rgba(241,236,228,.06);padding:6px;position:relative;margin:0}
.hero--typo .rail__tile img,.hero--typo .rail img{aspect-ratio:4/5;object-fit:cover;width:100%;outline:1px solid rgba(201,169,127,.5);outline-offset:-7px;transition:transform 900ms var(--ease)}
.hero--typo .rail a:hover img,.hero--typo .rail__tile:hover img{transform:scale(1.04)}
.hero--typo .rail__tile figcaption,.hero--typo .rail figcaption{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--snow-2);padding:8px 2px 2px;letter-spacing:.04em}
/* Podpis zawsze w jednej linii: dluzszy tytul (Salon z jadalnia) lamal sie na dwie i kafel robil sie wyzszy od sasiadow (Sylwia, 18.09). Nadmiar ucina wielokropek, strzalka zostaje. Kafle rownaja sie do gory. */
.hero--typo .rail{align-items:flex-start}
.hero--typo .rail figcaption>span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero--typo .rail figcaption>span:last-child{flex:0 0 auto}
.hero--typo .hero__side{display:grid;gap:clamp(18px,2.4vw,26px)}
/* Od 1100 px hero jest dwukolumnowe: po lewej sam tytul, po prawej opis z przyciskami
   wysrodkowany wzgledem tytulu. Wczesniej opis wisial pod tytulem, przez co pasek
   realizacji spadal pod krawedz ekranu, a prawa polowa stala pusta. */
/* Wysokosc od ekranu (svh) tylko na komputerze. Na telefonie pasek Safari chowa sie i wysuwa przy kazdym ruchu
   palcem, a w przegladarce wbudowanej (Wiadomosci, Instagram) zmienia to takze svh: hero zmienialo wysokosc
   w trakcie przewijania i strona skakala (nagrania Sylwii, 18.09). Na telefonie hero ma wysokosc tresci. */
@media(min-width:1201px){
 .hero--typo{min-height:100svh}
 .hero--typo .hero__body{grid-template-columns:minmax(0,1.06fr) minmax(400px,.94fr);column-gap:clamp(44px,5vw,96px)}
 .hero--typo .hero__body>.caps{grid-column:1/-1;grid-row:1;white-space:nowrap}
 .hero--typo h1{grid-column:1;grid-row:2}
 .hero--typo .hero__rule{grid-column:1;grid-row:3}
 .hero--typo .hero__side{grid-column:2;grid-row:2/span 2;align-self:center;
   padding-left:clamp(28px,2.6vw,48px);border-left:1px solid var(--brass-2)}
 .hero--typo .hero__lead{font-size:clamp(17px,1.35vw,22px);line-height:1.55;max-width:34ch}
 /* Przyciski same decyduja: obok siebie gdy kolumna ma miejsce, a gdy nie, jeden pod drugim
    i tej samej szerokosci, bo dwa rozne prostokaty jeden nad drugim wygladaja jak pomylka. */
 .hero--typo .hero__cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,258px),1fr));gap:12px}
 .hero--typo .hero__cta .btn{height:50px;padding:0 20px;letter-spacing:.14em;white-space:nowrap;justify-content:space-between}
 /* Cale hero ma sie miescic w pierwszym ekranie razem z paskiem realizacji, wiec na desktopie
    wysokosc jest sztywna, a tytul, odstepy i kafle skaluja sie takze od wysokosci okna (vh),
    nie tylko od szerokosci. Ponizej 1201 px zostaje stary uklad, bo na telefonie pasek ma prawo
    wystawac pod krawedz. */
 .hero--typo{height:100svh}
 /* Na szerokim monitorze hero bylo jedyna sekcja rozciagnieta na cala szerokosc, reszta strony
    siedzi w kolumnie 1360 px. Przez to tytul zdawal sie maly, a miedzy nim a opisem robila sie
    dziura. Teraz hero trzyma sie tej samej kolumny; pasek kafli dalej wychodzi poza prawa krawedz. */
 .hero--typo .hero__body{width:100%;max-width:calc(1360px + 2*var(--gutter));margin-inline:auto}
 /* Podpis paska trzyma sie kolumny, ale same kafle wychodza poza prawa krawedz ekranu —
    inaczej na szerokim monitorze tasma urywalaby sie w polowie z pustka obok. */
 .hero--typo .proof{max-width:none;padding-left:max(var(--gutter),calc((100% - 1360px)/2));padding-right:0}
 .hero--typo .proof__lbl{padding-right:max(var(--gutter),calc((100% - 1360px)/2))}
 .hero--typo h1{font-size:clamp(40px,min(11vw,12.4vh),132px)}
 .hero--typo .hero__body{min-height:0;padding-top:clamp(84px,8.5vh,118px);padding-bottom:clamp(14px,2vh,24px)}
 .hero--typo .rail__tile figure,.hero--typo .rail figure{width:clamp(120px,min(15vw,20vh),224px)}
 .hero--typo .proof{padding-bottom:clamp(16px,2.4vh,36px)}
}
@media(max-width:899px){.hero--typo .hero__cta{display:grid;width:100%}.hero--typo .hero__cta .btn{justify-content:space-between}}