@import url('fonts.css');

/* ============================================================
   meble.pasztaleniec.pl
   Tokeny zgodne z brandboardem. Skala większa niż w narzędziach
   warsztatowych, bo to materiał do czytania, nie do pracy.
   ============================================================ */

:root{
  --paper:#F6F3EA; --paper-2:#ECE7DB; --surface:#FDFCF8;
  --ink:#211F1C; --ink-2:#6B655C; --ink-3:rgba(33,31,28,.42);
  --accent:#DE5A1F; --accent-deep:#A63D12;
  --hairline:rgba(33,31,28,.14); --hairline-2:rgba(33,31,28,.07);

  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter Tight',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  --fs-100:.75rem; --fs-200:.8125rem; --fs-300:.9375rem; --fs-400:1.0625rem;
  --fs-500:1.3125rem; --fs-600:1.625rem; --fs-700:2.0625rem; --fs-800:2.5625rem;
  --fs-900:clamp(2.75rem,7vw,5.25rem);

  --t:1.5px; --tick:calc(var(--t)*8);
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:48px; --sp-6:64px; --sp-7:96px; --sp-8:128px;
  --container:1180px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-400); line-height:1.6;
  -webkit-font-smoothing:antialiased; font-synthesis-weight:none;
}
img,svg{ max-width:100%; display:block }
:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:3px }

.wrap{ max-width:var(--container); margin-inline:auto; padding-inline:20px }
@media(min-width:768px){ .wrap{ padding-inline:40px } }

h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.1;
  font-variation-settings:'opsz' 144,'SOFT' 20,'WONK' 1; margin:0; text-wrap:balance }
/* nazwa miasta nie może się dzielić w połowie, więc skala jest ostrożniejsza */
h1{ font-size:clamp(2.25rem,4.8vw,4rem); line-height:1.04; letter-spacing:-.02em; hyphens:none }
h2{ font-size:clamp(1.9rem,3.6vw,2.75rem); letter-spacing:-.01em }
h3{ font-size:var(--fs-500); font-variation-settings:'opsz' 72,'SOFT' 20,'WONK' 1 }
p{ margin:0 0 var(--sp-2); max-width:60ch }

.eyebrow{ font-family:var(--mono); font-size:var(--fs-100); font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; color:var(--ink-2); margin:0 0 var(--sp-2) }
.lead{ font-size:var(--fs-500); line-height:1.45; color:var(--ink-2) }
.muted{ color:var(--ink-2) }
.data{ font-family:var(--mono); font-size:var(--fs-200); letter-spacing:.06em; color:var(--ink-2) }
.data--up{ text-transform:uppercase; letter-spacing:.1em }

/* ---------- nagłówek ---------- */
.top{ position:sticky; top:0; z-index:30; background:var(--paper);
  border-bottom:1px solid var(--hairline) }
.top__in{ display:flex; align-items:center; gap:var(--sp-3);
  max-width:var(--container); margin-inline:auto; padding:12px 20px }
@media(min-width:768px){ .top__in{ padding-inline:40px } }
.top__mark{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit }
.top__mark svg{ width:30px; height:30px; flex:none }
.top__lockup{ display:flex; flex-direction:column }
.top__name{ font-family:var(--serif); font-variation-settings:'opsz' 96,'SOFT' 20,'WONK' 1;
  font-weight:600; font-size:17px; line-height:1.05 }
.top__sub{ font-family:var(--mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-2); margin-top:3px }
@media(max-width:560px){ .top__sub{ display:none } }
.top nav{ margin-left:auto; display:none; gap:var(--sp-3) }
@media(min-width:900px){ .top nav{ display:flex } }
.top nav a{ color:var(--ink); text-decoration:none; font-size:var(--fs-200); font-weight:500 }
.top nav a:hover{ color:var(--accent-deep) }
.top__tel{ font-family:var(--mono); font-size:var(--fs-200); font-weight:500;
  color:var(--ink); text-decoration:none; margin-left:auto; white-space:nowrap }
@media(min-width:900px){ .top__tel{ margin-left:0 } }
.top__tel:hover{ color:var(--accent-deep) }

