/* =========================================================================
   PIESKI WARTE POZNANIA — style.css

   SPIS TREŚCI
   01. Fonty
   02. Zmienne (kolory, typografia, odstępy)
   03. Reset i baza
   04. Elementy wspólne (container, eyebrow, tytuły, przyciski, wzór)
   05. Wzór w tle sekcji (desktop)
   06. Header i nawigacja (+ menu mobilne)
   07. Hero
   08. Sesje w studiu (cennik, cechy, dodatki, kroki, podejście, galeria, CTA)
   09. Projekt (tekst, zdjęcie, liczby, feed IG)
   10. Placeholdery zdjęć i zajawki rolek (GIF / MP4)
   11. Historie, O mnie, Wydarzenia, Zbiórka, Współprace
   12. Kontakt (dane, studio, mapa)
   13. Stopka
   14. Przycisk „do góry” i panel polityki (bottom sheet)
   15. Animacje (pojawianie się, keyframes)
   16. Responsywność
   17. Ograniczony ruch (prefers-reduced-motion)
   ========================================================================= */


/* =========================================================================
   01. FONTY — pliki lokalnie w /assets/fonts (bez zewnętrznych serwerów)
   ========================================================================= */
@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/Satoshi-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}



/* OUTFIT (nagłówki) — Google Fonts, licencja OFL. Font zmienny: jeden plik = wszystkie grubości 100–900.
   Dwa pliki = dwa zakresy znaków (podstawowa łacina + polskie znaki). */
@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/Outfit-Variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/Outfit-Variable-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* =========================================================================
   02. ZMIENNE
   ========================================================================= */
:root {
  /* Kolory marki */
  --navy:  #003F98;   /* ciemny niebieski */
  --blue:  #005FDB;   /* jasny niebieski */
  --beige: #F7F4F2;   /* beż (tło) */
  --white: #FFFFFF;

  /* Kolory pomocnicze (pochodne marki) */
  --text:        var(--navy);
  --text-soft:   rgba(0, 63, 152, .72);
  --line:        rgba(0, 63, 152, .14);
  --on-dark:     var(--beige);
  --on-dark-soft: rgba(247, 244, 242, .72);
  --shadow:      0 20px 50px -20px rgba(0, 40, 110, .35);

  /* Typografia */
  --font-display: "Outfit", "Satoshi", system-ui, sans-serif;   /* nagłówki */
  --font-body:    "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Układ */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(76px, 12vh, 140px);    /* odstęp zależny od wysokości ekranu - sekcja mieści się w widoku */
  --psst-gap: calc(var(--section-y) * 1.5);    /* odstęp nad i pod naklejką „Psssst!” */
  --view: calc(100vh - 2 * var(--section-y)); /* wysokość dostępna na treść sekcji (limit zdjęć na desktopie) */
  --header-h: 76px;
  --radius-lg: 32px;
  --radius-md: 24px;
  --radius-sm: 16px;

  /* Ruch */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}


/* =========================================================================
   03. RESET I BAZA
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;       /* bez „gumkowania” i odbijania strony na iPhonie / Macu */
  scroll-behavior: smooth;         /* fallback, gdy Lenis jest wyłączony (np. telefon) */
  background: var(--beige);
}

body {
  margin: 0;
  overscroll-behavior: none;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
  background: var(--beige);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3 { overflow-wrap: break-word; }   /* awaryjnie łamie bardzo długie słowa na wąskich ekranach */
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--blue); color: var(--white); }

/* Kotwice nie chowają się pod przyklejonym headerem */
section[id] { scroll-margin-top: var(--header-h); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Daleki skok do sekcji: treść na chwilę przygasa (JS dodaje .is-jumping na <html>) */
main,
.footer { transition: opacity .18s ease; }
.is-jumping main,
.is-jumping .footer { opacity: 0; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--beige);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }


/* =========================================================================
   04. ELEMENTY WSPÓLNE
   ========================================================================= */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--white { background: var(--white); }
.section--beige { background: var(--beige); }
.section--navy  { background: var(--navy); color: var(--on-dark); }
.section--blue  { background: var(--blue); color: var(--on-dark); --on-dark-soft: rgba(255, 255, 255, .85); }

/* Nadtytuł z kropką marki */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}
.eyebrow--light { color: var(--on-dark); }

.section-head { margin-bottom: clamp(32px, 5vh, 56px); }

.section-title {
  margin-top: 16px;
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -.02em;
  word-spacing: .08em;          /* Outfit 800 ma ciasne spacje (np. „Cześć, jestem”) */
}

/* Przyciski */
.btn {
  --btn-bg: var(--blue);
  --btn-fg: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border: 2px solid var(--btn-bg);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  transition: transform .35s var(--ease-bounce), background-color .25s, color .25s, border-color .25s;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(0); }

.btn--primary:hover { --btn-bg: var(--navy); }

