/* B’cause Film Productions — wersja 5
   Kino. Czerń projekcyjna, kość słoniowa, ciepła szarość z logo. Jeden krój: Montserrat (Light w tytułach, jak na planszach BFP).
   Motyw: kadr wizjera z logo i linia REC z rolek BFP. Jedno zaaranżowane wejście na stronę, reszta spokojna. */

:root {
  --black: #050505;
  --graphite: #121110;
  --smoke: #1c1a18;
  --ivory: #f2ede4;
  --ash: #a59b98;
  --ash-2: #6f6764;
  --brass: #c9985b;
  --rec: #e3452f;
  --line: rgba(242, 237, 228, 0.14);
  --line-strong: rgba(242, 237, 228, 0.3);
  --paper: #ece7de;
  --paper-ink: #15120f;
  --paper-muted: #5e5650;
  --line-paper: rgba(21, 18, 15, 0.16);

  --font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(20px, 4vw, 80px);
  --max: 1560px;
  --header-h: 76px;
  --section: clamp(72px, 9vw, 150px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--black); color: var(--ivory); font-family: var(--font); font-weight: 400; font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--brass); color: var(--black); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 10px 14px; background: var(--ivory); color: var(--black); text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ——— typografia ——— */
.label { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ash); margin: 0; }
.label--brass { color: var(--brass); }
.on-paper .label { color: var(--paper-muted); }
.on-paper .label--brass { color: #8f612f; }
h1, h2, h3, .display { margin: 0; font-weight: 300; letter-spacing: -0.015em; text-wrap: balance; }
h1, .display { font-size: clamp(2.6rem, 1.2rem + 5.4vw, 6.6rem); line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.6rem); line-height: 1.1; }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem); line-height: 1.3; font-weight: 400; letter-spacing: 0; }
strong, b { font-weight: 500; }
em { font-style: normal; font-weight: 500; }
p { margin: 0; }
.lead { font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.375rem); font-weight: 300; line-height: 1.55; max-width: 36em; color: rgba(242, 237, 228, 0.86); text-wrap: pretty; }
.on-paper .lead { color: var(--paper-muted); }
.small { font-size: 0.875rem; color: var(--ash); line-height: 1.5; }
.on-paper .small { color: var(--paper-muted); }
.statement { font-size: clamp(1.5rem, 1rem + 2vw, 3rem); font-weight: 300; line-height: 1.3; letter-spacing: -0.01em; max-width: 26em; text-wrap: pretty; }
.statement em { font-weight: 400; color: var(--brass); }

.link { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--line-strong); }
.link span { transition: transform .25s var(--ease); }
.link:hover span { transform: translateX(4px); }
.link:hover { border-bottom-color: var(--ivory); }
.on-paper .link { border-bottom-color: rgba(21,18,15,.35); }
.on-paper .link:hover { border-bottom-color: var(--paper-ink); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 0 26px; text-decoration: none; cursor: pointer; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; background: var(--ivory); color: var(--black); border: 1px solid var(--ivory); transition: background .25s, color .25s; }
.button:hover { background: transparent; color: var(--ivory); }
.button--ghost { background: transparent; color: var(--ivory); border-color: var(--line-strong); }
.button--ghost:hover { border-color: var(--ivory); background: transparent; }
.on-paper .button { background: var(--paper-ink); color: var(--paper); border-color: var(--paper-ink); }
.on-paper .button:hover { background: transparent; color: var(--paper-ink); }
.on-paper .button--ghost { background: transparent; color: var(--paper-ink); border-color: rgba(21,18,15,.35); }
.play-dot { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; }

/* ——— rama wizjera (motyw z logo) ——— */
.vf { position: absolute; inset: var(--vf-inset, 20px); z-index: 3; pointer-events: none; }
.vf i { position: absolute; width: var(--vf-size, 24px); height: var(--vf-size, 24px); border: 0 solid var(--vf-color, var(--ivory)); }
.vf i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.vf i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.vf i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.vf i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.vf--hover { opacity: 0; transition: opacity .3s ease, inset .45s var(--ease); }
.framed:hover .vf--hover, .framed:focus-visible .vf--hover { opacity: 1; --vf-inset: 12px; }
.rec { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; color: rgba(242, 237, 228, 0.82); text-transform: uppercase; }
.rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 10px rgba(227, 69, 47, .7); }
@media (prefers-reduced-motion: no-preference) { .rec::before { animation: blink 1.6s steps(1) infinite; } }
@keyframes blink { 50% { opacity: .25; } }

/* ——— nagłówek ——— */
.site-header { position: fixed; inset: env(safe-area-inset-top, 0px) 0 auto; z-index: 60; transition: background .4s ease, border-color .4s ease; border-bottom: 1px solid transparent; }
html:not(.js) .site-header { position: absolute; } /* bez JavaScriptu nagłówek nie dostaje tła po przewinięciu, więc nie przyklejamy go nad treścią */
.site-header.is-solid { background: rgba(5, 5, 5, 0.84); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--line); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); padding-inline: var(--gutter); }
.wordmark { display: block; width: clamp(128px, 9.5vw, 164px); color: var(--ivory); line-height: 0; }
.wordmark svg { width: 100%; height: auto; }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 38px); }
.nav a { position: relative; padding: 8px 0; text-decoration: none; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(242, 237, 228, 0.78); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--ivory); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ivory); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .nav-contact { padding: 10px 18px; border: 1px solid var(--line-strong); color: var(--ivory); }
.nav .nav-contact::after { display: none; }
.nav .nav-contact:hover { border-color: var(--ivory); }
.menu-button { display: none; align-items: center; gap: 12px; min-height: 44px; padding: 0 0 0 16px; background: none; border: 0; cursor: pointer; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }
.menu { border: 0; padding: 0 0 max(24px, env(safe-area-inset-bottom)); margin: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; background: var(--black); color: var(--ivory); overflow-y: auto; }
.menu::backdrop { background: rgba(0,0,0,.85); }
.menu-top { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); padding-inline: var(--gutter); border-bottom: 1px solid var(--line); }
.menu-top button { background: none; border: 0; cursor: pointer; min-height: 44px; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }
.menu nav { display: grid; padding: 12px var(--gutter); }
.menu nav a { display: flex; align-items: baseline; gap: 20px; padding-block: 18px; border-bottom: 1px solid var(--line); text-decoration: none; font-size: clamp(1.8rem, 7vw, 2.8rem); font-weight: 300; line-height: 1.1; }
.menu nav a small { font-family: var(--mono); font-size: 0.6875rem; color: var(--brass); letter-spacing: .1em; }
.menu-contact { display: grid; gap: 8px; padding: 20px var(--gutter); color: var(--ash); font-size: .9375rem; }
.menu-contact a { text-decoration: none; }

