/* ============================================================
   Baumeister Voss — kierunek B · SCHNITTKANTE
   Szwajcarska siatka + rysunek techniczny.
   Zero zaokrągleń. Zero cieni. Głębokość robi linia.
   ============================================================ */

:root{
  --papier:      #E9E7E2;
  --papier-tief: #DEDBD4;
  --tusche:      #111213;
  --tusche-weich:#5A5A56;
  --kante:       rgba(17,18,19,.18);
  --raster:      rgba(17,18,19,.055);
  --moor:        #2F6B3F;
  --moor-tief:   #1F4A2C;
  --salbei:      #7A8B74;
  --nacht:       #16181A;
  /* jedyny czerwony w projekcie — wyłącznie błąd walidacji. Ceglany, nie
     alarmowy: ma pasować do palety, nie krzyczeć. Kontrast na --papier 5.9:1 */
  --signal:      #A33B2A;

  --ease: cubic-bezier(.16,1,.3,1);
  --fast: .25s;
  --mid:  .55s;
  --slow: 1.1s;

  --pad: clamp(20px, 6vw, 120px);

  --t-display: clamp(38px, 8.6vw, 128px);
  --t-h2:      clamp(30px, 5.2vw, 68px);
  --t-h3:      clamp(21px, 2.4vw, 30px);
  --t-body-l:  clamp(17px, 1.5vw, 20px);
  --t-mono:    11px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  background:var(--papier);
  color:var(--tusche);
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:16px;
  line-height:1.62;
  overflow-x:hidden;
  background-image:
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size:64px 64px;
}

img{ max-width:100%; display:block }

::selection{ background:var(--moor); color:var(--papier) }

.mono{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--t-mono);
  letter-spacing:.2em;
  text-transform:uppercase;
}

.wrap{ padding-left:var(--pad); padding-right:var(--pad) }

/* ---------------------------- SKIP LINK ---------------------------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--tusche); color:var(--papier); padding:12px 20px;
}
.skip:focus{ left:0 }

:focus-visible{ outline:2px solid var(--moor); outline-offset:3px }

/* ------------------------------ HEADER ----------------------------- */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; gap:24px;
  padding:0 var(--pad);
  height:66px;
  background:rgba(233,231,226,.86);
  -webkit-backdrop-filter:blur(12px);   /* Safari/iOS wymaga prefiksu */
  backdrop-filter:blur(12px);
  border-bottom:2px solid var(--tusche);
}

.logo{ display:flex; align-items:baseline; gap:10px; text-decoration:none; color:inherit; flex-shrink:0 }
.logo__mark{
  width:26px; height:26px; border:2px solid var(--tusche); position:relative; align-self:center;
}
.logo__mark::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:50%;
  background:var(--moor);
}
.logo__txt{ font-weight:700; letter-spacing:-.03em; font-size:17px; white-space:nowrap }
.logo__txt em{ font-style:normal; color:var(--tusche-weich); font-weight:400 }

.hdr__nav{ display:flex; gap:26px; margin-left:auto }
.hdr__nav a{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--tusche-weich); text-decoration:none;
  padding:4px 0; position:relative; transition:color var(--fast) var(--ease);
}
.hdr__nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--moor);
  transform:scaleX(0); transform-origin:left; transition:transform var(--fast) var(--ease);
}
.hdr__nav a:hover{ color:var(--tusche) }
.hdr__nav a:hover::after{ transform:scaleX(1) }

.hdr__right{ display:flex; align-items:center; gap:18px; margin-left:auto }
.hdr__nav + .hdr__right{ margin-left:0 }

.hdr__tel{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em;
  color:var(--tusche); text-decoration:none; border-bottom:2px solid var(--moor); padding-bottom:2px;
  white-space:nowrap;
}

/* przełącznik języka */
.lang{ display:flex; align-items:center; gap:2px }
.lang__btn{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em;
  background:none; border:0; cursor:pointer; color:var(--tusche-weich);
  padding:5px 6px 4px; position:relative; transition:color var(--fast) var(--ease);
}
.lang__btn:hover{ color:var(--tusche) }
.lang__btn.is-active{ color:var(--tusche); font-weight:700 }
.lang__btn.is-active::after{
  content:''; position:absolute; left:6px; right:6px; bottom:0; height:2px; background:var(--moor);
}
.lang__sep{ color:var(--kante); font-family:'JetBrains Mono',monospace; font-size:11px }

/* ------------------------- MENU MOBILNE ---------------------------- */
/* Hamburger: kwadrat 44×44 z ramką 2 px — ten sam język co .btn--ghost.
   Zero zaokrągleń, belki 2 px, bez cienia. Widoczny dopiero poniżej 900 px. */
.burger{
  display:none; width:44px; height:44px; padding:0; flex-shrink:0;
  border:2px solid var(--tusche); background:none; cursor:pointer; position:relative;
  transition:background var(--fast) var(--ease);
}
.burger:hover{ background:rgba(17,18,19,.06) }
.burger__box{ position:absolute; left:50%; top:50%; width:20px; height:14px; transform:translate(-50%,-50%) }
.burger__box i{
  position:absolute; left:0; width:100%; height:2px; background:var(--tusche);
  transition:transform var(--mid) var(--ease), opacity var(--fast) var(--ease);
}
.burger__box i:nth-child(1){ top:0 }
.burger__box i:nth-child(2){ top:6px }
.burger__box i:nth-child(3){ top:12px }
/* X — używane przez przycisk zamykania w panelu */
.burger__box.is-x i:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.burger__box.is-x i:nth-child(2){ opacity:0; transform:translateX(-10px) }
.burger__box.is-x i:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

.mnav{
  position:fixed; inset:0; z-index:95;
  visibility:hidden;
  /* visibility gaśnie dopiero PO wysunięciu panelu, żeby animację było widać... */
  transition:visibility 0s linear var(--mid);
  /* ...ale zdarzenia odcinamy natychmiast — inaczej przez te 0,55 s
     niewidoczne tło łapałoby kliknięcia zamiast strony pod spodem. */
  pointer-events:none;
}
.mnav.is-open{ visibility:visible; transition-delay:0s; pointer-events:auto }

