/* ==========================================================================
   STUDIO SIENA — arkusz stylów
   Paleta i kształty zgodnie z briefem:
   - tekst #1c1c1c · tło #FAF7F2 · drugi kolor #7A3B47 · akcent #E8DDD1
   - REGUŁA KSZTAŁTU: elementy interaktywne = 10px, wszystko inne = 0px.
     Zdjęcia nigdy nie są zaokrąglone i nigdy nie mają ramek ani odstępów
     między sobą.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENY
   -------------------------------------------------------------------------- */
:root {
  /* kolory */
  --ink: #1c1c1c;
  --paper: #faf7f2;
  --wine: #7a3b47;
  --sand: #e8ddd1;

  --wine-deep: #63303a;
  --wine-tint: rgba(122, 59, 71, 0.08);
  --ink-60: rgba(28, 28, 28, 0.62);
  --ink-45: rgba(28, 28, 28, 0.45);
  --line: rgba(28, 28, 28, 0.12);
  --line-soft: rgba(28, 28, 28, 0.07);
  --paper-warm: #f4efe7;

  /* typografia */
  --display: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;

  --t-hero: clamp(2.375rem, 5.4vw, 4.75rem);
  --t-h2: clamp(2rem, 4vw, 3.4rem);
  --t-h3: clamp(1.375rem, 2vw, 1.75rem);
  --t-lead: clamp(1.0625rem, 1.25vw, 1.25rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-micro: 0.75rem;

  /* rytm — strona ma oddychać */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --section-y: clamp(5.5rem, 10vw, 10.5rem);
  /* dokładnie połowa --section-y na każdej szerokości */
  --section-y-half: clamp(2.75rem, 5vw, 5.25rem);
  --section-y-tight: clamp(3.5rem, 6vw, 6rem);
  --maxw: 1440px;
  --measure: 62ch;

  /* ruch — dyskretny, ale obecny */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 160ms;
  --dur-ui: 220ms;
  --dur-reveal: 620ms;

  /* kształty — jedna zasada na całą stronę:
     10px  elementy interaktywne i zdjęcia wewnątrz kart
     16px  karty
     0px   fotografia samodzielna: hero, galeria, bannery, pas zespołu */
  --r-soft: 10px;
  --r-card: 16px;
  --card-pad: 8px;

  /* wysokość fali — używana i przez same fale, i przez maskę płótna */
  --wave-h: clamp(34px, 4.6vw, 76px);

  /* pudrowe ziarno — używane na przyciskach i pasku voucherowym */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  /* przeglądarki mobilne rysują przy dotknięciu szary prostokąt na całym
     elemencie — na kafelku galerii wygląda to jak czarny kwadrat.
     Zamiast niego dajemy własną reakcję na `:active` (niżej). */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.65;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0; /* zdjęcia zawsze w ostrym kwadracie */
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  /* przeglądarka daje przyciskom własny padding (1px 6px) — bez tego
     zerowania obraz w kafelku galerii jest wsunięty i widać obwódkę tła */
  padding: 0;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  text-align: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 3px;
}

::selection {
  background: var(--sand);
  color: var(--ink);
}

/* --- reakcja na dotknięcie, w miejsce zdjętego podświetlenia systemowego ---
   Każdy element, w który da się kliknąć, musi dawać znak, że zadziałał. --- */
/* kafelek galerii: przyciemnienie zamiast skalowania — kafelki stykają się
   bez odstępów, więc każde zmniejszenie odsłoniłoby szparę */
.tile:active::after {
  opacity: 1;
}

/* karta zespołu ma transform sterowany skryptem (walec), więc reakcję
   na dotknięcie dajemy inną własnością, żeby się nie ścierały */
.member:active {
  filter: brightness(0.96);
}

.link:active,
.nav a:active,
.footer__links a:active,
.price-nav a:active,
.faq summary:active,
.contact dd a:active {
  opacity: 0.55;
}

.mobile-nav__item:active {
  color: var(--wine);
}

.social a:active {
  background: var(--wine-tint);
  transform: scale(0.94);
}

.map__zaslona .btn:active {
  transform: scale(0.97);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 999;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  transition: top var(--dur-ui) var(--ease-out);
}
.skip-link:focus {
  top: 1rem;
}

/* --------------------------------------------------------------------------
   3. UKŁAD
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: var(--section-y-tight);
}

/* Większość przerw między sekcjami ma jedno dopełnienie, bo z drugiej strony
   stoi pas pełnej szerokości (bordowy, baner), który własnego nie ma.
   Tam, gdzie stykają się dwie zwykłe sekcje, dopełnienia się sumowały
   i przerwa robiła się dwa razy większa. Połowa z każdej strony wyrównuje
   te miejsca do reszty strony. */
#dlaczego {
  padding-bottom: var(--section-y-half);
}

#galeria {
  padding-block: var(--section-y-half);
}

#zespol {
  padding-top: var(--section-y-half);
}

/* uwaga: max-width w `ch` liczy się względem fontu tekstowego kontenera,
   a nie nagłówka — dlatego tu jawne rem */
.section-head {
  max-width: min(100%, 44rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-head h2 {
  font-size: var(--t-h2);
}

.section-head p {
  margin-top: 1.25rem;
  color: var(--ink-60);
  font-size: var(--t-lead);
  line-height: 1.6;
  max-width: 34rem;
}

.eyebrow {
  display: block;
  font-family: var(--body);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 1.25rem;
  font-weight: 500;
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   4. PRZYCISKI — 10px + efekt pudrowy
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  white-space: nowrap;
  padding: 1.0625rem 1.75rem;
  border-radius: 10px;
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  overflow: hidden;
  transition: transform var(--dur-press) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out),
    background-color var(--dur-ui) var(--ease-out),
    color var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out);
}

/* warstwa pudru: matowe ziarno na całej powierzchni */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: 0.16;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* warstwa pudru: rozświetlenie rozchodzące się od środka przy hover */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(
    120% 160% at 50% 118%,
    rgba(232, 221, 209, 0.55) 0%,
    rgba(232, 221, 209, 0) 62%
  );
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out);
  pointer-events: none;
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background: var(--wine);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 1px 2px rgba(99, 48, 58, 0.18);
}

/* na jasnym tle przycisk drugorzędny też jest bordowy — obrys i tekst,
   żeby zachować hierarchię wobec przycisku wypełnionego */
.btn--ghost {
  background: transparent;
  color: var(--wine);
  border: 1px solid rgba(122, 59, 71, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn--sand {
  background: var(--sand);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.btn--onwine {
  background: var(--paper);
  color: var(--wine-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.btn--sm {
  padding: 0.8125rem 1.25rem;
  font-size: 0.875rem;
}

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

@media (hover: hover) and (pointer: fine) {
  .btn:hover::after {
    opacity: 1;
    transform: scale(1);
  }
  .btn--primary:hover {
    background: var(--wine-deep);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 10px 26px -12px rgba(99, 48, 58, 0.6);
  }
  .btn--ghost:hover {
    background: var(--wine-tint);
    border-color: rgba(122, 59, 71, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
      0 10px 26px -14px rgba(99, 48, 58, 0.45);
  }
  .btn--sand:hover,
  .btn--onwine:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55),
      0 10px 26px -14px rgba(99, 48, 58, 0.4);
  }
}

/* link tekstowy z podkreśleniem rysowanym od lewej */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--t-small);
  font-weight: 500;
  padding-bottom: 3px;
  transition: opacity 140ms var(--ease-out);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: color var(--dur-ui) var(--ease-out),
    background-size 320ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .link:hover {
    color: var(--wine);
    background-size: 0% 1px;
    background-position: 100% 100%;
  }
}

.link svg {
  transition: transform 320ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .link:hover svg {
    transform: translateX(4px);
  }
}

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 242, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-ui) var(--ease-out),
    background-color var(--dur-ui) var(--ease-out);
}