/* ——— hero ——— */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; background: var(--graphite); }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media img { opacity: 0; transition: opacity 2.2s ease; filter: saturate(.74) contrast(1.08) brightness(.66); transform: scale(1.02); }
.hero-media img.is-on { opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,5,5,.45) 0%, rgba(5,5,5,0) 30%, rgba(5,5,5,.1) 55%, rgba(5,5,5,.92) 100%), linear-gradient(90deg, rgba(5,5,5,.5), rgba(5,5,5,0) 60%); }
.hero .vf { --vf-inset: clamp(16px, 2.6vw, 40px); --vf-size: clamp(24px, 3vw, 46px); --vf-color: rgba(242,237,228,.9); }
.hero-rec { position: absolute; z-index: 3; top: calc(var(--header-h) + 18px); right: clamp(28px, 4vw, 64px); display: flex; gap: 22px; align-items: center; }
.hero-tc { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: .12em; color: rgba(242,237,228,.7); font-variant-numeric: tabular-nums; }
.hero-copy { position: relative; z-index: 2; padding-block: clamp(140px, 22vh, 240px) clamp(44px, 7vw, 100px); display: grid; gap: 28px; }
.hero h1 { max-width: 12em; }
.hero h1 .l2 { display: block; color: var(--ash); }
.hero .lead { max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.hero-foot { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: end; gap: 20px; padding-bottom: clamp(22px, 3vw, 36px); }
.hero-foot .meta { display: flex; gap: 28px; flex-wrap: wrap; }
.hero-count { font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; color: var(--ash); }
.hero-toggle { background: none; border: 0; cursor: pointer; font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ash); padding: 0; }
.hero-toggle:hover { color: var(--ivory); }
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ash); }
.scroll-cue i { display: block; width: 1px; height: 36px; background: linear-gradient(var(--ivory), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue i { animation: cue 2.2s var(--ease) infinite; }
  .hero .vf { animation: frame-in 1.3s var(--ease) both .2s; }
  .hero-copy > * { animation: rise 1s var(--ease) both .55s; }
  .hero-copy > :nth-child(2) { animation-delay: .75s; }
  .hero-copy > :nth-child(3) { animation-delay: .9s; }
  .hero-copy > :nth-child(4) { animation-delay: 1.05s; }
  .hero-rec, .hero-foot { animation: fade 1.2s ease both 1.2s; }
}
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@keyframes frame-in { from { inset: 0; opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } }

/* ——— strona główna: portal Film / Wydarzenia (z apostrofem) ——— */
/* ——— strona główna: portal Film / Wydarzenia ——— */
.portal { position: relative; width: 100%; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; background: var(--black); touch-action: pan-y; }
.reel { position: absolute; z-index: -5; inset: 0; overflow: hidden; }
.reel--events { z-index: -4; clip-path: inset(0 0 0 var(--split)); }
.reel video { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) contrast(1.15) brightness(0.66); transform: scale(1.025); }
.reel--film video { object-position: 50% 45%; }
.reel--events video { object-position: 50% 54%; }
.reel-tone, .global-shade, .grain { position: absolute; inset: 0; pointer-events: none; }
.reel-tone--film { background: radial-gradient(circle at 35% 45%, transparent 0, rgba(5,5,5,.12) 36%, rgba(5,5,5,.58) 100%), linear-gradient(90deg, rgba(5,5,5,.75), transparent 55%); }
.reel-tone--events { background: radial-gradient(circle at 66% 48%, transparent 0, rgba(5,5,5,.08) 36%, rgba(5,5,5,.56) 100%), linear-gradient(270deg, rgba(5,5,5,.62), transparent 58%); }
.global-shade { z-index: -2; background: linear-gradient(180deg, rgba(5,5,5,.56) 0%, transparent 24%, transparent 62%, rgba(5,5,5,.9) 100%), radial-gradient(circle at center, transparent 42%, rgba(5,5,5,.35)); }
.grain { z-index: 18; opacity: .1; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.portal .site-header { position: absolute; }

.portal-copy { position: absolute; z-index: 7; top: 50%; width: min(38vw, 600px); transform: translateY(-48%); pointer-events: none; transition: opacity .26s ease; }
.portal-copy--film { left: var(--gutter); }
.portal-copy--events { right: var(--gutter); text-align: right; }
.portal-copy h1, .portal-copy h2 { font-size: clamp(2.8rem, 1rem + 4.6vw, 6rem); line-height: 1.02; letter-spacing: -0.015em; font-weight: 300; text-shadow: 0 24px 80px rgba(0,0,0,.5); }
.portal-copy h1 .l2, .portal-copy h2 .l2 { display: block; color: var(--ash); }


.portal-copy .desc { margin-top: 24px; color: rgba(242, 237, 228, 0.78); font-size: 0.9375rem; font-weight: 300; line-height: 1.6; max-width: 30em; }
.portal-copy--events .desc { margin-left: auto; }
.portal-copy .label { margin-bottom: 18px; }
.portal-copy .link { margin-top: 26px; pointer-events: auto; }

.playhead { position: absolute; z-index: 20; touch-action: none; top: 0; bottom: 72px; left: var(--split); width: 1px; cursor: ew-resize; background: linear-gradient(180deg, transparent 0%, rgba(201,152,91,.55) 12%, var(--brass) 48%, rgba(201,152,91,.4) 86%, transparent 100%); box-shadow: 0 0 28px rgba(201,152,91,.22); transition: left .14s cubic-bezier(.2,.75,.2,1); }
.apostrophe-handle { position: absolute; top: var(--handle-y); left: 50%; display: grid; place-items: center; width: 52px; height: 66px; border: 1px solid rgba(201,152,91,.7); background: rgba(5,5,5,.56); transform: translate(-50%, -50%); transition: top .17s cubic-bezier(.2,.75,.2,1); backdrop-filter: blur(14px); color: var(--ivory); }
.apostrophe-handle svg { width: 22px; height: auto; filter: drop-shadow(0 0 10px rgba(201,152,91,.34)); }
.playhead-label { position: absolute; top: calc(var(--handle-y) + 48px); color: rgba(242,237,228,.6); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; writing-mode: vertical-rl; transition: top .17s cubic-bezier(.2,.75,.2,1); }
.playhead-label--film { right: 10px; transform: rotate(180deg); }
.playhead-label--events { left: 10px; }
.portal-tools { position: absolute; z-index: 23; top: calc(var(--header-h) + 18px); right: var(--gutter); display: flex; align-items: center; gap: 22px; }
.playback { position: relative; display: flex; align-items: center; gap: 10px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--ash); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; }
.playback:hover { color: var(--ivory); }
.pause-icon { width: 8px; height: 10px; border-left: 2px solid var(--brass); border-right: 2px solid var(--brass); }
.play-icon { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--brass); }

