/* ==========================================================================
   Walec projektów · Lorenc Studio Design System · v1.5 (09.2026)
   Styl do silnika walec.js. Kopiować 1:1, nie przepisywać.
   Kolory, kroje, promienie, ziarno, czasy i krzywe ruchu (--czas-1…4, --krzywa-*, --ruch-*) pochodzą z tokenów DS (site.css, :root).
   Jedyny kolor spoza tokenów to kolor klienta z danych projektu (--walec-kolor, --walec-ak).
   Zasada wydajności: wszystko, co zmienia się w każdej klatce, to transform albo opacity.
   ========================================================================== */

@property --walec-ak {            /* kolor poświaty = kolor aktywnego projektu */
  syntax: '<color>';
  inherits: true;
  initial-value: #363636;
}

/* --- walec ---------------------------------------------------------------- */
.walec {
  --walec-tlo: var(--ls-graphite);
  --walec-cien: var(--ls-black);
  --walec-ak: var(--ls-graphite);
  position: relative;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  container-type: size;
  background-color: var(--walec-tlo);
  background-image: var(--grain);
  background-size: var(--grain-size);
  color: var(--text-on-dark);
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}
.walec:focus-visible { outline: none; }   /* v24: zamiast obrysu strony pierścień w środku (::after) */
.walec:focus-visible::after {          /* pierścień fokusu w środku, poza zasięgiem podartej krawędzi */
  content: ""; position: absolute; inset: 16px; z-index: 6; border-radius: var(--radius-md); pointer-events: none;
  box-shadow: 0 0 0 3px var(--focus);
}
.walec.is-rozwiniety { z-index: 41; }        /* arkusz wychodzi spod podartej krawędzi walca */

/* światło w kolorze projektu + winieta */
.walec-swiatlo {                       /* kolor przechodzi tylko tu i w tle arkusza: przejście nie przelicza całego walca */
  position: absolute; inset: -10%; pointer-events: none; will-change: transform;
  transition: --walec-ak calc(var(--czas-3) * 2) var(--krzywa-wyjscie);   /* poświata: dwa takty obrazu */
  background:
    radial-gradient(78% 44% at 50% 46%,
      color-mix(in srgb, var(--walec-ak), #fff 26%) 0%,
      color-mix(in srgb, var(--walec-ak) 78%, transparent) 42%,
      transparent 76%),
    radial-gradient(90% 55% at 50% 112%, color-mix(in srgb, var(--walec-cien) 92%, transparent), transparent 62%),
    radial-gradient(90% 45% at 50% -12%, color-mix(in srgb, var(--walec-cien) 88%, transparent), transparent 62%);
}

/* duży numer projektu (Bricolage 800, kontur) */
.walec-liczba { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.walec-liczba span {
  position: absolute; left: -3%; top: 46%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 800; font-size: 46cqh; line-height: .8;
  letter-spacing: -.07em; white-space: nowrap; color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ls-offwhite) 17%, transparent);
}

/* scena 3D */
.walec-scena {
  position: absolute; inset: 0; perspective: 1600px; perspective-origin: 50% 46%;
  cursor: grab; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 17%, #000 80%, transparent 97%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 17%, #000 80%, transparent 97%);
}
.walec.is-drag .walec-scena { cursor: grabbing; }
.walec-pochyl { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.walec-beben { position: absolute; left: 50%; top: 46%; transform-style: preserve-3d; will-change: transform; }
.walec-kafel { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.walec-plansza {                       /* kadr realizacji: DS „duże kadry” 24 px; kolor klienta widać, zanim wczyta się zdjęcie */
  position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius-lg);
  background-color: var(--walec-kolor, var(--ls-gray-700));
  background-image: var(--grain); background-size: var(--grain-size);
  box-shadow: 0 30px 60px -20px color-mix(in srgb, var(--walec-cien) 85%, transparent);
}
.walec-kb { position: absolute; inset: 0; transform-origin: var(--kb-o, 50% 50%); will-change: transform; }
.walec-foto, .walec-kolumna img { -webkit-user-drag: none; }
.walec-foto { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--ruch-3); }
.walec-foto.is-jest { opacity: 1; }
.walec-etykieta {                      /* DS EtykietaProjektu = pigułka xs */
  position: absolute; left: 16px; top: 16px; max-width: calc(100% - 32px); line-height: 1.25;
  font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-label-s); letter-spacing: var(--track-label-s); text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background-color: var(--ls-offwhite); background-image: var(--grain); background-size: var(--grain-size);
  color: var(--ls-black);
}
/* światło na krzywiźnie: stałe warstwy, silnik zmienia tylko ich przezroczystość */
.walec-blask, .walec-zmrok, .walec-mgla { position: absolute; inset: 0; border-radius: var(--radius-lg); pointer-events: none; will-change: opacity; }
.walec-blask { background: linear-gradient(to bottom, rgba(255,255,255,.22), rgba(255,255,255,0) 42%); opacity: .23; }
.walec-zmrok { background: linear-gradient(to top, rgba(0,0,0,.57), rgba(0,0,0,0) 42%); opacity: .18; }
.walec-mgla { inset: -1px; background: var(--walec-cien); opacity: 0; }

/* kafel „Twoja firma”: jedyne użycie kroju odręcznego i dłoni w walcu */
.walec-koniec .walec-plansza {
  background: transparent; box-shadow: none;
  border: 2px dashed color-mix(in srgb, var(--ls-offwhite) 45%, transparent);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.walec-dlon { height: 30%; width: auto; }
.walec-koniec-nazwa { font-family: var(--font-script); font-size: var(--fs-script); line-height: 1; color: var(--accent-3); }
.walec-koniec-opis {
  font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-on-dark-muted);
}