@supports not (backdrop-filter: blur(1px)) {
  .header {
    background: var(--paper);
  }
}

.header[data-scrolled="true"] {
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 72px;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Znak: kwadrat z dwoma przeciwległymi rogami zaokrąglonymi na 50 % —
   kształt liścia. Litera używa tego samego kroju co nagłówki. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  line-height: 1;
  flex-shrink: 0;
}

.logo__mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.125em;
  height: 2.125em;
  font-size: inherit;
  background: var(--wine);
  color: var(--paper);
  border-radius: 50% 0 50% 0;
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1;
  padding-bottom: 0.06em; /* wyrównanie optyczne litery w polu */
}

.logo__lockup {
  display: flex;
  flex-direction: column;
  gap: 0.28em;
}

.logo b {
  font-family: var(--display);
  font-size: 1.3125rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
}

.logo__lockup span {
  font-family: var(--body);
  font-size: 0.5625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink-45);
}

/* wariant na ciemne tło, gdyby sygnatura trafiła kiedyś na bordowy pas */
.logo--light .logo__mark {
  background: var(--paper);
  color: var(--wine);
}

.logo--light b {
  color: #fff;
}

.logo--light .logo__lockup span {
  color: rgba(255, 255, 255, 0.6);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
}

.nav a {
  position: relative;
  font-size: 0.9375rem;
  white-space: nowrap;
  padding-block: 0.25rem;
  transition: color var(--dur-ui) var(--ease-out);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .nav a:hover {
    color: var(--wine);
  }
  .nav a:hover::after {
    transform: scaleX(1);
  }
}

.nav a[aria-current="page"] {
  color: var(--wine);
}

.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}

.icon-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: var(--wine);
  border: 1px solid rgba(122, 59, 71, 0.32);
  transition: background-color var(--dur-ui) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

.icon-btn:active {
  transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover {
    background: var(--wine-tint);
  }
}

/* menu mobilne */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--paper);
  padding: 96px var(--gutter) var(--gutter);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-ui) var(--ease-out),
    transform var(--dur-ui) var(--ease-out), visibility 0s linear var(--dur-ui);
  overflow-y: auto;
}

.mobile-nav[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.mobile-nav a.mobile-nav__item {
  display: block;
  font-family: var(--display);
  font-size: 2rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateY(10px);
}

.mobile-nav[data-open="true"] a.mobile-nav__item {
  animation: navIn 420ms var(--ease-out) forwards;
}

.mobile-nav[data-open="true"] a.mobile-nav__item:nth-child(1) { animation-delay: 40ms; }
.mobile-nav[data-open="true"] a.mobile-nav__item:nth-child(2) { animation-delay: 80ms; }
.mobile-nav[data-open="true"] a.mobile-nav__item:nth-child(3) { animation-delay: 120ms; }
.mobile-nav[data-open="true"] a.mobile-nav__item:nth-child(4) { animation-delay: 160ms; }
.mobile-nav[data-open="true"] a.mobile-nav__item:nth-child(5) { animation-delay: 200ms; }
.mobile-nav[data-open="true"] a.mobile-nav__item:nth-child(6) { animation-delay: 240ms; }

@keyframes navIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-nav__foot {
  margin-top: auto;
  padding-top: 2.5rem;
  display: grid;
  gap: 0.75rem;
}

.mobile-nav__meta {
  font-size: var(--t-small);
  color: var(--ink-60);
  padding-top: 1.5rem;
}

body[data-lock="true"] {
  overflow: hidden;
}

@media (max-width: 1023px) {
  .nav,
  .header__actions .btn {
    display: none;
  }
  .icon-btn {
    display: inline-flex;
  }
}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
/* hero: zdjęcie jako tło, treść na wierzchu */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(540px, calc(100vh - 72px), 820px);
  min-height: clamp(540px, calc(100svh - 72px), 820px);
  overflow: hidden;
  background: var(--sand);
  /* bez kreski u dołu — przejście robi fala */
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 58%;
}

/* przyciemnienie wyłącznie po to, żeby tekst był czytelny — od lewej,
   prawa strona kadru z lustrami zostaje odsłonięta */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(22, 18, 17, 0.88) 0%,
    rgba(22, 18, 17, 0.72) 30%,
    rgba(22, 18, 17, 0.34) 56%,
    rgba(22, 18, 17, 0.08) 78%,
    rgba(22, 18, 17, 0.02) 100%
  );
}

.hero__copy {
  padding-block: clamp(3rem, 6vw, 5.5rem);
  color: #fff;
}

.hero__copy h1 {
  font-size: clamp(2.25rem, 4.4vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: #fff;
  max-width: 20ch;
}

.hero__copy h1 .l {
  display: block;
}

.hero__copy h1 .l--alt {
  font-style: italic;
  color: var(--sand);
  line-height: 1.16;
  padding-bottom: 0.06em; /* zapas na ogonki liter pochyłych */
}

.hero__sub {
  margin-top: clamp(1.375rem, 2.2vw, 1.875rem);
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-60);
  max-width: 46ch;
}

/* jasny wariant wyłącznie tam, gdzie podtytuł leży na zdjęciu */
.hero .hero__sub {
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 14px rgba(22, 18, 17, 0.35);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 2.8vw, 2.375rem);
}

/* na wąskim ekranie kadr poziomy przycina się mocno, więc treść schodzi
   na dół, a przyciemnienie idzie od dołu do góry */
@media (max-width: 767px) {
  .hero {
    align-items: end;
    min-height: clamp(560px, 84vh, 760px);
    min-height: clamp(560px, 84svh, 760px);
  }
  .hero__bg img {
    object-position: 58% 55%;
  }
  .hero::after {
    background: linear-gradient(
      to top,
      rgba(22, 18, 17, 0.92) 0%,
      rgba(22, 18, 17, 0.74) 38%,
      rgba(22, 18, 17, 0.38) 68%,
      rgba(22, 18, 17, 0.15) 100%
    );
  }
  /* zapas na falę u dołu, żeby nie wchodziła na przyciski */
  .hero__copy {
    padding-block: clamp(2.5rem, 8vw, 3.5rem) clamp(4.25rem, 13vw, 5.5rem);
  }
}

/* wariant dzielony — używany na stronie ślubnej */
.hero-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  /* bez kreski — przejście robi fala w kolumnie ze zdjęciem */
}