.client-rail { position: absolute; z-index: 22; inset: auto 0 0; display: grid; grid-template-columns: auto 1fr; align-items: center; height: 72px; overflow: hidden; border-top: 1px solid var(--line); background: rgba(5,5,5,.76); backdrop-filter: blur(16px); }
.rail-label { position: relative; z-index: 2; display: grid; align-items: center; height: 100%; padding: 0 var(--gutter); border-right: 1px solid var(--line); background: rgba(5,5,5,.92); color: var(--brass); font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.18em; text-transform: uppercase; }
.client-track { display: flex; width: max-content; animation: rail 80s linear infinite; }
.client-rail:hover .client-track { animation-play-state: paused; }
.client-sequence { display: flex; flex: none; align-items: center; }
.client-mark { display: grid; place-items: center; min-width: 204px; height: 72px; padding: 0 36px; border-right: 1px solid rgba(242,237,228,.09); }
.client-mark img { width: auto; max-width: 170px; max-height: 40px; opacity: .82; object-fit: contain; }
.client-mark--priority { min-width: 232px; } .client-mark--priority img { max-width: 184px; max-height: 44px; opacity: 1; }
.client-mark--wide { min-width: 244px; } .client-mark--wide img { max-width: 194px; max-height: 38px; }
.client-mark--tall { min-width: 164px; } .client-mark--tall img { max-width: 104px; max-height: 48px; }
@keyframes rail { to { transform: translateX(-50%); } }
.mobile-switch { display: none; }

/* ——— v3: kadry zamiast filmów stockowych ——— */
.stills { position: absolute; inset: 0; overflow: hidden; }
.stills img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.8s ease; filter: saturate(.72) contrast(1.08) brightness(.62) sepia(.08); transform: scale(1.02); }
.stills img.is-on { opacity: 1; }
/* bez powolnego zoomu: przy przenikaniu kadrów dawał przeskok */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  .portal { min-height: 560px; }
  .reel { clip-path: none !important; opacity: 0; transition: opacity .52s ease; }
  .portal[data-active="film"] .reel--film, .portal[data-active="events"] .reel--events { opacity: 1; }
  .reel--film video { object-position: 58% 50%; }
  .global-shade { background: linear-gradient(180deg, rgba(5,5,5,.5), transparent 26%, rgba(5,5,5,.1) 48%, rgba(5,5,5,.9) 88%); }
  .reel-tone--film, .reel-tone--events { opacity: .45; }
  .desktop-nav { display: none; }
  .menu-button { display: inline-flex; }
  .portal-copy { top: auto; bottom: 166px; left: 20px; right: 20px; width: auto; transform: translateY(10px); text-align: left; opacity: 0; }
  .portal-copy--events { text-align: right; } /* Film po lewej, Wydarzenia po prawej, jak na dużym ekranie */
  .portal[data-active="film"] .portal-copy--film, .portal[data-active="events"] .portal-copy--events { opacity: 1; transform: none; }
  .portal-copy h1, .portal-copy h2 { font-size: clamp(2.4rem, 11vw, 4rem); }
  .portal-copy .desc { margin-top: 14px; font-size: .875rem; }
  .portal-copy .link { margin-top: 16px; }
  .playhead, .portal-tools { display: none; }
  .mobile-switch { position: absolute; z-index: 24; left: 20px; right: 20px; bottom: 86px; display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; min-height: 50px; border: 1px solid rgba(201,152,91,.32); background: rgba(5,5,5,.58); backdrop-filter: blur(14px); }
  .mobile-switch button { height: 48px; background: none; border: 0; color: var(--ash); font-size: .75rem; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
  .mobile-switch button.is-active { color: var(--ivory); background: rgba(201,152,91,.16); box-shadow: inset 0 -2px 0 var(--brass); }
  .mobile-switch .apos { display: grid; place-items: center; color: var(--brass); }
  .mobile-switch .apos svg { width: 14px; }
  .client-rail { grid-template-columns: 1fr; height: 70px; }
  .rail-label { display: none; }
  .client-mark { min-width: 170px; height: 70px; padding: 0 26px; }
  .client-mark img { max-width: 140px; max-height: 34px; }
}

.portal .stills img { filter: saturate(.74) contrast(1.08) brightness(.62) sepia(.06); }
.portal-showreel { font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ash); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.portal-showreel:hover { color: var(--ivory); }
.portal-rec { position: absolute; z-index: 23; left: var(--gutter); top: calc(var(--header-h) + 18px); display: flex; gap: 18px; align-items: center; }
@media (max-width: 760px) { .portal-rec { display: none; } }