/* ---------- przyciski ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--fs-300); font-weight:600; padding:14px 26px; border:0; border-radius:3px;
  cursor:pointer; text-decoration:none; transition:background .14s, color .14s, border-color .14s }
.btn--main{ background:var(--accent-deep); color:var(--paper) }
.btn--main:hover{ background:var(--ink) }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--hairline) }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent-deep) }

/* ---------- hero ---------- */
.hero{ padding-block:var(--sp-6) var(--sp-7) }
@media(min-width:900px){
  .hero__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
    gap:var(--sp-6); align-items:center }
}
.hero h1{ margin-bottom:var(--sp-3) }

/* Hierarchia w hero: najpierw co powstaje, potem kto to prowadzi.
   Dwa stopnie i dwa kolory zamiast jednego bloku tekstu. */
.hero__what{ font-size:clamp(1.15rem,1.9vw,1.45rem); line-height:1.35; font-weight:600;
  max-width:26ch; margin:0 0 var(--sp-2); text-wrap:balance }
.hero__how{ font-size:var(--fs-400); line-height:1.55; color:var(--ink-2);
  max-width:44ch; margin:0 0 var(--sp-4) }

/* Człony adresu nie mogą się rozdzielać w środku, więc każdy jest osobnym,
   nierozrywalnym blokiem, a separator znika przy zawinięciu. */
.hero__area{ display:flex; flex-wrap:wrap; gap:0 8px; margin-top:var(--sp-4) }
.hero__area span{ white-space:nowrap }
@media(max-width:520px){ .hero__area span[aria-hidden]{ display:none } }
.hero__cta{ display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center }
.hero__meta{ margin-top:var(--sp-5); display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5) }
.hero__meta div{ min-width:120px }
.hero__meta .k{ font-family:var(--mono); font-size:var(--fs-100); text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-2) }
.hero__meta .v{ font-family:var(--mono); font-size:var(--fs-500); font-variant-numeric:tabular-nums }
.hero__art{ margin-top:var(--sp-5) }
@media(min-width:900px){ .hero__art{ margin-top:0 } }
.hero__art svg{ width:100%; height:auto }

/* ---------- sekcje ---------- */
.sec{ padding-block:var(--sp-7); border-top:1px solid var(--hairline) }
@media(min-width:768px){ .sec{ padding-block:var(--sp-8) } }
.sec--tint{ background:var(--paper-2); border-top:0 }
.sec__head{ max-width:60ch; margin-bottom:var(--sp-5) }
.grid{ display:grid; gap:var(--sp-4) }
@media(min-width:800px){
  .grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}

.card{ background:var(--surface); border:1px solid var(--hairline); padding:var(--sp-4) }
.card__art{ background:var(--paper-2); padding:var(--sp-3); margin:calc(-1*var(--sp-4))
  calc(-1*var(--sp-4)) var(--sp-4); display:grid; place-items:center }
.card h3{ margin-bottom:var(--sp-2) }
.card__more{ font-family:var(--mono); font-size:var(--fs-100); text-transform:uppercase;
  letter-spacing:.1em; color:var(--accent-deep); text-decoration:none; display:inline-block;
  margin-top:var(--sp-2) }
.card__more:hover{ text-decoration:underline }

/* ---------- linia wymiarowa ---------- */
.dim{ display:flex; align-items:center; gap:calc(var(--t)*8); color:var(--accent) }
.dim::before,.dim::after{ content:""; flex:1 1 auto; height:var(--tick);
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-size:100% var(--t), var(--t) 100%; background-repeat:no-repeat }
.dim::before{ background-position:left center,left center }
.dim::after{ background-position:right center,right center }
.dim__label{ flex:0 0 auto; font-family:var(--mono); font-size:max(10px,calc(var(--t)*6.4));
  font-weight:500; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-2); white-space:nowrap }
.dim--lg{ --t:2.5px }