.hero-split__copy {
  padding: clamp(2.75rem, 5.5vw, 5rem) var(--gutter) clamp(3rem, 5.5vw, 5rem);
  align-self: center;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

.hero-split__copy h1 {
  font-size: clamp(2.25rem, 4.4vw, 3.875rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
  max-width: 17ch;
}

.hero-split__copy h1 em {
  font-style: italic;
  color: var(--wine);
  line-height: 1.16;
  display: inline-block;
  padding-bottom: 0.06em;
}

.hero-split__media {
  position: relative;
  overflow: hidden;
  height: clamp(340px, 52vh, 620px);
  background: var(--sand);
}

.hero-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

@media (min-width: 900px) {
  .hero-split {
    grid-template-columns: 1fr 0.92fr;
    min-height: min(760px, calc(100vh - 72px));
    min-height: min(760px, calc(100svh - 72px));
  }
  .hero-split__copy {
    padding-inline: var(--gutter) clamp(2rem, 4vw, 4rem);
    margin-inline: 0;
    margin-left: auto;
    max-width: calc(var(--maxw) * 0.52);
  }
  .hero-split__media {
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   7. USŁUGI — karty ze zdjęciem, tytułem i ceną
   Jedyne miejsce, gdzie zdjęcia są zaokrąglone i mają odstępy. Galeria,
   hero, bannery i pas zespołu nadal są w ostrym kadrze i stykają się bokami.
   -------------------------------------------------------------------------- */
.services {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

.service {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--card-pad);
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgba(99, 48, 58, 0.04),
    0 10px 28px -20px rgba(99, 48, 58, 0.28);
  transition: transform var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out);
}

.service:active {
  transform: scale(0.994);
}

.service__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--sand);
  border-radius: var(--r-soft);
}

.service__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .service:hover {
    transform: translateY(-3px);
    border-color: rgba(122, 59, 71, 0.18);
    box-shadow: 0 1px 2px rgba(99, 48, 58, 0.04),
      0 18px 40px -24px rgba(99, 48, 58, 0.42);
  }
  .service:hover .service__media img {
    transform: scale(1.04);
  }
}

.service__body {
  padding: clamp(1.25rem, 2vw, 1.625rem) clamp(0.5rem, 1vw, 0.75rem)
    clamp(0.5rem, 1vw, 0.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.service__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.service__body h3 {
  font-size: var(--t-h3);
}

.service__price {
  font-size: var(--t-small);
  color: var(--wine);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.service__body .link {
  margin-top: auto;
  padding-top: 1rem;
  align-self: flex-start;
}

/* w pasie 560–759 px karta jest szeroka i stoi sama w rzędzie, więc kadr 4:5
   robiłby się nienaturalnie wysoki — spłaszczamy go do 16:10 */
@media (min-width: 560px) and (max-width: 759px) {
  .service__media {
    aspect-ratio: 16 / 10;
  }
}

/* trzy kolumny dopiero od 760 px — niżej karta miałaby poniżej 190 px */
@media (min-width: 760px) {
  .services {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   7b. FALE — łączniki sekcji
   Fala jest wypełniona kolorem sekcji, z której „wypływa”. Na dole sekcji
   ze zdjęciem ma kolor tła strony, przy sekcjach bordowych — bordowy.
   -------------------------------------------------------------------------- */
.wave {
  position: absolute;
  left: -1px;
  right: -1px;
  width: calc(100% + 2px);
  height: var(--wave-h);
  line-height: 0;
  pointer-events: none;
  z-index: 4;
}


.wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* kolor fali sterowany zmienną, żeby nie zależeć od atrybutu fill w SVG */
.wave path {
  fill: var(--wave-fill, var(--paper));
}

.trust,
.voucher {
  --wave-fill: var(--wine);
}

/* Wszystkie fale używają jednej ścieżki: wypełnienie przy dolnej krawędzi,
   falisty brzeg u góry. Orientację ustawia CSS, nie osobne ścieżki w SVG.
   Uwaga: wypełnienie musi przylegać do sekcji, inaczej między falą a sekcją
   zostaje szczelina w kolorze tła. */
.wave--bottom {
  bottom: -1px;
}

/* wewnątrz sekcji, przy górnej krawędzi: odbicie w pionie przenosi
   wypełnienie do góry, więc kolor sąsiada wlewa się w sekcję od góry */
.wave--top {
  top: -1px;
  transform: scaleY(-1);
}

/* wypływa w górę: wypełnienie zostaje na dole, czyli przy sekcji */
.wave--over {
  top: 1px;
  transform: translateY(-100%);
}

/* wypływa w dół: odbicie w pionie przenosi wypełnienie na górę, do sekcji,
   a falisty brzeg na dół — i jest lustrem fali górnej, więc pasek jest
   symetryczny względem swojej osi poziomej */
.wave--under {
  bottom: 1px;
  transform: translateY(100%) scaleY(-1);
}

/* sekcja jasna na tle strony — fala w kolorze ciepłej bieli */
.section--warm {
  position: relative;
  isolation: isolate;
  background: var(--paper-warm);
  --wave-fill: var(--paper-warm);
}

/* --------------------------------------------------------------------------
   8. PASEK ZAUFANIA
   -------------------------------------------------------------------------- */
.trust {
  position: relative;
  isolation: isolate;
  background: var(--wine);
  color: #fff;
}

.trust::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: 0.18;
  mix-blend-mode: soft-light;
}

/* --- jedwabiste tło sekcji bordowych (shader w assets/js/silk.js) --- */
.silk {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  /* wysokość jawnie: canvas jest elementem zastępowanym i przy height:auto
     brałby swój wymiar wewnętrzny, który ustawia skrypt — powstawałaby pętla */
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}

/* --- wybrzuszenie: sekcja bordowa ma wyglądać, jakby wypychała stronę --- */
.trust,
.voucher {
  box-shadow: 0 -16px 34px -20px rgba(48, 20, 26, 0.55),
    0 16px 34px -20px rgba(48, 20, 26, 0.55);
}

/* przyciemnienie przy górnej i dolnej krawędzi daje wrażenie walca
   wychylonego w stronę patrzącego */
.trust::after,
.voucher::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(38, 16, 21, 0.42) 0%,
    rgba(38, 16, 21, 0.16) 9%,
    rgba(38, 16, 21, 0.02) 22%,
    rgba(38, 16, 21, 0) 40%,
    rgba(38, 16, 21, 0) 60%,
    rgba(38, 16, 21, 0.02) 78%,
    rgba(38, 16, 21, 0.16) 91%,
    rgba(38, 16, 21, 0.42) 100%
  );
}

/* pojawia się dopiero, gdy shader ruszył — bez WebGL zostaje płaskie tło */
.silk[data-ready="true"] {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .silk {
    transition: none;
  }
}

/* Siatka 2×2 na telefonie, 1×4 od 760 px. Wszystkie pola mają identyczne
   dopełnienie i tę samą wysokość (grid-auto-rows: 1fr), a kreski tworzą
   równy krzyż — sekcja jest symetryczna w obu osiach. */
.trust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
}

.trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(1.75rem, 6.5vw, 2.5rem) clamp(0.75rem, 3vw, 1.25rem);
}