/* ——— ujawnianie przy przewijaniu (widoczne bez JS) ——— */
.js .r { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .r.is-in { opacity: 1; transform: none; }
.js .r[data-delay="1"] { transition-delay: .12s; } .js .r[data-delay="2"] { transition-delay: .24s; } .js .r[data-delay="3"] { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) { .js .r { opacity: 1; transform: none; transition: none; } }

/* ——— sekcje ——— */
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(48px, 6vw, 96px); }
.on-paper { background: var(--paper); color: var(--paper-ink); }
.on-graphite { background: var(--graphite); }
.rule { border-top: 1px solid var(--line); }
.on-paper .rule { border-top-color: var(--line-paper); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px 48px; margin-bottom: clamp(36px, 5vw, 72px); }
.section-head .label { margin-bottom: 18px; }
.section-head p.lead { max-width: 30em; }
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.two--even { grid-template-columns: 1fr 1fr; }

/* intro */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.intro .facts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.intro .facts div { display: grid; grid-template-columns: 180px 1fr; gap: 12px 24px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.intro .facts dt { font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ash); padding-top: .35em; }
.intro .facts dd { margin: 0; font-weight: 300; font-size: 1.0625rem; }

/* dwa obszary */
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pillar { position: relative; display: grid; align-content: end; min-height: clamp(460px, 62vh, 760px); padding: clamp(24px, 3vw, 44px); text-decoration: none; overflow: hidden; isolation: isolate; background: var(--graphite); }
.pillar img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.08) brightness(.6); transition: transform 1.6s var(--ease), filter .6s ease; }
.pillar::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,5,5,.1), rgba(5,5,5,.3) 40%, rgba(5,5,5,.92)); }
.pillar:hover img { transform: scale(1.04); filter: saturate(.85) contrast(1.08) brightness(.68); }
.pillar .vf { --vf-inset: 20px; --vf-size: 26px; }
.pillar h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.8rem); margin-top: 14px; }
.pillar p { margin-top: 14px; max-width: 30em; color: rgba(242,237,228,.82); font-weight: 300; }
.pillar ul { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .8125rem; color: var(--ash); }
.pillar .link { margin-top: 26px; }

/* realizacje */
.work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(36px, 4vw, 60px) clamp(14px, 1.6vw, 26px); }
.work { grid-column: span 4; min-width: 0; }
.work--half { grid-column: span 6; }
.work--wide { grid-column: span 8; grid-row: span 2; }
.work--full { grid-column: span 12; }
.work--full .cover { aspect-ratio: 21 / 9; }
.work--full .work-meta h3 { font-size: clamp(1.4rem, 1rem + 1vw, 2rem); font-weight: 300; }
.work[hidden] { display: none; }
.work-link { display: grid; gap: 14px; text-decoration: none; }
.cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--smoke); }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.9); transition: transform 1.3s var(--ease), filter .4s ease; }
.work-link:hover .cover img { transform: scale(1.035); filter: saturate(1) brightness(1); }
.cover-title { position: absolute; inset: 0; display: grid; align-content: space-between; padding: clamp(16px, 2vw, 26px); background: radial-gradient(circle at 85% 10%, rgba(201,152,91,.14), transparent 50%), var(--smoke); color: var(--ivory); }
.cover-title span { font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ash); }
.cover-title strong { font-weight: 300; font-size: clamp(1.3rem, 1rem + 1.1vw, 2rem); line-height: 1.1; max-width: 12em; }
.cover.has-image .cover-title { display: none; }
.cover-play { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9); display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(242,237,228,.75); background: rgba(5,5,5,.45); opacity: 0; transition: opacity .3s ease, transform .3s var(--ease); }
.cover-play::before { content: ""; margin-left: 4px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid var(--ivory); }
.work-link:hover .cover-play, .work-link:focus-visible .cover-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.work-meta { display: grid; gap: 4px; }
.work-meta small { font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
.work-meta h3 { font-size: 1.25rem; font-weight: 400; }
.work--wide .work-meta h3, .work--half .work-meta h3 { font-size: clamp(1.4rem, 1rem + 1vw, 2rem); font-weight: 300; }
.work-meta p { font-size: .875rem; color: var(--ash); }
.on-paper .cover-title { color: var(--ivory); }
.on-paper .work-meta small { color: #8f612f; }
.on-paper .work-meta p { color: var(--paper-muted); }
.filters { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-bottom: clamp(36px, 4vw, 56px); padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.filters button { background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--ash); font-size: .75rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.filters button:hover { color: var(--ivory); }
.filters button[aria-pressed="true"] { color: var(--ivory); box-shadow: inset 0 -1px 0 var(--ivory); }
.filters sup { margin-left: 5px; color: var(--brass); font-family: var(--mono); font-size: .65rem; letter-spacing: 0; }
.preview-note { margin-top: 28px; font-size: .875rem; color: var(--ash); max-width: 48em; }

/* zakres (matryca możliwości) */
.scope-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-paper); }
.scope-col { padding: 28px 28px 8px 0; }
.scope-col + .scope-col { padding-left: 28px; border-left: 1px solid var(--line-paper); }
.scope-col h3 { margin-bottom: 18px; font-weight: 400; }
.scope-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.scope-col li { font-size: .9375rem; color: var(--paper-muted); padding-left: 18px; position: relative; }
.scope-col li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 1px; background: #8f612f; }

/* lista zakresu (dwukolumnowa) */
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ledger li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 10px 40px; padding-block: 22px; border-bottom: 1px solid var(--line); align-items: baseline; }
.ledger strong { font-weight: 400; font-size: 1.25rem; line-height: 1.25; }
.ledger p { font-size: .9375rem; color: var(--ash); max-width: 40em; }
.on-paper .ledger, .on-paper .ledger li { border-color: var(--line-paper); }
.on-paper .ledger p { color: var(--paper-muted); }

