/* =========================================================
   Magdalena Szwoch – Fotograf okolicznościowy
   Styl strony wg projektu Figma „Madzia Fotograf”.

   Skalowanie:
   - desktop (≥ 900 px): jednostka --k = 1px przy treści 1408 px
     (ekran 1920 px), mniejsza proporcjonalnie na węższych ekranach;
   - mobile (< 900 px): jednostka --k = 1px przy ekranie 390 px.
   Wszystkie wymiary z Figmy są zapisane jako calc(N * var(--k)).
   ========================================================= */

:root {
  --krem: #fff6ec;
  --czekolada: #1d0f01;
  --czerwony: #d51c10;
  --szary: #d3d1d2;
  --linia: #d9d9d9;
  --bialy: #ffffff;

  --vw: 100vw;                       /* nadpisywane przez JS (bez paska przewijania) */
  --k: min(1px, calc((var(--vw) - 128px) / 1408));
  --cw: calc(1408 * var(--k));       /* szerokość treści */
  --m: calc((var(--vw) - var(--cw)) / 2); /* margines boczny */

  --nav-h: 64px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --f-szeryf: "Italiana", "Didot", "Bodoni 72", Georgia, serif;
  --f-tekst: "Raleway", "Helvetica Neue", Arial, sans-serif;
}

@media (max-width: 899.98px) {
  :root {
    --k: clamp(0.82px, calc(var(--vw) / 390), 1.3px);
    --cw: calc(358 * var(--k));
    --m: calc((var(--vw) - var(--cw)) / 2);
  }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--krem);
  color: var(--czekolada);
  font-family: var(--f-tekst);
  font-weight: 400;
  line-height: normal;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "lnum" 1, "pnum" 1;
}
img, svg { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; font-weight: inherit; }
.czerwony { color: var(--czerwony); }
.ciemny { color: var(--czekolada); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.d-only { display: initial; }
.m-only { display: none; }
@media (max-width: 899.98px) {
  .d-only { display: none !important; }
  .m-only { display: initial; }
}
:focus-visible { outline: 2px solid var(--czerwony); outline-offset: 3px; }

/* ---------- przyciski (obramowane, hover: czerwone tło) ---------- */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(16 * var(--k));
  border: 1px solid var(--szary);
  background: transparent;
  color: var(--czekolada);
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.btn:hover, .btn:focus-visible {
  background: var(--czerwony);
  border-color: var(--czerwony);
  color: var(--krem);
}
.btn svg { flex: none; }
.btn svg [fill]:not([fill="none"]) { fill: currentColor; }
.btn svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* =========================================================
   NAWIGACJA
   ========================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: var(--sbw, 0px);
  height: var(--nav-h);
  z-index: 100;
  pointer-events: none;
}
.nav__bar {
  position: absolute; inset: 0;
  pointer-events: auto;
  transition: transform .5s var(--ease-out), opacity .5s var(--ease-out);
}
.nav__bg {
  position: absolute; inset: 0;
  background: var(--krem);
  transition: opacity .6s var(--ease-io);
}
.nav__line {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--szary);
  transform-origin: left center;
  transition: transform .5s var(--ease-out), background-color .6s var(--ease-io);
}
.nav__logo {
  position: absolute; top: 0;
  left: var(--m);
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: center;
  padding: 0 21px 0 22px;
  border: 1px solid var(--szary);
  font-weight: 600; font-size: 24px; white-space: nowrap;
  color: var(--czekolada);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.nav__logo:hover { background: var(--czerwony); border-color: var(--czerwony); color: var(--krem); }
.nav__kontakt {
  position: absolute; top: 0;
  right: calc(var(--m) + 118px);
  width: 103px; height: var(--nav-h);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--szary);
  font-weight: 600; font-size: 16px;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, opacity .5s var(--ease-io);
}
.nav__kontakt:hover { background: var(--czerwony); border-color: var(--czerwony); color: var(--krem); }
.nav__burger {
  position: absolute;
  top: 10px; right: calc(var(--m) - 8px);
  width: 54px; height: 44px;
}
.nav__burger span {
  position: absolute; right: 8px; height: 3px; width: 38px;
  background: var(--czekolada);
  transition: transform .6s var(--ease-out), opacity .4s ease, background-color .6s ease, width .6s var(--ease-out);
}
.nav__burger span:nth-child(1) { top: 8px; }
.nav__burger span:nth-child(2) { top: 20px; }
.nav__burger span:nth-child(3) { top: 32px; }
/* odstępy co 12 px: przy skalowaniu ekranu 125%/150% wszystkie belki renderują się identycznie */

/* intro: pasek pojawia się po 1,15 s (Navbar – intro: Ukryty → Widoczny) */
.nav.is-hidden .nav__bar { transform: translateY(-24px); opacity: 0; }
.nav.is-hidden .nav__line { transform: scaleX(0); }