.trust__item:nth-child(2n) {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.trust__item:nth-child(n + 3) {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.trust__icon {
  display: block;
  width: 26px;
  height: 26px;
  margin-bottom: 0.875rem;
  color: var(--sand);
  opacity: 0.9;
}

.trust__num {
  font-family: var(--display);
  font-size: clamp(1.875rem, 7.5vw, 2.5rem);
  line-height: 1;
  display: block;
  letter-spacing: -0.01em;
}

.trust__label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.76);
}

@media (min-width: 760px) {
  .trust__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .trust__item {
    padding: clamp(2rem, 3.8vw, 3rem) clamp(1rem, 2vw, 1.5rem);
    border-left: 1px solid rgba(255, 255, 255, 0.18);
  }
  /* ta sama swoistość co reguła włączająca kreskę poziomą w układzie 2×2,
     inaczej media query jej nie przebije */
  .trust__item:nth-child(n + 3) {
    border-top: 0;
  }
  .trust__item:first-child {
    border-left: 0;
  }
  .trust__label {
    font-size: var(--t-small);
    letter-spacing: 0;
  }
}

/* --------------------------------------------------------------------------
   9. DLACZEGO SIENA — pasek schodzący w dół odsłania kolejne powody
   -------------------------------------------------------------------------- */
/* Wszystkie punkty mają ikonę po lewej i wjeżdżają z lewej strony.
   Kolumna jest wyśrodkowana — na wąskim ekranie zajmuje całą szerokość,
   więc `margin-inline: auto` działa tam bez efektu. */
.why {
  display: grid;
  gap: clamp(2.25rem, 4.5vw, 3.75rem);
  /* punkt odsunięty w bok przed wjazdem wypychałby stronę w poziomie;
     `clip` przycina, nie tworząc kontenera przewijania */
  overflow-x: clip;
}

/* szerokość, nie max-width: przy max-width każdy punkt miałby własną
   szerokość zależną od długości tekstu i centrowałby się osobno,
   przez co ikony ustawiłyby się w zygzak zamiast w jednej pionowej linii */
.why__item {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  width: min(100%, 42rem);
  margin-inline: auto;
}

.why__icon-box {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(52px, 8vw, 62px);
  height: clamp(52px, 8vw, 62px);
  border-radius: 50%;
  background: var(--wine-tint);
  color: var(--wine);
}

.why__icon {
  width: 26px;
  height: 26px;
}

.why__item h3 {
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  margin-bottom: 0.4rem;
}

.why__item p {
  color: var(--ink-60);
  font-size: var(--t-small);
  line-height: 1.62;
}

/* wjazd z lewej, zgodnie ze stroną, po której stoi ikona.
   Odsunięcie mniejsze na wąskich ekranach: tam `overflow-x: clip` jest
   zabezpieczeniem, ale w starszym Safari nie zadziała. */
.why__item[data-reveal] {
  opacity: 0;
  transform: translateX(clamp(-56px, -7vw, -28px));
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}

.why__item[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .why__item[data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   10. GALERIA
   -------------------------------------------------------------------------- */
.gallery__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* na wąskim ekranie filtry idą pod nagłówkiem, na komputerze wracają
   z boku — nagłówek po lewej, grupa 3 + 2 po prawej */
.gallery__top--stack {
  flex-direction: column;
  align-items: stretch;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
}

@media (min-width: 1024px) {
  .gallery__top--stack {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2.5rem;
  }
  /* max-width mieści górny rząd, ale nie wszystkie pięć — grupa nie
     rozciąga się na całą wolną szerokość */
  .gallery__top--stack .filters {
    flex: 0 0 auto;
    max-width: 24rem;
  }
  /* nagłówek musi móc się zwęzić, inaczej przy 1024 px suma jego
     max-width i grupy filtrów przekracza kontener i całość zawija */
  .gallery__top--stack .section-head {
    flex: 1 1 20rem;
    min-width: 0;
  }
}

/* Układ 3 + 2: trzy filtry w górnym rzędzie, dwa w dolnym, oba wyśrodkowane.
   Podziału pilnuje pusty element o pełnej szerokości, wstawiony po trzecim
   przycisku — dzięki temu nie zależy od tego, ile się akurat zmieści. */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
}

.filters__break {
  flex-basis: 100%;
  height: 0;
}

/* lekkie przekrzywienie — każdy przycisk w swoją stronę */
.filter:nth-of-type(1) { rotate: -3.5deg; }
.filter:nth-of-type(2) { rotate: 2.5deg; }
.filter:nth-of-type(3) { rotate: -2deg; }
.filter:nth-of-type(4) { rotate: 3deg; }
.filter:nth-of-type(5) { rotate: -2.5deg; }

.filter {
  transition: background-color var(--dur-ui) var(--ease-out),
    color var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out),
    rotate var(--dur-ui) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

/* aktywny i wskazany prostują się — drobna nagroda za trafienie */
@media (hover: hover) and (pointer: fine) {
  .filter:hover {
    rotate: 0deg;
  }
}

.filter[aria-pressed="true"] {
  rotate: 0deg;
}

@media (prefers-reduced-motion: reduce) {
  .filter {
    rotate: 0deg !important;
  }
}

.filter {
  padding: 0.625rem 1.125rem;
  border-radius: 10px;
  border: 1px solid rgba(122, 59, 71, 0.24);
  font-size: 0.875rem;
  color: var(--wine);
  transition: background-color var(--dur-ui) var(--ease-out),
    color var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

.filter:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .filter:hover {
    background: var(--wine-tint);
    border-color: rgba(122, 59, 71, 0.5);
  }
}

.filter[aria-pressed="true"] {
  background: var(--wine);
  border-color: var(--wine);
  color: #fff;
}

/* siatka na pełną szerokość okna, bez odstępów i bez ramek */
.grid-flush {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  line-height: 0;
  width: 100%;
  background: var(--sand);
}

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--sand);
  cursor: zoom-in;
  /* domyka szpary subpikselowe między kolumnami o ułamkowej szerokości */
  margin: 0 -0.5px -0.5px 0;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 900ms var(--ease-out), opacity 320ms var(--ease-out);
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28, 28, 28, 0.14);
  opacity: 0;
  /* krótko, bo to samo przyciemnienie służy za reakcję na dotknięcie */
  transition: opacity 170ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .tile:hover img {
    transform: scale(1.045);
  }
  .tile:hover::after {
    opacity: 1;
  }
}

.tile[hidden] {
  display: none;
}