/* podziałka */
.walec-podzialka {
  position: absolute; right: 16px; top: 0; bottom: 0; width: 60px; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent 8%, #000 30%, #000 66%, transparent 88%);
          mask-image: linear-gradient(transparent 8%, #000 30%, #000 66%, transparent 88%);
}
.walec-tor { position: absolute; right: 0; top: 46%; will-change: transform; }
.walec-kreska { position: absolute; right: 0; height: 1px; width: 8px; background: color-mix(in srgb, var(--ls-offwhite) 22%, transparent); }
.walec-kreska.is-glowna { width: 18px; background: color-mix(in srgb, var(--ls-offwhite) 50%, transparent); }
.walec-nr {
  position: absolute; right: 26px; transform: translateY(-50%);
  font-family: var(--font-ui); font-weight: 600; font-size: 10px; letter-spacing: .12em;
  color: color-mix(in srgb, var(--ls-offwhite) 45%, transparent);
}
.walec-znacznik { position: absolute; right: 16px; top: 46%; width: 30px; height: 2px; margin-top: -1px; background: var(--accent); pointer-events: none; }

/* podpis, sterowanie, postęp */
.walec-podpis {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 28px 26px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  background: linear-gradient(to top, color-mix(in srgb, var(--walec-cien) 94%, transparent) 50%, transparent);
}
.walec-tekst { min-width: 0; }
.walec-tekst > * { transition: opacity var(--ruch-2), visibility 0s; }
/* v1.9.10: arkusz otwarty pokazuje nazwę, branżę i akcje projektu, więc podpis na walcu gaśnie (bez dubli); licznik i pauza zostają */
.walec.is-rozwiniety .walec-tekst > * { opacity: 0; visibility: hidden; transition: opacity var(--czas-1) var(--krzywa-zamykanie), visibility 0s var(--czas-1); }
.walec-nazwa { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: 1.1; }
/* v24 (P2-9): podpis ma stałą budowę od pierwszej klatki: nazwa w jednej linii, meta w dwóch, akcje w stałym miejscu;
   zmiana projektu (i wejście strony) nie zmienia wysokości podpisu (bez przesunięć układu) */
.walec-podpis .walec-nazwa { min-height: 1.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.walec-podpis .walec-meta { min-height: 2.9em; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.walec-podpis .walec-efekt { display: none; }   /* opis efektu jest w arkuszu projektu */
.walec-podpis .walec-akcje { min-height: 74px; align-content: flex-start; }
.walec-meta {
  margin-top: 6px; font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-on-dark-muted);
}
.walec-efekt { margin-top: 6px; font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.4; color: var(--text-on-dark-muted); max-width: 34ch; }
.walec-efekt:empty { display: none; }
.walec-akcje { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin-top: 12px; }
.walec-link, .walec-rozwin {           /* DS Przycisk ghost na ciemnym */
  display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-ui); font-weight: 600; font-size: var(--ctl-fs-sm); letter-spacing: var(--ctl-track);
  text-transform: uppercase; line-height: 1; text-decoration: none; border-radius: 4px; color: var(--text-on-dark);
}
.walec-link, .walec-rozwin { min-height: 32px; }
.walec-link:hover { color: var(--accent-3); }
.walec-rozwin { color: var(--accent-3); }
.walec-rozwin:hover { color: var(--text-on-dark); }
.walec-ster { display: flex; align-items: center; gap: 12px; flex: none; }
.walec-licznik { font-family: var(--font-ui); font-weight: 600; font-size: 12px; letter-spacing: .12em; color: var(--text-on-dark-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.walec-pauza {                         /* DS PrzyciskIkony, wariant jasny na ciemnym */
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; flex: none;
  display: grid; place-items: center; background: transparent; color: var(--ls-offwhite);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--ls-offwhite) 55%, transparent);
  transition: background-color var(--ruch-1), color var(--ruch-1);
}
.walec-pauza:hover { background: var(--ls-offwhite); color: var(--ls-black); }
.walec-ikona-pauza { width: 12px; height: 14px; background: linear-gradient(90deg, currentColor 0 34%, transparent 34% 66%, currentColor 66%); }
.walec-ikona-start { width: 0; height: 0; margin-left: 3px; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.walec-ikona-x { position: relative; width: 16px; height: 16px; }
.walec-ikona-x::before, .walec-ikona-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 3px; margin: -1.5px 0 0 -9px; background: currentColor; border-radius: 2px; }
.walec-ikona-x::before { transform: rotate(45deg); }
.walec-ikona-x::after { transform: rotate(-45deg); }
.walec-postep { position: absolute; left: 28px; right: 28px; bottom: 12px; height: 2px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--ls-offwhite) 14%, transparent); }
.walec-postep i { display: block; width: 100%; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

/* podpowiedź i przytrzymanie */
.walec-podpowiedz {
  position: absolute; left: 50%; top: 22px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 64px);
  text-align: center; line-height: 1.5; pointer-events: none;
  font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-on-dark-muted); opacity: 0; transition: opacity var(--ruch-2);
}
.walec.is-hover .walec-podpowiedz { opacity: .85; }
.walec.is-rozwiniety .walec-podpowiedz { opacity: 0; }
.walec-zamiar {                        /* pigułka napełnia się akcentem, potem arkusz się odwija */
  position: absolute; left: 50%; top: 60%; z-index: 3; pointer-events: none; overflow: hidden;
  display: inline-flex; align-items: center; padding: 9px 16px; border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--ls-black) 84%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ls-offwhite) 22%, transparent);
  font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-label-s); letter-spacing: var(--track-label-s);
  text-transform: uppercase; line-height: 1; color: var(--ls-offwhite); white-space: nowrap;
  opacity: 0; transform: translate(-50%, 8px); transition: opacity var(--ruch-1), transform var(--ruch-2);
}
.walec-zamiar.is-on { opacity: 1; transform: translate(-50%, 0); }
.walec-zamiar i {
  position: absolute; inset: 0; background-color: var(--accent); background-image: var(--grain); background-size: var(--grain-size);
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}
.walec-zamiar span { position: relative; }

/* --- arkusz: dwie kartki odwijane z walca --------------------------------- */
.walec.is-rozwiniety .walec-swiatlo { transition-duration: var(--czas-3); transition-timing-function: var(--krzywa-wyjscie); }   /* kolor walca zmienia się razem z kartką */
.walec-zaslona { position: fixed; inset: 0; z-index: 39; pointer-events: none; background: var(--ls-black); opacity: 0; will-change: opacity; }
.walec-arkusz { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; overflow: hidden; pointer-events: none; }
.walec-kartka {                        /* przesuwa się o X; podarta krawędź jest stała (clip-path ustawia silnik) */
  position: absolute; inset: 0; z-index: 1; will-change: transform;
}
.walec-kartka.is-gora { z-index: 2; }
.walec-arkusz.is-otwarty .walec-kartka { pointer-events: auto; }
.walec-kartka-wnetrze { position: absolute; inset: 0; will-change: transform; }   /* przesuwa się o −X: treść stoi, z lekką paralaksą */
.walec-kartka-mrok { position: absolute; inset: 0; pointer-events: none; background: var(--ls-black); opacity: 0; will-change: opacity; }
.walec-arkusz-cien {                   /* miękki cień przy krawędzi, tylko w ruchu; brzeg poszarpany jak kartka (klip sięga zębów) */
  position: absolute; top: 0; bottom: 0; left: 0; width: 72px; z-index: 3; pointer-events: none; opacity: 0; will-change: transform, opacity;
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.24) 44px);
}
.walec-arkusz-tlo {                    /* ciągłość światła: te same gradienty co .walec-swiatlo, w układzie arkusza */
  position: absolute; inset: -48px; pointer-events: none; will-change: transform;
  background-color: var(--ls-graphite);
  background-image:
    radial-gradient(var(--sw-rx) var(--sw-ry) at var(--sw-x) var(--sw-y),
      color-mix(in srgb, var(--walec-ak), #fff 26%) 0%,
      color-mix(in srgb, var(--walec-ak) 78%, transparent) 42%,
      transparent 76%),
    radial-gradient(var(--sv-rx) var(--sv-ry1) at var(--sw-x) var(--sv-y1), color-mix(in srgb, var(--ls-black) 92%, transparent), transparent 62%),
    radial-gradient(var(--sv-rx) var(--sv-ry2) at var(--sw-x) var(--sv-y2), color-mix(in srgb, var(--ls-black) 88%, transparent), transparent 62%),
    var(--grain);
  background-size: auto, auto, auto, var(--grain-size);
}
.walec-arkusz-papier {                 /* kółko przewija tylko galerię; strona pod spodem stoi */
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  container-type: inline-size; color: var(--text-on-dark);
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ls-offwhite) 28%, transparent) transparent;
}
.walec-arkusz-tresc { position: relative; padding: 40px 56px 64px 40px; }
.walec-arkusz-glowa { margin-bottom: 28px; padding-right: 64px; }
.walec-uchwyt { display: none; }
.walec-arkusz-skrypt {
  display: block; margin-bottom: 10px; max-width: 100%; overflow-wrap: anywhere;
  font-family: var(--font-script); font-size: clamp(34px, 1.6vw + 24px, 48px); line-height: 1; color: var(--accent-3);
}
.walec-arkusz-nazwa { margin: 6px 0 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-section); line-height: 1.05; letter-spacing: var(--track-display, -.01em); color: var(--text-on-dark); text-wrap: balance; }
.walec-arkusz-nazwa:empty, .walec-arkusz-efekt:empty { display: none; }
.walec-arkusz-efekt { margin: 10px 0 0; max-width: 56ch; font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.45; color: var(--text-on-dark-muted); }
.walec-arkusz-glowa .walec-link { margin-top: 14px; }
.walec-zamknij { position: absolute; top: 40px; right: 48px; z-index: 4; pointer-events: auto; transition: opacity var(--ruch-1); }
.walec-arkusz:not(.is-otwarty) .walec-zamknij { display: none; }
.walec-arkusz.is-zwija .walec-zamknij, .walec-arkusz.is-w-ruchu .walec-zamknij { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }   /* P2-7: w ruchu od razu schowany, po ruchu wraca przenikaniem */