.btn--ghost {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn--ghost:hover { background: var(--navy); color: var(--beige); }

.btn--light { --btn-bg: var(--beige); --btn-fg: var(--navy); }
.btn--light:hover { --btn-bg: var(--white); }

.btn--block { width: 100%; }

/* Wzór marki (assets/img/pattern.svg) jest używany jako mask-image:
   kolor wzoru = background-color elementu, rozmiar = mask-size. */


/* =========================================================================
   05. WZÓR W TLE SEKCJI (tylko desktop)
   Delikatny, nieruchomy pas wzoru w 1/4 szerokości od prawej krawędzi.
   Kolor = odcień tła sekcji (--section-pattern), ustawiany niżej per tło.
   ========================================================================= */
.hero,
.section { --section-pattern: #F0EBE7; }            /* beż → odrobinę ciemniejszy beż */
.section--white { --section-pattern: #F7F4F2; }     /* biel → beż marki */
.section--navy  { --section-pattern: #0A4AA6; }     /* granat → odrobinę jaśniejszy granat */
.section--blue  { --section-pattern: #1A6AE2; }     /* niebieski → odrobinę jaśniejszy niebieski */

.hero::before,
.section::before {
  content: "";
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25%;
  width: 150px;
  background-color: var(--section-pattern);
  -webkit-mask-image: url("../assets/img/pattern.svg");
  mask-image: url("../assets/img/pattern.svg");
  -webkit-mask-size: 150px auto;
  mask-size: 150px auto;
  pointer-events: none;
}
.hero > *,
.section > * { position: relative; z-index: 1; }   /* treść nad wzorem */
.section.section--plain::before { display: none; }   /* sekcje bez wzoru w tle (Sesje, Przebieg, Współprace) */



/* =========================================================================
   06. HEADER I NAWIGACJA
   ========================================================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}
/* Tło headera (beż + rozmycie) jest osobną warstwą. backdrop-filter na samym .header
   „zamykałby” w nim menu mobilne (position: fixed) i menu otwierałoby się skokami. */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(247, 244, 242, .86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  opacity: 0;
  transition: opacity .35s;
}
.header.is-scrolled::before { opacity: 1; }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Pasek postępu przewijania */
.header__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--blue);
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
}

/* Logo */
.logo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--navy);
}
.logo__mark {
  width: 46px;
  height: 31px;
  fill: currentColor;
  transition: transform .5s var(--ease-bounce);
}
.logo:hover .logo__mark { transform: rotate(-8deg) scale(1.08); }

/* Piesek w logo - ruch ze wspólnych klas .dog-* (sekcja 15) */
.logo__mouth,
.logo__eye { fill: var(--beige); }      /* „dziurki” w kolorze tła headera */
.menu-open .logo__mouth,
.menu-open .logo__eye { fill: var(--navy); }   /* na granatowym menu mobilnym */
.logo__text {
  font-weight: 900;
  font-size: 11px;
  line-height: .98;
  letter-spacing: .02em;
}

/* Linki menu */
.nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav__list {
  display: flex;
  gap: clamp(32px, 3.2vw, 52px);
}
.nav__link {
  position: relative;
  padding-block: 6px;
  font-weight: 500;
  font-size: 16px;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav__link.is-active { color: var(--blue); }

.nav__cta { padding: 12px 22px; }

/* Burger (mobile) */
.burger {
  position: relative;
  z-index: 2;
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
}
.burger span {
  position: absolute;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--beige);
  transition: transform .4s var(--ease), top .4s var(--ease);
}
.burger span:first-child { top: 19px; }
.burger span:last-child  { top: 27px; }

body.menu-open { overflow: hidden; }   /* blokada przewijania pod otwartym menu */
.menu-open .burger { background: var(--beige); }
.menu-open .burger span { background: var(--navy); }
.menu-open .burger span:first-child { top: 23px; transform: rotate(45deg); }
.menu-open .burger span:last-child  { top: 23px; transform: rotate(-45deg); }
.menu-open .logo { color: var(--beige); transition: color .2s .12s; }   /* zmienia kolor, gdy granatowe koło już je przykryje */
body.menu-open .to-top { opacity: 0; visibility: hidden; }   /* chowa przycisk pod otwartym menu */


/* =========================================================================
   07. HERO
   ========================================================================= */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + 48px);
  overflow: clip;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
  padding-bottom: 96px;
}

.hero__title {
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(44px, 6.4vw, 92px);
  line-height: .95;
  letter-spacing: -.03em;
}
.hero__accent {
  display: block;
  color: var(--blue);
}

.hero__sub {
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
}

.hero__lead {
  margin-top: 12px;
  max-width: 46ch;
  font-size: clamp(18px, 1.6vw, 21px);
  color: var(--text-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

/* Karta z pieskiem */
.hero__visual {
  position: relative;
  perspective: 1000px;
}

.hero-card {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1.05;
  border-radius: 40px;
  background: var(--navy);
  overflow: hidden;
  box-shadow: var(--shadow);
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .6s var(--ease);
}

.hero-card__pattern {
  position: absolute;
  inset: -40px 0;
  background-color: var(--blue);
  -webkit-mask-image: url("../assets/img/pattern.svg");
  mask-image: url("../assets/img/pattern.svg");
  -webkit-mask-size: 180px auto;
  mask-size: 180px auto;
}

.hero-dog {
  position: relative;
  width: 64%;
  overflow: visible;
  animation: float 6s ease-in-out infinite;
}
.hero-dog__head  { fill: var(--beige); }
.hero-dog__mouth,
.hero-dog__eye   { fill: var(--navy); }
.hero-dog__nose  { fill: var(--beige); }

/* Ruch oczka, noska i pyszczka: wspólne klasy .dog-eye / .dog-nose / .dog-mouth (sekcja 15) */

/* Naklejki wokół karty */
.sticker {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: var(--shadow);
  line-height: 1.15;
}
.sticker strong { font-weight: 900; font-size: 26px; }
.sticker__small {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
}

/* Rozmieszczenie: kociamber lewo-góra, kejter prawo nieco niżej, studio lewo nisko, Miłosz prawy dół */
.sticker--cat {
  top: 7%;
  left: -8%;
}
.sticker--dog {
  top: 24%;
  right: -7%;
}
.sticker--studio {
  top: 68%;
  left: -9%;
  background: var(--blue);
  color: var(--white);
}
.sticker--studio strong { font-size: 20px; }
.sticker--studio .sticker__small { color: rgba(255, 255, 255, .8); }
.sticker--person {
  right: -6%;
  bottom: -5%;
}
.sticker--person strong { font-size: 18px; }
.sticker__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 0 rgba(0, 95, 219, .5);
  animation: pulse 2s infinite;
}



/* =========================================================================
   08. SESJE ZDJĘCIOWE
   ========================================================================= */
.pricing {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 24px;
  align-items: stretch;
}

/* Karta cenowa */
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: var(--on-dark);
  overflow: hidden;
}

.price-card__label {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(247, 244, 242, .12);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.price-card__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 24px;
  font-weight: 900;
  font-size: clamp(84px, 10vw, 128px);
  line-height: .9;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.price-card__price small {
  font-size: .32em;
  letter-spacing: 0;
}
.price-card__meta {
  margin-top: 10px;
  color: var(--on-dark-soft);
  font-weight: 500;
}

.checklist {
  display: grid;
  gap: 14px;
  margin: 32px 0 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(247, 244, 242, .18);
}
.checklist li {
  position: relative;
  padding-left: 36px;
  line-height: 1.45;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue);
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  width: 6px;
  height: 11px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.price-card .btn { margin-top: auto; }

/* Cechy sesji */
.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.feature {
  padding: 32px;
  border-radius: var(--radius-md);
  background: var(--beige);
  transition: transform .45s var(--ease), background-color .3s, color .3s;
}
.feature:hover {
  transform: translateY(-6px);
  background: var(--blue);
  color: var(--white);
}
.feature__icon {
  width: 52px;
  height: 52px;
  padding: 13px;
  border-radius: 50%;
  background: var(--blue);
  fill: none;
  stroke: var(--white);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: background-color .3s, stroke .3s, transform .5s var(--ease-bounce);
}
.feature:hover .feature__icon {
  background: var(--white);
  stroke: var(--blue);
  transform: rotate(-10deg) scale(1.08);
}
.feature h3 {
  margin-top: 22px;
  font-weight: 900;
  font-size: 21px;
  line-height: 1.2;
}
.feature p {
  margin-top: 8px;
  font-size: 16px;
  opacity: .8;
}

/* Dodatki */
/* lewa kolumna: karta z ceną rozciągnięta na wysokość, pod nią dopisek */
.pricing__main { display: flex; flex-direction: column; gap: 14px; }
.pricing__main .price-card { flex: 1; }
.pricing__note { padding-inline: 8px; font-size: 15px; color: var(--text-soft); }
.pricing__side { display: flex; flex-direction: column; gap: 20px; }
.pricing__side .features { flex: 1; }   /* kafle wypełniają wysokość - obie kolumny kończą się równo */

.addons {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 48px;
  align-items: center;
  padding: 28px clamp(24px, 4vw, 44px);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
}
.addons__title {
  font-weight: 900;
  font-size: 22px;
}
.addons__list { display: grid; gap: 4px; }
.addons__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-block: 8px;
}
.addons__row dt { font-weight: 500; }
.addons__row::after {
  content: "";
  order: 1;
  flex: 1;
  border-bottom: 2px dotted var(--line);
}
.addons__row dd {
  order: 2;
  font-weight: 900;
  color: var(--blue);
  white-space: nowrap;
}
.addons__note {
  grid-column: 1 / -1;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--text-soft);
}
.addons__note a { font-weight: 700; color: var(--blue); }