@media (min-width: 700px) {
  .grid-flush {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1100px) {
  .grid-flush {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Na bardzo szerokich ekranach dokładamy kolumny, żeby pojedynczy kadr nie był
   powiększany ponad rozdzielczość pliku źródłowego. Liczba kolumn zawsze dzieli
   12 bez reszty (2, 3, 4, 6), więc ostatni rząd nigdy nie jest niepełny. */
@media (min-width: 1700px) {
  .grid-flush {
    grid-template-columns: repeat(6, 1fr);
  }
}

.gallery__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
}

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(20, 18, 17, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-ui) var(--ease-out),
    visibility 0s linear var(--dur-ui);
}

.lightbox[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.lightbox__fig {
  margin: 0;
  max-width: min(92vw, 900px);
  max-height: 86vh;
  transform: scale(0.96);
  opacity: 0;
  transition: transform 280ms var(--ease-out), opacity 280ms var(--ease-out);
}

.lightbox[data-open="true"] .lightbox__fig {
  transform: scale(1);
  opacity: 1;
}

.lightbox__fig img {
  max-height: 78vh;
  width: auto;
  margin-inline: auto;
  object-fit: contain;
}

.lightbox__cap {
  color: rgba(250, 247, 242, 0.72);
  font-size: var(--t-small);
  text-align: center;
  padding-top: 1rem;
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  color: var(--paper);
  background: rgba(250, 247, 242, 0.1);
  border: 1px solid rgba(250, 247, 242, 0.18);
  transition: background-color var(--dur-ui) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

.lightbox__btn:active {
  transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
  .lightbox__btn:hover {
    background: rgba(250, 247, 242, 0.2);
  }
}

.lightbox__close {
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
}
.lightbox__prev {
  left: clamp(0.5rem, 3vw, 2rem);
  top: 50%;
  margin-top: -24px;
}
.lightbox__next {
  right: clamp(0.5rem, 3vw, 2rem);
  top: 50%;
  margin-top: -24px;
}

/* --------------------------------------------------------------------------
   11. ZESPÓŁ — pas portretów bez odstępów
   -------------------------------------------------------------------------- */
/* karuzela: karty blisko siebie, boczne pomniejszone względem środkowej */
.team-wrap {
  position: relative;
}

/* Szerokość karty dobrana tak, żeby po obu stronach aktywnej mieściły się
   dwie kolejne — klientka widzi, że zespół to więcej niż jedna osoba.
   Padding u dołu musi pomieścić cień, bo overflow-x tworzy kontener
   przewijania, który obcina wszystko poza obszarem dopełnienia. */
.team {
  /* węższa karta = więcej widać sąsiednich, mimo że odchylenie w 3D
     odsuwa je od krawędzi */
  --member-w: min(64vw, 260px);
  --member-gap: 8px;
  display: flex;
  gap: var(--member-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: clamp(1.5rem, 2.4vw, 2.25rem) clamp(3.25rem, 4.5vw, 4rem);
  padding-inline: calc(50% - var(--member-w) / 2);
}

.team::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .team {
    scroll-behavior: auto;
  }
}

.member {
  flex: 0 0 var(--member-w);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  padding: var(--card-pad);
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgba(99, 48, 58, 0.04),
    0 10px 28px -20px rgba(99, 48, 58, 0.28);
  transform-origin: center center;
  /* transform steruje skrypt w rytmie przewijania — transition tylko
     opóźniałaby reakcję; wygaszanie i cień mogą się płynnie zmieniać */
  transition: opacity 320ms var(--ease-out), box-shadow 320ms var(--ease-out),
    filter 160ms var(--ease-out);
  will-change: transform;
  backface-visibility: hidden;
}

.member.is-active {
  box-shadow: 0 1px 2px rgba(99, 48, 58, 0.05),
    0 22px 46px -26px rgba(99, 48, 58, 0.45);
}

.member__photo {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--sand);
  border-radius: var(--r-soft);
  display: grid;
  place-items: center;
}

.member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .member.is-active:hover .member__photo img {
    transform: scale(1.035);
  }
}

/* strzałki karuzeli */
.carousel-nav {
  display: flex;
  gap: 0.5rem;
}

.carousel-nav button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-soft);
  color: var(--wine);
  border: 1px solid rgba(122, 59, 71, 0.32);
  transition: background-color var(--dur-ui) var(--ease-out),
    opacity var(--dur-ui) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

.carousel-nav button:active {
  transform: scale(0.94);
}

.carousel-nav button[disabled] {
  opacity: 0.32;
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .carousel-nav button:not([disabled]):hover {
    background: var(--wine-tint);
  }
}

/* zastępczy monogram, dopóki nie ma zdjęcia portretowego */
.member__mono {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: clamp(3rem, 6vw, 4.5rem);
  color: var(--wine);
  background: var(--sand);
  box-shadow: inset 0 0 0 1px rgba(28, 28, 28, 0.06);
  opacity: 0;
  pointer-events: none;
}

.member.no-photo .member__mono {
  opacity: 1;
}

.member.no-photo .member__photo img {
  display: none;
}

.member__body {
  padding: clamp(1.125rem, 1.8vw, 1.5rem) clamp(0.5rem, 1vw, 0.75rem)
    clamp(0.5rem, 1vw, 0.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
}

.member__body h3 {
  font-size: 1.375rem;
}

.member__role {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wine);
}

.member__note {
  font-size: var(--t-small);
  color: var(--ink-60);
  line-height: 1.58;
  margin-top: 0.375rem;
  margin-bottom: 1.5rem;
}

.member__body .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* 900 px: aktywna + po jednej z każdej strony
   1400 px: aktywna + po dwie z każdej strony */
@media (min-width: 900px) {
  .team {
    --member-w: 262px;
    --member-gap: 14px;
  }
}

@media (min-width: 1400px) {
  .team {
    --member-w: 268px;
  }
}

/* --------------------------------------------------------------------------
   12. BANER (ślubny / pełnoekranowy)
   -------------------------------------------------------------------------- */
.banner {
  position: relative;
  isolation: isolate;
  min-height: clamp(440px, 62vh, 660px);
  display: grid;
  align-items: end;
  overflow: hidden;
}

.banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  z-index: -2;
}

.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(28, 24, 24, 0.72) 0%,
    rgba(28, 24, 24, 0.34) 45%,
    rgba(28, 24, 24, 0.06) 100%
  );
}

/* Na wąskim ekranie kadr poziomy przycina się mocno i tekst ląduje na twarzy.
   Zdjęcie przesuwa się w bok, a przyciemnienie sięga wyżej, żeby dolna
   połowa była spokojnym tłem pod tekst. */
@media (max-width: 767px) {
  .banner img {
    object-position: 64% 14%;
  }
  .banner::after {
    background: linear-gradient(
      to top,
      rgba(28, 24, 24, 0.86) 0%,
      rgba(28, 24, 24, 0.7) 38%,
      rgba(28, 24, 24, 0.4) 62%,
      rgba(28, 24, 24, 0.12) 100%
    );
  }
}

/* zapas u dołu na falę, żeby nie wchodziła na przycisk */
.banner__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter)
    calc(clamp(2.5rem, 5vw, 4.5rem) + var(--wave-h) * 0.7);
  color: #fff;
}

.banner__inner h2 {
  font-size: var(--t-h2);
  max-width: 18ch;
  color: #fff;
}

.banner__inner p {
  margin-top: 1.125rem;
  max-width: 48ch;
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--t-lead);
}

.banner__inner .btn {
  margin-top: 2rem;
}

.banner .eyebrow {
  color: var(--sand);
}

/* --------------------------------------------------------------------------
   13. OPINIE
   -------------------------------------------------------------------------- */
.quotes {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

/* karty w tym samym języku co usługi i zespół */
.quote {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgba(99, 48, 58, 0.04),
    0 10px 28px -20px rgba(99, 48, 58, 0.28);
}

.quote blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  line-height: 1.42;
  letter-spacing: -0.01em;
}

