/* =========================================================
   DJ Błażej Biurkowski | One Page
   Paleta z obecnej strony: krem #ECEBE8, czerń, szary gradient
   ========================================================= */

:root {
  --fade-h: clamp(110px, 14vh, 170px);   /* wysokość wygaszania bieli w czerń między hero a sekcją skrótów */
  --fade-w: clamp(90px, 14vh, 170px);    /* wysokość wygaszania beżu w biel między „O mnie” a Portfolio */
  --cream: #ECEBE8;
  --cream-2: #E4E2DD;
  --grey: #C2C2C2;
  --paper: #F9F9F9;
  --ink: #0B0B0B;
  --ink-2: #1A1A1A;
  --text: #333333;
  --muted: #69727D;
  --line: rgba(11, 11, 11, .18);
  --line-light: rgba(236, 235, 232, .22);
  --gradient: linear-gradient(90deg, var(--cream) 0%, var(--grey) 64%);

  /* Typografia: Montserrat = nagłówki i elementy interfejsu (menu, przyciski, etykiety),
     Lora = teksty opisowe (akapity, cytat). Cormorant został usunięty razem z dużym napisem w tle hero. */
  --f-head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Lora", Georgia, "Times New Roman", serif;

  --gutter: clamp(16px, 5vw, 72px);
  --maxw: 1320px;
  --header-h: clamp(64px, 8vh, 84px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--f-head);
  font-size: clamp(15px, .35vw + 14px, 17px);
  line-height: 1.7;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-loading, body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
/* akapity i cytaty (także nowe bloki dodane w WordPressie) dostają krój opisowy */
p, blockquote { font-family: var(--f-text); }
strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }
::selection { background: var(--ink); color: var(--cream); }

:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 1000;
  background: var(--ink); color: var(--cream); padding: 10px 16px;
  transition: top .2s;
}
.skip:focus { top: 16px; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- LOADER ---------- */
.loader {
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center;
  pointer-events: none;
}
.loader__panel {
  position: absolute; left: 0; right: 0; height: 50.5%;
  background: var(--cream);
  transition: transform .8s var(--ease-io);
}
.loader__panel--top { top: 0; }
.loader__panel--bottom { bottom: 0; }
.loader__inner {
  position: relative;
  width: clamp(140px, 34vw, 210px);
  aspect-ratio: 1;
  display: grid; place-items: center;
  animation: loaderBreath 3.2s cubic-bezier(.45, .05, .55, .95) infinite;
  transition: opacity .4s ease, transform .6s var(--ease-io);
}
/* kreski opływają kwadrat logo: każda ramka ma jedną zaokrągloną kreskę, która płynnie przyspiesza i zwalnia (ease-in-out na każde okrążenie),
   a różne czasy okrążeń sprawiają, że kreski rozjeżdżają się i zbiegają, zamiast kręcić się jednostajnie */
.loader__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; shape-rendering: geometricPrecision; }
.loader__lines rect { fill: none; stroke: var(--ink); stroke-linecap: round; }
.loader__track { stroke-width: .5; opacity: .1; }
.loader__line { stroke-dashoffset: 0; animation: loaderRun var(--t) cubic-bezier(.55, .1, .35, .95) infinite; }
.loader__line--1 { --t: 2.8s; stroke-width: 1.6; stroke-dasharray: 30 70; }
.loader__line--2 { --t: 2.1s; stroke-width: 1.2; stroke-dasharray: 17 83; opacity: .6; animation-direction: reverse; }
.loader__line--3 { --t: 3.4s; stroke-width: .9; stroke-dasharray: 9 91; opacity: .38; animation-delay: -.5s; }
@keyframes loaderRun { to { stroke-dashoffset: -100; } }
@keyframes loaderBreath { 0%, 100% { scale: 1; } 50% { scale: 1.015; } }
.loader__logo {
  position: relative;
  width: 50%;
  clip-path: inset(100% 0 0 0);
  animation: logoIn .8s .1s var(--ease) forwards;
}
.loader__count {
  position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%);
  font-size: 12px; letter-spacing: .3em; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
@keyframes logoIn { to { clip-path: inset(0 0 0 0); } }

body.is-loaded .loader__inner { opacity: 0; transform: scale(.94); }
body.is-loaded .loader__panel--top { transform: translateY(-101%); transition-delay: .15s; }
body.is-loaded .loader__panel--bottom { transform: translateY(101%); transition-delay: .15s; }
body.is-ready .loader { display: none; }

/* ---------- CURTAIN ---------- */
.curtain {
  position: fixed; inset: 0; z-index: 800;
  background: var(--ink);
  display: grid; place-items: center;
  transform: translateY(100%);
  pointer-events: none;
}
.curtain img { width: 56px; filter: invert(1); opacity: 0; transition: opacity .3s; }
.curtain.is-in { transform: translateY(0); transition: transform .55s var(--ease-io); }
.curtain.is-in img { opacity: 1; transition-delay: .2s; }
.curtain.is-out { transform: translateY(-100%); transition: transform .6s var(--ease-io); }

/* ---------- HEADER ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--gutter);
  transition: color .4s;
  color: var(--ink);
}
/* tło z rozmyciem na pseudo-elemencie, żeby nie tworzyć bloku zawierającego dla menu mobilnego */
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(236, 235, 232, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  opacity: 0; transition: opacity .4s, background-color .4s;
}
.header.is-scrolled::before { opacity: 1; }
.header.is-dark { color: var(--cream); }
.header.is-dark::before { background: rgba(11, 11, 11, .72); box-shadow: 0 1px 0 var(--line-light); }
.header.is-dark .header__logo img { filter: invert(1); }
.header__logo img { width: clamp(34px, 3.2vw, 44px); height: auto; transition: filter .4s; }

.menu { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); }
.menu__links { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); }
.menu__list { display: flex; gap: clamp(16px, 2.4vw, 40px); }
.menu__logo { display: none; }   /* logo w środku paska tylko na komputerze (blok KOMPUTER na końcu pliku) */
.hero__side { display: none; }   /* pionowa sekcja ze skrótami tylko na komputerze */
.menu__list a, .menu__list .submenu-toggle {
  position: relative;
  font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding-block: 8px;
}
.menu__list a::after, .menu__list .submenu-toggle::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.menu__list a:hover::after, .menu__list a.is-current::after, .menu__list .submenu-toggle:hover::after, .has-sub.is-open > .submenu-toggle::after { transform: scaleX(1); transform-origin: left; }

.social { display: flex; gap: 8px; }
.social a {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid currentColor; border-radius: 50%;
  transition: background-color .3s, color .3s, transform .3s var(--ease);
}
.social svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.social svg .fill { fill: currentColor; stroke: none; }
.social a:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); transform: translateY(-2px); }
.header.is-dark .social a:hover, .social--light a:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.burger { display: none; width: 44px; height: 44px; position: relative; z-index: 2; }
.burger span {
  position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor;
  transition: transform .45s var(--ease), top .45s var(--ease);
}
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 26px; }
.burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

/* ---------- ATTENTION RAIL ----------
   Delikatne kropki po lewej stronie ekranu: jedna na sekcję, linia postępu między nimi.
   W sekcji głównej pasek jest ukryty (skróty są tam w pionowej sekcji po lewej stronie hero),
   pojawia się dopiero po przewinięciu do drugiej sekcji (klasa is-visible dodawana w JS). */
.rail {
  position: fixed; left: clamp(14px, 1.8vw, 30px); top: 50%; z-index: 400;
  transform: translateY(-50%);
  height: min(52vh, 420px);
  width: 20px;
  color: var(--ink);
  opacity: 0; pointer-events: none;
  transition: color .4s, opacity .6s ease;
}
.rail.is-visible { opacity: 1; pointer-events: auto; }
.rail.is-dark { color: var(--cream); }
.rail { --rail-bg: var(--cream); }
.rail.is-dark { --rail-bg: var(--ink); }
.rail__track { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: currentColor; opacity: .18; transform: translateX(-50%); }
.rail__fill {
  position: absolute; left: 50%; top: 0; width: 1px; height: 100%;
  background: currentColor; transform-origin: top; transform: translateX(-50%) scaleY(0);
}
.rail__dots { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.rail__dots a {
  position: relative; display: block; width: 20px; height: 20px;
}
.rail__dots a::before {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  border: 1px solid currentColor; background: var(--rail-bg);
  transition: transform .4s var(--ease), background-color .4s;
}
.rail__dots a.is-current::before { background: currentColor; transform: scale(1.35); }
/* nazwa sekcji po najechaniu: na pastylce w kolorze tła, żeby była czytelna także nad dużym nagłówkiem */
.rail__dots a span {
  position: absolute; left: 28px; top: 50%; transform: translate(-6px, -50%);
  padding: 5px 11px 5px 12px; border-radius: 999px;
  background: var(--rail-bg); box-shadow: 0 0 0 1px rgba(128, 128, 128, .22);
  font-size: 11px; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transition: opacity .3s, transform .3s var(--ease);
  pointer-events: none;
}
.rail__dots a:hover span, .rail__dots a:focus-visible span { opacity: 1; transform: translate(0, -50%); }

.topbar-progress {
  position: fixed; left: 0; top: 0; z-index: 600; height: 2px; width: 100%;
  background: var(--ink); transform-origin: left; transform: scaleX(0);
  display: none;
}

/* ---------- SECTIONS ---------- */
.section {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + clamp(16px, 4vh, 48px)) clamp(32px, 6vh, 80px);
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}

.sec-head { margin-bottom: clamp(24px, 4vh, 48px); }
.sec-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.sec-head__num {
  display: block;
  font-size: 12px; font-weight: 600; letter-spacing: .35em; color: var(--muted); margin-bottom: 12px;
}
/* tytuły sekcji jak nagłówek w hero: Montserrat ExtraBold, wersaliki, duże, nadają sekcjom charakter.
   13,5vw: najdłuższy „PORTFOLIO” (6,2 em) mieści się nawet na telefonie 320 px */
.sec-head__title {
  font-family: var(--f-head); font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(40px, 13.5vw, 150px);
  line-height: .95; letter-spacing: -.015em; color: var(--ink);
}

/* ---------- MEDIA SPOŁECZNOŚCIOWE W HERO ----------
   Duże okrągłe ikony. Po najechaniu wypełniają się kolorem marki, a co kilka sekund po kolei, od lewej do prawej,
   przebiega po nich delikatny połysk w kolorze danej marki. Na komputerze lista stoi na dole ekranu, w centrum
   (blok KOMPUTER na końcu pliku); na telefonie i tablecie w pionie leży w przepływie pod kontaktem. */