.mnav__scrim{
  position:absolute; inset:0; background:rgba(17,18,19,.55);
  opacity:0; transition:opacity var(--mid) var(--ease);
}
.mnav.is-open .mnav__scrim{ opacity:1 }

.mnav__panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(88vw, 420px);
  background:var(--papier);
  border-left:2px solid var(--tusche);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform var(--mid) var(--ease);
  overflow-y:auto; overscroll-behavior:contain;
  /* ten sam raster co strona — panel ma być wycinkiem tej samej kartki */
  background-image:
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size:64px 64px;
}
.mnav.is-open .mnav__panel{ transform:none }
.mnav__panel:focus{ outline:none }

.mnav__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; height:66px; flex-shrink:0;
  border-bottom:2px solid var(--tusche);
}
.mnav__eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--tusche-weich);
}
.mnav__close{
  width:44px; height:44px; padding:0; position:relative; cursor:pointer;
  border:2px solid var(--tusche); background:none;
}

.mnav__list{ display:flex; flex-direction:column; padding:8px 0 0 }
.mnav__list a{
  display:flex; align-items:baseline; gap:14px;
  padding:20px 20px; text-decoration:none; color:var(--tusche);
  border-bottom:1px solid var(--kante);
  font-size:clamp(26px,7.4vw,38px); font-weight:700; letter-spacing:-.04em; line-height:1;
  /* wjazd od prawej ze schodkiem — ten sam ruch co reveal sekcji */
  opacity:0; transform:translateX(26px);
  transition:opacity var(--mid) var(--ease), transform var(--mid) var(--ease),
             background var(--fast) var(--ease);
}
.mnav.is-open .mnav__list a{ opacity:1; transform:none }
.mnav.is-open .mnav__list a:nth-child(1){ transition-delay:.10s }
.mnav.is-open .mnav__list a:nth-child(2){ transition-delay:.16s }
.mnav.is-open .mnav__list a:nth-child(3){ transition-delay:.22s }
.mnav.is-open .mnav__list a:nth-child(4){ transition-delay:.28s }
.mnav.is-open .mnav__list a:nth-child(5){ transition-delay:.34s }
.mnav__list a:hover,.mnav__list a:focus-visible{ background:var(--papier-tief) }
.mnav__n{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em;
  color:var(--moor); font-weight:400; flex-shrink:0;
}

.mnav__foot{
  margin-top:auto; padding:26px 20px 30px; border-top:2px solid var(--tusche);
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.mnav__tel{
  font-family:'JetBrains Mono',monospace; font-size:19px; letter-spacing:.06em;
  color:var(--tusche); text-decoration:none;
  border-bottom:2px solid var(--moor); padding-bottom:4px;
}
.mnav__hours{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tusche-weich); line-height:1.9;
}
.lang--mnav{ margin-top:6px }
.lang--mnav .lang__btn{ font-size:13px; padding:8px 10px 7px }

/* ------------------------------ BUTTONS ---------------------------- */
.btn{
  display:inline-block; position:relative; overflow:hidden;
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; cursor:pointer;
  padding:18px 34px; border:2px solid var(--moor); background:var(--moor); color:var(--papier);
  transition:border-color var(--mid) var(--ease);
}
.btn span{ position:relative; z-index:2 }
.btn::before{
  content:''; position:absolute; inset:0; background:var(--tusche);
  transform:translateY(101%); transition:transform var(--mid) var(--ease);
}
.btn:hover{ border-color:var(--tusche) }
.btn:hover::before{ transform:translateY(0) }

.btn--ghost{ background:none; border-color:var(--tusche); color:var(--tusche) }
.btn--ghost::before{ background:var(--tusche) }
.btn--ghost:hover{ color:var(--papier) }

/* --------------------------- SEKCJE / NAGŁÓWKI --------------------- */
.sec{ border-top:2px solid var(--tusche); padding:clamp(64px,9vw,128px) 0 }
.sec__head{
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
  padding:0 var(--pad); margin-bottom:clamp(32px,4vw,56px);
}
.sec__num{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.2em; color:var(--moor) }
.sec__title{ font-size:var(--t-h2); font-weight:700; letter-spacing:-.045em; line-height:.9 }
.sec__hint{
  margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tusche-weich);
}

/* ------------------------------- HERO ------------------------------ */
.hero{ padding:calc(66px + clamp(48px,7vw,96px)) 0 0 }
.hero__top{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:0 var(--pad) 14px; border-bottom:2px solid var(--tusche);
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tusche-weich);
}
.hero__body{ padding:clamp(36px,5vw,64px) var(--pad) 0 }

.hero__h1{
  font-size:var(--t-display); font-weight:700; line-height:.88; letter-spacing:-.048em;
}
.hero__h1 u{ text-decoration:none; position:relative; display:inline-block; white-space:nowrap }
/* podkreślenie siedzi POD linią pisma, żeby nie przecinać ogonków (ę, ą) */
.hero__h1 u::after{
  content:''; position:absolute; left:0; bottom:-.02em; width:100%; height:.075em; background:var(--moor);
  transform:scaleX(0); transform-origin:left;
  animation:wipe var(--slow) .45s var(--ease) forwards;
}
@keyframes wipe{ to{ transform:scaleX(1) } }

.hero__lead{
  margin-top:clamp(24px,3vw,34px); max-width:56ch;
  font-size:var(--t-body-l); color:var(--tusche-weich);
}
.hero__cta{ margin-top:clamp(28px,3.4vw,40px); display:flex; gap:14px; flex-wrap:wrap }

/* ─────────────────────────────────────────────────────────────────────
   suwak przed / po
   ╔═══════════════════════════════════════════════════════════════════╗
   ║  WYMÓG — NIE POMIJAĆ PRZY PODMIANIE NA PRAWDZIWE ZDJĘCIA:         ║
   ║  zdjęcie "PRZED" musi być CIEMNIEJSZE i CHŁODNIEJSZE niż "PO".    ║
   ║  Zdjęcie "PO" — jasne, ciepłe, puste wnętrze, światło popołudniowe.║
   ║  Na tym kontraście stoi cała obietnica firmy ("stare staje się    ║
   ║  lepsze niż nowe"). Odwrócenie tej relacji rozbraja całą sekcję.  ║
   ║  Patrz design.md §1 — "Moment-serce" i "Konsekwencja fotograficzna"║
   ╚═══════════════════════════════════════════════════════════════════╝
   Poniżej ZAŚLEPKI (gradienty CSS). Podmieniając na <img>/background-image
   zachowaj: .ba__before ciemne+chłodne, .ba__after jasne+ciepłe.
   ───────────────────────────────────────────────────────────────────── */