/* galeria jak na Behance: jedna kolumna, zdjęcia w kolejności, naturalne proporcje, bez przycinania */
.walec-kolumna {
  display: flex; flex-direction: column; gap: var(--walec-odstep, 0px);
  border-radius: var(--radius-md); overflow: hidden;
  background: color-mix(in srgb, var(--ls-black) 40%, transparent);
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ls-black) 90%, transparent);
}
.walec-kolumna img { display: block; width: 100%; max-width: 100%; height: auto; background: color-mix(in srgb, var(--ls-offwhite) 6%, transparent); }
.walec-dalej {                         /* na końcu galerii: następny projekt */
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px;
  width: 100%; margin-top: 32px; padding: 22px 0 6px; border: 0; background: none; cursor: pointer; text-align: left;
  border-top: 1px solid color-mix(in srgb, var(--ls-offwhite) 18%, transparent); color: var(--text-on-dark);
}
.walec-dalej span { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-on-dark-muted); }
.walec-dalej b { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); transition: color var(--ruch-1); }
.walec-dalej:hover b { color: var(--accent-3); }
.walec-dalej:focus-visible { border-radius: var(--radius-sm); }

/* telefon: arkusz wysuwa się od dołu, podarta krawędź u góry, zamknięcie przeciągnięciem */
.walec-arkusz.is-pelny .walec-kartka { top: calc(14px + env(safe-area-inset-top, 0px)); transform-origin: 50% 0; }
.walec-arkusz.is-pelny .walec-arkusz-cien { top: calc(14px + env(safe-area-inset-top, 0px)); bottom: auto; right: 0; width: auto; height: 72px; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.24) 44px); }
.walec-arkusz.is-pelny .walec-arkusz-tresc { padding: 26px 20px 48px; }
.walec-arkusz.is-pelny .walec-arkusz-glowa { touch-action: none; padding-right: 52px; }
.walec-arkusz.is-pelny .walec-uchwyt { display: block; width: 44px; height: 5px; margin: 0 auto 18px; border-radius: 3px; background: color-mix(in srgb, var(--ls-offwhite) 35%, transparent); }
.walec-arkusz.is-pelny .walec-zamknij { top: calc(34px + env(safe-area-inset-top, 0px)); right: 16px; }
.walec-arkusz.is-pelny .walec-kolumna { border-radius: 12px; }