/* ---------- sekwencja trzech stanów ---------- */
.seq{ display:grid; gap:var(--sp-3); counter-reset:step }
@media(min-width:800px){ .seq{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.seq__item{ counter-increment:step }
.seq__frame{ background:var(--paper-2); aspect-ratio:4/3; display:grid; place-items:center;
  overflow:hidden; padding:var(--sp-2) }
.seq__frame--tech{ background:var(--surface); border:1px solid var(--hairline) }
.seq__frame img{ width:100%; height:100%; object-fit:cover }
.seq__cap{ margin-top:var(--sp-2); display:flex; gap:10px; align-items:baseline }
.seq__cap::before{ content:counter(step,decimal-leading-zero); font-family:var(--mono);
  font-size:var(--fs-100); color:var(--accent-deep); letter-spacing:.1em }
.seq__cap b{ display:block; font-size:var(--fs-300) }
.seq__cap span{ color:var(--ink-2); font-size:var(--fs-200) }

/* ---------- kroki procesu ---------- */
.steps{ list-style:none; padding:0; margin:var(--sp-5) 0 0; counter-reset:s; max-width:64ch }
.steps li{ counter-increment:s; display:grid; grid-template-columns:auto 1fr; gap:var(--sp-3);
  padding:var(--sp-3) 0; border-bottom:1px solid var(--hairline) }
.steps li::before{ content:counter(s,decimal-leading-zero); font-family:var(--mono);
  font-size:var(--fs-100); letter-spacing:.1em; color:var(--accent-deep); padding-top:4px }
.steps b{ display:block }
.steps span{ color:var(--ink-2); font-size:var(--fs-300) }
.steps .num{ font-family:var(--mono); color:var(--ink); font-weight:500 }

/* ---------- realizacja ---------- */
.case{ display:grid; gap:var(--sp-4) }
@media(min-width:900px){ .case{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr) } }
.case__shots{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-2) }
.case__shots figure{ margin:0 }
.case__shots img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--paper-2) }
.case__shots figcaption{ font-family:var(--mono); font-size:var(--fs-100); color:var(--ink-2);
  letter-spacing:.06em; margin-top:6px; text-transform:uppercase }
.case__shots .wide{ grid-column:1/-1 }
.case__shots .wide img{ aspect-ratio:3/2 }
.specs{ margin-top:var(--sp-3) }
.spec-row{ display:flex; align-items:baseline; gap:var(--sp-2);
  padding-block:10px; border-bottom:1px solid var(--hairline-2) }
.spec-row:last-child{ border-bottom:0 }
.spec-row__k{ font-family:var(--mono); font-size:var(--fs-100); text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-2) }
.spec-row__f{ flex:1 1 auto; height:1px; background:var(--hairline-2); transform:translateY(-.3em) }
.spec-row__v{ font-family:var(--mono); font-size:var(--fs-200); font-weight:500;
  text-align:right; font-variant-numeric:tabular-nums }

.note{ border-left:2px solid var(--accent); padding-left:var(--sp-3); margin:var(--sp-4) 0 }
.note p{ margin:0 }

/* ============================================================
   WARIANTY SEKCJI
   Rytm strony ma się łamać. Każda sekcja różni się tłem, szerokością
   albo osią układu, inaczej całość czyta się jak jeden długi formularz.
   ============================================================ */

/* pełna szerokość, obraz dochodzi do krawędzi okna */
.split{ display:grid; gap:0; align-items:stretch }
@media(min-width:900px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  .split--rev .split__media{ order:2 }
}
.split__media{ position:relative; min-height:56vw }
@media(min-width:900px){ .split__media{ min-height:520px } }
.split__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.split__body{ padding:var(--sp-6) 20px }
@media(min-width:900px){ .split__body{ padding:var(--sp-7) clamp(32px,5vw,80px);
  display:flex; flex-direction:column; justify-content:center } }
.split__body .inner{ max-width:46ch }