.hero__social { display: flex; justify-content: center; gap: clamp(12px, 1.2vw, 20px); margin-top: clamp(18px, 3vh, 28px); --d: .6s; }
.soc {
  position: relative; isolation: isolate; overflow: hidden;
  width: var(--soc, 52px); height: var(--soc, 52px);
  display: grid; place-items: center;
  border: 1px solid currentColor; border-radius: 50%;
  color: var(--ink);
  transition: color .35s, border-color .35s, background-color .35s, transform .45s var(--ease), box-shadow .45s;
}
.soc svg { position: relative; z-index: 1; width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: filter .35s; }
.soc svg .fill { fill: currentColor; stroke: none; }
.soc--tiktok { --bg: #010101; --shine: rgba(37, 244, 238, .75); --glow: rgba(254, 44, 85, .55); }
.soc--instagram { --bg: linear-gradient(45deg, #F9CE34 0%, #EE2A7B 48%, #6228D7 100%); --shine: rgba(238, 42, 123, .7); --glow: rgba(238, 42, 123, .5); }
.soc--youtube { --bg: #FF0000; --shine: rgba(255, 0, 0, .65); --glow: rgba(255, 0, 0, .5); }
.soc--facebook { --bg: #1877F2; --shine: rgba(24, 119, 242, .7); --glow: rgba(24, 119, 242, .5); }
.soc:hover, .soc:focus-visible {
  color: #fff; border-color: transparent; background: var(--bg);
  transform: translateY(-4px) scale(1.07); box-shadow: 0 14px 26px -12px var(--glow);
}
.soc--tiktok:hover svg, .soc--tiktok:focus-visible svg { filter: drop-shadow(-1.6px -1px 0 #25F4EE) drop-shadow(1.6px 1px 0 #FE2C55); }
/* połysk: ukośny pas koloru marki przesuwa się przez ikonę, każda ikona o chwilę później niż poprzednia */
.soc::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 36%, var(--shine) 50%, transparent 64%);
  transform: translateX(-130%);
  animation: socShine 7s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .3s + 2.2s);
}
.hero__social li:nth-child(1) .soc { --i: 0; }
.hero__social li:nth-child(2) .soc { --i: 1; }
.hero__social li:nth-child(3) .soc { --i: 2; }
.hero__social li:nth-child(4) .soc { --i: 3; }
@keyframes socShine {
  0%, 62% { transform: translateX(-130%); }
  76%, 100% { transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce) { .soc::after { animation: none; display: none; } }

/* Draw Attention Line: linia, która „rysuje się” i prowadzi wzrok do treści */
.draw-line {
  display: block; height: 1px; width: clamp(80px, 14vw, 180px);
  background: currentColor; color: var(--ink);
  margin-top: clamp(18px, 3vh, 28px);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s var(--ease) .15s;
  position: relative;
}
.draw-line::after {
  content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; transform: scale(0); transition: transform .4s var(--ease) 1.2s;
}
.draw-line.is-in { transform: scaleX(1); }
.draw-line.is-in::after { transform: scale(1); }
.draw-line--center { margin-inline: auto; transform-origin: center; }

/* ---------- REVEAL ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--d, 0s);
}
h1[data-reveal], h2[data-reveal] {
  transform: translateY(48px) skewY(2deg);
  transform-origin: left bottom;
  filter: blur(6px);
  transition: opacity 1s var(--ease), transform 1.3s var(--ease), filter 1s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
h1[data-reveal].is-in, h2[data-reveal].is-in { filter: none; }
.draw-line[data-reveal] { opacity: 1; transform: scaleX(0); }
.draw-line[data-reveal].is-in { transform: scaleX(1); }

[data-stagger] > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity .9s var(--ease), transform 1s var(--ease);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: .08s; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: .16s; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: .24s; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: .32s; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: .40s; }

/* ---------- BUTTONS ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 54px; padding: 14px clamp(20px, 3vw, 30px);
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 999px;
  max-width: 100%;
  transition: color .5s var(--ease), border-color .5s;
}
.btn span { text-align: left; }
.btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .5s var(--ease); }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  transform: translateY(110%); transition: transform .6s var(--ease);
}
.btn:hover svg { transform: translateX(4px); }
.btn:hover::before { transform: translateY(0); }

.btn--dark { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn--dark::before { background: var(--cream); }
.btn--dark:hover { color: var(--ink); }
.btn--light { color: var(--ink); background: var(--cream); border-color: var(--cream); }
.btn--light::before { background: var(--ink); }
.btn--light:hover { color: var(--cream); }
.btn--line { color: var(--ink); }
.btn--line::before { background: var(--ink); }
.btn--line:hover { color: var(--cream); }
.btn--line:hover svg { transform: translateY(3px); }

/* ---------- 01 HERO ----------
   Szary gradient strony, teksty po lewej w Montserrat, po prawej postać z wyciętym tłem,
   z połową twarzy przy prawej krawędzi ekranu. */
.hero {
  --hero-accent: #6B6B6B;    /* szary akcent w nagłówku: kontrast ≥ 3,4:1 w każdym miejscu gradientu */
  --hero-text: #3A3A3A;
  --stage-h: min(92.4svh, 61.6vw);   /* wysokość postaci (twarz powiększona o 10% względem 84svh / 56vw); napis w tle skaluje się razem z nią */
  --stage-w: calc(var(--stage-h) * 1024 / 924);
  --stage-out: calc(var(--stage-w) * .485);   /* o tyle scena wystaje za prawą krawędź ekranu: oś twarzy (51,5% szerokości kadru) leży dokładnie na krawędzi, widać tylko lewą połowę twarzy */
  --title-fs: clamp(36px, 4.8vw, 96px);   /* wielkość nagłówka; opis pod nim jest jego proporcjonalną kopią */
  background: var(--gradient);
}
/* hero na całą szerokość: teksty zaczynają się przy lewej krawędzi (na wysokości logo), a nie w wąskim kontenerze */
.hero__inner { position: relative; z-index: 2; max-width: none; }
/* teksty kończą się przed słuchawkami: lewa muszla leży na 20% szerokości sceny, a scena wystaje za krawędź o --stage-out */
.hero__copy {
  max-width: min(900px, calc(100vw - var(--stage-w) * .315 - var(--gutter) - 48px));
}
.hero__title {
  font-family: var(--f-head); font-weight: 800; color: var(--ink);
  text-transform: uppercase;
  font-size: var(--title-fs);
  line-height: 1.04; letter-spacing: -.012em;
  max-width: 11em;           /* zawsze trzy linie: OD LAT TWORZĘ / HISTORIE / PISANE MUZYKĄ (łamane <br>) */
  text-wrap: balance;
}
.hero__title em, .hero__lead em { font-style: normal; color: var(--hero-accent); }

/* Wypełnienie liter: wnętrze liter nagłówka i opisu wypełnia powoli poruszająca się gradientowa „powierzchnia” w tym samym
   kolorze (czarny nagłówek zostaje czarny, szare akcenty szare), a odblaski w jasnym złocie (zamiast bieli) i cienie wędrują po literach.
   Cztery warstwy: ostry, wąski połysk, szeroki miękki odblask, ukośny pas światła i pionowy spadek (światło z góry, które
   powoli wędruje w dół). Każda warstwa jedzie w innym kierunku i na innym odcinku (paralaksa), a ruch jest wolny i płynny
   (animacje 15 s i 21 s, na przemian tam i z powrotem, bez skoków), więc litery wyglądają jak wypukła, lekko obracana
   bryła, a nie płaska plama. Pozycje X i Y animowane osobno (background-position-x/y), żeby animacje się nie zastępowały.
   To nadal zwykły tekst (bez dzielenia na litery), efekt to background-clip: text. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title, .hero__lead, .hero__title em, .hero__lead em {
    --c-lo: #000; --c-base: var(--ink); --c-top: #171613; --c-hi: #28251f; --c-spec: #766c52;
    background-image:
      linear-gradient(112deg, transparent 45.5%, var(--c-spec) 50%, transparent 54.5%),
      radial-gradient(ellipse 34% 58% at 50% 45%, var(--c-hi), transparent 72%),
      linear-gradient(112deg, transparent 37%, var(--c-hi) 50%, transparent 63%),
      linear-gradient(180deg, var(--c-top) -40%, var(--c-base) 34%, var(--c-lo) 140%);
    background-repeat: no-repeat;
    background-size: 320% 100%, 250% 160%, 270% 100%, 100% 200%;
    background-position-x: 100%, 0%, 85%, 0%;
    background-position-y: 0%, 20%, 0%, 0%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: letterGlow 15s ease-in-out infinite alternate, letterDepth 21s ease-in-out infinite alternate;
  }
  .hero__title em, .hero__lead em { --c-lo: #4a4a4a; --c-base: var(--hero-accent); --c-top: #767573; --c-hi: #807d74; --c-spec: #a39d8c; }
  /* opis jest mały, więc jego połysk jest łagodniejszy, żeby nie psuć czytelności */
  .hero__lead { --c-top: #1c1a17; --c-hi: #2b2822; --c-spec: #564e3a; }
  .hero__lead em { --c-lo: #555; --c-top: #797773; --c-hi: #827e75; --c-spec: #99937f; }
  .hero__title em:nth-of-type(1) { animation-delay: -5s, -7s; }
  .hero__title em:nth-of-type(2) { animation-delay: -11s, -3s; }
  .hero__lead { animation-delay: -6s, -10s; }
  .hero__lead em:nth-of-type(1) { animation-delay: -2s, -14s; }
  .hero__lead em:nth-of-type(2) { animation-delay: -9s, -5s; }
  .hero__title ::selection, .hero__lead ::selection, .hero__title::selection, .hero__lead::selection { -webkit-text-fill-color: var(--cream); color: var(--cream); background: var(--ink); }
  @keyframes letterGlow {
    from { background-position-x: 100%, 0%, 85%, 0%; }
    to { background-position-x: 0%, 100%, 15%, 0%; }
  }
  @keyframes letterDepth {
    from { background-position-y: 0%, 15%, 0%, 0%; }
    to { background-position-y: 0%, 85%, 0%, 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero__title, .hero__lead, .hero__title em, .hero__lead em { animation: none; }
  }
}
/* Nagłówek + opis: ramka ma szerokość najdłuższej linii nagłówka (linie są łamane <br>),
   dzięki temu na telefonie opis stoi dokładnie na środku nagłówka (na komputerze i tablecie
   opis jest wyrównany do lewej). W WordPressie: blok Grupa z nagłówkiem i akapitem. */
.hero__head { width: fit-content; max-width: 100%; }
/* Opis pod nagłówkiem to pomniejszona kopia nagłówka: ten sam krój, grubość 800, wersaliki, kolor, odstępy
   między literami i szare akcenty (<em>), wielkość = 32% wielkości nagłówka (--title-fs), więc skaluje się
   razem z nim. Szerokość opisu wyznacza nagłówek (contain: inline-size), więc blok tekstu ma szerokość
   nagłówka. Reguła „p = Lora” go nie dotyczy. */
.hero__lead {
  margin-top: clamp(18px, 3vh, 28px);
  contain: inline-size;
  text-wrap: balance;
  font-family: var(--f-head); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.012em;
  font-size: calc(var(--title-fs) * .32); line-height: 1.14;
  color: var(--ink);
  --d: .15s;
}
.hero__cta { position: relative; display: flex; width: fit-content; max-width: 100%; margin-top: clamp(28px, 5vh, 52px); --d: .3s; }

.hero__contact {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  margin-top: clamp(20px, 3vh, 32px);
  font-weight: 600;
  font-size: 14px; letter-spacing: .03em; color: var(--hero-text);
  --d: .45s;
}
.hero__contact a { border-bottom: 1px solid transparent; transition: border-color .3s; }
.hero__contact a:hover { border-color: currentColor; }

/* Scena: dosunięta do dołu sekcji i przesunięta w prawo tak, że połowa twarzy chowa się za prawą krawędzią ekranu
   (sekcja ma overflow: hidden). Proporcje = wycinek 1024x924. */
.hero__stage {
  position: absolute; right: calc(var(--stage-out) * -1); bottom: 0; z-index: 1;
  height: var(--stage-h);
  aspect-ratio: 1024 / 924;
  pointer-events: none;
}
.hero__portrait { position: absolute; inset: 0; z-index: 1; margin: 0; }
.hero__portrait img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: right bottom;
  opacity: 0; transform: translateY(40px);
  transition: opacity 1.4s var(--ease) .2s, transform 1.6s var(--ease) .2s;
}
body.is-loaded .hero__portrait img { opacity: 1; transform: none; }


/* ---------- 02 W ROLI EKSPERTA (klasy media__*, kotwica #media) ----------
   Duży tytuł, pod nim tekst, dalej szeroka ściana kadrów: najpierw telewizja
   (największe kadry), potem telewizja, prasa i wyróżnienie. Na dole pasek logotypów. */
.media {
  background: var(--cream);
  /* wysokość z treści (bez rozciągania do pełnego ekranu), więc nie powstają puste pasy nad i pod */
  min-height: 0; justify-content: flex-start;
  padding-block: calc(var(--header-h) + clamp(12px, 3vh, 36px)) clamp(28px, 5vh, 64px);
}
/* duży tytuł na całą szerokość, pod nim oba akapity obok siebie */
.media__head { margin-bottom: clamp(28px, 4.5vh, 52px); }
.media__head .sec-head { margin-bottom: clamp(20px, 3vh, 32px); }
/* Tytuł „W roli Eksperta” jest długi. Na komputerze i tablecie jego wielkość dopasowuje się do
   szerokości treści, żeby zawsze mieścił się w jednej linii (napis ma ok. 9,65 em szerokości;
   dzielnik 10 zostawia zapas na pasek przewijania). Na telefonie zostaje w standardowej
   wielkości i łamie się na „W ROLI / EKSPERTA” (twarda spacja trzyma „W roli” razem). */
.media .sec-head__title {
  font-size: clamp(40px, min(13.5vw, calc((min(100vw, var(--maxw)) - 2 * var(--gutter)) / 10)), 150px);
}
@media (max-width: 640px) {
  .media .sec-head__title { font-size: clamp(40px, 13.5vw, 150px); }
}
/* Teksty sekcji: podziękowanie Błażeja na kremowej planszy, bez ramki. Krój jak w menu i przyciskach serwisu:
   Montserrat, wersaliki z rozstawem liter (wersaliki robi CSS, w WordPressie tekst piszemy normalnie). Na telefonie i tablecie plansza leży nad
   ścianą kadrów (stage jest wtedy kolumną, tekst ma order: 0, ściana order: 1), na komputerze pośrodku ściany (blok niżej). */
.media__stage { display: flex; flex-direction: column; }
.media__wall { order: 1; }
.media__text {
  --plate-bg: #F4F2EE;
  --pr: .9em;                    /* promień rogów planszy */
  order: 0; width: 100%; max-width: 46em; margin: 0 auto clamp(28px, 4.5vh, 52px);
  padding: 2.2em 2em;
  background: var(--plate-bg); border-radius: var(--pr); box-shadow: 0 0 0 1px rgba(11, 11, 11, .06);
  text-align: center;
  font-family: var(--f-head); font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  font-size: clamp(11px, 2.7vw, 14px); line-height: 1.8; color: var(--ink);
}
.media__text p { font-family: inherit; text-wrap: balance; } /* globalne p ma Lorę, tutaj ma zostać Montserrat; balance wyrównuje długość wierszy, bez osieroconych słów */
.media__text p + p { margin-top: 1.4em; }

/* Ściana kadrów: kafelek ma proporcje swojego kadru (--ar). Podstawa = --ar × docelowa wysokość rzędu,
   wolne miejsce dzielone proporcjonalnie do --ar, więc każdy rząd ma równą wysokość, wypełnia szerokość
   i nic nie jest przycinane. --row ustala, ile kadrów mieści się w rzędzie. */
.media__wall {
  --wall-gap: clamp(8px, .9vw, 14px);
  --row: .235;
  container-type: inline-size;
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--wall-gap);
}
.wall__tile {
  flex: var(--ar) 1 calc(var(--ar) * var(--row) * 100cqw);
  aspect-ratio: var(--ar);
  min-width: 0;
}
/* kadry są zawsze w kolorze; po najechaniu kadr lekko się przybliża i dostaje cień */
.bento__tile {
  position: relative; margin: 0; overflow: hidden;
  border-radius: 14px; background: var(--grey);
  box-shadow: 0 0 0 rgba(11, 11, 11, 0);
  transition: box-shadow .7s ease;
}
.bento__tile button { display: block; width: 100%; height: 100%; }
.bento__tile button img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1);
  transition: transform 1.6s var(--ease);
}
.bento__tile:hover, .bento__tile:focus-within { box-shadow: 0 22px 44px -22px rgba(11, 11, 11, .5); }
.bento__tile:hover button img, .bento__tile:focus-within button img { transform: scale(1.035); }
/* znak stacji / redakcji w rogu kadru (zawsze w kolorze, żeby od razu było widać, gdzie to było) */
.wall__badge {
  position: absolute; left: clamp(8px, 1vw, 14px); top: clamp(8px, 1vw, 14px); z-index: 1;
  display: flex; align-items: center;
  height: clamp(34px, 3.3vw, 48px); padding-inline: clamp(9px, 1vw, 14px);
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 8px 20px -10px rgba(11, 11, 11, .5);
  pointer-events: none;
}
.wall__badge img { height: 74%; width: auto; }
.wall__badge--round { padding-inline: 4px; }
.wall__badge--round img { height: 92%; }
.wall__badge--wide img { height: 40%; }

.marquee {
  margin-top: clamp(28px, 4.5vh, 56px);
  border-block: 1px solid var(--line);
  padding-block: clamp(14px, 2.2vh, 24px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track { display: flex; align-items: center; gap: clamp(32px, 5vw, 72px); width: max-content; animation: marquee 38s linear infinite; }
.marquee__track img { height: clamp(27px, 2.7vw, 36px); width: auto; mix-blend-mode: multiply; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - clamp(16px, 2.5vw, 36px))); } }

/* Logotypy rozrzucone wokół ściany kadrów (komputer i tablet w poziomie, od 1024 px).
   JS kopiuje logotypy z paska do listy .media__logos i dodaje sekcji klasę has-logos; pasek zostaje
   wtedy tylko na węższych ekranach. Ściana stoi na środku, a po obu jej stronach jest pas na logotypy:
   na szerokich ekranach to wolne marginesy strony, na węższych ściana zwęża się, żeby pas miał
   co najmniej --band-min. Logotyp leży w pasie między ścianą a krawędzią ekranu; --fx (0..1) przesuwa go
   w wolnym miejscu pasa, --y to wysokość względem ściany, --r pochylenie. Z lewej zostaje wolny tor
   dla paska nut (--lane). */
.media__logos { display: none; }
@media (min-width: 1024px) {
  .media {
    --band-min: clamp(215px, 18.6vw, 330px);
    --wall-w: min(calc(min(100vw, var(--maxw)) - 2 * var(--gutter)), calc(100vw - 2 * var(--band-min)));
    --band: calc((100vw - var(--wall-w)) / 2);
    /* Logotypy to teraz pliki przycięte do samego znaku (wysokiej rozdzielczości, z oryginałów klienta), więc --logo-w
       to rozmiar odniesienia, a szerokość każdego logotypu = --logo-w * --k (udział znaku w dawnym kadrze 16:9).
       Rozmiar zależy od miejsca w pasie obok ściany: najszerszy znak (Polskie Radio, k = .734) musi się w nim zmieścić. */
    --logo-w: min(clamp(180px, 17vw, 300px), calc((var(--band) - var(--lane) - 26px) / .74));
    --lane: calc(clamp(14px, 1.8vw, 30px) + 36px);
    --room-l: min(345px, max(0px, calc(var(--band) - var(--lane) - 18px - var(--logo-w) * .74)));
    --room-r: min(345px, max(0px, calc(var(--band) - 42px - var(--logo-w) * .74)));
  }
  .media.has-logos { padding-bottom: calc(clamp(28px, 5vh, 64px) + 28px); }
  .media.has-logos .marquee { display: none; }
  .media.has-logos .media__stage { width: var(--wall-w); max-width: 100%; margin-inline: auto; }
  /* teksty pośrodku ściany: kremowa plansza wycina w zdjęciach miejsce na tekst; rozmiar czcionki i planszy liczony
     z szerokości ściany (cqw), więc tekst zawsze zajmuje to samo miejsce w kadrze */
  .media__stage { display: block; position: relative; container-type: inline-size; }
  .media__wall { order: 0; }
  .media__text {
    --plate-bg: var(--cream);
    --pr: 1.3cqw;
    position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 3;
    width: 52cqw; max-width: none; margin: 0; padding: 2.3cqw 2.8cqw;
    box-shadow: 0 0 0 1px rgba(11, 11, 11, .06);
    font-size: max(9.5px, 1.08cqw); line-height: 1.7; letter-spacing: .05em;
  }
  .media__text p + p { margin-top: 1.3em; }
  .media.has-logos .media__logos { display: block; position: absolute; inset: 0; pointer-events: none; }
  .media__logo {
    position: absolute; top: var(--y);
    width: calc(var(--logo-w) * var(--s, 1) * var(--k, 1));
    rotate: var(--r, 0deg);
    opacity: 0; scale: .7;
    transition: opacity .9s ease, scale 1s cubic-bezier(.34, 1.56, .64, 1);
    transition-delay: calc(var(--i, 0) * 90ms + .25s);
    animation: logoFloat var(--dur, 7s) ease-in-out var(--wait, 0s) infinite;
  }
  .media__logo img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
  /* logotypy pojawiają się po kolei, gdy ściana wjeżdża na ekran */
  .media__wall.is-in ~ .media__logos .media__logo { opacity: 1; scale: 1; }
  /* lewa strona ściany */
  .media__logo:nth-child(5) { --k: 0.556; right: calc(100% + 18px + var(--room-l) * .15); --y: 1%;  --r: -6deg; --s: 1;    --dur: 7.5s; --wait: -1s; }
  .media__logo:nth-child(2) { --k: 0.716; right: calc(100% + 18px + var(--room-l) * .9);  --y: 28%; --r: 4deg;  --s: .94;  --dur: 6.4s; --wait: -3s; }
  .media__logo:nth-child(4) { --k: 0.734; right: calc(100% + 18px + var(--room-l) * .3);  --y: 55%; --r: -3deg; --s: 1; --dur: 8.2s; --wait: -5s; }
  .media__logo:nth-child(8) { --k: 0.386; right: calc(100% + 18px + var(--room-l) * .8);  --y: 82%; --r: 6deg;  --s: .96;  --dur: 6.9s; --wait: -2s; }
  /* prawa strona ściany */
  .media__logo:nth-child(1) { --k: 0.599; left: calc(100% + 18px + var(--room-r) * .7);   --y: 6%;  --r: 5deg;  --s: 1; --dur: 7.1s; --wait: -4s; }
  .media__logo:nth-child(7) { --k: 0.435; left: calc(100% + 18px + var(--room-r) * .1);   --y: 33%; --r: -4deg; --s: .94;   --dur: 8s;   --wait: -1.5s; }
  .media__logo:nth-child(6) { --k: 0.547; left: calc(100% + 18px + var(--room-r) * .85);  --y: 60%; --r: 3deg;  --s: .98;    --dur: 6.6s; --wait: -6s; }
  .media__logo:nth-child(3) { --k: 0.682; left: calc(100% + 18px + var(--room-r) * .25);  --y: 86%; --r: -6deg; --s: .96;    --dur: 7.7s; --wait: -3.5s; }
  /* rozkład przewiduje 8 logotypów; kolejne są widoczne w pasku na telefonie */
  .media__logo:nth-child(n + 9) { display: none; }
}
/* lekkie unoszenie: kilka pikseli w górę i z powrotem, z delikatnym kołysaniem */
@keyframes logoFloat {
  0%, 100% { translate: 0 0; rotate: var(--r, 0deg); }
  50% { translate: 0 -9px; rotate: calc(var(--r, 0deg) + 1.6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .media__logo { animation: none; transition: none; }
}

/* ---------- 03 O MNIE ----------
   Po lewej nagłówek i cytat, po prawej Błażej na hokerze (wycięte tło, miękki cień na podłodze),
   pod wszystkim jasne wstęgi (assets/ribbons.webp). */
.about {
  --about-edge: #D4CCC4;
  --copy-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  --copy-w: min(620px, calc(40vw + 40px));
  background: linear-gradient(90deg, var(--cream) 0%, var(--cream) 34%, var(--about-edge) 72%);
}
.about::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../assets/ribbons.webp") 0% 70% / cover no-repeat;
  opacity: .75;
}
/* zdjęcie wypełnia pole na prawo od tekstu: tak wysokie, jak się da (do 92% ekranu),
   stoi na dole sekcji i jest wyśrodkowane w wolnym miejscu */
.about__portrait {
  position: absolute; z-index: 0; margin: 0;
  bottom: 0; height: min(94%, 92svh);
  left: calc(var(--copy-left) + var(--copy-w) + 24px);
  right: var(--copy-left);
  pointer-events: none;
}
.about__portrait[data-reveal] { transform: translateY(24px); transition: opacity 1.4s var(--ease), transform 1.6s var(--ease); }
.about__portrait[data-reveal].is-in { transform: none; }
.about__portrait img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }

.about__grid { position: relative; z-index: 1; }
/* kolumna po lewej, wszystko wyśrodkowane: duży nagłówek „O mnie” i pod nim cytat */
.about__copy { max-width: var(--copy-w); text-align: center; }
.about__head { display: grid; justify-items: center; }
.about__title {
  font-family: var(--f-head); font-weight: 800; color: var(--ink);
  text-transform: uppercase;
  font-size: clamp(48px, 18vw, 150px); line-height: .95; letter-spacing: -.01em;
}
/* Całość to jedna wypowiedź Błażeja: jeden krój (Lora), większe odstępy między akapitami,
   pogrubiona tylko funkcja Dyrektora Artystycznego. Nad tekstem duży znak cudzysłowu. */
.about__quote {
  position: relative;
  margin: clamp(22px, 3.5vh, 40px) auto 0;
  font-family: var(--f-text); font-weight: 400;
  font-size: clamp(16.5px, 1.2vw, 19px); line-height: 1.8; color: #3A3A3A;
}
.about__quote::before {
  content: "\201C"; display: block;
  height: .5em; margin-bottom: .12em;
  font-family: var(--f-text); font-weight: 600;
  font-size: clamp(72px, 7vw, 110px); line-height: 1; color: rgba(11, 11, 11, .2);
}
.about__quote p + p { margin-top: 1.5em; }
.about__quote strong { font-weight: 600; color: var(--ink); }

/* ---------- 04 VALUES ---------- */
.values { background: var(--ink); color: rgba(236, 235, 232, .78); isolation: isolate; }
/* Beams: canvas liczony w niskiej rozdzielczości, rozmyty w CSS (działa też w Safari) */
.values__beams {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  filter: blur(22px);
  opacity: 0; transition: opacity 2s ease;
  pointer-events: none;
}
.values__beams.is-on { opacity: 1; }
/* przyciemnienie krawędzi + delikatne „oddychanie”, całość zostaje w najciemniejszych tonach */
.values::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 55% 50%, rgba(11, 11, 11, 0) 0%, rgba(11, 11, 11, .55) 70%, rgba(11, 11, 11, .9) 100%);
  animation: beamsBreath 10s ease-in-out infinite;
}
@keyframes beamsBreath { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.values__grid { position: relative; z-index: 1; }
.values strong { color: var(--cream); }
/* karuzela dostaje szerszą kolumnę, żeby duże zdjęcie mieściło się prawie bez przycinania boków;
   kolumna tekstu jest na tyle szeroka, że tytuł „DOBRY NASTRÓJ” zostaje w jednej linii */
.values__grid {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); max-width: min(1560px, 100%);
  gap: clamp(32px, 4.5vw, 72px); align-items: center;
}
/* Karuzela 3D: zdjęcia jako ściany obracającego się graniastosłupa. Środkowe stoi przodem,
   boczne odchodzą w głąb i są przygaszone. Położenie, kąt i przygaszenie każdego zdjęcia ustawia JS
   (przeciąganie, dociąganie do środka, samoczynny obrót), tak samo wymiary na komputerze:
   wysokość jak lista tekstów obok (--tile-h) i wyjście w lewo poza kolumnę (--bleed).
   Wartości poniżej to wymiary dla telefonu i wersja bez JS. */