/* menu otwarte */
.nav.menu-open .nav__bg { opacity: 0; }
.nav.menu-open .nav__line { background: var(--krem); }
.nav.menu-open .nav__logo { border-color: transparent; color: var(--bialy); background: transparent; }
.nav.menu-open .nav__kontakt { opacity: 0; pointer-events: none; }
.nav.menu-open .nav__burger span { background: var(--bialy); }
.nav.menu-open .nav__burger span:nth-child(1) { transform: translateY(12px) rotate(45deg); }
.nav.menu-open .nav__burger span:nth-child(2) { transform: scaleX(0); opacity: 0; }
.nav.menu-open .nav__burger span:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0;
  z-index: 90;
  background: var(--czerwony);
  transform: translateY(-100%);
  transition: transform .5s var(--ease-io);
  overflow-y: auto;
  visibility: hidden;
}
.menu.is-open {
  transform: translateY(0);
  transition: transform .6s var(--ease-out);
  visibility: visible;
}
.menu.is-closing { visibility: visible; }
.menu__inner { position: relative; min-height: calc(820 * var(--k)); height: 100%; margin-right: var(--sbw, 0px); }
.menu__foto { position: absolute; object-fit: cover; }
.menu__foto--1 { left: var(--m); top: calc(172 * var(--k)); width: calc(221.33 * var(--k)); height: calc(336 * var(--k)); }
.menu__foto--2 { left: calc(var(--m) + 237.33 * var(--k)); top: calc(172 * var(--k)); width: calc(221.33 * var(--k)); height: calc(336 * var(--k)); }
.menu__foto--3 { left: var(--m); top: calc(524 * var(--k)); width: calc(458.67 * var(--k)); height: calc(275 * var(--k)); }
.menu__lista {
  position: absolute;
  right: var(--m); top: calc(150 * var(--k));
  width: calc(696 * var(--k));
  display: flex; flex-direction: column; align-items: flex-end;
  gap: calc(4 * var(--k));
  margin: 0; padding: 0; list-style: none;
}
.menu__lista li { width: 100%; }
.menu__lista a {
  display: flex; align-items: center; justify-content: flex-end;
  gap: calc(28 * var(--k));
  height: calc(125 * var(--k));
  font-family: var(--f-szeryf);
  font-size: calc(112 * var(--k));
  line-height: 1.12;
  color: var(--bialy);
}
.menu__lista a span { transition: transform .3s var(--ease-out); }
.menu__lista a img {
  width: calc(22 * var(--k)); height: calc(44 * var(--k));
  opacity: 0; transition: opacity .3s var(--ease-out);
  position: absolute; right: 0;
}
.menu__lista a { position: relative; }
.menu__lista a:hover span, .menu__lista a:focus-visible span { transform: translateX(calc(-50 * var(--k))); }
.menu__lista a:hover img, .menu__lista a:focus-visible img { opacity: 1; }
.menu__pobierz {
  position: absolute;
  right: var(--m); top: calc(776 * var(--k));
  font-size: max(15px, calc(20 * var(--k)));
  color: var(--bialy);
  text-decoration: underline;
  text-underline-position: from-font;
}

@media (max-width: 899.98px) {
  .nav__logo { left: calc(var(--m) - 16 * var(--k)); padding: 0 21px 0 22px; }
  .nav__kontakt { display: none; }
  .nav__burger { right: calc(var(--m) - 8px); }
  .menu__inner { min-height: 760px; }
  .menu__lista {
    top: calc(96 * var(--k)); right: var(--m);
    width: var(--cw);
    gap: calc(2 * var(--k));
  }
  .menu__lista a {
    font-size: calc(57.6 * var(--k));
    height: calc(65 * var(--k));
    gap: calc(14.4 * var(--k));
  }
  .menu__lista a img { width: calc(11 * var(--k)); height: calc(22 * var(--k)); }
  .menu__lista a:hover span { transform: translateX(calc(-25 * var(--k))); }
  .menu__foto--1 { left: var(--m); top: calc(402 * var(--k)); width: calc(171 * var(--k)); height: calc(240 * var(--k)); }
  .menu__foto--2 { left: calc(var(--m) + 187 * var(--k)); top: calc(402 * var(--k)); width: calc(171 * var(--k)); height: calc(240 * var(--k)); }
  .menu__foto--3 { display: none; }
  .menu__pobierz { right: auto; left: var(--m); top: calc(682 * var(--k)); font-size: 16px; }
}

/* =========================================================
   ANIMACJE WSPÓLNE
   Elementy z klasą .anim czekają na .is-in na rodzicu [data-anim].
   ========================================================= */
.js [data-anim] .a-fade-up { opacity: 0; transform: translateY(var(--dy, 30px)); }
.js [data-anim] .a-fade { opacity: 0; }
.js [data-anim] .a-line-l { transform: scaleX(0); transform-origin: left center; }
.js [data-anim] .a-line-r { transform: scaleX(0); transform-origin: right center; }
.js [data-anim] .a-line-d { transform: scaleY(0); transform-origin: center top; }
.js [data-anim] .a-slide-l { transform: translateX(-100%); }
.js [data-anim] .a-slide-r { transform: translateX(100%); }
.a-fade-up, .a-fade, .a-line-l, .a-line-r, .a-line-d, .a-slide-l, .a-slide-r {
  transition-property: opacity, transform;
  transition-timing-function: var(--ease-out);
  transition-duration: var(--t, .8s);
  transition-delay: var(--d, 0s);
}
.js [data-anim].is-in .a-fade-up,
.js [data-anim].is-in .a-fade { opacity: 1; transform: none; }
.js [data-anim].is-in .a-line-l,
.js [data-anim].is-in .a-line-r,
.js [data-anim].is-in .a-line-d,
.js [data-anim].is-in .a-slide-l,
.js [data-anim].is-in .a-slide-r { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; }
}

/* linie */
.hr { position: absolute; height: 1px; background: var(--szary); }
.hr--jasna { background: var(--linia); }

/* nagłówki sekcji (dwukolorowe) */
.h-sekcja { font-weight: 400; font-size: calc(40 * var(--k)); }
@media (max-width: 899.98px) { .h-sekcja { font-size: calc(28 * var(--k)); } }