/* --- brief „Twoja firma” --------------------------------------------------- */
.walec-brief { position: relative; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 8px 32px; max-width: 640px; }
.walec-brief[hidden] { display: none; }
.walec-brief-os {                      /* podziałka kroków: ta sama co na walcu */
  grid-row: 1 / span 3; list-style: none; margin: 0; padding: 4px 0 0; position: relative; align-self: start;
  border-left: 1px solid color-mix(in srgb, var(--ls-offwhite) 22%, transparent);
}
.walec-brief-krok {
  position: relative; display: grid; gap: 3px; width: 100%; padding: 0 0 26px 18px; border: 0; background: none;
  text-align: left; cursor: pointer; color: color-mix(in srgb, var(--ls-offwhite) 45%, transparent);
}
.walec-brief-krok::before {            /* kreska podziałki; bieżący krok: znacznik w akcencie */
  content: ""; position: absolute; left: -1px; top: 6px; width: 12px; height: 1px;
  background: color-mix(in srgb, var(--ls-offwhite) 50%, transparent); transition: width var(--ruch-2), background-color var(--ruch-2), height var(--ruch-2);
}
.walec-brief-krok.is-teraz::before { width: 14px; height: 3px; top: 5px; background: var(--accent); }
.walec-brief-krok b { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-label-s); letter-spacing: var(--track-label-s); font-variant-numeric: tabular-nums; }
.walec-brief-krok span { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.walec-brief-krok em { font-style: normal; font-family: var(--font-body); font-size: var(--fs-caption); line-height: 1.35; color: var(--text-on-dark-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.walec-brief-krok em:empty { display: none; }
.walec-brief-krok.is-teraz, .walec-brief-krok.is-zrobiony { color: var(--text-on-dark); }
.walec-brief-krok.is-zrobiony b { color: var(--accent-3); }
.walec-brief-krok:disabled { cursor: default; }
.walec-brief-krok:focus-visible { border-radius: var(--radius-sm); }
.walec-brief-scena { display: grid; perspective: 900px; perspective-origin: 50% 40%; min-height: 250px; }
.walec-brief-karta { grid-area: 1 / 1; align-self: start; margin: 0; padding: 0; border: 0; min-width: 0; transform-origin: 50% 50%; backface-visibility: hidden; }
.walec-brief-karta[hidden] { display: none; }
.walec-brief-pytanie {
  float: left; width: 100%; padding: 0; margin: 0 0 16px;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2-tresc); line-height: 1.05;
  letter-spacing: var(--track-display, -.01em); color: var(--text-on-dark); text-wrap: balance;
}
.walec-brief-pytanie + * { clear: both; }
.walec-brief-podp { margin: 0 0 16px; font-family: var(--font-body); font-size: var(--fs-small); color: var(--text-on-dark-muted); }
.walec-brief input, .walec-brief textarea {
  display: block; width: 100%; margin: 0; color: var(--text-on-dark); caret-color: var(--accent-3);
  font-family: var(--font-body); font-size: var(--fs-body, 18px); line-height: 1.4;
}
.walec-brief input::placeholder, .walec-brief textarea::placeholder { color: color-mix(in srgb, var(--ls-offwhite) 34%, transparent); }
.walec-brief-duze {                    /* odpowiedź pisana dużym krojem, jak nagłówek */
  padding: 6px 0 10px; border: 0; border-radius: 0; background: transparent;
  border-bottom: 2px solid color-mix(in srgb, var(--ls-offwhite) 50%, transparent);
  font-family: var(--font-display) !important; font-weight: 600; font-size: clamp(24px, 1vw + 18px, 32px) !important; letter-spacing: -.01em;
  transition: border-color var(--ruch-1);
}
.walec-brief-duze:focus { outline: none; border-bottom-color: var(--focus); }
.walec-brief-duze[aria-invalid="true"] { border-bottom-color: var(--accent); }
.walec-brief-pole { display: block; margin-top: 22px; max-width: 320px; }
.walec-brief-pole input, .walec-brief textarea {
  padding: 12px 16px; border: 0; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--ls-black) 55%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ls-offwhite) 45%, transparent); transition: box-shadow var(--ruch-1);
}
.walec-brief textarea { min-height: 104px; resize: vertical; margin-bottom: 22px; }
.walec-brief-lista { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 22px 0 0; font-size: var(--fs-small); }
.walec-brief-lista:empty { display: none; }
.walec-brief-lista dt { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-on-dark-muted); padding-top: 2px; }
.walec-brief-lista dd { margin: 0; font-family: var(--font-body); color: var(--text-on-dark); }
.walec-brief-nawigacja { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.walec-brief-nawigacja[hidden] { display: none; }
.walec-brief-pomin { margin-left: auto; font-size: var(--ctl-fs-xs); color: var(--text-on-dark-muted); }
.walec-brief-pomin:hover { color: var(--accent-3); }
.walec-brief .walec-form-status { grid-column: 2; }
.walec-brief-koniec { text-align: left; }
.walec-brief-dlon { display: block; width: 84px; height: auto; margin-bottom: 8px; transform-origin: 60% 90%; animation: walec-macha calc(var(--czas-3) * 2.5) var(--krzywa-wyjscie) var(--czas-1) both; }
@keyframes walec-macha {
  0% { transform: scale(.6) rotate(-14deg); opacity: 0; }
  35% { transform: scale(1) rotate(10deg); opacity: 1; }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(4deg); }
  100% { transform: rotate(0); }
}
.walec-brief-dzieki { margin: 0; font-family: var(--font-script); font-size: clamp(40px, 2vw + 28px, 56px); line-height: 1; color: var(--accent-3); }
.walec-brief-info { margin: 12px 0 22px; max-width: 42ch; font-family: var(--font-body); font-size: var(--fs-body, 18px); line-height: 1.45; color: var(--text-on-dark); }
.walec-brief-kafel {                   /* „Twoja firma” staje się projektem na walcu */
  display: grid; gap: 10px; padding: 22px 24px; margin-bottom: 22px; max-width: 360px; border-radius: var(--radius-lg);
  border: 2px solid color-mix(in srgb, var(--accent-3) 60%, transparent);
  background-color: color-mix(in srgb, var(--ls-black) 40%, transparent); background-image: var(--grain); background-size: var(--grain-size);
}
.walec-brief-kafel-nazwa { font-family: var(--font-script); font-size: 30px; line-height: 1.05; color: var(--accent-3); overflow-wrap: anywhere; }
.walec-brief-kafel-uslugi { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-on-dark-muted); }
.walec-brief-kafel-uslugi:empty { display: none; }
/* brief samodzielny (podstrony): nagłówek z nazwą firmy pisaną odręcznie */
.walec-brief.is-samodzielny { max-width: 760px; }
.walec-brief-glowa { grid-column: 1 / -1; margin-bottom: 22px; }
.walec-brief.is-samodzielny .walec-brief-os { grid-row: 2 / span 3; }
.walec-brief-skrypt { display: block; min-height: 1em; margin-bottom: 10px; overflow-wrap: anywhere; font-family: var(--font-script); font-size: clamp(34px, 1.6vw + 24px, 48px); line-height: 1; color: var(--accent-3); }
.walec-brief-opis { margin: 8px 0 0; max-width: 52ch; font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.45; color: var(--text-on-dark-muted); }
.walec-form-etykieta.walec-brief-odstep { margin-top: 22px; }
.walec-brief-kafel-termin { font-family: var(--font-body); font-size: var(--fs-small); color: var(--text-on-dark); }
.walec-brief-kafel-termin:empty { display: none; }
.walec-brief-ics { margin: -6px 0 22px; display: inline-flex; }
.walec-brief-ics[hidden] { display: none; }
.walec-brief-koniec .walec-brief-wroc { display: flex; }
.walec-brief-koniec:focus { outline: none; }

/* rozmowa w kroku „Kontakt” */
.walec-brief-rozmowa { margin-top: 22px; }
.walec-brief-rozmowa-przycisk {
  display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 0 0 4px; border: 0; background: none; cursor: pointer; text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--ls-offwhite) 35%, transparent);
  font-family: var(--font-ui); font-weight: 600; font-size: var(--ctl-fs-sm); letter-spacing: var(--ctl-track); text-transform: uppercase; color: var(--text-on-dark);
}
.walec-brief-rozmowa-przycisk span { color: var(--accent-3); }
.walec-brief-rozmowa-przycisk:hover { border-bottom-color: var(--accent-3); }
.walec-brief-rozmowa-przycisk:focus-visible { border-radius: var(--radius-sm); }
a.walec-brief-rozmowa-przycisk { text-decoration: none; }
.walec-brief-kal { margin-top: 16px; }
.walec-brief-kal[hidden] { display: none; }