.values__carousel {
  container-type: inline-size;
  position: relative;
  width: calc(100% + var(--bleed, 0px) + var(--bleed-r, 0px)); margin-left: calc(var(--bleed, 0px) * -1);
  cursor: grab; touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
.values__carousel.is-dragging { cursor: grabbing; }
.values__carousel:focus { outline: none; }
.values__carousel:focus-visible { outline: 1px solid rgba(236, 235, 232, .55); outline-offset: 10px; border-radius: 18px; }
.carousel__track {
  /* wysokość środkowego zdjęcia: mieści się w ekranie, a razem z wystającymi bokami w szerokości kolumny */
  --tile-h: clamp(250px, min(62svh, 96cqw), 600px);
  position: relative; height: calc(var(--tile-h) + 16px);
  perspective: 1200px;
}
.carousel__item {
  position: absolute; left: 50%; top: 50%;
  height: var(--tile-h); aspect-ratio: var(--ar, .75);
  translate: -50% -50%;
  border-radius: 16px; overflow: hidden; background: var(--ink-2);
  box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .9);
  will-change: transform, opacity;
}
.carousel__item:not(:first-child) { opacity: 0; }   /* bez JS widać pierwsze zdjęcie */
.carousel__item img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; -webkit-user-drag: none;
}
/* Oferta: karty „spotlight” (motyw: Spotlight Cards, KokonutUI, MIT) w fiolecie (jeden kolor dla wszystkich kart: --accent-rgb i --icon w .value__card).
   Karta ma ledwo widoczną poświatę w swoim kolorze (--accent-rgb), a po najechaniu: poświata podąża za kursorem,
   karta lekko się przechyla (JS ustawia --rx, --ry, --mx, --my), przesuwa się połysk, rośnie linia u dołu,
   a pozostałe karty przygasają. Na telefonie i bez myszy zostaje sama poświata. Tytuły i napisy jak w całym serwisie:
   Montserrat ExtraBold wersalikami (tytuły), Lora (opisy). */
.values__copy { display: grid; gap: clamp(12px, 2vh, 22px); }
/* nagłówek sekcji stoi na górze, wyśrodkowany, nad karuzelą i kartami */
.values__top { position: relative; z-index: 1; margin-bottom: clamp(28px, 5.5vh, 60px); text-align: center; }
.values__intro { max-width: none; margin-inline: auto; }
.values__intro p { max-width: 46em; margin-inline: auto; }
/* zdanie pod dużym nagłówkiem: ten sam krój co nagłówki (Montserrat), lżejszy i mniejszy */
.values__intro .values__intro-text, .values__top .values__intro p { margin-top: clamp(16px, 2.6vh, 28px); font-family: var(--f-head); font-weight: 600; font-size: clamp(15px, 1.25vw, 20px); line-height: 1.6; letter-spacing: .005em; color: rgba(236, 235, 232, .8); }
.values__intro-title {
  font-family: var(--f-head); font-weight: 800; color: var(--cream); text-transform: uppercase;
  font-size: clamp(30px, 8.6vw, 54px); line-height: 1; letter-spacing: -.012em; text-wrap: balance;   /* ten sam krój i charakter co tytuły sekcji (Montserrat 800, wersaliki), wielkość dobrana do długiego zdania */
}
.values__intro p { margin-top: 10px; font-size: clamp(14.5px, .98vw, 16px); line-height: 1.65; }

.values__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, .8vw, 12px);
  list-style: none; margin: 0; padding: 0;
}
.value { position: relative; min-width: 0; }
.value--wide { grid-column: 1 / -1; }
.value__card {
  --accent-rgb: 118, 78, 222; --icon: #b29cf6; --mx: 20%; --my: 20%;
  position: relative; isolation: isolate; overflow: hidden; height: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
  padding: clamp(16px, 1.5vw, 26px) clamp(18px, 1.7vw, 30px);
  border: 1px solid rgba(236, 235, 232, .09); border-radius: clamp(14px, 1.2vw, 20px);
  background:
    linear-gradient(to right, rgba(var(--accent-rgb), .55), transparent) left bottom / 0 2px no-repeat,
    radial-gradient(ellipse at 20% 20%, rgba(var(--accent-rgb), .2), transparent 68%),
    rgba(236, 235, 232, .035);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .22s ease-out, border-color .3s, background-size .5s ease, opacity .3s, scale .3s;
}
/* poświata za kursorem */
.value__card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(var(--accent-rgb), .22), transparent 65%);
  opacity: 0; transition: opacity .3s;
}
/* połysk przesuwający się po najechaniu */
.value__card::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
  transform: translateX(-100%) skewX(-12deg); transition: transform .7s ease-out;
}
.value__text { position: relative; z-index: 1; }
/* nagłówki kart w kroju nagłówka hero strony głównej (Montserrat 800, wersaliki, ciasny odstęp, line-height ok. 1), opis pod nimi w tym samym kroju,
   ale mniejszy i lżejszy (Montserrat 600, normalna wielkość liter, żeby dłuższe teksty dało się czytać) */
.value__title {
  font-family: var(--f-head); font-weight: 800; color: var(--cream); text-transform: uppercase;
  font-size: clamp(19px, 1.9vw, 31px); line-height: 1.04; letter-spacing: -.012em;
}
.value p { margin-top: clamp(8px, 1vw, 12px); font-family: var(--f-head); font-weight: 600; font-size: clamp(13.5px, .98vw, 16px); line-height: 1.6; letter-spacing: .005em; color: rgba(236, 235, 232, .8); }
/* wyróżnione nazwy programów (np. „The Voice of Poland”) stoją w osobnym akapicie na dole kafelka: jaśniejsze i grubsze, bez podkreślenia */
.value p .value__hl { font-weight: 700; color: #E0C27A; }
.value p.value__shows { margin-top: .7em; }
@media (hover: hover) and (pointer: fine) {
  .value__card:hover { border-color: rgba(236, 235, 232, .22); background-size: 100% 2px, 100% 100%, auto; }
  .value__card:hover::before { opacity: 1; }
  .value__card:hover::after { transform: translateX(280%) skewX(-12deg); }
  .values__list:has(.value:hover) .value:not(:hover) .value__card { opacity: .5; scale: .96; }
}
@media (prefers-reduced-motion: reduce) {
  .value__card, .value__card::before, .value__card::after { transition: none; }
}
/* niski ekran komputera (do 800 px wysokości): ciaśniejsze odstępy, żeby sekcja z powiększonym nagłówkiem nadal mieściła się na ekranie */
@media (min-width: 961px) and (max-height: 800px) {
  .values__copy { gap: 12px; }
  .values__intro p { margin-top: 7px; }
  .value__card { padding: 12px 16px; }
}
.values__more { font-size: clamp(13.5px, .9vw, 15px); line-height: 1.65; color: rgba(236, 235, 232, .6); }
.values__more a { color: var(--cream); border-bottom: 1px solid rgba(236, 235, 232, .4); transition: border-color .3s; white-space: nowrap; }
.values__more a:hover { border-color: var(--cream); }

/* ---------- 05 PORTFOLIO ---------- */
.portfolio { background: var(--paper); justify-content: flex-start; }
/* Filtry jako „morphic navbar” (motyw: MorphicNavbar, KokonutUI):
   nieaktywne tworzą jeden pasek, aktywny odrywa się, zaokrągla i robi się czarny.
   Klasy is-round-l / is-round-r / is-row-start / is-row-end nadaje JS (działa też przy zawijaniu). */
.filters { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; }
.filter {
  padding: 10px 18px; min-height: 40px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  background: rgba(11, 11, 11, .06); color: var(--ink);
  border-radius: 0; margin-inline: 0;
  transition: margin .4s var(--ease), border-radius .4s var(--ease), background-color .35s ease, color .35s ease;
}
.filter.is-round-l { border-top-left-radius: 20px; border-bottom-left-radius: 20px; }
.filter.is-round-r { border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
.filter:hover { background: rgba(11, 11, 11, .11); }
.filter.is-active {
  background: var(--ink); color: var(--cream);
  border-radius: 20px; margin-inline: 8px;
}
.filter.is-active.is-row-start { margin-left: 0; }
.filter.is-active.is-row-end { margin-right: 0; }

/* Bento grid: rozmiary kafelków (b = 2x2, w2 = szeroki, t = wysoki, w4 = pełna szerokość)
   nadaje JS według widocznych zdjęć, tak żeby każdy blok był pełny i bez dziur */
.gallery {
  position: relative;   /* w galerii leżą też kopie znikających zdjęć na czas ruchu (js/gallery-motion.js) */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 15vw, 240px);
  grid-auto-flow: dense;
  gap: clamp(8px, 1vw, 14px);
}
.gallery__item { min-width: 0; }
.gallery__item.bento-b { grid-column: span 2; grid-row: span 2; }
.gallery__item.bento-w2 { grid-column: span 2; }
.gallery__item.bento-t { grid-row: span 2; }
.gallery__item.bento-w4 { grid-column: 1 / -1; }
.gallery__item.bento-bt { grid-column: 1 / -1; grid-row: span 3; }
.gallery__item.is-hidden, .gallery__item.is-extra { display: none; }
.gallery__item button {
  position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: var(--grey);
  border-radius: 14px;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
/* Zdjęcie w kafelku o innej orientacji (np. pion w poziomym kafelku): pokazane w całości,
   wolne pola wypełnia jego rozmyta, przyciemniona kopia (adres zdjęcia JS wpisuje jako tło przycisku). */
.gallery__item.is-fit button { background-size: 0 0; background-repeat: no-repeat; }
.gallery__item.is-fit button::before {
  content: ""; position: absolute; inset: -32px;
  background-image: inherit; background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: blur(22px) brightness(.5) saturate(.9);
}
.gallery__item.is-fit img { position: relative; object-fit: contain; }
.gallery__tag {
  position: absolute; left: 12px; bottom: 12px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(11, 11, 11, .72); color: var(--cream);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease);
}
.gallery__item button:hover img, .gallery__item button:focus-visible img { transform: scale(1.07); }
.gallery__item button:hover .gallery__tag, .gallery__item button:focus-visible .gallery__tag { opacity: 1; transform: none; }
.gallery__more { display: flex; justify-content: center; margin-top: clamp(24px, 4vh, 48px); }
.gallery__more.is-hidden { display: none; }

/* ---------- 06 CONTACT ---------- */
.contact { background: var(--ink); color: var(--cream); text-align: center; padding-bottom: 0; }
.contact__glow {
  position: absolute; left: 50%; top: 45%; width: min(120vw, 1100px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(236, 235, 232, .10), transparent 60%);
  pointer-events: none;
}
.contact__inner { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; justify-content: center; }
.contact__logo { width: clamp(52px, 6vw, 80px); filter: invert(1); margin-bottom: clamp(20px, 4vh, 40px); }
.contact .sec-head__num { color: rgba(236, 235, 232, .5); }
.contact__title {
  font-family: var(--f-head); font-weight: 800; text-transform: uppercase;
  font-size: clamp(48px, 16vw, 200px); line-height: .95; letter-spacing: -.015em; color: var(--cream);
}
.contact .draw-line { color: var(--cream); }
.contact__list { margin-block: clamp(24px, 5vh, 48px); display: grid; gap: 6px; }
.contact__link {
  display: inline-block;
  font-family: var(--f-head); font-weight: 600;
  font-size: clamp(20px, 2.6vw, 38px); line-height: 1.35; letter-spacing: -.01em;
  overflow-wrap: anywhere;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size .6s var(--ease);
}
.contact__link:hover { background-size: 100% 1px; }
.contact__label { font-size: .45em; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; opacity: .6; vertical-align: middle; }
.social--light { margin-top: clamp(24px, 4vh, 40px); color: var(--cream); }
.footer {
  position: relative;
  margin-top: clamp(32px, 6vh, 64px);
  padding: 20px var(--gutter) calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-light);
  font-size: 12px; letter-spacing: .08em; color: rgba(236, 235, 232, .55);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px;
}
.footer p { font-family: inherit; }
/* podpis wykonawcy: znak i nazwa NikPage z odnośnikiem do nikpage.pl */
.footer__credit { display: inline-flex; align-items: center; gap: 10px; color: inherit; transition: color .3s; }
.footer__credit img { width: 24px; height: 24px; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.footer__credit-name {
  font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--cream);
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size .5s var(--ease);
}
.footer__credit-name b { font-weight: 800; }
.footer__credit:hover, .footer__credit:focus-visible { color: rgba(236, 235, 232, .85); }
.footer__credit:hover img, .footer__credit:focus-visible img { transform: rotate(-8deg) scale(1.1); }
.footer__credit:hover .footer__credit-name, .footer__credit:focus-visible .footer__credit-name { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) { .footer__credit img { transition: none; } }
/* telefon: prawa autorskie i podpis jeden pod drugim, oba na środku jak reszta sekcji Kontakt */
@media (max-width: 767px) { .footer { justify-content: center; } }

/* ---------- LIGHTBOX ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(11, 11, 11, .94);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  padding: clamp(12px, 3vw, 40px);
  opacity: 0; transition: opacity .4s;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__fig { display: grid; justify-items: center; gap: 12px; min-width: 0; }
.lightbox__fig img { max-height: 82svh; width: auto; max-width: 100%; object-fit: contain; }
.lightbox__fig figcaption { color: rgba(236, 235, 232, .7); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.lightbox button { color: var(--cream); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; transition: background-color .3s; }
.lightbox button:hover { background: rgba(236, 235, 232, .12); }
.lightbox svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.lightbox__close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; }

/* =========================================================
   RESPONSYWNOŚĆ
   ========================================================= */
@media (min-width: 768px) {
  /* ramka tekstów obejmuje tylko swoją zawartość (hug content), nie rozciąga się nad zdjęciem */
  .hero__copy { width: fit-content; }
}

@media (min-width: 1200px) {
}

@media (max-width: 1023px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(130px, 34vw, 280px); }
  .gallery__item button { border-radius: 12px; }
}

/* W roli Eksperta na telefonie: tekst pod tytułem, szeroki kadr z Pytania na śniadanie na górze,
   potem po dwa i po trzy kadry w rzędzie */
@media (max-width: 767px) {
  .media__wall { --row: .34; }
  .wall__tile--lead { order: -1; }
  .wall__badge { height: 28px; padding-inline: 9px; left: 8px; top: 8px; }
}

@media (max-width: 1100px) {
  .rail { display: none; }
  .topbar-progress { display: block; }
}

@media (max-width: 960px) {
  .burger { display: block; }
  .menu {
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; justify-content: center; gap: 40px;
    background: var(--ink); color: var(--cream);
    padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
    clip-path: circle(0 at calc(100% - 44px) 32px);
    visibility: hidden;
    transition: clip-path .8s var(--ease-io), visibility 0s .8s;
  }
  .menu.is-open { clip-path: circle(150% at calc(100% - 44px) 32px); visibility: visible; transition: clip-path .8s var(--ease-io); }
  .menu__links { flex-direction: column; gap: 4px; }
  .menu__list { flex-direction: column; align-items: center; gap: 4px; }
  .menu__list a, .menu__list .submenu-toggle {
    font-size: clamp(26px, 7vw, 40px); font-weight: 800;
    letter-spacing: .01em;
  }
  .menu .social a:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
  body.menu-open .header { color: var(--cream); }
  body.menu-open .header::before { opacity: 0; }
  body.menu-open .header__logo img { filter: invert(1); }
  .burger { color: inherit; }

  .values__grid { grid-template-columns: minmax(0, 1fr); }
  /* telefon/tablet: nagłówek „O mnie”, pod nim zdjęcie Błażeja, pod nim cytat na tle wstęg */
  .about { background: var(--about-edge); }
  .about::before { background-size: 240% auto; background-position: 30% 100%; }
  .about__grid, .about__copy { display: contents; }
  .about__head { order: 1; padding-inline: var(--gutter); }
  .about__portrait {
    order: 2; position: relative; inset: auto;
    height: clamp(420px, 60svh, 640px); width: auto; aspect-ratio: 720 / 1840;
    margin: clamp(18px, 4vw, 32px) auto 0;
  }
  .about__quote {
    order: 3; z-index: 1;
    width: 100%; max-width: 640px;
    margin: clamp(22px, 5vw, 40px) auto 0; padding-inline: var(--gutter);
  }
  /* telefon i tablet w pionie: karuzela nad listą wartości, zdjęcie trochę niższe, żeby lista była blisko */
  .carousel__track { --tile-h: clamp(250px, min(54svh, 96cqw), 520px); }
}

@media (max-width: 640px) {
  .gallery__tag { display: none; }
  .sec-head--row { flex-direction: column; align-items: flex-start; }
  .filter { padding: 8px 12px; font-size: 11px; letter-spacing: .08em; }
  .filter.is-active { margin-inline: 6px; }
  .btn { width: 100%; justify-content: space-between; }
  .contact .btn { width: auto; }
  .lightbox { grid-template-columns: minmax(0, 1fr); }
  .lightbox__nav { position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); }
  .lightbox__nav--prev { left: calc(50% - 60px); }
  .lightbox__nav--next { right: calc(50% - 60px); }
  .values__list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 380px) {
  .contact .btn { width: 100%; }
  .social a { width: 34px; height: 34px; }
}

