/* ============================================================
   WSPÓŁTWÓRCY — układ edytorski, MOBILE FIRST (2026-10-06)
   Ładowany po style.css. Strona główna jest zbudowana na klasach e-*,
   nagłówek (.hd), menu (.mn) i stopka (.ft) są wspólne dla wszystkich stron.

   Telefon jest bazą: siatka 4 kolumn, 20 px marginesu, duże odstępy pionowe.
   Komputer (min-width) dostaje osobny układ, nie powiększony telefon.

   Ruch — tylko trzy rodzaje:
   1. tekst: opacity + translateY 14 px,
   2. zdjęcia projektów: spokojne przenikanie + lekkie „osiadanie” skali
      (plus bardzo lekki ruch kadru przy przewijaniu),
   3. menu i akordeon: płynne otwarcie (opacity + przesunięcie / wysokość).
   ============================================================ */

:root {
  --bg:   #FAFAF8;
  --fg:   #000000;
  --mute: #6A6A6A;
  --line: #D6D6D2;
  --gut:  20px;
  --col:  calc((100vw - 2 * var(--gut)) / 4);   /* jedna kolumna siatki telefonu */
  --hd-h: 60px;
  --sec:  64px;                                  /* połowa odstępu między sekcjami (razem 128 px) */
  --ease: cubic-bezier(.22, .61, .36, 1);        /* spokojne wyhamowanie, bez szarpnięcia */

  /* Kolory projektów: kolor zawsze wskazuje konkretną realizację (hasło w hero, karuzela,
     podstrony, usługi). Te same wartości są w skrypcie hasła w index.html. */
  --c-koncept:  #1A2BFF;
  --c-natanael: #F0105A;
  --c-mumio:    #FF4A10;
  --c-african:  #C98500;
  --c-maluch:   #0098DB;
  --c-etykiety: #E8148A;
  --c-morski:   #00A37E;
}
@media (min-width: 769px)  { :root { --gut: clamp(32px, 4vw, 64px); --sec: clamp(80px, 8vw, 140px); } }
@media (min-width: 1025px) { :root { --hd-h: 72px; } }

/* Stare menu boczne i jego miejsce znikają, nagłówek jest jeden dla wszystkich ekranów */
.rail, #nav, .nav-mobile, .cursor { display: none !important; }
body { padding-left: 0 !important; padding-top: var(--hd-h); background: var(--bg); }
html { scroll-padding-top: var(--hd-h); }
.cs-hero, #hero { padding-top: 0 !important; }

.e-wrap { max-width: 1600px; margin: 0 auto; padding: 0 var(--gut); }