/* dla kogo */
.audiences { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.audience { padding: 28px 24px 28px 0; display: grid; gap: 12px; align-content: start; }
.audience + .audience { padding-left: 24px; border-left: 1px solid var(--line); }
.audience h3 { font-weight: 400; }
.audience p { font-size: .9375rem; color: var(--ash); }
.audience .names { font-size: .8125rem; color: rgba(242,237,228,.7); font-weight: 300; }

/* klienci: taśma */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 26px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 0; }
@media (prefers-reduced-motion: no-preference) { .marquee-track { animation: marquee 70s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-seq { display: flex; align-items: center; flex: none; }
.mark { display: grid; place-items: center; min-width: 210px; height: 56px; padding: 0 34px; }
.mark img { max-height: 40px; max-width: 150px; width: auto; object-fit: contain; opacity: .8; }
.mark--text { font-size: .8125rem; font-weight: 400; letter-spacing: .06em; color: rgba(242,237,228,.8); white-space: nowrap; }

/* ludzie */
.people { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 100px); align-items: start; }
.person { display: grid; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); }
.person .name { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 300; line-height: 1.1; }
.person .role { font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
.person p { font-weight: 300; color: rgba(242,237,228,.86); max-width: 32em; }
.crew { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; }
.crew li { padding-top: 14px; border-top: 1px solid var(--line); font-size: .9375rem; }
.crew li small { display: block; color: var(--ash); font-size: .8125rem; margin-top: 2px; }

/* proces */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); border-top: 1px solid var(--line); counter-reset: s; }
.steps li { counter-increment: s; display: grid; gap: 12px; align-content: start; padding: 26px 24px 8px 0; }
.steps li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.steps li::before { content: "0" counter(s); font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; color: var(--brass); }
.steps strong { font-weight: 400; font-size: 1.1875rem; line-height: 1.25; }
.steps p { font-size: .9rem; color: var(--ash); line-height: 1.55; }
.on-paper .steps, .on-paper .steps li + li { border-color: var(--line-paper); }
.on-paper .steps p { color: var(--paper-muted); }
.on-paper .steps li::before { color: #8f612f; }
.steps--3 li:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.steps--3 li:nth-child(n+4) { border-top: 1px solid var(--line); }
.crew--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* usp */
.usp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 96px); align-items: end; }
.usp .display { font-size: clamp(2.4rem, 1.2rem + 4.4vw, 5.6rem); }
.usp .mark-pill { display: inline-block; margin-top: 18px; padding: 8px 14px; border: 1px solid var(--line-strong); font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; }

/* galeria / taśma zdjęć */
.strip-wrap { padding-left: var(--gutter); }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 28vw, 420px); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 14px 0; scrollbar-color: var(--ash-2) transparent; }
.strip button { position: relative; padding: 0; border: 0; background: var(--smoke); cursor: zoom-in; aspect-ratio: 3 / 2; scroll-snap-align: start; overflow: hidden; }
.strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); filter: saturate(.85); }
.strip button:hover img { transform: scale(1.035); filter: none; }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gallery button { position: relative; display: block; padding: 0; border: 0; background: var(--smoke); cursor: zoom-in; aspect-ratio: 3 / 2; overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gallery button:hover img { transform: scale(1.04); }

/* CTA */
.cta { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(90px, 12vw, 170px); }
.cta .media { position: absolute; inset: 0; z-index: -2; }
.cta .media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) brightness(.58); }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,5,5,.9), rgba(5,5,5,.45) 65%), linear-gradient(180deg, rgba(5,5,5,.5), transparent 30%, rgba(5,5,5,.5)); }
.cta .inner { display: grid; gap: 26px; }
.cta .inner > * { max-width: 860px; }
.cta .row { display: flex; flex-wrap: wrap; gap: 14px 36px; align-items: center; }
.cta .big { font-size: clamp(1.3rem, 1rem + 1.4vw, 2.2rem); font-weight: 300; text-decoration: none; overflow-wrap: anywhere; }
.cta .big:hover { color: var(--brass); }

/* stopka */
.site-footer { border-top: 1px solid var(--line); padding-block: 48px 28px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-grid .wordmark { width: 150px; }
.footer-grid h3 { font-size: .6875rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ash); margin-bottom: 14px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-grid a { text-decoration: none; font-size: .9375rem; }
.footer-grid a:hover { text-decoration: underline; text-underline-offset: 5px; }
.footer-legal { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .8125rem; color: var(--ash); }

/* ——— hero podstron ——— */
.page-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end; min-height: min(82svh, 860px); }
.page-hero .media { position: absolute; inset: 0; z-index: -2; }
.page-hero .media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.74) contrast(1.08) brightness(.62); }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,5,5,.72), rgba(5,5,5,.2) 55%, rgba(5,5,5,.05)), linear-gradient(180deg, rgba(5,5,5,.5), transparent 28%, transparent 55%, rgba(5,5,5,.94)); }
.page-hero .vf { --vf-inset: clamp(16px, 2.6vw, 40px); --vf-size: clamp(22px, 2.6vw, 40px); }
.page-hero .inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 28px 64px; align-items: end; padding-block: calc(var(--header-h) + 90px) clamp(44px, 6vw, 90px); }
.page-hero h1 { font-size: clamp(2.4rem, 1rem + 4.3vw, 5.4rem); overflow-wrap: anywhere; }
.page-hero--plain h1 { font-size: clamp(2.6rem, 1.2rem + 5vw, 6.2rem); }
.page-hero .label { margin-bottom: 20px; }
.page-hero--plain { min-height: 0; }
.page-hero--plain::after { display: none; }
.page-hero--plain .inner { padding-block: calc(var(--header-h) + clamp(56px, 8vw, 120px)) clamp(36px, 5vw, 72px); }
@media (prefers-reduced-motion: no-preference) { .page-hero .vf { animation: frame-in 1.2s var(--ease) both .15s; } .page-hero .inner > * { animation: rise 1s var(--ease) both .45s; } .page-hero .inner > :nth-child(2) { animation-delay: .65s; } }