.quote figcaption {
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: var(--t-small);
  color: var(--ink-45);
}

.quote__stars {
  display: flex;
  gap: 3px;
  color: var(--wine);
  margin-bottom: 1.25rem;
}

/* trzy kolumny dopiero od 1024 px — przy 900 px cytat miał 166 px szerokości */
@media (min-width: 1024px) {
  .quotes {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* karuzela na telefonie i tablecie */
@media (max-width: 1023px) {
  .quotes--carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter);
  }
  .quotes--carousel::-webkit-scrollbar {
    display: none;
  }
  .quotes--carousel .quote {
    flex: 0 0 min(84%, 420px);
    scroll-snap-align: center;
  }
}

.dots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1.75rem;
}


.dots button {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--line);
  transition: background-color var(--dur-ui) var(--ease-out),
    transform var(--dur-ui) var(--ease-out);
}

.dots button[aria-current="true"] {
  background: var(--wine);
  transform: scale(1.35);
}

@media (min-width: 1024px) {
  .dots {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   14. PASEK VOUCHEROWY
   -------------------------------------------------------------------------- */
.voucher {
  position: relative;
  isolation: isolate;
  background: var(--wine);
  color: #fff;
}

.voucher::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: 0.18;
  mix-blend-mode: soft-light;
}

.voucher__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding-block: clamp(3.25rem, 6vw, 5rem);
}

.voucher h2 {
  font-size: clamp(1.625rem, 2.8vw, 2.375rem);
  color: #fff;
  max-width: 22ch;
}

.voucher p {
  margin-top: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--t-small);
  max-width: 46ch;
}

.voucher .btn {
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
}

/* --- animowany voucher: dwie karty założone na siebie --- */
/* Karty pionowe. Szerokość liczona tak, żeby rozchylone zmieściły się
   na ekranie: rozsunięcie w obie strony plus zapas na obrót wysokiej karty. */
.voucher-art {
  position: relative;
  width: min(196px, calc((100vw - 2 * var(--gutter)) / 1.9));
  aspect-ratio: 0.68 / 1;
  margin-block: clamp(2.5rem, 4.5vw, 3.5rem) clamp(0.5rem, 1.5vw, 1.25rem);
}

.voucher-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(0.875rem, 1.6vw, 1.25rem);
  border-radius: var(--r-card);
  transform-origin: 50% 100%;
  /* stan przed odsłonięciem: obie leżą płasko jedna na drugiej */
  transform: rotate(0deg) translate(0, 0);
  transition: transform 900ms var(--ease-out), opacity 700ms var(--ease-out);
}

.voucher-card--back {
  background: var(--sand);
  box-shadow: 0 12px 30px -18px rgba(28, 20, 20, 0.7);
  opacity: 0;
}

.voucher-card--front {
  background: var(--paper);
  box-shadow: 0 18px 40px -20px rgba(28, 20, 20, 0.75);
}

/* po wejściu w kadr karty rozchodzą się w przeciwne strony */
.voucher-art.is-in .voucher-card--back {
  opacity: 1;
  transform: rotate(-9deg) translate(-24%, -7%);
  transition-delay: 60ms;
}

.voucher-art.is-in .voucher-card--front {
  transform: rotate(6deg) translate(18%, 4%);
}

@media (hover: hover) and (pointer: fine) {
  .voucher-art.is-in:hover .voucher-card--back {
    transform: rotate(-13deg) translate(-32%, -10%);
  }
  .voucher-art.is-in:hover .voucher-card--front {
    transform: rotate(9deg) translate(25%, 6%);
  }
}

.voucher-card__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

/* sygnatura na voucherze: ten sam układ, mniejsza skala.
   Celujemy w konkretne elementy, bo `.logo span` łapałoby też sam znak. */
.voucher-card .logo {
  gap: 0.375rem;
  color: var(--ink);
}

.voucher-card .logo__mark {
  font-size: 0.6875rem;
}

.voucher-card .logo b {
  font-size: 0.875rem;
}

.voucher-card .logo__lockup span {
  font-size: 0.4375rem;
  letter-spacing: 0.2em;
}

.voucher-card__label {
  font-family: var(--body);
  font-size: 0.5625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wine);
}

.voucher-card__value {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 1.875rem);
  line-height: 1;
  color: var(--wine);
  text-align: left;
}

.voucher-card__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--ink-45);
  text-align: left;
}

.voucher-card--back .voucher-card__value,
.voucher-card--back .voucher-card__label {
  color: var(--wine-deep);
}

@media (prefers-reduced-motion: reduce) {
  .voucher-card--back {
    opacity: 1;
    transform: rotate(-9deg) translate(-24%, -7%);
  }
  .voucher-card--front {
    transform: rotate(6deg) translate(18%, 4%);
  }
}

/* --------------------------------------------------------------------------
   14b. OKNO ZAKUPU VOUCHERA
   Natywny <dialog>: focus trap, Escape i tło do kliknięcia mamy z pudełka.
   -------------------------------------------------------------------------- */
.modal {
  width: min(92vw, 27rem);
  max-height: 88dvh;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
  opacity: 0;
  transform: scale(0.96) translateY(10px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out),
    overlay 220ms allow-discrete, display 220ms allow-discrete;
}

.modal[open] {
  opacity: 1;
  transform: none;
}

@starting-style {
  .modal[open] {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
  }
}

.modal::backdrop {
  background: rgba(30, 18, 21, 0.5);
  opacity: 0;
  transition: opacity 220ms var(--ease-out), overlay 220ms allow-discrete,
    display 220ms allow-discrete;
}

.modal[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .modal[open]::backdrop {
    opacity: 0;
  }
}

.modal__card {
  position: relative;
  background: #fff;
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 4vw, 2rem);
  box-shadow: 0 30px 70px -30px rgba(30, 18, 21, 0.6);
  max-height: 88dvh;
  overflow-y: auto;
}

.modal__close {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-soft);
  color: var(--wine);
  transition: background-color var(--dur-ui) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

.modal__close:active {
  transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
  .modal__close:hover {
    background: var(--wine-tint);
  }
}

.modal__card h2 {
  font-size: 1.5rem;
  padding-right: 2.5rem;
}

.modal__lead {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: var(--t-small);
  color: var(--ink-60);
}

/* wybór kwoty i wersji — radio udające przyciski */
.choice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.choice label {
  flex: 1 1 0;
  min-width: 5.5rem;
  text-align: center;
  padding: 0.75rem 0.875rem;
  border: 1px solid rgba(122, 59, 71, 0.28);
  border-radius: var(--r-soft);
  font-size: 0.9375rem;
  color: var(--wine);
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out),
    color var(--dur-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .choice label:hover {
    background: var(--wine-tint);
  }
}

.choice input:checked + label {
  background: var(--wine);
  border-color: var(--wine);
  color: #fff;
}

.choice input:focus-visible + label {
  outline: 2px solid var(--wine);
  outline-offset: 2px;
}

/* pole kwoty z dopiskiem „zł" w środku ramki */
.amount {
  position: relative;
}