/* Telefon i każde wysokie okno poniżej 1200 px (tablet w pionie, wąskie okno przeglądarki): twarz zawsze po prawej, obok tekstu, nigdy pod nim.
   Połowa twarzy Błażeja przy prawej krawędzi ekranu, na całą wysokość od nagłówka strony do dołu (głowa w całości, bez maski u góry).
   Po lewej stronie twarzy kolumna tekstu: nagłówek i opis, wyrównane do lewej. Szerokość kolumny to ekran minus zasłonięta
   twarz, a nagłówek skaluje się płynnie razem z nią (--title-fs), więc nigdy nie zachodzi na zdjęcie.
   U dołu ciemny gradient na marynarce niesie jasny przycisk i jasny kontakt. */
@media (orientation: portrait) and (max-width: 767px), (max-width: 699px) and (min-height: 521px), (max-aspect-ratio: 9/10) and (max-width: 1199px) {
  :root { --fade-h: clamp(64px, 9vh, 90px); --fade-w: clamp(70px, 10vh, 110px); }
  .hero {
    justify-content: flex-start;
    --hero-h: 100svh;
    /* wysokość zdjęcia: twarz +10% (192,5% szerokości ekranu zamiast 175%), ale najwyżej od nagłówka strony do dołu ekranu,
       żeby głowa zawsze była widoczna w całości (na niskich telefonach powiększenie jest przez to mniejsze niż 10%) */
    --stage-h: min(calc(var(--hero-h) - var(--header-h) - 12px), 192.5vw);
    /* kolumna tekstu: od lewego marginesu do lewej muszli słuchawek (20% kadru telefonu 1017:1162, którego oś twarzy leży na prawej krawędzi) */
    --col-w: calc(100vw - var(--gutter) - var(--stage-h) * 1017 / 1162 * .315 - 14px);
    /* najszersze słowo nagłówka (HISTORIE) ma ok. 4,9 em: nagłówek jest tak duży, żeby się w kolumnie mieścił, najwyżej 9,8vw */
    --title-fs: min(9.8vw, calc(var(--col-w) / 4.95));
    min-height: 100vh; min-height: var(--hero-h);
    padding-bottom: calc(24px + var(--fade-h) * .5 + env(safe-area-inset-bottom));
  }
  /* bez jasnej mgły pod tytułem: zdjęcie samo zaczyna się pod tytułem (maska na .hero__portrait), nic nie leży za tekstem */
  /* ciemny gradient na marynarce pod przyciskiem i kontaktem */
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(to top, rgba(11, 11, 11, .9) 0, rgba(11, 11, 11, .6) 120px, rgba(11, 11, 11, 0) 240px);
  }
  .hero__inner { z-index: 3; flex: 1; display: flex; flex-direction: column; margin-bottom: 0; }
  .hero__copy { flex: 1; display: flex; flex-direction: column; max-width: none; }
  /* nagłówek i opis w jednej kolumnie po lewej stronie twarzy (grupa ma szerokość kolumny, tytuł zawija się w niej na słowach) */
  .hero__head { width: var(--col-w); max-width: none; }
  .hero__lead { margin-top: clamp(14px, 2.4vh, 22px); text-align: left; font-size: max(10.5px, calc(var(--title-fs) * .36)); }
  /* przycisk stoi tuż pod opisem, w kolumnie tekstu po lewej stronie twarzy (napis zawija się w kilku liniach); kontakt i ikony zostają na dole */
  .hero__cta { width: var(--col-w); max-width: 100%; margin-top: clamp(16px, 2.6vh, 26px); }
  .hero .btn { width: 100%; min-height: 0; gap: 8px; padding: 12px 14px 12px 18px; line-height: 1.25; white-space: normal; border-radius: 28px; }
  .hero .btn--dark { font-size: clamp(9.5px, calc(var(--col-w) * .075), 12.5px); letter-spacing: .04em; }   /* ciemny przycisk: leży na jasnym tle obok twarzy */
  .hero__contact { color: var(--cream); margin-top: auto; }
  .hero .hero__social { margin-top: 18px; --soc: clamp(52px, 15vw, 64px); gap: clamp(12px, 3.6vw, 18px); justify-content: center; }
  .hero .soc { color: var(--cream); }
  .hero__stage {
    position: absolute; top: auto; right: auto; bottom: 0;
    height: var(--stage-h); width: calc(var(--stage-h) * 1017 / 1162);
    /* kadr telefonu 1017:1162, oś twarzy na 51,5% jego szerokości leży na prawej krawędzi ekranu: widać lewą połowę twarzy */
    left: calc(100% - var(--stage-h) * 1017 / 1162 * .515);
    margin: 0;
  }
  /* lewy brzeg kadru (ucięta krawędzią zdjęcia marynarka) wygaszany, bez ostrej pionowej krawędzi; głowa jest widoczna w całości */
  .hero__portrait {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 100%);
  }
}

/* Wysokie okno od 700 do 1199 px (tablet w pionie, wąskie okno przeglądarki): wysokość hero jest stała względem szerokości
   (ekran wyższy niż kompozycja nie rozciąga hero, więc twarz nie ucieka w dół), a przycisk, kontakt i ikony stoją
   pod opisem w kolumnie po lewej, ciemne (bez ciemnego gradientu u dołu, bo nic nie leży na marynarce). */
@media (max-aspect-ratio: 9/10) and (min-width: 700px) and (max-width: 1199px) {
  .hero {
    --hero-h: min(100svh, calc(125vw + var(--header-h) + 12px));
    --stage-h: min(calc(var(--hero-h) - var(--header-h) - 12px), 125vw);
  }
  .hero::after { display: none; }
  .hero__cta { width: fit-content; margin-top: clamp(22px, 3.4vw, 34px); }
  .hero .btn { width: auto; min-height: 54px; padding: 14px 26px; gap: 14px; border-radius: 999px; font-size: clamp(12.5px, 1.6vw, 15px); }
  .hero__contact { color: var(--hero-text); margin-top: clamp(20px, 3vw, 30px); font-size: clamp(14px, 1.8vw, 17px); }
  .hero .hero__social { justify-content: flex-start; margin-top: clamp(18px, 2.6vw, 26px); --soc: clamp(52px, 7vw, 64px); }
  .hero .soc { color: var(--ink); }
}

/* Bardzo niski telefon (np. 320×568): hero trochę wyższe niż ekran, żeby tekst, twarz i przycisk się nie nakładały */
@media (orientation: portrait) and (max-width: 767px) and (max-height: 619px) {
  .hero { --hero-h: 680px; }
}

/* Niski ekran poziomy (telefon w poziomie) */
@media (max-height: 520px) and (orientation: landscape) {
  .section { min-height: auto; }
}

/* =========================================================
   KOMPUTER: układ w czterech pionowych częściach
   (od 1200 px szerokości albo od 961 px, gdy okno nie jest wyraźnie wyższe niż szerokie, jak w układzie piętrowym)
   1. część: pionowa sekcja ze skrótami i powiększonym logo na środku
   2. część: nagłówek, opis, przycisk i kontakt
   3. i 4. część: zdjęcie z połową twarzy przy prawej krawędzi
   Na dole w centrum ikony mediów społecznościowych.
   Po przewinięciu (body.is-away) pionowa sekcja znika, a skróty wracają na górny pasek, wyśrodkowany,
   z logo na samym środku między skrótami.
   ========================================================= */
@media (min-width: 1200px), (min-width: 961px) and (min-aspect-ratio: 91/100) {
  /* górny pasek: skróty po obu stronach logo, logo dokładnie na środku; w sekcji głównej pasek jest ukryty */
  .header { transition: color .4s, transform .6s var(--ease), opacity .5s ease, visibility 0s; }
  body:not(.is-away) .header { transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none; transition: color .4s, transform .6s var(--ease), opacity .4s ease, visibility 0s .6s; }
  .header__logo, .menu .social { display: none; }
  .menu { flex: 1; justify-content: center; }
  .menu__links { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; width: 100%; }
  .menu__list--l { justify-self: end; margin-right: clamp(28px, 3.4vw, 64px); }
  .menu__list--r { justify-self: start; margin-left: clamp(28px, 3.4vw, 64px); }
  .menu__logo { display: block; }
  .menu__logo img { display: block; height: clamp(40px, 5vh, 50px); width: auto; transition: filter .4s; }
  .header.is-dark .menu__logo img { filter: invert(1); }

  /* 1. część: pionowa sekcja: powiększone logo, pod nim skróty; całość wyśrodkowana w pionie */
  .hero__side {
    position: absolute; left: 0; top: 0; bottom: 0; width: 25vw; z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(28px, 7vh, 76px);
    border-right: 1px solid var(--line);
    transition: opacity .5s ease, transform .7s var(--ease), visibility 0s;
  }
  body.is-away .hero__side { opacity: 0; transform: translateX(-28px); visibility: hidden; pointer-events: none; transition: opacity .4s ease, transform .6s var(--ease), visibility 0s .6s; }
  .hero__side-list { display: grid; gap: clamp(10px, 1.9vh, 18px); text-align: center; }
  .hero__side-list a, .hero__side-list .submenu-toggle {
    position: relative; display: inline-block;
    font-size: clamp(12px, 1.05vw, 16px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding-block: 6px;
  }
  .hero__side-list a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: right;
    transition: transform .5s var(--ease);
  }
  .hero__side-list a:hover::after, .hero__side-list a.is-current::after { transform: scaleX(1); transform-origin: left; }
  .hero__side-logo { display: block; }
  .hero__side-logo img { display: block; width: clamp(76px, 8vw, 132px); height: auto; transition: transform .8s var(--ease); }
  .hero__side-logo:hover img { transform: scale(1.06) rotate(-3deg); }

  /* 2. część: teksty. Szerokość kolumny wyznacza wielkość nagłówka (najszersze słowo HISTORIE ma ok. 4,9 em),
     ale też wysokość okna, żeby pięć linii nagłówka, opis, przycisk i kontakt zmieściły się nad ikonami */
  .hero {
    /* stała wysokość hero: pełny ekran, ale nie więcej niż wynika z szerokości (kompozycja ma proporcje ok. 3:2). W oknie wyższym niż to hero nie rozciąga się,
       więc twarz zostaje na wysokości tekstu i nagłówka, a nie ląduje na dole pustego ekranu */
    --hero-h: min(100svh, 66.7vw);
    --hv: calc(var(--hero-h) / 100);   /* 1% wysokości hero (zamiast vh: odstępy liczone z hero, a nie z okna) */
    --stage-h: min(calc(var(--hero-h) * .924), 61.6vw);
    min-height: var(--hero-h);
    --ts: 1.25;   /* nagłówek, opis, przycisk i kontakt są o 25% większe (tylko komputer) */
    --col-pad: clamp(14px, 2vw, 40px);
    --col-shift: 4vw;   /* teksty przesunięte w prawo od linii dzielącej 1. część (nie przy samej kresce) */
    --col-w: calc((25vw - 2 * var(--col-pad)) * var(--ts));
    --reserve: calc(clamp(104px, calc(var(--hv) * 12), 140px) + 12px);   /* miejsce pod tekstami na ikony mediów społecznościowych */
    /* wielkość nagłówka: najwyżej tyle, ile mieści kolumna (najszersze słowo HISTORIE ma ok. 4,9 em),
       i najwyżej tyle, żeby cały blok tekstów (pięć linii nagłówka, opis, przycisk, kontakt) zmieścił się nad ikonami */
    --title-fs: min(calc(96px * var(--ts)), calc(var(--col-w) / 4.95), calc((var(--hero-h) - var(--header-h) - clamp(12px, calc(var(--hv) * 3), 36px) - var(--reserve) - 205px) / 7.02));
    padding-block: calc(var(--header-h) + clamp(12px, calc(var(--hv) * 3), 36px)) var(--reserve);
  }
  /* na niższym hero powiększenie jest mniejsze, bo zabrakłoby miejsca nad ikonami (pełne +25% od 1000 px wysokości hero;
     wysokość hero to mniejsza z wysokości okna i 66,7% jego szerokości, stąd warunki na szerokość: 1499, 1349 i 1199 px) */
  @media (max-height: 999px), (max-width: 1499px) { .hero { --ts: 1.18; } }
  @media (max-height: 899px), (max-width: 1349px) { .hero { --ts: 1.1; } }
  @media (max-height: 799px), (max-width: 1199px) { .hero { --ts: 1; } }
  /* szeroki i niski ekran (proporcje okna co najmniej 2,1:1): kolumna tekstów zajmuje całe wolne miejsce między menu a twarzą (do 1200 px), nagłówek układa się
     w trzech liniach (OD LAT TWORZĘ / HISTORIE / PISANE MUZYKĄ, łamane <br>) zamiast pięciu, więc wysokość hero pozwala na dużo większe litery;
     ogranicza je już tylko wysokość hero (cztery i pół em na nagłówek z opisem + stałe odstępy) i szerokość wolnego miejsca (najdłuższa linia ma ok. 8,8 em).
     Opis, przycisk, kontakt i ikony social skalują się razem z nagłówkiem. */
  @media (min-aspect-ratio: 21/10) {
    .hero {
      --ts: 1.25;
      --col-w: min(calc(100vw - var(--stage-w) * .315 - var(--gutter) - 48px - 25vw - var(--col-pad) - var(--col-shift)), 1200px);
      --title-fs: min(150px, calc(var(--col-w) / 9.2), calc((var(--hero-h) - var(--header-h) - clamp(12px, calc(var(--hv) * 3), 36px) - var(--reserve) - 225px) / 4.5));
    }
    .hero__social { width: calc(var(--title-fs) * 8.8); }
  }
  .hero__inner { position: static; padding-left: calc(25vw + var(--col-pad) + var(--col-shift)); padding-right: 0; }
  .hero__copy { width: var(--col-w); max-width: none; }
  .hero__cta { width: 100%; margin-top: clamp(28px, calc(var(--hv) * 5), 52px); }
  .hero__lead { margin-top: clamp(18px, calc(var(--hv) * 3), 28px); }
  .hero .btn { font-size: calc(clamp(10px, .76vw, 13px) * var(--ts)); padding-inline: calc(clamp(14px, 1.3vw, 26px) * var(--ts)); min-height: calc(54px * var(--ts)); letter-spacing: .05em; white-space: normal; text-align: left; justify-content: space-between; }
  .hero__contact { font-size: calc(14px * var(--ts)); margin-top: clamp(20px, calc(var(--hv) * 3), 32px); }

  /* media społecznościowe: na dole, wyśrodkowane względem szerokości tekstu nagłówka (najszersze słowo HISTORIE ma ok. 4,9 em) */
  .hero__social { position: absolute; left: calc(25vw + var(--col-pad) + var(--col-shift)); width: calc(var(--title-fs) * 4.9); right: auto; bottom: max(clamp(20px, calc(var(--hv) * 4.5), 48px), calc(var(--fade-h) * .4)); margin-top: 0; z-index: 3; --soc: clamp(48px, 3.4vw, 64px); }
}

/* =========================================================
   PODMENU „OFERTA” i SEKCJA SKRÓTÓW POD HERO
   „Oferta” to przycisk (nie link): po kliknięciu rozwija Eventy, Studniówki, Wedding (podstrony: eventy/, studniowki/, wedding/).
   Górny pasek na komputerze: lista rozwijana pod przyciskiem; menu mobilne, pionowe menu w hero i sekcja skrótów: rozwijana harmonijka.
   ========================================================= */
.menu__list > li { display: flex; align-items: center; }   /* link i przycisk „Oferta” na jednej linii */
.menu__list > li.has-sub { flex-direction: column; align-items: center; }
.has-sub { position: relative; }
.submenu-toggle {
  display: inline-flex; align-items: center; gap: .5em; cursor: pointer;
  font-family: inherit; line-height: inherit; text-transform: uppercase; color: inherit; background: none; border: 0; padding: 0;
}
.submenu-toggle__chev { width: .9em; height: .9em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.has-sub.is-open > .submenu-toggle .submenu-toggle__chev { transform: rotate(180deg); }
.submenu {
  list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; text-align: center;
  transition: max-height .55s var(--ease), opacity .3s, visibility 0s .55s;
}
.has-sub.is-open > .submenu { max-height: 280px; opacity: 1; visibility: visible; transition: max-height .55s var(--ease), opacity .4s .1s, visibility 0s; }
.submenu a { position: relative; display: block; text-transform: uppercase; }
.menu__list .submenu a { font-size: clamp(20px, 5.4vw, 31px); font-weight: 800; letter-spacing: .01em; line-height: 1.2; padding-block: 5px; color: var(--cream); }
.menu__list .submenu a::after { display: none; }
.menu__list .submenu a:hover { color: var(--cream); }

/* pionowe menu w hero */
.hero__side-list .submenu-toggle { display: inline-flex; align-items: center; gap: .45em; }
.hero__side-list .submenu a { padding-block: 5px; font-size: clamp(11px, .9vw, 14px); letter-spacing: .1em; font-weight: 600; opacity: .75; }
.hero__side-list .submenu a:hover { opacity: 1; }
.hero__side-list .submenu a::after { display: none; }
.hero__side-list .submenu-toggle::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.hero__side-list .submenu-toggle:hover::after, .hero__side-list .has-sub.is-open > .submenu-toggle::after { transform: scaleX(1); transform-origin: left; }

/* sekcja skrótów pod hero: wygląd jak menu na telefonie (ciemne tło, duże wersaliki Montserrat 800, kółka social).
   Przejście z hero to łagodne wygaszanie: dolna część hero (jasne tło i postać) stopniowo przechodzi w czerń (::before sekcji, wysokość --fade-h) */
.menu-sec {
  position: relative; z-index: 5; min-height: 0; justify-content: flex-start;
  margin-top: calc(var(--fade-h) * -1);
  padding: calc(var(--fade-h) + clamp(40px, 8vh, 96px)) var(--gutter) clamp(64px, 11vh, 120px);
  color: var(--cream);
  /* lity kolor zaczyna się 1px nad końcem wygaszania, żeby nie było szwu */
  background: linear-gradient(var(--ink), var(--ink)) 0 calc(var(--fade-h) - 1px) / 100% calc(100% - var(--fade-h) + 1px) no-repeat;
}
/* sekcja skrótów nachodzi na dół hero (margin-top ujemny, z-index 5), więc jej górny pas leży nad ikonami social z hero i przechwytywał kliknięcia:
   sama sekcja nie reaguje na mysz, a jej treść (.menu-sec__inner, zaczyna się pod pasem wygaszania) tak */
.menu-sec { pointer-events: none; }
.menu-sec__inner { pointer-events: auto; }
.menu-sec::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--fade-h); pointer-events: none;
  background: linear-gradient(to bottom, rgba(11, 11, 11, 0) 0%, rgba(11, 11, 11, .04) 14%, rgba(11, 11, 11, .16) 34%, rgba(11, 11, 11, .42) 56%, rgba(11, 11, 11, .74) 78%, rgba(11, 11, 11, .93) 92%, var(--ink) 100%);
}
/* przejście „O mnie” -> Portfolio: beż wygasza się w biel (to samo rozwiązanie, kolor docelowy to tło Portfolio) */
.about { padding-bottom: calc(clamp(32px, 6vh, 80px) + var(--fade-w) * .6); }
.portfolio {
  z-index: 5; margin-top: calc(var(--fade-w) * -1);
  padding-top: calc(var(--header-h) + clamp(16px, 4vh, 48px) + var(--fade-w));
  background: linear-gradient(var(--paper), var(--paper)) 0 calc(var(--fade-w) - 1px) / 100% calc(100% - var(--fade-w) + 1px) no-repeat;
}
.portfolio::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--fade-w); pointer-events: none;
  background: linear-gradient(to bottom, rgba(249, 249, 249, 0) 0%, rgba(249, 249, 249, .05) 14%, rgba(249, 249, 249, .18) 34%, rgba(249, 249, 249, .45) 56%, rgba(249, 249, 249, .78) 78%, rgba(249, 249, 249, .95) 92%, var(--paper) 100%);
}
.menu-sec__inner { width: min(100%, 760px); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 5vh, 52px); text-align: center; }
.menu-sec__logo img { display: block; width: clamp(52px, 5vw, 72px); height: auto; filter: invert(1); }
.menu-sec__list { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.menu-sec__list a, .menu-sec__list .submenu-toggle {
  position: relative; display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--f-head); font-size: clamp(26px, 3.2vw, 46px); font-weight: 800; letter-spacing: .01em; line-height: 1.35; text-transform: uppercase;
  color: var(--cream); padding-block: 2px;
}
.menu-sec__list a::after, .menu-sec__list .submenu-toggle::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.menu-sec__list a:hover::after, .menu-sec__list a.is-current::after, .menu-sec__list .submenu-toggle:hover::after, .menu-sec__list .has-sub.is-open > .submenu-toggle::after { transform: scaleX(1); transform-origin: left; }
.menu-sec__list .submenu-toggle__chev { width: .6em; height: .6em; }
.menu-sec__list .submenu a { padding-block: 4px; font-family: var(--f-head); font-size: clamp(20px, 2.5vw, 36px); font-weight: 800; letter-spacing: .01em; line-height: 1.25; color: var(--cream); }
.menu-sec__list .submenu a::after { display: none; }
.menu-sec__list .submenu a:hover { color: var(--cream); }
.menu-sec__social { display: flex; justify-content: center; gap: clamp(12px, 1.2vw, 18px); --soc: clamp(50px, 4vw, 60px); --d: .2s; }
.menu-sec .soc { color: var(--cream); }
.menu-sec__social li:nth-child(1) .soc { --i: 0; }
.menu-sec__social li:nth-child(2) .soc { --i: 1; }
.menu-sec__social li:nth-child(3) .soc { --i: 2; }
.menu-sec__social li:nth-child(4) .soc { --i: 3; }