/* ——— kontakt ——— */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 110px); }
.contact-direct { display: grid; gap: 22px; align-content: start; }
.contact-direct .big { font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); font-weight: 300; text-decoration: none; overflow-wrap: anywhere; }
.contact-direct .big:hover { color: #8f612f; }
.contact-direct dl { margin: 12px 0 0; display: grid; gap: 16px; }
.contact-direct dt { font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-muted); }
.contact-direct dd { margin: 4px 0 0; }
.socials { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 22px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { padding: 0; font-size: .6875rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.field .hint { font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--paper-muted); font-size: .8125rem; }
.field input, .field textarea, .field select { width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--paper-ink); background: #f6f3ee; border: 1px solid rgba(21,18,15,.26); border-radius: 0; }
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--paper-ink); outline-offset: 1px; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices label { position: relative; font-size: .875rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.choices input { position: absolute; inset: 0; opacity: 0; }
.choices span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(21,18,15,.3); cursor: pointer; }
.choices input:checked + span { background: var(--paper-ink); color: var(--paper); border-color: var(--paper-ink); }
.choices input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.form-error { grid-column: 1 / -1; color: #8a2a1b; font-size: .9375rem; }
.compose { grid-column: 1 / -1; display: grid; gap: 14px; padding: 22px; background: #f6f3ee; border: 1px solid var(--line-paper); }
.compose pre { margin: 0; white-space: pre-wrap; font-family: var(--font); font-size: .9375rem; line-height: 1.6; max-height: 300px; overflow: auto; }
.compose-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.text-button { background: none; border: 0; padding: 0 0 6px; cursor: pointer; border-bottom: 1px solid currentColor; font-size: .75rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }

/* ——— odtwarzacz / podgląd ——— */
.viewer { border: 0; padding: 0; margin: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; background: rgba(5,5,5,.97); color: var(--ivory); }
.viewer::backdrop { background: rgba(0,0,0,.9); }
.viewer-inner { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; padding: 14px var(--gutter) 22px; }
.viewer-bar { display: flex; justify-content: space-between; align-items: center; min-height: 48px; }
.viewer-bar button, .viewer-nav button { background: none; border: 0; cursor: pointer; font-size: .6875rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; padding: 10px 0; }
.viewer-stage { display: grid; place-items: center; min-height: 0; }
.viewer-stage iframe, .viewer-stage video { width: min(100%, calc((100dvh - 190px) * 16 / 9)); aspect-ratio: 16 / 9; border: 0; background: #000; }
.viewer-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.viewer-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: end; }
.viewer-caption strong { font-weight: 300; font-size: 1.375rem; }
.viewer-nav { display: flex; gap: 24px; }

/* ——— responsywność ——— */
@media (max-width: 1180px) {
  .work, .work--half { grid-column: span 6; }
  .work--wide, .work--full { grid-column: span 12; grid-row: auto; }
  .crew--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audiences { grid-template-columns: 1fr 1fr; }
  .audience:nth-child(3) { padding-left: 0; border-left: 0; }
  .audience:nth-child(n+3) { border-top: 1px solid var(--line); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .steps li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .on-paper .steps li:nth-child(n+3) { border-top-color: var(--line-paper); }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  :root { --header-h: 66px; }
  .nav { display: none; }
  .menu-button { display: inline-flex; }
  .wordmark { width: 118px; }
  .two, .two--even, .intro, .pillars, .people, .contact, .usp, .page-hero .inner { grid-template-columns: 1fr; }
  .section-head { grid-template-columns: 1fr; }
  .scope-grid { grid-template-columns: 1fr; }
  .scope-col + .scope-col { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-paper); }
  .ledger li { grid-template-columns: 1fr; }
  .crew { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .pillar { min-height: 420px; }
  .hero-rec { right: var(--gutter); }
  .hero-copy { padding-top: 160px; }
  .intro .facts div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 620px) {
  .work, .work--half, .work--wide, .work--full { grid-column: span 12; }
  .work--full .cover { aspect-ratio: 16 / 9; }
  .crew--4 { grid-template-columns: 1fr; }
  .audiences { grid-template-columns: 1fr; }
  .audience, .audience + .audience { padding-left: 0; border-left: 0; }
  .audience + .audience { border-top: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding-left: 0; border-left: 0; }
  .steps li + li { border-top: 1px solid var(--line); }
  .on-paper .steps li + li { border-top-color: var(--line-paper); }
  .form { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-actions .button { flex: 1 1 auto; }
  .crew { grid-template-columns: 1fr; }
  .hero-foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.nav a.is-hot { color: var(--ivory); }
.nav a.is-hot::after { transform: scaleX(1); }
.portal .client-mark img { filter: none; }

/* ——— osadzony showreel ——— */
.reel-embed { position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: var(--smoke); }
.reel-embed > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.74) contrast(1.08) brightness(.6); transition: transform 1.4s var(--ease); }
.reel-embed:hover > img { transform: scale(1.03); }
.reel-embed iframe, .reel-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.reel-play { position: absolute; inset: 0; z-index: 4; background: none; border: 0; cursor: pointer; }
.reel-embed.is-playing > img, .reel-embed.is-playing .reel-play, .reel-embed.is-playing .vf { display: none; }
@media (max-width: 760px) { .reel-embed { aspect-ratio: 16 / 9; } }

/* ——— v5 ——— */
/* portal: tytuły prowadzą na podstrony */
.portal-copy h1 a, .portal-copy h2 a { color: inherit; text-decoration: none; pointer-events: auto; }
.portal-copy h1 a .l2, .portal-copy h2 a .l2 { transition: color .35s ease; }
.portal-copy h1 a:hover .l2, .portal-copy h2 a:hover .l2 { color: var(--ivory); }
.portal-cue { position: absolute; z-index: 23; left: 50%; bottom: 88px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; padding: 10px 14px; text-decoration: none; color: rgba(242,237,228,.95); font-size: .8125rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; text-shadow: 0 2px 18px rgba(0,0,0,.7); white-space: nowrap; }
.portal-cue:hover { color: var(--ivory); }
.portal-cue .cue-arrow { width: 18px; height: 30px; color: var(--brass); filter: drop-shadow(0 0 10px rgba(201,152,91,.45)); }
@media (prefers-reduced-motion: no-preference) { .portal-cue .cue-arrow { animation: nudge 2s var(--ease) infinite; } }
@keyframes nudge { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: .55; } }
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) { .portal-cue { display: none; } }

/* kafle Film / Wydarzenia */
.pillar .label { color: var(--brass); }
.pillar .link { pointer-events: none; }
.pillar .vf { --vf-inset: 18px; --vf-size: 26px; }
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; } }

