/* ═══════════════════════════════════════════════════════════
   LOLO STUDIO — style.css
   System: design-system/MASTER.md  (Editorial Poster × Neon Night)
   ═══════════════════════════════════════════════════════════ */

/* ───────────────  TOKENY  ─────────────── */
:root{
  /* płótno — noc */
  --ink-900:#121212;
  --ink-800:#1a1a1a;
  --ink-700:#242424;
  --hairline:rgba(255,255,255,.14);
  --hairline-soft:rgba(255,255,255,.07);

  /* płótno — papier */
  --paper-50:#f4f3f1;
  --paper-100:#eae8e4;
  --hairline-dark:rgba(18,18,18,.16);

  /* tekst */
  --on-dark:#fff;
  --on-dark-muted:#b9b9b9;
  --on-paper:#121212;
  --on-paper-muted:#4e4e4e;

  /* ── AKCENT: paleta z paska gradientowego ──
     teal → szałwia → złoto → pomarańcz.
     Kontrasty liczone względem --ink-900 (#121212) i bieli. */
  --grad:linear-gradient(90deg, #2f6f86 0%, #5e9086 34%, #c9a15c 70%, #d2762a 100%);

  --accent-teal:#3f7f91;   /* 5.0:1 na czerni */
  --accent-sage:#6f9c8c;   /* 7.2:1 na czerni */
  --accent-gold:#c9a15c;   /* 8.0:1 na czerni */

  --accent-100:#ecd9b8;    /* piaskowy — wypełnienie hoveru */
  --accent-300:#dda863;    /* teksty pomocnicze na czerni */
  --accent-500:#d2762a;    /* primary — 6.4:1 na czerni */
  --accent-600:#8a4a12;    /* jedyny akcent zdatny na tekst na papierze — 6.5:1 na bieli */

  /* Pomarańcz jest zbyt jasny na biały tekst (3.0:1).
     Wypełnione przyciski mają CIEMNY tekst. */
  --on-accent:#121212;

  --glow-accent:0 0 40px rgba(210,118,42,.32), 0 0 120px rgba(210,118,42,.16);

  /* forma */
  /* Jednolite, subtelne zaokrąglenie grafik — CELOWO ta sama wartość wszędzie. */
  --r-media:8px;
  --r-card:8px;
  --r-pill:999px;

  /* przestrzeń */
  --space-1:8px;  --space-2:16px; --space-3:24px; --space-4:40px;
  --space-5:64px; --space-6:96px; --space-7:144px;
  --gutter:clamp(20px, 5vw, 80px);
  --wrap:1440px;

  /* typografia */
  --font-ui:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Para krojów: Space Grotesk niesie nagłówki, Inter tekst i UI. */
  --font-headline:"Space Grotesk", var(--font-ui);
  --font-display:"Space Grotesk", var(--font-ui);   /* liczby, etykiety pionowe, tytuły grup — spójnie z nagłówkami */
  --font-script:"Caveat", cursive;          /* jeden akcent: podpis w hero */

  --step--1:clamp(.6875rem, .66rem + .12vw, .75rem);
  --step-0: clamp(.9375rem, .91rem + .14vw, 1rem);
  --step-1: clamp(1.125rem, 1.05rem + .35vw, 1.375rem);
  --step-2: clamp(1.5rem, 1.3rem + .9vw, 2.25rem);
  --step-3: clamp(2rem, 1.5rem + 2.4vw, 3.75rem);
  /* najdłuższa linia hero to „reklamę, kurs, wydarzenie," (26 znaków) —
     powyżej ~4.25rem wychodzi poza kolumnę tekstu */
  /* nagłówek hero pomniejszony o 25% względem poprzednich wartości
     (było: 1.6875rem / .7rem + 4.2vw / 4.25rem) */
  --step-hero:clamp(1.2656rem, .525rem + 3.15vw, 3.1875rem);

  /* ruch */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);   /* mocne wyhamowanie — ruch „dojeżdża”, nie zatrzymuje się */
  --dur:600ms;

  /* warstwy */
  --z-grain:9000;
  --z-nav:100;
  --z-modal:1000;
}

/* ───────────────  RESET  ─────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  min-height:100dvh;
  background:var(--ink-900);
  color:var(--on-dark);
  font-family:var(--font-ui);
  font-size:var(--step-0);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}
ul{list-style:none; padding:0}
/* H1/H2 = krój nagłówkowy (Space Grotesk). H3 zostaje na kroju tekstowym (Inter) dla drobnych tytułów kart. */
:where(h1,h2){
  font-family:var(--font-headline);
  font-weight:800; line-height:1.02; letter-spacing:-.025em;
}
:where(h3){font-weight:700; line-height:1.15; letter-spacing:-.01em}

/* focus — widoczny na obu płótnach */
:focus-visible{
  outline:2px solid var(--accent-500);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:var(--gutter); top:-100px; z-index:calc(var(--z-nav) + 1);
  padding:12px 20px; border-radius:var(--r-pill);
  background:var(--on-dark); color:var(--ink-900); font-weight:500;
  transition:top 180ms var(--ease-out);
}
.skip-link:focus{top:16px}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}

/* ziarno — sygnatura S12 */
.grain{
  position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none;
  opacity:.038; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───────────────  ATOMY  ─────────────── */

/* eyebrow: — LABEL */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:var(--step--1); font-weight:500;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--accent-500);
}
.eyebrow__rule{width:28px; height:1px; background:currentColor; flex:none}

.btn{
  --btn-bg:transparent;
  --btn-fg:var(--on-dark);
  --btn-bd:var(--hairline);
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 28px;
  border:1px solid var(--btn-bd); border-radius:10px;   /* guziki mniej zaokrąglone (było pełna pigułka) */
  background:var(--btn-bg); color:var(--btn-fg);
  font-size:var(--step--1); font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; white-space:nowrap;
  transition:color 220ms var(--ease-out), border-color 220ms var(--ease-out);
  touch-action:manipulation;
}
.btn::after{ /* wypełnienie od dołu */
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; background:var(--on-dark);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform 260ms var(--ease-out);
}
.btn:hover::after,.btn:focus-visible::after{transform:scaleY(1)}
.btn:hover,.btn:focus-visible{color:var(--ink-900); border-color:transparent}
.btn:active{transform:scale(.98)}

/* ciemny tekst na pomarańczu — biel dawałaby 3.0:1 */
.btn--primary{
  --btn-bg:var(--accent-500); --btn-bd:var(--accent-500); --btn-fg:var(--on-accent);
  box-shadow:var(--glow-accent);
}
.btn--primary::after{background:var(--accent-100)}
.btn--ghost{--btn-bd:rgba(255,255,255,.35)}
.btn--sm{min-height:40px; padding:0 20px; font-size:.6875rem}

/* ───────────────  NAV  ─────────────── */
/* Uwaga: backdrop-filter NIE może siedzieć na .nav — tworzy blok zawierający
   dla position:fixed, przez co drawer mobilny przykleiłby się do paska.
   Rozmycie żyje więc na ::before. */
.nav{
  position:fixed; inset:0 0 auto; z-index:var(--z-nav);
  padding-block:var(--space-2);
  transition:padding 300ms var(--ease-out);
}
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(18,18,18,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline-soft);
  opacity:0; transition:opacity 300ms var(--ease-out);
}
.nav.is-stuck{padding-block:10px}
.nav.is-stuck::before{opacity:1}
/* Nawigacja dzieli siatkę z hero i sekcjami — jedna lewa krawędź na całej stronie */
.nav__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; gap:var(--space-3);
}
.nav__logo{display:flex; align-items:center; gap:10px; flex:none}
.nav__logo img{
  height:36px; width:36px; object-fit:contain;
  transition:height 300ms var(--ease-out), width 300ms var(--ease-out);
}
.nav.is-stuck .nav__logo img{height:30px; width:30px}
.nav__wordmark{
  font-family:var(--font-headline);   /* logotyp dzieli krój z nagłówkami */
  font-size:1.0625rem; font-weight:800; letter-spacing:-.01em; line-height:1;
}
.nav__wordmark span{font-weight:300; color:var(--on-dark-muted)}
@media (max-width:340px){ .nav__wordmark{display:none} }

/* Pasek swatchy (S8) — między logo a nawigacją.
   Selektory scalone z .nav__inner, bo ogólna reguła .swatches (stopka) stoi
   niżej w pliku i przy równej specyficzności nadpisywałaby te ustawienia. */