/* górny pasek na komputerze: „Oferta” jako lista rozwijana pod przyciskiem (ciemny panel, działa na jasnych i ciemnych sekcjach) */
@media (min-width: 961px) {
  .menu__list .submenu {
    position: absolute; top: calc(100% + 8px); left: 50%; min-width: 196px; padding: 8px; max-height: none; overflow: visible;
    background: var(--ink); color: var(--cream); border: 1px solid rgba(236, 235, 232, .16); border-radius: 14px;
    box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .55); text-align: left;
    translate: -50% -8px; transition: opacity .3s, translate .4s var(--ease), visibility 0s .4s;
  }
  .menu__list .has-sub.is-open > .submenu { translate: -50% 0; transition: opacity .3s, translate .4s var(--ease), visibility 0s; }
  .menu__list .submenu a { font-size: 13px; font-weight: 600; letter-spacing: .1em; padding: 10px 14px; border-radius: 9px; }
  .menu__list .submenu a:hover { background: rgba(236, 235, 232, .08); }
}

/* =========================================================
   PODSTRONY OFERTY (eventy/, studniowki/, wedding/)
   Mini hero z tytułem podstrony (gradient jak na stronie głównej), potem treść dopasowana do tego, czego szukają klienci:
   co dostajesz, jak to wygląda, zdjęcia z realizacji, pytania i prośba o termin. Bez JS poza odsłanianiem (js/sub.js);
   podstrona Eventy ładuje dodatkowo js/offer.js (karuzela, wiązki światła i karty sekcji „Pełna oprawa”).
   ========================================================= */
.subpage { background: var(--cream); color: var(--ink); }
.subhead {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(14px, 2vw, 24px) var(--gutter);
}
.subhead__logo img { display: block; width: clamp(34px, 3.2vw, 44px); height: auto; }
.subhead__nav { display: flex; align-items: center; flex-wrap: nowrap; min-width: 0; gap: clamp(10px, 1.8vw, 36px); }
.subhead__nav a { font-size: clamp(10px, 1.45vw, 14px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; padding-block: 8px; border-bottom: 1px solid transparent; transition: border-color .3s; }
.subhead__nav a:hover, .subhead__nav a[aria-current] { border-color: currentColor; }
.subhead__offer { display: flex; align-items: center; gap: clamp(10px, 1.8vw, 36px); padding-inline: clamp(10px, 1.8vw, 36px); border-inline: 1px solid var(--line); }
.subhead__contact { padding-inline: clamp(11px, 1.6vw, 18px) !important; border: 1px solid currentColor !important; border-radius: 999px; }
.subhead__contact:hover { background: var(--ink); color: var(--cream); border-color: var(--ink) !important; }
/* telefon i wąskie okno (do 860 px): dwa rzędy. Góra: logo, „Strona główna” i „Kontakt”; dół: Eventy, Studniówki, Wedding rozłożone na całą szerokość.
   Napisy mają rozmiar z vw (Fill container), więc zawsze mieszczą się w szerokości ekranu, od 320 px wzwyż */
@media (max-width: 860px) {
  .subhead { flex-wrap: wrap; row-gap: 6px; align-items: center; padding-bottom: 10px; }
  .subhead__nav { display: contents; }
  .subhead__logo { order: 1; margin-right: auto; }
  .subhead__nav > a:first-child { order: 2; margin-right: clamp(10px, 3.4vw, 22px); }
  .subhead__contact { order: 3; }
  .subhead__offer { order: 4; flex: 0 0 100%; justify-content: space-between; gap: 0; padding: 8px 2px 0; border-inline: 0; border-top: 1px solid rgba(236, 235, 232, .22); }
  .subhead__nav a { font-size: clamp(10px, 3.3vw, 15px); letter-spacing: .08em; }
  .subhead__offer a { padding-block: 6px; }
}

/* mini hero podstrony: trzy zdjęcia w tle (przenikają się co kilka sekund), ciemna nakładka dla czytelności, jasne teksty */
.subhero {
  position: relative; isolation: isolate; overflow: hidden; color: var(--cream); background: var(--ink);
  display: flex; align-items: flex-end;
  min-height: min(92svh, 880px);
  padding: calc(var(--header-h) + clamp(24px, 6vh, 72px)) var(--gutter) clamp(40px, 8vh, 96px);
}
.subhero__bg { position: absolute; inset: 0; z-index: -2; }
.subhero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); animation: subHeroFade 24s linear infinite; will-change: opacity, transform; filter: saturate(.9) contrast(.96); }
.subhero__bg img:nth-child(1) { animation-delay: -2s; }
.subhero__bg img:nth-child(2) { animation-delay: 6s; }
.subhero__bg img:nth-child(3) { animation-delay: 14s; }
@keyframes subHeroFade {
  0% { opacity: 0; transform: scale(1.03); }
  8% { opacity: 1; }
  33.3% { opacity: 1; }
  41.3% { opacity: 0; }
  100% { opacity: 0; transform: scale(1.08); }
}
/* ciemna nakładka: mocniejsza po lewej, gdzie stoi tekst, i u dołu */
.subhero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 11, 11, .8) 0%, rgba(11, 11, 11, .62) 52%, rgba(11, 11, 11, .42) 100%),
    linear-gradient(0deg, rgba(11, 11, 11, .6) 0%, rgba(11, 11, 11, 0) 45%);
}
/* delikatne ziarno nad zdjęciami: maskuje kompresję i miękkość powiększonych kadrów */
.subhero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .16; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.subhero__inner { width: 100%; max-width: var(--maxw); margin: 0 auto; }
/* hero podstrony: tytuł jest dominujący, wypełnia szerokość kontenera (cqw / --fit, gdzie --fit to szerokość napisu w em), ale najwyżej 30% wysokości
   ekranu i 320 px; pod nim w jednym rzędzie opis i przycisk z kontaktem, a zakres oferty to cichy tekst na dole */
.subhero__inner { display: block; }
.subhero__head { container-type: inline-size; }
.subhero .subhero__head .sec-head__title { font-size: min(calc(99cqw / var(--fit, 5)), 30svh, 320px); line-height: .9; letter-spacing: -.015em; }
.subhero .subhero__head .sec-head { margin: clamp(6px, 1.2vh, 14px) 0 0; }
.subhero .subhero__copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 56px); align-items: end; max-width: none; margin-top: clamp(16px, 3vh, 34px); }
/* opis pod tytułem: ten sam krój co opis w hero strony głównej (Montserrat 800, wersaliki, ciasny odstęp, line-height 1,14) */
.subhero .subhero__copy .subhero__lead { max-width: 28em; font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(17px, 2.2vw, 36px); line-height: 1.14; letter-spacing: -.012em; color: var(--cream); text-wrap: balance; }
.subhero__copy .subhero__cta { flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; }
@media (max-width: 860px) {
  .subhero .subhero__copy { grid-template-columns: minmax(0, 1fr); }
  .subhero__copy .subhero__cta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
  /* na wąskich ekranach opis jest większy, luźniejszy i węższy, więc blok rozciąga się w dół (więcej linii), a przycisk jest delikatnie mniejszy */
  .subhero .subhero__copy .subhero__lead { max-width: 22em; font-size: clamp(19px, calc(2.4vw + 10px), 32px); line-height: 1.24; }
  .subhero .subhero__cta .btn { min-height: 48px; padding: 10px clamp(18px, 3vw, 24px); font-size: 12px; gap: 12px; }
  .subhero .subhero__cta .btn svg { width: 16px; height: 16px; }
}
/* tytuły podstron: te same co na stronie głównej (.sec-head__title: Montserrat 800, wersaliki, 13,5vw do 150 px), tu dopasowane do jednej linii
   przez --fit (szerokość tytułu w em, liczy ją generator) */