/* Kroki - pionowa lista z przerywaną linią łączącą numery */
.steps__list {
  position: relative;
  display: grid;
  gap: 20px;
}
.steps__list::before,
.steps__list::after {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 27px;
  border-left: 2px dashed var(--line);
}
/* niebieska linia „rysuje się” przy przewijaniu (JS ustawia --line) */
.steps__list::after {
  border-left: 2px solid var(--blue);
  transform-origin: top;
  transform: scaleY(var(--line, 0));
}
.step.is-visible .step__num { animation: step-pop .6s var(--ease-bounce) both; animation-delay: calc(var(--d, 0) * 120ms + 150ms); }
.step {
  position: relative;
  z-index: 1;                   /* numer przykrywa linię łączącą kroki */
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 20px;
  align-items: start;
}
.step__num {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  background: var(--white);
  color: var(--blue);
  font-weight: 900;
  font-size: 20px;
  transition: background-color .4s, color .4s;
}
.step.is-visible .step__num {
  background: var(--blue);
  color: var(--white);
  transition-delay: calc(var(--d, 0) * 150ms + 300ms);
}
.step h4 {
  margin-top: 8px;
  font-weight: 900;
  font-size: 19px;
}
.step p {
  grid-column: 2;
  margin-top: 2px;
  font-size: 15px;
  color: var(--text-soft);
}

/* CTA */
.cta-band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: clamp(32px, 5vh, 56px);
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-lg);
  background: var(--blue);
  color: var(--white);
  overflow: hidden;
}
/* Wzór w boxach CTA: jeden pionowy szlaczek z prawej (góra - dół) */
.cta-band__pattern {
  position: absolute;
  top: 0;
  bottom: 0;
  right: clamp(20px, 3vw, 40px);
  width: 110px;
  background-color: var(--navy);
  -webkit-mask-image: url("../assets/img/pattern.svg");
  mask-image: url("../assets/img/pattern.svg");
  -webkit-mask-size: 110px auto;
  mask-size: 110px auto;
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
  opacity: .5;
}
.cta-band > *:not(.cta-band__pattern) { position: relative; }
.cta-band h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.cta-band p {
  margin-top: 10px;
  opacity: .85;
}


/* =========================================================================
   09. PROJEKT
   ========================================================================= */
.project {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
}
.project__copy > p:not(.eyebrow) { margin-top: 16px; }
.project__copy .section-title { margin-bottom: 8px; }
.project__copy p { color: var(--on-dark-soft); }
.project__copy .project__lead {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--on-dark);
}

/* Zdjęcie + nałożona wizytówka */
.project__media {
  position: relative;
  padding-bottom: 48px;
}
.project__card {
  position: absolute;
  left: -14%;
  bottom: 0;
  width: 46%;
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .6);
  transform: rotate(-6deg);
  transition: transform .7s var(--ease);
}
.project__media:hover .project__card { transform: rotate(-2deg) scale(1.04); }

/* Liczby projektu */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(28px, 4vh, 44px);
  padding-top: 24px;
  border-top: 1px solid rgba(247, 244, 242, .18);
}
.stat__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin-top: 8px;
  color: var(--on-dark-soft);
}

/* Social media */
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}
.social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  transition: background-color .25s, color .25s, border-color .25s, transform .35s var(--ease-bounce);
}
.social svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.social svg .fill { fill: currentColor; stroke: none; }
.social:hover { transform: translateY(-3px); }

.section--navy .social:hover { background: var(--beige); border-color: var(--beige); color: var(--navy); }
.socials--dark .social:hover { background: var(--navy); border-color: var(--navy); color: var(--beige); }

/* Link ze strzałką */
.link-arrow {
  font-weight: 700;
  white-space: nowrap;
}
.link-arrow span {
  display: inline-block;
  transition: transform .35s var(--ease);
}
.link-arrow:hover span { transform: translateX(6px); }



/* =========================================================================
   10. PLACEHOLDERY ZDJĘĆ I ZAJAWKI ROLEK
   .ph      = tymczasowe miejsce na zdjęcie (z opisem, co ma się tam znaleźć)
   .photo   = docelowe <img> / <video> — te same proporcje co .ph
   .reel    = link do rolki z zajawką (GIF/MP4) i przyciskiem „play”
   ========================================================================= */