.ba{
  position:relative; margin:clamp(40px,5vw,72px) 0 0;
  aspect-ratio:16/8; border:2px solid var(--tusche); overflow:hidden;
  cursor:ew-resize; user-select:none; touch-action:pan-y; background:var(--nacht);
}
/* Warstwy: "przed" leży pod spodem w pełnym kadrze, "po" jest przycinane clip-path.
   Etykiety MUSZĄ siedzieć w stosie swojego panelu — inaczej podpis VORHER
   wypływa na jasne zdjęcie "po", gdy linia stoi przy lewej krawędzi. */
.ba__pane{ position:absolute; inset:0 }
.ba__before{ z-index:1 }
.ba__after { z-index:2 }

/* WYMÓG: zdjęcie "przed" musi być ciemniejsze/chłodniejsze niż "po" — patrz design.md §1.
   ZAŚLEPKA — docelowo zdjęcie stanu zastanego (kurz, zimne światło, zdarty tynk). */
/* HERO — zdjęcia podpięte. Zmienne są celowo inne niż --img-b/--img-a,
   żeby zdjęcia hero nie wyciekły do pełnego widoku realizacji i odwrotnie. */
.ba{
  --img-hero-b:url("../assets/img/hero-vorher.webp");
  --img-hero-a:url("../assets/img/hero-nachher.webp");
  --deco:0;
}
.ba__before{
  background-image:
    var(--img-hero-b, none),
    repeating-linear-gradient(46deg, rgba(255,255,255,.045) 0 7px, transparent 7px 15px),
    radial-gradient(90% 110% at 26% 14%, #4b453f 0%, #262320 58%, #171513 100%);
  background-size:cover, auto, auto;
  background-position:center, 0 0, 0 0;
  background-repeat:no-repeat, repeat, no-repeat;
}
/* WYMÓG: zdjęcie "po" musi być jaśniejsze/cieplejsze niż "przed" — patrz design.md §1.
   ZAŚLEPKA — docelowo pusty, skończony salon, dębowa podłoga, światło popołudniowe. */
.ba__after{
  clip-path:inset(0 0 0 50%);
  background-image:
    var(--img-hero-a, none),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 40%),
    radial-gradient(78% 100% at 66% 12%, #ded6c8 0%, #b3a894 52%, #736a5c 100%);
  background-size:cover, auto, auto;
  background-position:center, 0 0, 0 0;
  background-repeat:no-repeat, repeat, no-repeat;
}
/* delikatny „rysunek wnętrza” — deski podłogi + belka okna.
   Ma sens tylko na gradiencie; --deco:0 gasi go tam, gdzie jest już zdjęcie. */
.ba__before::after,.ba__after::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:34%;
  opacity:var(--deco, 1);
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 1px, transparent 1px 46px);
}
.ba__after::after{ background:repeating-linear-gradient(90deg, rgba(0,0,0,.13) 0 1px, transparent 1px 62px) }

.ba__lbl{
  position:absolute; bottom:14px; padding:7px 11px;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; background:var(--tusche); color:var(--papier);
}
.ba__before .ba__lbl{ left:14px; white-space:nowrap }
.ba__after  .ba__lbl{ right:14px; background:var(--moor) }
/* Rocznik znika na wąskich ekranach — przy 360 px pełna etykieta nie mieści się
   w połowie kadru i była ucinana clip-path'em w połowie słowa. */
.ba__meta{ font-style:normal }
@media (max-width:600px){ .ba__meta{ display:none } }

.ba__handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--moor);
  z-index:7; pointer-events:none;
}
.ba__handle::after{
  content:'↔'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; background:var(--moor); color:#fff;
  display:grid; place-items:center; font-size:19px; border-radius:50%;
}
.ba__drag{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.62); z-index:6; pointer-events:none;
  white-space:nowrap;                       /* przy 360 px łamało się na dwie linijki */
  transition:opacity var(--fast) var(--ease);
}
.ba.is-touched .ba__drag{ opacity:0 }

/* pole danych */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border-top:2px solid var(--tusche); margin-top:clamp(40px,5vw,64px);
}
.stat{ padding:22px 20px 26px 0; border-right:1px solid var(--kante) }
.stat:last-child{ border-right:0 }
.stat b{
  display:block; font-size:clamp(30px,3.6vw,44px); font-weight:700;
  letter-spacing:-.035em; line-height:1;
}
.stat span{
  display:block; margin-top:8px;
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--tusche-weich);
}

/* ------------------- 01 · RAIL (pozioma karuzela) ------------------ */
.rail{ position:relative; overflow:hidden; background:var(--nacht); color:var(--papier) }
.rail .sec__head{ position:relative; z-index:3; padding-top:clamp(56px,7vw,96px) }
.rail .sec__title{ color:var(--papier) }
.rail .sec__hint{ color:rgba(233,231,226,.5) }

/* TŁO STOI W MIEJSCU — osobna warstwa, bez background-attachment:fixed (iOS).
   WYMÓG: to zdjęcie należy do rodziny "po" — ciepłe światło, skończone wnętrze.
   Karty muszą pozostać czytelne, więc podmieniając na <img> zostaw przyciemnienie
   (brightness ~.55 + warstwa --nacht) — patrz design.md §1 i §7.
   ZAŚLEPKA — gradient CSS. */
.rail__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(62% 78% at 64% 26%, rgba(214,186,146,.34) 0%, transparent 62%),
    radial-gradient(120% 96% at 14% 100%, #0d0f11 34%, transparent 72%),
    linear-gradient(#1d2024, #0a0b0d);
}
.rail__bg::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 4px);
}

.rail__viewport{ position:relative; z-index:3; padding-bottom:clamp(56px,7vw,88px) }