.amount input {
  padding-right: 3rem;
  font-family: var(--display);
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
}

/* strzałki przeglądarki tylko rozpraszają przy kwocie */
.amount input::-webkit-outer-spin-button,
.amount input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.amount input {
  -moz-appearance: textfield;
  appearance: textfield;
}

.amount__suffix {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-size: 1.125rem;
  color: var(--ink-45);
  pointer-events: none;
}

.modal__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-small);
  color: var(--ink-60);
}

.modal__total b {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--wine);
}

/* --------------------------------------------------------------------------
   15. KONTAKT
   -------------------------------------------------------------------------- */
/* bez kreski u góry — separację daje bordowa fala z sekcji voucherowej */
.contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.contact__media {
  position: relative;
  min-height: clamp(320px, 46vw, 420px);
  background: var(--sand);
}

.contact__media img,
.contact__media iframe {
  width: 100%;
  height: 100%;
  min-height: clamp(320px, 46vw, 420px);
  object-fit: cover;
  border: 0;
  display: block;
}

/* --- mapa wczytywana na żądanie --- */
.map__zaslona {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: var(--gutter);
  text-align: center;
  background: var(--sand);
  background-image: radial-gradient(
      rgba(122, 59, 71, 0.13) 1px,
      transparent 1px
    ),
    radial-gradient(rgba(122, 59, 71, 0.09) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px;
  background-position: 0 0, 13px 13px;
}

.map__pin {
  width: 40px;
  height: 40px;
  color: var(--wine);
}

.map__adres {
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1.35;
}

.map__akcje {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
}

/* po wczytaniu iframe zasłona znika */
.map.is-loaded .map__zaslona {
  display: none;
}

.contact__body {
  padding: clamp(2.5rem, 5vw, 5rem) var(--gutter);
}

.contact__body h2 {
  font-size: var(--t-h2);
}

.contact__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: clamp(2rem, 3.5vw, 3rem);
}

.contact dl {
  margin: 0;
}

.contact dt {
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-bottom: 0.5rem;
}

.contact dd {
  margin: 0 0 1.75rem;
  font-size: var(--t-body);
  line-height: 1.6;
}

.contact dd:last-child {
  margin-bottom: 0;
}

/* --- godziny otwarcia: dzisiejszy dzień na wierzchu, reszta tygodnia niżej --- */
.hours-card {
  --hours-pad: clamp(1.25rem, 4vw, 1.75rem);
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgba(99, 48, 58, 0.04),
    0 10px 28px -20px rgba(99, 48, 58, 0.28);
  overflow: hidden;
}

.hours-today {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: clamp(1.125rem, 3vw, 1.5rem) var(--hours-pad);
  background: var(--wine);
  color: #fff;
}

.hours-today__day {
  font-family: var(--display);
  font-size: 1.375rem;
  line-height: 1.1;
  margin-right: auto;
}

.hours-today__day small {
  display: block;
  font-family: var(--body);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: 0.3rem;
}

.hours-today__time {
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
}

.hours-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6875rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.hours-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8fd3a4;
  box-shadow: 0 0 0 3px rgba(143, 211, 164, 0.28);
}

.hours-status[data-open="false"]::before {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14);
}

/* Uwaga: przy `border-collapse: collapse` przeglądarka ignoruje dopełnienie
   samego <table>, dlatego odsunięcie od krawędzi karty siedzi na komórkach. */
.hours-week {
  font-size: var(--t-small);
  margin-block: 0.25rem 0.5rem;
}

.hours-week tr {
  border-bottom: 1px solid var(--line-soft);
}

.hours-week tr:last-child {
  border-bottom: 0;
}

.hours-week th,
.hours-week td {
  padding: 0.6875rem 0;
  text-align: left;
  font-weight: 400;
}

.hours-week th {
  padding-left: var(--hours-pad);
}

.hours-week td {
  padding-right: var(--hours-pad);
  padding-left: 1rem;
  text-align: right;
  color: var(--ink-60);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hours-week tr[data-today="true"] th,
.hours-week tr[data-today="true"] td {
  color: var(--wine);
  font-weight: 500;
}

.hours-note {
  padding: 0 var(--hours-pad) clamp(1rem, 1.8vw, 1.25rem);
  font-size: 0.8125rem;
  color: var(--ink-45);
}

/* mapa obok treści dopiero od 1024 px, a dwie kolumny danych od 1280 px —
   wcześniej kolumna kontaktu robiła się węższa niż 190 px */
@media (min-width: 1024px) {
  .contact {
    grid-template-columns: 1fr 1fr;
  }
  .contact__body {
    padding-inline: clamp(2rem, 5vw, 5rem);
  }
}

@media (min-width: 1280px) {
  .contact__cols {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
  }
}

/* --------------------------------------------------------------------------
   16. STOPKA
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 5vw, 4.5rem) 2rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.footer__grid h4 {
  font-family: var(--body);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-45);
  font-weight: 500;
  margin-bottom: 1rem;
}

.footer__links li {
  margin-bottom: 0.625rem;
}

.footer__links a {
  font-size: var(--t-small);
  color: var(--ink-60);
  transition: color var(--dur-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .footer__links a:hover {
    color: var(--wine);
  }
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  margin-top: clamp(2.5rem, 4vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8125rem;
  color: var(--ink-45);
}

/* dopisek o charakterze projektu — własny wiersz nad danymi firmy */
.footer__note {
  flex-basis: 100%;
  margin-bottom: 1rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r-soft);
  background: var(--wine-tint);
  color: var(--wine);
  font-size: 0.8125rem;
  line-height: 1.5;
  max-width: 56ch;
}

.footer__legal a {
  transition: color var(--dur-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .footer__legal a:hover {
    color: var(--wine);
  }
}

/* na tablecie dwie kolumny — cztery dawały pasy po 124 px */
@media (min-width: 620px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem clamp(2rem, 5vw, 4rem);
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1080px) {
  .footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: clamp(2rem, 4vw, 4rem);
  }
  .footer__brand {
    grid-column: auto;
  }
}

.footer__brand p {
  margin-top: 1rem;
  font-size: var(--t-small);
  color: var(--ink-60);
  max-width: 34ch;
}

.social {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  transition: background-color var(--dur-ui) var(--ease-out),
    color var(--dur-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .social a:hover {
    background: var(--sand);
    color: var(--wine);
  }
}

/* --------------------------------------------------------------------------
   17. CENNIK
   -------------------------------------------------------------------------- */
.price-nav {
  position: sticky;
  top: 72px;
  z-index: 40;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.price-nav ul {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0.75rem var(--gutter);
}

.price-nav ul::-webkit-scrollbar {
  display: none;
}

.price-nav a {
  display: inline-block;
  white-space: nowrap;
  padding: 0.5625rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(122, 59, 71, 0.24);
  font-size: 0.875rem;
  color: var(--wine);
  transition: background-color var(--dur-ui) var(--ease-out),
    color var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out);
}

.price-nav a[aria-current="true"] {
  background: var(--wine);
  border-color: var(--wine);
  color: #fff;
}

.price-table {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 56rem; /* tabela o dwóch kolumnach na pełnej szerokości jest nieczytelna */
}

.price-table caption {
  text-align: left;
  font-family: var(--display);
  font-size: var(--t-h3);
  padding-bottom: 1.25rem;
}

.price-table th {
  font-family: var(--body);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-45);
  font-weight: 500;
  text-align: left;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.price-table th:last-child {
  text-align: right;
}

.price-table td {
  padding: 1.0625rem 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: baseline;
}

.price-table tr:last-child td {
  border-bottom: 1px solid var(--line);
}

.price-table td:last-child {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-left: 1.5rem;
}

@media (max-width: 520px) {
  .price-table td:last-child {
    white-space: normal;
    padding-left: 1rem;
  }
}

.price-table .svc-note {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-45);
  margin-top: 0.25rem;
  max-width: 46ch;
}