/* kalendarz: dni robocze i sloty (na ciemnym tle) */
.walec-kal { display: grid; gap: 14px; color: var(--text-on-dark); }
.walec-kal-glowa { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.walec-kal-glowa b { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); }
.walec-kal-glowa span { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-on-dark-muted); }
.walec-kal-dni { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.walec-kal-dni::-webkit-scrollbar { display: none; }
.walec-kal-dzien {
  flex: none; display: grid; justify-items: center; gap: 3px; width: 58px; padding: 10px 0 9px; border: 0; border-radius: 14px; cursor: pointer;
  background: transparent; color: var(--ls-offwhite); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ls-offwhite) 45%, transparent);
  transition: background-color var(--ruch-1), color var(--ruch-1), box-shadow var(--ruch-1);
}
.walec-kal-dzien small { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-label-s); letter-spacing: var(--track-label-s); text-transform: uppercase; color: var(--text-on-dark-muted); }
.walec-kal-dzien b { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: 1; font-variant-numeric: tabular-nums; }
.walec-kal-dzien:hover { background-color: color-mix(in srgb, var(--ls-offwhite) 10%, transparent); }
.walec-kal-dzien[aria-pressed="true"] { background-color: var(--ls-offwhite); background-image: var(--grain); background-size: var(--grain-size); color: var(--ls-black); box-shadow: none; }
.walec-kal-dzien[aria-pressed="true"] small { color: var(--ls-gray-500); }
.walec-kal-godziny { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; min-height: 44px; }
.walec-kal-godziny .walec-form-chip { justify-content: center; padding-left: 8px; padding-right: 8px; }
.walec-kal-godziny .walec-form-chip[aria-pressed="true"] { background-color: var(--accent-3); color: var(--ls-black); }
.walec-kal-info { margin: 0; font-family: var(--font-body); font-size: var(--fs-small); color: var(--text-on-dark-muted); }
.walec-kal-info:empty { display: none; }
.walec-kal-link {                      /* v27: druga droga (strona rezerwacji Notion) pod kalendarzem: zwykły link, nie przycisk */
  justify-self: start; min-height: 0; padding: 4px 0; gap: 6px;
  font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); letter-spacing: normal; text-transform: none; line-height: 1.4;
  color: var(--text-on-dark-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.walec-kal-link:hover { color: var(--text-on-dark); }

/* samodzielny kalendarz z krótkim formularzem */
.walec-rozmowa { display: grid; gap: 18px; color: var(--text-on-dark); }
.walec-rozmowa[hidden], .walec-rozmowa-pola[hidden], .walec-rozmowa-kal[hidden], .walec-rozmowa-ok[hidden] { display: none; }
.walec-rozmowa-pola { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: end; }
.walec-rozmowa-wybrany { grid-column: 1 / -1; margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); color: var(--accent-3); }
.walec-rozmowa .walec-brief-pole { margin: 0; max-width: none; }
.walec-rozmowa-temat { grid-column: 1 / -1; }
.walec-rozmowa input { display: block; width: 100%; margin: 0; color: var(--text-on-dark); caret-color: var(--accent-3); font-family: var(--font-body); font-size: var(--fs-body, 18px); line-height: 1.4; }
.walec-rozmowa input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.walec-rozmowa .walec-form-wyslij { justify-self: start; grid-column: 1 / -1; }
.walec-rozmowa.is-wysyla .walec-form-wyslij { opacity: .4; cursor: not-allowed; pointer-events: none; }
.walec-rozmowa-ok:focus { outline: none; }