/* studia przypadku */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.case { display: grid; gap: 18px; align-content: start; padding: 30px 28px 34px 0; }
.case + .case { padding-left: 28px; border-left: 1px solid var(--line); }
.case h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); font-weight: 300; line-height: 1.1; }
.case-meta { font-size: .8125rem; color: var(--ash); margin-top: -8px; }
.case dl { margin: 6px 0 0; display: grid; gap: 14px; }
.case dt { font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
.case dd { margin: 4px 0 0; font-size: .9375rem; font-weight: 300; color: rgba(242,237,228,.86); line-height: 1.6; }
.case .link { justify-self: start; margin-top: 6px; }
@media (max-width: 1100px) { .cases { grid-template-columns: 1fr; } .case + .case { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } .case { padding-right: 0; } }

/* rejestr realizacji */
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.index-row[hidden] { display: none; }
.index-row a { display: grid; grid-template-columns: 148px minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1.6fr) 56px; gap: 16px 28px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .25s ease; }
.index-row a:hover { background: rgba(242,237,228,.03); }
.index-cover { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--smoke); }
.index-cover .cover-title { padding: 10px; }
.index-cover .cover-title strong { font-size: .75rem; max-width: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.index-cover .vf { --vf-inset: 8px; --vf-size: 12px; }
.index-row .framed:hover .vf--hover { --vf-inset: 6px; }
.index-title { display: grid; gap: 3px; min-width: 0; }
.index-title strong { font-weight: 400; font-size: 1.0625rem; line-height: 1.3; }
.index-title small { font-size: .8125rem; color: var(--ash); }
.index-format { font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.index-role { font-size: .875rem; color: var(--ash); }
.index-year { font-family: var(--mono); font-size: .75rem; color: var(--ash); text-align: right; }
.index-more { margin-top: 28px; font-size: .9375rem; font-weight: 300; color: var(--ash); max-width: 48em; }
@media (max-width: 900px) {
  .index-row a { grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 18px; }
  .index-cover { grid-row: 1 / 4; }
  .index-format { order: -1; }
  .index-year { display: none; }
}
@media (max-width: 520px) { .index-row a { grid-template-columns: 96px minmax(0, 1fr); } .index-title strong { font-size: .9375rem; } .index-role { font-size: .8125rem; } }

/* matryca zakresu na ciemnym tle */
.scope-grid--dark { border-top-color: var(--line); }
.scope-grid--dark .scope-col + .scope-col { border-left-color: var(--line); }
.scope-grid--dark .scope-col li { color: var(--ash); }
.scope-grid--dark .scope-col li::before { background: var(--brass); }
@media (max-width: 900px) { .scope-grid--dark .scope-col + .scope-col { border-top-color: var(--line); } }

/* ——— v5.1 ——— */
.portal-copy .desc--list { color: rgba(242,237,228,.9); font-weight: 400; font-size: .9375rem; letter-spacing: .01em; }
.portal-copy .desc--sub { margin-top: 10px; color: var(--ash); font-size: .875rem; font-weight: 300; }
.portal-copy--events .desc--list, .portal-copy--events .desc--sub { margin-left: auto; }
.page-hero--short { min-height: min(64svh, 680px); }
.page-hero--short .inner { padding-top: calc(var(--header-h) + 60px); }

/* co dajemy */
.for-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.for-list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.for-list strong { font-weight: 400; font-size: 1.0625rem; }
.for-list span { color: var(--ash); font-weight: 300; font-size: .9375rem; line-height: 1.5; }
.for-list .for-all strong { color: var(--brass); font-weight: 400; }
.crew--plain li { font-size: 1rem; }

/* kafelki realizacji */
.mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mosaic--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; text-decoration: none; background: var(--smoke); isolation: isolate; }
.tile[hidden] { display: none; }
.tile .cover { position: absolute; inset: 0; display: block; }
.tile .cover-title { padding: 18px; }
.tile .cover-title strong { font-size: clamp(1.1rem, .9rem + .7vw, 1.5rem); }
.tile .cover.has-image .cover-title { display: none; }
.tile::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 45%, rgba(5,5,5,.82)); pointer-events: none; transition: opacity .4s ease; }
.tile:hover::after { opacity: .9; }
.tile .cover img { transition: transform 1.2s var(--ease), filter .4s ease; }
.tile:hover .cover img { transform: scale(1.04); filter: saturate(1) brightness(1); }
.tile-cap { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 16px 18px; color: var(--ivory); pointer-events: none; }
.tile-cap small { font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
.tile-cap strong { font-weight: 400; font-size: 1rem; line-height: 1.3; }
.tile-cap span { font-size: .75rem; color: rgba(242,237,228,.7); }
.tile .cover-play { z-index: 4; }
.tile:hover .cover-play, .tile:focus-visible .cover-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tile .vf { --vf-inset: 12px; --vf-size: 18px; z-index: 5; }
.tile .cover:not(.has-image) .cover-title { display: grid; }
.tile .cover:not(.has-image) ~ .tile-cap { display: none; }
.on-paper .tile .cover-title, .on-paper .tile-cap { color: var(--ivory); }
@media (max-width: 1100px) { .mosaic--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .mosaic, .mosaic--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tile-cap { padding: 10px 12px; } .tile-cap strong { font-size: .8125rem; } .tile-cap span { display: none; } .tile .cover-title { padding: 10px 12px; } .tile .cover-title strong { font-size: .9375rem; } }
@media (max-width: 480px) { .mosaic, .mosaic--4 { grid-template-columns: 1fr; } .tile-cap strong { font-size: 1rem; } .tile-cap span { display: block; } }

/* trzy historie */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.case-card { position: relative; display: grid; text-decoration: none; color: inherit; background: var(--graphite); overflow: hidden; }
.on-paper .case-card { background: #e4ded3; color: var(--paper-ink); }
.case-card .cover { position: relative; display: block; aspect-ratio: 16 / 9; }
.case-card .cover.has-image .cover-title { display: none; }
.case-card .cover-title strong { font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); }
.case-card .cover img { transition: transform 1.2s var(--ease); }
.case-card:hover .cover img { transform: scale(1.04); }
.case-cap { display: grid; gap: 6px; padding: 20px 22px 24px; }
.case-cap small { font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
.on-paper .case-cap small { color: #8f612f; }
.case-cap strong { font-weight: 300; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.1; }
.case-cap span { font-size: .8125rem; color: var(--ash); }
.on-paper .case-cap span { color: var(--paper-muted); }
.case-cap em { margin-top: 8px; font-style: normal; font-weight: 300; font-size: .9375rem; line-height: 1.5; color: rgba(242,237,228,.86); }
.on-paper .case-cap em { color: var(--paper-muted); }
.case-card .vf { --vf-inset: 12px; --vf-size: 20px; }
@media (max-width: 1000px) { .cases { grid-template-columns: 1fr; } }

/* strona historii */
.case-facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.case-facts div { display: grid; grid-template-columns: 120px 1fr; gap: 8px 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.case-facts dt { font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ash); padding-top: .3em; }
.case-facts dd { margin: 0; font-weight: 300; }
.case-story { display: grid; gap: 34px; }
.case-story h2 { font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; color: var(--brass); font-weight: 500; margin-bottom: 12px; }
.case-story p { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight: 300; line-height: 1.6; max-width: 36em; color: rgba(242,237,228,.9); }
.case-hero-image { aspect-ratio: 21 / 9; overflow: hidden; background: var(--smoke); position: relative; }
.case-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.case-hero-image .cover { position: absolute; inset: 0; aspect-ratio: auto; }
.case-card .cover, .tile .cover { aspect-ratio: auto; }
.case-card .cover { aspect-ratio: 16 / 9; }
.case-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.case-nav a { display: grid; gap: 6px; text-decoration: none; }
.case-nav small { font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ash); }
.case-nav strong { font-weight: 300; font-size: clamp(1.2rem, 1rem + .8vw, 1.8rem); }
.case-nav a:hover strong { color: var(--brass); }
.reel-embed .cover { z-index: 1; }
.reel-embed .cover-title strong { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.4rem); }
@media (max-width: 760px) { .case-facts div { grid-template-columns: 1fr; gap: 2px; } .case-hero-image { aspect-ratio: 16 / 9; } }

/* galeria z planu: nierówna, z ziarnem (rytm co 8 zdjęć) */
.gallery--mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 20vw, 300px); grid-auto-flow: dense; gap: 8px; }
.gallery--mosaic button { grid-column: span 2; aspect-ratio: auto; }
.gallery--mosaic button:nth-child(6n+1) { grid-column: span 4; grid-row: span 2; }
.gallery--mosaic button:last-child:nth-child(6n+2) { grid-row: span 2; }
.gallery--mosaic button::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .14; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.gallery--mosaic img { filter: saturate(.8) contrast(1.05); }
.gallery--mosaic button:hover img { filter: none; }
@media (max-width: 760px) { .gallery--mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(110px, 28vw, 180px); } .gallery--mosaic button, .gallery--mosaic button:last-child:nth-child(6n+2) { grid-column: span 1; grid-row: auto; } .gallery--mosaic button:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; } }