/* sekcja na atramencie: jeden przerywnik na stronę, nie motyw przewodni */
.sec--dark{ background:var(--ink); color:var(--paper); border-top:0 }
.sec--dark h2,.sec--dark h3{ color:var(--paper) }
.sec--dark .muted,.sec--dark .lead{ color:rgba(246,243,234,.72) }
.sec--dark .eyebrow{ color:rgba(246,243,234,.55) }
.sec--dark .spec-row{ border-color:rgba(246,243,234,.14) }
.sec--dark .spec-row__k{ color:rgba(246,243,234,.6) }
.sec--dark .spec-row__f{ background:rgba(246,243,234,.14) }
.sec--dark .note{ border-color:var(--accent) }

/* układ z przesunięciem: tekst nie startuje od lewej krawędzi kontenera */
.offset{ display:grid; gap:var(--sp-4) }
@media(min-width:900px){
  .offset{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--sp-6) }
  .offset--tight{ grid-template-columns:minmax(0,4fr) minmax(0,8fr) }
}
/* Przyklejenie tylko tam, gdzie obok jest długa kolumna do przewinięcia.
   Na wąskim ekranie kolumny są pod sobą, więc sticky zasłaniałby treść. */
.sticky{ align-self:start }
@media(min-width:900px){ .sticky{ position:sticky; top:96px } }

/* ---------- duża liczba jako bohater sekcji ---------- */
.bignum{ display:grid; gap:var(--sp-3) }
@media(min-width:900px){ .bignum{ grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:var(--sp-6); align-items:start } }
.bignum__v{ font-family:var(--serif); font-variation-settings:'opsz' 144,'SOFT' 20,'WONK' 1;
  font-weight:600; font-size:clamp(4rem,11vw,8.5rem); line-height:.86; letter-spacing:-.03em;
  margin:0; color:var(--paper) }
.sec--dark .bignum__v{ color:var(--paper) }
.bignum__b h2{ font-size:clamp(1.5rem,2.6vw,2rem) }

/* ---------- nagłówek karuzeli z nawigacją ---------- */
.reel__head{ display:flex; align-items:baseline; gap:var(--sp-3);
  justify-content:space-between; margin-bottom:var(--sp-2) }
.reel__nav{ display:flex; gap:6px; flex:none }
.reel__nav button{ width:40px; height:40px; border:1px solid rgba(246,243,234,.3);
  background:transparent; color:var(--paper); font-size:16px; cursor:pointer; border-radius:3px;
  font-family:var(--mono); line-height:1 }
.reel__nav button:hover{ border-color:var(--accent); color:var(--accent) }
.sec:not(.sec--dark) .reel__nav button{ border-color:var(--hairline); color:var(--ink) }

/* ---------- zdjęcie z adnotacją ---------- */
.shot{ position:relative; margin:0; background:var(--paper-2); overflow:hidden }
.shot img{ width:100%; display:block }
.shot__ann{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.shot__cap{ font-family:var(--mono); font-size:var(--fs-100); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-2); margin-top:8px }
.sec--dark .shot__cap{ color:rgba(246,243,234,.6) }

/* ---------- przełącznik stanów ---------- */
.states{ display:grid; gap:var(--sp-3) }
@media(min-width:900px){ .states{ grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--sp-6); align-items:center } }
.states__stage{ position:relative; background:var(--paper-2); aspect-ratio:4/3; overflow:hidden }
/* display:block, nie grid z place-items:center — inaczej height:100% na dziecku
   nie działa i rysunek zostaje mały pośrodku kadru */
.states__stage > *{ position:absolute; inset:0; opacity:0; transition:opacity .35s ease;
  display:block; padding:var(--sp-4) }
.states__stage > *.on{ opacity:1 }
.states__stage > *:has(img){ padding:0 }
.states__stage img{ width:100%; height:100%; object-fit:cover }
.states__stage svg{ width:100%; height:100% }
.states__nav{ display:flex; flex-direction:column; gap:2px }
.states__nav button{ text-align:left; background:transparent; border:0; cursor:pointer;
  padding:var(--sp-3) 0 var(--sp-3) var(--sp-3); border-left:2px solid var(--hairline);
  font-family:inherit; color:var(--ink-2); transition:border-color .18s, color .18s }