/* kontrolki DS na ciemnym (brief) */
.walec-form-etykieta {
  display: block; margin: 0 0 10px; padding: 0;
  font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: uppercase; line-height: 1.2; color: var(--text-on-dark-muted);
}
.walec-form-chipy { display: flex; flex-wrap: wrap; gap: 8px; }
.walec-form-chip {                     /* DS pigułka (sm) na ciemnym */
  min-height: 44px; font-family: var(--font-ui); font-weight: 600; font-size: var(--ctl-fs-sm); letter-spacing: var(--ctl-track);
  text-transform: uppercase; line-height: 1; padding: var(--ctl-pad-sm); border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--ls-offwhite); cursor: pointer;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ls-offwhite) 45%, transparent);
  transition: background-color var(--ruch-1), color var(--ruch-1), box-shadow var(--ruch-1), transform var(--ruch-1);
}
.walec-form-chip:hover { background-color: color-mix(in srgb, var(--ls-offwhite) 10%, transparent); }
.walec-form-chip:active, .walec-kal-dzien:active, .walec-pauza:active, .walec-poz-btn:active { transform: scale(.97); }
.walec-form-chip[aria-pressed="true"] {
  background-color: var(--ls-offwhite); background-image: var(--grain); background-size: var(--grain-size);
  color: var(--ls-black); box-shadow: none;
}
.walec-form-miodek { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.walec-form-wyslij {                   /* DS Przycisk główny (md) */
  min-height: 48px; font-family: var(--font-ui); font-weight: 600; font-size: var(--ctl-fs-md); letter-spacing: var(--ctl-track);
  text-transform: uppercase; line-height: 1; padding: var(--ctl-pad-md); border: 0; border-radius: var(--radius-pill); cursor: pointer;
  background-color: var(--accent); background-image: var(--grain); background-size: var(--grain-size); color: var(--on-accent, var(--ls-offwhite));
  transition: background-color var(--ruch-1), transform var(--ruch-1);
}
.walec-form-wyslij:hover { background-color: var(--ls-raspberry-ink, var(--accent)); }
.walec-form-wyslij:active { transform: scale(.97); }
.walec-brief.is-wysyla .walec-form-wyslij { opacity: .4; cursor: not-allowed; pointer-events: none; }
.walec-form-alt { font-family: var(--font-ui); font-weight: 600; font-size: var(--ctl-fs-xs); letter-spacing: var(--ctl-track); color: var(--text-on-dark-muted); }
.walec-form-alt a { position: relative; color: var(--text-on-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; border-radius: 4px; }
.walec-form-alt a::before { content: ""; position: absolute; inset: -12px -6px; }   /* v1.9.8: pole dotyku ok. 40 px bez zmiany wyglądu */
.walec-form-alt a:hover { color: var(--accent-3); }
.walec-form-status { margin: 10px 0 0; min-height: 1.45em; font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.45; color: var(--accent-3); }
.walec-form-status:empty { min-height: 0; margin: 0; }

/* kafel „Twoja firma” po wysłaniu briefu */
.walec-koniec-nazwa { max-width: 86%; text-align: center; overflow-wrap: anywhere; }
.walec-koniec.is-wyslany .walec-plansza { border-style: solid; border-color: color-mix(in srgb, var(--accent-3) 60%, transparent); }

@container (max-width: 520px) {
  .walec-arkusz-tresc { padding: 28px 40px 48px 24px; }
}
/* wąski arkusz, telefon i wąski panel na podstronie: podziałka kroków leży poziomo nad pytaniem */
@container (max-width: 560px) {
  .walec-brief, .walec-brief.is-samodzielny { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .walec-brief-os, .walec-brief.is-samodzielny .walec-brief-os { grid-row: auto; display: flex; gap: 0; padding: 0 0 12px; border-left: 0; border-bottom: 1px solid color-mix(in srgb, var(--ls-offwhite) 22%, transparent); }
  .walec-brief-os li { flex: 1; min-width: 0; }
  .walec-brief-krok { padding: 6px 4px 8px 0; }
  .walec-brief-krok::before { left: 0; top: auto; bottom: -13px; width: 100%; height: 2px; background: transparent; }
  .walec-brief-krok.is-teraz::before { top: auto; width: 100%; background: var(--accent); }
  .walec-brief-krok em { display: none; }
  .walec-brief-nawigacja, .walec-brief .walec-form-status { grid-column: 1; }
  .walec-brief-scena { margin-top: 18px; }
  .walec-rozmowa-pola { grid-template-columns: minmax(0, 1fr); }
}

/* telefon: przy otwartym arkuszu strona pod spodem się nie przewija */
html.walec-blokada, html.walec-blokada body { overflow: hidden; }
html.walec-blokada { scrollbar-gutter: stable; }          /* bez skoku szerokości, gdy znika pasek przewijania */

/* --- wyłączanie warstw (opcja „warstwy”) ----------------------------------- */
.walec.bez-swiatla .walec-swiatlo,
.walec.bez-liczby .walec-liczba,
.walec.bez-podzialki .walec-podzialka,
.walec.bez-podzialki .walec-znacznik { display: none; }
.walec.bez-glebi .walec-scena { -webkit-mask-image: none; mask-image: none; }

@media (hover: none) { .walec-podpowiedz { display: none; } }
.walec.is-dotyk .walec-podpowiedz { display: none; }
.walec-arkusz-papier:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--focus); }
@media (prefers-reduced-motion: reduce) {
  .walec, .walec-swiatlo, .walec-arkusz-tlo { transition: none; }
  .walec-podpowiedz { display: none; }
  .walec-zamiar, .walec-foto { transition: none; }
  .walec-brief-dlon { animation: none; }
  .walec.is-rozwiniety .walec-swiatlo { transition: none; }
}

/* wąski walec (telefon): podpis w jednej linii, mniejsza etykieta na kaflu */
@container (max-width: 380px) or ((max-width: 480px) and (max-height: 720px)) {
  .walec-podpis { padding: 44px 18px 18px; gap: 10px; }
  .walec-podpis .walec-meta { font-size: var(--fs-label-s); letter-spacing: var(--track-label-s); }
  .walec-podpis .walec-efekt { display: none; }
  .walec-podpis .walec-akcje { gap: 6px 14px; margin-top: 10px; min-height: 72px; }
  .walec-podpis .walec-link, .walec-podpis .walec-rozwin { font-size: var(--ctl-fs-xs); white-space: nowrap; }
  .walec-etykieta { left: 10px; top: 10px; max-width: calc(100% - 20px); padding: 5px 10px; }
  .walec-et-reszta { display: none; }
  .walec-ster { flex-direction: column; gap: 8px; }   /* licznik nad pauzą: tekst podpisu zostaje szeroki */
  .walec-licznik { font-size: 11px; }
  .walec-postep { left: 18px; right: 18px; bottom: 8px; }
}

/* ==========================================================================
   Walec poziomy (Walec.poziomy): sekcja we wpisach. Ten sam grafit, światło w kolorze projektu,
   kafle 4:5; bęben obraca się wokół osi pionowej. Pionowe kółko i palec w pionie przewijają stronę.
   ========================================================================== */
.walec-poz {
  --walec-ak: var(--ls-graphite);
  position: relative; overflow: hidden; color: var(--text-on-dark);
  -webkit-user-select: none; user-select: none;
}
.walec-poz-scena {
  position: relative; perspective: 1500px; perspective-origin: 50% 50%; cursor: grab; touch-action: pan-y; outline: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.walec-poz-scena:active { cursor: grabbing; }
.walec-poz-scena::before {             /* światło w kolorze projektu z przodu (w masce sceny, bez ostrych brzegów) */
  content: ""; position: absolute; left: 18%; right: 18%; top: -6%; bottom: -6%; pointer-events: none; transition: --walec-ak calc(var(--czas-3) * 2) var(--krzywa-wyjscie);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--walec-ak), #fff 22%), color-mix(in srgb, var(--walec-ak) 45%, transparent) 55%, transparent);
  opacity: .6;
}
.walec-poz-scena:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--focus); border-radius: var(--radius-md); }
.walec-poz-beben { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; will-change: transform; }
.walec-poz-kafel {
  position: absolute; inset: 0; display: block; overflow: hidden; border-radius: var(--radius-lg);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background-color: var(--k, var(--ls-gray-700)); background-image: var(--grain); background-size: var(--grain-size);
  box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .8); -webkit-user-drag: none;
}
.walec-poz-kafel img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--ruch-3); pointer-events: none; }
.walec-poz-kafel img.is-jest { opacity: 1; }
.walec-poz-kafel .walec-etykieta { left: 12px; top: 12px; max-width: calc(100% - 24px); padding: 5px 10px; }
.walec-poz-kafel .walec-et-reszta { display: none; }   /* wąski kafel: tylko główny zakres, pełny opis jest w podpisie */
.walec-poz-mgla { position: absolute; inset: -1px; background: var(--ls-black); opacity: 0; pointer-events: none; }
.walec-poz-kafel:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ls-offwhite), 0 0 0 3px var(--focus); }
.walec-poz-dol { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; padding: 6px 0 0; }
/* v1.9.8: stała wysokość podpisu (2 wiersze nazwy, 1 wiersz opisu) i stała podstawa w wierszu: obrót walca nie przesuwa tekstu wpisu pod nim */
.walec-poz-tekst { flex: 1 1 320px; min-width: 0; min-height: calc(var(--fs-h4) * 2.2 + 6px + var(--fs-label) * 2.6); display: flex; flex-direction: column; justify-content: flex-end; }
.walec-poz-nazwa { min-height: 2.2em; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: 1.1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* v24 (po integracji): podpis walca poziomego zawsze na 2 + 2 linie, więc zmiana projektu nie zmienia wysokości (bez przesunięć tekstu wpisu) */
.walec-poz-meta { min-height: 2.6em; margin-top: 6px; font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-label); line-height: 1.3; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-on-dark-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.walec-poz-ster { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.walec-poz-btn {
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: transparent; color: var(--ls-offwhite);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--ls-offwhite) 55%, transparent); transition: background-color var(--ruch-1), color var(--ruch-1);
}
.walec-poz-btn:hover { background: var(--ls-offwhite); color: var(--ls-black); }
.walec-poz-str { width: 10px; height: 10px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: translateX(2px) rotate(45deg); }
.walec-poz-str.is-prawo { transform: translateX(-2px) rotate(-135deg); }
.walec-poz-link { display: inline-flex; align-items: center; min-height: 44px; margin-left: 10px; font-family: var(--font-ui); font-weight: 600; font-size: var(--ctl-fs-sm); letter-spacing: var(--ctl-track); text-transform: uppercase; text-decoration: none; color: var(--accent-3); border-radius: 4px; white-space: nowrap; }
.walec-poz-link:hover { color: var(--ls-offwhite); }
@media (prefers-reduced-motion: reduce) { .walec-poz-scena::before { transition: none; } }

/* --- walec poziomy (telefon): bęben obraca się w bok, jak gest palca ------ */
.walec.walec-poziom { min-height: 0; }
.walec.walec-poziom .walec-podzialka, .walec.walec-poziom .walec-znacznik, .walec.walec-poziom .walec-liczba { display: none; }
.walec.walec-poziom .walec-beben { top: 37%; }
.walec.walec-poziom .walec-podpowiedz { top: 18px; opacity: .8; font-size: var(--fs-label-s); letter-spacing: var(--track-label-s); }
.walec.walec-poziom.is-rozwiniety .walec-podpowiedz { opacity: 0; }
.walec.walec-poziom .walec-podpis { padding: 28px 20px 24px; align-items: flex-end; }
.walec.walec-poziom .walec-meta { font-size: var(--fs-label-s); letter-spacing: var(--track-label-s); }
.walec.walec-poziom .walec-akcje { gap: 4px 18px; margin-top: 8px; }
.walec.walec-poziom .walec-link, .walec.walec-poziom .walec-rozwin { min-height: 40px; }
.walec.walec-poziom .walec-postep { left: 20px; right: 20px; bottom: 14px; }