/* Ciemne sekcje */
.e-dark { --bg: #000; --fg: #fff; --mute: rgba(255,255,255,.55); --line: rgba(255,255,255,.2); background: #000; color: #fff; }

/* Link tekstowy zamiast przycisków; na telefonie z wygodnym polem dotyku */
.e-link {
  display: inline-block;
  padding: 10px 0 4px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: inherit;
  font: 600 16px/1.3 var(--font-body);
  letter-spacing: 0;
  cursor: pointer;
  transition: opacity .2s;
}
.e-link:hover { opacity: .55; }

/* Małe etykiety: 11–12 px, wersaliki, rozstrzelone */
.e-meta, .e-label, .e-works-count, .e-acc-n, .e-steps-n, .e-q-count, .e-hero-go {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* ============================================
   NAGŁÓWEK I MENU
   ============================================ */

.hd {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--hd-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gut);
  background: rgba(250,250,248,.96);
  border-bottom: 1px solid #D6D6D2;
}
/* Logo: odręczny napis (logo-v3.svg, czarny). Na czerni odwracamy kolor filtrem. */
.hd-logo { display: block; color: inherit; }
.hd-logo img { display: block; width: auto; height: 22px; }
@media (min-width: 1025px) { .hd-logo img { height: 26px; } }
.mn .hd-logo img { filter: invert(1); }
.hd-links { display: none; }
.hd-menu, .mn-close {
  min-height: 44px;
  padding: 0 0 0 16px;
  border: 0;
  background: none;
  color: inherit;
  font: 600 12px/1 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
@media (min-width: 1025px) {
  .hd-menu { display: none; }
  .hd-links { display: flex; gap: clamp(24px, 2.6vw, 44px); }
  .hd-links a { font-size: 15px; font-weight: 500; transition: opacity .2s; }
  .hd-links a:hover { opacity: .5; }
}

/* Menu na cały ekran: wjeżdża miękko, pozycje jedna po drugiej */
.mn {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #fff;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.mn[hidden] { display: none; }
.mn.is-open { opacity: 1; transform: none; }
.mn-top {
  height: var(--hd-h);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gut);
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.mn-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--gut);
}
.mn-links a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
  font-family: var(--font-display);
  font-size: clamp(44px, 12.4vw, 88px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.mn.is-open .mn-links a { opacity: 1; transform: none; }
.mn.is-open .mn-links a:nth-child(2) { transition-delay: .05s; }
.mn.is-open .mn-links a:nth-child(3) { transition-delay: .1s; }
.mn.is-open .mn-links a:nth-child(4) { transition-delay: .15s; }
.mn-links a span {
  padding-top: .5em;
  font: 600 12px/1 var(--font-body);
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);
}
.mn-foot {
  display: flex;
  justify-content: space-between;
  padding: 20px var(--gut) 28px;
  border-top: 1px solid rgba(255,255,255,.2);
  font-size: 15px;
  color: rgba(255,255,255,.7);
}
body.mn-on { overflow: hidden; }


/* ============================================
   WSPÓLNE ELEMENTY SEKCJI
   ============================================ */

.e-sec { padding: var(--sec) 0; background: var(--bg); color: var(--fg); }

/* Nagłówek sekcji: duży numer w kroju nagłówków, obok mała nazwa, nad nimi kreska w kolorze tekstu.
   Numery wewnątrz sekcji (projekty, kroki) zostają małe i szare, z jasną kreską — niższy poziom. */
.e-label {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-top: 16px;
  margin-bottom: 48px;
  border-top: 1px solid var(--fg);
  color: var(--fg);
}
.e-label-n {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: .8;
}
.e-label-t { padding-top: 2px; }
/* H2 na telefonie 38–48 px, bardzo ciasno */
.e-h2 {
  margin-bottom: 56px;
  font-family: var(--font-display);
  font-size: clamp(38px, 10.6vw, 48px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: .92;
  color: var(--fg);
}
/* „współtworzenia” to jedno długie słowo: skala dopasowana do szerokości ekranu */
.e-h2--fit { font-size: min(48px, calc((100vw - 2 * var(--gut)) / 9.3)); }   /* najdłuższe słowo („współtworzenia”) ma ok. 8,9 em */
.e-lead {
  max-width: 17em;
  margin: -24px 0 0;
  font-size: 18px;
  line-height: 1.45;
  color: var(--mute);
}
@media (min-width: 769px) {
  .e-label { margin-bottom: clamp(48px, 5vw, 72px); gap: 24px; }
  .e-label-n { font-size: clamp(56px, 5vw, 88px); }
  .e-h2, .e-h2--fit { margin-bottom: clamp(56px, 7vw, 120px); font-size: clamp(56px, 6.4vw, 112px); }
  .e-lead { margin: calc(-1 * clamp(24px, 4vw, 72px)) 0 0 calc(100% / 12 * 4); font-size: 19px; }
}


/* ============================================
   HERO — hasło w lewym górnym rogu, obok kafle z realizacjami jadące w dół
   ============================================ */

.e-hero {
  min-height: calc(92svh - var(--hd-h));
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.e-hero-in {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: clamp(24px, 5vh, 56px);
  padding-bottom: 16px;
}
/* H1: „Stwórzmy” (ok. 5,7 em) wypełnia szerokość telefonu */
.e-hero-h {
  font-family: var(--font-display);
  font-size: calc((100vw - 2 * var(--gut)) / 6);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: .88;
  color: var(--fg);
}
.e-hero-l { display: block; }
/* Podmieniane słowo w osobnej linii: pudełko przycina wjazd, ale nie ogonki liter */
.e-hero-h .swap-box {
  display: block;
  width: auto !important;
  overflow: hidden;
  padding: .06em 0 .22em;
  margin: -.06em 0 -.12em;
  color: var(--mute);
}

/* Kafle z realizacjami: okno, w nim dwie kolumny kwadratów jadą powoli w dół.
   Każda ścieżka ma swój zestaw dwa razy, więc przesunięcie o połowę daje pętlę bez szwu. */
.e-hero-media {
  position: relative;
  align-self: flex-end;
  width: calc(84% + var(--gut));
  margin: 0 calc(-1 * var(--gut)) 0 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.e-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.e-tiles-col { position: relative; overflow: hidden; }
.e-tiles-track {
  position: absolute;                  /* ścieżka nie rozpycha okna: wysokość okna ustala hero */
  top: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: tilesDown 46s linear infinite;
  will-change: transform;
}
.e-tiles-col:nth-child(2) .e-tiles-track { animation-duration: 58s; animation-delay: -20s; }
.e-tiles-track img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #EDEDEA; }
/* z góry na dół: start przesunięty o połowę ścieżki (+ połowę odstępu) w górę, koniec w zerze */
@keyframes tilesDown {
  from { transform: translate3d(0, calc(-50% - 4px), 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.e-hero-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-top: auto;
  padding-top: 20px;
}
.e-hero-sub { max-width: 13em; font-size: 13px; line-height: 1.4; color: var(--mute); }
.e-hero-go {
  flex: none;
  padding: 12px 0 4px;
  border-bottom: 1px solid currentColor;
  color: var(--fg);
}

/* Telefon: kadr pod hasłem (bez nachodzenia), hero kończy się zaraz pod kadrem, kadr trochę wyższy */
@media (max-width: 768px) {
  .e-hero { min-height: 0; }
  /* kadr pod hasłem, bez nachodzenia na tekst */
  .e-hero-media { margin-top: 28px; }
  .e-hero-foot { margin-top: 0; padding-top: 24px; }
  .e-hero-in { padding-bottom: 8px; }
}

@media (min-width: 769px) {
  .e-hero-in {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr auto;
    column-gap: 24px;
    padding-top: clamp(40px, 8vh, 104px);
    padding-bottom: clamp(32px, 5vh, 56px);
  }
  
  .e-hero-h { grid-column: 1 / 8; grid-row: 1; align-self: start; font-size: clamp(72px, 7.6vw, 140px); }   /* mieści się obok kafli */
  /* Przekątna: hasło w lewym górnym rogu, poziomy kadr w prawym dolnym */
  /* kafle po prawej od góry do dołu hero, do krawędzi okna */
  .e-hero-media { grid-column: 8 / 13; grid-row: 1 / 3; align-self: stretch; width: calc(100% + var(--gut)); min-height: 60vh; aspect-ratio: auto; margin: 0 calc(-1 * var(--gut)) 0 0; }
  .e-tiles { gap: 12px; }
  .e-tiles-track { gap: 12px; }
  .e-hero-foot { grid-column: 1 / 6; grid-row: 2; align-self: end; margin: 0; justify-content: flex-start; }
  .e-hero-sub { max-width: none; font-size: 15px; }
  .e-hero-go { display: none; }
}


/* ============================================
   01 REALIZACJE — karuzela na palec
   Telefon: karta ~80% szerokości, obok widać kraj następnej. Komputer: trzy karty obok siebie.
   ============================================ */

/* mniejszy nagłówek niż w innych sekcjach — tu grają zdjęcia */
.e-h2--works { margin-bottom: 20px; font-size: min(40px, calc((100vw - 2 * var(--gut)) / 9.3)); }
.e-h2--works + .e-lead { margin-top: 0; }
.e-lead + .e-works { margin-top: 40px; }

.e-works {
  display: flex;
  gap: 12px;
  margin-right: calc(-1 * var(--gut));        /* pasek dochodzi do prawej krawędzi ekranu */
  padding-right: var(--gut);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.e-works::-webkit-scrollbar { display: none; }
.e-work {
  flex: 0 0 80%;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  color: var(--fg);
}
.e-work-img { display: block; }
.e-work-clip { display: block; overflow: hidden; background: #EDEDEA; }
.e-work-clip picture { display: block; }
.e-work-clip img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.e-work-name {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
}
.e-work-cat { margin-top: 8px; font-size: 14px; color: var(--mute); }

/* pasek postępu, licznik i strzałki pod kartami */
.e-works-nav { display: flex; align-items: center; gap: 4px; margin-top: 28px; }
.e-works-bar { position: relative; flex: 1; height: 1px; margin-right: 16px; background: var(--line); }
.e-works-bar span { position: absolute; inset: 0; background: var(--fg); transform-origin: left; transform: scaleX(.25); transition: transform .3s var(--ease); }
.e-works-count { margin-right: 8px; color: var(--mute); }
.e-works-nav button { min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font-size: 22px; cursor: pointer; }
.e-works-nav button:hover { opacity: .5; }
/* ostatnia karta: „Pozostałe projekty” — siatka 2×2 miniatur w miejscu zdjęcia */
.e-work-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; aspect-ratio: 4 / 5; background: transparent; }
.e-work-mosaic img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; background: #EDEDEA; }

@media (min-width: 769px) {
  .e-h2--works { margin-bottom: 28px; font-size: clamp(44px, 4.4vw, 72px); }
  .e-h2--works + .e-lead { margin: 0; }
  .e-lead + .e-works { margin-top: clamp(48px, 5vw, 80px); }
  .e-works { gap: 24px; }
  .e-work { flex: 0 0 calc((100% - 2 * 24px - var(--gut)) / 3); }
  .e-work-name { font-size: clamp(22px, 1.8vw, 30px); }
}
@media (hover: hover) and (pointer: fine) {
  .e-work-clip img { transition: transform .9s var(--ease); }
  .e-work:hover .e-work-clip img { transform: scale(1.03); }
}


/* ============================================
   HASŁO — sama typografia na czerni
   ============================================ */

.e-manifest { min-height: 90svh; display: flex; align-items: center; padding: 160px 0 96px; }
.e-manifest .e-wrap { width: 100%; }
.e-manifest-h {
  font-family: var(--font-display);
  font-size: 12.6vw;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: .92;
}
@media (min-width: 769px) {
  .e-manifest-h { font-size: clamp(72px, 9.4vw, 170px); }
}


/* ============================================
   02 USŁUGI — rytmiczna lista, opis po tapnięciu
   ============================================ */

/* style.css stylizuje #uslugi po id (tło, odstępy, kreska) — tu wygrywamy tym samym id */
#uslugi.e-sec { padding: var(--sec) 0; background: var(--bg); border-top: 0; }
.e-acc { border-top: 1px solid var(--fg); }
.e-acc-i { border-bottom: 1px solid var(--line); }
.e-acc-i summary {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 24px;   /* wąska kolumna numeru, nazwa tuż obok */
  grid-template-areas: "n t x" ". s .";
  align-items: baseline;
  row-gap: 8px;
  padding: 28px 0;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.e-acc-i summary::-webkit-details-marker { display: none; }
.e-acc-n { grid-area: n; color: var(--mute); }
.e-acc-t {
  grid-area: t;
  font-family: var(--font-display);
  font-size: clamp(26px, 7.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}
.e-acc-s { grid-area: s; font-size: 15px; color: var(--mute); }
.e-acc-x { grid-area: x; position: relative; align-self: center; width: 16px; height: 16px; justify-self: end; }
.e-acc-x::before, .e-acc-x::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 16px; height: 1.5px;
  background: currentColor;
  transition: transform .35s var(--ease);
}
.e-acc-x::after { transform: rotate(90deg); }
.e-acc-i[open] .e-acc-x::after { transform: rotate(0); }
.e-acc-b { overflow: hidden; }
.e-acc-b p {
  max-width: 30em;
  padding: 0 0 32px 40px;              /* opis równo z nazwą usługi */
  font-size: 17px;
  line-height: 1.5;
}

@media (min-width: 769px) {
  .e-acc-i summary {
    grid-template-columns: 1fr 5fr 4fr 40px;
    grid-template-areas: "n t s x";
    padding: 32px 0;
  }
  .e-acc-t { font-size: clamp(28px, 2.6vw, 44px); }
  .e-acc-b p { padding: 0 0 40px 10%; font-size: 19px; }
  .e-acc-i summary:hover .e-acc-t { opacity: .6; }
}



/* ============================================
   03 JAK PRACUJĘ — trzy krótkie punkty
   ============================================ */

.e-steps { list-style: none; display: flex; flex-direction: column; gap: 96px; }
.e-steps li { padding-top: 14px; border-top: 1px solid var(--line); }
.e-steps-n { display: block; margin-bottom: 32px; color: var(--mute); }
.e-steps-t {
  max-width: 12em;
  font-family: var(--font-display);
  font-size: clamp(26px, 7.6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.02;
}
@media (min-width: 769px) {
  .e-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); }
  .e-steps-t { font-size: clamp(28px, 2.6vw, 44px); }
}


/* ============================================
   04 STUDIO — spokojny edytorial
   ============================================ */

.e-studio-h { margin-bottom: 8px; }   /* nad głową zostaje biel z kadru, więc odstęp jest mniejszy */
/* Zdjęcie jest wycięte na białym tle: multiply zlewa biel z tłem strony, zostaje sama sylwetka */
.e-studio-foto { width: 80%; max-width: 403px; margin: 0 0 40px; background: var(--bg); }   /* tło: w izolowanej warstwie (sticky, transform) multiply miesza się z nim */
.e-studio-foto-cap { display: none; }
.e-studio-foto img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
/* Pasek w kolorze sekcji domyka zdjęcie od dołu: od połowy kadru do prawej krawędzi,
   połowa grubości na zdjęciu, połowa pod nim */
.e-studio-foto { --bar: 20px; }
.e-studio-foto-img { position: relative; }
.e-studio-foto-img::after { content: ""; position: absolute; left: 50%; right: 0; bottom: calc(var(--bar) / -2); height: var(--bar); background: var(--sec-c, var(--fg)); }
.e-studio-txt { max-width: 30em; }
.e-studio-txt p { font-size: 17px; line-height: 1.6; }
.e-studio-lead {
  max-width: 11em;
  margin-bottom: 24px;
  font-family: var(--font-display);
  font-size: clamp(30px, 8.6vw, 36px) !important;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1 !important;
}
.e-studio-intro { color: var(--mute); }
/* Trzy krótkie bloki zamiast ściany tekstu: cienka kreska, początek zdania pogrubiony */
.e-studio-pt { margin-top: 48px; padding-top: 14px; border-top: 1px solid var(--line); }
.e-studio-pt strong { font-weight: 600; }
/* Najważniejsza myśl: duży wers jak w opiniach, końcówka w kolorze sekcji */
.e-studio-key {
  margin: 56px 0 8px;
  font-size: clamp(26px, 7.2vw, 30px) !important;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.12 !important;
}
.e-studio-key span { color: var(--sec-c, var(--fg)); }
@media (min-width: 1025px) {
  .e-studio { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .e-studio .e-label { grid-column: 1 / -1; }
  .e-studio-h { grid-column: 1 / 10; margin-bottom: 72px; }
  /* Na komputerze zdjęcie stoi w pustej lewej kolumnie i towarzyszy tekstowi przy przewijaniu */
  .e-studio-foto { grid-column: 1 / 6; margin: 0; position: sticky; top: calc(var(--hd-h) + 40px); }
  .e-studio-foto { width: 100%; max-width: 500px; }
  .e-studio-foto { --bar: 26px; }
  /* Imię i nazwisko pod paskiem, tylko na komputerze; w przepływie, żeby przyklejone zdjęcie
     zatrzymywało się razem z nim na końcu sekcji */
  .e-studio-foto-cap {
    display: block; margin: calc(var(--bar) / 2 + 20px) 0 0 50%;
    font-family: var(--font-display); font-size: clamp(40px, 3.6vw, 60px); font-weight: 800;
    letter-spacing: -0.05em; line-height: .92; white-space: nowrap;
  }
  .e-studio-txt { grid-column: 8 / 13; max-width: none; }
  .e-studio-txt p { font-size: 19px; }
  .e-studio-lead { font-size: clamp(40px, 3.6vw, 60px) !important; margin-bottom: 40px; }
  .e-studio-key { margin: 48px 0 0 !important; font-size: clamp(32px, 2.8vw, 46px) !important; }
  /* Na komputerze bez kresek: zwykłe akapity, pogrubiony początek wystarcza */
  .e-studio-pt { margin-top: 1.4em; padding-top: 0; border-top: 0; }
  .e-studio-key + .e-studio-pt { margin-top: 48px; }
}


/* ============================================
   REFERENCJE — jedna opinia, przesuwana palcem
   ============================================ */

.e-refs { padding-top: 0; }
.e-quotes {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-top: 1px solid var(--line);
}
.e-quotes::-webkit-scrollbar { display: none; }
.e-quote { flex: 0 0 100%; margin: 0; padding-top: 56px; scroll-snap-align: start; }
.e-quote blockquote {
  max-width: 22em;
  font-family: var(--font-body);
  font-size: clamp(26px, 7vw, 56px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.18;
}
.e-quote figcaption { margin-top: 32px; font-size: 13px; font-weight: 600; }
.e-quote figcaption span { display: block; margin-top: 2px; font-weight: 400; color: var(--mute); }
@media (min-width: 769px) { .e-quote { padding-top: clamp(56px, 6vw, 96px); } .e-quote blockquote { font-size: clamp(30px, 3.4vw, 56px); } }
/* dłuższe opinie mniejszym krojem, żeby wysokość slajdów się nie rozjeżdżała */
.e-quote--long blockquote { max-width: 28em; font-size: clamp(21px, 5.6vw, 40px); line-height: 1.22; }
@media (min-width: 769px) { .e-quote--long blockquote { font-size: clamp(24px, 2.5vw, 40px); } }
.e-quotes-nav { display: flex; align-items: center; gap: 8px; margin-top: 32px; }
.e-quotes-nav button { min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font-size: 22px; cursor: pointer; }
.e-quotes-nav button:first-child { text-align: left; }
.e-q-count { color: var(--mute); }


/* ============================================
   05 KONTAKT — typograficzny finał
   ============================================ */

#kontakt.e-sec { background: #000; color: #fff; padding-bottom: 0; border-top: 0; }
.e-fill .fill-line {
  max-width: 18em;
  font-size: clamp(30px, 8vw, 60px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.55;
  color: #fff;
}
@media (min-width: 769px) { .e-fill .fill-line { font-size: clamp(34px, 3.8vw, 64px); } }
.e-fill .fill-line input {
  min-height: 44px;
  padding: 0;
  color: #fff;
  font-size: max(16px, 1em);          /* nigdy poniżej 16 px — iPhone nie robi wtedy zoomu */
  border-bottom: 1px solid rgba(255,255,255,.5);
  max-width: calc(100% - .5em);        /* kropka po polu zostaje w tej samej linii */
}
.e-fill .fill-line input:focus { border-bottom-color: #fff; }
.e-send { margin-top: 48px; color: #fff; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.e-note { max-width: 30em; margin-top: 64px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.55); }
.e-note .contact-email { color: #fff; }


/* ============================================
   STOPKA
   ============================================ */

.ft {
  padding: clamp(120px, 14vw, 200px) 0 28px !important;
  background: #000 !important;
  border-top: 0 !important;
  margin-top: -1px;                    /* bez jasnej szczeliny między kontaktem a stopką */
  color: #fff;
}
.ft-big { margin: 0; line-height: 0; }
.ft-big img { display: block; width: 100%; height: auto; filter: invert(1); }   /* logo na całą szerokość kolumny */
.ft-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.ft .ft-row a, .ft .ft-row span { font-size: 15px; letter-spacing: 0; color: rgba(255,255,255,.7); }
.ft .ft-row a:hover { color: #fff; }
.ft .ft-top { align-self: flex-start; margin-top: 24px; padding: 10px 0; color: #fff !important; font-size: 12px !important; font-weight: 600; letter-spacing: .08em !important; text-transform: uppercase; }
@media (min-width: 769px) {
  .ft-row { flex-direction: row; justify-content: space-between; align-items: center; }
  .ft .ft-top { margin-top: 0; }
}


/* ============================================
   PODSTRONY — bez dużych zaokrąglonych przycisków
   ============================================ */

.cs-cta-btn, .cs-404-btn {
  padding: 0 0 4px !important;
  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
  border-radius: 0 !important;
  background: none !important;
  color: inherit !important;
}
.cs-cta-btn::after, .cs-404-btn::after { content: " →"; }
.cs-cta .cs-cta-btn { color: #fff !important; margin-top: 24px; display: inline-block; font-weight: 600; }


/* ============================================
   RUCH
   (klasa .rv na <html> dodawana przez skrypt; bez skryptu wszystko po prostu stoi)
   ============================================ */

/* 1. Tekst: krótko i miękko */
.rv [data-rv] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .8s var(--ease);
}
.rv [data-rv].is-in { opacity: 1; transform: none; }

/* 2. Zdjęcia projektów: spokojne pojawienie się — przenikanie i bardzo lekkie „osiadanie” (1.04 → 1).
      Ramka (.e-work-img) jest obserwowana, zdjęcie w środku się zmienia. */
.rv [data-rv-img] .e-work-clip {
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.rv [data-rv-img] picture {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.07);
  transition: transform 1.6s var(--ease);
}
.rv [data-rv-img].is-in .e-work-clip { opacity: 1; }
.rv [data-rv-img].is-in picture { transform: translate3d(0, var(--py, 0px), 0) scale(1.03); }
/* Po odsłonięciu: bez opóźnienia, żeby ruch przy przewijaniu szedł równo z palcem */
.rv [data-rv-img].is-done picture { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .rv [data-rv], .rv [data-rv-img] .e-work-clip, .rv [data-rv-img] picture { opacity: 1; transform: none !important; transition: none; }
  .mn, .mn-links a { transition: none; }
  .e-tiles-track { animation: none; }
}

.hd-links a.is-active { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }


/* ============================================
   PODSTRONY — ten sam język co strona główna (2026-10-06)
   Kreski 1 px wyrównane do marginesów, małe etykiety, duży tytuł, równe odstępy.
   ============================================ */

/* Te same marginesy i szerokość co na stronie głównej (.e-wrap) */
.wrap { max-width: 1600px !important; padding-left: var(--gut) !important; padding-right: var(--gut) !important; }

.cs-hero { border: 0; }
.cs-hero .wrap { padding-top: clamp(40px, 8vh, 104px) !important; padding-bottom: clamp(48px, 7vh, 96px) !important; }
.cs-back {
  margin-bottom: clamp(40px, 6vh, 72px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.cs-hero h1 { font-size: clamp(44px, 9.6vw, 150px) !important; letter-spacing: -0.055em; line-height: .92; }
.cs-kind { margin-top: 32px; font-size: 17px; color: var(--mute); }

/* Sekcje podstron: zamiast kreski od krawędzi do krawędzi — kreska w marginesach */
.sec { padding: var(--sec) 0 !important; border-top: 0 !important; }
.sec > .sec-grid {
  padding-top: 20px;
  /* kreska tylko w obrębie marginesów (.wrap ma boczny padding) */
  background: linear-gradient(var(--line), var(--line)) no-repeat var(--gut) 0 / calc(100% - 2 * var(--gut)) 1px;
}
.cs-hero + .sec:not(.cs-cta) { padding-top: 0 !important; }
.sec-head h2 { font-weight: 800; letter-spacing: -0.05em; line-height: 1; }

.cs-facts div { padding: 12px 0 14px; border-top-color: var(--line); }
.cs-facts dt {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.cs-facts dd { font-size: 15px; }
.cs-text p { font-size: 19px; line-height: 1.55; max-width: 34em; }

.cs-row { gap: clamp(12px, 1.6vw, 24px); margin-top: clamp(12px, 1.6vw, 24px); }

/* Następny projekt / pozostałe projekty */
.cs-pager { border-top: 0 !important; }
.cs-pager .cs-next { padding-top: 14px !important; border-top: 1px solid var(--line) !important; }
.cs-next span {
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.cs-next strong::after { content: " →"; }
.cs-next strong { letter-spacing: -0.05em; }

/* Czarne zaproszenie na dole podstron */
.cs-cta { --line: rgba(255,255,255,.2); background: #000 !important; }
.cs-cta .sec-grid { grid-template-columns: 1fr !important; }
.cs-cta .sec-head { position: static; }
.cs-cta .sec-head h2 { max-width: 16em; font-size: clamp(32px, 5vw, 88px); }

/* Pozostałe projekty: siatka bez zaokrągleń, z równym odstępem */
.pp-grid { gap: clamp(12px, 1.6vw, 24px); }
.pp-grid img { border-radius: 0; }

/* Zobacz też: małe kwadratowe kafle z pozostałymi realizacjami (podstrony projektów) */
.cs-more { padding-top: var(--sec); padding-bottom: var(--sec); }
.cs-more-h {
  padding-top: 14px;
  margin-bottom: 28px;
  border-top: 1px solid var(--fg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cs-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 12px; }
.cs-tile { display: flex; flex-direction: column; color: var(--fg); }
.cs-tile-img { display: block; overflow: hidden; aspect-ratio: 1; background: #EDEDEA; }
.cs-tile-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-tile-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: transparent; }
.cs-tile-name { margin-top: 12px; font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.cs-tile-cat { margin-top: 6px; font-size: 13px; color: var(--mute); }
@media (min-width: 769px) {
  .cs-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .cs-tile-name { font-size: clamp(16px, 1.4vw, 22px); }
}
@media (hover: hover) and (pointer: fine) {
  .cs-tile-img img { transition: transform .8s var(--ease); }
  .cs-tile:hover .cs-tile-img img { transform: scale(1.04); }
}


/* ============================================
   KOLORY PROJEKTÓW poza hero
   ============================================ */

/* 1. Karuzela: pasek postępu i licznik w kolorze aktualnego projektu (--cur ustawia skrypt) */
.e-works-nav { --cur: var(--fg); }
.e-works-bar span { background: var(--cur); transition: transform .3s var(--ease), background-color .5s var(--ease); }
.e-works-count { color: var(--cur); transition: color .5s var(--ease); }

/* 2. Podstrony projektów: kolor projektu (--accent na <body>) w drobnych miejscach */
.cs-back { color: var(--accent, var(--mute)); }
.cs-facts div { border-top-color: var(--accent, var(--line)); }
.cs-more-h { border-top-color: var(--accent, var(--fg)); }

/* 3. Usługi: po rozwinięciu numer i „+” w kolorze projektu z tej dziedziny (--c na pozycji) */
.e-acc-n, .e-acc-x { transition: color .35s var(--ease); }
.e-acc-i[open] .e-acc-n, .e-acc-i[open] .e-acc-x { color: var(--c, var(--fg)); }

/* Kolor sekcji: duży numer i kreska nad nim w kolorze z palety projektów (--sec-c na <section>).
   W „Jak pracuję” w tym samym kolorze są numery kroków. */
.e-label { border-top-color: var(--sec-c, var(--fg)); }
.e-label-n { color: var(--sec-c, var(--fg)); }
.e-steps-n { color: var(--sec-c, var(--mute)); }
#kontakt { --sec-c: #19D3A2; }   /* morski rozjaśniony, żeby świecił na czerni */
.e-manifest-c { color: #F5B000; }   /* złoty z African Music School, rozjaśniony na czerń */