.rail__track{
  display:flex; gap:20px; align-items:stretch;
  padding:4px var(--pad) 28px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab;
}
.rail__track::-webkit-scrollbar{ display:none }
.rail__track.is-dragging{ cursor:grabbing; scroll-snap-type:none }

.rail__card{
  flex:0 0 clamp(258px, 78vw, 372px);
  scroll-snap-align:center;
  min-height:290px;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:26px;
  background:rgba(9,10,12,.72);
  border:1px solid rgba(233,231,226,.16);
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.rail__card:hover{ border-color:var(--moor); background:rgba(9,10,12,.86) }
.rail__num{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--salbei);
}
.rail__card h3{
  margin:18px 0 12px; font-size:var(--t-h3); font-weight:700;
  letter-spacing:-.035em; line-height:1.02; hyphens:auto;
}
.rail__card p{ font-size:14.5px; line-height:1.6; color:rgba(233,231,226,.66) }
.rail__more{
  margin-top:20px; align-self:flex-start;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--papier); text-decoration:none;
  border-bottom:2px solid var(--moor); padding-bottom:4px;
}

.rail__foot{
  display:flex; align-items:center; gap:18px; padding:0 var(--pad); flex-wrap:wrap;
}
.rail__dots{ display:flex; gap:7px }
.rail__dot{
  width:26px; height:3px; background:rgba(233,231,226,.24); border:0; padding:0; cursor:pointer;
  transition:background var(--fast) var(--ease);
}
.rail__dot.is-active{ background:var(--moor) }
.rail__nav{ display:flex; gap:8px; margin-left:auto }
.rail__nav button{
  width:48px; height:48px; border:1px solid rgba(233,231,226,.3);
  background:none; color:var(--papier); font-size:17px; cursor:pointer;
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.rail__nav button:hover{ background:var(--papier); color:var(--tusche) }
@media (hover:none){ .rail__nav{ display:none } }

/* ------------- 03 · PROJEKTE — karty realizacji (rail) -------------- */
.rail__bg--proj{
  /* chłodniejsze i ciemniejsze niż tło usług, żeby obie karuzele nie czytały się
     jak ta sama sekcja powtórzona dwa razy. */
  background:
    radial-gradient(58% 74% at 32% 22%, rgba(150,168,182,.20) 0%, transparent 62%),
    radial-gradient(120% 96% at 86% 100%, #0a0c0e 34%, transparent 72%),
    linear-gradient(#191d21, #08090b);
}

.pcard{ padding:0; min-height:0; display:flex; flex-direction:column }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  WYMÓG — reguła "ciemne przed / jasne po" (design.md §1).        ║
   ║  Kolory każdej realizacji siedzą w czterech zmiennych:           ║
   ║    --b1/--b2  = kadr PRZED  → ciemne i chłodne                   ║
   ║    --a1/--a2  = kadr PO     → jasne i ciepłe                     ║
   ║  Podmieniając zaślepki na zdjęcia, podmień je w TYCH SAMYCH      ║
   ║  rolach. Nigdy nie dawaj jaśniejszego kadru do .pcard__before —  ║
   ║  odwrócenie tej relacji przewraca sens całej sekcji.             ║
   ╚══════════════════════════════════════════════════════════════════╝ */
/* ─── PODPINANIE ZDJĘĆ ────────────────────────────────────────────────
   Zdjęcie wchodzi jako GÓRNA warstwa tła, nad gradientem. Gdy pliku nie ma,
   przeglądarka po prostu jej nie maluje i widać zaślepkę — dlatego kolejne
   pary można wgrywać po jednej, nic się po drodze nie psuje.

   ŻEBY WŁĄCZYĆ KOLEJNĄ REALIZACJĘ: wgraj obie fotki do assets/img/
   i odkomentuj jej linijkę poniżej. Nic więcej. Nie odkomentowuj wcześniej —
   brakujący plik to błąd 404 w konsoli.

   FORMAT: .webp (jakość 82). Oryginały .jpg leżą w assets/img/originals-jpg/
   jako backup — strona ich nie czyta, są tylko na wypadek powrotu.

   --img-b / --img-a  = kadr przed / po
   --deco:0           = gasi dekoracyjne linie „podłogi”, które mają sens
                        tylko na gradiencie, a na zdjęciu wyglądają jak usterka
   ─────────────────────────────────────────────────────────────────── */
.pcard--1{ --b1:#4a443d; --b2:#1e1b18; --a1:#e0d8c9; --a2:#a2917a;
           --img-b:url("../assets/img/proj-01-vorher.webp");
           --img-a:url("../assets/img/proj-01-nachher.webp"); --deco:0 }
.pcard--2{ --b1:#414449; --b2:#1b1d20; --a1:#e6ded0; --a2:#ac9d86;
           --img-b:url("../assets/img/proj-02-vorher.webp");
           --img-a:url("../assets/img/proj-02-nachher.webp"); --deco:0 }
.pcard--3{ --b1:#464039; --b2:#211e1a; --a1:#dcd4c4; --a2:#9d8f79;
           --img-b:url("../assets/img/proj-03-vorher.webp");
           --img-a:url("../assets/img/proj-03-nachher.webp"); --deco:0 }
.pcard--4{ --b1:#3d4247; --b2:#191c1f; --a1:#e2dacb; --a2:#a89880;
           --img-b:url("../assets/img/proj-04-vorher.webp");
           --img-a:url("../assets/img/proj-04-nachher.webp"); --deco:0 }
.pcard--5{ --b1:#4b453e; --b2:#201d19; --a1:#ddd5c6; --a2:#a4947d;
           --img-b:url("../assets/img/proj-05-vorher.webp");
           --img-a:url("../assets/img/proj-05-nachher.webp"); --deco:0 }
.pcard--6{ --b1:#3f4348; --b2:#1a1d21; --a1:#e5ddce; --a2:#af9f88;
           --img-b:url("../assets/img/proj-06-vorher.webp");
           --img-a:url("../assets/img/proj-06-nachher.webp"); --deco:0 }

/* Komplet 01–06 podpięty. Zaślepki gradientowe (--b1…--a2) zostają jako
   warstwa pod zdjęciem — nie usuwaj ich, malują kadr, gdyby plik zniknął. */

.pcard__ba{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border-bottom:1px solid rgba(233,231,226,.16); flex-shrink:0;
}
.pcard__pane{ position:absolute; inset:0 }
/* ZAŚLEPKA — kadr "przed": ciemny, chłodny, zakurzony */
.pcard__before{
  z-index:1;
  background-image:
    var(--img-b, none),
    repeating-linear-gradient(46deg, rgba(255,255,255,.04) 0 6px, transparent 6px 14px),
    radial-gradient(92% 112% at 28% 16%, var(--b1), var(--b2));
  background-size:cover, auto, auto;
  background-position:center, 0 0, 0 0;
  background-repeat:no-repeat, repeat, no-repeat;
}
/* ZAŚLEPKA — kadr "po": jasny, ciepły, skończony */
.pcard__after{
  z-index:2; clip-path:inset(0 0 0 50%);
  background-image:
    var(--img-a, none),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 42%),
    radial-gradient(82% 106% at 66% 14%, var(--a1), var(--a2));
  background-size:cover, auto, auto;
  background-position:center, 0 0, 0 0;
  background-repeat:no-repeat, repeat, no-repeat;
}
/* linia cięcia — ta sama zieleń co w suwaku hero, ale STATYCZNA */
.pcard__line{
  position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--moor); z-index:4;
}
.pcard__tag{
  position:absolute; bottom:10px; z-index:5;
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; padding:5px 8px;
}
.pcard__tag--b{ left:10px; background:var(--tusche); color:var(--papier) }
.pcard__tag--a{ right:10px; background:var(--moor); color:var(--papier) }

.pcard__body{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1 }
.pcard__body h3{
  font-size:20px; font-weight:700; letter-spacing:-.03em; line-height:1.12;
  margin:0 0 10px; color:var(--papier);
}
.pcard__body p{ font-size:14px; line-height:1.6; color:rgba(233,231,226,.64); margin-bottom:18px }

/* metryczka jak tabelka rysunku technicznego */
.pcard__meta{ margin-top:auto; display:grid; gap:0; border-top:1px solid rgba(233,231,226,.16) }
.pcard__meta > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:9px 0; border-bottom:1px solid rgba(233,231,226,.08);
}
.pcard__meta > div:last-child{ border-bottom:0 }
.pcard__meta dt{
  font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--salbei);
}
.pcard__meta dd{
  margin:0; font-family:'JetBrains Mono',monospace; font-size:11.5px;
  letter-spacing:.06em; color:var(--papier); text-align:right;
}