.nav__inner .swatches--nav{
  display:flex; gap:4px; flex:none;
  margin:0 0 0 var(--space-3);
}
.nav__inner .swatches--nav i{width:26px; height:16px; background:var(--c); border-radius:3px}
/* poniżej 1200px nawigacja potrzebuje całej dostępnej szerokości */
@media (max-width:1200px){ .nav__inner .swatches--nav{display:none} }
.nav__links{
  margin-inline:auto;
  display:flex; align-items:center; gap:clamp(14px, 1.8vw, 30px);
}
.nav__links a:not(.btn){
  position:relative; padding:8px 2px;
  font-size:.875rem; font-weight:400; color:var(--on-dark-muted);
  transition:color 200ms var(--ease-out);
}
.nav__links a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1px;
  background:var(--accent-500); transform:scaleX(0); transform-origin:right;
  transition:transform 260ms var(--ease-out);
}
.nav__links a:not(.btn):hover,.nav__links a:not(.btn):focus-visible{color:var(--on-dark)}
.nav__links a:not(.btn):hover::after{transform:scaleX(1); transform-origin:left}
.nav__links a.btn:hover{color:var(--ink-900)}

.nav__cta-mobile{display:none}
.nav__burger{display:none; width:44px; height:44px; place-items:center; flex:none}
.nav__burger span{display:block; width:22px; height:2px; background:var(--on-dark); border-radius:2px}
.nav__burger span + span{margin-top:5px}

/* ── Przełącznik języka PL/EN (segmentowany, prawy górny róg) ── */
.lang-switch{
  display:inline-flex; align-items:center; flex:none;
  border:1px solid var(--hairline); border-radius:var(--r-pill); overflow:hidden;
}
.lang-switch__opt{
  padding:6px 9px; font-size:.72rem; font-weight:600; letter-spacing:.06em; line-height:1;
  color:var(--on-dark-muted); background:transparent; text-decoration:none;
  transition:color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.lang-switch__opt + .lang-switch__opt{ border-left:1px solid var(--hairline) }
.lang-switch__opt.is-active{ background:var(--accent-500); color:#fff }
a.lang-switch__opt:hover, a.lang-switch__opt:focus-visible{ color:var(--on-dark); background:rgba(255,255,255,.06) }
/* Poniżej 1024px menu główne to overlay (poza układem) → przełącznik dociskamy w prawo, obok burgera */
@media (max-width:1024px){ .lang-switch{ margin-left:auto } }

@media (max-width:1024px){
  .nav__cta{display:none}
  .nav__burger{display:grid}
  .nav__links{
    position:fixed; inset:0; margin:0;
    flex-direction:column; justify-content:center; gap:var(--space-3);
    background:var(--ink-900);
    transform:translateY(-100%); transition:transform 400ms var(--ease-out);
  }
  .nav__links a:not(.btn){font-size:1.5rem; font-weight:500; color:var(--on-dark)}
  .nav__cta-mobile{
    display:inline-flex; margin-top:var(--space-2);
    font-size:var(--step--1); font-weight:700;
  }
  .nav.is-open .nav__links{transform:translateY(0)}
  .nav.is-open .nav__burger{position:fixed; right:var(--gutter); top:18px; z-index:1}
}

/* ───────────────  01 · HERO  ─────────────── */
.hero{
  position:relative;
  display:flex; flex-direction:column;   /* tekst NAD wideo, wideo pod spodem */
  padding-top:calc(var(--space-6) + 30px);
  overflow:hidden;
}
/* Podkładka teksturowa pod częścią TEKSTOWĄ hero — dopasowana do SZEROKOŚCI (proporcje zachowane).
   Reszta w dół (pod wideo) to fallback #0e0e10 — i tak zasłania ją baner wideo. */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:#0e0e10 url("assets/paternX2.jpg") top center/100% auto no-repeat;
  transform:scale(var(--hero-tex-scale, 1));   /* lekki zoom-out przy scrollu: 1.2 → 1.0 (JS) */
  transform-origin:center top;
  will-change:transform;
}
/* Wideo jako czysty baner in-flow (bez nakładki — nic go nie zasłania). */
.hero__media{
  position:relative; z-index:1; width:100%;
  margin-top:0;                            /* zerowy odstęp od tekstu */
  aspect-ratio:var(--hero-ar, 128 / 55);   /* dokładne proporcje wideo → pełny kadr, bez przycięcia */
  overflow:hidden;
  /* fallback zanim wideo się wczyta / gdy go brak */
  background:radial-gradient(120% 90% at 70% 40%, #2a2226 0%, #16151a 55%, #0e0e10 100%);
}
.hero__media video{ width:100%; height:100%; object-fit:cover; display:block }

/* Hero: siatka 2-kolumnowa — intro (prawa) wyrównane do GÓRY nadtytułu */
.hero__content{
  position:relative; z-index:1;   /* nad podkładką teksturową */
  width:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,0.82fr);
  column-gap:var(--space-6);
  align-items:start;   /* lewa (nagłówek) i prawa (intro) wyrównane do góry */
}

.hero__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-3); flex-wrap:wrap;
}

.hero__title{
  margin-top:var(--space-2);   /* tuż pod nadtytułem */
  font-size:var(--step-hero);
  letter-spacing:-.035em;
}
.hero__title em{font-style:normal; color:var(--accent-500)}
/* rotujące słowo (eventy → wywiady → case study → rolki) — kolor ustawia JS per słowo.
   Płynne „przewijanie”: stare wyjeżdża w górę, nowe wjeżdża z dołu (maskuje .line overflow:hidden). */
.hero__title .rotate{
  display:inline-block; color:var(--accent-500);
  transition:opacity .42s var(--ease-out), transform .55s var(--ease-expo);
  will-change:opacity, transform;
}

.hero__intro{
  display:flex; flex-direction:column; gap:var(--space-3);
}
.hero__lede{
  color:var(--on-dark-muted);
  line-height:1.75;
}
.hero__lede b{font-weight:500; color:var(--on-dark)}

/* Zdjęcie Mariusza — nad opisem; podpis i CTA nałożone na kadr */
.hero__photo{
  position:relative; margin:0;
  aspect-ratio:1197 / 362;              /* pełny kadr, bez przycięcia */
  border-radius:var(--r-media); overflow:hidden;
  background:var(--ink-800);
}
.hero__photo img{ width:100%; height:100%; object-fit:cover; display:block }

/* ręczny podpis (S10) — akcent script; na kadrze, dół-lewo, na ciemnej plakietce */
.hero__sign{
  margin:0;
  font-family:var(--font-script);
  font-size:2rem; line-height:1; color:var(--accent-500);
  white-space:nowrap;
}
.hero__photo .hero__sign{
  position:absolute; left:12px; bottom:10px; z-index:2;
  padding:2px 9px 3px;
  font-size:clamp(0.7rem, 1.2vw, 0.95rem);   /* ~50% mniejszy */
  background:rgba(18,18,18,.6); backdrop-filter:blur(4px);
  border-radius:8px;
}
/* CTA na kadrze — przyklejony do PRAWEJ krawędzi, ~30% mniejszy, z przelewającymi się kolorami marki */
.hero__cta{
  position:absolute; right:0; top:0; bottom:0; z-index:2;
  margin-block:auto; height:max-content;
  width:max-content;                            /* szerokość = najdłuższa linia → „Błyskawiczny” bez dodatkowego zawijania */
  min-height:72px; padding:0 16px;             /* wyższy, węższy — bardziej kwadratowy niż prostokątny */
  font-size:.72rem; letter-spacing:.04em; line-height:1.25;
  white-space:normal; text-align:center;       /* tekst w dwóch liniach (łamane <br>) */
  border:0; color:#fff; box-shadow:none;
  border-radius:8px 0 0 8px;                   /* prawe rogi proste — „przyklejony” do brzegu */
  background:linear-gradient(90deg, #2f6f86, #5e9086, #c9a15c, #d2762a, #8a4a12, #d2762a, #c9a15c, #5e9086, #2f6f86);
  background-size:250% 100%;
  transform-origin:right center;               /* skala kotwiczona do PRAWEJ — rośnie w lewo, nie ucieka za brzeg */
  animation:ctaShift 7s linear infinite, ctaPulse 2.6s ease-in-out infinite;
}
.hero__cta::after{ content:none }             /* bez nakładki hover — kolory i tak płyną */
.hero__cta:hover,.hero__cta:focus-visible{ color:#fff; filter:brightness(1.1) }
@keyframes ctaShift{ to{ background-position:-250% 0 } }
/* co jakiś czas puls — powiększenie o 20% i powrót */
@keyframes ctaPulse{ 0%,55%,100%{ transform:scale(1) } 72%{ transform:scale(1.2) } 86%{ transform:scale(1) } }
@media (prefers-reduced-motion: reduce){ .hero__cta{ animation:none } }

.proof{
  margin-top:var(--space-5);
  display:inline-flex; align-items:center; gap:12px;
  padding:8px 18px 8px 14px;
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(4px);
}
/* 4,7 / 5 → nakładka odsłania 94% szerokości pasa gwiazdek */
.proof__stars{position:relative; display:inline-flex; line-height:0}
.proof__track,.proof__fill{display:inline-flex; gap:1px}
.proof__fill{
  position:absolute; inset:0; overflow:hidden;
  width:var(--rating);
}
.proof__stars svg{width:13px; height:13px; flex:none}
.proof__track svg{fill:rgba(255,255,255,.22)}
.proof__fill svg{fill:var(--accent-500)}
.proof__text{font-size:.8125rem; color:var(--on-dark-muted)}
.proof__text b{font-weight:500; color:var(--on-dark); font-variant-numeric:tabular-nums}

.hero__scroll{
  position:absolute; bottom:var(--space-4); left:var(--gutter);
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--step--1); font-weight:500;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--on-dark-muted);
  transition:color 200ms var(--ease-out);
}
.hero__scroll svg{animation:bob 2.4s var(--ease-out) infinite}
.hero__scroll:hover{color:var(--on-dark)}