.states__nav button:hover{ border-color:var(--ink-2) }
.states__nav button.on{ border-color:var(--accent); color:var(--ink) }
.states__nav b{ display:block; font-size:var(--fs-400); font-weight:600 }
.states__nav span{ font-size:var(--fs-200) }
.states__nav .idx{ font-family:var(--mono); font-size:var(--fs-100); letter-spacing:.1em;
  color:var(--accent-deep); display:block; margin-bottom:2px }

/* ---------- pasek liczb ---------- */
.facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hairline) }
@media(min-width:700px){ .facts{ grid-template-columns:repeat(4,1fr) } }
/* selektor bezpośredni: inaczej padding trafia także w .v i .k i rozrywa kafel */
.facts > div{ background:var(--paper); padding:var(--sp-4) var(--sp-3) }
.sec--dark .facts{ background:rgba(246,243,234,.14) }
.sec--dark .facts > div{ background:var(--ink) }
.facts .v{ font-family:var(--mono); font-size:var(--fs-600); font-variant-numeric:tabular-nums;
  line-height:1 }
.facts .k{ font-family:var(--mono); font-size:var(--fs-100); text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-2); margin-top:8px }
.sec--dark .facts .k{ color:rgba(246,243,234,.55) }

/* ---------- oferta ---------- */
.offer{ display:grid; gap:1px; background:var(--hairline) }
@media(min-width:640px){ .offer{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1000px){ .offer{ grid-template-columns:repeat(3,1fr) } }
.offer > article{ background:var(--paper); padding:var(--sp-4) }
.offer svg{ width:82px; height:66px; margin-bottom:var(--sp-3) }
.offer h3{ font-size:var(--fs-400); margin-bottom:6px }
.offer p{ font-size:var(--fs-300); color:var(--ink-2); margin:0 }

/* ---------- proces ---------- */
/* padding:0 jest konieczny: <ol> ma domyślne wcięcie 40 px, które na telefonie
   wyglądało jak przypadkowy margines z lewej.
   Poniżej 760 px kroki przewijają się poziomo wzdłuż wspólnej linii, zamiast
   rozciągać sekcję na pięć ekranów w dół. */
.flow{ display:grid; gap:var(--sp-3); counter-reset:f; margin:var(--sp-5) 0 0; padding:0;
  list-style:none }
@media(max-width:759px){
  .flow{ grid-auto-flow:column; grid-auto-columns:76%; gap:0;
    overflow-x:auto; scroll-snap-type:x mandatory;
    margin-inline:-20px; padding-inline:20px; scroll-padding-left:20px; scroll-behavior:smooth;
    scrollbar-width:none }
  .flow::-webkit-scrollbar{ display:none }
  .flow > li{ scroll-snap-align:start; padding-right:var(--sp-4) }
}

/* Własny wskaźnik przewijania. Natywny pasek jest na telefonach nakładkowy
   i znika po chwili, więc użytkownik nie wie, że treść jedzie w bok.
   Ten jest widoczny cały czas: jasne pole i pomarańczowy uchwyt. */
.scroller{ display:none }
@media(max-width:759px){
  .scroller{ display:block; height:3px; background:var(--hairline);
    margin:var(--sp-3) 0 0; position:relative; overflow:hidden }
  .scroller__bar{ position:absolute; left:0; top:0; bottom:0; background:var(--accent);
    width:30%; transition:transform .08s linear }
}
.sec--dark .scroller{ background:rgba(246,243,234,.2) }
@media(min-width:760px){ .flow{ grid-template-columns:repeat(5,1fr); gap:0 } }
@media (prefers-reduced-motion:reduce){ .flow{ scroll-behavior:auto } }
.flow > li{ counter-increment:f; list-style:none; padding:var(--sp-3) var(--sp-3) var(--sp-4);
  position:relative }
@media(min-width:760px){ .flow > li{ padding-left:0; padding-right:var(--sp-3) } }
.flow svg{ width:64px; height:52px; margin:var(--sp-2) 0 var(--sp-3) }
.flow .n{ font-family:var(--mono); font-size:var(--fs-100); letter-spacing:.1em; color:var(--accent-deep) }
.flow b{ display:block; margin-bottom:4px }
.flow span{ font-size:var(--fs-200); color:var(--ink-2) }

/* ---------- trzy stany, układ obok siebie ---------- */
.trio{ display:grid; gap:var(--sp-3) }
@media(min-width:800px){ .trio{ grid-template-columns:repeat(3,1fr) } }
.trio__f{ background:var(--paper-2); aspect-ratio:4/3; display:grid; place-items:center; padding:var(--sp-3) }
.trio__f svg{ width:100%; height:100% }
/* display:block, inaczej place-items:center nie pozwala obrazkowi wypełnić kadru
   i pionowe zdjęcie rozpycha wiersz ponad aspect-ratio */
/* tło takie samo jak przy rysunkach: pionowe zdjęcie w poziomym kadrze zostawia
   pasy po bokach, ale mają zniknąć w tle, a nie świecić czernią */
.trio__f--photo{ padding:0; background:var(--paper-2); display:block }
.trio__f--photo img{ width:100%; height:100%; object-fit:contain }
.trio__c{ margin-top:var(--sp-2) }
.trio__c b{ display:block; font-size:var(--fs-300) }
.trio__c span{ font-size:var(--fs-200); color:var(--ink-2) }
.trio__c .n{ font-family:var(--mono); font-size:var(--fs-100); letter-spacing:.1em;
  color:var(--accent-deep); display:block; margin-bottom:2px }

/* ---------- karuzela, zdjęcia w całości ---------- */
/* scroll-padding, nie tylko padding: bez tego snap dokleja kadr do samej krawędzi
   ekranu i pierwsze zdjęcie traci margines */
.reel{ display:flex; gap:var(--sp-2); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:var(--sp-2); margin-inline:-20px; padding-inline:20px;
  scroll-padding-left:20px; scroll-behavior:smooth }
@media(min-width:768px){ .reel{ margin-inline:-40px; padding-inline:40px; scroll-padding-left:40px } }
@media (prefers-reduced-motion:reduce){ .reel{ scroll-behavior:auto } }
.reel figure{ margin:0; flex:0 0 auto; scroll-snap-align:start }
.reel img{ height:min(58vw,400px); width:auto; object-fit:contain; background:var(--surface) }
.sec--dark .reel img{ background:#2b2926 }
.reel figcaption{ font-family:var(--mono); font-size:var(--fs-100); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-2); margin-top:8px }
.sec--dark .reel figcaption{ color:rgba(246,243,234,.6) }
.reel::-webkit-scrollbar{ height:3px }
.reel::-webkit-scrollbar-thumb{ background:var(--hairline) }

/* ---------- materiały ---------- */
.mats{ display:grid; gap:var(--sp-3) }
@media(min-width:700px){ .mats{ grid-template-columns:repeat(3,1fr) } }
.mats article{ border-top:1px solid var(--hairline); padding-top:var(--sp-3) }
.mats h3{ font-size:var(--fs-400); margin-bottom:6px }
.mats p{ font-size:var(--fs-300); color:var(--ink-2); margin:0 }

/* ---------- galeria realizacji ----------
   Trzy rytmy w jednym bloku: szeroki kadr otwierający, rząd trzech pionowych
   i para poziomych na domknięcie. Mieszamy orientacje, więc proporcje są
   przypisane do roli kadru, nie do zdjęcia.

   Do 560 px jedna kolumna. Wyżej dwie, gdzie pionowe stoją parami.
   Od 760 px sześć kolumn i pełny układ. */
.gal{ display:grid; gap:var(--sp-2); grid-template-columns:1fr }
@media(min-width:560px){ .gal{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:760px){ .gal{ grid-template-columns:repeat(6,1fr); gap:var(--sp-3) } }
/* figura jako kolumna: bez tego obraz z height:100% zjada wiersz siatki,
   a podpis wchodzi na kadr z następnego rzędu */
.gal figure{ margin:0; display:flex; flex-direction:column }
.gal img{ width:100%; height:auto; object-fit:cover; background:var(--paper-2) }
.gal figcaption{ font-family:var(--mono); font-size:var(--fs-100); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-2); margin-top:8px }
/* kadr otwierający: zawsze pełna szerokość, na wąskim ekranie mniej panoramiczny */
.gal .g-hero{ grid-column:1/-1 }
.gal .g-hero img{ aspect-ratio:4/3 }
@media(min-width:560px){ .gal .g-hero img{ aspect-ratio:16/9 } }

/* pionowe: parami na średnim ekranie, trójką na dużym */
.gal .g-tall img{ aspect-ratio:3/4 }
@media(min-width:760px){ .gal .g-tall{ grid-column:span 2 } }

/* Przy dwóch kolumnach trzeci pionowy kadr zostawałby sam i robił dziurę w rzędzie,
   więc dostaje pełną szerokość i poziomą proporcję. */
@media(min-width:560px) and (max-width:759px){
  .gal figure:nth-of-type(4){ grid-column:1/-1 }
  .gal figure:nth-of-type(4) img{ aspect-ratio:16/10 }
}

/* poziome domknięcie: po połowie rzędu */
.gal .g-half img{ aspect-ratio:4/3 }
@media(min-width:560px){ .gal .g-half{ grid-column:1/-1 } }
@media(min-width:760px){ .gal .g-half{ grid-column:span 3 } .gal .g-half img{ aspect-ratio:16/10 } }

/* ---------- przenikanie próbek materiału ---------- */
.swap{ position:relative; aspect-ratio:4/3; margin-top:var(--sp-4); overflow:hidden;
  background:var(--paper-2) }
.swap img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .9s ease }
.swap img.on{ opacity:1 }
.swap__name{ position:absolute; left:0; bottom:0; background:var(--paper);
  font-family:var(--mono); font-size:var(--fs-100); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); padding:8px 12px }