/* przycisk przykrywający kartę — cała karta jest celem kliknięcia */
.pcard{ position:relative }
.pcard__open{
  position:absolute; inset:0; z-index:6;
  border:0; background:none; padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.pcard__open:focus-visible{ outline:2px solid var(--moor); outline-offset:-4px }
.rail__card:has(.pcard__open:hover){ border-color:var(--moor); background:rgba(9,10,12,.86) }

/* ------------- PEŁNY WIDOK REALIZACJI (overlay) -------------------- */
.pmodal{
  position:fixed; inset:0; z-index:96;
  visibility:hidden; pointer-events:none;
  transition:visibility 0s linear var(--mid);
}
.pmodal.is-open{ visibility:visible; pointer-events:auto; transition-delay:0s }

.pmodal__scrim{
  position:absolute; inset:0; background:rgba(8,9,11,.78);
  opacity:0; transition:opacity var(--mid) var(--ease);
}
.pmodal.is-open .pmodal__scrim{ opacity:1 }

.pmodal__panel{
  position:absolute; left:50%; top:0; bottom:0;
  width:min(96vw, 880px); transform:translate(-50%, 24px);
  opacity:0;
  background:var(--papier); border-left:2px solid var(--tusche); border-right:2px solid var(--tusche);
  display:flex; flex-direction:column;
  overflow-y:auto; overscroll-behavior:contain;
  transition:transform var(--mid) var(--ease), opacity var(--mid) var(--ease);
  background-image:
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size:64px 64px;
}
.pmodal.is-open .pmodal__panel{ transform:translate(-50%, 0); opacity:1 }
.pmodal__panel:focus{ outline:none }

.pmodal__head{
  position:sticky; top:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 clamp(18px,3vw,30px); height:66px; flex-shrink:0;
  background:var(--papier); border-bottom:2px solid var(--tusche);
}
.pmodal__kicker{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--moor);
}
.pmodal__close{
  width:44px; height:44px; padding:0; position:relative; cursor:pointer; flex-shrink:0;
  border:2px solid var(--tusche); background:none;
}

.pmodal__body{ padding:clamp(18px,3vw,30px) }

/* duży suwak — kolory kadrów przychodzą z klasy .pcard--N dokładanej w JS.
   WYMÓG: --b1/--b2 to zawsze kadr "przed" (ciemny), --a1/--a2 "po" (jasny). */
/* max-height, żeby tytuł i opis mieściły się w kadrze bez przewijania.
   Zaślepki to gradienty, więc przycięcie proporcji nic nie psuje; przy
   prawdziwych zdjęciach użyj background-size:cover (przytnie, nie rozciągnie). */
/* margin:0 auto — przy zadziałaniu max-height aspect-ratio kurczy też szerokość,
   więc kadr byłby węższy od panelu i przyklejony do lewej krawędzi. */