@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)}}

@media (max-width:900px){
  .hero{padding-top:calc(var(--space-6) + 24px)}
  .section{padding-block:calc(var(--space-6) * .65)}   /* jw. na węższych ekranach (96px → 62,4px) */
  .hero__content{ grid-template-columns:1fr }
  .hero__intro{ margin-top:var(--space-4) }
}

/* ───────────────  SEKCJE  ─────────────── */
.section{padding-block:calc(var(--space-7) * .65)}   /* odstęp pionowy między sekcjami mniejszy o ~35% (144px → 93,6px) */
.section--dark{background:var(--ink-900); color:var(--on-dark); isolation:isolate}
/* Nakładka teksturowa (paternX.jpg) na CIEMNYCH sekcjach — mieszanie „overlay”, 40% krycia. */
.section--dark::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  /* „fixed” → jedna ciągła tekstura zakotwiczona do ekranu; brak szwów i powtórzeń między sekcjami */
  background:url("assets/paternX.jpg") fixed no-repeat;
  background-size:var(--sec-tex-z, 100%);          /* JS: lekki zoom-out 120% → 100% przy scrollu */
  background-position:center var(--tex-py, 50%);   /* JS: lekki parallax (procent = bez odsłaniania krawędzi) */
  mix-blend-mode:var(--tex-blend, normal);
  opacity:var(--tex-opacity, .25);
}
.section--dark > *{ position:relative; z-index:1 }   /* treść nad nakładką */
.section--paper{background:var(--paper-50); color:var(--on-paper)}

.section__title{
  margin-top:var(--space-3);
  font-size:var(--step-3);
  letter-spacing:-.035em;
  text-wrap:balance;
}
.section__lede{
  margin-top:var(--space-3); max-width:62ch;
  color:var(--on-dark-muted); line-height:1.75;
}

/* ───────────────  02 · KARTY „DLA KOGO”  ─────────────── */
.cards{
  margin-top:var(--space-6);
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(228px, 1fr));
  gap:var(--space-2);
}
.card{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; gap:12px;
  min-height:230px; padding:var(--space-3);
  border:1px solid var(--hairline-soft); border-radius:var(--r-card);
  background:var(--ink-800);
  transition:border-color 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.card::before{ /* poświata pojawia się przy hoverze, pod treścią */
  content:""; position:absolute; inset:-1px; z-index:-1;
  border-radius:inherit;
  background:radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--accent-500) 16%, transparent), transparent 62%);
  opacity:0; transition:opacity 320ms var(--ease-out);
}
.card:hover{border-color:color-mix(in srgb, var(--accent-500) 45%, transparent); transform:translateY(-4px)}
.card:hover::before{opacity:1}

.card__title{
  font-size:var(--step-1); font-weight:700; letter-spacing:-.01em;
  line-height:1.15; text-wrap:balance;
}
.card__text{font-size:.875rem; color:var(--on-dark-muted); line-height:1.65}

/* 19 formatów — gęstsza siatka, niższe kafelki, tytuł u góry */
.cards--formats{
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  align-items:start;   /* kafle nie rozciągają się do wysokości rzędu — sąsiedzi zostają niscy przy hoverze jednego */
}
.cards--formats .card{
  min-height:92px;                        /* stała wysokość zwiniętego kafla — mieści też tytuł w 2 liniach, wszystkie równe */
  justify-content:center;                 /* tytuł wyśrodkowany w pionie → 1- i 2-liniowe wyglądają identycznie (przy hoverze dryf ~3px) */
  gap:0;
  padding:var(--space-3);
  border-radius:var(--r-card);            /* to samo subtelne zaokrąglenie co wszędzie */
  transition:border-color 300ms var(--ease-out), transform 300ms var(--ease-out), background-color 300ms var(--ease-out);
}
.cards--formats .card__title{font-size:1.0625rem; color:var(--on-dark)}

/* Nieaktywny kafel: biały tytuł na ciemnym tle.
   Po najechaniu kafel podświetla się złotym akcentem (jak „Film korporacyjny”),
   a tytuł i opis pozostają białe. Biały na #7d6224 ma kontrast 5,76:1 (AA ✓). */
.cards--formats .card{--cf:#7d6224}
.cards--formats .card:hover,
.cards--formats .card:focus-within,
.cards--formats .card.is-open,
.cards--formats .card.is-glow{background:var(--cf); border-color:var(--cf)}   /* .is-glow = ambientowy puls (JS), .is-open = dotknięcie na mobile */
.cards--formats .card:hover .card__text,
.cards--formats .card:focus-within .card__text,
.cards--formats .card.is-open .card__text{color:rgba(255,255,255,.92)}

/* Jednolite, kolorowe wypełnienie nie potrzebuje pomarańczowej poświaty ::before z bazowego .card */
.cards--formats .card::before{display:none}

/* Domyślnie widać tylko tytuł; opis rozwija się po najechaniu (lub focusie). */
.cards--formats .card__text{
  max-height:0; opacity:0; overflow:hidden; margin-top:0;
  transition:max-height 340ms var(--ease-out), opacity 240ms var(--ease-out), margin-top 340ms var(--ease-out);
}
.cards--formats .card:hover .card__text,
.cards--formats .card:focus-within .card__text,
.cards--formats .card.is-open .card__text{
  max-height:14rem; opacity:1; margin-top:10px;
}
/* Na dotyku nie ma hovera — opis odsłania dotknięcie (klasa .is-open z JS).
   Gdyby JS nie zadziałał (.cards--formats bez .is-tap), pokazujemy opisy na stałe. */
@media (hover:none){
  .cards--formats:not(.is-tap) .card__text{max-height:none; opacity:1; margin-top:10px}
  .cards--formats.is-tap .card{cursor:pointer}
}

@media (max-width:560px){
  .cards{grid-template-columns:1fr; gap:var(--space-2)}
  .card{min-height:0}
}

/* ═══════════  PŁÓTNO PAPIEROWE  ═══════════
   Sekcja na papierze przestawia wszystkie semantyczne tokeny.
   Dzięki temu .card, .tag, .eyebrow działają bez wariantów. */
.section--paper{
  --on-dark:var(--on-paper);
  --on-dark-muted:var(--on-paper-muted);
  --ink-800:var(--paper-100);
  --ink-700:#e0ddd8;
  --hairline:var(--hairline-dark);
  --hairline-soft:rgba(18,18,18,.10);
  --accent-500:var(--accent-600);   /* akcent na papierze musi mieć 4.5:1 */
  --on-accent:#fff;                 /* accent-600 jest ciemny → tekst na nim biały */
  --glow-accent:none;
  position:relative;
  background:var(--paper-50); color:var(--on-paper);
}
/* zagniecenia papieru — sygnatura S12 */
.section--paper::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(104deg, transparent 28%, rgba(0,0,0,.05) 29.4%, rgba(255,255,255,.75) 30.2%, transparent 31.6%),
    linear-gradient(-78deg, transparent 61%, rgba(0,0,0,.045) 62.2%, rgba(255,255,255,.7) 63%, transparent 64.4%),
    linear-gradient(188deg, transparent 74%, rgba(0,0,0,.035) 75%, rgba(255,255,255,.6) 75.8%, transparent 77%);
  mix-blend-mode:multiply; opacity:.55;
}
.section--paper > *{position:relative; z-index:1}
.section--paper .card{background:var(--paper-100); border-color:rgba(18,18,18,.10)}
/* hover dziedziczy kolor z przestawionego --accent-500, tylko poświata słabnie */
.section--paper .card::before{background:radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--accent-500) 10%, transparent), transparent 62%)}
.section--paper .btn--primary{box-shadow:none}
.section--paper .btn--ghost{--btn-bd:rgba(18,18,18,.28)}
.section--paper .btn:hover,.section--paper .btn:focus-visible{color:var(--ink-900)}
.section--paper :focus-visible{outline-color:var(--ink-900)}
.section--paper .nav__logo img{filter:invert(1)}