/* =========================================================
   STRONA GŁÓWNA – HERO
   ========================================================= */
.hero { position: relative; height: calc(1166 * var(--k)); overflow: hidden; }
.hero__bialy { position: absolute; left: 0; top: calc(343 * var(--k)); width: calc(var(--m) + 577 * var(--k)); height: calc(737 * var(--k)); background: var(--bialy); }
.hero__foto { position: absolute; left: var(--m); top: calc(343 * var(--k)); width: calc(577 * var(--k)); height: calc(737 * var(--k)); object-fit: cover; }
.hero__l1 { left: calc(var(--m) + 593 * var(--k)); right: 0; top: calc(520 * var(--k)); }
.hero__l2 { left: calc(var(--m) + 593 * var(--k)); top: calc(520 * var(--k)); width: 1px; height: calc(646 * var(--k)); }
.hero__l3 { left: 0; width: calc(var(--m) + 594 * var(--k)); top: calc(1165 * var(--k)); }
.hero__tytul {
  position: absolute;
  left: calc(var(--m) + 9 * var(--k));
  top: calc(343 * var(--k));
  height: calc(200 * var(--k));
  display: flex; align-items: flex-end;
  font-family: var(--f-szeryf);
  font-size: calc(170 * var(--k));
  line-height: normal;
  white-space: nowrap;
  color: var(--czekolada);
  --dy: calc(60 * var(--k));
}
.hero__podtytul {
  position: absolute;
  right: var(--m);
  top: calc(557 * var(--k));
  font-size: calc(40 * var(--k));
  text-align: right;
  white-space: nowrap;
  --dy: calc(24 * var(--k));
}
.hero__btn {
  position: absolute;
  left: calc(var(--m) + 593 * var(--k));
  top: calc(1080 * var(--k));
  width: calc(222 * var(--k)); height: calc(86 * var(--k));
  font-size: max(15px, calc(24 * var(--k)));
  gap: calc(16 * var(--k));
  --dy: calc(16 * var(--k));
}
.hero__btn svg { width: calc(23 * var(--k)); height: calc(13 * var(--k)); }

/* sekwencja hero (Hero – intro: kroki 0→4) */
.hero .a-slide-l { --t: .6s; --d: .15s; }
.hero .hero__l1 { --t: .6s; --d: .15s; }
.hero .hero__l3 { --t: .6s; --d: .15s; }
.hero .hero__l2 { --t: .4s; --d: .75s; transition-timing-function: var(--ease-io); }
.hero .hero__foto, .hero .hero__tytul { --t: .7s; --d: 1.35s; }
.hero .hero__podtytul, .hero .hero__btn { --t: .5s; --d: 2.1s; }

@media (max-width: 899.98px) {
  .hero { height: calc(800 * var(--k)); }
  .hero__bialy { top: calc(180 * var(--k)); width: calc(var(--m) + 358 * var(--k)); height: calc(457 * var(--k)); }
  .hero__foto { top: calc(180 * var(--k)); width: calc(358 * var(--k)); height: calc(457 * var(--k)); }
  .hero__l1 { left: calc(var(--m) + 74 * var(--k)); top: calc(661 * var(--k)); }
  .hero__l2 { left: calc(var(--m) + 74 * var(--k)); top: calc(661 * var(--k)); height: calc(139 * var(--k)); }
  .hero__l3 { width: calc(var(--m) + 75 * var(--k)); top: calc(799 * var(--k)); }
  .hero__tytul {
    left: var(--m); top: calc(88 * var(--k)); height: auto;
    font-size: calc(72 * var(--k)); line-height: calc(85 * var(--k));
    white-space: normal; display: block;
    --dy: calc(30 * var(--k));
  }
  .hero__podtytul { top: calc(677 * var(--k)); font-size: calc(22 * var(--k)); }
  .hero__btn {
    left: auto; right: calc(var(--m) + 1 * var(--k));
    top: calc(731 * var(--k));
    width: calc(178 * var(--k)); height: calc(69 * var(--k));
    font-size: calc(19.2 * var(--k));
    gap: calc(12.8 * var(--k));
  }
  .hero__btn svg { width: calc(18 * var(--k)); height: calc(10 * var(--k)); }
}

/* =========================================================
   INTRO TEKST
   ========================================================= */
.intro { position: relative; height: calc(720 * var(--k)); margin-top: calc(14 * var(--k)); }
.intro__tekst {
  position: absolute; left: 50%; top: calc(290 * var(--k));
  width: calc(695 * var(--k)); margin-left: calc(-347.5 * var(--k));
  font-weight: 500; font-size: calc(20 * var(--k)); letter-spacing: 0.01em;
  text-align: center; font-feature-settings: "liga" 0;
  --dy: calc(40 * var(--k)); --t: .9s;
}
.intro__kursywa {
  position: absolute; left: 50%; top: calc(412 * var(--k));
  width: calc(695 * var(--k)); margin-left: calc(-347.5 * var(--k));
  font-weight: 500; font-style: italic; font-size: calc(20 * var(--k)); letter-spacing: 0.01em;
  text-align: center; font-feature-settings: "liga" 0;
  --dy: calc(20 * var(--k)); --d: 1.05s; --t: .8s;
}
.intro__linia { left: calc(50% - 347.5 * var(--k)); right: 0; top: calc(456 * var(--k)); --t: .9s; }