.price-cat {
  padding-block: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: 132px;
}

.price-cat:first-of-type {
  border-top: 0;
}

.price-cat__head {
  max-width: min(100%, 44rem);
}

.price-cat__head h2 {
  font-size: var(--t-h2);
}

.price-cat__head p {
  margin-top: 1.125rem;
  color: var(--ink-60);
  font-size: var(--t-lead);
  line-height: 1.6;
  max-width: 34rem;
}

.packages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.package {
  background: var(--paper);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.package h3 {
  font-size: 1.375rem;
}

.package__price {
  font-family: var(--display);
  font-size: 1.75rem;
  color: var(--wine);
}

.package__price s {
  font-size: 1rem;
  color: var(--ink-45);
  margin-left: 0.5rem;
}

.package p {
  font-size: var(--t-small);
  color: var(--ink-60);
  line-height: 1.58;
}

@media (min-width: 820px) {
  .packages {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   18. STRONA ŚLUBNA
   -------------------------------------------------------------------------- */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line-soft);
}

.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--display);
  font-size: 0.9375rem;
  color: var(--wine);
  padding-top: 0.35rem;
  letter-spacing: 0.06em;
}

.step h3 {
  font-size: 1.375rem;
  margin-bottom: 0.5rem;
}

.step p {
  color: var(--ink-60);
  font-size: var(--t-small);
  line-height: 1.62;
  max-width: 56ch;
}

/* Odstęp po prawej powiększony o wartość letter-spacing — ostatnia litera
   ciągnie za sobą światło, przez które tekst wydaje się dotykać ramki. */
.step__when {
  display: inline-block;
  margin-top: 0.875rem;
  font-size: var(--t-micro);
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wine);
  border: 1px solid rgba(122, 59, 71, 0.18);
  background: var(--wine-tint);
  border-radius: var(--r-soft);
  padding: 0.5rem 0.875rem 0.5rem 1rem;
  padding-right: calc(1rem - 0.14em);
}

.includes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}

.include {
  padding-block: clamp(1.5rem, 2.5vw, 2rem);
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 1rem;
  align-items: baseline;
}

.include svg {
  width: 22px;
  height: 22px;
  color: var(--wine);
  transform: translateY(4px);
}

.include h3 {
  font-family: var(--body);
  font-size: var(--t-body);
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.include p {
  font-size: var(--t-small);
  color: var(--ink-60);
  max-width: 50ch;
}

@media (min-width: 860px) {
  .includes {
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(3rem, 6vw, 6rem);
  }
}

/* formularz */
.form {
  display: grid;
  gap: 1.25rem;
}

.form__fields {
  display: grid;
  gap: 1.25rem;
}

/* lista bez numeracji — używana tam, gdzie kroki nie mają kolejności */
.plain-list {
  border-top: 1px solid var(--line);
}

.plain-list > li {
  padding-block: clamp(1.375rem, 2.4vw, 1.875rem);
  border-bottom: 1px solid var(--line-soft);
}

.plain-list > li:last-child {
  border-bottom: 0;
}

.plain-list h3 {
  font-size: 1.1875rem;
  margin-bottom: 0.5rem;
}

.plain-list p {
  color: var(--ink-60);
  font-size: var(--t-small);
  line-height: 1.62;
  max-width: 56ch;
}

.field {
  display: grid;
  gap: 0.5rem;
}

.field label,
.field .field-label {
  font-size: 0.875rem;
  font-weight: 500;
}

/* etykieta grupy radio nie jest <label>, więc nie dziedziczy odstępu */
.field .field-label {
  display: block;
}

.field .hint {
  font-size: 0.8125rem;
  color: var(--ink-60);
}

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: var(--t-body);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.875rem 1rem;
  width: 100%;
  transition: border-color var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out);
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(28, 28, 28, 0.42);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px var(--wine-tint);
}

.field textarea {
  min-height: 128px;
  resize: vertical;
}

.field .error {
  font-size: 0.8125rem;
  color: #a3323f;
  display: none;
}

.field[data-invalid="true"] input,
.field[data-invalid="true"] select {
  border-color: #a3323f;
}

.field[data-invalid="true"] .error {
  display: block;
}

.form__row {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 700px) {
  .form__row {
    grid-template-columns: 1fr 1fr;
  }
}

.form__ok {
  display: none;
  border: 1px solid var(--wine-tint);
  background: var(--wine-tint);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  font-size: var(--t-small);
  color: var(--wine-deep);
}

.form[data-sent="true"] .form__ok {
  display: block;
}

.form[data-sent="true"] .form__fields {
  display: none;
}

/* FAQ */
.faq {
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line-soft);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.25rem, 2.4vw, 1.75rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  line-height: 1.35;
  transition: color var(--dur-ui) var(--ease-out);
}

.faq summary::-webkit-details-marker {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .faq summary:hover {
    color: var(--wine);
  }
}

.faq summary span {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  position: relative;
  margin-top: 0.35em;
}

.faq summary span::before,
.faq summary span::after {
  content: "";
  position: absolute;
  background: currentColor;
  left: 50%;
  top: 50%;
  transition: transform 280ms var(--ease-out);
}

.faq summary span::before {
  width: 14px;
  height: 1px;
  transform: translate(-50%, -50%);
}

.faq summary span::after {
  width: 1px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.faq details[open] summary span::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__answer {
  overflow: hidden;
}

.faq details[open] .faq__answer {
  animation: faqIn 300ms var(--ease-out);
}

@keyframes faqIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.faq__answer p {
  padding-bottom: 1.75rem;
  color: var(--ink-60);
  font-size: var(--t-small);
  line-height: 1.68;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   19. RUCH — pojawianie się przy przewijaniu
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

[data-reveal-stagger].is-in > * {
  opacity: 1;
  transform: none;
}

[data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: 60ms; }
[data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: 120ms; }
[data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: 180ms; }
[data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   20. DROBIAZGI
   -------------------------------------------------------------------------- */
.u-measure {
  max-width: var(--measure);
}

.u-mt {
  margin-top: clamp(2rem, 3.5vw, 3rem);
}

.lede {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-60);
  max-width: var(--measure);
}

.note {
  font-size: var(--t-small);
  color: var(--ink-45);
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 0.9fr 1.1fr;
  }
  .split--even {
    grid-template-columns: 1fr 1fr;
  }
}

.sticky-aside {
  position: sticky;
  top: 104px;
}