.pmodal__ba{ aspect-ratio:16/9; max-height:46vh; margin:0 auto }
.pmodal__ba .ba__before{
  background-image:
    var(--img-b, none),
    repeating-linear-gradient(46deg, rgba(255,255,255,.045) 0 7px, transparent 7px 15px),
    radial-gradient(90% 110% at 26% 14%, var(--b1,#4b453f), var(--b2,#171513));
  background-size:cover, auto, auto;
  background-position:center, 0 0, 0 0;
  background-repeat:no-repeat, repeat, no-repeat;
}
.pmodal__ba .ba__after{
  background-image:
    var(--img-a, none),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 40%),
    radial-gradient(78% 100% at 66% 12%, var(--a1,#ded6c8), var(--a2,#736a5c));
  background-size:cover, auto, auto;
  background-position:center, 0 0, 0 0;
  background-repeat:no-repeat, repeat, no-repeat;
}

.pmodal__title{
  margin:clamp(22px,3vw,32px) 0 14px;
  font-size:clamp(24px,3.6vw,40px); font-weight:700; letter-spacing:-.04em; line-height:1.02;
}
.pmodal__text{ max-width:62ch; color:var(--tusche-weich); font-size:var(--t-body-l) }

.pmodal__meta{ margin-top:clamp(24px,3vw,34px); border-top:2px solid var(--tusche) }
.pmodal__meta > div{ border-bottom:1px solid var(--kante); padding:13px 0 }
.pmodal__meta dt{ color:var(--tusche-weich) }
.pmodal__meta dd{ color:var(--tusche); font-size:13px }

.pmodal__foot{
  margin-top:auto; position:sticky; bottom:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px clamp(18px,3vw,30px); flex-shrink:0;
  background:var(--papier); border-top:2px solid var(--tusche);
}
.pmodal__step{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; cursor:pointer;
  background:none; border:2px solid var(--tusche); color:var(--tusche);
  padding:12px 16px; transition:background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.pmodal__step:hover:not(:disabled){ background:var(--tusche); color:var(--papier) }
.pmodal__step:disabled{ opacity:.32; cursor:default }
.pmodal__count{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em;
  color:var(--tusche-weich); white-space:nowrap;
}

@media (max-width:560px){
  .pmodal__ba{ aspect-ratio:4/3 }
  .pmodal__step span:not([aria-hidden]){ display:none }   /* zostają same strzałki */
  .pmodal__step{ padding:12px 18px }
}

/* --------------------------- 02 · WARUM ---------------------------- */
.why{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
      border-top:1px solid var(--kante); padding:0 var(--pad) }
.why__col{ padding:34px 26px 40px 0; border-right:1px solid var(--kante) }
.why__col:last-child{ border-right:0 }
.why__i{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em;
  color:var(--moor); display:block; margin-bottom:20px;
}
.why__col h3{ font-size:var(--t-h3); font-weight:700; letter-spacing:-.035em; line-height:1.05; margin-bottom:14px }
.why__col p{ color:var(--tusche-weich); max-width:40ch }

/* --------------------------- 03 · ABLAUF --------------------------- */
.flow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); padding:0 var(--pad) }
.flow__step{ border-top:2px solid var(--tusche); padding:20px 24px 34px 0 }
.flow__n{
  font-family:'JetBrains Mono',monospace; font-size:34px; font-weight:700;
  letter-spacing:-.02em; color:var(--kante); display:block; line-height:1; margin-bottom:16px;
}
.flow__step h3{ font-size:19px; font-weight:700; letter-spacing:-.02em; margin-bottom:10px }
.flow__step p{ font-size:15px; color:var(--tusche-weich); max-width:34ch }

/* ----------------------------- 04 · CTA ---------------------------- */
.cta{ background:var(--papier-tief) }
.cta__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,72px); padding:0 var(--pad); align-items:start;
}
.cta__lead{ font-size:var(--t-body-l); color:var(--tusche-weich); max-width:44ch }
.cta__note{
  margin-top:26px; font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:.1em; color:var(--tusche); border-left:2px solid var(--moor); padding-left:14px;
}
.form{ display:grid; gap:0; border-top:2px solid var(--tusche) }
.form label{
  display:block; font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--tusche-weich);
  padding-top:16px;
}
.form input,.form textarea{
  width:100%; border:0; border-bottom:1px solid var(--kante); background:none;
  font-family:'Space Grotesk',sans-serif; font-size:17px; color:var(--tusche);
  padding:8px 0 16px; transition:border-color var(--fast) var(--ease);
}
.form input:focus,.form textarea:focus{ outline:0; border-bottom-color:var(--moor) }
.form textarea{ resize:vertical; min-height:88px }
.form .btn{ margin-top:26px; justify-self:start }

/* ---- walidacja i potwierdzenie (formularz jest demo — patrz design.md) ----
   Błąd znaczony PODWÓJNIE: kolorem i tekstem. Sam kolor nie wystarczy —
   ok. 8 % mężczyzn nie odróżni ceglanego od grafitu (WCAG 1.4.1). */
.form input[aria-invalid="true"]{ border-bottom-color:var(--signal) }
.form input[aria-invalid="true"]:focus{ border-bottom-color:var(--signal) }
.form__err{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em;
  color:var(--signal); margin:6px 0 0;
}
.form__err[hidden]{ display:none }

/* Potwierdzenie: ta sama zieleń i ta sama kreska co reszta strony.
   Zero zaokrągleń, zero cienia — głębokość robi linia (patrz nagłówek pliku). */
.form__ok{
  margin:22px 0 0; padding:14px 16px;
  border-left:2px solid var(--moor); background:var(--papier-tief);
  font-size:15px; line-height:1.55; color:var(--tusche);
  display:flex; gap:12px; align-items:flex-start;
}
.form__ok[hidden]{ display:none }
/* znacznik „✓" rysowany kreską, nie glifem — font nie musi go mieć */
.form__ok-mark{
  flex-shrink:0; width:13px; height:8px; margin-top:5px;
  border-left:2px solid var(--moor); border-bottom:2px solid var(--moor);
  transform:rotate(-45deg);
}
/* pola po wysłaniu — czytelne, ale wyraźnie nieaktywne */
.form.is-sent input,.form.is-sent textarea{ color:var(--tusche-weich) }
.form.is-sent .btn{ opacity:.55; cursor:default }

/* ===================== STRONY PRAWNE (Impressum / Datenschutz) =====
   Świadomie prostsze niż strona główna: jedna kolumna, brak tła-obrazów,
   brak animacji wejścia. To dokumenty do przeczytania, nie do oglądania. */

.hdr--legal .hdr__right{ margin-left:auto }
.hdr__back{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--tusche-weich); text-decoration:none;
  border-bottom:2px solid var(--moor); padding-bottom:3px; white-space:nowrap;
  transition:color var(--fast) var(--ease);
}
.hdr__back:hover{ color:var(--tusche) }
/* Przy 360 px logo + link powrotu + przełącznik nie mieszczą się w jednym
   rzędzie i PL wypadał poza krawędź. Logo samo prowadzi na stronę główną,
   a linki są też w stopce — więc to ten element ustępuje. */