@media (max-width: 899.98px) {
  .intro { height: calc(319 * var(--k)); margin-top: 0; }
  .intro__tekst {
    top: calc(56 * var(--k)); width: var(--cw); left: var(--m); margin-left: 0;
    font-size: calc(16 * var(--k));
  }
  .intro__kursywa {
    top: calc(205 * var(--k)); width: var(--cw); left: var(--m); margin-left: 0;
    font-size: calc(16 * var(--k));
  }
  .intro__linia { left: var(--m); top: calc(263 * var(--k)); }
}

/* =========================================================
   KARTY PORTFOLIO (strona główna)
   ========================================================= */
.karty { margin-top: calc(98 * var(--k)); padding: 0 var(--m); }
.karty__rzad { display: flex; gap: calc(16 * var(--k)); }
.slot { position: relative; flex: 1 1 0; aspect-ratio: 459 / 608; overflow: hidden; }
.karta { position: absolute; inset: 0; display: block; overflow: hidden; }
.karta img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1);
  transition: filter .6s var(--ease-out);
}
.karta__gradient {
  position: absolute; left: 0; right: 0; top: 100%; height: 14%;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5) 50%);
  transition: transform .6s var(--ease-out);
}
.karta__podpis {
  position: absolute; left: 0; right: 0; bottom: 3.45%;
  padding: 0 calc(12 * var(--k));
  text-align: center; line-height: 1.15;
  font-size: calc(32 * var(--k)); color: var(--bialy);
  opacity: 0; transition: opacity .6s var(--ease-out);
}
/* hover: cz-b → kolor (0,3 s) → gradient (0,1 s) → napis (0,1 s) */
.karta.is-on img { filter: grayscale(0); transition: filter .3s var(--ease-out); }
.karta.is-on .karta__gradient { transform: translateY(-100%); transition: transform .1s var(--ease-out) .32s; }
.karta.is-on .karta__podpis { opacity: 1; transition: opacity .1s var(--ease-out) .42s; }

.slot__zaslona { position: absolute; inset: 0; background: var(--krem); transform-origin: center bottom; transform: scaleY(0); pointer-events: none; }
.js .karty[data-anim] .slot__zaslona { transform: scaleY(1); }
.js .karty[data-anim] .karta { opacity: 0; transform: translateY(calc(-80 * var(--k))); }
.karty .slot__zaslona, .karty .karta { transition: transform .5s var(--ease-out), opacity .5s var(--ease-out); transition-delay: var(--d, 0s); }
.js .karty[data-anim].is-in .slot__zaslona { transform: scaleY(0); }
.js .karty[data-anim].is-in .karta { opacity: 1; transform: none; }
.slot:nth-child(2) { --d: .5s; }
.slot:nth-child(3) { --d: 1s; }

.karty__link {
  display: block; margin-top: calc(32 * var(--k));
  text-align: center; color: var(--czerwony);
  font-size: max(15px, calc(24 * var(--k)));
  text-decoration: underline; text-underline-position: from-font;
}

@media (max-width: 899.98px) {
  .karty { margin-top: calc(16 * var(--k)); }
  .karty__rzad { flex-direction: column; }
  .slot { flex: none; width: 100%; aspect-ratio: 358 / 474; }
  .slot:nth-child(2), .slot:nth-child(3) { --d: 0s; }
  .karta__podpis { font-size: calc(24 * var(--k)); bottom: calc(18 * var(--k)); padding: 0 calc(12 * var(--k)); }
  .karty__link { margin-top: calc(24 * var(--k)); font-size: calc(18 * var(--k)); }
}

/* =========================================================
   OPINIE – karuzela (pętla)
   ========================================================= */