/* ——— v5.2 ——— */
.portrait { width: min(100%, 320px); aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.85); margin-bottom: 10px; }
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.door { display: grid; gap: 8px; align-content: start; padding: 28px 28px 32px 0; text-decoration: none; color: inherit; }
.door + .door { padding-left: 28px; border-left: 1px solid var(--line); }
.door small { font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; color: var(--brass); }
.door strong { font-weight: 300; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); line-height: 1.1; }
.door span { font-size: .9375rem; color: var(--ash); font-weight: 300; }
.door em { margin-top: 10px; font-style: normal; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; }
.door em i { font-style: normal; display: inline-block; margin-left: 10px; transition: transform .25s var(--ease); }
.door:hover em i { transform: translateX(4px); }
.door:hover strong { color: var(--brass); }
@media (max-width: 760px) { .doors { grid-template-columns: 1fr; } .door, .door + .door { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--line); } }

/* ——— v5.3: galeria stykówka (dużo małych kadrów), opis realizacji prozą ——— */
.gallery--wall { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; counter-reset: g; }
.gallery--wall button { aspect-ratio: 3 / 2; counter-increment: g; }
.gallery--wall button::before { content: counter(g, decimal-leading-zero); position: absolute; left: 8px; bottom: 6px; z-index: 3; font-family: var(--mono); font-size: .625rem; letter-spacing: .14em; color: var(--ivory); opacity: .55; pointer-events: none; transition: opacity .3s ease; }
.gallery--wall button:hover::before { opacity: 1; color: var(--brass); }
.gallery--wall img { filter: saturate(.78) contrast(1.04); }
.gallery--wall button:hover img { filter: none; }
@media (max-width: 1100px) { .gallery--wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .gallery--wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } .gallery--wall button::before { display: none; } }
.gallery--wall-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.case-story--prose { gap: 22px; }
.case-story--prose p { max-width: 38em; }

/* przeciąganie palcem: bez opóźnienia uchwytu */
.portal.is-dragging .playhead, .portal.is-dragging .apostrophe-handle, .portal.is-dragging .playhead-label { transition: none; }

/* ——— galeria kafelkowa (Kim jesteśmy): dużo małych kadrów, co kilka duży albo szeroki, bez dziur ——— */
.gallery--tiles { grid-auto-rows: minmax(90px, 11vw); grid-auto-flow: dense; gap: 6px; }
.gallery--tiles button { aspect-ratio: auto; height: 100%; }
.gallery--tiles button::before { display: none; }
.gallery--tiles button:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; }
.gallery--tiles button:nth-child(7n+5) { grid-column: span 2; }
.gallery--tiles button:nth-child(11n+3) { grid-row: span 2; }
.gallery--tiles button:nth-last-child(-n+6) { grid-column: auto; grid-row: auto; } /* końcówka bez dziur */
@media (max-width: 1100px) { .gallery--tiles { grid-auto-rows: minmax(80px, 14vw); } }
@media (max-width: 760px) { .gallery--tiles { grid-auto-rows: minmax(70px, 22vw); gap: 4px; } .gallery--tiles button:nth-child(11n+3) { grid-row: auto; } }

/* telefon i pionowy tablet: jaśniejsze kadry w portalu (na końcu pliku, żeby wygrać z regułą ogólną) */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) { .portal .stills img { filter: saturate(.8) contrast(1.06) brightness(.8) sepia(.04); } }