@media (prefers-reduced-motion:reduce){ .swap img{ transition:none } }

/* ---------- FAQ ---------- */
.faq{ max-width:70ch }
.faq details{ border-bottom:1px solid var(--hairline) }
.faq summary{ cursor:pointer; list-style:none; padding:var(--sp-3) 0; font-weight:600;
  display:flex; gap:var(--sp-3); align-items:baseline }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::before{ content:"+"; font-family:var(--mono); color:var(--accent-deep); flex:none }
.faq details[open] summary::before{ content:"–" }
.faq p{ margin:0 0 var(--sp-3) 26px; color:var(--ink-2); font-size:var(--fs-300) }

/* ---------- formularz ---------- */
.form{ display:grid; gap:var(--sp-3) }
@media(min-width:700px){ .form{ grid-template-columns:repeat(2,1fr) } .form .full{ grid-column:1/-1 } }
.form label{ display:block; font-family:var(--mono); font-size:var(--fs-100);
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink-2); margin-bottom:6px }
.form input,.form select,.form textarea{ width:100%; font-family:inherit; font-size:var(--fs-300);
  padding:12px 14px; background:var(--surface); border:1px solid var(--hairline);
  border-radius:3px; color:var(--ink) }
.form textarea{ min-height:120px; resize:vertical }
.form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(222,90,31,.18) }
.form .hint{ font-size:var(--fs-200); color:var(--ink-2) }