.ph {
  --ph-bg: #E9E3DD;                       /* spokojne, ciepłe tło zamiast zdjęcia */
  --ph-ink: rgba(0, 63, 152, .45);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--ph-bg);
  overflow: hidden;
}
/* Ikonka aparatu */
.ph::before {
  content: "";
  width: 40px;
  height: 40px;
  background-color: var(--ph-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Wariant na granatowym tle */
.ph--blue {
  --ph-bg: rgba(247, 244, 242, .08);
  --ph-ink: rgba(247, 244, 242, .5);
}

.ph__label {
  max-width: 80%;
  color: var(--ph-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.ph--45,  .photo--45  { aspect-ratio: 4 / 5; }
.ph--43,  .photo--43  { aspect-ratio: 4 / 3; }
.ph--11,  .photo--11  { aspect-ratio: 1; }
.ph--916, .photo--916 { aspect-ratio: 9 / 16; }

.photo {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.photo--right { object-position: 75% center; }
.photo--face-high { object-position: 55% 12%; }   /* kadr w górę - pyszczek wysoko na zdjęciu */
.photo--face-mid  { object-position: 50% 22%; }
.photo--face-top  { object-position: 50% 4%; }   /* kadr przesunięty w prawo (gdy główny motyw jest z boku) */

/* Zajawka rolki */
.reel {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.reel .ph,
.reel .photo {
  border-radius: 0;
  transition: transform .8s var(--ease);
}
.reel:hover .ph,
.reel:hover .photo { transform: scale(1.04); }

.reel__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
  animation: play-pulse 2.4s infinite;
  transition: transform .4s var(--ease-bounce);
}
.reel__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--blue);
  transform: translate(-50%, -50%);
}
.reel:hover .reel__play { transform: scale(1.12); }
.reel .ph::before { visibility: hidden; }   /* w zajawce rolki zamiast aparatu jest przycisk play */
.reel .ph__label { margin-top: 64px; }      /* etykieta pod przyciskiem play */

.reel__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* =========================================================================
   11. HISTORIE, O MNIE, WYDARZENIA, ZBIÓRKA, WSPÓŁPRACE
   ========================================================================= */

/* Nagłówek sekcji z tekstem obok (desktop) */
.section-head--split {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px 64px;
  align-items: end;
}
.section-intro {
  max-width: 46ch;
  color: var(--text-soft);
}
.section--navy .section-intro { color: var(--on-dark-soft); }

/* --- Historie (karty spotkań) --- */
.stories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.story {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.story:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.story .reel { border-radius: 0; }

/* Pokaz zdjęć (.slides): 3 zdjęcia jedno na drugim, widoczne to z .is-active (JS przełącza co 2 s).
   Używany w Historiach, Wydarzeniach i Pomagamy; element z [data-slides] uruchamia pokaz na hover. */
.slides { aspect-ratio: 4 / 5; }
.slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  opacity: 0;
  transform: scale(1);
  transition: opacity .7s ease, transform 2.8s var(--ease);
}
.slides img.is-active { opacity: 1; }
.is-playing .slides img.is-active { transform: scale(1.06); }   /* mały zoom podczas pokazu */
.story--low .slides img { object-position: 50% 62%; }   /* kadr niżej, gdy zwierzak jest na dole zdjęcia (Bigos) */
.slides .reel__play,
.slides .reel__tag { z-index: 1; }

.story__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 24px 26px 28px;
}
.story__place {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.story__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.05;
}
.story__text {
  flex: 1;
  font-size: 16px;
  color: rgba(255, 255, 255, .85);
}
.story .link-arrow { margin-top: 8px; color: var(--white); }
/* link z ikoną serwisu (Instagram) przed tekstem */
.link-arrow--icon { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; }
.link-arrow--icon svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.link-arrow--icon svg .fill { fill: currentColor; stroke: none; }

/* Linki w nagłówku sekcji (rolki IG/TikTok, zaproszenie na wydarzenie) */
.section-intro .link-arrow { color: var(--text); }
.section--navy .section-intro .link-arrow { color: var(--on-dark); }
.section-intro > .link-arrow,

/* --- Okazje (6 równych kart, pierwsza wyróżniona kolorem) --- */
.occasions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.occasion {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  align-content: start;
  gap: 12px 16px;
  padding: 24px 26px;
  border: 1px solid rgba(247, 244, 242, .2);
  border-radius: var(--radius-lg);
  background: rgba(247, 244, 242, .13);
  transition: transform .45s var(--ease), background-color .3s;
}
.occasion:hover {
  transform: translateY(-5px);
  background: rgba(247, 244, 242, .19);
}
.occasion h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.15;
}
.occasion p {
  grid-column: 1 / -1;
  font-size: 16px;
  font-weight: 500;
  color: rgba(247, 244, 242, .92);
}
.occasion__icon {
  width: 48px;
  height: 48px;
  padding: 12px;
  border-radius: 50%;
  background: var(--blue);
  fill: none;
  stroke: var(--white);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .5s var(--ease-bounce);
}
.occasion:hover .occasion__icon { transform: rotate(-10deg) scale(1.08); }

/* Wyróżniona karta (prezent) — niebieska */
.occasion--feature {
  border: 0;
  background: var(--blue);
}
.occasion--feature:hover { background: var(--blue); }
.occasion--feature p { color: rgba(255, 255, 255, .85); }
.occasion--feature .occasion__icon { background: var(--beige); stroke: var(--blue); }
.occasion--feature .link-arrow { grid-column: 1 / -1; justify-self: start; color: var(--white); }


/* --- Przebieg sesji: podejście do zwierząt (lewo) + kroki (prawo) --- */
.process {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: stretch;
}
.process .steps { display: flex; flex-direction: column; justify-content: center; }
.approach__title {
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.process__intro > p:not(.eyebrow) {
  margin-top: 12px;
  color: var(--text-soft);
}
.process__intro strong { color: var(--text); }
.process__media { margin-top: 24px; }
.process__after { margin-top: 24px; }

/* --- Sesje: galeria --- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(150px, 16vw, 220px);
  gap: 16px;
}
.gallery__item {
  display: block;
  height: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: zoom-in;
}
.gallery__item img { transition: transform .6s var(--ease); }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item--tall { grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }
.gallery__item--narrow-only { display: none; }   /* 6. zdjęcie tylko na tablecie i telefonie */
.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }

/* --- O mnie --- */
.about {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
}
.about__media { position: relative; }
.about__badge {
  position: absolute;
  right: -20px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: var(--shadow);
  font-weight: 900;
  line-height: 1.2;
}
.about__badge svg { width: 40px; height: 27px; fill: var(--blue); flex: none; }
.about__badge small { font-weight: 500; font-size: 13px; color: var(--text-soft); }

.about__lead {
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.25;
}
.about__text > p:not(.eyebrow):not(.about__lead) {
  margin-top: 16px;
  color: var(--text-soft);
}
.about__text .about__outro { margin-top: 28px; }
.about__linkedin { display: inline-block; margin-top: 16px; }

.worlds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 32px;
}
.world {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 16px;
  align-items: start;
  padding: 18px 22px;
  border-radius: var(--radius-md);
  background: var(--white);
  transition: transform .45s var(--ease);
}
.world:hover { transform: translateY(-5px); }
.world__ico {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 18px;
}
.world h3 {
  margin-top: 0;
  font-weight: 900;
  font-size: 18px;
}
.world p {
  grid-column: 2;
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-soft);
}

/* --- Wydarzenia --- */
.events {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.event {
  border-radius: var(--radius-lg);
  background: rgba(247, 244, 242, .07);
  overflow: hidden;
}
.event .reel { border-radius: 0; }
.event .slides { aspect-ratio: 4 / 3; }
.event .slides img { object-position: 50% 20%; }
.event__body { padding: 26px 28px 30px; }
.event__body h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 30px);
}
.event__body p {
  margin: 8px 0 16px;
  color: var(--on-dark-soft);
}


/* --- Zbiórka (Bigos / Azorek) --- */
.cause {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: stretch;
}
.cause__text { align-self: center; }
.cause__media .photo { height: 100%; }
.cause__media .slides { aspect-ratio: 1; }
.cause__media .slides img { object-position: 50% 30%; }
.cause__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.05;
}
.cause__text > p:not(.eyebrow) {
  margin-top: 16px;
  color: var(--text-soft);
}
.partners-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.partners-inline li {
  padding: 6px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

.fundraiser {
  margin-top: 28px;
  padding: 26px 28px;
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--navy);
}
.fundraiser__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
}
.fundraiser__title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.15;
}
.fundraiser__text {
  margin: 8px 0 20px;
  font-size: 16px;
  color: var(--text-soft);
}