.subhero .sec-head__title, .sub-sec .sec-head__title, .sub-cta .sec-head__title { font-size: clamp(34px, min(13.5vw, calc((min(100vw, var(--maxw)) - 2 * var(--gutter)) / var(--fit, 8))), 150px); }
.subpage .sec-head { margin-bottom: clamp(24px, 4.5vh, 48px); }
.sub-cta .sec-head { margin-bottom: 0; }
.sub-cta .sec-head__title { color: var(--cream); }
.sub-cta .draw-line { color: var(--cream); margin-inline: auto; transform-origin: center; }
.subhero__head .sec-head { margin: clamp(10px, 1.6vh, 18px) 0 0; }
.subhero__copy { max-width: 40em; margin-top: clamp(20px, 3.4vh, 36px); }
.subhero .sec-head__title, .subhero .draw-line { color: var(--cream); }
.subhero__crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(236, 235, 232, .7); }
.subhero__crumbs a:hover { color: var(--cream); }
.subhero__lead { max-width: 34em; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.65; color: rgba(236, 235, 232, .9); }
.subhero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(16px, 2.6vh, 26px); }
.subhero__chips li { padding: 8px 14px; border: 1px solid rgba(236, 235, 232, .38); border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: rgba(236, 235, 232, .08); backdrop-filter: blur(4px); }
.subhero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: clamp(22px, 4vh, 38px); }
/* przycisk w hero podstrony dopasowany do zawartości (hug content), także na telefonie, gdzie ogólna reguła .btn rozciąga go na całą szerokość */
.subhero__cta .btn { width: auto; max-width: 100%; justify-content: center; gap: 16px; }
/* ikony mediów społecznościowych w hero podstrony (te same co w hero strony głównej: kolory marek po najechaniu, połysk co kilka sekund) */
.subhero__social { display: flex; justify-content: center; gap: 14px; margin: clamp(30px, 5.5vh, 60px) 0 0; padding-top: clamp(22px, 3.4vh, 34px); border-top: 1px solid rgba(236, 235, 232, .16); --soc: 46px; }   /* wycentrowane na szerokości strony, pod całą treścią hero */
.subhero .soc { color: var(--cream); }
.subhero__social li:nth-child(1) .soc { --i: 0; }
.subhero__social li:nth-child(2) .soc { --i: 1; }
.subhero__social li:nth-child(3) .soc { --i: 2; }
.subhero__social li:nth-child(4) .soc { --i: 3; }
.subhero__contact { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.subhero__contact a { font-size: 15px; font-weight: 600; letter-spacing: .03em; border-bottom: 1px solid transparent; transition: border-color .3s; }
.subhero__contact a:hover { border-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .subhero__bg img { animation: none; transform: none; }
  .subhero__bg img:nth-child(1) { opacity: 1; }
}
/* nagłówek podstrony leży na zdjęciu: jasne logo, linki i przycisk */
.subhead { color: var(--cream); }
.subhead__logo img { filter: invert(1); }
.subhead__offer { border-color: rgba(236, 235, 232, .3); }
.subhead__contact:hover { background: var(--cream); color: var(--ink); border-color: var(--cream) !important; }

.sub-sec { padding: clamp(56px, 9vh, 112px) var(--gutter); }
.sub-sec--tint { background: var(--cream-2); }
.sub-sec__inner { max-width: var(--maxw); margin-inline: auto; }
.sub-sec__inner--narrow { max-width: 860px; }

.sub-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.sub-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sub-card { padding: clamp(20px, 2.2vw, 34px); border: 1px solid var(--line); border-radius: clamp(14px, 1.4vw, 20px); background: rgba(255, 255, 255, .55); }
.sub-card__title { font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(15px, 1.25vw, 20px); letter-spacing: .02em; line-height: 1.2; }
.sub-card p { margin-top: 10px; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.65; color: var(--text); }
.sub-card strong { font-weight: 600; color: var(--ink); }
@media (max-width: 860px) { .sub-cards, .sub-cards--3 { grid-template-columns: minmax(0, 1fr); } }

.sub-gallery { position: relative; column-count: 3; column-gap: clamp(8px, 1vw, 14px); list-style: none; margin: 0; padding: 0; }
.sub-gallery__item { break-inside: avoid; margin-bottom: clamp(8px, 1vw, 14px); }
.sub-gallery__item img { display: block; width: 100%; height: auto; border-radius: clamp(10px, 1vw, 16px); background: var(--cream); }
@media (max-width: 860px) { .sub-gallery { column-count: 2; } }
.sub-more { margin-top: clamp(18px, 3vh, 30px); }
.sub-more a { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 3px; }

/* portfolio podstrony: filtr, siatka kolumnowa, przycisk „Pokaż więcej”, powiększenie */
.sub-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: calc(clamp(24px, 4.5vh, 48px) * -.4) 0 clamp(18px, 3vh, 28px); }
.sub-filters button { padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; background: transparent; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.sub-filters button:hover { border-color: var(--ink); }
.sub-filters button[aria-selected="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
/* portfolio podstron: ciemne tło i jasne napisy (odcień o włos jaśniejszy niż sąsiednie ciemne sekcje + cienka linia, żeby sekcje się nie zlewały) */
.sub-dark.sub-portfolio { background: #121212; border-top: 1px solid var(--line-light); }
/* portfolio na podstronie Wedding: białe tło, czarne napisy (pozostałe portfolio zostają ciemne) */
.sub-portfolio--light { background: #fff; color: var(--ink); border-top: 1px solid var(--line); }
.sub-dark .sub-filters button { border-color: rgba(236, 235, 232, .3); color: var(--cream); }
.sub-dark .sub-filters button:hover { border-color: var(--cream); }
.sub-dark .sub-filters button[aria-selected="true"] { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.sub-dark .sub-more__btn:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.sub-dark .sub-gallery__item img, .sub-dark .sub-gallery__item a { background: #1c1c1c; }
.sub-cta { border-top: 1px solid var(--line-light); }
.sub-gallery__item[hidden] { display: none; }
.sub-gallery__item a { display: block; cursor: zoom-in; overflow: hidden; border-radius: clamp(10px, 1vw, 16px); }
.sub-gallery__item a img { border-radius: 0; transition: transform .6s var(--ease); }
.sub-gallery__item a:hover img { transform: scale(1.03); }
.sub-more { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.sub-more__btn { padding: 12px 22px; border: 1px solid currentColor; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; background: transparent; cursor: pointer; transition: background-color .3s, color .3s; }
.sub-more__btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.sub-more__btn[hidden] { display: none; }
.sub-lb { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(11, 11, 11, .94); color: var(--cream); }
.sub-lb[open] { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; }
.sub-lb::backdrop { background: rgba(11, 11, 11, .8); }
.sub-lb__fig { margin: 0; display: grid; place-items: center; min-width: 0; height: 100%; padding: 56px 0; }
.sub-lb__fig img { max-width: 100%; max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px); width: auto; height: auto; object-fit: contain; }
.sub-lb__x { position: absolute; top: 12px; right: 16px; width: 44px; height: 44px; font-size: 34px; line-height: 1; color: inherit; background: none; border: 0; cursor: pointer; }
.sub-lb__nav { height: 100%; font-size: 44px; color: inherit; background: none; border: 0; cursor: pointer; opacity: .75; }
.sub-lb__nav:hover { opacity: 1; }
@media (max-width: 600px) { .sub-lb[open] { grid-template-columns: 40px minmax(0, 1fr) 40px; } }

/* Studniówki: wybór miejsca, lista „oferta obejmuje”, tekst doświadczenia */
.sub-sec__lead { max-width: 40em; margin: calc(clamp(24px, 4.5vh, 48px) * -.4) 0 clamp(20px, 3.4vh, 34px); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.65; color: var(--text); }
.sub-sec__body { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.75; color: var(--text); }
.sub-sec__body strong { font-weight: 600; color: var(--ink); }
.sub-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); list-style: none; margin: 0; padding: 0; }
.sub-place { padding: clamp(22px, 2.4vw, 38px); border: 1px solid var(--line); border-radius: clamp(14px, 1.4vw, 20px); background: rgba(255, 255, 255, .55); }
.sub-place--any { grid-column: 1 / -1; background: var(--ink); color: var(--cream); border-color: var(--ink); }
.sub-place.sub-place--any p { color: rgba(236, 235, 232, .78); }
.sub-place__title { font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(17px, 1.6vw, 26px); letter-spacing: .01em; line-height: 1.15; }
.sub-place p { margin-top: 12px; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.7; color: var(--text); }
/* Eventy: jakość i wsparcie, konferencje (zadania, tłumaczenia), DJ, artyści i zespoły */
/* nazwy programów telewizyjnych w złocie: ciemniejsze na jasnym tle (kontrast), jaśniejsze na ciemnym */
.hl { font-weight: 600; color: #9A7826; }
.sub-dark .hl, .value p .hl { color: #E0C27A; }
.qual { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 6vw, 100px); align-items: center; }
/* lead: ten sam krój co nagłówki i napisy strony (Montserrat), średnia grubość, kluczowa fraza pogrubiona */
.qual__lead { font-family: var(--f-head); font-weight: 600; font-size: clamp(19px, 1.85vw, 30px); line-height: 1.5; letter-spacing: -.005em; color: var(--ink); }
.qual__lead strong { font-weight: 800; }
.qual__kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
/* „Obsługujemy”: duże napisy wjeżdżają jeden po drugim (unoszą się z lekkiego rozmycia), a linie pod nimi rysują się od lewej */
.qual__items { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.qual__items li {
  --i: 0; position: relative; padding: clamp(16px, 2.6vh, 28px) 0 clamp(18px, 2.8vh, 30px);
  font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 4.2vw, 68px); line-height: 1.02; letter-spacing: -.01em;
  opacity: 0; transform: translateY(34px); filter: blur(5px);
  transition: opacity .9s var(--ease), transform 1s var(--ease), filter .9s var(--ease), letter-spacing 1.2s var(--ease), padding-left .5s var(--ease);
  transition-delay: calc(.25s + var(--i) * .16s);
}
.qual__items li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); transition-delay: calc(.45s + var(--i) * .16s); }
.qual__side.is-in .qual__items li { opacity: 1; transform: none; filter: none; }
.qual__side.is-in .qual__items li::after { transform: scaleX(1); }
.qual__items li:hover { padding-left: 14px; transition-delay: 0s; }
.qual__items li:nth-child(1) { --i: 1; }
.qual__items li:nth-child(2) { --i: 2; }
.qual__items li:nth-child(3) { --i: 3; }
.qual__items li:nth-child(4) { --i: 4; }
.qual__items li:nth-child(5) { --i: 5; }
.qual__items li:nth-child(6) { --i: 6; }
@media (prefers-reduced-motion: reduce) { .qual__items li { opacity: 1; transform: none; filter: none; transition: none; } .qual__items li::after { transform: none; transition: none; } }
@media (max-width: 860px) { .qual { grid-template-columns: minmax(0, 1fr); } }
/* zdjęcie z jednym kadrem wypełnia całą wysokość wiersza (obok tekstu), przycięte przez object-fit: cover */
.venue:has(.venue__media--solo) { align-items: stretch; }
.venue .venue__media--solo { position: relative; display: block; min-height: 320px; overflow: hidden; border-radius: clamp(12px, 1.4vw, 20px); box-shadow: 0 30px 56px -34px rgba(11, 11, 11, .55); }
.venue .venue__media--solo img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; box-shadow: none; }
@media (max-width: 860px) { .venue .venue__media--solo { min-height: 0; aspect-ratio: 4 / 3; } .venue .venue__media--portrait { aspect-ratio: 1 / 1; } }
/* „Profesjonalny DJ”: wycięta postać stoi na dolnej krawędzi sekcji (sekcja nie ma dolnego marginesu), tekst obok, wyśrodkowany w pionie */
.sub-sec--bleed { padding-bottom: 0; overflow: hidden; }
.djcut { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(20px, 4vw, 72px); align-items: end; }
.djcut__photo { margin: 0; align-self: end; line-height: 0; }
.djcut__photo img {
  display: block; width: 100%; max-width: 560px; height: auto; margin-inline: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.djcut__body { align-self: center; padding-block: clamp(10px, 2vh, 24px) clamp(56px, 9vh, 112px); }
.djcut__body > p:not(.venue__kicker) { max-width: 34em; margin-top: clamp(14px, 2.2vh, 22px); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.75; color: var(--text); }
.djcut__body > p.venue__quote { padding-left: 18px; border-left: 2px solid var(--ink); font-size: clamp(18px, 1.5vw, 24px); font-style: italic; line-height: 1.5; color: var(--ink); }
@media (max-width: 860px) {
  .djcut { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .djcut__body { order: -1; padding-bottom: 28px; }
  .djcut__photo img { max-width: min(420px, 88%); }
}
.venue__title--sm { font-size: clamp(26px, 3.1vw, 46px); }
.venue__kicker--list { margin-top: clamp(22px, 3.6vh, 36px); }
.tasks { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: t; border-top: 1px solid var(--line); max-width: 36em; }
.tasks li { counter-increment: t; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); column-gap: 14px; padding: 15px 0 17px; border-bottom: 1px solid var(--line); }
.tasks li::before { content: counter(t, decimal-leading-zero); grid-row: span 2; padding-top: .3em; font-family: var(--f-head); font-weight: 800; font-size: 13px; letter-spacing: .18em; color: var(--muted); }
.tasks h4 { font-family: var(--f-head); font-weight: 700; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.3; letter-spacing: .01em; }
.tasks p { margin: 4px 0 0 !important; max-width: none !important; font-size: clamp(14.5px, 1vw, 16.5px) !important; line-height: 1.6 !important; }
.artists { list-style: none; margin: clamp(30px, 5.5vh, 60px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(26px, 3.6vw, 52px) clamp(14px, 2vw, 30px); }
.artist__photo { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: clamp(12px, 1.4vw, 20px); background: #1a1a1a; }
.artist__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.artist:hover .artist__photo img { transform: scale(1.045); }
.artist__name { margin-top: 16px; font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(17px, 1.7vw, 26px); line-height: 1.1; letter-spacing: .02em; }
.artist__role { margin-top: 2px; font-family: var(--f-text); font-style: italic; font-size: clamp(15px, 1.1vw, 18px); color: rgba(236, 235, 232, .58); }
.artist__note { margin-top: 8px; font-size: clamp(14px, .98vw, 16px); line-height: 1.55; color: rgba(236, 235, 232, .78); }
@media (max-width: 960px) { .artists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ens-title { margin-top: clamp(56px, 9vh, 100px); text-align: center; font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 2.6vw, 40px); letter-spacing: .02em; }
@media (min-width: 861px) {
  .wed-choose.wed-choose--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wed-choose--4 .wed-choose__item { padding-inline: clamp(12px, 1.6vw, 28px); }
  .wed-choose--4 .wed-choose__photo img { aspect-ratio: 4 / 5; object-fit: cover; }
  .wed-choose--4 .wed-choose__item p { font-size: clamp(14px, .95vw, 16px); }
}
/* telefon: zespoły jeden pod drugim, zdjęcie nad tekstem w całości (szerokie grupowe kadry w 3:2, pionowe w 4:5), bez przycinania do wąskiej kolumny */
@media (max-width: 860px) {
  .wed-choose.wed-choose--4 .wed-choose__item { display: block; min-height: 0; padding: 28px 0 32px; text-align: center; }
  .wed-choose.wed-choose--4 .wed-choose__photo,
  .wed-choose.wed-choose--4 .wed-choose__item:nth-child(even) .wed-choose__photo { height: auto; margin: 0 0 18px; }
  .wed-choose.wed-choose--4 .wed-choose__body,
  .wed-choose.wed-choose--4 .wed-choose__item:nth-child(even) .wed-choose__body { padding: 0 4px; }
  .wed-choose.wed-choose--4 .wed-choose__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; box-shadow: 0 24px 44px -26px rgba(0, 0, 0, .8); }
  .wed-choose.wed-choose--4 .wed-choose__item:nth-child(-n+2) .wed-choose__photo img { aspect-ratio: 3 / 2; }
  .wed-choose.wed-choose--4 .wed-choose__item p { margin-inline: auto; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .wed-choose.wed-choose--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wed-choose--4 .wed-choose__item:nth-child(3) { border-left: 0; }
  .wed-choose--4 .wed-choose__item:nth-child(n+3) { border-top: 1px solid var(--line-light); }
}

/* Studniówki: miejsca ze zdjęciami (Aula, Forteca) i sekcja „Doświadczenie” */
.venues { display: grid; gap: clamp(52px, 8vw, 116px); }
.venue { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(24px, 4.5vw, 76px); align-items: center; }
.venue--rev .venue__media { order: 2; }
.venue__media { display: grid; gap: clamp(8px, 1vw, 14px); }
.venue__media--2 { grid-template-columns: 1.186fr 1fr; }
.venue__media--3 { grid-template-columns: 1fr 1fr; }
.venue__media--3 img:first-child { grid-column: 1 / -1; }
.venue__media img { display: block; width: 100%; height: auto; border-radius: clamp(12px, 1.4vw, 20px); box-shadow: 0 30px 56px -34px rgba(11, 11, 11, .55); }
.venue__kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.venue__title { margin-top: 12px; font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 4.1vw, 62px); line-height: 1; letter-spacing: -.01em; text-wrap: balance; }
.venue__body p + p { margin-top: 1.1em; }
.venue__body > p:not(.venue__kicker) { max-width: 34em; margin-top: clamp(14px, 2.2vh, 22px); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.75; color: var(--text); }
.venue__body > p.venue__quote { margin-top: 1.3em; padding-left: 18px; border-left: 2px solid var(--ink); font-size: clamp(17px, 1.35vw, 21px); font-style: italic; line-height: 1.55; color: var(--ink); }
.venue__facts { margin: clamp(18px, 3vh, 30px) 0 0; display: grid; gap: 0; max-width: 34em; border-top: 1px solid var(--line); }
.venue__facts > div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.venue__facts dt { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-top: .25em; }
.venue__facts dd { margin: 0; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.5; color: var(--text); }
.venues__any { margin-top: clamp(28px, 5vh, 56px); }
@media (max-width: 860px) {
  .venue { grid-template-columns: minmax(0, 1fr); }
  .venue--rev .venue__media { order: 0; }
  .venue__facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* Studniówki, „Na pełnej petardzie”: trzy kolumny (na zewnątrz, wewnątrz, na parkiecie): zdjęcie, numer, tytuł i opis, wyśrodkowane */
.trio { list-style: none; margin: clamp(10px, 2vh, 24px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3.2vw, 52px); }
.trio__item { text-align: center; }
.trio__photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: clamp(14px, 1.6vw, 24px); box-shadow: 0 30px 56px -34px rgba(11, 11, 11, .55); }
.trio__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.trio__item:hover .trio__photo img { transform: scale(1.04); }
.trio__no { display: block; margin-top: clamp(18px, 3vh, 30px); font-family: var(--f-head); font-weight: 800; font-size: clamp(44px, 5vw, 78px); line-height: .9; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.5px rgba(11, 11, 11, .3); }
.trio__title { margin-top: clamp(4px, 1vw, 10px); font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 2.4vw, 38px); line-height: 1.05; letter-spacing: .01em; }
.trio__item p { max-width: 26em; margin: clamp(10px, 1.8vh, 16px) auto 0; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.7; color: var(--text); }
@media (max-width: 860px) {
  .trio { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  /* zdjęcia na całą szerokość ekranu (wychodzą poza boczne marginesy sekcji), bez zaokrągleń i cienia; tekst zostaje w marginesach */
  .trio__photo { aspect-ratio: 4 / 3; margin-inline: calc(var(--gutter) * -1); border-radius: 0; box-shadow: none; }
}
@media (min-width: 561px) and (max-width: 860px) { .trio__photo { aspect-ratio: 16 / 10; } }
/* „Doświadczenie”: tło to dwa zdjęcia obok siebie (każde na pół szerokości, na telefonie jedno nad drugim), a dokładnie pośrodku sekcji stoi
   ramka z zamglonego szkła z wyśrodkowanym nagłówkiem, linią i krótkim tekstem (podwójna cienka ramka w środku). */
.exp2 { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; padding: clamp(80px, 12vw, 176px) var(--gutter); background: var(--ink); }
.exp2__ph { position: absolute; z-index: -1; top: 0; bottom: 0; width: 50%; margin: 0; }
.exp2__ph--l { left: 0; }
.exp2__ph--r { right: 0; }
.exp2__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.exp2__panel {
  position: relative; box-sizing: border-box; width: min(82%, 574px); container-type: inline-size; text-align: center;
  padding: clamp(33px, 4.1vw, 62px) clamp(21px, 4.5vw, 66px);
  background: rgba(250, 249, 246, .25); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, .75); box-shadow: 0 28px 70px rgba(0, 0, 0, .3);
}
.exp2__panel::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(11, 11, 11, .16); pointer-events: none; }
.exp2__panel .sec-head { display: flex; flex-direction: column; align-items: center; margin: 0 0 clamp(15px, 1.8vw, 25px); }
.exp2__panel .sec-head__title { font-size: calc(94cqw / (var(--fit, 12) * .78)); line-height: .95; letter-spacing: -.015em; text-align: center; color: var(--ink); }
.exp2__panel .draw-line { margin-inline: auto; transform-origin: center; }
.exp2__panel p { margin: 0; font-family: var(--f-head); font-weight: 700; font-size: clamp(13px, 1.23vw, 18px); line-height: 1.55; letter-spacing: -.005em; color: var(--ink); text-wrap: balance; font-style: italic; }
.exp2__panel strong { font-weight: 800; }
@media (max-width: 860px) {
  .exp2 { padding-block: clamp(124px, 36vw, 240px); }
  .exp2__ph { left: 0; right: 0; width: 100%; top: auto; bottom: auto; height: 50%; }
  .exp2__ph--l { top: 0; }
  .exp2__ph--r { bottom: 0; }
  .exp2__panel { padding-inline: clamp(16px, 5vw, 33px); }
  .exp2__panel p { font-size: clamp(13.5px, 3.6vw, 17.5px); }
}
.sub-inc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sub-inc__col { padding: clamp(24px, 3vw, 48px) clamp(18px, 3vw, 56px) clamp(24px, 3vw, 48px) 0; }
.sub-inc__col + .sub-inc__col { padding: clamp(24px, 3vw, 48px) 0 clamp(24px, 3vw, 48px) clamp(18px, 3vw, 56px); border-left: 1px solid var(--line); }
.sub-check { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.sub-check li { position: relative; padding-left: 26px; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.5; color: var(--text); }
.sub-check li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 11px; height: 6px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.sub-inc__extra { margin-top: 16px; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.6; color: var(--text); }
.sub-inc__extra strong { font-weight: 600; color: var(--ink); }
@media (max-width: 860px) {
  .sub-places, .sub-inc { grid-template-columns: minmax(0, 1fr); }
  .sub-inc__col + .sub-inc__col { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .sub-inc__col { padding-right: 0; }
}

/* Wedding: wartości jako rzędy ze zdjęciem (naprzemiennie), duże obrysowane numery; „DJ czy zespół?” na ciemnym tle w trzech kolumnach */
.wed-values { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(44px, 8vw, 110px); }
.wed-value { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 5vw, 88px); align-items: center; }
.wed-value:nth-child(even) .wed-value__photo { order: 2; }
.wed-value__photo { margin: 0; }
.wed-value__photo img { display: block; width: 100%; height: auto; border-radius: clamp(14px, 1.6vw, 24px); box-shadow: 0 34px 60px -34px rgba(11, 11, 11, .55); }
.wed-value__num {
  display: block; font-family: var(--f-head); font-weight: 800; font-size: clamp(64px, 9vw, 140px); line-height: .9; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(11, 11, 11, .3);
}
.wed-value__title { margin-top: clamp(4px, 1vw, 12px); font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(24px, 3vw, 44px); line-height: 1.05; letter-spacing: .01em; }
.wed-value__body p { max-width: 30em; margin-top: clamp(12px, 2vh, 20px); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.75; color: var(--text); }
.wed-value__body strong { font-weight: 600; color: var(--ink); }
@media (max-width: 860px) {
  .wed-value { grid-template-columns: minmax(0, 1fr); }
  .wed-value:nth-child(even) .wed-value__photo { order: 0; }
}
.sub-dark { background: var(--ink); color: var(--cream); }
/* Studniówki, „Muzyka i światło”: pasy ze zdjęciem od krawędzi ekranu do środka, tekst po drugiej stronie, na zmianę */
.sub-split { padding-inline: 0; padding-bottom: 0; --edge: calc((100vw - min(100vw - 2 * var(--gutter), var(--maxw))) / 2); }
.sub-split .sub-sec__inner { max-width: none; padding-inline: var(--edge); }
.split-list { margin-top: clamp(8px, 2vh, 24px); border-top: 1px solid var(--line-light); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(420px, 44vw, 700px); border-bottom: 1px solid var(--line-light); }
.split--rev .split__photo { order: -1; }
.split__body { align-self: center; padding: clamp(32px, 5vw, 88px) clamp(24px, 4vw, 72px) clamp(32px, 5vw, 88px) var(--edge); }
.split--rev .split__body { padding: clamp(32px, 5vw, 88px) var(--edge) clamp(32px, 5vw, 88px) clamp(24px, 4vw, 72px); }
.split__no { display: block; font-family: var(--f-head); font-weight: 800; font-size: clamp(56px, 7vw, 110px); line-height: .9; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.5px rgba(236, 235, 232, .34); }
.split__title { margin-top: clamp(4px, 1vw, 12px); font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 2.6vw, 40px); line-height: 1.08; letter-spacing: .01em; }
.split__body p { max-width: 32em; margin-top: clamp(12px, 2vh, 20px); font-size: clamp(16px, 1.2vw, 19px); line-height: 1.75; color: rgba(236, 235, 232, .78); }
.split__body strong { font-weight: 600; color: var(--cream); }
/* zdjęcia we wszystkich pasach (poziome i pionowe) są pokazane w całości, w swoich własnych proporcjach, wyśrodkowane w swojej połowie pasa i
   z tą samą maksymalną wysokością; dzięki temu pas wygląda tak samo niezależnie od orientacji zdjęcia i nic nie jest przycinane */
.split__photo { position: relative; margin: 0; display: grid; place-items: center; padding: clamp(28px, 4vw, 64px); }
.split__photo img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: clamp(300px, 36vw, 560px);
  border-radius: clamp(10px, 1.2vw, 18px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); outline: 1px solid rgba(236, 235, 232, .1); outline-offset: -1px;
}
@media (max-width: 860px) {
  .split, .split--rev { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .split__photo, .split--rev .split__photo { order: -1; padding: 30px var(--gutter) 0; }
  .split__photo img { max-height: min(520px, 72vh); }
  .split__body, .split--rev .split__body { padding: 26px var(--gutter) 40px; }
}
.sub-dark .sec-head__title { color: var(--cream); }
.sub-dark .draw-line { color: var(--cream); }
.sub-dark .sub-sec__lead { color: rgba(236, 235, 232, .75); }
.wed-choose { list-style: none; margin: clamp(16px, 3vh, 32px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-light); }
.wed-choose__item { padding: clamp(28px, 4vw, 56px) clamp(18px, 2.6vw, 44px); text-align: center; }
.wed-choose__photo { margin: 0 auto clamp(18px, 3vh, 30px); max-width: 360px; }
.wed-choose__photo img { display: block; width: 100%; height: auto; border-radius: clamp(12px, 1.4vw, 20px); box-shadow: 0 24px 44px -26px rgba(0, 0, 0, .8); }
.wed-choose__item + .wed-choose__item { border-left: 1px solid var(--line-light); }
.wed-choose__no { display: block; font-family: var(--f-text); font-style: italic; font-weight: 400; font-size: clamp(34px, 4vw, 60px); line-height: 1; color: rgba(236, 235, 232, .38); }
.wed-choose__title { margin-top: clamp(14px, 2.4vh, 24px); font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(18px, 2vw, 30px); line-height: 1.15; letter-spacing: .02em; }
.wed-choose__item p { max-width: 24em; margin: clamp(10px, 1.8vh, 16px) auto 0; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.7; color: rgba(236, 235, 232, .72); }
@media (max-width: 860px) {
  .wed-choose { grid-template-columns: minmax(0, 1fr); }
  .wed-choose__item + .wed-choose__item { border-left: 0; border-top: 1px solid var(--line-light); }
  /* telefon: tekst i zdjęcie obok siebie, na zmianę (1. tekst po lewej, 2. tekst po prawej, 3. jak 1.). Zdjęcie wypełnia cały pas między
     poziomymi liniami (od linii do linii) i dochodzi do krawędzi ekranu; wszystkie pasy mają tę samą wysokość */
  .wed-choose__item {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 0; align-items: stretch; text-align: left;
    min-height: clamp(200px, 56vw, 300px); padding: 0;
  }
  .wed-choose__item:last-child { border-bottom: 1px solid var(--line-light); }
  .wed-choose__body { order: 1; align-self: center; padding: 22px clamp(14px, 4vw, 26px) 22px 0; }
  .wed-choose__photo { order: 2; margin: 0 calc(var(--gutter) * -1) 0 0; max-width: none; height: 100%; }
  .wed-choose__item:nth-child(even) .wed-choose__body { order: 2; padding: 22px 0 22px clamp(14px, 4vw, 26px); }
  .wed-choose__item:nth-child(even) .wed-choose__photo { order: 1; margin: 0 0 0 calc(var(--gutter) * -1); }
  .wed-choose__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
  .wed-choose__item:nth-child(1) .wed-choose__photo img { object-position: 82% 40%; }
  .wed-choose__item:nth-child(2) .wed-choose__photo img { object-position: 50% 28%; }
  .wed-choose__item:nth-child(3) .wed-choose__photo img { object-position: 50% 45%; }
  .wed-choose__no { font-size: 34px; }
  .wed-choose__title { font-size: clamp(16px, 4.6vw, 22px); }
  .wed-choose__item p { margin-inline: 0; font-size: 15px; }
}

.sub-cta { background: var(--ink); color: var(--cream); text-align: center; padding: clamp(64px, 11vh, 120px) var(--gutter); }
.sub-cta__inner { max-width: 1100px; margin-inline: auto; }
.sub-cta p { margin-top: 14px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: rgba(236, 235, 232, .75); }
.sub-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; margin-top: clamp(22px, 4vh, 36px); }
.sub-cta__phone { font-size: 17px; font-weight: 600; letter-spacing: .03em; }
/* dolna sekcja podstron: oba przyciski (e-mail i telefon) z wycentrowanym napisem, strzałka tuż za nim */
.sub-cta__actions .btn { width: auto; max-width: 100%; min-width: 0; justify-content: center; gap: 16px; padding-inline: 30px; }   /* kształt i obramowanie dopasowane do zawartości (hug content), napis i strzałka obok siebie */
.sub-cta__actions .btn span { text-align: center; }
.sub-cta__also { margin-top: clamp(36px, 6vh, 60px); padding-top: 28px; border-top: 1px solid var(--line-light); }
.sub-cta__also > span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(236, 235, 232, .55); }
.sub-cta__also ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; }
.sub-cta .btn--line { color: var(--cream); }
.sub-cta .btn--line::before { background: var(--cream); }
.sub-cta .btn--line:hover { color: var(--ink); }

.subfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 22px var(--gutter); background: var(--ink); color: rgba(236, 235, 232, .6); border-top: 1px solid var(--line-light); font-size: 13px; }

/* przycisk „Oferta” wyróżniony, żeby było widać, że to coś do kliknięcia: delikatne złoto z lekką animacją
   (fiolet zostaje tylko w sekcji z blokami 3D). Złota strzałka wszędzie, a do tego
   - w górnym pasku na komputerze i w pionowym menu w hero: złota pigułka (tło i obrys) z powoli pulsującą poświatą
     i połyskiem, który co kilka sekund przebiega po przycisku,
   - w menu mobilnym i w sekcji skrótów: złote podkreślenie z przesuwającym się blaskiem */
.submenu-toggle { --offer: 196, 166, 97; --offer-hi: 255, 236, 176; }
.submenu-toggle__chev { color: rgb(var(--offer)); stroke-width: 2.8; }
@keyframes offerGlow {
  from { box-shadow: inset 0 0 0 1px rgba(var(--offer), .5), 0 0 0 0 rgba(var(--offer), 0); }
  to { box-shadow: inset 0 0 0 1px rgba(var(--offer), .85), 0 0 16px 0 rgba(var(--offer), .38); }
}
@keyframes offerShine { 0%, 62% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes offerLine { from { background-position: 0 0; } to { background-position: -200% 0; } }
/* w menu mobilnym i w sekcji skrótów „Oferta” nie ma podkreślenia, wyróżnia ją tylko złota strzałka */
.menu__list .submenu-toggle::after, .menu-sec__list .submenu-toggle::after { display: none; }
/* pigułka (pionowe menu w hero i górny pasek na komputerze) */
.hero__side-list .submenu-toggle {
  position: relative; overflow: hidden; padding: 6px 14px; border-radius: 999px;
  background: rgba(var(--offer), .14);
  animation: offerGlow 3.6s ease-in-out infinite alternate;
  transition: background-color .3s;
}
.hero__side-list .submenu-toggle::after {
  display: block; content: ""; position: absolute; inset: 0; left: 0; right: 0; bottom: 0; height: auto; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 36%, rgba(var(--offer-hi), .75) 50%, transparent 64%);
  transform: translateX(-130%); transform-origin: center; transition: none;
  animation: offerShine 5.5s ease-in-out infinite;
}
.hero__side-list .submenu-toggle:hover, .hero__side-list .has-sub.is-open > .submenu-toggle { background: rgba(var(--offer), .28); }
@media (min-width: 961px) {
  .menu__list .submenu-toggle {
    overflow: hidden; padding: 7px 14px; border-radius: 999px;
    background: rgba(var(--offer), .14);
    animation: offerGlow 3.6s ease-in-out infinite alternate;
    transition: background-color .3s;
  }
  .menu__list .submenu-toggle::after {
    display: block; content: ""; position: absolute; inset: 0; left: 0; right: 0; bottom: 0; height: auto; border-radius: inherit; pointer-events: none;
    background: linear-gradient(115deg, transparent 36%, rgba(var(--offer-hi), .75) 50%, transparent 64%);
    background-size: auto; transform: translateX(-130%); transform-origin: center; transition: none;
    animation: offerShine 5.5s ease-in-out infinite;
  }
  .menu__list .submenu-toggle:hover, .menu__list .has-sub.is-open > .submenu-toggle { background: rgba(var(--offer), .28); }
}
@media (prefers-reduced-motion: reduce) {
  .submenu-toggle, .submenu-toggle::after { animation: none !important; }
  .hero__side-list .submenu-toggle, .menu__list .submenu-toggle { box-shadow: inset 0 0 0 1px rgba(var(--offer), .7); }
}

/* telefon i mały tablet: kafelki oferty jeden pod drugim, na całą szerokość (poziome), wycentrowane razem z zawartością */
@media (max-width: 760px) {
  .values__list { grid-template-columns: minmax(0, 1fr); }
  .value--wide { grid-column: auto; }
  .value__card { justify-items: center; text-align: center; padding: 22px 18px 24px; }
  .value__text { justify-self: stretch; text-align: center; }
  .value p { margin-inline: auto; max-width: 34em; }
  .values__more { text-align: center; }
}

/* „Co obejmuje oferta”: wycentrowane listy bez kafelków; pozycje pojawiają się po kolei (unosząca się, rozjaśniająca się linia z lekkim wyostrzeniem) */
.sub-inc__col, .sub-inc__col + .sub-inc__col { text-align: center; padding: clamp(30px, 3.6vw, 60px) clamp(18px, 3vw, 56px); }
.sub-inc__col .sub-card__title { font-size: clamp(20px, 2.1vw, 34px); letter-spacing: .02em; line-height: 1.1; margin-bottom: clamp(14px, 2.6vh, 26px); }
.sub-inc .sub-check { margin: 0 auto; gap: 0; justify-items: center; }
.sub-inc .sub-check li {
  --i: 0; position: relative; padding: 12px 0 15px; text-align: center;
  font-family: var(--f-text); font-size: clamp(17px, 1.45vw, 22px); line-height: 1.4; color: var(--text);
  opacity: 0; transform: translateY(16px); filter: blur(3px);
  transition: opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease);
  transition-delay: calc(.3s + var(--i) * .09s);
}
.sub-inc .sub-check li:not(:last-child) { background: linear-gradient(rgba(11, 11, 11, .25), rgba(11, 11, 11, .25)) center bottom / 26px 1px no-repeat; }
/* znaczniki po obu stronach pozycji: romb z czterech kwadratów (kwadraty 8 px, całość ok. 26 px po obrocie). Gdy sekcja wjeżdża na ekran (klasa in-view
   z js/sub.js), romby wchodzą pojedynczo: wirują i rosną ze sprężystym dociągnięciem, kwadraty zbiegają się do środka. Kierunek obrotu zmienia się
   na przemian (co druga pozycja, lewy i prawy romb w przeciwne strony), a czas wejścia jest różny (1,1 / 1,4 / 1,7 s). Po wejściu romby stoją w miejscu.
   Po opuszczeniu sekcji (out-view) obracają się i zanikają */
.sub-inc .sub-check li { --rin: -270deg; --rin-b: 270deg; --dur: 1.1s; max-width: calc(100% - 96px); text-wrap: balance; }   /* miejsce na dwa romby po bokach także przy długiej pozycji (tekst się zawija) */
.sub-inc .sub-check li:nth-child(even) { --rin: 270deg; --rin-b: -270deg; }
.sub-inc .sub-check li:nth-child(3n + 2) { --dur: 1.4s; }
.sub-inc .sub-check li:nth-child(3n) { --dur: 1.7s; }
.sub-inc .sub-check li::after { --rin: var(--rin-b); }
.sub-inc .sub-check li::before, .sub-inc .sub-check li::after {
  content: ""; position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px; border: 0; pointer-events: none;
  background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink));
  background-size: 8px 8px; background-repeat: no-repeat; background-position: 4px 4px, calc(100% - 4px) 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px);
  transform: rotate(45deg); rotate: var(--rin); scale: 0; opacity: 0;
}
.sub-inc .sub-check li::before { right: calc(100% + 12px); left: auto; }
.sub-inc .sub-check li::after { left: calc(100% + 12px); right: auto; }
@keyframes markIn {
  from { opacity: 0; scale: 0; rotate: var(--rin); background-position: 0 0, 100% 0, 0 100%, 100% 100%; }
  60% { scale: 1.25; }
  to { opacity: .9; scale: 1; rotate: 0deg; background-position: 4px 4px, calc(100% - 4px) 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px); }
}
@keyframes markOut { from { opacity: .9; scale: 1; rotate: 0deg; } to { opacity: 0; scale: 0; rotate: 200deg; } }
.sub-inc__col.in-view .sub-check li::before, .sub-inc__col.in-view .sub-check li::after {
  animation: markIn var(--dur) cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(.35s + var(--i) * .09s);
}
.sub-inc__col.out-view .sub-check li::before, .sub-inc__col.out-view .sub-check li::after {
  animation: markOut .7s cubic-bezier(.5, 0, .75, 0) both; animation-delay: calc(var(--i) * .03s);
}
@media (prefers-reduced-motion: reduce) {
  .sub-inc .sub-check li::before, .sub-inc .sub-check li::after { animation: none !important; opacity: .9; scale: 1; rotate: 0deg; }
}
/* jedna, ogólna lista oferty: na komputerze w dwóch kolumnach (czytanie rzędami), bez kresek pod ostatnim rzędem */
.sub-inc--one { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 861px) {
  .sub-inc--one .sub-check { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 80px); }
  .sub-inc--one .sub-check li:nth-last-child(-n + 2) { background: none; }
}
.sub-inc__extra {
  --i: 11; margin-top: 0; padding-top: 14px; text-align: center; font-size: clamp(16px, 1.3vw, 20px);
  opacity: 0; transform: translateY(16px); filter: blur(3px);
  transition: opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease);
  transition-delay: calc(.3s + var(--i) * .09s);
}
.sub-inc__extra + .sub-inc__extra { --i: 12; }
.sub-inc__col.is-in .sub-check li, .sub-inc__col.is-in .sub-inc__extra { opacity: 1; transform: none; filter: none; }
.sub-inc .sub-check li:nth-child(1) { --i: 1; }
.sub-inc .sub-check li:nth-child(2) { --i: 2; }
.sub-inc .sub-check li:nth-child(3) { --i: 3; }
.sub-inc .sub-check li:nth-child(4) { --i: 4; }
.sub-inc .sub-check li:nth-child(5) { --i: 5; }
.sub-inc .sub-check li:nth-child(6) { --i: 6; }
.sub-inc .sub-check li:nth-child(7) { --i: 7; }
.sub-inc .sub-check li:nth-child(8) { --i: 8; }
.sub-inc .sub-check li:nth-child(9) { --i: 9; }
.sub-inc .sub-check li:nth-child(10) { --i: 10; }
.sub-inc .sub-check li:nth-child(11) { --i: 11; }
.sub-inc .sub-check li:nth-child(12) { --i: 12; }
.sub-inc .sub-check li:nth-child(13) { --i: 13; }
.sub-inc .sub-check li:nth-child(14) { --i: 14; }
@media (prefers-reduced-motion: reduce) {
  .sub-inc .sub-check li, .sub-inc__extra { opacity: 1; transform: none; filter: none; transition: none; }
}

/* nagłówek sekcji „Tu znajdziesz wszystko…” od 861 px wyżej: większy, do 78 px */
@media (min-width: 861px) { .values__intro-title { font-size: clamp(48px, 5.6vw, 78px); } }

/* teksty pod mini nagłówkami (pasy Technika i Muzyka i światło, kolumny Na zewnątrz/Wewnątrz/Na parkiecie, wartości Wedding, zespoły, zadania
   konferencji, artyści, DJ): ten sam krój co mini nagłówki (Montserrat, 600) zamiast Lory; rozmiary lekko zmniejszone, bo Montserrat jest szerszy */
.split__body p, .trio__item p, .wed-value__body p, .wed-choose__item p, .tasks p, .artist__note, .sub-card p, .sub-place p,
.venue__body > p:not(.venue__kicker):not(.venue__quote), .djcut__body > p:not(.venue__kicker):not(.venue__quote) {
  font-family: var(--f-head); font-weight: 600; letter-spacing: .005em;
}
.split__body p { font-size: clamp(14.5px, 1.1vw, 18px); line-height: 1.7; }
.trio__item p { font-size: clamp(14.5px, 1.05vw, 17px); line-height: 1.7; }
.wed-value__body p { font-size: clamp(15px, 1.12vw, 18px); line-height: 1.7; }
.wed-choose__item p { font-size: clamp(14px, 1vw, 16.5px); line-height: 1.7; }
.tasks p { font-size: clamp(13.5px, .95vw, 15.5px) !important; line-height: 1.6 !important; }
.artist__note { font-size: clamp(13.5px, .92vw, 15px); line-height: 1.6; }
.sub-card p, .sub-place p { font-size: clamp(14.5px, 1.02vw, 17px); line-height: 1.65; }
.venue__body > p:not(.venue__kicker):not(.venue__quote), .djcut__body > p:not(.venue__kicker):not(.venue__quote) { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.7; }
.artist__role { font-family: var(--f-head); font-style: normal; font-weight: 600; font-size: clamp(11.5px, .85vw, 13.5px); letter-spacing: .14em; text-transform: uppercase; }

/* podpunkty Oferty (Eventy, Studniówki, Wedding) na ciemnym tle: biel z delikatnym złotem (biały przechodzący w ciepłe, jasne złoto) */
.menu__list .submenu a, .menu-sec__list .submenu a { color: #F4E9C6; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .menu__list .submenu a, .menu-sec__list .submenu a {
    background: linear-gradient(100deg, #FFFFFF 0%, #FBF3DB 38%, #E8D298 78%, #D9BC73 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  }
}
@media (min-width: 961px) { .menu__list .submenu a:hover { background-color: rgba(236, 235, 232, .08); } }

@media (prefers-reduced-motion: reduce) {
  .loader__line { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  [data-reveal], [data-stagger] > * { opacity: 1; transform: none; clip-path: none; }
}


/* =========================================================
   DRAWER KONTAKTOWY
   Motyw na podstawie „Smooth Drawer” (KokonutUI, MIT),
   przeniesiony na czysty CSS/JS i paletę strony
   ========================================================= */
.drawer { position: fixed; inset: 0; z-index: 960; perspective: 1200px; }
.drawer[hidden] { display: none; }
.drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(11, 11, 11, .45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .45s ease;
}
.drawer.is-open .drawer__backdrop { opacity: 1; }

.drawer__panel {
  --drawer-ease: cubic-bezier(.32, .72, 0, 1);
  position: absolute; left: 50%; bottom: max(20px, env(safe-area-inset-bottom));
  width: min(400px, calc(100% - 32px));
  max-height: calc(100svh - 40px); overflow-y: auto; overscroll-behavior: contain;
  padding: 12px clamp(20px, 5vw, 28px) clamp(20px, 5vw, 28px);
  background: var(--paper); color: var(--text);
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(11, 11, 11, .45), 0 0 0 1px rgba(11, 11, 11, .06);
  transform-origin: 50% 100%;
  transform: translate(-50%, 110%) rotateX(5deg);
  opacity: 0;
  transition: transform .6s var(--drawer-ease), opacity .45s ease;
  touch-action: pan-y;
}
.drawer.is-open .drawer__panel { transform: translate(-50%, 0) rotateX(0); opacity: 1; }

.drawer__handle {
  display: block; width: 44px; height: 4px; margin: 0 auto 18px;
  border-radius: 4px; background: rgba(11, 11, 11, .16);
  cursor: grab;
}
.drawer__x {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  color: var(--muted); transition: background-color .3s, color .3s;
}
.drawer__x:hover { background: var(--cream); color: var(--ink); }
.drawer__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* elementy wchodzą po kolei */
.drawer__inner { display: grid; gap: 22px; }
.drawer__inner > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity .45s ease, transform .6s var(--drawer-ease);
}
.drawer.is-open .drawer__inner > * {
  opacity: 1; transform: none;
  transition-delay: calc(.2s + var(--i, 0) * .07s);
}

.drawer__head { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
.drawer__logo {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff, var(--cream-2));
  box-shadow: inset 0 1px 3px rgba(11, 11, 11, .08);
}
.drawer__logo img { width: 28px; height: auto; }
.drawer__title {
  font-weight: 700; color: var(--ink);
  font-size: clamp(17px, 4.4vw, 20px); line-height: 1.25; letter-spacing: -.01em;
}
.drawer__desc { font-size: 15px; line-height: 1.6; color: var(--muted); }

.drawer__tag { display: grid; justify-items: center; gap: 4px; text-align: center; }
.drawer__phone {
  font-weight: 700; font-size: clamp(26px, 7.5vw, 34px); line-height: 1.1; letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--ink), #4a4a4a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.drawer__mail { font-size: 14px; color: var(--text); border-bottom: 1px solid transparent; transition: border-color .3s; overflow-wrap: anywhere; }
.drawer__mail:hover { border-color: currentColor; }

.drawer__social { display: flex; justify-content: center; gap: 8px; }
.drawer__social a {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ink);
  transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.drawer__social a:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); transform: translateY(-2px); }