/* pułapka na boty: poza ekranem, niedostępna z klawiatury i dla czytników */
.pot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.form-err{ font-size:var(--fs-200); color:var(--bad, #A63D12); margin-top:var(--sp-2) }

/* potwierdzenie wysyłki */
.form-ok{ border:1px solid var(--accent); border-left-width:3px; padding:var(--sp-4);
  background:var(--surface) }
.form-ok__t{ font-family:var(--serif); font-variation-settings:'opsz' 72,'SOFT' 20,'WONK' 1;
  font-weight:600; font-size:var(--fs-500); margin:0 0 6px }

/* adres e-mail jako pełnoprawny odnośnik, nie drobny dopisek */
.link-mail{ font-size:var(--fs-400); color:var(--ink); text-decoration:underline;
  text-decoration-color:var(--accent); text-decoration-thickness:2px;
  text-underline-offset:.22em }
.link-mail:hover{ color:var(--accent-deep) }

/* ---------- wezwanie do działania ---------- */
.cta{ margin-top:var(--sp-6); border-top:2px solid var(--accent); padding-top:var(--sp-4);
  display:grid; gap:var(--sp-3) }
@media(min-width:820px){ .cta{ grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:var(--sp-6) } }
.cta h3{ margin-bottom:6px }
.cta p{ margin:0; max-width:52ch }
.cta__act{ display:flex; flex-direction:column; gap:var(--sp-2); align-items:flex-start }
@media(min-width:820px){ .cta__act{ align-items:flex-end } }
.cta__tel{ font-family:var(--mono); font-size:var(--fs-200); color:var(--ink-2);
  text-decoration:none; letter-spacing:.04em }
.cta__tel:hover{ color:var(--accent-deep); text-decoration:underline }

/* ---------- animacja ---------- */
/* Kreska dokłada się pociągnięcie po pociągnięciu, linia wymiarowa rozmierza od środka.
   Jeden ruch na wejściu, nic poza tym. */
/* Stan wyjściowy animacji obowiązuje wyłącznie, gdy JavaScript działa i zdąży dodać
   klasę .js na <html>. Bez tego treść jest po prostu widoczna: strona ma być czytelna
   dla wyszukiwarki i przy wyłączonym skrypcie, a nie znikać pod opacity:0. */
.js .draw path{ opacity:0 }
.js .draw.is-in path{ animation:ink .42s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:calc(var(--i,0) * 55ms) }
@keyframes ink{ from{ opacity:0; transform:translateY(3px) } to{ opacity:1; transform:none } }

.js .draw rect[data-dim]{ transform:scaleX(0); transform-origin:center; transform-box:fill-box }
.js .draw.is-in rect[data-dim]{ animation:measure .5s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:var(--dim-delay,.5s) }
@keyframes measure{ to{ transform:scaleX(1) } }
.js .draw text{ opacity:0 }
.js .draw.is-in text{ animation:ink .4s ease forwards;
  animation-delay:calc(var(--dim-delay,.5s) + .18s) }

.js .reveal{ opacity:0; transform:translateY(10px) }
.js .reveal.is-in{ animation:rise .55s cubic-bezier(.2,.7,.3,1) forwards }
@keyframes rise{ to{ opacity:1; transform:none } }

@media (prefers-reduced-motion:reduce){
  .js .draw path,.js .draw text,.js .reveal{ opacity:1; transform:none; animation:none }
  .js .draw rect[data-dim]{ transform:none }
}

/* ---------- stopka ---------- */
.foot{ border-top:1px solid var(--hairline); padding-block:var(--sp-6) }
.foot__grid{ display:grid; gap:var(--sp-4) }
@media(min-width:800px){ .foot__grid{ grid-template-columns:repeat(3,1fr) } }
.foot a{ color:var(--ink); text-decoration:none }
.foot a:hover{ color:var(--accent-deep); text-decoration:underline }

/* dopisek „nieobowiązkowo" przy etykiecie pola */
.form .opt{ text-transform:none; letter-spacing:0; color:var(--ink-3); font-weight:400 }

/* ---------- zgoda / potwierdzenie przy formularzu ---------- */
.check{ display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  font-size:var(--fs-200); color:var(--ink-2); line-height:1.5 }
.check input{ width:18px; height:18px; margin:2px 0 0; flex:none;
  accent-color:var(--accent-deep); cursor:pointer }
.check a{ color:var(--ink); text-decoration:underline;
  text-decoration-color:var(--accent); text-underline-offset:.18em }
.check a:hover{ color:var(--accent-deep) }
.form .hint a{ color:var(--ink); text-decoration:underline;
  text-decoration-color:var(--accent); text-underline-offset:.18em }

/* pole „do uzupełnienia" widoczne, żeby brak NIP-u nie umknął przed publikacją */
.todo{ font-family:var(--mono); border-bottom:1px dashed currentColor; padding-bottom:1px }