.opinie { margin-top: calc(304 * var(--k)); height: 496px; overflow: hidden; position: relative; }
.opinie__pas { display: flex; align-items: flex-start; gap: 16px; width: max-content; will-change: transform; }
.opinie__kolumna { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.opinia {
  flex: none;
  background: var(--bialy);
  padding: 28px 32px 32px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}
.opinia--szeroka { width: 459px; }
.opinia__podpis { font-weight: 500; font-size: 13px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--czerwony); }
.opinia__grupa { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
.opinia__grupa--madzia { align-items: flex-end; }
.dymek {
  max-width: 326px;
  padding: 14px 18px;
  background: var(--krem);
  color: var(--czekolada);
  font-size: 16px; line-height: 1.5;
}
.dymek--madzia { background: var(--czekolada); color: var(--bialy); }
.dymek--stala { width: 326px; }

@media (max-width: 899.98px) {
  .opinie { margin-top: calc(48 * var(--k)); }
}

/* linia między opiniami a „O mnie” */
.linia2 { position: relative; height: calc(200 * var(--k)); margin-top: calc(80 * var(--k)); }
.linia2 .hr { left: 0; right: calc(50% - 347.5 * var(--k)); top: 0; }
@media (max-width: 899.98px) {
  .linia2 { height: calc(56 * var(--k)); margin-top: calc(40 * var(--k)); }
  .linia2 .hr { left: var(--m); right: 0; }
}

/* =========================================================
   O MNIE
   ========================================================= */
.omnie { position: relative; height: calc(608 * var(--k)); overflow: hidden; }
.omnie__bialy { position: absolute; top: 0; bottom: 0; left: var(--m); right: 0; background: var(--bialy); --t: .8s; }
.omnie__foto { position: absolute; left: var(--m); top: 0; width: calc(458.67 * var(--k)); height: 100%; object-fit: cover; --d: .85s; --t: .8s; }
.omnie__tresc {
  position: absolute; top: 0; height: 100%;
  left: calc(var(--m) + 593.33 * var(--k));
  width: calc(696 * var(--k));
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: calc(32 * var(--k));
}
.omnie__tresc .h-sekcja { --d: 1.7s; --t: .6s; --dy: 0px; }
.omnie__tekst { font-size: max(15px, calc(24 * var(--k))); color: #000; --d: 2.35s; --t: .6s; --dy: 0px; }
.omnie__tekst + .omnie__tekst { --d: 2.35s; }
.omnie__btn { width: calc(267 * var(--k)); padding: calc(16 * var(--k)) calc(40 * var(--k)); font-size: max(15px, calc(24 * var(--k))); gap: calc(9 * var(--k)); --d: 2.35s; --t: .6s; --dy: 0px; }
.omnie__btn svg { width: calc(26 * var(--k)); height: calc(26 * var(--k)); }

@media (max-width: 899.98px) {
  .omnie { height: auto; padding-bottom: calc(33 * var(--k)); }
  .omnie__bialy { bottom: 0; }
  .omnie__foto { position: relative; left: auto; margin-left: var(--m); width: var(--cw); height: calc(474 * var(--k)); }
  .omnie__tresc {
    position: relative; left: auto; top: auto; height: auto;
    margin-left: var(--m); width: var(--cw);
    padding: calc(32 * var(--k)) calc(16 * var(--k)) calc(7 * var(--k));
    gap: calc(20 * var(--k));
  }
  .omnie__tekst { font-size: calc(16 * var(--k)); }
  .omnie__btn { width: calc(227 * var(--k)); padding: calc(13.6 * var(--k)) calc(34 * var(--k)); font-size: calc(20.4 * var(--k)); gap: calc(7.65 * var(--k)); }
  .omnie__btn svg { width: calc(22 * var(--k)); height: calc(22 * var(--k)); }
}

/* =========================================================
   KONTAKT
   ========================================================= */
.kontakt { position: relative; margin-top: calc(246 * var(--k)); padding-top: calc(88 * var(--k)); padding-bottom: calc(33 * var(--k)); }
.kontakt__linia { left: 0; right: calc(50% - 277 * var(--k)); top: calc(141 * var(--k)); --t: .8s; }
.kontakt__kolumna {
  position: relative;
  width: calc(697 * var(--k)); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: calc(56 * var(--k));
}
.kontakt__naglowek { display: flex; flex-direction: column; align-items: center; gap: calc(32 * var(--k)); text-align: center; width: 100%; }
.kontakt__naglowek .h-sekcja { --d: .8s; --t: .6s; --dy: calc(20 * var(--k)); }
.kontakt__opis { font-size: max(15px, calc(20 * var(--k))); --d: 1.45s; --t: .6s; --dy: 0px; }
.form {
  width: calc(400 * var(--k));
  display: flex; flex-direction: column; align-items: center; gap: calc(32 * var(--k));
  --d: 2.1s; --t: .6s; --dy: calc(20 * var(--k));
}
.form__pola { width: 100%; display: flex; flex-direction: column; gap: calc(40 * var(--k)); }
.pole { position: relative; display: block; }
.pole input, .pole textarea {
  display: block; width: 100%;
  border: 0; border-bottom: 1px solid var(--szary);
  background: transparent; border-radius: 0;
  padding: 0 0 calc(8 * var(--k));
  font-size: max(15px, calc(18 * var(--k)));
  line-height: normal;
  color: var(--czekolada);
  outline: none;
  transition: border-color .3s ease;
  resize: none; overflow: hidden;
}
.pole textarea { min-height: calc(30 * var(--k)); }
.pole input::placeholder, .pole textarea::placeholder { color: var(--czekolada); opacity: .5; }
.pole input:focus, .pole textarea:focus { border-bottom-color: var(--czekolada); }
.pole.is-error input, .pole.is-error textarea { border-bottom-color: var(--czerwony); }
.pole__blad { display: block; margin-top: 6px; font-size: 13px; color: var(--czerwony); min-height: 0; }
.form__btn { height: calc(73.1 * var(--k)); padding: calc(17 * var(--k)) calc(34 * var(--k)); font-size: max(15px, calc(20.4 * var(--k))); gap: calc(5.78 * var(--k)); min-width: calc(225 * var(--k)); }
.form__btn svg { width: calc(18.7 * var(--k)); height: calc(18.7 * var(--k)); }
.form__status { font-size: max(14px, calc(16 * var(--k))); text-align: center; min-height: 1.2em; }
.form__status.is-ok { color: var(--czekolada); }
.form__status.is-err { color: var(--czerwony); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 899.98px) {
  .kontakt { margin-top: calc(24 * var(--k)); padding-top: calc(40 * var(--k)); padding-bottom: calc(24 * var(--k)); }
  .kontakt__linia { right: auto; width: calc(var(--m) + 235 * var(--k)); top: calc(81 * var(--k)); }
  .kontakt__kolumna { width: var(--cw); gap: calc(48 * var(--k)); }
  .kontakt__naglowek { gap: calc(20 * var(--k)); }
  .kontakt__opis { font-size: calc(16 * var(--k)); color: #000; }
  .form { width: calc(286 * var(--k)); }
  .form__pola { gap: calc(32 * var(--k)); }
  .pole input, .pole textarea { font-size: max(15px, calc(15 * var(--k))); padding-bottom: calc(4 * var(--k)); }
  .form__btn { height: calc(86 * var(--k)); padding: calc(20 * var(--k)) calc(40 * var(--k)); font-size: calc(24 * var(--k)); gap: calc(8 * var(--k)); min-width: calc(267 * var(--k)); }
  .form__btn svg { width: calc(22 * var(--k)); height: calc(22 * var(--k)); }
}

/* =========================================================
   STOPKA
   ========================================================= */
.stopka { position: relative; height: calc(388 * var(--k)); }
.strona-glowna .stopka { margin-top: calc(171 * var(--k)); }
.stopka__pas { position: absolute; left: 0; right: 0; top: calc(127 * var(--k)); height: calc(199 * var(--k)); background: var(--czerwony); }
.stopka__logo { position: absolute; left: calc(var(--m) + 20 * var(--k)); top: 0; width: calc(1381.57 * var(--k)); height: calc(169.83 * var(--k)); }
.stopka__logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.stopka__logo .gora { clip-path: inset(0 0 25.1% 0); }
.stopka__logo .dol { clip-path: inset(74.9% 0 0 0); }
.stopka__kol {
  position: absolute; top: calc(177 * var(--k));
  width: calc(340 * var(--k));
  display: flex; flex-direction: column;
  color: var(--bialy);
  font-size: max(14px, calc(20 * var(--k)));
  line-height: 1.3;
}
.stopka__kol--nav { left: var(--m); }
.stopka__kol--kontakt { left: calc(var(--m) + 356 * var(--k)); }
.stopka__kol h2 { font-weight: 400; font-size: inherit; padding-bottom: calc(8 * var(--k)); border-bottom: 1px solid var(--krem); margin-bottom: calc(19 * var(--k)); }
.stopka__kol a { font-weight: 500; width: max-content; }
.stopka__kol a:hover { text-decoration: underline; text-underline-position: from-font; }
.stopka__znak { position: absolute; right: calc(var(--m) + 0.5 * var(--k)); top: calc(182 * var(--k)); width: calc(80.5 * var(--k)); height: calc(90 * var(--k)); transition: opacity .3s ease; }
.stopka__znak img { width: 100%; height: 100%; }
.stopka__znak:hover { opacity: .8; }
.stopka__prawa {
  position: absolute; left: var(--m); top: calc(348 * var(--k));
  display: flex; align-items: center; gap: calc(20 * var(--k));
  font-size: max(12px, calc(14 * var(--k))); color: var(--czerwony);
}
.stopka__prawa a { text-decoration: underline; text-underline-position: from-font; }

@media (max-width: 899.98px) {
  .stopka { height: calc(379 * var(--k)); }
  .strona-glowna .stopka { margin-top: calc(24 * var(--k)); }
  .stopka__pas { top: calc(33 * var(--k)); height: calc(264 * var(--k)); }
  .stopka__logo { left: var(--m); width: var(--cw); height: calc(44 * var(--k)); }
  .stopka__kol { width: calc(206 * var(--k)); font-size: calc(16 * var(--k)); }
  .stopka__kol h2 { width: calc(171 * var(--k)); padding-bottom: calc(5 * var(--k)); margin-bottom: calc(11 * var(--k)); }
  .stopka__kol--nav { top: calc(57 * var(--k)); left: var(--m); }
  .stopka__kol--kontakt { top: calc(173 * var(--k)); left: var(--m); }
  .stopka__znak { right: var(--m); top: calc(57 * var(--k)); width: calc(48 * var(--k)); height: calc(54 * var(--k)); }
  .stopka__prawa { top: calc(313 * var(--k)); width: var(--cw); flex-direction: column; align-items: flex-start; gap: calc(4 * var(--k)); font-size: 12px; }
}

/* =========================================================
   PODSTRONY – wspólny nagłówek
   ========================================================= */
.naglowek { position: relative; }
.naglowek--portfolio { height: calc(463 * var(--k)); }
.naglowek--portfolio .h-sekcja { position: absolute; left: 0; right: 0; top: calc(267 * var(--k)); text-align: center; --dy: calc(30 * var(--k)); --d: .2s; }
.naglowek--portfolio .hr { left: 0; width: calc(50% + 467 * var(--k)); top: calc(334 * var(--k)); --d: .2s; }
.naglowek__opis { font-weight: 500; font-size: max(15px, calc(20 * var(--k))); line-height: 1.5; }
.naglowek--portfolio .naglowek__opis { position: absolute; left: 50%; margin-left: calc(-348 * var(--k)); width: calc(696 * var(--k)); top: calc(355 * var(--k)); text-align: center; --dy: calc(20 * var(--k)); --d: 1.05s; --t: .6s; }

@media (max-width: 899.98px) {
  .naglowek--portfolio { height: calc(301 * var(--k)); }
  .naglowek--portfolio .h-sekcja { top: calc(112 * var(--k)); }
  .naglowek--portfolio .hr { width: calc(var(--m) + 358 * var(--k)); top: calc(157 * var(--k)); }
  .naglowek--portfolio .naglowek__opis { left: var(--m); margin-left: 0; width: var(--cw); top: calc(173 * var(--k)); font-size: calc(16 * var(--k)); }
}

/* =========================================================
   PORTFOLIO – filtry i galeria
   ========================================================= */
.galeria-sekcja { padding: 0 var(--m); }
.filtry {
  display: flex; justify-content: center; gap: calc(16 * var(--k));
  margin: 0; padding: 0; list-style: none;
}
.filtr {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: calc(18 * var(--k)) calc(32 * var(--k));
  border: 1px solid var(--szary);
  font-weight: 500; font-size: max(15px, calc(24 * var(--k)));
  color: var(--czekolada);
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.filtr:hover { border-color: var(--czerwony); }
.filtr.is-active { background: var(--czerwony); border-color: var(--czerwony); color: var(--krem); }
.galeria { position: relative; margin-top: calc(64 * var(--k)); overflow: hidden; transition: height .7s var(--ease-io); }
.galeria__el {
  position: absolute; overflow: hidden; margin: 0;
  transition: opacity .5s ease;
}
.galeria.is-animating .galeria__el {
  transition: left .7s var(--ease-io), top .7s var(--ease-io), width .7s var(--ease-io), height .7s var(--ease-io), opacity .5s ease;
}
.galeria__el img { width: 100%; height: 100%; object-fit: cover; background: #efe6dc; }
.galeria__el.is-hidden { opacity: 0; pointer-events: none; }
.galeria__zaslona {
  position: absolute; inset: -1px; background: var(--krem);
  transform-origin: center bottom;
  transition: transform .6s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.galeria__el.is-revealed .galeria__zaslona { transform: scaleY(0); }
.no-js .galeria__zaslona { display: none; }
.galeria-stopka-odstep { height: calc(240 * var(--k)); }

@media (max-width: 899.98px) {
  .galeria-sekcja { padding: 0; }
  .filtry {
    justify-content: flex-start; gap: calc(8 * var(--k));
    overflow-x: auto; padding: 0 var(--m);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .filtry::-webkit-scrollbar { display: none; }
  .filtry li { scroll-snap-align: start; scroll-margin-left: var(--m); }
  .filtr { padding: calc(14.4 * var(--k)) calc(25.6 * var(--k)); font-size: calc(19.2 * var(--k)); }
  .galeria { margin: calc(32 * var(--k)) var(--m) 0; }
  .galeria-stopka-odstep { height: calc(64 * var(--k)); }
}

/* =========================================================
   POBIERZ ZDJĘCIA
   ========================================================= */
.pobierz { position: relative; padding-top: calc(156 * var(--k)); padding-bottom: calc(279 * var(--k)); display: flex; flex-direction: column; align-items: center; }
.pobierz__tytul { position: relative; text-align: center; --dy: calc(30 * var(--k)); --d: .2s; }
.pobierz__linia { position: relative; width: calc(577 * var(--k)); height: 1px; background: var(--szary); margin-top: calc(20 * var(--k)); --d: .2s; }
.pobierz__opis { width: calc(577 * var(--k)); margin-top: calc(20 * var(--k)); text-align: center; --dy: calc(20 * var(--k)); --d: 1.05s; --t: .6s; }
.pobierz__form { width: calc(384 * var(--k)); margin-top: calc(84 * var(--k)); display: flex; flex-direction: column; align-items: center; --d: 1.5s; --t: .6s; --dy: calc(20 * var(--k)); }
.pobierz__form .form__pola { gap: calc(42.97 * var(--k)); }
.pobierz__form .pole input { font-size: max(15px, calc(20.14 * var(--k))); padding-bottom: calc(5.37 * var(--k)); }
.pobierz__btn { margin-top: calc(53 * var(--k)); min-width: calc(184 * var(--k)); padding: 0 calc(40 * var(--k)); white-space: nowrap; height: calc(86 * var(--k)); font-size: max(15px, calc(24 * var(--k))); gap: calc(8 * var(--k)); }
.pobierz__btn svg { width: calc(20 * var(--k)); height: calc(20 * var(--k)); }
.pobierz__blad { margin-top: calc(20 * var(--k)); min-height: 1.3em; font-size: max(13px, calc(16 * var(--k))); color: var(--czerwony); text-align: center; }
.pobierz__info { margin-top: calc(12 * var(--k)); font-size: max(13px, calc(15 * var(--k))); opacity: .6; text-align: center; --d: 1.5s; }
.pobierz__info a { text-decoration: underline; text-underline-position: from-font; }

@media (max-width: 899.98px) {
  .pobierz { padding-top: calc(112 * var(--k)); padding-bottom: calc(96 * var(--k)); }
  .pobierz__linia { width: var(--cw); margin-top: calc(12 * var(--k)); }
  .pobierz__opis { width: var(--cw); font-size: calc(16 * var(--k)); }
  .pobierz__form { width: calc(286 * var(--k)); margin-top: calc(40 * var(--k)); }
  .pobierz__form .form__pola { gap: calc(32 * var(--k)); }
  .pobierz__form .pole input { font-size: max(15px, calc(15 * var(--k))); padding-bottom: calc(4 * var(--k)); }
  .pobierz__btn { margin-top: calc(28 * var(--k)); }
  .pobierz__blad { margin-top: calc(14 * var(--k)); font-size: 13px; }
  .pobierz__info { width: var(--cw); margin-top: calc(10 * var(--k)); font-size: 13px; }
}

/* =========================================================
   INFORMACJE PRAWNE
   ========================================================= */
.prawne-naglowek { position: relative; height: calc(502 * var(--k)); }
.prawne-naglowek .h-sekcja { position: absolute; left: var(--m); top: calc(200 * var(--k)); --dy: calc(30 * var(--k)); --d: .2s; }
.prawne-naglowek .hr { left: 0; width: calc(var(--m) + 696 * var(--k)); top: calc(267 * var(--k)); --d: .2s; }
.prawne-naglowek .naglowek__opis { position: absolute; left: var(--m); top: calc(288 * var(--k)); width: calc(696 * var(--k)); --dy: calc(20 * var(--k)); --d: 1.05s; --t: .6s; }
.prawne-naglowek__data { position: absolute; left: var(--m); top: calc(364 * var(--k)); font-size: max(13px, calc(15 * var(--k))); opacity: .6; }
.js [data-anim].is-in .prawne-naglowek__data { opacity: .6; }
.prawne-sekcja {
  border-top: 1px solid var(--szary);
  padding: calc(96 * var(--k)) var(--m);
  display: flex; gap: calc(16 * var(--k)); align-items: flex-start;
}
.prawne-sekcja > .h-sekcja { flex: none; width: calc(593 * var(--k)); }
.prawne-tresc { width: calc(696 * var(--k)); display: flex; flex-direction: column; gap: calc(48 * var(--k)); }
.prawne-blok { display: flex; flex-direction: column; gap: calc(16 * var(--k)); }
.prawne-blok h3 { font-weight: 500; font-size: max(17px, calc(24 * var(--k))); }
.prawne-blok p { font-size: max(15px, calc(18 * var(--k))); line-height: 1.6; }
.prawne-blok a { text-decoration: underline; text-underline-position: from-font; }
.prawne-pytania {
  border-top: 1px solid var(--szary);
  padding: calc(96 * var(--k)) var(--m) calc(200 * var(--k));
  display: flex; flex-direction: column; align-items: center; gap: calc(24 * var(--k));
  text-align: center;
}
.prawne-pytania p { width: calc(696 * var(--k)); }
.prawne-pytania a { text-decoration: underline; text-underline-position: from-font; }

@media (max-width: 899.98px) {
  .prawne-naglowek { height: calc(296 * var(--k)); }
  .prawne-naglowek .h-sekcja { top: calc(112 * var(--k)); }
  .prawne-naglowek .hr { width: calc(var(--m) + 179 * var(--k)); top: calc(157 * var(--k)); }
  .prawne-naglowek .naglowek__opis { top: calc(173 * var(--k)); width: var(--cw); font-size: calc(16 * var(--k)); }
  .prawne-naglowek__data { top: calc(233 * var(--k)); font-size: 13px; }
  .prawne-sekcja { flex-direction: column; gap: calc(24 * var(--k)); padding: calc(48 * var(--k)) var(--m) calc(56 * var(--k)); }
  .prawne-sekcja > .h-sekcja { width: 100%; }
  .prawne-tresc { width: 100%; gap: calc(32 * var(--k)); }
  .prawne-blok { gap: calc(12 * var(--k)); }
  .prawne-blok h3 { font-size: calc(20 * var(--k)); }
  .prawne-blok p { font-size: calc(16 * var(--k)); }
  .prawne-pytania { padding: calc(48 * var(--k)) var(--m) calc(72 * var(--k)); gap: calc(20 * var(--k)); }
  .prawne-pytania p { width: 100%; font-size: calc(16 * var(--k)); }
}

/* przewijanie do kotwic (pod paskiem nawigacji) */
#portfolio, #opinie, #o-mnie { scroll-margin-top: calc(120 * var(--k)); }
#kontakt { scroll-margin-top: calc(32 * var(--k)); }
@media (max-width: 899.98px) {
  #portfolio, #opinie, #o-mnie { scroll-margin-top: calc(88 * var(--k)); }
  #kontakt { scroll-margin-top: calc(88 * var(--k)); }
}

/* 404 */
.blad404 { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; text-align: center; padding: 120px var(--m) 40px; }
.blad404 .btn { padding: 20px 40px; font-size: 20px; }

/* =========================================================
   BANER COOKIES (Figma: „Baner cookies” / „Baner cookies – mobile”)
   ========================================================= */
.cookies {
  position: fixed; z-index: 80;
  left: var(--m); bottom: 24px;
  width: var(--cw);
  background: var(--bialy);
  border: 1px solid var(--szary);
  padding: 28px 32px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 48px;
  opacity: 0; transform: translateY(24px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.cookies[hidden] { display: none; }
.cookies.is-visible { opacity: 1; transform: none; }
.cookies__tresc { display: flex; flex-direction: column; gap: 10px; }
.cookies__tytul { font-weight: 400; font-size: 24px; }
.cookies__opis { max-width: 760px; font-size: 16px; line-height: 1.5; }
.cookies__opis a { text-decoration: underline; text-underline-position: from-font; }
.cookies__przyciski { display: flex; gap: 16px; flex: none; }
.cookies__btn {
  padding: 16px 32px; font-weight: 500; font-size: 18px; white-space: nowrap;
  border: 1px solid var(--szary); color: var(--czekolada); background: transparent;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.cookies__btn--odrzuc:hover, .cookies__btn--odrzuc:focus-visible { background: var(--czerwony); border-color: var(--czerwony); color: var(--krem); }
.cookies__btn--akceptuj { background: var(--czerwony); border-color: var(--czerwony); color: var(--krem); }
.cookies__btn--akceptuj:hover, .cookies__btn--akceptuj:focus-visible { background: var(--czekolada); border-color: var(--czekolada); }
.stopka__cookies { color: var(--czerwony); text-decoration: underline; text-underline-position: from-font; font-size: inherit; }

@media (max-width: 899.98px) {
  .cookies {
    bottom: 16px; flex-direction: column; align-items: stretch; gap: 20px;
    padding: 24px 20px;
  }
  .cookies__tresc { gap: 8px; }
  .cookies__tytul { font-size: 20px; }
  .cookies__opis { font-size: 14px; }
  .cookies__przyciski { gap: 12px; }
  .cookies__btn { flex: 1 1 0; padding: 16px 12px; }
  .stopka { height: calc(395 * var(--k)); }
}