/* --- Współprace --- */
.collab {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
}
.collab__text p:not(.eyebrow) {
  margin: 24px 0 32px;
  color: var(--text-soft);
}
.partners__label {
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.partners__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.partner {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--beige);
  transition: transform .45s var(--ease), background-color .3s, box-shadow .3s;
}
.partner:hover { transform: translateY(-5px); background: var(--white); box-shadow: var(--shadow); }
.partners__grid li { display: flex; }
.partner { width: 100%; }
.partner img { width: auto; height: clamp(28px, 3vw, 44px); max-width: 72%; object-fit: contain; }
.partner__logo--light { filter: brightness(0); opacity: .85; }   /* białe logo (Avenida) - na jasnym tle przyciemnione */


/* --- Nagłówek z przyciskami po prawej (Historie) --- */
.section-intro--under { margin-top: 16px; }
/* Sesje: długi tytuł na całą szerokość, na desktopie w jednej linii */
.section-head--wide .section-title { max-width: none; }
.price-card__note { margin-top: 12px; max-width: 34ch; font-size: 15px; color: var(--on-dark-soft); }
.head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-self: end;
}

/* Przycisk obrysowany - na hover wypełnia się granatem „po okręgu”, zaczynając od ikony */
.btn-outline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  color: var(--navy);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  transition: color .35s var(--ease);
}
.btn-outline::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 34px;                    /* środek ikony: padding 24px + połowa ikony 10px */
  z-index: -1;
  width: 260%;                  /* koło wystarczająco duże, by od ikony objąć cały przycisk */
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--navy);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .5s var(--ease);
}
.btn-outline:hover { color: var(--beige); }
.btn-outline:hover::before { transform: translate(-50%, -50%) scale(1); }
.btn-outline svg {
  flex: none;                   /* w ciasnym rzędzie ikona nie znika */
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.btn-outline svg .fill { fill: currentColor; stroke: none; }

/* --- „Psssst!” w nagłówku Sesji - mała naklejka --- */
.psst {
  width: fit-content;
  max-width: 100%;
  margin: clamp(32px, 5vh, 48px) auto 0;   /* na końcu sekcji, na środku */
  padding: 18px 30px;
  border-radius: var(--radius-md);
  background: var(--blue);
  color: var(--white);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  box-shadow: var(--shadow);
  rotate: -2deg;                /* osobna właściwość - animacja pojawiania się nadpisuje tylko transform */
}
.psst strong {
  margin-right: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5em;
  color: var(--beige);
}

/* --- Przebieg: czas trwania + małe zdjęcie obok --- */
.process__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}
.duration {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 24px;
  border-radius: var(--radius-md);
  background: var(--navy);
  color: var(--white);
}
.duration__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
}
.duration__value {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 6vw, 84px);
  line-height: .9;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.duration__value small { font-size: .32em; letter-spacing: 0; }
.process__facts .process__media { position: relative; min-height: 160px; margin-top: 0; }
/* zdjęcie dopasowuje się do wysokości boxu z czasem trwania (nie rozpycha wiersza) */
.process__facts .photo { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }

/* --- Wydarzenia: karta z zaproszeniem --- */
.event--invite {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(28px, 3vw, 40px);
  border: 2px dashed rgba(247, 244, 242, .3);
  background: rgba(247, 244, 242, .06);
}
.event--invite h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 32px);
}
.event--invite p { color: var(--on-dark-soft); }
.event__icon {
  width: 52px;
  height: 52px;
  padding: 13px;
  border-radius: 50%;
  background: var(--beige);
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* =========================================================================
   12. KONTAKT
   ========================================================================= */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
}

.contact__line {
  display: grid;
  gap: 4px;
  padding-block: 22px;
  border-bottom: 2px solid var(--line);
}
.contact__line:first-child { padding-top: 0; }
.contact__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.contact__value {
  font-weight: 900;                /* Satoshi — cyfry i e-mail czytelniejsze niż w foncie nagłówków */
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.15;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  transition: color .25s, transform .4s var(--ease);
}
.contact__value--mail { font-size: clamp(20px, 2.2vw, 28px); }
a.contact__line:hover .contact__value { color: var(--blue); transform: translateX(6px); }

.note-card {
  margin-top: 36px;
  padding: 28px;
  border-radius: var(--radius-md);
  background: var(--white);
}
.note-card h3 {
  font-weight: 900;
  font-size: 20px;
}
.note-card p {
  margin-top: 8px;
  font-size: 16px;
  color: var(--text-soft);
}

/* Wizytówka osoby */
.person {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.person__mark {
  width: 64px;
  height: 43px;
  fill: var(--blue);
  flex: none;
}
.person__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.1;
}
.person__role { color: var(--text-soft); }