@media (max-width:560px){ .hdr__back{ display:none } }

.legal{ padding:calc(66px + clamp(40px,6vw,72px)) var(--pad) clamp(56px,7vw,96px); max-width:1000px }

/* ─── BANER „TO JEST DEMO" ────────────────────────────────────────────
   Stoi PRZED nagłówkiem strony, jako pierwsza rzecz w kolumnie tekstu.
   Celowo w zieleni marki, nie w czerwieni ostrzegawczej: to nie jest błąd
   ani ostrzeżenie prawne, tylko informacja, że firma jest fikcyjna.

   DLACZEGO NIE NAD <header>: nagłówek jest position:fixed o wysokości 66px,
   a .legal kompensuje to paddingiem. Pasek nad nagłówkiem wymusiłby
   przeliczenie tego offsetu w trzech miejscach — nie warto.

   Osobny byt od .legal__notice. Tamten mówi „ten tekst zostaje po niemiecku,
   bo tak każe prawo", ten mówi „tu w ogóle nie ma prawdziwych danych".
   Nie zlewać ich w jedno — odpowiadają na dwa różne pytania czytelnika.
   ─────────────────────────────────────────────────────────────────── */
.legal__demo{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin-bottom:clamp(28px,3.5vw,40px); padding:14px 18px;
  background:var(--moor); color:#F2F0EB;
  border:2px solid var(--tusche);
}
.legal__demo b{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; flex-shrink:0;
  padding-bottom:2px; border-bottom:2px solid rgba(242,240,235,.5);
}
.legal__demo span{ font-size:14.5px; line-height:1.55; max-width:70ch }

/* GRID, NIE FLEX — i to jest właśnie ta różnica, która tu decyduje.
   Wygląda jak .sec__head (znacznik + tytuł + mono-etykieta), ale ma inny
   problem: „Datenschutzerklärung” to JEDNO słowo szerokości ok. 297 px przy
   30 px kroju, a kolumna na 360 px ma ok. 301,6 px. Flex ustawia elementy
   w wierszu i zawija je w CAŁOŚCI — „§” (10 px) + tytuł nie mieszczą się
   nawet przy gap:0 (10 + 297 = 307 > 301,6), więc tytuł zjeżdżał pod spód
   i „§” zostawało samotnie w pierwszym wierszu. Grid rozwiązuje to inaczej:
   „§” dostaje własną kolumnę (auto), tytuł drugą (1fr) i to TYTUŁ łamie się
   w środku na dwie linie OBOK znacznika, zamiast uciekać pod niego.
   Impressum nigdy tego nie pokazywało — ma krótszy tytuł. Sprawdzaj na
   datenschutz.html przy 360 px, nie na impressum.html. */
.legal__head{
  display:grid;
  /* minmax(0,1fr) zamiast samego 1fr: domyślne minimum ścieżki to min-content,
     czyli szerokość najdłuższego słowa — a tu właśnie najdłuższe słowo jest
     problemem. Bez tego kolumna rozepchnęłaby się z powrotem do 297 px. */
  grid-template-columns:auto minmax(0,1fr);
  column-gap:16px; row-gap:12px;
  align-items:baseline;                    /* „§” siada na pierwszej linii tytułu */
  border-bottom:2px solid var(--tusche); padding-bottom:18px;
}
.legal__head h1{
  font-size:var(--t-h2); font-weight:700; letter-spacing:-.045em; line-height:.92;
  /* Skoro tytuł MUSI się złamać w środku słowa, niech to wygląda na decyzję:
     hyphens dokłada dywiz w miejscu podziału (wzorce niemieckie działają, bo
     <html lang> jest ustawiane przez i18n). overflow-wrap to fallback, gdyby
     przeglądarka nie miała wzorców — wtedy łamie bez dywizu, ale nie wystaje.
     min-width:0 dubluje minmax(0,…) na wypadek zmiany definicji ścieżek. */
  min-width:0; -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word;
}
/* Zawsze własny wiersz na całą szerokość, przy prawej krawędzi kolumny —
   także na desktopie, gdzie wcześniej stało w jednej linii z tytułem. */
.legal__updated{
  grid-column:1 / -1; justify-self:end;
  font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tusche-weich);
}

/* pasek wyjaśniający, dlaczego treść zostaje po niemiecku */
.legal__notice{
  margin-top:28px; padding:18px 20px;
  border:2px solid var(--tusche); background:var(--papier-tief);
  font-size:15px; line-height:1.62; max-width:78ch;
}
.legal__notice b{ font-weight:700 }

.legal__doc{ margin-top:clamp(34px,4vw,52px); max-width:78ch }
.legal__doc h2{
  font-size:var(--t-h3); font-weight:700; letter-spacing:-.03em; line-height:1.1;
  margin:clamp(34px,4vw,48px) 0 14px; padding-top:16px; border-top:2px solid var(--tusche);
}
.legal__doc h3{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tusche-weich); margin:24px 0 10px; font-weight:400;
}
.legal__doc p{ margin-bottom:14px; color:var(--tusche-weich) }
.legal__doc p strong{ color:var(--tusche); font-weight:700 }
.legal__doc ul{ margin:0 0 16px; padding-left:0; list-style:none }
.legal__doc li{
  position:relative; padding:7px 0 7px 22px; color:var(--tusche-weich);
  border-bottom:1px solid var(--kante);
}
.legal__doc li::before{
  content:''; position:absolute; left:0; top:16px; width:10px; height:2px; background:var(--moor);
}
.legal__doc address{ font-style:normal; color:var(--tusche); line-height:1.9 }
.legal__doc a{ color:var(--tusche); text-decoration:none; border-bottom:1px solid var(--moor) }

/* PLACEHOLDER — celowo rzuca się w oczy. Przerywana ramka mówi
   "to jeszcze nie jest wypełnione", a nie "to błąd układu". */