/* kalendarz v1.7: kroki 1–2–3, dni w siatce (bez przewijania w bok), wybrany termin na widoku */
.walec-kal-krok { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0 0; font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-on-dark); }
.walec-kal-krok b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-3); color: var(--ls-black); font-size: var(--fs-label-s); letter-spacing: 0; }
.walec-kal-krok em { font-style: normal; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-caption); letter-spacing: 0; text-transform: none; color: var(--text-on-dark-muted); }
.walec-kal-dzien { min-width: 0 !important; width: 100%; padding: 8px 2px !important; }
.walec-kal-wybor { margin: 2px 0 0; padding: 12px 14px 12px 40px; position: relative; border-radius: 12px; background: color-mix(in srgb, var(--accent-3) 16%, transparent); color: var(--ls-offwhite); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-karta); line-height: 1.3; }
.walec-kal-wybor::before { content: ""; position: absolute; left: 16px; top: 50%; width: 11px; height: 6px; margin-top: -5px; border-left: 2px solid var(--accent-3); border-bottom: 2px solid var(--accent-3); transform: rotate(-45deg); }
.walec-rozmowa-krok { grid-column: 1 / -1; }
.walec-rozmowa-pola .walec-rozmowa-wybrany { display: none; }

@media (max-width: 420px) { .walec-brief-krok span { font-size: 11px; letter-spacing: .05em; } .walec-brief-os { gap: 6px; } }
/* telefon: przyciski walca i briefu co najmniej 40 px wysokości */
@media (hover: none) { .walec-link, .walec-rozwin, .walec-brief-wstecz, .walec-brief-pomin { min-height: 40px; } }
/* walec poziomy: podpowiedź widoczna także na dotyku, strzałki obok pauzy */
.walec.walec-poziom .walec-podpowiedz { display: block; }
.walec-str { width: 44px; height: 44px; }
.walec-str .walec-poz-str { display: block; width: 10px; height: 10px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateX(2px) rotate(45deg); }
.walec-str .walec-poz-str.is-prawo { transform: translateX(-2px) rotate(-135deg); }
.walec.walec-poziom .walec-ster { gap: 8px; }
.walec.walec-poziom .walec-licznik { display: none; }
.walec.walec-poziom .walec-etykieta { max-width: calc(100% - 16px); line-height: 1.2; }
/* zamknięcie arkusza widoczne także nad jasną planszą */
.walec-zamknij { background-color: color-mix(in srgb, var(--ls-black) 84%, transparent); }   /* v1.9.7: bez rozmycia tła (liczone w każdej klatce przewijania galerii) */
.walec-kal-dzien[aria-pressed="true"] { background-color: var(--accent-3) !important; }
.walec.walec-poziom .walec-meta { white-space: normal; }

/* telefon: pod galerią początek następnego projektu, przewijanie płynie dalej (v1.8) */
/* ciąg: kolejne projekty dopisane pod galerią (v1.9.3), każdy jako osobna sekcja */
.walec-sekcja { margin-top: 56px; padding-top: 34px; border-top: 1px solid color-mix(in srgb, var(--ls-offwhite) 18%, transparent); }
.walec-sekcja .walec-arkusz-glowa { margin-bottom: 22px; }
.walec-nastepny .walec-kolumna { max-height: none; }
.walec-arkusz.is-pelny .walec-nast-glowa, .walec-arkusz.is-waski .walec-nast-glowa { touch-action: pan-y; }
.walec-dalej.is-ukryty { display: none; }
/* v1.9.5: ciąg także na komputerze (wcześniej tu był schowany) */

/* ==========================================================================
   Wąski walec (v1.9.2, opcja waski): telefon. Pasek przy prawej krawędzi ekranu, zawsze na miejscu jak na komputerze.
   Kafle na całą wysokość paska, w całości (kadr 4:5 jak plik kafla), bez przyciemniania: wygaszenie tylko na górnej
   i dolnej krawędzi. Bez podziałki z numerami. Łuk bębna widać na końcach paska. Licznik slajdów na dole.
   ========================================================================== */
.walec.walec-waski { min-height: 0; }
.walec-waski .walec-scena {
  perspective: 100vh; perspective: 100lvh; perspective-origin: 50% 50%; touch-action: none;
  -webkit-mask-image: none; mask-image: none;
}
/* v1.9.7: wygaszenie końców paska nakładką zamiast maski: maska na obracającym się bębnie 3D to osobna powierzchnia
   przeliczana w każdej klatce (na telefonie, zwłaszcza w Safari, zauważalne gubienie klatek) */