/* Studio: adres, dojście i zdjęcia budynku (lewo) + mapa (prawo) */
.studio {
  display: grid;
  grid-template-columns: 3fr 4fr 5fr;
  gap: clamp(24px, 3.5vw, 56px);
  align-items: stretch;
}
.studio__door {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.studio__info { align-self: center; }
.studio__info { display: grid; gap: 14px; align-content: start; }
.studio__info .section-title { margin-bottom: 8px; }
.studio__address { font-weight: 900; font-size: 20px; }
.studio__how { color: var(--text-soft); }
.studio__route { justify-self: start; }
.studio__info .place-photos { margin-top: 12px; }

/* Kontakt: karta z przyciskami obok danych */
.contact__card {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 0;
}

/* CTA na granatowym tle z dwoma przyciskami */
.cta-band--navy { background: var(--navy); }
.cta-band--navy .cta-band__pattern { background-color: var(--blue); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-band__text { flex: 1; }                         /* tekst się zwęża, przyciski stoją w jednej linii */
.cta-band > .cta-band__actions { flex: none; }

.btn--outline-light {
  background: transparent;
  border-color: var(--beige);
  color: var(--beige);
}
.btn--outline-light:hover { background: var(--beige); color: var(--navy); }

/* Mapa (placeholder z wzorem → iframe po kliknięciu) */
.map {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--navy);
  overflow: hidden;
}
.map::before {                 /* jeden pionowy szlaczek wzoru, jak w boxach CTA */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: clamp(20px, 3vw, 40px);
  width: 120px;
  background-color: var(--blue);
  -webkit-mask-image: url("../assets/img/pattern.svg");
  mask-image: url("../assets/img/pattern.svg");
  -webkit-mask-size: 120px auto;
  mask-size: 120px auto;
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
  opacity: .5;
}
.map iframe {
  z-index: 1;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.map__load {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--beige);
}
.map__load svg {
  width: 56px;
  height: 56px;
  padding: 14px;
  border-radius: 50%;
  background: var(--blue);
  fill: none;
  stroke: var(--white);
  stroke-width: 2;
  transition: transform .5s var(--ease-bounce);
}
.map__load span { font-weight: 900; font-size: 22px; }
.map__load small { font-size: 14px; opacity: .7; }
.map__load:hover svg { transform: translateY(-6px) scale(1.08); }

.place-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.photo-ph {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 2px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
}
.place-photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.photo--top { object-position: 50% 15%; }


/* =========================================================================
   13. STOPKA
   ========================================================================= */
.footer {
  position: relative;
  padding-block: clamp(64px, 9vw, 112px) 32px;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
}
/* Stopka: jeden pionowy szlaczek wzoru (góra - dół) */
.footer__pattern {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 24px;
  width: 100px;
  background-color: var(--blue);
  -webkit-mask-image: url("../assets/img/pattern.svg");
  mask-image: url("../assets/img/pattern.svg");
  -webkit-mask-size: 100px auto;
  mask-size: 100px auto;
  -webkit-mask-repeat: repeat-y;
  mask-repeat: repeat-y;
  opacity: .45;
}
.footer__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* 4 równe kolumny */
  gap: 40px 32px;
}
.footer__who { margin-top: 6px; font-size: 14px; font-weight: 500; line-height: 1.5; opacity: .75; }
.footer__socials {
  display: flex;
  gap: 10px;
}
.footer__socials a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid rgba(247, 244, 242, .35);
  border-radius: 50%;
  transition: background-color .3s, border-color .3s, color .3s, transform .4s var(--ease-bounce);
}
.footer__socials a:hover {
  background: var(--beige);
  border-color: var(--beige);
  color: var(--navy);
  transform: translateY(-3px);
}
.footer__socials svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.footer__socials svg .fill { fill: currentColor; stroke: none; }
.footer__heading {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .6;
}
.footer__col {
  display: grid;
  gap: 10px;
  align-content: start;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.footer__col > span { font-weight: 500; opacity: .85; }
.footer__col a,
.footer__legal a { transition: opacity .2s; }
.footer__col a:hover,
.footer__legal a:hover { opacity: .7; }
/* szlaczek tylko tam, gdzie po prawej jest wolny margines - nie wchodzi na tekst */
@media (max-width: 1439px) { .footer__pattern { display: none; } }
.footer__bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .2);
  font-size: 14px;
  opacity: .85;
}


/* =========================================================================
   14. PRZYCISK „DO GÓRY” I PANEL POLITYKI (bottom sheet jak w iOS)
   ========================================================================= */

/* Przycisk do góry — JS dodaje .is-visible po przewinięciu dwóch sekcji */
.to-top {
  position: fixed;
  right: 20px;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--beige);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(.8);
  transition: opacity .35s, transform .45s var(--ease-bounce), visibility 0s .35s, background-color .25s;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .35s, transform .45s var(--ease-bounce), visibility 0s, background-color .25s;
}
.to-top:hover { background: var(--blue); }
.to-top svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .35s var(--ease);
}
.to-top:hover svg { transform: translateY(-3px); }

/* Linki polityk w stopce (to przyciski, wyglądają jak linki) */
.footer__legal button {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
  transition: opacity .2s;
}
.footer__legal button:hover { opacity: .7; }

/* Podgląd zdjęcia z galerii (pełny kadr na ciemnym tle) */
.lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: clamp(16px, 4vw, 56px);
  border: 0;
  background: transparent;
  overflow: hidden;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(0, 20, 50, .88); }
.lightbox__img {
  max-width: 100%;
  max-height: calc(100dvh - 2 * clamp(16px, 4vw, 56px));
  border-radius: var(--radius-md);
  object-fit: contain;
  animation: lightbox-in .35s var(--ease) both;
}
.lightbox__close {
  position: fixed;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--beige);
  color: var(--navy);
  transition: transform .35s var(--ease-bounce), background-color .25s;
}
.lightbox__close:hover { background: var(--white); transform: rotate(90deg); }
.lightbox__close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}
@keyframes lightbox-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* Panel wysuwany z dołu */
.sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: min(760px, 100%);
  max-width: 100%;
  max-height: 88vh;
  max-height: 88dvh;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 28px 28px 0 0;
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 -20px 60px -20px rgba(0, 30, 80, .45);
  transform: translateY(calc(100% + 40px));
  transition: transform .55s cubic-bezier(.32, .72, 0, 1);   /* krzywa ruchu jak w iOS */
}
.sheet[open] { display: flex; flex-direction: column; }
.sheet.is-open { transform: translateY(var(--drag, 0px)); }
.sheet.is-dragging { transition: none; }

.sheet::backdrop {
  background: rgba(0, 25, 70, .45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .4s;
}
.sheet.is-open::backdrop { opacity: 1; }

.sheet__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px clamp(20px, 4vw, 40px) 16px;
  border-bottom: 1px solid var(--line);
  cursor: grab;
  touch-action: none;   /* przeciąganie w dół zamyka panel */
}
.sheet.is-dragging .sheet__head { cursor: grabbing; }
.sheet__grabber {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 40px;
  height: 5px;
  margin-left: -20px;
  border-radius: 5px;
  background: rgba(0, 63, 152, .2);
}
.sheet__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.1;
}
.sheet__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--beige);
  transition: background-color .2s;
}
.sheet__close:hover { background: #ece7e3; }
.sheet__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.sheet__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px clamp(20px, 4vw, 40px) max(40px, env(safe-area-inset-bottom));
  font-size: 16px;
  line-height: 1.65;
}
.sheet__meta {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-soft);
}
.sheet__body h3 {
  margin-top: 28px;
  font-weight: 900;
  font-size: 18px;
  scroll-margin-top: 16px;
}
.sheet__body p,
.sheet__body ul { margin-top: 8px; color: var(--text-soft); }
.sheet__body ul { display: grid; gap: 8px; padding-left: 20px; list-style: disc; }
.sheet__body strong { color: var(--text); }
.sheet__body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* Blokada przewijania strony pod otwartym panelem */
html.sheet-open { overflow: hidden; }


/* =========================================================================
   15. ANIMACJE
   ========================================================================= */

/* Pojawianie się elementów przy scrollu (JS dodaje .is-visible).
   data-delay="1..4" = opóźnienie kaskadowe. */