.ph{
  display:inline-block;
  font-family:'JetBrains Mono',monospace; font-size:.8em; letter-spacing:.1em;
  padding:3px 8px; margin:1px 0;
  border:1px dashed var(--moor); background:rgba(47,107,63,.08); color:var(--tusche);
  white-space:normal;
}

/* Tłumaczenie pomocnicze — pokazywane TYLKO w trybie PL.
   Niemiecki tekst zostaje widoczny zawsze, bo to wersja wiążąca prawnie. */
.legal__doc--pl{ display:none }
html[lang="pl"] .legal__doc--pl{ display:block }
.legal__courtesy{
  margin-top:clamp(48px,6vw,80px); padding:16px 20px;
  border:2px dashed var(--kante); background:var(--papier-tief);
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tusche-weich);
}

/* ----------------------------- FOOTER ------------------------------ */
.foot{ background:var(--nacht); color:var(--papier); border-top:2px solid var(--tusche) }
.foot__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:32px; padding:clamp(48px,6vw,80px) var(--pad) 40px;
}
.foot h4{
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--salbei); margin-bottom:14px; font-weight:400;
}
.foot p{ color:rgba(233,231,226,.78); font-size:15px; line-height:1.7 }
.foot__bar{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:20px var(--pad) 28px; border-top:1px solid rgba(233,231,226,.14);
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(233,231,226,.5);
}
.foot__bar a{ color:inherit; text-decoration:none }
.foot__bar a:hover{ color:var(--papier) }
.foot__tel{ color:inherit; text-decoration:none; border-bottom:2px solid var(--moor) }
.foot__legal{ display:flex; gap:10px; align-items:center }
.foot__legal a{ border-bottom:1px solid rgba(233,231,226,.3); padding-bottom:2px }
.foot__legal a:hover{ border-bottom-color:var(--moor) }

/* ----------------------------- REVEAL ------------------------------ */
/* Ukrywamy TYLKO gdy JS działa (klasa .js ustawiana w <head>) — bez tego
   wyłączony JS zostawiłby pustą stronę. Easing zawsze --ease (expo-out),
   nigdy ease-in-out: ruch ma hamować twardo, jak dobrze zrobiona maszyna. */
.js .rv{ opacity:0; transform:translateY(24px); transition:opacity var(--mid) var(--ease), transform var(--mid) var(--ease) }
.js .rv.is-in{ opacity:1; transform:none }
.js .rv--l{ transform:translateX(-28px) }
.js .rv--l.is-in{ transform:none }

/* ------------------------------ MOBILE ----------------------------- */
@media (min-width:901px){
  .mnav{ display:none }               /* na desktopie panel w ogóle nie istnieje */
}
@media (max-width:900px){
  .hdr__nav{ display:none }
  .burger{ display:block }
  .cta__grid{ grid-template-columns:1fr }
  .ba{ aspect-ratio:4/3 }

  /* ─── HERO NA MOBILE — KADR, NIE TYLKO PROPORCJA ────────────────────
     Zdjęcie hero jest 2,022:1, a przy 4/3 i background-size:cover widać
     tylko 66 % szerokości — po 17 % ucinane z każdej strony. Wypadały
     wtedy DWA elementy, które w tym kadrze niosą charakter: framuga
     drzwi (0–6 % kadru) i ceglana kolumna (93–100 %).

     Sama zmiana proporcji tego nie ratuje. Przy wyśrodkowanym cover
     framuga wraca dopiero od ~2:1, a cegła od ~1,95:1 — czyli praktycznie
     przy pełnym kadrze, co na 360 px dałoby hero wysokie na 180 px.
     Policzone okna widoczności: 4/3 → 17–83 %, 3/2 → 13–87 %,
     16/10 → 10–90 %, 16/9 → 6–94 %. Żadne nie łapie ani drzwi, ani cegły.

     Dlatego OBIE dźwignie naraz: 16/10 + wyrównanie kadru do prawej.
     Okno wychodzi 21–100 % — pełna ceglana kolumna, framuga poświęcona.
     Cegła wygrywa, bo jest w obu stanach i sama działa jako przed/po
     (szarobura → ciepła czerwień), a framuga po lewej to w „vorher"
     ciemna dziura bez treści. Przy 4/3 i tym samym przesunięciu okno
     schodzi do 34–100 % i okno balkonowe dokleja się do lewej krawędzi
     — sprawdzone, wygląda źle. 16/10 zostawia mu oddech.

     Wysokość hero na 360 px: 225 px (przy 4/3 było 270 px). Świadomy
     koszt — 45 px wysokości za kadr, który ma co pokazać.

     :not(.pmodal__ba) jest konieczne. Suwak w overlayu realizacji też ma
     klasę .ba, ale jego zdjęcia są 1,79:1 z inną kompozycją — zostaje
     na 4/3 i na wyśrodkowaniu, dokładnie jak było.
     ─────────────────────────────────────────────────────────────────── */
  .ba:not(.pmodal__ba){ aspect-ratio:16/10 }
  .ba:not(.pmodal__ba) .ba__before,
  .ba:not(.pmodal__ba) .ba__after{ background-position:100% center, 0 0, 0 0 }

  .stat{ border-right:0; border-bottom:1px solid var(--kante) }
  .why__col{ border-right:0; border-bottom:1px solid var(--kante) }
  .why__col:last-child{ border-bottom:0 }
}
/* Tablet: auto-fit dawał 3 kolumny przy 4 elementach — czwarty spadał sam
   do drugiego rzędu i wyglądał jak błąd. Wymuszamy równe 2×2. */
@media (min-width:601px) and (max-width:900px){
  .stats{ grid-template-columns:repeat(2,1fr) }
  .flow { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:560px){
  .hdr{ height:60px; gap:12px }
  .logo__txt{ font-size:15px }
  .logo__txt em{ display:none }
  .hdr__tel{ display:none }
  .hero{ padding-top:calc(60px + 40px) }
  .rail__card{ min-height:262px; padding:22px }
}

/* --------------------- PREFERS REDUCED MOTION ---------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
                        transition-duration:.001ms !important }
  .hero__h1 u::after{ transform:scaleX(1) }
  .js .rv{ opacity:1; transform:none }
}