.walec-waski .walec-scena::before, .walec-waski .walec-scena::after { content: ""; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
.walec-waski .walec-scena::before { top: 0; height: 9%; background: linear-gradient(to bottom, var(--walec-cien), color-mix(in srgb, var(--walec-cien) 0%, transparent)); }
.walec-waski .walec-scena::after { bottom: 0; height: 11%; background: linear-gradient(to top, var(--walec-cien), color-mix(in srgb, var(--walec-cien) 0%, transparent)); }
.walec-waski .walec-beben { top: 50%; left: calc(50% + 3px); }   /* środek widocznej części paska (podarta krawędź zabiera kilka px z lewej) */
.walec-waski .walec-liczba, .walec-waski .walec-podpowiedz, .walec-waski .walec-zamiar, .walec-waski .walec-tekst,
.walec-waski .walec-pauza, .walec-waski .walec-etykieta, .walec-waski .walec-nr,
.walec-waski .walec-podzialka, .walec-waski .walec-znacznik,
.walec-waski .walec-blask, .walec-waski .walec-zmrok, .walec-waski .walec-mgla { display: none; }
.walec-waski .walec-plansza { border-radius: 10px; box-shadow: 0 10px 18px -12px color-mix(in srgb, var(--walec-cien) 90%, transparent); }
.walec.walec-waski .walec-podpis {                     /* licznik na dole: lekkie przyciemnienie tylko przy samej krawędzi */
  left: 0; right: 0; padding: 30px 0 16px; justify-content: center; align-items: flex-end;
  background: linear-gradient(to top, color-mix(in srgb, var(--walec-cien) 80%, transparent) 40%, transparent);
}
.walec.walec-waski .walec-ster { flex-direction: column; gap: 0; }
.walec.walec-waski .walec-licznik { display: block; font-size: 11px; letter-spacing: .04em; color: var(--text-on-dark); }
.walec.walec-waski .walec-postep { left: 14px; right: 14px; bottom: 8px; }
.walec-waski .walec-koniec .walec-plansza { gap: 4px; border-width: 1.5px; padding: 0 3px; }
.walec-waski .walec-dlon { height: 36%; }
.walec-waski .walec-koniec-nazwa { font-size: 13px; max-width: 96%; }
.walec-waski .walec-koniec-opis { display: none; }
.walec-chwyt { position: fixed; z-index: 33; touch-action: none; -webkit-user-select: none; user-select: none; }   /* niewidoczny pas chwytu przy krawędzi walca */
.walec-dotknij {
  position: absolute; z-index: 6; left: 50%; top: calc(50% + 34px); transform: translateX(-50%); padding: 5px 8px; border-radius: 99px; pointer-events: none;
  background: var(--accent-3); color: var(--ls-black); font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-label-s); letter-spacing: var(--track-label-s); text-transform: uppercase;
  animation: walec-dotknij 2.2s ease-in-out infinite; transition: opacity var(--ruch-3);   /* pulsowanie: rytm */
}
.walec-dotknij.is-zgasla { opacity: 0; }
@keyframes walec-dotknij { 50% { transform: translateX(-50%) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .walec-dotknij { animation: none; } }

/* ==========================================================================
   Wąski walec (v1.9.1): projekt otwiera się jak na komputerze. Kartka wychodzi spod walca w lewo i przykrywa stronę,
   walec zostaje widoczny i dalej obraca się palcem (po postoju na innym projekcie wjeżdża jego kartka).
   Galeria przewija się sama i palcem, na końcu płynie w następny projekt. Zsunięcie kartki w prawo albo X ją zwija.
   ========================================================================== */
.walec.walec-waski { touch-action: none; }                     /* cały pasek to walec: palec na nim nigdy nie przewija strony */
.walec-waski .walec-podpis { pointer-events: none; }
.walec-arkusz.is-waski .walec-arkusz-papier { touch-action: pan-y; }   /* pion: galeria, poziom: zsunięcie kartki */
.walec-arkusz.is-waski .walec-arkusz-tresc { padding: calc(22px + env(safe-area-inset-top, 0px)) 40px 48px 18px; }
.walec-arkusz.is-waski .walec-arkusz-glowa { padding-right: 44px; margin-bottom: 22px; }
.walec-arkusz.is-waski .walec-arkusz-nazwa { font-size: var(--fs-section); }
.walec-arkusz.is-waski .walec-zamknij { top: calc(16px + env(safe-area-inset-top, 0px)); right: 34px; }
.walec-arkusz.is-waski .walec-kolumna { border-radius: 12px; }
.walec-arkusz.is-waski .walec-arkusz-cien { width: 48px; }
/* bardzo wąski panel briefu (telefon obok walca): etykiety kroków mniejsze, cała podziałka mieści się w panelu */
@container (max-width: 300px) {                  /* v1.9.8: nie mniej niż 11 px (czytelność na telefonie) */
  .walec-brief-krok span { font-size: 11px; letter-spacing: .02em; }
  .walec-brief-krok b { font-size: 11px; letter-spacing: .04em; }
}

/* v16: wąski walec (telefon): kafel „Twoja firma” pełny i ciemny (nie przerywana ramka, która wyglądała jak brakujące zdjęcie) */
.walec-waski .walec-koniec .walec-plansza { border: 1.5px solid color-mix(in srgb, var(--accent-3) 55%, transparent); background: var(--ls-ink-950, #191919); box-shadow: 0 10px 18px -12px color-mix(in srgb, var(--walec-cien) 90%, transparent); }
.walec-waski .walec-koniec.is-wyslany .walec-plansza { border-color: var(--accent-3); }

/* v1.9.5: strona projektu zawsze widoczna i czytelna: w podpisie walca obrysowany przycisk, w arkuszu pełny (żółty) */
.walec-podpis .walec-link {
  padding: 0 14px; min-height: 34px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text-on-dark) 55%, transparent);
  transition: box-shadow var(--ruch-1), color var(--ruch-1), background-color var(--ruch-1);
}
.walec-podpis .walec-link:hover { color: var(--ls-black, #202020); background: var(--ls-offwhite, #F1F1F0); box-shadow: none; }
.walec-arkusz-glowa .walec-link, .walec-sekcja .walec-link {
  display: inline-flex; margin-top: 16px; padding: 0 18px; min-height: 42px; border-radius: 999px;
  background: transparent; color: var(--text-on-dark); font-weight: 700; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text-on-dark) 55%, transparent);
  transition: transform var(--ruch-1), background-color var(--ruch-1), color var(--ruch-1);
}
.walec-arkusz-glowa .walec-link:hover, .walec-sekcja .walec-link:hover { color: var(--ls-black, #202020); transform: translateY(-1px); background: var(--ls-offwhite, #F1F1F0); box-shadow: none; }

/* v1.9.9: stałe akcje arkusza: „Strona projektu” i „Zamów podobny” zawsze widoczne u dołu galerii (sticky w przewijanym papierze) */
.walec-arkusz-akcje {
  position: sticky; bottom: 22px; z-index: 3; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 56px 22px 40px;
  pointer-events: none;
}
.walec-arkusz-akcje[hidden], .walec-arkusz-akcje .walec-link[hidden] { display: none; }
.walec-arkusz-akcje .walec-link {
  pointer-events: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px;
  font-weight: 700; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7); transition: transform var(--ruch-1), background-color var(--ruch-1), color var(--ruch-1);
}
.walec-arkusz-akcje .walec-akcje-strona { background: color-mix(in srgb, var(--ls-black, #202020) 86%, transparent); color: var(--text-on-dark); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text-on-dark) 55%, transparent), 0 10px 24px -10px rgba(0, 0, 0, .7); }
.walec-arkusz-akcje .walec-akcje-strona:hover { color: var(--ls-black, #202020); transform: translateY(-1px); background: var(--ls-offwhite, #F1F1F0); }
.walec-arkusz-akcje .walec-akcje-podobny { background-color: var(--accent); background-image: var(--grain); background-size: var(--grain-size); color: var(--on-accent, var(--ls-offwhite)); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7); }
.walec-arkusz-akcje .walec-akcje-podobny:hover { color: var(--on-accent, var(--ls-offwhite)); background-color: var(--ls-raspberry-ink, var(--accent)); transform: translateY(-1px); }
.walec-kartka.ma-akcje .walec-arkusz-tresc { padding-bottom: 24px; }
.walec-kartka.ma-akcje .walec-arkusz-glowa .walec-link { display: none; }   /* w nagłówkach (też kolejnych projektów w ciągu) ten sam link: zostaje tylko stały, który zmienia się z projektem */
/* telefon: nad pastylką wyceny (stały pasek na dole ekranu), przyciski jeden pod drugim na całą szerokość kartki */
.walec-arkusz.is-pelny .walec-arkusz-akcje, .walec-arkusz.is-waski .walec-arkusz-akcje { flex-direction: column; gap: 8px; bottom: calc(var(--walec-akcje-dol, 84px) + env(safe-area-inset-bottom, 0px)); margin-bottom: calc(var(--walec-akcje-dol, 84px) + env(safe-area-inset-bottom, 0px)); }
.walec-arkusz.is-pelny .walec-arkusz-akcje { margin-left: 20px; margin-right: 20px; }
.walec-arkusz.is-waski .walec-arkusz-akcje { margin-left: 18px; margin-right: 40px; }
.walec-arkusz.is-pelny .walec-arkusz-akcje .walec-link, .walec-arkusz.is-waski .walec-arkusz-akcje .walec-link { justify-content: center; min-height: 40px; padding: 0 14px; font-size: var(--ctl-fs-xs); }
.walec-arkusz.is-zwija .walec-arkusz-akcje { opacity: 0; transition: opacity var(--czas-1) var(--krzywa-zamykanie); }