[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity .9s var(--ease),
    transform 1s var(--ease);
  transition-delay: calc(var(--d, 0) * 110ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
[data-delay="1"] { --d: 1; }
[data-delay="2"] { --d: 2; }
[data-delay="3"] { --d: 3; }
[data-delay="4"] { --d: 4; }
[data-delay="5"] { --d: 5; }

/* Bez JavaScriptu treść jest od razu widoczna */
@media (scripting: none) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* Piesek (hero, logo, stopka): mruganie, węszenie, uśmiech */
.dog-eye,
.dog-nose,
.dog-mouth {
  transform-box: fill-box;
  transform-origin: center;
}
.dog-eye   { animation: blink 4.5s infinite; }
.dog-nose  { animation: sniff 3s ease-in-out infinite; }
.dog-mouth { transform-origin: top center; animation: smile 4.5s ease-in-out infinite; }

@keyframes float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.1); }
}
@keyframes sniff {
  0%, 100% { transform: translate(0, 0); }
  40%      { transform: translate(4px, -3px); }
  50%      { transform: translate(0, 0); }
  60%      { transform: translate(4px, -3px); }
}
@keyframes smile {
  0%, 70%, 100% { transform: scaleY(1); }
  80%           { transform: scaleY(1.15); }
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 95, 219, .5); }
  100% { box-shadow: 0 0 0 12px rgba(0, 95, 219, 0); }
}
@keyframes step-pop {
  0%   { transform: scale(.4); }
  100% { transform: scale(1); }
}
@keyframes play-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); }
  100% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0); }
}


/* =========================================================================
   16. RESPONSYWNOŚĆ
   ========================================================================= */

/* Desktop — włącz wzór w tle sekcji */
@media (min-width: 1100px) {
  .hero::before,
  .section::before { display: block; }
}

/* Desktop — każda sekcja mieści się w jednym widoku.
   Zdjęcia mają limit wysokości (--view = ekran minus odstępy sekcji), karty są niższe. */
@media (min-width: 1101px) {
  .project__media .photo  { max-height: calc(var(--view) - 48px); }
  .about__media .photo,
  .cause__media .photo    { max-height: var(--view); }
  .map                    { max-height: var(--view); }

  .place-photos .photo    { aspect-ratio: 3 / 2; }
  .gallery                { grid-auto-rows: clamp(130px, 19vh, 200px); }

  .feature__icon          { width: 44px; height: 44px; padding: 11px; }

  .world                  { padding: 12px 18px; }
  .world p                { font-size: 14.5px; }
  .worlds                 { gap: 10px; margin-top: 24px; }
  .about__lead            { font-size: 22px; }

  /* Tytuły sekcji skalowane też od wysokości ekranu - częściej mieszczą się w jednej linii */
  .section-title          { font-size: clamp(30px, min(3.4vw, 6.2vh), 52px); }
  .project__copy .project__lead { font-size: clamp(20px, 1.6vw, 24px); }

  .story .slides          { aspect-ratio: 16 / 9; }
  .event .slides          { aspect-ratio: 2 / 1; }
  #historie .section-head--split { grid-template-columns: 1fr auto; }   /* tytuł w jednej linii, przyciski obok */
  #historie .section-title { max-width: none; }
  .head-actions           { display: grid; grid-template-columns: repeat(2, auto); gap: 10px; }   /* 4 przyciski w siatce 2 x 2 - tytuł zostaje w jednej linii */
  .head-actions .btn-outline { padding: 12px 18px; }
  .cause__media .slides   { aspect-ratio: auto; height: 100%; min-height: 360px; }   /* wysokość kolumny z tekstem */
  .story__body            { padding: 18px 22px 20px; gap: 6px; }
  .story__name            { font-size: 26px; }
  .story__text            { font-size: 15px; }
  .event .photo--43       { aspect-ratio: 2.2 / 1; }
  .event__body            { padding: 20px 24px 24px; }
  .event__body p          { margin: 6px 0 12px; font-size: 15px; }

  .occasions              { gap: 20px; }
  .occasion               { padding: 20px 22px; }
  .occasion p             { font-size: 15px; }

  /* Cennik: kompaktowe karty zalet (ikona z boku) */
  .price-card             { padding: 28px 30px; }
  .price-card__price      { margin-top: 16px; font-size: clamp(60px, 5vw, 80px); }
  .price-card__note       { margin-top: 8px; }
  .checklist              { gap: 8px; margin: 16px 0 20px; padding-top: 16px; }
  .features               { gap: 16px; }
  /* karta zalety: ikona + tytuł w rzędzie, opis pod spodem na całą szerokość (jak w Okazjach) */
  .feature                { display: grid; grid-template-columns: 44px 1fr; align-items: center; align-content: start; gap: 10px 14px; padding: 18px 20px; }
  .feature h3             { margin-top: 0; font-size: 17px; line-height: 1.2; }
  .feature p              { grid-column: 1 / -1; margin-top: 0; font-size: 14.5px; }
  .addons__note           { font-size: 14px; }

  .cta-band               { padding: 26px 36px; }
  .cta-band h3            { font-size: clamp(24px, 2.4vw, 32px); }

  .fundraiser             { padding: 20px 24px; }

  .hero__lead             { max-width: none; white-space: nowrap; }   /* jedna linia na desktopie */
  .section-head--wide .section-title { font-size: clamp(28px, min(2.9vw, 5.6vh), 42px); white-space: nowrap; }

  /* „Psssst!” w dolnym marginesie sekcji Sesje - na końcu, ale bez wydłużania sekcji */
  /* „Psssst!” jako przerwa między sekcjami: naklejka na samej granicy Sesji i Przebiegu,
     z większym odstępem nad i pod (--psst-gap); JS lekko ją buja przy przewijaniu (--psst-p) */
  #sesje    { padding-bottom: var(--psst-gap); }
  #przebieg { padding-top: var(--psst-gap); }
  .psst {
    position: absolute;
    left: 50%;
    bottom: calc(var(--psst-gap) * -1);
    z-index: 3;
    margin: 0;
    translate: calc(-50% + var(--psst-p, 0) * 60px) 50%;
    rotate: calc(-2deg + var(--psst-p, 0) * -4deg);
    white-space: nowrap;
  }
  .fundraiser__title      { font-size: 20px; }
}


/* Mały desktop / tablet poziomo */
@media (max-width: 1100px) {
}