/* ── Formularz na papierze ──
   .form i pola miały zaszyte --ink-800/--ink-900, więc na jasnym tle
   zostałyby czarnymi dziurami. Stany błędu też muszą pociemnieć: #EF7053
   na bieli daje 2.9:1, czyli poniżej progu dla tekstu. */
.section--paper .form{background:var(--paper-100); border-color:var(--hairline)}
.section--paper .field :is(input,select,textarea){
  background:#fff;
  border-color:rgba(18,18,18,.22);
  color:var(--on-paper);
}
.section--paper .field :is(input,select,textarea):focus{border-color:var(--accent-600)}
.section--paper .field.is-invalid :is(input,textarea){border-color:#b23a1c}
.section--paper .field__error{color:#a8331a}          /* 5.6:1 na papierze */
.section--paper .field__error::before{background:#a8331a; color:#fff}
.section--paper .form__status.is-ok{color:#2c6b4c}    /* 5.3:1 */
.section--paper .form__status.is-err{color:#a8331a}
.section--paper .contact__list a:hover{color:var(--accent-600)}

/* ───────────────  WSPÓLNE  ─────────────── */
/* Nagłówek sekcji: tytuł po lewej, podtytuł (lede) PO PRAWEJ — nie pod tytułem */
.section__head{
  margin-top:var(--space-3);   /* odstęp od eyebrow (był wcześniej na .section__title) */
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,42ch);
  gap:var(--space-4) var(--space-6);
  align-items:end;             /* podtytuł wyrównany do dołu tytułu */
}
.section__head .section__title{ margin-top:0 }
.section__head .section__lede{ margin-top:0; max-width:none }   /* szerokość kontroluje kolumna */
@media (max-width:960px){
  .section__head{ grid-template-columns:1fr; align-items:start }
  .section__head .section__lede{ margin-top:var(--space-3) }
}

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 2px; min-height:44px;
  color:var(--accent-500); font-size:var(--step--1);
  font-weight:700; text-transform:uppercase; letter-spacing:.1em;
}
.link-arrow svg{transition:transform 240ms var(--ease-out)}
.link-arrow:hover svg{transform:translateX(5px)}

/* pigułka-etykieta */
.tag{
  align-self:flex-start;
  display:inline-flex; align-items:center;
  padding:5px 12px; border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb, var(--accent-500) 55%, transparent);
  background:color-mix(in srgb, var(--accent-500) 12%, transparent);
  color:var(--accent-300);
  font-size:.625rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; white-space:nowrap;
}
.section--paper .tag{color:var(--accent-600)}
/* warianty biorą kolory z tego samego paska gradientowego */
.tag--warm{--accent-500:var(--accent-gold); color:#e2c48f}
.tag--cool{--accent-500:var(--accent-sage); color:#9dc0b2}
.section--paper .tag--warm{color:#6b5116}
.section--paper .tag--cool{color:#2f5a4b}
.tag--mute{color:var(--on-dark-muted); border-color:var(--hairline); background:transparent}

/* pionowa etykieta sekcji — S5 */
.vlabel{
  position:absolute; left:calc(var(--gutter) - 46px); top:var(--space-7);
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--font-display);
  font-size:1.05rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark-muted); opacity:.32;
  pointer-events:none;
}
.section{position:relative}
@media (max-width:1180px){ .vlabel{display:none} }

/* pasek metadanych — S1 */
.meta{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:var(--space-3);
  padding-bottom:var(--space-5);
  border-bottom:1px solid var(--hairline);
  margin-bottom:var(--space-5);
  font-size:var(--step--1); text-transform:uppercase; letter-spacing:.12em;
  color:var(--on-dark-muted);
}
.meta span{display:flex; flex-direction:column; gap:6px}
.meta b{font-weight:500; color:var(--on-dark)}

/* wariant w hero: górny hairline, bez dolnego, pod dowodem społecznym */
.meta--hero{
  margin-top:var(--space-5); margin-bottom:0;
  padding-top:var(--space-4); padding-bottom:0;
  border-top:1px solid var(--hairline); border-bottom:0;
}

/* ───────────────  03 · ROLKI  ─────────────── */
.reels{
  margin-top:var(--space-6);
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-2);
}
.reel{
  border:1px solid var(--hairline-soft); border-radius:var(--r-media);   /* to samo subtelne zaokrąglenie co wszędzie */
  background:var(--ink-800); overflow:hidden;
  transition:border-color 300ms var(--ease-out);
}
.reel:hover{border-color:color-mix(in srgb, var(--accent-500) 40%, transparent)}
.reel__media{
  position:relative;
  aspect-ratio:9/16; overflow:hidden;
  background:linear-gradient(150deg, #2b2430, #17161a 60%, #101013);
}
.reel__media video{width:100%; height:100%; object-fit:cover; transition:transform 500ms var(--ease-out)}
.reel:hover .reel__media video{transform:scale(1.04)}

/* Rolki są klikalne — klik włącza dźwięk, dblclik wyłącza */
.reel__media{cursor:pointer}
.reel__sound{
  position:absolute; top:10px; right:10px; z-index:2;
  display:grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  background:rgba(18,18,18,.55); backdrop-filter:blur(6px);
  color:var(--on-dark); opacity:.85;
  transition:opacity 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out);
  pointer-events:none;   /* klik obsługuje cały kafel */
}
.reel:hover .reel__sound{opacity:1}
.reel__sound svg{width:18px; height:18px; display:block}
.reel__sound .reel__sound-on{display:none}   /* domyślnie ukryta ikona „gra” (specyficzność > .reel__sound svg) */
/* stan „gra z dźwiękiem” */
.reel.has-sound .reel__sound{color:var(--accent-300); border-color:var(--accent-500); opacity:1}
.reel.has-sound .reel__sound-off{display:none}
.reel.has-sound .reel__sound-on{display:block}

/* Wspólny komponent: kadr wideo. Wszystko gra bez dźwięku — brak przełącznika. */
.media{position:relative}

/* ── Stan wczytywania ──
   Pokazuje się od chwili, gdy kadr wjedzie w ekran i zacznie ściągać plik,
   znika przy pierwszej klatce (loadeddata/playing) albo gdy plik padnie.
   Działa dla rolek, portfolio i lightboxa — wszystkie mają klasę .media. */
.media.is-loading::after{
  content:""; position:absolute; inset:0; margin:auto; z-index:2; pointer-events:none;
  width:26px; height:26px;
  border:2px solid rgba(255,255,255,.18);
  border-top-color:var(--accent-500);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
.media.is-loading::before{
  content:"Wczytywanie";
  position:absolute; inset:auto 0 calc(50% - 36px) 0; z-index:2; pointer-events:none;
  text-align:center;
  font-size:.625rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--on-dark-muted);
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* Na węższych ekranach zostaje SIATKA (jak na desktopie), tylko z mniejszą
   liczbą kolumn — rzędy układają się jeden pod drugim i widać wszystkie 12 rolek.
   Wcześniej była tu pozioma karuzela: kompaktowa, ale chowała 10 z 12 rolek
   za gestem, którego nikt nie wykona. */
@media (max-width:900px){
  .reels{ grid-template-columns:repeat(3, 1fr); gap:12px; }
}
@media (max-width:600px){
  .reels{ grid-template-columns:repeat(2, 1fr); gap:10px; }
}

/* liczby — S9 */
.stats{
  margin-top:var(--space-6);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:var(--space-4);
  justify-items:center; text-align:center;
}
.stats--facts{justify-items:start; text-align:left}
#fakty .stats{margin-top:0}   /* moduł jest treścią sekcji — wystarczy padding sekcji, bez dodatkowej luki u góry */
/* bliżej hero (połowa górnego odstępu) i mniejsza przerwa do Rolek (dół 0 → zostaje sam padding Rolek = połowa) */
#fakty{ padding-top:calc(var(--space-7) * .325); padding-bottom:0 }
@media (max-width:900px){ #fakty{ padding-top:calc(var(--space-6) * .325) } }
.stat__num{
  font-family:var(--font-display);
  font-size:clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  line-height:1; letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.stat__num--accent{color:var(--accent-500)}
.stat__num--word{font-size:clamp(1.75rem, 1.2rem + 2vw, 2.75rem); letter-spacing:.02em}
.stat__label{
  margin-top:12px;
  font-size:.8125rem; line-height:1.5; color:var(--on-dark-muted);
}
.stats__source{
  margin-top:var(--space-4);
  font-size:.75rem; color:var(--on-dark-muted);
}
.stats__source a{color:var(--accent-500); white-space:nowrap}
.stats__source a:hover{text-decoration:underline}

/* ───────────────  MARQUEE — S4  ─────────────── */
.marquee{
  overflow:hidden;
  border-block:1px solid var(--hairline-soft);
  background:var(--ink-900);
  padding-block:18px;
}
.marquee__track{
  display:flex; gap:var(--space-3); width:max-content;
  animation:slide 44s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{
  display:inline-flex; align-items:center; gap:var(--space-3);
  font-size:var(--step--1); font-weight:700;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--on-dark-muted); white-space:nowrap;
}
.marquee__track svg{width:12px; height:12px; fill:var(--accent-500); flex:none}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .marquee__track{animation:none} }

/* ───────────────  04 · DLACZEGO MY  ─────────────── */
/* 6 kafelków → 2 kolumny × 3 wiersze */
.cards--why{grid-template-columns:repeat(2, 1fr); gap:var(--space-3)}
.cards--why .card{min-height:0; padding:var(--space-4)}
@media (max-width:760px){ .cards--why{grid-template-columns:1fr; gap:var(--space-2)} }
.card__icon{
  display:grid; place-items:center;
  width:40px; height:40px; margin-bottom:4px;
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  color:var(--accent-500);
}
.card__icon svg{
  width:20px; height:20px;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ───────────────  06 · OFERTA  ─────────────── */
.offer{
  margin-top:var(--space-5);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:var(--space-2);
}
.offer__item{min-height:210px}
.offer__item .card__title{font-size:1.0625rem; margin-top:auto}
.offer__cta{
  display:flex; border-radius:var(--r-card);
  background:var(--accent-500); color:var(--on-accent);
  box-shadow:var(--glow-accent);
  transition:transform 300ms var(--ease-out);
}
.offer__cta:hover{transform:translateY(-4px)}
.offer__cta a{display:flex; flex-direction:column; justify-content:flex-end; gap:10px; padding:var(--space-3); width:100%}
.offer__cta h3{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:1.0625rem; font-weight:700; letter-spacing:-.01em; line-height:1.2;
}
.offer__cta svg{transition:transform 240ms var(--ease-out)}
.offer__cta:hover svg{transform:translateX(5px)}
.offer__cta p{font-size:.8125rem; line-height:1.5; color:rgba(18,18,18,.78)}

/* Kafelek WhatsApp — jedyny kolor spoza palety, świadomie: rozpoznawalność marki.
   Tekst CIEMNY, bo biel na #25D366 daje 2.0:1; ciemny daje 9.1:1. */
.offer__cta--wa{
  background:#25d366;
  box-shadow:0 0 40px rgba(37,211,102,.30), 0 0 120px rgba(37,211,102,.14);
}
/* to logo, nie strzałka — nie odjeżdża w bok, tylko lekko rośnie */
.offer__cta--wa:hover svg{transform:scale(1.12)}

/* ───────────────  DUO — Dlaczego / Jak to działa (dwa rozwijane panele)  ───────────────
   Najechany (desktop) lub kliknięty (dotyk) panel rozwija się i dominuje;
   drugi kurczy się do pionowego grzbietu i odchyla w 3D (à la otwierana książka).
   Domyślnie otwarty pierwszy — treść zawsze widać. */
.duo{
  margin-top:var(--space-6);
  display:flex; gap:14px;
  height:940px;                 /* STAŁA, wspólna wysokość paneli — brak skoku przy przełączaniu */
}
.duo__panel{
  position:relative;
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column;
  border:1px solid var(--hairline); border-radius:var(--r-card);
  background:var(--ink-800);
  padding:var(--space-4);
  overflow:hidden; cursor:pointer;
  transition:flex-grow 620ms var(--ease-out),
             box-shadow 460ms var(--ease-out), filter 460ms var(--ease-out);
}
.duo__panel:focus-visible{outline:2px solid var(--accent-500); outline-offset:3px}
/* otwarty — szerszy, lekko uniesiony płaskim cieniem (2D) */
.duo__panel.is-open{ flex-grow:7; z-index:2; box-shadow:0 16px 44px rgba(0,0,0,.16) }
/* zwinięty — węższy pasek, delikatnie przyciemniony (2D, bez obrotów) */
.duo__panel:not(.is-open){ flex-grow:1; filter:brightness(.955) }

.duo__head{ transition:opacity 260ms var(--ease-out) }
.duo__panel:not(.is-open) .duo__head{ opacity:0; pointer-events:none }
.duo__title{
  margin-top:var(--space-2);
  font-family:var(--font-headline); font-weight:800;
  font-size:var(--step-1); line-height:1.12; letter-spacing:-.02em; color:var(--on-dark);
}
/* pionowy grzbiet — tylko gdy zwinięty */
.duo__spine{
  position:absolute; inset:0; display:grid; place-items:center;
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--font-headline); font-weight:800; font-size:1.15rem; letter-spacing:.02em;
  color:var(--on-dark); white-space:nowrap;
  opacity:0; transition:opacity 260ms var(--ease-out) 140ms; pointer-events:none;
}
.duo__panel:not(.is-open) .duo__spine{ opacity:1 }

.duo__body{
  flex:1 1 auto; min-height:0;                 /* wypełnia stałą wysokość karty */
  opacity:0; overflow:hidden;
  margin-top:var(--space-3);
  transition:opacity 380ms var(--ease-out);
}
.duo__panel.is-open .duo__body{ opacity:1; overflow-y:auto }   /* scroll tylko awaryjnie, gdyby treść nie zmieściła */
.duo .cards--why{ grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:var(--space-3) }   /* 6 kafli w 2 rzędach → mieści się w tej samej wysokości */
.duo .cards--why .card{ padding:var(--space-3) }        /* kompaktowe kafle, żeby zmieściły się na jednej wysokości */
.duo .cards--why .card__text{ font-size:.8125rem; line-height:1.5 }
.duo .section__lede{ font-size:.9rem; line-height:1.55 }
.duo .steps{ margin-top:var(--space-3) }

/* ── Wariant TRIO: 3 BIAŁE panele na CIEMNEJ sekcji (#dla-kogo) ──
   Panele przestawiają tokeny na „paper", więc treść (nagłówki, kafle, tekst) jest ciemna na białym. */
.duo--trio .duo__panel{
  --on-dark:var(--on-paper);
  --on-dark-muted:var(--on-paper-muted);
  --ink-800:var(--paper-100);
  --ink-700:#e0ddd8;
  --hairline:var(--hairline-dark);
  --hairline-soft:rgba(18,18,18,.10);
  --accent-500:var(--accent-600);
  --on-accent:#fff;
  --glow-accent:none;
  background:var(--paper-50);
  border-color:var(--hairline-dark);
  color:var(--on-paper);
}
.duo--trio .duo__spine,
.duo--trio .duo__title{ color:var(--on-paper) }
/* kafle „Dla kogo" w panelu — gęściej, żeby 18 zmieściło się na wspólnej wysokości */
.duo--trio .cards--formats{ margin-top:var(--space-2); gap:8px; grid-template-columns:repeat(3, 1fr) }

/* Dotyk / wąskie ekrany — pionowy stos, bez 3D, dotknięcie przełącza (akordeon) */
@media (max-width:1280px){   /* poniżej — pionowy stos (efekt 3D obok siebie potrzebuje szerokości, przy 3 panelach otwarty jest węższy) */
  .duo{ flex-direction:column; height:auto; perspective:none; gap:10px }
  .duo__panel{ transform:none !important; filter:none !important; flex:none }   /* naturalna wysokość, nie dziel height kontenera */
  .duo__body{ flex:none }                                   /* naturalna wysokość w pionowym stosie */
  .duo__spine{ position:static; inset:auto; writing-mode:horizontal-tb; place-items:start; opacity:1; font-size:1.1rem }
  .duo__panel.is-open .duo__spine{ display:none }
  .duo__panel.is-open .duo__head{ opacity:1 }
  .duo__panel:not(.is-open) .duo__head{ display:none }
  .duo__panel:not(.is-open) .duo__body{ display:none }      /* zwinięty na mobile = tylko pasek-grzbiet */
}
@media (max-width:560px){ .duo .cards--why{ grid-template-columns:1fr } }  /* wąsko: 1 kolumna */

.steps{
  margin-top:var(--space-6);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:var(--space-2);
}
.step{min-height:200px}
.step__num{
  font-family:var(--font-display);
  font-size:2.25rem; line-height:1; color:var(--accent-500);
  font-variant-numeric:tabular-nums;
}
.step .card__title{margin-top:auto}

/* ───────────────  REALIZACJE — trzy karuzele  ─────────────── */
/* Widoczne 3 kafle w rzędzie (--per), do 10 w karuzeli. Odtwarza się tylko to,
   co widać — kafle poza torem są przycięte overflow, więc IntersectionObserver
   (współdzielony z rolkami) sam je pauzuje. */
.workrows{
  --per:2;                      /* 2 filmy widoczne w rzędzie */
  --tile-gap:var(--space-3);   /* JEDNO źródło prawdy: odstęp między kaflami.
                                  Używa go i `gap` toru, i wyliczenie szerokości
                                  kafla — inaczej „ile widać" przestaje się zgadzać. */
  margin-top:var(--space-6);
  display:flex; flex-direction:column;
  gap:var(--space-2);   /* ciasny odstęp między kategoriami (realnie ~35px z paddingiem toru/paska) */
}

/* Kategoria = pasek z nazwą + jeden lub więcej rzędów karuzeli */
.workcat{display:flex; flex-direction:column; gap:var(--space-2)}

/* Pasek kategorii — przewijające się marquee na całą szerokość (jak pasek WIDEO/FOTO) */
.workcat__bar{
  /* szerokość sekcji (jak nagłówek/kafle), nie całego ekranu; wcięcie o gutter, cap na --wrap */
  width:calc(100% - 2 * var(--gutter));
  max-width:calc(var(--wrap) - 2 * var(--gutter));
  margin-inline:auto;
  padding-block:7px;
  display:flex; align-items:center;        /* pojedynczy napis, do lewej */
  border:0; background:none; appearance:none; cursor:pointer; text-align:left; font:inherit; color:inherit;
}
/* tytuły grup w stylu pionowego „PORTFOLIO”: font display, wersaliki, rozstrzelone — BIAŁE */
.workcat__bar span{
  font-family:var(--font-display);
  font-size:1.05rem; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; white-space:nowrap;
  transition:font-size .45s var(--ease-out), color .2s var(--ease-out);
}
.workcat__bar:hover span{ color:var(--accent-500) }   /* cue klikalności */
/* grupa ZWINIĘTA: tytuł dużo większy (stos dużych tytułów) */
.workcat:not(.is-open) .workcat__bar span{
  font-size:clamp(1.7rem, 4.2vw, 2.8rem);
  white-space:normal;
}
/* Kafle 16:9; płynne przejście wysokości między pełnym kadrem a „paskiem”. */
.work__item{ max-height:600px; transition:max-height .5s var(--ease-out) }
/* Grupa ZWINIĘTA: wideo nadal widoczne, ale spłaszczone do ultrawide paska (mniejsze).
   object-fit:cover pokazuje wyśrodkowany kadr → efekt ultrawide. */
.workcat:not(.is-open) .work__item{ max-height:var(--strip-h, 104px) }
.workcat:not(.is-open) .workrow__track{ padding-block:0; overflow:hidden; cursor:pointer }
.workcat:not(.is-open) .workrow__nav{ display:none }
/* Rząd jest szerszy niż kolumna treści, ale nie bez końca:
   obszar kafli = 110% szerokości treści (.wrap minus guttery), wyśrodkowany.
   Cap siedzi na .workrow (nie na torze), bo strzałki pozycjonują się względem rzędu
   — inaczej odjechałyby od kafli na szerokich ekranach. */
.workrow{
  position:relative;
  /* width:100% jest konieczne — .workrows to flex column, a margin-inline:auto
     na elemencie flex wyłącza stretch i rząd skurczyłby się do zawartości */
  width:100%;
  max-width:var(--wrap);            /* szerokość jak reszta strony (.wrap), nie szersza */
  margin-inline:auto;
  padding-inline:var(--gutter);     /* gutter TU, poza torem — kafle się w nim nie pokazują */
}
.workrow__track{
  display:flex; gap:var(--tile-gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  /* padding-block daje miejsce na scale(1.04) — overflow-x:auto czyni też
     overflow-y:auto, więc bez tego powiększony kafel byłby ucięty u góry i dołu.
     BEZ padding-inline: 2 kafle wypełniają tor dokładnie, a trzeci jest odcięty. */
  padding-block:12px;
  scrollbar-width:none;
}
.workrow__track::-webkit-scrollbar{display:none}
.workrow__track:focus-visible{outline-offset:-4px}

/* Kafel = czysty kadr 16:9; podpis leży NA kadrze, żeby 3 rzędy zmieściły się naraz */
.work__item{
  position:relative;
  flex:0 0 calc((100% - (var(--per) - 1) * var(--tile-gap)) / var(--per));
  aspect-ratio:16/9;
  scroll-snap-align:start;
  border:1px solid var(--hairline-soft); border-radius:var(--r-media);   /* to samo subtelne zaokrąglenie co wszędzie */
  background:linear-gradient(150deg, #2b2430, #17161a 60%, #101013);
  overflow:hidden;
  transition:transform 400ms var(--ease-out), border-color 300ms var(--ease-out);
}
/* cały kafel lekko rośnie na hover — padding-block toru mieści powiększenie */
.work__item:hover{
  transform:scale(1.04); z-index:2;
  border-color:color-mix(in srgb, var(--accent-500) 45%, transparent);
}
.work__media{position:absolute; inset:0}
.work__media video{width:100%; height:100%; object-fit:cover}

/* Kafel to czyste wideo — zero podpisów. Scrim usunięty razem z nimi:
   istniał tylko po to, żeby tekst był czytelny na kadrze. Nazwa realizacji
   żyje dalej w data-* i aria-label przycisku (czytniki ekranu). */

/* Strzałki karuzeli — zawsze NAD kaflami.
   z-index musi przebić powiększony kafel (:hover → z-index 2). Przy remisie
   wygrywałby kafel, bo w DOM stoi po lewej strzałce — i lewa znikała pod wideo. */
.workrow__nav{
  position:absolute; top:0; z-index:5;
  display:grid; place-items:center; width:120px; height:calc(100% - 4px);
  border:0; color:var(--on-dark);
  background:linear-gradient(90deg, var(--ink-900) 40%, transparent);
  opacity:0; pointer-events:none;
  transition:opacity 220ms var(--ease-out);
}
/* Oba przyciski (strzałki) widoczne TYLKO przy najechaniu na dany rząd
   i tylko gdy w tę stronę faktycznie da się przewinąć (.is-actionable z JS). */
.workrow:hover .workrow__nav.is-actionable,
.workrow__nav.is-actionable:focus-visible{opacity:1; pointer-events:auto}
.workrow__nav__icon{                       /* okrągły przycisk ze strzałką */
  display:grid; place-items:center; width:48px; height:48px;
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  background:rgba(18,18,18,.7); backdrop-filter:blur(6px);
  transition:border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.workrow__nav__icon svg{width:24px; height:24px; display:block}
.workrow__nav--prev{left:0; justify-items:start; padding-left:var(--gutter)}
.workrow__nav--next{right:0; justify-items:end; padding-right:var(--gutter);
  background:linear-gradient(270deg, var(--ink-900) 40%, transparent)}
.workrow__nav:hover .workrow__nav__icon,
.workrow__nav:focus-visible .workrow__nav__icon{border-color:var(--accent-500); color:var(--accent-300)}
.workrow__nav[disabled]{opacity:0; pointer-events:none}   /* disabled zawsze ukrywa (dubluje brak .is-actionable) */

@media (max-width:1024px){ .workrows{--per:2} }
@media (max-width:600px){
  /* 2 kafle + wąska zajawka trzeciego. Zajawka zostaje celowo (strzałki są
     schowane, więc to jedyny sygnał, że rząd da się przewinąć), ale tylko
     musnięta — 2.05 zamiast 2.1 daje większe kafle i o połowę węższą zajawkę. */
  .workrows{--per:2.12; --tile-gap:8px}
  .workrow__nav{display:none}          /* na mobile zostaje sam swipe */
  /* promień jak na desktopie (14px) — spójny z rolkami */
}
/* palec zamiast strzałek gdy nie ma hovera (tablet/touch) */
@media (hover:none){ .workrow__nav{display:none} }

/* ───────────────  FOTO — galeria masonry  ─────────────── */
/* PRÓBA: sekcja foto na FOTOGRAFICZNYM tle (assets/fotoBG.jpg) zamiast papieru.
   Zdjęcie przyciemnione ciemnym woalem, cały tekst na biało (jak w ciemnych sekcjach). */
#foto{
  /* tło: ciemny woal na zdjęciu → biały tekst czytelny */
  background:
    linear-gradient(rgba(10,9,12,.18), rgba(10,9,12,.18)),
    url("assets/fotoBG.jpg") center/cover no-repeat;
  color:#fff;
  /* przywróć jasne tokeny (paper je przestawił na ciemne) → tekst biały */
  --on-paper:#fff;
  --on-paper-muted:rgba(255,255,255,.74);
  --on-dark:#fff;
  --on-dark-muted:rgba(255,255,255,.74);
  --accent-500:#fff;               /* eyebrow + kreska: biały (był zielony) */
}
/* zdejmij papierową nakładkę „zagnieceń” — na zdjęciu wyglądałaby źle */
#foto.section--paper::before{ display:none; }
.section--paper#foto .section__title{ color:#fff; }

/* „Zwykła” galeria foto — pełnoekranowa siatka (otwierana kliknięciem powiększonego kadru w galerii orbitalnej) */
.foto-grid{
  position:fixed; inset:0; z-index:200;
  background:rgba(12,11,14,.97); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(14px,3vw,40px);
}
.foto-grid__bar{
  position:sticky; top:0; z-index:1;
  display:flex; justify-content:flex-end;
  max-width:1500px; margin:0 auto clamp(10px,2vw,18px);
}
.foto-grid__close{
  appearance:none; cursor:pointer;
  border:1px solid rgba(255,255,255,.28); background:rgba(20,20,24,.6);
  color:#f3efe8; border-radius:999px; padding:9px 18px;
  font:inherit; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  transition:border-color .2s var(--ease-out), background .2s var(--ease-out);
}
.foto-grid__close:hover,.foto-grid__close:focus-visible{ border-color:var(--accent-500); background:rgba(20,20,24,.9) }
.foto-grid__inner{
  columns:240px; column-gap:12px;
  max-width:1500px; margin-inline:auto;
}
.foto-grid__mat{
  margin:0 0 12px; padding:10px;
  background:#f6f3ec;                     /* passe-partout — białe pole */
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  break-inside:avoid;
}
.foto-grid__mat img{
  width:100%; display:block;
  border:1px solid rgba(28,20,12,.45);    /* keyline przy krawędzi zdjęcia */
}

/* siedzi w .wrap → trzyma szerokość strony (jak oferta), nie rozjeżdża się
   w nieskończoność na szerokich monitorach. Padding daje .wrap. */
.gallery{
  margin-top:var(--space-6);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:8px;          /* jednostka wiersza — masonry liczy span w JS */
  gap:var(--space-2);
}
.gallery__item{
  position:relative;
  grid-row-end:span var(--span, 40);
  border-radius:var(--r-media); overflow:hidden;
  background:linear-gradient(150deg, #d9e2dc, #c3d3ca 55%, #b1c4ba);  /* zielonkawy placeholder */
}
.gallery__item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity 450ms var(--ease-out), transform 600ms var(--ease-out);
}
.gallery__item.is-swapping img{opacity:0}
.gallery__item.is-empty img{visibility:hidden}
/* zielona ramka narastająca na hover */
.gallery__item::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 0 var(--accent-500);
  transition:box-shadow 300ms var(--ease-out);
}
.gallery__item:hover::after{box-shadow:inset 0 0 0 3px var(--accent-500)}
.gallery__item:hover img{transform:scale(1.04)}

/* Na telefonie zostają 2 kolumny, nie 1. Jedna kolumna przy 15 kaflach dawała
   ~5400px — siedem ekranów przewijania przez zdjęcia. Dwie kolumny to połowa
   i naturalny układ galerii (jak siatka w Instagramie). */
@media (max-width:900px){
  .gallery{grid-template-columns:repeat(2, 1fr); gap:10px}
}

/* ───────────────  STRONY DOKUMENTOWE (polityka prywatności)  ─────────────── */
/* Długi tekst prawny — priorytetem jest czytelność, nie efekt.
   Świadomie BEZ data-reveal: dokument musi być widoczny nawet gdy JS padnie. */
.legal-section{padding-top:calc(var(--space-7) + 40px)}

.legal{
  max-width:68ch;            /* miara wiersza dla długiej lektury */
  margin-top:var(--space-5);
  font-size:1rem; line-height:1.75;
}
/* podwójna klasa — inaczej ogólna reguła `.legal p` wygrywa specyficznością
   i wprowadzenie traci wyróżnienie */
.legal .legal__lead{
  font-size:1.125rem; line-height:1.7;
  color:var(--on-dark);
  padding-bottom:var(--space-3);
  border-bottom:1px solid var(--hairline);
}
.legal__meta{
  margin-top:var(--space-2);
  font-size:var(--step--1); text-transform:uppercase; letter-spacing:.12em;
  color:var(--on-dark-muted);
}
.legal h2{
  margin-top:var(--space-5); margin-bottom:var(--space-2);
  font-family:var(--font-headline);
  font-size:1.5rem; font-weight:800; letter-spacing:-.015em; line-height:1.2;
}
.legal h3{
  margin-top:var(--space-3); margin-bottom:10px;
  font-size:1.0625rem; font-weight:700; letter-spacing:-.01em;
}
.legal p{margin-bottom:var(--space-2); color:var(--on-dark-muted)}
.legal strong{font-weight:500; color:var(--on-dark)}
.legal ul{
  margin:0 0 var(--space-2); padding-left:0;
  display:flex; flex-direction:column; gap:10px;
}
.legal li{
  position:relative; padding-left:22px;
  color:var(--on-dark-muted);
}
.legal li::before{
  content:""; position:absolute; left:4px; top:.62em;
  width:6px; height:6px; border-radius:50%;
  background:var(--accent-500);
}
.legal a{color:var(--accent-500); text-decoration:underline; text-underline-offset:3px}
.legal a:hover{color:var(--on-dark)}

/* wyróżniona uwaga — ramka z akcentem po lewej */
.legal__note{
  margin:var(--space-3) 0;
  padding:var(--space-2) var(--space-3);
  border-left:3px solid var(--accent-500);
  background:color-mix(in srgb, var(--accent-500) 7%, transparent);
  border-radius:0 12px 12px 0;
}
.legal__back{
  margin-top:var(--space-5); padding-top:var(--space-3);
  border-top:1px solid var(--hairline);
  font-weight:500;
}
.legal__back a{text-decoration:none}

@media (max-width:600px){
  .legal-section{padding-top:calc(var(--space-6) + 40px)}
  .legal h2{font-size:1.3125rem}
}

/* ───────────────  09 · KONTAKT  ─────────────── */
.contact{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--space-6) var(--space-7); align-items:start;
}
.contact__list{margin-top:var(--space-5); display:grid; gap:var(--space-2)}
.contact__list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-2);
  padding-bottom:12px; border-bottom:1px solid var(--hairline-soft);
}
.contact__list span{
  font-size:var(--step--1); text-transform:uppercase; letter-spacing:.12em;
  color:var(--on-dark-muted);
}
.contact__list a,.contact__val{font-size:1.0625rem; font-weight:500}
.contact__list a:hover{color:var(--accent-300)}
.footer__area{font-size:.875rem; color:var(--on-dark-muted)}

.form{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3);
  padding:var(--space-4);
  border:1px solid var(--hairline); border-radius:var(--r-media);
  background:var(--ink-800);
}
/* Pułapka na boty. Świadomie NIE display:none — proste boty pomijają pola
   ukryte w ten sposób. Wypychamy je poza ekran, dla człowieka nieosiągalne. */
.hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

.field{display:flex; flex-direction:column; gap:8px}
.field--wide,.form__foot{grid-column:1 / -1}
.field label{
  font-size:var(--step--1); font-weight:500;
  text-transform:uppercase; letter-spacing:.12em;
}
.field abbr{color:var(--accent-500); text-decoration:none}
.field input,.field select,.field textarea{
  min-height:48px; padding:12px 14px;
  font:inherit; font-size:1rem; color:var(--on-dark);
  background:var(--ink-900);
  border:1px solid var(--hairline); border-radius:12px;
  transition:border-color 200ms var(--ease-out);
}
.field textarea{resize:vertical; min-height:120px}
.field select{appearance:none; cursor:pointer}
.field :is(input,select,textarea):focus{border-color:var(--accent-500); outline:none}
.field :is(input,select,textarea):focus-visible{outline:2px solid var(--accent-500); outline-offset:2px}
.field__hint{font-size:.75rem; color:var(--on-dark-muted)}
.field__error{font-size:.75rem; color:#ef7053; display:none; align-items:center; gap:6px}
.field__error::before{content:"!"; display:grid; place-items:center; width:14px; height:14px; border-radius:50%; background:#ef7053; color:var(--ink-900); font-size:10px; font-weight:700}
.field.is-invalid .field__error{display:flex}
.field.is-invalid :is(input,textarea){border-color:#ef7053}

/* Zgoda RODO — checkbox z klauzulą informacyjną */
.field--consent{gap:6px}
.field--consent .consent{               /* wyższa specyficzność niż .field label → gasi uppercase */
  position:relative;
  display:flex; gap:12px; align-items:flex-start; cursor:pointer;
  text-transform:none; letter-spacing:normal;
  font-size:.8125rem; font-weight:400; line-height:1.5;
  color:var(--on-dark-muted);
}
.consent input{                         /* natywny checkbox ukryty, sterujemy własnym pudełkiem */
  position:absolute; top:0; left:0; width:1px; height:1px;
  min-height:0; padding:0; margin:0; opacity:0; pointer-events:none;
}
.consent__box{
  flex:none; width:22px; height:22px; margin-top:1px;
  display:grid; place-items:center;
  border:1.5px solid var(--hairline); border-radius:6px;
  color:transparent;
  transition:background 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.consent input:checked + .consent__box{
  background:var(--accent-500); border-color:var(--accent-500); color:var(--on-accent);
}
.consent input:focus-visible + .consent__box{outline:2px solid var(--accent-500); outline-offset:2px}
.consent__text a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.consent__text a:hover{color:var(--accent-500)}
.consent__text abbr{color:var(--accent-500); text-decoration:none}
.field--consent.is-invalid .consent__box{border-color:#a8331a}

.form__foot{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap}
.form__status{font-size:.8125rem; color:var(--on-dark-muted)}
.form__status.is-ok{color:#93c6ab}
.form__status.is-err{color:#ef7053}

@media (max-width:1024px){
  .contact{grid-template-columns:1fr; gap:var(--space-5)}
}
@media (max-width:560px){
  .form{grid-template-columns:1fr; padding:var(--space-3)}
}

/* ───────────────  STOPKA  ─────────────── */
.footer{
  background:var(--ink-900);
  border-top:1px solid var(--hairline-soft);
  padding-block:var(--space-6) var(--space-3);
}
.footer .meta{padding-bottom:var(--space-4); margin-bottom:var(--space-5)}
.footer__grid{
  display:grid; grid-template-columns:minmax(0,1.4fr) auto minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-5); align-items:start;
  padding-bottom:var(--space-5);
}
/* Zdjęcie w stopce — portret, lekkie zaokrąglenie, wyrównane do góry kolumn */
.footer__photo{
  margin:0; width:100%; max-width:180px;
  aspect-ratio:890 / 1334;
  border-radius:var(--r-media); overflow:hidden;
  background:var(--ink-800);
}
.footer__photo img{ width:100%; height:100%; object-fit:cover; display:block }
.footer__claim{margin-top:var(--space-2); color:var(--on-dark-muted); line-height:1.6}
.footer__grid h2{
  font-size:var(--step--1); font-weight:500;
  text-transform:uppercase; letter-spacing:.12em; color:var(--on-dark-muted);
  margin-bottom:var(--space-2);
}
.footer__nav,.footer__contact{display:flex; flex-direction:column; align-items:flex-start; gap:10px}
.footer__nav a,.footer__contact a{
  min-height:32px; display:inline-flex; align-items:center;
  color:var(--on-dark-muted); transition:color 200ms var(--ease-out);
}
.footer__nav a:hover,.footer__contact a:hover{color:var(--on-dark)}

/* pasek swatchy — S8 */
.swatches{display:flex; gap:4px; margin-top:var(--space-3)}
.swatches i{width:28px; height:20px; background:var(--c)}

.footer__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-3); flex-wrap:wrap;
  padding-top:var(--space-3); border-top:1px solid var(--hairline-soft);
  font-size:.75rem; color:var(--on-dark-muted);
}
.footer__top{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  text-transform:uppercase; letter-spacing:.12em; font-weight:500;
}
.footer__top:hover{color:var(--on-dark)}

/* barcode — S7 */
.barcode{
  width:120px; height:26px; opacity:.5;
  background:repeating-linear-gradient(90deg,
    var(--on-dark-muted) 0 2px, transparent 2px 4px,
    var(--on-dark-muted) 4px 5px, transparent 5px 9px,
    var(--on-dark-muted) 9px 12px, transparent 12px 14px);
}

@media (max-width:820px){
  .footer__grid{grid-template-columns:1fr; gap:var(--space-4)}
  .footer__bar{justify-content:flex-start}
  .barcode{order:3}
}

/* ───────────────  LIGHTBOX REALIZACJI  ─────────────── */
/* przycisk-nakładka na kaflu: klikalny cały kadr, dostępny z klawiatury */
.work__open{
  position:absolute; inset:0; z-index:3;
  border:0; background:none; cursor:zoom-in;
}
.work__open:focus-visible{outline:2px solid var(--accent-500); outline-offset:-4px; border-radius:var(--r-media)}

.lightbox{
  position:fixed; inset:0; z-index:var(--z-modal);
  display:grid; place-items:center; padding:var(--gutter);
}
.lightbox[hidden]{display:none}
.lightbox__scrim{
  position:absolute; inset:0;
  background:rgba(10,10,10,.72); backdrop-filter:blur(8px);
  cursor:zoom-out;
}
/* Podgląd zdjęć (foto) — mocniejsze przyciemnienie: gęsta sekcja z orbitą nie może prześwitywać przez tło */
.photobox .lightbox__scrim{ background:rgba(8,8,10,.975) }
.lightbox__figure{
  position:relative; z-index:1;
  border-radius:var(--r-media); overflow:hidden;
  background:#000; border:1px solid var(--hairline);
  box-shadow:0 40px 120px rgba(0,0,0,.6);
  transform-origin:top left;   /* FLIP liczy od lewego górnego rogu */
  will-change:transform;
}
.lightbox__figure video{width:100%; height:100%; object-fit:cover; display:block}

.lightbox__close{
  position:absolute; top:12px; right:12px; z-index:2;
  display:grid; place-items:center; width:44px; height:44px;
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  background:rgba(18,18,18,.6); backdrop-filter:blur(6px);
  color:var(--on-dark);
  transition:border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.lightbox__close:hover{border-color:var(--accent-500); color:var(--accent-300)}

/* Podgląd zdjęć — obraz skalowany do naturalnych proporcji, ale nie większy niż 1280px (ani niż ekran) */
.photobox__figure{
  position:relative; z-index:1; line-height:0;
  border-radius:var(--r-media); overflow:hidden;
  border:1px solid var(--hairline); box-shadow:0 40px 120px rgba(0,0,0,.6);
}
.photobox__figure img{
  display:block;
  max-width:min(1280px, 92vw);   /* twardy limit 1280px */
  max-height:88vh;               /* portrety mieszczą się w ekranie */
  width:auto; height:auto;
}

.gallery__item{cursor:zoom-in}   /* sygnał, że kafel można powiększyć */

/* Nawigacja w powiększeniu — poprzednie / następne zdjęcie */
.photobox__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  display:grid; place-items:center; width:52px; height:52px;
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  background:rgba(18,18,18,.6); backdrop-filter:blur(6px);
  color:var(--on-dark);
  transition:border-color 200ms var(--ease-out), color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.photobox__nav:hover,.photobox__nav:focus-visible{border-color:var(--accent-500); color:var(--accent-300)}
.photobox__nav--prev{left:clamp(12px, 3vw, 40px)}
.photobox__nav--next{right:clamp(12px, 3vw, 40px)}
@media (max-width:600px){
  .photobox__nav{width:44px; height:44px}
}

@media (max-width:600px){
  .lightbox{padding:var(--space-2)}
}

/* ═══════════════  RUCH  ═══════════════
   Cztery zachowania zamiast jednego „fade-up”. Wszystkie na transform/opacity/clip-path,
   więc nie ruszają layoutu (zero CLS). Wygaszane przez prefers-reduced-motion. */

/* 1 · Maskowane odsłanianie nagłówków — linia wysuwa się zza krawędzi.
      To jest sygnaturowy ruch strony. */
.line{
  display:block; overflow:hidden;
  padding-bottom:.12em; margin-bottom:-.12em;   /* miejsce na wydłużenia liter (g, j, y) */
}
.line__i{
  display:block;
  transform:translateY(110%);
  transition:transform 950ms var(--ease-expo);
  transition-delay:var(--d, 0ms);
  will-change:transform;
}
[data-lines].is-in .line__i{transform:none}

/* 2 · Reveal treści — subtelny, 12px zamiast 24px, wykładnicze wyhamowanie */
[data-reveal],[data-stagger] > *{
  opacity:0; transform:translateY(12px);
  transition:opacity 800ms var(--ease-expo), transform 800ms var(--ease-expo);
  transition-delay:var(--delay, 0ms);
}
[data-reveal].is-in,[data-stagger].is-in > *{opacity:1; transform:none}

/* 3 · Wipe — kadr odsłania się od dołu do góry, bez ruchu i bez fade */
[data-stagger="wipe"] > *{
  opacity:1; transform:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1000ms var(--ease-expo);
  transition-delay:var(--delay, 0ms);
}
[data-stagger="wipe"].is-in > *{clip-path:inset(0 0 0 0)}

/* 4 · Linia rozciąga się od lewej — kreska w nadpisie i pasek pod hero */
.eyebrow__rule,[data-grow]{
  transform:scaleX(0); transform-origin:left;
  transition:transform 1100ms var(--ease-expo);
  transition-delay:var(--delay, 0ms);
}
[data-reveal].is-in .eyebrow__rule,[data-grow].is-in{transform:none}

/* ───────────────  REDUCED MOTION  ─────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  /* wszystko widoczne od razu — żaden ruch nie warunkuje dostępu do treści */
  [data-reveal],[data-stagger] > *{opacity:1; transform:none}
  [data-stagger="wipe"] > *{clip-path:none}
  .line__i{transform:none}
  .eyebrow__rule,[data-grow]{transform:none}
  .hero__media{transform:none !important}
  .hero__media video{display:none}
}