.drawer__social svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.drawer__social svg .fill { fill: currentColor; stroke: none; }

.drawer__actions { display: grid; gap: 10px; }
.drawer__primary, .drawer__secondary {
  height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 12px; font-size: 14px; font-weight: 600; letter-spacing: -.01em;
}
.drawer__primary {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ink); color: var(--cream);
  box-shadow: 0 12px 28px -10px rgba(11, 11, 11, .55);
  transition: box-shadow .5s, background-color .5s;
}
.drawer__primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: translateX(-200%);
}
.drawer__primary:hover { background: var(--ink-2); box-shadow: 0 16px 34px -10px rgba(11, 11, 11, .6); }
.drawer__primary:hover::after { animation: drawerShine 1.5s ease-in-out; }
.drawer__ring {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round;
  animation: drawerRing 3s ease-in-out infinite;
}
.drawer__secondary {
  border: 1px solid var(--line); color: var(--ink);
  transition: background-color .3s, border-color .3s;
}
.drawer__secondary:hover { background: var(--cream); border-color: rgba(11, 11, 11, .3); }

@keyframes drawerShine { from { transform: translateX(-200%); } to { transform: translateX(200%); } }
@keyframes drawerRing {
  0%, 66.6%, 100% { transform: none; }
  22% { transform: translateY(-2px) rotate(15deg); }
  44% { transform: translateY(2px) rotate(-15deg); }
}

@media (max-width: 640px) {
  .drawer__panel {
    bottom: 0; width: 100%;
    border-radius: 20px 20px 0 0;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    max-height: calc(100svh - 24px);
  }
}

/* sekcja „Profesjonalizm” (Studniówki): zdanie pod nagłówkiem i tytuł dużej karty w kroju i wielkości opisu z hero podstron
   (Montserrat 800, wersaliki, ciasny odstęp, ta sama skala co .subhero__lead) */
.sub-sec__lead.sub-sec__lead--hero { max-width: 28em; font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(17px, 2.2vw, 36px); line-height: 1.14; letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.venues__any .sub-place__title { font-size: clamp(17px, 2.2vw, 36px); line-height: 1.14; letter-spacing: -.012em; }
#places-title { font-size: clamp(22px, min(13.5vw, calc((min(100vw, var(--maxw)) - 2 * var(--gutter)) / var(--fit, 8))), 150px); }   /* tytuł wypełnia szerokość jak w hero, także na bardzo wąskim ekranie (niższe minimum niż 34 px) */

/* „Profesjonalizm”: tytuły kolumn (Na zewnątrz / Wewnątrz / Na parkiecie) większe niż dotąd, ale mniejsze od nagłówka sekcji: najdłuższy tytuł zajmuje
   ok. 93% szerokości kolumny (100cqw / 8,8 em, zmierzone), a na wąskim ekranie najwyżej ok. 78% rozmiaru nagłówka sekcji */
.trio__item { container-type: inline-size; }
.trio__title { font-size: min(calc(100cqw / 8.8), calc((min(100vw, var(--maxw)) - 2 * var(--gutter)) / 12.5), 56px); line-height: 1.02; letter-spacing: .005em; }

/* lista oferty: pozycja w jednym rzędzie siatki ma tę samą wysokość (kreski pod pozycjami w obu kolumnach są równo), a tekst i romby są wyśrodkowane w pionie,
   także gdy sąsiednia pozycja zawinęła się do dwóch wierszy */
.sub-inc .sub-check li { display: flex; align-items: center; justify-content: center; }

/* „Profesjonalizm”: zdjęcia w kolumnach nie są przycinane, tylko dopasowane do szerokości kolumny w swoich własnych proporcjach. Komórka zdjęcia jest
   (prawie) kwadratowa, a zdjęcie leży przy jej dolnej krawędzi, więc numery, tytuły i opisy zaczynają się na tej samej wysokości we wszystkich kolumnach.
   Zaokrąglenia i cień ma samo zdjęcie. Na telefonie zdjęcie jest na całą szerokość ekranu i ma własne proporcje. */
.trio__photo { aspect-ratio: 1 / 1.02; overflow: visible; border-radius: 0; box-shadow: none; display: flex; align-items: flex-end; }
.trio__photo img { height: auto; object-fit: initial; border-radius: clamp(14px, 1.6vw, 24px); box-shadow: 0 30px 56px -34px rgba(11, 11, 11, .55); }
.trio__item:hover .trio__photo img { transform: scale(1.02); }
@media (max-width: 860px) {
  .trio__photo { aspect-ratio: auto; display: block; }
  .trio__photo img { border-radius: 0; box-shadow: none; }
}

/* „Doświadczenie” na telefonie: ramka z tekstem to płaski pas od lewej do prawej krawędzi ekranu z tego samego mlecznego szkła co na komputerze (25% krycia,
   rozmycie 18 px, podwójna cienka ramka); leży dokładnie na styku dwóch zdjęć (jedno nad drugim, oba w tej samej proporcji 4:3), a zdjęcia prześwitują przez szkło */
@media (max-width: 860px) {
  .exp2 { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; }
  .exp2__ph { position: relative; z-index: auto; top: auto; bottom: auto; left: auto; right: auto; grid-column: 1; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .exp2__ph--l { grid-row: 1; }
  .exp2__ph--r { grid-row: 2; }
  .exp2__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .exp2__panel { grid-column: 1; grid-row: 1 / span 2; align-self: center; z-index: 2; width: 100%; background: rgba(250, 249, 246, .25); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); border-width: 1px 0; border-style: solid; border-color: rgba(255, 255, 255, .75); box-shadow: none; padding: clamp(24px, 6.4vw, 34px) clamp(20px, 6vw, 32px); }
  .exp2__panel::before { inset: 9px; }
  .exp2__panel .sec-head { margin-bottom: clamp(12px, 3.4vw, 18px); }
  .exp2__panel p { line-height: 1.45; }
}

/* Portfolio na stronie głównej (od 861 px): galeria wypełnia ekran jak w referencji klienta: od krawędzi do krawędzi (mały margines boczny), małe odstępy,
   kafelki bez zaokrągleń i większe wiersze, rosnące z szerokością ekranu. Układ kafelków (bento) nadal układa JS. */
@media (min-width: 861px) {
  .portfolio > .container { max-width: none; width: 100%; padding-inline: clamp(8px, 1vw, 20px); }
  .portfolio .gallery { grid-auto-rows: clamp(150px, 16vw, 440px); gap: clamp(8px, .9vw, 18px); }
  .portfolio .gallery__item button { border-radius: 0; }
}

/* nagłówek Portfolio na stronie głównej (od 861 px): numer, tytuł, linia i zakładki filtrów są wyśrodkowane (przy pełnej szerokości galerii tytuł przy lewej
   krawędzi nachodził na boczną nawigację z kropkami, a zakładki dotykały prawej krawędzi) */
@media (min-width: 861px) {
  .portfolio .sec-head--row { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(16px, 2.6vh, 30px); }
  .portfolio .sec-head--row > div:first-child { display: flex; flex-direction: column; align-items: center; }
  .portfolio .sec-head--row .draw-line { margin-inline: auto; transform-origin: center; }
  .portfolio .filters { justify-content: center; }
}

/* =========================================================
   LINKI W STOPCE (Referencje, Polityka prywatności): na stronie głównej i na podstronach
   ========================================================= */
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; }
.foot-links a { color: inherit; padding-block: 2px; border-bottom: 1px solid rgba(236, 235, 232, .28); transition: color .3s, border-color .3s; }
.foot-links a:hover, .foot-links a:focus-visible { color: rgba(236, 235, 232, .95); border-color: currentColor; }

/* =========================================================
   STRONA PRAWNA: polityka prywatności i plików cookies
   Ciemny pas z tytułem pod nagłówkiem podstrony, niżej jasna kolumna tekstu (Lora) z wyróżnionym wstępem i spisem treści.
   Tabela celów przetwarzania na telefonie zamienia się w karty (etykiety kolumn z atrybutu data-label).
   ========================================================= */
.legal-hero {
  position: relative; color: var(--cream); background: var(--ink);
  padding: calc(var(--header-h) + clamp(44px, 10vh, 120px)) var(--gutter) clamp(36px, 7vh, 80px);
}
.legal-hero__inner { max-width: 860px; margin-inline: auto; }
.legal-hero .subhero__crumbs { margin-bottom: clamp(14px, 2.4vh, 24px); }
.legal-hero .sec-head { margin: 0; }
.legal-hero .sec-head__title { color: var(--cream); font-size: clamp(30px, 6vw, 68px); line-height: 1.04; }
.legal-hero .draw-line { color: var(--cream); }
.legal-hero__meta { margin: clamp(18px, 3vh, 28px) 0 0; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.7; letter-spacing: .02em; color: rgba(236, 235, 232, .78); }
.legal-hero__meta strong { color: var(--cream); font-weight: 700; }

.legal-sec { background: var(--cream); padding-top: clamp(36px, 6vh, 72px); }
.legal { font-family: var(--f-text); font-size: clamp(16px, .3vw + 15px, 18px); line-height: 1.75; color: var(--text); }
.legal p { margin: 0 0 1em; }
.legal a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.legal a:hover, .legal a:focus-visible { text-decoration-thickness: 2px; }
.legal strong { color: var(--ink); font-weight: 700; }
.legal section { scroll-margin-top: 24px; }
.legal h2 {
  margin: clamp(34px, 6vh, 60px) 0 .7em; padding-top: clamp(20px, 3vh, 30px); border-top: 1px solid var(--line);
  font-family: var(--f-head); font-weight: 800; font-size: clamp(20px, 1.2vw + 14px, 28px); line-height: 1.2; letter-spacing: -.005em; color: var(--ink);
}
.legal h3 { margin: 1.8em 0 .5em; font-family: var(--f-head); font-weight: 700; font-size: clamp(16px, .5vw + 14px, 19px); line-height: 1.3; color: var(--ink); }
.legal ul, .legal ol { margin: 0 0 1.2em; padding-left: 1.35em; }
.legal li { margin: 0 0 .45em; padding-left: .2em; }
.legal li::marker { color: var(--muted); }
.legal__box { margin: 0 0 clamp(22px, 3.6vh, 36px); padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 32px); background: var(--paper); border-left: 3px solid var(--ink); border-radius: 0 10px 10px 0; }
.legal__box p:last-child { margin-bottom: 0; }
.legal__toc { margin: 0; padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.6vw, 32px); border: 1px solid var(--line); border-radius: 10px; }
.legal__toc-title { margin: 0 0 .7em; font-family: var(--f-head); font-weight: 700; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.legal__toc ol { margin: 0; padding-left: 1.5em; }
.legal__toc li { margin-bottom: .35em; break-inside: avoid; }
@media (min-width: 720px) { .legal__toc ol { columns: 2; column-gap: 40px; } }
.legal__small { font-size: .85em; color: var(--muted); }
.legal__table { margin: 0 0 1.4em; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.legal__table table { width: 100%; border-collapse: collapse; font-size: .92em; line-height: 1.55; }
.legal__table th, .legal__table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal__table th { font-family: var(--f-head); font-weight: 700; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: var(--cream-2); }
.legal__table tbody tr:last-child td { border-bottom: 0; }
.legal__table td:first-child { font-weight: 600; color: var(--ink); }
@media (max-width: 760px) {
  .legal__table { overflow: visible; border: 0; background: none; }
  .legal__table table, .legal__table tbody, .legal__table tr, .legal__table td { display: block; width: 100%; }
  .legal__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .legal__table tr { margin: 0 0 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .legal__table td { padding: 12px 16px; }
  .legal__table td:last-child { border-bottom: 0; }
  .legal__table td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-family: var(--f-head); font-weight: 700; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
}

/* =========================================================
   REFERENCJE: film (odtwarzacz YouTube dopiero po kliknięciu) i lista opinii w jednej, wyśrodkowanej kolumnie, jak na dotychczasowej stronie,
   tylko w stylu serwisu: tekst w Lorze, podpis wersalikami (Montserrat), cienkie linie między opiniami
   ========================================================= */
.subhero--plain { min-height: 0; padding-bottom: clamp(36px, 7vh, 84px); }
.ref-video { padding-bottom: 0; }
.yt { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: var(--ink); }
.yt__btn { position: absolute; inset: 0; display: grid; place-items: center; color: var(--cream); }
.yt__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.55); transition: transform 1.2s var(--ease), filter .6s; }
.yt__btn:hover .yt__poster, .yt__btn:focus-visible .yt__poster { transform: scale(1.04); filter: saturate(.9) brightness(.7); }
.yt__play { position: relative; display: grid; place-items: center; width: clamp(64px, 9vw, 96px); aspect-ratio: 1; border: 1px solid rgba(236, 235, 232, .7); border-radius: 50%; background: rgba(11, 11, 11, .35); backdrop-filter: blur(4px); transition: background-color .35s, color .35s, transform .45s var(--ease); }
.yt__play svg { width: 42%; height: 42%; fill: currentColor; margin-left: 6%; }
.yt__btn:hover .yt__play, .yt__btn:focus-visible .yt__play { background: var(--cream); color: var(--ink); transform: scale(1.06); }
.yt__label { position: absolute; left: 0; right: 0; bottom: clamp(14px, 3vw, 28px); text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.ref-sec { padding-top: clamp(24px, 4vh, 48px); }
.ref-list { max-width: 760px; }
.ref { margin: 0; padding: clamp(30px, 5.4vh, 56px) 0; text-align: center; border-top: 1px solid var(--line); content-visibility: auto; contain-intrinsic-size: auto 280px; }
.ref:first-child { border-top: 0; }
.ref::before { content: "\201C"; display: block; height: .56em; margin-bottom: .2em; overflow: hidden; font-family: var(--f-text); font-size: clamp(52px, 5.4vw, 66px); line-height: 1; color: var(--muted); opacity: .5; }
.ref blockquote { margin: 0; }
.ref blockquote p { margin: 0 0 1em; font-family: var(--f-text); font-size: clamp(16px, .4vw + 14.6px, 19px); line-height: 1.78; color: var(--text); overflow-wrap: break-word; }
.ref blockquote p:last-child { margin-bottom: 0; }
.ref figcaption { margin-top: 1.5em; font-family: var(--f-head); font-weight: 700; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
.ref figcaption::before { content: ""; display: block; width: 28px; height: 1px; margin: 0 auto 14px; background: currentColor; opacity: .5; }

/* =========================================================
   SKRÓT „REFERENCJE” w nagłówku podstron: obok „Strona główna”. Na telefonie (dwa rzędy) leży w pierwszym rzędzie,
   za „Strona główna”, więc ma ten sam porządek co ona (order 2) i trochę ciaśniejsze odstępy, żeby zmieścić się od 320 px
   ========================================================= */
@media (max-width: 860px) {
  .subhead__ref { order: 2; margin-right: clamp(8px, 3vw, 22px); }
  .subhead__nav > a:first-child { margin-right: clamp(8px, 3vw, 22px); }
}
@media (max-width: 860px) {
  .subhead { column-gap: 0; }
  .subhead__nav > a:not(.subhead__contact) { letter-spacing: .04em; font-size: clamp(9px, 2.9vw, 12px); }
  .subhead__nav a.subhead__contact { letter-spacing: .06em; font-size: clamp(9px, 2.9vw, 12px); padding-inline: 10px !important; }
}

/* =========================================================
   ZGODA NA COOKIES: minimalistyczny pasek w rogu (na telefonie na całą szerokość u dołu), dwa równorzędne przyciski
   ========================================================= */
.foot-links__btn { padding: 2px 0; border: 0; border-bottom: 1px solid rgba(236, 235, 232, .28); background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; transition: color .3s, border-color .3s; }
.foot-links__btn:hover, .foot-links__btn:focus-visible { color: rgba(236, 235, 232, .95); border-color: currentColor; }

.consent {
  position: fixed; z-index: 940; left: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px);
  width: min(430px, calc(100vw - 24px)); padding: 18px 20px 16px;
  border: 1px solid var(--line-light); border-radius: 16px;
  background: rgba(11, 11, 11, .94); color: var(--cream);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  font-family: var(--f-head);
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s var(--ease), transform .6s var(--ease);
}
.consent[hidden] { display: none; }
.consent.is-in { opacity: 1; transform: none; }
.consent__text { margin: 0 0 14px; font-size: 12.5px; line-height: 1.6; color: rgba(236, 235, 232, .82); }
.consent__text a { color: var(--cream); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.consent__text a:hover, .consent__text a:focus-visible { text-decoration-thickness: 2px; }
.consent__actions { display: flex; gap: 10px; }
.consent__btn {
  flex: 1 1 0; min-height: 42px; padding: 0 16px;
  border: 1px solid var(--cream); border-radius: 999px; background: transparent; color: var(--cream);
  font: 700 11.5px/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  transition: background-color .3s, color .3s;
}
.consent__btn:hover, .consent__btn:focus-visible { background: var(--cream); color: var(--ink); }
@media (max-width: 560px) {
  .consent { left: 12px; right: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; transform: none; }
}