/* Menu mobilne (5 linków nie mieści się w poziomie poniżej 1080 px) */
@media (max-width: 1080px) {
  :root { --header-h: 68px; }

  .burger { display: block; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    padding: var(--header-h) var(--gutter) 40px;
    background: var(--navy);
    clip-path: circle(0 at calc(100% - var(--gutter) - 24px) calc(var(--header-h) / 2));
    visibility: hidden;
    transition: clip-path .6s var(--ease), visibility 0s .6s;
  }
  .menu-open .nav {
    clip-path: circle(150% at calc(100% - var(--gutter) - 24px) calc(var(--header-h) / 2));
    visibility: visible;
    transition: clip-path .6s var(--ease), visibility 0s;
  }
  .nav__list {
    flex-direction: column;
    gap: 4px;
  }
  .nav__link {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(34px, 9.6vw, 52px);
    line-height: 1.15;
    color: var(--beige);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s, transform .6s var(--ease);
  }
  .nav__link::after { display: none; }
  .nav__link.is-active { color: var(--beige); }
  .nav__cta {
    --btn-bg: var(--beige);
    --btn-fg: var(--navy);
    padding: 18px 32px;
    font-size: 18px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s, transform .6s var(--ease);
  }
  .nav__cta::after { content: "→"; }
  .nav .nav__cta:hover { --btn-bg: var(--white); }   /* na granatowym tle menu: jaśniej, nie granatowo */
  .menu-open .nav__link,
  .menu-open .nav__cta { opacity: 1; transform: none; }
  /* Linki wjeżdżają dopiero, gdy granatowe tło zakryje już ekran (inaczej koło ucina tekst) */
  .menu-open .nav li:nth-child(1) .nav__link { transition-delay: .32s; }
  .menu-open .nav li:nth-child(2) .nav__link { transition-delay: .38s; }
  .menu-open .nav li:nth-child(3) .nav__link { transition-delay: .44s; }
  .menu-open .nav li:nth-child(4) .nav__link { transition-delay: .50s; }
  .menu-open .nav li:nth-child(5) .nav__link { transition-delay: .56s; }
  .menu-open .nav__cta { transition-delay: .64s; }

}

/* Tablet */
@media (max-width: 1024px) {
  .occasions { grid-template-columns: 1fr 1fr; }
  .pricing { grid-template-columns: 1fr; }
  .stories { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  /* tablet: 6 zdjęć w równej siatce 3 x 2 */
  .gallery__item--narrow-only { display: block; }
  .gallery__item--tall,
  .gallery__item--wide { grid-row: auto; grid-column: auto; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

/* Tablet pionowo */
@media (max-width: 900px) {
  /* Telefon/tablet: tekst → piesek (cały nad linią zgięcia) → przyciski pod spodem */
  .hero__grid { grid-template-columns: 1fr; row-gap: 0; padding-bottom: 64px; }
  .hero__content { display: contents; }
  .hero__visual { order: 1; max-width: 360px; width: 76%; margin: 44px auto 0; }
  .hero__actions { order: 2; margin-top: max(48px, calc(100svh - 600px)); }   /* przyciski zaczynają się pod linią zgięcia */

  .section-head--split { grid-template-columns: 1fr; }
  .head-actions { justify-self: start; }

  .project { grid-template-columns: 1fr; }
  .project__media { max-width: 440px; margin-left: 12%; }

  .process,
  .studio,
  .about,
  .cause,
  .collab,
  .contact { grid-template-columns: 1fr; }
  .about__media { max-width: 440px; }
  .studio__door { max-width: 440px; height: auto; }

  .events { grid-template-columns: 1fr; }

  .cta-band { flex-direction: column; align-items: flex-start; }
  .cta-band__pattern { opacity: .3; }
}

/* Telefon */
@media (max-width: 600px) {
  .partners__grid { grid-template-columns: 1fr 1fr; }
  .worlds { grid-template-columns: 1fr; }
  .head-actions { justify-self: start; }
  body { font-size: 17px; }
  .btn { white-space: normal; text-align: center; }   /* długie etykiety przycisków łamią się zamiast rozpychać ekran */

  .hero { min-height: auto; padding-top: calc(var(--header-h) + 32px); }
  .hero__actions .btn { flex: 1 1 100%; white-space: normal; text-align: center; }

  .sticker { padding: 9px 13px; }
  .sticker strong { font-size: 18px; }
  .sticker--studio strong,
  .sticker--person strong { font-size: 15px; }
  .sticker__small { font-size: 12px; }
  /* mała karta na telefonie: naklejki przy krawędziach, żeby nie zasłaniały pieska */
  .sticker--cat { top: -6%; left: -6%; }
  .sticker--dog { top: 9%; right: -6%; }
  .sticker--studio { top: auto; bottom: 9%; left: -6%; }
  .sticker--person { bottom: -8%; right: -5%; }

  .stats { grid-template-columns: 1fr; gap: 28px; }

  .occasions { grid-template-columns: 1fr; }

  .stories { grid-template-columns: 1fr; }

  .features { grid-template-columns: 1fr; }
  .feature { padding: 26px; }

  .addons { grid-template-columns: 1fr; }
  .addons__row { flex-wrap: wrap; }

  /* Kroki sesji jako oś czasu: linia na środku, kropki z numerami, etapy na zmianę lewo / prawo.
     Niebieska linia „wypełnia się” przy przewijaniu (JS ustawia --line). */
  .steps__list {
    grid-template-columns: 1fr;
    row-gap: 36px;
    padding-block: 8px;
    overflow-x: clip;   /* kroki wjeżdżają z boków - nie mogą poszerzać strony */
  }
  .steps__list::before,
  .steps__list::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: auto;
    width: 2px;
    margin-left: -1px;
    border: 0;
    background: var(--line);
  }
  .steps__list::before {          /* tor z kropek */
    width: 4px;
    margin-left: -2px;
    background: radial-gradient(circle, rgba(0, 95, 219, .4) 2px, transparent 2.5px) center top / 4px 12px repeat-y;
  }
  .steps__list::after {
    background: var(--blue);
    transform-origin: top;
    transform: scaleY(var(--line, 0));
  }
  .step {
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
  }
  .step__num {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 52px;
    height: 52px;
    box-shadow: 0 0 0 6px var(--white);
  }
  .step h4,
  .step p { grid-column: 3; }
  .step h4 { margin-top: 12px; font-size: 17px; }
  .step p { font-size: 15px; }
  .step:nth-child(even) h4,
  .step:nth-child(even) p {
    grid-column: 1;
    text-align: right;
  }
  .step h4 { grid-row: 1; }
  .step p { grid-row: 2; }
  .step[data-reveal] { transform: translateX(-24px); opacity: 0; }
  .step:nth-child(even)[data-reveal] { transform: translateX(24px); }
  .step[data-reveal].is-visible { transform: none; opacity: 1; }

  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
  .gallery__item--tall { grid-row: span 2; }   /* telefon: 1. i 4. zdjęcie wysokie, reszta obok - bez dziur */

  .about__badge { right: 12px; }


  .cta-band .btn,
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { flex: 1; }

  /* stopka na telefonie: 2 x 2 kolumny, mail w dwóch liniach, ikony w dwóch rzędach */
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .footer__col { font-size: clamp(13px, 4vw, 15px); }   /* najdłuższe wiersze (mail, „Pieski warte Poznania”) mieszczą się w kolumnie */
  .footer__mail-end { display: block; }
  .footer__support { display: none; }
  .footer__socials { display: grid; grid-template-columns: repeat(2, 46px); gap: 10px; }
  .footer__who { margin-top: 10px; }
  .footer__bottom { flex-direction: column; }
}



/* =========================================================================
   17. OGRANICZONY RUCH — szanujemy ustawienia systemowe użytkownika
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}